/* =====================
   🔗 SOCIAL LOGIN BUTTONS (shared)
   ===================== */

.social-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
  color: #8a9baa;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.social-divider::before,
.social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(100, 200, 255, 0.2);
}
body.light .social-divider { color: #5a8fa0; }
body.light .social-divider::before,
body.light .social-divider::after { background: rgba(52, 152, 219, 0.25); }

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.social-btn {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  cursor: pointer;
  border: 1.5px solid rgba(100, 200, 255, 0.22);
  background: rgba(100, 200, 255, 0.04);
  color: #eaf2ff;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
}
.social-btn svg { width: 22px; height: 22px; display: block; }
.social-btn:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.social-btn:active { transform: translateY(-1px) scale(0.97); }
.social-btn:disabled { opacity: 0.55; cursor: progress; }

body.light .social-btn {
  background: rgba(52, 152, 219, 0.05);
  border-color: rgba(52, 152, 219, 0.25);
  color: #14233a;
}

/* Brand colors on hover */
.social-btn--google:hover  { background: #ffffff; color: #ea4335; }
.social-btn--facebook:hover { background: #1877f2; color: #ffffff; }
.social-btn--linkedin:hover { background: #0a66c2; color: #ffffff; }
.social-btn--x:hover        { background: #000000; color: #ffffff; }
.social-btn--github:hover   { background: #24292e; color: #ffffff; }