/*
 * Drieweg-schuifbutton (of eigenlijk: N-weg): laat de klant kiezen TUSSEN
 * meerdere opties BINNEN 1 Product Add-ons-groep (bv. Side panels: Wang /
 * Open / Poot), als visuele segmenten-schuiver i.p.v. losse radiobuttons.
 *
 * Anders dan toggle-switch.css (vaste "Geen"/"Inclusief"-tekst, alleen voor
 * 2-optie Ja/Nee-groepen) toont dit de ECHTE labels van de groep, en werkt
 * voor elk aantal opties (2, 3, 4, ...) -- al is "drieweg" de gebruikelijke
 * toepassing. Hergebruikt dezelfde --vit-toggle-color-variabele voor
 * visuele consistentie met de andere Vitiq-schuifbuttons.
 */

.vit-triple-toggle-wrap {
	margin: 6px 0 18px;
}

/* Origineel radio-item visueel verbergen, maar toegankelijk/functioneel
   houden -- GEEN display:none, zodat validatie die op zichtbaarheid let
   niet in de war raakt. Eigen klasse (i.p.v. de gelijknamige uit
   toggle-switch.css) zodat dit bestand op zichzelf werkt, ook als de
   Ja/Nee-schuifbutton voor dit product niet aanstaat. */
.vit-triple-toggle-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.vit-triple-toggle-list-compact {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
}

.vit-triple-toggle {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 480px;
	background-color: #e4e6e8;
	border: 1px solid #bdc3c7;
	border-radius: 4px; /* rechthoekig, past bij de andere schuifbuttons */
	padding: 3px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.vit-triple-toggle-highlight {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 3px;
	/* Breedte en verschuiving worden per instantie in JS gezet via
	   CSS-variabelen (--vit-tt-count/--vit-tt-index), zodat dit voor elk
	   aantal opties werkt zonder aparte CSS per aantal. */
	width: calc( ( 100% - 6px ) / var( --vit-tt-count, 3 ) );
	background-color: var( --vit-toggle-color, #2ecc71 );
	border-radius: 2px;
	transition: transform 0.18s ease;
	z-index: 0;
	transform: translateX( calc( var( --vit-tt-index, 0 ) * 100% ) );
}

.vit-triple-toggle-option {
	position: relative;
	z-index: 1;
	flex: 1 1 0;
	text-align: center;
	padding: 8px 6px;
	font-size: 0.9em;
	line-height: 1.25;
	color: #555555;
	transition: color 0.18s ease;
}

.vit-triple-toggle-option.is-active {
	color: #ffffff;
	font-weight: 600;
}

.vit-triple-toggle:focus-visible {
	outline: 2px solid var( --vit-toggle-color, #2ecc71 );
	outline-offset: 2px;
}