/* ===== Hover-to-expand Floating Social Bar ===== */
.floating-social {
  position: fixed;
  bottom: 32px;
  right: 32px;
  /* keeps main btn at bottom */
  gap: 10px;
  pointer-events: auto;
}

/* main circular button */
.main-btnn {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0077ff, #00e5ff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,0,0,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* subtle hover on main button */
.main-btnn:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 36px rgba(0,0,0,0.25);
}

/* social icons container (stacked above the main button) */
.social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column-reverse; /* so first li is nearest to main btn visually */
  align-items: center;
  gap: 12px;
  pointer-events: none; /* prevent accidental hover-only until shown */
}

/* each icon (initial hidden state) */
.social-list li {
  opacity: 0;
  transform: translateY(18px) scale(0.95);
  transition: transform 350ms cubic-bezier(.2,.9,.3,1), opacity 350ms ease;
  pointer-events: auto; /* allow click once visible */
}

/* icon appearance */
.social-list li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  width: 46px;
  border-radius: 50%;
  background: #0f1724;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 200ms ease, background 200ms ease;
  text-decoration: none;
}

/* hover effect on individual icons */
.social-list li a:hover {
  transform: translateY(-4px) scale(1.08);
  background: linear-gradient(135deg, #ff8a00, #ff0055);
}

/* ===== SHOW ON HOVER: when user hovers the widget, reveal icons ===== */
.floating-social:hover .social-list li,
.floating-social:focus-within .social-list li {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* staggered delays (nearest icon shows first) */
.floating-social:hover .social-list li:nth-child(1) { transition-delay: 0s; }
.floating-social:hover .social-list li:nth-child(2) { transition-delay: 0.05s; }
.floating-social:hover .social-list li:nth-child(3) { transition-delay: 0.1s; }
.floating-social:hover .social-list li:nth-child(4) { transition-delay: 0.15s; }

/* make icons slightly offset from the main button */
.floating-social .social-list { margin-bottom: 70px; }

/* ===== Accessibility: keyboard focus support ===== */
.floating-social .main-btnn { outline: none; }
.floating-social .main-btnn:focus { box-shadow: 0 0 0 4px rgba(0,119,255,0.18); }

/* when keyboard focusing the main button, also show icons */
.floating-social .main-btnn:focus + .social-list li,
.floating-social .main-btnn:focus + .social-list li:nth-child(1) { opacity: 1; transform: translateY(0) scale(1); }

/* ===== RESPONSIVE FALLBACK =====
   On touch devices (no hover) keep icons visible stacked vertically
*/
@media (hover: none) and (pointer: coarse) {
  .social-list li {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .floating-social {
    gap: 10px;
    right: 18px;
    bottom: 18px;
  }
  .main-btnn { height:50px; width:50px; font-size:22px; }
  .social-list li a { height:40px; width:40px; font-size:16px; }
}