/* SkyMonde Search Widget - Standalone CSS */
/* Converged to match reference React app computed styles */

/* ===== Layout convention =====
 *
 * The widget JS sets a `data-layout` attribute on each `.sw-root`
 * (mounted root, expanded desktop panel, mobile edit overlay) that
 * declares whether the contained DOM is in "mobile" or "desktop"
 * layout. JS keeps this in sync with `_mobileMode` (matchMedia 767px).
 *
 * When to use which selector:
 *   - `.sw-root[data-layout="desktop"] ...`  for rules that are
 *     genuinely desktop-only and would leak into mobile via specificity
 *     (e.g. `:has()`-based scopes, flex pinning, alignment changes).
 *   - `.sw-root[data-layout="mobile"] ...`   for mobile-only structural
 *     rules. Most mobile-only rules currently still live in the
 *     `@media (max-width: 767px)` block at the bottom of this file —
 *     leaving that block alone is fine; new layout-divergent rules
 *     should prefer `[data-layout]`.
 *   - `@media (max-width: 767px) { ... }`    for small responsive
 *     tweaks that are inherently viewport-driven (font sizes, spacing,
 *     tap targets) and don't conflict with the layout decision tree.
 *
 * Rule of thumb: if the rule defines "what shape does this layout
 * have", use `[data-layout]`. If it tunes a value within a layout,
 * `@media` is fine.
 */

/* ===== Design Tokens ===== */
:root {
  --sw-primary: #1771d4;
  --sw-brand: #1876dc;
  --sw-primary-hover: #2c86e8;
  --sw-primary-active: #1568c1;
  --sw-primary-subtle: #e5f2ff;
  --sw-primary-subtle-hover: #d1e7ff;
  --sw-accent: #df4477;
  --sw-accent-hover: #c03060;
  --sw-success: #23955c;
  --sw-danger: #dc5338;
  --sw-warning: #f38516;
  --sw-bg-canvas: #f0f3f5;
  --sw-bg-primary: #fff;
  --sw-bg-secondary: #f5f7f9;
  --sw-bg-disabled: #e9ecef;
  --sw-bg-scrim: rgba(58, 66, 74, 0.8);
  --sw-border-light: #e9ecef;
  --sw-border-medium: #dee3e7;
  --sw-border-strong: #717f8e;
  --sw-text-primary: #1a232b;
  --sw-text-secondary: #3a424a;
  --sw-text-tertiary: #555f6d;
  --sw-text-disabled: #8a96a3;
  --sw-text-inverse: #fff;
  --sw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sw-radius-sm: 8px;
  --sw-radius-md: 12px;
  --sw-radius-lg: 16px;
  --sw-radius-pill: 1000px;
  --sw-radius-btn: 1000px;
  --sw-radius-form: var(--sw-radius-pill);
  --sw-shadow-card: 0 0 2px 0 rgba(26,35,43,0.04), 0 1px 3px 0 rgba(26,35,43,0.12);
  --sw-shadow-modal: 0 0 2px 0 rgba(26,35,43,0.04), 0 8px 16px 0 rgba(26,35,43,0.12);
  --sw-shadow-popover: 0 0 2px 0 rgba(26,35,43,0.04), 0 3px 6px 0 rgba(26,35,43,0.12);
  --sw-transition: var(--duration-snap) var(--ease-snap);
  /* Chrome colors — tabs, trip-type toggles, radio buttons.
     Default: white text for dark/hero backgrounds. */
  --sw-chrome-text: rgba(255, 255, 255, 0.64);
  --sw-chrome-text-hover: #fff;
  --sw-chrome-text-active: #fff;
  --sw-chrome-indicator: #fff;
  --sw-chrome-radio-border: rgba(195, 204, 213, 1);
  --sw-chrome-radio-active: #fff;
}

/* Light background variant — dark text for tabs and trip-type controls */
.sw-on-light {
  --sw-chrome-text: rgba(26, 35, 43, 0.56);
  --sw-chrome-text-hover: #1a232b;
  --sw-chrome-text-active: #1a232b;
  --sw-chrome-indicator: #1a232b;
  --sw-chrome-radio-border: rgba(90, 100, 110, 0.5);
  --sw-chrome-radio-active: #1a232b;
}

/* ===== Primary pill button base class ===== */
.as-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--sw-radius-btn);
  background: var(--sw-primary, #1771d4);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
a.as-btn-primary:hover, a.as-btn-primary:focus { text-decoration: none; color: #fff; }

/* ===== Mouse-glow effect (Airbnb-style) =====
   Add .glow-btn or .as-btn-primary to any button to get a radial highlight
   following the cursor.  JS sets --glow-x / --glow-y (0-100). */
.glow-btn, .as-btn-primary { position: relative; overflow: hidden; }
.glow-btn::after, .as-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle,
    #4da3ff 0%, #2c86e8 27.5%, #1f7fe0 40%,
    #1a78d8 57.5%, #1771d4 75%, #1771d4 100%);
  background-size: 200% 200%;
  background-position: calc((100 - var(--glow-x, 50)) * 1%) calc((100 - var(--glow-y, 50)) * 1%);
  opacity: 0;
  transition: opacity 1.25s ease;
  pointer-events: none;
  z-index: -1;
}
.glow-btn:hover::after, .as-btn-primary:hover::after { opacity: 1; }
.glow-btn:active::after, .as-btn-primary:active::after { opacity: 0; transform: scale(5); transition: transform 2s, opacity 2s; }
.glow-btn { isolation: isolate; }

/* ===== Reset scoped to widget ===== */
.sw-root *,
.sw-root *::before,
.sw-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Focus ring: applied on PARENT search-presenter (matching reference exactly).
   Reference uses :is(:focus-visible, [data-focus-visible]) dual-selector pattern.
   The data-focus-visible attribute is added by JS when calendar is open. */
.sw-root [data-part="search-presenter"]:has(:is(:focus-visible, [data-focus-visible])) {
  outline: 2px solid var(--sw-brand);
  outline-offset: -2px;
  border-radius: var(--sw-radius-pill);
}

/* Button itself gets transparent outline when focused (reference pattern) */
.sw-root .sw-field-btn:is(:focus-visible, [data-focus-visible]) {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Search button: ring applied directly (no parent wrapper) */
.sw-root .sw-search-btn:focus-visible {
  outline: 2px solid var(--sw-brand);
  outline-offset: 2px;
  border-radius: var(--sw-radius-btn);
}

/* Other focusable elements */
.sw-root .sw-pax-controls.sw-pax-controls .mox-stepper__dec:focus-visible,
.sw-root .sw-pax-controls.sw-pax-controls .mox-stepper__inc:focus-visible,
.sw-root .sw-pax-done:focus-visible,
.sw-root .sw-cabin-pill:focus-visible {
  outline: 2px solid var(--sw-brand);
  outline-offset: 2px;
  border-radius: var(--sw-radius-pill);
}

/* Tabs and trip-type radios: subtle focus (no blue ring, matching REF) */
.sw-root .sw-tab:focus-visible {
  outline: none;
  font-weight: 600;
}
.sw-root .sw-trip-type:focus-within {
  outline: none;
}
.sw-root .sw-trip-type.sw-trip-type input[type="radio"]:focus-visible ~ .mox-radio__label {
  font-weight: 600;
}

/* Geo presenter focus ring — REF: transparent outline prep on :focus-visible */
.sw-root .sw-geo-presenter:focus-visible {
  outline: rgba(0, 0, 0, 0) solid 2px;
  outline-offset: 2px;
}

/* ===== Separator suppression on hover AND focus (both sides) =====
   Uses JS-set data-hover-field and data-focus-field on .sw-card.
   Each rule hides BOTH the field's own right sep AND the previous field's right sep. */

/* Geo fields: CSS-only hover (same parent, sibling selectors work) */
.sw-field--locations .sw-field:is(:hover, :active)::after {
  display: none;
}
.sw-field--locations .sw-field:has(~ .sw-field:is(:hover, :active))::after {
  display: none;
}

/* dep-date hovered/focused → hide own sep + geo-to sep (left) */
.sw-card:is([data-hover-field="from-date-picker-input"], [data-focus-field="from-date-picker-input"]) .sw-field-btn[data-testid="from-date-picker-input"]::after,
.sw-card:is([data-hover-field="from-date-picker-input"], [data-focus-field="from-date-picker-input"]) .sw-field[data-testid="geo-to"]::after {
  display: none;
}

/* ret-date hovered/focused → hide own sep + dep-date sep (left) */
.sw-card:is([data-hover-field="to-date-picker-input"], [data-focus-field="to-date-picker-input"]) .sw-field-btn[data-testid="to-date-picker-input"]::after,
.sw-card:is([data-hover-field="to-date-picker-input"], [data-focus-field="to-date-picker-input"]) .sw-field-btn[data-testid="from-date-picker-input"]::after {
  display: none;
}

/* pax hovered/focused → hide last date sep (left) */
.sw-card:is([data-hover-field="passengers-trigger"], [data-focus-field="passengers-trigger"]) .sw-field--dates [data-part="search-presenter"]:last-child .sw-field-btn::after {
  display: none;
}
.sw-root {
  /* Edge margin used by the desktop expanded panel and the calendar
   * popover floor. Aligns the search bar's outer edges with the host
   * header's brand icon / login pill margins. Override at the host
   * site if its header uses different edge padding. */
  --sw-page-margin: 16px;
  font-family: var(--sw-font);
  font-size: 16px;
  line-height: 24px;
  color: rgb(0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

/* ===== Tab Bar (Flights / Hotels) =====
   Reference: centered text buttons on blue hero bg, no pill/background.
   Active has underline indicator, both are white text.
*/
.sw-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 20px;
}

.sw-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  padding: 8px 16px;
  min-height: 36px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--sw-chrome-text);
  font-family: var(--sw-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
  transition: color var(--sw-transition);
  white-space: nowrap;
  position: relative;
  gap: 6px;
  text-align: start;
}

.sw-tab:hover {
  color: var(--sw-chrome-text-hover);
}

.sw-tab.active {
  color: var(--sw-chrome-text-active);
  font-weight: 500;
}

/* Tab indicator — ::after on each tab, scaleX grow/shrink (matches REF exactly) */
@keyframes sw-grow-border {
  from { transform: translateX(-8px) scaleX(0); }
  to   { transform: translateX(-8px) scaleX(1); }
}
@keyframes sw-shrink-border {
  from { transform: translateX(-8px) scaleX(1); }
  to   { transform: translateX(-8px) scaleX(0); }
}
.sw-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 16px;
  height: 4px;
  background: var(--sw-chrome-indicator);
  border-radius: var(--sw-radius-pill);
  transform-origin: 8px 2px;
  transform: translateX(-8px) scaleX(0);
  transition: transform var(--detail-duration-enter) var(--detail-ease-enter);
  animation: sw-shrink-border var(--detail-duration-enter) var(--detail-ease-enter) forwards;
}
.sw-tab.active::after {
  transform: translateX(-8px) scaleX(1);
  animation: sw-grow-border var(--detail-duration-enter) var(--detail-ease-enter) forwards;
}

/* Card content cross-fade on tab/mode switch. JS clones the current
   card DOM, stacks the clone absolutely over the card slot, then runs
   leave on the clone and enter on the freshly-rendered card
   concurrently. Plateau crossfade tokens keep total opacity >=1
   throughout — both elements partially visible at every point, no
   transparent valley. */
@keyframes sw-card-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sw-card-leave {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.sw-card-enter {
  animation: sw-card-enter var(--crossfade-in-duration) var(--crossfade-in-ease)
                           var(--crossfade-in-delay) both;
}
.sw-card-leave {
  animation: sw-card-leave var(--crossfade-out-duration) var(--crossfade-out-ease)
                           var(--crossfade-out-delay) both;
}

/* ===== Trip Type Toggle (outside card, on hero bg) =====
   Reference: radio buttons with circle indicators, white text on blue background.
   Parent container (.sw-trip-types) is transparent, no background.

   Hide/show animation: switching between Flights (radio visible) and
   Hotels (no radio) animates the row's height + opacity so the card
   below glides into / out of its slot rather than snapping. Brand
   tokens supply the timing (detail-duration-enter / -ease-enter) to
   match the card cross-fade running in parallel. */
.sw-trip-types {
  margin-bottom: 0;
  /* grid-template-rows 1fr↔0fr is the modern container-height
     transition: the row interpolates between content-natural height
     and zero without needing a magic max-height ceiling, so the slide
     speed is symmetric in both directions (max-height would snap to
     the content cap on expand, producing an uneven first frame). */
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}
/* The collapse/expand animation is a desktop-only enhancement; mobile
   switches instantly (the form lives in the full-screen edit overlay
   and is expected to swap immediately as it always did). Scope the
   transition to the desktop layout so mobile gets an instant change. */
.sw-root[data-layout="desktop"] .sw-trip-types {
  transition: grid-template-rows var(--detail-duration-enter) var(--detail-ease-enter),
              opacity var(--detail-duration-enter) var(--detail-ease-enter),
              margin var(--detail-duration-enter) var(--detail-ease-enter);
}
.sw-trip-types > * {
  /* The 0fr row must clip its child or the grid cell stays at
     natural height; min-height:0 lets the cell actually go below
     the content's min-content size. */
  overflow: hidden;
  min-height: 0;
}
.sw-trip-types.is-hiding {
  grid-template-rows: 0fr;
  opacity: 0;
  margin: 0;
}

.sw-trip-toggle-group {
  display: flex;
  flex-direction: column;
}

.sw-trip-toggle-list {
  display: flex;
  gap: 16px;
}

/* The UI-List wrapper inside the toggle list must also flex horizontally */
.sw-trip-toggle-list [data-component="UI-List"] {
  display: flex;
  gap: 16px;
}

.sw-trip-type {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sw-chrome-text);
  font-family: var(--sw-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
  transition: color var(--sw-transition);
  white-space: nowrap;
  height: 32px;
}

.sw-trip-type:hover {
  color: var(--sw-chrome-text-hover);
}

.sw-trip-type.active {
  color: var(--sw-chrome-text-active);
}

/* Radio visual comes from MoxC.radio, with two scoped overrides needed
 * for this widget's dark chrome context:
 *   1. background: transparent — MoxC's default #fff bg would render the
 *      mark as a solid white disc against the dark header/indicator
 *      backdrop, with no visible ring shape.
 *   2. Checked state uses an ::after filled dot (matches the widget's
 *      pre-MoxC look). MoxC's default "border-thickens to 5px" visual
 *      relies on bg contrasting with border-on; here both are white
 *      (--sw-chrome-radio-active = white for dark-chrome contexts), so
 *      the border-thickens trick produces no visible center dot. The
 *      ::after approach keeps the classic ring-and-dot radio aesthetic.
 *
 * The .sw-trip-type class is doubled (.sw-trip-type.sw-trip-type) so the
 * specificity beats MoxC's .mox-radio--sm rules unconditionally — this
 * keeps the override working regardless of whether the host page loads
 * MoxC component CSS before or after search-widget.css. */
.sw-trip-type.sw-trip-type .mox-radio__mark {
  --mox-radio-mark-border-off: var(--sw-chrome-radio-border);
  --mox-radio-mark-border-on:  var(--sw-chrome-radio-active);
  /* Token override (mox r9618 exposed --mox-radio-mark-bg). Resolves
   * cleanly through the cascade — no !important needed for the bg. */
  --mox-radio-mark-bg: transparent;
  /* !important still needed on border-width: the host's ui-core.css
   * baseline rules apply at higher cascade priority than specificity
   * resolves. Will drop once skymonde-shell's :where() fix lands and
   * the stroked-with-dot MoxC.radio variant arrives (design-system
   * follow-up shelf). Scoped tightly to .sw-trip-type so it never
   * leaks to other MoxC.radio consumers. */
  border-width: 1px !important;
  position: relative;
}

.sw-trip-type.sw-trip-type input:checked + .mox-radio__mark {
  /* Keep the thin ring (1px) — the dot inside is the cue */
  border-width: 1px !important;
}

.sw-trip-type.sw-trip-type input:checked + .mox-radio__mark::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sw-chrome-radio-active);
}

.sw-trip-type.sw-trip-type .mox-radio__label {
  margin: 2px 0;
}

/* ===== Card Container (form-container) =====
   Reference: pill-shaped (1000px radius), 64px tall, NO padding, 960px wide.
   The card IS the field row — fields fill the entire pill. No .sw-fields wrapper.
*/
.sw-card {
  background: var(--sw-bg-primary);
  border-radius: var(--sw-radius-form);
  outline: 1px solid var(--sw-border-medium);
  box-shadow: none;
  padding: 0;
  width: 100%;
  height: 64px;
  display: flex;
  position: relative;
  margin-top: 8px;
  justify-content: space-between;
  flex: 2 1 0%;
  overflow: visible;
}

/* Form title (hidden on desktop, visible in mobile edit overlay) */
.sw-form-title {
  display: none;
  font-size: 20px;
  font-weight: 600;
  color: var(--sw-text-primary);
}

/* ===== Field Wrapper ===== */
.sw-field {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
}

/* Pax field: fixed width like reference (160px), pill-shaped */
.sw-field:has([data-testid="passengers-trigger"]),
.sw-field:has([data-testid="settings-trigger"]) {
  flex: 0 1 auto;
  width: 160px;
  max-width: 160px;
  border-radius: var(--sw-radius-pill);
}

/* Pax search-presenter: pill-shaped, no border-right, visible overflow */
.sw-field:has([data-testid="passengers-trigger"]) [data-part="search-presenter"],
.sw-field:has([data-testid="settings-trigger"]) [data-part="search-presenter"] {
  overflow: visible;
  border-right: 0;
  border-radius: var(--sw-radius-pill);
  cursor: auto;
}

/* Passengers trigger button: no truncation (handled by inner span) */
button[data-testid="passengers-trigger"],
button[data-testid="settings-trigger"] {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

/* Pax summary span: truncation within fixed width */
button[data-testid="passengers-trigger"] > span,
button[data-testid="settings-trigger"] > span {
  position: relative;
  min-width: 80px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Locations: flex 2 (reference: 446px of 960px ≈ flex 2) */
.sw-field--locations {
  flex: 2 1 0%;
  display: flex;
  position: relative;
  min-width: 0;
}

/* Hotels (desktop only): only one geo field, so the dates and guest
 * selector are pinned at their full natural pixel widths and never
 * shrink. The destination soaks up all the horizontal compression.
 * (Flights keeps its proportional flex-grow layout — there are two
 * geo fields there, and dates needs to flex with them.)
 * Scoped to [data-layout="desktop"] so the mobile vertical-stack
 * layout below isn't pinned to these widths. */
.sw-root[data-layout="desktop"] .sw-card:has(.sw-field--hotel-dest) .sw-field--dates {
  flex: 0 0 280px;
  max-width: 280px;
}
.sw-root[data-layout="desktop"] .sw-card:has(.sw-field--hotel-dest) .sw-field:has([data-testid="settings-trigger"]) {
  flex: 0 0 160px;
}
.sw-root[data-layout="desktop"] .sw-card .sw-field--locations.sw-field--hotel-dest {
  flex: 1 1 0%;
  min-width: 0;
}

.sw-field--locations .sw-field {
  flex: 1;
  line-height: 21px;
  font-size: 14px;
  position: relative;
}

/* Gray vertical separator bar between fields (matches reference ::after pattern) */
.sw-field--locations .sw-field::after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  right: 0;
  width: 1px;
  height: 48px;
  background-color: rgb(233, 236, 239);
}

/* Dest presenter: left padding matches reference (24px) */
.sw-field--locations .sw-field:last-child .sw-geo-presenter {
  padding-left: 24px;
}

/* Dates: flex item that grows, block internally
   Structure: div.sw-field--dates > div > [presenter-dep, presenter-ret]
*/
.sw-field--dates {
  flex: 1 1 0%;
  max-width: 280px;
  min-width: 0;
  position: relative;
}

/* Inner wrapper: flex with space-between for the two presenters */
.sw-field--dates > div:not(.sw-calendar) {
  display: flex;
  max-width: 280px;
  justify-content: space-between;
  flex: 1 1 0%;
  min-width: 0;
}

/* Date presenters: pill-shaped, visible overflow, no flex growth */
.sw-field--dates [data-part="search-presenter"] {
  border-radius: var(--sw-radius-pill);
  border-right: none;
  overflow: visible;
  cursor: auto;
}

/* Gray vertical separator on date presenter buttons (matches reference ::after) */
.sw-field--dates .sw-field-btn::after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  right: 0;
  width: 1px;
  height: 48px;
  background-color: rgb(233, 236, 239);
}

/* ===== Field Input (presenter container) =====
   Reference: 64px tall, flex row, contains either text input or icon+button.
   Geo fields: padding 20px 8px 20px 20px, direct text input.
   Date/Pax fields: icon-start + button with padding 23px 12px 23px 44px.
*/
.sw-field-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 64px;
  padding: 20px 8px 20px 20px;
  border: none;
  border-right: 1px solid var(--sw-border-medium);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--sw-transition);
  overflow: hidden;
}

/* search-presenter pattern (date/pax fields): block container, icon absolutely positioned, button inline-block */
.sw-field-input[data-part="search-presenter"] {
  display: block;
  padding: 0;
  position: relative;
  align-items: normal;
}

.sw-field-input:hover {
  background: rgba(5, 54, 87, 0.06);
}

.sw-field-input.active {
  background: rgba(5, 54, 87, 0.06);
}

/* Hide the label in default (pill) mode — reference doesn't show labels */
.sw-field-label {
  display: none;
}

/* ===== Field Icon (icon-start) ===== */
.sw-field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  pointer-events: none;
  color: var(--sw-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Larger icon variant for date/pax fields (reference: 24x24) */
.sw-field-icon--lg {
  width: 24px;
  height: 24px;
}

.sw-field-icon svg {
  width: 100%;
  height: 100%;
}

/* ===== Geo Presenter Button =====
   Reference: button[data-part="presenter"] with display:flex, align:center,
   padding: 20px 8px 20px 20px, border-radius: 1000px, gap: 8px, height: 64px.
   Shows city name + IATA code in resting state.
*/
.sw-geo-presenter {
  display: flex;
  flex-direction: row;
  /* baseline so the smaller IATA code (12px) sits flush with the city
     name's baseline (14/16px). align-items:center used to center each
     span as a box; the smaller box rode 1-2px above the larger box's
     visual baseline, which read as "BOS is too high." */
  align-items: baseline;
  width: 100%;
  height: 64px;
  /* 23/23 vertical padding matches .sw-field-btn (dates/pax) so the
     text baseline of city name + IATA lines up with the date text on
     the same row. Prior 20/20 sat the baseline ~3px higher. */
  padding: 23px 8px 23px 20px;
  border: none;
  border-radius: var(--sw-radius-pill);
  background: transparent;
  cursor: pointer;
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: rgb(0, 0, 0);
  gap: 8px;
  overflow: hidden;
  transition: background var(--sw-transition);
  text-align: center;
}

.sw-geo-presenter:hover {
  background: rgba(5, 54, 87, 0.06);
}

/* Error state — applied by _showFieldError on submit when a field is
 * empty. Shared visual across every field type so the user sees a
 * consistent red outline regardless of which one is missing. Clears
 * on the next click of the field (the field's own click opens its
 * editor, which is the natural "I'm fixing this" gesture).
 *
 * position:relative + z-index:1 lifts the errored element above
 * neighbors so the inset shadow renders on top of any adjacent
 * presenter that visually overlaps (e.g. the multi-city geo-to right
 * edge that abuts the date presenter). Without this the right edge
 * of the outline is occluded.
 */
.sw-geo-presenter[data-error="true"],
.sw-mc-date-presenter[data-error="true"],
.sw-mc-pax-btn[data-error="true"],
[data-part="search-presenter"][data-error="true"],
.sw-field[data-error="true"] {
  box-shadow: inset 0 0 0 1.5px #d93025;
  border-radius: var(--sw-radius-pill, 1000px);
  position: relative;
  z-index: 1;
}

.sw-geo-name {
  display: flex;
  align-items: center;
  color: var(--sw-text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-geo-code {
  color: rgb(138, 150, 163);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  flex-shrink: 1;
  /* padding-top:2px removed — was a fudge against align-items:center,
     superseded by align-items:baseline on the presenter. */
}

.sw-geo-placeholder {
  display: block;
  color: var(--sw-text-disabled);
  font-weight: 500;
}

/* ===== Field Button (date/pax clickable element) =====
   Reference: button with padding 23px 12px 23px 44px, font-weight 500,
   cursor pointer, display inline-block (dates) or flex (pax).
*/
.sw-field-btn {
  display: inline-block;
  align-items: center;
  width: 100%;
  height: 64px;
  padding: 23px 12px 23px 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--sw-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  position: relative;
}

/* Passengers button: flex layout with gap for icon spacing */
button[data-testid="passengers-trigger"],
button[data-testid="settings-trigger"] {
  display: flex;
  align-items: center;
  gap: 4px;
  max-height: 64px;
}

/* Center contents in date presenters + pax/settings presenter — only
 * for flights round-trip on DESKTOP. Excluded:
 *   - One-way: single date presenter, stays left-aligned with its icon
 *   - Multi-city: distinct .sw-mc-* DOM, has its own layout
 *   - Hotels: dates / guest selector keep full natural width / styling
 *     (destination absorbs compression instead)
 *   - Mobile: scoped out via [data-layout="desktop"] — mobile uses its
 *     own vertical-stack alignment from the @media block below
 *
 * Detection of "RT only": .sw-card has a "to-date-picker-input"
 * (excludes OW) AND does NOT have a "settings-trigger" (excludes
 * hotels). */
.sw-root[data-layout="desktop"] .sw-card:not(:has([data-testid="settings-trigger"]))
  .sw-field--dates:has([data-testid="to-date-picker-input"])
  .sw-field-btn {
  text-align: center;
}
.sw-root[data-layout="desktop"] .sw-card:not(:has([data-testid="settings-trigger"]))
  button[data-testid="passengers-trigger"]:not(.sw-mc-pax-btn) {
  justify-content: center;
}

.sw-field-btn.placeholder {
  color: var(--sw-text-primary);
  font-weight: 500;
}

/* Hover background is handled by parent .sw-field-input:hover, not the button,
   so the absolutely-positioned icon remains visible above the background. */

/* ===== Field Value (for geo text input display) ===== */
.sw-field-value {
  font-size: 14px;
  color: var(--sw-text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 18px;
}

.sw-field-value.placeholder {
  color: var(--sw-text-disabled);
  font-weight: 400;
}

/* ===== Text Input (for autocomplete) ===== */
.sw-field-text-input {
  border: none;
  outline: none;
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--sw-text-primary);
  background: transparent;
  width: 100%;
  padding: 0;
  line-height: 18px;
}

.sw-field-text-input::placeholder {
  color: var(--sw-text-disabled);
  font-weight: 400;
}

/* ===== Swap Button ===== */
.sw-swap-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0px solid var(--sw-text-secondary);
  background: var(--sw-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--sw-transition);
  padding: 8px;
  font-weight: 600;
  color: var(--sw-text-secondary);
  min-width: fit-content;
  outline: 1px solid var(--sw-border-medium);
}

.sw-swap-btn:hover {
  outline-color: rgb(58, 66, 74);
}

.sw-swap-btn [data-part="icon"] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  min-height: 16px;
}

.sw-swap-btn [data-part="icon"] > div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  min-height: 16px;
}

.sw-swap-btn svg {
  width: 16px;
  height: 16px;
  color: var(--sw-text-secondary);
}

.sw-swap-btn:hover svg {
  color: var(--sw-text-secondary);
}

/* ===== Dropdown (Autocomplete Popover) =====
   Reference: 440px wide, position absolute, top -4px (overlaps field),
   border-radius 12px, z-index 1000, box-shadow, white bg.
   Contains: input-container (with border-bottom) + results list (ul).
*/
.sw-dropdown {
  position: absolute;
  top: -4px;
  left: 0;
  width: 440px;
  max-height: 800px;
  overflow: hidden;
  background: var(--sw-bg-primary);
  border-radius: var(--sw-radius-md);
  border: 1px solid var(--sw-border-medium);
  box-shadow: rgba(26, 35, 43, 0.04) 0px 0px 2px 0px, rgba(26, 35, 43, 0.12) 0px 3px 6px 0px;
  z-index: 1000;
  padding: 0;
  display: none;
  font-size: 14px;
  line-height: 21px;
}

@keyframes sw-dropdown-open {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.sw-dropdown.open {
  display: block;
  /* 500ms — see comment on .sw-calendar.open */
  animation: sw-dropdown-open 500ms var(--detail-ease-enter) both;
}
.sw-dropdown.closing {
  display: block;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity   var(--detail-duration-exit) var(--detail-ease-exit),
              transform var(--detail-duration-exit) var(--detail-ease-exit);
}

/* Input container inside popover */
.sw-dropdown-input-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  min-height: 72px;
  padding: 20px 56px 20px 20px;
  border-bottom: 1px solid var(--sw-border-medium);
  position: relative;
  gap: 8px;
}

.sw-dropdown-input-container .sw-field-text-input {
  width: 100%;
  height: 32px;
  font-size: 14px;
  font-weight: 500;
  line-height: 32px;
}

/* Ghost text overlay (autocomplete suggestion) */
.sw-ghost-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 500;
  height: 32px;
  line-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  text-align: start;
  letter-spacing: normal;
}

/* Multi-destination: tags container — REF: flex, gap 4px */
.sw-multi-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

/* Multi-destination: tag/chip — REF: button, 32px tall, borderRadius 8px, position relative */
.sw-multi-tag {
  display: block;
  position: relative;
  height: 32px;
  padding: 8px 32px 8px 8px;
  border-radius: 8px;
  border: 0;
  outline: 1px solid rgb(222, 227, 231);
  outline-offset: -1px;
  background: transparent;
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: rgb(58, 66, 74);
  cursor: pointer;
  white-space: nowrap;
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* Tag close button — REF: absolute, 32x32, top 0, right 0 */
.sw-multi-tag-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: rgb(58, 66, 74);
}

.sw-multi-tag-close svg {
  width: 16px;
  height: 16px;
}

/* Multi-destination: toggle button — REF: 48x48 absolute, translateY(-24px) */
.sw-multi-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-24px);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  transition: all;
}

/* Multi-icon circle: 32x32 rounded, bg changes on state */
.sw-multi-icon {
  width: 32px;
  height: 32px;
  border-radius: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(5, 54, 87, 0.06);
  transition: background-color var(--duration-snap) var(--ease-snap);
}

.sw-multi-toggle[data-state="active"] .sw-multi-icon {
  background-color: rgb(44, 134, 232);
}

/* Icon wrapper: 20x20, centers the SVG */
.sw-multi-icon-wrap {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sw-multi-icon-wrap svg {
  width: 20px;
  height: 20px;
  display: block;
  overflow: hidden;
}

/* Inactive: dark grey icon */
.sw-multi-toggle[data-state="inactive"] .sw-multi-icon-wrap svg {
  color: rgb(58, 66, 74);
}

/* Active: white icon at 80% opacity */
.sw-multi-toggle[data-state="active"] .sw-multi-icon-wrap svg {
  color: rgba(255, 255, 255, 0.8);
}

/* Multi-destination: option checkbox wrapper (REF: right side, 18x23 outer).
 * Inner checkbox visuals come from MoxC.checkbox (size: 'sm', 18px, brand
 * primary fill on :checked) — see libs/mox/javascript/components/checkbox.css. */
[data-part="option-checkbox"] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  width: 18px;
  height: 23px;
}

/* Results list */
.sw-dropdown-list {
  list-style: none;
  padding: 12px;
  margin: 0;
  overflow-y: auto;
}

.sw-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  height: 60px;
  border-radius: var(--sw-radius-sm);
  cursor: pointer;
  transition: background var(--sw-transition);
  font-size: 14px;
  line-height: 21px;
}

.sw-dropdown-item.highlighted {
  background: rgba(5, 54, 87, 0.06);
}

.sw-dropdown-section-header {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--sw-text-tertiary, #555f6d);
  padding: 12px 8px 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Recent search items at bottom of origin dropdown */
.sw-recent-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sw-recent-icon {
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sw-recent-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sw-recent-main {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--sw-text-primary, #272e35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-recent-origin {
  font-weight: 600;
}
.sw-recent-dates {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--sw-text-tertiary, #555f6d);
}

/* Airport items are indented under their city */
.sw-dropdown-item.child {
  padding-left: 32px;
}

.sw-dropdown-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: rgba(5, 54, 87, 0.06);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sw-dropdown-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sw-dropdown-item-text {
  flex: 1;
  min-width: 0;
}

.sw-dropdown-item-title {
  font-size: 14px;
  font-weight: 400;
  color: rgb(0, 0, 0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-highlight {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 400;
  color: inherit;
}

.sw-dropdown-item-subtitle {
  font-size: 12px;
  line-height: 18px;
  color: var(--sw-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pin icon inside 44x44 container (for cities without images & airports) */
.sw-dropdown-item-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--sw-text-tertiary);
}

.sw-dropdown-item-pin svg {
  width: 20px;
  height: 20px;
}

/* Inline IATA code in option title (for airport children) */
.sw-dropdown-item-iata {
  display: inline;
  font-weight: 500;
  color: var(--sw-text-disabled);
}

/* ===== Calendar ===== */
/* ===== Calendar (matches reference DOM: root > content > inner-flex > [nav, month, month]) ===== */
.sw-calendar {
  position: absolute;
  top: calc(100% + 4px);
  /* left and width set by JS in openCalendar() */
  background: var(--sw-bg-primary);
  border-radius: var(--sw-radius-md);
  border: 1px solid var(--sw-border-medium);
  box-shadow: rgba(26, 35, 43, 0.04) 0px 0px 2px 0px, rgba(26, 35, 43, 0.12) 0px 3px 6px 0px;
  z-index: 1000;
  padding: 32px;
  display: none;
  box-sizing: border-box;
}

@keyframes sw-calendar-open {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Desktop popover-style dropdowns (destination, calendar, pax, cabin) all
   open with a fade+scale entrance. The duration is intentionally a touch
   slower (500ms) than the global accordion/detail-enter token because the
   open is content-rich and benefits from a more deliberate settle.
   Curve stays on the family ease-enter token so close direction (240ms)
   pairs correctly. */
.sw-calendar.open {
  display: flex;
  flex-direction: column;
  animation: sw-calendar-open 500ms var(--accordion-ease-enter) both;
}

.sw-calendar.closing {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity   var(--accordion-duration-exit) var(--accordion-ease-exit),
              transform var(--accordion-duration-exit) var(--accordion-ease-exit);
}

/* Content wrapper (matches ref: div > div(flex row)) */
.sw-calendar-content {
  display: flex;
}

.sw-calendar-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  position: relative;
}

/* Nav row: position:absolute overlay with arrows at edges (matches ref <nav>) */
.sw-calendar-nav-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  z-index: 1;
  pointer-events: none;
}

.sw-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: var(--sw-primary);
  transition: all var(--sw-transition);
  padding: 0;
  pointer-events: auto;
}

.sw-calendar-nav:hover {
  background: var(--sw-bg-secondary);
  color: var(--sw-text-primary);
}

/* Icon wrapper inside nav button (matches ref: button > div > svg) */
.sw-calendar-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.sw-calendar-nav-icon svg {
  width: 24px;
  height: 24px;
}

.sw-calendar-nav:disabled {
  color: var(--sw-text-disabled);
  cursor: not-allowed;
}

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

/* Month title: wrapper div (padding:10px 0, height:40px) > span (matches ref) */
.sw-calendar-month-header {
  padding: 10px 0;
  height: 40px;
  box-sizing: border-box;
  text-align: center;
}

.sw-calendar-month-header span {
  font-size: calc(16px * var(--sw-cal-scale, 1));
  font-weight: 500;
  line-height: 20px;
  color: var(--sw-text-primary);
}

/* Table grid (matches ref: table[role="grid"], border-collapse:separate, border-spacing:0 2px) */
.sw-calendar-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 2px;
  table-layout: fixed;
  padding: 0;
  margin: 0;
}

/* Weekday headers in thead > tr > th (matches ref) */
.sw-calendar-table thead th {
  padding: 8px 0;
  text-align: center;
  font-size: calc(13px * var(--sw-cal-scale, 1));
  font-weight: 400;
  color: rgb(85, 95, 109);
  line-height: 16px;
  height: 32px;
  box-sizing: border-box;
}

/* Day cells in tbody > tr > td (matches ref — height comes from button content, not td) */
.sw-calendar-table tbody td {
  padding: 0 1px;
  margin: 0 0 1px;
  vertical-align: middle;
  text-align: start;
}

/* Edge columns: only inner-side padding (matches ref: first-td padding 0px 1px 0px 0px) */
.sw-calendar-table tbody td:first-child {
  padding-left: 0;
}
.sw-calendar-table tbody td:last-child {
  padding-right: 0;
}
.sw-calendar-table thead th:first-child {
  padding-left: 0;
}
.sw-calendar-table thead th:last-child {
  padding-right: 0;
}

/* Day button inside td (matches ref) */
.sw-calendar-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sw-font);
  font-size: calc(14px * var(--sw-cal-scale, 1));
  font-weight: 500;
  color: var(--sw-text-primary);
  border-radius: 16px;
  padding: 0;
  margin: 0;
  line-height: 21px;
  text-align: center;
  box-sizing: border-box;
}

/* Hover ring is keyed on a JS-set class, not :hover. JS adds .is-hovered
 * only on real mouse movement (mousemove/mouseleave); touch interactions
 * never set it, so mobile gets no hover ring without per-rule suppression.
 * JS also clears .is-hovered when a drag begins, so the ring can't linger
 * on the source cell during drag. */
.sw-calendar-day.is-hovered:not(.disabled):not(.empty)::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: rgb(23, 113, 212) 0px 0px 0px 2px inset;
  z-index: 2;
  pointer-events: none;
}

.sw-calendar-day.empty {
  cursor: default;
}

.sw-calendar-day.disabled {
  color: var(--sw-text-disabled);
  cursor: not-allowed;
}

.sw-calendar-day.today {
  font-weight: 600;
}

/* Range highlighting on td cells (matches reference td backgrounds) */
td.cell-range-start {
  background: linear-gradient(to right, #fff 0%, #fff 50%, var(--sw-primary-subtle) 50%, var(--sw-primary-subtle) 100%);
}

td.cell-range-end {
  background: linear-gradient(to right, var(--sw-primary-subtle) 0%, var(--sw-primary-subtle) 50%, #fff 50%, #fff 100%);
}

td.cell-in-range {
  background: var(--sw-primary-subtle);
}

/*
 * Z-order (back to front): price bg → range/hover highlight → selected circle → text
 * Layer mapping:
 *   1. button background   = price indicator color (lowest)
 *   2. button ::before      = range/hover highlight (z-index:1)
 *   3. button ::after       = selected circle (z-index:2)
 *   4. text spans           = day number + price text (z-index:3)
 * The td background handles range-start/end gradients (half-cell effect).
 */


/* Price level colors on button background (layer 1 — lowest) */
.sw-calendar-day.price-low {
  background: rgb(216, 248, 231);
}
.sw-calendar-day.price-mid {
  background: rgb(255, 232, 209);
}
.sw-calendar-day.price-high {
  background: rgb(254, 230, 230);
}

/* Range/preview tint is keyed on a JS-managed .range-tint class on the
 * day BUTTON (not on td-descendant). JS adds it for cells inside the
 * committed dep..ret OR inside a live preview range, and leaves it off
 * for "preview-excluded" cells (committed-range cells outside the
 * preview). Two consequences vs. the previous td-descendant approach:
 *   - The price-bubble background can be neutralised with a normal
 *     same-element rule (no !important needed; source-order wins).
 *   - "preview-excluded" requires no ::before un-set rule — those cells
 *     simply don't get .range-tint.
 * The td still carries cell-range-start/end + cell-preview-start/end for
 * the half-cell gradient that has to extend past the button's
 * border-radius (see further below). */
.sw-calendar-day.range-tint {
  background: transparent;
}
.sw-calendar-day.range-tint::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--sw-primary-subtle);
  z-index: 1;
}

/* Selected circle via ::after (layer 3 — above range highlight) */
.sw-calendar-day.selected {
  color: #fff;
  font-weight: 500;
  touch-action: none; /* Prevent browser gestures — enables clean long-press drag */
}
.sw-calendar-day.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--sw-primary);
  background-size: 200% 200%;
  background-position: calc((100 - var(--glow-x, 50)) * 1%) calc((100 - var(--glow-y, 50)) * 1%);
  z-index: 2;
}
/* Desktop: glow follows mouse on hover (same as action buttons).
 * Keyed on .is-hovered (JS-managed) so touch never triggers it and drag
 * doesn't leave it stuck on the source cell. */
.sw-calendar-day.selected.is-hovered::after {
  background-image: radial-gradient(circle,
    #4da3ff 0%, #2c86e8 27.5%, #1f7fe0 40%,
    #1a78d8 57.5%, #1771d4 75%, #1771d4 100%);
}

/* Preview endpoint (hovered cell) — slightly stronger opaque highlight */
.sw-calendar-day.preview-endpoint::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--sw-primary-subtle-hover);
  z-index: 1;
}

/* td backgrounds for range-start/end half-cell gradient effects */
td.cell-preview-start {
  background: linear-gradient(to right, #fff 0%, #fff 50%, var(--sw-primary-subtle) 50%);
}
td.cell-preview-end {
  background: linear-gradient(to right, var(--sw-primary-subtle) 0%, var(--sw-primary-subtle) 50%, #fff 50%);
}
td.cell-preview-range {
  background: var(--sw-primary-subtle);
}
/* Preview-excluded td: kill the half-cell gradient on the td side too.
 * The button-side ::before tint is already absent because JS doesn't set
 * .range-tint on excluded cells (no override needed). */
td.preview-excluded {
  background: transparent !important;
}

/* ===== Drag-to-Move ===== */
/* Ghost — floating date circle following finger */
.sw-drag-ghost {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sw-primary);
  background-image: radial-gradient(circle,
    #4da3ff 0%, #2c86e8 27.5%, #1f7fe0 40%,
    #1a78d8 57.5%, #1771d4 75%, #1771d4 100%);
  color: #fff;
  border-radius: 16px;
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  transform: scale(1.15);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 1200;
  will-change: left, top;
}
/* No .drag-origin styling needed: _liftCalDragDate strips .selected from
 * the source cell on lift, so all .selected-keyed rules (blue ring, white
 * text, hover glow) naturally fall back to the default-day visual. The
 * .drag-origin class is still added to the source as a marker, but no CSS
 * keys on it — the lift visual is achieved entirely through removing
 * .selected. renderMonths() in the commit/cancel paths re-applies
 * .selected from state when the drag ends. */
/* Freeze native scroll during drag */
.sw-cal-fullscreen-body.drag-active,
.sw-calendar.drag-active {
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
  touch-action: none;
  user-select: none;
}
/* Desktop cursor feedback for draggable selected dates */
@media (pointer: fine) {
  .sw-calendar-day.selected { cursor: grab; }
  .sw-cal-fullscreen-body.drag-active .sw-calendar-day,
  .sw-calendar.drag-active .sw-calendar-day { cursor: grabbing; }
}
/* Drop animation on ghost */
.sw-drag-ghost.dropping {
  transition: left      var(--duration-snap) var(--ease-snap),
              top       var(--duration-snap) var(--ease-snap),
              transform var(--duration-snap) var(--ease-snap);
  transform: scale(1);
}

/* Day number and price text (layer 4 — topmost) */
.sw-calendar-day-num {
  font-size: calc(14px * var(--sw-cal-scale, 1));
  line-height: 21px;
  position: relative;
  z-index: 3;
}

.sw-calendar-day-price {
  font-size: calc(10px * var(--sw-cal-scale, 1));
  line-height: 12px;
  font-weight: 500;
  color: rgb(58, 66, 74);
  position: relative;
  z-index: 3;
}

.sw-calendar-day.selected .sw-calendar-day-price {
  color: #fff;
}

/* Other-leg date indicator — outlined circle (white with blue border) */
.sw-calendar-day.other-leg::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: rgb(23, 113, 212) 0px 0px 0px 2px inset;
  z-index: 2;
  pointer-events: none;
}

/* City label inside calendar day cell */
.sw-calendar-day-label {
  font-size: calc(11px * var(--sw-cal-scale, 1));
  line-height: 1;
  position: relative;
  z-index: 3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sw-calendar-day.selected .sw-calendar-day-label {
  color: #fff;
}

.sw-calendar-note {
  font-size: 13px;
  line-height: 20px;
  color: var(--sw-text-secondary);
  margin-top: 16px;
}

/* ===== Passenger Selector ===== */
/* ===== Pax Dropdown (popover) ===== */
.sw-pax-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: auto;
  right: -80px;
  background: var(--sw-bg-primary);
  border-radius: var(--sw-radius-md);
  border: 1px solid var(--sw-border-medium);
  box-shadow: var(--sw-shadow-popover);
  z-index: 100;
  padding: 0;
  display: none;
  min-width: 360px;
  overflow: hidden;
}

@keyframes sw-pax-open {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.sw-pax-dropdown.open {
  display: block;
  /* 500ms — see comment on .sw-calendar.open */
  animation: sw-pax-open 500ms var(--accordion-ease-enter) both;
}

.sw-pax-dropdown.closing {
  display: block;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity   var(--accordion-duration-exit) var(--accordion-ease-exit),
              transform var(--accordion-duration-exit) var(--accordion-ease-exit);
}

/* Title + close (hidden on desktop, visible on mobile) */
.sw-pax-title {
  display: none;
}

.sw-pax-close {
  display: none;
}

/* Content wrapper */
.sw-pax-content {
  display: block;
}

/* Rows container (flex-column) */
.sw-pax-rows {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
}

/* Each number-input row */
.sw-pax-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  gap: 12px;
  height: 38px;
}

/* Label wrapper (replaces .sw-pax-info) */
.sw-pax-label-wrap {
  display: block;
  font-size: 14px;
  line-height: 22px;
}

.sw-pax-label-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 22px;
}

.sw-pax-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--sw-text-primary);
}

.sw-pax-hint {
  font-size: 12px;
  line-height: 16px;
  color: var(--sw-text-tertiary);
}

/* Controls row */
/* .sw-pax-controls is MoxC.stepper's root (passed via cls). Override its
 * default gray look with the widget's blue-outlined pax aesthetic by
 * targeting the MoxC BEM parts. Keeps the visual parity with the old
 * hand-rolled sw-pax-btn / sw-pax-count while letting the component own
 * the +/- semantics and keyboard handling.
 *
 * The .sw-pax-controls class is doubled (.sw-pax-controls.sw-pax-controls)
 * so the specificity beats MoxC's .mox-stepper--md rules unconditionally —
 * this keeps the override working regardless of whether the host page
 * loads MoxC component CSS before or after search-widget.css. */
.sw-pax-controls {
  display: flex;
  align-items: center;
}

.sw-pax-controls.sw-pax-controls .mox-stepper__dec,
.sw-pax-controls.sw-pax-controls .mox-stepper__inc {
  width: 32px;
  height: 32px;
  border-radius: 1000px;
  border: 1px solid rgb(24, 118, 220);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: rgb(24, 118, 220);
  transition: all var(--sw-transition);
  font-family: var(--sw-font);
  padding: 0;
  line-height: 24px;
}

.sw-pax-controls.sw-pax-controls .mox-stepper__dec:hover:not([disabled]),
.sw-pax-controls.sw-pax-controls .mox-stepper__inc:hover:not([disabled]) {
  background: var(--sw-primary-subtle-hover);
}

.sw-pax-controls.sw-pax-controls .mox-stepper__dec[disabled],
.sw-pax-controls.sw-pax-controls .mox-stepper__inc[disabled] {
  background: transparent;
  color: var(--theme-bg-strong, var(--sw-bg-disabled));
  border-color: var(--theme-bg-strong, var(--sw-bg-disabled));
  cursor: default;
  opacity: 1; /* MoxC's default 0.4 opacity doesn't match our color-swap look */
}

.sw-pax-controls.sw-pax-controls .mox-stepper__dec svg,
.sw-pax-controls.sw-pax-controls .mox-stepper__inc svg {
  display: block;
  width: 16px;
  height: 16px;
}

.sw-pax-controls.sw-pax-controls .mox-stepper__val {
  font-size: 14px;
  font-weight: 600;
  min-width: 32px;
  width: 32px;
  text-align: center;
  color: var(--sw-text-primary);
  padding: 0 4px;
  line-height: 18px;
}

/* Hidden native input */
.sw-pax-row input[hidden] {
  display: none;
}

.sw-pax-message {
  font-size: 12px;
  color: var(--sw-warning);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--sw-border-light);
}

/* --- Child age selectors (hotel guests dropdown) --- */
.sw-child-age-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px; gap: 4px;
}
.sw-child-age-label {
  font-size: 13px; font-weight: 400; color: var(--sw-text-secondary);
  line-height: 16px;
}
.sw-child-age-select {
  width: 64px; height: 32px; padding: 0 24px 0 12px;
  border: 1px solid var(--sw-border-medium); border-radius: 8px;
  font-size: 16px; font-weight: 500; color: var(--sw-text-primary);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%233A4662' d='M12 13.698 6.64 9.232a1 1 0 0 0-1.28 1.536l6 5a1 1 0 0 0 1.28 0l6-5a1 1 0 1 0-1.28-1.536z'/%3E%3C/svg%3E") no-repeat right 7px center / 16px 16px;
  cursor: pointer; box-sizing: border-box;
  -webkit-appearance: none; appearance: none;
}
.sw-child-age-select:focus {
  border-color: transparent;
  outline: 2px solid var(--sw-brand); outline-offset: -2px;
}

/* --- Hotel guests validation messages --- */
.sw-pax-hotel-message {
  font-size: 14px; font-weight: 400; color: var(--sw-text-primary);
  line-height: 20px; padding: 0;
}

.sw-pax-info-message {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; font-weight: 400; color: var(--sw-text-primary);
  line-height: 18px; padding: 8px 0 0;
}
.sw-pax-info-icon {
  flex-shrink: 0; display: flex; align-items: center;
  margin-top: 2px;
}
.sw-pax-info-icon svg { width: 14px; height: 14px; color: var(--sw-primary); }

/* Footer (hidden on desktop, visible on mobile) */
.sw-pax-footer {
  display: none;
}

/* Done button (fallback: direct child shown, or inside footer on mobile) */
.sw-pax-done {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  font-size: 14px;
}

/* ===== Cabin Class Pills (inside pax content) ===== */
.sw-cabin-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 24px 24px;
}

.sw-cabin-pill {
  padding: 8px 12px;
  border: 1px solid var(--sw-border-light);
  border-radius: var(--sw-radius-sm);
  background: transparent;
  color: rgb(0, 0, 0);
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  cursor: pointer;
  transition: all var(--sw-transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sw-cabin-pill:hover {
  background: rgba(5, 54, 87, 0.06);
  border-color: var(--theme-bg-strong);
  color: rgb(0, 0, 0);
}

.sw-cabin-pill[data-active="true"] {
  background: rgba(5, 54, 87, 0.06);
  border-color: rgb(39, 46, 53);
  color: rgb(0, 0, 0);
  font-weight: 500;
}

/* ===== Cabin Class Dropdown (legacy, kept for standalone use) ===== */
.sw-cabin-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--sw-bg-primary);
  border-radius: var(--sw-radius-md);
  border: 1px solid var(--sw-border-medium);
  box-shadow: var(--sw-shadow-modal);
  z-index: 100;
  padding: 4px;
  display: none;
  min-width: 200px;
}

.sw-cabin-dropdown.open {
  display: block;
  /* 500ms — see comment on .sw-calendar.open */
  animation: sw-pax-open 500ms var(--accordion-ease-enter) both;
}

.sw-cabin-dropdown.closing {
  display: block;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity   var(--accordion-duration-exit) var(--accordion-ease-exit),
              transform var(--accordion-duration-exit) var(--accordion-ease-exit);
}

.sw-cabin-option {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--sw-radius-sm);
  cursor: pointer;
  font-size: 14px;
  color: var(--sw-text-primary);
  transition: background var(--sw-transition);
}

.sw-cabin-option:hover,
.sw-cabin-option.selected {
  background: var(--sw-bg-secondary);
}

.sw-cabin-option.selected {
  font-weight: 600;
  color: var(--sw-primary);
}

/* ===== Search Button =====
   Reference: blue primary, pill shape, 48px tall, 8px margin, 14px font.
   Computed: background rgb(23,113,212), border-radius 1000px, padding 0 20px, margin 8px.
*/
.sw-search-btn {
  height: 48px;
  padding: 0 20px;
  margin: 8px;
  display: flex;
  min-width: fit-content;
  transition: background var(--duration-snap) var(--ease-snap);
  flex-shrink: 1;
}

.sw-search-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Search button inner structure: span[button-content] > div[icon-left] + span > span */
.sw-search-btn-content {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  pointer-events: none;
}

.sw-search-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
}

.sw-search-btn-icon svg {
  width: 100%;
  height: 100%;
}

.sw-search-btn svg {
  width: 20px;
  height: 20px;
}

/* ===== Multi-city =====
   Step-based layout matching REF React app DOM structure exactly.
   All values derived from programmatic REF DOM/CSS comparison.
   REF: borderline[flex:1] > geoGroup[flex:3] > {origin[flex:1], dest[flex:1]} + dates[flex:1]
   REF: bottomRow[margin-right:56px] > paxWrap[flex:3] > {leftHalf[flex:1], spacer[flex:1]} + searchWrap[flex:1,justify:flex-end]
*/

/* Multi-city form container */
.sw-multicity-form {
  margin-top: 8px;
}

/* When card contains multi-city, override pill shape — no padding, no outline */
.sw-card:has(.sw-multicity-form) {
  border-radius: 0;
  height: auto;
  padding: 0;
  display: block;
  outline: none;
  background: transparent;
}

/* Each step: flex row on desktop */
.sw-mc-step {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Title: hidden on desktop, visible on mobile */
.sw-mc-title {
  display: none;
  font-size: 13px;
  line-height: 16px;
  color: var(--sw-text-primary);
}
/* Remove text: hidden on desktop */
.sw-mc-remove-text {
  display: none;
}

/* Borderline: pill container for geo + date fields */
/* REF: flex:1 0%, justify-content:space-between, overflow:visible */
.sw-mc-borderline {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: 1px solid var(--sw-border-medium);
  border-radius: 1000px;
  background-color: #fff;
  overflow: visible;
}

/* Geo group: wraps origin+dest, flex:3 inside borderline */
.sw-mc-geo-group {
  display: flex;
  flex-direction: row;
  flex-grow: 3;
  flex-basis: 0%;
  position: relative;
}

/* Vertical separator between geo group and date field */
.sw-mc-geo-group::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  width: 1px;
  height: 48px;
  background-color: rgb(233, 236, 239);
}

/* Fields inside geo group: each flex:1 (~339px each) */
.sw-mc-geo-group .sw-field {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  position: relative;
  min-width: 0;
  font-size: 14px;
  line-height: 21px;
}
/* Geo dropdowns in MC must not overflow horizontally into the date button area.
   Constrain dropdown width to the geo field width. */
.sw-mc-geo-group .sw-field .sw-dropdown {
  width: 100%;
}

/* Vertical separator between origin and dest in multi-city */
.sw-mc-geo-group .sw-field[data-testid="geo-from"]::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  width: 1px;
  height: 48px;
  background-color: rgb(233, 236, 239);
}

/* Date field: flex:1 inside borderline (~226px) */
.sw-mc-borderline .sw-field.sw-mc-date-field {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  min-width: 0;
  position: relative;
}

/* Geo presenter inside borderline — REF: 64px height, padding 20px 8px 20px 20px */
.sw-mc-borderline .sw-geo-presenter {
  width: 100%;
  height: 64px;
  border-radius: 1000px;
  padding: 20px 8px 20px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--sw-font);
  color: rgb(0, 0, 0);
  text-align: center;
  box-sizing: border-box;
}
/* Dest field has slightly more left padding in REF */
.sw-mc-borderline [data-part="geo-to"] .sw-geo-presenter {
  padding-left: 24px;
}
/* REF: presenter bg is transparent by default, hover only on :hover */
.sw-mc-borderline .sw-geo-presenter:hover {
  background-color: rgba(5, 54, 87, 0.06);
}
/* City name in geo presenter — REF: align-items:normal, max-width:calc(100%-40px) */
.sw-mc-borderline .sw-geo-name {
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: calc(100% - 40px);
  align-items: normal;
}
/* IATA code in geo presenter — REF: flex-shrink:1, height:18px, font-weight:500, line-height:16px */
.sw-mc-borderline .sw-geo-code {
  font-size: 12px;
  color: var(--sw-text-disabled);
  padding-top: 2px;
  font-weight: 500;
  flex-shrink: 1;
  height: 18px;
  line-height: 16px;
  white-space: normal;
}
/* Placeholder in geo presenter */
.sw-mc-borderline .sw-geo-placeholder {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}

/* No borderline-level focus ring — individual presenters handle their own rings */

/* REF: transparent outline prep on MC geo input wrapper + input for :focus-visible */
.sw-mc-borderline .sw-dropdown-input-wrapper {
  outline: rgba(0, 0, 0, 0) solid 2px;
  outline-offset: 2px;
}
.sw-mc-borderline .sw-dropdown-input-wrapper input {
  outline: rgba(0, 0, 0, 0) solid 2px;
  outline-offset: 2px;
}

/* REF: date search-presenter wrapper — matches data-part="search-presenter" in REF */
.sw-mc-date-presenter {
  display: block;
  border-radius: 1000px;
}
.sw-mc-date-presenter:hover {
  background-color: rgba(5, 54, 87, 0.06);
}

/* Date button inside borderline — REF: 64px height, padding 23px 12px 23px 44px */
.sw-mc-date-btn {
  width: 100%;
  height: 64px;
  padding: 23px 12px 23px 44px;
  border: none;
  background: transparent;
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--sw-text-primary);
  cursor: pointer;
  display: inline-block;
  position: relative;
  text-align: left;
  box-sizing: border-box;
}
/* Focus ring is on the presenter wrapper via :has(:focus-visible) — suppress button's own */
.sw-mc-date-btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
/* hover bg moved to .sw-mc-date-presenter wrapper (matches REF) */

/* Placeholder/empty state: inactive gray text and icon (matching REF) */
.sw-mc-date-btn.placeholder {
  color: var(--sw-text-disabled);
}
.sw-mc-date-btn.placeholder .sw-mc-date-icon {
  color: var(--sw-text-disabled);
}

/* Calendar icon in date button — positioned absolutely at left */
.sw-mc-date-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: var(--sw-text-tertiary);
  pointer-events: none;
}
.sw-mc-date-icon svg {
  width: 24px;
  height: 24px;
}

/* Remove button: 44x44, desktop only
   REF: button color=#3A424A (dark), but icon div + SVG path = white.
   margin: 0 0 0 12px (REF computed). */
.sw-mc-remove-btn {
  margin: 0 0 0 12px;
  padding: 0;
  background: transparent;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 1;
  min-width: fit-content;
  /* Track the chrome theme like .sw-mc-add-btn does — white on the
   * default (dark/hero) background, dark inside .sw-on-light or
   * .sw-desktop-panel where the chrome vars are flipped. */
  color: var(--sw-chrome-text-active);
  font-weight: 600;
}

.sw-mc-remove-btn:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.sw-mc-remove-btn [data-part="icon"] {
  width: 32px;
  height: 32px;
  min-width: 20px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

/* SVG fills the 32x32 icon container (REF: 32x32 rendered) */
.sw-mc-remove-btn [data-part="icon"] svg {
  width: 32px;
  height: 32px;
  color: inherit;
}

/* Hide close when only 1 step */
/* MC geo fields: allow dropdown to overflow the narrow field */
.sw-mc-step .sw-field { overflow: visible; }
.sw-mc-step .sw-dropdown { min-width: 440px; }

.sw-mc-step--hide-close .sw-mc-remove-btn {
  visibility: hidden;
}
.sw-mc-step--hide-close .sw-mc-remove-text {
  visibility: hidden;
}

/* Formline rows */
.sw-mc-formline {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
/* Bottom row (last formline) gets margin-right:56px to align with close btn area (44+12) */
.sw-mc-formline:last-child {
  margin-right: 56px;
}

/* Add button: REF 192x44, padding 14px 16px, font 13px/20px 600
   REF button color=#3A424A, inner icon/text color=rgba(255,255,255,0.72) */
.sw-mc-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  box-sizing: border-box;
  padding: 14px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sw-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  border-radius: 1000px;
  color: var(--sw-chrome-text-active);
  min-width: fit-content;
  transition: background var(--duration-snap) var(--ease-snap);
}

.sw-mc-add-btn:hover {
  background-color: rgba(255, 255, 255, 0.16);
}
.sw-on-light .sw-mc-add-btn:hover {
  background-color: rgba(0, 0, 0, 0.06);
}

.sw-mc-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* button-content span: inherits dark color from button (matches REF) */
.sw-mc-add-btn [data-part="button-content"] {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Icon wrapper inside add button */
.sw-mc-add-btn [data-part="button-content"] > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  color: var(--sw-chrome-text-active);
}

.sw-mc-add-btn [data-part="button-content"] > div svg {
  width: 20px;
  height: 20px;
}

/* Add-text span */
.sw-mc-add-btn [data-part="add-text"] {
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--sw-chrome-text-active);
}

/* ===== Passengers trigger area ===== */
/* REF: settings wrapper has flex-grow:3, flex-basis:0%, display:flex
   Contains two flex:1 children: left half (with pax trigger) and right half (empty spacer) */
.sw-mc-settings {
  display: flex;
  flex-direction: row;
  flex-grow: 3;
  flex-basis: 0%;
  position: relative;
}

.sw-mc-settings > .sw-pax-dropdown {
  left: 0;
  right: auto;
  max-width: 360px;
}

/* Left half: holds pax dialog wrapper */
.sw-mc-pax-half {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
}

/* Right half: empty spacer matching dest field width */
.sw-mc-pax-spacer {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
}

/* Dialog wrapper: pill-shaped with outline
   REF: flex-grow:0, position:relative, max-width:100%, font-size:14px, line-height:21px
   Uses width:100% to fill the parent half (same result as flex:1 but matches REF computed values) */
.sw-mc-pax-dialog {
  display: flex;
  width: 100%;
  position: relative;
  max-width: 100%;
  border-radius: 1000px;
  outline: rgba(0, 0, 0, 0) solid 1px;
  outline-offset: -1px;
  background-color: #fff;
  font-size: 14px;
  line-height: 21px;
}

/* Presenter: block, relative, fills dialog, holds icon + button */
.sw-mc-pax-presenter {
  display: block;
  position: relative;
  width: 100%;
  font-size: 14px;
  line-height: 21px;
  border-radius: 1000px;
}

/* Person icon: positioned absolutely inside presenter */
.sw-mc-pax-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  min-width: 20px;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: rgb(85, 95, 109);
  margin: 0 8px 0 0;
}
.sw-mc-pax-icon svg {
  width: 24px;
  height: 24px;
}

/* Passengers button: inside presenter, has outline */
.sw-mc-pax-btn {
  width: 100%;
  height: 64px;
  padding: 23px 12px 23px 52px;
  max-height: 64px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: var(--sw-text-primary);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  border-radius: 1000px;
}
.sw-mc-pax-btn:hover {
  background: rgba(5, 54, 87, 0.06);
}
/* Pax button: suppress own outline — presenter wrapper handles the focus ring */
.sw-mc-pax-btn:focus-visible,
.sw-mc-pax-btn[data-focus-visible] {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
/* Dialog wrapper carries the gray border (like .sw-card does for RT/OW).
   The presenter inside gets the focus ring via outline-offset:-2px, creating a white gap. */
.sw-mc-pax-dialog {
  border: 1px solid var(--sw-border-medium);
  border-radius: 1000px;
}

/* ===== Search button wrapper ===== */
/* REF: flex:1 0%, display:flex, justify-content:flex-end */
.sw-mc-search-wrapper {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  justify-content: flex-end;
}

/* Multi-city search button — REF: 151x56, padding 20px 35px, font-size 16px, line-height 24px
   REF uses box-sizing:border-box + overflow:hidden (56 = 20+16+20, content clips to 16px) */
.sw-mc-search-btn {
  height: 56px;
  box-sizing: border-box;
  padding: 20px 35px;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
  min-width: fit-content;
  overflow: hidden;
}
/* Search button content: gap 8px, z-index 1 (REF) */
.sw-mc-search-btn [data-part="button-content"] {
  gap: 8px;
  z-index: 1;
}

/* ===== Multi-city mobile ===== */
@media (max-width: 767px) {
  .sw-multicity-form {
    margin-top: 20px;
    max-width: 560px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .sw-mc-step {
    width: 100%;
    flex-direction: column;
    margin-bottom: 0;
  }

  .sw-mc-title {
    display: flex;
    justify-content: space-between;
    align-self: stretch;
    margin-top: 20px;
    margin-bottom: 12px;
  }

  .sw-mc-title h3 {
    font-size: 13px;
    font-weight: 600;
    line-height: 24px;
    color: var(--sw-text-primary);
  }

  .sw-mc-remove-text {
    color: var(--sw-text-primary);
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Leg outer wrapper: holds geo-group + date stacked vertically on
     mobile. The visible cards live on the inner [data-lift-key] elts,
     so the leg wrapper itself has no border, no bg, and no shadow. */
  .sw-mc-borderline {
    width: 100%;
    flex-direction: column;
    outline: none;
    border: none;
    border-radius: 0;
    background: transparent;
  }

  /* REF: first step title has no top margin (subsequent steps do) */
  .sw-mc-step:first-child .sw-mc-title {
    margin-top: 0;
  }

  /* Geo group: the locations card. Border + bg only. Shadow comes
     from the [data-lifted] rule above; previously this had an
     unconditional shadow which kept the card looking "lifted" even
     when it wasn't the active step. Row spacing is owned by
     --sw-mobile-row-gap on the [data-lift-key] wrapper. */
  .sw-mc-geo-group {
    flex-direction: column;
    border: 1px solid var(--sw-border-medium);
    border-radius: 12px;
    background: #fff;
    overflow: visible;
    position: relative;
  }

  /* Hide desktop vertical separator in mobile stacked layout */
  .sw-mc-geo-group::after {
    display: none;
  }

  /* Geo fields inside geo-group: no individual borders (grouped in parent) */
  .sw-mc-geo-group .sw-field {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    background: transparent;
  }

  /* Both geo halves at 60px so the locations card is symmetric on
     mobile (REF spec had 60/54 — visually unbalanced; matched
     desktop's symmetric pair instead). */
  .sw-mc-geo-group .sw-field[data-testid="geo-from"] {
    height: 60px;
    position: relative;
  }
  .sw-mc-geo-group .sw-field[data-testid="geo-to"] {
    height: 60px;
  }

  /* Partial-width divider between origin and dest (like RT pattern).
     REF MC origin ::after is ~90% wide (306/340px), slightly wider than RT's 75%. */
  .sw-mc-geo-group .sw-field[data-testid="geo-from"]::after {
    content: "";
    display: block;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 5%;
    width: 90%;
    height: 1px;
    background-color: var(--sw-border-medium);
  }

  /* MC date card. Height matches the inner .sw-mc-date-btn (56px) so
     the wrapper bottom aligns with the visible card bottom (no built-in
     bottom padding pushing the lift shadow / border outwards). */
  .sw-field.sw-mc-date-field {
    border: 1px solid var(--sw-border-medium);
    border-radius: var(--sw-radius-md);
    background: #fff;
    height: 56px;
    min-height: 56px;
    flex-shrink: 0;
  }

  /* The duplicated `:has(.sw-geo-name)` variant (with content) used to
     re-apply the same rules using the `background` shorthand, which
     wiped out the hover's `background-color` because both selectors
     have the same specificity and `:has` won the cascade by appearing
     later in the file. Symptom: gray hover bg disappeared the moment
     a city was selected. Single selector + `background-color` (not
     shorthand) keeps hover overrideable. */
  .sw-mc-borderline .sw-geo-presenter {
    height: auto;
    padding: 12px 16px;
    border-radius: 0;
    background-color: transparent;
  }

  .sw-mc-date-btn {
    height: 56px;
    padding: 16px 16px 16px 40px;
    border-radius: var(--sw-radius-md);
    font-size: 16px;
    line-height: 24px;
    position: relative;
    align-items: center;
  }

  .sw-mc-remove-btn {
    display: none;
  }

  .sw-mc-add-btn {
    width: 100%;
    justify-content: center;
    color: var(--sw-text-secondary);
  }
  .sw-mc-add-btn [data-part="add-text"] {
    color: var(--sw-text-secondary);
  }
  .sw-mc-add-btn [data-part="button-content"] > div {
    color: var(--sw-text-secondary);
  }

  .sw-mc-settings {
    width: 100%;
    flex-direction: column;
  }

  .sw-mc-pax-spacer {
    display: none;
  }

  .sw-mc-search-wrapper {
    display: none;
  }

  /* MC pax: wrapper (.sw-mc-settings) is the [data-lift-key] target;
     it carries the visible card (border + bg + rect radius). All inner
     layers (.sw-mc-pax-half, .sw-mc-pax-dialog, .sw-mc-pax-presenter)
     and the button itself become transparent passthroughs so the lift
     shadow / hover gray follow the wrapper's rect silhouette. Same
     unification pattern as RT/Hotels pax. */
  .sw-mc-settings {
    background: var(--sw-bg-primary);
    border: 1px solid var(--sw-border-medium);
    border-radius: var(--sw-radius-md);
    height: 56px;
    position: relative;
  }
  .sw-mc-pax-half,
  .sw-mc-pax-dialog,
  .sw-mc-pax-presenter {
    border: none;
    background: transparent;
    border-radius: 0;
    height: 100%;
  }
  button.sw-mc-pax-btn[data-testid="passengers-trigger"] {
    height: 100%;
    max-height: 56px;
    max-width: 560px;
    padding: 16px 16px 16px 52px;
    border: none;
    border-radius: var(--sw-radius-md);
    background: transparent;
    font-size: 16px;
    line-height: 24px;
    outline: none;
  }

  .sw-mc-formline {
    flex-direction: column;
    gap: 8px;
  }
  .sw-mc-formline:last-child {
    margin-right: 0;
  }
}

/* ===== Hotels mode =====
   Hotels also uses the pill layout with slight adjustments.
*/

/* ===== Mobile Mini-Search Slot (results pages, outside #searchSection) ===== */
.sw-mobile-mini-slot {
  padding: 8px 16px 0;
  background: #fff;
}

/* ===== Mobile Mini-Search Bar ===== */
.sw-mini-container {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-inline: 24px;
}

.sw-mini-search {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  height: 48px;
  background: var(--sw-bg-primary);
  border-radius: var(--sw-radius-pill);
  padding: 8px 40px 8px 16px;
  margin: 0 0 8px 0;
  cursor: pointer;
  position: relative;
  font-size: 14px;
  gap: 8px;
  outline: 1px solid var(--sw-border-medium);
  outline-offset: -1px;
}

.sw-mini-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sw-mini-geo {
  font-size: 14px;
  font-weight: 500;
  color: var(--sw-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 18px;
  margin: 0 5px;
}

.sw-mini-details {
  font-size: 11px;
  color: var(--sw-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 14px;
  margin: 0 5px;
}

.sw-mini-search-icon {
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  border-radius: var(--sw-radius-pill);
  border: none;
  background: var(--sw-border-light);
  color: var(--sw-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 8px;
  font-size: 13px;
  font-weight: 600;
}

.sw-mini-search-icon svg {
  /* 16x16 inside the 32x32 button — matches the icon-to-button ratio of
   * the widget's other circle controls (e.g. pax steppers) and visually
   * de-weights the icon for the lower-contrast black-on-gray context. */
  width: 16px;
  height: 16px;
  display: block;
}

/* ===== Desktop Mini Pill (header bar) ===== */
.sw-mini-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 600px;
  height: 42px;
  padding: 4px 8px 4px 16px;
  margin: 8px 0;
  border-radius: 1000px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: var(--sw-text-primary);
  background: transparent;
  outline: 1px solid var(--sw-border-medium);
  box-shadow: 0 0 2px 0 rgba(26,35,43,0.04), 0 1px 3px 0 rgba(26,35,43,0.12);
  transition: box-shadow var(--duration-snap) var(--ease-snap);
}
.sw-mini-desktop:hover {
  box-shadow: 0 0 2px 0 rgba(26,35,43,0.08), 0 2px 6px 0 rgba(26,35,43,0.16);
}
.sw-mini-desktop-geo {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
  flex: 1 1 0;
  min-width: 0;
}
.sw-mini-desktop-date {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 8px;
  border-left: 1px solid var(--sw-border-light);
}
.sw-mini-desktop-settings {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 8px;
  border-left: 1px solid var(--sw-border-light);
}
.sw-mini-desktop-search-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 6px;
  margin-left: 4px;
  box-sizing: border-box;
  background: var(--theme-background-primary, #1771E6);
}
.sw-mini-desktop-search-btn svg {
  /* 16x16 matches the mobile mini-bar pill (.sw-mini-search-icon svg) so
   * the white-on-blue desktop pill and the black-on-gray mobile pill
   * read with the same icon-to-button proportion across breakpoints. */
  width: 16px;
  height: 16px;
  display: block;
}
.sw-mini-desktop-search-btn svg path {
  fill: #fff;
}

/* ===== Desktop Edit Overlay (expand from header) =====
   The backdrop/scrim is shell-managed via MOX.shell.activate() — see
   apps/skymonde/data/files/app/shell.js. This panel slides down from
   the header and sits above the shell content-mode scrim; nav/filter
   chrome stays interactive above the scrim. */
.sw-desktop-panel {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 1101;
  box-sizing: border-box;
  background: #fff;
  /* Side padding: at wide viewports, centers the 960px content. Below
   * (960 + 2 * --sw-page-margin) viewport width the floor kicks in and
   * the bar shrinks; the bar should never become narrower than
   * (100vw - 2 * --sw-page-margin), so the margin lines up with the
   * brand icon / login pill above it. Adjust --sw-page-margin to match
   * the host page's edge padding. */
  padding: 0 max(var(--sw-page-margin, 16px), calc((100vw - 960px) / 2)) 24px;
  max-width: none;
  margin: 0;
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 8px 16px rgba(26,35,43,0.12);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity   var(--detail-duration-exit) var(--detail-ease-exit),
              transform var(--detail-duration-exit) var(--detail-ease-exit);
}
.sw-desktop-panel.sw-anim-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity   var(--detail-duration-enter) var(--detail-ease-enter),
              transform var(--detail-duration-enter) var(--detail-ease-enter);
}
.sw-desktop-panel .sw-card {
  outline: 1px solid var(--sw-border-medium);
}
.sw-desktop-panel .sw-card:has(.sw-multicity-form) {
  outline: none;
}

/* --- Desktop panel: chrome on white bg (dark text, brand radio) --- */
.sw-desktop-panel {
  --sw-chrome-text: var(--sw-text-primary);
  --sw-chrome-text-hover: var(--sw-text-primary);
  --sw-chrome-text-active: var(--sw-text-primary);
  --sw-chrome-indicator: var(--sw-text-primary);
  --sw-chrome-radio-border: var(--theme-action-outline-hover, var(--sw-border-medium));
  --sw-chrome-radio-active: var(--sw-brand);
}
/* .sw-desktop-panel scopes --sw-chrome-text-active to a dark token
   (panel sits on white surface). Pin button + label + icon-wrapper
   to that token explicitly; relying on inherit-through-button left
   the icon wrapper invisible (white-on-white) when an upstream rule
   overrode the button's color, so we set it on every level here. */
.sw-desktop-panel .sw-mc-add-btn,
.sw-desktop-panel .sw-mc-add-btn [data-part="button-content"] > div,
.sw-desktop-panel .sw-mc-add-btn [data-part="add-text"] {
  color: var(--sw-chrome-text-active);
}
/* Match the pax-btn hover tone in the same panel surface — slightly
   blue-tinted dark instead of pure-black 6%, which is the existing
   .sw-on-light override (visually a touch off vs neighbouring
   controls). Same panel = same hover treatment. */
.sw-desktop-panel .sw-mc-add-btn:hover {
  background-color: rgba(5, 54, 87, 0.06);
}

/* --- Tabs in mini header (white bg, dark text) --- */
.as-header--mini {
  --sw-chrome-text: var(--sw-text-tertiary);
  --sw-chrome-text-hover: var(--sw-text-primary);
  --sw-chrome-text-active: var(--sw-text-primary);
  --sw-chrome-indicator: var(--sw-text-primary);
}
.as-header--mini .sw-tabs {
  margin-bottom: 0;
  padding: 0;
  height: 100%;
  align-items: center;
}

/* ===== Mobile Edit Overlay ===== */
.sw-edit-container {
  display: none;
}

@keyframes sw-overlay-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reference: fixed overlay, no padding, overflow visible, display block */
/* REF: div 375x812, position:fixed, display:block, bg:#f0f3f5, margin:0 0 24px, max-width:1128px */
.sw-edit-overlay {
  animation: sw-overlay-enter var(--sheet-duration-enter) var(--sheet-ease-enter);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* 100lvh = "large viewport height" = the size with browser chrome
     hidden. When chrome is visible (the default state on entry), the
     overlay's bottom extends past the visible area — last MC leg or
     fixed search bar can land below the fold. 100dvh adjusts as
     chrome shows/hides, so the overlay always fills the *currently
     visible* viewport. 100vh first as a fallback for very old UAs. */
  height: 100vh;
  height: 100dvh;
  /* Sits above the shell full-mode scrim (10050). The overlay has its
     own opaque background, so the scrim is hidden beneath it — but the
     panel still needs to be the click target, not the scrim. */
  z-index: var(--theme-z-index-drawer, 10080);
  background: var(--sw-bg-canvas);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  max-width: 960px;
  overscroll-behavior: contain;
}

/* Solid canvas bg so content scrolling under the header is occluded
   (without it, content would tuck under the back-button area and only
   appear masked where the bottom-edge shadow draws). Margin moved to
   .sw-edit-scroll's padding-top so the header itself sits flush with
   the visual top of the scroll content. */
.sw-edit-header {
  display: block;
  height: 61px;
  margin: 0;
  position: static;
  background: var(--sw-bg-canvas);
}

/* REF: div 24x24, position:absolute, top:20px, left:20px, color:rgb(58,66,74), minHeight:24px */
.sw-edit-back {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  cursor: pointer;
  color: rgb(58, 66, 74);
  display: block;
  align-items: center;
  justify-content: center;
}

.sw-edit-back svg {
  width: 24px;
  height: 24px;
}

/* REF outer: div 375x61, display:flex, justify:center */
.sw-edit-tabs-outer {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 61px;
}

/* REF inner: div 232x61, display:flex, gap:8px, padding:12px 0, min-height:40px */
.sw-edit-header .sw-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 0;
  min-height: 40px;
  height: 61px;
  justify-content: normal;
  align-items: normal;
}

/* REF: div 112x37, display:flex, position:relative, padding:8px 16px, gap:6px, align:center, justify:center
   fontSize:14px, fontWeight:500, lineHeight:21px, minHeight:36px */
/* Edit header uses same dark-on-light chrome as desktop panel */
.sw-edit-header {
  --sw-chrome-text: var(--sw-text-tertiary);
  --sw-chrome-text-hover: var(--sw-text-primary);
  --sw-chrome-text-active: var(--sw-text-primary);
  --sw-chrome-indicator: var(--sw-text-primary);
}
.sw-edit-header .sw-tab {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  width: 112px;
  height: 37px;
  min-height: 36px;
  padding: 8px 16px;
  display: flex;
  position: relative;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

/* ===== Mobile lift state =====
   Mutually-exclusive "active" hint: exactly one [data-lift-key] in the
   mobile overlay carries data-lifted at a time. JS sets it on overlay
   open, on tap (via a delegated pointerdown listener), and after each
   surface successfully returns a selection. CSS produces the visual:
   a subtle translateY + stronger box-shadow.

   On devices with hover, :hover overrides the persistent lift —
   hovered element rises, the data-lifted one drops via :has() — and
   on mouseleave the data-lifted lift returns. */
/* Mobile row spacing.
   Lifted = 12 / unlifted = 4. WITHIN each container, the first child's
   top margin and last child's bottom margin are zeroed. With this
   bookending, any 2-child container has a fixed margin sum: e.g.
   first lifted = 0+12+4+0 = 16, second lifted = 0+4+12+0 = 16. The
   sum stability keeps the container's height constant across any
   within-container lift change — so toggling lift between an element
   and its sibling never shifts content.

   Containers tracked:
     - .sw-edit-scroll  — outer overlay (first / last lift-key in DOM order
                         get data-first-lift / data-last-lift via JS)
     - .sw-mc-borderline — each MC leg's locations+date pair (CSS
                          :first-child / :last-child)
*/
.sw-root[data-layout="mobile"] {
  --sw-mobile-row-pad-unlifted: 4px;
  --sw-mobile-row-pad-lifted: 12px;
}
.sw-root[data-layout="mobile"] [data-lift-key] {
  transition: transform  var(--duration-snap) var(--ease-snap),
              box-shadow var(--duration-snap) var(--ease-snap),
              margin     var(--duration-snap) var(--ease-snap);
  position: relative;
  margin-top: var(--sw-mobile-row-pad-unlifted);
  margin-bottom: var(--sw-mobile-row-pad-unlifted);
}
.sw-root[data-layout="mobile"] [data-lift-key][data-lifted] {
  transform: scale(1.02);
  box-shadow: rgba(23, 29, 46, 0.18) 0px 12px 24px -6px;
  /* z-index keeps the cast shadow above neighbors so it doesn't composite
     with the next card's border into a visible texture line. */
  z-index: 1;
  margin-top: var(--sw-mobile-row-pad-lifted);
  margin-bottom: var(--sw-mobile-row-pad-lifted);
}
/* Outer-container bookend: zero the outermost margins so the form
   sits flush with the scroll area top / bottom-bar top. Applies to
   the overall first / last lift-key in DOM order. */
.sw-root[data-layout="mobile"] [data-lift-key][data-first-lift] {
  margin-top: 0;
}
.sw-root[data-layout="mobile"] [data-lift-key][data-last-lift] {
  margin-bottom: 0;
}
/* Per-leg bookend (MC). Each .sw-mc-borderline contains exactly
   two lift-keys (locations + date). Zeroing the first child's top
   and the last child's bottom MAKES THE LEG'S MARGIN SUM CONSTANT
   across any within-leg lift change (0+12+4+0 == 0+4+12+0 == 16).
   The result: hovering between mc-N-locations and mc-N-date produces
   zero layout shift. */
.sw-root[data-layout="mobile"] .sw-mc-borderline > [data-lift-key]:first-child {
  margin-top: 0;
}
.sw-root[data-layout="mobile"] .sw-mc-borderline > [data-lift-key]:last-child {
  margin-bottom: 0;
}
/* First/last child within the scroll area shouldn't grow outside it. */
.sw-root[data-layout="mobile"] .sw-edit-scroll > [data-lift-key][data-lifted]:first-child {
  margin-top: 0;
}
/* Hover lift used to be a pure :hover CSS effect, but moving the mouse
   across the form made the lift snap between fields on every cross —
   too frenetic. Now hover advances the persistent lifted key via JS
   on mouseenter (same path as tap). The lift stays when the mouse
   leaves; only the gray :hover bg (inner button) tracks pointer
   position transiently. */

/* ===== Mobile inner-button hover overlays =====
   The geo presenter already shows a gray hover bg (line ~681); make the
   same treatment available for every clickable field on mobile layout
   so hover feedback is uniform across destination / dates / pax /
   guests / multi-city date+pax. Shape inherits each button's own
   border-radius so it tracks the card style. */
@media (hover: hover) {
  .sw-root[data-layout="mobile"] .sw-field-btn:hover,
  .sw-root[data-layout="mobile"] button[data-testid="passengers-trigger"]:hover,
  .sw-root[data-layout="mobile"] button[data-testid="settings-trigger"]:hover,
  .sw-root[data-layout="mobile"] .sw-mc-pax-btn:hover {
    background: rgba(5, 54, 87, 0.06);
  }
}
/* MC date presenter is a pill on desktop (border-radius:1000px), but on
   mobile the date field is a rounded rectangle. Override the wrapper's
   hover shape to match the field card so the hover bg has the right
   silhouette. */
@media (max-width: 767px) {
  .sw-mc-borderline .sw-mc-date-presenter,
  .sw-mc-borderline .sw-mc-date-presenter:hover {
    border-radius: var(--sw-radius-md);
  }
}

/* Flex column so .sw-edit-scroll (flex:1) actually gets a bounded height.
   Without this the scroll area sizes to content and tall forms (multi-city
   with many legs) overflow the overlay (which is overflow:hidden) and become
   unreachable. */
.sw-edit-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* Scroll-edge shadows. JS toggles data-scroll-top / data-scroll-bottom
   on the overlay; both the header and the bottom bar carry a solid
   canvas background that occludes scrolling content, and grow a subtle
   box-shadow when content tucks under them. */
.sw-edit-overlay .sw-edit-header {
  position: relative;
  z-index: 2;
  transition: box-shadow var(--duration-snap) var(--ease-snap);
}
.sw-edit-overlay[data-scroll-top] .sw-edit-header {
  box-shadow: 0 4px 8px -4px rgba(23, 29, 46, 0.18);
}
.sw-edit-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: var(--sw-bg-canvas);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--duration-snap) var(--ease-snap);
}
.sw-edit-overlay[data-scroll-bottom] .sw-edit-bottom-bar {
  box-shadow: 0 -4px 8px -4px rgba(23, 29, 46, 0.18);
}

/* Scrollable area */
.sw-edit-scroll {
  flex: 1;
  overflow: auto;
  min-height: 0; /* flex child needs this to allow shrinking below content size */
  /* Top padding replaces the header's old margin-bottom so first content row
     starts 20px below the header. Bottom padding clears the fixed bottom bar
     (button 48 + 20 inset + 20 top padding inside bar = 88). */
  padding: 20px 24px 88px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.sw-edit-scroll::-webkit-scrollbar {
  display: none;
}

/* Trip types inside edit overlay */
.sw-edit-overlay .sw-trip-types {
  margin-bottom: 0;
}

/* REF tablist: div 327x40, display:flex, position:relative, width:100% */
.sw-edit-overlay .sw-trip-toggle-group {
  display: flex;
  position: relative;
  width: 100%;
}

.sw-edit-overlay .sw-trip-toggle-list {
  display: flex;
  gap: 0;
  overflow: visible;
  align-items: normal;
  justify-content: normal;
  width: 100%;
}

.sw-edit-overlay .sw-trip-toggle-list [data-component="UI-List"] {
  display: flex;
  gap: 0;
  width: 100%;
}

/* Each trip type wrapper stretches equally (REF: width 33% per button) */
.sw-edit-overlay .sw-trip-toggle-list [data-component="UI-List"] > div {
  flex: 1;
}

/* REF: button width:33%, display:block, position:relative, z-index:2, border-radius:9999px, padding:8px 0 */
.sw-edit-overlay .sw-trip-type {
  background: transparent;
  border: none;
  border-radius: 9999px;
  padding: 8px 0;
  color: var(--sw-text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  height: 40px;
  width: 100%;
  display: block;
  position: relative;
  text-align: center;
  z-index: 2;
}

.sw-edit-overlay .sw-trip-type.active {
  background: transparent;
  border: none;
  color: var(--sw-text-primary);
}

/* REF: sliding indicator behind active trip type — position:absolute, bg:rgb(58,66,74), border-radius:9999px, z-index:1 */
.sw-edit-overlay .sw-trip-indicator {
  position: absolute;
  background: rgb(58, 66, 74);
  border-radius: 9999px;
  width: 33%;
  height: 40px;
  z-index: 1;
  top: 0;
  left: 0;
  transition: left  var(--duration-snap) var(--ease-snap),
              width var(--duration-snap) var(--ease-snap);
}

/* REF label text: p, display:inline-block, fontSize:13px, fontWeight:600, lineHeight:16px, padding:3px 0 */
.sw-edit-overlay .sw-trip-type.sw-trip-type .mox-radio__label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  color: rgb(85, 95, 109);
  padding: 3px 0;
  text-align: center;
  margin: 0;
}

/* Active trip type label: white text (sits above dark indicator) */
.sw-edit-overlay .sw-trip-type.sw-trip-type.active .mox-radio__label {
  color: rgb(255, 255, 255);
}

/* Mobile edit hides the radio mark — the sliding indicator IS the selection cue */
.sw-edit-overlay .sw-trip-type.sw-trip-type .mox-radio__mark {
  display: none;
}

/* REF: div 327x306, display:flex, flex-direction:column, align:center, justify:space-between, border-radius:1000px, max-width:560px */
.sw-edit-overlay .sw-card {
  background: transparent;
  border-radius: var(--sw-radius-form);
  outline: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  max-width: 560px;
  height: auto;
  margin-top: 0;
  flex: none;
}

/* REF: h3 105x24, fontSize:20px, fontWeight:600, margin:20px 0 12px, width:auto (shrink-to-fit), flex:0 1 auto */
.sw-edit-overlay .sw-form-title {
  display: block;
  font-size: 20px;
  font-weight: 600;
  margin: 20px 0 16px;
  width: auto;
  align-self: flex-start;
  flex: 0 1 auto;
}

/* Locations card. Border + bg only. The shadow was unconditional
   (kept the card looking "lifted" even when not active); it now comes
   from the [data-lifted] rule when this region is the current step.
   Row spacing is owned by --sw-mobile-row-gap on the [data-lift-key]
   wrapper, so the legacy 16px margin-bottom is dropped. */
.sw-edit-overlay .sw-field--locations {
  background: var(--sw-bg-primary);
  border-radius: 12px;
  border: 1px solid var(--sw-border-medium);
  width: 100%;
  flex-direction: column;
  flex: 2 1 0%;
}

/* REF: geo-from div 325x60, position:relative; geo-from button 325x60, padding:18px 12px 18px 20px, gap:8px, border-radius:10px, fontSize:16px, fontWeight:500 */
.sw-edit-overlay .sw-field[data-testid="geo-from"] {
  height: 60px;
}
.sw-edit-overlay .sw-field[data-testid="geo-from"] .sw-geo-presenter {
  height: 60px;
  padding: 18px 12px 18px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
}

/* Horizontal divider between origin and destination in mobile locations card.
   REF uses a partial-width ::after pseudo-element on the field wrapper (not border-bottom).
   The line starts at ~5% left and is ~75% wide, colored with border.medium (#dee3e7).
   Uses .sw-field--locations for higher specificity to override the hide rule at ~L2935. */

/* geo-to matches geo-from (60px) so both halves of the locations card
   are visually balanced. REF spec had 60/54 asymmetry that didn't read
   as intentional. */
.sw-edit-overlay .sw-field[data-testid="geo-to"] {
  height: 60px;
}
.sw-edit-overlay .sw-field[data-testid="geo-to"] .sw-geo-presenter {
  height: 60px;
  padding: 18px 12px 18px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
}

/* Swap button: centered vertically in locations card, with right margin inside the card */
.sw-edit-overlay .sw-swap-btn {
  position: absolute;
  top: 50%;
  left: auto;
  right: 12px;
  z-index: 2;
  transform: translateY(-50%);
}

/* REF dates wrapper: div 327x62, display:block, position:relative, max-width:560px, flex:1 1 0% */
/* Unified mobile field-card pattern: the [data-lift-key] wrapper IS the
   visible white card (border + bg + radius live here). Inner structural
   layers are transparent passthroughs. This guarantees by construction
   that the lift box-shadow attaches at the visible card edge and that
   one card style applies across geo, dates, pax, guests, MC. */
.sw-edit-overlay .sw-field--dates {
  background-color: var(--sw-bg-primary);
  border: 1px solid var(--sw-border-medium);
  border-radius: var(--sw-radius-md);
  width: 100%;
  max-width: 560px;
  position: relative;
  flex: 1 1 0%;
}

.sw-edit-overlay .sw-field--dates > div:not(.sw-calendar) {
  display: block;
  position: relative;
  border: none;
  background: transparent;
  margin: 0;
  flex-direction: row;
  max-width: none;
}

/* REF date icon: div 20x20, position:absolute, top:28px (adjusted for single-date mobile layout) */
.sw-edit-overlay .sw-field--dates .sw-field-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  color: rgb(138, 150, 163);
  z-index: 1;
}

/* REF date button: button 325x56, display:inline-block, bg:transparent, padding:16px 16px 16px 40px,
   border-radius:12px, fontSize:16px, fontWeight:500, lineHeight:24px, overflow:visible, position:static */
.sw-edit-overlay .sw-field-btn[data-testid="from-date-picker-input"] {
  display: inline-block;
  background: transparent;
  padding: 16px 16px 16px 40px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  height: 56px;
  width: 100%;
  overflow: visible;
  color: var(--sw-text-primary);
  position: static;
}

/* Hide the search-presenter wrappers; date button gets styled directly */
.sw-edit-overlay .sw-field--dates [data-part="search-presenter"] {
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  height: auto;
  padding: 0;
}

/* REF: pax outer div 327x56, position:relative, border-radius:1000px, max-width:100% */
/* Pax/Guests wrapper IS the visible white card — same pattern as the
   date wrapper above and the geo wrapper. Inner .sw-field-input and
   .sw-field-btn are transparent passthroughs. */
.sw-edit-overlay .sw-field:has([data-testid="passengers-trigger"]),
.sw-edit-overlay .sw-field:has([data-testid="settings-trigger"]) {
  background-color: var(--sw-bg-primary);
  border: 1px solid var(--sw-border-medium);
  border-radius: var(--sw-radius-md);
  width: 100%;
  max-width: 100%;
  height: 56px;
  position: relative;
}

.sw-edit-overlay .sw-field-input:has([data-testid="passengers-trigger"]),
.sw-edit-overlay .sw-field-input:has([data-testid="settings-trigger"]) {
  border: none;
  border-radius: 0;
  height: 100%;
  background: transparent;
  padding: 0;
  position: relative;
}

/* REF pax icon: div 20x20, position:absolute, top:50%(-50%), left:12px, color:rgb(138,150,163) */
.sw-edit-overlay .sw-field:has([data-testid="passengers-trigger"]) .sw-field-icon,
.sw-edit-overlay .sw-field:has([data-testid="settings-trigger"]) .sw-field-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  color: rgb(138, 150, 163);
  z-index: 1;
}

/* Pax/Guests button: content-only (border + bg moved up to .sw-field).
   The button still owns its own focusable border-radius so :focus-visible
   keeps the pill-around-button visual. */
.sw-edit-overlay .sw-field-btn[data-testid="passengers-trigger"],
.sw-edit-overlay .sw-field-btn[data-testid="settings-trigger"] {
  display: flex;
  background: transparent;
  padding: 16px 16px 16px 40px;
  gap: 4px;
  border: none;
  outline: none;
  border-radius: var(--sw-radius-md);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  width: 100%;
  height: 100%;
  max-width: 560px;
  overflow: visible;
  color: var(--sw-text-primary);
  position: static;
}

/* Hotel destination card: single field in locations wrapper — same card styling as flights */
.sw-edit-overlay .sw-field--hotel-dest {
  flex: 2 1 0%;
}
/* Hotels geo presenter: REF hotel geo is 54px (smaller than flights 60px) */
.sw-edit-overlay .sw-field--hotel-dest .sw-field[data-testid="geo"] {
  height: 54px;
}
.sw-edit-overlay .sw-field--hotel-dest .sw-field[data-testid="geo"] .sw-geo-presenter {
  height: 54px;
  padding: 18px 12px 18px 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  gap: 8px;
}
/* Hotel dest: single field, no ::after divider needed */
.sw-edit-overlay .sw-field--hotel-dest .sw-field::after {
  display: none;
}

/* ===== Box-sizing reset for fullscreen overlays (appended to body, outside .sw-root) ===== */
.sw-geo-fullscreen,
.sw-geo-fullscreen *,
.sw-cal-fullscreen,
.sw-cal-fullscreen *,
.sw-pax-fullscreen,
.sw-pax-fullscreen * {
  box-sizing: border-box;
}

/* ===== Full-screen geo popover on mobile ===== */
/* REF: On mobile, clicking geo field opens full-screen fixed overlay that slides up from bottom */
.sw-geo-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Opens from inside .sw-edit-overlay; sits at the drawer level so it
     stacks above the shell full-mode scrim and above any sibling panel
     that's also at this level (DOM order wins). */
  z-index: var(--theme-z-index-drawer, 10080);
  background: var(--sw-bg-primary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 0 24px;
  font-size: 16px;
  line-height: 24px;
  /* Slide-up animation */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity   var(--sheet-duration-exit) var(--sheet-ease-exit),
              transform var(--sheet-duration-exit) var(--sheet-ease-exit);
}
.sw-geo-fullscreen.enter-active,
.sw-geo-fullscreen.enter-done {
  opacity: 1;
  transform: translateY(0);
  transition: opacity   var(--sheet-duration-enter) var(--sheet-ease-enter),
              transform var(--sheet-duration-enter) var(--sheet-ease-enter);
}
.sw-geo-fullscreen.exit-active {
  opacity: 0;
  transform: translateY(100%);
}

/* Header bar with title and close button — title left-aligned per REF */
.sw-geo-fullscreen-header {
  display: block;
  position: relative;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
}
.sw-geo-fullscreen-title {
  font-size: 18px;
  font-weight: 700;
  color: rgb(0, 0, 0);
  line-height: 27px;
}
.sw-geo-fullscreen-close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgb(0, 0, 0);
  text-align: center;
}
.sw-geo-fullscreen-close svg {
  width: 20px;
  height: 20px;
}

/* Input area inside full-screen geo — REF uses outline (not border) for the blue ring */
.sw-geo-fullscreen .sw-dropdown-input-container {
  height: 48px;
  padding: 8px 56px 8px 12px;
  border: none;
  border-bottom: none;
  border-radius: 10px;
  margin: 0 0 32px;
  gap: 8px;
  background: transparent;
  outline: 2px solid var(--sw-brand);
  outline-offset: 0px;
  justify-content: space-between;
  font-weight: 500;
}
.sw-geo-fullscreen .sw-dropdown-input-container .sw-field-text-input {
  font-size: 16px;
  font-weight: 500;
  height: 32px;
  line-height: 32px;
}

/* Results list inside full-screen geo */
.sw-geo-fullscreen .sw-dropdown-list {
  overflow-y: auto;
  padding: 8px 0;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 160px);
  scrollbar-width: none;
}
.sw-geo-fullscreen .sw-dropdown-list::-webkit-scrollbar {
  display: none;
}
/* Items inside fullscreen geo use 16px font (not 14px desktop default) */
.sw-geo-fullscreen .sw-dropdown-item {
  font-size: 16px;
  line-height: 24px;
}
.sw-geo-fullscreen .sw-dropdown-item-title {
  font-size: 16px;
}
.sw-geo-fullscreen .sw-dropdown-item-subtitle {
  font-size: 14px;
  line-height: 20px;
}

/* Ghost text inside full-screen geo */
.sw-geo-fullscreen .sw-ghost-text {
  font-size: 16px;
  font-weight: 500;
  height: 32px;
  line-height: 32px;
}
/* REF subtitle in fullscreen uses tertiary color, slightly different size */
.sw-geo-fullscreen .sw-dropdown-item-subtitle {
  color: var(--sw-text-tertiary);
}

/* ===== Full-screen calendar on mobile ===== */
.sw-cal-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* See .sw-edit-overlay above — drawer level so it sits above the
     shell full-mode scrim and the edit overlay it opens from. */
  z-index: var(--theme-z-index-drawer, 10080);
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity   var(--sheet-duration-exit) var(--sheet-ease-exit),
              transform var(--sheet-duration-exit) var(--sheet-ease-exit);
}
.sw-cal-fullscreen.enter-active,
.sw-cal-fullscreen.enter-done {
  opacity: 1;
  transform: translateY(0);
  transition: opacity   var(--sheet-duration-enter) var(--sheet-ease-enter),
              transform var(--sheet-duration-enter) var(--sheet-ease-enter);
}
.sw-cal-fullscreen.exit-active {
  opacity: 0;
  transform: translateY(100%);
}
/* Header: title row + weekday row */
.sw-cal-fullscreen-header {
  padding: 8px 14px;
  /* REF always shows shadow on header */
  box-shadow: rgba(26, 35, 43, 0.04) 0px 0px 2px 0px,
              rgba(26, 35, 43, 0.12) 0px 3px 6px 0px;
}
.sw-cal-fullscreen-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 16px;
  min-height: 48px;
}
.sw-cal-fullscreen-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: #000;
  margin: 0;
  padding: 8px 0;
}
/* Reset geo-fullscreen-close absolute positioning inside calendar (it uses flex layout) */
.sw-cal-fullscreen .sw-geo-fullscreen-close {
  position: static;
  top: auto;
  right: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 1000px;
  padding: 0;
  margin: 0 -16px 0 -40px;
  color: rgb(58, 66, 74);
}
.sw-cal-fullscreen .sw-geo-fullscreen-close svg {
  width: 22px;
  height: 22px;
}
/* Weekday row fixed in header */
.sw-cal-fullscreen-weekdays {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 0;
}
.sw-cal-fullscreen-weekday {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: var(--sw-text-tertiary);
  line-height: 19.5px;
}
/* Scrollable body */
.sw-cal-fullscreen-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 8px 14px;
  max-height: 100%;
}
.sw-cal-fullscreen-body::-webkit-scrollbar {
  display: none;
}
/* Hide per-month thead since weekdays are in fixed header */
.sw-cal-fullscreen-body thead {
  display: none;
}
/* Single-column month grid inside fullscreen calendar */
.sw-cal-fullscreen-body .sw-calendar-month {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
.sw-cal-fullscreen-body .sw-calendar-month + .sw-calendar-month {
  margin-top: 40px;
}
.sw-cal-fullscreen-body .sw-calendar-month-header {
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 0 10px;
}
.sw-cal-fullscreen-body .sw-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.sw-cal-fullscreen-body .sw-calendar-day {
  height: 48px;
}
.sw-cal-fullscreen-body .sw-calendar-day-num {
  font-size: 14px;
  font-weight: 500;
}
/* Footer bar — primary button always right-aligned to leave space on
 * the left for the optional "showing prices" text. The text has
 * `flex: 1` so when present it expands and the button sits at the
 * right edge; when absent, flex-end keeps the lone button on the
 * right. */
.sw-cal-fullscreen-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  padding: 8px 16px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  min-height: auto;
  flex-shrink: 0;
  box-shadow: rgba(26, 35, 43, 0.12) 0px -4px 8px 0px,
              rgba(26, 35, 43, 0.04) 0px 0px 2px 0px;
}
.sw-cal-fullscreen-footer-text {
  font-size: 12px;
  color: var(--sw-text-secondary);
  flex: 1;
  padding-right: 16px;
  line-height: 18px;
}
.sw-cal-fullscreen-select-btn {
  height: 44px;
  padding: 0 16px;
  min-width: 150px;
  font-size: 13px;
}

/* ===== Full-screen pax popover on mobile ===== */
/* REF: div[data-part=popover], position:fixed, display:block, padding:0 24px, bg:white */
.sw-pax-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* See .sw-edit-overlay above — drawer level so it sits above the
     shell full-mode scrim and the edit overlay it opens from. */
  z-index: var(--theme-z-index-drawer, 10080);
  background: rgb(255, 255, 255);
  display: flex;
  overflow: hidden;
  flex-direction: column;
  overscroll-behavior: contain;
  padding: 0 24px;
  font-size: 16px;
  line-height: 24px;
  /* Slide-up animation */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity   var(--sheet-duration-exit) var(--sheet-ease-exit),
              transform var(--sheet-duration-exit) var(--sheet-ease-exit);
}
.sw-pax-fullscreen.enter-active,
.sw-pax-fullscreen.enter-done {
  opacity: 1;
  transform: translateY(0);
  transition: opacity   var(--sheet-duration-enter) var(--sheet-ease-enter),
              transform var(--sheet-duration-enter) var(--sheet-ease-enter);
}
.sw-pax-fullscreen.exit-active {
  opacity: 0;
  transform: translateY(100%);
}
/* Title: same pattern as geo fullscreen header */
.sw-pax-fullscreen-title {
  display: block;
  position: relative;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  color: rgb(0, 0, 0);
}
/* Close button inside pax title (same absolute pattern as geo) */
.sw-pax-fullscreen .sw-geo-fullscreen-close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
/* Content area: scrollable */
.sw-pax-fullscreen-content {
  display: block;
  overflow: auto;
  padding: 0;
}
/* Pax rows container inside fullscreen */
.sw-pax-fullscreen-content .sw-pax-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  border-radius: 8px;
  background: rgb(255, 255, 255);
}
/* Cabin class section */
.sw-cabin-section {
  padding: 0;
}
.sw-cabin-section-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: rgb(0, 0, 0);
  margin: 40px 0 8px;
}
/* Radio group root */
.sw-cabin-radios {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
/* Each radio item: label with circle + text */
.sw-cabin-radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  height: 40px;
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
  color: rgb(26, 35, 43);
}
/* Radio circle (unchecked) */
.sw-cabin-radio-control {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgb(195, 204, 213);
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0;
  flex-shrink: 0;
}
/* Radio circle (checked) */
.sw-cabin-radio-item[data-state="checked"] .sw-cabin-radio-control {
  border: 5px solid rgb(24, 118, 220);
}
/* Radio label text */
.sw-cabin-radio-label {
  font-size: 13px;
  line-height: 20px;
  margin: 2px 0;
  color: rgb(26, 35, 43);
}
/* Footer: absolute-positioned at bottom */
.sw-pax-fullscreen-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 24px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: rgb(255, 255, 255);
}
/* Done button */
.sw-pax-fullscreen-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border: none;
  border-radius: var(--sw-radius-btn);
  background: rgb(23, 113, 212);
  color: rgb(255, 255, 255);
  font-family: var(--sw-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  padding: 0 16px;
  cursor: pointer;
  overflow: hidden;
}

/* Hide desktop separators in mobile overlay */
.sw-edit-overlay .sw-field--locations .sw-field::after,
.sw-edit-overlay .sw-field--dates .sw-field-btn::after {
  display: none;
}
/* Restore partial-width horizontal divider under origin field (overrides hide rule above).
   Must reset desktop ::after values (top:8px, right:0, height:48px) which otherwise bleed through. */
.sw-edit-overlay .sw-field--locations .sw-field[data-testid="geo-from"]::after {
  content: "";
  display: block;
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 5%;
  width: 75%;
  height: 1px;
  background-color: var(--sw-border-medium);
}
/* Hotel dest has only one field — no divider ::after needed (unlike flights which have origin/dest pair) */

/* Hide inline search button in overlay; fixed mobile button is used */
.sw-edit-overlay .sw-card .sw-search-btn {
  display: none;
}

/* Mobile search button — sized inside the fixed bottom bar. */
.sw-edit-bottom-bar > .sw-search-btn--mobile {
  position: relative;
  width: 100%;
  max-width: none;
  height: 48px;
  border-radius: var(--sw-radius-btn);
  justify-content: center;
  margin: 0;
  padding: 0 20px;
  overflow: hidden;
  flex-shrink: 1;
}

/* ===== Compact desktop (narrow viewport — hide field icons, shrink search button) ===== */
@media (max-width: 999px) and (min-width: 768px) {
  /* Icon-hide rules apply only to flight cards (RT). Selectors that
   * follow exclude:
   *   - One-way:    .sw-field--dates:has([data-testid="to-date-picker-input"])
   *                 (OW has no "to" date picker)
   *   - Multi-city: distinct DOM (uses .sw-mc-* — no .sw-field--dates)
   *   - Hotels:     .sw-card:not(:has([data-testid="settings-trigger"]))
   *                 (only hotels renders the settings-trigger; with a
   *                 single geo field there's always room for the icons)
   */
  .sw-card:not(:has([data-testid="settings-trigger"]))
    .sw-field--dates:has([data-testid="to-date-picker-input"])
    .sw-field-icon {
    display: none;
  }
  .sw-card:not(:has([data-testid="settings-trigger"]))
    .sw-field:has([data-testid="passengers-trigger"])
    .sw-field-icon {
    display: none;
  }
  /* Reclaim left padding only where the icon was hidden above. */
  .sw-card:not(:has([data-testid="settings-trigger"]))
    .sw-field--dates:has([data-testid="to-date-picker-input"])
    .sw-field-btn,
  .sw-card:not(:has([data-testid="settings-trigger"]))
    .sw-field:has([data-testid="passengers-trigger"])
    .sw-field-btn {
    padding-left: 12px;
  }
  /* Search button: icon only, no text (exclude multi-city which has its own layout) */
  .sw-search-btn:not(.sw-mc-search-btn) .sw-search-btn-content > span {
    display: none;
  }
  .sw-search-btn:not(.sw-mc-search-btn) {
    padding: 0;
    min-width: 48px;
    width: 48px;
  }
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .sw-root:not(.sw-edit-overlay) {
    max-width: 100%;
    /* Match REF: mount point has fPSBzf(display:flex), jTWvec(position:relative),
       bYPznK(justify-content:center), pkggp(height:216px) — our widget JS replaces
       className with 'sw-root', losing these utility classes. Restore them here.
       Exclude sw-edit-overlay which also uses sw-root class. */
    display: flex;
    height: 216px;
    justify-content: center;
  }

  /* Revert card from pill to rectangular on mobile */
  .sw-card {
    border-radius: var(--sw-radius-lg);
    height: auto;
    padding: 16px;
    display: block;
  }

  /* On mobile, card stacks fields vertically */

  .sw-field--locations {
    flex-direction: column;
  }

  /* Show labels on mobile (more space, fields stack) */
  .sw-field-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--sw-text-tertiary);
    line-height: 1;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .sw-field-input {
    border: 1px solid var(--sw-border-medium);
    border-right: 1px solid var(--sw-border-medium);
    border-radius: var(--sw-radius-sm);
    height: 56px;
    padding: 8px 12px;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

  .sw-field--locations .sw-field .sw-geo-presenter {
    border-radius: var(--sw-radius-sm);
  }

  .sw-field--dates {
    max-width: none;
  }

  .sw-field--dates > div {
    flex-direction: column;
    max-width: none;
  }

  .sw-field--dates [data-part="search-presenter"] {
    border-radius: var(--sw-radius-sm);
    border-right: 1px solid var(--sw-border-medium);
    flex: 1;
  }

  /* On mobile, search-presenter containers get border like other fields */
  .sw-field-input[data-part="search-presenter"] {
    border: 1px solid var(--sw-border-medium);
    border-radius: var(--sw-radius-sm);
    height: 56px;
  }

  .sw-field-btn {
    height: 56px;
    padding: 8px 12px 8px 36px;
  }

  .sw-field-icon {
    left: 10px;
  }

  /* Pax/guests fields: full width on mobile (override desktop 160px constraint) */
  .sw-field:has([data-testid="passengers-trigger"]),
  .sw-field:has([data-testid="settings-trigger"]) {
    width: 100%;
    max-width: none;
  }

  .sw-swap-btn {
    left: auto;
    right: 12px;
    top: 100%;
    transform: translate(0, -50%);
  }

  .sw-search-btn {
    width: 100%;
    justify-content: center;
    margin: 0;
    height: 48px;
    flex-shrink: 0;
  }

  .sw-calendar {
    width: calc(100vw - 32px);
    left: 50%;
    transform: translateX(-50%);
    padding: 16px;
  }

  .sw-calendar-inner {
    flex-direction: column;
  }

  .sw-calendar-month {
    width: 100%;
  }

  .sw-calendar-table {
    width: 100%;
  }

  .sw-multicity-leg {
    flex-direction: column;
    gap: 4px;
  }

  .sw-multicity-leg-num {
    width: auto;
    justify-content: flex-start;
    padding-left: 4px;
  }

  .sw-dropdown {
    max-width: calc(100vw - 32px);
  }

  /* Trip type: horizontal scroll on mobile */
  .sw-trip-toggle-group {
    gap: 12px;
  }

  /* Pax footer/Done button visible on mobile */
  .sw-pax-footer {
    display: block;
    padding: 16px 24px;
  }

  .sw-pax-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
  }

  .sw-pax-close {
    display: flex;
  }
}

/* ===== Overlay / Click-away ===== */
.sw-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: none;
}

.sw-overlay.open {
  display: block;
}

/* ===== Loading Spinner ===== */
.sw-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--sw-text-tertiary);
  font-size: 13px;
}

.sw-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--sw-border-medium);
  border-top-color: var(--sw-primary);
  border-radius: 50%;
  animation: sw-spin 0.6s linear infinite;
  margin-right: 8px;
}

@keyframes sw-spin {
  to { transform: rotate(360deg); }
}

/* ===== No Results ===== */
.sw-no-results {
  padding: 20px;
  text-align: center;
  color: var(--sw-text-tertiary);
  font-size: 13px;
}

/* ===== Checkbox (for airport children) ===== */
.sw-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--sw-border-medium);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--sw-transition);
  cursor: pointer;
}

.sw-checkbox.checked {
  background: var(--sw-primary);
  border-color: var(--sw-primary);
}

.sw-checkbox.checked svg {
  color: #fff;
}

.sw-checkbox svg {
  width: 12px;
  height: 12px;
  color: transparent;
}
/* SkyMonde brand theme — default values (matches search-widget.css :root) */
/* Load AFTER search-widget.css to override nothing (these are the defaults). */
:root {
  --sw-primary: #1771d4;
  --sw-brand: #1876dc;
  --sw-primary-hover: #2c86e8;
  --sw-primary-active: #1568c1;
  --sw-primary-subtle: #e5f2ff;
  --sw-primary-subtle-hover: #d1e7ff;
  --sw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Shapes: SkyMonde uses rounded/pill everywhere ── */
  --sw-radius-sm: 8px;
  --sw-radius-md: 12px;
  --sw-radius-lg: 16px;
  --sw-radius-pill: 1000px;
  --sw-radius-btn: 1000px;
  --sw-radius-form: var(--sw-radius-pill);
}