/* ==========================================================================
   PM4U Modern Animated Floating Social Media Bar (Left-Center)
   Component Prefix: pm4u-social-
   ========================================================================== */

.pm4u-social-bar {
  position: fixed;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9980;
  display: flex;
  flex-direction: column;
  pointer-events: none; /* Container itself does not block clicks */
}

.pm4u-social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pm4u-social-item {
  position: relative;
  display: flex;
  align-items: center;
  pointer-events: auto; /* Buttons are interactive */
}

.pm4u-social-link {
  display: inline-flex;
  align-items: center;
  height: 46px;
  width: 46px;
  min-width: 46px;
  border-radius: 50px;
  background-color: #ffffff;
  color: #1e293b;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.9);
  outline: none;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
  will-change: width, transform;
}

/* Social Icon Holder */
.pm4u-social-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.25s ease;
}

.pm4u-social-svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: fill 0.25s ease;
}

/* Expanding Platform Label */
.pm4u-social-label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.22s ease 0.06s,
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
  padding-right: 18px;
  user-select: none;
}

/* Platform Unhovered Colors */
.pm4u-social-facebook .pm4u-social-icon { color: #1877F2; }
.pm4u-social-instagram .pm4u-social-icon { color: #E1306C; }
.pm4u-social-linkedin .pm4u-social-icon { color: #0A66C2; }
.pm4u-social-youtube .pm4u-social-icon { color: #FF0000; }

.pm4u-social-facebook .pm4u-social-link { border-color: rgba(24, 119, 242, 0.2); }
.pm4u-social-instagram .pm4u-social-link { border-color: rgba(225, 48, 108, 0.2); }
.pm4u-social-linkedin .pm4u-social-link { border-color: rgba(10, 102, 194, 0.2); }
.pm4u-social-youtube .pm4u-social-link { border-color: rgba(255, 0, 0, 0.2); }

/* Hover & Keyboard Focus States */
.pm4u-social-link:hover,
.pm4u-social-link:focus-visible {
  transform: translateX(4px) scale(1.03);
  color: #ffffff !important;
}

.pm4u-social-link:hover .pm4u-social-icon,
.pm4u-social-link:focus-visible .pm4u-social-icon {
  color: #ffffff !important;
  transform: scale(1.1);
}

.pm4u-social-link:hover .pm4u-social-label,
.pm4u-social-link:focus-visible .pm4u-social-label {
  opacity: 1;
  transform: translateX(0);
}

/* Keyboard Focus Accessibility */
.pm4u-social-link:focus-visible {
  outline: 2px solid #0b3a75;
  outline-offset: 3px;
}

/* Platform-Specific Expanded Backgrounds & Custom Widths */
/* 1. Facebook */
.pm4u-social-facebook .pm4u-social-link:hover,
.pm4u-social-facebook .pm4u-social-link:focus-visible {
  width: 140px;
  background: linear-gradient(135deg, #1877F2 0%, #0d65d9 100%);
  border-color: #1877F2;
  box-shadow: 0 8px 24px rgba(24, 119, 242, 0.4), 0 2px 6px rgba(24, 119, 242, 0.2);
}

/* 2. Instagram */
.pm4u-social-instagram .pm4u-social-link:hover,
.pm4u-social-instagram .pm4u-social-link:focus-visible {
  width: 146px;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: #dc2743;
  box-shadow: 0 8px 24px rgba(220, 39, 67, 0.4), 0 2px 6px rgba(204, 35, 102, 0.2);
}

/* 3. LinkedIn */
.pm4u-social-linkedin .pm4u-social-link:hover,
.pm4u-social-linkedin .pm4u-social-link:focus-visible {
  width: 132px;
  background: linear-gradient(135deg, #0A66C2 0%, #004182 100%);
  border-color: #0A66C2;
  box-shadow: 0 8px 24px rgba(10, 102, 194, 0.4), 0 2px 6px rgba(10, 102, 194, 0.2);
}

/* 4. YouTube */
.pm4u-social-youtube .pm4u-social-link:hover,
.pm4u-social-youtube .pm4u-social-link:focus-visible {
  width: 132px;
  background: linear-gradient(135deg, #FF0000 0%, #c40000 100%);
  border-color: #FF0000;
  box-shadow: 0 8px 24px rgba(255, 0, 0, 0.4), 0 2px 6px rgba(196, 0, 0, 0.2);
}

/* Active Press State */
.pm4u-social-link:active {
  transform: translateX(2px) scale(0.98);
}

/* Tablet Screens (768px to 991px) */
@media (max-width: 991px) {
  .pm4u-social-bar {
    left: 10px;
  }
  .pm4u-social-list {
    gap: 10px;
  }
  .pm4u-social-link {
    height: 42px;
    width: 42px;
    min-width: 42px;
  }
  .pm4u-social-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }
  .pm4u-social-svg {
    width: 18px;
    height: 18px;
  }
  .pm4u-social-label {
    font-size: 0.82rem;
    padding-right: 14px;
  }
  .pm4u-social-facebook .pm4u-social-link:hover,
  .pm4u-social-facebook .pm4u-social-link:focus-visible { width: 130px; }
  .pm4u-social-instagram .pm4u-social-link:hover,
  .pm4u-social-instagram .pm4u-social-link:focus-visible { width: 136px; }
  .pm4u-social-linkedin .pm4u-social-link:hover,
  .pm4u-social-linkedin .pm4u-social-link:focus-visible { width: 122px; }
  .pm4u-social-youtube .pm4u-social-link:hover,
  .pm4u-social-youtube .pm4u-social-link:focus-visible { width: 122px; }
}

/* Small Tablets / Large Mobiles (576px to 767px) */
@media (max-width: 767px) {
  .pm4u-social-bar {
    left: 8px;
  }
  .pm4u-social-list {
    gap: 8px;
  }
  .pm4u-social-link {
    height: 38px;
    width: 38px;
    min-width: 38px;
  }
  .pm4u-social-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }
  .pm4u-social-svg {
    width: 16px;
    height: 16px;
  }
  .pm4u-social-label {
    font-size: 0.78rem;
    padding-right: 12px;
  }
  .pm4u-social-facebook .pm4u-social-link:hover,
  .pm4u-social-facebook .pm4u-social-link:focus-visible { width: 118px; }
  .pm4u-social-instagram .pm4u-social-link:hover,
  .pm4u-social-instagram .pm4u-social-link:focus-visible { width: 124px; }
  .pm4u-social-linkedin .pm4u-social-link:hover,
  .pm4u-social-linkedin .pm4u-social-link:focus-visible { width: 112px; }
  .pm4u-social-youtube .pm4u-social-link:hover,
  .pm4u-social-youtube .pm4u-social-link:focus-visible { width: 112px; }
}

/* Mobile Screens (< 576px) */
/* Hide floating bar on compact mobile screens to prevent overlap with content, WhatsApp button & chatbot */
@media (max-width: 575px) {
  .pm4u-social-bar {
    display: none !important;
  }
}

/* Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  .pm4u-social-link,
  .pm4u-social-icon,
  .pm4u-social-label {
    transition: none !important;
    transform: none !important;
  }
}