/* ASSALAS BOOKING MOBILE V3.1
   MOBILE WEB UNIQUEMENT <= 768px
   - Voyageurs : portail centre dans le viewport
   - Transferts / Activites : Flatpickr force sur mobile
   Desktop et APK non concernes.
*/

@media (max-width: 768px) {

    /* Neutralise l'ancien voile V2.9, remplace par un vrai overlay DOM. */
    body.home-premium-v2.abr-v29-travelers-open::before {
        display: none !important;
    }

    body.home-premium-v2.abr-v31-lock {
        overflow: hidden !important;
    }

    .abr-v31-overlay {
        position: fixed !important;
        inset: 0 !important;
        display: none;
        background: rgba(8, 26, 51, .38) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        z-index: 2147482000 !important;
    }

    .abr-v31-overlay.is-open {
        display: block !important;
    }

    /* ======================================================
       VOYAGEURS : le dropdown est deplace directement dans body
       ====================================================== */

    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;

        display: none !important;

        width: min(360px, calc(100vw - 24px)) !important;
        min-width: 0 !important;
        max-width: 360px !important;

        max-height: calc(100svh - 80px) !important;

        margin: 0 !important;
        padding: 16px 15px !important;

        transform: translate(-50%, -50%) !important;

        border: 1px solid #d7e3f0 !important;
        border-radius: 20px !important;

        background: #ffffff !important;

        box-shadow:
            0 28px 68px rgba(5, 25, 55, .30),
            inset 0 1px 0 rgba(255,255,255,.9) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        z-index: 2147483000 !important;
        overscroll-behavior: contain !important;
    }

    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal.is-open {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal h4 {
        margin: 0 34px 10px 0 !important;
        padding: 0 0 11px !important;

        border-bottom: 1px solid #e8eef6 !important;

        color: #12345f !important;

        font-size: 18px !important;
        line-height: 1.1 !important;
        font-weight: 850 !important;
    }

    .abr-v31-travelers-close {
        position: absolute !important;
        top: 11px !important;
        right: 11px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 32px !important;
        height: 32px !important;

        padding: 0 !important;

        border: 1px solid #d6e2ef !important;
        border-radius: 10px !important;

        background: #f7fbff !important;
        color: #17375e !important;

        font-size: 19px !important;
        line-height: 1 !important;

        z-index: 3 !important;
    }

    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal .traveler-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;

        gap: 10px !important;

        min-height: 58px !important;

        margin: 0 !important;
        padding: 9px 0 !important;

        border-bottom: 1px solid #edf2f7 !important;
    }

    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal .traveler-row strong {
        display: block !important;
        color: #14355d !important;
        font-size: 15px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
    }

    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal .traveler-row small {
        display: block !important;
        margin-top: 3px !important;
        color: #8192a8 !important;
        font-size: 10.5px !important;
        line-height: 1.15 !important;
    }

    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal .counter {
        display: grid !important;
        grid-template-columns: 36px 28px 36px !important;
        align-items: center !important;

        gap: 5px !important;
        min-width: 110px !important;
    }

    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal .counter button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 1px solid #cbdcf0 !important;
        border-radius: 50% !important;

        background: #f7fbff !important;
        color: #0873f6 !important;

        font-size: 19px !important;
        line-height: 1 !important;
        font-weight: 850 !important;
    }

    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal .counter > span {
        min-width: 28px !important;
        text-align: center !important;

        color: #12345f !important;
        font-size: 16px !important;
        line-height: 1 !important;
        font-weight: 850 !important;
    }

    /* La classe est deja geree par la carte separee V2.8. */
    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal #cabinClass {
        display: none !important;
    }

    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal #confirmTravelers {
        position: sticky !important;
        bottom: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 44px !important;

        margin: 12px 0 0 !important;
        padding: 10px 14px !important;

        border: 0 !important;
        border-radius: 12px !important;

        background: linear-gradient(135deg, #1688ff, #076bf0) !important;
        color: #ffffff !important;

        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 850 !important;

        box-shadow: 0 8px 18px rgba(7,108,241,.18) !important;
    }

    /* ======================================================
       CALENDRIERS FLATPICKR TRANSFERTS / ACTIVITES
       ====================================================== */

    body.home-premium-v2 .booking-container.abr-widget :is(#transferts,#activites)
    .abr-v31-date-alt {
        width: 100% !important;
        min-height: 52px !important;

        padding: 11px 42px 11px 13px !important;

        border: 1px solid #d7e3f1 !important;
        border-radius: 14px !important;

        background:
            #ffffff
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230877f8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E")
            calc(100% - 14px) center / 18px 18px
            no-repeat !important;

        color: #274b75 !important;

        font-size: 14px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;

        box-shadow: 0 2px 8px rgba(16,55,99,.035) !important;

        cursor: pointer !important;
    }

    body.home-premium-v2 .booking-container.abr-widget :is(#transferts,#activites)
    .abr-v31-date-alt:focus {
        outline: 0 !important;
        border-color: #75b3ff !important;
        box-shadow: 0 0 0 4px rgba(8,119,248,.12) !important;
    }

    /* Calendrier global mais uniquement celui auquel V3.1 ajoute la classe. */
    body > .flatpickr-calendar.abr-v31-calendar,
    body > .flatpickr-calendar.abr-v31-calendar.open {
        position: fixed !important;

        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;

        width: min(350px, calc(100vw - 22px)) !important;

        margin: 0 !important;

        transform: translate(-50%, -50%) !important;

        border: 1px solid #d6e3f1 !important;
        border-radius: 22px !important;

        background: #ffffff !important;

        box-shadow: 0 28px 70px rgba(6,29,61,.28) !important;

        overflow: hidden !important;

        z-index: 2147483001 !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-months {
        padding: 12px 8px 8px !important;
        background: linear-gradient(135deg, #0b72f3, #075ecd) !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-month,
    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-current-month,
    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-current-month input.cur-year,
    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
        color: #ffffff !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-prev-month,
    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-next-month {
        top: 10px !important;
        color: #ffffff !important;
        fill: #ffffff !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-weekdays {
        background: #f5f9ff !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar span.flatpickr-weekday {
        background: transparent !important;
        color: #526d8b !important;
        font-weight: 800 !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-days {
        padding: 8px 6px 6px !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-day {
        border-radius: 10px !important;
        color: #193a61 !important;
        font-weight: 650 !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-day.today {
        border-color: #0b76f7 !important;
        color: #0767e3 !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-day.selected,
    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-day.startRange,
    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-day.endRange {
        border-color: #0875f7 !important;
        background: #0875f7 !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-time {
        border-top: 1px solid #e2ebf5 !important;
        background: #f8fbff !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-time input,
    body > .flatpickr-calendar.abr-v31-calendar .flatpickr-time .flatpickr-am-pm {
        color: #17375e !important;
        font-weight: 800 !important;
    }
}

@media (max-width: 370px) {
    body.home-premium-v2 > #travelersDropdown.abr-v31-travelers-portal {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: calc(100svh - 58px) !important;
        padding: 13px 12px !important;
        border-radius: 17px !important;
    }

    body > .flatpickr-calendar.abr-v31-calendar,
    body > .flatpickr-calendar.abr-v31-calendar.open {
        width: calc(100vw - 14px) !important;
        border-radius: 18px !important;
    }
}