/*
 * countdown.css — STRUCTURAL-only layout for the shared countdown engine.
 *
 * Holds ONLY layout primitives every countdown needs regardless of brand:
 * flex row, gaps, svg sizing, flip 3D perspective/backface, bar track layout,
 * the hidden helper, the SR-only flip number, and the reduced-motion kill.
 *
 * Per-design brand/look CSS (colors, fonts, padding, border, sizes) is emitted
 * separately into each design's compiled `.cl-cd-{id}` block by the FR model.
 * Number/label typography rides the `.cl-preset-{id}` classes. NOTHING
 * brand-related lives here.
 */

/* ───────────────────────── wrapper + row + unit ───────────────────────── */
/* The wrapper is a flex container holding an optional description + the clock
   row. Message position comes from the countdown_layout picker CSS class below
   (column default = message above); whole-timer alignment is the
   countdown_align_style single-css control → align-items in the per-instance
   generated CSS. */
.cl-cd {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    line-height: 1.1;
    /* border-box so the container style's padding + max-width compose correctly
       (the design can give .cl-cd a background/padding/border + a capped width). */
    box-sizing: border-box;
}

/* Description / message element — a readable baseline; the design's desc_style
   overrides it, and the desc↔timer spacing comes from the wrapper's flex gap. */
.cl-cd-desc { margin: 0; font-size: 14px; line-height: 1.4; }
.cl-cd-desc p { margin: 0; }

/* Inline mode — the clock is embedded in the message text at the {timer} token. */
.cl-cd-desc--inline { display: inline; }
.cl-cd-desc--inline .cl-cd-row { display: inline-flex; vertical-align: middle; }

.cl-cd-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cl-cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.cl-cd-num {
    display: block;
    min-width: 1.6em;          /* equal-width units — row doesn't jitter as digits change */
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.cl-cd-label {
    display: block;
    white-space: nowrap;   /* short unit labels (Days/Min) never break mid-word */
}

.cl-cd-sep {
    display: flex;
    align-items: center;
    line-height: 1;
}

/* ─────────── Layout pickers (countdown_layout / _unit_layout / _align) ───────────
   Classes set on .cl-cd in _render.php. DOM is identical across layouts; only
   flex direction / order / alignment switch. */

/* Message ↔ clock position (.cl-cd children: [.cl-cd-desc][.cl-cd-row]). */
.cl-cd.cl-cd-msg-above { flex-direction: column; }
.cl-cd.cl-cd-msg-below { flex-direction: column-reverse; }
.cl-cd.cl-cd-msg-left  { flex-direction: row; }
.cl-cd.cl-cd-msg-right { flex-direction: row-reverse; }

/* Whole-timer alignment (cross axis) is the countdown_align_style single-css
   control → align-items in the per-instance generated CSS (.cl-cd-{id}), same
   line as gap/max-width. Side-by-side message layouts force center here,
   overriding that per-instance rule on specificity (0,2,0 > 0,1,0) so the
   message stays vertically centered against the clock. */
.cl-cd.cl-cd-msg-left,
.cl-cd.cl-cd-msg-right { align-items: center; }

/* Unit internal arrangement (number ↔ label).
   Inline = number beside label. Box + flip lay the number and label in a row.
   Bar keeps its full-width track but moves the number + label onto one row and
   wraps the track to the row below. Circle has no inline (its number is
   absolute-centered inside the ring, so "beside the label" is meaningless).
   Number-only (hide label) is safe for every version. */
.cl-cd-units-inline .cl-cd-unit-box,
.cl-cd-units-inline .cl-cd-unit-flip { flex-direction: row; align-items: center; gap: 4px; }
/* Bar inline: number + label share row 1; the full-width track wraps to row 2
   (order forces number→label→track regardless of DOM order). */
.cl-cd-units-inline .cl-cd-unit-bar {
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    column-gap: 6px;
    row-gap: 4px;
}
.cl-cd-units-inline .cl-cd-unit-bar .cl-cd-num { order: 1; }
.cl-cd-units-inline .cl-cd-unit-bar .cl-cd-label { order: 2; }
.cl-cd-units-inline .cl-cd-unit-bar .cl-cd-bar-track { order: 3; flex-basis: 100%; }
.cl-cd-units-number_only .cl-cd-label { display: none; }

/* Stack on mobile — collapse left/right back to message-above on small screens. */
@media (max-width: 767px) {
    .cl-cd.cl-cd-mobile-stack { flex-direction: column; align-items: center; }
}

/* Desktop / mobile text variants for labels + separator — the design supplies
   both; show one per breakpoint with no JS. Declared AFTER the base rules so the
   `display:none` on the inactive variant wins the same-specificity tie. */
.cl-cd-label-m,
.cl-cd-sep-m {
    display: none;
}
@media (max-width: 767px) {
    .cl-cd-label-d { display: none; }
    .cl-cd-label-m { display: block; }
    .cl-cd-sep-d { display: none; }
    .cl-cd-sep-m { display: flex; }
}

/* Leading-zero / mobile-hidden units (and their separators). */
.cl-cd-unit--hidden {
    display: none !important;
}

/* ───────────────────────── circle mode ───────────────────────── */
.cl-cd-unit-circle .cl-cd-circle-svg {
    display: block;
    width: 64px;
    height: 64px;
}

.cl-cd-unit-circle .cl-cd-circle-bg,
.cl-cd-unit-circle .cl-cd-circle-progress {
    fill: none;
    stroke-width: 5;
}

.cl-cd-unit-circle .cl-cd-circle-progress {
    /* Start the progress arc at 12 o'clock and run clockwise. */
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1s linear;
    stroke-linecap: round;
}

/* The number sits centered over the svg. */
.cl-cd-unit-circle {
    position: relative;
}

.cl-cd-unit-circle .cl-cd-num {
    position: absolute;
    top: 32px;            /* center of the 64px svg */
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Push the label below the svg (svg is in normal flow; num is absolute). */
.cl-cd-unit-circle .cl-cd-label {
    margin-top: 4px;
}

/* ───────────────────────── flip mode (3D) ───────────────────────── */
.cl-cd-unit-flip {
    position: relative;
}

.cl-cd-flip {
    position: relative;
    display: inline-block;
    width: 100%;
    /* The card height MUST be explicit so the 50%-height faces below resolve;
       1.5em tracks the digit font-size (set on this element via number_style).
       Without it the faces collapse to 0 and the digits never show. */
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    perspective: 200px;
}

.cl-cd-flip-top,
.cl-cd-flip-bottom,
.cl-cd-flip-top-fold,
.cl-cd-flip-bottom-fold {
    display: block;
    width: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-sizing: border-box;
}

/* Static halves: top occupies the upper half, bottom the lower half. The top
   line-height matches the card so the digit centers across the full card and
   each half clips to its 50%. */
.cl-cd-flip-top {
    height: 50%;
    line-height: 1.5em;
}

.cl-cd-flip-bottom {
    height: 50%;
    line-height: 0;
}

/* Folding halves are absolutely positioned over the static ones. */
.cl-cd-flip-top-fold,
.cl-cd-flip-bottom-fold {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    transform-origin: 50% 100%;
}

.cl-cd-flip-top-fold {
    top: 0;
    line-height: 1.5em;
    transform-origin: 50% 100%;
}

.cl-cd-flip-bottom-fold {
    top: 50%;
    line-height: 0;
    transform-origin: 50% 0%;
    transform: rotateX(90deg);
}

/* Animate the fold: top half rotates down, bottom half rotates up to settle. */
.cl-cd-flip.cl-cd-flipping .cl-cd-flip-top-fold {
    animation: cl-cd-fold-top 0.3s ease-in forwards;
}

.cl-cd-flip.cl-cd-flipping .cl-cd-flip-bottom-fold {
    animation: cl-cd-fold-bottom 0.3s ease-out 0.3s forwards;
}

@keyframes cl-cd-fold-top {
    0%   { transform: rotateX(0deg); }
    100% { transform: rotateX(-90deg); }
}

@keyframes cl-cd-fold-bottom {
    0%   { transform: rotateX(90deg); }
    100% { transform: rotateX(0deg); }
}

/* SR-only number in flip mode (assistive tech reads it; sighted users see panels). */
.cl-cd-unit-flip .cl-cd-num {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ───────────────────────── bar mode ───────────────────────── */
.cl-cd-unit-bar {
    /*width: 100%;*/
}

.cl-cd-bar-track {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.cl-cd-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    transition: width 1s linear;
}

/* ───────────────────────── expired message ───────────────────────── */
.cl-cd-expired {
    text-align: center;
}

/* ───────────────────────── reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cl-cd-flip.cl-cd-flipping .cl-cd-flip-top-fold,
    .cl-cd-flip.cl-cd-flipping .cl-cd-flip-bottom-fold {
        animation: none !important;
    }
    .cl-cd-unit-circle .cl-cd-circle-progress {
        transition: none !important;
    }
    .cl-cd-bar-fill {
        transition: none !important;
    }
}