/* Cookie Though: gecentreerde, prominente cookiebanner in Social Taco-stijl.
   De banner zelf zit in een shadow DOM; hier stylen we het host-element en
   geven we de --ct-variabelen door. Fijnere styling van de binnenkant staat in
   /assets/min/lib/cookie-preferences.js (style-injectie in de shadow root). */

.cookie-though {
	/* Positie: midden van het scherm, met gedimde achtergrond via box-shadow.
	   De bibliotheek zet in de shadow root `bottom: var(--ct-default-padding)
	   !important` op het host-element; een !important in de shadow root wint
	   van het document, dus bottom laten we staan en we schuiven het element
	   met een transform naar het midden: vanaf de onderrand omhoog met een
	   halve viewport, min de eigen bottom-afstand, plus de halve eigen hoogte. */
	position: fixed !important;
	top: auto !important;
	left: 50% !important;
	right: auto !important;
	transform: translate(-50%, calc(-50vh + var(--ct-default-padding) + 50%));
	width: min(64rem, calc(100vw - 3rem)) !important;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	border-radius: 2.4rem;
	background: #fff;
	box-shadow: 0 0 0 100vmax rgba(0, 0, 70, 0.6), 0 3rem 8rem rgba(0, 0, 70, 0.35);
	z-index: 99999;
	opacity: 1;
	transition: opacity 0.35s ease, transform 0.35s ease;

	/* kleuren */
	--ct-white: #ffffff;
	--ct-primary-100: #3368EA; /* rand van een aangevinkte voorkeur */
	--ct-primary-200: #000046; /* rand van voorkeuren */
	--ct-primary-300: #3368EA;
	--ct-primary-400: #000046;
	--ct-text: #000046;
	--ct-title: #000046;
	--ct-subtitle: #3368EA;
	--ct-cookie: #E3AC00;
	--ct-policy: #ffffff;
	--ct-policy-enabled: #3368EA;
	--ct-policy-text: #000046;
	--ct-policy-text-enabled: #ffffff;
	--ct-policy-essential: #EEF3FF; /* licht, zodat de tekst leesbaar blijft */
	--ct-enabled-option-color: #ffffff;
	--ct-gray-300: #D9D9D9;
	--ct-slider-primary: #000046;
	--ct-slider-secondary: #D9D9D9;
	--ct-slider-enabled-primary: #ffffff;
	--ct-slider-enabled-secondary: #E3AC00;

	/* maten */
	--ct-text-margin: 1.6rem;
	--ct-default-padding: 4rem;
	--ct-seperator-padding: 0.8rem;
	--ct-heading-font-size: 3.2rem;
	--ct-sub-heading-font-size: 1.8rem;
	--ct-text-font-size: 1.5rem;

	/* knoppen: zelfde pil-vorm als de knoppen op de site */
	--ct-button-font-size: 1.5rem;
	--ct-button-radius: 999px;
	--ct-button-border: 2px solid #000046;
	--ct-button-padding: 1.3rem 2.8rem;
	--ct-button: #000046;
	--ct-button-color: #ffffff;
	--ct-button-secondary: transparent;
	--ct-button-secondary-color: #000046;
	--ct-button-secondary-border: 2px solid #000046;

	/* typografie */
	--ct-primary-font: 'Gilroy', sans-serif;
	--ct-primary-font-weight: 700;
	--ct-secondary-font: 'Gilroy', sans-serif;
	--ct-secondary-font-weight: 500;
	--ct-z-index: 99999;
}

/* verborgen: uitfaden in plaats van van het scherm schuiven */
.cookie-though:not(.visible) {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, calc(-50vh + var(--ct-default-padding) + 50% + 2rem));
}

@media (max-width: 600px) {
	.cookie-though {
		--ct-default-padding: 2.8rem;
		--ct-heading-font-size: 2.6rem;
		--ct-text-font-size: 1.4rem;
		--ct-button-font-size: 1.4rem;
		--ct-button-padding: 1.2rem 2.2rem;
		border-radius: 2rem;
	}
}