/**
 * Cookie Monster (Twize) in de huisstijl
 *
 * De popup stond in de standaardkleuren van de plugin: een felblauwe
 * knop "Accepteer alle" (#0000F9) naast een grijze "Accepteer selectie",
 * en "Weiger alle" als klein tekstlinkje eronder.
 *
 * HOE DIT WERKT
 * De plugin is opgebouwd met eigen custom properties (--popup-*) en zet
 * op elke knop een data-submit-attribuut: all, selected of refuse.
 * Daarmee is de popup te stylen zonder op volgorde of nth-child te
 * leunen — die zouden omklappen zodra de plugin de knoppen anders zet.
 *
 * DRIE KNOPPEN VAN GELIJK GEWICHT
 * "Weiger alle" is nu net zo'n knop als de andere twee, en niet langer
 * een klein linkje. Weigeren hoort even makkelijk te zijn als
 * accepteren; een weigeroptie die wegvalt tegen een grote gekleurde
 * knop is precies waar toezichthouders op wijzen. De merkkleur zit op
 * "Accepteer alle", zoals bij elke primaire knop op de site.
 *
 * De schakelaars stonden aan en uit allebei in een lichtgrijs
 * (#E3E3E3 tegen #CCC): niet te zien welke aanstond. Aan is nu midnight.
 *
 * De basistekst van de plugin is 1.4rem; op deze site is dat te groot
 * en vult de balk te veel van het scherm.
 */

.twz-cm-popup {
	--popup-textsize: 1.3rem;

	--popup-backgroundcolor: var(--bw-white);
	--popup-textcolor: var(--bw-midnight);
	--popup-bordercolor: var(--bw-border);
	--popup-borderradius: var(--bw-radius-sm);

	--popup-btn-allow-all-bg: var(--bw-caramel-surface);
	--popup-btn-allow-all-textcolor: var(--bw-midnight);
	--popup-btn-allow-selected-bg: transparent;
	--popup-btn-allow-selected-textcolor: var(--bw-midnight);
	--popup-btn-refuse-bg: transparent;
	--popup-btn-refuse-textcolor: var(--bw-midnight);

	--popup-slider-bg: var(--bw-midnight);
	--popup-slider-bg-default: var(--bw-border-strong);
	--popup-slider-thumb-bg: var(--bw-white);
}

/* Vorm en letter van .bw-btn, zodat de knoppen bij de site horen. */
.twz-cm-popup__buttons button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.6rem;
	border: 2px solid currentColor;
	border-radius: var(--bw-radius-sm);
	font-family: var(--bw-font-heading);
	font-size: var(--bw-text-sm);
	font-weight: 500;
	letter-spacing: var(--bw-tracking-caps);
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

/* De plugin lijnt "Weiger alle" links uit; die stond als linkje opgemaakt. */
.twz-cm-popup__buttons button[data-submit] {
	justify-content: center;
}

.twz-cm-popup__buttons button[data-submit="all"] {
	border-color: var(--bw-caramel-surface);
}

.twz-cm-popup__buttons button[data-submit="all"]:hover {
	background-color: var(--bw-caramel);
	border-color: var(--bw-caramel);
}

.twz-cm-popup__buttons button[data-submit="selected"]:hover,
.twz-cm-popup__buttons button[data-submit="refuse"]:hover {
	background-color: var(--bw-midnight);
	color: var(--bw-white);
}

/* De schakelaars: iets smaller en het knopje netjes in het midden. */
.twz-cm-popup__cookies-cookie__check {
	flex: 0 0 3.8rem;
}

.twz-cm-popup__cookies-cookie__check-slider::before {
	left: 4px;
	bottom: 3px;
}