/* Rocket Skip 2026: bonfire-night look for Castle Hawk Driving Range.
   One dark theme on purpose (it's a night-time fireworks event). No inline
   styles anywhere, because the CSP is style-src 'self'. SVG gradient colours
   are set here too, through `stop-color`. */

:root {
  --night: #0c1120;
  --night-2: #121a2c;
  --panel: #161f35;
  --line: #27314d;
  --text: #f4efe6;
  --muted: #a3abc0;
  --ember: #ff7a1a;
  --gold: #ffc94d;
  --ok: #46c38a;
  --bad: #ff6b6b;
  --radius: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--text); font: 15px/1.45 var(--font); }
a { color: var(--gold); }
a:hover { color: #ffe08f; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; word-break: break-all; }
.center { text-align: center; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
.narrow { max-width: 640px; }
main.wrap { padding-block: 16px 28px; }

/* ---- hero: short, so the booking starts above the fold ---- */
.hero {
  background:
    radial-gradient(ellipse at 70% 140%, rgba(255, 122, 26, .30), transparent 60%),
    linear-gradient(180deg, #070a14, var(--night));
  border-bottom: 1px solid var(--line);
  padding-block: 26px 20px;
}
.hero { position: relative; overflow: hidden; }
.hero.has-photo { padding-block: 44px 26px; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 82%; z-index: 0; }
.hero.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(7, 10, 20, .92) 0%, rgba(7, 10, 20, .72) 45%, rgba(7, 10, 20, .35) 100%),
              linear-gradient(0deg, rgba(12, 17, 32, 1) 0%, rgba(12, 17, 32, 0) 40%);
}
.hero-inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--gold); margin-bottom: .3em; font-weight: 600; }
.hero-title { font-size: clamp(2rem, 6vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .1em; }
.hero-title span { color: var(--ember); }
.hero-lede { font-size: 1.05rem; color: #e3dccd; margin: 0; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.chip-fire { border-color: rgba(255, 122, 26, .55); color: #ffd2ad; }
.perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.perks li { position: relative; padding-left: 22px; font-weight: 600; }
.perks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px rgba(255, 122, 26, .8); }
.chip { display: inline-block; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); border-radius: 999px; padding: 3px 11px; font-size: .85rem; }

/* ---- gallery (photos/videos from past years) ---- */
.gallery { border-bottom: 1px solid var(--line); background: #0a0f1c; }
.gallery-strip { display: flex; gap: 10px; overflow-x: auto; padding-block: 12px; scroll-snap-type: x mandatory; }
.gallery img, .gallery video { cursor: pointer; height: 230px; width: auto; border-radius: 10px; flex: none; scroll-snap-align: start; object-fit: cover; background: var(--night-2); }

/* ---- panels & banners ---- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.opt { font-size: .76rem; font-weight: 500; color: var(--muted); margin-left: 6px; }
.hint { color: var(--muted); font-size: .88rem; margin: .4em 0 0; }
.hint:empty { display: none; }
.banner { border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; border: 1px solid; font-size: .92rem; }
.banner p:last-child, .banner ul:last-child { margin-bottom: 0; }
.banner.warn { background: rgba(255, 201, 77, .08); border-color: rgba(255, 201, 77, .4); color: #ffe3a1; }
.banner.error { background: rgba(255, 107, 107, .12); border-color: rgba(255, 107, 107, .5); color: #ffc9c9; }
.banner.ok { background: rgba(70, 195, 138, .12); border-color: rgba(70, 195, 138, .5); color: #c4f1dc; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li + li { margin-top: 3px; }

/* ---- two-column booking layout ---- */
.layout { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.col-side { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr); align-items: start; }
  .col-main { position: sticky; top: 14px; }
}

/* ---- time: segmented controls ---- */
.when { display: flex; flex-wrap: wrap; gap: 12px 22px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; padding: 0; }
.legend-note { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; margin-left: 4px; }
.seg { display: inline-flex; background: var(--night-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 7px 13px; border-radius: 9px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.seg span em { font-style: normal; font-weight: 500; color: var(--muted); margin-left: 3px; }
.seg span:hover { background: rgba(255, 255, 255, .05); }
.seg input:checked + span { background: var(--ember); color: #1a0d02; }
.seg input:checked + span em { color: #3d1c00; }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 1px; }
.seg input:disabled + span { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

/* ---- the map ---- */
.map-wrap { margin-top: 12px; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 100%, #14203a, #0b1020 70%); }
.range-map { display: block; width: 100%; height: auto; }
.treeline { fill: #10261a; stroke: #10261a; stroke-width: 26; stroke-linejoin: round; }
.grass-top { stop-color: #2f5d3c; }
.grass-bottom { stop-color: #1d3f29; }
.band { fill: none; stroke-width: 19; }
.band-0 { stroke: rgba(255, 255, 255, .045); }
.band-1 { stroke: rgba(0, 0, 0, .06); }
.roof { fill: #232a3b; }

.glow-in { stop-color: #ff8a2a; stop-opacity: .5; }
.glow-out { stop-color: #ff8a2a; stop-opacity: 0; }
.skip-shadow { fill: rgba(0, 0, 0, .35); }
.skip-hi { stop-color: #f7be35; }
.skip-lo { stop-color: #d98a10; }
.well-hi { stop-color: #3a2912; }
.well-lo { stop-color: #1c1409; }
.skip-rim { stroke: #ffe08a; stroke-width: 2.5; stroke-linecap: round; opacity: .8; }
.skip-label { fill: rgba(255, 228, 176, .9); font: 700 13px var(--font); letter-spacing: .22em; text-anchor: middle; }
@media (prefers-reduced-motion: no-preference) {
  .skip-glow { animation: glow 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes glow { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.06); } }
}

.bay { cursor: pointer; outline: none; }
.bay-box { fill: #34405c; transition: fill .15s; }
.bay-mat { fill: none; stroke: #5cbf7e; stroke-width: 4; stroke-linecap: round; opacity: .85; }
.bay-label { fill: var(--text); font: 700 24px var(--font); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.bay:hover .bay-box { fill: #43527a; }
.bay:focus-visible .bay-box { fill: #43527a; stroke: var(--gold); stroke-width: 3; }
.bay.picked .bay-box { fill: var(--gold); }
.bay.picked .bay-label { fill: #1a1200; }
.bay.picked .bay-mat { stroke: #1a1200; opacity: .35; }
.bay.taken { cursor: not-allowed; }
.bay.taken .bay-box { fill: url(#hatch); }
.bay.taken .bay-label { fill: #7c8398; }
.bay.taken .bay-mat { opacity: .2; }
.hatch-bg { fill: #242b3d; }
.hatch-fg { fill: #2e3650; }

.map-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 10px; }
.map-foot .hint { margin: 0; }
.legend { display: flex; gap: 14px; list-style: none; padding: 0; margin: 0; font-size: .85rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 6px; }
.key { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.key.free { background: #34405c; }
.key.picked { background: var(--gold); }
.key.taken { background: repeating-linear-gradient(45deg, #242b3d 0 3px, #2e3650 3px 6px); border: 1px solid #3a4258; }

/* ---- option rows (balls) and menu rows (pizza) ---- */
.rows, .menu { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; }
.row-opt, .menu-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--night-2);
}
.row-opt { cursor: pointer; }
.row-opt input { width: 17px; height: 17px; margin: 0; accent-color: var(--ember); flex: none; }
.row-opt:has(input:checked) { border-color: var(--ember); background: #221d33; }
.row-name { flex: 1; min-width: 0; font-weight: 650; }
.row-name b { font-weight: 650; color: var(--gold); margin-left: 4px; }
.row-name small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; }
.row-price { font-weight: 750; color: var(--gold); white-space: nowrap; }
.row-price small { font-weight: 500; color: var(--muted); }
.stepper { display: flex; align-items: center; gap: 2px; flex: none; }
.stepper input {
  width: 34px; text-align: center; font: 700 1rem var(--font); color: var(--text);
  background: transparent; border: 0; padding: 0; -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); font: 700 1.1rem var(--font); cursor: pointer; line-height: 1; padding: 0;
}
.step-btn:hover { border-color: var(--ember); }
.stepper.has input { color: var(--gold); }
.menu-item:has(.stepper.has) { border-color: rgba(255, 201, 77, .5); }

/* ---- form fields ---- */
.dietary { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-weight: 600; font-size: .85rem; }
.dietary .muted { font-weight: 400; }
textarea { font: .95rem var(--font); color: var(--text); background: var(--night-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; width: 100%; resize: vertical; }
textarea:focus { outline: none; border-color: var(--gold); }
.diet { color: var(--gold); font-size: .85rem; white-space: normal; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fields .span-2 { grid-column: 1 / -1; }
.fields label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .85rem; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], select {
  font: 1rem var(--font); color: var(--text); background: var(--night-2);
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--gold); }
.check { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; font-size: .88rem; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ember); flex: none; }

/* ---- buttons ---- */
.btn {
  display: inline-block; font: 700 1rem var(--font); text-decoration: none; text-align: center;
  background: var(--ember); color: #1a0d02; border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer;
}
.btn:hover { background: #ff8e3d; color: #1a0d02; }
.btn:disabled { background: #343c52; color: #8d94a8; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--ember); }
.btn.small { padding: 7px 14px; font-size: .88rem; }
.btn.danger { background: var(--bad); color: #2a0000; }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- summary: a card in the side column on desktop, a bar pinned to the
   bottom of the screen on phones ---- */
.summary-bar { background: var(--panel); border: 1px solid var(--ember); border-radius: var(--radius); padding: 14px 16px; }
.summary-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.summary-text { display: flex; flex-direction: column; min-width: 0; }
#summary-line { color: var(--muted); font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#summary-total { font-size: 1.4rem; color: var(--gold); }
#summary-total:empty { display: none; }
@media (max-width: 899px) {
  body.has-bar { padding-bottom: 84px; }
  .summary-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; border-radius: 0;
    border-width: 1px 0 0; border-color: var(--line);
    background: rgba(12, 17, 32, .96); backdrop-filter: blur(8px);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 600px) {
  .gallery img, .gallery video { height: 210px; }
}
@media (max-width: 420px) {
  .fields { grid-template-columns: 1fr; }
  .seg span { padding: 7px 10px; }
}

/* ---- status / details ---- */
.page-title { font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 800; }
.confirm-hero { padding: 20px 0 8px; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }

.footer { color: var(--muted); font-size: .88rem; padding-block: 8px 30px; }
.footer p { margin: 0 0 4px; }

/* ---- admin ---- */
.admin-top { border-bottom: 1px solid var(--line); background: var(--night-2); }
.admin-top-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 12px; }
.admin-top form { margin: 0; }
.admin-brand { color: var(--text); text-decoration: none; font-weight: 800; }
.admin-brand span { color: var(--ember); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 8px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.stat span { display: block; color: var(--muted); font-size: .85rem; }
.stat strong { font-size: 1.6rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.filters input { flex: 1 1 220px; width: auto; }
.filters select { width: auto; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.list td { white-space: nowrap; }
.grid td, .grid th { text-align: center; }
.grid .cell { min-width: 90px; border-left: 1px solid var(--line); }
.grid .cell.paid { background: rgba(70, 195, 138, .16); }
.grid .cell.held { background: rgba(255, 201, 77, .12); }
.grid .cell.conflict { background: rgba(255, 107, 107, .2); }
.grid .cell a { color: var(--text); text-decoration: none; }
.status { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 999px; border: 1px solid; vertical-align: middle; }
.status.paid { color: var(--ok); }
.status.held { color: var(--gold); }
.status.conflict { color: var(--bad); }
.status.expired, .status.cancelled { color: var(--muted); }
.kitchen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.kitchen-slot { background: var(--night-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.kitchen-slot h3 { font-size: 1rem; color: var(--gold); }
.kitchen-slot ul { list-style: none; padding: 0; margin: 0; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cancel-form { margin-top: 18px; grid-template-columns: 1fr; }
.fields.single { grid-template-columns: 1fr; max-width: 360px; }
.plain { list-style: none; padding: 0; margin: 0; }
.plain li + li { margin-top: 4px; }
.history { padding-left: 1.2em; font-size: .9rem; }
.history li { margin-bottom: 4px; }

/* Stacked panels outside the booking grid (status page, admin) need spacing. */
.admin main .panel, .narrow .panel, main > .panel { margin-bottom: 14px; }