/* ============================================================
   Cookie consent banner
   ------------------------------------------------------------
   A single first-visit card that floats above the sticky legal bar.
   Uses only design tokens from main.css, so it follows both themes
   (forge / singularity) without extra rules. RTL-safe: logical
   properties only.
   ============================================================ */

.consent {
	position: fixed;
	inset-block-end: calc(var(--legal-bar-h) + 0.85rem);
	inset-inline-start: 1rem;
	inset-inline-end: auto;
	z-index: 60;

	width: min(30rem, calc(100vw - 2rem));
	max-height: calc(100vh - var(--legal-bar-h) - 2rem);
	overflow-y: auto;

	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);

	padding: 1.15rem 1.25rem 1.1rem;
	text-align: start;

	animation: consent-in 0.32s var(--ease) both;
}

.consent[hidden] {
	display: none;
}

@keyframes consent-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Content ---------- */

.consent__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	/* Keep the close button from overlapping the text. */
	padding-inline-end: 1.4rem;
}

.consent__title {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--text-bright);
}

.consent__text {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--text-dim);
}

.consent__text strong {
	color: var(--text);
	font-weight: 600;
}

.consent__more {
	margin: 0;
}

.consent__link {
	font-size: 0.82rem;
	color: var(--accent-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.consent__link:hover,
.consent__link:focus-visible {
	color: var(--accent-2-text);
}

/* ---------- Actions ---------- */

.consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 0.25rem;
}

/* Both choices share the same weight and size: refusing must be as easy
   as agreeing (consent validity requirement). */
.consent__btn {
	flex: 1 1 8.5rem;
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.62rem 1rem;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--ease) 0.15s, border-color var(--ease) 0.15s,
		color var(--ease) 0.15s;
}

.consent__btn--primary {
	background: var(--accent);
	border: 1px solid var(--accent);
	color: var(--on-accent);
}

.consent__btn--primary:hover,
.consent__btn--primary:focus-visible {
	background: var(--accent-2);
	border-color: var(--accent-2);
}

.consent__btn--ghost {
	background: transparent;
	border: 1px solid var(--border-light);
	color: var(--text);
}

.consent__btn--ghost:hover,
.consent__btn--ghost:focus-visible {
	background: var(--accent-subtle);
	border-color: var(--accent);
	color: var(--accent-text);
}

.consent__note {
	margin: 0;
	font-size: 0.72rem;
	line-height: 1.45;
	color: var(--text-dim);
}

/* ---------- Granular panel ---------- */

.consent__details {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 0.5rem 0.7rem;
}

.consent__summary {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
}

.consent__summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.consent__toggle {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-block-start: 0.55rem;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--text-dim);
	cursor: pointer;
}

.consent__toggle input {
	margin-block-start: 0.15rem;
	accent-color: var(--accent);
}

.consent__toggle strong {
	display: block;
	color: var(--text);
	font-weight: 600;
}

.consent__save {
	flex: 0 0 auto;
	margin-block-start: 0.6rem;
}

/* ---------- Close ---------- */

.consent__close {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-end: 0.6rem;

	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;

	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	color: var(--text-dim);
	cursor: pointer;
	transition: color var(--ease) 0.15s, background var(--ease) 0.15s;
}

.consent__close:hover,
.consent__close:focus-visible {
	background: var(--accent-subtle);
	color: var(--accent-text);
}

/* ---------- Mobile: full-width sheet ---------- */

@media (max-width: 600px) {
	.consent {
		inset-inline: 0.5rem;
		width: auto;
		padding: 1rem 1rem 0.95rem;
	}

	.consent__actions {
		flex-direction: column;
	}

	.consent__btn {
		flex: 1 1 auto;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.consent {
		animation: none;
	}
}