:root {
    --account-flow-gradient: linear-gradient(90deg, #ef8d96 0%, #b46ee9 48%, #59cbb3 100%);
}

/*
 * Lot 7.8A owner-feedback correction.
 * Keep the progressive fill inside a persistent pill border, matching the
 * accepted Home Account application interaction. The border itself must stay
 * visible around the rounded corners while the gradient fills the padding box.
 */
[data-account-request-form] .button,
.guest-shell .auth-card .button {
    position: relative;
    overflow: hidden;
    background-image: var(--account-flow-gradient) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 0 100% !important;
    background-origin: padding-box !important;
    background-clip: padding-box !important;
    border: 1px solid var(--deep-space) !important;
    border-radius: 999px;
    transition:
        background-size .44s cubic-bezier(.22, 1, .36, 1),
        color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

[data-account-request-form] .button:not(.secondary),
.guest-shell .auth-card .button:not(.secondary) {
    background-color: var(--deep-space) !important;
    color: #fff !important;
}

[data-account-request-form] .button.secondary,
.guest-shell .auth-card .button.secondary {
    background-color: #fff !important;
    color: var(--deep-space) !important;
}

[data-account-request-form] .button:hover,
[data-account-request-form] .button:focus-visible,
.guest-shell .auth-card .button:hover,
.guest-shell .auth-card .button:focus-visible {
    background-image: var(--account-flow-gradient) !important;
    background-size: 100% 100% !important;
    border-color: var(--deep-space) !important;
    box-shadow: 0 12px 30px rgba(180, 110, 233, .22);
    transform: translateY(-2px);
}

[data-account-request-form] .button:not(.secondary):hover,
[data-account-request-form] .button:not(.secondary):focus-visible,
.guest-shell .auth-card .button:not(.secondary):hover,
.guest-shell .auth-card .button:not(.secondary):focus-visible {
    color: #fff !important;
}

/* Keep secondary-button copy dark so it never disappears during the progressive fill. */
[data-account-request-form] .button.secondary:hover,
[data-account-request-form] .button.secondary:focus-visible,
.guest-shell .auth-card .button.secondary:hover,
.guest-shell .auth-card .button.secondary:focus-visible {
    color: var(--deep-space) !important;
}

[data-account-request-form] .button:focus-visible,
.guest-shell .auth-card .button:focus-visible {
    outline: 2px solid rgba(192, 132, 252, .58);
    outline-offset: 3px;
}