/* ============================================================================
   Delivery estimate panel — ONE stylesheet, two surfaces.

   The cart renders this panel with `dlv__` class names and the book page with
   `bdq__` ones, each from its own inline <style> block. Two copies of the same
   design is two copies that drift: the book page ended up with a pincode inline
   in the heading while the cart put it in a badge, different paddings, and a
   different carrier pill — the same panel, visibly not the same.

   Every rule here is written once against BOTH prefixes, so a change lands on
   both pages or on neither. Loaded from layouts/footer.blade.php, which both
   cart/index and books/show reach through layouts.public.

   Storefront CSS is hand-written and cache-busted with filemtime(); it is not
   built by Vite or Tailwind. Edit this file in place.
   ========================================================================== */

/* --- tokens ---------------------------------------------------------------
   Named once so "the green the panel uses" is a fact with one home, rather
   than a hex code copied into eleven rules across two files. */
.dlv, .bdq {
    --dp-radius: 14px;
    --dp-pad: 16px;
    --dp-gap: 10px;
    --dp-rail: 4px;
    --dp-row-radius: 10px;
    --dp-ok-bg: #F8FDFA;
    --dp-ok-border: #CCE5D8;
    --dp-ok-ink: #15803D;
    --dp-bad-bg: #FFF8F8;
    --dp-bad-border: #FBD5D5;
    --dp-warn-bg: #FFFBEB;
    --dp-warn-border: #FDE68A;
    --dp-warn-ink: #92400E;
    --dp-soft-bg: #F8FAFC;
    --dp-soft-border: #E2E8F0;
    --dp-soft-ink: #475569;
}

/* --- shell ---------------------------------------------------------------- */
.dlv, .bdq {
    position: relative;
    overflow: hidden;
    margin-top: 12px;
    padding: var(--dp-pad);
    border-radius: var(--dp-radius);
}

/* The coloured rail. Carries the panel's status without spending a whole
   background on it, so the content stays on near-white and readable. */
.dlv::before, .bdq::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--dp-rail);
}

.dlv--ok, .bdq--ok, .bdq:not(.bdq--bad) {
    background: var(--dp-ok-bg);
    border: 1px solid var(--dp-ok-border);
}
.dlv--ok::before, .bdq--ok::before, .bdq:not(.bdq--bad)::before {
    background: linear-gradient(to bottom, var(--c-success, #16A34A), #10B981);
}

.dlv--bad, .bdq--bad {
    background: var(--dp-bad-bg);
    border: 1px solid var(--dp-bad-border);
}
.dlv--bad::before, .bdq--bad::before {
    background: linear-gradient(to bottom, #DC2626, #F87171);
}

/* --- heading -------------------------------------------------------------- */
.dlv__head, .bdq__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dp-gap);
    flex-wrap: wrap;
    padding-left: 8px;
    margin-bottom: var(--dp-gap);
    font-size: .9rem;
    line-height: 1.5;
    color: var(--c-text-muted);
}
.dlv__head strong, .bdq__head strong { color: var(--c-text-main); }
.dlv__to, .bdq__head > span:first-of-type {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}
.dlv--bad .dlv__to, .bdq--bad .bdq__head { color: #991B1B; }
.dlv--bad .dlv__to strong, .bdq--bad .bdq__head strong { color: #7F1D1D; }

/* Pincode badge. Tabular figures so 111111 and 523271 are the same width and
   the pill stops resizing as the customer types. */
.dlv__pin, .bdq__pin {
    display: inline-block;
    flex: none;
    margin-left: 2px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: #fff;
    border: 1px solid var(--dp-soft-border);
    color: var(--c-text-muted);
}

/* Carrier pill. `flex: none` matters: without it a long courier name squeezes
   the address instead of wrapping to its own line. */
.dlv__carrier, .bdq__carrier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--dp-ok-border);
    color: var(--dp-ok-ink);
}

/* --- notes ---------------------------------------------------------------- */
.dlv__note, .bdq__note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 var(--dp-gap) 8px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: .84rem;
    line-height: 1.55;
    background: var(--dp-warn-bg);
    border: 1px solid var(--dp-warn-border);
    color: var(--dp-warn-ink);
}
.dlv__note i, .bdq__note i { margin-top: 3px; flex: none; }
.dlv__note strong, .bdq__note strong { color: #78350F; }

/* An unconfirmed estimate is information, not an alarm. Amber is spent on the
   failover note, where the courier genuinely changed; two warning-coloured
   boxes on a delivery that is almost certainly fine teaches people to ignore
   both of them. */
.dlv__note--soft, .bdq__note--soft {
    background: var(--dp-soft-bg);
    border-color: var(--dp-soft-border);
    color: var(--dp-soft-ink);
}
.dlv__note--soft i, .bdq__note--soft i { color: #94A3B8; }

/* The courier's own words, for whoever is diagnosing rather than shopping. */
.dlv__why, .bdq__why {
    display: block;
    margin-top: 3px;
    font-size: .78rem;
    font-style: normal;
    opacity: .75;
}

.dlv__cutoff, .bdq__cutoff {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 var(--dp-gap) 8px;
    font-size: .85rem;
    font-weight: 600;
    color: #D97706;
}

/* --- delivery options ----------------------------------------------------- */
.dlv__opts, .bdq__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 8px;
}

.dlv__opt, .bdq__row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: var(--dp-row-radius);
    background: #fff;
    border: 1px solid var(--dp-soft-border);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dlv__opt:hover, .bdq__row:hover {
    border-color: #CBD5E1;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}

.dlv__ico, .bdq__ico {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .86rem;
}
.dlv__ico--std, .bdq__ico--std { background: #F1F5F9; color: #64748B; }
.dlv__ico--exp, .bdq__ico--exp { background: #FFF7ED; color: #EA580C; }

.dlv__opt-txt, .bdq__txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.dlv__opt-txt b, .bdq__txt b {
    font-size: .9rem;
    font-weight: 600;
    color: var(--c-text-main);
}
.dlv__opt-txt em, .bdq__txt em {
    font-style: normal;
    font-size: .8rem;
    color: var(--c-text-muted);
}

.dlv__opt-amt, .bdq__amt {
    flex: none;
    font-size: .9rem;
    font-weight: 700;
    color: var(--c-primary);
    font-variant-numeric: tabular-nums;
}
.dlv__opt-amt--muted, .bdq__amt--muted {
    font-size: .8rem;
    font-weight: 600;
    color: var(--c-text-muted);
}

/* --- the journey ----------------------------------------------------------
   Three steps: leaves us, travels, arrives. Two flat rows told the customer
   what they would pay and when it lands, but nothing about what happens in
   between — which is the part people actually wonder about while deciding.

   The cutoff lives in step one because that is what it governs: order inside
   the window and it leaves today, miss it and everything shifts a day. Stated
   next to the countdown it reads as a consequence; stated on its own above the
   prices it reads as decoration. */
.dlv__trail, .bdq__trail {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 12px 8px;
    padding: 12px 12px 10px;
    border-radius: var(--dp-row-radius);
    background: #fff;
    border: 1px solid var(--dp-soft-border);
}

.dlv__step, .bdq__step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding-top: 22px;
    text-align: center;
}

/* The connecting rail. Drawn per step and clipped at the ends, so the line
   never overshoots into the padding on the first and last nodes. */
.dlv__step::before, .bdq__step::before {
    content: '';
    position: absolute;
    top: 7px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--dp-soft-border);
}
.dlv__step:first-child::before, .bdq__step:first-child::before { display: none; }

.dlv__step::after, .bdq__step::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--dp-soft-border);
}

/* Reached steps are solid; the arrival is the one that matters, so it gets the
   ring rather than another identical dot. */
.dlv__step--done::after, .bdq__step--done::after {
    background: var(--c-success, #16A34A);
    border-color: var(--c-success, #16A34A);
}
.dlv__step--done::before, .bdq__step--done::before {
    background: var(--c-success, #16A34A);
}
.dlv__step--end::after, .bdq__step--end::after {
    background: #fff;
    border-color: var(--c-success, #16A34A);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .14);
}

.dlv__step b, .bdq__step b {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--c-text-main);
}
.dlv__step span, .bdq__step span {
    display: block;
    margin-top: 1px;
    font-size: .72rem;
    line-height: 1.5;
    color: var(--c-text-muted);
}
.dlv__step em, .bdq__step em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: .72rem;
    font-weight: 700;
    color: #D97706;
}

/* --- narrow CONTAINERS ----------------------------------------------------
   The panel now appears in two very different boxes: full width under a book,
   and inside a 380px cart rail on the same 1440px screen. A viewport media
   query cannot tell those apart — it would leave the timeline horizontal and
   crushed in the rail, or stack it needlessly under the book.

   Container queries ask the right question: how wide is the box I am in.
   @supports guards it, and the viewport rules below still cover browsers
   without container support, so nothing is left unstyled either way. */
@supports (container-type: inline-size) {
    @container (max-width: 400px) {
        .dlv__trail, .bdq__trail {
            flex-direction: column;
            gap: 14px;
            padding: 12px 10px;
        }
        .dlv__step, .bdq__step {
            padding: 0 0 0 24px;
            text-align: left;
        }
        .dlv__step::before, .bdq__step::before {
            top: -14px;
            left: 5px;
            width: 2px;
            height: 20px;
        }
        .dlv__step::after, .bdq__step::after {
            top: 3px;
            left: 0;
            transform: none;
        }

        /* The heading wraps rather than squeezing the address to nothing. */
        .dlv__head, .bdq__head { align-items: flex-start; }
        .dlv__carrier, .bdq__carrier { order: 2; }

        .dlv__opt, .bdq__row { padding: 9px 11px; gap: 9px; }
        .dlv__ico, .bdq__ico { width: 28px; height: 28px; font-size: .8rem; }
    }
}

/* --- narrow screens -------------------------------------------------------
   The carrier pill drops under the address rather than crushing it, and the
   panel gives back some padding. */
@media (max-width: 480px) {
    .dlv, .bdq { --dp-pad: 13px; --dp-gap: 8px; }

    .dlv__head, .bdq__head { align-items: flex-start; }
    .dlv__carrier, .bdq__carrier { order: 2; }

    .dlv__opt, .bdq__row { padding: 9px 11px; gap: 9px; }
    .dlv__ico, .bdq__ico { width: 28px; height: 28px; font-size: .8rem; }

    /* The timeline goes vertical. Three Telugu labels across a 320px screen
       wrap to three lines each and stop being a timeline at all. */
    .dlv__trail, .bdq__trail { flex-direction: column; gap: 14px; padding: 12px 10px; }

    .dlv__step, .bdq__step {
        padding: 0 0 0 24px;
        text-align: left;
    }
    .dlv__step::before, .bdq__step::before {
        top: -14px;
        left: 5px;
        width: 2px;
        height: 20px;
    }
    .dlv__step::after, .bdq__step::after {
        top: 3px;
        left: 0;
        transform: none;
    }
}

/* --- Telugu -------------------------------------------------------------
   Telugu stacks vowel signs above and below the base glyph, so a line-height
   tuned for Latin clips the marks and makes consecutive lines collide. The
   panel is bilingual on every surface, and the same rule set serves both, so
   the leading is set for the script that needs more of it. */
:lang(te) .dlv__step b, :lang(te) .bdq__step b,
:lang(te) .dlv__step span, :lang(te) .bdq__step span,
:lang(te) .dlv__opt-txt b, :lang(te) .bdq__txt b,
:lang(te) .dlv__opt-txt em, :lang(te) .bdq__txt em {
    line-height: 1.75;
}
:lang(te) .dlv__note, :lang(te) .bdq__note,
:lang(te) .dlv__head, :lang(te) .bdq__head {
    line-height: 1.7;
}

/* Numbers stay Latin even inside Telugu text: a price and a pincode read as
   figures, and forcing them through the Telugu leading leaves them floating. */
.dlv__opt-amt, .bdq__amt, .dlv__pin, .bdq__pin {
    line-height: 1.4;
}