.consent-manager-root,
.consent-manager-noscript {
	--consent-manager-color-text: #dce4ec;
	--consent-manager-color-text-muted: #aeb7c2;

	--consent-manager-color-link: #e967a7;
	--consent-manager-color-link-hover: #f58abb;

	--consent-manager-color-surface: #181b21;
	--consent-manager-color-surface-alt: #20242c;

	--consent-manager-color-border: rgba(233, 103, 167, 0.24);
	--consent-manager-color-border-subtle: rgba(255, 255, 255, 0.08);

	--consent-manager-color-button-border: rgba(233, 103, 167, 0.45);
	--consent-manager-color-button-surface: #232730;
	--consent-manager-color-button-surface-hover: #2c313c;

	--consent-manager-color-button-primary: #d95798;
	--consent-manager-color-button-primary-hover: #e967a7;

	--consent-manager-font-size: 0.625rem;

	position: relative;
	z-index: 9999;
}

.consent-manager-open {
	overflow: hidden;
}

.consent-manager-panel,
.consent-manager-modal,
.consent-manager-link {
	font-family: inherit;
}

.consent-manager-banner,
.consent-manager-modal-panel,
.consent-manager-noscript {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: var(--consent-manager-font-size);
	line-height: 1.2;

	background:
		linear-gradient(
			180deg,
			rgba(29, 33, 41, 0.99),
			rgba(18, 21, 27, 0.995)
		);

	color: var(--consent-manager-color-text);
}

.consent-manager-banner *,
.consent-manager-modal-panel *,
.consent-manager-noscript * {
	color: inherit;
	box-sizing: border-box;
}


/* =========================================================
   BANNER
   ========================================================= */

.consent-manager-banner {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	left: 1rem;

	max-width: 70rem;
	margin: 0 auto;
	padding: 1.3rem 1.4rem;

	border: 1px solid rgba(233, 103, 167, 0.22);
	border-radius: 16px;

	background:
		linear-gradient(
			180deg,
			rgba(30, 34, 42, 0.985),
			rgba(19, 22, 28, 0.995)
		);

	box-shadow:
		0 20px 54px rgba(0, 0, 0, 0.50),
		0 0 0 1px rgba(255, 255, 255, 0.02) inset,
		0 0 38px rgba(233, 103, 167, 0.14);

	overflow: hidden;
	isolation: isolate;
}


/* Moderne gradient border */

.consent-manager-banner::before,
.consent-manager-modal-panel::before {
	content: "";
	position: absolute;
	inset: 0;

	padding: 1px;

	border-radius: inherit;

	background:
		linear-gradient(
			135deg,
			rgba(233, 103, 167, 0.95) 0%,
			rgba(198, 93, 155, 0.55) 28%,
			rgba(128, 191, 255, 0.20) 55%,
			rgba(176, 111, 170, 0.42) 75%,
			rgba(233, 103, 167, 0.78) 100%
		);

	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);

	-webkit-mask-composite: xor;
	mask-composite: exclude;

	pointer-events: none;
	z-index: 2;
}


/* Lichte glow bovenaan */

.consent-manager-banner::after,
.consent-manager-modal-panel::after {
	content: "";
	position: absolute;

	top: 0;
	left: 24px;
	right: 24px;

	height: 2px;

	border-radius: 999px;

	background:
		linear-gradient(
			90deg,
			rgba(233, 103, 167, 0) 0%,
			rgba(233, 103, 167, 0.72) 20%,
			rgba(246, 151, 197, 0.96) 50%,
			rgba(233, 103, 167, 0.72) 80%,
			rgba(233, 103, 167, 0) 100%
		);

	box-shadow:
		0 0 12px rgba(233, 103, 167, 0.40),
		0 0 24px rgba(233, 103, 167, 0.16);

	pointer-events: none;
	z-index: 3;
}


/* Inhoud boven pseudo-elements */

.consent-manager-banner > *,
.consent-manager-modal-panel > * {
	position: relative;
	z-index: 4;
}


.consent-manager-banner[hidden],
.consent-manager-modal[hidden],
#consent-manager-link-item[hidden] {
	display: none;
}


/* =========================================================
   TITELS
   ========================================================= */

.consent-manager-heading {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.2rem;
	font-weight: 600;

	color: #f0f3f6;

	margin: 0 0 0.75rem;
	padding-bottom: 0.7rem;

	border-bottom:
		1px solid rgba(233, 103, 167, 0.16);
}


/* =========================================================
   TEKST
   ========================================================= */

.consent-manager-copy {
	font-size: 1.1em;
	line-height: 1.55;

	color: var(--consent-manager-color-text-muted);

	margin: 0;
}


/* =========================================================
   LINKS
   ========================================================= */

.consent-manager-policy-link,
.consent-manager-policy-link:visited {
	color: var(--consent-manager-color-link);

	direction: inherit;
	display: inline;

	unicode-bidi: normal;
	text-decoration: none;

	font-weight: 600;

	transition:
		color 0.15s ease,
		text-shadow 0.15s ease;
}

.consent-manager-policy-link:hover,
.consent-manager-policy-link:focus,
.consent-manager-policy-link:active {
	color: var(--consent-manager-color-link-hover);

	text-decoration: none;

	text-shadow:
		0 0 10px rgba(233, 103, 167, 0.28);
}


/* =========================================================
   ACTIES / KNOPPEN
   ========================================================= */

.consent-manager-actions {
	display: flex;
	flex-wrap: wrap;

	margin-top: 1.1rem;

	gap: 0.65rem;
}


.consent-manager-button {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;

	text-transform: none;

	background:
		linear-gradient(
			180deg,
			#2a2f39,
			#21252d
		);

	border:
		1px solid rgba(233, 103, 167, 0.50);

	border-radius: 7px;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.035),
		0 2px 8px rgba(0, 0, 0, 0.26);

	text-shadow: none;

	color: #e3e8ee;

	display: inline-flex;
	justify-content: center;
	align-items: center;

	min-width: 10rem;

	padding: 0.78rem 1.05rem;

	cursor: pointer;

	-webkit-appearance: none;
	appearance: none;

	transition:
		background 0.16s ease,
		border-color 0.16s ease,
		box-shadow 0.16s ease,
		color 0.16s ease,
		transform 0.16s ease;
}


.consent-manager-button:hover,
.consent-manager-button:focus {
	outline: none;
	text-decoration: none;

	background:
		linear-gradient(
			180deg,
			#343a45,
			#292e37
		);

	border-color: rgba(233, 103, 167, 0.85);

	color: #ffffff;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.045),
		0 4px 12px rgba(0, 0, 0, 0.30),
		0 0 12px rgba(233, 103, 167, 0.10);
}


.consent-manager-button:active {
	transform: translateY(1px);
}


/* Keyboard focus */

.consent-manager-button:focus-visible,
.consent-manager-policy-link:focus-visible,
.consent-manager-link:focus-visible,
.consent-manager-toggle input:focus-visible {
	outline: 2px solid #e967a7;
	outline-offset: 2px;
}


/* =========================================================
   PRIMAIRE KNOP
   ========================================================= */

.consent-manager-button-primary {
	background:
		linear-gradient(
			180deg,
			#e967a7,
			#c94e8b
		);

	border-color: #ef83b8;

	color: #ffffff;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 3px 10px rgba(0, 0, 0, 0.28),
		0 0 14px rgba(233, 103, 167, 0.10);
}


.consent-manager-button-primary:hover,
.consent-manager-button-primary:focus {
	background:
		linear-gradient(
			180deg,
			#f17bb5,
			#d95798
		);

	border-color: #f292c0;

	color: #ffffff;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.20),
		0 4px 14px rgba(0, 0, 0, 0.32),
		0 0 18px rgba(233, 103, 167, 0.22);
}


/* =========================================================
   MODAL
   ========================================================= */

.consent-manager-modal {
	background:
		rgba(7, 9, 12, 0.82);

	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);

	position: fixed;

	display: flex;
	justify-content: center;
	align-items: center;

	padding: 1rem;

	inset: 0;
}


.consent-manager-modal-panel {
	position: relative;

	border:
		1px solid rgba(233, 103, 167, 0.22);

	border-radius: 16px;

	box-shadow:
		0 24px 65px rgba(0, 0, 0, 0.58),
		0 0 0 1px rgba(255, 255, 255, 0.02) inset,
		0 0 34px rgba(233, 103, 167, 0.12);

	overflow: auto;

	width: 100%;
	max-width: 42rem;
	max-height: 85vh;

	padding: 1.35rem;

	isolation: isolate;

	scrollbar-width: thin;
	scrollbar-color: #d95798 #15181e;
}


.consent-manager-modal-panel::-webkit-scrollbar {
	width: 8px;
}

.consent-manager-modal-panel::-webkit-scrollbar-track {
	background: #15181e;
}

.consent-manager-modal-panel::-webkit-scrollbar-thumb {
	background:
		linear-gradient(
			180deg,
			#e967a7,
			#bd477f
		);

	border-radius: 8px;
}


/* =========================================================
   CATEGORIEËN
   ========================================================= */

.consent-manager-category {
	border-bottom:
		1px solid var(--consent-manager-color-border-subtle);

	padding: 1rem 0;
}

.consent-manager-category:first-child {
	border-top: 0;
}

.consent-manager-category:last-child {
	border-bottom: 0;
}


.consent-manager-category-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;

	gap: 1rem;
}


.consent-manager-category-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	font-weight: bold;

	text-transform: uppercase;

	border-bottom: none;

	color: #e967a7;

	margin: 0;
	padding-bottom: 2px;

	text-shadow:
		0 0 10px rgba(233, 103, 167, 0.12);
}


.consent-manager-category-description {
	font-size: 1.1em;
	line-height: 1.5;

	color: var(--consent-manager-color-text-muted);

	margin: 0.25rem 0 0;
}


.consent-manager-category-services {
	color: var(--consent-manager-color-text-muted);

	margin: 0.75rem 0 0 1.25rem;
}


.consent-manager-category-services ul {
	list-style: disc outside;

	margin: 0.5rem 0 0;

	padding: 0;
}


.consent-manager-category-services li {
	display: list-item;

	margin: 0.2rem 0;
}


.consent-manager-category-services strong {
	font-weight: bold;

	color: #dce4ec;
}


/* =========================================================
   TOGGLES
   ========================================================= */

.consent-manager-toggle {
	white-space: nowrap;

	display: inline-flex;
	align-items: center;

	gap: 0.5rem;

	padding: 0;

	cursor: default;

	color: #dce4ec;
}


.consent-manager-toggle input {
	accent-color: #e967a7;

	margin: 0;
	padding: 0;
}


/* =========================================================
   NOSCRIPT
   ========================================================= */

.consent-manager-noscript {
	position: fixed;

	right: 1rem;
	bottom: 1rem;
	left: 1rem;

	max-width: 70rem;

	margin: 0 auto;

	padding: 0.9rem 1rem;

	border:
		1px solid rgba(233, 103, 167, 0.34);

	border-radius: 12px;

	box-shadow:
		0 14px 34px rgba(0, 0, 0, 0.44),
		0 0 18px rgba(233, 103, 167, 0.08);
}


/* =========================================================
   GEBLOKKEERDE MEDIA
   ========================================================= */

[data-consent-media-container] {
	--consent-manager-media-placeholder-text: #aeb7c2;
	--consent-manager-media-placeholder-surface: #1b1f26;
	--consent-manager-media-placeholder-border: rgba(233, 103, 167, 0.24);
	--consent-manager-media-placeholder-link: #e967a7;
	--consent-manager-media-placeholder-link-hover: #f58abb;

	display: block;

	margin: 0.75rem 0;
}


[data-consent-media-placeholder] {
	line-height: 1.5;

	background:
		linear-gradient(
			180deg,
			#20242c,
			#191c22
		);

	border:
		1px solid var(
			--consent-manager-media-placeholder-border,
			currentColor
		);

	border-radius: 10px;

	box-shadow:
		0 5px 16px rgba(0, 0, 0, 0.20),
		0 0 0 1px rgba(255, 255, 255, 0.015) inset;

	color:
		var(
			--consent-manager-media-placeholder-text,
			inherit
		);

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	padding: 1rem;

	gap: 0.75rem;

	overflow-wrap: anywhere;
}


[data-consent-media-placeholder] a,
[data-consent-media-placeholder] a:visited {
	color:
		var(--consent-manager-media-placeholder-link);

	direction: inherit;

	display: inline;

	unicode-bidi: normal;

	text-decoration: none;

	word-break: break-word;

	max-width: 100%;

	overflow-wrap: anywhere;

	font-weight: 600;

	transition:
		color 0.15s ease,
		text-shadow 0.15s ease;
}


[data-consent-media-placeholder] a:hover,
[data-consent-media-placeholder] a:focus,
[data-consent-media-placeholder] a:active {
	color:
		var(--consent-manager-media-placeholder-link-hover);

	text-decoration: none;

	text-shadow:
		0 0 8px rgba(233, 103, 167, 0.22);
}


[data-consent-media-placeholder] a:focus-visible {
	outline: 2px solid #e967a7;
	outline-offset: 2px;
}


[data-consent-media-placeholder][hidden],
[data-consent-media-content][hidden] {
	display: none !important;
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 700px) {

	.consent-manager-banner {
		right: 0.65rem;
		bottom: 0.65rem;
		left: 0.65rem;

		padding: 1rem;

		border-radius: 13px;
	}


	.consent-manager-banner::after,
	.consent-manager-modal-panel::after {
		left: 16px;
		right: 16px;
	}


	.consent-manager-heading {
		font-size: 1.12rem;

		padding-bottom: 0.6rem;
	}


	.consent-manager-category-header {
		flex-direction: column;
	}


	.consent-manager-actions {
		gap: 0.5rem;
	}


	.consent-manager-button {
		flex: 1 1 calc(50% - 0.5rem);

		min-width: 8rem;

		padding: 0.72rem 0.8rem;
	}


	.consent-manager-button[data-consent-action="close-settings"] {
		min-width: 0;
	}


	.consent-manager-modal {
		padding: 0.65rem;
	}


	.consent-manager-modal-panel {
		max-height: 90vh;

		padding: 1rem;

		border-radius: 13px;
	}
}


/* Heel smalle smartphones */

@media (max-width: 460px) {

	.consent-manager-actions {
		flex-direction: column;
	}


	.consent-manager-button {
		width: 100%;
		min-width: 0;
	}


	.consent-manager-copy {
		line-height: 1.5;
	}
}