/* ============================================================
   Шапка v13 — главная и внутренние страницы (каталог v13).
   Подключается из common/header.tpl вместе с разметкой шапки.
   На главной шапка прозрачная поверх героя; на внутренних
   (.main-header--inner) — сплошная тёмно-зелёная, как в макете
   карточки объекта (фон oklch(.26 .05 155)).
   ============================================================ */

/* ── Шапка поверх героя ───────────────────────────────────────
   На главной v13 шапка лежит НА градиенте героя, а не над ним:
   иначе её белый текст оказывается на светлом фоне страницы и
   логотип с меню пропадают. Поэтому шапку кладём абсолютно, а
   герою добавляем отступ сверху на её высоту.
   ──────────────────────────────────────────────────────────── */

.main-header--hv13:not(.main-header--inner) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Текст шапки поверх градиента — белый: логотип на главной белый,
   и серые ссылки рядом с ним читались бы плохо. */
.main-header--hv13 .header-nav__link,
.main-header--hv13 .header-nav__link--text,
.main-header--hv13 .header-nav a,
.main-header--hv13 .header-nav button { color: var(--hv13-white) !important; }

.main-header--hv13 .header-nav__link svg { color: var(--hv13-white); }

/* ── Плашка кэшбэка в шапке ───────────────────────────────── */

.hv13-cashback {
  display: inline-flex;
  align-items: center;
  /* Зона нажатия 44px, при этом сама плашка выглядит мелкой —
     как в макете. Высоту даёт min-height, а не padding. */
  min-height: 44px;
  margin-left: 12px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--hv13-ochre);
  color: var(--hv13-white);
  font-family: var(--hv13-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.hv13-cashback:hover { background: oklch(.53 .16 50); color: var(--hv13-white); }

/* Сетка шапки = сетка контента. В макете и шапка, и герой, и секции
   стоят на полях 120px без контейнера (docs/mockup/Main.dc.html:
   hero padding 24px 120px, секции — 72px 120px). Старая шапка живёт
   в контейнере 1430px по центру, и на широком экране логотип уезжал
   правее рубрики героя. */
.main-header--hv13 .header-inner {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: var(--hv13-pad);
}

/* ── Меню шапки по макету ─────────────────────────────────────
   docs/mockup/Main.dc.html: «Поддержка», пилюля «Вход для объектов»,
   затем «Сертификаты», «Избранное», «Поездки» и акцентная кнопка
   «Войти». Значков у пунктов нет, подписи короткие.
   ──────────────────────────────────────────────────────────── */

.main-header--hv13 .header-nav__link svg,
.main-header--hv13 .header-nav__link > span[style] { display: none; }

.main-header--hv13 .header-nav__link--text {
  gap: 0;
  font-size: 14px;
  font-weight: 500;
  opacity: .92;
}

/* Порядок из макета: Поддержка → пилюля владельцев → Сертификаты,
   Избранное, Поездки → «Войти». Порядок задаём всем пунктам: если
   указать его только двум, остальные с order 0 уезжают вперёд, и
   «Вход для объектов» оказывается за кнопкой «Войти». */
.main-header--hv13 .header-nav__link--text[href^="tel:"] { order: 0; }
.main-header--hv13 .hv13-owner-login { order: 1; }
.main-header--hv13 .header-nav__item { order: 2; }
.main-header--hv13 .header-nav__item:has(.header-nav__link--accent) { order: 3; }

/* «Войти» — акцентная кнопка, а не полупрозрачная плашка */
.main-header--hv13 .header-nav__link--accent {
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: oklch(.58 .17 52);
  color: var(--hv13-white) !important;
  font-size: 14px;
  font-weight: 600;
}

.main-header--hv13 .header-nav__link--accent:hover {
  background: oklch(.54 .17 52);
}

/* ── Шапка по новой версии макета ─────────────────────────────
   Логотип надписью, кэшбэк — кнопка с подсказкой, у «Сертификатов»
   в подсказке текст и кнопка без списка ссылок. */
.main-header--hv13 .hv13-wordmark {
  display: inline-flex;
  align-items: baseline;
  min-height: 44px;
  align-items: center;
  font-family: var(--hv13-serif);
  font-style: italic;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.012em;
  color: var(--hv13-white);
  text-decoration: none;
}

.main-header--hv13 .hv13-wordmark__tld {
  font-family: var(--hv13-sans);
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .78;
  align-self: flex-end;
  margin-bottom: 12px;
}

.main-header--hv13 button.hv13-cashback {
  border: 0;
  cursor: pointer;
}

/* Белая «навигационная» подсказка из макета (.navtip) */
[popover].hv13-navtip {
  display: none;
  flex-direction: column;
  gap: 12px;
  max-width: 232px;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: 14px;
  background: var(--hv13-white);
  color: var(--hv13-ink);
  box-shadow: 0 20px 35px oklch(20% .025 50 / .16);
  font-family: var(--hv13-sans);
  font-size: 13px;
  line-height: 1.45;
}

[popover].hv13-navtip:popover-open { display: flex; }

.hv13-navtip__title {
  font-family: var(--hv13-serif);
  font-size: 15px;
  color: var(--hv13-ink);
}

.hv13-navtip__btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: oklch(.58 .17 52);
  color: var(--hv13-white) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

/* Список поводов во всплывашке «Сертификаты» — как на проде (раньше
   был скрыт и оставалась одна кнопка). Две колонки, чтобы окно не росло. */
.main-header--hv13 .nav-popover__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.main-header--hv13 .nav-popover__links a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0;
  color: var(--hv13-ink) !important;
  font-family: var(--hv13-sans);
  font-size: 14px;
  text-decoration: none;
}
.main-header--hv13 .nav-popover__links a:hover { color: oklch(.42 .07 145) !important; text-decoration: underline; text-underline-offset: .18em; }

/* Мобильная шапка по Mobile.dc.html: надпись 21px и кэшбэк слева;
   «Войти» — сплошная оранжевая, телефон и меню — круги 44px. */
.mob-header--hv13 { gap: 6px; padding: 0 12px; height: 64px; }
.mob-hv13__left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mob-hv13__right { display: flex; align-items: center; gap: 6px; flex: none; }
.mob-hv13__mark {
  font-family: Spectral, Georgia, serif; font-style: italic; font-size: 21px;
  letter-spacing: -.012em; color: #fff !important; text-decoration: none; white-space: nowrap;
}
.mob-hv13__mark span {
  font-family: Manrope, sans-serif; font-style: normal; font-size: 11px;
  font-weight: 600; letter-spacing: .04em; opacity: .78;
}
.mob-hv13__cash {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  max-width: 64px; padding: 0 11px; border: 0; border-radius: 999px;
  background: oklch(.58 .17 52); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500;
  line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; text-align: center; cursor: pointer;
}
.mob-hv13__login {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0;
  border-radius: 999px; background: oklch(.58 .17 52); color: #fff;
  font-family: Manrope, sans-serif; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.mob-hv13__circle {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 999px; background: oklch(100% 0 0 / .14); color: #fff !important; cursor: pointer;
}

/* Узкие телефоны: кэшбэк и «Войти» не помещаются рядом и слипаются —
   кнопку кэшбэка убираем по просьбе Тимура (16.10.2026). */
.mob-header--hv13 { column-gap: 8px; }
@media (max-width: 419px) {
  .mob-hv13__cash { display: none; }
}

/* Шапка на главной v13: ссылки меню и логотип */
.main-header--hv13 .header-nav__link,
.main-header--hv13 .header-nav__link--text,
.main-header--hv13 .header-nav__link--accent {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.main-header--hv13 .header-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ── Внутренние страницы ────────────────────────────────────── */
.main-header--hv13.main-header--inner {
  background: oklch(.26 .05 155) !important;
  box-shadow: none !important;
}

/* Сетка шапки — по краям ленты каталога (она во всю ширину с полями
   16px), а не по полям главной */
.main-header--inner .header-inner { padding-inline: 16px; }

.mob-header--hv13.mob-header--inner { background: oklch(.26 .05 155); }

/* ── Логотип вместо надписи «Глэмпинги.рф» (21.10.2026) ──────── */
.main-header--hv13 .hv13-wordmark img { display: block; height: 32px; width: auto; margin: 0; }
/* На телефоне справа «Войти» и два круга — логотипу остаётся ~170px */
.mob-hv13__left { flex: 1 1 auto; }
.mob-hv13__mark { display: inline-flex; align-items: center; min-height: 44px; min-width: 0; }
.mob-hv13__mark img { display: block; width: 150px; max-width: 100%; height: auto; }

/* ── Всплывашки меню шапки — как подсказка кэшбэка из макета ───
   Раньше оставались старые: текст по центру, ярко-оранжевая или
   зелёная квадратная кнопка #FF9800/#08885e. */
.main-header--hv13 .nav-popover {
  min-width: 232px;
  max-width: 260px;
  padding: 16px;
  border-radius: 14px;
  box-shadow: 0 20px 35px oklch(20% .025 50 / .16);
  text-align: left;
  font-family: var(--hv13-sans);
}

.main-header--hv13 .nav-popover p {
  margin: 0 0 12px;
  color: var(--hv13-ink);
  font-size: 13px;
  line-height: 1.45;
}

.main-header--hv13 .nav-popover .nav-popover__btn,
.main-header--hv13 .nav-popover .nav-popover__btn--accent {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: oklch(.58 .17 52);
  color: var(--hv13-white) !important;
  font-family: var(--hv13-sans);
  font-size: 13px;
  font-weight: 700;
}

.main-header--hv13 .nav-popover .nav-popover__btn:hover { background: oklch(.53 .16 50); }

/* ── Окно под именем после входа (баланс бонусов) ──────────────
   Общее правило всплывашек выше (ширина до 260px, поля, тень)
   цепляло и его: за зелёной карточкой шириной 380px оставалась
   пустая белая подложка с тенью, сдвинутая влево. Здесь подложки
   нет — окном служит сама карточка, прижатая к правому краю кнопки. */
.main-header--hv13 .nav-popover--login:not(.nav-popover--login--guest) {
  left: auto;
  right: 0;
  width: 340px;
  min-width: 0;
  max-width: calc(100vw - 32px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.main-header--hv13 .nav-popover--login .bonus-widget-compact {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(150deg, oklch(.45 .08 150) 0%, oklch(.36 .065 152) 100%);
  box-shadow: 0 20px 40px oklch(20% .025 50 / .22);
  font-family: var(--hv13-sans);
  color: var(--hv13-white);
}

.main-header--hv13 .nav-popover--login .widget-header { gap: 12px; margin-bottom: 14px; }
.main-header--hv13 .nav-popover--login .widget-title { font-size: 13px; opacity: .85; }
.main-header--hv13 .nav-popover--login .widget-balance { font-size: 30px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.main-header--hv13 .nav-popover--login .widget-level { padding: 5px 11px; border-radius: 999px; background: oklch(100% 0 0 / .16); font-size: 12px; }
.main-header--hv13 .nav-popover--login .widget-stats { margin-bottom: 12px; padding: 12px 8px; border-radius: 14px; background: oklch(100% 0 0 / .12); }
.main-header--hv13 .nav-popover--login .stat-value { font-size: 17px; font-variant-numeric: tabular-nums; }
.main-header--hv13 .nav-popover--login .stat-label { font-size: 11px; opacity: .78; }
.main-header--hv13 .nav-popover--login .widget-links { gap: 6px; }

.main-header--hv13 .nav-popover--login .widget-link {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: oklch(100% 0 0 / .12);
  color: var(--hv13-white) !important;
  font-size: 14px;
  font-weight: 600;
}

.main-header--hv13 .nav-popover--login .widget-link:hover { background: oklch(100% 0 0 / .22); }