/* ══════════════════════════════════════════════════════════════════════════
   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. */
.cart-modal__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, .cart-modal__close {
  background: var(--glass-bg-2); box-shadow: var(--glass-bevel); border: none; color: var(--lg-text);
}

/* ── 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;
}
.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); }

/* ── 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); }
.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 { 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; }

/* 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;
  }
}