/*
 * Cookiemelding (inc/cookies.php, 08-10-2026).
 * Kaart linksonder, geen overlay en geen blokkade: de site blijft bruikbaar zonder te kiezen.
 * Weigeren en accepteren zijn bewust even groot en even opvallend (eis van de Autoriteit Persoonsgegevens).
 */

.boozt-cookies,
.boozt-cookies * {
	box-sizing: border-box;
}

.boozt-cookies {
	position: fixed;
	z-index: 500; /* boven de header (300) en de hotspot-modal (400), onder de loader (600) */
	left: 1rem;
	/* Loopt het venster door achter het dock, dan schuift de melding dat stuk omhoog (zie app.css). */
	bottom: calc(1rem + var(--boozt-verborgen-onder, 0px));
	width: min(27rem, calc(100vw - 2rem));
	max-height: calc(100svh - 2rem - var(--boozt-verborgen-onder, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
	color: var(--wp--preset--color--cream, #ebe0d6);
	background-color: var(--wp--preset--color--ink, #1b0b09);
	border: 1px solid rgba(235, 224, 214, 0.18);
	border-radius: 1.25rem;
	box-shadow: 0 1.25rem 3rem rgba(27, 11, 9, 0.35);
}

.boozt-cookies[hidden] {
	display: none;
}

.boozt-cookies__kaart {
	padding: 1.5rem;
}

.boozt-cookies__kop {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	line-height: 1.25;
	color: inherit;
}

.boozt-cookies__kop:focus {
	outline: none;
}

.boozt-cookies__tekst {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
}

.boozt-cookies a {
	color: inherit;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------ categorieën */

.boozt-cookies__keuzes {
	display: grid;
	gap: 0.85rem;
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid rgba(235, 224, 214, 0.18);
}

.boozt-cookies__keuzes[hidden] {
	display: none;
}

.boozt-cookies__rij {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
}

.boozt-cookies__rij input {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.2rem 0 0;
	accent-color: var(--wp--preset--color--cream, #ebe0d6);
}

.boozt-cookies__rij label {
	font-size: 0.9rem;
	line-height: 1.45;
	cursor: pointer;
}

.boozt-cookies__rij input:disabled + label {
	cursor: default;
}

.boozt-cookies__altijd {
	margin-left: 0.4rem;
	font-size: 0.75rem;
	opacity: 0.7;
}

.boozt-cookies__uitleg {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	opacity: 0.8;
}

/* ---------------------------------------------------------------- knoppen */

.boozt-cookies__knoppen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.6rem;
	margin-top: 1.25rem;
}

/* Beide keuzes exact dezelfde knop: geen kleur of formaat dat naar "accepteren" duwt. */
.boozt-cookies__knop {
	min-height: 2.9rem;
	padding: 0.6rem 0.9rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--ink, #1b0b09);
	background-color: var(--wp--preset--color--cream, #ebe0d6);
	border: 1px solid var(--wp--preset--color--cream, #ebe0d6);
	border-radius: 2.5rem;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.boozt-cookies__knop[hidden],
.boozt-cookies__link[hidden] {
	display: none;
}

.boozt-cookies__knop.is--breed {
	grid-column: 1 / -1;
}

@media (hover: hover) {
	.boozt-cookies__knop:hover {
		color: var(--wp--preset--color--cream, #ebe0d6);
		background-color: transparent;
	}
}

.boozt-cookies__link {
	grid-column: 1 / -1;
	justify-self: center;
	padding: 0.35rem 0.5rem;
	font: inherit;
	font-size: 0.8125rem;
	color: inherit;
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

/* Zelf kiezen: de twee snelle knoppen maken plaats voor "Keuze opslaan" als hoofdactie, maar blijven bereikbaar. */
.boozt-cookies.is--kiezen .boozt-cookies__knop:not(.is--breed) {
	color: var(--wp--preset--color--cream, #ebe0d6);
	background-color: transparent;
}

@media (hover: hover) {
	.boozt-cookies.is--kiezen .boozt-cookies__knop:not(.is--breed):hover {
		color: var(--wp--preset--color--ink, #1b0b09);
		background-color: var(--wp--preset--color--cream, #ebe0d6);
	}
}

/* Focus zichtbaar op de donkere kaart. */
.boozt-cookies :where(button, a, input):focus-visible {
	outline: 2px solid var(--wp--preset--color--cream, #ebe0d6);
	outline-offset: 2px;
	box-shadow: none;
}

@media screen and (max-width: 480px) {
	.boozt-cookies {
		left: 0.5rem;
		bottom: calc(0.5rem + var(--boozt-verborgen-onder, 0px));
		width: calc(100vw - 1rem);
	}

	.boozt-cookies__kaart {
		padding: 1.25rem;
	}
}

/* ------------------------------------------- knop om de melding te openen */

.boozt-cookies-open {
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* In het juridische footermenu: als de links ernaast. */
.boozt-footer__cookies .boozt-cookies-open {
	text-decoration: none;
}

.boozt-footer__cookies .boozt-cookies-open:hover {
	text-decoration: underline;
}