/*
 * The shop's cart, item modal, checkout and customer sign-in — the styling.
 *
 * This began as part of index.php's inline <style>, which is why menu.php
 * and vip.php never had it: they carried their own Bootstrap cart instead,
 * and the two drifted until one of them could take a cashback payment and the
 * others could not.
 *
 * It lives in a file so the three pages cannot drift again. Every rule here is
 * one that shop_landing.php or shop_landing_js.php actually references; the
 * landing page's own layout — hero, orbs, rooms, marquees — stayed behind.
 *
 * Depends on the host page for its palette: --brand, --ink, --muted, --line,
 * --surface, --card-bg, --glass-border and friends. All three pages declare
 * those already.
 */

/* ── palette fallbacks ──────────────────────────────────────────────────────
 *
 * The rules below were written against the landing page's variables. Products
 * and Premium name their colours differently — --brand/--ink/--line/--surface
 * instead of --grad/--text/--glass-border/--card-bg — so lifted as-is the cart
 * rendered on those pages with no gradient and no borders.
 *
 * These are defaults, not overrides: this file is linked before each page's own
 * <style>, so a page that declares any of them still wins. Where a page has an
 * equivalent of its own, that is what gets used, so the cart takes on the
 * colours of whichever page it is sitting in rather than importing the
 * landing page's. */
:root {
  --grad:         linear-gradient(135deg, var(--brand, #8b5cf6), var(--brand2, #22d3ee));
  --text:         var(--ink, #0f172a);
  --bg:           var(--surface, #f8fafc);
  --muted:        #4b5563;
  --card-bg:      var(--surface, rgba(255, 255, 255, .92));
  --glass-bg:     var(--surface, rgba(255, 255, 255, .92));
  --glass-border: var(--line, rgba(15, 23, 42, .10));
  --accent-text:  var(--brand, #7c3aed);
  --radius-md:    18px;
}


.glass{
  background:var(--card-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:var(--radius-md);
  transition:background-color .3s, border-color .3s;
}
/* while the drawer is open the toggle is over the panel, not the artwork */
.nav-toggle.open span{background:var(--text);box-shadow:none;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}


/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;border-radius:999px;font-weight:600;font-size:15px;border:none;transition:transform .2s,box-shadow .2s,opacity .2s;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 30px rgba(37,99,235,.35);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(37,99,235,.5);}
.btn-outline{background:rgba(255,255,255,.03);color:var(--text);border:1px solid var(--glass-border);}
.btn-outline:hover{border-color:var(--accent-text);color:var(--accent-text);}
.btn-block{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
/* banner buttons sit on artwork — keep them compact so they do not cover it */
.hero-ctas .btn{padding:9px 20px;font-size:13px;gap:6px;}
.hero-ctas .btn-outline{background:rgba(0,0,0,.28);backdrop-filter:blur(6px);border-color:rgba(255,255,255,.45);color:#fff;}
.hero-ctas .btn-outline:hover{background:rgba(0,0,0,.42);border-color:#fff;color:#fff;}

/* ── floating cart button ───────────────────────────────────────── */
.cart-fab{position:fixed;right:20px;bottom:22px;z-index:80;width:56px;height:56px;border:none;cursor:pointer;
  border-radius:50%;background:var(--grad);color:#fff;box-shadow:0 12px 34px rgba(37,99,235,.45);
  display:inline-flex;align-items:center;justify-content:center;transition:transform .18s;}
.cart-fab:hover{transform:translateY(-3px) scale(1.04);}
.cart-fab-count{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;
  display:none;align-items:center;justify-content:center;border:2px solid var(--bg);}
.cart-fab-count.on{display:inline-flex;}
@media(max-width:600px){
  .cart-fab{right:14px;bottom:16px;width:50px;height:50px;}
}
.booking-modal.open{display:flex;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* payment modal */
/* 2000, not 998.
 *
 * 998 was enough on the landing page, which has nothing fixed above it. Products
 * and Premium both carry a sticky header wrapper and a sticky button bar at
 * z-index 1000, so the cart opened UNDERNEATH the search bar — the modal was
 * there and working, with the page's own furniture painted across the top of it.
 *
 * Kept below the toast (9999) so a message still lands over the cart, and below
 * the payment frame (#nombaModal, 999999) so the gateway is never covered. */
.pay-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;}
.pay-modal.open{display:flex;}
.pay-modal-backdrop{position:absolute;inset:0;background:rgba(6,5,15,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.pay-modal-box{position:relative;width:100%;max-width:480px;max-height:88vh;padding:26px;display:flex;flex-direction:column;overflow:auto;}
/* ── a scrolling column must not squeeze what is inside it ────────────────────
 *
 * The box is a flex column that scrolls. Its children are flex items, so once
 * the content passes 88vh the browser starts shrinking them — and `.cart-lines`
 * is `overflow:auto`, which makes its automatic minimum height ZERO. It
 * collapsed to nothing and the section below was drawn straight over the
 * shopper's own cart lines.
 *
 * Measured with two reservations and one product in the cart: #cartLines
 * height 0, its 65px line overlapped by the reservations card.
 *
 * The box already scrolls, so nothing in it ever needs to shrink. */
.pay-modal-box > *{flex-shrink:0;}
.pay-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:10px;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text);font-size:18px;z-index:2;line-height:1;}
.pay-modal-close:hover{border-color:var(--accent-text);}
.pay-frame{width:100%;height:520px;border:none;border-radius:14px;background:#fff;}
.pay-modal-status{text-align:center;padding:50px 10px;}
.pay-modal-status p{color:var(--muted);margin-top:16px;font-size:14px;}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--glass-border);border-top-color:var(--accent-text);margin:0 auto;animation:spin .8s linear infinite;}
/* ── item detail modal ──────────────────────────────────────────── */
.item-hero{width:100%;height:230px;border-radius:14px;overflow:hidden;background:var(--glass-bg);margin-bottom:10px;}
.item-hero img{width:100%;height:100%;object-fit:contain;}
.item-thumbs{display:none;gap:8px;overflow-x:auto;padding:2px 0 8px;}
.item-thumbs img{width:48px;height:48px;flex:none;border-radius:8px;object-fit:cover;cursor:pointer;
  border:2px solid transparent;transition:border-color .15s;}
.item-thumbs img.on{border-color:var(--accent-text);}
.item-title{font-size:19px;font-weight:700;margin:4px 0 6px;color:var(--text);}
.item-price{font-size:21px;font-weight:800;color:var(--accent-text);margin-bottom:10px;}
.item-desc{font-size:13px;color:var(--muted);line-height:1.6;margin:0 0 16px;}
.item-qty-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;margin-bottom:14px;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);}
.item-qty-label{font-size:13px;font-weight:600;color:var(--text);}
.qty-control{display:inline-flex;align-items:center;border:1px solid var(--glass-border);border-radius:10px;overflow:hidden;}
.qty-control button{width:36px;height:36px;border:none;background:var(--glass-bg);color:var(--text);
  font-size:17px;cursor:pointer;line-height:1;}
.qty-control button:hover{background:var(--card-bg);color:var(--accent-text);}
.qty-control input{width:48px;height:36px;border:none;text-align:center;background:transparent;
  color:var(--text);font-weight:700;font-size:14px;-moz-appearance:textfield;}
.qty-control input::-webkit-outer-spin-button,.qty-control input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* ── cart ───────────────────────────────────────────────────────── */
.cart-title{font-size:19px;font-weight:700;margin:0 0 14px;color:var(--text);}
.cart-lines{max-height:300px;overflow:auto;margin-bottom:8px;}
.cart-line{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--glass-border);}
.cart-line img{width:48px;height:48px;flex:none;border-radius:10px;object-fit:cover;background:var(--glass-bg);}
.cart-line-body{flex:1;min-width:0;}
.cart-line-name{display:block;font-size:13.5px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cart-line-meta{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}
.cart-line-del{width:28px;height:28px;flex:none;border:none;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--muted);font-size:19px;line-height:1;}
.cart-line-del:hover{background:rgba(239,68,68,.12);color:#ef4444;}
.cart-empty{padding:28px 10px;text-align:center;color:var(--muted);font-size:13.5px;}
.cart-total{display:flex;align-items:center;justify-content:space-between;padding:14px 0;
  font-size:14px;color:var(--muted);border-bottom:1px solid var(--glass-border);margin-bottom:16px;}
.cart-total strong{font-size:19px;color:var(--text);}

/* ── order stages: paid, then processed ─────────────────────────────
   Deliberately quieter than the cart above them. These are a receipt, not
   a task — nothing here is actionable, so nothing competes with the
   checkout button for attention. */
.cart-stage{margin-top:20px;padding-top:16px;border-top:1px solid var(--glass-border);}
.cart-stage[hidden]{display:none;}
.cart-stage__head{display:flex;align-items:center;gap:8px;margin:0 0 2px;
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text);}
.cart-stage__dot{width:7px;height:7px;flex:none;border-radius:50%;}
.cart-stage__dot.is-paid{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18);}
.cart-stage__dot.is-done{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18);}
.cart-stage__note{margin:0 0 8px;font-size:11.5px;color:var(--muted);}
/* Settled rows are lighter than live ones, and shorter — there is no
   delete button to leave room for. */
.cart-stage .cart-lines{max-height:220px;}
.cart-stage .cart-line{padding:8px 0;opacity:.85;}
.cart-stage .cart-line img{width:38px;height:38px;border-radius:8px;}
.cart-stage .cart-line-name{font-size:12.5px;}
.cart-stage .cart-line-meta{font-size:11px;}

/* ── forms inside modals ────────────────────────────────────────── */
.checkout-form label,#custForm label,.auth-form label{display:block;font-size:12px;font-weight:600;
  color:var(--muted);margin-bottom:12px;}
.checkout-form input,#custForm input,.auth-form input,.auth-form select,.auth-form textarea{
  display:block;width:100%;margin-top:6px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--glass-border);background:var(--card-bg);color:var(--text);
  font-size:14px;font-family:inherit;outline:none;transition:border-color .15s;box-sizing:border-box;}
.checkout-form input:focus,#custForm input:focus,.auth-form input:focus,
.auth-form select:focus,.auth-form textarea:focus{border-color:var(--accent-text);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ── details already given ──────────────────────────────────────────
   Replaces the three checkout fields once they are all filled in. The
   Change link is the way back, and it is padded out to a real tap target
   rather than being a 12px word between two thumbs. */
.co-summary{display:block;margin-bottom:14px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--glass-border);background:var(--card-bg);}
.co-summary[hidden]{display:none;}
/* ---- cashback in the checkout ---- */
.co-cashback{margin:2px 0 12px;border:1px solid var(--glass-border);border-radius:12px;
  background:linear-gradient(135deg,rgba(16,185,129,.07),rgba(16,185,129,.02));padding:11px 12px}
.co-cashback[hidden]{display:none}
.co-cashback__row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:0}
.co-cashback__row input{margin:2px 0 0;width:17px;height:17px;accent-color:#059669;flex:none;cursor:pointer}
.co-cashback__text{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.co-cashback__text b{font-size:13.5px;color:var(--text)}
.co-cashback__text span{font-size:11.5px;color:var(--muted)}
.co-cashback__applied{margin-top:9px;padding-top:9px;border-top:1px dashed var(--glass-border);
  font-size:12px;color:#059669;font-weight:600}
.co-cashback__applied[hidden]{display:none}

.co-summary__label{display:block;font-size:11px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;}
.co-summary__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;}
.co-summary__text{font-size:12.5px;font-weight:600;color:var(--text);min-width:0;
  overflow:hidden;text-overflow:ellipsis;}
.co-summary__edit{font-size:12px;font-weight:700;color:var(--accent-text);text-decoration:none;
  white-space:nowrap;padding:10px;margin:-10px;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;}
.co-summary__edit:hover{text-decoration:underline;}
.modal-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin:-6px 0 16px;}
.auth-tab.on{background:var(--card-bg);color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,.10);}
.auth-kind-opt.on{border-color:var(--accent-text);background:var(--glass-bg);}
.track-row .btn{flex:none;padding:12px 22px;font-size:14px;}
.track-status.is-paid{background:#e7f6ee;color:#106b40;}
.track-actions .btn{flex:1;min-width:140px;padding:10px 16px;font-size:13px;}
@media(max-width:520px){
  .track-row .btn{width:100%;}
}

.pay-modal-fallback{text-align:center;padding:20px 6px 6px;}
.pay-modal-fallback p{color:var(--muted);font-size:13px;margin-bottom:16px;line-height:1.6;}
@media (max-width:560px){
  .pay-frame{height:70vh;}
}

@media (max-width:900px){
  .nav-links.open{transform:translateX(0);}
  .field-row{grid-template-columns:1fr;}
}
/* A tap should register on the first try: no 300ms wait, and no accidental
   double-fire from the browser synthesising a click after a touch. */
.nav-toggle, .menu-toggle, .nav-cta, .btn, .card-add, .menu-card {
  touch-action: manipulation;
}

/* ── the cart's own toast ───────────────────────────────────────────────────
   Used only where the host page has no kind-aware showToast of its own — the
   landing page keeps its existing one, products and premium get this. Styled
   to match, so the same message looks the same on all three. */
.shop-toastbox { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
                 z-index: 10000; display: flex; flex-direction: column; gap: 8px;
                 align-items: center; pointer-events: none; width: min(92vw, 420px); }
.shop-toast { max-width: 100%; padding: 11px 16px; border-radius: 10px;
              background: #111827; color: #fff; font-size: 13px; font-weight: 600;
              line-height: 1.45; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.24);
              opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.shop-toast.on { opacity: 1; transform: translateY(0); }
.shop-toast.is-success { background: #047857; }
.shop-toast.is-error   { background: #b91c1c; }

/* ── the bottom dock ────────────────────────────────────────────────────────
 *
 * Three controls, one cluster: cashback, WhatsApp, cart.
 *
 * They began as three unrelated things — the cashback pill up in the nav, a
 * WhatsApp bar pinned across the full width of the page, and a cart circle
 * floating over the top of it. Gathering them into one row stopped them
 * overlapping, but letting WhatsApp flex to fill the leftover space left a
 * 206px green slab with a 19px icon adrift in the middle of it, next to two
 * compact controls. It read as one big button and two afterthoughts.
 *
 * So none of them flexes now. Each is sized by its own content — the cashback
 * pill needs room for a figure, the other two need room for an icon — and the
 * cluster is centred as a group. Same height, same corner radius, same shadow,
 * so they read as one set of controls rather than three things that happen to
 * be near each other. */
.shop-dock {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    max-width: calc(100vw - 24px);
    pointer-events: none;   /* the gaps must not swallow taps on the page */
}
.shop-dock > * { pointer-events: auto; }

/* One height and one shadow for all of them. */
.shop-dock .cbk__btn,
.shop-dock__wa,
.shop-dock__call,
.shop-dock .cart-fab {
    height: 46px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .16);
}

/* WhatsApp: a circle, the same size as the cart. It used to stretch, which is
   the whole reason this looked lopsided.
   
   Kept for any page that still docks it; on menu.php and vip.php it has been
   replaced by the two call buttons below. A guest sitting at a table wants the
   bar and the kitchen, not a chat thread. */
.shop-dock__wa {
    flex: 0 0 46px;
    width: 46px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.shop-dock__wa:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37,211,102,.42); }
.shop-dock__wa i     { font-size: 21px; line-height: 1; }
/* A circle has no room for a sentence; the icon is the label. */
.shop-dock__wa span  { position: absolute; width: 1px; height: 1px; overflow: hidden;
                       clip: rect(0 0 0 0); white-space: nowrap; }

/* ── call the bar, call the kitchen ─────────────────────────────────────────
 *
 * Two more circles in the same row, so the dock is Cashback · Bar · Kitchen ·
 * Cart and the four cannot collide at any width.
 *
 * They carry a colour each because they do different things and a guest taps
 * them without reading: amber for the bar, green for the kitchen. The label is
 * kept in the DOM for a screen reader and hidden visually, exactly as WhatsApp
 * does above — a 46px circle has no room for a word. */
.shop-dock__call {
    flex: 0 0 46px;
    width: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.shop-dock__call i    { font-size: 21px; line-height: 1; }
.shop-dock__call span { position: absolute; width: 1px; height: 1px; overflow: hidden;
                        clip: rect(0 0 0 0); white-space: nowrap; }
.shop-dock__call--bar     { background: #d97706; }
.shop-dock__call--kitchen { background: #16a34a; }
.shop-dock__call--bar:hover     { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(217,119,6,.42); }
.shop-dock__call--kitchen:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(22,163,74,.42); }
.shop-dock__call:active   { transform: translateY(0) scale(.94); }
/* Called, and waiting: the button says so rather than letting somebody tap it
   eight times because nothing visibly happened. */
.shop-dock__call.is-sent  { opacity: .5; cursor: default; transform: none; }

/* The two ends keep their own width — the pill needs room for a figure. */
.shop-dock .cbk      { flex: 0 0 auto; }
.shop-dock .cart-fab { position: static; flex: 0 0 46px; width: 46px;
                       right: auto; bottom: auto; }

/* Four circles plus a figure is a lot for a narrow phone, so they shrink
   together rather than one of them being pushed off the row. */
@media (max-width: 420px) {
    .shop-dock { gap: 7px; }
    .shop-dock .cbk__btn, .shop-dock__wa, .shop-dock__call, .shop-dock .cart-fab { height: 44px; }
    .shop-dock__wa, .shop-dock__call, .shop-dock .cart-fab { flex-basis: 44px; width: 44px; }
}
@media (max-width: 360px) {
    .shop-dock { gap: 6px; }
    .shop-dock .cbk__btn, .shop-dock__wa, .shop-dock__call, .shop-dock .cart-fab { height: 42px; }
    .shop-dock__wa, .shop-dock__call, .shop-dock .cart-fab { flex-basis: 42px; width: 42px; }
    .shop-dock__call i, .shop-dock__wa i { font-size: 19px; }
}

/* The page has to end above the dock, or the last row of products sits under
   it and cannot be tapped. */
body.has-shop-dock { padding-bottom: 86px; }

/* ── signed in as ───────────────────────────────────────────────────────────
   The other face of the customer card: who the cart belongs to, and the way
   out. Shown in place of the sign-in form, never above it. */
.cust-me[hidden] { display: none; }
.cust-me__row { display: flex; align-items: center; gap: 10px; padding: 12px 13px;
                border: 1px solid var(--glass-border); border-radius: 12px;
                background: var(--glass-bg); margin-bottom: 4px; }
.cust-me__dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%;
                background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.cust-me__body { min-width: 0; line-height: 1.3; }
.cust-me__label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
                  text-transform: uppercase; color: var(--muted); }
.cust-me__num { display: block; font-size: 15px; font-weight: 800; color: var(--text);
                overflow-wrap: anywhere; }
.cust-me__out { margin-top: 12px; }
.btn-ghost { background: transparent; border: 1px solid var(--glass-border);
             color: var(--text); font-weight: 700; border-radius: 12px; padding: 11px 16px;
             cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.btn-ghost:hover { background: rgba(127, 127, 127, .10); border-color: var(--muted); }

/* ── the locked sign-in card ────────────────────────────────────────────────
   While nobody is signed in the card is the page. The backdrop goes opaque
   enough to make that obvious rather than looking like a modal somebody can
   dismiss, and the box cannot be dragged out of the way. */
.pay-modal.is-locked .pay-modal-backdrop { cursor: default; background: rgba(15, 23, 42, .72); }
.pay-modal.is-locked .pay-modal-close { display: none; }

/* ── the cashback info card, inside the dock ────────────────────────────────
 *
 * The badge's popover is written for the nav: it opens DOWNWARD from the
 * button and is anchored to its RIGHT edge. Both are wrong at the foot of the
 * page — down is off the bottom of the screen, and right-anchoring a 232px card
 * to a badge that starts 10px from the left edge puts most of it off the left.
 *
 * So inside the dock it opens upward and anchors left. Same card, same script;
 * only which way it grows changes. */
.shop-dock .cbk__pop {
    top: auto;
    bottom: calc(100% + 9px);
    right: auto;
    left: 0;
    /* Never wider than the screen it has to fit on. */
    max-width: calc(100vw - 24px);
}
@keyframes cbkPopUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.shop-dock .cbk__pop { animation: cbkPopUp .16s ease-out; }

/* ── reservations waiting to be paid for ───────────────────────────────────────
 *
 * A held room is money owed, so it sits with the rest of the bill rather than
 * in the "what happened to my order" stages below it. Ticked by default, and
 * quietly dimmed rather than removed when the guest unticks it — the room is
 * still theirs, they have simply chosen to pay for it another time.
 */
.cart-rooms{margin:14px 0 4px;}
.cart-stage__dot.is-room{background:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.18);}
.cart-rooms__list{display:flex;flex-direction:column;gap:8px;margin-top:8px;}

.cart-room{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;
  border:1px solid rgba(99,102,241,.22);border-radius:12px;
  background:rgba(99,102,241,.05);cursor:pointer;transition:opacity .15s,border-color .15s;}
.cart-room:hover{border-color:rgba(99,102,241,.45);}
.cart-room.is-off{opacity:.5;border-color:rgba(15,23,42,.12);background:transparent;}

.cart-room__tick{flex:none;margin-top:3px;width:17px;height:17px;accent-color:#6366f1;cursor:pointer;}
.cart-room__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;}
.cart-room__name{font-weight:700;font-size:.92rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cart-room__meta{font-size:.74rem;opacity:.72;line-height:1.35;overflow-wrap:anywhere;}
.cart-room__part{font-size:.72rem;color:#0f766e;font-weight:600;}
.cart-room__owed{flex:none;font-weight:800;font-size:.92rem;white-space:nowrap;align-self:center;}

@media (max-width:380px){
  .cart-room{padding:9px 10px;gap:8px;}
  .cart-room__owed{font-size:.86rem;}
}