/* =====================================================================
   WNW v51.18 — BACKSTAGE, ticket buyer realm (/account)
   ---------------------------------------------------------------------
   Loads AFTER customer.css and is the last word on this realm's
   appearance. customer.css is left untouched.

   Realm isolation (CLAUDE.md): admin, sales and organizer carry their own
   copies of this palette. Do not factor a shared theme out of the four.

   This realm is the softest of the four — a ticket holder is not an
   operator. Same instrument language, lower contrast, more air, and the
   ticket accent reserved almost entirely for the ticket itself.
   ===================================================================== */

/* ---------- 1. palette ---------- */

:root {
  --bk-void:      #080808;
  --bk-panel:     rgba(255,255,255,.07);
  --bk-panel-2:   rgba(255,255,255,.10);
  --bk-panel-3:   rgba(255,255,255,.14);

  --bk-rule:      rgba(255,255,255,.16);
  --bk-rule-2:    rgba(255,255,255,.22);
  --bk-rule-3:    rgba(255,255,255,.32);

  --bk-ink:       #f4efe6;
  --bk-ink-2:     #d8d2c6;
  --bk-ink-3:     #a8a296;

  --bk-signal:    #d4af37;
  --bk-signal-2:  #f0d060;
  --bk-signal-bg: rgba(212,175,55,.14);
  --bk-signal-ln: rgba(212,175,55,.42);

  --bk-go:        #3ed68b;
  --bk-stop:      #ff5347;
  --bk-stop-bg:   rgba(255,83,71,.11);

  --bk-sans: 'Cairo', system-ui, sans-serif;
  --bk-display: 'Cairo', system-ui, sans-serif;
  --bk-mono: 'Cairo', system-ui, sans-serif;
  --bk-ease: cubic-bezier(.22,1,.36,1);
  --bk-grid:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 32px 100%;

  /* Retune customer.css's own tokens in place. */
  --bg: #080808;
  --panel: rgba(255,255,255,.07);
  --panel-2: rgba(255,255,255,.10);
  --text: #f4efe6;
  --muted: #d8d2c6;
  --line: rgba(255,255,255,.16);
  --ok: #3ed68b;
  --warn: #d4af37;
  --bad: #ff5347;
  --radius: 18px;
}

/* ---------- 2. deck ---------- */

body {
  background:
    radial-gradient(80% 70% at 82% 18%, rgba(240,208,96,.12), transparent 58%),
    radial-gradient(90% 80% at 12% 82%, rgba(212,175,55,.08), transparent 62%),
    var(--bk-grid),
    var(--bk-void);
  color: var(--bk-ink);
  font-family: var(--bk-sans);
}
body, input, button { font-variant-numeric: tabular-nums; }
::selection { background: var(--bk-signal); color: #0a0a0a; }

/* ---------- 3. chrome ---------- */

.customer-topbar {
  background: rgba(8,8,8,.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--bk-rule);
}
.customer-brand { font-family: var(--bk-display); font-weight: 600; }
.customer-brand span { font-size: 12.5px; letter-spacing: .02em; }
.customer-brand img { filter: brightness(0) invert(1); opacity: .94; }

.back-site {
  font-family: var(--bk-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bk-ink-3);
}
.back-site:hover { color: var(--bk-signal); }

.customer-footer { color: var(--bk-ink-3); font-family: var(--bk-mono); font-size: 10px; letter-spacing: .06em; }

/* ---------- 4. type ---------- */

.eyebrow {
  font-family: var(--bk-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bk-ink-3);
  direction: ltr;
  text-align: start;
}

.customer-intro h1,
.pane-title h2,
.card-heading h2 {
  font-family: var(--bk-display);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--bk-ink);
}
.customer-intro p,
.pane-title p,
.login-note { color: var(--bk-ink-3); line-height: 1.75; }

.account-email { font-family: var(--bk-mono); color: var(--bk-ink-2); font-size: 11px; }
.account-status {
  font-family: var(--bk-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bk-go);
}

/* ---------- 5. surfaces ---------- */

.login-card,
.account-pane,
.transfer-requests,
.suggested-events,
.security-form {
  border: 1px solid var(--bk-rule);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,20,25,.85), rgba(12,12,15,.92));
}

/* One corner tick, same mark as the staff panels. */
.login-card {
  position: relative;
  animation: bk-arrive .55s var(--bk-ease) backwards;
}
.login-card::before {
  content: '';
  position: absolute;
  inset-inline-start: -1px;
  top: -1px;
  width: 15px;
  height: 15px;
  border-top: 1px solid var(--bk-signal-ln);
  border-inline-start: 1px solid var(--bk-signal-ln);
  border-start-start-radius: 18px;
  pointer-events: none;
}
@keyframes bk-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.restriction-banner {
  border: 1px solid var(--bk-signal-ln);
  background: var(--bk-signal-bg);
  color: var(--bk-signal-2);
  border-radius: 12px;
}

.empty-state {
  color: var(--bk-ink-3);
  font-family: var(--bk-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
}

/* ---------- 6. tabs ---------- */

.account-tabs { border-bottom: 1px solid var(--bk-rule); gap: 4px; }
.account-tab {
  position: relative;
  background: transparent;
  border: 0;
  color: var(--bk-ink-3);
  font-family: var(--bk-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .18s var(--bk-ease);
}
.account-tab:hover { color: var(--bk-ink-2); }
.account-tab.active { color: var(--bk-signal-2); }
.account-tab.active::after {
  content: '';
  position: absolute;
  inset-inline: 12%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--bk-signal);
}

/* ---------- 7. controls ---------- */

.login-card label,
.security-form label,
.transfer-fields label {
  display: grid;
  gap: 7px;
  font-family: var(--bk-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bk-ink-3);
}

input, select, textarea {
  border: 1px solid var(--bk-rule-2);
  border-radius: 10px;
  background: rgba(255,255,255,.028);
  color: var(--bk-ink);
  font-family: var(--bk-sans);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  transition: border-color .2s var(--bk-ease), box-shadow .2s var(--bk-ease), background .2s var(--bk-ease);
}
input::placeholder { color: var(--bk-ink-3); }
input:focus, select:focus, textarea:focus {
  border-color: var(--bk-signal);
  background: rgba(212,175,55,.05);
  box-shadow: 0 0 0 3px var(--bk-signal-bg);
  outline: none;
}
input:-webkit-autofill {
  -webkit-text-fill-color: var(--bk-ink);
  -webkit-box-shadow: 0 0 0 40px #16161b inset;
}

.primary-button {
  border: 1px solid var(--bk-signal);
  border-radius: 10px;
  background: var(--bk-signal);
  color: #0a0a0a;
  font-family: var(--bk-sans);
  font-weight: 700;
  transition: .18s var(--bk-ease);
}
.primary-button:hover:not(:disabled) {
  background: var(--bk-signal-2);
  border-color: var(--bk-signal-2);
  transform: translateY(-1px);
}
.primary-button:disabled {
  background: var(--bk-panel-3);
  border-color: var(--bk-rule);
  color: var(--bk-ink-3);
}

.ghost-button {
  border: 1px solid var(--bk-rule-2);
  border-radius: 10px;
  background: transparent;
  color: var(--bk-ink-2);
  font-family: var(--bk-sans);
  transition: .18s var(--bk-ease);
}
.ghost-button:hover {
  border-color: var(--bk-rule-3);
  background: rgba(255,255,255,.04);
  color: var(--bk-ink);
}

.text-button {
  background: none;
  border: 0;
  color: var(--bk-ink-3);
  font-family: var(--bk-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .18s var(--bk-ease);
}
.text-button:hover { color: var(--bk-signal); }

/* ---------- 8. messages ---------- */

.form-error {
  padding: 10px 12px;
  border: 1px solid rgba(255,83,71,.34);
  border-radius: 9px;
  background: var(--bk-stop-bg);
  color: #ff8b81;
  font-family: var(--bk-mono);
  font-size: 10.5px;
  line-height: 1.6;
  animation: bk-nudge .3s var(--bk-ease);
}
.form-message {
  padding: 10px 12px;
  border: 1px solid rgba(62,214,139,.3);
  border-radius: 9px;
  background: rgba(62,214,139,.09);
  color: var(--bk-go);
  font-family: var(--bk-mono);
  font-size: 10.5px;
  line-height: 1.6;
}
@keyframes bk-nudge {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); }
  75%     { transform: translateX(4px); }
}

/* ---------- 9. tickets ---------- */
/* The buyer came here for one thing. This is where the amber goes. */

.ticket-list > * {
  border: 1px solid var(--bk-rule);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(22,22,27,.9), rgba(13,13,17,.94));
  transition: border-color .2s var(--bk-ease), transform .2s var(--bk-ease);
}
.ticket-list > *:hover {
  border-color: var(--bk-signal-ln);
  transform: translateY(-2px);
}

.transfer-selected-count {
  font-family: var(--bk-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--bk-signal);
}

@media (prefers-reduced-motion: reduce) {
  .login-card, .form-error { animation: none !important; }
  * { transition-duration: .01ms !important; }
}