/* ASSALAS BOOKING MOBILE V2.6
   WEB MOBILE UNIQUEMENT <= 768px.
   Objectif : reproduire le formulaire mobile valide par la maquette.
   Desktop et application native / APK non concernes. */

.abr-mobile-v26-service-head,
.abr-mobile-v26-dates,
.abr-mobile-v26-class {
    display: none;
}

@media (max-width: 768px) {

    body.home-premium-v2 .booking-container.abr-widget {
        --abr-mobile-blue: #0877f8;
        --abr-mobile-blue2: #0a63ee;
        --abr-mobile-ink: #0f2f5d;
        --abr-mobile-muted: #7b8ea9;
        --abr-mobile-line: #d6e2f1;
        --abr-mobile-soft: #eef5ff;
        --abr-mobile-orange1: #ff9a15;
        --abr-mobile-orange2: #ff6b00;

        padding: 14px !important;
        border-radius: 24px !important;
        background: #ffffff !important;
        overflow: visible !important;
    }

    /* Titre du selecteur de services */
    body.home-premium-v2 .booking-container.abr-widget .abr-mobile-v26-service-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;

        margin: 0 0 12px !important;
        padding: 0 2px !important;

        color: var(--abr-mobile-ink) !important;
    }

    body.home-premium-v2 .booking-container.abr-widget .abr-mobile-v26-service-title {
        font-size: clamp(16px, 4.7vw, 21px) !important;
        line-height: 1.1 !important;
        font-weight: 850 !important;
        letter-spacing: -0.45px !important;
    }

    body.home-premium-v2 .booking-container.abr-widget .abr-mobile-v26-service-count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        min-height: 32px !important;
        padding: 0 11px !important;

        border-radius: 999px !important;
        background: #edf5ff !important;

        color: #0967eb !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    /* 5 services, tous visibles en meme temps */
    body.home-premium-v2 .booking-container.abr-widget > .booking-tabs {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-template-rows: 1fr !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        gap: 5px !important;
        padding: 0 !important;
        margin: 0 0 18px !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;

        overflow: visible !important;
        overflow-x: visible !important;
        scrollbar-width: none !important;
    }

    body.home-premium-v2 .booking-container.abr-widget > .booking-tabs::-webkit-scrollbar {
        display: none !important;
    }

    body.home-premium-v2 .booking-container.abr-widget > .booking-tabs > .booking-tab {
        display: flex !important;
        flex: none !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 76px !important;
        min-height: 76px !important;

        margin: 0 !important;
        padding: 7px 1px !important;
        gap: 6px !important;

        border: 1px solid #dce7f3 !important;
        border-radius: 15px !important;

        background: #ffffff !important;
        color: #415b7b !important;

        box-shadow: 0 5px 15px rgba(18,57,102,.055) !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
        touch-action: manipulation !important;
    }

    body.home-premium-v2 .booking-container.abr-widget > .booking-tabs > .booking-tab.active {
        border-color: #0b77fa !important;
        background: linear-gradient(145deg, #1788ff 0%, #0767ed 100%) !important;
        color: #ffffff !important;

        box-shadow:
            0 10px 20px rgba(8,105,238,.22),
            inset 0 1px 0 rgba(255,255,255,.24) !important;
    }

    body.home-premium-v2 .booking-container.abr-widget > .booking-tabs > .booking-tab > i {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;

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

    body.home-premium-v2 .booking-container.abr-widget > .booking-tabs > .booking-tab > .booking-tab-label {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

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

        font-family: Inter, "Segoe UI", Arial, sans-serif !important;
        font-size: clamp(7.4px, 2.25vw, 9.5px) !important;
        line-height: 1.02 !important;
        font-weight: 800 !important;
        letter-spacing: -0.22px !important;

        text-align: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;

        color: inherit !important;
    }

    body.home-premium-v2 .booking-container.abr-widget > .booking-tabs .booking-tab-new {
        display: none !important;
    }

    /*
     * FORMULAIRE VOLS - mobile uniquement
     */
    body.home-premium-v2 .booking-container.abr-widget #vols.abr-panel.booking-content.active:not(.multi-mode) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        gap: 10px !important;

        position: relative !important;
        align-items: stretch !important;
    }

    /* Choix aller-retour / simple / multidestination sur UNE ligne */
    body.home-premium-v2 .booking-container.abr-widget #vols .trip-types {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        display: grid !important;
        grid-template-columns: 1fr .92fr 1.25fr !important;

        width: 100% !important;
        gap: 7px !important;
        margin: 0 0 3px !important;
        padding: 0 !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .trip-option {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;

        padding: 7px 4px !important;

        border: 1px solid #d9e4f1 !important;
        border-radius: 999px !important;

        background: #ffffff !important;
        color: #375476 !important;

        font-size: clamp(9.5px, 2.85vw, 12px) !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: -0.15px !important;

        text-align: center !important;
        white-space: nowrap !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .trip-option.active {
        border-color: transparent !important;
        background: linear-gradient(135deg, #1686ff, #086bf1) !important;
        color: #ffffff !important;
        box-shadow: 0 7px 16px rgba(8,107,241,.18) !important;
    }

    /* Depart / Arrivee */
    body.home-premium-v2 .booking-container.abr-widget #vols .abr-origin {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .abr-destination {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols #swapAirports {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        justify-self: center !important;
        align-self: center !important;

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

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

        z-index: 10 !important;
        transform: none !important;

        border: 4px solid #ffffff !important;
        background: #ffffff !important;
        color: #0873f6 !important;

        box-shadow:
            0 0 0 1px #cbdcf1,
            0 6px 15px rgba(17,59,108,.13) !important;
    }

    /* Champs plus compacts comme la reference */
    body.home-premium-v2 .booking-container.abr-widget #vols .abr-field,
    body.home-premium-v2 .booking-container.abr-widget #vols .abr-mobile-v26-class {
        height: 84px !important;
        min-height: 84px !important;

        padding: 13px 9px 11px 56px !important;

        border: 1px solid var(--abr-mobile-line) !important;
        border-radius: 15px !important;

        background: #ffffff !important;
        box-shadow: 0 2px 7px rgba(16,55,99,.035) !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .abr-field-icon,
    body.home-premium-v2 .booking-container.abr-widget #vols .abr-mobile-v26-icon {
        position: absolute !important;
        left: 9px !important;
        top: 50% !important;

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

        width: 38px !important;
        min-width: 38px !important;
        height: 46px !important;

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

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

        background: #edf5ff !important;
        color: #0875f7 !important;

        transform: translateY(-50%) !important;

        font-size: 18px !important;
        pointer-events: none !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .abr-field .field-text > small,
    body.home-premium-v2 .booking-container.abr-widget #vols .abr-mobile-v26-label {
        display: block !important;
        margin: 0 0 5px !important;

        color: #28476d !important;

        font-size: clamp(9.5px, 2.6vw, 11px) !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .abr-field input:not([type="hidden"]),
    body.home-premium-v2 .booking-container.abr-widget #vols .travelers-summary,
    body.home-premium-v2 .booking-container.abr-widget #vols .abr-mobile-v26-class select {
        color: #7386a1 !important;

        font-size: clamp(11px, 3.1vw, 14px) !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
    }

    /* Ancien champ de plage de dates : garde sa place/son ancrage flatpickr,
       mais l'interface mobile affiche les deux cartes ci-dessous. */
    body.home-premium-v2 .booking-container.abr-widget #vols .abr-dates {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        min-height: 84px !important;
        height: 84px !important;

        z-index: 0 !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .abr-mobile-v26-dates {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        gap: 10px !important;
        z-index: 2 !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .abr-mobile-v26-date {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 84px !important;

        padding: 13px 8px 10px 56px !important;

        border: 1px solid var(--abr-mobile-line) !important;
        border-radius: 15px !important;

        background: #ffffff !important;
        color: var(--abr-mobile-ink) !important;

        text-align: left !important;

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

    body.home-premium-v2 .booking-container.abr-widget #vols .abr-mobile-v26-date-value {
        display: block !important;

        color: #7e8fa8 !important;
        font-size: clamp(11px, 3vw, 14px) !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    /* Voyageurs + Classe */
    body.home-premium-v2 .booking-container.abr-widget #vols .abr-travelers {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .abr-mobile-v26-class {
        position: relative !important;

        display: block !important;

        grid-column: 2 !important;
        grid-row: 4 !important;

        min-width: 0 !important;
        width: 100% !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .abr-mobile-v26-class select {
        width: 100% !important;
        min-width: 0 !important;
        height: 28px !important;
        min-height: 28px !important;

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

        border: 0 !important;
        outline: 0 !important;

        background: transparent !important;

        color: #506985 !important;
        cursor: pointer !important;
    }

    /* Bouton orange pleine largeur */
    body.home-premium-v2 .booking-container.abr-widget #vols .abr-submit {
        grid-column: 1 / -1 !important;
        grid-row: 5 !important;

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

        margin: 1px 0 0 !important;
        padding: 10px 18px !important;

        border-radius: 17px !important;

        background:
            linear-gradient(105deg, var(--abr-mobile-orange1), var(--abr-mobile-orange2)) !important;

        box-shadow: 0 10px 22px rgba(255,112,0,.22) !important;

        font-size: clamp(15px, 4vw, 18px) !important;
        font-weight: 850 !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .abr-submit .flight-search-submit-arrow {
        display: inline-flex !important;
        margin-left: auto !important;
        font-size: 18px !important;
    }

    /* Options sous le CTA */
    body.home-premium-v2 .booking-container.abr-widget #vols .flight-search-options {
        grid-column: 1 / -1 !important;
        grid-row: 6 !important;

        margin-top: 3px !important;
        padding-top: 12px !important;
    }

    /* Aller simple */
    body.home-premium-v2 .booking-container.abr-widget #vols.abr-mobile-v26-oneway .abr-mobile-v26-date-return {
        display: none !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols.abr-mobile-v26-oneway .abr-mobile-v26-date-depart {
        grid-column: 1 / -1 !important;
    }

    /* Multidestination : le controle existant reste le moteur officiel. */
    body.home-premium-v2 .booking-container.abr-widget #vols.multi-mode .abr-mobile-v26-dates {
        display: none !important;
    }

    /* Popovers au-dessus des cartes */
    body.home-premium-v2 .booking-container.abr-widget #vols .airport-results,
    body.home-premium-v2 .booking-container.abr-widget #vols .travelers-dropdown {
        z-index: 120 !important;
    }
}

@media (max-width: 390px) {
    body.home-premium-v2 .booking-container.abr-widget {
        padding: 11px !important;
    }

    body.home-premium-v2 .booking-container.abr-widget > .booking-tabs {
        gap: 3px !important;
    }

    body.home-premium-v2 .booking-container.abr-widget > .booking-tabs > .booking-tab {
        height: 70px !important;
        min-height: 70px !important;
        border-radius: 13px !important;
    }

    body.home-premium-v2 .booking-container.abr-widget > .booking-tabs > .booking-tab > i {
        font-size: 17px !important;
    }

    body.home-premium-v2 .booking-container.abr-widget > .booking-tabs > .booking-tab > .booking-tab-label {
        font-size: clamp(6.8px, 2.15vw, 8.2px) !important;
        letter-spacing: -0.3px !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .trip-types {
        grid-template-columns: 1fr .92fr 1.3fr !important;
        gap: 5px !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .trip-option {
        min-height: 40px !important;
        font-size: clamp(8.8px, 2.65vw, 10.5px) !important;
        padding-inline: 2px !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols.abr-panel.booking-content.active:not(.multi-mode) {
        gap: 8px !important;
    }

    body.home-premium-v2 .booking-container.abr-widget #vols .abr-field,
    body.home-premium-v2 .booking-container.abr-widget #vols .abr-mobile-v26-class,
    body.home-premium-v2 .booking-container.abr-widget #vols .abr-mobile-v26-date {
        min-height: 80px !important;
        height: 80px !important;
    }
}