/*
================================================================================
SILVERPAUL FORUM - VOTE BUTTONS MODULE
================================================================================
This module contains all voting and social sharing functionality including
like/dislike buttons, vote states, social media share buttons, and interactions.
Extracted from base.css on July 24, 2025
Load Order: After modals.css, before remaining modules
================================================================================
*/

/* ==========================================================================
   ARTICLE ACTIONS AND SOCIAL SHARE BUTTONS
   ========================================================================== */
.article-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.vote-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.vote-form {
  margin: 0;
}

/* ==========================================================================
   VOTE BUTTONS (LIKE/DISLIKE)
   ========================================================================== */
.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: var(--space-0-5) solid var(--vote-border);
  border-radius: var(--space-5);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-family-primary);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--vote-text);
}

.vote-btn:hover {
  transform: translateY(calc(-1 * var(--space-px)));
  box-shadow: var(--shadow-sm);
}

.vote-icon {
  width: var(--space-5);
  height: var(--space-5);
  transition: transform 0.2s ease;
}

.vote-count {
  font-weight: var(--font-weight-semibold);
  min-width: var(--space-5);
  text-align: center;
}

/* Like Button States */
.like-btn:not(.liked) .heart-path {
  fill: none;
  stroke: var(--vote-text);
  stroke-width: var(--space-0-5);
}

.like-btn:not(.liked):hover {
  border-color: var(--primary-red);
  color: var(--primary-red);
}

.like-btn:not(.liked):hover .heart-path {
  stroke: var(--primary-red);
}

.like-btn.liked {
  border-color: var(--primary-red);
  background-color: var(--vote-bg-light);
  color: var(--primary-red);
}

.like-btn.liked .heart-path {
  fill: var(--primary-red);
  stroke: none;
}

.like-btn:active .vote-icon {
  transform: scale(1.1);
}

/* Dislike Button States */
.dislike-btn:not(.disliked) .no-circle,
.dislike-btn:not(.disliked) .x-line-1,
.dislike-btn:not(.disliked) .x-line-2 {
  fill: none;
  stroke: var(--vote-text);
  stroke-width: var(--space-0-5);
  stroke-linecap: round;
}

.dislike-btn:not(.disliked):hover {
  border-color: var(--primary-red);
  color: var(--primary-red);
}

.dislike-btn:not(.disliked):hover .no-circle,
.dislike-btn:not(.disliked):hover .x-line-1,
.dislike-btn:not(.disliked):hover .x-line-2 {
  stroke: var(--primary-red);
}

.dislike-btn.disliked {
  border-color: var(--primary-red);
  background-color: var(--vote-bg-light);
  color: var(--primary-red);
}

.dislike-btn.disliked .no-circle,
.dislike-btn.disliked .x-line-1,
.dislike-btn.disliked .x-line-2 {
  fill: none;
  stroke: var(--primary-red);
  stroke-width: var(--space-0-5);
  stroke-linecap: round;
}

.dislike-btn:active .vote-icon {
  transform: scale(1.1);
}

.social-share-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-3); /* 12px - closest to original 12.8px */
  flex-wrap: wrap;
}

/* Removed share-label styles since label was removed */

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-9);
  height: var(--space-9);
  border-radius: 50%;
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: var(--space-0);
}

.social-icon {
  width: var(--space-4-5);
  height: var(--space-4-5);
}

.twitter-btn {
  background-color: var(--social-twitter);
  color: white;
}

.twitter-btn:hover {
  background-color: var(--social-twitter-hover);
  transform: translateY(calc(-1 * var(--space-0-5)));
}

.facebook-btn {
  background-color: var(--social-facebook);
  color: white;
}

.facebook-btn:hover {
  background-color: var(--social-facebook-hover);
  transform: translateY(calc(-1 * var(--space-0-5)));
}

.linkedin-btn {
  background-color: var(--social-linkedin);
  color: white;
}

.linkedin-btn:hover {
  background-color: var(--social-linkedin-hover);
  transform: translateY(calc(-1 * var(--space-0-5)));
}

.instagram-btn {
  background: var(--social-instagram);
  color: white;
}

.instagram-btn:hover {
  background: var(--social-instagram-hover);
  transform: translateY(calc(-1 * var(--space-0-5)));
}

.reddit-btn {
  background-color: var(--social-reddit);
  color: white;
}

.reddit-btn:hover {
  background-color: var(--social-reddit-hover);
  transform: translateY(calc(-1 * var(--space-0-5)));
}

.copy-btn {
  background-color: var(--social-copy);
  color: white;
}

.copy-btn:hover {
  background-color: var(--social-copy-hover);
  transform: translateY(calc(-1 * var(--space-0-5)));
}

.copy-btn:active {
  background-color: var(--primary-green);
}

/* ==========================================================================
   MOBILE RESPONSIVE VOTE AND SOCIAL BUTTON STYLES
   ========================================================================== */

@media (max-width: 1000px) {
  /* Mobile vote and social buttons */
  .article-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    margin: var(--space-5) var(--space-0);
  }
  
  .vote-buttons {
    justify-content: center;
    gap: var(--space-5);
  }
  
  .vote-btn {
    padding: var(--space-3) var(--space-4);
    min-width: var(--space-20);
  }
  
  .social-share-buttons {
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  
  .social-btn {
    width: var(--space-11);
    height: var(--space-11);
    border-radius: 50%;
  }
}

@media (max-width: 480px) {
  .social-btn {
    width: var(--space-10);
    height: var(--space-10);
  }
  
  .vote-btn {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    min-width: var(--space-17);
  }
  
  .vote-icon {
    width: var(--space-4-5);
    height: var(--space-4-5);
  }
}