/**
 * Submitting state for the AJAX Mailchimp forms (see js/mailchimp-ajax.js).
 *
 * The overlay covers the whole form rather than sitting inside the button: the
 * submit control is an <input>, which can't carry a ::after spinner, and the
 * popups are short enough that a centred spinner reads clearly.
 */
form[data-imh-mc].imh-mc-loading {
    position: relative;
}

form[data-imh-mc].imh-mc-loading .imh-mc-loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
}

form[data-imh-mc].imh-mc-loading .imh-mc-loader:before {
    content: "";
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border: 4px solid rgba(51, 51, 51, 0.18);
    border-top-color: #333;
    border-radius: 50%;
    animation: imh-mc-spin 0.7s linear infinite;
}

/* The submit stays visible under the overlay, so mute it while it's inert. */
form[data-imh-mc].imh-mc-loading #mc-embedded-subscribe {
    opacity: 0.5;
}

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

@media (prefers-reduced-motion: reduce) {
    form[data-imh-mc].imh-mc-loading .imh-mc-loader:before {
        animation-duration: 2.4s;
    }
}