/* Flight pages (2026-10-07): search form, suggestions, passengers, "searching" state, results, filters.
 * Page shell, photo cards, step cards and FAQ come from transfers.css (.trf-*). */
/* [hidden] must win over any display rule below (tours once lost hidden to display:flex). */
.flt-page [hidden], .flt-results [hidden] { display: none !important; }
.flt-page .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.flt-lead { margin: 0 0 .75rem; color: var(--color-7); }

/* Search card */
.flt-search { background: #fff; border-radius: 16px; padding: 1rem; box-shadow: 0 10px 30px rgba(31,26,18,.08); }
.flt-trip { border: 0; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-weight: 600; }
.flt-trip label { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; cursor: pointer; }
.flt-grid { display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: .75rem; align-items: end; }
.flt-field { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; position: relative; min-width: 0; margin: 0; }
.flt-field > label, .flt-field > span { margin: 0; font-size: .8rem; line-height: 1.3; font-weight: 400; }
.flt-field input[type=text], .flt-field input[type=date], .flt-pax-toggle { width: 100%; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid #d6d0c4; border-radius: 10px; font: inherit; font-size: .95rem; background: #fff; color: inherit; height: 44px; }
.flt-field input:focus-visible, .flt-pax-toggle:focus-visible, .flt-swap:focus-visible { outline: 2px solid #b8893d; outline-offset: 1px; }
.flt-swap { align-self: end; width: 40px; height: 44px; border: 1px solid #d6d0c4; border-radius: 10px; background: #fff; cursor: pointer; font-size: 1.1rem; color: #8a6420; }
.flt-swap:hover { background: #f4ede0; }
.flt-submit { margin-top: .9rem; min-width: 200px; }
.flt-submit:disabled { opacity: .6; cursor: progress; }
.flt-error { color: #b91c1c; margin: .6rem 0 0; }

/* Airport suggestions */
.flt-suggest { position: absolute; top: 100%; left: 0; right: 0; min-width: 260px; z-index: 30; background: #fff; border: 1px solid #d6d0c4; border-radius: 10px; list-style: none; margin: .25rem 0 0; padding: .25rem 0; max-height: 320px; overflow: auto; box-shadow: 0 12px 28px rgba(31,26,18,.12); font-size: .9rem; }
.flt-suggest li { display: flex; flex-direction: column; padding: .5rem .75rem; cursor: pointer; }
.flt-suggest li small { color: var(--color-6); font-size: .78rem; }
.flt-suggest li:hover, .flt-suggest li[aria-selected="true"] { background: #f4ede0; }
.flt-suggest li.is-city span { font-weight: 700; }
.flt-suggest li.is-city span::before { content: "✈ "; color: #8a6420; }
.flt-suggest .flt-suggest-empty { cursor: default; color: var(--color-6); }

/* Passengers */
.flt-pax-toggle { text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flt-pax-panel { position: absolute; top: 100%; right: 0; z-index: 30; width: 290px; max-width: calc(100vw - 2rem); margin-top: .25rem; background: #fff; border: 1px solid #d6d0c4; border-radius: 12px; padding: .75rem 1rem 1rem; box-shadow: 0 12px 28px rgba(31,26,18,.14); font-size: .9rem; }
.flt-pax-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid #f0ebe1; }
.flt-pax-row > span:first-child { display: flex; flex-direction: column; }
.flt-pax-row small { color: var(--color-6); }
.flt-counter { display: inline-flex; align-items: center; gap: .5rem; }
.flt-counter button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #b8893d; background: #fff; color: #8a6420; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.flt-counter button:disabled { opacity: .35; cursor: not-allowed; }
.flt-counter output { min-width: 1.2em; text-align: center; font-weight: 700; }
.flt-pax-note { margin: .6rem 0; color: var(--color-6); font-size: .78rem; line-height: 1.4; }
.flt-pax-done { width: 100%; }

/* Results shell */
.flt-results { margin: 1.5rem 0 2rem; scroll-margin-top: 90px; }
.flt-searching { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; padding: 2.5rem 1rem; border: 1px solid #e5e1d8; border-radius: 16px; background: linear-gradient(135deg, #fdf9f2, #f1f6f6); }
.flt-searching strong { font-size: 1.2rem; }
.flt-searching small { color: var(--color-6); max-width: 46ch; }
.flt-searching-route { font-weight: 600; color: #5a5348; }
.flt-progress { font-size: .9rem; font-weight: 600; color: #8a6420; font-variant-numeric: tabular-nums; }
.flt-plane { color: var(--primary); animation: flt-fly 1.6s ease-in-out infinite; display: inline-flex; transform: rotate(90deg); }
.flt-bar { width: min(320px, 80%); height: 4px; border-radius: 4px; background: #e9e3d6; overflow: hidden; margin-top: .5rem; }
.flt-bar i { display: block; width: 35%; height: 100%; background: #b8893d; border-radius: 4px; animation: flt-bar 1.4s ease-in-out infinite; }
@keyframes flt-fly { 0%, 100% { transform: rotate(90deg) translateY(0); } 50% { transform: rotate(90deg) translateY(-6px); } }
@keyframes flt-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }
.flt-failed { padding: 1.5rem; border: 1px solid #f1c9c9; background: #fff6f6; border-radius: 14px; text-align: center; }
.flt-failed p { margin: 0 0 .75rem; color: #8a1c1c; font-weight: 600; }
.flt-stage { margin: 0 0 .75rem; font-size: 1.15rem; }
.flt-note { color: var(--color-6); font-size: .85rem; margin: .25rem 0 .75rem; }
.flt-empty { padding: 1rem; border: 1px dashed #d6d0c4; border-radius: 12px; color: #5a5348; }
.flt-clear, .flt-change, .flt-more { border: 1px solid #b8893d; background: #fff; color: #8a6420; border-radius: 999px; padding: .4rem .9rem; cursor: pointer; font: inherit; font-size: .85rem; }
.flt-more { display: block; margin: 1rem auto 0; }

/* Filters + list */
.flt-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.flt-filters { border: 1px solid #e5e1d8; border-radius: 14px; padding: .75rem 1rem; background: #fff; position: sticky; top: 90px; }
.flt-filters summary { font-weight: 700; cursor: pointer; }
.flt-filters fieldset { border: 0; padding: 0; margin: .75rem 0 0; }
.flt-filters legend { font-weight: 600; font-size: .85rem; margin-bottom: .25rem; }
.flt-check { display: flex; align-items: center; gap: .45rem; padding: .25rem 0; font-size: .88rem; cursor: pointer; }
.flt-check span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.flt-check small { color: var(--color-6); white-space: nowrap; }
.flt-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .9rem; }
.flt-toolbar select { padding: .4rem .6rem; border: 1px solid #d6d0c4; border-radius: 8px; font: inherit; background: #fff; }
.flt-list { display: flex; flex-direction: column; gap: .75rem; }

/* Flight card */
.flt-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.2fr); grid-template-areas: "air times price" "extra extra price"; gap: .5rem 1rem; align-items: center; padding: 1rem; border: 1.5px solid #e5e1d8; border-radius: 14px; background: #fff; }
.flt-card.is-selected { border-color: #b8893d; background: #fdf9f2; }
.flt-card-air { grid-area: air; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.flt-card-air > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.flt-card-air small { color: var(--color-6); overflow-wrap: anywhere; }
.flt-code { flex: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #f4ede0; color: #8a6420; font-weight: 700; font-size: .8rem; }
.flt-card-times { grid-area: times; display: flex; align-items: center; gap: .6rem; }
.flt-time { display: flex; flex-direction: column; align-items: center; }
.flt-time b { font-size: 1.25rem; }
.flt-time sup { color: #b91c1c; font-size: .7rem; margin-left: 2px; }
.flt-time small { color: var(--color-6); font-weight: 600; letter-spacing: .04em; }
.flt-line { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .75rem; color: var(--color-6); }
.flt-line i { display: block; width: 100%; height: 2px; background: #d6d0c4; position: relative; }
.flt-line i::after { content: ""; position: absolute; right: -2px; top: -3px; border: 4px solid transparent; border-left-color: #d6d0c4; }
.flt-direct { color: #1f6b3d; font-weight: 600; }
.flt-stops { color: #8a6420; font-weight: 600; }
.flt-card-extra { grid-area: extra; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .8rem; color: #5a5348; }
.flt-card-extra:empty { display: none; }
.flt-seats { color: #b91c1c; font-weight: 700; }
.flt-card-price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: .1rem; border-left: 1px dashed #e5e1d8; padding-left: 1rem; }
.flt-card-price b { font-size: 1.35rem; color: var(--primary); }
.flt-card-price small, .flt-card-price span { font-size: .78rem; color: var(--color-6); }
.flt-pick { margin-top: .4rem; padding: .45rem 1.2rem; }

/* Chosen legs + continue */
.flt-chosen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .75rem 1rem; border: 1.5px solid #b8893d; border-radius: 12px; background: #fdf9f2; margin-bottom: .75rem; font-size: .9rem; }
.flt-ready { display: flex; flex-direction: column; gap: .25rem; }
.flt-total { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; padding: .5rem 0; text-align: right; }
.flt-total b { font-size: 1.5rem; color: var(--primary); }
.flt-total small { color: var(--color-6); font-style: italic; }
.flt-continue { align-self: flex-end; min-width: 200px; }

/* Hub tabs */
.flt-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.flt-tabs [role=tab] { border: 1px solid #d6d0c4; background: #fff; border-radius: 999px; padding: .5rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; color: #5a5348; }
.flt-tabs [role=tab][aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Route facts + onward links */
.flt-facts, .flt-links { margin: 2rem 0; }
.flt-facts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; margin: 0; }
.flt-facts-grid > div { border: 1px solid #e5e1d8; border-radius: 14px; padding: .85rem 1rem; background: #fff; }
.flt-facts-grid dt { font-size: .8rem; color: var(--color-6); font-weight: 600; }
.flt-facts-grid dd { margin: .2rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.flt-facts-wide { grid-column: 1 / -1; }
.flt-airport-list { list-style: none; margin: 0; padding: 0; font-weight: 500; font-size: .9rem; line-height: 1.5; }
.flt-link-card { flex-direction: row; align-items: center; gap: .85rem; }
.flt-link-card .trf-step-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; }

@media (max-width: 1100px) {
	.flt-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
	.flt-grid > .flt-field:not(.flt-place) { grid-column: span 1; }
	.flt-grid > label.flt-field:nth-of-type(1) { grid-column: 1; }
	.flt-grid > .flt-return { grid-column: 2 / 4; }
	.flt-grid > .flt-pax { grid-column: 1 / -1; }
	.flt-pax-panel { left: 0; right: auto; }
}
@media (max-width: 760px) {
	.flt-layout { grid-template-columns: 1fr; }
	.flt-filters { position: static; }
	.flt-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "air" "times" "extra" "price"; }
	.flt-card-price { border-left: 0; border-top: 1px dashed #e5e1d8; padding: .6rem 0 0; align-items: stretch; text-align: left; }
	.flt-pick { align-self: stretch; }
	.flt-continue { align-self: stretch; }
}
@media (max-width: 480px) {
	.flt-search { padding: .85rem; }
	.flt-grid { grid-template-columns: minmax(0, 1fr); }
	.flt-grid > * , .flt-grid > .flt-return, .flt-grid > label.flt-field:nth-of-type(1) { grid-column: 1 / -1; }
	.flt-swap { justify-self: end; width: 44px; height: 36px; margin: -.4rem 0; transform: rotate(90deg); }
	.flt-submit { width: 100%; }
	.flt-suggest { min-width: 0; }
	.flt-chosen { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
	.flt-plane, .flt-bar i { animation: none; }
	.flt-bar i { width: 100%; opacity: .5; }
}