/* ─── Theme "stage" — customer pages to match a dark, loud shop site ───────
 *
 * Rendered to /theme.css for shops whose shops.json entry says
 * "theme": "stage" (render-shop.mjs); every other shop gets the empty stub.
 * Each customer page links /theme.css last in <head>, so these rules sit on
 * top of styles.css and the page's own <style>.
 *
 * The look: dark header/footer like the shop's site, the form on a bone
 * background (so Stripe's card field, which can't be themed from here, stays
 * readable), Anton headings, mono labels and price tags, one hot accent.
 * The header shows only the logo (a wordmark), so the shop name is hidden.
 *
 * marketing-chrome.js injects its own <style> after this file, so chrome
 * rules here use `html body …` to win on specificity.
 */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

:root {
  --z-ink: #0d0c0b;
  --z-ink-2: #151412;
  --z-line: #2c2a26;
  --z-bone: #f2ede4;
  --z-bone-2: #e6dfd2;
  --z-mute: #9b958a;
  --z-mute-2: #6f6a61;
  --z-hot: #ff5b1f;
  --z-hot-text: #c2410c;           /* orange that reads on bone */
  --z-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --z-text: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --z-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* marketing-chrome.js: draw the site-style footer (logo, four columns,
     credits) — the one www.<shop> uses — instead of the generic one. */
  --chrome-footer: site;

  /* styles.css variables the pages use */
  --bg: #faf6ef;
  --surface: #ffffff;
  --border: #d9d1c2;
  --text: var(--z-ink);
  --text-muted: var(--z-mute-2);
  --accent: var(--z-hot-text);
  --accent-dark: var(--z-ink);
  --radius: 4px;
}

html, html body {
  background: var(--z-bone);
  color: var(--z-ink);
  font-family: var(--z-text);
  font-size: 16px;
}
::selection { background: var(--z-hot); color: var(--z-ink); }

/* ── Type ─────────────────────────────────────────────────────────────── */
main h1, main h2, main h3 {
  font-family: var(--z-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .95;
  color: var(--z-ink);
}
main h1 { font-size: clamp(44px, 7vw, 76px); }
main h2 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 18px; }
main h3 { font-size: 24px; }
main a { color: var(--z-hot-text); }

.field label:not(.agree), label.field-label {
  font-family: var(--z-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--z-ink);
}
.field .hint, .hint { color: var(--z-mute-2); }

/* ── Inputs ───────────────────────────────────────────────────────────── */
main input:not([type=checkbox]):not([type=radio]), main select, main textarea,
#card-element {
  background: #fff;
  border: 1.5px solid #cfc7b8;
  border-radius: var(--radius);
  color: var(--z-ink);
  font-family: var(--z-text);
  font-size: 15px;
  padding: 11px 12px;
}
main input:focus, main select:focus, main textarea:focus,
#card-element.StripeElement--focus {
  outline: 2px solid var(--z-hot);
  outline-offset: 0;
  border-color: var(--z-ink);
}
main input[type=checkbox], main input[type=radio] { accent-color: var(--z-hot); }

/* The yellow "← next" helper becomes the hot accent. */
.field.next-required {
  background: rgba(255, 91, 31, .07);
  box-shadow: 0 0 0 2px var(--z-hot);
  border-radius: var(--radius);
}
.field.next-required > label::after { color: var(--z-hot-text); font-family: var(--z-mono); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
main .btn {
  font-family: var(--z-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid var(--z-ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--z-ink);
  padding: 12px 18px;
}
main .btn:hover { background: var(--z-ink); color: var(--z-bone); border-color: var(--z-ink); }
main .btn-primary {
  background: var(--z-hot);
  border-color: var(--z-hot);
  color: var(--z-ink);
  padding: 15px 24px;
}
main .btn-primary:hover { background: var(--z-ink); border-color: var(--z-ink); color: var(--z-bone); }
main .btn:disabled, main .btn-primary:disabled { opacity: .45; }
main .btn:disabled:hover, main .btn-primary:disabled:hover { background: var(--z-hot); border-color: var(--z-hot); color: var(--z-ink); }

/* ── Side panels (reserve pricing, lessons summary) → dark cards ──────── */
main.public .card.prices, main.public .card.summary {
  background: var(--z-ink);
  color: var(--z-bone);
  border-radius: var(--radius);
  padding: 22px;
}
main.public .card.prices h3, main.public .card.summary h3 {
  font-family: var(--z-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 30px;
  line-height: .95;
  color: var(--z-bone);
  margin-bottom: 12px;
}
.prices .muted-head, .prices .muted, .summary .policy, .summary .row .k {
  color: var(--z-mute) !important;
}
.prices .muted-head { font-family: var(--z-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.price-row, .summary .row { border-bottom-color: var(--z-line); font-size: 14px; }
.price-row .term-label { color: var(--z-bone-2); }
.price-row .term-amt, .summary .row .v { font-family: var(--z-mono); font-weight: 700; color: var(--z-bone); }
.price-row.active { background: rgba(255, 91, 31, .18); }
.price-row.active .term-amt { color: var(--z-hot); }

/* ── Banners, agreement box, packs ────────────────────────────────────── */
.returning-banner, .prefill-banner, .card-on-file {
  background: #fff;
  border: 1.5px solid var(--z-ink);
  border-left: 6px solid var(--z-hot);
  border-radius: var(--radius);
}
.returning-banner strong, .prefill-banner strong { color: var(--z-ink); }
.agree { background: #fff; border: 1.5px solid #cfc7b8; border-radius: var(--radius); font-family: var(--z-text); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.pack { background: #fff; border: 1.5px solid #cfc7b8; border-radius: var(--radius); }
.pack:has(input:checked) { border-color: var(--z-ink); box-shadow: 0 0 0 2px var(--z-hot); }
.pack .price { font-family: var(--z-mono); }

.success-card .check { color: var(--z-hot); }
.success-card h2 { color: var(--z-ink); font-size: 44px; }

/* ── Header (marketing-chrome.js) ─────────────────────────────────────── */
html body .bb-chrome-header {
  background: var(--z-ink);
  border-bottom: 1px solid var(--z-line);
  font-family: var(--z-mono);
}
html body .bb-chrome-header-inner { max-width: 1240px; padding: 14px clamp(16px, 4vw, 40px); }
html body .bb-chrome-brand img { width: auto; height: 40px; }
html body .bb-chrome-brand-text, html body .bb-chrome-brand-sub { display: none; }
html body .bb-chrome-nav { gap: 4px; font-size: 13px; }
html body .bb-chrome-nav a {
  color: var(--z-bone-2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius);
}
html body .bb-chrome-nav a:hover { color: var(--z-hot); border: 0; }
html body .bb-chrome-nav a.active { background: var(--z-bone); color: var(--z-ink); }
@media (max-width: 720px) {
  html body .bb-chrome-brand img { height: 32px; }
  html body .bb-chrome-nav a { padding: 8px 10px; }
}

/* ── Footer (site-style, see --chrome-footer) ─────────────────────────── */
html body .bb-chrome-sfooter {
  background: var(--z-ink);
  color: var(--z-bone-2);
  font-family: var(--z-text);
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 40px) 32px;
}
html body .bb-chrome-sfooter h4 { font-family: var(--z-mono); color: var(--z-mute); }
html body .bb-chrome-sfooter a:hover { color: var(--z-hot); }
html body .bb-chrome-sfooter-day { color: var(--z-mute); }
html body .bb-chrome-sfooter-bottom { border-top-color: var(--z-line); font-family: var(--z-mono); color: var(--z-mute); letter-spacing: .04em; }
html body .bb-chrome-sfooter-bottom a { color: var(--z-mute); }
html body .bb-chrome-sfooter-bottom a:hover { color: var(--z-bone); }

/* ── Footer (generic, for pages without the flag) ─────────────────────── */
html body .bb-chrome-footer {
  background: var(--z-ink);
  color: var(--z-bone-2);
  font-family: var(--z-text);
  font-size: 15px;
  padding: 56px clamp(16px, 4vw, 40px) 32px;
}
html body .bb-chrome-footer-inner, html body .bb-chrome-footer-bottom { max-width: 1240px; }
html body .bb-chrome-footer h4 {
  font-family: var(--z-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--z-mute);
}
html body .bb-chrome-footer p { color: var(--z-bone-2) !important; }
html body .bb-chrome-footer a { color: var(--z-bone-2); }
html body .bb-chrome-footer a:hover { color: var(--z-hot); text-decoration: none; }
html body .bb-chrome-footer-bottom {
  border-top-color: var(--z-line);
  font-family: var(--z-mono);
  color: var(--z-mute);
  text-align: left;
}