/* The cookie choice card (inc/analytics.php): a small dark card in the bottom-left corner, in the site's design
   (ink background, warm glow, brand gradient button). Theme colours are used when present, with fallbacks. */

/* The card: fixed in the corner, above the page, below any open menu or pop-up. */
.as-consent {
	position: fixed;
	inset-inline-start: 1.25rem;
	inset-block-end: 1.25rem;
	z-index: 90;
	box-sizing: border-box;
	inline-size: min(23rem, calc(100vw - 2rem));
	padding: 1.15rem 1.2rem 1.1rem;
	border-radius: 20px;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(239, 152, 32, 0.32), transparent 60%),
		var(--wp--preset--color--ink, #131a1a);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 24px 60px -24px rgba(19, 26, 26, 0.75);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.as-consent[hidden] { display: none; }
.as-consent.is-in { opacity: 1; transform: none; }

/* Title and text. */
.as-consent__title { margin: 0 0 0.35rem; font-size: 0.9375rem; font-weight: 700; color: #fff; }
.as-consent__text { margin: 0 0 0.9rem; }
.as-consent__text a { color: #fff; text-decoration: underline; text-decoration-color: rgba(239, 152, 32, 0.8); text-underline-offset: 3px; }

/* The two buttons, side by side, equal weight in size so declining is as easy as accepting. */
.as-consent__actions { display: flex; gap: 0.5rem; }
.as-consent__btn {
	flex: 1;
	min-block-size: 40px;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.as-consent__btn--no { border: 1px solid rgba(255, 255, 255, 0.28); background: transparent; color: #fff; }
.as-consent__btn--no:hover { background: rgba(255, 255, 255, 0.08); }
.as-consent__btn--ok { border: 0; background: var(--wp--preset--gradient--brand, linear-gradient(90deg, #ed8723, #dd2228)); color: #fff; box-shadow: 0 10px 24px -12px rgba(221, 34, 40, 0.8); }
.as-consent__btn--ok:hover { transform: translateY(-1px); }
.as-consent__btn:focus-visible { outline: 2px solid var(--wp--preset--color--orange, #ed8723); outline-offset: 2px; }

/* Phones: across the bottom, inside the 16px page margins. */
@media (max-width: 600px) {
	.as-consent { inset-inline: 1rem; inset-block-end: 1rem; inline-size: auto; }
}

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

@media print {
	.as-consent { display: none !important; }
}
