/* Mapa interaktywna obszaru dzialania IKW (Faza 4.4).
 * Spojny z theme izba-warszawa (navy #25426B, cream #F7F6F2, gold #B89968). */

.izba-mapa-obszaru {
	width: 100%;
	height: 760px;
	margin: 2rem 0;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid #E5E7EB;
	background: #F7F6F2;
	position: relative;
}

/* Powiekszone okno mapy: na szerszych ekranach wychodzi poza kolumne tresci
   (szersze niz 1100px) i centruje sie wzgledem strony — bez transformacji
   (Leaflet liczy pozycje markerow wzgledem kontenera). */
@media (min-width: 1180px) {
	.izba-mapa-obszaru {
		--mw: min(1360px, calc(100vw - 40px));
		width: var(--mw);
		margin-left: calc((100% - var(--mw)) / 2);
	}
}

/* Instrukcja obslugi nad mapa (wstrzykiwana z mapa-obszar.js). Stonowana
   czerwien — bordo na jasnym tle zamiast alarmowej #F00: ma zwracac uwage,
   nie krzyczec (paleta strony: navy/gold). Warianty tresci mysz/dotyk
   przelaczane po TYPIE wskaznika, nie szerokosci okna (tablet z palcem
   dostaje wariant dotykowy takze w poziomie). */
.izba-mapa-instrukcja {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 2rem 0 0;
	padding: 10px 14px;
	background: #FBF1F1;
	border-left: 4px solid #9E2B33;
	border-radius: 0 4px 4px 0;
	color: #7C2328;
	font-size: 14px;
	line-height: 1.5;
}
.izba-mapa-instrukcja + .izba-mapa-obszaru { margin-top: 10px; }
.izba-mapa-instrukcja-ico { font-style: normal; font-weight: 700; color: #9E2B33; }
.izba-mapa-instrukcja .izba-instr-dotyk { display: none; }
@media (hover: none) and (pointer: coarse) {
	.izba-mapa-instrukcja .izba-instr-mysz { display: none; }
	.izba-mapa-instrukcja .izba-instr-dotyk { display: inline; }
}
/* Na szerokich ekranach pasek rozszerza sie tak samo jak mapa — wspolna krawedz. */
@media (min-width: 1180px) {
	.izba-mapa-instrukcja {
		--mw: min(1360px, calc(100vw - 40px));
		width: var(--mw);
		margin-left: calc((100% - var(--mw)) / 2);
		box-sizing: border-box;
	}
}

@media (max-width: 768px) {
	.izba-mapa-obszaru {
		height: 460px;
	}
}

.mapa-loader {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	background: #F7F6F2;
	color: #6B7280;
	font-style: italic;
	pointer-events: none;
}

/* DivIcon labelek dzielnic (overlay nad mapa) */
.izba-dzielnica-label-divicon {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.dz-label {
	display: inline-block;
	background: rgba(255, 255, 255, 0.85);
	color: #25426B;
	font-family: 'EB Garamond', serif;
	font-size: 13px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 3px;
	white-space: nowrap;
	text-shadow: 0 0 1px white;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Rewiry sadow — tooltip + legenda */
.izba-rewir-tooltip {
	background: #25426B !important;
	color: #fff !important;
	border: none !important;
	border-radius: 4px;
	padding: 5px 9px !important;
	font-size: 12px;
	line-height: 1.35;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.izba-rewir-tooltip::before { border-top-color: #25426B !important; }

.izba-rewir-legend {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
	font-family: 'IBM Plex Sans', sans-serif;
	max-width: 250px;
	overflow: hidden;
}
.izba-rewir-legend-toggle {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: #25426B;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 7px 11px;
	cursor: pointer;
}
.izba-rewir-legend-body {
	max-height: 264px;
	overflow-y: auto;
	padding: 7px 11px 9px;
}
.izba-rewir-legend-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	color: #374151;
	padding: 3px 0;
	cursor: default;
	line-height: 1.25;
}
.izba-rewir-legend-row:hover { color: #25426B; font-weight: 600; }
.izba-rewir-legend-row .sw {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}
@media (max-width: 640px) {
	.izba-rewir-legend { max-width: 190px; }
	.izba-rewir-legend-body { max-height: 180px; }
	.izba-rewir-legend-row { font-size: 10.5px; }
}

/* Tooltip dla poligonu granicy dzielnicy (hover anywhere w polygon) */
.izba-dzielnica-tooltip {
	background: #25426B !important;
	color: white !important;
	border: none !important;
	border-radius: 3px;
	padding: 3px 8px !important;
	font-size: 12px;
	font-weight: 500;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.izba-dzielnica-tooltip::before {
	border-top-color: #25426B !important;
}

/* Hover tooltip nad pinem (tylko nazwa) */
.izba-kanc-hover {
	background: #25426B !important;
	color: white !important;
	border: none !important;
	padding: 4px 10px !important;
	font-size: 12px;
	font-weight: 500;
	box-shadow: none;
}

.izba-kanc-hover::before {
	border-top-color: #25426B !important;
}

/* Popup kontener (klik na pin) */
.izba-kanc-popup-wrap .leaflet-popup-content-wrapper {
	border-radius: 6px;
	padding: 0;
}

.izba-kanc-popup-wrap .leaflet-popup-content {
	margin: 0;
	width: 280px !important;
}

.kanc-popup {
	padding: 14px 16px;
	font-family: 'IBM Plex Sans', sans-serif;
}

.kanc-popup h3 {
	font-family: 'EB Garamond', serif;
	color: #25426B;
	font-size: 1.1rem;
	margin: 0 0 0.5rem;
	line-height: 1.3;
}

.kanc-popup .sad {
	font-size: 0.85rem;
	color: #6B7280;
	margin: 0 0 0.5rem;
	line-height: 1.4;
}

.kanc-popup .adres {
	font-size: 0.9rem;
	margin: 0 0 0.75rem;
	color: #374151;
	line-height: 1.4;
}

.kanc-popup .kontakt p {
	margin: 0.25rem 0;
	font-size: 0.9rem;
}

.kanc-popup .kontakt a {
	color: #25426B;
	text-decoration: none;
}

.kanc-popup .kontakt a:hover {
	text-decoration: underline;
}

.kanc-popup .link {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
}

.kanc-popup .link a {
	color: #25426B;
	font-weight: 500;
	text-decoration: none;
}

.kanc-popup .link a:hover {
	text-decoration: underline;
}

/* Pin z licznikiem (>1 kancelaria pod tym samym adresem) — pin tej samej
   wielkosci co pojedynczy; liczba jako maly znacznik wysrodkowany NAD pinem. */
.izba-kanc-pin-badge-wrap {
	background: transparent !important;
	border: none !important;
	position: relative;
	width: 40px;
	height: 40px;
}

.izba-kanc-pin-badge-wrap img {
	display: block;
	width: 40px;
	height: 40px;
}

.izba-kanc-pin-badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	box-sizing: border-box;
	background: #B89968;
	color: #fff;
	border: 1.5px solid #fff;
	border-radius: 9px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Popup z wieloma kancelariami (obok siebie) */
.izba-kanc-popup-multi-wrap .leaflet-popup-content {
	width: auto !important;
}

.kanc-popup-multi .multi-naglowek {
	margin: 0 0 0.75rem;
	padding: 0 16px;
	padding-top: 12px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #B89968;
}

.kanc-popup-multi {
	padding: 0;
}

.kanc-popup-multi .multi-lista {
	display: flex;
	flex-wrap: nowrap;       /* kancelarie ZAWSZE obok siebie */
	overflow-x: auto;        /* >3 kancelarie — poziomy scroll */
	gap: 0;
}

.kanc-popup-multi .multi-office {
	box-sizing: border-box;
	flex: 0 0 232px;
	width: 232px;
	padding: 2px 16px 14px;
	border-left: 1px solid #E5E7EB;
}

.kanc-popup-multi .multi-office:first-child {
	border-left: none;
}

/* Czytelny pasek przewijania w popupie z wieloma kancelariami */
.kanc-popup-multi .multi-lista::-webkit-scrollbar {
	height: 8px;
}
.kanc-popup-multi .multi-lista::-webkit-scrollbar-thumb {
	background: #C7CDD6;
	border-radius: 4px;
}

.kanc-popup-multi .multi-office h3 {
	font-size: 1rem;
}

.multi-badge-zast {
	display: inline-block;
	margin-bottom: 4px;
	padding: 1px 7px;
	background: #FBEAF0;
	color: #72243E;
	border-radius: 3px;
	font-family: 'IBM Plex Sans', sans-serif;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.kanc-popup .zast-osoba {
	font-size: 0.85rem;
	color: #374151;
	margin: 0 0 0.5rem;
}

/* Aside: lista 14 sadow pod mapa */
.mapa-statystyki {
	max-width: 1100px;
	margin: 2rem auto 4rem;
	padding: 1.5rem;
	background: #F7F6F2;
	border-radius: 6px;
}

.mapa-statystyki h2 {
	font-family: 'EB Garamond', serif;
	color: #25426B;
	font-size: 1.3rem;
	margin: 0 0 1rem;
}

.sady-lista {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 0.5rem 1.5rem;
}

.sady-lista li {
	font-size: 0.9rem;
	color: #374151;
	padding: 0.5rem 0;
	border-bottom: 1px solid #E5E7EB;
}

/* Strona /obszar-dzialania/ — naglowek */
.strona-obszar {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem 1.5rem 4rem;
}

.obszar-header h1 {
	font-family: 'EB Garamond', serif;
	font-size: 2.5rem;
	color: #25426B;
	margin-bottom: 0.5rem;
}

.obszar-header .lead {
	color: #6B7280;
	margin-bottom: 1rem;
	font-size: 1.05rem;
	line-height: 1.5;
}