/* Карта подій та перемикач «Список ⇄ Карта» на сторінці «Усі події».
   Leaflet власні стилі — у leaflet.css; тут лише наша обгортка, кнопки та попап. */

/* --- Перемикач вигляду --- */
.events-view-toggle {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.3rem;
  margin-bottom: 1.1rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(8, 81, 184, 0.08);
}

.ev-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 0.75rem;
  background: transparent;
  color: #4a5648;
  /* <button> не успадковує шрифт сторінки (UA-стиль дає системний), на
     відміну від звичайних div/span — без явного font-family «Список»/«Карта»
     виглядали не тим шрифтом, що решта сайту. */
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ev-view-btn svg { flex-shrink: 0; }

.ev-view-btn:hover { background: #eef4fd; color: #0851b8; }

.ev-view-btn.is-active {
  background: #0851b8;
  color: #fff;
  box-shadow: 0 4px 14px rgba(8, 81, 184, 0.28);
}

/* --- Полотно карти --- */
/* Обгортка — контекст позиціювання для оверлея «порожньо» поверх полотна. */
.events-map-wrap { position: relative; }

/* Leaflet (leaflet.css) форсить власний "general typography" шрифт
   (Helvetica Neue/Arial) на .leaflet-container — усі підписи й попапи карти
   виглядали не тим шрифтом, що решта сайту. Перебиваємо тут, а не у самому
   leaflet.css (сторонній/вендорний файл). */
.leaflet-container {
  font-family: var(--font-body);
}

.events-map-canvas {
  width: 100%;
  height: 560px;
  max-height: calc(100vh - var(--top-bar-height) - 6rem);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(8, 81, 184, 0.08);
  background: #e8eef5; /* фон, поки плитки вантажаться */
  /* isolation: isolate робить контейнер окремим стекінг-контекстом — внутрішні
     z-index Leaflet (панелі 200–700) лишаються ВСЕРЕДИНІ й не воюють із шапкою/
     випадайками фільтра, а сам контейнер тримаємо низько (z-index:1). НЕ чіпаємо
     z-index окремих .leaflet-pane — інакше плитки лягають поверх маркерів і
     перехоплюють кліки (попап не відкривається). */
  position: relative;
  z-index: 1;
  isolation: isolate;
}

/* Оверлей «на карті порожньо» — по центру полотна, кліки пропускає крізь себе
   (pointer-events:none), бо взаємодіяти все одно нема з чим. z-index:2 — над
   ізольованим контекстом полотна (воно на z-index:1). */
.events-map-empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 1.5rem;
  text-align: center;
}

/* КРИТИЧНО: авторський display:flex вище перебиває браузерний [hidden]{display:none}
   (author > user-agent незалежно від специфічності), тож без цього правила оверлей
   «порожньо» висів би завжди — навіть коли на карті є маркери. Повертаємо ховання
   через hidden. */
.events-map-empty[hidden] { display: none; }

.events-map-empty span {
  background: #fff;
  color: #4a5648;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.7rem 1.2rem;
  border-radius: 0.9rem;
  box-shadow: 0 8px 24px rgba(8, 81, 184, 0.14);
}

/* Кастомна шпилька (divIcon) — прибираємо дефолтний фон/рамку divIcon.
   position:relative — щоб бейдж-лічильник позиціювався відносно шпильки. */
.ev-map-pin {
  position: relative;
  background: transparent;
  border: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

/* Бейдж-лічильник кількох подій на одній точці — у правому верхньому куті шпильки. */
.ev-map-pin-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e11d48;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 9px;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}

/* pointer-events:none на SVG — КРИТИЧНО: інакше справжній клік влучає в дочірній
   <path>/<circle>, і Leaflet не пов'язує подію з маркером (попап не відкривається).
   Знявши події з SVG, робимо цілим hit-target сам div .ev-map-pin (у нього
   pointer-events:auto), і Leaflet коректно ловить клік по маркеру. */
.ev-map-pin svg,
.ev-map-pin svg * { pointer-events: none; }

/* --- Попап маркера --- */
.ev-map-pop { min-width: 180px; font-size: 0.86rem; color: #1f241d; }

.ev-map-pop-title {
  display: block;
  font-size: 0.98rem;
  font-weight: 900;
  margin-bottom: 0.4rem;
  color: #12203a;
}

.ev-map-pop-row {
  margin: 0.15rem 0;
  color: #4a5648;
  font-weight: 600;
}

.ev-map-pop-link {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.4rem 0.9rem;
  background: #0851b8;
  color: #fff !important;
  border-radius: 0.6rem;
  font-weight: 800;
  text-decoration: none;
  font-size: 0.82rem;
}

.ev-map-pop-link:hover { background: #063d8c; }

/* --- Груповий попап (кілька подій на одній точці) --- */
.ev-map-pop-group { min-width: 210px; }

.ev-map-pop-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}

.ev-map-pop-item {
  padding: 0.5rem 0;
  border-top: 1px solid #e6edf7;
}

.ev-map-pop-item:first-child { border-top: none; }

.ev-map-pop-item-link {
  display: block;
  font-weight: 800;
  font-size: 0.9rem;
  color: #12203a !important;
  text-decoration: none;
}

.ev-map-pop-item-link:hover { color: #0851b8 !important; text-decoration: underline; }

@media (max-width: 640px) {
  .events-map-canvas { height: 440px; }
  .events-view-toggle { width: 100%; }
  .ev-view-btn { flex: 1; justify-content: center; }
}