:root {
  --color-green-50: #f0fdf4;
  --color-green-200: #b9f8cf;
  --color-green-500: #00c951;
  --color-green-600: #00a63e;
  --color-green-700: #008236;
  --color-green-800: #016630;
  --color-red-400: #ff6467;
  --color-gray-400: #99a1af;
  --color-green-900: #4a7c7e;
  --color-orange-50: #fff7ed;
  --color-orange-200: #ffd7a8;
  --color-orange-500: #ff6900;
  --color-orange-600: #f54a00;
  --color-orange-800: #9f2d00;
  --color-blue-50: #eff6ff;
  --color-blue-200: #bedbff;
  --color-blue-600: #155dfc;
  --color-gray-50: #fbf9fa;
  --color-gray-300: #d1d5dc;
}

.color-text-dark-same {
  color: var(--color-dark) !important;
}

.stroke-gray-400 {
  stroke: var(--color-gray-400) !important;
}

.stroke-green-500 {
  stroke: var(--color-green-500) !important;
}

.stroke-green-600 {
  stroke: var(--color-green-600) !important;
}

.color-text-green-700 {
  color: var(--color-green-700) !important;
}

.stroke-orange-500 {
  stroke: var(--color-orange-500) !important;
}

.stroke-red-400 {
  stroke: var(--color-red-400) !important;
}

.border-gray-400 {
  border-color: var(--color-gray-400) !important;
}

.color-text-orange-600 {
  color: var(--color-orange-600) !important;
}

.color-text-orange-800 {
  color: var(--color-orange-800) !important;
}

.bgColor-gray-50 {
  background-color: var(--color-gray-50) !important;
}

.bgColor-green-50 {
  background-color: var(--color-green-50) !important;
}

.bgColor-orange-50 {
  background-color: var(--color-orange-50) !important;
}

.bgColor-blue-50 {
  background-color: var(--color-blue-50) !important;
}

.bgColor-green-700 {
  background-color: var(--color-green-700) !important;
}

.border-color-orange-200 {
  border-color: var(--color-orange-200) !important;
}

.border-color-green-200 {
  border-color: var(--color-green-200) !important;
}

.border-color-blue-200 {
  border-color: var(--color-blue-200) !important;
}

.border-color-green-700 {
  background-color: var(--color-green-700) !important;
}

.min-h-auto {
  min-height: auto !important;
}

.list-style-disc,
.list-style-disc li {
  list-style-type: disc;
}

.bgColor-blue-50 .list-style-disc li::marker {
  color: var(--color-blue-600);
}

.custom-slider-track {
  gap: 12px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 10px 0;
}

.custom-slider-track::-webkit-scrollbar {
  display: none;
}

.custom-slider .offer-card {
  min-width: 280px;
  border-radius: 12px;
}

.custom-slider .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.custom-slider .slider-prev {
  left: 0;
}

.custom-slider .slider-next {
  right: 0;
}

.date-item-slider {
  position: relative;
}

.custom-slider.date-item-slider .slider-btn {
  top: 0;
  bottom: 0;
  transform: unset;
  border-radius: 0;
}

.custom-slider.date-item-slider .custom-slider-track .date-item {
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.custom-slider.date-item-slider .custom-slider-track .date-item.active {
  border-color: var(--color-second);
}

.custom-slider.date-item-slider .custom-slider-track .date-item.active .date,
.custom-slider.date-item-slider .custom-slider-track .date-item.active .price {
  color: var(--color-second) !important;
}

/* --- compare modal css ---- */
button.added {
  color: var(--color-second);
  font-weight: 600;
}

.compare-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 320px;
  background: var(--color-dark-first);
  border-radius: 8px;
  overflow: hidden;
  color: var(--color-white);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.compare-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  font-weight: 600;
}

.compare-body {
  background: var(--color-white);
  color: var(--color-dark);
  max-height: 220px;
  overflow: auto;
}

.compare-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--color-light-grey);
  font-size: 13px;
}

.compare-item img {
  width: 28px;
}

.compare-item .compare-timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.compare-item .timeline-line {
  flex: 1;
  min-width: 50px;
  height: 2px;
  background: #2dc4a0;
}

.compare-item .compare-content .custom-field .img-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compare-item .compare-content .custom-field .img-title div:first-child {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

.compare-item .compare-content .custom-field .img-title div:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare-item .compare-content .custom-field .img-title div:last-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.compare-floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-dark-first);
  color: var(--color-white);
  border: none;
  font-size: 22px;
  display: none;
  cursor: pointer;
}

.add-compare-btn {
  position: relative !important;
}

/* --- view fares and flight details css ---- */
.flight-card-expandable {
  max-height: none;
}

.flight-card-actions,
.flight-card-extra-info {
  position: relative;
  z-index: 99;
}

.flight-card-toggle {
  min-width: 145px;
}

.flight-card-chevron {
  transition: transform 0.2s ease;
}

.flight-card-link-btn[aria-expanded="true"] .flight-card-chevron {
  transform: rotate(180deg);
}

.flight-card-panel {
  border: 1px solid #e4e8ef;
}

.flight-fare-box {
  border-width: 2px !important;
  background: var(--color-white);
  border-color: #d8dde6 !important;
}

.flight-fare-box:hover {
  box-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
}

.flight-fare-box-active {
  border-color: var(--color-second) !important;
}

.flight-fare-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.flight-fare-points li {
  position: relative;
  margin-bottom: 10px;
  color: var(--color-dark);
  font-size: 0.95rem;
  list-style: none;
}

/* Fare cards are read by comparing one column against the next, so the blocks
   need to be findable at a glance rather than merely present. The heading is
   the quietest thing that still separates them — a rule or a filled band would
   out-shout the ticks and crosses, which are the actual content.

   The rhythm these three rules set, and why:
     heading -> its own items   8px   closest, so the heading clearly belongs
                                      to what follows it
     item    -> item           10px   the list's own comfortable spacing
     group   -> group          26px   more than twice the item gap, which is
                                      what makes a block read as a block
   Getting that order wrong is what made the last version look cramped: the
   heading sat 6px from its first item while the items sat 10px apart, so every
   heading looked stuck to the line under it. */
.flight-fare-group + .flight-fare-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--lf-border, #e6e8eb);
}

/* The last item in a block must not add its own trailing gap on top of the
   block gap, or the separator drifts away from the content it closes and the
   spacing above each heading stops being predictable. */
.flight-fare-group .flight-fare-points li:last-child {
  margin-bottom: 0;
}

.flight-fare-group-title {
  /* Deliberately smaller than the item text. `.text-xs` is !important in
     leisure-new-style.css, so the markup cannot carry that utility here —
     it would force the heading to the same size as its own contents. */
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

/* Shown only when two fares really do include the same things — see
   markIndistinguishableFares. Set apart from the list above it so it reads as
   a note about the card, not another inclusion in it.

   `max-width` is doing load-bearing work, not typography. A fare column is a
   flex item sized from its content, so one long unwrapped sentence becomes the
   card's natural width and stretches it across the whole modal — which is what
   happened with a single fare on the Premium Economy tab. Capping the measure
   keeps the note narrower than the column's own 220px floor, so it can never
   be the thing that decides how wide a card is. It reads better at this
   measure too, but that is the side benefit. */
.flight-fare-same-as {
  max-width: 34ch;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--lf-border, #e6e8eb);
  overflow-wrap: break-word;
}

/* `.webNewContent p` in leisure-new-style.css sets 1.15rem with an important
   line-height on every paragraph inside the page container, which rendered
   this note larger than the fare inclusions it belongs to. Pinned the same way
   `.flight-review-ref` below already pins itself against the same rule. */
.webNewContent .flight-fare-same-as {
  font-size: 0.6875rem !important;
  line-height: 1.45 !important;
}

/* The "no allowance published" line on a search card. Takes the full row so it
   wraps under the other chips instead of widening the card, and is capped to a
   readable measure for the same reason the fare-modal note is. */
.baggage-unpublished {
  width: 100%;
  max-width: 46ch;
}

.flight-timeline {
  position: relative;
  padding-left: 28px;
}

.flight-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 37px;
  width: 2px;
  background: var(--color-gray-300);
}

.flight-timeline-item {
  position: relative;
  margin-bottom: 24px;
}

.flight-timeline-item::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-green-600);
}

.flight-timeline-item.dark-green-dot::before {
  background-color: var(--color-green-900);
}

.flight-timeline-stop::before {
  background: #ff9f43;
}

.flight-info-box {
  background: var(--color-white);
  border-color: #d8dde6 !important;
}

/* Flight Details panel — leg switcher tabs (round-trip only), matching MMT's
   own outbound/return switcher: one continuous connected control.

   The earlier version had BOTH tabs drawing a real border on the shared
   middle edge (relying on z-index + a -1px overlap to make the active tab's
   border visually cover the inactive one). Two independently-drawn borders
   meeting at a sub-pixel boundary is exactly the kind of thing that renders
   inconsistently across browsers/zoom levels — which is why it kept coming
   back looking like two separate rounded pills touching, instead of one
   shape. Fixed properly this time: the inactive tab has NO border at all on
   its middle-facing side (border-*: none) — only the active tab ever draws
   a stroke there, so there is never more than one line to render at that
   edge, and its curve (from its own border-radius) is what the seam shows. */
.flight-leg-tabs {
  flex-wrap: wrap;
}

.flight-leg-tab {
  /* Reset native <button> chrome — Safari/Chrome give a plain button its own
     rounded corners by default, which silently out-ranks an explicit 0
     otherwise. */
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  background: var(--bgColor-white);
  border: 1px solid #d8dde6;
  border-radius: 0;
  padding: 6px 14px;
  font-weight: 600;
  color: var(--color-gray-2);
  cursor: pointer;
  transition: border-radius 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.flight-leg-tab-start {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.flight-leg-tab-end {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Only the active tab ever draws the middle seam — transparent, not none, so
   the border-width stays 1px either way and the tab doesn't shift width by a
   pixel when it toggles active. */
.flight-leg-tab-start:not(.active) {
  border-right-color: transparent;
}

.flight-leg-tab-end:not(.active) {
  border-left-color: transparent;
}

.flight-leg-tab.active {
  /* Painted above its neighbor and pulled a few px over the seam, so its own
     rounded, filled shape fully covers the inactive tab's square corner
     instead of just touching it edge-to-edge — a flush meeting between a
     curve and a straight line leaves the straight corner's tip peeking out
     past the curve no matter how precisely the two edges are aligned; full
     overlap removes that gap by construction rather than by alignment. */
  position: relative;
  z-index: 1;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  color: var(--color-second);
  border-color: var(--color-second);
  background: rgba(244, 93, 107, 0.06);
}

/* The overlap must exceed the 12px corner radius: border-radius clips both
   border and background to the curve, so within the arc's own recede zone
   the active tab paints nothing — a smaller overlap could still land the
   inactive tab's shifted square corner inside that unpainted sliver and let
   its tip show through. 13px clears the radius while staying under the 14px
   horizontal padding, so the shift never eats into a tab's own label text. */
.flight-leg-tab-start.active {
  margin-right: -13px;
}

.flight-leg-tab-end.active {
  margin-left: -13px;
}

/* Flight Details panel — per-segment card */
.flight-segment-card {
  border-color: #e4e8ef !important;
  background: var(--bgColor-white);
}

/* Full-width strip under a segment's timeline — cabin + check-in baggage side
   by side on one line, wrapping to stacked rows once they don't both fit
   (mobile, per the spec's "baggage row stacks vertically on mobile" note). */
.flight-segment-baggage-row {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e4e8ef;
}

/* Flight Details panel — per-segment vertical timeline: time | dot-rail | place,
   departure on row 1, duration/airline on row 2, arrival on row 3.
   The connecting line is drawn as three independently-anchored segments (one per
   row's rail cell) instead of a single element spanning all rows — each segment is
   pinned to the dot's fixed center offset (--vt-dot-offset) and bridges the fixed
   row-gap (--vt-gap) into the next row, so it lands exactly on every dot no matter
   how tall a row's airport-name/detail text grows (no hardcoded total-height guess). */
.flight-vtimeline {
  --vt-gap: 16px;
  --vt-dot-offset: 9px; /* dot's margin (4px) + half its own height (5px), from whichever edge it's anchored to */
  position: relative;
  display: grid;
  grid-template-columns: 80px 20px 1fr;
  /* Rows 1 and 3 share the same 64px floor so the departure→info gap and the
     info→arrival gap come out equal: each row's place text (top- or bottom-
     anchored) leaves the same leftover space before hitting the row-gap. Row 2
     gets a smaller floor, just enough to visibly separate duration (top, next
     to the plane badge) from airline/flight/aircraft (bottom, near arrival). */
  grid-template-rows: minmax(64px, auto) minmax(52px, auto) minmax(64px, auto);
  column-gap: 10px;
  /* row-gap: var(--vt-gap); */
  align-items: start;
}

.flight-vtimeline-rail {
  grid-column: 2;
  align-self: stretch;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Arrival's dot/line sit at the BOTTOM of the row's (now taller) rail, matching
   the arrival time/place text below, which is also bottom-anchored. */
.flight-vtimeline-rail.flight-vtimeline-arr {
  align-items: flex-end;
}

.flight-vtimeline-rail.flight-vtimeline-arr .flight-vtimeline-dot {
  margin-top: 0;
  margin-bottom: 4px;
}

.flight-vtimeline-rail.flight-vtimeline-dep {
  grid-row: 1;
}

.flight-vtimeline-rail.flight-vtimeline-mid {
  grid-row: 2;
}

.flight-vtimeline-rail.flight-vtimeline-arr {
  grid-row: 3;
}

.flight-vtimeline-rail::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--color-gray-300);
}

/* dep: line starts at the dot's own center and runs through the rest of the row
   plus the gap below, reaching row 2's top edge exactly. */
.flight-vtimeline-rail.flight-vtimeline-dep::after {
  top: var(--vt-dot-offset);
  bottom: calc(-1 * var(--vt-gap));
}

/* mid: line covers the full row plus the gap below, reaching row 3's top edge. */
.flight-vtimeline-rail.flight-vtimeline-mid::after {
  top: 0;
  bottom: calc(-1 * var(--vt-gap));
}

/* arr: the dot is bottom-anchored (row 3 is taller than its content), so the line
   runs from the row's top all the way down to the dot's center near the bottom —
   nothing needed below the final dot. */
.flight-vtimeline-rail.flight-vtimeline-arr::after {
  top: 0;
  bottom: var(--vt-dot-offset);
}

.flight-vtimeline-dot {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  border: 2px solid var(--color-second);
  background: var(--bgColor-white);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.flight-vtimeline-plane-badge {
  align-self: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bgColor-white);
  border: 2px solid var(--color-gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.flight-vtimeline-time {
  grid-column: 1;
  min-width: 0;
}

.flight-vtimeline-time.flight-vtimeline-dep {
  grid-row: 1;
}

.flight-vtimeline-time.flight-vtimeline-arr {
  grid-row: 3;
  align-self: end;
}

/* Duration sits on the left of the line, same column as the departure/arrival
   times — matching MMT's layout — instead of on the right with the airline text. */
.flight-vtimeline-duration {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  align-self: center;
}

.flight-vtimeline-dep-content {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}

.flight-vtimeline-info {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  align-self: center;
}

.flight-vtimeline-arr-content {
  grid-column: 3;
  grid-row: 3;
  min-width: 0;
  align-self: end;
}

/* Flight Details panel — layover connector between segments. No card/box: same
   border + padding as .flight-segment-card (transparent border) so its "68px
   20px 1fr" grid tracks land in exactly the same place, and the dashed rail
   lines up with the solid rail line in the segment cards above and below it. */
.flight-layover-connector {
  display: grid;
  grid-template-columns: 80px 20px 1fr;
  column-gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  padding: 0 16px;
}

.flight-layover-dash {
  grid-column: 2;
  justify-self: center;
  align-self: stretch;
  width: 2px;
  border-left: 2px dashed var(--color-gray-300);
}

/* ── Itinerary detail card (redesign) ──────────────────────────────────── */

/* One link color for every "open the fare" affordance in this panel — View
   Fare Rules, and the per-segment cabin/fare line — instead of the mix of
   blue and teal the reference UI used for what's functionally the same
   action in two places. */
.flight-fare-link {
  color: var(--color-second);
}

.flight-fare-link:disabled {
  color: var(--color-gray-400);
  cursor: default;
}

/* button:focus below (site-wide) strips the default focus ring with no
   replacement, which leaves every interactive element in this panel —
   the fare-rules link, the leg tabs — with no visible focus at all for a
   keyboard user (WCAG 2.1 AA 2.4.7 Focus Visible). :focus-visible only
   fires for keyboard/programmatic focus, not a mouse click, so this doesn't
   reintroduce a ring on every tap the way the old default outline did. Scoped
   to this panel's own controls rather than reverting the site-wide rule. */
.flight-fare-link:focus-visible,
.flight-leg-tab:focus-visible {
  outline: 2px solid var(--color-second);
  outline-offset: 2px;
}

/* LEIS-920's "Need a summary?" pill — same accent as the fare-rules link
   above (self, not the reference's mixed blue/teal), so a route card only
   ever has one link color for its own text-button affordances. */
.flight-summary-cta {
  color: var(--color-second);
  cursor: pointer;
  align-self: flex-start;
}

.flight-summary-cta:hover {
  text-decoration: underline;
}

.flight-itinerary-header-accent {
  border-left: 3px solid var(--color-second);
}

.flight-itinerary-date-chip {
  background: var(--color-orange-50);
  color: var(--color-orange-800);
  padding: 2px 10px;
  border-radius: 6px;
}

.flight-aircraft-pill {
  border: 1px solid var(--color-gray-300);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--color-text-dark, #3c3c3c);
  white-space: nowrap;
}

/* "No checked baggage included" — amber, not red: it's a fact about the
   fare to plan around, not an error condition. --color-orange-800 is the
   one shade in the orange scale that clears WCAG AA against both white and
   this panel's light background (verified: 7.37:1 / 6.70:1 — orange-600
   and the red-400 used for stop-count badges elsewhere both fail at
   ~3:1 and ~2.9:1, which is why neither is reused here for text). */
.flight-baggage-warning {
  color: var(--color-orange-800);
}

.flight-layover-change {
  color: var(--color-orange-800);
}

/* LEIS-925/928 — the "Know your layover" entry point on each layover row. */
.flight-layover-know-link {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  color: var(--color-first, #2f6271);
  white-space: nowrap;
  cursor: pointer;
}

.flight-layover-know-link:hover {
  text-decoration: underline;
}

.flight-layover-notice-warning {
  color: var(--color-orange-800);
}

.flight-layover-notice-info {
  color: var(--color-blue-600);
}

/* Airport-change: the one high-severity notice — a distinct, darker red
   from the --color-red-400 badges use elsewhere, which fails AA as text
   (verified 2.89:1 / 2.63:1 against white / this panel's background). */
.flight-layover-notice-high {
  color: #E2000B;
  font-weight: 600;
}

/* LEIS-929 — the "Know your layover" banner inside an expanded layover
   block. A quiet callout, not an alert box: near-white background, a
   colored left accent + colored title, body text stays neutral dark gray —
   a full colored background wash was reading as loud/crowded next to the
   rest of this white card. Title colors verified against the near-white
   background below: #B91C1C ~5.9:1, #B45309 ~4.6:1, theme teal ~7.3:1,
   #7E22CE ~6.2:1 — all clear AA (4.5:1). */
.flight-layover-banner {
  border-radius: 6px;
  padding: 8px 12px;
  background: #FAFAFA;
  border-left: 3px solid;
}

.flight-layover-banner__title {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Deliberately a size step above the body, not just bolder — same size +
     weight-only difference read as two lines of running text rather than a
     header and a description. */
  font-size: 0.6875rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.flight-layover-banner__body {
  font-size: 0.625rem;
  line-height: 1.45;
  margin: 0;
  color: var(--color-text-muted, #6b7280);
}

/* `.webNewContent p` in leisure-new-style.css sets 1.15rem on every <p> in the
   page container — same conflict `.flight-fare-same-as` above already
   documents and pins against. The banner's body is a <p>, so it was silently
   winning over every font-size this file set on it regardless of the value,
   which is why nothing above appeared to work. Pinned the same way. */
.webNewContent .flight-layover-banner__title {
  font-size: 0.6875rem !important;
  line-height: 1.3 !important;
}
.webNewContent .flight-layover-banner__body {
  font-size: 0.625rem !important;
  line-height: 1.45 !important;
}

.flight-layover-banner-high {
  border-left-color: #DC2626;
}
.flight-layover-banner-high .flight-layover-banner__title {
  color: #B91C1C;
}

.flight-layover-banner-medium {
  border-left-color: #D97706;
}
.flight-layover-banner-medium .flight-layover-banner__title {
  color: #B45309;
}

/* Theme teal instead of a generic blue — matches the brand color used
   elsewhere (SmartFiltersCard's icon, the search-edit sheet header) rather
   than an unrelated color with no meaning in this app. #2f6271 on #FAFAFA
   is ~7.3:1, well past AA. */
.flight-layover-banner-info {
  border-left-color: var(--color-first, #2f6271);
}
.flight-layover-banner-info .flight-layover-banner__title {
  color: var(--color-first, #2f6271);
}

.flight-layover-banner-purple {
  border-left-color: #9333EA;
}
.flight-layover-banner-purple .flight-layover-banner__title {
  color: #7E22CE;
}

/* LEIS-929 — the collapsed-card chip, ~22px tall per the ticket's own spec.
   Same 4 colors as the expanded-view banner, for one consistent severity
   palette across both surfaces. Wraps rather than truncates on narrow
   screens (AC 12) since it's a flex row inside a full-width block, not a
   fixed-width container. */
.flight-layover-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  border: 1px solid;
  font-size: 0.6875rem;
  font-weight: 600;
  background: none;
  cursor: pointer;
  white-space: normal;
  text-align: left;
}

.flight-layover-chip-high {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #B91C1C;
}

.flight-layover-chip-medium {
  background: #FFFBEB;
  border-color: #FCD34D;
  color: #B45309;
}

.flight-layover-chip-info {
  background: #EFF6FF;
  border-color: #93C5FD;
  color: #1D4ED8;
}

.flight-layover-chip-purple {
  background: #FAF5FF;
  border-color: #D8B4FE;
  color: #7E22CE;
}

.flight-layover-chip__more {
  opacity: 0.75;
  font-weight: 500;
}

/* LEIS-930 — expanded-view banner. Same box shape as .flight-layover-banner
   above (border-left accent, not a full color wash), but its own class since
   it carries a title + separation line + reason list + links, not just a
   title + one paragraph. Level 1 yellow / Level 2 orange / Level 3 red /
   neutral info, per the ticket's B1 severity table. */
.flight-self-transfer-banner {
  border-radius: 8px;
  padding: 10px 14px 12px;
  background: #FAFAFA;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-left-style: solid;
}

.flight-self-transfer-banner__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.flight-self-transfer-banner__icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.flight-self-transfer-banner__title-text {
  font-size: 0.8125rem;
  font-weight: 700;
}

.flight-self-transfer-banner__duration {
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #6b7280);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 9999px;
  padding: 1px 8px;
  margin-left: auto;
}

.flight-self-transfer-banner__body,
.flight-self-transfer-banner__reasons {
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0;
  color: var(--color-text-muted, #6b7280);
}
.flight-self-transfer-banner__reasons {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flight-self-transfer-banner__reasons li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.flight-self-transfer-banner__reason-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.05);
  color: inherit;
  flex-shrink: 0;
}
/* A bare <svg> is inline by default, which leaves a few px of baseline
   descender space beneath it — enough to visibly throw off centering inside
   a small fixed-size badge. display:block removes that phantom gap so the
   icon actually sits centered in its circle. */
.flight-self-transfer-banner__icon-badge svg,
.flight-self-transfer-banner__reason-icon svg,
.flight-self-transfer-link svg {
  display: block;
}

/* Same `.webNewContent p`/`.webNewContent p span` specificity conflict
   documented above for .flight-layover-banner and .flight-review-ref — a <p>
   or a <span> inside a <li> inherits leisure-new-style.css's 1.15rem
   regardless of what this file sets, unless pinned with !important here too. */
.webNewContent .flight-self-transfer-banner__title-text {
  font-size: 0.8125rem !important;
  line-height: 1.3 !important;
}
.webNewContent .flight-self-transfer-banner__body,
.webNewContent .flight-self-transfer-banner__reasons,
.webNewContent .flight-self-transfer-banner__reasons li {
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
}

.flight-self-transfer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-first, #2f6271);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
  padding: 3px 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease;
}
.flight-self-transfer-link:hover {
  background: #fff;
  border-color: var(--color-first, #2f6271);
  text-decoration: none;
}
.flight-self-transfer-link:focus-visible {
  outline: 2px solid var(--color-first, #2f6271);
  outline-offset: 1px;
}

/* Banner background stays the original flat #FAFAFA regardless of severity —
   only the border-left accent and the icon-badge tint carry the severity
   color, not the whole box. */
.flight-self-transfer-banner-yellow {
  border-left-color: #D97706;
}
.flight-self-transfer-banner-yellow .flight-self-transfer-banner__title-text {
  color: #92400E;
}
.flight-self-transfer-banner-yellow .flight-self-transfer-banner__icon-badge,
.flight-self-transfer-banner-yellow .flight-self-transfer-banner__reason-icon {
  background: rgba(217, 119, 6, 0.15);
  color: #92400E;
}

.flight-self-transfer-banner-orange {
  border-left-color: #EA580C;
}
.flight-self-transfer-banner-orange .flight-self-transfer-banner__title-text {
  color: #C2410C;
}
.flight-self-transfer-banner-orange .flight-self-transfer-banner__icon-badge,
.flight-self-transfer-banner-orange .flight-self-transfer-banner__reason-icon {
  background: rgba(234, 88, 12, 0.15);
  color: #C2410C;
}

.flight-self-transfer-banner-red {
  border-left-color: #DC2626;
}
.flight-self-transfer-banner-red .flight-self-transfer-banner__title-text {
  color: #B91C1C;
}
.flight-self-transfer-banner-red .flight-self-transfer-banner__icon-badge,
.flight-self-transfer-banner-red .flight-self-transfer-banner__reason-icon {
  background: rgba(220, 38, 38, 0.15);
  color: #B91C1C;
}

/* Info state (transferType UNKNOWN) — deliberately grey, never one of the
   three self-transfer severity colors, so it can never be mistaken for a
   confirmed warning (guide §7 row 4). */
.flight-self-transfer-banner-neutral {
  border-left-color: #9CA3AF;
}

/* LEIS-930 — result-card chip, same ~22px shape as .flight-layover-chip
   above, for one consistent chip language across both LEIS-929 and 930. */
.flight-self-transfer-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  border: 1px solid;
  font-size: 0.6875rem;
  font-weight: 600;
  background: none;
  cursor: pointer;
  white-space: normal;
  text-align: left;
}

.flight-self-transfer-chip-yellow {
  background: #FFFBEB;
  border-color: #FCD34D;
  color: #92400E;
}

.flight-self-transfer-chip-orange {
  background: #FFF7ED;
  border-color: #FDBA74;
  color: #C2410C;
}

.flight-self-transfer-chip-red {
  background: #FEF2F2;
  border-color: #FCA5A5;
  color: #B91C1C;
  cursor: default; /* the airport-change chip is a <span>, not a button */
}

@media (max-width: 767.98px) {
  .flight-itinerary-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .flight-itinerary-header > div:last-child {
    align-items: flex-start !important;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

button:focus {
  box-shadow: none !important;
}

.payment-mode-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* Sits just below the site header (~68px), matching the SRP filter sidebar
   fix below — the previous 120px offset left a big empty gap above the
   Price Breakup card once it stuck to the top on scroll. */
.sticky-payment-summary .position-sticky.top-0 {
  top: 68px !important;
}

/* SRP filter sidebar — sits just below the site header (~68px) so it lines up
   with where the flight results start, rather than a wider 120px offset that
   left a big empty gap above "Filters". */
.sticky-filter-sidebar.position-sticky.top-0 {
  /* Header + the sticky search bar, both measured at runtime and published by
     FlightSearchStickyBar. The old flat 68px was the header alone, so once the
     search bar arrived this column started underneath it and its own "Filters"
     heading was hidden. The literal stays as the pre-measurement fallback. */
  top: calc(var(--flight-chrome-h, 62px) + 6px) !important;
  align-self: flex-start;
}

/* Support reference on the flight-review error screen.
   `.webNewContent p span` in leisure-new-style.css sets 1.15rem on any span
   inside a paragraph, which rendered the reference code larger than the
   sentence introducing it. Both halves are pinned here. */
.webNewContent .flight-review-ref,
.webNewContent .flight-review-ref span {
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
}

.webNewContent .flight-review-ref span {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The scrolling panel inside that column: the standard tall-sticky treatment,
   a fixed cap plus internal scrolling. The height never changes — anything
   that resizes it per scroll position makes the box visibly breathe as you
   scroll.

   max-height MUST derive from the same `--flight-chrome-h` the panel's own
   `top` (set inline in FlightFilterSidebar.tsx: `calc(var(--flight-chrome-h,
   68px) + 6px)`) uses — not a flat guess. This used to be a hardcoded 88px
   (a stand-in for "68px header + 20px bottom gap", i.e. header alone), but
   `--flight-chrome-h` is header height PLUS the sticky search bar row
   (FlightSearchStickyBar.tsx), which on a real page is well over 88px. Once
   `top` sits lower than this box assumed, `top + max-height` runs past
   100vh: the panel's own bottom edge — and whatever sections render near it
   — is pushed below the actual viewport, rendered but literally
   unreachable. Not by the panel's own overflow (that only reveals more
   *within* the box's already-fixed height, it can't relocate the box), and
   not by the page's scroll either, since the panel is stuck in place once
   sticky. The 26px below is the same 6px gap `top` adds plus a 20px bottom
   margin, so the panel's bottom edge lands exactly 20px above the viewport
   bottom regardless of how tall the real chrome measures.

   Always scrollable, not gated behind a JS-measured "pinned" class — that
   used to lock overflow to `hidden` until a bounding-rect check reported the
   panel had reached its sticky offset. That measurement (rAF-scheduled,
   resize-observed) could land a frame late or miss a state entirely once the
   panel's own content height changed — e.g. Smart Filters and Applied
   Filters adding sections above "Stops" — leaving the panel stuck at
   `overflow-y: hidden` with no fallback. `auto` from the start removes that
   failure mode: nested-scroll chaining (standard browser behavior, nothing
   to opt into) hands the wheel to the page once the panel's own scroll is
   exhausted, which is what the JS measurement was approximating in the first
   place. A reserved scrollbar gutter keeps the contents from shifting when a
   scrollbar appears. */
.flight-filter-panel {
  max-height: calc(100vh - var(--flight-chrome-h, 68px) - 26px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Airlines filter: the generic .filter-flight-accordion .card cap (250px) is
   too short once the search box is added on top of the 6 collapsed rows — the
   "+ N more" toggle ends up scrolled out of the little box. Give this one
   section room for search + 6 rows + the toggle without an inner scroll. */
#airlinesFilterAccordion .card {
  max-height: 360px;
}

/* "Flight selection view" toggle at the top of the filter sidebar (round
   trip only — see FlightFilterSidebar's viewMode prop). A two-segment
   control rather than the shared .buttons/.btnColor-* pill, so it reads as
   one connected switch the way MMT's own "Individual/Combined" control
   does, not two separate buttons sitting side by side. */
.flight-view-mode-toggle {
  border: 1px solid #d9dde2;
  border-radius: 8px;
  overflow: hidden;
}

.flight-view-mode-btn {
  flex: 1 1 0;
  padding: 8px 10px;
  border: none;
  background: var(--color-white);
  color: var(--color-dark);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.flight-view-mode-btn + .flight-view-mode-btn {
  border-left: 1px solid #d9dde2;
}

.flight-view-mode-btn.active {
  background: var(--color-second);
  color: var(--color-white);
}

/*multicity and round trip css start */
.flight-card:has(input[type="radio"]:checked),
.flight-fare-box:has(input[type="radio"]:checked),
.booking-form-section .flight-fare-box .form-check-input[type="radio"]:checked {
  border-color: var(--color-second) !important;
}

.booking-form-section .flight-fare-box .form-check-input[type="radio"] {
  border-color: var(--color-gray) !important;
}

.md-position-absolute {
  position: absolute;
  top: 20px;
  right: 15px;
}

.flight-select-card input:is(:checked)+label {
  background-color: #fdf2f8 !important;
  border-color: var(--color-second) !important;
  color: var(--color-second) !important;
}

.round-trip-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0px;
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transform: translateY(120%);
  transition: all .25s ease;
  pointer-events: none;
}

.round-trip-sticky-bar.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.round-trip-sticky-shell {
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 18px 18px 0 0;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  position: relative;
  overflow: hidden;
}

.round-trip-sticky-shell::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  backdrop-filter: blur(8px);
}

.round-trip-sticky-items {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.round-trip-sticky-item {
  flex: 1;
  padding: 0 14px 0 0;
  border-right: 1px solid rgb(76 76 76 / 18%);
  display: flex;
}

.round-trip-sticky-item:last-child {
  border-right: 0;
  padding-right: 0;
}

.round-trip-sticky-logo {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  padding: 7px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: var(--bgColor-white, #fff);
  flex-shrink: 0;
}

/* Airline logo "chip" — every carrier's PNG (served from S3) is a uniform
   70x70 square, but border-radius directly on the <img> clips content that sits
   close to the corners. A fixed box + inset padding + object-fit:contain keeps
   every logo the exact same size, fully visible, and never stretched/cropped. */
.flight-airline-logo {
  box-sizing: border-box;
  width: 55px;
  height: 55px;
  padding: 6px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #e4e8ef;
  background: var(--bgColor-white, #fff);
  flex-shrink: 0;
}

.round-trip-sticky-route {
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  margin-bottom: 8px;
}

.round-trip-sticky-meta {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  line-height: 1.35;
}

.round-trip-sticky-fare {
  color: var(--color-text-black);
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 8px;
}

.round-trip-sticky-item-empty {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  min-height: 46px;
  display: flex;
  align-items: center;
}

.round-trip-sticky-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.round-trip-sticky-total {
  color: var(--color-white);
  text-align: right;
}

.round-trip-sticky-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid 1px solid rgb(0 0 0 / 18%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-content);
  background: transparent;
  transition: transform .2s ease;
}

/* .round-trip-sticky-shell.is-collapsed .round-trip-sticky-items {
    display: none;
  } */

.round-trip-sticky-shell .round-trip-sticky-toggle svg,
.round-trip-sticky-shell:has(.fare-details-section.collapse) .round-trip-sticky-toggle svg {
  transform: rotate(180deg);
  transition: transform .2s ease;
}

.round-trip-sticky-shell.is-collapsed .round-trip-sticky-toggle svg,
.round-trip-sticky-shell:has(.fare-details-section.collapse.show) .round-trip-sticky-toggle svg {
  transform: rotate(0deg);
  transition: transform .2s ease;
}

/* Was a rigid 244px. Fare names like "Main Cabin Flexible" then had to wrap in
   a card that was leaving whitespace on either side whenever a flight offered
   only two or three tiers. Growing from the same 244px basis up to 320px lets
   those cards use the room the modal already has, while a long fare list still
   falls back to the basis and scrolls in .table-responsive as before. */
#view-fareModal .flex-price-col {
  flex: 1 1 244px !important;
  max-width: 320px !important;
}

#view-fareModal .nav-tabs.flight-nav-tabs.custom-tabs.overflow-x-auto .nav-item .nav-link.active {
  background-color: #fdf2f8;
  border-color: #f45d6b;
  color: #f45d6b;
}

.fare-details-section {
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
  overflow-x: hidden;
}

.round-trip-sticky-bar .fare-details-section .flight-legs-tabs .nav-link.active {
  background-color: var(--color-first) !important;
  color: var(--color-white) !important;
  border-color: var(--color-first) !important;
}

.round-trip-sticky-bar .fare-details-section .flight-legs-tabs .nav-link.active span {
  color: var(--color-white) !important;
}

.fare-class-tab .nav-link.active {
  background-color: #e9fbff !important;
  border-color: var(--color-first) !important;
  color: var(--color-black);
}

.fare-class-tab .nav-link.active span {
  color: var(--color-black) !important;
}

.flight-w-20 {
  min-width: 18.5%;
  width: 18.5%;
  max-width: 18.5%;
  text-wrap: wrap;
}

.flight-w-10 {
  min-width: 10%;
  width: 10%;
  max-width: 10%;
  text-wrap: wrap;
}

.flight-d-card .text-sm {
  font-size: 14px;
}

.toggle-text-btn[aria-expanded="true"] .flight-card-chevron {
  transform: rotate(180deg);
}

.filterMobButton {
  z-index: 99;
}

.flight-card .flight-card-extra-info .flight-cards-sections .filter-checkbox-buttons .select-toggle-text {
  min-width: 78px;
}

/*multicity and round trip css end */

.flight-search-loader {
  height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.plane-wrapper {
  position: relative;
  width: 300px;
  height: 80px;
  margin-bottom: 30px;
}

.plane-main {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: planeMove 1.2s infinite ease-in-out;
}

.plane-main img {
  width: 100%
}

@keyframes planeMove {
  0% {
    transform: translate(-50%, -50%) translateX(-7px);
  }

  50% {
    transform: translate(-50%, -50%) translateX(7px);
  }

  100% {
    transform: translate(-50%, -50%) translateX(-7px);
  }
}

.speed-line {
  position: absolute;
  height: 3px;
  background: #bbb;
  left: -30%;
  border-radius: 2px;
  animation: speed 1s infinite linear;
}

.speed-line.line1 {
  width: 60px;
  top: 28px;
}

.speed-line.line2 {
  width: 80px;
  top: 38px;
  animation-delay: .2s;
}

.speed-line.line3 {
  width: 50px;
  top: 48px;
  animation-delay: .4s;
}

@keyframes speed {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(80px);
  }
}

@media screen and (max-width: 1200px) {
  .flight-w-20 {
    min-width: 10%;
    width: 10%;
    max-width: 10%;
    text-wrap: wrap;
  }

  .flight-w-10 {
    min-width: 12.5%;
    width: 12.5%;
    max-width: 12.5%;
    text-wrap: wrap;
  }

  .flight-d-card .text-sm {
    font-size: 13px;
  }
}

@media screen and (min-width: 767px) {
  .border-md-none {
    border: none !important;
  }
}

@media screen and (max-width: 991px) {
  .sticky-payment-summary .position-sticky.top-0 {
    top: 170px !important;
  }
}

@media (max-width: 991.98px) {
  .flight-card-actions {
    align-items: flex-start !important;
  }
}

@media (max-width: 767.98px) {
  .flight-card-toggle {
    width: 100%;
  }

  .flight-card-link-btn {
    justify-content: center;
  }

  .flight-fare-points li {
    font-size: 0.875rem;
  }
}

@media only screen and (max-width: 768px) {
  .flight-search-loader {
    padding: 15px
  }

  .plane-wrapper {
    width: 200px;
  }
}

@media only screen and (max-width: 767px) {
  .flight-search-loader {
    padding: 15px
  }

  .plane-wrapper {
    width: 200px;
  }


  .md-position-absolute {
    position: absolute !important;
    top: 20px;
  }

  .round-trip-sticky-shell {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .round-trip-sticky-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .round-trip-sticky-summary {
    width: 100%;
    justify-content: space-between;
  }

  .round-trip-sticky-total {
    text-align: left;
  }

  .flight-w-20,
  .flight-w-10 {
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    text-wrap: wrap;
    margin-bottom: 4px;
  }

  .flight-w-20 .text-xs,
  .flight-w-10 .text-xs {
    font-size: 13px !important;
  }
}

/*
 * SRP flight-card price.
 *
 * Two things had to be true for this to render correctly, and only one of them
 * was.
 *
 * The wrap: a price is one unbroken run of characters with no natural break
 * point, and the column it sits in has a fixed width (Bootstrap's col-md-2)
 * that never grows. Without `overflow-wrap`, a big enough total spilled
 * straight through the column's left border into the flight details beside it.
 *
 * The size: the span also carries `.mainHeading`, and leisure-new-style.css
 * sets `.webNewContent .mainHeading { font-size: 2rem }` — two classes to the
 * one this rule used to have, so it lost, and the price had been rendering at
 * 2rem all along. At that size any price of eight characters or more is wider
 * than the column, so the wrap above did exactly what it was asked to and
 * broke the number itself: "+$138.30" came out as "+$138.3" with a lone "0"
 * beneath it.
 *
 * Matching that specificity is what finally applies the intended size — and
 * winning the resulting tie on order, since flights.css loads after
 * leisure-new-style.css. Every realistic price now fits on one line, which
 * returns the wrap to being what it was meant to be: a guard against overflow
 * rather than something that happens routinely.
 */
.webNewContent .flight-price-amount {
  font-size: 1.5rem;
  /* Prices are read down a column of cards, so the digits line up instead of
     shifting position with each row's value. */
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * The round-trip sticky bar keeps the larger figure.
 *
 * It never had the wrapping problem — it is a wide summary area, not a narrow
 * card column — and it carries the committed trip total rather than one option
 * among many, so it should stay the most prominent price on the screen.
 */
.webNewContent .round-trip-sticky-total .flight-price-amount {
  font-size: 2rem;
}

/* Flight booking-details page labels (booking reference, trip summary,
   itinerary captions, "Need help?" body copy). The shared .color-text-gray
   utility (--color-gray-2, #bab6ba) is ~2:1 contrast against this page's
   white cards — well under WCAG AA's 4.5:1 for normal text, and read as
   washed-out/hard to read. Not fixed by changing .color-text-gray itself:
   that utility is shared across ~25 files site-wide, including hotel pages
   this fix has no business touching. #5f6b7a is ~5.4:1 against white. */
.flight-detail-label {
  color: #5f6b7a !important;
}

/* Return-step price card: the full round-trip total, once the main figure is
   the price DIFFERENCE instead. #5f6b7a on #F3F4F6 is 4.93:1, still AA. */
.flight-price-secondary {
  /* No white-space: nowrap — the previous version forced this pill to a
     fixed width wider than its narrow price column, so it overflowed
     sideways and sat on top of the arrival airport code next to it. Letting
     it wrap keeps it inside its own column, at the cost of two lines on the
     narrowest cards. */
  color: #5f6b7a;
  background: #F3F4F6;
  border-radius: 8px;
  padding: 4px 10px;
  line-height: 1.4;
  max-width: 100%;
  text-align: end;
}

/* ── Fare modal: the card, and what it becomes on a phone ──────────────── */

/* Radio, name and price on one line. On desktop the price wraps to its own
   row beneath the name, which is what the column layout has always shown. */
.flight-fare-box__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.flight-fare-box__name {
    flex: 1 1 auto;
    /* Without this a long fare name sets the column's width instead of
       wrapping inside it. */
    min-width: 0;
}

.flight-fare-box__price {
    flex: 1 1 100%;
    display: block;
}

.flight-fare-box.is-selected {
    border-color: var(--color-second) !important;
    box-shadow: 0 0 0 1px var(--color-second);
}

.flight-fare-more,
.flight-fare-rules {
    display: block;
    margin-inline: auto;
}

/* The fare price already sits on every card at this width, so repeating it in
   the footer would be the same number twice on one screen. */
.flight-fare-actions__total {
    display: none;
}

/* `.flight-fare-more` only exists to reveal groups the phone layout hides, so
   there is nothing for it to do at a width that shows them all. */
.flight-fare-more {
    display: none;
}

@media (max-width: 575.98px) {
    /*
     * Fares stack and the modal scrolls, instead of the row scrolling
     * sideways.
     *
     * At 375px a 244px column shows one and a half cards, so comparing fares
     * meant dragging a horizontal scroller inside a vertical one — a gesture
     * people routinely miss entirely, which is how a four-fare flight reads as
     * a one-fare flight.
     */
    #view-fareModal .table-responsive,
    .modal-class .table-responsive {
        flex-direction: column;
    }

    #view-fareModal .flex-price-col,
    .modal-class .flex-price-col {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        width: 100%;
    }

    /* Left-aligned: a centred card reads fine as a column and badly as a row,
       where the eye wants one edge to run down. */
    .flight-fare-box {
        text-align: start;
    }

    /* The price joins the name's row rather than taking one of its own. Two
       stacked cards then put both names and both prices within a thumb's
       reach of each other, which is the comparison being made. */
    .flight-fare-box__head {
        flex-wrap: nowrap;
        align-items: center;
        margin-bottom: 10px;
    }

    .flight-fare-box__price {
        flex: 0 0 auto;
        text-align: end;
        white-space: nowrap;
    }

    .flight-fare-box__price .text-xxl {
        font-size: 1.25rem;
    }

    /* Reveals the groups hidden by `firstGroupOnly` — see FlightFareCard. */
    .flight-fare-more {
        display: block;
        margin-inline: 0;
    }

    .flight-fare-rules {
        margin-inline: 0;
    }

    /* The badge overlaps the top border on a full-width card; pulled inside so
       it cannot collide with the radio now sitting at the start of the row. */
    .flight-fare-badge {
        position: static;
        /* The base rule centres it with `left: 50%` + a translate; leaving the
           transform on would shift a now-static badge half its width left. */
        transform: none;
        display: inline-block;
        margin-bottom: 8px;
    }

    /* The heading runs to four lines at this width and costs a quarter of the
       viewport before a single fare is visible. */
    .modal-class .subHeading {
        font-size: 1.125rem;
        line-height: 1.3;
    }

    /*
     * Continue, pinned to the bottom of the scrolling modal.
     *
     * Sticky rather than fixed: it belongs to the modal, not the viewport, so
     * it stays inside the rounded corners and cannot outlive the modal being
     * dismissed.
     */
    .flight-fare-actions {
        position: sticky;
        bottom: 0;
        z-index: 2;
        gap: 12px;
        margin-top: 8px;
        padding-bottom: 12px;
        background: var(--color-white);
    }

    .flight-fare-actions__total {
        display: flex;
        flex-direction: column;
        /* Pushes Continue to the far edge, and survives the error message
           claiming `me-auto` when a leg is unpicked. */
        margin-inline-end: auto;
        line-height: 1.2;
    }

    .flight-fare-actions__amount {
        font-family: var(--font-family-inter);
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--color-text-black, #13253a);
    }

    .flight-fare-actions__unit {
        font-family: var(--font-family-inter);
        font-size: 0.6875rem;
        color: var(--color-grey, #7c7c7c);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
}

/*
 * The Fare Benefits panel, on a phone.
 *
 * Its inline styles set `min-width: 400px` and `max-width: 460px`, which is
 * wider than a 375px screen — so the panel hung off the edge with its right
 * column unreachable. Overridden rather than made responsive inline, because
 * the numbers are right everywhere the pointer is a mouse.
 *
 * The 24px is the gutter it should keep on both sides; `position: fixed`
 * ancestors are not involved, so viewport units are the honest measure here.
 */
@media (max-width: 575.98px) {
    [data-amenity-panel] {
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        width: calc(100vw - 24px) !important;
        max-height: 70vh !important;
        padding: 12px !important;
    }

    /* The two-column amenity grid gets ~150px per column at this width, which
       breaks "Complimentary Beverages" across three lines. One column reads
       as a list instead of a crossword. */
    [data-amenity-panel] .amenity-grid,
    [data-amenity-panel] [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}