/* Theme-aware category colors. Geometry stays in the original category styles. */
.sbs-booking-container {
    --yatoon-category-active: var(--primary-color, #db2777);
    --yatoon-category-contrast: var(--yatoon-scheme-primary-text, #fff);
    --yatoon-header-surface: var(--y4-surface, var(--yatoon-scheme-surface, var(--sbs-surface, #fff)));
    --yatoon-header-text: var(--y4-text, var(--yatoon-scheme-text, #172033));
    --yatoon-header-muted: var(--y4-muted, var(--yatoon-scheme-muted, #667085));
    --yatoon-header-border: color-mix(in srgb, var(--primary-color, #db2777) 18%, var(--y4-border, var(--yatoon-scheme-border, #e4e7ec)));
    --yatoon-header-soft: color-mix(in srgb, var(--primary-color, #db2777) 6%, var(--yatoon-header-surface));
    --yatoon-header-radius: 20px;
    --yatoon-header-control-radius: min(14px, var(--yatoon-header-radius));
    --yatoon-header-shadow: 0 6px 24px color-mix(in srgb, var(--primary-color, #db2777) 8%, transparent);
    --yatoon-header-content-gap: 24px;
}
.sbs-booking-container.yatoon-template-beauty { --yatoon-header-radius: 14px; }
.sbs-booking-container.yatoon-template-clean { --yatoon-header-radius: 8px; --yatoon-header-shadow: none; }
.sbs-booking-container.yatoon-template-luxury { --yatoon-header-radius: 4px; }
.sbs-booking-container.yatoon-template-modern { --yatoon-header-radius: 16px; }
.sbs-booking-container.yatoon-template-festive-red { --yatoon-header-radius: 14px; }
.sbs-booking-container.yatoon-template-halloween { --yatoon-header-radius: 12px; }
.sbs-booking-container.yatoon-template-emerald { --yatoon-header-radius: 13px; }
.sbs-booking-container.yatoon-template-custom {
    --yatoon-header-surface: var(--yatoon-scheme-surface, var(--sbs-plugin-card-bg, var(--yatoon-skin-card-bg, #fff)));
    --yatoon-header-text: var(--yatoon-scheme-text, var(--sbs-text, var(--y4-text, #172033)));
    --yatoon-header-border: var(--yatoon-scheme-border, var(--yatoon-skin-border, #e4e7ec));
    --yatoon-header-radius: var(--sbs-card-radius, 14px);
    --yatoon-header-control-radius: var(--sbs-btn-radius, 12px);
}
body .sbs-booking-container .sbs-category-tabs .sbs-cat-tab[data-cat]:not(.active):not(:hover):not(:focus-visible):not(.is-hover),
body .sbs-booking-container .sbs-category-tabs #sbs-cat-more-btn:not(.has-active):not(:hover):not(:focus-visible),
body .sbs-booking-container #sbs-cat-more-dropdown .sbs-cat-dropdown-item {
    background: var(--yatoon-header-surface) !important;
    border-color: var(--yatoon-header-border) !important;
    color: var(--yatoon-header-text) !important;
}
body .sbs-booking-container .sbs-category-tabs .sbs-cat-tab[data-cat]:is(.active, :hover, :focus-visible, .is-hover),
body.sbs-booking-immersive .sbs-booking-container .sbs-category-tabs .sbs-cat-tab[data-cat]:is(.active, :hover, :focus-visible, .is-hover),
body .sbs-booking-container .sbs-category-tabs #sbs-cat-more-btn:is(.has-active, :hover, :focus-visible),
body.sbs-booking-immersive .sbs-booking-container .sbs-category-tabs #sbs-cat-more-btn:is(.has-active, :hover, :focus-visible),
body .sbs-booking-container #sbs-cat-more-dropdown .sbs-cat-dropdown-item:is(.active, :hover, :focus-visible, :active, .is-hover) {
    background: var(--yatoon-category-active) !important;
    border-color: var(--yatoon-category-active) !important;
    color: var(--yatoon-category-contrast) !important;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--yatoon-category-active) 18%, transparent) !important;
}
body .sbs-booking-container #sbs-cat-more-dropdown {
    background: var(--yatoon-header-surface) !important;
    border-color: var(--yatoon-header-border) !important;
}
body .sbs-booking-container :is(.sbs-cat-tab, .sbs-cat-dropdown-item):focus-visible {
    outline: 2px solid var(--yatoon-category-active) !important;
    outline-offset: 3px;
}

/* A compact storefront header, with controls independent of branding. */
body .sbs-booking-container .sbs-storefront-header {
    position: relative; z-index: 10002; display: none;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    margin: 0 !important; padding: 16px 18px;
    border: 1px solid var(--yatoon-header-border); border-radius: var(--yatoon-header-radius);
    background: var(--yatoon-header-surface); color: var(--yatoon-header-text);
    box-shadow: var(--yatoon-scheme-shadow, var(--yatoon-header-shadow)); overflow: visible; font-family: inherit;
}
body .sbs-booking-container .sbs-booking-main:has(.sbs-form-step.sbs-step-1.active) > .sbs-storefront-header { display: grid; }
body .sbs-booking-container .sbs-booking-main:has(.sbs-form-step.sbs-step-1.active) > .sbs-storefront-header-tools-only { display: grid; }
/* Keep the gap inside the following section so it cannot collapse between
   the header and the first appointment-type card in mobile WebKit layouts. */
body .sbs-booking-container .sbs-booking-main:has(> .sbs-storefront-header) .sbs-form-step.sbs-step-1 { padding-top: var(--yatoon-header-content-gap) !important; }
body .sbs-booking-container .sbs-header-logo { grid-column: 1; grid-row: 1; min-width: 0; justify-self: start; }
body .sbs-booking-container .sbs-header-logo img {
    display: block; width: 56px; max-width: 100%; height: 44px;
    object-fit: contain; padding: 0; box-sizing: border-box;
    background: transparent; border: 0; border-radius: 0;
}
body .sbs-booking-container .sbs-header-name {
    grid-column: 2; grid-row: 1; max-width: 100%; overflow-wrap: anywhere;
    color: var(--yatoon-header-text); font: inherit; font-size: 23px;
    font-weight: 800; line-height: 1.25; text-align: start; letter-spacing: -.025em;
}
body .sbs-booking-container .sbs-storefront-header:not(:has(.sbs-header-logo)) .sbs-header-name { grid-column: 1 / 3; }
body .sbs-booking-container .sbs-header-tools {
    grid-column: 3; grid-row: 1; display: flex; align-items: center;
    justify-content: flex-end; flex-wrap: wrap; gap: 10px; min-width: 0;
}
body .sbs-booking-container .sbs-header-subrow { display: contents; }
body .sbs-booking-container .sbs-header-hours-status {
    grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; gap: 8px;
    min-width: 0; min-height: 38px; box-sizing: border-box; padding: 8px 11px;
    border-radius: var(--yatoon-header-control-radius); background: var(--yatoon-header-soft);
    color: var(--yatoon-header-muted); font-size: 13px; font-weight: 650; line-height: 1.45;
    white-space: normal; overflow-wrap: anywhere;
}
body .sbs-booking-container .sbs-header-hours-status.is-closed { color: var(--yatoon-header-muted); }
body .sbs-booking-container .sbs-header-hours-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #16a05d; }
body .sbs-booking-container .sbs-header-hours-status.is-closed .sbs-header-hours-dot { background: #98a2b3; }
body .sbs-booking-container .sbs-header-status-badge {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; max-width: 100%;
    min-height: 30px; box-sizing: border-box; padding: 4px 9px;
    border: 1px solid color-mix(in srgb, #16a05d 35%, var(--yatoon-header-surface)); border-radius: var(--yatoon-header-control-radius);
    background: color-mix(in srgb, #16a05d 12%, var(--yatoon-header-surface)); color: var(--yatoon-header-text);
    font: inherit; font-weight: 750; white-space: normal;
}
/* 4.9.0: the "closed" badge follows the booking theme instead of a fixed orange.
   The accent mixes in the text colour so the dot and outline stay visible when the
   theme colour is very dark (for example near-black on a dark background). */
body .sbs-booking-container .sbs-header-hours-status.is-closed .sbs-header-status-badge {
    --yatoon-header-accent: color-mix(in srgb, var(--primary-color, #db2777) 72%, var(--yatoon-header-text));
    background: color-mix(in srgb, var(--yatoon-header-accent) 14%, var(--yatoon-header-surface));
    border-color: color-mix(in srgb, var(--yatoon-header-accent) 38%, var(--yatoon-header-surface));
    color: var(--yatoon-header-text);
}
body .sbs-booking-container .sbs-header-hours-status.is-closed .sbs-header-status-badge .sbs-header-hours-dot {
    background: var(--yatoon-header-accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--yatoon-header-text) 22%, transparent);
}
body .sbs-booking-container .sbs-header-status-detail { min-width: 0; color: var(--yatoon-header-muted); }
body .sbs-booking-container .sbs-storefront-header-tools-only { grid-template-columns: minmax(0, 1fr) auto; }
body .sbs-booking-container .sbs-storefront-header-tools-only .sbs-header-tools { grid-column: 2; }
/* The stepper is intentionally hidden on the first step, but its reserved
   box was leaving a large blank band above the new storefront controls. */
body .sbs-booking-container .sbs-booking-main > #sbs-progress-bar.sbs-progress-bar-reserved:has(+ .sbs-storefront-header):has(~ .sbs-form-step.sbs-step-1.active) {
    box-sizing: border-box !important; height: 8px !important; min-height: 8px !important; max-height: 8px !important;
    margin: 8px 0 3px !important; padding: 0 10px !important; overflow: hidden !important;
}
body .sbs-booking-container .sbs-header-language { margin: 0 !important; min-width: 0 !important; max-width: 180px !important; width: max-content !important; flex: 0 0 auto !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-icon {
    position: relative !important; width: 48px !important; min-width: 48px !important;
    flex: 0 0 48px; margin: 0 !important; overflow: visible !important;
}
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-icon > .sbs-signin-trigger,
body .sbs-booking-container .sbs-header-account > summary {
    position: relative; display: flex !important; align-items: center !important; justify-content: center !important;
    width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important;
    padding: 10px !important; margin: 0 !important; box-sizing: border-box;
    border: 1px solid var(--yatoon-header-border) !important; border-radius: var(--yatoon-header-control-radius) !important;
    background: var(--yatoon-header-surface) !important; color: var(--yatoon-header-text) !important;
    box-shadow: none !important; cursor: pointer; list-style: none;
}
body .sbs-booking-container .sbs-header-account > summary::-webkit-details-marker { display: none; }
body .sbs-booking-container .sbs-header-tools svg { width: 24px !important; height: 24px !important; flex-shrink: 0; }
body .sbs-booking-container .sbs-header-account { position: relative; margin: 0; }
body .sbs-booking-container .sbs-header-account-dot { position: absolute; inset-inline-end: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #059669; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-icon > .sbs-signin-options,
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text > .sbs-signin-options,
body .sbs-booking-container .sbs-header-account-panel {
    position: absolute !important; z-index: 10003; top: calc(100% + 10px) !important;
    inset-inline-end: 0 !important; inset-inline-start: auto !important; width: min(300px, calc(100vw - 60px)) !important;
    box-sizing: border-box; margin: 0 !important; padding: 14px !important;
    border: 1px solid var(--yatoon-header-border) !important; border-radius: var(--yatoon-header-radius) !important;
    background: var(--yatoon-header-surface) !important; color: var(--yatoon-header-text) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .16) !important;
}
body .sbs-booking-container .sbs-header-account-panel { display: grid; gap: 12px; }
body .sbs-booking-container .sbs-header-account:not([open]) .sbs-header-account-panel { display: none; }
body .sbs-booking-container .sbs-header-account-panel a,
body .sbs-booking-container .sbs-header-account-panel button {
    display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; margin: 0;
    border: 1px solid var(--yatoon-header-border); border-radius: var(--yatoon-header-control-radius);
    background: var(--yatoon-header-surface); color: var(--yatoon-header-text);
    font: inherit; font-size: 14px; font-weight: 650; text-decoration: none; text-align: start; cursor: pointer;
}
body .sbs-booking-container .sbs-header-account-panel form { margin: 0; }
body .sbs-booking-container .sbs-header-tools :is(select, summary, button, a):focus-visible {
    outline: 2px solid var(--yatoon-category-active) !important; outline-offset: 3px;
}
body .sbs-booking-container .sbs-signin-mobile-icon, body .sbs-booking-container .sbs-signin-mobile-label, body .sbs-booking-container .sbs-signin-mobile-label-short, body .sbs-booking-container .sbs-signin-mobile-chevron { display: none; }
body .sbs-booking-container .sbs-header-tools .screen-reader-text {
    position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
    margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important;
}
@media (max-width: 760px) {
    body .sbs-booking-container { --yatoon-header-content-gap: 18px; }
    body .sbs-booking-container .sbs-storefront-header {
        grid-template-columns: 40px minmax(0, 1fr) auto 40px; gap: 8px; padding: 10px 12px;
        border-radius: var(--yatoon-header-radius); box-shadow: var(--yatoon-scheme-shadow, var(--yatoon-header-shadow));
    }
    body .sbs-booking-container .sbs-header-logo { grid-column: 1; grid-row: 1; z-index: 1; }
    body .sbs-booking-container .sbs-header-logo img { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0; background: transparent; }
    body .sbs-booking-container .sbs-header-name { grid-column: 2; grid-row: 1; justify-self: start; max-width: 100%; font-size: 20px; text-align: start; letter-spacing: -.025em; }
    body .sbs-booking-container .sbs-storefront-header:not(:has(.sbs-header-logo)) .sbs-header-name { grid-column: 1 / 3; }
    body .sbs-booking-container .sbs-header-tools { display: contents; }
    body .sbs-booking-container .sbs-header-subrow { display: contents; }
    body .sbs-booking-container .sbs-header-hours-status { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
    body .sbs-booking-container .sbs-header-hours-status { font-size: 12.5px; }
    body .sbs-booking-container .sbs-header-language { position: relative; grid-column: 3; grid-row: 1; justify-self: end; width: max-content !important; max-width: 140px !important; flex: 0 0 auto !important; }
    body .sbs-booking-container .sbs-header-tools :is(.sbs-signin-menu-icon, .sbs-signin-menu-header-text, .sbs-header-account) { grid-column: 4; grid-row: 1; justify-self: end; }
    body .sbs-booking-container .sbs-storefront-header:has(.sbs-signin-menu-header-text, .sbs-header-account-text) { grid-template-columns: 40px minmax(0, 1fr) auto 40px; }
    body .sbs-booking-container .sbs-storefront-header:not(:has(.sbs-signin-menu-icon, .sbs-signin-menu-header-text, .sbs-header-account)) .sbs-header-language { grid-column: 3 / -1; }
    body .sbs-booking-container .sbs-storefront-header-tools-only { grid-template-columns: minmax(0, 1fr) auto 40px; }
    body .sbs-booking-container .sbs-storefront-header-tools-only .sbs-header-hours-status { grid-column: 1 / -1; grid-row: 2; }
    body .sbs-booking-container .sbs-storefront-header-tools-only .sbs-header-language { grid-column: 2; grid-row: 1; }
    body .sbs-booking-container .sbs-storefront-header-tools-only .sbs-header-tools :is(.sbs-signin-menu-icon, .sbs-signin-menu-header-text, .sbs-header-account) { grid-column: 3; grid-row: 1; }
    body .sbs-booking-container .sbs-storefront-header-tools-only:has(.sbs-signin-menu-header-text, .sbs-header-account-text) { grid-template-columns: minmax(0, 1fr) auto 40px; }
    body .sbs-booking-container .sbs-storefront-header-tools-only:not(:has(.sbs-signin-menu-icon, .sbs-signin-menu-header-text, .sbs-header-account)) .sbs-header-language { grid-column: 2 / -1; }
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-icon { width: 40px !important; min-width: 40px !important; flex: 0 0 40px !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-icon > .sbs-signin-trigger { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 8px !important; gap: 0; border-radius: var(--yatoon-header-control-radius) !important; background: var(--yatoon-header-surface) !important; color: var(--yatoon-header-text) !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-icon > .sbs-signin-trigger > svg { display: block !important; width: 22px !important; height: 22px !important; }
    body .sbs-booking-container .sbs-signin-mobile-icon,
    body .sbs-booking-container .sbs-signin-mobile-label,
    body .sbs-booking-container .sbs-signin-mobile-label-short,
    body .sbs-booking-container .sbs-signin-mobile-chevron { display: none !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-header-account > summary { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-text > summary { width: max-content !important; min-width: 0 !important; max-width: 100% !important; height: 40px !important; min-height: 40px !important; padding: 8px 10px !important; font-size: 12px !important; white-space: normal; }
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-text > summary { width: 40px !important; max-width: 40px !important; padding: 8px !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-text .sbs-header-account-label,
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-signin-trigger-label,
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-signin-chevron { display: none !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text { width: 40px; max-width: 40px !important; min-width: 40px; flex: 0 0 40px; }
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text > .sbs-signin-trigger { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 8px !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-header-signin-icon { display: inline-flex !important; width: 22px !important; height: 22px !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-header-signin-icon svg,
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-text > summary > svg { display: block !important; width: 22px !important; height: 22px !important; }
    body .sbs-booking-container .sbs-booking-main:has(> .sbs-storefront-header) .sbs-form-step.sbs-step-1 { padding-top: var(--yatoon-header-content-gap) !important; }
    body .sbs-booking-container .sbs-booking-main:has(> .sbs-storefront-header):has(.sbs-form-step.sbs-step-1.active) > #sbs-mobile-flow-header { display: none !important; }
    body .sbs-booking-container .sbs-category-tabs-wrap { margin-top: 8px !important; }
    body .sbs-booking-container .sbs-storefront-header-tools-only .sbs-header-tools { display: contents; }
    body .sbs-booking-container .sbs-header-tools .sbs-signin-optional-note,
    body .sbs-booking-container .sbs-signin-optional-note,
    body .sbs-booking-container .sbs-portal-banner-subtext { display: none !important; }
}

@media (max-width: 360px) {
    body .sbs-booking-container .sbs-signin-mobile-label { display: none; }
    body .sbs-booking-container .sbs-signin-mobile-label-short { display: inline; font-size: 12px; font-weight: 700; line-height: 1; }
}


/* Signed-in account dashboard modal. */
body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger {
    position: relative; display: inline-flex !important; align-items: center !important; justify-content: center !important;
    flex: 0 0 48px; width: 48px !important; min-width: 48px !important; height: 48px !important; min-height: 48px !important;
    box-sizing: border-box; margin: 0 !important; padding: 10px !important;
    border: 1px solid var(--yatoon-header-border) !important; border-radius: var(--yatoon-header-control-radius) !important;
    background: var(--yatoon-header-surface) !important; color: var(--yatoon-header-text) !important; box-shadow: none !important; cursor: pointer;
}
body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger svg { width: 24px !important; height: 24px !important; }
body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger-text { flex: 0 1 auto !important; width: max-content !important; min-width: 88px !important; max-width: 160px !important; gap: 8px !important; padding: 10px 12px !important; font: inherit !important; white-space: nowrap !important; }
body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger-text .sbs-header-account-label { display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5 !important; padding-block: 2px; }
body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger:is(:hover,:focus-visible) { background: var(--yatoon-header-soft) !important; border-color: var(--primary-color) !important; }
body .sbs-booking-container .sbs-booking-account-dialog {
    position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    box-sizing: border-box; width: min(820px, calc(100vw - 32px)); max-width: 820px;
    max-height: min(90dvh, 920px); margin: 0; padding: 0; overflow: hidden;
    border: 1px solid var(--y4-border, var(--yatoon-header-border)); border-radius: var(--sbs-card-radius, 20px);
    background: var(--y4-surface, var(--yatoon-header-surface)); color: var(--y4-text, var(--yatoon-header-text));
    box-shadow: 0 24px 80px rgba(15,23,42,.28);
}
body .sbs-booking-container .sbs-booking-account-dialog::backdrop { background: rgba(15,23,42,.56); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body .sbs-booking-container .sbs-booking-account-content { box-sizing: border-box; max-height: min(90dvh, 920px); overflow: auto; padding: 20px; }
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap { max-width: none; margin: 0; color: var(--y4-text, var(--yatoon-header-text)); }
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-card { margin: 0; padding: 28px 24px; border-color: var(--y4-border, var(--portal-border)); border-radius: var(--sbs-card-radius, 16px); background: var(--y4-surface, var(--portal-bg)); color: var(--y4-text, inherit); box-shadow: none; }
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-card .sbs-portal-header { padding-inline-end: 36px; }
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-btn-sm[data-action="reschedule"] { background: var(--portal-primary) !important; }
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-tabs { border-color: var(--y4-border, var(--portal-border)); }
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
body .sbs-booking-container .sbs-booking-account-close { position: absolute; top: 12px; right: 12px; z-index: 20; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 1px solid var(--y4-border,#e2e8f0); border-radius: 50%; background: var(--y4-surface,#fff); color: var(--y4-text,#334155); font-size: 22px; line-height: 1; font-family: inherit; cursor: pointer; }
body .sbs-booking-container .sbs-booking-account-close:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
@media (max-width: 640px) {
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger { grid-column: 4; grid-row: 1; justify-self: end; flex-basis: 40px; width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 8px !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger svg { width: 22px !important; height: 22px !important; }
    body .sbs-booking-container .sbs-storefront-header-tools-only .sbs-header-tools .sbs-header-account-trigger { grid-column: 3; }
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger-text { flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger-text .sbs-header-account-label { display: none !important; }
    body .sbs-booking-container .sbs-booking-account-dialog { inset: 0; transform: none; width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
    body .sbs-booking-container .sbs-booking-account-content { height: 100dvh; max-height: 100dvh; padding: 56px 12px 12px; }
    body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-card { padding: 20px 14px; }
    body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-card .sbs-portal-header { padding-inline-end: 0; }
    body .sbs-booking-container .sbs-booking-account-close { position: fixed; top: 8px; right: 8px; margin: 0; }
}

/* Both account presentations share the active booking theme. Provider logos
   and required provider button colours stay with their sign-in components. */
body .sbs-booking-container.yatoon-template-custom .sbs-storefront-header { font-family: var(--sbs-font, inherit); }
body .sbs-booking-container.yatoon-template-custom .sbs-header-name { font-family: var(--sbs-hfont, inherit); }
body .sbs-booking-container .sbs-storefront-header .sbs-signin-options {
    background: var(--yatoon-header-surface) !important; color: var(--yatoon-header-text) !important;
    border-color: var(--yatoon-header-border) !important; border-radius: var(--yatoon-header-radius) !important;
    box-shadow: var(--yatoon-scheme-shadow, var(--yatoon-header-shadow)) !important;
}
body .sbs-booking-container .sbs-storefront-header :is(.sbs-signin-options-title, .sbs-signin-return-note) { color: var(--yatoon-header-muted) !important; }
body .sbs-booking-container .sbs-storefront-header .sbs-code-signin,
body .sbs-booking-container .sbs-storefront-header .sbs-header-account-panel :is(a, button) {
    border-color: var(--yatoon-header-border) !important; border-radius: var(--yatoon-header-control-radius) !important;
    background: var(--yatoon-header-surface) !important; color: var(--yatoon-header-text) !important;
}
body .sbs-booking-container .sbs-storefront-header .sbs-code-signin:hover,
body .sbs-booking-container .sbs-storefront-header .sbs-header-account-panel :is(a, button):hover {
    background: var(--yatoon-header-soft) !important; border-color: var(--primary-color) !important;
}
body .sbs-booking-container .sbs-storefront-header .sbs-code-signin-icon {
    background: var(--yatoon-header-soft) !important; color: var(--yatoon-header-text) !important;
}
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text { position: relative; width: max-content; max-width: min(220px, calc(100vw - 120px)); min-width: 0; flex: 0 1 auto; margin: 0 !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text > .sbs-signin-trigger,
body .sbs-booking-container .sbs-header-tools .sbs-header-account-text > summary {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: max-content !important; min-width: 0 !important; max-width: 100% !important; height: 48px !important; min-height: 48px !important;
    padding: 10px 12px !important; box-sizing: border-box; overflow: hidden;
    border: 1px solid var(--yatoon-header-border) !important; border-radius: var(--yatoon-header-control-radius) !important;
    background: var(--yatoon-header-surface) !important; color: var(--yatoon-header-text) !important;
    font: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important;
    text-align: center; text-overflow: ellipsis; box-shadow: none !important; cursor: pointer;
}
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text > .sbs-signin-trigger { justify-content: flex-start !important; white-space: nowrap !important; text-align: start !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text > .sbs-signin-trigger::before,
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text > .sbs-signin-trigger::after { content: none !important; display: none !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-header-signin-icon,
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-header-signin-icon::before,
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-header-signin-icon::after { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: static !important; flex: 0 0 20px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; content: none !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-header-signin-icon svg { display: block !important; flex: 0 0 20px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-signin-trigger-label,
body .sbs-booking-container .sbs-header-account-text .sbs-header-account-label { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Leave room for font ascenders and descenders inside the ellipsis box. */
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-signin-trigger-label { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 2px 0 !important; line-height: 1.5 !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-signin-chevron { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: static !important; flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 0 0 2px !important; padding: 0 !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-signin-chevron svg { display: block !important; width: 18px !important; height: 18px !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-register { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 3px; padding: 9px 2px 1px; border-top: 1px solid var(--yatoon-header-border); color: var(--yatoon-header-muted); font-size: 12px; line-height: 1.4; text-align: center; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-register a { color: var(--primary-color); font-weight: 700; text-decoration: none; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-register a:hover { text-decoration: underline; }
body .sbs-booking-container .sbs-header-tools .sbs-header-account-text { min-width: 0; }
body .sbs-booking-container .sbs-header-tools .sbs-header-account-text > summary { width: max-content !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text > .sbs-signin-options { inset-inline-end: 0 !important; inset-inline-start: auto !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-signin-options { max-width: min(318px, calc(100vw - 36px)) !important; }
body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text > .sbs-signin-trigger:is(:hover, :focus-visible),
body .sbs-booking-container .sbs-header-tools .sbs-header-account-text > summary:is(:hover, :focus-visible) { background: var(--yatoon-header-soft) !important; border-color: var(--primary-color) !important; }
body .sbs-booking-container .sbs-storefront-header :is(button, a, summary, select):focus-visible { outline: 2px solid var(--primary-color) !important; outline-offset: 3px; }
body .sbs-booking-container .sbs-storefront-header :is(button, a, summary, select) { font-family: inherit !important; }
@media (max-width: 640px) {
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text { max-width: min(150px, calc(100vw - 205px)); }
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text > .sbs-signin-trigger,
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-text > summary { height: 40px !important; min-height: 40px !important; padding: 7px 8px !important; gap: 5px !important; font-size: 12px !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-header-signin-icon,
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text .sbs-header-signin-icon svg { width: 16px !important; min-width: 16px !important; height: 16px !important; min-height: 16px !important; }
}
@media (max-width: 360px) {
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text { max-width: min(112px, calc(100vw - 204px)); }
}

/* Keep the language selector and signed-in account control in one flex row on
   mobile. Flattening the tools wrapper into the outer grid let the controls
   occupy the same grid cell on some mobile Safari layouts. */
@media (max-width: 760px) {
    body .sbs-booking-container .sbs-storefront-header { grid-template-columns: 40px minmax(0, 1fr) auto !important; }
    body .sbs-booking-container .sbs-storefront-header-tools-only { grid-template-columns: minmax(0, 1fr) auto !important; }
    body .sbs-booking-container .sbs-header-tools,
    body .sbs-booking-container .sbs-storefront-header-tools-only .sbs-header-tools {
        display: flex !important; grid-column: 3 !important; grid-row: 1 !important;
        align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important;
        gap: 7px !important; width: max-content; max-width: 100%; min-width: 0;
    }
    body .sbs-booking-container .sbs-storefront-header-tools-only .sbs-header-tools { grid-column: 2 !important; }
    body .sbs-booking-container .sbs-header-subrow { display: contents !important; }
    body .sbs-booking-container .sbs-header-language {
        position: relative !important; grid-column: auto !important; grid-row: auto !important;
        width: auto !important; max-width: 108px !important; min-width: 0 !important; flex: 0 1 108px !important;
    }
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text > .sbs-signin-trigger {
        height: 40px !important; min-height: 40px !important; padding: 8px !important;
    }
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger,
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-icon,
    body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text { flex: 0 0 40px !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger { grid-column: auto !important; }
}

/* In the account dialog, reuse the active booking theme's main colors. */
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap {
    --portal-primary: var(--primary-color, var(--yatoon-header-text));
    --portal-border: var(--y4-border, var(--yatoon-header-border));
    --portal-bg: var(--y4-surface, var(--yatoon-header-surface));
    --portal-muted: var(--y4-muted, var(--yatoon-header-muted));
    --portal-surface2: var(--y4-surface-raised, var(--yatoon-header-soft));
}
body .sbs-booking-container .sbs-booking-account-dialog {
    border-radius: var(--sbs-card-radius, var(--yatoon-header-radius, 20px));
}
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-card {
    border-radius: var(--sbs-card-radius, var(--yatoon-header-radius, 16px));
}
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap .sbs-portal-tabs .sbs-portal-tab.active {
    background: var(--primary-color, var(--yatoon-header-text)) !important;
    border-color: var(--primary-color, var(--yatoon-header-text)) !important;
    color: var(--yatoon-scheme-primary-text, #fff) !important;
}
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap .sbs-portal-stat .value,
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap .sbs-portal-link { color: var(--primary-color, var(--yatoon-header-text)) !important; }

/* Explicit surfaces beat old polish layers in both light and dark account views. */
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap {
    --portal-text: var(--y4-text, var(--yatoon-header-text));
}
body .sbs-booking-container .sbs-booking-account-dialog,
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-card,
body dialog.sbs-portal-theme-modal {
    background: var(--portal-bg, var(--yatoon-header-surface, #fff)) !important;
    color: var(--portal-text, var(--yatoon-header-text, #172033)) !important;
}
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap :is(.sbs-portal-stat,.sbs-portal-tabs,.sbs-portal-next,.sbs-portal-booking,.sbs-portal-link-account) {
    background: var(--portal-surface2) !important; border-color: var(--portal-border) !important;
}
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap :is(h2,h3,.service-name,.sbs-portal-next strong,.sbs-portal-completion label),
body dialog.sbs-portal-theme-modal :is(h3,label,.sbs-change-service-choice strong) { color: var(--portal-text) !important; }
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap :is(.greeting,.subtitle,.sbs-portal-stat .label,.sbs-portal-empty,.sbs-portal-tab:not(.active),.sbs-portal-next span:not(.sbs-status-badge)),
body dialog.sbs-portal-theme-modal .sbs-change-service-choice span { color: var(--portal-muted) !important; }
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap :is(input,textarea,select,.sbs-portal-btn-outline),
body dialog.sbs-portal-theme-modal :is(input,select,textarea,.sbs-portal-slot,.sbs-change-service-choice) {
    background: var(--portal-bg) !important; color: var(--portal-text) !important; border-color: var(--portal-border) !important;
}
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap .sbs-portal-book-new a { border-color: var(--portal-primary) !important; color: var(--portal-primary) !important; }
body dialog.sbs-portal-theme-modal :is(.sbs-portal-slot.selected,.sbs-change-service-choice.selected) { border-color: var(--portal-primary) !important; box-shadow: inset 0 0 0 1px var(--portal-primary) !important; }
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-completion label { display: block; font-size: 13px; font-weight: 650; text-align: start; }
@media (min-width: 641px) and (max-width: 760px) {
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger-text { flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 8px !important; }
    body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger-text .sbs-header-account-label { display: none !important; }
}
body dialog.sbs-portal-theme-modal :is(.sbs-portal-slot,.sbs-change-service-choice):is(:hover,:focus-visible,.selected) { background: var(--portal-surface2, var(--portal-bg)) !important; color: var(--portal-text) !important; border-color: var(--portal-primary) !important; }
body .sbs-booking-container .sbs-booking-account-dialog .sbs-portal-wrap .sbs-portal-tabs .sbs-portal-tab.active { color: var(--yatoon-category-contrast, var(--yatoon-scheme-primary-text, #fff)) !important; }

/* Compact language and account tools, with local SVG flags on every platform. */
html body .sbs-booking-container .sbs-header-language {
    position: relative !important; flex: 0 0 auto !important;
    width: max-content !important; max-width: none !important;
    color: var(--yatoon-header-text);
}
html body .sbs-booking-container .sbs-header-language::before,
html body .sbs-booking-container .sbs-header-language::after { content: none !important; display: none !important; }
html body .sbs-booking-container .sbs-language-picker { position: relative; margin: 0; padding: 0; border: 0; }
html body .sbs-booking-container .sbs-language-trigger {
    display: flex !important; align-items: center; justify-content: center; gap: 7px;
    box-sizing: border-box; width: max-content; min-width: 78px; min-height: 44px;
    margin: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 999px !important;
    background: transparent !important; color: var(--yatoon-header-text) !important;
    font: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; list-style: none; cursor: pointer;
}
html body .sbs-booking-container .sbs-language-trigger::-webkit-details-marker { display: none; }
html body .sbs-booking-container .sbs-language-trigger::marker { content: ''; }
html body .sbs-booking-container .sbs-language-trigger::before,
html body .sbs-booking-container .sbs-language-trigger::after { content: none !important; }
html body .sbs-booking-container .sbs-language-code { white-space: nowrap; }
html body .sbs-booking-container .sbs-language-flag {
    display: inline-flex !important; align-items: center; justify-content: center;
    flex: 0 0 21px !important; width: 21px !important; height: 21px !important;
    box-sizing: border-box; overflow: hidden; border: 1px solid rgba(128,128,128,.22); border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
html body .sbs-booking-container .sbs-language-flag svg {
    display: block !important; flex: none !important; width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
}
html body .sbs-booking-container .sbs-header-tools .sbs-language-chevron {
    flex: 0 0 12px !important; width: 12px !important; height: 12px !important; opacity: .65;
}
html body .sbs-booking-container .sbs-language-picker[open] .sbs-language-chevron { transform: rotate(180deg); }
html body .sbs-booking-container .sbs-language-panel {
    position: absolute; z-index: 10004; inset-inline-end: 0; top: calc(100% + 8px);
    box-sizing: border-box; width: min(268px, calc(100vw - 40px)); max-height: min(380px, 65dvh);
    overflow-y: auto; overscroll-behavior: contain; padding: 6px;
    border: 1px solid var(--yatoon-header-border); border-radius: 16px;
    background: var(--yatoon-header-surface); color: var(--yatoon-header-text);
    box-shadow: 0 12px 32px rgba(15,23,42,.18);
}
html body .sbs-booking-container .sbs-language-picker:not([open]) .sbs-language-panel { display: none !important; }
html body .sbs-booking-container .sbs-language-choice {
    display: flex !important; align-items: center; gap: 10px; box-sizing: border-box;
    width: 100%; min-height: 44px; margin: 0; padding: 10px;
    border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
    background: transparent !important; color: var(--yatoon-header-text) !important;
    font: inherit; font-size: 13px; font-weight: 500; line-height: 1.5; text-align: start;
    text-transform: none !important; letter-spacing: normal !important; cursor: pointer;
}
html body .sbs-booking-container .sbs-language-choice > span:not(.sbs-language-flag):not(.sbs-language-check) { flex: 1; }
html body .sbs-booking-container .sbs-language-check { margin-inline-start: auto; font-weight: 700; }
html body .sbs-booking-container .sbs-language-choice[aria-current="true"] { font-weight: 700; }
html body .sbs-booking-container .sbs-language-choice:is(:hover, :focus-visible, [aria-current="true"]),
html body .sbs-booking-container .sbs-language-trigger:is(:hover, :focus-visible),
html body .sbs-booking-container .sbs-language-picker[open] > summary { background: var(--yatoon-header-soft) !important; }
html body .sbs-booking-container .sbs-language-trigger:focus-visible,
html body .sbs-booking-container .sbs-language-choice:focus-visible { outline: 2px solid var(--primary-color, #db2777) !important; outline-offset: 2px; }
html body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-icon > .sbs-signin-trigger,
html body .sbs-booking-container .sbs-header-tools .sbs-signin-menu-header-text > .sbs-signin-trigger,
html body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger {
    border-color: transparent !important; border-radius: 999px !important;
    background: transparent !important; color: var(--yatoon-header-text) !important; box-shadow: none !important;
}
html body .sbs-booking-container .sbs-header-tools :is(.sbs-signin-menu-icon, .sbs-signin-menu-header-text) > .sbs-signin-trigger:is(:hover, :focus-visible),
html body .sbs-booking-container .sbs-header-tools :is(.sbs-signin-menu-icon, .sbs-signin-menu-header-text).is-open > .sbs-signin-trigger,
html body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger:is(:hover, :focus-visible) { background: var(--yatoon-header-soft) !important; }
@media (max-width: 760px) {
    html body .sbs-booking-container .sbs-header-tools { gap: 4px !important; }
    html body .sbs-booking-container .sbs-language-trigger { gap: 6px; min-width: 72px; min-height: 44px; padding: 8px; font-size: 12px; }
    html body .sbs-booking-container .sbs-header-tools :is(.sbs-signin-menu-icon, .sbs-signin-menu-header-text) { width: 44px !important; min-width: 44px !important; max-width: 44px !important; flex: 0 0 44px !important; }
    html body .sbs-booking-container .sbs-header-tools :is(.sbs-signin-menu-icon, .sbs-signin-menu-header-text) > .sbs-signin-trigger,
    html body .sbs-booking-container .sbs-header-tools .sbs-header-account-trigger { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; min-height: 44px !important; flex: 0 0 44px !important; padding: 10px !important; }
    html body .sbs-booking-container .sbs-header-name { font-size: clamp(16px, 4.7vw, 20px); }
}