/* The buyer page. The shared base (buttons, forms, banners, dialogs, toasts) is shared/base.css; this file gives the buyer page its own look:
   a warm off-white page, terracotta for the one thing to do, white rounded cards with soft borders, pill buttons, and a dark pill for the basket.
   The font is Plus Jakarta Sans, served from this folder (fonts/): the page loads nothing from another site. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bg: #faf7f5;
  --surface: #ffffff;
  --surface-2: #f4ece8;
  --surface-3: #eee7e3;
  --text: #1e1b19;
  --muted: #6b5d58;
  --line: #e6deda;
  --outline: #9c8b85;
  --brand: #ae2b01;
  --brand-2: #d0431c;
  --brand-text: #ffffff;
  --brand-tint: rgba(174, 43, 1, 0.1);
  --ok: #1b7a47;
  --ok-tint: rgba(27, 122, 71, 0.12);
  --inverse: #231f1d;
  --inverse-text: #fbf6f3;
  --new: #c2410c;
  --prep: #ae2b01;
  --radius: 16px;
  --tap: 3.25rem;
  --shadow: 0 1px 3px rgba(30, 27, 25, 0.05);
  --tile-0: #f6d9cf; --tile-0-text: #8d2a0c;
  --tile-1: #f1e3c4; --tile-1-text: #6d5410;
  --tile-2: #dbe7d3; --tile-2-text: #34592a;
  --tile-3: #e4d8ea; --tile-3-text: #5a3a6b;
  --sheen: rgba(255, 255, 255, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161210;
    --surface: #211c19;
    --surface-2: #2a2420;
    --surface-3: #342d28;
    --text: #f3ece8;
    --muted: #b7aaa3;
    --line: #3b322d;
    --outline: #8f817a;
    --brand: #ff8a65;
    --brand-2: #ff7a59;
    --brand-text: #2b0d04;
    --brand-tint: rgba(255, 138, 101, 0.16);
    --ok: #5ed39a;
    --ok-tint: rgba(94, 211, 154, 0.16);
    --inverse: #f3ece8;
    --inverse-text: #231f1d;
    --new: #ff9a6a;
    --prep: #ff9a7e;
    --shadow: none;
    --tile-0: #4a2a20; --tile-0-text: #ffc3b0;
    --tile-1: #463b1d; --tile-1-text: #f2dc9c;
    --tile-2: #2c3f27; --tile-2-text: #bfe0b4;
    --tile-3: #3d2f47; --tile-3-text: #dcc4ec;
    --sheen: rgba(255, 255, 255, 0.07);
  }
}

body { font-family: var(--font); word-spacing: 0.08em; }   /* this font's word space is narrow at small sizes */
/* A flex column, not a grid: a sticky bar in a grid cannot leave its cell, so on a long page the bottom bar would sit at the very end of the document. */
.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }
/* The bars sit inside wrapper divs, and a sticky bar cannot leave its parent: make the wrappers transparent to layout so the bars stick to the screen. */
.app-shell > div:not(.sr-only) { display: contents; }   /* (the hidden announcer must keep its own box, or its text would show under the navigation) */
.content { padding: 0.75rem 1rem 10rem; max-width: 40rem; width: 100%; margin: 0 auto; }
h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 0.75rem; }
h2 { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.005em; }
a { color: var(--brand); }
.back { display: inline-block; padding: 0.4rem 0; margin-bottom: 0.4rem; font-weight: 600; text-decoration: none; min-height: 2.5rem; }
.meta { color: var(--muted); font-size: 0.8rem; font-weight: 500; }
.notice { background: var(--warn-bg); color: var(--warn-text); border-radius: 12px; padding: 0.6rem 0.85rem; font-weight: 600; margin: 0 0 0.75rem; }
.notice p { margin: 0 0 0.25rem; }
.icon { flex: none; display: block; }

/* Buttons: pills. */
.btn { border-radius: 999px; border: 1px solid var(--line); font-weight: 600; background: var(--surface); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-text); }
.btn.danger { border-color: var(--danger); }
.btn.block { border-radius: 999px; }
.link { color: var(--brand); }
.card { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); }
.form input[type=text], .form input[type=number], .form input[type=datetime-local], .form textarea, .branch-select { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.choice { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.logo { border-radius: 0.85rem; background: var(--brand); }

/* Frame */
.topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding: calc(env(safe-area-inset-top) + 0.4rem) 1rem 0.4rem; min-height: 3.5rem; }
.brand-link { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--text); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; min-height: 2.75rem; }
.logo.small { width: 2rem; height: 2rem; border-radius: 0.6rem; font-size: 0.8rem; }
.top-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.back-btn { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 999px; display: grid; place-items: center; color: var(--text); text-decoration: none; margin-left: -0.5rem; }
.back-btn:hover, .back-btn:active { background: var(--surface-2); }
.top-title { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.top-actions { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.tool { min-width: 2.5rem; min-height: 2.5rem; padding: 0 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 700; font-size: 0.8rem; cursor: pointer; }
.basket-link { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); text-decoration: none; color: var(--text); font-weight: 600; font-size: 0.85rem; }
.basket-link .badge { margin: 0; }
.badge { background: var(--surface-3); }
.badge.alert { background: var(--brand); color: var(--brand-text); }
.bottom-nav { background: var(--surface); border-top: 1px solid var(--line); }
.nav-item { display: grid; place-items: center; text-decoration: none; font-weight: 600; font-size: 0.8rem; }
.nav-item[aria-current=page] { color: var(--brand); box-shadow: inset 0 2px 0 var(--brand); }
.nav-item .badge { position: absolute; top: 0.3rem; left: calc(50% + 1.9rem); margin: 0; }

/* The coloured tile that stands in for a photo (the API holds none). */
.tile { position: relative; overflow: hidden; flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 0.85rem; font-weight: 700; font-size: 1.35rem; background: var(--tile-0); color: var(--tile-0-text); }
.tile.c1 { background: var(--tile-1); color: var(--tile-1-text); }
.tile.c2 { background: var(--tile-2); color: var(--tile-2-text); }
.tile.c3 { background: var(--tile-3); color: var(--tile-3-text); }
.tile.sized { width: 4rem; height: 4rem; }
.tile.hero { width: auto; height: 9rem; border-radius: var(--radius); font-size: 4rem; margin-bottom: 0.9rem; background-image: linear-gradient(135deg, var(--sheen), rgba(255, 255, 255, 0) 60%); }
.tile.has-photo { color: transparent; }
.tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }   /* over the letter: if it cannot load, the letter shows */
.sold-out .tile { filter: grayscale(1); }

/* Finding stalls */
.nearby > h1 { margin-top: 0.25rem; }
.where { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; margin-bottom: 1rem; padding: 0.75rem 0.9rem; }   /* compact: the offers below should show on the first screen */
.where-text { flex: 1 0 100%; margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--muted); }
.where .btn.locate { flex: 1 0 100%; min-height: 2.75rem; }
.where .hint { flex: 1 0 100%; margin: 0; }
.where .chips { flex: 1 1 auto; }
.where .choice { border: 0; background: none; padding: 0 0.25rem; min-height: 2.5rem; flex: 1 0 100%; }
.btn.locate { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-btn { min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.chip-btn[aria-pressed=true] { background: var(--brand); border-color: var(--brand); color: var(--brand-text); }
.stalls, .order-list, .items { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.65rem; }
.stall-card, .order-card { display: flex; justify-content: space-between; gap: 0.85rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem; text-decoration: none; color: var(--text); box-shadow: var(--shadow); min-height: 4.5rem; }
.stalls.refreshing, .deals.refreshing { opacity: 0.55; }
.deals { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.65rem; }
.deal-card { display: flex; gap: 0.85rem; align-items: flex-start; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); border-radius: var(--radius); padding: 0.8rem; text-decoration: none; color: var(--text); box-shadow: var(--shadow); min-height: 4.5rem; }
.deal-card .item-foot { flex-wrap: wrap; justify-content: flex-start; gap: 0.1rem 0.75rem; min-height: 0; margin-top: 0.25rem; }
.deals-section + .section { margin-top: 0.4rem; }
.stall-main { display: grid; gap: 0.1rem; min-width: 0; flex: 1; }
.stall-name, .ref { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.stall-side { display: grid; justify-items: end; gap: 0.3rem; flex: none; }
.chip { margin-left: 0; font-size: 0.72rem; font-weight: 600; background: var(--surface-3); color: var(--muted); padding: 0.15rem 0.6rem; }
.chip.open { background: var(--ok-tint); color: var(--ok); }
.chip.closed { background: var(--surface-3); color: var(--muted); }
.chip.tone-ok { background: var(--ok-tint); color: var(--ok); }
.chip.tone-bad { background: var(--error-bg); color: var(--error-text); }
.chip.tone-warn { background: var(--warn-bg); color: var(--warn-text); }

/* A stall's menu */
.stall-head { margin-bottom: 0.9rem; }
.stall-head h1 { margin: 0 0 0.25rem; font-size: 1.35rem; }
.stall-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.stall-sub .dot { color: var(--line); }
.stall-address { margin: 0.2rem 0 0; font-size: 0.82rem; color: var(--muted); }
.status-word.open { color: var(--ok); font-weight: 700; }
.status-word.closed { color: var(--muted); font-weight: 700; }
.directions { display: flex; gap: 0.5rem; margin: 0 0 0.9rem; }
.directions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; flex: 1 1 0; text-decoration: none; color: var(--text); font-size: 0.85rem; }
.section { margin-bottom: 1.1rem; }
.section h2 { margin-bottom: 0.5rem; }
.section .hint { margin: -0.2rem 0 0.6rem; font-size: 0.8rem; }
.item, .offer { display: flex; justify-content: space-between; gap: 0.85rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem; box-shadow: var(--shadow); }
.offer { border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); }
.offer.picked { outline: 2px solid var(--brand); outline-offset: 2px; }   /* the offer the person tapped on the home screen */
.item.sold-out { opacity: 0.6; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.item-main { display: grid; gap: 0.15rem; min-width: 0; flex: 1; }
.item-name { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.offer-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.5rem; }
.item-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.35rem; min-height: 2.5rem; }
.tag { display: inline-block; white-space: nowrap; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.price { display: flex; gap: 0.5rem; align-items: baseline; }
.price .now { font-weight: 700; font-size: 0.95rem; }
.price .was { color: var(--muted); font-size: 0.8rem; }   /* (readable: the usual price is information, not decoration) */
.note { font-size: 0.8rem; color: var(--muted); }
.meta.describe { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.stepper { display: inline-flex; align-items: center; gap: 0.2rem; flex: none; background: var(--surface-2); border-radius: 999px; padding: 0.15rem; }
.btn.step { min-width: 2.5rem; min-height: 2.5rem; padding: 0; font-size: 1.25rem; line-height: 1; border: 0; background: var(--surface); }
.qty-now { min-width: 1.5rem; text-align: center; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.btn.add { flex: none; min-height: 2.5rem; }
.btn.add.round { width: 2.5rem; padding: 0; font-size: 1.3rem; line-height: 1; display: grid; place-items: center; }
.btn.add:not(.round) { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 1rem; font-size: 0.85rem; }
.btn.add .plus { font-size: 1.1rem; line-height: 1; }

/* The basket bar: a dark pill that floats over the bottom of a stall's screen, above the navigation. */
.banners { padding: 0 1rem; }
.banner.info { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.banner { border-radius: 14px; border: 0; border-top: 0; box-shadow: 0 6px 18px rgba(30, 27, 25, 0.22); margin-bottom: 0.6rem; width: min(100%, 26rem); justify-self: center; font-size: 0.9rem; }
.banner.action.basket-bar { display: flex; align-items: center; gap: 0; background: var(--inverse); color: var(--inverse-text); border-radius: 999px; padding: 0.6rem 1rem; font-size: 0.85rem; font-weight: 600; min-height: 3rem; text-align: left; }
.bar-count { flex: none; display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem; border-radius: 999px; background: var(--brand); color: var(--brand-text); font-size: 0.75rem; font-weight: 700; margin-right: 0.5rem; }
.basket-bar .bar-text { opacity: 0.8; font-size: 0.8rem; font-weight: 500; }
.basket-bar .bar-dot { opacity: 0.4; margin: 0 0.4rem; }
.basket-bar .bar-total { font-weight: 700; font-size: 0.9rem; margin-right: auto; }
.bar-cta { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 700; font-size: 0.8rem; white-space: nowrap; }

/* Basket */
.basket-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0.5rem 0; font-size: 1rem; }
.amount { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.line-total { color: var(--muted); font-variant-numeric: tabular-nums; }
.basket .item { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.basket .item .line-total { grid-column: 1 / -1; justify-self: end; }
.btn.place { font-size: 1rem; margin: 0.5rem 0; }

/* An order */
.order-head { margin-bottom: 0.5rem; }
.order-head h1 { margin: 0; }
.order-code { font-size: 2rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.status { border-radius: var(--radius); padding: 0.9rem; margin-bottom: 0.75rem; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.status.tone-ok { border-color: var(--ok); }
.status.tone-warn { border-color: var(--new); }
.status.tone-bad { border-color: var(--danger); }
.status .headline { font-size: 1.15rem; margin-bottom: 0.3rem; }
.status p { margin: 0 0 0.3rem; }
.reason { font-weight: 600; }
.money-note { font-weight: 600; }
.pickup-window { font-weight: 600; }
h1:focus { outline: none; }
.deadline { font-weight: 600; display: flex; align-items: baseline; gap: 0.5rem; }
.countdown { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.countdown[data-urgency=warn]::before { content: '\26A0\FE0E\00A0'; }
.countdown[data-urgency=late] { color: var(--danger); text-decoration: underline; }
.pickup-code { display: grid; justify-items: center; gap: 0.2rem; background: var(--ok); color: #ffffff; border-radius: var(--radius); padding: 1rem; margin-bottom: 0.75rem; }
.pickup-code .meta { color: inherit; opacity: 0.9; }
.big-code { font-size: 3.2rem; letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }
.actions.stack { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; }
.actions.stack .btn { text-decoration: none; display: grid; place-items: center; }
.receipt { margin-top: 1rem; }
.lines { list-style: none; margin: 0.4rem 0; padding: 0; display: grid; gap: 0.25rem; }
.lines li { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 0.25rem; }
.qty { font-weight: 700; }
.order-card.tone-ok { border-left: 6px solid var(--ok); }
.order-card.tone-warn { border-left: 6px solid var(--new); }
.order-card.tone-bad { border-left: 6px solid var(--danger); }

/* Account */
.who { font-weight: 700; font-size: 1.05rem; word-break: break-word; }
.account .card { display: grid; gap: 0.75rem; }
.empty .btn, .empty a.btn { display: inline-grid; place-items: center; text-decoration: none; margin-top: 0.5rem; }
a.btn { display: inline-grid; place-items: center; text-decoration: none; color: var(--text); }
a.btn.primary { color: var(--brand-text); }