/* Forms of the new design (contact, members registration): the pieces their scripts
   (js/contact.js, js/members.js, jquery.validate) and the server replies rely on. */

/* the errors' red (the design system has no red of its own) */
.site-form { --form-error: #b3261e; }

/* jquery.validate's messages under the fields: red, after a small "!" in a ring */
.site-form label.error { display: block; font-size: 13px; color: var(--form-error); margin-top: 4px; }
.site-form label.error::before {
    content: "!"; display: inline-grid; place-items: center;
    width: 14px; height: 14px; margin-right: 6px; vertical-align: 1px;
    border: 1px solid currentColor; border-radius: 50%;
    font-size: 10px; font-weight: 700; line-height: 1;
}
.site-form .input.error { border-color: var(--form-error); }

/* server replies */
.form-note { padding: 12px 16px; font-size: 14px; line-height: 1.55; border: 1px solid var(--color-divider); }
.form-note ul { margin: 6px 0 0; padding-left: 18px; }
.form-note .btn { margin-top: 10px; }
.form-note--error { border-color: var(--form-error); border-left-width: 4px; color: var(--color-text); background: color-mix(in srgb, var(--form-error) 5%, #fff); }
.form-note--success { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-900); }

/* the replies carry the old site's icon markup (<i class="fa ...">): no icon font here, so hide it */
.site-form i.fa:not(.fa-spin) { display: none; }

/* the loader the scripts show (.fa-spin) while sending */
.site-form .fa-spin {
    width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: form-spin 0.7s linear infinite;
}
.site-form .fa-spin[style*='inline'] { display: inline-block !important; }
@keyframes form-spin { to { transform: rotate(360deg); } }