/*
 * Contact-form submit UX: result modal + submit-button loading spinner.
 *
 * Replaces the LEXO Captcha toast (#l-notify) with a themed modal dialog for the
 * submission confirmation / error message, and shows a spinner on the disabled
 * submit button during the captcha + send roundtrip. Purely additive theme
 * styling; the plugin and common_functions files are never touched. Modal
 * selectors are namespaced under .mn-form-modal to avoid clashing with the
 * theme's existing .error / .check form classes.
 */

.mn-form-modal {
	width: calc(100% - 40px);
	max-width: 440px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #ffffff;
	color: #494848;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
	overflow: hidden;
}

.mn-form-modal::backdrop {
	background: rgba(20, 20, 20, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* Entrance animation (skipped for reduced-motion users) */
.mn-form-modal[open] {
	animation: mn-modal-in 0.28s ease-out;
}
@keyframes mn-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mn-form-modal__card {
	padding: 38px 32px 28px;
	text-align: center;
	font-family: 'MyriadPro-Light', Arial, Helvetica, sans-serif;
}

.mn-form-modal__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	line-height: 1;
	font-weight: bold;
}
.mn-form-modal.is-success .mn-form-modal__icon { background: #e8f5ec; color: #2e7d4f; }
.mn-form-modal.is-error   .mn-form-modal__icon { background: #fdeceb; color: #e23230; }

.mn-form-modal__title {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.2;
	color: #1a1a1a;
}

.mn-form-modal__msg {
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.6;
	color: #6b6b6b;
}

.mn-form-modal__close {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 4px;
	background-color: #8e8d8d;
	color: #ffffff;
	font-family: inherit;
	font-size: 18px;
	padding: 10px 32px;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}
.mn-form-modal__close:hover,
.mn-form-modal__close:focus-visible { background-color: #e23230; }
.mn-form-modal__close:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.mn-form-modal[open] { animation: none; }
}

@media (max-width: 480px) {
	.mn-form-modal__card { padding: 32px 22px 24px; }
	.mn-form-modal__title { font-size: 21px; }
}

/* ============================================================ SUBMIT LOADING STATE
 * The submit button is disabled during the captcha + send roundtrip (by the LEXO
 * Captcha bundle and, as a fallback, by js/contact-modal.js). This :disabled rule
 * turns that into a spinner so the multi-second wait gives clear feedback and the
 * button cannot be clicked twice. Graceful: no disable -> no spinner. */
.contact_submit_button:disabled {
	position: relative;
	cursor: wait;
	background-color: #8e8d8d; /* keep the brand grey, not the browser disabled grey */
	color: rgba(255, 255, 255, 0.85);
	/* Symmetric padding keeps the centred label in place when the spinner shows. */
	padding-left: 56px;
	padding-right: 56px;
}
.contact_submit_button:disabled:hover {
	background-color: #8e8d8d; /* cancel the red hover lift while loading */
}
.contact_submit_button:disabled::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 22px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mn-submit-spin 0.7s linear infinite;
}
@keyframes mn-submit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.contact_submit_button:disabled::after {
		animation: none;
		border-top-color: rgba(255, 255, 255, 0.7);
	}
}

/* ============================================================ VALIDATION ERRORS
 * jQuery Validate (loaded for the LEXO Captcha) is configured with
 * errorElement 'span' + wrapper 'em', so it inserts
 *   <em><span class="error">message</span></em>
 * after an invalid field and adds .error to the input. The theme's legacy global
 * .error rule (style.css: red border + grey glow, !important) turns that span into
 * a bordered inline box that overlaps the next column and breaks the float layout.
 * Reset the message to clean block-level red text; keep only a red border on the
 * invalid input itself. */
#div_form_contacts .contact_input em {
	display: block;
	clear: both;
	margin: 5px 0 0;
	font-style: normal;
}
#div_form_contacts span.error {
	display: block;
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	border: 0 !important;
	box-shadow: none !important;
	background: none;
	color: #e23230;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	line-height: 1.4;
}
#div_form_contacts .textfeld.error {
	box-shadow: none !important; /* keep the legacy red border, drop the grey glow */
}