/* Booking page (book.html). Builds on styles.css tokens. */
.book-page { padding: 120px 0 80px; background: radial-gradient(1200px 600px at 80% -10%, rgba(23, 159, 255, .14), transparent 60%), var(--bg); }
.book-page [hidden] { display: none !important; }

.book-hero { display: grid; grid-template-columns: 1fr 220px; gap: 32px; align-items: center; padding: 28px 32px; border: 1px solid rgba(80, 160, 255, .28); border-radius: 18px; background: linear-gradient(135deg, rgba(14, 40, 72, .85), rgba(8, 20, 38, .9)); box-shadow: 0 20px 60px rgba(0, 40, 90, .25); margin-bottom: 46px; }
.book-hero-date { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; }
.book-hero-day { font: 900 58px/.9 var(--title); }
.book-hero-month { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #c4d8ec; }
.book-hero-title { font: 900 clamp(34px, 4.6vw, 54px)/.95 var(--title); text-transform: uppercase; margin: 6px 0 10px; }
.book-hero-meta { color: #a9c2da; margin: 0 0 18px; }
.book-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.book-hero-poster { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); transform: rotate(1.5deg); transition: transform .25s; }
.book-hero-poster:hover { transform: rotate(0) scale(1.02); }
.book-hero-poster img { display: block; width: 100%; height: auto; }

.book-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 26px; }
.book-intro p { color: var(--muted); max-width: 560px; }
.book-intro .section-title { margin: 8px 0 12px; }
.book-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: #b9cde1; font-size: 14px; text-align: right; }
.book-contact a { color: inherit; }

.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.book-card { background: linear-gradient(180deg, rgba(14, 30, 52, .92), rgba(9, 19, 35, .95)); border: 1px solid rgba(120, 170, 230, .2); border-radius: 18px; padding: 24px; }
.book-card h2 { font: 700 26px/1.15 var(--body); letter-spacing: -.01em; margin: 6px 0 4px; text-transform: none; }
.book-kicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: #5cc3ff; }
.book-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.book-chip-btn { background: #12243b; border: 1px solid #355a80; color: #e6f1fb; border-radius: 8px; padding: 9px 12px; font-size: 11px; font-weight: 800; letter-spacing: .08em; cursor: pointer; white-space: nowrap; }
.book-lead { color: var(--muted); margin: 6px 0 18px; }
.book-fine { font-size: 12px; color: #7f9bb6; margin: 10px 0 0; }
.book-link { background: none; border: 0; color: #67deff; text-decoration: underline; cursor: pointer; margin-top: 16px; padding: 0; font: inherit; }

.book-date { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 14px; border: 1px solid rgba(120, 170, 230, .2); border-radius: 12px; background: rgba(4, 12, 24, .55); font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #c0d8ed; margin-bottom: 14px; }
.book-date input { background: #071121; border: 1px solid #2a4762; color: #fff; border-radius: 8px; padding: 9px 10px; font: 600 15px var(--body); color-scheme: dark; }
.book-date-label { font-weight: 500; letter-spacing: 0; color: var(--muted); font-size: 13px; }

.map-scroller { border: 1px solid rgba(120, 170, 230, .2); border-radius: 12px; background: #060d19; overflow: auto; -webkit-overflow-scrolling: touch; }
#floor-map { display: block; width: 100%; height: auto; touch-action: manipulation; }
.map-scroller.zoomed #floor-map { width: 175%; }
.map-outline { fill: #070f1c; stroke: #1c3350; stroke-width: 2; }
.fx { fill: #14243a; stroke: #2a4565; stroke-width: 1.5; }
.fx-led { fill: #2a4f7c; stroke: #4f86c6; }
.fx-bar { fill: #1a2c45; stroke: #c9a24a; stroke-width: 3; }
.fx-pool { fill: #1f5a3a; stroke: #b48a3c; stroke-width: 2; }
.fx-dance { fill: rgba(40, 70, 110, .15); stroke: #3d5f86; stroke-width: 1.5; stroke-dasharray: 5 5; }
.fx-patio { fill: #24402a; stroke: #6b9b4a; stroke-width: 3; }
.fx-text { fill: #7f98b4; font-family: var(--body); font-weight: 800; letter-spacing: .12em; pointer-events: none; }
.fx-l { font-size: 15px; } .fx-s { font-size: 11px; } .fx-xs { font-size: 9px; } .fx-dance, .fx-vertical { font-size: 11px; }
text.fx-dance { fill: #5d7da3; stroke: none; }

.unit { cursor: pointer; outline: none; }
.unit .hit { fill: transparent; stroke: none; }
.unit .face { fill: #1a2638; stroke: #5d7392; stroke-width: 2; transition: fill .15s, stroke .15s; }
.unit text { fill: #e9f2fb; font-family: var(--body); pointer-events: none; }
.unit .unit-name { font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.unit-table .unit-name { font-size: 13px; }
.unit .unit-sub { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; fill: #9fb4cc; }
.unit:hover .face, .unit:focus-visible .face { fill: #213a5a; stroke: #67c6ff; }
.unit:focus-visible .face { stroke-width: 3.5; }
.unit.is-selected .face { fill: #1d7fe0; stroke: #9fdcff; stroke-width: 3; }
.unit.is-selected .unit-sub { fill: #e6f5ff; }
.unit.is-held { cursor: not-allowed; }
.unit.is-held .face { fill: #121a26; stroke: #5a6b82; stroke-dasharray: 4 4; }
.unit.is-held text { fill: #93a3b8; }

.map-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.map-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; }
.lg-open { background: #1a2638; border: 1.5px solid #5d7392; }
.lg-selected { background: #1d7fe0; border: 1.5px solid #9fdcff; }
.lg-held { background: #121a26; border: 1.5px dashed #3a4658; }
.capacity-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.capacity-chip { border: 1px solid #2f4d6e; background: #0d1d31; border-radius: 8px; padding: 5px 10px; font-size: 12px; color: #c6d9ec; }
.capacity-chip b { color: #8fd3ff; margin-right: 2px; }

.step { border: 0; border-top: 1px solid rgba(120, 170, 230, .15); margin: 0; padding: 18px 0; min-width: 0; }
.step legend { display: flex; align-items: baseline; gap: 8px; width: 100%; font-weight: 700; font-size: 17px; padding: 0; margin-bottom: 12px; float: left; }
.step legend + * { clear: both; }
.step legend b { color: #46b2ff; font-weight: 800; }
.step-aside { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.step-empty { border: 1px dashed rgba(120, 170, 230, .3); border-radius: 10px; padding: 14px; color: var(--muted); font-size: 14px; margin: 0; }
.step-warn { color: #ffd27a; font-size: 13px; margin: 10px 0 0; }
.selected-spots { display: grid; gap: 8px; }
.spot-chip { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #2e6ea8; background: rgba(29, 127, 224, .14); border-radius: 10px; }
.spot-chip strong { display: block; }
.spot-chip span { font-size: 12px; color: #a8c3dd; }
.spot-remove { width: 34px; height: 34px; border-radius: 8px; border: 1px solid #3b5f84; background: #0d1d31; color: #fff; cursor: pointer; }

.stepper { display: flex; align-items: center; gap: 12px; }
.stepper output { min-width: 36px; text-align: center; font: 700 26px var(--body); }
.stepper-btn { width: 44px; height: 44px; border-radius: 10px; border: 1px solid #355a80; background: #10213a; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.stepper-btn:hover { border-color: #67c6ff; }
.stepper-sm .stepper-btn { width: 36px; height: 36px; font-size: 18px; }
.stepper-sm output { font-size: 16px; min-width: 22px; }

.time-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.time-chip { position: relative; }
.time-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.time-chip span { display: inline-block; padding: 10px 14px; border: 1px solid #355a80; border-radius: 10px; background: #0d1d31; font-size: 14px; font-weight: 600; }
.time-chip input:checked + span { background: #1d7fe0; border-color: #9fdcff; }
.time-chip input:focus-visible + span { outline: 2px solid #67deff; outline-offset: 2px; }
.time-chip input:disabled + span { opacity: .35; text-decoration: line-through; }

.bottles summary { cursor: pointer; color: #9fd8ff; font-weight: 600; padding: 4px 0; }
.bottle-list { border: 1px solid rgba(120, 170, 230, .18); border-radius: 12px; margin-top: 10px; }
.bottle-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(120, 170, 230, .12); }
.bottle-row:last-child { border-bottom: 0; }
.bottle-row strong { display: block; font-size: 14px; }
.bottle-row span { font-size: 11px; color: var(--muted); }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.info-grid label { display: grid; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #c0d8ed; }
.info-grid label.full { grid-column: 1 / -1; }
.info-grid .optional { font-weight: 500; letter-spacing: 0; color: var(--muted); }
.info-grid input, .info-grid textarea { background: #071121; border: 1px solid #2a4762; border-radius: 10px; padding: 12px; color: #fff; font: 16px var(--body); width: 100%; }
.info-grid input:focus, .info-grid textarea:focus { outline: none; border-color: #38a8ff; box-shadow: 0 0 0 3px rgba(56, 168, 255, .2); }

.turnstile-box { margin: 6px 0 12px; min-height: 65px; }
.form-error { background: rgba(255, 107, 107, .12); border: 1px solid rgba(255, 107, 107, .5); color: #ffd6d6; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.fallback { border: 1px solid #2e6ea8; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.fallback p { margin: 0 0 10px; color: #c6d9ec; }
.book-submit { width: 100%; border-radius: 12px; font-size: 13px; }
.book-success { padding: 10px 0; outline: none; }
.book-success h2 { font: 900 44px/1 var(--title); text-transform: uppercase; margin: 8px 0 10px; }
.book-success p { color: #b9cde1; }

@media (max-width: 1000px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-intro { flex-direction: column; align-items: flex-start; }
  .book-contact { text-align: left; }
}
@media (max-width: 640px) {
  .book-page { padding-top: 96px; }
  .book-hero { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .book-hero-poster { max-width: 200px; transform: none; order: -1; }
  .book-card { padding: 18px 14px; border-radius: 14px; }
  .info-grid { grid-template-columns: 1fr; }
  .map-scroller.zoomed #floor-map { width: 210%; }
}

.req { margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #8fd3ff; text-transform: uppercase; }
.step:focus { outline: 2px solid #67deff; outline-offset: 4px; border-radius: 8px; }
.step[aria-invalid="true"] legend { color: #ffb4b4; }
.info-grid input[aria-invalid="true"] { border-color: #ff7b7b; box-shadow: 0 0 0 3px rgba(255, 107, 107, .2); }
.time-chip span { min-height: 44px; display: inline-flex; align-items: center; }
.spot-list-wrap { margin-top: 12px; }
.spot-list-wrap summary { cursor: pointer; color: #9fd8ff; font-weight: 600; padding: 6px 0; }
.spot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.spot-pick { display: grid; gap: 2px; text-align: left; min-height: 52px; padding: 8px 12px; border-radius: 10px; border: 1px solid #355a80; background: #0d1d31; color: #fff; cursor: pointer; font: inherit; }
.spot-pick span { font-size: 12px; color: #a8c3dd; }
.spot-pick.is-selected { background: #1d7fe0; border-color: #9fdcff; }
.spot-pick.is-selected span { color: #e6f5ff; }
.spot-pick.is-held { opacity: .5; cursor: not-allowed; text-decoration: line-through; }
@media (max-width: 640px) { .book-chip-btn { padding: 11px 14px; background: #1d4f80; border-color: #67c6ff; } .spot-list-wrap { margin-top: 14px; } }