/* ==========================================================================
   Leaflet — jedyny arkusz stylów dla map, pinów, klastrów i popupów.

   Wszystko, co dotyczy wyglądu mapy, mieszka TUTAJ. Nie dodawaj reguł
   `.leaflet-*`, `.map-pin*`, `.map-popup*` ani `.marker-cluster*` do
   listing.css / attractions.css / detail.css — plik jest ładowany globalnie
   w base.html, więc jedna definicja obowiązuje na każdej stronie z mapą.
   Markup popupów budują buildPopupHtml()/buildMap() w:
     mainapp/js/search_results.js, events/js/listing.js,
     attractions/js/attractions.js — tam mają być wyłącznie klasy, zero style="".
   ========================================================================== */

.leaflet-container {
  /* Własne tokeny z fallbackiem — strony bez motywu też wyglądają poprawnie. */
  --map-accent: var(--primary, #0d9488);
  --map-accent-fg: #fff;
  --map-surface: #fff;
  --map-fg: #111827;
  --map-muted-fg: #6b7280;
  --map-line: rgba(17, 24, 39, 0.08);
  --map-promoted: #f59e0b;
  --map-radius: 16px;
  --map-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.28), 0 2px 8px rgba(15, 23, 42, 0.08);
  font-family: var(--font-body, 'Inter', system-ui, -apple-system, sans-serif);
}

/* ===== z-index — mapa nie może nachodzić na navbar ===== */
.leaflet-container,
.leaflet-pane,
.leaflet-map-pane {
  z-index: 1 !important;
}
.leaflet-control-container .leaflet-top,
.leaflet-control-container .leaflet-bottom,
.leaflet-control {
  z-index: 20 !important;
}
/* Popup i tooltip wyżej od kontrolek, ale niżej od navbara */
.leaflet-popup,
.leaflet-tooltip {
  z-index: 25 !important;
}

/* ===== Mapa na stronie szczegółów ===== */
/* Przygaszenie surowych kolorów kafelków OSM (bez zmiany dostawcy, żeby
   zachować polskie nazwy i pełną gęstość POI) — filtr na całej warstwie
   kafelków naraz, nie per-tile, żeby uniknąć widocznych szwów. */
.detail-map .leaflet-tile-pane {
  filter: saturate(0.7) brightness(1.06) contrast(0.96);
}

/* Minimalistyczna kontrolka zoomu */
.detail-map .leaflet-control-zoom {
  border: none;
  border-radius: var(--dp-radius-full, 999px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.detail-map .leaflet-control-zoom a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--fg, #1f2937);
  font-size: 16px;
}
.detail-map .leaflet-control-zoom a:hover { background: var(--muted, #f1f5f9); }
.detail-map .leaflet-control-zoom-in { border-radius: var(--dp-radius-full, 999px) var(--dp-radius-full, 999px) 0 0; }
.detail-map .leaflet-control-zoom-out { border-radius: 0 0 var(--dp-radius-full, 999px) var(--dp-radius-full, 999px); }

/* ===== Piny ===== */
.map-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}
.map-pin svg { width: 11px; height: 11px; fill: #fff; }
.map-pin--promoted {
  background: var(--map-promoted, #f59e0b);
  animation: map-pin-pulse 2s ease-in-out infinite;
}
@keyframes map-pin-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(245, 158, 11, 0.5); }
  50%      { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), 0 0 0 7px rgba(245, 158, 11, 0); }
}

.detail-pin { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }

/* Marker „Twoja lokalizacja” */
.user-location-marker span,
.user-location-marker div {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #36d399;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ===== Klastry ===== */
.marker-cluster-custom {
  background: none;
  border: none;
  box-shadow: none;
}
.marker-cluster-custom div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary, #2563eb), var(--primary, #0d9488));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   Popup — chrome Leafletu
   ========================================================================== */
.leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: var(--map-radius, 16px);
  overflow: hidden;
  background: var(--map-surface, #fff);
  box-shadow: var(--map-shadow);
  border: 1px solid var(--map-line);
}
/* margin:0 + width:auto — obrazek popupu ma iść na całą szerokość, bez ramki */
.leaflet-popup-content {
  margin: 0;
  padding: 0;
  line-height: normal;
  width: auto !important;
}
.leaflet-popup-tip-container { margin-top: -1px; }
.leaflet-popup-tip {
  box-shadow: var(--map-shadow);
  border: 1px solid var(--map-line);
}

/* Krzyżyk jako pływający przycisk nad zdjęciem */
.leaflet-popup-close-button {
  top: 8px !important;
  right: 8px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.55);
  color: #fff !important;
  font: 700 16px/1 var(--font-body, system-ui, sans-serif);
  padding: 0 !important;
  backdrop-filter: blur(4px);
  transition: background 160ms ease;
}
.leaflet-popup-close-button:hover { background: rgba(17, 24, 39, 0.8); color: #fff !important; }

/* ==========================================================================
   Popup — karta obiektu (wydarzenie / atrakcja / wynik wyszukiwania)
   ========================================================================== */
.map-popup {
  display: block;
  width: 264px;
  text-decoration: none;
  color: var(--map-fg);
}
.map-popup--compact { width: 190px; }

/* --- Zdjęcie: pełna szerokość, bez paddingu dookoła --- */
.map-popup__media {
  position: relative;
  display: block;
  height: 150px;
  overflow: hidden;
  background: #eef2f7;
}
.map-popup--compact .map-popup__media { height: 112px; }
.map-popup__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease;
}
.map-popup:hover .map-popup__img { transform: scale(1.04); }
/* Placeholder gdy obiekt nie ma zdjęcia — używany też przez kafelki
   promowane na mapie pełnoekranowej, dlatego osobna, ogólna klasa. */
.map-img-fallback,
.map-popup__img--empty {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
}
.map-promo-card-img .map-img-fallback { font-size: 22px; }
/* Delikatny scrim, żeby biała etykieta miasta była czytelna na każdym zdjęciu */
.map-popup__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 56%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  pointer-events: none;
}
.map-popup--compact .map-popup__media::after { display: none; }

/* --- Etykiety na zdjęciu --- */
.map-popup__tag {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.map-popup__tag svg { width: 10px; height: 10px; flex-shrink: 0; }
.map-popup__tag--promoted {
  top: 10px;
  left: 10px;
  background: var(--map-promoted, #f59e0b);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.45);
}
.map-popup__tag--category {
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--map-accent);
  backdrop-filter: blur(4px);
}
.map-popup__tag--city {
  bottom: 10px;
  left: 10px;
  background: transparent;
  color: #fff;
  padding: 0;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* --- Treść --- */
.map-popup__body { padding: 12px 14px 14px; }
.map-popup--compact .map-popup__body { padding: 10px 12px 12px; }
.map-popup__title {
  margin: 0 0 6px;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--map-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.map-popup--compact .map-popup__title {
  font-size: 13px;
  margin-bottom: 9px;
}
.map-popup__author {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--map-muted-fg);
}
.map-popup__author svg { width: 11px; height: 11px; flex-shrink: 0; }

.map-popup__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 9px;
}
.map-popup__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
}
.map-popup__chip svg { width: 10px; height: 10px; flex-shrink: 0; }
.map-popup__chip--date { background: #ecfdf5; color: #047857; }
.map-popup__chip--date-end { background: #fffbeb; color: #b45309; }
.map-popup__chip--free { background: #ecfdf5; color: #047857; }
.map-popup__chip--paid { background: #fef2f2; color: #b91c1c; }
.map-popup__chip--open { background: #ecfdf5; color: #047857; }
.map-popup__chip--closed { background: #fef2f2; color: #b91c1c; }

.map-popup__desc {
  margin: 0 0 11px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--map-muted-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.map-popup__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--map-accent);
  color: var(--map-accent-fg);
  border-radius: 9px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  transition: gap 160ms ease, filter 160ms ease;
}
.map-popup__cta svg { width: 13px; height: 13px; }
.map-popup:hover .map-popup__cta { gap: 9px; filter: brightness(1.08); }

/* Leaflet koloruje linki w popupie na niebiesko — nasza karta ma własne kolory */
.leaflet-container a.map-popup,
.leaflet-container a.map-popup:hover { color: var(--map-fg); }

/* ===== Popup na mapie szczegółów (jedna lokalizacja) ===== */
.detail-map-popup {
  padding: 12px 16px;
  text-align: left;
  min-width: 140px;
}
.detail-map-popup strong {
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--fg, #1f2937);
}
.detail-map-popup span {
  font-size: 12px;
  color: var(--muted-fg, #6b7280);
}