/**
 * CookieYes (cookie-law-info) huisstijl-skin voor Essence Pillar.
 *
 * De plugin bakt zijn kleuren in inline style=""-attributen op elk
 * bannerelement, dus we overschrijven met !important. Palet en radii
 * volgen de themavariabelen in style.css:
 *   groen #1f3b33, goud #b8874f, beige #f7f3ed, tekst #161e1b, wit.
 */

/* ---- Consentbalk + voorkeurenmodal: groen, witte tekst ---- */
.cky-consent-container .cky-consent-bar,
.cky-preference-center,
.cky-modal .cky-preference-center {
	background-color: #1f3b33 !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	border-radius: 16px !important;
	color: #ffffff !important;
	font-family: "PT Sans", system-ui, sans-serif !important;
	box-shadow: 0 24px 60px rgba(13, 26, 22, 0.45) !important;
}

/* De .cky-modal schil tekent zijn eigen witte 6px-box achter het
   voorkeurencentrum; herstijl zodat de hoeken kloppen. */
.cky-modal {
	background: #1f3b33 !important;
	border-radius: 16px !important;
	color: #ffffff !important;
	box-shadow: 0 24px 60px rgba(13, 26, 22, 0.45) !important;
}

.cky-title,
.cky-preference-title,
.cky-notice-des,
.cky-notice-des p,
.cky-preference-content-wrapper,
.cky-accordion-header,
.cky-accordion-header-des,
.cky-always-active {
	color: #ffffff !important;
	font-family: "PT Sans", system-ui, sans-serif !important;
}

/* Titels in de banner in de Poltawski-kop */
.cky-title,
.cky-preference-title {
	font-family: "Poltawski Nowy", Georgia, serif !important;
	font-weight: 400 !important;
}

.cky-notice-des,
.cky-notice-des p,
.cky-accordion-header-des,
.cky-preference-content-wrapper {
	color: rgba(255, 255, 255, 0.75) !important;
}

/* Links in de banner in het goud */
.cky-notice-des a,
.cky-preference-content-wrapper a {
	color: #d9b990 !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- Knoppen: pill-vormig, on-brand ---- */
.cky-btn {
	border-radius: 100px !important;
	font-family: "Poltawski Nowy", Georgia, serif !important;
	font-weight: 700 !important;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Primaire actie: goud met witte tekst */
.cky-btn-accept {
	background-color: #b8874f !important;
	border-color: #b8874f !important;
	color: #ffffff !important;
}

/* In de banner staat "Alles accepteren" onder de ghost-knoppen: wat lucht
   erboven. (Niet in de modal, daar staan de knoppen naast elkaar.) */
.cky-consent-bar .cky-btn-accept {
	margin-top: 12px !important;
}
.cky-btn-accept:hover {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: #1f3b33 !important;
}

/* Secundaire acties: ghost (transparant, witte rand) */
.cky-btn-reject,
.cky-btn-customize,
.cky-btn-preferences {
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, 0.5) !important;
	color: #ffffff !important;
}
.cky-btn-reject:hover,
.cky-btn-customize:hover,
.cky-btn-preferences:hover {
	border-color: #b8874f !important;
	color: #d9b990 !important;
}

.cky-btn:focus-visible {
	outline: 2px solid #b8874f !important;
	outline-offset: 2px;
}

/* ---- Voorkeurencentrum ---- */
.cky-preference-header,
.cky-footer-wrapper,
.cky-accordion-item,
.cky-preference-body-wrapper {
	border-color: rgba(255, 255, 255, 0.12) !important;
}

.cky-btn-close span {
	color: #ffffff !important;
}

.cky-accordion-header .cky-accordion-btn,
.cky-accordion-btn {
	color: #ffffff !important;
}

/* Fade boven de footerknoppen: de plugin zet inline een wit verloop,
   dus !important is nodig. */
.cky-footer-shadow {
	background: linear-gradient(180deg, rgba(31, 59, 51, 0) 0%, #1f3b33 100%) !important;
}

/* Categorieschakelaars: goud wanneer aan */
.cky-switch input[type="checkbox"]:checked + label,
.cky-switch input[type="checkbox"]:checked + .cky-switch-slider {
	background-color: #b8874f !important;
}
.cky-always-active {
	color: #d9b990 !important;
}

.cky-accordion-chevron i::before,
.cky-accordion-chevron .cky-chevron-right {
	border-color: rgba(255, 255, 255, 0.65) !important;
}

/* Audit-tabel binnen categorieën */
.cky-audit-table {
	background-color: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 12px !important;
}
.cky-audit-table .cky-empty-cookies-text {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* ---- Zwevende revisit-badge: groene pill ---- */
.cky-btn-revisit-wrapper {
	background-color: #1f3b33 !important;
	box-shadow: 0 10px 24px rgba(13, 26, 22, 0.4) !important;
	transition: transform 0.5s var(--cubic-default, cubic-bezier(0.625, 0.05, 0, 1)) !important;
}
.cky-btn-revisit-wrapper:hover {
	background-color: #2c5045 !important;
}

/* Scroll-bewust: cookieyes-revisit.js voegt .cky-revisit-slide-out toe bij
   omlaag scrollen; de pill glijdt links het beeld uit en komt terug bij
   elke scroll omhoog. */
.cky-btn-revisit-wrapper.cky-revisit-slide-out {
	transform: translateX(calc(-100% - 48px)) !important;
}

@media (prefers-reduced-motion: reduce) {
	.cky-btn-revisit-wrapper {
		transition: none !important;
	}
}

/* ---- Overlay achter de voorkeurenmodal ---- */
.cky-overlay {
	background-color: rgba(13, 26, 22, 0.6) !important;
}

/* ---- Voorkeurenmodal op mobiel: bottom sheet binnen het zichtbare
   scherm. De plugin zet hier max-height: 100vh en centreert met
   top: 50%/translate; op telefoons (adresbalk) steekt de modal dan
   boven en onder buiten beeld en lijken de knoppen onbereikbaar. ---- */
@media (max-width: 576px) {
	.cky-modal,
	.cky-modal.cky-modal-open {
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		transform: none !important;
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 16px 16px 0 0 !important;
	}

	.cky-preference-center {
		width: 100% !important;
		/* dvh rekent met de echt zichtbare hoogte; vh als fallback */
		max-height: 85vh !important;
		max-height: 88dvh !important;
		border-radius: 16px 16px 0 0 !important;
	}

	/* Binnen de sheet scrollt alleen de categorielijst; de scroll lekt
	   niet door naar de pagina erachter. */
	.cky-preference-body-wrapper {
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
}

/* Pagina achter de open modal niet mee laten scrollen */
body:has(.cky-modal.cky-modal-open) {
	overflow: hidden;
}