@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800;6..12,900&display=swap');

:root { font-family: "Nunito Sans", Arial, sans-serif; color: #172033; background: #fff; }
* { box-sizing: border-box; }
html, body { min-width: 0; height: 100%; margin: 0; overflow: hidden; }
body { min-height: 100svh; }

.landing-preloader { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; background: radial-gradient(circle at 50% 45%, #fff 0%, #fff8f8 42%, #ffe6e8 100%); opacity: 1; visibility: visible; transition: opacity .55s ease, visibility .55s ease; }.landing-page.is-loaded .landing-preloader { opacity: 0; visibility: hidden; pointer-events: none; }.preloader-mark { position: relative; display: grid; place-items: center; width: 210px; height: 210px; }.preloader-orbit { position: absolute; border-radius: 50%; }.orbit-outer { inset: 0; background: conic-gradient(from 10deg, #dd1826, #ff9fa7 30%, transparent 31% 58%, #dd1826 88%, #ff8b95); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); animation: preloader-spin 1.25s linear infinite; }.orbit-inner { inset: 20px; border: 1px dashed rgb(222 24 38 / 44%); animation: preloader-spin 6s linear infinite reverse; }.preloader-glow { position: absolute; width: 135px; height: 135px; border-radius: 50%; background: radial-gradient(circle, rgb(234 29 42 / 18%), transparent 69%); animation: preloader-pulse 1.8s ease-in-out infinite; }.preloader-logo { position: relative; z-index: 1; display: block; width: 162px; height: 54px; overflow: hidden; }.preloader-logo img { display: block; width: 162px; height: auto; transform: translateY(-21%); filter: drop-shadow(0 8px 12px rgb(93 14 22 / 16%)); animation: preloader-logo-float 1.8s ease-in-out infinite; }.preloader-copy { color: #c91624; font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; animation: preloader-copy-pulse 1.8s ease-in-out infinite; }@keyframes preloader-spin { to { transform: rotate(360deg); } } @keyframes preloader-pulse { 50% { transform: scale(1.12); opacity: .55; } } @keyframes preloader-logo-float { 50% { translate: 0 -6px; } } @keyframes preloader-copy-pulse { 50% { opacity: .48; } }

.landing-page { display: block; min-height: 100svh; padding: 0; background: #fff; }
.welcome-screen { position: relative; isolation: isolate; width: 100%; height: 100svh; min-height: 100svh; overflow: hidden; background: radial-gradient(ellipse 68% 46% at 0% 108%, #cf0716 0%, #e62734 43%, rgb(240 67 77 / 68%) 59%, transparent 76%), linear-gradient(116deg, #fff 0%, #fff 32%, #f9d5d7 44%, #ef5c65 57%, #e21c29 70%, #c90716 100%); }
.welcome-screen::before, .welcome-screen::after { position: absolute; z-index: -1; content: ""; pointer-events: none; }
.welcome-screen::before { right: -15%; bottom: -42%; width: 88%; height: 83%; border: clamp(18px, 2.6vw, 40px) solid rgb(255 255 255 / 20%); border-left-width: clamp(8px, 1.1vw, 17px); border-radius: 55% 45% 0 0; transform: rotate(-13deg); box-shadow: 0 -58px 0 -53px rgb(255 255 255 / 26%), 0 -117px 0 -111px rgb(255 255 255 / 16%); }
.welcome-screen::after { right: -12%; bottom: -27%; width: 90%; height: 58%; border-top: 3px solid rgb(255 255 255 / 48%); border-radius: 52% 48% 0 0; transform: rotate(-9deg); box-shadow: 0 -62px 0 -60px rgb(255 255 255 / 27%), 0 -126px 0 -124px rgb(255 255 255 / 15%); }
.welcome-background { position: absolute; z-index: 0; inset: 0; overflow: hidden; }.welcome-header, .welcome-content { position: relative; z-index: 1; }
.welcome-background > span { position: absolute; display: block; pointer-events: none; }
.mist { border-radius: 50%; filter: blur(4px); }
.mist-one { z-index: -2; top: -49%; left: -15%; width: 70%; aspect-ratio: 1; background: radial-gradient(circle, rgb(255 255 255 / 96%) 0 23%, rgb(255 255 255 / 50%) 44%, transparent 69%); }
.mist-two { z-index: -2; top: -38%; right: -19%; width: 78%; aspect-ratio: 1; background: radial-gradient(circle, rgb(255 209 212 / 42%), transparent 62%); }
.dot-field { z-index: -1; top: 9%; right: 24%; width: min(28vw, 390px); height: min(25vw, 330px); opacity: .52; background-image: radial-gradient(rgb(255 255 255 / 80%) 1px, transparent 1.4px); background-size: 7px 7px; border-radius: 56% 44% 62% 38%; transform: rotate(26deg); mask-image: radial-gradient(ellipse, #000 18%, transparent 70%); }
.white-dot-field { z-index: -1; top: -3%; left: -3%; width: min(57vw, 900px); height: min(63vw, 900px); opacity: .34; background-image: radial-gradient(rgb(104 119 137 / 48%) .8px, transparent 1.25px); background-size: 8px 8px; mask-image: radial-gradient(ellipse 100% 100% at 0% 0%, #000 0%, rgb(0 0 0 / 92%) 27%, rgb(0 0 0 / 62%) 49%, rgb(0 0 0 / 25%) 67%, transparent 88%); -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 0%, #000 0%, rgb(0 0 0 / 92%) 27%, rgb(0 0 0 / 62%) 49%, rgb(0 0 0 / 25%) 67%, transparent 88%); }
.court-lines { z-index: -1; right: -8%; bottom: -31%; width: 92%; height: 72%; border: 3px solid rgb(255 255 255 / 38%); border-radius: 52% 48% 0 0; transform: rotate(-12deg); box-shadow: 0 -46px 0 -43px rgb(255 255 255 / 50%), 0 -104px 0 -101px rgb(255 255 255 / 24%); }
.court-lines::before, .court-lines::after { position: absolute; content: ""; left: 9%; right: 1%; height: 2px; background: rgb(255 255 255 / 40%); transform: rotate(22deg); transform-origin: left; }
.court-lines::before { top: 35%; }.court-lines::after { top: 62%; }
.corner-wave { z-index: 0; opacity: .62; filter: blur(1px); }
.wave-top { top: -48%; right: -22%; width: 66%; height: 75%; border-radius: 50%; background: radial-gradient(ellipse at 62% 66%, rgb(142 0 14 / 58%) 0%, rgb(190 5 22 / 36%) 34%, transparent 69%); transform: rotate(14deg); }
.wave-bottom { bottom: -50%; left: -22%; width: 70%; height: 69%; border-radius: 50%; background: radial-gradient(ellipse at 43% 35%, rgb(127 0 13 / 54%) 0%, rgb(188 5 22 / 34%) 37%, transparent 70%); transform: rotate(-15deg); }
.orbit { z-index: -1; border: 1px solid rgb(255 255 255 / 28%); border-radius: 50%; }
.orbit-large { right: 16%; bottom: 17%; width: clamp(220px, 30vw, 480px); aspect-ratio: 1; }
.orbit-small { right: 20%; bottom: 21%; width: clamp(170px, 23vw, 360px); aspect-ratio: 1; border-style: dashed; }

.welcome-header { position: absolute; z-index: 3; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: clamp(23px, 4vw, 54px) clamp(25px, 5.2vw, 78px); }
.welcome-logo { display: block; width: clamp(135px, 14vw, 220px); height: clamp(42px, 4vw, 66px); overflow: hidden; }
.welcome-logo img { display: block; width: 100%; height: auto; transform: translateY(-21%); }
.locale { position: relative; }.locale-button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; color: #6b7380; background: rgb(255 255 255 / 92%); border: 1px solid rgb(225 227 232 / 85%); border-radius: 999px; box-shadow: 0 7px 18px rgb(106 24 31 / 12%); cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; transition: box-shadow .2s ease, transform .2s ease; }.locale-button:hover, .locale-button[aria-expanded="true"] { box-shadow: 0 10px 22px rgb(106 24 31 / 20%); transform: translateY(-1px); }
.locale img { width: 17px; height: 12px; object-fit: cover; border-radius: 2px; }.locale svg { width: 10px; fill: none; stroke: #8d939c; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; transition: transform .2s ease; }.locale-button[aria-expanded="true"] svg { transform: rotate(180deg); }.language-menu { position: absolute; z-index: 5; top: calc(100% + 8px); right: 0; min-width: 132px; padding: 5px; background: rgb(255 255 255 / 96%); border: 1px solid rgb(225 227 232 / 90%); border-radius: 13px; box-shadow: 0 15px 28px rgb(36 28 33 / 17%); }.language-menu[hidden] { display: none; }.language-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; color: #394352; background: transparent; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; text-align: left; }.language-menu button:hover { color: #d51b29; background: #fff2f3; }.language-menu button img { width: 18px; height: 12px; }

.welcome-content { display: grid; grid-template-columns: minmax(320px, .91fr) minmax(410px, 1.09fr); align-items: center; width: min(100%, 1420px); min-height: 100svh; margin: 0 auto; padding: 0 clamp(38px, 6.2vw, 98px) clamp(44px, 6vh, 86px); }
.welcome-copy { z-index: 2; align-self: center; padding-bottom: clamp(0px, 3vh, 38px); }
.landing-intro { transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1); }.email-card { display: none; width: min(100%, 390px); padding: 30px; color: #1c2636; background: linear-gradient(145deg, rgb(255 255 255 / 97%), rgb(255 255 255 / 83%)); border: 1px solid rgb(255 255 255 / 90%); border-radius: 20px; box-shadow: 0 21px 40px rgb(79 22 31 / 22%), inset 0 1px 0 #fff; backdrop-filter: blur(14px); }.landing-page.is-email-stage .landing-intro { display: none; }.landing-page.is-email-stage .welcome-content { display: grid; grid-template-columns: 1fr; place-items: center; width: 100%; max-width: none; min-height: 100svh; padding: 112px 24px 32px; }.landing-page.is-email-stage .welcome-copy { align-self: center; width: min(100%, 560px); padding: 0; translate: none; }.landing-page.is-email-stage .welcome-visual { display: none; }.landing-page.is-email-stage .email-card { display: grid; width: 100%; gap: 20px; padding: 46px; border-radius: 26px; animation: email-card-in .42s cubic-bezier(.2, .9, .2, 1) both; }.landing-page.is-email-stage .email-card-title { margin-bottom: 4px; font-size: 27px; }.landing-page.is-email-stage .email-input-wrap { height: 60px; }.landing-page.is-email-stage .email-input-wrap > svg { width: 20px; margin-left: 19px; }.landing-page.is-email-stage .email-input-wrap input { padding: 0 12px; font-size: 15px; }.landing-page.is-email-stage .email-clear { width: 34px; height: 34px; margin-right: 10px; font-size: 21px; }.landing-page.is-email-stage .email-submit { min-height: 56px; font-size: 15px; }.landing-page.is-email-stage .email-card-hint { font-size: 12px; }.landing-page.is-email-stage .email-status { font-size: 12px; }.email-card-title { margin: 0 0 3px; font-size: 18px; font-weight: 900; line-height: 1.25; }.email-card-title span { color: #e21b28; }.email-input-wrap { position: relative; display: flex; align-items: center; height: 44px; border: 1px solid #f0a5ab; border-radius: 999px; background: #fff; box-shadow: inset 0 1px 3px rgb(34 40 53 / 6%); }.email-input-wrap > svg { width: 16px; margin-left: 14px; fill: none; stroke: #d8222c; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.email-input-wrap input { flex: 1; min-width: 0; height: 100%; padding: 0 8px; color: #283244; border: 0; outline: 0; background: transparent; font: inherit; font-size: 12px; }.email-input-wrap input::placeholder { color: #9ca4af; }.email-clear { width: 27px; height: 27px; margin-right: 7px; padding: 0; color: #d8222c; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font: inherit; font-size: 17px; line-height: 1; }.email-clear:hover { background: #fff0f1; }.email-submit { min-height: 42px; color: #fff; border: 0; border-radius: 999px; background: linear-gradient(100deg, #d70d1a, #ef3440); box-shadow: 0 8px 15px rgb(210 20 31 / 27%); cursor: pointer; font: inherit; font-size: 12px; font-weight: 900; transition: transform .2s ease, box-shadow .2s ease; }.email-submit:hover { transform: translateY(-2px); box-shadow: 0 11px 19px rgb(210 20 31 / 35%); }.email-submit:disabled { cursor: wait; opacity: .7; }.email-card-hint { margin: 0; color: #7a8290; font-size: 10px; line-height: 1.5; }.email-card-hint::before { content: '✦'; margin-right: 5px; color: #e21b28; }.email-status { min-height: 14px; margin: -5px 0 0; color: #cf1623; font-size: 10px; font-weight: 700; }.email-status.is-success { color: #16803b; }@keyframes email-card-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
h1 { max-width: 700px; margin: 0; font-size: clamp(38px, 4vw, 64px); font-weight: 900; letter-spacing: -2.3px; line-height: 1.08; } h1 span { display: block; color: #df202a; white-space: nowrap; text-shadow: 0 2px 8px rgb(255 255 255 / 70%), 0 0 24px rgb(255 255 255 / 74%); }.sport-s { color: #df202a; }
.intro-copy { margin: 24px 0 0; color: #5d6672; font-size: clamp(14px, 1.25vw, 18px); font-weight: 600; line-height: 1.65; }
.intro-booking-copy { display:flex; align-items:flex-start; gap:10px; }
.intro-booking-copy > i { flex:none; margin-top:.2em; color:#df202a; font-size:1.45em; }
.welcome-visual { position: relative; align-self: end; height: clamp(350px, 59vh, 590px); margin-bottom: -4%; }
.welcome-visual img { position: absolute; z-index: 2; right: -8%; bottom: -8%; width: min(116%, 670px); filter: drop-shadow(0 22px 20px rgb(96 19 25 / 25%)); }
.visual-glow { position: absolute; right: 12%; bottom: 11%; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 58%), transparent 70%); }
.next-button { z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 176px; margin-top: 28px; padding: 15px 25px; color: #fff; background: linear-gradient(105deg, #111722, #2a3342); border-radius: 999px; box-shadow: 0 12px 22px rgb(15 23 35 / 36%); font-size: 14px; font-weight: 900; text-decoration: none; transform-origin: center; will-change: transform, box-shadow; transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease, background .32s ease, filter .32s ease; }.next-button span { font-size: 19px; line-height: 12px; transition: translate .32s cubic-bezier(.2, .8, .2, 1); }.next-button:hover { animation: none; background: linear-gradient(105deg, #080d15, #222d3d); box-shadow: 0 19px 34px rgb(15 23 35 / 48%), 0 0 0 5px rgb(255 255 255 / 14%); filter: brightness(1.08); transform: translateY(-4px) scale(1.045); }.next-button:hover span { translate: 4px 0; }.next-button:active { animation: none; box-shadow: 0 7px 14px rgb(15 23 35 / 34%); filter: brightness(.94); transform: translateY(1px) scale(.955); transition-duration: .1s; }.next-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 700px) and (orientation: portrait), (max-height: 620px) and (orientation: portrait) {
  .landing-page { display: block; padding: 0; background: #fff; }.welcome-screen { min-height: 100svh; border-radius: 0; }.welcome-header { padding: 21px 19px 0; }.welcome-logo { width: 134px; height: 41px; }.locale-button { min-height: 34px; padding: 0 11px; font-size: 11px; }
  .welcome-content { display: flex; flex-direction: column; align-items: stretch; min-height: 100svh; padding: 118px 32px 33px; }.welcome-copy { padding: 0; } h1 { max-width: 100%; font-size: clamp(30px, 8.3vw, 34px); letter-spacing: -1.5px; line-height: 1.08; } h1 span { white-space: normal; }.intro-copy { margin-top: 18px; font-size: 13px; line-height: 1.6; }.email-card { width: min(100%, 330px); padding: 24px; }.email-card-title { font-size: 17px; }
  .welcome-visual { flex: 1; min-height: 235px; height: auto; margin: -4px -32px -2px; overflow: visible; }.welcome-visual img { right: -27%; bottom: -9%; width: min(109vw, 475px); filter: drop-shadow(0 18px 16px rgb(96 19 25 / 28%)); }.visual-glow { right: 2%; bottom: 4%; width: 68%; }.next-button { align-self: center; min-width: 190px; padding: 15px 26px; font-size: 14px; }
  .dot-field { top: 14%; right: -6%; width: 71vw; height: 60vw; }.white-dot-field { top: -4%; left: -18%; width: 128vw; height: 130vw; opacity: .28; }.mist-one { top: -28%; left: -72%; width: 150%; }.mist-two { top: 14%; right: -60%; width: 145%; }.court-lines { right: -56%; bottom: -18%; width: 185%; height: 57%; }.orbit-large { right: -3%; bottom: 19%; width: 68vw; }.orbit-small { right: 4%; bottom: 23%; width: 51vw; }
  .wave-top { top: -31%; right: -47%; width: 116%; height: 36%; }.wave-bottom { bottom: -27%; left: -54%; width: 131%; height: 38%; }
  .welcome-screen::before { right: -56%; bottom: -30%; width: 190%; height: 55%; }.welcome-screen::after { right: -55%; bottom: -17%; width: 188%; height: 43%; }
}

@media (max-width: 420px) { .preloader-mark { width: 180px; height: 180px; }.preloader-logo { width: 142px; height: 48px; }.preloader-logo img { width: 142px; } }

@media (max-height: 600px) and (orientation: landscape) {
  .welcome-header { padding: 14px 28px 0; }.welcome-logo { width: 136px; height: 42px; }.locale-button { min-height: 32px; padding: 0 10px; }
  .welcome-content { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); min-height: 100svh; padding: 0 clamp(22px, 5vw, 60px) 14px; }.welcome-copy { padding-top: 30px; } h1 { font-size: clamp(23px, 4.5vw, 40px); letter-spacing: -1.4px; }.intro-copy { margin-top: 13px; font-size: clamp(11px, 1.7vw, 14px); }.next-button { min-width: 155px; padding: 11px 20px; font-size: 12px; }
  .welcome-visual { height: min(74vh, 330px); margin-bottom: -7%; }.welcome-visual img { right: -4%; bottom: -15%; width: min(104%, 500px); }
}

@media (min-width: 480px) and (max-width: 1024px) and (orientation: portrait) {
  .welcome-content { display: flex; flex-direction: column; align-items: stretch; min-height: 100svh; padding: clamp(138px, 16vh, 178px) clamp(46px, 8vw, 76px) 42px; }.welcome-copy { padding: 0; translate: clamp(-64px, -6vw, -24px) 0; } h1 { max-width: 670px; font-size: clamp(54px, 8.4vw, 68px); letter-spacing: -2.5px; }.intro-copy { margin-top: 25px; font-size: 18px; line-height: 1.65; }.next-button { min-width: 224px; margin-top: 34px; padding: 18px 32px; font-size: 17px; }.welcome-visual { flex: 1; min-height: 320px; height: auto; margin: -10px -76px -4px; overflow: visible; }.welcome-visual img { right: -23%; bottom: -8%; width: min(90vw, 620px); }.visual-glow { right: 3%; bottom: 4%; width: 62%; }
}

@media (max-width: 370px) and (max-height: 680px) { .welcome-content { padding-top: 31px; } .welcome-visual { min-height: 160px; } h1 { font-size: 30px; } }
@media (min-width: 1025px) and (max-height: 670px) { .welcome-header { padding-top: 22px; padding-bottom: 0; }.welcome-content { min-height: calc(100svh - 82px); padding-bottom: 30px; }.welcome-visual { height: 340px; }.welcome-copy { padding-bottom: 0; } }
@media (max-width: 700px) and (orientation: portrait) { .welcome-visual img { position: fixed; z-index: 2; right: -28vw !important; bottom: -13vw !important; width: 115vw !important; transform: none !important; animation: portrait-shuttle-float 4.6s ease-in-out infinite !important; pointer-events: none; } }
@media (max-width: 700px) and (orientation: portrait) { .landing-page.is-email-stage .welcome-content { padding: 92px 20px 24px; }.landing-page.is-email-stage .welcome-copy { width: 100%; max-width: none; }.landing-page.is-email-stage .email-card { width: calc(100vw - 40px); max-width: 420px; padding: 28px 24px; border-radius: 24px; gap: 16px; }.landing-page.is-email-stage .email-card-title { font-size: clamp(23px, 6.8vw, 27px); }.landing-page.is-email-stage .email-input-wrap { height: 58px; }.landing-page.is-email-stage .email-submit { min-height: 54px; } }
@media (prefers-reduced-motion: no-preference) { .landing-page.is-loaded:not(.is-email-stage) .landing-intro h1 { animation: intro-title-in .7s .12s cubic-bezier(.16, 1, .3, 1) both; }.landing-page.is-loaded:not(.is-email-stage) .landing-intro .intro-copy { animation: intro-copy-in .6s .28s cubic-bezier(.16, 1, .3, 1) both; }.landing-page.is-loaded:not(.is-email-stage) .landing-intro .next-button { animation: intro-button-in .5s .42s ease-out both, button-pulse 2.2s 1s cubic-bezier(.45, 0, .2, 1) infinite; } } @keyframes intro-title-in { from { opacity: 0; transform: translateY(26px); filter: blur(7px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes intro-copy-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } } @keyframes intro-button-in { from { opacity: 0; } to { opacity: 1; } }
.landing-page.is-leaving-intro .landing-intro { pointer-events: none; }.landing-page.is-leaving-intro .title-first i, .landing-page.is-leaving-intro .title-emphasis i { display: inline-block; animation: word-fall .3s cubic-bezier(.45, 0, .9, .35) both; }.landing-page.is-leaving-intro .title-first i:nth-child(2) { animation-delay: .05s; }.landing-page.is-leaving-intro .title-first i:nth-child(3) { animation-delay: .10s; }.landing-page.is-leaving-intro .title-emphasis i:nth-child(1) { animation-delay: .15s; }.landing-page.is-leaving-intro .title-emphasis i:nth-child(2) { animation-delay: .20s; }.landing-page.is-leaving-intro .title-emphasis i:nth-child(3) { animation-delay: .25s; }.landing-page.is-leaving-intro .intro-copy { animation: word-fall .29s .30s cubic-bezier(.45, 0, .9, .35) both; }.landing-page.is-loaded:not(.is-email-stage).is-leaving-intro .landing-intro .next-button { animation: word-fall .28s .37s cubic-bezier(.45, 0, .9, .35) both !important; }.landing-page.is-leaving-intro .welcome-visual img { animation: shuttle-exit .52s .08s cubic-bezier(.42, 0, .82, .32) both !important; }.landing-page.is-email-stage .email-card { animation: email-card-drop .52s cubic-bezier(.2, 1.35, .35, 1) both; }h1 .title-first { color: #172033; text-shadow: none; }h1 .title-emphasis { color: #df202a; }h1 .title-first i, h1 .title-emphasis i { display: inline-block; font-size: 1em; font-style: normal; }@keyframes word-fall { to { opacity: 0; transform: translateY(90px) rotate(5deg); filter: blur(3px); } }@keyframes shuttle-exit { to { opacity: 0; translate: 72px 150px; rotate: 12deg; } }@keyframes email-card-drop { 0% { opacity: 0; transform: translateY(-92px) scale(.92); } 68% { opacity: 1; transform: translateY(10px) scale(1.015); } 84% { transform: translateY(-4px) scale(.995); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.otp-card, .choice-card { display: none; }.stage-copy { margin: -8px 0 0; color: #717b89; font-size: 13px; line-height: 1.55; }.landing-page.is-otp-stage .landing-intro, .landing-page.is-services-stage .landing-intro, .landing-page.is-otp-stage .email-card, .landing-page.is-services-stage .email-card { display: none; }.landing-page:is(.is-otp-stage, .is-services-stage) .welcome-content { display: grid; grid-template-columns: 1fr; place-items: center; width: 100%; max-width: none; min-height: 100svh; padding: 112px 24px 96px; }.landing-page:is(.is-otp-stage, .is-services-stage) .welcome-copy { align-self: center; width: min(100%, 560px); padding: 0; translate: none; }.landing-page:is(.is-otp-stage, .is-services-stage) .welcome-visual { display: none; }.landing-page.is-otp-stage .otp-card, .landing-page.is-services-stage .choice-card { display: grid; width: 100%; gap: 20px; padding: 46px; background: linear-gradient(145deg, rgb(255 255 255 / 97%), rgb(255 255 255 / 83%)); border: 1px solid rgb(255 255 255 / 90%); border-radius: 26px; box-shadow: 0 21px 40px rgb(79 22 31 / 22%); backdrop-filter: blur(14px); animation: email-card-drop .52s cubic-bezier(.2, 1.35, .35, 1) both; }.landing-page.is-otp-stage .email-card-title, .landing-page.is-services-stage .email-card-title { font-size: 27px; }.otp-inputs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }.otp-inputs input { width: 100%; height: 56px; color: #d81825; border: 1px solid #f0a5ab; border-radius: 13px; background: #fff; outline-color: #df202a; font: 900 24px/1 "Nunito Sans", sans-serif; text-align: center; }.service-option { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 2px 12px; width: 100%; padding: 15px; color: #283244; border: 1px solid #f2c5c9; border-radius: 16px; background: #fff; cursor: pointer; font: inherit; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }.service-option > span { grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; color: #fff; background: #df202a; border-radius: 12px; font-size: 20px; }.service-option strong { font-size: 15px; }.service-option small { color: #78818d; font-size: 12px; }.service-option:hover, .service-option.is-selected { border-color: #df202a; box-shadow: 0 10px 20px rgb(218 25 37 / 13%); transform: translateY(-2px); }.stage-flow { position: fixed; z-index: 30; right: 50%; bottom: 18px; display: flex; align-items: center; gap: clamp(7px, 1.2vw, 20px); width: fit-content; max-width: calc(100vw - 32px); padding: 8px 18px; overflow-x: auto; color: #fff; background: linear-gradient(100deg, rgb(104 4 13 / 92%), rgb(194 10 24 / 94%)); border: 1px solid rgb(255 255 255 / 68%); border-radius: 16px; box-shadow: 0 13px 28px rgb(103 4 12 / 28%); backdrop-filter: blur(12px); transform: translateX(50%); scrollbar-width: none; }.stage-flow::-webkit-scrollbar { display: none; }.stage-flow button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; padding: 5px 7px; color: rgb(255 255 255 / 78%); border: 0; background: transparent; cursor: pointer; font: 800 14px/1 "Nunito Sans", sans-serif; white-space: nowrap; transition: color .2s ease, transform .2s ease; }.stage-flow button:hover, .stage-flow button[aria-current="step"] { color: #fff; transform: translateY(-1px); }.flow-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgb(255 255 255 / 74%); border-radius: 50%; font-size: 17px; }.stage-flow button[aria-current="step"] .flow-icon { background: rgb(255 255 255 / 20%); box-shadow: 0 0 0 4px rgb(255 255 255 / 10%); }.flow-arrow { flex: 0 0 auto; color: rgb(255 255 255 / 82%); font-size: 24px; }@media (max-width: 700px) and (orientation: portrait) { .stage-flow { bottom: 10px; max-width: calc(100vw - 20px); padding: 6px 10px; border-radius: 14px; }.stage-flow button { gap: 5px; padding: 4px; font-size: 11px; }.flow-icon { width: 28px; height: 28px; font-size: 14px; }.flow-arrow { font-size: 16px; }.landing-page:is(.is-otp-stage, .is-services-stage) .welcome-content { padding: 92px 20px 88px; }.landing-page.is-otp-stage .otp-card, .landing-page.is-services-stage .choice-card { width: calc(100vw - 40px); padding: 28px 24px; gap: 16px; }.landing-page.is-otp-stage .email-card-title, .landing-page.is-services-stage .email-card-title { font-size: clamp(23px, 6.8vw, 27px); }.otp-inputs { gap: 6px; }.otp-inputs input { height: 46px; font-size: 20px; } }
@media (max-width: 700px) and (orientation: portrait) { .stage-flow button { gap: 0; padding: 4px; }.stage-flow button > span:not(.flow-icon) { display: none; }.flow-icon { position: relative; width: 30px; height: 30px; font-size: 15px; }.stage-flow button.is-complete .flow-icon { color: #fff; background: rgb(255 255 255 / 18%); }.stage-flow button.is-complete .flow-icon::after { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 12px; height: 12px; content: '✓'; color: #bf1020; background: #fff; border-radius: 50%; font-size: 8px; font-weight: 900; } }
.stage-flow { isolation: isolate; overflow: hidden; background: linear-gradient(118deg, rgb(255 255 255 / 43%), rgb(255 231 233 / 22%) 36%, rgb(192 9 26 / 30%) 100%); border-color: rgb(255 255 255 / 82%); border-top-color: #fff; box-shadow: 0 19px 38px rgb(103 4 12 / 31%), 0 3px 8px rgb(255 255 255 / 23%) inset, 0 -2px 8px rgb(105 0 12 / 18%) inset; backdrop-filter: blur(34px) saturate(185%) brightness(1.08); -webkit-backdrop-filter: blur(34px) saturate(185%) brightness(1.08); }.stage-flow::before { position: absolute; z-index: 0; inset: 1px; content: ''; border-radius: inherit; background: linear-gradient(110deg, rgb(255 255 255 / 44%) 0%, rgb(255 255 255 / 12%) 32%, transparent 55%); pointer-events: none; }.stage-flow button, .stage-flow .flow-arrow { position: relative; z-index: 1; }.stage-flow button[aria-current="step"] { color: #fff; background: linear-gradient(145deg, rgb(255 255 255 / 34%), rgb(255 255 255 / 12%)); border: 1px solid rgb(255 255 255 / 72%); border-radius: 12px; box-shadow: 0 7px 15px rgb(95 0 11 / 18%), inset 0 1px 1px rgb(255 255 255 / 65%); }.stage-flow button[aria-current="step"] .flow-icon { background: rgb(255 255 255 / 36%); box-shadow: 0 0 0 5px rgb(255 255 255 / 18%), inset 0 1px 2px rgb(255 255 255 / 75%); }.stage-flow button[aria-current="step"]::after { position: absolute; right: 50%; bottom: -8px; width: 22px; height: 4px; content: ''; background: #fff; border-radius: 999px; box-shadow: 0 0 12px 3px rgb(255 255 255 / 72%); transform: translateX(50%); }@media (max-width: 700px) and (orientation: portrait) { .stage-flow button { gap: 0; padding: 4px; border-radius: 50%; }.stage-flow button > span:not(.flow-icon) { display: none; }.flow-icon { position: relative; width: 30px; height: 30px; font-size: 15px; }.stage-flow button[aria-current="step"] { border-radius: 50%; }.stage-flow button[aria-current="step"]::after { bottom: -6px; width: 16px; height: 3px; }.stage-flow button.is-complete .flow-icon { color: #fff; background: rgb(255 255 255 / 18%); }.stage-flow button.is-complete .flow-icon::after { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 12px; height: 12px; content: '✓'; color: #bf1020; background: #fff; border-radius: 50%; font-size: 8px; font-weight: 900; } }
.stage-flow { background: linear-gradient(118deg, rgb(255 255 255 / 16%), rgb(246 118 130 / 14%) 36%, rgb(135 0 16 / 42%) 100%); border-color: rgb(255 255 255 / 60%); border-top-color: rgb(255 255 255 / 78%); box-shadow: 0 19px 38px rgb(103 4 12 / 31%), 0 3px 8px rgb(255 255 255 / 14%) inset, 0 -2px 8px rgb(105 0 12 / 25%) inset; backdrop-filter: blur(34px) saturate(185%) brightness(1.03); -webkit-backdrop-filter: blur(34px) saturate(185%) brightness(1.03); }.stage-flow::before { background: linear-gradient(110deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 5%) 32%, transparent 55%); }.stage-flow button:disabled { color: rgb(255 255 255 / 38%); cursor: not-allowed; }.stage-flow button:disabled .flow-icon { border-color: rgb(255 255 255 / 33%); }.stage-flow button[aria-current="step"] { background: linear-gradient(145deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 6%)); border-color: rgb(255 255 255 / 56%); box-shadow: 0 7px 15px rgb(95 0 11 / 18%), inset 0 1px 1px rgb(255 255 255 / 38%); }.stage-flow button[aria-current="step"] .flow-icon { background: rgb(255 255 255 / 22%); box-shadow: 0 0 0 5px rgb(255 255 255 / 10%), inset 0 1px 2px rgb(255 255 255 / 48%); }.stage-flow button[aria-current="step"]::after { box-shadow: 0 0 12px 3px rgb(255 255 255 / 48%); }
.stage-flow { background: linear-gradient(118deg, rgb(255 255 255 / 8%), rgb(246 118 130 / 7%) 36%, rgb(110 0 13 / 18%) 100%); border-width: 1px; border-color: rgb(255 255 255 / 34%); border-top-color: rgb(255 255 255 / 46%); box-shadow: 0 16px 32px rgb(103 4 12 / 18%), 0 1px 3px rgb(255 255 255 / 16%) inset, 0 -1px 3px rgb(105 0 12 / 14%) inset; backdrop-filter: blur(30px) saturate(175%); -webkit-backdrop-filter: blur(30px) saturate(175%); }.stage-flow::before { background: linear-gradient(110deg, rgb(255 255 255 / 9%) 0%, transparent 42%); }.stage-flow button[aria-current="step"] { background: linear-gradient(145deg, rgb(255 255 255 / 14%), rgb(255 255 255 / 3%)); border-color: rgb(255 255 255 / 37%); }.stage-flow button[aria-current="step"] .flow-icon { background: rgb(255 255 255 / 14%); }
@media (prefers-reduced-motion: no-preference) { .landing-page.is-loaded:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage) .welcome-visual img { animation: shuttle-enter .82s .18s cubic-bezier(.16, 1, .3, 1) both, shuttle-float 5s 1s ease-in-out infinite; } }@media (max-width: 700px) and (orientation: portrait) and (prefers-reduced-motion: no-preference) { .landing-page.is-loaded:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage) .welcome-visual img { animation: shuttle-enter .82s .18s cubic-bezier(.16, 1, .3, 1) both, portrait-shuttle-float 4.6s 1s ease-in-out infinite !important; } }@keyframes shuttle-enter { from { opacity: 0; translate: 90px 0; scale: .88; filter: blur(8px) drop-shadow(0 22px 20px rgb(96 19 25 / 0%)); } 72% { opacity: 1; translate: -9px 0; scale: 1.025; filter: blur(0) drop-shadow(0 22px 20px rgb(96 19 25 / 25%)); } to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0) drop-shadow(0 22px 20px rgb(96 19 25 / 25%)); } }
.stage-flow { background: rgb(117 8 21 / 26%); border-color: rgb(255 255 255 / 48%); border-top-color: rgb(255 255 255 / 60%); box-shadow: 0 14px 30px rgb(83 0 11 / 24%), inset 0 1px 0 rgb(255 255 255 / 28%); backdrop-filter: blur(22px) saturate(135%); -webkit-backdrop-filter: blur(22px) saturate(135%); }.stage-flow::before { display: none; }.stage-flow button[aria-current="step"] { background: rgb(255 255 255 / 16%); border-color: rgb(255 255 255 / 46%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 32%); }.stage-flow button[aria-current="step"] .flow-icon { background: rgb(255 255 255 / 18%); }
.landing-page:is(.is-email-stage, .is-otp-stage, .is-services-stage) .welcome-copy { translate: 0 -30px; }.stage-flow button[aria-current="step"] { border-color: rgb(255 255 255 / 90%); box-shadow: 0 0 0 2px rgb(255 255 255 / 30%), inset 0 1px 0 rgb(255 255 255 / 48%), 0 8px 16px rgb(80 0 10 / 25%); }.stage-flow button[aria-current="step"] .flow-icon { color: #c41020; background: #fff; border-color: #fff; box-shadow: 0 0 0 5px rgb(255 255 255 / 16%); }@media (max-width: 700px) and (orientation: portrait) { .landing-page:is(.is-email-stage, .is-otp-stage, .is-services-stage) .welcome-copy { translate: 0 -18px; } }
.email-clear { position: relative; display: grid; place-items: center; font: inherit; }.email-clear svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }.email-clear::after { position: absolute; right: -12px; bottom: calc(100% + 8px); padding: 5px 7px; content: attr(data-tooltip); color: #fff; background: #252e3b; border-radius: 6px; box-shadow: 0 5px 12px rgb(24 31 42 / 18%); font: 700 10px/1 "Nunito Sans", sans-serif; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .18s ease, transform .18s ease; white-space: nowrap; }.email-clear:hover::after, .email-clear:focus-visible::after { opacity: 1; transform: translateY(0); }.flow-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.stage-flow button.is-complete { color: #fff; }.stage-flow button.is-complete .flow-icon { color: #fff; border-color: rgb(255 255 255 / 82%); background: rgb(255 255 255 / 12%); box-shadow: inset 0 1px 1px rgb(255 255 255 / 26%); }@media (max-width: 700px) and (orientation: portrait) { .stage-flow button.is-complete .flow-icon::after { display: none; }.stage-flow button[aria-current="step"] { border-radius: 9px; }.stage-flow button[aria-current="step"] .flow-icon { border-radius: 7px; } }
.stage-flow button.is-complete .flow-icon { color: #c41020; border-color: #fff; background: #fff; box-shadow: inset 0 1px 1px rgb(255 255 255 / 72%); }
.landing-page.is-email-stage .email-card { position: relative; overflow: visible; }.email-shuttle { position: absolute; z-index: 2; top: -38px; right: -30px; width: 180px; pointer-events: none; filter: drop-shadow(0 10px 9px rgb(80 16 22 / 22%)); }.landing-page.is-email-stage .email-card > :not(.email-shuttle) { position: relative; z-index: 3; }.landing-page.is-email-stage .email-card-title { padding-right: 88px; }@media (prefers-reduced-motion: no-preference) { .landing-page.is-email-stage .email-shuttle { animation: email-shuttle-fly .58s .56s cubic-bezier(.16, 1, .3, 1) both; } }@keyframes email-shuttle-fly { from { opacity: 0; transform: translate3d(190px, -90px, 0) scale(.72); filter: blur(5px) drop-shadow(0 10px 9px rgb(80 16 22 / 0%)); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0) drop-shadow(0 10px 9px rgb(80 16 22 / 22%)); } }@media (max-width: 700px) and (orientation: portrait) { .email-shuttle { top: -28px; right: -27px; width: 142px; }.landing-page.is-email-stage .email-card-title { padding-right: 66px; } }
.stage-flow { color: rgb(255 255 255 / 82%); background: rgb(12 16 24 / 46%); border-color: rgb(255 255 255 / 25%); border-top-color: rgb(255 255 255 / 38%); box-shadow: 0 16px 34px rgb(10 12 18 / 38%), inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 -1px 0 rgb(0 0 0 / 28%); backdrop-filter: blur(28px) saturate(135%); -webkit-backdrop-filter: blur(28px) saturate(135%); }.stage-flow button.is-complete .flow-icon { color: #141b26; background: rgb(255 255 255 / 92%); border-color: rgb(255 255 255 / 96%); }.stage-flow button[aria-current="step"] { color: #fff; background: rgb(255 255 255 / 16%); border-color: rgb(255 255 255 / 40%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 21%), 0 7px 16px rgb(0 0 0 / 24%); }.stage-flow button[aria-current="step"] .flow-icon { color: #141b26; background: #fff; border-color: #fff; box-shadow: 0 0 0 5px rgb(255 255 255 / 10%); }
.email-shuttle { right: -52px; }.stage-flow { border-radius: 28px; }@media (max-width: 700px) and (orientation: portrait) { .email-shuttle { right: -43px; }.stage-flow { border-radius: 22px; } }
.email-card .email-submit { background: linear-gradient(105deg, #111722, #2a3342); box-shadow: 0 12px 22px rgb(15 23 35 / 36%); transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease, background .32s ease; }.email-card .email-submit:hover { animation: none; background: linear-gradient(105deg, #080d15, #222d3d); box-shadow: 0 19px 34px rgb(15 23 35 / 48%); transform: translateY(-3px) scale(1.035); }.email-card .email-submit:active { animation: none; box-shadow: 0 7px 14px rgb(15 23 35 / 34%); transform: translateY(1px) scale(.97); }@media (prefers-reduced-motion: no-preference) { .email-card .email-submit { animation: button-pulse 2.2s .7s cubic-bezier(.45, 0, .2, 1) infinite; } }
.email-card .email-submit.is-loading { display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: wait; animation: none; opacity: .92; }.button-spinner { width: 15px; height: 15px; border: 2px solid rgb(255 255 255 / 32%); border-top-color: #fff; border-radius: 50%; animation: button-spin .7s linear infinite; }@keyframes button-spin { to { transform: rotate(360deg); } }
.stage-flow { background: rgb(5 8 13 / 68%); border-color: rgb(255 255 255 / 18%); border-top-color: rgb(255 255 255 / 25%); box-shadow: 0 16px 34px rgb(3 5 9 / 46%), inset 0 1px 0 rgb(255 255 255 / 9%); }.flow-icon { border-color: rgb(255 255 255 / 42%); }.stage-flow button[aria-current="step"] { border-color: rgb(255 255 255 / 24%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 7px 16px rgb(0 0 0 / 30%); }.stage-flow button[aria-current="step"]::after { opacity: .7; }
.email-status:empty { display: none; }.landing-page.is-email-stage .email-status:not(:empty) { display:flex; align-items:center; gap:9px; min-height:0; margin:-7px 0 0; padding:10px 13px; color:#a41523; border:1px solid rgb(216 27 42 / 14%); border-radius:14px; background:linear-gradient(135deg,rgb(255 246 247 / 96%),rgb(255 237 240 / 92%)); box-shadow:0 10px 22px rgb(119 19 31 / 8%); font-size:12px; font-weight:850; line-height:1.35; animation:email-status-pop .34s cubic-bezier(.2,.9,.24,1.18) both; }.landing-page.is-email-stage .email-status:not(:empty)::before { content:""; flex:0 0 auto; width:18px; height:18px; border-radius:50%; background:#d71929; box-shadow:inset 0 0 0 5px rgb(255 255 255 / 86%),0 6px 13px rgb(215 25 41 / 24%); }.landing-page.is-email-stage .email-status.is-success:not(:empty) { color:#106c34; border-color:rgb(22 128 59 / 18%); background:linear-gradient(135deg,rgb(240 255 247 / 98%),rgb(226 250 237 / 94%)); box-shadow:0 10px 22px rgb(16 108 52 / 10%); }.landing-page.is-email-stage .email-status.is-success:not(:empty)::before { background:#16803b; box-shadow:inset 0 0 0 5px rgb(255 255 255 / 86%),0 6px 13px rgb(22 128 59 / 24%); }
.stage-flow { background: rgb(3 5 9 / 82%); border-color: rgb(255 255 255 / 15%); border-top-color: rgb(255 255 255 / 22%); box-shadow: 0 16px 34px rgb(0 0 0 / 52%), inset 0 1px 0 rgb(255 255 255 / 7%); }
.landing-page.is-otp-stage .otp-card { position: relative; overflow: visible; }.otp-shuttle { position: absolute; z-index: 2; top: -38px; right: -52px; width: 180px; pointer-events: none; filter: drop-shadow(0 10px 9px rgb(80 16 22 / 22%)); }.landing-page.is-otp-stage .otp-card > :not(.otp-shuttle) { position: relative; z-index: 3; }.landing-page.is-otp-stage .otp-card .email-card-title { padding-right: 88px; }.otp-countdown { margin: -9px 0 -2px; color: #be1825; font-size: 12px; font-weight: 800; letter-spacing: .01em; }.landing-page:is(.is-email-stage, .is-otp-stage, .is-services-stage) :is(.email-card, .otp-card, .choice-card) { transform-style: preserve-3d; animation: stage-card-flip .62s cubic-bezier(.16, .9, .28, 1.05) both; }@keyframes stage-card-flip { from { opacity: 0; transform: perspective(1200px) rotateY(-68deg) translateX(-42px) scale(.93); filter: blur(3px); } 70% { opacity: 1; transform: perspective(1200px) rotateY(5deg) translateX(3px) scale(1.008); filter: blur(0); } to { opacity: 1; transform: perspective(1200px) rotateY(0) translateX(0) scale(1); filter: blur(0); } }@media (prefers-reduced-motion: no-preference) { .landing-page.is-otp-stage .otp-shuttle { animation: email-shuttle-fly .58s .4s cubic-bezier(.16, 1, .3, 1) both; } }@media (max-width: 700px) and (orientation: portrait) { .otp-shuttle { top: -28px; right: -43px; width: 142px; }.landing-page.is-otp-stage .otp-card .email-card-title { padding-right: 66px; } }
.landing-page.is-email-stage .email-card :is(.email-card-title, .email-input-wrap, .email-status, .email-submit, .email-card-hint), .landing-page.is-otp-stage .otp-card :is(.email-card-title, .stage-copy, .otp-countdown, .otp-inputs, .email-submit, .email-status), .landing-page.is-services-stage .choice-card > :not(.email-card-title) { animation: card-content-drop .34s cubic-bezier(.22, .9, .3, 1.08) both; }.landing-page:is(.is-email-stage, .is-otp-stage, .is-services-stage) .email-card-title { animation-delay: .14s; }.landing-page.is-email-stage .email-input-wrap, .landing-page.is-otp-stage .stage-copy { animation-delay: .21s; }.landing-page.is-email-stage .email-status, .landing-page.is-otp-stage .otp-countdown { animation-delay: .27s; }.landing-page.is-otp-stage .otp-inputs, .landing-page.is-email-stage .email-submit { animation-delay: .32s; }.landing-page.is-otp-stage .email-submit, .landing-page.is-email-stage .email-card-hint { animation-delay: .39s; }.landing-page.is-otp-stage .email-status { animation-delay: .45s; }@keyframes card-content-drop { from { opacity: 0; transform: translateY(-18px); filter: blur(2px); } 72% { opacity: 1; transform: translateY(3px); filter: blur(0); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.landing-page.is-leaving-intro .landing-intro .intro-copy { animation: word-fall .34s .32s cubic-bezier(.35, 0, .86, .32) both !important; }.landing-page.is-leaving-intro .landing-intro .next-button { animation: word-fall .32s .48s cubic-bezier(.35, 0, .86, .32) both !important; }.landing-page.is-email-stage .email-card .email-submit:not(.is-loading), .landing-page.is-otp-stage .otp-card .email-submit:not(.is-loading) { animation: card-content-drop .34s .39s cubic-bezier(.22, .9, .3, 1.08) both, button-pulse 2.2s 1.1s cubic-bezier(.45, 0, .2, 1) infinite; }
.email-input-wrap:focus-within, .email-input-wrap:has(input[readonly]) { background: #fff; }.email-input-wrap input, .email-input-wrap input:focus, .email-input-wrap input[readonly] { color: #283244; background: #fff; }.email-input-wrap input:-webkit-autofill, .email-input-wrap input:-webkit-autofill:hover, .email-input-wrap input:-webkit-autofill:focus, .email-input-wrap input:-webkit-autofill:active { -webkit-text-fill-color: #283244; -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset; caret-color: #283244; transition: background-color 9999s ease-out 0s; }
.email-card .email-submit, .otp-card .email-submit { background: linear-gradient(105deg, #111722, #2a3342); box-shadow: 0 12px 22px rgb(15 23 35 / 36%); transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease, background .32s ease; }.email-card .email-submit:hover, .otp-card .email-submit:hover { animation: none; background: linear-gradient(105deg, #080d15, #222d3d); box-shadow: 0 19px 34px rgb(15 23 35 / 48%); transform: translateY(-3px) scale(1.035); }.email-card .email-submit:active, .otp-card .email-submit:active { animation: none; box-shadow: 0 7px 14px rgb(15 23 35 / 34%); transform: translateY(1px) scale(.97); }.otp-countdown { width: 100%; text-align: center; }.otp-countdown strong { color: #98121d; font-weight: 900; }
.email-card .email-submit, .otp-card .email-submit { background: linear-gradient(105deg, rgb(10 15 24 / 80%), rgb(31 42 57 / 80%)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }.email-card .email-submit:hover, .otp-card .email-submit:hover { background: linear-gradient(105deg, rgb(7 11 18 / 88%), rgb(27 38 53 / 88%)); }
.email-card .email-submit, .otp-card .email-submit { background: linear-gradient(180deg, rgb(255 255 255 / 17%) 0%, rgb(255 255 255 / 5%) 18%, transparent 45%), linear-gradient(105deg, rgb(7 11 18 / 88%), rgb(25 35 49 / 88%)); border: 1px solid rgb(255 255 255 / 12%); box-shadow: inset 0 1px 1px rgb(255 255 255 / 22%), inset 0 -1px 1px rgb(0 0 0 / 42%), 0 12px 22px rgb(15 23 35 / 36%); }.email-card .email-submit:hover, .otp-card .email-submit:hover { background: linear-gradient(180deg, rgb(255 255 255 / 23%) 0%, rgb(255 255 255 / 7%) 18%, transparent 45%), linear-gradient(105deg, rgb(5 8 14 / 94%), rgb(21 31 44 / 94%)); }
.email-card .email-submit, .otp-card .email-submit { background: linear-gradient(135deg, rgb(255 255 255 / 13%), rgb(255 255 255 / 3%) 42%, rgb(255 255 255 / 8%)), rgb(8 13 22 / 60%); border-color: rgb(255 255 255 / 28%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), inset 0 -1px 0 rgb(0 0 0 / 18%), 0 12px 24px rgb(8 12 19 / 24%); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }.email-card .email-submit:hover, .otp-card .email-submit:hover { background: linear-gradient(135deg, rgb(255 255 255 / 20%), rgb(255 255 255 / 5%) 42%, rgb(255 255 255 / 11%)), rgb(6 11 19 / 72%); border-color: rgb(255 255 255 / 42%); }
.email-card .email-submit, .otp-card .email-submit { background: linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 3%) 22%, transparent 46%), linear-gradient(105deg, #080c13, #151d29); border-color: rgb(255 255 255 / 23%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), inset 0 -1px 0 rgb(0 0 0 / 62%), 0 12px 24px rgb(8 12 19 / 38%); backdrop-filter: none; -webkit-backdrop-filter: none; }.email-card .email-submit:hover, .otp-card .email-submit:hover { background: linear-gradient(180deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 4%) 22%, transparent 46%), linear-gradient(105deg, #05080d, #111927); border-color: rgb(255 255 255 / 34%); }
.stage-flow button.is-accessible:not([aria-current="step"]) { color: #fff; }.stage-flow button.is-accessible:not([aria-current="step"]) .flow-icon { color: #141b26; background: #fff; border-color: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / 8%); }
.otp-inputs input { color: #172033; }
.landing-page:is(.is-email-stage, .is-otp-stage, .is-services-stage) :is(.email-card, .otp-card, .choice-card) { box-shadow: 0 30px 56px rgb(49 16 26 / 29%), 0 10px 22px rgb(35 18 25 / 16%), inset 0 1px 0 rgb(255 255 255 / 78%); }
.landing-page.is-services-stage .choice-card { position: relative; overflow: visible; }.service-shuttle { position: absolute; z-index: 2; top: -38px; right: -52px; width: 180px; pointer-events: none; filter: drop-shadow(0 10px 9px rgb(80 16 22 / 22%)); }.landing-page.is-services-stage .choice-card > :not(.service-shuttle) { position: relative; z-index: 3; }.landing-page.is-services-stage .choice-card .email-card-title { padding-right: 88px; }.landing-page.is-services-stage .service-shuttle { animation: email-shuttle-fly .58s .4s cubic-bezier(.16, 1, .3, 1) both; }.service-option { color: #fff; border-color: rgb(255 255 255 / 17%); background: linear-gradient(135deg, #0a0f18, #202a38); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 9px 16px rgb(14 20 30 / 18%); }.service-option > span { color: #172033; background: #fff; }.service-option > span svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.service-option small { color: rgb(255 255 255 / 68%); }.service-option:hover, .service-option.is-selected { border-color: rgb(255 255 255 / 54%); background: linear-gradient(135deg, #111a26, #2a3545); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 13px 22px rgb(12 17 26 / 28%); }@media (max-width: 700px) and (orientation: portrait) { .service-shuttle { top: -28px; right: -43px; width: 142px; }.landing-page.is-services-stage .choice-card .email-card-title { padding-right: 66px; } }
.service-option > span { color: #df202a; }.stage-flow button[data-stage="otp"]:disabled { color: rgb(255 255 255 / 32%); opacity: .58; }.stage-flow button[data-stage="otp"]:disabled .flow-icon { color: rgb(255 255 255 / 42%); background: transparent; border-color: rgb(255 255 255 / 20%); box-shadow: none; }
.service-option { border-radius: 20px; }.service-option > span { color: #fff; background: linear-gradient(135deg, #e91c2a, #bd0d1a); border-radius: 13px; box-shadow: 0 6px 12px rgb(201 18 31 / 28%); }
@media (prefers-reduced-motion: no-preference) { .welcome-visual img { animation: shuttle-float 5s ease-in-out infinite; }.next-button { animation: button-pulse 2.2s cubic-bezier(.45, 0, .2, 1) infinite; }.wave-top { animation: wave-top-drift 7s ease-in-out infinite alternate; }.wave-bottom { animation: wave-bottom-drift 8s ease-in-out infinite alternate; } } @keyframes shuttle-float { 50% { translate: 0 -10px; } } @keyframes portrait-shuttle-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } @keyframes button-pulse { 0%, 100% { transform: translateY(0); box-shadow: 0 12px 22px rgb(15 23 35 / 36%); } 50% { transform: translateY(0); box-shadow: 0 15px 28px rgb(15 23 35 / 44%); } } @keyframes wave-top-drift { from { translate: 0 0; scale: 1; } to { translate: -24px 15px; scale: 1.07; } } @keyframes wave-bottom-drift { from { translate: 0 0; scale: 1; } to { translate: 24px -14px; scale: 1.08; } }

/* Kilau kaca yang lembut pada tombol aksi utama. */
:is(.next-button, .landing-page button) { position: relative; isolation: isolate; overflow: hidden; }
:is(.next-button, .landing-page button)::before { position: absolute; z-index: 1; inset: -1px; content: ''; opacity: 0; background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 8%) 43%, rgb(255 255 255 / 52%) 50%, rgb(255 255 255 / 8%) 57%, transparent 65%); filter: blur(.8px); pointer-events: none; transform: translateX(-140%); }
.next-button > *, .landing-page button > * { position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) { :is(.next-button, .landing-page button:not(.is-loading))::before { animation: glass-reflection 5.5s .9s cubic-bezier(.38, .02, .24, 1) infinite; } }
.stage-flow button::before { display: none; }
.stage-flow button[aria-current="step"] { border-radius: 16px; }
.stage-flow button[aria-current="step"] .flow-icon { border-radius: 50%; }

@media (prefers-reduced-motion: no-preference) { .landing-page.is-services-stage .choice-card > .service-shuttle { display: block; opacity: 1; animation: service-shuttle-arrive .82s .34s cubic-bezier(.16, 1, .3, 1) both !important; } }
@keyframes service-shuttle-arrive { from { opacity: 0; transform: translate3d(230px, -120px, 0) rotate(24deg) scale(.6); filter: blur(6px) drop-shadow(0 10px 9px rgb(80 16 22 / 0%)); } 68% { opacity: 1; transform: translate3d(-12px, 6px, 0) rotate(-3deg) scale(1.04); filter: blur(0) drop-shadow(0 13px 12px rgb(80 16 22 / 26%)); } to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); filter: blur(0) drop-shadow(0 10px 9px rgb(80 16 22 / 22%)); } }

.booking-card, .court-card { display: none; }
.court-card { display: none; }
.landing-page.is-booking-stage .landing-intro, .landing-page.is-booking-stage .email-card, .landing-page.is-booking-stage .otp-card, .landing-page.is-booking-stage .choice-card { display: none; }
.landing-page.is-booking-stage .welcome-content { display: grid; grid-template-columns: 1fr; place-items: center; width: 100%; max-width: none; min-height: 100svh; padding: 112px 24px 96px; }
.landing-page.is-booking-stage .welcome-copy { align-self: center; width: min(100%, 560px); padding: 0; translate: none; }
.landing-page.is-booking-stage .welcome-visual { display: none; }
.landing-page.is-booking-stage .booking-card { position: relative; display: grid; width: 100%; gap: 18px; padding: 46px; overflow: visible; color: #1c2636; background: linear-gradient(145deg, rgb(255 255 255 / 97%), rgb(255 255 255 / 83%)); border: 1px solid rgb(255 255 255 / 90%); border-radius: 26px; box-shadow: 0 21px 40px rgb(79 22 31 / 22%); backdrop-filter: blur(14px); }
.landing-page.is-booking-stage .booking-card > :not(.service-shuttle) { position: relative; z-index: 3; animation: booking-content-slide .48s cubic-bezier(.16, .9, .28, 1) both; }
.landing-page.is-booking-stage .booking-card > :nth-child(2) { animation-delay: .08s; }.landing-page.is-booking-stage .booking-card > :nth-child(3) { animation-delay: .14s; }.landing-page.is-booking-stage .booking-card > :nth-child(4) { animation-delay: .2s; }.landing-page.is-booking-stage .booking-card > :nth-child(5) { animation-delay: .26s; }.landing-page.is-booking-stage .booking-card > :nth-child(6) { animation-delay: .32s; }
.landing-page.is-booking-stage .booking-card .email-card-title { padding-right: 88px; font-size: 27px; }
.landing-page.is-booking-stage .booking-card .service-shuttle { animation: service-shuttle-arrive .82s .24s cubic-bezier(.16, 1, .3, 1) both; }
.landing-page.is-court-stage .booking-card { display: none; }
.landing-page.is-court-stage .court-card { position: relative; display: grid; width: 100%; gap: 18px; padding: 46px; overflow: visible; color: #1c2636; background: linear-gradient(145deg, rgb(255 255 255 / 97%), rgb(255 255 255 / 83%)); border: 1px solid rgb(255 255 255 / 90%); border-radius: 26px; box-shadow: 0 21px 40px rgb(79 22 31 / 22%); backdrop-filter: blur(14px); }.landing-page.is-court-stage .court-card > :not(.service-shuttle) { position: relative; z-index: 3; animation: booking-content-slide .48s cubic-bezier(.16, .9, .28, 1) both; }.landing-page.is-court-stage .court-card .email-card-title { padding-right: 88px; font-size: 27px; }.landing-page.is-court-stage .court-card .service-shuttle { animation: service-shuttle-arrive .82s .24s cubic-bezier(.16, 1, .3, 1) both; }
.landing-page.is-services-stage .stage-flow button[data-stage="services"] + .flow-arrow, .landing-page.is-services-stage .stage-flow button[data-stage="booking"], .landing-page.is-services-stage .stage-flow button[data-stage="booking"] + .flow-arrow, .landing-page.is-services-stage .stage-flow button[data-stage="court"], .landing-page.is-services-stage .stage-flow button[data-stage="court"] + .flow-arrow, .landing-page.is-services-stage .stage-flow button[data-stage="confirm"] { display: none; }
.landing-page:not(.is-services-stage):not(.is-booking-stage) .stage-flow button[data-stage="services"] + .flow-arrow, .landing-page:not(.is-services-stage):not(.is-booking-stage) .stage-flow button[data-stage="booking"], .landing-page:not(.is-services-stage):not(.is-booking-stage) .stage-flow button[data-stage="booking"] + .flow-arrow, .landing-page:not(.is-services-stage):not(.is-booking-stage) .stage-flow button[data-stage="court"], .landing-page:not(.is-services-stage):not(.is-booking-stage) .stage-flow button[data-stage="court"] + .flow-arrow, .landing-page:not(.is-services-stage):not(.is-booking-stage) .stage-flow button[data-stage="confirm"] { display: none; }
.landing-page.is-booking-stage .stage-flow button[data-stage="opening"], .landing-page.is-booking-stage .stage-flow button[data-stage="opening"] + .flow-arrow, .landing-page.is-booking-stage .stage-flow button[data-stage="email"], .landing-page.is-booking-stage .stage-flow button[data-stage="email"] + .flow-arrow, .landing-page.is-booking-stage .stage-flow button[data-stage="otp"], .landing-page.is-booking-stage .stage-flow button[data-stage="otp"] + .flow-arrow { display: none; }
.landing-page:not(.is-landing-logged-in):not(.is-booking-stage) .stage-flow button[data-stage="otp"] + .flow-arrow,
.landing-page:not(.is-landing-logged-in):not(.is-booking-stage) .stage-flow button[data-stage="services"] {
  display: none !important;
}
.landing-page.is-court-stage .booking-card { display: none; }
.landing-page.is-court-stage .court-card { position: relative; display: grid; width: 100%; gap: 18px; padding: 46px; overflow: visible; color: #1c2636; background: linear-gradient(145deg, rgb(255 255 255 / 97%), rgb(255 255 255 / 83%)); border: 1px solid rgb(255 255 255 / 90%); border-radius: 26px; box-shadow: 0 21px 40px rgb(79 22 31 / 22%); backdrop-filter: blur(14px); }.landing-page.is-court-stage .court-card > :not(.service-shuttle) { position: relative; z-index: 3; animation: booking-content-slide .48s cubic-bezier(.16, .9, .28, 1) both; }.landing-page.is-court-stage .court-card .email-card-title { padding-right: 88px; font-size: 27px; }.landing-page.is-court-stage .court-card .service-shuttle { animation: service-shuttle-arrive .82s .24s cubic-bezier(.16, 1, .3, 1) both; }
.stage-flow { overflow: hidden; }
.stage-flow { box-sizing: border-box; width: fit-content; max-width: calc(100vw - 20px); }
.stage-flow-track { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(7px, 1.2vw, 20px); width: max-content; transition: transform .58s cubic-bezier(.22, .8, .2, 1); will-change: transform; }
.stage-flow.is-otp-hidden button[data-stage="email"] + .flow-arrow, .stage-flow.is-otp-hidden button[data-stage="otp"], .stage-flow.is-otp-hidden button[data-stage="otp"] + .flow-arrow { display: none; }
.stage-flow.is-otp-hidden.show-locked-otp button[data-stage="email"] + .flow-arrow, .stage-flow.is-otp-hidden.show-locked-otp button[data-stage="otp"], .stage-flow.is-otp-hidden.show-locked-otp button[data-stage="otp"] + .flow-arrow { display: inline-flex; }
.stage-flow.is-otp-hidden.show-locked-otp .flow-arrow { display: block; }
.booking-field { display: grid; gap: 7px; color: #4c5666; font-size: 12px; font-weight: 800; }
.booking-field input { box-sizing: border-box; width: 100%; height: 52px; padding: 0 16px; color: #283244; border: 1px solid #f0a5ab; border-radius: 13px; outline-color: #df202a; background: #fff; font: inherit; font-size: 14px; }
.booking-field select { box-sizing: border-box; width: 100%; height: 52px; padding: 0 16px; color: #283244; border: 1px solid #f0a5ab; border-radius: 13px; outline-color: #df202a; background: #fff; font: inherit; font-size: 14px; }
.booking-field :is(input, select):disabled { color: #8a929d; background: #f7f8fa; cursor: wait; }
.booking-status { min-height: 18px; margin: -6px 0 0; color: #c81a28; font-size: 12px; font-weight: 800; }.booking-status.is-success { color: #16803b; }
.booking-availability { display: grid; gap: 10px; }.booking-availability > p { margin: 0; color: #687385; font-size: 12px; font-weight: 700; }.booking-court { padding: 13px; border: 1px solid #d9dde3; border-radius: 14px; background: rgb(255 255 255 / 74%); }.booking-court header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }.booking-court strong { font-size: 14px; }.booking-court small { color: #273244; font-size: 11px; font-weight: 800; }.booking-slots { display: flex; flex-wrap: wrap; gap: 7px; }.booking-slot { min-width: 82px; padding: 8px 9px; color: #273244; border: 1px solid #c9cfd8; border-radius: 9px; background: #fff; cursor: pointer; font: 800 11px/1 inherit; transition: background .2s ease, color .2s ease, transform .2s ease; }.booking-slot:hover, .booking-slot.is-selected { color: #fff; border-color: #111722; background: #111722; transform: translateY(-1px); }.booking-no-slot { color: #89919c; font-size: 12px; font-weight: 700; }
.booking-time { padding: 13px; border: 1px solid #d9dde3; border-radius: 14px; background: rgb(255 255 255 / 74%); }.booking-time header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }.booking-time header strong { font-size: 14px; }.booking-time header small { color: #687385; font-size: 11px; font-weight: 800; }.booking-courts { display: flex; flex-wrap: wrap; gap: 7px; }.booking-courts .booking-slot { display: grid; min-width: 148px; gap: 3px; padding: 10px 11px; text-align: left; }.booking-courts .booking-slot small { color: #687385; font-size: 10px; font-weight: 800; }.booking-courts .booking-slot:is(:hover, .is-selected) small { color: rgb(255 255 255 / 78%); }
.booking-availability { grid-template-columns: repeat(3, minmax(0, 1fr)); }.booking-time { display: grid; gap: 7px; padding: 10px; }.booking-time > strong { font-size: 13px; }.booking-court-select { box-sizing: border-box; width: 100%; min-width: 0; height: 34px; padding: 0 8px; color: #273244; border: 1px solid #c9cfd8; border-radius: 8px; outline-color: #df202a; background: #fff; font: 800 11px/1 inherit; }.booking-availability > p { grid-column: 1 / -1; }@media (max-width: 520px) { .booking-availability { grid-template-columns: 1fr; } }
.booking-availability { max-height: min(42svh, 340px); padding: 3px 8px 3px 3px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d8222c rgb(245 237 239 / 86%); }.booking-availability::-webkit-scrollbar { width: 7px; }.booking-availability::-webkit-scrollbar-track { border-radius: 999px; background: rgb(245 237 239 / 86%); }.booking-availability::-webkit-scrollbar-thumb { border: 2px solid rgb(245 237 239 / 86%); border-radius: 999px; background: linear-gradient(#f4535c, #c81020); }.booking-time { border-color: rgb(222 198 204 / 82%); background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(255 246 247 / 80%)); box-shadow: 0 5px 12px rgb(86 25 35 / 7%), inset 0 1px 0 #fff; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }.booking-time:hover { border-color: rgb(216 34 44 / 42%); box-shadow: 0 8px 16px rgb(185 23 37 / 12%), inset 0 1px 0 #fff; transform: translateY(-2px); }.booking-time > strong { color: #202b3c; letter-spacing: -.01em; }.booking-court-select { color: #334055; border-color: rgb(210 194 199 / 95%); background: linear-gradient(180deg, #fff, #fff8f8); transition: border-color .2s ease, box-shadow .2s ease; }.booking-court-select:focus { border-color: #df202a; box-shadow: 0 0 0 3px rgb(223 32 42 / 12%); }@media (max-width: 520px) { .booking-availability { max-height: min(40svh, 300px); } }
.booking-court-select { display: none; }.booking-court-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 34px; padding: 0 10px; color: #344054; border: 1px solid rgb(210 194 199 / 95%); border-radius: 9px; background: linear-gradient(180deg, #fff, #fff7f8); cursor: pointer; font: 800 11px/1 inherit; }.booking-court-trigger i { color: #d8222c; font-size: 17px; font-style: normal; line-height: 1; transition: transform .2s ease; }.booking-time.is-open .booking-court-trigger { color: #c81020; border-color: #df202a; box-shadow: 0 0 0 3px rgb(223 32 42 / 10%); }.booking-time.is-open .booking-court-trigger i { transform: rotate(180deg); }.booking-court-menu { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }.booking-time.is-open .booking-court-menu { display: grid; }.booking-court-option { display: grid; gap: 2px; min-width: 0; padding: 7px 6px; color: #334054; border: 1px solid rgb(219 204 208 / 92%); border-radius: 8px; background: #fff; cursor: pointer; font: 800 10px/1.1 inherit; text-align: left; }.booking-court-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.booking-court-option small { color: #c81020; font-size: 9px; font-weight: 900; }.booking-court-option:hover, .booking-court-option.is-selected { color: #fff; border-color: #131b27; background: linear-gradient(135deg, #0a0f18, #263142); }.booking-court-option:hover small, .booking-court-option.is-selected small { color: rgb(255 255 255 / 76%); }
.booking-availability { display: block; }.booking-time-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.booking-time-option { display: grid; gap: 4px; width: 100%; min-height: 62px; padding: 10px; color: #293547; border: 1px solid rgb(220 199 204 / 95%); border-radius: 13px; background: linear-gradient(145deg, #fff, #fff5f6); cursor: pointer; text-align: left; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }.booking-time-option strong { font-size: 12px; }.booking-time-option small { color: #778292; font-size: 10px; font-weight: 800; }.booking-time-option:hover, .booking-time-option.is-selected { color: #fff; border-color: #151e2b; background: linear-gradient(135deg, #0a0f18, #283448); box-shadow: 0 8px 14px rgb(15 22 33 / 16%); transform: translateY(-2px); }.booking-time-option:hover small, .booking-time-option.is-selected small { color: rgb(255 255 255 / 72%); }.booking-court-panel { display: grid; min-height: 50px; margin-bottom: 10px; padding: 11px 12px; color: #6e7887; border: 1px dashed rgb(215 184 190 / 90%); border-radius: 14px; background: rgb(255 250 250 / 72%); font-size: 11px; font-weight: 800; }.booking-court-panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }.booking-court-panel header strong { color: #202b3c; font-size: 13px; }.booking-court-panel header span { color: #d8222c; font-size: 10px; }.booking-court-panel > div { display: flex; flex-wrap: wrap; gap: 6px; }.booking-court-panel .booking-court-option { min-width: 74px; padding: 8px; }.booking-court-panel .booking-court-option span { font-size: 10px; }@media (max-width: 520px) { .booking-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.booking-court-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.booking-court-choice { display: grid; gap: 3px; min-height: 78px; padding: 11px; color: #293547; border: 1px solid rgb(220 199 204 / 95%); border-radius: 13px; background: linear-gradient(145deg, #fff, #fff5f6); cursor: pointer; text-align: left; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }.booking-court-choice strong { font-size: 12px; }.booking-court-choice small { color: #c81020; font-size: 10px; font-weight: 900; }.booking-court-choice span { color: #788393; font-size: 9px; font-weight: 800; }.booking-court-choice:hover, .booking-court-choice.is-selected { color: #fff; border-color: #151e2b; background: linear-gradient(135deg, #0a0f18, #283448); box-shadow: 0 8px 14px rgb(15 22 33 / 16%); transform: translateY(-2px); }.booking-court-choice:hover :is(small, span), .booking-court-choice.is-selected :is(small, span) { color: rgb(255 255 255 / 76%); }.booking-time-panel { display: grid; min-height: 50px; margin-top: 11px; padding: 11px 12px; color: #6e7887; border: 1px dashed rgb(215 184 190 / 90%); border-radius: 14px; background: rgb(255 250 250 / 72%); font-size: 11px; font-weight: 800; }.booking-time-panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }.booking-time-panel header strong { color: #202b3c; font-size: 13px; }.booking-time-panel header span { color: #d8222c; font-size: 10px; }.booking-time-panel .booking-time-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }.booking-time-panel .booking-time-option { display: block; min-height: 0; padding: 8px 4px; border-radius: 8px; font-size: 10px; text-align: center; }@media (max-width: 520px) { .booking-court-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.booking-time-panel .booking-time-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.court-card .booking-availability { box-sizing: border-box; width: 100%; }.booking-time-panel .booking-time-option.is-booked { color: #a3797e; border-color: rgb(218 108 117 / 48%); background: repeating-linear-gradient(-45deg, #fff1f2, #fff1f2 5px, #ffe4e6 5px, #ffe4e6 10px); box-shadow: none; cursor: not-allowed; text-decoration: line-through; opacity: .82; }.booking-time-panel .booking-time-option.is-locked { color: #9aa2ad; border-color: #e3e6ea; background: #f4f5f7; box-shadow: none; cursor: not-allowed; opacity: .72; }
.booking-court-choice { min-height: 62px; }
.booking-court-choice:not(.is-full) { position: relative; isolation: isolate; overflow: hidden; color: #fff; border-color: #1a8b69; background: linear-gradient(135deg, #0f755b, #1a9f78); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 7px 14px rgb(13 89 67 / 16%); }.booking-court-choice:not(.is-full)::after { position: absolute; z-index: -1; inset: 8px; content: ''; border: 1px solid rgb(255 255 255 / 20%); border-radius: 7px; background: linear-gradient(90deg, transparent 49.5%, rgb(255 255 255 / 14%) 50%, transparent 50.5%), linear-gradient(transparent 49.5%, rgb(255 255 255 / 14%) 50%, transparent 50.5%); pointer-events: none; }.booking-court-choice:not(.is-full) :is(small, span) { color: #ffe168; }.booking-court-choice:not(.is-full):hover, .booking-court-choice:not(.is-full).is-selected { color: #fff; border-color: #0b513e; background: linear-gradient(135deg, #07523f, #0d8060); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%), 0 10px 17px rgb(8 69 52 / 25%); }.booking-court-choice.is-full, .booking-court-choice:disabled { color: #a77d82; border-color: rgb(218 108 117 / 45%); background: repeating-linear-gradient(-45deg, #fff1f2, #fff1f2 5px, #ffe4e6 5px, #ffe4e6 10px); box-shadow: none; cursor: not-allowed; }.booking-court-choice.is-full small { color: #c8525c; }.booking-court-choice.is-full span { color: #a77d82; }
.booking-court-grid { gap: 11px; padding: 3px; }.booking-court-choice { min-height: 70px; padding: 12px; border-radius: 15px; }.booking-court-choice strong { font-size: 13px; }.booking-court-choice small { font-size: 10px; letter-spacing: .01em; }.booking-time-panel { position: relative; gap: 10px; margin-top: 14px; padding: 14px; border-style: solid; border-color: rgb(225 203 207 / 88%); border-radius: 17px; background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(255 242 244 / 82%)); box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgb(107 24 37 / 7%); }.booking-time-panel::before { position: absolute; top: 0; left: 14px; width: 72px; height: 3px; content: ''; border-radius: 0 0 999px 999px; background: #df202a; }.booking-time-panel header { margin: 0; padding-top: 2px; }.booking-time-panel header strong { font-size: 14px; }.booking-time-panel .booking-time-grid { gap: 7px; }.booking-time-panel .booking-time-option { padding: 9px 4px; border-color: rgb(222 199 204 / 92%); border-radius: 9px; background: #fffafb; font-weight: 800; }.booking-time-panel .booking-time-option:hover:not(:disabled), .booking-time-panel .booking-time-option.is-selected { color: #fff; border-color: #111924; background: linear-gradient(135deg, #080d15, #273448); box-shadow: 0 5px 10px rgb(14 20 31 / 17%); transform: translateY(-1px); }.booking-time-option::before, .booking-time-option::after { display: none !important; }.court-card .email-submit { min-height: 56px; color: #fff; border: 1px solid rgb(255 255 255 / 18%); background: linear-gradient(105deg, #070b12, #182231); box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 -1px 0 rgb(0 0 0 / 55%), 0 12px 24px rgb(8 12 19 / 30%); }.court-card .email-submit:hover { background: linear-gradient(105deg, #020508, #101925); }
.landing-page.is-court-stage .welcome-copy { width: min(100%, 720px); }.landing-page.is-court-stage .court-card { box-sizing: border-box; width: 100%; }.court-card .booking-availability { max-height: min(44svh, 370px); padding-right: 10px; }.court-card .email-submit { width: min(100%, 420px); justify-self: center; }
.court-card .booking-availability { max-height: none; padding: 0; overflow: visible; }.court-card .booking-court-grid { gap: 8px; }.court-card .booking-court-choice { min-height: 60px; padding: 10px; }.court-card .booking-time-panel { gap: 7px; margin-top: 10px; padding: 11px 12px; }.court-card .booking-time-panel .booking-time-grid { gap: 5px; }.court-card .booking-time-panel .booking-time-option { padding: 7px 3px; font-size: 9px; }
.booking-court-choice::before { display: none !important; }.booking-court-choice.is-selected { border-color: #042f24 !important; background: linear-gradient(135deg, #032f25, #07533f) !important; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 10px 18px rgb(2 46 35 / 34%) !important; }
.booking-time-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.booking-time-fields select { box-sizing: border-box; width: 100%; height: 52px; padding: 0 14px; color: #283244; border: 1px solid #f0a5ab; border-radius: 13px; outline-color: #df202a; background: #fff; font: inherit; font-size: 14px; }@media (max-width: 520px) { .booking-time-fields { grid-template-columns: 1fr; } }
.time-input-wrap { position: relative; display: block; }.time-input-wrap input[type="time"] { padding-right: 54px; }.time-input-wrap input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0; }.time-input-wrap .time-picker-button { position: absolute; top: 50%; right: 9px; z-index: 4; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #d8222c; border: 1px solid #f1a8ae; border-radius: 50%; background: #fff4f5; box-shadow: 0 2px 6px rgb(198 21 33 / 14%); cursor: pointer; transform: translateY(-50%); }.time-input-wrap .time-picker-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.time-input-wrap .time-picker-button:hover { color: #fff; border-color: #d8222c; background: #d8222c; box-shadow: 0 4px 9px rgb(198 21 33 / 25%); }
.booking-card .booking-field, .booking-card .date-input-wrap, .booking-card .time-input-wrap, .booking-card .booking-time-fields { min-width: 0; }.booking-card .booking-field :is(input, select), .booking-card .date-input-wrap input, .booking-card .time-input-wrap input { max-width: 100%; }
.booking-card .date-input-wrap, .booking-card .time-input-wrap { width: 100%; }.booking-card .date-input-wrap input, .booking-card .time-input-wrap input { display: block; box-sizing: border-box; width: 100% !important; min-width: 0; }
.landing-page.is-booking-stage .booking-card { grid-template-columns: minmax(0, 1fr); }.landing-page.is-booking-stage .booking-card > * { min-width: 0; max-width: 100%; }.landing-page.is-booking-stage .booking-card .booking-field { width: 100%; max-width: 100%; }.landing-page.is-booking-stage .booking-card .date-input-wrap { display: block; max-width: 100%; overflow: hidden; border-radius: 13px; }.landing-page.is-booking-stage .booking-card .date-input-wrap input[type="date"] { width: 100% !important; max-width: 100% !important; }
.landing-page.is-booking-stage .booking-card .booking-time-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }.landing-page.is-booking-stage .booking-card .booking-time-fields > .booking-field { min-width: 0; width: 100%; }.landing-page.is-booking-stage .booking-card .booking-time-fields :is(.time-input-wrap, .select2-container) { min-width: 0; max-width: 100%; }
.landing-page.is-booking-stage .booking-card .booking-time-fields { display: flex; gap: 14px; width: 100%; }.landing-page.is-booking-stage .booking-card .booking-time-fields > .booking-field { flex: 1 1 0; width: 0; overflow: visible; }.landing-page.is-booking-stage .booking-card .booking-time-fields .select2-container { width: 100% !important; max-width: 100%; }
.landing-page.is-booking-stage .booking-card .booking-time-fields > .booking-field { flex: 0 0 calc((100% - 14px) / 2); width: calc((100% - 14px) / 2); overflow: hidden; }.landing-page.is-booking-stage .booking-card .booking-time-fields .time-input-wrap { overflow: hidden; border-radius: 13px; }.landing-page.is-booking-stage .booking-card .booking-time-fields input[name="startTime"] { min-width: 0 !important; width: 100% !important; }
@media (max-width: 520px) { .landing-page.is-booking-stage .booking-card .booking-time-fields { flex-direction: column; } .landing-page.is-booking-stage .booking-card .booking-time-fields > .booking-field { width: 100%; } }
@media (max-width: 520px) { .landing-page.is-booking-stage .booking-card .booking-time-fields > .booking-field { flex-basis: auto; width: 100%; } }
html, body.landing-page { height: 100%; overflow: hidden; }.welcome-screen { height: 100svh; min-height: 100svh; overflow: hidden; }.landing-page:is(.is-booking-stage, .is-court-stage) .welcome-screen { overflow-x: hidden; overflow-y: auto; }.stage-flow { width: max-content !important; max-width: calc(100vw - 20px); }.stage-flow-track { width: max-content; }
html, body.landing-page { overscroll-behavior: none; }body.landing-page { position: fixed; inset: 0; width: 100%; }
@media (max-width: 700px) and (orientation: portrait) { .landing-page.is-booking-stage .welcome-content { padding-bottom: 108px; } }
@media (max-width: 700px) and (orientation: portrait) { .landing-page.is-booking-stage .welcome-content { padding-bottom: 72px; } }
@media (min-width: 701px) and (max-width: 1024px) { .landing-page:is(.is-booking-stage, .is-court-stage) .welcome-content { padding: 72px 24px 88px; } }
@media (min-width: 701px) and (max-width: 1024px) { .landing-page.is-booking-stage .welcome-content { padding-bottom: 40px; } }.landing-page.has-stage-overflow .welcome-background { position: fixed; inset: 0; }
.landing-page.has-stage-overflow:is(.is-booking-stage, .is-court-stage) .welcome-content { min-height: 0; padding-bottom: calc(82px + env(safe-area-inset-bottom)); align-content: start; }
.landing-page.is-stage-scroll-measuring:is(.is-booking-stage, .is-court-stage) .welcome-content { min-height: 0 !important; padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important; align-content: start; }
.landing-page.has-stage-overflow.is-booking-stage .wave-bottom { bottom: -15%; left: -31%; width: 92%; height: 27%; }
.landing-page:is(.has-stage-overflow, .is-stage-scroll-measuring) .welcome-screen::before,
.landing-page:is(.has-stage-overflow, .is-stage-scroll-measuring) .welcome-screen::after { position: fixed; z-index: 0; }
.landing-page:is(.has-stage-overflow, .is-stage-scroll-measuring) .welcome-header { position: fixed; z-index: 40; }
.landing-page .stage-flow { box-shadow: 0 -3px 7px rgb(0 0 0 / 62%), 0 -14px 30px rgb(0 0 0 / 48%), 0 18px 38px rgb(0 0 0 / 58%), inset 0 1px 0 rgb(255 255 255 / 10%); }
.landing-page .stage-flow { bottom: max(6px, env(safe-area-inset-bottom)) !important; }
.court-card .booking-court-choice { text-shadow: 0 1px 0 rgb(0 0 0 / 13%); }
.court-card .booking-court-choice:not(.is-full) { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 7px 14px rgb(13 89 67 / 18%); }
.court-card .booking-court-choice.is-selected { outline: 2px solid rgb(255 225 104 / 78%); outline-offset: 2px; }
.court-card .booking-time-panel { border-color: rgb(208 174 180 / 88%); background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgb(255 241 243 / 88%)); box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgb(103 18 31 / 9%); }
.court-card .booking-time-panel::before { background: linear-gradient(90deg, #dc1a28, #ff6570); }
.court-card .booking-time-panel header strong { color: #1d2939; }
.court-card .booking-time-panel header span { color: #c41423; }
.court-card .booking-time-panel .booking-time-option { background: linear-gradient(180deg, #fff, #fff7f8); }
.court-card .booking-time-panel .booking-time-option:not(:disabled):hover { border-color: #182230; }
.booking-request-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; color: #6a2630; border: 1px solid rgb(222 177 184 / 72%); border-radius: 13px; background: linear-gradient(105deg, #fffafa, #fff1f2); font-size: 11px; font-weight: 800; }
.booking-loading { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 15px; color: #334155; border: 1px solid rgb(217 192 198 / 88%); border-radius: 17px; background: linear-gradient(135deg, #fff, #fff1f3); box-shadow: 0 12px 26px rgb(119 27 42 / 10%); }.booking-loading > div { display: grid; gap: 4px; }.booking-loading strong { color: #1d2939; font-size: 13px; }.booking-loading span:last-child { color: #788393; font-size: 11px; font-weight: 700; }.booking-loading-orbit { position: relative; flex: 0 0 38px; width: 38px; height: 38px; border: 3px solid rgb(216 23 37 / 16%); border-top-color: #d81725; border-right-color: #ff7780; border-radius: 50%; animation: booking-orbit .9s linear infinite; }.booking-loading-orbit::after { position: absolute; inset: 8px; content: ''; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9ba2, #d81725); }.email-submit.is-loading { cursor: wait; opacity: .92; }.email-submit.is-loading .button-spinner { width: 16px; height: 16px; border: 2px solid rgb(255 255 255 / 35%); border-top-color: #fff; border-radius: 50%; animation: booking-orbit .75s linear infinite; }@keyframes booking-orbit { to { transform: rotate(360deg); } }
.booking-request-summary span { color: #7d858f; }.booking-request-summary strong { color: #c71525; font-size: 12px; white-space: nowrap; }
.booking-order-summary { display: grid; gap: 8px; padding: 12px; border: 1px solid rgb(210 218 226 / 90%); border-radius: 15px; background: linear-gradient(145deg, #fff, #f8fafc); box-shadow: inset 0 1px 0 #fff; }
.booking-order-summary > span { color: #778292; font-size: 11px; font-weight: 800; }.booking-order-summary header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.booking-order-summary header strong { color: #1d2939; font-size: 13px; }.booking-order-summary header span { color: #bd1020; font-size: 14px; font-weight: 900; }.booking-order-summary > div { display: grid; gap: 6px; }.booking-order-summary p { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; padding-top: 6px; border-top: 1px dashed rgb(214 220 226 / 90%); }.booking-order-summary p b { color: #293547; font-size: 11px; }.booking-order-summary p span { color: #6b7685; font-size: 10px; font-weight: 800; text-align: right; }
.booking-confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.booking-confirm-actions .booking-cancel { color: #8b1220 !important; border-color: rgb(183 30 45 / 38%) !important; background: #fff5f6 !important; box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgb(122 14 28 / 13%) !important; }.booking-confirm-actions .booking-cancel:hover { color: #fff !important; border-color: #a90818 !important; background: #a90818 !important; }
.booking-unavailable { display: grid; gap: 8px; padding: 14px; color: #7d3740; border: 1px solid rgb(228 168 175 / 82%); border-radius: 16px; background: linear-gradient(145deg, #fff9fa, #fff0f1); }.booking-unavailable > strong { color: #b91424; font-size: 14px; }.booking-unavailable > span, .booking-unavailable em { color: #7b8490; font-size: 11px; font-style: normal; font-weight: 800; }.booking-suggestion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 3px; }.booking-suggestion { display: grid; gap: 3px; padding: 9px; color: #2a3748; border: 1px solid rgb(218 193 198 / 92%); border-radius: 11px; background: #fff; cursor: pointer; font: inherit; text-align: left; }.booking-suggestion strong { font-size: 11px; }.booking-suggestion span { color: #bf1827; font-size: 10px; font-weight: 900; }.booking-suggestion:hover { border-color: #15202e; color: #fff; background: linear-gradient(135deg, #101924, #293849); }.booking-suggestion:hover span { color: #ffe168; }@media (max-width: 520px) { .booking-suggestion-grid { grid-template-columns: 1fr; }.booking-order-summary p { display: grid; gap: 2px; }.booking-order-summary p span { text-align: left; } }
.landing-page .email-clear::before { display: none !important; animation: none !important; }
.landing-page.is-otp-stage .otp-card .email-submit { min-height: 56px; font-size: 15px; }
@media (max-width: 700px) and (orientation: portrait) { .landing-page.is-otp-stage .otp-card .email-submit { min-height: 54px; } }
.service-option { border-radius: 999px; }
.landing-page.is-services-stage .stage-flow button[data-stage="services"] + .flow-arrow { display:none !important; }
.stage-flow button[data-stage="services"] + .flow-arrow { display:none !important; }
.landing-page.is-services-stage .stage-flow button[data-stage="services"] ~ .flow-arrow { display:none !important; }
.stage-flow .membership-day-flow-arrow { display:none !important; }
.landing-page.is-membership-stage .stage-flow button[data-stage="membership-day"],.landing-page.is-membership-stage .stage-flow .membership-package-flow-arrow { display:inline-flex !important; }
.landing-page.is-services-stage .service-option > span { border-radius: 12px; }
.landing-page.is-booking-stage .booking-card .booking-field { gap: 0; }
.welcome-header { padding-top: clamp(14px, 2.4vw, 32px); }
@media (max-width: 700px) and (orientation: portrait) { .welcome-header { padding-top: 14px; } }
.landing-page.is-booking-stage .booking-card .booking-field :is(input, select),
.landing-page.is-booking-stage .booking-card :is(.date-input-wrap, .time-input-wrap),
.landing-page.is-booking-stage .booking-card .booking-time-fields .select2-selection--single { border-radius: 999px !important; }
.landing-page.is-booking-stage .booking-card :is(.date-input-wrap, .time-input-wrap) { overflow: hidden; }
.landing-page.is-booking-stage .booking-card .booking-date-display { border-radius: 999px; }
.landing-page:is(.is-email-stage, .is-otp-stage, .is-services-stage) .welcome-content { padding-top: 96px; }
.landing-page:is(.is-booking-stage, .is-court-stage) .welcome-content { padding-top: 70px; }
@media (min-width: 701px) and (max-width: 1024px) { .landing-page:is(.is-booking-stage, .is-court-stage) .welcome-content { padding-top: 42px; } }
@media (max-width: 700px) and (orientation: portrait) { .landing-page:is(.is-email-stage, .is-otp-stage, .is-services-stage) .welcome-content { padding-top: 80px; }.landing-page:is(.is-booking-stage, .is-court-stage) .welcome-content { padding-top: 54px; } }
.landing-page.is-booking-stage .booking-card .time-input-wrap::before { position: absolute; z-index: 3; top: 50%; left: 16px; content: attr(data-placeholder); color: #8993a0; font-size: 14px; font-weight: 700; pointer-events: none; transform: translateY(-50%); }
.landing-page.is-booking-stage .booking-card .time-input-wrap:not(.has-value) input { color: transparent; }
.landing-page.is-booking-stage .booking-card .time-input-wrap.has-value::before { display: none; }
.booking-card .date-input-wrap .booking-date-display { position: relative; z-index: 1; padding-right: 54px; color: #283244; cursor: pointer; }.booking-card .date-input-wrap .booking-date-display::placeholder { color: #8993a0; opacity: 1; }.booking-card .date-input-wrap .booking-date-native { position: absolute; z-index: 3; inset: 0; width: 100% !important; height: 100%; opacity: 0; cursor: pointer; }.booking-card .date-input-wrap .date-picker-button { z-index: 4; }
html, body.landing-page { background: #d81725; }.landing-page .stage-flow { position: fixed !important; right: 50%; bottom: 18px; z-index: 30; }.welcome-screen { background-color: #d81725; }
.welcome-screen { overflow: hidden !important; }.landing-page.has-stage-overflow .welcome-screen { overflow-x: hidden !important; overflow-y: auto !important; }.landing-page.is-court-stage .court-card { max-height: none; padding-right: 46px; overflow: visible; }@media (max-width: 700px) and (orientation: portrait) { .landing-page.is-court-stage .court-card { padding-right: 24px; } }.email-input-wrap > i.fa-envelope { width: 16px; margin-left: 14px; color: #d8222c; font-size: 16px; text-align: center; }.email-clear i, .date-picker-button i, .time-picker-button i { font-size: 16px; line-height: 1; }.flow-icon i { font-size: 16px; line-height: 1; }html { height: 100dvh; min-height: 100dvh; max-height: 100dvh; overflow: hidden; }body.landing-page { position: relative; inset: auto; height: 100dvh; min-height: 100dvh; max-height: 100dvh; overflow: hidden; }.welcome-screen { height: 100dvh; min-height: 100dvh; max-height: 100dvh; }.landing-page .stage-flow { position: fixed !important; bottom: max(12px, env(safe-area-inset-bottom)); }:root, html, body.landing-page { background: #d81725 !important; }
.booking-card :is(.date-picker-button, .time-picker-button) { color: #fff !important; border-color: rgb(255 255 255 / 22%) !important; background: #111722 !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 3px 7px rgb(8 12 19 / 22%) !important; }.booking-card :is(.date-picker-button, .time-picker-button):hover { color: #fff !important; background: #05080d !important; }
body.landing-page .booking-card button.date-picker-button:not(:disabled), body.landing-page .booking-card button.time-picker-button:not(:disabled) { color: #fff !important; border: 1px solid rgb(255 255 255 / 24%) !important; background: #111722 !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 4px 9px rgb(8 12 19 / 24%) !important; }body.landing-page .booking-card button.date-picker-button:not(:disabled):hover, body.landing-page .booking-card button.time-picker-button:not(:disabled):hover { color: #fff !important; background: #05080d !important; }
.landing-page.is-booking-stage .booking-card .booking-time-fields.row { --bs-gutter-x: 14px; --bs-gutter-y: 14px; display: flex; flex-wrap: wrap; width: calc(100% + 14px); margin: -7px; gap: 0; }.landing-page.is-booking-stage .booking-card .booking-time-fields.row > .booking-field { flex: 0 0 auto; width: 100%; margin: 0; padding: 7px; overflow: visible; }@media (min-width: 576px) { .landing-page.is-booking-stage .booking-card .booking-time-fields.row > .booking-field { width: 50%; } }
.landing-page.is-booking-stage .booking-card .booking-time-fields.row { max-width: none !important; }
.date-input-wrap input[type="date"] { padding-top: 0; padding-bottom: 0; text-align: left; }.date-input-wrap input[type="date"]::-webkit-date-and-time-value { text-align: left; }.date-input-wrap input[type="date"]::-webkit-datetime-edit { display: flex; align-items: center; justify-content: flex-start; height: 100%; padding: 0; text-align: left; }
.time-input-wrap input[type="time"] { padding-top: 0; padding-bottom: 0; text-align: left; }.time-input-wrap input[type="time"]::-webkit-date-and-time-value { text-align: left; }.time-input-wrap input[type="time"]::-webkit-datetime-edit { display: flex; align-items: center; justify-content: flex-start; height: 100%; padding: 0; text-align: left; }
.date-input-wrap input[type="date"], .time-input-wrap input[type="time"] { height: 52px; line-height: 52px; -webkit-appearance: none; appearance: none; }.date-input-wrap input[type="date"]::-webkit-datetime-edit, .time-input-wrap input[type="time"]::-webkit-datetime-edit { display: block; height: 52px; padding: 0; line-height: 52px; }.date-input-wrap input[type="date"]::-webkit-date-and-time-value, .time-input-wrap input[type="time"]::-webkit-date-and-time-value { min-height: 52px; line-height: 52px; }
.landing-page button:not(.stage-flow button):not(.fullscreen-button):not(:disabled) { color: #fff !important; border-color: rgb(255 255 255 / 18%) !important; background: linear-gradient(118deg, #ff3a47 0%, #e20c1c 64%, #171a22 100%) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), inset 0 -1px 0 rgb(0 0 0 / 28%), 0 8px 16px rgb(176 10 25 / 24%) !important; }.landing-page button:not(.stage-flow button):not(.fullscreen-button):not(:disabled):hover { background: linear-gradient(118deg, #ff4c58 0%, #eb1021 60%, #0c1017 100%) !important; }.landing-page button:not(.stage-flow button):not(.fullscreen-button):not(:disabled) :is(small, span) { color: inherit; }.landing-page :is(.date-picker-button, .time-picker-button) svg { stroke: currentColor; }
.landing-page button:not(.stage-flow button):not(.fullscreen-button):not(:disabled):not(.date-picker-button):not(.time-picker-button):not(.email-clear) { background: linear-gradient(118deg, #b50e1c 0%, #8b0712 64%, #10131a 100%) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 17%), inset 0 -1px 0 rgb(0 0 0 / 34%), 0 8px 16px rgb(104 4 15 / 30%) !important; }.landing-page button:not(.stage-flow button):not(.fullscreen-button):not(:disabled):not(.date-picker-button):not(.time-picker-button):not(.email-clear):hover { background: linear-gradient(118deg, #ca1422 0%, #980813 60%, #080b10 100%) !important; }.landing-page :is(.date-picker-button, .time-picker-button, .email-clear) { color: #d8222c !important; border-color: #f1a8ae !important; background: #fff4f5 !important; box-shadow: 0 2px 6px rgb(198 21 33 / 14%) !important; }.landing-page :is(.date-picker-button, .time-picker-button, .email-clear):hover { color: #fff !important; border-color: #d8222c !important; background: #d8222c !important; }
.landing-page button:not(.stage-flow button):not(.fullscreen-button):not(:disabled):not(.date-picker-button):not(.time-picker-button):not(.email-clear) { background: radial-gradient(ellipse at 18% 0%, rgb(255 92 105 / 48%), transparent 42%), linear-gradient(112deg, #ef2436 0%, #bd0a1c 42%, #69040f 70%, #11151e 100%) !important; border-color: rgb(255 151 160 / 35%) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 31%), inset 0 -2px 0 rgb(55 0 8 / 48%), 0 10px 20px rgb(124 3 18 / 32%) !important; }.landing-page button:not(.stage-flow button):not(.fullscreen-button):not(:disabled):not(.date-picker-button):not(.time-picker-button):not(.email-clear):hover { background: radial-gradient(ellipse at 18% 0%, rgb(255 147 156 / 58%), transparent 43%), linear-gradient(112deg, #ff3548 0%, #d40c20 42%, #79030f 70%, #090c13 100%) !important; }
.landing-page .email-clear { color: #d8222c !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }.landing-page .email-clear:hover { color: #d8222c !important; background: #fff0f1 !important; box-shadow: none !important; }
.landing-page .locale-button { color: #6b7380 !important; border: 1px solid rgb(225 227 232 / 85%) !important; background: rgb(255 255 255 / 92%) !important; box-shadow: 0 7px 18px rgb(106 24 31 / 12%) !important; }.landing-page .locale-button:hover, .landing-page .locale-button[aria-expanded="true"] { color: #6b7380 !important; background: #fff !important; box-shadow: 0 10px 22px rgb(106 24 31 / 20%) !important; }.landing-page .language-menu button { color: #394352 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }.landing-page .language-menu button:hover { color: #d51b29 !important; background: #fff2f3 !important; }
body.landing-page .locale button.locale-button:not(:disabled) { color: #4a5360 !important; border-color: rgb(225 227 232 / 92%) !important; background: #fff !important; box-shadow: 0 7px 18px rgb(106 24 31 / 12%) !important; }body.landing-page .locale .language-menu { background: #fff !important; border-color: #fff !important; }body.landing-page .locale .language-menu button:not(:disabled) { color: #394352 !important; border: 0 !important; background: #fff !important; box-shadow: none !important; }body.landing-page .locale .language-menu button:not(:disabled):hover { color: #d51b29 !important; background: #fff2f3 !important; }
body.landing-page .court-card .booking-confirm-actions .email-submit.booking-cancel:not(:disabled) { color: #fff !important; border-color: #05080d !important; background: #111722 !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 6px 14px rgb(8 12 19 / 24%) !important; }body.landing-page .court-card .booking-confirm-actions .email-submit.booking-cancel:not(:disabled):hover { color: #fff !important; border-color: #000 !important; background: #000 !important; }
#language-menu.language-menu { background: #fff !important; border-color: #fff !important; }#language-menu.language-menu > button { color: #394352 !important; background: #fff !important; box-shadow: none !important; }#language-menu.language-menu > button:hover { color: #d51b29 !important; background: #fff2f3 !important; }
body.landing-page header .locale button.locale-button[data-language-toggle]:not(:disabled) { color: #4a5360 !important; border: 1px solid rgb(225 227 232 / 92%) !important; background: #fff !important; box-shadow: 0 7px 18px rgb(106 24 31 / 12%) !important; }body.landing-page header .locale button.locale-button[data-language-toggle]:not(:disabled):hover, body.landing-page header .locale button.locale-button[data-language-toggle][aria-expanded="true"] { color: #4a5360 !important; background: #fff !important; }
.landing-page .next-button { color: #fff; border: 1px solid rgb(255 151 160 / 35%); background: radial-gradient(ellipse at 18% 0%, rgb(255 92 105 / 48%), transparent 42%), linear-gradient(112deg, #ef2436 0%, #bd0a1c 42%, #69040f 70%, #11151e 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 31%), inset 0 -2px 0 rgb(55 0 8 / 48%), 0 10px 20px rgb(124 3 18 / 32%); }.landing-page .next-button:hover { color: #fff; background: radial-gradient(ellipse at 18% 0%, rgb(255 147 156 / 58%), transparent 43%), linear-gradient(112deg, #ff3548 0%, #d40c20 42%, #79030f 70%, #090c13 100%); }
.landing-page .email-clear { color: #fff !important; border: 1px solid rgb(255 255 255 / 24%) !important; background: #111722 !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 4px 9px rgb(8 12 19 / 24%) !important; }.landing-page .email-clear:hover { color: #fff !important; background: #05080d !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 5px 11px rgb(8 12 19 / 32%) !important; }
.landing-page .service-option > span { color: #fff !important; background: #111722 !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 4px 9px rgb(8 12 19 / 20%) !important; }.landing-page .service-option > span i { font-size: 18px; line-height: 1; }
.service-option > span { border-radius: 50%; }.service-option.is-selected > span { background: #df202a !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 4px 9px rgb(169 9 23 / 28%) !important; }.service-option.is-selected { color: #fff; border-color: #05080d !important; background: #111722 !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 10px 20px rgb(8 12 19 / 28%) !important; }.service-option { grid-template-columns: 42px minmax(0, 1fr) auto; }.service-option-check { grid-column: 3; grid-row: 1 / 3; align-self: center; color: #fff; font-size: 20px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 20%)); }.service-option.is-selected .service-option-check { color: #ff9d1b; filter: drop-shadow(0 2px 3px rgb(116 55 0 / 25%)); }
body.landing-page .service-option > span { width:42px !important; min-width:42px !important; height:42px !important; border-radius:50% !important; }
.booking-date-picker-input { cursor: pointer !important; }.booking-date-modal-backdrop { position: fixed; z-index: 90; inset: 0; background: rgb(12 17 26 / 48%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }.booking-date-modal-backdrop[hidden] { display: none; }.flatpickr-calendar.booking-date-modal.open { position: fixed !important; z-index: 91 !important; top: 50% !important; left: 50% !important; width: min(calc(100vw - 40px), 390px); padding: 18px; border: 1px solid rgb(216 34 44 / 18%); border-radius: 22px; box-shadow: 0 24px 52px rgb(8 12 19 / 36%); transform: translate(-50%, -50%) !important; }.flatpickr-calendar.booking-date-modal.open::before, .flatpickr-calendar.booking-date-modal.open::after { display: none; }.flatpickr-calendar.booking-date-modal .flatpickr-months { position: relative; height: 36px; padding: 0 42px 10px; }.flatpickr-calendar.booking-date-modal .flatpickr-current-month { font: 900 17px/1.2 "Nunito Sans", sans-serif; }.flatpickr-calendar.booking-date-modal .flatpickr-current-month .cur-month { margin-right: 14px; }.flatpickr-calendar.booking-date-modal .flatpickr-current-month .flatpickr-monthDropdown-months { appearance: none; padding: 0; color: #111722; background: transparent; font: inherit; }.flatpickr-calendar.booking-date-modal .flatpickr-current-month .numInputWrapper { width: 48px; margin-left: 14px; }.flatpickr-calendar.booking-date-modal .flatpickr-current-month .numInputWrapper :is(.arrowUp, .arrowDown) { display: none; }.flatpickr-calendar.booking-date-modal .flatpickr-current-month input.cur-year { appearance: textfield; padding: 0; color: #111722; background: transparent; font: inherit; pointer-events: none; }.flatpickr-calendar.booking-date-modal .flatpickr-current-month input.cur-year::-webkit-inner-spin-button, .flatpickr-calendar.booking-date-modal .flatpickr-current-month input.cur-year::-webkit-outer-spin-button { appearance: none; display: none; margin: 0; }.flatpickr-calendar.booking-date-modal .flatpickr-prev-month, .flatpickr-calendar.booking-date-modal .flatpickr-next-month { top: 0 !important; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; transition: color .18s ease, background .18s ease, transform .18s ease; }.flatpickr-calendar.booking-date-modal .flatpickr-prev-month { left: 0 !important; }.flatpickr-calendar.booking-date-modal .flatpickr-next-month { right: 0 !important; }.flatpickr-calendar.booking-date-modal .flatpickr-prev-month:hover, .flatpickr-calendar.booking-date-modal .flatpickr-next-month:hover { color: #fff; background: #111722; transform: translateY(-1px); }.flatpickr-calendar.booking-date-modal .flatpickr-weekdays { height: 34px; }.flatpickr-calendar.booking-date-modal span.flatpickr-weekday { color: #6c7481; font: 800 12px/34px "Nunito Sans", sans-serif; }.flatpickr-calendar.booking-date-modal .flatpickr-rContainer, .flatpickr-calendar.booking-date-modal .flatpickr-days, .flatpickr-calendar.booking-date-modal .dayContainer { width: 100%; min-width: 0; max-width: none; }.flatpickr-calendar.booking-date-modal .flatpickr-day { max-width: none; height: 42px; color: #273243; border-radius: 12px; font: 800 14px/42px "Nunito Sans", sans-serif; }.flatpickr-calendar.booking-date-modal .flatpickr-day:hover { color: #fff; background: #111722; }.flatpickr-calendar.booking-date-modal .flatpickr-day.selected { color: #fff; border-color: #df202a; background: #df202a; box-shadow: 0 5px 11px rgb(201 18 31 / 25%); }
.flatpickr-calendar.booking-date-modal span.flatpickr-weekday:first-child, .flatpickr-calendar.booking-date-modal span.flatpickr-weekday:last-child, .flatpickr-calendar.booking-date-modal .flatpickr-day:nth-child(7n + 1), .flatpickr-calendar.booking-date-modal .flatpickr-day:nth-child(7n) { color: #df202a; }.flatpickr-calendar.booking-date-modal .flatpickr-day.selected { color: #fff; }
.booking-date-fields .select2-container { width: 100% !important; }.booking-date-fields .select2-container--default .select2-selection--single { box-sizing: border-box; height: 52px; border: 1px solid #f0a5ab; border-radius: 999px; background: #fff; }.booking-date-fields .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 46px 0 16px; color: #283244; font: 800 14px/50px "Nunito Sans", sans-serif; }.booking-date-fields .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #4c5666; }.booking-date-fields .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 11px; width: 32px; height: 50px; }.booking-date-fields .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #df202a transparent transparent; border-width: 6px 5px 0; }.booking-date-fields .select2-container--open .select2-selection--single { border-color: #df202a; box-shadow: 0 0 0 3px rgb(216 34 44 / 10%); }.msc-quantity-dropdown { overflow: hidden; border: 1px solid #f0a5ab !important; border-radius: 16px !important; box-shadow: 0 14px 28px rgb(112 29 41 / 20%); }.msc-quantity-dropdown .select2-results__options { max-height: 164px; padding: 6px 4px 6px 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c91524 transparent; }.msc-quantity-dropdown .select2-results__options::-webkit-scrollbar { width: 8px; }.msc-quantity-dropdown .select2-results__options::-webkit-scrollbar-track { margin: 6px 0; border-radius: 999px; background: transparent; }.msc-quantity-dropdown .select2-results__options::-webkit-scrollbar-thumb { min-height: 38px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #f13b49, #ad0715); box-shadow: 0 2px 5px rgb(120 5 18 / 25%); }.msc-quantity-dropdown .select2-results__options::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff5662, #c80b1b); }.msc-quantity-dropdown .select2-results__option { padding: 11px 13px; color: #273246; border-radius: 10px; font: 800 13px "Nunito Sans", sans-serif; }.msc-quantity-dropdown .select2-results__option--highlighted[aria-selected] { color: #fff; background: #111722 !important; }.msc-quantity-dropdown .select2-results__option[aria-selected=true] { color: #fff; background: #df202a; }
.booking-card > .select2-container--open { z-index: 20 !important; }.booking-card .select2-container--open .select2-dropdown { z-index: 21 !important; }
.quantity-modal-dialog { background: #fff !important; }.quantity-modal-options > button { border-color: #edf0f3 !important; }
.quantity-modal-native { position:absolute; width:1px !important; height:1px !important; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }.landing-page .quantity-modal-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; height:52px; padding:0 17px; color:#4c5666 !important; border:1px solid #f0a5ab !important; border-radius:999px; background:#fff !important; box-shadow:none !important; cursor:pointer; font:800 14px "Nunito Sans",sans-serif; text-align:left; }.landing-page .quantity-modal-trigger > span { color:inherit !important; }.quantity-modal-trigger i { color:#df202a; font-size:13px; }.quantity-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; }.quantity-modal[hidden] { display:none; }.quantity-modal-backdrop { position:absolute; inset:0; background:rgb(12 17 26 / 48%); backdrop-filter:blur(4px); }.quantity-modal-dialog { position:relative; z-index:1; width:min(100%,390px); padding:28px; border:1px solid #fff; border-radius:24px; background:#fff; box-shadow:0 24px 52px rgb(8 12 19 / 36%); }.quantity-modal-dialog > p { margin:0; color:#172033; font:900 22px/1.2 "Nunito Sans",sans-serif; }.quantity-modal-dialog > span { display:block; margin-top:7px; color:#758090; font:700 12px/1.5 "Nunito Sans",sans-serif; }.quantity-modal-close { position:absolute; top:15px; right:15px; display:grid; place-items:center; width:32px; height:32px; padding:0; color:#fff !important; border:0 !important; border-radius:50%; background:#111722 !important; box-shadow:none !important; cursor:pointer; }.quantity-modal-options { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:22px; }.quantity-modal-options > button { display:grid; place-items:center; gap:2px; min-height:74px; padding:8px 3px; color:#273246 !important; border:1px solid #edf0f3 !important; border-radius:15px; background:#fff !important; box-shadow:none !important; cursor:pointer; }.quantity-modal-options > button strong { color:inherit !important; font:900 23px/1 "Nunito Sans",sans-serif; }.quantity-modal-options > button small { color:#7b8591 !important; font:800 9px/1 "Nunito Sans",sans-serif; }.quantity-modal-options > button:hover,.quantity-modal-options > button.is-selected { color:#fff !important; border-color:#111722 !important; background:#111722 !important; }.quantity-modal-options > button:hover small,.quantity-modal-options > button.is-selected small { color:rgb(255 255 255 / 70%) !important; }
body.landing-page .welcome-screen .welcome-content .welcome-copy .booking-card .quantity-modal-trigger:not(:disabled), body.landing-page .welcome-screen .welcome-content .welcome-copy .booking-card .quantity-modal-trigger:not(:disabled):hover { color:#4c5666 !important; border-color:#f0a5ab !important; background:#fff !important; background-image:none !important; box-shadow:none !important; }.landing-page .quantity-modal-trigger > span { color:#4c5666 !important; }.landing-page .quantity-modal-trigger i { color:#df202a !important; }
.quantity-picker { position: relative; display: block; width: 100%; }.quantity-picker-native { position: absolute; width: 1px !important; height: 1px !important; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }.landing-page .quantity-picker-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 52px; padding: 0 17px; color: #4c5666 !important; border: 1px solid #f0a5ab !important; border-radius: 999px; background: #fff !important; box-shadow: none !important; cursor: pointer; font: 800 14px "Nunito Sans", sans-serif; text-align: left; }.landing-page .quantity-picker-trigger > span { color: inherit !important; }.landing-page .quantity-picker-trigger i { color: #df202a; font-size: 13px; transition: transform .2s ease; }.landing-page .quantity-picker-trigger[aria-expanded="true"] { border-color: #df202a !important; box-shadow: 0 0 0 3px rgb(216 34 44 / 10%) !important; }.landing-page .quantity-picker-trigger[aria-expanded="true"] i { transform: rotate(180deg); }.quantity-picker-menu { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; box-sizing: border-box; display: grid; gap: 3px; width: 100%; max-height: 164px; padding: 7px 5px 7px 7px; overflow-y: auto; border: 1px solid #f0a5ab; border-radius: 16px; background: #fff; box-shadow: 0 14px 28px rgb(112 29 41 / 20%); scrollbar-width: thin; scrollbar-color: #c91524 transparent; }.quantity-picker-menu[hidden] { display: none; }.quantity-picker-menu::-webkit-scrollbar { width: 8px; }.quantity-picker-menu::-webkit-scrollbar-track { margin: 6px 0; border-radius: 999px; background: transparent; }.quantity-picker-menu::-webkit-scrollbar-thumb { min-height: 38px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #f13b49, #ad0715); box-shadow: 0 2px 5px rgb(120 5 18 / 25%); }.quantity-picker-menu > button { min-height: 40px; padding: 0 12px; color: #273246 !important; border: 0 !important; border-radius: 10px; background: transparent !important; box-shadow: none !important; cursor: pointer; font: 800 13px "Nunito Sans", sans-serif; text-align: left; }.quantity-picker-menu > button:hover { color: #fff !important; background: #111722 !important; }.quantity-picker-menu > button.is-selected { color: #fff !important; background: #df202a !important; }
.booking-time-fields .select2-container { width: 100% !important; }.booking-time-fields .select2-container--default .select2-selection--single { height: 52px; border: 1px solid #f0a5ab; border-radius: 13px; background: #fff; }.booking-time-fields .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 15px; color: #283244; font: 700 14px/52px "Nunito Sans", sans-serif; }.booking-time-fields .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 10px; width: 30px; height: 52px; }.booking-time-fields .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #d8222c transparent transparent; border-width: 6px 5px 0; }.booking-time-fields .select2-container--open .select2-selection--single { border-color: #d8222c; box-shadow: 0 0 0 3px rgb(216 34 44 / 10%); }.msc-duration-dropdown { overflow: hidden; border: 1px solid #f0a5ab !important; border-radius: 13px !important; box-shadow: 0 12px 25px rgb(112 29 41 / 16%); }.msc-duration-dropdown .select2-results__option { padding: 10px 14px; color: #344054; font: 700 13px "Nunito Sans", sans-serif; }.msc-duration-dropdown .select2-results__option--highlighted[aria-selected] { background: #172232 !important; }.msc-duration-dropdown .select2-results__option[aria-selected=true] { color: #fff; background: #d8222c; }
.landing-page.is-booking-stage .booking-card :is(.booking-field, .booking-time-fields, input, select, .select2-container) { animation: none !important; transition: none !important; transform: none !important; }.landing-page.is-booking-stage .booking-card .service-shuttle, .landing-page.is-booking-stage .booking-card .email-submit { animation: service-shuttle-arrive .82s .24s cubic-bezier(.16, 1, .3, 1) both; }.landing-page.is-booking-stage .booking-card .email-submit { animation-name: booking-content-slide; animation-delay: .32s; }
.landing-page.is-booking-stage .booking-card :is(.email-card-title, .stage-copy, .booking-status, label > span) { animation: none !important; transition: none !important; transform: none !important; }
.landing-page.is-booking-stage .booking-card .email-submit { animation: none !important; }
.email-clear { display: grid; place-items: center; color: #d8222c; border: 1px solid #f1a8ae; background: #fff4f5; box-shadow: 0 2px 6px rgb(198 21 33 / 14%); }.email-clear:hover { color: #fff; border-color: #d8222c; background: #d8222c; box-shadow: 0 4px 9px rgb(198 21 33 / 25%); }
.landing-page .email-clear { position: relative; overflow: visible; }
.landing-page .email-clear::after { display: none !important; }
.landing-page .email-clear-tooltip { position: absolute; z-index: 12; bottom: calc(100% + 14px); left: 50%; width: max-content; max-width: 190px; padding: 10px 14px; color: #111722 !important; border: 1px solid rgb(216 34 44 / 18%); border-radius: 16px 16px 16px 5px; background: #fff; box-shadow: 0 13px 24px rgb(56 7 14 / 38%), 0 5px 9px rgb(56 7 14 / 25%), inset 0 1px 0 #fff; font: 900 11px/1 "Nunito Sans", sans-serif; letter-spacing: .01em; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(9px) scale(.82); transform-origin: bottom center; transition: opacity .18s ease, transform .25s cubic-bezier(.2, 1.45, .45, 1); }
.landing-page .email-clear-tooltip::after { position: absolute; bottom: -6px; left: 50%; width: 13px; height: 13px; content: ""; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); }
.landing-page .email-clear:is(:hover, :focus-visible) .email-clear-tooltip, .landing-page .email-clear.is-tooltip-visible .email-clear-tooltip { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); animation: reset-tooltip-bounce .9s cubic-bezier(.36, .07, .19, .97) infinite; }
@keyframes reset-tooltip-bounce { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg) scale(1); } 16% { transform: translateX(calc(-50% - 2px)) translateY(-3px) rotate(-3deg) scale(1.04); } 32% { transform: translateX(calc(-50% + 2px)) translateY(0) rotate(3deg) scale(1); } 48% { transform: translateX(calc(-50% - 1px)) translateY(-2px) rotate(-2deg) scale(1.02); } 64% { transform: translateX(calc(-50% + 1px)) translateY(0) rotate(2deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .landing-page .email-clear-tooltip { transition: none; }.landing-page .email-clear:is(:hover, :focus-visible) .email-clear-tooltip, .landing-page .email-clear.is-tooltip-visible .email-clear-tooltip { animation: none; } }
.booking-card .email-submit { min-height: 56px; color: #fff; border: 1px solid rgb(255 255 255 / 23%); background: linear-gradient(105deg, #080c13, #151d29); box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), inset 0 -1px 0 rgb(0 0 0 / 62%), 0 12px 24px rgb(8 12 19 / 38%); font-size: 15px; }.booking-card .email-submit:hover { background: linear-gradient(105deg, #05080d, #111927); }
.booking-card [data-booking-fields] { display: grid; gap: 16px; }.booking-terms { display: grid; width: 100%; gap: 16px; }.booking-terms #booking-terms-title { color: #171a22; font-size: 21px; }.booking-terms #booking-terms-title > span { color: #171a22 !important; }.booking-terms #booking-terms-title > .booking-terms-title-accent { color: #c91524 !important; }.booking-terms-list { box-sizing: border-box; width: 100%; max-height: min(41vh, 350px); margin: 0; padding: 14px 14px 14px 34px; overflow-y: auto; color: #171a22; border: 1px solid #f0d1d4; border-radius: 14px; background: #fff8f8; font-size: 13px; font-weight: 600; line-height: 1.6; scrollbar-width: thin; scrollbar-color: #c91524 transparent; }.booking-terms-list::-webkit-scrollbar { width: 8px; }.booking-terms-list::-webkit-scrollbar-track { margin: 8px 2px; border-radius: 999px; background: transparent; }.booking-terms-list::-webkit-scrollbar-thumb { min-height: 42px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #f13b49, #ad0715); box-shadow: 0 2px 5px rgb(120 5 18 / 25%); }.booking-terms-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }.booking-terms-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff5662, #c80b1b); }.booking-terms-list li + li { margin-top: 9px; }.booking-terms-list li::marker { color: #c91524; font-weight: 900; }.booking-terms-agreement { display: flex; align-items: flex-start; gap: 10px; color: #171a22; font-size: 13px; font-weight: 800; line-height: 1.45; cursor: pointer; }.booking-terms-agreement input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #c91524; cursor: pointer; }.booking-terms .email-submit:disabled { cursor: not-allowed; opacity: .52; filter: grayscale(.25); }
.landing-page.is-booking-stage .booking-terms-list { width: calc(100% + 92px); max-width: none; margin-inline: -46px; border-inline: 0; border-radius: 0; }.landing-page.is-booking-stage .booking-terms-list::-webkit-scrollbar-track { margin-right: 0; }.landing-page.is-booking-stage .booking-terms-list::-webkit-scrollbar-thumb { border-radius: 999px 0 0 999px; }@media (max-width: 700px) and (orientation: portrait) { .landing-page.is-booking-stage .booking-terms-list { width: calc(100% + 48px); margin-inline: -24px; } }
/* Shared red action button treatment. Utility and cancel buttons retain their own dark styling. */
body.landing-page :is(.next-button, .email-submit:not(.booking-cancel):not(.booking-schedule-cancel):not(.booking-schedule-trigger):not(.payment-cancel):not(.payment-detail-button):not(.membership-wizard-back)):not(:disabled) { color: #fff !important; border-color: rgb(255 129 140 / 58%) !important; background: linear-gradient(105deg, #ff2c3c 0%, #ee1023 48%, #c50719 100%) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), inset 0 -2px 0 rgb(116 0 12 / 28%), 0 10px 20px rgb(179 8 24 / 31%) !important; }.landing-page :is(.next-button, .email-submit:not(.booking-cancel):not(.booking-schedule-cancel):not(.booking-schedule-trigger):not(.payment-cancel):not(.payment-detail-button):not(.membership-wizard-back)):not(:disabled):hover { color: #fff !important; background: linear-gradient(105deg, #ff4654 0%, #f3172b 48%, #d3091c 100%) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 36%), inset 0 -2px 0 rgb(116 0 12 / 30%), 0 13px 24px rgb(179 8 24 / 38%) !important; }.landing-page :is(.next-button, .email-submit:not(.booking-cancel):not(.booking-schedule-cancel):not(.booking-schedule-trigger):not(.payment-cancel):not(.payment-detail-button):not(.membership-wizard-back)):not(:disabled):active { background: linear-gradient(105deg, #de1122, #b70616) !important; box-shadow: inset 0 2px 4px rgb(90 0 8 / 27%), 0 5px 11px rgb(179 8 24 / 25%) !important; }
.date-input-wrap { position: relative; display: block; }.date-input-wrap input[type="date"] { padding-right: 54px; }.date-input-wrap input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }.date-input-wrap .date-picker-button { position: absolute; top: 50%; right: 9px; z-index: 4; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #d8222c; border: 1px solid #f1a8ae; border-radius: 50%; background: #fff4f5; box-shadow: 0 2px 6px rgb(198 21 33 / 14%); cursor: pointer; transform: translateY(-50%); }.date-input-wrap .date-picker-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }.date-input-wrap .date-picker-button:hover { color: #fff; border-color: #d8222c; background: #d8222c; box-shadow: 0 4px 9px rgb(198 21 33 / 25%); }
.phone-input-wrap { display: flex; align-items: center; height: 52px; overflow: hidden; border: 1px solid #f0a5ab; border-radius: 13px; background: #fff; }
.phone-input-wrap b { display: grid; place-items: center; align-self: stretch; padding: 0 15px; color: #d81825; border-right: 1px solid #f4c5c9; background: #fff7f8; font-size: 14px; }
.phone-input-wrap input { height: 50px; border: 0; border-radius: 0; }
@keyframes booking-content-slide { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 700px) and (orientation: portrait) { .landing-page.is-booking-stage .welcome-content { padding: 92px 20px 88px; }.landing-page.is-booking-stage .booking-card, .landing-page.is-court-stage .court-card { width: calc(100vw - 40px); padding: 28px 24px; gap: 15px; }.landing-page.is-booking-stage .booking-card .email-card-title, .landing-page.is-court-stage .court-card .email-card-title { padding-right: 66px; font-size: clamp(23px, 6.8vw, 27px); }.stage-flow { width: calc(100vw - 20px); }.booking-field input, .phone-input-wrap { height: 50px; } }
@keyframes glass-reflection { 0%, 20% { opacity: 0; transform: translateX(-140%); } 32% { opacity: .62; transform: translateX(-68%); } 82% { opacity: .62; transform: translateX(68%); } 92%, 100% { opacity: 0; transform: translateX(140%); } }

.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage) .next-button { min-width: 260px; padding: 20px 38px; font-size: 16px; }
@media (max-width: 700px) and (orientation: portrait) { .landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage) .next-button { min-width: 225px; padding: 18px 34px; font-size: 15px; } }

.landing-page.is-email-stage .email-card .email-submit:not(.is-loading), .landing-page.is-otp-stage .otp-card .email-submit:not(.is-loading) { animation: none; }

@media (prefers-reduced-motion: no-preference) { .landing-page.is-services-stage .choice-card .service-option[data-service="booking"]::before { animation-delay: .7s; }.landing-page.is-services-stage .choice-card .service-option[data-service="membership"]::before { animation-name: glass-reflection-reverse; animation-delay: 3.45s; } }
.landing-page:is(.is-booking-stage, .is-court-stage) :is(.booking-card, .court-card) { animation: stage-card-flip .62s cubic-bezier(.16, .9, .28, 1.05) both; }
.landing-page:is(.is-booking-stage, .is-court-stage) :is(.booking-card, .court-card) > * { animation: none; }
@keyframes glass-reflection-reverse { 0%, 20% { opacity: 0; transform: translateX(140%); } 32% { opacity: .62; transform: translateX(68%); } 82% { opacity: .62; transform: translateX(-68%); } 92%, 100% { opacity: 0; transform: translateX(-140%); } }

.booking-auto-court { display: grid; gap: 3px; padding: 13px 14px; color: #fff; border: 1px solid #0b674f; border-radius: 16px; background: linear-gradient(135deg, #053d30, #08785d); box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 8px 18px rgb(2 66 50 / 18%); }.booking-auto-court span { color: rgb(255 255 255 / 70%); font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }.booking-auto-court strong { font-size: 15px; }.booking-auto-court small { color: #ffe168; font-size: 11px; font-weight: 900; }
.booking-card :is(.booking-date-input, .booking-date-picker-input, .booking-time-input) { display: block; box-sizing: border-box; width: 100% !important; height: 52px; padding: 0 54px 0 16px; color: #283244; border: 1px solid #f0a5ab; border-radius: 999px; outline: 0; background: #fff; font: 700 14px/52px inherit; }.booking-card :is(.booking-date-input, .booking-date-picker-input, .booking-time-input):focus { border-color: #dc1a28; box-shadow: 0 0 0 3px rgb(220 26 40 / 12%); }.booking-card :is(.date-input-wrap, .time-input-wrap) > :is(.booking-date-input, .booking-time-input, .booking-date-picker-input) { position: relative; z-index: 2; }.booking-card :is(.date-input-wrap, .time-input-wrap) > :is(.date-picker-button, .time-picker-button) { z-index: 4; }.flatpickr-calendar { border: 1px solid rgb(221 180 186 / 90%); border-radius: 16px; box-shadow: 0 16px 34px rgb(92 16 28 / 22%); font-family: inherit; }.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange { border-color: #bd0a1c; background: linear-gradient(135deg, #ef2436, #79040f); }.flatpickr-time input:hover, .flatpickr-time input:focus { background: #fff0f2; }.flatpickr-am-pm { display: none; }
.booking-time-fields .time-input-wrap .select2-selection--single { padding-right: 40px; }.msc-time-dropdown { overflow: hidden; border: 1px solid #e7b6bc !important; border-radius: 14px !important; box-shadow: 0 14px 28px rgb(105 18 31 / 22%); }.msc-time-dropdown .select2-results__option { padding: 11px 14px; color: #273246; font: 800 13px "Nunito Sans", sans-serif; }.msc-time-dropdown .select2-results__option--highlighted[aria-selected] { color: #fff; background: linear-gradient(112deg, #d91526, #820611) !important; }.msc-time-dropdown .select2-results__option[aria-selected=true] { color: #ffe168; background: #1a202c; }
.landing-page :is(.date-picker-button, .time-picker-button)::before { display: none !important; animation: none !important; }

/* Keep the confirmation panel consistent with the other white form cards. */
.landing-page.is-confirm-stage .court-card { color: #1c2636; border-color: rgb(255 255 255 / 90%); background: linear-gradient(145deg, rgb(255 255 255 / 97%), rgb(255 255 255 / 83%)); box-shadow: 0 21px 40px rgb(79 22 31 / 22%); }.landing-page.is-confirm-stage .court-card::before, .landing-page.is-confirm-stage .court-card::after { display: none; }.landing-page.is-confirm-stage .court-card :is(.email-card-title, .stage-copy) { color: inherit; }.landing-page.is-confirm-stage .court-card .stage-copy { color: #717b89; }
.landing-page.is-confirm-stage :is(.booking-request-summary, .booking-auto-court, .booking-order-summary, .booking-unavailable) { color: #1c2636; border-color: #e3e7ec; background: #fff; box-shadow: none; }.landing-page.is-confirm-stage .booking-request-summary span, .landing-page.is-confirm-stage .booking-order-summary :is(p span, header span) { color: #6b7685; }.landing-page.is-confirm-stage .booking-request-summary strong, .landing-page.is-confirm-stage .booking-auto-court :is(strong, small, span), .landing-page.is-confirm-stage .booking-order-summary :is(header strong, p b) { color: #1c2636; }.landing-page.is-confirm-stage .booking-auto-court::after { display: none; }.landing-page.is-confirm-stage .booking-order-summary p { border-color: #e9edf1; }.landing-page.is-confirm-stage .court-card .email-submit { color: #fff; border-color: rgb(255 255 255 / 18%); background: linear-gradient(105deg, #070b12, #182231); box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 -1px 0 rgb(0 0 0 / 55%), 0 12px 24px rgb(8 12 19 / 30%); }
.landing-page.is-confirm-stage .court-card { color: #1c2636 !important; border-color: rgb(255 255 255 / 90%) !important; background: linear-gradient(145deg, rgb(255 255 255 / 97%), rgb(255 255 255 / 83%)) !important; box-shadow: 0 21px 40px rgb(79 22 31 / 22%) !important; }.landing-page.is-confirm-stage .court-card::before, .landing-page.is-confirm-stage .court-card::after { display: none !important; }.landing-page.is-confirm-stage .court-card :is(.email-card-title, .stage-copy) { color: #1c2636 !important; }.landing-page.is-confirm-stage .court-card .stage-copy { color: #717b89 !important; }.landing-page.is-confirm-stage :is(.booking-request-summary, .booking-auto-court, .booking-order-summary, .booking-unavailable) { color: #1c2636 !important; border-color: #e3e7ec !important; background: #fff !important; box-shadow: none !important; }.landing-page.is-confirm-stage .booking-auto-court :is(strong, small, span), .landing-page.is-confirm-stage .booking-order-summary :is(header strong, header span, p b, p span), .landing-page.is-confirm-stage .booking-request-summary :is(strong, span) { color: #1c2636 !important; }.landing-page.is-confirm-stage .booking-auto-court::after { display: none !important; }.landing-page.is-confirm-stage .court-card .email-submit { color: #fff !important; border-color: rgb(255 255 255 / 18%) !important; background: linear-gradient(105deg, #070b12, #182231) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), inset 0 -1px 0 rgb(0 0 0 / 55%), 0 12px 24px rgb(8 12 19 / 30%) !important; }
.landing-page.is-confirm-stage .court-card { overflow: visible !important; }.landing-page.is-confirm-stage .court-card .service-shuttle { z-index: 5; }
.landing-page.is-confirm-stage .booking-request-summary span::before, .landing-page.is-confirm-stage .booking-auto-court span::before, .landing-page.is-confirm-stage .booking-order-summary header strong::before { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 7px; color: #c91524; border: 1px solid #f1c4c9; border-radius: 50%; background: #fff5f6; font-family: "Font Awesome 6 Free"; font-size: 9px; font-weight: 900; vertical-align: middle; }.landing-page.is-confirm-stage .booking-request-summary span::before { content: "\f073"; }.landing-page.is-confirm-stage .booking-auto-court span::before { content: "\f1ad"; }.landing-page.is-confirm-stage .booking-order-summary header strong::before { content: "\f02b"; }.landing-page.is-confirm-stage .booking-request-summary, .landing-page.is-confirm-stage .booking-auto-court, .landing-page.is-confirm-stage .booking-order-summary { box-shadow: 0 5px 14px rgb(40 51 64 / 5%) !important; }.landing-page.is-confirm-stage .booking-order-summary header { padding-bottom: 8px; border-bottom: 1px solid #edf0f3; }
.landing-page.is-confirm-stage .booking-auto-court small { display: inline-flex; align-items: center; width: fit-content; margin-top: 5px; padding: 7px 11px; color: #b20f20 !important; border: 1px solid #f0c7cc; border-radius: 999px; background: linear-gradient(105deg, #fff8f8, #fff); box-shadow: 0 4px 10px rgb(199 22 35 / 7%); font-size: 14px; font-weight: 950; letter-spacing: .01em; }.landing-page.is-confirm-stage .booking-order-summary header span { padding: 7px 11px; color: #fff !important; border-radius: 11px; background: linear-gradient(135deg, #c90f21, #ef4050); box-shadow: 0 6px 13px rgb(191 15 30 / 22%); font-size: 18px; font-weight: 950; letter-spacing: -.02em; }.landing-page.is-confirm-stage .booking-order-summary p span { color: #b20f20 !important; font-size: 12px; font-weight: 900; }.landing-page.is-confirm-stage .booking-auto-court strong { font-size: 17px; letter-spacing: -.01em; }
.landing-page.is-confirm-stage .booking-auto-court > span { display: none; }.landing-page.is-confirm-stage .booking-auto-court { gap: 7px; }
.landing-page.is-confirm-stage .booking-request-summary { display: none; }
.landing-page.is-confirm-stage .booking-order-summary > p { align-items: center; margin-top: 7px; padding: 10px 11px; border: 1px solid #edf0f3; border-radius: 11px; background: linear-gradient(105deg, #fff, #fff8f9); }.landing-page.is-confirm-stage .booking-order-summary > header + p { margin-top: 0; }.landing-page.is-confirm-stage .booking-order-summary > p b { font-size: 12px; }.landing-page.is-confirm-stage .booking-order-summary > p span { line-height: 1.45; }
.landing-page.is-confirm-stage .booking-order-summary { max-height: 280px; padding-right: 8px; overflow-y: auto; scrollbar-gutter: stable; }.landing-page.is-confirm-stage .booking-order-summary > header { position: sticky; z-index: 1; top: 0; padding-top: 2px; background: #fff; }
.booking-date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.booking-date-fields.booking-quantity-fields, .booking-date-fields:has(> .booking-field:only-child) { grid-template-columns: 1fr; }.booking-date-fields select { box-sizing: border-box; width: 100%; height: 52px; padding: 0 14px; color: #283244; border: 1px solid #f0a5ab; border-radius: 13px; outline-color: #df202a; background: #fff; font: inherit; font-size: 14px; }@media (max-width: 520px) { .booking-date-fields { grid-template-columns: 1fr; } }
.booking-date-fields .select2-container { width: 100% !important; }.booking-date-fields .select2-container--default .select2-selection--single { height: 52px; border: 1px solid #f0a5ab; border-radius: 999px; background: #fff; }.booking-date-fields .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 15px; color: #283244; font: 700 14px/52px "Nunito Sans", sans-serif; }.booking-date-fields .select2-container--default .select2-selection--single .select2-selection__arrow { top: 0; right: 10px; width: 30px; height: 52px; }.booking-date-fields .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #d8222c transparent transparent; border-width: 6px 5px 0; }.booking-date-fields .select2-container--open .select2-selection--single { border-color: #d8222c; box-shadow: 0 0 0 3px rgb(216 34 44 / 10%); }
.landing-page.is-booking-stage .booking-card :is(input, select, .select2-selection, .date-input-wrap, .time-input-wrap)::before, .landing-page.is-booking-stage .booking-card :is(input, select, .select2-selection, .date-input-wrap, .time-input-wrap)::after { animation: none !important; transition: none !important; }.landing-page.is-booking-stage .booking-card :is(input, select, .select2-container, .select2-selection, .date-input-wrap, .time-input-wrap) { animation: none !important; transition: none !important; transform: none !important; }
.landing-page.is-booking-stage .booking-card > .booking-date-fields, .landing-page.is-booking-stage .booking-card > .booking-date-fields > .booking-field { animation: none !important; transition: none !important; transform: none !important; }
@media (max-width: 520px) { .landing-page.is-confirm-stage .booking-auto-court small { font-size: 13px; }.landing-page.is-confirm-stage .booking-order-summary header span { font-size: 16px; } }

/* Premium presentation for the final booking confirmation. */
.landing-page.is-confirm-stage .court-card { position: relative; overflow: hidden; color: #eef3f6; border-color: rgb(255 255 255 / 18%); background: radial-gradient(circle at 92% 4%, rgb(241 73 86 / 30%), transparent 27%), radial-gradient(circle at 8% 100%, rgb(54 180 145 / 22%), transparent 35%), linear-gradient(135deg, #101923, #1d2936 55%, #2d1520); box-shadow: 0 28px 58px rgb(22 10 16 / 36%), inset 0 1px 0 rgb(255 255 255 / 13%); }.landing-page.is-confirm-stage .court-card::before { position: absolute; inset: 0; content: ''; background: linear-gradient(120deg, transparent 0 44%, rgb(255 255 255 / 7%) 44.2% 44.7%, transparent 45% 100%); pointer-events: none; }.landing-page.is-confirm-stage .court-card :is(.email-card-title, .stage-copy) { color: #fff; }.landing-page.is-confirm-stage .court-card .stage-copy { color: rgb(231 238 243 / 74%); }.landing-page.is-confirm-stage .booking-request-summary { border-color: rgb(255 255 255 / 13%); background: rgb(255 255 255 / 8%); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%); }.landing-page.is-confirm-stage .booking-request-summary span { color: rgb(231 238 243 / 62%); }.landing-page.is-confirm-stage .booking-request-summary strong { color: #ffd56d; }.landing-page.is-confirm-stage .booking-auto-court { position: relative; overflow: hidden; border-color: rgb(255 213 109 / 34%); background: linear-gradient(115deg, rgb(255 213 109 / 18%), rgb(255 255 255 / 7%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 11%); }.landing-page.is-confirm-stage .booking-auto-court::after { position: absolute; top: -18px; right: -10px; width: 76px; height: 76px; content: ''; border: 1px solid rgb(255 213 109 / 24%); border-radius: 50%; }.landing-page.is-confirm-stage .booking-auto-court :is(span, small) { color: rgb(255 236 179 / 76%); }.landing-page.is-confirm-stage .booking-auto-court strong { color: #fff7da; }.landing-page.is-confirm-stage .booking-order-summary { border-color: rgb(255 255 255 / 12%); background: rgb(6 13 20 / 34%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }.landing-page.is-confirm-stage .booking-order-summary :is(header strong, p b) { color: #f7fafc; }.landing-page.is-confirm-stage .booking-order-summary :is(header span, p span) { color: #ffd56d; }.landing-page.is-confirm-stage .booking-order-summary p { border-color: rgb(255 255 255 / 13%); }.landing-page.is-confirm-stage .court-card .email-submit { position: relative; overflow: hidden; min-height: 58px; letter-spacing: .02em; border-color: rgb(255 229 145 / 48%); background: linear-gradient(105deg, #df2634, #ff6570); box-shadow: 0 14px 25px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 35%); }.landing-page.is-confirm-stage .court-card .email-submit::after { position: absolute; top: 0; left: -80%; width: 55%; height: 100%; content: ''; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 34%), transparent); transform: skewX(-24deg); transition: left .55s ease; }.landing-page.is-confirm-stage .court-card .email-submit:hover::after { left: 130%; }
.landing-page.is-confirm-stage .court-card .booking-confirm-actions .email-submit.booking-cancel:not(:disabled) { color: #fff !important; border-color: #05080d !important; background: #05080d !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 14px 25px rgb(0 0 0 / 34%) !important; }.landing-page.is-confirm-stage .court-card .booking-confirm-actions .email-submit.booking-cancel:not(:disabled):hover { background: #000 !important; border-color: #000 !important; }
.payment-qr { display: grid; justify-items: center; gap: 14px; padding: 20px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 18px; background: rgb(5 10 17 / 42%); }.payment-qr img { display: block; width: min(100%, 280px); aspect-ratio: 1; padding: 10px; background: #fff; border-radius: 14px; }.payment-qr > div { display: flex; justify-content: space-between; width: min(100%, 360px); gap: 16px; color: rgb(255 255 255 / 72%); font-size: 12px; font-weight: 800; }.payment-qr strong { color: #fff; text-align: right; }.landing-page.is-payment-stage .court-card .booking-confirm-actions { display: none; }
.landing-page.is-confirm-stage .court-card { gap: 10px; }.landing-page.is-confirm-stage [data-court-status]:empty { display: none; }
@keyframes booking-action-reflection { 0%, 8% { opacity: 0; transform: translateX(-140%); } 12% { opacity: .62; transform: translateX(-68%); } 27% { opacity: .62; transform: translateX(68%); } 33%, 100% { opacity: 0; transform: translateX(140%); } }@media (prefers-reduced-motion: no-preference) { .booking-confirm-actions .email-submit:not(.is-loading)::before { animation: booking-action-reflection 8s .7s cubic-bezier(.38, .02, .24, 1) infinite; }.booking-confirm-actions .email-submit:nth-child(2):not(.is-loading)::before { animation-delay: 4.7s; } }
.swal2-popup .booking-alert-close { border-radius: 999px !important; background: #05080d !important; box-shadow: 0 7px 15px rgb(0 0 0 / 28%) !important; }
body.landing-page:not(.is-booking-stage) .stage-flow button[data-stage="confirm"] + .flow-arrow, body.landing-page:not(.is-booking-stage) .stage-flow button[data-stage="payment"] { display: none; }
.swal2-container .swal2-confirm.booking-alert-close:not(:disabled) { color: #fff !important; border-color: #05080d !important; background: #05080d !important; box-shadow: 0 7px 15px rgb(0 0 0 / 28%) !important; }.payment-qr-generated { display: grid; place-items: center; width: min(100%, 280px); min-height: 280px; padding: 10px; background: #fff; border-radius: 14px; }.payment-qr-generated img { width: 100%; height: auto; }
.landing-page.is-payment-stage .payment-qr-image, .landing-page.is-payment-stage .payment-qr-generated { display: block; width: min(100%, 280px); margin: 0 auto; padding: 10px; background: #fff; border: 1px solid rgb(216 225 232 / 94%); border-radius: 18px; box-shadow: 0 14px 28px rgb(37 44 55 / 17%); }.landing-page.is-payment-stage .payment-qr-generated { display: grid; place-items: center; }.payment-countdown { margin: -4px 0 0; color: #c31525; font-size: 12px; font-weight: 900; text-align: center; }.payment-details { display: grid; gap: 0; overflow: hidden; border: 1px solid rgb(218 226 233 / 94%); border-radius: 16px; background: #fff; box-shadow: 0 8px 18px rgb(53 61 72 / 9%); }.payment-details > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; color: #737e8c; font-size: 12px; font-weight: 800; }.payment-details > div + div { border-top: 1px solid rgb(226 231 236 / 92%); }.payment-details strong { color: #c31525; text-align: right; }
.landing-page.is-payment-stage .booking-availability { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(240px, 1.1fr); align-items: center; column-gap: 28px; row-gap: 6px; }.landing-page.is-payment-stage :is(.payment-qr-image, .payment-qr-generated) { grid-column: 1; grid-row: 1 / span 2; }.landing-page.is-payment-stage .payment-countdown { grid-column: 2; grid-row: 1; }.landing-page.is-payment-stage .payment-details { grid-column: 2; grid-row: 2; }@media (max-width: 700px), (orientation: portrait) { .landing-page.is-payment-stage .booking-availability { grid-template-columns: 1fr; row-gap: 10px; }.landing-page.is-payment-stage :is(.payment-qr-image, .payment-qr-generated), .landing-page.is-payment-stage .payment-countdown, .landing-page.is-payment-stage .payment-details { grid-column: 1; grid-row: auto; } }
.landing-page.is-payment-stage .payment-cancel { grid-column: 2; grid-row: 3; min-height: 48px; margin-top: -8px; color: #fff !important; border-color: #05080d !important; background: #05080d !important; box-shadow: 0 8px 16px rgb(0 0 0 / 23%) !important; }@media (max-width: 700px), (orientation: portrait) { .landing-page.is-payment-stage .payment-cancel { grid-column: 1; grid-row: auto; } }
.landing-page.is-payment-stage .court-card { padding-bottom: 6px; }
.landing-page.is-payment-stage .payment-countdown { display: grid; gap: 9px; color: #394352; font-size: 15px; font-weight: 800; line-height: 1.2; text-align: center; }.landing-page.is-payment-stage .payment-countdown strong { color: #05080d; font-size: clamp(42px, 5.6vw, 58px); font-weight: 900; letter-spacing: .04em; line-height: 1; }.landing-page.is-payment-stage .payment-countdown.is-urgent, .landing-page.is-payment-stage .payment-countdown.is-urgent strong { color: #c31525; }
.landing-page.is-payment-stage .booking-availability { grid-template-columns: minmax(220px, .9fr) minmax(240px, 1.1fr); align-items: center; column-gap: 28px; row-gap: 0; }.landing-page.is-payment-stage :is(.payment-qr-image, .payment-qr-generated) { grid-column: 1; grid-row: auto; }.landing-page.is-payment-stage .payment-info { display: grid; align-content: center; gap: 8px; grid-column: 2; }.landing-page.is-payment-stage .payment-info > :is(.payment-countdown, .payment-details, .payment-cancel) { grid-column: auto; grid-row: auto; }.landing-page.is-payment-stage .payment-cancel { margin-top: 0; }@media (max-width: 700px), (orientation: portrait) { .landing-page.is-payment-stage .booking-availability { grid-template-columns: 1fr; row-gap: 12px; }.landing-page.is-payment-stage :is(.payment-qr-image, .payment-qr-generated), .landing-page.is-payment-stage .payment-info { grid-column: 1; grid-row: auto; } }
.landing-page.is-payment-stage .payment-qr { position: relative; gap: 18px; padding: 26px; overflow: hidden; border: 1px solid rgb(218 34 44 / 18%); background: linear-gradient(145deg, #fff, #fff4f5); box-shadow: 0 18px 32px rgb(116 20 33 / 14%), inset 0 1px 0 #fff; }.landing-page.is-payment-stage .payment-qr::before { position: absolute; top: 0; left: 50%; width: 92px; height: 4px; content: ''; border-radius: 0 0 999px 999px; background: linear-gradient(90deg, #d81725, #ff6b75); transform: translateX(-50%); }.landing-page.is-payment-stage .payment-qr :is(.payment-qr-generated, img) { position: relative; z-index: 1; border: 1px solid rgb(214 222 229 / 90%); border-radius: 18px; box-shadow: 0 12px 24px rgb(33 42 54 / 15%); }.landing-page.is-payment-stage .payment-qr > div { position: relative; z-index: 1; width: min(100%, 360px); padding: 10px 12px; color: #727d8b; border-top: 1px solid rgb(219 226 233 / 90%); font-size: 12px; }.landing-page.is-payment-stage .payment-qr > div strong { color: #c91525; font-size: 13px; }
.header-actions { display: flex; align-items: center; gap: 24px; }.fullscreen-button { display: inline; width: auto; min-height: 0; padding: 0; color: #fff; border: 0; border-radius: 0; outline: 0; appearance: none; background: transparent; box-shadow: none; cursor: pointer; font-size: 30px; line-height: 1; }.fullscreen-button::before { display: none !important; content: none !important; animation: none !important; }.fullscreen-button:hover { color: #fff; opacity: .72; }.fullscreen-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }.whatsapp-button { display: inline-grid; place-items: center; width: 38px; height: 38px; color: #fff; border: 1px solid rgb(255 255 255 / 22%); border-radius: 999px; background: #25d366; box-shadow: 0 10px 20px rgb(16 128 72 / 24%); font-size: 22px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }.whatsapp-button:hover { color: #fff; background: #1fbd5c; box-shadow: 0 13px 24px rgb(16 128 72 / 32%); transform: translateY(-1px); }.whatsapp-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
body.landing-page .welcome-header .header-actions .fullscreen-button.fullscreen-button:not(:disabled) { color: #fff !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; }body.landing-page .welcome-header .header-actions .fullscreen-button.fullscreen-button:not(:disabled):hover { color: #fff !important; background: transparent !important; opacity: .72; }

/* Opening actions and in-place access scanner */
.opening-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; }.opening-actions .next-button,.opening-scan-button { position:relative; isolation:isolate; overflow:hidden; }.opening-actions .next-button { margin-top:0; }.opening-actions .next-button::after,.opening-scan-button::after { position:absolute; z-index:-1; top:-65%; left:-42%; width:25%; height:230%; content:""; background:linear-gradient(90deg,transparent,rgb(255 255 255 / 42%),transparent); transform:rotate(22deg) translateX(-520%); animation:opening-button-shine 4.6s ease-in-out infinite; }.opening-actions .next-button::after { animation-delay:2.3s; }.opening-scan-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-width:170px; padding:13px 20px; color:#fff; border:1px solid #05080d; border-radius:999px; background:#05080d; box-shadow:0 9px 18px rgb(5 8 13 / 25%),inset 0 1px 0 rgb(255 255 255 / 15%); cursor:pointer; font:900 13px/1 "Nunito Sans",sans-serif; transition:transform .2s ease,box-shadow .2s ease; }.opening-scan-button:hover { color:#fff; background:#151b25; box-shadow:0 12px 20px rgb(5 8 13 / 32%); transform:translateY(-2px); }.opening-scan-card { display:grid; gap:13px; width:min(100%,500px); padding:30px !important; }.opening-scan-card h2 { margin:0; color:#202a38; font-size:clamp(22px,3vw,29px); line-height:1.15; }.opening-scan-card > p { margin:0; color:#687483; font-size:13px; line-height:1.6; }.opening-scan-card .scan-access-badge { justify-self:start; }.opening-scan-card .scan-reader { margin-top:4px; }.opening-scan-card .scan-status { margin:0; }.landing-intro[hidden], .opening-scan-card[hidden] { display:none !important; }.landing-intro.is-opening-flip-out, .opening-scan-card.is-opening-flip-out { animation:opening-flip-out .22s ease-in both; }.landing-intro.is-opening-flip-in, .opening-scan-card.is-opening-flip-in { animation:opening-flip-in .42s cubic-bezier(.2,1.2,.3,1) both; }@keyframes opening-button-shine { 0%,44%,100% { transform:rotate(22deg) translateX(-520%); } 58%,72% { transform:rotate(22deg) translateX(650%); } }@keyframes opening-flip-out { to { opacity:0; transform:perspective(900px) rotateY(-88deg) translateX(-22px); } }@keyframes opening-flip-in { from { opacity:0; transform:perspective(900px) rotateY(88deg) translateX(22px); } to { opacity:1; transform:perspective(900px) rotateY(0) translateX(0); } }@media (max-width:700px) { .opening-actions { flex-wrap:nowrap; width:min(100%,360px); gap:9px; }.opening-actions .next-button,.opening-scan-button { flex:1 1 0; min-width:0; min-height:50px; padding:12px 10px; font-size:11px; white-space:nowrap; }.opening-scan-card { width:100%; padding:25px 20px !important; } }
.opening-action-option { flex:1 1 0; min-width:0; }.opening-action-note { display:flex; align-items:flex-start; gap:7px; margin:12px 0 0; color:#313b49; font-size:11px; font-weight:600; line-height:1.35; }.opening-action-note > i { flex:none; margin-top:1px; color:#111722; font-size:1.45em; }.opening-action-option + .opening-action-option .opening-action-note > i { color:#df202a; }
@media (prefers-reduced-motion: no-preference) {
  .landing-page.is-loaded:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-opening-scan) .opening-action-note {
    animation: opening-note-in .52s .58s cubic-bezier(.16, 1, .3, 1) both;
  }
  .landing-page.is-loaded:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-opening-scan) .opening-action-option:nth-child(2) .opening-action-note {
    animation-delay: .68s;
  }
  .landing-page.is-loaded:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-opening-scan) .opening-action-note > i {
    animation: opening-note-icon-pop 2.8s 1.1s ease-in-out infinite;
  }
  .opening-action-note span {
    background: linear-gradient(90deg, currentColor 0 42%, rgb(223 32 42 / 86%) 50%, currentColor 58% 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .landing-page.is-loaded:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-opening-scan) .opening-action-note span {
    animation: opening-note-text-shine 5.8s 1.6s ease-in-out infinite;
  }
}
@keyframes opening-note-in {
  from { opacity:0; transform:translateY(10px); filter:blur(2px); }
  to { opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes opening-note-icon-pop {
  0%,100% { transform:scale(1); }
  10% { transform:scale(1.14); }
  18% { transform:scale(1); }
}
@keyframes opening-note-text-shine {
  0%,28%,100% { background-position:140% 0; }
  42%,55% { background-position:-70% 0; }
}
.opening-actions--base .opening-action-option { flex:0 1 320px; width:min(100%,320px); }.opening-actions--base .opening-action-note { display:none; }
.landing-page .opening-actions--base .next-button { border-color:rgb(255 151 160 / 50%); background:linear-gradient(105deg,#ff3040 0%,#e01627 52%,#b70a19 100%); box-shadow:inset 0 1px 0 rgb(255 255 255 / 30%),inset 0 -2px 0 rgb(116 0 12 / 34%),0 10px 20px rgb(185 11 29 / 30%); }.landing-page .opening-actions--base .next-button:hover { background:linear-gradient(105deg,#ff4655 0%,#eb1c2e 52%,#c40b1b 100%); }
.opening-actions .next-button > span, .opening-actions .opening-scan-button > span { font-size:16px !important; font-weight:900 !important; line-height:1 !important; }@media (max-width:1024px) { .opening-actions .next-button > span, .opening-actions .opening-scan-button > span { font-size:11px !important; } }
body.landing-page .booking-card :is(.date-picker-button, .time-picker-button):not(:disabled) { color: #fff !important; border-color: rgb(255 255 255 / 24%) !important; background: #111722 !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 4px 9px rgb(8 12 19 / 24%) !important; }body.landing-page .booking-card :is(.date-picker-button, .time-picker-button):not(:disabled):hover { color: #fff !important; background: #05080d !important; }
.landing-page.is-payment-stage .stage-flow button.is-payment-locked { cursor: not-allowed; opacity: .38; }
.membership-card { display: none; }
.landing-page.is-membership-stage .landing-intro, .landing-page.is-membership-stage .email-card, .landing-page.is-membership-stage .otp-card, .landing-page.is-membership-stage .choice-card { display: none; }
.landing-page.is-membership-stage .welcome-content { display: grid; grid-template-columns: 1fr; place-items: center; width: 100%; max-width: none; min-height: 100svh; padding: 70px 24px 90px; }
.landing-page.is-membership-stage .welcome-copy { align-self: center; width: min(100%, 560px); padding: 0; translate: none; }
.landing-page.is-membership-stage .welcome-visual { display: none; }
.landing-page.is-membership-stage .membership-card { position: relative; display: grid; width: 100%; gap: 18px; padding: 46px; overflow: visible; color: #1c2636; border: 1px solid rgb(255 255 255 / 90%); border-radius: 26px; background: linear-gradient(145deg, rgb(255 255 255 / 97%), rgb(255 255 255 / 83%)); box-shadow: 0 21px 40px rgb(79 22 31 / 22%); backdrop-filter: blur(14px); }
.landing-page.is-membership-stage .membership-card { transform-style: preserve-3d; animation: stage-card-flip .62s cubic-bezier(.16, .9, .28, 1.05) both; }
.membership-terms, .membership-category, .membership-package, .membership-day { display: grid; gap: 16px; }.membership-terms .email-card-title, .membership-category .email-card-title, .membership-package .email-card-title, .membership-day .email-card-title { color: #171a22; font-size: 21px; }.membership-terms .booking-terms-title-accent { color: #c91524; }.membership-card .email-submit { min-height: 56px; color: #fff; border: 1px solid rgb(255 255 255 / 23%); border-radius: 999px; background: linear-gradient(105deg, #ff2c3c, #c50719); box-shadow: 0 10px 20px rgb(179 8 24 / 31%); cursor: pointer; font: 900 15px "Nunito Sans", sans-serif; }.membership-card .email-submit:disabled { cursor: not-allowed; opacity: .52; filter: grayscale(.25); }
.membership-category-option { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 13px; width: 100%; padding: 15px; color: #283244; border: 1px solid #f2c5c9; border-radius: 16px; background: #fff; cursor: pointer; font: inherit; text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }.membership-category-option:hover, .membership-category-option.is-selected { border-color: #df202a; box-shadow: 0 10px 20px rgb(218 25 37 / 13%); transform: translateY(-2px); }.membership-category-icon { display: grid; place-items: center; width: 46px; height: 46px; color: #fff; border-radius: 13px; background: #111722; font-size: 20px; }.membership-category-option strong, .membership-category-option small { display: block; }.membership-category-option strong { font-size: 15px; }.membership-category-option small { margin-top: 3px; color: #78818d; font-size: 12px; line-height: 1.35; }.membership-category-check { color: #d9dfe5; font-size: 20px; }.membership-category-option.is-selected .membership-category-check { color: #df202a; }.membership-category-note { margin: 0; padding: 11px 12px; color: #a9434d; border-radius: 12px; background: #fff0f1; font-size: 12px; font-weight: 800; line-height: 1.45; }.membership-category-note i { margin-right: 5px; color: #d31c2b; }
.membership-category-option { border-radius: 999px; }.membership-category-icon { border-radius:50%; }.membership-category-option[data-membership-category-option].is-selected .membership-category-icon, .membership-package-option.is-selected .membership-category-icon, .membership-day-option.is-selected .membership-category-icon { background:#df202a !important; }.membership-category-option[data-membership-category-option].is-selected .membership-category-check, .membership-package-option.is-selected .membership-category-check, .membership-day-option.is-selected .membership-category-check { color:#ff9b25 !important; }
.membership-category-option[data-membership-category-option].is-selected { color: #fff; border-color: #05080d !important; background: #111722 !important; box-shadow: 0 10px 20px rgb(8 12 19 / 28%) !important; }
body.landing-page .welcome-screen .welcome-content .welcome-copy .membership-category-option[data-membership-category-option].is-selected { background: #111722 !important; border-color: #05080d !important; box-shadow: 0 10px 20px rgb(8 12 19 / 28%) !important; }
body.landing-page .membership-category {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 14px;
}
body.landing-page .membership-category > :not([data-membership-category-option]) {
  grid-column:1 / -1;
}
body.landing-page .membership-category [data-membership-category-option] {
  min-height:64px;
  align-content:center;
  padding:9px 13px;
  border-radius:999px;
}
body.landing-page .membership-category [data-membership-category-option] > span {
  grid-row:1 / 3;
}
body.landing-page .membership-category [data-membership-category-option] .service-option-check {
  align-self:center;
  margin-top:0;
}
body.landing-page .membership-category [data-membership-category-option]:nth-of-type(1) {
  justify-self:end;
}
body.landing-page .membership-category [data-membership-category-option]:nth-of-type(2) {
  justify-self:start;
}
body.landing-page .membership-category [data-membership-category-option] {
  width:min(100%,290px);
}
body.landing-page .membership-category [data-membership-category-option] > span {
  width:38px !important;
  min-width:38px !important;
  height:38px !important;
}
@media (max-width:700px) {
  body.landing-page .membership-category {
    grid-template-columns:1fr;
  }
}
body.landing-page .booking-terms-modal .booking-terms-modal-dialog > .quantity-modal-close.booking-terms-modal-close,
body.landing-page .booking-terms-modal .booking-terms-modal-dialog > .quantity-modal-close.booking-terms-modal-close:hover,
body.landing-page .booking-terms-modal .booking-terms-modal-dialog > .quantity-modal-close.booking-terms-modal-close:focus {
  color:#111722 !important;
  border:1px solid #edf0f3 !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:0 4px 9px rgb(8 12 19 / 12%) !important;
}
body.landing-page .booking-terms-modal .booking-terms-modal-dialog > .quantity-modal-close.booking-terms-modal-close i {
  color:#111722 !important;
}
html body.landing-page .account-menu-panel button[data-account-logout],
html body.landing-page .account-menu-panel button[data-account-logout]:hover,
html body.landing-page .account-menu-panel button[data-account-logout]:focus,
html body.landing-page .account-menu-panel button[data-account-logout]:not(:disabled),
html body.landing-page .account-menu-panel button[data-account-logout]:not(:disabled):hover {
  color:#111722 !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
}
html body.landing-page .account-menu-panel button[data-account-logout]::before,
html body.landing-page .account-menu-panel button[data-account-logout]::after {
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}
html body.landing-page .account-menu[hidden],
html body.landing-page .account-menu-panel [hidden],
html body.landing-page .account-menu-panel button[hidden],
html body.landing-page .account-menu-panel a[hidden] {
  display:none !important;
}

@media (max-width:700px) and (orientation:portrait) {
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-content {
    justify-content:center !important;
    padding:96px 32px 112px !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-copy {
    margin-top:clamp(56px, 10vh, 92px) !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-visual {
    flex:0 0 clamp(220px, 35vh, 300px) !important;
    min-height:clamp(220px, 35vh, 300px) !important;
  }
}

@media (min-width:701px) and (max-width:1024px) and (orientation:portrait) {
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-content {
    justify-content:center !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-copy {
    margin-top:clamp(64px, 9vh, 110px) !important;
  }
}

body.landing-page .account-menu-panel:not([hidden]) {
  animation:account-panel-in .2s cubic-bezier(.2,.85,.25,1) both;
  transform-origin:top right;
}
body.landing-page .account-menu-panel > a.account-menu-profile,
body.landing-page .account-menu-panel > a.account-menu-profile:hover,
body.landing-page .account-menu-panel > a.account-menu-profile:focus {
  display:grid !important;
  gap:3px !important;
  min-height:0 !important;
  padding:10px !important;
  color:#111722 !important;
  border:1px solid #f2edf0 !important;
  border-radius:12px !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:pointer !important;
  text-decoration:none !important;
}
body.landing-page .account-menu-profile em {
  color:#9a6670;
  font:800 10px/1.25 "Nunito Sans", sans-serif;
  font-style:normal;
}
body.landing-page .account-profile-modal:not([hidden]),
body.landing-page .account-bookings-modal:not([hidden]) {
  animation:account-modal-fade-in .18s ease-out both;
}
body.landing-page .account-profile-modal:not([hidden]) .account-profile-modal-dialog,
body.landing-page .account-bookings-modal:not([hidden]) .account-profile-modal-dialog {
  animation:account-modal-in .24s cubic-bezier(.2,.9,.24,1.12) both;
}
body.landing-page .account-bookings-modal {
  position:fixed;
  z-index:30;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
}
body.landing-page .account-bookings-modal[hidden] {
  display:none;
}
body.landing-page .account-bookings-modal-dialog {
  width:min(100%, 430px);
}
body.landing-page .account-bookings-list {
  display:grid;
  gap:10px;
  max-height:min(52vh, 420px);
  overflow:auto;
  padding-right:2px;
}
body.landing-page .account-booking-item {
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid #f2edf0;
  border-radius:14px;
  background:#fff;
}
body.landing-page .account-booking-item > span {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  color:#fff;
  border-radius:50%;
  background:#d91f2a;
}
body.landing-page .account-booking-item strong,
body.landing-page .account-booking-item small,
body.landing-page .account-booking-item em {
  display:block;
}
body.landing-page .account-booking-item strong {
  color:#111722;
  font:900 13px/1.2 "Nunito Sans", sans-serif;
}
body.landing-page .account-booking-item small {
  margin-top:3px;
  color:#657085;
  font:800 11px/1.35 "Nunito Sans", sans-serif;
}
body.landing-page .account-booking-item em {
  margin-top:5px;
  color:#d91f2a;
  font:900 10px/1.2 "Nunito Sans", sans-serif;
  font-style:normal;
  letter-spacing:.04em;
}
body.landing-page .account-bookings-empty {
  display:grid;
  justify-items:center;
  gap:8px;
  padding:24px 12px;
  color:#657085;
  text-align:center;
  font:800 13px/1.35 "Nunito Sans", sans-serif;
}
body.landing-page .account-bookings-empty i {
  color:#d91f2a;
  font-size:24px;
}
@keyframes account-panel-in {
  from { opacity:0; transform:translateY(-8px) scale(.97); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes account-modal-fade-in {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes account-modal-in {
  from { opacity:0; transform:translateY(12px) scale(.96); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

body.landing-page.is-landing-logged-in .stage-flow button[data-stage="email"],
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="otp"],
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="email"] + .flow-arrow {
  display:none !important;
}

body.landing-page .email-input-wrap input {
  padding-right:18px !important;
}

@media (max-width:700px) and (orientation:portrait) {
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-content {
    justify-content:center !important;
    padding:96px 32px 112px !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-copy {
    margin-top:clamp(56px, 10vh, 92px) !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-visual {
    flex:0 0 clamp(220px, 35vh, 300px) !important;
    min-height:clamp(220px, 35vh, 300px) !important;
  }
}

@media (min-width:701px) and (max-width:1024px) and (orientation:portrait) {
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-content {
    justify-content:center !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-copy {
    margin-top:clamp(64px, 9vh, 110px) !important;
  }
}
html body.landing-page .account-menu[hidden],
html body.landing-page .account-menu-panel [hidden],
html body.landing-page .account-menu-panel button[hidden],
html body.landing-page .account-menu-panel a[hidden] {
  display:none !important;
}

html body.landing-page .account-menu[hidden],
html body.landing-page .account-menu-panel [hidden],
html body.landing-page .account-menu-panel button[hidden],
html body.landing-page .account-menu-panel a[hidden] {
  display:none !important;
}

html body.landing-page .account-menu[hidden],
html body.landing-page .account-menu-panel [hidden],
html body.landing-page .account-menu-panel button[hidden],
html body.landing-page .account-menu-panel a[hidden] {
  display:none !important;
}
html body.landing-page .account-menu-panel button[data-account-logout],
html body.landing-page .account-menu-panel button[data-account-logout]:hover,
html body.landing-page .account-menu-panel button[data-account-logout]:focus,
html body.landing-page .account-menu-panel button[data-account-logout]:not(:disabled),
html body.landing-page .account-menu-panel button[data-account-logout]:not(:disabled):hover {
  color:#111722 !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
}
html body.landing-page .account-menu-panel button[data-account-logout]::before,
html body.landing-page .account-menu-panel button[data-account-logout]::after {
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}
html body.landing-page .account-menu-panel button[data-account-logout],
html body.landing-page .account-menu-panel button[data-account-logout]:hover,
html body.landing-page .account-menu-panel button[data-account-logout]:focus,
html body.landing-page .account-menu-panel button[data-account-logout]:not(:disabled),
html body.landing-page .account-menu-panel button[data-account-logout]:not(:disabled):hover {
  color:#111722 !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
}
html body.landing-page .account-menu-panel button[data-account-logout]::before,
html body.landing-page .account-menu-panel button[data-account-logout]::after {
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}
html body.landing-page .welcome-header .header-actions .account-menu > .account-menu-toggle,
html body.landing-page .welcome-header .header-actions .account-menu > .account-menu-toggle:hover,
html body.landing-page .welcome-header .header-actions .account-menu > .account-menu-toggle:focus,
html body.landing-page .welcome-header .header-actions .account-menu > .account-menu-toggle[aria-expanded="true"] {
  display:grid !important;
  place-items:center !important;
  width:38px !important;
  height:38px !important;
  padding:0 !important;
  color:#111722 !important;
  border:1px solid rgb(255 255 255 / 96%) !important;
  border-radius:50% !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:0 10px 24px rgb(92 16 27 / 16%), inset 0 1px 0 rgb(255 255 255 / 85%) !important;
}
html body.landing-page .welcome-header .header-actions .account-menu > .account-menu-toggle i {
  color:#111722 !important;
}
html body.landing-page [data-account-toggle],
html body.landing-page [data-account-toggle]:hover,
html body.landing-page [data-account-toggle]:focus,
html body.landing-page [data-account-toggle][aria-expanded="true"] {
  all:unset !important;
  box-sizing:border-box !important;
  display:grid !important;
  place-items:center !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  padding:0 !important;
  color:#111722 !important;
  border:1px solid rgb(255 255 255 / 96%) !important;
  border-radius:999px !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:0 10px 24px rgb(92 16 27 / 16%), inset 0 1px 0 rgb(255 255 255 / 85%) !important;
  cursor:pointer !important;
  overflow:visible !important;
  isolation:auto !important;
}
html body.landing-page [data-account-toggle]::before,
html body.landing-page [data-account-toggle]::after {
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
  box-shadow:none !important;
}
html body.landing-page [data-account-toggle] i {
  color:#111722 !important;
  font-size:16px !important;
}
html body.landing-page .welcome-header .header-actions .account-menu > [data-account-toggle].user-menu-chip,
html body.landing-page .welcome-header .header-actions .account-menu > [data-account-toggle].user-menu-chip:hover,
html body.landing-page .welcome-header .header-actions .account-menu > [data-account-toggle].user-menu-chip:focus,
html body.landing-page .welcome-header .header-actions .account-menu > [data-account-toggle].user-menu-chip[aria-expanded="true"] {
  all:unset !important;
  box-sizing:border-box !important;
  display:grid !important;
  place-items:center !important;
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  padding:0 !important;
  color:#111722 !important;
  border:1px solid rgb(255 255 255 / 96%) !important;
  border-radius:999px !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:0 10px 24px rgb(92 16 27 / 16%), inset 0 1px 0 rgb(255 255 255 / 85%) !important;
  cursor:pointer !important;
}
html body.landing-page .welcome-header .header-actions .account-menu > [data-account-toggle].user-menu-chip i {
  color:#111722 !important;
  font-size:16px !important;
}
html body.landing-page section.booking-terms-modal article.booking-terms-modal-dialog button.booking-terms-modal-close,
html body.landing-page section.booking-terms-modal article.booking-terms-modal-dialog button.booking-terms-modal-close:hover,
html body.landing-page section.booking-terms-modal article.booking-terms-modal-dialog button.booking-terms-modal-close:focus,
html body.landing-page section.booking-terms-modal article.booking-terms-modal-dialog button.quantity-modal-close.booking-terms-modal-close,
html body.landing-page section.booking-terms-modal article.booking-terms-modal-dialog button.quantity-modal-close.booking-terms-modal-close:hover,
html body.landing-page section.booking-terms-modal article.booking-terms-modal-dialog button.quantity-modal-close.booking-terms-modal-close:focus {
  color:#111722 !important;
  border:1px solid #edf0f3 !important;
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  box-shadow:0 4px 9px rgb(8 12 19 / 12%) !important;
}
html body.landing-page section.booking-terms-modal article.booking-terms-modal-dialog button.booking-terms-modal-close i,
html body.landing-page section.booking-terms-modal article.booking-terms-modal-dialog button.quantity-modal-close.booking-terms-modal-close i {
  color:#111722 !important;
}
@media (max-width:700px) and (orientation:portrait) {
  body.landing-page .welcome-header .header-actions {
    gap:8px !important;
  }
}
body.landing-page .account-menu {
  position:relative;
}
html body.landing-page .account-menu[hidden],
html body.landing-page .account-menu-panel [hidden],
html body.landing-page .account-menu-panel button[hidden],
html body.landing-page .account-menu-panel a[hidden] {
  display:none !important;
}
body.landing-page .account-menu-toggle {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  color:#111722;
  border:1px solid rgb(255 255 255 / 96%);
  border-radius:50%;
  background:#fff;
  box-shadow:0 10px 24px rgb(92 16 27 / 16%), inset 0 1px 0 rgb(255 255 255 / 85%);
  cursor:pointer;
  font-size:16px;
}
body.landing-page .account-menu-toggle:hover,
body.landing-page .account-menu-toggle[aria-expanded="true"] {
  color:#05080d;
  background:#fff;
  box-shadow:0 13px 28px rgb(92 16 27 / 22%), 0 0 0 4px rgb(255 255 255 / 24%);
  transform:translateY(-1px);
}
body.landing-page .account-menu-panel {
  position:absolute;
  z-index:8;
  top:calc(100% + 8px);
  right:0;
  display:grid;
  width:min(280px, calc(100vw - 32px));
  min-width:240px;
  gap:6px;
  padding:8px;
  border:1px solid rgb(255 255 255 / 92%);
  border-radius:16px;
  background:linear-gradient(145deg,#fff,#fff8f9);
  box-shadow:0 18px 36px rgb(44 18 26 / 18%), inset 0 1px 0 #fff;
}
body.landing-page .account-menu-panel[hidden] {
  display:none;
}
body.landing-page .account-menu-profile {
  display:grid;
  gap:8px;
  width:100%;
  padding:10px;
  color:#111722;
  border:1px solid #f2edf0;
  border-radius:12px;
  background:#fff;
  box-shadow:none;
  cursor:pointer;
  text-align:left;
  text-decoration:none;
}
body.landing-page .account-menu-panel > a.account-menu-profile,
body.landing-page .account-menu-panel > a.account-menu-profile:hover,
body.landing-page .account-menu-panel > a.account-menu-profile:focus {
  display:grid !important;
  gap:4px !important;
  min-height:0 !important;
  padding:10px !important;
  color:#111722 !important;
  border:1px solid #f2edf0 !important;
  border-radius:12px !important;
  background:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:pointer !important;
}
body.landing-page .account-menu-profile p {
  margin:0;
  color:#111722;
  font:800 14px/1.2 "Nunito Sans", sans-serif;
}
body.landing-page .account-menu-profile small {
  display:block;
  color:#697386;
  font:800 11px/1.2 "Nunito Sans", sans-serif;
  overflow-wrap:anywhere;
}
body.landing-page .account-profile-modal {
  position:fixed;
  z-index:30;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
}
body.landing-page .account-profile-modal[hidden] {
  display:none;
}
body.landing-page .account-profile-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgb(5 8 13 / 45%);
  backdrop-filter:blur(8px);
}
body.landing-page .account-profile-modal-dialog {
  position:relative;
  z-index:1;
  display:grid;
  width:min(100%, 360px);
  gap:12px;
  padding:24px;
  border:1px solid rgb(255 255 255 / 90%);
  border-radius:22px;
  background:linear-gradient(145deg,#fff,#fff8f9);
  box-shadow:0 28px 56px rgb(20 8 14 / 32%), inset 0 1px 0 #fff;
}
body.landing-page .account-profile-modal-close {
  position:absolute;
  top:12px;
  right:12px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  color:#111722;
  border:1px solid #edf0f3;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
}
body.landing-page .account-profile-title {
  margin:0;
  padding-right:34px;
  color:#111722;
  font:900 18px/1.25 "Nunito Sans", sans-serif;
}
body.landing-page .account-profile-modal-dialog > small {
  color:#697386;
  font:800 12px/1.2 "Nunito Sans", sans-serif;
  overflow-wrap:anywhere;
}
body.landing-page .account-profile-modal-dialog form {
  display:grid;
  gap:10px;
  margin-top:4px;
}
body.landing-page .account-profile-modal-dialog label {
  display:grid;
  gap:5px;
  margin:0;
  color:#4d5664;
  font:900 11px/1.1 "Nunito Sans", sans-serif;
}
body.landing-page .account-profile-modal-dialog input {
  width:100%;
  height:44px;
  padding:0 12px;
  color:#111722;
  border:1px solid #edf0f3;
  border-radius:10px;
  background:#fff;
  font:800 14px/1 "Nunito Sans", sans-serif;
}
body.landing-page .account-profile-modal-dialog form button {
  display:flex;
  min-height:42px;
  justify-content:center;
  color:#fff;
  border-color:#111722;
  background:#111722;
}
body.landing-page .account-profile-modal-dialog .account-menu-status {
  min-height:14px;
  margin:0;
  color:#d91f2a;
  font:800 11px/1.25 "Nunito Sans", sans-serif;
}
body.landing-page .account-menu-panel :is(a, button) {
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:42px;
  padding:0 12px;
  color:#111722;
  border:1px solid transparent;
  border-radius:12px;
  background:rgb(255 255 255 / 72%);
  box-shadow:none;
  cursor:pointer;
  font:900 12px/1 "Nunito Sans", sans-serif;
  text-align:left;
  text-decoration:none;
}
body.landing-page .account-menu-panel :is(a, button):hover {
  color:#05080d;
  border-color:#edf0f3;
  background:#fff;
  box-shadow:0 8px 16px rgb(72 28 36 / 10%);
}
body.landing-page .account-menu-panel [data-account-help] i {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  color:#fff;
  border-radius:50%;
  background:#20bf61;
  font-size:13px;
}
body.landing-page .account-menu-panel [data-account-booking] i {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  color:#fff;
  border-radius:50%;
  background:#d91f2a;
  font-size:12px;
}
body.landing-page .account-menu-panel [data-account-logout] i {
  display:grid;
  place-items:center;
  width:22px;
  height:22px;
  color:#fff;
  border-radius:50%;
  background:#111722;
  font-size:12px;
}
html body.landing-page .account-menu-panel [data-account-logout],
html body.landing-page .account-menu-panel [data-account-logout]:hover,
html body.landing-page .account-menu-panel [data-account-logout]:focus {
  color:#111722 !important;
  border:1px solid transparent !important;
  background:rgb(255 255 255 / 72%) !important;
  background-color:rgb(255 255 255 / 72%) !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
}
html body.landing-page .account-menu-panel [data-account-logout]:hover {
  border-color:#edf0f3 !important;
  background:#fff !important;
  background-color:#fff !important;
  box-shadow:0 8px 16px rgb(72 28 36 / 10%) !important;
}
html body.landing-page .account-menu-panel [data-account-logout]::before,
html body.landing-page .account-menu-panel [data-account-logout]::after {
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}
@media (max-width:700px) and (orientation:portrait) {
  body.landing-page .account-menu-toggle {
    width:34px;
    height:34px;
    font-size:15px;
  }
}
html body.landing-page .welcome-header .header-actions .account-menu > .account-menu-toggle,
html body.landing-page .welcome-header .header-actions .account-menu > .account-menu-toggle:hover,
html body.landing-page .welcome-header .header-actions .account-menu > .account-menu-toggle:focus,
html body.landing-page .welcome-header .header-actions .account-menu > .account-menu-toggle[aria-expanded="true"] {
  color:#111722 !important;
  border:1px solid rgb(255 255 255 / 96%) !important;
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  box-shadow:0 10px 24px rgb(92 16 27 / 16%), inset 0 1px 0 rgb(255 255 255 / 85%) !important;
}
html body.landing-page .welcome-header .header-actions .account-menu > .account-menu-toggle i {
  color:#111722 !important;
}
.membership-package-option { min-height: 86px; padding-block: 11px; }.membership-package-option small { white-space: nowrap; }
.membership-day-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.membership-day-option { min-height: 52px; color: #283244; border: 1px solid #f2c5c9; border-radius: 999px; background: #fff; cursor: pointer; font: 800 14px "Nunito Sans", sans-serif; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }.membership-day-option:hover, .membership-day-option.is-selected { color: #fff; border-color: #111722; background: #111722; box-shadow: 0 9px 16px rgb(15 23 35 / 19%); transform: translateY(-2px); }.membership-day-option[hidden] { display: none; }@media (max-width: 520px) { .membership-day-options { grid-template-columns: 1fr; } }
.membership-time-field { display: grid; gap: 7px; color: #4c5666; font-size: 12px; font-weight: 800; }.membership-time-field select { width: 100%; height: 52px; padding: 0 18px; color: #283244; border: 1px solid #f0a5ab; border-radius: 999px; outline-color: #df202a; background: #fff; font: 800 14px "Nunito Sans", sans-serif; }
.membership-start-date-step { display:grid; gap:14px; }.membership-start-date-step[hidden] { display:none !important; }.membership-start-date-step .booking-field { display:grid; gap:8px; color:#4c5666; font-size:12px; font-weight:800; }.membership-wizard-actions { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:10px; }.membership-wizard-actions .email-submit { min-height:48px; }.membership-wizard-actions .membership-wizard-back { color:#fff !important; border-color:#05080d !important; background:#05080d !important; box-shadow:0 10px 18px rgb(8 12 19 / 24%) !important; }.membership-wizard-actions .email-submit:not(.membership-wizard-back) { color:#fff !important; border-color:rgb(255 129 140 / 58%) !important; background:linear-gradient(105deg,#ff2c3c 0%,#ee1023 48%,#c50719 100%) !important; box-shadow:inset 0 1px 0 rgb(255 255 255 / 30%),inset 0 -2px 0 rgb(116 0 12 / 28%),0 10px 20px rgb(179 8 24 / 31%) !important; }
body.landing-page .membership-start-date-step .booking-field > span[data-i18n="membershipStartDateLabel"] {
  display:none !important;
}
.membership-time-field .select2-container { width: 100% !important; }.membership-time-field .select2-selection--single { height: 52px !important; border: 1px solid #f0a5ab !important; border-radius: 999px !important; background: #fff !important; }.membership-time-field .select2-selection__rendered { padding-left: 18px !important; color: #283244 !important; font: 800 14px/50px "Nunito Sans", sans-serif !important; }.membership-time-field .select2-selection__arrow { height: 50px !important; right: 12px !important; }.membership-day-option { position: relative; }.membership-day-option.is-selected::after { position: absolute; top: 50%; right: 17px; display: grid; place-items: center; width: 24px; height: 24px; content: '\2713'; color: #202a38; border-radius: 50%; background: #fff; font-size: 14px; font-weight: 900; transform: translateY(-50%); }
.membership-day-options { grid-template-columns: 1fr; }.membership-day-option { min-height: 72px; }.membership-day-option.is-selected::after { content: none; }
body.landing-page [data-membership-day-option] {
  grid-template-columns:46px minmax(0,1fr) auto !important;
  align-items:center !important;
  min-height:72px;
  padding:12px 16px !important;
  overflow:hidden;
}
body.landing-page [data-membership-day-option] > :is(span:not(.membership-category-icon), strong) {
  min-width:0;
}
body.landing-page .membership-day-option > span:not(.membership-category-icon) {
  display:grid;
  gap:2px;
}
body.landing-page [data-membership-day-option] strong {
  min-width:0;
  line-height:1.15;
}
body.landing-page [data-membership-day-option] .membership-day-time {
  display:inline;
  margin-left:4px;
  color:inherit;
  font-size:12px;
  line-height:1.25;
  opacity:.82;
}
body.landing-page [data-membership-day-option] .membership-session-dates {
  display:flex;
  flex-wrap:wrap;
  gap:3px 8px;
  min-width:0;
  margin-top:3px;
  color:#6f7a88;
  font-size:12px;
  font-weight:900;
  line-height:1.2;
}
body.landing-page [data-membership-day-option] .membership-session-dates b {
  display:inline-flex;
  white-space:nowrap;
  font:inherit;
}
body.landing-page [data-membership-day-option].is-selected .membership-session-dates {
  color:rgb(255 255 255 / 92%);
}
body.landing-page [data-membership-day-option].is-selected .membership-category-check,
body.landing-page [data-membership-day-option].is-selected .service-option-check {
  align-self:center;
}
.landing-page:is(.is-membership-stage) .welcome-screen { overflow-x: hidden; overflow-y: auto; }.landing-page.has-stage-overflow.is-membership-stage .welcome-content { min-height: 0; padding-bottom: calc(82px + env(safe-area-inset-bottom)); align-content: start; }
.landing-page:not(.is-membership-stage) .stage-flow :is(button[data-stage="membership"], button[data-stage="membership-package"], button[data-stage="membership-day"], .membership-flow-arrow, .membership-package-flow-arrow, .membership-day-flow-arrow) { display: none; }
.landing-page.is-membership-stage .booking-terms-list { width: calc(100% + 92px); max-width: none; margin-inline: -46px; border-inline: 0; border-radius: 0; }.landing-page.is-membership-stage .membership-card { grid-template-columns: minmax(0, 1fr); }.landing-page.is-membership-stage .membership-card > * { min-width: 0; max-width: 100%; }
.landing-page.is-membership-stage .membership-card > :not(.service-shuttle) { position: relative; z-index: 3; animation: booking-content-slide .48s cubic-bezier(.16, .9, .28, 1) both; }.landing-page.is-membership-stage .membership-card .email-card-title { padding-right: 88px; font-size: 27px; }.landing-page.is-membership-stage .membership-card .service-shuttle { animation: service-shuttle-arrive .82s .24s cubic-bezier(.16, 1, .3, 1) both; }.landing-page.is-membership-stage .stage-flow button[data-stage="services"] + .flow-arrow { display: block; }.landing-page.is-membership-stage .stage-flow button[data-stage="booking"], .landing-page.is-membership-stage .stage-flow button[data-stage="booking"] + .flow-arrow { display: none; }
.landing-page.is-membership-stage .stage-flow button[data-stage="opening"], .landing-page.is-membership-stage .stage-flow button[data-stage="opening"] + .flow-arrow, .landing-page.is-membership-stage .stage-flow button[data-stage="email"], .landing-page.is-membership-stage .stage-flow button[data-stage="email"] + .flow-arrow, .landing-page.is-membership-stage .stage-flow button[data-stage="otp"], .landing-page.is-membership-stage .stage-flow button[data-stage="otp"] + .flow-arrow { display: none; }
.stage-flow .flow-arrow { font-size: 0; }.stage-flow .flow-arrow::after { content: '\2192'; font-size: 24px; }.landing-page.is-membership-stage .stage-flow button[data-stage="services"] + .flow-arrow, .landing-page.is-membership-stage .stage-flow .membership-flow-arrow, .landing-page.is-membership-stage .stage-flow .membership-package-flow-arrow, .landing-page.is-membership-stage .stage-flow .membership-day-flow-arrow { display: inline-flex !important; }
.landing-page.is-membership-stage .stage-flow {
  padding-inline:14px !important;
}
.landing-page.is-membership-stage .stage-flow-track {
  display:flex;
  align-items:center;
  gap:8px;
}
.landing-page.is-membership-stage .stage-flow button {
  gap:7px;
  padding-inline:5px;
  font-size:13px;
}
.landing-page.is-membership-stage .stage-flow .flow-arrow::after {
  font-size:19px;
}
@media (max-width: 700px) and (orientation: portrait) { .landing-page.is-membership-stage .welcome-content { padding: 54px 20px 80px; }.landing-page.is-membership-stage .membership-card { width: calc(100vw - 40px); padding: 28px 24px; border-radius: 24px; }.landing-page.is-membership-stage .booking-terms-list { width: calc(100% + 48px); max-height: min(43vh, 350px); margin-inline: -24px; border-inline: 0; border-radius: 0; } }
body.landing-page .swal2-popup .swal2-confirm.booking-alert-close,
body.landing-page .swal2-popup .swal2-cancel.booking-alert-close { color: #fff !important; border-color: #05080d !important; border-radius: 999px !important; background: #05080d !important; box-shadow: 0 7px 15px rgb(0 0 0 / 28%) !important; }
body.landing-page.is-payment-stage .swal2-container .swal2-popup button.swal2-styled.swal2-confirm:not(:disabled),
body.landing-page.is-payment-stage .swal2-container .swal2-popup button.swal2-styled.swal2-cancel:not(:disabled) { color: #fff !important; border-color: #05080d !important; border-radius: 999px !important; background: #05080d !important; box-shadow: 0 7px 15px rgb(0 0 0 / 28%) !important; }
body.landing-page .swal2-container .swal2-popup button.swal2-styled.booking-alert-close:not(:disabled) { color: #fff !important; border-color: #05080d !important; border-radius: 999px !important; background: #05080d !important; box-shadow: 0 7px 15px rgb(0 0 0 / 28%) !important; }
.email-submit.is-loading::before, .email-submit.is-loading::after { content: none !important; display: none !important; }
.payment-success { display: grid; grid-column: 1 / -1; justify-items: center; gap: 12px; padding: 42px 26px; color: #154d35; text-align: center; border: 1px solid #b9e6cd; border-radius: 24px; background: radial-gradient(circle at 50% 0, #d9ffea, transparent 49%), linear-gradient(145deg, #f2fff7, #fff); box-shadow: 0 20px 42px rgb(24 110 70 / 14%); }.payment-success-icon { display: grid; place-items: center; width: 76px; height: 76px; color: #fff; border-radius: 50%; background: linear-gradient(145deg, #1bb46d, #0c8250); box-shadow: 0 12px 24px rgb(18 137 78 / 28%); }.payment-success-icon i { font-size: 38px; }.payment-success-eyebrow { margin: 5px 0 -10px !important; color: #168754 !important; font-size: 11px; font-weight: 900 !important; letter-spacing: .12em; text-transform: uppercase; }.payment-success h3 { margin: 0; color: #10412c; font-size: clamp(25px, 4vw, 32px); }.payment-success p { max-width: 480px; margin: 0; color: #4c6659; font-weight: 700; line-height: 1.55; }.payment-success p strong { color: #10412c; overflow-wrap: anywhere; }.payment-success-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 420px); margin-top: 12px; }.payment-success-actions .email-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; padding: 0 16px; }.payment-detail-button { color: #145d3e !important; border: 1px solid #96d8b5 !important; background: #fff !important; box-shadow: 0 8px 16px rgb(25 101 64 / 10%) !important; }.payment-finish-button { color: #fff !important; border-color: #05080d !important; background: #05080d !important; box-shadow: 0 10px 20px rgb(5 8 13 / 25%) !important; }.payment-booking-details { display: grid; gap: 12px; text-align: left; }.payment-booking-detail { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 13px; padding: 12px; border: 1px solid #d8eadf; border-radius: 16px; background: #f8fffa; }.payment-access-qr { display: grid; place-items: center; min-height: 112px; background: #fff; border-radius: 10px; }.payment-booking-detail strong { color: #10412c; }.payment-booking-detail p { margin: 5px 0; color: #526d5d; font-size: 13px; }.payment-booking-detail code { color: #0e7745; font-weight: 800; }@media (max-width: 520px) { .payment-booking-detail { grid-template-columns: 1fr; text-align: center; }.payment-access-qr { justify-self: center; } }
@media (prefers-reduced-motion: no-preference) { .booking-confirm-actions .email-submit:not(.is-loading)::before { animation: booking-action-reflection 12s .7s cubic-bezier(.38, .02, .24, 1) infinite !important; }.booking-confirm-actions .email-submit:nth-child(2):not(.is-loading)::before { animation-delay: 6.7s !important; } }
body.landing-page .payment-success .email-submit.payment-finish-button:not(:disabled), body.landing-page .payment-success .email-submit.payment-finish-button:not(:disabled):hover { color: #fff !important; border-color: #05080d !important; background: #05080d !important; box-shadow: 0 10px 20px rgb(5 8 13 / 25%) !important; }
.scan-page { min-height: 100svh; margin: 0; background: radial-gradient(circle at 10% 5%, #f5525d33, transparent 27%), radial-gradient(circle at 92% 95%, #19a9692b, transparent 32%), #101923; font-family:"Nunito Sans",Arial,sans-serif; }.scan-shell { display:grid; place-items:center; min-height:100svh; padding:32px 18px; box-sizing:border-box; }.scan-logo { display:block; width:184px; height:59px; margin:0 auto 22px; overflow:hidden; }.scan-logo img { display:block; width:184px; height:auto; transform:translateY(-21%); filter:brightness(0) invert(1); }.scan-card { width:min(100%,560px); padding:34px; color:#eef4f7; border:1px solid rgb(255 255 255 / 16%); border-radius:28px; background:linear-gradient(145deg,rgb(31 44 58 / 96%),rgb(14 23 33 / 98%)); box-shadow:0 28px 55px rgb(0 0 0 / 35%); }.scan-eyebrow { display:inline-flex; gap:8px; align-items:center; color:#7ce2b0; font-size:11px; font-weight:900; letter-spacing:.12em; }.scan-card h1 { margin:12px 0 8px; font-size:clamp(26px,5vw,35px); }.scan-copy { margin:0 0 23px; color:#b8c5cf; line-height:1.6; }.scan-reader { overflow:hidden; border-radius:18px; background:#fff; }.scan-reader #html5-qrcode-button-camera-permission, .scan-reader #html5-qrcode-button-camera-start, .scan-reader #html5-qrcode-button-camera-stop { margin:9px; padding:9px 14px; color:#fff; border:0; border-radius:999px; background:#101923; font:inherit; font-weight:800; }.scan-reader select { max-width:88%; padding:8px; }.scan-status { min-height:20px; margin:14px 0 0; color:#9fadb8; font-size:13px; text-align:center; }.scan-or { display:flex; align-items:center; gap:12px; margin:23px 0 14px; color:#83909b; font-size:12px; }.scan-or::before,.scan-or::after { flex:1; height:1px; content:""; background:rgb(255 255 255 / 15%); }.scan-manual { display:grid; grid-template-columns:1fr auto; gap:9px; }.scan-manual input { min-width:0; padding:0 14px; color:#192432; border:0; border-radius:999px; font:inherit; }.scan-manual .email-submit { min-height:45px; padding:0 18px; }.scan-result { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; align-items:start; margin-top:20px; padding:17px; border-radius:16px; }.scan-result > i { grid-row:1 / span 2; font-size:28px; }.scan-result > strong { font-size:17px; }.scan-result p { margin:0; line-height:1.5; }.scan-result.is-valid { color:#155b3c; background:#eafff2; }.scan-result.is-invalid { color:#85202b; background:#fff0f1; }.scan-result dl { grid-column:1 / -1; display:grid; gap:7px; width:100%; margin:9px 0 0; }.scan-result dl div { display:flex; justify-content:space-between; gap:16px; padding-top:8px; border-top:1px solid rgb(21 91 60 / 15%); font-size:13px; }.scan-result dt { color:#60736a; }.scan-result dd { margin:0; font-weight:800; text-align:right; }@media(max-width:520px){.scan-card{padding:25px 18px;border-radius:22px}.scan-manual{grid-template-columns:1fr}.scan-manual .email-submit{width:100%}}
.landing-page.is-scan-stage .welcome-screen { min-height:100svh; height:auto; overflow:auto; }.scan-landing-wrap { position:relative; z-index:1; display:grid; place-items:center; min-height:100svh; padding:118px 24px 38px; box-sizing:border-box; }.scan-landing-card { width:min(100%,560px); padding:38px; color:#1c2636; border:1px solid rgb(255 255 255 / 90%); border-radius:26px; background:linear-gradient(145deg,rgb(255 255 255 / 97%),rgb(255 255 255 / 83%)); box-shadow:0 21px 40px rgb(79 22 31 / 22%),inset 0 1px 0 #fff; backdrop-filter:blur(14px); }.scan-landing-card h1 { margin:0; color:#202a38; font-size:28px; }.scan-landing-card > p { color:#687483; line-height:1.6; }.scan-landing-card .scan-reader { overflow:hidden; margin-top:20px; border:1px solid #e3e8ed; border-radius:16px; background:#fff; }.scan-landing-card .scan-status { min-height:20px; margin:12px 0 0; color:#73808e; font-size:12px; text-align:center; }.scan-divider { display:flex; align-items:center; gap:12px; margin:22px 0 13px !important; color:#8a95a1 !important; font-size:12px; text-align:center; }.scan-divider::before,.scan-divider::after { flex:1; height:1px; content:""; background:#e1e6eb; }.scan-landing-card .scan-manual { display:grid; grid-template-columns:1fr auto; gap:9px; }.scan-landing-card .scan-manual input { min-width:0; padding:0 14px; color:#283244; border:1px solid #e2e7ec; border-radius:999px; font:inherit; }.scan-landing-card .scan-manual .email-submit { min-height:46px; padding:0 18px; }.scan-landing-card .scan-result { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; align-items:start; margin-top:18px; padding:16px; border-radius:14px; }.scan-landing-card .scan-result.is-valid { color:#166534; background:#eafff2; }.scan-landing-card .scan-result.is-invalid { color:#991b1b; background:#fff0f1; }@media(max-width:520px){.scan-landing-card{padding:25px 20px;border-radius:22px}.scan-landing-card .scan-manual{grid-template-columns:1fr}.scan-landing-card .scan-manual .email-submit{width:100%}}
.scan-landing-card .scan-reader video { display:block; width:100% !important; border-radius:15px; }.landing-page.is-scan-stage .welcome-header { z-index:3; }
.scan-start-state { position:relative; display:grid; justify-items:center; gap:9px; overflow:hidden; text-align:center; }.scan-start-state > h1,.scan-start-state > p:first-of-type { justify-self:stretch; text-align:left; }.scan-idle-glow { position:absolute; top:117px; width:115px; height:115px; border-radius:50%; background:#ffccd155; filter:blur(8px); }.scan-start-state img { position:relative; width:106px; height:106px; object-fit:contain; filter:drop-shadow(0 12px 10px rgb(115 33 38 / 20%)); animation:scan-cock-float 3.5s ease-in-out infinite; }.scan-start-state strong { position:relative; color:#273140; font-size:17px; }.scan-start-state p { position:relative; margin:0; color:#778290; font-size:12px; }.scan-active-state { margin-top:0; }.scan-start-button { display:inline-flex; position:relative; align-items:center; justify-content:center; gap:9px; min-height:46px; margin-top:7px; padding:0 21px; }@keyframes scan-cock-float { 50% { transform:translateY(-9px) rotate(-8deg); } }
.scan-access-badge { justify-self:start; display:inline-flex; align-items:center; gap:7px; padding:7px 10px; color:#bd1323; border:1px solid #f3c7cc; border-radius:999px; background:#fff6f7; font-size:10px; font-weight:900; letter-spacing:.11em; }.scan-start-state > h1 { margin-top:5px; font-size:clamp(29px,4.2vw,37px); letter-spacing:-1.6px; }.scan-start-state .scan-intro { max-width:410px; margin-top:0; color:#6e7a89; font-size:14px; line-height:1.65; }.scan-shuttle-stage { position:relative; display:grid; place-items:center; width:184px; height:145px; margin:5px 0 1px; }.scan-shuttle-stage .scan-idle-glow { position:absolute; top:25px; width:120px; height:96px; background:radial-gradient(circle,#ff9da855,transparent 68%); filter:blur(6px); }.scan-orbit-ring { position:absolute; border:1px solid rgb(219 33 47 / 20%); border-radius:50%; }.scan-orbit-one { width:142px; height:88px; transform:rotate(-24deg); animation:scan-orbit-spin 7s linear infinite; }.scan-orbit-two { width:164px; height:64px; border-style:dashed; transform:rotate(20deg); animation:scan-orbit-spin 10s linear infinite reverse; }.scan-shuttle-stage img { width:130px; height:130px; }.scan-start-state .scan-start-hint { display:inline-flex; align-items:center; gap:7px; margin-top:-2px; padding:7px 10px; color:#768293; border-radius:999px; background:#f5f7fa; font-size:11px; }.scan-start-button { min-width:205px; min-height:52px; margin-top:7px; font-size:13px; box-shadow:0 12px 22px rgb(210 20 31 / 30%); }.scan-start-button:hover { transform:translateY(-3px) scale(1.015); }.scan-start-button::after { position:absolute; inset:-4px; content:""; border:1px solid rgb(216 29 42 / 25%); border-radius:999px; animation:scan-cta-pulse 2s ease-out infinite; }@keyframes scan-orbit-spin { to { transform:rotate(336deg); } }@keyframes scan-cta-pulse { 70%,100% { opacity:0; transform:scale(1.16); } }@media (max-width:520px){.scan-start-state > h1{font-size:29px}.scan-shuttle-stage{height:128px}.scan-shuttle-stage img{width:116px;height:116px}}
.scan-start-state[hidden], .scan-active-state[hidden] { display:none !important; }
.scan-landing-wrap { perspective:1200px; }.scan-start-state, .scan-active-state { transform-style:preserve-3d; backface-visibility:hidden; }.scan-start-state.is-flipping-out, .scan-active-state.is-flipping-out { animation:scan-card-flip-out .22s ease-in forwards; }.scan-start-state.is-flipping-in, .scan-active-state.is-flipping-in { animation:scan-card-flip-in .42s cubic-bezier(.2,.8,.2,1) both; }@keyframes scan-card-flip-out { to { opacity:0; transform:rotateY(-90deg) scale(.94); } }@keyframes scan-card-flip-in { from { opacity:0; transform:rotateY(90deg) scale(.94); } to { opacity:1; transform:rotateY(0) scale(1); } }
.scan-swal dl { display:grid; gap:8px; margin:12px 0 0; text-align:left; }.scan-swal dl div { display:flex; justify-content:space-between; gap:14px; padding-top:8px; border-top:1px solid #e6ebef; font-size:13px; }.scan-swal dt { color:#778493; }.scan-swal dd { margin:0; color:#1f2b39; font-weight:800; text-align:right; }.scan-swal p { margin:0; color:#697686; line-height:1.5; }
.opening-actions .next-button::after,.opening-scan-button::after { z-index:0; pointer-events:none; }.opening-actions .next-button > *,.opening-scan-button > * { position:relative; z-index:1; }
.opening-actions .next-button::before,.opening-actions .opening-scan-button::before { display:none !important; }.landing-page .opening-actions .opening-scan-button { color:#fff !important; border-color:#05080d !important; background:#05080d !important; box-shadow:0 9px 18px rgb(5 8 13 / 25%),inset 0 1px 0 rgb(255 255 255 / 15%) !important; }.landing-page .opening-actions .opening-scan-button:hover { color:#fff !important; background:#151b25 !important; }@media (max-width:1024px) { .landing-page .opening-actions { display:flex !important; flex-flow:row nowrap !important; width:min(100%,390px); gap:9px; }.landing-page .opening-actions .next-button,.landing-page .opening-actions .opening-scan-button { display:inline-flex !important; flex:1 1 0 !important; justify-content:center; min-width:0 !important; min-height:50px; margin:0 !important; padding:12px 9px !important; font-size:11px !important; white-space:nowrap; } }
.opening-actions .next-button::after,.opening-actions .opening-scan-button::after { display:none !important; content:none !important; animation:none !important; }
.opening-actions .next-button::after,.opening-actions .opening-scan-button::after { position:absolute !important; z-index:1 !important; top:0 !important; left:0 !important; display:block !important; width:38% !important; height:100% !important; content:"" !important; opacity:0; background:linear-gradient(90deg,transparent,rgb(255 255 255 / 8%),rgb(255 255 255 / 46%),rgb(255 255 255 / 8%),transparent) !important; pointer-events:none !important; transform:translateX(-170%) skewX(-22deg); animation:opening-single-shine 8s ease-in-out infinite !important; }.opening-actions .next-button::after { animation-delay:4s !important; }.opening-actions .next-button > *,.opening-actions .opening-scan-button > * { position:relative; z-index:2; }@keyframes opening-single-shine { 0%,9%,100% { opacity:0; transform:translateX(-170%) skewX(-22deg); } 13% { opacity:1; } 30% { opacity:1; transform:translateX(370%) skewX(-22deg); } 34% { opacity:0; transform:translateX(370%) skewX(-22deg); } }
.landing-page .opening-actions .opening-scan-button { font-size:16px !important; }.opening-scan-cock-stage { position:relative; display:grid; place-items:center; height:78px; margin:0 0 -4px; overflow:hidden; }.opening-scan-cock-stage span { position:absolute; width:72px; height:72px; border-radius:50%; background:radial-gradient(circle,rgb(244 61 75 / 28%),transparent 68%); filter:blur(5px); animation:opening-cock-glow 2.8s ease-in-out infinite; }.opening-scan-cock-stage img { position:relative; width:82px; height:82px; object-fit:contain; filter:drop-shadow(0 9px 8px rgb(103 23 31 / 20%)); animation:opening-cock-float 3.4s ease-in-out infinite; }@keyframes opening-cock-float { 50% { transform:translateY(-8px) rotate(-8deg); } }@keyframes opening-cock-glow { 50% { opacity:.55; transform:scale(1.25); } }@media (max-width:1024px) { .landing-page .opening-actions .opening-scan-button { font-size:11px !important; } }
.opening-scan-button > .fa-qrcode { animation:opening-qr-icon-pulse 1.8s ease-in-out infinite; }@keyframes opening-qr-icon-pulse { 0%,100% { opacity:.74; transform:scale(.92); } 48% { opacity:1; transform:scale(1.12); } }
.opening-scan-button > .fa-qrcode { animation:none !important; }@media (prefers-reduced-motion: no-preference) { .landing-page.is-loaded:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage) .landing-intro .opening-scan-button { animation:intro-button-in .5s .42s ease-out both,button-pulse 2.2s 1s cubic-bezier(.45,0,.2,1) infinite; } }.landing-page.is-leaving-intro .landing-intro .opening-scan-button { animation:word-fall .28s .37s cubic-bezier(.45,0,.9,.35) both !important; }
.landing-page.is-opening-scan .opening-scan-card { position:relative; overflow:visible; }.opening-scan-cock { position:absolute; z-index:4; top:-38px; right:-52px; width:180px; pointer-events:none; filter:drop-shadow(0 10px 9px rgb(80 16 22 / 22%)); animation:service-shuttle-arrive .82s .24s cubic-bezier(.16,1,.3,1) both; }.opening-scan-card h2 { padding-right:88px; }@media (max-width:700px) { .opening-scan-cock { top:-28px; right:-43px; width:142px; }.opening-scan-card h2 { padding-right:66px; } }
.opening-scan-card .scan-status:empty { display:none; }.opening-scan-back { justify-self:center; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:142px; min-height:44px; padding:0 18px; color:#fff; border:1px solid #05080d; border-radius:999px; background:#05080d; box-shadow:0 8px 16px rgb(5 8 13 / 22%); cursor:pointer; font:800 13px/1 "Nunito Sans",sans-serif; }.opening-scan-back:hover { background:#151b25; transform:translateY(-1px); }
.landing-page .opening-scan-back { color:#fff !important; border-color:#05080d !important; background:#05080d !important; box-shadow:0 8px 16px rgb(5 8 13 / 22%) !important; }.landing-page .opening-scan-back:hover { color:#fff !important; background:#151b25 !important; }
.landing-page.is-opening-scan .welcome-content { display:grid; grid-template-columns:1fr; place-items:center; width:100%; max-width:none; min-height:100svh; padding:108px 24px 92px; }.landing-page.is-opening-scan .welcome-copy { align-self:center; width:min(100%,560px); padding:0; translate:none; }.landing-page.is-opening-scan .welcome-visual { display:none; }.landing-page.is-opening-scan .opening-scan-card { width:100%; }.landing-page.is-opening-scan .stage-flow { z-index:40; }@media (max-width:700px) { .landing-page.is-opening-scan .welcome-content { padding:86px 20px 82px; }.landing-page.is-opening-scan .opening-scan-card { width:calc(100vw - 40px); } }

/* Final CTA override: email, OTP and booking forms exactly match the Opening button. */
body.landing-page .next-button, body.landing-page .email-submit:not(.booking-cancel):not(.booking-schedule-cancel):not(.booking-schedule-trigger):not(.payment-cancel):not(.payment-detail-button):not(.membership-wizard-back):not(:disabled) { color:#fff !important; border-color:rgb(255 129 140 / 58%) !important; background:linear-gradient(105deg,#ff2c3c 0%,#ee1023 48%,#c50719 100%) !important; box-shadow:inset 0 1px 0 rgb(255 255 255 / 30%),inset 0 -2px 0 rgb(116 0 12 / 28%),0 10px 20px rgb(179 8 24 / 31%) !important; }.landing-page .next-button:hover, .landing-page .email-submit:not(.booking-cancel):not(.booking-schedule-cancel):not(.booking-schedule-trigger):not(.payment-cancel):not(.payment-detail-button):not(.membership-wizard-back):not(:disabled):hover { color:#fff !important; background:linear-gradient(105deg,#ff4654 0%,#f3172b 48%,#d3091c 100%) !important; }

/* Higher specificity than the legacy button theme above. */
body.landing-page .welcome-screen .welcome-content .welcome-copy :is(.email-card, .otp-card, .booking-card) .email-submit:not(.booking-schedule-cancel):not(.booking-schedule-trigger):not(:disabled), body.landing-page .welcome-screen .welcome-content .welcome-copy .court-card .email-submit:not(.booking-cancel):not(.payment-cancel):not(.payment-detail-button):not(:disabled) { color:#fff !important; border-color:rgb(255 129 140 / 58%) !important; background:linear-gradient(105deg,#ff2c3c 0%,#ee1023 48%,#c50719 100%) !important; box-shadow:inset 0 1px 0 rgb(255 255 255 / 30%),inset 0 -2px 0 rgb(116 0 12 / 28%),0 10px 20px rgb(179 8 24 / 31%) !important; }body.landing-page .welcome-screen .welcome-content .welcome-copy :is(.email-card, .otp-card, .booking-card) .email-submit:not(.booking-schedule-cancel):not(.booking-schedule-trigger):not(:disabled):hover, body.landing-page .welcome-screen .welcome-content .welcome-copy .court-card .email-submit:not(.booking-cancel):not(.payment-cancel):not(.payment-detail-button):not(:disabled):hover { background:linear-gradient(105deg,#ff4654 0%,#f3172b 48%,#d3091c 100%) !important; }
body.landing-page :is(.email-card, .otp-card, .booking-card) .email-submit { position:relative; isolation:isolate; overflow:hidden; }body.landing-page :is(.email-card, .otp-card, .booking-card) .email-submit::before { position:absolute; z-index:0; top:0; left:0; display:block !important; width:38%; height:100%; content:"" !important; opacity:0; background:linear-gradient(90deg,transparent,rgb(255 255 255 / 8%),rgb(255 255 255 / 46%),rgb(255 255 255 / 8%),transparent); pointer-events:none; transform:translateX(-170%) skewX(-22deg); animation:form-cta-reflection 8s ease-in-out infinite !important; }body.landing-page :is(.email-card, .otp-card, .booking-card) .email-submit > * { position:relative; z-index:1; }@keyframes form-cta-reflection { 0%,9%,100% { opacity:0; transform:translateX(-170%) skewX(-22deg); } 13% { opacity:1; } 30% { opacity:1; transform:translateX(370%) skewX(-22deg); } 34% { opacity:0; transform:translateX(370%) skewX(-22deg); } }
body.landing-page .stage-flow { box-shadow:0 -3px 8px rgb(0 0 0 / 18%),0 7px 16px rgb(0 0 0 / 24%),inset 0 1px 0 rgb(255 255 255 / 10%) !important; }
body.landing-page .payment-success-actions .email-submit::before { animation:payment-action-reflection 8s ease-in-out infinite !important; }body.landing-page .payment-success-actions .payment-detail-button::before { animation-delay:0s !important; }body.landing-page .payment-success-actions .payment-finish-button::before { animation-delay:4s !important; }@keyframes payment-action-reflection { 0%,7%,100% { opacity:0; transform:translateX(-170%) skewX(-22deg); } 10% { opacity:1; } 40% { opacity:1; transform:translateX(370%) skewX(-22deg); } 44% { opacity:0; transform:translateX(370%) skewX(-22deg); } }body.landing-page .payment-success-icon { animation:payment-success-check-bounce 5s cubic-bezier(.24,.82,.33,1) 1 both; transform-origin:center; }@keyframes payment-success-check-bounce { 0% { transform:translateY(0) scale(.72); opacity:0; } 6% { transform:translateY(-13px) scale(1.12); opacity:1; } 12% { transform:translateY(0) scale(.96); } 18% { transform:translateY(-10px) scale(1.07); } 24% { transform:translateY(0) scale(.98); } 31% { transform:translateY(-8px) scale(1.045); } 38% { transform:translateY(0) scale(.99); } 46% { transform:translateY(-6px) scale(1.025); } 54% { transform:translateY(0) scale(1); } 66% { transform:translateY(-4px) scale(1.015); } 74%,100% { transform:translateY(0) scale(1); opacity:1; } }
.otp-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; margin:-6px 0 -8px; color:#9a2230; font-size:12px; font-weight:800; }.otp-actions a { color:#d71929; text-decoration:none; cursor:pointer; }.otp-actions a:hover,.otp-actions a:focus-visible { color:#9f0614; text-decoration:underline; }.otp-actions a[aria-disabled="true"] { color:#9ca4af; cursor:wait; pointer-events:none; text-decoration:none; }.landing-page.is-otp-stage .otp-card .email-status { justify-self:center; min-height:0; max-width:100%; margin:0; padding:8px 13px; color:#9f0614; border:1px solid rgb(215 25 41 / 16%); border-radius:999px; background:rgb(255 240 242 / 92%); box-shadow:0 10px 20px rgb(151 14 27 / 10%); font-size:11px; font-weight:900; line-height:1.25; text-align:center; opacity:0; transform:translateY(-5px) scale(.97); transition:opacity .22s ease,transform .22s ease; pointer-events:none; }.landing-page.is-otp-stage .otp-card .email-status.is-visible { opacity:1; transform:translateY(0) scale(1); }.landing-page.is-otp-stage .otp-card .email-status.is-success { color:#0f7a3b; border-color:rgb(15 122 59 / 16%); background:rgb(235 255 244 / 94%); box-shadow:0 10px 20px rgb(15 122 59 / 9%); }
.scan-result-modal__button { background:#05080d !important; box-shadow:0 8px 16px rgb(5 8 13 / 24%) !important; }
/* Time picker mobile polish. */
body.landing-page .quantity-modal[data-time-modal] .quantity-modal-dialog { width:min(100%,400px) !important; padding:26px 18px 22px !important; }body.landing-page .quantity-modal[data-time-modal] .quantity-modal-dialog > :is(p,span) { margin-left:10px; }.landing-page .booking-card [data-time-modal-open] i { display:grid; place-items:center; width:32px; height:32px; color:#fff !important; border-radius:50%; background:#111722; box-shadow:inset 0 1px 0 rgb(255 255 255 / 14%),0 4px 9px rgb(8 12 19 / 24%); font-size:14px; }.landing-page .quantity-modal[data-time-modal] .time-modal-options { gap:9px; max-height:300px; padding:2px 7px 2px 2px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#c91524 transparent; }.landing-page .quantity-modal[data-time-modal] .time-modal-options::-webkit-scrollbar { width:7px; }.landing-page .quantity-modal[data-time-modal] .time-modal-options::-webkit-scrollbar-track { margin:4px 0; border-radius:999px; background:#f6e7e9; }.landing-page .quantity-modal[data-time-modal] .time-modal-options::-webkit-scrollbar-thumb { min-height:42px; border-radius:999px; background:linear-gradient(180deg,#f13b49,#ad0715); box-shadow:0 2px 4px rgb(120 5 18 / 24%); }.landing-page .quantity-modal[data-time-modal] .time-modal-options > button, .landing-page .quantity-modal[data-time-modal] .time-modal-options > button:hover { min-height:62px !important; color:#111722 !important; border:1px solid #edf0f3 !important; border-radius:14px !important; background:#fff !important; background-image:none !important; box-shadow:0 4px 7px rgb(8 12 19 / 25%) !important; }.landing-page .quantity-modal[data-time-modal] .time-modal-options > button strong { color:#111722 !important; font-size:16px !important; }.landing-page .quantity-modal[data-time-modal] .time-modal-options > button.is-selected { color:#fff !important; border-color:#111722 !important; background:#111722 !important; }.landing-page .quantity-modal[data-time-modal] .time-modal-options > button.is-selected strong { color:#fff !important; }
body.landing-page .quantity-modal[data-time-modal] .time-modal-options { width:calc(100% + 20px); max-width:none; max-height:300px; margin:18px -10px -10px; padding:2px 12px 14px 10px; gap:9px; }.landing-page .quantity-modal[data-time-modal] .time-modal-options > button,.landing-page .quantity-modal[data-time-modal] .time-modal-options > button:hover { min-height:62px !important; background:#fff !important; box-shadow:0 3px 5px rgb(8 12 19 / 20%) !important; }.landing-page .booking-card [data-time-modal-open] i { flex:0 0 32px; align-self:center; }
.landing-page .booking-card [data-time-modal-open] { position:relative !important; padding-right:52px !important; }.landing-page .booking-card [data-time-modal-open] i { position:absolute; top:50%; right:9px; transform:translateY(-50%); }.landing-page .quantity-modal-options > button { border-width:2px !important; }.landing-page .quantity-modal-options > button.is-selected::after { position:absolute; z-index:2; top:7px; right:7px; display:grid; place-items:center; width:16px; height:16px; content:'✓'; color:#111722; border-radius:50%; background:#fff; font-size:10px; font-weight:900; }.landing-page .quantity-modal-options > button.is-selected strong,.landing-page .quantity-modal-options > button.is-selected small { color:#fff !important; }
.landing-page .quantity-modal-options > button.is-selected::after { content:none; }.landing-page .booking-card :is([data-quantity-modal-open],[data-duration-modal-open],[data-time-modal-open]) > span { color:#283244 !important; }
body.landing-page .booking-date-modal-backdrop { opacity:0; transition:opacity .22s ease; }body.landing-page.is-date-picker-modal-open .booking-date-modal-backdrop { opacity:1; }.flatpickr-calendar.booking-date-modal.open { animation:booking-date-modal-in .3s cubic-bezier(.2,1.15,.35,1) both; }@keyframes booking-date-modal-in { from { opacity:0; transform:translate(-50%,-42%) scale(.96); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
body.landing-page .quantity-modal { opacity:0; transition:opacity .22s ease; }body.landing-page .quantity-modal.is-open { opacity:1; }body.landing-page .quantity-modal-backdrop { opacity:0; transition:opacity .22s ease; }body.landing-page .quantity-modal.is-open .quantity-modal-backdrop { opacity:1; }body.landing-page .quantity-modal-dialog { opacity:0; transform:translateY(14px) scale(.96); transition:opacity .24s ease,transform .28s cubic-bezier(.2,1.15,.35,1); }body.landing-page .quantity-modal.is-open .quantity-modal-dialog { opacity:1; transform:translateY(0) scale(1); }
body.landing-page .quantity-modal .quantity-modal-close, body.landing-page .quantity-modal .quantity-modal-close:hover { color:#111722 !important; border:1px solid #edf0f3 !important; background:#fff !important; background-image:none !important; box-shadow:0 4px 9px rgb(8 12 19 / 12%) !important; }body.landing-page .quantity-modal .quantity-modal-close i { color:#111722 !important; }
.quantity-modal-loading { display:grid; place-items:center; gap:8px; min-height:184px; margin-top:18px; color:#758090; text-align:center; }.quantity-modal-loading[hidden] { display:none !important; }.quantity-modal-loading .booking-loading-orbit { flex:0 0 auto; width:36px; height:36px; }.quantity-modal-loading strong { color:#172033; font:900 13px/1.2 "Nunito Sans",sans-serif; }.quantity-modal-loading small { color:#758090; font:800 11px/1.4 "Nunito Sans",sans-serif; }.quantity-modal.is-loading .quantity-carousel { display:none !important; }
.duration-modal-options { grid-template-columns:repeat(4,minmax(0,1fr)); }
.time-modal-options { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:300px; overflow-y:auto; }.time-modal-options > button { min-height:58px !important; }.time-modal-options > button strong { font-size:16px !important; }
.quantity-modal[data-quantity-modal] .quantity-modal-options > button { min-height:68px !important; align-content:center; }.quantity-modal[data-quantity-modal] .quantity-modal-options > button small { display:none !important; }
body.landing-page .quantity-modal-options > button { position:relative !important; isolation:isolate; overflow:hidden !important; color:#bd1323 !important; border-color:#f3b8bf !important; background:linear-gradient(145deg,#fff8f8,#ffe4e7) !important; box-shadow:inset 0 1px 0 rgb(255 255 255 / 90%),0 7px 14px rgb(195 18 34 / 14%) !important; }.landing-page .quantity-modal-options > button strong { color:#c81022 !important; }.landing-page .quantity-modal-options > button small { color:#a84a55 !important; }.landing-page .quantity-modal-options > button.is-selected { color:#a90d1d !important; border-color:#ed8e99 !important; background:linear-gradient(145deg,#fff0f1,#ffd5da) !important; box-shadow:inset 0 1px 0 #fff,0 8px 16px rgb(195 18 34 / 20%) !important; }.landing-page .quantity-modal-options > button.is-selected strong { color:#b80d20 !important; }.landing-page .quantity-modal-options > button::before { position:absolute !important; z-index:0 !important; top:0 !important; left:0 !important; display:block !important; width:38% !important; height:100% !important; content:"" !important; opacity:0; background:linear-gradient(90deg,transparent,rgb(255 255 255 / 8%),rgb(255 255 255 / 72%),rgb(255 255 255 / 8%),transparent) !important; pointer-events:none; transform:translateX(-170%) skewX(-22deg) !important; animation:quantity-option-reflection 6s ease-in-out infinite !important; }.landing-page .quantity-modal-options > button > :is(strong,small) { position:relative; z-index:1; }.landing-page .quantity-modal-options > button:nth-child(2)::before { animation-delay:1.2s !important; }.landing-page .quantity-modal-options > button:nth-child(3)::before { animation-delay:2.4s !important; }.landing-page .quantity-modal-options > button:nth-child(4)::before { animation-delay:3.6s !important; }.landing-page .quantity-modal-options > button:nth-child(5)::before { animation-delay:4.8s !important; }@keyframes quantity-option-reflection { 0%,8%,100% { opacity:0; transform:translateX(-170%) skewX(-22deg); } 12% { opacity:1; } 28% { opacity:1; transform:translateX(370%) skewX(-22deg); } 32% { opacity:0; transform:translateX(370%) skewX(-22deg); } }
/* Smooth vertical bounce for the complete payment-success icon. */
body.landing-page .payment-success h3 { color:#0c8250 !important; }@keyframes payment-success-check-bounce { 0% { transform:translateY(0) scale(.86); opacity:0; } 5% { transform:translateY(-28px) scale(1.08); opacity:1; } 12% { transform:translateY(0) scale(.98); } 20% { transform:translateY(-22px) scale(1.045); } 28% { transform:translateY(0) scale(.99); } 37% { transform:translateY(-16px) scale(1.03); } 46% { transform:translateY(0) scale(1); } 56% { transform:translateY(-11px) scale(1.02); } 66% { transform:translateY(0); } 77% { transform:translateY(-6px) scale(1.01); } 88%,100% { transform:translateY(0) scale(1); opacity:1; } }
body.landing-page .payment-success-timeout { color:#0c8250; font-size:13px; font-weight:900; }
body.landing-page[data-page="msc-home"].is-payment-stage .welcome-content {
  place-items:center !important;
  align-content:center !important;
  min-height:100dvh !important;
  padding-top:92px !important;
  padding-bottom:92px !important;
}
body.landing-page[data-page="msc-home"].is-payment-stage .welcome-copy {
  align-self:center !important;
}
body.landing-page[data-page="msc-home"].is-payment-stage .court-card {
  align-self:center !important;
}
/* Stage navigation: the active step follows the navigation direction. */
.stage-flow.is-stage-switching[data-stage-motion="forward"] button[aria-current="step"] { animation:stage-flow-active-forward .46s cubic-bezier(.16,1,.3,1) both; }.stage-flow.is-stage-switching[data-stage-motion="backward"] button[aria-current="step"] { animation:stage-flow-active-backward .46s cubic-bezier(.16,1,.3,1) both; }@keyframes stage-flow-active-forward { from { opacity:.35; transform:translateX(18px) scale(.94); } to { opacity:1; transform:translateX(0) scale(1); } }@keyframes stage-flow-active-backward { from { opacity:.35; transform:translateX(-18px) scale(.94); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes stage-flow-active-forward { from { opacity:.82; transform:translateX(54px) scale(.92); } 65% { opacity:1; transform:translateX(-5px) scale(1.015); } to { opacity:1; transform:translateX(0) scale(1); } }@keyframes stage-flow-active-backward { from { opacity:.82; transform:translateX(-54px) scale(.92); } 65% { opacity:1; transform:translateX(5px) scale(1.015); } to { opacity:1; transform:translateX(0) scale(1); } }
/* The active marker travels across the arrow between navigation steps. */
.stage-flow-track { position:relative; }.stage-flow.is-stage-switching button[aria-current="step"] { animation:none !important; }.stage-flow button.stage-flow-traveler { position:absolute; z-index:4; margin:0 !important; pointer-events:none; transform:translateX(0) scale(1); transition:transform .62s cubic-bezier(.16,1,.3,1); }
/* Membership fixed-day time picker. */
.membership-time-field [data-membership-time-modal-open] { position:relative; display:flex; align-items:center; justify-content:space-between; width:100%; height:52px; padding:0 17px; color:#4c5666; border:1px solid #f0a5ab; border-radius:999px; background:#fff; box-shadow:none; font:800 14px "Nunito Sans",sans-serif; cursor:pointer; }.membership-time-field [data-membership-time-modal-open] i { display:grid; place-items:center; width:32px; height:32px; color:#fff; border-radius:50%; background:#111722; font-size:14px; }.membership-time-field [data-membership-time-modal-open] > span { color:#4c5666; }
body.landing-page .membership-category-option[data-membership-category-option].is-selected .membership-category-icon { background:#df202a !important; }body.landing-page .membership-category-option[data-membership-category-option].is-selected .membership-category-check { color:#ff9b25 !important; }
/* The chosen membership time lives inside the selected day card. */
body.landing-page .membership-time-field { display:none !important; }.membership-day-option .membership-day-time { display:block; margin-top:3px; color:#fff; font-size:11px; font-weight:800; }.membership-day-option:not(.is-selected) .membership-day-time { display:none !important; }.membership-day [data-membership-day-continue] { margin-top:10px; }
/* Final membership-time modal override. */
body.landing-page .membership-time-field .quantity-modal-native { display:none !important; }body.landing-page .membership-time-field [data-membership-time-modal-open], body.landing-page .membership-time-field [data-membership-time-modal-open]:hover { position:relative !important; display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; height:52px !important; padding:0 17px !important; color:#4c5666 !important; border:1px solid #f0a5ab !important; border-radius:999px !important; background:#fff !important; background-image:none !important; box-shadow:none !important; transform:none !important; }body.landing-page .membership-time-field [data-membership-time-modal-open] > span { color:#4c5666 !important; }body.landing-page .membership-time-field [data-membership-time-modal-open] i { display:grid !important; place-items:center !important; width:32px !important; height:32px !important; color:#fff !important; border-radius:50% !important; background:#111722 !important; box-shadow:0 4px 9px rgb(8 12 19 / 24%) !important; }
body.landing-page.is-services-stage .service-option { position:relative; overflow:hidden; transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s ease !important; }body.landing-page.is-services-stage .service-option:not(.is-selected)::after { display:none; }body.landing-page .service-option:not(.is-selected) > span { box-shadow:0 0 0 4px rgb(255 255 255 / 18%),0 6px 12px rgb(8 12 19 / 28%) !important; }body.landing-page.is-services-stage .service-option:not(.is-selected):hover { transform:translateY(-4px) scale(1.01) !important; box-shadow:0 14px 24px rgb(24 36 53 / 36%) !important; }
body.landing-page .membership-card .email-submit:not(:disabled),body.landing-page .membership-card .email-submit:not(:disabled):hover { color:#fff !important; border-color:rgb(255 129 140 / 58%) !important; background:linear-gradient(105deg,#ff2c3c 0%,#ee1023 48%,#c50719 100%) !important; background-image:linear-gradient(105deg,#ff2c3c 0%,#ee1023 48%,#c50719 100%) !important; box-shadow:inset 0 1px 0 rgb(255 255 255 / 30%),inset 0 -2px 0 rgb(116 0 12 / 28%),0 10px 20px rgb(179 8 24 / 31%) !important; }body.landing-page .membership-card .email-submit::before { display:none !important; content:none !important; animation:none !important; }
/* Shared interaction for every selectable option card. */
.service-option,.membership-category-option,.membership-day-option { transition:transform .22s cubic-bezier(.2,.9,.3,1),box-shadow .22s ease !important; }.service-option:hover,.membership-category-option:hover,.membership-day-option:hover { transform:translateY(-3px) !important; }.service-option:hover > span,.membership-category-option:hover .membership-category-icon,.membership-day-option:hover .membership-category-icon { animation:option-icon-pulse .42s cubic-bezier(.2,1.2,.3,1) both; }.service-option.is-selected .service-option-check,.membership-category-option.is-selected .membership-category-check,.membership-day-option.is-selected .membership-category-check { animation:option-check-pop .42s cubic-bezier(.2,1.25,.3,1) both; }@keyframes option-icon-pulse { 50% { transform:scale(1.11) rotate(-4deg); } }@keyframes option-check-pop { 0% { transform:scale(.45); opacity:0; } 65% { transform:scale(1.18); opacity:1; } 100% { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: no-preference) { .service-option:not(.is-selected) > span,.membership-category-option:not(.is-selected) .membership-category-icon,.membership-day-option:not(.is-selected) .membership-category-icon { animation:option-idle-breathe 4.8s ease-in-out infinite; }.service-option:nth-child(2):not(.is-selected) > span,.membership-category-option:nth-child(2):not(.is-selected) .membership-category-icon,.membership-day-option:nth-child(2):not(.is-selected) .membership-category-icon { animation-delay:1.6s; }.membership-category-option:nth-child(3):not(.is-selected) .membership-category-icon,.membership-day-option:nth-child(3):not(.is-selected) .membership-category-icon { animation-delay:3.2s; } }@keyframes option-idle-breathe { 0%,100% { transform:translateY(0) scale(1); } 46% { transform:translateY(-3px) scale(1.055); } 58% { transform:translateY(0) scale(1); } }
/* Booking field icons share the date/time circle treatment. */
.booking-name-input-wrap { position:relative; display:block; }.booking-name-input-wrap input { padding-right:54px !important; }.booking-name-input-wrap i,.booking-card :is([data-quantity-modal-open],[data-duration-modal-open]) i { position:absolute; top:50%; right:9px; display:grid !important; place-items:center; width:32px; height:32px; color:#fff !important; border-radius:50%; background:#111722; box-shadow:inset 0 1px 0 rgb(255 255 255 / 14%),0 4px 9px rgb(8 12 19 / 24%); font-size:14px; transform:translateY(-50%); }.booking-card :is([data-quantity-modal-open],[data-duration-modal-open]) { position:relative !important; padding-right:52px !important; }
body.landing-page .membership-name-field { gap:0; }
body.landing-page .membership-name-field .booking-name-input-wrap { width:100%; overflow:hidden; border-radius:999px; }
body.landing-page .membership-name-field input {
  box-sizing:border-box;
  width:100%;
  height:52px;
  padding:0 54px 0 17px !important;
  color:#283244;
  border:1px solid #f0a5ab;
  border-radius:999px !important;
  outline-color:#df202a;
  background:#fff;
  font:800 14px "Nunito Sans",sans-serif;
}
body.landing-page .quantity-modal[data-membership-time-modal] .membership-start-date-step .date-input-wrap {
  position:relative !important;
  display:block !important;
  width:100%;
  overflow:hidden;
  border-radius:999px !important;
}
body.landing-page .quantity-modal[data-membership-time-modal] .membership-start-date-step .booking-date-input {
  box-sizing:border-box !important;
  width:100% !important;
  height:52px !important;
  padding-left:17px !important;
  padding-right:54px !important;
  border:1px solid #f0a5ab !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:none !important;
}
body.landing-page .quantity-modal[data-membership-time-modal] .membership-start-date-step .date-picker-button {
  position:absolute !important;
  top:50% !important;
  right:9px !important;
  width:32px !important;
  height:32px !important;
  transform:translateY(-50%) !important;
  border-radius:50% !important;
}
body.landing-page .flatpickr-calendar .flatpickr-day.selected,body.landing-page .flatpickr-calendar .flatpickr-day.selected:hover,body.landing-page .flatpickr-calendar .flatpickr-day.startRange,body.landing-page .flatpickr-calendar .flatpickr-day.endRange { color:#fff !important; border-color:#111722 !important; background:#111722 !important; }
body.landing-page .flatpickr-calendar.booking-date-modal .flatpickr-day.flatpickr-disabled,
body.landing-page .flatpickr-calendar.booking-date-modal .flatpickr-day.flatpickr-disabled:hover,
body.landing-page .flatpickr-calendar.booking-date-modal .flatpickr-day.prevMonthDay.flatpickr-disabled,
body.landing-page .flatpickr-calendar.booking-date-modal .flatpickr-day.nextMonthDay.flatpickr-disabled {
  color:#c7ced8 !important;
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  opacity:.55 !important;
  pointer-events:none !important;
}
body.landing-page .flatpickr-calendar.booking-date-modal .flatpickr-day.is-msc-item-price:not(.flatpickr-disabled) {
  position:relative;
  color:#e1192a !important;
  font-weight:900 !important;
}
body.landing-page .flatpickr-calendar.booking-date-modal .flatpickr-day.is-msc-item-price:not(.flatpickr-disabled)::after {
  position:absolute;
  right:50%;
  bottom:5px;
  width:4px;
  height:4px;
  content:"";
  border-radius:50%;
  background:#e1192a;
  transform:translateX(50%);
}
.landing-page.is-confirm-stage .booking-order-summary { padding-top:0 !important; }.landing-page.is-confirm-stage .booking-order-summary > header { min-height:58px; padding-top:0 !important; }.landing-page.is-confirm-stage .booking-order-summary > header span { margin-top:10px; transform:none; }
body.landing-page .welcome-screen .welcome-content .welcome-copy .membership-card .email-submit:not(:disabled) { color:#fff !important; border-color:rgb(255 129 140 / 58%) !important; background:linear-gradient(105deg,#ff2c3c 0%,#ee1023 48%,#c50719 100%) !important; box-shadow:inset 0 1px 0 rgb(255 255 255 / 30%),inset 0 -2px 0 rgb(116 0 12 / 28%),0 10px 20px rgb(179 8 24 / 31%) !important; }body.landing-page .welcome-screen .welcome-content .welcome-copy .membership-card .email-submit:not(:disabled):hover { color:#fff !important; background:linear-gradient(105deg,#ff4654 0%,#f3172b 48%,#d3091c 100%) !important; }#membership-terms-title > span { color:#171a22 !important; }#membership-terms-title > .booking-terms-title-accent { color:#d71929 !important; }body.landing-page .terms-continue-button:not(:disabled),body.landing-page .terms-continue-button:not(:disabled):hover { color:#fff !important; border-color:rgb(255 129 140 / 58%) !important; background:linear-gradient(105deg,#ff2c3c 0%,#ee1023 48%,#c50719 100%) !important; background-image:linear-gradient(105deg,#ff2c3c 0%,#ee1023 48%,#c50719 100%) !important; box-shadow:inset 0 1px 0 rgb(255 255 255 / 30%),inset 0 -2px 0 rgb(116 0 12 / 28%),0 10px 20px rgb(179 8 24 / 31%) !important; }
body.landing-page .terms-continue-button:disabled { color:#fff !important; border-color:rgb(255 255 255 / 23%) !important; background:linear-gradient(105deg,#080c13,#151d29) !important; background-image:linear-gradient(105deg,#080c13,#151d29) !important; box-shadow:inset 0 1px 0 rgb(255 255 255 / 20%),inset 0 -1px 0 rgb(0 0 0 / 62%),0 12px 24px rgb(8 12 19 / 38%) !important; cursor:not-allowed; opacity:.52; filter:grayscale(.25); }
/* Quantity selector: final isolated styling. */
.quantity-carousel { display:grid; grid-template-columns:28px 1fr 28px; align-items:center; gap:6px; margin-top:18px; }.quantity-carousel-track { display:flex; align-items:center; justify-content:center; gap:8px; margin:0; overflow:hidden; }.quantity-carousel-track > button { flex:0 0 60px; min-height:68px !important; transition:transform .28s ease,opacity .28s ease !important; }.quantity-carousel-track > button.is-carousel-focus { color:#fff !important; border-color:#111722 !important; background:#111722 !important; transform:scale(1.12); }.quantity-carousel-arrow { display:grid; place-items:center; width:28px; height:36px; padding:0; color:#111722; border:0; background:transparent; cursor:pointer; }
.quantity-carousel { grid-template-columns:1fr !important; overflow:hidden; }.quantity-carousel-arrow { display:none !important; }.quantity-carousel-track { position:relative; height:94px; overflow:visible; perspective:700px; }.quantity-carousel-track > button { position:absolute; left:50%; top:10px; width:74px; min-height:74px !important; margin:0; opacity:.42; transform:translateX(-50%) scale(.72); }.quantity-carousel-track > button.is-carousel-focus { z-index:5; opacity:1; transform:translateX(-50%) scale(1.1); }.quantity-carousel-track > button:nth-child(1) { translate:-150px 0; }.quantity-carousel-track > button:nth-child(2) { translate:-75px 0; }.quantity-carousel-track > button:nth-child(4) { translate:75px 0; }.quantity-carousel-track > button:nth-child(5) { translate:150px 0; }
body.landing-page .welcome-screen .welcome-content .welcome-copy .booking-card .quantity-modal-trigger:not(:disabled), body.landing-page .welcome-screen .welcome-content .welcome-copy .booking-card .quantity-modal-trigger:not(:disabled):hover { position:relative !important; display:flex !important; align-items:center !important; justify-content:space-between !important; height:52px !important; padding:0 17px !important; color:#4c5666 !important; border:1px solid #f0a5ab !important; border-radius:999px !important; background:#fff !important; background-image:none !important; box-shadow:none !important; transform:none !important; }.landing-page .quantity-modal-trigger > span { color:#4c5666 !important; }.landing-page .quantity-modal-trigger i { color:#df202a !important; }.landing-page .quantity-modal { z-index:1000 !important; }.landing-page .quantity-modal-dialog { position:relative !important; width:min(100%,390px) !important; padding:28px !important; border:1px solid #fff !important; border-radius:24px !important; background:#fff !important; box-shadow:0 24px 52px rgb(8 12 19 / 36%) !important; }.landing-page .quantity-modal-close { position:absolute !important; top:15px !important; right:15px !important; left:auto !important; display:grid !important; place-items:center !important; width:32px !important; height:32px !important; padding:0 !important; color:#fff !important; border:0 !important; border-radius:50% !important; background:#111722 !important; box-shadow:none !important; transform:none !important; }.landing-page .quantity-modal-options > button { position:relative !important; display:grid !important; min-height:74px !important; padding:8px 3px !important; color:#273246 !important; border:1px solid #edf0f3 !important; border-radius:15px !important; background:#fff !important; box-shadow:none !important; transform:none !important; }.landing-page .quantity-modal-options > button:hover,.landing-page .quantity-modal-options > button.is-selected { color:#fff !important; border-color:#111722 !important; background:#111722 !important; }
.scan-result-modal .scan-booking-person > span { display:grid !important; gap:2px; }.scan-result-modal .scan-booking-person small { display:block !important; grid-column:auto !important; padding:0 !important; color:#a96a71 !important; border:0 !important; font-size:10px !important; font-weight:800 !important; text-align:left !important; }.scan-result-modal .scan-booking-person strong { color:#8e0b18 !important; font-size:14px !important; }
.scan-result-modal { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:22px; }.scan-result-modal[hidden] { display:none; }.scan-result-modal__backdrop { position:absolute; inset:0; background:rgb(17 24 39 / 62%); backdrop-filter:blur(4px); }.scan-result-modal__dialog { position:relative; width:min(100%,560px); max-height:calc(100vh - 44px); overflow:auto; padding:30px; color:#273243; border:1px solid rgb(255 255 255 / 72%); border-radius:25px; background:linear-gradient(145deg,#fff 0%,#fff8f8 100%); box-shadow:0 24px 60px rgb(24 10 13 / 35%); text-align:center; }.scan-result-modal__close { position:absolute; top:14px; right:14px; display:grid; width:34px; height:34px; place-items:center; padding:0; color:#6c737e; border:0; border-radius:50%; background:#f5eeee; cursor:pointer; }.scan-result-modal__icon { display:grid; width:78px; height:78px; place-items:center; margin:0 auto 16px; border-radius:50%; font-size:56px; }.scan-result-modal.is-invalid .scan-result-modal__icon { color:#f26c72; }.scan-result-modal.is-valid .scan-result-modal__icon { color:#1ea871; }.scan-result-modal.is-info .scan-result-modal__icon { color:#f4a62a; }.scan-result-modal h2 { margin:0; color:#263141; font-size:28px; line-height:1.2; }.scan-result-modal__content > p { margin:14px 0 0; color:#6b7d96; font-size:16px; line-height:1.65; }.scan-result-modal .scan-booking-detail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:20px 0 0; padding:13px; color:#263141; border:1px solid #e8d6d8; border-radius:16px; background:linear-gradient(145deg,#fff,#fff5f6); text-align:left; box-shadow:0 8px 18px rgb(112 18 30 / 9%); }.scan-result-modal .scan-booking-person { grid-column:1 / -1; display:flex; align-items:center; gap:8px; padding:10px; color:#9e0c1b; border-radius:11px; background:#fff0f1; font-weight:900; }.scan-result-modal .scan-booking-detail > div:not(.scan-booking-person) { display:grid; grid-template-columns:17px 1fr; gap:1px 7px; align-items:center; padding:7px 2px; }.scan-result-modal .scan-booking-detail > div:not(.scan-booking-person) i { grid-row:1 / span 2; color:#d51728; font-size:13px; }.scan-result-modal .scan-booking-detail span { color:#7b8490; font-size:10px; font-weight:800; }.scan-result-modal .scan-booking-detail strong { color:#202a38; font-size:12px; }.scan-result-modal .scan-booking-detail small { grid-column:1 / -1; padding-top:8px; color:#b31020; border-top:1px dashed #edc9cc; font-size:10px; font-weight:900; text-align:center; }.scan-result-modal__button { width:100%; margin-top:18px; padding:13px 18px; color:#fff; border:0; border-radius:999px; background:linear-gradient(105deg,#ff2c3c 0%,#ee1023 48%,#c50719 100%); box-shadow:0 8px 16px rgb(173 14 28 / 24%); font-weight:900; cursor:pointer; }.has-scan-modal { overflow:hidden; } @media (max-width:540px) { .scan-result-modal { padding:14px; }.scan-result-modal__dialog { padding:28px 20px 20px; border-radius:20px; }.scan-result-modal h2 { font-size:24px; }.scan-result-modal__content > p { font-size:14px; }.scan-result-modal__icon { width:66px; height:66px; margin-bottom:12px; font-size:48px; } }
.scan-checkin-form { margin-top:16px; text-align:left; }.scan-checkin-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 12px; }.scan-checkin-head p { margin:0; color:#637083; font-size:14px; line-height:1.5; text-align:left; }.scan-checkin-select-all { flex:0 0 auto; min-height:24px; padding:2px 0; color:#111722; font-size:13px; font-weight:900; line-height:1.4; text-align:right; text-decoration:underline; text-underline-offset:3px; cursor:pointer; user-select:none; }.scan-checkin-select-all.is-selected { color:#b30d1d; }.scan-checkin-list { display:grid; gap:9px; max-height:300px; overflow:auto; padding:2px; }.scan-checkin-option { display:grid; grid-template-columns:22px 1fr auto; gap:10px; align-items:center; padding:12px; border:1px solid #f0c4c8; border-radius:14px; background:#fff; box-shadow:0 8px 18px rgb(112 18 30 / 8%); cursor:pointer; }.scan-checkin-option input { width:18px; height:18px; accent-color:#d80f21; }.scan-checkin-option span { display:grid; gap:3px; min-width:0; }.scan-checkin-option strong { color:#202a38; font-size:14px; }.scan-checkin-option small { color:#66758a; font-size:12px; }.scan-checkin-option code { width:max-content; max-width:100%; overflow:hidden; color:#b20d1d; font-size:11px; font-weight:900; text-overflow:ellipsis; }.scan-checkin-option em { padding:5px 8px; color:#9d0c1a; border-radius:999px; background:#fff0f1; font-size:10px; font-style:normal; font-weight:900; white-space:nowrap; }.scan-checkin-option.is-disabled { opacity:.62; cursor:not-allowed; }.scan-checkin-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }.scan-checkin-action { display:grid; min-height:50px; place-items:center; padding:12px 16px; border:0; border-radius:999px; font:inherit; font-weight:900; text-align:center; cursor:pointer; }.scan-checkin-primary { color:#fff; background:linear-gradient(105deg,#ff2c3c 0%,#ee1023 48%,#c50719 100%); box-shadow:0 8px 16px rgb(173 14 28 / 24%); }.scan-checkin-secondary { color:#fff; background:#05080d; box-shadow:0 8px 16px rgb(5 8 13 / 20%); }.scan-checkin-action:disabled,.scan-checkin-select-all.is-disabled { opacity:.55; cursor:not-allowed; }.scan-result-modal.is-checkin-picker .scan-result-modal__button { display:none; } @media (max-width:420px) { .scan-checkin-head { align-items:stretch; flex-direction:column; }.scan-checkin-select-all { align-self:flex-end; }.scan-checkin-option { grid-template-columns:22px 1fr; }.scan-checkin-option em { grid-column:2; width:max-content; }.scan-checkin-actions { gap:9px; } }

/* Court quantity picker carousel. */
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-modal-dialog {
  width:min(100%,460px) !important;
  padding:28px 18px 24px !important;
  overflow:hidden !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-modal-dialog > :is(p,span) {
  margin-left:12px !important;
  margin-right:48px !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel {
  position:relative !important;
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) 38px !important;
  align-items:center !important;
  gap:0 !important;
  min-height:190px !important;
  margin:14px -8px -4px !important;
  overflow:hidden !important;
  perspective:900px !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track {
  position:relative !important;
  display:block !important;
  height:178px !important;
  margin:0 !important;
  overflow:visible !important;
  transform-style:preserve-3d !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button {
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  z-index:1 !important;
  display:grid !important;
  place-items:center !important;
  width:118px !important;
  height:146px !important;
  min-height:146px !important;
  padding:0 !important;
  opacity:.45 !important;
  border:0 !important;
  border-radius:6px !important;
  background:#6d5ac7 !important;
  box-shadow:0 16px 26px rgb(18 25 36 / 20%) !important;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .25s ease,filter .25s ease !important;
  translate:none !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button strong {
  color:#fff !important;
  font:900 54px/1 "Nunito Sans",sans-serif !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button small {
  display:none !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button[data-carousel-position="-2"] {
  transform:translate(-200%,-50%) rotateY(-38deg) scale(.78) !important;
  background:#ff716e !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button[data-carousel-position="-1"] {
  z-index:2 !important;
  opacity:.76 !important;
  transform:translate(-132%,-50%) rotateY(-30deg) scale(.88) !important;
  background:#f52f72 !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button[data-carousel-position="0"] {
  z-index:5 !important;
  width:170px !important;
  height:176px !important;
  min-height:176px !important;
  opacity:1 !important;
  background:#9f25b9 !important;
  box-shadow:0 22px 34px rgb(98 29 119 / 24%) !important;
  transform:translate(-50%,-50%) rotateY(0) scale(1) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button[data-carousel-position="0"] strong {
  font-size:64px !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button[data-carousel-position="1"] {
  z-index:2 !important;
  opacity:.76 !important;
  transform:translate(32%,-50%) rotateY(30deg) scale(.88) !important;
  background:#6f53c6 !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button[data-carousel-position="2"] {
  transform:translate(100%,-50%) rotateY(38deg) scale(.78) !important;
  background:#7185d6 !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button:hover,
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button.is-carousel-focus,
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button.is-selected {
  color:#fff !important;
  border-color:transparent !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-arrow,
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-arrow:hover {
  z-index:8 !important;
  display:grid !important;
  place-items:center !important;
  width:34px !important;
  height:42px !important;
  padding:0 !important;
  color:#1d2634 !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgb(255 255 255 / 82%) !important;
  box-shadow:0 8px 16px rgb(8 12 19 / 16%) !important;
  cursor:pointer !important;
}
@media (max-width:460px) {
  body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel { min-height:168px !important; }
  body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track { height:158px !important; }
  body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button { width:94px !important; height:124px !important; min-height:124px !important; }
  body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button[data-carousel-position="0"] { width:136px !important; height:150px !important; min-height:150px !important; }
  body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button strong { font-size:42px !important; }
  body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > button[data-carousel-position="0"] strong { font-size:54px !important; }
}

/* Neutral draggable quantity carousel. */
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel {
  grid-template-columns:34px minmax(0,1fr) 34px !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track {
  cursor:grab !important;
  touch-action:pan-y !important;
  user-select:none !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track.is-dragging {
  cursor:grabbing !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > [data-quantity-modal-value] {
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  z-index:1 !important;
  display:grid !important;
  place-items:center !important;
  width:112px !important;
  height:142px !important;
  min-height:142px !important;
  padding:0 !important;
  color:#202a38 !important;
  opacity:.46 !important;
  border:1px solid #cfd7e2 !important;
  border-radius:7px !important;
  background:linear-gradient(135deg,#f6f8fa 0%,#dbe2eb 100%) !important;
  box-shadow:0 16px 25px rgb(25 36 52 / 17%) !important;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .25s ease,box-shadow .25s ease !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > [data-quantity-modal-value] strong {
  color:inherit !important;
  font:900 52px/1 "Nunito Sans",sans-serif !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > [data-quantity-modal-value] small {
  display:none !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > [data-carousel-position="-2"] {
  z-index:1 !important;
  transform:translate(calc(-203% + var(--quantity-drag-x,0px)),-50%) rotateY(-38deg) scale(.78) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > [data-carousel-position="-1"] {
  z-index:8 !important;
  opacity:.78 !important;
  transform:translate(calc(-132% + var(--quantity-drag-x,0px)),-50%) rotateY(-29deg) scale(.9) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > [data-carousel-position="0"] {
  z-index:30 !important;
  width:172px !important;
  height:176px !important;
  min-height:176px !important;
  color:#fff !important;
  opacity:1 !important;
  border-color:#111722 !important;
  background:#111722 !important;
  box-shadow:0 24px 36px rgb(8 12 19 / 28%) !important;
  transform:translate(calc(-50% + var(--quantity-drag-x,0px)),-50%) rotateY(0) scale(1) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > [data-carousel-position="0"] strong {
  color:#fff !important;
  font-size:64px !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > [data-carousel-position="1"] {
  z-index:8 !important;
  opacity:.78 !important;
  transform:translate(calc(32% + var(--quantity-drag-x,0px)),-50%) rotateY(29deg) scale(.9) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-track > [data-carousel-position="2"] {
  z-index:1 !important;
  transform:translate(calc(103% + var(--quantity-drag-x,0px)),-50%) rotateY(38deg) scale(.78) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-arrow,
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-arrow:hover,
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-arrow:focus-visible {
  color:#111722 !important;
  border:1px solid #edf0f3 !important;
  background:#fff !important;
  background-image:none !important;
  box-shadow:0 5px 12px rgb(8 12 19 / 15%) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel-arrow i {
  color:#111722 !important;
}

/* Reusable vertical time wheel picker. */
body.landing-page .quantity-modal[data-time-modal] .quantity-modal-dialog {
  width:min(100%,390px) !important;
  padding:28px 24px 30px !important;
  overflow:visible !important;
  border-radius:28px !important;
  background:#fff !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-modal-dialog > :is(p,span) {
  margin-left:0 !important;
}
body.landing-page .msc-time-wheel {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);
  align-items:center;
  gap:8px;
  height:252px;
  margin:22px 0 0;
  overflow:hidden;
  touch-action:none;
  user-select:none;
}
body.landing-page .msc-time-wheel::before,
body.landing-page .msc-time-wheel::after {
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  height:54px;
  content:"";
  pointer-events:none;
}
body.landing-page .msc-time-wheel::before {
  top:0;
  background:linear-gradient(180deg,#fff 0%,rgb(255 255 255 / 88%) 45%,rgb(255 255 255 / 0%) 100%);
}
body.landing-page .msc-time-wheel::after {
  bottom:0;
  background:linear-gradient(0deg,#fff 0%,rgb(255 255 255 / 88%) 45%,rgb(255 255 255 / 0%) 100%);
}
body.landing-page .msc-time-wheel-column {
  position:relative;
  height:100%;
  overflow:hidden;
  border:1px solid #d8e0e9;
  border-radius:20px;
  background:linear-gradient(180deg,#f8fafc 0%,#edf3f8 48%,#f8fafc 100%);
  box-shadow:inset 0 1px 0 #fff,0 12px 22px rgb(24 36 53 / 10%);
  outline:none;
  cursor:grab;
  --time-wheel-drag-y:0px;
}
body.landing-page .msc-time-wheel-column.is-dragging {
  cursor:grabbing;
}
body.landing-page .msc-time-wheel-item {
  position:absolute;
  top:50%;
  left:0;
  right:0;
  display:grid;
  place-items:center;
  height:58px;
  color:#596371 !important;
  border:0;
  border-top:1px solid rgb(183 195 209 / 50%);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  opacity:0;
  pointer-events:none;
  transform:translateY(calc(-50% + var(--time-wheel-drag-y,0px))) scale(.8);
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .24s ease,color .24s ease,background .24s ease,box-shadow .24s ease,border-color .24s ease;
}
body.landing-page .msc-time-wheel-item:not(.is-wheel-visible) {
  opacity:0 !important;
  pointer-events:none !important;
}
body.landing-page .msc-time-wheel-column.is-dragging .msc-time-wheel-item {
  transition:transform .08s linear,opacity .12s ease !important;
}
body.landing-page .msc-time-wheel-item strong {
  color:inherit !important;
  font:900 18px/1 "Nunito Sans",sans-serif;
}
body.landing-page .msc-time-wheel-item[data-wheel-position="-2"] {
  opacity:.28;
  transform:translateY(calc(-154px + var(--time-wheel-drag-y,0px))) scale(.82);
}
body.landing-page .msc-time-wheel-item[data-wheel-position="-1"] {
  opacity:.66;
  border-bottom:0;
  pointer-events:auto;
  transform:translateY(calc(-96px + var(--time-wheel-drag-y,0px))) scale(.92);
}
body.landing-page .msc-time-wheel-item[data-wheel-position="0"] {
  z-index:4;
  color:#fff !important;
  border:0;
  border-top:0;
  border-bottom:0;
  border-radius:0;
  background:#111722;
  box-shadow:0 22px 34px rgb(8 12 19 / 22%);
  opacity:1;
  pointer-events:auto;
  transform:translateY(calc(-50% + var(--time-wheel-drag-y,0px))) scale(1);
}
body.landing-page .msc-time-wheel-item[data-wheel-position="1"] {
  opacity:.66;
  border-top:0;
  pointer-events:auto;
  transform:translateY(calc(38px + var(--time-wheel-drag-y,0px))) scale(.92);
}
body.landing-page .msc-time-wheel-item[data-wheel-position="2"] {
  opacity:.28;
  transform:translateY(calc(96px + var(--time-wheel-drag-y,0px))) scale(.82);
}
body.landing-page .msc-time-wheel-separator {
  z-index:6;
  display:grid;
  place-items:center;
  color:#111722;
  font:900 28px/1 "Nunito Sans",sans-serif;
}
@media (max-width:460px) {
  body.landing-page .quantity-modal[data-time-modal] .quantity-modal-dialog {
    padding:26px 20px 28px !important;
  }
  body.landing-page .msc-time-wheel {
    height:238px;
    gap:6px;
  }
  body.landing-page .msc-time-wheel-item {
    height:54px;
    border-radius:16px;
  }
  body.landing-page .msc-time-wheel-item strong {
    font-size:17px;
  }
}

/* Absolute final carousel label rule: only the generated label is visible. */
body.landing-page .quantity-modal [data-carousel-track] > [data-carousel-item] > small {
  display:none !important;
  visibility:hidden !important;
}
body.landing-page .quantity-modal [data-carousel-track] > [data-carousel-item]::after {
  display:block !important;
  content:attr(data-carousel-label) !important;
  color:inherit !important;
  opacity:.76 !important;
  font:900 11px/1 "Nunito Sans",sans-serif !important;
}
body.landing-page .quantity-modal [data-carousel-track] > [data-carousel-position="0"]::after {
  color:#fff !important;
  opacity:.8 !important;
  font-size:12px !important;
}

/* Reusable value carousel. Use data-carousel + data-carousel-item with dynamic values. */
.msc-value-carousel {
  position:relative;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 24px;
  align-items:center;
  gap:0;
  min-height:214px;
  margin:14px -6px 4px;
  overflow:visible;
}
.msc-value-carousel-track {
  --carousel-drag-x:0px;
  position:relative;
  height:204px;
  overflow:visible;
  isolation:isolate;
  cursor:grab;
  touch-action:pan-y;
  user-select:none;
}
.msc-value-carousel-track.is-dragging {
  cursor:grabbing;
}
.msc-value-carousel-track.is-dragging > [data-carousel-item] {
  transition:transform .08s linear,opacity .12s ease,box-shadow .12s ease !important;
}
.msc-value-carousel-track > [data-carousel-item] {
  position:absolute;
  top:50%;
  left:50%;
  z-index:1;
  display:grid;
  place-items:center;
  align-content:center;
  gap:7px;
  width:112px;
  height:142px;
  color:#343e4b;
  opacity:.5;
  border:1px solid #d5dde7;
  border-radius:28px;
  background:linear-gradient(135deg,#f1f5f9 0%,#d9e1ec 100%);
  box-shadow:0 18px 30px rgb(25 36 52 / 18%);
  will-change:transform,opacity;
  backface-visibility:hidden;
  transition:transform .48s cubic-bezier(.16,1,.3,1),opacity .28s ease,box-shadow .28s ease,filter .28s ease;
}
.msc-value-carousel-track > [data-carousel-item][hidden] {
  display:none !important;
}
.msc-value-carousel-track > [data-carousel-item] strong {
  color:inherit;
  font:900 50px/1 "Nunito Sans",sans-serif;
}
.msc-value-carousel-track > [data-carousel-item] small {
  display:block;
  color:inherit;
  opacity:.72;
  font:900 11px/1 "Nunito Sans",sans-serif;
  text-transform:none;
}
.msc-value-carousel-track > [data-carousel-position="-2"] {
  z-index:1;
  opacity:.36;
  transform:translate(calc(-210% + var(--carousel-drag-x,0px)),-50%) rotateY(-34deg) scale(.72);
}
.msc-value-carousel-track > [data-carousel-position="-1"] {
  z-index:3;
  opacity:.68;
  transform:translate(calc(-144% + var(--carousel-drag-x,0px)),-50%) rotateY(-26deg) scale(.84);
}
.msc-value-carousel-track > [data-carousel-position="0"] {
  z-index:50;
  width:172px;
  height:176px;
  color:#fff;
  opacity:1;
  border-color:#111722;
  border-radius:28px;
  background:#111722;
  box-shadow:0 30px 42px rgb(8 12 19 / 30%);
  transform:translate(calc(-50% + var(--carousel-drag-x,0px)),-50%) scale(1);
}
.msc-value-carousel-track > [data-carousel-position="0"] strong {
  color:#fff;
  font-size:62px;
}
.msc-value-carousel-track > [data-carousel-position="0"] small {
  color:#fff;
  opacity:.76;
  font-size:12px;
}
.msc-value-carousel-track > [data-carousel-position="1"] {
  z-index:3;
  opacity:.68;
  transform:translate(calc(44% + var(--carousel-drag-x,0px)),-50%) rotateY(26deg) scale(.84);
}
.msc-value-carousel-track > [data-carousel-position="2"] {
  z-index:1;
  opacity:.36;
  transform:translate(calc(110% + var(--carousel-drag-x,0px)),-50%) rotateY(34deg) scale(.72);
}
.msc-value-carousel-arrow,
.msc-value-carousel-arrow:hover,
.msc-value-carousel-arrow:focus-visible {
  z-index:60;
  display:grid;
  place-items:center;
  width:24px;
  height:42px;
  color:#111722;
  border:0;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.msc-value-carousel-arrow:hover,
.msc-value-carousel-arrow:focus-visible {
  outline:none;
  transform:scale(1.08);
}
.msc-value-carousel-arrow i {
  color:#111722;
}
body.landing-page .quantity-modal[data-quantity-modal] .quantity-modal-dialog {
  padding-bottom:42px !important;
  overflow:visible !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel {
  min-height:218px !important;
  margin-bottom:2px !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-track {
  height:208px !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-track > [data-carousel-item] {
  background:linear-gradient(135deg,#f0f4f8 0%,#d6dfeb 100%) !important;
  opacity:.52 !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-track > [data-carousel-position="-1"],
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-track > [data-carousel-position="1"] {
  opacity:.7 !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-track > [data-carousel-position="0"] {
  background:#111722 !important;
  opacity:1 !important;
}
@media (max-width:460px) {
  .msc-value-carousel { min-height:190px; }
  .msc-value-carousel-track { height:180px; }
  .msc-value-carousel-track > [data-carousel-item] {
    width:92px;
    height:122px;
  }
  .msc-value-carousel-track > [data-carousel-position="0"] {
    width:138px;
    height:150px;
  }
  .msc-value-carousel-track > [data-carousel-item] strong {
    font-size:42px;
  }
  .msc-value-carousel-track > [data-carousel-position="0"] strong {
    font-size:54px;
  }
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-track > [data-carousel-item] {
  width:112px !important;
  height:142px !important;
  min-height:142px !important;
  color:#343e4b !important;
  border:1px solid #d5dde7 !important;
  border-radius:28px !important;
  box-shadow:0 18px 30px rgb(25 36 52 / 18%) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-track > [data-carousel-position="-2"] {
  z-index:1 !important;
  opacity:.36 !important;
  transform:translate(calc(-210% + var(--carousel-drag-x,0px)),-50%) rotateY(-34deg) scale(.72) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-track > [data-carousel-position="-1"] {
  z-index:3 !important;
  opacity:.7 !important;
  transform:translate(calc(-144% + var(--carousel-drag-x,0px)),-50%) rotateY(-26deg) scale(.84) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-track > [data-carousel-position="0"] {
  z-index:50 !important;
  width:172px !important;
  height:176px !important;
  min-height:176px !important;
  color:#fff !important;
  border-color:#111722 !important;
  border-radius:28px !important;
  box-shadow:0 30px 42px rgb(8 12 19 / 30%) !important;
  transform:translate(calc(-50% + var(--carousel-drag-x,0px)),-50%) scale(1) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-track > [data-carousel-position="1"] {
  z-index:3 !important;
  opacity:.7 !important;
  transform:translate(calc(44% + var(--carousel-drag-x,0px)),-50%) rotateY(26deg) scale(.84) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-track > [data-carousel-position="2"] {
  z-index:1 !important;
  opacity:.36 !important;
  transform:translate(calc(110% + var(--carousel-drag-x,0px)),-50%) rotateY(34deg) scale(.72) !important;
}
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-arrow,
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-arrow:hover,
body.landing-page .quantity-modal[data-quantity-modal] .msc-value-carousel-arrow:focus-visible {
  width:24px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Keep the focused carousel card shadow fully visible. */
body.landing-page .quantity-modal[data-quantity-modal] .quantity-modal-dialog {
  padding-bottom:64px !important;
  overflow:visible !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) :is(.msc-value-carousel,.quantity-carousel) {
  min-height:248px !important;
  margin-bottom:-18px !important;
  overflow:visible !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) :is(.msc-value-carousel-track,.quantity-carousel-track) {
  height:232px !important;
  overflow:visible !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-position="0"] {
  box-shadow:0 34px 48px rgb(8 12 19 / 28%) !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-item] {
  color:#5f6976 !important;
  border-color:#c6d0dc !important;
  background:linear-gradient(135deg,#e9eef4 0%,#cfd8e4 100%) !important;
  box-shadow:0 18px 30px rgb(25 36 52 / 20%) !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-position="-2"],
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-position="2"] {
  opacity:.48 !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-position="-1"],
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-position="1"] {
  opacity:.82 !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-position="0"] {
  color:#fff !important;
  border-color:#111722 !important;
  background:#111722 !important;
}
body.landing-page .quantity-modal:is([data-duration-modal],[data-time-modal]) .quantity-modal-dialog {
  width:min(100%,460px) !important;
  padding:28px 18px 64px !important;
  overflow:visible !important;
}
body.landing-page .quantity-modal:is([data-duration-modal],[data-time-modal]) .quantity-modal-dialog > :is(p,span) {
  margin-left:12px !important;
  margin-right:48px !important;
}
body.landing-page .quantity-modal:is([data-duration-modal],[data-time-modal]) .msc-value-carousel {
  min-height:248px !important;
  margin:14px -6px -18px !important;
  overflow:visible !important;
}
body.landing-page .quantity-modal:is([data-duration-modal],[data-time-modal]) .msc-value-carousel-track {
  height:232px !important;
  overflow:visible !important;
}
body.landing-page .quantity-modal:is([data-duration-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-item] {
  color:#5f6976 !important;
  border-color:#c6d0dc !important;
  background:linear-gradient(135deg,#e9eef4 0%,#cfd8e4 100%) !important;
  box-shadow:0 18px 30px rgb(25 36 52 / 20%) !important;
}
body.landing-page .quantity-modal:is([data-duration-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-position="-2"],
body.landing-page .quantity-modal:is([data-duration-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-position="2"] {
  opacity:.48 !important;
}
body.landing-page .quantity-modal:is([data-duration-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-position="-1"],
body.landing-page .quantity-modal:is([data-duration-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-position="1"] {
  opacity:.82 !important;
}
body.landing-page .quantity-modal:is([data-duration-modal],[data-time-modal]) .msc-value-carousel-track > [data-carousel-position="0"] {
  color:#fff !important;
  border-color:#111722 !important;
  background:#111722 !important;
  box-shadow:0 34px 48px rgb(8 12 19 / 28%) !important;
}
body.landing-page .quantity-modal[data-time-modal] .time-carousel-empty {
  display:grid;
  place-items:center;
  align-content:center;
  min-height:132px;
  margin:28px 12px 4px;
  padding:18px 22px;
  color:#4c5666;
  text-align:center;
}
body.landing-page .quantity-modal[data-time-modal] .time-carousel-empty[hidden] {
  display:none !important;
}
body.landing-page .quantity-modal[data-time-modal] .time-carousel-empty i {
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  margin-bottom:14px;
  color:#df202a;
  border-radius:50%;
  background:#fff0f1;
  font-size:24px;
}
body.landing-page .quantity-modal[data-time-modal] .time-carousel-empty[data-state="loading"] i {
  position:relative;
  color:#fff;
  background:#111722;
  animation:time-loading-pulse 1.05s ease-in-out infinite;
}
body.landing-page .quantity-modal[data-time-modal] .time-carousel-empty[data-state="loading"] i::after {
  position:absolute;
  inset:-7px;
  content:"";
  border:2px solid rgb(223 32 42 / 16%);
  border-top-color:#df202a;
  border-radius:50%;
  animation:time-loading-spin .82s linear infinite;
}
body.landing-page .quantity-modal[data-time-modal] .time-carousel-empty strong {
  color:#172033;
  font:900 18px/1.2 "Nunito Sans",sans-serif;
}
body.landing-page .quantity-modal[data-time-modal] .time-carousel-empty small {
  display:block;
  max-width:260px;
  margin-top:7px;
  color:#7b8490;
  font:800 12px/1.5 "Nunito Sans",sans-serif;
}
body.landing-page .quantity-modal :is(.msc-value-carousel-track,.quantity-carousel-track) > [data-carousel-item] {
  align-content:center !important;
  gap:7px !important;
}
body.landing-page .quantity-modal :is(.msc-value-carousel-track,.quantity-carousel-track) > [data-carousel-item] strong {
  font-size:50px !important;
}
body.landing-page .quantity-modal :is(.msc-value-carousel-track,.quantity-carousel-track) > [data-carousel-item] small {
  display:block !important;
  color:inherit !important;
  opacity:.72 !important;
  font:900 11px/1 "Nunito Sans",sans-serif !important;
}
body.landing-page .quantity-modal :is(.msc-value-carousel-track,.quantity-carousel-track) > [data-carousel-position="0"] strong {
  color:#fff !important;
  font-size:62px !important;
}
body.landing-page .quantity-modal :is(.msc-value-carousel-track,.quantity-carousel-track) > [data-carousel-position="0"] small {
  color:#fff !important;
  opacity:.76 !important;
  font-size:12px !important;
}

/* Final label guard for reusable carousel cards. */
body.landing-page .quantity-modal [data-carousel-track] > [data-carousel-item] {
  grid-template-rows:auto auto !important;
  align-content:center !important;
  gap:8px !important;
}
body.landing-page .quantity-modal [data-carousel-track] > [data-carousel-item] > small {
  display:block !important;
  visibility:visible !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  color:inherit !important;
  opacity:.76 !important;
  font:900 11px/1 "Nunito Sans",sans-serif !important;
}
body.landing-page .quantity-modal [data-carousel-track] > [data-carousel-position="0"] > small {
  color:#fff !important;
  opacity:.8 !important;
  font-size:12px !important;
}

/* Quantity modal label must win over the older quantity-specific rules. */
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) [data-carousel-track] > [data-quantity-modal-value] {
  display:grid !important;
  grid-template-rows:auto auto !important;
  align-content:center !important;
  place-items:center !important;
  gap:8px !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) [data-carousel-track] > [data-quantity-modal-value] > small {
  display:block !important;
  visibility:visible !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  clip:auto !important;
  color:inherit !important;
  opacity:.76 !important;
  font:900 11px/1 "Nunito Sans",sans-serif !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) [data-carousel-track] > [data-carousel-position="0"] > small {
  color:#fff !important;
  opacity:.8 !important;
  font-size:12px !important;
}

/* Render carousel labels from data so old small-tag rules cannot hide them. */
body.landing-page .quantity-modal [data-carousel-track] > [data-carousel-item] > small {
  display:none !important;
}
body.landing-page .quantity-modal [data-carousel-track] > [data-carousel-item]::after {
  display:block !important;
  content:attr(data-carousel-label) !important;
  color:inherit !important;
  opacity:.76 !important;
  font:900 11px/1 "Nunito Sans",sans-serif !important;
}
body.landing-page .quantity-modal [data-carousel-track] > [data-carousel-item]:not([data-carousel-label])::after,
body.landing-page .quantity-modal [data-carousel-track] > [data-carousel-item][data-carousel-label=""]::after {
  display:none !important;
  content:"" !important;
}
body.landing-page .quantity-modal [data-carousel-track] > [data-carousel-position="0"]::after {
  color:#fff !important;
  opacity:.8 !important;
  font-size:12px !important;
}

body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-quantity-modal-value],
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-carousel-position="0"] {
  border-radius:26px !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-arrow,
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-arrow:hover,
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-arrow:focus-visible {
  width:24px !important;
  color:#111722 !important;
  border:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
@media (max-width:460px) {
  body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-quantity-modal-value] {
    width:92px !important;
    height:122px !important;
    min-height:122px !important;
  }
  body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-carousel-position="0"] {
    width:138px !important;
    height:150px !important;
    min-height:150px !important;
  }
  body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-quantity-modal-value] strong {
    font-size:42px !important;
  }
  body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-carousel-position="0"] strong {
    font-size:54px !important;
  }
}

/* Final quantity carousel layer fix: center is always visually above side panels. */
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel {
  grid-template-columns:34px minmax(0,1fr) 34px !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track {
  isolation:isolate !important;
  transform-style:flat !important;
  touch-action:pan-y !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  --quantity-drag-x:0px;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track.is-dragging > [data-quantity-modal-value] {
  transition:transform .08s linear,opacity .12s ease,box-shadow .12s ease !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-quantity-modal-value] {
  pointer-events:auto !important;
  border-radius:24px !important;
  will-change:transform,opacity !important;
  backface-visibility:hidden !important;
  transition:transform .48s cubic-bezier(.16,1,.3,1),opacity .28s ease,box-shadow .28s ease,filter .28s ease !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-carousel-position="-2"] {
  z-index:1 !important;
  opacity:.26 !important;
  transform:translate(calc(-210% + var(--quantity-drag-x,0px)),-50%) rotateY(-34deg) scale(.72) !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-carousel-position="-1"] {
  z-index:3 !important;
  opacity:.52 !important;
  transform:translate(calc(-144% + var(--quantity-drag-x,0px)),-50%) rotateY(-26deg) scale(.84) !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-carousel-position="0"] {
  z-index:50 !important;
  opacity:1 !important;
  border-radius:24px !important;
  transform:translate(calc(-50% + var(--quantity-drag-x,0px)),-50%) scale(1) !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-quantity-modal-value] strong {
  font-size:34px !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="0"] strong {
  font-size:46px !important;
}
body.landing-page .quantity-modal[data-time-modal] [data-time-carousel][hidden] {
  display:none !important;
  min-height:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}
body.landing-page .quantity-modal[data-time-modal] [data-time-carousel][hidden] [data-carousel-track] {
  height:0 !important;
}
body.landing-page .quantity-modal[data-time-modal]:has(.time-carousel-empty:not([hidden])) .quantity-modal-dialog {
  padding-bottom:34px !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="-2"] {
  opacity:.06 !important;
  filter:blur(.7px) saturate(.72) !important;
  box-shadow:none !important;
  transform:translate(calc(-216% + var(--quantity-drag-x,0px)),-50%) rotateY(-36deg) scale(.68) !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="-1"] {
  opacity:.38 !important;
  box-shadow:0 10px 18px rgb(25 36 52 / 8%) !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-carousel-position="1"] {
  z-index:3 !important;
  opacity:.52 !important;
  transform:translate(calc(44% + var(--quantity-drag-x,0px)),-50%) rotateY(26deg) scale(.84) !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-track > [data-carousel-position="2"] {
  z-index:1 !important;
  opacity:.26 !important;
  transform:translate(calc(110% + var(--quantity-drag-x,0px)),-50%) rotateY(34deg) scale(.72) !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="1"] {
  opacity:.38 !important;
  box-shadow:0 10px 18px rgb(25 36 52 / 8%) !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="2"] {
  opacity:.06 !important;
  filter:blur(.7px) saturate(.72) !important;
  box-shadow:none !important;
  transform:translate(calc(116% + var(--quantity-drag-x,0px)),-50%) rotateY(36deg) scale(.68) !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-arrow {
  z-index:60 !important;
  display:grid !important;
  place-items:center !important;
  align-self:center !important;
  width:28px !important;
  height:42px !important;
  color:#111722 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-arrow:hover,
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-arrow:focus-visible {
  color:#111722 !important;
  background:transparent !important;
  background-image:none !important;
  outline:none !important;
  transform:scale(1.06) !important;
}
body.landing-page .quantity-modal:is([data-quantity-modal],[data-time-modal]) .quantity-carousel-arrow i {
  color:#111722 !important;
}
body.landing-page .quantity-modal[data-time-modal] [data-carousel-item][hidden] {
  display:none !important;
}

body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions .membership-wizard-back,
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions .membership-wizard-back:hover,
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions .membership-wizard-back:focus-visible {
  color:#fff !important;
  border-color:#05080d !important;
  background:#05080d !important;
  background-image:none !important;
  box-shadow:0 10px 18px rgb(8 12 19 / 24%) !important;
}
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions .email-submit:not(.membership-wizard-back),
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions .email-submit:not(.membership-wizard-back):hover,
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions .email-submit:not(.membership-wizard-back):focus-visible {
  color:#fff !important;
  border-color:#ef3440 !important;
  background:linear-gradient(100deg,#d70d1a,#ef3440) !important;
  background-image:linear-gradient(100deg,#d70d1a,#ef3440) !important;
  box-shadow:0 8px 15px rgb(210 20 31 / 27%) !important;
}

body.landing-page .flatpickr-calendar.booking-date-modal.open {
  z-index:1205 !important;
}
body.landing-page.is-date-picker-modal-open .booking-date-modal-backdrop {
  z-index:1200 !important;
}

body.landing-page .quantity-modal[data-time-modal] .msc-value-carousel {
  min-height:202px !important;
  margin-top:8px !important;
  margin-bottom:-10px !important;
  overflow:visible !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
body.landing-page .quantity-modal[data-time-modal] .msc-value-carousel-track {
  height:192px !important;
}

body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-quantity-modal-value],
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-item] {
  width:118px !important;
  height:116px !important;
  min-height:116px !important;
  padding-inline:10px !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="0"] {
  width:232px !important;
  height:178px !important;
  min-height:178px !important;
  border-radius:26px !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="0"] strong {
  max-width:100% !important;
  color:#fff !important;
  font-size:31px !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  white-space:nowrap !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="0"]::after {
  margin-top:3px !important;
  font-size:12px !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="-1"],
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="1"] {
  width:150px !important;
  opacity:.68 !important;
  transform-origin:center center !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="-1"] strong,
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="1"] strong {
  font-size:19px !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="-1"] {
  transform:translate(calc(-156% + var(--quantity-drag-x,0px)),-50%) perspective(700px) rotateY(-18deg) scale(.88) !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%) !important;
  mask-image:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%) !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="1"] {
  transform:translate(calc(56% + var(--quantity-drag-x,0px)),-50%) perspective(700px) rotateY(18deg) scale(.88) !important;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 100%) !important;
  mask-image:linear-gradient(90deg,#000 0%,#000 70%,transparent 100%) !important;
}
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="-2"],
body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="2"] {
  opacity:0 !important;
  pointer-events:none !important;
}

@media (max-width:520px) {
  body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="0"] {
    width:206px !important;
    height:166px !important;
    min-height:166px !important;
  }
  body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="0"] strong {
    font-size:27px !important;
  }
  body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="-1"],
  body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="1"] {
    width:112px !important;
  }
  body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="-1"] strong,
  body.landing-page .quantity-modal[data-time-modal] .quantity-carousel-track > [data-carousel-position="1"] strong {
    font-size:18px !important;
  }
}
@keyframes time-loading-spin {
  to { transform:rotate(360deg); }
}
@keyframes time-loading-pulse {
  50% { transform:scale(.94); box-shadow:0 10px 22px rgb(17 23 34 / 20%); }
}

/* Final stage-flow disabled state: future steps stay visible but clearly locked. */
body.landing-page .stage-flow button:disabled:not([aria-current="step"]) {
  color:rgb(255 255 255 / 34%) !important;
  opacity:.62 !important;
  cursor:not-allowed !important;
  transform:none !important;
}
body.landing-page .stage-flow button:disabled:not([aria-current="step"]) .flow-icon {
  color:rgb(255 255 255 / 42%) !important;
  border-color:rgb(255 255 255 / 26%) !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.landing-page .stage-flow button:disabled:not([aria-current="step"]) .flow-icon::after {
  display:none !important;
}

/* Membership substeps after terms are compact, so keep the card centered even
   when the previous long terms screen had enabled overflow mode. */
body.landing-page.is-membership-stage .welcome-content:has(.membership-terms[hidden]) {
  min-height:100svh !important;
  align-content:center !important;
  place-items:center !important;
  padding:70px 24px 90px !important;
}
body.landing-page.has-stage-overflow.is-membership-stage .welcome-content:has(.membership-terms[hidden]),
body.landing-page.is-stage-scroll-measuring.is-membership-stage .welcome-content:has(.membership-terms[hidden]) {
  min-height:100svh !important;
  align-content:center !important;
  padding:70px 24px 90px !important;
}

/* Fixed-day options should match the package option icon treatment. */
body.landing-page .membership-day-option .membership-category-icon {
  color:#fff !important;
  border:5px solid #5d6f84 !important;
  background:#111722 !important;
  box-shadow:0 0 0 1px rgb(255 255 255 / 10%) inset,0 4px 9px rgb(8 12 19 / 18%) !important;
}
body.landing-page .membership-day-option.is-selected .membership-category-icon {
  border-color:#5d6f84 !important;
  background:#df202a !important;
}
body.landing-page .membership-day-option .membership-session-dates {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
}
body.landing-page .membership-day-option.is-selected strong {
  display:inline;
}
body.landing-page .membership-day-option.is-selected .membership-day-time {
  display:inline !important;
  margin-left:2px;
  color:#fff !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
}
body.landing-page .membership-day-option .membership-session-dates[hidden] {
  display:none !important;
}
body.landing-page .membership-day-option .membership-session-dates b {
  display:inline-flex;
  padding:4px 7px;
  color:#fff;
  border:1px solid rgb(255 255 255 / 18%);
  border-radius:999px;
  background:rgb(255 255 255 / 10%);
  font-size:10px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions [data-membership-date-next]:not(:disabled),
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions [data-membership-date-next]:not(:disabled):hover,
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions [data-membership-date-next]:not(:disabled):focus-visible {
  color:#fff !important;
  border-color:#ef3440 !important;
  background:linear-gradient(100deg,#d70d1a,#ef3440) !important;
  background-image:linear-gradient(100deg,#d70d1a,#ef3440) !important;
  box-shadow:0 8px 15px rgb(210 20 31 / 27%) !important;
}
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions [data-membership-date-next]:disabled {
  color:#fff !important;
  border-color:#ef3440 !important;
  background:linear-gradient(100deg,#d70d1a,#ef3440) !important;
  background-image:linear-gradient(100deg,#d70d1a,#ef3440) !important;
  box-shadow:0 8px 15px rgb(210 20 31 / 27%) !important;
  cursor:not-allowed;
  opacity:.52;
  filter:grayscale(.15);
}
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions [data-membership-date-next]::before,
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions [data-membership-date-next]::after {
  display:none !important;
  content:none !important;
}

body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions [data-membership-date-next],
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions [data-membership-date-next]:hover,
body.landing-page .quantity-modal[data-membership-time-modal] .membership-wizard-actions [data-membership-date-next]:focus-visible,
body.landing-page [data-membership-day-continue],
body.landing-page [data-membership-day-continue]:hover,
body.landing-page [data-membership-day-continue]:focus-visible {
  color:#fff !important;
  border-color:rgb(255 151 160 / 50%) !important;
  background:linear-gradient(105deg,#ff3040 0%,#e01627 52%,#b70a19 100%) !important;
  background-image:linear-gradient(105deg,#ff3040 0%,#e01627 52%,#b70a19 100%) !important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 30%),inset 0 -2px 0 rgb(116 0 12 / 34%),0 10px 20px rgb(185 11 29 / 30%) !important;
}
body.landing-page .membership-day-option::before,
body.landing-page .membership-day-option::after,
body.landing-page [data-membership-day-option]::before,
body.landing-page [data-membership-day-option]::after,
body.landing-page .membership-day-option .membership-category-icon::before,
body.landing-page .membership-day-option .membership-category-icon::after,
body.landing-page [data-membership-day-option] > span::before,
body.landing-page [data-membership-day-option] > span::after {
  display:none !important;
  content:none !important;
  animation:none !important;
}
body.landing-page .membership-day-option,
body.landing-page .membership-day-option:hover,
body.landing-page .membership-day-option .membership-category-icon,
body.landing-page .membership-day-option:hover .membership-category-icon,
body.landing-page [data-membership-day-option],
body.landing-page [data-membership-day-option]:hover,
body.landing-page [data-membership-day-option] > span,
body.landing-page [data-membership-day-option]:hover > span {
  animation:none !important;
}

body.landing-page .quantity-modal[data-membership-time-modal] .membership-start-date-step .booking-field .date-input-wrap,
body.landing-page .quantity-modal[data-membership-time-modal] .membership-start-date-step .date-input-wrap {
  position:relative !important;
  display:block !important;
  width:100% !important;
  overflow:hidden !important;
  border-radius:999px !important;
}
body.landing-page .quantity-modal[data-membership-time-modal] .membership-start-date-step .booking-field .date-input-wrap .booking-date-input,
body.landing-page .quantity-modal[data-membership-time-modal] .membership-start-date-step .date-input-wrap .booking-date-input {
  box-sizing:border-box !important;
  width:100% !important;
  height:52px !important;
  padding:0 54px 0 17px !important;
  border:1px solid #f0a5ab !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:none !important;
}
body.landing-page .quantity-modal[data-membership-time-modal] .membership-start-date-step .booking-field .date-input-wrap .date-picker-button,
body.landing-page .quantity-modal[data-membership-time-modal] .membership-start-date-step .date-input-wrap .date-picker-button {
  position:absolute !important;
  top:50% !important;
  right:9px !important;
  width:32px !important;
  height:32px !important;
  transform:translateY(-50%) !important;
  border-radius:50% !important;
}

body.landing-page .quantity-modal[data-quantity-modal].is-loading .quantity-carousel,
body.landing-page .quantity-modal[data-quantity-modal] .quantity-carousel[hidden] {
  display:none !important;
  min-height:0 !important;
  margin:0 !important;
}

body.landing-page .quantity-modal[data-quantity-modal] .quantity-modal-loading {
  display:grid !important;
  place-items:center !important;
  gap:8px !important;
  min-height:184px !important;
  margin-top:18px !important;
}

body.landing-page .quantity-modal[data-quantity-modal] .quantity-modal-loading[hidden] {
  display:none !important;
}

body.landing-page .quantity-modal[data-quantity-modal] .quantity-empty-copy {
  display:grid !important;
  place-items:center !important;
  align-content:center !important;
  gap:10px !important;
  min-height:230px !important;
  margin:18px 0 0 !important;
  padding:22px !important;
  text-align:center !important;
}

body.landing-page .quantity-modal[data-quantity-modal] .quantity-empty-copy[hidden] {
  display:none !important;
}

body.landing-page .quantity-modal[data-quantity-modal] .quantity-empty-copy i {
  display:grid !important;
  place-items:center !important;
  width:58px !important;
  height:58px !important;
  margin:0 !important;
  color:#fff !important;
  border-radius:18px !important;
  background:#111722 !important;
  box-shadow:0 15px 28px rgb(17 23 34 / 18%) !important;
  font-size:24px !important;
}

body.landing-page .quantity-modal[data-quantity-modal] .quantity-empty-copy strong,
body.landing-page .quantity-modal[data-quantity-modal] .quantity-empty-copy small {
  display:block !important;
  width:min(100%,320px) !important;
  margin:0 auto !important;
  color:#172033 !important;
  line-height:1.45 !important;
}

body.landing-page .quantity-modal[data-quantity-modal] .quantity-empty-copy strong {
  font-size:17px !important;
  font-weight:900 !important;
}

body.landing-page .quantity-modal[data-quantity-modal] .quantity-empty-copy small {
  color:#6f7886 !important;
  font-size:13px !important;
  font-weight:700 !important;
}

html body.landing-page .quantity-modal[data-quantity-modal].has-no-courts .quantity-carousel,
html body.landing-page .quantity-modal[data-quantity-modal].has-no-courts .msc-value-carousel,
html body.landing-page .quantity-modal[data-quantity-modal].has-no-courts .quantity-carousel-arrow,
html body.landing-page .quantity-modal[data-quantity-modal].has-no-courts [data-carousel-prev],
html body.landing-page .quantity-modal[data-quantity-modal].has-no-courts [data-carousel-next],
html body.landing-page .quantity-modal[data-quantity-modal].has-no-courts [data-carousel-track] {
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.landing-page .booking-schedule-modal-dialog .quantity-modal-trigger.is-disabled-step,
body.landing-page .booking-schedule-modal-dialog .quantity-modal-trigger:disabled {
  color:#98a1ad !important;
  border-color:#e4e7ec !important;
  background:#f7f8fa !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  opacity:.72 !important;
}

body.landing-page .booking-schedule-modal-dialog .quantity-modal-trigger.is-disabled-step i,
body.landing-page .booking-schedule-modal-dialog .quantity-modal-trigger:disabled i {
  color:#98a1ad !important;
}

/* Final membership fixed-day layout: keep generated session dates inside the option. */
body.landing-page .membership-day [data-membership-day-option] {
  display:grid !important;
  grid-template-columns:46px minmax(0,1fr) 28px !important;
  grid-auto-rows:auto !important;
  align-items:center !important;
  gap:3px 13px !important;
  min-height:72px !important;
  padding:12px 16px !important;
  overflow:hidden !important;
  border-radius:999px !important;
}
body.landing-page .membership-day .membership-day-option > .membership-category-icon,
body.landing-page .membership-day .service-option[data-membership-day-option] > span:first-child {
  grid-column:1 !important;
  grid-row:1 / span 3 !important;
}
body.landing-page .membership-day .membership-day-option > span:not(.membership-category-icon) {
  grid-column:2 !important;
  display:grid !important;
  gap:2px !important;
  min-width:0 !important;
}
body.landing-page .membership-day .service-option[data-membership-day-option] > strong,
body.landing-page .membership-day .service-option[data-membership-day-option] > small,
body.landing-page .membership-day .service-option[data-membership-day-option] > .membership-day-time,
body.landing-page .membership-day .service-option[data-membership-day-option] > .membership-session-dates {
  grid-column:2 !important;
  min-width:0 !important;
}
body.landing-page .membership-day [data-membership-day-option] :is(.membership-category-check,.service-option-check) {
  grid-column:3 !important;
  grid-row:1 / span 3 !important;
  align-self:center !important;
  justify-self:center !important;
  margin:0 !important;
}
body.landing-page .membership-day [data-membership-day-option] strong {
  display:block !important;
  font-size:14px !important;
  line-height:1.15 !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-time {
  display:block !important;
  margin:0 !important;
  color:inherit !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  opacity:.82 !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-time[hidden],
body.landing-page .membership-day [data-membership-day-option] .membership-session-dates[hidden] {
  display:none !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-session-dates {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:3px 8px !important;
  margin:2px 0 0 !important;
  min-width:0 !important;
  color:inherit !important;
  font-size:12px !important;
  font-weight:900 !important;
  line-height:1.2 !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-session-dates b {
  display:inline-flex !important;
  padding:0 !important;
  color:inherit !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  font:inherit !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}

/* Hard override after normalizing membership-day content in JS. */
body.landing-page .membership-day [data-membership-day-option] {
  display:grid !important;
  grid-template-columns:46px minmax(0,1fr) 28px !important;
  align-items:center !important;
  min-height:72px !important;
  height:auto !important;
  padding:12px 16px !important;
  overflow:hidden !important;
}
body.landing-page .membership-day [data-membership-day-option] > .membership-category-icon,
body.landing-page .membership-day .service-option[data-membership-day-option] > span:first-child {
  grid-column:1 !important;
  grid-row:1 !important;
}
body.landing-page .membership-day [data-membership-day-option] > .membership-day-content {
  grid-column:2 !important;
  grid-row:1 !important;
  display:grid !important;
  gap:2px !important;
  min-width:0 !important;
  align-content:center !important;
}
body.landing-page .membership-day [data-membership-day-option] > :is(.membership-category-check,.service-option-check) {
  grid-column:3 !important;
  grid-row:1 !important;
  align-self:center !important;
  justify-self:center !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-content strong {
  display:block !important;
  margin:0 !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-content > small:not(.membership-day-time) {
  display:none !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-time {
  display:block !important;
  margin:0 !important;
  font-size:11px !important;
  line-height:1.2 !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-session-dates {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:3px 8px !important;
  margin:1px 0 0 !important;
  max-width:100% !important;
  font-size:12px !important;
  line-height:1.18 !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-session-dates b {
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  white-space:nowrap !important;
}
body.landing-page .membership-day [data-membership-day-option][hidden] {
  display:none !important;
}

/* Final selected-day content layout: day + time inline, dates as compact tags. */
body.landing-page .membership-day [data-membership-day-option] > .membership-day-content {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:3px 9px !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-content strong {
  flex:0 0 auto !important;
  display:inline-flex !important;
  margin:0 !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1.1 !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-heading {
  flex:1 0 100% !important;
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  min-width:0 !important;
  white-space:nowrap !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-time {
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
  color:rgb(255 255 255 / 86%) !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1.1 !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-time::before {
  content:"\00b7";
  margin-right:7px;
  color:rgb(255 255 255 / 70%);
}
body.landing-page .membership-day [data-membership-day-option] .membership-session-dates {
  flex:1 0 100% !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:4px !important;
  margin:2px 0 0 !important;
  min-width:0 !important;
  overflow:hidden !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-session-dates b {
  display:inline-flex !important;
  align-items:center !important;
  min-height:18px !important;
  padding:2px 7px !important;
  color:rgb(255 255 255 / 88%) !important;
  border:1px solid rgb(255 255 255 / 18%) !important;
  border-radius:999px !important;
  background:rgb(255 255 255 / 10%) !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1 !important;
}
body.landing-page .membership-day .service-option[data-membership-day-option] > .membership-day-content {
  grid-column:2 !important;
  grid-row:1 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  place-items:normal !important;
  gap:3px 9px !important;
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  color:inherit !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:inherit !important;
}
body.landing-page .membership-day .service-option[data-membership-day-option] > span:first-child:not(.membership-day-content) {
  grid-column:1 !important;
  display:grid !important;
  place-items:center !important;
  width:46px !important;
  height:46px !important;
  border-radius:50% !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-heading {
  flex:1 0 100% !important;
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  min-width:0 !important;
  white-space:nowrap !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-heading strong,
body.landing-page .membership-day [data-membership-day-option] .membership-day-heading .membership-day-time {
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-heading .membership-day-time {
  margin-left:6px !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-heading .membership-day-time::before {
  content:"\00b7" !important;
  margin-right:6px !important;
  color:rgb(255 255 255 / 70%) !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-heading .membership-day-time[hidden] {
  display:none !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-day-heading .membership-day-time[hidden]::before {
  content:none !important;
}

@media (prefers-reduced-motion: no-preference) {
  body.landing-page .membership-day [data-membership-day-option]:not(.is-selected) > .membership-category-icon,
  body.landing-page .membership-day .service-option[data-membership-day-option]:not(.is-selected) > span:first-child:not(.membership-day-content) {
    animation:option-idle-breathe 4.8s ease-in-out infinite !important;
  }
  body.landing-page .membership-day [data-membership-day-option]:hover > .membership-category-icon,
  body.landing-page .membership-day .service-option[data-membership-day-option]:hover > span:first-child:not(.membership-day-content) {
    animation:option-icon-pulse .42s cubic-bezier(.2,1.2,.3,1) both !important;
  }
  body.landing-page .membership-day [data-membership-day-option].is-selected :is(.membership-category-check,.service-option-check) {
    animation:option-check-pop .42s cubic-bezier(.2,1.25,.3,1) both !important;
  }
}

body.landing-page .membership-day [data-membership-day-option] .membership-session-dates {
  flex-wrap:nowrap !important;
  gap:4px !important;
  overflow:hidden !important;
}
body.landing-page .membership-day [data-membership-day-option] .membership-session-dates b {
  padding-inline:6px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}
@media (max-width:520px) {
  body.landing-page .membership-day [data-membership-day-option] .membership-session-dates {
    flex-wrap:wrap !important;
  }
}

.booking-terms-link {
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  padding:8px 11px;
  color:#c91524;
  border:1px solid rgb(201 21 36 / 18%);
  border-radius:999px;
  background:#fff6f7;
  box-shadow:0 8px 16px rgb(120 13 25 / 8%);
  cursor:pointer;
  font:900 12px/1.2 "Nunito Sans",sans-serif;
}
.booking-terms-link:hover {
  color:#fff;
  border-color:#c91524;
  background:#c91524;
}
body.landing-page .booking-schedule-modal[hidden],
body.landing-page .booking-schedule-modal:not(.is-open) {
  display:none !important;
}
body.landing-page .booking-card [data-booking-fields] > .booking-date-fields,
body.landing-page .booking-card [data-booking-fields] > .booking-time-fields {
  display:none !important;
}
.booking-item-list {
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid rgb(240 165 171 / 55%);
  border-radius:18px;
  background:rgb(255 248 249 / 86%);
}
.booking-item-list[hidden] {
  display:none;
}
.booking-item-list > header,
.booking-item-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.booking-item-list > header {
  color:#1b2432;
  font-size:13px;
  font-weight:900;
}
.booking-item-total {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:2px;
  padding:11px 12px 2px;
  color:#1b2432;
  border-top:1px dashed rgb(201 21 36 / 18%);
}
.booking-item-total strong {
  font-size:13px;
  font-weight:900;
}
.booking-item-total span {
  color:#111722;
  font-size:18px;
  font-weight:950;
  line-height:1;
}
.booking-item-list > header span {
  color:#7a8493;
  font-size:11px;
}
.booking-item-row {
  padding:10px 11px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 16px rgb(103 22 33 / 8%);
}
.booking-item-row div {
  display:grid;
  gap:3px;
  min-width:0;
}
.booking-item-row strong {
  color:#172033;
  font-size:12px;
  line-height:1.25;
}
.booking-item-row span {
  color:#758090;
  font-size:11px;
  font-weight:800;
}
.booking-item-row button {
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  color:#fff;
  border:1px solid #05080d;
  border-radius:50%;
  background:#05080d;
  background-image:none;
  box-shadow:0 8px 14px rgb(5 8 13 / 22%);
  cursor:pointer;
  font-size:13px;
}
.booking-item-row button:hover {
  background:#111722;
  background-image:none;
}
.booking-item-actions {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.booking-item-actions:has(.msc-booking-cancel) {
  grid-template-columns:minmax(0,.58fr) minmax(0,1fr);
  gap:12px;
}
.booking-card .msc-booking-cancel {
  width:100%;
  color:#fff !important;
  border-color:#05080d !important;
  background:#05080d !important;
  background-image:none !important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 12%),0 12px 24px rgb(5 8 13 / 24%) !important;
}
.booking-card .msc-booking-cancel:hover {
  color:#fff !important;
  background:#111722 !important;
  background-image:none !important;
  transform:translateY(-2px);
}
.booking-card .msc-booking-add-trigger {
  width:100%;
  color:#05080d !important;
  border:3px solid #05080d !important;
  background:#fff !important;
  background-image:linear-gradient(180deg, #fff 0%, #f8fafc 52%, #eef2f7 100%) !important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -8px 18px rgb(5 8 13 / 9%),0 12px 24px rgb(5 8 13 / 15%) !important;
}
.booking-card .msc-booking-add-trigger:hover {
  color:#05080d !important;
  border-color:#05080d !important;
  background:#fff !important;
  background-image:linear-gradient(180deg, #fff 0%, #f5f7fb 48%, #e7ecf3 100%) !important;
  transform:translateY(-2px);
}
.booking-schedule-actions {
  display:grid;
  grid-template-columns:minmax(0,.58fr) minmax(0,1fr);
  gap:12px;
}
.booking-card .booking-schedule-cancel {
  width:100%;
  color:#fff !important;
  border-color:#05080d !important;
  background:#05080d !important;
  background-image:none !important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 12%),0 12px 24px rgb(5 8 13 / 24%) !important;
}
.booking-card .booking-schedule-trigger {
  width:100%;
  color:#fff !important;
  border-color:#05080d !important;
  background:#05080d !important;
  background-image:none !important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 12%),0 12px 24px rgb(5 8 13 / 24%) !important;
}
.booking-card .booking-schedule-trigger:hover,
.booking-card .booking-schedule-cancel:hover {
  background:#111722 !important;
  background-image:none !important;
  transform:translateY(-2px);
}
body.landing-page .booking-card .booking-schedule-trigger.msc-booking-add-trigger {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#05080d !important;
  border:3px solid #05080d !important;
  background-color:#fff !important;
  background-image:linear-gradient(180deg, #fff 0%, #f8fafc 52%, #eef2f7 100%) !important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -8px 18px rgb(5 8 13 / 9%),0 12px 24px rgb(5 8 13 / 15%) !important;
}
body.landing-page .booking-card .booking-schedule-trigger.msc-booking-add-trigger::before {
  position:absolute;
  display:block !important;
  top:-38%;
  bottom:-38%;
  left:-18%;
  width:58%;
  z-index:0;
  content:"";
  background:linear-gradient(112deg, transparent 0%, rgb(140 152 170 / 0%) 18%, rgb(150 163 184 / 34%) 38%, rgb(255 255 255 / 92%) 49%, rgb(130 144 165 / 30%) 60%, transparent 82%);
  transform:skewX(-23deg);
  opacity:1;
  animation:none !important;
  pointer-events:none;
}
body.landing-page .booking-card .booking-schedule-trigger.msc-booking-add-trigger::after {
  position:absolute;
  display:block !important;
  top:9px;
  right:24px;
  left:24px;
  z-index:0;
  height:10px;
  content:"";
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgb(255 255 255 / 92%) 28%, rgb(210 218 230 / 55%) 50%, rgb(255 255 255 / 72%) 72%, transparent);
  opacity:.75;
  animation:none !important;
  pointer-events:none;
}
body.landing-page .booking-card .booking-schedule-trigger.msc-booking-add-trigger:hover {
  color:#05080d !important;
  border-color:#05080d !important;
  background-color:#fff !important;
  background-image:linear-gradient(180deg, #fff 0%, #f5f7fb 48%, #e7ecf3 100%) !important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -8px 18px rgb(5 8 13 / 10%),0 15px 27px rgb(5 8 13 / 18%) !important;
  transform:translateY(-2px);
}
body.landing-page .booking-card .booking-schedule-trigger.msc-booking-add-trigger:hover::before {
  transform:translateX(36px) skewX(-23deg);
  opacity:1;
}
body.landing-page .welcome-screen .welcome-content .welcome-copy .booking-card .email-submit.msc-booking-cancel,
body.landing-page .welcome-screen .welcome-content .welcome-copy .booking-card .email-submit.msc-booking-cancel:not(:disabled),
body.landing-page .welcome-screen .welcome-content .welcome-copy .booking-card .email-submit.msc-booking-cancel:hover {
  color:#fff !important;
  border:3px solid #05080d !important;
  background:#05080d !important;
  background-image:none !important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 12%),0 12px 24px rgb(5 8 13 / 24%) !important;
}
@media (max-width:520px) {
  .booking-schedule-actions { grid-template-columns:1fr; }
}
.booking-item-actions .booking-items-continue:disabled {
  cursor:not-allowed;
  opacity:.5;
  filter:grayscale(.3);
}
@media (max-width:520px) {
  .booking-item-actions {
    grid-template-columns:1fr;
  }
  .booking-item-actions:has(.msc-booking-cancel) {
    grid-template-columns:1fr;
  }
}
.booking-terms-modal {
  position:fixed;
  z-index:80;
  inset:0;
  display:grid;
  place-items:center;
  padding:22px;
}
.booking-terms-modal[hidden] {
  display:none;
}
.booking-terms-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgb(10 14 22 / 62%);
  opacity:0;
  transition:opacity .2s ease;
  backdrop-filter:blur(5px);
}
.booking-terms-modal-dialog {
  position:relative;
  z-index:1;
  display:grid;
  width:min(100%,580px);
  max-height:min(82svh,680px);
  gap:16px;
  padding:34px;
  overflow:hidden;
  border:1px solid rgb(255 255 255 / 88%);
  border-radius:24px;
  background:linear-gradient(145deg,rgb(255 255 255 / 98%),rgb(255 246 247 / 96%));
  box-shadow:0 24px 52px rgb(32 10 18 / 30%);
  opacity:0;
  transform:translateY(14px) scale(.97);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.9,.25,1.08);
}
.booking-terms-modal.is-open .booking-terms-modal-backdrop {
  opacity:1;
}
.booking-terms-modal.is-open .booking-terms-modal-dialog {
  opacity:1;
  transform:translateY(0) scale(1);
}
.booking-terms-modal-dialog .email-card-title {
  padding-right:44px;
  color:#171a22;
  font-size:24px;
}
.booking-terms-modal-dialog .booking-terms-title-accent {
  color:#d71929;
}
.booking-terms-modal-dialog .booking-terms-list {
  max-height:min(48svh,390px);
}
.booking-terms-modal-close {
  position:absolute;
  top:18px;
  right:18px;
}
.booking-terms-modal-ok {
  min-height:50px;
}
body.landing-page .booking-terms-modal-ok,
body.landing-page .booking-terms-modal-ok:hover {
  color:#fff !important;
  border-color:#05080d !important;
  background:#05080d !important;
  background-image:none !important;
  box-shadow:0 12px 22px rgb(5 8 13 / 24%) !important;
}

@media (max-width:700px) {
  .booking-terms-modal {
    padding:16px;
  }
  .booking-terms-modal-dialog {
    padding:26px 22px;
    border-radius:22px;
  }
  .booking-terms-modal-dialog .email-card-title {
    font-size:21px;
  }
}

@keyframes email-status-pop {
  from {
    opacity:0;
    transform:translateY(-6px) scale(.98);
  }
  70% {
    opacity:1;
    transform:translateY(1px) scale(1.01);
  }
  to {
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

body.landing-page .booking-item-list .booking-item-row .booking-item-remove-button,
body.landing-page .booking-item-list .booking-item-row .booking-item-remove-button:hover,
body.landing-page .booking-item-list .booking-item-row [data-booking-item-remove],
body.landing-page .booking-item-list .booking-item-row [data-booking-item-remove]:hover {
  color:#fff !important;
  border-color:#05080d !important;
  background:#05080d !important;
  background-image:none !important;
  box-shadow:0 8px 14px rgb(5 8 13 / 22%) !important;
}

/* Email gate: wider responsive card. */
body.landing-page.is-email-stage .welcome-copy {
  width:min(calc(100vw - 48px),clamp(560px,48vw,720px)) !important;
}
body.landing-page.is-services-stage .welcome-copy {
  width:min(calc(100vw - 48px),clamp(560px,48vw,720px)) !important;
}
body.landing-page.is-booking-stage .welcome-copy {
  width:min(calc(100vw - 48px),clamp(560px,48vw,720px)) !important;
}
body.landing-page.is-email-stage .email-card {
  width:100% !important;
  max-width:clamp(560px,48vw,720px) !important;
  gap:clamp(16px,2.1vh,22px) !important;
  padding:clamp(34px,4.4vw,58px) !important;
  border-radius:clamp(24px,2.2vw,32px) !important;
}
body.landing-page.is-email-stage .email-card-title {
  font-size:clamp(26px,2.35vw,34px) !important;
}
body.landing-page.is-services-stage .choice-card {
  width:100% !important;
  max-width:clamp(560px,48vw,720px) !important;
}
body.landing-page.is-booking-stage .booking-card {
  width:100% !important;
  max-width:clamp(560px,48vw,720px) !important;
}
body.landing-page.is-email-stage .email-input-wrap {
  height:clamp(56px,6.4vh,66px) !important;
  overflow:hidden;
}
body.landing-page .email-input-wrap > i {
  flex:0 0 auto;
  width:20px;
  margin-left:19px;
  color:#d8222c;
  text-align:center;
}
body.landing-page.is-email-stage .email-input-wrap > i {
  width:22px;
  font-size:18px;
}
body.landing-page.is-email-stage .email-input-wrap input {
  border-radius:inherit !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:clamp(14px,1.1vw,16px) !important;
}
body.landing-page.is-email-stage .email-input-wrap:has(.email-clear) {
  overflow:visible;
}
body.landing-page.is-email-stage .email-input-wrap input:-webkit-autofill,
body.landing-page.is-email-stage .email-input-wrap input:-webkit-autofill:hover,
body.landing-page.is-email-stage .email-input-wrap input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
  border-radius:inherit !important;
}

@media (max-width:700px) and (orientation:portrait) {
  body.landing-page.is-email-stage .welcome-copy {
    width:100% !important;
  }
  body.landing-page.is-services-stage .welcome-copy {
    width:100% !important;
  }
  body.landing-page.is-booking-stage .welcome-copy {
    width:100% !important;
  }
  body.landing-page.is-email-stage .email-card {
    width:calc(100vw - 40px) !important;
    max-width:460px !important;
    gap:15px !important;
    padding:30px 22px 26px !important;
  }
  body.landing-page.is-email-stage .email-card-title {
    font-size:clamp(22px,6.4vw,27px) !important;
  }
  body.landing-page.is-email-stage .email-input-wrap {
    height:54px !important;
  }
  body.landing-page.is-email-stage .email-input-wrap > i {
    margin-left:16px;
    font-size:16px;
  }
  body.landing-page.is-services-stage .choice-card {
    width:calc(100vw - 40px) !important;
    max-width:460px !important;
  }
  body.landing-page.is-booking-stage .booking-card {
    width:calc(100vw - 40px) !important;
    max-width:460px !important;
  }
}

@media (max-height:680px) and (orientation:landscape) {
  body.landing-page.is-email-stage .welcome-content {
    padding-top:82px !important;
    padding-bottom:22px !important;
  }
  body.landing-page.is-email-stage .email-card {
    max-width:min(620px,72vw) !important;
    gap:13px !important;
    padding:28px 38px !important;
  }
  body.landing-page.is-email-stage .email-card-title {
    font-size:24px !important;
  }
  body.landing-page.is-email-stage .email-input-wrap {
    height:50px !important;
  }
}

/* Opening portrait balance: lower the intro a touch and keep the shuttlecock calmer. */
@media (max-width:700px) and (orientation:portrait) {
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-content {
    padding:clamp(138px,18vh,158px) 32px 112px !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-visual {
    min-height:clamp(210px,35vh,300px) !important;
    margin:8px -32px 0 !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-visual img {
    right:-16vw !important;
    bottom:clamp(20px,4vh,42px) !important;
    width:clamp(280px,80vw,360px) !important;
  }
}

@media (min-width:701px) and (max-width:1024px) and (orientation:portrait) {
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-content {
    padding-top:clamp(168px,20vh,210px) !important;
    padding-bottom:108px !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-copy {
    translate:clamp(-46px,-5vw,-24px) 0 !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-visual {
    min-height:clamp(280px,38vh,390px) !important;
    margin:10px -76px 0 !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-visual img {
    right:-6vw !important;
    bottom:clamp(56px,8vh,90px) !important;
    width:clamp(410px,64vw,520px) !important;
  }
}

/* Stage nav: make the active step distinct from completed/clickable white icons. */
body.landing-page .stage-flow button.is-accessible:not([aria-current="step"]) .flow-icon,
body.landing-page .stage-flow button.is-complete:not([aria-current="step"]) .flow-icon {
  color:#1f2937 !important;
  background:rgb(235 239 244 / 92%) !important;
  border-color:rgb(255 255 255 / 58%) !important;
  box-shadow:0 0 0 3px rgb(255 255 255 / 7%),0 5px 12px rgb(0 0 0 / 18%),inset 0 1px 0 rgb(255 255 255 / 48%) !important;
}
body.landing-page .stage-flow button:disabled,
body.landing-page .stage-flow button:disabled:is(.is-accessible,.is-complete) {
  color:rgb(255 255 255 / 30%) !important;
  opacity:.58 !important;
  cursor:not-allowed !important;
}
body.landing-page .stage-flow button:disabled .flow-icon,
body.landing-page .stage-flow button:disabled:is(.is-accessible,.is-complete) .flow-icon {
  color:rgb(255 255 255 / 34%) !important;
  background:rgb(255 255 255 / 5%) !important;
  border-color:rgb(255 255 255 / 18%) !important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 8%) !important;
}
body.landing-page .stage-flow button[aria-current="step"] {
  color:#fff !important;
  background:linear-gradient(145deg,rgb(255 255 255 / 17%),rgb(255 255 255 / 5%)) !important;
  border-color:rgb(255 255 255 / 42%) !important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 28%),0 8px 18px rgb(0 0 0 / 28%),0 0 18px rgb(255 255 255 / 14%) !important;
}
body.landing-page .stage-flow button[aria-current="step"] .flow-icon {
  color:#141b26 !important;
  background:#fff !important;
  border-color:#fff !important;
  box-shadow:0 0 0 4px rgb(255 255 255 / 18%),0 0 18px rgb(255 255 255 / 42%),inset 0 1px 0 rgb(255 255 255 / 80%),0 8px 16px rgb(0 0 0 / 30%) !important;
}
body.landing-page .stage-flow button[aria-current="step"]::after {
  opacity:.85 !important;
  background:#fff !important;
  box-shadow:0 0 14px 3px rgb(255 255 255 / 34%) !important;
}
body.landing-page .stage-flow :is([data-stage="services"], [data-stage="booking"]) .flow-icon {
  position:relative !important;
}
body.landing-page .stage-flow :is([data-stage="services"], [data-stage="booking"]) .flow-icon i {
  display:none !important;
}
body.landing-page .stage-flow :is([data-stage="services"], [data-stage="booking"]) .flow-icon::before {
  content:"" !important;
  display:grid !important;
  box-sizing:border-box !important;
  width:16px !important;
  height:16px !important;
  border:2px solid currentColor !important;
  border-top-width:5px !important;
  border-radius:3px !important;
  background:
    radial-gradient(circle,currentColor 1.2px,transparent 1.4px) 3px 6px/5px 5px repeat !important;
}
body.landing-page .stage-flow :is([data-stage="services"], [data-stage="booking"]) .flow-icon::after {
  content:none !important;
}

body.landing-page .booking-item-row small {
  display:block;
  margin-top:3px;
  color:#7a8290;
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}
body.landing-page .booking-item-list .booking-item-remove-button::before,
body.landing-page .booking-item-list .booking-item-remove-button::after,
body.landing-page .booking-item-list [data-booking-item-remove]::before,
body.landing-page .booking-item-list [data-booking-item-remove]::after {
  display:none !important;
  content:none !important;
  animation:none !important;
}

.booking-schedule-modal {
  position:fixed;
  z-index:90;
  inset:0;
  display:grid;
  place-items:center;
  width:100vw;
  max-width:none !important;
  height:100dvh;
  padding:22px;
}
.booking-schedule-modal[hidden] {
  display:none;
}
.booking-schedule-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgb(10 14 22 / 58%);
  opacity:0;
  transition:opacity .22s ease;
  backdrop-filter:blur(5px);
}
.booking-schedule-modal-dialog {
  position:relative;
  z-index:1;
  display:grid;
  width:min(calc(100vw - 44px),620px);
  gap:12px;
  padding:34px;
  color:#1c2636;
  border:1px solid rgb(255 255 255 / 88%);
  border-radius:26px;
  background:linear-gradient(145deg,rgb(255 255 255 / 98%),rgb(255 246 247 / 96%));
  box-shadow:0 28px 58px rgb(32 10 18 / 32%);
  opacity:0;
  transform:translateY(14px) scale(.97);
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.9,.25,1.08);
}
.booking-schedule-modal.is-open .booking-schedule-modal-backdrop {
  opacity:1;
}
.booking-schedule-modal.is-open .booking-schedule-modal-dialog {
  opacity:1;
  transform:translateY(0) scale(1);
}
.booking-schedule-modal-dialog .email-card-title {
  padding-right:44px;
  color:#171a22;
  font-size:24px;
}
.booking-schedule-modal-dialog .booking-date-fields,
.booking-schedule-modal-dialog .booking-time-fields.row {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  width:100% !important;
  margin:0 !important;
}
.booking-schedule-modal-dialog .booking-time-fields.row > .booking-field {
  width:100% !important;
  flex:0 0 100% !important;
  padding:0 !important;
}
.booking-schedule-modal-dialog .quantity-modal-trigger,
.booking-schedule-modal-dialog .quantity-modal-trigger:hover {
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  height:52px !important;
  padding:0 52px 0 17px !important;
  color:#4c5666 !important;
  border:1px solid #f0a5ab !important;
  border-radius:999px !important;
  background:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
}
.booking-schedule-modal-dialog .quantity-modal-trigger > span {
  min-width:0;
  color:#4c5666 !important;
}
.booking-schedule-modal-dialog .quantity-modal-trigger.has-value,
.booking-schedule-modal-dialog .quantity-modal-trigger.has-value > span,
.booking-schedule-modal-dialog .date-input-wrap.has-value .booking-date-input,
.booking-schedule-modal-dialog .time-input-wrap.has-value input {
  color:#172033 !important;
  font-weight:900 !important;
}
.booking-schedule-modal-dialog .booking-date-input::placeholder,
.booking-schedule-modal-dialog .time-input-wrap:not(.has-value) input::placeholder,
.booking-schedule-modal-dialog .quantity-modal-trigger:not(.has-value) > span {
  color:#6f7886 !important;
  opacity:1 !important;
}
.booking-schedule-modal-dialog .quantity-modal-trigger i,
.booking-schedule-modal-dialog .date-picker-button i {
  display:grid !important;
  place-items:center !important;
  width:32px !important;
  height:32px !important;
  color:#fff !important;
  border-radius:50% !important;
  background:#111722 !important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 14%),0 4px 9px rgb(8 12 19 / 24%) !important;
  font-size:14px !important;
  line-height:1 !important;
}
.booking-schedule-modal-dialog .quantity-modal-trigger i {
  position:absolute !important;
  top:50% !important;
  right:9px !important;
  transform:translateY(-50%) !important;
}
.booking-schedule-modal-dialog .date-input-wrap,
.booking-schedule-modal-dialog .booking-date-input {
  border-radius:999px !important;
}
.booking-schedule-modal-dialog .date-input-wrap {
  position:relative !important;
  overflow:hidden !important;
}
.booking-schedule-modal-dialog .date-picker-button {
  position:absolute !important;
  top:50% !important;
  right:9px !important;
  display:grid !important;
  place-items:center !important;
  width:32px !important;
  height:32px !important;
  padding:0 !important;
  border-radius:50% !important;
  transform:translateY(-50%) !important;
}
.booking-schedule-modal-dialog .email-submit {
  margin-top:4px;
}
.booking-schedule-modal-close {
  position:absolute;
  top:18px;
  right:18px;
}

@media (max-width:640px) {
  .booking-schedule-modal {
    padding:16px;
  }
  .booking-schedule-modal-dialog {
    width:min(100%,460px);
    gap:12px;
    padding:28px 22px;
    border-radius:22px;
  }
  .booking-schedule-modal-dialog .email-card-title {
    font-size:21px;
  }
  .booking-schedule-modal-dialog .booking-date-fields,
  .booking-schedule-modal-dialog .booking-time-fields.row {
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
}

body.landing-page.is-confirm-stage .welcome-copy {
  width:min(100%, 820px) !important;
}
body.landing-page.is-confirm-stage .court-card {
  width:100% !important;
  max-width:clamp(700px, 60vw, 900px) !important;
  padding:clamp(34px, 4vw, 56px) !important;
}
body.landing-page.is-confirm-stage .booking-availability {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
  max-height:none !important;
  padding:0 !important;
  overflow:visible !important;
}
body.landing-page.is-confirm-stage .booking-order-summary.booking-order-summary--multi {
  position:relative;
  max-height:none !important;
  gap:14px !important;
  padding:16px !important;
  padding-right:16px !important;
  overflow:visible !important;
  border-color:rgb(238 150 158 / 50%) !important;
  border-radius:18px !important;
  background:rgb(255 255 255 / 92%) !important;
}
body.landing-page.is-confirm-stage .booking-order-summary.booking-order-summary--multi > header {
  position:static !important;
  min-height:auto !important;
  padding:0 0 2px !important;
  border-bottom:0 !important;
  background:transparent !important;
}
body.landing-page.is-confirm-stage .booking-order-summary.booking-order-summary--multi > header span {
  margin-top:0 !important;
}
body.landing-page.is-confirm-stage .booking-order-summary > header > div {
  display:grid;
  gap:3px;
}
body.landing-page.is-confirm-stage .booking-order-summary > header small {
  color:#748092;
  font-size:11px;
  font-weight:850;
  line-height:1.2;
  padding-left:29px;
}
.booking-confirm-list {
  display:grid;
  gap:10px;
}
.booking-confirm-item {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:16px;
  padding:13px 14px;
  border:1px solid rgb(232 237 242 / 92%);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 18px rgb(54 64 78 / 8%);
}
.booking-confirm-item div {
  display:grid;
  min-width:0;
  gap:4px;
}
.booking-confirm-item strong {
  color:#172033 !important;
  font-size:13px;
  font-weight:950;
  line-height:1.25;
}
.booking-confirm-item small {
  color:#728091;
  font-size:11px;
  font-weight:850;
  line-height:1.35;
}
.booking-confirm-item > span {
  color:#e1192a !important;
  font-size:16px;
  font-weight:950;
  white-space:nowrap;
}
.booking-benefit-summary {
  display:grid;
  gap:12px;
  padding:16px;
  color:#172033;
  border:1px solid rgb(238 150 158 / 50%);
  border-radius:18px;
  background:linear-gradient(145deg, #fff, #fff7f8);
  box-shadow:0 8px 18px rgb(54 64 78 / 8%);
}
.booking-benefit-summary header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.booking-benefit-summary header div {
  display:grid;
  gap:3px;
}
.booking-benefit-summary header strong {
  color:#172033;
  font-size:14px;
  font-weight:950;
}
.landing-page.is-confirm-stage .booking-benefit-summary header strong::before {
  content:"\f06b";
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  margin-right:7px;
  color:#c91524;
  border:1px solid #f1c4c9;
  border-radius:50%;
  background:#fff5f6;
  font-family:"Font Awesome 6 Free";
  font-size:9px;
  font-weight:900;
  vertical-align:middle;
}
.booking-benefit-summary header small,
.booking-benefit-summary article small {
  color:#748092;
  font-size:11px;
  font-weight:850;
  line-height:1.35;
}
.booking-benefit-summary header > span {
  flex:none;
  padding:7px 10px;
  color:#fff;
  border-radius:999px;
  background:#111722;
  font-size:11px;
  font-weight:950;
  white-space:nowrap;
}
.booking-benefit-summary > div {
  display:grid;
  gap:8px;
}
.booking-benefit-summary article {
  display:grid;
  grid-template-columns:34px minmax(0, 1fr);
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid #f0d7da;
  border-radius:13px;
  background:#fff;
}
.booking-benefit-summary article > span {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  color:#fff;
  border-radius:50%;
  background:#e1192a;
}
.booking-benefit-summary article div {
  display:grid;
  gap:3px;
}
.booking-benefit-summary article strong {
  color:#172033;
  font-size:13px;
  font-weight:950;
}
.booking-benefit-empty article,
.booking-benefit-empty {
  opacity:.8;
}
body.landing-page.is-confirm-stage .booking-terms-inline-link {
  appearance:none !important;
  position:relative;
  right:auto;
  bottom:auto;
  display:inline-block !important;
  align-self:start !important;
  justify-self:start;
  min-height:auto;
  width:auto;
  margin:0;
  padding:0;
  color:#05080d !important;
  border:0 !important;
  border-radius:0;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  outline:0;
  text-shadow:none !important;
  font-size:14px;
  font-weight:900;
  line-height:1.2;
  text-decoration:underline;
  text-underline-offset:3px;
}
body.landing-page.is-confirm-stage .booking-terms-agree-row {
  justify-self:start;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:4px 0 10px;
  color:#05080d;
  font-size:15px;
  font-weight:900;
  line-height:1.25;
}
body.landing-page.is-confirm-stage .booking-terms-agree-row input {
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:0;
  accent-color:#05080d;
  cursor:pointer;
}
body.landing-page.is-confirm-stage .booking-terms-agree-row label {
  margin:0;
}
body.landing-page.is-confirm-stage .booking-order-summary .booking-terms-link {
  display:none !important;
}
body.landing-page.is-confirm-stage .booking-terms-inline-link:hover {
  color:#000 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
body.landing-page.is-confirm-stage .booking-terms-inline-link::before,
body.landing-page.is-confirm-stage .booking-terms-inline-link::after {
  content:none !important;
  display:none !important;
}
@media (max-width:700px) {
  body.landing-page.is-confirm-stage .welcome-copy {
    width:min(100%, 560px) !important;
  }
  body.landing-page.is-confirm-stage .court-card {
    max-width:min(100%, 560px) !important;
    padding:28px 20px !important;
  }
  .booking-confirm-item {
    grid-template-columns:1fr;
    gap:8px;
  }
  .booking-confirm-item > span {
    justify-self:start;
  }
  body.landing-page.is-confirm-stage .booking-terms-inline-link {
    justify-self:start;
  }
}
body.landing-page .booking-terms-modal .booking-terms-modal-dialog > .quantity-modal-close.booking-terms-modal-close,
body.landing-page .booking-terms-modal .booking-terms-modal-dialog > .quantity-modal-close.booking-terms-modal-close:hover,
body.landing-page .booking-terms-modal .booking-terms-modal-dialog > .quantity-modal-close.booking-terms-modal-close:focus {
  color:#111722 !important;
  border:1px solid #edf0f3 !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:0 4px 9px rgb(8 12 19 / 12%) !important;
}
body.landing-page .booking-terms-modal .booking-terms-modal-dialog > .quantity-modal-close.booking-terms-modal-close i {
  color:#111722 !important;
}
html body.landing-page .account-menu-panel button[data-account-logout],
html body.landing-page .account-menu-panel button[data-account-logout]:hover,
html body.landing-page .account-menu-panel button[data-account-logout]:focus,
html body.landing-page .account-menu-panel button[data-account-logout]:not(:disabled),
html body.landing-page .account-menu-panel button[data-account-logout]:not(:disabled):hover {
  color:#111722 !important;
  border:1px solid transparent !important;
  border-radius:12px !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
}
html body.landing-page .account-menu-panel button[data-account-logout]::before,
html body.landing-page .account-menu-panel button[data-account-logout]::after {
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}
html body.landing-page .account-menu[hidden],
html body.landing-page .account-menu-panel [hidden],
html body.landing-page .account-menu-panel button[hidden],
html body.landing-page .account-menu-panel a[hidden] {
  display:none !important;
}
@media (max-width:700px) and (orientation:portrait) {
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-content {
    justify-content:center !important;
    padding:96px 32px 112px !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-copy {
    margin-top:clamp(56px, 10vh, 92px) !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-visual {
    flex:0 0 clamp(220px, 35vh, 300px) !important;
    min-height:clamp(220px, 35vh, 300px) !important;
  }
}

@media (min-width:701px) and (max-width:1024px) and (orientation:portrait) {
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-content {
    justify-content:center !important;
  }
  body.landing-page:not(.is-email-stage):not(.is-otp-stage):not(.is-services-stage):not(.is-booking-stage):not(.is-court-stage):not(.is-confirm-stage):not(.is-payment-stage):not(.is-membership-stage):not(.is-opening-scan) .welcome-copy {
    margin-top:clamp(64px, 9vh, 110px) !important;
  }
}
body.landing-page .account-menu-panel:not([hidden]) {
  animation:account-panel-in .2s cubic-bezier(.2,.85,.25,1) both;
  transform-origin:top right;
}
body.landing-page .account-menu-panel > a.account-menu-profile,
body.landing-page .account-menu-panel > a.account-menu-profile:hover,
body.landing-page .account-menu-panel > a.account-menu-profile:focus {
  display:grid !important;
  gap:3px !important;
  min-height:0 !important;
  padding:10px !important;
  color:#111722 !important;
  border:1px solid #f2edf0 !important;
  border-radius:12px !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:pointer !important;
  text-decoration:none !important;
}
body.landing-page .account-menu-profile em {
  color:#9a6670;
  font:800 10px/1.25 "Nunito Sans", sans-serif;
  font-style:normal;
}
body.landing-page .account-profile-modal:not([hidden]),
body.landing-page .account-bookings-modal:not([hidden]) {
  animation:account-modal-fade-in .18s ease-out both;
}
body.landing-page .account-profile-modal:not([hidden]) .account-profile-modal-dialog,
body.landing-page .account-bookings-modal:not([hidden]) .account-profile-modal-dialog {
  animation:account-modal-in .24s cubic-bezier(.2,.9,.24,1.12) both;
}
body.landing-page .account-bookings-modal {
  position:fixed;
  z-index:30;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
}
body.landing-page .account-bookings-modal[hidden] {
  display:none;
}
body.landing-page .account-bookings-modal-dialog {
  width:min(100%, 430px);
}
body.landing-page .account-bookings-list {
  display:grid;
  gap:10px;
  max-height:min(52vh, 420px);
  overflow:auto;
  padding-right:2px;
}
body.landing-page .account-booking-item {
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid #f2edf0;
  border-radius:14px;
  background:#fff;
}
body.landing-page .account-booking-item > span {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  color:#fff;
  border-radius:50%;
  background:#d91f2a;
}
body.landing-page .account-booking-item strong,
body.landing-page .account-booking-item small,
body.landing-page .account-booking-item em {
  display:block;
}
body.landing-page .account-booking-item strong {
  color:#111722;
  font:900 13px/1.2 "Nunito Sans", sans-serif;
}
body.landing-page .account-booking-item small {
  margin-top:3px;
  color:#657085;
  font:800 11px/1.35 "Nunito Sans", sans-serif;
}
body.landing-page .account-booking-item em {
  margin-top:5px;
  color:#d91f2a;
  font:900 10px/1.2 "Nunito Sans", sans-serif;
  font-style:normal;
  letter-spacing:.04em;
}
body.landing-page .account-bookings-empty {
  display:grid;
  justify-items:center;
  gap:8px;
  padding:24px 12px;
  color:#657085;
  text-align:center;
  font:800 13px/1.35 "Nunito Sans", sans-serif;
}
body.landing-page .account-bookings-empty i {
  color:#d91f2a;
  font-size:24px;
}
@keyframes account-panel-in {
  from { opacity:0; transform:translateY(-8px) scale(.97); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes account-modal-fade-in {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes account-modal-in {
  from { opacity:0; transform:translateY(12px) scale(.96); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="email"],
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="otp"],
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="opening"] + .flow-arrow,
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="email"] + .flow-arrow {
  display:none !important;
}

body.landing-page .email-input-wrap input {
  padding-right:18px !important;
}

body.landing-page.is-landing-logged-in .stage-flow button[data-stage="booking"],
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="booking"] + .flow-arrow,
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="confirm"],
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="confirm"] + .flow-arrow,
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="payment"] {
  display:inline-flex !important;
}

body.landing-page.is-landing-logged-in .stage-flow button[data-stage="membership"],
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="membership"] + .flow-arrow,
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="membership-package"],
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="membership-package"] + .flow-arrow,
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="membership-day"],
body.landing-page.is-landing-logged-in .stage-flow button[data-stage="membership-day"] + .flow-arrow {
  display:none !important;
}

body.landing-page .stage-flow {
  justify-content:center !important;
}

body.landing-page .stage-flow-track {
  transform:none !important;
  transition:none !important;
}

body.landing-page .stage-flow.is-stage-switching .stage-flow-track,
body.landing-page .stage-flow-track[style*="transform"] {
  transform:none !important;
}

body.landing-page .stage-flow .stage-flow-traveler {
  display:none !important;
}

body.landing-page .stage-flow button {
  width:40px !important;
  min-width:40px !important;
  justify-content:center !important;
}

body.landing-page .stage-flow button > span:not(.flow-icon) {
  display:none !important;
}

body.landing-page .stage-flow .flow-arrow {
  width:16px !important;
  min-width:16px !important;
  justify-content:center !important;
}

body.landing-page .account-bookings-modal .account-profile-modal-close,
body.landing-page .account-bookings-modal .account-profile-modal-close:hover,
body.landing-page .account-bookings-modal .account-profile-modal-close:focus {
  color:#111722 !important;
  border:1px solid #edf0f3 !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:0 4px 9px rgb(8 12 19 / 12%) !important;
}

body.landing-page .account-bookings-modal .account-profile-modal-close i {
  color:#111722 !important;
}

html body.landing-page .account-bookings-modal button.account-profile-modal-close,
html body.landing-page .account-bookings-modal button.account-profile-modal-close:hover,
html body.landing-page .account-bookings-modal button.account-profile-modal-close:focus,
html body.landing-page .account-bookings-modal button.account-profile-modal-close:not(:disabled),
html body.landing-page .account-bookings-modal button.account-profile-modal-close:not(:disabled):hover {
  color:#111722 !important;
  border:1px solid #edf0f3 !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:none !important;
  box-shadow:0 4px 9px rgb(8 12 19 / 12%) !important;
}

html body.landing-page .account-bookings-modal button.account-profile-modal-close::before,
html body.landing-page .account-bookings-modal button.account-profile-modal-close::after {
  content:none !important;
  display:none !important;
  background:none !important;
  animation:none !important;
}

body.landing-page .account-menu-panel [data-account-barcode] i {
  color:#fff !important;
  background:#111722 !important;
}

body.landing-page .account-barcode-list {
  display:grid;
  gap:12px;
  max-height:min(58vh, 480px);
  overflow:auto;
  padding-right:2px;
}

body.landing-page .account-barcode-item {
  display:grid;
  grid-template-columns:132px 1fr;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid #f2edf0;
  border-radius:16px;
  background:#fff;
}

body.landing-page .account-barcode-item--user {
  grid-template-columns:minmax(190px, 240px) 1fr;
  align-items:stretch;
}

body.landing-page .account-barcode-card {
  position:relative;
  display:grid;
  justify-items:center;
  align-content:center;
  min-height:292px;
  padding:22px 16px 18px;
  overflow:hidden;
  color:#fff;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgb(7 11 18 / 12%), rgb(7 11 18 / 78%)),
    url('/image/bg-scan.jpeg') center / cover;
  box-shadow:0 18px 34px rgb(92 13 24 / 18%);
  text-align:center;
}

body.landing-page .account-barcode-card .account-barcode-qr {
  width:170px;
  min-height:170px;
  padding:8px;
  border:1px solid rgb(255 255 255 / 82%);
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 28px rgb(0 0 0 / 24%);
}

body.landing-page .account-barcode-card strong,
body.landing-page .account-barcode-card small,
body.landing-page .account-barcode-card em {
  display:block;
  position:relative;
  z-index:1;
}

body.landing-page .account-barcode-card strong {
  margin-top:13px;
  color:#fff;
  font:950 14px/1.25 "Nunito Sans", sans-serif;
}

body.landing-page .account-barcode-card small {
  margin-top:4px;
  color:rgb(255 255 255 / 82%);
  font:800 11px/1.3 "Nunito Sans", sans-serif;
}

body.landing-page .account-barcode-card em {
  margin-top:8px;
  color:#fff;
  font:950 11px/1.1 "Nunito Sans", sans-serif;
  letter-spacing:.08em;
}

body.landing-page .account-barcode-schedules {
  display:grid;
  gap:8px;
  max-height:260px;
  margin-top:12px;
  overflow:auto;
  padding-right:3px;
}

body.landing-page .account-barcode-schedules article {
  padding:10px 11px;
  border:1px solid #eef0f3;
  border-radius:12px;
  background:#fbfcfe;
}

body.landing-page .account-barcode-qr {
  display:grid;
  place-items:center;
  width:132px;
  min-height:132px;
  padding:8px;
  border:1px solid #edf0f3;
  border-radius:14px;
  background:#fff;
}

body.landing-page .account-barcode-item strong,
body.landing-page .account-barcode-item small,
body.landing-page .account-barcode-item em {
  display:block;
}

body.landing-page .account-barcode-item strong {
  color:#111722;
  font:900 13px/1.25 "Nunito Sans", sans-serif;
}

body.landing-page .account-barcode-item small {
  margin-top:5px;
  color:#657085;
  font:800 11px/1.35 "Nunito Sans", sans-serif;
}

body.landing-page .account-barcode-item em {
  margin-top:7px;
  color:#d91f2a;
  font:900 10px/1.2 "Nunito Sans", sans-serif;
  font-style:normal;
  letter-spacing:.04em;
}

@media (max-width:520px) {
  body.landing-page .account-barcode-item {
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }

  body.landing-page .account-barcode-item--user {
    justify-items:stretch;
  }
}

html body.landing-page .account-menu-panel a[data-account-barcode] i.fa-qrcode,
html body.landing-page .account-menu-panel a[data-account-barcode] i.fa-solid.fa-qrcode {
  display:grid !important;
  place-items:center !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  color:#fff !important;
  border-radius:50% !important;
  background:#111722 !important;
  font-family:"Font Awesome 6 Free" !important;
  font-size:11px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-rendering:auto !important;
  -webkit-font-smoothing:antialiased !important;
}

html body.landing-page .stage-flow {
  width:auto !important;
  max-width:calc(100vw - 32px) !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  overflow:hidden !important;
}

html body.landing-page .stage-flow-track {
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:none !important;
  transform:none !important;
  transition:none !important;
}

html body.landing-page .stage-flow button {
  flex:0 0 34px !important;
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  border-radius:50% !important;
}

html body.landing-page .stage-flow .flow-icon {
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  font-size:14px !important;
}

html body.landing-page .stage-flow .flow-arrow {
  flex:0 0 12px !important;
  width:12px !important;
  min-width:12px !important;
  font-size:0 !important;
}

html body.landing-page .stage-flow .flow-arrow::after {
  font-size:17px !important;
  line-height:1 !important;
}

@media (min-width:701px) {
  html body.landing-page .stage-flow {
    bottom:18px !important;
    padding:10px 18px !important;
  }

  html body.landing-page .stage-flow-track {
    gap:12px !important;
  }

  html body.landing-page .stage-flow button {
    flex:0 0 42px !important;
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
  }

  html body.landing-page .stage-flow .flow-icon {
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    font-size:17px !important;
  }

  html body.landing-page .stage-flow .flow-arrow {
    flex:0 0 16px !important;
    width:16px !important;
    min-width:16px !important;
  }

  html body.landing-page .stage-flow .flow-arrow::after {
    font-size:22px !important;
  }
}

html body.landing-page .stage-flow button {
  opacity:1 !important;
}

html body.landing-page .stage-flow button .flow-icon {
  color:rgb(255 255 255 / 72%) !important;
  border-color:rgb(255 255 255 / 22%) !important;
  background:rgb(255 255 255 / 5%) !important;
  box-shadow:none !important;
}

html body.landing-page .stage-flow button.is-complete:not([aria-current="step"]) .flow-icon,
html body.landing-page .stage-flow button.is-accessible:not([aria-current="step"]) .flow-icon {
  color:#111722 !important;
  border-color:#fff !important;
  background:#fff !important;
  box-shadow:0 3px 9px rgb(0 0 0 / 26%) !important;
}

html body.landing-page .stage-flow button[aria-current="step"] {
  color:#fff !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body.landing-page .stage-flow button[aria-current="step"] .flow-icon {
  color:#fff !important;
  border-color:#ffffff !important;
  background:#d91f2a !important;
  box-shadow:0 0 0 4px #fff, 0 8px 18px rgb(217 31 42 / 42%) !important;
}

html body.landing-page .stage-flow button[aria-current="step"]::after {
  right:50% !important;
  bottom:-8px !important;
  width:18px !important;
  height:4px !important;
  background:#fff !important;
  border-radius:999px !important;
  box-shadow:0 0 12px rgb(255 255 255 / 75%) !important;
  transform:translateX(50%) !important;
  opacity:1 !important;
}

html body.landing-page .stage-flow button:disabled:not([aria-current="step"]) {
  cursor:not-allowed !important;
  opacity:.34 !important;
  filter:grayscale(.65) !important;
}

html body.landing-page .stage-flow button:disabled:not([aria-current="step"]) .flow-icon {
  color:rgb(255 255 255 / 42%) !important;
  border-color:rgb(255 255 255 / 18%) !important;
  background:rgb(255 255 255 / 3%) !important;
  box-shadow:none !important;
}

html body.landing-page .stage-flow button:disabled:not([aria-current="step"]) .flow-icon::after,
html body.landing-page .stage-flow button.is-complete:not([aria-current="step"]) .flow-icon::after {
  display:none !important;
}

@media (max-width:768px) and (orientation:portrait) {
  html body.landing-page .welcome-content {
    padding-bottom:max(118px, calc(96px + env(safe-area-inset-bottom))) !important;
  }

  html body.landing-page .stage-flow {
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    min-height:66px !important;
    align-items:center !important;
    padding:14px 18px calc(14px + env(safe-area-inset-bottom)) !important;
    border-radius:18px 18px 0 0 !important;
    transform:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }

  html body.landing-page .stage-flow-track {
    align-items:center !important;
    justify-content:space-between !important;
    gap:0 !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }
}

body.landing-page .payment-booking-schedules {
  display:grid;
  gap:8px;
}

body.landing-page .payment-booking-schedules article {
  padding:10px 12px;
  border:1px solid #d8eadf;
  border-radius:12px;
  background:#f8fffa;
}

body.landing-page .payment-booking-schedules strong,
body.landing-page .payment-booking-schedules p,
body.landing-page .payment-booking-schedules code {
  display:block;
}

body.landing-page .payment-booking-schedules p {
  margin:4px 0;
  color:#526d5d;
  font-size:13px;
}

body.landing-page .payment-booking-schedules code {
  color:#0e7745;
  font-weight:800;
}

@media (max-width:768px) and (orientation:portrait) {
  html body.landing-page.is-booking-stage {
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
  }

  html body.landing-page.is-booking-stage .welcome-screen {
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow-y:hidden !important;
    overflow-x:hidden !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
  }

  html body.landing-page.is-booking-stage .welcome-content {
    box-sizing:border-box !important;
    min-height:100dvh !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    place-items:center !important;
    align-content:center !important;
    padding-top:86px !important;
    padding-bottom:104px !important;
  }

  html body.landing-page.is-booking-stage .welcome-copy {
    align-self:center !important;
    width:100% !important;
    max-height:none !important;
    overflow:visible !important;
  }

  html body.landing-page.is-booking-stage .booking-card {
    width:100% !important;
    max-height:none !important;
    overflow:visible !important;
  }

  html body.landing-page.has-stage-overflow.is-booking-stage {
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
  }

  html body.landing-page.has-stage-overflow.is-booking-stage .welcome-screen {
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
  }

  html body.landing-page.has-stage-overflow.is-booking-stage .welcome-content {
    min-height:100dvh !important;
    place-items:center !important;
    align-content:start !important;
    padding-top:92px !important;
    padding-bottom:104px !important;
  }

  html body.landing-page.has-stage-overflow.is-booking-stage .welcome-copy {
    align-self:start !important;
  }
}

body.landing-page .account-barcode-modal-dialog {
  width:min(calc(100vw - 44px), 470px) !important;
}

body.landing-page .account-barcode-list {
  justify-items:center !important;
  overflow:visible !important;
  padding-right:0 !important;
}

body.landing-page .account-barcode-item.account-barcode-item--user {
  display:block !important;
  width:min(100%, 360px) !important;
  padding:0 !important;
  border:0 !important;
  border-radius:20px !important;
  background:transparent !important;
}

body.landing-page .account-barcode-item--user .account-barcode-card {
  aspect-ratio:561 / 701 !important;
  min-height:0 !important;
  width:100% !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border-radius:22px !important;
  background:
    linear-gradient(180deg, rgb(7 11 18 / 0%), rgb(7 11 18 / 0%)),
    url('/image/bg-scan.jpeg') center / contain no-repeat !important;
  box-shadow:none !important;
}

body.landing-page .account-barcode-item--user .account-barcode-qr {
  width:66% !important;
  min-height:auto !important;
  aspect-ratio:1 / 1 !important;
  display:grid !important;
  place-items:center !important;
  margin-top:22% !important;
  padding:10px !important;
  border:0 !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:none !important;
}

body.landing-page .account-barcode-item--user .account-barcode-card > :not(.account-barcode-qr) {
  display:none !important;
}

body.landing-page .booking-schedule-modal-dialog {
  gap:12px !important;
}

body.landing-page .booking-schedule-modal-dialog .booking-date-fields,
body.landing-page .booking-schedule-modal-dialog .booking-time-fields.row {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  margin:0 !important;
}

body.landing-page .booking-schedule-modal-dialog :is(.booking-field, .date-input-wrap, .quantity-modal-trigger) {
  min-height:52px !important;
}

body.landing-page .booking-schedule-modal-dialog .quantity-modal-trigger.has-value,
body.landing-page .booking-schedule-modal-dialog .quantity-modal-trigger.has-value > span,
body.landing-page .booking-schedule-modal-dialog .date-input-wrap.has-value .booking-date-input,
body.landing-page .booking-schedule-modal-dialog .time-input-wrap.has-value input {
  color:#172033 !important;
  font-weight:900 !important;
}

body.landing-page .booking-schedule-modal-dialog .quantity-modal-trigger:not(.has-value) > span,
body.landing-page .booking-schedule-modal-dialog .booking-date-input::placeholder,
body.landing-page .booking-schedule-modal-dialog .time-input-wrap:not(.has-value) input::placeholder {
  color:#6f7886 !important;
  opacity:1 !important;
}

@media (max-width:640px) {
  body.landing-page .booking-schedule-modal-dialog {
    gap:14px !important;
  }

  body.landing-page .booking-schedule-modal-dialog .booking-date-fields,
  body.landing-page .booking-schedule-modal-dialog .booking-time-fields.row {
    display:contents !important;
  }

  body.landing-page .booking-schedule-modal-dialog .booking-field {
    margin:0 !important;
    padding:0 !important;
  }

  body.landing-page .booking-schedule-modal-dialog .email-submit {
    margin-top:0 !important;
  }
}

body.landing-page .welcome-screen .welcome-content .welcome-copy .booking-card .booking-schedule-cancel:not(:disabled),
body.landing-page .welcome-screen .welcome-content .welcome-copy .booking-card .booking-schedule-cancel:not(:disabled):hover {
  color:#fff !important;
  border-color:#05080d !important;
  background:#05080d !important;
  background-image:none !important;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 12%),0 12px 24px rgb(5 8 13 / 24%) !important;
}

body.landing-page button:disabled::before,
body.landing-page button:disabled::after,
body.landing-page .email-submit:disabled::before,
body.landing-page .email-submit:disabled::after {
  display:none !important;
  content:none !important;
  animation:none !important;
  opacity:0 !important;
}

body.landing-page .booking-schedule-modal-dialog {
  gap:12px !important;
}

body.landing-page .booking-schedule-modal-dialog .booking-date-fields,
body.landing-page .booking-schedule-modal-dialog .booking-time-fields.row,
body.landing-page .booking-schedule-modal-dialog .booking-quantity-fields {
  display:contents !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  --bs-gutter-x:0;
  --bs-gutter-y:0;
}

body.landing-page .booking-schedule-modal-dialog .booking-field,
body.landing-page .booking-schedule-modal-dialog .booking-time-fields.row > .booking-field {
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

body.landing-page .booking-schedule-modal-dialog .booking-schedule-actions {
  margin-top:4px !important;
}

body.landing-page .booking-card .booking-schedule-trigger.msc-booking-add-trigger,
body.landing-page .booking-card .booking-schedule-trigger.msc-booking-add-trigger:hover,
body.landing-page .welcome-screen .welcome-content .welcome-copy .booking-card .booking-schedule-trigger.msc-booking-add-trigger:not(:disabled),
body.landing-page .welcome-screen .welcome-content .welcome-copy .booking-card .booking-schedule-trigger.msc-booking-add-trigger:not(:disabled):hover {
  color:#05080d !important;
  border:3px solid #05080d !important;
  background:#fff !important;
  background-color:#fff !important;
  background-image:linear-gradient(180deg,#ffffff 0%,#f8fafc 48%,#e9eef5 100%) !important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -5px 12px rgb(5 8 13 / 8%),0 12px 24px rgb(5 8 13 / 14%) !important;
  text-shadow:none !important;
}

body.landing-page .booking-card .booking-schedule-trigger.msc-booking-add-trigger::before,
body.landing-page .booking-card .booking-schedule-trigger.msc-booking-add-trigger::after,
body.landing-page .booking-card .booking-schedule-trigger.msc-booking-add-trigger:hover::before,
body.landing-page .booking-card .booking-schedule-trigger.msc-booking-add-trigger:hover::after {
  display:none !important;
  content:none !important;
  background:none !important;
  animation:none !important;
}

body.landing-page.is-payment-stage .welcome-content {
  display:grid !important;
  grid-template-columns:1fr !important;
  place-items:center !important;
  align-content:center !important;
  min-height:100dvh !important;
  padding-top:72px !important;
  padding-bottom:86px !important;
}

body.landing-page.is-payment-stage .welcome-copy {
  align-self:center !important;
  justify-self:center !important;
  width:min(calc(100vw - 48px),clamp(720px,52vw,900px)) !important;
  transform:none !important;
  translate:none !important;
}

body.landing-page.is-payment-stage .court-card {
  align-self:center !important;
  width:100% !important;
}

html body.landing-page.is-booking-stage.is-court-stage.is-payment-stage .welcome-content {
  display:grid !important;
  grid-template-columns:1fr !important;
  place-items:center !important;
  align-content:center !important;
  min-height:100dvh !important;
  padding-top:72px !important;
  padding-bottom:86px !important;
}

html body.landing-page.is-booking-stage.is-court-stage.is-payment-stage .welcome-copy {
  align-self:center !important;
  justify-self:center !important;
  transform:none !important;
  translate:none !important;
}

html body.landing-page.is-payment-stage .payment-success {
  margin-top:0 !important;
}

body.landing-page.has-stage-overflow.is-payment-stage .welcome-content,
body.landing-page.is-stage-scroll-measuring.is-payment-stage .welcome-content {
  align-content:center !important;
  padding-top:72px !important;
}

body.landing-page.has-stage-overflow.is-payment-stage .welcome-copy,
body.landing-page.is-stage-scroll-measuring.is-payment-stage .welcome-copy {
  align-self:center !important;
  transform:none !important;
  translate:none !important;
}

@media (max-height:760px) and (orientation:landscape) {
  body.landing-page.is-payment-stage .welcome-content {
    padding-top:82px !important;
    padding-bottom:104px !important;
  }

  body.landing-page.is-payment-stage .welcome-copy,
  html body.landing-page.is-booking-stage.is-court-stage.is-payment-stage .welcome-copy {
    transform:none !important;
  }
}

@media (max-width:700px), (orientation:portrait) {
  body.landing-page.is-payment-stage .welcome-content {
    padding-top:92px !important;
    padding-bottom:112px !important;
  }

  body.landing-page.is-payment-stage .welcome-copy,
  html body.landing-page.is-booking-stage.is-court-stage.is-payment-stage .welcome-copy {
    width:calc(100vw - 40px) !important;
    transform:translateY(0) !important;
    translate:none !important;
  }
}