/**
 * Muhni Together — the states a form can be in after the visitor presses send.
 *
 * Kept out of assets/site.css, which is a verbatim copy of the live stylesheet and is
 * replaced wholesale on every design update. The success panel deliberately mirrors
 * .promo-done from the popup, so both look like the same site.
 */

.form-done {
	display: none;
	text-align: center;
	padding: 8px 0;
}

/* The popup keeps its own .promo-done panel, so it is left alone here. */
form.sent:not(.promo-form) > :not(.form-done) {
	display: none;
}

form.sent .form-done {
	display: block;
}

.form-done-ic {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 1.7rem;
	font-weight: 700;
	margin: 0 auto 16px;
}

.form-done h3 {
	margin-bottom: 10px;
}

.form-done p {
	color: var(--ink-soft);
	font-size: .95rem;
	line-height: 1.55;
	margin: 0;
}

/* Shown in place of the old alert() when the send fails. Quiet by design: a thin tinted
   band with a coloured edge, not a warning box that shouts over the form. */
.form-error {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: 8px;
	border-inline-start: 3px solid #C0504D;
	background: rgba(192, 80, 77, .07);
	color: #8E2C2C;
	font-size: .88rem;
	line-height: 1.55;
	text-align: start;
}

/* The site switches theme on this attribute only — it does not follow the OS setting. */
[data-theme="dark"] .form-error {
	border-inline-start-color: #D97C79;
	background: rgba(217, 124, 121, .12);
	color: #F0C4C4;
}

@media (max-width: 820px) {
	.form-done-ic {
		width: 42px;
		height: 42px;
		font-size: 1.25rem;
		margin-bottom: 10px;
	}

	.form-done p {
		font-size: .86rem;
	}
}