/* ============================================================
   HOUSING TRIO — Property Listings Page Stylesheet
   listings.css  |  page-specific only, no shared overrides
   ============================================================ */

/* ---------- Section Wrapper ---------- */
.listings-page {
	padding-top: 14px;
	padding-bottom: 70px;
	font-family: 'Poppins', sans-serif;
	background-color: #f4f6f9;
	min-height: 60vh;
}

/* ============================================================
   MOBILE FILTER TOGGLE BAR
   ============================================================ */
.listings-mobile-filter-bar {
	background: #fff;
	border-bottom: 1px solid #e4e7eb;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	position: sticky;
	top: 64px;
	/* sits just below the navbar */
	z-index: 100;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.listings-filter-toggle-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #0f2a44;
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
	cursor: pointer;
	transition: background 0.2s;
}

.listings-filter-toggle-btn:hover {
	background: #183554;
}

.listings-toggle-chevron {
	font-size: 11px;
	transition: transform 0.3s ease;
}

.listings-active-filters-count {
	background: #e8f0fe;
	color: #0f2a44;
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	align-items: center;
}

/* ============================================================
   SEARCH BAR SECTION
   ============================================================ */

/* ============================================================
   SEARCH BAR (white card: type + city chips, search box, button)
   ============================================================ */
/* Lifted above the result cards (their entrance animations give them their own layer), so the
   chip menus and search suggestions show over them */
.listings-search-bar {
	position: relative;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	padding: 8px;
	border: 1px solid #e6edf6;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: 0 14px 40px rgba(15, 42, 68, 0.1);
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.listings-search-bar:focus-within {
	border-color: rgba(252, 163, 17, 0.55);
	box-shadow: 0 0 0 4px rgba(252, 163, 17, 0.18), 0 14px 40px rgba(15, 42, 68, 0.12);
}

.ls-pickers {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
}

.listings-search-field {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	min-width: 0;
	margin-left: 2px;
	padding: 0 6px 0 14px;
	border-left: 1px solid #eef2f7;
}

.ls-search-icon {
	color: #94a3b8;
	transition: color 0.2s ease;
}

.listings-search-field:focus-within .ls-search-icon {
	color: #1b365d;
}

.listings-search-field .listings-search-input {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #0f172a;
	font-family: inherit;
	font-size: 15px;
	outline: none;
}

.listings-search-field .listings-search-input::placeholder {
	color: #94a3b8;
}

.listings-search-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 22px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, #1b365d, #2c5282);
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(27, 54, 93, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.listings-search-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(27, 54, 93, 0.3);
}

.listings-search-btn i {
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.listings-search-btn:hover i {
	transform: translateX(3px);
}

.listings-search-btn:focus-visible {
	outline: 3px solid #fca311;
	outline-offset: 2px;
}

/* Phones: chips side by side on top, then the search box and a compact button */
@media (max-width: 767.98px) {
	.listings-search-bar {
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 14px;
		padding: 6px;
		border-radius: 16px;
	}

	.ls-pickers {
		flex: 1 1 100%;
	}

	.ls-pickers .ht-chip-select {
		flex: 1 1 0;
		min-width: 0;
	}

	.ls-pickers .ht-chip-btn {
		width: 100%;
	}

	.listings-search-field {
		margin-left: 0;
		padding: 0 6px 0 12px;
		border-left: 0;
		border-radius: 12px;
		background: #f8fafc;
	}

	.listings-search-btn {
		width: 48px;
		padding: 0;
	}

	.ls-btn-text {
		display: none;
	}
}

/* ============================================================
   FILTERS SIDEBAR
   ============================================================ */
.listings-filters-sidebar {
	background: #fff;
	border-radius: 14px;
	padding: 20px 18px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
	position: sticky;
	top: 88px;
}

/* Header row with title + Clear All */
.listings-filters-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.listings-filters-title {
	font-size: 15px;
	font-weight: 700;
	color: #0f2a44;
	margin: 0;
}

.listings-clear-all-btn {
	background: none;
	border: 1px solid #ccd1d9;
	border-radius: 6px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	color: #6c757d;
	cursor: pointer;
	transition: all 0.2s;
	font-family: 'Poppins', sans-serif;
}

.listings-clear-all-btn:hover {
	background: #f0f2f5;
	color: #0f2a44;
	border-color: #0f2a44;
}

/* Filter Group */
.listings-filter-group {
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid #f0f2f5;
}

.listings-filter-group:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.listings-filter-label {
	font-size: 13px;
	font-weight: 600;
	color: #0f2a44;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

/* BHK Buttons */
.listings-bhk-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.listings-bhk-btn {
	background: #f0f3f7;
	border: 1.5px solid #dde3ec;
	border-radius: 7px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 500;
	color: #4a5568;
	cursor: pointer;
	transition: all 0.18s;
	font-family: 'Poppins', sans-serif;
	user-select: none;
}

.listings-bhk-btn:hover {
	background: #e2e8f0;
	border-color: #0f2a44;
	color: #0f2a44;
}

.listings-bhk-btn.active {
	background: #0f2a44;
	color: #fff;
	border-color: #0f2a44;
}

/* Price Range Dual Slider */
.listings-price-display {
	font-size: 12px;
	font-weight: 700;
	color: #1a6bff;
	background: #edf2ff;
	border-radius: 6px;
	padding: 2px 8px;
	white-space: nowrap;
}

.listings-range-track {
	position: relative;
	height: 32px;
	/* Taller for easier interaction */
	display: flex;
	align-items: center;
	margin-top: 5px;
}

/* Visual Track Background */
.listings-range-track::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 6px;
	background: #e4e7eb;
	border-radius: 3px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
}

.listings-price-slider {
	width: 100%;
	position: absolute;
	left: 0;
	cursor: pointer;
	background: transparent;
	height: 24px;
	-webkit-appearance: none;
	pointer-events: none;
	z-index: 1;
	/* Keep base sliders slightly elevated */
	margin: 0;
}

.listings-price-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	background: #0f2a44;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s;
	pointer-events: auto;
}

.listings-price-slider::-moz-range-thumb {
	width: 22px;
	height: 22px;
	background: #0f2a44;
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s;
	pointer-events: auto;
}

.listings-price-slider::-webkit-slider-thumb:hover {
	transform: scale(1.15);
}

.listings-price-slider::-moz-range-thumb:hover {
	transform: scale(1.15);
}

.listings-range-labels {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #9aa3af;
	margin-top: 4px;
}

/* Radio Groups */
.listings-radio-group {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.listings-radio-group.inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
}

.listings-radio-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: #444;
	cursor: pointer;
	line-height: 1;
}

.listings-radio-item input[type="radio"] {
	accent-color: #0f2a44;
	width: 15px;
	height: 15px;
	cursor: pointer;
	margin: 0;
	flex-shrink: 0;
}

/* ============================================================
   PROPERTY CARDS CONTAINER
   ============================================================ */
/* The cards stack (photo on top) by the column's width, not the window's: see @container below */
.listings-cards-container {
	display: flex;
	flex-direction: column;
	gap: 22px;
	container-type: inline-size;
}

/* ============================================================
   RESULT CARD: the site's property card (.ht-pcard--row, style.css),
   built by search-property.js. Photo on the left, details on the right.
   ============================================================ */
.ht-pcard--row {
	flex-direction: row;
	/* Rises in; "backwards" so the hover lift still works once it has */
	animation: listingsCardIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	animation-delay: var(--enter-delay, 0s);
}

@keyframes listingsCardIn {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
}

.ht-pcard--row .ht-pcard-media {
	flex: 0 0 36%;
	min-height: 240px;
}

.ht-pcard--row .ht-pcard-body {
	gap: 7px;
	padding: 16px 18px;
}

/* Fixed gap above the buttons instead of pushing them to the bottom of a tall photo */
.ht-pcard--row .ht-pcard-actions {
	margin-top: 6px;
	padding-top: 12px;
}

/* Photo badges: checked by the team, how many photos */
.ht-pcard-verified,
.ht-pcard-count {
	position: absolute;
	bottom: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	pointer-events: none;
}

.ht-pcard-verified {
	left: 10px;
	background: #1d9e75;
	color: #ffffff;
}

.ht-pcard-count {
	right: 10px;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
}

.ht-pcard-date i {
	margin-right: 3px;
}

.ht-pcard-date b {
	color: #51627c;
	font-weight: 600;
}

.ht-pcard-neg {
	align-self: center;
	color: #0f6e56;
	font-size: 11.5px;
	font-weight: 600;
}

.ht-pcard-amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0;
	padding: 0;
	color: #0f6e56;
	font-size: 12px;
	list-style: none;
}

.ht-pcard-amenities i {
	margin-right: 4px;
	font-size: 10px;
}

/* ---------- Results head: count + sort, filters in use ---------- */
.listings-results-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-bottom: 8px;
}

.listings-results-head .listings-results-count {
	margin: 0;
}

.listings-sort {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	margin: 0;
	padding: 0 4px 0 12px;
	border: 1px solid #dbe4ef;
	border-radius: 10px;
	background: #ffffff;
	color: #1b365d;
	font-size: 13px;
	cursor: pointer;
}

.listings-sort select {
	height: 100%;
	padding: 0 6px;
	border: 0;
	outline: 0;
	background: transparent;
	color: #1b365d;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.listings-active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.listings-active-chips:empty {
	display: none;
}

.listings-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border: 1px solid #f5d8a6;
	border-radius: 999px;
	background: #fff4de;
	color: #854f0b;
	font-size: 12px;
	font-weight: 500;
}

.listings-chip:hover {
	background: #fde7bd;
}

.listings-chip i {
	font-size: 11px;
}

/* Narrow column (tablets, phones): photo on top */
@container (max-width: 620px) {
	.ht-pcard--row {
		flex-direction: column;
	}

	.ht-pcard--row .ht-pcard-media {
		flex: none;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.ht-pcard--row .ht-pcard-body {
		padding: 14px 16px 16px;
	}
}

@container (max-width: 360px) {
	.ht-pcard--row .ht-pcard-price {
		font-size: 18px;
	}

	.ht-pcard--row .ht-pcard-cta {
		padding: 0 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ht-pcard--row {
		animation: none;
	}
}

/*
 * Photo carousel (built by search-property.js): photos fill the panel at their own
 * proportions (cover, never stretched); arrows, dots and a counter float on top.
 */
.listings-card-image--gallery {
	isolation: isolate;
	touch-action: pan-y pinch-zoom;
	/* Dragging the photos (finger or mouse) must not select text */
	-webkit-user-select: none;
	user-select: none;
}

.gallery-main-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: pointer;
	opacity: 0;
	transform: translateX(5%) scale(1.02);
	transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-main-img.from-prev {
	transform: translateX(-5%) scale(1.02);
}

.gallery-main-img.is-shown {
	opacity: 1;
	transform: none;
}

/*
 * After a swipe (search-property.js showCardItem): the new photo comes in from the side the old
 * one leaves room on, already visible, at the same pace as the old one going out
 */
.gallery-main-img.from-swipe-next,
.gallery-main-img.from-swipe-prev {
	opacity: 1;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-main-img.from-swipe-next:not(.is-shown) {
	transform: translateX(100%);
}

.gallery-main-img.from-swipe-prev:not(.is-shown) {
	transform: translateX(-100%);
}

/* Gentle zoom on hover; the shade (carousels only) keeps the dots readable on bright photos */
@media (hover: hover) {
	.ht-pcard:hover .gallery-main-img.is-shown {
		transform: scale(1.04);
	}
}

.listings-card-image--gallery.is-carousel::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	height: 34%;
	background: linear-gradient(to top, rgba(8, 15, 30, 0.5), transparent);
	pointer-events: none;
}

.listings-media-count {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.listings-media-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.82);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #0f172a;
	font-size: 12px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.25s, transform 0.25s, background 0.2s;
}

.listings-media-prev {
	left: 12px;
	transform: translateX(-6px);
}

.listings-media-next {
	right: 12px;
	transform: translateX(6px);
}

.listings-card-image--gallery:hover .listings-media-nav,
.listings-media-nav:focus-visible {
	opacity: 1;
	transform: none;
}

.listings-card-image--gallery .listings-media-nav:hover {
	background: #fff;
	transform: scale(1.08);
}

/* Touch screens swipe instead */
@media (hover: none) {
	.listings-media-nav {
		display: none;
	}
}

.listings-media-dots {
	position: absolute;
	left: 50%;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 5px;
	max-width: calc(100% - 24px);
	transform: translateX(-50%);
}

.listings-media-dots.is-hidden {
	display: none;
}

.listings-media-dot {
	position: relative;
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
}

/* Bigger hit area than the dot itself */
.listings-media-dot::before {
	content: "";
	position: absolute;
	inset: -6px -3px;
}

.listings-media-dot.active {
	width: 20px;
	background: #fff;
}

.listings-media-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ============================================================
   LIGHTBOX MODAL 
   ============================================================ */
.property-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.85);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.property-lightbox.active {
	opacity: 1;
	pointer-events: auto;
}

/* One-finger drags swipe the photos (js/photo-swipe.js); two fingers still zoom */
.property-lightbox {
	touch-action: pinch-zoom;
	overscroll-behavior: contain;
}

.property-lightbox img {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.property-lightbox .lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	color: #fff;
	font-size: 40px;
	cursor: pointer;
	line-height: 1;
	z-index: 10000;
}

/*
 * A set width, not "as wide as the photo": the "No photos yet" placeholder (served for a missing
 * file) has no size of its own and would shrink to nothing, leaving an empty black box.
 * Photos are centred in it at their own size, never wider than it.
 */
.property-lightbox .lightbox-content {
	width: 85%;
	max-height: 85vh;
	text-align: center;
}

.property-lightbox img {
	vertical-align: middle;
	max-width: 100%;
	max-height: 85vh;
	border-radius: 8px;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
	object-fit: contain;
}

.lightbox-prev,
.lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: none;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	font-size: 20px;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}

.lightbox-prev:hover,
.lightbox-next:hover {
	background: rgba(255, 255, 255, 0.4);
}

.lightbox-prev {
	left: 20px;
}

.lightbox-next {
	right: 20px;
}

/* ============================================================
   RESPONSIVE — TABLET  (md breakpoint)
   ============================================================ */
@media (max-width: 991.98px) {
	.listings-filters-sidebar {
		position: static;
		margin-bottom: 16px;
	}
}

/* ============================================================
   RESPONSIVE — MOBILE  (< 768px)
   ============================================================ */
@media (max-width: 767.98px) {
	.listings-page {
		padding-top: 12px;
		padding-bottom: 90px;
	}


	/* ---- Filter Sidebar ---- */
	#listingsFilterCol {
		width: 100% !important;
		max-width: 100% !important;
	}

	.listings-filters-sidebar {
		border-radius: 12px;
		padding: 16px 14px;
		margin-bottom: 14px;
		position: static;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	}

	.listings-bhk-filters {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}

	.listings-bhk-btn {
		text-align: center;
		padding: 6px 8px;
	}

	/* Lightbox Mobile Adjustments */
	.lightbox-prev,
	.lightbox-next {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}

	.lightbox-prev {
		left: 10px;
	}

	.lightbox-next {
		right: 10px;
	}
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE  (< 400px)
   ============================================================ */
@media (max-width: 399.98px) {

	.listings-bhk-filters {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* =========================================================
   TYPE + CITY SELECTS, RESULT COUNT, EMPTY STATE, VIDEOS
========================================================= */


/* Filters that don't apply to the chosen type (hidden by search-property.js) */
.listings-filter-group[hidden] {
	display: none;
}

.listings-bhk-filters {
	flex-wrap: wrap;
}

.listings-results-count {
	margin: 0 0 12px;
	font-size: 14px;
	color: #5b6474;
	min-height: 21px;
}

.listings-results-count strong {
	color: #0f2a44;
}

.listings-empty-state {
	padding: 56px 24px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .07);
	text-align: center;
	color: #5b6474;
}

.listings-empty-state i {
	margin-bottom: 14px;
	font-size: 42px;
	color: #c3cad6;
}

.listings-empty-state h5 {
	margin-bottom: 6px;
	font-weight: 600;
	color: #0f2a44;
}

.listings-empty-state p {
	margin: 0;
	font-size: 14px;
}

/* Videos in cards behave like the photos */
.listings-card-image--gallery {
	position: relative;
}

.listings-card-image--gallery > video.gallery-main-img {
	background: #000;
}

/* Sized to its container (85% wide), so it stays centred on phones */
.property-lightbox video {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 85vh;
	border-radius: 8px;
	background: #000;
}


/* =========================================================
   FILTER SIDEBAR (modern chips, collapsible groups, animated)
========================================================= */
.lf-panel {
	--lf-navy: #0f2a44;
	--lf-gold: #fca311;
	--lf-line: #eef1f5;
	--lf-ease: cubic-bezier(0.22, 1, 0.36, 1);

	padding: 18px 18px 8px;
	border-radius: 20px;
	border: 1px solid var(--lf-line);
	box-shadow: 0 12px 32px rgba(15, 42, 68, 0.08);
	animation: lfPanelIn 0.6s var(--lf-ease) both;
}

.lf-panel .listings-filters-header {
	margin-bottom: 4px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--lf-line);
}

.lf-panel .listings-filters-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 16px;
}

.lf-panel .listings-filters-title > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--lf-navy);
	color: var(--lf-gold);
	font-size: 13px;
}

/* Number of active filters */
.lf-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--lf-gold);
	color: var(--lf-navy);
	font-size: 11px;
	font-weight: 700;
	animation: lfPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lf-count[hidden] {
	display: none;
}

.lf-panel .lf-clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: none;
	border-radius: 999px;
	background: #f3f5f9;
	color: var(--lf-navy);
	font-size: 12px;
	font-weight: 600;
}

.lf-panel .lf-clear i {
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lf-panel .lf-clear:hover {
	background: #e7ecf3;
	color: var(--lf-navy);
	border-color: transparent;
}

.lf-panel .lf-clear:hover i {
	transform: rotate(-360deg);
}

/* Groups: slide in one after another (also when a type change reveals them again) */
.lf-panel .lf-group {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--lf-line);
	animation: lfGroupIn 0.45s var(--lf-ease) both;
}

.lf-panel .lf-group:last-child {
	border-bottom: none;
}

.lf-panel .lf-group:nth-of-type(1) { animation-delay: 0.05s; }
.lf-panel .lf-group:nth-of-type(2) { animation-delay: 0.1s; }
.lf-panel .lf-group:nth-of-type(3) { animation-delay: 0.15s; }
.lf-panel .lf-group:nth-of-type(4) { animation-delay: 0.2s; }
.lf-panel .lf-group:nth-of-type(5) { animation-delay: 0.25s; }

.lf-group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 0 12px;
	border: none;
	background: none;
	color: var(--lf-navy);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	font-family: 'Poppins', sans-serif;
}

.lf-group-head > span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.lf-group-head > span > i {
	width: 16px;
	text-align: center;
	color: var(--lf-gold);
}

.lf-group-head:focus-visible {
	outline: 2px solid var(--lf-navy);
	outline-offset: 2px;
	border-radius: 6px;
}

.lf-chevron {
	font-size: 11px;
	color: #6b7280;
	transition: transform 0.35s var(--lf-ease);
}

.lf-group.is-collapsed .lf-chevron {
	transform: rotate(-90deg);
}

/* Collapse animates height by moving the grid row between 1fr and 0fr */
.lf-group-body {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.35s var(--lf-ease), opacity 0.25s ease;
}

.lf-group.is-collapsed .lf-group-body {
	grid-template-rows: 0fr;
	opacity: 0;
}

.lf-group-inner {
	min-height: 0;
	overflow: hidden;
}

.lf-group-content {
	padding-bottom: 16px;
}

/* Chips: BHK buttons, and radio/checkbox labels */
.lf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.lf-chip {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.lf-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.lf-chip > span,
.lf-panel .lf-chip-btn {
	display: inline-flex;
	align-items: center;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid #e3e7ee;
	background: #fff;
	color: #4b5563;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.2;
	font-family: 'Poppins', sans-serif;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
		transform 0.2s ease;
}

.lf-ico {
	margin-right: 6px;
	font-size: 11px;
	color: #6b7280;
	transition: color 0.2s ease;
}

/* Check mark that pops in when selected */
.lf-check {
	width: 0;
	margin-right: 0;
	opacity: 0;
	font-size: 10px;
	color: var(--lf-gold);
	transform: scale(0);
	transition: width 0.2s ease, margin 0.2s ease, opacity 0.2s ease,
		transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lf-chip:hover > span,
.lf-panel .lf-chip-btn:hover {
	border-color: var(--lf-navy);
	background: #fff;
	color: var(--lf-navy);
}

.lf-chip:active > span,
.lf-panel .lf-chip-btn:active {
	transform: scale(0.95);
}

.lf-chip input:checked + span,
.lf-panel .lf-chip-btn.active {
	background: var(--lf-navy);
	border-color: var(--lf-navy);
	color: #fff;
	box-shadow: 0 6px 14px rgba(15, 42, 68, 0.22);
}

.lf-chip input:checked + span .lf-ico {
	color: #fff;
}

.lf-chip input:checked + span .lf-check,
.lf-panel .lf-chip-btn.active .lf-check {
	width: 11px;
	margin-right: 6px;
	opacity: 1;
	transform: scale(1);
}

.lf-chip input:checked + span .lf-check + .lf-ico {
	display: none;
}

.lf-chip input:focus-visible + span,
.lf-panel .lf-chip-btn:focus-visible {
	outline: 2px solid var(--lf-navy);
	outline-offset: 2px;
}

/* Price range: pill readout, filled selection, grabby thumbs */
.lf-price-display {
	margin-bottom: 4px;
	text-align: center;
}

.lf-panel .listings-price-display {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	background: #fff5e3;
	color: #8a5a00;
	font-size: 12.5px;
	font-weight: 700;
}

.lf-range::before {
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(to right,
		#e4e7eb 0 var(--lo, 0%),
		var(--lf-navy) var(--lo, 0%) var(--hi, 100%),
		#e4e7eb var(--hi, 100%) 100%);
}

.lf-range .listings-price-slider::-webkit-slider-thumb {
	width: 20px;
	height: 20px;
	background: #fff;
	border: 3px solid var(--lf-navy);
	box-shadow: 0 3px 8px rgba(15, 42, 68, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lf-range .listings-price-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: #fff;
	border: 3px solid var(--lf-navy);
	box-shadow: 0 3px 8px rgba(15, 42, 68, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lf-range .listings-price-slider:active::-webkit-slider-thumb {
	transform: scale(1.2);
	box-shadow: 0 0 0 6px rgba(252, 163, 17, 0.25), 0 3px 8px rgba(15, 42, 68, 0.25);
}

.lf-range .listings-price-slider:active::-moz-range-thumb {
	transform: scale(1.2);
	box-shadow: 0 0 0 6px rgba(252, 163, 17, 0.25), 0 3px 8px rgba(15, 42, 68, 0.25);
}

.lf-range .listings-price-slider:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(15, 42, 68, 0.3);
}

.lf-panel .listings-range-labels {
	color: #6b7280;
}

@keyframes lfPanelIn {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes lfGroupIn {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes lfPop {
	from {
		transform: scale(0);
	}

	to {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {

	.lf-panel,
	.lf-panel * {
		animation: none !important;
		transition: none !important;
	}
}

/* Narrow sidebars (e.g. 1024px screens): keep the header on one line */
.lf-panel .listings-filters-header {
	gap: 8px;
}

.lf-panel .lf-clear {
	flex-shrink: 0;
	white-space: nowrap;
}

@media (max-width: 1199.98px) {

	.lf-panel {
		padding: 16px 14px 6px;
	}

	.lf-panel .listings-filters-title {
		gap: 7px;
		font-size: 15px;
	}

	.lf-panel .listings-filters-title > i {
		width: 28px;
		height: 28px;
		font-size: 12px;
	}

	.lf-panel .lf-clear {
		padding: 5px 10px;
		font-size: 11.5px;
	}
}

/*
 * Desktop: "smart sticky" sidebar. search-property.js (initStickySidebar) moves its sticky `top`
 * as you scroll: going down it travels with the page until its bottom reaches the screen, then
 * pins; going up it travels back until its top is under the navbar. No inner scrollbar, and every
 * filter stays reachable even when the sidebar is taller than the window.
 */
@media (min-width: 992px) {

	.lf-panel {
		top: 88px;
		will-change: top;
	}
}

/* 2026: slimmer price line and smaller handles */
.listings-range-track::before,
.lf-range::before {
	height: 3px;
}

.lf-range .listings-price-slider::-webkit-slider-thumb {
	width: 16px;
	height: 16px;
	border-width: 2px;
}

.lf-range .listings-price-slider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-width: 2px;
}