/* Silnik makiety 360° — powłoka aplikacji + viewer (Kasprowicza) + karta lokalu (Zielona Village).
   Tokeny zgodne z Lightvision Configuratorem: paleta achromatyczna, kolor wyłącznie tam,
   gdzie coś znaczy (statusy lokali). Zielony #8CC63F zarezerwowany dla logo. */

.lv-makieta-root,
.lv-makieta-root * {
	box-sizing: border-box;
}

/* ─── Odporność na motyw klienta ──────────────────────────────────────────────
   Widget żyje w cudzej stronie i dziedziczy jej style. Motywy WordPressa ubierają
   każdy `button` w ramkę, zaokrąglenie, cień i wielkie litery — nasze zakładki
   zamieniały się przez to w rząd przycisków CTA, a pigułki filtrów puchły do rozmiaru
   przycisków „Kup teraz”.

   Neutralizujemy więc wszystko, czego sami nie ustawiamy. Reguły mają jedną klasę
   i jeden typ (0,1,1), a wszystkie nasze reguły są zakotwiczone w roocie (0,2,0),
   więc ten reset ich nie przykryje — działa tylko tam, gdzie nic nie deklarujemy.

   Font zostaje dziedziczony: krój ma pochodzić z motywu, żeby widget wyglądał jak
   część strony, a nie jak wklejka. Neutralizujemy tylko jego zniekształcenia
   (wersaliki, rozstrzelenie, waga). */
.lv-makieta-root button,
.lv-makieta-root input,
.lv-makieta-root select,
.lv-makieta-root textarea {
	margin: 0;
	font: inherit;
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	text-decoration: none;
	min-width: 0;
	min-height: 0;
	max-width: none;
	width: auto;
	height: auto;
	line-height: normal;
	vertical-align: baseline;
	transform: none;
	float: none;
	outline-offset: 0;
}

.lv-makieta-root button {
	padding: 0;
	background: none;
	color: inherit;
	font-weight: inherit;
	-webkit-appearance: none;
	appearance: none;
}

/* Ramka i zaokrąglenie z `!important` — to jedyne dwie właściwości, które motywy
   wymuszają na tyle często i na tyle agresywnie, że zwykła specyficzność nie wystarcza.
   Nasze własne obramowania przycisków (pigułki filtrów, wiersze listy, separatory
   zakładek) też są oznaczone `!important`, żeby ten reset ich nie przykrył. */
.lv-makieta-root button,
.lv-makieta-root input,
.lv-makieta-root select {
	border: 0 !important;
	border-radius: 0 !important;
}

/* Motywy potrafią dodawać ikonki i podkreślenia przez pseudoelementy — u nas nie ma
   ich w projekcie, a potrafią rozsadzić układ belki albo listy. */
.lv-makieta-root button::before,
.lv-makieta-root button::after,
.lv-makieta-root .lv-makieta__tab::before,
.lv-makieta-root .lv-makieta__tab::after {
	content: none;
}

/* Obrazy w widgecie mają swoje wymiary z układu — motywowe `max-width`/`height: auto`
   psuły warstwę hotspotów, bo ta jest pozycjonowana pod rozmiar obrazu. */
.lv-makieta-root img {
	max-width: none;
	border-radius: 0;
	box-shadow: none;
}

/* Atrybut `hidden` chowa element przez `display: none` z arkusza przeglądarki, więc
   każda nasza reguła `display: block/flex` go pokonuje — bez tego ukryty rzut
   kondygnacji wystawał jako pasek z tekstem alternatywnym pod belką. */
.lv-makieta-root [ hidden ] {
	display: none !important;
}

.lv-makieta-root {
	--lv-makieta-text: #1a1a1a;
	--lv-makieta-muted: #888888;
	--lv-makieta-border: #e4e4e2;
	--lv-makieta-surface: #ffffff;
	--lv-makieta-stage-bg: #f0f0ee;
	/* Zieleń marki do wyróżnień w interfejsie. Ciemniejsza od logo (#8CC63F),
	   bo tamta na białym tle jest za jasna na tekst. */
	--lv-makieta-accent: #55a630;
	--lv-makieta-radius: 12px;
	--lv-makieta-height: min( 88vh, 760px );

	/* Przycisk główny („Zobacz pełną ofertę”) i font. Osobne od akcentu, bo klient
	   często chce ciemny przycisk w kolorze swojej belki, a akcent jaśniejszy.
	   Wszystkie zmienne z tego bloku można nadpisać per projekt w ustawieniach
	   „Wygląd” — loader dokłada wtedy własny <style> po tym arkuszu. */
	--lv-makieta-btn-bg: #2d3748;
	--lv-makieta-btn-text: #ffffff;
	/* Cena i przycisk po najechaniu domyślnie idą za akcentem — tak było, zanim
	   dostały osobne pola. Klient dopasowujący kartę do swojej strony zwykle chce
	   cenę w innym kolorze niż podświetlenia hotspotów. */
	--lv-makieta-price: var( --lv-makieta-accent );
	--lv-makieta-btn-hover-bg: var( --lv-makieta-accent );
	--lv-makieta-btn-hover-text: var( --lv-makieta-btn-text );

	/* Kolumna karty lokalu na szerokiej powłoce: udział w szerokości i granice w px.
	   Liczby bez jednostek, bo czyta je też JS — przelicza z nich wysokość sceny.
	   ~30% odpowiada układowi 70/30 ze starej makiety Zielonej Village. */
	--lv-card-share: 0.3;
	--lv-card-min: 320;
	--lv-card-max: 520;

	/* Proporcje sceny w trybie proporcjonalnym. 16/9 to typowe proporcje renderu, więc
	   przed domierzeniem pierwszej klatki układ jest już prawie na miejscu. */
	--lv-makieta-ratio: 16 / 9;
	/* Podłoga przy bardzo wąskich kontenerach — bez niej 16:9 na telefonie w pionie
	   daje scenę wysoką na dwa centymetry. */
	--lv-makieta-min-height: 300px;

	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: var( --lv-makieta-height );
	/* Domyślnie font dziedziczony z motywu klienta — tak samo jak w konfiguratorze.
	   Nadpisanie przez zmienną pozwala projektowi wymusić własny krój. */
	/* Bez domyślnej wartości zmiennej: `--lv-makieta-font: inherit` znaczyłoby
	   „odziedzicz zmienną”, nie „odziedzicz font”, i kończyło się pustą wartością. */
	font-family: var( --lv-makieta-font, inherit );
	color: var( --lv-makieta-text );
	background: var( --lv-makieta-surface );
	border: 0.5px solid var( --lv-makieta-border );
	border-radius: var( --lv-makieta-radius );
	overflow: hidden;
}

/* Wysokość proporcjonalna do szerokości — dla makiety wstawianej na pełną szerokość
   strony. Wysokość bierze scena (przez `aspect-ratio`), a nie root: belka i legenda mają
   własną, tekstową wysokość i nie wolno im zjadać obrazu, bo przy szerokim kontenerze
   render zaczyna się kurczyć w środku sceny zamiast ją wypełniać.

   Tylko od 641 px w górę. Na telefonie proporcje robią z makiety pasek wysoki na dwa
   centymetry, a karta lokalu — która pod 641 px wchodzi pod makietę jako część układu,
   nie jako nakładka — dostaje wtedy ~170 px na ~470 px treści i przycisk oferty wypada
   poza widok. Na tej szerokości „pełna szerokość” jest zresztą domyślna, więc tryb
   proporcjonalny nie ma nic do załatwienia. */
@media ( min-width: 641px ) {
	.lv-makieta-root[ data-size="ratio" ] {
		height: auto;
	}

	.lv-makieta-root[ data-size="ratio" ] .lv-makieta__stage {
		aspect-ratio: var( --lv-makieta-ratio );
		min-height: var( --lv-makieta-min-height );
	}

	/* Gdy podłoga podniesie scenę wyżej niż proporcje obrazu, render ma zostać na środku,
	   a nie przykleić się do góry z pustym pasem pod spodem. Celowo tylko viewer — lista
	   lokali obok musi nadal wypełniać scenę na całą wysokość. */
	.lv-makieta-root[ data-size="ratio" ] .lv-makieta-viewer {
		align-self: center;
	}
}

/* Elewacja — widget ma czytać się jak warstwa uniesiona nad stroną, nie jak wklejony
   prostokąt. Dwie warstwy cienia: kontaktowa (osadza) i rozmyta (unosi). */
.lv-makieta-root[ data-elevation="flat" ] {
	box-shadow: none;
}

.lv-makieta-root[ data-elevation="raised" ] {
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 ), 0 24px 64px rgba( 0, 0, 0, 0.14 );
}

.lv-makieta-root[ data-elevation="strong" ] {
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.10 ), 0 40px 90px rgba( 0, 0, 0, 0.22 );
}

.lv-hidden {
	display: none !important;
}

/* ─── Miejsce rezerwowane przed startem ───────────────────────────────────────
   Makieta rusza dopiero, gdy zbliży się do ekranu — do tego czasu kontener jest pusty.
   Bez zarezerwowanej wysokości treść pod nim podskoczyłaby w chwili startu, co psuje
   odbiór i wskaźnik CLS. Trzymamy więc proporcje z ustawień projektu i delikatny szkic
   sceny, żeby było widać, że coś się tu pojawi. */
.lv-makieta[ data-lv-czeka ] {
	display: block;
	width: 100%;
	aspect-ratio: var( --lv-makieta-ratio, 16 / 9 );
	/* Przy karcie w kolumnie loader podaje wysokość wprost (--lv-czeka-h), bo makieta
	   dostanie tylko część szerokości. Bez wartości `auto` zostawia działanie aspect-ratio. */
	height: var( --lv-czeka-h, auto );
	min-height: 240px;
	background: #f0f0ee;
	border: 0.5px solid #e4e4e2;
	border-radius: 12px;
}

@media ( prefers-reduced-motion: no-preference ) {
	.lv-makieta[ data-lv-czeka ] {
		background: linear-gradient( 100deg, #f0f0ee 30%, #f7f7f5 50%, #f0f0ee 70% );
		background-size: 200% 100%;
		animation: lv-makieta-czeka 1.6s ease-in-out infinite;
	}
}

@keyframes lv-makieta-czeka {
	0%   { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

/* ─── Samodzielny spacer ─────────────────────────────────────────────────────
   Ta sama powłoka co przy makiecie, ale scena jest w całości oddana spacerowi:
   bez winiety i bez tła sceny, bo panorama ma sięgać krawędzi. */
.lv-makieta-root .lv-makieta__tour-solo {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	background: #14140f;
}

.lv-makieta-root .lv-makieta__tour-solo iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.lv-makieta-root--tour .lv-makieta__stage::after {
	display: none;
}

/* Podpis autorski pod widgetem. Celowo poza `.lv-makieta-root` — jest zwykłym HTML-em
   w kodzie embed, więc musi wyglądać znośnie także zanim JavaScript cokolwiek zbuduje. */
.lv-makieta-credit {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #888888;
	text-align: right;
}

.lv-makieta-credit a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba( 136, 136, 136, 0.4 );
}

.lv-makieta-credit a:hover {
	color: #1a1a1a;
}

/* ─── Belka ─────────────────────────────────────────────────────────────────── */

.lv-makieta-root .lv-makieta__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 18px;
	background: var( --lv-makieta-surface );
	border-bottom: 0.5px solid var( --lv-makieta-border );
	flex: 0 0 auto;
}

.lv-makieta-root .lv-makieta__title {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.lv-makieta-root .lv-makieta__title strong {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lv-makieta-root .lv-makieta__title span {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var( --lv-makieta-muted );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lv-makieta-root .lv-makieta__tabs {
	display: flex;
	gap: 0;
	margin-left: auto;
	overflow-x: auto;
	scrollbar-width: none;
}

.lv-makieta-root .lv-makieta__tabs::-webkit-scrollbar { display: none; }

/* Zakładki jako tekst rozdzielony hairline'ami — bez pigułek i wypełnień.
   Wybrana wyróżnia się kolorem marki, nie plamą tła. */
.lv-makieta-root .lv-makieta__tab {
	flex: 0 0 auto;
	padding: 4px 16px;
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	color: var( --lv-makieta-muted );
	background: none;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: color 0.15s;
}

.lv-makieta-root .lv-makieta__tab + .lv-makieta__tab {
	border-left: 0.5px solid var( --lv-makieta-border ) !important;
}

.lv-makieta-root .lv-makieta__tab:hover {
	color: var( --lv-makieta-text );
}

.lv-makieta-root .lv-makieta__tab.is-active {
	color: var( --lv-makieta-accent );
	font-weight: 600;
}

.lv-makieta-root .lv-makieta__brand {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	margin-left: auto;
	padding-left: 16px;
	border-left: 0.5px solid var( --lv-makieta-border );
	opacity: 1;
	transition: opacity 0.2s;
}

/* Gdy są zakładki, one przejmują odpychanie w prawo — logo zostaje tuż za nimi. */
.lv-makieta-root .lv-makieta__tabs ~ .lv-makieta__brand {
	margin-left: 0;
}

.lv-makieta-root .lv-makieta__brand:hover { opacity: 0.65; }

/* ─── Bez belki: logo jako znaczek w rogu makiety ───────────────────────────── */

/* Klient może nie chcieć paska nad makietą (pole „Górna belka”). Znikają tytuł
   i zakładki, a logo przechodzi do lewego dolnego rogu: ikonka z małym podpisem,
   bez tła, jak znak wodny na wideo. Białe elementy z miękkim cieniem czytają się
   i na ciemnym, i na jasnym renderze. */
.lv-makieta-root[ data-bar="off" ] .lv-makieta__bar,
.lv-makieta-root[ data-bar="off" ] .lv-makieta__legend {
	/* Dolny pasek (legenda) znika razem z górnym — klient chce samej makiety.
	   !important, bo legendę pokazuje JS zdjęciem atrybutu hidden. */
	display: none !important;
}

.lv-makieta-root .lv-makieta__badge {
	display: none;
	position: absolute;
	/* Róg renderu, nie okna — offsety liczy resizeHotspotLayer(). Odstęp jak przy
	   przycisku pełnego ekranu (15 px) plus odrobina: znaczek jest mały i przy
	   identycznej liczbie optycznie lepił się do krawędzi bardziej niż przycisk. */
	left: calc( 18px + var( --lv-img-left, 0px ) );
	bottom: calc( 18px + var( --lv-img-bottom, 0px ) );
	z-index: 1000;
	align-items: center;
	gap: 5px;
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none !important;
	/* Dwa cienie: ostry, ciasny daje kontur na jasnym renderze, miękki odcina od tła. */
	text-shadow: 0 0 2px rgba( 0, 0, 0, 0.7 ), 0 1px 4px rgba( 0, 0, 0, 0.45 );
	/* Mocno przygaszony — ma być podpisem, nie elementem interfejsu. */
	opacity: 0.5;
	transition: opacity 0.2s;
}

.lv-makieta-root .lv-makieta__badge svg {
	display: block;
	flex-shrink: 0;
	filter: drop-shadow( 0 0 1.5px rgba( 0, 0, 0, 0.7 ) ) drop-shadow( 0 1px 3px rgba( 0, 0, 0, 0.4 ) );
}

.lv-makieta-root .lv-makieta__badge:hover {
	opacity: 1;
}

.lv-makieta-root[ data-bar="off" ] .lv-makieta__badge {
	display: flex;
}

/* ─── Scena ─────────────────────────────────────────────────────────────────── */

.lv-makieta-root .lv-makieta__stage {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	flex: 1 1 auto;
	min-height: 0;
	background: var( --lv-makieta-stage-bg );
}

/* Lista skaluje się z szerokością — na sztywnych 320 px viewer robił się węższy
   od niej, gdy makieta stała w wąskiej kolumnie strony. */
.lv-makieta-root[ data-view="units" ] .lv-makieta__stage {
	grid-template-columns: minmax( 0, clamp( 220px, 32%, 340px ) ) minmax( 0, 1fr );
}

/* Winieta — krawędzie sceny lekko przygaszone, żeby czytała się jak wnęka
   z głębią, a nie płaska plama. Celowo słaba: mocniejsza zjadałaby hotspoty
   przy brzegach. Przy elewacji „płaskiej” znika razem z resztą efektu. */
.lv-makieta-root .lv-makieta__stage::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	box-shadow: inset 0 0 70px rgba( 0, 0, 0, 0.10 );
}

.lv-makieta-root[ data-elevation="flat" ] .lv-makieta__stage::after {
	display: none;
}

.lv-makieta-root[ data-elevation="strong" ] .lv-makieta__stage::after {
	box-shadow: inset 0 0 90px rgba( 0, 0, 0, 0.16 );
}

/* ─── Punkty spaceru ────────────────────────────────────────────────────────── */

/* Obrys punktu spaceru służy tylko do wyliczenia pozycji pinu — sam pozostaje
   niewidoczny, ale klikalny, żeby trafienie obok pinu też otwierało spacer. */
/* Obrys punktu spaceru służy wyłącznie do wyliczenia pozycji pinu — sam jest niewidoczny
   i NIE łapie kliknięć. Wcześniej łapał, „żeby trafienie obok pinu też otwierało spacer”,
   ale obrys bywa znacznie większy od znacznika i nachodzi na sąsiednie hotspoty: klikając
   parking można było przypadkiem uruchomić spacer. Klikalny jest sam pin. */
.lv-makieta-root .lv-makieta-hotspots polygon.lv-tour-zone {
	fill: transparent;
	stroke: none;
	pointer-events: none;
}

/* Warstwa pinów leży dokładnie na obrazie (wymiary ustawia JS razem z warstwą
   hotspotów), ale jako HTML — w SVG z preserveAspectRatio="none" okrągły znacznik
   zrobiłby się elipsą. */
.lv-makieta-root .lv-makieta__pins {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	pointer-events: none;
	z-index: 12;
}

.lv-makieta-root .lv-makieta__pin {
	position: absolute;
	transform: translate( -50%, -100% );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 0;
	font: inherit;
	background: none;
	border: none;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

.lv-makieta-root .lv-makieta__pin-marker {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
}

/* Pierścień pulsuje pod tarczą, więc ikona zostaje ostra i nieruchoma. */
.lv-makieta-root .lv-makieta__pin-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var( --lv-makieta-accent );
	animation: lv-pin-pulse 2.4s ease-out infinite;
}

.lv-makieta-root .lv-makieta__pin-disc {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: #fff;
	background: var( --lv-makieta-accent );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.4 ), inset 0 0 0 2px rgba( 255, 255, 255, 0.9 );
	transition: transform 0.18s ease;
}

.lv-makieta-root .lv-makieta__pin-disc svg {
	width: 17px;
	height: 17px;
}

.lv-makieta-root .lv-makieta__pin:hover .lv-makieta__pin-disc {
	transform: scale( 1.14 );
}

@keyframes lv-pin-pulse {
	0%   { transform: scale( 0.55 ); opacity: 0.9; }
	70%  { transform: scale( 1.25 ); opacity: 0; }
	100% { transform: scale( 1.25 ); opacity: 0; }
}

/* Bez animacji, gdy użytkownik prosi o ograniczenie ruchu — znacznik nadal widoczny. */
@media ( prefers-reduced-motion: reduce ) {
	.lv-makieta-root .lv-makieta__pin-pulse {
		animation: none;
		opacity: 0.55;
	}
}

/* Etykieta wychodzi poza układ przycisku i nie łapie wskaźnika. Wcześniej była zwykłym
   elementem kolumny: choć niewidoczna (`opacity: 0`), zajmowała miejsce i powiększała
   pole kliknięcia o kilkadziesiąt pikseli nad znacznikiem — stąd spacer uruchamiał się
   przy próbie trafienia w to, co leży wyżej. Teraz klikalny jest wyłącznie znacznik. */
.lv-makieta-root .lv-makieta__pin-label {
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-bottom: 3px;
	padding: 3px 8px;
	font-size: 11px;
	line-height: 1.2;
	color: #fff;
	white-space: nowrap;
	background: rgba( 0, 0, 0, 0.65 );
	border-radius: 5px;
	opacity: 0;
	transform: translate( -50%, -2px );
	transition: opacity 0.15s, transform 0.15s;
	pointer-events: none;
}

.lv-makieta-root .lv-makieta__pin:hover .lv-makieta__pin-label {
	opacity: 1;
	transform: translate( -50%, 0 );
}

/* ─── Nakładka spaceru ──────────────────────────────────────────────────────── */

/* Nakładka nie dotyka krawędzi sceny — dookoła prześwituje przygaszona makieta,
   więc widać, na czym spacer leży. Celowo bez maski wygaszającej rogi (jak przy
   rzutach): panorama jest immersyjna i obcinanie jej brzegów zjadałoby obraz
   dokładnie tam, gdzie użytkownik najczęściej się rozgląda. */
.lv-makieta-root .lv-makieta__tour {
	position: absolute;
	inset: 0;
	z-index: 1500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --lv-makieta-tour-inset, 22px );
	background: rgba( 12, 12, 10, 0.55 );
	backdrop-filter: blur( 3px );
	-webkit-backdrop-filter: blur( 3px );
	animation: lv-tour-in 0.25s ease both;
}

.lv-makieta-root .lv-makieta__tour-panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #14140f;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.3 ), 0 30px 70px rgba( 0, 0, 0, 0.45 );
}

@keyframes lv-tour-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media ( max-width: 640px ) {
	.lv-makieta__tour { --lv-makieta-tour-inset: 10px; }
}

.lv-makieta-root .lv-makieta__tour-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 12px;
	flex: 0 0 auto;
	background: rgba( 0, 0, 0, 0.55 );
}

.lv-makieta-root .lv-makieta__tour-title {
	font-size: 13px;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lv-makieta-root .lv-makieta__tour-close {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	font: inherit;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	background: rgba( 255, 255, 255, 0.12 );
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.15s;
}

.lv-makieta-root .lv-makieta__tour-close:hover {
	background: rgba( 255, 255, 255, 0.25 );
}

.lv-makieta-root .lv-makieta__tour-frame {
	flex: 1 1 auto;
	min-height: 0;
}

.lv-makieta-root .lv-makieta__tour-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ─── Widok „Lokale” ────────────────────────────────────────────────────────── */

.lv-makieta-root .lv-makieta__aside {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background: var( --lv-makieta-surface );
	border-right: 0.5px solid var( --lv-makieta-border );
}

.lv-makieta-root .lv-makieta__filters {
	/* Sztywne co do treści, ale z własnym przewijaniem — wysokość ogranicza dopiero
	   `max-height` na niskich ekranach. Przy pełnym zestawie filtry mają ~360 px, a na
	   leżącym telefonie cała scena ma 307: bez limitu wypychały listę do kilkunastu
	   pikseli, a przy samym `flex-shrink` zgniatały się do jednej linii. */
	flex: 0 0 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 12px 14px 10px;
	border-bottom: 0.5px solid var( --lv-makieta-border );
}

.lv-makieta-root .lv-makieta__filter-row {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 8px;
}

.lv-makieta-root .lv-makieta__filter-row:last-child { margin-bottom: 0; }

.lv-makieta-root .lv-makieta__filter-row label {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var( --lv-makieta-muted );
	white-space: nowrap;
}

.lv-makieta-root .lv-makieta__search,
.lv-makieta-root .lv-makieta__filter-row select {
	font: inherit;
	font-size: 12px;
	padding: 6px 9px;
	color: var( --lv-makieta-text );
	background: #fff;
	border: 0.5px solid var( --lv-makieta-border ) !important;
	border-radius: 6px !important;
}

.lv-makieta-root .lv-makieta__search { width: 100%; }

.lv-makieta-root .lv-makieta__filter-group { margin-bottom: 8px; }

.lv-makieta-root .lv-makieta__filter-label {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --lv-makieta-muted );
}

.lv-makieta-root .lv-makieta__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.lv-makieta-root .lv-makieta__pill {
	font: inherit;
	font-size: 12px;
	line-height: 1;
	padding: 5px 11px;
	color: var( --lv-makieta-muted );
	background: none;
	border: 0.5px solid var( --lv-makieta-border ) !important;
	border-radius: 100px !important;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.lv-makieta-root .lv-makieta__pill:hover {
	color: var( --lv-makieta-text );
	border-color: #cfcfcc;
}

.lv-makieta-root .lv-makieta__pill.is-active {
	color: #fff;
	background: var( --lv-makieta-text );
	border-color: transparent;
}

.lv-makieta-root .lv-makieta__list {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 8px;
}

.lv-makieta-root .lv-makieta__unit {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: 100%;
	padding: 9px 11px;
	margin-bottom: 5px;
	font: inherit;
	text-align: left;
	background: none;
	border: 0.5px solid var( --lv-makieta-border ) !important;
	border-radius: 8px !important;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}

.lv-makieta-root .lv-makieta__unit:hover {
	background: #f7f7f5;
	border-color: #cfcfcc;
}

.lv-makieta-root .lv-makieta__unit-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	color: var( --lv-makieta-text );
}

.lv-makieta-root .lv-makieta__unit-meta {
	font-size: 11px;
	color: var( --lv-makieta-muted );
}

.lv-makieta-root .lv-makieta__unit-price {
	font-size: 13px;
	font-weight: 600;
	color: var( --lv-makieta-text );
}

.lv-makieta-root .lv-makieta__list-empty {
	padding: 20px 14px;
	font-size: 12px;
	color: var( --lv-makieta-muted );
	text-align: center;
}

/* Sprzężenie listy z makietą: wygaszenie po filtrach i podświetlenie po najechaniu. */
.lv-makieta-root .lv-makieta-hotspots polygon.is-dimmed {
	fill-opacity: 0.06;
	stroke-opacity: 0.15;
	pointer-events: none;
}

.lv-makieta-root .lv-makieta-hotspots polygon.is-highlighted {
	fill-opacity: 0.9;
	stroke: #1a1a1a;
	stroke-width: 0.4;
}

/* ─── Legenda ───────────────────────────────────────────────────────────────── */

.lv-makieta-root .lv-makieta__legend {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 9px 18px;
	background: var( --lv-makieta-surface );
	border-top: 0.5px solid var( --lv-makieta-border );
	flex: 0 0 auto;
	flex-wrap: wrap;
}

.lv-makieta-root .lv-makieta__counts {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.lv-makieta-root .lv-makieta__count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: #5b5b5b;
	white-space: nowrap;
}

.lv-makieta-root .lv-makieta__count b {
	font-weight: 600;
	color: var( --lv-makieta-text );
}

.lv-makieta-root .lv-makieta__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.lv-makieta-root .lv-makieta__dot.lv-status-dostepne      { background: #55a630; }
.lv-makieta-root .lv-makieta__dot.lv-status-zarezerwowane { background: #e67e22; }
.lv-makieta-root .lv-makieta__dot.lv-status-niedostepne   { background: #c0392b; }
.lv-makieta-root .lv-makieta__dot.lv-status-wkrotce       { background: #5a7a9e; }

.lv-makieta-root .lv-makieta__tip {
	margin-left: auto;
	font-size: 12px;
	color: var( --lv-makieta-muted );
}

/* ─── Viewer ────────────────────────────────────────────────────────────────── */

.lv-makieta-root .lv-makieta-viewer {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	/* Przezroczysty, żeby przy niepasujących proporcjach obrazu prześwitywało tło
	   sceny zamiast czarnych pasów — makieta ma leżeć na scenie, nie w skrzynce. */
	background: transparent;
	overflow: hidden;
	/* Glob z siatką i strzałkami obrotu — od razu mówi, że widok się obraca w poziomie,
	   czego zwykłe `grab` (dłoń) nie komunikuje. SVG inline, żeby nie dokładać żądania
	   sieciowego.

	   Rysunek jest dwa razy: najpierw grubszą ciemną kreską, potem cieńszą białą na
	   wierzchu. Same białe linie znikają na jasnych fragmentach renderu (dachy, asfalt),
	   a same ciemne gubią się w cieniach — dwie warstwy trzymają czytelność wszędzie.

	   32 px to sufit sensownego rozmiaru: wyżej Windows zaczyna kursory skalować albo
	   ignorować. Strzałki kończą się na 2.4/29.6, a nie przy samej krawędzi, bo obrys
	   o grubości 3.4 wystawałby poza kadr i końcówki byłyby ucięte. */
	cursor: url( 'data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\
<g fill="none" stroke="%231a1a1a" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" opacity=".55">\
<circle cx="16" cy="16" r="7.6"/><ellipse cx="16" cy="16" rx="7.6" ry="2.9"/>\
<ellipse cx="16" cy="16" rx="2.9" ry="7.6"/>\
<path d="M5.2 12.8 L2.4 16 L5.2 19.2"/><path d="M26.8 12.8 L29.6 16 L26.8 19.2"/></g>\
<g fill="none" stroke="%23ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">\
<circle cx="16" cy="16" r="7.6"/><ellipse cx="16" cy="16" rx="7.6" ry="2.9"/>\
<ellipse cx="16" cy="16" rx="2.9" ry="7.6"/>\
<path d="M5.2 12.8 L2.4 16 L5.2 19.2"/><path d="M26.8 12.8 L29.6 16 L26.8 19.2"/></g></svg>' ) 16 16, grab;
	/* Obracanie makiety to przeciąganie myszą — bez tego przeglądarka traktuje je
	   jak zaznaczanie i podświetla pół widoku na niebiesko. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

/* Obrazy same z siebie są przeciągalne (drag & drop) — to też przerywa obrót. */
.lv-makieta-root .lv-makieta-frame,
.lv-makieta-root .lv-makieta-floorplan {
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}

/* Pełny ekran obejmuje całą powłokę, więc scena musi oddać wysokość ekranowi:
   proporcje i zaokrąglenia mają wtedy zniknąć, inaczej makieta siedziałaby w ramce
   pośrodku czarnego ekranu zamiast go wypełnić. */
.lv-makieta-root:fullscreen,
.lv-makieta-root:-webkit-full-screen {
	height: 100%;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.lv-makieta-root:fullscreen .lv-makieta__stage,
.lv-makieta-root:-webkit-full-screen .lv-makieta__stage {
	aspect-ratio: auto;
	min-height: 0;
	background: #14140f;
}

/* Wyjście z pełnego ekranu ma być widoczne od razu, bez szukania. Czerwień odróżnia je
   od reszty przycisków na scenie — to jedyna akcja, która zamyka cały tryb. */
.lv-makieta-root .lv-makieta-fullscreen.is-exit {
	background: rgba( 192, 57, 43, 0.85 );
	border-color: rgba( 255, 255, 255, 0.35 );
	font-size: 20px;
}

.lv-makieta-root .lv-makieta-fullscreen.is-exit:hover {
	background: rgba( 192, 57, 43, 1 );
}

/* Wymiary viewera na pełnym ekranie ustawia reguła przy sekcji fullscreenu niżej —
   tutaj tylko zdejmujemy wyśrodkowanie z trybu proporcjonalnego. */
.lv-makieta-root:fullscreen .lv-makieta-viewer,
.lv-makieta-root:-webkit-full-screen .lv-makieta-viewer {
	align-self: stretch;
}

/* ─── Karta lokalu jako kolumna ──────────────────────────────────────────────
   Na szerokiej powłoce karta stoi obok makiety, zamiast ją przesłaniać — makieta
   i rzut piętra zostają w całości widoczne, a w widoku Lokale układ robi się
   trzypanelowy: lista | makieta | karta. O tym, kiedy tak się dzieje, decyduje
   JS (updateLayout w makieta.js) i zapisuje wynik w `data-card`: CSS nie zna ani
   proporcji renderu, ani tego, czy obok makiety na pełnym ekranie zostaje miejsce.

   Kolumna jest stała — widoczna także przed pierwszym wyborem, z podsumowaniem
   inwestycji. Wysuwana na klik zwężałaby makietę w chwili kliknięcia i hotspot
   uciekałby spod kursora. */

.lv-makieta-root[ data-card="column" ] .lv-makieta__stage {
	grid-template-columns: minmax( 0, 1fr ) var( --lv-card-w );
	grid-template-areas: "viewer card";
}

.lv-makieta-root[ data-card="column" ][ data-view="units" ] .lv-makieta__stage {
	grid-template-columns: minmax( 0, clamp( 220px, 26%, 340px ) ) minmax( 0, 1fr ) var( --lv-card-w );
	grid-template-areas: "aside viewer card";
}

/* Obszary nazwane, bo kolejność w DOM bywa różna — karta dostawiona na żywo przez
   syncMode ląduje na końcu sceny, za nakładką spaceru. */
.lv-makieta-root[ data-card="column" ] .lv-makieta__aside   { grid-area: aside; }
.lv-makieta-root[ data-card="column" ] .lv-makieta-viewer   { grid-area: viewer; }
.lv-makieta-root[ data-card="column" ] .lv-makieta-sidebar  { grid-area: card; }

.lv-makieta-root[ data-card="column" ] .lv-makieta-sidebar {
	position: relative;
	width: auto;
	min-width: 0;
	/* Wysokość wyznacza scena, nie treść karty — długa historia cen ma się przewijać
	   w kolumnie, a nie wypychać wiersza gridu i rozciągać całego widgetu. */
	min-height: 0;
	contain: size;
	transform: none;
	visibility: visible;
	box-shadow: none;
	border-left: 1px solid var( --lv-makieta-border );
	transition: none;
}

/* Karta jest tu stałą kolumną, nie panelem do zamykania — krzyżyk nie ma czego
   schować i tylko sugerowałby, że da się ją odkleić. Esc nadal wraca do podsumowania. */
.lv-makieta-root[ data-card="column" ] .lv-makieta-sidebar-close {
	display: none;
}

.lv-makieta-root[ data-card="column" ] .lv-makieta-sidebar:not( .lv-makieta-sidebar--open ) .lv-makieta-sidebar-idle {
	display: flex;
}

/* Zamknięcie karty (Esc, powrót z rzutu) zdejmuje tylko `--open`, a treść ostatniego
   lokalu zostaje w DOM. Przy nakładce to bez znaczenia — panel wyjeżdża poza ekran
   razem z nią. W kolumnie panel stoi na miejscu, więc bez tej reguły widać było
   naraz kartę poprzedniego lokalu i podsumowanie pod nią. */
.lv-makieta-root[ data-card="column" ] .lv-makieta-sidebar:not( .lv-makieta-sidebar--open ) > :not( .lv-makieta-sidebar-idle ) {
	display: none;
}

/* Wysokość sceny na szerokiej powłoce. Liczona z szerokości, która zostaje makiecie po
   odjęciu kolumny karty, i z proporcji prawdziwej klatki — render wypełnia swoją komórkę
   bez pasów po bokach. Obowiązuje w obu trybach wysokości: „stała” chroni przed
   rozpychaniem strony w wąskiej kolumnie treści, ale obok kolumny karty tylko przycinała
   scenę. Ta sama wartość obowiązuje w obu zakładkach (`data-layout` nie zależy od widoku),
   więc przełączenie na Lokale nie zmienia wysokości widgetu. */
@media ( min-width: 641px ) {
	.lv-makieta-root[ data-layout="wide" ] {
		height: auto;
	}

	.lv-makieta-root[ data-layout="wide" ] .lv-makieta__stage {
		aspect-ratio: auto;
		height: var( --lv-stage-h, auto );
	}
}

/* ─── Kolumna na pełnym ekranie ───────────────────────────────────────────────
   Na pełnym ekranie makieta trzyma pełną wysokość ekranu i swoje proporcje, a karta
   bierze to, co zostaje obok. JS włącza kolumnę dopiero, gdy ta reszta mieści kartę —
   na 16:9 z renderem 16:9 nie zostaje nic i karta pozostaje nakładką. Leżący telefon
   (812×375) odpada tym samym rachunkiem: obok makiety zostaje 145 px. */
.lv-makieta-root:fullscreen[ data-card="column" ] .lv-makieta__stage,
.lv-makieta-root:-webkit-full-screen[ data-card="column" ] .lv-makieta__stage {
	display: flex;
	align-items: stretch;
	/* Przy bardzo szerokich ekranach (32:9) karta nie ma rosnąć w nieskończoność —
	   po osiągnięciu maksimum resztę oddajemy na symetryczne marginesy, co czyta się
	   lepiej niż kolumna tekstu szersza od samej makiety. */
	justify-content: center;
	height: auto;
}

.lv-makieta-root:fullscreen[ data-card="column" ] .lv-makieta-viewer,
.lv-makieta-root:-webkit-full-screen[ data-card="column" ] .lv-makieta-viewer {
	flex: 0 0 auto;
	width: auto !important;
	height: 100% !important;
	aspect-ratio: var( --lv-makieta-ratio ) !important;
}

.lv-makieta-root:fullscreen[ data-card="column" ] .lv-makieta__aside,
.lv-makieta-root:-webkit-full-screen[ data-card="column" ] .lv-makieta__aside {
	flex: 0 0 280px;
}

.lv-makieta-root:fullscreen[ data-card="column" ] .lv-makieta-sidebar,
.lv-makieta-root:-webkit-full-screen[ data-card="column" ] .lv-makieta-sidebar {
	flex: 1 1 auto;
	max-width: 520px;
}


/* Przy chwyceniu ten sam glob, ale o 15% mniejszy — daje odczucie „ścisnąłem”, którego
   systemowe `grabbing` (zaciśnięta dłoń) nie pasuje do globu. Skalujemy rysunek wewnątrz
   tego samego kadru 32×32 wokół środka, a nie sam kursor, żeby punkt trafienia został
   dokładnie w 16 16 — inaczej kursor drgnąłby w momencie kliknięcia. */
.lv-makieta-root .lv-makieta-viewer:active {
	cursor: url( 'data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\
<g transform="translate(16 16) scale(.85) translate(-16 -16)">\
<g fill="none" stroke="%231a1a1a" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round" opacity=".55">\
<circle cx="16" cy="16" r="7.6"/><ellipse cx="16" cy="16" rx="7.6" ry="2.9"/>\
<ellipse cx="16" cy="16" rx="2.9" ry="7.6"/>\
<path d="M5.2 12.8 L2.4 16 L5.2 19.2"/><path d="M26.8 12.8 L29.6 16 L26.8 19.2"/></g>\
<g fill="none" stroke="%23ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">\
<circle cx="16" cy="16" r="7.6"/><ellipse cx="16" cy="16" rx="7.6" ry="2.9"/>\
<ellipse cx="16" cy="16" rx="2.9" ry="7.6"/>\
<path d="M5.2 12.8 L2.4 16 L5.2 19.2"/><path d="M26.8 12.8 L29.6 16 L26.8 19.2"/></g>\
</g></svg>' ) 16 16, grabbing;
}

/* Nad klikalnym hotspotem wraca zwykły wskaźnik — kursor obrotu sugerowałby,
   że można tylko przeciągać. W widoku rzutu obrotu nie ma wcale. */
.lv-makieta-root .lv-makieta-hotspots polygon,
.lv-makieta-root[ data-view="units" ] .lv-makieta-hotspots polygon {
	cursor: pointer;
}

.lv-makieta-root .lv-makieta-viewer--floorplan {
	cursor: default;
}

.lv-makieta-root .lv-makieta-inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	backface-visibility: hidden;
}

.lv-makieta-root .lv-makieta-frame {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	display: block;
	pointer-events: none;
	image-rendering: -webkit-optimize-contrast;
}

.lv-makieta-root .lv-makieta-hotspots {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	pointer-events: none;
	overflow: visible;
	z-index: 10;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

/* ─── Rzut kondygnacji (drill-down) ─────────────────────────────────────────── */

/* Rzut leży NAD makietą i wygasza się ku krawędziom, więc pod spodem prześwituje
   makieta — użytkownik widzi, że wszedł "w głąb" widoku i może z niego wrócić. */
.lv-makieta-root .lv-makieta-floorplan {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	display: block;
	pointer-events: none;
	z-index: 5;
	-webkit-mask-image: radial-gradient( ellipse 68% 68% at 50% 50%, #000 55%, transparent 100% );
	mask-image: radial-gradient( ellipse 68% 68% at 50% 50%, #000 55%, transparent 100% );
	animation: lv-floorplan-in 0.35s ease both;
}

/* Makieta pod spodem: przygaszona i lekko rozmyta, żeby rzut pozostał czytelny,
   ale nadal rozpoznawalna jako "to, do czego wracam". */
.lv-makieta-root .lv-makieta-viewer--floorplan .lv-makieta-frame {
	filter: brightness( 0.55 ) blur( 2px );
	transition: filter 0.35s ease;
}

/* Etykieta widoku — obok przycisku „Wróć”, ten sam język wizualny. */
.lv-makieta-root .lv-makieta-floorplan-label {
	position: absolute;
	top: 15px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 1000;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	border-radius: 6px;
	padding: 8px 16px;
	font-size: 13px;
	white-space: nowrap;
	pointer-events: none;
}

.lv-makieta-root .lv-makieta-floorplan-label span {
	opacity: 0.5;
	margin: 0 4px;
}

@media ( max-width: 560px ) {
	/* Na wąskim ekranie etykieta schodzi pod przycisk „Wróć”, żeby się nie nakładały. */
	.lv-makieta-root .lv-makieta-floorplan-label {
		top: 58px;
		font-size: 12px;
		padding: 6px 12px;
	}
}

@keyframes lv-floorplan-in {
	from { opacity: 0; transform: scale( 0.97 ); }
	to   { opacity: 1; transform: scale( 1 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.lv-makieta-floorplan { animation: none; }
}

/* Na pełnym ekranie viewer ma wypełnić scenę, a nie trzymać proporcji 16:9 — te
   przypisuje mu układ mobilny, a na pełnym ekranie zostawiłyby czarne pasy.
   Reguła celuje w viewer WEWNĄTRZ powłoki w fullscreenie, bo od tej wersji na pełny
   ekran idzie cała powłoka (inaczej karta lokalu i spacer zostawały poza ekranem). */
.lv-makieta-root:fullscreen .lv-makieta-viewer,
.lv-makieta-root:-webkit-full-screen .lv-makieta-viewer {
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: unset !important;
}

/* ─── Hotspoty: kolory wg typu (bez danych lokalu — np. Kasprowicza Tryb A) ──── */

.lv-makieta-root .lv-makieta-hotspots polygon {
	cursor: pointer;
	stroke-width: 0.05;
	transition: fill 0.25s;
	pointer-events: auto;
	fill: rgba( 82, 144, 0, 0.2 );
	stroke: rgba( 82, 144, 0, 0.8 );
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.lv-makieta-root .lv-makieta-hotspots polygon:hover {
	fill: rgba( 82, 144, 0, 0.55 );
}

.lv-makieta-root .lv-makieta-hotspots polygon[ data-property-type="Parking" ] {
	fill: rgba( 14, 103, 203, 0.2 );
	stroke: rgba( 14, 103, 203, 0.4 );
}

.lv-makieta-root .lv-makieta-hotspots polygon[ data-property-type="Parking" ]:hover {
	fill: rgba( 14, 103, 203, 0.55 );
}

/* ─── Hotspoty: kolory wg statusu lokalu (gdy projekt ma dane) ──────────────── */

.lv-makieta-root .lv-makieta-hotspots polygon.lv-status-dostepne {
	fill: rgba( 85, 166, 48, 0.4 );
	stroke: #458a27;
}
.lv-makieta-root .lv-makieta-hotspots polygon.lv-status-zarezerwowane {
	fill: rgba( 230, 126, 34, 0.55 );
	stroke: #d35400;
}
.lv-makieta-root .lv-makieta-hotspots polygon.lv-status-niedostepne {
	fill: rgba( 192, 57, 43, 0.55 );
	stroke: #a93226;
}
.lv-makieta-root .lv-makieta-hotspots polygon.lv-status-wkrotce {
	fill: rgba( 90, 122, 158, 0.45 );
	stroke: #45607d;
}
.lv-makieta-root .lv-makieta-hotspots polygon.lv-status-empty {
	fill: rgba( 136, 136, 136, 0.3 );
	stroke: rgba( 136, 136, 136, 0.5 );
	cursor: default;
}
.lv-makieta-root .lv-makieta-hotspots polygon.lv-status-dostepne:hover,
.lv-makieta-root .lv-makieta-hotspots polygon.lv-status-zarezerwowane:hover,
.lv-makieta-root .lv-makieta-hotspots polygon.lv-status-niedostepne:hover,
.lv-makieta-root .lv-makieta-hotspots polygon.lv-status-wkrotce:hover {
	fill-opacity: 0.85;
}

/* ─── Loader ─────────────────────────────────────────────────────────────────── */

.lv-makieta-root .lv-makieta-loader {
	position: absolute;
	inset: 0;
	z-index: 100;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	transition: opacity 0.4s ease;
}

.lv-makieta-root .lv-makieta-loader-bar {
	width: 200px;
	height: 8px;
	background: #eee;
	border-radius: 5px;
	overflow: hidden;
}

.lv-makieta-root .lv-makieta-loader-fill {
	width: 0;
	height: 100%;
	background: var( --lv-makieta-accent );
	transition: width 0.2s;
}

.lv-makieta-root .lv-makieta-loader-pct {
	font-size: 13px;
	color: #666;
}

/* ─── Tooltip ────────────────────────────────────────────────────────────────── */

.lv-makieta-root .lv-makieta-tooltip {
	position: absolute;
	display: none;
	background: rgba( 45, 55, 72, 0.95 );
	color: #fff;
	padding: 8px 14px;
	border-radius: 10px;
	font-size: 13px;
	pointer-events: none;
	z-index: 2000;
	box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.2 );
}

.lv-tt-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lv-tt-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}

.lv-tt-status {
	font-size: 11px;
	opacity: 0.85;
}

/* ─── Interfejs: fullscreen, back, hint, sygnatura ───────────────────────────── */

.lv-makieta-root .lv-makieta-fullscreen {
	position: absolute;
	bottom: 15px;
	right: 15px;
	z-index: 1000;
	width: 38px;
	height: 38px;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.2 ) !important;
	border-radius: 6px !important;
	cursor: pointer;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.25s;
}
.lv-makieta-root .lv-makieta-fullscreen:hover {
	background: rgba( 0, 0, 0, 0.9 );
}

.lv-makieta-root .lv-makieta-back {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 1000;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.2 ) !important;
	border-radius: 6px !important;
	padding: 8px 14px;
	cursor: pointer;
	font-size: 13px;
}
.lv-makieta-root .lv-makieta-back:hover {
	background: rgba( 0, 0, 0, 0.9 );
}

/* ─── Kompas ────────────────────────────────────────────────────────────────── */

.lv-makieta-root .lv-makieta-compass {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 1000;
	width: 54px;
	height: 54px;
	pointer-events: none;
}

.lv-makieta-root .lv-makieta-compass-rose {
	width: 100%;
	height: 100%;
	/* Obrót ustawiany z JS na podstawie numeru klatki; przejście wygładza skok
	   między klatkami, ale musi być krótsze niż tempo przewijania makiety. */
	transition: transform 0.12s linear;
	filter: drop-shadow( 0 2px 6px rgba( 0, 0, 0, 0.35 ) );
}

.lv-compass-bg {
	fill: rgba( 0, 0, 0, 0.55 );
	stroke: rgba( 255, 255, 255, 0.25 );
	stroke-width: 2;
}

.lv-compass-north { fill: #e5484d; }
.lv-compass-south { fill: rgba( 255, 255, 255, 0.75 ); }

.lv-compass-label {
	fill: #fff;
	font-size: 17px;
	font-weight: 700;
	text-anchor: middle;
	font-family: system-ui, sans-serif;
}

@media ( max-width: 560px ) {
	.lv-makieta-root .lv-makieta-compass {
		width: 42px;
		height: 42px;
		top: 12px;
		right: 12px;
	}
}

.lv-makieta-root .lv-makieta-hint {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	background: rgba( 0, 0, 0, 0.75 );
	color: #fff;
	padding: 14px 22px;
	border-radius: 12px;
	font-size: 13px;
	text-align: center;
	pointer-events: none;
	z-index: 500;
	transition: opacity 0.5s;
}
.lv-makieta-root .lv-makieta-hint.lv-hidden {
	opacity: 0;
	display: block;
}

/* ─── Sidebar (Tryb B) ──────────────────────────────────────────────────────── */

/* Karta wysuwa się z prawej krawędzi i nakłada na makietę — makieta zachowuje
   pełną szerokość, a panel pojawia się tylko wtedy, gdy ma co pokazać. */
.lv-makieta-root .lv-makieta-sidebar {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( 360px, 88% );
	padding: 24px;
	background: #fafafa;
	border-left: 1px solid #e5e5e5;
	box-shadow: -12px 0 32px rgba( 0, 0, 0, 0.18 );
	overflow-y: auto;
	z-index: 1200;
	transform: translateX( 101% );
	visibility: hidden;
	transition: transform 0.32s cubic-bezier( 0.22, 0.61, 0.36, 1 ), visibility 0.32s;
}

.lv-makieta-root .lv-makieta-sidebar--open {
	transform: translateX( 0 );
	visibility: visible;
}

.lv-makieta-root .lv-makieta-sidebar-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50% !important;
	background: rgba( 0, 0, 0, 0.06 );
	color: #444;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s;
}

.lv-makieta-root .lv-makieta-sidebar-close:hover {
	background: rgba( 0, 0, 0, 0.14 );
}

@media ( prefers-reduced-motion: reduce ) {
	.lv-makieta-sidebar { transition: none; }
}

/* Karta lokalu, dla którego nie przyszły dane. Panel wysuwa się mimo to — klik musi
   dać widoczną odpowiedź, bo „nic się nie stało” czyta się jako zepsuty widget. */
.lv-makieta-root .lv-makieta-sidebar-empty,
.lv-makieta-root .lv-makieta-sidebar-soon {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 8px;
}

.lv-makieta-root .lv-makieta-sidebar-empty strong,
.lv-makieta-root .lv-makieta-sidebar-soon strong,
.lv-makieta-root .lv-makieta-sidebar-idle strong {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.lv-makieta-root .lv-makieta-sidebar-empty span,
.lv-makieta-root .lv-makieta-sidebar-soon span,
.lv-makieta-root .lv-makieta-sidebar-idle span {
	font-size: 13px;
	line-height: 1.45;
	color: var( --lv-makieta-muted );
}

/* Zachęta widoczna tylko wtedy, gdy karta jest stałą kolumną (pełny ekran na
   panoramicznym monitorze) — w zwykłym układzie karta wysuwa się dopiero po wyborze
   lokalu, więc nie ma komu tego tłumaczyć. */
.lv-makieta-root .lv-makieta-sidebar-idle {
	display: none;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 8px;
}

/* Podsumowanie inwestycji w pustej kolumnie — liczniki tym samym językiem co
   legenda pod makietą (kropka w kolorze statusu), zakresy jako lista par. */
.lv-makieta-root .lv-s-idle-counts {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 18px;
	font-size: 13px;
	color: var( --lv-makieta-text );
	text-align: left;
}

.lv-makieta-root .lv-s-idle-counts > div {
	display: flex;
	align-items: center;
	gap: 8px;
}

.lv-makieta-root .lv-s-idle-counts b {
	min-width: 1.5em;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.lv-makieta-root .lv-s-idle-facts {
	width: 100%;
	max-width: 260px;
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 0.5px solid var( --lv-makieta-border );
}

.lv-makieta-root .lv-s-idle-facts > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	font-size: 13px;
}

.lv-makieta-root .lv-s-idle-facts dt {
	color: var( --lv-makieta-muted );
}

.lv-makieta-root .lv-s-idle-facts dd {
	margin: 0;
	font-weight: 600;
	color: var( --lv-makieta-text );
}

.lv-s-image {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 16px;
}

.lv-s-title {
	margin: 0 0 8px;
	font-size: 22px;
	color: #333;
}

.lv-makieta-root .lv-makieta-status-badge {
	display: inline-flex;
	padding: 6px 14px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 16px;
}
.lv-makieta-status-badge.lv-status-dostepne      { background: #55a630; }
.lv-makieta-status-badge.lv-status-zarezerwowane { background: #e67e22; }
.lv-makieta-status-badge.lv-status-niedostepne   { background: #c0392b; }
.lv-makieta-status-badge.lv-status-wkrotce       { background: #5a7a9e; }

.lv-makieta-root .lv-makieta-sidebar-facts {
	background: #f0f0f0;
	border-radius: 10px;
	padding: 12px 15px;
	margin-bottom: 20px;
}
.lv-makieta-root .lv-makieta-sidebar-facts > div {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	border-bottom: 1px solid #ddd;
}
.lv-makieta-root .lv-makieta-sidebar-facts > div:last-child {
	border-bottom: none;
}
.lv-makieta-root .lv-makieta-sidebar-facts span {
	color: #666;
}

.lv-s-old-price {
	font-size: 16px;
	color: #c0392b;
	text-decoration: line-through;
}
.lv-s-price {
	font-size: 28px;
	font-weight: 700;
	color: var( --lv-makieta-price );
	line-height: 1.2;
}
.lv-s-price--muted {
	font-size: 18px;
	color: #6b7280;
	font-weight: 600;
}

.lv-s-price-m2 {
	font-size: 13px;
	color: #888;
	margin-top: 4px;
}
.lv-s-history {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px dashed #ccc;
	font-size: 11px;
	color: #777;
}
.lv-s-history strong {
	display: block;
	text-transform: uppercase;
	color: #444;
	margin-bottom: 4px;
}

.lv-makieta-root .lv-makieta-btn {
	display: block;
	text-align: center;
	background: var( --lv-makieta-btn-bg );
	color: var( --lv-makieta-btn-text );
	padding: 14px;
	border-radius: var( --lv-makieta-radius ) !important;
	font-weight: 700;
	text-decoration: none;
	margin-top: 20px;
	transition: background 0.25s, transform 0.25s;
}
.lv-makieta-root .lv-makieta-btn:hover {
	background: var( --lv-makieta-btn-hover-bg );
	color: var( --lv-makieta-btn-hover-text );
	transform: translateY( -2px );
}

/* Na wąskim ekranie stała wysokość aplikacji nie ma sensu: makieta 16:9 zjadłaby
   ekran, a karta nałożona na nią miałaby ~130 px i byłaby jednym scrollem. Powłoka
   przechodzi więc na wysokość naturalną, viewer wraca do proporcji obrazu, a karta
   pojawia się POD makietą w normalnym przepływie — tak działała Zielona Village. */
@media ( max-width: 640px ) {
	.lv-makieta-root {
		--lv-makieta-height: auto;
		--lv-makieta-radius: 10px;
	}

	.lv-makieta-root .lv-makieta__stage,
	.lv-makieta-root[ data-view="units" ] .lv-makieta__stage {
		grid-template-columns: 1fr;
	}

	/* Lista schodzi pod makietę i dostaje własną wysokość — w kolumnie gridu
	   o wysokości auto lista z `overflow` nie miałaby się od czego odbić. */
	.lv-makieta-root .lv-makieta__aside {
		order: 2;
		border-right: none;
		border-top: 0.5px solid var( --lv-makieta-border );
	}

	/* Na pełnym ekranie scena ma stałą wysokość i grid rozdziela ją między makietę
	   a listę. Bez podziału na wiersze makieta zostawała paskiem u góry, a lista brała
	   niemal cały ekran — a to makieta jest tu treścią, lista tylko nawigacją po niej. */
	.lv-makieta-root:fullscreen[ data-view="units" ] .lv-makieta__stage,
	.lv-makieta-root:-webkit-full-screen[ data-view="units" ] .lv-makieta__stage {
		grid-template-rows: minmax( 0, 45% ) minmax( 0, 1fr );
	}

	.lv-makieta-root:fullscreen[ data-view="units" ] .lv-makieta-viewer,
	.lv-makieta-root:-webkit-full-screen[ data-view="units" ] .lv-makieta-viewer {
		height: 100% !important;
		aspect-ratio: unset !important;
	}

	.lv-makieta-root:fullscreen[ data-view="units" ] .lv-makieta__list,
	.lv-makieta-root:-webkit-full-screen[ data-view="units" ] .lv-makieta__list {
		max-height: none;
	}

	/* Filtry mają ~300 px, a kolumna na pełnym ekranie niecałe 400 — bez limitu zostawały
	   liście dwa wiersze. Ograniczamy je do jednej trzeciej i dajemy własne przewijanie. */
	.lv-makieta-root:fullscreen[ data-view="units" ] .lv-makieta__filters,
	.lv-makieta-root:-webkit-full-screen[ data-view="units" ] .lv-makieta__filters {
		max-height: 34%;
	}

	.lv-makieta-root .lv-makieta__list {
		max-height: 46vh;
	}

	.lv-makieta-root .lv-makieta-viewer {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.lv-makieta-root .lv-makieta__bar {
		padding: 10px 14px;
		gap: 10px;
	}

	.lv-makieta__title strong { font-size: 14px; }

	.lv-makieta-root .lv-makieta__tab {
		padding: 5px 11px;
		font-size: 12px;
	}

	.lv-makieta-root .lv-makieta__brand {
		padding-left: 10px;
	}

	.lv-makieta-root .lv-makieta__legend {
		padding: 8px 14px;
		gap: 10px;
	}

	/* Zostają kropki z liczbami — same etykiety nie mieszczą się w jednej linii. */
	.lv-makieta__count > span { display: none; }
	.lv-makieta__counts { gap: 12px; }
	.lv-makieta__tip { display: none; }

	.lv-makieta-root .lv-makieta-sidebar {
		position: static;
		display: none;
		width: 100%;
		border-left: none;
		border-top: 1px solid #e5e5e5;
		box-shadow: none;
		transform: none;
		visibility: visible;
		transition: none;
	}

	.lv-makieta-root .lv-makieta-sidebar--open {
		display: block;
		animation: lv-sidebar-down 0.28s ease both;
	}

	@keyframes lv-sidebar-down {
		from { opacity: 0; transform: translateY( -8px ); }
		to   { opacity: 1; transform: translateY( 0 ); }
	}
}

/* ─── Panel cenowy (token) ──────────────────────────────────────────────────── */

/* Bez prefiksu `.lv-makieta-root`: panel to osobny shortcode na stronie WordPressa,
   nie część powłoki widgetu — z prefiksem reguła nigdy nie trafiała w cel. */
.lv-makieta-price-panel {
	font-family: system-ui, sans-serif;
}

.lv-panel-notice--warning {
	background: #fdf3d8;
	border-left-color: #dba617;
}

.lv-panel-search-row {
	margin: 0 0 12px;
}

.lv-panel-search {
	width: 100%;
	max-width: 320px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}

.lv-panel-hint {
	margin: 10px 0 0;
	font-size: 13px;
	color: #666;
}

.lv-panel-notice {
	background: #e8f5e0;
	border-left: 4px solid #55a630;
	padding: 10px 14px;
	margin-bottom: 16px;
}

.lv-panel-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.lv-panel-table th,
.lv-panel-table td {
	border: 1px solid #e2e2e2;
	padding: 8px 10px;
	text-align: left;
	vertical-align: top;
}

.lv-panel-table th {
	background: #f6f7f8;
	font-weight: 600;
}

.lv-panel-table input,
.lv-panel-table select,
.lv-panel-table textarea {
	width: 100%;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 13px;
}

.lv-panel-submit {
	background: #2d3748;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 12px 24px;
	font-weight: 700;
	cursor: pointer;
}

.lv-panel-submit:hover {
	background: #55a630;
}

/* ─── Dotyk ───────────────────────────────────────────────────────────────────
   Na telefonie w pionie render 16:9 przy szerokości ekranu daje scenę wysoką na jakieś
   180 px — piętra są wtedy paskami po kilkanaście pikseli i palcem trudno w nie trafić.
   Obrys dostaje grubszą krawędź w kolorze wypełnienia: pole trafienia rośnie o połowę
   grubości z każdej strony, a wygląd zmienia się minimalnie. Zoom palcami zostaje
   drugą drogą — po nim rzut otwiera się już bez powiększenia. */
@media ( pointer: coarse ) {
	.lv-makieta-root .lv-makieta-hotspots polygon {
		stroke-width: 0.9;
	}

	/* Przyciski na scenie muszą mieć sensowne pole dotyku — 32 px to minimum, poniżej
	   trafia się w nie tylko przypadkiem. */
	.lv-makieta-root .lv-makieta-fullscreen,
	.lv-makieta-root .lv-makieta-back {
		min-width: 40px;
		min-height: 40px;
	}

	.lv-makieta-root .lv-makieta__pin-marker {
		width: 42px;
		height: 42px;
	}
}

/* ─── Telefon w poziomie ──────────────────────────────────────────────────────
   Na leżącym telefonie o wysokości widget ma decydować ekran, a nie proporcje obrazu:
   przy szerokości 747 px tryb proporcjonalny robi scenę wysoką na 420 px, czyli wyższą
   niż całe okno (375 px). Makieta wychodziła wtedy poza ekran, użytkownik widział jej
   wycinek i nie mógł dosięgnąć legendy ani reszty sceny.

   `dvh` zamiast `vh`, bo na telefonie pasek adresu chowa się i pokazuje — `vh` liczy
   się do największej wysokości okna, więc widget stale wystawałby o wysokość paska. */
@media ( orientation: landscape ) and ( max-height: 560px ) {
	.lv-makieta-root,
	.lv-makieta-root[ data-size="ratio" ] {
		height: 100vh;
		height: 100dvh;
	}

	/* Wysokość bierze teraz ekran, więc scena musi oddać proporcje — inaczej dalej
	   liczyłaby swoją własną wysokość z szerokości. */
	.lv-makieta-root[ data-size="ratio" ] .lv-makieta__stage {
		aspect-ratio: auto;
		min-height: 0;
	}

	/* Belka i legenda zabierają 95 px z 375 — na tej wysokości to jedna czwarta ekranu.
	   Zwężamy je do niezbędnego minimum, całą resztę oddając makiecie. */
	.lv-makieta-root .lv-makieta__bar {
		padding: 6px 12px;
		gap: 10px;
	}

	.lv-makieta__title strong { font-size: 13px; }
	.lv-makieta__title span { display: none; }

	.lv-makieta-root .lv-makieta__legend {
		padding: 4px 12px;
		font-size: 11px;
	}

	.lv-makieta__tip { display: none; }

	/* Widok „Lokale" na niskim ekranie: filtry dostają najwyżej dwie piąte wysokości,
	   reszta należy do listy. Bez tego pełny zestaw filtrów (typ, pokoje, status, sortowanie)
	   zajmował całą kolumnę i lista schodziła do jednej nieczytelnej linii. */
	.lv-makieta-root .lv-makieta__filters {
		max-height: 40%;
	}

	.lv-makieta-root .lv-makieta__list {
		flex: 1 1 auto;
		min-height: 0;
	}

	/* Karta lokalu wysuwa się z boku zamiast wjeżdżać od dołu: w poziomie dolny panel
	   zasłoniłby całą makietę, a z boku zostaje przy niej kontekst. */
	.lv-makieta-root .lv-makieta-sidebar {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min( 320px, 46% );
		max-height: none;
		transform: translateX( 101% );
		border-left: 1px solid var( --lv-makieta-border );
		border-top: none;
	}

	.lv-makieta-root .lv-makieta-sidebar--open {
		transform: translateX( 0 );
	}
}

/* ─── Makieta statyczna (jedna klatka) ────────────────────────────────────────
   Render bez obrotu 360°. Kursor „globusa" obiecywałby tu gest, którego nie ma —
   zostaje zwykły wskaźnik, a nad hotspotami i tak zmienia się w rączkę. */
.lv-makieta-root[ data-static="1" ] .lv-makieta-viewer {
	cursor: default;
}

.lv-makieta-root[ data-static="1" ] .lv-makieta-viewer:active {
	cursor: default;
}

/* Etap zamiast ceny na liście lokali — ma się czytać jako informacja, a nie
   jako kwota, więc bez pogrubienia i w kolorze plakietki „wkrótce”. */
.lv-makieta-root .lv-makieta__unit-price.lv-makieta__unit-stage {
	color: #5a7a9e;
	font-weight: 500;
}

/* Plakietka etapu w zapowiedzi. Blok jest wyśrodkowany w kolumnie, więc plakietka
   potrzebuje własnej szerokości — inaczej rozciągnęłaby się na całą kartę. */
.lv-makieta-root .lv-s-soon-stage {
	align-self: center;
	width: auto;
}

/* Kolumna z nazwą lokalu jest kotwicą całego wiersza — przy kilkudziesięciu
   pozycjach oko wraca do niej po każdej edycji, więc odcina się tłem od pól. */
.lv-panel-table td:first-child {
	background: #f1f3f5;
	font-weight: 600;
	white-space: nowrap;
}

/* Status kolorem tej samej palety co hotspoty na makiecie — handlowiec widzi stan
   całej inwestycji, przelatując wzrokiem kolumnę, zamiast czytać każdy wiersz. */
/* Prefiks `.lv-panel-table` wyrównuje specyficzność do reguły, która nadaje wszystkim
   polom tabeli szarą ramkę — bez niego kolorowy pasek przegrywał i zostawał szary. */
.lv-panel-table .lv-panel-status {
	font-weight: 600;
	border-left-width: 6px;
	border-left-style: solid;
}

.lv-panel-table .lv-panel-status--dostepne      { border-left-color: #55a630; color: #3d7a22; }
.lv-panel-table .lv-panel-status--zarezerwowane { border-left-color: #e67e22; color: #b3610f; }
.lv-panel-table .lv-panel-status--niedostepne   { border-left-color: #c0392b; color: #96271b; }
.lv-panel-table .lv-panel-status--wkrotce       { border-left-color: #5a7a9e; color: #45607d; }

/* Panel cen: komunikat trybu demo i zaznaczenie wierszy czekających na zapis.
   Podwójna klasa, bo ogólna reguła .lv-panel-notice stoi w arkuszu niżej niż warianty. */
.lv-panel-notice.lv-panel-notice--warning { background: #fdf3d8; border-left-color: #dba617; }
.lv-panel-notice.lv-panel-notice--demo    { background: #eef2f7; border-left-color: #5a7a9e; }
.lv-panel-table tr.lv-panel-row--changed td { background: #fffbea; }
.lv-panel-table tr.lv-panel-row--changed td:first-child { box-shadow: inset 3px 0 0 #dba617; }