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

/* ===== 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-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: 150ms ease;
}

/* ===== 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 #1876dc;
  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 #1876dc;
  outline-offset: 2px;
  border-radius: var(--sw-radius-pill);
}

/* Other focusable elements */
.sw-root .sw-pax-btn:focus-visible,
.sw-root .sw-pax-done:focus-visible,
.sw-root .sw-cabin-pill:focus-visible {
  outline: 2px solid #1876dc;
  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 input[data-part="hidden-input"]:focus-visible + .sw-radio-control {
  outline: rgba(0, 0, 0, 0) solid 2px;
  outline-offset: 2px;
}
.sw-root .sw-trip-type input[data-part="hidden-input"]:focus-visible ~ .sw-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 {
  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: rgba(255, 255, 255, 0.64);
  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: #fff;
}

.sw-tab.active {
  color: #fff;
  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: #fff;
  border-radius: var(--sw-radius-pill);
  transform-origin: 8px 2px;
  transform: translateX(-8px) scaleX(0);
  transition: transform 0.3s ease-out;
  animation: sw-shrink-border 0.3s ease-out forwards;
}
.sw-tab.active::after {
  transform: translateX(-8px) scaleX(1);
  animation: sw-grow-border 0.3s ease-out forwards;
}

/* Card content fade-in on tab switch */
@keyframes sw-card-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sw-card-enter {
  animation: sw-card-enter 0.25s ease 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.
*/
.sw-trip-types {
  margin-bottom: 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: rgba(255, 255, 255, 0.72);
  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: #fff;
}

.sw-trip-type.active {
  color: #fff;
}

/* Radio circle indicator */
.sw-radio-control {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(195, 204, 213, 1);
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--sw-transition);
}

.sw-trip-type.active .sw-radio-control {
  border-color: #fff;
}

/* Filled dot for active radio */
.sw-trip-type.active .sw-radio-control::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

.sw-radio-label {
  margin: 2px 0;
}

/* Hidden radio input — visually hidden but accessible */
.sw-trip-type input[data-part="hidden-input"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* ===== 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-pill);
  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;
}

.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;
  align-items: center;
  width: 100%;
  height: 64px;
  padding: 20px 8px 20px 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);
}

.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;
  padding-top: 2px;
  white-space: nowrap;
  flex-shrink: 1;
}

.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;
}

.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);
  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;
  animation: sw-dropdown-open 0.3s ease-out both;
}
.sw-dropdown.closing {
  display: block;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* 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;
  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;
  width: 100%;
  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 0.2s;
}

.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 (REF: right side, 18x23 outer wrapper) */
[data-part="option-checkbox"] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  width: 18px;
  height: 23px;
}

.sw-option-checkbox {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid rgb(195, 204, 213);
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

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

.sw-option-checkbox.checked::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* 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:hover,
.sw-dropdown-item.highlighted {
  background: rgba(5, 54, 87, 0.06);
}

/* 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);
  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; max-height: 64px; overflow: hidden; }
  to   { opacity: 1; max-height: 500px; overflow: hidden; }
}

.sw-calendar.open {
  display: flex;
  flex-direction: column;
  animation: sw-calendar-open 0.4s ease-out both;
}

.sw-calendar.closing {
  display: flex;
  flex-direction: column;
  opacity: 0;
  max-height: 64px;
  overflow: hidden;
  transition: opacity 0.25s ease-in, max-height 0.3s ease-in;
}

/* 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;
}

.sw-calendar-day:hover: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 highlight via ::before (layer 2 — above price bg) */
td.cell-in-range .sw-calendar-day::before,
td.cell-range-start .sw-calendar-day::before,
td.cell-range-end .sw-calendar-day::before,
td.cell-preview-start .sw-calendar-day::before,
td.cell-preview-end .sw-calendar-day::before,
td.cell-preview-range .sw-calendar-day::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);
  z-index: 2;
}

/* Preview endpoint (hovered cell) — slightly stronger highlight */
.sw-calendar-day.preview-endpoint::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--sw-primary-subtle-hover, rgba(0, 90, 211, 0.15));
  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);
}
td.preview-excluded {
  background: transparent !important;
}
td.preview-excluded .sw-calendar-day::before {
  display: none;
}

/* ===== 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);
  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 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 1200;
  will-change: left, top;
}
/* Original cell dimmed during drag */
.sw-calendar-day.drag-origin {
  opacity: 0.3;
}
/* Freeze native scroll during drag */
.sw-cal-fullscreen-body.drag-active {
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto !important;
  touch-action: none;
}
/* Drop animation on ghost */
.sw-drag-ghost.dropping {
  transition: left 0.15s ease-out, top 0.15s ease-out, transform 0.15s ease-out;
  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);
  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;
  animation: sw-pax-open 0.4s ease-out both;
}

.sw-pax-dropdown.closing {
  display: block;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.25s ease-in, transform 0.25s ease-in;
}

/* 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: 16px 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 {
  display: flex;
  align-items: center;
}

.sw-pax-btn {
  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-btn:hover:not(:disabled) {
  background: var(--sw-primary-subtle-hover);
}

.sw-pax-btn:disabled {
  color: #c3ccd5;
  border-color: #c3ccd5;
  cursor: pointer;
}

/* Icon wrapper inside +/- buttons */
.sw-pax-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sw-pax-icon-wrap svg {
  display: block;
}

.sw-pax-count {
  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);
}

/* 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 {
  display: inline-flex;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border: none;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary);
  color: #fff;
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--sw-transition);
  justify-content: center;
  align-items: center;
}

.sw-pax-done:hover {
  background: var(--sw-primary-hover);
}

/* ===== 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: #c3ccd5;
  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);
  box-shadow: var(--sw-shadow-modal);
  z-index: 100;
  padding: 4px;
  display: none;
  min-width: 200px;
}

.sw-cabin-dropdown.open {
  display: block;
  animation: sw-pax-open 0.4s ease-out both;
}

.sw-cabin-dropdown.closing {
  display: block;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.25s ease-in, transform 0.25s ease-in;
}

.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 {
  flex-shrink: 1;
  height: 48px;
  padding: 0 20px;
  margin: 8px;
  border: 0px solid transparent;
  border-radius: var(--sw-radius-pill);
  background: var(--sw-primary);
  color: #fff;
  font-family: var(--sw-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  transition: background 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: fit-content;
  position: relative;
}

.sw-search-btn:hover {
  background: var(--sw-primary-hover);
}

.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, outline-offset:0px, overflow:visible */
.sw-mc-borderline {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  outline: 1px solid var(--sw-border-medium);
  outline-offset: 0px;
  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;
}

/* 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) — REF: position static */
.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;
}

/* 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;
}
/* 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;
  color: var(--sw-text-secondary);
  font-weight: 600;
}

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

.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: #fff;
}

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

/* Override hardcoded SVG fill="#3A424A" to white (CSS > presentation attrs) */
.sw-mc-remove-btn [data-part="icon"] svg path {
  fill: #fff;
}

/* Hide close when only 1 step */
.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-text-secondary);
  min-width: fit-content;
  transition: background 0.3s;
}

.sw-mc-add-btn:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.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;
}
/* Icon inner div: white for dark-bg visibility (REF: rgba(255,255,255,0.72)) */
.sw-mc-add-btn [data-part="button-content"] > div > div {
  color: rgba(255, 255, 255, 0.72);
}

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

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

/* ===== 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%;
}

/* 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;
  outline: 1px solid var(--sw-border-medium);
  outline-offset: -1px;
}
.sw-mc-pax-btn:hover {
  background: rgba(5, 54, 87, 0.06);
}

/* ===== 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;
  }

  .sw-mc-borderline {
    width: 100%;
    flex-direction: column;
    outline: none;
    border-radius: 12px;
    background: transparent;
  }

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

  /* REF: geo-group acts like RT locations card — white bg, border, shadow */
  .sw-mc-geo-group {
    flex-direction: column;
    border: 1px solid var(--sw-border-medium);
    border-radius: 12px;
    background: #fff;
    overflow: visible;
    position: relative;
    margin-bottom: 16px;
    box-shadow: rgba(23, 29, 46, 0.12) 0px 8px 16px 0px;
  }

  /* 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;
  }

  /* REF: geo-from 340x60, geo-to 340x54 inside the card */
  .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: 54px;
  }

  /* 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 field: individual border, matching REF wrapper (white bg, border, margin-bottom 4px) */
  .sw-field.sw-mc-date-field {
    border: 1px solid var(--sw-border-medium);
    border-radius: var(--sw-radius-md);
    margin-bottom: 4px;
    background: #fff;
    height: 62px;
    min-height: 62px;
    flex-shrink: 0;
  }

  .sw-mc-borderline .sw-geo-presenter,
  .sw-mc-borderline .sw-geo-presenter:has(.sw-geo-name) {
    height: auto;
    padding: 12px 16px;
    border-radius: 0;
    background: 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 > 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;
  }

  button.sw-mc-pax-btn[data-testid="passengers-trigger"] {
    height: 56px;
    max-height: 56px;
    max-width: 560px;
    padding: 16px 16px 16px 40px;
    border: 1px solid var(--sw-border-medium);
    border-radius: 12px;
    background: var(--sw-bg-primary);
    font-size: 16px;
    line-height: 24px;
    outline: 1px solid var(--sw-border-medium);
    outline-offset: -1px;
  }

  .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 Bar ===== */
.sw-mini-container {
  display: inline-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;
}

.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;
  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 {
  width: 20px;
  height: 20px;
  display: block;
}

/* ===== Desktop Mini Pill (header bar) ===== */
.sw-mini-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 600px;
  height: 45px;
  padding: 4px 8px 4px 16px;
  margin: 8px 0;
  border-radius: 1000px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  color: #1a232b;
  background: transparent;
  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 0.2s;
}
.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;
}
.sw-mini-desktop-date {
  color: #555f6d;
  white-space: nowrap;
  padding: 0 8px;
  border-left: 1px solid #e9ecef;
}
.sw-mini-desktop-settings {
  color: #555f6d;
  white-space: nowrap;
  padding: 0 8px;
  border-left: 1px solid #e9ecef;
}
.sw-mini-desktop-search-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 1000px;
  border: none;
  background: var(--colors-theme-background-primary, #1771E6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  margin-left: 4px;
}
.sw-mini-desktop-search-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.sw-mini-desktop-search-btn svg path {
  fill: #fff;
}

/* ===== Desktop Edit Overlay (expand from header) ===== */
.sw-desktop-backdrop {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1100;
}
.sw-desktop-panel {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 1101;
  background: #fff;
  padding: 0 40px 24px;
  max-width: 1128px;
  margin: 0 auto;
  box-shadow: 0 8px 16px rgba(26,35,43,0.12);
}

/* --- Desktop panel: trip types on white bg (dark text) --- */
.sw-desktop-panel .sw-trip-type {
  color: #1a232b;
}
.sw-desktop-panel .sw-trip-type:hover {
  color: #1a232b;
}
.sw-desktop-panel .sw-trip-type.active {
  color: #1a232b;
}
.sw-desktop-panel .sw-radio-control {
  border-color: #c3ccd5;
}
.sw-desktop-panel .sw-trip-type.active .sw-radio-control {
  border-color: #1876dc;
}
.sw-desktop-panel .sw-trip-type.active .sw-radio-control::after {
  background: #1876dc;
}
.sw-desktop-panel .sw-radio-label {
  color: inherit;
}

/* --- Tabs in mini header (white bg, dark text) --- */
.as-header--mini .sw-tabs {
  margin-bottom: 0;
  padding: 0;
  height: 100%;
  align-items: center;
}
.as-header--mini .sw-tab {
  color: #555f6d;
}
.as-header--mini .sw-tab:hover {
  color: #1a232b;
}
.as-header--mini .sw-tab.active {
  color: #1a232b;
}
.as-header--mini .sw-tab::after {
  background: #1a232b;
}
.as-header--mini .sw-tab.active::after {
  background: #1a232b;
}

/* ===== 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 0.25s ease-out;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: var(--sw-bg-canvas);
  display: block;
  overflow: visible;
  margin: 0 0 24px 0;
  max-width: 1128px;
  justify-content: center;
}

/* REF: div 375x61, display:block, margin:0 0 20px */
.sw-edit-header {
  display: block;
  height: 61px;
  margin: 0 0 20px;
  position: static;
}

/* 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 */
.sw-edit-header .sw-tab {
  color: var(--sw-text-tertiary);
  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;
}

/* REF active tab: color:rgb(26,35,43) */
.sw-edit-header .sw-tab.active {
  color: var(--sw-text-primary);
}

/* REF: ::after background:rgb(26,35,43), height:4px, width:16px, borderRadius:1000px, bottom:0 */
.sw-edit-header .sw-tab.active::after {
  background: var(--sw-text-primary);
}

/* REF: div 375x346, display:block, position:relative */
.sw-edit-content {
  display: block;
  position: relative;
}

/* Scrollable area */
.sw-edit-scroll {
  overflow: auto;
  max-height: calc(100vh - 81px - 68px);
  padding: 0 24px;
  -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 0.15s ease, width 0.15s ease;
}

/* REF label text: p, display:inline-block, fontSize:13px, fontWeight:600, lineHeight:16px, padding:3px 0 */
.sw-edit-overlay .sw-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.active .sw-radio-label {
  color: rgb(255, 255, 255);
}

.sw-edit-overlay .sw-radio-control {
  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-pill);
  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 12px;
  width: auto;
  align-self: flex-start;
  flex: 0 1 auto;
}

/* REF: div 327x116, display:flex, flex-direction:column, bg:white, border:1px solid #dee3e7, border-radius:12px,
   box-shadow:rgba(23,29,46,0.12) 0 8px 16px, margin:0 0 16px, flex:2 1 0% */
.sw-edit-overlay .sw-field--locations {
  background: var(--sw-bg-primary);
  border-radius: 12px;
  border: 1px solid var(--sw-border-medium);
  box-shadow: 0 8px 16px rgba(23, 29, 46, 0.12);
  width: 100%;
  flex-direction: column;
  margin: 0 0 16px;
  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. */

/* REF: geo-to div 325x54, position:relative; geo-to button 325x54 */
.sw-edit-overlay .sw-field[data-testid="geo-to"] {
  height: 54px;
}
.sw-edit-overlay .sw-field[data-testid="geo-to"] .sw-geo-presenter {
  height: 54px;
  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% */
.sw-edit-overlay .sw-field--dates {
  background: transparent;
  border-radius: 0;
  width: 100%;
  max-width: 560px;
  position: relative;
  flex: 1 1 0%;
}

/* REF: partial-width bottom line under dates (left:5%, width:75%) */
.sw-edit-overlay .sw-field--dates::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 5%;
  width: 75%;
  height: 1px;
  background-color: var(--sw-border-light);
}

/* REF date inner: div 327x58, display:block, position:relative, border:1px solid #dee3e7, border-radius:12px, bg:white, margin:0 0 4px */
.sw-edit-overlay .sw-field--dates > div:not(.sw-calendar) {
  display: block;
  position: relative;
  border: 1px solid var(--sw-border-medium);
  border-radius: 12px;
  background-color: var(--sw-bg-primary);
  margin: 0 0 4px;
  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% */
.sw-edit-overlay .sw-field:has([data-testid="passengers-trigger"]),
.sw-edit-overlay .sw-field:has([data-testid="settings-trigger"]) {
  background: transparent;
  border-radius: var(--sw-radius-pill);
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* REF: pax inner div 327x56 — our sw-field-input */
.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: var(--sw-radius-pill);
  height: 56px;
  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;
}

/* REF pax button: button 327x56, display:flex, bg:white, padding:16px 16px 16px 40px, gap:4px,
   outline:1px solid #dee3e7, outline-offset:-1px, border-radius:12px, fontSize:16px, fontWeight:500, lineHeight:24px, max-width:560px */
.sw-edit-overlay .sw-field-btn[data-testid="passengers-trigger"],
.sw-edit-overlay .sw-field-btn[data-testid="settings-trigger"] {
  display: flex;
  background: var(--sw-bg-primary);
  padding: 16px 16px 16px 40px;
  gap: 4px;
  border: 1px solid var(--sw-border-medium);
  outline: 1px solid var(--sw-border-medium);
  outline-offset: -1px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  height: 56px;
  max-height: 56px;
  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;
}

/* ===== 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;
  z-index: 1000;
  background: var(--sw-bg-primary);
  display: block;
  padding: 0 24px;
  font-size: 16px;
  line-height: 24px;
  /* Slide-up animation */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sw-geo-fullscreen.enter-active,
.sw-geo-fullscreen.enter-done {
  opacity: 1;
  transform: translateY(0);
}
.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);
}
/* 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;
  z-index: 1100;
  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 0.25s ease, transform 0.25s ease;
}
.sw-cal-fullscreen.enter-active,
.sw-cal-fullscreen.enter-done {
  opacity: 1;
  transform: translateY(0);
}
.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 */
.sw-cal-fullscreen-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 8px 16px;
  min-height: auto;
  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 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: var(--sw-primary);
  color: #fff;
  border: none;
  border-radius: 1000px;
  padding: 0 16px;
  min-width: 150px;
  height: 44px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  white-space: nowrap;
}

/* ===== 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;
  z-index: 1100;
  background: rgb(255, 255, 255);
  display: block;
  padding: 0 24px;
  font-size: 16px;
  line-height: 24px;
  /* Slide-up animation */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sw-pax-fullscreen.enter-active,
.sw-pax-fullscreen.enter-done {
  opacity: 1;
  transform: translateY(0);
}
.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;
  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: 1000px;
  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;
}

/* REF: button 335x48, position:fixed, bottom:20px, left:20px, right:20px, bg:#1771d4, border-radius:1000px, padding:0 20px */
.sw-edit-overlay > .sw-search-btn--mobile {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  width: auto;
  max-width: none;
  height: 48px;
  border-radius: var(--sw-radius-pill);
  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) {
  /* Hide calendar icons in date fields */
  .sw-field--dates .sw-field-icon {
    display: none;
  }
  /* Hide person/settings icon in pax field (RT/OW and multi-city) */
  .sw-field:has([data-testid="passengers-trigger"]) .sw-field-icon,
  .sw-field:has([data-testid="settings-trigger"]) .sw-field-icon,
  .sw-mc-pax-icon {
    display: none;
  }
  /* Hide multi-city date icons */
  .sw-mc-date-icon {
    display: none;
  }
  /* Reclaim left padding now that icons are gone */
  .sw-field--dates .sw-field-btn,
  .sw-field:has([data-testid="passengers-trigger"]) .sw-field-btn,
  .sw-field:has([data-testid="settings-trigger"]) .sw-field-btn,
  .sw-mc-pax-btn,
  .sw-mc-date-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;
}