/* ==========================================================================
   FLIGHT AIRPORT AUTOCOMPLETE - REDESIGN
   Loaded from Views/Shared/_Layout.cshtml. The jQuery autocomplete plugin
   (Content/js/autocomplete.js) appends <div class="ac_results new"> to <body>
   for the From/To fields on the home page and the result page "Modify" bar.
   Rules target only the flight variant (hotel/transfer/other variants carry an
   extra ac_results_* class and are left alone). Markup and plugin untouched.

   Row markup produced by the plugin:
   <li class="ac_even [ac_over1]">
     <u class="airport-name"><strong>City </strong> Airport (CODE) </u>
     <u class="city-name"> Country</u>
   </li>
   Typed text is wrapped in <u><strong>...</strong></u> by the plugin's highlight().
   ========================================================================== */

.ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) {
    margin-top: 6px;
    padding: 6px;
    max-height: 400px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e1e8ed;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(11, 34, 51, .18), 0 2px 6px rgba(11, 34, 51, .06);
    font-family: "Open Sans", Arial, sans-serif;
}

@media only screen and (min-width: 768px) {
    .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) {
        width: 420px !important;
    }
}

    .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) ul {
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

        /* Small list header */
        .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) ul:before {
            content: "Airports & cities";
            display: block;
            padding: 6px 10px 8px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #8c99a4;
        }

    /* Rows */
    .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li.ac_even,
    .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li.ac_odd {
        position: relative;
        float: none;
        width: auto;
        margin: 0 0 2px;
        padding: 9px 12px 9px 58px !important;
        font-size: 13px;
        line-height: 1.35;
        color: #6b7a86;
        background: #fff none !important;
        border: 0;
        border-left: 3px solid transparent;
        border-radius: 10px;
        cursor: pointer;
        animation: none !important;
        transition: background-color .15s, border-color .15s;
    }

        /* Plane icon tile */
        .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li.ac_even:before,
        .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li.ac_odd:before {
            content: "\f072";
            position: absolute;
            left: 12px;
            top: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            margin-top: -17px;
            font-family: FontAwesome;
            font-size: 15px;
            color: #087171;
            background: #e7f3f3;
            border-radius: 10px;
            transition: background-color .15s, color .15s;
        }

        /* Hover + keyboard-highlighted row (plugin's active class is ac_over1) */
        .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li.ac_even:hover,
        .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li.ac_odd:hover,
        .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li.ac_over1 {
            background: #f0f8f8 none !important;
            border-left-color: #087171;
        }

            .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li.ac_even:hover:before,
            .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li.ac_odd:hover:before,
            .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li.ac_over1:before {
                color: #fff;
                background: #087171;
            }

        /* Line 1: "City  Airport (CODE)" */
        .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li .airport-name {
            display: block;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.35;
            color: #1d2b36;
            text-decoration: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li .airport-name > strong {
                font-weight: 700;
                color: #1d2b36;
            }

        /* Line 2: country */
        .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li .city-name {
            display: block;
            margin-top: 1px;
            font-size: 12px;
            line-height: 1.35;
            color: #8c99a4;
            text-decoration: none;
        }

        /* Typed-text match highlight (nested <u> from the plugin's highlight()) */
        .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li u u {
            padding: 0 1px;
            text-decoration: none;
            background: #ffe8cc;
            border-radius: 3px;
        }

            .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li u u strong {
                font-weight: 700;
                color: #b4530f;
            }

    /* Slim scrollbar (Chrome/Edge/Safari; Firefox uses scrollbar-width below) */
    .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other)::-webkit-scrollbar {
        width: 6px;
    }

    .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other)::-webkit-scrollbar-track {
        margin: 10px 0;
        background: transparent !important;
    }

    .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other)::-webkit-scrollbar-thumb {
        background: #c7d3da !important;
        border-radius: 999px;
    }

@supports not selector(::-webkit-scrollbar) {
    .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) {
        scrollbar-width: thin;
        scrollbar-color: #c7d3da transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li,
    .ac_results.new:not(.ac_results_hotel):not(.ac_results_transfer):not(.ac_results_other) li:before {
        transition: none;
    }
}