/*!
 * Google SSO button styling for the auth pages (login.twig / signup.twig).
 *
 * These were inline `btn btn-default` with `background:#fff; border:1px solid
 * #ddd`, which rendered as a plain white button with no Google branding.
 * This uses Google's own sign-in button spec: white surface, #dadce0 hairline,
 * #1a73e8 on hover/focus, and keeps the brand glyph in its four official colors.
 */

.google-sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    background: #fff;
    color: #3c4043;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid #dadce0;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.google-sso-btn:hover,
.google-sso-btn:focus {
    background: #f7f8f8;
    border-color: #d2e3fc;
    color: #202124;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .3);
}

.google-sso-btn:focus {
    outline: none;
}

.google-sso-btn:active {
    background: #f1f3f4;
    box-shadow: 0 1px 2px rgba(60, 64, 67, .3);
}

/* Brand glyph: FA's .fa-google is a single-color mark, so color each of the
   four official Google colors per layer to match the real button. */
.google-sso-btn .fa-google {
    font-size: 18px;
    line-height: 1;
    background: conic-gradient(from -45deg at 50% 50%,
        #EA4335 0deg,  #4285F4 90deg, #34A853 180deg, #FBBC05 270deg, #EA4335 360deg);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #4285F4; /* fallback if background-clip:text is unsupported */
}

/* Keep the label above the brand colors regardless of theme overrides. */
.google-sso-btn span,
.google-sso-btn {
    text-shadow: none;
}