/* ============================================================
   The Takeout — Longridge
   Identity: kerbside oxblood + greaseproof paper + flame orange.
   Signature: the basket is a thermal receipt (see .receipt).
   ============================================================ */

:root {
  --oxblood:      #40101C;
  --oxblood-deep: #2A0810;
  --paper:        #FBF6EC;
  --paper-edge:   #EFE6D4;
  --ink:          #17110F;
  --flame:        #FF6A1F;
  --mustard:      #F5C451;
  --tile:         #C7DCD2;
  --ash:          #8C7F77;

  --display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --rail: 72px;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

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

a { color: inherit; }
img { max-width: 100%; display: block; }

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

.wrap { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- Type ---------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .92;
  margin: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mustard);
  margin: 0 0 .8rem;
}

/* ---------- Header ---------- */

.topbar {
  position: sticky; top: 0; z-index: 60;
  background: var(--oxblood-deep);
  border-bottom: 1px solid rgba(251, 246, 236, .12);
}
.topbar-inner {
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem 0;
}
.logo {
  font-family: var(--display);
  font-size: 1.45rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .02em;
  white-space: nowrap;
}
.logo span { color: var(--flame); }

.status {
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .3rem .55rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}
.status.is-open   { color: var(--tile); }
.status.is-closed { color: var(--mustard); }

.topbar-spacer { flex: 1; }

.call-link {
  font-family: var(--mono);
  font-size: .82rem;
  text-decoration: none;
  letter-spacing: .04em;
}
@media (max-width: 700px) { .call-link { display: none; } }

.basket-btn {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--flame);
  color: var(--ink);
  border: 0;
  padding: .62rem .9rem;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 600;
}
.basket-btn:hover { background: var(--mustard); }
a.basket-btn { text-decoration: none; display: inline-block; }

/* ---------- Navigation ---------- */

.mainnav { display: flex; gap: 1.05rem; margin-left: .5rem; }
.mainnav a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; color: rgba(251, 246, 236, .72); padding: .3rem 0;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.mainnav a:hover { color: var(--paper); }
.mainnav a[aria-current="page"] { color: var(--paper); border-bottom-color: var(--flame); }

.navtoggle {
  display: none; background: none; border: 0; color: var(--paper);
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: .2rem .35rem;
}

.drawer { display: none; flex-direction: column; border-top: 1px solid rgba(251, 246, 236, .14); }
.drawer.open { display: flex; }
.drawer a {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .06em;
  text-decoration: none; padding: .85rem 1.25rem;
  border-bottom: 1px solid rgba(251, 246, 236, .08);
}

@media (max-width: 900px) {
  .mainnav { display: none; }
  .navtoggle { display: block; }
}
@media (max-width: 560px) { .status { display: none; } }

/* ---------- Footer ---------- */

.foot-grid {
  display: grid; gap: 1.6rem; text-align: left;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-bottom: 1.4rem;
}
.foot-grid a { display: block; text-decoration: none; padding: .16rem 0; color: rgba(251, 246, 236, .7); }
.foot-grid a:hover { color: var(--paper); }
.foot-head {
  display: block; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mustard); margin-bottom: .5rem;
}
.foot-base { border-top: 1px solid rgba(251, 246, 236, .12); padding-top: 1rem; }

/* ---------- Account pages ---------- */

.auth-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.card { background: var(--paper); color: var(--ink); border-radius: 4px; padding: 1.5rem; }
.card h2 { font-size: 1.6rem; margin-bottom: .3rem; }
.card .sub { font-size: .86rem; color: #5A4F49; margin: 0 0 1.1rem; }
.card .btn { border-color: var(--ink); color: var(--ink); width: 100%; text-align: center; }
.card .btn-primary { color: var(--ink); }
.card table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.card th, .card td { text-align: left; padding: .5rem .3rem; border-bottom: 1px solid var(--paper-edge); }
.card th { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }
.err  { font-family: var(--mono); font-size: .78rem; color: #B23A2E; margin-bottom: .8rem; }
.good { font-family: var(--mono); font-size: .78rem; color: #1F7A4C; margin-bottom: .8rem; }

.prose { max-width: 62ch; }
.prose p { color: rgba(251, 246, 236, .82); margin: 0 0 1rem; }
.prose h2 { font-size: clamp(1.5rem, 4.5vw, 2.2rem); margin: 2.4rem 0 .9rem; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 3.4rem 0 3rem;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(255, 106, 31, .32) 0%, transparent 58%),
    var(--oxblood);
  overflow: hidden;
}
.hero::after {
  /* tiled splashback, drawn not decorated: it's the wall behind the counter */
  content: "";
  position: absolute; inset: auto 0 0 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--tile) 0 26px, var(--oxblood-deep) 26px 30px);
  opacity: .5;
}
.hero h1 {
  font-size: clamp(3rem, 13vw, 7.5rem);
  max-width: 12ch;
}
.hero h1 em { font-style: normal; color: var(--flame); }
.hero p.lede {
  max-width: 46ch;
  margin: 1.3rem 0 0;
  font-size: 1.02rem;
  color: rgba(251, 246, 236, .82);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }

.btn {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .85rem 1.35rem;
  border-radius: 2px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
.btn-primary { background: var(--flame); border-color: var(--flame); color: var(--ink); }
.btn-primary:hover { background: var(--mustard); border-color: var(--mustard); }
.btn:hover { background: rgba(251, 246, 236, .1); }
.btn-primary:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }

/* postcode checker */
.checker { display: flex; gap: .5rem; margin-top: 1.7rem; max-width: 420px; }
.checker input {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-size: .95rem; text-transform: uppercase;
  padding: .8rem .9rem;
  background: rgba(251, 246, 236, .07);
  border: 1px solid rgba(251, 246, 236, .3);
  border-radius: 2px; color: var(--paper);
}
.checker input::placeholder { color: rgba(251, 246, 236, .4); }
.checker-result { font-family: var(--mono); font-size: .82rem; margin-top: .7rem; min-height: 1.2rem; }
.checker-result.yes { color: var(--tile); }
.checker-result.no  { color: var(--mustard); }

/* ---------- Offers ---------- */

.offers { padding: 2.6rem 0 1rem; }
.offer-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.offer {
  border: 1px dashed rgba(245, 196, 81, .55);
  padding: 1.1rem 1.2rem;
  border-radius: 3px;
  background: rgba(245, 196, 81, .06);
}
.offer h3 { font-size: 1.35rem; color: var(--mustard); }
.offer p { margin: .5rem 0 .8rem; font-size: .88rem; color: rgba(251, 246, 236, .78); }
.offer code {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
  background: var(--mustard); color: var(--ink); padding: .25rem .5rem; border-radius: 2px;
}

/* ---------- Menu ---------- */

.menu-section { padding: 2.6rem 0 4rem; }
.menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.menu-head h2 { font-size: clamp(2rem, 6vw, 3.4rem); }

.cat-rail {
  position: sticky; top: 56px; z-index: 40;
  display: flex; gap: .4rem; overflow-x: auto;
  padding: .8rem 0; margin: 1rem 0 1.6rem;
  background: var(--oxblood);
  scrollbar-width: none;
}
.cat-rail::-webkit-scrollbar { display: none; }
.cat-rail button {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; padding: .5rem .8rem; border-radius: 2px; cursor: pointer;
  background: transparent; color: rgba(251, 246, 236, .7);
  border: 1px solid rgba(251, 246, 236, .22);
}
.cat-rail button[aria-current="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.cat { margin-bottom: 3rem; scroll-margin-top: 130px; }
.cat > h3 { font-size: 1.9rem; color: var(--paper); }
.cat > p.blurb { font-size: .88rem; color: rgba(251, 246, 236, .6); margin: .45rem 0 1.2rem; }

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

.dish {
  background: var(--paper);
  color: var(--ink);
  border-radius: 3px;
  padding: 0 0 1.1rem;
  display: flex; flex-direction: column; gap: .5rem;
  border-top: 3px solid transparent;
  overflow: hidden;
}
.dish > *:not(.dish-photo) { margin-inline: 1.1rem; }
.dish.is-popular { border-top-color: var(--flame); }

/* Dish photo — real photo when there is one, a tiled plate when there isn't */
.dish-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-edge);
  overflow: hidden;
  margin-bottom: .4rem;
}
.dish-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.dish:hover .dish-photo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .dish:hover .dish-photo img { transform: none; } }

.dish-photo.empty {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(23,17,15,.05) 0 10px, transparent 10px 20px),
    var(--tile);
}
.dish-photo.empty span {
  font-family: var(--display); font-size: 2.6rem; text-transform: uppercase;
  color: rgba(23,17,15,.28); letter-spacing: .04em;
}
.dish-photo .flag {
  position: absolute; top: .55rem; left: .55rem;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--flame); color: var(--ink); padding: .22rem .45rem; border-radius: 2px; font-weight: 600;
}
.dish-top { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.dish h4 { margin: 0; font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; }
.dish .price { font-family: var(--mono); font-size: .95rem; font-weight: 600; white-space: nowrap; }
.dish .price.tbc { color: var(--ash); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.dish .desc { margin: 0; font-size: .85rem; color: #5A4F49; }
.dish .meta { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }
.dish .tag { display: inline-block; margin-right: .45rem; }
.dish .tag.v   { color: #3F7A5A; }
.dish .tag.hot { color: #C0392B; }

.dish-add {
  margin-top: auto;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 2px;
  padding: .6rem .8rem; cursor: pointer; align-self: flex-start;
}
.dish-add:hover { background: var(--flame); color: var(--ink); }
.dish-add:disabled { background: var(--paper-edge); color: var(--ash); cursor: not-allowed; }

.cat-empty {
  font-family: var(--mono); font-size: .8rem; color: rgba(251, 246, 236, .55);
  border: 1px dashed rgba(251, 246, 236, .25); padding: 1rem; border-radius: 3px;
}

/* ---------- Dish picker: choose your options ---------- */

.picker-overlay {
  position: fixed; inset: 0; z-index: 96;
  background: rgba(20, 6, 11, .78);
  display: none;
}
.picker-overlay.open { display: block; }

.picker {
  position: fixed; z-index: 97;
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(520px, 100%); max-height: 92vh;
  background: var(--paper); color: var(--ink);
  border-radius: 6px 6px 0 0;
  display: none; flex-direction: column;
  box-shadow: var(--shadow);
}
.picker.open { display: flex; }
@media (min-width: 760px) {
  .picker { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: 6px; }
}

.picker-photo { position: relative; aspect-ratio: 16 / 9; background: var(--paper-edge); flex: none; }
.picker-photo img { width: 100%; height: 100%; object-fit: cover; }
.picker-photo.empty {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, rgba(23,17,15,.05) 0 10px, transparent 10px 20px), var(--tile);
}
.picker-photo.empty span { font-family: var(--display); font-size: 3rem; color: rgba(23,17,15,.28); }
.picker-close {
  position: absolute; top: .6rem; right: .6rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(23,17,15,.75); color: var(--paper); font-size: 1.2rem; line-height: 1;
}

.picker-body { overflow-y: auto; padding: 1.1rem 1.3rem 1rem; }
.picker-body h3 { font-family: var(--display); font-size: 1.7rem; text-transform: uppercase; margin: 0; }
.picker-body .desc { font-size: .88rem; color: #5A4F49; margin: .45rem 0 .2rem; }
.picker-body .allergens {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ash);
}

.ogroup { margin-top: 1.3rem; }
.ogroup-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; border-bottom: 1px solid var(--paper-edge); padding-bottom: .35rem; }
.ogroup-head h4 { margin: 0; font-size: .98rem; font-weight: 650; }
.ogroup-head .rule { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }
.ogroup-head .rule.required { color: var(--flame); }

.opt {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .2rem; border-bottom: 1px dotted var(--paper-edge);
  cursor: pointer; font-size: .9rem;
}
.opt input { width: 18px; height: 18px; accent-color: #17110F; flex: none; }
.opt .oname { flex: 1; }
.opt .oprice { font-family: var(--mono); font-size: .82rem; white-space: nowrap; }
.opt.unavailable { cursor: not-allowed; opacity: .5; }
.opt.unavailable .oprice { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }

.picker-foot {
  flex: none; border-top: 1px solid var(--paper-edge);
  padding: .9rem 1.3rem 1.2rem; display: flex; gap: .7rem; align-items: center;
  background: var(--paper);
}
.picker-qty { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); }
.picker-qty button {
  width: 34px; height: 34px; border: 1px solid var(--ink); background: transparent;
  cursor: pointer; font-family: var(--mono); font-size: 1rem; border-radius: 2px;
}
.picker-foot .btn { flex: 1; text-align: center; border-color: var(--ink); }
.picker-warn { font-family: var(--mono); font-size: .68rem; color: #B23A2E; padding: 0 1.3rem .6rem; min-height: 1rem; }

/* option lines inside the receipt */
.rline .opts { font-size: .7rem; color: #6B615A; line-height: 1.45; margin-top: .15rem; }

/* ---------- SIGNATURE: the receipt basket ---------- */

.receipt-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 6, 11, .72);
  display: none;
}
.receipt-overlay.open { display: block; }

.receipt {
  position: fixed; z-index: 95;
  top: 0; right: 0; bottom: 0;
  width: min(390px, 100%);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  display: none;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.receipt.open { display: flex; }

/* torn thermal-paper edge on the left of the drawer */
.receipt::before {
  content: "";
  position: absolute; left: -9px; top: 0; bottom: 0; width: 10px;
  background:
    linear-gradient(135deg, var(--paper) 50%, transparent 50%) 0 0 / 10px 14px repeat-y,
    linear-gradient(225deg, var(--paper) 50%, transparent 50%) 0 7px / 10px 14px repeat-y;
}

.receipt-head { padding: 1.2rem 1.4rem .6rem; text-align: center; border-bottom: 1px dashed #C8BEB0; }
.receipt-head .shop { font-family: var(--display); font-size: 1.6rem; text-transform: uppercase; }
.receipt-head .addr { font-size: .66rem; line-height: 1.5; color: #6B615A; margin-top: .3rem; }
.receipt-close {
  position: absolute; top: .7rem; right: .8rem;
  background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--ink); line-height: 1;
}

.receipt-mode { display: flex; gap: .4rem; padding: .8rem 1.4rem; border-bottom: 1px dashed #C8BEB0; }
.receipt-mode button {
  flex: 1; font-family: var(--mono); font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  padding: .55rem; border: 1px solid var(--ink); background: transparent; cursor: pointer; border-radius: 2px;
}
.receipt-mode button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.receipt-lines { flex: 1; overflow-y: auto; padding: 1rem 1.4rem; font-size: .82rem; }
.rline { display: grid; grid-template-columns: 1fr auto; gap: .5rem; padding: .45rem 0; }
.rline .n { line-height: 1.35; }
.rline .qty { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; }
.rline .qty button {
  width: 22px; height: 22px; border: 1px solid #C8BEB0; background: transparent;
  cursor: pointer; font-family: var(--mono); border-radius: 2px;
}
.rline .amt { font-variant-numeric: tabular-nums; }
.receipt-empty { text-align: center; color: var(--ash); font-size: .8rem; padding: 2.5rem 0; }

.receipt-totals { border-top: 1px dashed #C8BEB0; padding: .9rem 1.4rem; font-size: .8rem; }
.trow { display: flex; justify-content: space-between; padding: .18rem 0; }
.trow.discount { color: #1F7A4C; }
.trow.grand { font-size: 1.02rem; font-weight: 700; border-top: 1px solid var(--ink); margin-top: .5rem; padding-top: .5rem; }
.trow .lbl::after { content: " "; }

.promo { display: flex; gap: .4rem; padding: 0 1.4rem .8rem; }
.promo input {
  flex: 1; min-width: 0; font-family: var(--mono); font-size: .78rem; text-transform: uppercase;
  padding: .5rem .6rem; border: 1px solid #C8BEB0; border-radius: 2px; background: #fff;
}
.promo button {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .5rem .7rem; border: 1px solid var(--ink); background: transparent; cursor: pointer; border-radius: 2px;
}
.promo-msg { font-size: .7rem; padding: 0 1.4rem .6rem; min-height: 1rem; }
.promo-msg.ok { color: #1F7A4C; }
.promo-msg.bad { color: #B23A2E; }

.receipt-foot { padding: 1rem 1.4rem 1.4rem; border-top: 1px dashed #C8BEB0; }
.receipt-foot .btn { width: 100%; text-align: center; border-color: var(--ink); color: var(--ink); }
.receipt-foot .btn-primary { color: var(--ink); }
.receipt-note { font-size: .68rem; color: var(--ash); text-align: center; margin-top: .7rem; line-height: 1.5; }

/* ---------- Checkout form ---------- */

.field { margin-bottom: .8rem; }
.field label {
  display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ash); margin-bottom: .3rem;
}
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--body); font-size: .92rem;
  padding: .65rem .7rem; border: 1px solid #C8BEB0; border-radius: 2px; background: #fff; color: var(--ink);
}
.field textarea { min-height: 70px; resize: vertical; }

/* ---------- Loyalty strip ---------- */

.loyalty { padding: 2.4rem 0; border-top: 1px solid rgba(251, 246, 236, .12); }
.stamps { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: 1rem; }
.stamp {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(251, 246, 236, .35);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .7rem; color: rgba(251, 246, 236, .45);
}
.stamp.filled { background: var(--flame); border-color: var(--flame); color: var(--ink); font-weight: 700; }

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

.info { padding: 3rem 0; border-top: 1px solid rgba(251, 246, 236, .12); }
.info-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.info h3 { font-size: 1.3rem; margin-bottom: .8rem; }
.hours-list { font-family: var(--mono); font-size: .82rem; list-style: none; padding: 0; margin: 0; }
.hours-list li { display: flex; justify-content: space-between; padding: .28rem 0; border-bottom: 1px dotted rgba(251, 246, 236, .18); }
.hours-list li.today { color: var(--mustard); }
.info p, .info a { font-size: .88rem; color: rgba(251, 246, 236, .8); }

footer.site {
  background: var(--oxblood-deep);
  padding: 1.6rem 0;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .05em;
  color: rgba(251, 246, 236, .55);
  text-align: center;
}

/* ---------- AI order line ---------- */

.assistant-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 70;
  background: var(--mustard); color: var(--ink); border: 0; border-radius: 50px;
  padding: .8rem 1.1rem; cursor: pointer;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  box-shadow: var(--shadow);
}
.assistant-panel {
  position: fixed; right: 1rem; bottom: 4.6rem; z-index: 75;
  width: min(360px, calc(100% - 2rem)); height: min(460px, 70vh);
  background: var(--paper); color: var(--ink); border-radius: 4px;
  display: none; flex-direction: column; box-shadow: var(--shadow); overflow: hidden;
}
.assistant-panel.open { display: flex; }
.assistant-head {
  padding: .8rem 1rem; background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}
.assistant-head button { background: none; border: 0; color: var(--paper); cursor: pointer; font-size: 1.1rem; }
.assistant-log { flex: 1; overflow-y: auto; padding: 1rem; font-size: .86rem; display: flex; flex-direction: column; gap: .7rem; }
.msg { padding: .55rem .75rem; border-radius: 3px; max-width: 88%; }
.msg.bot { background: var(--paper-edge); align-self: flex-start; }
.msg.me  { background: var(--ink); color: var(--paper); align-self: flex-end; }
.assistant-input { display: flex; gap: .4rem; padding: .7rem; border-top: 1px solid var(--paper-edge); }
.assistant-input input { flex: 1; min-width: 0; padding: .6rem; border: 1px solid #C8BEB0; border-radius: 2px; font-family: var(--body); }
.assistant-input button {
  background: var(--flame); border: 0; padding: .6rem .8rem; border-radius: 2px; cursor: pointer;
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; font-weight: 700;
}

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(140%);
  background: var(--ink); color: var(--paper); padding: .75rem 1.1rem; border-radius: 3px;
  font-family: var(--mono); font-size: .78rem; z-index: 100; transition: transform .28s ease;
  box-shadow: var(--shadow);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- Admin & kitchen shells ---------- */

.panel {
  background: var(--paper); color: var(--ink);
  border-radius: 4px; padding: 1.4rem; margin-bottom: 1.2rem;
}
.panel h2 { font-size: 1.5rem; margin-bottom: .9rem; }
.panel table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.panel th, .panel td { text-align: left; padding: .55rem .4rem; border-bottom: 1px solid var(--paper-edge); vertical-align: top; }
.panel th { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }

.admin-nav { display: flex; gap: .4rem; flex-wrap: wrap; padding: 1.2rem 0; }
.admin-nav a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .5rem .8rem; border: 1px solid rgba(251, 246, 236, .3); border-radius: 2px; text-decoration: none;
}
.admin-nav a.active { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.ticket-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ticket {
  background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: .8rem;
  padding: 1rem; border-radius: 3px; border-left: 5px solid var(--ash);
}
.ticket.new       { border-left-color: var(--flame); }
.ticket.cooking   { border-left-color: var(--mustard); }
.ticket.ready     { border-left-color: #3F7A5A; }
.ticket h4 { font-family: var(--display); font-size: 1.3rem; margin: 0 0 .3rem; }
.ticket ul { list-style: none; padding: 0; margin: .6rem 0; }
.ticket li { display: flex; justify-content: space-between; padding: .15rem 0; }
.ticket-actions { display: flex; gap: .4rem; margin-top: .7rem; flex-wrap: wrap; }
.ticket-actions button {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .45rem .6rem; border: 1px solid var(--ink); background: transparent; cursor: pointer; border-radius: 2px;
}

.notice {
  font-family: var(--mono); font-size: .78rem;
  background: rgba(245, 196, 81, .14); border: 1px dashed var(--mustard);
  padding: .8rem 1rem; border-radius: 3px; margin-bottom: 1rem; color: var(--mustard);
}

/* Print: only the ticket, sized for 80mm thermal paper */
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area {
    position: absolute; left: 0; top: 0; width: 72mm;
    font-family: var(--mono); font-size: 11px; color: #000; background: #fff;
  }
  .ticket-actions, .no-print { display: none !important; }
}