/* Public presentation for the shared donor validation/AJAX components. */
.global-contact-form [data-shared-contact-form] > .shared-contact-feedback,
.global-contact-form [data-shared-contact-form] > [data-validation-error-for] { display: none; }
.global-contact-form [data-shared-contact-form] > .shared-contact-feedback.active,
.global-contact-form [data-shared-contact-form] > [data-validation-error-for].active { display: block; }
.global-contact-form [data-shared-contact-form] .input_error.active {
    visibility: visible;
    opacity: 1;
    position: static;
    color: #b12efd;
    font-size: 1.4rem;
    line-height: 1.5;
    padding-top: 0.4rem;
}
[data-shared-contact-form] .shared-contact-feedback { grid-column: 1 / -1; padding: 1rem; }
[data-shared-contact-form] .shared-contact-feedback.is-error { color: #b12efd; }
[data-shared-contact-form] .is-invalid { outline: 2px solid #b12efd; outline-offset: 2px; }
[data-shared-contact-form] button:disabled { opacity: 0.65; }
/* Dedicated contact keeps the original layout with shared validation feedback. */
.contact-page #contactForm .input_error.active {
    visibility: visible; opacity: 1; display: block; position: static;
    color: #b12efd; font-size: 1.4rem; line-height: 1.5;
}
.contact-page #contactForm [data-form-feedback]:not(.active) { display: none; }
.contact-page #contactForm [data-form-feedback].active { display: block; }
.contact-page #contactForm .is-invalid { outline: 2px solid #b12efd; outline-offset: 2px; }

/* Keep donor controls and validation messages inside narrow mobile columns. */
@media screen and (max-width: 576px) {
    .global-contact-form .form-content form[data-shared-contact-form],
    .contact-page .form-content #contactForm,
    .global-contact-form .form-content form[data-shared-contact-form] > div,
    .contact-page .form-content #contactForm > div {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .global-contact-form .form-content form[data-shared-contact-form] > div :is(input, select, textarea),
    .contact-page .form-content #contactForm > div :is(input, select, textarea) {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .global-contact-form [data-shared-contact-form] .input_error.active,
    .contact-page #contactForm .input_error.active {
        overflow-wrap: anywhere;
    }
}