/* ASSALAS BOOKING MOBILE V2.7
   Correctif de finition du formulaire Vols MOBILE WEB uniquement.
   - 3 types de voyage sur une seule ligne
   - Depart / Arrivee lisibles
   - Selecteur voyageurs compact et entierement visible
   Desktop > 768px et application / APK non concernes. */

@media (max-width: 768px) {

    /* =========================================================
       1) ALLER-RETOUR / ALLER SIMPLE / MULTIDESTINATION
       ========================================================= */

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active
    .trip-types {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

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

        gap: 6px !important;
        padding: 0 !important;
        margin: 0 0 4px !important;

        border: 0 !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active
    .trip-types > .trip-option {
        display: inline-flex !important;
        flex: 1 1 0 !important;

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

        width: 0 !important;
        max-width: none !important;
        min-width: 0 !important;

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

        margin: 0 !important;
        padding: 5px 3px !important;

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

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

        font-family: Inter, "Segoe UI", Arial, sans-serif !important;
        font-size: clamp(9px, 2.65vw, 11.5px) !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: -0.18px !important;

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

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active
    .trip-types > .trip-option.active {
        border-color: transparent !important;

        background:
            linear-gradient(135deg, #1688ff 0%, #096df2 100%) !important;

        color: #ffffff !important;

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

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active
    .trip-types > .trip-option::after {
        display: none !important;
    }

    /* =========================================================
       2) DEPART / ARRIVEE : TEXTE LISIBLE EN 2 COLONNES
       ========================================================= */

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active:not(.multi-mode)
    .abr-origin,
    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active:not(.multi-mode)
    .abr-destination {
        min-width: 0 !important;
        width: 100% !important;

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

        padding:
            13px
            7px
            11px
            48px !important;

        border-radius: 15px !important;

        overflow: visible !important;
    }

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

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active:not(.multi-mode)
    :is(.abr-origin,.abr-destination)
    .abr-field-icon {
        left: 8px !important;

        width: 34px !important;
        min-width: 34px !important;
        height: 44px !important;

        border-radius: 11px !important;

        font-size: 16px !important;
    }

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active:not(.multi-mode)
    :is(.abr-origin,.abr-destination)
    .abr-field-icon i {
        font-size: 16px !important;
    }

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active:not(.multi-mode)
    :is(.abr-origin,.abr-destination)
    > .field-text {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active:not(.multi-mode)
    :is(.abr-origin,.abr-destination)
    .field-text > small {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 6px !important;

        color: #29496e !important;

        font-size: clamp(9.4px, 2.55vw, 10.8px) !important;
        line-height: 1.05 !important;
        font-weight: 800 !important;

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

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active:not(.multi-mode)
    :is(.abr-origin,.abr-destination)
    input.booking-input {
        display: block !important;

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

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

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

        color: #667f9e !important;

        font-size: clamp(10.4px, 2.85vw, 12px) !important;
        line-height: 26px !important;
        font-weight: 650 !important;
        letter-spacing: -0.1px !important;

        white-space: nowrap !important;
        text-overflow: clip !important;

        overflow: visible !important;
    }

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active:not(.multi-mode)
    :is(.abr-origin,.abr-destination)
    input.booking-input::placeholder {
        color: #7c8fa8 !important;
        opacity: 1 !important;
        font-size: inherit !important;
        font-weight: 600 !important;
    }

    /* La localisation reste disponible mais devient beaucoup plus discrete. */
    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active
    .nearest-airport-trigger {
        right: 4px !important;
        top: 8px !important;

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

        padding: 0 !important;

        color: #0874f7 !important;

        font-size: 11px !important;

        opacity: .86 !important;
    }

    /*
     * Le bouton d'inversion garde la position centrale mais devient plus petit
     * pour ne plus manger le texte des champs.
     */
    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active:not(.multi-mode)
    #swapAirports {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;

        border-width: 3px !important;

        font-size: 14px !important;
    }

    /* =========================================================
       3) VOYAGEURS : POPUP COMPACT, ENTIEREMENT VISIBLE
       ========================================================= */

    body.home-premium-v2 #travelersToggle {
        overflow: visible !important;
    }

    body.home-premium-v2 #travelersDropdown {
        position: fixed !important;

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

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

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

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

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

        border: 1px solid #d4e1ef !important;
        border-radius: 21px !important;

        background: #ffffff !important;

        box-shadow:
            0 24px 60px rgba(7,31,67,.25),
            0 0 0 1px rgba(255,255,255,.75) inset !important;

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

        z-index: 10080 !important;
    }

    body.home-premium-v2 #travelersDropdown h4 {
        margin: 0 0 10px !important;
        padding: 0 0 11px !important;

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

        color: #102f57 !important;

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

    body.home-premium-v2 #travelersDropdown .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 .traveler-row > div:first-child {
        min-width: 0 !important;
    }

    body.home-premium-v2 #travelersDropdown .traveler-row strong {
        display: block !important;

        margin: 0 !important;

        color: #14335a !important;

        font-size: 15px !important;
        line-height: 1.12 !important;
        font-weight: 800 !important;
    }

    body.home-premium-v2 #travelersDropdown .traveler-row small {
        display: block !important;

        margin-top: 3px !important;

        color: #7c8da4 !important;

        font-size: 11px !important;
        line-height: 1.15 !important;
        font-weight: 550 !important;
    }

    body.home-premium-v2 #travelersDropdown .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 .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: #076ef0 !important;

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

        box-shadow: none !important;
    }

    body.home-premium-v2 #travelersDropdown .counter > span {
        display: block !important;

        min-width: 28px !important;

        color: #102f57 !important;

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

        text-align: center !important;
    }

    /*
     * La classe a deja sa propre carte V2.6.
     * On cache donc le doublon dans le popup pour que tout tienne a l'ecran.
     */
    body.home-premium-v2 #travelersDropdown #cabinClass {
        display: none !important;
    }

    body.home-premium-v2 #confirmTravelers {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

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

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

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

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

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

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

    /* La carte Voyageurs elle-meme reste lisible. */
    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active
    .abr-travelers
    .travelers-summary {
        display: block !important;

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

        color: #17375e !important;

        font-size: clamp(11px, 3vw, 13px) !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;

        white-space: normal !important;
        overflow: visible !important;
    }

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active
    .abr-travelers
    .travelers-summary > span {
        white-space: normal !important;
        overflow: visible !important;
    }
}

/* Les telephones vraiment etroits gardent les 3 choix sur une ligne. */
@media (max-width: 360px) {

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active
    .trip-types {
        gap: 4px !important;
    }

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active
    .trip-types > .trip-option {
        min-height: 40px !important;
        height: 40px !important;

        padding-inline: 1px !important;

        font-size: clamp(8px, 2.5vw, 9.5px) !important;
        letter-spacing: -0.28px !important;
    }

    body.home-premium-v2
    .booking-container.abr-widget
    #vols.abr-panel.booking-content.active:not(.multi-mode)
    :is(.abr-origin,.abr-destination)
    input.booking-input {
        font-size: 10.2px !important;
        letter-spacing: -0.18px !important;
    }

    body.home-premium-v2 #travelersDropdown {
        width: calc(100vw - 16px) !important;
        max-height: calc(100svh - 74px) !important;

        padding: 13px !important;

        border-radius: 18px !important;
    }

    body.home-premium-v2 #travelersDropdown .traveler-row {
        min-height: 54px !important;
        padding-block: 7px !important;
    }
}