/*
 * Documentation
 * InterestForm plugin stylesheet for anti-spam field hiding, canonical field sizing,
 * and predictable status messaging/layout across microsites.
 */

/* Keep honeypot/time-trap fields off-screen without inline styles so strict CSPs remain valid. */
.va-honeypot-container {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    clip-path: inset(50%) !important;
}

:where(.va-interest-form) {
    --va-interest-gap: 0.75rem;
    --va-interest-control-height: 2.75rem;
    --va-interest-inline-max: 42rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(100%, var(--va-interest-inline-max));
    gap: var(--va-interest-gap);
}

:where(.va-interest-form__label) {
    display: block;
    margin: 0;
    font-weight: 600;
}

:where(.va-interest-form__controls) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.625rem;
    width: 100%;
}

:where(.va-interest-form__input) {
    flex: 1 1 16rem;
    min-width: 12rem;
    min-height: var(--va-interest-control-height);
    width: 100%;
    max-width: 100%;
    padding: 0.625rem 0.875rem;
    box-sizing: border-box;
}

:where(.va-interest-form__button) {
    min-height: var(--va-interest-control-height);
    min-width: 10rem;
    max-width: 100%;
    padding: 0.625rem 1rem;
    box-sizing: border-box;
    align-self: stretch;
}

/* Shared state line below controls + note. */
:where(.va-interest-form__status) {
    margin: 0;
    width: 100%;
}

:where(.va-interest-form__note) {
    margin: 0;
}

/*
 * Status state colours — scoped inside the interest form to prevent polluting any global .message class.
 * :where() on the form context keeps specificity identical to the old global rules (0,1,0 / 0,2,0),
 * so microsites can still override with any 3-class selector (e.g. .interest-status.message.success)
 * in their own stylesheets without needing a microsite CSS override.
 */
:where(form[data-va-interest-form="true"]) .message {
    margin-top: 0;
    font-weight: 600;
}

:where(form[data-va-interest-form="true"]) .message.success {
    color: #16a34a;
}

:where(form[data-va-interest-form="true"]) .message.error {
    color: #dc2626;
}

:where(form[data-va-interest-form="true"]) .message.processing {
    color: #a16207;
}

/* Force status text to remain in normal flow across hostile/global selectors. */
:where(form[data-va-interest-form="true"]) [data-interest-status] {
    position: static !important;
    display: block;
    width: 100%;
    clear: both;
    flex-basis: 100%;
    z-index: auto;
}

/* Stack controls on narrow viewports to avoid clipped buttons/input overlap. */
@media (max-width: 520px) {
    :where(.va-interest-form__controls) {
        flex-direction: column;
    }

    :where(.va-interest-form__button) {
        width: 100%;
    }
}
/* Last-Modified: 2026-03-03T20:16:52.0000000Z */