#searchContainer {
    position: relative;
}

#airportSearch {
    width: 260px;
    padding: 6px;
    font-size: 14px;
    background: var(--btn-bg);
    color: var(--text-light);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
}

.autocomplete-items {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    width: 260px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-item {
    display: block;
    width: 100%;
    padding: 6px 10px;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: var(--text-light);
    text-align: left;
}

.autocomplete-item:hover,
.autocomplete-item[aria-selected="true"] {
    background: var(--btn-hover);
}

.autocomplete-item:focus-visible {
    outline: 2px solid var(--accent, #6cb6ff);
    outline-offset: -2px;
}

.autocomplete-empty {
    padding: 6px 10px;
    color: var(--text-muted, #aab3bd);
}

@media (max-width: 760px) {
    #airportSearch,
    .autocomplete-items {
        width: 100%;
    }
}

/* Flights in the search box (ui/airportSearch.js) and the selected-flight chip on the map
   (map/selectedFlightLayer.js). */
.autocomplete-group { padding: 4px 10px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #8d96a3); }
.autocomplete-flight { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.selected-flight-chip {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; max-width: min(720px, calc(100% - 24px));
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 8px 5px 10px;
    background: rgba(20, 23, 28, 0.92); border: 1px solid var(--panel-border, #333a44); border-radius: 6px;
    color: var(--text-light, #d7dde5); font-size: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* display:flex above beats the browser's own [hidden] rule: without this the ✕ cleared the flight from the map
   but the chip stayed on screen. */
.selected-flight-chip[hidden] { display: none; }
.selected-flight-chip button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
.selected-flight-fit b { color: #fff; }
.selected-flight-fit:hover b { color: var(--mint, #43d2aa); }
.selected-flight-close { font-size: 14px; line-height: 1; padding: 0 2px !important; opacity: 0.8; }
.selected-flight-close:hover { opacity: 1; color: #fff; }
.selected-flight-legend { color: var(--text-muted, #8d96a3); font-size: 11px; }
.selected-flight-legend i { display: inline-block; width: 14px; height: 0; margin: 0 3px 3px 6px; border-top: 2px solid; vertical-align: middle; }
.selected-flight-legend .sf-route { border-top: 2px dashed #9aa4b2; }
.selected-flight-legend .sf-tfms { border-color: #43d2aa; }
.selected-flight-legend .sf-adsb { border-color: #7aa7d8; }
.selected-flight-note { color: #eab308; font-size: 11px; }