/* GoForth Zaika — single stylesheet.
   Mobile-first: virtually every visitor arrives by scanning a QR with a phone.

   PALETTE is the ZAIKA brand off the printed flyer — maroon #762b2b and gold
   #d89820, both sampled from it, on warm cream. Not the navy of the GoForth
   Elevate corporate logo: that belongs to the tourism company. The page was
   briefly built in navy by mistake on 5 Aug 2026; the flyer is the authority
   for this business. Do not introduce a fourth hue — maroon + gold + cream is
   the whole system, and the food photography carries the appetite. */

:root{
  --maroon:#762b2b;
  --maroon-deep:#431414;
  --maroon-soft:#8f3636;
  --gold:#d89820;
  --gold-bright:#f0b93c;
  --gold-pale:#f7e3b0;
  --cream:#fffaf2;
  --cream-2:#f8eee0;
  --ink:#2b1f1c;
  --ink-soft:#6d5b54;
  --line:#ecdcc7;
  --veg:#127a3c;
  --nonveg:#a11b1b;
  --radius:16px;
  --shadow:0 10px 30px rgba(90,32,32,.12);
  --shadow-lg:0 18px 48px rgba(90,32,32,.20);
  --bar-h:74px;
}

*{box-sizing:border-box}
/* The topbar is sticky and 80px tall, so an in-page jump (#menu from the hero
   CTA) lands the section underneath it without this. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
/* A class that sets `display` outranks the UA sheet's [hidden]{display:none},
   so the cart and checkout panels paint on load without this. Every panel here
   is shown/hidden by the `hidden` attribute, so the rule is load-bearing. */
[hidden]{display:none!important}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  overflow-wrap:break-word;
}
img{max-width:100%;display:block}
h1,h2,h3{margin:0 0 .4em;line-height:1.16;font-weight:800;letter-spacing:-.015em}
h1,h2,.brand-zaika,.foot-brand{font-family:Georgia,"Times New Roman",serif}
p{margin:0 0 .8em}
a{color:inherit}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 18px}
.w-full{width:100%}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:0;border-radius:999px;padding:.9rem 1.6rem;
  font:inherit;font-weight:700;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#3d2400;box-shadow:0 6px 18px rgba(216,152,32,.42);
}
.btn-gold:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.btn-wa{background:#25d366;color:#06331a}

/* ---------- top bar ---------- */
/* Maroon bar with the white globe, exactly as the lockup appears on the flyer.
   The wordmark is LIVE TEXT, not an image: the flyer's own logo sits on a
   photographic background and cannot be cut out cleanly, and text stays crisp
   at every size and screen density. */
/* The bar carries the biryani photo behind a heavy maroon wash — the same shot
   as the hero, so the two read as one continuous field rather than a flat strip
   sitting on a photo. The wash is graded: near-opaque on the left where the
   white globe and wordmark sit, lighter on the right where only the solid gold
   Call button lands, so the food is visible without ever fighting the text.
   `background-color` is the fallback if the photo 404s after a bad upload. */
.topbar{
  position:sticky;top:0;z-index:60;
  background-color:var(--maroon-deep);
  background-image:
    linear-gradient(90deg,rgba(67,20,20,.95) 0%,rgba(67,20,20,.88) 45%,rgba(67,20,20,.74) 100%),
    linear-gradient(180deg,rgba(118,43,43,.30),rgba(67,20,20,.52)),
    url("../img/hero-smoke.jpg");
  background-size:cover,cover,cover;
  background-position:center,center,center 62%;
  background-repeat:no-repeat;
  border-bottom:2px solid var(--gold);box-shadow:0 3px 16px rgba(67,20,20,.28);
}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:78px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;min-width:0}
/* The globe is thin white line art; over a photograph it needs its own shadow
   to hold an edge, which a flat maroon bar did not require. */
.brand-mark{width:auto;height:54px;flex:0 0 auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.brand-txt{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand-go{
  font-family:Georgia,"Times New Roman",serif;font-size:1.34rem;font-weight:700;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.brand-zaika{
  font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-size:1.26rem;color:var(--gold-bright);margin-top:.1em;letter-spacing:.02em;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.topbar-call{
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;flex:0 0 auto;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  border-radius:999px;padding:.42rem 1rem;
  font-size:.9rem;font-weight:800;color:#3d2400;
}
.topbar-call svg{width:16px;height:16px;fill:currentColor}

/* ---------- hero ---------- */
.hero{position:relative;color:var(--cream);text-align:center;padding:3rem 0 3.4rem;overflow:hidden}
/* A clay pot under a column of steam, behind a maroon wash.
   The wash is LIGHTER than the flyer-era one it replaces (.72→.86→.96 became
   .58→.80→.94): that weight existed to hide a low-resolution flyer crop, and
   hiding a 4224 px photograph of rising steam would be throwing away the one
   image on this page that makes someone hungry before they have read a word.
   The gradient still deepens towards the bottom, which is where the paragraphs
   and the status line sit and where contrast actually has to hold. */
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(67,20,20,.42) 0%,rgba(67,20,20,.72) 46%,rgba(67,20,20,.93) 100%),
    radial-gradient(85% 55% at 50% 4%,rgba(216,152,32,.22),transparent 66%),
    url("../img/hero-smoke.jpg") center 34%/cover no-repeat;
}
/* Phones get a 3:4 cut of the same photograph. The landscape file cover-cropped
   into a portrait box zooms past the pot entirely — see the note in
   extract-images.py. */
@media(max-width:759px){
  .hero-bg{
    background-image:
      linear-gradient(180deg,rgba(67,20,20,.42) 0%,rgba(67,20,20,.72) 46%,rgba(67,20,20,.93) 100%),
      radial-gradient(85% 55% at 50% 4%,rgba(216,152,32,.22),transparent 66%),
      url("../img/hero-smoke-portrait.jpg");
    background-position:center,center,center 22%;
    background-size:cover,cover,cover;
    background-repeat:no-repeat;
  }
}
.hero-in{position:relative}
.hero-kicker{
  display:inline-block;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#3d2400;font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.42rem 1.05rem;border-radius:999px;margin:0 0 1.1rem;
  box-shadow:0 6px 18px rgba(216,152,32,.35);
}
.hero-title{font-size:clamp(2.4rem,10.5vw,4rem);margin:0;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-title em{color:var(--gold-bright);font-style:italic}
.hero-tag{
  max-width:34rem;margin:.9rem auto 1rem;color:#f2e6d6;font-size:1.02rem;
}
/* The second line does the selling; it is set slightly smaller and softer so
   it reads as a continuation rather than competing with the first. */
.hero-tag-2{
  color:var(--gold-pale);font-size:.97rem;font-style:italic;
  margin-bottom:1.4rem;max-width:33rem;
}
.hero-facts{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;
  margin:0 0 1rem;padding:0;font-size:.9rem;
}
.hero-facts li{
  background:rgba(255,255,255,.09);border:1px solid rgba(247,227,176,.22);
  border-radius:999px;padding:.34rem .95rem;
}
.hero-facts strong{color:var(--gold-pale)}
/* The last-order chip has NO styling of its own, and that is deliberate. It
   was briefly solid gold among the glass ones (10 Sep 2026) and the client had
   it toned down the next day: a deadline shouted at someone who has not
   ordered yet reads as pressure, not as service. It sits in the row as one
   more fact about the kitchen. */
.hero-status{font-size:.9rem;color:var(--gold-pale);margin:0 0 1.4rem;min-height:1.2em}
/* Open/closed dot. Only the DOT carries the colour — the sentence stays pale
   gold, because bright red body text on the hero photo reads as an error
   message rather than opening hours.
   Colour is never the only signal: the line says "Open now" / "Closed right
   now" in words, so it still works for a colour-blind reader and in the
   high-contrast modes that flatten backgrounds.
   Both are lifted for legibility against the dark maroon wash — the #127a3c
   green and #a11b1b red used elsewhere are tuned for cream surfaces and go
   muddy here. */
.status-dot{display:inline-block;width:.58em;height:.58em;border-radius:50%;
            margin-right:.45em;background:currentColor}
.hero-status.is-open .status-dot{background:#3ad880;box-shadow:0 0 0 3px rgba(58,216,128,.22)}
.hero-status.is-closed .status-dot{background:#ff7f72;box-shadow:0 0 0 3px rgba(255,127,114,.2)}
.hero-cta{padding:1rem 2.4rem;font-size:1.05rem}

/* ---------- section headings ---------- */
.sec-head{text-align:center;margin:0 auto 1.8rem;max-width:640px}
.eyebrow{
  color:var(--gold);font-weight:800;font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 .35rem;
}
.sec-head h2{font-size:clamp(1.75rem,6vw,2.3rem);color:var(--maroon);margin:0}
.sec-head h2::after{
  content:"";display:block;width:64px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright));margin:.7rem auto 0;
}
.sec-lead{color:var(--ink-soft);margin-top:1rem}
.menu{padding:3rem 0 2rem}
.loading{text-align:center;color:var(--ink-soft)}

/* ---------- menu cards ---------- */
.menu-grid{display:grid;gap:1.4rem}
@media(min-width:760px){.menu-grid{grid-template-columns:repeat(2,1fr)}}
.card{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;min-width:0;
  transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

/* THE PHOTO IS THE PRODUCT. It runs the full width of the card, 16:10, with
   the name and description underneath — the pattern every food-ordering app
   converged on, because the picture is what makes someone hungry and the text
   only confirms the decision the picture already made.

   The previous small-square-beside-the-text layout existed because the tiles
   were ~245 px crops off the printed flyer and went visibly soft at any real
   size. Every dish now has professional photography (4368x2448 and up, 5 Aug
   2026) rendered to 1200x750, so at 358 CSS px on a 390 px phone the browser
   is still downsampling more than 3x. Nothing on this page is upscaled. */
.card-photo{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:var(--cream-2);
}
.card-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
/* A slow push-in on hover. Desktop only in effect — a phone has no hover — and
   deliberately small: food photography swims if you scale it hard. */
.card:hover .card-photo img{transform:scale(1.045)}
/* Scrim along the bottom so the veg mark holds its edge over a bright photo
   without needing a heavy chip behind it. */
.card-photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(180deg,rgba(24,10,10,0),rgba(24,10,10,.55));
}
.card-head{padding:.95rem 1.05rem .1rem}
.card-name{
  margin:0 0 .3rem;color:var(--maroon);font-size:1.22rem;line-height:1.2;
}
/* The tag sits ON the photo, bottom-left, above the scrim. */
.card-tag{
  position:absolute;left:.75rem;bottom:.7rem;z-index:2;
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(255,252,246,.95);border:1px solid rgba(255,255,255,.5);
  border-radius:999px;padding:.2rem .62rem;
  font-size:.68rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--nonveg);
  box-shadow:0 3px 10px rgba(0,0,0,.28);
}
.card-tag.is-veg{color:var(--veg)}
.dot{
  flex:0 0 11px;width:11px;height:11px;border-radius:3px;
  border:2px solid currentColor;display:inline-flex;align-items:center;justify-content:center;
}
.dot::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor}
.card-desc{font-size:.88rem;color:var(--ink-soft);margin:0;line-height:1.5}
/* What comes free with the dish. Green rather than the maroon/gold pair,
   because it is the one thing on a card that is not about what you pay —
   and it should catch the eye on the way down to the prices. */
/* Styled as a note on a printed menu, not as an interface chip.
   What it used to be — a mint-green fully-rounded pill with a 🥗 — read as
   western for three compounding reasons, all fixed here:
     · the emoji is a western garden salad, drawn in California, and it renders
       differently on Samsung and as a blank box on some older Androids;
     · a fully-rounded lozenge is app convention, the shape software uses for
       "Beta" or "New";
     · the green was borrowed from the veg/non-veg dot, where it means something
       specific, and belongs to nothing else on this page.
   Now: parchment and gold from the flyer's own palette, squared corners, an
   italic serif, and a DRAWN coriander sprig — the leaf the chutney is actually
   made from — which inherits currentColor and looks the same on every phone. */
.card-includes{
  display:inline-flex;align-items:center;gap:.42rem;margin:.6rem 0 0;
  background:linear-gradient(180deg,#fdf4e2,#f7ead2);
  border:1px solid #e4cea3;border-radius:4px;
  padding:.26rem .68rem .26rem .52rem;
  font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-size:.84rem;font-weight:400;color:#7a5600;
}
.card-includes-ico{width:13px;height:13px;color:#b8860b;flex:none;display:block}

.sizes{margin-top:.75rem}
.size{
  display:flex;align-items:center;gap:.8rem;padding:.66rem 1rem;
  border-top:1px solid #f0e6d6;
}
.size-name{flex:1;min-width:0;font-size:.96rem}
.size-name b{font-weight:700}
.size-name small{display:block;color:var(--ink-soft);font-size:.78rem}
.size-price{white-space:nowrap;font-weight:800;color:var(--maroon);font-size:1.02rem}
.size-was{
  display:block;font-weight:500;font-size:.76rem;color:var(--ink-soft);
  text-decoration:line-through;text-align:right;
}
.qty{display:flex;align-items:center;gap:.1rem}
.qty button{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--cream);color:var(--maroon);font-size:1.2rem;font-weight:800;
  line-height:1;cursor:pointer;
}
.qty button:hover{background:var(--cream-2)}
.qty-n{min-width:26px;text-align:center;font-weight:800}
.add{
  border:1.5px solid var(--maroon);background:var(--maroon);color:var(--cream);
  border-radius:999px;padding:.42rem 1.15rem;font:inherit;font-weight:700;font-size:.86rem;
  cursor:pointer;transition:filter .12s ease;
}
.add:hover{filter:brightness(1.18)}
.menu-note{
  margin:1.8rem auto 0;max-width:660px;text-align:center;font-size:.92rem;
  color:var(--ink-soft);background:#fdf4e2;border:1px dashed var(--gold);
  border-radius:14px;padding:.9rem 1.1rem;
}

/* ---------- why strip ---------- */
.why{padding:1rem 0 .5rem}
.why-grid{display:grid;gap:.9rem}
@media(min-width:720px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-card{
  background:linear-gradient(160deg,var(--maroon),var(--maroon-deep));
  color:var(--cream);border-radius:var(--radius);padding:1.2rem 1.3rem;
  border:1px solid rgba(247,227,176,.16);
}
.why-ico{font-size:1.6rem;display:block;margin-bottom:.35rem}
.why-card h3{font-size:1.05rem;color:var(--gold-pale);margin-bottom:.25rem}
.why-card p{margin:0;font-size:.9rem;color:#efe0cf}

/* ---------- testimonials ----------
   Cream cards on the cream ground, separated by a hairline rather than a fill,
   so they sit quietly between the maroon "why" cards above and the maroon bulk
   band below. Three coloured blocks in a row would fight each other.

   The whole section is written by app.js from menu.json and stays HIDDEN while
   there are none — an empty "What our customers say" heading is worse than no
   heading, and this business had taken no orders at all when the section was
   built. */
.quotes{padding:1.6rem 0 .4rem}
.quotes-grid{display:grid;gap:.9rem}
@media(min-width:720px){.quotes-grid{grid-template-columns:repeat(3,1fr)}}
.quote{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.15rem 1.25rem;
  display:flex;flex-direction:column;gap:.55rem;
}
/* The quote mark is decoration, so it is big, pale and behind the words. */
.quote-mark{font-family:Georgia,serif;font-size:2.4rem;line-height:.7;
            color:var(--gold);opacity:.35;height:.7em}
.quote blockquote{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink)}
.quote-stars{margin:0;font-size:.85rem;color:var(--gold);letter-spacing:.08em}
.quote-who{margin:0;font-size:.82rem;color:var(--ink-soft)}
.quote-who b{display:block;color:var(--ink);font-size:.9rem}

/* ---------- info ---------- */
/* ---------- bulk orders ----------
   A maroon band between two cream sections, so it reads as a different offer
   rather than another menu item. The hero photograph sits behind it at low
   opacity for warmth — same shot as the top of the page, which keeps the band
   from looking like a flat coloured box dropped into the layout. */
.bulk{
  margin:2.4rem 0 0;padding:2.4rem 0 2.6rem;color:var(--cream);
  background-color:var(--maroon-deep);
  background-image:
    linear-gradient(180deg,rgba(67,20,20,.93),rgba(67,20,20,.97)),
    url("../img/hero-smoke.jpg");
  background-size:cover,cover;background-position:center,center 40%;
  background-repeat:no-repeat;
  border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);
}
.bulk-in{text-align:center;max-width:640px}
.bulk h2{font-size:clamp(1.6rem,5.4vw,2.1rem);margin:0 0 .8rem;color:#fff}
.bulk .eyebrow{color:var(--gold-bright)}
.bulk-lead{margin:0 auto 1.2rem;color:#f2e6d6;font-size:1.02rem;max-width:34rem}
.bulk-lead strong{color:var(--gold-pale)}
/* The notice period is the one thing that ruins the order if it is missed, so
   it gets its own boxed line rather than sitting inside the paragraph. */
.bulk-cond{
  display:flex;gap:.7rem;align-items:flex-start;text-align:left;
  max-width:32rem;margin:0 auto 1.5rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(247,227,176,.26);
  border-radius:14px;padding:.85rem 1rem;font-size:.93rem;color:#f7ecdd;
}
.bulk-cond strong{color:var(--gold-bright)}
.bulk-ico{flex:0 0 auto;font-size:1.1rem;line-height:1.35}
.bulk-acts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.bulk-acts .btn{padding:.85rem 1.6rem}

.info{padding:2.2rem 0 3rem}
.info-grid{display:grid;gap:1rem}
@media(min-width:720px){.info-grid{grid-template-columns:repeat(3,1fr)}}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem}
.info-card h3{
  color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;margin-bottom:.5rem;
}
.info-card p{margin:0 0 .35rem;font-weight:600}
.info-sub{font-weight:400!important;color:var(--ink-soft);font-size:.86rem}

/* ---------- footer ---------- */
.foot{
  background:linear-gradient(180deg,var(--maroon),var(--maroon-deep));
  color:var(--gold-pale);text-align:center;font-size:.9rem;
  padding:2.2rem 0 calc(2rem + var(--bar-h));
}
.foot p{margin:0 0 .3rem}
/* The same white globe as the header — already white, so no filter. */
.foot-logo{height:62px;width:auto;margin:0 auto .9rem;opacity:.95}
.foot-brand{font-weight:700;color:#fff;font-size:1.3rem;margin-bottom:.1rem}
.foot-brand span{color:var(--gold-bright);font-style:italic}
.foot-tag{font-style:italic;color:var(--gold-pale);margin-bottom:.9rem}
.foot-fssai{opacity:.75;font-size:.82rem;margin-top:.6rem}

/* ---------- whatsapp float ---------- */
.wa-float{
  position:fixed;right:16px;bottom:calc(var(--bar-h) + 16px);z-index:70;
  width:52px;height:52px;border-radius:50%;background:#25d366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ---------- cart bar ---------- */
.cartbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:linear-gradient(180deg,var(--maroon-soft),var(--maroon));
  color:var(--cream);box-shadow:0 -6px 24px rgba(67,20,20,.34);
  padding-bottom:env(safe-area-inset-bottom);
}
.cartbar-in{display:flex;align-items:center;gap:.7rem;height:var(--bar-h)}
.cartbar-items{
  display:flex;align-items:center;gap:.5rem;background:none;border:0;
  color:var(--cream);font:inherit;font-weight:700;cursor:pointer;padding:0;
}
.cartbar-count{
  min-width:26px;height:26px;border-radius:999px;background:var(--gold);color:#3d2400;
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;padding:0 .4rem;
}
.cartbar-label{font-size:.95rem;text-decoration:underline;text-underline-offset:3px}
.cartbar-total{margin-left:auto;font-weight:800;color:var(--gold-pale)}
.cartbar-go{padding:.72rem 1.5rem}

/* ---------- sheets ---------- */
.sheet{
  position:fixed;inset:0;z-index:100;background:rgba(67,20,20,.62);
  display:flex;align-items:flex-end;justify-content:center;
}
@media(min-width:640px){.sheet{align-items:center}}
.sheet-box{
  background:var(--cream);width:100%;max-width:520px;max-height:92vh;
  border-radius:20px 20px 0 0;display:flex;flex-direction:column;overflow:hidden;
}
@media(min-width:640px){.sheet-box{border-radius:20px}}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.2rem;background:var(--maroon);color:var(--cream);flex:0 0 auto;
}
.sheet-head h2{margin:0;font-size:1.15rem}
.sheet-x{background:none;border:0;color:var(--gold-pale);font-size:1.8rem;line-height:1;cursor:pointer;padding:0 .2rem}
.sheet-body{padding:1rem 1.2rem;overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.sheet-foot{
  padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:#fff;flex:0 0 auto;
}

.line{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line-txt{flex:1;min-width:0}
.line-txt b{display:block;font-size:.95rem}
.line-txt small{color:var(--ink-soft);font-size:.82rem}
.line-amt{font-weight:800;color:var(--maroon);white-space:nowrap}
.cart-empty{text-align:center;color:var(--ink-soft);padding:1.5rem 0}

/* "Add a cold drink?" — sits under the order lines in the cart panel. Tinted
   and dashed so it reads as an offer rather than as something already in the
   order; a plain .line here would look like the customer had been charged for
   a drink they never picked. */
.upsell{
  display:flex;align-items:center;gap:.7rem;margin-top:.9rem;padding:.7rem;
  background:#fdf4e2;border:1px dashed var(--gold);border-radius:14px;
}
.upsell-img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.upsell-txt{flex:1;min-width:0}
.upsell-txt b{display:block;font-size:.92rem}
.upsell-txt small{color:var(--ink-soft);font-size:.8rem}
.upsell-add{flex:0 0 auto}

.sum-row{display:flex;justify-content:space-between;align-items:center;font-size:.95rem;margin-bottom:.5rem}
.sum-total{font-size:1.1rem}
.sum-total strong{color:var(--maroon);font-size:1.3rem}
/* GST. Sits UNDER the total and is deliberately quieter than it — indented,
   smaller, muted — so it reads as a breakdown of that number rather than
   another charge added to it. tabular-nums keeps the paise aligned with the
   figures above. */
.sum-tax{font-size:.82rem;color:var(--ink-soft);padding-left:.9rem;margin-top:-.15rem;
         font-variant-numeric:tabular-nums}
.sum-note{font-size:.8rem;color:var(--ink-soft);margin:.7rem 0 0;text-align:center}

/* "Add a biryani" — shown in place of the Checkout button, never beside it.
   A disabled button reads as broken (the UPI "I have paid" control taught us
   that), so the control goes and a sentence takes its spot. Amber, because it
   is a thing to do rather than an error the customer has made. */
.needs-main{margin:.7rem 0 0;padding:.6rem .7rem;text-align:center;
            font-size:.88rem;font-weight:600;line-height:1.35;
            color:#8a5a00;background:#fdf3dc;border:1px solid #f0d9a2;border-radius:8px}

/* The delivery line: a measured distance and its charge, or why there isn't
   one yet. .is-bad is the "outside the radius" case, which is a refusal and
   has to look different from the ordinary "we will confirm" note. */
.delivery-msg{margin:.2rem 0 .6rem;text-align:left}
.delivery-msg.is-bad{color:var(--maroon);font-weight:700}

.fld{display:block;margin-bottom:.9rem}
.fld>span{display:block;font-size:.85rem;font-weight:700;margin-bottom:.3rem}
.fld-hint{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:.3rem}


/* Sharing a location is optional, so the button is quiet — it must not compete
   with Place order, and it must not look like something the customer has to
   deal with before they can finish. */
/* The location step reads as part of the form, not as an optional extra —
   it sits in its own panel with a prompt above the button. */
.geo{
  margin:-.2rem 0 1rem;padding:.8rem .9rem;border-radius:12px;
  background:var(--cream-2,#f8eee0);border:1px solid var(--line);
  transition:border-color .2s ease,box-shadow .2s ease;
}
/* Applied when Place order was tapped before the step was dealt with. */
.geo.is-wanted{border-color:var(--gold);box-shadow:0 0 0 3px rgba(216,152,32,.22)}
.geo-ask{margin:0 0 .6rem;font-size:.85rem;font-weight:700;color:var(--ink)}
.geo-btn{
  font:inherit;font-size:.9rem;font-weight:800;cursor:pointer;width:100%;
  padding:.7rem .9rem;border-radius:10px;
  border:1px solid var(--maroon);background:#fff;color:var(--maroon);
}
.geo-btn:hover{background:#fff8ef}
.geo-btn[disabled]{opacity:.6;cursor:default}
/* Shown only once the location has failed or been refused: no online order,
   but a phone number rather than a dead end. */
.geo-fallback{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line)}
.geo-fallback p{margin:0 0 .6rem;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
.fld input,.fld textarea{
  width:100%;padding:.75rem .85rem;border:1px solid var(--line);border-radius:11px;
  font:inherit;background:#fff;color:var(--ink);
}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.fld textarea{resize:vertical}
.pay{border:1px solid var(--line);border-radius:12px;padding:.8rem;margin:0 0 .3rem;background:#fff}
.pay legend{font-size:.85rem;font-weight:700;padding:0 .3rem}
.pay-opt{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem .2rem;cursor:pointer}
.pay-opt input{margin-top:.35rem;accent-color:var(--maroon);width:18px;height:18px;flex:0 0 auto}
.pay-txt strong{display:block;font-size:.95rem}
.pay-txt small{color:var(--ink-soft);font-size:.82rem}
.form-msg{
  background:#fdecec;border:1px solid #f3b9b9;color:#8c1c1c;
  border-radius:10px;padding:.6rem .8rem;font-size:.88rem;margin:.6rem 0 0;
}
/* Same slot, different meaning: a nudge, not a refusal. Red would tell the
   customer they have done something wrong when they have not. */
.form-msg.is-notice{background:#fff5e0;border-color:#f0d9a0;color:#7a5600}

.sheet-done{padding:1.9rem 1.4rem calc(1.4rem + env(safe-area-inset-bottom));text-align:center}
.done-tick{
  width:64px;height:64px;border-radius:50%;background:var(--veg);color:#fff;
  font-size:2rem;line-height:64px;margin:0 auto .8rem;
}
.sheet-done h2{color:var(--maroon)}
.done-ref{font-size:.9rem;color:var(--ink-soft)}
.done-ref strong{color:var(--ink);letter-spacing:.04em}
.done-msg{font-size:.95rem;margin-bottom:1.2rem}

/* "Payment done", on a verified online payment only. Green because it is the
   one piece of good news on this screen the customer might otherwise doubt,
   and it sits above the sentence rather than inside it so a customer scanning
   the screen finds it without reading. */
.done-paid{
  /* width:fit-content rather than display:inline-block — a <p> centred by the
     parent's text-align still lays out as a full-width band otherwise, which
     reads as the live-location notice below it rather than as a tag. */
  width:fit-content;margin:.5rem auto .1rem;
  font-size:.9rem;font-weight:700;color:var(--veg);
  background:#eef7f0;border:1px solid #cfe6d6;border-radius:999px;
  padding:.3rem .9rem;
}
.sheet-done .btn{margin-bottom:.6rem}

/* The live-location notice on the confirmation screen.
   Quiet and green rather than loud: it reports something helpful that is
   already happening, so it must not read as a warning — but "Stop sharing" is
   a real control and is underlined so it plainly is one, not a label. */
.done-track{
  display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;
  font-size:.8rem;color:var(--ink-soft);line-height:1.45;text-align:center;
  background:#eef7f0;border:1px solid #cfe6d6;border-radius:10px;
  padding:.55rem .8rem;margin:0 0 .9rem;
}
.done-track button{
  background:none;border:0;padding:0;font:inherit;font-size:.8rem;
  color:var(--maroon);font-weight:700;text-decoration:underline;cursor:pointer;
}

/* ---------- legal pages (privacy.html, terms.html) ----------
   These two pages load NO JavaScript: no cart, no menu, no geolocation. So the
   whole page is this stylesheet, and package-upload.py has to cache-bust their
   <link> as well as index.html's — see _stamp_assets(). */

/* The footer reserves --bar-h of space for the cart bar, which never appears
   here. Without this the legal pages end in a 74px band of empty maroon. */
.legal-page .foot{padding-bottom:2.2rem}

.legal-head{
  background:linear-gradient(180deg,var(--maroon),var(--maroon-deep));
  color:var(--cream);text-align:center;padding:2.6rem 0 2.2rem;
  border-bottom:2px solid var(--gold);
}
.legal-head h1{font-size:clamp(1.9rem,6.5vw,2.5rem);margin:0;color:#fff}
.legal-date{font-size:.85rem;color:var(--gold-pale);margin:.7rem 0 0;font-style:italic}

.legal{
  max-width:720px;                 /* prose, not the 1080px the grids use */
  padding-top:2.4rem;padding-bottom:3rem;
}
.legal-lead{
  font-size:1.05rem;color:var(--ink);background:var(--cream-2);
  border-left:3px solid var(--gold);border-radius:0 10px 10px 0;
  padding:1rem 1.1rem;margin:0 0 2rem;
}
.legal h2{
  font-size:1.3rem;color:var(--maroon);margin:2.2rem 0 .7rem;
  padding-bottom:.4rem;border-bottom:1px solid var(--line);
}
.legal p{margin:0 0 1rem;color:var(--ink)}
.legal ul{margin:0 0 1.2rem;padding-left:1.1rem}
.legal li{margin-bottom:.55rem;color:var(--ink)}
.legal strong{color:var(--maroon)}
.legal a{color:var(--maroon);text-decoration:underline;text-underline-offset:2px}
.legal code{
  background:var(--cream-2);border:1px solid var(--line);border-radius:5px;
  padding:.1em .4em;font-size:.9em;
}
.legal-nav{
  display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;
  margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-weight:600;
}

.foot-legal{margin-top:.9rem;font-size:.85rem}
.foot-legal a{color:var(--gold-pale);text-decoration:underline;text-underline-offset:2px}
.foot-legal a:hover{color:var(--gold-bright)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}