/* The Google provider is shared by the login and registration pages. */
.login-pf-page #social-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(100deg, #4285f4 0 25%, #ea4335 25% 50%, #fbbc05 50% 75%, #34a853 75% 100%) border-box;
  box-shadow: 0 5px 15px #17457916;
  color: #202124;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
  transition: box-shadow .18s ease, transform .18s ease;
}
.login-pf-page #social-google::before {
  content: "";
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: url('../img/google-g.svg') center / contain no-repeat;
}
.login-pf-page #social-google i { display: none; }
.login-pf-page #social-google .kc-social-icon-text { color: inherit; font-weight: inherit; }
/* login.css de Keycloak desplaza este texto (left: -15px) para su ícono; aquí el ícono es ::before con gap. */
.login-pf-page #social-google .kc-social-icon-text { position: static; left: auto; }
.login-pf-page #social-google:hover {
  color: #202124;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 9px 20px #17457926;
}
.login-pf-page #social-google:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .login-pf-page #social-google { transition: none; }
  .login-pf-page #social-google:hover { transform: none; }
}