/* Содержимое ящика «Сбор»: где искать, год, галки, выбор районов, ход прогона.
   Отдельным файлом от каркаса (`hotelsearch-collect.css`): вместе они переваливали
   за четыреста строк, а правятся порознь — каркас под макет, содержимое под шаги. */

/* --- где искать ----------------------------------------------------------- */

.hs-collect-sites {
  overflow: hidden;
  border: 1px solid var(--edge-card);
  border-radius: var(--r2);
}

.hs-collect-site + .hs-collect-site {
  border-top: 1px solid var(--line);
}

.hs-collect-site.is-open {
  background: var(--sunken);
}

.hs-collect-site-row {
  display: grid;
  grid-template-columns: var(--hs-mark) var(--hs-collect-site) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s4);
  padding: var(--s4) var(--s5);
}

.hs-collect-site-name {
  font-weight: 600;
}

.hs-collect-site-city {
  display: flex;
  flex-direction: column;
  gap: var(--hair);
  min-width: 0;
}

.hs-collect-site.is-off :is(.hs-collect-site-name, .hs-collect-site-city) {
  opacity: 0.45;
}

.hs-collect-note {
  font-size: var(--t-12);
  color: var(--ink-4);
}

/* Подложка встаёт под столбец города: своя ссылка заменяет именно его. */
.hs-collect-site-more {
  padding: 0 var(--s5) var(--s5)
    calc(var(--s5) + var(--hs-mark) + 2 * var(--s4) + var(--hs-collect-site));
}

.hs-check input:disabled {
  cursor: default;
}

/* Свой год — рядом с переключателем: четыре ответа и своё значение в строку
 * с подписью не входят. */
.hs-collect-line > .hs-seg {
  margin-left: 0;
}

.hs-collect-year {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink-4);
}

.hs-collect-year input {
  width: 8ch;
  height: var(--hs-chip);
  padding: 0 var(--s3);
  border: 1px solid var(--edge);
  border-radius: var(--r2);
  background: var(--field);
  font: 400 var(--t-13) / 1 var(--mono);
  color: var(--ink);
}

.hs-collect-year.is-on input {
  border-color: var(--ink);
  background: var(--card);
}

.hs-collect-year input:focus-visible {
  outline: 2px solid var(--accent-border);
  outline-offset: 1px;
}

/* Галки отзывов — столбиком: у каждой пояснение, в строку они не помещаются. */
.hs-collect-checks {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.hs-collect-checks .hs-check {
  align-items: flex-start;
  line-height: 1.35;
}

.hs-collect-checks .hs-check input {
  flex: none;
  margin-top: 1px;
}

/* Выбор с пояснением: залы, пояса, районы. Строкой-карточкой, а не голой галкой:
 * у каждого ответа своя цена, и она стоит в той же строке. */
.hs-collect-choice {
  display: grid;
  grid-template-columns: var(--hs-mark) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--edge);
  border-radius: var(--r1);
  background: var(--card);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.hs-collect-choice:hover {
  border-color: var(--accent-border);
}

.hs-collect-choice.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.hs-collect-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent-border);
  outline-offset: 1px;
}

.hs-collect-choice input {
  margin: var(--hair) 0 0;
  accent-color: var(--accent);
}

.hs-collect-choice .col {
  gap: var(--hair);
  min-width: 0;
}

.hs-collect-nums {
  white-space: nowrap;
}

.hs-collect-zones,
.hs-collect-opinion {
  font-size: var(--t-12);
  line-height: 1.45;
  color: var(--ink-3);
}

.hs-collect-pager {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

/* --- ход ------------------------------------------------------------------ */

.hs-collect-steps {
  display: flex;
  flex-direction: column;
}

.hs-collect-step {
  display: grid;
  grid-template-columns: calc(var(--hs-collect-mark) + var(--s1)) minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line-soft);
}

.hs-collect-step:last-child {
  border-bottom: 0;
}

.hs-collect-step .col {
  gap: var(--hair);
  min-width: 0;
}

.hs-collect-step.is-now .hs-collect-step-name,
.hs-collect-step.is-cut .hs-collect-step-name {
  font-weight: 600;
}

.hs-collect-step.is-wait .hs-collect-step-name {
  color: var(--ink-3);
}

.hs-collect-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--hs-collect-mark);
  height: var(--hs-collect-mark);
  margin-top: 1px;
  border-radius: var(--r-pill);
}

.hs-collect-mark.is-done {
  background: var(--ok-bg);
  color: var(--ok-ink);
}

/* Кольцо идущего — тем же акцентом на ступень светлее рамки: в макете это свой
 * оттенок (#e1e8fb), здесь — ближайший из шкалы акцента, а не новый цвет. */
.hs-collect-mark.is-now {
  background: var(--accent);
  box-shadow: 0 0 0 var(--s1) var(--accent-tint);
}

.hs-collect-mark.is-cut {
  border: 1.5px solid var(--stale);
  background: var(--warn-bg);
}

.hs-collect-mark.is-wait {
  border: 1.5px solid var(--faint);
}

.hs-collect-track {
  display: block;
  height: var(--s1);
  margin-top: var(--s2);
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--band);
}

.hs-collect-track > span {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* --- итог ----------------------------------------------------------------- */

.hs-collect-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}

.hs-collect-stats .col {
  gap: var(--hair);
  min-width: 0;
}

.hs-collect-big {
  font-size: var(--t-22);
  font-weight: 600;
  letter-spacing: var(--track-tight);
}