/* ========================================================= Airport Combobox — custom searchable dropdown ========================================================= */ #airport-combo { position: relative; width: 100%; } .airport-combo-btn { cursor: pointer; min-height: 34px; } /* ── Panel wrapper ──────────────────────────────────────── overflow: hidden clips the rounded corners. NO max-height here — the two inner sections (search bar + scrollable list) control their own heights. Positioning: the panel is moved to and switched to position:fixed by JS on init (see buildAirportCombobox), so it can't be clipped by an ancestor's overflow:hidden or transform. JS sets left/top/bottom/width inline on every open() — the top/left values below are just a harmless fallback before that first run. ──────────────────────────────────────────────────────── */ .airport-combo-panel { display: none; position: absolute; top: calc(100% + 6px); left: -10px; right: -10px; z-index: 300; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.14); overflow: hidden; } .airport-combo-panel.open { display: flex; flex-direction: column; animation: comboSlideIn 0.15s ease; } @keyframes comboSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ── Sticky search bar ─────────────────────────────────── Sits ABOVE the scroll container — no position:sticky needed; it stays at the top naturally because the panel is a flex column. ──────────────────────────────────────────────────────── */ .airport-combo-search-bar { flex-shrink: 0; /* never compress or scroll away */ padding: 8px; border-bottom: 1px solid #f1f5f9; background: #fff; } .airport-combo-search-inner { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 12px; } .airport-combo-search-inner input { width: 100%; background: transparent; font-size: 0.875rem; color: #334155; outline: none; border: none; } .airport-combo-search-inner input::placeholder { color: #94a3b8; } /* ── Scrollable list ───────────────────────────────────── This is the ONLY scroll container. Country headings are sticky WITHIN this element (top: 0). overscroll-behavior: contain prevents the page from scrolling when the list reaches its bounds. ──────────────────────────────────────────────────────── */ #airport-combo-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; /* prevents page scroll bleed */ max-height: 300px; -webkit-overflow-scrolling: touch; } /* Country group heading — sticky inside the scroll container */ .airport-combo-country { padding: 6px 14px 4px; font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; background: #f8fafc; border-top: 1px solid #f1f5f9; position: sticky; top: 0; /* sticks to top of the scroll container */ z-index: 2; } .airport-combo-country:first-child { border-top: none; } /* Individual airport row */ .airport-combo-item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background 0.1s; border-left: 3px solid transparent; } .airport-combo-item:hover, .airport-combo-item.focused { background: #eff6ff; border-left-color: #3b82f6; } .airport-combo-item.selected { background: #dbeafe; border-left-color: #1d4ed8; } .airport-combo-item.selected .airport-combo-iata { background: #bfdbfe; color: #1d4ed8; } /* IATA badge */ .airport-combo-iata { font-size: 0.78rem; font-weight: 700; color: #2563eb; font-family: ui-monospace, 'SFMono-Regular', monospace; background: #eff6ff; border-radius: 5px; padding: 2px 5px; text-align: center; letter-spacing: 0.02em; white-space: nowrap; } /* Airport name */ .airport-combo-name { font-size: 0.875rem; color: #1e293b; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* City label */ .airport-combo-city { font-size: 0.75rem; color: #94a3b8; white-space: nowrap; flex-shrink: 0; } /* No-results state */ .airport-combo-empty { padding: 24px; text-align: center; color: #94a3b8; font-size: 0.875rem; } /* Chevron rotation */ #airport-combo[aria-expanded="true"] #airport-combo-chevron { transform: rotate(180deg); } #airport-combo-chevron { transition: transform 0.2s ease; } /* Mobile */ @media (max-width: 640px) { .airport-combo-panel { left: -4px; right: -4px; border-radius: 10px; } #airport-combo-list { max-height: 260px; } }