/* Aeroinis search bar.
   One component, two pages: the empty-leg board and the private-charter hero.
   The layout follows the airline booking-widget convention — a mode row, a
   single divided white panel, a swap control on the origin/destination seam,
   and a full-height call to action closing the row. Defining it twice is how
   the request forms drifted into four different styles, so it lives here once.
*/
/* ── Search panel ─────────────────────────────────────────────────────────
   The airline booking-widget convention: a mode row, one divided white panel,
   a swap control on the origin/destination seam, and a full-height CTA. */

.asb { margin: 0 0 26px; }

.asb__modes { display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
  padding: 16px 20px 4px; background: #fff; border-radius: 10px 10px 0 0; }
.asb__modes + .asb__panel { border-radius: 0 0 10px 10px; box-shadow: 0 18px 50px -20px rgba(11,13,15,.3); }
.asb__mode { display: inline-flex; align-items: center; gap: 9px; padding: 4px 0; border: 0;
  background: none; cursor: pointer; font-size: .88rem; font-weight: 600; color: #2A3038; }
.asb__mode input { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin: 0;
  border: 1.5px solid rgba(11,13,15,.34); border-radius: 50%; flex: none; }
.asb__mode input:checked { border: 5px solid #806536; }
.asb__mode:hover { color: #0B0D0F; }
.asb__status { margin-left: auto; padding-bottom: 4px; display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 600; color: #5B5B57; }
.asb__status i { width: 7px; height: 7px; border-radius: 50%; background: #3F7D58; flex: none; }

/* Measured off the airline widget rather than guessed: the fields are separate
   tiles sitting on a white card, not one panel cut by hairlines. Tile height
   66px, corner radius 6px, label 11px over an 18px value, and a solid
   rectangular call to action the same height as the tiles. The small radius and
   the gaps are what make it read as an airline booking bar instead of a
   generic form. */
.asb__panel { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px;
  padding: 10px; background: #fff; border-radius: 10px; position: relative;
  box-shadow: 0 18px 50px -20px rgba(11,13,15,.3), 0 1px 3px rgba(11,13,15,.07); }

.asb__cell { flex: 1 1 140px; display: grid; align-content: center; gap: 1px;
  min-height: 58px; padding: 8px 14px; border: 0; border-radius: 6px;
  background: #F3F2EE; cursor: text; min-width: 0;
  transition: background .15s, box-shadow .15s; }
.asb__cell:hover { background: #EEECE6; }
.asb__cell:focus-within { background: #fff; box-shadow: inset 0 0 0 2px #C8A96A; }

/* display:grid on the cell beats the hidden attribute, which is how the return
   date stayed on screen while "one way" was selected. */
.asb__cell[hidden] { display: none; }

.asb__lab { font-size: .66rem; font-weight: 700; letter-spacing: .01em; color: #7C7669; line-height: 1.3; }
.asb__cell input { width: 100%; min-width: 0; border: 0; background: transparent; font: inherit;
  font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: #0B0D0F; padding: 0; }
.asb__cell input:focus { outline: none; }
/* The airline leaves an untouched field showing only its label; a placeholder
   repeating the same thing is noise in a row of five. */
.asb__cell input::placeholder { font-weight: 500; color: #A8A296; }
.asb__with-icon { display: flex; align-items: center; gap: 9px; color: #7C7669; min-width: 0; }
.asb__sub { font-size: .64rem; line-height: 1.3; color: #7C7669; }
.asb__cell input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }

/* Origin, swap and destination are one unit; the swap sits in the gap between
   the two tiles, which is where the airline puts it. */
.asb__pair { flex: 2.4 1 340px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  position: relative; min-width: 0; }
.asb__swap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(11,13,15,.18);
  background: #fff; color: #806536; cursor: pointer; z-index: 3;
  box-shadow: 0 1px 4px rgba(11,13,15,.14); transition: transform .3s, background .15s; }
.asb__swap:hover { background: #C8A96A; color: #0B0D0F; transform: translate(-50%, -50%) rotate(180deg); }

.asb__go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 58px; padding: 0 24px; border: 0; border-radius: 6px; background: #0B0D0F; color: #F5F4F0;
  font: inherit; font-size: .85rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.asb__go:hover { background: #C8A96A; color: #0B0D0F; }

.asb__foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 20px 16px;
  background: #fff; border-radius: 0 0 10px 10px; }
.asb__panel:has(+ .asb__foot) { border-radius: 10px 10px 0 0; box-shadow: none; padding-bottom: 4px; }
.asb--hero:has(.asb__foot) .asb__panel { box-shadow: none; }
.asb--hero .asb__form:has(.asb__foot),
.asb--hero:has(.asb__foot) { filter: drop-shadow(0 26px 40px rgba(6,16,30,.4)); }
.asb__quick { border: 0; background: transparent; padding: 0; font: inherit; font-size: .82rem;
  font-weight: 700; color: #2A3038; cursor: pointer; text-decoration: none; }
.asb__quick span { color: #C8A96A; }
.asb__quick:hover { color: #0B0D0F; text-decoration: underline; text-underline-offset: 3px; }
.asb__quick--right { margin-left: auto; }

@media (max-width: 1040px) {
  .asb__pair { flex-basis: 100%; }
  .asb__go { flex: 1 1 100%; margin: 10px; min-height: 54px; }
}
@media (max-width: 620px) {
  .asb__pair { grid-template-columns: 1fr; }
  .asb__cell { border-left: 0; border-top: 1px solid rgba(11,13,15,.1); }
  .asb__panel > .asb__cell:first-child,
  .asb__pair > .asb__cell:first-child { border-top: 0; }
  .asb__swap { left: auto; right: 22px; top: 50%; }
  .asb__go, .asb__pair { grid-column: auto; }
  .asb__quick--right { margin-left: 0; }
}

.asb__pair > .asb__cell { border-left: 1px solid rgba(11,13,15,.1); }
.asb__panel > .asb__pair + .asb__cell { border-left: 1px solid rgba(11,13,15,.1); }

/* The route-watch cards were built to their own 1120px width, narrower than the
   board above them. They now carry .wrap like everything else; this only has to
   stop the old fixed width from winning. */
.ai-watchcards__inner { max-width: none; }

/* Panel definition: a shadow alone leaves the white panel dissolving into the
   cream page. Airlines give theirs a hairline. */


/* The divider was drawn straight through the swap control. A ring in the page
   colour cuts it, which is how every airline widget handles the same overlap. */


/* The passenger cell now carries the site stepper, which brings its own frame —
   inside a panel cell that frame is one border too many. */
.asb__cell .ai-stepper { display: inline-grid; grid-template-columns: 26px 36px 26px;
  border: 0; background: transparent; margin-left: -4px; }
.asb__cell .ai-stepper button { background: transparent; border-radius: 6px; color: #8B857A;
  font-size: 1.1rem; line-height: 1; }
.asb__cell .ai-stepper button:hover { background: rgba(11,13,15,.06); color: #0B0D0F; }
.asb__cell .ai-stepper input { min-height: 26px; font-size: 1.06rem; font-weight: 700; text-align: center; }
.asb__cell--pax .asb__with-icon { gap: 4px; }
.asb__cell--pax input { max-width: none; }

/* The airport panel is mounted next to the field, so the cell that owns it has
   to be able to overflow the search bar. */
.asb__panel, .asb__pair, .asb__cell { position: relative; }
.asb .ai-field-panel { z-index: 40; }

/* ── Hero variant ─────────────────────────────────────────────────────────
   On the private-charter page the bar is the page's main action, so it sits
   full width under the headline with the service tabs above it — the shape an
   airline home page uses. */

.asb-form { display: block; margin-top: clamp(26px, 4vw, 46px); }
.asb-note { margin: 14px 0 0; max-width: 78ch; font-size: .78rem; line-height: 1.55; color: rgba(245,244,240,.72); }

.asb__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.asb__tab { padding: 11px 20px; border-radius: 12px 12px 0 0; background: rgba(245,244,240,.1);
  color: rgba(245,244,240,.82); font-size: .84rem; font-weight: 700; text-decoration: none; }
.asb__tab:hover { background: rgba(245,244,240,.2); color: #fff; }
.asb__tab.is-on { background: #fff; color: #0B0D0F; }

.asb--hero .asb__modes { border-radius: 10px 10px 0 0; }
.asb--hero .asb__panel { box-shadow: 0 26px 70px -24px rgba(6,16,30,.55); }
.asb--hero .asb__status { color: #5B5B57; }
.asb--hero .asb__quick { color: #2A3038; }
.asb--hero .asb__quick:hover { color: #0B0D0F; }


.asb-form .optional { margin-top: 18px; }
.asb-form .optional summary { color: rgba(245,244,240,.9); font-size: .84rem; font-weight: 700; cursor: pointer; }
.asb-form .optional .field { margin-top: 12px; display: grid; gap: 7px; max-width: 760px; }
.asb-form .optional label { font-size: .655rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(245,244,240,.7); }
.asb-form .optional textarea { width: 100%; min-height: 104px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(245,244,240,.2); background: rgba(245,244,240,.06); color: #F5F4F0; font: inherit; }
.asb-form .optional textarea:focus { outline: none; border-color: #C8A96A; box-shadow: 0 0 0 3px rgba(200,169,106,.25); }

@media (max-width: 720px) {
  .asb__tab { border-radius: 10px; }
  .asb--hero .asb__modes { border-radius: 12px 12px 0 0; }
}

/* ── Home variant ─────────────────────────────────────────────────────────
   The home widget switches between four desks rather than trip types, so its
   tabs are buttons over panels instead of links to pages. Everything below the
   tabs is the same component. */
.asb--hero .asb__tab { border: 0; font: inherit; cursor: pointer; }
.asb--hero .asb__tab[aria-selected="true"] { background: #fff; color: #0B0D0F; }
.asb--hero .asb__tab svg { vertical-align: -4px; margin-right: 7px; }

.asb__form { display: block; }
.asb__form + .asb__form { margin-top: 0; }
.asb__minor { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
  padding: 0 12px 12px; background: #fff; border-radius: 0 0 10px 10px; }
.asb__minor + * { margin-top: 0; }
.asb__cell--minor { min-height: 68px; }
.asb--hero .asb__form:has(.asb__minor) .asb__panel { border-radius: 0; box-shadow: none; padding-bottom: 0; }
.asb--hero .asb__form:has(.asb__minor) { border-radius: 0 0 10px 10px;
  box-shadow: 0 26px 70px -24px rgba(6,16,30,.55); background: #fff; }

/* display:block on the panel form beats the hidden attribute, so every desk's
   panel was on screen at once. Same trap as the return-date cell. */
.asb__form[hidden] { display: none; }

/* The legacy widget shell drew its own card. The bar brings its own surface, so
   the outer frame became a second box around the first. */
.asb.ai-hero-widget {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Private-charter hero placement ───────────────────────────────────────
   The airline puts the booking bar inside the hero, visible without scrolling,
   with the promotional copy above it. Ours was below a five-line headline and a
   proof block, which pushed it under the fold. */
/* Measured: the bar was ending 72px below the fold on a 674px viewport, so the
   hero's own top padding and the copy spacing come down until it clears. */
body.ai-core-private-page .hero { padding-top: clamp(64px, 7vw, 96px); padding-bottom: 0; }
body.ai-core-private-page .hero .hero-grid { align-items: start; padding-bottom: 18px; }
body.ai-core-private-page .hero h1 { font-size: clamp(28px, 3.2vw, 44px); max-width: 20ch; line-height: 1.08; }
body.ai-core-private-page .hero .lede { max-width: 62ch; margin-top: 10px; font-size: 15px; }
/* The proof block repeated the promise the lede already makes, and it was the
   last 70px keeping the bar off the first screen. It survives further down the
   page in the verification section. */
body.ai-core-private-page .hero .proof { display: none; }
body.ai-core-private-page .hero { min-height: 0 !important; }
body.ai-core-private-page .asb-form { margin-top: 0; padding-bottom: clamp(26px, 4vw, 48px); }
body.ai-core-private-page .asb__tabs { margin-bottom: 0; }
body.ai-core-private-page .asb__modes { padding: 12px 20px 2px; }
/* The extras block sits below the hero band; it stays in the form so it still
   submits, it just does not compete with the bar for the first screen. */
body.ai-core-private-page .asb-extras { padding: 26px 0 clamp(30px, 5vw, 54px); }
body.ai-core-private-page .asb__foot { margin-top: 10px; }

/* The extras and the small print belong under the fold with the rest of the
   page, not squeezed into the hero band. */


/* ── Private-charter hero photograph ──────────────────────────────────────
   The page was using a video poster frame: 1920×1080 but only 82 KB, then
   stretched full-bleed and dimmed to 72%. Compression artefacts at that size
   read as "out of focus", which is most of why the page looked cheap.
   This is a real photograph — 8202×3488, and its 2.35:1 shape is already a
   hero band, so nothing has to be cropped away. */
/* .hero::before sits at z-index:-2, which puts it behind the page wrapper's own
   background — the video was visible only because it stacks above. The
   photograph therefore goes on the hero itself. */
body.ai-core-private-page .hero {
  background-image:
    linear-gradient(96deg, rgba(8,10,14,.88) 0%, rgba(8,10,14,.62) 42%, rgba(8,10,14,.18) 72%, rgba(8,10,14,.05) 100%),
    linear-gradient(to top, rgba(8,10,14,.55) 0%, rgba(8,10,14,0) 40%),
    url("https://commons.wikimedia.org/wiki/Special:FilePath/Bombardier_Global_6500_N650SS_FDK_MD1.jpg?width=2400") !important;
  background-size: cover !important;
  background-position: 62% 58% !important;
  background-repeat: no-repeat !important;
  isolation: isolate;
}
/* The old poster layer and its slow zoom are no longer doing anything useful. */
body.ai-core-private-page .hero::before { display: none !important; }
.hero-credit { position: absolute; right: 14px; bottom: 10px; z-index: 2; margin: 0;
  font-size: .62rem; letter-spacing: .02em; color: rgba(245,244,240,.55); }
.hero-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero-credit a:hover { color: rgba(245,244,240,.9); }

/* The blurred picture on screen was not the poster at all — a low-bitrate hero
   video sits on top of it. With a real photograph behind, the video is only
   softening it. */
body.ai-core-private-page .hero .ai-video-hero__video,
body.ai-core-private-page .hero .ai-video-hero__media { display: none !important; }

/* One accent instead of black on grey on cream. */
.asb__go { background: #C8A96A; color: #14171B; }
.asb__go:hover { background: #D9BE83; color: #0B0D0F; }

/* C6 — the empty-leg watch left the hero.
   As a fourth hero tab it competed with three charter requests, which it is not:
   it is a standing alert on a route. It now sits under the board, where the
   visitor has just read that nothing is listed for their pair. */
.asb--inline { margin: 26px 0 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.el-watch__lead { margin: 0 0 12px; max-width: 62ch; font-size: .9rem; line-height: 1.65; color: #5F6469; }
.el-watch .asb__panel { background: #fff; border: 1px solid rgba(11,13,15,.12); }

/* The urgency selector that replaced the duplicate Time-Critical panel. */
.asb__cell select { width: 100%; border: 0; padding: 0; background: transparent; font: inherit;
  font-size: .95rem; font-weight: 600; color: #0B0D0F; cursor: pointer; }
.asb__cell select:focus { outline: none; }

/* ── "more detail": the hero opens on one line ───────────────────────
   Seven fields at equal weight made the instrument taller than the promise
   above it. The route and the clock stay; everything else folds behind one
   line that reports what it holds. */
.asb__more { display: inline-flex; align-items: center; gap: 10px; margin: 2px 10px 8px; padding: 9px 14px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 .78rem/1 "Satoshi", system-ui, sans-serif; color: #6A6C62;
  transition: background .2s ease, color .2s ease; }
.asb__more:hover { background: rgba(11,13,15,.05); color: #0B0D0F; }
.asb__more i { width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px,-1px); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.asb__more[aria-expanded="true"] i { transform: rotate(-135deg) translate(-2px,-2px); }
.asb__more__sum { font-weight: 500; color: #8a857a; }
.asb__more__sum:not(:empty)::before { content: "·"; margin-right: 8px; color: rgba(11,13,15,.25); }
.asb__minor[hidden] { display: none !important; }