/**
 * advSelect — custom select component (pairs with assets/js/adv-select.js).
 *
 * Base, reusable styles. Page-level skins (e.g. the jobs archive floating
 * label anchors) style .advs-trigger alongside their native select rules.
 */

.advs-native[data-adv-enhanced] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0;
	pointer-events: none;
	margin: 0;
	padding: 0;
	border: 0;
	/* Page-level skins (e.g. jobs-archive.css's .fanchor select) put a generic
	   `transition: 0.15s` on the native select for its hover/focus states. Left
	   unset here, that transition also animates the jump to 1x1 above, and
	   because this element keeps its layout box while invisible (opacity, not
	   display), the animated shrink ripples into sibling flex items for the
	   full duration — a visible reflow, not the intended instant swap. */
	transition: none !important;
}

.advs-trigger {
	display: block;
	width: 100%;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.advs-trigger .advs-value {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.advs-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 100%;
	width: max-content;
	max-width: min(320px, 92vw);
	background: #fff;
	border: 1px solid #e5eaf0;
	border-radius: 14px;
	box-shadow: 0 16px 48px rgba(15, 23, 34, 0.18);
	z-index: 1320;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}

.advs-panel[hidden] {
	display: none;
}

.advs-panel.advs-up {
	top: auto;
	bottom: calc(100% + 6px);
}

.advs-panel.advs-in {
	opacity: 0;
	transform: translateY(4px);
}

.advs-panel.advs-up.advs-in {
	transform: translateY(-4px);
}

.advs-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid #eef2f6;
	flex: none;
}

.advs-search[hidden] {
	display: none;
}

.advs-search svg {
	width: 15px;
	height: 15px;
	color: #0ca2d4;
	flex: none;
}

.advs-search input,
.advs-search input[type="text"] {
	border: none;
	border-radius: 0;
	outline: none;
	box-shadow: none;
	flex: 1;
	min-width: 0;
	height: auto;
	/* 16px floor: stops iOS Safari auto-zoom when a searchable dropdown opens. */
	font-size: 16px;
	font-weight: 500;
	color: #0f1722;
	background: transparent;
	padding: 2px 0;
}

.advs-search input:focus,
.advs-search input[type="text"]:focus {
	border: none;
	outline: none;
	box-shadow: none;
}

.advs-search input::placeholder {
	color: #64748b;
	font-weight: 400;
}

.advs-list {
	list-style: none;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	max-height: 296px;
	overscroll-behavior: contain;
	outline: none;
}

.advs-group {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #64748b;
	padding: 10px 10px 4px;
}

.advs-group:first-child {
	padding-top: 6px;
}

.advs-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	color: #16263b;
	cursor: pointer;
	margin: 0;
}

/* The class above sets display, which beats the UA [hidden] rule, so filtered
   options must be hidden explicitly. */
.advs-opt[hidden] {
	display: none;
}

.advs-opt.is-placeholder {
	color: #64748b;
	font-weight: 500;
}

.advs-opt svg {
	width: 15px;
	height: 15px;
	color: #0879a2;
	flex: none;
	opacity: 0;
}

.advs-opt.is-active {
	background: #e3f6fc;
	color: #0879a2;
}

.advs-opt.is-selected {
	color: #0879a2;
	font-weight: 700;
}

.advs-opt.is-selected svg {
	opacity: 1;
}

.advs-empty {
	padding: 14px 16px;
	font-size: 13.5px;
	color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
	.advs-panel {
		transition: none;
	}
}