/* Baba Kebab — ordering UI (menu page, item modal, cart, checkout) */

/* Dark theme, scoped to the ordering flow only (menu/checkout/confirmation) — the rest of the
   site (home, story, catering, etc.) stays on the light palette from app.css. Since every rule
   in this file and in app.css's shared components (header/footer/buttons) already reads from
   these same custom properties, redefining them here re-themes the whole page for free. */
body.order-dark{
  --bg:        #14110d;
  --surface:   #201a13;
  --surface-2: #2a2217;
  --ink:       #f3ecdf;
  --ink-2:     #b9ac97;
  --ink-3:     #85795f;
  --line:      #3a2f20;
  --accent:    #d9a94e;
  --accent-d:  #c2913b;
  --accent-soft:#3a2f1a;
  --ok:        #6fbb82;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.25);
  --shadow:    0 10px 34px rgba(0,0,0,.45);
}
body.order-dark .tag--req{ background:#1f3324; color:var(--ok); }
body.order-dark .draft-flag{ background:repeating-linear-gradient(45deg,#2c2416 0 10px,#241d12 10px 20px); color:var(--ink-2); }
body.order-dark ::selection{ background:var(--accent); color:#14110d; }

.order-top{
  position:sticky; top:0; z-index:200; background:var(--bg);
  border-bottom:1px solid var(--line);
}
.order-top__in{ display:flex; align-items:center; gap:14px; padding:12px 0;
  width:min(var(--maxw), calc(100% - 40px)); margin-inline:auto; }
.order-top .brand{ flex:0 0 auto; }
.order-top__spacer{ flex:1; }
.pill-btn{ display:inline-flex; align-items:center; gap:.5em; padding:.55em .9em;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  font:600 .9rem/1 var(--sans); color:var(--ink); cursor:pointer; text-decoration:none; }
.pill-btn:hover{ border-color:var(--ink-3); }
.cart-btn{ position:relative; }
.cart-btn .count{ background:var(--accent); color:#fff; border-radius:999px; font-size:.72rem;
  padding:1px 6px; margin-left:2px; }

.order-subbar{ background:var(--surface-2); border-bottom:1px solid var(--line); }
.order-subbar__in{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 0;
  width:min(var(--maxw), calc(100% - 40px)); margin-inline:auto; font-size:.92rem; }
.toggle{ display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:2px; }
.toggle button{ border:0; background:transparent; padding:.4em 1em; border-radius:999px; font:600 .88rem/1 var(--sans); cursor:pointer; color:var(--ink-2); }
.toggle button[aria-pressed="true"]{ background:var(--ink); color:#fff; }
.toggle button:disabled{ opacity:.4; cursor:not-allowed; }

/* menu layout */
.menu-layout{ display:grid; grid-template-columns:200px 1fr; gap:36px;
  width:min(var(--maxw), calc(100% - 40px)); margin:28px auto 80px; }
.cat-rail{ position:sticky; top:120px; align-self:start; display:grid; gap:2px; }
.cat-rail a{ text-decoration:none; color:var(--ink-2); font-weight:600; font-size:.95rem;
  padding:.5em .7em; border-radius:8px; }
.cat-rail a:hover{ background:var(--surface-2); color:var(--ink); }
.cat-rail a.active{ background:var(--accent-soft); color:var(--accent-d); }

.menu-search{ width:100%; padding:.7em .9em; border:1.5px solid var(--line); border-radius:10px;
  background:var(--surface); font:inherit; margin-bottom:16px; }

.menu-cat{ margin-bottom:44px; scroll-margin-top:130px; }
.menu-cat > h2{ font-size:1.5rem; margin-bottom:16px; }
.menu-items{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.menu-item{ display:flex; gap:14px; text-align:left; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; cursor:pointer; padding:0; font:inherit; color:inherit; align-items:stretch;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.menu-item:hover{ border-color:var(--ink-3); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.menu-item:active{ transform:translateY(0); }
.menu-item__txt{ padding:14px 4px 14px 16px; flex:1; min-width:0; }
.menu-item__txt h3{ margin:0 0 3px; font-size:1.02rem; }
.menu-item__txt p{ margin:0 0 6px; font-size:.86rem; color:var(--ink-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.menu-item__price{ font-weight:700; font-size:.9rem; }
.menu-item__media{ width:118px; flex:0 0 auto; position:relative; background:var(--accent-soft); }
.menu-item__media img{ width:100%; height:100%; object-fit:cover; }
.menu-item__media .ph{ position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); color:#b79b74; font-size:.8rem; text-align:center; padding:8px; }
.menu-item__add{ position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); font-size:1.1rem; line-height:1; color:var(--ink);
  display:grid; place-items:center; z-index:2; cursor:pointer;
  transition:transform .12s ease, background .12s ease, color .12s ease; }
.menu-item__add:hover{ transform:scale(1.08); }
.menu-item__add:active{ transform:scale(.94); }
.menu-item__add.is-qty{ background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:700; font-size:.95rem; }
@keyframes bk-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.22); } 100%{ transform:scale(1); } }
.menu-item__add.is-pop{ animation:bk-pop .28s ease; }

/* ---------- modal / sheet ---------- */
.sheet-backdrop{ position:fixed; inset:0; background:rgba(20,18,15,.45); z-index:500;
  display:flex; align-items:center; justify-content:center; padding:20px; }
.sheet{ background:var(--surface); border-radius:16px; width:min(560px,100%); max-height:90vh;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); }
.sheet__head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--line); }
.sheet__head h2{ margin:0; font-size:1.25rem; }
.sheet__close{ border:0; background:var(--surface-2); width:34px; height:34px; border-radius:50%;
  font-size:1.1rem; cursor:pointer; color:var(--ink-2); flex:0 0 auto; }
.sheet__body{ overflow-y:auto; padding:18px; }
.sheet__foot{ border-top:1px solid var(--line); padding:14px 18px;
  display:flex; gap:12px; align-items:center; }

@media (max-width:560px){
  .sheet-backdrop{ padding:0; align-items:flex-end; }
  .sheet{ width:100%; max-height:92vh; border-radius:16px 16px 0 0; }
}

/* item modal */
.item-photo{ width:calc(100% + 36px); margin:-18px -18px 16px; aspect-ratio:16/10; object-fit:cover; background:var(--accent-soft); }
.item-photo.ph{ display:grid; place-items:center; font-family:var(--serif); color:#b79b74; }
.mod-group{ margin:18px 0; }
.mod-group__head{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; }
.mod-group__head h3{ margin:0; font-size:1rem; }
.tag{ font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 7px; border-radius:6px; background:var(--surface-2); color:var(--ink-2); }
.tag--req{ background:#eef6f0; color:var(--ok); }
.mod-opt{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.mod-opt:last-child{ border-bottom:0; }
.mod-opt input{ accent-color:var(--accent); width:18px; height:18px; }
.mod-opt .name{ flex:1; }
.mod-opt .delta{ color:var(--ink-2); font-size:.9rem; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.qty button{ border:0; background:var(--surface); width:38px; height:38px; font-size:1.1rem; cursor:pointer; color:var(--ink); }
.qty span{ min-width:34px; text-align:center; font-weight:600; }
.add-btn{ flex:1; }

/* goes-well-with row */
.gww{ display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.gww:last-child{ border-bottom:0; }
.gww__media{ width:52px; height:52px; border-radius:9px; background:var(--accent-soft); flex:0 0 auto; overflow:hidden; }
.gww__media img{ width:100%; height:100%; object-fit:cover; }
.gww__txt{ flex:1; min-width:0; }
.gww__txt b{ display:block; font-size:.92rem; }
.gww__txt span{ font-size:.82rem; color:var(--ink-2); }
.gww__add{ border:1px solid var(--line); background:var(--surface); border-radius:8px; width:34px; height:34px; font-size:1.1rem; cursor:pointer; }
.gww__add:disabled{ opacity:.4; cursor:not-allowed; }

/* cart drawer */
.cart-line{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.cart-line__media{ width:56px; height:56px; border-radius:9px; background:var(--accent-soft); flex:0 0 auto; overflow:hidden; }
.cart-line__media img{ width:100%; height:100%; object-fit:cover; }
.cart-line__txt{ flex:1; min-width:0; }
.cart-line__txt b{ font-size:.95rem; }
.cart-line__txt .mods{ font-size:.82rem; color:var(--ink-2); }
.cart-line__price{ font-weight:600; white-space:nowrap; }
.cart-empty{ text-align:center; color:var(--ink-2); padding:40px 0; }
.cart-total-row{ display:flex; justify-content:space-between; font-weight:700; font-size:1.05rem; padding-top:8px; }
.points-note{ background:var(--accent-soft); color:var(--accent-d); border-radius:8px; padding:8px 12px;
  font-size:.85rem; text-align:center; margin:10px 0; }

/* schedule modal */
.day-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.day-tabs button{ border:1px solid var(--line); background:var(--surface); border-radius:10px;
  padding:.5em .9em; font:600 .85rem/1.2 var(--sans); cursor:pointer; color:var(--ink); }
.day-tabs button[aria-pressed="true"]{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-d); }
.day-tabs button:disabled{ opacity:.4; cursor:not-allowed; }
.slot-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.slot-list label{ border:1px solid var(--line); border-radius:9px; padding:.5em; text-align:center;
  font-size:.9rem; cursor:pointer; }
.slot-list label:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-d); font-weight:600; }
.slot-list input{ position:absolute; opacity:0; }
.closed-msg{ background:var(--surface-2); border-radius:10px; padding:16px; color:var(--ink-2); text-align:center; }

/* checkout */
.checkout-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px;
  width:min(980px, calc(100% - 40px)); margin:36px auto 90px; align-items:start; }
.checkout-summary{ position:sticky; top:100px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:22px; }
.sum-row{ display:flex; justify-content:space-between; padding:.3em 0; color:var(--ink-2); }
.sum-row.total{ color:var(--ink); font-weight:700; font-size:1.1rem; border-top:1px solid var(--line);
  margin-top:8px; padding-top:12px; }
.tip-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0; }
.tip-row label{ border:1.5px solid var(--line); border-radius:10px; padding:.6em .3em; text-align:center; cursor:pointer; font-size:.9rem; }
.tip-row label:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-d); font-weight:600; }
.tip-row input{ position:absolute; opacity:0; }
.tip-other{ margin:-4px 0 12px; }
.tip-other label{ display:block; font-size:.85rem; color:var(--muted); margin-bottom:4px; }
.tip-other-input{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:10px; padding:.5em .8em; max-width:180px; }
.tip-other-input span{ color:var(--muted); margin-right:4px; }
.tip-other-input input{ border:none; outline:none; width:100%; font-size:1rem; background:transparent; }
.tip-other-input:focus-within{ border-color:var(--accent); }
.pickup-card{ border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:22px; }
.pickup-card b{ display:block; }
#payment-element{ margin:14px 0; }
.opt-in{ display:flex; align-items:center; gap:10px; margin:8px 0; font-size:.92rem; }
.opt-in input{ width:18px; height:18px; accent-color:var(--accent); }
.pay-msg{ color:var(--err); font-size:.9rem; margin-top:8px; min-height:1.2em; }

@media (max-width:900px){
  .menu-layout{ grid-template-columns:1fr; gap:0; }
  .cat-rail{ position:sticky; top:112px; z-index:100; display:flex; gap:6px; overflow-x:auto;
    background:var(--bg); padding:8px 0; margin-bottom:12px; }
  .cat-rail a{ white-space:nowrap; }
  .menu-items{ grid-template-columns:1fr; }
  .checkout-grid{ grid-template-columns:1fr; gap:24px; }
  .checkout-summary{ position:static; }
}
@media (max-width:560px){
  .slot-list{ grid-template-columns:repeat(2,1fr); }
}