/* ==========================================================
   TiffinTots — design tokens + layout shared by both pages.
   Premium pastel palette: mint (fresh/healthy), mustard (warm),
   coral (playful accent) — deliberately avoids low-cost/fast-food reds.
   ========================================================== */
:root{
  --bg: #FDFBF6;
  --card: #FFFFFF;
  --ink: #2E2A26;
  --muted: #93897B;
  --line: #EDE5D6;

  --mint: #BFE8D4;
  --mint-deep: #4FA383;
  --mustard: #F4C24E;
  --mustard-deep: #C98A1F;
  --coral: #FF7A63;
  --coral-deep: #E8543B;
  --sky: #BEE0F2;
  --sky-deep: #3E86AE;
  --peach: #FFD3AE;
  --peach-deep: #E08A3C;

  --r: 22px;
  --r-sm: 14px;
  --shadow: 0 10px 30px rgba(46,42,38,.08);
}

*{ box-sizing:border-box }
body{
  margin:0;
  max-width:480px;
  margin-inline:auto;
  color:var(--ink);
  font-family:'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(560px 280px at 12% -8%, rgba(191,232,212,.55), transparent 60%),
    radial-gradient(480px 260px at 105% 6%, rgba(244,194,78,.30), transparent 60%),
    var(--bg);
}

/* ---------- Sticky top address bar (signed-in pages) ----------
   Zomato/Swiggy-style: always visible at the very top, so a parent can see
   (and fix) their delivery address without hunting through Account. */
.address-bar{
  position:sticky; top:0; z-index:25; max-width:480px; margin-inline:auto;
  background:var(--card); border-bottom:1px solid var(--line);
}
.address-bar-link{
  display:flex; align-items:center; gap:8px; padding:10px 16px; width:100%; box-sizing:border-box;
  text-decoration:none; color:var(--ink); font-family:'Plus Jakarta Sans';
  border:none; background:none; text-align:left; cursor:pointer; font-size:inherit;
}
.address-bar-link span:not(.address-bar-chevron){
  flex:1; min-width:0; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.address-bar-link b{ font-weight:800 }
.address-bar-chevron{ flex:none; font-size:11.5px; font-weight:800; color:var(--mint-deep) }
.address-bar-full{ padding:0 16px 12px; font-size:12.5px; color:var(--muted); line-height:1.4 }

/* ---------- Header ---------- */
header{ padding:30px 20px 8px }
.brand{
  display:flex; align-items:center; gap:8px;
  font-family:'Fraunces',serif; font-weight:600; font-size:16px; color:var(--coral-deep);
}
.brand-mark{ font-size:20px }
.tagline{
  margin:6px 0 0; text-transform:uppercase; letter-spacing:.08em;
  font-size:11px; font-weight:800; color:var(--mint-deep);
}
.service-area-badge{
  display:inline-block; margin:10px 0 0; padding:4px 10px;
  background:#E3F6EC; color:var(--mint-deep); border-radius:999px;
  font-family:'Plus Jakarta Sans'; font-weight:800; font-size:11px;
}
h1{
  font-family:'Fraunces',serif; font-weight:500; font-size:32px;
  line-height:1.15; margin:12px 0 0;
}
h1 em{ font-style:italic; color:var(--coral-deep) }
.sub{ color:var(--muted); font-size:14px; margin:10px 0 0; line-height:1.55 }

/* ---------- Progress ---------- */
.progress{ margin:22px 20px 4px }
.progress .bar{
  height:9px; background:var(--line); border-radius:999px; overflow:hidden;
}
.progress .bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--mint-deep), var(--mint));
  transition:width .3s ease;
}
.progress .count{ margin-top:9px; font-size:13px; font-weight:800; color:var(--muted) }

.week-range-bar{
  margin:16px 20px 4px; font-size:12px; font-weight:700; color:var(--mustard-deep);
}


/* ---------- Roll-forward notice ---------- */
#rollForwardBanner{
  display:flex; align-items:flex-start; gap:12px; margin:14px 16px 0;
  background:linear-gradient(135deg,#E3F6EC,#F4FAF7); border:1px solid #CDEBDC;
  border-radius:var(--r-sm); padding:14px 16px; box-shadow:var(--shadow);
}
/* The unconditional display:flex above otherwise beats the browser's own
   [hidden]{display:none} — same gotcha documented for .primary-btn/.pay-btn
   (see js/account.js) — here fixed at the CSS level instead, since
   js/planner.js toggles this one via .hidden, not .style.display. */
#rollForwardBanner[hidden]{ display:none }
#rollForwardBanner .rfb-icon{ font-size:20px; flex:none }
#rollForwardBanner .rfb-text{ flex:1; font-size:12.5px; color:var(--ink); line-height:1.5 }
#rollForwardBanner .rfb-text strong{ font-family:'Fraunces',serif; font-weight:600; font-size:14px; display:block; margin-bottom:3px }
#rollForwardBanner .rfb-dismiss{
  flex:none; border:none; background:none; cursor:pointer; color:var(--muted);
  font-size:16px; line-height:1; padding:2px;
}

/* ---------- Repeat a past week ---------- */
.repeat-week-row{ margin:0 16px 8px }
.repeat-week-btn{
  width:100%; border:1.5px solid var(--mint-deep); background:#F4FAF7; cursor:pointer;
  font-family:'Plus Jakarta Sans'; font-weight:800; font-size:12.5px; color:var(--mint-deep);
  padding:11px; border-radius:var(--r-sm);
}
#repeatWeekList{ display:flex; flex-direction:column; gap:10px }
.repeat-week-card, .repeat-target-btn{
  display:block; width:100%; text-align:left; border:1.5px solid var(--line); background:var(--card);
  border-radius:16px; padding:12px 14px; cursor:pointer; font-family:'Plus Jakarta Sans';
}
.repeat-week-card .rwc-range{ font-family:'Fraunces',serif; font-weight:600; font-size:14px; color:var(--ink) }
.repeat-week-card .rwc-summary{ font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.5 }
.repeat-target-btn{ font-weight:800; font-size:13px; color:var(--ink) }
.repeat-back-link{
  display:block; border:none; background:none; cursor:pointer; padding:0 0 12px;
  color:var(--muted); font-family:'Plus Jakarta Sans'; font-weight:800; font-size:12.5px;
}

/* ---------- Weekly planner strip ---------- */
.week{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:18px 16px 14px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.week::-webkit-scrollbar{ display:none }
.day{
  position:relative; flex:none; width:126px; scroll-snap-align:start;
  background:var(--card); border:1.5px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); transition:opacity .2s, border-color .2s;
}
.day.filled{ border-color:var(--mint-deep) }
/* Advance-week days (weeks 2–4) get a distinct warm tint so it's obvious
   at a glance which cards are "the upcoming week" vs. further out — the
   only difference is visual; every day locks individually at its own
   6PM-the-evening-before cutoff regardless of which week it's in. */
.day.is-advance{ background:linear-gradient(160deg,#FFFBF2,#FDF1D2); border-color:#EFCF7E }
.day.is-advance.filled{ border-color:var(--mustard-deep) }
.day.is-advance .dcd-dow{ color:var(--mustard-deep) }
.day.is-advance.filled .dcd-icon{ background:linear-gradient(135deg,var(--mustard),#fff) }
/* A weekday permanently skipped via wallet.html — proactively blocked,
   every week, distinct from a one-off Pause (which still shows the ⏸️
   paused/read-only treatment above). */
.day.weekday-skipped{ opacity:.6; pointer-events:none }
.day.weekday-skipped .dcd-name{ font-size:11px }
.day-main{
  display:flex; flex-direction:column; align-items:center; width:100%;
  border:none; background:none; cursor:pointer; padding:16px 10px 14px;
  text-align:center; font-family:'Plus Jakarta Sans', sans-serif;
}
.day-card-date{ display:flex; flex-direction:column; align-items:center; margin-bottom:12px }
.day-card-date .dcd-dow{ font-size:10.5px; font-weight:800; letter-spacing:.06em; color:var(--coral-deep) }
.day-card-date .dcd-num{
  font-family:'Fraunces',serif; font-weight:600; font-size:19px; color:var(--ink); margin-top:2px;
}
.dcd-icon{
  width:50px; height:50px; border-radius:50%; background:#F3EEE3;
  display:grid; place-items:center; font-size:22px; margin-bottom:8px;
}
.day.filled .dcd-icon{ background:linear-gradient(135deg, var(--mint), #fff) }
.dcd-name{
  font-size:11px; font-weight:700; color:var(--ink); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.dcd-empty{ font-size:11px; color:var(--muted); font-weight:600 }
.day-remove{
  position:absolute; top:8px; right:8px; border:none; background:#FFF1EE; color:var(--coral-deep);
  cursor:pointer; width:24px; height:24px; border-radius:50%; font-size:11px; font-weight:800;
}
.day-remove[hidden]{ display:none }

/* ---------- Dish gallery (main page) ---------- */
.dish-gallery-heading{
  margin:26px 16px 12px; font-family:'Fraunces',serif; font-weight:600; font-size:19px;
}
.dish-gallery-heading span{ display:block; font-family:'Plus Jakarta Sans'; font-weight:700; font-size:12.5px; color:var(--muted); margin-top:2px }
.dish-gallery{ padding:0 16px 4px; transition:opacity .25s }
.dish-usage{
  margin-top:8px; font-size:11px; font-weight:800; color:var(--mint-deep);
}
.dish-usage[hidden]{ display:none }

/* ---------- Day-chip picker (inside the sheet) ---------- */
.day-chip-row{ display:flex; flex-direction:column; gap:10px }
.day-chip-week-label{
  font-size:11px; font-weight:800; color:var(--mustard-deep); text-transform:uppercase;
  letter-spacing:.04em; margin-top:8px;
}
.day-chip-week-label:first-child{ margin-top:0 }
.day-chip{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:1.5px solid var(--line); background:var(--card); border-radius:16px;
  padding:12px 14px; cursor:pointer; font-family:'Plus Jakarta Sans';
}
.day-chip .chip-day{
  flex:none; width:40px; height:40px; border-radius:50%; background:#F3EEE3; color:var(--coral-deep);
  display:grid; place-items:center; font-family:'Fraunces',serif; font-weight:700; font-size:12px;
}
.day-chip .chip-text{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0 }
.day-chip .chip-date{ font-weight:800; font-size:13.5px }
.day-chip .chip-text .dish-nutrition{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.day-chip .chip-text .dish-nutrition-toggle{ cursor:pointer }
.day-chip .chip-text .dish-nutrition-toggle.expanded{ white-space:normal; overflow:visible; text-overflow:clip }
.day-chip .chip-status{ font-size:11px; font-weight:800; color:var(--muted) }
.day-chip.sel{ border-color:var(--mint-deep); background:#F4FAF7 }
.day-chip.sel .chip-day{ background:var(--mint-deep); color:#fff }
.day-chip.sel .chip-status{ color:var(--mint-deep) }
/* A real dish photo (see js/planner.js's chip-day rendering) needs
   overflow:hidden to clip into the circle — .dish-badge-photo alone loses
   that fight to .day-chip .chip-day's own higher-specificity background,
   so it's reasserted here at matching specificity, selected state included. */
.day-chip .chip-day.dish-badge-photo{ background:var(--line); overflow:hidden; padding:0 }
.day-chip.sel .chip-day.dish-badge-photo{ background:var(--line) }
.day-chip.taken{ opacity:.5; cursor:not-allowed }
.day-chip.taken .chip-status{ color:var(--coral-deep) }
.day-chip:disabled{ cursor:not-allowed }

.price-old{ font-size:15px; color:var(--muted); text-decoration:line-through }
.price-new{ font-family:'Fraunces',serif; font-weight:700; font-size:24px; color:var(--coral-deep) }

.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px }
.field-grid[hidden]{ display:none }
.field{ display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:800; color:var(--muted) }
.field-wide{ grid-column:1 / -1 }
.field input, .field select{
  font-family:'Plus Jakarta Sans'; font-size:14px; font-weight:700; color:var(--ink);
  padding:11px 12px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#FCFAF5; outline:none; transition:border-color .2s;
}
.field input:focus, .field select:focus{ border-color:var(--mint-deep) }
.field input:disabled, .field select:disabled{ opacity:.6 }

/* Geofenced hub / sector cascade */
.form-group{ display:flex; flex-direction:column; gap:6px; margin-top:16px }
.form-group[hidden]{ display:none }
.form-group label{ font-size:12px; font-weight:800; color:var(--muted) }
.form-group select, .form-group input{
  width:100%; font-family:'Plus Jakarta Sans'; font-size:14px; font-weight:700; color:var(--ink);
  padding:11px 12px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#FCFAF5; outline:none; transition:border-color .2s; box-sizing:border-box;
}
.form-group select:focus, .form-group input:focus{ border-color:var(--mint-deep) }
.form-group select:disabled, .form-group input:disabled{ opacity:.6 }

/* Live serviceability preview under a free-text address field — used on
   login.html, account.html, and index.html's public area lookup. */
.addr-serviceability-note{ margin:8px 0 0; font-size:13px; font-weight:700; line-height:1.5 }
.addr-serviceability-note.ok{ color:#2E7D4F }
.addr-serviceability-note.warn{ color:#8A6512 }
.addr-lock-note{ margin:8px 0 0; font-size:12.5px; font-weight:700; line-height:1.5; color:#8A6512 }
.addr-consent-note{ margin:10px 0 0; font-size:11.5px; font-weight:600; line-height:1.5; color:var(--muted); text-align:center }

.unsupported-box{
  margin-top:16px; background:linear-gradient(135deg,#FDF1D2,#FBE7C4);
  border:1px solid #EFCF7E; border-radius:var(--r-sm); padding:16px;
}
.unsupported-box .msg{ font-size:13px; color:#6B5A2C; line-height:1.55; margin:0 0 12px }

.tower-warning{
  background:#FDF1D2; border:1px solid #EFCF7E; border-radius:var(--r-sm);
  padding:14px 14px 12px; margin-top:16px;
}
.tower-warning strong{
  display:block; font-family:'Fraunces',serif; font-weight:600; font-size:14px;
  color:var(--ink); margin-bottom:6px;
}
.tower-warning p{ font-size:12px; color:#6B5A2C; line-height:1.55; margin:0 0 6px }
.tower-warning p:last-child{ margin-bottom:0 }

.form-err{ color:var(--coral-deep); font-size:12.5px; font-weight:700; min-height:18px; margin-top:12px }

.location-row{ margin-top:14px }
.location-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  border:1.5px dashed var(--line); background:#FCFAF5; cursor:pointer;
  font-family:'Plus Jakarta Sans'; font-weight:800; font-size:12.5px; color:var(--mint-deep);
  padding:11px; border-radius:var(--r-sm);
}
.location-btn:disabled{ opacity:.6; cursor:not-allowed }
.location-btn.got-location{ border-style:solid; border-color:var(--mint-deep); color:var(--mint-deep) }
.location-status{ font-size:11.5px; font-weight:700; color:var(--muted); margin-top:6px; text-align:center; min-height:14px }
.location-status.err{ color:var(--coral-deep) }
.auth-hint{ font-size:12px; color:var(--muted); margin-top:14px; text-align:center }
.auth-hint a{ color:var(--mint-deep); font-weight:800; text-decoration:none }

.pay-btn, .primary-btn{
  width:100%; margin-top:6px; border:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg, var(--coral), var(--coral-deep)); color:#fff;
  font-family:'Plus Jakarta Sans'; font-weight:800; font-size:16px;
  padding:16px 20px; border-radius:var(--r-sm);
  box-shadow:0 10px 24px rgba(232,84,59,.30);
}
.pay-btn:disabled, .primary-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none }
.pay-btn .amt{ font-family:'Fraunces',serif; font-weight:600 }
.primary-btn{ justify-content:center; gap:8px }

.link-btn{
  display:block; width:100%; text-align:center; background:none; border:none;
  color:var(--mint-deep); font-family:'Plus Jakarta Sans'; font-weight:800; font-size:13px;
  cursor:pointer; padding:10px 0; text-decoration:none;
}
.link-btn-danger{ color:var(--coral-deep) }

/* ---------- Home page CTA (index.html) ---------- */
.home-cta{ margin:18px 16px 8px }

/* ---------- Small "back" link atop a page (menu.html) ---------- */
.page-back-link{ display:inline-block; margin:22px 0 0 16px; color:var(--muted); text-decoration:none; font-weight:700; font-size:13px }

/* ---------- Stacking discount banner (index.html, menu.html) ---------- */
.promo-banner{ display:flex; flex-direction:column; gap:10px; margin:18px 16px; padding:16px; background:#FDF1D2; border:1px solid #F1DFA3; border-radius:var(--r-sm); box-shadow:var(--shadow) }
.home-hero-banner{ margin:6px 16px 18px; border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden }
.home-hero-banner img{ display:block; width:100%; height:auto }
.home-promo-video{ margin:6px 16px 18px; border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; background:#000 }
.home-promo-video video{ display:block; width:100%; height:auto }
.promo-row{ display:flex; align-items:center; gap:12px }
.promo-tag{ flex:none; font-size:20px; line-height:1 }
.promo-text b{ display:block; font-size:13px; color:var(--ink) }
.promo-text s{ color:var(--muted); font-weight:600 }
.promo-text span{ display:block; font-size:11.5px; color:var(--mustard-deep); font-weight:800; margin-top:2px }

/* ---------- Explore-menu secondary CTA (index.html) ---------- */
.explore-menu-cta{ display:block; text-align:center; margin:10px 16px 0; padding:13px 18px; border:1.5px solid var(--mint-deep); border-radius:var(--r-sm); color:var(--mint-deep); font-weight:800; font-size:14px; text-decoration:none }

/* ---------- Fixed bottom nav (signed-in pages) ----------
   display:none here, shown via nav.style.display='flex' in js/bottom-
   nav.js — same workaround as .primary-btn/.pay-btn (see js/account.js)
   since a plain [hidden] attribute can't be relied on to win against an
   inline style set elsewhere. body.has-bottom-nav reserves clearance
   only on pages where the bar actually ends up shown. */
.bottom-nav{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:30;
  max-width:480px; margin-inline:auto; gap:3px;
  background:linear-gradient(180deg, #FFFFFF, #FFFCF6);
  border-top:1px solid var(--line);
  border-radius:22px 22px 0 0;
  box-shadow:0 -14px 32px rgba(233,84,59,.07), 0 -4px 18px rgba(46,42,38,.10);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  /* Mobile Safari/Chrome only repaint a plain `position:fixed` element once a
     scroll gesture ends, not during it — the bar visibly lags/"climbs" mid-
     scroll before snapping back. Promoting it to its own compositing layer
     (same fix cited everywhere for this exact iOS/Android quirk) keeps it
     pinned throughout the gesture instead of just at rest. */
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
}
.bnav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 2px; text-decoration:none; color:var(--muted);
  font-family:'Plus Jakarta Sans'; font-size:10px; font-weight:800; letter-spacing:.01em;
  border-radius:16px;
  transition:color .15s ease, background-color .15s ease, transform .1s ease;
}
.bnav-item:active{ transform:scale(.92) }
.bnav-item.on{
  color:var(--coral-deep);
  background:linear-gradient(180deg, rgba(255,122,99,.16), rgba(255,122,99,.05));
}
.bnav-icon{ font-size:19px; line-height:1; display:block; transition:transform .15s ease }
.bnav-item.on .bnav-icon{ transform:translateY(-1px) scale(1.12) }
body.has-bottom-nav{ padding-bottom:76px }

/* ---------- Footer ---------- */
.site-footer{ text-align:center; padding:6px 16px 40px }
.site-footer a{ color:var(--muted); text-decoration:none; font-weight:700; font-size:13px }
.site-footer a:hover{ color:var(--mint-deep) }

/* ---------- Sticky "get started" bar (menu.html) ---------- */
.sticky-cta-bar{
  position:sticky; bottom:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:10px; padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:var(--card); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(46,42,38,.08);
}
.sticky-cta-bar span{ font-size:13px; font-weight:700; color:var(--ink) }
.sticky-cta-bar a.primary-btn{ width:auto; margin:0; padding:11px 20px; font-size:14px }

/* ---------- Account bar ---------- */
.account-bar{
  display:flex; flex-direction:column; gap:9px;
  margin:14px 16px 0; padding:12px 16px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow);
  font-size:12.5px; font-weight:700; color:var(--muted);
}
.account-bar b{ color:var(--ink) }
.account-bar .abar-top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.account-bar .abar-credits{
  align-self:flex-start; display:inline-flex; align-items:center; gap:5px;
  background:#FDF1D2; color:var(--mustard-deep); font-weight:800; font-size:11.5px;
  padding:5px 10px; border-radius:999px; text-decoration:none;
}
.account-bar .abar-links{ display:flex; gap:12px; flex:none }
.account-bar a{ color:var(--mint-deep); text-decoration:none; font-weight:800 }
.account-bar .signin-cta{ color:var(--coral-deep); text-decoration:none; font-weight:800 }

/* ---------- "Let's get started" CTA — signed-in parent, no plan yet
   (index.html). Sits right below the greeting so a returning, already-
   signed-up visitor sees something different from the guest marketing
   pitch below it, instead of a page that looks identical either way. ---------- */
.home-start-cta{
  margin:10px 16px 0; padding:16px; background:linear-gradient(135deg, #FFF3E9, #FDF1D2);
  border:1px solid #F1DFA3; border-radius:var(--r); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
}
.home-start-cta h3{ font-family:'Fraunces',serif; font-weight:600; font-size:16px; color:var(--ink); margin:0 }
.home-start-cta p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.5 }
.home-start-cta-actions{ display:flex; gap:10px }
.home-start-cta-actions a{
  flex:1; text-align:center; padding:10px 8px; border-radius:12px; font-weight:800; font-size:13px; text-decoration:none;
}
.home-start-cta-actions .primary{ background:var(--coral-deep); color:#fff }
.home-start-cta-actions .secondary{ background:#fff; color:var(--ink); border:1px solid var(--line) }

/* ---------- Dish icon badge (stand-in for a real photo; a future dish
   photo can drop straight into .dish-badge with no markup change) ---------- */
.dish-badge{
  flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:linear-gradient(160deg, var(--mint) 0%, var(--peach) 100%);
  box-shadow:0 4px 10px rgba(46,42,38,.10);
}
.dish-badge.lg{ width:56px; height:56px; font-size:27px }
.dish-badge.sm{ width:40px; height:40px; font-size:19px }
.dish-badge-photo{ background:var(--line); overflow:hidden; padding:0 }
.dish-badge-photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit }

/* ---------- Home hero: tomorrow's real meal, front and center ---------- */
.home-hero{
  margin-top:18px; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:20px;
}
.home-hero-top{ display:flex; align-items:center; gap:14px }
.home-hero-eyebrow{ font-family:'Plus Jakarta Sans'; font-weight:800; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--mint-deep) }
.home-hero-dish{ font-family:'Fraunces',serif; font-weight:600; font-size:18px; color:var(--ink); margin-top:2px; line-height:1.25 }
.home-hero-meta{ font-size:12px; color:var(--muted); margin-top:2px }
.home-hero-pill{
  display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; padding:4px 10px;
  border-radius:999px; background:var(--mint); color:var(--mint-deep); margin-top:12px;
}
.home-hero-pill.paused{ background:#FDECE8; color:var(--coral-deep) }
.home-hero-actions{ display:flex; gap:10px; margin-top:14px }
.home-hero-actions a{
  flex:1; text-align:center; padding:10px; border-radius:999px; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:13px;
  text-decoration:none; border:1.5px solid var(--line); background:var(--card); color:var(--ink);
}
.home-hero-actions a.primary{ background:var(--coral); border-color:var(--coral-deep); color:#fff }
.home-hero-menu-link{ display:block; margin-top:12px; font-size:12px; font-weight:800; color:var(--mint-deep); text-decoration:none; text-align:center }

/* ---------- Bottom sheet (dish picker) ---------- */
.scrim{
  position:fixed; inset:0; background:rgba(30,26,20,.45);
  opacity:0; pointer-events:none; transition:opacity .25s; z-index:40;
}
.scrim.on{ opacity:1; pointer-events:auto }
.sheet{
  position:fixed; left:0; right:0; bottom:0; max-width:480px; margin:0 auto;
  background:var(--card); border-radius:26px 26px 0 0; padding:10px 20px 28px;
  transform:translateY(100%); transition:transform .3s ease; z-index:41;
  max-height:82vh; overflow-y:auto; box-shadow:0 -10px 30px rgba(0,0,0,.18);
}
.sheet.on{ transform:translateY(0) }
.sheet .grip{ width:40px; height:4px; background:var(--line); border-radius:99px; margin:6px auto 14px }
.sheet h2{ font-family:'Fraunces',serif; font-weight:600; font-size:20px; margin:0 }
.sheet .lead{ color:var(--muted); font-size:13px; margin:4px 0 16px }

.dish-gallery{ display:flex; flex-direction:column; gap:12px }
.dish-card{
  display:flex; gap:12px; border:1.5px solid var(--line); border-radius:18px;
  padding:12px; background:var(--card);
}
.dish-photo{
  flex:none; width:76px; height:76px; border-radius:14px; overflow:hidden;
  background:linear-gradient(135deg,#F3EEE3,var(--line));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.dish-photo img{ width:100%; height:100%; object-fit:cover }
.dish-photo .cam-icon{ font-size:20px; opacity:.6 }
.dish-photo .cam-label{ font-size:8px; font-weight:800; color:var(--muted); text-align:center; line-height:1.2; padding:0 4px }
.sheet-photo{ width:100%; height:180px; object-fit:cover; border-radius:16px; margin-bottom:12px }
.dish-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.dish-category{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--mint-deep) }
.dish-name{ font-weight:800; font-size:13.5px; line-height:1.3 }
.dish-desc{ font-size:11.5px; color:var(--muted); line-height:1.4; margin:2px 0 0 }
.dish-tag{
  font-size:10.5px; font-weight:700; color:var(--mustard-deep); background:#FDF1D2;
  border-radius:8px; padding:4px 8px; margin-top:6px; align-self:flex-start; line-height:1.35;
}
.dish-nutrition{ font-size:11px; color:var(--muted); line-height:1.4; margin:6px 0 0 }
.dish-select{
  margin-top:8px; align-self:flex-start; border:none; cursor:pointer;
  background:var(--coral); color:#fff; font-family:'Plus Jakarta Sans'; font-weight:800; font-size:12px;
  padding:8px 18px; border-radius:999px; transition:transform .12s;
}
.dish-select:active{ transform:scale(.95) }

/* ---------- Success screen (mock payment) ---------- */
.success-screen{
  position:fixed; inset:0; background:rgba(30,26,20,.55); z-index:60;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.success-screen.on{ opacity:1; pointer-events:auto }
.success-card{
  background:var(--card); border-radius:var(--r); padding:32px 26px; text-align:center;
  max-width:340px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.success-check{
  width:60px; height:60px; margin:0 auto 16px; border-radius:50%;
  background:linear-gradient(135deg, var(--mint-deep), var(--mint)); color:#fff;
  font-size:28px; display:grid; place-items:center;
}
.success-card h2{ font-family:'Fraunces',serif; font-weight:600; font-size:23px; margin:0 0 8px }
.success-card p{ font-size:13.5px; color:var(--muted); margin:0 0 18px; line-height:1.5 }
.success-details{ text-align:left; border:1px dashed var(--line); border-radius:var(--r-sm); padding:14px 16px; margin-bottom:20px }
.sc-row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:5px 0 }
.sc-row span{ color:var(--muted) }
.success-card button{
  width:100%; border:none; cursor:pointer; background:var(--ink); color:#fff;
  font-family:'Plus Jakarta Sans'; font-weight:800; font-size:15px; padding:14px; border-radius:var(--r-sm);
}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px);
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:14px;
  font-size:13px; font-weight:700; opacity:0; pointer-events:none;
  transition:all .3s ease; z-index:50; white-space:nowrap;
}
.toast.on{ opacity:1; transform:translate(-50%,0) }

/* ---------- Small screens ---------- */
@media (max-width:360px){
  .field-grid{ grid-template-columns:1fr }
  .field-wide{ grid-column:auto }
}