/**
 * Valfält som knappar (HN_Malgrupp). GeoDirs fält med få alternativ i
 * formulären för evenemang, aktiviteter och företag (frontend + wp-admin),
 * och HN Innehålls målgruppsruta. Vald knapp = grön (svitens OK-grönt),
 * ovald = vit med HN-blå kant. Vilka fält: FIELDS i hn-malgrupp.js.
 */

/* GeoDirs rullist bort: alla alternativ ska synas. Inline-stil kräver !important. */
.hn-chips.border,
.hn-chips.scrollbars-ios {
	max-height: none !important;
	overflow: visible !important;
	border: 0 !important;
	padding: 0 !important;
}

.hn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hn-chips .form-check,
.hn-chips .form-check.form-check-inline,
.hn-chips .hn-chip {
	position: relative;
	margin: 0;
	padding: 0;
	min-height: 0;
}

.hn-chips input[type="checkbox"],
.hn-chips input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.hn-chips label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 7px 16px;
	border: 2px solid #00354e;
	border-radius: 999px;
	background: #fff;
	color: #00354e;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	transition: background .12s, color .12s, border-color .12s;
}

.hn-chips label:hover {
	background: #eef3f6;
}

.hn-chips .is-on label,
.hn-chips label.is-on {
	background: #1e7e34;
	border-color: #1e7e34;
	color: #fff;
}

.hn-chips input[type="checkbox"]:focus-visible + label,
.hn-chips input[type="radio"]:focus-visible + label,
.hn-chips label:focus-within {
	outline: 2px solid #dd9b0c;
	outline-offset: 2px;
}