/*
 * Microsite-level InterestForm overrides.
 * Keep this file focused on contextual visual customizations only.
 * Canonical layout/field sizing remains in /plugins/interestform/interest-form.css.
 *
 * WHY this file exists: tameyourstorm uses Tailwind v4, which purges CSS classes not
 * referenced in the HTML content scan. The interest form renders through a server-side
 * token, so its class names are invisible to Tailwind's purge step. Visual styles for
 * the form's input, button, and status elements are placed here so they are loaded via
 * the token's `css` parameter and are never subject to purge.
 */

/* Dark glass input matching the .interest-card backdrop. */
form[data-va-interest-form="true"] .va-interest-form__input {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s;
}

form[data-va-interest-form="true"] .va-interest-form__input::placeholder {
    color: rgba(148, 163, 184, 0.55);
}

form[data-va-interest-form="true"] .va-interest-form__input:focus {
    outline: none;
    border-color: rgba(192, 73, 56, 0.65); /* var(--color-rust) at 65% */
}

/* Rust-to-ember gradient CTA button matching the site's primary accent. */
form[data-va-interest-form="true"] .va-interest-form__button {
    background: linear-gradient(135deg, var(--color-rust, #c04938), var(--color-ember, #d85b4a));
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s, box-shadow 0.2s;
}

form[data-va-interest-form="true"] .va-interest-form__button:hover {
    opacity: 0.88;
    box-shadow: 0 8px 20px rgba(192, 73, 56, 0.45);
}

/*
 * Status state colours with brighter variants chosen for legibility against the dark glass card.
 * Higher specificity than the canonical scoped rules in interest-form.css.
 */
form[data-va-interest-form="true"] .va-interest-form__status.message.success {
    color: #4ade80; /* bright green for dark backgrounds */
}

form[data-va-interest-form="true"] .va-interest-form__status.message.error {
    color: #f87171; /* bright red for dark backgrounds */
}

form[data-va-interest-form="true"] .va-interest-form__status.message.processing {
    color: #fbbf24; /* amber for dark backgrounds */
}