/* =============================================================
   FLOATING SOCIAL MEDIA DOCK (RIGHT SIDE)
   Luxury glassmorphism capsule with circular brand icons,
   smooth hover glows, and responsive tooltips.
   ============================================================= */

.floating-social-dock {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 995;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.floating-social-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(16, 185, 129, 0.22);
  border-radius: 9999px;
  box-shadow: 
    0 10px 30px -5px rgba(9, 31, 24, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  pointer-events: auto;
}

.floating-social-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-social-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0F2D23;
  background: #ffffff;
  border: 1px solid rgba(16, 185, 129, 0.14);
  font-size: 1.15rem;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(9, 31, 24, 0.06);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-social-btn:focus {
  outline: none;
}

.floating-social-btn:focus-visible {
  outline: 2px solid #10B981;
  outline-offset: 3px;
}

/* Tooltip sliding out to the left */
.floating-social-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: #091F18;
  color: #ffffff;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 6px 18px rgba(9, 31, 24, 0.28);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
}

.floating-social-tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #091F18;
}

/* Hover & Focus states with brand colors & glow */
.floating-social-btn:hover .floating-social-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* WhatsApp */
.floating-social-btn.social-whatsapp:hover {
  background: #25D366;
  color: #ffffff;
  border-color: #25D366;
  transform: translateX(-4px) scale(1.08);
  box-shadow: 0 8px 20px -3px rgba(37, 211, 102, 0.55);
}

/* Facebook */
.floating-social-btn.social-facebook:hover {
  background: #1877F2;
  color: #ffffff;
  border-color: #1877F2;
  transform: translateX(-4px) scale(1.08);
  box-shadow: 0 8px 20px -3px rgba(24, 119, 242, 0.55);
}

/* LinkedIn */
.floating-social-btn.social-linkedin:hover {
  background: #0A66C2;
  color: #ffffff;
  border-color: #0A66C2;
  transform: translateX(-4px) scale(1.08);
  box-shadow: 0 8px 20px -3px rgba(10, 102, 194, 0.55);
}

/* Instagram */
.floating-social-btn.social-instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff;
  border-color: #dc2743;
  transform: translateX(-4px) scale(1.08);
  box-shadow: 0 8px 20px -3px rgba(220, 39, 67, 0.55);
}

/* YouTube */
.floating-social-btn.social-youtube:hover {
  background: #FF0000;
  color: #ffffff;
  border-color: #FF0000;
  transform: translateX(-4px) scale(1.08);
  box-shadow: 0 8px 20px -3px rgba(255, 0, 0, 0.55);
}

/* Twitter (X) */
.floating-social-btn.social-twitter:hover {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
  transform: translateX(-4px) scale(1.08);
  box-shadow: 0 8px 20px -3px rgba(0, 0, 0, 0.45);
}

/* Active touch state */
.floating-social-btn:active {
  transform: scale(0.95);
}

/* Responsive adjustments: Hide bulky vertical floating dock on mobile to prevent blocking content and buttons */
@media (max-width: 768px) {
  .floating-social-dock {
    display: none !important;
  }
}