/**
 * Cookie consent – styling
 * Kleuren komen uit de design tokens in style.css (--ground, --blanc, …).
 * Spacing volgt het 8px-grid; alle tekst 1rem tenzij anders vermeld.
 */

/* ------------------------------------------------------------------
 * CookieConsent v3 variabelen (gelden voor popup én voorkeurenvenster)
 * ---------------------------------------------------------------- */
#cc-main {
	--cc-font-family: var(--e-global-typography-text-font-family), sans-serif;
	--cc-modal-border-radius: 4px;
	--cc-modal-margin: 16px;
	--cc-btn-border-radius: 4px;
	--cc-pm-toggle-border-radius: 999px;

	--cc-bg: var(--white);
	--cc-primary-color: var(--text);
	--cc-secondary-color: color-mix(in srgb, var(--text) 80%, var(--white));
	--cc-link-color: var(--ground-50);
	--cc-overlay-bg: rgb(0 0 0 / 0.25);

	/* Lijnen */
	--cc-separator-border-color: var(--home);
	--cc-section-category-border: var(--home);
	--cc-footer-border-color: var(--home);
	--cc-cookie-category-block-border: var(--home);
	--cc-cookie-category-block-hover-border: var(--home-dark);

	/* Alles accepteren */
	--cc-btn-primary-bg: var(--ground);
	--cc-btn-primary-color: var(--white);
	--cc-btn-primary-border-color: var(--ground);
	--cc-btn-primary-hover-bg: var(--ground-70);
	--cc-btn-primary-hover-color: var(--white);
	--cc-btn-primary-hover-border-color: var(--ground-70);

	/* Alleen noodzakelijk / Voorkeuren opslaan: omlijnd, zoals de accountknop */
	--cc-btn-secondary-bg: transparent;
	--cc-btn-secondary-color: var(--ground);
	--cc-btn-secondary-border-color: var(--ground);
	--cc-btn-secondary-hover-bg: transparent;
	--cc-btn-secondary-hover-color: var(--ground);
	--cc-btn-secondary-hover-border-color: var(--ground);

	/* Toggles */
	--cc-toggle-on-bg: var(--ground);
	--cc-toggle-off-bg: color-mix(in srgb, var(--text) 45%, var(--home));
	--cc-toggle-on-knob-bg: var(--blanc);
	--cc-toggle-off-knob-bg: var(--blanc);
	--cc-toggle-enabled-icon-color: var(--ground);
	--cc-toggle-disabled-icon-color: var(--text);
	--cc-toggle-readonly-bg: var(--home-dark);
	--cc-toggle-readonly-knob-bg: var(--blanc);
	--cc-toggle-readonly-knob-icon-color: var(--ground);

	/* Categorieblokken: wit, alleen --home lijnen */
	--cc-cookie-category-block-bg: var(--white);
	--cc-cookie-category-block-hover-bg: var(--white);
	--cc-cookie-category-expanded-block-bg: var(--white);
	--cc-cookie-category-expanded-block-hover-bg: var(--home);

	/* Balk met privacylink */
	--cc-footer-bg: var(--white);
	--cc-footer-color: var(--text);
}

/* ------------------------------------------------------------------
 * Gedeeld
 * ---------------------------------------------------------------- */

/* Achtergrond achter popup en voorkeurenvenster: lichte blur */
.disable--interaction #cc-main .cm-wrapper::before,
#cc-main .pm-overlay {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

/* Geen schaduw: alleen de backdrop (25% zwart + blur) */
#cc-main .cm,
#cc-main .pm {
	box-shadow: none;
}

/* Titels: heading-font, 24px, niet dik */
#cc-main .cm__title,
#cc-main .pm__title {
	color: var(--ground);
	font-family: var(--e-global-typography-primary-font-family), serif;
	font-size: 24px;
	font-weight: var(--e-global-typography-primary-font-weight, 400);
	line-height: 1.33;
}

/* Knoppen */
#cc-main .cm__btn,
#cc-main .pm__btn {
	min-height: 48px;
	border-width: 2px;
	font-size: 1rem;
	font-weight: var(--e-global-typography-accent-font-weight);
}

/* Links: gewone underline, geen animatie */
#cc-main a,
#cc-main a:hover {
	overflow: visible; /* anders knipt CookieConsent de underline af */
	background-image: none;
	font-weight: var(--e-global-typography-text-font-weight);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	transition: none;
}

#cc-main a {
	color: var(--ground-50);
}

#cc-main a:hover {
	color: var(--ground-60);
}

/* ------------------------------------------------------------------
 * Popup
 * ---------------------------------------------------------------- */

/* Alle content 24px van de randen, tussenruimtes 8px */
#cc-main .cm__texts {
	padding: 24px 0 0;
}

#cc-main .cm__title,
#cc-main .cm__desc,
#cc-main .cm__btns,
#cc-main .cm__links {
	padding-right: 24px !important;
	padding-left: 24px !important;
}

#cc-main .cm__title + .cm__desc {
	margin-top: 8px;
}

#cc-main .cm__desc {
	padding-bottom: 24px;
	font-size: 1rem;
}

#cc-main .cm__btns {
	padding-top: 24px;
	padding-bottom: 24px;
}

/* !important: de mobiele CSS van CookieConsent zet hier 6px met !important */
#cc-main .cm__btn + .cm__btn,
#cc-main .cm__btn-group + .cm__btn-group {
	margin: 8px 0 0 !important;
}

/* "Voorkeuren instellen": ghost button. Zelfde ruimte als een knop,
   maar zonder achtergrond of rand; alleen tekstlink met hover. */
#cc-main .cm__btn[data-role="show"] {
	overflow: visible;
	background: transparent;
	border-color: transparent;
	color: var(--ground);
	font-weight: var(--e-global-typography-text-font-weight);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

#cc-main .cm__btn[data-role="show"]:hover,
#cc-main .cm__btn[data-role="show"]:focus-visible {
	background: transparent;
	border-color: transparent;
	color: var(--ground-60);
	text-decoration: none;
}

/* Balk met privacylink */
#cc-main .cm__footer {
	padding: 24px 0;
}

#cc-main .cm__link-group {
	justify-content: center;
	font-size: 1rem;
}

#cc-main .cm__footer a,
#cc-main .cm__footer a:hover {
	color: var(--text);
	font-size: 1rem;
}

/* ------------------------------------------------------------------
 * Voorkeurenvenster
 * ---------------------------------------------------------------- */

/* Inhoud en knoppenbalk 24px van de randen (ook op mobiel) */
#cc-main .pm__body,
#cc-main .pm__footer {
	padding: 24px !important;
}

/* Kop: 16px boven en onder; op mobiel een blanc vlak */
#cc-main .pm__header {
	padding: 16px 24px !important;
}

@media (max-width: 767px) {
	#cc-main .pm__header {
		background: var(--blanc);
	}
}

/* Sluitknop: rustig, alleen een vlak op hover */
#cc-main .pm__close-btn,
#cc-main .pm__close-btn:hover {
	border-color: transparent;
}

#cc-main .pm__close-btn {
	background: transparent;
}

#cc-main .pm__close-btn:hover {
	background: transparent;
}

#cc-main .pm__close-btn svg {
	stroke: var(--ground);
}

/* Teksten */
#cc-main .pm__section-title,
#cc-main .pm__section-desc-wrapper,
#cc-main .pm__section-table,
#cc-main .pm__service-title {
	font-size: 1rem;
}

#cc-main .pm__section-title {
	color: var(--text);
	font-weight: var(--e-global-typography-accent-font-weight);
}

#cc-main .pm__section-desc {
	line-height: var(--e-global-typography-text-line-height);
}

/* Introtekst en blokken */
#cc-main .pm__section:first-child {
	margin-bottom: 24px;
}

#cc-main .pm__section,
#cc-main .pm__section--toggle {
	margin-bottom: 8px;
}

#cc-main .pm__section-toggles + .pm__section {
	margin-top: 24px;
}

#cc-main .pm__section--toggle .pm__section-desc {
	padding: 16px;
}

#cc-main .pm__section-title-wrapper + .pm__section-desc-wrapper {
	margin-top: 8px;
}

/* Badge "Altijd aan" */
#cc-main .pm__badge {
	background: var(--mustard);
	color: var(--text);
	font-size: 0.875rem;
}

/* Knoppen: 8px tussenruimte */
#cc-main .pm__btn + .pm__btn,
#cc-main .pm__btn-group + .pm__btn-group {
	margin-left: 8px;
}

@media screen and (max-width: 640px) {
	#cc-main .pm__btn + .pm__btn,
	#cc-main .pm__btn-group + .pm__btn-group {
		margin: 8px 0 0 !important;
	}
}

/* ------------------------------------------------------------------
 * Footerlink [cookie_instellingen]
 * ---------------------------------------------------------------- */
.cc-settings-link {
	cursor: pointer;
}

/* ------------------------------------------------------------------
 * Geblokkeerde embeds (Vimeo, Spotify)
 * De iframe houdt zijn afmetingen; de placeholder ligt er precies overheen
 * (positie en maat zet cookie-consent.js op basis van de iframe).
 * ---------------------------------------------------------------- */
iframe.cc-embed--hidden {
	visibility: hidden;
}

.cc-embed-placeholder {
	position: absolute;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px; /* tekst – knop */
	box-sizing: border-box;
	padding: 24px;
	overflow: auto;
	border: 1px solid var(--home);
	background: var(--white);
	color: var(--text);
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 1rem;
	line-height: var(--e-global-typography-text-line-height);
	text-align: center;
}

.cc-embed-placeholder .cc-embed-placeholder__text {
	margin: 0;
	color: var(--text);
	font-size: 1rem;
}

/* Lage spelers (Spotify 152px): compacter, anders past het niet */
.cc-embed-placeholder--spotify {
	gap: 16px;
	padding: 16px 24px;
}

/* Knop in de stijl van "Alles accepteren" (overschrijft de Elementor-knopstijl) */
.cc-embed-placeholder button.cc-embed-placeholder__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 24px;
	border: 2px solid var(--ground);
	border-radius: 4px;
	background: var(--ground);
	box-shadow: none;
	color: var(--white);
	font-family: inherit;
	font-size: 1rem;
	font-weight: var(--e-global-typography-accent-font-weight);
	letter-spacing: normal;
	line-height: var(--e-global-typography-accent-line-height);
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

.cc-embed-placeholder button.cc-embed-placeholder__btn:hover,
.cc-embed-placeholder button.cc-embed-placeholder__btn:focus {
	border-color: var(--ground-70);
	background: var(--ground-70);
	color: var(--white);
	text-decoration: none;
}

.cc-embed-placeholder button.cc-embed-placeholder__btn:focus-visible {
	outline: 2px solid var(--ground);
	outline-offset: 2px;
}