/**
 * Submit-in-progress feedback for every sign-in / sign-up surface.
 *
 * One stylesheet rather than three, because the three surfaces are the same action seen from
 * different pages, and a visitor who signs in from the modal one day and from checkout the next
 * should not meet two different loading languages. It covers:
 *
 *   .mp-authm-submit    the modal's <button>          (AJAX — cleared by JS on error)
 *   .mp-co-submit       the checkout panel's <button> (plain POST — replaced by the page load)
 *   input[type=submit]  the classic account page      (plain POST — replaced by the page load)
 *
 * The visual is a CSS-only ring: a circle with a translucent border and one opaque edge, rotated
 * forever. No icon font, no SVG sprite, no library — the same technique the SSO overlay in
 * mp-sso-popup.js already uses, so the two loading states on this site look like siblings. Every
 * submit button here is dark green with white text, so a white ring reads on all of them and no
 * per-surface colour is needed.
 *
 * Two shapes, because the markup differs and neither can be changed:
 *
 *   <button>            .mp-authl-btn — the spinner is a ::before and sits beside the (swapped)
 *                       label, so the visitor gets words as well as a circle.
 *   <input type=submit> cannot carry a pseudo-element, so mp-auth-loading.js wraps it in
 *                       .mp-authl-wrap and lays a real .mp-authl-spin element over it. The
 *                       input's own text is made transparent rather than rewritten, because its
 *                       value attribute is the POST marker the server looks for.
 *
 * Both hooks are classes added by the JS rather than the surfaces' own class names. That keeps
 * the rules independent of which page they are on, and it is what makes the specificity work:
 * mp-auth-modal.css, mp-checkout.css and the classic template all declare their buttons with
 * !important, and this file cannot rely on being printed after all three. Every rule below is
 * therefore at least one simple selector deeper than the rule it overrides, so !important ties
 * are broken in this file's favour wherever it ends up in the cascade.
 */

/* ── The spinner itself ─────────────────────────────────────────────────────────────────── */

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

/* Reduced-motion substitute: the ring stays put and breathes instead of turning. Still clearly
   "working", with nothing travelling across the screen. */
@keyframes mp-authl-pulse {
	0%, 100% {
		opacity: .3;
	}

	50% {
		opacity: 1;
	}
}

/* ── Shape 1: <button>, spinner beside the label ────────────────────────────────────────── */

.mp-authl-btn.is-mp-loading {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	/* Not opacity: .65 — a button mid-request is busy, not unavailable, and fading it that far
	   reads as "this did not work". */
	opacity: .94 !important;
	cursor: default !important;
	transform: none !important;
}

.mp-authl-btn.is-mp-loading::before {
	content: '' !important;
	display: block !important;
	flex: 0 0 auto !important;
	width: 17px !important;
	height: 17px !important;
	box-sizing: border-box !important;
	border: 2px solid rgba(255, 255, 255, .32) !important;
	border-top-color: #fff !important;
	border-radius: 50% !important;
	animation: mp-authl-spin .75s linear infinite !important;
}

/* A disabled button still matches :hover, so the hover treatment has to be stood down explicitly
   or the surface keeps lifting and brightening under a cursor that can no longer do anything. */
.mp-authl-btn.is-mp-loading:hover,
.mp-authl-btn.is-mp-loading:active,
.mp-authl-btn.is-mp-loading:focus-visible {
	transform: none !important;
	box-shadow: none !important;
}

.mp-authm .mp-authl-btn.is-mp-loading:hover,
.mp-authm .mp-authl-btn.is-mp-loading:focus-visible {
	background: var(--mp-authm-primary) !important;
}

.mp-co-panel .mp-authl-btn.is-mp-loading:hover,
.mp-co-panel .mp-authl-btn.is-mp-loading:active {
	background: var(--mp-co-primary) !important;
}

/* ── Shape 2: <input type="submit">, spinner laid over the control ──────────────────────────
   The wrapper is inserted by the JS and is display:block / width:100%, which is exactly what all
   of these buttons already are — so wrapping changes nothing about the layout. */

.mp-authl-wrap {
	position: relative !important;
	display: block !important;
	width: 100% !important;
}

/* Transparent text rather than a rewritten value: name/value on this control is the POST marker
   ('wdm_login', 'register') the server checks for, so its value must survive untouched.
   The input[type="submit"] variant is listed separately only to out-specify the classic
   template's .wdm-eb-login-form-sec-1 input[type="submit"] rule, which is one deeper than the
   plain descendant selector would be. */
.mp-authl-wrap .is-mp-loading,
.mp-authl-wrap input[type="submit"].is-mp-loading {
	color: transparent !important;
	text-shadow: none !important;
	opacity: .94 !important;
	cursor: default !important;
	transform: none !important;
}

.mp-authl-wrap .is-mp-loading:hover,
.mp-authl-wrap .is-mp-loading:active,
.mp-authl-wrap input[type="submit"].is-mp-loading:hover,
.mp-authl-wrap input[type="submit"].is-mp-loading:active {
	color: transparent !important;
	transform: none !important;
}

.mp-authl-spin {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 18px !important;
	height: 18px !important;
	margin: -9px 0 0 -9px !important;
	box-sizing: border-box !important;
	border: 2px solid rgba(255, 255, 255, .32) !important;
	border-top-color: #fff !important;
	border-radius: 50% !important;
	animation: mp-authl-spin .75s linear infinite !important;
	/* Never intercept a click that is already on its way to the button underneath. */
	pointer-events: none !important;
}

/* ── Screen readers ─────────────────────────────────────────────────────────────────────────
   The wrapped buttons lose their visible label to color:transparent, and a spinner says nothing
   to assistive tech, so the JS appends a live region carrying the same "Please wait…" wording the
   sighted visitor gets. */

.mp-authl-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.mp-authl-btn.is-mp-loading::before,
	.mp-authl-spin {
		/* Complete the ring first: with nothing rotating, a gap in the border just looks broken. */
		border-color: rgba(255, 255, 255, .85) !important;
		animation: mp-authl-pulse 1.6s ease-in-out infinite !important;
	}
}