/* New Design 2026 — additions on top of style.css.
 *
 * style.css is the Figma export and stops at static markup. Everything the live
 * site needs beyond that lives here: the add-to-cart dialog, mini-cart rows and
 * the states that only exist once real stock and a real cart are involved.
 */

/* ─────────────────────────────── product dialog ─────────────────────────── */

.pmodal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .2s ease;
}

.pmodal.is-open { opacity: 1; }
.pmodal[hidden] { display: none; }

.pmodal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 7, 7, .72);
}

.pmodal__panel {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  transform: translateY(14px);
  transition: transform .22s ease;
}

.pmodal.is-open .pmodal__panel { transform: translateY(0); }
.pmodal__panel--sm { width: min(440px, 100%); }

.pmodal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: #070707;
  cursor: pointer;
  z-index: 2;
}

.pmodal__body { padding: 28px 28px 8px; }

.pmodal__head {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-right: 44px;
}

.pmodal__img {
  flex: none;
  width: 128px;
  height: 128px;
  border-radius: 14px;
  object-fit: cover;
  background: #f3f4f6;
}

.pmodal__title {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: #070707;
}

.pmodal__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #475156;
}

.pmodal__qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.qtybtn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e7e9;
  border-radius: 9px;
  background: #fafafa;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #070707;
  cursor: pointer;
}

.qtybtn--plus { background: rgba(210, 177, 69, .18); border-color: transparent; color: #a8862a; }
.qtybtn:focus, .qtybtn:focus-visible { outline: none; }

.pmodal__qty input {
  width: 62px;
  height: 36px;
  text-align: center;
  border: 1px solid #e4e7e9;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 600;
  /* the +/- buttons are the control here; the native spinners just add noise */
  -moz-appearance: textfield;
}
.pmodal__qty input::-webkit-outer-spin-button,
.pmodal__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.optgroup { margin-bottom: 18px; }
.optgroup:empty { display: none; }

/* Last group sits right above the sticky footer — no extra gap needed. */
.optgroup:last-of-type { margin-bottom: 8px; }

.optgroup__title {
  display: block;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 500;
  color: #070707;
}

.opts {
  display: flex;
  flex-wrap: wrap;
  column-gap: 26px;
  row-gap: 12px;
}

/* shop.js writes plain <label><input …> pairs into these lists. */
.opts label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: #475156;
  cursor: pointer;
}

/* Drawn rather than left to accent-color: the browser picks the tick colour
   itself from the accent, and against this light gold it chooses near-black.
   Same white check the kiosk sheet uses, so both popups match. */
.opts input[type="checkbox"],
.opts input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--gray-200, #c9cfd2);
  border-radius: 5px;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.opts input[type="radio"] { border-radius: 50%; }

.opts input[type="checkbox"]:checked,
.opts input[type="radio"]:checked {
  border-color: #d2b145;
  background: #d2b145
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M5 12.5 10 17.5 19 7" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    center / 68% no-repeat;
}

.opts input:disabled { cursor: not-allowed; }
.opts input:disabled + span,
.opts label:has(input:disabled) { opacity: .45; }

/* Free-allowance markers on sauces: green while within the free limit, red with
   the price once it is exceeded. */
.sauce-badge {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  color: #fff;
  white-space: nowrap;
}
.sauce-badge--free { background: #28a745; }
.sauce-badge--paid { background: #dc3545; }

/* shop.js lays add-on rows out with Bootstrap utility classes
   (d-flex justify-content-between), which this theme does not load — so the
   same intent is reproduced here: name on the left, price on the right. */
#addonList { display: block; }

#addonList label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #a8862a;
}

#addonList label > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 400;
  color: #475156;
}

.optgroup__note {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #a8862a;
}
.optgroup__note:empty { display: none; }

/* The protein note is written by the shared assets/js/shop.js, which force-sets
   an inline white on it for the 2024 theme's dark modal. This modal is white,
   so white text was invisible — the note has to out-rank that inline style,
   which is the one thing only !important can do. */
#proteinLimitMsg.optgroup__note { color: #a8862a !important; }

/* Over the selection limit — matches the 2024 theme's red warning. */
.optgroup__note--warn,
#proteinLimitMsg.optgroup__note--warn { color: #dc3545 !important; }

.pmodal__notes {
  width: 100%;
  border: 1px solid #e4e7e9;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.pmodal__total {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #070707;
}

/* Total on the left, buttons on the right, both on the footer's baseline. */
.pmodal__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 28px 24px;
  background: #fff;
  border-top: 1px solid #f0f1f2;
}

.pmodal__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;   /* keeps the buttons right-aligned if the total wraps */
}

.btn--ghost {
  background: #f3f4f6;
  color: #070707;
  border: 0;
}

body.has-modal { overflow: hidden; }

/* ─────────────────────────────── mini cart rows ─────────────────────────── */

.cartline {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #f0f1f2;
}
.cartline:last-child { border-bottom: 0; }

.cartline__img {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: #f3f4f6;
}

.cartline__body { flex: 1; min-width: 0; }

.cartline__name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: #070707;
}

/* One wrapped line of comma-separated options rather than a bulleted list —
   see optionLines() in js/theme.js. */
.cartline__opts {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.7;
  color: #475156;
}
.cartline__opts .is-free { color: #1a7f37; font-weight: 600; }

/* The separator is its own span so it never inherits the green FREE or the
   add-on price colour from the item it follows. */
.cartline__sep { color: #475156; font-weight: 400; }

.cartline__qty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.cartline__qty .qtybtn { width: 28px; height: 28px; font-size: 15px; }

.cartline__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.cartline__price {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  color: #070707;
}

.cartline__remove {
  border: 0;
  background: none;
  padding: 4px;
  cursor: pointer;
  line-height: 0;
}
.cartline__remove img { width: 18px; height: 18px; }

/* ───────────────────────────── catalogue states ─────────────────────────── */

.food { position: relative; }
.food--out { opacity: .55; pointer-events: none; }

.food__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 20px;
  background: #dc3545;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.food { cursor: pointer; }
.menu-group[hidden] { display: none; }

.empty-note {
  padding: 48px 0;
  text-align: center;
  font-size: 17px;
  color: #475156;
}

/* ───────────────────────────── add-to-cart toast ────────────────────────── */

.cart-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;                 /* above the sticky nav and the mini-cart panel */
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(380px, calc(100vw - 48px));
  padding: 14px 18px;
  border-radius: 14px;
  background: #070707;
  color: #fff;
  font-size: 15px;
  line-height: 1.45;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
  /* parked off-screen and non-interactive until it is shown */
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.cart-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cart-toast__tick {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #28a745;
  color: #fff;
}

.cart-toast__text { flex: 1; min-width: 0; }
.cart-toast__text strong { font-weight: 600; }

.cart-toast__link {
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--primary);
  color: #070707;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .cart-toast { transition: none; }
}

@media (max-width: 900px) {
  .cart-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* Sticky header — the nav follows the page down so the cart and menu stay
   reachable. Only the nav bar sticks; the contact strip above it scrolls away
   rather than eating vertical space on every screen.
   z-index sits under the mini-cart panel (70) so that still opens over it. */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* The anchor jump to #testimonials would otherwise land under the sticky bar. */
html { scroll-padding-top: 110px; }

/* The body fills whatever height is left under the photo and the price row is
   pushed to the bottom of it, so a two-line product name no longer drops its
   price lower than the cards beside it. */
.food__body { flex: 1; }
.food__foot { margin-top: auto; }
.food__foot .food__price { align-self: center; }

/* Only offer the arrows when there is somewhere to go. */
.carousel-nav[hidden] { display: none; }

/* Category chips are buttons now, so they pick up the browser's focus ring —
   a blue rectangle around the gold pill. Nothing here is keyboard-navigated. */
.cat:focus,
.cat:focus-visible,
.carousel-btn:focus,
.carousel-btn:focus-visible,
.food__add:focus,
.food__add:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Intro line under a section heading (Why Choose Us). */
.section__lead {
  max-width: 860px;
  margin: -18px auto 34px;
  text-align: center;
  font-size: 17px;
  line-height: 1.7;
  color: #475156;
}

/* ───────────────────────────── gallery lightbox ─────────────────────────── */

.gallery img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  background: rgba(7, 7, 7, .94);
  opacity: 0;
  transition: opacity .2s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }

.lightbox__img {
  max-width: min(1100px, calc(100vw - 140px));
  max-height: calc(100vh - 120px);
  object-fit: contain;
  border-radius: 8px;
}

.lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .22); }

.lightbox__nav {
  flex: none;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__nav:hover { background: rgba(255, 255, 255, .22); }

.lightbox__count {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, .7);
}

@media (max-width: 900px) {
  .lightbox { padding: 20px 8px; gap: 4px; }
  .lightbox__nav { width: 40px; height: 40px; font-size: 24px; }
  .lightbox__img { max-width: calc(100vw - 100px); }
}

/* ───────────────────────────────── reviews page ─────────────────────────── */

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 8px;
}

.reviews-grid .tcard { height: 100%; }

.tcard__source {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #a8862a;
}

/* .testimonials__inner centres its children, so a block child shrinks to its
   content. These two have to opt back into the full column width. */
.reviews-grid,
.reviews-map { width: 100%; align-self: stretch; }

.reviews-map {
  margin-top: 40px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
}
.reviews-map iframe { display: block; width: 100%; border: 0; }

/* Reviewers are shown by initial rather than a stock photo — the source data
   has no real avatars, and a shared placeholder face on every card reads as
   fake. */
.tcard__avatar--initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #070707;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.testimonials__head .btn { margin-top: 18px; }

/* ─────────────────────────────── checkout extras ────────────────────────── */

.pay-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: #a8862a;
}
.pay-note svg { flex: none; margin-top: 2px; }
.pay-note strong { font-weight: 700; }

.field-error {
  display: none;
  margin: 6px 0 0;
  font-size: 14px;
  color: #dc3545;
}
.field-error.show { display: block; }

/* the Pay.aw instruction that sits under its account-number input */
.order-field__hint {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: #5f5f5f;
}
.input--bad { border-color: #dc3545 !important; }

/* Full-screen wait while a Pay.aw push payment is approved on the phone. */
.pay-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 32px;
  text-align: center;
  color: #fff;
  background: rgba(7, 7, 7, .9);
}
.pay-overlay.show { display: flex; }
.pay-overlay__title { font-size: 26px; font-weight: 700; margin: 0; }
.pay-overlay__text { font-size: 17px; line-height: 1.6; max-width: 560px; margin: 0; }

.pay-spin {
  width: 54px;
  height: 54px;
  border: 5px solid rgba(255, 255, 255, .25);
  border-top-color: #d2b145;
  border-radius: 50%;
  animation: payspin 1s linear infinite;
}
@keyframes payspin { to { transform: rotate(360deg); } }

.pay-overlay__close {
  display: none;
  margin-top: 6px;
  padding: 13px 34px;
  border: 0;
  border-radius: 999px;
  background: #d2b145;
  color: #070707;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.pay-overlay.done .pay-spin { display: none; }
.pay-overlay.done .pay-overlay__close { display: inline-block; }

@media (max-width: 900px) {
  .pmodal { padding: 0; }
  .pmodal__panel { width: 100%; max-height: 100vh; border-radius: 0; }
  .pmodal__head { flex-direction: column; }
  .pmodal__img { width: 100%; height: 200px; }
}

/* ────────────────────────────── thank-you page ──────────────────────────────
   thankyou.php shipped with markup but no styles, so the order summary
   rendered as unstyled text: the definition list stacked every label above its
   value and the item rows lost their layout entirely. These are the rules that
   were missing. Naming and spacing follow .cartline above, since the item rows
   are the same object shown after checkout rather than before.
   ────────────────────────────────────────────────────────────────────────── */

.thanks {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 0 8px;
}

.thanks__head {
  text-align: center;
  margin-bottom: 32px;
}

/* Two stacked SVGs: the filled disc, and the tick drawn on top of it. */
.thanks__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
}
.thanks__icon .disc,
.thanks__icon .tick {
  position: absolute;
  inset: 0;
  margin: auto;
}
.thanks__icon .disc { width: 72px; height: 72px; }
.thanks__icon .tick { width: 34px; height: 34px; }

.thanks__sub {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-700);
}

/* ── Order summary ──────────────────────────────────────────────────────── */

.thanks__details {
  margin: 0 0 28px;
  padding: 8px 20px;
  background: var(--surface-soft);
  border: 1px solid var(--gray-100);
  border-radius: 14px;
}

/* The row is the flex parent, not the <dl> — a dt/dd pair must sit on one
   line, and each pair is already wrapped in its own .detail-row div. */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--gray-100);
}
.detail-row:last-child { border-bottom: 0; }

.detail-row dt {
  flex: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-700);
}

.detail-row dd {
  margin: 0;
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  overflow-wrap: anywhere;   /* long emails must not widen the card */
}

.detail-row__money {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}

/* ── Ordered items ──────────────────────────────────────────────────────── */

.thanks__items {
  margin-bottom: 24px;
  padding: 4px 20px;
  border: 1px solid var(--gray-100);
  border-radius: 14px;
}

.oitem {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #f0f1f2;
}
.oitem:last-child { border-bottom: 0; }

.oitem__img {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: #f3f4f6;
}

.oitem__body { flex: 1; min-width: 0; }

.oitem__name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
}

.thanks__note {
  margin: 0 0 24px;
  padding: 14px 16px;
  background: var(--primary-soft);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-900);
}

@media (max-width: 600px) {
  .thanks { padding-top: 28px; }
  .thanks__details, .thanks__items { padding-left: 14px; padding-right: 14px; }

  /* Stacking is correct at this width — a label and a long value cannot share
     a line on a phone — but keep the value left-aligned under its label. */
  .detail-row { flex-direction: column; gap: 2px; }
  .detail-row dd { text-align: left; }
}