/* ==========================================================================
   Amazon Black Friday Wonder Space – form di prenotazione
   Lo sfondo è composto da un'immagine "header" (logo, titolo, foto, testi,
   già impaginati dal designer) e da un tile della scacchiera che prosegue
   all'infinito sotto la card. Le posizioni della card sono espresse in % della
   larghezza pagina, come nei mockup (desktop 4000px, mobile 2588px).
   ========================================================================== */

:root {
  --ink: #141a24;
  --ink-soft: #3a3f47;
  --line: #c6c6c6;
  --btn: #1b2230;
  --btn-hover: #0e131a;
  --error: #c0262d;
  --font: "Amazon Ember", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

body.themed {
  display: flow-root; /* evita il collasso del margin-top della card con il body */
  background-color: var(--base);
  background-image: var(--tile);
  background-repeat: repeat;
  background-position: 0 0;
  background-size: var(--tile-w) auto;
}

body.plain { background: #11161e; color: #fff; }

.hero {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  aspect-ratio: var(--hero-ar);
  background: var(--hero) no-repeat 0 0 / 100% 100%;
  pointer-events: none;
  z-index: 0;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Card ---------- */
.card {
  position: relative;
  z-index: 1;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  margin: 37.2% 0 10vw 26.6%;
  width: 47.05%;
  padding: 8.9% 10.9% 4.5%;   /* % della larghezza della card */
  border-radius: 2px;
}

.card--thanks {
  text-align: center;
  padding: 7.5% 9% 6.5%;
}

/* ---------- Form ---------- */
form { margin: 0; }

.field { margin: 0 0 clamp(14px, 1.45vw, 26px); }

.field label {
  display: block;
  font-size: clamp(12px, .85vw, 16px);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 clamp(5px, .45vw, 9px) 1px;
}

.field input,
.field select {
  display: block;
  width: 100%;
  height: clamp(40px, 2.75vw, 54px);
  padding: 0 clamp(10px, .75vw, 14px);
  font: inherit;
  font-size: clamp(14px, .95vw, 17px);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}

.field input:focus,
.field select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20, 26, 36, .12);
}

.field select {
  padding-right: clamp(38px, 2.8vw, 52px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='11' viewBox='0 0 20 11'%3E%3Cpath d='M1 1l9 9 9-9' fill='none' stroke='%23141a24' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right clamp(12px, .9vw, 18px) center;
  background-size: clamp(16px, 1.1vw, 20px) auto;
  cursor: pointer;
}

.field select:disabled { color: #8a8f98; cursor: not-allowed; background-color: #fafafa; }

.field input[type="date"] { min-width: 0; }
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }

.field--w55 { width: 55%; }
.field--w18 { width: 18%; min-width: 6.5em; }

.field--check label { display: flex; gap: .6em; align-items: flex-start; font-weight: 400; line-height: 1.35; }
.field--check input { width: 1.1em; height: 1.1em; margin: .15em 0 0; flex: none; appearance: auto; -webkit-appearance: auto; }
.field--check a { color: inherit; }

.field.has-error input,
.field.has-error select { border-color: var(--error); }

.field-error,
.form-error {
  margin: 6px 0 0;
  font-size: clamp(12px, .8vw, 14px);
  color: var(--error);
}

.form-error { margin: 0 0 14px; font-weight: 500; }

.hint {
  margin: -6px 0 clamp(14px, 1.45vw, 26px);
  font-size: clamp(12px, .8vw, 14px);
  color: var(--ink-soft);
}
.hint--error { color: var(--error); }

.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 clamp(14px, 1.45vw, 26px);
}

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(38px, 2.4vw, 48px);
  padding: 0 clamp(18px, 1.5vw, 30px);
  background: var(--btn);
  color: #fff;
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: clamp(11px, .75vw, 14px);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, opacity .15s;
}
.btn:hover { background: var(--btn-hover); }
.btn:focus-visible { outline: 3px solid rgba(20, 26, 36, .35); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn.is-loading { opacity: .7; cursor: progress; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { background: #f2f2f2; }

/* ---------- Pagina "grazie" / biglietto ---------- */
.card--thanks h1 {
  margin: 0 0 clamp(16px, 2vw, 40px);
  font-size: clamp(18px, 1.3vw, 26px);
  font-weight: 700;
}
.card--thanks p {
  margin: 0 0 clamp(16px, 1.8vw, 36px);
  font-size: clamp(14px, .95vw, 18px);
  line-height: 1.65;
}
.card--thanks .btn { min-height: clamp(42px, 2.75vw, 56px); padding: 0 clamp(22px, 2vw, 40px); font-size: clamp(12px, .85vw, 16px); }
.card--thanks .hint { margin: 14px 0 0; }

.event-line { color: var(--ink-soft); }
.tickets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 1.5vw, 28px);
  margin: 0 0 clamp(16px, 1.8vw, 36px);
}
.ticket {
  flex: 1 1 220px;
  max-width: 300px;
  padding: clamp(12px, 1vw, 20px);
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  background: #fff;
}
.ticket img { display: block; width: 100%; height: auto; max-width: 240px; margin: 0 auto; }
.ticket h2 { margin: 10px 0 2px; font-size: clamp(15px, 1vw, 19px); }
.ticket .code { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: clamp(13px, .85vw, 16px); letter-spacing: .04em; }
.ticket .role { margin: 4px 0 0; font-size: clamp(12px, .8vw, 14px); color: var(--ink-soft); }

/* ---------- Pagine neutre (index, staff, admin, outbox) ---------- */
.plain-main { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 48px 20px 80px; }
.plain-main.narrow { max-width: 520px; }
.plain-main h1 { margin: 0 0 16px; font-size: 28px; }
.plain-main .muted { color: #9aa3ad; font-size: 14px; }
.plain-main code { font-size: 13px; }
.plain-main a { color: #ffd37a; }
.plain-main .btn { color: #fff; }
.plain-main .kicker { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: #9aa3ad; }
.plain-main .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 16px 0; }
.plain-main input { font: inherit; padding: 10px 12px; border-radius: 4px; border: 1px solid #3a4452; background: #1b222d; color: #fff; }
.plain-main .form-error { color: #ff8a8a; }

.event-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.event-list a { display: flex; flex-direction: column; gap: 4px; padding: 22px; border-radius: 12px; background: var(--theme); color: #fff; text-decoration: none; min-height: 130px; }
.event-list a .kicker { color: rgba(255,255,255,.85); }
.event-list a strong { font-size: 20px; }
.event-list a:hover { filter: brightness(1.08); }

.staff-form { display: grid; gap: 10px; max-width: 320px; }
.staff-form label { font-size: 14px; }

.checkin .status { display: inline-block; padding: 10px 16px; border-radius: 6px; font-weight: 700; letter-spacing: .04em; margin: 8px 0 16px; }
.status--ok { background: #1f7a3f; }
.status--used { background: #b36b00; }
.status--invalid { background: #a32020; }
.checkin h1 { font-size: 34px; margin-bottom: 6px; }
.checkin .code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; margin: 0 0 8px; }
.checkin .btn--ghost { color: #fff; border-color: #3a4452; }
.checkin .btn--ghost:hover { background: #1b222d; }

.stats { width: 100%; border-collapse: collapse; margin: 12px 0 24px; font-size: 15px; }
.stats th, .stats td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #2a323d; }
.stats th { font-weight: 600; color: #9aa3ad; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }

.mail { border: 1px solid #2a323d; border-radius: 8px; padding: 14px 16px; margin: 12px 0; background: #161c25; }
.mail header { font-size: 14px; margin-bottom: 8px; }
.mail pre { white-space: pre-wrap; word-break: break-word; font-size: 13px; margin: 0; color: #d8dee6; }

/* ---------- Mobile (mockup 2588px) ---------- */
@media (max-width: 768px) {
  .card {
    margin: 175.8% 0 14vw 7.4%;
    width: 85.2%;
    padding: 6% 3.3% 5%;
  }
  .card--thanks { padding: 11% 6% 9%; }
  .card--thanks h1 { font-size: 20px; }
  .card--thanks p { font-size: 15px; }
  .card--thanks .btn { min-height: 46px; font-size: 13px; }

  .field { margin-bottom: 16px; }
  .field label { font-size: 13px; margin-bottom: 6px; }
  .field input, .field select { height: 44px; font-size: 16px; padding: 0 12px; }
  .field select { padding-right: 40px; background-position: right 12px center; background-size: 16px auto; }
  .field--w55 { width: 60%; }
  .field--w18 { width: 32%; }
  .actions { margin-bottom: 16px; }
  .btn { min-height: 40px; font-size: 12px; padding: 0 18px; }
  .hint, .field-error, .form-error { font-size: 13px; }
  .ticket { flex-basis: 100%; max-width: none; }
}

@media (max-width: 400px) {
  .card { padding-left: 4%; padding-right: 4%; }
  .field--w55 { width: 100%; }
}

/* Schermi molto larghi: il layout continua a scalare con lo sfondo, ma si limita la dimensione dei testi (clamp). */

@media print {
  body.themed { background: #fff !important; }
  .hero, .no-print { display: none !important; }
  .card { margin: 0; width: auto; box-shadow: none; padding: 0; }
}