* 
{
	box-sizing: border-box;
}

html
{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

body 
{
	margin: 0;
	padding: var(--header-height) 0 0;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-family: sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#content 
{
	flex: 1;
}

.cookie-consent
{
	position: fixed;
	bottom: clamp(1.2rem, 4vw, 2.4rem);
	left: 50%;
	transform: translate(-50%, 20px);
	width: min(680px, calc(100% - 2.4rem));
	display: grid;
	gap: 1.2rem;
	padding: 1.35rem clamp(1.2rem, 4vw, 1.8rem);
	border-radius: 26px;
	border: 1px solid var(--border-light);
	background: var(--surface-banner);
	box-shadow: 0 28px 60px color-mix(in srgb, var(--shadow-primary) 32%, transparent);
	z-index: 120;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.cookie-consent.is-visible
{
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.cookie-consent__copy
{
	display: grid;
	gap: 0.65rem;
}

.cookie-consent__title
{
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.cookie-consent__icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
	color: color-mix(in srgb, var(--accent-primary) 80%, var(--text-primary) 20%);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--shadow-secondary) 42%, transparent);
}

.cookie-consent__icon svg
{
	width: 22px;
	height: 22px;
}

.cookie-consent__copy h2
{
	margin: 0;
	font-size: 1.2rem;
}

.cookie-consent__copy p
{
	margin: 0;
	color: color-mix(in srgb, var(--text-secondary) 80%, var(--text-dark) 20%);
	font-size: 0.96rem;
	line-height: 1.55;
}

.cookie-consent__link
{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--accent-primary);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	cursor: pointer;
}

.cookie-consent__link--policy
{
	color: color-mix(in srgb, var(--accent-primary) 70%, var(--text-primary) 30%);
}

.cookie-consent__actions
{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.cookie-btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.55rem 1.4rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 0.92rem;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.cookie-btn:hover,
.cookie-btn:focus-visible
{
	transform: translateY(-2px);
	outline: none;
}

.cookie-btn--primary
{
	background: linear-gradient(135deg, var(--accent-secondary), var(--accent-primary));
	color: var(--text-white);
	box-shadow: 0 18px 36px color-mix(in srgb, var(--shadow-secondary) 48%, transparent);
}

.cookie-btn--ghost
{
	background: var(--surface-ghost);
	border-color: var(--border-light);
	color: var(--text-primary);
}

.cookie-dialog
{
	border: none;
	border-radius: 26px;
	padding: 0;
	width: min(540px, calc(100% - 2.4rem));
	background: var(--surface-dialog);
	color: var(--text-primary);
	box-shadow: 0 38px 80px color-mix(in srgb, var(--shadow-primary) 40%, transparent);
}

.cookie-dialog::backdrop
{
	background: color-mix(in srgb, var(--shadow-primary) 45%, transparent);
}

.cookie-dialog__content
{
	display: grid;
	gap: 1.4rem;
	padding: clamp(1.6rem, 4vw, 2rem);
}

.cookie-dialog__header h2
{
	margin: 0 0 0.4rem;
	font-size: 1.4rem;
}

.cookie-dialog__header p
{
	margin: 0;
	color: color-mix(in srgb, var(--text-secondary) 75%, var(--text-dark) 25%);
	font-size: 0.95rem;
}

.cookie-dialog__controls
{
	display: grid;
	gap: 0.75rem;
}

.cookie-toggle
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.9rem;
	padding: 0.75rem 1rem;
	border-radius: 18px;
	border: 1px solid var(--border-light);
	background: var(--surface-card);
}

.cookie-toggle strong
{
	display: block;
	font-size: 1rem;
}

.cookie-toggle span
{
	display: block;
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--text-secondary) 75%, var(--text-dark) 25%);
}

.cookie-toggle input[type="checkbox"]
{
	width: 48px;
	height: 24px;
	appearance: none;
	border-radius: 999px;
	background: var(--toggle-track);
	position: relative;
	cursor: pointer;
	transition: background 0.2s ease;
}

.cookie-toggle input[type="checkbox"]::after
{
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--text-white);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-primary) 30%, transparent);
	transition: transform 0.2s ease;
}

.cookie-toggle input[type="checkbox"]:checked
{
	background: color-mix(in srgb, var(--accent-primary) 50%, transparent);
}

.cookie-toggle input[type="checkbox"]:checked::after
{
	transform: translateX(22px);
}

.cookie-toggle input[type="checkbox"]:disabled
{
	cursor: not-allowed;
	background: var(--toggle-track-disabled);
}

.cookie-dialog__actions
{
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
}

.cookie-dialog__actions .cookie-btn--ghost
{
	color: color-mix(in srgb, var(--text-secondary) 70%, var(--text-dark) 30%);
	border-color: color-mix(in srgb, var(--border-light) 60%, transparent);
}

@media (max-width: 640px)
{
	.cookie-consent
	{
		width: calc(100% - 1.6rem);
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}

	.cookie-consent__actions
	{
		justify-content: flex-start;
	}

	.cookie-dialog
	{
		width: calc(100% - 1.6rem);
	}

	.cookie-toggle
	{
		grid-template-columns: 1fr;
		align-items: flex-start;
	}

	.cookie-dialog__actions
	{
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.cookie-dialog__actions .cookie-btn
	{
		width: 100%;
		justify-content: center;
	}
}