/* ══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS — cart (quick-add popup + full modal + fab + toast + banner)
   Re-skins the existing cart.css surfaces to glass. No markup / JS changes —
   cart.js depends on these exact class names.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Overlays ── */
.quick-add__overlay,
.cart-modal__overlay {
  background: rgba(4, 10, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Panels (popup card + modal window): opaque-enough glass for readability ── */
.quick-add__card,
.cart-modal__window {
  background: var(--cart-surface);
  box-shadow: var(--glass-bevel-soft), 0 32px 80px rgba(0, 0, 0, 0.4);
  border: none;
  color: var(--lg-text);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.cart-modal__header { background: var(--glass-bg-2); border: none; box-shadow: none; }
/* Sticky checkout footer + mobile go-to-cart bar were hard-coded white — make them
   match the rest of the cart (dark glass) so the bottom doesn't read as a white slab.
   The quick-add popup's own sticky footer (price + Add/View) is the same surface. */
.cart-modal__footer, .quick-add__footer {
  background: var(--glass-bg-2);
  border-top: 1px solid color-mix(in srgb, var(--lg-text) 12%, transparent);
}
.cart-bar {
  background: var(--cart-surface);
  border-top: 1px solid color-mix(in srgb, var(--lg-text) 12%, transparent);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.cart-modal__title, .quick-add__name { color: var(--lg-text); }
.quick-add__price, .cart-line__subtotal, .cart-suggest__price, .qa-roll-option__price { color: var(--color-teal); }
.quick-add__desc, .quick-add__meta, .cart-line__detail, .cart-field__hint, .pickup-note { color: var(--lg-muted); }

/* ── Cart fab + badge + close buttons ── */
.cart-fab {
  background: var(--glass-bg);
  box-shadow: var(--glass-bevel);
  border: none;
  color: var(--lg-text);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.cart-fab__badge { background: var(--color-coral); color: #fff; }
.quick-add__close, .quick-add__back, .cart-modal__close {
  background: var(--glass-bg-2); box-shadow: var(--glass-bevel); border: none; color: var(--lg-text);
}
/* The popup's ✕ and ← float over scrolling content (the title slides under them), where a
   24%-glass disc in dark mode vanished into the text behind it — give them a solid disc. */
.quick-add__close, .quick-add__back { background: var(--glass-solid); }

/* ── Primary action buttons → teal (matches the brand + the active controls) ── */
.qa-btn--add, .qa-box-suggest__yes, .cart-go-checkout, .cart-bar__btn, .cart-empty__cta {
  background: linear-gradient(135deg, var(--color-teal), var(--teal-br));
  color: #fff;
  box-shadow: 0 6px 18px rgba(10, 122, 143, 0.35), var(--glass-bevel);
  border: none;
}
/* ── Place order stays WhatsApp green (signals the WhatsApp hand-off) ── */
.cart-place {
  background: linear-gradient(135deg, #1faf57, #25d366);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35), var(--glass-bevel);
  border: none;
}

/* ── Secondary / ghost actions → glass ── */
.qa-btn--view, .cart-modal__clear, .cart-promo__apply,
.qa-box-suggest__no, .cart-promo-banner__apply, .qa-roll-toggle {
  background: var(--glass-bg-2); box-shadow: var(--glass-bevel); border: none; color: var(--lg-text);
}
.qa-note__toggle { color: var(--lg-text); }   /* plain label, not a glass pill */

/* ── Steppers & segmented controls → glass; active = teal ── */
.qa-step, .cart-line__qty-btn, .qa-box-step, .qa-box-addon-step, .pickup-step,
.qa-opt, .quick-add__weight-btns button, .pickup-mode, .qa-allergen, .qa-vegan,
.qa-box-roll, .qa-box-addon {
  background: var(--glass-bg-2); box-shadow: var(--glass-bevel); border: none; color: var(--lg-text);
}
.qa-opt.is-active, .pickup-mode.is-active, .quick-add__weight-btns button.is-active {
  background: linear-gradient(135deg, var(--color-teal), var(--teal-br)); color: #fff;
}

/* The pickup wheels. The band is the only glass surface here — the rows themselves must stay
   bare, or five stacked bevels would turn a wheel into a stack of buttons. */
.pw-band {
  background: var(--glass-bg-2);
  box-shadow: var(--glass-bevel);
}
.pw-item { color: var(--lg-text); }
.pw-item.is-active { color: var(--color-teal); }
.pw__label, .pw-chosen { color: var(--lg-muted); }
.pw-chosen { color: var(--lg-text); }
.qa-allergen--gf { background: var(--color-teal); color: #fff; }

/* ── Inputs ── */
.cart-field__input, .cart-field__textarea, .qa-roll-search, .qa-note__field, .pickup-time {
  background: var(--glass-bg-2); box-shadow: var(--glass-bevel); border: none; color: var(--lg-text);
}
.cart-field__input:focus, .cart-field__textarea:focus, .qa-roll-search:focus, .qa-note__field:focus {
  outline: none; box-shadow: var(--glass-bevel), 0 0 0 3px color-mix(in srgb, var(--color-teal) 35%, transparent);
}
.cart-field__input::placeholder, .cart-field__textarea::placeholder { color: var(--lg-muted); }

/* Country combobox: the trigger is a field, the panel is a dropdown — both already have a
   recipe on this site, so it borrows rather than inventing a third surface. */
.cc-trigger { background: var(--glass-bg-2); box-shadow: var(--glass-bevel); border: none; color: var(--lg-text); }
.cc-trigger:focus-visible {
  outline: none; box-shadow: var(--glass-bevel), 0 0 0 3px color-mix(in srgb, var(--color-teal) 35%, transparent);
}
.cc-trigger__name, .cc-caret { color: var(--lg-muted); }
.cc-search { background: transparent; color: var(--lg-text); }
.cc-search::placeholder { color: var(--lg-muted); }
.cc-option__name { color: var(--lg-text); }
.cc-option.is-active { background: color-mix(in srgb, var(--color-teal) 16%, transparent); }
.cc-empty { color: var(--lg-muted); }

/* The panel is the one glass surface here that does NOT take --glass-bg: it is 226 rows of
   text laid over a busy scene, and at 46% opacity the country names had to compete with
   whatever sat behind the cart. --glass-solid is the frosted-but-opaque variant, so the list
   stays a list and the separator rule stays visible. */
.cc-panel {
  background: var(--glass-solid);
  box-shadow: var(--glass-bevel-soft), 0 14px 34px rgba(0, 0, 0, 0.28);
  border: none;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.cc-option--first-rest { border-top-color: color-mix(in srgb, var(--lg-text) 18%, transparent); }
.cc-search { border-bottom: 1px solid color-mix(in srgb, var(--lg-text) 12%, transparent); }

/* ── Line items, suggestion cards, dropdown panels, toast, banner ── */
.cart-suggest__item, .qa-roll-panel, .qa-box-suggest, .cart-promo-banner {
  background: var(--glass-bg); box-shadow: var(--glass-bevel); border: none;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
/* "Add more items" → glass pill that reads on the dark panel */
.cart-addmore {
  background: var(--glass-bg-2); box-shadow: var(--glass-bevel); border: none; color: var(--lg-text);
}
.cart-addmore:hover { filter: brightness(1.1); }
/* Required field left empty: red ring over the glass bevel */
.cart-field__input.is-invalid {
  box-shadow: var(--glass-bevel), 0 0 0 2px var(--field-error);
}
.cart-field__input.is-invalid:focus {
  box-shadow: var(--glass-bevel), 0 0 0 3px color-mix(in srgb, var(--field-error) 55%, transparent);
}
/* cart line items: simple rows with a subtle divider, not framed glass cards */
.cart-line {
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid color-mix(in srgb, var(--lg-text) 12%, transparent);
}
.cart-toast {
  background: var(--cart-surface);
  box-shadow: var(--glass-bevel-soft), 0 12px 32px rgba(0, 0, 0, 0.35);
  border: none; color: var(--lg-text);
}
.cart-line__name, .cart-suggest__name, .qa-box-roll__name, .qa-roll-option__name { color: var(--lg-text); }
.cart-line__was { color: var(--lg-muted); }
.cart-pay-note { color: var(--lg-text); }
.cart-promo--ok { color: var(--color-teal); }
.cart-promo--err { color: var(--color-coral); }
/* The amber above is too dark to read on the glass; its pale companion is the legible one here. */
.cart-promo--warn { color: var(--status-limited-bg); }
.cart-empty, .qa-box-empty, .cart-field__label, .pickup-step__dur,
.quick-add__field-label, .qa-attr__label, .qa-box-extras-label,
.qa-box-suggest__label, .cart-suggest__label { color: var(--lg-muted); }
.cart-summary__title { color: var(--lg-text); }
.cart-summary__total { color: var(--lg-text); }
.cart-weight-notice, .quick-add__weight-note { color: var(--lg-muted); }

/* Remaining un-themed white surfaces inside the cart */
.quick-add__attrs, .cart-modal__summary, .qa-customize-card { background: var(--color-cream); }
.qa-roll-option { background: transparent; }
.qa-roll-option:hover { background: var(--glass-bg-2); }
.qa-box-addon__toggle { background: var(--glass-bg-2); border: none; }

/* The custom scroll indicator's thumb (cart.css) is --color-border, a fixed low-opacity
   teal that goes nearly invisible against the dark glass surface — same lg-text-based
   swap already used for other fixed-color pieces of this popup. */
.qa-scroll-thumb { background: color-mix(in srgb, var(--lg-text) 25%, transparent); }

/* The meal-combo card's own coral wash (cart.css) needs no background override here —
   like .qa-whole-note, its subtle rgba tint reads fine against .quick-add__card's own
   background in EITHER theme (opaque cream in light, near-opaque --cart-surface navy in
   dark), so it renders as "a warm accent on the card" both ways with no fighting the
   glass system. Only its heading needs the lg-text swap every other popup heading
   (.quick-add__name) already gets — its subtext already uses the theme-aware
   --color-muted so it adapts on its own. */
.qa-combo-card__headline { color: var(--lg-text); }

/* Mobile performance: the popup/modal surfaces are opaque enough already, so the
   costly backdrop blur (re-rendered while the popup animates in) just adds jank. */
@media (max-width: 767px) {
  .quick-add__overlay, .cart-modal__overlay,
  .quick-add__card, .cart-modal__window, .cart-toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* The full-card combo offer sits on the same surface as the popup card, but opaque:
   --cart-surface is 82-86% and the dish screen underneath would read through it. */
.qa-offer { background: var(--glass-solid); color: var(--lg-text); }
.qa-offer__title { color: var(--lg-text); }
.qa-offer__includes, .qa-offer__no { color: var(--lg-muted); }