/* LI GAMING social sign-in buttons — matched geometry with brand-distinct colors. */
#loginModal#loginModal .social-login-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin: 7px 0 12px;
}

/* Shared shape, dimensions, typography and interaction for both providers. */
#loginModal#loginModal .social-login-row > .social-login-btn {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 0;
  min-width: 0;
  min-height: 50px !important;
  height: 50px;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  cursor: pointer;
  overflow: hidden;
  transform: translateY(0);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

/* Google: clean white/slate surface. */
#loginModal#loginModal .social-login-row > #googleSocialLoginBtn {
  color: #182338 !important;
  background: linear-gradient(180deg, #ffffff 0%, #edf1f7 100%) !important;
  border-color: rgba(212, 220, 232, .95) !important;
  box-shadow: inset 0 1px 0 #ffffff !important;
}

/* Facebook: the exact same shape in a restrained Facebook-blue tint. */
#loginModal#loginModal .social-login-row > #facebookSocialLoginBtn {
  color: #18365f !important;
  background: linear-gradient(180deg, #f0f6ff 0%, #dceaff 100%) !important;
  border-color: rgba(164, 195, 239, .98) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

#loginModal#loginModal .social-login-row > #googleSocialLoginBtn::after,
#loginModal#loginModal .social-login-row > #facebookSocialLoginBtn::after {
  content: none !important;
  display: none !important;
}

#loginModal#loginModal .social-login-row > .social-login-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.015);
}

#loginModal#loginModal .social-login-row > #googleSocialLoginBtn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 #ffffff !important;
}

#loginModal#loginModal .social-login-row > #facebookSocialLoginBtn:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

#loginModal#loginModal .social-login-row > .social-login-btn:focus-visible {
  outline: 3px solid rgba(96, 165, 250, .8);
  outline-offset: 3px;
}

#loginModal#loginModal .social-login-row > .social-login-btn:disabled {
  opacity: .7;
  cursor: wait;
  filter: saturate(.75);
}

#loginModal#loginModal .social-login-row .g-icon,
#loginModal#loginModal .social-login-row .fb-icon {
  display: block;
  position: relative;
  z-index: 1;
  flex: 0 0 20px;
  width: 20px !important;
  height: 20px !important;
  margin: 0;
}

#loginModal#loginModal .social-login-row > .social-login-btn span {
  position: relative;
  z-index: 1;
  display: inline-block;
  min-width: 0;
  margin: 0;
  color: inherit;
  white-space: nowrap;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
}

@media (max-width: 350px) {
  #loginModal#loginModal .social-login-row { gap: 7px; }
  #loginModal#loginModal .social-login-row > .social-login-btn { gap: 6px; padding: 0 6px !important; }
  #loginModal#loginModal .social-login-row .g-icon,
  #loginModal#loginModal .social-login-row .fb-icon { flex-basis: 18px; width: 18px !important; height: 18px !important; }
  #loginModal#loginModal .social-login-row > .social-login-btn span { font-size: 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  #loginModal#loginModal .social-login-row > .social-login-btn { transition: none; }
}