/**
 * Consent banner and the in-place map gate.
 *
 * Uses the same tokens as the rest of the front end, so a client's palette
 * carries into it rather than a grey box appearing on a designed site. Every
 * token has a fallback: this sheet loads on sites whose theme may not define
 * them, and a banner that renders as invisible text is worse than a plain one.
 *
 * The two decision buttons are DELIBERATELY identical. Making refusal the
 * quieter click is the dark pattern the ICO has enforced against, and any
 * future restyle of .realist-consent-button must keep them the same.
 */

.realist-consent {
	position: fixed;
	z-index: 9999;
	inset-inline: 0;
	inset-block-end: 0;
	background: var( --realist-surface, #fff );
	color: var( --realist-text, #1d2327 );
	border-block-start: 1px solid var( --realist-border, #dcdcde );
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.08 );
	padding: 1.25rem;
}

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

.realist-consent-inner {
	max-width: 56rem;
	margin: 0 auto;
}

.realist-consent-title {
	margin: 0 0 0.35em;
	font-size: 1.05rem;
	line-height: 1.3;
}

.realist-consent-text {
	margin: 0 0 1em;
	font-size: 0.95rem;
	line-height: 1.5;
}

.realist-consent-options {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 1.25em;
}

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

.realist-consent-option {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.9rem;
	line-height: 1.45;
}

.realist-consent-option input {
	margin-block-start: 0.2em;
	flex: 0 0 auto;
}

.realist-consent-option-note {
	display: block;
	color: var( --realist-muted, #50575e );
}

.realist-consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

/* One class for Accept and Reject both. See the note at the top of this file. */
.realist-consent-button {
	font: inherit;
	font-size: 0.95rem;
	padding: 0.6em 1.2em;
	border: 1px solid var( --realist-accent, #1d2327 );
	border-radius: var( --realist-radius, 4px );
	background: var( --realist-accent, #1d2327 );
	color: var( --realist-on-accent, #fff );
	cursor: pointer;
}

.realist-consent-button:hover,
.realist-consent-button:focus-visible {
	opacity: 0.9;
}

.realist-consent-link,
.realist-consent-reopen {
	font: inherit;
	font-size: 0.9rem;
	padding: 0.6em 0.2em;
	border: 0;
	background: none;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

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

/* The map gate. Sized to roughly where the map will be, so agreeing does not
   shove the rest of the page down. */
.realist-map-consent {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
	justify-content: center;
	min-height: 12rem;
	padding: 1.25rem;
	border: 1px dashed var( --realist-border, #dcdcde );
	border-radius: var( --realist-radius, 4px );
	background: var( --realist-surface-alt, #f6f7f7 );
}

.realist-map-consent p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var( --realist-muted, #50575e );
}

@media ( prefers-reduced-motion: no-preference ) {
	.realist-consent {
		animation: realist-consent-in 160ms ease-out;
	}
}

@keyframes realist-consent-in {
	from {
		transform: translateY( 100% );
	}
	to {
		transform: translateY( 0 );
	}
}