/* ==========================================================================
 * Cookiebanner.
 * ========================================================================== */

.tg-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--tg-z-toast);
	padding: var(--tg-gutter);
	padding-bottom: max(var(--tg-gutter), env(safe-area-inset-bottom));
	pointer-events: none;
}

.tg-consent__panel {
	max-width: 34rem;
	margin-inline: auto;
	padding: var(--tg-space-6);
	/*
	 * Panelet må aldrig blive højere end skærmen. Med kategorierne foldet ud
	 * ramte det 616 px på en 812 px høj telefon plus afstand foroven, og
	 * "Gem mit valg" faldt uden for kanten. Som flex-kolonne med loft bliver
	 * knapperne stående, og kun kategorilisten ruller (se __options).
	 */
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - var(--tg-gutter) * 2);
	/*
	 * Nærmest uigennemsigtig. Banneret lander ofte oven på heroens foto, og
	 * en gennemsigtig flade dér gør teksten ulæselig — man skal kunne læse
	 * hvad man siger ja til.
	 */
	background: color-mix(in srgb, var(--tg-bg-base) 97%, transparent);
	border: 1px solid var(--tg-border-strong);
	border-radius: var(--tg-radius-2xl);
	box-shadow: var(--tg-shadow-lg);
	backdrop-filter: blur(24px) saturate(140%);
	pointer-events: auto;
	transform: translateY(1.5rem);
	opacity: 0;
	transition: transform var(--tg-dur) var(--tg-ease-out), opacity var(--tg-dur) var(--tg-ease-out);
}
.tg-consent.is-open .tg-consent__panel { transform: none; opacity: 1; }

@media (min-width: 48rem) {
	.tg-consent { padding: var(--tg-space-6); }
	.tg-consent__panel { margin-inline: 0 auto; }
}

/* ---------------------------------------------------------------- Tekst */

.tg-consent__title {
	font-size: var(--tg-fs-500);
	margin-bottom: var(--tg-space-2);
}
.tg-consent__desc {
	font-size: var(--tg-fs-300);
	line-height: 1.55;
	color: var(--tg-text);
	margin-bottom: var(--tg-space-5);
}

/* ------------------------------------------------------------ Kategorier */

.tg-consent__options {
	display: grid;
	gap: var(--tg-space-3);
	margin-bottom: var(--tg-space-5);
	padding-top: var(--tg-space-2);
	border-top: 1px solid var(--tg-border);
	/* Kategorierne er det eneste der giver efter, når pladsen slipper op. */
	overflow-y: auto;
	overscroll-behavior: contain;
	min-height: 0;
}

.tg-consent__option {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--tg-space-4);
	align-items: start;
	padding-top: var(--tg-space-3);
	cursor: pointer;
}
.tg-consent__option--locked { cursor: default; opacity: .75; }

.tg-consent__option-body { display: grid; gap: .15rem; }
.tg-consent__option-body strong {
	font-family: var(--tg-font-display);
	font-size: var(--tg-fs-400);
	color: var(--tg-text-strong);
}
.tg-consent__option-body span {
	font-size: var(--tg-fs-300);
	line-height: 1.5;
	color: var(--tg-text-muted);
}

/* Kontakten */
.tg-consent__switch { position: relative; display: block; width: 2.6rem; height: 1.5rem; flex: none; }
.tg-consent__switch input {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.tg-consent__option--locked .tg-consent__switch input { cursor: default; }

.tg-consent__slider {
	position: absolute;
	inset: 0;
	border-radius: var(--tg-radius-pill);
	background: var(--tg-surface-sunk);
	border: 1px solid var(--tg-border-strong);
	transition: background-color var(--tg-dur-fast) var(--tg-ease), border-color var(--tg-dur-fast) var(--tg-ease);
	pointer-events: none;
}
.tg-consent__slider::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 3px;
	width: 1.05rem; height: 1.05rem;
	translate: 0 -50%;
	border-radius: 50%;
	background: var(--tg-text-muted);
	transition: translate var(--tg-dur-fast) var(--tg-ease), background-color var(--tg-dur-fast) var(--tg-ease);
}
.tg-consent__switch input:checked + .tg-consent__slider {
	background: var(--tg-grad-accent);
	border-color: transparent;
}
.tg-consent__switch input:checked + .tg-consent__slider::after {
	translate: 1.1rem -50%;
	background: #fff;
}
.tg-consent__switch input:focus-visible + .tg-consent__slider {
	outline: 2px solid var(--tg-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------ Knapperne */

/*
 * "Afvis alle" og "Accepter alle" har med vilje samme størrelse og vægt.
 * Et gråt link over for en stor farvet knap er et mørkt mønster, og et
 * samtykke opnået på den måde er ikke frit afgivet.
 */
.tg-consent__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--tg-space-3);
	flex: none; /* Knapperne skal aldrig klemmes væk. */
}
.tg-consent__btn { width: 100%; justify-content: center; }

.tg-consent__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--tg-space-3);
	margin-top: var(--tg-space-4);
	flex: none;
}
.tg-consent__link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--tg-fs-300);
	color: var(--tg-text-muted);
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}
.tg-consent__link:hover { color: var(--tg-text-strong); }
.tg-consent__save { color: var(--tg-accent-solid); font-weight: 600; }

/* Genåbning fra sidefoden — ser ud som de øvrige links dernede. */
.tg-footer__consent-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--tg-text-muted);
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}
.tg-footer__consent-link:hover { color: var(--tg-accent-solid); }

@media (prefers-reduced-motion: reduce) {
	.tg-consent__panel { transition: none; }
	.tg-consent__slider, .tg-consent__slider::after { transition: none; }
}