/* Arizona Christmas Lights — ticketing app styles.
   Same brand tokens as the marketing site's theme, trimmed to what this
   utilitarian app (purchase flow + staff portal) actually needs. */
:root {
  --acl-saguaro:#1E5F4B; --acl-ocotillo:#D33F35; --acl-bulb:#E8A33D; --acl-desert-night:#12181F; --acl-sand:#F6F1E8;
  --acl-green-800:#14493A; --acl-green-700:#1E5F4B; --acl-green-300:#5BB98B; --acl-green-200:#A8D6BE;
  --acl-red-700:#B92C28; --acl-red-500:#D33F35;
  --acl-sand-050:#F6F1E8; --acl-sand-150:#EDE9E2; --acl-sand-300:#E3DDD2;
  --acl-stone-300:#9A968E; --acl-stone-500:#6B6A64; --acl-stone-600:#4A4943;
  --acl-night-900:#12181F; --acl-night-800:#1A222C; --acl-night-600:#26313D;
  --font-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius-xs:3px; --radius-sm:4px;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--acl-sand-050); color: var(--acl-desert-night);
  font: 400 16px/1.55 var(--font-sans);
}
a { color: var(--acl-saguaro); }
h1, h2, h3 { font-family: var(--font-sans); margin: 0 0 12px; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 640px; margin: 0 auto; padding: 0 24px; }

.topbar { background: var(--acl-night-900); color: var(--acl-sand-050); padding: 16px 0; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; }
.topbar .brand { font-weight: 800; letter-spacing: 0.02em; text-decoration: none; color: var(--acl-sand-050); }
.topbar nav a { color: var(--acl-sand-050); text-decoration: none; margin-left: 20px; font-size: 14px; font-weight: 500; }
.topbar nav a:hover { color: var(--acl-green-300); }

.page { padding: 44px 0 80px; }
.card { background: #fff; border: 1px solid var(--acl-sand-300); border-radius: var(--radius-sm); padding: 28px; margin-bottom: 24px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--acl-green-700); }

label { display: block; font-size: 13px; font-weight: 600; color: var(--acl-stone-600); margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--acl-sand-300); border-radius: var(--radius-xs);
  font: 400 15px var(--font-sans); color: var(--acl-desert-night); margin-bottom: 18px; background: #fff;
}
input:focus, select:focus { outline: none; border-color: var(--acl-bulb); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-xs);
  border: 1px solid transparent; cursor: pointer; font: 600 15px var(--font-sans); padding: 0 22px; height: 46px;
  text-decoration: none; }
.btn-primary { background: var(--acl-red-500); color: #fff; }
.btn-primary:hover { background: var(--acl-red-700); }
.btn-secondary { background: var(--acl-green-700); color: var(--acl-sand-050); }
.btn-secondary:hover { background: var(--acl-green-800); }
.btn-quiet { background: transparent; border-color: var(--acl-sand-300); color: var(--acl-desert-night); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-block { width: 100%; }

table.data { width: 100%; border-collapse: collapse; }
table.data th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--acl-stone-500); padding: 10px 12px; border-bottom: 1px solid var(--acl-sand-300); }
table.data td { padding: 12px; border-bottom: 1px solid var(--acl-sand-150); font-size: 14px; }
table.data tr:hover td { background: var(--acl-sand-050); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-valid { background: var(--acl-green-200); color: var(--acl-green-800); }
.badge-claimed { background: var(--acl-sand-300); color: var(--acl-stone-600); }
.badge-pending { background: #FBE7B6; color: #7A5410; }
.badge-paid { background: var(--acl-green-200); color: var(--acl-green-800); }
.badge-failed { background: #F3C9C6; color: var(--acl-red-700); }

.flash { padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; }
.flash-error { background: #F3C9C6; color: var(--acl-red-700); }
.flash-success { background: var(--acl-green-200); color: var(--acl-green-800); }

.mono { font-family: var(--font-mono); }
.muted { color: var(--acl-stone-500); }
.text-right { text-align: right; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card { background: var(--acl-night-900); color: var(--acl-sand-050); border-radius: var(--radius-sm); padding: 20px; }
.stat-card .value { font-size: 28px; font-weight: 800; display: block; margin-bottom: 4px; }
.stat-card .label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--acl-green-300); }

/* ==========================================================================
   Purchase flow — trust-building layout for /tickets/ and /tickets/checkout
   ========================================================================== */
.checkout-hero { padding: 48px 0 4px; }
.checkout-hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.015em; margin: 8px 0 10px; }
.checkout-hero .lede { color: var(--acl-stone-600); font-size: 17px; max-width: 620px; margin: 0; }

.purchase-layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .purchase-layout { grid-template-columns: 1fr; } }

.purchase-form.card { padding: 32px; }

.field-icon-label { display: flex; align-items: center; gap: 8px; }
.field-icon-label .icon { flex: none; color: var(--acl-saguaro); }

.trust-card { position: sticky; top: 24px; padding: 26px; }
.trust-lock { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--acl-desert-night); margin-bottom: 18px; }
.trust-lock .icon { color: var(--acl-saguaro); flex: none; }

.trust-list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.trust-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--acl-stone-600); line-height: 1.45; }
.trust-list .icon { flex: none; margin-top: 1px; color: var(--acl-saguaro); }

.order-summary { border-top: 1px solid var(--acl-sand-300); border-bottom: 1px solid var(--acl-sand-300); padding: 16px 0; margin-bottom: 20px; }
.order-summary .row { display: flex; justify-content: space-between; font-size: 14px; color: var(--acl-stone-600); padding: 4px 0; }
.order-summary .row.total { font-weight: 800; color: var(--acl-desert-night); font-size: 17px; padding-top: 10px; }

.payment-badges-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acl-stone-500); margin-bottom: 10px; display: block; }
.payment-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.payment-badges svg { display: block; }

.icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; }

.trust-strip-inline { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--acl-stone-600); margin-top: 16px; }
.trust-strip-inline .icon { color: var(--acl-saguaro); }