/*
 * Groep-schuifbutton: schuifbutton om te kiezen TUSSEN twee hele Product
 * Add-ons-groepen (bv. "Milano Triple Blad-afwerking" vs. "Milano Triple
 * Overige Bladgroepen"), in plaats van tussen twee opties BINNEN 1 groep
 * (dat doet toggle-switch.css/.js al, voor Ja/Nee-groepen).
 *
 * Zelfde formaat/opmaak als de drieweg-schuifbutton (triple-toggle.css),
 * inclusief een EIGEN kleurvariabele (--vit-group-toggle-color), los in te
 * stellen van de Ja/Nee-schuifbutton én de drieweg-schuifbutton.
 */

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

.vit-group-toggle {
	position: relative;
	display: flex;
	width: 100%;
	/* Geen max-width meer -- was 480px, waardoor deze schuifbutton veel
	   smaller oogde dan de andere schuiven (Ja/Nee, drieweg) en de brede
	   swatch-rijen eronder. Zelfde fix als triple-toggle.css al kreeg: nu
	   vult 'ie gewoon dezelfde breedte als de rest van de add-ons-groep,
	   voor een nette, uitgelijnde weergave. */
	background-color: #e4e6e8;
	border: 1px solid #bdc3c7;
	border-radius: 4px;
	padding: 3px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.vit-group-toggle-highlight {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 3px;
	width: calc( 50% - 3px );
	background-color: var( --vit-group-toggle-color, #2ecc71 );
	border-radius: 2px;
	transition: transform 0.18s ease;
	z-index: 0;
}

.vit-group-toggle.is-b .vit-group-toggle-highlight {
	transform: translateX( 100% );
}

.vit-group-toggle-option {
	position: relative;
	z-index: 1;
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Zelfde vaste minimumhoogte als de drieweg-schuifbutton, zodat beide
	   schuiftypen er op eenzelfde pagina consistent uitzien. */
	min-height: 52px;
	padding: 8px 10px;
	font-size: 0.92em;
	line-height: 1.25;
	color: #555555;
	transition: color 0.18s ease;
}

.vit-group-toggle:not(.is-b) .vit-group-toggle-option-a,
.vit-group-toggle.is-b .vit-group-toggle-option-b {
	color: #ffffff;
	font-weight: 600;
}

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