/*
 * Teamatico Requests: the thank-you panel the form turns into, and the list
 * of errors in the form's alert. The fields themselves are the site theme's.
 * A site can recolour the panel with these custom properties:
 * --tm-request-accent, --tm-request-accent-soft, --tm-request-ink,
 * --tm-request-muted, --tm-request-surface, --tm-request-line,
 * --tm-request-heading-font.
 */

.tm-request-thanks {
	--tm-thanks-accent: var(--tm-request-accent, #136737);
	--tm-thanks-accent-soft: var(--tm-request-accent-soft, #e4efe8);
	--tm-thanks-ink: var(--tm-request-ink, #122942);
	--tm-thanks-muted: var(--tm-request-muted, #46505a);
	--tm-thanks-surface: var(--tm-request-surface, #f6f9fb);
	--tm-thanks-line: var(--tm-request-line, rgba(27, 58, 92, 0.12));
	position: relative;
	color: var(--tm-thanks-ink);
}
/* The block sits in the site's own container (card, section), so the panel itself is flat. */
.wp-block-teamatico-request-form { scroll-margin-top: var(--tm-request-scroll-offset, 140px); }
.tm-request-thanks[hidden] { display: none; }
/* Focus lands here only from the script, so screen readers read the panel; it is not a control. */
.tm-request-thanks:focus,
.tm-request-thanks:focus-visible { outline: none; }

.tm-request-thanks__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--tm-thanks-accent-soft);
	color: var(--tm-thanks-accent);
	animation: tm-thanks-pop 360ms cubic-bezier(0.2, 0.8, 0.2, 1.2) both;
}
.tm-request-thanks .tm-request-thanks__title {
	margin: 18px 0 8px;
	color: var(--tm-thanks-ink);
	font-family: var(--tm-request-heading-font, var(--wp--preset--font-family--display, inherit));
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
}
.tm-request-thanks .tm-request-thanks__text {
	max-width: 60ch;
	margin: 0;
	color: var(--tm-thanks-muted);
	font-size: 16px;
	line-height: 1.6;
}
.tm-request-thanks__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 28px;
	margin: 24px 0 0;
	padding: 6px 22px;
	border-radius: 12px;
	background: var(--tm-thanks-surface);
}
.tm-request-thanks__list[hidden] { display: none; }
.tm-request-thanks__list > div { min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--tm-thanks-line); }
.tm-request-thanks__list > div:nth-last-child(1),
.tm-request-thanks__list > div:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.tm-request-thanks__list dt {
	margin: 0;
	color: var(--tm-thanks-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.tm-request-thanks__list dd { margin: 1px 0 0; color: var(--tm-thanks-ink); font-size: 15px; overflow-wrap: anywhere; white-space: pre-line; }
.tm-request-thanks .tm-request-thanks__again { margin: 24px 0 0; }
.tm-request-thanks__again a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tm-thanks-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.tm-request-thanks__again a:hover { text-decoration-thickness: 2px; }
.tm-request-thanks__again a:focus-visible { outline: 2px solid var(--tm-thanks-accent); outline-offset: 3px; border-radius: 2px; }

.tm-request-errors { margin: 8px 0 0; padding-left: 20px; }
.tm-request-errors:empty { display: none; }
.tm-request-errors li { margin: 2px 0; }
.tm-request-errors a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 600px) {
	.tm-request-thanks__list { gap: 0 16px; padding: 4px 16px; }
}
@media (max-width: 360px) {
	.tm-request-thanks__list { grid-template-columns: minmax(0, 1fr); }
	.tm-request-thanks__list > div:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--tm-thanks-line); }
}
@keyframes tm-thanks-pop {
	from { opacity: 0; transform: scale(0.6); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.tm-request-thanks__icon { animation: none; }
}

/*
 * Cloudflare Turnstile: the box never makes the form wider than the screen
 * (turnstile.js switches to the compact widget below 300 px). The error list
 * links to the box, which takes focus from the script only.
 */
.wp-block-teamatico-request-form .hb-turnstile { min-width: 0; max-width: 100%; }
.tm-turnstile { max-width: 100%; }
.tm-turnstile iframe { max-width: 100%; }
.tm-turnstile:focus { outline: none; }
.tm-turnstile:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }