/**
 * Vehicle Selector styles
 */


.vehicle-selector {}

.vehicle-selector--form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background: white;
}

.vehicle-selector--filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex: 99 1 500px;
	overflow: hidden;
}
.vehicle-selector--filters:has( .fs-open ) {
	overflow: visible;
}

.vehicle-selector--filter {
	position: relative;
	flex: 250px;
	padding: 12px 15px;
	font-size: 14px;
}

.vehicle-selector--filter:not(:last-of-type)::before,
.vehicle-selector--filter:not(:last-of-type)::after {
	content: "";
	position: absolute;
	background: rgb( 0 0 0 / 0.3 );
}
.vehicle-selector--filter:not(:last-of-type)::before {
	top:    10px;
	right:  -1px;
	bottom: 10px;
	width: 1px;
}
.vehicle-selector--filter:not(:last-of-type)::after {
	left:   10px;
	right:  10px;
	bottom: -1px;
	height: 1px;
}

.vehicle-selector .facetwp-facet {
	margin: 0;
}

.vehicle-selector .fs-wrap {
	display: block;
	width: 100%;
}

.vehicle-selector .fs-label-wrap {
	color: var(--theme--blackish);
	border: none;
}

.vehicle-selector .fs-dropdown {
	/* pull flush with borders */
	left:  -15px;
	right: -15px;
	width: auto;
	border: none;
	box-shadow: 0 6px 6px rgb( 0 0 0 / 0.1 );
}

.vehicle-selector .fs-arrow {
	--size: 10px;

	top: calc( -1 * calc( var(--size) / 2 ) );
	width:  var(--size);
	height: var(--size);
	border: none;
	border-right:  1px solid var(--theme--green);
	border-bottom: 1px solid var(--theme--green);
	transform: rotate(45deg);
}
.vehicle-selector .fs-open .fs-arrow {
	transform: rotate(-135deg);
}

.vehicle-selector :is(
	.fs-option,
	.fs-search
) {
	/* line text back up with value placeholder */
	padding-left:  23px;
	padding-right: 23px;
}

.vehicle-selector .fs-search {
	position: relative;
	z-index: 1;
	box-shadow: 0 2px 2px rgb( 0 0 0 / 0.1 );
}

.vehicle-selector .fs-option:is(
	:hover,
	:focus
) {
	background-color: var(--theme--light-gray);
}
.vehicle-selector .fs-wrap.single .fs-option.selected {
	font-weight: 500;
	color: white;
	background-color: var(--theme--teal);
}

/* Make / Model: Depth 0 options are Make, which we are disabling */
.vehicle-selector--make .fs-option.d0 {
	cursor: default;
}
.vehicle-selector--make .fs-option.d0:is(
	:hover,
	:focus
) {
	background-color: transparent;
}

.vehicle-selector .facetwp-type-fselect:has( .vehicle-selector--clear-button ) .fs-label {
	padding-right: 45px;
}

.vehicle-selector .facetwp-type-fselect .vehicle-selector--clear-button {
	--size: 10px;
	--pad:  5px;

	position: absolute;
	top: 50%;
	right: 25px;
	transform: translateY( -50% );
	width:  calc( var(--size) + calc( 2 * var(--pad) ) );
	height: calc( var(--size) + calc( 2 * var(--pad) ) );
	background: transparent url('/wp-content/plugins/facetwp/assets/images/icon-close.png') center no-repeat;
	background-size: var(--size);
	border: none;
	opacity: 0.3;
	transition: var(--theme--button--transition);
}
.vehicle-selector .facetwp-type-fselect .vehicle-selector--clear-button:is(
	:hover,
	:focus
) {
	opacity: 0.8;
}

.vehicle-selector--actions {
	flex: max-content;
}

.et-db #et-boc .et-l .vehicle-selector--submit.et_pb_button {
	--theme--button--pad-top:    8px;
	--theme--button--pad-h:      40px;
	--theme--button--pad-bottom: 8px;

	width: 100%;
	font-size: 16px;
	line-height: 28px !important;
}
.et-db #et-boc .et-l .vehicle-selector--submit.et_pb_button:is(
	[disabled],
	.disabled
) {
	color: rgb( 255 255 255 / 0.5 ) !important;
	background-color: var(--theme--button--background-color) !important;
	border-color: var(--theme--button--border-color) !important;
}

/* Hide the dummy template container */
.vehicle-selector--template {
	display: none;
}



/*! - FacetWP Template */

/* Fade in/out of the whole listing template */
.facetwp-template {
	opacity: 1;
	transition: opacity 0.1s ease-out;
}

.facetwp-template.loading {
	opacity: 0.3;
}

.theme--loading-icon {
	display: block;
	position: absolute;
	top:  min( 50%, 200px );
	left: 50%;
	width:  30px;
	height: 30px;
	background-image: url('/wp-content/plugins/facetwp/assets/images/loading.png');
	background-size: cover;
	animation: theme--loader-spin 700ms infinite linear;
	opacity: 0;
	z-index: -1;
}

/* Fade in/out of the loading icon */
.theme--loading-icon.loading {
	opacity: 1;
	z-index: 2;
	transition: opacity 0.2s ease-out;
}

@keyframes theme--loader-spin {
	from {
		transform: translate( -50%, -50%)
		           rotate( 0deg );
	}

	to {
		transform: translate( -50%, -50% )
		           rotate( 360deg );
	}
}


/*! Replacement Prompt */

.vehicle-selector--select-prompt {
	width: max-content;
	margin: 0 auto;
	padding: 30px 60px;
	text-align: center;
	background: var(--theme--light-gray);
}

.vehicle-selector--select-prompt--title {
}
.vehicle-selector--select-prompt--title:last-child {
	padding-bottom: 0;
}

.et-db #et-boc .et-l .vehicle-selector--select-prompt--link {
	color: inherit;
}