/* ---------------------------------------------------------------------------
 * Cookiebanner (plug-in CookieYes / cookie-law-info) in onze huisstijl.
 * Bewust in het thema en niet in de plug-in: zo blijft de opmaak staan als de
 * plug-in wordt bijgewerkt. De plug-in bepaalt de werking en de teksten, wij
 * alleen het uiterlijk.
 * ------------------------------------------------------------------------- */

.cky-consent-bar,
.cky-modal {
	font-family: var(--font-base) !important;
	background: var(--c-donkerblauw) !important;
	border: 0 !important;
	border-radius: var(--radius-kaart) !important;
	box-shadow: 0 20px 60px rgb(0 0 0 / 35%) !important;
	color: var(--c-wit) !important;
}

.cky-title,
.cky-notice-des,
.cky-notice-des p,
.cky-preference-title,
.cky-preference-content-wrapper,
.cky-accordion-header-des,
.cky-accordion-btn,
.cky-always-active {
	color: var(--c-wit) !important;
	font-family: var(--font-base) !important;
}

.cky-title {
	font-weight: 700 !important;
	font-size: 20px !important;
	line-height: 28px !important;
}

.cky-notice-des,
.cky-notice-des p {
	font-size: 15px !important;
	line-height: 25px !important;
	color: var(--c-grijs-3) !important;
}

.cky-notice-des a,
.cky-policy {
	color: var(--c-blauw) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}

/* Knoppen: zelfde vorm en kleuren als de knoppen op de site. */
.cky-btn {
	font-family: var(--font-base) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	border-radius: var(--radius) !important;
	padding: 12px 22px !important;
	transition: background-color var(--dur-kort) var(--ease-out), color var(--dur-kort) var(--ease-out) !important;
}

/* Accepteren en weigeren krijgen bewust hetzelfde gewicht: de bezoeker mag
 * niet naar accepteren geduwd worden. */
.cky-btn-accept,
.cky-btn-reject {
	background: var(--c-blauw) !important;
	border: 1px solid var(--c-blauw) !important;
	color: var(--c-wit) !important;
}

.cky-btn-reject {
	background: transparent !important;
	color: var(--c-wit) !important;
	border-color: rgb(255 255 255 / 50%) !important;
}

.cky-btn-accept:hover {
	background: var(--c-wit) !important;
	color: var(--c-donkerblauw) !important;
	border-color: var(--c-wit) !important;
}

.cky-btn-reject:hover {
	background: rgb(255 255 255 / 12%) !important;
}

.cky-btn-customize,
.cky-btn-preferences {
	background: transparent !important;
	border: 1px solid rgb(255 255 255 / 50%) !important;
	color: var(--c-wit) !important;
}

.cky-btn-customize:hover,
.cky-btn-preferences:hover {
	background: rgb(255 255 255 / 12%) !important;
}

/* Voorkeurenvenster */

.cky-preference-center,
.cky-preference-body-wrapper,
.cky-accordion {
	background: var(--c-donkerblauw) !important;
	border-color: var(--c-secundair) !important;
}

.cky-preference-title {
	font-size: 19px !important;
	font-weight: 700 !important;
}

.cky-accordion {
	border-bottom: 1px solid var(--c-secundair) !important;
}

/* Schakelaars in de merkkleur. */
.cky-switch input[type="checkbox"]:checked {
	background: var(--c-blauw) !important;
}

.cky-always-active {
	color: var(--c-blauw) !important;
	font-weight: 600 !important;
}

/* Het zwevende knopje om je keuze later te wijzigen. */
.cky-btn-revisit-wrapper {
	background: var(--c-blauw) !important;
	box-shadow: 0 8px 20px rgb(0 0 0 / 25%) !important;
}

@media (max-width: 767px) {
	.cky-consent-bar {
		border-radius: var(--radius-kaart) var(--radius-kaart) 0 0 !important;
	}

	.cky-btn {
		width: 100% !important;
	}
}