/* Custom Share and Heart Icon Styles */
/* Replaces Font Awesome icons with custom SVG icons */

/* Hide Font Awesome share icons */
.action-button.share-button .icon i.fa-share,
.action-button.share-button .icon i.fas.fa-share {
  display: none !important;
}

/* Hide Font Awesome heart icons */
.action-button.heart-button .icon i.fa-heart,
.action-button.heart-button .icon i.fas.fa-heart {
  display: none !important;
}

/* Add custom share icon */
.action-button.share-button .icon::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('/img/share-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* Add custom heart icon */
.action-button.heart-button .icon::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url('/img/heart-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* Ensure the icon container has proper dimensions */
.action-button.share-button .icon,
.action-button.heart-button .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

/* Hover effect for custom icons */
.action-button.share-button:hover .icon::before,
.action-button.heart-button:hover .icon::before {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Active state for custom icons */
.action-button.share-button.active .icon::before,
.action-button.heart-button.active .icon::before {
  transform: scale(1.05);
  filter: brightness(1.2);
}

/* Heart button active state with animation */
.action-button.heart-button.active .icon::before {
  animation: heartBeat 0.6s ease-in-out;
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1.05); }
  50% { transform: scale(1.2); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .action-button.share-button .icon::before,
  .action-button.heart-button .icon::before {
    width: 20px;
    height: 20px;
  }
  
  .action-button.share-button .icon,
  .action-button.heart-button .icon {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .action-button.share-button .icon::before,
  .action-button.heart-button .icon::before {
    width: 18px;
    height: 18px;
  }
  
  .action-button.share-button .icon,
  .action-button.heart-button .icon {
    width: 18px;
    height: 18px;
  }
}