.aef-filter {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.aef-filter__label {
	font-weight: 600;
}

.aef-filter__select {
	max-width: 100%;
	padding: 6px 10px;
}

.aef-filter__options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.aef-filter--dropdown .aef-filter__options {
	flex-direction: column;
}

.aef-filter__option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	margin: 0;
}

.aef-filter__option input {
	margin: 0;
}

.aef-filter__control {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.aef-filter__field {
	width: 100%;
}

/* Custom dropdown chevron (replaces the native select arrow) */
.aef-filter--has-chevron .aef-filter__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2em;
}

.aef-chevron--left .aef-filter--has-chevron .aef-filter__select {
	padding-right: 10px;
	padding-left: 2em;
}

.aef-filter__chevron {
	position: absolute;
	top: 50%;
	right: var(--aef-chevron-offset, 10px);
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
}

.aef-chevron--left .aef-filter__chevron {
	right: auto;
	left: var(--aef-chevron-offset, 10px);
}

.aef-filter__chevron svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.aef-filter__chevron i {
	font-size: inherit;
}

/* "(N)" post counts next to each option (Show Post Counts) */
.aef-filter__count {
	color: var(--aef-count-color, inherit);
	opacity: var(--aef-count-opacity, 0.6);
	font-size: var(--aef-count-font-size, 0.9em);
	white-space: nowrap;
}

.aef-multiselect__option .aef-filter__count {
	margin-left: auto;
	padding-left: 8px;
}

/* Chevron flips while a multi-select menu is open */
.aef-filter__chevron {
	transition: transform 0.18s ease;
}

.aef-filter--open .aef-filter__chevron {
	transform: translateY(-50%) rotate(180deg);
}

/* ==========================================================================
   Multi-select dropdown
   --------------------------------------------------------------------------
   Every visual aspect is driven by a CSS custom property so it can be
   re-themed from Elementor (Style tab) or from your own stylesheet, e.g.:

     .aef-filter--multiselect {
       --aef-ms-accent: #e63946;
       --aef-ms-tag-bg: #fde2e4;
       --aef-ms-menu-radius: 12px;
     }

   Available variables (default in parentheses):
     --aef-ms-min-width          (180px)   toggle minimum width
     --aef-ms-toggle-bg          (#fff)    toggle background
     --aef-ms-toggle-color       (inherit) toggle text color
     --aef-ms-toggle-border      (#d0d5dd) toggle border color
     --aef-ms-toggle-radius      (6px)     toggle border radius
     --aef-ms-toggle-padding     (6px 10px)
     --aef-ms-placeholder-color  (#6b7280) "All" placeholder color
     --aef-ms-accent             (#3a86ff) focus ring, checkbox, selected state
     --aef-ms-menu-bg            (#fff)    menu background
     --aef-ms-menu-border        (#d0d5dd) menu border color
     --aef-ms-menu-radius        (8px)     menu border radius
     --aef-ms-menu-shadow        (soft)    menu box-shadow
     --aef-ms-menu-width         (100%)    menu width (relative to the toggle)
     --aef-ms-menu-max-height    (260px)   scrollable options height
     --aef-ms-menu-gap           (4px)     space between toggle and menu
     --aef-ms-option-color       (inherit) option text color
     --aef-ms-option-padding     (8px 12px)
     --aef-ms-option-hover-bg    (#f3f4f6)
     --aef-ms-option-selected-bg (transparent)
     --aef-ms-option-selected-color (inherit)
     --aef-ms-box-size           (16px)    checkbox size
     --aef-ms-box-border         (#9ca3af) checkbox border color
     --aef-ms-box-radius         (4px)
     --aef-ms-tag-bg             (#eef2ff) tag background
     --aef-ms-tag-color          (#1e293b) tag text color
     --aef-ms-tag-radius         (999px)   tag border radius
     --aef-ms-tag-padding        (2px 8px)
     --aef-ms-tag-font-size      (0.85em)
     --aef-ms-search-bg          (#fff)
     --aef-ms-search-border      (#e5e7eb)
   Option counts ("Show Post Counts"), any filter type:
     --aef-count-color           (inherit)
     --aef-count-opacity         (0.6)
     --aef-count-font-size       (0.9em)
   ========================================================================== */

.aef-multiselect {
	position: relative;
	width: 100%;
	min-width: var(--aef-ms-min-width, 180px);
}

.aef-multiselect__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-height: 2.4em;
	box-sizing: border-box;
	padding: var(--aef-ms-toggle-padding, 6px 10px);
	background: var(--aef-ms-toggle-bg, #fff);
	color: var(--aef-ms-toggle-color, inherit);
	border: 1px solid var(--aef-ms-toggle-border, #d0d5dd);
	border-radius: var(--aef-ms-toggle-radius, 6px);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aef-multiselect__toggle:hover {
	border-color: var(--aef-ms-accent, #3a86ff);
}

.aef-multiselect__toggle:focus-visible,
.aef-multiselect--open .aef-multiselect__toggle {
	outline: none;
	border-color: var(--aef-ms-accent, #3a86ff);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--aef-ms-accent, #3a86ff) 22%, transparent);
}

/* Leave room for the custom chevron (it is positioned by .aef-filter__chevron) */
.aef-filter--has-chevron .aef-multiselect__toggle {
	padding-right: 2em;
}

.aef-chevron--left .aef-filter--has-chevron .aef-multiselect__toggle {
	padding-right: 10px;
	padding-left: 2em;
}

.aef-multiselect__value {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	min-width: 0;
	line-height: 1.3;
}

.aef-multiselect__placeholder {
	color: var(--aef-ms-placeholder-color, #6b7280);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aef-multiselect__count {
	white-space: nowrap;
}

.aef-multiselect__tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	padding: var(--aef-ms-tag-padding, 2px 8px);
	font-size: var(--aef-ms-tag-font-size, 0.85em);
	line-height: 1.4;
	background: var(--aef-ms-tag-bg, #eef2ff);
	color: var(--aef-ms-tag-color, #1e293b);
	border-radius: var(--aef-ms-tag-radius, 999px);
}

.aef-multiselect__tag-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aef-multiselect__tag-remove,
.aef-multiselect__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	font-size: 1.1em;
	line-height: 1;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.aef-multiselect__tag-remove:hover,
.aef-multiselect__clear:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.08);
}

.aef-multiselect__clear {
	flex: 0 0 auto;
	display: none;
	font-size: 1.25em;
	color: var(--aef-ms-placeholder-color, #6b7280);
}

.aef-multiselect--has-value .aef-multiselect__clear {
	display: inline-flex;
}

.aef-multiselect__menu {
	position: absolute;
	top: calc(100% + var(--aef-ms-menu-gap, 4px));
	left: 0;
	z-index: 1000;
	min-width: 100%;
	width: var(--aef-ms-menu-width, 100%);
	box-sizing: border-box;
	background: var(--aef-ms-menu-bg, #fff);
	border: 1px solid var(--aef-ms-menu-border, #d0d5dd);
	border-radius: var(--aef-ms-menu-radius, 8px);
	box-shadow: var(--aef-ms-menu-shadow, 0 8px 24px rgba(15, 23, 42, 0.12));
	overflow: hidden;
}

.aef-multiselect__menu[hidden] {
	display: none;
}

.aef-multiselect__search {
	padding: 8px;
	border-bottom: 1px solid var(--aef-ms-search-border, #e5e7eb);
}

.aef-multiselect__search-input {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 10px;
	font: inherit;
	background: var(--aef-ms-search-bg, #fff);
	border: 1px solid var(--aef-ms-search-border, #e5e7eb);
	border-radius: calc(var(--aef-ms-menu-radius, 8px) - 2px);
}

.aef-multiselect__search-input:focus {
	outline: none;
	border-color: var(--aef-ms-accent, #3a86ff);
}

.aef-multiselect__options {
	max-height: var(--aef-ms-menu-max-height, 260px);
	overflow-y: auto;
	padding: 4px 0;
	overscroll-behavior: contain;
}

.aef-multiselect__option {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: var(--aef-ms-option-padding, 8px 12px);
	color: var(--aef-ms-option-color, inherit);
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.aef-multiselect__option:hover {
	background: var(--aef-ms-option-hover-bg, #f3f4f6);
}

.aef-multiselect__option.is-selected {
	background: var(--aef-ms-option-selected-bg, transparent);
	color: var(--aef-ms-option-selected-color, inherit);
}

.aef-multiselect__option.is-hidden {
	display: none;
}

/* The native checkbox stays for accessibility; the box is what you see. */
.aef-multiselect__option input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.aef-multiselect__box {
	position: relative;
	flex: 0 0 auto;
	width: var(--aef-ms-box-size, 16px);
	height: var(--aef-ms-box-size, 16px);
	box-sizing: border-box;
	border: 1.5px solid var(--aef-ms-box-border, #9ca3af);
	border-radius: var(--aef-ms-box-radius, 4px);
	background: #fff;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.aef-multiselect__box::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 45%;
	width: 30%;
	height: 55%;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg) scale(0);
	transition: transform 0.12s ease;
}

.aef-multiselect__option input:checked + .aef-multiselect__box {
	background: var(--aef-ms-accent, #3a86ff);
	border-color: var(--aef-ms-accent, #3a86ff);
}

.aef-multiselect__option input:checked + .aef-multiselect__box::after {
	transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.aef-multiselect__option input:focus-visible + .aef-multiselect__box {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--aef-ms-accent, #3a86ff) 25%, transparent);
}

.aef-multiselect__text {
	flex: 1 1 auto;
	min-width: 0;
}

.aef-multiselect__empty {
	padding: 10px 12px;
	font-size: 0.9em;
	opacity: 0.7;
}

.aef-multiselect__empty[hidden] {
	display: none;
}

/* The multi-select shows no loading effect: the menu closes on selection and
   the widget stays fully usable (requests are queued by the JS). */
.aef-filter--multiselect.aef-filter--loading {
	opacity: 1;
	pointer-events: auto;
}

.aef-filter--multiselect .aef-filter__spinner,
.aef-filter--multiselect.aef-filter--loading .aef-filter__spinner {
	display: none;
}

/* Dual-handle range slider */
.aef-filter__slider {
	width: 100%;
	padding: 2px 8px 0;
}

.aef-filter__slider-values {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	margin-bottom: 10px;
}

.aef-filter__slider-track {
	position: relative;
	height: 22px;
}

.aef-filter__slider-track::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	transform: translateY(-50%);
	background: var(--aef-slider-track, #e0e0e0);
	border-radius: 4px;
}

.aef-filter__slider-fill {
	position: absolute;
	top: 50%;
	height: 4px;
	transform: translateY(-50%);
	background: var(--aef-slider-fill, #3a86ff);
	border-radius: 4px;
}

.aef-filter__slider-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 22px;
	margin: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.aef-filter__slider-input::-webkit-slider-runnable-track {
	background: transparent;
	height: 22px;
	border: 0;
}

.aef-filter__slider-input::-moz-range-track {
	background: transparent;
	height: 22px;
	border: 0;
}

.aef-filter__slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	border-radius: 50%;
	background: var(--aef-slider-handle, #ffffff);
	border: 2px solid var(--aef-slider-fill, #3a86ff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.aef-filter__slider-input::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--aef-slider-handle, #ffffff);
	border: 2px solid var(--aef-slider-fill, #3a86ff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.aef-filter__slider--empty {
	font-size: 13px;
	opacity: 0.7;
}

/* ==========================================================================
   Search box (ACF Loop Grid Search widget)
     --aef-search-accent             (#3a86ff) focus border / ring / button
     --aef-search-placeholder-color  (#6b7280)
   ========================================================================== */
.aef-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.aef-search__label {
	font-weight: 600;
}

.aef-search__form {
	display: flex;
	flex: 1 1 auto;
	align-items: stretch;
	gap: 8px;
	min-width: 0;
	margin: 0;
}

.aef-search__field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.aef-search__input {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 2em 8px 12px;
	font: inherit;
	line-height: 1.3;
	background: #fff;
	border: 1px solid #d0d5dd;
	border-radius: 6px;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aef-search__input::placeholder {
	color: var(--aef-search-placeholder-color, #6b7280);
}

.aef-search__input::-webkit-search-decoration,
.aef-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.aef-search__input:focus {
	outline: none;
	border-color: var(--aef-search-accent, #3a86ff);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--aef-search-accent, #3a86ff) 22%, transparent);
}

.aef-search__clear {
	position: absolute;
	top: 50%;
	right: 8px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 1.4em;
	height: 1.4em;
	margin: 0;
	padding: 0;
	font-size: 1.15em;
	line-height: 1;
	color: #6b7280;
	background: transparent;
	border: 0;
	border-radius: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 0.7;
}

.aef-search--has-value .aef-search__clear {
	display: inline-flex;
}

.aef-search__clear:hover {
	opacity: 1;
	background: rgba(0, 0, 0, 0.08);
}

.aef-search__button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 8px 14px;
	font: inherit;
	line-height: 1.2;
	color: #fff;
	background: var(--aef-search-accent, #3a86ff);
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.aef-search__button-icon {
	display: inline-flex;
	line-height: 1;
}

.aef-search__button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* The search box shows no loading effect (the grid does) */
.aef-filter--search.aef-filter--loading {
	opacity: 1;
	pointer-events: auto;
}

.aef-filter--search .aef-filter__spinner,
.aef-filter--search.aef-filter--loading .aef-filter__spinner {
	display: none;
}

/* Loading state */
.aef-filter--loading {
	opacity: 0.6;
	pointer-events: none;
}

.aef-filter__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: aef-spin 0.7s linear infinite;
}

.aef-filter--loading .aef-filter__spinner {
	display: inline-block;
}

.aef-grid--loading {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

/* Clear filters button */
.aef-clear {
	display: flex;
}

.aef-clear--hidden {
	display: none;
}

.aef-clear__button {
	cursor: pointer;
	padding: 8px 16px;
	border: 1px solid currentColor;
	background: transparent;
	border-radius: 4px;
	line-height: 1.2;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.aef-notice {
	padding: 10px 14px;
	background: #fff8e5;
	border: 1px solid #ffd066;
	border-radius: 4px;
	color: #6b5200;
	font-size: 13px;
}

@keyframes aef-spin {
	to {
		transform: rotate(360deg);
	}
}