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

.sj-cro-consent {
	position: fixed;
	inset: auto 1rem 1rem;
	z-index: 100000;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.sj-cro-consent__body {
	width: min(46rem, 100%);
	padding: clamp(1.1rem, 3vw, 1.6rem);
	border: 1px solid color-mix(in srgb, var(--text, #10231f) 18%, transparent);
	border-radius: 1rem;
	background: var(--surface, #fff);
	color: var(--text, #10231f);
	box-shadow: 0 1rem 3rem rgb(0 0 0 / 22%);
	pointer-events: auto;
}

.sj-cro-consent__body h2 {
	margin: 0 0 .5rem;
	font-size: clamp(1.25rem, 3vw, 1.65rem);
}

.sj-cro-consent__body p {
	margin: .5rem 0;
}

.sj-cro-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1rem;
}

.sj-cro-consent__actions .button {
	flex: 1 1 13rem;
	justify-content: center;
}

.sj-cro-settings {
	position: fixed;
	right: .75rem;
	bottom: .75rem;
	z-index: 99990;
	padding: .55rem .75rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: var(--surface, #fff);
	color: var(--text, #10231f);
	font: inherit;
	font-size: .78rem;
	cursor: pointer;
}

.sj-cro-settings:focus-visible,
.sj-cro-consent button:focus-visible,
.sj-cro-consent a:focus-visible {
	outline: 3px solid var(--accent, #ff6b35);
	outline-offset: 3px;
}

@media (max-width: 34rem) {
	.sj-cro-consent {
		inset: auto .5rem .5rem;
	}

	.sj-cro-consent__actions {
		flex-direction: column-reverse;
	}

	.sj-cro-settings {
		right: .5rem;
		bottom: .5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sj-cro-consent,
	.sj-cro-settings {
		scroll-behavior: auto;
	}
}