/* The tab bar shared by the search pages (Flight Search, Route Explorer, Fare Engine, Car Rentals). */
.apptabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .12); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none }
.apptabs a { font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif; color: rgb(255 255 255 / .8); text-decoration: none; padding: 9px 14px; border-radius: 999px; white-space: nowrap }
.apptabs a:hover { color: #fff; background: rgb(255 255 255 / .1) }
.apptabs a[aria-current="page"] { color: #0b1b4d; background: #fff }
.apptabs.light { background: var(--surface-2); border: 1px solid var(--line) }
.apptabs.light a { color: var(--muted) }
.apptabs.light a:hover { color: var(--ink); background: var(--surface) }
.apptabs.light a[aria-current="page"] { color: var(--accent-ink); background: var(--accent) }
.apptabs:not(.light) { margin-bottom: 14px }
/* The bar scrolls sideways on narrow screens instead of widening the header around it. */
:has(> .apptabs) { min-width: 0 }
header:has(> .apptabs) { grid-template-columns: minmax(0, 1fr) }