/* ============================================================================
   MANRAJ TANDOORI JUNCTION — brand theme
   Palette sampled directly from the official logo artwork (lOGO FILE.pdf):
   chilli red, deep chilli maroon, flame orange, and the "INDIAN FOOD" green.
   Everything sits on a clean white / warm-neutral base so the logo's red does
   the talking instead of competing with a heavy background.
   ============================================================================ */
:root {
  /* Raw brand colours, sampled from the logo */
  --brand-red: #c5161c;
  --brand-red-dark: #9c1015;
  --brand-chilli: #730b0e;
  --brand-flame: #f57215;
  --brand-flame-red: #f1471c;
  --brand-green: #006b30;
  --brand-green-light: #66c530;

  /* Semantic tokens */
  --color-primary: var(--brand-red);
  --color-primary-dark: var(--brand-red-dark);
  --color-accent: var(--brand-green);
  --color-accent-dark: #005124;

  --color-bg: #ffffff;
  --color-bg-alt: #faf6f1;          /* warm neutral, barely-there */
  --color-bg-tint: #fdf0ef;         /* faintest red wash */
  --color-dark: #1b1512;            /* neutral charcoal, not maroon */
  --color-dark-alt: #2a221e;
  --color-text: #1f1a17;
  --color-text-muted: #6b615a;
  --color-card-bg: #ffffff;
  --color-border: #e9e3dc;
  --color-border-strong: #d8cfc5;
  --color-on-dark: #f6f1ea;

  /* Typography — geometric sans for headings (echoes the logo's heavy
     rounded letterforms), neutral sans for body copy. */
  --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(31, 26, 23, 0.06);
  --shadow: 0 2px 10px rgba(31, 26, 23, 0.07);
  --shadow-lg: 0 12px 32px rgba(31, 26, 23, 0.12);
  --max-width: 1080px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters now that images carry width/height attributes — without
   it, a photo squeezed narrower than its natural width would stretch. */
img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.4em;
  line-height: 1.2;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header / Nav ---------- */
.site-header {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.brand { display: flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand-logo {
  height: 46px;
  width: auto;
  display: block;
}
.main-nav { display: flex; align-items: center; gap: 20px; }
.main-nav a {
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 2px;
  display: inline-block;
}
.main-nav a:hover { text-decoration: none; color: var(--color-primary); }
.cart-button {
  background: var(--color-primary);
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--font-body);
  border: none;
  cursor: pointer;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease;
}
.cart-button:hover { background: var(--color-primary-dark); text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
  padding: 72px 0 64px;
  background:
    radial-gradient(ellipse 80% 60% at 15% 0%, rgba(245, 114, 21, 0.10), transparent 70%),
    radial-gradient(ellipse 70% 60% at 95% 100%, rgba(197, 22, 28, 0.07), transparent 70%),
    var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.hero-copy { text-align: left; }
.hero-photo img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.hero h1 {
  font-size: 3.1rem;
  margin-bottom: 16px;
}
.hero h1 .accent { color: var(--color-primary); }
.hero p {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  max-width: 520px;
  margin: 0 0 28px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo { max-width: 480px; }
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  min-height: 48px;
  box-shadow: 0 4px 14px rgba(197, 22, 28, 0.22);
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-primary:hover { background: var(--color-primary-dark); text-decoration: none; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { background: var(--color-border-strong); box-shadow: none; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text);
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  min-height: 48px;
  border: 1.5px solid var(--color-border-strong);
  cursor: pointer;
}
.btn-secondary:hover { text-decoration: none; background: #fff; border-color: var(--color-text-muted); }
/* Kept for backwards compatibility with existing markup — on the new light
   theme the default secondary already reads correctly on light backgrounds. */
.btn-secondary-on-light { color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary-on-light:hover { background: #fff; }

/* ---------- Sections ---------- */
section { padding: 64px 0; }
.section-title { text-align: center; margin-bottom: 40px; }
.section-title .eyebrow {
  display: block;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title h2 { font-size: 2rem; margin: 0; }
.divider, .divider-gold {
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-flame), var(--brand-red));
  margin: 16px auto 0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.info-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.info-card h3 { font-size: 1.05rem; color: var(--color-primary); }
.info-card p { color: var(--color-text-muted); margin: 0; font-size: 0.95rem; }

/* ---------- About / Contact ---------- */
.about-section { background: var(--color-bg-alt); }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.contact-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.contact-card .icon { font-size: 1.5rem; display: block; margin-bottom: 10px; }
.contact-card strong { display: block; margin-bottom: 6px; font-family: var(--font-heading); }
.contact-card p { color: var(--color-text-muted); font-size: 0.93rem; margin: 0 0 8px; }
.contact-card a { color: var(--color-primary); font-weight: 600; }

/* ---------- Reviews section ----------
   Used to be a scrolling carousel of fabricated reviews (see index.html for
   why that was removed). What's left is a dark band with a heading and a
   link out to the real Google listing — the carousel/track/card rules that
   supported the old version are gone along with it. */
.reviews-section {
  background: var(--color-dark);
  color: var(--color-on-dark);
  overflow: hidden;
}
.reviews-section .section-title h2 { color: var(--color-on-dark); }
.review-summary { text-align: center; color: var(--color-on-dark); }

/* The band of photos on the home page sits on the warm tint. The grid of
   Instagram-linked cards that used to live here is gone — the rules for it
   (.gallery-grid, .gallery-card, .page-banner and friends) went with it, since
   nothing on any page referenced them once the real photos went in. */
.gallery-section { background: var(--color-bg-alt); }

/* ---------- About page ---------- */
/* The logo stands in for a heading, so it needs room. Capped at 520px because
   the source is 1200px wide: beyond about 560 it would start showing its own
   pixels on a high-density screen. */
.about-logo {
  margin: 4px 0 22px;
  line-height: 0;
}
.about-logo img {
  width: 100%;
  max-width: 520px;
  height: auto;
}
.about-story { font-size: 1.06rem; }

/* ---------- Catering page ---------- */
.catering-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 6px;
}
/* Full width each on a phone, so neither button ends up too narrow to hit
   comfortably. */
@media (max-width: 480px) {
  .catering-actions { flex-direction: column; }
  .catering-actions > * { width: 100%; text-align: center; }
}

/* Two columns at most. These cards carry a paragraph and a bulleted list each,
   so the three that fitted when they held one line of placeholder text would
   now be three cramped columns of wrapped text. */
/* The owner's catering menu PDFs: two link cards, side by side on a wide
   screen, stacked on a phone. Big enough to tap; size shown so nobody on
   mobile data is surprised by a download. */
.catering-menus { padding-bottom: 0; }
.catering-menu-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.catering-menu-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.catering-menu-link:hover,
.catering-menu-link:focus-visible { border-color: var(--brand-red); box-shadow: var(--shadow); }
.catering-menu-icon { font-size: 1.8rem; line-height: 1; }
.catering-menu-link strong { display: block; font-size: 1.02rem; }
.catering-menu-link small { display: block; font-size: 0.82rem; color: var(--color-text-muted); margin-top: 2px; }

.catering-packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
  margin: 18px 0 30px;
}
.catering-package {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}
.catering-package h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
}
.catering-package p { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }
.catering-package-points {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.catering-package-points li { margin-bottom: 6px; }
.catering-package-points li:last-child { margin-bottom: 0; }
.catering-package-points strong { color: var(--color-text); }

/* ============================================================================
   MENU / ORDERING
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Drifting band of food photos. Used on the home page and above the menu.

   Three states, in order of what the visitor actually gets:

   1. No JavaScript — a plain row of photos you scroll with a finger. This is
      what the HTML alone produces, and it is the reason the animation is added
      by a class from JS rather than being on by default: a marquee whose
      duplicate copy never got created would scroll a gap into view forever.
   2. JavaScript, motion allowed — js/marquee.js clones the photos and adds
      .is-animated, and the row drifts.
   3. Motion reduced — back to state 1. Someone who has asked their phone to
      stop animations must not get a permanently moving band of pictures; they
      still get every photo, by scrolling.
   --------------------------------------------------------------------------- */
.photo-marquee {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.photo-marquee::-webkit-scrollbar { display: none; }
/* Focusable so the row is reachable by keyboard: nothing inside it is a link
   or a button, so without this a keyboard user could never reach the photos
   in the scrollable states, and could never pause the animation in the
   drifting one. */
.photo-marquee:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.photo-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}

.photo-marquee.is-animated { overflow-x: hidden; }
.photo-marquee.is-animated .photo-marquee-track {
  /* Starts half a track to the left and slides back to zero, so the photos
     travel left-to-right. The two halves are identical, so the jump back at
     the end of each loop is invisible. */
  animation: drift-photos var(--drift-seconds, 120s) linear infinite;
}
@keyframes drift-photos {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
/* Stops while it's being looked at closely — hovered with a mouse, or focused
   from the keyboard. A photo that slides away mid-look is irritating. */
.photo-marquee.is-animated:hover .photo-marquee-track,
.photo-marquee.is-animated:focus-within .photo-marquee-track {
  animation-play-state: paused;
}

.photo-marquee-card {
  flex: 0 0 auto;
  width: 220px;
  margin: 0;
}
.photo-marquee-card img {
  display: block;
  width: 100%;
  height: 165px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  /* Holds the photo's space in the warm page colour while it loads, so the
     row doesn't flash white-then-photo as it drifts. */
  background: var(--color-bg-alt);
}
.photo-marquee-caption {
  display: block;
  margin-top: 7px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .photo-marquee.is-animated { overflow-x: auto; }
  .photo-marquee.is-animated .photo-marquee-track { animation: none; }
}

/* The band runs to both screen edges on a phone: a photo clipped by the edge
   is what says "there is more of this". The negative margin is cancelled by
   matching padding so the first photo still lines up with the heading above
   it, and body already has overflow-x:hidden so none of this can make the
   whole page scroll sideways. */
@media (max-width: 640px) {
  .photo-marquee { margin: 0 -20px; padding: 0 20px; }
}
@media (max-width: 480px) {
  .photo-marquee { margin: 0 -16px; padding: 0 16px; }
  .photo-marquee-card { width: 200px; }
  .photo-marquee-card img { height: 150px; }
}

/* The band above the menu, which carries a heading of its own. */
.food-strip { margin: 26px 0 2px; }
.food-strip-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin: 0 0 12px;
  color: var(--color-text);
}

/* Sticky category jump-nav — the menu is ~70 items across 12 sections, so
   scrolling blind is painful on a phone. */
/* Solid white rather than frosted glass. The header above it is already
   frosted, and two stacked blur layers made the phone re-blur both on every
   scroll frame — the main cause of stutter on the long menu page. */
.menu-nav {
  position: sticky;
  top: 66px;
  z-index: 15;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  margin: 0 0 32px;
  padding: 10px 0;
}

/* Menu search box. Shares the sticky nav bar with the category chips rather
   than adding a second sticky row of its own: on a phone the header and the
   chips already cost real height at the top of the screen, and a third layer
   would push the menu itself further down on every scroll. While a search is
   being typed the chips are hidden and a result count takes their place. */
.menu-search {
  position: relative;
  margin-bottom: 8px;
}
.menu-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  opacity: 0.45;
  pointer-events: none;
}
.menu-search-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 40px 10px 38px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-bg-alt);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
}
.menu-search-input::placeholder { color: var(--color-text-muted); }
.menu-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px var(--color-bg-tint);
}
/* Native search inputs draw their own × in some browsers; suppressed so our
   own clear button is the only one, consistent across browsers. */
.menu-search-input::-webkit-search-cancel-button { display: none; }
.menu-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  min-height: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.menu-search-clear:hover { background: var(--color-border); }
.menu-search-status {
  margin: 6px 2px 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.search-hidden { display: none !important; }

.menu-nav-track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
/* Same fix as .specials-marquee[hidden] elsewhere in this file:
   our own `display: flex` above ties with the browser's [hidden] rule, and
   source order lets ours win, so the chips would stay visible while search
   results were showing underneath them without this override. Found by
   screenshotting the actual result, not by trusting the JS logic alone. */
.menu-nav-track[hidden] { display: none; }
.menu-nav-track::-webkit-scrollbar { display: none; }
.menu-nav-chip {
  flex: 0 0 auto;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.87rem;
  font-weight: 600;
  font-family: var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  min-height: 38px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.menu-nav-chip:hover { background: var(--color-bg-tint); border-color: var(--color-primary); text-decoration: none; }
.menu-nav-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* NOTE: do not add `content-visibility: auto` here. It speeds up scrolling by
   skipping off-screen categories, but it breaks the category jump-nav above:
   the browser has to guess the height of sections it hasn't drawn yet, guesses
   wrong, and the anchor target drifts away mid-scroll. Measured landing at
   5717px instead of 118px. Tried and reverted deliberately — 2026-07. */
.menu-category { scroll-margin-top: 128px; margin-bottom: 40px; }
.menu-category-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.menu-category-heading { min-width: 0; }
.menu-category h2 {
  font-size: 1.5rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Categories with no photo keep a coloured bar so the heading still has a
   visual anchor and the list doesn't look half-finished. */
.menu-category-head:not(.has-thumb) h2::before {
  content: "";
  width: 5px;
  height: 1.1em;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-flame), var(--brand-red));
  flex-shrink: 0;
}
.menu-category-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  background: var(--color-bg-alt);
  box-shadow: var(--shadow-sm);
}
.menu-category-blurb {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin: 4px 0 0;
}
.menu-category-head:not(.has-thumb) .menu-category-blurb { margin-left: 15px; }

/* One row per dish: name, price, add — all on a single line. Nearly every
   customer orders on a phone, so rows are kept short enough that a whole
   category fits on screen instead of two or three dishes. Rows sit in a
   single bordered list rather than separate cards, which removes the gap and
   double-border between every item. */
.menu-grid {
  display: flex;
  flex-direction: column;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.menu-item {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
}
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: var(--color-bg-alt); }
.menu-item.is-in-cart { background: var(--color-bg-tint); }

/* Sold out, set from /kitchen. The dish stays on the list so nobody thinks it
   was removed, greyed, with a tag where Add would be. The server refuses it at
   checkout regardless of what this page shows. */
.menu-item.is-sold-out { opacity: 0.55; }
.menu-item.is-sold-out:hover { background: transparent; }
.sold-out-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

/* The owner's sold-out list on /kitchen. */
.owner-search {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-card-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px; /* 16px floor stops iOS zooming on focus */
  margin: 8px 0 12px;
}
.owner-search:focus { outline: none; border-color: var(--brand-flame); }
.avail-section {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 18px 0 4px;
}
.avail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border-strong);
}
.avail-item:last-child { border-bottom: none; }
.avail-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.avail-item-info strong { font-size: 0.95rem; }
.avail-item-info span { font-size: 0.83rem; color: var(--color-text-muted); }
.avail-item.is-sold-out strong { color: var(--color-text-muted); }
.avail-item-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.menu-item-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
}
.price {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* --- Add to cart / quantity stepper -------------------------------------
   Every line item carries its own control. At qty 0 it's an "Add" pill;
   once the item is in the cart it becomes a  −  n  +  stepper in place,
   so quantity can be changed without opening the cart drawer. */
.qty-control { display: flex; align-items: center; flex-shrink: 0; }

/* Deliberately compact: 40px tall is still an easy thumb target, but the
   button no longer dominates the row the way an 84px-wide pill did. */
.add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  min-width: 62px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(197, 22, 28, 0.18);
  transition: background 0.15s ease, transform 0.1s ease;
}
.add-btn:hover { background: var(--color-primary-dark); }
.add-btn:active { transform: scale(0.97); }
.add-btn .add-btn-icon { font-size: 1rem; font-weight: 700; line-height: 1; }

.qty-stepper {
  display: inline-flex;
  align-items: center;
  height: 36px;
  min-width: 96px;
  border-radius: 999px;
  border: 1.5px solid var(--color-primary);
  background: #fff;
  overflow: hidden;
}
.qty-stepper button {
  width: 32px;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--color-primary);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s ease;
}
.qty-stepper button:hover { background: var(--color-bg-tint); }
.qty-stepper button:active { background: #f8dcda; }
.qty-stepper .qty-value {
  flex: 1;
  min-width: 32px;
  text-align: center;
  font-weight: 700;
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* Toast confirmation when something is added */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--color-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 60;
}
.cart-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Item tag styles (.menu-item-tags, .tag, .tag-badge, .tag-spice,
   .tag-allergen) were removed along with the "Popular" badges, heat ratings
   and per-dish allergen labels. See the note in public/js/menu.js for why
   that data is not shown. */

/* The L/M/H spice picker (.spice-picker, .spice-opt(s), .cart-line-spice) was
   removed — spice preference now goes in the order notes at checkout. */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* .example-notice removed — it existed to warn that the badges, heat ratings
   and allergen tags were unverified placeholders. Those are gone, so there is
   nothing left to warn about. */

/* Allergy notice. This is now the ONLY place allergen information is handled —
   the per-dish "Contains …" tags were removed because they were unverified — so
   it is deliberately prominent rather than a muted footnote. Don't quieten it. */
.allergy-notice {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--brand-flame);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 8px 0 32px;
}
.allergy-notice > strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-text);
  margin-bottom: 6px;
}
.allergy-notice p { margin: 0 0 14px; }
.allergy-notice strong { color: var(--color-text); }
.allergy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* WhatsApp brand green — this button is the primary way to ask about allergens,
   so it reads as an action rather than another line of small print. */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25d366;
  color: #08350f;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 22px;
  min-height: 46px;
  border-radius: 999px;
  border: none;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
  transition: background 0.15s ease;
}
.btn-whatsapp:hover { background: #1eb857; text-decoration: none; color: #08350f; }
.btn-allergy-call { padding: 11px 22px; min-height: 46px; font-size: 0.95rem; }
.allergy-footnote {
  margin: 14px 0 0;
  font-size: 0.83rem;
  color: var(--color-text-muted);
}

/* Allergy block inside the cart drawer. This is the more reliable of the two
   placements — everyone who orders reaches checkout, but not everyone scrolls
   to the bottom of the menu — so it is styled to stand out against the drawer
   rather than blend in. */
.cart-allergy {
  background: #fff4e5;
  border: 1px solid #f3c98b;
  border-left: 4px solid var(--brand-flame);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 14px;
}
.cart-allergy strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: #7a2e08;
  margin-bottom: 3px;
}
.cart-allergy p {
  margin: 0 0 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #5c3a06;
}
.cart-allergy-actions { display: flex; gap: 8px; }
.cart-allergy-actions > * { flex: 1; }
.btn-allergy-call-sm {
  padding: 9px 12px;
  min-height: 40px;
  font-size: 0.85rem;
  gap: 6px;
}
/* White fill only when this is the quieter, outlined button sitting next to
   something else. Scoped to .btn-secondary on purpose: the allergy block's
   call button is now a primary red one, and an unscoped white background here
   made it white-on-white — a button whose text simply vanished. */
.btn-secondary.btn-allergy-call-sm { background: #fff; }

@media (max-width: 480px) {
  .allergy-actions { flex-direction: column; align-items: stretch; }
  .allergy-actions > * { width: 100%; }
}

/* ---------- Cart drawer ---------- */
.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(400px, 100vw);
  background: var(--color-card-bg);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-dark);
  color: var(--color-on-dark);
}
.cart-drawer-header h3 { font-family: var(--font-heading); font-size: 1.1rem; }
.cart-drawer-header button {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-on-dark);
  width: 40px;
  height: 40px;
}
.cart-items { flex: 1; overflow-y: auto; padding: 8px 20px; }
.cart-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}
.cart-line:last-child { border-bottom: none; }
.cart-line-main { min-width: 0; }
.cart-line-name { font-weight: 600; font-size: 0.94rem; }
.cart-line-main .note { margin-top: 2px; margin-bottom: 8px; }
.cart-line-side { text-align: right; flex-shrink: 0; }
.cart-line-total { font-weight: 700; font-variant-numeric: tabular-nums; }
.qty-stepper-sm { height: 34px; min-width: 100px; }
.qty-stepper-sm button { width: 34px; font-size: 1.15rem; }
.qty-stepper-sm .qty-value { font-size: 0.9rem; min-width: 28px; }
.cart-line-remove {
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 0;
}
.cart-footer {
  padding: 18px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.cart-total {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 14px;
  font-family: var(--font-heading);
}
.overlay {
  position: fixed; inset: 0;
  background: rgba(27, 21, 18, 0.5);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.overlay.open { opacity: 1; pointer-events: auto; }

.empty-state { color: var(--color-text-muted); text-align: center; padding: 48px 0; }

.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.88rem; }
.field input, .field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem; /* 16px floor — prevents iOS Safari auto-zoom on focus */
  font-family: inherit;
  background: #fff;
}
.field textarea:focus, .field input:focus { border-color: var(--color-primary); outline: none; }

.note { font-size: 0.83rem; color: var(--color-text-muted); margin-top: 8px; }
.error-text { color: var(--color-primary); font-size: 0.9rem; margin-top: 8px; font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-dark);
  color: var(--color-on-dark);
  padding: 44px 0 32px;
  text-align: center;
  font-size: 0.9rem;
}
.site-footer a { color: var(--color-on-dark); }
.footer-logo {
  height: 52px;
  width: auto;
  margin: 0 auto 20px;
  display: block;
  background: #fff;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  box-sizing: content-box;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-links a:hover { color: var(--brand-flame); }
.footer-copy { color: #a89e94; font-size: 0.83rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero h1 { font-size: 2.4rem; }
}

@media (max-width: 640px) {
  .site-header .container { padding-top: max(8px, env(safe-area-inset-top)); }
  .brand-logo { height: 38px; }
  .main-nav { gap: 14px; }
  .main-nav a { font-size: 0.9rem; }
  .cart-button { padding: 9px 15px; font-size: 0.88rem; min-height: 40px; }

  section { padding: 44px 0; }
  .hero { padding: 44px 0 40px; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { flex: 1 1 100%; }

  .section-title h2 { font-size: 1.6rem; }
  .review-card { flex: 0 0 262px; }

  .menu-nav { top: 58px; }
  .menu-category { scroll-margin-top: 118px; }
  .menu-category-thumb { width: 52px; height: 52px; border-radius: 10px; }
  .menu-category-head { gap: 12px; }
  .menu-category h2 { font-size: 1.3rem; }

  .footer-links a { padding: 6px 4px; display: inline-block; }
  .cart-footer { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .cart-drawer { width: 100vw; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero h1 { font-size: 1.75rem; }

  /* Stay on one line even on the narrowest phones — wrapping the price and
     button onto a second row is what made the old list so tall. Only the
     dish name wraps, and only when it genuinely doesn't fit. */
  .menu-item { padding: 11px 12px; gap: 10px; }
  .menu-item-name { font-size: 0.92rem; }
  .price { font-size: 0.92rem; }
  .add-btn { min-width: 56px; padding: 0 10px; }
  .qty-stepper { min-width: 92px; }
  .qty-stepper button { width: 30px; }
}

/* Respect users who've asked for less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ============================================================================
   Pickup details, trading hours and the owner's pause page
   Added 2026-07-31 alongside name/phone capture at checkout.
   ============================================================================ */

/* ---------- Required-field marker ---------- */
.required-mark { color: var(--color-primary); font-weight: 700; }

/* ---------- Inline validation ---------- */
.field-error {
  margin: 6px 0 0;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--brand-red-dark);
}

/* ---------- "We're closed" / "orders paused" banner in the cart drawer ----
   Deliberately the loudest thing in the drawer. Someone who has picked out a
   meal and cannot pay for it deserves to be told why straight away, rather
   than discovering it from a greyed-out button. */
.orders-closed {
  background: var(--color-bg-tint);
  border: 1px solid var(--brand-red);
  border-left: 4px solid var(--brand-red);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.orders-closed > strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--brand-red-dark);
  margin-bottom: 4px;
}
.orders-closed p {
  /* No trailing margin: this used to make room for a Call button beneath it.
     That button is gone (a call is unlikely to be answered while this notice
     is even showing), so the paragraph is now the last thing in the box. */
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text);
}

/* ---------- Pickup-only notice ---------- */
.pickup-notice {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--brand-green);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.pickup-notice > strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 4px;
}
.pickup-notice p {
  margin: 0 0 8px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.pickup-notice p.note { margin-top: 0; }
.pickup-notice strong { color: var(--color-text); }
.pickup-actions { display: flex; gap: 8px; }

/* WhatsApp is now the only button in the pickup notice (the phone option was
   removed — see menu.html), so it no longer needs to stretch to fill space a
   second button used to share. Sized to its content instead: compact, but
   min-height keeps the tappable area at 44px, the smallest Apple/WCAG
   consider a reliable finger target. Going any shorter to save space would
   make it fiddly to hit on exactly the phones most customers are using. */
.btn-whatsapp-compact {
  padding: 10px 16px;
  min-height: 44px;
  font-size: 0.88rem;
  gap: 6px;
  flex: none;
}

/* ---------- Footer: hours and legal identity ---------- */
.footer-hours {
  margin: 18px 0 10px;
  font-size: 0.85rem;
  color: #cbc2b8;
  line-height: 1.7;
}
.footer-hours strong {
  display: block;
  color: var(--color-on-dark);
  font-family: var(--font-heading);
  margin-bottom: 2px;
}
.footer-hours span { display: block; }
.footer-legal {
  margin-top: 8px;
  color: #a89e94;
  font-size: 0.78rem;
}
/* The Google Analytics notice: same quiet style as the legal line. */
.footer-analytics {
  margin-top: 4px;
  color: #a89e94;
  font-size: 0.75rem;
}

/* ---------- The owner's admin page (/kitchen) ----------------------------
   Not part of the customer-facing site. Plain on purpose: the pause section
   at the top gets used one-handed, in a hurry, when something has gone
   wrong — everything below it can afford to be calmer. */
.owner-page { background: var(--color-bg-alt); }
.owner-shell {
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}
/* /kitchen has several sections stacked, unlike the old single-purpose pause
   page — a bit more breathing room reads better than the narrow single-card
   width designed for one pause button. */
.owner-shell-wide { max-width: 560px; }
.owner-shell h1 {
  font-size: 1.6rem;
  margin: 0 0 20px;
}
.owner-btn { width: 100%; margin-top: 8px; }
.owner-btn-stop { background: var(--brand-red-dark); }
.owner-btn-sm {
  width: auto;
  min-height: 38px;
  padding: 8px 16px;
  font-size: 0.88rem;
  margin-top: 0;
}

/* One card per admin task (pause, specials, menu sync, Square connection),
   so each reads as its own thing rather than one long undifferentiated
   page. */
.kitchen-block {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
}
.kitchen-block h2 {
  font-size: 1.15rem;
  margin: 0 0 12px;
}
.kitchen-block textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
}
.kitchen-steps {
  margin: 0 0 14px;
  padding-left: 22px;
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.7;
}
.kitchen-steps code,
.kitchen-block code {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.85em;
}

/* A new dish waiting for approval: name and price on top, then the section
   dropdown on its own line, then the two buttons side by side.

   Stacked at EVERY width, not just on phones. The owner page is capped at
   420px wide (.owner-shell), so a side-by-side row has the same ~376px to
   work with on a desktop as on a phone. With the phone rule limited to
   480px screens, a desktop showed the dish name crushed into a one-word
   column beside the controls ("Chole / Bhature", seen 2026-10-03). */
.pending-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
.pending-item:last-child { border-bottom: none; }
.pending-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pending-item-info strong { font-size: 0.95rem; }
.pending-item-info span { font-size: 0.83rem; color: var(--color-text-muted); }
.pending-item-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pending-item-actions > * { flex: 1; }
/* The section dropdown on each new dish, and the text box that appears when
   the owner picks "type a name". Both take the full line. 16px font is the
   floor that stops iOS zooming the page when he taps them. */
.pending-item-select,
.pending-item-new {
  flex-basis: 100%;
  max-width: none;
}
.pending-item-new {
  min-height: 38px;
  padding: 6px 12px;
  border: 1.5px solid var(--brand-flame);
  border-radius: 999px;
  background: var(--color-card-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
}
.pending-item-new:focus { outline: none; box-shadow: 0 0 0 3px rgba(178, 44, 26, 0.15); }
.pending-item-select {
  min-height: 36px;
  padding: 6px 28px 6px 10px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-card-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
}
/* Specific enough to beat both `.owner-page select` and the `> *` flex rule
   above: the dropdown always gets a whole line to itself, so the longest
   choice ("New section: type a name…") is readable. A 220px cap used to live
   here and cut it to "New section: type a nan" (seen 2026-10-03). */
.owner-page .pending-item-select,
.owner-page .pending-item-new { flex: 1 1 100%; max-width: none; }
.pending-item-select:focus { outline: none; border-color: var(--brand-flame); }

/* ---------- /kitchen layout, revised 2026-10-03 ---------------------------
   The page was one column of seven cards, about fourteen phone screens
   long, three quarters of it the sold-out list. Now: a sticky header with
   the live order status and three tabs, cards that open with one line plus
   their controls (detail behind "How this works"), and a sold-out list
   folded by section with one line and one button per dish. */
/* The site-wide `section { padding }` is for the customer pages. On /kitchen
   it put 44–64px of empty space above the sticky header (seen 2026-10-03,
   live for one deploy), so the two kitchen sections opt out. */
.owner-page section[data-lock],
.owner-page section[data-panel] { padding: 0; }
.kitchen-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg-alt);
  margin: -32px -20px 16px;
  padding: 14px 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.kitchen-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.owner-shell .kitchen-top h1 { margin: 0; font-size: 1.4rem; }
/* The live status, repeated on every tab. Tapping it opens Tonight. */
.kitchen-pill {
  border: 1.5px solid var(--brand-green);
  background: #eaf6ee;
  color: var(--brand-green);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.kitchen-pill.is-paused {
  border-color: var(--brand-red);
  background: var(--color-bg-tint);
  color: var(--brand-red-dark);
}
.kitchen-tabs { display: flex; gap: 4px; }
.kitchen-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 4px 9px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}
.kitchen-tab[aria-selected="true"] { color: var(--color-text); border-bottom-color: var(--brand-red); }
.kitchen-badge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--brand-red);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.5;
}
.kitchen-badge[hidden] { display: none; }
.kitchen-alert {
  background: var(--color-bg-tint);
  border: 1.5px solid var(--brand-red);
  color: var(--brand-red-dark);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 16px;
  font-size: 0.9rem;
}
.kitchen-count { color: var(--color-text-muted); font-weight: 400; }
.kitchen-empty { text-align: center; padding: 8px 0; }
.owner-hours-list { margin: 0 0 6px; padding-left: 20px; font-size: 0.9rem; line-height: 1.7; }

/* Cards are tighter now that each opens with one line. */
.owner-page .kitchen-block { padding: 18px; margin-bottom: 14px; }
.owner-page .kitchen-block h2 { margin-bottom: 10px; }
.owner-page .owner-status { margin-bottom: 14px; }

/* "How this works" and the optional pause message: one tappable line,
   opened when wanted. */
.owner-help,
.owner-more { margin-top: 12px; font-size: 0.87rem; color: var(--color-text-muted); }
.owner-help summary,
.owner-more summary {
  cursor: pointer;
  color: var(--color-text);
  font-weight: 600;
  padding: 4px 0;
  list-style-position: inside;
}
.owner-more { margin: 0 0 4px; }
.owner-help p, .owner-help ol { margin: 8px 0 0; line-height: 1.6; }

/* Sold out: "Sold out now" first, then the menu folded by section. */
.avail-now-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-red-dark);
  margin: 0 0 2px;
}
.avail-now-empty { margin: 0 0 4px; }
.avail-group { border-top: 1px solid var(--color-border); }
.avail-group:last-child { border-bottom: 1px solid var(--color-border); }
.avail-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.avail-group summary::-webkit-details-marker { display: none; }
.avail-group summary::before {
  content: "›";
  display: inline-block;
  width: 14px;
  margin-right: 4px;
  color: var(--color-text-muted);
  transition: transform 0.15s;
}
.avail-group[open] summary::before { transform: rotate(90deg); }
.avail-group summary > span:first-child { flex: 1; }
.avail-group-meta { font-size: 0.83rem; font-weight: 400; color: var(--color-text-muted); }
.avail-group-meta b { color: var(--brand-red-dark); }
/* One line per dish: name, one button. A single short button leaves the
   name most of the width, which is what two buttons side by side did not. */
.avail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0 8px 18px;
  border-top: 1px dashed var(--color-border);
}
[data-soldout-now] .avail-row { padding-left: 0; }
.avail-row-name { flex: 1; min-width: 0; font-size: 0.95rem; }
.avail-row-name small { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; }
.avail-row.is-sold-out .avail-row-name { color: var(--color-text-muted); }
.avail-row .owner-btn-sm { flex-shrink: 0; min-width: 92px; }
/* A button that reads as a link, for the less common "until I say". */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--brand-red-dark);
  text-decoration: underline;
  cursor: pointer;
}

.owner-status {
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 22px;
  background: #eaf6ee;
  border: 1px solid var(--brand-green);
}
.owner-status.is-paused {
  background: var(--color-bg-tint);
  border-color: var(--brand-red);
}
.owner-status > strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--brand-green);
  margin-bottom: 4px;
}
.owner-status.is-paused > strong { color: var(--brand-red-dark); }
.owner-status p { margin: 0; font-size: 0.9rem; color: var(--color-text); }

.owner-page select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  background: #fff;
}
.owner-hours {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
  font-size: 0.87rem;
  color: var(--color-text-muted);
}
.owner-hours strong { display: block; color: var(--color-text); margin-bottom: 6px; }
.owner-hours ul { margin: 0 0 10px; padding-left: 20px; }

/* ---------- Cart drawer layout, revised 2026-07-31 -------------------------
   The drawer used to be a fixed-height flex column: the items list took all
   the spare room and the footer sat under it. Adding the pickup notice, name
   and phone fields pushed the footer past the height of a phone screen, which
   squeezed the items list — the customer's actual order — down to a sliver.

   Now the whole drawer scrolls as one column, with the header pinned at the
   top and the total plus Checkout button pinned at the bottom. The order is
   the first thing you see, and the button is always reachable. */
.cart-drawer {
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.cart-drawer-header {
  position: sticky;
  top: 0;
  z-index: 2;
}
.cart-items {
  flex: none;
  overflow: visible;
}
.cart-pay {
  position: sticky;
  bottom: 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  margin: 18px -20px -18px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
}
.cart-pay .note { margin-bottom: 0; }
.orders-closed { margin: 16px 20px 0; }

/* ---------- "We're not taking orders" notice on the menu page itself ------
   Distinct from .orders-closed (the one inside the cart drawer) — this one
   has to work for someone who never opens the cart at all. */
.menu-closed-notice {
  background: var(--color-bg-tint);
  border: 1px solid var(--brand-red);
  border-left: 4px solid var(--brand-red);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.menu-closed-notice > strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--brand-red-dark);
  margin-bottom: 6px;
}
.menu-closed-notice p {
  /* No trailing margin — was making room for a Call button that's since been
     removed (see menu.html for why); this paragraph is now the last thing
     in the box. */
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text);
}

/* ---------- Specials / popular-dishes marquee -------------------------
   Same slot as .menu-closed-notice above (never shown at the same time —
   see menu.html). Deliberately compact and a bit louder than the rest of
   the page: flame orange rather than the site's usual red/green, so it
   reads as "something worth noticing" rather than another status notice. */
.specials-marquee {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--brand-flame);
  border-radius: var(--radius-sm);
  padding: 0 4px 0 14px;
  margin-bottom: 20px;
  height: 40px;
  overflow: hidden;
}
/* Setting our own `display` above is what makes this element need this rule
   at all: the [hidden] attribute and a same-specificity `display: flex`
   are a tie, and source order decides ties — ours would otherwise win and
   the browser would keep showing an empty orange bar even while `hidden`
   was correctly set by JS. Found by checking actual rendered visibility,
   not just the attribute, which looked fine on its own. */
.specials-marquee[hidden] { display: none; }
.specials-marquee-label {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.specials-marquee-track-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.specials-marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  animation: scroll-marquee 22s linear infinite;
}
.specials-marquee-track span { padding-right: 40px; }
@keyframes scroll-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .specials-marquee-track { animation: none; }
}

/* ---------- Add / + disabled outside trading hours -------------------------
   Applied to the whole menu list via a class on [data-menu-root], toggled by
   js/menu.js whenever /api/hours changes. The minus button is deliberately
   left alone — reducing or clearing a cart built earlier should still work
   even after the kitchen has closed. */
.ordering-closed .add-btn,
.ordering-closed [data-inc] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* /kitchen: the two catering menu slots. Name and status on top, the
   Replace button and Remove link underneath, so a long status line never
   squeezes the button. The file input is hidden inside its label, so the
   whole button opens the phone's file picker. */
.catering-slot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}
.catering-slot:first-child { border-top: none; padding-top: 4px; }
.catering-slot-info strong { display: block; font-size: 0.95rem; }
.catering-slot-info span { font-size: 0.83rem; color: var(--color-text-muted); }
.catering-slot-actions { display: flex; align-items: center; gap: 16px; }
.catering-pick { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- /kitchen/guide: the how-to guide ------------------------------
   A reference page for the owner and for anyone covering for him, so it is
   plain and easy to print. Reuses the kitchen page's cards. */
.guide .kitchen-block h3 { font-size: 1rem; margin: 18px 0 6px; }
.guide .kitchen-block h3:first-of-type { margin-top: 6px; }
.guide .kitchen-block p { font-size: 0.95rem; line-height: 1.6; margin: 8px 0; }
.guide-back { display: inline-block; margin-bottom: 14px; font-size: 0.9rem; color: var(--brand-red-dark); }
.guide-lead { font-size: 1.05rem; line-height: 1.6; margin: 0 0 6px; }
.guide-actions { margin: 14px 0 18px; }
.guide-link-btn { display: inline-flex; align-items: center; text-decoration: none; }
.guide-quick { border-color: var(--brand-red); background: var(--color-bg-tint); }
.guide-list, .guide-steps, .guide-toc { margin: 8px 0; padding-left: 22px; font-size: 0.95rem; line-height: 1.65; }
.guide-list li, .guide-steps li, .guide-toc li { margin-bottom: 6px; }
.guide-steps { padding-left: 24px; }
.guide-toc { padding-left: 30px; }
.guide-toc a { color: var(--brand-red-dark); }
.guide-url { word-break: break-all; font-weight: 700; }
.guide-tip, .guide-warn {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.55;
}
.guide-tip { background: #eaf6ee; border: 1px solid var(--brand-green); }
.guide-warn { background: var(--color-bg-tint); border: 1.5px solid var(--brand-red); color: var(--brand-red-dark); }
.guide-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.5; }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: 9px 8px; border-top: 1px solid var(--color-border); }
.guide-table th { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); border-top: none; }
.guide section[id] { scroll-margin-top: 12px; }

/* "Guide" beside the tabs on the kitchen page, and the card on its More tab.
   It was first put in the header beside the status label, but the wider
   "Paused until 12:12 pm" label then overflowed into the screen's margin. */
.kitchen-tabbar { display: flex; align-items: stretch; }
.kitchen-tabbar .kitchen-tabs { flex: 1; }
.kitchen-tab-guide {
  display: flex;
  align-items: center;
  padding: 10px 4px 9px 14px;
  border-bottom: 3px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-red-dark);
  text-decoration: none;
  white-space: nowrap;
}
.kitchen-tab-guide::after { content: " \203A"; }

/* Printing the guide: black on white, no buttons, cards flattened, and no
   step split from its heading across a page. */
@media print {
  .owner-page { background: #fff; }
  .guide-back, .guide-actions { display: none; }
  .owner-shell-wide { max-width: none; padding: 0; }
  .guide .kitchen-block { border: none; border-top: 1px solid #999; border-radius: 0; padding: 12px 0; margin: 0; background: #fff; box-shadow: none; }
  .guide .guide-quick { border: 2px solid #000; padding: 12px; }
  .guide .guide-tip, .guide .guide-warn { background: #fff; border: 1px solid #666; color: #000; }
  .guide h2, .guide h3 { break-after: avoid; }
  .guide-steps, .guide-list, .guide-tip, .guide-warn, .guide-table tr { break-inside: avoid; }
}
.owner-btn-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* ---------- Take away / Eat here choice in the cart drawer ----------------
   Two big tappable cards. The real radio button is hidden but stays
   keyboard-focusable; the card next to it shows which is picked. */
.service-choice { border: none; padding: 0; margin: 0 0 16px; }
.service-choice legend { font-weight: 700; font-size: 0.95rem; padding: 0; margin-bottom: 8px; }
.service-option { display: block; position: relative; margin-bottom: 8px; cursor: pointer; }
.service-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.service-card {
  display: block;
  min-height: 44px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}
.service-card strong { display: block; font-size: 0.98rem; color: var(--color-text); }
.service-card small { display: block; margin-top: 2px; font-size: 0.83rem; line-height: 1.45; color: var(--color-text-muted); }
.service-option input:checked + .service-card { border-color: var(--brand-green); background: #eaf6ee; box-shadow: inset 0 0 0 1px var(--brand-green); }
.service-option input:focus-visible + .service-card { outline: 3px solid rgba(178, 44, 26, 0.35); outline-offset: 2px; }