.sbb-booking [hidden] { display: none !important; } .sbb-booking input::placeholder,
.sbb-booking textarea::placeholder {
color: var(--sbb-placeholder) !important;
-webkit-text-fill-color: var(--sbb-placeholder) !important;
opacity: 1 !important;
}
.sbb-booking input:focus,
.sbb-booking select:focus,
.sbb-booking textarea:focus {
border-color: var(--sbb-accent) !important;
box-shadow: 0 0 0 3px var(--sbb-accent-ring) !important;
}
.sbb-booking input[aria-invalid="true"],
.sbb-booking select[aria-invalid="true"],
.sbb-booking textarea[aria-invalid="true"] {
border-color: var(--sbb-error) !important;
} .sbb-booking input:-webkit-autofill,
.sbb-booking input:-webkit-autofill:hover,
.sbb-booking input:-webkit-autofill:focus,
.sbb-booking textarea:-webkit-autofill,
.sbb-booking select:-webkit-autofill {
-webkit-text-fill-color: var(--sbb-text) !important;
-webkit-box-shadow: 0 0 0 1000px var(--sbb-surface) inset !important;
caret-color: var(--sbb-text) !important;
}
.sbb-booking__select-wrap::after {
content: "" !important;
position: absolute !important;
right: 18px !important;
top: 50% !important;
width: 10px !important;
height: 10px !important;
transform: translateY(-65%) rotate(45deg) !important;
border-right: 2px solid var(--sbb-accent) !important;
border-bottom: 2px solid var(--sbb-accent) !important;
pointer-events: none !important;
}
.sbb-booking__check input:checked + .sbb-booking__check-box {
background: var(--sbb-accent) !important;
border-color: var(--sbb-accent) !important;
}
.sbb-booking__check input:checked + .sbb-booking__check-box::after {
content: "" !important;
position: absolute !important;
left: 5px !important;
top: 1px !important;
width: 6px !important;
height: 11px !important;
border-right: 2px solid var(--sbb-accent-text) !important;
border-bottom: 2px solid var(--sbb-accent-text) !important;
transform: rotate(45deg) !important;
}
.sbb-booking__check input:focus-visible + .sbb-booking__check-box {
box-shadow: 0 0 0 3px var(--sbb-accent-ring) !important;
} .sbb-booking__radio:hover {
border-color: var(--sbb-border-strong) !important;
}
.sbb-booking__radio:has(input:checked) {
border-color: var(--sbb-accent) !important;
background: var(--sbb-accent-soft) !important;
}
.sbb-booking__radio input:checked + .sbb-booking__radio-dot {
border-color: var(--sbb-accent) !important;
background: radial-gradient(circle, var(--sbb-accent) 0 45%, transparent 46%) !important;
}
.sbb-booking__radio input:focus-visible + .sbb-booking__radio-dot {
box-shadow: 0 0 0 3px var(--sbb-accent-ring) !important;
} .sbb-booking__chip.is-active {
background: var(--sbb-accent-soft) !important;
border-color: var(--sbb-accent-ring) !important;
color: var(--sbb-text) !important;
}
.sbb-booking__chip.is-active .sbb-booking__chip-n {
background: var(--sbb-accent) !important;
color: var(--sbb-accent-text) !important;
}
.sbb-booking__chip.is-done {
background: var(--sbb-success-soft) !important;
border-color: var(--sbb-success) !important;
color: var(--sbb-text) !important;
}
.sbb-booking__chip.is-done .sbb-booking__chip-n {
background: var(--sbb-success) !important;
color: #fff !important;
} .sbb-booking__step { transition: opacity 200ms cubic-bezier(0.22, 0.61, 0.36, 1) !important; }
.sbb-booking__step.is-fading-out { opacity: 0 !important; }
.sbb-booking__step.is-fading-in {
opacity: 0 !important;
animation: sbbFadeIn 200ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards !important;
}
@keyframes sbbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.sbb-booking__step,
.sbb-booking__btn,
.sbb-booking__slot,
.sbb-booking__cal-day { transition: none !important; animation: none !important; }
.sbb-booking__step.is-fading-in { opacity: 1 !important; }
} .sbb-booking__btn { transition: transform 240ms ease, filter 240ms ease, box-shadow 240ms ease, opacity 240ms ease !important; }
.sbb-booking__btn--primary:hover:not(:disabled) {
transform: translateY(-2px) !important;
background: var(--sbb-accent-hover) !important;
box-shadow: 0 18px 38px -10px var(--sbb-accent-shadow) !important;
}
.sbb-booking__btn--ghost:hover:not(:disabled) { background: var(--sbb-overlay) !important; }
.sbb-booking__btn:focus-visible { outline: 2px solid var(--sbb-accent) !important; outline-offset: 2px !important; }
.sbb-booking__btn:disabled,
.sbb-booking__btn[disabled] { opacity: 0.5 !important; cursor: not-allowed !important; transform: none !important; }
.sbb-booking__btn.is-loading { pointer-events: none !important; opacity: 0.7 !important; } .sbb-booking__cal-arrow {
outline: none !important;
-webkit-appearance: none !important;
appearance: none !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 200ms ease, border-color 200ms ease !important;
}
.sbb-booking__cal-arrow:hover:not(:disabled) {
background: var(--sbb-overlay) !important;
border-color: var(--sbb-border-strong) !important;
}
.sbb-booking__cal-arrow:focus-visible {
box-shadow: 0 0 0 2px var(--sbb-accent-ring) !important;
border-color: var(--sbb-accent) !important;
}
.sbb-booking__cal-arrow:disabled { opacity: 0.35 !important; cursor: not-allowed !important; } .sbb-booking__cal-day {
height: 40px !important;
width: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 1px solid transparent !important;
color: var(--sbb-text) !important;
font-size: 14px !important;
font-weight: 500 !important;
font-family: inherit !important;
border-radius: 10px !important;
cursor: pointer !important;
box-sizing: border-box !important;
padding: 0 !important;
outline: none !important;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease !important;
}
.sbb-booking__cal-day:focus-visible { box-shadow: 0 0 0 2px var(--sbb-accent-ring) !important; }
.sbb-booking__cal-day.is-out { color: var(--sbb-border-strong) !important; cursor: default !important; }
.sbb-booking__cal-day.is-disabled,
.sbb-booking__cal-day[disabled] { color: var(--sbb-border-strong) !important; cursor: not-allowed !important; }
.sbb-booking__cal-day.is-has-slots { border-color: var(--sbb-accent-ring) !important; color: var(--sbb-text) !important; }
.sbb-booking__cal-day.is-has-slots:hover { background: var(--sbb-accent-soft) !important; border-color: var(--sbb-accent) !important; }
.sbb-booking__cal-day.is-today { border-color: var(--sbb-border-strong) !important; }
.sbb-booking__cal-day.is-selected {
background: var(--sbb-accent) !important;
color: var(--sbb-accent-text) !important;
border-color: var(--sbb-accent) !important;
font-weight: 700 !important;
}
.sbb-booking__cal-day.is-selected:hover { background: var(--sbb-accent-hover) !important; } .sbb-booking__slot {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 12px 14px !important;
background: transparent !important;
border: 1px solid var(--sbb-border) !important;
border-radius: var(--sbb-radius-field) !important;
color: var(--sbb-text) !important;
cursor: pointer !important;
font-size: 14px !important;
font-weight: 600 !important;
font-family: inherit !important;
width: 100% !important;
box-sizing: border-box !important;
transition: background 240ms ease, border-color 240ms ease !important;
}
.sbb-booking__slot:hover { background: var(--sbb-accent-soft) !important; border-color: var(--sbb-accent-ring) !important; }
.sbb-booking__slot:focus-visible { outline: 2px solid var(--sbb-accent) !important; outline-offset: 2px !important; }
.sbb-booking__slot.is-selected {
background: var(--sbb-accent) !important;
border-color: var(--sbb-accent) !important;
color: var(--sbb-accent-text) !important;
}
.sbb-booking__slot-min {
font-size: 11px !important;
font-weight: 500 !important;
padding: 2px 8px !important;
border-radius: 999px !important;
background: var(--sbb-overlay) !important;
color: var(--sbb-text-soft) !important;
}
.sbb-booking__slot.is-selected .sbb-booking__slot-min {
background: rgba(255, 255, 255, 0.2) !important;
color: var(--sbb-accent-text) !important;
}
.sbb-booking__slots-empty {
padding: 18px !important;
border-radius: var(--sbb-radius-field) !important;
background: var(--sbb-overlay) !important;
color: var(--sbb-text-soft) !important;
font-size: 13px !important;
text-align: center !important;
list-style: none !important;
grid-column: 1 / -1 !important;
} .sbb-booking__sum-row {
display: flex !important;
justify-content: space-between !important;
gap: 12px !important;
flex-wrap: wrap !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--sbb-border) !important;
}
.sbb-booking__sum-row:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
.sbb-booking__sum-k {
font-size: 11px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--sbb-text-soft) !important;
font-weight: 600 !important;
}
.sbb-booking__sum-v {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--sbb-text) !important;
text-align: right !important;
max-width: 60% !important;
word-break: break-word !important;
} .sbb-booking__toast { transition: opacity 200ms ease, transform 200ms ease !important; }
.sbb-booking__toast.is-visible {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) !important;
pointer-events: auto !important;
}
.sbb-booking__toast.is-error { background: var(--sbb-error) !important; color: #fff !important; }
.sbb-booking__toast.is-success { background: var(--sbb-success) !important; color: #fff !important; } @media (min-width: 860px) {
.sbb-booking__cal-body { grid-template-columns: 1.15fr 1fr !important; align-items: start !important; }
}
@media (max-width: 720px) {
.sbb-booking { padding: 20px !important; }
.sbb-booking__title { font-size: 22px !important; }
.sbb-booking__grid { grid-template-columns: 1fr !important; }
.sbb-booking__nav { flex-direction: column !important; align-items: stretch !important; }
.sbb-booking__nav .sbb-booking__btn { width: 100% !important; }
.sbb-booking__hint { order: 2 !important; text-align: center !important; }
.sbb-booking__slots-list { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important; }
}