/* ============================================================
   tmrwX booking — cinematic dark variation
   Extends the shared booking structure without changing its flow.
   ============================================================ */

.booking-cinematic {
  color-scheme: dark;
  --ink: #f5f3ee;
  --paper: #0d0e10;
  --paper-2: #111214;
  --stone: rgba(245, 243, 238, .14);
  --champagne: #c85d35;
  --champagne-lt: #df6a40;
  --forest: #c85d35;
  --copper: #c85d35;
  --sage: #c85d35;
  --ink-mute: #aaa8a2;
  --on-ink: #f5f3ee;
  --surface-card: #111214;
  --surface-hover: #18191c;
  --line-strong: rgba(245, 243, 238, .28);
  --state-success: #df6a40;
  --state-success-soft: rgba(200, 93, 53, .12);
  --state-warning: #e4a663;
  --state-warning-soft: rgba(228, 166, 99, .12);
  --state-error: #ef7c72;
  --state-error-soft: rgba(239, 124, 114, .1);
  --shadow-card: none;
  --shadow-lift: none;
  --radius-control: 2px;
  --radius-panel: 2px;
  --font-display: "Outfit", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max-w: 1380px;
  --bk-radius: 20px;
  --bk-line: rgba(245, 243, 238, .17);
  --bk-line-soft: rgba(245, 243, 238, .1);
  --bk-field: rgba(20, 23, 22, .86);
  --bk-field-line: rgba(245, 243, 238, .16);
  --bk-field-line-hover: rgba(245, 243, 238, .34);
  min-height: 100dvh;
  background: #0d0e10;
  color: var(--ink);
}

.booking-cinematic .booking-media {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #151b18 url("../img/family-experience/family-hub-booking-poster.jpg") 44% center / cover no-repeat;
  pointer-events: none;
}

.booking-cinematic .booking-media::before,
.booking-cinematic .booking-media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
}

.booking-cinematic .booking-media::before {
  background:
    linear-gradient(90deg, rgba(6, 10, 9, .56) 0%, rgba(6, 10, 9, .12) 38%, rgba(6, 10, 9, .46) 62%, rgba(6, 10, 9, .82) 100%),
    linear-gradient(180deg, rgba(6, 10, 9, .58) 0%, transparent 25%, transparent 70%, rgba(6, 10, 9, .76) 100%);
}

.booking-cinematic .booking-media::after {
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.booking-cinematic .booking-media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% center;
  filter: saturate(1.02) contrast(1.04);
}

.booking-cinematic main,
.booking-cinematic .booking-header,
.booking-cinematic .booking-footer {
  position: relative;
  z-index: 2;
}

.booking-cinematic ::selection {
  background: rgba(200, 93, 53, .35);
  color: #fff;
}

.booking-cinematic .skip-link {
  background: var(--ink);
  color: #0d0e10;
}

.booking-cinematic .booking-header {
  position: sticky;
  top: 0;
  border-bottom-color: var(--bk-line-soft);
  background: rgba(7, 11, 10, .48);
  backdrop-filter: blur(18px) saturate(1.1);
}

.booking-cinematic .booking-back {
  color: var(--ink-mute);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.booking-cinematic .booking-shell {
  position: relative;
  display: flex;
  min-height: calc(100dvh - 74px);
  align-items: center;
  padding: clamp(28px, 4vw, 54px) 0 clamp(42px, 6vw, 76px);
}

.booking-cinematic .booking-layout {
  grid-template-columns: minmax(0, 1fr) minmax(500px, 620px);
  align-items: center;
  gap: clamp(38px, 6vw, 96px);
}

.booking-cinematic .booking-story {
  align-self: end;
  max-width: 34rem;
  padding: 0 0 clamp(16px, 3vw, 42px);
  color: #fff;
  text-shadow: 0 3px 28px rgba(0, 0, 0, .38);
}

.booking-cinematic .booking-story h2 {
  max-width: 10ch;
  color: #fff;
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.booking-cinematic .booking-story > p:last-child {
  max-width: 46ch;
  margin-top: 1.1rem;
  color: rgba(255, 255, 255, .78);
  font-size: .88rem;
  line-height: 1.65;
}

.booking-cinematic .booking-card {
  border-color: var(--bk-line);
  border-radius: var(--bk-radius);
  background: rgba(12, 15, 14, .94);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(22px) saturate(1.08);
}

.booking-cinematic .booking-progress {
  border-bottom-color: var(--bk-line-soft);
  background: rgba(16, 19, 18, .88);
}

.booking-cinematic .booking-steps li {
  color: #6f706f;
}

.booking-cinematic .booking-steps li.is-current,
.booking-cinematic .booking-steps li.is-done {
  color: var(--ink);
}

.booking-cinematic .booking-steps-num {
  border-color: rgba(245, 243, 238, .2);
  background: transparent;
  color: #8f8e89;
}

.booking-cinematic .booking-steps li.is-done .booking-steps-num {
  border-color: rgba(200, 93, 53, .45);
  background: rgba(200, 93, 53, .12);
  color: #df6a40;
}

.booking-cinematic .booking-steps li.is-current .booking-steps-num {
  background: var(--champagne);
  box-shadow: 0 0 0 3px rgba(200, 93, 53, .16);
}

.booking-cinematic .booking-progress-track {
  background: rgba(245, 243, 238, .08);
}

.booking-cinematic .booking-progress-track span {
  background: var(--champagne);
}

.booking-cinematic .booking-step {
  background: transparent;
}

.booking-cinematic .booking-step h2,
.booking-cinematic .booking-success h2 {
  font-size: clamp(2.25rem, 3.6vw, 3.7rem);
  font-weight: 500;
  letter-spacing: -.045em;
}

.booking-cinematic .booking-step-copy,
.booking-cinematic .booking-choice-grid small,
.booking-cinematic .booking-experience-grid small,
.booking-cinematic .booking-party-label small,
.booking-cinematic .booking-schedule-times small {
  color: var(--ink-mute);
}

.booking-cinematic .booking-option-group > legend,
.booking-cinematic .booking-activities > legend,
.booking-cinematic .booking-schedule legend,
.booking-cinematic .booking-party-label label,
.booking-cinematic .booking-step .form-field label {
  color: var(--ink);
}

.booking-cinematic .booking-experience-grid span,
.booking-cinematic .booking-schedule label > span,
.booking-cinematic .booking-party,
.booking-cinematic .booking-choice-grid span,
.booking-cinematic .booking-step input,
.booking-cinematic .booking-step select,
.booking-cinematic .booking-step textarea {
  border-color: var(--bk-field-line);
  border-radius: 0;
  background-color: var(--bk-field);
  color: var(--ink);
  box-shadow: none;
}

.booking-cinematic .booking-experience-grid i,
.booking-cinematic .booking-choice-grid i {
  border-radius: 50%;
  background: rgba(245, 243, 238, .07);
  color: var(--ink-mute);
}

.booking-cinematic .booking-experience-grid label:hover span,
.booking-cinematic .booking-choice-grid label:hover span,
.booking-cinematic .booking-schedule label:hover span {
  border-color: var(--bk-field-line-hover);
  box-shadow: none;
}

.booking-cinematic .booking-experience-grid input:checked + span,
.booking-cinematic .booking-choice-grid input:checked + span,
.booking-cinematic .booking-schedule input:checked + span {
  border-color: rgba(200, 93, 53, .58);
  background: rgba(200, 93, 53, .09);
  color: #df6a40;
  box-shadow: inset 0 0 0 1px rgba(200, 93, 53, .08);
}

.booking-cinematic .booking-experience-grid input:checked + span i,
.booking-cinematic .booking-choice-grid input:checked + span i,
.booking-cinematic .booking-choice-grid input:checked + span::after {
  background: var(--champagne);
  color: #fff;
}

.booking-cinematic .booking-choice-grid b {
  color: var(--ink);
}

.booking-cinematic .booking-choice-grid .booking-activity-limit {
  color: #8f8e89;
}

.booking-cinematic .booking-party {
  background: var(--bk-field);
}

.booking-cinematic .booking-party > legend {
  border-bottom-color: var(--bk-field-line);
  background: #18191c;
  color: var(--ink);
}

.booking-cinematic .booking-number-control {
  border-color: var(--bk-field-line);
  border-radius: 0;
  background: #18191c;
}

.booking-cinematic .booking-number-control button,
.booking-cinematic .booking-number-control input {
  background: #18191c;
  color: var(--ink);
}

.booking-cinematic .booking-number-control input {
  border-color: var(--bk-field-line);
}

.booking-cinematic .booking-summary {
  border-color: rgba(200, 93, 53, .28);
  border-radius: 0;
  background: rgba(200, 93, 53, .06);
}

.booking-cinematic .booking-summary-head {
  border-bottom-color: rgba(200, 93, 53, .2);
  background: rgba(245, 243, 238, .025);
}

.booking-cinematic .booking-summary-head strong,
.booking-cinematic .booking-summary button,
.booking-cinematic .booking-text-button {
  color: #df6a40;
}

.booking-cinematic .booking-summary dl > div,
.booking-cinematic .booking-summary dl > div:nth-child(odd) {
  border-color: rgba(200, 93, 53, .16);
}

.booking-cinematic .booking-summary dd {
  color: var(--ink);
}

.booking-cinematic .booking-step input:focus,
.booking-cinematic .booking-step select:focus,
.booking-cinematic .booking-step textarea:focus {
  border-color: var(--champagne);
  background-color: #18191c;
  box-shadow: 0 0 0 3px rgba(200, 93, 53, .12);
}

.booking-cinematic .booking-step input::placeholder,
.booking-cinematic .booking-step textarea::placeholder {
  color: #73736f;
}

.booking-cinematic .booking-step select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23AAA8A2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.booking-cinematic .booking-consent input {
  border-color: rgba(245, 243, 238, .32);
  border-radius: 0;
  background: transparent;
}

.booking-cinematic .booking-consent input:checked {
  border-color: var(--champagne);
  background: var(--champagne);
}

.booking-cinematic .booking-pass-terms {
  border-color: var(--bk-line-soft);
  border-radius: 0;
  background: rgba(245, 243, 238, .025);
}

.booking-cinematic .booking-pass-terms summary {
  color: var(--ink);
}

.booking-cinematic .booking-step-foot {
  border-top-color: var(--bk-line-soft);
  background: rgba(8, 11, 10, .38);
  box-shadow: none;
}

.booking-cinematic .btn {
  border-radius: 0;
  box-shadow: none;
}

.booking-cinematic .btn-champagne {
  background: var(--champagne);
}

.booking-cinematic .btn-champagne:hover {
  background: var(--champagne-lt);
  box-shadow: none;
}

.booking-cinematic .booking-wizard-actions .btn-champagne,
.booking-cinematic .booking-wizard-actions .btn-champagne:hover {
  box-shadow: none;
}

.booking-cinematic .booking-success > span {
  border-radius: 50%;
  background: rgba(200, 93, 53, .12);
  color: #df6a40;
}

.booking-cinematic .booking-success .home-text-link,
.booking-cinematic .booking-footer a {
  color: var(--ink);
}

.booking-cinematic .booking-footer {
  border-top-color: var(--bk-line-soft);
  background: rgba(7, 11, 10, .72);
  backdrop-filter: blur(16px);
}

@media (max-width: 900px) {
  .booking-cinematic .booking-media::before {
    background:
      linear-gradient(180deg, rgba(6, 10, 9, .66) 0%, rgba(6, 10, 9, .3) 30%, rgba(6, 10, 9, .6) 58%, rgba(6, 10, 9, .88) 100%);
  }

  .booking-cinematic .booking-layout {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .booking-cinematic .booking-layout > * {
    max-width: 680px;
  }

  .booking-cinematic .booking-story {
    align-self: auto;
    padding-bottom: 0;
  }

  .booking-cinematic .booking-story h2 {
    max-width: 12ch;
    font-size: clamp(2.8rem, 9vw, 4.8rem);
  }
}

@media (max-width: 640px) {
  .booking-cinematic .booking-media-video {
    object-position: 48% center;
  }

  .booking-cinematic .booking-shell {
    min-height: 0;
    padding-top: 22px;
  }

  .booking-cinematic .booking-layout {
    gap: 20px;
  }

  .booking-cinematic .booking-story {
    padding: 12vh 2px 6px;
  }

  .booking-cinematic .booking-story > p:last-child {
    display: none;
  }

  .booking-cinematic .booking-card {
    border-radius: 16px;
    background: rgba(12, 15, 14, .9);
  }

  .booking-cinematic .booking-step h2,
  .booking-cinematic .booking-success h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-cinematic .booking-media-video {
    visibility: hidden;
  }
}