/* ==========================================================
   Szablon „Pełnoekranowa mapa"
   Kolory i wymiary paska pochodzą z zmiennych --mzfs-* (Personalizacja).
   ========================================================== */

:root { --mzp-fs-top: 92px; } /* wysokość paska – dokładną wartość ustawia assets/js/fullscreen-map.js */

/* ---- 1. Pełny ekran: 100vw x 100vh, bez przewijania ---- */
html.mzp-fs-html,
body.mzp-fs-body {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	height: 100%;
	overflow: hidden !important;
}

.mzp-fs {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: #1b1726; /* widoczne tylko zanim wczytają się kafelki mapy */
	--mzp-fs-side: min(86vw, 300px); /* szerokość panelu kategorii wtyczki */
}
/* pasek administratora WordPressa (dla zalogowanych) */
.admin-bar .mzp-fs { top: 32px; height: calc(100vh - 32px); height: calc(100dvh - 32px); }
@media (max-width: 782px) {
	.admin-bar .mzp-fs { top: 46px; height: calc(100vh - 46px); height: calc(100dvh - 46px); }
}

/* ---- 2. Mapa na całym ekranie (nadpisuje inline style wtyczki) ---- */
.mzp-fs-map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; }

.mzp-fs-map .mzp-wrap {
	position: absolute !important;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	display: block !important;
	z-index: 0;
}
.mzp-fs-map .mzp-map,
.mzp-fs-map .leaflet-container {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	border-radius: 0 !important;
	flex: none !important;
}
/* gdyby mapa była osadzona jako iframe (np. blok „Własny HTML") */
.mzp-fs-map > iframe,
.mzp-fs-map > p > iframe,
.mzp-fs-map .wp-block-html iframe,
.mzp-fs-map .wp-block-embed iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	border: 0;
}
.mzp-fs-map > p:empty { display: none; }

/* ---- 3. Interfejs wtyczki ułożony pod górnym paskiem ---- */
.mzp-fs .mzp-side {
	position: absolute !important;
	z-index: 1002;
	top: var(--mzp-fs-top);
	bottom: 14px;
	left: 14px;
	width: var(--mzp-fs-side);
	max-height: none !important;
	flex: none !important;
	overflow-y: auto;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--mzfs-radius, 16px);
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
	transition: transform .25s ease, visibility 0s;
}
.mzp-fs .mzp-wrap--collapsed .mzp-side {
	flex-basis: auto !important;
	border-width: 1px;
	overflow-y: auto;
	transform: translateX(calc(-100% - 20px));
	visibility: hidden;
	box-shadow: none;
	transition: transform .25s ease, visibility 0s .25s;
}
.mzp-fs .mzp-tab {
	top: calc(var(--mzp-fs-top) + 12px);
	left: calc(14px + var(--mzp-fs-side));
}
.mzp-fs .mzp-wrap--collapsed .mzp-tab { left: 0; }

.mzp-fs .mzp-search { top: var(--mzp-fs-top); right: 14px; }

.mzp-fs .leaflet-top { top: var(--mzp-fs-top); }
.mzp-fs .leaflet-top.leaflet-left {
	left: auto;
	right: 14px;
	top: calc(var(--mzp-fs-top) + 58px);
}
.mzp-fs .leaflet-top.leaflet-left .leaflet-control { margin: 0 0 8px; }

/* ---- 4. Górny pasek (overlay) z pływającymi modułami ---- */
.mzp-fs-bar {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 1200;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	pointer-events: none; /* między kafelkami mapa nadal reaguje na przeciąganie */
}
.mzp-fs-right { display: flex; align-items: flex-start; gap: 8px; margin-left: auto; }

.mzp-fs-card {
	pointer-events: auto;
	color: var(--mzfs-text, #1d2327);
	background: rgba(var(--mzfs-bar-rgb, 255, 255, 255), var(--mzfs-bar-opacity, .78));
	-webkit-backdrop-filter: blur(var(--mzfs-blur, 10px)) saturate(1.4);
	backdrop-filter: blur(var(--mzfs-blur, 10px)) saturate(1.4);
	border: 1px solid rgba(128, 128, 128, .22);
	border-radius: var(--mzfs-radius, 16px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mzp-fs-card { background: rgba(var(--mzfs-bar-rgb, 255, 255, 255), .95); }
}

/* lewa strona: logo / tekst */
.mzp-fs-brand { padding: 10px 18px; max-width: 60vw; }
.mzp-fs-brand a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--mzfs-text, #1d2327);
	text-decoration: none;
	font-weight: 700;
	font-size: clamp(16px, 2.4vw, 22px);
	line-height: 1.25;
	overflow-wrap: anywhere;
}
.mzp-fs-brand__img { display: block; max-height: 40px; width: auto; }

/* prawa strona: menu */
.mzp-fs-nav { padding: 6px; max-width: 70vw; }
.mzp-fs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.mzp-fs-nav li { margin: 0; padding: 0; }
.mzp-fs-nav a {
	display: block;
	padding: 8px 14px;
	border-radius: calc(var(--mzfs-radius, 16px) * .65);
	color: var(--mzfs-text, #1d2327);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.mzp-fs-nav a:hover,
.mzp-fs-nav a:focus-visible,
.mzp-fs-nav .current-menu-item > a {
	background: rgba(var(--mzfs-accent-rgb, 34, 113, 177), .14);
	color: var(--mzfs-accent, #2271b1);
}
.mzp-fs-nav--hint { padding: 8px 14px; font-size: 13px; }
.mzp-fs-nav--hint a { display: inline; padding: 0; text-decoration: underline; white-space: normal; }

/* przycisk (np. „Dodaj zjawisko") */
.mzp-fs-card.mzp-fs-cta {
	display: inline-flex;
	align-items: center;
	padding: 11px 18px;
	background: var(--mzfs-accent, #2271b1);
	color: var(--mzfs-accent-contrast, #ffffff);
	border-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .25), 0 0 18px rgba(var(--mzfs-accent-rgb, 139, 92, 246), .45);
}
.mzp-fs-card.mzp-fs-cta:hover,
.mzp-fs-card.mzp-fs-cta:focus-visible { filter: brightness(1.1); color: var(--mzfs-accent-contrast, #ffffff); }

/* przycisk ☰ (widoczny tylko na telefonie, gdy menu jest zwijane) */
.mzp-fs-burger {
	display: none;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	border: 0;
	border-radius: calc(var(--mzfs-radius, 16px) * .65);
	background: transparent;
	color: var(--mzfs-text, #1d2327);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

/* podpowiedzi dla administratora (brak wtyczki / brak shortcode) */
.mzp-fs-notice {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	width: min(92vw, 520px);
	padding: 20px 24px;
	background: #fff;
	color: #1d2327;
	border-left: 5px solid #dba617;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
	line-height: 1.55;
}
.mzp-fs-notice code { background: #f0f0f1; padding: 1px 6px; border-radius: 4px; }

/* ---- 5. Telefon: elementy paska układają się pionowo ---- */
@media (max-width: 700px) {
	.mzp-fs-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
	.mzp-fs-right { flex-direction: column; align-items: stretch; margin-left: 0; gap: 8px; }
	.mzp-fs-brand, .mzp-fs-nav { max-width: none; }
	.mzp-fs-nav { max-height: 44vh; overflow-y: auto; }
	.mzp-fs-nav a { padding: 7px 12px; }
	.mzp-fs-card.mzp-fs-cta { justify-content: center; }

	.mzp-fs-nav--collapsible .mzp-fs-burger { display: flex; }
	.mzp-fs-nav--collapsible .mzp-fs-menu { display: none; margin-top: 4px; }
	.mzp-fs-nav--collapsible.is-open .mzp-fs-menu { display: flex; flex-direction: column; }

	.mzp-fs .mzp-search { left: 14px; right: 14px; width: auto; max-width: none; }
	.mzp-fs .leaflet-top.leaflet-left { top: calc(var(--mzp-fs-top) + 58px); }
	.mzp-fs .mzp-tab { top: calc(var(--mzp-fs-top) + 60px); }
	.mzp-fs .mzp-side { top: calc(var(--mzp-fs-top) + 56px); }
}