html.voxic-scroll-lock,
body.voxic-scroll-lock {
	overflow: hidden !important;
}

.voxic-wrap {
	--voxic-accent: #ea8a1e;
	--voxic-accent-dark: #c66f12;
	--voxic-ink: #2a2520;
	--voxic-muted: #9a9084;
	--voxic-text: #6b6358;
	--voxic-border: #efeae3;
	--voxic-bg-soft: #fbf7f1;
	font-family: 'Mulish', system-ui, sans-serif;
	color: var(--voxic-text) !important;
	box-sizing: border-box;
}
.voxic-wrap *,
.voxic-wrap *::before,
.voxic-wrap *::after {
	box-sizing: border-box;
}

/* Results heading - single line, single size, single color */
.voxic-results-heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 14px 0 18px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--voxic-ink) !important;
	white-space: nowrap;
}
.voxic-results-heading .voxic-count-num,
.voxic-results-heading .voxic-count-label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--voxic-ink) !important;
}

/* Toolbar */
.voxic-toolbar {
	background: var(--voxic-bg-soft) !important;
	border: 1px solid var(--voxic-border);
	border-radius: 14px;
	padding: 18px 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.voxic-toolbar-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--voxic-border);
}
.voxic-toolbar-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	border: none;
	background: transparent !important;
	color: var(--voxic-ink) !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 15px;
	padding: 0;
	cursor: pointer;
}
.voxic-toolbar-chevron {
	display: none;
}
.voxic-toolbar-fields {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	align-items: end;
}
.voxic-toolbar-fields .voxic-field {
	flex: 1 1 0;
	min-width: 0;
}
.voxic-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.voxic-field label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--voxic-muted) !important;
}
.voxic-field select {
	border: 1px solid #e6dfd5;
	border-radius: 8px;
	padding: 11px 38px 11px 14px;
	font-family: 'Mulish', sans-serif;
	font-size: 14px;
	color: var(--voxic-ink) !important;
	background: #fff !important;
	cursor: pointer;
}
.voxic-field select option:disabled {
	color: #c8bfb3 !important;
}
.voxic-field select.voxic-filter-active {
	border-color: var(--voxic-accent) !important;
	border-width: 1.5px;
}
.voxic-field-switch {
	flex-direction: row;
	grid-column: 1 / -1;
}
.voxic-switch-label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	height: 44px;
}
.voxic-switch-text {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 11.5px;
	color: var(--voxic-ink) !important;
	white-space: nowrap;
}
.voxic-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex: 0 0 auto;
}
.voxic-switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}
.voxic-switch-track {
	position: absolute;
	inset: 0;
	background: #d8d0c5 !important;
	border-radius: 999px;
	transition: background 0.2s ease;
}
.voxic-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: #fff !important;
	border-radius: 50%;
	transition: transform 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.voxic-switch input:checked ~ .voxic-switch-track {
	background: var(--voxic-accent) !important;
}
.voxic-switch input:checked ~ .voxic-switch-track .voxic-switch-thumb {
	transform: translateX(18px);
}
.voxic-clear-filters {
	flex: 0 0 auto;
	border: 1px solid #e0d7ca;
	background: #fff !important;
	color: var(--voxic-text) !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 11.5px;
	padding: 8px 12px;
	border-radius: 7px;
	cursor: pointer;
	white-space: nowrap;
}
.voxic-clear-filters[hidden] {
	display: none !important;
}
.voxic-clear-filters:hover {
	border-color: var(--voxic-accent);
	color: var(--voxic-accent) !important;
}
.voxic-toggle-bar-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex-shrink: 0;
}
.voxic-show-results {
	display: none;
}
.voxic-active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.voxic-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff !important;
	border: 1px solid #e6dfd5;
	border-radius: 999px;
	padding: 6px 6px 6px 12px;
	font-size: 12.5px;
	color: var(--voxic-ink) !important;
}
.voxic-chip-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: none;
	border-radius: 50%;
	background: var(--voxic-bg-soft) !important;
	color: var(--voxic-text) !important;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.voxic-chip-remove:hover {
	background: #f0ebe4 !important;
	color: var(--voxic-accent) !important;
}

/* Custom select */
.voxic-cs {
	position: relative;
}
.voxic-cs select {
	display: none !important;
}
.voxic-cs-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	border: 1px solid #e6dfd5;
	border-radius: 8px;
	padding: 11px 14px;
	font-family: 'Mulish', sans-serif;
	font-size: 14px;
	color: var(--voxic-ink) !important;
	background: #fff !important;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s ease;
}
.voxic-cs-trigger:hover {
	border-color: #c9c0b5;
}
.voxic-cs.voxic-cs-active .voxic-cs-trigger {
	border-color: var(--voxic-accent) !important;
	border-width: 1.5px;
}
.voxic-cs.voxic-cs-open .voxic-cs-trigger {
	border-color: var(--voxic-accent);
	border-radius: 8px 8px 0 0;
}
.voxic-cs-label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.voxic-cs-chevron {
	flex: 0 0 auto;
	color: var(--voxic-muted) !important;
	transition: transform 0.18s ease;
}
.voxic-cs.voxic-cs-open .voxic-cs-chevron {
	transform: rotate(180deg);
}
.voxic-cs-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff !important;
	border: 1.5px solid var(--voxic-accent);
	border-top: none;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 24px rgba(20, 14, 8, 0.12);
	overflow: hidden;
}
.voxic-cs-dropdown[hidden] {
	display: none !important;
}
.voxic-cs-search-wrap {
	padding: 8px 10px 6px;
	border-bottom: 1px solid var(--voxic-border);
}
.voxic-cs-search {
	width: 100%;
	border: 1px solid #e6dfd5;
	border-radius: 6px;
	padding: 6px 10px;
	font-family: 'Mulish', sans-serif;
	font-size: 13px;
	color: var(--voxic-ink) !important;
	background: var(--voxic-bg-soft) !important;
	outline: none;
}
.voxic-cs-search:focus {
	border-color: var(--voxic-accent);
}
.voxic-cs-options {
	max-height: 220px;
	overflow-y: auto;
}
.voxic-cs-option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	font-family: 'Mulish', sans-serif;
	font-size: 13.5px;
	color: var(--voxic-ink) !important;
	cursor: pointer;
	transition: background 0.1s ease;
}
.voxic-cs-option:hover:not(.voxic-cs-option-disabled) {
	background: var(--voxic-bg-soft) !important;
}
.voxic-cs-option-selected {
	color: var(--voxic-accent) !important;
}
.voxic-cs-option-disabled {
	color: #c8bfb3 !important;
	cursor: default;
}
.voxic-cs-option-label {
	flex: 1 1 auto;
}
.voxic-cs-option-count {
	font-size: 12px;
	color: var(--voxic-muted) !important;
	font-weight: 400;
	flex: 0 0 auto;
}
.voxic-cs-checkbox {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 1.5px solid #c8bfb3;
	border-radius: 4px;
	background: #fff !important;
	transition: background 0.12s ease, border-color 0.12s ease;
}
.voxic-cs-checkbox-checked {
	background: var(--voxic-accent) !important;
	border-color: var(--voxic-accent);
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

/* Table */
.voxic-table {
	border: 1px solid var(--voxic-border);
	border-radius: 14px;
	overflow: hidden;
}
.voxic-row {
	display: grid;
	/* Liczba kolumn zmienna per inwestycja (Status/Balkon/Taras/Ogródek —
	   każda opcjonalna, sterowana ustawieniem "Widoczne filtry") — wartość
	   liczona w PHP (Voxic_Shortcode::render()) i przekazana jako zmienna CSS
	   na .voxic-wrap; fallback tu to stały układ bez żadnej z nich. */
	grid-template-columns: var(--voxic-cols, 1.1fr 0.8fr 1.1fr 0.8fr 1.1fr 1.1fr 1.5fr);
	align-items: center;
	border-bottom: 1px solid #f4efe8;
	padding: 0 8px;
}
.voxic-row.voxic-head {
	background: var(--voxic-bg-soft) !important;
	border-bottom: 1px solid var(--voxic-border);
}
/* Klient: "cala wiersz ma kilkalny byc i otwierac szczegoly" — cały wiersz,
   nie tylko przycisk "Szczegóły" (patrz body.addEventListener w vox-units.js). */
.voxic-row:not(.voxic-head) {
	cursor: pointer;
}
.voxic-row:not(.voxic-head):hover {
	background: #fbf7f1 !important;
}
.voxic-cell {
	padding: 16px 14px;
	font-size: 14.5px;
	color: var(--voxic-text) !important;
}
.voxic-head .voxic-cell {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: 1px;
	color: var(--voxic-muted) !important;
	padding: 14px;
}
.voxic-cell-actions-head {
	text-align: center;
}
.voxic-sortable {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	user-select: none;
	background: none !important;
	border: none;
}
.voxic-sortable.voxic-active {
	color: var(--voxic-accent) !important;
}
.voxic-arrow {
	font-size: 9px;
}
.voxic-lokal-line {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.voxic-cell-code {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--voxic-ink) !important;
}
.voxic-cell-building {
	font-family: 'Mulish', sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: var(--voxic-muted) !important;
}
.voxic-mobile-stats {
	display: none;
}
/* REALNY BUG znaleziony na żywej stronie klienta ("tabela jest rozjebana"):
   ten element (pigułki Status/Balkon/Taras/Ogródek na mobile, patrz
   rowHtml() w vox-units.js) miał regułę WYŁĄCZNIE wewnątrz media query
   mobile — na desktopie, bez żadnej bazowej reguły display, stawał się
   dodatkowym, nieprzewidzianym elementem CSS Grid (11 realnych dzieci
   .voxic-row wobec 9 zdefiniowanych kolumn w --voxic-cols), więc ostatnie
   komórki (Akcje) wypadały na niewidoczny, dodatkowy wiersz siatki zamiast
   trzymać się w jednej linii z resztą — DOKŁADNIE ten sam mechanizm co
   .voxic-mobile-stats wyżej, tylko że TAM bazowa reguła display:none od
   razu istniała. */
.voxic-cell-extras {
	display: none;
}
.voxic-cell-price {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--voxic-ink) !important;
}
.voxic-badge {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.5px;
	padding: 6px 12px;
	border-radius: 999px;
	display: inline-block;
}
.voxic-badge-available {
	color: #1f8a5b !important;
	background: rgba(31, 138, 91, 0.12) !important;
}
.voxic-badge-reserved {
	color: #c8821e !important;
	background: rgba(200, 130, 30, 0.14) !important;
}
.voxic-badge-sold {
	color: #8a8175 !important;
	background: rgba(138, 129, 117, 0.14) !important;
}
.voxic-actions-cell {
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.voxic-btn {
	border: 1px solid #e0d7ca;
	background: #fff !important;
	color: var(--voxic-ink) !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.5px;
	padding: 8px 12px;
	border-radius: 7px;
	cursor: pointer;
	white-space: nowrap;
}
.voxic-btn:hover {
	border-color: var(--voxic-accent);
	color: var(--voxic-accent) !important;
	background: #fff !important;
}
.voxic-btn:disabled {
	opacity: 0.4;
	cursor: default;
}
.voxic-empty {
	padding: 30px;
	text-align: center;
	color: var(--voxic-muted) !important;
}
.voxic-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 16px 22px;
	border-top: 1px solid #f4efe8;
}
.voxic-page-size {
	display: flex;
	align-items: center;
	gap: 10px;
}
.voxic-page-size label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--voxic-muted) !important;
}
.voxic-page-size select {
	border: 1px solid #e6dfd5;
	border-radius: 8px;
	padding: 7px 30px 7px 10px;
	font-family: 'Mulish', sans-serif;
	font-size: 13px;
	color: var(--voxic-ink) !important;
	background: #fff !important;
	cursor: pointer;
}
.voxic-page-nav {
	display: flex;
	align-items: center;
	gap: 16px;
}
.voxic-page-btn {
	border: 1px solid #e0d7ca;
	background: #fff !important;
	color: var(--voxic-ink) !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 12.5px;
	padding: 9px 16px;
	border-radius: 7px;
	cursor: pointer;
}
.voxic-page-btn:hover:not(:disabled) {
	border-color: var(--voxic-accent);
	color: var(--voxic-accent) !important;
}
.voxic-page-info {
	font-size: 13px;
	color: var(--voxic-muted) !important;
}
/* Modals (shared) */
.voxic-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.voxic-modal[hidden],
.voxic-lightbox[hidden] {
	display: none;
}
.voxic-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(24, 18, 12, 0.62) !important;
	backdrop-filter: blur(4px);
	animation: voxic-fadein 0.2s ease;
}
.voxic-modal-dialog {
	position: relative;
	background: #fff !important;
	border-radius: 18px;
	width: 100%;
	max-width: 640px;
	max-height: 88vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 40px 90px rgba(20, 14, 8, 0.4);
	animation: voxic-modalin 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
/* Modal "Szczegóły + Zapytaj o ofertę" — klient: "szersze ma być okno modalu
   ma zajmować 90% szerokości ekranu przy czym powiększenie [rzut] w środku
   60% ma być szerokość screenu" — DOSŁOWNIE względem szerokości EKRANU
   (vw), nie względem samego modala: modal 90vw, kolumna rzutu w nim 60vw
   (czyli ok. 2/3 modala), reszta (~30vw minus padding/gap) na dane+formularz. */
.voxic-modal-dialog-details {
	max-width: 90vw;
	max-height: min(780px, 92vh);
}
.voxic-modal-scroll {
	overflow-y: auto;
	padding: 0 36px 8px;
	min-height: 0;
	flex: 1 1 auto;
}
.voxic-modal-split {
	display: flex;
	align-items: stretch;
	gap: 32px;
	min-height: 0;
}
/* Lewa kolumna: rzut, a POD nim ramka z danymi lokalu (Typ/Powierzchnia/.../
   Balkon) — klient: "dajmy [dane] pod rzut... w ładnej ramce". To TA kolumna
   (nie sam .voxic-modal-media) dostaje szerokość 60vw, żeby rzut i ramka pod
   nim miały identyczną szerokość. */
.voxic-modal-left {
	flex: 0 0 60vw;
	max-width: 60vw;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* flex-direction:column — obok rzutu (wyrównanego do góry, klient: "ma być
   wyrównany do góry") mieści się TAKŻE link "Pobierz kartę lokalu (PDF)"
   bezpośrednio pod nim (klient: "po d nim ma być Pobierz kartę lokalu"),
   przeniesiony tu z prawej kolumny danych. justify-content: flex-start (nie
   stretch/center) — pakuje rzut+link od góry, zostawiając ewentualną
   nadwyżkę wysokości (gdy proporcje rzutu nie wypełniają całej wysokości
   kolumny) na dole, nie rozciągając/centrowania w pionie. */
.voxic-modal-media {
	width: 100%;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	padding: 20px;
	background: var(--voxic-bg-soft) !important;
	border: 1px solid var(--voxic-border);
	border-radius: 14px;
	overflow: hidden;
}
.voxic-modal-media-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.voxic-modal-media-empty {
	font-size: 13.5px;
	color: var(--voxic-muted) !important;
}
.voxic-modal-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
@keyframes voxic-fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes voxic-modalin {
	from { opacity: 0; transform: translateY(20px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.voxic-modal-close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--voxic-border);
	background: var(--voxic-bg-soft) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--voxic-text) !important;
	cursor: pointer;
	line-height: 0;
}
.voxic-modal-close svg {
	display: block;
}
.voxic-modal-close:hover {
	background: #f0ebe4 !important;
}
/* Klient: "zrobimy taki większy nagłówek po całej szerokości modalu...
   musi być ładnie oddzielone od pozostałej części modalu" — pełnoszerokościowy
   pasek NAD dwukolumnowym .voxic-modal-split (nie wewnątrz prawej kolumny),
   oddzielony od reszty modala kreską na dole. */
.voxic-modal-topbar {
	flex: 0 0 auto;
	padding: 32px 36px 20px;
	border-bottom: 1px solid var(--voxic-border);
}
.voxic-modal-contact-line {
	margin: 20px 0 0;
}
.voxic-modal-contact-line .voxic-contact-info {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 32px;
	margin-top: 0;
	padding: 12px 18px;
}
.voxic-modal-split {
	margin-top: 22px;
}
.voxic-price-tip {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	margin-left: 6px;
	cursor: help;
}
.voxic-price-tip-box {
	display: none;
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	z-index: 20;
	width: 280px;
	max-height: 240px;
	overflow-y: auto;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--voxic-border);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(20, 14, 8, 0.18);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}
.voxic-price-tip:hover .voxic-price-tip-box,
.voxic-price-tip:focus .voxic-price-tip-box,
.voxic-price-tip.is-open .voxic-price-tip-box {
	display: block;
}
.voxic-modal-topbar-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-right: 30px;
}
.voxic-modal-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: var(--voxic-ink) !important;
}
/* Klient: "po prawej stronie label większy Dostępne, nie musi być w takiej
   stylistyce" — sam badge (.voxic-badge-*) zostaje, tylko w tym KONKRETNYM
   miejscu wyraźnie większy niż domyślne 11px/6px 12px z tabeli. */
.voxic-modal-status .voxic-badge {
	font-size: 13px;
	padding: 9px 18px;
}
.voxic-modal-subtitle {
	font-size: 14px;
	color: var(--voxic-text) !important;
	margin-top: 6px;
}
/* Klient: "...daj tam metraż, cena za metr... piętro... balkon... takie
   kluczowe marketingowe rzeczy" — pasek najważniejszych danych o lokalu. */
.voxic-modal-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin-top: 16px;
}
.voxic-modal-highlights span {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--voxic-ink) !important;
}
/* Klient: "przed 55,40 m² ma być Powierzchnia:... cena za metr, powierzchnia
   itd ma być regular, reszta bold jak jest" — sama etykieta regular, wartość
   (dziedziczona z reguły wyżej) zostaje bold. Balkon/Taras/Ogródek celowo BEZ
   tej klasy — całe zostają bold, bez zmian. !important wymagane: pojedyncza
   klasa (0,1,0) sama w sobie przegrywa z ".voxic-modal-highlights span"
   (klasa+element, 0,1,1), które i tak dopasowuje TEN SAM zagnieżdżony span. */
.voxic-modal-highlight-label {
	font-weight: 400 !important;
}
/* "Ładna ramka" pod rzutem — białe tło (kontrastuje z beżowym .voxic-modal-media
   nad nią), własna obwódka + cień, żeby wizualnie czytać się jako osobna,
   samodzielna karta danych, nie kontynuacja rzutu. */
.voxic-modal-facts {
	display: flex;
	flex-direction: column;
	background: #fff !important;
	border: 1px solid var(--voxic-border);
	border-radius: 14px;
	padding: 4px 18px;
	box-shadow: 0 2px 10px rgba(20, 14, 8, 0.05);
}
.voxic-fact-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #f4efe8;
}
.voxic-fact-row:last-child {
	border-bottom: none;
}
.voxic-fact-row:hover {
	background: var(--voxic-bg-soft) !important;
}
/* Klient: "teksty typu Powierzchnia Typ itd mają być bardziej czytelne,
   obecnie są mało kontrastowe" — --voxic-muted (jasny brąz) zamieniony na
   --voxic-ink (najciemniejszy dostępny odcień, ten sam co wartość obok) +
   pogrubienie; hierarchia etykieta/wartość została utrzymana przez WIELKOŚĆ
   i wersaliki, nie przez rozjaśniony, mało czytelny kolor. */
.voxic-fact-label {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.4px;
	color: var(--voxic-ink) !important;
	text-transform: uppercase;
}
.voxic-fact-value {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--voxic-ink) !important;
	text-align: right;
}
/* "(i)" — klient: "historia cen ma być ukryta i pod (i)". Wygląda jak spokojny
   link, nie duży przycisk, żeby nie konkurował wizualnie z resztą kolumny. */
.voxic-history-toggle {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: none;
	background: transparent !important;
	color: var(--voxic-text) !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 13px;
	padding: 10px 0;
	cursor: pointer;
}
.voxic-history-toggle:hover {
	color: var(--voxic-accent) !important;
}
.voxic-history-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	border: 1.4px solid currentColor;
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
}
.voxic-modal-history {
	margin-bottom: 6px;
	padding-bottom: 14px;
	border-bottom: 1px solid #f4efe8;
}
.voxic-modal-history h4 {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	margin: 0 0 12px;
	color: var(--voxic-ink) !important;
}
.voxic-skeleton-row {
	height: 38px;
	border-radius: 8px;
	margin-bottom: 8px;
	background: linear-gradient(90deg, #f0ebe4 25%, #f8f4ef 37%, #f0ebe4 63%) !important;
	background-size: 400% 100%;
	animation: voxic-shimmer 1.4s ease infinite;
}
@keyframes voxic-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
.voxic-history-list {
	animation: voxic-fadein 0.3s ease;
}
.voxic-history-item {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #f4efe8;
	font-size: 13.5px;
}
.voxic-history-item:last-child {
	border-bottom: none;
}
.voxic-history-date {
	color: var(--voxic-muted) !important;
}
.voxic-history-change strong {
	color: var(--voxic-ink) !important;
}
.voxic-history-empty {
	color: var(--voxic-muted) !important;
	font-size: 13.5px;
}
/* Pobierz kartę lokalu (PDF) — wcześniej w osobnym pasku na dole modala,
   teraz zwykły element w kolumnie informacji (bezpośrednio pod historią cen),
   skoro modal nie ma już dolnego paska "akcji" (formularz jest teraz zawsze
   widoczny, nie potrzeba już osobnego przycisku "Zapytaj o ofertę" żeby go
   otworzyć — stąd usunięty .voxic-action-contact razem z .voxic-modal-actions). */
.voxic-action-card {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	border: 1.5px solid #e0d7ca;
	color: var(--voxic-ink) !important;
	background: #fff !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 13px;
	padding: 12px 20px;
	border-radius: 7px;
	text-decoration: none;
}
.voxic-action-card:hover {
	border-color: var(--voxic-accent);
	color: var(--voxic-accent) !important;
}
.voxic-modal-contact {
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid #f4efe8;
}
/* Klient: "zapytaj o oferte wieksze" — nagłówek formularza wyraźnie większy
   niż poprzednie 16px, na równi wizualnie z resztą "ważnych" nagłówków modala. */
.voxic-modal-contact h4 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 21px;
	margin: 0 0 16px;
	color: var(--voxic-ink) !important;
}

/* Lightbox */
.voxic-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.voxic-lightbox-overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 8, 6, 0.85) !important;
}
.voxic-lightbox-inner {
	position: relative;
	max-width: 92vw;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.voxic-lightbox-img {
	max-width: 100%;
	max-height: 76vh;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.voxic-lightbox-close {
	position: absolute;
	top: -46px;
	right: 0;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.12) !important;
	border: none;
	border-radius: 50%;
	color: #fff !important;
	cursor: pointer;
	line-height: 0;
}
.voxic-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.22) !important;
}
.voxic-lightbox-download {
	display: inline-flex;
	align-items: center;
	background: var(--voxic-accent) !important;
	color: #fff !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 13px;
	padding: 11px 22px;
	border-radius: 7px;
	text-decoration: none;
}
.voxic-lightbox-download:hover {
	background: var(--voxic-accent-dark) !important;
	color: #fff !important;
}

/* Formularz kontaktowy wbudowany w prawą kolumnę modala "Szczegóły" */
/* Telefon/e-mail wstrzykiwane przez filtr voxic_investment_contact_html
   (patrz Voxic_Shortcode::render_details_modal() — integracja, np. Westy,
   dokłada tu swój HTML). Styl celowo prosty/neutralny — ta wtyczka nie wie z
   góry, jaką dokładnie treść dostanie. */
/* Klient: "wieksze ma byc pod tym formularz a u dolu tel i email... ma byc to
   wieksze w ramce pod formularzem" — własna ramka (tło+border, jak
   .voxic-modal-facts/.voxic-modal-media), POD formularzem (PHP już drukuje
   .voxic-contact-form-slot przed $contact_extra, więc kolejność w DOM-ie się
   zgadza — tu tylko wygląd). */
.voxic-contact-info {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 18px;
	padding: 18px 20px;
	background: var(--voxic-bg-soft) !important;
	border: 1px solid var(--voxic-border);
	border-radius: 12px;
}
.voxic-contact-info a,
.voxic-contact-info .voxic-contact-email-reveal {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--voxic-ink) !important;
	text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 15.5px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	text-align: left;
}
.voxic-contact-info a:hover,
.voxic-contact-info .voxic-contact-email-reveal:hover {
	color: var(--voxic-accent) !important;
}
/* Ikona zawsze w akcentowym kolorze (currentColor na svg[stroke], ustawiony
   TU, nie dziedziczony z tekstu) — niezależnie od hovera samego tekstu obok. */
.voxic-contact-info svg {
	flex: 0 0 auto;
	color: var(--voxic-accent) !important;
}
.voxic-contact-form-slot .voxic-elementor-form {
	display: block !important;
}

/* Dark theme — accent/accent-dark are intentionally NOT overridden here so that
   the admin's custom colour (set via wp_add_inline_style on .voxic-wrap) always wins
   in both themes. */
.voxic-wrap[data-theme="dark"] {
	--voxic-ink: #ede8e2;
	--voxic-muted: #6a6460;
	--voxic-text: #9a9288;
	--voxic-border: #2e2926;
	--voxic-bg-soft: #211e1a;
}
.voxic-wrap[data-theme="dark"] .voxic-field select,
.voxic-wrap[data-theme="dark"] .voxic-cs-trigger,
.voxic-wrap[data-theme="dark"] .voxic-cs-dropdown,
.voxic-wrap[data-theme="dark"] .voxic-clear-filters,
.voxic-wrap[data-theme="dark"] .voxic-chip,
.voxic-wrap[data-theme="dark"] .voxic-btn,
.voxic-wrap[data-theme="dark"] .voxic-page-btn,
.voxic-wrap[data-theme="dark"] .voxic-page-size select,
.voxic-wrap[data-theme="dark"] .voxic-modal-dialog,
.voxic-wrap[data-theme="dark"] .voxic-modal-facts,
.voxic-wrap[data-theme="dark"] .voxic-action-card {
	background: #1a1714 !important;
}
.voxic-wrap[data-theme="dark"] .voxic-cs-checkbox {
	background: #1a1714 !important;
	border-color: #4a4238;
}
.voxic-wrap[data-theme="dark"] .voxic-row:not(.voxic-head):hover {
	background: var(--voxic-bg-soft) !important;
}
.voxic-wrap[data-theme="dark"] .voxic-row {
	border-bottom-color: #2a2520;
}
.voxic-wrap[data-theme="dark"] .voxic-pagination {
	border-top-color: #2a2520;
}
.voxic-wrap[data-theme="dark"] .voxic-fact-row,
.voxic-wrap[data-theme="dark"] .voxic-history-item {
	border-bottom-color: #2a2520;
}
.voxic-wrap[data-theme="dark"] .voxic-field select,
.voxic-wrap[data-theme="dark"] .voxic-page-size select,
.voxic-wrap[data-theme="dark"] .voxic-chip {
	border-color: #3a342e;
}
.voxic-wrap[data-theme="dark"] .voxic-cs-trigger,
.voxic-wrap[data-theme="dark"] .voxic-clear-filters,
.voxic-wrap[data-theme="dark"] .voxic-btn,
.voxic-wrap[data-theme="dark"] .voxic-page-btn,
.voxic-wrap[data-theme="dark"] .voxic-action-card {
	border-color: #3a342e;
}
.voxic-wrap[data-theme="dark"] .voxic-cs-trigger:hover {
	border-color: #5a524a;
}
.voxic-wrap[data-theme="dark"] .voxic-switch-track {
	background: #4a4238 !important;
}
.voxic-wrap[data-theme="dark"] .voxic-switch-thumb {
	background: #c8bfb3 !important;
}
.voxic-wrap[data-theme="dark"] .voxic-modal-close:hover {
	background: #2e2926 !important;
}
.voxic-wrap[data-theme="dark"] .voxic-chip-remove:hover {
	background: #2e2926 !important;
	color: var(--voxic-accent) !important;
}
.voxic-wrap[data-theme="dark"] .voxic-skeleton-row {
	background: linear-gradient(90deg, #2a2520 25%, #342e28 37%, #2a2520 63%) !important;
}

/* Mobile */
@media (max-width: 860px) {
	.voxic-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		min-width: 0;
	}
	.voxic-toolbar-bar {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		width: 100%;
		min-width: 0;
	}
	.voxic-toolbar-toggle {
		flex: 0 0 auto;
	}
	.voxic-toolbar-chevron {
		display: block;
		transition: transform 0.2s ease;
	}
	.voxic-toolbar.voxic-filters-open .voxic-toolbar-chevron {
		transform: rotate(180deg);
	}
	.voxic-toggle-bar-wrap .voxic-switch-text {
		display: block;
	}
	.voxic-clear-filters {
		flex: 0 0 auto;
	}
	.voxic-toolbar-fields {
		display: none;
		flex-wrap: wrap;
		width: 100%;
	}
	.voxic-toolbar-fields .voxic-field {
		flex: 1 1 100%;
	}
	.voxic-toolbar.voxic-filters-open .voxic-toolbar-fields {
		display: flex;
	}
	.voxic-switch-label {
		height: auto;
	}
	.voxic-show-results {
		display: block;
		width: 100%;
		border: none;
		background: var(--voxic-accent) !important;
		color: #fff !important;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		font-size: 14px;
		padding: 14px;
		border-radius: 8px;
		cursor: pointer;
	}
	.voxic-show-results:hover {
		background: var(--voxic-accent-dark) !important;
	}

	.voxic-row.voxic-head {
		display: none;
	}
	.voxic-row:not(.voxic-head) {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas:
			"lokal"
			"extras"
			"stats"
			"price"
			"actions";
		gap: 0;
		padding: 16px;
	}
	.voxic-row:not(.voxic-head) .voxic-cell {
		padding: 0;
	}
	/* Header row */
	.voxic-cell-lokal {
		grid-area: lokal;
		align-self: center;
		padding-bottom: 12px !important;
	}
	/* Status/Balkon/Taras/Ogródek na mobile — małe pigułki pod linią lokalu
	   (renderowane TYLKO gdy jest co pokazać, patrz rowHtml()), NIE te same
	   desktopowe kolumny tabeli (te są niżej chowane razem z Pokoje/
	   Powierzchnia/Piętro). */
	.voxic-cell-extras {
		grid-area: extras;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding-bottom: 12px !important;
	}
	.voxic-pill-tag {
		display: inline-flex;
		align-items: center;
		font-family: 'Montserrat', sans-serif;
		font-weight: 600;
		font-size: 11px;
		letter-spacing: 0.3px;
		padding: 5px 10px;
		border-radius: 999px;
		background: var(--voxic-bg-soft) !important;
		color: var(--voxic-text) !important;
	}
	/* Inline code + building on mobile */
	.voxic-lokal-line {
		flex-direction: row;
		align-items: baseline;
		gap: 6px;
	}
	.voxic-cell-code {
		font-size: 14px;
	}
	.voxic-cell-building {
		font-size: 14px;
		color: var(--voxic-text) !important;
	}
	/* Hide individual table cells on mobile — zastąpione zwartymi "stat boxami"
	   niżej (Pokoje/Powierzchnia/Piętro/Cena za m²), sama Cena za m² dostaje
	   TAKŻE swój stat-box (patrz rowHtml() w vox-units.js), więc jej desktopowa
	   kolumna tabeli tu nie jest potrzebna. */
	.voxic-cell-rooms,
	.voxic-cell-area,
	.voxic-cell-floor,
	.voxic-cell-pricemkw,
	.voxic-cell-status,
	.voxic-cell-balkon,
	.voxic-cell-taras,
	.voxic-cell-ogrod {
		display: none !important;
	}
	.voxic-cell-pricecol {
		display: none !important;
	}
	/* Stats boxes — 4 kolumny (Pokoje/Powierzchnia/Piętro/Cena za m²), gap
	   wystarczająco mały żeby zmieściły się bez zawijania na typowych telefonach. */
	.voxic-mobile-stats {
		grid-area: stats;
		display: flex;
		gap: 6px;
		padding: 10px 0;
		border-top: 1px solid #f4efe8;
		border-bottom: 1px solid #f4efe8;
	}
	.voxic-stat-box {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		background: var(--voxic-bg-soft) !important;
		border-radius: 8px;
		padding: 8px 4px;
	}
	.voxic-stat-label {
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 9px;
		letter-spacing: 0.8px;
		color: var(--voxic-muted) !important;
		text-transform: uppercase;
	}
	.voxic-stat-val {
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 12.5px;
		text-align: center;
		color: var(--voxic-ink) !important;
	}
	/* Price row */
	.voxic-cell-pricecol.voxic-cell-price {
		display: flex !important;
		grid-area: price;
		justify-content: flex-end;
		align-items: center;
		padding: 10px 0 8px !important;
	}
	/* Actions row */
	.voxic-row:not(.voxic-head) .voxic-actions-cell {
		grid-area: actions;
		justify-content: stretch;
		padding-top: 10px !important;
		gap: 10px;
	}
	.voxic-row:not(.voxic-head) .voxic-actions-cell .voxic-btn {
		flex: 1 1 0;
		text-align: center;
		padding: 12px 10px;
	}

	.voxic-modal-scroll {
		padding: 0 22px 8px;
	}
	.voxic-modal-topbar {
		padding: 22px 22px 14px;
	}
	.voxic-modal-dialog-details {
		max-width: 100%;
		max-height: 94vh;
	}
	/* Rzut nad danymi zamiast obok — klient poprosił o dwukolumnowy podział
	   wyraźnie jako układ desktopowy ("moze byc modal podzielony na dwie
	   czesci"); na wąskim ekranie kolumny by się nie zmieściły obok siebie. */
	.voxic-modal-split {
		flex-direction: column;
		gap: 20px;
	}
	.voxic-modal-left {
		flex: 0 0 auto;
		max-width: 100%;
	}
	.voxic-modal-media {
		min-height: 220px;
	}
	.voxic-page-nav {
		gap: 10px;
	}
	.voxic-page-info {
		font-size: 12px;
	}
	/* Pełnoszerokościowy nagłówek modala — na wąskim ekranie mniej odstępów,
	   mniejsze fonty, żeby tytuł+badge się zmieściły bez łamania w brzydkim
	   miejscu (padding-right pod przycisk zamknięcia zostaje bez zmian). */
	.voxic-modal-topbar {
		padding-bottom: 16px;
		margin-bottom: 18px;
	}
	.voxic-modal-title {
		font-size: 20px;
	}
	.voxic-modal-status .voxic-badge {
		font-size: 12px;
		padding: 7px 14px;
	}
	.voxic-modal-highlights {
		gap: 8px 16px;
		margin-top: 12px;
	}
	.voxic-modal-highlights span {
		font-size: 13px;
	}
}


/* Przynależne (miejsca postojowe/garaże) w karcie lokalu */
.voxic-modal-extras {
	margin-top: 14px;
	background: #fff;
	border: 1px solid var(--voxic-border);
	border-radius: 14px;
	padding: 14px 18px;
	box-shadow: 0 2px 10px rgba(20, 14, 8, 0.05);
}
.voxic-wrap[data-theme="dark"] .voxic-modal-extras { background: #1a1714; }
.voxic-extras-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--voxic-ink);
	margin-bottom: 6px;
}
.voxic-extra-item { border-top: 1px solid #f4efe8; padding: 10px 0; }
.voxic-extra-item:first-of-type { border-top: none; }
.voxic-extra-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.voxic-extra-name { font-weight: 700; color: var(--voxic-ink); }
.voxic-extra-type { color: var(--voxic-muted); font-size: 13px; flex: 1 1 auto; }
.voxic-extra-price { font-weight: 700; color: var(--voxic-ink); white-space: nowrap; }
.voxic-extra-hist { margin: 0; padding: 0; background: none; border: none; }
.voxic-extra-history { margin-top: 8px; }


/* Preloader: widoczny, dopóki skrypt nie zbuduje pierwszej listy lokali */
.voxic-loader { display: none; padding: 8px 0 4px; }
.voxic-loading .voxic-loader { display: block; }
.voxic-loading .voxic-body,
.voxic-loading .voxic-empty,
.voxic-loading .voxic-pagination,
.voxic-loading .voxic-results-heading,
.voxic-loading .voxic-head { display: none !important; }
.voxic-loader-head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	color: var(--voxic-ink);
	padding: 6px 2px 14px;
}
.voxic-loader .voxic-skeleton-row { height: 56px; }
.voxic-spinner {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2.5px solid var(--voxic-border);
	border-top-color: var(--voxic-accent);
	animation: voxic-spin 0.8s linear infinite;
}
@keyframes voxic-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.voxic-spinner, .voxic-skeleton-row { animation: none; }
}

/* display z reguł powyżej zawsze bije [hidden] — bez tego przycisk PDF
   pokazywał się bez pliku, z linkiem "#". */
.voxic-action-card[hidden],
.voxic-lightbox-download[hidden] { display: none !important; }

/* Przełącznik rzutów (lokal z kilkoma rzutami) */
.voxic-plan-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.voxic-plan-tabs[hidden] { display: none !important; }
.voxic-plan-tab {
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid var(--voxic-border);
	background: #fff !important;
	color: var(--voxic-ink) !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}
.voxic-plan-tab.is-active {
	background: var(--voxic-accent) !important;
	border-color: var(--voxic-accent);
	color: #fff !important;
}