/* 
   Share Button and Modal - Unified styling
   This file contains all styling for the share component across the site
   Using standardized class names throughout
 */

/* Container styling */
.share-container {
  position: fixed;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-index-fixed);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Visible state for animation */
.share-container.show-share {
  opacity: 1;
  visibility: visible;
}

/* Toggle button styling */
.share-toggle {
  height: 50px;
  border-radius: 25px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  font-size: var(--font-size-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: var(--transition-medium);
  margin-bottom: 0;
  z-index: var(--z-index-fixed);
  padding: 0 20px;
}

/* Text styling */
.share-text {
  font-weight: 600;
  margin-right: 10px;
  letter-spacing: 0.5px;
}

/* Icon styling */
.share-icon-svg {
  margin-left: 2px;
}

.share-toggle:hover,
.share-toggle:focus-visible {
  background-color: var(--color-primary-light);
  transform: scale(1.05);
}

/* Ensure accessibility with visible focus outlines */
.share-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Modal styling - absolutely centered in the viewport */
.share-box {
  /* Critical positioning for viewport centering */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  margin: 0; /* Ensure no margins affect centering */
  
  /* Enhanced visual styling */
  background-color: var(--color-primary-dark); /* Dark teal background */
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: 0 0 25px rgba(0, 162, 174, 0.4), 0 0 10px rgba(0, 162, 174, 0.2); /* Enhanced glow effect */
  border: 1px solid rgba(0, 162, 174, 0.3); /* Subtle border for definition */
  
  /* Layout */
  display: flex;
  flex-direction: column;
  width: 350px;
  max-width: 90%; /* Ensures the modal isn't too wide on small screens */
  
  /* Visibility control */
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-medium);
  
  /* Ensure modal appears above all other elements */
  z-index: var(--z-index-modal); /* Using standardised z-index variables */
}

.share-box.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}

/* Close button styling */
.share-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background-color: var(--overlay-light);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-white);
  transition: var(--transition-fast);
  padding: 0;
}

.share-close:hover,
.share-close:focus-visible {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* Accessibility focus state for close button */
.share-close:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Title styling */
.share-title {
  font-size: 22px;
  color: white;
  margin-bottom: 14px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
  padding-bottom: 12px;
}

/* Add decorative underline to title */
.share-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, rgba(0,162,174,0) 0%, rgba(0,162,174,1) 50%, rgba(0,162,174,0) 100%);
  border-radius: 3px;
}

/* Share icons container */
.share-icons {
  display: flex;
  justify-content: center;
  gap: 25px;
  background-color: var(--overlay-dark);
  padding: 20px;
  border-radius: 12px;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

/* Add subtle background effect to the share icons container */
.share-icons:before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0,162,174,0.1) 0%, rgba(0,0,0,0) 70%);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.share-box.active .share-icons:before {
  opacity: 1;
  transform: scale(1);
}

/* Individual share icon */
.share-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--overlay-dark);
  border: 2px solid transparent;
  opacity: 0;
  transform: translateY(20px);
  /* No transition here - will be defined in active state */
}

/* Staggered animation for each share icon */
.share-box.active .share-icon {
  opacity: 1;
  transform: translateY(0);
}

.share-box.active .share-icon:nth-child(1) {
  transition: all 0.2s ease 0.2s;
}

.share-box.active .share-icon:nth-child(2) {
  transition: all 0.2s ease 0.4s;
}

.share-box.active .share-icon:nth-child(3) {
  transition: all 0.2s ease 0.6s;
}

.share-box.active .share-icon:hover,
.share-box.active .share-icon:focus-visible {
  transform: translateY(-5px);
  background-color: var(--overlay-dark);
  border-color: var(--color-primary-light); /* Using variable instead of hardcoded #00a2ae */
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  /* Explicitly maintain opacity to prevent it from being reset during hover */
  opacity: 1;
}

/* Accessibility focus state for share icons */
.share-icon:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  /* Ensure opacity is maintained during focus state */
  opacity: 1;
}

.share-icon img {
  width: 35px;
  height: 35px;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  /* Reposition to bottom left on mobile screens, exactly mirroring the scroll-to-top button */
  .share-container {
    position: fixed;
    left: 32px;
    top: auto;
    bottom: 32px;
    transform: none;
    flex-direction: column;
  }
  
  /* Hide text and make button circular on smaller viewports */
  .share-toggle {
    width: 50px;
    padding: 0;
    border-radius: var(--radius-full);
  }
  
  .share-text {
    display: none;
  }
  
  /* Smaller share icons on small screens */
  .share-icon {
    width: 60px;
    height: 60px;
  }
  
  .share-icon img {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) { /* --breakpoint-xs */
  /* Tighter spacing in the share icons container */
  .share-icons {
    gap: 15px;
    padding: 15px;
  }
  
  /* Smaller icons for very small screens */
  .share-icon {
    width: 50px;
    height: 50px;
  }
  
  .share-icon img {
    width: 25px;
    height: 25px;
  }
}