/**
 * NFHotel Apartments — filter sidebar.
 *
 * Values extracted from the Oxygen 4 filter-column export (template 2918 /
 * 996 / 1011) plus the site's global rules for the classes that are only
 * defined in universal.css (.search__name, .search__checkbox, .search__select,
 * .panel__inner_day, .nf-title) and the two Code Blocks whose CSS lives in
 * `code-css` (price slider, sort select) and is therefore PAGE-LOCAL — it does
 * not exist anywhere our element is used.
 *
 * IMPORTANT — why this file no longer reuses the production class names:
 * Oxygen emits display/flex-direction/align-items/justify-content through
 *     .foo:not(.ct-section):not(.oxy-easy-posts), ...
 * which has specificity 0,3,0. Any `.nfap--bar .foo` override is 0,2,0 and
 * always loses, so the bar was rendering as the hero's horizontal row (and
 * `display:none` below 768px). The live filter page wins that fight only
 * because it overrides at the element-id level (#div_block-30-996 → 1,0,0),
 * which a plugin-rendered element cannot reproduce. So the markup now uses its
 * own `nfap-f__*` namespace and carries every style itself.
 *
 * Oxygen breakpoints: page-width <=1200, tablet <=991, phone-landscape <=767,
 * phone-portrait <=479.
 */

.nfap--bar {
	--bar-gold: #d7a97d;                        /* var(--main-color) */
	--bar-gold-line: rgba(215, 169, 125, 0.49); /* .search__setting border */
	--bar-mauve: #af9797;                       /* .nf-title */
	--bar-text: #404040;
	--bar-bar-text: rgba(40, 40, 40, 0.77);     /* .reservation__bar color */
	--bar-dd-bg: rgba(46, 48, 65, 0.95);        /* dropdown panel */
	--bar-dd-hover: rgba(215, 169, 125, 0.54);
	--bar-divider: #eeeeee;                     /* .search__filters-divider */
	--bar-select-line: #c1ae81;                 /* .search__select border */
	--bar-track: #e5e7eb;                       /* .rangeslider track */
	--bar-sticky-top: 20px;                     /* odstep panelu od gory przy przyklejeniu */
	/* Ta reguła siedzi na .nfap--bar, czyli na tym samym elemencie co .nfap,
	   a nfap-bar.css ładuje się później — więc wygrywała z krojem ustawionym
	   w nfap.css i cały kafelek zostawał na Lato mimo zmiany tam. */
	font-family: 'Inter', 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--bar-text);
}

/* Two-column shell: filter sidebar + results. */
.nfap--bar .nfap__layout { display: grid; grid-template-columns: 314px 1fr; gap: 40px; align-items: start; }
/* Panel filtrow jedzie z przewijaniem. `align-items: start` na siatce jest
   tu warunkiem koniecznym — bez niego kolumna rozciaga sie na cala wysokosc
   wiersza i sticky nie ma sie po czym przesuwac. Bez `overflow` na tym
   kontenerze, zeby rozwijane panele (kalendarz, goscie, lokalizacje) mogly
   wychodzic poza jego obrys zamiast byc przycinane. */
/* Wymiary kolumny jak #div_block-417-996 na wonderhome.eu (wysokosc ekranu minus
   naglowek, prawa krawedz #eee, wlasny scrollbar .minimal-scrollbar). Wczesniej te
   deklaracje siedzialy w arkuszu Oxygena "filter" na staggingu - przeniesione tu,
   zeby wtyczka byla samowystarczalna przy przenoszeniu na inna instalacje. */
.nfap--bar .nfap__filters {
	position: -webkit-sticky; position: sticky;
	top: 100px;
	height: calc(100vh - 80px - 40px);
	min-width: 320px;
	border-right: 1px solid #eee;
	overflow-y: auto;
}
/* Panel filtrów na wonderhome.eu jest w całości w Lato (krój globalny
   Oxygena) — Inter dotyczy tylko kafelków z silnika rezerwacji. Bez tej
   reguły cały panel dziedziczył Inter z .nfap--bar. */
.nfap-f { display: block; width: 100%; font-family: 'Lato', sans-serif; }
.nfap--bar [hidden] { display: none !important; }

/* ===================== TOP BAR (.reservation__bar) =====================
   The class is a horizontal hero bar; the filter template overrides it on the
   element to a padded vertical stack. That override is what we reproduce. */
.nfap-f__bar {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 16px;
	margin-top: 8px;
	color: var(--bar-bar-text);
}

/* ---- Pill: city / location / theme (.panel__date + .search__setting) ---- */
.nfap-f__pill {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	background: transparent;
	border: 1px solid var(--bar-gold-line);
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
	transition: all .3s;
}
.nfap-f__bar .nfap-f__pill { margin-top: 0; }
/* Location pill is inset to 90% and centred (element 273). */
/* Pełna szerokość sekcji, tak jak pole wyszukiwania nad nią. Ograniczenie
   do 90% z wyśrodkowaniem dawało inną szerokość i inne krawędzie. */
.nfap-f__pill--location { width: 100%; }
.nfap-f__pill-inner {
	display: flex; flex-direction: row; align-items: center; justify-content: center;
	flex-grow: 1; position: relative;
	padding: 0 10px;
	text-align: center;
}
/* .panel__inner_day is #efefef, but every instance sets color:inherit. */
.nfap-f__pill-label {
	font-family: 'Lato', sans-serif;
	font-size: 18px; font-weight: 600; line-height: 40px;
	color: inherit;
}

/* ---- Dropdowns (.city-dropdown--filters) ---- */
.nfap-f__dropdown {
	position: absolute; top: calc(100% + 1px); left: -1px; width: 100%;
	z-index: 3;
	box-sizing: content-box;
	border: 1px solid #fff; border-top-width: 0;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: all .3s;
}
/* Open state. `is-open` is set by JS on click/tap — hover alone would make the
   dropdowns unusable on Android and iOS, where there is no hover. */
.nfap-f__pill.is-open .nfap-f__dropdown,
.nfap-f__pill:focus-within .nfap-f__dropdown { opacity: 1; visibility: visible; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
	.nfap-f__pill:hover .nfap-f__dropdown { opacity: 1; visibility: visible; pointer-events: auto; }
}
.nfap-f__dropdown-inner {
	position: relative;
	width: 100%; margin-top: 10px;
	background: var(--bar-dd-bg);
}
/* Caret. The export puts it at top:0 (i.e. hidden inside the panel); pulled
   out by its own height so it actually points at the pill. */
.nfap-f__dropdown-inner::before {
	content: ""; position: absolute; top: -10px; right: 50%;
	transform: translateX(50%);
	width: 0; height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid var(--bar-dd-bg);
}
.nfap-f__option {
	width: 100%; box-sizing: border-box;
	padding: 10px 16px;
	color: #fff; font-size: 14px; font-weight: 600; text-align: left;
	cursor: pointer; transition: all .3s;
}
.nfap-f__option:hover { background: var(--bar-dd-hover); }
.nfap-f__locations { max-height: 250px; overflow: hidden; overflow-y: auto; }

/* ---- Labelled rows: dates / guests ---- */
.nfap-f__row {
	display: flex; flex-direction: row; align-items: center;
	width: 100%; margin-top: 12px;
}
.nfap-f__row--dates { cursor: pointer; }
.nfap-f__row-body { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.nfap-f__label {
	font-family: 'Lato', sans-serif;
	font-size: 12px; font-weight: 600; color: var(--bar-bar-text); /* jak .nf-title w panelu na produkcji */
}

.nfap-f__dates { display: flex; flex-direction: row; align-items: center; }
.nfap-f__date {
	display: flex; flex-direction: row; align-items: center; justify-content: center;
	text-align: center; cursor: pointer;
}
.nfap-f__date-inner {
	display: flex; flex-direction: row; align-items: center;
	font-family: 'Lato', sans-serif; font-size: 18px;
}
.nfap-f__date-day   { font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 600; line-height: 1; margin-right: 5px; }
.nfap-f__date-month { font-family: 'Lato', sans-serif; font-size: 14px; }
.nfap-f__date-sep   { padding: 0 8px; font-size: 24px; line-height: 1; }

/* Trailing icon (.calendar-icon): gold, 40px, pushed to the right edge. */
.nfap-f__icon { margin-left: auto; display: inline-flex; color: var(--bar-gold); }
.nfap-f__icon svg { width: 30px; height: 30px; } /* produkcja: 30 × 30 */

/* ---- Guests stepper ---- */
.nfap-f__stepper { display: flex; flex-direction: row; align-items: center; }
.nfap-f__arrow {
	box-sizing: content-box;
	width: 10px; height: 10px; padding: 5px; /* koło 22 px jak na produkcji */
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid currentColor; border-radius: 50%;
	color: var(--bar-gold);
	font-size: 10px; line-height: 1;
	background: transparent;
	cursor: pointer; -webkit-user-select: none; user-select: none;
	transition: all .3s ease-in-out;
}
.nfap-f__arrow svg { display: block; width: 10px; height: 10px; }
.nfap-f__arrow:hover { color: #5b5a5e; }
.nfap-f__guests { padding: 0 15px; font-size: 16px; font-weight: 600; }
.nfap-f__guests input {
	width: 24px; text-align: center; border: 0; background: transparent;
	font: inherit; color: inherit; -moz-appearance: textfield;
}
.nfap-f__guests input::-webkit-outer-spin-button,
.nfap-f__guests input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- Price slider ----
   Ported from the Code Block's `code-css`; that CSS is page-local on the live
   template, so nothing styles this markup anywhere else. */
.nfap-f__slider { width: 100%; margin-top: 12px; }
.nfap-f__slider > * + * { margin-top: 1rem; }
.nfap-f__range {
	position: relative; width: 100%; height: 10px;
	background: var(--bar-track); border-radius: 5px;
}
.nfap-f__range::before {
	content: ''; position: absolute; left: 0; z-index: 1;
	width: var(--nfap-price-fill, 100%); height: 100%;
	background: var(--slider-color, var(--bar-gold)); border-radius: 5px;
}
/* The source sets pointer-events:none here (a leftover from a dual-range
   slider) and re-enables them on the thumb. With a single input that only
   breaks tap-on-track, and pseudo-element pointer-events are unreliable in
   iOS Safari — so the input stays interactive as a whole. */
.nfap-f__range-input {
	position: absolute; left: 0; width: 100%; height: 10px; margin: 0;
	background: transparent; z-index: 2;
	-webkit-appearance: none; appearance: none;
}
.nfap-f__range-input::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	position: relative; z-index: 3;
	width: 20px; height: 20px; border: 0; border-radius: 50%;
	background: var(--bar-gold); cursor: pointer;
}
.nfap-f__range-input::-moz-range-thumb {
	width: 20px; height: 20px; border: 0; border-radius: 50%;
	background: var(--bar-gold); cursor: pointer;
}
.nfap-f__range-input::-moz-range-track { background: transparent; }
.nfap-f__price-display {
	display: flex; align-items: center; gap: .25rem;
	font-size: .875rem; font-weight: bold; color: #4a5568;
}
.nfap-f__price-value { color: var(--bar-gold); }
.nfap-f__price-hint { display: block; margin-top: 4px; font-size: 11px; color: var(--bar-mauve); }
.nfap-f__slider.is-disabled { opacity: .55; }

/* ---- Sort select (also from a Code Block's `code-css`) ---- */
.nfap-f__sort { width: 100%; margin-top: 12px; }
.nfap-f__select-sort {
	width: 100%; height: 40px; line-height: 40px; margin-top: 10px;
	border: 1px solid var(--bar-gold-line); border-radius: 5px;
	/* Bez wlasnego tla - produkcja (.search__name--sort) tez go nie deklaruje, wiec select
	   ma natywne tlo przegladarki: biale w Chrome na Windows, #efefef na Linuksie.
	   Wpisane wczesniej #efefef pochodzilo z pomiaru na Linuksie i na Windows dawalo szary kafel. */
	text-align: center; text-align-last: center;
	font-size: 18px; font-family: 'Lato', sans-serif; color: var(--bar-text);
	cursor: pointer;
}

/* ---- Checkboxes (.search__checkbox, ported from universal.css) ---- */
.nfap-f__check {
	display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
	width: 100%; margin-top: 6px;
}
.nfap-f__check-label {
	display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
	width: 100%; cursor: pointer;
}
.nfap-f__check input[type="checkbox"] {
	-webkit-appearance: none; appearance: none;
	margin: 0 12px 0 0; font: inherit; color: currentColor;
	width: 1.15em; height: 1.15em;
	border: .15em solid var(--bar-gold); border-radius: .15em;
	transform: translateY(-.075em);
	display: grid; place-content: center;
	background-color: transparent; cursor: pointer;
	transition: 100ms background-color ease-in-out;
}
.nfap-f__check input[type="checkbox"]::before {
	content: ""; width: .65em; height: .65em;
	-webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	transform: scale(0); transform-origin: bottom left;
	transition: 100ms transform ease-in-out;
	box-shadow: inset 1em 1em #fff; background-color: CanvasText;
}
.nfap-f__check input[type="checkbox"]:checked { background-color: var(--bar-gold); }
.nfap-f__check input[type="checkbox"]:checked::before { transform: scale(1); }
.nfap-f__check input[type="checkbox"]:disabled { border-color: #c2c2c2; }
.nfap-f__check--favourites { margin-top: 18px; }
/* Bez zapisanych ulubionych checkbox jest nieaktywny i szary (jak na produkcji:
   input:disabled ma tam ramkę #c2c2c2). Aktywny ma zwykłą złotą ramkę. */
.nfap-f__check-label.is-disabled { cursor: not-allowed; }
.nfap-f__check-label.is-disabled input[type="checkbox"] { cursor: not-allowed; }

/* ---- Sections / dividers / titles ---- */
.nfap-f__divider {
	/* Wyrównana do treści sekcji (16 px z obu stron), jak na produkcji. */
	width: auto; height: 1px; min-height: 1px; max-height: 1px;
	margin: 16px; background: var(--bar-divider);
}
.nfap-f__section { width: 100%; padding: 16px; }
/* Lokalizacja stoi 16 px pod wyszukiwarką i 16 px nad linią, nie 32. */
.nfap-f__section--location { padding-top: 0; padding-bottom: 0; }
.nfap-f__title { font-weight: 600; }

/* ---- Name / street search (.search__name + its Code Block background) ----
   The export points background-image at an uploaded PNG on wonderhome.eu;
   inlined here as an equivalent SVG so the element has no external dependency. */
.nfap-f__search {
	width: 100%; height: 40px; line-height: 40px; margin-top: 10px;
	border: 1px solid var(--bar-gold-line); border-radius: 5px;
	text-align: center; font-size: 18px; font-family: 'Lato', sans-serif; color: var(--bar-text);
	background-color: #fff;
	background-image: url('https://wonderhome.eu/wp-content/uploads/2024/06/search.png'); /* ta sama lupa PNG co na produkcji */
	background-repeat: no-repeat;
	background-position: 8px 50%;
	background-size: 20px;
}
.nfap-f__search:focus { border: 1px solid var(--bar-gold); outline: unset; }
.nfap-f__search::placeholder {
	font-size: 18px; line-height: 40px; font-weight: 600;
	font-family: 'Lato', sans-serif; color: var(--bar-text);
	transition: .3s all;
}
.nfap-f__search:focus::placeholder { color: transparent; }

/* ---- Room-layout selects (.search__select-label / .search__select) ---- */
.nfap-f__select-label { display: block; width: 100%; margin-top: 6px; cursor: pointer; }
.nfap-f__select {
	width: 100%; padding: 6px; margin-top: 4px;
	background-color: transparent;
	border: 1px solid var(--bar-select-line); border-radius: 5px;
	font: inherit; color: inherit;
}

/* ---- Toggles ("Pokaż więcej" / "Układ pokoi i łóżek") ---- */
.nfap-f__toggle {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 6px; font-size: 12px;
	cursor: pointer; -webkit-user-select: none; user-select: none; color: var(--bar-text);
}
/* „Pokaż więcej" wyśrodkowane pod listą, jak na produkcji. */
.nfap-f__toggle:not(.nfap-f__toggle--layout) { display: flex; justify-content: center; width: 100%; margin-top: 12px; }
.nfap-f__toggle--layout { margin-top: 8px; font-size: inherit; color: var(--bar-select-line); }
.nfap-f__toggle-icon { display: inline-flex; color: var(--bar-select-line); transition: transform .3s; }
.nfap-f__toggle-icon svg { display: block; width: 16px; height: 16px; }
.nfap-f__toggle--layout.is-expanded .nfap-f__toggle-icon { transform: rotate(45deg); }
.nfap-f__toggle--layout .nfap-f__title { color: var(--bar-text); }
/* Swapped by nfap-filter.js via the `hidden` attribute. */
.nfap-f__toggle-more,
.nfap-f__toggle-less { display: inline-block; }
.nfap-f__more { width: 100%; }

/* ===================== MOBILE DRAWER =====================
   The live site puts this whole column inside an `oxy-off-canvas`
   (side: left, type: slide, width 480, white, padding-bottom 15, closes on
   backdrop click and Esc) triggered from a nav icon (.search__mobile), with a
   sticky `.floating-search` bar on top carrying the logo and the
   "Cofnij" / "Zastosuj" buttons. Reproduced here in CSS + a few lines of JS,
   since the element cannot host an Oxygen off-canvas of its own.
   Desktop: none of it exists. */
.nfap-m__trigger,
.nfap__backdrop,
.nfap-m__bar { display: none; }

/* Próg jak na produkcji: #div_block-417-996 (kolumna filtrów) ma display:none
   już przy max-width 1200px i od tej szerokości działa off-canvas. */
@media (max-width: 1200px) {
	.nfap--bar .nfap__layout { grid-template-columns: 1fr; gap: 24px; }
	/* Jedna kolumna — nie ma czego przyklejac. Regula .nfap--drawer nizej
	   ma ta sama specyficznosc i stoi pozniej, wiec dla szuflady wygrywa
	   jej position: fixed. */
	.nfap--bar .nfap__filters { position: static; top: auto; }

	/* ---- Trigger ---- */
	.nfap--drawer .nfap-m__trigger {
		display: flex; align-items: center; justify-content: center;
		width: 100%; margin-bottom: 16px;
		padding: 12px 22px;
		border: 0; border-radius: 0;
		background: var(--bar-gold); color: #fff;
		font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 1px;
		cursor: pointer;
		transition: color .3s ease-in-out, background .3s ease-in-out;
	}
	.nfap--drawer .nfap-m__trigger:hover { background: #232323; }

	/* ---- Drawer ---- */
	/* height/min-width/border zerowane, bo arkusz Oxygena „filter” nadaje
	   kolumnie height: calc(100vh - 120px), min-width 320 i ramkę we wszystkich
	   szerokościach — szuflada kończyła się wtedy 120 px nad dołem ekranu. */
	.nfap--drawer .nfap__filters {
		position: fixed; top: 0; left: 0; bottom: 0; z-index: 10000;
		height: auto; min-width: 0; border-right: 0;
		width: 480px; max-width: 100%;
		padding: 0 0 15px;
		background: #fff;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform .3s ease, visibility .3s ease;
	}
	.nfap--drawer.is-filters-open .nfap__filters { transform: none; visibility: visible; }

	.nfap--drawer .nfap__backdrop {
		display: block;
		position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;
		background: rgba(0, 0, 0, .4);
		opacity: 0; visibility: hidden;
		transition: opacity .3s ease, visibility .3s ease;
	}
	.nfap--drawer.is-filters-open .nfap__backdrop { opacity: 1; visibility: visible; }

	/* ---- Sticky header inside the drawer (.floating-search) ---- */
	.nfap--drawer .nfap-m__bar {
		position: -webkit-sticky; position: sticky; top: 0; z-index: 2;
		display: flex; flex-direction: row; align-items: center; justify-content: space-between;
		width: 100%;
		padding: 5px 20px;
		background: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, .2);
		text-align: right;
	}
	.nfap-m__logo { display: block; width: 100%; max-width: 100px; height: auto; margin-right: auto; }
	.nfap--drawer .nfap-m__bar { font-family: 'Lato', sans-serif; }
	.nfap-m__btn {
		position: relative; z-index: 1; overflow: hidden;
		display: flex; flex-direction: row; align-items: center; justify-content: center;
		padding: 12px 22px;
		border: 0; border-radius: 0;
		background: var(--bar-gold); color: #fff;
		font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 1px; line-height: 1.6;
		cursor: pointer;
		transition: color .3s ease-in-out, background .3s ease-in-out;
	}
	/* Tylko przy myszy — na dotyku :hover zostaje „przyklejony” po tapnięciu
	   i „Cofnij” robił się czarny zaraz po otwarciu szuflady. */
	@media (hover: hover) and (pointer: fine) {
		.nfap-m__btn:hover { background: #232323; }
	}
	/* Oba przyciski złote, jak .floating-search .btn na produkcji. */
	.nfap-m__btn--back { margin-right: 5px; }
}

/* Page must not scroll behind the open drawer. iOS Safari ignores
   `overflow:hidden` on body, so the position/top pair (set by JS, which also
   restores the scroll offset on close) is what actually holds there. */
body.nfap-filters-open {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

@media (max-width: 479px) {
	.nfap-f__date-inner { font-size: 15px; }
	.nfap-f__pill-label { font-size: 16px; }
	.nfap-f__pill--theme .nfap-f__pill-label { font-size: 18px; } /* „Tematycznie” zostaje 18 px */
	/* Produkcja (<=480): .search__mobile .btn ma stałe 36 px wysokości. */
	.nfap-m__btn { flex-direction: column; justify-content: center; height: 36px; padding: 0 20px; font-size: 12px; line-height: 1.6; }
}

/* Pigulka miasta na telefonie: produkcja ma na .reservation__panel (<=767) biala
   ramke 1px z boku i od dolu (niewidoczna, ale dodaje 1px wysokosci: 43 vs 42). */
@media (max-width: 767px) {
	.nfap-f__pill-inner { border: 1px solid #fff; border-top: 0; }
}