/**
 * H2J Timer — Countdown timer stylesheet (3 designs)
 *
 * @author    H2J Ecosystem <info@2klove.fr>
 * @copyright 2024-2026 H2J sas RCS 978391720
 * @license   Commercial license
 * @since     v2.14.2 (Roadmap 1 Session 7)
 *
 * Variables pilotées par H2JTimer::getCssVars() et par les inline style attr
 * émis sur chaque instance du timer (BG, TEXT, ACCENT).
 *
 * 3 designs coexistent via les classes modificateurs :
 *   .h2j-timer--minimal  — inline text, minimal visual weight
 *   .h2j-timer--flip     — 4 animated cards
 *   .h2j-timer--digital  — LED monospace
 *
 * Les contextes d'affichage (home/cat/prod) ajoutent .h2j-timer--ctx-{home|cat|prod}
 * qui peut être utilisé pour tweaker le padding/marging selon le placement.
 */

/* ═══════════════════════════════════════════════════════════
   BASE (tous designs)
   ═══════════════════════════════════════════════════════════ */
.h2j-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--h2j-timer-bg, #1a1f2c);
    color: var(--h2j-timer-text, #ffffff);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
    flex-wrap: wrap;
    text-align: center;
}

.h2j-timer__label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    color: var(--h2j-timer-text, #ffffff);
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   CONTEXT modifiers — padding/margin selon position
   ═══════════════════════════════════════════════════════════ */
.h2j-timer--ctx-home,
.h2j-timer--ctx-cat {
    /* Banner full-width pour home/cat : padding généreux */
    padding: 14px 20px;
    width: 100%;
}

.h2j-timer--ctx-prod {
    /* Dans une fiche produit : padding plus serré, inline-like */
    padding: 8px 14px;
    margin: 10px 0;
    border-radius: 6px;
    width: auto;
    display: inline-flex;
}

/* ═══════════════════════════════════════════════════════════
   DESIGN 1 : MINIMAL — inline text
   ═══════════════════════════════════════════════════════════ */
.h2j-timer--minimal .h2j-timer__inline {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.h2j-timer--minimal .h2j-timer__cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    line-height: 1;
    min-width: 1.8em;
}

.h2j-timer--minimal .h2j-timer__num {
    display: block;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    color: var(--h2j-timer-accent, #f43f5e);
}

.h2j-timer--minimal .h2j-timer__unit {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.3px;
    opacity: 0.7;
    color: var(--h2j-timer-text, #ffffff);
}

/* ═══════════════════════════════════════════════════════════
   DESIGN 2 : FLIP CARDS
   ═══════════════════════════════════════════════════════════ */
.h2j-timer--flip .h2j-timer__flip-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.h2j-timer--flip .h2j-timer__flip-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.h2j-timer--flip .h2j-timer__flip-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    color: var(--h2j-timer-accent, #f43f5e);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    backface-visibility: hidden;
}

/* Animation flip déclenchée par le JS via classe .is-flipping */
.h2j-timer--flip .h2j-timer__flip-value.is-flipping {
    animation: h2jTimerFlip 0.5s ease;
}

@keyframes h2jTimerFlip {
    0%   { transform: rotateX(0);     opacity: 1; }
    50%  { transform: rotateX(-90deg); opacity: 0.3; }
    100% { transform: rotateX(0);     opacity: 1; }
}

.h2j-timer--flip .h2j-timer__flip-unit {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--h2j-timer-text, #ffffff);
    opacity: 0.65;
}

/* ═══════════════════════════════════════════════════════════
   DESIGN 3 : DIGITAL LED
   ═══════════════════════════════════════════════════════════ */
.h2j-timer--digital .h2j-timer__digital {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Share Tech Mono', 'Courier New', Courier, monospace;
    background: rgba(0, 0, 0, 0.35);
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.h2j-timer--digital .h2j-timer__digital-block {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.h2j-timer--digital .h2j-timer__digital-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--h2j-timer-accent, #f43f5e);
    text-shadow: 0 0 4px var(--h2j-timer-accent, #f43f5e),
                 0 0 8px var(--h2j-timer-accent, #f43f5e);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    min-width: 1.3em;
    text-align: center;
}

.h2j-timer--digital .h2j-timer__digital-label {
    font-size: 10px;
    color: var(--h2j-timer-text, #ffffff);
    opacity: 0.7;
    text-transform: uppercase;
    margin-left: 1px;
}

.h2j-timer--digital .h2j-timer__digital-sep {
    font-size: 20px;
    font-weight: 700;
    color: var(--h2j-timer-accent, #f43f5e);
    opacity: 0.6;
    animation: h2jTimerPulse 1s ease-in-out infinite;
}

@keyframes h2jTimerPulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — mobile tweaks
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .h2j-timer {
        gap: 8px;
        padding: 10px 14px;
        font-size: 12px;
    }

    .h2j-timer__label {
        font-size: 10px;
        width: 100%;
    }

    .h2j-timer--flip .h2j-timer__flip-card {
        min-width: 44px;
        padding: 6px 8px;
    }

    .h2j-timer--flip .h2j-timer__flip-value {
        font-size: 18px;
    }

    .h2j-timer--flip .h2j-timer__flip-unit {
        font-size: 8px;
    }

    .h2j-timer--digital .h2j-timer__digital-value {
        font-size: 16px;
    }

    .h2j-timer--minimal .h2j-timer__num {
        font-size: 16px;
    }
    .h2j-timer--minimal .h2j-timer__unit {
        font-size: 9px;
        margin-top: 3px;
    }
}

/* ═══════════════════════════════════════════════════════════
   STATE : expired — si le timer atteint 0, il peut être masqué.
   Le JS ajoute la classe .is-expired sur le root et le CSS l'hide.
   ═══════════════════════════════════════════════════════════ */
.h2j-timer.is-expired {
    display: none;
}

/* ══════════════════════════════════════════════════════════
   CONTEXT 'hover' — variante compacte pour cubes miniatures (v2.14.2 hover)

   Inséré par le template miniature CUBX via {block prepend} dans
   .product-description (la bande noire info-band qui remonte au hover).

   Contraintes :
     - Info-band fait ~44px de haut en mobile, ~60px en desktop
     - Contient déjà .product-title + .product-price-and-shipping
     - Le timer vient en PREPEND du bloc prix → juste avant le prix

   Design choices :
     - font très compact (10-11px)
     - pas de padding vertical (juste margin)
     - ligne unique "Ends in: 2d 4h 35m 20s"
     - couleurs héritées de la bande noire (text: inherit pour s'adapter)
     - "pill" visuelle optionnelle autour pour le détacher légèrement du titre
   ══════════════════════════════════════════════════════════ */

/* Override complet pour le contexte hover — annule les règles .h2j-timer de base
   qui sont trop grosses pour le cube.
   v2.14.2 — flex-direction: column pour aligner tous les designs hover (minimal/flip/digital)
   avec le label "Offer ends in" au-dessus des chiffres (cohérence visuelle inter-designs). */
.h2j-timer.h2j-timer--ctx-hover {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 3px 6px;
    margin: 2px auto 4px;
    width: auto;
    max-width: 95%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--h2j-timer-text, #ffffff);
    font-size: 10px;
    line-height: 1.1;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    flex-wrap: nowrap;
    letter-spacing: 0;
}

.h2j-timer--ctx-hover .h2j-timer__label {
    font-size: 7px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.8;
    margin: 0 0 1px 0;
}

.h2j-timer--ctx-hover .h2j-timer__inline {
    display: inline-flex;
    align-items: flex-start;
    gap: 3px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.h2j-timer--ctx-hover .h2j-timer__cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    line-height: 1;
    min-width: 1.5em;
}

.h2j-timer--ctx-hover .h2j-timer__num {
    display: block;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    color: var(--h2j-timer-accent, #f43f5e);
}

.h2j-timer--ctx-hover .h2j-timer__unit {
    display: block;
    margin-top: 2px;
    font-size: 7px;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.2px;
    opacity: 0.65;
    color: var(--h2j-timer-text, #ffffff);
}

/* Mobile — encore plus compact dans les cubes 1-col */
@media (max-width: 480px) {
    .h2j-timer.h2j-timer--ctx-hover {
        font-size: 9px;
        padding: 2px 5px;
        gap: 4px;
    }
    .h2j-timer--ctx-hover .h2j-timer__num {
        font-size: 10px;
    }
    .h2j-timer--ctx-hover .h2j-timer__unit {
        font-size: 6px;
    }
}

/* ══════════════════════════════════════════════════════════
   CONTEXT 'hover' + DESIGNS 'flip' / 'digital' — variantes compactes (v2.14.2)

   Quand l'utilisateur choisit Flip cards ou Digital LED dans le BO, ces designs
   sont aussi appliqués au contexte hover. Les cubes miniature sont petits —
   on force donc des dimensions ultra-compactes avec !important pour surcharger
   les règles des designs flip/digital qui sont optimisés pour banner/page produit.

   À tester visuellement : peut déborder sur certains cubes. Si c'est le cas,
   retour au force 'minimal' côté PHP (H2JTimer::renderTimer).
   ══════════════════════════════════════════════════════════ */

/* FLIP dans un cube (v2.14.2 refresh) : cards COLLÉES (gap 0), labels days/hours/min/sec
   masqués (redondants ù cette taille), "Offer ends in" conservé au-dessus.
   Rendu type odomètre/pilule avec bordures arrondies uniquement aux extrêmes. */
.h2j-timer.h2j-timer--ctx-hover.h2j-timer--flip {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px 6px !important;
    margin: 2px auto 4px !important;
    width: auto;
    max-width: 95%;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.h2j-timer--ctx-hover.h2j-timer--flip .h2j-timer__label {
    font-size: 7px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.8;
    margin-bottom: 1px !important;
    color: var(--h2j-timer-text, #fff);
}

.h2j-timer--ctx-hover.h2j-timer--flip .h2j-timer__flip-grid {
    display: inline-flex !important;
    gap: 0 !important;
    justify-content: center;
    align-items: center;
}

.h2j-timer--ctx-hover.h2j-timer--flip .h2j-timer__flip-card {
    min-width: 18px !important;
    max-width: 22px;
    padding: 1px 3px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Séparateur visuel fin entre cards collées */
.h2j-timer--ctx-hover.h2j-timer--flip .h2j-timer__flip-card + .h2j-timer__flip-card {
    border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Arrondir uniquement les bords extrêmes pour un look pilule */
.h2j-timer--ctx-hover.h2j-timer--flip .h2j-timer__flip-card:first-child {
    border-top-left-radius: 2px !important;
    border-bottom-left-radius: 2px !important;
}
.h2j-timer--ctx-hover.h2j-timer--flip .h2j-timer__flip-card:last-child {
    border-top-right-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
}

.h2j-timer--ctx-hover.h2j-timer--flip .h2j-timer__flip-value {
    font-size: 10px !important;
    line-height: 1.1 !important;
    padding: 0 !important;
    color: var(--h2j-timer-accent, #f43f5e) !important;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Labels days/hours/min/sec : cachés dans le hover (redondants à cette taille) */
.h2j-timer--ctx-hover.h2j-timer--flip .h2j-timer__flip-unit {
    display: none !important;
}

/* DIGITAL dans un cube (v2.14.2 refresh) : juste les chiffres avec séparateurs `:`,
   labels d/h/m/s masqués, "Offer ends in" conservé au-dessus.
   Rendu style "12:34:56:78" ultra minimaliste. */
.h2j-timer.h2j-timer--ctx-hover.h2j-timer--digital {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px !important;
    padding: 3px 6px !important;
    margin: 2px auto 4px !important;
    width: auto;
    max-width: 95%;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.h2j-timer--ctx-hover.h2j-timer--digital .h2j-timer__label {
    font-size: 7px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    opacity: 0.8;
    color: var(--h2j-timer-text, #fff);
    margin-bottom: 1px !important;
}

.h2j-timer--ctx-hover.h2j-timer--digital .h2j-timer__digital {
    display: inline-flex !important;
    align-items: baseline;
    gap: 1px !important;
    padding: 1px 3px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.h2j-timer--ctx-hover.h2j-timer--digital .h2j-timer__digital-block {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

.h2j-timer--ctx-hover.h2j-timer--digital .h2j-timer__digital-value {
    font-size: 12px !important;
    line-height: 1 !important;
    color: var(--h2j-timer-accent, #f43f5e) !important;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 4px currentColor;
    font-weight: 700;
}

/* Labels d/h/m/s : cachés dans le hover (on garde juste les séparateurs `:`) */
.h2j-timer--ctx-hover.h2j-timer--digital .h2j-timer__digital-label {
    display: none !important;
}

.h2j-timer--ctx-hover.h2j-timer--digital .h2j-timer__digital-sep {
    font-size: 11px !important;
    opacity: 0.7;
    color: var(--h2j-timer-accent, #f43f5e);
    animation: none !important;
    line-height: 1;
    font-weight: 700;
}

@media (max-width: 480px) {
    .h2j-timer--ctx-hover.h2j-timer--flip .h2j-timer__flip-card {
        min-width: 22px !important;
        padding: 1px 2px !important;
    }
    .h2j-timer--ctx-hover.h2j-timer--flip .h2j-timer__flip-value {
        font-size: 10px !important;
    }
    .h2j-timer--ctx-hover.h2j-timer--digital .h2j-timer__digital-value {
        font-size: 10px !important;
    }
}