/* Native Tero booking: use the shared design tokens and existing input/button classes. */
.has-native-booking .demo-form.native-booking { max-width:920px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; margin:20px auto 0; padding:0; border:1px solid var(--gray-200); border-radius:var(--radius-2xl); background:rgba(255,255,255,.56); overflow:hidden; }
.booking-scheduler, .booking-details { padding:30px; min-width:0; }
.booking-details { border-left:1px solid var(--gray-200); background:rgba(255,255,255,.3); display:flex; flex-direction:column; gap:15px; }
.booking-section-title { font:400 28px/1.2 var(--font-serif); letter-spacing:var(--display-spacing); color:var(--text-heading); margin:0 0 6px; }
.booking-duration, .booking-zone, .booking-status, .booking-preview { font:400 13px/1.5 var(--font-sans); color:var(--text-muted); }
.booking-duration { margin:0 0 22px; }
.booking-month-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.booking-month { font:500 15px/1.5 var(--font-sans); text-transform:capitalize; color:var(--text-heading); }
.booking-month-arrow { width:40px; height:40px; border:1px solid var(--gray-200); border-radius:var(--radius-pill); background:transparent; color:var(--text-heading); font:400 25px/1 var(--font-sans); cursor:pointer; }
.booking-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.booking-weekday { font:500 11px/1 var(--font-sans); color:var(--text-muted); text-align:center; padding:8px 0 12px; }
.booking-date { min-width:0; aspect-ratio:1; padding:0; border:1px solid transparent; border-radius:var(--radius-md); background:rgba(255,255,255,.8); color:var(--text-heading); font:500 14px/1 var(--font-sans); cursor:pointer; }
.booking-date:disabled { background:transparent; color:var(--text-muted); opacity:.42; cursor:default; }
.booking-date:not(:disabled):hover, .booking-time:hover, .booking-month-arrow:not(:disabled):hover { border-color:var(--brand-hover); background:var(--tero-teal-50); }
.booking-date[aria-pressed="true"], .booking-time[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.booking-date[aria-pressed="true"]:hover, .booking-time[aria-pressed="true"]:hover { background:var(--ink-hover); color:#fff; }
.booking-month-arrow:disabled { opacity:.35; cursor:default; }
.booking-day-title { color:var(--text-heading); font:500 13px/1.5 var(--font-sans); margin:22px 0 10px; text-transform:capitalize; }
.booking-day-title:empty { display:none; }
.booking-times { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.booking-time { min-height:44px; border:1px solid var(--gray-200); border-radius:var(--radius-md); background:rgba(255,255,255,.75); color:var(--text-heading); font:500 14px/1.3 var(--font-sans); white-space:nowrap; cursor:pointer; }
.booking-status { margin:16px 0; }
.booking-status:empty { display:none; }
.booking-zone { display:flex; flex-direction:column; gap:5px; margin-top:20px; }
.native-booking .booking-zone select { padding:8px 10px; font-size:12px; background:transparent; }
.native-booking .ff { display:flex; flex-direction:column; gap:6px; }
.native-booking .ff label { font:500 12px/1.5 var(--font-sans); color:var(--text-body); }
.native-booking input, .native-booking select { min-width:0; }
.native-booking .demo-submit { margin:0; width:100%; }
.native-booking .demo-submit:disabled { opacity:.46; cursor:not-allowed; }
.booking-selection { min-height:50px; padding:12px 14px; border-radius:var(--radius-md); background:var(--tero-teal-50); color:var(--text-heading); font:500 13px/1.6 var(--font-sans); }
.booking-preview { margin:0; text-align:center; }
.native-booking .form-note { margin:0; font-size:11px; }
.booking-retry { font:500 13px var(--font-sans); color:var(--text-link); border:0; padding:8px 0; text-decoration:underline; background:transparent; cursor:pointer; }
.booking-retry[hidden] { display:none; }
[data-theme="dark"] .has-native-booking .native-booking { background:var(--surface-card); }
[data-theme="dark"] .booking-details { background:rgba(0,0,0,.12); }
[data-theme="dark"] .booking-date:not(:disabled), [data-theme="dark"] .booking-time { background:var(--surface-sunken); }
[data-theme="dark"] .booking-date[aria-pressed="true"], [data-theme="dark"] .booking-time[aria-pressed="true"] { background:var(--brand-hover); color:var(--surface-sunken); border-color:var(--brand-hover); }
[data-theme="dark"] .booking-selection { background:var(--surface-sunken); }
@media(max-width:760px) {
  .has-native-booking .demo-form.native-booking { grid-template-columns:minmax(0,1fr); max-width:460px; }
  .booking-scheduler, .booking-details { padding:22px; }
  .booking-details { border-left:0; border-top:1px solid var(--gray-200); }
  .has-native-booking .cta-card { padding:36px 16px; }
}
@media(max-width:420px) { .booking-times { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:380px) { .booking-scheduler, .booking-details { padding:16px; } .booking-calendar { gap:2px; } }

.has-native-booking .demo-form.native-booking.booking-is-confirmed { grid-template-columns: minmax(0,1fr); max-width: 620px; margin-inline: auto; }
.native-booking.booking-is-confirmed .booking-details { grid-column: 1 / -1; border: 0; padding: clamp(22px,4vw,36px); align-items: stretch; text-align: left; }
.native-booking.booking-is-confirmed .booking-preview { text-align: left; }
.native-booking [hidden] { display: none !important; }