/* =====================================================================
   Styling derived from the club's event flyer (ad.jpeg):
   navy background, white rounded panels with navy frame, grass green,
   gold accents, condensed uppercase headlines. No animations.
   ===================================================================== */
:root {
  --navy: #012d6a;
  --navy-dark: #010d21;
  --navy-mid: #0b2a5a;
  --green: #488305;
  --green-dark: #2b6405;
  --green-light: #e3f1d8;
  --gold: #e5bb29;
  --gold-dark: #b8891a;
  --gold-light: #fbecb8;
  --red: #b50b00;
  --card: #f7faf1;
  --card-border: #012d6a;
  --text: #14213a;
  --muted: #44506a;
  --line: #d4d9e3;
  --grey: #e2e4e8;
  --grey-border: #9aa1ad;
  --selected: #012d6a;
  --selected-bg: #dce5f5;
  --error: #b50b00;
  --font-head: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--navy-dark); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  background: linear-gradient(180deg, #012d6a 0%, #042a60 50%, #010d21 100%) no-repeat;
  background-color: var(--navy-dark);
  min-height: 100vh;
}

h1, h2, h3, .display { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .02em; }
h2 { font-size: 1.5rem; margin: 0 0 .75rem; color: var(--navy); }
h3 { font-size: 1.9rem; margin: 0 0 .25rem; color: var(--navy); }
p { margin: 0 0 .75rem; }
.hint { color: var(--muted); }

/* ---------- Header (club + event, like the flyer) ---------- */
.site-header {
  color: #fff;
  text-align: center;
  padding: 1rem 1.25rem .75rem;
}
.club { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em; font-size: .95rem; color: #cfe3ff; margin: 0 0 .25rem; }
.site-header h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  margin: 0 0 .5rem;
  color: var(--gold);
  text-shadow: 0 2px 0 #7a5d08;
}
.event-band {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: .04em;
  padding: .3rem 1.1rem;
  border-radius: 12px;
  line-height: 1.3;
  margin: 0 0 .5rem;
}
.lead { color: #e6eefc; max-width: 46rem; margin: 0 auto; font-size: 1.05rem; }

/* ---------- Layout ----------
   Desktop: plan (1) and seat panel (2) side by side and large; selection (3)
   and form (4) below; lookup full width. Phones: everything stacked 1→4. */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(22rem, 2fr);
  grid-template-areas:
    "plan seats"
    "selection form"
    "lookup lookup"
    "declarations declarations";
  gap: 1.25rem;
  padding: 0 1.25rem 1rem;
  align-items: start;
  max-width: 90rem;
  margin: 0 auto;
}
.area-plan { grid-area: plan; min-width: 0; }
.area-seats { grid-area: seats; }
.area-selection { grid-area: selection; }
/* The stretched wrapper is the sticky card's containing block, so the card
   can float beside a long selection list but never leave its own row. */
.area-form { grid-area: form; align-self: stretch; }
.area-form > .card { position: sticky; top: 1rem; }
.area-lookup { grid-area: lookup; }
.area-declarations { grid-area: declarations; }
.declarations { margin: .25rem 0 0 1.1rem; padding: 0; }
.declarations li { margin: .35rem 0; line-height: 1.5; }
.declarations a { color: var(--navy); font-weight: 600; }
@media (max-width: 1200px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas: "plan" "seats" "selection" "form" "lookup" "declarations";
    padding: 0 .75rem 1rem;
    gap: 1rem;
  }
}

/* White panels with navy frame, as on the flyer */
.card {
  background: var(--card);
  border: 3px solid var(--card-border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin: 0;
}
.card summary { cursor: pointer; font-family: var(--font-head); text-transform: uppercase; font-size: 1.3rem; color: var(--navy); padding: .25rem 0; }

/* Step number badge in headings */
.step {
  display: inline-block;
  min-width: 1.9rem;
  height: 1.9rem;
  line-height: 1.9rem;
  font-size: 1.2rem;
  text-align: center;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  margin-right: .4rem;
  font-family: var(--font-head);
}

/* ---------- Plan ---------- */
.plan-hint { display: none; font-size: 1rem; }
@media (max-width: 700px) { .plan-hint { display: block; } }
.plan-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.plan { display: block; width: 100%; min-width: 640px; height: auto; }

.plan .table-group { cursor: pointer; }
.plan .table-group:focus { outline: none; }
.plan .table-group:focus .table-top,
.plan .table-group:hover .table-top { stroke-width: 3; }
.plan .table-group.is-selected .table-top { stroke: var(--selected); stroke-width: 4; }
.plan .table-group.is-active .table-top { stroke: var(--selected); stroke-width: 4; stroke-dasharray: 6 3; }

.plan .table-top.state-free    { fill: var(--green-light); stroke: var(--green); }
.plan .table-top.state-partial { fill: var(--gold-light);  stroke: var(--gold-dark); }
.plan .table-top.state-full    { fill: var(--grey);        stroke: var(--grey-border); }

.plan .seat.seat-free     { fill: #ffffff; stroke: #8a6a3a; }
.plan .seat.seat-booked   { fill: #8a8f99; stroke: #6a6f78; }
.plan .seat.seat-vip      { fill: var(--gold); stroke: var(--navy-mid); }
.plan .seat.seat-selected { fill: var(--selected); stroke: var(--selected); }

.plan .bench { fill: #8a5a2b; }
.plan .table-label { font-family: var(--font-head); font-size: 28px; font-weight: 700; fill: var(--navy); pointer-events: none; }
.plan .table-sub { font-size: 14px; font-weight: 600; fill: #2f3a52; pointer-events: none; }
.plan .area-label { font-family: var(--font-head); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.plan .small-label { font-size: 13px; fill: var(--muted); }

.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; padding: 0; margin: .75rem 0; font-size: 1rem; }
.swatch { display: inline-block; width: 1.2rem; height: 1.2rem; vertical-align: -.2rem; border: 2px solid; border-radius: 3px; margin-right: .25rem; }
.swatch-free { background: var(--green-light); border-color: var(--green); }
.swatch-partial { background: var(--gold-light); border-color: var(--gold-dark); }
.swatch-full { background: var(--grey); border-color: var(--grey-border); }
.swatch-selected { background: var(--selected-bg); border-color: var(--selected); }
.swatch-vip { background: var(--gold); border-color: var(--navy-mid); }
.summary { font-weight: 700; color: var(--navy); font-size: 1.1rem; margin: 0; }

/* ---------- Table detail ---------- */
.table-status { color: var(--text); font-size: 1.1rem; margin-bottom: .5rem; }
.seat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin: .4rem 0 .9rem;
}
.seat-btn {
  font: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  min-height: 3.6rem;
  padding: .5rem .25rem;
  border: 3px solid var(--navy);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  text-align: center;
}
.seat-btn:hover { background: var(--selected-bg); }
.seat-btn.is-selected { background: var(--selected); border-color: var(--selected); color: #fff; }
.seat-btn:disabled { background: var(--grey); border-color: var(--grey-border); color: #777; cursor: not-allowed; text-decoration: line-through; }
/* VIP seats are taken, but honoured rather than struck through. */
.seat-btn.is-vip:disabled { background: var(--gold); border-color: var(--navy-mid); color: var(--navy); text-decoration: none; }
.seat-btn:focus-visible, .btn:focus-visible, input:focus-visible, .btn-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.bench-caption { font-size: 1rem; font-weight: 600; color: var(--muted); margin: .6rem 0 .1rem; text-transform: uppercase; letter-spacing: .04em; }

.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }

/* ---------- Buttons & forms ---------- */
.btn {
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  min-height: 3rem;
  padding: .6rem 1rem;
  border: 2px solid var(--navy);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}
.btn:hover { background: var(--selected-bg); }
.btn:disabled { opacity: .45; cursor: not-allowed; background: #fff; }
.btn-primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 1.4rem;
  width: 100%;
  margin-top: .75rem;
  min-height: 3.6rem;
  padding: .75rem 1rem;
}
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-primary:disabled { background: var(--green); border-color: var(--green); }
.btn-link { background: none; border: none; color: var(--red); text-decoration: underline; padding: .4rem .5rem; min-height: 2.75rem; cursor: pointer; font: inherit; font-weight: 600; }

label { display: block; font-weight: 600; margin-top: .6rem; margin-bottom: .25rem; color: var(--navy); }
input[type="text"], input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 1.1rem;
  padding: .7rem .75rem;
  min-height: 3rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
input[type="text"]:focus, input[type="email"]:focus { border-color: var(--navy); }
.confirm-check { display: flex; align-items: flex-start; gap: .6rem; margin: .9rem 0 .25rem; font-weight: 400; color: var(--text); line-height: 1.45; cursor: pointer; }
.confirm-check input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; flex: none; accent-color: var(--navy); cursor: pointer; }
.form-error { color: var(--error); font-weight: 600; }

/* The thank-you note at the top of the manage panel after a fresh booking. */
.note-success { margin: .5rem 0 .75rem; padding: .75rem .9rem; border: 3px solid var(--green); background: var(--green-light); border-radius: 8px; font-size: 1.05rem; }
.paid-hint { margin: .5rem 0 0; font-size: .95rem; }

/* ---------- Selection list with menus ---------- */
.menu-intro { font-size: 1.05rem; margin-bottom: .75rem; }
.selection-table { border-top: 2px solid var(--line); padding: .6rem 0 .4rem; }
.selection-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: 1.15rem; margin-bottom: .35rem; }
.menu-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto auto; align-items: center; gap: .5rem .75rem; padding: .25rem 0; }
.menu-row label { margin: 0; font-weight: 600; color: var(--text); }
.child-check { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; cursor: pointer; }
.child-check input { width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--navy); cursor: pointer; }
.menu-select {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  min-height: 3rem;
  padding: .5rem .6rem;
  border: 2px solid var(--navy);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}
.menu-select.is-missing { border-color: var(--gold-dark); background: var(--gold-light); }
.menu-select:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.selection-total { margin-top: .75rem; font-weight: 700; color: var(--navy); font-size: 1.25rem; }
.menu-missing { color: var(--gold-dark); font-weight: 700; margin: .25rem 0 0; }
@media (max-width: 480px) {
  .menu-row { grid-template-columns: 1fr; gap: .15rem; }
}

.booking-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.booking-list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.booking-list li:last-child { border-bottom: none; }
.booking-meta { font-size: .95rem; color: var(--muted); }

/* ---------- Footer (like the flyer's bottom strip) ---------- */
.site-footer {
  color: #cfe3ff;
  text-align: center;
  padding: 1rem 1.25rem 2rem;
  font-size: 1rem;
}
.site-footer a { color: #fff; }
/* Secondary to the event details above it, and short-line so it stays readable
   on a wide screen. */
.disclaimer { font-size: .9rem; max-width: 62ch; margin-inline: auto; }
.tagline { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .12em; color: var(--gold); margin-top: .5rem; }

/* Availability not loaded yet: neutral, so no seat claims to be free. */
.seat-unknown { fill: #c9c3b4; opacity: .45; }
.table-top.state-unknown { fill: #efece4; stroke: #c9c3b4; }

/* ---------- TWINT payment ---------- */
/* The button carries TWINT's own asset at its intended 58px height; the wrapper
   only positions it. The text link underneath is what the guest uses when the
   remote SVG does not load. */
.pay-choice { margin: .75rem 0 0; }
.pay-heading { margin: 0 0 .5rem; font-weight: 700; }
.pay-option { margin-bottom: .9rem; }
.pay-option:last-child { margin-bottom: 0; }
.pay-note { display: block; font-size: .92rem; color: var(--muted); margin-top: .15rem; }
/* Deliberately not a lookalike of the TWINT asset: it is our own button for a
   method, not an imitation of somebody's brand. */
.card-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 1.4rem; font-size: 1.05rem; }

.twint-pay { margin: 0; }
.twint-btn {
  width: auto;
  height: 58px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
  border: none;
  padding: 0;
}
.twint-btn img { width: auto; height: 58px; }
.twint-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.twint-fallback { display: inline-block; margin-top: .25rem; font-size: .95rem; }

.booking-payment { margin-top: .5rem; padding: .6rem .7rem; border-radius: 8px; border-left: 5px solid var(--line); background: #fbfaf7; }
.booking-payment[data-payment="unpaid"] { border-left-color: var(--gold-dark); background: var(--gold-light); }
.booking-payment[data-payment="paid"] { border-left-color: var(--green); background: var(--green-light); }
.booking-payment[data-payment="mismatch"] { border-left-color: var(--gold-dark); background: var(--gold-light); font-weight: 700; }