/* ========================================= */
/* 1. BASE STYLES */
/* ========================================= */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Шрифт как в туре для единообразия */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* ========================================= */
/* 2. MAP ELEMENTS (MARKERS) */
/* ========================================= */
.hotel-marker {
  z-index: 1000 !important;
  transition: transform 0.2s;
}

.hotel-marker:hover {
  transform: scale(1.1);
  z-index: 1001 !important;
}

.poi-marker.active {
  transform: scale(1.5);
  z-index: 500 !important;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.5));
}

.plane-icon {
  transform: translateY(-12px);
  display: block;
  transition: transform 0.1s linear;
  z-index: 50;
  /* Можно добавить легкую тень самолету */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}

.poi-marker {
  cursor: pointer;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
  transition: transform 0.2s ease;
  z-index: 10;
  display: flex;
  justify-content: center;
}

.poi-marker:hover {
  transform: scale(1.3);
  z-index: 100;
}


/* ========================================= */
/* 3. POPUPS (Clean & Stable) */
/* ========================================= */
.maplibregl-popup {
  z-index: 2000 !important;
}

.maplibregl-popup-content {
  border-radius: 16px !important;
  overflow: hidden;
  padding: 0 !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
  background: white;
}

.maplibregl-popup-close-button {
  color: #555;
  font-size: 18px;
  padding: 5px 8px;
  z-index: 2;
  background: transparent; /* Фикс для некоторых браузеров */
}
.maplibregl-popup-close-button:hover {
  background: rgba(0,0,0,0.05);
  border-radius: 0 0 0 8px;
}

/* Контент */
.popup-text {
  padding: 14px 16px;
  text-align: left;
  background: #fff;
}

.popup-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #222;
}

.popup-desc {
  margin: 0 0 10px; /* Отступ до дистанции */
  font-size: 13px;
  line-height: 1.5;
  color: #444;
}

/* --- НОВЫЙ СТИЛЬ ДИСТАНЦИИ (Как старая категория) --- */
.popup-dist-text {
  color: #888;          /* Серый цвет */
  display: flex;        /* Чтобы иконка встала ровно */
  align-items: center;
  margin-top: 4px;
  margin-bottom: 12px;  /* Отступ до кнопки */
  font-size: 13px;
  font-weight: 700;     /* Жирный */
  text-transform: uppercase; /* КАПС */
  letter-spacing: 0.05em;
}

/* --- АККУРАТНАЯ КНОПКА (NEATER BUTTON) --- */
/* --- АККУРАТНАЯ КНОПКА (SOFT BLUE) --- */
.popup-btn {
  display: inline-block;
  width: auto;
  margin-top: 0;
  padding: 4px 16px;

  /* SOFT BLUE: Очень светлый голубой фон */
  background-color: #ecf4ff;
  /* Текст фирменного синего цвета */
  color: #1c6ed9;
  /* Едва заметная рамка в тон */
  border: 1px solid rgba(28, 110, 217, 0.15);

  text-decoration: none;
  border-radius: 8px;

  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* При наведении кнопка становится яркой */
.popup-btn:hover {
  background-color: #1c6ed9; /* Заливаем синим */
  color: #ffffff; /* Текст становится белым */
  border-color: #1c6ed9;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(28, 110, 217, 0.25); /* Легкое синее свечение */
}

.popup-image {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 140px; /* Фиксированная высота, как в оригинале */
}

/* ========================================= */
/* 4. ИНТЕРФЕЙС КАРТЫ (ZOOM, COMPASS) */
/* Перекрашиваем стандартные белые кнопки в Blue Glass */
/* ========================================= */

.maplibregl-ctrl-group {
  background: rgba(12, 35, 56, 0.85) !important; /* Темно-синий фон */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(156, 185, 235, 0.55) !important; /* Светлая обводка */
  border-radius: 12px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28) !important;
  overflow: hidden;
}

.maplibregl-ctrl-group button {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; /* Разделитель кнопок */
}

.maplibregl-ctrl-group button:last-child {
  border-bottom: none !important;
}

.maplibregl-ctrl-group button:hover {
  background: rgba(255, 255, 255, 0.15) !important; /* Ховер эффект */
}

/* ИНВЕРТИРУЕМ ИКОНКИ (так как они черные, а фон стал темным) */
.maplibregl-ctrl-icon {
  filter: invert(1) brightness(2); /* Делаем иконки белыми */
}

/* ========================================= */
/* 5. ЧИСТКА ЛОГОТИПОВ (ИСПРАВЛЕННАЯ КНОПКА "i") */
/* ========================================= */
/* 1. Скрываем логотип MapTiler ВЕЗДЕ */
/* Мы перечисляем все возможные варианты классов */
.maplibregl-ctrl-logo,
a.maplibregl-ctrl-logo,
.mapboxgl-ctrl-logo,
div.maplibregl-ctrl-bottom-left .maplibregl-ctrl {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* 2. Убираем пустой контейнер слева внизу, если он остался */
.maplibregl-ctrl-bottom-left {
  display: none !important;
}

/* 3. Скрываем развернутый текст копирайта */
.maplibregl-ctrl-attrib:not(.maplibregl-compact) {
  display: none !important;
}

/* 4. Настраиваем нашу кнопку "i" (справа внизу) */
.maplibregl-ctrl-bottom-right {
  display: block !important; /* Убеждаемся, что правый угол виден */
  bottom: 10px !important;
  right: 10px !important;
  margin: 0 !important;
}

/* 2. Принудительно сворачиваем текст в кнопку "i" */
/* Показываем текст ТОЛЬКО когда мышка наведена на кнопку */
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner {
  display: none; /* Прячем текст по умолчанию */
}

.maplibregl-ctrl-attrib.maplibregl-compact:hover .maplibregl-ctrl-attrib-inner {
  display: block; /* Показываем текст только при наведении */
}

/* ========================================= */
/* 6. НОВЫЕ ФИЛЬТРЫ (BLUE GLASS STYLE) */
/* ========================================= */

.filter-widget {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1000;
  width: 130px; /* Чуть шире для красоты */
}

/* Главная кнопка (Триггер) */
.filter-toggle {
  width: 100%;

  /* BLUE GLASS STYLE */
  background: rgba(12, 35, 56, 0.85); /* Темно-синий */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(156, 185, 235, 0.55); /* Светлая обводка */

  border-radius: 999px; /* Pill shape */
  padding: 10px 18px;

  font-size: 13px;
  font-weight: 600;
  color: #e1edff; /* Бело-голубоватый текст */
  letter-spacing: 0.02em;

  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease-out;
}

.filter-toggle:hover {
  /* Вместо высветления фона делаем его насыщенным темным */
  background: rgba(7, 18, 40, 0.95);

  /* Яркая голубая обводка */
  border-color: #5d9eff;

  /* Эффект свечения:
     1. Глубокая черная тень для отрыва от фона (depth)
     2. Синее размытое свечение (glow)
  */
  box-shadow:
    0 8px 25px rgba(0,0,0,0.5),
    0 0 20px rgba(28, 110, 217, 0.5);

  /* Легкое увеличение и подъем вверх */
  transform: translateY(-2px) scale(1.03);

  color: #fff;
}

/* Стрелочка */
.filter-toggle::after {
  content: '▼';
  font-size: 10px;
  color: #8bbafc;
}

/* Выпадающий список */
.filter-dropdown {
  display: none;
  position: absolute;
  top: 50px; /* Отступ */
  left: 0;
  width: 100%;

  /* BLUE GLASS STYLE */
  background: rgba(12, 35, 56, 0.9); /* Чуть плотнее фон */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(156, 185, 235, 0.3);

  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  overflow: hidden;
  flex-direction: column;
  padding: 6px 0;
}

.filter-dropdown.show {
  display: flex;
  animation: fadeInDown 0.2s ease-out;
}

/* Пункты меню */
.filter-option {
  padding: 10px 16px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d0e0f5; /* Светлый текст */
  transition: background 0.15s;
}

.filter-option:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Активный пункт */
.filter-option.selected {
  background: rgba(28, 110, 217, 0.4); /* Синяя подсветка активного */
  color: #fff;
  font-weight: 600;
}

/* Анимация появления меню */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================= */
/* 7. КНОПКА FULLSCREEN (Compact Blue Glass) */
/* ========================================= */

.fullscreen-btn {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 1000;

  /* BLUE GLASS STYLE */
  background: rgba(12, 35, 56, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(156, 185, 235, 0.55);

  /* Делаем кнопку квадратной со скруглением (как иконка iOS/Mac) */
  border-radius: 12px;
  width: 40px;  /* Фиксированная ширина */
  height: 40px; /* Фиксированная высота */
  padding: 0;   /* Убираем отступы, центрируем флексом */

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Тень */
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
  transition: all 0.2s ease-out;

  color: #e1edff;
}

/* Эффект свечения при наведении (тот самый Glow) */
.fullscreen-btn:hover {
  background: rgba(7, 18, 40, 0.95);
  border-color: #5d9eff;

  /* Сильное синее свечение */
  box-shadow:
    0 8px 25px rgba(0,0,0,0.5),
    0 0 20px rgba(28, 110, 217, 0.6);

  transform: translateY(-2px) scale(1.05);
  color: #fff;
}

/* Иконка внутри */
.fullscreen-icon {
  width: 24px; /* Крупная иконка для легкого нажатия пальцем */
  height: 24px;
  fill: currentColor;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)); /* Тень для объема самой иконки */
}

/* Класс для iOS псевдо-фулскрина */
.ios-fullscreen {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: white; /* Чтобы под картой ничего не просвечивало */
  margin: 0 !important;
  padding: 0 !important;
}

/* Фикс, чтобы кнопка закрытия была видна поверх карты на iOS */
.fullscreen-btn {
  z-index: 100000 !important;
}