/*
 * Consent banner + "Cookie-instellingen" dialog (research §6.4–6.5). New UI on the 1:1 site, built only from its tokens.
 * [D: anchor = the TOS contact band (#222, white, radius 24, stripe above an H2, text 14/20 white-70, p 24 → 32) and the
 * Rechtspersoon card (border white/0.2 on dark) → one dark surface for both; the buttons are the site's outline-white
 * md pill; banner placement from the spec: bottom, full width at 375 with the band's top radius, 40rem centred and
 * lifted 16 from 768; shadow-xl, the site's strongest, because it floats over content.]
 */
.consent-banner {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60; /* above the header (50) and the floating call button (50) */
	max-height: 85vh;
	max-height: 85dvh;
	overflow-y: auto;
	border: 1px solid var(--color-white-20);
	border-bottom: 0;
	border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
	background-color: var(--color-brand-dark);
	color: var(--color-white);
	box-shadow: var(--shadow-xl);
}
@media (min-width: 48rem) {
	.consent-banner {
		bottom: calc(var(--spacing) * 4);
		max-width: 40rem;
		margin-inline: auto;
		border-bottom: 1px solid var(--color-white-20);
		border-radius: var(--radius-3xl);
	}
}
.consent-banner__inner { padding: calc(var(--spacing) * 6); }
@media (min-width: 48rem) { .consent-banner__inner { padding: calc(var(--spacing) * 8); } }
.consent-banner__inner > * + * { margin-top: calc(var(--spacing) * 3); }
.consent-banner__inner > .consent-choices { margin-top: calc(var(--spacing) * 5); }
.consent-banner__title { font-size: var(--text-lg); line-height: var(--text-lg-lh); font-weight: var(--font-weight-semibold); }
.consent-banner__text { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-white-70); }
.consent-banner__text > * + * { margin-top: calc(var(--spacing) * 2); }

/* The page keeps room for the banner at its end, so nothing focused ends up behind it (WCAG 2.4.11); consent.js sets --consent-h… */
.has-consent-banner body { padding-bottom: var(--consent-h, 0px); }
/* …and keyboard focus scrolled into view stops above it, not under it. */
.has-consent-banner { scroll-padding-bottom: var(--consent-h, 0px); }

/* Links on the dark surface: the Rechtspersoon card's underline. */
.consent-banner__link, .consent-dialog__link {
	color: var(--color-white);
	text-decoration: underline;
	text-decoration-color: var(--color-white-30);
	text-underline-offset: 2px;
	transition: text-decoration-color var(--duration-fast) var(--ease-default);
}
.consent-banner__link:hover, .consent-dialog__link:hover { text-decoration-color: var(--color-white); }

/* Accepteren | Weigeren: one markup (parts/consent-choices.php), 50/50, stacked below 320 (research §6.4). */
.consent-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--spacing) * 3); }
@media (max-width: 19.98rem) { .consent-choices { grid-template-columns: minmax(0, 1fr); } }
.consent-choices__button { min-height: 2.75rem; }

/* Dialog: the same surface, centred; the backdrop is the site's dark overlay tone. */
.consent-dialog {
	width: calc(100% - 2 * var(--gutter));
	max-width: var(--container-xl);
	max-height: calc(100dvh - 2 * var(--gutter));
	margin: auto;
	padding: 0;
	overflow-y: auto;
	border: 1px solid var(--color-white-20);
	border-radius: var(--radius-3xl);
	background-color: var(--color-brand-dark);
	color: var(--color-white);
	box-shadow: var(--shadow-xl);
}
.consent-dialog::backdrop { background-color: var(--color-dark-60); }
.consent-dialog__inner { padding: calc(var(--spacing) * 6); }
@media (min-width: 48rem) { .consent-dialog__inner { padding: calc(var(--spacing) * 8); } }
.consent-dialog__inner > * + * { margin-top: calc(var(--spacing) * 4); }
.consent-dialog__inner > .consent-dialog__title { margin-top: calc(var(--spacing) * 3); }
.consent-dialog__title { font-size: var(--text-2xl); line-height: var(--text-2xl-lh); font-weight: var(--font-weight-semibold); }
/* The title only receives focus so screen readers start there (tabindex -1, not operable): no ring, which WebKit would
   otherwise draw even after a mouse click on the footer button. */
.consent-dialog__title:focus, .consent-dialog__title:focus-visible { outline: none; }
.consent-dialog__intro, .consent-dialog__block p { font-size: var(--text-sm); line-height: var(--text-sm-lh); color: var(--color-white-70); }
.consent-dialog__block { padding-top: calc(var(--spacing) * 4); border-top: 1px solid var(--color-white-10); }
.consent-dialog__heading { margin-bottom: calc(var(--spacing) * 1); font-weight: var(--font-weight-semibold); }
.consent-dialog__block .consent-dialog__status { margin-top: calc(var(--spacing) * 3); font-weight: var(--font-weight-semibold); color: var(--color-white); }
.consent-dialog__note { font-size: var(--text-xs); line-height: var(--text-xs-lh); color: var(--color-white-60); }
.consent-dialog__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 3); font-size: var(--text-sm); line-height: var(--text-sm-lh); }
.consent-dialog__close {
	min-height: 2.75rem;
	margin-inline-start: auto;
	padding-inline: calc(var(--spacing) * 4);
	border-radius: var(--radius-full);
	font-weight: var(--font-weight-semibold);
	color: var(--color-white-80);
	transition: all var(--duration-fast) var(--ease-default);
}
.consent-dialog__close:hover { background-color: var(--color-white-10); color: var(--color-white); }