/*------------------------------------*\

    WebFX Choices.js Customizations - Global styling for select box/text inputs using Choices.js

    Scoped to Gravity Forms wrappers so site selects outside GF are unaffected.

\*------------------------------------*/

.gform_wrapper .choices {
	font-family: var(--fx-gf-font, "Nunito", sans-serif);
	font-size: 18px;
	margin-bottom: 0;
}

.gform_wrapper .choices__inner {
	align-items: center;
	background-color: var(--fx-gf-bg, #ffffff);
	border: 1px solid var(--fx-gf-border, #cecece);
	border-radius: var(--fx-gf-radius, 12px);
	color: var(--fx-gf-muted, #717073);
	display: flex;
	font-size: 18px;
	height: var(--fx-gf-control-height, 56px);
	line-height: 1.4;
	min-height: var(--fx-gf-control-height, 56px);
	padding: 0 44px 0 18px;
	vertical-align: top;
}

.gform_wrapper .choices__list--single {
	display: flex;
	align-items: center;
	padding: 0;
	width: 100%;
}

.gform_wrapper .choices__list--single .choices__item {
	color: var(--fx-gf-muted, #717073);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
	padding: 0;
	width: 100%;
}

.gform_wrapper .choices__placeholder {
	color: #a0a0a0;
	opacity: 1;
}

.gform_wrapper .choices[data-type*="select-one"]::after {
	border-color: var(--fx-gf-muted, #717073) transparent transparent;
	border-width: 6px 5px 0;
	margin-top: -3px;
	right: 18px;
}

.gform_wrapper .choices[data-type*="select-one"].is-open::after {
	border-color: transparent transparent var(--fx-gf-muted, #717073);
	border-width: 0 5px 6px;
	margin-top: -3px;
}

.gform_wrapper .choices.is-focused .choices__inner,
.gform_wrapper .choices.is-open .choices__inner {
	border-color: var(--fx-gf-red, #ff0000);
	box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.12);
}

.gform_wrapper .choices__list--dropdown,
.gform_wrapper .choices__list[aria-expanded] {
	background-color: var(--fx-gf-bg, #ffffff);
	border: 1px solid var(--fx-gf-border, #cecece);
	border-radius: var(--fx-gf-radius, 12px);
	margin-top: 6px;
	overflow: hidden;
	z-index: 20;
}

.gform_wrapper .choices__list--dropdown .choices__item,
.gform_wrapper .choices__list[aria-expanded] .choices__item {
	color: var(--fx-gf-text, #393738);
	font-size: 16px;
	padding: 10px 18px;
}

.gform_wrapper .choices__list--dropdown .choices__item--selectable.is-highlighted,
.gform_wrapper .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
	background-color: var(--fx-gf-bg-soft, #f5f5f5);
	color: var(--fx-gf-text, #393738);
}

.gform_wrapper .choices.is-disabled .choices__inner {
	background-color: var(--fx-gf-bg-soft, #f5f5f5);
	cursor: not-allowed;
}

/* Hide native select arrow styles once Choices has replaced the control. */
.gform_wrapper .choices select.gfield_select {
	background-image: none;
}