/* NACH ticket shop — dark, poster-like, mobile first. */
:root {
  --bg: #0a0a0a;
  --surface: #131313;
  --line: #262626;
  --text: #f5f5f5;
  --muted: #8f8f8f;
  --accent: #d7ff3e;
  --accent-ink: #0a0a0a;
  --danger: #ff5c5c;
  --ok: #3ddc84;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 560px; margin: 0 auto; padding: 28px 18px 64px; }

.brand {
  font-weight: 800; letter-spacing: .32em; font-size: 20px;
  text-align: center; padding: 6px 0 26px;
}

h1 { font-size: 28px; line-height: 1.2; margin: 0 0 8px; }
h2 { font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
     color: var(--muted); margin: 34px 0 12px; font-weight: 600; }

.meta { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 22px; }
.cover { width: 100%; border-radius: var(--radius); display: block; margin-bottom: 22px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 12px;
}

.type { display: flex; gap: 14px; align-items: center; }
.type-info { flex: 1; min-width: 0; }
.type-name { font-weight: 700; font-size: 17px; }
.type-desc { color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 4px; }
.type-price { font-weight: 700; font-size: 17px; margin-top: 6px; }
.type-left { color: var(--muted); font-size: 13px; margin-top: 4px; }
.sold-out { color: var(--danger); font-size: 13px; font-weight: 600; margin-top: 6px; }

.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
  background: #1c1c1c; color: var(--text); font-size: 20px; cursor: pointer;
}
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper output { min-width: 26px; text-align: center; font-weight: 700; font-size: 17px; }

label { display: block; font-size: 14px; color: var(--muted); margin: 14px 0 6px; }
input {
  width: 100%; padding: 14px; border-radius: 10px; background: #1c1c1c;
  border: 1px solid var(--line); color: var(--text); font-size: 16px; font-family: var(--font);
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.total { display: flex; justify-content: space-between; align-items: baseline;
         font-size: 20px; font-weight: 700; margin: 24px 0 14px; }

button.primary {
  width: 100%; padding: 17px; border: 0; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 17px; font-weight: 700; font-family: var(--font); cursor: pointer;
}
button.primary:disabled { opacity: .4; cursor: default; }

.fineprint { color: var(--muted); font-size: 12.5px; line-height: 1.7; margin-top: 16px; text-align: center; }
.error { background: #2a1414; border: 1px solid #532; color: #ffb4b4;
         padding: 13px 15px; border-radius: 11px; font-size: 14.5px; margin: 14px 0; }
.spinner { text-align: center; color: var(--muted); padding: 40px 0; }
a { color: var(--accent); }