/* custom styles for properties filter dropdowns */

/* Hides dropdowns before first paint to prevent FOUC during JetSmartFilters init.
   filters.js adds .jsf-inited to body via setTimeout(0) after all DOMContentLoaded handlers complete. */
body:not(.jsf-inited) .jet-filter-items-dropdown__body {
	visibility: hidden;
}

/* .enliv-properties-filter class must be manually assigned to a widget that contains the jetsmart filters */
.elementor .enliv-properties-filter {
	/* to prevent menu going under listing imgs */
	z-index: 2;

	.jet-filter-row-disable {
		cursor: not-allowed;
	}

	.elementor-element:has(> [class*="elementor-widget-jet-smart-filters"]) {
		/* targets containers whose direct children are filters. only works if filters are direct children */
		/* required to ensure dropdowns don't overlap with text when containers with dropdowns are stacked vertically (on mobile)
		*/
		z-index: unset;
	}



	.jet-filter-items-dropdown__body {
		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
		margin-top: 0;
	}

	.jet-active-tag.jet-active-tag--clear {
		order: 1;
		margin-left: auto;
		background: var(--e-global-color-secondary);

		&:hover {
			background: var(--e-global-color-ae8fc1c, #F3AA3C);
		}

		/* cross sign shown in Clear button */
		.jet-active-tag__remove {
			display: none;
		}
	}

	/* for this to work, check 'scroll enabled' in Additional options for jet radio filters. height setting in elementor for that widget is currently broken so using this for now */
	.jet-filter-items-scroll {
		max-height: 200px !important;
		overflow-y: scroll;
	}

	/* manually set this class on dropdown filters with many options where you want to hide disabled options  */
	/* .enliv-properties-filter--hide-disabled {
		.jet-filter-row-disable {
			display: none !important;
		}
	} */

}

@media (max-width: 1020px) {
	.elementor .enliv-properties-filter__menu {
		display: none;
		opacity: 0;
		transition: opacity 0.4s ease, display 0.4s allow-discrete;
	}

	.elementor .enliv-properties-filter__menu.is-open {
		display: flex;
		opacity: 1;

		@starting-style {
			opacity: 0;
		}
	}
}