/* ---------------------------------------------------------------------------
   Zoon Naturals consent banner

   Fixed positioning is load bearing. The panel is out of normal flow from its
   first painted frame, so it contributes zero to Cumulative Layout Shift and
   nothing on the page moves when it appears or leaves. PRD COMP-05 and PERF-02
   pull in the same direction here.

   Tokens first, hard fallbacks second, so the banner survives a theme swap.
   --------------------------------------------------------------------------- */

.saffron-consent {
	--sc-base: var(--wp--preset--color--base, #FDFBF6);
	--sc-contrast: var(--wp--preset--color--contrast, #333333);
	--sc-soft: var(--wp--preset--color--contrast-soft, #5A5A5A);
	--sc-accent: var(--wp--preset--color--accent, #2E4A2E);
	--sc-line: var(--wp--preset--color--line, #E7DAC3);

	bottom: 0;
	display: flex;
	justify-content: center;
	left: 0;
	padding: var(--wp--preset--spacing--40, 16px);
	position: fixed;
	right: 0;
	z-index: 9999;
}

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

.saffron-consent__panel {
	background: var(--sc-base);
	border: 1px solid var(--sc-line);
	box-shadow: 0 2px 24px rgba(0, 0, 0, 0.12);
	color: var(--sc-contrast);
	max-height: calc(100vh - var(--wp--preset--spacing--60, 32px));
	max-width: 46rem;
	overflow-y: auto;
	padding: var(--wp--preset--spacing--50, 24px);
	width: 100%;
}

.saffron-consent__title {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	margin: 0;
}

.saffron-consent__intro {
	color: var(--sc-soft);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: var(--wp--preset--spacing--30, 12px) 0 0;
	max-width: 62ch;
}

.saffron-consent__categories {
	display: grid;
	gap: var(--wp--preset--spacing--40, 16px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	list-style: none;
	margin: var(--wp--preset--spacing--40, 16px) 0 0;
	padding: 0;
}

.saffron-consent__toggle {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: 0.5rem;
}

.saffron-consent__label {
	font-weight: 500;
}

.saffron-consent__description {
	color: var(--sc-soft);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: 4px 0 0;
}

.saffron-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30, 12px);
	margin-top: var(--wp--preset--spacing--50, 24px);
}

/* Accept and reject are deliberately indistinguishable. Same padding, same
   colour, same font, same order of appearance every time. If one of these ever
   grows a highlight the banner stops being a question and becomes a nudge. */
.saffron-consent__button {
	background: var(--sc-accent);
	border: 1px solid var(--sc-accent);
	color: var(--sc-base);
	cursor: pointer;
	flex: 1 1 2rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	padding: 0.75em 1.25em;
	text-align: center;
}

.saffron-consent__save {
	background: transparent;
	border: 1px solid var(--sc-line);
	color: var(--sc-contrast);
	cursor: pointer;
	flex: 1 1 2rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	padding: 0.75em 1.25em;
	text-align: center;
}

.saffron-consent__button:hover,
.saffron-consent__save:hover {
	opacity: 0.9;
}

.saffron-consent__button:focus-visible,
.saffron-consent__save:focus-visible,
.saffron-consent-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #2E4A2E);
	outline-offset: 2px;
}

.saffron-consent-link {
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

@media (max-width: 600px) {
	.saffron-consent {
		padding: 0;
	}

	.saffron-consent__panel {
		border-inline: 0;
		max-height: 80vh;
	}

	/* Stacked full width, so neither answer is easier to reach than the other
	   on the screen where thumb position actually decides outcomes. */
	.saffron-consent__actions {
		flex-direction: column;
	}
}