/**
 * Sploot booking — Mobiscroll week calendar (staging).
 * Matches live booking UI: warm beige surface (#f5efe9), dark teal type, coral selection + nav + availability dots.
 * Mobiscroll theme tokens: https://mobiscroll.com/docs/javascript/theming/css-variables
 */

/* -------------------------------------------------------------------------- */
/* Sploot palette (screenshot / Webflow parity)                                 */
/* -------------------------------------------------------------------------- */
#txtBookingDateCalendar,
#txtBookingDateCalendar.mbsc-ios,
#txtBookingDateCalendar.mbsc-material,
#txtBookingDateCalendar.mbsc-windows {
    --sploot-page-beige: #f5efe9;
    --sploot-teal: #1a3c3f;
    --sploot-coral: #e86c5d;
    --sploot-coral-alt: var(--brand--burnt-sienna, #ea6460);
    --sploot-coral-hover: #d85a4c;
    --sploot-weekday-muted: rgba(26, 60, 63, 0.45);
    --sploot-card-radius: 0.75rem;
    --sploot-card-shadow: 0 3px 3px -1.5px rgba(10, 13, 18, 0.04), 0 8px 8px -4px rgba(10, 13, 18, 0.06), 0 20px 24px -4px rgba(10, 13, 18, 0.08);
    /* Mobiscroll datepicker / calendar variables (datepicker maps these to calendar UI) */
    --mbsc-datepicker-selected-color: var(--sploot-coral);
    --mbsc-datepicker-selected-text: #ffffff;
    --mbsc-datepicker-bg-color: var(--sploot-page-beige);
    --mbsc-datepicker-border-color: rgba(26, 60, 63, 0.12);
    --mbsc-datepicker-text-color: var(--sploot-teal);
    --mbsc-datepicker-text-soft: var(--sploot-weekday-muted);
    --mbsc-datepicker-highlight: rgba(232, 108, 93, 0.14);
    --mbsc-datepicker-focus: var(--sploot-coral);
    --mbsc-datepicker-mark: var(--sploot-coral);
    --mbsc-calendar-accent: var(--sploot-coral);
    --mbsc-calendar-on-accent: #ffffff;
    --mbsc-calendar-bg: var(--sploot-page-beige);
    --mbsc-calendar-text: var(--sploot-teal);
    --mbsc-calendar-border: rgba(26, 60, 63, 0.12);
    --mbsc-calendar-highlight: rgba(232, 108, 93, 0.14);
    --mbsc-calendar-mark: var(--sploot-coral);
    --mbsc-calendar-focus: var(--sploot-coral);
    --mbsc-calendar-week-nr: var(--sploot-weekday-muted);
    /* iOS theme fallbacks (auto theme often applies .mbsc-ios) */
    --mbsc-ios-accent: var(--sploot-coral);
    --mbsc-ios-text: var(--sploot-teal);
    --mbsc-ios-text-soft: var(--sploot-weekday-muted);
    --mbsc-ios-background: var(--sploot-page-beige);
    --mbsc-ios-border: rgba(26, 60, 63, 0.12);
    font-family: "Outfit VF", Arial, sans-serif;
    /* Isolate from Webflow parent line-height; children still need explicit rules where Mobiscroll sets em-based lh */
    line-height: 1.25rem !important;
    -webkit-font-smoothing: antialiased;
    color: var(--sploot-teal);
}

    /* .mbsc-font + inner shells — reassert lh (parent page styles won’t inherit into these with higher specificity) */
    #txtBookingDateCalendar.mbsc-font,
    #txtBookingDateCalendar .mbsc-font,
    #txtBookingDateCalendar .mbsc-datepicker,
    #txtBookingDateCalendar .mbsc-calendar,
    #txtBookingDateCalendar .mbsc-calendar-body,
    #txtBookingDateCalendar .mbsc-calendar-body-inner,
    #txtBookingDateCalendar .mbsc-calendar-slide,
    #txtBookingDateCalendar .mbsc-calendar-day-inner {
        line-height: 1.25rem !important;
    }

    /* Mobiscroll root often uses .mbsc-font — keep UI type aligned with Sploot / Webflow */
    #txtBookingDateCalendar.mbsc-font,
    #txtBookingDateCalendar .mbsc-font {
        font-family: "Outfit VF", Arial, sans-serif !important;
    }

    /* Card shell — page-wash beige */
    #txtBookingDateCalendar.mbsc-datepicker-inline,
    #txtBookingDateCalendar.mbsc-datepicker.mbsc-datepicker-inline {
        border-radius: var(--sploot-card-radius) !important;
        box-shadow: var(--sploot-card-shadow) !important;
        border: 1px solid rgba(26, 60, 63, 0.1) !important;
        background: var(--sploot-page-beige) !important;
        overflow: hidden;
    }

    /* Month + year title */
    #txtBookingDateCalendar .mbsc-calendar-header,
    #txtBookingDateCalendar .mbsc-calendar-title,
    #txtBookingDateCalendar .mbsc-calendar-month-text,
    #txtBookingDateCalendar .mbsc-calendar-year-text {
        font-weight: 600;
        line-height: 1.25rem !important;
        color: var(--sploot-teal) !important;
        letter-spacing: 0.02em;
    }

    /* Prev / next: coral chevrons (default + hover) */
    #txtBookingDateCalendar .mbsc-calendar-button.mbsc-button {
        color: var(--sploot-coral) !important;
        border-radius: 0.25rem;
        transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    }

        #txtBookingDateCalendar .mbsc-calendar-button.mbsc-button:hover,
        #txtBookingDateCalendar .mbsc-calendar-button.mbsc-button:focus-visible {
            background-color: rgba(232, 108, 93, 0.12) !important;
            color: var(--sploot-coral-hover) !important;
        }

        #txtBookingDateCalendar .mbsc-calendar-button.mbsc-button.mbsc-disabled {
            opacity: 0.35;
            color: var(--sploot-weekday-muted) !important;
        }

    /* Weekday row */
    #txtBookingDateCalendar .mbsc-calendar-week-day {
        font-weight: 600;
        font-size: 0.65rem;
        line-height: 1.25rem !important;
        letter-spacing: 0.06em;
        color: var(--sploot-weekday-muted) !important;
        opacity: 1 !important;
    }

    /*
     * Week / datepicker day label: Mobiscroll uses role="button" with BOTH classes:
     * .mbsc-calendar-cell-text.mbsc-calendar-day-text (not .mbsc-calendar-day-text alone in v6 week row).
     * Margin only left/right — vertical margin pushes .mbsc-calendar-marks down (extra gap under circle).
     */
    #txtBookingDateCalendar .mbsc-calendar-cell-text.mbsc-calendar-day-text {
        font-weight: 600;
        font-size: 0.9rem;
        line-height: 1.25rem !important;
        margin: 0 0.375em;
        color: var(--sploot-teal);
    }

    #txtBookingDateCalendar .mbsc-calendar-day.mbsc-disabled .mbsc-calendar-cell-text.mbsc-calendar-day-text {
        color: rgba(26, 60, 63, 0.28) !important;
    }

    /*
     * Selected day label: Mobiscroll may put .mbsc-selected on .mbsc-calendar-day (ancestor)
     * or on the button itself (.mbsc-calendar-cell-text.mbsc-calendar-day-text.mbsc-selected).
     */
    #txtBookingDateCalendar .mbsc-selected .mbsc-calendar-cell-text.mbsc-calendar-day-text,
    #txtBookingDateCalendar .mbsc-calendar-cell-text.mbsc-calendar-day-text.mbsc-selected {
        background: var(--sploot-coral) !important;
        color: #ffffff !important;
        line-height: 1.25rem !important;
        margin: 0 0.375em;
        border-radius: 50% !important;
        box-shadow: none !important;
    }

    #txtBookingDateCalendar .mbsc-calendar-day:not(.mbsc-disabled):hover .mbsc-calendar-cell-text.mbsc-calendar-day-text {
        background: rgba(232, 108, 93, 0.12) !important;
        color: var(--sploot-teal) !important;
        border-radius: 50% !important;
    }

    #txtBookingDateCalendar .mbsc-calendar-day.mbsc-selected:hover .mbsc-calendar-cell-text.mbsc-calendar-day-text,
    #txtBookingDateCalendar .mbsc-calendar-cell-text.mbsc-calendar-day-text.mbsc-selected:hover {
        background: var(--sploot-coral-hover) !important;
        color: #ffffff !important;
    }

    /* Today ring when not selected */
    #txtBookingDateCalendar .mbsc-calendar-day.mbsc-calendar-today:not(.mbsc-selected) .mbsc-calendar-cell-text.mbsc-calendar-day-text {
        line-height: 1.25rem !important;
        box-shadow: inset 0 0 0 2px var(--sploot-coral);
        border-radius: 50%;
        color: var(--sploot-teal) !important;
        background: transparent !important;
    }

    /* Selected day: hide marks (sibling of button, or inside .mbsc-selected day) */
    #txtBookingDateCalendar .mbsc-selected .mbsc-calendar-marks,
    #txtBookingDateCalendar .mbsc-calendar-cell-text.mbsc-calendar-day-text.mbsc-selected ~ .mbsc-calendar-marks {
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Availability marks: centered row, coral dots */
    #txtBookingDateCalendar .mbsc-calendar-marks {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
        text-align: center;
    }

    #txtBookingDateCalendar .mbsc-calendar-mark.sploot-mobiscroll-slot-mark,
    .mbsc-calendar-mark.sploot-mobiscroll-slot-mark {
        background: var(--sploot-coral-alt) !important;
        width: 6px !important;
        height: 6px !important;
        min-width: 6px !important;
        min-height: 6px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        vertical-align: middle;
    }

    #txtBookingDateCalendar .mbsc-calendar-body-inner {
        padding-bottom: 0.65rem;
    }