/**
 * Autocomplete dropdown styling.
 *
 * SPECIFICITY NOTE — do not "simplify" these doubled class selectors.
 *
 * Gravity Forms' theme framework ships a reset (gravity-forms-theme-reset.css)
 * shaped like:
 *
 *   .gform-theme--framework :where(:not(html):not(iframe)…) { position: unset;
 *   background: unset; list-style: unset; margin: unset; … }
 *
 * Because :where() contributes nothing, that rule scores (0,1,0) — identical to
 * a plain `.gfav-list` — and it is enqueued after this file, so it wins on
 * source order and flattens every property we set. Doubling the class raises us
 * to (0,2,0)+ and takes the layout back without resorting to !important.
 */

.gfav-wrap.gfav-wrap {
	position: relative;
	display: block;
}

.gfav-wrap.gfav-wrap .gfav-list.gfav-list {
	position: absolute;
	z-index: 1000;
	top: 100%;
	left: 0;
	right: 0;
	margin: var(--gfav-offset, 5px) 0 0;
	padding: 0;
	max-height: 17em;
	overflow-y: auto;
	list-style: none;
	background: var(--gfav-bg, #fff);
	color: var(--gfav-fg, #1a1a1a);
	border: 1px solid var(--gfav-border, rgba(0, 0, 0, 0.18));
	border-radius: var(--gfav-radius, 4px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
	font-size: 0.95em;
	line-height: 1.35;
	text-align: left;
}

.gfav-wrap.gfav-wrap .gfav-list.gfav-list[hidden] {
	display: none;
}

.gfav-wrap.gfav-wrap .gfav-option.gfav-option {
	margin: 0;
	padding: 0.5em 0.75em;
	cursor: pointer;
	list-style: none;
	background: transparent;
	border-bottom: 1px solid var(--gfav-border-soft, rgba(0, 0, 0, 0.06));
}

.gfav-wrap.gfav-wrap .gfav-option.gfav-option:last-child {
	border-bottom: 0;
}

.gfav-wrap.gfav-wrap .gfav-option.is-active,
.gfav-wrap.gfav-wrap .gfav-option.gfav-option:hover {
	background: var(--gfav-active-bg, rgba(0, 0, 0, 0.06));
}

.gfav-wrap.gfav-wrap .gfav-option-main.gfav-option-main {
	display: block;
	font-weight: 600;
}

.gfav-wrap.gfav-wrap .gfav-option-secondary.gfav-option-secondary {
	display: block;
	opacity: 0.7;
	font-size: 0.9em;
}

/* Screen-reader-only live region for the suggestion count. */
.gfav-wrap.gfav-wrap .gfav-status.gfav-status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gfav-wrap.gfav-wrap.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.65em;
	width: 0.9em;
	height: 0.9em;
	margin-top: -0.45em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0.5;
	animation: gfav-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
	.gfav-wrap.gfav-wrap.is-loading::after {
		animation: none;
	}
}

/*
 * Deliberately no prefers-color-scheme block. The dropdown sits on top of the
 * site's own form, so it has to match the site — not the visitor's OS. An
 * earlier version flipped to a dark panel for anyone browsing in dark mode,
 * which put a near-black menu over a light form. Sites that genuinely want a
 * dark dropdown can set the --gfav-* variables on .gfav-wrap.
 */