/* ============================================================
   Главная v13 — календарь дат.
   Компонент общий с каталогом и карточкой (pv12-tad), поэтому
   правила ограничены body.hv13-body (главная v13) и body.cv13
   (каталог v13): на других страницах календарь остаётся прежним.

   Макет: docs/mockup/Dates.dc.html. Взято то, что применимо на
   главной: два месяца в ряд, типографика и палитра v13, быстрые
   даты внизу. Цена в клетке и перечёркнутые занятые дни сюда не
   переносятся — это данные конкретного объекта, на главной их нет.
   ============================================================ */

/* Колонка (шапка, календарь, быстрые даты) — только когда панель
   открыта. Безусловный display: flex перебивал скрытие компонента,
   и календарь висел раскрытым с самой загрузки страницы. */
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown.open {
  display: flex;
  flex-direction: column;
}

:is(body.hv13-body, body.cv13) .pv12-tad-dropdown {
  border-radius: 18px;
  border: 0;
  background: var(--hv13-white);
  box-shadow: 0 24px 60px oklch(20% .025 50 / .22),
              0 2px 8px oklch(20% .025 50 / .1);
  font-family: var(--hv13-sans);
  color: var(--hv13-ink);
}

/* Шапка: в макете у панели нет крупного заголовка — только подсказка */
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .tad-sheet-title {
  font-family: var(--hv13-serif);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -.012em;
}

:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .tad-sheet-hint {
  font-size: 13px;
  color: var(--hv13-ink-3);
}

:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .tad-sheet-reset {
  color: var(--hv13-green);
  font-weight: 600;
}

/* Список месяцев слева в макете заменён стрелками — прячем его,
   месяцы листаются прокруткой области. */
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .tad-months-list { display: none; }

/* Два месяца в ряд, как в макете */
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown {
  width: min(780px, calc(100vw - 32px));
  max-width: none;
}

:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .tad-cal-area {
  padding: 0 20px 12px;
}

:is(body.hv13-body, body.cv13) .pv12-tad-dropdown [data-tad-months] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}

:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .tad-month-name {
  font-family: var(--hv13-serif);
  font-weight: 400;
  font-size: 17px;
  text-align: center;
  color: var(--hv13-ink);
}

:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .tad-day-headers {
  font-family: var(--hv13-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: lowercase;
  color: var(--hv13-ink-3);
}

/* Клетка дня: в макете квадратная, со скруглением */
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .td {
  border-radius: 10px;
  font-size: 14px;
  color: var(--hv13-ink);
}

/* Выходные компонент красит красным — в макете они обычного цвета */
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .td.wk { color: var(--hv13-ink); }

/* Список месяцев скрыт, но активный пункт держал старую палитру */
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .tad-month-item.active {
  border-color: var(--hv13-green);
  background: oklch(97% .014 145);
  color: var(--hv13-green);
}

:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .td.past {
  color: oklch(78% .008 85);
}

/* Выбранные края диапазона и ночи между ними — цвета из макета.
   Классы компонента: ci — заезд, co — выезд, rng — ночи между ними.
   Без них клетки оставались в старой оранжевой палитре. */
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .td.ci,
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .td.co {
  background: var(--hv13-green) !important;
  color: var(--hv13-white) !important;
}

:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .td.rng {
  background: oklch(96% .016 145) !important;
  color: var(--hv13-ink) !important;
}

/* ── Быстрые даты ─────────────────────────────────────────────
   В макете они переехали из героя вниз календаря: у каждой
   подписан конкретный диапазон, чтобы не гадать, что выберется.
   ──────────────────────────────────────────────────────────── */

:is(body.hv13-body, body.cv13) .hv13-cal-presets {
  display: flex;
  /* Все четыре — одной строкой: переносом «Сегодня» уходила вниз
     и панель вырастала на лишний ряд. */
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 6px;
  margin: 4px 20px 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hv13-line);
}

:is(body.hv13-body, body.cv13) .hv13-cal-preset {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid oklch(87.5% .006 85);
  border-radius: 999px;
  background: var(--hv13-white);
  color: var(--hv13-ink);
  font-family: var(--hv13-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

:is(body.hv13-body, body.cv13) .hv13-cal-preset:hover {
  border-color: var(--hv13-green);
}

:is(body.hv13-body, body.cv13) .hv13-cal-preset span {
  opacity: .62;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  /* На телефоне один месяц в колонку — двух не поместится */
  :is(body.hv13-body, body.cv13) .pv12-tad-dropdown { width: auto; }
  :is(body.hv13-body, body.cv13) .pv12-tad-dropdown [data-tad-months] { grid-template-columns: 1fr; }
  :is(body.hv13-body, body.cv13) .hv13-cal-presets { margin-inline: 16px; }
}

/* Кнопки быстрых дат не должны растягиваться по высоте строки */
:is(body.hv13-body, body.cv13) .hv13-cal-presets { flex: none; }
:is(body.hv13-body, body.cv13) .hv13-cal-preset { flex: none; height: 44px; }

/* ── Компьютер по Dates.dc.html (классы ставит скрипт в search_rooms) ──
   Своя строка дней недели у каждого месяца, стрелки по бокам
   от названий, область ровно на два месяца, легенда внизу. */
:is(body.hv13-body, body.cv13) .hv13-cal--desk .tad-day-headers { display: none; }
:is(body.hv13-body, body.cv13) .hv13-cal--desk .tad-cal-area {
  height: 300px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none;
}
:is(body.hv13-body, body.cv13) .hv13-cal--desk .tad-cal-area::-webkit-scrollbar { display: none; }
:is(body.hv13-body, body.cv13) .hv13-cal--desk .tad-month-block:nth-child(odd) { scroll-snap-align: start; }
:is(body.hv13-body, body.cv13) .hv13-cal--desk .tad-month-name {
  position: static !important; min-height: 44px; display: flex; align-items: center; justify-content: center;
  font-family: var(--hv13-serif) !important; font-weight: 400; font-size: 19px; background: none;
}
:is(body.hv13-body, body.cv13) .hv13-cal--desk .tad-cal-area { padding-top: 14px; box-sizing: border-box; scroll-padding-top: 14px; }
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .td.hv13-today:not(.ci):not(.co) { box-shadow: inset 0 0 0 1px oklch(35% .012 60); }
:is(body.hv13-body, body.cv13) .hv13-cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); margin: 6px 0 4px;
  font-family: var(--hv13-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; color: oklch(52% .01 60);
}
:is(body.hv13-body, body.cv13) .hv13-cal-nav {
  position: absolute; top: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid oklch(55.5% .006 85); border-radius: 999px; background: var(--hv13-white);
  color: var(--hv13-ink); font-size: 18px; line-height: 1; cursor: pointer;
}
:is(body.hv13-body, body.cv13) .hv13-cal-nav:hover { border-color: var(--hv13-ink); }
:is(body.hv13-body, body.cv13) .hv13-cal-nav--prev { left: 20px; }
:is(body.hv13-body, body.cv13) .hv13-cal-nav--next { right: 20px; }

/* Выбранная быстрая дата — тёмно-зелёная, как «Выходные» в макете */
:is(body.hv13-body, body.cv13) .hv13-cal-preset.is-on { background: var(--hv13-green); border-color: var(--hv13-green); color: var(--hv13-white); }
:is(body.hv13-body, body.cv13) .hv13-cal-preset.is-on span { color: oklch(100% 0 0 / .72); }

:is(body.hv13-body, body.cv13) .hv13-cal-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 20px 16px; padding-top: 12px;
  border-top: 1px solid var(--hv13-line); font-size: 12px; color: oklch(52% .01 60);
}
:is(body.hv13-body, body.cv13) .hv13-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
:is(body.hv13-body, body.cv13) .hv13-cal-legend i { width: 10px; height: 10px; border-radius: 3px; }
.hv13-cal-legend__in { background: var(--hv13-green); }
.hv13-cal-legend__mid { background: oklch(96% .016 145); }
.hv13-cal-legend__today { box-shadow: inset 0 0 0 1px oklch(35% .012 60); }

/* Телефон: общая строка дней недели остаётся (месяц один в ширину),
   но выходные в ней — обычного цвета, как в макете */
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown .tad-day-headers > div { color: inherit !important; }

/* Быстрый переход по месяцам (скрипт в search_rooms_cal_v13.tpl) */
:is(body.hv13-body, body.cv13) .hv13-cal-months {
  display: flex;
  gap: 6px;
  margin: 0 0 8px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
:is(body.hv13-body, body.cv13) .hv13-cal-months::-webkit-scrollbar { display: none; }
:is(body.hv13-body, body.cv13) .hv13-cal-month {
  flex: none;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid oklch(90% .006 85);
  border-radius: 999px;
  background: var(--hv13-white);
  color: var(--hv13-ink);
  font-family: var(--hv13-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
:is(body.hv13-body, body.cv13) .hv13-cal-month:hover { border-color: oklch(.42 .07 145); color: oklch(.36 .09 145); }
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown > .hv13-cal-months { flex: none; margin: 0; padding: 4px 16px 8px; }
:is(body.hv13-body, body.cv13) .pv12-tad-dropdown.hv13-cal--desk > .hv13-cal-months { margin: 16px 72px 4px; padding: 2px 0 6px; }
:is(body.hv13-body, body.cv13) .hv13-cal-month { height: 34px; }