/* Broadway Pass - lead capture (leads.ticketlab.com)
   Store red palette, taken verbatim from the kiosk (10-base.css) so the whole
   store reads as one brand. */

:root {
  --red-1: #b81c20;
  --red-2: #d02329;
  --red-3: #e63037;
  --red-deep: #7a1014;
  --red-soft: #fceaea;
  --red-line: #f2c5c7;
  --ink: #1c1d1f;
  --muted: #8b8f96;
  --field-border: #e4d9da;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

/* The [hidden] attribute only sets display:none in the UA stylesheet, so ANY
   author rule that sets display (e.g. .body { display:flex }) silently beats
   it. Without this, the success panel renders on page load and "Start another"
   cannot put it away. Keep this rule above everything that sets display. */
[hidden] { display: none !important; }

/* Deep stage red, layered rather than a single flat wash so it has some depth.
   The card is white, so the contrast now runs card-vs-page instead of
   header-vs-page, which is what was collapsing before. */
.stage {
  min-height: 100svh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem) 1rem;
  background:
    radial-gradient(900px 520px at 12% -12%, rgba(230, 48, 55, .95) 0%, rgba(230, 48, 55, 0) 62%),
    radial-gradient(760px 620px at 104% 8%, rgba(208, 35, 41, .85) 0%, rgba(208, 35, 41, 0) 58%),
    linear-gradient(160deg, #a5171b 0%, #7a1014 58%, #58090c 100%);
}

/* NOTE: no `overflow: hidden` here. It used to clip the calendar and the show
   list wherever they extended past the card, which made most dates
   unreachable. The header sits on the card's own white, so nothing needs
   clipping for the rounded corners to look right. */
.card {
  width: 100%;
  max-width: 32rem;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(40, 4, 6, .38);
}

/* ── compact header: one row, logo left, text beside it ── */
.head {
  padding: 1rem 1.25rem 0;
  background: #fff;
}

.head-row {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.logo-plate {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--red-line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-plate img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.head-text { min-width: 0; }

.title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 4.6vw, 1.7rem);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.12;
  color: var(--red-deep);
}

.subtitle {
  margin: .2rem 0 0;
  font-size: .87rem;
  line-height: 1.4;
  color: #6b6f76;
}

/* marquee nod, doubling as the divider under the header */
.bulbs {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: .9rem;
  padding: 0 1px;
}

.bulbs span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-2);
  opacity: .38;
  flex: 0 0 auto;
}

/* ── body ── */
.body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}

.field--agent {
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--red-line);
}

.label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--red-deep);
}

/* 16px minimum: anything smaller makes iOS Safari zoom the page on focus */
.input {
  font-size: 16px;
  font-family: inherit;
  min-height: 54px;
  padding: .7rem .9rem;
  border-radius: 12px;
  border: 2px solid var(--field-border);
  background: #fff;
  color: var(--ink);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.input::placeholder { color: #a9adb3; }

.input:focus {
  outline: none;
  border-color: var(--red-2);
  box-shadow: 0 0 0 3px rgba(208, 35, 41, .18);
}

.input.invalid {
  border-color: var(--red-2);
  background: var(--red-soft);
}

/* ── custom show picker (a native <select> popup cannot be themed) ── */
.cs { position: relative; width: 100%; }

.cs-trigger {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem .9rem;
  font-size: 16px;
  font-family: inherit;
  text-align: left;
  color: var(--muted);
  background: #fff;
  border: 2px solid var(--field-border);
  border-radius: 12px;
  cursor: pointer;
}

.cs-trigger.is-set { color: var(--ink); font-weight: 600; border-color: #d9c2c4; }

.cs-trigger:focus-visible {
  outline: none;
  border-color: var(--red-2);
  box-shadow: 0 0 0 3px rgba(208, 35, 41, .18);
}

.cs-trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cs-caret { width: 20px; height: 20px; flex: 0 0 auto; stroke: var(--red-2); fill: none; }

.cs-pop {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--red-line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(122, 16, 20, .22);
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

/* flipped above the trigger when there is not enough room below */
.cs-pop.is-up, .dp-pop.is-up {
  top: auto;
  bottom: calc(100% + 8px);
}

.cs-search {
  font-size: 16px;
  font-family: inherit;
  min-height: 42px;
  padding: .45rem .7rem;
  border: 2px solid var(--field-border);
  border-radius: 10px;
  color: var(--ink);
  width: 100%;
}

.cs-search:focus {
  outline: none;
  border-color: var(--red-2);
  box-shadow: 0 0 0 3px rgba(208, 35, 41, .15);
}

.cs-list {
  max-height: 15rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.cs-opt {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: .98rem;
  color: var(--ink);
  padding: .7rem .7rem;
  border-radius: 9px;
  cursor: pointer;
  min-height: 44px;
}

.cs-opt:hover, .cs-opt.is-active { background: var(--red-soft); }

.cs-opt.is-selected {
  background: linear-gradient(180deg, var(--red-3) 0%, var(--red-2) 60%, var(--red-1) 100%);
  color: #fff;
  font-weight: 700;
}

.cs-opt--other {
  border-top: 1px solid var(--red-line);
  margin-top: .25rem;
  padding-top: .8rem;
  font-weight: 700;
  color: var(--red-deep);
}

.cs-empty { padding: .8rem .7rem; color: var(--muted); font-size: .92rem; }

.cs-other { margin-top: .5rem; }

.stepper {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.step-btn {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  border: 2px solid var(--red-line);
  background: var(--red-soft);
  color: var(--red-1);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.step-btn:disabled { opacity: .4; cursor: default; }

.step-value {
  flex: 1;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.errors {
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  color: var(--red-deep);
  border-radius: 12px;
  padding: .75rem .9rem;
  font-size: .95rem;
  line-height: 1.4;
}

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

.btn {
  margin-top: .25rem;
  min-height: 62px;
  padding: .6rem 1.1rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--red-3) 0%, var(--red-2) 55%, var(--red-1) 100%);
  color: #fff;
  font-family: inherit;
  font-size: clamp(.98rem, 2.4vw, 1.1rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(208, 35, 41, .32);
  transition: transform .08s ease, opacity .15s ease;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .7; cursor: default; }

.btn--ghost {
  background: #fff;
  color: var(--red-1);
  box-shadow: inset 0 0 0 2px var(--red-2);
  min-height: 54px;
  white-space: normal;
}

.fineprint {
  margin: 0;
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
}

/* ── success ── */
.body--done {
  align-items: center;
  text-align: center;
  gap: .7rem;
  padding-top: 1.9rem;
  padding-bottom: 2.1rem;
}

.tick svg {
  width: 68px;
  height: 68px;
  stroke: var(--red-2);
}

.done-title {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.85rem;
  color: var(--red-deep);
}

.done-copy {
  margin: 0;
  max-width: 24rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #4a4d52;
}

/* ── themed date picker ── */
.dp { position: relative; width: 100%; }

.dp-trigger {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem .9rem;
  font-size: 16px;
  font-family: inherit;
  text-align: left;
  color: var(--muted);
  background: #fff;
  border: 2px solid var(--field-border);
  border-radius: 12px;
  cursor: pointer;
}

.dp-trigger.is-set {
  color: var(--ink);
  font-weight: 600;
  border-color: #d9c2c4;
}

.dp-trigger:focus-visible {
  outline: none;
  border-color: var(--red-2);
  box-shadow: 0 0 0 3px rgba(208, 35, 41, .18);
}

.dp-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  stroke: var(--red-2);
  fill: none;
}

.dp-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--red-line);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(122, 16, 20, .22);
  padding: .75rem;
}

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}

.dp-month {
  font-weight: 700;
  font-size: .98rem;
  color: var(--red-deep);
}

.dp-nav {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--red-line);
  background: var(--red-soft);
  color: var(--red-1);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.dp-nav:disabled { opacity: .35; cursor: default; }

.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dp-dow {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: #a98a8c;
  padding: 4px 0;
}

.dp-empty { height: 42px; }

.dp-day {
  height: 42px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-size: .95rem;
  font-family: inherit;
  cursor: pointer;
}

.dp-day:hover:not(:disabled) { background: var(--red-soft); }
.dp-day:disabled { color: #cfd2d6; cursor: default; }

.dp-day.is-today {
  box-shadow: inset 0 0 0 2px var(--red-line);
  font-weight: 700;
}

.dp-day.is-selected {
  background: linear-gradient(180deg, var(--red-3) 0%, var(--red-2) 60%, var(--red-1) 100%);
  color: #fff;
  font-weight: 700;
}

/* ── tablet and up: two columns, wider card ── */
@media (min-width: 40rem) {
  .card { max-width: 44rem; border-radius: 24px; }
  .head { padding: 1.15rem 2rem 0; }
  .logo-plate { width: 64px; height: 64px; border-radius: 16px; }
  .logo-plate img { width: 46px; height: 46px; }
  .body { padding: 1.5rem 2rem 1.9rem; gap: 1.05rem; }
  .grid { grid-template-columns: 1fr 1fr; gap: 1.05rem; }
  /* long show titles deserve the full row */
  .field--wide { grid-column: 1 / -1; }
  .btn { min-height: 66px; font-size: 1.12rem; }
}