/* ============================================================
   CHAI WALLAH — Catering
   Loaded by index.html (the catering section) and quote.html
   (the token-gated quote page). Depends on colors_and_type.css
   for tokens and styles.css for .cw-btn / .modal / .field.
   ============================================================ */

/* ---------- SECTION SHELL ---------- */
.cw-catering {
  background: linear-gradient(180deg, var(--parchment-deep), var(--parchment));
  border-top: 1px solid var(--tan-deep);
  border-bottom: 1px solid var(--tan-deep);
}
.cw-catering__inner { padding: 100px 40px; max-width: 1240px; margin: 0 auto; }

.cat-note {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-3);
  margin: -18px 0 36px;
  text-align: center;
  flex-wrap: wrap;
}
.cat-note b { color: var(--fg-2); font-weight: 600; }
/* On the home page's onyx teaser band the same note needs to read light. */
.cat-note--light { color: rgba(253,244,210,0.62); justify-content: flex-start; text-align: left; margin: 0; }
.cat-note--light b { color: var(--gold-300); }

/* ---------- CATERING CARDS ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Panelled the same way as the cafe board, so the two pages read as one menu. */
.cat-cat-section {
  --cat-accent: var(--forest-700);
  margin-bottom: 40px;
  padding: 32px 28px 34px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: 3px solid var(--cat-accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.cat-cat-section:nth-child(2n)   { --cat-accent: var(--burgundy-700); }
.cat-cat-section:nth-child(3n)   { --cat-accent: var(--copper); }
.cat-cat-section:nth-child(4n)   { --cat-accent: var(--teal-600); }
.cat-cat-section:last-child { margin-bottom: 0; }
.cat-cat-head {
  margin-bottom: 22px; padding-bottom: 12px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid color-mix(in srgb, var(--cat-accent) 35%, transparent);
}
.cat-cat-name {
  font-family: var(--font-board);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cat-accent);
}
.cat-cat-sub { font-family: var(--font-display); font-style: italic; font-size: 17px; color: var(--fg-3); }

.cat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .cat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.cat-card.is-featured { border-top: 2px solid var(--cat-accent, var(--gold-400)); }
.cat-card__badge {
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.cat-card__thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--r-sm);
  margin-bottom: 16px;
  display: block;
}
.cat-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--fg-1);
  margin: 0 0 4px;
  line-height: 1.1;
}
.cat-card__serves {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-800);
  margin-bottom: 12px;
}
.cat-card__desc {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1.6;
  margin: 0 0 20px;
  flex: 1;
}
.cat-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cat-card__price { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.cat-card__price small {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.cat-card__min {
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 8px;
}

/* ---------- TRAY (the running catering selection) ---------- */
/* ---- floating pill ------------------------------------------------
   The tray lives at the foot of a long section, so adding an urn from the
   top of the list used to produce no visible sign that anything happened.
   This mirrors the cafe cart's pill on the opposite side of the screen and
   only appears while the catering section is in view. ------------------- */
.cat-fab {
  position: fixed; right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom));
  z-index: 65;
  background: var(--onyx-900); color: var(--gold-100);
  border: 1px solid var(--gold-500);
  border-radius: var(--r-pill);
  padding: 10px 20px 10px 12px;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transform: translateY(140px) scale(0.92);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base), background var(--dur-fast);
}
.cat-fab[hidden] { display: none; }
.cat-fab.show { transform: translateY(0) scale(1); opacity: 1; }
@media (hover: hover) {
  .cat-fab:hover { background: var(--onyx-800); transform: translateY(-2px); }
}
.cat-fab:active { background: var(--onyx-800); }
.cat-fab-icon {
  width: 34px; height: 34px; flex: 0 0 34px;
  background: var(--gold-400); color: var(--onyx-900);
  border-radius: 50%;
  display: grid; place-items: center;
}
.cat-fab-icon svg { width: 18px; height: 18px; }
.cat-fab-label {
  display: block;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-300);
}
.cat-fab-total {
  display: block;
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--gold-100);
}
.cat-fab-go { font-size: 16px; color: var(--gold-400); }
/* The ambient steam sits in the same corner and is pure decoration — get it
   out of the pill's way rather than letting the two overlap. */
.cat-fab.show ~ .cw-steam { opacity: 0; }
@media (max-width: 540px) {
  .cat-fab { right: 14px; padding: 8px 16px 8px 10px; }
  .cat-fab-total { font-size: 15px; }
}

.cat-tray {
  margin-top: 44px;
  background: var(--onyx-900);
  border: 1px solid var(--gold-500);
  border-radius: var(--r-lg);
  padding: 28px 30px;
  color: var(--gold-100);
  display: none;
}
.cat-tray.show { display: block; }
.cat-tray__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cat-tray__head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--gold-100);
  margin: 0;
}
.cat-tray__hint { font-family: var(--font-sans); font-size: 12px; color: rgba(253,244,210,0.6); }
.cat-tray__lines { display: flex; flex-direction: column; }
.cat-tray-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(253,244,210,0.12);
}
.cat-tray-line:last-child { border-bottom: 0; }
.cat-tray-line b { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--gold-100); display: block; }
.cat-tray-line span.meta { font-family: var(--font-sans); font-size: 12px; color: rgba(253,244,210,0.6); }
.cat-tray-line .amt { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--gold-300); white-space: nowrap; }
.cat-tray__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(253,244,210,0.2);
  flex-wrap: wrap;
}
.cat-tray__est { font-family: var(--font-sans); font-size: 13px; color: rgba(253,244,210,0.7); }
.cat-tray__est b { display: block; font-family: var(--font-display); font-size: 30px; color: var(--gold-300); font-weight: 600; margin-top: 2px; }

/* qty control on the onyx tray + on cards */
.cat-qty {
  display: inline-flex;
  align-items: center;
  background: var(--onyx-900);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cat-qty button {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  color: var(--gold-100);
  font-size: 17px;
  cursor: pointer;
  line-height: 1;
}
@media (hover: hover) {
  .cat-qty button:hover { background: var(--gold-400); color: var(--onyx-900); }
}
.cat-qty .n {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-100);
}
.cat-tray .cat-qty { background: rgba(253,244,210,0.12); }

/* ---------- REQUEST MODAL EXTRAS ---------- */
.cat-summary {
  background: var(--surface-warm);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 4px;
}
.cat-summary h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 10px;
}
.cat-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-2);
  padding: 3px 0;
}
.cat-summary-row.est {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--fg-1);
  font-weight: 600;
}
/* .section-divider-text lives in styles.css — both pages that load this file
   already have it. */

.cat-seg { display: flex; gap: 8px; margin-top: 6px; }
.cat-seg button {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  background: transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.cat-seg button.on { background: var(--onyx-900); border-color: var(--onyx-900); color: var(--gold-100); }

.cat-error {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--danger);
  margin-top: 12px;
  min-height: 18px;
}

/* ============================================================
   QUOTE PAGE (quote.html)
   ============================================================ */
.quote-page { background: var(--bg); min-height: 100vh; }
.quote-top {
  background: var(--onyx-900);
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--gold-500);
}
.quote-top img { height: 40px; display: block; }
.quote-top .quote-top__label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.quote-wrap { max-width: 720px; margin: 0 auto; padding: 56px 24px 80px; }

.quote-hero { text-align: center; margin-bottom: 40px; }
.quote-hero .cw-eyebrow { display: inline-flex; justify-content: center; }
.quote-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.1;
  margin: 10px 0 12px;
}
.quote-hero p { font-family: var(--font-sans); font-size: 16px; color: var(--fg-2); margin: 0 auto; max-width: 46ch; }

.quote-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--gold-100);
  border: 1px solid var(--gold-300);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-700);
}
.quote-countdown.urgent { background: #F9E0D6; border-color: var(--terracotta); color: var(--terracotta-deep); }

.quote-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.quote-card h2 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 18px;
}
.quote-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
.quote-fact span {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.quote-fact b { font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--fg-1); }

.quote-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.quote-line:last-of-type { border-bottom: 0; }
.quote-line b { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--fg-1); display: block; }
.quote-line .meta { font-family: var(--font-sans); font-size: 13px; color: var(--fg-3); }
.quote-line .amt { font-family: var(--font-display); font-size: 19px; font-weight: 600; white-space: nowrap; }

.quote-totals { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-strong); }
.quote-total-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--fg-2);
  padding: 4px 0;
}
.quote-total-row.discount { color: var(--success); }
.quote-total-row.grand {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 17px;
  color: var(--fg-1);
  font-weight: 600;
}
.quote-total-row.grand .amt { font-family: var(--font-display); font-size: 34px; color: var(--hot); font-weight: 600; }

.quote-note {
  background: var(--surface-warm);
  border-left: 2px solid var(--gold-400);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  margin-bottom: 20px;
  white-space: pre-wrap;
}

.quote-actions { text-align: center; padding: 12px 0 0; }
.quote-actions .cw-btn { min-width: 260px; justify-content: center; }
/* Square owns the iframe, so we style the box around it. min-height reserves
   the space before the iframe arrives, or the Pay button jumps as someone
   reaches for it. */
#quoteCardWrap { margin-bottom: 14px; }
#quoteCard {
  min-height: 90px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(61,31,14,0.18);
  border-radius: 10px;
}
.quote-error {
  min-height: 1.2em;
  margin-bottom: 10px;
  color: #b3261e;
  font-size: 14px;
  line-height: 1.5;
}

.quote-fineprint {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 14px;
  line-height: 1.6;
}

.quote-state {
  text-align: center;
  padding: 72px 24px;
  max-width: 520px;
  margin: 0 auto;
}
.quote-state .mark {
  font-family: var(--font-script);
  font-size: 64px;
  color: var(--gold-400);
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}
.quote-state h1 { font-family: var(--font-display); font-weight: 500; font-size: 38px; margin: 0 0 12px; }
.quote-state p { font-family: var(--font-sans); font-size: 16px; color: var(--fg-2); margin: 0 0 8px; }

.quote-banner {
  border-radius: var(--r-md);
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 15px;
  margin-bottom: 20px;
  line-height: 1.6;
}
.quote-banner.ok { background: #E7F1E4; border: 1px solid var(--success); color: #2E5A31; }
.quote-banner.wait { background: var(--gold-100); border: 1px solid var(--gold-300); color: var(--gold-700); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  .cw-catering__inner { padding: 72px 32px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .cw-catering__inner { padding: 60px 20px; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-tray { padding: 22px 20px; }
  .cat-tray-line { grid-template-columns: 1fr auto; }
  .cat-tray-line .amt { grid-column: 2; }
  .quote-card { padding: 24px 20px; }
  .quote-facts { grid-template-columns: 1fr; gap: 14px; }
  .quote-wrap { padding: 36px 18px 60px; }
  .quote-actions .cw-btn { width: 100%; min-width: 0; }
}

/* Same reasoning as the block at the foot of styles.css: the catering tray's
   steppers were 32px, which is a small thing to hit with a thumb while
   working out how many urns forty people need. */
@media (pointer: coarse) {
  .cat-qty button { width: 44px; height: 44px; }
  .cat-qty .n { min-width: 30px; }
}