/* =========================================================================
   Garden — table-side QR menu styling. Mobile-first, dark theme. Matches
   the legacy order_garden_cift_dil.html design tokens so the printed QR
   code lands customers on a visually-consistent 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; }