/* -------------------------------------------------------------------------
 * Namai lentelė
 *
 * !important naudojamas ten, kur Elementor / temos stiliai perrašo mūsų
 * taisykles (tipografija, spalvos, mygtukai, nuorodos, input'ai).
 * ---------------------------------------------------------------------- */

.namai-lentele {
	--namai-green: rgba(85, 100, 85, 1);
	--namai-dark: rgba(36, 49, 36, 1);
	--namai-sand: rgba(216, 195, 163, 1);
	--namai-accent: rgba(52, 199, 89, 1);
	--namai-line: rgba(216, 195, 163, 1);
	--namai-head-bg: rgba(232, 236, 231, 1);
	/* Eilutės hover — šviesesnis antraštės spalvos variantas. */
	--namai-hover-bg: rgba(244, 246, 243, 1);
	--namai-laisvas: rgba(52, 199, 89, 1);
	--namai-rezervuotas: rgba(255, 141, 40, 1);
	--namai-parduotas: rgba(255, 56, 60, 1);
	--namai-radius: 14px;

	/* Stulpelių tinklelis — vienodas antraštėje ir eilutėse. */
	--namai-cols: 1.1fr 1fr 1fr 1fr 1fr 1.1fr 40px;

	max-width: 1180px;
	margin: 0 auto;
	color: var(--namai-green);
	box-sizing: border-box;
}

.namai-lentele *,
.namai-lentele *::before,
.namai-lentele *::after {
	box-sizing: inherit;
}

/*
 * Preloader. Pagrindiniai stiliai spausdinami inline (žr. critical_css() PHP
 * faile), nes turi veikti dar prieš atsiunčiant šį failą. Čia — tik tai, kas
 * gali palaukti.
 */
.namai-preloader {
	border-radius: var(--namai-radius);
}

/* --- Antraštė ---------------------------------------------------------- */

.namai-lentele .namai-head__title {
	margin: 0 0 12px !important;
	padding: 0 !important;
	color: var(--namai-green) !important;
	font-family: "Ubuntu Sans", sans-serif !important;
	font-weight: 500 !important;
	font-size: 74px !important;
	line-height: 110% !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.namai-lentele .namai-head__subtitle {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--namai-green) !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 300 !important;
	font-size: 18px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
}

/* --- Filtrai ----------------------------------------------------------- */

.namai-filters {
	display: grid;
	grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
	gap: 28px;
	align-items: end;
	margin: 46px 0 40px;
}

/*
 * Filtrų skleidimo mygtukas — rodomas tik mobiliame (žr. media query).
 * Tie patys stiliai kaip "Filtruoti": smėlio fonas, 0 radius, Outfit 400/18.
 */
.namai-lentele .namai-filters-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 28px 0 24px !important;
	background-color: var(--namai-sand) !important;
	border: 1px solid var(--namai-sand) !important;
	border-radius: 0 !important;
	box-shadow: 0 1px 2px 0 rgba(198, 228, 246, 0.05) !important;
	color: var(--namai-dark) !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	padding: 19px 24px !important;
	text-transform: none !important;
	cursor: pointer;
	transition: 0.3s all !important;
}

/*
 * Jokio hover / focus / atidaryto varianto — mygtukas visada smėlio spalvos.
 * Liesamuose ekranuose :hover po bakstelėjimo "užstringa", todėl mygtukas
 * liktų apverstas, kol paliesi kitą vietą. Būseną rodo tik rodyklė.
 */
.namai-filters-toggle__icon {
	flex: 0 0 auto;
	transition: transform 0.3s;
}

/* Atidarius — rodyklė aukštyn. */
.namai-filters-toggle[aria-expanded="true"] .namai-filters-toggle__icon {
	transform: rotate(180deg);
}

.namai-lentele .namai-filters-toggle:focus-visible {
	outline: 2px solid var(--namai-green);
	outline-offset: 2px;
}

.namai-lentele .namai-filter__label {
	display: block;
	margin: 0 0 14px !important;
	color: var(--namai-dark) !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
}

/* --- Slankiklis -------------------------------------------------------- */

.namai-slider {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Plotį fiksuoja JS (lockLabelWidths) — kitaip takelis kinta tempiant. */
.namai-lentele .namai-slider__value {
	flex: 0 0 auto;
	color: var(--namai-green) !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Reikšmės glaudžiasi prie takelio. */
.namai-slider__value--min {
	text-align: right;
}

.namai-slider__value--max {
	text-align: left;
}

.namai-slider__track {
	position: relative;
	flex: 1 1 auto;
	height: 18px;
	min-width: 70px;
}

/* Pilka linija — visas diapazonas. */
.namai-slider__track::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 3px;
	margin-top: -1.5px;
	background: #e8e4dc;
	border-radius: 2px;
}

/* Žalia linija — pasirinktas diapazonas; plotį valdo JS. */
.namai-slider__fill {
	position: absolute;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	background: var(--namai-accent);
	border-radius: 2px;
}

/* Du persidengiantys input'ai: fonas nematomas, matomos tik rankenėlės. */
.namai-lentele .namai-slider__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 18px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	-webkit-appearance: none !important;
	appearance: none !important;
	/* Praleidžia paspaudimus pro takelį — rankenėlės jį vėl įjungia. */
	pointer-events: none;
}

.namai-slider__input--min {
	z-index: 3;
}

.namai-slider__input--max {
	z-index: 4;
}

.namai-lentele .namai-slider__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	background: var(--namai-accent);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	pointer-events: auto;
}

.namai-lentele .namai-slider__input::-moz-range-thumb {
	width: 13px;
	height: 13px;
	background: var(--namai-accent);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	pointer-events: auto;
}

.namai-lentele .namai-slider__input::-moz-range-track {
	background: none;
	border: 0;
}

.namai-slider__input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.3);
}

.namai-slider__input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.3);
}

/* --- Žymimasis langelis ------------------------------------------------ */

.namai-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	user-select: none;
}

.namai-lentele .namai-check input {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.namai-check__box {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background: #fff;
	border: 1px solid #b9b9b2;
	border-radius: 2px;
	transition: background 0.15s, border-color 0.15s;
}

.namai-check input:checked + .namai-check__box {
	background: var(--namai-accent);
	border-color: var(--namai-accent);
}

.namai-check input:checked + .namai-check__box::after {
	content: "";
	position: absolute;
	top: 1px;
	left: 4px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.namai-check input:focus-visible + .namai-check__box {
	box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.3);
}

.namai-lentele .namai-check__text {
	color: var(--namai-green) !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
}

/* --- Filtravimo mygtukas ----------------------------------------------- */

.namai-filter--submit {
	align-self: stretch;
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

/* --- Atstatymo mygtukas ------------------------------------------------ */

.namai-lentele .namai-reset {
	background: none !important;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--namai-green) !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	padding: 19px 14px !important;
	text-decoration: underline !important;
	text-transform: none !important;
	text-underline-offset: 3px;
	white-space: nowrap;
	cursor: pointer;
	transition: 0.3s all !important;
}

.namai-lentele .namai-reset:hover,
.namai-lentele .namai-reset:focus {
	background: none !important;
	color: var(--namai-dark) !important;
	text-decoration: none !important;
}

.namai-lentele .namai-reset:focus-visible {
	outline: 2px solid var(--namai-green);
	outline-offset: 2px;
}

.namai-lentele .namai-submit {
	background-color: var(--namai-sand) !important;
	border: 1px solid var(--namai-sand) !important;
	border-radius: 0 !important;
	box-shadow: 0 1px 2px 0 rgba(198, 228, 246, 0.05) !important;
	color: var(--namai-dark) !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	padding: 19px 86px !important;
	text-transform: none !important;
	cursor: pointer;
	transition: 0.3s all !important;
}

.namai-lentele .namai-submit:hover,
.namai-lentele .namai-submit:focus {
	background-color: #fff !important;
	border-color: var(--namai-green) !important;
	color: var(--namai-green) !important;
}

.namai-lentele .namai-submit:focus-visible {
	outline: 2px solid var(--namai-green);
	outline-offset: 2px;
}

/* --- Lentelė ----------------------------------------------------------- */

.namai-table {
	position: relative;
	border: 1px solid var(--namai-line);
	border-radius: var(--namai-radius);
	overflow: hidden;
}

.namai-thead {
	display: grid;
	grid-template-columns: var(--namai-cols);
	align-items: center;
	background: var(--namai-head-bg);
	padding: 0 34px;
}

.namai-lentele .namai-th {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 22px 0;
	color: var(--namai-green) !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
	white-space: nowrap;
}

.namai-th--sort {
	cursor: pointer;
	user-select: none;
}

.namai-th__icon {
	flex: 0 0 auto;
	color: #9a9a92;
	transition: color 0.15s;
}

.namai-th--sort:hover .namai-th__icon {
	color: var(--namai-green);
}

/* Aktyvi rikiavimo kryptis — nenaudojama rodyklė prigesinama. */
.namai-th--asc .namai-th__icon path:first-child,
.namai-th--desc .namai-th__icon path:last-child {
	fill: var(--namai-green);
}

.namai-th--asc .namai-th__icon path:last-child,
.namai-th--desc .namai-th__icon path:first-child {
	fill: #d2d2ca;
}

/* --- Eilutės ----------------------------------------------------------- */

.namai-tbody {
	transition: opacity 0.15s;
}

.namai-tbody[aria-busy="true"] {
	opacity: 0.45;
}

.namai-lentele .namai-row {
	display: grid;
	grid-template-columns: var(--namai-cols);
	align-items: center;
	padding: 0 34px;
	border-top: 1px solid var(--namai-line);
	color: var(--namai-green) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background 0.12s;
}

.namai-row:first-child {
	border-top: 0;
}

.namai-lentele .namai-row:hover,
.namai-lentele .namai-row:focus {
	background: var(--namai-hover-bg);
	color: var(--namai-green) !important;
	text-decoration: none !important;
}

.namai-lentele .namai-cell {
	padding: 20px 0;
	color: var(--namai-green) !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
}

.namai-cell--arrow {
	display: flex;
	justify-content: flex-end;
	color: #b0b0a8;
	transition: transform 0.15s, color 0.15s;
}

.namai-row:hover .namai-cell--arrow {
	color: var(--namai-green);
	transform: translateX(3px);
}

/* --- Būsenos ženkliukai ------------------------------------------------ */

.namai-lentele .namai-badge {
	display: inline-block;
	min-width: 92px;
	padding: 6px 12px;
	border: 1px solid currentColor;
	border-radius: 0 !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 300 !important;
	font-size: 14px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	text-align: center;
	white-space: nowrap;
}

/* Slug'ai iš "busena" taksonomijos. */
.namai-lentele .namai-badge--laisvas,
.namai-lentele .namai-badge--laisva {
	color: var(--namai-laisvas) !important;
	border-color: var(--namai-laisvas) !important;
}

.namai-lentele .namai-badge--rezervuotas,
.namai-lentele .namai-badge--rezervuota {
	color: var(--namai-rezervuotas) !important;
	border-color: var(--namai-rezervuotas) !important;
}

.namai-lentele .namai-badge--parduotas,
.namai-lentele .namai-badge--parduota {
	color: var(--namai-parduotas) !important;
	border-color: var(--namai-parduotas) !important;
}

/* --- Blukimas ir "Rodyti visus" ---------------------------------------- */

/* Suskleista lentelė — aukštį nustato JS pagal eilučių limitą. */
.namai-table--collapsed .namai-tbody {
	overflow: hidden;
}

/*
 * Blukinamas visas elementas kartu su rėmeliu.
 *
 * Baltas perdangos sluoksnis (.namai-fade) užpiešia tik turinį — šoniniai ir
 * apatinis rėmeliai lieka ryškūs, todėl apačioje matosi kieta linija. mask
 * nuskaidrina patį elementą, taigi rėmelis blunka kartu su eilutėmis.
 */
.namai-table--collapsed {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent 100%);
}

/*
 * Atsarginis variantas naršyklėms be mask-image palaikymo — bent jau
 * turinys nublunka.
 */
.namai-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 180px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 82%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}

.namai-table--collapsed .namai-fade {
	opacity: 1;
}

@supports ( mask-image: linear-gradient(#000, transparent) ) or ( -webkit-mask-image: linear-gradient(#000, transparent) ) {
	/* mask jau pasirūpina blukimu — perdanga nebereikalinga. */
	.namai-table--collapsed .namai-fade {
		opacity: 0;
	}
}

.namai-more {
	display: flex;
	justify-content: center;
	margin-top: 34px;
}

.namai-lentele .namai-more__btn {
	background-color: #fff !important;
	border: 1px solid var(--namai-green) !important;
	border-radius: 0 !important;
	box-shadow: 0 1px 2px 0 rgba(198, 228, 246, 0.05) !important;
	color: var(--namai-dark) !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 100% !important;
	letter-spacing: 0 !important;
	padding: 19px 54px !important;
	text-transform: none !important;
	cursor: pointer;
	transition: 0.3s all !important;
}

.namai-lentele .namai-more__btn:hover,
.namai-lentele .namai-more__btn:focus {
	background-color: var(--namai-green) !important;
	border-color: var(--namai-green) !important;
	color: var(--namai-head-bg) !important;
}

.namai-lentele .namai-more__btn:focus-visible {
	outline: 2px solid var(--namai-green);
	outline-offset: 2px;
}

.namai-more--hidden {
	display: none;
}

/* --- Tuščias rezultatas ------------------------------------------------ */

.namai-lentele .namai-empty {
	padding: 60px 34px;
	color: var(--namai-green) !important;
	font-family: "Outfit", sans-serif !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 100% !important;
	text-align: center;
}

/* --- Adaptyvumas ------------------------------------------------------- */

@media (max-width: 1100px) {
	.namai-filters {
		grid-template-columns: repeat(2, 1fr);
		gap: 26px 32px;
	}

	.namai-filter--submit {
		grid-column: 1 / -1;
	}

	.namai-lentele .namai-submit {
		padding: 19px 60px !important;
	}
}

@media (max-width: 860px) {
	.namai-lentele .namai-head__title {
		font-size: 48px !important;
	}

	/* Filtrai suskleisti — atidaromi mygtuku. */
	.namai-lentele .namai-filters-toggle {
		display: flex;
	}

	/* Suskleidus tarpą iki lentelės palaiko paties mygtuko margin-bottom. */
	.namai-filters {
		display: none;
		margin: 0 0 32px;
	}

	.namai-filters--open {
		display: grid;
	}

	/* Antraštės eilutė nebetelpa — kiekviena eilutė virsta kortele su
	   etiketėmis iš data-label. */
	.namai-thead {
		display: none;
	}

	.namai-lentele .namai-row {
		grid-template-columns: 1fr auto;
		gap: 4px 16px;
		padding: 18px 20px;
	}

	/* Likę langeliai — per visą plotį, etiketė kairėje, reikšmė dešinėje. */
	.namai-lentele .namai-cell {
		grid-column: 1 / -1;
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 5px 0;
	}

	.namai-cell::before {
		content: attr(data-label);
		color: var(--namai-dark);
		font-family: "Outfit", sans-serif;
		font-weight: 300;
		font-size: 14px;
		text-transform: uppercase;
	}

	/* Objekto nr. — kaip ir visi kiti: etiketė kairėje, reikšmė dešinėje.
	   Papildomų taisyklių nereikia, pakanka .namai-cell. */

	/* Būsena ir rodyklė dalijasi paskutinę eilutę: ženkliukas kairėje,
	   rodyklė dešinėje. Abu išdėlioja pats grid'as pagal DOM eilę. */
	.namai-lentele .namai-cell--busena {
		grid-column: 1;
		justify-content: flex-start;
		padding-top: 10px !important;
	}

	.namai-cell--busena::before {
		display: none;
	}

	.namai-lentele .namai-cell--arrow {
		grid-column: 2;
		justify-content: flex-end;
		align-self: center;
		padding-top: 10px !important;
	}
}

@media (max-width: 560px) {
	.namai-lentele .namai-head__title {
		font-size: 38px !important;
	}

	.namai-filters {
		grid-template-columns: 1fr;
	}

	.namai-lentele .namai-submit,
	.namai-lentele .namai-more__btn {
		width: 100%;
		padding: 19px 24px !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.namai-lentele * {
		transition: none !important;
	}
}