/**
 * Egen rullgardin — se autoload-functions/mhrf-select.php.
 *
 * Ligger i global/ och laddas på alla sidor: mhrf_select() anropas mitt i
 * sidan, och en stilmall som enqueue:as då hamnar i sidfoten.
 *
 * Utseendet anpassas per sammanhang med variablerna nedan, inte med nya regler
 * — sätt dem på en förälder, t.ex. `.mitt-filter { --mhrf-select-radie: 0 }`:
 *
 *   --mhrf-select-ram    standard --blue-primary--trans-60, samma ram som
 *                        försäkringskalkylatorns fält (.mhrf-calculator)
 *   --mhrf-select-radie  standard --radius-s
 *
 * Standardvärdena står som fallback i reglerna och INTE som deklaration på
 * .mhrf-select — då hade de skuggat det föräldern sätter.
 */
.mhrf-select {
	/* Ankaret för listan, som svävar över innehållet under. */
	position: relative;
}

/*
 * Customizerns "Ytterligare CSS" har under 767px
 * `div.overflow-table { position: relative; z-index: 9999999 }` — tabellen
 * ritades ovanpå den öppna listan på mobil. Bara den öppna lyfts, så att
 * rullgardinen inte ligger över annat i vanligt läge.
 */
.mhrf-select--oppen {
	z-index: 10000000;
}

/*
 * Ramen har samma färg i alla lägen — vald, öppen och fokuserad. Beslut
 * 2026-10-13: ingen fokusmarkering, samma som sökfältet i klubbfiltret.
 */
.mhrf-select-knapp {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--mhrf-select-ram, var(--blue-primary--trans-60, #85a6d1));
	border-radius: var(--mhrf-select-radie, var(--radius-s, 4px));
	background: #fff;
	font-size: 1rem;
	line-height: 1.4;
	cursor: pointer;
	user-select: none;
}

.mhrf-select-knapp:focus,
.mhrf-select-knapp:focus-visible {
	outline: none;
}

.mhrf-select-varde {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mhrf-select-pil {
	flex: 0 0 auto;
	color: var(--blue-primary, #15529f);
	transition: transform 0.15s ease;
}

.mhrf-select--oppen .mhrf-select-pil {
	transform: rotate(180deg);
}

/*
 * Temats `ol, ul` och `ul li` ger listan indrag, punkter och marginaler
 * (uppmätt: ul 0 0 30px 16px, li 10px under) — nollställs här och nedan.
 */
.mhrf-select-lista {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--mhrf-select-ram, var(--blue-primary--trans-60, #85a6d1));
	border-radius: var(--mhrf-select-radie, var(--radius-s, 4px));
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.mhrf-select-alternativ {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 8px 14px;
	font-size: 0.9375rem;
	line-height: 1.35;
	cursor: pointer;
}

/* Mus och tangentbord delar samma markering, se mhrf-select.js. */
.mhrf-select-alternativ--aktiv {
	background: var(--blue-secondary, #ebf1f8);
}

.mhrf-select-alternativ[aria-selected="true"] {
	font-weight: 600;
	color: var(--blue-primary, #15529f);
}

.mhrf-select-antal {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--gray-primary, #435b79);
}