/*
 * 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. Heeft een EIGEN kleurvariabele (--vit-triple-toggle-color),
 * los in te stellen van --vit-toggle-color (de Ja/Nee-schuifbutton).
 */

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

.vit-triple-toggle-option.vit-tt-aus-excluded {
	opacity: 0.4;
	filter: grayscale(60%);
	cursor: not-allowed;
	pointer-events: none;
}

/* 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%;
	/* Geen max-width meer -- was 480px, waardoor de schuifbutton (bv. bij
	   Bladgroepen) veel smaller oogde dan de brede swatch-rij eronder. Nu
	   vult 'ie gewoon dezelfde breedte als de rest van de add-ons-groep
	   (bv. 10 swatches breed), voor een nette, uitgelijnde weergave. */
	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. Eigen kleur-
	   variabele (i.p.v. de Ja/Nee-schuifbutton se --vit-toggle-color),
	   zodat de twee onafhankelijk van elkaar in te stellen zijn. */
	width: calc( ( 100% - 6px ) / var( --vit-tt-count, 3 ) );
	background-color: var( --vit-triple-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;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Vaste minimumhoogte (genoeg voor 2 tekstregels) zodat ELKE drieweg-
	   schuifbutton op de pagina even dik is, ongeacht of de labels van
	   déze specifieke groep toevallig naar 2 regels wrappen of niet (bv.
	   "Free Standing"/"L-shape" bij Akoestisch scherm t.o.v. de kortere,
	   nooit-wrappende labels bij Wangenpoot). Kortere labels worden
	   dankzij align-items:center gewoon verticaal gecentreerd. */
	min-height: 52px;
	padding: 8px 6px;
	font-size: 0.9em;
	line-height: 1.25;
	color: #555555;
	transition: color 0.18s ease;
}

.vit-triple-toggle-option-label {
	display: block;
}

/* Meerprijs-regel: kleiner en iets lichter dan het label zelf, zodat
   opties MET een meerprijs opvallen zonder dat de hele schuifbutton
   voller oogt bij opties ZONDER meerprijs (die krijgen dit element
   niet eens gerenderd, zie triple-toggle.js). */
.vit-triple-toggle-option-price {
	display: block;
	font-size: 0.82em;
	opacity: 0.75;
	margin-top: 2px;
}

.vit-triple-toggle-option.is-active .vit-triple-toggle-option-price {
	opacity: 0.9;
}

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

/* Klein rond vinkje (wit rondje, groen vinkje) linksboven op het actief
   gekozen segment -- extra visuele bevestiging bovenop de kleur-highlight,
   handig zodra de klant net geklikt heeft. Puur CSS: verschijnt/verdwijnt
   vanzelf met de .is-active-class die triple-toggle.js al zet, geen losse
   JS-wijziging nodig.
   BEWUST geen SVG-data-URI (eerdere versie) -- die liet op deze site alle
   schuiven verdwijnen, vermoedelijk doordat iets in de upload/hosting-laag
   het "data:image/svg+xml...#..."-patroon niet verwerkte. Dit is de
   klassieke, puur-CSS "rotated border"-vinkjestruc: geen data-URI, geen
   bijzondere tekens, werkt overal. Kleur van het vinkje volgt niet
   automatisch --vit-triple-toggle-color als die per site wordt
   overschreven; staat vast op #2ecc71 (de standaard-highlightkleur). */
.vit-triple-toggle-option.is-active::before {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: #ffffff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	z-index: 2;
}
.vit-triple-toggle-option.is-active::after {
	content: '';
	position: absolute;
	top: -5px;
	left: -1px;
	width: 4px;
	height: 7px;
	border: solid #2ecc71;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	z-index: 3;
}

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