/**
 * Small companion stylesheet shared by both custom MMMA forms — the vote
 * form's Frontend/FormRenderer::render() (template-mmma.php) and the WIN
 * page's Frontend/FormRenderer::render_instagram_form() (page-mmma-win.php).
 *
 * Both pages' own <style> blocks already style every plain input/label/
 * button here (they were written to match Contact Form 7's markup in the
 * first place) — the rules below only add what's genuinely new:
 *
 * - .wpcf7-not-valid-tip / .wpcf7-spinner: previously came from Contact
 *   Form 7's own core stylesheet (wpcf7.css), which no longer loads now
 *   that neither form is rendered by [contact-form-7]. template-mmma.php's
 *   <style> block already has positioning rules keyed to these same
 *   class names (.wpcf7-spinner positioning, .submitting …has-spinner
 *   padding) — reusing them here needed no theme CSS changes.
 * - .mmma-form-general-error / .mmma-form-general-success: the one small
 *   piece of markup (a form-level status message) neither original CF7
 *   form rendered visibly on its own, so there's nothing in either page's
 *   existing <style> block to reuse for it.
 * - .mmma-entry__fields .mmma-vote-field input.mmma-vote-value: this rule
 *   used to live in the Contact Form 7 form's OWN template content (a
 *   <style> block embedded directly in the "MMMA Form" CF7 entry, output
 *   as part of do_shortcode($form)) rather than in template-mmma.php's
 *   theme <style> block — so it silently stopped loading once
 *   FormRenderer::render() replaced that shortcode call, leaving the
 *   hidden vote-value field visibly rendered as a normal text box.
 *   Restored here, but scoped with the extra `.mmma-entry__fields`
 *   ancestor (present in the real DOM — see FormRenderer::render()) rather
 *   than the original two-class selector: template-mmma.php's own
 *   `.mmma-entry__fields input[type="text"] { width: 100%; ... }` rule
 *   (its <style> block, printed later in the document than this enqueued
 *   stylesheet) ties that shorter selector's specificity and wins on
 *   source order, stretching this hidden field to 100% of the *viewport*
 *   width (position: absolute with no positioned ancestor resolves
 *   percentage widths against the initial containing block) — which was
 *   the exact cause of the page's horizontal scrollbar. The extra class
 *   here breaks the tie in this rule's favour instead of reaching for
 *   !important or a page-wide `overflow-x: hidden`.
 */

.mmma-entry__fields .mmma-vote-field input.mmma-vote-value {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	color: #dc3232;
}

.mmma-form-general-error {
	margin-top: 12px;
}

/*
 * !important needed here: page-mmma-win.php's own <style> block has
 * `.mmma-win__form .wpcf7-not-valid-tip { color: red; }` (its error-tip
 * styling), which ties this rule's specificity (two classes each) and
 * wins on source order since that inline <style> block is printed later
 * in the document than this enqueued stylesheet. Without !important, a
 * successful Instagram submission's message rendered in red instead of
 * green.
 */
.mmma-form-general-error.mmma-form-general-success {
	color: #46b450 !important;
}

.wpcf7-spinner {
	display: none;
	width: 24px;
	height: 24px;
	border-radius: 100%;
	background-color: #23282d;
	visibility: hidden;
}

.submitting .wpcf7-spinner {
	display: inline-block;
	visibility: visible;
	animation: mmma-spin 1s linear infinite;
	background: transparent;
	border: 3px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	box-sizing: border-box;
}

@keyframes mmma-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.submitting .wpcf7-spinner {
		animation-duration: 0.01ms;
	}
}