/* ============================================================
   CART / CHECKOUT PAGE  —  cart.css
   Uses the same CSS variables and base reset from menu.css
   (loaded first via _MenuLayout).
   ============================================================ */

/* ── Two-column shell ──────────────────────────────────────── */
.chk-shell {
    flex: 1;
    display: grid;
    /* Right track = the order-summary / checkout panel, widened 420 → 560 so long item
       names, modifier lines and bill rows stop wrapping.
       max-width is 1440, NOT the 1280 the rest of the site uses (menu.css): checkout is
       the one two-column page here, so it needs the room the single-column pages don't —
       at 1280 the 560px panel left only ~636px beside it. Widening the container rather
       than the panel is what gives the left column its space back. */
    grid-template-columns: 1fr 560px;
    gap: 28px;
    align-items: start;
    padding: 24px 28px 60px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

/* ── Left column ───────────────────────────────────────────── */
.chk-main {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

/* Empty state */
.chk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    gap: 12px;
}

.chk-empty-icon { width: 80px; height: 80px; margin-bottom: 4px; }
.chk-empty-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--text); }
.chk-empty-sub   { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.chk-empty-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 24px;
    background: var(--brand-red);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 700;
}

/* Compact variant — empty state rendered INSIDE the order summary card
   (right column) when the cart is empty. Tighter padding + smaller icon so
   it fits the narrow sticky card without dwarfing it. */
.chk-empty--card {
    padding: 28px 18px 32px;
    gap: 10px;
}
.chk-empty--card .chk-empty-icon { width: 60px; height: 60px; }
.chk-empty--card .chk-empty-title { font-size: 1.0625rem; }
.chk-empty--card .chk-empty-sub { font-size: 0.75rem; }
.chk-empty--card .chk-empty-btn { margin-top: 6px; padding: 9px 22px; font-size: 0.8125rem; }

/* ── "Complete your meal" ──────────────────────────────────── */
.chk-upsell {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px 20px;
}

.chk-upsell-head { margin-bottom: 16px; }
.chk-upsell-title { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--text); }
.chk-upsell-sub   { margin: 0; font-size: 0.75rem; color: var(--muted); }

.chk-upsell-grid {
    display: grid;
    /* Was repeat(4, 1fr), which came out ~148px per square card once the checkout panel
       widened. auto-fill lets the column count follow the space the panel leaves —
       4 across at 709px, 3 at 636px, 2 at 365px — with 160px as the floor below which a
       card can no longer carry its name + price + ADD overlay. */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

/* Full-bleed image card: image fills the card, name + price + ADD button
   overlay on a dark gradient at the bottom. */
.chk-upsell-card {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #1f1f1f;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s, transform 0.15s;
}
.chk-upsell-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.chk-upsell-img {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #fde68a, #fcd34d);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.chk-upsell-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay sits on top of the image, with a dark gradient at the bottom so
   the text is legible. Sizes scale down on tighter cards via container-relative
   units below (responsive media queries also kick in). */
.chk-upsell-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 12px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.40) 45%, transparent 75%);
    color: #fff;
}

.chk-upsell-name {
    margin: 0 0 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    /* Cap at 2 lines so very long names don't crowd out price/ADD button. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chk-upsell-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.chk-upsell-price {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    white-space: nowrap;
}

.chk-upsell-add {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: var(--brand-red);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: background 0.12s, color 0.12s;
}
.chk-upsell-add:hover { background: var(--brand-red); color: #fff; }
.chk-upsell-add.is-added {
    background: var(--brand-green);
    color: #fff;
}

/* ── Saved addresses ───────────────────────────────────────── */
.chk-addresses {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px 20px;
}

.chk-addr-title { margin: 0 0 16px; font-size: 1rem; font-weight: 700; color: var(--text); }

.chk-addr-login {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-soft);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--muted);
    margin-bottom: 14px;
}

.chk-addr-login svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--muted); }
.chk-addr-login a { color: var(--brand-red); font-weight: 600; }

.chk-addr-grid {
    display: grid;
    /* `minmax(0, 1fr)` lets each column shrink below its content's min-width
       — without the `0` floor, a grid item's intrinsic min-content (e.g. the
       card header's pin + label + miles badge + edit + delete) forces the
       column wider than 1fr and the right column spills past the section. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* `start` keeps each card at its content height — without it the grid
       stretches every card in a row to match the tallest one, which leaves
       a big empty area below short cards and makes the selected red border
       look like it's surrounding nothing. */
    align-items: start;
    gap: 14px;
    margin-bottom: 14px;
}

/* "View all N addresses" — slim ghost row spanning the grid, shown when the
   saved list is capped; opens the shared Saved Addresses popover. */
.chk-addr-more {
    grid-column: 1 / -1;
    padding: 10px;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    background: none;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-red);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.chk-addr-more:hover { border-color: var(--brand-red); background: rgba(226, 27, 34, 0.04); }

.chk-addr-card {
    /* Stronger border than `var(--border)` so the container reads cleanly
       even at the narrow grid column widths the cart shell creates — the
       head row's icons (pin + label + distance + edit + delete) should
       always feel "inside" the card, not floating beside it. */
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
    /* Lets the card shrink along with the grid column instead of clinging to
       its content's min-width. Combined with `min-width: 0` on the card-head
       below, this keeps the entire card inside its grid cell. */
    min-width: 0;
    box-sizing: border-box;
}

.chk-addr-card:hover { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(226,27,34,0.08); }
.chk-addr-card.is-selected { border-color: var(--brand-red); background: #fff8f8; }

/* Saved-address skeletons — reuse the card chrome, drop in shimmer boxes.
   Shown while the first server address load is in flight. .pt-skel = skeleton.css. */
.chk-addr-card--skel { cursor: default; }
.chk-addr-card--skel:hover { border-color: #d1d5db; box-shadow: none; }
.chk-skel-pin { flex: 0 0 28px; width: 28px; height: 28px; }

.chk-addr-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;       /* let the badge/edit/delete drop to row 2 if the */
    row-gap: 6px;          /*  label can't fit alongside them on one line     */
    column-gap: 8px;
    /* Required for the flex children below (label, miles badge, etc.) to
       respect their containers and shrink instead of pushing the card wider
       than its grid column. */
    min-width: 0;
}

.chk-addr-pin {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--brand-red);
}

.chk-addr-pin svg { width: 14px; height: 14px; }

/* Car-icon variant — same red chip but the car silhouette needs a bit more
   room to read at the 28px chip size. */
.chk-addr-pin--car svg { width: 18px; height: 18px; }

.chk-addr-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    flex: 1 1 auto;
    /* The head is `flex-wrap: wrap`, so the label can grow to its natural
       width — if it can't share a single row with the badge + actions, the
       badge/actions wrap to the next line. Allow long labels to break
       between words rather than ellipsifying mid-character. */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chk-addr-edit,
.chk-addr-delete {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Action icons must never collapse in tight columns — the label is the
       only flexible item in the row and is the one allowed to shrink. */
    flex-shrink: 0;
}
.chk-addr-edit   { color: var(--brand-red); margin-left: 4px; }
.chk-addr-delete { color: #6b7280; margin-left: 2px; }
.chk-addr-delete:hover { color: var(--brand-red); }
.chk-addr-edit svg,
.chk-addr-delete svg { width: 14px; height: 14px; }

/* Distance badge — pink-outlined pill with a small red pin + "X.X kms".
   `.chk-addr-label` already has flex:1 which pushes this badge and the
   action icons to the right end of the row, so no auto margin needed. */
.chk-addr-distance {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid #f5d4cf;
    background: #fff5f4;
    color: #1f1f1f;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    /* Never let the badge collapse into nothing in tight columns — the
       label has min-width:0 + ellipsis so it will shrink first. */
    flex-shrink: 0;
}
.chk-addr-distance svg {
    width: 11px;
    height: 11px;
    color: var(--brand-red, #E21B22);
    flex-shrink: 0;
}

.chk-addr-text {
    font-size: 0.6875rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

/* `.chk-addr-checkout` is unused now — the per-card CHECKOUT button was
   removed in favour of the single Place Order button in the Your Order
   panel. Rules kept in case any legacy demo data still renders them. */
.chk-addr-checkout { display: none; }

.chk-addr-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 10px 16px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s, color 0.12s;
    width: 100%;
    justify-content: center;
}

.chk-addr-add:hover { border-color: var(--brand-red); color: var(--brand-red); }
.chk-addr-add svg { width: 14px; height: 14px; }

/* ── Delivery entry chooser ───────────────────────────────────
   Two stacked rows (current location / manual), each an icon circle + title +
   sub + chevron, split by a hairline. Shown for Delivery in place of the dashed
   add button; with an empty grid above it, this is the whole "Select delivery
   address" card. */
.chk-addr-chooser {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.chk-addr-chooser[hidden] { display: none; }

.chk-addr-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background: #fff;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s;
}
.chk-addr-opt + .chk-addr-opt { border-top: 1px solid var(--border); }
.chk-addr-opt:hover { background: var(--bg-soft, #f8fafc); }

.chk-addr-opt-ico {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-soft, #f1f5f9);
    color: var(--muted, #64748b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chk-addr-opt-ico svg { width: 20px; height: 20px; }

.chk-addr-opt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.chk-addr-opt-title { font-size: 0.9375rem; font-weight: 700; color: var(--text, #0f172a); }
.chk-addr-opt-sub { font-size: 0.8125rem; color: var(--muted, #94a3b8); }
.chk-addr-opt-chev { flex: 0 0 auto; width: 18px; height: 18px; color: #cbd5e1; }

/* First row leads with the fast path — blue title to draw the eye. */
.chk-addr-opt--primary .chk-addr-opt-title { color: #2563eb; }

/* ── Embedded store-location map card (Pickup / DineIn) ───────
   Renders inside #chkAddrGrid in place of the saved-addresses grid when
   orderType is Pickup or DineIn. Sized to span the full grid (it's a
   single card, not a 2-up layout). The header strip carries the red pin
   and "Pick up at <address>" / "Dine in at <address>" line; the canvas
   below it hosts the Google Map. */
.chk-store-map {
    grid-column: 1 / -1;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.02);
}

.chk-store-map.is-selected {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 3px rgba(226,27,34,0.08);
}

.chk-store-map-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #fff;
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.3;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

/* QR dine-in drops the map canvas, leaving the header as the card's only child — no
   canvas below means nothing for its bottom rule to separate it from. */
.chk-store-map-head:last-child { border-bottom: 0; }

.chk-store-map-head-pin { width: 18px; height: 18px; flex: none; }
.chk-store-map-head-prefix { color: var(--muted); }
.chk-store-map-head-addr   { color: var(--text); font-weight: 600; }

.chk-store-map-canvas {
    /* Fixed height keeps the section's vertical rhythm predictable — Google
       Maps needs a sized container or it renders empty. */
    height: 220px;
    width: 100%;
    background: #f3f4f6;
    position: relative;
}

/* Loading / no-key fallback inside the canvas — centered icon + line of
   text so the section is never blank if Maps fails to load. */
.chk-store-map-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--muted);
    text-align: center;
    padding: 0 12px;
}
.chk-store-map-fallback svg { width: 28px; height: 28px; }
.chk-store-map-fallback p { margin: 0; font-size: 0.8125rem; line-height: 1.3; }

@media (max-width: 720px) {
    .chk-store-map-canvas { height: 180px; }
    .chk-store-map-head   { font-size: 0.8125rem; padding: 10px 12px; }
}

/* ── Right aside ───────────────────────────────────────────── */
.chk-aside {
    /* The cart panel is a NORMAL page element — NOT sticky/fixed, NO height cap, NO
       internal scroll. It grows to its full content height and scrolls WITH the page;
       page scrolling handles any overflow (no nested cart scrollbar). align-self:start
       keeps it content-height in the 2-col grid (no stretch / blank space). */
    align-self: start;
}

.chk-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* ── Order header inside card ─── */
.chk-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.chk-card-head-title { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.chk-card-head-count { font-size: 0.75rem; color: var(--muted); }

/* ── Cart line items ─── */
.chk-lines { display: flex; flex-direction: column; }

.chk-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.chk-line:last-child { border-bottom: 0; }

.chk-line-veg {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='4' fill='%2316a34a'/><circle cx='12' cy='12' r='6' fill='%23fff'/><circle cx='12' cy='12' r='3.5' fill='%2316a34a'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
}

.chk-line-veg.is-nonveg {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='4' fill='%23E21B22'/><path d='M12 6.5 L17.2 16.8 H6.8 Z' fill='%23fff'/></svg>");
}

.chk-line-info { flex: 1; min-width: 0; }

/* The veg dot sits between the thumbnail and the text, so nudge it down to the name's
   baseline rather than the thumbnail's top edge. */

.chk-line-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 2px;
}

.chk-line-desc {
    font-size: 0.6875rem;
    color: var(--muted);
    margin: 0 0 1px;
    line-height: 1.4;
}

/* Added / Topping / Remove Topping lines: the value text stays light/muted,
   while the leading label ("Added:" etc.) is rendered darker via .chk-line-label. */
.chk-line-added {
    font-size: 0.65625rem;
    color: #333333b8;
    margin: 0;
    line-height: 1.4;
}
.chk-line-label { color: #1a1a1a; font-weight: 600; }

.chk-line-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.chk-line-qty {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--brand-green);
    border-radius: 6px;
    overflow: hidden;
    height: 28px;
}

.chk-line-qty button {
    width: 28px;
    height: 28px;
    border: 0;
    background: var(--brand-green);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s;
}

.chk-line-qty button:hover { background: var(--brand-green-dark); }

.chk-line-qty span {
    min-width: 28px;
    text-align: center;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

.chk-line-price {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
}

/* ── Deal / discount card (spec §7) ─────────────────────────────
   A header (deal name + optional "Free" badge + qty stepper + card price)
   over an indented list of the chosen constituent items. */
.chk-deal-card {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.chk-deal-card:last-child { border-bottom: 0; }

.chk-deal-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.chk-deal-headinfo {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.chk-deal-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.chk-deal-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1;
    color: #fff;
    background: var(--brand-green);
    border-radius: 4px;
    padding: 3px 6px;
}
/* Paid deal/combo lines — red "DEAL" tag (FREE lines keep the green badge above). */
.chk-deal-badge--deal { background: var(--brand-red, #E21B22); }

/* ── Unavailable line (per-outlet DisabledMenuItems) ─────────
   The line stays in the cart so the customer can see WHAT became unavailable; it just
   loses its quantity controls and price, and keeps a single Remove button. Muted rather
   than hidden — an invisible blocker for a disabled Place Order button helps nobody. */
.chk-line.is-unavailable,
.chk-deal-card.is-unavailable {
    opacity: .72;
}
.chk-line.is-unavailable .chk-line-name,
.chk-deal-card.is-unavailable .chk-deal-name {
    text-decoration: line-through;
    text-decoration-color: #b00020;
}

.chk-line-unavail {
    display: inline-block;
    margin: 2px 0 0;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1;
    color: #b00020;
    background: #fff4f4;
    border: 1px solid #f5c6c6;
    border-radius: 4px;
    padding: 3px 6px;
}

/* The lone control left on an unavailable line, in place of the qty stepper + price. */
.chk-line-remove-btn {
    border: 1px solid #f5c6c6;
    background: #fff4f4;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #b00020;
    cursor: pointer;
    white-space: nowrap;
}
.chk-line-remove-btn:hover { background: #ffe9e9; }

/* Indented list of the deal's chosen items. */
/* Constituent list — soft rounded panel with receipt-style dashed separators
   between rows, replacing the old bare border-left indent. */
.chk-deal-items {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: var(--bg-soft, #faf7f4);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: chk-deal-items-in .18s ease-out;
}
@keyframes chk-deal-items-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.chk-deal-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.chk-deal-item + .chk-deal-item {
    border-top: 1px dashed var(--border);
    padding-top: 8px;
}

/* Per-constituent price (or "FREE"), right-aligned. */
.chk-deal-item-right {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    align-items: flex-start;
}
.chk-deal-item-val {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
}

/* "Included Items" disclosure chip — shares the deal price row (left-aligned).
   Label + count pill + chevron that rotates when open (.is-open). */
.chk-deal-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(226, 27, 34, 0.08);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--brand-red);
    cursor: pointer;
}

/* Deal toggle (left) + price (right) on one vertically-centered row. The price is
   pushed right with margin-left:auto so it stays right-aligned even when the deal has
   no toggle (single-item); the toggle sits alone on the left for a free deal (no price). */
.chk-deal-pricerow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.chk-deal-pricerow .chk-line-price { margin-left: auto; }

/* Count pill + chevron inside the Included Items chip. */
.chk-deal-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--brand-red);
    color: #fff;
    font-size: 0.625rem;
    line-height: 1;
}
.chk-deal-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.18s ease;
}
.chk-deal-toggle.is-open svg { transform: rotate(180deg); }

/* Free-offer card: a plain "Remove" text link in the header (no qty / no price). */
.chk-deal-remove {
    border: 0;
    background: none;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-red);
    text-decoration: underline;
    cursor: pointer;
}
.chk-deal-remove:hover { color: var(--brand-red-dark, #c8161d); }

/* ── Add more items ─────────────────────────────────────────────
   Sits between the order lines and the coupon row. Shares the card's 25px
   gutter so it lines up with the coupon / bill rows below. Primary action is
   the dashed "add" affordance; Search is the quieter secondary. */
.chk-add-more {
    display: flex;
    gap: 8px;
    padding: 12px 25px;
    border-top: 1px solid var(--border);
}

.chk-add-more-btn,
.chk-add-more-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s;
}

.chk-add-more-btn {
    flex: 1;
    border: 1.5px dashed var(--brand-red);
    color: var(--brand-red);
}
.chk-add-more-btn:hover { background: var(--brand-red-soft); }

.chk-add-more-search {
    flex: 0 0 auto;
    border: 1.5px solid var(--border);
    color: var(--text);
}
.chk-add-more-search:hover { background: var(--bg-soft); }

.chk-add-more svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Coupon ─────────────────────────────────────────────────── */
.chk-coupon-wrap { border-top: 1px solid var(--border); padding: 12px 25px; }

.chk-coupon-row {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.chk-coupon-icon { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }

.chk-coupon-input {
    flex: 1;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--text);
    background: transparent;
    min-width: 0;
}

.chk-coupon-input::placeholder { color: var(--muted); }

.chk-coupon-apply {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-red);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0 4px;
}

.chk-coupon-apply:hover { color: var(--brand-red-dark); }

.chk-coupon-applied {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #f0fdf4;
    border-bottom: 1px solid #bbf7d0;
}

.chk-coupon-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.chk-coupon-badge svg { width: 16px; height: 16px; }

.chk-coupon-applied-info {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text);
    line-height: 1.5;
}

.chk-coupon-code { font-weight: 700; color: var(--brand-green); }

.chk-coupon-remove {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}

/* .chk-offers-link (the old "View All Offers" row) is gone — the offers themselves are
   listed inline now, so the link had nothing left to reveal. */

/* ── "Offers for you" — inline cart vouchers ──────────────────
   Compact rows, not the Offers page's image cards: this sits between the coupon field and
   the bill, so it has to stay small. offers.js drives the state — it sets [hidden] on the
   section/rows for out-of-window offers and toggles .is-locked / .is-applied on the button,
   hence the explicit [hidden] rules (a display value here would otherwise beat the
   attribute). */
.chk-offers { margin: 8px 0 4px; }
.chk-offers[hidden] { display: none; }

.chk-offers-head {
    margin: 0 0 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.chk-offer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border: 1px dashed #f0c9c9;
    border-radius: 10px;
    background: #fffaf9;
}
.chk-offer[hidden] { display: none; }

/* Thumbnail — the offer's own image, or a tinted glyph tile when it has none, so every row
   keeps the same rhythm instead of the text jumping left on image-less offers. */
.chk-offer-thumb {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: #fdeaea;
}
.chk-offer-thumb--ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--brand-red);
}

.chk-offer-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chk-offer-amount { font-size: 0.875rem; font-weight: 800; color: var(--brand-red); }
.chk-offer-cap { font-weight: 600; color: var(--muted); }
.chk-offer-title { font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.chk-offer-meta { font-size: 0.6875rem; color: var(--muted); }

/* Lock reason ("Add items worth $8 to unlock", "Available today 11:00 AM - 3:00 PM",
   "Login to check your eligibility") and the apply result. */
.chk-offer-unlock { margin: 2px 0 0; font-size: 0.6875rem; line-height: 1.35; color: #b00020; }
.chk-offer-unlock:not(.is-locked) { color: var(--muted); }
.chk-offer-msg { margin: 2px 0 0; font-size: 0.6875rem; line-height: 1.35; color: #b00020; }
.chk-offer-msg.is-ok { color: #0a8a3a; }

.chk-offer-btn {
    flex-shrink: 0;
    align-self: center;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: var(--brand-red);
    color: #fff;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: filter 0.15s;
}
.chk-offer-btn:hover { filter: brightness(0.93); }
.chk-offer-btn:disabled, .chk-offer-btn.is-locked { background: #d4d4d8; cursor: not-allowed; filter: none; }
.chk-offer-btn.is-applied { background: #0a8a3a; cursor: default; }

/* Item offers + deals are built, not applied — outlined button so "Get" reads as
   "there's a step here", while a voucher's solid "Apply" reads as one tap. */
.chk-offer--item { border-style: solid; border-color: var(--border); background: #fff; }
.chk-offer--item .chk-offer-amount { color: var(--text); }
.chk-offer--item .chk-offer-btn {
    background: #fff;
    color: var(--brand-red);
    box-shadow: inset 0 0 0 1.5px var(--brand-red);
}
.chk-offer--item .chk-offer-btn:hover { background: var(--brand-red-soft, #fff4f4); filter: none; }
.chk-offer--item .chk-offer-btn:disabled,
.chk-offer--item .chk-offer-btn.is-locked {
    background: #fff;
    color: #9ca3af;
    box-shadow: inset 0 0 0 1.5px #e5e7eb;
}
.chk-offer--item .chk-offer-btn.is-applied { background: #0a8a3a; color: #fff; box-shadow: none; }

/* ── Bill breakdown ─────────────────────────────────────────── */
.chk-bill { border-top: 1px solid var(--border); }

.chk-bill-detail {
    padding: 4px 0 12px;
}

.chk-bill-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    font-size: 0.8125rem;
    color: var(--text);
}
.chk-bill-row span:first-child { color: var(--text); font-weight: 500; }

/* Qualifier appended to a bill label — e.g. the distance a delivery fee was charged for.
   Lighter and lighter-weight than the label it trails so it reads as a footnote to that row,
   not as a second label. Nested inside the label span, so it must undo the weight the rule
   above sets on that span. */
.chk-bill-note { color: var(--muted); font-weight: 400; }

/* ── Order summary ────────────────────────────────────────────────────────────
   Heading replaces the old "Total Bill - $X" toggle: the total now has its own row
   at the foot, so a collapsed summary that hid it no longer made sense. */
.chk-bill-heading {
    margin: 0;
    padding: 14px 16px 6px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
}

/* Taxes & fees group. The header is itself a .chk-bill-row so it aligns with every
   other line; these rules only undo the button chrome a <button> brings with it. */
.chk-fees-toggle {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.chk-fees-toggle span:first-child { display: inline-flex; align-items: center; gap: 4px; }

.chk-fees-chev {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
/* Points UP when expanded (matching the design) and down when collapsed. Driven off
   aria-expanded so the arrow can never disagree with what screen readers announce. */
.chk-fees-toggle[aria-expanded="true"] .chk-fees-chev { transform: rotate(180deg); }

/* Children sit indented under the group header so the hierarchy is readable without rules
   or boxes — the indent alone says "these add up to the number above". */
.chk-fees-row { padding-left: 32px; }
.chk-fees-row span:first-child { color: var(--muted); font-weight: 500; }

/* Total — separated by a rule and set heavier, so the eye lands on it last and hardest. */
.chk-bill-total {
    margin-top: 6px;
    border-top: 1px solid var(--line, #e5e7eb);
    padding-top: 12px;
    font-size: 1rem;
}
.chk-bill-total span:first-child,
.chk-bill-total span:last-child { font-weight: 700; color: var(--text); }
.chk-bill-row span:last-child  { color: var(--text); font-weight: 600; }

.chk-bill-row--discount span:last-child { color: var(--brand-green); font-weight: 700; }

/* ── Fee-info ⓘ icon + shared dark tooltip ──────────────────────────────────
   An ⓘ beside the Delivery Fees / Merchant & Platform Charges label opens a
   small dark popover (cart.js mounts the icon and appends ONE popover to
   <body>, positioning it). The icon inherits its label's colour (via `inherit`
   + opacity) so it stays readable in both the normal and high-contrast themes;
   the popover is dark with white text + a caret, matching the reference. */
.chk-fee-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.chk-fee-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;      /* track the fee label's colour in every theme */
    opacity: 0.7;
    cursor: pointer;
    line-height: 0;
    border-radius: 50%;
}
.chk-fee-info:hover,
.chk-fee-info:focus-visible { opacity: 1; }
.chk-fee-info:focus-visible {
    outline: 2px solid var(--brand-red, #E21B22);
    outline-offset: 2px;
}
.chk-fee-info svg { display: block; }

.chk-fee-tip {
    position: fixed;
    z-index: 1200;
    max-width: min(280px, calc(100vw - 24px));
    background: #1f1f1f;
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1.35;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    pointer-events: none;   /* text-only: never steals the pointer / outside-click */
}
.chk-fee-tip[hidden] { display: none; }
.chk-fee-tip-text { display: block; }
/* Caret — points DOWN at the icon when the popover sits above it (default). */
.chk-fee-tip-arrow {
    position: absolute;
    top: 100%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f1f1f;
}
/* Flipped BELOW the icon → caret points UP from the popover's top edge. */
.chk-fee-tip--below .chk-fee-tip-arrow {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1f1f1f;
}
/* High-contrast: the dark popover would blend into the black page — outline it. */
html.a11y-contrast .chk-fee-tip { border: 1px solid #fff; }

/* ── Place order button ──────────────────────────────────────── */
/* Split-ends place button: the action label anchors LEFT, the live total anchors RIGHT —
   the fastest layout to scan. A lone child (login button, zero-total states) centers
   via :only-child instead of hugging the left edge. */
.chk-place-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: calc(100% - 32px);
    margin: 0 16px 16px;
    padding: 0 20px;
    height: 48px;
    border: 0;
    border-radius: 24px;
    background: var(--brand-red);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: filter 0.15s, transform 0.1s;
}
.chk-place-btn > :only-child { margin-inline: auto; }

.chk-place-btn:hover { filter: brightness(0.93); }
.chk-place-btn:active:not(:disabled) { transform: scale(0.98); }
.chk-place-btn:disabled { background: #d4d4d8; cursor: not-allowed; filter: none; }
.chk-place-btn:disabled:hover { filter: none; }

/* Live order total on the button's right end — painted by paintPlaceBtn (cart.js)
   whenever the bill re-renders. */
.chk-place-total {
    font-weight: 800;
    white-space: nowrap;
}

/* Inline warning above the (disabled) Place Order button. */
.chk-place-warn {
    margin: 0 16px 8px;
    padding: 10px 12px;
    background: #fff4f4;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
    color: #b00020;
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* ============================================================
   Address-selection flow (Add new address)
   Three overlays: map → search → details.
   ============================================================ */

.addr-overlay {
    position: fixed;
    inset: 0;
    /* Same reason as .chk-confirm-overlay below: 400 sat under _MenuLayout's header/drawer stack
       (menu.css, 9000-100000), so the "Enter details" and Stripe "Pay" popovers — both use this
       class — left the sticky header and the slide-in cart drawer clickable on top of them. Kept
       just under the confirm overlay so the payment verdict always covers these. */
    z-index: 100050;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    /* Map popover sits inside a bounded dialog window (rounded corners visible
       on all 4 sides; dark backdrop around it). Search + Details overlays use
       the `--centered` variant below which switches off the padding. */
    padding: 40px;
}
.addr-overlay[hidden] { display: none !important; }

/* "Centered" variant for Search Location + Enter Complete Details modals.
   These open ABOVE the map dialog and anchor at its top-left. The backdrop
   is transparent so the map underneath stays at full brightness — only the
   small floating card is visible on top. */
.addr-overlay--centered {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    background: #00000026;
    /* Last-resort scroll. The card caps its own height below, but every viewport-unit cap is an
       ESTIMATE on mobile Safari — vh measures the URL-bar-hidden viewport, so a card sized to fit
       can still hang below the visible area while the bar is showing. Without this the overlay is
       position:fixed and immovable, so anything past the fold (the Confirm button, every time) is
       simply unreachable. One line that makes "my cap was slightly wrong" a scroll instead of a
       dead end. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.addr-overlay--centered .addr-search-card,
.addr-overlay--centered .addr-details-card {
    margin: 80px 0 0 80px;
}

/* Enter Complete Details now has 6 fields — cap the card height and scroll so every
   field + the Confirm Address button stay reachable on small / short screens.

   THE TWO max-height LINES ARE NOT A DUPLICATE — do not "tidy" one away. dvh landed in Safari
   15.4; older Safari does not know the unit, and an unknown unit inside calc() invalidates the
   WHOLE declaration rather than just that term. With only the dvh line those browsers got NO
   height cap at all, so a 6-field form ran straight off the bottom of a position:fixed overlay
   that could not scroll — the bottom fields and the Confirm Address button were unreachable, and
   the card read as "misaligned" because its top was pinned while its bottom was off-screen.
   vh first as the floor, dvh second so modern Safari still gets the URL-bar-aware value. */
.addr-overlay--centered .addr-details-card {
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
/* Inline validation: red field outline + a red message line above the button. */
.addr-field-error {
    margin: 8px 16px 0;
    color: var(--brand-red, #E21B22);
    font-size: 0.75rem;
    font-weight: 600;
}
.addr-details-card .addr-field.is-invalid input,
.addr-details-card .addr-field.is-invalid textarea {
    border-color: var(--brand-red, #E21B22);
    box-shadow: 0 0 0 2px rgba(226, 27, 34, 0.12);
}

/* "Center" variant — used by the Car Details popover. Centers the dialog
   on both axes with a dimmed backdrop. Works at every viewport (the card
   has its own max-width, so it stays a compact dialog on desktop and
   stretches near edge-to-edge on phones). */
.addr-overlay--center {
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
}
.addr-overlay--center .addr-details-card {
    margin: 0;
    width: 100%;
    max-width: 360px;
}

/* ── Bounded map popover (new + edit) ─────────────────────────
   Map fills the dialog. Confirm card pinned at the bottom-left of the
   dialog. Search + Details overlays open ABOVE this dialog. */
.addr-map-wrap {
    position: relative;
    flex: 1;
    background: #e9eef2;
    overflow: hidden;
    display: flex;
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}
.addr-map {
    position: absolute;
    inset: 0;
    background: #e9eef2;
}

/* Close X — top-right corner of the fullscreen popover. */
.addr-map-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,0.95);
    color: var(--brand-red, #E21B22);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.addr-map-close-btn:hover { background: #fff; }
.addr-map-close-btn svg { width: 18px; height: 18px; }
.addr-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #6b7280;
    padding: 24px;
    text-align: center;
    background: repeating-linear-gradient(45deg, #eef2f6 0 12px, #e3e8ee 12px 24px);
}
.addr-map-placeholder svg { width: 56px; height: 56px; color: #E21B22; }
.addr-map-placeholder p { margin: 0; max-width: 360px; font-size: 0.8125rem; }
.addr-map-placeholder code {
    background: #f7f4f4;
    color: #b00020;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* "Place pin to the exact location" tooltip on top of the fullscreen map. */
/* Callout that floats directly ABOVE the centred pin (not pinned to the top of
   the map). top:50% puts its top at the map centre; the translate lifts it by
   its own height plus the pin's height so the caret sits just above the pin. */
.addr-map-tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-100% - 44px));
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    white-space: nowrap;
    z-index: 3;
    pointer-events: none;
}
/* Downward caret pointing at the pin below. */
.addr-map-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #fff;
}
.addr-map-tip strong { font-size: 0.8125rem; color: #1f1f1f; }
.addr-map-tip span   { font-size: 0.75rem; color: #6b7280; }

/* Centered pin marker overlay — sits above the map at viewport center. */
.addr-map-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-100% + 6px));
    pointer-events: none;
    z-index: 2;
}
.addr-map-pin svg { width: 44px; height: 44px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }

/* Zoom buttons — sit at the bottom-right of the dialog. */
.addr-map-zoom {
    position: absolute;
    right: 18px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}
.addr-map-zoom button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    font-size: 1.125rem;
    cursor: pointer;
    color: #1f1f1f;
}
.addr-map-zoom button:hover { background: #f6f6f6; }

/* Confirm-location card — fixed-width, bottom-LEFT of the dialog. */
.addr-confirm-card {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 400px;
    max-width: calc(100% - 40px);
    max-height: calc(100% - 40px);
    background: #fff;
    border-radius: 12px;
    padding: 18px 18px 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.22);
    z-index: 3;
    overflow-y: auto;
}
.addr-confirm-title {
    margin: 0 0 14px;
    text-align: center;
    color: var(--brand-red, #E21B22);
    font-size: 0.9375rem;
    font-weight: 700;
    background: #fdecec;
    padding: 12px;
    border-radius: 6px;
}

/* Search trigger row inside the confirm card */
.addr-search-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 11px 14px;
    color: #6b7280;
    font-size: 0.8125rem;
    cursor: pointer;
    margin: 0 0 14px;
    font-family: inherit;
    text-align: left;
}
.addr-search-row:hover { border-color: #cbd5e1; }
.addr-search-row svg { width: 18px; height: 18px; color: var(--brand-red, #E21B22); flex-shrink: 0; }

/* Selected pin row */
.addr-pick-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 0;
}
.addr-pick-info { flex: 1; min-width: 0; }
.addr-pick-label { font-size: 0.75rem; color: #6b7280; }
.addr-pick-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}
.addr-pick-pin { width: 16px; height: 16px; flex-shrink: 0; }
.addr-pick-line strong { font-size: 0.875rem; color: #1f1f1f; }
.addr-pick-sub {
    margin: 4px 0 0 22px;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
}
.addr-pick-change {
    background: transparent;
    border: 0;
    color: var(--brand-red, #E21B22);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}

/* Bottom "Confirm Location" / "Confirm Address" button (shared) */
.addr-confirm-btn {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 8px;
    background: var(--brand-red, #E21B22);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    font-family: inherit;
    margin-top: 12px;
}
.addr-confirm-btn:hover { filter: brightness(0.93); }
.addr-confirm-btn:disabled { background: #d4d4d8; cursor: not-allowed; }

/* ── Search Location modal ─────────────────────────────────── */
.addr-search-card {
    width: 340px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.addr-search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
    border-bottom: 1px solid #f1f5f9;
}
.addr-search-head h3 { margin: 0; font-size: 0.9375rem; font-weight: 700; color: #1f1f1f; }
.addr-search-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--brand-red, #E21B22);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.addr-search-close svg { width: 16px; height: 16px; }

.addr-search-input-wrap {
    position: relative;
    padding: 12px 14px 6px;
}
.addr-search-input-ico {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--brand-red, #E21B22);
    pointer-events: none;
}
.addr-search-input-wrap input {
    width: 100%;
    padding: 10px 14px 10px 36px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: #1f1f1f;
}
.addr-search-input-wrap input:focus {
    outline: none;
    border-color: var(--brand-red, #E21B22);
}

.addr-current-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 14px 14px;
    height: 42px;
    background: var(--brand-red, #E21B22);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.addr-current-btn:hover { filter: brightness(0.93); }
.addr-current-btn svg { width: 18px; height: 18px; }

.addr-search-results {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
    max-height: 360px;
    overflow-y: auto;
    border-top: 1px solid #f1f5f9;
}
.addr-search-results li {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f8fafc;
}
.addr-search-results li:hover { background: #fafafa; }
.addr-search-results li .addr-result-pin {
    grid-row: 1 / span 2;
    align-self: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #1f1f1f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.addr-search-results li .addr-result-pin svg { width: 16px; height: 16px; }
.addr-search-results li .addr-result-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f1f1f;
}
.addr-search-results li .addr-result-tag {
    grid-column: 2;
    font-size: 0.625rem;
    color: var(--brand-red, #E21B22);
    margin-top: 1px;
}
.addr-search-results li .addr-result-sub {
    grid-column: 2;
    font-size: 0.75rem;
    color: #6b7280;
}

/* ── Enter Complete Details modal ──────────────────────────── */
.addr-details-card {
    width: 340px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 10px;
    /* Layered drop shadow lifts the card off the map clearly. The first
       layer is a tight near-shadow for definition; the second is a softer
       diffuse shadow for depth. */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.18),
        0 24px 48px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
}
.addr-details-card .addr-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 16px 0;
}
/*.addr-details-card .addr-field:first-of-type { padding-top: 14px; }*/
.addr-details-card .addr-field > span {
    font-size: 0.6875rem;
    color: #6b7280;
}
.addr-details-card .addr-field input,
.addr-details-card .addr-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-family: inherit;
    color: #1f1f1f;
    resize: vertical;
}
.addr-details-card .addr-field input:focus,
.addr-details-card .addr-field textarea:focus {
    outline: none;
    border-color: var(--brand-red, #E21B22);
}
/* The .chk-paymode-* block (pay now / pay at the counter radios) was deleted along with its
   markup — a table-QR dine-in order pays by card like every other order type. */

/* `.addr-confirm-btn` sets width:100% globally; inside the Enter Complete
   Details card we add 16px horizontal margins, so the button width has to
   subtract those to stay inside the card. */
.addr-details-card .addr-confirm-btn {
    width: calc(100% - 32px);
    margin: 16px 16px 0;
}

/* ── Responsive: full-screen map + tighter type on mobile ──── */
@media (max-width: 720px) {
    /* Map dialog goes edge-to-edge — no backdrop margin, no rounded
       corners, no outer shadow. The map fills the whole viewport. */
    .addr-overlay        { padding: 0; }
    .addr-overlay--centered { padding: 0; }
    /* Centered dialog (Car Details) keeps a small gutter on phones so the
       card doesn't touch the edges. */
    .addr-overlay--center { padding: 16px; }
    .addr-overlay--center .addr-details-card { max-width: 100%; }
    .addr-map-wrap       { border-radius: 0; box-shadow: none; }

    /* Confirm card stretches across the bottom (full width on phones).
       Override desktop's max-width cap so the card spans viewport-20. */
    .addr-confirm-card {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-width: none;
        padding: 12px 12px 14px;
        border-radius: 10px;
    }
    .addr-confirm-title  { font-size: 0.8125rem; padding: 8px; margin-bottom: 10px; }
    .addr-search-row     { padding: 9px 12px; font-size: 0.75rem; margin-bottom: 10px; }
    .addr-pick-label     { font-size: 0.6875rem; }
    .addr-pick-line strong { font-size: 0.8125rem; }
    .addr-pick-sub       { font-size: 0.6875rem; }
    .addr-pick-change    { font-size: 0.6875rem; }
    .addr-confirm-btn    { height: 42px; font-size: 0.8125rem; margin-top: 10px; }

    /* Map tooltip + zoom shrink to fit the small screen. Keep it floating
       above the pin (don't pin to the top); allow the text to wrap. */
    .addr-map-tip        { padding: 7px 12px; max-width: min(82vw, 320px); white-space: normal; }
    .addr-map-tip strong { font-size: 0.75rem; }
    .addr-map-tip span   { font-size: 0.6875rem; }
    .addr-map-close-btn  { top: 10px; right: 10px; width: 32px; height: 32px; }
    .addr-map-close-btn svg { width: 16px; height: 16px; }
    .addr-map-zoom       { right: 10px; bottom: calc(40% + 10px); }
    .addr-map-zoom button { width: 32px; height: 32px; font-size: 1rem; }

    /* Search Location modal — anchor below the close X, full-width minus
       small side gutters. Smaller header / input / button. */
    .addr-overlay--centered .addr-search-card,
    .addr-overlay--centered .addr-details-card {
        margin: 56px 10px 0;
        width: calc(100% - 20px);
    }
    .addr-search-head    { padding: 10px 10px 8px; }
    .addr-search-head h3 { font-size: 0.8125rem; }
    .addr-search-close   { width: 26px; height: 26px; }
    .addr-search-close svg { width: 14px; height: 14px; }
    .addr-search-input-wrap { padding: 10px 10px 4px; }
    .addr-search-input-wrap input { padding: 9px 12px 9px 32px; font-size: 0.75rem; }
    .addr-search-input-ico { left: 20px; width: 14px; height: 14px; }
    .addr-current-btn    { margin: 6px 10px 10px; height: 38px; font-size: 0.75rem; }
    .addr-current-btn svg { width: 16px; height: 16px; }
    .addr-search-results { max-height: 240px; }
    .addr-search-results li { padding: 8px 10px; }
    .addr-search-results li .addr-result-title { font-size: 0.75rem; }
    .addr-search-results li .addr-result-sub   { font-size: 0.6875rem; }

    /* Enter Complete Details modal — smaller fields + button. */
    .addr-details-card .addr-field { padding: 8px 12px 0; }
    .addr-details-card .addr-field:first-of-type { padding-top: 12px; }
    .addr-details-card .addr-field > span { font-size: 0.625rem; }
    .addr-details-card .addr-field input,
    .addr-details-card .addr-field textarea { padding: 8px 10px; font-size: 0.75rem; }
    .addr-details-card .addr-confirm-btn {
        width: calc(100% - 24px);
        margin: 12px 12px 0;
        height: 42px;
        font-size: 0.8125rem;
    }
}

/* (The bespoke .upsell-modal styles have been removed — the upsell ADD click
   now opens the shared customize popover (.cust-overlay) defined in menu.css.) */

/* ============================================================
   Stripe Payment popover (#chkPayOverlay)
   ============================================================
   Dedicated layout so the spacing / scroll / full-screen-mobile work here does
   NOT touch the shared address popovers (the markup keeps .addr-overlay /
   .addr-details-card / .addr-search-head / .addr-confirm-btn for base styling,
   and these .pt-pay-* rules — declared AFTER the address rules — override only
   what the payment modal needs). Structure: header (fixed) / body (the only
   scroll surface) / footer (fixed Pay button). */
.pt-pay-overlay {
    /* Override the .addr-overlay base (stretch + 40px pad) → centered dialog. */
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
}

.pt-pay-card {
    width: 100%;
    max-width: 460px;
    /* Cap the height so a tall form scrolls inside the card instead of off-screen. */
    max-height: min(90vh, 760px);
    margin: 0;
    padding: 0;                 /* drop .addr-details-card's padding-bottom */
    border-radius: 16px;
    overflow: hidden;           /* clip rounded corners; .pt-pay-body owns the scroll */
    display: flex;
    flex-direction: column;
}

/* Header — fixed at the top. */
.pt-pay-head {
    flex-shrink: 0;
    padding: 18px 20px;
    border-bottom: 1px solid #eef0f4;
}
.pt-pay-head h3 { font-size: 1.0625rem; }
.pt-pay-head .addr-search-close { width: 30px; height: 30px; }

/* Body — the only scroll surface; comfortable padding so the form never hugs
   the card edges, with a thin, smooth scrollbar. */
.pt-pay-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c7c9d1 transparent;
}
.pt-pay-body::-webkit-scrollbar { width: 6px; }
.pt-pay-body::-webkit-scrollbar-thumb { background: #c7c9d1; border-radius: 3px; }
.pt-pay-body::-webkit-scrollbar-thumb:hover { background: #a9acb6; }
.pt-pay-body::-webkit-scrollbar-track { background: transparent; }
.pt-pay-body #chkPayElement { margin: 0; }
.pt-pay-body #chkPayError { margin: 14px 0 0; }

/* Footer — Pay button pinned at the bottom (always visible). The safe-area
   inset keeps it clear of the iOS home indicator in the full-screen sheet. */
.pt-pay-foot {
    flex-shrink: 0;
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eef0f4;
    background: #fff;
}
.pt-pay-foot .addr-confirm-btn { width: 100%; margin: 0; }

/* ── Mobile (≤768px): full-screen payment sheet ──
   Edge-to-edge, no margins / radius; header + footer stay fixed and only the
   body scrolls. 100dvh tracks the visible viewport (mobile browser chrome). */
@media (max-width: 768px) {
    .pt-pay-overlay { padding: 0; }
    .pt-pay-card {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border-radius: 0;
        margin: 0;
    }
}

/* ============================================================
   Enter Details popover (#chkDetailsOverlay)
   ============================================================
   Same dedicated header/body/footer treatment as the payment popover, scoped
   with .pt-details-* so the other .addr-details-card users (car details, the
   map-based address-entry flow) are untouched. Structure: header (fixed) /
   body (the only scroll surface, thin brand scrollbar) / footer (fixed CTA). */
.pt-details-overlay {
    /* Override the .addr-overlay base (stretch + 40px pad) → centered dialog. */
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
}

.pt-details-card {
    width: 100%;
    max-width: 460px;
    max-height: min(90vh, 760px);
    margin: 0;
    padding: 0;                 /* drop .addr-details-card's padding-bottom */
    border-radius: 16px;
    overflow: hidden;           /* clip rounded corners; .pt-details-body owns the scroll */
    display: flex;
    flex-direction: column;
}

/* Header — fixed at the top. */
.pt-details-head {
    flex-shrink: 0;
    padding: 18px 20px;
    border-bottom: 1px solid #eef0f4;
    background: #fff;
}
.pt-details-head h3 { font-size: 1.0625rem; }
.pt-details-head .addr-search-close { width: 30px; height: 30px; }
/* Back arrow — mobile-only (see the ≤768px block below); desktop is a centered dialog
   where the X alone is the norm, so this stays hidden there. */
.pt-details-back { display: none; }

/* Body — the only scroll surface. Flex column so field + section spacing is
   handled by `gap` (12–16px fields, ~20px below the timing section), with 16px
   internal padding and a thin, rounded, brand-coloured scrollbar. */
.pt-details-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-red, #E21B22) transparent;
}
.pt-details-body::-webkit-scrollbar { width: 6px; }
.pt-details-body::-webkit-scrollbar-thumb { background: var(--brand-red, #E21B22); border-radius: 3px; }
.pt-details-body::-webkit-scrollbar-track { background: transparent; }
/* Keep flex children at their natural height — without this, flex-shrink:1 would
   compress tall content to fit the body instead of letting it overflow, so the
   scroll would never engage. */
.pt-details-body > * { flex-shrink: 0; }
/* Fields align to the body's 16px padding (drop the shared card's own field padding). */
.pt-details-body .addr-field { padding: 0; }
/* A touch more space below the timing block so it reads as its own section (~20px). */
.pt-details-body .chk-timing:not([hidden]) { margin-bottom: 6px; }

/* Footer — Continue button pinned at the bottom (always visible). The safe-area
   inset keeps it clear of the iOS home indicator in the full-screen sheet. */
.pt-details-foot {
    flex-shrink: 0;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eef0f4;
    background: #fff;
}
.pt-details-foot .addr-confirm-btn { width: 100%; margin: 0; }

/* ── Mobile (≤768px): full-screen Enter Details sheet ──
   Edge-to-edge, no margins / radius; header + footer stay fixed and only the
   body scrolls. 100dvh tracks the visible viewport (mobile browser chrome). */
@media (max-width: 768px) {
    .pt-details-overlay { padding: 0; }
    .pt-details-card {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
        border-radius: 0;
        margin: 0;
    }
    /* Full-screen sheet reads as a "screen", not a dialog — a leading back arrow is the
       native mobile pattern (matches .toppings-back). The X stays too; both close the same
       way (see cart.js), this just adds the affordance mobile users expect top-left. */
    .pt-details-head { justify-content: flex-start; gap: 10px; }
    .pt-details-head h3 { flex: 1 1 auto; }
    .pt-details-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border: 0;
        background: transparent;
        color: var(--text, #1f1f1f);
        cursor: pointer;
        padding: 2px;
    }
    .pt-details-back svg { width: 22px; height: 22px; }
}

/* ── Order-placed confirmation overlay ──────────────────────── */
.chk-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    /* Above EVERYTHING on the page, not just the cart's own content. This overlay was at 300,
       which is below _MenuLayout's entire header/drawer stack in menu.css — .pt-drawer-scrim
       (9000), .pt-drawer (9100, the slide-in cart WITH its qty steppers and remove buttons),
       .cart-scrim (9250), .pt-ot-pop (9600), .pt-del-overlay (100000) — and below a11y.css
       (99999). So "Confirming your payment…" painted a dimmed backdrop over the page body while
       the header and cart drawer sat on top of it, still clickable: the customer could open the
       drawer and edit the order that was already paid for. Current ceiling across every
       stylesheet _MenuLayout loads is 100000; this must stay above whatever that ceiling
       becomes. */
    z-index: 100100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.chk-confirm-card {
    background: var(--brand-green);
    border-radius: 16px;
    padding: 24px 22px;
    max-width: 380px;   
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.22);
    animation: confirm-in 0.25s ease;
}

@keyframes confirm-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* Order-success image in a white circle (Figma "Ellipse 90"): Pizza Twist Green ring + drop shadow. */
.chk-confirm-icon {
    width: 110px;
    height: 110px;
    margin: 0 auto 9px;
    border-radius: 50%;
    background: #fff;
    border: 6px solid #0e7535; /* Pizza Twist Green */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .chk-confirm-icon img {
        width: 100%;
        height: 90%;
        object-fit: cover;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }

.chk-confirm-title {
    margin: 0 0 8px;
    font-size: 2.1875rem;
    font-weight: 800;
    color: var(--bg-soft);
}
.chk-confirm-sub {
    margin: 0 0 10px;
    font-size: 1rem;
    color: var(--bg-soft);
    line-height: 1.3;
}
.chk-confirm-id {
    margin: 0 0 15px;
    font-size: 0.875rem;
    color: var(--bg-soft);
}
    .chk-confirm-id strong {
        color: var(--bg-soft);
    }

/* ── Interim "confirming your payment" state ─────────────────────────────────────
   Same overlay and card as the success state, so landing on success is a class removal on
   an element already painted — no second overlay, no flash between the two. Everything that
   only makes sense once the order EXISTS (success artwork, order id, Track/Continue actions)
   is hidden; the title and subtitle are overridden in place via ::before, so no markup change
   and no JS text-swapping that would have to be undone on success. */
.chk-confirm-overlay.is-verifying .chk-confirm-icon img,
.chk-confirm-overlay.is-verifying .chk-confirm-id,
.chk-confirm-overlay.is-verifying .chk-confirm-actions { display: none; }

/* Hide the success copy without collapsing the box, then supply the interim copy. */
.chk-confirm-overlay.is-verifying .chk-confirm-title,
.chk-confirm-overlay.is-verifying .chk-confirm-sub { font-size: 0; }

.chk-confirm-overlay.is-verifying .chk-confirm-title::before {
    content: "Confirming your payment…";
    font-size: 1.5rem;
    display: block;
}
.chk-confirm-overlay.is-verifying .chk-confirm-sub::before {
    content: "Hold on a moment — please don't close this page.";
    font-size: 0.95rem;
    display: block;
}

/* Spinner in place of the success artwork. */
.chk-confirm-overlay.is-verifying .chk-confirm-icon::after {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--bg-soft);
    border-radius: 50%;
    animation: chk-confirm-spin 0.9s linear infinite;
}
@keyframes chk-confirm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .chk-confirm-overlay.is-verifying .chk-confirm-icon::after { animation-duration: 2.4s; }
}

/* ── Failure state ───────────────────────────────────────────────────────────────
   Third face of the same overlay/card, for the same reason as the interim state above:
   the customer must never see the cart again between "Confirming your payment…" and the
   verdict. Hides everything that implies an order exists (success artwork, order id,
   Track/Continue) and swaps in the reason + a way back to the cart to retry. */
.chk-confirm-err,
.chk-confirm-fail-actions { display: none; }

.chk-confirm-overlay.is-failed .chk-confirm-icon img,
.chk-confirm-overlay.is-failed .chk-confirm-id,
.chk-confirm-overlay.is-failed .chk-confirm-actions,
.chk-confirm-overlay.is-failed .chk-confirm-sub { display: none; }

.chk-confirm-overlay.is-failed .chk-confirm-err,
.chk-confirm-overlay.is-failed .chk-confirm-fail-actions { display: block; }

/* Red card so the state reads as a failure at a glance rather than as a green success
   card with different words on it. */
.chk-confirm-overlay.is-failed .chk-confirm-card { background: var(--brand-red); }
.chk-confirm-overlay.is-failed .chk-confirm-icon { border-color: #a3121a; }

.chk-confirm-overlay.is-failed .chk-confirm-title { font-size: 0; }
.chk-confirm-overlay.is-failed .chk-confirm-title::before {
    content: "Sorry";
    font-size: 2.1875rem;
    display: block;
}

/* Message text is set from JS (it differs for "payment not captured" vs "couldn't
   finalize"), so unlike the interim state this copy is NOT baked into content. */
.chk-confirm-err {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.35;
    color: var(--bg-soft);
}

/* ✕ in place of the success artwork, matching the spinner's placement. */
.chk-confirm-overlay.is-failed .chk-confirm-icon::after {
    content: "✕";
    display: block;
    font-size: 54px;
    line-height: 1;
    font-weight: 700;
    color: var(--brand-red);
}

/* Actions row. The buttons were bare inline-blocks with only markup whitespace between them,
   which collapsed them into what looked like a single control. Flex + gap separates them and
   keeps them equal width; they wrap to their own rows (same 12px gap) when the card is too
   narrow, which is what the 320px breakpoint below is for.
   NOTE: the is-verifying / is-failed rules above hide this row with a two-class selector, so
   they still win over the display:flex here. */
.chk-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
    .chk-confirm-actions .chk-confirm-btn {
        flex: 1 1 0;
        min-width: 130px;
    }

.chk-confirm-btn {
    display: inline-block;
    padding: 10px;
    background: transparent;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.03125rem;
    font-weight: 500;
    border:1px solid white;
    color:white;
}
.chk-confirm-btn:hover {
    background: var(--bg-soft);
    color: var(--brand-green);
}

@media (max-width: 375px){
    .chk-confirm-btn {
        font-size: 0.90625rem;
    }

}

@media (max-width: 320px){
    .chk-confirm-title {
       
        font-size: 1.875rem;
    }
    .chk-confirm-actions{
        gap: 8px;
    }
    .chk-confirm-btn {
        width: 100%;
    }

}
.chk-confirm-actions {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

/* ── Responsive ──────────────────────────────────────────────── */
/* Boundary raised 1024 → 1200: a fixed 560px panel starves the left column between
   those two widths (it would leave ~380px there), so the narrower panel starts earlier. */
@media (max-width: 1200px) {
    .chk-shell {
        /* 370 → 420: the same widening, held back here because the left column has no
           1280px cap to grow into — at 841px it is only ~365px wide. */
        grid-template-columns: 1fr 420px;
        gap: 20px;
        padding: 16px 18px 48px;
    }
    /* No .chk-upsell-grid override here — the auto-fill track sizing above already
       steps the column count down as the left column narrows. */
}

@media (max-width: 840px) {
    .chk-shell {
        grid-template-columns: 1fr;
        padding: 12px 14px 80px;
    }
    /* On mobile the order summary sits ABOVE the add-ons and addresses */
    .chk-aside {
        order: -1;
    }

    /* "Complete your meal" → horizontal scroll on mobile so cards keep a
       usable width instead of cramming 4 columns into the viewport.
       Each card gets a fixed minimum width, thin scrollbar styled to match. */
    .chk-upsell-grid {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;
        /* Firefox */
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.25) transparent;
        -webkit-overflow-scrolling: touch;
    }
    .chk-upsell-grid > .chk-upsell-card {
        flex: 0 0 140px;
        scroll-snap-align: start;
    }
    /* WebKit thin scrollbar */
    .chk-upsell-grid::-webkit-scrollbar { height: 4px; }
    .chk-upsell-grid::-webkit-scrollbar-track { background: transparent; }
    .chk-upsell-grid::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 2px;
    }
    .chk-upsell-grid::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35); }

    /* "Place Order" is pinned to the viewport bottom at this width — see the
       .chk-place block further down. The sizing rules below still apply to it. */

    /* ── Mobile tightening ───────────────────────────────────────
       Reduce padding + font sizes on the Your Order card and address
       section so each section uses screen space efficiently. */
    .chk-shell { gap: 14px; padding: 10px 12px 24px; }

    .chk-card { padding-bottom: 4px; }
    .chk-card-head { padding: 10px 14px; }
    .chk-card-head-title { font-size: 0.875rem; }
    .chk-card-head-count { font-size: 0.6875rem; }

    .chk-line { padding: 10px 14px; gap: 8px; }
    .chk-line-name { font-size: 0.8125rem; line-height: 1.25; }
    .chk-line-desc { font-size: 0.6875rem; line-height: 1.4; }
    .chk-line-added { font-size: 0.65rem; line-height: 1.4; }
    .chk-line-price { font-size: 0.8125rem; }

    .chk-coupon-wrap { padding: 6px 14px 10px; }
    .chk-coupon-row { height: 36px; font-size: 0.75rem; }
    .chk-coupon-input { font-size: 0.75rem; }
    .chk-coupon-apply { font-size: 0.6875rem; padding: 0 10px; }
    .chk-bill-row   { padding: 6px 14px; font-size: 0.75rem; }

    .chk-place-warn { margin: 0 14px 6px; padding: 8px 10px; font-size: 0.75rem; }
    .chk-place-btn {
        margin: 0 14px 14px;
        height: 42px;
        width: calc(100% - 28px);
        font-size: 0.8125rem;
        letter-spacing: 0.06em;
        border-radius: 8px;
    }

    /* Addresses section — single-column, tighter card. */
    .chk-addresses { padding: 14px 14px 16px; border-radius: 10px; }
    .chk-addr-title { font-size: 0.875rem; margin-bottom: 12px; }
    .chk-addr-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
    .chk-addr-card { padding: 12px; gap: 6px; }
    .chk-addr-card-head { gap: 6px; }
    .chk-addr-label { font-size: 0.8125rem; }
    .chk-addr-text  { font-size: 0.6875rem; }
    .chk-addr-distance { padding: 2px 6px; font-size: 0.625rem; }
    .chk-addr-distance svg { width: 10px; height: 10px; }
    .chk-addr-add  { padding: 10px; font-size: 0.8125rem; }
}

/* ── Sticky Place Order — mobile + tablet (≤840px) ─────────────
   Same breakpoint as the single-column switch above: there the order
   summary is ordered to the TOP of the page, so an in-card button
   scrolls out of reach while the customer is still working through
   add-ons and addresses. Pin the whole block (warnings + button) to
   the viewport bottom instead.
   It lives inside #chkOrderSummary, so cart.js hiding the summary on
   an empty cart takes the bar with it — no extra JS needed.
   z-index 100: above page content, below the confirm/address overlays
   (300/400) and the item modal, which must cover it. Was 200 — a dead TIE
   with .cust-overlay, so the customize popup only stayed on top by tree
   order; same bar, same bug as .pt-proceed-bar in menu.css. */
@media (max-width: 840px) {
    .chk-place {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 100;
        background: #fff;
        border-top: 1px solid var(--border);
        padding: 10px 0 max(10px, env(safe-area-inset-bottom));
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    }
    .chk-place .chk-place-btn  { margin-bottom: 0; }
    .chk-place .chk-place-warn { margin-bottom: 8px; }

    /* Clearance so the last card can't hide under the bar. */
    .chk-shell { padding-bottom: 92px; }

    /* The rule that lifted the a11y FAB off this button's right edge is gone with the FAB —
       accessibility moved to the top bar (_A11yBar), so nothing floats in that corner. */
}

@media (max-width: 480px) {
    /* .chk-upsell-grid stays as the horizontal-scroll flex layout above. */
    .chk-addr-grid { grid-template-columns: 1fr; }
}

/* ── Tip (Cart spec §5.3) — card with icon header, pill chips, custom panel ── */
.chk-tip {
     padding: 12px 15px;
    border-top: 1px solid var(--border); background: #fff;
}
.chk-tip-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.chk-tip-ico { color: var(--brand-red); font-size: 1.625rem; line-height: 1; flex-shrink: 0; }
.chk-tip-head-text { display: flex; flex-direction: column; }
.chk-tip-title { font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.chk-tip-sub   { font-size: 0.6875rem; color: var(--muted); margin-top: 2px; }

.chk-tip-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chk-tip-chip {
    flex: 1 1 0; min-width: 52px; padding: 9px 8px; cursor: pointer;
    border: none; border-radius: 999px; background: #eef0f2;
    font-size: 0.8125rem; font-weight: 700; color: var(--text);
    transition: background .15s, color .15s, box-shadow .15s;
}
.chk-tip-chip--custom { flex: 1.3 1 0; }
.chk-tip-chip:hover { box-shadow: inset 0 0 0 1px var(--brand-red); }
.chk-tip-chip.is-selected { background: var(--brand-red); color: #fff; box-shadow: none; }

/* Custom flat-amount panel (revealed by "Custom"). An author `display` rule beats
   the UA `[hidden]{display:none}`, so the [hidden] override below restores hiding. */
.chk-tip-custom-row {
    margin-top: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.chk-tip-custom-row[hidden] { display: none; }
.chk-tip-amount-row { display: flex; align-items: center; justify-content: center; gap: 8px; }
.chk-tip-amount-label { font-size: 0.75rem; font-weight: 600; color: var(--text); }
.chk-tip-amount-field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 70px;
    padding: 5px 12px;
    border: 1.5px solid var(--text);
    border-radius: 10px;
}
.chk-tip-amount-prefix { font-weight: 700; color: var(--text); }
.chk-tip-custom-input {
    border: none; outline: none; width: 30px; background: transparent;
    font-size: 0.9375rem; font-weight: 700; color: var(--text);
}
.chk-tip-actions { display: flex; gap: 6px; }

/* Tip clamp notice — informational, not an error, so it stays muted rather than red. */
.chk-tip-msg {
    margin: 8px 2px 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--muted);
}
.chk-tip-msg[hidden] { display: none; }
/* Sole action in the custom-tip panel ("Done"). The Save button that used to sit beside it
   is gone — the amount commits as it's typed — so .chk-tip-save is dropped with it. */
.chk-tip-cancel {
    flex: 1;
    padding: 8px 9px;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand-red);
}
.chk-tip-custom-apply, .chk-tip-clear {
    padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: 0.8125rem; font-weight: 600;
    border: 1px solid var(--border); background: #fff; color: var(--text);
}
.chk-tip-custom-apply { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }

/* ── Fulfilment timing (UserCheckoutDetails §5–§7) ────────────────────── */
/* ── Checkout timing — "tap a slot" (design 2b): a day-chip row + a time-slot grid,
   zero dropdowns. The hidden date/slot <select>s underneath are state only. ── */
.chk-timing {
    margin: 4px 0 0px;
    padding: 0 17px 12px;
    border-bottom: 1px solid var(--border);
}
.chk-when-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
}
/* Title never wraps; the HOURS hint is the flexible side. It used to be the other way round
   (hint nowrap) — an outlet with two windows that day ("05:00 PM - 04:59 PM, 06:00 PM - …")
   crushed the title to one word per line. */
.chk-when-title { margin: 0; font-size: 0.9375rem; font-weight: 800; color: var(--text); white-space: nowrap; }
.chk-when-hours { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--muted, #8a8a8a); text-align: right; min-width: 0; }
.chk-timing-closed {
    margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 0.8125rem; font-weight: 600;
    color: var(--brand-red); background: #fff5f5; border: 1px solid #f5c2c4;
}
/* Day chips: outline pills (wrapping — no horizontal scroll anywhere in this section);
   the active day is red-tinted. */
.chk-day-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.chk-day-chips[hidden] { display: none; }
.chk-chip {
    padding: 8px 16px; cursor: pointer; border: 1px solid var(--border);
    border-radius: 999px; background: #fff; font-size: 0.8125rem; font-weight: 700; color: var(--text);
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.chk-chip.is-active { border-color: var(--brand-red); background: #fdecec; color: var(--brand-red); }
/* Time selector: ONE native dropdown for the active day (ASAP + that day's times) —
   the OS picker on phones, no scrolling. Rebuilt per day by cart.js. */
.chk-slot-grid[hidden] { display: none; }
.chk-slot-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
}
/* Inline reason line (e.g. "Scheduling is not available for this store."). */
.chk-timing-msg { margin: 8px 0 0; font-size: 0.75rem; font-weight: 600; color: var(--brand-red); }
.chk-timing-msg[hidden] { display: none; }

/* "Your details" section title + label-less fields (placeholders carry the naming). */
.chk-section-title { margin: 12px 17px 2px; font-size: 0.9375rem; font-weight: 800; color: var(--text); }

/* ── Optional "Log in" row in the Enter Details popover ────────────────────────
   Sits directly above "Your details". Deliberately understated: signing in is a
   convenience (it prefills the three fields below and attaches the order to an
   account), NOT a requirement, so it must never read as a barrier in front of
   the form. Hence a text link rather than a filled button, and an explicit
   "you can order as a guest" hint next to it. Same 17px gutter as the fields. */
.chk-details-login {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 12px 17px 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-soft, #faf7f2);
}
.chk-details-login[hidden] { display: none; }
.chk-details-login-text { font-size: 0.875rem; font-weight: 700; color: var(--text); }
.chk-details-login-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-red);
    font-size: 0.875rem;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}
.chk-details-login-btn:hover { color: var(--brand-red-dark); }
.chk-details-login-btn:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; border-radius: 4px; }
/* Pushed to its own line so the hint never squeezes the link on a narrow phone. */
.chk-details-login-hint { flex: 1 0 100%; font-size: 0.75rem; color: var(--muted); }

.chk-field-bare > span { display: none; }
/* Collapsed kitchen-note link — expands into the textarea on tap. */
.chk-note-toggle {
    display: block; margin: 2px 17px 4px; padding: 4px 0; border: 0; background: none;
    color: var(--brand-red); font-size: 0.8125rem; font-weight: 700; cursor: pointer; text-align: left;
}
.chk-note-toggle[hidden] { display: none; }
.chk-note-field[hidden] { display: none; }

/* Footer continue button: label + live total pill (white pill, red figure). */
.chk-continue-btn { display: flex; align-items: center; justify-content: center; gap: 10px; }
.chk-cont-total {
    background: #fff; color: var(--brand-red); border-radius: 999px;
    padding: 2px 12px; font-weight: 800; font-size: 0.875rem; white-space: nowrap;
}

/* Validation / error pill inside the checkout, car-details and payment popovers.
   These <p class="auth-error"> live on the Cart page, which does NOT load auth.css,
   so restate the validation-pill style here and align it within the card with
   consistent spacing above/below. [hidden] keeps it out of flow when empty, so
   showing it appends at the end of the scroll body and never shifts the layout. */
.addr-details-card .auth-error {
    margin: 12px 12px 2px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(226, 27, 34, 0.08);
    border: 1px solid rgba(226, 27, 34, 0.25);
    color: var(--brand-red, #b91c1c);
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: left;
}
.addr-details-card .auth-error[hidden] { display: none; }

/* ============================================================================
   Loyalty card — 3D "membership card" motion
   The gold points card (#chkPointsWrap.pt-loyalty-card) reads like a premium
   member card, so it earns tactile depth: a cursor-tracking perspective tilt
   (driven by cart.js → initLoyalty3D), a glossy highlight that follows the
   pointer, a diagonal sheen sweep on hover, a lift with a layered gold shadow,
   a 3D entrance, and an animated count-up of the balance. Touch / coarse
   pointers and prefers-reduced-motion fall back to a clean static card.
   ============================================================================ */
.pt-loyalty-card {
    position: relative;
    overflow: hidden;                       /* clip the sheen + gloss to the rounded corners */
    transform: perspective(900px);          /* base depth context the JS tilt layers onto */
    transform-style: preserve-3d;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
    box-shadow: 0 2px 6px rgba(120, 90, 10, .12);
    will-change: transform;
}
/* Diagonal sheen — a thin band of light that sweeps across, like a glossy card
   catching the light. Plays on hover. */
.pt-loyalty-card::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -150%;
    width: 70%;
    height: 220%;
    background: linear-gradient(100deg,
                transparent 0%, rgba(255, 255, 255, 0) 38%,
                rgba(255, 255, 255, .55) 50%,
                rgba(255, 255, 255, 0) 62%, transparent 100%);
    transform: rotate(8deg);
    pointer-events: none;
    opacity: 0;
    z-index: 2;
}

/* Cursor-following gloss — a soft radial bloom at the pointer (--pt-shine-x/y
   set by cart.js), fading in only while hovering. */
.pt-loyalty-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(440px circle at var(--pt-shine-x, 50%) var(--pt-shine-y, 0%),
                rgba(255, 255, 255, .40), rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 1;
}

/* Keep real content above the two light layers. */
.pt-loyalty-card > * { position: relative; z-index: 3; }

/* Icon does a single coin-flip on hover. */
.pt-loyalty-icon {
    transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

/* Keyboard focus must stay visible even though the card clips its overflow —
   inset outlines on the interactive children never reach the clipped edge. */
.pt-loyalty-card #chkPointsApply:focus-visible,
.pt-loyalty-card #chkPointsRemove:focus-visible {
    outline: 2px solid #5a3e00;
    outline-offset: -3px;
}

/* 3D entrance — the card tips up into place. Added once by cart.js (.pt-loyalty-in). */
.pt-loyalty-card.pt-loyalty-in { animation: pt-loyalty-in .7s cubic-bezier(.22, .61, .36, 1) both; }

/* Balance number gets a subtle pop when cart.js flags a change. */
.pt-loyalty-card .pt-pop { animation: pt-pop .45s cubic-bezier(.34, 1.56, .64, 1); display: inline-block; }

/* Hover-driven flourishes — gated to true hover / fine-pointer devices so a tap
   on touch can't leave the card stuck looking "hovered". */
@media (hover: hover) {
    /* Lift + deepen the shadow on hover; cart.js layers rotateX/rotateY on top. */
    .pt-loyalty-card:hover {
        box-shadow: 0 16px 32px -10px rgba(160, 120, 20, .45),
                    0 6px 14px -8px rgba(120, 90, 10, .35);
    }
    .pt-loyalty-card:hover::before { animation: pt-loyalty-sheen 1.1s ease forwards; }
    .pt-loyalty-card:hover::after { opacity: 1; }
    .pt-loyalty-card:hover .pt-loyalty-icon { transform: rotateY(360deg); }
}

@keyframes pt-loyalty-in {
    0%   { opacity: 0; transform: perspective(900px) rotateX(-24deg) translateY(22px) scale(.95); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0) scale(1); }
}
@keyframes pt-loyalty-sheen {
    0%   { opacity: 0; left: -150%; }
    12%  { opacity: 1; }
    100% { opacity: 0; left: 160%; }
}
@keyframes pt-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .pt-loyalty-card,
    .pt-loyalty-card:hover,
    .pt-loyalty-icon,
    .pt-loyalty-card:hover .pt-loyalty-icon,
    .pt-loyalty-card.pt-loyalty-in,
    .pt-loyalty-card .pt-pop {
        transition: none;
        animation: none;
        transform: none;
    }
    /* No hover lift either — keep the resting shadow so nothing shifts on hover. */
    .pt-loyalty-card:hover {
        box-shadow: 0 2px 6px rgba(120, 90, 10, .12);
    }
    .pt-loyalty-card::before,
    .pt-loyalty-card::after { display: none; }
}

/* ============================================================================
   Mobile responsive (≤576px) — Loyalty (.pt-loyalty-card) + Referral
   (.pt-referral-card) cards. Both cards are styled INLINE in Cart.cshtml, so
   every override below needs !important to beat the element style. Goals:
     • full-width cards, no horizontal overflow;
     • the loyalty header (icon · title · points value) stays fully visible —
       the card has overflow:hidden, so an over-wide row would CLIP the points
       value; we trim the gap + scale the icon/number so it fits instead;
     • the referral input + Apply button STACK so the button can't spill past
       the card edge.
   Tablet / desktop are untouched — all rules live inside this media query.
   ============================================================================ */
@media (max-width: 576px) {
    /* Both cards: full width + border-box so the inline padding can't push the
       card wider than the viewport, with slightly tighter padding on mobile. */
    .pt-loyalty-card,
    .pt-referral-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
        margin: 10px 0 !important;
    }

    /* ── Loyalty card ── keep icon · title · points value on one row and fully
       visible by tightening the header gap and scaling the icon + balance down
       so nothing is clipped by the card's overflow:hidden. The title column
       (flex:1;min-width:0) absorbs the squeeze by wrapping, not the number. */
    .pt-loyalty-card > div:first-child { gap: 10px !important; }
    .pt-loyalty-icon { font-size: 1.5rem !important; padding: 5px !important; }
    #chkPointsBalance { font-size: 1.35rem !important; }
    #chkPointsBalanceBig { flex: 0 0 auto; }        /* never shrink the number away */
    #chkPointsSub,
    #chkPointsHintText { overflow-wrap: anywhere; } /* long copy wraps, no row-widening */

    /* ── Referral card ── stack the input above a full-width Apply button so the
       button always fits inside the card. The inline button padding is 0 16px
       (it relied on the flex-row height), so restore vertical padding here. */
    #chkReferralInputRow {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    #chkReferralCode {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #chkReferralValidate {
        width: 100% !important;
        padding: 11px 16px !important;
    }
}