/**
 * "CASABLANCA - Order Delivery Timeline" — product page, under the COD form.
 *
 * A softly tinted band holding three circular markers, joined by a thin
 * animated dashed line that exists ONLY in the gaps between them.
 *
 * THE MARKUP IS UNCHANGED. This is presentation only: the same <ol> of steps
 * from template-parts/product/delivery-timeline.php, the same is-complete /
 * is-current / is-upcoming classes computed from the Active Step setting, the
 * same SVG icons, dates and copy. Nothing here counts, orders or decides
 * anything.
 *
 * THE GEOMETRY, which is the part worth reading twice:
 *
 *   The list is three EQUAL columns with NO column gap, so the distance from
 *   one circle's centre to the next is exactly one column width. That single
 *   fact is what lets every measurement below be a plain percentage — no
 *   script, no hardcoded widths, no negative-margin tricks:
 *
 *       ├─ 1/3 ─┼─ 1/3 ─┼─ 1/3 ─┤
 *              ●- - - - ●- - - - ◉
 *              50%      50%      50%   of each column
 *
 *   Each step AFTER THE FIRST draws one segment, and it spans the GAP only:
 *   from the previous circle's edge to its own edge, both pulled in by
 *   --dt-line-inset for breathing room.
 *
 *       start = -50% + radius + inset          (previous circle's right edge)
 *       width = 100% - 2 * (radius + inset)    (edge to edge)
 *
 *   Because the first step draws nothing and no step draws anything after its
 *   own circle, the line CANNOT appear before the first marker or after the
 *   last one, and it never runs underneath a circle. There is no full-width
 *   track: the earlier design had one, plus a leading and a trailing piece,
 *   and those were the stubs protruding past the end markers.
 *
 *   Steps are separated by PADDING inside each column, never by a grid gap:
 *   padding does not change the column width, so the centre-to-centre maths
 *   stays exact at every viewport. Everything is `inset-inline-*`, so the whole
 *   block mirrors in RTL with no extra rule.
 *
 * COLOURS are the Customizer's, printed as custom properties on the block only
 * when the merchant set them (delivery-timeline.php) and falling back to the
 * design tokens otherwise — so an untouched store follows the brand colour:
 *
 *   --dt-icon-bg      the BLOCK's tint (Customizer → Timeline Background
 *                     Color), rendered at a fixed low alpha.  default: brand
 *   --dt-icon-color   the glyph inside a filled marker.       default: #fff
 *   --dt-line-color   the reached part of the line.           default: brand
 *   --dt-date-color   the date.                default: --casablanca-text-secondary
 *   --dt-status-color the status.              default: --casablanca-text-primary
 *
 *   The markers themselves are the brand colour, not the tint — the tint is
 *   the band behind everything.
 *
 * SIZING is clamped rather than stepped through breakpoints: the block scales
 * between roughly 320px and 480px and then holds. There is no min-width and no
 * horizontal scroller, so it can never widen the page.
 */

.casablanca-delivery-timeline {
    /* Marker diameter, glyph, line and ring — one scale, so the line stays
       centred on the circles at every size. */
    --dt-size: clamp(38px, 10vw, 48px);
    --dt-glyph: clamp(15px, 4.2vw, 20px);
    --dt-line: 2px;
    --dt-ring: 3px;

    /* Derived: the circle's radius, and how far the line stops short of it. */
    --dt-radius: calc(var(--dt-size) / 2);
    --dt-line-inset: clamp(6px, 1.6vw, 10px);

    --dt-brand: var(--casablanca-brand);

    /* The band behind the whole block: the merchant's colour (or the brand
       colour) at a fixed low alpha, so it always stays a whisper rather than a
       panel. The flat fallback comes first for engines without color-mix. */
    --dt-tint: color-mix(in srgb, var(--dt-icon-bg, var(--dt-brand)) 6%, transparent);

    /* The dashed line's tile, dash and period are --dt-dash / --dt-dash-step /
       --dt-flow on :root (base.css), shared with the upsell offer's border so
       both run the one animation off one set of values. Nothing to declare
       here; the values are unchanged. */

    /* Vertical centre of a marker, which is where the line runs. */
    --dt-line-top: calc((var(--dt-size) - var(--dt-line)) / 2);

    width: 100%;
    margin: 10px 0 0;
    padding: clamp(14px, 3vw, 20px) clamp(8px, 2vw, 16px);
    border-radius: var(--casablanca-radius);
    background: var(--dt-tint);
}

.casablanca-dt-steps {
    position: relative;
    display: grid;
    /* No gap: see the geometry note above. Spacing is padding on the steps. */
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.casablanca-dt-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0 clamp(2px, 1.5vw, 10px);
    text-align: center;
}

/* ── Connector ──────────────────────────────────────────────────────────── */

/*
 * One segment per GAP: drawn by every step except the first, spanning from the
 * previous circle's edge to this one's. Nothing is drawn before the first
 * marker or after the last, so the line has no protruding ends and never
 * crosses a circle.
 *
 * A tile is --dt-dash-step wide and holds one --dt-dash-long dash, so the gap
 * between dashes needs no variable of its own and the tile width doubles as
 * the animation's travel distance.
 */
.casablanca-dt-step:not(:first-child)::after {
    content: "";
    position: absolute;
    top: var(--dt-line-top);
    inset-inline-start: calc(-50% + var(--dt-radius) + var(--dt-line-inset));
    width: calc(100% - 2 * (var(--dt-radius) + var(--dt-line-inset)));
    height: var(--dt-line);

    --dt-dash-color: var(--casablanca-border);
    background-image: linear-gradient(
        to right,
        var(--dt-dash-color) 0 var(--dt-dash),
        transparent var(--dt-dash) 100%
    );
    background-size: var(--dt-dash-step) var(--dt-line);
    background-repeat: repeat-x;
}

/* Reached: the same segment in the brand colour. Only the colour changes, so
   the two states can never disagree about where the line is. */
.casablanca-dt-step:not(:first-child):not(.is-upcoming)::after {
    --dt-dash-color: var(--dt-line-color, var(--dt-brand));
}

/* ── Markers ────────────────────────────────────────────────────────────── */

.casablanca-dt-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--dt-size);
    height: var(--dt-size);
    border-radius: 50%;
    /* The brand colour itself — the tint belongs to the band, not to these. */
    background: var(--dt-brand);
    color: var(--dt-icon-color, #fff);
}

.casablanca-dt-icon svg {
    display: block;
    width: var(--dt-glyph);
    height: var(--dt-glyph);
}

/* The step the order is on: hollow and ringed. border-box keeps the outer
   diameter identical to a filled marker, so the connectors stay centred and
   nothing shifts between states. */
.casablanca-dt-step.is-current .casablanca-dt-icon {
    background: var(--casablanca-bg-primary, #fff);
    color: var(--dt-brand);
    border: var(--dt-ring) solid var(--dt-brand);
}

/* Not reached yet — the existing inactive palette. */
.casablanca-dt-step.is-upcoming .casablanca-dt-icon {
    background: var(--casablanca-bg-secondary, #F9FAFB);
    color: var(--casablanca-text-secondary);
    border: var(--dt-ring) solid var(--casablanca-border);
}

/* ── Flow ───────────────────────────────────────────────────────────────
 *
 * The dashes on the REACHED connectors drift steadily along them, the way a
 * tracking page shows a parcel on the move. A connector into an upcoming step
 * stays still: nothing is travelling there yet, and a static remainder is what
 * makes the moving part read as progress.
 *
 * Seamless by construction: one tile is --dt-dash-step wide, so shifting the
 * pattern by exactly that distance lands it back on itself. Nothing is
 * measured and nothing is scripted, so retuning the dash spacing keeps the
 * loop smooth on its own.
 *
 * Direction follows the journey — Commandé → Expédiée → En cours
 * d'acheminement — so the dashes run toward the LAST step, left → right in an
 * LTR layout. The sign of the shift is the direction and nothing else: a
 * positive shift slides the pattern forward, a negative one would send the
 * dashes back toward the first step.
 *
 * In RTL the block mirrors, so step 3 is on the left and the journey runs
 * right → left on screen. `animation-direction: reverse` flips the same
 * keyframe to match, which is why the rule below is stated once and stays
 * correct in both directions.
 *
 * background-position is the only animated property, on a 2px-tall strip.
 */
@media (prefers-reduced-motion: no-preference) {
    .casablanca-dt-step:not(:first-child):not(.is-upcoming)::after {
        animation: casablanca-dt-flow var(--dt-flow) linear infinite;
    }

    /* The product page is RTL (dir on .product-page-main): run the flow
       toward the last step, which is now on the left. */
    [dir="rtl"] .casablanca-dt-step:not(:first-child):not(.is-upcoming)::after {
        animation-direction: reverse;
    }
}

/* @keyframes casablanca-dt-flow lives in base.css — the one definition, shared
   with the upsell offer's border. Do not redeclare it here. */

/* ── Labels ─────────────────────────────────────────────────────────────── */

.casablanca-dt-date,
.casablanca-dt-status {
    display: block;
    max-width: 100%;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.casablanca-dt-date {
    margin-top: clamp(8px, 2.6vw, 14px);
    font-size: clamp(0.7rem, 2.3vw, 0.8rem);
    font-weight: 400;
    color: var(--dt-date-color, var(--casablanca-text-secondary));
}

.casablanca-dt-status {
    margin-top: 2px;
    font-size: clamp(0.72rem, 2.6vw, 0.9rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--dt-status-color, var(--casablanca-text-primary));
    -webkit-hyphens: auto;
    hyphens: auto;
}

.casablanca-dt-step.is-upcoming .casablanca-dt-date,
.casablanca-dt-step.is-upcoming .casablanca-dt-status {
    color: var(--casablanca-text-secondary);
}

.casablanca-dt-step.is-upcoming .casablanca-dt-status {
    font-weight: 600;
}