/* =============================================================================
   BrixiesV2 Flash Sale Countdown
   Colors via CSS custom properties:
     --cd-bg      bar/banner background
     --cd-fg      label text color
     --cd-num-bg  number cell background
     --cd-num-fg  number text color
   ============================================================================= */

#brixiesv2-cd {
    background : var(--cd-bg, #1e293b);
    color      : var(--cd-fg, #f1f5f9);
    animation  : brixiesv2-cd-in 0.35s ease both;
}

/* ── Banner variant (top of page) ────────────────────────────────────────────── */
#brixiesv2-cd.brixiesv2-cd--banner {
    position: relative;
    z-index : 9998;
    width   : 100%;
}

/* ── Product variant (inline on product page) ────────────────────────────────── */
#brixiesv2-cd.brixiesv2-cd--product {
    border-radius : 10px;
    margin-bottom : 14px;
}

/* ── Inner container ─────────────────────────────────────────────────────────── */
.brixiesv2-cd__inner {
    display    : flex;
    align-items: center;
    justify-content: center;
    gap        : 16px;
    padding    : 10px 20px;
    flex-wrap  : wrap;
}

/* ── Label ───────────────────────────────────────────────────────────────────── */
.brixiesv2-cd__label {
    font-size  : 13px;
    font-weight: 600;
    color      : var(--cd-fg, #f1f5f9);
    opacity    : 0.85;
    white-space: nowrap;
}

/* ── Timer row ───────────────────────────────────────────────────────────────── */
.brixiesv2-cd__timer {
    display    : flex;
    align-items: center;
    gap        : 4px;
}

/* ── Unit box ────────────────────────────────────────────────────────────────── */
.brixiesv2-cd__unit {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 1px;
}

/* ── Number ──────────────────────────────────────────────────────────────────── */
.brixiesv2-cd__num {
    display      : block;
    background   : var(--cd-num-bg, #6366f1);
    color        : var(--cd-num-fg, #fff);
    font-size    : 20px;
    font-weight  : 700;
    font-variant : tabular-nums;
    letter-spacing: -0.5px;
    padding      : 4px 10px;
    border-radius: 7px;
    min-width    : 42px;
    text-align   : center;
    line-height  : 1.2;
    transition   : transform 0.15s ease;
}

/* Subtle flip on digit change */
.brixiesv2-cd__num--flip {
    animation: brixiesv2-cd-flip 0.15s ease;
}

/* ── Sub label ───────────────────────────────────────────────────────────────── */
.brixiesv2-cd__sub {
    font-size  : 9px;
    color      : var(--cd-fg, #f1f5f9);
    opacity    : 0.55;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align : center;
}

/* ── Colon separator ─────────────────────────────────────────────────────────── */
.brixiesv2-cd__colon {
    font-size  : 18px;
    font-weight: 700;
    color      : var(--cd-fg, #f1f5f9);
    opacity    : 0.4;
    margin-bottom: 8px;
    line-height: 1;
}

/* ── Hide days unit if zero ──────────────────────────────────────────────────── */
.brixiesv2-cd__unit:has(#brixiesv2-cd-d[data-zero="true"]) { display: none; }
.brixiesv2-cd__colon:has(+ .brixiesv2-cd__unit #brixiesv2-cd-d[data-zero="true"]) { display: none; }

/* ── Mobile ──────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .brixiesv2-cd__inner { gap: 10px; padding: 8px 14px; }
    .brixiesv2-cd__num   { font-size: 17px; min-width: 36px; padding: 3px 8px; }
    .brixiesv2-cd__label { font-size: 12px; }
}

/* ── Animations ─────────────────────────────────────────────────────────────── */
@keyframes brixiesv2-cd-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes brixiesv2-cd-flip {
    0%   { transform: translateY(0); opacity: 1; }
    40%  { transform: translateY(-4px); opacity: 0; }
    60%  { transform: translateY(4px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}