/* external-auth.css — styling for the self-rendered Google button + Apple's provider-rendered button.
   Loaded on the Login/Register pages and the /account Security panel. Google sign-in is now a server-side
   redirect flow, so we render our OWN branded anchor (.ext-auth-google-btn); Apple still renders its own. */

/* Self-rendered Google button (server-side redirect flow) — Google branding: white surface, 4-color "G",
   medium label. A plain anchor to /signin-google/start (no JS), replacing the old GIS-rendered widget. */
.ext-auth-google-btn {
    display: flex; align-items: center; justify-content: center; gap: .6em;
    width: 100%; min-height: 44px; margin-top: .6em; padding: 0 1em;
    background: #fff; color: #1f1f1f; font-weight: 500; font-size: .95rem;
    border: 1px solid #dadce0; border-radius: 999px; text-decoration: none;
    transition: background .15s, box-shadow .15s;
}
.ext-auth-google-btn:hover { background: #f7f8f8; box-shadow: 0 1px 2px rgba(0, 0, 0, .16); }
.ext-auth-google-btn__icon { display: inline-flex; }

/* Apple's OWN rendered "Sign in with Apple" button (into #appleid-signin.ext-auth-apple-official) — we only
   center the slot; the button's HEIGHT is pinned by data-height on the div (Apple's own sizing knob). Provider
   buttons don't scale with the card's container queries, so we give it a sane fixed size + center it, and hard-
   cap the rendered element's height so a wide container can't let Apple's SVG scale up and overflow the card. */
.ext-auth-apple-official { width: 100%; display: flex; justify-content: center; margin-top: .6em; cursor: pointer; }
/* Apple renders the button inline (not an iframe), so cursor:pointer reaches it — the SDK doesn't set one. */
.ext-auth-apple-official, .ext-auth-apple-official * { cursor: pointer; }
.ext-auth-apple-official > * { max-width: 100%; max-height: 46px; }
.ext-auth-apple-error { color: #ffb4b4; font-weight: 500; font-size: .8em; line-height: 1.4; text-align: center; }
.ext-auth-apple-error:not(:empty) {
    margin-top: .55em;
    padding: .5em .75em;
    background: rgba(255, 90, 90, .12);
    border: 1px solid rgba(255, 90, 90, .30);
    border-radius: .55em;
}