/* ============================================================
 * waitlist-sheet.css
 *
 * Shared styles for the JOIN WAITLIST decision flow:
 *   Sheet 1 — cross-sell ("almost on the waitlist")
 *   Sheet 2 — $4.04 deposit ask ("one last choice")
 *
 * Loaded alongside /waitlist-sheet.js on every surface that
 * surfaces a JOIN WAITLIST button — currently index.html and
 * account.html. CSS variables (--salmon, --border, --card,
 * etc.) resolve against the host page's palette; account.html
 * aliases these to its --green/--green-dark/--card-bg vars in
 * :root so the same rules light up there too.
 *
 * Depends on the @keyframes btn-glitch-flicker keyframe being
 * defined by the host page (both index.html and account.html
 * already have it). The .glitch-flash class re-triggers it on
 * every tap so the buttons read as live CRT chrome.
 * ============================================================ */

/* Bottom decision sheet. The backdrop and panel are split into two
   fixed-positioned siblings so the panel's `bottom:0` anchors
   directly to the viewport bottom — flex alignment inside the
   backdrop turned out unreliable on iOS Safari (the panel ended
   above the URL-bar area, letting page content show below it).
   padding-bottom uses env(safe-area-inset-bottom) so the panel
   still extends through the iOS home-indicator gesture area. */
.wl-sheet-dim {
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.88);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease-out;
}
.wl-sheet-dim.shown { opacity:1; pointer-events:auto; }
.wl-sheet-panel {
  position:fixed; left:0; right:0; bottom:0; z-index:101;
  width:100%; max-width:640px;
  margin:0 auto;
  background:var(--bg);
  border:1px solid var(--salmon-dim); border-bottom:0;
  border-radius:10px 10px 0 0;
  box-shadow:0 -8px 30px rgba(0,0,0,.55);
  transform:translateY(110%);
  transition:transform .26s cubic-bezier(.2,.7,.2,1);
  padding:.4rem 1.2rem max(1.2rem, env(safe-area-inset-bottom)) 1.2rem;
  font-family:inherit;
  pointer-events:none;
}
.wl-sheet-panel.shown { transform:translateY(0); pointer-events:auto; }
.wl-sheet-handle {
  width:2.6rem; height:3px; background:var(--salmon-dim);
  border-radius:2px; margin:.5rem auto 1.1rem; opacity:.55;
}
.wl-sheet-header {
  font-size:clamp(.95rem,2.7vw,1.05rem); color:var(--text);
  margin-bottom:.25rem; letter-spacing:.01em;
}
.wl-sheet-header .arrow { color:var(--salmon); margin-right:.35rem; }
.wl-sheet-meta {
  font-size:.78rem; color:var(--text-dim); letter-spacing:.03em;
  margin-bottom:1rem; line-height:1.5;
}
.wl-sheet-sep {
  border:none; border-top:1px solid var(--border);
  margin:0 0 1rem;
}
.wl-sheet-headline {
  font-size:clamp(.95rem,2.7vw,1.05rem); color:var(--text);
  font-weight:500; margin-bottom:.35rem; line-height:1.4;
}
.wl-sheet-sub {
  font-size:.78rem; color:var(--text-dim); margin-bottom:1.2rem;
  letter-spacing:.02em; line-height:1.55;
}
.wl-sheet-sub strong { color:var(--salmon); font-weight:600; }
.wl-sheet-cta {
  display:flex; align-items:center; gap:.8rem;
  width:100%; padding:.85rem 1rem; margin-bottom:.6rem;
  font-family:inherit; text-align:left; cursor:pointer;
  border-radius:6px;
  transition:opacity .15s, border-color .15s, color .15s;
}
.wl-sheet-cta-primary {
  background:var(--salmon); color:var(--bg);
  border:1px solid var(--salmon);
}
.wl-sheet-cta-primary:hover { opacity:.88; }
.wl-sheet-cta-secondary {
  background:transparent; color:var(--text);
  border:1px solid var(--border);
}
.wl-sheet-cta-secondary:hover { border-color:var(--salmon); color:var(--salmon); }
.wl-sheet-cta .body { flex:1; min-width:0; }
.wl-sheet-cta .main {
  display:block; font-size:clamp(.92rem,2.7vw,1rem);
  letter-spacing:.04em; font-weight:600;
}
.wl-sheet-cta-secondary .main { font-weight:500; }
.wl-sheet-cta .sub {
  display:block; font-size:.72rem; opacity:.72; margin-top:.18rem;
  letter-spacing:.04em; font-weight:400;
}
.wl-sheet-cta .arrow { font-size:1.15rem; flex:0 0 auto; }
.wl-sheet-cta-secondary .arrow { color:var(--text-dim); }
.wl-sheet-footer {
  text-align:center; font-size:.7rem; color:var(--text-dim);
  margin-top:1rem; letter-spacing:.04em;
}

/* ── Deposit decision sheet ($4.04 hold vs free) ──────────────────
   Shown after Sheet 1 (or directly on JOIN WAITLIST when there's no
   sibling cross-sell). Two cards: PAID (hero, full neon border) and
   FREE (quieter, dim border). Tapping PAID routes to a hosted
   Stripe Checkout for $4.04; tapping FREE routes to tickets.html
   with no_deposit=1 so the form skips the deposit re-ask. */
.wl-deposit-card {
  width:100%; border-radius:5px; padding:1rem 1.1rem;
  margin-bottom:.7rem; background:transparent;
  font-family:inherit; text-align:left;
  transition:opacity .15s, border-color .15s;
  cursor:pointer; display:block;
  border:1px solid var(--border);
}
.wl-deposit-card-paid {
  border:1px solid var(--salmon);
}
.wl-deposit-card-free:hover { border-color:var(--salmon); }
.wl-deposit-row {
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem; margin-bottom:.45rem;
}
.wl-deposit-card-paid .wl-deposit-row .lhs {
  color:var(--salmon); font-size:1.05rem; letter-spacing:.05em; font-weight:600;
}
.wl-deposit-card-paid .wl-deposit-row .rhs {
  color:var(--salmon); font-size:1.15rem; letter-spacing:.04em; font-weight:600;
}
.wl-deposit-card-free .wl-deposit-row .lhs {
  color:var(--text); font-size:.92rem; letter-spacing:.05em;
}
.wl-deposit-card-free .wl-deposit-row .rhs {
  color:var(--text-dim); font-size:.86rem; letter-spacing:.04em;
}
.wl-deposit-desc {
  color:var(--text); font-size:.8rem; line-height:1.55;
  letter-spacing:.02em; margin-bottom:.7rem;
}
.wl-deposit-card-free .wl-deposit-desc { color:var(--text-dim); }
.wl-deposit-rule {
  border:none; border-top:1px dashed var(--border);
  margin:.7rem 0;
}
.wl-deposit-benefits {
  list-style:none; margin:0 0 .9rem; padding:0;
  font-size:.74rem; color:var(--text-dim); line-height:1.7;
  letter-spacing:.03em;
}
.wl-deposit-benefits li {
  display:flex; gap:.5rem; align-items:flex-start;
}
.wl-deposit-benefits .check {
  color:var(--salmon); flex:0 0 auto;
}
.wl-deposit-pay-btn {
  width:100%; padding:.7rem 1rem; border-radius:4px;
  background:var(--salmon); color:var(--bg);
  border:1px solid var(--salmon);
  font-family:inherit; font-size:.92rem; letter-spacing:.05em;
  font-weight:600; cursor:pointer; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  transition:opacity .15s;
}
.wl-deposit-pay-btn:hover { opacity:.88; }
.wl-deposit-pay-btn .arrow { font-size:1.1rem; }
.wl-deposit-pay-btn:disabled { opacity:.55; cursor:wait; }

/* Expanded-state form inside the PAID card. Fields use the same
   prompt-prefix + monospace input pattern as the rest of the
   site — see .input-row in the host page. The Stripe Element iframe
   gets a matching outer frame so it doesn't look bolted on. */
.wl-deposit-form {
  margin-top:.9rem; padding-top:.9rem;
  border-top:1px dashed var(--border);
}
.wl-deposit-field-label {
  display:block; font-size:.66rem; color:var(--text-dim);
  letter-spacing:.1em; margin:.6rem 0 .25rem;
}
.wl-deposit-field-row {
  display:flex; align-items:center;
  border:1px solid var(--border); background:var(--card);
  padding:.1rem .55rem;
  transition:border-color .15s, box-shadow .15s;
}
.wl-deposit-field-row:focus-within {
  border-color:var(--salmon);
  box-shadow:0 0 8px var(--salmon-glow);
}
.wl-deposit-field-row .input-pfx {
  padding:0 .35rem 0 0; color:var(--text-dim); font-size:.85rem; user-select:none;
}
.wl-deposit-field-row input {
  flex:1; min-width:0; width:100%;
  background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:.86rem;
  padding:.5rem 0; caret-color:var(--salmon);
}
.wl-deposit-field-row input::placeholder { color:var(--text-dim); opacity:.6; }
/* Browser autofill (keychain / contacts) tints the name/email/phone
   inputs with a yellow-cream background that clashes with the
   terminal palette. Paint var(--card) (the field-row's own bg)
   over it via the canonical 1000px inset-shadow trick, and force
   the text + caret colors to brand. Same pattern used elsewhere
   in the codebase (tickets.html, account.html, etc.). */
.wl-deposit-field-row input:-webkit-autofill,
.wl-deposit-field-row input:-webkit-autofill:hover,
.wl-deposit-field-row input:-webkit-autofill:focus,
.wl-deposit-field-row input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset !important;
  box-shadow: 0 0 0 1000px var(--card) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--salmon) !important;
  transition: background-color 9999s ease-out 0s;
}
.wl-deposit-card-element {
  border:1px solid var(--border); background:var(--card);
  padding:.65rem .75rem; transition:border-color .15s, box-shadow .15s;
}
.wl-deposit-card-element.StripeElement--focus {
  border-color:var(--salmon); box-shadow:0 0 8px var(--salmon-glow);
}
.wl-deposit-card-element.StripeElement--invalid {
  border-color:var(--text);
}
/* Expiry + CVC sit side by side. ZIP gets its own row above (see
   the markup) so users aren't squeezed for tap area. */
.wl-deposit-card-split {
  display:flex; gap:.6rem;
}
.wl-deposit-card-cell { flex:1 1 0; min-width:0; }
.wl-deposit-flash {
  min-height:1em; font-size:.74rem; color:var(--text);
  margin:.5rem 0; letter-spacing:.02em;
}
.wl-deposit-flash.err { color:var(--salmon); }
.wl-deposit-form .wl-deposit-pay-btn { margin-top:.6rem; }

/* Click-flash: a brief CRT glitch on any sheet button when tapped.
   Re-uses the existing @keyframes btn-glitch-flicker defined by the
   host page (band clip-path + opacity drops). JS toggles the class
   on tap and removes it after the animation completes so the next
   tap can re-fire. */
.wl-sheet-cta.glitch-flash,
.wl-deposit-pay-btn.glitch-flash,
.wl-deposit-card-free.glitch-flash {
  animation: btn-glitch-flicker .4s linear;
}