:root {
    --les-appt-purple: #5b2c83;
    --les-appt-deep-purple: #3b245f;
    --les-appt-light-purple: #f3eef8;
    --les-appt-soft-purple: #e8def2;
    --les-appt-side-purple: #e7e0ed;
    --les-appt-yellow: #f0c84b;
    --les-appt-text: #302a36;
    --les-appt-muted: #6f6875;
    --les-appt-white: #ffffff;
    --les-appt-max-width: 1220px;
    --les-appt-shadow: 0 18px 50px rgba(59, 36, 95, 0.09);
}

body.les-appointments-mode,
body.les-appointments-mode #wrapwrap {
    background: var(--les-appt-side-purple) !important;
}

body.les-appointments-mode #wrapwrap {
    padding: 24px 0 40px;
    min-height: 100vh;
}

body.les-appointments-mode #wrapwrap > main {
    width: min(calc(100% - 48px), var(--les-appt-max-width));
    margin: 0 auto;
    background: var(--les-appt-white);
    box-shadow: var(--les-appt-shadow);
}

.les-appt-header,
.les-appt-footer,
.les-appt-page {
    box-sizing: border-box;
}

.les-appt-header *,
.les-appt-footer *,
.les-appt-page * {
    box-sizing: border-box;
}

.les-appt-header {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    padding: 0 24px;
}

.les-appt-header__inner {
    width: min(100%, var(--les-appt-max-width));
    min-height: 88px;
    margin: 0 auto;
    padding: 18px 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: var(--les-appt-white);
    box-shadow: var(--les-appt-shadow);
}

.les-appt-brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--les-appt-deep-purple);
    text-decoration: none;
}

.les-appt-brand:hover {
    color: var(--les-appt-deep-purple);
    text-decoration: none;
}

img.les-appt-brand__logo {
    display: block;
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    min-width: 60px !important;
    object-fit: contain;
    flex: 0 0 60px;
}

.les-appt-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.04;
}

.les-appt-brand__school {
    font-family: Georgia, Palatino, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 400;
}

.les-appt-brand__section {
    margin-top: 6px;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--les-appt-purple);
}

.les-appt-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    font-family: Montserrat, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.les-appt-nav a {
    color: var(--les-appt-deep-purple);
    text-decoration: none;
}

.les-appt-nav a:hover {
    color: var(--les-appt-purple);
}

.les-appt-nav__inactive {
    color: #9a939f;
    cursor: default;
}

.les-appt-page {
    margin: 0;
    background: var(--les-appt-white);
    color: var(--les-appt-text);
    font-family: Montserrat, Arial, sans-serif;
}

.les-appt-container {
    width: min(calc(100% - 64px), 1080px);
    margin: 0 auto;
}

.les-appt-hero {
    padding: 82px 0 74px;
    text-align: center;
    background:
        radial-gradient(circle at 85% 18%, rgba(240, 200, 75, 0.16), transparent 22%),
        linear-gradient(135deg, #faf8fc 0%, #f1e9f7 100%);
}

.les-appt-hero__content {
    max-width: 820px;
    margin: 0 auto;
}

.les-appt-eyebrow {
    margin: 0 0 18px;
    color: var(--les-appt-purple);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.les-appt-hero h1,
.les-appt-section-heading h2,
.les-appt-help h2 {
    margin: 0;
    color: var(--les-appt-deep-purple);
    font-family: Georgia, Palatino, "Times New Roman", serif;
    font-weight: 400;
    line-height: 1.08;
}

.les-appt-hero h1 {
    font-size: clamp(46px, 6vw, 76px);
}

.les-appt-hero__intro {
    max-width: 720px;
    margin: 24px auto 0;
    color: var(--les-appt-muted);
    font-size: 18px;
    line-height: 1.75;
}

.les-appt-calendars,
.les-appt-information {
    padding: 88px 0;
}

.les-appt-information {
    background: var(--les-appt-light-purple);
}

.les-appt-section-heading {
    margin-bottom: 40px;
}

.les-appt-section-heading h2,
.les-appt-help h2 {
    font-size: clamp(34px, 4.8vw, 52px);
}

.les-appt-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

.les-appt-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 26px;
    align-items: center;
    padding: 34px;
    background: var(--les-appt-white);
    box-shadow: 0 12px 32px rgba(59, 36, 95, 0.07);
}

.les-appt-card__number {
    color: var(--les-appt-yellow);
    font-family: Georgia, Palatino, "Times New Roman", serif;
    font-size: 40px;
    line-height: 1;
}

.les-appt-card__body h3 {
    margin: 0 0 12px;
    color: var(--les-appt-deep-purple);
    font-family: Georgia, Palatino, "Times New Roman", serif;
    font-size: 30px;
    font-weight: 400;
}

.les-appt-card__body p {
    max-width: 680px;
    margin: 0;
    color: var(--les-appt-muted);
    font-size: 15px;
    line-height: 1.72;
}

.les-appt-card__meta {
    margin-top: 16px;
    color: var(--les-appt-purple);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.les-appt-button {
    min-height: 50px;
    padding: 14px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--les-appt-purple);
    color: var(--les-appt-white);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background 160ms ease, transform 160ms ease;
}

.les-appt-button:hover {
    background: var(--les-appt-deep-purple);
    color: var(--les-appt-white);
    text-decoration: none;
    transform: translateY(-1px);
}

.les-appt-button--yellow {
    background: var(--les-appt-yellow);
    color: var(--les-appt-deep-purple);
}

.les-appt-button--yellow:hover {
    background: #e2b935;
    color: var(--les-appt-deep-purple);
}

.les-appt-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.les-appt-info-item {
    min-height: 150px;
    padding: 30px;
    background: var(--les-appt-white);
}

.les-appt-info-item strong {
    display: block;
    margin-bottom: 12px;
    color: var(--les-appt-deep-purple);
    font-family: Georgia, Palatino, "Times New Roman", serif;
    font-size: 23px;
    font-weight: 400;
}

.les-appt-info-item span {
    color: var(--les-appt-muted);
    font-size: 14px;
    line-height: 1.7;
}

.les-appt-help {
    padding: 74px 0;
    background: var(--les-appt-deep-purple);
}

.les-appt-help__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.les-appt-help .les-appt-eyebrow {
    color: var(--les-appt-yellow);
}

.les-appt-help h2 {
    color: var(--les-appt-white);
}

.les-appt-help p:not(.les-appt-eyebrow) {
    max-width: 650px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.7;
}

.les-appt-empty {
    padding: 45px;
    background: var(--les-appt-light-purple);
    color: var(--les-appt-muted);
    text-align: center;
}

.les-appt-footer {
    background: transparent;
    padding: 0 24px 24px;
}

.les-appt-footer__inner {
    width: min(100%, var(--les-appt-max-width));
    margin: 0 auto;
    padding: 34px;
    background: #241638;
    color: var(--les-appt-white);
    box-shadow: var(--les-appt-shadow);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 45px;
}

.les-appt-footer__school {
    font-family: Georgia, Palatino, "Times New Roman", serif;
    font-size: 28px;
}

.les-appt-footer__motto {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-family: Georgia, Palatino, "Times New Roman", serif;
    font-size: 14px;
    font-style: italic;
}

.les-appt-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 18px 25px;
    font-size: 12px;
}

.les-appt-footer__links a,
.les-appt-footer__links span {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.les-appt-footer__links a:hover {
    color: var(--les-appt-yellow);
}

/* Keep the generic Odoo Appointment menu hidden while the main site is still being developed. */
header#top a[href="/appointment"] {
    display: none !important;
}

@media (max-width: 1024px) {
    .les-appt-brand__school {
        font-size: 25px;
    }

    .les-appt-card {
        grid-template-columns: 55px minmax(0, 1fr);
    }

    .les-appt-card__action {
        grid-column: 2;
    }
}

@media (max-width: 800px) {
    body.les-appointments-mode #wrapwrap {
        padding: 16px 0 28px;
    }

    body.les-appointments-mode #wrapwrap > main {
        width: min(calc(100% - 24px), var(--les-appt-max-width));
    }

    .les-appt-header,
    .les-appt-footer {
        padding-left: 12px;
        padding-right: 12px;
    }

    .les-appt-header__inner {
        min-height: 78px;
        padding: 16px 20px;
        gap: 18px;
    }

    .les-appt-nav {
        gap: 14px;
    }

    .les-appt-nav__inactive {
        display: none;
    }

    .les-appt-container {
        width: min(calc(100% - 32px), 1080px);
    }

    .les-appt-info-grid {
        grid-template-columns: 1fr;
    }

    .les-appt-help__inner,
    .les-appt-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .les-appt-footer__links {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .les-appt-brand__school {
        font-size: 20px;
    }

    .les-appt-brand__section {
        font-size: 9px;
    }

    img.les-appt-brand__logo {
        width: 48px !important;
        height: 48px !important;
        max-width: 48px !important;
        min-width: 48px !important;
    }

    .les-appt-nav a:first-child {
        display: none;
    }

    .les-appt-hero {
        padding: 64px 0 58px;
    }

    .les-appt-calendars,
    .les-appt-information {
        padding: 64px 0;
    }

    .les-appt-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 26px 22px;
    }

    .les-appt-card__number {
        font-size: 34px;
    }

    .les-appt-card__action {
        grid-column: auto;
    }

    .les-appt-button {
        width: 100%;
    }
}

/* ===== Stage 5: white inner booking area for Odoo appointment pages ===== */
body.les-appointments-mode .o_appointment {
    background: #ffffff !important;
}

body.les-appointments-mode .o_appointment .container,
body.les-appointments-mode .o_appointment .container-fluid,
body.les-appointments-mode .o_appointment .row,
body.les-appointments-mode .o_appointment .col,
body.les-appointments-mode .o_appointment [class*="col-"] {
    background-color: transparent !important;
}

body.les-appointments-mode .o_appointment .o_appointment_booking,
body.les-appointments-mode .o_appointment .o_appointment_booking_form,
body.les-appointments-mode .o_appointment .o_appointment_booking_main,
body.les-appointments-mode .o_appointment .o_appointment_details,
body.les-appointments-mode .o_appointment .o_appointment_sidebar,
body.les-appointments-mode .o_appointment .o_appointment_card,
body.les-appointments-mode .o_appointment .o_appointment_info {
    background: #ffffff !important;
}

/* Keep cards and interactive boxes clean on white */
body.les-appointments-mode .o_appointment .card,
body.les-appointments-mode .o_appointment .card-body,
body.les-appointments-mode .o_appointment .bg-white {
    background: #ffffff !important;
}

/* Make the booking section itself feel like a white content panel */
body.les-appointments-mode .o_appointment {
    box-shadow: none !important;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* ===== Complete white native Odoo appointment flow ===== */

/*
 * Purple remains only outside the centred main page.
 * Every native booking-flow structural wrapper is white.
 */
body.les-native-appointment-page #wrapwrap > main,
body.les-native-appointment-page #wrapwrap > main > #wrap,
body.les-native-appointment-page #wrapwrap > main #wrap.o_wappointment_wrap,
body.les-native-appointment-page #wrapwrap > main .o_wappointment_wrap {
    background-color: #ffffff !important;
    background-image: none !important;
    min-height: 100vh;
}

/* Native appointment containers and columns */
body.les-native-appointment-page main .o_wappointment_wrap > .container,
body.les-native-appointment-page main .o_wappointment_wrap > .container-lg,
body.les-native-appointment-page main .o_wappointment_wrap > .container-fluid,
body.les-native-appointment-page main .o_wappointment_wrap .container,
body.les-native-appointment-page main .o_wappointment_wrap .container-lg,
body.les-native-appointment-page main .o_wappointment_wrap .container-fluid,
body.les-native-appointment-page main .o_wappointment_wrap .row,
body.les-native-appointment-page main .o_wappointment_wrap [class*="col-"] {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Date, details and confirmation-step structures */
body.les-native-appointment-page main .o_appointment,
body.les-native-appointment-page main .oe_structure,
body.les-native-appointment-page main .o_appointment_attendee_form,
body.les-native-appointment-page main form.appointment_submit_form,
body.les-native-appointment-page main .o_appointment_info_main,
body.les-native-appointment-page main .o_appointment_calendar_form,
body.les-native-appointment-page main .o_appointment_intro,
body.les-native-appointment-page main .o_appointment_details_column,
body.les-native-appointment-page main .o_appointment_booking,
body.les-native-appointment-page main .o_appointment_booking_form,
body.les-native-appointment-page main .o_appointment_booking_main,
body.les-native-appointment-page main .o_appointment_details,
body.les-native-appointment-page main .o_appointment_sidebar,
body.les-native-appointment-page main .o_appointment_info {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Remove theme colour classes from structural appointment areas */
body.les-native-appointment-page main .o_wappointment_wrap .o_cc,
body.les-native-appointment-page main .o_wappointment_wrap .o_colored_level,
body.les-native-appointment-page main .o_wappointment_wrap .bg-light,
body.les-native-appointment-page main .o_wappointment_wrap .bg-100,
body.les-native-appointment-page main .o_wappointment_wrap .bg-200,
body.les-native-appointment-page main .o_wappointment_wrap .bg-300 {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Ensure the full right column and lower description area remain white */
body.les-native-appointment-page main .o_wappointment_wrap aside,
body.les-native-appointment-page main .o_wappointment_wrap section,
body.les-native-appointment-page main .o_wappointment_wrap article {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* ===== Final booked confirmation page interior white ===== */

body.les-native-appointment-page main .o_wappointment_wrap .o_appointment_booking_confirmed,
body.les-native-appointment-page main .o_wappointment_wrap .o_appointment_confirmed,
body.les-native-appointment-page main .o_wappointment_wrap .o_appointment_confirmation,
body.les-native-appointment-page main .o_wappointment_wrap .o_appointment_booked,
body.les-native-appointment-page main .o_wappointment_wrap .o_wappointment_card,
body.les-native-appointment-page main .o_wappointment_wrap .card,
body.les-native-appointment-page main .o_wappointment_wrap .card-body,
body.les-native-appointment-page main .o_wappointment_wrap .list-group,
body.les-native-appointment-page main .o_wappointment_wrap .list-group-item,
body.les-native-appointment-page main .o_wappointment_wrap .table,
body.les-native-appointment-page main .o_wappointment_wrap .table td,
body.les-native-appointment-page main .o_wappointment_wrap .table th,
body.les-native-appointment-page main .o_wappointment_wrap .border,
body.les-native-appointment-page main .o_wappointment_wrap .rounded,
body.les-native-appointment-page main .o_wappointment_wrap .bg-white,
body.les-native-appointment-page main .o_wappointment_wrap .bg-light,
body.les-native-appointment-page main .o_wappointment_wrap .bg-100,
body.les-native-appointment-page main .o_wappointment_wrap .bg-200,
body.les-native-appointment-page main .o_wappointment_wrap .bg-300,
body.les-native-appointment-page main .o_wappointment_wrap .shadow-sm,
body.les-native-appointment-page main .o_wappointment_wrap .shadow,
body.les-native-appointment-page main .o_wappointment_wrap .p-3,
body.les-native-appointment-page main .o_wappointment_wrap .p-4,
body.les-native-appointment-page main .o_wappointment_wrap .px-3,
body.les-native-appointment-page main .o_wappointment_wrap .px-4,
body.les-native-appointment-page main .o_wappointment_wrap .py-3,
body.les-native-appointment-page main .o_wappointment_wrap .py-4 {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Keep the whole booked-page content area white */
body.les-native-appointment-page main .o_wappointment_wrap,
body.les-native-appointment-page main .o_wappointment_wrap > .container,
body.les-native-appointment-page main .o_wappointment_wrap > .container-lg,
body.les-native-appointment-page main .o_wappointment_wrap > .container-fluid,
body.les-native-appointment-page main .o_wappointment_wrap .container,
body.les-native-appointment-page main .o_wappointment_wrap .container-lg,
body.les-native-appointment-page main .o_wappointment_wrap .container-fluid,
body.les-native-appointment-page main .o_wappointment_wrap .row,
body.les-native-appointment-page main .o_wappointment_wrap [class*="col-"] {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* ===== Final booked confirmation page interior white ===== */

body.les-native-appointment-page main .o_wappointment_wrap .o_appointment_booking_confirmed,
body.les-native-appointment-page main .o_wappointment_wrap .o_appointment_confirmed,
body.les-native-appointment-page main .o_wappointment_wrap .o_appointment_confirmation,
body.les-native-appointment-page main .o_wappointment_wrap .o_appointment_booked,
body.les-native-appointment-page main .o_wappointment_wrap .o_wappointment_card,
body.les-native-appointment-page main .o_wappointment_wrap .card,
body.les-native-appointment-page main .o_wappointment_wrap .card-body,
body.les-native-appointment-page main .o_wappointment_wrap .list-group,
body.les-native-appointment-page main .o_wappointment_wrap .list-group-item,
body.les-native-appointment-page main .o_wappointment_wrap .table,
body.les-native-appointment-page main .o_wappointment_wrap .table td,
body.les-native-appointment-page main .o_wappointment_wrap .table th,
body.les-native-appointment-page main .o_wappointment_wrap .border,
body.les-native-appointment-page main .o_wappointment_wrap .rounded,
body.les-native-appointment-page main .o_wappointment_wrap .bg-white,
body.les-native-appointment-page main .o_wappointment_wrap .bg-light,
body.les-native-appointment-page main .o_wappointment_wrap .bg-100,
body.les-native-appointment-page main .o_wappointment_wrap .bg-200,
body.les-native-appointment-page main .o_wappointment_wrap .bg-300,
body.les-native-appointment-page main .o_wappointment_wrap .shadow-sm,
body.les-native-appointment-page main .o_wappointment_wrap .shadow,
body.les-native-appointment-page main .o_wappointment_wrap .p-3,
body.les-native-appointment-page main .o_wappointment_wrap .p-4,
body.les-native-appointment-page main .o_wappointment_wrap .px-3,
body.les-native-appointment-page main .o_wappointment_wrap .px-4,
body.les-native-appointment-page main .o_wappointment_wrap .py-3,
body.les-native-appointment-page main .o_wappointment_wrap .py-4 {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Keep the whole booked-page content area white */
body.les-native-appointment-page main .o_wappointment_wrap,
body.les-native-appointment-page main .o_wappointment_wrap > .container,
body.les-native-appointment-page main .o_wappointment_wrap > .container-lg,
body.les-native-appointment-page main .o_wappointment_wrap > .container-fluid,
body.les-native-appointment-page main .o_wappointment_wrap .container,
body.les-native-appointment-page main .o_wappointment_wrap .container-lg,
body.les-native-appointment-page main .o_wappointment_wrap .container-fluid,
body.les-native-appointment-page main .o_wappointment_wrap .row,
body.les-native-appointment-page main .o_wappointment_wrap [class*="col-"] {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* ===== Keep all calendar dates visible ===== */

/* Available but not selected */
body.les-native-appointment-page
.o_day_wrapper.o_slot_button {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #3b245f !important;
    border-color: #ded5e7 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Available date hover */
body.les-native-appointment-page
.o_day_wrapper.o_slot_button:hover {
    background-color: #f3eef8 !important;
    color: #3b245f !important;
    border-color: #5b2c83 !important;
}

/*
 * Odoo automatically selects the first available date.
 * Make the selected date clearly visible instead of white-on-white.
 */
body.les-native-appointment-page
.o_day_wrapper.o_slot_button.o_slot_selected,
body.les-native-appointment-page
.o_day_wrapper.o_slot_button.active,
body.les-native-appointment-page
.o_day_wrapper.o_slot_button.o_slot_selected:hover,
body.les-native-appointment-page
.o_day_wrapper.o_slot_button.active:hover {
    background-color: #5b2c83 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #5b2c83 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Dates without slots remain visible but cannot be clicked */
body.les-native-appointment-page
.o_appointment_days td:not(.o_day)
.o_day_wrapper:not(.d-none) {
    color: #7d7483 !important;
    background-color: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: default !important;
}

/* ===== Calendar date hover visibility fix ===== */

/* Available date, normal state */
body.les-native-appointment-page
.o_appointment_month
.o_day_wrapper.o_slot_button {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #3b245f !important;
    -webkit-text-fill-color: #3b245f !important;
    border-color: #ded5e7 !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

/* Available date, hover and keyboard focus */
body.les-native-appointment-page
.o_appointment_month
.o_day_wrapper.o_slot_button:hover,
body.les-native-appointment-page
.o_appointment_month
.o_day_wrapper.o_slot_button:focus,
body.les-native-appointment-page
.o_appointment_month
.o_day_wrapper.o_slot_button:focus-visible,
body.les-native-appointment-page
.o_appointment_month
.o_day_wrapper.o_slot_button:active {
    background-color: #5b2c83 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #5b2c83 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

/* Selected date remains purple in every interaction state */
body.les-native-appointment-page
.o_appointment_month
.o_day_wrapper.o_slot_button.o_slot_selected,
body.les-native-appointment-page
.o_appointment_month
.o_day_wrapper.o_slot_button.active,
body.les-native-appointment-page
.o_appointment_month
.o_day_wrapper.o_slot_button.o_slot_selected:hover,
body.les-native-appointment-page
.o_appointment_month
.o_day_wrapper.o_slot_button.active:hover,
body.les-native-appointment-page
.o_appointment_month
.o_day_wrapper.o_slot_button.o_slot_selected:focus,
body.les-native-appointment-page
.o_appointment_month
.o_day_wrapper.o_slot_button.active:focus {
    background-color: #5b2c83 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #5b2c83 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* ===== LES Loueizeh school-purple footer ===== */

body.les-appointments-mode .les-appt-footer__inner {
    background-color: #5b2c83 !important;
    background-image: none !important;
}

body.les-appointments-mode .les-appt-footer__school,
body.les-appointments-mode .les-appt-footer__motto,
body.les-appointments-mode .les-appt-footer__links a,
body.les-appointments-mode .les-appt-footer__links span {
    color: #ffffff !important;
}

body.les-appointments-mode .les-appt-footer__motto {
    opacity: 0.86;
}

body.les-appointments-mode .les-appt-footer__links a:hover {
    color: #f0c84b !important;
}

/* ===== Keep appointment time slots visible on hover ===== */

/* Normal available time */
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #3b245f !important;
    -webkit-text-fill-color: #3b245f !important;
    border-color: #ded5e7 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
}

/* Protect any text element nested inside the time button */
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Hover, focus and pressed states */
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours:hover,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours:focus,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours:focus-visible,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours:active {
    background-color: #5b2c83 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #5b2c83 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Selected time remains clearly visible */
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours.o_slot_hours_selected,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours.active,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours.o_slot_hours_selected:hover,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours.active:hover {
    background-color: #5b2c83 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #5b2c83 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override Bootstrap button variables applied during hover */
body.les-native-appointment-page
.o_appointment_availabilities
.btn-outline-primary.o_slot_hours {
    --btn-color: #3b245f;
    --btn-bg: #ffffff;
    --btn-border-color: #ded5e7;
    --btn-hover-color: #ffffff;
    --btn-hover-bg: #5b2c83;
    --btn-hover-border-color: #5b2c83;
    --btn-active-color: #ffffff;
    --btn-active-bg: #5b2c83;
    --btn-active-border-color: #5b2c83;
}

/* ===== Keep appointment time slots visible on hover ===== */

/* Normal available time */
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #3b245f !important;
    -webkit-text-fill-color: #3b245f !important;
    border-color: #ded5e7 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
}

/* Protect any text element nested inside the time button */
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Hover, focus and pressed states */
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours:hover,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours:focus,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours:focus-visible,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours:active {
    background-color: #5b2c83 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #5b2c83 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Selected time remains clearly visible */
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours.o_slot_hours_selected,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours.active,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours.o_slot_hours_selected:hover,
body.les-native-appointment-page
.o_appointment_availabilities
.o_slot_hours.active:hover {
    background-color: #5b2c83 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #5b2c83 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override Bootstrap button variables applied during hover */
body.les-native-appointment-page
.o_appointment_availabilities
.btn-outline-primary.o_slot_hours {
    --btn-color: #3b245f;
    --btn-bg: #ffffff;
    --btn-border-color: #ded5e7;
    --btn-hover-color: #ffffff;
    --btn-hover-bg: #5b2c83;
    --btn-hover-border-color: #5b2c83;
    --btn-active-color: #ffffff;
    --btn-active-bg: #5b2c83;
    --btn-active-border-color: #5b2c83;
}

/* ===== Compact appointments landing-page hero ===== */

/* Apply only to the /appointments landing page */
body.les-appointments-mode .les-appt-page .les-appt-hero {
    padding-top: 44px !important;
    padding-bottom: 46px !important;
    min-height: 0 !important;
}

body.les-appointments-mode .les-appt-page .les-appt-hero__content {
    max-width: 820px !important;
}

body.les-appointments-mode .les-appt-page .les-appt-hero .les-appt-eyebrow {
    margin-bottom: 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
}

body.les-appointments-mode .les-appt-page .les-appt-hero h1 {
    font-size: clamp(42px, 5vw, 64px) !important;
    line-height: 1.02 !important;
}

body.les-appointments-mode .les-appt-page .les-appt-hero__intro {
    max-width: 760px !important;
    margin-top: 16px !important;
    font-size: 17px !important;
    line-height: 1.55 !important;
}

@media (max-width: 640px) {
    body.les-appointments-mode .les-appt-page .les-appt-hero {
        padding-top: 34px !important;
        padding-bottom: 36px !important;
    }

    body.les-appointments-mode .les-appt-page .les-appt-hero h1 {
        font-size: 38px !important;
        line-height: 1.05 !important;
    }

    body.les-appointments-mode .les-appt-page .les-appt-hero__intro {
        margin-top: 14px !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }
}

/* ===== End compact appointments landing-page hero ===== */

/* ===== Appointments admin sign-in button ===== */

body.les-appointments-mode .les-appt-nav__admin {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 17px !important;
    border: 1px solid #5b2c83;
    background-color: #5b2c83;
    color: #ffffff !important;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease;
}

body.les-appointments-mode .les-appt-nav__admin:hover,
body.les-appointments-mode .les-appt-nav__admin:focus,
body.les-appointments-mode .les-appt-nav__admin:focus-visible {
    background-color: #3b245f;
    border-color: #3b245f;
    color: #ffffff !important;
    text-decoration: none !important;
}

@media (max-width: 760px) {
    body.les-appointments-mode .les-appt-nav__admin {
        min-height: 36px;
        padding: 7px 12px !important;
        font-size: 13px;
    }
}

/* ===== End appointments admin sign-in button ===== */