/* PlateCrew public pages (booking, and future customer-facing pages).
   Every colour and font is a theme variable (see theme.css_vars); never hardcode a brand colour here.
   Derived from the original Chow Haul booking page styles. */
*, *::before, *::after { box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--char); color: var(--smoke); font-family: var(--font-body); }
/* NAV */
    nav { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 0 2.5rem; height: 56px; background: rgba(var(--bg-rgb),0.97); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(var(--accent-rgb),0.25); }
/* PAGE */
    .page { max-width: 780px; margin: 0 auto; padding: 3.5rem 2rem 5rem; }
.page-label { font-family: var(--font-label); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ember-text); margin-bottom: 0.4rem; }
.page-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); color: var(--cream); line-height: 1.1; }
.page-sub { color: var(--ash); line-height: 1.7; margin-top: 1rem; max-width: 520px; }
.rule { width: 40px; height: 2px; background: var(--ember); margin: 1.25rem 0 2.5rem; }
/* FORM SECTIONS */
    .form-section { margin-bottom: 2.25rem; }
.section-title { font-family: var(--font-label); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--ember-text); padding-bottom: 0.65rem; border-bottom: 1px solid rgba(var(--accent-rgb),0.2); margin-bottom: 1.25rem; }
/* GRID */
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.full { grid-column: 1 / -1; }
/* FIELDS */
    .field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-family: var(--font-label); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ash); }
.field input, .field select, .field textarea {
      background: rgba(var(--overlay-rgb),0.04);
      border: 1px solid rgba(var(--muted-rgb),0.2);
      color: var(--smoke);
      font-family: var(--font-body);
      font-size: 0.95rem;
      padding: 0.7rem 0.9rem;
      outline: none;
      width: 100%;
      transition: border-color 0.2s;
    }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ember); }
.field textarea { resize: vertical; min-height: 90px; }
.field select option { background: var(--panel); }
.opt { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.75rem; }
/* CHECKBOXES */
    .checks { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.15rem; }
.checks label { display: flex; align-items: center; gap: 0.6rem; background: rgba(var(--overlay-rgb),0.03); border: 1px solid var(--border); padding: 0.55rem 0.9rem; font-size: 0.88rem; color: var(--ash); cursor: pointer; transition: all 0.15s; user-select: none; line-height: 1.3; }
.checks label span { flex: 1; }
.checks label:has(input:checked) { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.4); color: var(--smoke); }
.checks input[type=checkbox] { accent-color: var(--ember); width: auto; flex-shrink: 0; }
/* PER-PLATE PROTEIN CHECKS — price badge */
    .protein-checks label { justify-content: space-between; }
.protein-checks .price-badge { font-family: var(--font-label); font-weight: 700; font-size: 0.85rem; color: var(--gold); margin-left: 0.75rem; flex-shrink: 0; min-width: 120px; text-align: right; }
.protein-checks label:has(input:checked) .price-badge { color: var(--ember-text); }
/* PLATE BUILDER */
    .plate-builder { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.plate-row { background: rgba(var(--shade-rgb),0.2); border: 1px solid rgba(var(--muted-rgb),0.1); padding: 1rem 1.1rem; }
.plate-row-label { font-family: var(--font-label); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); margin-bottom: 0.5rem; }
/* Line 1: Plates + Proteins + Remove btn */
    .plate-row-top { display: grid; grid-template-columns: 80px 1fr 28px; gap: 1rem; align-items: start; margin-bottom: 0.65rem; }
.plate-qty-input { background: rgba(var(--overlay-rgb),0.04); border: 1px solid rgba(var(--muted-rgb),0.2); color: var(--smoke); font-family: var(--font-body); font-size: 1.1rem; padding: 0.6rem 0.5rem; width: 100%; outline: none; text-align: center; transition: border-color 0.2s; }
.plate-qty-input:focus { border-color: var(--ember); }
.protein-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.protein-tag { font-family: var(--font-label); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4rem 0.9rem; border: 1px solid rgba(var(--muted-rgb),0.2); color: var(--ash); cursor: pointer; transition: all 0.15s; user-select: none; }
.protein-tag:hover { border-color: rgba(var(--accent-rgb),0.4); color: var(--smoke); }
.protein-tag.selected { background: rgba(var(--accent-rgb),0.12); border-color: rgba(var(--accent-rgb),0.5); color: var(--smoke); }
.protein-tag[data-premium="1"].selected { background: rgba(var(--gold-rgb),0.1); border-color: rgba(var(--gold-rgb),0.5); color: var(--gold); }
/* Line 2: Rate + Subtotal as secondary result row */
    .plate-row-bottom { display: flex; align-items: center; gap: 1.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(var(--muted-rgb),0.07); }
.plate-result-item { display: flex; align-items: baseline; gap: 0.5rem; }
.plate-result-label { font-family: var(--font-label); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--muted-rgb),0.45); }
.plate-calc-val { font-family: var(--font-label); font-weight: 700; font-size: 1rem; color: rgba(var(--muted-rgb),0.3); }
.plate-calc-val.has-value { color: var(--gold); }
@keyframes flicker {
      0%   { color: var(--gold); transform: scale(1); }
      20%  { color: var(--ember-hover); transform: scale(1.18); text-shadow: 0 0 8px rgba(var(--accent-rgb),0.8), 0 0 16px rgba(var(--accent-rgb),0.4); }
      45%  { color: var(--gold); transform: scale(1.1); text-shadow: 0 0 6px rgba(var(--gold-rgb),0.6); }
      70%  { color: var(--gold); transform: scale(1.13); text-shadow: 0 0 10px rgba(var(--gold-rgb),0.5); }
      100% { color: var(--gold); transform: scale(1); text-shadow: none; }
    }
.plate-calc-val.flicker { animation: flicker 0.45s ease-out forwards; }
.plate-remove-btn { background: transparent; border: 1px solid rgba(var(--accent-rgb),0.15); color: rgba(var(--accent-rgb),0.4); width: 28px; height: 28px; cursor: pointer; font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.15s; margin-top: 1.4rem; flex-shrink: 0; padding: 0; }
.plate-remove-btn:hover { border-color: var(--ember); color: var(--ember-text); }
.btn-add-plate { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-label); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ash); border: 1px dashed rgba(var(--muted-rgb),0.25); padding: 0.6rem 1.1rem; cursor: pointer; transition: all 0.15s; background: transparent; margin-bottom: 0.5rem; }
.btn-add-plate:hover { border-color: rgba(var(--accent-rgb),0.4); color: var(--ember-text); }
.double-btn-area { margin-top: 0.5rem; min-height: 1.6rem; }
.double-btn { font-family: var(--font-label); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.28rem 0.75rem; border: 1px solid rgba(var(--gold-rgb),0.3); color: var(--gold); background: rgba(var(--gold-rgb),0.05); cursor: pointer; transition: all 0.15s; }
.double-btn:hover { border-color: rgba(var(--gold-rgb),0.6); background: rgba(var(--gold-rgb),0.12); }
.double-btn-active { border-color: rgba(var(--gold-rgb),0.5); background: rgba(var(--gold-rgb),0.1); color: var(--gold); }
.double-btn-active:hover { border-color: rgba(var(--accent-rgb),0.4); color: var(--ember-text); background: rgba(var(--accent-rgb),0.06); }
.double-badge { font-size: 0.68em; font-weight: 700; color: var(--gold); margin-left: 0.25rem; vertical-align: super; }
/* DEPOSIT TOOLTIP */
    .deposit-tip { position: relative; cursor: help; display: inline-flex; align-items: center; gap: 0.4rem; }
.deposit-tip-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(var(--muted-rgb),0.35); font-size: 0.6rem; color: rgba(var(--muted-rgb),0.5); line-height: 1; flex-shrink: 0; }
.deposit-tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 0; background: rgba(var(--bg-rgb),0.98); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--ash); font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; letter-spacing: 0; text-transform: none; padding: 0.6rem 0.9rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 20; line-height: 1.55; border-radius: 2px; }
.deposit-tip:hover::after { opacity: 1; }
/* RECEIPT */
    .receipt { margin-top: 1.75rem; background: var(--receipt-bg, rgba(var(--shade-rgb),0.25)); border: 1px solid rgba(var(--muted-rgb),0.15); font-family: var(--font-label); font-size: 0.9rem; }
.receipt-header { padding: 0.65rem 1.1rem; border-bottom: 1px solid rgba(var(--muted-rgb),0.12); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember-text); }
.receipt-body { padding: 0.75rem 1.1rem; }
.receipt-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.22rem 0; font-size: 0.88rem; color: var(--ash); }
.receipt-row .r-label { flex: 1; }
.receipt-row .r-val { text-align: right; font-weight: 700; color: var(--smoke); min-width: 80px; }
.receipt-row.muted .r-val { color: var(--ash); font-weight: 400; }
.receipt-row.indent .r-label { padding-left: 1rem; color: rgba(var(--muted-rgb),0.7); font-size: 0.83rem; }
.receipt-row.indent .r-val { color: rgba(var(--muted-rgb),0.7); font-size: 0.83rem; font-weight: 400; }
.receipt-divider { border: none; border-top: 1px solid rgba(var(--muted-rgb),0.12); margin: 0.5rem 0; }
.receipt-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0 0.25rem; }
.receipt-total-row .r-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ash); }
.receipt-total-row .r-val { font-size: 1.3rem; font-weight: 700; color: var(--gold); }
.receipt-deposit-row { display: flex; justify-content: space-between; align-items: baseline; padding: 0.15rem 0 0.1rem; }
.receipt-deposit-row .r-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ash); }
.receipt-deposit-row .r-val { font-size: 1rem; font-weight: 700; color: var(--ember-text); }
.receipt-footer { padding: 0.5rem 1.1rem 0.75rem; font-size: 0.72rem; color: rgba(var(--muted-rgb),0.45); border-top: 1px solid rgba(var(--muted-rgb),0.08); margin-top: 0.25rem; }
@media (max-width: 500px) { .svc-cards { grid-template-columns: 1fr; } }
/* BUTTONS */
    .btn-primary { background: var(--ember); color: var(--on-accent); font-family: var(--font-label); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.9rem 2.25rem; border: none; cursor: pointer; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); transition: background 0.2s, transform 0.15s; display: inline-block; text-decoration: none; }
.btn-primary:hover { background: var(--ember-hover); transform: translateY(-1px); }
/* STATES */
    .alert-error { padding: 0.85rem 1.1rem; border-left: 3px solid var(--ember); background: rgba(var(--accent-rgb),0.08); color: var(--danger); font-size: 0.9rem; margin-bottom: 1.5rem; display: none; }
.success-box { display: none; background: rgba(var(--ok-rgb),0.06); border: 1px solid rgba(var(--ok-rgb),0.3); padding: 2.5rem 2rem; text-align: center; }
.success-box h2 { font-family: var(--font-display); font-size: 1.75rem; color: var(--ok); margin-bottom: 0.75rem; }
.success-box p { color: var(--ash); line-height: 1.7; }
.success-box strong { color: var(--smoke); }
.loading-text { display: none; color: var(--ash); font-family: var(--font-label); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 600px) {
      .steps-grid { grid-template-columns: 1fr !important; }
      .grid-2 { grid-template-columns: 1fr; }
      nav { padding: 0 1.25rem; }
      .page { padding: 2.5rem 1.25rem 4rem; }
      .checks { display: grid; grid-template-columns: 1fr; gap: 0.4rem; }
      .checks label { width: 100%; }
      #fs-sides { grid-template-columns: 1fr !important; }
    }

/* ── Shared page shell (templates/public/_base.html) ───────────────────────── */
.site-header { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0 1.5rem; min-height: 56px; background: rgba(var(--bg-rgb), 0.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.3); }
.site-brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--cream);
  font-family: var(--font-display); font-size: 1rem; min-width: 0; }
.site-brand img { width: 34px; height: 34px; object-fit: cover; border-radius: var(--logo-radius); flex-shrink: 0;
  border: 1px solid rgba(var(--accent-rgb), 0.5); }
.site-brand em { font-style: normal; color: var(--ember-text); }
.site-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-back { font-family: var(--font-label); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ash); text-decoration: none; white-space: nowrap; }
.site-back:hover { color: var(--ember-text); }
.site-footer { border-top: 1px solid var(--border); background: var(--footer-bg); padding: 1.5rem; text-align: center;
  font-size: 0.8rem; color: var(--ash); line-height: 1.7; }
.site-footer .powered { display: block; margin-top: 0.5rem; font-size: 0.7rem; opacity: 0.6; letter-spacing: 0.08em; }
.site-footer a { color: inherit; }
.stack { display: flex; flex-direction: column; gap: 0.5rem; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.step-num { width: 32px; height: 32px; border: 1px solid rgba(var(--accent-rgb), 0.5); border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-family: var(--font-label); font-weight: 700; font-size: 0.85rem; color: var(--ember-text); }
.step-title { font-family: var(--font-label); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream); }
.step-text { font-size: 0.82rem; color: var(--ash); line-height: 1.55; }
.pull-quote { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; padding: 1rem 0; }
.pull-quote::before { content: ""; flex-shrink: 0; width: 2px; height: 2.5rem; background: var(--ember); opacity: 0.6; }
.pull-quote p { font-family: var(--font-label); font-size: 1.05rem; font-style: italic; color: var(--smoke); line-height: 1.4; margin-bottom: 0.2rem; }
.pull-quote cite { font-family: var(--font-label); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ash); font-style: normal; }
.notice { padding: 0.85rem 1.1rem; border: 1px solid rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.08); color: var(--smoke); line-height: 1.6; }
@media (max-width: 720px) { .steps-grid { grid-template-columns: 1fr 1fr; } .site-header { padding: 0 1rem; } }
@media (max-width: 480px) { .steps-grid { grid-template-columns: 1fr; } }