/* Fraktured ticket-shop layer (A34/A43, 2026-08-06).
 *
 * Buyer-facing pages (index / shop / thanks / ticket / transfer). These pages load
 * the REAL marketing-site stylesheet first (/tickets/assets/site.css, the exact file
 * frakturedphoenix.com serves), so the palette, the fonts and the base type come
 * straight from the site and CANNOT DRIFT. This file is only the delta on top:
 *   1. buyer components the site stylesheet has no equivalent for (.panel, .pill,
 *      .flash, the bare form controls, the storefront header/footer), and
 *   2. a few overrides where the site's full-page rules are wrong for a narrow
 *      checkout column (its 40-80px hero h1, its centered decorated footer, the
 *      no-padding body, the .btn top-margin meant for centered button rows).
 * Load order matters: site.css first, this second (see public_base.html).
 *
 * Do NOT define colours or @font-face here. Those live in site.css so the two stay
 * in lockstep; reference the site's CSS variables (var(--acc) etc.) instead. */

/* buyer column: the site body has no padding (it spaces via .top/.wrap). Give the
   storefront a gutter; background + font stay inherited from site.css. */
body{padding:26px 18px 60px}
main.bare{max-width:none;margin:0}

/* headings: the site h1 is a 40-80px hero; a checkout column needs it calmer. */
h1{font-size:clamp(28px,7vw,44px);letter-spacing:.02em;line-height:1.02;margin:.2em 0}
h2{font-size:clamp(21px,5.5vw,28px);letter-spacing:.02em;line-height:1.05;margin:.2em 0}
p{margin:.6em 0}
code{font-family:'Space Mono',monospace;background:var(--field);border:1px solid var(--line);border-radius:4px;padding:3px 7px;word-break:break-all}

/* card / notice */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.flash{background:rgba(61,123,255,.1);border:1px solid var(--acc);border-radius:8px;padding:12px 14px;margin:12px 0;color:var(--txt);font-size:15px}

/* pills */
.pill{display:inline-block;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acc2);border:1px solid var(--line);border-radius:999px;
  padding:4px 11px;background:rgba(61,123,255,.08);white-space:nowrap;vertical-align:middle}
.pill.ok{color:#3fbf6f;border-color:rgba(63,191,111,.5);background:rgba(63,191,111,.1)}
.pill.warn{color:#ffcf5f;border-color:rgba(255,207,95,.5);background:rgba(255,207,95,.08)}
.pill.bad{color:#ff6b6b;border-color:rgba(255,107,107,.5);background:rgba(255,107,107,.08)}

/* form controls (the site only styles .promo-scoped inputs; buyer forms are bare) */
label{display:block;color:var(--dim);font-family:'Space Mono',monospace;font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;margin:14px 0 6px}
label .dim{text-transform:none;letter-spacing:normal;font-family:'Space Grotesk',sans-serif}
input,select{width:100%;background:var(--field);border:1px solid var(--line);border-radius:6px;
  padding:13px 14px;color:var(--txt);font:16px/1.4 'Space Grotesk',sans-serif;appearance:none}
select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23868da0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px;padding-right:34px}
input:focus,select:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
::placeholder{color:var(--dim);opacity:.7}

/* buttons: the site's .btn carries a big top margin for centered rows and only
   exists as a class; buyer forms need a full-width control (bare <button>) with no
   stray margin. Colours/glow still come from the site variables. */
button,.btn{display:inline-block;margin:0;background:var(--acc);color:var(--ink);border:1px solid var(--acc);
  border-radius:4px;padding:13px 26px;font-family:'Space Grotesk',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:15px;cursor:pointer;
  box-shadow:0 0 22px var(--glow);transition:var(--t-fast);text-align:center}
button:hover,.btn:hover{background:var(--acc2);border-color:var(--acc2);color:var(--ink);text-decoration:none}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
button.sec,.btn.sec{background:transparent;color:var(--txt);border-color:var(--line);box-shadow:none}
button.sec:hover,.btn.sec:hover{background:transparent;border-color:var(--acc);color:var(--acc2)}

/* storefront header + footer (A42). The wordmark inherits the site's .logo styling
   as-is (that IS the site header mark); here we only lay it out. The footer has to
   beat the site's element-level footer{} (centered, 48px padding, decorative
   ::before), so it sets its own full padding and removes the ::before. */
.shop-top{max-width:440px;margin:0 auto 8px}
.shop-top .logo:hover{text-decoration:none;filter:brightness(1.12)}
.shop-foot{max-width:440px;margin:44px auto 0;padding:18px 0 0;border-top:1px solid var(--line);text-align:center}
.shop-foot::before{content:none}
.shop-foot nav{display:flex;flex-wrap:wrap;gap:9px 18px;justify-content:center;margin-bottom:10px}
.shop-foot nav a{color:var(--dim);font-family:'Space Mono',monospace;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em}
.shop-foot nav a:hover{color:var(--acc2);text-decoration:none}
.shop-foot p{margin:0}
.shop-foot p a{color:var(--dim);text-decoration:underline}
.shop-foot p a:hover{color:var(--acc2)}