/*
 * Reversible Osteoetoy public-booking theme.
 *
 * This file is intentionally isolated from upstream EasyAppointments styles.
 * Remove its <link> from the public booking/message views (and its Dockerfile
 * COPY line) to restore the stock theme without undoing other overrides.
 */

:root,
[data-bs-theme='light'] {
    --osteo-page: #ffffff;
    --osteo-surface: #ffffff;
    --osteo-panel: #f5f7f7;
    --osteo-surface-soft: #c7eef8;
    --osteo-surface-pale: #e9f8fc;
    --osteo-ink: #243139;
    --osteo-muted: #496573;
    --osteo-brand: #73c7e1;
    --osteo-brand-hover: #62bbd8;
    --osteo-brand-dark: #2c4852;
    --osteo-header: #14262c;
    --osteo-line: #d8edf3;

    --bs-body-color: var(--osteo-ink);
    --bs-body-color-rgb: 36, 49, 57;
    --bs-body-bg: var(--osteo-page);
    --bs-primary: var(--osteo-brand);
    --bs-primary-rgb: 115, 199, 225;
    --bs-secondary: var(--osteo-muted);
    --bs-secondary-rgb: 73, 101, 115;
    --bs-secondary-color: var(--osteo-muted);
    --bs-link-color: var(--osteo-brand-dark);
    --bs-link-hover-color: var(--osteo-header);
    --bs-border-color: var(--osteo-line);
    --bs-focus-ring-color: rgba(115, 199, 225, 0.35);
}

body {
    color: var(--osteo-ink);
    background: linear-gradient(180deg, #dff5fb 0, var(--osteo-surface-pale) 38%, #fff 100%);
}

#book-appointment-wizard,
#message-frame {
    border: 1px solid var(--osteo-line);
    background: var(--osteo-surface);
    box-shadow: 0 12px 36px rgba(20, 38, 44, 0.12) !important;
}

#book-appointment-wizard #header.bg-primary {
    background-color: var(--osteo-header) !important;
    border-color: var(--osteo-header) !important;
}

#header .text-white-50 {
    color: rgba(233, 248, 252, 0.7) !important;
}

#book-appointment-wizard .book-step.active-step strong {
    color: var(--osteo-brand-dark) !important;
}

#book-appointment-wizard .book-step:not(.active-step) {
    background: rgba(0, 0, 0, 0.24) !important;
}

.text-muted {
    color: var(--osteo-muted) !important;
}

.bg-light {
    background-color: var(--osteo-panel) !important;
}

#appointment-details .booking-service-badge {
    border: 1px solid var(--osteo-line);
    background-color: rgba(115, 199, 225, 0.14);
    color: var(--osteo-ink);
}

.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
    border-color: var(--osteo-line) !important;
}

.btn-primary {
    --bs-btn-color: var(--osteo-header);
    --bs-btn-bg: var(--osteo-brand);
    --bs-btn-border-color: var(--osteo-brand);
    --bs-btn-hover-color: var(--osteo-header);
    --bs-btn-hover-bg: var(--osteo-brand-hover);
    --bs-btn-hover-border-color: var(--osteo-brand-hover);
    --bs-btn-focus-shadow-rgb: 115, 199, 225;
    --bs-btn-active-color: var(--osteo-header);
    --bs-btn-active-bg: var(--osteo-brand-hover);
    --bs-btn-active-border-color: var(--osteo-brand-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #899aa6;
    --bs-btn-disabled-border-color: #899aa6;
    font-weight: 650;
}

.btn-outline-primary {
    --bs-btn-color: var(--osteo-brand-dark);
    --bs-btn-border-color: var(--osteo-brand);
    --bs-btn-hover-color: var(--osteo-header);
    --bs-btn-hover-bg: var(--osteo-surface-soft);
    --bs-btn-hover-border-color: var(--osteo-brand);
    --bs-btn-active-color: var(--osteo-header);
    --bs-btn-active-bg: var(--osteo-brand);
    --bs-btn-active-border-color: var(--osteo-brand);
}

.btn-outline-secondary {
    --bs-btn-color: var(--osteo-brand-dark);
    --bs-btn-border-color: var(--osteo-muted);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--osteo-brand-dark);
    --bs-btn-hover-border-color: var(--osteo-brand-dark);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--osteo-brand);
    box-shadow: 0 0 0 0.25rem rgba(115, 199, 225, 0.25);
}

.form-check-input:checked {
    border-color: var(--osteo-brand-dark);
    background-color: var(--osteo-brand-dark);
}

#wizard-frame-1 .booking-type-card,
#wizard-frame-2 .bg-light,
#wizard-frame-3 .bg-light,
#wizard-frame-4 .bg-light {
    border-color: var(--osteo-line) !important;
    background-color: var(--osteo-panel) !important;
}

#wizard-frame-1 .booking-choice-number,
#wizard-frame-2 .booking-choice-number {
    background: var(--osteo-brand) !important;
    color: var(--osteo-header) !important;
}

#wizard-frame-1 .booking-choice-card {
    border-color: var(--osteo-line);
    background: var(--osteo-surface);
}

#wizard-frame-1 .booking-choice-card:hover {
    border-color: var(--osteo-brand);
    background: #f7fcfe;
}

#wizard-frame-1 .booking-choice-card.is-selected {
    border-color: var(--osteo-brand-dark);
    background: var(--osteo-surface-soft);
    box-shadow: 0 0 0 1px rgba(44, 72, 82, 0.14);
}

#wizard-frame-1 .choice-icon {
    background: var(--osteo-surface-pale);
    color: var(--osteo-brand-dark);
}

#wizard-frame-1 .booking-choice-card.is-selected .choice-icon {
    background: var(--osteo-surface);
}

#wizard-frame-1 .choice-check {
    color: var(--osteo-brand-dark);
}

#book-appointment-wizard #available-hours .available-hour {
    border-color: var(--osteo-brand);
    background: var(--osteo-surface);
    color: var(--osteo-brand-dark);
}

#book-appointment-wizard #available-hours .available-hour:hover {
    border-color: var(--osteo-brand);
    background: var(--osteo-surface-soft);
    color: var(--osteo-header);
}

#book-appointment-wizard #available-hours .selected-hour {
    border-color: var(--osteo-brand-dark) !important;
    background-color: var(--osteo-brand) !important;
    color: var(--osteo-header) !important;
}

.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: var(--osteo-brand-dark) !important;
    color: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: #fff !important;
    fill: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: transparent !important;
}

.flatpickr-day.today {
    border-color: var(--osteo-brand-dark) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    border-color: var(--osteo-brand-dark) !important;
    background: var(--osteo-brand-dark) !important;
    color: #fff !important;
    font-weight: 700;
}

#booking-language-footer .input-group-text,
#booking-language-footer .form-select {
    border-color: var(--osteo-line);
    background-color: #fff;
    color: var(--osteo-ink);
}

@media (max-width: 767.98px) {
    body {
        background: var(--osteo-surface);
    }

    #book-appointment-wizard,
    #message-frame {
        border: 0;
        box-shadow: none !important;
    }
}