/* ==========================================================================
   WarpX — shared design system
   "Anything you need, delivered at warp speed."
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#FAFAF8;
  --surface:#FFFFFF;
  --surface-2:#F4F2FA;
  --ink:#141225;
  --ink-soft:#514E63;
  --muted:#8A8698;
  --line:#E9E6F0;
  --line-strong:#D8D3E4;

  --violet:#6D28D9;
  --violet-dark:#4C1D95;
  --blue:#2563EB;
  --grad-warp:linear-gradient(135deg,#4C1D95 0%,#7C3AED 38%,#6D28D9 62%,#2563EB 100%);
  --grad-warp-alt:linear-gradient(135deg,#2563EB 0%,#6D28D9 38%,#7C3AED 62%,#4C1D95 100%);
  --grad-warp-soft:linear-gradient(135deg,rgba(109,40,217,.10),rgba(37,99,235,.10));

  --lime:#C6F135;
  --lime-ink:#1C2205;

  --shadow-violet-sm:0 6px 18px -6px rgba(109,40,217,.38);
  --shadow-violet:0 16px 34px -10px rgba(109,40,217,.42);

  --success:#16A34A;
  --success-bg:#EAFBF1;
  --warn:#D97706;
  --warn-bg:#FEF3E2;
  --danger:#DC2626;
  --danger-bg:#FDECEC;

  --food:#F0653B;
  --food-bg:#FDECE5;
  --grocery:#1B9C57;
  --grocery-bg:#E8F8EF;
  --medicine:#0E9DD9;
  --medicine-bg:#E6F6FC;
  --laundry:#7C3AED;
  --laundry-bg:#F1E9FE;
  --anything:#D6339B;
  --anything-bg:#FBE7F3;

  --radius-sm:10px;
  --radius:16px;
  --radius-lg:24px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(20,18,37,.06), 0 1px 1px rgba(20,18,37,.04);
  --shadow:0 8px 24px -8px rgba(20,18,37,.16);
  --shadow-lg:0 24px 48px -12px rgba(20,18,37,.24);

  --container:1180px;
  --font-head:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.1rem,4.5vw,3.4rem); }
h2{ font-size:clamp(1.6rem,3vw,2.3rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:72px 0; }
.section-tight{ padding:40px 0; }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--violet); margin-bottom:12px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--radius-pill);
  font-weight:600; font-size:.95rem; cursor:pointer; border:1px solid transparent;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, background .3s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.96); }
.btn-primary{
  background:var(--grad-warp); background-size:220% 220%; background-position:0% 50%;
  color:#fff; box-shadow:var(--shadow-violet-sm);
}
.btn-primary:hover{ background-position:100% 50%; box-shadow:var(--shadow-violet); }
.btn-lime{ background:var(--lime); color:var(--lime-ink); }
.btn-lime:hover{ box-shadow:0 12px 26px -8px rgba(198,241,53,.6); }
.btn-outline{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--violet); color:var(--violet); box-shadow:var(--shadow-violet-sm); }
.btn-ghost{ background:var(--surface-2); color:var(--ink); }
.btn-ghost:hover{ background:var(--line); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:.85rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.btn-danger-outline{ background:transparent; border-color:var(--danger); color:var(--danger); }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,250,248,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:var(--container); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; font-size:1.25rem; }
.brand-mark{
  width:32px; height:32px; border-radius:9px; background:var(--grad-warp);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1rem; flex-shrink:0;
}
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{
  padding:9px 14px; border-radius:var(--radius-pill); font-weight:600; font-size:.92rem; color:var(--ink-soft);
  transition:background .15s, color .15s;
}
.nav-links a:hover{ background:var(--surface-2); color:var(--ink); }
.nav-links a.active{ background:var(--surface-2); color:var(--violet); }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:var(--radius-pill); background:var(--surface-2);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), border-color .2s ease, background .2s ease;
}
.icon-btn:hover{ border-color:var(--violet); transform:translateY(-2px) scale(1.05); background:var(--grad-warp-soft); }
.icon-btn:active{ transform:translateY(0) scale(.94); }
.cart-count{
  position:absolute; top:-4px; right:-4px; background:var(--anything); color:#fff; font-size:.65rem; font-weight:700;
  min-width:18px; height:18px; border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.nav-toggle{ display:none; }
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-links.open{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; top:100%; left:0; right:0; background:var(--surface);
    padding:10px 20px 16px; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  }
  .nav-links.open a{ padding:12px 14px; }
  .nav-toggle{ display:flex; }
  .nav{ position:sticky; }
}

/* ---------- hero (warp streaks) ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--grad-warp); color:#fff;
  padding:96px 0 110px;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(100deg, rgba(255,255,255,.08) 0px, rgba(255,255,255,.08) 1px, transparent 1px, transparent 90px);
  animation:warp-slide 6s linear infinite;
  opacity:.7;
}
@keyframes warp-slide{ from{ background-position:0 0; } to{ background-position:-900px 0; } }
.hero-inner{ position:relative; z-index:2; max-width:760px; }
.hero .eyebrow{ color:var(--lime); }
.hero h1{ color:#fff; }
.hero p.lead{ color:rgba(255,255,255,.85); font-size:1.15rem; max-width:560px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-stats{ display:flex; gap:32px; flex-wrap:wrap; margin-top:52px; position:relative; z-index:2; }
.hero-stat b{ display:block; font-family:var(--font-head); font-size:1.6rem; }
.hero-stat span{ font-size:.82rem; color:rgba(255,255,255,.7); }

/* floating gradient blobs, injected by js/main.js into .hero and .page-hero */
.hero-blob-layer{ position:absolute; z-index:0; pointer-events:none; }
.hero-blob{ border-radius:50%; filter:blur(50px); opacity:.75; animation:blob-float 16s ease-in-out infinite; }
@keyframes blob-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(-26px,22px) scale(1.08); }
  66%{ transform:translate(18px,-18px) scale(.94); }
}
@media (prefers-reduced-motion: reduce){ .hero-blob{ animation:none; } }

/* hero content eases in on load, staggered child by child */
.hero-inner > *, .page-hero .container > *{
  opacity:0; animation:hero-in .8s cubic-bezier(.16,.84,.44,1) forwards;
}
.hero-inner > *:nth-child(1), .page-hero .container > *:nth-child(1){ animation-delay:.05s; }
.hero-inner > *:nth-child(2), .page-hero .container > *:nth-child(2){ animation-delay:.15s; }
.hero-inner > *:nth-child(3), .page-hero .container > *:nth-child(3){ animation-delay:.25s; }
.hero-inner > *:nth-child(4), .page-hero .container > *:nth-child(4){ animation-delay:.35s; }
.hero-inner > *:nth-child(5), .page-hero .container > *:nth-child(5){ animation-delay:.45s; }
@keyframes hero-in{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero-inner > *, .page-hero .container > *{ opacity:1; animation:none; }
}

/* ---------- cards ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:960px){ .grid-3,.grid-4,.grid-5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4,.grid-5{ grid-template-columns:1fr; } }

/* service buttons on home */
.service-card{
  position:relative; overflow:hidden;
  padding:26px 22px; border-radius:var(--radius-lg); background:var(--surface);
  border:1px solid var(--line); display:flex; flex-direction:column; gap:12px;
  transition:transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease, border-color .25s ease;
}
.service-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; opacity:0;
  background:var(--grad-warp-soft); transition:opacity .3s ease; pointer-events:none;
}
.service-card:hover{ box-shadow:var(--shadow-violet); border-color:transparent; }
.service-card:hover::after{ opacity:1; }
.service-icon{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  position:relative; z-index:1; transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.service-card:hover .service-icon{ transform:scale(1.12) rotate(-4deg); }
.service-card h3, .service-card p, .service-card .go{ position:relative; z-index:1; }
.service-card h3{ margin-bottom:2px; }
.service-card p{ font-size:.9rem; margin-bottom:0; }
.service-card .go{ margin-top:auto; font-weight:700; font-size:.85rem; display:inline-flex; align-items:center; gap:6px; }
.svc-food .service-icon{ background:var(--food-bg); color:var(--food); }
.svc-food .go{ color:var(--food); }
.svc-grocery .service-icon{ background:var(--grocery-bg); color:var(--grocery); }
.svc-grocery .go{ color:var(--grocery); }
.svc-medicine .service-icon{ background:var(--medicine-bg); color:var(--medicine); }
.svc-medicine .go{ color:var(--medicine); }
.svc-laundry .service-icon{ background:var(--laundry-bg); color:var(--laundry); }
.svc-laundry .go{ color:var(--laundry); }
.svc-anything .service-icon{ background:var(--anything-bg); color:var(--anything); }
.svc-anything .go{ color:var(--anything); }

/* page header banner for inner pages */
.page-hero{ padding:52px 0 40px; color:#fff; position:relative; overflow:hidden; }
.page-hero .container{ position:relative; z-index:1; }
.page-hero p{ color:rgba(255,255,255,.85); max-width:600px; }
.ph-food{ background:linear-gradient(135deg,#F0653B,#C2410C); }
.ph-grocery{ background:linear-gradient(135deg,#1B9C57,#146C3D); }
.ph-medicine{ background:linear-gradient(135deg,#0E9DD9,#0B6E9B); }
.ph-laundry{ background:linear-gradient(135deg,#8B5CF6,#5B21B6); }
.ph-anything{ background:linear-gradient(135deg,#D6339B,#9D174D); }
.ph-login{ background:var(--grad-warp); }
.ph-careers{ background:linear-gradient(135deg,#EA580C,#7C2D12); }
.page-hero .badge{ background:rgba(255,255,255,.16); color:#fff; }

/* badges/tags */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700;
  padding:4px 10px; border-radius:var(--radius-pill); text-transform:uppercase; letter-spacing:.04em;
}
.badge-lime{ background:var(--lime); color:var(--lime-ink); }
.badge-muted{ background:var(--surface-2); color:var(--ink-soft); }
.badge-success{ background:var(--success-bg); color:var(--success); }
.badge-warn{ background:var(--warn-bg); color:var(--warn); }
.badge-danger{ background:var(--danger-bg); color:var(--danger); }

/* menu / list items */
.menu-cat{ margin-bottom:44px; }
.menu-cat-title{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.menu-cat-title h3{ margin:0; }
.menu-cat-title .line{ flex:1; height:1px; background:var(--line); }
.menu-item{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 20px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.menu-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-strong); }
.menu-item + .menu-item{ margin-top:12px; }
.menu-item-name{ font-weight:700; font-family:var(--font-head); font-size:1.02rem; margin-bottom:4px; }
.menu-item-note{ font-size:.86rem; color:var(--muted); margin-bottom:0; }
.menu-item-tags{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.menu-item-right{ text-align:right; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.price{ font-family:var(--font-head); font-weight:700; font-size:1.1rem; }

/* stepper / add button */
.add-btn{
  background:var(--ink); color:#fff; border:none; padding:9px 18px; border-radius:var(--radius-pill);
  font-weight:700; font-size:.85rem; cursor:pointer;
  transition:background .2s ease, transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
}
.add-btn:hover{ background:var(--violet); transform:scale(1.06); box-shadow:var(--shadow-violet-sm); }
.add-btn:active{ transform:scale(.94); }
.stepper{ display:flex; align-items:center; gap:10px; background:var(--surface-2); border-radius:var(--radius-pill); padding:4px; }
.stepper button{ width:28px; height:28px; border-radius:50%; border:none; background:var(--surface); cursor:pointer; font-weight:700; font-size:1rem; }
.stepper span{ min-width:16px; text-align:center; font-weight:700; }

/* ---------- forms ---------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:7px; }
.field .hint{ font-size:.8rem; color:var(--muted); margin-top:6px; }
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],textarea,select{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm); border:1.5px solid var(--line-strong);
  background:var(--surface); font-family:inherit; font-size:.95rem; color:var(--ink);
  transition:border-color .15s;
}
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--violet); }
textarea{ resize:vertical; min-height:110px; }
.input-row{ display:flex; gap:12px; }
.input-row > *{ flex:1; }

.chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-pill);
  border:1.5px solid var(--line-strong); background:var(--surface); font-size:.85rem; font-weight:600; cursor:pointer;
  transition:border-color .15s, background .15s, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.chip:hover{ border-color:var(--violet); transform:translateY(-2px); }
.chip.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.chip-row{ display:flex; flex-wrap:wrap; gap:9px; }

.segmented{ display:inline-flex; background:var(--surface-2); border-radius:var(--radius-pill); padding:4px; gap:2px; }
.segmented button{
  border:none; background:transparent; padding:9px 18px; border-radius:var(--radius-pill); font-weight:600; font-size:.85rem;
  cursor:pointer; color:var(--ink-soft);
}
.segmented button.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }

.dropzone{
  border:2px dashed var(--line-strong); border-radius:var(--radius); padding:28px; text-align:center; cursor:pointer;
  background:var(--surface-2); transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag{ border-color:var(--violet); background:var(--grad-warp-soft); }
.dropzone input{ display:none; }
.dz-icon{ font-size:1.8rem; margin-bottom:8px; }

.category-block{ padding:24px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); margin-bottom:24px; }
.category-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.category-emoji{ font-size:1.5rem; }

.note-box{
  display:flex; gap:12px; padding:16px 18px; border-radius:var(--radius); background:var(--grad-warp-soft);
  border:1px solid rgba(109,40,217,.18); align-items:flex-start;
}
.note-box b{ display:block; margin-bottom:2px; }
.note-box p{ margin:0; font-size:.88rem; }

/* location / map */
.map-mock{
  position:relative; aspect-ratio:16/10; border-radius:var(--radius-lg); overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(109,40,217,.12), transparent 45%),
    radial-gradient(circle at 70% 65%, rgba(37,99,235,.12), transparent 45%),
    var(--surface-2);
  border:1px solid var(--line); cursor:crosshair;
}
.map-mock svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.map-zone{ position:absolute; border-radius:50%; border:1.5px dashed rgba(109,40,217,.35); transform:translate(-50%,-50%); pointer-events:none; }
.map-store{
  position:absolute; width:14px; height:14px; border-radius:50%; background:var(--ink); border:3px solid #fff;
  box-shadow:0 0 0 2px var(--ink); transform:translate(-50%,-50%);
}
.map-pin{
  position:absolute; transform:translate(-50%,-100%); cursor:grab; user-select:none; touch-action:none;
  filter:drop-shadow(0 6px 10px rgba(20,18,37,.35));
}
.map-pin:active{ cursor:grabbing; }
.map-hint{ position:absolute; bottom:12px; left:12px; right:12px; background:rgba(255,255,255,.92); backdrop-filter:blur(4px); padding:8px 12px; border-radius:var(--radius-sm); font-size:.78rem; color:var(--ink-soft); text-align:center; }

.landmark-list{ display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; }
.landmark-item{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line-strong); cursor:pointer; font-size:.9rem; font-weight:600;
}
.landmark-item:hover{ border-color:var(--violet); }
.landmark-item.active{ border-color:var(--violet); background:var(--grad-warp-soft); }
.landmark-item small{ font-weight:400; color:var(--muted); display:block; margin-top:2px; }

.zone-result{ padding:18px 20px; border-radius:var(--radius); display:flex; gap:14px; align-items:flex-start; }
.zone-result.in{ background:var(--success-bg); }
.zone-result .zi{ font-size:1.4rem; }

/* cart drawer */
.overlay{ position:fixed; inset:0; background:rgba(20,18,37,.5); z-index:90; opacity:0; pointer-events:none; transition:opacity .2s; }
.overlay.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; height:100%; width:400px; max-width:92vw; background:var(--surface);
  z-index:91; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column;
  box-shadow:-12px 0 32px rgba(20,18,37,.2);
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ padding:20px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.drawer-body{ flex:1; overflow-y:auto; padding:16px 22px; }
.drawer-foot{ padding:18px 22px; border-top:1px solid var(--line); }
.cart-line{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.cart-line:last-child{ border-bottom:none; }
.cart-line-info{ flex:1; }
.cart-line-info b{ font-size:.92rem; }
.cart-line-info small{ color:var(--muted); display:block; margin-top:2px; }
.cart-line-remove{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:1rem; }
.cart-line-remove:hover{ color:var(--danger); }
.cart-empty{ text-align:center; padding:60px 20px; color:var(--muted); }
.row-between{ display:flex; align-items:center; justify-content:space-between; }

/* modal */
.modal{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(20,18,37,.55); opacity:0; pointer-events:none; transition:opacity .2s;
}
.modal.open{ opacity:1; pointer-events:auto; }
.modal-card{ background:var(--surface); border-radius:var(--radius-lg); padding:36px; max-width:420px; width:100%; text-align:center; transform:translateY(12px); transition:transform .2s; }
.modal.open .modal-card{ transform:translateY(0); }
.modal-icon{ width:64px; height:64px; border-radius:50%; background:var(--success-bg); color:var(--success); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 16px; }

/* footer */
footer{ background:var(--ink); color:rgba(255,255,255,.7); padding:56px 0 28px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
footer h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
footer a{ display:block; padding:5px 0; font-size:.9rem; color:rgba(255,255,255,.65); }
footer a:hover{ color:#fff; }
.footer-brand p{ color:rgba(255,255,255,.55); font-size:.88rem; max-width:280px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; color:rgba(255,255,255,.45); }
.footer-stats{ display:flex; gap:18px; flex-wrap:wrap; }

/* utility */
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-8{ gap:8px; } .gap-12{ gap:12px; }
.w-full{ width:100%; }
.text-muted{ color:var(--muted); }
.divider{ height:1px; background:var(--line); margin:24px 0; }
.hide-mobile{ display:block; }
@media (max-width:640px){ .hide-mobile{ display:none; } }

/* toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); z-index:120;
  background:var(--ink); color:#fff; padding:13px 22px; border-radius:var(--radius-pill); font-weight:600; font-size:.88rem;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; display:flex; align-items:center; gap:8px;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* delivery handover code — shown to the customer only */
.otp-box{
  background:var(--grad-warp-soft); border:1.5px dashed var(--violet);
  border-radius:var(--radius); padding:16px; margin:16px 0;
}
.otp-label{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--violet); }
.otp-code{
  font-family:var(--font-head); font-weight:700; font-size:2.2rem; letter-spacing:.3em;
  color:var(--ink); margin:6px 0 4px; text-indent:.3em;
}
.otp-hint{ font-size:.78rem; color:var(--ink-soft); margin:0; }

/* scroll reveal — content animates in as it enters the viewport */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform;
}
.reveal-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---- Delivery fee nudge -------------------------------------------------
   The line in the cart and on checkout that tells the customer how close
   they are to a cheaper delivery slab. */
.fee-nudge{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  background:var(--grad-warp-soft);
  border:1px dashed rgba(124,58,237,.35);
  color:var(--violet);
  border-radius:var(--radius-sm);
  padding:9px 12px; margin-bottom:10px;
  font-size:.86rem; line-height:1.35;
}
.fee-nudge b{ font-weight:700; }
.fee-nudge span{ opacity:.75; font-size:.8rem; }
.fee-nudge-win{
  background:rgba(132,204,22,.12);
  border-color:rgba(132,204,22,.45);
  color:#3f6212;
}
.fee-note{
  font-size:.78rem; color:var(--muted); line-height:1.4;
  margin:-4px 0 10px;
}

/* ---- Saved addresses ----------------------------------------------------
   The address-book cards used on checkout (pick one) and My Orders (manage). */
.addr-card{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  margin-bottom:10px; background:var(--surface);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.addr-card[role="button"]{ cursor:pointer; }
.addr-card[role="button"]:hover{ border-color:var(--violet); box-shadow:var(--shadow-violet-sm); }
.addr-card-picked{
  border-color:var(--violet); background:var(--grad-warp-soft);
  box-shadow:var(--shadow-violet-sm);
}
.addr-radio{
  flex-shrink:0; width:18px; height:18px; margin-top:2px;
  border:2px solid var(--line); border-radius:50%;
  transition:border-color .18s, box-shadow .18s;
}
.addr-radio.on{ border-color:var(--violet); box-shadow:inset 0 0 0 4px var(--violet); }
.addr-body{ flex:1; min-width:0; }
.addr-title{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:3px; }
.addr-icon{ font-size:1rem; }
.addr-tag{
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:var(--violet); color:#fff; padding:2px 7px; border-radius:999px;
}
.addr-line{ margin:0; font-size:.9rem; word-break:break-word; }
.addr-meta{ margin:3px 0 0; font-size:.8rem; color:var(--muted); }
.addr-actions{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.addr-icon-btn{
  background:none; border:none; cursor:pointer; font-size:.95rem;
  padding:5px 6px; border-radius:8px; line-height:1;
  transition:background .18s, transform .18s;
}
.addr-icon-btn:hover{ background:var(--surface-2); transform:translateY(-1px); }
.chip-btn{ cursor:pointer; border:1px solid var(--line); background:var(--surface); font:inherit; }
.chip-btn:hover{ border-color:var(--violet); color:var(--violet); }
.addr-empty{
  padding:16px; border:1px dashed var(--line); border-radius:var(--radius-sm);
  font-size:.9rem; color:var(--muted); margin-bottom:10px;
}

/* ---- Scheduled orders --------------------------------------------------- */
.sched-ok, .sched-bad{
  margin-top:12px; padding:9px 12px; border-radius:var(--radius-sm);
  font-size:.86rem; line-height:1.35;
}
.sched-ok{ background:rgba(132,204,22,.12); border:1px solid rgba(132,204,22,.45); color:#3f6212; }
.sched-bad{ background:rgba(234,88,12,.10); border:1px solid rgba(234,88,12,.40); color:#9A3412; }
.sched-tag{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--grad-warp-soft); border:1px solid rgba(124,58,237,.35); color:var(--violet);
  font-size:.76rem; font-weight:700; padding:3px 9px; border-radius:999px;
}

/* ---- Install prompt -----------------------------------------------------
   The 📲 button only exists when the app is actually installable, so it is
   never a dead control. */
.install-btn{ font-size:1.05rem; }
.install-sheet{
  position:fixed; inset:0; z-index:120; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(20,18,37,.55); padding:16px;
  animation:install-fade .18s ease;
}
@keyframes install-fade{ from{ opacity:0; } to{ opacity:1; } }
.install-card{
  background:var(--surface); border-radius:var(--radius-lg); padding:26px 24px 20px;
  width:100%; max-width:400px; text-align:center; box-shadow:0 -12px 40px rgba(20,18,37,.28);
  animation:install-rise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes install-rise{ from{ transform:translateY(24px); } to{ transform:translateY(0); } }
.install-icon{ border-radius:14px; margin-bottom:10px; }
.install-steps{
  text-align:left; margin:16px 0 18px; padding-left:22px;
  font-size:.9rem; line-height:1.6;
}
.install-steps li{ margin-bottom:7px; }
.ios-share{ font-size:.95rem; }
@media (min-width:600px){
  .install-sheet{ align-items:center; }
  .install-card{ box-shadow:var(--shadow-violet); }
}

/* ---- Closed / open notice ----------------------------------------------- */
.closed-bar{
  background:linear-gradient(135deg,#EA580C,#B45309); color:#fff;
  padding:9px 16px; text-align:center; font-size:.87rem; line-height:1.4;
}
.closed-bar b{ font-weight:700; }
.closed-note{
  background:rgba(234,88,12,.10); border:1px solid rgba(234,88,12,.40); color:#9A3412;
  border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:16px; font-size:.88rem; line-height:1.5;
}

/* ---- Customer order tracker --------------------------------------------- */
.track{ display:flex; align-items:flex-start; margin:14px 0 4px; }
.track-step{ flex:1; text-align:center; position:relative; min-width:0; }
.track-dot{
  width:22px; height:22px; border-radius:50%; margin:0 auto 6px;
  background:var(--surface-2); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; color:transparent; position:relative; z-index:1;
  transition:background .25s, border-color .25s, color .25s;
}
/* The connector is drawn from each step back to the previous one, so it can be
   coloured per-segment rather than as one bar underneath. */
.track-step::before{
  content:""; position:absolute; top:10px; right:50%; width:100%; height:2px;
  background:var(--line); z-index:0; transition:background .25s;
}
.track-step:first-child::before{ display:none; }
.track-step.done .track-dot{ background:var(--lime); border-color:var(--lime); color:#1a2e05; }
.track-step.done::before{ background:var(--lime); }
.track-step.now .track-dot{
  background:var(--violet); border-color:var(--violet); color:#fff;
  box-shadow:0 0 0 4px rgba(109,40,217,.18);
}
.track-label{ font-size:.72rem; color:var(--muted); line-height:1.25; word-break:break-word; }
.track-step.now .track-label{ color:var(--violet); font-weight:700; }
.track-step.done .track-label{ color:var(--text); }
.track-live{
  display:inline-flex; align-items:center; gap:5px; font-size:.74rem; color:var(--muted); margin-top:2px;
}
.track-live i{
  width:6px; height:6px; border-radius:50%; background:var(--lime); display:inline-block;
  animation:track-pulse 1.6s ease-in-out infinite;
}
@keyframes track-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* ---- Payout ledger ------------------------------------------------------- */
.payout-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.payout-row:last-child{ border-bottom:none; }
.payout-who b{ display:block; }
.payout-who small{ color:var(--muted); font-size:.78rem; }
.payout-amt{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.payout-paid{ color:var(--muted); }

/* ---- Google sign-in ------------------------------------------------------
   The container is emptied and hidden when GOOGLE_CLIENT_ID isn't set, so
   none of this shows a control that couldn't work. */
.gsi-row{ display:flex; justify-content:center; margin-bottom:16px; min-height:44px; }
.gsi-divider{
  display:flex; align-items:center; gap:12px; margin:4px 0 20px;
  color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
}
.gsi-divider::before, .gsi-divider::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.gsi-step{
  background:var(--grad-warp-soft); border:1px solid rgba(124,58,237,.35);
  border-radius:var(--radius-sm); padding:16px; margin-bottom:18px;
}
.gsi-who{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.gsi-who img{ width:36px; height:36px; border-radius:50%; }
.gsi-who b{ display:block; font-size:.92rem; }
.gsi-who small{ color:var(--muted); font-size:.8rem; word-break:break-all; }