/* ==========================================================================
   Takeaway template — layout and components.
   All colour and type comes from brand.css, which apply-brand.mjs generates
   from config/brand.json. Avoid hard-coded colours in this file.
   ========================================================================== */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.55;
  font-size: 16px;
  /* Room for the sticky basket bar on phones. */
  padding-bottom: env(safe-area-inset-bottom);
}

h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); letter-spacing: -.01em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--link, var(--primary)); }
img { max-width: 100%; display: block; }

.wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }
.wrap-narrow { width: min(680px, 100% - 2rem); margin-inline: auto; }
.stack > * + * { margin-top: var(--gap, 1rem); }
.muted { color: var(--ink-muted); }
.small { font-size: .875rem; }
.tiny { font-size: .8rem; }
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600;
  padding: .75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .06s ease, opacity .15s ease;
  min-height: 46px;   /* comfortable thumb target */
}
.btn:hover { background: var(--primary-dark); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-alt); }
.btn-quiet { background: transparent; color: var(--primary); padding-inline: .5rem; min-height: 0; }
.btn-quiet:hover { background: transparent; text-decoration: underline; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: var(--danger); filter: brightness(.9); }
.btn-sm { padding: .4rem .75rem; min-height: 36px; font-size: .875rem; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 64px;
}
.brand-logo { height: 38px; width: auto; color: var(--ink); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.site-nav a {
  color: var(--ink); text-decoration: none; font-weight: 600;
  padding: .5rem .75rem; border-radius: 8px; font-size: .95rem;
}
.site-nav a:hover { background: var(--surface-alt); }
.site-nav a[aria-current="page"] { color: var(--primary); }
@media (max-width: 640px) {
  .site-nav a.nav-secondary { display: none; }
}

/* --------------------------------------------------------------- shop state */

.shop-banner {
  padding: .6rem 1rem; text-align: center; font-weight: 600; font-size: .9rem;
  background: var(--accent); color: #1c1917;
}
.shop-banner[hidden] { display: none !important; }
.shop-banner.is-closed { background: var(--danger); color: #fff; }

.status-dot {
  width: .55rem; height: .55rem; border-radius: 50%; display: inline-block;
  background: var(--ink-muted); flex: none;
}
.status-dot.is-open { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); }
.status-dot.is-closed { background: var(--danger); }

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding: clamp(3rem, 10vw, 6rem) 0;
  background: var(--surface-alt);
  overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: var(--hero-image, none) center/cover no-repeat;
  opacity: .22; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; max-width: 42rem; }

/* ---------------------------------------------------------- photo hero --
   For a shop with real food photography. The image runs full-bleed with a
   gradient scrim over it, so the headline stays readable whatever the photo
   happens to be, in either theme. Set theme.heroTreatment to "photo". */
.hero--photo { background: #0d0b0a; padding-block: clamp(4rem, 14vw, 8rem); }
.hero--photo::after { opacity: 1; }
.hero--photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .48) 48%, rgb(0 0 0 / .12) 100%),
    linear-gradient(to top, rgb(0 0 0 / .55) 0%, transparent 50%);
}
/* These use .hero.hero--photo rather than .hero--photo on purpose. The plain
   `.hero .tagline` rule further down the file has the same specificity and
   would otherwise win on source order, leaving the tagline muted grey on top
   of a dark photo — which is exactly as unreadable as it sounds. */
.hero.hero--photo h1 { color: #ffffff; }
.hero.hero--photo .tagline { color: #ffffff; opacity: 1; }
.hero.hero--photo .eyebrow { color: var(--accent); }

/* A photo hero sits over whatever picture the client supplies, which may be
   light, busy, or both. A soft shadow keeps the text legible regardless,
   without needing a heavier scrim over the food. */
.hero.hero--photo h1,
.hero.hero--photo .tagline,
.hero.hero--photo .eyebrow { text-shadow: 0 1px 4px rgb(0 0 0 / .65); }
/* The ghost button needs a light border against the photo, not the page border. */
.hero--photo .btn-ghost { color: #fff; border-color: rgb(255 255 255 / .55); }
.hero--photo .btn-ghost:hover { background: rgb(255 255 255 / .12); }
.hero .tagline { font-size: 1.15rem; color: var(--ink-muted); margin-bottom: 1.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.eyebrow {
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
  font-weight: 700; color: var(--primary); margin-bottom: .75rem;
}

/* ---------------------------------------------------------------- showcase */

/* Photo strip on the home page. Collapses to nothing when brand.json defines
   no showcase, so a shop with no photography never shows an empty band. */
.showcase-section:not(:has(.showcase-tile)) { display: none; }

.showcase {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .showcase { grid-template-columns: repeat(4, 1fr); } }

.showcase-tile {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); text-decoration: none;
  aspect-ratio: 4 / 3; background: var(--surface-alt);
}
.showcase-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.showcase-tile:hover img { transform: scale(1.06); }
.showcase-tile span {
  position: absolute; inset: auto 0 0 0;
  padding: 1.75rem .85rem .7rem;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / .8), transparent);
}
.showcase-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* -------------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card-alt { background: var(--surface-alt); }

.grid { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.hours-row, .zone-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px dashed var(--border);
}
.hours-row:last-child, .zone-row:last-child { border-bottom: 0; }
.hours-row.is-closed { color: var(--ink-muted); }
.hours-row.is-today { font-weight: 700; color: var(--primary); }
.hours-day, .zone-label { font-weight: 600; }
.zone-label em { font-style: normal; color: var(--ink-muted); font-weight: 400; font-size: .85em; }
.zone-meta, .hours-time { color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- menu layout */

.menu-layout { display: grid; gap: 2rem; align-items: start; padding-block: 1.5rem 7rem; }
/* Grid and flex children default to min-width:auto, which lets long words and
   nowrap prices push a column wider than the phone. Opt every track back to 0. */
.menu-layout > * { min-width: 0; }
@media (min-width: 960px) {
  .menu-layout { grid-template-columns: minmax(0, 1fr) 340px; padding-bottom: 3rem; }
}

/* The category pills WRAP rather than scroll sideways.
   A sticky, horizontally-scrollable strip sits exactly where a thumb swipes to
   scroll the page, and any lateral wobble in that swipe pans it — which reads
   as the page sliding left and right. There is now no horizontal scroller on
   the page at all; narrow screens get the picker button below instead. */
.category-nav {
  position: sticky; top: 64px; z-index: 30;
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: .75rem 0; margin-bottom: .5rem;
  background: var(--surface);
  min-width: 0; max-width: 100%;
}
@media (max-width: 719px) { .category-nav { display: none; } }
.category-nav a {
  flex: none; padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid var(--border); text-decoration: none;
  color: var(--ink); font-size: .9rem; font-weight: 600; white-space: nowrap;
}
.category-nav a.is-active { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* Phone category picker — replaces the pill rail below 720px.
   Styled as an unmistakable control: tinted with the brand colour, a list icon,
   a label saying what it does, and a filled chevron. An earlier version used
   the surface-alt background with a small text caret, which on a dark theme was
   almost indistinguishable from a heading and nobody could tell it was
   tappable. */
.category-picker {
  position: sticky; top: 64px; z-index: 30;
  display: none; width: 100%; align-items: center; gap: .75rem;
  margin: .75rem 0 1.25rem; padding: .7rem .8rem; min-height: 56px;
  font: inherit; text-align: left; cursor: pointer;
  color: var(--ink);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 10%, transparent);
}
@media (max-width: 719px) { .category-picker { display: flex; } }
.category-picker:active { transform: translateY(1px); }
.category-picker:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.picker-icon {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink);
}

.picker-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.picker-hint {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--primary);
}
.picker-current {
  font-size: 1rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.picker-caret {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary); color: var(--primary-ink);
}

.category-list { display: grid; gap: .3rem; }
.category-list button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .8rem .9rem; font: inherit; font-weight: 600; text-align: left;
  color: var(--ink); background: transparent;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.category-list button:hover { background: var(--surface-alt); }
.category-list button.is-active { border-color: var(--primary); color: var(--primary); }
.category-list .cat-count { margin-left: auto; color: var(--ink-muted); font-weight: 400; font-size: .85rem; }

.menu-section { scroll-margin-top: 130px; margin-bottom: 2.5rem; }
.menu-section > header { margin-bottom: 1rem; }
.menu-section > header p { margin: 0; color: var(--ink-muted); }

.item-list { display: grid; gap: .75rem; }
.item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start;
  width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; font: inherit; color: inherit;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.item:hover { border-color: var(--primary); box-shadow: 0 2px 12px color-mix(in srgb, var(--ink) 8%, transparent); }
.item:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.item-name { font-weight: 700; margin: 0 0 .15rem; font-size: 1rem; }
.item-desc { margin: 0; color: var(--ink-muted); font-size: .9rem; }
.item-name, .item-desc, .basket-line-name, .basket-line-opts { overflow-wrap: anywhere; }
.item-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------ food photos */

/* An item with a photo gains a leading image column. Items without one keep
   the two-column layout, so a half-photographed menu still looks deliberate. */
.item.has-photo { grid-template-columns: 76px minmax(0, 1fr) auto; }
@media (min-width: 720px) {
  .item.has-photo { grid-template-columns: 96px minmax(0, 1fr) auto; }
}

.item-thumb {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 10px; background: var(--surface-alt);
  grid-row: span 2;
}

/* Photo at the top of the item sheet. */
.sheet-photo {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  display: block; background: var(--surface-alt);
  border-radius: var(--radius) var(--radius) 0 0;
}
@media (min-width: 720px) { .sheet-photo { border-radius: var(--radius) var(--radius) 0 0; } }
.sheet-photo[hidden] { display: none !important; }

/* A category banner, when a category names one. */
.category-banner {
  width: 100%; aspect-ratio: 4 / 1; object-fit: cover;
  border-radius: var(--radius); margin-bottom: 1rem;
}

/* Sold out: still listed, plainly marked, not tappable. Hiding it outright
   made dishes vanish mid-visit, which looks like a bug rather than a shop that
   has run out. */
.item.is-unavailable {
  opacity: .55; cursor: not-allowed;
  background: var(--surface-alt);
}
.item.is-unavailable:hover { border-color: var(--border); box-shadow: none; }
.item.is-unavailable .item-name { text-decoration: line-through; }
.item.is-unavailable .item-price { text-decoration: line-through; }
.item.is-unavailable .item-thumb { filter: grayscale(1); }

.tag.tag-sold {
  background: var(--danger); color: #fff; border-color: transparent;
  text-decoration: none;
}

.tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .4rem; }
.tag {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .15rem .4rem; border-radius: 4px;
  background: var(--surface-alt); color: var(--ink-muted); border: 1px solid var(--border);
}
.tag.tag-popular { background: var(--accent); color: #1c1917; border-color: transparent; }
.tag.tag-v, .tag.tag-vg { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }

/* -------------------------------------------------------------------- basket */

.basket { position: sticky; top: 80px; }
.basket-body { max-height: 52vh; overflow-y: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
.basket-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.basket-line:last-child { border-bottom: 0; }
.basket-line-name { font-weight: 600; font-size: .95rem; }
.basket-line-opts { color: var(--ink-muted); font-size: .82rem; margin-top: .15rem; }
.basket-line-price { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.qty button {
  width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink);
  font-size: 1.1rem; line-height: 1; cursor: pointer; font-family: inherit;
}
.qty button:hover { background: var(--surface-alt); }
.qty output { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.totals { border-top: 1px solid var(--border); padding-top: .75rem; margin-top: .75rem; }
.totals-row { display: flex; justify-content: space-between; padding: .2rem 0; font-size: .92rem; }
.totals-row.is-total { font-size: 1.15rem; font-weight: 700; padding-top: .5rem; margin-top: .4rem; border-top: 1px solid var(--border); }
.totals-row span:last-child { font-variant-numeric: tabular-nums; }

/* Phone: the basket collapses to a bar pinned above the thumb. */
.basket-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px color-mix(in srgb, var(--ink) 10%, transparent);
  display: flex; gap: 1rem; align-items: center;
}
.basket-bar[hidden] { display: none !important; }
@media (min-width: 960px) { .basket-bar { display: none !important; } }
@media (max-width: 959px) { .basket-desktop { display: none; } }

/* ----------------------------------------------------------- basket button */

/* Appears in the header on every page once there is something in the basket,
   so a customer who taps the logo can still get back to what they chose. */
.basket-button {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: .5rem .8rem; min-height: 40px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.basket-button:hover { background: var(--surface-alt); border-color: var(--primary); }
.basket-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.basket-button[hidden] { display: none !important; }
.basket-button-icon { font-size: 1rem; line-height: 1; }
@media (max-width: 560px) { .basket-button-label { display: none; } }

.basket-count-pill {
  min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px;
  background: var(--primary); color: var(--primary-ink);
  font-size: .78rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Per-line controls inside the basket. */
.basket-line-controls {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-top: .45rem;
}
.line-remove { color: var(--ink-muted); padding-inline: 0; }
.line-remove:hover { color: var(--danger); }
.qty button[disabled] { opacity: .35; cursor: not-allowed; }

/* The bottom bar's summary is a tap target that opens the basket. */
#basket-bar-summary {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  font: inherit; text-align: left; cursor: pointer;
  background: transparent; border: 0; color: inherit; padding: 0;
}
#basket-bar-summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.basket-bar-view {
  font-size: .78rem; color: var(--primary); font-weight: 600;
}

/* A sheet footer that stacks, for the basket rather than the item editor. */
.sheet-foot-stack { flex-direction: column; align-items: stretch; gap: .6rem; }

/* -------------------------------------------------------------------- modal */

dialog.sheet {
  border: 0; padding: 0; background: transparent;
  width: min(560px, 100%); max-width: 100%;
  max-height: 92dvh; margin: auto auto 0;
}
@media (min-width: 720px) { dialog.sheet { margin: auto; } }
dialog.sheet::backdrop { background: rgb(0 0 0 / .55); backdrop-filter: blur(2px); }
.sheet-inner {
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius) var(--radius) 0 0;
  max-height: 92dvh; display: flex; flex-direction: column;
}
@media (min-width: 720px) { .sheet-inner { border-radius: var(--radius); } }
.sheet-head { padding: 1.25rem 1.25rem .75rem; border-bottom: 1px solid var(--border); }
.sheet-head h2 { margin-bottom: .25rem; }
.sheet-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.sheet-foot { padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); display: flex; gap: .75rem; align-items: center; }
.sheet-close {
  position: absolute; top: .75rem; right: .75rem;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}

/* ------------------------------------------------------------------- fields */

.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.field .hint { font-weight: 400; color: var(--ink-muted); font-size: .82rem; }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"],
input[type="password"], input[type="search"], select, textarea {
  width: 100%; font: inherit; color: var(--ink);
  padding: .7rem .85rem; min-height: 46px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
}
textarea { min-height: 92px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 40%, transparent);
  outline-offset: 1px; border-color: var(--primary);
}
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }

.option-group { margin-bottom: 1.25rem; }
.option-group > h3 { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.option-group .req { font-size: .75rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: .05em; }
.choice {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; margin-bottom: .4rem;
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.choice:hover { background: var(--surface-alt); }
.choice:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.choice input { accent-color: var(--primary); width: 20px; height: 20px; flex: none; margin: 0; }
.choice .choice-name { flex: 1; }
.choice .choice-price { color: var(--ink-muted); font-variant-numeric: tabular-nums; font-size: .9rem; }

/* Segmented control for collection vs delivery. */
.segmented { display: grid; grid-auto-flow: column; gap: .5rem; margin-bottom: 1.25rem; }
.segmented label {
  text-align: center; padding: .85rem .5rem; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; font-weight: 600;
}
.segmented label:has(input:checked) {
  border-color: var(--primary); background: var(--primary); color: var(--primary-ink);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented .seg-sub { display: block; font-weight: 400; font-size: .8rem; opacity: .8; }

/* ------------------------------------------------------------------ notices */

.notice {
  padding: .85rem 1rem; border-radius: 10px; font-size: .92rem;
  border: 1px solid var(--border); background: var(--surface-alt);
}
.notice[hidden] { display: none !important; }
.notice-error { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); }
.notice-ok { border-color: var(--success); background: color-mix(in srgb, var(--success) 8%, transparent); }

.spinner {
  width: 1em; height: 1em; border-radius: 50%; display: inline-block;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--border) 50%, var(--surface-alt) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 8px;
  height: 84px; margin-bottom: .75rem;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* -------------------------------------------------------------- order track */

.track-steps { display: grid; gap: .5rem; margin: 1.5rem 0; }
.track-step { display: flex; gap: .85rem; align-items: center; padding: .75rem 1rem; border-radius: 10px; border: 1px solid var(--border); }
.track-step .bullet {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .85rem; font-weight: 700;
  background: var(--surface-alt); color: var(--ink-muted); border: 1px solid var(--border);
}
.track-step.is-done .bullet { background: var(--success); color: #fff; border-color: transparent; }
.track-step.is-current { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.track-step.is-current .bullet { background: var(--primary); color: var(--primary-ink); border-color: transparent; }

/* A finished order is a success, not a warning — green, with a tick. */
.track-complete {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.15rem; margin-bottom: .75rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border: 1px solid var(--success);
  color: var(--success);
  font-weight: 700; font-size: 1.05rem;
}
.track-complete-tick {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--success); color: #fff; font-size: .95rem;
}

/* "Now" marker on the step currently in progress. */
.track-now {
  margin-left: auto; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .15rem .45rem; border-radius: 999px;
  background: var(--primary); color: var(--primary-ink);
}

/* A brief highlight when the status moves while the customer is watching. */
@keyframes track-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}
.track-steps.just-changed { animation: track-pulse 1.1s ease-out 2; border-radius: 12px; }

/* Reassures the customer the page is updating itself. */
.live-indicator {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; color: var(--ink-muted);
}
.live-indicator[hidden] { display: none !important; }
.live-dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--success);
  animation: live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}

.ref-badge {
  display: inline-block; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.6rem; font-weight: 700; letter-spacing: .12em;
  padding: .5rem 1rem; border-radius: 10px;
  background: var(--surface-alt); border: 1px dashed var(--border);
}

/* ------------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--border); background: var(--surface-alt);
  padding: 2.5rem 0; margin-top: 3rem; font-size: .9rem;
}
.site-footer .grid { gap: 2rem; }
.site-footer a { color: var(--ink); }
.footer-bottom {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
  color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}
.allergen { font-size: .82rem; color: var(--ink-muted); }

/* --------------------------------------------------------------- PWA prompt */

.install-prompt {
  position: fixed; left: 1rem; right: 1rem; bottom: 5.5rem; z-index: 60;
  padding: 1rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--primary);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--ink) 20%, transparent);
  display: flex; gap: 1rem; align-items: center;
}
.install-prompt[hidden] { display: none !important; }
@media (min-width: 720px) { .install-prompt { left: auto; width: 360px; bottom: 1.5rem; right: 1.5rem; } }