body[data-public-page="booking"] #booking {
  display: block
}

.bookingPage {
  background: var(--light);
  min-height: calc(100vh - 76px);
  padding: 65px 5vw 90px
}

.serviceHero {
  min-height: 390px;
  margin: -65px -5vw 50px;
  padding: 58px max(7vw, 45px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, #101638 0%, #292d78 58%, #104a70 100%)
}

.serviceHero:before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border: 65px solid #44b0e512;
  border-radius: 50%;
  right: -150px;
  top: -220px;
  animation: serviceRing 7s ease-in-out infinite
}

.serviceHeroCopy {
  position: relative;
  z-index: 2;
  max-width: 700px
}

.serviceHeroCopy>span {
  color: var(--sky);
  font-size: 9px;
  letter-spacing: .18em;
  font-weight: 800
}

.serviceHero h1 {
  font-size: 52px;
  line-height: .98;
  margin: 14px 0 16px;
  letter-spacing: -.035em
}

.serviceHero h1 em {
  font-style: normal;
  color: var(--sky)
}

.serviceHeroCopy>p {
  max-width: 650px;
  color: #d2d9eb;
  font-size: 14px;
  line-height: 1.65
}

.bookingHeroMotion {
  height: 290px;
  position: relative;
  z-index: 2
}

.bookingOrbit {
  position: absolute;
  width: 245px;
  height: 245px;
  border: 1px dashed #ffffff30;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: bookingOrbit 8s linear infinite
}

.heroCalendar,
.heroCourtCard {
  position: absolute;
  width: 190px;
  padding: 20px;
  border-radius: 17px;
  display: grid;
  box-shadow: 0 18px 40px #05092255;
  backdrop-filter: blur(8px)
}

.heroCalendar {
  left: 7%;
  top: 28px;
  background: #ffffffed;
  color: var(--navy);
  animation: bookingCard 3.2s ease-in-out infinite
}

.heroCourtCard {
  right: 2%;
  bottom: 26px;
  background: linear-gradient(145deg, var(--orange), #ff8c42);
  animation: bookingCard 3.2s .65s ease-in-out infinite
}

.heroCalendar small,
.heroCourtCard small {
  font-size: 9px;
  letter-spacing: .12em
}

.heroCalendar small {
  color: var(--sky)
}

.heroCalendar b,
.heroCourtCard b {
  font-size: 25px;
  margin: 7px 0
}

.heroCalendar span {
  color: var(--muted);
  font-size: 9px
}

.heroCourtCard span {
  font-size: 9px;
  color: #fffce8
}

.heroBookingBall {
  position: absolute;
  left: 53%;
  top: 42%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #ddeb46;
  color: var(--navy);
  display: grid;
  place-content: center;
  text-align: center;
  font-weight: bold;
  letter-spacing: 5px;
  line-height: .65;
  box-shadow: 0 0 25px #ddeb4660;
  animation: bookingBall 3.6s ease-in-out infinite
}

.motionTrail {
  position: absolute;
  left: 25%;
  right: 20%;
  top: 52%;
  border-top: 2px dashed #ffffff36;
  transform: rotate(10deg);
  z-index: -1
}

.bookingPagehead {
  max-width: 1400px;
  margin: auto
}

.bookingPagehead h2 {
  font-size: 44px;
  margin: 12px 0
}

.bookingPagehead p {
  max-width: 760px
}

.bookingSteps {
  display: flex;
  gap: 5px
}

.bookingSteps span {
  padding: 4px 5px
}

.bookingDemoGrid {
  max-width: 1400px;
  margin: 30px auto;
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 20px;
  align-items: start
}

.bookingFormPanel {
  padding: 26px !important
}

.bookingBlock+.bookingBlock {
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 18px
}

.bookingSectionTitle {
  display: grid;
  gap: 3px;
  margin-bottom: 14px
}

.bookingSectionTitle b {
  font-size: 14px
}

.bookingSectionTitle span {
  font-size: 9px;
  color: var(--muted)
}

.gameChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.gameChoice {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 3px;
  text-align: left;
  color: var(--ink)
}

.gameChoice>.gameIcon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef8fd;
  overflow: hidden
}

.gameChoice>.gameIcon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block
}

.gameChoice[data-game="basketball"]>.gameIcon img {
  width: 38px;
  height: 38px
}

.gameChoice.selected>.gameIcon {
  background: #fff
}

.gameChoice b {
  font-size: 11px
}

.gameChoice small {
  font-size: 9px;
  color: var(--muted)
}

.gameChoice.selected {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff
}

.gameChoice.selected small {
  color: #cbd2ec
}

.fieldLabel,
.bookingFormPanel label {
  display: grid;
  gap: 6px;
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .05em;
  color: #555f77;
  margin: 0 0 11px
}

.field {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink)
}

.timeLabel {
  margin-top: 4px
}

.timeSlots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 16px
}

.timeSlots button,
.formatChoices button {
  border: 1px solid var(--line);
  background: #fff;
  color: #5d667b;
  border-radius: 8px;
  padding: 9px 4px;
  font-weight: 800
}

.timeSlots button.chosen,
.formatChoices button.chosen {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  box-shadow: 0 7px 18px #27297025
}

.bookingStepperGrid,
.formatPlayGrid,
.addonGridBooking {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.stepper {
  display: grid;
  grid-template-columns: 34px auto 1fr 34px;
  align-items: center;
  gap: 8px
}

.stepper button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 50%;
  color: var(--navy);
  font-size: 18px
}

.stepper b {
  font-size: 16px
}

.stepper span {
  font-size: 9px;
  color: var(--muted)
}

.formatChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px
}

.formatChoices button {
  display: grid;
  gap: 1px
}

.formatChoices small {
  font-size: 9px;
  font-weight: 400
}

.socialOnly {
  height: 50px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 11px;
  font-weight: 800
}

.socialOnly small {
  display: block;
  font-size: 9px;
  color: #cbd2ec;
  font-weight: 400
}

.bookingFormPanel select,
.bookingFormPanel textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  text-transform: none
}

.bookingFormPanel textarea {
  min-height: 72px;
  resize: vertical
}

.notesField {
  margin-top: 3px !important
}

.bookingGrandTotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #eaf7fd;
  border: 1px solid #a7daf1;
  border-radius: 11px;
  margin-top: 18px;
  padding: 13px
}

.bookingGrandTotal span {
  display: grid;
  text-transform: none;
  font-size: 12px
}

.bookingGrandTotal small {
  font-size: 9px;
  color: var(--muted);
  font-weight: 400
}

.bookingGrandTotal b {
  font-size: 24px;
  color: var(--navy)
}

.reviewBookingButton {
  margin-top: 10px;
  padding: 14px
}

.assignmentRule {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.45;
  margin: 9px 0 0;
  background: #f0f2f5;
  border-radius: 8px;
  padding: 9px
}

.interactiveFacility {
  padding: 0 !important;
  overflow: hidden !important
}

.bookingFacilityTop {
  padding: 17px 18px !important
}

.bookingFacilityTop>div:first-child {
  display: grid;
  gap: 3px
}

.bookingFacilityTop small,
.facilityHint {
  font-size: 9px;
  color: var(--muted)
}

.facilityScene {
  height: 620px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#d9ebf5 0 18%, #b8cad4 18% 86%, #8d9ca5 86%);
  perspective: 1000px
}

.facilityScene:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #ffffff33, transparent 35%, #44b0e50c 65%, transparent);
  pointer-events: none
}

.tentRoof {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 30px;
  height: 85px;
  border-top: 5px solid #ffffffc0;
  transform: perspective(320px) rotateX(57deg);
  z-index: 3
}

.tentRoof:before,
.tentRoof:after {
  content: "";
  position: absolute;
  top: -3px;
  width: 42%;
  border-top: 3px solid #93a8b4
}

.tentRoof:before {
  left: 0;
  transform: rotate(-8deg);
  transform-origin: right
}

.tentRoof:after {
  right: 0;
  transform: rotate(8deg);
  transform-origin: left
}

.tentRoof span {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%) rotateX(-57deg);
  letter-spacing: .55em;
  color: var(--navy);
  font-size: 12px;
  white-space: nowrap
}

.facilityBadge {
  position: absolute;
  left: 50%;
  top: 86px;
  transform: translateX(-50%);
  z-index: 5;
  background: #fff;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 8px 20px #17204b16;
  display: flex;
  align-items: center;
  gap: 8px
}

.facilityBadge b {
  background: var(--navy);
  color: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 9px
}

.facilityBadge span {
  font-size: 9px;
  color: var(--muted);
  padding-right: 5px
}

.allocationPill {
  position: absolute;
  right: 4%;
  top: 92px;
  z-index: 5;
  background: #e7faed;
  color: #318b54;
  border: 1px solid #bfe8cd;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 9px;
  font-weight: 800
}

.legacyFacilityDeck {
  position: absolute;
  left: 0;
  right: 0;
  top: 150px;
  bottom: 30px;
  border-top: 12px solid #81929c;
  border-bottom: 12px solid #81929c;
  background: linear-gradient(180deg, #aabac3, #95a8b2);
  overflow: hidden;
  transform: perspective(1100px) rotateX(7deg);
  transform-origin: center bottom
}

.legacyFacilityDeck:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #ffffff20, transparent 35%, #ffffff10 70%, transparent);
  pointer-events: none
}

.legacyCourtGrid {
  position: absolute;
  left: 30%;
  right: 3%;
  top: 13%;
  bottom: 10%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
  transform: skewX(2deg)
}

.legacyCourt {
  position: relative;
  border: 3px solid #fff;
  background: linear-gradient(145deg, #48add4, #2789b7);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 7px 14px #17204b20;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  overflow: hidden
}

.legacyCourt:hover {
  transform: translateY(-4px);
  filter: brightness(1.07);
  box-shadow: 0 12px 22px #17204b2c
}

.legacyCourt:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 2px solid #fff
}

.legacyCourt:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px dashed #fff
}

.legacyCourt b {
  position: absolute;
  left: 8px;
  top: 5px;
  font-size: 17px;
  z-index: 2
}

.legacyCourt small {
  position: absolute;
  right: 7px;
  bottom: 5px;
  font-size: 9px;
  z-index: 2
}

.legacyCourt.reserved,
.legacyCourt.unavailable {
  background: #707b82
}

.legacyCourt.unavailable {
  opacity: .72
}

.legacyCourt.selectedCourt {
  outline: 4px solid var(--orange);
  outline-offset: 2px;
  z-index: 6
}

.legacyWaiting {
  grid-column: 2;
  grid-row: 3;
  border-radius: 9px;
  background: #dbe9ef;
  border: 1px solid #c4d6df;
  display: grid;
  place-content: center;
  text-align: center;
  color: #39759e;
  box-shadow: 0 7px 15px #17204b12
}

.legacyWaiting b {
  font-size: 10px;
  letter-spacing: .08em
}

.legacyWaiting small {
  font-size: 9px;
  color: #748696;
  margin-top: 4px
}

.convertibleZone {
  position: absolute;
  left: -5%;
  width: 34%;
  top: 23%;
  bottom: 23%;
  background: linear-gradient(145deg, #245b82, #276c99);
  border: 4px solid #fff;
  transform: skewX(-7deg);
  box-shadow: 0 10px 24px #17204b33;
  overflow: hidden
}

.convertibleZone>span {
  position: absolute;
  left: 12%;
  top: 8%;
  font-size: 9px;
  color: #fff;
  font-weight: 900;
  letter-spacing: .09em
}

.convertiblePickle {
  position: absolute;
  inset: 18% 7% 8%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px
}

.convertiblePickle .legacyCourt {
  min-width: 0;
  background: linear-gradient(145deg, #2d759f, #1f5e88)
}

.convertiblePickle .legacyCourt b {
  font-size: 14px
}

.convertiblePickle .legacyCourt small {
  display: none
}

.convertibleBasketball {
  position: absolute;
  inset: 15% 5% 7%;
  border: 3px solid #fff;
  background: #2b668f;
  cursor: pointer;
  color: #fff
}

.convertibleBasketball:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 94px;
  height: 94px;
  border: 3px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%)
}

.convertibleBasketball:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 3px solid #fff
}

.convertibleBasketball b {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: .06em
}

.convertibleBasketball.selectedCourt {
  outline: 4px solid var(--orange);
  outline-offset: 2px
}

.legacyBasketballGhost {
  opacity: .32;
  filter: grayscale(.35);
  cursor: default
}

.legacyBasketballGhost:hover {
  transform: none;
  filter: grayscale(.35)
}

.courtInspector {
  margin: 14px 18px 8px;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px
}

.courtInspector>div {
  display: grid;
  gap: 2px
}

.courtInspector span {
  font-size: 9px;
  color: var(--sky);
  font-weight: 900;
  letter-spacing: .1em
}

.courtInspector b {
  font-size: 13px
}

.courtInspector small {
  font-size: 9px;
  color: var(--muted)
}

.courtInspector strong {
  font-size: 9px;
  border-radius: 999px;
  padding: 8px 11px
}

.statusAvailable {
  background: #e7f8ed;
  color: #2d9858
}

.statusReserved {
  background: #fff0e8;
  color: #cf5d20
}

.statusUnavailable {
  background: #eef0f2;
  color: #66717a
}

.statusNeutral {
  background: #eef1f8;
  color: #68738c
}

.availabilityNotice {
  margin: 0 18px 18px;
  font-size: 9px;
  color: #7b8497
}

.bookingSigninModal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  padding: 20px
}

.bookingSigninModal.open {
  display: grid
}

.bookingSigninBackdrop {
  position: absolute;
  inset: 0;
  background: #090e21cc;
  backdrop-filter: blur(4px)
}

.bookingSigninCard {
  position: relative;
  z-index: 1;
  width: min(470px, 100%);
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 25px 80px #0005
}

.bookingSigninCard h3 {
  font-size: 28px;
  margin: 12px 0
}

.bookingSigninCard p {
  color: var(--muted);
  line-height: 1.6
}

.bookingSigninClose {
  position: absolute;
  right: 14px;
  top: 12px;
  border: 0;
  background: #f3f5f9;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 21px
}

.bookingSigninActions {
  display: flex;
  gap: 10px;
  margin-top: 22px
}

.bookingSigninActions button {
  flex: 1
}

@keyframes serviceRing {
  50% {
    transform: translate(-38px, 30px) rotate(12deg)
  }
}

@keyframes bookingOrbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg)
  }
}

@keyframes bookingCard {

  0%,
  100% {
    transform: translateY(4px) rotate(-2deg)
  }

  50% {
    transform: translateY(-16px) rotate(2deg)
  }
}

@keyframes bookingBall {
  0% {
    transform: translate(-82px, -38px) rotate(0) scale(.9)
  }

  50% {
    transform: translate(62px, 50px) rotate(180deg) scale(1.08)
  }

  100% {
    transform: translate(-82px, -38px) rotate(360deg) scale(.9)
  }
}

@media(max-width:1100px) {
  .bookingDemoGrid {
    grid-template-columns: 400px 1fr
  }

  .timeSlots {
    grid-template-columns: repeat(4, 1fr)
  }

  .facilityScene {
    height: 570px
  }

  .legacyCourtGrid {
    left: 31%;
    gap: 9px
  }
}

@media(max-width:850px) {
  .serviceHero {
    grid-template-columns: 1fr;
    min-height: 650px
  }

  .bookingHeroMotion {
    height: 270px
  }

  .bookingDemoGrid {
    grid-template-columns: 1fr
  }

  .interactiveFacility {
    order: -1
  }

  .facilityScene {
    height: 520px
  }
}

@media(max-width:600px) {
  .bookingPage {
    padding-left: 20px;
    padding-right: 20px
  }

  .serviceHero {
    margin: -65px -20px 38px;
    padding: 42px 24px;
    min-height: 610px
  }

  .serviceHero h1 {
    font-size: 39px
  }

  .bookingPagehead h2 {
    font-size: 35px
  }

  .bookingSteps {
    display: none
  }

  .gameChoices,
  .bookingStepperGrid,
  .formatPlayGrid,
  .addonGridBooking {
    grid-template-columns: 1fr
  }

  .timeSlots {
    grid-template-columns: repeat(4, 1fr)
  }

  .legacyCourtGrid {
    left: 34%;
    gap: 7px
  }

  .convertibleZone {
    width: 38%
  }

  .facilityScene {
    height: 650px
  }

  .heroCalendar,
  .heroCourtCard {
    width: 155px;
    padding: 15px
  }

  .heroCalendar {
    left: 0
  }

  .heroCourtCard {
    right: 0
  }

  .heroBookingBall {
    width: 58px;
    height: 58px
  }

  .bookingSigninActions {
    flex-direction: column
  }
}

@media(prefers-reduced-motion:reduce) {

  .serviceHero:before,
  .bookingOrbit,
  .heroCalendar,
  .heroCourtCard,
  .heroBookingBall {
    animation: none !important
  }
}

/* Demo-faithful facility view: all court surfaces share one perspective plane. */
.demoFacilityScene {
  height: 640px;
  background: linear-gradient(#dfeef6 0 17%, #aabac3 17% 88%, #8b9da7 88%);
  overflow: hidden;
  position: relative
}

.facilityCanopy {
  height: 115px;
  background: linear-gradient(#dfeef6, #cbdce6);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  border-bottom: 1px solid #b2c6d1;
  z-index: 2
}

.facilityCanopy>span {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 16px;
  height: 42px;
  background: linear-gradient(90deg, #9aaebb, #f7fcff 50%, #9aaebb);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 97% 100%, 50% 18%, 3% 100%);
  filter: drop-shadow(0 8px 7px #61738244)
}

.facilityCanopy>b {
  position: absolute;
  left: 50%;
  top: 53px;
  transform: translateX(-50%);
  letter-spacing: .45em;
  color: var(--navy);
  font-size: 12px
}

.facilityCanopy>i {
  position: absolute;
  top: 50px;
  width: 3px;
  height: 62px;
  background: #8599a6
}

.facilityCanopy>i:nth-of-type(1) {
  left: 7%
}

.facilityCanopy>i:nth-of-type(2) {
  left: 35%
}

.facilityCanopy>i:nth-of-type(3) {
  right: 35%
}

.facilityCanopy>i:nth-of-type(4) {
  right: 7%
}

.beam {
  position: absolute;
  top: 48px;
  width: 120px;
  height: 110px;
  background: linear-gradient(#fff9, transparent);
  clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%);
  animation: facilityLight 5.2s ease-in-out infinite alternate
}

.beamOne {
  left: 15%
}

.beamTwo {
  right: 15%;
  animation-delay: -2.6s
}

.demoPerspectiveStage {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 128px;
  bottom: 62px;
  perspective: 1050px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible
}

.demoDeck {
  --court-w: clamp(125px, 12vw, 174px);
  --court-h: calc(var(--court-w)/2);
  width: 100%;
  min-width: 785px;
  height: 500px;
  padding: 31px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 23px);
  background: linear-gradient(145deg, #8da0aa, #b6c5cc);
  border: 14px solid #72858f;
  box-shadow: 0 58px 52px #17204b42;
  transform: rotateX(48deg);
  transform-origin: top center;
  position: relative
}

.demoConvertible {
  position: relative;
  flex: 0 0 calc(var(--court-h)*3 + 16px);
  width: calc(var(--court-h)*3 + 16px);
  height: calc(var(--court-w) + 16px);
  align-self: center
}

.demoVerticalSet {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px
}

.demoCourtGroup {
  position: relative;
  flex: 0 0 var(--court-w);
  width: var(--court-w);
  height: calc(var(--court-h)*3 + 16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px
}

.waitingGroup {
  justify-content: flex-start
}

.demoZoneCaption {
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  display: flex;
  justify-content: space-between;
  gap: 5px;
  color: #fff;
  text-shadow: 0 1px 3px #0007;
  z-index: 8
}

.demoZoneCaption b {
  font-size: 9px;
  letter-spacing: .13em
}

.demoZoneCaption span {
  font-size: 9px;
  text-align: right
}

.demoCourt {
  position: relative;
  border: 3px solid #e9fbff;
  background: linear-gradient(145deg, #2787b4, #44b0e5);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 8px 15px #17204b30;
  transition: transform .28s, filter .28s, box-shadow .28s;
  cursor: pointer
}

.demoHorizontalCourt {
  flex: 0 0 var(--court-h);
  width: var(--court-w);
  height: var(--court-h)
}

.demoVerticalCourt {
  flex: 0 0 var(--court-w);
  width: var(--court-h);
  height: var(--court-w)
}

.demoCourt:before,
.demoCourt:after {
  content: "";
  position: absolute;
  background: #e9fbffcc
}

.demoHorizontalCourt:before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px
}

.demoHorizontalCourt:after {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px
}

.demoVerticalCourt:before {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px
}

.demoVerticalCourt:after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px
}

.demoHorizontalCourt>span {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  border-top: 3px dashed #fff;
  z-index: 2
}

.demoVerticalCourt>span {
  position: absolute;
  left: 50%;
  top: 12%;
  bottom: 12%;
  border-left: 3px dashed #fff;
  z-index: 2
}

.demoCourt>b {
  position: absolute;
  left: 7px;
  top: 5px;
  z-index: 3;
  font-size: 17px;
  text-shadow: 0 2px 3px #0004
}

.demoCourt>small {
  position: absolute;
  right: 5px;
  bottom: 4px;
  z-index: 3;
  font-size: 9px;
  letter-spacing: .08em
}

.demoCourt.available:not(.selectedCourt):after {
  box-shadow: inset 0 0 0 999px transparent
}

.demoCourt.reserved,
.demoCourt.unavailable {
  background: linear-gradient(145deg, #687680, #89969d);
  filter: saturate(.55)
}

.demoCourt:hover {
  transform: translateY(-8px) scale(1.035);
  filter: brightness(1.12);
  box-shadow: 0 18px 24px #10203d57;
  z-index: 9
}

.demoCourt.available:before {
  box-shadow: none
}

.demoCourt.available::marker {
  display: none
}

.demoCourt.available {
  animation: courtBreath 4.4s ease-in-out infinite
}

.demoCourt.selectedCourt {
  background: linear-gradient(145deg, #e85e1b, #f58c49);
  animation: selectedPlan 1.65s ease-in-out infinite
}

.demoCourt:focus-visible,
.demoBasketballFloor:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 2px
}

.demoCourt::selection {
  background: transparent
}

.demoCourt.available .shine {
  display: none
}

.demoCourt.available:not(.selectedCourt) {
  background-image: linear-gradient(145deg, #2787b4, #44b0e5), linear-gradient(105deg, transparent 38%, #ffffff6b 50%, transparent 62%);
  background-blend-mode: normal
}

.demoCourt.available:not(.selectedCourt)::after {
  animation: none
}

.demoCourt.available:not(.selectedCourt) span:after {
  content: "";
  position: absolute;
  inset: -120px;
  background: linear-gradient(105deg, transparent 40%, #ffffff48 50%, transparent 60%);
  animation: courtShine 4.6s linear infinite;
  pointer-events: none
}

.demoWaiting {
  flex: 1;
  min-height: 0;
  border: 2px dashed #dbeaf1;
  border-radius: 7px;
  background: linear-gradient(145deg, #ffffffb8, #d9edf6a6);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7px;
  gap: 3px;
  box-shadow: inset 0 0 24px #44b0e51c
}

.demoWaiting b {
  font-size: 9px;
  letter-spacing: .1em
}

.demoWaiting span {
  font-size: 9px;
  color: #546579
}

.benchRow {
  display: flex;
  gap: 4px;
  margin-bottom: 3px
}

.benchRow i {
  display: block;
  width: 18px;
  height: 7px;
  border-radius: 2px;
  background: var(--sky);
  box-shadow: 0 4px 0 #277ca2
}

.demoBasketballFloor {
  position: absolute;
  inset: 0;
  background: #305f84;
  border: 4px solid #fff;
  box-shadow: inset 0 0 0 5px #44b0e566, 0 12px 22px #17204b3d;
  overflow: hidden;
  transition: .3s;
  cursor: pointer
}

.demoBasketballFloor>b {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 10px;
  letter-spacing: .12em;
  z-index: 3
}

.demoBasketballFloor:after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 2px solid #ffffffc9
}

.demoBasketballFloor .midLine {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 2px solid #fff
}

.demoBasketballFloor .centerCircle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%)
}

.demoBasketballFloor .key {
  position: absolute;
  top: 31%;
  width: 27%;
  height: 38%;
  border: 2px solid #fff
}

.demoBasketballFloor .leftKey {
  left: 8%
}

.demoBasketballFloor .rightKey {
  right: 8%
}

.demoBasketballFloor .arc {
  position: absolute;
  top: 37%;
  width: 48px;
  height: 26%;
  border: 2px solid #fff;
  border-radius: 50%
}

.demoBasketballFloor .leftArc {
  left: 25%
}

.demoBasketballFloor .rightArc {
  right: 25%
}

.demoBasketballFloor .hoop {
  position: absolute;
  top: 48%;
  width: 12px;
  height: 12px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  z-index: 2
}

.demoBasketballFloor .leftHoop {
  left: 10%
}

.demoBasketballFloor .rightHoop {
  right: 10%
}

.demoBasketballFloor:hover {
  transform: translateY(-8px) scale(1.025);
  filter: brightness(1.1);
  box-shadow: 0 18px 28px #17204b52
}

.demoBasketballFloor.selectedCourt {
  animation: selectedPlan 1.65s ease-in-out infinite
}

.assignedBanner {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 16px;
  z-index: 8;
  background: #fff;
  border-radius: 12px;
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  box-shadow: 0 10px 28px #17204b1b
}

.assignedBanner b {
  font-size: 13px
}

.assignedBanner span {
  font-size: 9px;
  color: var(--muted)
}

.allocationPill {
  animation: statusPulse 1.9s ease-in-out infinite
}

.facilityBadge {
  animation: badgeFloat 4s ease-in-out infinite
}

.courtStatusModal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  place-items: center;
  padding: 20px
}

.courtStatusModal.open {
  display: grid
}

.courtStatusBackdrop {
  position: absolute;
  inset: 0;
  background: #081027b0;
  backdrop-filter: blur(3px)
}

.courtStatusCard {
  position: relative;
  z-index: 1;
  width: min(430px, 100%);
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 28px 90px #0006;
  animation: statusPop .22s ease-out
}

.courtStatusClose {
  position: absolute;
  right: 13px;
  top: 12px;
  border: 0;
  background: #f2f4f8;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 21px
}

.courtStatusEyebrow {
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--sky);
  font-weight: 900
}

.courtStatusCard h3 {
  font-size: 30px;
  margin: 10px 0 5px
}

.courtStatusCard p {
  color: var(--muted);
  margin: 0 0 18px
}

.courtStatusValue {
  display: inline-block;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  margin-bottom: 16px
}

.courtStatusValue.available {
  background: #e7f8ed;
  color: #2d9858
}

.courtStatusValue.reserved {
  background: #fff0e8;
  color: #cf5d20
}

.courtStatusValue.unavailable {
  background: #eef0f2;
  color: #66717a
}

.courtStatusCard small {
  display: block;
  color: var(--muted);
  line-height: 1.55
}

@keyframes facilityLight {
  to {
    transform: translateX(85px);
    opacity: .22
  }
}

@keyframes courtShine {
  to {
    transform: translateX(210px)
  }
}

@keyframes selectedPlan {
  50% {
    box-shadow: 0 0 0 9px #ed6d2647, 0 17px 28px #17204b4a;
    filter: brightness(1.12)
  }
}

@keyframes statusPulse {
  50% {
    box-shadow: 0 0 0 8px #49bd7a22
  }
}

@keyframes courtBreath {
  50% {
    filter: brightness(1.06)
  }
}

@keyframes badgeFloat {
  50% {
    transform: translateX(-50%) translateY(-5px)
  }
}

@keyframes statusPop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.96)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media(max-width:1100px) {
  .demoPerspectiveStage {
    overflow-x: auto;
    justify-content: flex-start
  }

  .demoDeck {
    --court-w: 150px;
    justify-content: flex-start;
    transform: rotateX(42deg)
  }
}

@media(max-width:850px) {
  .demoFacilityScene {
    height: 600px
  }

  .demoPerspectiveStage {
    bottom: 72px
  }
}

@media(max-width:600px) {
  .demoDeck {
    --court-w: 135px;
    min-width: 710px;
    height: 440px;
    gap: 12px
  }

  .assignedBanner {
    left: 14px;
    right: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px
  }

  .facilityCanopy {
    min-width: 710px
  }

  .demoFacilityScene {
    height: 580px
  }
}

@media(prefers-reduced-motion:reduce) {

  .beam,
  .allocationPill,
  .facilityBadge,
  .demoCourt,
  .demoCourt span:after,
  .demoBasketballFloor {
    animation: none !important
  }
}

/* Pickleball view: exact approved-demo facility composition. Basketball keeps the existing v33 layout. */
.demoDeck.pickleballDeck {
  --court-w: clamp(128px, 13.2vw, 176px);
  --court-h: calc(var(--court-w)/2);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, 1.55vw, 24px) !important;
  height: 525px !important;
  min-width: 790px !important;
  padding: 30px 22px !important;
  transform: rotateX(46deg) !important;
  transform-origin: top center !important;
}

.pickleballDeck .exactConvertible {
  position: relative;
  flex: 0 0 calc(var(--court-h)*3 + 16px);
  width: calc(var(--court-h)*3 + 16px);
  height: calc(var(--court-w) + 16px);
  align-self: center;
}

.pickleballDeck .exactVerticalSet {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
}

.pickleballDeck .exactCourtGroup {
  position: relative;
  flex: 0 0 var(--court-w);
  width: var(--court-w);
  height: calc(var(--court-h)*3 + 16px);
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 8px !important;
}

.pickleballDeck .exactCourtGroup.waitingGroup {
  justify-content: flex-start
}

.pickleballDeck .exactHorizontalCourt {
  display: block !important;
  flex: 0 0 var(--court-h) !important;
  width: var(--court-w) !important;
  height: var(--court-h) !important;
  min-width: var(--court-w) !important;
  min-height: var(--court-h) !important;
  max-width: var(--court-w) !important;
  max-height: var(--court-h) !important;
  aspect-ratio: 2/1 !important;
}

.pickleballDeck .exactVerticalCourt {
  display: block !important;
  flex: 0 0 var(--court-w) !important;
  width: var(--court-h) !important;
  height: var(--court-w) !important;
  min-width: var(--court-h) !important;
  min-height: var(--court-w) !important;
  max-width: var(--court-h) !important;
  max-height: var(--court-w) !important;
  aspect-ratio: 1/2 !important;
}

.pickleballDeck .exactHorizontalCourt>span {
  left: 12% !important;
  right: 12% !important;
  top: 50% !important;
  bottom: auto !important;
  border-left: 0 !important;
  border-top: 3px dashed #fff !important
}

.pickleballDeck .exactHorizontalCourt:before {
  left: 50% !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  height: auto !important
}

.pickleballDeck .exactHorizontalCourt:after {
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  width: auto !important;
  height: 2px !important
}

.pickleballDeck .exactVerticalCourt>span {
  left: 50% !important;
  top: 12% !important;
  bottom: 12% !important;
  border-left: 3px dashed #fff !important;
  border-top: 0 !important
}

.pickleballDeck .exactVerticalCourt:before {
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 2px !important;
  width: auto !important
}

.pickleballDeck .exactVerticalCourt:after {
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 2px !important;
  height: auto !important
}

.pickleballDeck .exactWaiting {
  flex: 1;
  min-height: 0;
  border: 2px dashed #dbeaf1;
  border-radius: 7px;
  background: linear-gradient(145deg, #ffffffb8, #d9edf6a6);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7px;
  gap: 3px;
  box-shadow: inset 0 0 24px #44b0e51c
}

.pickleballDeck .exactWaiting b {
  font-size: 9px;
  letter-spacing: .1em
}

.pickleballDeck .exactWaiting span {
  font-size: 9px;
  color: #546579
}

.pickleballDeck .demoZoneCaption {
  top: -20px
}

/* more visible demo-like motion without changing geometry */
.pickleballDeck .demoCourt.available {
  animation: pickleCourtBreath 2.7s ease-in-out infinite
}

.pickleballDeck .demoCourt:nth-child(2) {
  animation-delay: -.45s
}

.pickleballDeck .demoCourt:nth-child(3) {
  animation-delay: -.9s
}

.pickleballDeck .demoCourt:nth-child(4) {
  animation-delay: -1.35s
}

.pickleballDeck .demoCourt:hover {
  transform: translateY(-10px) scale(1.045) !important;
  filter: brightness(1.16) !important;
  box-shadow: 0 22px 30px #10203d62 !important
}

@keyframes pickleCourtBreath {

  0%,
  100% {
    filter: brightness(1);
    box-shadow: 0 8px 15px #17204b30
  }

  50% {
    filter: brightness(1.11);
    box-shadow: 0 12px 22px #44b0e545
  }
}

@media(max-width:1100px) {
  .demoDeck.pickleballDeck {
    --court-w: 150px;
    justify-content: flex-start !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    transform: rotateX(42deg) !important
  }
}

@media(max-width:600px) {
  .demoDeck.pickleballDeck {
    --court-w: 135px;
    height: 440px !important;
    min-width: 710px !important;
    gap: 12px !important
  }
}

@media(prefers-reduced-motion:reduce) {
  .pickleballDeck .demoCourt {
    animation: none !important
  }
}


/* v35: compact booking form treatment aligned to the approved demo. */
.bookingDemoGrid {
  grid-template-columns: 475px minmax(0, 1fr) !important;
  gap: 24px !important
}

.bookingFormPanel {
  padding: 24px 26px !important
}

.bookingBlock+.bookingBlock {
  margin-top: 16px !important;
  padding-top: 16px !important
}

.bookingSectionTitle {
  display: none !important
}

.bookingSectionLabel {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 11px;
  padding: 0 1px
}

.bookingSectionLabel b {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sky);
  font-weight: 900
}

.bookingSectionLabel span {
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap
}

.gameChoices {
  gap: 10px !important;
  margin-bottom: 2px
}

.gameChoice {
  position: relative;
  min-height: 72px;
  padding: 13px 72px 13px 14px !important;
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  overflow: hidden
}

.gameChoiceCopy {
  display: grid;
  gap: 3px;
  position: relative;
  z-index: 2
}

.gameChoiceCopy b {
  font-size: 12px !important
}

.gameChoiceCopy small {
  font-size: 9px !important;
  color: var(--muted)
}

.gameChoice.selected .gameChoiceCopy small {
  color: #d9ddf1
}

.gameChoice>.gameIcon {
  position: absolute !important;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 58px !important;
  height: 58px !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important
}

.gameChoice>.gameIcon img {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 5px 8px #0002)
}

.gameChoice[data-game="basketball"]>.gameIcon img {
  width: 58px !important;
  height: 58px !important
}

.gameChoice.selected>.gameIcon {
  background: transparent !important
}

.timeSlots {
  gap: 6px !important;
  margin-bottom: 14px !important
}

.timeSlots button {
  padding: 8px 3px !important
}

.bookingStepperGrid,
.formatPlayGrid,
.addonGridBooking {
  gap: 12px !important
}

.bookingGrandTotal {
  margin-top: 15px !important
}

@media(max-width:1100px) {
  .bookingDemoGrid {
    grid-template-columns: 1fr !important
  }

  .bookingFormPanel {
    max-width: 520px;
    width: 100%;
    margin: 0 auto
  }
}

@media(max-width:520px) {
  .bookingSectionLabel span {
    display: none
  }

  .bookingDemoGrid {
    grid-template-columns: 1fr !important
  }

  .gameChoice {
    padding-right: 66px !important
  }

  .gameChoice>.gameIcon {
    width: 52px !important;
    height: 52px !important
  }

  .gameChoice>.gameIcon img {
    width: 48px !important;
    height: 48px !important
  }
}

/* Booking form spacing refinement: keep +/- controls grouped like approved demo. */
.bookingStepperGrid .stepper {
  grid-template-columns: 34px max-content max-content 34px;
  justify-content: start;
  column-gap: 9px;
}

.bookingStepperGrid .stepper button:last-child {
  margin-left: 2px;
}

.formatPlayGrid {
  margin-top: 16px;
  margin-bottom: 10px;
}

.bookingBlock:has(.formatPlayGrid) {
  padding-bottom: 12px;
}

/* Booking DB behavior additions: preserve frozen v36 layout. */
.timeSlots button:disabled {
  opacity: .42;
  cursor: not-allowed;
  background: #f4f5f7;
  color: #a8afbd;
  border-color: #e4e7ed;
  box-shadow: none !important;
  text-decoration: line-through
}

.demoCourt.occupied,
.exactHorizontalCourt.occupied,
.exactVerticalCourt.occupied {
  background: #3c4652 !important
}

.courtStatusValue.occupied {
  background: #e9edf2;
  color: #3c4652
}

.courtStatusReason {
  font-size: 12px !important;
  color: var(--muted) !important;
  margin: -6px 0 16px !important
}

.courtStatusLegend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 14px;
  padding: 12px 0 17px;
  border-top: 1px solid var(--line);
  margin-top: 3px
}

.courtStatusLegend span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #566078;
  font-weight: 700
}

.courtStatusLegend i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block
}

.courtStatusLegend i.available {
  background: #35b66a
}

.courtStatusLegend i.reserved {
  background: #f47b2b
}

.courtStatusLegend i.occupied {
  background: #3c4652
}

.courtStatusLegend i.unavailable {
  background: #9aa3ad
}

/* Booking status model: Available=green, Reserved=dark gray, Occupied=orange. */
.demoCourt.available,
.exactHorizontalCourt.available,
.exactVerticalCourt.available {
  background: linear-gradient(145deg, #2787b4, #44b0e5) !important;
}

.demoCourt.reserved,
.exactHorizontalCourt.reserved,
.exactVerticalCourt.reserved,
.demoCourt.unavailable,
.exactHorizontalCourt.unavailable,
.exactVerticalCourt.unavailable {
  background: linear-gradient(145deg, #20225f, #272970) !important;
  filter: saturate(.5)
}

.demoCourt.occupied,
.exactHorizontalCourt.occupied,
.exactVerticalCourt.occupied {
  background: linear-gradient(145deg, #e8611e, #ff873e) !important;
  filter: none
}

.demoBasketballFloor.available {
  background-color: #35a963 !important
}

.demoBasketballFloor.reserved,
.demoBasketballFloor.unavailable {
  background-color: #46515c !important
}

.demoBasketballFloor.occupied {
  background-color: #ef6d26 !important
}

.demoCourt.selectedCourt,
.exactHorizontalCourt.selectedCourt,
.exactVerticalCourt.selectedCourt,
.demoBasketballFloor.selectedCourt {
  outline: 4px solid #fff !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #44b0e5, 0 18px 30px #10162c55 !important;
  z-index: 10
}

.courtStatusValue.available {
  background: #e6f8ed;
  color: #24884b
}

.courtStatusValue.reserved,
.courtStatusValue.unavailable {
  background: #e8ebee;
  color: #3c4652
}

.courtStatusValue.occupied {
  background: #fff0e7;
  color: #cf5719
}

.courtStatusLegend {
  grid-template-columns: repeat(3, 1fr)
}

.courtStatusLegend i.available {
  background: #35b66a
}

.courtStatusLegend i.reserved {
  background: #3c4652
}

.courtStatusLegend i.occupied {
  background: #ef6d26
}


/* v39: fit the frozen Pickleball facility completely inside the desktop viewport. */
.demoPerspectiveStage {
  left: 1.2% !important;
  right: 1.2% !important;
}

.demoDeck.pickleballDeck {
  --court-w: clamp(116px, 11.4vw, 158px) !important;
  min-width: 700px !important;
  width: 96% !important;
  max-width: 930px !important;
  gap: clamp(9px, 1.1vw, 17px) !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  justify-content: center !important;
}

@media(max-width:1100px) {
  .demoPerspectiveStage {
    overflow-x: hidden !important;
    justify-content: center !important
  }

  .demoDeck.pickleballDeck {
    --court-w: 132px !important;
    min-width: 680px !important;
    width: 96% !important;
    transform: rotateX(42deg) scale(.96) !important;
    transform-origin: top center !important;
    justify-content: center !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media(max-width:850px) {
  .demoPerspectiveStage {
    overflow-x: auto !important;
    justify-content: flex-start !important
  }

  .demoDeck.pickleballDeck {
    min-width: 710px !important;
    width: 710px !important;
    transform: rotateX(42deg) !important
  }
}

/* Booking transaction layer: preserves the frozen booking page design. */
.bookingTransactionModal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  place-items: center;
  padding: 22px
}

.bookingTransactionModal.open {
  display: grid
}

.bookingTransactionBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 17, 40, .72);
  backdrop-filter: blur(5px)
}

.bookingTransactionCard {
  position: relative;
  width: min(520px, 94vw);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 26px 80px rgba(8, 13, 36, .32);
  z-index: 1
}

.bookingTransactionClose {
  position: absolute;
  right: 15px;
  top: 13px;
  border: 0;
  background: #eef1f7;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer
}

.bookingTransactionCard h3 {
  font-size: 24px;
  margin: 9px 34px 18px 0;
  color: var(--ink)
}

.bookingReviewRows {
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  margin: 16px 0
}

.bookingReviewRows p {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px
}

.bookingReviewRows p:last-child {
  border-bottom: 0
}

.bookingReviewRows span {
  color: var(--muted)
}

.bookingReviewRows b {
  text-align: right
}

.bookingReviewTotal {
  background: #f7f9fc
}

.bookingReviewTotal b {
  font-size: 18px;
  color: var(--navy)
}

.bookingTransactionNote {
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
  margin: 14px 0
}

.bookingTransactionError {
  min-height: 18px;
  color: #b42318;
  font-size: 10px;
  margin: 10px 0 0
}

.bookingPaymentAmount {
  display: grid;
  gap: 4px;
  text-align: center;
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 15px;
  margin: 12px 0
}

.bookingPaymentAmount span,
.bookingPaymentAmount small {
  font-size: 10px;
  color: var(--muted)
}

.bookingPaymentAmount b {
  font-size: 25px;
  color: var(--navy)
}

.bookingMerchantQr {
  display: block;
  width: min(250px, 70vw);
  max-height: 250px;
  object-fit: contain;
  margin: 14px auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: #fff
}

.bookingQrPlaceholder {
  width: min(250px, 70vw);
  aspect-ratio: 1;
  margin: 14px auto;
  border: 2px dashed #cfd5e1;
  border-radius: 14px;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 22px;
  color: var(--muted);
  gap: 8px
}

.bookingQrPlaceholder b {
  font-size: 15px;
  color: var(--navy)
}

.bookingQrPlaceholder span {
  font-size: 10px;
  line-height: 1.45
}

.bookingProofField {
  display: grid;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  margin: 14px 0
}

.bookingProofField input {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  font-size: 10px
}

.bookingSuccess {
  text-align: center
}

.bookingSuccessMark {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  background: #e9f8ef;
  color: #1d9b52;
  font-size: 28px;
  font-weight: 900
}

.bookingPortalLink {
  display: block;
  text-align: center;
  text-decoration: none
}

.bookingTransactionCard .primary.full {
  width: 100%
}

@media(max-width:600px) {
  .bookingTransactionCard {
    padding: 24px 18px
  }

  .bookingReviewRows p {
    font-size: 11px
  }

  .bookingTransactionCard h3 {
    font-size: 21px
  }
}

/* Booking payment verification: method + reference OR proof. */
.bookingPaymentField {
  display: grid;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  margin: 14px 0
}

.bookingPaymentField select,
.bookingPaymentField input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 11px
}

.bookingPaymentVerify {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 14px 12px;
  background: #fbfcfe
}

.bookingPaymentOr {
  text-align: center;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--muted);
  position: relative;
  margin: 0
}

.bookingPaymentOr:before,
.bookingPaymentOr:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--line)
}

.bookingPaymentOr:before {
  left: 0
}

.bookingPaymentOr:after {
  right: 0
}

.bookingPaymentHint {
  font-size: 9px;
  color: var(--muted);
  margin: -4px 0 14px
}

.bookingProofField span,
.bookingPaymentField span {
  font-size: 11px
}

.bookingPaymentField select:disabled {
  opacity: .65;
  background: #f4f6fa
}

/* v59: compact payment modal. */
.bookingTransactionCard:has(.bookingPaymentCompactRow) {
  width: min(620px, 94vw);
  padding: 20px 24px;
  max-height: 94vh
}

.bookingTransactionCard:has(.bookingPaymentCompactRow) h3 {
  margin: 5px 34px 8px 0;
  font-size: 21px
}

.bookingTransactionCard:has(.bookingPaymentCompactRow) .bookingPaymentAmount {
  grid-template-columns: 1fr auto;
  align-items: center;
  text-align: left;
  gap: 2px 14px;
  padding: 9px 12px;
  margin: 7px 0
}

.bookingTransactionCard:has(.bookingPaymentCompactRow) .bookingPaymentAmount b {
  grid-row: 1/span 2;
  grid-column: 2;
  font-size: 22px
}

.bookingTransactionCard:has(.bookingPaymentCompactRow) .bookingPaymentAmount small {
  grid-column: 1
}

.bookingTransactionCard:has(.bookingPaymentCompactRow) .bookingMerchantQr {
  width: min(180px, 48vw);
  max-height: 180px;
  margin: 8px auto;
  padding: 7px
}

.bookingTransactionCard:has(.bookingPaymentCompactRow) .bookingQrPlaceholder {
  width: min(180px, 48vw);
  margin: 8px auto;
  padding: 14px
}

.bookingPaymentInstruction {
  text-align: center;
  margin: 7px 0 9px;
  line-height: 1.35
}

.bookingPaymentCompactRow {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 10px;
  align-items: end
}

.bookingPaymentCompactRow .bookingPaymentField {
  margin: 0;
  gap: 5px
}

.bookingPaymentCompactRow .bookingPaymentField select,
.bookingPaymentCompactRow .bookingPaymentField input {
  min-height: 38px;
  padding: 8px 10px
}

.bookingPaymentOrCompact {
  margin: 7px 0 5px
}

.bookingProofCompact {
  margin: 0 0 8px;
  gap: 5px
}

.bookingProofCompact input {
  padding: 7px 9px
}

.bookingTransactionCard:has(.bookingPaymentCompactRow) .primary.full {
  margin-top: 2px
}

.bookingTransactionCard:has(.bookingPaymentCompactRow) .bookingTransactionError {
  margin-top: 5px;
  min-height: 12px
}

@media(max-width:600px) {
  .bookingTransactionCard:has(.bookingPaymentCompactRow) {
    width: min(94vw, 520px);
    padding: 18px 16px
  }

  .bookingPaymentCompactRow {
    grid-template-columns: 1fr
  }

  .bookingTransactionCard:has(.bookingPaymentCompactRow) .bookingMerchantQr {
    width: min(150px, 42vw);
    max-height: 150px
  }

  .bookingTransactionCard:has(.bookingPaymentCompactRow) .bookingQrPlaceholder {
    width: min(150px, 42vw)
  }
}


/* v112: booking add-on quantity / coaching-duration controls. */
.addonConfigurator {
  align-items: start
}

.addonControlCard {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid #dde5ee;
  border-radius: 11px;
  background: #fbfcfe
}

.addonControlCard>label {
  display: grid;
  gap: 6px
}

.addonMeasure {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding-top: 8px;
  border-top: 1px solid #e8edf3
}

.addonMeasure>span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted)
}

.addonMeasure small {
  font-size: 9px;
  color: var(--muted)
}

.addonMiniStepper {
  display: grid;
  grid-template-columns: 32px 40px 32px;
  gap: 6px;
  align-items: center;
  justify-content: start
}

.addonMiniStepper button {
  height: 31px;
  border: 1px solid #d6e0ea;
  border-radius: 8px;
  background: #fff;
  font-weight: 900;
  cursor: pointer
}

.addonMiniStepper b {
  text-align: center;
  font-size: 12px
}

@media(max-width:520px) {
  .addonGridBooking.addonConfigurator {
    grid-template-columns: 1fr !important
  }
}

/* Wallet payment selector */
.walletPaymentChoices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0
}

.walletPayChoice {
  min-height: 42px;
  border: 1px solid #d8e1ea;
  border-radius: 9px;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer
}

.walletPayChoice.active {
  border-color: #174d7c;
  box-shadow: 0 0 0 1px #174d7c inset
}

.walletPayChoice:disabled {
  opacity: .48;
  cursor: not-allowed
}

.walletCheckoutSummary {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #dce5ed;
  border-radius: 10px;
  background: #f8fafc;
  margin: 12px 0
}

.walletCheckoutSummary span,
.walletCheckoutSummary strong {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10px
}

.walletCheckoutSummary strong {
  padding-top: 8px;
  border-top: 1px solid #dce5ed
}

/* Phase 1B waitlist: fully reserved slots use a subtle accent while remaining selectable. */
.timeSlots button.waitlistSlot {
  position: relative;
  opacity: 1;
  border-color: #d6a545;
  box-shadow: inset 0 -3px 0 #d6a545;
}

.timeSlots button.waitlistSlot:hover,
.timeSlots button.waitlistSlot:focus-visible {
  border-color: #b9892e;
  box-shadow: inset 0 -3px 0 #b9892e, 0 0 0 2px rgba(214, 165, 69, .14);
}

.timeSlots button.waitlistSlot.chosen {
  border-color: #b9892e;
  box-shadow: inset 0 -4px 0 #b9892e, 0 0 0 2px rgba(214, 165, 69, .18);
}

.timeSlots button.waitlistSlot::after {
  content: attr(data-waitlist-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);
  width: 220px;
  max-width: 70vw;
  padding: 8px 9px;
  border-radius: 8px;
  background: #18233f;
  color: #fff;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(7, 13, 35, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 30
}

.timeSlots button.waitlistSlot::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #18233f;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
  z-index: 31
}

.timeSlots button.waitlistSlot:hover::after,
.timeSlots button.waitlistSlot:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0)
}

.timeSlots button.waitlistSlot:hover::before,
.timeSlots button.waitlistSlot:focus-visible::before {
  opacity: 1
}

/* Phase 1B waitlist state distinction: operational/event occupancy is not waitlistable. */
.timeSlots button.blockedSlot,
.timeSlots button.blockedSlot:disabled {
  opacity: .46;
  cursor: not-allowed;
  border-color: #d9dee7;
  background: #f2f4f7;
  color: #8a94a6;
  box-shadow: none;
}

.timeSlots button.blockedSlot:hover,
.timeSlots button.blockedSlot:focus {
  box-shadow: none;
  transform: none
}