/*
 * Styles for the "Continue with Google" quick-start block and the
 * "Verified by Google" inline badge, used on the onboarding details form
 * (views/baric/person-details.php).
 */

.onboard-quick-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 8px 0 16px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafbfc;
}

/*
 * Needed on any element whose author CSS sets `display` to something other
 * than the user-agent default, because author CSS beats the UA
 * `[hidden] -> display: none` rule.
 */
.onboard-quick-start[hidden] {
    display: none;
}

.onboard-quick-start__hint {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

.onboard-quick-start .google-login-button,
.onboard-quick-start .microsoft-login-button {
    /* Slightly taller than the default 40px so it lines up with the */
    /* Sprout form inputs on this page without looking cramped. */
    height: 44px;
    line-height: 44px;
    min-width: 260px;
    font-size: 15px;
}

/*
 * Holder for the provider buttons - keeps them on one row on desktop and
 * stacks them vertically on narrow screens. Google is always rendered
 * first (when available) to match the legacy single-button layout.
 */
.onboard-quick-start__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

@media (max-width: 480px) {
    .onboard-quick-start__buttons {
        flex-direction: column;
        align-items: center;
    }

    .onboard-quick-start .google-login-button,
    .onboard-quick-start .microsoft-login-button {
        width: 100%;
        max-width: 320px;
    }
}

/*
 * The "or enter manually" divider sits between the grey quick-start box
 * and the email field, on the white form background. It is hidden via
 * the `hidden` attribute in lockstep with the quick-start box.
 */
.onboard-quick-start__divider {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 20px;
    color: #9ca3af;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.onboard-quick-start__divider[hidden] {
    display: none;
}

.onboard-quick-start__divider::before,
.onboard-quick-start__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: #e5e7eb;
}

.onboard-quick-start__divider > span {
    padding: 0 12px;
    white-space: nowrap;
}

/*
 * Container for the "Verified by Google" badge + "use a different email"
 * escape hatch, rendered directly under the email input when a Google
 * round-trip has populated it in this session.
 */
.onboard-email-verified {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0px 0 40px;
}

.onboard-email-verified[hidden] {
    display: none;
}

.onboard-email-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e6f4ea;
    color: #1e8e3e;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.onboard-email-verified-badge svg {
    flex: 0 0 auto;
}

.onboard-email-edit-link {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: underline;
}

.onboard-email-edit-link:hover,
.onboard-email-edit-link:focus {
    color: #1d4ed8;
    text-decoration: underline;
}

.onboard-email-edit-link[hidden] {
    display: none;
}

/*
 * Readonly styling for the email input while the verified state is locked.
 * The server still treats a mismatch as "not verified" so the readonly is
 * purely a UX guard - when the user clicks "Use a different email" the JS
 * clears both the readonly flag and the badge.
 */
input.is-google-verified-readonly {
    background: #f3f4f6;
    color: #374151;
    cursor: not-allowed;
}