/* Calendar-specific layer. Kept separate so future calendar work stays isolated. */

/* ------------------- CUSTOM CALENDAR (Form Style) ------------------- */
.calendar-scale-wrapper {
    width: 100%;
    overflow: visible;
}

.calendar-scale-wrapper.calendar-scale-wrapper--hidden {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.calendar-scale-inner {
    width: 41rem;
    transform-origin: top left;
    will-change: transform;
}

.calendar-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: linear-gradient(146deg, rgba(212, 184, 154, 0.15) 0%, rgba(139, 111, 90, 0.15) 100%);
    border: 1px solid rgba(191, 167, 146, 0.4);
    border-radius: 1.5rem;
    padding: 2.5rem;
    margin-top: 0;
    position: relative;
    --calendar-reserve-min-height: clamp(44rem, 78vh, 52rem);
    min-height: var(--calendar-reserve-min-height);
    opacity: 1;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0.22rem 0.68rem rgba(212, 184, 154, 0.1),
        inset 0 1px 0 rgba(212, 184, 154, 0.25);
}

.calendar-wrapper,
.calendar-wrapper * {
    -webkit-user-select: none;
    user-select: none;
}

.calendar-wrapper.calendar--loaded {
    opacity: 1;
}

/* ------------------- CALENDAR HEADER ------------------- */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    text-align: center;
    padding: 0 0.6rem;
}

.calendar-title {
    font-size: clamp(1.4rem, 4.5vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffffff;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
}

.calendar-title span {
    display: block;
}

.calendar-title .cal-month {
    font-size: clamp(3.2rem, 9vw, 5.3rem);
    font-weight: 900;
    line-height: 0.9;
    text-align: center;
}

.calendar-title .cal-selected-day {
    font-size: clamp(1.1rem, 3.2vw, 1.45rem);
    font-weight: 900;
}

.calendar-nav-btn {
    background: linear-gradient(146deg, rgba(212, 184, 154, 0.2) 0%, rgba(139, 111, 90, 0.2) 100%);
    border: 1px solid rgba(191, 167, 146, 0.5);
    color: #ffffff;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.8rem;
    cursor: pointer;
    font-size: 1.55rem;
    transition: all 0.3s ease;
    display: inline-grid;
    place-items: center;
}

.calendar-nav-btn:hover {
    background: #ffffff;
    color: #5a3d2a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.calendar-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
}

.calendar-nav-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.5);
    transform: none;
    box-shadow: none;
}

/* ------------------- CALENDAR GRID ------------------- */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: auto;
    gap: 0.62rem;
    text-align: center;
    align-content: start;
    align-items: start;
    min-height: clamp(18rem, 37vh, 24rem);
}

.cal-day-name {
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 100%;
    border-radius: 0.6rem;
    color: #ffffff;
    background: linear-gradient(146deg, rgba(212, 184, 154, 0.1) 0%, rgba(139, 111, 90, 0.1) 100%);
    border: 1px solid rgba(191, 167, 146, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 700;
    font-size: 1.1rem;
}

.cal-day:hover:not(.cal-day--empty):not(.cal-day--disabled) {
    background: linear-gradient(146deg, rgba(212, 184, 154, 0.3) 0%, rgba(139, 111, 90, 0.3) 100%);
    color: #5a3d2a;
    border-color: rgba(191, 167, 146, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cal-day--selected {
    background: var(--accent-gold, #6B5B4A) !important;
    color: #ffffff !important;
    border-color: var(--accent-gold, #6B5B4A) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    transform: scale(1.05);
}

.cal-day--today {
    border: 2px solid #ffffff;
}

.cal-day--disabled,
.cal-day--busy {
    opacity: 0.25 !important;
    cursor: default;
    pointer-events: none;
    background: transparent;
    border-color: transparent;
}

/* ------------------- SLOTS SECTION ------------------- */
.slots-block {
    padding: 0;
    margin-top: 2rem;
    display: block;
    min-height: clamp(7.8rem, 15vh, 11rem);
    visibility: hidden;
    pointer-events: none;
}

.slots-block[style*="display:block"],
.slots-block[style*="display: block"] {
    visibility: visible;
    pointer-events: auto;
}

.slots-block[style*="display:none"],
.slots-block[style*="display: none"] {
    display: block !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.slots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
}

.slot-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 1.65rem;
    height: 6rem;
    background: linear-gradient(146deg, rgba(212, 184, 154, 0.2) 0%, rgba(139, 111, 90, 0.2) 100%);
    border: 1px solid rgba(191, 167, 146, 0.5);
    color: #ffffff;
    border-radius: 0.8rem;
    cursor: pointer;
    gap: 1rem;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 700;
    transition: all 1.8s ease;
}

/* Slot Hypnotic Animations */
.slot-btn--hypnotic {
    border-color: rgba(255, 255, 255, 0.4);
    animation: slotCardPulse var(--slot-rand-duration, 8s) ease-in-out infinite;
}

@keyframes slotCardPulse {

    0%,
    100% {
        border-color: rgba(255, 255, 255, 0.25);
    }

    50% {
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
    }
}

@keyframes calSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ------------------- RESPONSIVE ------------------- */

/* ===== TABLET (up to 1024px) ===== */
@media (max-width: 1024px) {
    .header {
        width: min(97vw, 50rem);
    }

    .header__content-block {
        width: min(96vw, 41rem);
    }

    .layout-container {
        width: min(96vw, 41rem);
    }

    /* Calendar scaling for tablets */
    .calendar-scale-inner {
        width: 100% !important;
        max-width: min(100%, calc(100vw - 2rem));
    }

    .calendar-title .cal-month {
        font-size: clamp(3.2rem, 9vw, 5.3rem);
    }

    .calendar-title .cal-selected-day {
        font-size: clamp(1.1rem, 3.2vw, 1.45rem);
    }

    .calendar-nav-btn {
        width: clamp(2.8rem, 7vw, 3.5rem);
        height: clamp(2.8rem, 7vw, 3.5rem);
        font-size: clamp(1.2rem, 3.2vw, 1.55rem);
    }

    .slot-btn {
        height: clamp(4.5rem, 12vw, 6rem);
        padding: 0.8rem 1.2rem;
        font-size: clamp(0.95rem, 2.6vw, 1.1rem);
    }
}

/* ===== TABLET PORTRAIT & LARGE PHONES (up to 768px) ===== */
@media (max-width: 768px) {
    .header {
        width: 100%;
        padding: clamp(1rem, 3vw, 1.8rem) clamp(0.8rem, 2vw, 1.2rem) clamp(1.5rem, 3.5vw, 2.2rem);
    }

    .header__title {
        font-size: clamp(1.1rem, 4.5vw, 1.8rem);
        text-align: center;
    }

    .header__subtitle {
        font-size: clamp(1.6rem, 8.5vw, 3.6rem);
        margin-bottom: 1.4rem;
        text-align: center;
    }

    .header__description {
        width: 100%;
        padding: 0 clamp(0.5rem, 2vw, 1rem);
    }

    .header__description span {
        white-space: normal;
        text-wrap: balance;
    }

    .header__content-block {
        width: 100%;
        padding: 0 clamp(0.6rem, 2.5vw, 1.2rem);
        margin: 3rem auto 2rem;
    }

    .header__content-header {
        font-size: clamp(1.2rem, 4.5vw, 1.6rem);
        margin: 3rem 0 1.5rem;
        text-align: center;
    }

    .header__content-subheader {
        font-size: clamp(1rem, 3.2vw, 1.2rem);
        margin: 1.5rem 0 0.6rem;
        text-align: left;
    }


    .layout-container {
        width: 100%;
        padding: 0 clamp(0.6rem, 2.5vw, 1.2rem);
    }

    /* Calendar scaling for mobile */
    .calendar-scale-wrapper {
        width: 100%;
        overflow: visible;
    }

    .calendar-scale-inner {
        width: 100% !important;
        max-width: min(100%, calc(100vw - 2rem));
        transform: none !important;
        transform-origin: top left;
    }

    /* Calendar */
    .calendar-wrapper {
        padding: clamp(1.2rem, 4vw, 2rem);
        border-radius: 1.2rem;
        min-height: clamp(30rem, 70vh, 44rem);
    }

    .calendar-header {
        margin-bottom: 1.5rem;
        padding: 0 clamp(0.3rem, 2vw, 0.6rem);
    }

    .calendar-title {
        font-size: clamp(1.4rem, 4.5vw, 2rem);
    }

    .calendar-title .cal-month {
        font-size: clamp(2.6rem, 8vw, 4.2rem);
        text-align: center;
    }

    .calendar-title .cal-selected-day {
        font-size: clamp(0.95rem, 3vw, 1.25rem);
    }

    .calendar-grid {
        gap: 0.45rem;
        min-height: clamp(16rem, 35vh, 22rem);
    }

    .cal-day {
        font-size: clamp(0.85rem, 2.8vw, 1.1rem);
        border-radius: 0.5rem;
        -webkit-appearance: none;
        appearance: none;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        isolation: isolate;
    }

    .cal-day-name {
        font-size: clamp(0.7rem, 2.2vw, 0.85rem);
        margin-bottom: 0.6rem;
    }

    .slots-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .slot-btn {
        height: auto;
        min-height: 4rem;
        padding: 0.8rem 1rem;
        font-size: 1rem;
    }

    /* Section titles */
    #calendarHeaderTitle,
    #servicesSectionTitle,
    #faqSectionTitle {
        font-size: clamp(1.8rem, 7vw, 2.8rem) !important;
    }

    .section-title {
        font-size: clamp(1.2rem, 4.5vw, 1.6rem);
        margin: 3.5rem 0 1.8rem;
        text-align: center;
    }

    /* FAQ */
    #faqSpoiler .faq__question {
        max-width: min(92%, 36rem);
        font-size: clamp(0.92rem, 2.6vw, 1.05rem);
        padding: 0.65rem 0.85rem 0.68rem;
    }

    #faqSpoiler .faq__answer,
    #faqSpoiler .faq__item.is-open .faq__answer {
        max-width: min(92%, 36rem);
        padding: 0.72rem 0.85rem 0.76rem;
        /* TODO-DELETE if stable after test: font-size: 1rem !important */
    }

    /* Footer */
    .footer {
        padding: 3.5rem 1rem 1rem;
    }

    .footer__contact-link {
        font-size: clamp(1.2rem, 4.5vw, 1.6rem);
    }

    .footer__official-meta {
        margin-top: 5rem;
        font-size: 0.75rem;
    }



    /* Book button */
    .book-btn-container {
        height: 9rem;
        margin: 1.8rem auto;
    }

    .book-btn-container--footer {
        min-height: 9rem;
    }

    .footer-book-btn {
        min-width: 12rem;
        font-size: 0.85rem;
        padding: 0.65rem 1.6rem;
    }

    /* Modal */
    .modal--active {
        padding-top: 2vh;
        padding-bottom: 2vh;
    }

    .modal__content {
        padding: 1.8rem 1.2rem;
        border-radius: 1.2rem;
        max-width: 100%;
    }

    .modal__close {
        top: 1rem;
        left: 1rem;
    }

    #bookingModal .modal__content {
        padding: 1.5rem 1rem 1.2rem;
    }

    /* Booking form inputs */
    #bookingModal .booking-row--deadline {
        grid-template-columns: max-content minmax(120px, 180px) max-content;
    }

    #bookingModal #deadlineInputMain {
        width: 100% !important;
        min-width: 120px !important;
        max-width: 180px !important;
    }



    /* Privacy note */
    .privacy-note {
        line-height: 1.5;
    }
}

/* ===== MOBILE PHONES (up to 480px) ===== */
@media (max-width: 480px) {
    html {
        font-size: 15px;
    }

    .header {
        padding: clamp(0.75rem, 2.8vw, 1.2rem) clamp(0.65rem, 2vw, 1rem) clamp(1.2rem, 3.5vw, 1.8rem);
    }

    .header__title {
        font-size: clamp(1rem, 4.2vw, 1.5rem);
        letter-spacing: 1.5px;
        text-align: center;
    }

    .header__subtitle {
        font-size: clamp(1.4rem, 8vw, 2.8rem);
        margin-bottom: 1.2rem;
        letter-spacing: -1px;
        text-align: center;
    }

    .header__description {
        font-size: 10.5pt;
        margin-bottom: 1.8rem;
        line-height: 1;
    }

    .header__description span {
        white-space: normal;
        text-wrap: balance;
        margin: 0.3rem 0 0;
    }

    .header__content-block {
        margin: 2.5rem auto 2rem;
    }

    .header__content-header {
        font-size: clamp(1.2rem, 4.5vw, 1.5rem);
        margin: 2.2rem 0 1.4rem;
        letter-spacing: 1.5px;
        text-align: center;
    }

    .header__content-subheader {
        font-size: clamp(1rem, 3.2vw, 1.2rem);
        text-align: left;
    }


    /* Calendar scaling for small mobile phones */
    .calendar-scale-wrapper {
        width: 100%;
        overflow: visible;
    }

    .calendar-scale-inner {
        width: 100% !important;
        max-width: min(100%, calc(100vw - 1.5rem));
        transform: none !important;
        transform-origin: top left;
    }

    /* Calendar */
    .calendar-wrapper {
        padding: clamp(0.95rem, 3.5vw, 1.5rem);
        border-radius: 1rem;
        min-height: clamp(28rem, 60vh, 38rem);
    }

    .calendar-header {
        margin-bottom: 1.2rem;
        padding: 0 clamp(0.2rem, 1.5vw, 0.4rem);
    }

    .calendar-title .cal-month {
        font-size: clamp(2rem, 7.5vw, 3.5rem);
        text-align: center;
    }

    .calendar-title .cal-selected-day {
        font-size: clamp(0.85rem, 2.8vw, 1.1rem);
    }

    .calendar-nav-btn {
        width: 3rem;
        height: 3rem;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.2rem;
        border-radius: 0.6rem;
    }

    .calendar-grid {
        gap: 0.32rem;
    }

    .cal-day {
        font-size: clamp(0.78rem, 3vw, 0.95rem);
        border-radius: 0.4rem;
    }

    .cal-day-name {
        font-size: clamp(0.6rem, 2.2vw, 0.75rem);
        letter-spacing: 0.5px;
        margin-bottom: 0.45rem;
    }

    .slots-grid {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .slot-btn {
        min-height: 4.5rem;
        padding: 0.85rem 1rem;
        font-size: 0.98rem;
        gap: 0.7rem;
        border-radius: 0.6rem;
    }

    .slots-nav {
        font-size: clamp(1rem, 3.5vw, 1.2rem);
    }

    /* Section titles */
    #calendarHeaderTitle,
    #servicesSectionTitle,
    #faqSectionTitle {
        font-size: clamp(1.5rem, 6.5vw, 2.2rem) !important;
        text-align: center;
    }

    .contact-form__outside-title {
        font-size: clamp(2rem, 8.5vw, 2.8rem);
        margin-bottom: 1.5rem;
        text-align: center;
    }

    /* FAQ */
    #faqSpoiler .faq__question {
        max-width: 96%;
        font-size: clamp(0.95rem, 3vw, 1.1rem);
        padding: 0.7rem 0.85rem 0.75rem;
        border-radius: 0.85rem 0.85rem 0.18rem 0.85rem;
    }

    #faqSpoiler .faq__answer,
    #faqSpoiler .faq__item.is-open .faq__answer {
        max-width: 94%;
        padding: 0.75rem 0.85rem 0.8rem;
        /* TODO-DELETE if stable after test: font-size: 0.98rem !important */
        /* TODO-DELETE if stable after test: line-height: 1.6 !important */
        border-radius: 0.85rem 0.85rem 0.85rem 0.18rem;
    }

    .map-container {
        height: clamp(14rem, 45vw, 22rem);
        border-radius: 0.6rem;
    }

    /* Footer */
    .footer {
        padding: 3.5rem 1.2rem 1.2rem;
    }

    .footer__container {
        margin-bottom: 2.5rem;
    }

    .footer__contact-link {
        font-size: clamp(1.1rem, 4.5vw, 1.5rem);
        margin: 1.8rem 0 0.6rem;
    }


    .footer__official-meta {
        margin-top: 4.5rem;
        font-size: 0.85rem;
    }


    /* Book button */
    .book-btn-container {
        height: 8rem;
        margin: 1.4rem auto;
    }

    .book-btn-container--footer {
        min-height: 7.5rem;
    }

    .footer-book-btn {
        min-width: 11rem;
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
        min-height: 44px;
    }

    #headerBookBtn {
        padding: 0.7rem 1.7rem;
        min-height: 3rem;
    }

    .book-btn-wrapper {
        margin-bottom: clamp(1rem, 4vw, 2rem);
    }

    /* Modal */
    .modal {
        padding: 0.3rem;
    }

    .modal--active {
        padding-top: 1vh;
        padding-bottom: 1vh;
    }

    .modal__content {
        padding: 1.5rem 0.95rem;
        border-radius: 1rem;
    }

    .modal__close {
        top: 0.8rem;
        left: 0.8rem;
        width: 2.2rem;
        height: 2.2rem;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.25rem;
    }

    .modal__title {
        font-size: clamp(0.95rem, 3.5vw, 1.2rem);
    }

    #bookingModal .modal__content {
        padding: 1.2rem 0.75rem 1rem;
    }

    #bookingModal.booking-modal--flat.modal--active,
    #bookingModal.booking-modal--flat[data-state="form"].modal--active {
        padding-top: clamp(0.5rem, 2vh, 1.2rem) !important;
        padding-bottom: clamp(0.5rem, 2vh, 1.2rem) !important;
    }

    /* Booking form inputs */
    #bookingModal .contact-form__input,
    #bookingModal .contact-form__textarea,
    #bookingModal .custom-select__trigger {
        font-size: 1rem !important;
    }

    #bookingModal .booking-row--deadline {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 0.5rem;
    }

    #bookingModal #deadlineInputMain {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #bookingModal .custom-select-wrapper--province {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #bookingModal .booking-row--province-zip input[name="address_zip"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #bookingModal .booking-row--province-zip {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #bookingModal .booking-row--address-city {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #bookingModal .booking-row--address-main {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #bookingModal .booking-row--address-main input[name="address_unit"] {
        width: 100% !important;
    }



    /* File attach */
    .file-attach__btn--camera {
        width: 4.5rem;
        min-width: 4.5rem;
        height: 4.5rem;
        min-height: 4.5rem;
    }

    .camera-capture__panel {
        width: min(35rem, 98vw);
        padding: 0.7rem;
    }

    .camera-capture__actions {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    /* Privacy note */
    .privacy-note {
        line-height: 1.45;
        text-wrap: balance;
    }

    .footer__privacy-note-block .privacy-note {
        font-size: clamp(0.82rem, 2.4vw, 0.95rem);
    }

    .footer__privacy-note-block {
        padding: 0 0.5rem;
    }

    /* Post success screen */
    .post-success-screen__brand {
        font-size: clamp(1.4rem, 6vw, 3rem);
    }

    .post-success-screen__brand-sub {
        font-size: clamp(0.85rem, 3vw, 1.4rem);
    }

    .post-success-screen__phone {
        font-size: clamp(1.2rem, 5.5vw, 2.2rem);
    }

    /* Form calendar overlay */
    .form-calendar-overlay__panel {
        padding: clamp(0.25rem, 0.8vh, 0.45rem) clamp(0.2rem, 1.2vw, 0.5rem) clamp(0.3rem, 0.9vh, 0.5rem);
    }

    /* Quick slots */
    .form-quick-slots__item {
        padding: 0.62rem 0.7rem;
    }

    .form-quick-slots__item-date {
        font-size: 0.82rem;
    }

    .form-quick-slots__item-time {
        font-size: 0.9rem;
    }
}

/* ===== SMALL PHONES (up to 360px) ===== */
@media (max-width: 360px) {
    html {
        font-size: 15px;
    }

    .header__title {
        font-size: clamp(0.95rem, 4.2vw, 1.3rem);
        letter-spacing: 1px;
        text-align: center;
    }

    .header__subtitle {
        font-size: clamp(1.3rem, 8vw, 2.4rem);
        letter-spacing: -0.5px;
        text-align: center;
    }

    .header__description {
        font-size: 10.5pt;
    }


    /* Calendar scaling for very small phones */
    .calendar-scale-inner {
        width: 100% !important;
        max-width: min(100%, calc(100vw - 1rem));
        transform: none !important;
    }

    .calendar-wrapper {
        padding: 0.8rem;
        min-height: clamp(26rem, 50vh, 32rem);
    }

    .calendar-title .cal-month {
        font-size: clamp(1.8rem, 7.5vw, 3rem);
        text-align: center;
    }

    .calendar-nav-btn {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 0.95rem;
    }

    .cal-day {
        font-size: 0.72rem;
    }

    .cal-day-name {
        font-size: 0.55rem;
    }

    #calendarHeaderTitle,
    #servicesSectionTitle,
    #faqSectionTitle {
        font-size: clamp(1.2rem, 6vw, 1.8rem) !important;
        text-align: center;
    }

    #faqSpoiler .faq__question {
        font-size: 0.9rem;
        padding: 0.6rem 0.75rem;
    }

    #faqSpoiler .faq__answer,
    #faqSpoiler .faq__item.is-open .faq__answer {
        /* TODO-DELETE if stable after test: font-size: 0.92rem !important */
        padding: 0.6rem 0.75rem;
    }

    .footer-book-btn {
        min-width: 9rem;
        padding: 0.65rem 1.3rem;
        font-size: 0.85rem;
        min-height: 44px;
    }

    .modal__content {
        padding: 1.2rem 0.75rem;
    }

    #bookingModal .modal__content {
        padding: 1.1rem 0.75rem 1rem;
    }

    .modal__close {
        width: 1.7rem;
        height: 1.7rem;
        top: 0.6rem;
        left: 0.6rem;
    }

    .privacy-note {
        font-size: clamp(0.65rem, 2vw, 0.8rem);
    }
}

/* ===== LANDSCAPE MOBILE (max-height 480px AND landscape) ===== */
@media (max-height: 480px) and (orientation: landscape) {
    .modal--active {
        padding-top: 0.5vh;
        padding-bottom: 0.5vh;
    }

    .modal__content {
        max-height: 96vh;
    }

    #bookingModal .modal__content {
        max-height: 96vh;
        max-height: 96dvh;
    }

    .book-btn-container {
        height: 6rem;
    }

    .book-btn-container--footer {
        min-height: 6rem;
    }
}

/* ===== TOUCH DEVICE IMPROVEMENTS ===== */
@media (hover: none) and (pointer: coarse) {

    .footer-book-btn,
    .contact-form__submit-button,
    .calendar-nav-btn,
    .slot-btn,
    .file-attach__btn,
    .custom-select__trigger,
    .custom-option {
        -webkit-tap-highlight-color: rgba(139, 111, 90, 0.15);
    }


    .custom-option {
        padding: 0.9rem 1.6rem;
    }

    .cal-day:hover:not(.cal-day--empty):not(.cal-day--disabled) {
        transform: none;
        box-shadow: none;
    }

    #faqSpoiler .faq__question:hover {
        border-color: var(--faq-bubble-border-strong);
        background: var(--faq-bubble-q-bg);
        box-shadow: var(--faq-bubble-shadow-strong);
    }

    #faqSpoiler .faq__answer:hover,
    #faqSpoiler .faq__item.is-open .faq__answer:hover {
        border-color: var(--faq-bubble-border-soft);
        background: var(--faq-bubble-a-bg);
        box-shadow: var(--faq-bubble-shadow-soft);
    }

    .slot-btn:hover {
        transform: none !important;
    }

}

/* Modal Specific Input Styles */
.modal .contact-form__input,
.modal .contact-form__textarea {
    text-align: left;
    /* Left align on all devices */
}

.modal .contact-form__input::placeholder,
.modal .contact-form__textarea::placeholder {
    font-size: 0.8rem;
    opacity: 0.7;
    text-align: left;
}

/* File Attachment Styles */
.file-attach {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 0.3rem;
    width: 100%;
}

.file-attach__controls {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: stretch;
}

.file-attach__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0.8rem;
    color: #5a3d2a;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

.file-attach__btn:not(.file-attach__btn--camera) .file-attach__title,
.file-attach__btn:not(.file-attach__btn--camera) .file-attach__icon,
.file-attach__btn:not(.file-attach__btn--camera) .file-attach__icon-svg,
.file-attach__btn:not(.file-attach__btn--camera):hover .file-attach__title,
.file-attach__btn:not(.file-attach__btn--camera):hover .file-attach__icon,
.file-attach__btn:not(.file-attach__btn--camera):hover .file-attach__icon-svg,
.file-attach__btn:not(.file-attach__btn--camera):focus-visible .file-attach__title,
.file-attach__btn:not(.file-attach__btn--camera):focus-visible .file-attach__icon,
.file-attach__btn:not(.file-attach__btn--camera):focus-visible .file-attach__icon-svg {
    color: #5a3d2a !important;
    stroke: #5a3d2a !important;
}

.file-attach__btn:not(.file-attach__btn--camera):hover,
.file-attach__btn:not(.file-attach__btn--camera):focus-visible {
    background: rgba(90, 61, 42, 0.05) !important;
    color: #5a3d2a !important;
}

.file-attach__btn--camera {
    border: none;
    background: transparent;
    color: #5a3d2a;
    width: 5.25rem;
    min-width: 5.25rem;
    height: 5.25rem;
    min-height: 5.25rem;
    padding: 0.5rem;
    gap: 0.2rem;
    flex-direction: column;
}

.file-attach__btn--camera .file-attach__title {
    font-size: 0;
    letter-spacing: 0;
    text-transform: none;
    gap: 0;
    margin: 0;
    line-height: 1;
}

.file-attach__btn--camera .file-attach__icon {
    font-size: 2rem;
}

.file-attach__btn--camera .file-attach__icon-svg,
.file-attach__icon-svg--camera {
    width: 1.85em !important;
    height: 1.85em !important;
    animation: none !important;
}

.file-attach__btn--camera .file-attach__icon-svg,
.file-attach__btn--camera .file-attach__icon-svg--camera {
    color: #5a3d2a !important;
    stroke: #5a3d2a !important;
}

.file-attach__btn--camera:hover .file-attach__icon-svg,
.file-attach__btn--camera:hover .file-attach__icon-svg--camera,
.file-attach__btn--camera:focus-visible .file-attach__icon-svg,
.file-attach__btn--camera:focus-visible .file-attach__icon-svg--camera {
    color: #5a3d2a !important;
    stroke: #5a3d2a !important;
}

.file-attach__btn--camera:hover,
.file-attach__btn--camera:focus-visible {
    background: rgba(90, 61, 42, 0.05) !important;
    border-color: transparent !important;
    color: #5a3d2a !important;
}

.file-attach__btn:hover,
.file-attach__btn:focus-visible {
    background: rgba(90, 61, 42, 0.05);
    border-color: transparent;
    color: #5a3d2a;
    box-shadow: none;
}



.file-attach__drop-zone-file--drag-over {
    background: #ffffff !important;
    border-color: #5a3d2a !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 6px 20px rgba(255, 255, 255, 0.22) !important;
}

.file-attach.file-attach--drag-over .file-attach__drop-zone-file {
    background: #ffffff !important;
    border-color: #5a3d2a !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 6px 20px rgba(255, 255, 255, 0.22) !important;
}

.file-attach__drop-zone-file--drag-over .file-attach__btn {
    background: rgba(90, 61, 42, 0.05) !important;
    border-color: transparent !important;
    color: #5a3d2a !important;
    box-shadow: none !important;
}

.file-attach.file-attach--drag-over .file-attach__drop-zone-file .file-attach__btn {
    background: rgba(90, 61, 42, 0.05) !important;
    border-color: transparent !important;
    color: #5a3d2a !important;
    box-shadow: none !important;
}

.file-attach__drop-zone-file--drag-over .file-attach__title,
.file-attach__drop-zone-file--drag-over .file-attach__icon,
.file-attach__drop-zone-file--drag-over .file-attach__icon-svg,
.file-attach__drop-zone-file--drag-over p {
    color: #5a3d2a !important;
    stroke: #5a3d2a !important;
}

.file-attach.file-attach--drag-over .file-attach__drop-zone-file .file-attach__title,
.file-attach.file-attach--drag-over .file-attach__drop-zone-file .file-attach__icon,
.file-attach.file-attach--drag-over .file-attach__drop-zone-file .file-attach__icon-svg,
.file-attach.file-attach--drag-over .file-attach__drop-zone-file p {
    color: #5a3d2a !important;
    stroke: #5a3d2a !important;
}

.file-attach__title {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: none;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Paperclip Attention Animation */
@keyframes paperclipAttention {

    0%,
    90%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    92% {
        transform: rotate(5deg) scale(1.05);
    }

    94% {
        transform: rotate(-5deg) scale(1.05);
    }

    96% {
        transform: rotate(5deg) scale(1.05);
    }

    98% {
        transform: rotate(-2deg) scale(1.02);
    }
}

.file-attach__icon-svg {
    display: inline-block;
    transform-origin: center center;
    animation: paperclipAttention 8s infinite ease-in-out;
    width: 1.1em !important;
    height: 1.1em !important;
}

.file-attach__icon-svg--paperclip {
    width: 1.42em !important;
    height: 1.42em !important;
    animation: none !important;
}

.file-attach__icon {
    font-size: 1rem;
    line-height: 1;
    display: flex;
}

.file-attach__terms {
    margin-top: 0.1rem;
    margin-bottom: 0.3rem;
}

.file-attach__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.file-attach__list:empty {
    display: none;
}

.file-attach__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.6rem 0.9rem 0.88rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    position: relative;
    overflow: hidden;
    text-align: left;
}

.file-attach__summary {
    display: grid;
    grid-template-columns: 0.92rem minmax(0, 1fr);
    align-items: center;
    align-content: center;
    justify-content: start;
    justify-items: start;
    column-gap: 0.52rem;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding-right: 0.7rem;
    text-align: left;
}

.file-attach__name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: none;
    justify-self: start;
    align-self: center;
    margin: 0;
    text-align: left;
    line-height: 1.25;
}

.file-attach__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.92rem;
    height: 0.92rem;
    flex: 0 0 0.92rem;
    position: relative;
    align-self: center;
    justify-self: start;
    color: #78c98b;
    opacity: 0;
    transform: scale(0.84);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.file-attach__check::before {
    content: "";
    display: block;
    width: 0.34rem;
    height: 0.64rem;
    border-right: 0.11rem solid currentColor;
    border-bottom: 0.11rem solid currentColor;
    transform: rotate(45deg) translate(-4%, -6%);
    transform-origin: center;
    box-sizing: border-box;
}

.file-attach__item[data-upload-visual-complete="true"] .file-attach__check,
.file-attach__item[data-temp-synced="true"] .file-attach__check {
    opacity: 1;
    transform: scale(1);
}

.file-attach__item[data-upload-sync-state="failed"] .file-attach__check {
    color: #ff7070;
    opacity: 1;
    transform: scale(1);
    cursor: help;
}

.file-attach__item[data-upload-sync-state="failed"] .file-attach__check::before {
    width: 0.74rem;
    height: 0.74rem;
    border: 0.09rem solid currentColor;
    border-radius: 50%;
    transform: none;
    background: linear-gradient(-45deg,
            transparent calc(50% - 0.045rem),
            currentColor calc(50% - 0.045rem),
            currentColor calc(50% + 0.045rem),
            transparent calc(50% + 0.045rem));
}

.file-attach__remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0 0.3rem;
    transition: color 0.3s;
}

.file-attach__remove:hover {
    color: #ff6b6b;
}

.file-attach__progress {
    --file-progress-scale: 0;
    --file-progress-opacity: 0;
    --file-progress-transition-ms: 320ms;
    --file-progress-sheen-duration-ms: 1350ms;
    --file-progress-sheen-delay-ms: 0ms;
    --file-progress-complete-duration-ms: 320ms;
    --file-progress-complete-from: 0.84;
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.34rem;
    height: 0.22rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.24s ease, background-color 0.28s ease;
}

.file-attach__progress[data-progress-state="loading"],
.file-attach__progress[data-progress-state="complete"] {
    opacity: 1;
}

.file-attach__progress::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.36) 0%,
            rgba(255, 255, 255, 0.9) 24%,
            rgba(255, 255, 255, 1) 52%,
            rgba(255, 255, 255, 0.92) 74%,
            rgba(255, 255, 255, 0.44) 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    box-shadow: 0 0 0.55rem rgba(255, 255, 255, 0.24);
    opacity: var(--file-progress-opacity);
    transform: scaleX(var(--file-progress-scale));
    transform-origin: left center;
    transition:
        transform var(--file-progress-transition-ms) cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.26s ease;
    will-change: transform, opacity, background-position;
}

.file-attach__progress[data-progress-state="loading"]::before {
    animation-name: fileAttachProgressSheen;
    animation-duration: var(--file-progress-sheen-duration-ms);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: var(--file-progress-sheen-delay-ms);
}

.file-attach__progress[data-progress-state="complete"] {
    background: rgba(132, 104, 82, 0.18);
}

.file-attach__progress[data-progress-state="complete"]::before {
    background-position: 100% 50%;
    animation-name: fileAttachProgressComplete;
    animation-duration: var(--file-progress-complete-duration-ms);
    animation-timing-function: cubic-bezier(0.2, 0.9, 0.2, 1);
    animation-fill-mode: forwards;
}

@keyframes fileAttachProgressSheen {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }
}

@keyframes fileAttachProgressComplete {
    0% {
        opacity: 0.9;
        transform: scaleX(var(--file-progress-complete-from));
        filter: brightness(1);
    }

    68% {
        opacity: 1;
        transform: scaleX(1);
        filter: brightness(1.08);
    }

    100% {
        opacity: 0;
        transform: scaleX(1);
        filter: brightness(1.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .file-attach__progress[data-progress-state="loading"]::before {
        animation: none;
    }

    .file-attach__progress[data-progress-state="complete"]::before {
        animation-duration: 0.24s;
    }
}

.camera-capture-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 21050;
    background: var(--intake-shell-overlay);
    backdrop-filter: var(--intake-shell-overlay-backdrop);
    -webkit-backdrop-filter: var(--intake-shell-overlay-backdrop);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.camera-capture-modal--active {
    display: flex;
}

.form-calendar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 22080;
    background: var(--intake-shell-overlay);
    backdrop-filter: var(--intake-shell-overlay-backdrop);
    -webkit-backdrop-filter: var(--intake-shell-overlay-backdrop);
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.form-calendar-overlay::before,
.form-calendar-overlay::after {
    content: none;
    animation: none !important;
}

.form-calendar-overlay::before {
    content: none;
}

.form-calendar-overlay::after {
    content: none;
}

.form-calendar-overlay--active {
    display: flex;
}

.form-calendar-overlay.form-calendar-overlay--quick-slots::before,
.form-calendar-overlay.form-calendar-overlay--quick-slots::after {
    content: none;
    animation: none !important;
}

.form-calendar-overlay__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-height: none;
    overflow: visible;
    overscroll-behavior: none;
    border-radius: 1.5rem;
    border: 1px solid rgba(var(--modal-design-border-rgb), var(--intake-shell-border-alpha));
    background: var(--intake-shell-surface);
    box-shadow: var(--intake-shell-shadow);
    backdrop-filter: var(--intake-shell-backdrop);
    -webkit-backdrop-filter: var(--intake-shell-backdrop);
    padding: clamp(0.38rem, 1vh, 0.65rem) clamp(0.35rem, 1.6vw, 0.8rem) clamp(0.45rem, 1.2vh, 0.74rem);
    display: flex;
    flex-direction: column;
}

.form-calendar-overlay:not(.form-calendar-overlay--quick-slots) .form-calendar-overlay__panel {
    border: 1px solid rgba(var(--modal-design-border-rgb), var(--intake-shell-border-alpha));
    background: var(--intake-shell-surface);
    box-shadow: var(--intake-shell-shadow);
    backdrop-filter: var(--intake-shell-backdrop);
    -webkit-backdrop-filter: var(--intake-shell-backdrop);
}

.form-calendar-overlay__panel.form-calendar-overlay__panel--reveal-pending,
.form-calendar-overlay__panel.form-calendar-overlay__panel--reveal-pending.form-calendar-overlay__panel--reveal-ready {
    transition:
        opacity 460ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 620ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, filter, transform;
}

.form-calendar-overlay__panel.form-calendar-overlay__panel--reveal-pending {
    opacity: 0;
    filter: blur(clamp(2.4rem, 7.8vw, 4.4rem));
    transform: translateY(0.55rem) scale(0.986);
    pointer-events: none;
}

.form-calendar-overlay__panel.form-calendar-overlay__panel--reveal-pending.form-calendar-overlay__panel--reveal-ready {
    opacity: 1;
    filter: blur(0);
    transform: none;
    pointer-events: auto;
}

.form-calendar-overlay__panel.form-calendar-overlay__panel--compact {
    width: min(42rem, 100%);
    height: auto;
    max-height: none;
    margin: 0 auto;
    border-radius: 1.5rem;
    border: 1px solid rgba(var(--modal-design-border-rgb), var(--intake-shell-border-alpha));
    background: var(--intake-shell-surface);
    backdrop-filter: var(--intake-shell-backdrop);
    -webkit-backdrop-filter: var(--intake-shell-backdrop);
    box-shadow: var(--intake-shell-shadow);
    padding: clamp(1rem, 2.6vh, 1.35rem) clamp(0.82rem, 2.8vw, 1.2rem) clamp(0.9rem, 2.5vh, 1.2rem);
    overflow: visible;
    transition: none;
    isolation: isolate;
}

.form-calendar-overlay.form-calendar-overlay--quick-slots {
    align-items: flex-start;
    justify-content: center;
    padding: clamp(0.8rem, 2.8vh, 1.35rem) clamp(0.48rem, 2.6vw, 1.05rem) clamp(1.05rem, 3vh, 1.55rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
}

.form-calendar-overlay.form-calendar-overlay--quick-slots .form-calendar-overlay__panel.form-calendar-overlay__panel--compact {
    width: min(42rem, 100%);
    margin: 0 auto;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
}

.form-calendar-overlay.form-calendar-overlay--quick-slots.form-calendar-overlay--quick-slots-loading {
    align-items: center;
    padding: clamp(0.8rem, 2.8vh, 1.35rem) clamp(0.48rem, 2.6vw, 1.05rem);
}

.form-calendar-overlay.form-calendar-overlay--quick-slots.form-calendar-overlay--quick-slots-loading .form-calendar-overlay__panel.form-calendar-overlay__panel--compact {
    max-height: min(40rem, calc(100dvh - 1.6rem));
    overflow-x: visible;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.form-calendar-overlay.form-calendar-overlay--quick-slots .form-calendar-overlay__panel.form-calendar-overlay__panel--compact::before {
    content: none;
    animation: none !important;
}

.form-calendar-overlay.form-calendar-overlay--quick-slots .form-calendar-overlay__panel.form-calendar-overlay__panel--compact>* {
    position: relative;
    z-index: 1;
}

.form-calendar-overlay__close {
    position: absolute;
    left: auto;
    right: clamp(0.7rem, 1.4vw, 0.95rem);
    top: clamp(0.72rem, 1.5vh, 0.98rem);
    transform: none;
    width: 2.05rem;
    height: 2.05rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16));
    color: #ffffff;
    font-size: 0;
    line-height: 0;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 4px 12px rgba(56, 41, 30, 0.28);
    backdrop-filter: blur(6px) saturate(112%);
    -webkit-backdrop-filter: blur(6px) saturate(112%);
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.35);
    z-index: 80;
}

.form-calendar-overlay__close::before {
    content: "\00d7";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.22rem;
    line-height: 1;
    font-weight: 800;
    pointer-events: none;
}

.form-calendar-overlay.form-calendar-overlay--quick-slots .form-calendar-overlay__close {
    left: auto;
    right: clamp(0.58rem, 2.1vw, 0.92rem);
    top: clamp(0.56rem, 1.7vh, 0.82rem);
    border-color: rgba(255, 255, 255, 0.82);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.2));
    color: #ffffff;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 120 !important;
}

#formCalendarOverlayPanel {
    position: relative;
}

#formCalendarOverlayCloseBtn {
    position: absolute !important;
    top: clamp(0.74rem, 2vw, 0.95rem) !important;
    right: clamp(0.74rem, 2vw, 0.95rem) !important;
    left: auto !important;
    transform: none !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(var(--site-bg-light-rgb), 0.74) !important;
    background: var(--modal-lock-button-bg) !important;
    color: var(--modal-lock-button-text) !important;
    -webkit-text-fill-color: var(--modal-lock-button-text) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 0.56rem 1.18rem rgba(var(--site-bg-shadow-rgb), 0.34),
        0 0.12rem 0.28rem rgba(var(--site-bg-shadow-rgb), 0.22) !important;
    text-shadow: none !important;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
    z-index: 140 !important;
}

#formCalendarOverlayCloseBtn:hover,
#formCalendarOverlayCloseBtn:focus-visible {
    background: var(--modal-lock-button-bg-hover) !important;
    border-color: rgba(var(--site-bg-light-rgb), 0.82) !important;
    color: var(--modal-lock-button-text) !important;
    -webkit-text-fill-color: var(--modal-lock-button-text) !important;
    transform: translateY(-1px) !important;
}

#formCalendarOverlayCloseBtn:active {
    background: var(--modal-lock-button-bg-active) !important;
    border-color: rgba(var(--site-bg-light-rgb), 0.76) !important;
    transform: translateY(0) !important;
}

.form-calendar-overlay.form-calendar-overlay--quick-slots .form-quick-slots__sticky {
    padding-right: clamp(2.6rem, 7.2vw, 3.2rem);
}

.form-calendar-overlay__mount {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    overscroll-behavior: none;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: clamp(1.55rem, 3.6vh, 2.1rem) 0 0;
}

.form-calendar-overlay__mount .calendar-scale-wrapper {
    width: 100%;
    margin: 0 auto;
    overflow: visible;
}

.form-calendar-overlay__mount .calendar-scale-inner {
    transform-origin: top left;
}

.form-calendar-overlay__mount #bookingCalendar {
    margin: 0;
}

.form-calendar-overlay__mount #bookingCalendar::before {
    display: none;
}

.form-calendar-overlay__mount--quick-slots {
    overflow: visible;
    overscroll-behavior: auto;
    padding: 0;
}

.form-calendar-overlay__mount--quick-slots.form-calendar-overlay__mount--quick-slots-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-calendar-overlay__panel--compact .form-calendar-overlay__mount--quick-slots {
    padding: 0;
}





















.form-quick-slots__hint {
    margin: 0.34rem 0 0;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    color: rgba(var(--modal-design-tone-rgb), 0.86);
    letter-spacing: 0.008em;
    text-shadow: none;
}

.form-quick-slots__sticky {
    margin: 0 0 0.62rem;
}

.form-quick-slots__title {
    margin: 0;
}

.form-quick-slots__header-divider {
    width: 100%;
    height: 1px;
    margin-top: 0.52rem;
    background: rgba(var(--booking-plaque-border-rgb), 0.24);
    pointer-events: none;
}

.form-quick-slots__no-date-btn {
    display: inline-flex;
    width: auto;
    min-width: min(100%, 12.5rem);
    max-width: min(100%, 15rem);
    margin: 0;
    padding: 0.72rem 0.95rem;
    border: 1px solid rgba(var(--booking-plaque-border-rgb), 0.46);
    border-radius: 0.8rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%);
    color: rgb(var(--modal-design-text-rgb));
    font-size: clamp(0.9rem, 2.8vw, 1rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.01em;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.form-quick-slots__no-date-btn:hover,
.form-quick-slots__no-date-btn:focus-visible {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.12) 100%);
    border-color: rgba(var(--booking-plaque-border-rgb), 0.7);
    transform: translateY(-1px);
    box-shadow: 0 0.52rem 1rem rgba(var(--booking-plaque-shadow-rgb), 0.23);
    outline: none;
}

.form-quick-slots__no-date-below {
    width: 100%;
    margin: 0.95rem 0 0;
    padding-top: 0;
    border-top: none;
    display: flex;
    justify-content: center;
}

.form-quick-slots__no-date-below .form-quick-slots__no-date-btn {
    margin-top: 0;
}

.form-quick-slots__sticky-bottom {
    display: none;
}

.form-quick-slots__sticky-bottom::before {
    content: none;
}

.form-quick-slots__sticky-bottom::after {
    content: none;
}

.form-quick-slots__sticky-bottom>* {
    position: relative;
    z-index: 3;
    pointer-events: auto;
}

.form-quick-slots__sticky-bottom-text {
    margin: 0;
}

.form-quick-slots__list {
    display: grid;
    gap: 0.62rem;
    max-height: none;
    overflow: visible;
    padding: 0.1rem 0 0;
}

@keyframes quick-slots-skeleton-shimmer {
    from {
        background-position: 165% 0;
    }

    to {
        background-position: -165% 0;
    }
}

.form-quick-slots__item {
    width: 100%;
    margin: 0;
    border: 1px solid rgba(var(--booking-plaque-border-rgb), 0.4);
    border-radius: 0.82rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 100%),
        rgba(var(--booking-form-rgb), 0.36);
    color: rgb(var(--modal-design-text-rgb));
    padding: 0.76rem 0.84rem;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.78rem;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.form-quick-slots__item:focus-visible {
    border-color: rgba(var(--booking-plaque-border-rgb), 0.72);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.1) 100%),
        rgba(var(--booking-form-rgb), 0.5);
    box-shadow: 0 0.55rem 1.1rem rgba(var(--booking-plaque-shadow-rgb), 0.25);
    transform: translateY(-1px);
    outline: none;
}

.form-quick-slots__item:hover {
    transform: none !important;
}

.form-quick-slots__loading {
    width: auto;
    height: auto;
    display: grid;
    place-items: center;
    margin: 0 auto;
}

.form-quick-slots__loading-state {
    width: min(100%, 20rem);
    margin: 0 auto;
    display: grid;
    gap: 0.85rem;
    justify-items: center;
}

.form-quick-slots__loading .global-spinner__ring-wrap {
    width: clamp(7.9rem, 23vw, 9.4rem);
    height: clamp(7.9rem, 23vw, 9.4rem);
}

.form-quick-slots__loading .global-spinner__track {
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 10;
}

.form-quick-slots__loading .global-spinner__glow {
    stroke-width: 10;
    transition: stroke-dashoffset 220ms ease;
}

.form-quick-slots__loading .global-spinner__value {
    display: block !important;
    min-width: 4ch;
    font-size: clamp(1.02rem, 3.3vw, 1.2rem);
    letter-spacing: 0.05em;
    text-align: center;
}

@keyframes quickSlotsLoadingBarSweep {
    to {
        transform: translateX(100%);
    }
}

@keyframes quickSlotsLoaderSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes quickSlotsLoaderHypnotic {

    0%,
    100% {
        stroke-dashoffset: 228;
        opacity: 0.84;
        filter: drop-shadow(0 0 0.7rem rgba(255, 255, 255, 0.58)) drop-shadow(0 0 1.45rem rgba(255, 255, 255, 0.3));
    }

    50% {
        stroke-dashoffset: 144;
        opacity: 1;
        filter: drop-shadow(0 0 1.12rem rgba(255, 255, 255, 0.94)) drop-shadow(0 0 2.35rem rgba(255, 255, 255, 0.54));
    }
}

@keyframes quickSlotsLoaderTrackPulse {

    0%,
    100% {
        stroke-opacity: 0.46;
    }

    50% {
        stroke-opacity: 0.9;
    }
}

.form-quick-slots__item-date {
    font-size: 0.9rem;
    font-weight: 800;
    opacity: 0.94;
    white-space: nowrap;
}

.form-quick-slots__item-time {
    font-size: 0.98rem;
    font-weight: 900;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.form-quick-slots__empty {
    margin: 0.3rem auto 0;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 248, 239, 0.92);
}



.camera-capture__panel {
    width: min(35rem, 96vw);
    border-radius: 1.5rem;
    border: 1px solid rgba(var(--modal-design-border-rgb), var(--intake-shell-border-alpha));
    background: var(--intake-shell-surface);
    box-shadow: var(--intake-shell-shadow);
    backdrop-filter: var(--intake-shell-backdrop);
    -webkit-backdrop-filter: var(--intake-shell-backdrop);
    padding: 1rem;
}

.camera-capture__title {
    margin: 0 0 0.7rem 0;
    color: #fff8ef;
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 1px 10px rgba(30, 19, 12, 0.3);
}

.camera-capture__video-wrap {
    border-radius: 0.78rem;
    overflow: hidden;
    background: #000;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.camera-capture__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.camera-capture__status {
    margin: 0.6rem 0 0.7rem;
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(var(--modal-design-tone-rgb), 0.92);
    text-align: center;
    min-height: 1.05rem;
}

.camera-capture__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.camera-capture__actions .contact-form__submit-button {
    margin: 0 !important;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.96);
    color: rgb(var(--modal-design-tone-rgb));
}

.camera-capture__actions .contact-form__submit-button:hover,
.camera-capture__actions .contact-form__submit-button:focus-visible {
    background: rgba(255, 255, 255, 0.95);
    color: rgb(var(--modal-design-tone-rgb));
}

/* Custom Dropdown (Select Replacement) */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
    margin-bottom: 0;
}

.custom-select-wrapper.dropdown-open {
    position: relative;
    z-index: 1000000;
}

.custom-select {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 900;
}

.custom-select__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    padding-right: 2.8rem;
    /* Space for arrow */
    font-size: 1rem;
    color: var(--text-white);
    background: linear-gradient(146deg, rgba(212, 184, 154, 0.2) 0%, rgba(139, 111, 90, 0.2) 100%);
    border: 1px solid rgba(191, 167, 146, 0.5);
    border-radius: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    line-height: 1.3;
    font-weight: 800;
    box-shadow: 0 4px 0 rgba(58, 42, 26, 0.35);
}

/* Arrow indicator */
.custom-select__trigger::after {
    content: '';
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

.custom-select.open .custom-select__trigger {
    background: #f4ece2;
    color: #5a3d2a;
    box-shadow: 0 4px 0 rgba(58, 42, 26, 0.45);
}

.custom-select.open .custom-select__trigger::after {
    transform: translateY(-50%) rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235a3d2a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.custom-select__trigger span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 800;
}

#bookingModal #cityCustomSelect.city-search-active .custom-select__trigger {
    cursor: text;
}

#bookingModal #cityCustomSelect .city-custom-select__search-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    opacity: 0;
    font: inherit;
}

#bookingModal #cityCustomSelect.city-search-active .custom-select__trigger span {
    display: inline-flex;
    align-items: center;
    min-width: 0.2ch;
}

#bookingModal #cityCustomSelect.city-search-active .custom-select__trigger span::after {
    content: '';
    display: inline-block;
    width: 1.5px;
    height: 1.05em;
    margin-left: 0.08em;
    background: currentColor;
    opacity: 1;
    animation: citySelectCaretBlink 1s steps(1, end) infinite;
}

#bookingModal #cityCustomSelect.city-search-active .custom-select__trigger.city-search-empty span::after {
    margin-left: 0;
}

@keyframes citySelectCaretBlink {

    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

.custom-options {
    position: absolute;
    /* Hidden panels must not contribute to document scroll height. */
    display: none;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(242, 231, 218, 0.97);
    backdrop-filter: blur(1.3rem);
    -webkit-backdrop-filter: blur(1.3rem);
    z-index: 13000;
    border: none;
    border-radius: 1.6rem;
    /* All corners rounded */
    box-shadow: 0 5px 0 rgba(58, 42, 26, 0.28);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 0, 0);
    transition: all 0.3s ease;
    max-height: none;
    overflow: hidden;
    padding: 0.5rem 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(circle, #fff 98%, transparent 100%);
}

.custom-select.open .custom-options {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    transform: translate3d(0, 0, 0) !important;
    z-index: 999999 !important;
    max-height: clamp(200px, 50vh, 400px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#bookingModal .custom-select__trigger.has-selection-check {
    padding-right: 2.8rem;
}

#bookingModal .custom-select__trigger.has-selection-check::before {
    content: none;
}

.custom-option {
    position: relative;
    display: block;
    padding: 0.8rem 1.6rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: rgba(80, 60, 40, 0.85);
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
}

.custom-option.selected {
    background-color: rgba(139, 111, 90, 0.12);
    color: #3a2a1a;
}

.custom-option.selected::after {
    content: "";
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.95rem;
    height: 0.95rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%235a3d2a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    filter: drop-shadow(0 0 0.12rem rgba(90, 61, 42, 0.24));
}

/* Show selected checkmark only inside opened dropdown lists. */
.custom-select:not(.open) .custom-option.selected::after {
    content: none;
}

#bookingModal #cityCustomSelect .custom-option.selected::after {
    content: "" !important;
    position: absolute !important;
    right: 1.1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}



#bookingModal .custom-option.selected {
    background-color: rgba(var(--modal-design-tone-rgb), 0.16) !important;
    /* TODO-DELETE if stable after test: color: rgb(var(--modal-design-tone-rgb)) !important */
}

#bookingModal .custom-option.selected::after {
    width: 0.62rem;
    height: 0.95rem;
    border-right: 0.17rem solid currentColor;
    border-bottom: 0.17rem solid currentColor;
    /* TODO-DELETE if stable after test: background-image: none !important */
    transform: translateY(-62%) rotate(45deg);
    filter: drop-shadow(0 0 0.12rem rgba(var(--modal-design-tone-rgb), 0.2));
}

#bookingModal .file-attach__btn--camera {
    border-color: rgba(255, 255, 255, 0.96) !important;
    background: #ffffff !important;
    color: rgb(var(--modal-design-tone-rgb)) !important;
}

#bookingModal .file-attach__btn--camera .file-attach__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#bookingModal .file-attach__btn--camera:hover .file-attach__icon-svg,
#bookingModal .file-attach__btn--camera:hover .file-attach__icon-svg--camera,
#bookingModal .file-attach__btn--camera:focus-visible .file-attach__icon-svg,
#bookingModal .file-attach__btn--camera:focus-visible .file-attach__icon-svg--camera {
    color: rgb(var(--modal-design-tone-rgb)) !important;
    stroke: rgb(var(--modal-design-tone-rgb)) !important;
}

#bookingModal .file-attach__btn:hover,
#bookingModal .file-attach__btn:focus-visible {
    color: rgb(var(--modal-design-tone-rgb)) !important;
}

#bookingModal .file-attach__btn--camera:hover,
#bookingModal .file-attach__btn--camera:focus-visible {
    background: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.96) !important;
}

#bookingModal .file-attach__btn--camera:hover .file-attach__icon,
#bookingModal .file-attach__btn--camera:focus-visible .file-attach__icon {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#bookingModal .file-attach__btn--camera .file-attach__icon-svg,
#bookingModal .file-attach__btn--camera .file-attach__icon-svg--camera,
#bookingModal .file-attach__btn--camera .file-attach__icon-svg--paperclip {
    color: rgb(var(--modal-design-tone-rgb)) !important;
    stroke: rgb(var(--modal-design-tone-rgb)) !important;
}

#bookingModal .file-attach__drop-zone-file--drag-over,
#bookingModal .file-attach.file-attach--drag-over .file-attach__drop-zone-file {
    border-color: var(--booking-attach-copy-color) !important;
}

#bookingModal .file-attach__drop-zone-file--drag-over .file-attach__btn,
#bookingModal .file-attach.file-attach--drag-over .file-attach__drop-zone-file .file-attach__btn {
    border-color: rgba(255, 255, 255, 0.92) !important;
    color: rgb(var(--modal-design-tone-rgb)) !important;
}

#bookingModal .file-attach__drop-zone-file--drag-over .file-attach__title,
#bookingModal .file-attach__drop-zone-file--drag-over .file-attach__icon,
#bookingModal .file-attach__drop-zone-file--drag-over .file-attach__icon-svg,
#bookingModal .file-attach__drop-zone-file--drag-over p,
#bookingModal .file-attach.file-attach--drag-over .file-attach__drop-zone-file .file-attach__title,
#bookingModal .file-attach.file-attach--drag-over .file-attach__drop-zone-file .file-attach__icon,
#bookingModal .file-attach.file-attach--drag-over .file-attach__drop-zone-file .file-attach__icon-svg,
#bookingModal .file-attach.file-attach--drag-over .file-attach__drop-zone-file p {
    color: rgb(var(--modal-design-tone-rgb)) !important;
    stroke: rgb(var(--modal-design-tone-rgb)) !important;
}


.footer-book-btn {
    position: relative;
    display: inline-block;
    padding: 0.72rem 1.85rem;
    background: var(--modal-lock-button-bg);
    color: var(--modal-lock-button-text);
    font-size: 0.9rem;
    font-weight: 800;
    border: 1px solid var(--modal-lock-button-bg);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    margin: 0 auto;
    overflow: visible;
    transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -1px 0 rgba(var(--site-bg-shadow-rgb), 0.24),
        0 0.56rem 1.18rem rgba(var(--site-bg-shadow-rgb), 0.28);
    min-width: 15rem;
}

.footer-book-btn::before {
    content: none;
}

.footer-book-btn:hover {
    transform: none;
    background: var(--modal-lock-button-bg-hover);
    border-color: var(--modal-lock-button-bg-hover);
    color: var(--modal-lock-button-text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        inset 0 -1px 0 rgba(var(--site-bg-shadow-rgb), 0.26),
        0 0.7rem 1.34rem rgba(var(--site-bg-shadow-rgb), 0.34);
}

.footer-book-btn:hover::before {
    content: none;
}

.footer-book-btn:hover #headerBookBtnText,
.footer-book-btn:hover #headerBookBtnText span,
.footer-book-btn:hover #footerBookBtnText,
.footer-book-btn:hover #footerBookBtnText span {
    color: var(--modal-lock-button-text) !important;
}

button,
[role="button"],
.footer-book-btn,
.contact-form__submit-button,
.calendar-nav-btn,
.file-attach__btn {
    transition: transform 0.2s ease;
}

button:hover,
[role="button"]:hover,
.footer-book-btn:hover,
.contact-form__submit-button:hover,
.calendar-nav-btn:hover,
.file-attach__btn:hover {
    transform: scale(1.01) !important;
}

.slot-btn,
.slot-btn:focus-visible {
    transform: none !important;
    transition: none !important;
}

/* Bottom book button: same font, keep existing dynamic sizes */
#footerBookBtn,
#footerBookBtnText,
#footerBookBtnText span {
    font-family: 'Lato', sans-serif !important;
}

/* Header BOOK button: slightly thicker visual weight */
#headerBookBtn {
    padding: 0.84rem 2.05rem;
    min-height: 3.5rem;
    border-width: 2px;
}

#headerBookBtnText,
#headerBookBtnText span {
    font-weight: 900 !important;
    letter-spacing: 0.05em;
}

.spark {
    position: absolute;
    width: var(--spark-size, 0.35rem);
    height: var(--spark-size, 0.35rem);
    pointer-events: none;
    opacity: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 1.8l2.68 6.5 7.01.56-5.34 4.58 1.62 6.82L12 16.89 6.03 20.26l1.62-6.82-5.34-4.58 7.01-.56z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 3;
    filter: drop-shadow(0 0 0.55rem rgba(255, 255, 255, 1)) drop-shadow(0 0 1.15rem rgba(255, 255, 255, 0.8));
    will-change: transform, opacity;
    transform: translate(-50%, -50%) translate3d(0, 0, 0);
    animation: sparkle var(--spark-duration, 500ms) cubic-bezier(0.18, 0.72, 0.24, 1) var(--spark-delay, 0ms) forwards;
}

@keyframes sparkle {
    0% {
        transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.38) rotate(var(--spark-rotate, 0deg));
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    72% {
        transform: translate(-50%, -50%) translate3d(var(--x-mid, 0px), var(--y-mid, 0px), 0) scale(1.1) rotate(calc(var(--spark-rotate, 0deg) + 130deg));
        opacity: 0.95;
    }

    100% {
        transform: translate(-50%, -50%) translate3d(var(--x-end, 0px), var(--y-end, 0px), 0) scale(0.9) rotate(calc(var(--spark-rotate, 0deg) + 205deg));
        opacity: 0;
    }
}

.footer {
    position: relative;
}

#footerEmberLayer {
    position: absolute;
    left: 50%;
    bottom: -1.45rem;
    width: min(32rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    height: min(16rem, 34vh);
    pointer-events: none;
    overflow: visible;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.35s ease;
}

#footerEmberLayer.footer-ember-layer--active {
    opacity: 1;
}

html.modal-is-open #footerEmberLayer {
    opacity: 0 !important;
}

.footer-ember {
    position: absolute;
    left: 50%;
    bottom: -0.9rem;
    width: var(--ember-size, 0.32rem);
    height: var(--ember-size, 0.32rem);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 32% 32%,
            rgba(255, 253, 245, 0.98) 0 24%,
            rgba(255, 229, 166, 0.96) 42%,
            rgba(255, 174, 78, 0.76) 66%,
            rgba(255, 255, 255, 0) 100%);
    box-shadow:
        0 0 0.55rem rgba(255, 226, 155, 0.72),
        0 0 1.2rem rgba(255, 176, 91, 0.52),
        0 0 2rem rgba(255, 139, 62, 0.28);
    transform: translate3d(0, 0, 0) scale(1);
    will-change: transform, opacity;
    animation: footerEmberRise var(--ember-duration, 7200ms) linear var(--ember-delay, 0ms) forwards;
}

@keyframes footerEmberRise {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: var(--ember-start-opacity, 0);
    }

    8% {
        transform: translate3d(calc(var(--ember-drift, 0px) * 0.25), calc(var(--ember-rise-y, -720px) * 0.08), 0) scale(0.97);
        opacity: var(--ember-entry-opacity, var(--ember-opacity, 0.92));
    }

    35% {
        transform: translate3d(calc(var(--ember-drift, 0px) * -0.2), calc(var(--ember-rise-y, -720px) * 0.35), 0) scale(0.82);
        opacity: calc(var(--ember-opacity, 0.92) * 0.74);
    }

    60% {
        transform: translate3d(calc(var(--ember-drift, 0px) * 0.18), calc(var(--ember-rise-y, -720px) * 0.6), 0) scale(0.68);
        opacity: calc(var(--ember-opacity, 0.92) * 0.54);
    }

    75% {
        transform: translate3d(calc(var(--ember-drift, 0px) * -0.12), calc(var(--ember-rise-y, -720px) * 0.78), 0) scale(0.46);
        opacity: calc(var(--ember-opacity, 0.92) * 0.32);
    }

    90% {
        transform: translate3d(calc(var(--ember-drift, 0px) * 0.08), calc(var(--ember-rise-y, -720px) * 0.9), 0) scale(0.3);
        opacity: 0;
    }

    100% {
        transform: translate3d(calc(var(--ember-drift, 0px) * 0.04), var(--ember-rise-y, -720px), 0) scale(0.18);
        opacity: 0;
    }
}

@keyframes hypnoticPulse {
    0% {
        text-shadow: 0 0 0.3rem rgba(255, 255, 255, 0.2);
        opacity: 0.6;
    }

    50% {
        text-shadow: 0 0 1.3rem rgba(255, 255, 255, 0.9), 0 0 0.6rem rgba(255, 255, 255, 0.7);
        opacity: 1;
        color: #fff;
    }

    100% {
        text-shadow: 0 0 0.3rem rgba(255, 255, 255, 0.2);
        opacity: 0.6;
    }
}

/* Day Navigation in Slots Section */
.slots-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2.5rem 0 2rem;
    padding: 0;
    width: 100%;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

#slotsDayDisplay {
    font-size: clamp(1.1rem, 3.2vw, 1.45rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(var(--modal-design-text-rgb), 0.98);
    text-shadow: 0 1px 10px rgba(var(--calendar-glass-shadow-rgb), 0.24);
    text-align: center;
    flex-grow: 1;
    margin: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
}

/* Block: Month Switch Overlay */
.month-switch-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(18, 12, 8, 0.45);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 35000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s linear;
}

.month-switch-overlay--active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.month-switch-overlay__progress {
    width: min(84vw, 36rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}

.month-switch-overlay__ring-wrap {
    width: 11.3rem;
    height: 11.3rem;
    position: relative;
    display: grid;
    place-items: center;
}

.month-switch-overlay__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.month-switch-overlay__track {
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 12;
}

.month-switch-overlay__fill {}