/**
 * Consent UI for the production-only GA4 controller.
 * Uses the storefront's existing monochrome design tokens.
 */
.sfy-consent-banner,
.sfy-consent-settings {
	font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);
}

.sfy-consent-banner[hidden],
.sfy-consent-settings[hidden] {
	display: none !important;
}

.sfy-consent-banner {
	position: fixed;
	z-index: 80;
	bottom: clamp(1rem, 2.4vw, 2rem);
	left: 50%;
	width: min(calc(100vw - 2rem), 64rem);
	border: 1px solid color-mix(in oklch, var(--color-border) 82%, var(--color-foreground));
	border-radius: var(--tw-radius-lg, .5rem);
	background: var(--color-background);
	color: var(--color-foreground);
	box-shadow: 0 1px 2px oklch(14% 0 0 / 6%), 0 16px 38px oklch(14% 0 0 / 12%);
	transform: translateX(-50%);
}

.sfy-consent-banner__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	margin: 0 auto;
	padding: .9rem 1rem;
	gap: .85rem 1.25rem;
	align-items: center;
}

.sfy-consent-banner__icon {
	display: inline-flex;
	flex: 0 0 3rem;
	width: 3rem;
	height: 3rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-muted);
	color: var(--color-foreground);
}

.sfy-consent-banner__icon svg {
	width: 2.1rem;
	height: 2.1rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5;
}

.sfy-consent-banner__icon circle {
	fill: currentColor;
	stroke: none;
}

.sfy-consent-banner__copy {
	min-width: 0;
	max-width: 52ch;
}

.sfy-consent-banner__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 550;
	line-height: 1.3;
}

.sfy-consent-banner__description {
	max-width: 72ch;
	margin: .3rem 0 0;
	color: var(--color-muted-foreground);
	font-size: .8125rem;
	line-height: 1.45;
}

.sfy-consent-banner__actions {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: .625rem;
}

.sfy-consent-banner__button,
.sfy-consent-settings__button {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 0;
	border-radius: var(--tw-radius-md, .375rem);
	padding: .625rem 1.25rem;
	font: inherit;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.5;
	transition: background-color .2s var(--ease-premium), color .2s var(--ease-premium), opacity .2s var(--ease-premium), transform .2s var(--ease-premium);
}

.sfy-consent-banner__button:focus-visible,
.sfy-consent-settings__button:focus-visible {
	outline: 2px solid var(--color-ring, #222);
	outline-offset: 0;
}

.sfy-consent-banner__button--primary {
	background: var(--color-foreground);
	color: var(--color-background);
}

.sfy-consent-banner__button--primary:hover,
.sfy-consent-banner__button--primary:focus-visible {
	opacity: .9;
}

.sfy-consent-banner__button--secondary {
	background: var(--color-secondary);
	color: var(--color-secondary-foreground);
}

.sfy-consent-banner__button--secondary:hover,
.sfy-consent-banner__button--secondary:focus-visible {
	background: var(--color-muted);
}

.sfy-consent-settings {
	position: fixed;
	z-index: 79;
	right: 1.25rem;
	bottom: 1.25rem;
}

.sfy-consent-settings__button {
	width: 2.75rem;
	height: 2.75rem;
	background: var(--color-secondary);
	color: var(--color-muted-foreground);
	box-shadow: 0 1px 2px oklch(14% 0 0 / 6%), 0 8px 20px oklch(14% 0 0 / 10%);
	padding: 0;
}

.sfy-consent-settings__button svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5;
}

.sfy-consent-settings__button:hover,
.sfy-consent-settings__button:focus-visible {
	background: var(--color-muted);
	color: var(--color-foreground);
}

@media (max-width: 767px) {
	.sfy-consent-banner {
		bottom: .75rem;
		left: 50%;
		width: calc(100vw - 1.5rem);
		border-radius: var(--tw-radius-lg, .5rem);
		transform: translateX(-50%);
	}

	.sfy-consent-banner__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		padding: .9rem .9rem calc(.9rem + env(safe-area-inset-bottom));
		gap: .85rem;
	}

	.sfy-consent-banner__icon {
		width: 2.75rem;
		height: 2.75rem;
	}

	.sfy-consent-banner__icon svg {
		width: 1.95rem;
		height: 1.95rem;
	}

	.sfy-consent-banner__copy {
		align-self: center;
		max-width: none;
	}

	.sfy-consent-banner__actions {
		grid-column: 1 / -1;
		margin-top: .15rem;
	}

	.sfy-consent-banner__button {
		flex: 1 1 10rem;
	}

	.sfy-consent-settings {
		right: .75rem;
		bottom: .75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sfy-consent-banner__button,
	.sfy-consent-settings__button {
		transition: none;
	}
}