/* ============================================================
   Главная v13 — поле поиска и панель подсказки.
   Значения из docs/mockup/Main.dc.html (десктоп) и Mobile.dc.html
   (телефон: подсказка занимает весь экран, а не панель под полем,
   иначе клавиатура закрывает список).
   ============================================================ */

.hv13-search__field--q { position: relative; }

/* Кнопка-поле: выглядит как ячейка строки поиска */
.hv13-q {
  display: flex;
  flex-direction: column;
  /* К верху, как и соседние поля: иначе подпись центрируется внутри
     кнопки и оказывается ниже подписей дат и гостей. */
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  /* Отступы уже заданы ячейке .hv13-search__field — второй раз их
     давать нельзя, иначе подпись уезжает ниже соседних полей. */
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--hv13-sans);
  text-align: left;
  cursor: pointer;
}

/* flex: none — иначе в колонке фиксированной высоты значение сжималось
   до 17px и низ букв срезался (телефон) */
.hv13-q__val { display: block; flex: none; max-width: 100%; }
/* То же для подписи: иначе сжималась уже она и срезался верх «КУДА ЕДЕМ» */
.hv13-q > * { flex: none; }

/* Подпись длиннее, чем у соседних полей («Регион, объект или
   подборка»), поэтому полю нужен запас ширины — в макете у него
   flex 1.15 против 1 у дат и гостей. Сама подпись не переносится. */
.hv13-search__field--q { flex: 1.15 1 0; }
.hv13-search__field--q .hv13-search__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Панель подсказки ─────────────────────────────────────── */

[popover].hv13-tip {
  margin: 0;
  border: 0;
  padding: 8px 0 10px;
  /* Ширина по полю, а не по содержимому: список шире своего поля
     читается как чужой элемент. */
  width: 420px;
  max-width: calc(100vw - 32px);
  max-height: 460px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--hv13-white);
  color: var(--hv13-ink);
  box-shadow: 0 24px 60px oklch(20% .025 50 / .22),
              0 2px 8px oklch(20% .025 50 / .1);
  font-family: var(--hv13-sans);
  /* Привязка к полю там, где браузер умеет; где нет — встанет по
     центру экрана, это запасной вид, а не поломка. */
  position-area: bottom span-right;
  position-try-fallbacks: top span-right;
  margin-block: 10px;
}

.hv13-search__field--q { anchor-name: --hv13-search; }
[popover].hv13-tip { position-anchor: --hv13-search; }

.hv13-tip__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 6px;
}

/* Кнопка «назад» нужна только на полном экране телефона */
.hv13-tip__back { display: none; }

.hv13-tip__field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--hv13-green);
  border-radius: 12px;
  color: var(--hv13-ink-3);
}

.hv13-tip__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--hv13-sans);
  /* 16px — чтобы iOS не зумил страницу при фокусе */
  font-size: 16px;
  color: var(--hv13-ink);
}

.hv13-tip__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hv13-ink-2);
  cursor: pointer;
}

.hv13-tip__clear:hover { background: oklch(96% .006 85); }

.hv13-tip__body {
  max-height: 380px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hv13-tip__group {
  padding: 12px 24px 6px;
  font-family: var(--hv13-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hv13-ink-3);
}

.hv13-tip__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 6px 24px;
  border: 0;
  background: transparent;
  color: var(--hv13-ink);
  font-family: var(--hv13-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.hv13-tip__row:hover,
.hv13-tip__row:focus-visible {
  background: oklch(97% .006 85);
  color: var(--hv13-ink);
}

.hv13-tip__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: oklch(96.5% .012 145);
  color: oklch(.34 .06 150);
}

.hv13-tip__ico svg { width: 17px; height: 17px; }

.hv13-tip__text { min-width: 0; flex: 1; }

.hv13-tip__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hv13-tip__hint {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  color: var(--hv13-ink-3);
}

.hv13-tip__empty {
  padding: 22px 24px;
  font-size: 14px;
  color: var(--hv13-ink-3);
}

/* ── Телефон: подсказка на весь экран ─────────────────────── */

@media (max-width: 900px) {
  [popover].hv13-tip {
    /* Растягиваем через inset, а не width: 100% — у элемента в верхнем
       слое процент считается от содержащего блока. Привязку к якорю
       здесь снимаем: экран должен лежать по краям окна. */
    position-area: none;
    position-try-fallbacks: none;
    position-anchor: auto;
    inset: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }

  /* Колонку задаём только открытой панели: безусловный display
     перебивает штатное скрытие popover, и подсказка висит поверх
     страницы с самой загрузки. */
  [popover].hv13-tip:popover-open {
    display: flex;
    flex-direction: column;
  }

  .hv13-tip__head {
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--hv13-line);
    flex: none;
  }

  .hv13-tip__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--hv13-ink-2);
    cursor: pointer;
  }

  .hv13-tip__body {
    flex: 1;
    max-height: none;
    padding-bottom: 20px;
  }

  .hv13-tip__row { min-height: 60px; padding: 8px 20px; }
  .hv13-tip__group { padding: 16px 20px 6px; }
  .hv13-tip__name { font-size: 16px; }
}

/* Вторая половина строки гостей в макете приглушена:
   «2 взрослых · без детей» */
.hv13-guests-value__sub { color: var(--hv13-ink-3); }