/*
 * Cookie consent banner — standalone styles.
 * Loaded after components.css to guarantee cascade priority.
 * All rules scoped under .sb-cookie-banner.
 */

/* ── Container ───────────────────────────────────────────────────────────── */

.sb-cookie-banner {
	--sb-cookie-banner-offset: clamp(1rem, 2vw, 1.5rem);
	position: fixed;
	right: var(--sb-cookie-banner-offset);
	bottom: var(--sb-cookie-banner-offset);
	z-index: 80;
	width: min(36rem, calc(100vw - (var(--sb-cookie-banner-offset) * 2)));
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--sb-color-border-strong);
	border-radius: 0;
	background: color-mix(in srgb, var(--sb-color-bg) 90%, transparent);
	box-shadow: none;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}

.sb-cookie-banner[hidden] {
	display: none;
}

.sb-cookie-banner__inner {
	display: grid;
	gap: var(--sb-space-sm);
}

/* ── Intro text ──────────────────────────────────────────────────────────── */

.sb-cookie-banner__text {
	display: grid;
	gap: 0.45rem;
	color: var(--sb-color-ink-soft);
	font-size: var(--sb-type-step--1);
	line-height: 1.6;
}

.sb-cookie-banner__text p {
	margin: 0;
}

.sb-cookie-banner__legal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0;
	margin: 0;
	font-size: 0.8rem;
}

.sb-cookie-banner__link {
	color: var(--sb-color-accent);
	text-decoration: none;
	transition: opacity var(--sb-transition-fast);
}

.sb-cookie-banner__link:hover,
.sb-cookie-banner__link:focus-visible {
	opacity: 0.7;
	text-decoration: none;
}

.sb-cookie-banner__link:not(:last-child)::after {
	content: '·';
	display: inline-block;
	margin: 0 0.5rem;
	color: var(--sb-color-muted);
	pointer-events: none;
}

/* ── Actions bar ─────────────────────────────────────────────────────────── */

.sb-cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: flex-end;
	padding-top: 0.2rem;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */

.sb-cookie-banner__button {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.45rem;
	min-height: 2.2rem;
	padding: 0.55rem 1.05rem !important;
	border: 1px solid var(--sb-color-ink);
	border-radius: var(--sb-radius-pill);
	color: var(--sb-color-bg);
	background: var(--sb-color-ink);
	font-family: var(--sb-font-heading);
	font-size: 0.875rem !important;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	cursor: pointer;
	overflow: visible !important;
	z-index: auto !important;
	transform: none !important;
	transition:
		background-color var(--sb-transition-base),
		border-color var(--sb-transition-base),
		color var(--sb-transition-base);
}

.sb-cookie-banner__button::before,
.sb-cookie-banner__button::after {
	content: none !important;
	display: none !important;
}

.sb-cookie-banner__button--ghost {
	color: var(--sb-color-ink-soft);
	border-color: var(--sb-color-border-strong);
	background: transparent;
}

.sb-cookie-banner__button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.875rem;
	height: 0.875rem;
	flex: 0 0 0.875rem;
}

.sb-cookie-banner__button-icon-mark {
	width: 0.875rem;
	height: 0.875rem;
}

.sb-cookie-banner__button:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--sb-color-accent) 55%, transparent);
	outline-offset: 3px;
}

.sb-cookie-banner__button:hover {
	background: color-mix(in srgb, var(--sb-color-ink) 88%, var(--sb-color-accent)) !important;
	border-color: color-mix(in srgb, var(--sb-color-ink) 88%, var(--sb-color-accent)) !important;
	color: var(--sb-color-white) !important;
	transform: none !important;
}

.sb-cookie-banner__button--ghost:hover {
	border-color: var(--sb-color-ink-soft) !important;
	background: color-mix(in srgb, var(--sb-color-ink) 6%, transparent) !important;
	color: var(--sb-color-ink) !important;
	transform: none !important;
}

.sb-cookie-banner__button--configure[aria-expanded="true"] {
	border-color: var(--sb-color-ink-soft);
	background: color-mix(in srgb, var(--sb-color-ink) 8%, transparent);
	color: var(--sb-color-ink);
}

/* ── Preferences panel ───────────────────────────────────────────────────── */

.sb-cookie-banner .sb-cookie-preferences {
	display: none !important;
	margin-top: 0.25rem;
	padding-top: var(--sb-space-sm);
	border-top: 1px solid var(--sb-color-border);
}

.sb-cookie-banner.is-configuring .sb-cookie-preferences {
	display: grid !important;
	gap: 0;
	animation: sb-prefs-reveal 220ms ease both;
}

@keyframes sb-prefs-reveal {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ── Preference rows ─────────────────────────────────────────────────────── */

.sb-cookie-banner .sb-cookie-preference {
	position: relative !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 1rem !important;
	padding: 0.6rem 0 !important;
	border-top: 1px solid var(--sb-color-border) !important;
	border-bottom: none !important;
	background: none !important;
	cursor: default !important;
	overflow: visible !important;
	min-height: 0 !important;
	font-size: inherit !important;
	letter-spacing: inherit !important;
	z-index: auto !important;
	transform: none !important;
}

.sb-cookie-banner label.sb-cookie-preference {
	cursor: pointer !important;
}

.sb-cookie-banner .sb-cookie-preference:first-child {
	border-top: none !important;
	padding-top: 0 !important;
}

.sb-cookie-banner .sb-cookie-preference__info {
	flex: 1;
	min-width: 0;
}

.sb-cookie-banner .sb-cookie-preference__info strong {
	display: block;
	font-family: var(--sb-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sb-color-ink);
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.sb-cookie-banner .sb-cookie-preference__info p {
	margin: 0.15rem 0 0;
	font-size: 0.75rem;
	color: var(--sb-color-ink-soft);
	line-height: 1.5;
}

/* ── Hide native checkbox ────────────────────────────────────────────────── */

.sb-cookie-banner .sb-cookie-preference input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	pointer-events: none !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */

.sb-cookie-banner .sb-cookie-toggle {
	display: block !important;
	flex-shrink: 0 !important;
	width: 2.375rem !important;
	height: 1.35rem !important;
	background: color-mix(in srgb, var(--sb-color-ink) 14%, var(--sb-color-bg)) !important;
	border: 1px solid var(--sb-color-border-strong) !important;
	border-radius: var(--sb-radius-pill) !important;
	position: relative !important;
	overflow: hidden !important;
	transition:
		background-color 220ms ease,
		border-color 220ms ease;
}

.sb-cookie-banner .sb-cookie-toggle::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 2px !important;
	left: 2px !important;
	width: calc(1.35rem - 6px) !important;
	height: calc(1.35rem - 6px) !important;
	background: #fff !important;
	background-color: #fff !important;
	border-radius: 50% !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
	-webkit-mask: none !important;
	mask: none !important;
	transform: translateX(0) !important;
	transition: transform 260ms cubic-bezier(0.33, 1, 0.68, 1);
}

.sb-cookie-banner .sb-cookie-toggle::after {
	content: none !important;
	display: none !important;
}

.sb-cookie-banner .sb-cookie-preference input:checked + .sb-cookie-toggle {
	background: var(--sb-color-ink) !important;
	border-color: var(--sb-color-ink) !important;
}

.sb-cookie-banner .sb-cookie-preference input:checked + .sb-cookie-toggle::before {
	transform: translateX(1rem) !important;
}

.sb-cookie-banner .sb-cookie-preference input:focus-visible + .sb-cookie-toggle {
	outline: 2px solid color-mix(in srgb, var(--sb-color-accent) 55%, transparent);
	outline-offset: 3px;
}

.sb-cookie-banner .sb-cookie-toggle.is-active {
	background: var(--sb-color-ink) !important;
	border-color: var(--sb-color-ink) !important;
	opacity: 0.38;
}

.sb-cookie-banner .sb-cookie-toggle.is-active::before {
	transform: translateX(1rem) !important;
}

.sb-cookie-banner .sb-cookie-toggle.is-disabled {
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Save preferences button ─────────────────────────────────────────────── */

.sb-cookie-banner .sb-cookie-save {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: flex-end;
	margin-top: 0.65rem;
	min-height: 2.2rem !important;
	padding: 0.55rem 1.05rem !important;
	border: 1px solid var(--sb-color-ink) !important;
	border-radius: var(--sb-radius-pill) !important;
	color: var(--sb-color-bg) !important;
	background: var(--sb-color-ink) !important;
	font-family: var(--sb-font-heading) !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	line-height: 1 !important;
	cursor: pointer !important;
	overflow: visible !important;
	z-index: auto !important;
	transform: none !important;
	transition:
		background-color var(--sb-transition-base),
		border-color var(--sb-transition-base),
		color var(--sb-transition-base);
}

.sb-cookie-banner .sb-cookie-save::before,
.sb-cookie-banner .sb-cookie-save::after {
	content: none !important;
	display: none !important;
}

.sb-cookie-banner .sb-cookie-save:hover {
	background: color-mix(in srgb, var(--sb-color-ink) 88%, var(--sb-color-accent)) !important;
	border-color: color-mix(in srgb, var(--sb-color-ink) 88%, var(--sb-color-accent)) !important;
	color: var(--sb-color-white) !important;
	transform: none !important;
}

.sb-cookie-banner .sb-cookie-save:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--sb-color-accent) 55%, transparent);
	outline-offset: 3px;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.sb-cookie-banner.is-configuring .sb-cookie-preferences {
		animation: none;
	}

	.sb-cookie-banner__button,
	.sb-cookie-banner .sb-cookie-save {
		transition: none;
	}

	.sb-cookie-banner .sb-cookie-toggle,
	.sb-cookie-banner .sb-cookie-toggle::before {
		transition: none;
	}
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.sb-cookie-banner {
		right: var(--sb-cookie-banner-offset);
		left: var(--sb-cookie-banner-offset);
		bottom: var(--sb-cookie-banner-offset);
		width: auto;
	}

	.sb-cookie-banner__actions {
		justify-content: stretch;
	}

	.sb-cookie-banner__button {
		flex: 1 1 auto;
		justify-content: center !important;
	}

	.sb-cookie-banner .sb-cookie-preferences {
		max-height: min(34rem, 78vh);
		overflow-y: auto;
	}

	.sb-cookie-banner .sb-cookie-save {
		width: 100% !important;
		align-self: stretch;
		margin-top: 0.75rem;
	}
}