/*
 * Cookie consent banner — standalone copy of the .cookie rules in main.css,
 * for pages that don't load main.css (currently /roadmap). Needs
 * variables.css. Keep in sync with main.css if either changes.
 */

.cookie {
	position: fixed;
	left: var(--space-sm, 16px);
	right: var(--space-sm, 16px);
	bottom: var(--space-sm, 16px);
	z-index: 9999;
	max-width: 440px;
	margin-left: auto;
	background: #1b1b1b;
	color: #d6d6d6;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
	transform: translateY(160%);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie.is_in {
	transform: translateY(0);
}

.cookie_text {
	font-family: var(--font-body, 'DM Sans'), sans-serif;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.cookie_text a {
	color: var(--dark-accent, #8ab4f8);
}

.cookie_actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.cookie_btn {
	flex: 1;
	font-family: var(--font-body, 'DM Sans'), sans-serif;
	font-size: 14px;
	padding: 10px 16px;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: 0.2s all;
}

.cookie_accept {
	background: var(--dark-accent, #8ab4f8);
	color: var(--light-text, #f5f5f5);
}

.cookie_decline {
	background: rgba(255, 255, 255, .08);
	color: #d6d6d6;
}

.cookie_btn:hover {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.cookie {
		transition: none;
	}
}