/**
 * AAM Rapid Signup — confirmation panel.
 *
 * Deliberately unopinionated about color: it inherits the host theme's text and
 * background so the panel reads as part of the form on all four sites rather
 * than as a bolted-on widget. Only structure, spacing and emphasis are set here.
 */

.aam-rs-confirm {
	margin: 0 0 24px;
}

.aam-rs-confirm[hidden] {
	display: none !important;
}

.aam-rs-confirm__panel {
	/*
	 * Tinted from the inherited text color rather than hard-coded, so the panel
	 * sits correctly on any of the four sites' backgrounds without knowing
	 * anything about their palettes.
	 */
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-left: 3px solid color-mix(in srgb, currentColor 45%, transparent);
	border-radius: 3px;
	padding: 18px 20px;
	background: color-mix(in srgb, currentColor 4%, transparent);
}

@supports not (background: color-mix(in srgb, red 4%, transparent)) {
	.aam-rs-confirm__panel {
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-left: 3px solid rgba(0, 0, 0, 0.45);
		background: rgba(0, 0, 0, 0.03);
	}
}

.aam-rs-confirm__title {
	margin: 0 0 4px;
	font-size: 1rem;
	line-height: 1.3;
}

.aam-rs-confirm__company {
	margin: 0 0 14px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
}

.aam-rs-confirm__details {
	margin: 0 0 16px;
	display: grid;
	gap: 4px;
}

.aam-rs-confirm__details > div {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 10px;
	align-items: baseline;
}

.aam-rs-confirm__details dt {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.65;
}

.aam-rs-confirm__details dd {
	margin: 0;
	overflow-wrap: break-word;
}

.aam-rs-confirm__challenge[hidden] {
	display: none !important;
}

.aam-rs-confirm__label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
}

.aam-rs-confirm__challenge input[type="text"] {
	width: 100%;
	max-width: 320px;
}

.aam-rs-confirm__error {
	margin: 10px 0 0;
	font-weight: 600;
	color: #b32d2e;
}

.aam-rs-confirm__error[hidden] {
	display: none !important;
}

.aam-rs-confirm__answer {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: 8px;
}

.aam-rs-confirm__answer label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	line-height: 1.4;
	cursor: pointer;
}

.aam-rs-confirm__answer input[type="radio"] {
	margin-top: 3px;
	flex: none;
}

.aam-rs-confirm__deadend[hidden] {
	display: none !important;
}

.aam-rs-confirm__deadend {
	opacity: 0.85;
	font-size: 0.94em;
}

.aam-rs-blocked {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-left: 3px solid #b32d2e;
	border-radius: 0 3px 3px 0;
	background: rgba(179, 45, 46, 0.07);
	font-weight: 600;
	line-height: 1.5;
}

.aam-rs-blocked[hidden] {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.aam-rs-confirm * {
		transition: none !important;
	}
}

/* WordPress core ships this class but does not always load it on the front end. */
.aam-rs-confirm .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Server-rendered, i.e. the visitor submitted without answering. Make it read
 * as the thing blocking the form rather than as one more block of text.
 */
.aam-rs-confirm.is-required .aam-rs-confirm__panel {
	border-color: #b32d2e;
	border-left-width: 4px;
	box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08);
}

.aam-rs-confirm:focus {
	outline: none;
}

/* ── modal ──────────────────────────────────────────────────────────────────
 *
 * The panel is moved into a <dialog> when the browser supports one. Everything
 * above still applies — this only changes where the panel sits and swaps the
 * radio pair for buttons. Without <dialog>, none of this matches and the inline
 * panel renders exactly as before.
 */

dialog.aam-rs-modal {
	padding: 0;
	border: 0;
	background: transparent;
	max-width: min(30rem, calc(100vw - 32px));
	width: 100%;
	color: inherit;
	overflow: visible;
}

dialog.aam-rs-modal::backdrop {
	background: rgba(15, 17, 21, 0.55);
	backdrop-filter: blur(2px);
}

dialog.aam-rs-modal .aam-rs-confirm {
	margin: 0;
}

dialog.aam-rs-modal .aam-rs-confirm__panel {
	/*
	 * On its own layer over a dim backdrop the panel is the only thing on
	 * screen, so it carries a solid surface and its own shadow rather than the
	 * tint it uses when sitting inline among the fields.
	 */
	background: Canvas;
	border: 0;
	border-radius: 8px;
	padding: 24px 26px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

dialog.aam-rs-modal .aam-rs-confirm__title {
	font-size: 0.95rem;
	opacity: 0.75;
}

dialog.aam-rs-modal .aam-rs-confirm__company {
	font-size: 1.35rem;
	margin-bottom: 18px;
}

/* The radios still carry the value; the buttons set them. */
.aam-rs-confirm.is-modal .aam-rs-confirm__answer {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.aam-rs-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

/*
 * Every value here falls back to a sane default. When the script can read the
 * form's own submit button it fills these custom properties in from it, so the
 * modal's buttons look like the rest of the site rather than like a plugin.
 */
.aam-rs-modal__btn {
	flex: 1 1 auto;
	min-width: 10rem;
	padding: var(--aam-rs-btn-padding, 11px 18px);
	font: var(--aam-rs-btn-font, 600 1rem/1.25 inherit);
	text-transform: var(--aam-rs-btn-transform, none);
	letter-spacing: var(--aam-rs-btn-spacing, normal);
	text-align: center;
	cursor: pointer;
	border-radius: var(--aam-rs-btn-radius, 5px);
	border: var(--aam-rs-btn-border-width, 1px) solid color-mix(in srgb, currentColor 30%, transparent);
	background: transparent;
	color: inherit;
	transition: background-color 0.12s, border-color 0.12s, opacity 0.12s;
}

.aam-rs-modal__btn:hover {
	background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Yes: the site's own primary button. */
.aam-rs-modal__btn.is-primary {
	background: var(--aam-rs-btn-bg, #1c6446);
	background-image: var(--aam-rs-btn-image, none);
	border-color: var(--aam-rs-btn-bg, #1c6446);
	color: var(--aam-rs-btn-fg, #fff);
}

/*
 * No hard-coded hover colour: darkening whatever the theme gave us keeps the
 * relationship right on a light or a dark button.
 */
.aam-rs-modal__btn.is-primary:hover {
	background-color: color-mix(in srgb, var(--aam-rs-btn-bg, #1c6446) 86%, #000);
	border-color: color-mix(in srgb, var(--aam-rs-btn-bg, #1c6446) 86%, #000);
}

/* No: the same button, outlined, so the pair reads as one family. */
.aam-rs-confirm.has-theme-buttons .aam-rs-modal__btn:not(.is-primary) {
	border-color: color-mix(in srgb, var(--aam-rs-btn-bg) 45%, transparent);
	color: inherit;
}

.aam-rs-confirm.has-theme-buttons .aam-rs-modal__btn:not(.is-primary):hover {
	background: color-mix(in srgb, var(--aam-rs-btn-bg) 10%, transparent);
	border-color: var(--aam-rs-btn-bg);
}

@supports not (background: color-mix(in srgb, red 50%, #000)) {
	.aam-rs-modal__btn.is-primary:hover {
		opacity: 0.88;
	}
}

.aam-rs-modal__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@supports not (border-color: color-mix(in srgb, red 30%, transparent)) {
	.aam-rs-modal__btn {
		border-color: rgba(0, 0, 0, 0.3);
	}
	.aam-rs-modal__btn:hover {
		background: rgba(0, 0, 0, 0.06);
	}
}

@media (max-width: 480px) {
	.aam-rs-modal__actions {
		flex-direction: column-reverse;
	}
}