/* ==========================================================================
   DISHLIA, the customer storefront and the restaurant portal.

   ★ DESIGN NOTES (why it looks like this)

   Weight, not decoration. The premium cues here are dark ink surfaces, a single
   saturated accent per vertical, generous radii, layered shadows, and tight
   display typography, all of which survive on a 3G phone because none of it is
   an image.

   NO WEB FONTS AND NO PHOTOGRAPHS, deliberately:
     * a font file is 100-300KB over a prepaid bundle, and a font that fails to
       load mid-swap is the single most common cause of a page that "looks
       broken";
     * stock photography on a store with no photography looks like a lie, and a
       wrong photo is worse than no photo.
   Instead each store gets a deterministic gradient built from its own id, 
   stable across reloads, distinct per store, and zero bytes on the wire.
   When real photos arrive, cover_image_url overrides it and nothing else
   changes.
   ========================================================================== */

:root {
  /* Ink */
  --ink:        #0B1310;
  --ink-2:      #141E1A;
  --ink-3:      #1E2B26;
  --paper:      #FFFFFF;
  --paper-2:    #F6F8F7;
  --paper-3:    #EDF1EF;

  /* Text */
  --text:       #0B1310;
  --text-2:     #5A6B64;
  --text-3:     #8B9A94;
  --on-dark:    #F2F6F4;
  --on-dark-2:  rgba(242, 246, 244, .62);

  /* Lines */
  --line:       #E4EAE7;
  --line-2:     #D3DCD8;
  --line-dark:  rgba(255, 255, 255, .10);

  /* Brand + verticals */
  --brand:      #FF5A1F;
  --brand-dk:   #E34A12;
  --brand-soft: #FFF1EA;
  /* ★ THE BRAND COLOUR AS TEXT.
     #FF5A1F on a pale background is about 3:1, which fails the 4.5:1 a small
     label needs, so labels and links that carry the brand use this darker
     shade instead. Same hue, same family, readable at 13px. */
  --brand-ink:  #B23E0C;
  --food:       #FF5A1F;
  --food-2:     #FFA31A;
  --grocery:    #0B9E6B;
  --grocery-2:  #5FD08A;
  --pharmacy:   #1E6BF1;
  --pharmacy-2: #55B4FF;

  --good:       #0B9E6B;
  --warn:       #E8890C;
  --bad:        #DC2B2B;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;

  --sh-1: 0 1px 2px rgba(11,19,16,.05), 0 1px 3px rgba(11,19,16,.04);
  --sh-2: 0 2px 6px rgba(11,19,16,.06), 0 8px 20px -6px rgba(11,19,16,.10);
  --sh-3: 0 4px 12px rgba(11,19,16,.08), 0 20px 40px -12px rgba(11,19,16,.18);
  --sh-brand: 0 8px 24px -6px rgba(255,90,31,.45);

  --shell: 1180px;
  --pad: 20px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--paper-2);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }

/* ==========================================================================
   HEADER
   ========================================================================== */

.appbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,19,16,.92);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.appbar-in {
  display: flex; align-items: center; gap: 14px;
  height: 64px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
.brand-name {
  font-size: 20px; font-weight: 800; letter-spacing: -.03em;
  color: var(--on-dark);
}
.brand-name i { font-style: normal; color: var(--brand); }

.loc {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 6px; padding: 7px 13px 7px 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--on-dark);
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
}
.loc svg { opacity: .75; flex-shrink: 0; }
.loc span { opacity: .55; font-weight: 500; }

/* ★ IT IS A BUTTON ON DESKTOP, SO IT HAS TO LOOK LIKE ONE.
   Same pill, same colours as before; the only additions are the affordances a
   control needs and a hover state strong enough to read on a dark bar. The
   "approx." marker and the chevron are inherited from the phone chip's rules
   below, restated here because the colour context is inverted. */
button.loc {
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.loc:hover, button.loc:focus-visible { background: rgba(255,255,255,.13); }
button.loc:active { transform: scale(.985); }
button.loc.is-empty { border-color: rgba(255,90,31,.55); }
button.loc.is-empty .loc-name { opacity: 1; font-weight: 700; color: #FFB08A; }
button.loc .loc-name { opacity: 1; }
button.loc .loc-approx {
  font-style: normal; font-weight: 500; font-size: 11.5px;
  opacity: .55; letter-spacing: 0;
}
button.loc .loc-chev { opacity: .6; flex: 0 0 auto; margin-left: -3px; }

.appbar-spacer { flex: 1; }

.appbar-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  color: var(--on-dark); font-size: 14px; font-weight: 600;
  border: 1px solid var(--line-dark);
  transition: background .15s ease, border-color .15s ease;
}
.appbar-link:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }
.appbar-link.is-solid { background: var(--brand); border-color: var(--brand); color: #fff; }
.appbar-link.is-solid:hover { background: var(--brand-dk); border-color: var(--brand-dk); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(55,222,140,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(55,222,140,0); }
  100% { box-shadow: 0 0 0 0 rgba(55,222,140,0); }
}
.hero p.sub {
  margin: 16px 0 0; max-width: 46ch;
  font-size: 16.5px; color: var(--on-dark-2); line-height: 1.55;
}

/* Search */
.searchbar {
  display: flex; align-items: center; gap: 11px;
  margin-top: 26px; padding: 7px 7px 7px 17px;
  background: var(--paper);
  border-radius: 999px;
  box-shadow: var(--sh-3);
  max-width: 620px;
}
.searchbar svg { color: var(--text-3); flex-shrink: 0; }
.searchbar input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font-size: 16px; padding: 12px 0; color: var(--text);
  outline: none;
}
.searchbar input::placeholder { color: var(--text-3); }
.searchbar button {
  border: 0; border-radius: 999px; padding: 13px 24px;
  background: var(--brand); color: #fff;
  font-weight: 700; font-size: 14.5px;
  box-shadow: var(--sh-brand);
  transition: transform .12s ease, background .15s ease;
}
.searchbar button:hover { background: var(--brand-dk); }
.searchbar button:active { transform: scale(.97); }
.door.is-on { border-color: transparent; box-shadow: var(--sh-3); }
.door.is-on::before {
  content: ""; position: absolute; inset: 0; opacity: .07;
  background: var(--door-g);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.sect { margin-top: 44px; }
.sect-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.sect-head h2 {
  margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.035em;
}
.sect-head p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.sect-more {
  font-size: 14px; font-weight: 650; color: var(--brand);
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.sect-more:hover { text-decoration: underline; }

/* Horizontal rail */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 260px; gap: 14px;
  overflow-x: auto; padding: 4px 4px 14px;
  margin: 0 -4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.rail::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   STORE CARD
   ========================================================================== */

.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: left;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }

.card-art {
  position: relative; height: 132px; overflow: hidden;
  background: var(--card-g, linear-gradient(135deg, var(--ink-3), var(--ink-2)));
}
.card-art img { width: 100%; height: 100%; object-fit: cover; }
.card-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(6,12,10,.62));
}
.card-mono {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 54px; font-weight: 800; letter-spacing: -.05em;
  color: rgba(255,255,255,.95);
  text-shadow: 0 3px 20px rgba(0,0,0,.35);
}
.card-mono::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120px 90px at 26% 18%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(150px 110px at 84% 82%, rgba(0,0,0,.20), transparent 72%);
}
.card-badges {
  position: absolute; left: 12px; bottom: 11px; right: 12px;
  display: flex; align-items: center; gap: 7px; z-index: 1;
}
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  background: rgba(255,255,255,.94); color: var(--ink);
  backdrop-filter: blur(6px);
}
.chip.v-food     { background: var(--food);     color: #fff; }
.chip.v-grocery  { background: var(--grocery);  color: #fff; }
.chip.v-pharmacy { background: var(--pharmacy); color: #fff; }
.chip.closed { background: rgba(11,19,16,.86); color: #fff; }
.chip.ghost  { background: rgba(255,255,255,.20); color: #fff; border: 1px solid rgba(255,255,255,.28); }

.card-body { padding: 14px 15px 16px; display: flex; flex-direction: column; flex: 1; }
.card-title {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.card-title h3 {
  margin: 0; font-size: 16.5px; font-weight: 750;
  letter-spacing: -.025em; line-height: 1.25;
}
.stars {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.stars svg { color: #FFB020; }

.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-top: 9px; font-size: 13px; color: var(--text-2);
}
.card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.card-meta b { color: var(--text); font-weight: 650; }

.card-items {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.card-items span {
  font-size: 12px; color: var(--text-2);
  background: var(--paper-2); border: 1px solid var(--line);
  padding: 4px 9px; border-radius: 999px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   STORE PAGE
   ========================================================================== */

.cover {
  position: relative; height: 230px; overflow: hidden;
  background: var(--card-g, linear-gradient(135deg, var(--ink-3), var(--ink-2)));
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,12,10,.30) 0%, transparent 34%, rgba(6,12,10,.72) 100%);
}
.cover-in {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding-bottom: 20px;
}
.cover h1 {
  margin: 0; font-size: clamp(26px, 4.6vw, 40px); font-weight: 800;
  letter-spacing: -.04em; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.cover-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-top: 11px; color: rgba(255,255,255,.94); font-size: 14px;
}
.cover-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); }

.store-body { padding-top: 26px; padding-bottom: 120px; }

.catnav {
  position: sticky; top: 64px; z-index: 40;
  display: flex; gap: 8px; overflow-x: auto;
  background: rgba(246,248,247,.94);
  backdrop-filter: blur(10px);
  padding: 12px 0;
  margin: -12px 0 8px;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.catnav::-webkit-scrollbar { display: none; }
.catnav button {
  flex-shrink: 0; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 13.5px; font-weight: 650; color: var(--text-2);
  transition: all .15s ease;
}
.catnav button:hover { border-color: var(--line-2); color: var(--text); }
.catnav button.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.menu-sect { margin-top: 30px; scroll-margin-top: 132px; }
.menu-sect > h2 {
  margin: 0 0 12px; font-size: 18.5px; font-weight: 750; letter-spacing: -.025em;
  display: flex; align-items: center; gap: 10px;
}
.menu-sect > h2::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.items {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 15px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r);
  text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.item:hover { border-color: var(--line-2); box-shadow: var(--sh-1); }
.item.is-out { opacity: .55; }
.item-main { flex: 1; min-width: 0; }
.item-main b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.item-main p {
  margin: 3px 0 0; font-size: 13px; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.item-price { margin-top: 7px; font-size: 15px; font-weight: 750; letter-spacing: -.02em; }
.item-price s { color: var(--text-3); font-weight: 500; margin-left: 6px; font-size: 13px; }
.item-pop {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-soft);
  padding: 2px 7px; border-radius: 6px;
}
.add-btn {
  flex-shrink: 0; min-width: 46px; height: 46px; padding: 0 15px;
  border-radius: 14px; border: 1px solid var(--brand);
  background: var(--brand-soft); color: var(--brand);
  font-size: 22px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  transition: all .14s ease;
}
.add-btn:hover { background: var(--brand); color: #fff; }
.add-btn:active { transform: scale(.94); }
.add-btn[disabled] { border-color: var(--line); background: var(--paper-2); color: var(--text-3); cursor: not-allowed; }

/* ==========================================================================
   CART BAR
   ========================================================================== */

.cartbar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 70; width: min(640px, calc(100% - 32px));
  display: none;
}
.cartbar.is-on { display: block; animation: rise .26s cubic-bezier(.2,.9,.3,1); }
@keyframes rise { from { transform: translate(-50%, 22px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

.cartbar-in {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px 13px 18px;
  background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 50px -12px rgba(11,19,16,.55);
  border: 1px solid rgba(255,255,255,.08);
}
.cartbar-count {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-weight: 800; font-size: 16px;
}
.cartbar-txt { flex: 1; min-width: 0; }
.cartbar-txt b { display: block; font-size: 15px; font-weight: 700; }
.cartbar-txt span { font-size: 12.5px; color: var(--on-dark-2); }
.cartbar button.go {
  border: 0; border-radius: 14px; padding: 14px 22px;
  background: var(--brand); color: #fff; font-weight: 750; font-size: 15px;
  white-space: nowrap;
  transition: background .15s ease, transform .12s ease;
}
.cartbar button.go:hover { background: var(--brand-dk); }
.cartbar button.go:active { transform: scale(.97); }
.cartbar button.go[disabled] { background: var(--ink-3); color: var(--text-3); cursor: not-allowed; }

/* ==========================================================================
   MODAL / SHEET
   ========================================================================== */

.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(6,12,10,.55);
  backdrop-filter: blur(3px);
  display: none;
}
.scrim.is-on { display: block; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed; z-index: 100; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(560px, 100%);
  max-height: 92vh; overflow-y: auto;
  background: var(--paper);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -20px 60px -10px rgba(11,19,16,.4);
  display: none;
}
.sheet.is-on { display: block; animation: up .3s cubic-bezier(.2,.9,.3,1); }
@keyframes up { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }

.sheet-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 14px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.sheet-head h2 { margin: 0; font-size: 19px; font-weight: 780; letter-spacing: -.03em; flex: 1; }
.x-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  display: grid; place-items: center; color: var(--text-2); flex-shrink: 0;
}
.x-btn:hover { background: var(--paper-2); color: var(--text); }
.sheet-body { padding: 18px 20px 24px; }

/* ==========================================================================
   THE PHONE FIELD: A COUNTRY AND A NUMBER, SIDE BY SIDE
   ==========================================================================
   Every phone box in the product is this shape. The selector is wide enough
   for "+260 Zambia" because a truncated country name on a phone is a country
   the customer guesses at, and the number gets the rest of the width. */
/* ★ THE HINT IS ON ITS OWN LINE, AND THE NUMBER GETS THE WIDTH IT NEEDS.
   Two failures were caught on a 390 px phone: a "+27 South Africa" label
   truncated to "+27 South Afri", and the hint running alongside the number box
   because the row was not a flex container at all. The country box is sized to
   the longest name in the list, the number takes what is left, and the hint is
   forced onto the next line whatever the container is. */
.phone-row { display: flex; gap: 8px; align-items: stretch; width: 100%; flex-wrap: nowrap; }
.phone-row .phone-cc {
  flex: 0 0 152px; min-width: 0;
  padding-left: 10px; padding-right: 2px;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}
/* ★ A PHONE NUMBER NEEDS ROOM FOR TWELVE DIGITS.
   The checkout's two-up grid hands half its width to each field, which left a
   number box about fifty pixels wide on a 390 px phone: the customer types a
   South African number and reads "08:" back. So the field that holds a phone
   number spans both columns, and the number box will not shrink below what a
   full E.164 number needs. */
.ck-field-wide { grid-column: 1 / -1; }
.phone-row .phone-num { flex: 1 1 auto; min-width: 148px; }
.phone-row + .hint, .phone-row ~ .hint { display: block; }
.field > .hint, .ck-field > .hint { display: block; }
@media (max-width: 400px) {
  .phone-row .phone-cc { flex-basis: 138px; font-size: 14.5px; }
}

/* ==========================================================================
   THE CHECKOUT SHEET
   ==========================================================================
   Modern and quiet: four cards on a light page, one heading each, and a bar at
   the foot holding the only two things a customer needs at that point, the
   total and the button. Every control is at least 44px tall, because the
   customer is holding the phone in one hand.

   The ids and class names the rest of the platform addresses are unchanged:
   #ck-place, #ck-totals, #ck-items, #ck-pin, #ck-zone, .radio input[name=pay].
   Only the dressing changed.
   ========================================================================== */

.ck-sheet { display: none; }
.ck-sheet.is-on { display: flex; flex-direction: column; overflow: hidden; }

.ck-head-txt { flex: 1; min-width: 0; }
.ck-head-txt h2 { margin: 0; }
.ck-head-sub {
  margin: 3px 0 0; font-size: 13px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ★ A PLAIN BLOCK COLUMN, NOT A GRID, AND min-height:0 IS LOAD-BEARING.
   This body is a flex child with a definite height, and a grid inside one is
   allowed to squeeze its own rows below their content when the column is
   taller than the space; on a phone that showed up as the order summary
   collapsing to two pixels with its content clipped out of sight. Block flow
   cannot do that, and the spacing is the same. min-height:0 lets the body
   itself scroll inside the sheet instead of pushing the head off the top. */
.ck-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 16px 16px 10px;
  background: var(--paper-2);
  display: block;
}

.ck-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 12px;
}
.ck-card:last-child { margin-bottom: 0; }
.ck-h {
  margin: 0 0 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
}

/* --- the folded summary ------------------------------------------------ */
.ck-sum { padding: 0; overflow: hidden; }
.ck-sum-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 15px 16px; background: none; border: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ck-sum-l, .ck-sum-r { display: inline-flex; align-items: center; gap: 9px; }
.ck-sum-l { font-weight: 650; font-size: 14.5px; }
.ck-sum-r { font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; color: var(--text-2); }
.ck-sum-btn:hover { background: var(--paper-2); }
.ck-caret { color: var(--text-3); transition: transform .18s ease; }
.ck-sum-btn[aria-expanded="true"] .ck-caret { transform: rotate(180deg); }
.ck-items { border-top: 1px solid var(--line); padding: 12px 16px 14px; }

/* --- fields ------------------------------------------------------------ */
.ck-field { margin-top: 14px; }
.ck-field > label {
  display: block; font-size: 12.5px; font-weight: 650;
  margin-bottom: 6px; color: var(--text-2);
}
.ck-opt { font-weight: 500; color: var(--text-3); }
.ck-2up { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .ck-2up { grid-template-columns: 1fr 1fr; } }

.ck-pin-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 16px; min-height: 48px;
  background: var(--paper); color: var(--brand-dk);
  border: 1.5px dashed var(--brand); border-radius: var(--r-md);
  font: inherit; font-weight: 650; font-size: 14.5px; cursor: pointer;
}
.ck-pin-btn:hover { background: var(--brand-soft); }
.ck-manual { margin-top: 14px; }
.ck-manual label { display: block; font-size: 12.5px; font-weight: 650; margin-bottom: 6px; color: var(--text-2); }
.ck-manual label + select { margin-bottom: 12px; }

/* --- payment cards, not a row of dots ---------------------------------- */
.ck-sheet .radio-row { grid-template-columns: 1fr; gap: 8px; }
.ck-sheet .radio {
  position: relative; padding: 14px 15px; min-height: 56px;
  border-radius: var(--r-md); align-items: center;
}
.ck-sheet .radio span { font-size: 14.5px; font-weight: 650; }
.ck-sheet .radio small { margin-top: 2px; }
.ck-sheet .radio input { order: 2; margin-left: auto; width: 19px; height: 19px; }

/* --- the bill ---------------------------------------------------------- */
.ck-bill .line-items { border-top: 0; margin-top: 0; }
.ck-bill .tr { padding: 7px 0; font-size: 15px; }
.ck-bill .tr.grand { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 11px; }
.ck-bill .tr.grand b { font-size: 17px; }
.tr-note { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }

.ck-body .pay-cur { margin-top: 0; }

/* --- the foot bar ------------------------------------------------------ */
.ck-foot {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 1px solid var(--line);
}
.ck-foot-l { display: flex; flex-direction: column; line-height: 1.15; }
.ck-foot-l span { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.ck-foot-l b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ck-foot .btn { flex: 1; margin: 0; }

.ck-fine {
  margin: 2px 2px 6px; font-size: 12px; line-height: 1.55;
  color: var(--text-3); text-align: center;
}
.ck-fine a { color: var(--text-2); text-decoration: underline; }

/* The await block lives inside the scrolling body and takes over it. */
.ck-body #ck-await { margin-top: 4px; }

/* ==========================================================================
   FORMS
   ========================================================================== */

.field { margin-bottom: 16px; }
.field > label {
  display: block; font-size: 13px; font-weight: 650;
  margin-bottom: 7px; letter-spacing: -.005em;
}
.field .hint { font-size: 12.5px; color: var(--text-2); margin-top: 6px; }
.input, .textarea, select.input {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--paper); font-size: 15.5px; font-family: inherit;
  color: var(--text); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(255,90,31,.13);
}
.textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.input.is-bad { border-color: var(--bad); }
input[type="tel"] { letter-spacing: .01em; }

.radio-row { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.radio {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border: 1.5px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--paper);
  cursor: pointer; transition: all .15s ease; font-size: 14.5px; font-weight: 600;
}
.radio:hover { border-color: var(--line-dark); }
.radio input { width: 17px; height: 17px; accent-color: var(--brand); flex-shrink: 0; }
.radio.is-on { border-color: var(--brand); background: var(--brand-soft); }
.radio small { display: block; font-weight: 500; color: var(--text-2); font-size: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 22px;
  border: 0; border-radius: var(--r-sm);
  background: var(--brand); color: #fff;
  font-size: 15.5px; font-weight: 750; letter-spacing: -.01em;
  transition: background .15s ease, transform .1s ease;
}
.btn:hover { background: var(--brand-dk); }
.btn:active { transform: scale(.99); }
.btn[disabled] { background: var(--line); color: var(--text-3); cursor: not-allowed; }
.btn.ghost { background: var(--paper-2); color: var(--text); border: 1px solid var(--line-2); }
.btn.ghost:hover { background: var(--paper-3); }
.btn.dark { background: var(--ink); }
.btn.dark:hover { background: var(--ink-3); }
.btn.sm { width: auto; padding: 11px 18px; font-size: 14px; }

/* ==========================================================================
   SUMMARY / TOTALS
   ========================================================================== */

.line-items { border-top: 1px solid var(--line); margin-top: 4px; }
.li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.li-qty {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--line);
  font-size: 13px; font-weight: 750;
}
.li-main { flex: 1; min-width: 0; }
.li-main b { display: block; font-size: 14.5px; font-weight: 620; }
.li-main span { font-size: 12.5px; color: var(--text-2); }
.li-amt { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.tr { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14.5px; }
.tr span { color: var(--text-2); }
.tr b.tr-soft { font-weight: 500; color: var(--text-3); font-size: 13px; }
.tr b { font-weight: 650; }
.tr.grand {
  margin-top: 10px; padding-top: 12px; border-top: 1.5px solid var(--ink);
  font-size: 19px; font-weight: 800; letter-spacing: -.03em;
}
.tr.grand span { color: var(--text); font-weight: 750; }

.note {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--r-sm);
  font-size: 13.5px; line-height: 1.5;
  background: var(--paper-2); border: 1px solid var(--line);
  color: var(--text-2);
}
.note svg { flex-shrink: 0; margin-top: 1px; }
.note.warn { background: #FFF8EC; border-color: #F6DFB4; color: #7A5410; }
.note.bad  { background: #FEF2F2; border-color: #F6C9C9; color: #8C1F1F; }
.note.good { background: #EDFBF4; border-color: #BFEBD7; color: #0A6B49; }
.note b { color: inherit; }

/* ==========================================================================
   EMPTY / LOADING
   ========================================================================== */

.empty {
  text-align: center; padding: 56px 20px;
  background: var(--paper); border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
}
.empty-icon {
  width: 62px; height: 62px; margin: 0 auto 16px;
  border-radius: 20px; display: grid; place-items: center;
  background: var(--paper-2); border: 1px solid var(--line);
  color: var(--text-3);
}
.empty h3 { margin: 0 0 6px; font-size: 17px; font-weight: 720; letter-spacing: -.02em; }
.empty p { margin: 0; font-size: 14px; color: var(--text-2); }

.sk {
  background: linear-gradient(100deg, var(--paper-3) 30%, #F7FAF8 50%, var(--paper-3) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r);
}
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.sk-card { height: 258px; }

/* ==========================================================================
   ORDER TRACKING
   ========================================================================== */

.track-hero {
  background: var(--ink); color: var(--on-dark);
  padding: 34px 0 42px; position: relative; overflow: hidden;
}
.track-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 300px at 20% 0%, rgba(255,90,31,.26), transparent 62%);
}
.track-hero-in { position: relative; z-index: 1; }
.track-code {
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
  color: var(--on-dark-2);
}
.track-hero h1 {
  margin: 10px 0 0; font-size: clamp(26px, 5vw, 40px);
  font-weight: 800; letter-spacing: -.04em;
}
.track-hero .sub { margin: 10px 0 0; color: var(--on-dark-2); font-size: 15.5px; }

.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin-top: 30px;
}
.step { position: relative; padding-top: 30px; text-align: center; }
.step::before {
  content: ""; position: absolute; top: 11px; left: 50%;
  width: calc(100% - 4px); height: 2px; background: rgba(255,255,255,.16);
}
.step:last-child::before { display: none; }
.step-dot {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink-3); border: 2px solid rgba(255,255,255,.24);
  display: grid; place-items: center; z-index: 1;
}
.step.is-done .step-dot { background: var(--grocery); border-color: var(--grocery); color: #fff; }
.step.is-done::before { background: var(--grocery); }
.step.is-now .step-dot {
  background: var(--brand); border-color: var(--brand);
  box-shadow: 0 0 0 0 rgba(255,90,31,.6); animation: pulse 2s infinite;
}
.step.is-now::before { background: var(--grocery); }
.step span { font-size: 12.5px; color: var(--on-dark-2); line-height: 1.3; display: block; }
.step.is-done span, .step.is-now span { color: var(--on-dark); font-weight: 650; }

.panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: 20px; margin-top: 20px;
}
.panel > h3 {
  margin: 0 0 14px; font-size: 16px; font-weight: 750;
  letter-spacing: -.02em; display: flex; align-items: center; gap: 9px;
}
.panel > h3 svg { color: var(--text-3); }

.rider-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: var(--r); background: var(--paper-2);
  border: 1px solid var(--line);
}
.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--ink-3), var(--ink-2));
  font-weight: 800; font-size: 17px;
}
.rider-row b { display: block; font-size: 15.5px; font-weight: 700; }
.rider-row span { font-size: 13px; color: var(--text-2); }

/* ==========================================================================
   RESTAURANT PORTAL
   ========================================================================== */

.portal { background: #F1F4F2; min-height: 100vh; }

.portal-bar {
  position: sticky; top: 0; z-index: 60;
  background: var(--ink); color: var(--on-dark);
  border-bottom: 1px solid var(--line-dark);
}
.portal-bar-in {
  display: flex; align-items: center; gap: 14px; height: 66px;
}
.portal-bar h1 {
  margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.portal-bar .who { font-size: 12.5px; color: var(--on-dark-2); }

.switch {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 9px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid var(--line-dark);
  font-size: 13.5px; font-weight: 650; color: var(--on-dark);
  white-space: nowrap;
}
.switch .knob {
  width: 34px; height: 20px; border-radius: 99px; flex-shrink: 0;
  background: rgba(255,255,255,.22); position: relative;
  transition: background .18s ease;
}
.switch .knob::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .18s cubic-bezier(.3,1.4,.5,1);
}
.switch.is-on .knob { background: var(--grocery); }
.switch.is-on .knob::after { transform: translateX(14px); }

.tabs { display: flex; gap: 6px; margin-left: auto; }
.tab {
  padding: 9px 16px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--on-dark-2);
  font-size: 14px; font-weight: 620;
  transition: all .15s ease;
}
.tab:hover { color: var(--on-dark); background: rgba(255,255,255,.07); }
.tab.is-on { background: var(--paper); color: var(--ink); }

.kpis {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 20px;
}
.kpi {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 17px;
}
.kpi span {
  display: block; font-size: 12px; font-weight: 650; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-3);
}
.kpi b {
  display: block; margin-top: 7px;
  font-size: 26px; font-weight: 800; letter-spacing: -.04em;
}
.kpi.is-live b { color: var(--brand); }

/* Order cards in the kitchen */
.queue {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  margin-top: 20px;
}

.ocard {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-1);
  display: flex; flex-direction: column;
}
.ocard.is-new {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(255,90,31,.14), var(--sh-2);
  animation: alert 1.6s ease-in-out infinite;
}
@keyframes alert {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,90,31,.14), var(--sh-2); }
  50%      { box-shadow: 0 0 0 8px rgba(255,90,31,.06), var(--sh-2); }
}

.ocard-top {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.ocard-code {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  letter-spacing: .02em;
}
.ocard-age {
  margin-left: auto; font-size: 12.5px; font-weight: 700;
  color: var(--text-2);
}
.ocard-age.is-hot { color: var(--bad); }

.status {
  font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
}
.st-CONFIRMED, .st-PLACED, .st-PAID { background: #FFF1EA; color: var(--brand-dk); }
.st-ACCEPTED_BY_RESTAURANT { background: #EAF2FE; color: #1A57C4; }
.st-PREPARING  { background: #FFF7E6; color: #8A5B00; }
.st-READY      { background: #EDFBF4; color: #0A6B49; }
.st-ASSIGNED_TO_RIDER, .st-PICKED_UP, .st-EN_ROUTE, .st-ARRIVED { background: #F0EDFE; color: #4B32B8; }
.st-DELIVERED, .st-CLOSED { background: #EDF1EF; color: var(--text-2); }

.ocard-body { padding: 15px 16px; flex: 1; }
.ocard-cust {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--line);
}
.ocard-cust b { font-size: 15px; font-weight: 700; display: block; }
.ocard-cust span { font-size: 13px; color: var(--text-2); font-family: var(--mono); }
.ocard-total { font-size: 19px; font-weight: 800; letter-spacing: -.035em; white-space: nowrap; }

.klines { display: grid; gap: 9px; }
.kline { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; }
.kline b {
  min-width: 30px; font-weight: 800; color: var(--brand);
  font-size: 15px; letter-spacing: -.02em;
}
.kline span { flex: 1; font-weight: 560; }
.kline i { font-style: normal; color: var(--text-2); font-size: 13px; }

.ocard-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  padding: 13px 16px 15px; border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.ocard-foot.single { grid-template-columns: 1fr; }

.act {
  padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .14s ease;
}
.act.primary { background: var(--brand); color: #fff; }
.act.primary:hover { background: var(--brand-dk); }
.act.green { background: var(--grocery); color: #fff; }
.act.green:hover { filter: brightness(.92); }
.act.blue { background: var(--pharmacy); color: #fff; }
.act.blue:hover { filter: brightness(.92); }
.act.subtle { background: var(--paper); border-color: var(--line-2); color: var(--text-2); }
.act.subtle:hover { border-color: var(--bad); color: var(--bad); background: #FEF2F2; }
.act[disabled] { opacity: .5; cursor: not-allowed; }

/* Menu management */
.mtable { margin-top: 20px; }
.mrow {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 9px;
}
.mrow.is-out { background: #FCFCFB; }
.mrow-main { flex: 1; min-width: 0; }
.mrow-main b { display: block; font-size: 15px; font-weight: 650; }
.mrow-main span { font-size: 12.5px; color: var(--text-2); }
.sold-out-tag {
  font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bad); background: #FEF2F2; padding: 3px 8px; border-radius: 6px;
}

/* Login */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(255,90,31,.24), transparent 62%),
    var(--ink);
}
.login-card {
  width: min(430px, 100%);
  background: var(--paper); border-radius: var(--r-xl);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
  padding: 34px 30px 30px; text-align: center;
}
.login-card h1 {
  margin: 18px 0 0; font-size: 25px; font-weight: 800; letter-spacing: -.035em;
}
.login-card p { margin: 9px 0 0; font-size: 14.5px; color: var(--text-2); line-height: 1.55; }



/* Toast */
.toast-wrap {
  position: fixed; z-index: 200; top: 16px; left: 50%;
  transform: translateX(-50%);
  display: grid; gap: 9px; width: min(430px, calc(100% - 32px));
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 17px; border-radius: var(--r);
  background: var(--ink); color: var(--on-dark);
  box-shadow: 0 16px 40px -10px rgba(0,0,0,.5);
  font-size: 14.5px; font-weight: 600;
  animation: drop .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes drop { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast.good { background: var(--grocery); }
.toast.bad  { background: var(--bad); }
.toast svg { flex-shrink: 0; }

/* Footer */
.foot {
  margin-top: 64px; padding: 34px 0 40px;
  border-top: 1px solid var(--line); background: var(--paper);
}
.foot-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  justify-content: space-between;
}
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand b { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: var(--text-2); }
.foot-links a:hover { color: var(--text); }
.foot-note { width: 100%; font-size: 12.5px; color: var(--text-3); margin-top: 6px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 860px) {
  .doors { grid-template-columns: 1fr; margin-top: -22px; }
  .door { padding: 15px 16px; }
  .rail { grid-auto-columns: 232px; }
  .hero { padding: 34px 0 34px; }
  .hero-stats { gap: 20px; margin-top: 24px; padding-top: 20px; }
  .hero-stat b { font-size: 19px; }
}

@media (max-width: 640px) {
  :root { --pad: 15px; }
  .appbar-in { height: 58px; gap: 10px; }
  .brand-name { font-size: 18px; }
  .loc { display: none; }
  .appbar-link span { display: none; }
  .appbar-link { padding: 9px 12px; }
  .searchbar { padding: 6px 6px 6px 15px; }
  .searchbar button { padding: 13px 19px; }
  .cover { height: 190px; }
  .catnav { top: 58px; }
  .items { grid-template-columns: 1fr; }
  .queue { grid-template-columns: 1fr; }
  .steps { gap: 2px; }
  .step span { font-size: 11px; }
  .portal-bar-in { height: 62px; gap: 9px; }
  .portal-bar h1 { font-size: 15px; }
  .tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 70;
          background: var(--paper); border-top: 1px solid var(--line);
          padding: 8px 12px; justify-content: center; margin: 0;
          box-shadow: 0 -8px 24px -12px rgba(0,0,0,.2); }
  .tab.is-on { background: var(--ink); color: #fff; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .portal { padding-bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   ★ V3, THE UBER-EATS PASS
   ==========================================================================

   What changed and why, because these were not cosmetic decisions:

   1. THE CATEGORY DOORS WERE EATING THE FIRST SCREEN.
      Four stacked full-width cards, ~400px of vertical space, before a single
      store was visible. A customer on a 3G phone opened the app and saw a list
      of categories, not food. They are now one horizontal rail of compact
      pills, which is the same information in 76px.

   2. THE HERO IS NOW A TOOLBAR, NOT A POSTER.
      The value proposition (dark band, headline, four stats) was the tallest
      thing on the page. The proposition belongs on the marketing site; the app
      belongs to the returning customer who already knows what Dishlia is and
      wants to find a shop. Location and search are now the top of the page, and
      they stay there when you scroll.

   3. STICKY SEARCH. Once the search bar leaves the viewport, a compact copy
      appears in the appbar. Searching is the most common intent on a delivery
      home screen and it must never be a scroll away.

   Everything here is inside one @layer-free block on purpose: this file is
   loaded by the 3G phone in Livingstone, not by a build step.
   ========================================================================== */

/* --- 1. Location + search toolbar ---------------------------------------- */
/* --------------------------------------------------------------------------
   THE ANNOUNCEMENT

   One line, above everything, only when an operator has written one. Amber
   rather than brand orange: this is news, not a promotion, and it should not
   compete with the thing the customer came to tap.
   -------------------------------------------------------------------------- */

.announce {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  background: var(--warn-soft, #FFF6E5);
  border-bottom: 1px solid #F0DDAE;
  color: #8A5600;
  font-size: 13.5px; font-weight: 600;
}
.announce svg { flex: 0 0 auto; }
.announce span { min-width: 0; }

.locbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 10px 0 12px;
}
.locbar-in { display: flex; flex-direction: column; gap: 9px; }

.locrow {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text);
}
.locrow svg { color: var(--brand); flex: 0 0 auto; }
.locrow .loc-eta { margin-left: auto; font-weight: 600; font-size: 12.5px; color: var(--text-2); }

/* --------------------------------------------------------------------------
   ★ THE LOCATION CHIP.

   The most-tapped control on the home screen, so it is a button with its own
   hit area, not a label. The tappable box is padded out to 44px tall even
   though the text is 14: on a phone held one-handed, a control measured in
   text height is a control that gets missed.
   -------------------------------------------------------------------------- */

.locbtn {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 4px 9px 4px 4px;
  min-height: 44px;
  border: 0; border-radius: 10px;
  background: transparent;
  font: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: -.01em; color: var(--text);
  cursor: pointer;
  max-width: 100%;
}
.locbtn:hover, .locbtn:focus-visible { background: var(--paper-2); }
.locbtn:active { transform: scale(.985); }
.locbtn > svg:first-child { color: var(--brand); flex: 0 0 auto; }
.locbtn .lb-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42vw;
}
.locbtn .loc-approx {
  font-style: normal; font-weight: 600; font-size: 11.5px;
  color: var(--text-3); letter-spacing: 0;
}
.locbtn .loc-chev { color: var(--text-3); flex: 0 0 auto; margin-left: -2px; }

/* When no pin is set the chip is the call to action, so it earns the brand
   colour: an undecided customer should see this and nothing else competing. */
.locbtn.is-empty { color: var(--brand-ink); }
.locbtn.is-empty .lb-name { font-weight: 780; }

/* --------------------------------------------------------------------------
   ★ DISTANCE ON A CARD.

   Deliberately quiet and deliberately first: it is the fact the customer is
   checking, but a card that shouts it reads as a search result rather than a
   restaurant. Separated by the same dot as the rest of the meta line, so a
   card with a distance and a card without one line up.
   -------------------------------------------------------------------------- */

.card-meta .dist {
  font-weight: 700; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   ★ THE LINE UNDER THE GRID.

   Not an error, not a warning: an explanation of an absence. So it is a plain
   sentence with one underlined action, not a coloured banner that trains the
   customer to stop reading banners.
   -------------------------------------------------------------------------- */

/* ★ AND IT IS HIDDEN WHEN IT HAS NOTHING TO SAY.
   The server omits the element entirely when the radius hid nothing, but the
   client recreates it so a later location change has somewhere to write. Left
   visible and empty, that placeholder draws a dashed box with nothing in it
   under the last row of cards. */
.beyond:empty { display: none; }

.beyond {
  grid-column: 1 / -1;
  margin: 6px 0 4px;
  padding: 13px 16px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  font-size: 14px; line-height: 1.5; color: var(--text-2);
}
.beyond b { color: var(--text); }
.beyond button {
  padding: 0; border: 0; background: none;
  font: inherit; font-weight: 700; color: var(--brand-ink);
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.beyond button:active { opacity: .7; }

/* --------------------------------------------------------------------------
   ★ THE LOCATION SHEET.
   -------------------------------------------------------------------------- */

.loc-lead { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.loc-lead b { color: var(--text); }

.loc-h3 {
  margin: 22px 0 9px; font-size: 12px; font-weight: 780;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}

.loc-list { display: flex; flex-direction: column; gap: 2px; }
.locrow-btn {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; padding: 12px 13px;
  border: 0; border-radius: 12px; background: transparent;
  font: inherit; text-align: left; color: var(--text); cursor: pointer;
}
.locrow-btn:hover, .locrow-btn:focus-visible { background: var(--paper-2); }
.locrow-btn:active { background: var(--line); }
.locrow-btn .lb-name { font-weight: 680; font-size: 15px; letter-spacing: -.015em; }
/* ★ NO text-transform HERE. It was set to capitalize so a lowercase city
   name would read properly, and it also capitalised the unit: every distance
   in this sheet printed as "480 M" and "3.2 Km". Place names arrive cased from
   the database, and a landmark's category is cased in the client where it is
   built, so the rule was doing nothing except damage. */
.locrow-btn .lb-sub  { font-size: 13px; color: var(--text-3); }

/* The area the customer is already in. Tinted rather than ticked: a tick at
   this size is a 12px glyph that reads as noise, and the sub-line already says
   "Current" in words. */
.locrow-btn.is-on { background: var(--brand-soft); }
.locrow-btn.is-on .lb-name { color: var(--brand-ink); }
.locrow-btn.is-on .lb-sub { color: var(--brand-ink); opacity: .8; }

.loc-note { margin: 11px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }

.searchbar.inbar {
  margin: 0; padding: 4px 4px 4px 13px;
  border-radius: 999px; background: var(--paper-2);
  border: 1px solid var(--line-2);
  box-shadow: none;
}
.searchbar.inbar input { font-size: 15px; padding: 11px 0; }
.searchbar.inbar button {
  padding: 10px 17px; border-radius: 999px; font-size: 13.5px;
}

/* Collapsed search that appears in the appbar after scrolling past the bar. */
.appbar-search {
  display: none; flex: 1; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: var(--on-dark);
  font-size: 14px; cursor: pointer; min-width: 0;
  border: 0; text-align: left; font-family: inherit;
}
.appbar-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.is-searching .appbar-search { display: flex; }
body.is-searching .appbar .brand-name { display: none; }
@media (max-width: 640px) { body.is-searching .appbar-link { display: none; } }

/* --- 2. Category rail (replaces the four stacked door cards) -------------- */
.catrail {
  display: flex; gap: 9px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px var(--pad) 10px; margin: 0 calc(var(--pad) * -1);
  scrollbar-width: none;
}
.catrail::-webkit-scrollbar { display: none; }

.catpill {
  flex: 0 0 auto; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px 11px 12px;
  border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line-2);
  font: inherit; font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
  color: var(--text); white-space: nowrap; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.catpill .cp-ico {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--paper-3); color: var(--text-2);
  flex: 0 0 auto;
}
.catpill .cp-n {
  font-size: 12.5px; font-weight: 700; color: var(--text-3);
  padding-left: 2px;
}
.catpill.is-on {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.catpill.is-on .cp-ico { background: rgba(255,255,255,.16); color: #fff; }
.catpill.is-on .cp-n { color: rgba(255,255,255,.62); }
.catpill[data-vertical="food"].is-on     { background: var(--food); border-color: var(--food); }
.catpill[data-vertical="grocery"].is-on  { background: var(--grocery); border-color: var(--grocery); }
.catpill[data-vertical="pharmacy"].is-on { background: var(--pharmacy); border-color: var(--pharmacy); }

/* --- 3. Uber-style store card -------------------------------------------- */
.card-art { height: 156px; }
.card-art::after {
  /* A hairline of depth at the bottom of the art so white chips stay legible
     over the lighter end of the gradient. */
  content: ''; position: absolute; inset: auto 0 0 0; height: 56px;
  background: linear-gradient(to top, rgba(6,12,10,.42), transparent);
  pointer-events: none;
}
.card-mono { opacity: .9; }

/* ETA and rating move ONTO the artwork, the two facts a customer scans for,
   and the ones Uber Eats keeps on the image rather than in the meta line. */
.card-art .art-eta {
  position: absolute; left: 11px; bottom: 11px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  font-size: 12.5px; font-weight: 750; letter-spacing: -.01em; color: var(--text);
}
.card-art .art-rate {
  position: absolute; right: 11px; bottom: 11px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(6,12,10,.72); backdrop-filter: blur(6px);
  font-size: 12.5px; font-weight: 750; color: #fff;
}
.card-art .art-rate svg { color: #FFC53D; }
.card-badges { top: 11px; left: 11px; }
.card-body { padding: 13px 15px 15px; }
.card-title h3 { font-size: 16.5px; letter-spacing: -.025em; }
.card-meta { margin-top: 7px; font-size: 13px; }
.card-items { margin-top: 10px; }

/* --- 4. Rail with a peeking next card (the "there is more" cue) ----------- */
.rail { grid-auto-columns: 232px; scroll-snap-align: none; }
.rail .card { scroll-snap-align: start; }

/* --- 5. Store page: sticky category nav, thumbnails, steppers ------------- */
.catnav { scroll-behavior: smooth; }
.catnav button {
  padding: 9px 15px; font-size: 13.5px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--paper);
}
.catnav button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

.item { display: flex; gap: 13px; align-items: stretch; padding: 14px; }
.item-main { flex: 1; min-width: 0; }
.item-thumb {
  flex: 0 0 auto; order: 2;
  width: 92px; height: 92px; border-radius: 12px; overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--paper-3), var(--paper-2));
  display: grid; place-items: center;
}
.item-thumb .mono {
  font-size: 30px; font-weight: 800; letter-spacing: -.04em;
  color: var(--text-3);
}
.item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-thumb .tb-dot {
  position: absolute; right: 6px; bottom: 6px;
  width: 17px; height: 17px; border-radius: 4px; background: var(--grocery);
  display: grid; place-items: center; color: #fff;
}
.item-ctl { order: 3; align-self: center; }

/* The +/- stepper that replaces the lone "+" once something is in the cart. */
.stepper {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); padding: 2px;
}
.stepper button {
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: transparent; color: var(--text);
  font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.stepper button:hover { background: var(--paper-3); }
.stepper b { min-width: 20px; text-align: center; font-size: 14.5px; }

.add-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--paper);
  font-size: 19px; font-weight: 600; line-height: 1; color: var(--text);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 1px 2px rgba(11,19,16,.06);
}
.add-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --- 6. Bottom navigation (the app frame customers expect) ---------------- */
.bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
}
/* ★ FIVE TABS, AND THE GRID SAYS FIVE.
   The bar was a four column grid and the account tab was added as a fifth
   child, which dropped it onto a second row: the tab bar grew a line taller and
   the new tab sat under the others. A count written into the CSS is a count
   that has to be kept in step, so the columns are declared per number of
   children rather than assumed. */
.bnav-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); max-width: 560px; margin: 0 auto; }
.bnav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 2px; font-size: 10.5px; font-weight: 650; letter-spacing: -.01em;
  color: var(--text-3); text-decoration: none; min-width: 0;
}
.bnav a span { white-space: nowrap; }
@media (max-width: 360px) {
  .bnav a { font-size: 10px; letter-spacing: -.02em; }
  .bnav a span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
.bnav a.is-on { color: var(--brand); }
@media (max-width: 860px) {
  .bnav { display: block; }
  body.has-bnav { padding-bottom: 66px; }
  body.has-bnav .foot { padding-bottom: 74px; }
}

@media (max-width: 640px) {
  .catrail { padding-left: 15px; padding-right: 15px; margin: 0 -15px; }
  .item { padding: 13px; gap: 11px; }
  .item-thumb { width: 82px; height: 82px; }
  .card-art { height: 148px; }
}

/* --- 7. Meta lines must not wrap into an orphaned bullet ------------------
   "Z1 CBD · Free over K350 · Min K50" wrapped onto two lines at 402px, which
   left a bare "·" alone at the end of the first line and made every card a
   different height. One line, ellipsised, is both tidier and more scannable. */
/* The CARD meta is short and fixed ("Z1 CBD · Free over K350 · Min K50"), so it
   gets one ellipsised line, that keeps every card in the grid the same height.
   ★ The COVER meta on a store page is a long, five-fact list that must be free
   to wrap. Forcing nowrap on both turned it into "Food 4.7 ★ · · 36-46 · ·
   Delivery · ·" with orphaned separators, which is worse than three lines. */
.card-meta {
  display: flex; align-items: center; flex-wrap: nowrap;
  overflow: hidden; white-space: nowrap;
}
.card-meta > span { overflow: hidden; text-overflow: ellipsis; }
.card-meta i.dot { flex: 0 0 auto; }

/* Separators must never be the last thing on a wrapped line: the cover meta
   hides the dot that ends a line by pushing orphan dots to a zero-width gap. */
.cover-meta { row-gap: 5px; }
.cover-meta i.dot { flex: 0 0 auto; opacity: .55; }

/* ★ THE CART BAR MUST CLEAR THE TAB BAR.
   Both are position:fixed at the bottom, so the cart pill sat on top of the
   bottom navigation and buried Home/Search/Cart/Account under it. On phones
   with the tab bar, the pill floats above it, the standard delivery-app
   stack, and the only arrangement where both remain tappable. */
@media (max-width: 860px) {
  body.has-bnav .cartbar { bottom: calc(66px + env(safe-area-inset-bottom) + 12px); }
}

/* The card rail shows a sliver of the next card, the standard "there is more
   here" cue, and the reason the rail is obviously scrollable. */
.rail { scroll-padding-left: 4px; }

/* Card titles: two lines maximum, so cards in a row line up. */
.card-title h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* One line, ellipsised, matches the tightening of the labels in Views.php.
   At 402px the five facts now fit; anything longer is cut rather than wrapped
   into a dangling separator. */
.cover-meta {
  flex-wrap: nowrap; overflow: hidden; white-space: nowrap;
  gap: 7px; font-size: 13.5px; margin-top: 9px;
}
.cover-meta > span { overflow: hidden; text-overflow: ellipsis; }

/* The cover monogram is a 96px initial in a 190px box, it must be centred,
   not left to butt against the top edge and get clipped by the store header. */
.cover > .card-mono {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 92px; font-weight: 800; letter-spacing: -.06em;
  color: rgba(255,255,255,.30);
}
.cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-in { position: relative; z-index: 2; }

/* Rail cards are narrower, so their text runs a notch smaller and the art a
   touch shorter. Tapping targets stay the same size, this is not a smaller
   card, it is the same card with less air. */
.card.is-compact .card-art { height: 138px; }
.card.is-compact .card-title h3 { font-size: 15.5px; }
.card.is-compact .card-body { padding: 12px 13px 13px; }
.card.is-compact .card-meta { font-size: 12.5px; }

/* ==========================================================================
   PHOTO CONTROLS (restaurant portal)
   ==========================================================================
   The kitchen tablet is the device this is built for: Android, often a cheap
   one, often with a cracked screen, propped against a wall in a hot kitchen.
   So the photo targets are 56px and up, and the two controls a kitchen uses
   constantly, photo, availability, are the only things competing for the
   right-hand edge of the row.
   ========================================================================== */

/* --- store cover ---------------------------------------------------------- */
.cover-upload {
  display: flex; gap: 16px; align-items: center;
  padding: 14px; margin-bottom: 6px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.cu-art {
  flex: 0 0 auto; width: 104px; height: 104px;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--paper-3), var(--paper-2));
  border: 1px dashed var(--line-2);
  display: grid; place-items: center; position: relative;
}
.cu-art.has-photo { border-style: solid; border-color: var(--line); }
.cu-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cu-empty { font-size: 11.5px; font-weight: 650; color: var(--text-3); text-align: center; padding: 0 8px; }

.cu-side { min-width: 0; flex: 1; }
.cu-side > b { display: block; font-size: 15px; letter-spacing: -.02em; }
.cu-side > p { margin: 4px 0 10px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.cu-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cu-status { display: block; margin-top: 9px; font-size: 12.5px; color: var(--text-3); min-height: 1em; }

.btn.sm { padding: 9px 16px; font-size: 13.5px; width: auto; }
.btn.sm.ghost { background: transparent; color: var(--text-2); border: 1px solid var(--line-2); }

/* --- per-item photo button ------------------------------------------------ */
.mi-photo {
  flex: 0 0 auto; width: 56px; height: 56px;
  border-radius: 11px; overflow: hidden; padding: 0;
  border: 1px solid var(--line-2); background: var(--paper-2);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  -webkit-touch-callout: none; user-select: none;
}
.mi-photo:hover { border-color: var(--text-3); background: var(--paper-3); }
.mi-photo.has-photo { border-style: solid; }
.mi-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mi-add { font-size: 21px; font-weight: 500; color: var(--text-3); line-height: 1; }

@media (max-width: 640px) {
  .cover-upload { flex-direction: column; align-items: stretch; }
  .cu-art { width: 100%; height: 150px; }
  .mi-photo { width: 50px; height: 50px; }
}

/* ==========================================================================
   THE SWITCH ON A LIGHT GROUND
   ==========================================================================
   .switch was written for exactly one place: the Open/Closed toggle in the
   dark portal bar, hence its translucent white fill and --on-dark label. The
   V3 menu rows then reused the same markup inside white cards, where those
   colours mean a white pill on a white card with near-white text, the
   control was invisible.

   Nobody caught it because the bug is only visible on the Menu tab of a
   signed-in portal, and the portal had only ever been read as HTML, never
   looked at. Found by screenshot.

   Fixed by giving the switch a variant for light ground rather than changing
   the original, so the dark bar keeps the treatment it was designed for.
   ========================================================================== */
.mrow .switch {
  background: var(--paper-2);
  border-color: var(--line-2);
  color: var(--text-2);
}
.mrow .switch .knob { background: #C3CCC8; }
.mrow .switch:hover { background: var(--paper-3); border-color: var(--text-3); }
.mrow .switch.is-on { color: var(--ink); }
.mrow .switch.is-on .knob { background: var(--grocery); }

/* Sold-out rows: the switch is the only live control, so it must not fade
   with the rest of the row. */
.mrow.is-out .switch { opacity: 1; }

/* ==========================================================================
   DESKTOP SHELL, left rail + offset page
   ==========================================================================
   Below 900px none of this applies and the phone layout is untouched: bottom
   bar, full-width content, no rail. That is deliberate. The rail exists to
   fill the empty left column a wide screen would otherwise have; on a phone
   that column does not exist and a rail would just steal width from the
   cards.
   ========================================================================== */

.sidenav, .only-wide { display: none; }

@media (min-width: 900px) {
  .only-narrow { display: none !important; }

  .sidenav {
    display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; width: 244px;
    background: var(--paper); border-right: 1px solid var(--line);
    padding: 18px 14px; z-index: 60;
  }

  body.has-rail .page { margin-left: 244px; }

  /* The appbar is inside .page, so it starts after the rail, but it still
     needs to span the remaining width rather than sit in a shell with a
     max-width, or the rail would appear to float over the page background. */
  body.has-rail .appbar-in { max-width: none; }
}

.snav-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 22px; font-size: 19px; font-weight: 800;
  letter-spacing: -.03em; color: var(--ink);
}
.snav-list { display: flex; flex-direction: column; gap: 3px; }
.snav-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }

.snav-item {
  display: flex; align-items: center; gap: 13px;
  width: 100%; padding: 12px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--text-2);
  font: inherit; font-size: 14.5px; font-weight: 620; text-align: left;
  cursor: pointer; text-decoration: none;
  transition: background .14s ease, color .14s ease;
}
.snav-item svg { flex: 0 0 auto; }
.snav-item:hover { background: var(--paper-3); color: var(--ink); }
.snav-item.is-on { background: var(--ink); color: #fff; }

/* ==========================================================================
   CATEGORY TILES
   ========================================================================== */

.catsect { margin: 4px 0 14px; }

#cat-tiles {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 4px 0 6px; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
#cat-tiles::-webkit-scrollbar { display: none; }

.cat-tile {
  flex: 0 0 auto; width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 12px 6px 10px; border: 1px solid transparent; border-radius: 16px;
  background: transparent; cursor: pointer;
  scroll-snap-align: start;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.cat-tile:hover { background: var(--paper-2); border-color: var(--line); }
.cat-tile:active { transform: scale(.97); }
.cat-tile.is-on { background: var(--paper-2); border-color: var(--line-2); }

.ct-ico {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--tile-tint, var(--paper-3));
  color: var(--tile-ink, var(--ink));
}
.ct-label {
  font-size: 12.5px; font-weight: 640; color: var(--ink);
  text-align: center; line-height: 1.25;
  /* Two lines maximum, so one long section name cannot make its tile taller
     than the rest of the row and break the baseline. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   FILTER CHIPS
   ========================================================================== */

.filterbar {
  display: flex; gap: 9px; align-items: center;
  overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none;
}
.filterbar::-webkit-scrollbar { display: none; }

.fchip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line-2);
  color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 620;
  cursor: pointer; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.fchip:hover { background: var(--paper-3); border-color: var(--text-3); }
.fchip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.fchip .fcaret { opacity: .55; }

.fdrop { position: relative; flex: 0 0 auto; }
.fmenu {
  display: none; position: absolute; top: calc(100% + 7px); left: 0;
  min-width: 188px; padding: 6px; z-index: 90;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(11,19,16,.28);
}
.fmenu.is-open { display: block; }
.fmenu button {
  display: block; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
  text-align: left; cursor: pointer;
}
.fmenu button:hover { background: var(--paper-2); }
.fmenu button.is-on { background: var(--paper-3); }

.sect-all {
  border: 0; background: transparent; font: inherit;
  font-size: 13.5px; font-weight: 650; color: var(--brand);
  cursor: pointer; padding: 6px 0;
}

/* ==========================================================================
   PROMO STRIP
   ========================================================================== */

.banners {
  position: relative; margin-bottom: 22px;
}
.banner-track {
  display: flex; gap: 14px; overflow-x: auto;
  scroll-behavior: smooth; scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.banner-track::-webkit-scrollbar { display: none; }

.banner {
  flex: 0 0 auto; width: min(420px, 82vw);
  display: flex; align-items: stretch; justify-content: space-between; gap: 10px;
  padding: 20px 18px 20px 24px; border-radius: 20px;
  background: var(--bn-bg, var(--paper-2)); color: var(--bn-ink, var(--ink));
  text-decoration: none; overflow: hidden;
  scroll-snap-align: start;
  transition: transform .16s ease, box-shadow .16s ease;
}
.banner:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(11,19,16,.34); }

.bn-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.bn-eyebrow {
  font-size: 11px; font-weight: 720; letter-spacing: .07em; text-transform: uppercase;
  color: var(--bn-accent, var(--brand)); opacity: .95;
}
.bn-txt b { font-size: 19px; font-weight: 780; letter-spacing: -.025em; line-height: 1.2; }
.bn-sub { font-size: 13px; opacity: .82; line-height: 1.35; }
.bn-cta {
  margin-top: 10px; padding: 9px 16px; border-radius: 999px;
  background: var(--bn-accent, var(--brand)); color: #fff;
  font-size: 13px; font-weight: 700;
}
.bn-art { flex: 0 0 108px; display: grid; place-items: center; }
.bn-art svg { width: 108px; height: 86px; }

.bn-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  display: none; place-items: center;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(11,19,16,.3);
}
.bn-arrow.prev { left: -17px; }
.bn-arrow.next { right: -17px; }

@media (min-width: 900px) {
  /* Arrows only exist where there is room beside the track. On a phone the
     strip is a finger-swipe and a floating arrow would sit on top of text. */
  .banners.has-overflow .bn-arrow { display: grid; }
}

/* ==========================================================================
   CARD META, fee line, rating line
   ========================================================================== */

.rate-line { font-weight: 640; color: var(--text-2); }
.rate-line.is-new { color: var(--text-3); font-weight: 600; }

@media (min-width: 900px) {
  .card-meta { gap: 9px; }
}

/* --------------------------------------------------------------------------
   Two corrections found by looking at the rendered desktop page rather than
   reading the rules.
   -------------------------------------------------------------------------- */

/* .brand-name was written for the dark appbar, see the color above. In the
   light rail it inherited near-white text on a near-white panel and the brand
   was almost invisible. */
.snav-brand .brand-name { color: var(--ink); }

/* The compact rail card must not wrap its meta line: at 232px a third cell
   wraps under the card edge and is clipped mid-word. */
.card.is-compact .card-meta { flex-wrap: nowrap; }

/* ==========================================================================
   ★ SIGN IN AND SIGN UP, ON ONE CARD (user directive).
   
   The card used to ask for a 6-digit code we issued by hand. It now carries a
   two-position switch: sign in, or open a shop. The switch is a pill rather
   than two links because it is the first thing anyone reads on this screen,
   and a shop owner on a tablet should not have to find the smaller text to
   realise they are in the wrong form.
   ========================================================================== */
.authtabs {
  display: flex; gap: 5px; margin: 22px 0 4px;
  background: var(--paper-3); border-radius: 999px; padding: 5px;
}
.authtab {
  flex: 1; padding: 11px 12px; border: 0; border-radius: 999px;
  background: transparent; font: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--text-2); cursor: pointer; transition: background .15s, color .15s;
}
.authtab.is-on { background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); }
.authtab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.authform { margin-top: 20px; }
.authform h1 { margin: 0; }
.authswitch { margin: 16px 0 0; font-size: 14px; color: var(--text-2); }
.linkish {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--brand); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.claim-toggle {
  display: flex; align-items: center; gap: 11px; margin: 2px 0 14px;
  font-size: 14.5px; font-weight: 600; color: var(--text-2); cursor: pointer;
  text-align: left;
}
.claim-toggle input { width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; }
.vert-row { grid-template-columns: repeat(3, 1fr); }

/* The edit affordance on a menu row. Small on purpose: the availability
   switch beside it is the control a kitchen touches all day. */
.mi-edit {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--paper);
  color: var(--text-2); cursor: pointer;
}
.mi-edit:hover { border-color: var(--line-2); color: var(--ink); }
.mi-edit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ==========================================================================
   MY ORDERS (the bottom bar's Orders tab).
   
   No account, no login: this list is what the device itself stored. Rows are
   whole-row links because the only thing anyone does here is tap through to
   tracking, and a 44px minimum height keeps that easy on a phone in one hand.
   ========================================================================== */
.order-list { display: grid; gap: 10px; margin-top: 20px; }
.order-row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; min-height: 44px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); color: inherit; text-decoration: none;
}
.order-row:hover { border-color: var(--line-2); box-shadow: var(--sh-1); }
.or-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.or-main b { font-weight: 700; letter-spacing: -.01em; }
.or-main span { font-size: 13.5px; color: var(--text-2); }
.or-go { color: var(--text-3); flex: 0 0 auto; display: flex; }

/* ===========================================================================
   THE SHOP'S PIN, ON THE SIGN-UP FORM.
   A new owner has one phone, one hand and a shop to open, so this is one
   button and one search box, in that order, with the answer written on the
   screen afterwards. The readout is deliberately plain coordinates plus where
   they came from: "your phone" and "the landmark you picked" fail in different
   ways, and an owner who has just been placed three streets away needs to be
   able to see which one happened.
   =========================================================================== */
.up-pin {
  margin-top: 10px; padding: 11px 13px; border-radius: 12px;
  background: #EAF7F1; border: 1px solid #BFE6D5; color: #0B6B49; font-size: 13.5px;
  line-height: 1.5;
}
.up-pin b { display: block; font-size: 14px; }
.up-pin span { color: #2C6B55; font-variant-numeric: tabular-nums; }
.up-find { position: relative; margin-top: 10px; }
.up-find-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(11,19,16,.35); }
.up-find-list:empty { display: none; }
.up-find-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 11px 13px; border: 0; border-bottom: 1px solid var(--line); background: #fff;
  font: inherit; cursor: pointer;
}
.up-find-row:last-child { border-bottom: 0; }
.up-find-row:hover { background: var(--bg); }
.up-find-row b { font-size: 14.5px; font-weight: 700; }
.up-find-row em { font-style: normal; font-size: 12.5px; color: var(--text-3); }
.up-find-none { padding: 11px 13px; font-size: 13px; color: var(--text-3); }
#up-locate.is-bad { border-color: var(--bad); }

/* ===========================================================================
   THE CURRENCY NOTE IN THE CHECKOUT.
   A converted price is a promise about what is going to leave the customer's
   account. That promise is worth two lines: which currency is on screen, at
   what rate, and what the order itself is recorded in. Grey and quiet, because
   it is reassurance rather than a warning, but present on every checkout that
   converts, which is every checkout where a card will be charged rand.
   =========================================================================== */
.pay-cur {
  margin: 14px 0 0; padding: 11px 13px; border-radius: 12px;
  background: var(--bg, #F6F8F7); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-3); line-height: 1.55;
}
.pay-cur b { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 2px; }
.pay-cur-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* A native select on purpose: it is one tap on a phone, it needs no JavaScript
   to look right, and it cannot fight the browser's own list on a 3G device. */
.pay-cur-pick {
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text);
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  padding: 5px 7px; max-width: 108px;
}

/* ===========================================================================
   THE BASKET.
   The storefront's own basket screen, and the reason it exists: the checkout
   used to be the only place an order was ever printed, quantities were printed
   rather than controlled, and there was no way to take something out of the
   order at all. Every control here is thumb-sized, because the phone is the
   whole product on a 3G prepaid handset.
   =========================================================================== */
.cart-from { margin: 0 0 14px; font-size: 14px; color: var(--text-2); }
.cart-from b { color: var(--text); }

.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "main side" "x x";
  gap: 4px 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line-main { grid-area: main; min-width: 0; }
.cart-line-main b { display: block; font-size: 15px; font-weight: 650; }
.cart-line-main span { font-size: 12.5px; color: var(--text-2); }
.cart-line-side {
  grid-area: side; display: flex; align-items: center; gap: 12px;
}
.cart-line-amt { font-size: 15px; font-weight: 750; white-space: nowrap; min-width: 68px; text-align: right; }
.cart-line-x {
  grid-area: x; justify-self: start;
  border: 0; background: transparent; padding: 4px 0 0;
  font: inherit; font-size: 12.5px; font-weight: 650;
  color: var(--bad, #C0392B); cursor: pointer;
}
.cart-line-x:hover { text-decoration: underline; }

.cart-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 34px 8px;
}
.cart-empty b { font-size: 16px; font-weight: 700; }
.cart-empty span { font-size: 13.5px; color: var(--text-2); max-width: 34ch; }

.cart-foot-links {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
}
.linkish.is-danger { color: var(--bad, #C0392B); }

/* The checkout's own order lines: name and money on the left, controls right. */
.li-side { display: flex; align-items: center; gap: 12px; }
.li .li-x {
  border: 0; background: transparent; padding: 0; margin-left: 8px;
  font: inherit; font-size: 12px; font-weight: 650; color: var(--bad, #C0392B);
  cursor: pointer; white-space: nowrap;
}
.li .li-x:hover { text-decoration: underline; }
.li { flex-wrap: wrap; }
.li-main { min-width: 108px; }

/* The pin button in the checkout, when the customer has not pressed it yet. */
#ck-pin.is-bad { border-color: var(--bad, #C0392B); }
#ck-manual-toggle { display: block; margin: 6px 0 18px; }

/* ==========================================================================
   WAITING FOR MONEY, AND THE PAYMENT PANEL ON THE ORDER SCREEN.

   The waiting block replaces the checkout form in place, so it is styled to
   look like it belongs where the form was: same width, same rhythm, one
   spinning mark so a slow connection is visibly work rather than a dead page.
   ========================================================================== */
.ck-await-in { padding: 26px 4px 6px; text-align: center; }
.ck-await-in h3 { margin: 14px 0 8px; font-size: 19px; font-weight: 780; letter-spacing: -.03em; }
.ck-await-in p { margin: 0 auto; max-width: 34ch; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.ck-await-code { margin-top: 12px !important; font-weight: 700; color: var(--text-1) !important; letter-spacing: .02em; }
.ck-await-spin {
  display: inline-block; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, .1); border-top-color: var(--brand, #ea580c);
  animation: ck-spin .9s linear infinite;
}
@keyframes ck-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ck-await-spin { animation-duration: 3s; } }
#ck-await .btn { margin-top: 20px; }
#ck-await .linkish { display: block; margin: 14px auto 0; }

.pay-panel { border-left: 4px solid var(--brand, #ea580c); }
.pay-panel.is-paid { border-left-color: #16a34a; }
.pay-panel .btn { width: 100%; margin-top: 14px; }
.pay-panel .hint { margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); text-align: center; }

/* ==========================================================================
   THE POLICY PAGES
   ==========================================================================
   A customer reads these once, on a phone, usually because something went
   wrong. Long lines, generous spacing, one column, and no decoration that
   competes with the sentence they are looking for.
   ========================================================================== */

.legal { max-width: 720px; padding: 34px 20px 60px; }
.legal h1 { margin: 0 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -.035em; }
.legal-lede { margin: 0 0 6px; font-size: 16.5px; color: var(--text-2); line-height: 1.55; }
.legal-updated { margin: 0 0 26px; font-size: 12.5px; color: var(--text-3); }

.legal-sec, .legal-box { margin: 0 0 22px; }
.legal-sec h2, .legal-box h2 {
  margin: 0 0 8px; font-size: 17px; font-weight: 750; letter-spacing: -.02em;
}
.legal-sec p, .legal-box p, .legal-sec li {
  margin: 0 0 10px; font-size: 15.5px; line-height: 1.65; color: var(--text-2);
}
.legal-sec p b, .legal-sec li b { color: var(--text); font-weight: 650; }
.legal-sec ul { margin: 0 0 12px; padding-left: 20px; }
.legal-sec a { color: var(--brand-dk); text-decoration: underline; }

.legal-box {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 20px;
}
.legal-fine { font-size: 13.5px !important; color: var(--text-3) !important; margin-bottom: 0 !important; }
.legal-nav { margin-top: 30px; font-size: 14px; }
.legal-nav a { margin-right: 16px; color: var(--text-2); text-decoration: underline; }

.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.foot-links a { font-size: 13px; color: var(--text-2); text-decoration: none; }
.foot-links a:hover { color: var(--text); text-decoration: underline; }

/* ==========================================================================
   ★ APPLYING TO RIDE.

   A rider page is read on a phone, in daylight, often on a slow connection,
   by somebody who is deciding whether this is worth their time. So: one
   column, big touch targets, and the money stated at the top in numbers
   rather than promises.
   ========================================================================== */

.rider-wrap { padding: 22px 0 60px; }

.rider-card {
  /* Wider than the shop's sign-in card: this page carries a form with six
     steps and five photos, not two fields and a button. */
  max-width: 620px;
}

/* --- what a delivery pays, before any questions --------------------------- */
.ride-pay {
  margin: 16px 0 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2, #FAFAF7);
}

.ride-pay-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: center;
}

.ride-pay-row b {
  display: block;
  font-size: 21px;
  font-weight: 780;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ride-pay-row span {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-3);
}

.ride-pay-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

/* --- the steps ------------------------------------------------------------ */
.rider-steps { margin-top: 6px; }

.rider-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 26px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.rider-step:first-child { margin-top: 12px; border-top: 0; padding-top: 0; }

.rider-step-n {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--brand, #FF5A1F);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rider-step h2 { margin: 0 0 3px; font-size: 17px; font-weight: 750; }
.rider-step p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }

/* --- a document ----------------------------------------------------------- */
.rider-doc {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.rider-doc.is-off { opacity: .55; }

.rider-doc-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.rider-doc-head b { font-size: 14.5px; }

.rider-doc-when {
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
}

.rider-doc p {
  margin: 6px 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
}

.rider-pick { width: 100%; justify-content: center; }

.rider-doc.is-off .rider-pick { pointer-events: none; opacity: .5; }

.rider-doc-state {
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
}

.rider-doc-state.is-ok  { color: #0A6E4B; font-weight: 600; }
.rider-doc-state.is-bad { color: #A81D1D; font-weight: 600; }

/* --- where their application is ------------------------------------------ */
.rider-here { text-align: left; padding: 8px 0 4px; }
.rider-here h1 { margin: 4px 0 10px; font-size: 22px; }

.rider-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: #EEF1F0;
  color: var(--text-2);
}

.rider-chip.is-active    { background: #EAF7F1; color: #0B6B49; }
.rider-chip.is-training  { background: #EAF7F1; color: #0B6B49; }
.rider-chip.is-vetting   { background: #FFF6E5; color: #8A5600; }
.rider-chip.is-suspended { background: #FDECEC; color: #A81D1D; }

.rider-status { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.rider-when { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-3); }

.rider-money {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 18px 0 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
}

.rider-money b { display: block; font-size: 20px; font-weight: 780; }
.rider-money span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-3); }

@media (max-width: 420px) {
  .rider-card { padding-left: 14px; padding-right: 14px; }
  .ride-pay-row b { font-size: 19px; }
  .rider-step { gap: 10px; }
}

/* ==========================================================================
   THE RIDER'S WORKING PAGE
   --------------------------------------------------------------------------
   A phone on handlebars, in sunlight, with one hand. Everything here is sized
   for that: one column, buttons tall enough to hit while wearing gloves, and
   the money for the job in the largest type on the card, because that is the
   number the rider is actually looking at.
   ========================================================================== */

.rider-work { text-align: left; padding: 4px 0 8px; }

.rw-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}

/* The shift switch. It is the first thing a rider touches and the last thing
   they touch, so it is a full-width bar rather than a switch in a header. */
.rw-shift {
  flex: 1 1 auto;
  display: block; width: 100%;
  padding: 15px 16px; border-radius: 14px;
  border: 1.5px solid var(--line, #e3e6e4);
  background: #fff; color: var(--text, #14181a);
  font: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer; text-align: center;
}
.rw-shift.is-on {
  background: #0f7a43; border-color: #0f7a43; color: #fff;
}

.rw-sync { flex: 0 0 auto; font-size: 11px; color: var(--text-3, #7a8380); }

.rw-card {
  border: 1.5px solid var(--line, #e3e6e4);
  border-radius: 16px; padding: 16px; background: #fff;
}

.rw-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.rw-code { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-3, #7a8380); }
.rw-stage {
  font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: #f1f4f2; color: var(--text-2, #4a5450);
}

.rw-card h2 { margin: 2px 0 6px; font-size: 19px; }
.rw-where { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--text-2, #4a5450); }

.rw-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.rw-call, .rw-nav {
  flex: 1 1 auto; text-align: center; text-decoration: none;
  padding: 12px 14px; border-radius: 12px; font-weight: 650; font-size: 14px;
  border: 1.5px solid var(--line, #e3e6e4); background: #fff; color: inherit;
}
.rw-nav { background: #14181a; border-color: #14181a; color: #fff; }

.rw-pay { margin: 12px 0 0; font-size: 15px; font-weight: 750; color: #0f7a43; }
.rw-hint { margin: 4px 0 0; font-size: 13px; color: var(--text-3, #7a8380); }

.rw-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rw-trouble { margin-top: 10px; text-align: center; }

.rw-btn {
  display: block; width: 100%; padding: 16px;
  border-radius: 14px; border: 1.5px solid var(--line, #e3e6e4);
  background: #fff; color: var(--text, #14181a);
  font: inherit; font-weight: 750; font-size: 16px; cursor: pointer;
}
.rw-btn.is-go { background: #ff5a1f; border-color: #ff5a1f; color: #fff; }
.rw-btn.is-quiet { background: #f6f8f7; }
.rw-btn.is-on { border-color: #ff5a1f; background: #fff3ee; }

.rw-empty {
  border: 1.5px dashed var(--line, #e3e6e4); border-radius: 16px;
  padding: 18px 16px; text-align: center; background: #fbfcfb;
}
.rw-empty b { display: block; font-size: 16px; margin-bottom: 6px; }
.rw-empty span { font-size: 13.5px; color: var(--text-3, #7a8380); line-height: 1.45; }

.rw-money {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 16px 0 10px; text-align: center;
}
.rw-money b { display: block; font-size: 18px; font-weight: 780; }
.rw-money span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-3, #7a8380); }
.rw-note { margin: 6px 0; font-size: 12.5px; color: var(--text-3, #7a8380); }
.rw-more { text-align: center; }

/* The trouble sheet. It sits above everything, because a rider reporting a
   failed delivery is standing in the street and cannot afford to hunt for it. */
.rw-sheet {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 14, 12, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.rw-sheet-in {
  width: 100%; max-width: 520px; background: #fff;
  border-radius: 18px 18px 0 0; padding: 20px 18px 26px;
  max-height: 88vh; overflow: auto;
}
.rw-sheet-in h3 { margin: 0 0 12px; font-size: 18px; }
.rw-sheet-in .rw-btn { margin-bottom: 8px; }
.rw-sheet-in .rw-actions { margin-top: 12px; }

/* ==========================================================================
   RIDE WITH DISHLIA
   --------------------------------------------------------------------------
   One invitation, in two places: a line in the footer of every customer page,
   and a card at the foot of the home page. Sized so it reads as an offer to a
   person with a bike rather than as an advertisement, and it never pushes the
   shops further down than they already are.
   ========================================================================== */

.foot-ride {
  display: block; text-decoration: none; color: inherit;
  margin: 14px 0 10px; padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px;
}
.foot-ride b { display: block; font-size: 14px; }
.foot-ride span { display: block; margin-top: 3px; font-size: 12.5px; opacity: 0.72; line-height: 1.4; }

/* ★ A LIGHT CARD, NOT A DARK SLAB.
   This banner used to carry a gradient that ran from near black to fully
   transparent over a pale background, so it rendered as a black smear that
   faded halfway down and made the platform look broken. Nothing else on the
   page is dark, and nothing about "there is work if you want it" needs to
   shout. It is the same card as the shop cards: white, one hairline border,
   the orange reserved for the one thing to tap. */
.ride-invite { padding: 6px 0 18px; }
.ride-invite-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 20px; border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line, #e3e6e4);
  box-shadow: 0 1px 2px rgba(16, 22, 20, .04);
}
.ride-invite h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.015em; }
.ride-invite p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2, #4a5450); max-width: 46ch; }
.ride-invite-btn {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  padding: 13px 18px; border-radius: 14px; font-weight: 700; font-size: 14px;
  background: #ff5a1f; color: #fff;
  box-shadow: 0 1px 2px rgba(255, 90, 31, .25);
}
.ride-invite-btn:hover { background: #ef4f16; }

@media (max-width: 520px) {
  .ride-invite-in { flex-direction: column; align-items: stretch; }
  .ride-invite-btn { text-align: center; }
}

/* ---- the shop portal's money tab ---- */
.money-kpis { grid-template-columns: repeat(3, 1fr); }
.money-sub { margin: 22px 0 10px; font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.muted { color: var(--text-3); font-size: 13.5px; }
.dest-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 15px; border-radius: var(--r-sm);
  background: var(--paper-2); border: 1px solid var(--line);
}
.dest-card.is-set { background: #EDFBF4; border-color: #BFEBD7; }
.dest-card b { display: block; font-size: 14.5px; }
.dest-card span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.dest-card > span { flex: 1; min-width: 18ch; }
.dest-form { padding: 15px; border-radius: var(--r-sm); background: var(--paper-2); border: 1px solid var(--line); }
.dest-form .field { margin-bottom: 10px; }
.payout-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; margin-bottom: 8px; cursor: pointer;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper);
  font: inherit;
}
.payout-row:hover { border-color: #ff5a1f; }
.pr-main { flex: 1; min-width: 0; }
.pr-main b { display: block; font-size: 14.5px; }
.pr-main span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.pr-side { text-align: right; }
.pr-side b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.pr-state {
  display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.pr-state.is-sent { background: #E4F7EE; color: #0A6B49; }
.pr-state.is-owed { background: #FFF1D6; color: #8A5A0B; }
.st-meta { margin: 0 0 6px; font-size: 14px; }
.st-sent { margin: 0 0 12px; font-size: 13px; color: #0A6B49; font-weight: 600; }
.st-owed { margin: 0 0 12px; font-size: 13px; color: #8A5A0B; font-weight: 600; }
.st-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.st-table td, .st-table th { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; }
.st-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.st-table .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rw-note.is-warn { color: #8A5A0B; font-weight: 600; }

/* ==========================================================================
   YOUR ACCOUNT
   --------------------------------------------------------------------------
   A phone-first page: one column, one card at a time, 16px inputs so iOS does
   not zoom a field when it is tapped. The signed-in panel is a stack of
   blocks rather than tabs, because there are only three of them and a tab bar
   would hide two thirds of what the customer came for.
   ========================================================================== */

.acct-main { max-width: 640px; padding-bottom: 40px; }
.acct-main .sect-head h1 { margin: 26px 0 0; font-size: 27px; font-weight: 800; letter-spacing: -.035em; }
.acct-main .sect-head p { margin: 6px 0 0; color: var(--text-2); }

.acct-card {
  margin-top: 18px; padding: 16px; border-radius: 18px;
  border: 1px solid var(--line, #e3e6e4); background: #fff;
}
.acct-tabs { display: flex; gap: 6px; background: #f2f5f3; padding: 4px; border-radius: 12px; margin-bottom: 14px; }
.acct-tab {
  flex: 1; border: 0; background: transparent; padding: 10px 8px; border-radius: 9px;
  font: inherit; font-weight: 600; font-size: 14px; color: var(--text-2, #4a5450); cursor: pointer;
}
.acct-tab.is-on { background: #fff; color: var(--text, #16211c); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.acct-form h2 { margin: 4px 0 6px; font-size: 19px; }
.acct-lede { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-2, #4a5450); }
.acct-label { display: block; margin: 12px 0 5px; font-size: 12.5px; font-weight: 600; }
.acct-input {
  width: 100%; box-sizing: border-box; padding: 13px 13px; font: inherit; font-size: 16px;
  border: 1px solid var(--line, #dfe3e1); border-radius: 12px; background: #fff; color: inherit;
}
.acct-input:disabled { background: #f4f6f5; color: #6b7570; }
.acct-input:focus { outline: 2px solid #ff5a1f; outline-offset: 1px; }
.acct-btn {
  width: 100%; margin-top: 16px; padding: 14px 16px; font: inherit; font-size: 15px; font-weight: 700;
  color: #fff; background: #ff5a1f; border: 0; border-radius: 13px; cursor: pointer;
}
.acct-btn:disabled { opacity: .6; }
.acct-link {
  display: block; width: 100%; margin-top: 10px; padding: 8px; font: inherit; font-size: 13.5px;
  color: var(--text-2, #4a5450); background: none; border: 0; text-decoration: underline; cursor: pointer;
}
.acct-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3, #6b7570); }
.acct-opt { font-weight: 400; color: var(--text-3, #6b7570); }
.acct-say { margin: 12px 0 0; font-size: 13.5px; font-weight: 600; color: #0a7a4a; }
.acct-say.is-bad { color: #c0392b; }

.acct-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.acct-top h2 { margin: 2px 0 4px; font-size: 20px; }
.acct-top .acct-link { width: auto; margin: 0; text-decoration: none; font-weight: 600; }

.acct-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line, #eceeed); }
.acct-block h3 { margin: 0 0 4px; font-size: 15px; }

/* The order rows reuse the orders page's own list, with the right column
   carrying the money and the live status. */
.acct-ord { border-bottom: 1px solid var(--line, #f0f2f1); padding: 4px 0; }
.acct-ord:last-child { border-bottom: 0; }
.acct-ord .order-row { border: 0; padding: 10px 0; }
.or-right { text-align: right; display: flex; flex-direction: column; gap: 3px; }
.or-right b { font-size: 14.5px; }
.or-right em { font-style: normal; font-size: 11.5px; color: var(--text-3, #6b7570); }
.or-right em.is-live { color: #ff5a1f; font-weight: 600; }

.acct-rate {
  display: flex; align-items: center; gap: 10px; padding: 8px 0 12px;
  font-size: 13px; color: var(--text-2, #4a5450);
}
.acct-rate-stars { display: inline-flex; gap: 4px; }
.acct-star {
  border: 0; background: none; padding: 2px 1px; font-size: 21px; line-height: 1;
  color: #d7dcda; cursor: pointer;
}
.acct-star.is-picked { color: #ffb020; }
.acct-stars { color: #ffb020; letter-spacing: 1px; }
.acct-stars span { color: #d7dcda; }
.acct-stars span.on { color: #ffb020; }
.acct-stars.is-sm { font-size: 13px; }

.acct-places { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.acct-place {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px; border: 1px solid var(--line, #e8ebe9); border-radius: 13px;
}
.ap-main b { display: block; font-size: 14px; }
.ap-main span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2, #4a5450); }
.ap-main em { display: block; margin-top: 3px; font-size: 12px; font-style: normal; color: var(--text-3, #6b7570); }
.acct-x {
  border: 0; background: none; font: inherit; font-size: 12.5px; color: #c0392b;
  text-decoration: underline; cursor: pointer; flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   THE SAVED PLACES STRIP IN THE CHECKOUT
   -------------------------------------------------------------------------- */
.ck-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 4px 0 12px; }
.ck-saved-lead { font-size: 12.5px; font-weight: 600; color: var(--text-2, #4a5450); }
.ck-saved-chip {
  font: inherit; font-size: 13px; padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--line, #dfe3e1); background: #fff; color: inherit; cursor: pointer;
}
.ck-saved-chip.is-on { border-color: #ff5a1f; background: #fff3ec; font-weight: 600; }

/* --------------------------------------------------------------------------
   THE BELL: SOUNDS, THE CARDS THAT GO WITH THEM, AND THE MUTE.

   ★ A SOUND WITH NO PICTURE IS A SOUND HALF THE PEOPLE MISS.
     Every cue draws one of these cards, muted or not, and the badge counts it.
     The mute silences the tone and nothing else, which is why the switch is
     labelled as a sound switch and not as an alert switch.
   -------------------------------------------------------------------------- */
.bell-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line, #dfe3e1); background: #fff; color: inherit;
  font: inherit; font-size: 12.5px; padding: 7px 11px; border-radius: 999px;
  cursor: pointer; flex: 0 0 auto;
}
.bell-btn:hover { border-color: #c9cfcc; }
.bell-btn .bell-slash { display: none; }
.bell-btn.is-muted { color: #8a938f; }
.bell-btn.is-muted .bell-slash { display: block; }
@media (max-width: 700px) { .bell-tag { display: none; } }

.bell-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #ff5a1f; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 18px;
  text-align: center; display: none;
}
.bell-badge.is-on { display: inline-block; }

/* The pill that asks for one tap, because browsers will not make a sound for a
   page nobody has touched. It stays until it is tapped rather than nagging. */
.bell-pill {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 86px; z-index: 60;
  border: 0; border-radius: 999px; background: #14181a; color: #fff; font: inherit;
  font-size: 13px; font-weight: 600; padding: 10px 16px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.bell-toasts {
  position: fixed; left: 50%; transform: translateX(-50%); top: 12px; z-index: 70;
  display: flex; flex-direction: column; gap: 8px; width: min(430px, calc(100vw - 22px));
  pointer-events: none;
}
.bell-card {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; width: 100%;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--line, #e4e8e6); border-left: 4px solid #ff5a1f;
  border-radius: 14px; padding: 11px 12px; box-shadow: 0 10px 26px rgba(15, 20, 18, .14);
  animation: bell-in .18s ease-out;
}
@keyframes bell-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.bell-card.is-going { opacity: 0; transform: translateY(-6px); transition: all .9s ease-in; }
.bell-card.is-order  { border-left-color: #12876f; }
.bell-card.is-job    { border-left-color: #1f6feb; }
.bell-card.is-arrive { border-left-color: #ff5a1f; }
.bell-card.is-done   { border-left-color: #12876f; }
.bell-card.is-problem{ border-left-color: #c0392b; }
.bell-card.is-message{ border-left-color: #1f6feb; }
.bell-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: #f4f6f5; color: #4a5450;
}
.bell-ico svg { width: 17px; height: 17px; }
.bell-text { min-width: 0; flex: 1 1 auto; }
.bell-text b { display: block; font-size: 13.5px; }
.bell-text span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-2, #4a5450); }
.bell-x { flex: 0 0 auto; color: #9aa3a0; font-size: 17px; line-height: 1; padding: 0 2px; }

/* --------------------------------------------------------------------------
   THE THREAD
   -------------------------------------------------------------------------- */
.chat-sheet { display: flex; flex-direction: column; }

/* The help form. Sits on the same sheet the thread uses, because a customer
   who has just messaged their rider should not have to learn a second
   interface to report that the bag was short. */
.help-sheet { display: flex; flex-direction: column; }
.help-body { display: flex; flex-direction: column; gap: 12px; }
.help-q { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.help-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.help-chip {
  padding: 9px 13px; border-radius: 999px; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--line-2);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2);
}
.help-chip:hover { border-color: #ff5a1f; color: var(--text); }
.help-chip.is-on { background: #FF5A1F; border-color: #FF5A1F; color: #fff; }
.help-label { font-size: 13.5px; font-weight: 700; margin-top: 4px; }
.help-opt { font-weight: 500; color: var(--text-3); }
.help-note {
  width: 100%; padding: 12px 13px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2); background: var(--paper);
  font: inherit; font-size: 14.5px; line-height: 1.5; resize: vertical;
}
.help-note:focus { outline: none; border-color: #ff5a1f; }
.help-left { margin: -6px 0 0; text-align: right; font-size: 12px; color: var(--text-3); }
.help-file { font-size: 13.5px; }
.help-photo-state { margin: -6px 0 0; font-size: 12.5px; color: var(--text-3); }
.help-send { width: 100%; }
.help-fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.help-say { margin: 0; font-size: 13.5px; font-weight: 600; }
.help-say.bad { color: #b42318; }
.help-case {
  padding: 13px 14px; border-radius: var(--r-sm);
  background: var(--paper-2); border: 1px solid var(--line);
}
.help-case.is-answered { background: #EDFBF4; border-color: #BFEBD7; }
.help-case-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.help-case-ref { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; }
.help-case-note { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.help-case-when { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); }
.help-case-answer {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.07);
  font-size: 14px; line-height: 1.5; font-weight: 600;
}
.help-case-money { margin: 8px 0 0; font-size: 13.5px; font-weight: 700; color: #0A6B49; }
.track-help-panel .sub { margin: 0 0 12px; }
.link-btn {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: #b8410c; font-weight: 700; text-decoration: underline;
}

.chat-body {
  flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  min-height: 160px; max-height: 52vh; background: #f7f9f8;
}
.chat-wait { margin: 0; font-size: 13px; color: var(--text-2, #4a5450); text-align: center; padding: 22px 8px; }
.chat-wait.bad { color: #c0392b; }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 84%; }
.chat-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.chat-bubble {
  padding: 9px 12px; border-radius: 14px; background: #fff; font-size: 13.5px; line-height: 1.45;
  border: 1px solid var(--line, #e4e8e6); overflow-wrap: anywhere;
}
.chat-msg.is-mine .chat-bubble { background: #14181a; color: #fff; border-color: #14181a; }
.chat-at { margin-top: 3px; font-size: 11px; color: var(--text-3, #8a938f); }
.chat-foot { flex: 0 0 auto; border-top: 1px solid var(--line, #e4e8e6); padding: 10px 14px 14px; background: #fff; }
.chat-quick { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 8px; }
.chat-quick:empty { display: none; }
.quick-chip {
  flex: 0 0 auto; font: inherit; font-size: 12.5px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--line, #dfe3e1); background: #fff; color: inherit; cursor: pointer; white-space: nowrap;
}
.quick-chip:hover { border-color: #ff5a1f; }
.chat-compose { display: flex; gap: 8px; align-items: flex-end; }
.chat-compose textarea {
  flex: 1 1 auto; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line, #dfe3e1); resize: none; max-height: 96px; min-height: 42px;
}
.chat-compose .btn { flex: 0 0 auto; }
.chat-why { margin: 8px 0 0; font-size: 12.5px; color: #c0392b; min-height: 15px; }
.rw-msg { width: 100%; margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.hint { margin: 8px 0 0; font-size: 12px; color: var(--text-3, #8a938f); }

/* The rider's two header buttons. */
.rw-tools { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }