/* ============================================================================
   Digitour — flights.css
   Standalone Yerevan-departure flight search. Built on base.css's existing
   tokens and .btn/.field/.input/.modal/.badge/.panel classes (same
   foundation as cruises.css) — fresh markup throughout (the field set is
   genuinely different from the shared .search hotel widget: locked origin,
   4-way passenger split, cabin class, trip-type toggle), but the same
   visual language as the rest of the site.
   ========================================================================== */

/* ── Trip type toggle (dark hero) ────────────────────────────────────────── */
.flightsearch__triptype { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.flightsearch__triptab {
  font-size: .8125rem; font-weight: 600; color: #fff;
  min-height: 40px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1.5px solid rgba(255,255,255,.34); background: transparent;
  display: inline-flex; align-items: center; cursor: pointer;
  transition: background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.flightsearch__triptab:hover { background: rgba(255,255,255,.16); }
.flightsearch__triptab.is-active { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.flightsearch__hint { color: var(--on-dark-2); font-size: .8125rem; margin-top: 10px; }

/* ── Search form ─────────────────────────────────────────────────────────── */
/* The form itself is now the shared .search widget (search.css) — see
   flights/index.blade.php's own comment on why (reuses the real popover
   calendar instead of a bare native date input). Only the pieces search.js
   doesn't model are page-specific here: the trip-type tabs above it, the
   travellers/cabin popover, and the "direct flights only" row. */

.flightsearch__row2 {
  display: flex;
  align-items: center;
  padding: 10px 14px 2px;
}

/* .check/.check__box themselves come from search.css — this just trims
   that component's default sizing (min-height:58px, built for a full-width
   filters-sidebar row) down to a compact inline pill for one standalone
   option sitting next to the submit button. */
.flightsearch__direct {
  display: inline-flex;
  min-height: 0;
  width: auto;
  padding: 6px 10px 6px 6px;
}
.flightsearch__direct .check__box { width: 18px; height: 18px; }
.flightsearch__direct .check__label { font-size: .8125rem; font-weight: 600; }

/* ── Travellers & cabin popover ──────────────────────────────────────────── */
/* top/left/width below are a pre-JS fallback only — flights.js's
   positionPaxPopover() sets position:fixed + real computed top/left
   inline the moment it opens (anchored to the toggle button's own
   bounding rect, not this panel), since the popover is a DOM sibling of
   the toggle button rather than nested under it. */
.flightpax {
  position: absolute;
  z-index: var(--z-pop);
  top: calc(100% + 8px);
  right: 12px;
  width: min(320px, calc(100vw - 48px));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  padding: 16px;
}

.flightpax__group { display: flex; flex-direction: column; gap: 12px; }

.flightpax__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.flightpax__row-label { display: flex; flex-direction: column; }
.flightpax__row-label strong { font-size: .875rem; color: var(--ink); }
.flightpax__row-label span { font-size: .75rem; color: var(--muted); }

.flightpax__stepper { display: flex; align-items: center; gap: 10px; }
.flightpax__step {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--white);
  color: var(--g700);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.flightpax__step:hover { border-color: var(--g700); background: var(--g50); }
.flightpax__count { min-width: 18px; text-align: center; font-weight: 700; font-size: .9375rem; }

.flightpax__cabin { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.flightpax__cabin-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.flightpax__cabin-options { display: flex; flex-wrap: wrap; gap: 6px; }
.flightpax__cabin-pill { position: relative; }
.flightpax__cabin-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.flightpax__cabin-pill span {
  display: inline-flex; align-items: center;
  font-size: .8125rem; font-weight: 600; color: var(--ink);
  padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.flightpax__cabin-pill input:checked + span { background: var(--g700); border-color: var(--g700); color: #fff; }
.flightpax__cabin-pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.flightpax__done { width: 100%; margin-top: 14px; }

/* ── Long-wait loading overlay ────────────────────────────────────────────
   Extends the shared .search-overlay/.search-overlay__box chrome
   (base.css) with a plane icon, a slow gentle motion, and rotating status
   copy — this search can genuinely take up to ~90s, so a static spinner
   alone would read as broken/stuck rather than in-progress. ───────────── */
.flightsoverlay__box { max-width: 420px; }
.flightsoverlay__plane .i {
  animation: flights-plane-drift 2.6s ease-in-out infinite;
}
@keyframes flights-plane-drift {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  50% { transform: translateX(6px) translateY(-4px) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .flightsoverlay__plane .i { animation: none; }
}
.flightsoverlay__airlines {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  margin: 4px 0 14px;
  position: relative;
}
.flightsoverlay__logo {
  position: absolute;
  height: 22px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  opacity: 0;
  filter: brightness(0) invert(1); /* white, legible on the dark overlay regardless of the source logo's own colors */
  transition: opacity .5s ease;
}
.flightsoverlay__logo.is-active { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .flightsoverlay__logo { transition: none; }
}

.flightsoverlay__progress {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  overflow: hidden;
  margin-bottom: 14px;
}
.flightsoverlay__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 999px;
  transition: width .4s linear;
}

.flightsoverlay__status {
  color: var(--gold);
  font-weight: 600;
  font-size: .875rem;
  min-height: 1.4em;
}
.flightsoverlay__note {
  color: var(--on-dark-2);
  font-size: .8125rem;
  line-height: 1.6;
  margin-top: 6px;
}

/* ── Results toolbar / sort ──────────────────────────────────────────────── */
.flightresults__toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 16px;
}
.flightresults__toolbar .mdresults__count { margin: 0; }
.flightresults__sort-label { font-size: .8125rem; color: var(--muted); font-weight: 600; }
.flightresults__sort { display: flex; flex-wrap: wrap; gap: 6px; }
.flightresults__sort button {
  font-size: .8125rem; font-weight: 600; color: var(--muted);
  padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--white); cursor: pointer;
  transition: border-color var(--dur-1) ease, color var(--dur-1) ease, background-color var(--dur-1) ease;
}
.flightresults__sort button:hover { border-color: var(--g700); color: var(--g700); }
.flightresults__sort button.is-active { background: var(--g700); border-color: var(--g700); color: #fff; }

/* ── Result cards ─────────────────────────────────────────────────────────
   Side-by-side grid, same mobile-first breakpoints as .hotelgrid
   (blocks.css) — 1 column on phones, up to 4 on desktop — instead of the
   old single stacked column (.aviagrid had gap/margin but no
   grid-template-columns at all, so it rendered as one full-width card per
   row regardless of viewport). ───────────────────────────────────────── */
.aviagrid { display: grid; gap: 14px; margin-top: 8px; grid-template-columns: 1fr; }
@media (min-width: 480px)  { .aviagrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 780px)  { .aviagrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .aviagrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

.aviacard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: box-shadow var(--dur-2) ease, border-color var(--dur-2) ease, transform var(--dur-2) var(--ease);
}
.aviacard:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }

/* Compact tile body — replaces the old full-width .flightstep__summary
   click-to-expand header for the OUTBOUND level; that markup/CSS is still
   used as-is one level down, for the return-flight rows inside the
   popup (see .flightoptsmodal below). */
.aviacard__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  flex: 1;
}
.aviacard__airline { display: flex; align-items: center; gap: 10px; }
.aviacard__times {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .875rem; color: var(--ink);
}
.aviacard__times .i { color: var(--muted); flex-shrink: 0; }
.aviacard__trip-note { font-size: .75rem; color: var(--muted); margin: 0; }
.aviacard__price {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}
.aviacard__price-from { display: block; font-size: .625rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.aviacard__price strong { font-size: 1.25rem; color: var(--g700); }
.aviacard__price .price-amd { display: block; font-size: .75rem; color: var(--muted); }
.aviacard__cta { width: 100%; justify-content: center; }

/* The overall cheapest itinerary in the list (computed from every result,
   not just whichever sort happens to be active) — a gold border + a solid
   top bar, same "good default pick" treatment as .flightpkg--best one
   level down. A plain block in normal flow (not absolutely positioned
   over the card) so it can never get clipped by .aviacard's own
   overflow:hidden (needed for the border-radius on the summary row below
   it) — an earlier floating-ribbon version straddling the card's top
   border did exactly that, confirmed live: the top half rendering behind
   the airline name row instead of above it. */
.aviacard--best { border-color: var(--gold); }
.aviacard__best-ribbon {
  display: block;
  background: var(--gold); color: var(--ink);
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 6px 16px;
}
.aviacard__direct { color: var(--g700); font-weight: 700; }
/* Without this, the [hidden] attribute (set by maldives-results.js's
   pagination/filtering) loses the cascade tie to .aviacard's own display
   value — same fix already applied everywhere else this pattern is used
   on this site (see base.css's .modal[hidden]/.form-status[hidden] etc).
   This is why the flight filters visually did nothing despite the JS
   correctly marking non-matching tiles hidden. */
.aviacard[hidden] { display: none; }
.aviagrid[hidden] { display: none; }

.aviacard__logo { height: 26px; width: auto; max-width: 72px; object-fit: contain; flex-shrink: 0; }
.aviacard__airline-text { display: flex; flex-direction: column; text-align: left; }
.aviacard__airline-text strong { font-size: .9375rem; color: var(--ink); }
.aviacard__cabin { font-size: .75rem; color: var(--muted); }

/* ── Step accordion: outbound -> return -> fare package ───────────────────
   .flightstep__summary is the clickable header row for BOTH an outbound
   card (top level, inside .aviacard) and a nested return row (inside
   .flightreturns) — flights-steps.js scopes "only one open at a time" per
   level generically, no separate CSS needed for that distinction. ──────── */
.flightstep__summary {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--dur-1) ease;
}
.flightstep__summary:hover { background: var(--sand); }
.flightstep__summary[aria-expanded="true"] { background: var(--g50); }

.flightstep__airline { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; }
.flightstep__times {
  display: flex; align-items: center; gap: 8px;
  font-size: .875rem; color: var(--ink);
  flex: 1 1 180px; white-space: nowrap;
}
.flightstep__times .i { color: var(--muted); flex-shrink: 0; }

.flightstep__price { text-align: right; flex-shrink: 0; }
.flightstep__price-from { display: block; font-size: .625rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.flightstep__price strong { display: block; font-size: 1.125rem; color: var(--g700); }
.flightstep__price .price-amd { font-size: .6875rem; color: var(--muted); }

.flightstep__chevron { color: var(--muted); flex-shrink: 0; transition: transform var(--dur-2) ease; }
.flightstep__summary[aria-expanded="true"] .flightstep__chevron { transform: rotate(180deg); }

.flightsteps {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--line-soft);
}
.flightsteps[hidden] { display: none; }

/* Baggage allowance for the cheapest package, sitting right under the
   summary row — visible without expanding, since it's the single
   most-asked question about any fare. */
.aviacard__baggage-row {
  display: flex; align-items: center; gap: 6px;
  margin: 0;
  font-size: .8125rem; color: var(--muted);
}
.aviacard__baggage-row .i { color: var(--g600); flex-shrink: 0; }
/* Only the nested (return-row, inside the modal) variant still needs its
   own padding — it's not inside a padded flex container like
   .aviacard__body is. */
.aviacard__baggage-row--nested { padding: 0 14px 10px; }

.flightstep__title {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 700;
  margin: 14px 0 8px;
}

.flightreturns { display: flex; flex-direction: column; gap: 8px; }
.flightreturn {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ivory);
}
.flightstep__summary--nested { padding: 12px 14px; }
.flightreturn .flightsteps { background: var(--white); border-top-color: var(--line-soft); }

@media (max-width: 719px) {
  .flightstep__summary { flex-wrap: wrap; gap: 6px 12px; }
  .flightstep__times { order: 3; flex-basis: 100%; }
  .flightstep__price { text-align: left; }
}

/* ── Flight options popup ─────────────────────────────────────────────────
   Reuses the generic .modal/.modal__box/.modal__close chrome (base.css) —
   mobile-first bottom sheet, centered dialog from 640px up, same as every
   other modal on the site. Its body is exactly the OLD .aviacard's
   .flightsteps content (leg detail + return list + fare packages), cloned
   in from each card's own <template> — see flights.js's
   openFlightOptions(). ───────────────────────────────────────────────── */
.flightoptsmodal .modal__box { max-width: 640px; }
.flightoptsmodal__head { margin-bottom: 4px; padding-right: 32px; }
.flightoptsmodal__head h3 { margin: 0 0 3px; }
.flightoptsmodal__head p { margin: 0; font-size: .8125rem; color: var(--muted); }

.aviacard__legs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }

.flightleg { border-top: 1px dashed var(--line-soft); padding-top: 10px; }
.flightleg:first-child { border-top: 0; padding-top: 0; }

.flightleg__title {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}
.flightleg__seats-low { color: var(--danger); font-weight: 700; text-transform: none; letter-spacing: 0; }
.flightleg__seats { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }

.flightseg { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; padding: 5px 0; font-size: .875rem; }
.flightseg__times { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.flightseg__times .i { color: var(--muted); }
.flightseg__code { font-family: var(--a-mono, ui-monospace, monospace); font-size: .75rem; color: var(--muted); font-weight: 700; }
.flightseg__nextday { font-size: .6875rem; color: var(--danger); font-weight: 700; vertical-align: super; }
.flightseg__route { color: var(--ink); font-size: .8125rem; }
.flightseg__meta { color: var(--muted); font-size: .75rem; }

/* Layover chip between two segments of a connecting leg — real city +
   ground-time data (see PacAmFlightService::buildConnections()), not
   shown anywhere before this. */
.flightlayover {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 0 2px 0;
  padding: 6px 10px;
  background: var(--g50);
  border-radius: var(--r-sm);
  font-size: .75rem; color: var(--g700); font-weight: 600;
}
.flightlayover .i { color: var(--g600); flex-shrink: 0; }

/* ── Fare-brand packages ──────────────────────────────────────────────────
   Multiple real packages (Light/Standard/Loyal/Advantage-style brands) for
   the SAME flight above — see PacAmFlightService::buildItinerary()'s
   docblock for why these are grouped here instead of rendered as separate
   near-duplicate cards. ─────────────────────────────────────────────────── */
.aviacard__packages-title {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
}

.aviacard__packages { display: flex; flex-direction: column; gap: 10px; }

.flightpkg {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--ivory);
  transition: border-color var(--dur-1) ease, background-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.flightpkg:hover { border-color: var(--g600); background: var(--sand); box-shadow: var(--sh-1); }

/* The cheapest package for this flight — a subtle highlight, not a loud
   badge storm, so it reads as "this one's a good default pick" without
   competing with the actual price for attention. */
.flightpkg--best {
  border-color: var(--gold);
  background: var(--g50);
  box-shadow: 0 0 0 1px var(--gold);
}
.flightpkg--best:hover { border-color: var(--gold); background: var(--g50); }

.flightpkg__info { min-width: 0; flex: 1 1 240px; }
.flightpkg__brand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flightpkg__brand strong { font-size: .9375rem; color: var(--ink); }
.flightpkg__cabin { font-size: .75rem; color: var(--muted); }
.flightpkg__best-tag {
  font-size: .625rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; background: var(--gold); color: var(--ink);
}
.flightpkg__baggage {
  display: flex; align-items: center; gap: 5px;
  font-size: .8125rem; color: var(--muted); margin-top: 6px;
}
.flightpkg__baggage .i { color: var(--g600); flex-shrink: 0; }

.flightpkg__action { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.flightpkg__price { text-align: right; }
.flightpkg__price strong { display: block; font-size: 1.125rem; color: var(--g700); }
.flightpkg__price .price-amd { font-size: .6875rem; color: var(--muted); }

@media (max-width: 719px) {
  .aviacard__head { align-items: flex-start; }
  .aviacard__price { text-align: left; }
  .flightpkg { flex-direction: column; align-items: stretch; }
  .flightpkg__action { justify-content: space-between; }
}