/* ============================================================
   Hosty Stay · wspólny wygląd map (Leaflet)

   Dlaczego osobny plik, a nie tokeny strony:
   każda strona z mapą ma własny zestaw zmiennych CSS
   (apartamenty.html: --burgundy-2/--ivory/--sans; styles.css: --wine/--cream/--font-ui;
   apartament-lux.html: własny). Wspólny CSS oparty na var() z jednej z tych rodzin
   dawałby przezroczyste piny na dwóch pozostałych stronach. Dlatego wartości są tu
   wpisane wprost — plik jest samowystarczalny i wygląda tak samo wszędzie.

   Ładowany przez: index.html, apartamenty.html, apartament-lux.html, grupa.html
   ============================================================ */

/* Kafle: ciemna mapa CARTO. Tło kontenera = kolor kafli, żeby przy wczytywaniu
   nie mrugało jasne pole na ciemnej stronie. */
.hosty-map { background: #1b1514; }
.hosty-map .leaflet-container { height: 100%; width: 100%; font-family: "Inter", system-ui, sans-serif; background: #1b1514; }

/* ---------- Piny ---------- */
.grp-pin { background: none !important; border: none !important; }

/* Pin obiektu: bordowe wypełnienie + złota obwódka + jasna cyfra (liczba apartamentów).
   Kropla (border-radius 50% 50% 50% 0 + rotate) celuje ostrym rogiem w punkt na mapie.
   Rozmiar jest duży świadomie — nakładanie się pinów rozwiązuje rozsuwanie po kliknięciu
   (HOSTY_MAP.declutter), a nie zmniejszanie, które psuło czytelność liczb. */
.grp-dot {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: linear-gradient(135deg, #7a2a3c, #5C1F2E);
  color: #f4ede4; font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 13px;
  border: 2px solid #C9A961;
  box-shadow: 0 4px 12px rgba(0,0,0,.7), 0 0 0 2px rgba(201,169,97,.14), 0 0 10px rgba(201,169,97,.26);
  transition: transform .2s ease, box-shadow .2s ease;
}
.grp-dot:hover {
  transform: rotate(-45deg) scale(1.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.78), 0 0 0 4px rgba(201,169,97,.24), 0 0 15px rgba(201,169,97,.45);
}
/* Cyfra wraca do pionu — kontener jest obrócony o -45°. */
.grp-dot span { transform: rotate(45deg); text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* Pojedynczy apartament — mniejsza kropla, żeby obiekty wielolokalowe dominowały wizualnie. */
.grp-dot.is-one {
  width: 26px; height: 26px; font-size: 10.5px; border-width: 1.5px;
  box-shadow: 0 3px 9px rgba(0,0,0,.6), 0 0 0 2px rgba(201,169,97,.12), 0 0 7px rgba(201,169,97,.2);
}
.grp-dot.is-one:hover {
  box-shadow: 0 5px 13px rgba(0,0,0,.75), 0 0 0 3px rgba(201,169,97,.2), 0 0 11px rgba(201,169,97,.4);
}

/* S12 — cała kamienica: zielona, zgodnie z motywem obiektu (flagowiec). */
.grp-dot.is-s12 {
  background: linear-gradient(135deg, #2F7A5C, #1E4A38); border-color: #7FC0A0;
  box-shadow: 0 4px 12px rgba(0,0,0,.7), 0 0 0 2px rgba(47,122,92,.2), 0 0 12px rgba(47,122,92,.4);
}
.grp-dot.is-s12:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,.78), 0 0 0 4px rgba(47,122,92,.3), 0 0 18px rgba(47,122,92,.55);
}

/* Klastrowanie (Leaflet.markercluster) używa NASZEJ ikony przez iconCreateFunction,
   więc domyślne niebieskie kółka wtyczki nie mają czego nadpisywać — ładujemy tylko
   MarkerCluster.css (animacje rozsuwania), bez Default.css. */
.marker-cluster { background: none; border: none; }
.leaflet-cluster-anim .leaflet-marker-icon { transition: transform .25s ease-out, opacity .25s ease-in; }

/* ---------- Dymki ---------- */
/* Domyślne dymki Leafletu są białe — na ciemnej mapie wyglądałyby jak dziura.
   Nie dotyczy .hp-pop (strona główna ma własną kartę ze zdjęciem). */
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #201917 !important; color: #f4ede4 !important; border: 1px solid rgba(201,169,97,.16);
}
.leaflet-popup-content { font-family: "Inter", system-ui, sans-serif; font-size: 13px; line-height: 1.5; }
.leaflet-popup-content b { font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; color: #d8bd86; }
.leaflet-popup-content a { color: #C9A961; font-weight: 600; }
.leaflet-container a.leaflet-popup-close-button { color: #b3a79c; }

/* Atrybucja i sterowanie zoomem na ciemnym tle. */
.leaflet-control-attribution { background: rgba(20,16,16,.72) !important; color: #8a7f75 !important; }
.leaflet-control-attribution a { color: #b3a79c !important; }
.leaflet-bar a { background: #201917 !important; color: #f4ede4 !important; border-bottom-color: rgba(201,169,97,.16) !important; }
.leaflet-bar a:hover { background: #2a211f !important; }