/* ============================================================
   Еске Алу — Основные стили (тёмная благородная тема)
   ============================================================ */

/* ---------- Переменные ----------
   Палитра синхронизирована с прод-сайтом (eskealu.orken-media.kz):
   фон #0f172a, карточки #1e293b, акцент #d4af37,
   текст #f1f5f9, приглушённый текст #94a3b8.
   Переменные — те же (общие с assets/css/person.css), меняем только значения. */
:root {
  --color-bg: #0F172A;
  --color-surface: #1E293B;
  --color-surface-2: #273449;
  --color-accent: #D4AF37;
  --color-accent-hover: #E6C55A;
  --color-text: #F1F5F9;
  --color-text-muted: #94A3B8;
  --color-border: #334155;
  /* Шапка: фон тела с прозрачностью 80% + blur (как на прод-сайте) */
  --color-header-bg: rgba(15, 23, 42, 0.8);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-error: #F26B6B;

  --header-height: 64px;
  --sidebar-width: 280px;
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 0.3s ease;

  /* Ширина «рабочей» области контента.
     Одна переменная на шапку и на .main, поэтому логотип, меню,
     переключатель языка и блоки страницы стоят строго по одной линии. */
  --content-max: 1100px;
  --content-pad: 24px;

  --font-main: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Сброс ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
  padding-top: var(--header-height);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ============================================================
   Шапка
   ============================================================ */
/* Шапка: полоса во всю ширину, а содержимое внутри — по ширине контента.
   .header держит только фон/границу/тень и фиксируется сверху;
   .header__inner центрируется так же, как .main.
   Фон — #0f172a с прозрачностью 80% + blur (как на прод-сайте):
   при прокрутке контент мягко «просвечивает» сквозь шапку. */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background-color: var(--color-header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: var(--content-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

/* Левая группа: кнопка меню + логотип + навигация */
.header__left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header__menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition);
  /* Кнопка 40px, а иконка внутри 22px. Сдвигаем кнопку влево на её
     внутренний отступ, чтобы полоски «бутерброда» встали ровно по
     линии контента, а не на 9px правее. */
  margin-left: -9px;
  flex-shrink: 0;
}

.header__menu-button:hover {
  background-color: var(--color-surface-2);
}

.header__menu-icon,
.header__menu-icon::before,
.header__menu-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.header__menu-icon {
  position: relative;
}

.header__menu-icon::before,
.header__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.header__menu-icon::before {
  top: -7px;
}

.header__menu-icon::after {
  top: 7px;
}

.header__logo {
  display: flex;
  align-items: center;
}

.header__logo img {
  height: 40px;
  width: auto;
}

/* Верхняя навигация (сразу после логотипа) */
.header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.header__nav-link {
  position: relative;
  font-size: 15px;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

/* Плавно появляющаяся полоска снизу при наведении */
.header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}

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

.header__nav-link:hover::after {
  width: 100%;
}

/* Активный пункт меню (текущий раздел).
   Класс .is-active ставит script.js (showSection) — он же снимает его
   с остальных пунктов. Полоска снизу всегда видна. */
.header__nav-link.is-active {
  color: var(--color-accent);
}

.header__nav-link.is-active::after {
  width: 100%;
}

/* Переключатель языка (в правом углу) */
.header__lang {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.header__lang-button {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.header__lang-button:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.header__lang-button.is-active {
  color: var(--color-bg);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ============================================================
   Боковое меню
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: var(--sidebar-width);
  height: 100vh;
  padding: 24px;
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  transform: translateX(-100%);
  transition: transform var(--transition);
  overflow-y: auto;
}

.sidebar.is-open {
  transform: translateX(0);
}

.sidebar__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.sidebar__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar__link {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: background-color var(--transition), color var(--transition);
}

.sidebar__link:hover {
  background-color: var(--color-surface-2);
  color: var(--color-accent);
}

/* Активный пункт бокового меню: золотая полоска слева + лёгкий фон.
   Класс .is-active ставит script.js (showSection) — то же поведение,
   что и в верхней навигации. */
.sidebar__link.is-active {
  position: relative;
  background-color: var(--color-surface-2);
  color: var(--color-accent);
}

.sidebar__link.is-active::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background-color: var(--color-accent);
}

/* Затемнение фона */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background-color: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

.overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* ============================================================
   Основной контент
   ============================================================ */
/* Рабочая область страницы.
   Те же переменные, что у .header__inner, поэтому шапка и блоки
   выровнены по одной левой/правой границе. */
.main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px var(--content-pad) 64px;
}

/* ---------- Секции (переключаемые разделы) ---------- */
.section {
  display: none;
}

.section.is-active {
  display: block;
}

/* ============================================================
   Информационная страница (разделы 3 «Услуги» и 4 «О проекте»)
   ============================================================ */
.page {
  max-width: 820px;
}

/* Шапка страницы: заголовок раздела + золотая линия-акцент */
.page__head {
  margin-bottom: 24px;
}

.page__rule {
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background-color: var(--color-accent);
}

/* Набор текстовых блоков страницы: вертикальный ритм задаётся здесь */
.page__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.section__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
}

.section__text {
  font-size: 16px;
  color: var(--color-text-muted);
}

/* Абзац-подводка перед списком: чуть светлее и без нижнего отступа
   (отступ даёт gap контейнера .page__body) */
.section__text--lead {
  margin-bottom: -6px;
  color: var(--color-text);
}

/* Курсивный акцент (выделенное смысловое утверждение в разделах 3 и 4).
   Курсив задаётся классом, а не <em>, потому что локализация пишет текст
   через textContent и вложенные теги были бы стёрты при смене языка. */
.section__text--em {
  font-style: italic;
  color: var(--color-text);
}

/* Подзаголовок внутри раздела (перед списком), например «Функции портала» */
.section__subtitle {
  margin-bottom: -6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}

/* ---------- Блок «Связаться с нами» (разделы 3 и 4) ---------- */
/* Контейнер блока: визуально завершает раздел после курсивного абзаца. */
.section__contacts {
  margin-top: 6px;
}

/* Разделитель для секций (жёлтая полоса).
   Стоит СЛЕВА по контенту (margin: 32px 0 16px), в отличие
   от центрированной .hero__divider. Толщина 2px — тоньше hero (3px). */
.section__divider {
  display: block;
  width: 64px;
  height: 2px;
  background-color: var(--color-accent);
  margin: 32px 0 16px;
  border-radius: 1px;
}

/* Подзаголовок блока контактов, например «Связаться с нами» */
.section__subheading {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 12px;
}

.section__contact {
  margin: 0 0 8px;
  line-height: 1.6;
}

/* Ссылки блока контактов: телефоны (tel:) и адрес (Яндекс.Карты) */
.section__contact-link {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 150ms ease, opacity 150ms ease;
}

.section__contact-link:hover {
  text-decoration: underline;
  opacity: 0.9;
}

/* Маркированный список раздела: золотые ромбы вместо стандартных точек */
.section__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section__list li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  color: var(--color-text-muted);
}

.section__list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  width: 7px;
  height: 7px;
  background-color: var(--color-accent);
  transform: rotate(45deg);
}

/* ---------- Акцентная карточка основной услуги (раздел 3) ---------- */
.feature-card {
  padding: 24px 26px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
}

.feature-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 12px;
}

.feature-card__text {
  font-size: 16px;
  color: var(--color-text-muted);
}

/* Абзац-заключение внутри акцентной карточки (например, section3.outro).
   Держит те же 16px, что и остальной текст карточки, но, как и
   .section__text--em, выделяется курсивом и более светлым цветом.
   Курсив задаётся классом, а не <em>: локализация пишет текст через
   textContent и вложенные теги были бы стёрты при смене языка. */
.feature-card__text--em {
  margin-top: 18px;
  font-style: italic;
  color: var(--color-text);
}

.feature-card__lead {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

/* Подзаголовок внутри акцентной карточки, например «Что содержит личная страница».
   Стиль согласован с .feature-card__lead (который используется в KZ-версии). */
.feature-card__subtitle {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}

.feature-card__list {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-card__list li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  color: var(--color-text-muted);
}

.feature-card__list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  width: 7px;
  height: 7px;
  background-color: var(--color-accent);
  transform: rotate(45deg);
}

/* Базовый отступ между карточками задаёт .page__body (gap: 18px).
   Для двух подряд идущих услуг (QR + ТВ) даём чуть больше воздуха,
   чтобы блоки читались как разные услуги, а не как один абзац. */
.feature-card + .feature-card {
  margin-top: 24px;
}

/* ============================================================
   Декоративный орнамент между секциями
   ============================================================ */
/* Полоса-разделитель внутри секции: ширина ограничена --content-max,
   а горизонтальные отступы — 0, потому что .main уже добавил
   --content-pad слева/справа. Иначе орнамент был бы уже формы
   поиска и карты (двойной отступ).
   color задаёт текущий цвет, из которого pattern берёт
   stroke/fill (currentColor), opacity делает линию ненавязчивой. */
.ornament-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px 0;
  color: var(--color-accent);
  opacity: 0.5;
}

.ornament-divider {
  width: 100%;
  height: 24px;
  display: block;
}

/* ============================================================
   Hero (раздел 1, главная)
   Порядок: заголовок → подзаголовок → золотая полоса → текст-подводка.
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  margin-bottom: 40px;
  padding: 12px 0 8px;
}

/* Паттерн мелких золотых точек на фоне hero.
   radial-gradient(#d4af37 1px, transparent 1px) / 16px 16px, opacity .05 —
   как на прод-сайте. Слой лежит ПОД контентом (z-index: 0 против z-index: 1
   у дочерних элементов) и не перехватывает клики по форме/кнопкам. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#d4af37 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* Все дочерние элементы hero — над паттерном точек */
.hero > * {
  position: relative;
  z-index: 1;
}

.hero__title {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-text);
}

/* Золотая полоса-акцент под заголовком (раньше рисовалась
   псевдоэлементом .hero__title::after) */
.hero__divider {
  display: block;
  width: 64px;
  height: 3px;
  margin: 16px auto 0;
  background-color: var(--color-accent);
  border-radius: 2px;
}

.hero__subtitle {
  max-width: 640px;
  margin: 12px auto 0;
  font-size: 17px;
  color: var(--color-text-muted);
}

/* Текст-подводка к форме поиска: светлее подзаголовка,
   стоит между полосой и формой («Введите известные данные…») */
.hero__lead {
  max-width: 640px;
  margin: 18px auto 0;
  font-size: 16px;
  color: var(--color-text);
}

/* ============================================================
   Форма поиска
   ============================================================ */
.search {
  margin-bottom: 48px;
}

.search__form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 28px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* --- Поле формы: обёртка .search__control держит рамку, а <label>
       «плавает» внутри неё (пустое поле) или на рамке (заполненное).
       Поэтому подписи нет над полем — только внутри. --- */
.search__field {
  display: flex;
  flex-direction: column;
}

/* Поле на всю ширину сетки (город / регион) */
.search__field--full {
  grid-column: 1 / -1;
}

.search__control {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Плавающая подпись. По умолчанию стоит внутри поля по центру
   (совпадает с padding-left инпута) и работает как placeholder. */
.search__label {
  position: absolute;
  top: 50%;
  left: 15px;
  max-width: calc(100% - 30px);
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: #5C6373;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: top var(--transition), transform var(--transition),
    font-size var(--transition), color var(--transition);
}

/* Фон поля темнее формы: видно границу поля на карточке .search__form */
.search__input {
  width: 100%;
  padding: 22px 14px 8px;
  font-size: 15px;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}
/* Служебный пробел в placeholder=" " включает :placeholder-shown —
   так CSS понимает, что поле пустое, без единой строки JS. */
.search__input::placeholder {
  color: transparent;
}

.search__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

/* Заполненное поле / фокус / выбранный пункт списка:
   подпись уезжает наверх и уменьшается. */
.search__input:focus ~ .search__label,
.search__input:not(:placeholder-shown) ~ .search__label,
.search__control--select .search__label {
  top: 7px;
  transform: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.search__input:focus ~ .search__label {
  color: var(--color-accent);
}

/* --- Город: выпадающий список. Подпись всегда сверху, стрелку рисуем
       фоном (внешние иконки не нужны). --- */
.search__select {
  padding-right: 44px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* Год: type="number" не поддерживает :placeholder-shown (браузер считает
   поле заполненным всегда), поэтому подпись уводим наверх принудительно —
   так же, как у селекта города. Спиннеры скрываем: они перекрывают
   подпись и мешают вводу четырёх цифр. */
.search__control--number .search__label {
  top: 7px;
  transform: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.search__control--number .search__input {
  appearance: textfield;
  -moz-appearance: textfield;
}

.search__control--number .search__input::-webkit-outer-spin-button,
.search__control--number .search__input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

/* Выпадающий список: в тёмной теме системные option иначе белые */
.search__select option {
  color: var(--color-text);
  background-color: var(--color-surface);
}

.search__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 14px;
  margin-top: 4px;
}

.search__button {
  padding: 13px 32px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.search__button--submit {
  color: var(--color-bg);
  background-color: var(--color-accent);
}

.search__button--submit:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.search__button--reset {
  color: var(--color-text-muted);
  background-color: transparent;
  border: 1px solid var(--color-border);
}

.search__button--reset:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

/* --- Иконка календаря в полях type="date".

   В форме поиска дат нет, но поля появляются в форме «Оставить заявку»
   (даты рождения и смерти). Системная иконка WebKit-браузеров тёмная
   и на тёмном фоне поля почти не видна. Правило общее для всех
   input[type="date"] страницы, поэтому форма заявки подхватит его
   автоматически — отдельный стиль для неё не нужен.

   filter: invert(1) — «зеркалит» цвета иконки в светлые; opacity
   гасит её, чтобы не спорила с текстом поля, hover возвращает. --- */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.7;
  cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ============================================================
   Результаты поиска (section-1)
   ============================================================ */
.search-results {
  margin-top: 28px;
}

.search-results__title {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

/* Спиннер загрузки */
.search-results__loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  font-size: 15px;
  color: var(--color-text-muted);
}

.search-results__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: search-spin 0.8s linear infinite;
}

@keyframes search-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Тексты состояний: «Ничего не найдено» / «Ошибка. Попробуйте позже» */
.search-results__state {
  padding: 16px 18px;
  font-size: 15px;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* Атрибут hidden должен побеждать display: flex/grid.
   Без этих правил специфичность классов перебивает UA-стиль [hidden],
   и блок остаётся видимым: спиннер «Поиск…» висел одновременно с
   «Ничего не найдено» и с выдачей (см. tools/TEST-REPORT.md). */
.search-results[hidden],
.search-results__loading[hidden],
.search-results__state[hidden],
.search-results__list[hidden] {
  display: none;
}

/* Список найденных людей */
.search-results__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  list-style: none;
}

.search-result__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition), transform var(--transition);
}

.search-result__link:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

/* Миниатюра главного фото 80×80 */
.search-result__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  overflow: hidden;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.search-result__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Заглушка вместо фото: инициалы */
.search-result__thumb--empty {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-accent);
}

.search-result__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.search-result__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.search-result__years {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ============================================================
   Табы услуг в разделе «Оставить заявку» (section-2)
   «Публикация на сайте (QR)» / «Трансляция в эфире (ТВ)».
   Активный таб получает золотую подсветку — в духе .request__button.
   ============================================================ */
.request-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.request-tab {
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.request-tab:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

/* Активный таб: золотая заливка */
.request-tab.is-active,
.request-tab[aria-selected="true"] {
  color: var(--color-bg);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.request-tab.is-active:hover,
.request-tab[aria-selected="true"]:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Панель таба скрыта атрибутом hidden (переключает RequestTabsModule) */
.request-panel[hidden] {
  display: none;
}

/* Подзаголовок внутри ТВ-панели: меньше отступ снизу, чем у hero раздела */
.hero--tv {
  margin-bottom: 8px;
}

.hero__title--tv {
  font-size: 26px;
}

/* ============================================================
   Форма заявки «Оставить заявку» (section-2)
   Mobile-first: одна колонка, на десктопе — две
   ============================================================ */
.request {
  margin-bottom: 48px;
}

.request__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 18px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ---------- Блоки (fieldset) ---------- */
.request__block {
  border: none;
  padding: 0;
  margin: 0;
}

.request__legend {
  padding: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

/* ---------- Сетка полей ---------- */
.request__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 18px;
}

.request__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Поле на всю ширину сетки */
.request__field--full {
  grid-column: 1 / -1;
}

/* ---------- Строка из трёх колонок ---------- */
/* Используется в блоке «Данные умершего» формы заявки: Отчество +
   Дата рождения + Дата смерти в одну строку. Вложена в .request__grid
   и растягивается на всю её ширину (grid-column: 1 / -1), иначе на
   десктопе занимала бы одну из двух колонок родителя. gap — как у
   .request__grid, поэтому визуально это одна из строк той же сетки. */
.request-grid-3 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
}

/* ---------- Строка из двух колонок ---------- */
/* Используется в блоке «Данные умершего» формы заявки: Имя + Отчество
   в одну строку и Дата рождения + Дата смерти в другую. Раскладка и
   поведение — как у .request-grid-3, но две равные колонки. */
.request-grid-2 {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.request__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ---------- Инпуты ---------- */
.request__input {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.request__input::placeholder {
  color: #5C6373;
}

.request__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.request__textarea {
  resize: vertical;
  min-height: 96px;
}

/* --- Селекты «Жуз» / «Руы» в форме заявки. Подпись всегда сверху
       (как у остальных полей заявки), стрелку рисуем фоном. --- */
.request__select {
  padding-right: 44px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* Выпадающий список: в тёмной теме системные option иначе белые */
.request__select option,
.request__select optgroup {
  color: var(--color-text);
  background-color: var(--color-surface);
}

/* Поле выбора файла: убираем платную высоту и растягивание */
.request__file {
  padding: 10px 12px;
  cursor: pointer;
}

.request__file::file-selector-button {
  margin-right: 12px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-bg);
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition);
}

.request__file::file-selector-button:hover {
  background-color: var(--color-accent-hover);
}

/* Поле с ошибкой */
.request__field.is-invalid .request__input {
  border-color: var(--color-error);
}

/* ---------- Ошибки ---------- */
.request__error {
  display: none;
  font-size: 13px;
  color: var(--color-error);
}

.request__error.is-visible {
  display: block;
}

/* ---------- Подсказки и счётчик ---------- */
.request__hint {
  font-size: 13px;
  color: var(--color-text-muted);
}

.request__counter {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ---------- Превью фотографий ---------- */
.request__preview {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

.request__preview[hidden] {
  display: none;
}

.request__thumb {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-bg);
}

.request__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Кнопка удаления миниатюры (крестик в углу) */
.request__thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: var(--color-bg);
  background-color: rgba(18, 21, 28, 0.75);
  border-radius: 50%;
  transition: background-color var(--transition), color var(--transition);
}

.request__thumb-remove:hover {
  color: var(--color-bg);
  background-color: var(--color-error);
}

/* ---------- Капча Cloudflare Turnstile (заход 6) ---------- */
/* Контейнер виджета. Он в потоке формы: если скрипт Cloudflare не загрузился
   или Site Key не задан, блок остаётся пустым и не занимает место. */
.request__turnstile {
  margin-top: 4px;
}

.request__turnstile:empty {
  display: none;
}

/* ---------- Кнопки ---------- */
.request__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.request__button {
  padding: 13px 32px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.request__button--submit {
  color: var(--color-bg);
  background-color: var(--color-accent);
}

.request__button--submit:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.request__button--submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.request__button--reset {
  color: var(--color-text-muted);
  background-color: transparent;
  border: 1px solid var(--color-border);
}

.request__button--reset:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

/* ---------- Сообщение об успехе / ошибке ---------- */
.request__message {
  padding: 14px 16px;
  font-size: 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.request__message[hidden] {
  display: none;
}

.request__message--success {
  color: #A9E4A0;
  background-color: rgba(120, 200, 110, 0.12);
  border-color: rgba(120, 200, 110, 0.35);
}

.request__message--error {
  color: var(--color-error);
  background-color: rgba(242, 107, 107, 0.12);
  border-color: rgba(242, 107, 107, 0.35);
}

/* ---------- Форма заявки: десктоп ---------- */
@media (min-width: 769px) {
  .request__form {
    padding: 32px;
    gap: 28px;
  }

  /* Две колонки для полей */
  .request__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .request__actions {
    flex-direction: row;
  }
}

/* ============================================================
   Карта
   ============================================================ */
.map {
  margin-bottom: 40px;
}

.map__title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--color-text);
}

.map__container {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.map__canvas {
  width: 100%;
  height: 450px;
  background-color: var(--color-surface-2);
}

/* Курсор-подсказка на метках имеет смысл только там, где балун
   открывается наведением. На тач-устройствах :hover «залипает» после
   тапа (курсор остаётся активным до следующего касания), поэтому
   подсказку и курсор оставляем только hover-устройствам. */
@media (hover: hover) {
  .map__canvas .ymaps-2-1-18-placemark-overlay.ymaps-2-1-18_cursor_pointer,
  .map__canvas .ymaps-2-1-18-placemark-overlay {
    cursor: pointer;
  }
}

@media (hover: none) {
  .map__canvas .ymaps-2-1-18-placemark-overlay {
    cursor: default;
  }
}

.map__loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-text-muted);
  font-size: 15px;
  pointer-events: none;
}

.map__loading.is-hidden {
  display: none;
}

/* ---------- Уведомление об обрезке списка меток (meta.truncated) ----------
   Показывается над картой, когда опубликованных записей с координатами
   больше лимита сервера. Скрыто по умолчанию (атрибут hidden),
   текст рисует script.js. */
.map__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background-color: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--radius-sm);
}

.map__notice[hidden] {
  display: none;
}

/* Иконка-восклицание в акцентном кружке */
.map__notice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-bg);
  background-color: var(--color-accent);
  border-radius: 50%;
}

.map__notice-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---------- Уведомление «в этом городе нет меток» ----------
   Появляется при выборе города, для которого ни одной метки нет.
   Контейнера в разметке нет: блок создаёт script.js и вставляет
   перед картой, поэтому правило подстраховано на оба состояния.
   Вид совпадает с .map__notice, чтобы оба сообщения читались
   как одно семейство уведомлений. */
.map__city-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background-color: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: var(--radius-sm);
}

.map__city-notice[hidden] {
  display: none;
}

/* ---------- Балун метки ----------
   Разметку формирует script.js (buildBalloonBody), классы
   .map-balloon* живут внутри балуна Яндекс.Карт (.ymaps-2-1-*-balloon).
   Ширина ограничена, чтобы на мобильном балун не выходил за экран. */
.map-balloon {
  width: 240px;
  max-width: min(240px, 68vw);
  font-family: var(--font-main);
  color: var(--color-text);
}

.map-balloon__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Миниатюра 60×60, круглая */
.map-balloon__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  overflow: hidden;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 50%;
}

.map-balloon__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Заглушка вместо фото: инициалы */
.map-balloon__thumb--empty {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent);
}

.map-balloon__info {
  min-width: 0;
}

.map-balloon__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #12151C;
  overflow-wrap: anywhere;
}

.map-balloon__years {
  margin-top: 2px;
  font-size: 13px;
  color: #5C6270;
}

/* Кнопка «Открыть карточку»: крупная и заметная (touch-friendly) */
.map-balloon__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  color: #12151C;
  background-color: var(--color-accent);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition);
}

.map-balloon__button:hover,
.map-balloon__button:focus {
  background-color: var(--color-accent-hover);
}

/* ---------- Список карточек в балуне (группа меток) ----------
   Когда в одной точке (один мазар) похоронено несколько человек,
   балун показывает их списком: каждый — мини-карточка на прежней
   разметке .map-balloon (фото, ФИО, годы, кнопка). Между карточками —
   разделитель. Ширина контейнера та же, что у одиночной карточки. */
.map-balloon-list {
  width: 240px;
  max-width: min(240px, 68vw);
  font-family: var(--font-main);
  color: var(--color-text);
}

.map-balloon-list__item {
  display: flex;
  align-items: flex-start;
}

/* Разделитель между карточками. У первой карточки линии нет; у каждой
   следующей — border-top с отступами, чтобы списки не сливались. */
.map-balloon-list__item + .map-balloon-list__item {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   Подвал
   ============================================================ */
.footer {
  padding: 24px;
  text-align: center;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.footer__rights {
  font-size: 14px;

/* ============================================================
   Табы заявки и ТВ-форма: очень узкие экраны (до 375px)
   ============================================================ */
@media (max-width: 375px) {
  /* Табы на всю ширину, друг под другом — подписи длинные */
  .request-tabs {
    flex-direction: column;
  }

  .request-tab {
    width: 100%;
    text-align: center;
  }

  .hero__title--tv {
    font-size: 22px;
  }

  .request__form {
    padding: 18px 12px;
  }
}

  color: var(--color-text-muted);
}

/* ============================================================
   Адаптивность
   ============================================================ */
@media (max-width: 768px) {
  /* Мобильные отступы задаются одной переменной: и шапка, и .main
     автоматически синхронно сужаются до 16px. */
  :root {
    --content-pad: 16px;
  }

  .header__left {
    gap: 12px;
  }

  .header__logo img {
    height: 32px;
  }

  .header__nav {
    display: none;
  }

  .main {
    padding: 28px var(--content-pad) 48px;
  }

  .hero__title {
    font-size: 26px;
  }

  /* Орнамент на узком экране: меньше вертикальные отступы
     (по бокам 0 — отступы уже даёт .main) */
  .ornament-wrap {
    padding: 24px 0;
  }

  .hero__subtitle {
    font-size: 15px;
  }

  .hero__lead {
    font-size: 15px;
  }

  .search__form {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  /* Плавающая подпись на узком экране: 13px вместо 15px,
     чтобы длинные подписи («Год рождения / смерти») не обрезались */
  .search__label {
    font-size: 13px;
  }

  .search__input {
    font-size: 14px;
  }

  .search__actions {
    flex-direction: column;
  }

  .search__button {
    width: 100%;
  }

  .map__canvas {
    height: 320px;
  }

  /* Балун на узком экране: компактнее, но кнопка остаётся крупной */
  .map-balloon {
    width: 200px;
    max-width: min(200px, 62vw);
  }

  .map-balloon__thumb {
    width: 52px;
    height: 52px;
  }

  .map-balloon__name {
    font-size: 14px;
  }

  /* Форма заявки на мобильном: одна колонка, кнопки на всю ширину */
  .request__form {
    padding: 20px 16px;
  }

  /* Строка «Отчество + даты» на узком экране — в одну колонку */
  .request-grid-3 {
    grid-template-columns: 1fr;
  }

  /* Строки «Имя + Отчество» и «Даты жизни» на узком экране — по одной колонке */
  .request-grid-2 {
    grid-template-columns: 1fr;
  }

  .request__button {
    width: 100%;
  }

  .request__thumb {
    width: 84px;
    height: 84px;
  }
}

/* ============================================================
   Модалка успешной отправки заявки
   Разметка: #request-success-modal (.modal-overlay + .modal-box)
   Классы .btn / .btn-primary общие с person.html — не переименовывать.
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  /* Скрытый оверлей не перехватывает клики */
  pointer-events: none;
  transition: opacity var(--transition), visibility var(--transition);
}

/* Атрибут hidden должен побеждать display: flex */
.modal-overlay[hidden] {
  display: none;
}

.modal-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Клик по затемнению закрывает модалку (обработчик в script.js) */
  cursor: pointer;
}

.modal-box {
  width: 100%;
  max-width: 480px;
  padding: 32px;
  text-align: center;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  /* Анимация появления: opacity + масштаб */
  transform: scale(0.92);
  opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
  /* Оверлей кликабелен (закрытие по фону) — на самой карточке курсор обычный */
  cursor: default;
}

.modal-overlay.is-visible .modal-box {
  transform: scale(1);
  opacity: 1;
}

.modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  font-size: 32px;
  line-height: 1;
  color: var(--color-accent);
  background-color: rgba(212, 175, 55, 0.12);
  border: 2px solid var(--color-accent);
  border-radius: 50%;
}

.modal-title {
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-text);
}

.modal-text {
  margin-bottom: 24px;
  font-size: 15px;
  color: var(--color-text-muted);
}

/* Кнопки модалки (золотая основная и приглушённая отмены) */
.btn {
  padding: 13px 32px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.btn-primary {
  color: var(--color-bg);
  background-color: var(--color-accent);
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.modal-box .btn {
  min-width: 160px;
}

/* ---------- Модалка: мобильные ---------- */
@media (max-width: 768px) {
  .modal-box {
    width: 90%;
    padding: 24px;
  }

  .modal-box .btn {
    width: 100%;
  }
}

/* Отключённая анимация: модалка появляется мгновенно, но остаётся видимой */
@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-box {
    transition: none;
  }

  .modal-box {
    transform: none;
  }
}