/* «Авиабилеты» — полоса выбора (поездка, перелёт, сборы) и строка запроса.
 * Значения — токены `tokens.css`. */

/* Полоса — как у подбора отеля: поездка, её перелёты капсулами, ниже — сборы. */
.fs-strip {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4) var(--s8);
  background: var(--card);
  border-bottom: 1px solid var(--edge-card);
}
.fs-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.fs-trip {
  height: var(--control);
  max-width: 260px;
  padding: 0 var(--s4);
  border: 1px solid var(--edge);
  border-radius: var(--r2);
  background: var(--field);
  font: 600 var(--t-14) / 1 var(--sans);
  color: var(--ink);
}
.fs-flights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  min-width: 0;
}
.fs-sbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  height: 30px;
  padding: 0 var(--s4);
  border: 1px solid var(--edge);
  border-radius: var(--r2);
  background: var(--card);
  font: 500 var(--t-13) / 1 var(--sans);
  color: var(--ink-2);
  cursor: pointer;
}
.fs-sbtn:hover {
  border-color: var(--accent-border);
}
.fs-sbtn.is-on {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 600;
}
.fs-sbtn .soft {
  font-size: var(--t-11);
}
.fs-qline {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: var(--s5);
  padding: var(--s5) var(--s8) var(--s3);
  background: var(--paper);
}
.fs-qtitle {
  font: 600 var(--t-19) / 1.2 var(--sans);
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.fs-qtext {
  overflow: hidden;
  font: 400 var(--t-14) / 1.3 var(--sans);
  color: var(--ink-3);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fs-nowrap {
  white-space: nowrap;
}