/* Cookie consent: layer one is a bottom card, layer two a bottom sheet (both breakpoints).
   Don't shrink type to fit narrow phones — buttons WRAP instead; the old scale pass was removed on purpose. */

/* Layer one: the bar */

/* Sized to be READ — a consent notice that goes unnoticed fails. Still no scrim. */
.mf-consent {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 99999;
	max-width: 680px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding: 16px 18px;
	background: var(--mf-bg, #f2f7fc) !important;
	color: var(--mf-muted, #414a5c) !important;
	border: 1px solid var(--mf-line, #aec6e6) !important;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(2, 7, 13, 0.16);
	font-family: var(--mf-font, "Plus Jakarta Sans", system-ui, sans-serif);
	font-size: 14px;
	line-height: 1.5;
	animation: mf-consent-in 0.24s ease-out;
}

@keyframes mf-consent-in {
	from { transform: translateY(8px); opacity: 0; }
	to   { transform: translateY(0);   opacity: 1; }
}

.mf-consent__text {
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
}

.mf-consent__text a {
	color: inherit;
	text-decoration: underline;
}

.mf-consent__actions {
	display: flex;
	gap: 10px;
	width: 100%;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	justify-content: flex-end;
}

.mf-consent__actions .mf-consent__btn {
	flex: 1 1 auto;
}

/* A comfortable 44px touch target, above the ~44px minimum rather than just at it. */
.mf-consent__btn {
	appearance: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	padding: 11px 22px !important;
	min-height: 44px;
	border-radius: 999px !important;
	border: 1px solid transparent !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	transition: background 0.15s ease, border-color 0.15s ease;
}

/* Aanpassen — quiet, text-like. */
.mf-consent__btn--min {
	background: transparent !important;
	color: var(--mf-muted, #414a5c) !important;
	border-color: var(--mf-line, #aec6e6) !important;
}

.mf-consent__btn--min:hover {
	background: var(--mf-tint, #eef4fc) !important;
}

/* Emphasis by colour only, matching "Alles accepteren" in the sheet. */
.mf-consent__btn--ok {
	background: var(--mf-confirm, #1f9d6b) !important;
	color: #ffffff !important;
	border-color: var(--mf-confirm, #1f9d6b) !important;
	font-weight: 600;
}

.mf-consent__btn--ok:hover {
	background: var(--mf-confirm-deep, #168056) !important;
	border-color: var(--mf-confirm-deep, #168056) !important;
}

@media (min-width: 481px) {
	.mf-consent {
		left: 16px;
		right: 16px;
		bottom: 16px;
		padding: 18px 22px;
		gap: 14px 18px;
		font-size: 14.5px;
	}

	/* The 260px basis forces the wrap back to two lines before the copy gets squeezed. */
	.mf-consent__text {
		flex: 1 1 260px;
	}

	.mf-consent__actions {
		width: auto;
		margin-left: auto;
	}

	/* Natural-width pills again once they are not sharing a phone row. */
	.mf-consent__actions .mf-consent__btn {
		flex: 0 0 auto;
	}

	.mf-consent__btn {
		font-size: 14.5px;
		padding: 12px 24px !important;
		min-height: 46px;
	}
}

/* Layer two: the preferences sheet */

.mf-sheet {
	position: fixed;
	inset: 0;
	z-index: 100000;
	font-family: var(--mf-font, "Plus Jakarta Sans", system-ui, sans-serif);
}

.mf-sheet__scrim {
	position: absolute;
	inset: 0;
	background: rgba(2, 7, 13, 0.38);
	animation: mf-sheet-fade 0.2s ease-out;
}

.mf-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	max-width: 560px;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	background: var(--mf-card-bg, #ffffff);
	color: var(--mf-ink, #414a5c);
	border: 1px solid var(--mf-line, #aec6e6);
	border-bottom: 0;
	border-radius: 22px 22px 0 0;
	box-shadow: 0 -8px 34px rgba(2, 7, 13, 0.18);
	animation: mf-sheet-up 0.26s cubic-bezier(0.22, 1, 0.36, 1);
	outline: none;
}

@keyframes mf-sheet-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes mf-sheet-up {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.mf-consent,
	.mf-sheet__scrim,
	.mf-sheet__panel {
		animation: none;
	}
}

.mf-sheet__handle {
	flex: 0 0 auto;
	width: 38px;
	height: 4px;
	margin: 8px auto 2px;
	border-radius: 999px;
	background: var(--mf-line, #aec6e6);
	opacity: 0.7;
}

.mf-sheet__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px 0;
}

.mf-sheet__title {
	margin: 0;
	flex: 1 1 auto;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mf-navy, #0a2b54);
}

/* Theme skins it red; a dismiss must not read as destructive, so pin it quiet. */
.mf-sheet__close {
	appearance: none;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 36px !important;
	padding: 0 !important;
	cursor: pointer;
	border-radius: 999px !important;
	border: 1px solid transparent !important;
	background: transparent !important;
	color: var(--mf-muted, #414a5c) !important;
	box-shadow: none !important;
}

.mf-sheet__close:hover {
	background: var(--mf-tint, #eef4fc) !important;
	border-color: var(--mf-line, #aec6e6) !important;
	color: var(--mf-navy, #0a2b54) !important;
}

.mf-sheet__intro {
	flex: 0 0 auto;
	margin: 6px 0 0;
	padding: 0 18px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--mf-muted, #414a5c);
}

.mf-sheet__intro a {
	color: inherit;
	text-decoration: underline;
}

.mf-sheet__rows {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 12px 18px 4px;
}

.mf-sheet__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 0;
	border-bottom: 1px solid var(--mf-line, #aec6e6);
}

.mf-sheet__rows .mf-sheet__row:last-child {
	border-bottom: 0;
}

/* Necessary row: lock + pill, never a disabled toggle (reads as broken). */
.mf-sheet__row--locked {
	margin: 0 -10px 4px;
	padding: 12px 10px;
	border-bottom: 0;
	border-radius: 12px;
	background: var(--mf-sky-1, #eaf1fb);
}

.mf-sheet__copy {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.mf-sheet__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mf-navy, #0a2b54);
}

/* Only the optional rows' labels are clickable (they drive a checkbox). */
label.mf-sheet__label {
	cursor: pointer;
}

.mf-sheet__lock {
	display: inline-flex;
	align-items: center;
	color: var(--mf-blue, #3a67cc);
}

.mf-sheet__desc {
	font-size: 12px;
	line-height: 1.45;
	color: var(--mf-muted, #414a5c);
}

.mf-sheet__vendor {
	font-size: 11px;
	line-height: 1.4;
	color: var(--mf-muted, #414a5c);
	opacity: 0.8;
}

.mf-sheet__pill {
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--mf-sky-2, #d3e2f6);
	border: 1px solid var(--mf-line, #aec6e6);
	color: var(--mf-navy, #0a2b54);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* The toggle */

.mf-sheet__switch {
	flex: 0 0 auto;
	align-self: center;
	position: relative;
	display: inline-block;
	width: 42px;
	height: 24px;
	cursor: pointer;
}

/* Input stays in the layout (not display:none) so the focus trap can reach it. */
.mf-sheet__switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 1;
}

.mf-sheet__track {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: #d7dee9;
	border: 1px solid var(--mf-line, #aec6e6);
	transition: background 0.16s ease, border-color 0.16s ease;
}

.mf-sheet__thumb {
	position: absolute;
	top: 50%;
	left: 3px;
	width: 17px;
	height: 17px;
	transform: translateY(-50%);
	border-radius: 999px;
	background: var(--mf-white, #ffffff);
	box-shadow: 0 1px 3px rgba(2, 7, 13, 0.28);
	transition: left 0.16s ease;
}

.mf-sheet__switch input:checked + .mf-sheet__track {
	background: var(--mf-selected, #3a67cc);
	border-color: var(--mf-selected, #3a67cc);
}

.mf-sheet__switch input:checked + .mf-sheet__track .mf-sheet__thumb {
	left: 21px;
}

.mf-sheet__switch input:focus-visible + .mf-sheet__track {
	outline: 2px solid var(--mf-selected, #3a67cc);
	outline-offset: 2px;
}

.mf-sheet__close:focus-visible,
.mf-sheet__btn:focus-visible,
.mf-consent__btn:focus-visible {
	outline: 2px solid var(--mf-selected, #3a67cc);
	outline-offset: 2px;
}

/* Sheet actions */

/* Three pills don't fit a phone row, so it WRAPS (see file header). */
.mf-sheet__actions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 18px;
	/* Sits below the safe-area inset on notched phones. */
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--mf-line, #aec6e6);
	background: var(--mf-card-bg, #ffffff);
	border-radius: 0 0 0 0;
}

/* !important: consent.css has NO style deps, so load order can't beat the
   theme's crimson <button> skin. */
.mf-sheet__btn {
	appearance: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	padding: 10px 18px !important;
	border-radius: 999px !important;
	border: 1px solid var(--mf-line, #aec6e6) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	transition: background 0.15s ease, border-color 0.15s ease;
}

/* Refusal: SAME size and border as Opslaan — never shrunk or greyed (#8 §4). */
.mf-sheet__btn--ghost {
	background: transparent !important;
	color: var(--mf-muted, #414a5c) !important;
	border-color: #b3261e !important;
}

.mf-sheet__btn--ghost:hover {
	background: var(--mf-tint, #eef4fc) !important;
}

.mf-sheet__btn--ok {
	background: var(--mf-sky-2, #d3e2f6) !important;
	color: var(--mf-navy, #0a2b54) !important;
}

.mf-sheet__btn--ok:hover {
	background: var(--mf-sky-3, #a9c6ee) !important;
}

.mf-sheet__actions-main {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.mf-sheet__actions-main .mf-sheet__btn {
	flex: 1 1 auto;
}

/* Dominant action by COLOUR ONLY — same size and border as the others, so refusal
   keeps its affordance (#8 §4). White on #1f9d6b clears AA. */
.mf-sheet__btn--all {
	background: var(--mf-confirm, #1f9d6b) !important;
	border-color: var(--mf-confirm, #1f9d6b) !important;
	color: #ffffff !important;
}

.mf-sheet__btn--all:hover {
	background: var(--mf-confirm-deep, #168056) !important;
	border-color: var(--mf-confirm-deep, #168056) !important;
	color: #ffffff !important;
}

body.mf-sheet-open {
	overflow: hidden;
}

@media (min-width: 481px) {
	.mf-sheet__panel {
		/* Still a sheet rising from the bar, not a centred modal (#8 §1). */
		left: 12px;
		right: 12px;
		bottom: 12px;
		border-radius: 22px;
		border-bottom: 1px solid var(--mf-line, #aec6e6);
		max-height: 82vh;
	}

	.mf-sheet__title  { font-size: 17px; }
	.mf-sheet__intro  { font-size: 13px; }
	.mf-sheet__desc   { font-size: 12.5px; }
	.mf-sheet__label  { font-size: 14px; }
	/* padding needs !important to beat the pinned base rule above. */
	.mf-sheet__btn    { font-size: 13px; padding: 10px 20px !important; }

	.mf-sheet__head,
	.mf-sheet__intro,
	.mf-sheet__rows,
	.mf-sheet__actions {
		padding-left: 22px;
		padding-right: 22px;
	}

	.mf-sheet__actions {
		padding-bottom: 14px;
	}

	.mf-sheet__actions-main {
		flex: 0 0 auto;
	}

	.mf-sheet__actions-main .mf-sheet__btn {
		flex: 0 0 auto;
	}

	.mf-sheet__row--locked {
		margin-left: -12px;
		margin-right: -12px;
		padding-left: 12px;
		padding-right: 12px;
	}
}