/* Scroggy's DopaDash — the bits Dopamart has no use for: the food-icon sky,
   restaurant cards, the menu page, the option sheet, delivery scheduling and
   the courier tracker. Everything else comes from /shared/css/base.css. */

/* ===== sunset sky with a still wallpaper of line-art takeaway =========== */
/* Near-solid charcoal. The old build stacked two wide radial "sun" gradients
   over a tall travelling linear one, which is what made it read as a sunset
   rather than a wall. Now it is one flat fill, one hairline vertical lift, and
   a single small halo behind the mascot so he doesn't sit flush against it.
   The sky-shift animation is dropped with it — there is nothing left to move. */
.sunset-sky{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--sky-1);
}
/* the copy side gets a soft scrim so white type keeps its contrast wherever
   the sky animation happens to be — it fades out well before the mascot */
.sky-scrim{position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(100deg,
    var(--sky-scrim) 0%, var(--sky-scrim) 26%, transparent 62%);
}
/* The repeating food icons: ONE layer, ONE size, perfectly still — wallpaper
   behind Scroggy, never chrome. Masked so it fades under the header and again
   at the horizon. */
.food-wall{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:url("../img/food-tile.svg") repeat;
  background-size:260px 260px; opacity:.42;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 80%,transparent 100%);
}
/* cloud banks reuse base.css's .sky-clouds, just recoloured by the tokens */
.hero .sky-clouds{z-index:3}
.hero-spiral{z-index:4}
.hero-inner{z-index:5}
.hero .marquee{z-index:5}
.spiral-line{stroke:#fff; opacity:.75; stroke-width:3.2}
.spiral-glow{stroke:var(--spiral-glow); opacity:.30; stroke-width:16}
/* Type on the solid light coral (#ff7e4b). White is 2.5:1 and the creamy
   yellow 1.8:1 here — below AA even at headline sizes, so hero strings keep
   their text-shadow and stay short. */
.hero h1, .hero p, .hero .eyebrow{color:#fff; text-shadow:0 2px 10px rgba(48,6,2,.30)}
.hero h1 em{color:#ffd680; font-style:normal}
.hero .eyebrow{color:#ffd680; text-shadow:0 1px 8px rgba(48,6,2,.40)}
.hero p{color:#fff}
/* a thick creamy-yellow rule across the hero's top edge — mirrors the marquee
   at the hero's feet and sets the wall off from the header */
.hero{border-bottom:0; border-top:12px solid var(--accent)}
/* the mascot is a wide landscape plate — Scroggy driving the loaded car —
   so it needs more width than the shared portrait default to carry the band */
.hero-art{width:min(46vw,620px); filter:drop-shadow(0 16px 26px rgba(90,10,30,.42))}
/* base.css narrows the art at 900px and again at 640px; this file loads after
   it, so those widths are restated here in proportion to the wider plate */
@media (max-width:900px){.hero-art{width:240px}}
@media (max-width:640px){.hero-art{width:min(80vw,340px)}}
/* same reason in the order-placed dialog: 150px is sized for a portrait */
.celebrate-card img{width:220px}

/* ===== restaurant cards ================================================== */
.vendor-card .card-media{aspect-ratio:16/10}
/* In the combined filtered grid, kitchens sit inside the dish feed — give
   them a yellow halo and a Restaurant pill so they read as places, not plates */
.mixed .vendor-card{outline:2px solid var(--accent); outline-offset:-2px}
.badge-rest{align-self:flex-start; background:var(--accent); color:#2b1405;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px}
.vendor-meta{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12px; color:var(--muted)}
.vendor-meta b{color:var(--paper)}
.eta-pill{display:inline-flex; align-items:center; gap:5px; background:var(--accent);
  color:#fff; font-weight:700; font-size:11.5px; padding:3px 9px; border-radius:999px}
.fee-free{color:#1a7f3c; font-weight:700}
.closed-tag{position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(255,255,255,.72); font-family:var(--display); font-size:20px}
/* a creamy-yellow pill, so its label is the dark ink — literals, because
   --gold is surface-aware and resolves to the deep orange inside a panel */
.promo-strip{background:#ffd27d; color:#2b1405; font-weight:700;
  font-size:11.5px; padding:4px 12px; border-radius:999px; display:inline-block}

/* ===== restaurant (menu) page ============================================ */
.vendor-hero{position:relative; z-index:2; border-radius:var(--r-panel); overflow:hidden;
  margin:18px 0 6px; background:var(--media-bg); border:1px solid var(--line)}
.vendor-hero img{width:100%; height:clamp(150px,26vw,290px); object-fit:cover}
.vendor-hero-body{padding:18px 20px 20px}
.vendor-hero h1{font-family:var(--display); font-weight:400; line-height:1.1;
  font-size:clamp(26px,4vw,44px); margin:0 0 6px}
.vendor-hero .tagline{color:var(--muted); margin:0 0 12px; font-style:italic}
.vendor-stats{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:13.5px; color:var(--muted)}
.vendor-stats b{color:var(--paper)}

.menu-nav{position:sticky; top:64px; z-index:20; display:flex; gap:8px; padding:12px 0;
  background:color-mix(in srgb,var(--ink) 94%,transparent); backdrop-filter:blur(8px);
  overflow-x:auto; scrollbar-width:none}
.menu-nav::-webkit-scrollbar{display:none}
.menu-section{position:relative; z-index:2; padding:8px 0 26px}
.menu-section h2{font-family:var(--display); font-weight:400;
  font-size:clamp(20px,2.6vw,30px); margin:0 0 12px}
.menu-list{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.dish{display:flex; gap:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:13px; text-align:left; width:100%;
  transition:border-color .15s, transform .15s, box-shadow .15s}
.dish:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow)}
.dish-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.dish-name{font-weight:700; font-size:15px; color:var(--paper); line-height:1.3}
.dish-desc{font-size:12.5px; color:var(--muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.dish-foot{display:flex; align-items:baseline; gap:8px; margin-top:auto; padding-top:5px}
.dish-price{font-family:var(--display); font-size:19px; color:var(--accent)}
.dish-was{font-size:12px; color:var(--muted); text-decoration:line-through}
.dish-tags{display:flex; gap:5px; font-size:11px; color:var(--muted)}
.dish-thumb{width:96px; height:96px; flex:none; border-radius:10px; object-fit:cover;
  background:var(--media-bg)}
.dish-noimg{width:96px; height:96px; flex:none; border-radius:10px; display:grid;
  place-items:center; font-size:40px; background:var(--media-bg)}
.pop-tag{background:var(--accent); color:#fff; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:999px}

/* ===== option sheet (size / extras / instructions) ======================= */
.sheet{position:fixed; inset:0; z-index:84; display:none; place-items:end center;
  background:var(--scrim-2); padding:0; overflow:hidden; overscroll-behavior:contain}
.sheet.open{display:grid}
.sheet-card{position:relative; background:var(--ink); width:min(560px,100%);
  max-height:92vh; max-height:92dvh; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-panel) var(--r-panel) 0 0;
  box-shadow:var(--shadow); animation:sheet-up .22s ease}
/* fade, not slide — a stalled transform would leave the pinned
   "Add to order" button hanging below the bottom of the screen */
@keyframes sheet-up{from{opacity:.35} to{opacity:1}}
.sheet-hero{width:100%; height:190px; object-fit:cover; background:var(--media-bg)}
.sheet-body{padding:18px 20px 22px}
.sheet-body h2{font-family:var(--display); font-weight:400; font-size:28px; margin:0 0 4px}
.sheet-desc{color:var(--muted); font-size:14px; margin:0 0 14px}
.opt-group{border-top:1px solid var(--line); padding:14px 0 4px}
.opt-head{display:flex; align-items:baseline; gap:10px; margin-bottom:8px}
.opt-head h3{font-size:14px; font-weight:700; margin:0}
.opt-req{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent)}
.opt-hint{font-size:11.5px; color:var(--muted); margin-left:auto}
.opt-row{display:flex; align-items:center; gap:10px; padding:9px 11px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-control); margin-bottom:6px;
  background:var(--surface); transition:.15s}
.opt-row:hover{border-color:var(--accent)}
.opt-row input{accent-color:var(--accent); width:17px; height:17px; flex:none}
.opt-row .lab{flex:1; font-size:14px}
.opt-row .delta{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.opt-row.on{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.instr{border-top:1px solid var(--line); padding:14px 0 0}
.instr label{display:block; font-size:14px; font-weight:700; margin-bottom:6px}
.instr textarea{width:100%; resize:vertical; min-height:64px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-control); padding:10px 12px;
  font-family:inherit; font-size:14px; color:var(--paper); outline:0}
.instr textarea:focus{border-color:var(--accent)}
.instr .count{font-size:11.5px; color:var(--muted); text-align:right; margin-top:4px}
/* pinned to the bottom of the sheet's own scroller: however many option groups
   a dish has, "Add to order" is on screen the moment the sheet opens */
.sheet-foot{position:sticky; bottom:0; z-index:3; display:flex; gap:12px; align-items:center;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:var(--ink); border-top:1px solid var(--line)}
.sheet-qty{display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:999px; padding:5px 10px}
.sheet-qty button{width:28px; height:28px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--paper); font-weight:700; line-height:1}
.sheet-add{flex:1; justify-content:center}

/* ===== delivery scheduling inside the shared payment sheet =============== */
.deliv{border:1px dashed var(--line); border-radius:var(--r-control);
  padding:12px 14px; margin:0 0 14px}
.deliv h3{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 8px}
.when-row{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap}
.when-chip{border:1px solid var(--line); background:var(--surface); color:var(--paper);
  border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700}
.when-chip[aria-pressed="true"]{background:var(--accent); color:#fff; border-color:var(--accent)}
.deliv select, .deliv input, .deliv textarea{width:100%; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-control); padding:9px 11px;
  font-family:inherit; font-size:14px; color:var(--paper); outline:0; margin-bottom:8px}
.deliv select:focus, .deliv input:focus, .deliv textarea:focus{border-color:var(--accent)}
.deliv textarea{resize:vertical; min-height:54px}
.tip-row{display:flex; gap:6px; flex-wrap:wrap}
.tip-chip{border:1px solid var(--line); background:var(--surface); color:var(--paper);
  border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:700}
.tip-chip[aria-pressed="true"]{background:var(--accent); color:#fff; border-color:var(--accent)}

/* ===== courier tracker =================================================== */
.track{position:relative; z-index:2; padding:26px 0 60px; max-width:720px}
.track h1{font-family:var(--display); font-weight:400; font-size:clamp(26px,4vw,42px); margin:0 0 4px}
.track-sub{color:var(--muted); margin:0 0 22px}
.track-bar{height:12px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); overflow:hidden; margin-bottom:22px}
.track-bar i{display:block; height:100%; background:var(--accent); transition:width 1s linear}
.steps{display:grid; gap:0; margin:0 0 26px}
.step{display:flex; gap:14px; padding:0 0 22px; position:relative}
.step:last-child{padding-bottom:0}
.step::before{content:""; position:absolute; left:13px; top:26px; bottom:0; width:2px;
  background:var(--line)}
.step:last-child::before{display:none}
.step.done::before{background:var(--accent)}
.step-dot{width:28px; height:28px; flex:none; border-radius:999px; display:grid;
  place-items:center; border:2px solid var(--line); background:var(--ink);
  font-size:14px; z-index:1}
.step.done .step-dot{border-color:var(--accent); background:var(--accent); color:#fff}
.step.now .step-dot{border-color:var(--accent); animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}
                 50%{box-shadow:0 0 0 9px transparent}}
.step-body h3{font-size:15px; margin:3px 0 2px}
.step-body p{margin:0; font-size:13px; color:var(--muted)}
.step.pending{opacity:.45}
.order-box{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-panel); padding:16px 18px}
.order-box h2{font-family:var(--display); font-weight:400; font-size:22px; margin:0 0 10px}

/* the Hurry button: an officially sanctioned way to bully the timeline.
   Every push doubles the clock; the label escalates with your shame. */
.track-hurry{display:flex; align-items:center; justify-content:center; gap:12px;
  margin:-6px 0 24px}
.hurry{min-height:48px; padding:0 26px; font:inherit; font-weight:700; font-size:15px;
  background:#ffd27d; color:#2b1405; border:1px solid rgba(43,20,5,.38);
  border-radius:999px; cursor:pointer; transition:transform .08s}
.hurry:hover{background:#ffe3ab}
.hurry:active{transform:scale(.95)}
.hurry-mult{font-family:var(--display); font-size:24px; color:#c2410c}
.hurry-live{font-size:.55em; vertical-align:middle; color:#c2410c;
  background:#fff; border-radius:999px; padding:2px 10px}
.ob-line{display:flex; justify-content:space-between; gap:12px; padding:7px 0;
  border-bottom:1px solid var(--line); font-size:14px}
.ob-line:last-of-type{border-bottom:0}
.ob-line .ob-sub{display:block; font-size:11.5px; color:var(--muted)}
.ob-total{display:flex; justify-content:space-between; font-weight:700; padding-top:10px;
  margin-top:6px; border-top:2px solid var(--line); font-size:16px}
.courier{display:flex; align-items:center; gap:14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-panel); padding:14px 16px; margin-bottom:20px}
.courier-av{width:52px; height:52px; border-radius:999px; background:var(--accent);
  display:grid; place-items:center; font-size:26px; flex:none}
.courier b{display:block; font-size:15px}
.courier span{font-size:12.5px; color:var(--muted)}

/* ===== reviews =========================================================== */
.reviews{position:relative; z-index:2; padding:6px 0 44px}
.reviews h2{font-family:var(--display); font-weight:400;
  font-size:clamp(20px,2.6vw,30px); margin:0 0 4px}
.rev-summary{display:flex; align-items:center; gap:16px; margin:10px 0 18px; flex-wrap:wrap}
.rev-big{font-family:var(--display); font-size:46px; color:var(--accent); line-height:1}
.rev-bars{flex:1; min-width:220px; max-width:360px; display:grid; gap:3px}
.rev-bar{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted)}
.rev-bar i{flex:1; height:7px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); overflow:hidden; font-style:normal}
.rev-bar i span{display:block; height:100%; background:var(--gold)}
.rev-list{display:grid; gap:10px; max-width:820px}
.rev{background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-panel); padding:12px 15px}
.rev-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.rev-who{font-weight:700; font-size:13.5px}
.rev-when{color:var(--muted); font-size:11.5px}
.rev-stars{color:var(--gold); font-size:12px; letter-spacing:1px}
.rev-text{margin:6px 0 0; font-size:14.5px; line-height:1.55; overflow-wrap:anywhere}
.rev-mine{border-left:3px solid var(--accent)}

@media (max-width:640px){
  .menu-list{grid-template-columns:1fr}
  .dish-thumb,.dish-noimg{width:76px; height:76px}
  .menu-nav{top:56px}
}

/* Unsplash attribution — required wherever one of their photos runs large */
.photo-credit{margin:12px 0 0; font-size:11.5px; color:var(--muted)}
.photo-credit a{color:var(--accent); text-decoration:underline}
.sheet-credit{margin:-8px 0 14px}

@media (max-width:760px){
  /* the sheet's own controls, sized for thumbs */
  .sheet-add{min-height:52px}
  .sheet-qty button{width:44px; height:44px; font-size:18px}
  .opt-row{padding:12px 12px; min-height:48px}
  .opt-row input{width:20px; height:20px}
  .instr textarea, .deliv input, .deliv select, .deliv textarea{font-size:16px}
  .when-chip, .tip-chip{min-height:44px; display:inline-flex; align-items:center}
  .menu-nav .chip{min-height:44px}
  .dish{min-height:96px}
}

/* ===== reaching the whole menu ==========================================
   DopaDash carries twenty cuisines where the shared rail was drawn for a
   handful. Rather than wrapping or a toggle, the rail is ONE line that loops
   forever: renderRail() lays the chip set out twice and a scroll listener
   teleports the position by one set-width at each seam, so swiping right or
   left never reaches an end — every chip is always reachable. */
.cat-rail{scroll-snap-type:none}
.chip-set{display:flex; gap:8px; padding-right:8px; flex:none}

/* The shared header wraps below 760px, but this site's brand word and tool
   row are wider than Dopamart's, so between 761 and 860 the search box and
   the Order button ran off the right edge — the page's only horizontal
   overflow. Start wrapping earlier. */
@media (max-width:860px){
  .header-inner{flex-wrap:wrap; row-gap:10px; column-gap:12px; padding:10px 0}
  .header-tools{margin-left:auto}
  .searchbar{order:10; flex:1 1 100%}
  .searchbar input{font-size:16px}
}

/* ===== add-on suggestions (cart drawer + payment sheet) ==================
   Both hosts are cream panels, so these inherit the panel ink tokens. Kept
   deliberately quieter than a dish card: this is a nudge, not the menu. */
.addon-strip{margin:18px 0 4px; padding-top:14px; border-top:1px solid var(--line)}
.addon-strip h4{margin:0 0 10px; font-family:var(--display); font-weight:400;
  font-size:17px; line-height:1.3; color:var(--paper)}
.addon-row{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px}
.addon{position:relative; display:flex; flex-direction:column; border:1px solid var(--line);
  border-radius:var(--r-panel); overflow:hidden; background:var(--ink)}
.addon>img, .addon>.card-noimg{width:100%; height:72px; object-fit:cover; background:var(--media-bg)}
.addon>.card-noimg{display:grid; place-items:center; font-size:30px}
.addon-deal{position:absolute; top:6px; left:6px; padding:2px 6px; border-radius:var(--r-control);
  background:var(--deal); color:var(--on-deal); font-size:11px; font-weight:700}
.addon-body{display:flex; flex-direction:column; gap:5px; padding:8px 9px 9px; flex:1}
.addon-name{font-size:12px; font-weight:700; line-height:1.35; color:var(--paper);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.addon-price{display:flex; align-items:baseline; gap:6px; margin-top:auto;
  font-family:var(--display); font-size:15px; color:var(--accent)}
.addon-price s{font-family:var(--body); font-size:11px; color:var(--muted)}
.addon-add{width:100%; padding:7px 8px; border:0; border-radius:var(--r-control);
  background:var(--accent); color:#fff; font:inherit; font-size:12px; font-weight:700; cursor:pointer}
.addon-add:hover{filter:brightness(1.06)}
@media (max-width:480px){
  .addon-row{grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
  .addon>img, .addon>.card-noimg{height:62px}
  .addon-add{min-height:38px}
}