/* ----------------------------------------------------------------
   Reggal Multistep Filter
   ---------------------------------------------------------------- */

.wmf-filter {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-s);
	box-sizing: border-box;
}

.wmf-filter *,
.wmf-filter *::before,
.wmf-filter *::after {
	box-sizing: border-box;
}

/* Selects row */
.wmf-filter__selects {
	display: flex;
	flex: 1 1 0%;
	gap: var(--space-s);
	min-width: 0;
}

.wmf-filter__field {
	flex: 1 1 0%;
	position: relative;
	min-width: 0;
}

/* ---- Select2 overrides ---- */
.wmf-filter .select2-container {
	width: 100% !important;
	min-height: 54px;
}

.wmf-filter .select2-container--default .select2-selection--single {
	height: 54px;
	border: 2px solid transparent;
	border-radius: 0;
	background: var(--white);
	transition: border-color 0.2s, box-shadow 0.2s;
}


.wmf-filter .select2-container--default.select2-container--focus .select2-selection--single,
.wmf-filter .select2-container--default.select2-container--open .select2-selection--single,
.wmf-filter .select2-container--default:hover .select2-selection--single {
	border-color: var(--secondary-semi-light);
	box-shadow: none;
	outline: none;
}

.wmf-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 50px;
	padding-left: 16px;
	padding-right: 40px;
	color: var(--base);
	font-size: var(--text-m);
	font-weight: 700;
}

.wmf-filter .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--base-medium);
	font-weight: 400;
}

.wmf-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 50px;
	width: 28px;
	right: 10px;
}

.wmf-filter .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border: none;
	width: 13px;
	height: 8px;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url('../images/arrow.svg') no-repeat center center;
	background-size: contain;
	transition: transform 0.2s;
}

.wmf-filter .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border: none;
	transform: translate(-50%, -50%) rotateX(180deg);
}

.wmf-filter .select2-container--default .select2-selection--single .select2-selection__clear {
	margin-right: 4px;
	color: var(--base-medium);
	font-size: 30px;
    font-weight: 400;
	transition: .2s all ease-in-out;
}

.wmf-filter .select2-container--default .select2-selection--single .select2-selection__clear:hover {
	color: var(--action);
}

/* Disabled state */
.wmf-filter .select2-container--default.select2-container--disabled .select2-selection--single {
	cursor: not-allowed;
	border-color: transparent;
	opacity: .8;
}

.wmf-filter .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
	color: var(--base-medium);
}

/* Dropdown panel (appended to body by Select2) */
.select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--action-trans-10) !important;
	font-weight: 400;
	color: var(--base);
}

.select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[data-selected=true] {
	background-color: transparent;
}

.select2-container--open .select2-dropdown {
	border: 2px solid var(--secondary-semi-light);
	border-radius: 0;
	z-index: 99999;
}

.select2-container--open .select2-dropdown--above {
	border-bottom: none;
}

.select2-container--open .select2-dropdown--below {
	border-top: none;
}

.select2-container--open .select2-results__option {
	padding: 10px 8px;
}

.select2-container .select2-results .select2-results__options {
	padding: 8px;
}

.select2-container .select2-results .select2-results__options::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background: var(--secondary);
}

.select2-container .select2-results .select2-results__options::-webkit-scrollbar-thumb {
	background: var(--primary);
}

/* ---- Loading spinner for fields ---- */
.wmf-filter__field.wmf-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 12px;
	width: 22px;
	height: 22px;
	margin-top: -10px;
	border: 3px solid var(--secondary-light);
	border-top-color: var(--action);
	border-radius: 50%;
	animation: wmf-spin 0.6s linear infinite;
	z-index: 10;
	pointer-events: none;
}

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

.wmf-filter__field.wmf-loading .select2-selection__arrow {
	visibility: hidden;
}

/* ---- Search button ---- */
.wmf-filter__action {
	flex-shrink: 0;
}

.wmf-button {
	position: relative;
	white-space: nowrap;
	height: 54px;
}

.wmf-button[disabled] {
	background-color: var(--action-light);
	cursor: not-allowed;
}

.wmf-button .wmf-button__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 1;
}

.wmf-button .wmf-button__spinner svg {
	display: block;
}

.wmf-button.wmf-button--loading {
	opacity: 1;
	cursor: wait;
}

.wmf-button.wmf-button--loading .wmf-button__text {
	visibility: hidden;
}

.wmf-button.wmf-button--loading .wmf-button__spinner {
	display: block;
}

/* ---- Toast notice ---- */
.wmf-notice {
	position: absolute;
	bottom: -44px;
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--action);
	color: var(--white);
	padding: 8px 20px;
	border-radius: 3px;
	font-size: var(--text-m);
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
	z-index: 10;
	pointer-events: none;
}

.wmf-notice--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
	.wmf-filter {
		flex-direction: column;
	}

	.wmf-filter__selects {
		flex-direction: column;
		width: 100%;
	}

	.wmf-filter__field {
		width: 100%;
	}

	.wmf-filter__action {
		width: 100%;
	}

	.wmf-button {
		width: 100%;
	}

	.wmf-notice {
		bottom: -40px;
	}
}