/* ============================================================
 * inline-purchase.css — Shared inline ticket-purchase flow
 * Offline Comedy · terminal/CRT design language
 *
 * Loaded by both /account and /event. Owns only the "morph
 * region" inside each timeslot's .cta-wrap — the showtime chip,
 * status badge, remaining count, and sold bar above it are
 * page-owned and untouched by this stylesheet.
 * ============================================================ */

:root {
  /* Faintest phosphor tone — used for "//" asides/labels. Sits between
     --green-dim (readable secondary text) and --green-dark (hairline
     borders only). Neither page defines this today. */
  --green-ghost: #0a5c1f;
  /* Alias so this file and the design spec can share vocabulary —
     var(--off-green) (crt-buttons.css) is already the exact value. */
  --neon-green: var(--off-green, #39FF14);
}

/* ── Morph region ─────────────────────────────────────────────── */
.ip-morph-outer {
  overflow: hidden;
  transition: height .34s cubic-bezier(.2,.8,.2,1);
}
.ip-morph-inner {
  padding-top: 12px;
}
/* Visually-hidden aria-live sibling — the scrambling content itself is
   never announced; this node only ever holds the settled state summary,
   updated after each transition completes. */
.ip-live-region {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Shared bits ──────────────────────────────────────────────── */
.ip-never-mind {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--green-dim);
  cursor: pointer;
  letter-spacing: .04em;
}
.ip-never-mind:hover { color: var(--green); }

@keyframes ocNudge {
  0%, 100% { opacity: 1; }
  25%      { opacity: .3; }
  50%      { opacity: 1; }
  75%      { opacity: .3; }
}
.ip-clamp-msg {
  font-size: 11px;
  color: #FFD700;
  letter-spacing: .04em;
  margin-top: 8px;
  min-height: 1em;
}
.ip-clamp-msg.ip-flash { animation: ocNudge 1.1s steps(1) 2; }

/* Required-field validation — ported from event.html's .flow-err /
   flowErr() (the real production nudge treatment; NOT the design
   handoff prototype's gold flash, which was a stand-in for this). */
@keyframes ip-glitch-flicker {
  0%   { clip-path: inset(0 0 0 0); transform: translate(0,0); opacity: 1; }
  6%   { opacity: .25; }
  10%  { opacity: 1; }
  15%  { clip-path: inset(40% 0 25% 0); transform: translate(-3px, 0); }
  22%  { clip-path: inset(15% 0 55% 0); transform: translate(3px, 0); opacity: .5; }
  27%  { clip-path: inset(70% 0 8% 0); transform: translate(-2px, 0); opacity: 1; }
  34%  { clip-path: inset(0 0 0 0); transform: translate(0,0); opacity: .15; }
  40%  { opacity: 1; }
  48%  { clip-path: inset(30% 0 40% 0); transform: translate(4px, -1px); }
  56%  { clip-path: inset(0 0 0 0); transform: translate(-2px, 0); opacity: .4; }
  62%  { opacity: 1; }
  70%  { transform: translate(2px, 0) skewX(.8deg); opacity: .7; }
  78%  { transform: translate(-1px, 1px) skewX(0); opacity: 1; }
  84%  { opacity: .35; }
  90%  { opacity: 1; }
  100% { clip-path: inset(0 0 0 0); transform: translate(0,0); opacity: 1; }
}
.ip-glitch-flicker { animation: ip-glitch-flicker .4s linear; }
.ip-flow-err {
  font-size: 11px;
  color: var(--red);
  letter-spacing: .03em;
  margin-top: 8px;
  min-height: 1em;
  text-shadow: 0 0 8px rgba(255,68,68,.5);
}

@media (prefers-reduced-motion: reduce) {
  .ip-clamp-msg.ip-flash,
  .ip-glitch-flicker { animation: none; }
}

/* ── State 0: rest ────────────────────────────────────────────── */
.ip-owned-line {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--green-dim);
  margin-bottom: 10px;
}

/* ── State 1: tier tiles ──────────────────────────────────────── */
.ip-tiers-label {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--green-ghost);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.ip-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 420px) {
  .ip-tier-grid { grid-template-columns: 1fr; }
}
.ip-tier-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 13px 12px;
  border: 1px solid var(--green-dark);
  border-radius: 3px;
  background: rgba(0,255,65,.03);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.ip-tier-tile:hover,
.ip-tier-tile:focus-visible {
  border-color: var(--green-dim);
  box-shadow: 0 0 16px rgba(0,255,65,.13);
  outline: none;
}
.ip-tier-tile-name {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--green);
  text-transform: uppercase;
}
.ip-tier-tile-meta {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--green-dim);
}
.ip-tier-tile-meta.ip-soldout { color: var(--red); }
.ip-tier-tile-donation-note { display: inline-block; margin-top: 2px; opacity: .75; font-size: 11px; }
.ip-tier-tile-cta {
  margin-top: 6px;
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-family: var(--font-cta, "Space Mono", monospace);
  font-size: 12px;
  letter-spacing: .16em;
  padding: 10px 8px;
  border-radius: 3px;
  pointer-events: none; /* the tile is the hit target, not this */
}
.ip-tier-tile-cta.ip-buy {
  /* Outlined, matching .crt-cta's base look (crt-buttons.css) — reverted
     from a solid fill per live review, same as ctaMarkup()'s buttons. */
  color: var(--off-green-lit, var(--green));
  background: var(--off-bg-deep, transparent);
  border: 1px solid rgba(57,255,20,.4);
  text-shadow: 0 0 8px rgba(57,255,20,.9), 0 0 16px rgba(57,255,20,.45);
  box-shadow: 0 0 12px rgba(57,255,20,.3), inset 0 0 16px rgba(57,255,20,.1);
}
.ip-tier-tile-cta.ip-waitlist {
  color: var(--red);
  background: transparent;
  border: 1px solid rgba(255,68,68,.4);
}

/* ── Donation amount picker (shown before qty, Donation tiers only) ── */
.ip-donation-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ip-donation-preset-btn {
  background: transparent;
  border: 1px solid var(--green-dark);
  color: var(--green);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 3px;
  cursor: pointer;
}
.ip-donation-preset-btn:hover { border-color: var(--green-dim); background: rgba(0,255,65,.05); }
.ip-donation-custom-row { margin-top: 12px; }
.ip-donation-warn {
  font-size: 11px;
  line-height: 1.6;
  color: #FFD700;
  letter-spacing: .01em;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,215,0,.35);
  border-radius: 3px;
  background: rgba(255,215,0,.04);
}
.ip-donation-bump-btn {
  background: transparent;
  border: 1px solid #FFD700;
  color: #FFD700;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 4px;
  white-space: nowrap;
}
.ip-donation-bump-btn:hover { background: rgba(255,215,0,.12); }

/* ── State 2/3: quantity + form ──────────────────────────────── */
.ip-qty-context {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--green-dim);
}
.ip-qty-label {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--green-ghost);
  margin-top: 4px;
}
.ip-qty-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.ip-qty-btn {
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--green-dark);
  color: var(--green);
  font-size: 16px;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
}
.ip-qty-btn:hover:not(:disabled) { border-color: var(--green-dim); }
.ip-qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.ip-qty-val { font-size: 14px; color: var(--green); min-width: 5.5em; text-align: center; }
.ip-qty-total {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--green);
}
.ip-qty-total em { font-style: normal; color: var(--green); }

.ip-form {
  margin-top: 18px;
  border-top: 1px solid var(--green-dark);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ip-field-label {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--green-ghost);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ip-field-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg, #0a0a0a);
  border: 1px solid var(--green-dark);
  color: var(--green);
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 3px;
}
.ip-field-input:focus { outline: none; border-color: var(--green-dim); }
.ip-field-input::placeholder { color: var(--placeholder, #1c4827); }

.ip-consent-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.ip-consent-box { font-size: 13px; color: var(--green); flex-shrink: 0; line-height: 1.4; user-select: none; }
.ip-consent-text { font-size: 11px; line-height: 1.5; color: var(--green-dim); }
.ip-consent-fine { display: block; font-size: 10px; line-height: 1.6; color: var(--green-ghost); margin-top: 3px; letter-spacing: .01em; }
.ip-consent-fine strong { color: var(--green-dim); font-weight: 700; }
.ip-consent-fine a { color: var(--teal); text-decoration: none; }
.ip-consent-row.ip-nudged .ip-consent-box,
.ip-consent-row.ip-nudged .ip-consent-text,
.ip-consent-row.ip-nudged .ip-consent-fine,
.ip-consent-row.ip-nudged .ip-consent-fine strong { color: #FFD700; opacity: 1; }

.ip-legal {
  font-size: 11px;
  line-height: 1.8;
  color: var(--green-ghost);
}

.ip-sms-nudge {
  font-size: 11px;
  color: #FFD700;
  letter-spacing: .03em;
  line-height: 1.5;
}
.ip-sms-nudge .cur { background: #FFD700; }

.ip-pay-error {
  border: 1px solid var(--red);
  border-radius: 3px;
  padding: 10px 12px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--red);
}
.ip-pay-error .ip-pay-error-head { display: block; margin-bottom: 4px; }

.ip-payment-mount { margin: 4px 0; }
.ip-payment-loading { font-size: 12px; color: var(--green-dim); }

/* ── race / just-sold-out ─────────────────────────────────────── */
.ip-race-block {
  border: 1px solid var(--red);
  border-radius: 3px;
  padding: 12px 13px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  line-height: 1.8;
  color: var(--red);
  letter-spacing: .06em;
  margin-bottom: 12px;
}
.ip-race-block .ip-race-head { display: block; font-weight: 700; margin-bottom: 2px; }

/* ── waitlist ──────────────────────────────────────────────────── */
.ip-wl-context {
  font-size: 12px;
  color: var(--teal);
}
.ip-wl-label {
  font-size: 12px;
  color: var(--green-ghost);
  margin-top: 14px;
}
.ip-wl-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.ip-wl-row {
  padding: 12px 13px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--green-dark);
  background: transparent;
  box-shadow: none;
  transition: border-color .12s, box-shadow .12s;
}
.ip-wl-row[aria-checked="true"] {
  border-color: var(--neon-green);
  background: rgba(0,255,65,.05);
  box-shadow: 0 0 16px rgba(0,255,65,.14);
}
.ip-wl-row:focus-visible { outline: none; border-color: var(--green-dim); }
.ip-wl-row-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ip-wl-row-box { font-size: 13px; color: var(--green); flex-shrink: 0; }
.ip-wl-row-title {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--green);
  text-shadow: var(--glow-text, 0 0 8px rgba(0,255,65,.35));
  white-space: nowrap;
}
.ip-wl-row-leader {
  flex: 1;
  border-bottom: 1px dotted var(--green-dark);
  margin: 0 2px;
  align-self: center;
  min-width: 12px;
}
.ip-wl-row-price { font-size: 13px; color: var(--green); white-space: nowrap; }
.ip-wl-row-price.ip-free { color: var(--green-dim); }
.ip-wl-row-sub {
  font-size: 11px;
  line-height: 1.7;
  color: var(--green-dim);
  margin: 7px 0 0 25px;
}
.ip-wl-row-sub strong.ip-hl-green { color: var(--green); font-weight: 700; }
.ip-wl-row-sub strong.ip-hl-red { color: var(--red); font-weight: 700; }

.ip-wl-seats-label { font-size: 12px; color: var(--green-ghost); margin-top: 14px; }
.ip-wl-phone-field { margin-top: 14px; }
.ip-wl-footer {
  font-size: 11px;
  line-height: 1.7;
  color: var(--green-ghost);
  margin-top: 14px;
  min-height: 2.5em;
}

/* Split card fields for the priority-deposit charge — number full width,
   expiry/cvc/postal share a row. Stripe Elements mount into the empty
   divs; only the surrounding chrome is styled here. */
.ip-card-row { margin-top: 4px; }
.ip-card-field {
  background: var(--input-bg, #0a0a0a);
  border: 1px solid var(--green-dark);
  border-radius: 3px;
  padding: 9px 10px;
}
.ip-card-field + .ip-card-field { margin-top: 8px; }
.ip-card-split {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

/* ── done / confirmation ──────────────────────────────────────── */
.ip-done-head {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--green);
  text-shadow: var(--glow-text, 0 0 8px rgba(0,255,65,.35));
}
.ip-detail-box {
  margin-top: 12px;
  border: 1px solid var(--green-dark);
  border-radius: 3px;
  background: rgba(0,255,65,.03);
  padding: 12px 13px;
}
.ip-detail-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  padding: 3px 0;
}
.ip-detail-row .ip-detail-label {
  color: var(--green-ghost);
  letter-spacing: .1em;
  white-space: nowrap;
}
.ip-detail-row .ip-detail-leader {
  flex: 1;
  border-bottom: 1px dotted var(--green-dark);
  min-width: 8px;
}
.ip-detail-row .ip-detail-value {
  color: var(--green);
  white-space: nowrap;
  text-align: right;
}
.ip-detail-row .ip-detail-value.ip-gold { color: #FFD700; }
.ip-done-footer {
  font-size: 11px;
  color: var(--green-dim);
  margin-top: 10px;
}

/* ── "bring a friend" share block (done state) ───────────────── */
.ip-share-label {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--green-dim);
  text-transform: uppercase;
  margin: 16px 0 8px;
}
.ip-share-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
}
.ip-share-url {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--green-dark);
  background: var(--input-bg, #0a0a0a);
  border-radius: 3px;
  padding: 9px 10px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--green);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: all;
}
.ip-share-btn {
  width: auto;
  font-size: 12px;
  padding: 9px 12px;
  letter-spacing: .12em;
  white-space: nowrap;
}