/* A quiet, Cal.com-inspired calendar using native HTML controls only. */
.booking-page { background:#f8fafb; }
.booking-header { max-width:1200px; margin:auto; padding:30px 36px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.back-link { font-size:13px; color:var(--muted); display:flex; gap:12px; }
.back-link:hover { color:var(--ink); }
.booking-main { max-width:1112px; margin:55px auto 0; padding:0 24px; }
.booking-intro { text-align:center; margin-bottom:36px; }
.demo-badge { display:inline-flex; padding:4px 10px; border:1px solid #d4e0e8; border-radius:6px; background:#edf3f7; color:#52697b; font-size:11px; margin-bottom:17px; }
.booking-intro h1 { font-size:clamp(33px,3.5vw,46px); line-height:1.15; }
.booking-intro>p:last-child { font-size:14px; color:var(--muted); margin-top:16px; }
.booking-shell { border:1px solid #dfe5e9; border-radius:16px; background:white; box-shadow:0 8px 30px #29415504; overflow:hidden; }
.booking-grid { display:grid; grid-template-columns:300px minmax(0,1fr) 205px; }
.meeting-details { padding:32px 28px; border-right:1px solid #e6eaed; }
.meeting-avatar { display:grid; place-items:center; width:46px; height:46px; border-radius:10px; background:var(--ink); color:white; font-family:var(--serif); font-size:40px; line-height:1; letter-spacing:-4px; padding:0 4px 6px 0; margin-bottom:23px; }
.meeting-host { font-size:12px; color:var(--muted); margin-bottom:8px; }
.meeting-details h2 { font:500 25px/1.2 var(--sans); letter-spacing:-.8px; }
.meeting-description { font-size:13px; line-height:1.8; color:var(--muted); margin-top:17px; }
.meeting-meta { list-style:none; padding:0; margin:25px 0; display:flex; flex-direction:column; gap:14px; font-size:12px; }
.meeting-meta li { display:flex; gap:11px; align-items:flex-start; }
.meeting-meta svg { width:17px; height:17px; flex:none; margin-top:1px; color:#64717b; }
.meeting-meta small { font-size:11px; color:var(--muted); }
.meeting-note { font-size:12px; line-height:1.8; color:#687781; padding-top:20px; border-top:1px solid #edf0f2; }
.calendar-panel { padding:32px 25px; }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:27px; }
.calendar-heading h2,.times-panel h2 { font:500 15px/1.4 var(--sans); letter-spacing:0; }
.calendar-heading h2 span { color:var(--muted); font-weight:400; }
.sample-label { font-size:10px; color:var(--muted); }
.calendar-fieldset,.time-options { border:0; padding:0; margin:0; min-width:0; }
.weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.weekdays { margin-bottom:12px; text-align:center; font-size:10px; color:var(--muted); }
.day { position:relative; cursor:pointer; }
.day>span,.unavailable-day,.empty-day { display:grid; place-items:center; aspect-ratio:1; min-height:36px; font-size:12px; border-radius:6px; }
.day>span { background:#f2f5f7; border:1px solid transparent; }
.day input,.time-slot input { position:absolute; opacity:0; width:1px; height:1px; }
.day input:checked+span { background:var(--ink); color:white; }
.day input:focus-visible+span,.time-slot input:focus-visible+span { outline:3px solid #456e89; outline-offset:2px; }
.day:hover>span { border-color:#8fa6b7; }
.unavailable-day { color:#9da7ae; }
.calendar-note { margin-top:25px; font-size:10px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.calendar-note>span { width:6px; height:6px; background:#c5d8e5; border-radius:50%; flex:none; }
.times-panel { padding:32px 22px; border-left:1px solid #e6eaed; }
.time-format { margin:7px 0 21px; font-size:10px; color:var(--muted); }
.time-options { display:flex; flex-direction:column; gap:10px; }
.time-slot { position:relative; cursor:pointer; }
.time-slot span { display:block; padding:11px 10px; border:1px solid #dce3e8; border-radius:6px; text-align:center; font-size:12px; }
.time-slot input:checked+span { border-color:var(--ink); background:#edf3f7; box-shadow:inset 0 0 0 1px var(--ink); font-weight:600; }
.time-slot:hover span { border-color:#7b93a5; }
.booking-next { padding:24px 28px; border-top:1px solid #e6eaed; display:grid; grid-template-columns:1fr auto; align-items:start; gap:20px; }
.summary-label { font-size:10px; color:var(--muted); }
.selection-summary p { font-size:13px; margin-top:5px; }
.selection-separator { color:#91a1ae; padding:0 7px; }
.selection-zone { font-size:10px; color:var(--muted); margin-left:5px; }
.selected-date,.selected-time { display:none; }
.booking-details { display:contents; }
.booking-details>summary { list-style:none; cursor:pointer; border-radius:7px; font-size:12px; min-height:44px; gap:16px; padding:11px 18px; margin-top:4px; }
.booking-details>summary::-webkit-details-marker { display:none; }
.back-label { display:none; }
.booking-details[open] .back-label { display:inline; }
.booking-details[open] .continue-label { display:none; }
.guest-details { grid-column:1/-1; border-top:1px solid #e6eaed; margin-top:8px; padding-top:26px; }
.guest-details h2 { font:500 21px/1.3 var(--sans); letter-spacing:-.4px; }
.guest-details>div>p { font-size:12px; color:var(--muted); margin-top:8px; }
.guest-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.guest-fields label { font-size:12px; font-weight:500; }
.guest-fields label>span { font-weight:400; color:var(--muted); }
.guest-fields input,.guest-fields textarea { display:block; width:100%; margin-top:8px; padding:12px; border:1px solid #d6dfe5; border-radius:6px; background:#fff; color:var(--ink); font:400 13px/1.5 var(--sans); }
.guest-fields textarea { resize:vertical; }
.full-width { grid-column:1/-1; }
.demo-confirm { display:flex; align-items:center; gap:20px; margin-top:22px; }
.demo-confirm .button { border-radius:7px; font-size:12px; }
.demo-confirm button:disabled { background:#e5eaed; color:#63717b; cursor:not-allowed; }
.demo-confirm p { font-size:11px; color:var(--muted); line-height:1.7; }
.booking-disclaimer { text-align:center; font-size:11px; color:var(--muted); margin:20px 0; }
.booking-footer { padding:35px 20px; text-align:center; color:#687781; font-size:11px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:1000px) { .booking-grid{grid-template-columns:245px minmax(0,1fr)} .times-panel{grid-column:2;border-left:0;border-top:1px solid #e6eaed;padding-top:22px}.meeting-details{grid-row:1/3}.time-options{display:grid;grid-template-columns:repeat(3,1fr)}.booking-main{margin-top:35px}.calendar-panel{padding:28px 22px} }
@media(max-width:650px) { .booking-header{padding:23px 20px}.back-link{font-size:11px;gap:6px}.booking-main{padding:0 16px;margin-top:25px}.booking-intro{margin-bottom:27px}.booking-intro h1{font-size:35px}.booking-intro>p:last-child{font-size:13px;max-width:290px;margin-inline:auto}.booking-grid{grid-template-columns:1fr}.meeting-details{grid-row:auto;border-right:0;border-bottom:1px solid #e6eaed;padding:25px}.meeting-avatar{width:38px;height:38px;font-size:33px;margin-bottom:18px}.meeting-meta{margin:20px 0 0;gap:10px}.meeting-note{display:none}.times-panel{grid-column:1;padding:23px}.calendar-panel{padding:25px 23px}.calendar-heading{margin-bottom:22px}.day>span,.unavailable-day,.empty-day{min-height:34px}.booking-next{padding:22px;grid-template-columns:1fr;gap:16px}.booking-details>summary{justify-self:stretch;justify-content:center}.guest-fields{grid-template-columns:1fr;gap:16px}.demo-confirm{align-items:flex-start;flex-direction:column;gap:10px}.booking-disclaimer{padding-inline:10px;line-height:1.7}.booking-footer{padding-top:15px} }
.booking-shell:has(#date-1:checked) .selected-date-1 { display:inline; }
.booking-shell:has(#date-2:checked) .selected-date-2 { display:inline; }
.booking-shell:has(#date-5:checked) .selected-date-5 { display:inline; }
.booking-shell:has(#date-6:checked) .selected-date-6 { display:inline; }
.booking-shell:has(#date-7:checked) .selected-date-7 { display:inline; }
.booking-shell:has(#date-8:checked) .selected-date-8 { display:inline; }
.booking-shell:has(#date-9:checked) .selected-date-9 { display:inline; }
.booking-shell:has(#date-12:checked) .selected-date-12 { display:inline; }
.booking-shell:has(#date-13:checked) .selected-date-13 { display:inline; }
.booking-shell:has(#date-14:checked) .selected-date-14 { display:inline; }
.booking-shell:has(#date-15:checked) .selected-date-15 { display:inline; }
.booking-shell:has(#date-16:checked) .selected-date-16 { display:inline; }
.booking-shell:has(#date-19:checked) .selected-date-19 { display:inline; }
.booking-shell:has(#date-20:checked) .selected-date-20 { display:inline; }
.booking-shell:has(#date-21:checked) .selected-date-21 { display:inline; }
.booking-shell:has(#date-22:checked) .selected-date-22 { display:inline; }
.booking-shell:has(#date-23:checked) .selected-date-23 { display:inline; }
.booking-shell:has(#date-26:checked) .selected-date-26 { display:inline; }
.booking-shell:has(#date-27:checked) .selected-date-27 { display:inline; }
.booking-shell:has(#date-28:checked) .selected-date-28 { display:inline; }
.booking-shell:has(#date-29:checked) .selected-date-29 { display:inline; }
.booking-shell:has(#date-30:checked) .selected-date-30 { display:inline; }
.booking-shell:has(#time-0:checked) .selected-time-0 { display:inline; }
.booking-shell:has(#time-1:checked) .selected-time-1 { display:inline; }
.booking-shell:has(#time-2:checked) .selected-time-2 { display:inline; }
.booking-shell:has(#time-3:checked) .selected-time-3 { display:inline; }
.booking-shell:has(#time-4:checked) .selected-time-4 { display:inline; }