.slot-calendar-native { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.slot-calendar { width: 100%; box-sizing: border-box; margin-top: 8px; padding: 14px; border: 1px solid color-mix(in srgb, var(--cz-blue, #466978) 20%, #dce3e5); border-radius: 17px; background: #fff; box-shadow: 0 12px 30px rgba(48, 66, 72, .07); }
.slot-calendar-toolbar { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 8px; margin-bottom: 12px; }
.slot-calendar-period { text-align: center; text-transform: capitalize; font-size: .9rem; }
.slot-calendar-arrow, .slot-calendar-back { border: 0; color: var(--cz-blue, #466978); background: color-mix(in srgb, var(--cz-blue, #466978) 8%, white); cursor: pointer; }
.slot-calendar-arrow { width: 34px; height: 34px; border-radius: 50%; font-size: 1.35rem; }
.slot-calendar-arrow:disabled { opacity: .3; cursor: default; }
.slot-calendar-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.slot-calendar-month-panel { min-width: 0; padding: 11px; border: 1px solid color-mix(in srgb, var(--cz-blue, #466978) 10%, #e5eaec); border-radius: 13px; background: color-mix(in srgb, var(--cz-blue, #466978) 2%, white); }
.slot-calendar-month { display: block; margin-bottom: 9px; text-align: center; text-transform: capitalize; font-size: .8rem; }
.slot-calendar-weekdays, .slot-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.slot-calendar-weekdays { margin-bottom: 4px; color: var(--cz-muted, #708086); font-size: .58rem; font-weight: 750; text-align: center; }
.slot-calendar-day { width: 100%; height: 31px; padding: 0; border: 0; border-radius: 8px; color: #9aa5a8; background: transparent; font-size: .72rem; }
.slot-calendar-day.has-slots { color: var(--cz-blue, #385d6c); background: color-mix(in srgb, var(--cz-blue, #466978) 10%, white); font-weight: 750; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cz-blue, #466978) 16%, transparent); }
.slot-calendar-day.has-slots:hover, .slot-calendar-day.is-selected { color: #fff; background: var(--cz-coral, #dc765e); box-shadow: none; }
.slot-calendar-hint { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; color: var(--cz-muted, #708086); font-size: .65rem; }
.slot-calendar-hint span {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--cz-blue, #466978) 10%, white);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cz-blue, #466978) 16%, transparent);
}
.slot-calendar-clear { width: 100%; margin-top: 10px; padding: 9px 12px; border: 1px solid #dce3e5; border-radius: 10px; color: var(--cz-muted, #708086); background: #fff; font-size: .72rem; font-weight: 700; cursor: pointer; }
.slot-calendar-clear:hover { border-color: var(--cz-blue, #466978); color: var(--cz-blue, #466978); }
.slot-calendar-day-view { min-height: 220px; }
.slot-calendar-back { padding: 7px 10px; border-radius: 9px; font-size: .72rem; font-weight: 700; }
.slot-calendar-day-heading { display: grid; gap: 2px; margin: 18px 0 13px; }
.slot-calendar-day-heading small { color: var(--cz-muted, #708086); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.slot-calendar-day-heading strong { font-size: 1rem; text-transform: capitalize; }
.slot-calendar-times { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; }
.slot-calendar-time { display: flex; justify-content: center; padding: 10px 7px; border: 1px solid #dce3e5; border-radius: 11px; color: #385d6c; background: #fff; font-size: .76rem; font-weight: 750; cursor: pointer; }
.slot-calendar-time input { position: absolute; opacity: 0; pointer-events: none; }
.slot-calendar-time:hover, .slot-calendar-time.is-selected { border-color: var(--cz-coral, #dc765e); color: #fff; background: var(--cz-coral, #dc765e); }
.family-booking-form.has-slot-calendar,
.family-booking-inline-form.has-slot-calendar { display: block; width: 100%; }
.family-booking-form.has-slot-calendar > .form-field,
.family-booking-inline-form.has-slot-calendar > .slot-calendar { grid-column: 1 / -1; width: 100%; }
.family-booking-inline-form.has-slot-calendar > .button { float: right; margin-top: 10px; }
.booking-state-panel.is-action.has-slot-calendar { grid-template-columns: 1fr; }
@media (max-width: 480px) {
    .slot-calendar { padding: 10px; }
    .slot-calendar-month-panel { padding: 8px; }
    .slot-calendar-months { grid-template-columns: 1fr; }
    .slot-calendar-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .family-booking-inline-form.has-slot-calendar > .button { width: 100%; }
}