/* Cookiebanner — Complianz in de huisstijl van rotterdam.sportfondsen.nl.
 *
 * Alleen uiterlijk. De markup, de knoppen en alle logica blijven van Complianz: welke knop
 * wat doet, wanneer het voorkeurenscherm opengaat en hoe toestemming wordt opgeslagen komt
 * onveranderd uit de plugin. Wat hier gebeurt is bepalen hoe die knoppen eruitzien en waar
 * ze staan.
 *
 * Twee dingen bepalen hoe dit bestand geschreven is:
 *
 * 1. Complianz genereert per banner een eigen stylesheet
 *    (uploads/complianz/css/banner-1-optout.css) en hangt die met JavaScript in de <head>.
 *    Die komt dus ALTIJD ná dit bestand in de cascade; bij gelijk gewicht wint hij. Daarom
 *    staat overal `body` voor de selector — dat maakt (0,1,1) van (0,1,0) en is genoeg voor
 *    vrijwel alles wat de plugin zet. Waar de plugin zelf twee classes gebruikt, staan er
 *    hier ook twee plus body.
 * 2. Diezelfde stylesheet zet zijn kleuren en maten als custom properties op :root. Waar dat
 *    kan sturen we die variabelen aan in plaats van losse regels: dat blijft dichter bij de
 *    plugin en overleeft een update beter. `html:root` is nodig omdat `:root` in zijn eentje
 *    even zwaar is en later laadt.
 *
 * Eén regel die hier NIET staat, bewust: `display` op de generieke `.cmplz-btn`. Complianz
 * verbergt Voorkeuren opslaan met `display: none` en zet dat met JavaScript weer aan via een
 * inline style. Een zwaardere display-regel op alle knoppen zou die knop permanent zichtbaar
 * maken en dus de staatwisseling van de plugin breken.
 *
 * Maten overgenomen uit de Tailwind-build van het origineel: container 640/768/1024/1280/1560
 * met 16px goot, tekstkolom 100% / 2-3 / 3-4, knopkolom 100% / 1-3 / 1-4, knop 2px #d70b8c
 * met radius 100px, hoverschaduw 0 5px 10px rgba(0,0,0,.25), actief #ac0870, tekst Raleway
 * 16px/25px met 0,6px spatiëring.
 */

html:root {
	/* Vlak en rand */
	--cmplz_banner_background_color: #ffffff;
	--cmplz_banner_border_color: #f2f2f2;
	--cmplz_banner_border_width: 2px 0 0 0;
	--cmplz_banner_border_radius: 16px 16px 0 0;
	--cmplz_banner_margin: 16px;

	/* Tekst */
	--cmplz_text_color: #000000;
	--cmplz_hyperlink_color: #d70b8c;
	--cmplz_title_font_size: 16px;
	--cmplz_text_font_size: 16px;
	--cmplz_text_line_height: 25px;
	--cmplz_link_font_size: 14px;
	--cmplz_category_body_font_size: 16px;
	--cmplz_category_header_title_font_size: 18px;
	--cmplz_category_header_active_font_size: 14px;
	--cmplz_category_header_always_active_color: #d70b8c;

	/* Knoppen */
	--cmplz_button_font_size: 16px;
	--cmplz_button_border_radius: 100px;
	--cmplz_button_accept_background_color: #d70b8c;
	--cmplz_button_accept_border_color: #d70b8c;
	--cmplz_button_accept_text_color: #f2f2f2;
	--cmplz_button_deny_background_color: transparent;
	--cmplz_button_deny_border_color: transparent;
	--cmplz_button_deny_text_color: #d70b8c;
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: transparent;
	--cmplz_button_settings_text_color: #000000;

	/* Schuifjes in het voorkeurenscherm */
	--cmplz_slider_active_color: #f7d9ec;
	--cmplz_slider_inactive_color: #f7d9ec;
	--cmplz_slider_bullet_color: #ffffff;

	/* Tabje om de banner opnieuw te openen */
	--cmplz-manage-consent-height: 48px;
	--cmplz-manage-consent-offset: -34px;
}

/* ======================================================================== */
/* Staat 1 — de balk                                                        */
/* ======================================================================== */
/* Complianz zet de banner standaard als doosje rechtsonder neer (right: 10px; bottom: 10px)
   met een min-width van 526px. Het origineel is een balk over de volle breedte met de inhoud
   in een gecentreerde container. Die container maken we met padding: er is geen extra wrapper
   in de markup van de plugin om dat aan op te hangen. */
body .cmplz-cookiebanner {
	position: fixed;
	inset: auto 0 0 0;
	transform: none;
	width: 100%;
	min-width: 0;
	max-width: none;
	max-height: 100vh;
	overflow-y: auto;
	z-index: 100;
	box-sizing: border-box;
	padding-block: 16px;
	padding-inline: max(0px, calc((100% - var(--sf-cmplz-container, 100%)) / 2));
	border-radius: 16px 16px 0 0;
	font-family: "Raleway", system-ui, sans-serif;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 0.6px;
	color: #000000;
	/* Mobiel één kolom: tekst bovenaan, knoppen onderaan. In het origineel is dat `h-screen-60`
	   op de rij plus `mt-auto` op de knopkolom. */
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Het origineel scheidt de balk met een randje van 2px, niet met een slagschaduw. Twee classes
   plus body, want `.cmplz-cookiebanner.cmplz-show` weegt zelf al (0,2,0).
   `transition: none` hoort hier ook thuis: Complianz zet op `.cmplz-show:hover` alleen een
   `transition-duration: 1s` zonder `transition-property`. De standaard daarvan is `all`, dus
   zodra de muis boven de banner hangt — en dat is precies het geval als je net op Beheer
   voorkeuren hebt geklikt — animeert élke eigenschap een seconde lang mee. Dat was het trage
   uitzakken van balk naar venster. */
body .cmplz-cookiebanner,
body .cmplz-cookiebanner.cmplz-show,
body .cmplz-cookiebanner.cmplz-show:hover {
	box-shadow: none;
	transition: none;
}

/* Dicht is dicht. Complianz sluit de banner door `cmplz-dismissed` toe te voegen, met
   `.cmplz-cookiebanner.cmplz-dismissed { display: none }` — twee classes, (0,2,0). De regel
   verderop die van de banner een venster maakt weegt met `body` erbij (0,2,1) en won daarvan,
   waardoor Accepteren en het kruisje het venster wél afhandelden maar niet lieten verdwijnen.
   Deze regel zet dat recht en moet zwaarder zijn dan allebei. */
body .cmplz-cookiebanner.cmplz-dismissed,
body .cmplz-cookiebanner.cmplz-categories-visible.cmplz-dismissed {
	display: none;
}

/* Complianz hangt `cmplz-hidden` aan documentlinks waarvoor geen pagina bestaat — zonder die
   regel blijft er letterlijk "{title}" in de banner staan. */
body .cmplz-cookiebanner .cmplz-link.cmplz-hidden {
	display: none;
}

/* De verduistering achter het venster hangt aan de container om de banner heen, niet aan de
   banner zelf. Binnen de banner kan het niet: die heeft een eigen z-index en dus een eigen
   stapelcontext, waarin een pseudo-element met een negatieve z-index ná de achtergrond van de
   banner wordt getekend — het zou het witte vlak dus juist overdekken. De container is een
   gewone div zonder z-index, dus vanaf daar valt de laag netjes tussen pagina en venster. */
body #cmplz-cookiebanner-container:has(.cmplz-cookiebanner.cmplz-categories-visible:not(.cmplz-dismissed))::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 99;
	background: rgba(0, 0, 0, .35);
}

/* Sierstreepjes en een leeg logovak komen in het origineel niet voor. */
body .cmplz-cookiebanner .cmplz-divider,
body .cmplz-cookiebanner .cmplz-logo:empty {
	display: none;
}

/* Het eigen kruisje van Complianz doet `dismissed`: banner dicht, toestemming ongemoeid.
   Gevraagd is een kruisje dat weigert, en daarvoor heeft de plugin al een knop — die maken we
   verderop tot kruisje. Twee kruisjes naast elkaar zou alleen verwarren. */
body .cmplz-cookiebanner .cmplz-close {
	display: none;
}

/* --- Kop ---------------------------------------------------------------- */
/* Complianz legt de kop in een grid van 100px | 1fr | 100px met de titel gecentreerd; in het
   origineel staat hij gewoon links boven de tekst. */
body .cmplz-cookiebanner .cmplz-header {
	display: block;
	padding-inline: 16px;
	margin: 0;
}

body .cmplz-cookiebanner .cmplz-title {
	justify-self: start;
	grid-column-start: auto;
	margin: 0 0 4px;
	font-size: 16px;
	line-height: 18px;
	font-weight: 700;
	color: #000000;
}

/* Complianz verbergt de titel onder 425px; in het origineel staat "Cookies op onze website"
   juist ook op een telefoon boven de tekst. */
@media (max-width: 425px) {
	body .cmplz-cookiebanner .cmplz-header .cmplz-title {
		display: block;
	}
}

/* --- Tekst -------------------------------------------------------------- */
body .cmplz-cookiebanner .cmplz-body {
	width: auto;
	padding-inline: 16px;
	max-height: none;
	overflow: visible;
}

body .cmplz-cookiebanner .cmplz-message {
	width: auto;
	min-width: 0;
	margin: 0;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: 0.6px;
	color: #000000;
}

body .cmplz-cookiebanner .cmplz-message a,
body .cmplz-cookiebanner .cmplz-links .cmplz-link {
	color: #d70b8c;
	text-decoration: underline;
}

/* De documentlinks (cookie- en privacyverklaring) staan niet in het origineel, maar horen
   functioneel in de banner. Bescheiden plek onder de tekst. */
body .cmplz-cookiebanner .cmplz-links.cmplz-documents {
	justify-content: flex-start;
	padding-inline: 16px;
	margin-top: 8px;
}

body .cmplz-cookiebanner .cmplz-links ul {
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 16px;
}

body .cmplz-cookiebanner .cmplz-links .cmplz-link {
	font-size: 14px;
	line-height: 20px;
}

/* --- Knoppen ------------------------------------------------------------ */
body .cmplz-cookiebanner .cmplz-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding-inline: 16px;
	margin-top: 24px;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 8px;
	/* Bewust géén `display` hier — zie de toelichting bovenaan dit bestand. De knop is van
	   zichzelf inline-block; `width: 100%` plus `text-align: center` geeft hetzelfde beeld. */
	text-align: center;
	white-space: normal;
	font-family: inherit;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0.6px;
	font-weight: 600;
	border-radius: 100px;
	cursor: pointer;
	transition: background-color .2s cubic-bezier(.4, 0, .2, 1),
		border-color .2s cubic-bezier(.4, 0, .2, 1),
		color .2s cubic-bezier(.4, 0, .2, 1),
		box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible {
	outline: 2px solid #d70b8c;
	outline-offset: 3px;
}

/* Accepteren en Voorkeuren opslaan: de gevulde pil. */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
	background-color: #d70b8c;
	border: 2px solid #d70b8c;
	color: #f2f2f2;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:focus,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:focus {
	box-shadow: 0 5px 10px rgba(0, 0, 0, .25);
	color: #f2f2f2;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:active,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:active {
	background-color: #ac0870;
	border-color: #ac0870;
	box-shadow: none;
}

/* Beheer voorkeuren: tekstknop met het pijltje uit het origineel ervoor.
   `display: block` zet de regel van de plugin terug die deze knop verbergt — dat is een
   instelling in de banner, niet iets functioneels: de klikafhandeling van Complianz hangt aan
   het document en werkt gewoon. Zodra het voorkeurenscherm opengaat zet Complianz zelf een
   inline `display: none` op deze knop, en een inline style wint altijd van deze regel. De
   staatwisseling blijft dus volledig bij de plugin. */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
	display: block;
	width: auto;
	margin-top: 16px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: #000000;
	font-weight: 700;
	font-size: 16px;
	line-height: 25px;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	vertical-align: middle;
	margin-right: 8px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 25'%3E%3Cpath fill='%23d70b8c' d='M14.4603 13.7376L3.14568 24.4869C2.42594 25.171 1.25899 25.171 0.539592 24.4869C-0.179864 23.8034 -0.179864 22.6948 0.539592 22.0113L10.5513 12.4998L0.539883 2.98869C-0.179573 2.30489 -0.179573 1.19638 0.539883 0.512853C1.25934 -0.170951 2.42623 -0.170951 3.14598 0.512853L14.4606 11.2623C14.8203 11.6042 15 12.0519 15 12.4998C15 12.9479 14.82 13.3959 14.4603 13.7376Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: margin-right .15s ease;
}

/* Het pijltje schuift bij hover naar de tekst toe, net als in het origineel. */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover::before {
	margin-right: 0;
}

/* --- Het kruisje = weigeren --------------------------------------------- */
/* Gevraagd is een kruisje dat weigert. Complianz heeft daar de knop Weigeren voor; die zetten
   we hier aan en geven we de vorm van een kruisje rechtsboven. Zo is het geen nagebouwde knop
   met eigen gedrag, maar gewoon de weigerknop van de plugin met een ander jasje.
   `font-size: 0` haalt alleen het label visueel weg; in de DOM blijft het staan, dus een
   schermlezer leest nog steeds "Weigeren". */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
	display: block;
	position: absolute;
	top: 16px;
	right: 16px;
	width: 24px;
	height: 24px;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
	box-shadow: none;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='%23d70b8c' stroke-width='2.5' stroke-linecap='round' d='M4 4l16 16M20 4L4 20'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: opacity .2s ease;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover::before,
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:focus::before {
	opacity: .7;
}

/* ======================================================================== */
/* Staat 2 — het voorkeurenscherm                                           */
/* ======================================================================== */
/* Complianz heeft één element: klikt de bezoeker op Beheer voorkeuren, dan zet de plugin
   .cmplz-categories-visible op de banner en .cmplz-fade-in op de categorieënlijst. De balk
   zelf wordt hier dus het gecentreerde venster — een tweede venster naast de balk kan niet
   zonder de markup van de plugin te veranderen.
   Centreren met inset + margin: auto in plaats van transform: een transform zou van de banner
   een containing block maken, en dan zou een schermvullende laag erbínnen blijven hangen. */
body .cmplz-cookiebanner.cmplz-categories-visible {
	display: block;
	inset: 0;
	margin: auto;
	width: min(640px, calc(100% - 32px));
	height: fit-content;
	max-height: 85vh;
	min-height: 0;
	overflow-y: auto;
	padding: 32px;
	border: 0;
	border-radius: 16px;
}

/* Het venster krijgt wél een zachte schaduw. De hover-variant moet er apart bij staan: de
   regel hierboven die de schaduw van de balk weghaalt, weegt mét `:hover` zwaarder en zou de
   schaduw anders laten verdwijnen zodra je de muis erop zet. */
body .cmplz-cookiebanner.cmplz-categories-visible,
body .cmplz-cookiebanner.cmplz-categories-visible.cmplz-show:hover {
	box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
}

/* Complianz laat de categorieënlijst in een seconde opdoemen; dat voelt traag en vaag. Alleen
   de duur aanpassen — `display: block` uit diezelfde regel is wat de lijst zichtbaar maakt en
   blijft dus met rust. */
body .cmplz-cookiebanner .cmplz-categories.cmplz-fade-in {
	animation-duration: .2s;
}

body .cmplz-cookiebanner.cmplz-categories-visible .cmplz-header,
body .cmplz-cookiebanner.cmplz-categories-visible .cmplz-body,
body .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons,
body .cmplz-cookiebanner.cmplz-categories-visible .cmplz-links.cmplz-documents {
	padding-inline: 0;
}

body .cmplz-cookiebanner.cmplz-categories-visible .cmplz-title {
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 24px;
	padding-right: 40px;
}

/* Hetzelfde kruisje, nu in de hoek van het venster. Ook hier is het de weigerknop: klikken
   sluit het venster én zegt nee. */
body .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-deny {
	top: 32px;
	right: 32px;
}

/* --- De categorieën ----------------------------------------------------- */
body .cmplz-cookiebanner .cmplz-categories {
	margin-top: 24px;
	max-height: none;
	width: auto;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background: none;
	border: 0;
	border-radius: 0;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category:not(:last-child) {
	margin-bottom: 8px;
}

/* Flex met `order` in plaats van het grid van de plugin: in het ontwerp staat het schuifje
   vóór de naam, en met flex werkt dat voor zowel de altijd-actieve categorie (waar het
   schuifje een niveau dieper zit) als voor de gewone categorieën. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px 0;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox,
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-always-active {
	order: 1;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-title {
	order: 2;
	flex: 1 1 auto;
	font-size: 18px;
	line-height: 25px;
	font-weight: 400;
	color: #000000;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-icon.cmplz-open {
	order: 3;
	width: 16px;
	height: 16px;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-icon.cmplz-open svg {
	width: 16px;
	height: 16px;
	fill: #d70b8c;
}

/* "Always active" staat niet in het ontwerp — het schuifje dat aan en op slot staat zegt
   hetzelfde. `font-size: 0` haalt alleen die tekstnode weg; voor een schermlezer blijft hij
   bestaan, en het schuifje eromheen krijgt zijn maat terug uit de regels hieronder. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-always-active {
	display: flex;
	align-items: center;
	font-size: 0;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
	padding: 0 0 8px 60px;
	font-size: 16px;
	line-height: 25px;
	color: #000000;
}

/* Het schuifje: lichtroze baan, witte bol als het uit staat, roze bol als het aan staat. De
   plugin tekent hem met ::before (de baan) en ::after (de bol) op het label; die maten en
   kleuren zetten we hier om. */
body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label {
	padding-left: 44px;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before {
	width: 44px;
	height: 24px;
	top: -12px;
	left: 0;
	padding: 0;
	border-radius: 100px;
	background-color: #f7d9ec;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after {
	width: 18px;
	height: 18px;
	top: -9px;
	left: 3px;
	border-radius: 100px;
	background: #ffffff;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label:before {
	background-color: #f7d9ec;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label:after {
	left: 23px;
	background: #d70b8c;
}

body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label:before {
	box-shadow: 0 0 0 2px #d70b8c;
}

/* Knoppen in het venster: niet over de volle breedte, maar zo breed als hun tekst. */
body .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	margin-top: 24px;
}

body .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn {
	width: auto;
	padding: 8px 32px;
}

body .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
	padding: 0;
}

body .cmplz-cookiebanner.cmplz-categories-visible .cmplz-links.cmplz-documents {
	margin-top: 24px;
}

/* ======================================================================== */
/* Staat 3 — gesloten, tabje om opnieuw te openen                           */
/* ======================================================================== */
body #cmplz-manage-consent .cmplz-manage-consent {
	right: 24px;
	padding: 12px 24px;
	background-color: #ffffff;
	border-color: #f2f2f2;
	border-width: 2px 2px 0 2px;
	border-radius: 16px 16px 0 0;
	box-shadow: none;
	font-family: "Raleway", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.6px;
	color: #d70b8c;
}

/* ======================================================================== */
/* Tablet en desktop                                                        */
/* ======================================================================== */
/* Vanaf 768px twee kolommen: tekst links, knoppen rechts, verticaal gecentreerd — 2/3 en 1/3,
   vanaf 1024px 3/4 en 1/4, precies als in het origineel. */
@media (min-width: 640px) {
	body .cmplz-cookiebanner { --sf-cmplz-container: 640px; }
}

@media (min-width: 768px) {
	body .cmplz-cookiebanner {
		--sf-cmplz-container: 768px;
		display: grid;
		grid-template-columns: 66.6666% 33.3333%;
		align-items: center;
		min-height: 0;
		border-radius: 0;
		row-gap: 0;
		column-gap: 0;
	}

	body .cmplz-cookiebanner .cmplz-header {
		grid-column: 1;
		grid-row: 1;
	}

	body .cmplz-cookiebanner .cmplz-body {
		grid-column: 1;
		grid-row: 2;
	}

	body .cmplz-cookiebanner .cmplz-links.cmplz-documents {
		grid-column: 1;
		grid-row: 3;
	}

	body .cmplz-cookiebanner .cmplz-buttons {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin-top: 0;
		align-self: center;
	}

	body .cmplz-cookiebanner .cmplz-title {
		font-size: 18px;
		line-height: 20px;
		letter-spacing: 0.68px;
	}

	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		font-size: 18px;
		padding: 8px 32px;
	}

	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
		padding: 0;
		font-size: 16px;
	}

	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
		padding: 0;
	}
}

@media (min-width: 1024px) {
	body .cmplz-cookiebanner {
		--sf-cmplz-container: 1024px;
		grid-template-columns: 75% 25%;
		padding-block: 32px;
	}

	body .cmplz-cookiebanner .cmplz-title {
		line-height: 25px;
	}

	body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
		top: 24px;
		right: 24px;
	}
}

@media (min-width: 1280px) {
	body .cmplz-cookiebanner { --sf-cmplz-container: 1280px; }
}

@media (min-width: 1560px) {
	body .cmplz-cookiebanner { --sf-cmplz-container: 1560px; }
}