/* The live booking form inherits the salon's published theme inside its drawer. */
body[data-site-booking="true"] {
    --color-accent: var(--site-primary);
    --color-accent-hover: var(--site-primary);
    --theme-color: var(--site-primary);
    --bk2-pink: var(--site-primary);
    --bk2-pink-dark: var(--site-primary);
    --font: var(--site-font-body);
    --bk2-font: var(--site-font-body);
    --bk2-text: #161514;
    --bk2-surface-warm: #f8f5ef;
    --bk2-border-warm: #e7e1d7;
    --bk2-shadow-btn: none;
    --bk2-shadow-chip: none;
    background: #f8f5ef !important;
    font-family: var(--site-font-body);
}
body[data-site-booking="true"] .wl-content { margin: 0; padding: 18px 20px 28px; min-height: 0; }
body[data-site-booking="true"] .page-header { display: none; }
body[data-site-booking="true"] .wl-content > .site-booking-back,
body[data-site-booking="true"] .service-summary-header { display: none; }
body[data-site-booking="true"] .page-book-appointment { padding: 16px 0 24px; background: transparent; }
body[data-site-booking="true"] .page-book-appointment > .container { padding: 0; }
body[data-site-booking="true"] #bookAppointmentBtn { background: var(--site-primary) !important; color: var(--site-on-primary) !important; border-radius: var(--site-radius); }
body[data-site-booking="true"] #bookAppointmentBtn:disabled { background: #EDE8E2 !important; color: #B4ADA5 !important; }
body[data-site-booking="true"] #giftCardApplyBtn { color: var(--site-primary) !important; border-color: var(--site-primary) !important; }
body[data-site-booking="true"] [hidden] { display: none !important; }
body[data-site-booking="true"] h1,
body[data-site-booking="true"] h2,
body[data-site-booking="true"] h3 { font-family: var(--site-font-display); }
/* The base booking stylesheet still has legacy brand accents outside its tokens.
   Scope these replacements to the salon frame; validation/status colours stay intact. */
body[data-site-booking="true"] #booking-app :is(
    .agent-option.active .agent-option-radio,
    .variant-option.active .variant-option-radio,
    .add-service-option.active .add-service-option-radio,
    .day-column
)::after { background: var(--site-primary); }
body[data-site-booking="true"] #booking-app .day-column.active::after { background: var(--site-on-primary); }
body[data-site-booking="true"] #booking-app :is(
    .agent-option-label, .variant-option-name, .variant-option-meta,
    .day-column:where(:not(.disabled):not(.closed)) .day-date, .period-btn, .slots-period-header,
    .mobile-time-slot:where(:not(.disabled):not(.taken)), .time-slot:where(:not(.disabled):not(.taken))
) { color: var(--bk2-text); }
body[data-site-booking="true"] #weekDisplay { color: var(--bk2-text); }
body[data-site-booking="true"] #booking-app :is(
    .agent-option.agent-see-more .agent-option-label, .agent-avatar.active .agent-name,
    .avatar-see-more-circle, .calendar-arrow, .time-slot-arrow,
    .mobile-see-more-btn, .next-available-slot-btn, .salon-conditions__more-toggle,
    .mobile-day-option.active, .mobile-day-option.active .mobile-day-option-slots,
    .day-option.active, .period-btn.active
) { color: var(--site-primary); }
body[data-site-booking="true"] #booking-app :is(
    .agent-option.active .agent-option-label, .variant-option.active .variant-option-name,
    .variant-option.active .variant-option-meta
) { color: var(--site-primary); }
body[data-site-booking="true"] #booking-app :is(
    .agent-option:hover, .variant-option:hover, .mobile-time-slot:hover:where(:not(.disabled):not(.taken)),
    .next-available-slot-btn, .agent-avatar.active .avatar-img,
    .day-column:hover:where(:not(.disabled):not(.closed)), .day-selector-header:hover, .day-selector.open .day-selector-header,
    .mobile-day-selector-header:hover, .mobile-day-selector.open .mobile-day-selector-header
) { border-color: var(--site-primary); }
body[data-site-booking="true"] #booking-app :is(
    .agent-option:hover, .variant-option:hover, .mobile-time-slot:hover:where(:not(.disabled):not(.taken)),
    .next-available-slot-btn:hover, .period-selector, .period-btn.active,
    .avatar-see-more-circle, .day-option:hover, .day-option.active,
    .mobile-day-option:hover, .mobile-day-option.active, .salon-conditions
) { background: var(--bk2-surface-warm); }
body[data-site-booking="true"] #booking-app :is(
    .day-column.active, .day-column:hover, .period-btn.active,
    .mobile-time-slot.selected, .time-slot.selected
) { box-shadow: none; }
body[data-site-booking="true"] #booking-app :is(
    .day-column.active, .time-slot.selected, .time-slot.active,
    .mobile-time-slot.selected, .mobile-time-slot.active,
    .slots-grouped-container button.selected, .slots-grouped-container button.active,
    .add-another-service-btn__icon
) { background: var(--site-primary); border-color: var(--site-primary); color: var(--site-on-primary); }
body[data-site-booking="true"] #booking-app :is(
    .day-column.active .day-name, .day-column.active .day-date,
    button.btn-default, .btn-default
) { color: var(--site-on-primary); }
body[data-site-booking="true"] #booking-app :is(.salon-conditions, .cancellation-policy) { border-left-color: var(--site-primary); }
body[data-site-booking="true"] :is(
    .agent-option, .variant-option, .day-column, .time-slot, .mobile-time-slot,
    .period-btn, .calendar-arrow, .time-slot-arrow, .next-available-slot-btn,
    .add-service-list-item__add, .added-service-card__remove
):focus-visible { outline-color: var(--site-primary); }
body[data-site-booking="true"] .add-service-modal__search:focus,
body[data-site-booking="true"] #bookingPhoneDialog .booking-phone-dialog__input:focus {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-primary) 15%, transparent);
}
body[data-site-booking="true"] .add-service-list-item__add,
body[data-site-booking="true"] .add-service-list-item__add:hover,
body[data-site-booking="true"] #bookingPhoneDialog .booking-phone-dialog__submit,
body[data-site-booking="true"] #bookingPhoneDialog .booking-phone-dialog__submit:hover {
    background: var(--site-primary);
    color: var(--site-on-primary);
}

/* Authentication is another step in the salon drawer, not a second Glaura
   popup. Keep the shared auth behavior, but let the salon own the surface,
   typography, controls and focus colour. */
body[data-site-booking="true"] {
    --primary-color: var(--site-primary);
    --accent-color: var(--site-primary);
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) {
    padding: 0;
    background: var(--bk2-surface-warm);
    color: var(--bk2-text);
}
body[data-site-booking="true"] :is(#loginModal, #signupModal).show {
    align-items: stretch;
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) .modal-dialog {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 100%;
    margin: 0;
    transform: none;
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) .modal-content {
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100vh;
    border-radius: 0;
    overflow: hidden;
    background: var(--bk2-surface-warm);
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) .modal-body {
    min-height: 100%;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) .appointment-form {
    width: min(100%, 540px);
    margin: 0 auto;
    padding: clamp(52px, 9vh, 76px) clamp(24px, 6vw, 42px) 32px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--site-font-body);
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) .modal-header {
    top: 18px;
    right: 22px;
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) .modal-header .btn-close {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    border: 1px solid var(--bk2-border-warm);
    border-radius: 50%;
    background-size: 17px 17px;
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) :is(h2, h3, h4),
body[data-site-booking="true"] #loginModal .auth-first-heading h2 {
    color: var(--bk2-text);
    font-family: var(--site-font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
}
body[data-site-booking="true"] #loginModal .auth-first-heading h2 {
    font-size: clamp(28px, 6vw, 38px);
}
body[data-site-booking="true"] #loginModal .auth-first-heading {
    margin-bottom: 30px;
    text-transform: none;
}
body[data-site-booking="true"] #loginModal .auth-first-heading .login-subtitle {
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) :is(
    .login-subtitle,
    .auth-first-phone-hint,
    .auth-first-divider span,
    .login-privacy-link a
) {
    color: #77716b;
}
body[data-site-booking="true"] #loginModal :is(
    .auth-first-phone-label,
    .auth-first-signup-link,
    .auth-create-account-link,
    .auth-first-social-btn
) {
    color: var(--bk2-text);
}
body[data-site-booking="true"] #loginModal :is(
    .auth-first-country-code,
    .auth-first-phone-field,
    .auth-first-social-btn
),
body[data-site-booking="true"] :is(#loginModal, #signupModal) :is(
    .form-control-login,
    .input-group-text
) {
    border-color: var(--bk2-border-warm);
    border-radius: var(--site-radius);
    background: #fff;
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) .input-group-text {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) :is(
    .auth-first-phone-field,
    .form-control-login
):focus {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-primary) 14%, transparent);
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) .btn-default,
body[data-site-booking="true"] :is(#loginModal, #signupModal) .btn-default:hover {
    border-radius: var(--site-radius);
    background: var(--site-primary);
    color: var(--site-on-primary);
    box-shadow: none;
}
body[data-site-booking="true"] #loginModal .auth-first-social-btn:hover {
    border-color: var(--site-primary);
    background: color-mix(in srgb, var(--site-primary) 6%, #fff);
}
body[data-site-booking="true"] #loginModal :is(
    .auth-create-account-link,
    .login-privacy-link a
):hover {
    color: var(--site-primary);
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) .text-primary {
    color: var(--site-primary) !important;
}
body[data-site-booking="true"] #loginModal .form-control-login[aria-invalid="true"] {
    border-color: var(--site-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-primary) 14%, transparent);
}
body[data-site-booking="true"] :is(#loginModal, #signupModal) .alert-danger {
    border-color: color-mix(in srgb, var(--site-primary) 32%, var(--bk2-border-warm));
    background: color-mix(in srgb, var(--site-primary) 7%, var(--bk2-surface-warm));
    color: var(--bk2-text);
}
body[data-site-booking="true"] #loginModal .auth-first-divider::before,
body[data-site-booking="true"] #loginModal .auth-first-divider::after {
    background: var(--bk2-border-warm);
}

/* The shared success loader is a full-screen Glaura overlay by default. In a
   salon drawer it is the next booking state and must keep the salon surface. */
body[data-site-booking="true"] #oauth-success-loader {
    background: var(--bk2-surface-warm) !important;
    color: var(--bk2-text);
}
body[data-site-booking="true"] #oauth-success-loader .oauth-success-loader__panel {
    width: min(100%, 540px);
    max-width: 540px !important;
    padding: clamp(48px, 9vh, 76px) clamp(24px, 6vw, 42px) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: var(--site-font-body);
}
body[data-site-booking="true"] #oauth-success-loader .oauth-success-loader__spinner-wrap {
    margin-bottom: 28px !important;
}
body[data-site-booking="true"] #oauth-success-loader .spinner-border {
    width: 48px !important;
    height: 48px !important;
    border-width: 2px;
    color: var(--site-primary) !important;
}
body[data-site-booking="true"] #oauth-success-loader .oauth-success-loader__title {
    margin-bottom: 12px !important;
    color: var(--bk2-text) !important;
    font-family: var(--site-font-display);
    font-size: clamp(30px, 6vw, 40px);
    font-weight: 500 !important;
    line-height: 1.15;
}
body[data-site-booking="true"] #oauth-success-loader .oauth-success-loader__text {
    color: #77716b !important;
    font-size: 16px;
}
@supports (height: 100dvh) {
    body[data-site-booking="true"] :is(#loginModal, #signupModal) :is(.modal-content, .modal-body) {
        max-height: 100dvh;
    }
}
.site-booking-back { display: inline-block; color: var(--site-primary); font-size: 14px; text-decoration: none; padding: 6px 0; }
.site-booking-confirmation { padding: 64px 20px; text-align: center; }
.site-booking-confirmation > span { font-size: 40px; color: var(--site-primary); }
.site-booking-confirmation h1 { margin: 20px 0 12px; font-size: 30px; }
.site-booking-confirmation p { margin-bottom: 28px; }
.site-booking-confirmation a { display: inline-block; padding: 12px 24px; background: var(--site-primary); color: var(--site-on-primary); border-radius: var(--site-radius); text-decoration: none; }