[hidden] { display: none !important; }
.whatsapp-qr {
  margin: 20px 0 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8faf7;
}
.whatsapp-qr p { margin: 0 0 10px; }
.whatsapp-qr p:last-child { margin: 8px 0 0; font-size: 12px; }
.whatsapp-qr img { display: block; width: min(240px, 100%); height: auto; margin: auto; border-radius: 10px; }
.channel-links .internal-chat { background: var(--ink); }
/* Availability states: unavailable times remain visible and explain why. */
.slot{padding:9px 4px}
.slot span,.slot small{display:block}
.slot small{font-size:10px;margin-top:2px;font-weight:650;color:var(--muted)}
.slot:not(:disabled):hover,.slot.selected{background:var(--ink);color:#fff;border-color:var(--ink)}
.slot.selected small{color:#dbe5df}
.slot:disabled{cursor:not-allowed}
.slot.busy{background:#ffe5e5;border-color:#efaaaa;color:#a52d2d}
.slot.busy small{color:#a52d2d}
.slot.past{background:#f8eaea;border-color:#e8c5c5;color:#956868}
.slot.past small{color:#956868}
.slot-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;color:var(--muted);font-size:11px}
.slot-legend span{display:flex;align-items:center;gap:5px}
.slot-legend i{width:9px;height:9px;border-radius:50%;background:#fff;border:1px solid var(--green)}
.slot-legend i.busy{background:#ef7777;border-color:#ef7777}
.slot-legend i.past{background:#d4a9a9;border-color:#d4a9a9}

/* Stable date strip and native calendar for any future week. */
.booking-grid,.booking-grid>*,.date-controls,.dates{min-width:0}
.date-fieldset{min-height:82px}
.date-controls{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:10px;align-items:stretch}
.dates{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dates .choice{min-width:0;padding:9px 3px;white-space:nowrap}
.dates .choice span{display:block;font-size:12px;text-transform:capitalize}
.calendar-picker{position:relative;display:flex;align-items:center;gap:8px;min-height:52px;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#f7faf7;color:var(--ink);cursor:pointer;overflow:hidden;text-align:left;appearance:none}
.calendar-picker:hover,.calendar-picker:focus-within{border-color:var(--green);background:#eaf6f0}
.calendar-icon{font-size:19px;line-height:1}
.calendar-copy{display:grid;min-width:0;line-height:1.15}
.calendar-copy b{font-size:11px}
.calendar-copy small{margin-top:4px;color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-dialog{max-width:430px;width:calc(100% - 28px);padding:24px;text-align:left;overflow:visible}
.calendar-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;padding-right:36px}.calendar-dialog-head h2{font-size:28px}.calendar-dialog-head .dialog-close{top:15px;right:15px;width:38px;height:38px;border-radius:50%;background:#eef2ee}
.calendar-navigation{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;margin:20px 0 12px}.calendar-navigation strong{text-align:center;text-transform:capitalize}.calendar-navigation button{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:18px;cursor:pointer}.calendar-navigation button:disabled{opacity:.35;cursor:not-allowed}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.calendar-weekdays{margin-bottom:5px}.calendar-weekdays span{text-align:center;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}
.calendar-day{aspect-ratio:1;border:0;border-radius:11px;background:#f6f8f5;color:var(--ink);font-weight:750;cursor:pointer}.calendar-day:hover:not(:disabled){background:#e5f3eb;color:var(--green)}.calendar-day.other-month{color:#aeb7b2;background:transparent}.calendar-day.today{box-shadow:inset 0 0 0 1px var(--green)}.calendar-day.selected{background:var(--green);color:#fff;box-shadow:none}.calendar-day:disabled{color:#c7cdca;background:#f5f5f3;text-decoration:line-through;cursor:not-allowed}
.calendar-today{width:100%;min-height:44px;margin-top:14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--green);font-weight:800;cursor:pointer}
.slot-grid{grid-template-columns:repeat(auto-fit,minmax(78px,1fr))}

@media(max-width:700px){
  .date-controls{grid-template-columns:minmax(0,1fr) 52px;gap:7px}
  .dates{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:thin}
  .dates .choice{flex:0 0 72px;scroll-snap-align:start}
  .calendar-picker{justify-content:center;padding:6px}
  .calendar-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

@media(max-width:420px){
  .slot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .slot-legend{gap:10px}
}

@media(max-width:520px){
  .calendar-dialog{width:100%;max-width:none;margin:auto 0 0;padding:22px 16px calc(20px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0}
  .calendar-dialog[open]{animation:calendar-sheet-in .2s ease-out}
  .calendar-day{border-radius:10px}
}
@keyframes calendar-sheet-in{from{transform:translateY(22px);opacity:.7}to{transform:translateY(0);opacity:1}}

.booking-disabled{max-width:1152px;margin:50px auto;padding:34px;border:1px solid var(--line);border-radius:22px;background:#fff;text-align:center}
.booking-disabled h2{margin:0 0 8px;font-size:clamp(24px,4vw,38px)}
.booking-disabled p:last-child{margin:0;color:var(--muted)}
#heroTitle{color:#fff}
.club-info-section,.location-section,.booking-disabled{content-visibility:auto;contain-intrinsic-size:600px}
button,.choice,.slot,.field-card,.route-button{touch-action:manipulation}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(max-width:520px){.choice,.slot,.field-card,.primary{min-height:44px}.booking-shell{padding-bottom:calc(42px + env(safe-area-inset-bottom))}}
html,body{width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip}
main,section,form,fieldset,.panel{min-width:0;max-width:100%}
@media(max-width:700px){
  .date-controls{grid-template-columns:1fr}
  .dates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;padding:0;scroll-snap-type:none}
  .dates .choice{min-width:0;max-width:100%;white-space:normal;scroll-snap-align:none}
  .calendar-picker{width:100%;justify-content:flex-start;min-height:48px}
  .calendar-copy{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .calendar-copy small{font-size:10px}
}
@media(max-width:360px){.dates{grid-template-columns:repeat(3,minmax(0,1fr))}}