/* «Авиабилеты» — вид 1c «Лучшие варианты». Значения — токены `tokens.css`, общие классы
 * (ступени цены `fs-t*`, переключатель `fs-seg`) — в `flightsearch.css`. */

/* --- 1c: лучшие варианты --------------------------------------------------- */

.fs-filters {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--s7);
  width: 248px;
  padding: var(--s7);
  background: var(--card);
  border-right: 1px solid var(--edge-card);
}
.fs-fgrp {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.fs-crow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 28px;
  font: 500 var(--t-13) / 1 var(--sans);
  color: var(--ink);
  cursor: pointer;
}
.fs-crow input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ink);
}
.fs-crow .soft {
  font-size: var(--t-11);
}
.fs-lst {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
  min-height: 0;
  padding: var(--s6) var(--s8) 0;
}
.fs-lst > .row .soft {
  font-size: var(--t-12);
}
.fs-strip {
  display: grid;
  flex: none;
  grid-template-columns: repeat(var(--fs-cols), minmax(0, 1fr));
  gap: var(--s1);
}
.fs-sd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2) 2px var(--s2);
  border: 1px solid var(--edge-card);
  border-radius: var(--r2);
  background: var(--card);
  cursor: pointer;
}
.fs-sd.is-busy {
  background: var(--warn-bg);
  border-color: var(--warn-edge);
}
.fs-sd.is-on {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.fs-sd .fs-wdl {
  width: auto;
}
.fs-sdk {
  font: 400 var(--t-10) / 1 var(--sans);
  color: var(--ink-4);
}
.fs-lhead,
.fs-rk {
  display: grid;
  grid-template-columns: 30px 168px 128px minmax(0, 1fr) 90px 70px 104px;
  align-items: center;
  gap: var(--s5);
  padding: 0 var(--s6) var(--s2);
}
.fs-lhead {
  flex: none;
  border-bottom: 1px solid var(--edge-card);
}
.fs-rows {
  flex: 1;
  min-height: 0;
  margin: 0 calc(-1 * var(--s8));
  padding: 0 var(--s8) var(--s7);
}
.fs-rk {
  min-height: 52px;
  padding: var(--s2) var(--s6);
  border-bottom: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
}
.fs-rk:hover {
  background: var(--sunken);
}
.fs-rk.is-on {
  background: var(--accent-soft);
  border-bottom-color: transparent;
}
.fs-rk .col {
  gap: var(--s1);
}
.fs-rnk {
  font: 600 var(--t-12) / 1 var(--mono);
  color: var(--ink-4);
}
.fs-kind {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 20px;
  padding: 0 var(--s2);
  border: 1px solid var(--edge);
  border-radius: var(--r1);
  font: 500 var(--t-12) / 1 var(--sans);
  color: var(--ink-2);
  white-space: nowrap;
}
.fs-kind.is-via {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-hover);
}
.fs-rt {
  overflow: hidden;
  font: 500 var(--t-13) / 1.2 var(--mono);
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fs-rt.is-thin {
  font-weight: 400;
}
.fs-rs {
  overflow: hidden;
  font: 400 var(--t-11) / 1.2 var(--sans);
  color: var(--ink-4);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fs-rs.is-busy {
  color: var(--warn-ink);
}
.fs-rcity {
  font: 500 var(--t-13) / 1.2 var(--sans);
}
.fs-rtot {
  font: 600 var(--t-15) / 1 var(--mono);
  color: var(--ink);
  text-align: right;
}
.fs-rdiff {
  font: 500 var(--t-12) / 1.2 var(--sans);
  color: var(--ink-4);
}
.fs-rdiff.is-best {
  color: var(--accent);
}
.fs-exp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s5);
  padding: 2px var(--s6) var(--s6) 56px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-border);
}
.fs-exp .fs-leg {
  padding: 0;
  border-bottom: 0;
}
.fs-exp .fs-fl.is-on {
  background: var(--card);
  border-color: var(--accent);
}
.fs-expfoot {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: var(--s3);
  font: 500 var(--t-13) / 1 var(--mono);
  color: var(--ink-2);
}