/* ===== Google "Continue with Google" button (hardened against global CSS collisions) ===== */

.google-signin-btn {
  /* Force button layout even if other CSS styles links/icons globally */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;

  background: #ffffff !important;
  color: #3c4043 !important;
  border: 1px solid #dadce0 !important;

  /* Responsive sizing */
  min-height: 2.75rem;        /* ~44px at 16px base */
  padding: 0 1rem !important;
  border-radius: 0.5rem !important;

  font-weight: 600 !important;
  text-decoration: none !important;
  line-height: 1.1 !important;

  box-shadow: none !important;
  max-width: 100% !important;
  white-space: nowrap !important;

  vertical-align: middle;
}

/* If any stylesheet injects a pseudo-element (common root cause of giant "G"), kill it here */
.google-signin-btn::before,
.google-signin-btn:before,
.google-signin-btn::after,
.google-signin-btn:after {
  content: none !important;
  display: none !important;
}

.google-signin-btn:hover {
  background: #f8f9fa !important;
  text-decoration: none !important;
}

.google-signin-btn:active {
  background: #f1f3f4 !important;
}

.google-signin-btn:focus {
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.25) !important;
}

.google-signin-btn__logo {
  width: 1.125rem;   /* ~18px at 16px base */
  height: 1.125rem;
  display: inline-block !important;
  flex: 0 0 auto !important;

  /* Defensive: if global CSS targets svg sizes */
  max-width: none !important;
  max-height: none !important;
}

/* Defensive: if global CSS targets all SVGs */
.google-signin-btn svg {
  display: inline-block !important;
}

/* Mobile: on small screens, make it full width */
@media (max-width: 480px) {
  .google-signin-btn {
    width: 100% !important;
  }
}