/* stylelint-disable selector-class-pattern -- BEM modifiers describe consent component states. */

.mosaffron-consent {
	background: rgb(20 9 11 / 58%);
	backdrop-filter: blur(0.2rem);
	inset: 0;
	position: fixed;
	z-index: 100000;
}

.mosaffron-consent-banner,
.mosaffron-consent-dialog {
	background: var(--wp--preset--color--cream, #faf7f0);
	border: 1px solid rgb(104 45 53 / 26%);
	border-radius: var(--wp--custom--radius--large, 0.75rem);
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	box-shadow: 0 1.5rem 4rem rgb(20 9 11 / 28%);
	color: var(--wp--preset--color--charcoal, #222);
	left: 50%;
	max-height: calc(100vh - 1.5rem);
	max-width: 64rem;
	overflow: auto;
	padding: clamp(1.25rem, 3vw, 2rem);
	position: absolute;
	transform: translateX(-50%);
	width: calc(100% - clamp(1.5rem, 4vw, 3rem));
}

.mosaffron-consent-banner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
	gap: clamp(1.25rem, 4vw, 3rem);
	align-items: end;
}

.mosaffron-consent-copy {
	max-width: 42rem;
}

.mosaffron-consent-eyebrow {
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--burgundy, #682d35);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.mosaffron-consent h2 {
	margin: 0;
	color: var(--wp--preset--color--charcoal, #222);
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: clamp(1.65rem, 3vw, 2.25rem);
	font-weight: 400;
	line-height: 1.12;
}

.mosaffron-consent-copy > p:not(.mosaffron-consent-eyebrow, .mosaffron-consent-policies) {
	margin: 0.65rem 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--charcoal, #222) 76%, transparent);
	line-height: 1.6;
}

.mosaffron-consent-policies {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
}

.mosaffron-consent-policies a {
	color: var(--wp--preset--color--burgundy, #682d35);
	font-weight: 600;
	text-underline-offset: 0.2em;
}

.mosaffron-consent-dialog label {
	display: block;
	margin-block: 1rem;
}

.mosaffron-consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-top: 1rem;
}

.mosaffron-consent-actions--banner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
}

.mosaffron-consent-actions--banner .mosaffron-consent-button--text {
	grid-column: 1 / -1;
}

.mosaffron-consent .mosaffron-consent-button {
	min-height: 3rem;
	padding: 0.75rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--small, 0.25rem);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
}

.mosaffron-consent .mosaffron-consent-button--primary {
	border-color: var(--wp--preset--color--burgundy, #682d35);
	background: var(--wp--preset--color--burgundy, #682d35);
	color: var(--wp--preset--color--base, #fff);
}

.mosaffron-consent .mosaffron-consent-button--primary:hover {
	border-color: var(--wp--custom--color--burgundy-hover, #4d2027);
	background: var(--wp--custom--color--burgundy-hover, #4d2027);
}

.mosaffron-consent .mosaffron-consent-button--secondary {
	border-color: var(--wp--preset--color--burgundy, #682d35);
	background: transparent;
	color: var(--wp--preset--color--burgundy, #682d35);
}

.mosaffron-consent .mosaffron-consent-button--secondary:hover {
	background: rgb(104 45 53 / 8%);
}

.mosaffron-consent .mosaffron-consent-button--text {
	min-height: 2.5rem;
	padding-block: 0.5rem;
	background: transparent;
	color: var(--wp--preset--color--charcoal, #222);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mosaffron-consent .mosaffron-consent-button--text:hover {
	color: var(--wp--preset--color--burgundy, #682d35);
}

.mosaffron-consent button:focus-visible,
[data-mosaffron-privacy-choices]:focus-visible { outline: 3px solid currentcolor; outline-offset: 3px; }

@media (max-width: 47.99rem) {

	.mosaffron-consent-banner {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.mosaffron-consent-actions--banner {
		grid-template-columns: 1fr;
	}

	.mosaffron-consent-actions--banner .mosaffron-consent-button--text {
		grid-column: auto;
	}
}

@media (prefers-reduced-motion: reduce) {

	.mosaffron-consent * { scroll-behavior: auto; }
}

/* stylelint-enable selector-class-pattern */