/**
 * DSI Tarifications — Program Flag Addon CSS v2.0
 *
 * Premium B2B tarification badge styling for product-flags.tpl.
 * Replaces the generic "discount" look with a branded DSI professional label.
 *
 * Architecture:
 *   .dsi-program-flag          — the <li> container (replaces default .product-flag)
 *   .dsi-pflag__level-icon     — SVG icon indicating level
 *   .dsi-pflag__brand-label    — "DSI" text
 *   .dsi-pflag__sep            — visual separator "|"
 *   .dsi-pflag__discount       — "-XX%" numeric value
 *   .dsi-pflag__label          — program name text
 *   .dsi-pflag__info-icon      — info circle trigger
 *
 * @author    CLOUD-TELECOM
 * @copyright 2025 CLOUD-TELECOM
 */

/* ===========================================================================
   RESET — strip native product-flag positioning & generic discount look
   =========================================================================== */

.product-flags .dsi-program-flag,
.product-flags li.dsi-program-flag {
    /* PrestaShop themes often use position:absolute on .product-flag */
    position: relative !important;

    /* Layout */
    display:        inline-flex;
    align-items:    center;
    gap:            5px;

    /* Sizing */
    padding:        5px 10px 5px 8px;
    border-radius:  30px;
    height:         auto;
    max-width:      none;

    /* DSI Default gradient — overridden by level modifiers below */
    background:     linear-gradient(135deg, #119fb4 0%, #0a7a8a 100%);
    color:          #fff;

    /* Typography */
    font-family:    inherit;
    font-size:      11px;
    font-weight:    600;
    line-height:    1.2;
    letter-spacing: 0.2px;
    white-space:    nowrap;
    text-transform: none;

    /* Depth */
    box-shadow:     0 2px 8px rgba(17, 159, 180, 0.40), 0 1px 3px rgba(0,0,0,0.15);

    /* Interaction */
    cursor:         pointer;
    transition:     transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;

    /* Override margin resets some themes apply */
    margin:         2px 0;
}

/* Hover state — lift + glow */
.product-flags .dsi-program-flag:hover {
    transform:   translateY(-1px);
    box-shadow:  0 4px 14px rgba(17, 159, 180, 0.55), 0 2px 6px rgba(0,0,0,0.18);
    filter:      brightness(1.07);
}

/* Focus ring for keyboard accessibility */
.product-flags .dsi-program-flag:focus-visible {
    outline:        2px solid #fff;
    outline-offset: 2px;
}

/* Active press */
.product-flags .dsi-program-flag:active {
    transform:   translateY(0);
    box-shadow:  0 1px 4px rgba(17, 159, 180, 0.45);
}

/* ===========================================================================
   INNER ELEMENTS
   =========================================================================== */

/* Level SVG icon */
.dsi-pflag__level-icon {
    display:      flex;
    align-items:  center;
    flex-shrink:  0;
    opacity:      0.92;
    line-height:  0;
}

/* "DSI" brand text */
.dsi-pflag__brand-label {
    font-size:      9px;
    font-weight:    800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity:        0.85;
    flex-shrink:    0;
}

/* Separator "|" */
.dsi-pflag__sep {
    opacity:    0.4;
    font-size:  10px;
    flex-shrink: 0;
}

/* Discount value  "-XX%" */
.dsi-pflag__discount {
    font-size:   13px;
    font-weight: 800;
    letter-spacing: -0.4px;
    flex-shrink: 0;
    line-height: 1;
}

/* Program name */
.dsi-pflag__label {
    font-size:      10px;
    font-weight:    500;
    opacity:        0.9;
    max-width:      130px;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}

/* Info icon */
.dsi-pflag__info-icon {
    display:      flex;
    align-items:  center;
    flex-shrink:  0;
    opacity:      0.75;
    line-height:  0;
    margin-left:  1px;
    transition:   opacity 0.15s;
}

.product-flags .dsi-program-flag:hover .dsi-pflag__info-icon {
    opacity: 1;
}

/* ===========================================================================
   LEVEL COLOUR MODIFIERS
   =========================================================================== */

/* Standard / default — fallback is the primary DSI teal set above */

.dsi-program-flag--bronze {
    background: linear-gradient(135deg, #d4883a 0%, #a0522d 100%) !important;
    box-shadow: 0 2px 8px rgba(160, 82, 45, 0.40), 0 1px 3px rgba(0,0,0,0.15);
}
.dsi-program-flag--bronze:hover {
    box-shadow: 0 4px 14px rgba(160, 82, 45, 0.55), 0 2px 6px rgba(0,0,0,0.18) !important;
}

.dsi-program-flag--silver {
    background: linear-gradient(135deg, #9e9e9e 0%, #616161 100%) !important;
    box-shadow: 0 2px 8px rgba(97, 97, 97, 0.40), 0 1px 3px rgba(0,0,0,0.15);
}
.dsi-program-flag--silver:hover {
    box-shadow: 0 4px 14px rgba(97, 97, 97, 0.55), 0 2px 6px rgba(0,0,0,0.18) !important;
}

.dsi-program-flag--gold {
    background: linear-gradient(135deg, #f5a623 0%, #d4831a 100%) !important;
    box-shadow: 0 2px 8px rgba(212, 131, 26, 0.50), 0 1px 3px rgba(0,0,0,0.15);
}
.dsi-program-flag--gold:hover {
    box-shadow: 0 4px 14px rgba(212, 131, 26, 0.65), 0 2px 6px rgba(0,0,0,0.18) !important;
}

.dsi-program-flag--platinum {
    background: linear-gradient(135deg, #78909c 0%, #37474f 100%) !important;
    box-shadow: 0 2px 8px rgba(55, 71, 79, 0.40), 0 1px 3px rgba(0,0,0,0.15);
}
.dsi-program-flag--platinum:hover {
    box-shadow: 0 4px 14px rgba(55, 71, 79, 0.55), 0 2px 6px rgba(0,0,0,0.18) !important;
}

.dsi-program-flag--diamond {
    background: linear-gradient(135deg, #119fb4 0%, #0c6e7e 50%, #07505c 100%) !important;
    box-shadow: 0 2px 10px rgba(17, 159, 180, 0.55), 0 1px 3px rgba(0,0,0,0.18),
                inset 0 1px 0 rgba(255,255,255,0.2);
}
.dsi-program-flag--diamond:hover {
    box-shadow: 0 5px 18px rgba(17, 159, 180, 0.70), 0 2px 8px rgba(0,0,0,0.2),
                inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ===========================================================================
   QUICK-VIEW TOOLTIP (inline popover shown on flag hover — no modal needed)
   =========================================================================== */

.dsi-pflag-tooltip {
    position:       absolute;
    bottom:         calc(100% + 8px);
    left:           50%;
    transform:      translateX(-50%) translateY(4px);
    background:     #0d1b2a;
    color:          #f0f4f8;
    border-radius:  10px;
    padding:        10px 14px;
    font-size:      11px;
    line-height:    1.5;
    white-space:    nowrap;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.2s ease, transform 0.2s ease;
    z-index:        900;
    box-shadow:     0 6px 20px rgba(0,0,0,0.3);
    border:         1px solid rgba(255,255,255,0.08);
}

/* Arrow */
.dsi-pflag-tooltip::after {
    content:      '';
    position:     absolute;
    top:          100%;
    left:         50%;
    transform:    translateX(-50%);
    border:       5px solid transparent;
    border-top-color: #0d1b2a;
}

.dsi-pflag-tooltip strong {
    display:       block;
    font-size:     12px;
    font-weight:   700;
    margin-bottom: 2px;
    color:         #fff;
}

.dsi-pflag-tooltip .tarif-rate {
    color:       #6ee7f7;
    font-weight: 700;
    font-size:   13px;
}

/* Show on flag hover (JS also triggers this) */
.dsi-program-flag:hover .dsi-pflag-tooltip,
.dsi-program-flag:focus-within .dsi-pflag-tooltip {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

/* The <li> needs position:relative for tooltip positioning */
li.dsi-program-flag {
    position: relative !important;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */

@media (max-width: 768px) {
    .dsi-pflag__label {
        max-width: 90px;
    }
}

@media (max-width: 480px) {
    /* On small screens: hide name + brand label — keep discount visible */
    .dsi-pflag__label,
    .dsi-pflag__brand-label,
    .dsi-pflag__sep {
        display: none;
    }

    .product-flags .dsi-program-flag {
        padding:   4px 9px;
        font-size: 12px;
    }

    .dsi-pflag__discount {
        font-size: 12px;
    }

    /* On mobile the tooltip breaks, replace with native title attribute */
    .dsi-pflag-tooltip {
        display: none;
    }
}

/* ===========================================================================
   SHINING BADGES (Used in Carousel & Categories)
   =========================================================================== */

.dsi-shining-badges-container {
    display: inline-flex;
    gap: 8px;
    margin: 5px 0;
    pointer-events: auto;
}

.dsi-shining-badge {
    position: relative;
    background: linear-gradient(135deg, #119fb4 0%, #0a7a8a 100%);
    color: #fff;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    animation: dsi-slide-up 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    transition: box-shadow 0.4s ease;
    box-shadow: 0 4px 10px rgba(17, 159, 180, 0.3);
    border: 1px solid rgba(255,255,255,0.1);
    min-width: 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 35px;
}

/* Base level styling matching existing flags */
.dsi-shining-badge.dsi-level-bronze { background: linear-gradient(135deg, #d4883a 0%, #a0522d 100%); box-shadow: 0 4px 10px rgba(160, 82, 45, 0.3); }
.dsi-shining-badge.dsi-level-silver { background: linear-gradient(135deg, #9e9e9e 0%, #616161 100%); box-shadow: 0 4px 10px rgba(97, 97, 97, 0.3); }
.dsi-shining-badge.dsi-level-gold { background: linear-gradient(135deg, #f5a623 0%, #d4831a 100%); box-shadow: 0 4px 10px rgba(212, 131, 26, 0.4); }
.dsi-shining-badge.dsi-level-platinum { background: linear-gradient(135deg, #78909c 0%, #37474f 100%); box-shadow: 0 4px 10px rgba(55, 71, 79, 0.3); }
.dsi-shining-badge.dsi-level-diamond { background: linear-gradient(135deg, #119fb4 0%, #0c6e7e 50%, #07505c 100%); }

/* The shining light effect */
.dsi-shining-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    animation: shine 4s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

/* Inner content */
.dsi-shining-badge-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 21px; /* keeps it centered vertically within the 35px container */
    flex-shrink: 0;
}

.dsi-shining-badge .dsi-badge-icon {
    font-size: 14px;
    line-height: 1;
}

/* Hover Content */
.dsi-shining-badge-hover {
    width: 100%;
    margin-top: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    flex-shrink: 0;
}

.dsi-badge-discount {
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.dsi-badge-level {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.dsi-badge-entity {
    font-size: 8px;
    text-transform: uppercase;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

/* Hover Interaction */
.dsi-shining-badge:hover {
    height: 90px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.2) !important;
    animation: dsi-slide-down 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes dsi-slide-down {
    0% { height: 35px; }
    100% { height: 90px; }
}

@keyframes dsi-slide-up {
    0% { height: 90px; }
    100% { height: 35px; }
}

/* ===========================================================================
   V2 DISPLAY — DETAILED TARIFICATION FLAG
   =========================================================================== */

.product-flags .dsi-program-flag-v2,
.product-flags li.dsi-program-flag-v2 {
    position: relative !important;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    height: auto;
    max-width: 100%;
    margin: 2px 0;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    background: #333; /* Default fallback */
}

.product-flags .dsi-program-flag-v2:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.25);
    filter: brightness(1.1);
}

.dsi-pflag-v2__brand {
    opacity: 0.95;
    letter-spacing: 0.5px;
}

.dsi-pflag-v2__sep {
    opacity: 0.7;
    margin: 0 2px;
}

.dsi-pflag-v2__discount {
    font-weight: 800;
}

/* V2 Colors Base per Level */
.dsi-pflag-v2--diamond {
    background: linear-gradient(135deg, #175d69 0%, #0d383f 100%);
    border-left: 2px solid #119fb4;
}
.dsi-pflag-v2--platinum {
    background: linear-gradient(135deg, #455a64 0%, #263238 100%);
    border-left: 2px solid #78909c;
}
.dsi-pflag-v2--gold {
    background: linear-gradient(135deg, #8a5814 0%, #503108 100%);
    border-left: 2px solid #f5a623;
}
.dsi-pflag-v2--silver {
    background: linear-gradient(135deg, #616161 0%, #424242 100%);
    border-left: 2px solid #9e9e9e;
}
.dsi-pflag-v2--bronze {
    background: linear-gradient(135deg, #70381e 0%, #4a2412 100%);
    border-left: 2px solid #a0522d;
}
.dsi-pflag-v2--standard {
    background: linear-gradient(135deg, #5c6bc0 0%, #283593 100%);
    border-left: 2px solid #c5cae9;
}