/* Сбор отелей этапа: кнопка «Сбор» в полосе раздела и ящик под полосой.
 *
 * Вид — макет «Сбор отеля» (claude.ai/design, проект 1ae3c447), нарисованный
 * на классах раздела: переключатель `.hs-seg`, подложка `.hs-tray`, точка `.hs-dot`,
 * галка `.hs-check`, ряд `.hs-sieve-row`. Здесь только то, чего у раздела нет.
 * Классы ящика — с приставкой `hs-collect-`: у Tripbox уже есть свои `.drawer`
 * и `.card`, и голые имена из макета перебили бы их на чужих экранах.
 *
 * Значения — токенами. Число означает, что токена нет, и тогда оно объяснено рядом.
 * Здесь каркас: кнопка, ящик, общие части; содержимое — `hotelsearch-collect-body.css`.
 */

/* Ящик отмеряется от раздела: кладётся под полосу (`--hs-bar`) и до низа окна.
 * Без точки отсчёта на `.hs-root` он отмерялся бы от окна и накрыл бы полосу,
 * а в ней кнопка «Сбор» говорит, что с прогоном, пока ящик открыт. */
.hs-root {
  position: relative;
  /* Ящик шире панели точки проката (492): в нём форма опроса и строки трёх
   * сайтов со ссылкой, и на 400 подписи галок отзывов ломались в три строки. */
  --hs-collect-width: 520px;
  /* Ход на кнопке — словами сервера («Agoda, выдача: 98 из 714», 26 знаков);
   * длиннее — многоточием, а не ценой этапа и сбора слева. */
  --hs-collect-face: 34ch;
  /* Столбец имени сайта: «Booking.com» полужирным в 13 px — 84 px. */
  --hs-collect-site: 96px;
  /* Кружок шага: на ступень крупнее знака спрайта, чтобы в нём читалась галка 10 px. */
  --hs-collect-mark: 18px;
}

/* --- кнопка в полосе ------------------------------------------------------ */

.hs-collect {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  flex: 0 1 auto;
  min-width: 0;
  max-width: var(--hs-collect-face);
  height: var(--control);
  padding: 0 var(--s5);
  border: 1px solid var(--accent);
  border-radius: var(--r2);
  background: var(--accent-soft);
  color: var(--accent-hover);
  font: 600 var(--t-13) / 1 var(--sans);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.hs-collect:hover {
  background: var(--accent-tint);
}

.hs-collect.is-wait {
  border-color: var(--warn-edge);
  background: var(--warn-bg);
  color: var(--warn-deep);
}

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

.hs-collect > .hs-dot,
.hs-collect-line > .hs-dot {
  margin-right: 0;
}

/* Точка «идёт» — акцентом: «есть» и «под вопросом» у точек раздела уже заняты
 * зелёным и янтарём, а идущий прогон — не итог, а действие. */
.hs-dot.is-live {
  background: var(--accent);
}

/* --- ящик ---------------------------------------------------------------- */

/* Выше панели отеля (15) и окна отбора (20) — ящик закрывает сцену целиком, —
 * но ниже меню полосы (25): выбрать другой этап можно и при открытом ящике. */
.hs-collect-wrap {
  position: absolute;
  z-index: 22;
  inset: var(--hs-bar) 0 0 0;
}

.hs-collect-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  animation: fade var(--dur) var(--ease);
}

.hs-collect-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--hs-collect-width);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-left: 1px solid var(--edge);
  box-shadow: var(--sh-panel);
  animation: hs-slide var(--dur) var(--ease);
}

.hs-collect-top {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex: none;
  padding: var(--s7) var(--s8);
  border-bottom: 1px solid var(--line);
}

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

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

.hs-collect-body {
  display: flex;
  flex-direction: column;
  gap: var(--s7);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s7) var(--s8);
}

.hs-collect-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5);
  flex: none;
  padding: var(--s6) var(--s8);
  border-top: 1px solid var(--line);
}

/* Отказ — во всю ширину над кнопками: «идёт другой сбор — дождитесь его или
 * остановите» в строку с «Собрать» не входит. Тоном тревоги: действие не случилось. */
.hs-collect-foot .hs-collect-warn {
  flex-basis: 100%;
  color: var(--alarm);
}

/* --- части ---------------------------------------------------------------- */

.hs-collect-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex: none;
  padding: var(--s5) var(--s6);
  border: 1px solid var(--edge-card);
  border-radius: var(--r2);
}

.hs-collect-card.is-warn {
  background: var(--warn-bg);
  border-color: var(--warn-edge);
  color: var(--warn-deep);
}

.hs-collect-card.is-ok {
  background: var(--ok-bg);
  border-color: var(--ok-edge);
}

.hs-collect-line {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.hs-collect-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

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

.hs-collect-warn {
  color: var(--warn-ink);
}

.hs-collect-ink {
  color: var(--ink-2);
}

.hs-collect-field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}

.hs-collect-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}

.hs-collect-label {
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--ink-2);
}

.hs-collect-hint {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--warn-edge);
  border-radius: var(--r1);
  background: var(--warn-bg);
  color: var(--warn-deep);
}

.hs-collect-intro {
  padding: var(--s4) var(--s5);
  border-radius: var(--r2);
  background: var(--sunken);
  color: var(--ink-2);
}

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