/*
 * Mapa uzdrowisk – wygląd „rysunek architektoniczny”:
 * jasny podkład w barwach marki, białe bryły budynków, ośrodki w zieleni marki,
 * opisy ośrodków z cienką linią prowadzącą do dachu, panel planera unoszący się nad mapą.
 * Kolory z motywu (zmienne CSS) z wartościami zapasowymi dla innych motywów.
 */
.up-map {
	--um-navy: var(--navy, #11284b);
	--um-ink-2: #3d4f6b;
	--um-ink-3: #4f5d74;
	--um-turq: var(--turq, #2ebece);
	--um-turq-dark: var(--turq-dark, #006e7a);
	--um-turq-light: var(--turq-light, #d5f2f5);
	--um-green: var(--green, #3ea063);
	--um-green-dark: var(--green-dark, #2b7a48);
	--um-paper: #f3f4f1;
	--um-line: rgba(17, 40, 75, .14);
	--um-glass: rgba(255, 255, 255, .9);
	--um-lift: 0 1px 0 rgba(17, 40, 75, .05), 0 18px 40px -22px rgba(17, 40, 75, .55);
	--um-h: clamp(540px, 74vh, 740px);
	--um-panel: 344px;
	--um-display: var(--font-display, "Wix Madefor Display", system-ui, sans-serif);
	--um-text: var(--font-text, "Wix Madefor Text", system-ui, sans-serif);
	color: var(--um-navy);
	font-family: var(--um-text);
	margin-block: 2rem;
	container-type: inline-size;
}
.up-map *, .up-map *::before, .up-map *::after { box-sizing: border-box; }

/* Szeroka mapa w wąskiej kolumnie treści (motyw: 760 px, wyrównana do lewej) – do szerokości kontenera strony. */
.entry-content > .up-map.alignwide,
.entry-content > .up-map.alignfull {
	width: min(var(--container, 1180px), calc(100vw - 2 * var(--gutter, 1rem)));
	max-width: none;
}

/* ---------- Układ ---------- */
.up-map__layout { position: relative; }
.up-map__viewport {
	position: relative;
	height: var(--um-h);
	border-radius: 22px;
	overflow: hidden;
	background: var(--um-paper);
	isolation: isolate;
}
.up-map__canvas { position: absolute; inset: 0; }
.up-map__canvas:focus-within { outline: 3px solid var(--um-turq-dark); outline-offset: -3px; }

/* ---------- Pasek uzdrowisk (dok na dole mapy) ---------- */
.up-map__dock {
	position: absolute;
	z-index: 2;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	max-width: calc(100% - 32px);
	display: flex;
	gap: 2px;
	padding: 5px;
	overflow-x: auto;
	scrollbar-width: none;
	background: var(--um-glass);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	border-radius: 999px;
	box-shadow: var(--um-lift);
}
.up-map__dock::-webkit-scrollbar { display: none; }
.up-map__btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 15px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--um-navy);
	font: 600 14px/1 var(--um-text);
	white-space: nowrap;
	cursor: pointer;
}
.up-map__btn[data-country]::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--um-navy);
}
.up-map__btn[data-country="lt"]::before { background: var(--um-green-dark); }
.up-map__btn:hover { background: rgba(17, 40, 75, .07); }
.up-map__btn[aria-pressed="true"] { background: var(--um-navy); color: #fff; }
.up-map__btn[aria-pressed="true"]::before { box-shadow: 0 0 0 2px #fff; }
.up-map__btn--all { color: var(--um-ink-2); font-weight: 500; }
.up-map__btn--all::after { content: ""; width: 1px; height: 18px; margin-left: 12px; background: var(--um-line); }
.up-map__btn:focus-visible { outline: 3px solid var(--um-turq-dark); outline-offset: 1px; }

/* ---------- Kontrolki mapy (2D/3D, przybliżenie, kompas) ---------- */
.up-map .maplibregl-ctrl-top-right { top: 6px; right: 6px; }
.up-map .maplibregl-ctrl-group,
.up-map .up-map__view {
	border-radius: 12px;
	background: var(--um-glass);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: var(--um-lift);
	overflow: hidden;
}
.up-map .maplibregl-ctrl-group:not(:empty) { box-shadow: var(--um-lift); }
.up-map .maplibregl-ctrl-group button { width: 38px; height: 38px; }
.up-map .maplibregl-ctrl-group button + button { border-top: 1px solid var(--um-line); }
.up-map__view { display: flex; flex-direction: column; }
.up-map__view button {
	width: 38px;
	height: 34px;
	border: 0;
	background: transparent;
	color: var(--um-navy);
	font: 700 12px/1 var(--um-text);
	letter-spacing: .02em;
	cursor: pointer;
}
.up-map__view button + button { border-top: 1px solid var(--um-line); }
.up-map__view button[aria-pressed="true"] { background: var(--um-navy); color: #fff; }
.up-map__view button:focus-visible { outline: 3px solid var(--um-turq-dark); outline-offset: -3px; }
/* Źródła mapy (© OpenStreetMap, OpenFreeMap) – zawsze widoczne, nad dokiem uzdrowisk (wymóg licencji ODbL). */
.up-map .maplibregl-ctrl-bottom-right { bottom: 74px; right: 6px; }
.up-map .maplibregl-ctrl-attrib {
	border-radius: 10px;
	background: var(--um-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 11px;
	color: var(--um-ink-2);
}
.up-map .maplibregl-ctrl-attrib a { color: var(--um-ink-2); }
.up-map .maplibregl-ctrl-attrib.maplibregl-compact { background: var(--um-glass); }

/* ---------- Uzdrowiska na mapie ---------- */
.up-map__pin {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--um-navy);
	font: 700 14px/1.15 var(--um-display);
}
.up-map__pin-label {
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
	text-shadow: 0 0 2px #fff, 0 0 6px #fff, 0 0 10px rgba(255, 255, 255, .9);
	transition: background-color .2s, color .2s;
}
.up-map__pin-dot {
	display: grid;
	place-items: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--um-navy);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px rgba(17, 40, 75, .25), 0 4px 10px rgba(17, 40, 75, .35);
	color: #fff;
	font: 700 11px/1 var(--um-text);
}
.up-map__pin[data-country="lt"] .up-map__pin-dot { background: var(--um-green-dark); }
.up-map__pin:hover .up-map__pin-label,
.up-map__pin.is-active .up-map__pin-label { background: var(--um-navy); color: #fff; text-shadow: none; }
.up-map__pin.is-small .up-map__pin-label { font-size: 12px; }
.up-map__pin.is-stop .up-map__pin-dot { width: 26px; height: 26px; border-width: 3px; background: var(--um-navy); }

/* Punkt startowy trasy (miasto spoza listy uzdrowisk) */
.up-map__start { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; color: var(--um-navy); font: 600 13px/1.15 var(--um-text); }
.up-map__start-label { white-space: nowrap; text-shadow: 0 0 2px #fff, 0 0 6px #fff, 0 0 10px rgba(255, 255, 255, .9); }
.up-map__start-dot { width: 14px; height: 14px; border-radius: 3px; background: #fff; border: 3px solid var(--um-navy); box-shadow: 0 4px 10px rgba(17, 40, 75, .3); }

/* ---------- Ośrodki: opis z linią prowadzącą do dachu ---------- */
.up-map__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
}
.up-map__label-card {
	pointer-events: auto;
	display: block;
	max-width: 220px;
	padding: 7px 11px 8px 12px;
	border-left: 3px solid var(--um-green);
	border-radius: 2px 8px 8px 2px;
	background: #fff;
	color: var(--um-navy);
	text-align: left;
	text-decoration: none;
	box-shadow: 0 0 0 1px rgba(17, 40, 75, .06), 0 10px 24px -12px rgba(17, 40, 75, .55);
}
a.up-map__label-card:hover { border-left-color: var(--um-navy); }
a.up-map__label-card:hover .up-map__label-name { text-decoration: underline; text-underline-offset: 2px; }
.up-map__label-name { display: block; font: 700 13px/1.25 var(--um-display); }
.up-map__label-desc { display: block; margin-top: 2px; font: 400 12px/1.3 var(--um-text); color: var(--um-ink-3); }
.up-map__label-leader { width: 1px; height: 28px; background: var(--um-navy); opacity: .75; }
.up-map__label-tip {
	width: 9px;
	height: 9px;
	margin-bottom: -4px;
	border-radius: 50%;
	background: var(--um-navy);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(17, 40, 75, .5);
}
.up-map__label.is-hidden, .up-map__dist.is-hidden { visibility: hidden; }

/* ---------- Odległości na trasach ---------- */
.up-map__dist {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #fff;
	color: var(--um-navy);
	font: 600 12px/1.2 var(--um-text);
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 0 0 1px rgba(17, 40, 75, .08), 0 6px 14px -6px rgba(17, 40, 75, .45);
}
.up-map__dist--route { background: var(--um-navy); color: #fff; padding-left: 4px; }
.up-map__dist-num {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--um-turq);
	color: var(--um-navy);
	font-weight: 700;
	font-size: 11px;
}

/* ---------- Pod mapą: legenda i podpowiedź ---------- */
.up-map__help {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
	margin: .75rem 0 0;
	font-size: .875rem;
	color: var(--um-ink-3);
}
.up-map__legend { display: inline-flex; flex-wrap: wrap; gap: .35rem 1rem; }
.up-map__legend-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--um-ink-2); }
.up-map__legend-item::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--um-navy); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(17, 40, 75, .3); }
.up-map__legend-item[data-country="lt"]::before { background: var(--um-green-dark); }
.up-map__legend-item--route::before { width: 22px; height: 4px; border: 0; border-radius: 2px; box-shadow: none; }
.up-map__nowebgl { padding: 1rem 1.25rem; background: var(--um-paper); border-radius: 16px; }

/* ---------- Planer ---------- */
.up-map__planner {
	margin-top: 1rem;
	padding: 1.25rem 1.25rem 1.1rem;
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--um-line);
}
@container (min-width: 980px) {
	.up-map.has-map .up-map__planner {
		position: absolute;
		z-index: 3;
		top: 16px;
		left: 16px;
		width: var(--um-panel);
		max-height: calc(var(--um-h) - 32px);
		margin: 0;
		overflow: auto;
		overscroll-behavior: contain;
		background: rgba(255, 255, 255, .93);
		-webkit-backdrop-filter: blur(16px) saturate(1.3);
		backdrop-filter: blur(16px) saturate(1.3);
		border-color: rgba(255, 255, 255, .8);
		box-shadow: var(--um-lift);
	}
	.up-map.has-map .up-map__dock {
		left: calc(50% + (var(--um-panel) + 16px) / 2);
		max-width: calc(100% - var(--um-panel) - 48px);
	}
}
.up-map__planner .up-map__h {
	margin: 0 0 1rem;
	font: 700 1.25rem/1.2 var(--um-display);
	color: var(--um-navy);
}
.up-map__planner fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.up-map__planner legend,
.up-map__field label {
	display: block;
	margin-bottom: .5rem;
	padding: 0;
	font: 600 .875rem/1.3 var(--um-text);
	color: var(--um-ink-2);
}
.up-map__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.up-map__chips legend { width: 100%; }
.up-map__chip { position: relative; display: inline-flex; cursor: pointer; }
.up-map__chip input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.up-map__chip span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 13px;
	border: 1.5px solid rgba(17, 40, 75, .22);
	border-radius: 999px;
	font: 600 14px/1 var(--um-text);
	color: var(--um-navy);
	transition: background-color .15s, border-color .15s, color .15s;
}
.up-map__chip span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--um-navy); }
.up-map__chip[data-country="lt"] span::before { background: var(--um-green-dark); }
.up-map__chip input:checked + span { background: var(--um-navy); border-color: var(--um-navy); color: #fff; }
.up-map__chip input:checked + span::before { box-shadow: 0 0 0 2px #fff; }
.up-map__chip:hover input:not(:checked) + span { border-color: var(--um-navy); }
.up-map__chip input:focus-visible + span { outline: 3px solid var(--um-turq-dark); outline-offset: 2px; }

.up-map__planner .up-map__field { margin: 0 0 1rem; }
.up-map__planner select {
	appearance: none;
	width: 100%;
	min-height: 46px;
	padding: 0 2.5rem 0 .9rem;
	border: 1.5px solid rgba(17, 40, 75, .22);
	border-radius: 12px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2311284b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center;
	color: var(--um-navy);
	font: 600 15px/1.2 var(--um-text);
	cursor: pointer;
}
.up-map__planner select:hover { border-color: var(--um-navy); }
.up-map__planner select:focus-visible { outline: 3px solid var(--um-turq-dark); outline-offset: 2px; }

.up-map__switch { position: relative; display: flex; align-items: center; gap: 10px; margin: 0 0 1.1rem; font: 500 14px/1.3 var(--um-text); cursor: pointer; }
.up-map__switch input { position: absolute; z-index: 1; width: 42px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.up-map__switch-track {
	position: relative;
	flex: none;
	width: 42px;
	height: 24px;
	border-radius: 999px;
	background: rgba(17, 40, 75, .22);
	transition: background-color .2s;
}
.up-map__switch-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(17, 40, 75, .35);
	transition: transform .2s;
}
.up-map__switch input:checked + .up-map__switch-track { background: var(--um-navy); }
.up-map__switch input:checked + .up-map__switch-track::after { transform: translateX(18px); }
.up-map__switch input:focus-visible + .up-map__switch-track { outline: 3px solid var(--um-turq-dark); outline-offset: 2px; }

.up-map__planner p { margin: 0; }
.up-map__go {
	width: 100%;
	min-height: 50px;
	border: 0;
	border-radius: 14px;
	background: var(--um-navy);
	color: #fff;
	font: 700 15px/1 var(--um-text);
	cursor: pointer;
	transition: background-color .15s;
}
.up-map__go:hover { background: var(--um-turq-dark); }
.up-map__go:focus-visible { outline: 3px solid var(--um-turq-dark); outline-offset: 3px; }

/* Wynik: przystanki na osi */
.up-map__result:empty { display: none; }
.up-map__result { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--um-line); }
.up-map__result .up-map__h { margin-bottom: .25rem; font-size: 1rem; }
.up-map__total { margin: 0 0 1rem !important; font: 700 1.0625rem/1.35 var(--um-display); color: var(--um-navy); }
.up-map__stops { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: stop; }
.up-map__stop { position: relative; padding: 0 0 1rem 38px; margin: 0; counter-increment: stop; }
.up-map__stop::before {
	content: counter(stop);
	position: absolute;
	left: 0;
	top: -2px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--um-navy);
	color: #fff;
	font: 700 12px/1 var(--um-text);
}
.up-map__stop:not(.up-map__stop--end)::after {
	content: "";
	position: absolute;
	left: 12px;
	top: 26px;
	bottom: 0;
	width: 2px;
	background: repeating-linear-gradient(to bottom, var(--um-navy) 0 4px, transparent 4px 7px);
	opacity: .5;
}
.up-map__stop--end { padding-bottom: 0; }
.up-map__stop-name { display: block; font: 700 15px/1.3 var(--um-display); }
.up-map__leg { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--um-ink-3); }
.up-map__leg a { color: var(--um-turq-dark); white-space: nowrap; }
.up-map__border {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--um-turq-light);
	color: var(--um-navy);
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}
.up-map__ext {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 1.5px solid var(--um-navy);
	border-radius: 14px;
	color: var(--um-navy);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}
.up-map__ext:hover { background: var(--um-navy); color: #fff; }
.up-map__ext:focus-visible { outline: 3px solid var(--um-turq-dark); outline-offset: 3px; }
.up-map__warn { font-weight: 600; }

/* ---------- Wersja tekstowa ---------- */
.up-map__text { margin-top: 2.5rem; }
.up-map__h { font: 700 1.375rem/1.25 var(--um-display); margin: 2rem 0 .75rem; }
.up-map__table-wrap { overflow-x: auto; }
.up-map__table-wrap:focus-visible { outline: 3px solid var(--um-turq-dark); outline-offset: 3px; }
.up-map__table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.up-map__table caption { text-align: left; color: var(--um-ink-3); font-size: .875rem; padding-bottom: .5rem; }
.up-map__table th, .up-map__table td { border-bottom: 1px solid var(--um-line); padding: .6rem .7rem; text-align: left; vertical-align: top; }
.up-map__table thead th { border-bottom: 2px solid var(--um-navy); font-family: var(--um-display); }
.up-map__table tbody th { white-space: nowrap; font-family: var(--um-display); }
.up-map__table-sep th { padding-top: 1.25rem; color: var(--um-ink-2); font-size: .875rem; border-bottom-color: var(--um-navy); }
.up-map__km { display: block; font-weight: 700; }
.up-map__min { display: block; color: var(--um-ink-3); font-size: .875rem; }
.up-map__approx { font-size: .75rem; }
.up-map__self { color: var(--um-ink-3); }
.up-map__note, .up-map__attrib { font-size: .8125rem; color: var(--um-ink-3); }
.up-map ul.up-map__spas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem 2rem; }
.up-map ul.up-map__spas > li { margin: 0; padding-top: .75rem; border-top: 2px solid var(--um-navy); }
.up-map ul.up-map__spas > li::marker { content: none; }
.up-map__spa-name { margin: 0 0 .5rem; font: 700 1.0625rem/1.3 var(--um-display); }
.up-map__spa-name a { color: inherit; }
.up-map__country { font-weight: 400; color: var(--um-ink-3); font-size: .875rem; }
.up-map .up-map__osrodki { margin: 0; padding-left: 1.1rem; }
.up-map .up-map__osrodki li { margin: 0 0 .4rem; }
.up-map__o-desc { display: block; font-size: .875rem; color: var(--um-ink-3); }
.up-map__o-none { color: var(--um-ink-3); font-size: .9375rem; margin: 0; }

/* ---------- Telefon ---------- */
@container (max-width: 640px) {
	.up-map .maplibregl-ctrl-bottom-right { bottom: 0; right: 0; }
	.up-map { --um-h: 68vh; }
	.up-map__viewport { border-radius: 16px; min-height: 420px; }
	.up-map__dock { top: 10px; bottom: auto; left: 10px; right: 56px; max-width: none; transform: none; }
	.up-map .maplibregl-ctrl-top-right { top: 0; right: 0; }
	.up-map__label-card { max-width: 170px; }
	.up-map__label-desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.up-map * { transition: none !important; }
}

/* ---------- Ciemny motyw strony (data-theme="dark" w motywie Uzdrowiska Pogranicza) ----------
 * Mapa, planer i pasek uzdrowisk zostają jasne (jasny podkład mapy), tekst pod mapą – w kolorach ciemnego motywu. */
html[data-theme="dark"] .up-map {
	--um-ink-2: #c9d2df;
	--um-ink-3: #b3bdcc;
	--um-line: rgba(230, 237, 247, .16);
	--um-turq-dark: #57cfdc;
	--um-turq-light: #12404a;
	--um-green-dark: #6fcf8f;
}
html[data-theme="dark"] .up-map__viewport,
html[data-theme="dark"] .up-map__planner,
html[data-theme="dark"] .up-map__nowebgl {
	--um-navy: #11284b;
	--um-ink-2: #3d4f6b;
	--um-ink-3: #4f5d74;
	--um-line: rgba(17, 40, 75, .14);
	--um-turq-dark: #006e7a;
	--um-turq-light: #d5f2f5;
	--um-green-dark: #2b7a48;
	--um-paper: #f3f4f1;
	color: #11284b;
	color-scheme: light;
}
html[data-theme="dark"] .up-map__legend-item[data-country="lt"]::before { background: #6fcf8f; }
html[data-theme="dark"] .up-map__legend-item::before { border-color: #0f1a2c; }