/*
 * Cookie banner (consent.php). A card in the bottom-left corner that never
 * covers the whole page. Colours, radii and sizes are the theme's tokens
 * (theme.json), with fallbacks, so the module works with any theme.
 * "Accept all" and "Reject all" have the same style and weight.
 */

.cluedit-consent {
	position: fixed;
	z-index: 1000;
	bottom: 24px;
	left: 24px;
	box-sizing: border-box;
	width: min(460px, calc(100vw - 48px));
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	border-radius: var(--wp--custom--radius--l, 24px);
	background: var(--wp--preset--color--header, #15263d);
	box-shadow: 0 24px 60px -24px rgb(0 0 0 / 55%);
	color: var(--wp--preset--color--surface, #fff);
}

.cluedit-consent[hidden] {
	display: none;
}

/* Shown before consent.js runs when no choice is stored (consent.php). */
.cluedit-consent-pending .cluedit-consent[hidden] {
	display: block;
}

.cluedit-consent__card {
	display: grid;
	gap: 16px;
	padding: 30px 24px 24px;

	/* Coral bar as on the form card; the rounded box clips it straight. */
	background: linear-gradient(var(--wp--preset--color--accent, #f2a08f) 0 6px, transparent 6px);
}

.cluedit-consent :is(h2, p, fieldset) {
	margin: 0;
}

.cluedit-consent .cluedit-consent__title {
	color: var(--wp--preset--color--surface, #fff);
	font-size: var(--wp--preset--font-size--l, 1.125rem);
	font-weight: 600;
	line-height: 1.3;
}

.cluedit-consent__text {
	color: var(--wp--preset--color--on-dark, #d3dbe8);
	font-size: var(--wp--preset--font-size--s, 0.9375rem);
	line-height: 1.55;
}

.cluedit-consent a {
	color: var(--wp--preset--color--surface, #fff);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cluedit-consent__choices {
	display: grid;
	gap: 12px;
	padding: 0;
	border: 0;
}

.cluedit-consent__choices[hidden] {
	display: none;
}

.cluedit-consent__choices label {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 10px;
	align-items: start;
	color: var(--wp--preset--color--on-dark, #d3dbe8);
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	line-height: 1.5;
	cursor: pointer;
}

.cluedit-consent__choices input {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--wp--preset--color--accent, #f2a08f);
}

.cluedit-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cluedit-consent__button {
	min-height: 44px;
	padding: 0 18px;
	border:
		1px solid
		color-mix(in srgb, var(--wp--preset--color--surface, #fff) 45%, transparent);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: transparent;
	color: var(--wp--preset--color--surface, #fff);
	font: inherit;
	font-size: var(--wp--preset--font-size--s, 0.9375rem);
	font-weight: 600;
	cursor: pointer;
}

.cluedit-consent__button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--surface, #fff) 12%, transparent);
}

.cluedit-consent__button[hidden] {
	display: none;
}

.cluedit-consent__button--quiet {
	padding-inline: 8px;
	border-color: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cluedit-consent :focus-visible {
	outline: 2px solid var(--wp--preset--color--lilac, #c9a3bc);
	outline-offset: 3px;
}

.cluedit-consent__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 600px) {

	.cluedit-consent {
		right: 12px;
		bottom: 12px;
		left: 12px;
		width: auto;
		max-height: calc(100vh - 24px);
	}

	.cluedit-consent__card {
		padding: 26px 20px 20px;
	}

	.cluedit-consent__actions .cluedit-consent__button:not(.cluedit-consent__button--quiet) {
		flex: 1 1 40%;
	}
}