/* =========================================================================
   Online ordering — Koompir "Order Online" page (pickup / delivery /
   catering). Built on the Garden design system (same Bebas Neue / DM Sans
   tokens, dark theme, bottom-sheet modals) so the web order page looks
   identical to the table-side QR menu. Replaces the legacy WordPress
   menu-data.js + Stripe page.
   ========================================================================= */
:root {
  --bg:        #000;
  --surface:   #121214;
  --surface-2: #1c1c1e;
  --line:      #2a2a2d;
  --text:      #fff;
  --text-2:    #b0b3ba;
  --muted:     #7a7d85;
  --accent:    #f5a623;
  --accent-2:  #e87e21;
  --accent-dim: rgba(245, 166, 35, .15);
  --success:   #42c891;
  --danger:    #e74c3c;
  --radius:    14px;
  --shadow:    0 8px 32px rgba(0, 0, 0, .6);
  --font-main: "DM Sans", system-ui, sans-serif;
  --font-head: "Bebas Neue", "DM Sans", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.4;
  min-height: 100vh;
  overscroll-behavior: none;
  /* Lock the layout to a phone-width column even on desktop preview.
     99% of garden traffic is a customer at a table tapping a QR with their
     phone — designing for that one form factor keeps everything readable
     and avoids "fluid until ugly" desktop edge cases. */
  max-width: 480px;
  margin-left: auto; margin-right: auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03);
}

/* ─── Screens ─── */
/* padding-bottom leaves room for the fixed cart pill + Safari URL bar so
   the last item card isn't permanently covered by the pill. */
.screen { display: none; min-height: 100vh; padding-bottom: 160px; }
.screen.active { display: block; }

/* ─── Hero / category picker ─── */
.hero-wrap { max-width: 720px; margin: 0 auto; padding: 32px 16px 24px; }
.hero-head { text-align: center; margin-bottom: 28px; }
.hero-logo { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; box-shadow: 0 8px 32px rgba(245, 166, 35, .25); }
.hero-title { font-family: var(--font-head); font-size: 48px; letter-spacing: .04em; color: var(--accent); margin: 0; line-height: 1; text-shadow: 0 4px 24px rgba(245, 166, 35, .4); }
.hero-tagline { font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--accent); text-transform: uppercase; margin-top: 10px; }
.hero-note { font-size: 14px; color: var(--text-2); margin: 14px auto 0; max-width: 320px; }
.lang-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 24px;
  border: 1.5px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .06);
  color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  cursor: pointer; transition: all .15s;
}
.lang-btn .lang-flag { font-size: 18px; line-height: 1; }
.lang-btn.active { background: var(--accent); color: #000; border-color: var(--accent); box-shadow: 0 4px 12px rgba(245, 166, 35, .3); }
.lang-btn:active { transform: scale(.95); }

.cat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 4px; }
/* Phone-only by design (see body comment). Removed tablet/desktop multi-column variant. */

.cat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.cat-card:active { transform: scale(.98); }
.cat-card-img {
  width: 100%; height: 220px; object-fit: cover; display: block;
  background: var(--surface-2);
}
.cat-card-body { padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cat-card-title { font-weight: 800; font-size: 18px; }
.cat-card-desc { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.cat-card-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #000; display: grid; place-items: center;
  font-size: 18px; font-weight: 900; flex-shrink: 0;
}

/* Cart pill — fixed bottom, ALWAYS visible across screens AND on top of
   the modal overlays. z-index 200 keeps it above .overlay (100) so when a
   customize / cart modal is open, the customer still sees their running
   total — and one tap on the pill jumps straight to the cart review.
   Lives at body root (not inside any screen element). */
.cart-pill {
  position: fixed;
  /* Above Safari's bottom URL bar + iPhone home indicator. Earlier
     bottom:16px got hidden under the URL bar in iOS Safari. */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
  left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--accent); color: #000; border-radius: 32px;
  padding: 16px 26px; font-weight: 800; font-size: 15px;
  box-shadow: 0 12px 32px rgba(245, 166, 35, .55);
  cursor: pointer; max-width: calc(100vw - 32px); z-index: 200;
  animation: pillIn .25s ease;
}
/* Hide the cart pill whenever ANY modal overlay is open. The customer is
   focused on a single task inside the modal (customize / cart / checkout
   / upsell / success / wait) and the floating pill at the same screen
   position adds visual clutter without giving them anything new — the
   modal already shows the running total. iOS 16.4+ + modern Chrome
   support :has(); on older iOS the JS fallback below kicks in. */
body:has(.overlay:not([hidden])) .cart-pill { display: none !important; }
@keyframes pillIn { from { transform: translate(-50%, 80px); opacity: 0 } to { transform: translate(-50%, 0); opacity: 1 } }
.cart-pill-count { background: #000; color: var(--accent); border-radius: 999px; min-width: 26px; height: 26px; padding: 0 9px; display: grid; place-items: center; font-size: 13px; }
.cart-pill-total { font-weight: 900; font-size: 16px; }

/* ─── Category items ─── */
.sub-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; padding: 16px 12px;
  background: rgba(0, 0, 0, .95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.sh-back { background: none; border: none; color: var(--text); font-size: 28px; width: 44px; height: 44px; cursor: pointer; }
.sh-title { flex: 1; text-align: center; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin: 0; }
.sh-spacer { width: 44px; }

.item-grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px; }
/* Phone-only — no 2-column variant. */

.item-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: transform .15s;
  position: relative;
}
.item-card:active { transform: scale(.98); }
.item-card.unavail { opacity: .45; pointer-events: none; }
.item-card-soldout { position: absolute; top: 12px; right: 12px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.item-card-img { width: 100%; height: 180px; object-fit: cover; display: block; background: var(--surface-2); }
.item-card-body { padding: 12px 14px; }
.item-card-name { font-weight: 800; font-size: 15px; line-height: 1.3; }
.item-card-desc { font-size: 12px; color: var(--text-2); margin-top: 4px; min-height: 32px; }
.item-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.item-card-price { font-weight: 900; color: var(--accent); }
.item-card-add { background: var(--accent); color: #000; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 18px; }

/* ─── Modals ─── */
.overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .82);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 100; backdrop-filter: blur(4px);
  animation: fadeIn .18s ease;
}
.overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.modal-card {
  background: var(--surface); border-radius: 18px 18px 0 0;
  width: 100%; max-width: 720px; max-height: 92vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px 18px 32px;
  animation: slideUp .22s ease;
}
.modal-card.center { text-align: center; padding-top: 36px; }
@keyframes slideUp { from { transform: translateY(60px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
/* Phone-only: always bottom-sheet. Removed centred-modal variant for desktop
   since the whole app is now max-width: 480px and behaves like a phone. */

.m-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.m-title { font-size: 22px; font-weight: 800; margin: 0; }
.m-close { background: none; border: none; color: var(--text); font-size: 32px; line-height: 1; width: 36px; height: 36px; cursor: pointer; }
.m-sub { color: var(--text-2); font-size: 14px; margin: 8px 0; }
.m-actions { display: flex; gap: 10px; margin-top: 18px; }

.btn-primary {
  flex: 1; background: var(--accent); color: #000; border: none; border-radius: 12px;
  height: 52px; font-family: inherit; font-size: 15px; font-weight: 800;
  letter-spacing: .04em; cursor: pointer; transition: transform .12s;
}
.btn-primary:active { transform: scale(.97); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost {
  flex: 1; background: transparent; color: var(--text); border: 1.5px solid var(--line);
  border-radius: 12px; height: 52px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn-ghost:active { transform: scale(.97); }

/* ─── Customize modal ─── */
.cz-hero { width: calc(100% + 36px); height: 220px; object-fit: cover; margin: -20px -18px 14px; display: block; background: var(--surface-2); }
.cz-name { font-size: 22px; font-weight: 800; margin: 4px 0 2px; }
.cz-desc { font-size: 13px; color: var(--text-2); margin: 0 0 16px; }
.cz-section { margin: 18px 0 10px; }
.cz-section-head { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 8px; }
.cz-section-head .req { color: var(--danger); margin-left: 4px; }
.cz-section.shake { animation: shake .35s ease; }
@keyframes shake { 0%, 100% { transform: translateX(0) } 20%, 60% { transform: translateX(-8px) } 40%, 80% { transform: translateX(8px) } }
/* Locked sections — visibly dimmed and untappable. The customer sees them
   so they know what's coming next, but can't interact until the required
   group is filled. Cleaner than a popup error after the fact. */
.cz-section.cz-locked { opacity: .35; pointer-events: none; filter: grayscale(.6); }

.opt-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 8px;
  cursor: pointer; transition: all .15s;
  min-height: 56px;  /* big enough to thumb-tap reliably */
}
.opt-row:active { transform: scale(.985); }
.opt-row.selected { background: var(--accent-dim); border-color: var(--accent); }
.opt-row.unavail { opacity: .45; pointer-events: none; }
.opt-row-name { flex: 1; font-weight: 600; font-size: 15px; }
.opt-row-price { font-size: 14px; color: var(--text-2); font-weight: 700; margin-right: 6px; }
/* Tap-toggle check — orange filled circle when selected, hollow when not. */
.opt-check {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--line); background: transparent;
  color: #000; display: grid; place-items: center;
  font-weight: 900; font-size: 16px; line-height: 1;
  transition: all .15s;
}
.opt-row.selected .opt-check { background: var(--accent); border-color: var(--accent); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 14px; border-radius: 22px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.chip.selected { background: var(--accent); color: #000; border-color: var(--accent); }
.chip.unavail { opacity: .4; pointer-events: none; text-decoration: line-through; }

.cz-foot {
  position: sticky; bottom: -32px; margin: 18px -18px -32px; padding: 14px 18px 28px;
  background: linear-gradient(to top, var(--surface) 70%, transparent);
  display: flex; flex-direction: column; gap: 10px;
}
.cz-foot-row { display: flex; gap: 10px; align-items: center; }
/* Validation banner — sits right above the action button so the customer
   can't miss it. Red, bold, slightly bouncy, includes a chevron pointing
   to the unfilled section. */
.cz-warn {
  display: none;
  background: var(--danger); color: #fff;
  padding: 10px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 700; text-align: center;
  box-shadow: 0 4px 16px rgba(231, 76, 60, .5);
  animation: pulse 1.2s ease infinite;
}
.cz-warn.show { display: block; }
@keyframes pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.02) } }

/* Modal close — bigger tap target so it actually registers on touch. */
.m-close, .cz-x {
  background: rgba(0, 0, 0, .55); border: none; color: #fff;
  font-size: 26px; line-height: 1; width: 40px; height: 40px;
  border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
}
.cz-x {
  position: sticky; top: 0; float: right;
  margin: -8px -8px 0 0; z-index: 5;
}
.cz-qty { display: flex; align-items: center; background: var(--surface-2); border-radius: 24px; padding: 4px; }
.cz-qty-btn { background: transparent; border: none; color: var(--text); width: 36px; height: 36px; font-size: 18px; font-weight: 700; cursor: pointer; }
.cz-qty-n { min-width: 28px; text-align: center; font-weight: 800; }

/* ─── Cart ─── */
.cart-lines { display: flex; flex-direction: column; gap: 12px; }
.cart-line {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px;
}
.cart-line-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cart-line-name { font-weight: 700; font-size: 15px; }
.cart-line-price { font-weight: 800; color: var(--accent); flex-shrink: 0; }
.cart-line-mods { font-size: 12px; color: var(--text-2); margin-top: 6px; }
.cart-line-actions { display: flex; gap: 12px; margin-top: 10px; }
.cl-btn { background: none; border: none; color: var(--text-2); font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 0; }
.cl-btn:active { color: var(--accent); }
.cl-btn.danger { color: var(--danger); }

.cart-totals { padding: 14px 0; border-top: 1px solid var(--line); margin-top: 16px; }
.ct-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.ct-row.total { font-size: 17px; font-weight: 800; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ct-row.total span:last-child { color: var(--accent); }

/* ─── Checkout form ─── */
.checkout-form { display: flex; flex-direction: column; gap: 14px; }
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-field span { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.cf-field input, .cf-field textarea {
  background: var(--surface-2); border: 1.5px solid var(--line); color: var(--text);
  padding: 12px 14px; border-radius: 10px; font-family: inherit; font-size: 15px; outline: none;
  transition: border-color .15s;
}
.cf-field input:focus, .cf-field textarea:focus { border-color: var(--accent); }
.cf-summary { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--text-2); }
.cf-summary .ct-row.total span:last-child { color: var(--accent); font-size: 16px; }

/* ─── Spinner & success ─── */
.spinner {
  width: 46px; height: 46px; border: 3px solid var(--surface-2); border-top-color: var(--accent);
  border-radius: 50%; margin: 8px auto 16px; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.check-circle { width: 72px; height: 72px; margin: 8px auto 16px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; font-size: 40px; font-weight: 900; }

/* ─── Item Added success state ─── Brand-orange takeover. !important on the
   critical rules so iOS Safari's aggressive CSS cache can't fall back to an
   older version mid-session and serve us small white buttons again. */
.added-state { text-align: center !important; padding: 40px 14px 16px !important; }
.added-check {
  width: 110px !important; height: 110px !important; margin: 0 auto 24px !important;
  border-radius: 50% !important;
  background: var(--accent) !important; color: #000 !important;
  display: grid !important; place-items: center !important;
  font-size: 64px !important; font-weight: 900 !important;
  animation: pop .35s cubic-bezier(.34, 1.56, .64, 1);
  box-shadow: 0 14px 36px rgba(245, 166, 35, .55) !important;
}
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
.added-title {
  font-size: 38px !important; font-weight: 900 !important; letter-spacing: .03em !important;
  margin: 0 0 10px !important; color: var(--accent) !important;
  text-transform: uppercase !important; font-family: var(--font-head), "DM Sans", sans-serif !important;
  line-height: 1 !important;
}
.added-sub { font-size: 19px !important; color: var(--text) !important; margin: 0 0 6px !important; font-weight: 700 !important; }
.added-total { font-size: 16px !important; color: var(--text-2) !important; margin: 0 0 28px !important; font-weight: 600 !important; }
.added-actions {
  display: flex !important; flex-direction: column !important; gap: 14px !important;
  padding: 0 6px !important; margin: 0 !important;
}
.added-actions button {
  width: 100% !important; border: none; border-radius: 16px !important;
  min-height: 68px !important; padding: 16px 18px !important;
  font-family: inherit !important; font-size: 17px !important; font-weight: 800 !important;
  letter-spacing: .02em !important; cursor: pointer; transition: transform .12s;
  white-space: normal !important;
}
.added-actions button:active { transform: scale(.97); }
/* Primary CTA: solid brand orange — unmissable. */
.added-actions .btn-go {
  background: var(--accent) !important; color: #000 !important;
  box-shadow: 0 10px 24px rgba(245, 166, 35, .55) !important;
  border: none !important;
}
/* Secondary CTAs: thick orange outline on dark — still in palette, lower
   visual weight, but unmistakably tappable. */
.added-actions .btn-menu {
  background: transparent !important; color: var(--accent) !important;
  border: 2.5px solid var(--accent) !important;
}

/* ─── Drink upsell grid ─── */
.upsell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 6px; }
.upsell-card {
  background: var(--surface-2); border: 2px solid var(--line); border-radius: 12px;
  padding: 10px; cursor: pointer; transition: all .15s; text-align: center;
}
.upsell-card.selected { border-color: var(--accent); background: var(--accent-dim); }
.upsell-card-img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; background: var(--surface); }
.upsell-card-name { font-weight: 700; font-size: 13px; margin-top: 6px; }
.upsell-card-price { color: var(--accent); font-weight: 800; font-size: 13px; }

/* ─── Toast ─── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 80px);
  background: var(--accent); color: #000; padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: 14px; z-index: 1000; opacity: 0;
  transition: all .25s; pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ============================================================
   ONLINE-SPECIFIC — fulfillment mode segment, delivery /
   catering forms, tip selector, store-closed banner. Everything
   above is shared with Garden; everything below is new for the
   pickup / delivery / catering web order page.
   ============================================================ */

/* ─── Mode segment (Pickup / Delivery / Catering) ─── */
.mode-seg {
  display: flex; gap: 6px; margin: 20px auto 0; max-width: 360px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 5px;
}
.mode-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; border: none; color: var(--text-2);
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  padding: 9px 4px; border-radius: 10px; cursor: pointer; transition: all .15s;
}
.mode-btn .mode-ico { font-size: 19px; line-height: 1; }
.mode-btn.active { background: var(--accent); color: #000; box-shadow: 0 4px 12px rgba(245, 166, 35, .35); }
.mode-btn:active { transform: scale(.96); }

/* ─── Store-closed banner ─── */
.closed-banner {
  background: rgba(231, 76, 60, .12); border: 1px solid var(--danger);
  color: var(--danger); border-radius: 12px; padding: 12px 14px;
  margin: 0 4px 16px; text-align: center; font-size: 13px; font-weight: 700;
}
.closed-banner[hidden] { display: none; }

/* ─── Checkout: rows + per-mode field blocks ─── */
.cf-row { display: flex; gap: 10px; }
.cf-row .cf-field { flex: 1; }
.cf-block { display: flex; flex-direction: column; gap: 14px; padding-top: 2px; }
.cf-block[hidden], .cf-email[hidden], .cf-cater-addr[hidden] { display: none; }
/* A .cf-field has display:flex which beats the UA [hidden]{display:none}; make
   the hidden attribute actually hide a field (e.g. "Number of guests"). */
.cf-field[hidden] { display: none; }
.cf-field.error input, .cf-field.error textarea { border-color: var(--danger); }

/* delivery validation message — colour set inline by JS (muted/warn/danger/ok) */
.cf-delivery-msg { font-size: 12px; font-weight: 700; text-align: center; padding: 4px 0; }
.cf-delivery-msg[hidden] { display: none; }

/* ─── Catering fulfillment sub-toggle ─── */
.cf-cater-fulfill { display: flex; gap: 8px; }
.cater-ful-btn {
  flex: 1; background: var(--surface-2); border: 1.5px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 11px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.cater-ful-btn.active { background: var(--accent); color: #000; border-color: var(--accent); }
.cf-deposit-note { font-size: 12px; color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 10px 12px; line-height: 1.4; }

/* ─── Tip selector (delivery + catering) ─── */
.cf-tip-label { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.tip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tip-opt {
  background: var(--surface-2); border: 1.5px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 12px 4px; text-align: center; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .15s;
}
.tip-opt.selected { background: var(--accent); color: #000; border-color: var(--accent); }
.tip-opt:active { transform: scale(.96); }
.tip-custom {
  background: var(--surface-2); border: 1.5px solid var(--line); color: var(--text);
  padding: 12px 14px; border-radius: 10px; font-family: inherit; font-size: 15px; outline: none; margin-top: 4px; width: 100%;
}
.tip-custom[hidden] { display: none; }
.tip-custom:focus { border-color: var(--accent); }

/* ─── Checkout summary: discount row (green, negative) ─── */
.cf-summary .ct-row.discount span:last-child { color: var(--success); }

/* ─── Checkout error ─── */
/* Prominent, unmissable checkout error — same energy as the customize-modal
   "pick required first" banner (red, bold, pulsing). */
.ck-error {
  background: var(--danger); color: #fff;
  padding: 12px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 700; text-align: center;
  box-shadow: 0 4px 16px rgba(231, 76, 60, .5);
  animation: pulse 1.2s ease infinite;
}
.ck-error[hidden] { display: none; }

/* ─── Catering: pack cards (hero) ─── */
/* #categoryGrid carries .cat-grid (a 1–2 col grid for menu categories). In
   catering mode it holds the intro + pack-grid instead, so switch it to block
   flow — otherwise the pack-grid gets squeezed into one menu column. */
.cat-grid.is-catering { display: block; padding: 0 4px; }
.cater-intro { font-size: 13px; color: var(--text-2); text-align: center; margin: 0 4px 18px; line-height: 1.5; }
.pack-grid { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0 4px; }
.pack-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.pack-img { width: 100%; height: 150px; object-fit: cover; background: var(--surface-2); display: block; }
.pack-img-ph { display: grid; place-items: center; font-size: 52px; }
.pack-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.pack-name { font-weight: 800; font-size: 20px; }
.pack-head { color: var(--text-2); font-weight: 600; font-size: 14px; }
.pack-price { font-weight: 900; font-size: 26px; color: var(--accent); display: flex; align-items: baseline; gap: 8px; }
.pack-ref { color: var(--muted); font-size: 16px; font-weight: 700; text-decoration: line-through; }
.pack-save { font-size: 12px; font-weight: 700; color: var(--success); }
.pack-badge { align-self: flex-start; background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 800; }
.pack-incl { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pack-incl li { font-size: 13px; color: var(--text-2); padding-left: 20px; position: relative; }
.pack-incl li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 900; }
.pack-choose { margin-top: 10px; }

/* ─── Catering: configurator (protein / drinks / add-ons / summary) ─── */
#cateringCard .cz-section-head { display: flex; align-items: center; }
.cz-count { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--text-2); background: var(--surface-2); border-radius: 999px; padding: 2px 10px; }
.cz-count.ok { color: #000; background: var(--accent); }
.cz-opt { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: none; letter-spacing: 0; }
.addon-row { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.addon-info { flex: 1; min-width: 0; }
.addon-name { font-weight: 600; font-size: 14px; }
.addon-price { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.addon-variant { margin-top: 8px; background: var(--surface); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 8px; font-family: inherit; font-size: 13px; max-width: 100%; }
.addon-qty { display: flex; align-items: center; gap: 4px; background: var(--surface); border-radius: 24px; padding: 4px; flex-shrink: 0; }
.aq-btn { background: transparent; border: none; color: var(--text); width: 32px; height: 32px; font-size: 18px; font-weight: 700; cursor: pointer; border-radius: 50%; }
.aq-btn:active { background: var(--accent-dim); }
.aq-n { min-width: 22px; text-align: center; font-weight: 800; }
.cater-sum { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }

/* ─── Catering: contact phone + larger-event "call us" card ─── */
.cater-phone { color: var(--accent); font-weight: 800; text-decoration: none; white-space: nowrap; }
.cater-callus { margin: 18px 4px 0; padding: 20px 18px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; }
.cater-callus-t { font-weight: 800; font-size: 17px; }
.cater-callus-s { font-size: 13px; color: var(--text-2); margin: 6px auto 14px; max-width: 360px; }
.cater-callus-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #000; border-radius: 12px; padding: 13px 22px; font-weight: 800; font-size: 15px; text-decoration: none; }
.cater-callus-btn:active { transform: scale(.97); }

/* 2-up packs on tablet, 3-up on desktop (1-up on phones) */
@media (min-width: 768px) {
  .pack-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (min-width: 1024px) {
  .pack-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   RESPONSIVE — unlike the table-side Garden QR menu (always a phone), the
   ONLINE ordering page gets real desktop + tablet traffic. The base styles
   above are phone-first and lock the layout to a 480px column. These
   breakpoints let it breathe on bigger screens: a wider centered content
   column, multi-column menu grids, and centered (not bottom-sheet) modals.
   Phone layout (< 768px) is untouched.
   ========================================================================= */

/* ── Tablet (≥ 768px) ── */
@media (min-width: 768px) {
  html, body { max-width: 720px; }

  .hero-wrap { max-width: 720px; padding: 44px 24px 28px; }
  .hero-logo { width: 148px; height: 148px; }
  .hero-title { font-size: 60px; }

  /* Two-up menu grids — fill the wider column instead of one tall strip. */
  .cat-grid    { grid-template-columns: 1fr 1fr; gap: 18px; }
  .item-grid   { grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; }
  .upsell-grid { grid-template-columns: repeat(4, 1fr); }

  /* Centered dialog modals instead of phone bottom-sheets. The fixed
     overlay already spans the viewport (not the 480px body), so only the
     alignment + card radius change. */
  .overlay     { align-items: center; padding: 24px; }
  .modal-card  { max-width: 560px; max-height: 88vh; border-radius: 18px; }
}

/* ── Desktop (≥ 1024px) ── */
@media (min-width: 1024px) {
  html, body  { max-width: 960px; }
  .hero-wrap  { max-width: 820px; }
  .hero-title { font-size: 68px; }
  .cat-grid   { gap: 22px; }
  .item-grid  { grid-template-columns: repeat(3, 1fr); }
}

/* ── Pointer/mouse devices: hover affordances (skipped on touch so cards
   don't get a sticky hover state after a tap). ── */
@media (hover: hover) {
  .cat-card:hover, .item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
    border-color: rgba(245, 166, 35, .45);
  }
  .btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
  .btn-ghost:hover                  { border-color: var(--accent); color: var(--accent); }
  .upsell-card:hover                { border-color: rgba(245, 166, 35, .5); }
  .opt-row:hover, .chip:hover, .tip-opt:hover, .cater-ful-btn:hover { border-color: var(--accent); }
  .lang-btn:hover                   { border-color: var(--accent); }
  .cat-card-arrow, .item-card-add, .mode-btn, .cl-btn { cursor: pointer; }

  /* Visible, grabbable scrollbar on pointer devices — the customize / cart /
     checkout modals can run taller than the viewport, and macOS hides the
     native overlay scrollbar until you actively scroll, so a mouse user has
     nothing to grab. Touch devices keep the native overlay bar. */
  .modal-card { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .modal-card::-webkit-scrollbar { width: 12px; }
  .modal-card::-webkit-scrollbar-track { background: transparent; }
  .modal-card::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 10px; border: 3px solid var(--surface);
  }
  .modal-card::-webkit-scrollbar-thumb:hover { background: var(--muted); }
}