/* ================= Hero ================= */
:root {
  --hero-card-overlap: 340px;
}

/* ================= Shared hero shell =================
   All seven product heroes (flights, hotels, tours, sightseeing, visas, cruises,
   destinations) share one treatment: a real photograph read through a high-key
   scrim. The scrim itself is light, so the photo keeps its colour and depth;
   legibility is bought instead by an elliptical halo down the centre column,
   which leaves the left and right thirds of the image at full strength. A
   bottom-anchored tail then resolves everything to solid white, so the search
   card floats on the page rather than on a hard-edged photo band.

   Each product stylesheet supplies only --hero-photo (and optionally
   --hero-photo-pos to pick the crop); everything else is inherited from here so
   the seven heroes cannot drift apart. */
.flight-hero,
.hotel-hero,
.tour-hero,
.sightseeing-hero,
.visa-hero,
.cruise-hero,
.destinations-hero {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  color: var(--brand-navy);
  text-align: center;
  /* The white tail is bottom-anchored and tall enough to swallow the card
     overlap plus a 200px dissolve, so the photograph always fades out exactly
     where the card begins — on every page, whatever height that card is. */
  --hero-tail: calc(var(--hero-card-overlap, 220px) + 200px);
  /* Scrim colour and sky tint are variables so a hero can warm or cool its own
     sky without forking the whole layer stack. Flights runs a blue scrim; the
     rest stay neutral white so a photo of stone or timber is not tinted. */
  --hero-scrim: 255, 255, 255;
  --hero-sky: linear-gradient(180deg, rgba(11, 31, 58, 0.07), rgba(11, 31, 58, 0) 300px);
  background-image:
    /* fine film grain — stops the scrim banding across a wide gradient and
       gives the panel a printed rather than flat-digital quality */
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.1'/></svg>"),
    /* corner vignette: pulls the eye to the centred headline */
    radial-gradient(128% 104% at 50% 32%, rgba(255, 255, 255, 0) 54%, rgba(11, 31, 58, 0.08) 100%),
    /* Halo down the type column. This is the contrast guarantee: it keeps the
       centre near-white for the headline while leaving the left and right
       thirds of the photograph at full strength. */
    radial-gradient(860px 250px at 50% 170px, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0) 84%),
    /* Scrim. Deliberately light — the photo should read as a photo, not fog.
       Measured against every hero image the headline still clears 7:1 and the
       subtitle 4.5:1, well past WCAG AA. */
    linear-gradient(180deg,
      rgba(var(--hero-scrim), 0.64) 0,
      rgba(var(--hero-scrim), 0.60) 110px,
      rgba(var(--hero-scrim), 0.52) 250px,
      rgba(var(--hero-scrim), 0.44) 340px,
      rgba(var(--hero-scrim), 0.34) 430px,
      rgba(var(--hero-scrim), 0.28) 520px),
    /* the tail — clears to solid white under the card */
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #ffffff 200px),
    var(--hero-sky),
    var(--hero-photo, none);
  background-position: 0 0, 0 0, 0 0, 0 0, left 0 bottom 0, 0 0, var(--hero-photo-pos, center 50%);
  background-size: 160px 160px, auto, auto, auto, 100% var(--hero-tail), auto, cover;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* A wing above a sunlit cloud tower. Runs a blue scrim and a stronger sky tint
   than the other heroes: this is the one hero that is genuinely a picture of
   sky, so it should read as sky rather than as a neutral wash. */
.flight-hero {
  --hero-photo: url("https://images.unsplash.com/photo-1436491865332-7a61a109cc05?fm=jpg&q=72&w=1800&auto=format&fit=crop&ixlib=rb-4.1.0");
  --hero-photo-pos: center 50%;
  --hero-scrim: 223, 238, 253;
  --hero-sky: linear-gradient(180deg,
    rgba(52, 130, 206, 0.3) 0,
    rgba(94, 163, 220, 0.17) 230px,
    rgba(150, 198, 232, 0.06) 380px,
    rgba(255, 255, 255, 0) 500px);
  padding: 3.5rem 0 calc(var(--hero-card-overlap) + 2.5rem);
}

/* ---------- Drifting cloud bank (flights only) ----------
   Two layers of soft cloud shapes that slide across the photograph at different
   speeds, so the hero reads as moving air rather than a still image.

   How the seam is avoided: each layer is twice the hero's width and its cloud
   pattern is tiled at background-size: 50% — exactly one hero-width per tile.
   Translating the layer by -50% of itself therefore advances it by precisely one
   tile, so the loop restarts on an identical frame and never visibly jumps.
   Both layers animate transform (compositor-only) rather than
   background-position, which would repaint the whole band every frame.

   They sit at z-index 0: above the hero's own background layers, below
   .hero-content (z-index 1), so they never wash over the headline. Being white
   they can only raise contrast against the navy type, never lower it. */
.flight-hero::before,
.flight-hero::after {
  content: "";
  position: absolute;
  left: 0;
  width: 200%;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat-x;
  background-size: 50% 100%;
}

/* Lower, larger, nearer — so it drifts faster. Three clouds: left, one high
   above the headline, and one anchored to the right of the band.

   Each cloud is built top-down as highlight / body / base / cool underside. The
   underside is the part that matters: pure white puffs are invisible against a
   sky this pale, and it is the shaded belly that gives them form. Clouds are
   kept clear of the centre text column (35–65%) at headline height so their
   shading can never eat into the type's contrast. */
.flight-hero::before {
  top: 2rem;
  height: 300px;
  background-image:
    /* left cloud — three lobes over a flat base, then the shaded belly */
    radial-gradient(58px 44px at 6% 50%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0) 72%),
    radial-gradient(72px 56px at 10% 43%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 72%),
    radial-gradient(52px 40px at 14% 50%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 72%),
    radial-gradient(118px 32px at 10% 60%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 70%),
    radial-gradient(86px 14px at 10% 63%, rgba(124, 154, 190, 0.17), rgba(124, 154, 190, 0) 74%),
    /* small cloud riding high, clear of the headline */
    radial-gradient(50px 34px at 33% 13%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 72%),
    radial-gradient(38px 26px at 37% 17%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 72%),
    radial-gradient(84px 22px at 34% 21%, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0) 70%),
    radial-gradient(64px 11px at 34% 23%, rgba(124, 154, 190, 0.12), rgba(124, 154, 190, 0) 74%),
    /* right cloud */
    radial-gradient(56px 42px at 80% 45%, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0) 72%),
    radial-gradient(76px 58px at 85% 37%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 72%),
    radial-gradient(54px 42px at 89% 45%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 72%),
    radial-gradient(126px 34px at 85% 55%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0) 70%),
    radial-gradient(94px 15px at 85% 58%, rgba(124, 154, 190, 0.17), rgba(124, 154, 190, 0) 74%);
  animation: hero-cloud-drift 150s linear infinite;
}

/* Higher, smaller, further away — drifts slower, which is what reads as depth. */
.flight-hero::after {
  top: 5.5rem;
  height: 210px;
  background-image:
    radial-gradient(46px 20px at 22% 30%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 72%),
    radial-gradient(86px 24px at 25% 37%, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0) 70%),
    radial-gradient(80px 15px at 25% 43%, rgba(124, 154, 190, 0.13), rgba(124, 154, 190, 0) 74%),
    radial-gradient(42px 18px at 67% 14%, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0) 72%),
    radial-gradient(78px 22px at 70% 20%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 70%),
    radial-gradient(72px 14px at 70% 26%, rgba(124, 154, 190, 0.12), rgba(124, 154, 190, 0) 74%),
    radial-gradient(50px 22px at 93% 24%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 72%),
    radial-gradient(92px 26px at 96% 31%, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0) 70%),
    radial-gradient(86px 16px at 96% 38%, rgba(124, 154, 190, 0.13), rgba(124, 154, 190, 0) 74%);
  animation: hero-cloud-drift 260s linear infinite;
}

@keyframes hero-cloud-drift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.hero-path {
  position: absolute;
  top: 5.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(1240px, 92%);
  height: 220px;
  color: rgba(11, 31, 58, 0.14);
  pointer-events: none;
}

.hero-path svg {
  width: 100%;
  height: 100%;
}

.hero-path-plane {
  position: absolute;
  top: 34%;
  width: 22px;
  height: 22px;
  color: var(--brand-gold);
}

.hero-path-plane .icon {
  width: 100%;
  height: 100%;
}

/* The arc is a round trip, so the planes mirror each other rather than both
   flying the same way. 64deg / 296deg are the actual tangents of the quadratic
   path at its two ends (the icon points north at 0deg), one taken forwards and
   one reversed — which is what makes them read as "out" and "back". */
.hero-path-plane-start {
  left: 2%;
  transform: rotate(64deg);
}

.hero-path-plane-end {
  right: 2%;
  transform: rotate(296deg);
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 2rem;
  padding: 0.55rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--brand-navy);
  box-shadow: 0 10px 26px rgba(11, 31, 58, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  margin-bottom: 1.15rem;
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef6a4c;
  flex-shrink: 0;
}

.flight-hero-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 4.6vw, 4.15rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 0.8rem;
  color: var(--brand-navy);
  text-shadow: 0 1px 26px rgba(255, 255, 255, 0.85);
}

/* Left as the flat brand gold on purpose. A metallic gradient fill was tried
   here and dropped: its highlight stops measure ~2.1:1 against the hero, below
   the 3:1 large-text floor, where flat --brand-gold clears it at ~3:1. */
.flight-hero-title em {
  font-style: italic;
  color: var(--brand-gold);
  font-weight: 500;
}

.flight-hero-subtitle {
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.62;
  color: #33415a;
  max-width: 620px;
  margin: 0 auto;
  text-shadow: 0 1px 18px rgba(255, 255, 255, 0.9);
}

/* ================= Search card ================= */
.flight-search-wrapper {
  margin-top: calc(-1 * var(--hero-card-overlap));
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 5;
}

.flight-search-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(11, 31, 58, 0.05);
  border-radius: 1.4rem;
  /* Layered elevation: a tight contact shadow, a mid lift and a wide ambient
     pool, plus an inset top highlight. One big blurred shadow reads cheap; this
     is what makes the card look like it is actually sitting above the photo. */
  box-shadow:
    0 1px 2px rgba(11, 31, 58, 0.05),
    0 8px 18px rgba(11, 31, 58, 0.06),
    0 30px 60px rgba(11, 31, 58, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 1.6rem 1.85rem 1.85rem;
}

/* Hairline sheen along the top edge of the card. */
.flight-search-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, rgba(169, 121, 26, 0), rgba(169, 121, 26, 0.35), rgba(169, 121, 26, 0));
  pointer-events: none;
}

/* ================= Product switcher ================= */
.product-switcher {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.product-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: transparent;
  color: #6b7789;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 1.1rem;
  border-radius: 0.6rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.product-tab .icon {
  width: 17px;
  height: 17px;
}

.product-tab:hover {
  color: var(--brand-navy);
  text-decoration: none;
}

.product-tab.active {
  background: var(--brand-navy);
  color: #fff;
}

/* ================= Trip type tabs ================= */
.trip-type-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.trip-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  background: var(--brand-navy-soft);
  border-radius: 2.5rem;
  padding: 0.3rem;
  width: fit-content;
  margin-bottom: 1.25rem;
}

.trip-type-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.15rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--brand-navy);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
}

.new-badge {
  background: #ffe3d9;
  color: #d1531f;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 1rem;
  letter-spacing: 0.02em;
}

#tripRoundTrip:checked ~ .trip-type-tabs label[for="tripRoundTrip"],
#tripOneWay:checked ~ .trip-type-tabs label[for="tripOneWay"],
#tripMultiCity:checked ~ .trip-type-tabs label[for="tripMultiCity"] {
  background: #fff;
  color: var(--brand-navy);
  box-shadow: 0 3px 10px rgba(11, 31, 58, 0.15);
}

#tripRoundTrip:focus-visible ~ .trip-type-tabs label[for="tripRoundTrip"],
#tripOneWay:focus-visible ~ .trip-type-tabs label[for="tripOneWay"],
#tripMultiCity:focus-visible ~ .trip-type-tabs label[for="tripMultiCity"] {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* ================= Fare type + non-stop ================= */
.fare-type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid #eef1f6;
}

.fare-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.fare-type-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #dde3ec;
  border-radius: 0.6rem;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.fare-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fare-type-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #c3cbd6;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s ease;
}

.fare-type-radio::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--brand-gold);
  transform: scale(0);
  transition: transform 0.15s ease;
}

.fare-type-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.fare-type-text strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-navy);
}

.fare-type-text span {
  font-size: 0.72rem;
  color: #8b95a5;
}

.fare-type-card:hover {
  border-color: var(--brand-gold);
}

.fare-type-card:has(input:checked) {
  border-color: var(--brand-gold);
  background: var(--brand-gold-soft);
}

.fare-type-card:has(input:checked) .fare-type-radio {
  border-color: var(--brand-gold);
}

.fare-type-card:has(input:checked) .fare-type-radio::after {
  transform: scale(1);
}

.fare-type-card:has(input:focus-visible) {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

.nonstop-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brand-navy);
  cursor: pointer;
}

.nonstop-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nonstop-box {
  width: 20px;
  height: 20px;
  border-radius: 0.3rem;
  border: 2px solid #c3cbd6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.nonstop-box .icon {
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.nonstop-check:has(input:checked) .nonstop-box {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
}

.nonstop-check:has(input:checked) .nonstop-box .icon {
  opacity: 1;
  transform: scale(1);
}

.nonstop-check:has(input:focus-visible) .nonstop-box {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* ================= Field boxes ================= */
.trip-fields-simple {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

#tripMultiCity:checked ~ .trip-fields-simple {
  display: none;
}

#tripOneWay:checked ~ .trip-fields-multi,
#tripRoundTrip:checked ~ .trip-fields-multi {
  display: none;
}

#tripOneWay:checked ~ .trip-fields-simple .field-return {
  display: none;
}

.trip-fields-multi {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.field-box {
  position: relative;
  flex: 1 1 170px;
  min-width: 150px;
  border: 1px solid #dde3ec;
  border-radius: 0.85rem;
  padding: 0.55rem 0.75rem 0.6rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-box:hover {
  border-color: var(--brand-gold);
}

.field-box.is-active {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(169, 121, 26, 0.14);
}

.field-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8b95a5;
  margin-bottom: 0.15rem;
}

.field-value-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  color: var(--brand-navy);
  font-weight: 600;
  font-size: 0.95rem;
}

.field-value-btn .icon {
  width: 17px;
  height: 17px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.field-value-btn .icon-chevron-down {
  width: 14px;
  height: 14px;
  color: #a7b0bd;
  margin-left: auto;
}

.field-value-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.field-box.field-origin .field-value-text.is-placeholder,
.field-box.field-destination .field-value-text.is-placeholder,
.field-box.field-depart .field-value-text.is-placeholder,
.field-box.field-return .field-value-text.is-placeholder {
  color: #a7b0bd;
  font-weight: 500;
}

/* ================= Swap button ================= */
.swap-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #dde3ec;
  background: #fff;
  color: var(--brand-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform 0.35s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.swap-btn:hover {
  background: var(--brand-navy);
  color: #fff;
  border-color: var(--brand-navy);
  transform: rotate(180deg);
}

.swap-btn .icon {
  width: 16px;
  height: 16px;
}

/* ================= Multi-city rows ================= */
.multi-city-rows {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.multi-city-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  background: var(--brand-navy-soft);
  padding: 1.1rem 0.85rem 0.85rem;
  border-radius: 0.85rem;
}

.multi-city-row .field-box {
  background: #fff;
}

.multi-city-row .flight-index {
  position: absolute;
  top: -0.6rem;
  left: 0.85rem;
  background: var(--brand-navy);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 1rem;
}

.remove-row-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #dde3ec;
  background: #fff;
  color: #b3261e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.remove-row-btn .icon {
  width: 14px;
  height: 14px;
}

.remove-row-btn:hover:not(:disabled) {
  background: #b3261e;
  color: #fff;
  border-color: #b3261e;
}

.remove-row-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.add-city-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px dashed var(--brand-gold);
  color: var(--brand-gold);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.add-city-btn .icon {
  width: 15px;
  height: 15px;
}

.add-city-btn:hover:not(:disabled) {
  background: var(--brand-gold);
  color: #fff;
}

.add-city-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-style: solid;
}

.field-travelers-multi {
  flex: 0 0 auto;
  max-width: 280px;
}

/* ================= Promo banner + search ================= */
.search-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.promo-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--brand-gold-soft);
  color: #8a6a13;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.85rem 1.1rem;
  border-radius: 0.75rem;
  flex: 1 1 320px;
}

.promo-banner .icon {
  width: 17px;
  height: 17px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.search-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--brand-navy);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 0.85rem 2rem;
  border-radius: 3rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(11, 31, 58, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  flex: 0 0 auto;
}

.search-btn .icon {
  width: 17px;
  height: 17px;
}

.search-btn:hover {
  background: var(--brand-navy-dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(11, 31, 58, 0.38);
}

/* ================= Shared popover base ================= */
.popover-panel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #eef1f6;
  box-shadow: 0 20px 45px rgba(11, 31, 58, 0.22);
  animation: popoverIn 0.15s ease;
  /* Belt-and-braces against the promo banner (or anything else lower in the
     card) showing through a short/loading panel — e.g. the autocomplete
     list before results populate — regardless of the panel's actual
     content height. */
  min-height: 120px;
}

@keyframes popoverIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= Autocomplete ================= */
.autocomplete-panel {
  width: 340px;
  padding: 0.9rem;
}

.autocomplete-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #dde3ec;
  border-radius: 0.6rem;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.75rem;
}

.autocomplete-search .icon {
  width: 16px;
  height: 16px;
  color: #a7b0bd;
  flex-shrink: 0;
}

.autocomplete-search input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 0.9rem;
  color: var(--brand-navy);
}

.autocomplete-heading {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b95a5;
  padding: 0 0.2rem 0.5rem;
}

.autocomplete-list {
  max-height: 280px;
  overflow-y: auto;
}

.autocomplete-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  border: none;
  background: none;
  padding: 0.55rem 0.4rem;
  border-radius: 0.6rem;
  text-align: left;
  transition: background-color 0.15s ease;
}

.autocomplete-row:hover,
.autocomplete-row.is-highlighted {
  background: var(--brand-navy-soft);
}

.autocomplete-code {
  flex-shrink: 0;
  width: 42px;
  height: 30px;
  border-radius: 0.4rem;
  background: var(--brand-navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}

.autocomplete-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.autocomplete-city {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brand-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocomplete-meta {
  font-size: 0.75rem;
  color: #8b95a5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocomplete-empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: #8b95a5;
  font-size: 0.85rem;
}

/* ================= Calendar ================= */
.calendar-panel {
  width: 620px;
  padding: 1.1rem 1.25rem 1.25rem;
  transition: width 0.15s ease;
}

/* One-way's Depart field and every multi-city leg only ever pick a single
   date — sized for one month instead of stretching to the two-month range
   panel's width and leaving a big empty gap next to the calendar grid. */
.calendar-panel.is-single-month {
  width: 320px;
}

/* The nav header (.calendar-range-title) already names the visible month —
   the per-month title is only needed to tell two side-by-side months apart. */
.calendar-panel.is-single-month .calendar-month-title {
  display: none;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.calendar-range-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-navy);
}

.calendar-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #dde3ec;
  background: #fff;
  color: var(--brand-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.calendar-nav:hover {
  background: var(--brand-navy);
  color: #fff;
}

.calendar-nav .icon {
  width: 16px;
  height: 16px;
}

.calendar-months {
  display: flex;
  gap: 1.75rem;
}

.calendar-month {
  flex: 1 1 0;
  min-width: 0;
}

.calendar-month-title {
  text-align: center;
  font-weight: 600;
  color: var(--brand-navy);
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: #a7b0bd;
  padding-bottom: 0.4rem;
}

.calendar-day {
  position: relative;
  border: none;
  background: none;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--brand-navy);
  font-weight: 600;
  cursor: pointer;
  border-radius: 50%;
  z-index: 1;
}

.calendar-day:hover:not(:disabled):not(.is-empty) {
  background: var(--brand-navy-soft);
}

.calendar-day:disabled,
.calendar-day.is-empty {
  color: #d3d8e0;
  cursor: not-allowed;
}

.calendar-day.is-today {
  box-shadow: inset 0 0 0 1px var(--brand-gold);
}

.calendar-day.is-selected {
  background: var(--brand-navy);
  color: #fff;
  border-radius: 50%;
}

.calendar-day.is-in-range {
  background: var(--brand-navy-soft);
  border-radius: 0;
}

.calendar-day.is-range-start {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}

.calendar-day.is-range-end {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.calendar-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid #eef1f6;
}

.calendar-helper {
  font-size: 0.85rem;
  color: #6b7789;
}

.calendar-done {
  background: var(--brand-navy);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  transition: background-color 0.2s ease;
}

.calendar-done:hover {
  background: var(--brand-navy-dark);
}

/* ================= Travellers & cabin class ================= */
.pax-panel {
  width: 460px;
  padding: 1rem 1.1rem 1.1rem;
}

.pax-inner-tabs {
  display: flex;
  gap: 0.4rem;
  background: var(--brand-navy-soft);
  border-radius: 2.5rem;
  padding: 0.25rem;
  margin-bottom: 1.1rem;
  width: fit-content;
}

.pax-inner-tab {
  border: none;
  background: none;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--brand-navy);
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.pax-inner-tab.active {
  background: #fff;
  box-shadow: 0 3px 10px rgba(11, 31, 58, 0.15);
}

.pax-count-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem 0;
}

.pax-count-row + .pax-count-row {
  border-top: 1px solid #f1f3f7;
}

.pax-count-row-pair {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  border-top: 1px solid #f1f3f7;
}

.pax-count-row-pair .pax-count-row {
  flex: 1 1 180px;
  border-top: none;
}

.pax-count-label strong {
  display: block;
  font-size: 0.85rem;
  color: var(--brand-navy);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pax-count-label span {
  font-size: 0.72rem;
  color: #8b95a5;
}

.pax-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pax-pill {
  min-width: 32px;
  height: 32px;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid #dde3ec;
  background: #fff;
  color: var(--brand-navy);
  font-weight: 600;
  font-size: 0.85rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pax-pill:hover:not(.selected):not(:disabled) {
  border-color: var(--brand-gold);
}

.pax-pill.selected {
  background: var(--brand-navy);
  color: #fff;
  border-color: var(--brand-navy);
}

.pax-pill:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.cabin-class-heading {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b95a5;
  margin-bottom: 0.6rem;
}

.cabin-class-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 320px;
  overflow-y: auto;
}

.cabin-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid #dde3ec;
  border-radius: 0.85rem;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.cabin-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cabin-card > .icon {
  width: 34px;
  height: 34px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.cabin-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cabin-card-body strong {
  font-size: 0.9rem;
  color: var(--brand-navy);
}

.cabin-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

.cabin-card-features span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: #6b7789;
}

.cabin-card-features .icon {
  width: 13px;
  height: 13px;
  color: var(--brand-gold);
}

.cabin-card:hover {
  border-color: var(--brand-gold);
}

.cabin-card.selected {
  border-color: var(--brand-navy);
  background: var(--brand-navy-soft);
}

.pax-panel-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid #eef1f6;
}

.pax-apply {
  background: var(--brand-navy);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 0.55rem 1.7rem;
  border-radius: 2rem;
  transition: background-color 0.2s ease;
}

.pax-apply:hover {
  background: var(--brand-navy-dark);
}

/* ================= Responsive ================= */
@media (max-width: 991.98px) {
  .calendar-panel {
    width: 340px;
  }

  .calendar-months {
    flex-direction: column;
    gap: 0.5rem;
  }

  .calendar-month + .calendar-month {
    display: none;
  }

  .pax-panel {
    width: 400px;
  }
}

@media (max-width: 767.98px) {
  .flight-hero {
    padding-top: 3rem;
  }

  .flight-hero-title {
    font-size: 2.1rem;
  }

  .hero-badge {
    margin-bottom: 1.25rem;
  }

  .flight-hero-subtitle {
    font-size: 0.98rem;
  }

  .hero-path {
    display: none;
  }

  .flight-search-card {
    padding: 1.25rem 1rem 1.5rem;
  }

  .trip-fields-simple {
    flex-direction: column;
    align-items: stretch;
  }

  .trip-fields-simple .field-box,
  .multi-city-row .field-box {
    flex: 0 0 auto;
    width: 100%;
  }

  .swap-btn {
    align-self: center;
    transform: rotate(90deg);
  }

  .swap-btn:hover {
    transform: rotate(270deg);
  }

  .multi-city-row {
    flex-direction: column;
    align-items: stretch;
  }

  .multi-city-row .swap-btn {
    align-self: center;
    transform: rotate(90deg);
  }

  .multi-city-row .swap-btn:hover {
    transform: rotate(270deg);
  }

  .remove-row-btn {
    align-self: flex-end;
  }

  .field-travelers-multi {
    max-width: none;
  }

  .search-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .promo-banner {
    flex: 0 0 auto;
  }

  .search-btn {
    justify-content: center;
  }

  .popover-panel {
    position: fixed;
    left: 0.75rem !important;
    right: 0.75rem !important;
    top: auto !important;
    bottom: 0.75rem;
    width: auto !important;
    max-height: 75vh;
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flight-search-card *,
  .flight-search-card *::after,
  .flight-search-card *::before {
    transition: none !important;
    animation: none !important;
  }

  /* The clouds stay — they are part of the composition — but they stop moving. */
  .flight-hero::before,
  .flight-hero::after {
    animation: none !important;
  }
}

/* hero photo: phone-sized variant. The hero is this page's Largest Contentful Paint element, and the
   1800px crop is ~450 KB for a viewport a fifth as wide. Phones get a 760px
   version instead.

   This repeats the hero's own selector rather than overriding :root: the base
   rule sets --hero-photo on the hero element itself, and a property set on the
   element always beats one inherited from an ancestor, whatever the source
   order. */
@media (max-width: 767.98px) {
  .flight-hero {
    --hero-photo: url("https://images.unsplash.com/photo-1436491865332-7a61a109cc05?fm=jpg&q=68&w=760&auto=format&fit=crop&ixlib=rb-4.1.0");
  }
}