/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Styling voor de Sportlist cookiebanner + voorkeuren-modal.
 *                Past in het Unified Design System (tokens.css). Geen
 *                hardcoded kleuren, geen externe fonts. Banner = positie-fixed,
 *                modal = full-screen overlay met focus-trap.
 *
 * PATH         : wp-content/themes/sportlist/css/sl-consent.css
 *
 * DEPENDENCIES : css/tokens.css  (alle CSS-variabelen)
 *
 * =============================================================================
 * CSS-VARIABELEN (gebruik uitsluitend deze)
 * =============================================================================
 *   Kleuren   : --color-text, --color-text-muted, --color-brand,
 *               --color-brand-hover, --color-brand-on, --color-surface,
 *               --color-surface-sunken, --color-border-default,
 *               --color-overlay, --color-focus-ring, --neutral-200
 *   Spacing   : --space-2..--space-6
 *   Radii     : --radius-md, --radius-lg, --radius-pill
 *   Schaduw   : --shadow-raised, --shadow-card
 *   Motie     : --duration-base, --ease-out
 *   Z-index   : --z-overlay, --z-modal
 *   Font      : --font-sans
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *   1. BANNER (root + layout + copy + actions)
 *   2. BUTTONS (primary / secondary / ghost)
 *   3. MODAL (backdrop + panel + head + foot)
 *   4. CATEGORIE-RIJEN (toggle + label + beschrijving)
 *   5. RESPONSIVE (mobile-first breakpoint)
 *   6. REDUCED MOTION
 *
 * @package Sportlist
 */

/* ============================================================
   1. BANNER
   ============================================================ */

#sl-consent-root {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	pointer-events: none;
	font-family: var(--font-sans);
}

#sl-consent-root[data-state="hidden"] {
	display: none;
}

.sl-consent-banner {
	pointer-events: auto;
	max-width: 980px;
	margin: 0 auto var(--space-4) auto;
	background: var(--color-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-raised);
	padding: var(--space-5) var(--space-6);
	display: flex;
	gap: var(--space-6);
	align-items: center;
	flex-wrap: wrap;
	color: var(--color-text);
}

.sl-consent-banner__copy {
	flex: 1 1 320px;
	min-width: 0;
}

.sl-consent-banner__title {
	margin: 0 0 var(--space-2) 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text);
	line-height: 1.3;
}

.sl-consent-banner__body {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-text-muted);
	line-height: 1.5;
}

.sl-consent-banner__link {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sl-consent-banner__link:hover,
.sl-consent-banner__link:focus-visible {
	color: var(--color-brand-hover);
}

.sl-consent-banner__actions {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
	flex-shrink: 0;
}

/* ============================================================
   2. BUTTONS
   ============================================================ */

.sl-consent-btn {
	appearance: none;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	padding: var(--space-2) var(--space-5);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background-color var(--duration-base) var(--ease-out),
		border-color     var(--duration-base) var(--ease-out),
		color            var(--duration-base) var(--ease-out),
		box-shadow       var(--duration-base) var(--ease-out);
	white-space: nowrap;
}

.sl-consent-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.sl-consent-btn--primary {
	background: var(--color-brand);
	color: var(--color-brand-on);
	border-color: var(--color-brand);
}

.sl-consent-btn--primary:hover {
	background: var(--color-brand-hover);
	border-color: var(--color-brand-hover);
}

.sl-consent-btn--secondary {
	background: var(--color-surface-sunken);
	color: var(--color-text);
	border-color: var(--color-border-default);
}

.sl-consent-btn--secondary:hover {
	background: var(--neutral-200);
}

.sl-consent-btn--ghost {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border-default);
}

.sl-consent-btn--ghost:hover {
	background: var(--color-surface-sunken);
}

/* ============================================================
   3. MODAL
   ============================================================ */

#sl-consent-modal-root .sl-consent-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal, 500);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	font-family: var(--font-sans);
}

.sl-consent-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--color-overlay);
	z-index: 0;
	animation: sl-consent-fade-in var(--duration-base) var(--ease-out);
}

.sl-consent-modal__panel {
	position: relative;
	z-index: 1;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-raised);
	max-width: 640px;
	width: 100%;
	max-height: calc(100vh - var(--space-8));
	overflow-y: auto;
	padding: var(--space-6);
	color: var(--color-text);
	animation: sl-consent-slide-in var(--duration-base) var(--ease-out);
}

.sl-consent-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-3);
}

.sl-consent-modal__head h2 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-text);
}

.sl-consent-modal__close {
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	width: 36px;
	height: 36px;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-text-muted);
	transition: background-color var(--duration-base) var(--ease-out);
}

.sl-consent-modal__close:hover {
	background: var(--color-surface-sunken);
}

.sl-consent-modal__close:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.sl-consent-modal__intro {
	margin: 0 0 var(--space-5) 0;
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	line-height: 1.5;
}

.sl-consent-modal__subhead {
	margin: 0 0 var(--space-3) 0;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.sl-consent-modal__foot {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-default);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.sl-consent-modal__foot-actions {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.sl-consent-modal__link {
	color: var(--color-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-size: 0.875rem;
}

body.sl-consent-modal-open {
	overflow: hidden;
}

/* ============================================================
   4. CATEGORIE-RIJEN
   ============================================================ */

.sl-consent-cats {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.sl-consent-cat {
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	background: var(--color-surface-sunken);
}

.sl-consent-cat[data-locked="1"] {
	opacity: 0.85;
}

.sl-consent-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.sl-consent-cat__label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	cursor: pointer;
	font-weight: 600;
	color: var(--color-text);
}

.sl-consent-cat[data-locked="1"] .sl-consent-cat__label {
	cursor: not-allowed;
}

.sl-consent-cat__label input[type="checkbox"] {
	appearance: none;
	width: 36px;
	height: 20px;
	border-radius: var(--radius-pill);
	background: var(--neutral-200);
	position: relative;
	cursor: pointer;
	transition: background-color var(--duration-base) var(--ease-out);
	flex-shrink: 0;
	border: none;
	margin: 0;
}

.sl-consent-cat__label input[type="checkbox"]::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
	transition: transform var(--duration-base) var(--ease-out);
}

.sl-consent-cat__label input[type="checkbox"]:checked {
	background: var(--color-brand);
}

.sl-consent-cat__label input[type="checkbox"]:checked::after {
	transform: translateX(16px);
}

.sl-consent-cat__label input[type="checkbox"]:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.sl-consent-cat__label input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.sl-consent-cat__title {
	font-size: 0.9375rem;
}

.sl-consent-cat__state {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
}

.sl-consent-cat__desc {
	margin: var(--space-2) 0 0 0;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	line-height: 1.5;
}

/* ============================================================
   5. RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
	.sl-consent-banner {
		margin: 0 var(--space-3) var(--space-3) var(--space-3);
		padding: var(--space-4);
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-4);
	}
	.sl-consent-banner__actions {
		width: 100%;
		flex-direction: column;
	}
	.sl-consent-banner__actions .sl-consent-btn {
		width: 100%;
	}
	.sl-consent-modal__panel {
		padding: var(--space-5);
		max-height: calc(100dvh - var(--space-4));
	}
	.sl-consent-modal__foot {
		flex-direction: column;
		align-items: stretch;
	}
	.sl-consent-modal__foot-actions {
		width: 100%;
	}
	.sl-consent-modal__foot-actions .sl-consent-btn {
		flex: 1;
	}
}

/* ============================================================
   6. ANIMATIONS + REDUCED MOTION
   ============================================================ */

@keyframes sl-consent-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

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

@media (prefers-reduced-motion: reduce) {
	.sl-consent-btn,
	.sl-consent-modal__close,
	.sl-consent-cat__label input[type="checkbox"],
	.sl-consent-cat__label input[type="checkbox"]::after {
		transition: none;
	}
	.sl-consent-modal__backdrop,
	.sl-consent-modal__panel {
		animation: none;
	}
}