/**
 * The confirmation screen, and the marketing opt-in on it.
 *
 * Its own file because a confirmation is rendered by more than one shortcode. The questionnaire
 * renders one; since M10 part 1 so does the guide profile form, which loads none of the
 * questionnaire's assets — so the confirmation arrived on a guide page as raw unstyled markup:
 * browser default type, no card, a bare checkbox and a grey system button, on an otherwise
 * designed page. Found by driving the form rather than by reading it.
 *
 * questionnaire.css depends on this file, so the `.tot-q` custom properties below are defined
 * exactly once and both surfaces inherit the same palette.
 *
 * Structural only, as everything in this plugin is — the visual design lives in Elementor.
 */

.tot-q {
	--tot-ink: #1b252f;
	--tot-paper: #ffffff;
	--tot-tint: #f0f9ff;
	--tot-head: #000000;
	--tot-body: #1f2937;
	--tot-muted: #666666;
	--tot-rule: #e2e8f0;
	--tot-sky: #0ea5e9;
	--tot-deep: #0c4a6e;      /* 9.3:1 on white — the accent that may carry text */

	--tot-radius: 14px;
	--tot-shadow: 0 4px 6px rgba(12, 74, 110, 0.08);

	--tot-display: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
	--tot-text: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--tot-label: Oswald, "Helvetica Neue", Helvetica, Arial, sans-serif;

	max-width: 44rem;
	margin-inline: auto;
	color: var(--tot-body);
	font-family: var(--tot-text);
}

.tot-q__title {
	margin: 0 0 0.5rem;
	font-family: var(--tot-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--tot-head);
}

/* ── the confirmation itself ─────────────────────────────────────────────── */

.tot-q--done {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: var(--tot-radius);
	background: var(--tot-tint);
}

.tot-q__ref {
	font-size: 1.0625rem;
}

/* A8. The address we will write to, shown back so a mistyped one is catchable. */
.tot-q__replyto {
	margin: 0 0 1rem;
}

/* ── D-16, the permission the form stopped asking for ────────────────────── */

.tot-q__optin {
	margin: 1.5rem 0 0;
	padding: 1rem;
	border: 1px solid var(--tot-rule);
	border-radius: var(--tot-radius);
	background: var(--tot-tint);
}

.tot-q__optintitle {
	margin: 0 0 0.5rem;
	font-size: 1rem;
}

.tot-q__optinlabel {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin-bottom: 0.75rem;
	font-size: 0.9375rem;
}

/*
 * The button had no rules at all until now — on either surface. It shipped with the opt-in in this
 * branch and rendered as a bare system button beside a designed form, which reads as something
 * half-built and is the last thing a guest sees after sending an enquiry.
 *
 * Deliberately quieter than .tot-q__submit: sending the enquiry is the action of that screen, and
 * this one must not compete with the message that it already worked.
 */
.tot-q__optinsave {
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--tot-deep);
	border-radius: 999px;
	background: transparent;
	color: var(--tot-deep);
	font-family: var(--tot-label);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.tot-q__optinsave:hover {
	background: var(--tot-deep);
	color: #fff;
}

.tot-q__optinsave[disabled] {
	opacity: 0.6;
	cursor: progress;
}