@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Raleway:wght@400;700&display=swap");

/* ============================================================
   === 0. БАЗОВЫЕ НАСТРОЙКИ ===
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ПРЯЧЕМ КРУТИЛКУ, НО ОСТАВЛЯЕМ ХОД */
/* 1. ГЛОБАЛЬНЫЙ СКРОЛЛ: ПРЯЧЕМ КРУТИЛКУ И ВКЛЮЧАЕМ ПРИЛИПАНИЕ */
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overflow-x: hidden;
  scrollbar-width: none; /* Для Firefox */
}

html::-webkit-scrollbar {
  display: none; /* Для Chrome/Safari — ТЕПЕРЬ ПОЛОСЫ НЕТ, А ПРИЛИПАНИЕ ЕСТЬ */
}

/* 2. ЖЕСТКО: ТОЛЬКО ТРИ ГЛАВНЫХ ЭКРАНА — ЭТО НАШИ СТРАНИЦЫ */
.slogan-section,
.main-page,
.map-section {
  width: 100%;
  height: 100vh !important; /* Ровно один экран */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start; /* ЛИПНУТЬ СЮДА */
  scroll-snap-stop: always; /* ОДИН ПРОКРУТ — ОДИН ЭКРАН */
  position: relative;
  overflow: hidden;
}

/* 3. УБИРАЕМ ПРИЛИПАНИЕ У ВНУТРЕННИХ БЛОКОВ (Чтобы не конфликтовали) */
.tours-container-3d {
  width: 100%;
  height: 100% !important; /* Занимает весь .main-page */
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: none !important; /* НЕ ЛИПНУТЬ К НЕМУ ОТДЕЛЬНО */
}

html::-webkit-scrollbar {
  display: none; /* Для Chrome и Safari - ПОЛНОЕ УДАЛЕНИЕ ПОЛОСЫ */
}

body {
  margin: 0;
  padding: 0;
  background: #000;
  overflow-y: scroll; /* Скролл работает, просто его не видно */
}

/* ============================================================
   === 1. ГЛАВНЫЙ ЦЕНТР УПРАВЛЕНИЯ (ПЕРЕМЕННЫЕ) ===
   ============================================================ */
:root {
  --lozung-scale: 85%; /* Масштаб лозунга на 1 стр */
  --lozung-scale-size: 80%;

  /* 🎨 ГЛАВНЫЕ ЦВЕТА ОДИССЕИ */
  --neon-sky: #38bdf8; /* Небесный голубой */
  --neon-white: #ffffff; /* Чистое белое ядро неона */
  --hint-bg: rgba(0, 0, 0, 0.7); /* Фон пятна за текстом */

  /* ⏱️ СКОРОСТИ АНИМАЦИЙ */
  --speed-magic: 0.5s; /* Появление элементов */
  --speed-pulse: 5s; /* Пульсация неона */
  --delay-master: 2s; /* Общая задержка магии */

  /* 📏 РАЗМЕРЫ И МАСШТАБЫ */
  --map-glow-power: 1; /* Яркость карты (0.0 - 1.0) */
  --map-glow-spread: 50px;
  --map-border-width: 3px;
  --map-glow-color: #38bdf8;
}

/* ============================================================
   === 2. ГЛОБАЛЬНАЯ СЕТКА И СЕКЦИИ ===
   ============================================================ */
/* 1. ОБЫЧНЫЕ СТРАНИЦЫ (Оставляем как было) */
.slogan-section,
.main-page,
.map-section {
  width: 100%;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden; /* Тут пусть прячется лишнее */
  z-index: 1;
}

/* 2. КАРУСЕЛЬ ТУРОВ (УБИРАЕМ УЛЁТ, ВОЗВРАЩАЕМ ЦЕНТР) */
/* ИСПРАВЛЕННОЕ ВТОРОЕ МЕСТО (ЧТОБЫ НЕ УЛЕТАЛИ ВВЕРХ) */
.tours-container-3d {
  width: 100% !important;
  height: 100vh !important; /* Строго высота экрана */

  /* 🎯 ВОТ ТВОЙ ГЛАВНЫЙ ЯКОРЬ ЦЕНТРА: */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* ТЯНЕТ В ЦЕНТР ПО ВЕРТИКАЛИ */
  align-items: center !important; /* ТЯНЕТ В ЦЕНТР ПО ГОРИЗОНТАЛИ */

  margin: 0 !important;
  padding: 0 !important; /* Убираем любые отступы, которые толкают вверх */
  overflow: visible !important;
  position: relative;
  z-index: 10;
}

/* САМА КАРУСЕЛЬ (ЧТОБЫ НЕ ПЕРЕКОСИЛО ВНУТРИ) */
.swiper {
  width: 100% !important;
  height: auto !important; /* Пусть сама берет сколько надо под карточки */
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

/* --- ОРБИТАЛЬНАЯ СЕКЦИЯ (ЭКРАН 1) --- */
.slogan-section {
  z-index: 1 !important;
  pointer-events: none;
  background: transparent !important;
}

/* ✨ МАГИЯ БЛИКА (Lens Flare) */
.slogan-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.15) 50%,
    transparent
  );
  transform: skewX(-25deg);
  z-index: 1;
  animation: flare-swipe 10s infinite linear;
  pointer-events: none;
}

/* ============================================================
   === 3. ВИДЕОФОН ===
   ============================================================ */
.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
}

#bgVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1); /* Легкий зум видео */
}

/* ============================================================
   === 4. HEADER (ШАПКА И МЕНЮ) — ПОЛНЫЙ ИСПРАВЛЕННЫЙ КУСОК ===
   ============================================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100000;
  background: transparent;
  transition: transform 0.4s ease-in-out;
  display: block !important;
}

/* Скрипт скрытия при скролле */
.header.hidden {
  transform: translateY(-100%);
}

.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* ВСЁ ЖЕСТКО ВВЕРХ */
  padding: 0 40px;
  margin-top: 0 !important;
  width: 100%;
}
/* ЯДЕРНЫЙ ФИКС: Если в классе body есть "ymaps" и "fullscreen" — шапку в пекло */
body[class*="ymaps-"][class*="-fullscreen"] .header {
  display: none !important; /* Убираем совсем, чтоб не мешала кликать в крестик */
  pointer-events: none !important;
  z-index: -1 !important;
}

/* На всякий случай дублируем для твоего конкретного случая из скрина */
body.ymaps-2-1-79-fullscreen .header {
  display: none !important;
}

.left-side {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-top: 0 !important;
}

/* ЛОГОТИП В УГЛУ — ИСПРАВЛЕНИЕ С НЕОНОМ */
.logo-box img {
  height: 130px !important;
  margin-top: 10px !important;
  margin-left: -30px !important;

  /* Делаем лого белым */
  filter: brightness(0) invert(1) /* Добавляем СИНИЙ НЕОН вместо белого */
    drop-shadow(0 0 10px #38bdf8) drop-shadow(0 0 20px #38bdf8)
    drop-shadow(0 0 40px #0ea5e9) !important;

  position: relative;
  z-index: 10;
  pointer-events: none;
  transition: filter 0.4s ease; /* Чтобы плавно светилось */
}

/* Возвращаем кликабельность самой ссылке логотипа, если она есть */
.logo-box {
  position: relative;
  z-index: 11;
  pointer-events: none;
}
/* НАВИГАЦИЯ И ПОГОДА — ПРИЖАТЫ К ПОТОЛКУ */
.navigation,
.weather-capsule {
  display: flex;
  gap: 10px;
  /* ДВИГАЕМ ТУТ: */
  margin-top: 17px !important; /* ВВЕРХ (-) или ВНИЗ (+) */
  margin-left: -60px !important; /* ВЛЕВО (-) или ВПРАВО (+) */
}

/* 1. ПОЗИЦИОНИРОВАНИЕ (Двигаем отдельно) */

/* Блок меню */
.navigation {
  display: flex;
  gap: 10px;
  margin-top: 17px !important;
  /* 👇 КРУТИ ТУТ: двигаем только кнопки меню вправо */
  margin-left: auto !important;
  margin-right: 20px !important;
}

/* Блок погоды */
.weather-capsule {
  display: flex;
  align-items: center;
  margin-top: 17px !important;
  margin-left: 0 !important; /* Погода стоит на месте справа */
}

/* 2. СТИЛЬ (Возвращаем неон и синий фон и кнопкам, и погоде) */
.navigation a,
.weather-capsule {
  background: rgba(56, 189, 248, 1) !important;
  backdrop-filter: blur(15px);
  border: 1px solid #00f0ff !important;
  box-shadow:
    0 0 15px rgba(0, 240, 255, 0.5),
    inset 0 0 10px rgba(0, 240, 255, 0.3) !important;
  border-radius: 50px !important;
  padding: 8px 20px !important;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  font-family: "Caveat", cursive !important;
  font-size: 24px !important;
  color: #fff !important;
  text-decoration: none;
  height: fit-content;
  white-space: nowrap; /* Чтобы текст в кнопках не прыгал */
}

/* Ховер эффекты (тоже общие) */
.navigation a:hover,
.weather-capsule:hover {
  border-color: #fff !important;
  box-shadow:
    0 0 25px rgba(0, 240, 255, 0.8),
    inset 0 0 15px rgba(0, 240, 255, 0.6) !important;
  color: #00f0ff !important;
}

/* Эффект ховера */
.navigation a:hover,
.weather-capsule:hover {
  border-color: #fff !important;
  box-shadow:
    0 0 25px rgba(0, 240, 255, 0.8),
    inset 0 0 15px rgba(0, 240, 255, 0.6) !important;
  color: #00f0ff !important;
}

/* Внутренности погоды */
.city-modern-input {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  font-family: "Raleway", sans-serif !important;
  font-size: 16px;
  font-weight: 700;
  width: 100px;
  outline: none !important;
}

.weather-submit-btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}

#weatherResult {
  font-family: "Caveat", cursive !important;
  font-size: 22px;
  color: #00ffcc;
}

.capsule-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 10px;
}

.sound-btn-minimal {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}
/* Когда вешаем класс через JS — виджет становится "резиновым" */
#weatherWidget.weather-open {
  height: auto !important; /* Забиваем на 50px из инлайна */
  max-height: 1000px !important; /* Даем огромный запас, чтобы влез любой текст */
  padding-bottom: 20px !important; /* Чтобы текст снизу не прилипал к краю */
}

/* Фикс для контента, чтобы он появлялся плавно */
#weatherWidget.weather-open #weatherContent {
  display: block !important;
  opacity: 1 !important;
}

/* Текст совета — разрешаем ему занимать столько места, сколько надо */
#aiWeatherAdvice {
  white-space: normal !important; /* Чтобы текст переносился на новые строки */
  height: auto !important;
}

/* Поворот стрелки (если она у тебя внутри кнопки) */
#weatherToggleBtn.weather-open #weatherArrow {
  transform: rotate(180deg) !important;
}

/* Состояние когда открыто */
#weatherWidget.weather-open {
  /* 1. РАСШИРЯЕМ ВЛЕВО (увеличиваем ширину) */
  width: 500px !important; /* Было 280px, поставил 400px. Ставь больше, если надо еще левее */

  /* 2. УВЕЛИЧИВАЕМ БУКВЫ */
  font-size: 18px !important; /* Общий размер шрифта */

  height: auto !important;
  max-height: 1000px !important;
  padding: 10px !important; /* Добавим побольше отступов для красоты */
}

/* Увеличиваем шрифт в конкретных местах */
#weatherWidget.weather-open #miniCityDisplay {
  font-size: 34px !important; /* Город покрупнее */
}

#weatherWidget.weather-open #miniTemp {
  font-size: 32px !important; /* Градусы покрупнее */
}

#weatherWidget.weather-open #aiWeatherAdvice {
  font-size: 22px !important; /* Текст совета от ИИ */
  line-height: 1 !important; /* Чтобы буквы не слипались */
}

/* Чтобы инпуты не смотрелись мелкими в большом окне */
#weatherWidget.weather-open input {
  font-size: 16px !important;
  padding: 12px !important;
}

/* ЖЕСТКАЯ УТИЯЖКА ТЕКСТА ОТ ИИ */
#aiWeatherAdvice {
  /* ГЛАВНАЯ СТРОЧКА: превращает все переносы строк и лишние пробелы в один обычный пробел */
  white-space: normal !important;

  /* Схлопываем межстрочный интервал до минимума */
  line-height: 1.1 !important;

  /* Убираем все внутренние и внешние отступы, которые могут давать "дыры" */
  margin: 0 !important;
  padding: 0 !important;

  /* Если ИИ вдруг присылает теги <br>, эта строчка их аннигилирует (скроет) */
}

#aiWeatherAdvice br {
  display: none !important;
}

/* Дополнительно: чтобы текст не разлетался по краям */
#aiWeatherAdvice::first-line {
  line-height: 0 !important;
}

/* ============================================================
   === 5. СВАЙПЕР И КАРТОЧКИ ТУРОВ (ЭКРАН 2) ===
   ============================================================ */
/* 3D ЗАГОЛОВОК */
.tours-3d-zone {
  position: relative;
  perspective: 2000px;
  width: 100%;
  padding-top: 50px;
}

/* === 3. 3D ЗАГОЛОВОК ТУРОВ ("НАШИ ТУРЫ") === */
.tours-title-3d {
  font-family: "Caveat", cursive !important;
  font-size: 5vw;
  text-align: center;
  color: #ffffff !important; /* Строго чистый белый цвет букв */
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 15px;
  margin-bottom: -20px;

  /* Две анимации: сначала красивый вылет (flyIn), а потом бесконечное моргание (neon-blink) */
  animation:
    flyIn 3.5s ease-out forwards,
    neon-blink 1.5s infinite alternate !important;
}

/* 🔥 МАГИЯ МОРГАЮЩЕЙ ПОДСВЕТКИ (от тусклого к яркому) */
@keyframes neon-blink {
  0% {
    /* Спокойное свечение */
    text-shadow:
      0 0 5px rgba(255, 255, 255, 0.5),
      0 0 10px rgba(0, 240, 255, 0.3);
  }
  100% {
    /* Яркая вспышка (моргание) */
    text-shadow:
      0 0 15px rgba(255, 255, 255, 1),
      0 0 30px rgba(255, 255, 255, 0.8),
      0 0 50px rgba(0, 240, 255, 0.9),
      0 0 80px rgba(0, 240, 255, 0.6);
  }
}

/* СВАЙПЕР */
.swiper {
  width: 100%;
  height: 850px !important;
  margin-top: 15px !important;
  perspective: 1200px;
  overflow: visible !important;
  display: flex !important;
  align-items: flex-start !important;
}

.swiper-slide {
  width: 480px !important;
  height: 700px !important;
  transition: transform 0.3s ease;
}

.swiper-slide:hover {
  transform: translateY(-10px);
}

/* Убиваем фантомные тени Swiper в 3D */
.swiper-slide-shadow,
.swiper-slide-shadow-left,
.swiper-slide-shadow-right,
.swiper-slide-shadow-bottom,
.swiper-slide-shadow-top {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* КАРТОЧКА (GLASS NEON) */
.tour-card {
  position: relative;
  background: transparent !important;
  border-radius: 20px;
  padding: 15px !important; /* Уменьшил паддинг, чтоб больше влезло */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important; /* Липнем к верху */
  gap: 5px !important; /* Минимальный зазор между блоками */
  height: 100% !important;
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.3),
    0 10px 40px rgba(0, 0, 0, 0.5) !important;
  z-index: 1;
}

.swiper-slide:hover .tour-card {
  border-color: rgba(0, 240, 255, 0.5) !important;
  box-shadow: 0 15px 50px rgba(0, 240, 255, 0.2) !important;
}

.tour-card div,
.tour-card-content,
.card-info {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================================
   🧬 УЛЬТИМАТИВНАЯ РЕЗИНА: КАРТОЧКА РАСТЕТ ПОД ТЕКСТ
   ============================================================ */

/* 1. КАРТОЧКА: Убираем жесткую высоту! */
.tour-card {
  position: relative;
  background: rgba(0, 15, 30, 0.9) !important;
  border: 2px solid #38bdf8 !important;
  border-radius: 20px;
  padding: 15px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important; /* Небольшой зазор между блоками */

  /* 🔥 ВОТ ОНА РЕЗИНА: Высота АВТО, зависит от контента */
  height: auto !important;
  min-height: 350px !important; /* Меньше этого не сжимать */
  overflow: visible !important; /* Текст должен быть виден весь! */

  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3) !important;
  z-index: 1;
  transition: all 0.3s ease;
}

/* 2. ФОТО: Фиксируем высоту, чтоб не прыгала */
.tour-image {
  width: 100%;
  height: 300px !important; /* Четкая высота фотки */
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 5px !important;
  border: 3px solid rgba(255, 255, 255, 0.95) !important;
  flex-shrink: 0 !important;
}

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

/* 3. НАЗВАНИЕ: КРУПНОЕ, ВЛЕЗАЕТ ВСЁ, БЕЗ ДЫР */
.tour-card h3 {
  font-family: "Caveat", cursive !important;
  font-size: 32px !important; /* Крупный размер */
  color: #fff !important;
  text-align: center;
  line-height: 1.1 !important;

  /* Убираем жесткие рамки — пусть растет вниз */
  margin: 5px 0 !important;
  height: auto !important;
  min-height: auto !important;
  padding: 0 !important;
}

/* ============================================================
   💎 АКВАРИУМ: МАЛЕНЬКАЯ КАРТА — КОНСКИЙ ШРИФТ
   ============================================================ */

.price-info {
  /* 1. ВЫСОТА ОКНА: Срезал до 150px. 
       Это сделает саму карточку ТУРА короче и она влезет в экран! */
  height: 200px !important;

  width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  pointer-events: auto !important;
  z-index: 10 !important;

  background: rgba(255, 255, 255, 0.05) !important;
  border: 2px solid #38bdf8 !important;
  border-radius: 15px !important;
  padding: 5px !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  font-size: 20px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #38bdf8 rgba(255, 255, 255, 0.1) !important;
}

/* 2. ТЕКСТ ВНУТРИ: СИСТЕМА АВТО-МАСШТАБА */
.price-info p,
.price-info span,
.price-info b,
.price-info div,
.price-info strong {
  /* 🕹️ ВОТ ТВОЯ КРУТИЛКА МАСШТАБА (МЕНЯЙ ЭТИ 85px) */
  font-size: 105px !important;

  /* 🛡️ БРОНЯ: Чтобы буквы не вылетали за края рамки */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-all !important; /* Разрывает даже длинные слова, чтоб не перли вбок */
  white-space: normal !important;

  font-family: "Caveat", cursive !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 0.9 !important; /* Максимально сближаем строки */
  text-align: center !important;

  /* Добавляем маштабирование через трансформацию, если букв слишком много */
  transform-origin: center top;

  width: 100% !important;
  display: block !important;
  pointer-events: none !important;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.9) !important;
}
/* 3. СКРОЛЛБАР (Сделал поярче, чтоб видели, что надо крутить) */
.price-info::-webkit-scrollbar {
  width: 6px !important;
}
.price-info::-webkit-scrollbar-thumb {
  background: #38bdf8 !important;
  border-radius: 10px !important;
}

/* 7. СКРОЛЛБАР (Chrome, Safari, Edge) */
.price-info::-webkit-scrollbar {
  width: 6px !important;
  display: block !important;
}
.price-info::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
}
.price-info::-webkit-scrollbar-thumb {
  background: #38bdf8 !important;
  border-radius: 10px !important;
  box-shadow: 0 0 5px rgba(56, 189, 248, 0.5) !important;
}
/* 5. КНОПКА: Всегда в самом низу карточки */
.card-buttons {
  /* Пружина переехала сюда — она вытолкнет кнопку вниз */
  margin-top: auto !important;
  width: 100%;
  padding-top: 10px;
}

.want-btn {
  width: 100%;
  padding: 5px !important;
  background: rgba(56, 189, 248, 0.2) !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 12px;
  font-size: 15px !important;
  text-transform: uppercase;
  color: #fff !important;
}

/* ============================================================
   === 6. КАРТА ОДИССЕИ (ЭКРАН 3) ===
   ============================================================ */

.map-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding: 3vh 2vw 4vh 2vw; /* Зазоры от краев экрана */
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

.map-wrapper {
  position: relative;
  width: 100%;
  height: 65vh; /* ЖЕСТКО ОГРАНИЧИЛИ КАРТУ, чтобы дать место лозунгу */
  margin-bottom: 2vh;

  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 30px;
  padding: 15px;
  border: var(--map-border-width, 2px) solid var(--map-glow-color, #00f0ff) !important;
  box-shadow:
    0 0 var(--map-glow-spread, 20px) rgba(0, 240, 255, 0.8),
    inset 0 0 20px rgba(0, 240, 255, 0.3) !important;
}

#map {
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px !important;
  filter: invert(90%) hue-rotate(180deg) brightness(1.2) contrast(95%) !important;
}

/* --- НИЖНЯЯ ПАНЕЛЬ И ЛОЗУНГ --- */
.bottom-bar {
  position: relative;
  display: flex;
  justify-content: center; /* Центрируем лозунг */
  align-items: center;
  width: 100%;
  flex-grow: 1; /* Занимает всё оставшееся пространство снизу */
}

/* 1. ГЛОБАЛЬНАЯ КНОПКА (Всегда видна, небесный стиль) */
/* 1. ГЛОБАЛЬНАЯ КНОПКА (Обновленный стиль Одиссея) */
.ai-assistant {
  position: fixed !important;
  bottom: 30px;
  left: 30px;
  /* Наш фирменный темный фон с прозрачностью */
  background: rgba(56, 189, 248, 0.8) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #fff !important; /* Текст белый, так лучше читается */
  padding: 12px 25px;
  border-radius: 30px;
  z-index: 1000001 !important;
  font-weight: 900;
  font-family: "Caveat", cursive;
  font-size: 26px; /* Чуть крупнее для стиля */
  cursor: pointer;

  /* Наш голубой неон #38BDF8 */
  border: 2px solid #38bdf8 !important;
  box-shadow:
    0 0 15px rgba(56, 189, 248, 0.5),
    inset 0 0 10px rgba(56, 189, 248, 0.2) !important;

  transition: all 0.3s ease;
  pointer-events: auto !important;
  text-shadow: 0 0 8px #38bdf8; /* Подсветка текста */
}

.ai-assistant:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 0 25px #38bdf8 !important;
  color: #38bdf8 !important;
}

/* 2. КНОПКА ТОЛЬКО ДЛЯ КАРТЫ (Темная, сидит внизу карты) */
.ai-map-btn {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 50; /* Внутри карты этого хватит */
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 20px;
  border-radius: 15px;
  border: 1px solid rgba(0, 240, 255, 0.5);
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  pointer-events: auto !important;
}

.ai-map-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

/* Лозунг в две строки */
.map-royal-slogan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vh; /* Динамический зазор между строк */

  font-family: "Ruslan Display", cursive !important;
  color: #ffffff !important;
  text-align: center;
  margin: 0 !important;
  z-index: 10;

  animation: neon-flicker 2s infinite alternate !important;
}

.map-royal-slogan .slogan-bold {
  font-size: 5.5vw; /* Огромные буквы первой строки */
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.map-royal-slogan .slogan-light {
  font-family: "Caveat", cursive !important; /* Ставим расписной шрифт */
  font-size: 3.5vw;
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
  /* Усиливаем свечение для тонких линий шрифта */
  text-shadow:
    0 0 10px var(--map-glow-color),
    0 0 20px var(--map-glow-color);
}

/* === АНИМАЦИЯ НЕОНОВОГО МЕРЦАНИЯ === */
@keyframes neon-flicker {
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow:
      2px 2px 5px rgba(0, 0, 0, 1),
      0 0 10px #fff,
      0 0 20px var(--map-glow-color, #00f0ff),
      0 0 40px var(--map-glow-color, #00f0ff),
      0 0 80px var(--map-glow-color, #00f0ff);
    opacity: 1;
  }
  20%,
  24%,
  55% {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
    opacity: 0.6;
  }
}
/* ============================================================
   === 7. ПОДСКАЗКИ, МОДАЛКИ И AI ===
   ============================================================ */
.master-neon-box,
.geo-hint,
.urban-scroll-hint {
  position: absolute;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 80px 40px 30px 100px !important;
  pointer-events: none;
  opacity: 0;
  animation: magicFadeIn var(--speed-magic) ease-out var(--delay-master)
    forwards;
}

.master-neon-box h2, .geo-title,/* --- ПЕРВАЯ СТРАНИЦА: ТЕКСТ "НАШИ ТУРЫ" В УГЛУ --- */
.hint-title {
  font-family: "Caveat", cursive !important;
  font-size: 45px;
  color: #ffffff !important; /* Строго чисто-белый цвет */

  /* Ставим новую анимацию без инверсии цвета! */
  animation: hint-neon-blink 1.5s infinite alternate !important;
}

/* 🔥 Моргающая белая подсветка специально для этого текста */
@keyframes hint-neon-blink {
  0% {
    /* Тусклое свечение (выключено) */
    text-shadow:
      0 0 5px rgba(255, 255, 255, 0.5),
      0 0 10px rgba(0, 240, 255, 0.3);
  }
  100% {
    /* Яркая вспышка (включено) */
    text-shadow:
      0 0 15px rgba(255, 255, 255, 1),
      0 0 30px rgba(255, 255, 255, 0.8),
      0 0 50px rgba(0, 240, 255, 0.9);
  }
}

.geo-title {
  font-size: 28px;
}

.master-neon-box img,
.geo-style,
.custom-arrow-ink {
  width: 50px;
  animation:
    neon-pulse-flow 5s infinite alternate,
    arrow-bounce-smooth 2s infinite ease-in-out !important;
}

.custom-arrow-ink {
  width: 100px;
}

/* --- ГЕОГРАФИЯ: ЖЕСТКИЙ ПЕРЕНОС И МАСШТАБ --- */

.geography-title-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* В угол */
  padding-left: 5vw;
  margin-top: 100px;
}

/* Эта херня делает из строки столбик */
.massive-geography {
  display: flex !important;
  flex-direction: column !important; /* ВОТ ТУТ ОНИ РАЗДЕЛЯЮТСЯ */
  line-height: 0.8;
}

.geo-top {
  display: block !important;
  font-size: 2.5vw !important; /* МАКСИМУМ */
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  animation: hint-neon-blink 1.5s infinite alternate !important;
}

.geo-bottom {
  display: block !important;
  font-family: "Caveat", cursive !important;
  font-size: 3vw !important;
  color: #00f0ff;
  margin-top: -5px;
}

/* СПЕЦ-ФИКС ДЛЯ 2 СТРАНИЦЫ */
.corner-fix {
  bottom: -15px !important;
  right: -15px !important;
  align-items: flex-end !important;
  padding: 120px 40px 30px 150px !important;
}
.corner-fix h2 {
  text-align: right !important;
  margin-right: 20px !important;
}
.corner-fix img {
  margin-right: 50px !important;
}

/* ТАБЛИЧКА-УКАЗАТЕЛЬ */
.scroll-hint-plate {
  position: absolute;
  bottom: 50px;
  right: 50px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(15px);
  border: 2px solid #00f0ff;
  border-radius: 20px;
  padding: 15px 25px;
  text-align: center;
  color: #fff;
  font-family: "Caveat", cursive;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
  z-index: 10000;
  opacity: 0;
  transform: translateX(100px);
  animation: plate-fly 1.5s ease-out 3.5s forwards;
}

/* МОДАЛКИ И ЧАТ */

/* МЕНЯЕМ .full-modal на .modal-overlay */
.modal-overlay {
  display: none; /* Убираем !important, чтобы JS мог менять на flex */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(15px);
  z-index: 2000000 !important; /* Самый высокий уровень */
  justify-content: center;
  align-items: center;
}

/* Внутри модалки всё должно нажиматься */
.modal-content {
  pointer-events: auto !important;
}

/* --- ОБНОВЛЕННЫЙ ЧАТ: НЕБЕСНЫЙ СТИЛЬ --- */
#aiChat {
  display: none;
  position: fixed;
  bottom: 100px;
  left: 30px;
  width: 380px;
  height: 550px;

  /* Небесно-голубой градиент с размытием */
  background: linear-gradient(
    135deg,
    rgba(56, 189, 248, 0.5),
    rgba(56, 189, 248, 0.5)
  ) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;

  border-radius: 25px;
  z-index: 100000 !important;

  /* ТВОЙ ФИРМЕННЫЙ ОБОДОК */
  border: 2px solid #00f0ff !important;
  box-shadow:
    0 0 25px rgba(0, 240, 255, 0.5),
    inset 0 0 15px rgba(0, 240, 255, 0.3) !important;

  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}

.chat-header {
  background: rgba(0, 122, 204, 0.8) !important; /* Как твои кнопки в меню */
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(0, 240, 255, 0.5);
}

.chat-header span {
  font-family: "Caveat", cursive !important;
  font-size: 26px !important;
  color: #fff !important;
  text-shadow: 0 0 10px #00f0ff;
}

/* Поле вывода сообщений */
#chatBody {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
  scrollbar-width: thin;
  scrollbar-color: #00f0ff transparent;
}

/* Сообщения */
.bot-msg {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 15px 15px 15px 0;
  padding: 10px;
  margin-bottom: 10px;
  color: #fff;
  border-left: 3px solid #00f0ff;
}
.user-msg {
  background: rgba(0, 240, 255, 0.2);
  border-radius: 15px 15px 0 15px;
  padding: 10px;
  margin-bottom: 10px;
  color: #fff;
  text-align: right;
  border-right: 3px solid #fff;
}

/* Инпут */
.chat-input-area {
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  gap: 10px;
}

#chatInput {
  flex: 1;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid #00f0ff !important;
  border-radius: 10px;
  color: #fff !important;
  padding: 8px 12px;
  outline: none;
}
/* ============================================================
   === 8. АНИМАЦИИ И ГЕНЕЗИС (КЛЮЧЕВЫЕ КАДРЫ) ===
   ============================================================ */

/* ОБЩИЕ ПЛАВНЫЕ АНИМАЦИИ */
@keyframes simpleFadeIn {
  to {
    opacity: 1;
  }
}
@keyframes magicFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.header-magic {
  opacity: 0;
  animation: simpleFadeIn var(--speed-magic) ease-out var(--delay-master)
    forwards !important;
}

@keyframes plate-fly {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes flyIn {
  0% {
    opacity: 0;
    transform: translateZ(-2000px) scale(0.1) rotateX(45deg);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) scale(1) rotateX(0deg);
  }
}
@keyframes arrow-bounce-smooth {
  0%,
  100% {
    transform: scaleX(-1) rotate(15deg) translateY(0);
  }
  50% {
    transform: scaleX(-1) rotate(15deg) translateY(15px);
  }
}

/* НЕОНОВЫЕ ПУЛЬСАЦИИ */
@keyframes neon-pulse-flow {
  0% {
    color: #fff;
    filter: invert(1) drop-shadow(0 0 5px #fff);
    text-shadow: 0 0 10px #fff;
  }
  50% {
    color: #00f0ff;
    filter: invert(1) drop-shadow(0 0 15px #00f0ff);
    text-shadow: 0 0 20px #00f0ff;
  }
  100% {
    color: #00ff96;
    filter: invert(1) drop-shadow(0 0 15px #00ff96);
    text-shadow: 0 0 20px #00ff96;
  }
}

@keyframes neon-royal-pulse {
  0% {
    color: var(--neon-white);
    text-shadow:
      0 0 10px var(--neon-white),
      0 0 20px var(--neon-white),
      0 0 30px var(--neon-sky);
  }
  50% {
    color: var(--neon-sky);
    text-shadow:
      0 0 15px var(--neon-white),
      0 0 30px var(--neon-sky),
      0 0 50px var(--neon-sky);
  }
  100% {
    color: var(--neon-white);
    text-shadow:
      0 0 10px var(--neon-white),
      0 0 20px var(--neon-white),
      0 0 30px var(--neon-sky);
  }
}

@keyframes flare-swipe {
  0% {
    left: -150%;
  }
  15% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}

/* 💥 ЭФФЕКТ "ЧЕРНАЯ ДЫРА И ВЗРЫВ ГЕНЕЗИСА" ДЛЯ ЛОГОТИПА */
.slogan-logo-wow {
  pointer-events: auto;
  margin-top: -20px;
  width: var(--lozung-scale-size);
  height: auto;
  min-height: 250px;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transform: perspective(1000px) translateZ(-5000px) scaleY(5) scaleX(0.1)
    rotateX(90deg);
  position: relative;
  z-index: 3 !important;
  animation:
    genesisBurst 5s cubic-bezier(0.19, 1, 0.22, 1) forwards,
    electricUndulate 8s linear 5s infinite;
}

.slogan-logo-wow:active {
  animation: glitch-anim 0.2s linear infinite;
}

@keyframes glitch-anim {
  0% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(-5px, 5px);
  }
  20% {
    clip-path: inset(10% 0 80% 0);
    transform: translate(5px, -5px);
  }
  40% {
    clip-path: inset(40% 0 40% 0);
    transform: translate(-5px, 0);
  }
  60% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(5px, 5px);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
}

@keyframes genesisBurst {
  0% {
    opacity: 0;
    visibility: visible;
    transform: perspective(1000px) translateZ(-6000px) scaleY(15) scaleX(0.001)
      rotateX(110deg);
    filter: brightness(1) blur(30px);
    drop-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  12% {
    opacity: 0.9;
    transform: perspective(1000px) translateZ(-1500px) scaleY(15) scaleX(0.005)
      rotateX(100deg);
    filter: brightness(20) blur(10px);
    drop-shadow:
      0 0 50px #fff,
      0 0 100px #38bdf8;
  }
  18% {
    opacity: 1;
    transform: perspective(1000px) translateZ(-300px) scaleY(20) scaleX(0.001)
      rotateX(90deg);
    filter: brightness(100) blur(2px);
    drop-shadow:
      0 0 150px #fff,
      0 0 250px #38bdf8,
      0 0 400px #38bdf8;
  }
  20% {
    opacity: 1;
    transform: perspective(1000px) translateZ(0) scaleY(1) scaleX(1)
      rotateX(0deg) scale(1.8);
    filter: brightness(2) blur(0px);
    drop-shadow:
      0 0 50px #fff,
      0 0 100px #fff,
      0 0 150px #38bdf8,
      0 0 200px #38bdf8,
      0 0 300px blue;
  }
  28% {
    transform: perspective(1000px) translateZ(0) scaleY(1) scaleX(1)
      rotateX(0deg) scale(0.9);
    filter: drop-shadow(4px 0 0 rgba(255, 0, 0, 0.8))
      drop-shadow(-4px 0 0 rgba(0, 0, 255, 0.8)) brightness(1.5);
  }
  50% {
    transform: perspective(1000px) translateZ(0) scale(1.05);
    filter: drop-shadow(0 0 20px #fff) drop-shadow(0 0 40px #38bdf8)
      drop-shadow(0 0 60px #38bdf8);
  }
  100% {
    opacity: 1;
    visibility: visible;
    transform: perspective(1000px) translateZ(0) scale(0.65) rotateX(0deg);
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 40px rgba(56, 189, 248, 0.8))
      drop-shadow(0 0 80px rgba(56, 189, 248, 0.6));
  }
}

@keyframes electricUndulate {
  0%,
  100% {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.9))
      drop-shadow(0 0 40px rgba(0, 240, 255, 0.7))
      drop-shadow(0 0 80px rgba(0, 240, 255, 0.5));
  }
  33% {
    filter: drop-shadow(-2px -2px 15px rgba(255, 255, 255, 1))
      drop-shadow(0 0 50px rgba(0, 255, 255, 0.8))
      drop-shadow(0 0 90px rgba(0, 255, 255, 0.6));
  }
  66% {
    filter: drop-shadow(2px 2px 25px rgba(255, 255, 255, 0.8))
      drop-shadow(0 0 45px rgba(0, 100, 255, 0.8))
      drop-shadow(0 0 85px rgba(0, 100, 255, 0.6));
  }
}

/* Правило, которого у тебя не было в новом коде */
.modal-overlay.active {
  display: flex !important;
}

/* --- СИСТЕМА МОДАЛЬНЫХ ОКОН --- */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 122, 204, 0.6);
  backdrop-filter: blur(15px);
  z-index: 2000000 !important;
  justify-content: center;
  align-items: center;
}

/* Включатель окна */
.modal-overlay.active {
  display: flex !important;
}

/* ============================================================
   === ПУЛЬТ УПРАВЛЕНИЯ ДИЗАЙНОМ (КРУТИ ТУТ) ===
   ============================================================ */
:root {
  /* ЦВЕТА НЕБА И НЕОНА */
  --neon-sky: #38bdf8;
  --glass-color-inner: rgba(0, 122, 204, 0.6); /* Глубокий сине-голубой */
  --neon-glow: #38bdf8;

  /* ШРИФТЫ */
  --font-script: "Caveat", cursive; /* Красивый письменный */
  --font-main: "Raleway", sans-serif;
}

/* Обнови стиль заголовков в модалке */
#modalIframe h1,
#modalIframe h2 {
  font-family: var(--font-script) !important;
  font-size: 55px !important;
  color: var(--neon-sky);
  text-shadow: 0 0 15px var(--neon-sky);
}

/* Внешний затемнитель (Первый квадрат) */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--glass-color-outer);
  backdrop-filter: blur(var(--glass-blur-outer));
  z-index: 9999999 !important;
  justify-content: center;
  align-items: center;
}

.modal-overlay.active {
  display: flex !important;
}

/* Внутренний контейнер */
.modal-content {
  position: relative;
  width: 95%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* САМО ОКНО (Айфрейм - Второй квадрат) */
#modalIframe {
  width: 100%;
  height: 100%;
  background: var(--glass-color-inner) !important;
  backdrop-filter: blur(var(--glass-blur-inner));
  border: 2px solid var(--neon-glow);
  border-radius: 30px;
  /* Светящаяся рамка: внешняя и внутренняя */
  box-shadow:
    0 0 var(--neon-strength) var(--neon-glow),
    inset 0 0 calc(var(--neon-strength) / 2) var(--neon-glow);
  display: block;
}

/* Кнопка закрытия (Крестик) */
.modal-close {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 35px !important;
  height: 35px !important;
  background: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid #38bdf8 !important;
  border-radius: 50% !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.close-modal:hover {
  transform: scale(1.1) rotate(90deg);
  background: #f00;
}

/* ГИДЫ В ШЕРЕНГУ */
.gids-container {
  display: flex !important;
  flex-direction: row !important; /* В ряд */
  flex-wrap: nowrap !important; /* Не переносить на новую строку */
  gap: 30px;
  justify-content: flex-start;
  align-items: stretch;
  padding: 20px;
  overflow-x: auto; /* Скролл вбок, если не влезли */
}

/* Стиль карточки гида внутри окна */
.gid-card-horizontal {
  flex: 0 0 300px; /* Фиксированная ширина карточки */
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
}

.gid-card-horizontal img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 15px;
  margin-bottom: 15px;
  border: 1px solid var(--neon-glow);
}

/* ============================================================
   === ЧИСТЫЙ ФИКС ДЛЯ ПАНОРАМ (БЕЗ ТРОГАНЬЯ ОСТАЛЬНОГО) ===
   ============================================================ */

/* Сетка для галереи панорам, чтобы они не были в одну колонку */
.pano-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  padding: 20px !important;
  width: 100% !important;
}

/* Карточка панорамы в списке */
.pano-item {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #38bdf8 !important;
  border-radius: 15px !important;
  padding: 10px !important;
  transition: transform 0.3s ease !important;
}

.pano-item:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 0 15px #38bdf8 !important;
}

.pano-item img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

/* Название панорамы */
.pano-name {
  margin-top: 10px !important;
  font-family: "Caveat", cursive !important;
  font-size: 20px !important;
  color: #fff !important;
}

/* Окно, где крутится сама 360-панорама */
#panorama-view {
  width: 100% !important;
  height: 100% !important;
  background: #000 !important;
}

/* Чтобы модалка панорамы была поверх всего, но не ломала другие */
#panoModal.active,
#panoGalleryModal.active {
  display: flex !important;
}

/* ============================================================
   === TOTAL NEON: БЕЛЫЙ ШРИФТ, ГОЛУБОЙ ОБРУЧ, НИКАКОГО МЫЛА ===
   ============================================================ */

/* 1. ГЛАВНЫЙ ШРИФТ (ПРОПИСНОЙ) ДЛЯ ВСЕХ ЗАГОЛОВКОВ */
h1,
h2,
h3,
.price-info,
.pano-name,
#selectedTourName,
.navigation a {
  font-family: "Caveat", cursive !important;
  color: #ffffff !important; /* Строго белый текст */
  text-shadow:
    0 0 10px #38bdf8,
    0 0 20px #38bdf8 !important; /* Голубое свечение букв */
}

/* 2. КАРТОЧКА ТУРА: УБИРАЕМ РАЗМЫТИЕ И ДЕЛАЕМ ОБРУЧ */
.tour-card {
  background: rgba(
    0,
    122,
    204,
    0.4
  ) !important; /* Голубая подложка (прозрачная) */
  backdrop-filter: none !important; /* УБИРАЕМ МЫЛО (РАЗМЫТИЕ) */
  -webkit-backdrop-filter: none !important;

  /* НЕОНОВЫЙ ОБРУЧ (Внешний и внутренний свет) */
  border: 2px solid #38bdf8 !important;
  box-shadow:
    0 0 20px #38bdf8,
    inset 0 0 15px #38bdf8 !important;
  border-radius: 25px !important;
}

/* 3. ФОТО В КАРТОЧКЕ: ЧИСТОЕ И В РАМКЕ */
.tour-image {
  filter: none !important; /* Убираем размытие с самой фотки */
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 15px #38bdf8 !important;
}

/* 4. МОДАЛЬНЫЕ ОКНА (ГОЛУБАЯ ПОДЛОЖКА, БЕЛЫЙ ТЕКСТ) */
.modal-content {
  background: rgba(0, 40, 80, 0.8) !important; /* Темно-голубой фон окна */
  backdrop-filter: none !important; /* УБИРАЕМ МЫЛО ТУТ ТОЖЕ */
  border: 3px solid #38bdf8 !important;
  box-shadow:
    0 0 40px #38bdf8,
    inset 0 0 20px #38bdf8 !important;
}

/* 5. ПОЛЯ ВВОДА В ЗАЯВКЕ (НЕОНОВЫЕ ИНПУТЫ) */
.modern-input {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid #38bdf8 !important;
  color: #fff !important;
  font-family: "Raleway", sans-serif;
  border-radius: 10px;
  padding: 10px;
}

/* 6. КНОПКА "ХОЧУ" И "ОТПРАВИТЬ" */
.want-btn,
.order-submit-btn {
  background: #38bdf8 !important;
  color: #fff !important;
  font-family: "Caveat", cursive !important;
  font-size: 26px !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 15px #38bdf8 !important;
  cursor: pointer;
  transition: 0.3s;
}

.want-btn:hover {
  background: #fff !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 25px #fff !important;
}

/* ЖЕСТКИЕ КРУГЛЫЕ УГЛЫ И ОБРУЧ */
.tour-card,
.modal-content,
.clean-block,
#modalIframe,
.map-wrapper {
  border-radius: 40px !important; /* ТЕ САМЫЕ БОРТА */
  border: 3px solid #38bdf8 !important; /* НЕОНОВЫЙ ОБРУЧ */
  box-shadow:
    0 0 25px #38bdf8,
    inset 0 0 15px #38bdf8 !important;
  overflow: hidden !important; /* ЧТОБЫ ВНУТРИ УГЛЫ ТОЖЕ СКРУГЛИЛИСЬ */
}

/* Обращаемся напрямую по ID модалки панорам */
#panoGalleryModal .modal-content {
  max-height: 90vh !important; /* Высота окна */
  overflow-y: auto !important; /* ВКЛЮЧАЕМ СКРОЛЛ, чтоб остальные 6 панорам вылезли из подвала */
  display: block !important;
  scrollbar-width: none; /* Прячем крутилку в Firefox */
}

/* Прячем крутилку в Chrome, Safari */
#panoGalleryModal .modal-content::-webkit-scrollbar {
  display: none !important;
}

/* Сетка, чтоб не в одну шеренгу стояли */
.pano-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 15px;
  padding: 20px;
}

/* УБИРАЕМ КРУТИЛКУ ВЕЗДЕ */
* {
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE */
}
::-webkit-scrollbar {
  display: none !important;
} /* Chrome/Safari */

html {
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth !important;
  height: 100vh !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  background: #000 !important;
  /* Убираем лишний скролл с body, пусть рулит только html */
  overflow: visible !important;
}

/* СЕКЦИИ-СТРАНИЦЫ */
.slogan-section,
.main-page,
.map-section {
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Фикс для туров, чтобы они не раздували секцию */
.tours-container-3d {
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.menu-sound-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px; /* Как у твоих ссылок */
  background: linear-gradient(135deg, #06b6d4, #3b82f6); /* Твой градиент */
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px; /* Закругляем как остальные кнопки */
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);
  height: 40px; /* Выравниваем по высоте с ссылками */
  box-sizing: border-box;
}

#audioToggle {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  display: flex;
  align-items: center;
}

#volumeSlider {
  width: 50px;
  cursor: pointer;
  accent-color: #fff; /* Ползунок будет белым внутри синей кнопки */
  height: 4px;
}

/* Убиваем стандартный ползунок */
#volumeSlider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

/* САМА СТРОКА (ДОРОЖКА) - ТЕПЕРЬ ЧИСТО БЕЛАЯ */
#volumeSlider::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: #ffffff; /* Сплошной белый цвет */
  border-radius: 2px;
}

/* Белый кружок */
#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ffffff;
  margin-top: -6px; /* Ровно по центру белой строки */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

/* Для Firefox (чтобы там тоже строка была белой) */
#volumeSlider::-moz-range-track {
  width: 100%;
  height: 4px;
  background: #ffffff;
  border-radius: 2px;
}
#volumeSlider::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

/* Добавляем этот класс, раз его нет */
.header.hidden {
  top: -900px !important; /* Улетает с запасом наверх */
  transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ОКНО ЧАТА — В САМЫЙ УГОЛ, СКРУГЛЕНИЯ И ИНПУТЫ НА МЕСТЕ */
.odyssey-chat-window {
  display: none; /* Переключается в JS */
  position: fixed !important;

  /* 🎯 ЖЕСТКАЯ ПОСАДКА: Никаких 110px и 20px, только 0 */
  bottom: 0 !important;
  left: 0 !important;
  margin: 0 !important;

  width: 380px !important;
  height: 550px !important;
  max-width: 100vw;
  max-height: 95vh;

  background: rgba(0, 15, 30, 0.8);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  /* ТВОЙ РОДНОЙ ОБРУЧ И СКРУГЛЕНИЯ */
  border: 2px solid #38bdf8 !important;
  border-radius: 25px !important;

  z-index: 99999999 !important;
  box-shadow:
    0 0 30px rgba(56, 189, 248, 0.4),
    inset 0 0 15px rgba(56, 189, 248, 0.2) !important;

  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;

  /* ❌ УБРАЛ НАХУЙ ПАДДИНГ: Инпуты теперь прижаты к низу окна */
  padding: 0 !important;
}
/* ШАПКА ЧАТА */
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(56, 189, 248, 0.15); /* Подсветка верха */
  border-bottom: 1px solid rgba(56, 189, 248, 0.4);
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
}

.chat-title {
  color: #fff;
  font-family: "Caveat", cursive;
  font-size: 28px;
  text-shadow: 0 0 8px #38bdf8;
}

.chat-close-btn {
  background: none;
  border: none;
  color: #38bdf8;
  cursor: pointer;
  font-size: 35px;
  line-height: 0.5;
  transition: 0.3s;
}

.chat-close-btn:hover {
  color: #fff;
  transform: rotate(90deg);
}

/* ОБЛАСТЬ ВВОДА */
.chat-input-area {
  padding: 15px;
  display: flex;
  gap: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(56, 189, 248, 0.3);
}

#chatInput {
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: #fff;
  padding: 12px;
  border-radius: 15px;
  outline: none;
  font-family: "Raleway", sans-serif;
}

#chatInput:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.chat-send-btn {
  background: linear-gradient(135deg, #0ea5e9, #22d3ee);
  color: #fff;
  border: none;
  padding: 0 20px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: bold;
  font-size: 20px;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
  transition: 0.3s;
}

.chat-send-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* СООБЩЕНИЯ (Добавь в функцию отрисовки в JS) */
.user-msg {
  background: #38bdf8;
  color: #000;
  align-self: flex-end;
  padding: 10px 15px;
  border-radius: 15px 15px 0 15px;
  margin-bottom: 10px;
  max-width: 85%;
  font-weight: 500;
}

.ai-msg {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #38bdf8;
  color: #fff;
  align-self: flex-start;
  padding: 10px 15px;
  border-radius: 15px 15px 15px 0;
  margin-bottom: 10px;
  max-width: 85%;
}

/* 1. ГЛОБАЛЬНАЯ ПЛАВНОСТЬ ДЛЯ ВСЕГО */
a,
button,
.tour-card,
.ai-assistant,
.massive-arrow,
#audioToggle,
#weatherToggleBtn,
.pano-item {
  transition:
    transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.3s ease !important;
  will-change: transform;
}

/* 2. ГЛОБАЛЬНОЕ УВЕЛИЧЕНИЕ (Кроме карточек и их содержимого) */
a:hover,
.ai-assistant:hover,
.massive-arrow:hover,
#weatherToggleBtn:hover,
#audioToggle:hover {
  transform: scale(1.1) translateY(-3px) !important;
  filter: brightness(1.2);
}

/* 4. КНОПКА "ХОЧУ В ТУР" (Базовый стиль - на всю ширину) */
.tour-card .card-buttons {
  width: 100%;
  margin-top: 15px;
}

.tour-card .card-buttons button {
  width: 100% !important;
  height: 60px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ea5e9, #22d3ee) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 15px !important;
  font-family: "Caveat", cursive !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.6) !important;
  cursor: pointer !important;
}

/* 5. ЭФФЕКТ КНОПКИ ПРИ НАВЕДЕНИИ (Увеличивается только кнопка) */
.tour-card .card-buttons button:hover {
  transform: scale(1.05) !important;
  box-shadow:
    0 0 40px #38bdf8,
    0 0 60px rgba(56, 189, 248, 0.8) !important;
  background: #fff !important;
  color: #0ea5e9 !important;
  filter: brightness(1.1);
}

.tour-card .card-buttons button:active {
  transform: scale(0.95) !important;
}

.blue-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 15, 30, 0.6);
  backdrop-filter: blur(5px);
  z-index: 1000000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.blue-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.blue-modal-content {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  padding: 40px;
  border-radius: 25px;
  text-align: center;
  color: #ffffff;
  font-family: "Caveat", cursive;
  font-size: 34px;
  border: 3px solid #ffffff;
  box-shadow: 0 15px 40px rgba(14, 165, 233, 0.6);
  transform: scale(0.8);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-width: 450px;
  width: 90%;
}
.blue-modal-overlay.active .blue-modal-content {
  transform: scale(1);
}
.blue-modal-content p {
  margin: 10px 0;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.blue-modal-content button {
  margin-top: 25px;
  background: #ffffff;
  color: #0ea5e9;
  border: none;
  border-radius: 15px;
  padding: 10px 40px;
  font-family: "Caveat", cursive;
  font-size: 28px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.blue-modal-content button:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.slogan-section {
  perspective: 1400px; /* глобальная перспектива */
  transform-style: preserve-3d;
}

.slogan-section {
  perspective: 1400px; /* сила 3D */
  perspective-origin: 50% 35%; /* чуть выше центра */
  transform-style: preserve-3d;
  position: relative;
  z-index: 2;
}

.slogan-logo-wow {
  transform-style: preserve-3d;
  transition: transform 0.8s ease; /* на всякий случай */
}
.menu-toggle {
  display: none !important; /* ПРЯЧЕМ БУРГЕР НА КОМПЕ ЖЕСТКО */
}

/* КНОПКА: ТВОЯ БАЗА */
.master-neon-box {
  cursor: pointer !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  transition: all 0.2s ease;
}

/* ЭФФЕКТ: WARP SPEED (ТОЛЬКО ДЛЯ ПСЕВДОЭЛЕМЕНТОВ) */
body.warp-speed {
  /* ТУТ ПУСТО! Мы не трогаем body, чтобы ничего не плыло */
  overflow: hidden;
}

/* МАГИЯ ВОЛН (Слой 1 и 2) */
body.warp-speed::before,
body.warp-speed::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000; /* Поверх всего */
  pointer-events: none;
  opacity: 0;
}

/* ПЕРВАЯ ВОЛНА (Бирюзовое сияние) */
body.warp-speed::before {
  background: linear-gradient(to bottom, transparent, #00ffff, transparent);
  animation: neon-wave-flow 0.6s ease-in-out forwards;
}

/* ВТОРАЯ ВОЛНА (Глубокий синий блик) */
body.warp-speed::after {
  background: linear-gradient(
    45deg,
    transparent,
    rgba(0, 100, 255, 0.5),
    transparent
  );
  animation: neon-wave-flow 0.7s ease-in-out 0.1s forwards;
}

/* АНИМАЦИЯ ПРИЛИВА: Волна пролетает сверху вниз */
@keyframes neon-wave-flow {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* ============================================================
   ФИНАЛЬНЫЙ, НАДЕЖНЫЙ КОД ДЛЯ ЕДИНСТВЕННОЙ ИЗЯЩНОЙ ГАЛОЧКИ
   ============================================================ */

/* КОНТЕЙНЕР КНОПКИ (Стиль сайта) */
#weatherToggleBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.1) !important; /* Стеклянный эффект */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(5px);
  border-radius: 50% !important;
  width: 35px !important;
  height: 35px !important;
  padding: 0 !important;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  z-index: 100005;
}

#weatherToggleBtn:hover {
  background: rgba(56, 189, 248, 0.2) !important; /* Твой фирменный голубой */
  border-color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

/* ЕДИНСТВЕННАЯ ИЗЯЩНАЯ СТРЕЛКА (ШЕВРОН) */
#weatherArrow {
  display: block !important;
  width: 12px !important; /* Чуть побольше, чтобы было чётко */
  height: 12px !important; /* Чуть побольше */
  border-right: 3px solid #ffffff !important; /* Белые границы галочки */
  border-bottom: 3px solid #ffffff !important;

  /* ========================================= */
  /* ЖЕСТКИЙ СБРОС ЛЮБОГО СТАРОГО ГОВНА ВНУТРИ */
  /* ========================================= */
  font-size: 0 !important; /* Убиваем текст внутри */
  color: transparent !important; /* Делаем его невидимым */
  text-indent: -9999px !important; /* Смещаем текст за экран */
  overflow: hidden !important; /* Скрываем всё, что вылезло */
  line-height: 0 !important; /* Убираем высоту строки */
  background: none !important; /* Убираем любой фон (например, черную стрелку) */

  /* ========================================= */
  /* БЛОК РЕГУЛИРОВКИ: ДВИГАЙ И КРУТИ ТУТ    */
  /* ========================================= */
  /* 1. ПОВОРОТ: rotate(45deg) — стрелка вниз */
  /* 2. ПОЗИЦИЯ: translate(X, Y) — двигай. Опустил чуть ниже (-3px) для центровки */
  transform: translate(0px, -3px) rotate(45deg) scale(1) !important;

  /* Дополнительные смещения (если нужно) */
  margin-left: 0px !important;
  margin-top: 0px !important;
  /* ========================================= */

  transition: all 0.3s ease-in-out !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); /* Тень для объема */
}

/* ОЧИСТКА ПСЕВДОЭЛЕМЕНТОВ (на всякий случай) */
#weatherArrow::before,
#weatherArrow::after {
  content: none !important;
  display: none !important;
}

/* АНИМАЦИЯ ПРИ РАСКРЫТИИ (Добавь класс .weather-open к кнопке через JS) */
.weather-open #weatherArrow {
  /* Переворачиваем вверх (-135 градусов) и меняем цвет на голубой */
  transform: translate(0px, 3px) rotate(-135deg) scale(1) !important;
  border-color: #38bdf8 !important;
}

/* Если класс weather-open есть на кнопке, разворачиваем стрелку на 180 градусов */
#weatherToggleBtn.weather-open #weatherArrow {
  /* rotate(-135deg) — это "вверх" для нашей конструкции из бордеров */
  transform: translate(0px, 3px) rotate(-135deg) scale(1) !important;
  border-color: #38bdf8 !important; /* Заодно подсветим голубым */
}

/* ====================== МОБИЛЬНЫЙ АДАПТИВ 2026 ====================== */

/* ============================================================
   ЕДИНЫЙ ЧИСТЫЙ МОБИЛЬНЫЙ БЛОК — ТВОИ НАСТРОЙКИ СОХРАНЕНЫ + РЕГУЛИРОВКИ
   ============================================================ */
@media (max-width: 1150px) {
  /* ====================== ВИДЕО ====================== */
  .video-container,
  #bgVideo {
    transform: scale(1.15) !important;
  }

  /* ====================== ШАПКА ====================== */
  .header-wrap {
    padding: 10px 15px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* ====================== ЛОГО + ПОДЛОЖКА ====================== */
  .logo-box {
    position: relative !important;
    display: inline-block !important;
    left: -13px !important;
    top: 3px !important;

    background: rgba(
      56,
      189,
      248,
      0.85
    ) !important; /* голубой фон + прозрачность */
    border: 2px solid #ffffff !important; /* белая обводка 2px */
    border-radius: 50px !important;
    padding: 1px 1px !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.6) !important;
    z-index: 10 !important;
  }

  .logo-box img {
    height: 55px !important;
    margin: 0 !important;
  }

  /* ====================== КНОПКА МЕНЮ ====================== */
  /* 1. ТВОЯ КНОПКА (Добавляем в неё центровку) */
  .menu-toggle {
    position: absolute !important; /* Вырываем её из общей кучи нахуй */
    right: 2px !important; /* 📌 ГВОЗДЬ К ПРАВОМУ КРАЮ (отступ 15px от пластика) */
    left: auto !important; /* ✂️ УБИВАЕМ ЛЕВЫЙ КРАЙ, чтоб не растянуло */
    top: 12px !important; /* ↕️ Двигай вверх/вниз, чтобы встала ровно в шапке */

    /* Внутрянка кнопки, чтоб палочки стояли ровно */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;

    /* Твои размеры и дизайн (не трогал) */
    width: 76px !important;
    height: 68px !important;
    color: #ffffff !important;
    background: rgba(56, 189, 248, 0.85) !important;
    border: 2px solid #fbfdfd !important;
    border-radius: 50px !important;
    z-index: 100005 !important;
    cursor: pointer;
  }

  /* 2. ЧИСТИМ ПАЛОЧКИ (Чтобы они не улетали из-за погоды) */
  .menu-toggle span {
    /* Чикаем связь с левыми стилями */
    position: static !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;

    /* РАЗМЕР ПАЛОЧЕК (Подправь под себя) */
    width: 30px !important;
    height: 3px !important;
    background-color: #ffffff !important;
    display: block !important;
  }

  /* ====================== МЕНЮ ====================== */
  .navigation {
    position: fixed;
    top: 95px;
    left: 0;
    width: 100%;
    background: rgba(82, 161, 239, 0) !important;
    backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 25px 15px;
    transform: translateY(-120%);
    opacity: 0;
    transition:
      transform 0.4s ease-in-out,
      opacity 0.3s ease;
    z-index: 99999 !important;
    display: flex !important;
  }

  .navigation.active {
    transform: translateY(0);
    opacity: 1;
  }

  .navigation a {
    font-size: 24px !important;
    color: #fff;
    text-align: center;
    width: 85%;
    padding: 14px 0;
    border-radius: 15px;
    background: rgba(56, 189, 248, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.4);
  }

  .navigation a:hover {
    background: rgba(56, 189, 248, 0.4);
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
    transform: scale(1.05);
  }

  /* ====================== ЗАКРЫТАЯ ПОГОДА (твои координаты не трогаем) ====================== */
  /* ============================================================
   💦 НАТЯГИВАЕМ ПОГОДУ (МЕЖДУ ЛОГО И МЕНЮ)
   ============================================================ */
  #weatherWidget:not(.weather-open) {
    position: absolute !important;

    /* 📌 КЛЕИМ КРАЯ (Подгони эти цифры под свои расстояния): */
    left: 80px !important; /* Отступ от левого края (чтоб обогнуть логотип) */
    right: 80px !important; /* Отступ от правого края (чтоб не налезть на меню) */

    /* ❌ УБИВАЕМ ТВОЮ СТАРУЮ ЖЕСТКУЮ ШИРИНУ 202px НАХУЙ: */
    width: auto !important;
    max-width: none !important;

    /* Твоя высота и дизайн (остаются как были) */
    top: 13px !important;
    height: 67px !important;

    /* Чтобы текст и иконки внутри погоды тоже раскидались ровно: */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* ============================================================
   🔥 ИДЕАЛЬНАЯ ОТКРЫТАЯ ПОГОДА (ТОЛЬКО ДЛЯ МОБИЛЫ)
   ============================================================ */
  @media (max-width: 1150px) {
    /* 1. ГЛАВНАЯ КАПСУЛА (Центровка, броня от вылетов и дизайн) */
    #weatherWidget.weather-open,
    #weatherWidget.active,
    #weatherWidget.open {
      /* Ядерный сброс десктопного мусора */
      position: fixed !important;
      margin: 0 !important;
      right: auto !important;
      bottom: auto !important;

      /* Идеальная центровка по экрану */
      top: 40vh !important;
      left: 50vw !important;
      transform: translate(-50%, -50%) !important;

      /* Умные размеры (больше никаких 500px на мобиле) */
      width: 90vw !important; /* 90% от ширины экрана телефона */
      max-width: 380px !important; /* Защита на планшетах */
      height: auto !important;
      max-height: 150vh !important; /* Защита по высоте (не вылезет за экран) */

      /* Внутренности */
      box-sizing: border-box !important;
      padding: 5px 5px !important; /* Сочные отступы */
      overflow-y: auto !important; /* Если ИИ напишет много - будет внутренний скролл! */

      /* Premium Neon Design (Под стиль твоего сайта) */
      background: rgba(56, 189, 248, 0.7) !important; /* Глубокий темный фон */
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 2px solid #fafefe !important; /* Твой фирменный голубой обруч */
      border-radius: 30px !important; /* Закругление как у кнопок */
      box-shadow:
        0 0 30px rgba(56, 189, 248, 0.5),
        inset 0 0 15px rgba(56, 189, 248, 0.3) !important;
      z-index: 9999999 !important; /* Поверх абсолютно всего */

      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
    }

    /* Прячем полосу прокрутки внутри виджета (чтобы было чисто) */
    #weatherWidget.weather-open::-webkit-scrollbar {
      display: none !important;
    }
    #weatherWidget.weather-open {
      scrollbar-width: none !important;
    }

    /* ============================================================
       🎛️ ПУЛЬТ УПРАВЛЕНИЯ БУКВАМИ (Регулируй всё здесь)
       ============================================================ */

    @media (max-width: 1150px) {
      /* 1. РАЗРЕШАЕМ ВЫЛЕТ ИЗ ВИДЖЕТА (чтобы солнце не обрезалось) */
      #weatherWidget.weather-open {
        overflow: auto !important;
      }

      /* 2. СОЛНЫШКО (Твой span#miniStatus) */
      #miniStatus {
        display: inline-block !important; /* Даем ему вес */
        position: relative !important; /* Разрешаем топ/лефт */

        /* КРУТИ ТУТ: */
        left: -5px !important; /* ← Двигай ВПРАВО (+) или ВЛЕВО (-) */
        top: 0px !important; /* ← Двигай ВНИЗ (+) или ВВЕРХ (-) */

        font-size: 35px !important; /* МАСШТАБ самого смайла/иконки */
        z-index: 10 !important;
      }

      /* 3. ГОРОД (Твой span#miniCityDisplay) */
      #miniCityDisplay {
        display: inline-block !important;
        position: relative !important;

        /* 1. РАСШИРЯЕМ ГРАНИЦЫ (Чтобы не было точек) */
        width: 200px !important; /* ← Сделал шире, теперь Петропавловск влезет */
        overflow: visible !important; /* ← УБРАЛ ТРОЕТОЧИЕ НАХУЙ, теперь буквы не режутся */
        white-space: nowrap !important;

        /* 2. ВОТ ТВОЙ "АВТО-РАЗМЕР" (Умный шрифт) */
        /* clamp(МИНИМУМ, ГИБКОСТЬ, МАКСИМУМ) */
        font-size: clamp(14px, 6vw, 30px) !important;

        /* 3. РЕГУЛИРОВКА ПОЗИЦИИ */
        left: -65px !important; /* Смещение влево/вправо */
        top: -17px !important; /* Смещение вверх/вниз */

        text-align: center !important;
      }

      /* 4. ГРАДУСЫ (Твой span#miniTemp) */
      #miniTemp {
        display: inline-block !important;
        position: relative !important;

        /* КРУТИ ТУТ: */
        left: -230px !important; /* ← Сдвиг влево-вправо */
        top: 15px !important; /* ← Сдвиг вверх-вниз */

        font-size: 35px !important; /* МАСШТАБ ГРАДУСОВ */
      }

      /* ============================================================
   🎯 ЗАКРЫТЫЙ ВИД: ДВИГАЕМ КНОПКУ ЦЕЛИКОМ (ФОН + СТРЕЛКА)
   ============================================================ */
      #weatherWidget:not(.weather-open) #weatherToggleBtn {
        position: absolute !important;

        /* ❌ УБИЛИ ЖЕСТКИЙ ЛЕВЫЙ ОТСТУП: */
        left: auto !important;

        /* ✅ ПРИБИЛИ К ПРАВОМУ КРАЮ (Крути эту цифру, чтоб подогнать отступ от края): */
        right: 2px !important;

        /* Твой родной верх (если криво по вертикали — покрути) */
        top: 13px !important;

        /* 📏 МАСШТАБ ВСЕЙ КНОПКИ (Фарш) */
        transform: scale(0.8) !important;

        /* ТУТ ТВОЯ РОДНАЯ ПОДЛОЖКА */
        background: rgba(56, 189, 248, 0.4) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important; /* Размер круга */
        height: 40px !important;
        border-radius: 50% !important;
      }

      /* ОБНУЛЯЕМ СТРЕЛКУ (Чтобы она просто сидела в центре кнопки и не выпендривалась) */
      #weatherWidget:not(.weather-open) #weatherArrow {
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important; /* Убиваем вторую подложку нахуй */
        border: none !important;
      }
    }

    @media (max-width: 1150px) {
      /* 📦 ОТСТУП ДЛЯ ИНПУТОВ (Чтобы не наезжали сверху) */
      #weatherContent {
        /* Если город и солнце всё перекрыли, увеличивай это число */
        margin-top: 10px !important;
      }
    }

    /* ============================================================
   1. ВЕРХ (Солнце, Город, Градусы) — ТУТ ВСЁ ПРОЗРАЧНО
   ============================================================ */
    #miniStatus,
    #miniCityDisplay,
    #miniTemp {
      background: transparent !important; /* Здесь фона НЕТ */
      border: none !important;
      box-shadow: none !important;
    }

    /* ============================================================
   2. НИЗ (Ветер, Влажность) — РЕГУЛИРУЙ ЦВЕТ ТУТ
   ============================================================ */
    #weatherContent span,
    #weatherContent b {
      /* 🎨 ВОТ ТВОЙ ЦВЕТ И ПРОЗРАЧНОСТЬ: */
      /* (56, 189, 248) — это голубой. 0.4 — это 40% прозрачности. */
      background: rgba(56, 189, 248, 0.4) !important;

      /* ЦВЕТ РАМКИ (тоже можно менять) */
      border: 1px solid rgba(56, 189, 248, 0.6) !important;

      /* Остальной стайл плашек */
      color: #ffffff !important;
      font-family: "Raleway", sans-serif !important;
      font-size: 16px !important;
      padding: 6px 12px !important;
      margin: 4px !important;
      border-radius: 12px !important;
      display: inline-block !important;
    }

    /* Если хочешь, чтобы цифры (b) внутри плашек были другого цвета */
    #weatherContent b {
      background: rgba(255, 255, 255, 0.1) !important; /* Чуть светлее */
    }

    /* 7. ТЕКСТ ОТ ИИ (ОТДЕЛЬНЫЙ БЛОК) */
    #aiWeatherAdvice {
      background: rgba(0, 0, 0, 0.3) !important; /* Темная подложка совета */
      border: 2px dashed #38bdf8 !important; /* Пунктирный бордюр */
      border-radius: 20px !important;
      padding: 15px !important;
      margin-top: 20px !important;
      font-size: 18px !important;
      color: #a0f0ff !important;
      text-align: center !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    /* 🤖 ТЕКСТ ОТ ИИ (Жесткий контроль) */
    #weatherWidget.weather-open #aiWeatherAdvice {
      font-family: "Raleway", sans-serif !important;
      font-size: 15px !important; /* ← Размер текста ИИ */
      color: #180255 !important; /* Нежно-голубой цвет */
      line-height: 1.3 !important; /* Расстояние между строками */
    }

    /* Инпуты (Поле ввода и кнопка) */
    #weatherWidget.weather-open input {
      width: 100% !important;
      font-size: 16px !important; /* 16px спасет от зума на Айфонах */
      padding: 12px !important;
      margin-top: 15px !important;
      background: rgba(56, 189, 248, 0.9) !important;
      border: 1px solid #fafbfb !important;
      border-radius: 12px !important;
      color: #fff !important;
      box-sizing: border-box !important;
    }
    /* =========================================
       4. ПОДЛОЖКА ДЛЯ ТЕКСТА ИИ
       ========================================= */
    #weatherWidget.weather-open #aiWeatherAdvice {
      /* ДИЗАЙН ПОДЛОЖКИ */
      background: rgba(56, 189, 248, 0.9) !important;
      border: 1px solid #f7fafa !important;
      border-radius: 15px !important; /* ← СКРУГЛЕНИЕ ФОНА ИИ */
      padding: 15px !important; /* ← ВНУТРЕННИЕ ОТСТУПЫ */

      /* ШРИФТ */
      font-family: "Raleway", sans-serif !important;
      font-size: 15px !important;
      color: #ffffff !important; /* ← ЦВЕТ БУКВ ИИ (сделал белым для контраста) */
      line-height: 1.4 !important;
      text-align: left !important;

      /* Броня */
      display: block !important;
      width: 100% !important;
      margin-top: 20px !important;
      white-space: normal !important;
      word-wrap: break-word !important;
      box-sizing: border-box !important;
    }
  }

  /* 5. ОБЩИЙ ОТСТУП СВЕРХУ ДЛЯ ИНПУТОВ */
  /* Если город и солнце перекрывают поле "Куда летим?", увеличивай это число */
  #weatherContent {
    margin-top: 20px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* ЭТО КОНТРОЛЬ РАЗЛЁТА ПРИ ОТКРЫТИИ */

  #weatherWidget.weather-open #miniStatus {
    left: 35px !important; /* ← КРУТИ ТУТ: Солнце уйдет сильно ВЛЕВО */
    top: 25px !important; /* ← КРУТИ ТУТ: Солнце уйдет НИЖЕ */
    font-size: 64px !important;
  }

  #weatherWidget.weather-open #miniCityDisplay {
    left: -5px !important; /* ← КРУТИ ТУТ: Город встанет ПО ЦЕНТРУ */
    top: 0px !important;
  }

  #weatherWidget.weather-open #miniTemp {
    left: -140px !important; /* ← КРУТИ ТУТ: Градусы уйдут сильно ВПРАВО */
    top: 40px !important;
  }

  #weatherWidget.weather-open #weatherContent {
    display: block !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;

    /* 🎯 РЕГУЛИРОВКА ВЕРХА (Дыра исчезает) */
    margin-top: 45px !important;

    /* 🎯 РЕГУЛИРОВКА НИЗА (ИИ теперь торчит и скроллится) */
    padding: 0 15px 120px 15px !important;

    /* ГЕОМЕТРИЯ */
    height: calc(100% - 30px) !important;
    scrollbar-width: none !important;
  }
  /* ============================================================
   🏹 СТРЕЛКА-ЗАКРЫВАШКА (Кнопка в сборе)
   ============================================================ */
  #weatherToggleBtn {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* 🏎️ 1. РЕГУЛИРУЙ ПОЛОЖЕНИЕ ТУТ */
    right: 10px !important; /* Отступ от правого края */
    top: 20px !important; /* Отступ сверху */

    /* 🎨 2. РЕГУЛИРУЙ ЦВЕТ И ПРОЗРАЧНОСТЬ ПОДЛОЖКИ ТУТ */
    background: rgba(
      56,
      189,
      248,
      0.4
    ) !important; /* Голубой с прозрачностью 40% */
    border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Тонкая белая рамка */

    /* 📏 3. РАЗМЕР КРУГА ПОДЛОЖКИ */
    width: 25px !important;
    height: 25px !important;
    border-radius: 50% !important; /* Делаем идеальный круг */

    cursor: pointer !important;
    z-index: 10 !important;
  }

  /* САМА ИКОНКА ВНУТРИ (Шеврон) */
  #weatherArrow {
    position: static !important; /* Отменяем все старые сдвиги */
    font-size: 24px !important; /* Размер самой стрелочки */
    color: #ffffff !important; /* Цвет стрелочки */
    margin: 0 !important; /* Сбрасываем лишнее, чтобы была по центру */
  }
  #weatherWidget.weather-open {
    position: fixed !important;

    /* ⚓️ ЯКОРЬ: Прибиваем к верху экрана */
    top: 5vh !important; /* 5% от верха (чтобы не упиралось в челку) */
    left: 50vw !important; /* Центр экрана */
    transform: translateX(
      -50%
    ) !important; /* Центрируем только по горизонтали */

    /* 📏 ГЕОМЕТРИЯ: Тянем вниз */
    width: 94vw !important; /* Почти вся ширина */
    height: 85vh !important; /* ВЫСОТА: 85% экрана. Это заставит его уйти вниз */

    /* Твой дизайн */
    background: rgba(56, 189, 248, 0.75) !important;
    backdrop-filter: blur(20px) !important;
    border: 2px solid #fafefe !important;
    border-radius: 35px !important;
    z-index: 9999999 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important; /* Чтобы солнце могло торчать */
  }
}

/* ============================================================
   ПОМОЩНИК ИИ — КНОПКА + ОКНО ЧАТА (полная регулировка)
   ============================================================ */
@media (max-width: 1150px) {
  /* ====================== 1. КНОПКА "ПОМОЩНИК" ====================== */
  .ai-assistant {
    position: fixed !important;

    /* ВОТ ЭТИ ТРИ СТРОЧКИ ПИНАЮТ ЕГО ВПРАВО: */
    right: 15px !important; /* Прибили к правому краю */
    left: auto !important; /* Отвязали нахуй от левого */
    transform: none !important; /* Убили старую центровку */
    bottom: 20px !important; /* Оставили отступ снизу */

    /* Дальше твои настройки дизайна, их не трогаем */
    font-size: 24px !important;
    padding: 5px 5px !important;
    border-radius: 50px !important;
    text-indent: -20px !important;
    background: rgba(56, 189, 248, 0.7) !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.8) !important;
    z-index: 100001 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  /* ====================== 2. ОКНО ЧАТА (ИИ ПОМОЩНИК) ====================== */
  @media (max-width: 1150px) {
    /* ОКНО ЧАТА: В САМЫЙ УГОЛ, НО СО ВСЕМИ ЗАКРУГЛЕНИЯМИ */
    #aiChat.odyssey-chat-window {
      position: fixed !important;

      /* 🎯 ПРИБИЛИ В УГОЛ К КНОПКЕ (Справа) */
      right: 0 !important;
      bottom: 0 !important;
      left: auto !important;
      margin: 0 !important;
      transform: none !important;

      /* 📏 РАЗМЕРЫ ТЕ ЖЕ */
      width: 380px !important;
      max-width: 95vw !important;
      height: 550px !important;
      max-height: 85vh !important;

      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);

      /* 💎 ТВОИ РОДНЫЕ ЗАКРУГЛЕНИЯ И ОБРУЧ */
      border: 2px solid #38bdf8 !important;
      border-radius: 25px !important; /* ВСЕ УГЛЫ КРУГЛЫЕ */

      z-index: 1000000 !important;
      display: none; /* Таймер сам его включит */
      flex-direction: column;
      overflow: hidden;

      /* Чтобы текст внутри не лип к рамкам */
      padding: 0 !important;
    }

    /* Чтобы сообщения внутри не обрезались скруглениями */
    #chatBody {
      padding: 15px !important;
      overflow-y: auto !important;
    }
  }

  /* Шапка внутри чата */
  .chat-header {
    background: rgba(56, 189, 248, 0.8) !important;
    color: #ffffff !important;
    padding: 15px 20px !important;
  }

  /* Текст сообщений в чате */
  #chatBody .bot-msg {
    background: rgba(255, 255, 255, 0.1) !important;
    border-left: 3px solid #38bdf8 !important;
  }

  #chatBody .user-msg {
    background: #38bdf8 !important;
    color: #000 !important;
  }

  /* Поле ввода */
  #chatInput {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid #38bdf8 !important;
    color: #fff !important;
    border-radius: 15px !important;
  }
  /* ТОТ САМЫЙ ПИДАР, КОТОРОГО МЫ ПОЙМАЛИ */
  .chat-close-btn {
    color: #ffffff !important; /* Делаем крестик БЕЛЫМ */
    background: transparent !important; /* Убираем любой фон кнопки */
    border: none !important; /* Убираем рамку */

    font-size: 32px !important; /* Делаем его побольше, чтоб попасть пальцем */
    line-height: 1 !important;
    opacity: 1 !important; /* Яркость на полную */

    cursor: pointer !important;

    /* Тень, чтобы он горел на голубом фоне */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;

    /* Если он прижат к краю, дай ему отступ */
    padding: 5px !important;
  }

  /* АДАПТИВ ДЛЯ МОБИЛ (Чтобы фотки были крупнее, а буквы меньше) */
  @media (max-width: 600px) {
    .clean-block {
      padding: 15px !important; /* Уменьшаем отступы по бокам */
      border-radius: 20px !important;
    }

    h1 {
      font-size: 32px !important;
    } /* Название больше не конское */
    h3 {
      font-size: 28px !important;
    }

    .gallery-grid {
      grid-template-columns: repeat(
        2,
        1fr
      ) !important; /* 2 фотки в ряд вместо 3 — они станут КРУПНЕЕ */
      gap: 10px;
    }

    .gallery-item {
      border-radius: 12px;
    }
  }
  /* ====================== НАДПИСИ — ФИНАЛЬНЫЙ БЛОК ====================== */

  .slogan-section .map-royal-slogan .slogan-light,
  .slogan-section .map-royal-slogan span:last-child {
    font-size: 22px !important; /* ← здесь твой настоящий размер */
    color: #ffffff !important;
    margin-top: 12px !important;
    margin-bottom: 8px !important;
    opacity: 0.95 !important;
    text-align: center !important;
    line-height: 1.1 !important;
  }
}
/* Если на очень маленьких телефонах нужно чуть меньше */
@media (max-width: 480px) {
  .slogan-section .map-royal-slogan .slogan-light,
  .slogan-section .map-royal-slogan span:last-child {
    font-size: 19px !important;
  }
}

@media (max-width: 1024px) and (orientation: portrait), (max-width: 1150px) {
  /* Сама шапка на мобиле */
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000 !important;
    transition:
      transform 0.4s ease-in-out,
      opacity 0.3s !important;
    transform: translateY(0) !important;
  }

  /* 🔥 ВОТ ОНО: Если на body есть класс .home-page — ШАПКА ВСЕГДА ТУТ */
  body.home-page .header {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* УЛЬТРА-ПРЯТАНЬЕ (Для всех остальных страниц) */
  .header.hidden {
    transform: translateY(-115%) !important; /* Улетает с запасом в бездну */
    opacity: 0 !important;
    pointer-events: none !important; /* Чтобы не мешала кликать в погоду */
  }
}
/* ============================================================
   1. БЛОК «НАШИ ТУРЫ» (первая страница)
   ============================================================ */
@media (max-width: 1150px) {
  .slogan-section .master-neon-box {
    position: absolute !important;
    bottom: 58px !important; /* ← высота от низа (меньше = ниже) */
    left: 21% !important;
    transform: translateX(-50%) !important;

    width: 99% !important; /* ← ширина */
    max-width: 640px !important;

    background: rgba(
      56,
      189,
      248,
      0.18
    ) !important; /* ← цвет фона + прозрачность */

    padding: 1px 2px !important;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.5) !important;

    text-align: center !important;
    z-index: 20 !important;
  }

  .slogan-section .master-neon-box h2 {
    font-size: 9.4vw !important; /* ← размер текста "Наши туры" */
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
  }

  .slogan-section .master-neon-box img {
    width: 105px !important; /* ← размер стрелки */
    margin-top: -25px !important;
  }
}

/* ============================================================
   2. БЛОК «ГЕОГРАФИЯ НАШИХ ТУРОВ» (Адаптив под мобилы)
   ============================================================ */
@media (max-width: 1150px) {
  .geography-title-box {
    position: absolute !important;
    bottom: 3px !important; /* Отступ от самого низа экрана */
    left: 21% !important; /* Ровно по центру */
    transform: translateX(-50%) !important;

    width: 95% !important; /* Почти на весь экран по ширине */
    max-width: none !important;

    background: rgba(56, 189, 248, 0.15) !important;
    padding: 10px 5px !important;
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.4) !important;

    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 100 !important;
  }

  /* ВЕРХНЯЯ СТРОКА: "ГЕОГРАФИЯ" */
  .geo-top {
    display: block !important;
    font-size: 9vw !important; /* ТУТ РЕГУЛИРУЙ РАЗМЕР ВЕРХНЕГО СЛОВА */
    line-height: 0.1 !important; /* Расстояние до нижней строки */
    letter-spacing: -2px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    margin: 0 !important;
  }

  /* НИЖНЯЯ СТРОКА: "НАШИХ ТУРОВ" */
  .geo-bottom {
    display: block !important;
    font-size: 8vw !important; /* ТУТ РЕГУЛИРУЙ РАЗМЕР НИЖНЕГО СЛОВА */
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 5px 0 0 0 !important;
  }

  /* СТРЕЛКА ПОД ТЕКСТОМ */
  .geography-title-box img.massive-arrow {
    width: 105px !important; /* ← размер стрелки */
    margin-top: -25px !important;
  }
}

/* ====================== СТРЕЛКА — ФИНАЛЬНЫЙ РАБОЧИЙ ВАРИАНТ ====================== */
@media (max-width: 1150px) {
  .massive-arrow,
  .slogan-section img[src*="stelka.png"],
  .geography-title-box img[src*="stelka.png"] {
    filter: brightness(0) invert(1) !important; /* Делаем белым */
    width: 50px !important;
    opacity: 1 !important;

    /* 1. УБИРАЕМ transform ОТСЮДА СОВСЕМ! Он не должен мешать анимации */

    /* 2. ЗАПУСКАЕМ АНИМАЦИЮ */
    animation: arrow-bounce-mobile 2s infinite ease-in-out !important;
  }

  /* 3. АНИМАЦИЯ: Тут прописаны все координаты и масштаб */
  @keyframes arrow-bounce-mobile {
    0%,
    100% {
      transform: scaleX(1) rotate(-25deg) translateY(0);
    }
    50% {
      transform: scaleX(1) rotate(1deg) translateY(5px);
    }
  }
}
/* ============================================================
/* ============================================================
   САМЫЙ ЖЁСТКИЙ ПЕРЕБИВАТЕЛЬ ДЛЯ ПОГОДЫ И МЕНЮ
   ============================================================ */
@media (max-width: 1150px) {
  /* === МЕНЮ — ПАЛОЧКИ === */
  .menu-toggle {
    font-size: 46px !important; /* ← вот это реально увеличивает палочки */
    padding: 8px 4px !important; /* можно увеличить, чтобы кнопка стала больше */
  }
}

/* ============================================================
   📱 РЕЗИНОВЫЙ СЛОГАН И КАРТА (ЖИМ-ЖИМ РЕЖИМ)
   ============================================================ */
@media (max-width: 1150px) {
  /* 1. ВЕРХНЯЯ СТРОКА (ОДИССЕЯ ТУР...) */
  .map-royal-slogan .slogan-bold {
    /* Шрифт теперь зависит от высоты экрана (vh) */
    font-size: clamp(20px, 5vh, 32px) !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
  }

  /* 2. НИЖНЯЯ СТРОКА (Выше только небо...) */
  .map-royal-slogan .slogan-light {
    /* Режем твою 50px до вменяемых размеров в "жим-жим" режиме */
    font-size: clamp(24px, 7vh, 45px) !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.1 !important;
    opacity: 0.9 !important;

    /* ГЛАВНЫЙ ВРАГ: убираем твои 100px, ставим копейки */
    margin-bottom: 10px !important;
  }

  /* 3. КОНТЕЙНЕР СЛОГАНА */
  .map-royal-slogan {
    padding: 5px 1px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* 4. РАЗДУВАЕМ КАРТУ (ЧТОБЫ НЕ БЫЛА ЩЕЛЬЮ) */
  .map-wrapper {
    height: 55vh !important; /* Карта теперь берет половину высоты экрана */
    width: 96% !important;
    margin: 0 auto !important;
  }
}

/* ============================================================

/* ============================================================
   📍 1. "КУДА ПОЕДЕМ" (Поле ввода города / Верхнее)
   ============================================================ */
#cityInput {
  color: #ffffff !important; /* Цвет букв при печати */
  background: rgba(255, 255, 255, 0.1) !important; /* Фон поля */
  border: 1px solid #ffffff !important; /* Обводка */
  border-radius: 15px !important;
  padding: 10px !important;
  margin-bottom: 10px !important; /* Отступ от нижнего поля */
  width: 100% !important;
}

/* ============================================================
   📅 2. "КОГДА ПОЕДЕМ" (Поле для даты / Нижнее)
   ============================================================ */
/* Если у тебя ID другой (например #dateInput), поменяй название */
#dateInput,
.travel-dates {
  color: #ffffff !important; /* Цвет букв */
  background: rgb(249, 249, 249) !important;
  border: 1px solid #ffffff !important;
  border-radius: 15px !important;
  padding: 10px !important;
  width: 100% !important;
}

/* ============================================================
   ✍️ 3. ЦВЕТ ТЕКСТА-ПОДСКАЗКИ (Placeholder)
   ============================================================ */
#cityInput::placeholder,
#dateInput::placeholder {
  color: rgb(
    255,
    255,
    255
  ) !important; /* Цвет надписей "Куда..." и "Когда..." */
}

/* ============================================================
   🛠️ ЛЕЧИМ ФОТКИ И СВАЙП НА МОБИЛАХ (До 1150px)
   ============================================================ */
@media screen and (max-width: 1150px) {
  /* 1. РАЗБЛОКИРУЕМ СВАЙП ПАЛЬЦЕМ */
  .swiper,
  .swiper-wrapper,
  .swiper-slide,
  .tours-container-3d {
    pointer-events: auto !important; /* Разрешаем трогать экран */
  }

  /* 2. ФОТКИ НА ВЕСЬ ЭКРАН (Чиним клик) */
  .tour-image,
  .tour-image img {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 50 !important; /* Вытаскиваем фотку на самый верх, чтоб клик шел точно в неё */
  }

  /* 3. УБИВАЕМ HOVER НА МОБИЛЕ (Именно он жрет твой первый клик!) */

  /* Возвращаем статичную красоту, раз эффекты отключены */
  .tour-image img {
    transform: scale(1) !important;
  }
}

/* ============================================================
   🎡 ВОЗВРАТ 3D-КАРУСЕЛИ (COVERFLOW)
   ============================================================ */

@media (max-width: 1150px) {
  /* 1. ТЕКСТ "НАШИ ТУРЫ" — РЕГУЛИРУЙ ТУТ */
  .slogan-section .master-neon-box h2 {
    /* Меняй 35px, если хочешь еще меньше или больше */
    font-size: 35px !important;
    transition: 0.3s;
  }

  /* 2. ТЕКСТ "ГЕОГРАФИЯ" (Верхняя строка) */
  .geo-top {
    /* Меняй 40px под свой вкус */
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* 3. ТЕКСТ "НАШИХ ТУРОВ" (Нижняя строка) */
  .geo-bottom {
    /* Меняй 25px */
    font-size: 25px !important;
  }

  /* 4. МАСШТАБ СТРЕЛОК ПОД ТЕКСТОМ */
  .massive-arrow,
  .slogan-section img[src*="stelka.png"],
  .geography-title-box img[src*="stelka.png"] {
    /* Меняй 45px, чтобы стрелка стала меньше/больше */
    width: 45px !important;
    height: auto !important;
  }
}

@media (max-width: 1150px) {
  /* 🎯 РЕГУЛИРУЕМ ПОЗИЦИЮ (ПРИЖИМАЕМ ВЛЕВО) */
  .slogan-section .master-neon-box,
  .geography-title-box {
    position: absolute !important; /* Или relative, если так было */

    /* 🕹️ ВОТ ТВОЙ ГЛАВНЫЙ РЫЧАГ: */
    left: 15px !important; /* Поставь 10px, если надо еще левее. Поставь 30px, если надо правее */

    right: auto !important;
    transform: none !important; /* Выключаем центровку, чтоб не мешала */
    margin-left: 0 !important;

    /* Чтобы коробка не растягивалась на весь экран, даем ей ширину */
    width: auto !important;
    max-width: 90% !important;
  }

  /* 📏 РАЗМЕРЫ (чтобы оставались аккуратными, а не конскими) */
  .slogan-section .master-neon-box h2 {
    font-size: 32px !important; /* "Наши туры" */
  }

  .geo-top {
    font-size: 38px !important; /* "География" */
  }

  .geo-bottom {
    font-size: 24px !important; /* "наших туров" */
  }

  /* СТРЕЛКИ (тоже поменьше) */
  .massive-arrow,
  .slogan-section img[src*="stelka.png"],
  .geography-title-box img[src*="stelka.png"] {
    width: 40px !important;
    margin-left: 0 !important; /* Чтобы стрелка тоже была слева под текстом */
  }
}

/* ============================================================
   📱 ИДЕАЛЬНАЯ МОБИЛЬНАЯ КАРУСЕЛЬ (ИСПРАВЛЕННО)
   ============================================================ */
@media screen and (max-width: 1150px) {
  /* 1. РОДИТЕЛЬ (Секция на весь экран) */
  .tours-container-3d {
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 2. БЛОК СВАЙПЕРА (Запрещаем ему быть флексом, он должен быть блоком!) */
  .swiper {
    width: 100% !important;
    height: 80vh !important; /* Место под 3D вращение */
    display: block !important;
    margin-top: 0 !important;
  }

  /* 3. КАРТОЧКА (ОНА ЖЕ СЛАЙД). 
       ЖЕСТКИЕ РАЗМЕРЫ, ИНАЧЕ 3D СЛОМАЕТСЯ! */
  .swiper-slide.tour-card {
    width: 85vw !important; /* Карточка занимает 85% ширины экрана */
    max-width: 340px !important; /* Но не больше 340px */
    height: 65vh !important; /* Высота 65% экрана */
    max-height: 550px !important; /* Но не больше 550px */

    display: flex !important;
    flex-direction: column !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    background: rgba(56, 189, 248, 0.5) !important;
    border: 2px solid #38bdf8 !important;
    border-radius: 25px !important;
  }

  /* 4. ФОТО ВНУТРИ */
  .tour-image {
    height: 35% !important; /* Занимает чуть больше трети */
    width: 100% !important;
    flex-shrink: 0 !important;
    margin-bottom: 10px !important;
  }

  /* 5. НАЗВАНИЕ ТУРА */
  .swiper-slide.tour-card h3 {
    font-family: "Caveat", cursive !important;
    font-size: 28px !important;
    margin: 0 0 10px 0 !important;
    flex-shrink: 0 !important;
    line-height: 1.1 !important;
  }

  /* 6. ТЕКСТ-ИНФО (Отменяем конский масштаб с компа) */
  .price-info {
    flex-grow: 1 !important;
    height: auto !important; /* Отменяем высоту "аквариума" с компа */
    overflow-y: auto !important; /* Скролл пальцем */
    padding: 5px !important;
    border: none !important; /* На мобиле рамка внутри не нужна */
    background: transparent !important;
  }

  /* ВОЗВРАЩАЕМ АДЕКВАТНЫЙ РАЗМЕР ШРИФТА ДЛЯ МОБИЛЫ */
  .price-info,
  .price-info * {
    font-size: 22px !important; /* Нормальный шрифт */
    line-height: 1.2 !important;
    text-shadow: none !important; /* Отключаем сильный неон, чтоб легко читалось */
  }

  /* Прячем скроллбар на мобиле, чтоб было красиво */
  .price-info::-webkit-scrollbar {
    display: none !important;
  }
  .price-info {
    scrollbar-width: none !important;
  }

  /* 7. КНОПКА ЗАКАЗА */
  /* 🎯 РЕЗИНОВАЯ КНОПКА "ХОЧУ В ЭТОТ ТУР" */
  .tour-card .card-buttons button {
    /* Умная высота: минимум 40px, в идеале 7vh, максимум 50px */
    height: clamp(40px, 7vh, 50px) !important;

    /* Умный шрифт: от 15px до 18px (масштабируется по ширине экрана) */
    font-size: clamp(15px, 4vw, 18px) !important;

    /* Аккуратные отступы */
    padding: 5px 15px !important;

    /* Чтобы текст не рвал кнопку на мелких экранах */
    white-space: nowrap !important;
    letter-spacing: 1px !important;

    /* Уменьшаем ядерную тень для мобилы */
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
  }

  /* Подтягиваем саму зону кнопки чуть выше, чтобы не было дыры */
  .tour-card .card-buttons {
    padding-top: 8px !important;
    margin-top: auto !important;
  }

  .want-btn {
    height: 50px !important;
    font-size: 18px !important;
    width: 100% !important;
  }
}

/* ============================================================
   ЛАНДШАФТ (Телефон боком)
   ============================================================ */
@media (max-width: 1150px) and (orientation: landscape) {
  .swiper {
    height: 100vh !important;
  }
  .swiper-slide.tour-card {
    height: 85vh !important;
    width: 300px !important;
  }
  .tour-image {
    height: 45% !important;
  }
}
/* ============================================================
   🎯 ФИКС ФОНА ДЛЯ ПЛАНШЕТОВ (LANDSCAPE) 
   ============================================================ */
@media screen and (max-width: 1280px) and (orientation: landscape) {
  /* 1. ПРИБИВАЕМ КОНТЕЙНЕР К СТЕКЛУ ЭКРАНА */
  .video-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -2 !important; /* Уходим под все страницы */
    overflow: hidden !important;
    background: #000; /* Чёрная подстраховка */
  }

  /* 2. ВИДЕО: ЦЕНТРУЕМ И УВЕЛИЧИВАЕМ ДО 1.15 */
  #bgVideo {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    width: auto !important;
    height: auto !important;

    /* Твой заказ: Scale 1.2 + центровка */
    transform: translate(-50%, -50%) scale(1.2) !important;

    object-fit: cover !important;
    pointer-events: none !important;
  }

  /* 3. ОВЕРЛЕЙ (ЩИТ) ТОЖЕ ФИКСИРУЕМ */
  .video-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
    background: rgba(0, 0, 0, 0.3) !important; /* Притемнение */
    pointer-events: none !important;
  }

  /* 4. ОБНУЛЯЕМ ФОНЫ СЕКЦИЙ (Чтобы видео просвечивало везде) */
  .slogan-section,
  .main-page,
  .map-section,
  .tours-container-3d {
    background: transparent !important;
    background-color: transparent !important;
  }
}

/* ИСТРЕБЛЯЕМ КРАСНЫЙ ЦВЕТ В ПОЛЯХ ВВОДА */

/* 1. Цвет самого текста, который ты пишешь */
input,
textarea,
.neon-input,
#chatInput,
#weatherCityInput,
#oName,
#oDates,
#oContact {
  color: #ffffff !important; /* СТРОГО БЕЛЫЙ */
  -webkit-text-fill-color: #ffffff !important; /* Фикс для Айфонов */
}

/* 2. Цвет подсказок (Placeholder), которые висят в пустом поле */
::placeholder {
  color: rgba(255, 255, 255, 0.6) !important; /* Белый полупрозрачный */
  opacity: 1 !important;
}

:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* 3. Убираем синеву или красноту при фокусе (когда нажал на поле) */
input:focus,
textarea:focus {
  color: #ffffff !important;
  outline: none !important;
}

/* ============================================================
   🚦 ИДЕАЛЬНЫЙ СКРОЛЛ + СВАЙП ВНУТРИ КАРТОЧКИ НА МОБИЛЕ
   ============================================================ */
@media (max-width: 1150px) {
  .price-info {
    /* Разрешаем тексту крутиться */
    overflow-y: auto !important;

    /* 🔥 МАГИЯ: Вверх-вниз крутит браузер, влево-вправо отдает Свайперу! */
    touch-action: pan-y !important;

    /* Броня, чтобы скролл текста не улетал в пустоту */
    overscroll-behavior: contain !important;
  }
}

/* ============================================================
   🚀 ЖЕСТКИЙ СВАЙП: ЛИСТАЕМ ВЕЗДЕ (МОБИЛЫ + ПЛАНШЕТЫ)
   ============================================================ */
/* 1. УБРАЛИ ДВОЙНУЮ МАТРЕШКУ - ОСТАВИЛИ ОДИН СЛОЙ */
@media screen and (max-width: 1150px) {
  .price-info {
    pointer-events: auto !important;

    /* 🚀 МАГИЯ БЕЗ ТОРМОЗОВ: */
    touch-action: pan-y !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* ⚡️ ПИНОК ВИДЕОКАРТЕ (убирает дерганье) */
    will-change: transform, scroll-position;
    transform: translateZ(0);

    /* Оптимизируем перенос слов (быстрее чем break-all) */
    word-wrap: break-word !important;

    display: block !important;
    /* Убрал overscroll-behavior: contain - он иногда заставляет скролл "залипать" на старте */
  }

  /* 2. ТОТ САМЫЙ "ЩЕЛЧОК" (Тактильный отклик при нажатии) */
  .tour-card:active {
    transform: scale(0.96) !important; /* Карта слегка приседает при нажатии */
    filter: brightness(1.2); /* Чуть вспыхивает */
    transition: transform 0.1s ease !important;
  }

  /* Самое главное: даем всей карточке понять, что её можно листать вбок */
  .swiper-slide.tour-card {
    touch-action: pan-y !important; /* Страница скроллится вверх-вниз, карусель — влево-вправо */
  }

  /* Чтобы кнопки и крестики не залипали */
  .card-buttons button,
  .close-modal,
  .modal-close {
    position: relative;
    z-index: 999;
    pointer-events: auto !important;
  }
}

/* МОДАЛКА НА ВЕСЬ ЭКРАН ДЛЯ МОБИЛЫ */
@media screen and (max-width: 1150px) {
  /* 🎯 Само черное окно-подложка */
  .modal-overlay {
    background: rgba(
      149,
      157,
      251,
      0.429
    ) !important; /* Плотный фон, чтоб карусель не просвечивала */
    backdrop-filter: blur(10px) !important;
    z-index: 9999999 !important;
  }

  /* 🎯 Контейнер внутри (делаем его широким) */
  .modal-content {
    width: 96vw !important; /* Почти на весь экран */
    height: 90vh !important;
    max-width: none !important;
    margin: 2vh auto !important;
    padding: 0 !important; /* Убираем лишние рамки внутри */
    border-radius: 20px !important;
    border: 2px solid #38bdf8 !important;
    overflow: hidden !important;
  }

  /* 🎯 Iframe внутри (где сама инфа о туре) */
  #modalIframe {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important; /* Чтобы видео бати просвечивало, если в iframe нет фона */
  }
}

/* КРЕСТИК, КОТОРЫЙ ЗНАЕТ СВОЕ МЕСТО */
.close-modal,
.modal-close {
  /* 🛑 ГЛАВНОЕ: Убираем фиксацию к стеклу */
  position: absolute !important;

  /* Привязываем к верхнему правому углу блока .clean-block */
  top: 20px !important;
  right: 20px !important;

  /* Размер и вид (как ты просил — можно уменьшить тут) */
  width: 35px !important;
  height: 35px !important;

  background: rgba(0, 0, 0, 0.6) !important;
  border: 2px solid #38bdf8 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 24px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* 🛡️ ЗАЩИТА: Чтобы фотки (лайтбокс) его ПЕРЕКРЫВАЛИ */
  z-index: 1 !important;
}

/* Обязательно добавь родителю позицию, чтобы крестик не улетел в начало сайта */
.clean-block {
  position: relative !important;
}

body.no-scroll {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100vh !important;
}

/* Когда открыто фото, кнопка закрытия ТУРА исчезает наглухо */
body.no-scroll .close-modal,
body.no-scroll .modal-close {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ============================================================
   🚀 2. ДЛЯ МОБИЛЫ (Вычищаем лаги и оставляем "резину")
   ============================================================ */
@media screen and (max-width: 1150px) {
  /* ГЛАВНЫЙ ФИКС ЛАГА: Убираем scroll-position и лишнее мыло */
  .price-info {
    pointer-events: auto !important;
    touch-action: pan-y !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* ⚡️ ОСТАВЛЯЕМ ТОЛЬКО ТРАНСФОРМ */
    will-change: transform;
    transform: translateZ(0);

    /* Вырубаем тяжелое размытие на мобиле, оно жрет FPS */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 15, 30, 0.95) !important; /* Делаем плотнее фон */
  }

  /* УБИРАЕМ ТОРМОЗНОЙ ТРАНЗИШН ПРИ КЛИКЕ */
  .tour-card:active {
    transform: scale(0.96) !important;
    transition: none !important; /* Мгновенная реакция без ваты */
  }

  /* "РЕЗИНА": Карточка тянется по экрану */
  .swiper-slide.tour-card {
    width: 85vw !important;
    height: 65vh !important; /* 65% от высоты экрана */
    max-height: 550px !important;
  }
}

/* ============================================================
   🛠 3. ОБЩИЙ ФИКС СКРОЛЛБАРА (Чтоб углы не резало на компе)
   ============================================================ */
.price-info::-webkit-scrollbar {
  width: 6px !important;
  background: transparent !important;
}
.price-info::-webkit-scrollbar-thumb {
  background: #38bdf8 !important;
  border-radius: 10px !important;
}