/*
 * BEXSYS theme for Easy!Appointments 1.6.x
 *
 * The application loads exactly one theme stylesheet. Importing the bundled
 * Flatly build keeps the complete Bootstrap component set available, while
 * the rules below apply the BEXSYS visual language to the booking journey.
 */
@import url("./flatly.min.css");

@font-face {
    font-family: "Red Hat Display";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("/assets/fonts/red-hat-display-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Red Hat Mono";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/red-hat-mono-latin.woff2") format("woff2");
}

:root,
[data-bs-theme="light"] {
    --bexsys-ink: #0b2004;
    --bexsys-forest: #123008;
    --bexsys-leaf: #3a7020;
    --bexsys-mint: #a8f098;
    --bexsys-mint-strong: #91e47e;
    --bexsys-mint-soft: #e8fbe2;
    --bexsys-paper: #f7f9f4;
    --bexsys-white: #ffffff;
    --bexsys-border: #dce6d4;
    --bexsys-copy: #384130;
    --bexsys-muted: #5f6958;
    --bexsys-radius-sm: 12px;
    --bexsys-radius: 18px;
    --bexsys-radius-lg: 28px;
    --bexsys-shadow: 0 28px 80px rgba(11, 32, 4, 0.16), 0 3px 12px rgba(11, 32, 4, 0.08);
    --bs-primary: #123008;
    --bs-primary-rgb: 18, 48, 8;
    --bs-secondary: #5f6958;
    --bs-secondary-rgb: 95, 105, 88;
    --bs-dark: #0b2004;
    --bs-dark-rgb: 11, 32, 4;
    --bs-body-color: #384130;
    --bs-body-color-rgb: 56, 65, 48;
    --bs-body-bg: #f7f9f4;
    --bs-body-bg-rgb: 247, 249, 244;
    --bs-border-color: #dce6d4;
    --bs-border-radius: 0.75rem;
    --bs-border-radius-lg: 1.125rem;
    --bs-link-color: #275d14;
    --bs-link-color-rgb: 39, 93, 20;
    --bs-link-hover-color: #0b2004;
    --bs-link-hover-color-rgb: 11, 32, 4;
    --bs-focus-ring-color: rgba(58, 112, 32, 0.34);
    --bs-font-sans-serif: "Red Hat Display", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bs-font-monospace: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html {
    color-scheme: light;
    background: var(--bexsys-paper);
}

body {
    color: var(--bexsys-copy);
    background-color: var(--bexsys-paper);
    font-family: var(--bs-font-sans-serif);
    font-size: 1rem;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--bs-link-color);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--bs-link-hover-color);
}

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

#main {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 12%, rgba(168, 240, 152, 0.48), transparent 28rem),
        radial-gradient(circle at 88% 86%, rgba(58, 112, 32, 0.14), transparent 30rem),
        var(--bexsys-paper);
}

#main::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
        linear-gradient(rgba(18, 48, 8, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 48, 8, 0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    content: "";
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 78%);
    pointer-events: none;
}

#main .wrapper {
    position: relative;
    z-index: 1;
}

#main #book-appointment-wizard {
    border: 1px solid rgba(18, 48, 8, 0.12);
    border-radius: var(--bexsys-radius-lg) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: var(--bexsys-shadow) !important;
}

#book-appointment-wizard #header {
    position: relative;
    isolation: isolate;
    min-height: 124px;
    border-bottom: 1px solid rgba(168, 240, 152, 0.28);
    background:
        linear-gradient(118deg, rgba(18, 48, 8, 0.98), rgba(11, 32, 4, 0.98)) !important;
}

#book-appointment-wizard #header::after {
    position: absolute;
    z-index: -1;
    top: -90px;
    right: -70px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(168, 240, 152, 0.2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 240, 152, 0.15), transparent 66%);
    content: "";
    pointer-events: none;
}

#book-appointment-wizard #company-name {
    color: var(--bexsys-white) !important;
}

#book-appointment-wizard #company-name > span {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 720;
    letter-spacing: -0.025em;
}

#book-appointment-wizard #company-logo {
    box-sizing: content-box;
    max-width: min(180px, 58vw);
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--bexsys-radius-sm);
    background: rgba(255, 255, 255, 0.96);
    object-fit: contain;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

#book-appointment-wizard .display-booking-selection {
    max-width: 36rem;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.72) !important;
    font-family: var(--bs-font-monospace);
    font-size: 0.73rem !important;
    letter-spacing: 0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#book-appointment-wizard #steps {
    position: relative;
    flex: 0 0 auto;
}

#book-appointment-wizard #steps::before {
    position: absolute;
    top: 22px;
    right: 15px;
    left: 15px;
    height: 1px;
    background: rgba(168, 240, 152, 0.25);
    content: "";
}

#book-appointment-wizard #steps .book-step {
    position: relative;
    border: 1px solid rgba(168, 240, 152, 0.28);
    border-radius: 999px !important;
    background: var(--bexsys-forest) !important;
    font-family: var(--bs-font-monospace);
    box-shadow: 0 0 0 4px var(--bexsys-forest);
}

#book-appointment-wizard #steps .book-step strong {
    color: rgba(255, 255, 255, 0.68) !important;
    font-weight: 700;
}

#book-appointment-wizard #steps .book-step.active-step {
    border-color: var(--bexsys-mint);
    background: var(--bexsys-mint) !important;
    box-shadow: 0 0 0 4px var(--bexsys-forest), 0 0 0 6px rgba(168, 240, 152, 0.22);
}

#book-appointment-wizard #steps .book-step.active-step strong {
    color: var(--bexsys-ink) !important;
}

#book-appointment-wizard .wizard-frame {
    background: var(--bexsys-white);
}

#book-appointment-wizard .frame-title {
    color: var(--bexsys-ink) !important;
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 720 !important;
    letter-spacing: -0.035em;
}

#book-appointment-wizard .frame-title::after {
    display: block;
    width: 44px;
    height: 4px;
    margin: 0.8rem auto 0;
    border-radius: 99px;
    background: var(--bexsys-mint-strong);
    content: "";
}

#book-appointment-wizard .frame-content {
    color: var(--bexsys-copy);
}

#book-appointment-wizard .form-label,
#book-appointment-wizard label strong,
#book-appointment-wizard label.fs-5 {
    color: var(--bexsys-ink);
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 46px;
    border: 1px solid #cbd8c3;
    border-radius: var(--bexsys-radius-sm);
    color: var(--bexsys-ink);
    background-color: var(--bexsys-white);
    box-shadow: 0 1px 0 rgba(11, 32, 4, 0.03);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.form-control:hover,
.form-select:hover {
    border-color: #9db391;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bexsys-leaf);
    color: var(--bexsys-ink);
    background-color: var(--bexsys-white);
    box-shadow: 0 0 0 0.25rem rgba(58, 112, 32, 0.2);
}

.form-check-input {
    border-color: #8fa184;
}

.form-check-input:checked {
    border-color: var(--bexsys-forest);
    background-color: var(--bexsys-forest);
}

.form-check-input:focus {
    border-color: var(--bexsys-leaf);
    box-shadow: 0 0 0 0.25rem rgba(58, 112, 32, 0.22);
}

#book-appointment-wizard #select-service,
#book-appointment-wizard #select-provider {
    min-height: 54px;
    padding-inline: 1rem 2.75rem;
    font-size: 1.05rem;
    font-weight: 600;
}

#book-appointment-wizard #service-description:not(:empty) {
    padding: 1rem 1.1rem;
    border: 1px solid var(--bexsys-border);
    border-radius: var(--bexsys-radius-sm);
    background: var(--bexsys-mint-soft);
    color: var(--bexsys-copy);
    line-height: 1.65;
}

.btn {
    min-height: 44px;
    border-radius: 999px;
    font-weight: 680;
    letter-spacing: 0.01em;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #123008;
    --bs-btn-border-color: #123008;
    --bs-btn-hover-color: #0b2004;
    --bs-btn-hover-bg: #a8f098;
    --bs-btn-hover-border-color: #a8f098;
    --bs-btn-active-color: #0b2004;
    --bs-btn-active-bg: #91e47e;
    --bs-btn-active-border-color: #91e47e;
    --bs-btn-disabled-bg: #123008;
    --bs-btn-disabled-border-color: #123008;
    box-shadow: 0 8px 20px rgba(18, 48, 8, 0.18);
}

#book-appointment-wizard .button-next.btn-dark {
    --bs-btn-color: #0b2004;
    --bs-btn-bg: #a8f098;
    --bs-btn-border-color: #a8f098;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #123008;
    --bs-btn-hover-border-color: #123008;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0b2004;
    --bs-btn-active-border-color: #0b2004;
    box-shadow: 0 8px 20px rgba(58, 112, 32, 0.18);
}

.btn-outline-secondary {
    --bs-btn-color: #384130;
    --bs-btn-border-color: #a9b8a1;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #123008;
    --bs-btn-hover-border-color: #123008;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0b2004;
    --bs-btn-active-border-color: #0b2004;
    background: var(--bexsys-white);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--bexsys-mint);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px var(--bexsys-ink);
}

#book-appointment-wizard .command-buttons {
    max-width: 630px;
    padding: 0 0.5rem;
}

#book-appointment-wizard .flatpickr-calendar.inline {
    width: 100%;
    max-width: 307.875px;
    overflow: hidden;
    border: 1px solid var(--bexsys-border);
    border-radius: var(--bexsys-radius) !important;
    background: var(--bexsys-white);
    box-shadow: 0 12px 30px rgba(11, 32, 4, 0.09) !important;
}

#book-appointment-wizard .flatpickr-month,
#book-appointment-wizard .flatpickr-weekdays,
#book-appointment-wizard span.flatpickr-weekday,
#book-appointment-wizard .flatpickr-current-month .flatpickr-monthDropdown-months,
#book-appointment-wizard .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background: var(--bexsys-forest) !important;
    color: var(--bexsys-white) !important;
}

#book-appointment-wizard span.flatpickr-weekday {
    color: rgba(255, 255, 255, 0.78) !important;
    font-family: var(--bs-font-monospace);
    font-size: 0.72rem;
}

#book-appointment-wizard .flatpickr-months .flatpickr-next-month,
#book-appointment-wizard .flatpickr-months .flatpickr-prev-month {
    color: var(--bexsys-mint);
    fill: var(--bexsys-mint);
}

#book-appointment-wizard .flatpickr-day {
    color: var(--bexsys-copy);
    font-family: var(--bs-font-monospace);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

#book-appointment-wizard .flatpickr-day:hover,
#book-appointment-wizard .flatpickr-day:focus {
    border-color: var(--bexsys-mint-soft) !important;
    background: var(--bexsys-mint-soft) !important;
    color: var(--bexsys-ink) !important;
}

#book-appointment-wizard .flatpickr-day.today {
    border-color: var(--bexsys-leaf);
    color: var(--bexsys-ink);
}

#book-appointment-wizard .flatpickr-day.selected,
#book-appointment-wizard .flatpickr-day.selected:hover,
#book-appointment-wizard .flatpickr-day.selected:focus,
#book-appointment-wizard .flatpickr-day.startRange,
#book-appointment-wizard .flatpickr-day.endRange {
    border-color: var(--bexsys-forest) !important;
    background: var(--bexsys-forest) !important;
    color: var(--bexsys-white) !important;
}

#book-appointment-wizard #select-timezone {
    font-size: 0.9rem;
}

#book-appointment-wizard #available-hours {
    scrollbar-color: var(--bexsys-leaf) var(--bexsys-mint-soft);
    scrollbar-width: thin;
}

#book-appointment-wizard #available-hours .available-hour {
    min-height: 42px;
    border-color: var(--bexsys-border);
    border-radius: 10px;
    color: var(--bexsys-ink);
    background: var(--bexsys-paper);
    font-family: var(--bs-font-monospace);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

#book-appointment-wizard #available-hours .available-hour:hover {
    border-color: var(--bexsys-leaf);
    background: var(--bexsys-mint-soft);
    color: var(--bexsys-ink);
}

#book-appointment-wizard #available-hours .selected-hour,
#book-appointment-wizard #available-hours .selected-hour:hover,
#book-appointment-wizard #available-hours .selected-hour:focus {
    border-color: var(--bexsys-forest) !important;
    background: var(--bexsys-forest) !important;
    color: var(--bexsys-white) !important;
    box-shadow: inset 4px 0 0 var(--bexsys-mint) !important;
}

#book-appointment-wizard #appointment-details,
#book-appointment-wizard #customer-details {
    padding: 1.25rem;
    border: 1px solid var(--bexsys-border);
    border-radius: var(--bexsys-radius);
    background: var(--bexsys-paper);
    color: var(--bexsys-copy);
}

#book-appointment-wizard #appointment-details .fs-3,
#book-appointment-wizard #customer-details .fs-3 {
    color: var(--bexsys-ink);
    font-size: 1.35rem !important;
}

#book-appointment-wizard #frame-footer {
    border-color: var(--bexsys-border) !important;
    background: #f1f6ed;
    color: var(--bexsys-muted);
}

#book-appointment-wizard #frame-footer a {
    font-weight: 650;
}

#book-appointment-wizard #select-language,
#book-appointment-wizard .backend-link {
    min-height: 28px;
    border: 1px solid rgba(18, 48, 8, 0.15);
    border-radius: 999px;
    font-family: var(--bs-font-monospace);
    line-height: 1.35;
}

#book-appointment-wizard #select-language {
    color: var(--bexsys-ink);
    background: var(--bexsys-mint) !important;
    cursor: pointer;
}

.modal-content,
#message-frame,
.card {
    overflow: hidden;
    border: 1px solid var(--bexsys-border);
    border-radius: var(--bexsys-radius);
    background: var(--bexsys-white);
    box-shadow: 0 20px 60px rgba(11, 32, 4, 0.14);
}

.modal-header,
.card-header {
    border-color: var(--bexsys-border);
    background: var(--bexsys-paper);
}

.alert-success {
    border-color: #b9dfae;
    color: var(--bexsys-ink);
    background: var(--bexsys-mint-soft);
}

@media (max-width: 767.98px) {
    #main::before {
        background-size: 24px 24px;
        opacity: 0.65;
    }

    #main #book-appointment-wizard {
        min-height: 100vh;
        border-width: 0;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #book-appointment-wizard #header {
        min-height: 0;
        padding-block: 1.25rem !important;
    }

    #book-appointment-wizard #company-name > span {
        display: block;
    }

    #book-appointment-wizard #company-logo {
        max-height: 46px !important;
    }

    #book-appointment-wizard .frame-container {
        min-height: auto !important;
    }

    #book-appointment-wizard .wizard-frame {
        padding-inline: 1rem !important;
    }

    #book-appointment-wizard .command-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.65rem;
        padding-inline: 0;
    }

    #book-appointment-wizard .command-buttons > span {
        display: none;
    }

    #book-appointment-wizard .command-buttons .btn,
    #book-appointment-wizard .command-buttons form {
        width: 100%;
        margin: 0 !important;
    }

    #book-appointment-wizard #appointment-details,
    #book-appointment-wizard #customer-details {
        text-align: left !important;
    }
}

@media (min-width: 768px) {
    #book-appointment-wizard .wizard-frame {
        padding-inline: clamp(1.5rem, 4vw, 3rem) !important;
    }

    #book-appointment-wizard #header {
        padding-inline: clamp(1.5rem, 4vw, 2.5rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    #book-appointment-wizard #steps .book-step,
    #book-appointment-wizard #available-hours .available-hour {
        border: 1px solid ButtonText;
    }

    #book-appointment-wizard #steps .book-step.active-step,
    #book-appointment-wizard #available-hours .selected-hour {
        outline: 3px solid Highlight;
    }
}