/**
 * Balanskliniek Consent — banner.
 *
 * De --bk-* tokens komen uit bk-base.css van het thema. Op ACC draait de OUDE
 * HyperHue-chrome, waar die file niet geladen wordt, dus elke var() heeft een
 * fallback met de waarde uit de nieuwe huisstijl. Zo ziet de banner er in beide
 * chromes hetzelfde uit en hangt hij niet aan het thema.
 */

.bk-consent {
	position: fixed;
	z-index: 99999;
	left: 16px;
	right: 16px;
	bottom: 16px;
	max-width: 620px;
	margin: 0 auto;
	background: var(--bk-off-1, #F9F9F5);
	color: var(--bk-body, #4A4A46);
	border: 1px solid var(--bk-line, #E6E7E2);
	border-radius: var(--bk-radius, 16px);
	box-shadow: 0 18px 48px rgba(2, 3, 0, .18);
	font-family: var(--bk-sans, "Geist", Arial, sans-serif);
	font-size: 15px;
	line-height: 1.6;
}

.bk-consent[hidden] { display: none; }

.bk-consent__inner { padding: 24px; }

.bk-consent__title {
	font-family: var(--bk-serif, "Lastik", Georgia, serif);
	color: var(--bk-ink, #1D1D1B);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 400;
	margin: 0 0 10px;
}
.bk-consent__title:focus { outline: none; }

.bk-consent__text { margin: 0 0 18px; }
.bk-consent__text a { color: var(--bk-ink, #1D1D1B); text-decoration: underline; }

/* Voorkeuren */
.bk-consent__prefs {
	border-top: 1px solid var(--bk-line, #E6E7E2);
	margin: 0 0 18px;
	padding-top: 16px;
}
.bk-consent__prefs[hidden] { display: none; }

.bk-consent__row + .bk-consent__row {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--bk-line, #E6E7E2);
}

.bk-consent__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-weight: 500;
	color: var(--bk-ink, #1D1D1B);
}
.bk-consent__toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.bk-consent__toggle-ui {
	flex: 0 0 auto;
	width: 40px;
	height: 23px;
	border-radius: 999px;
	background: #CFCFC8;
	position: relative;
	transition: background .18s ease;
}
.bk-consent__toggle-ui::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: #fff;
	transition: transform .18s ease;
}
.bk-consent__toggle input:checked + .bk-consent__toggle-ui { background: var(--bk-green, #2F4F3B); }
.bk-consent__toggle input:checked + .bk-consent__toggle-ui::after { transform: translateX(17px); }
.bk-consent__toggle input:disabled + .bk-consent__toggle-ui { opacity: .55; cursor: default; }
/* Toetsenbordfocus moet zichtbaar zijn: de checkbox zelf is visueel verborgen. */
.bk-consent__toggle input:focus-visible + .bk-consent__toggle-ui {
	outline: 2px solid var(--bk-ink, #1D1D1B);
	outline-offset: 2px;
}

.bk-consent__toggle-label em { font-style: normal; font-weight: 400; color: var(--bk-muted, #8B8B84); }
.bk-consent__row-text { margin: 8px 0 0 50px; font-size: 14px; }

/* Knoppen: hergebruikt .bk-btn uit het thema, met eigen fallback voor de oude chrome. */
.bk-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-consent .bk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--bk-btn-h, 54px);
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: var(--bk-btn-radius, 14px);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
.bk-consent .bk-btn--dark { background: var(--bk-black, #020300); color: #fff; }
.bk-consent .bk-btn--light {
	background: var(--bk-btn2-bg, #EFEFEF);
	color: var(--bk-ink, #1D1D1B);
	border-color: var(--bk-btn2-bd, #E4E6E7);
}
.bk-consent .bk-btn[hidden] { display: none; }

@media (max-width: 560px) {
	.bk-consent { left: 8px; right: 8px; bottom: 8px; }
	.bk-consent__inner { padding: 18px; }
	.bk-consent .bk-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.bk-consent__toggle-ui,
	.bk-consent__toggle-ui::after { transition: none; }
}

/* Tabel in de cookieverklaring */
.bk-cookie-table table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 28px;
	font-size: 14px;
}
.bk-cookie-table th,
.bk-cookie-table td {
	text-align: left;
	vertical-align: top;
	padding: 10px 12px;
	border-bottom: 1px solid var(--bk-line, #E6E7E2);
}
.bk-cookie-table th { color: var(--bk-ink, #1D1D1B); font-weight: 600; }
.bk-cookie-table code { font-size: 13px; word-break: break-word; }

@media (max-width: 640px) {
	.bk-cookie-table table,
	.bk-cookie-table thead,
	.bk-cookie-table tbody,
	.bk-cookie-table tr,
	.bk-cookie-table td { display: block; width: 100%; }
	.bk-cookie-table thead { display: none; }
	.bk-cookie-table tr { border-bottom: 1px solid var(--bk-line, #E6E7E2); padding: 8px 0; }
	.bk-cookie-table td { border: 0; padding: 4px 0; }
	.bk-cookie-table td::before { content: attr(data-label) " "; font-weight: 600; }
}
