/* Social Share Widget CSS (Left Sticky + Inline Support) */
:root {
  --sidebar-width: 45px;
  --sidebar-expanded-width: 160px;
  --sidebar-icon-size: 20px;
  --sidebar-z-index: 9999;
}

/* --- SIDEBAR STYLES (Keep if user wants both, or for reference) --- */
.share-widget-container {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: var(--sidebar-z-index);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  /* Hidden by default if we are switching to inline only, 
     but keeping class for potential dual usage or revert. 
     Uncomment 'display: none' if you want to strictly hide the sidebar. */
  display: none;
}

.share-btn {
  display: flex;
  align-items: center;
  width: var(--sidebar-width);
  height: 45px;
  text-decoration: none;
  color: white;
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.share-btn i {
  width: var(--sidebar-width);
  text-align: center;
  font-size: var(--sidebar-icon-size);
  flex-shrink: 0;
  z-index: 2;
}

.share-btn span {
  padding-left: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1;
}

.share-btn:hover {
  width: var(--sidebar-expanded-width);
}

.share-btn:hover span {
  opacity: 1;
  transition-delay: 0.1s;
}

/* --- BRAND COLORS --- */
.share-btn.facebook {
  background-color: #3b5998;
}

.share-btn.twitter {
  background-color: #000000;
}

.share-btn.whatsapp {
  background-color: #25D366;
}

.share-btn.linkedin {
  background-color: #0077b5;
}

.share-btn.copy {
  background-color: #6c757d;
}


/* --- INLINE HERO STYLES (Horizontal) --- */
.inline-share-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
  /* Center in Hero */
}

.inline-share-container .share-btn {
  /* Reset Sidebar constraints */
  width: auto;
  height: 30px;
  /* Reduced from 40px */
  padding: 0 12px 0 0;
  /* Reduced padding */
  border-radius: 50px;
  /* Pillow shape */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  /* Softer shadow */
  transform: translateY(0);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.inline-share-container .share-btn i {
  width: 30px;
  /* Icon container width */
  line-height: 30px;
  font-size: 0.8rem;
  /* Smaller icon */
}

.inline-share-container .share-btn span {
  opacity: 1;
  /* Always visible */
  padding-left: 0;
  padding-right: 2px;
  font-size: 0.75rem;
  /* Smaller text */
}

.inline-share-container .share-btn:hover {
  width: auto;
  /* No expansion animation needed */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Mobile tweak for inline */
@media (max-width: 600px) {
  .inline-share-container .share-btn {
    padding: 0;
    width: 40px;
    border-radius: 50%;
  }

  .inline-share-container .share-btn span {
    display: none;
  }
}

/* --- TOAST --- */
.share-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10000;
  opacity: 0;
  transition: all 0.3s ease;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
}

.share-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}