/* ===== ТЕМА: светлая / тёмная ===== */

:root {
  --bg-body: #f9fafb;
  --bg-hero: linear-gradient(rgba(0,77,64,0.9), rgba(0,77,64,0.9));
  --bg-card: #ffffff;
  --nav-bg: #ffffff;
  --text-main: #111827;
  --text-muted: #4b5563;
  --accent: #0f766e;
  --accent-soft: #059669;
}

html.dark {
  --bg-body: #020617; /* фон страницы */
  --bg-hero: linear-gradient(135deg, #022c22, #020617);
  --bg-card: #02091f; /* фон карточек — чуть светлее и более «синий» */
  --nav-bg: rgba(15,23,42,0.97);
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --accent: #22c55e;
  --accent-soft: #4ade80;
}

body {
  background-color: var(--bg-body);
  color: var(--text-main);
}

/* Сделать тёмную тему реально тёмной */
html.dark body {
  background-color: #020617 !important;
  color: #e5e7eb;
}

/* ===== Карточки и фоны в тёмной теме ===== */

/* Базовые "светлые" фоны → карточки */
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
  background-color: var(--bg-card) !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

/* Цветные карточки (amber / teal / green) — общая подсветка */
html.dark .bg-amber-50,
html.dark .bg-amber-100,
html.dark .bg-teal-50,
html.dark .bg-green-50,
html.dark .bg-green-100 {
  background:
    radial-gradient(circle at top left, rgba(45, 212, 191, 0.16), transparent 55%),
    #02091f !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
}

/* ВУС 837д (ВДВ) — синий вариант в тёмной теме */
html.dark #vusi .bg-indigo-50 {
  background:
    radial-gradient(circle at top left, rgba(129, 140, 248, 0.25), transparent 55%),
    #02091f !important;
  border-color: rgba(129, 140, 248, 0.7) !important;
}

/* бордеры у десантных элементов */
html.dark #vusi .border-indigo-50,
html.dark #vusi .border-indigo-100 {
  border-color: rgba(129, 140, 248, 0.7) !important;
}

/* индиго-текст (иконка и заголовок) чуть подсветим */
html.dark #vusi .text-indigo-800,
html.dark #vusi .text-indigo-700 {
  color: #c4b5fd !important;
}

/* Правовая информация и льготы — чтобы не светился в тёмной теме */
html.dark details.bg-green-50 {
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.25), rgba(15, 23, 42, 0.95));
  border-color: rgba(52, 211, 153, 0.55) !important;
}

/* Заголовок summary */
html.dark details.bg-green-50 summary {
  color: #bbf7d0; /* светло-зелёный */
}

/* Текст внутри зелёного блока */
html.dark details.bg-green-50 ul,
html.dark details.bg-green-50 li,
html.dark details.bg-green-50 p {
  color: var(--text-muted);
}

/* Тени в тёмной теме */
html.dark .shadow,
html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.85) !important;
}

/* ===== Текстовые цвета в тёмной теме ===== */

html.dark .text-gray-600,
html.dark .text-gray-700,
html.dark .text-gray-800,
html.dark .text-gray-900 {
  color: var(--text-muted) !important;
}

html.dark .text-black {
  color: var(--text-main) !important;
}

html.dark .text-teal-900,
html.dark .text-teal-800 {
  color: #a5f3fc !important;
}

/* ===== Ссылки "как в Word" ===== */

.word-link {
  color: #0000EE;
  text-decoration: underline;
}

.word-link:hover {
  color: #551A8B;
}

html.dark .word-link {
  color: #60a5fa;
}

html.dark .word-link:hover {
  color: #a855f7;
}

/* ===== Общие стили контента ===== */

/* Красная строка для текста "Что такое ВУС" */
#what-is-vus p {
  text-indent: 1.5em !important;
}

/* Хедер с фоном */
.hero-bg {
  background: var(--bg-hero);
  background-size: cover;
  background-position: center;
}

/* Иконки без фона */
.icon-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
}

/* Подсказки (tooltip) для карточек ВУС */
.tooltip {
  position: relative;
}

.tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1a3c34;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 10;
}

/* Отступы между ссылками меню (на всякий) */
nav a {
  margin-bottom: 8px;
}

/* ===== Навигация (верхнее меню) ===== */

nav.sticky {
  margin-top: 8px;
  position: sticky;      /* на всякий случай продублируем */
  top: 0;
  z-index: 40;
  background: linear-gradient(
    to bottom,
    rgba(15, 118, 110, 0.06),
    rgba(255, 255, 255, 0.98)
  );
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.06),
    0 16px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.15s ease;
}

/* лёгкое свечение снизу */
nav.sticky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
  pointer-events: none;
  background: radial-gradient(
    ellipse at top,
    rgba(15, 23, 42, 0.15),
    transparent 65%
  );
}

/* ТЁМНАЯ ТЕМА — более плотная шапка и бирюзовый "кайф" снизу */
html.dark nav.sticky {
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.98),
    rgba(15, 23, 42, 0.97)
  );
  box-shadow:
    0 1px 0 rgba(15, 23, 42, 0.8),
    0 20px 40px rgba(0, 0, 0, 0.9);
  border-bottom: 1px solid rgba(56, 189, 248, 0.33);
}

html.dark nav.sticky::after {
  background: radial-gradient(
    ellipse at top,
    rgba(56, 189, 248, 0.35),
    transparent 70%
  );
}

/* ===== Фон секций в тёмной теме (чередуем оттенки) ===== */

/* базовые "плоские" секции — почти чёрный */
html.dark #what-is-vus,
html.dark #about,
html.dark #benefits,
html.dark #contact {
  background-color: #020617 !important;
}

/* секции с бОльшим контрастом / карточками */
html.dark #benefits-top,
html.dark #schools {
  background:
    radial-gradient(circle at top, rgba(56, 189, 248, 0.22), transparent 60%),
    #02091f !important;
}

/* секция ВУС — отдельный градиент, чтобы не светился tailwind-градиент */
html.dark #vusi {
  background:
    radial-gradient(circle at top, rgba(56, 189, 248, 0.24), transparent 55%),
    radial-gradient(circle at bottom, rgba(45, 212, 191, 0.18), transparent 55%),
    #020617 !important;
}

/* CTA-кнопка "Записаться на подготовку" — скрыта по умолчанию */
#ctaBtn {
  display: none;
}

/* Поведение на мобильных (до 640px) */
@media (max-width: 639px) {

  /* Сохраняем липкость */
  nav.sticky {
    position: sticky;
    top: 0;
  }

  /* Показываем кнопку возле бургера */
  #ctaBtn {
    display: inline-flex !important;
    position: absolute;
    top: 8px; /* выравнивание по высоте с бургером */
    right: 12px;
    z-index: 50;
    white-space: nowrap;
    padding: 6px 10px; /* компактнее для мобильных */
    font-size: 14px;
  }

  /* Кнопка переезжает внутрь меню */
  #ctaBtn.inside-menu {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 12px;
    width: 100%;
    justify-content: center;
  }
}

/* Общий стиль зелёных кнопок меню */
.menu-btn {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid #059669;
  border-radius: 8px;
  color: #059669;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

.menu-btn:hover,
.menu-btn.active {
  background-color: #059669;
  color: #ffffff;
}

/* меню-кнопки в тёмной теме чуть ярче */
html.dark .menu-btn {
  border-color: var(--accent-soft);
  color: var(--accent-soft);
  background-color: transparent;
}

html.dark .menu-btn:hover,
html.dark .menu-btn.active {
  background-color: var(--accent-soft);
  color: #020617;
}

/* Кнопка входа на портал (если используется) */
.btn-portal {
  padding: 8px 16px;
  border: 2px solid #065f46;
  border-radius: 8px;
  color: #065f46;
  font-weight: 700;
  transition: all 0.25s ease;
}

.btn-portal:hover {
  background-color: #065f46;
  color: #ffffff;
}

/* ===== ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ (солнце ↔ луна) ===== */

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 9999px;
  border: 1px solid rgba(15, 118, 110, 0.6);
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.08s ease;
}

/* по умолчанию прячем обе иконки */
.theme-icon-sun,
.theme-icon-moon {
  display: none;
  font-size: 1rem;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* СВЕТЛАЯ ТЕМА: показываем ОРАНЖЕВОЕ солнце */
html:not(.dark) .theme-icon-sun {
  display: inline-block;
  color: #f97316; /* оранжевый */
  opacity: 1;
  transform: scale(1);
}

html:not(.dark) .theme-icon-moon {
  display: none;
}

/* ТЁМНАЯ ТЕМА: показываем СИНЮЮ луну */
html.dark .theme-toggle {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(45, 212, 191, 0.6);
}

html.dark .theme-icon-sun {
  display: none;
}

html.dark .theme-icon-moon {
  display: inline-block;
  color: #38bdf8; /* голубовато-синий */
  opacity: 1;
  transform: scale(1);
}

/* ховер/актив */
.theme-toggle:hover {
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.25);
  transform: translateY(-1px);
}

.theme-toggle:active {
  transform: translateY(0);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.25);
}

/* ===== details / summary (раскрывающиеся блоки) ===== */

/* Убираем стандартный маркер браузера */
summary::-webkit-details-marker {
  display: none;
}

/* Крутим стрелку при открытии блока */
details[open] summary svg {
  transform: rotate(180deg);
}

/* ===== Яндекс.Карты и блок автошкол ===== */

#mapContainer {
  position: relative;
}

#yandexMap,
.ymaps-2-1-79-map,
.ymaps-2-1-79-map-bg {
  background: #fff !important;
  transition: opacity 0.4s ease;
}

/* В тёмной теме — "ночной" режим через CSS-фильтр */
html.dark #yandexMap,
html.dark .ymaps-2-1-79-map,
html.dark .ymaps-2-1-79-map-bg {
  background: #020617 !important;
  filter: invert(0.9) hue-rotate(180deg) saturate(1.1);
}

/* Затемнение карты */
#mapOverlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.4);
  opacity: 1;
  transition: opacity 0.3s ease;
}

#mapOverlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* На десктопе оверлей не нужен */
@media (min-width: 1025px) {
  #mapOverlay {
    display: none;
  }
}

/* Подсказка под картой для мобильных */
@media (max-width: 1024px) {
  #mapHintBox {
    display: block;
    margin-top: 10px;
    border: 2px solid #facc15;
    background: #fef9c3;
    color: #92400e;
    border-radius: 8px;
    padding: 10px 15px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
}

/* Мобильная/десктопная видимость списков автошкол */
.mobile-only {
  display: none;
}

@media (max-width: 1024px) {
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: none !important;
  }
}

/* Единый стиль иконок без фона для всех секций с карточками */
#about .icon-bg,
#benefits-top .icon-bg,
#benefits .icon-bg {
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
  display: inline-block;
  margin-bottom: 0.5rem; /* равномерный отступ под иконкой */
}

/* Размер и цвет самих иконок */
#about .icon-bg i,
#benefits-top .icon-bg i,
#benefits .icon-bg i {
  color: #0f766e; /* тёмно-бирюзовый */
  font-size: 1.875rem; /* ~ text-3xl */
}

/* Узкий текст длительности ВУС на десктопе */
@media (min-width: 1024px) {
  #vusi .vus-duration {
    white-space: nowrap;
  }
}
.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
}