/* Social Sharing Styles for Chicago Dog Central */

.social-sharing-section {
  background: white;
  border: 3px solid var(--retro-brown);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.social-sharing-section h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--retro-red);
  margin-bottom: var(--space-md);
  text-shadow: 1px 1px 0px var(--retro-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.social-sharing-intro {
  color: var(--color-text);
  margin-bottom: var(--space-lg);
  font-size: var(--fs-base);
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  align-items: center;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: 2px solid;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 110px;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Platform-specific colors */
.share-btn[data-platform="facebook"] {
  background: #1877F2;
  color: white;
  border-color: #1877F2;
}

.share-btn[data-platform="facebook"]:hover {
  background: #166FE5;
  border-color: #166FE5;
  transform: translateY(-2px);
}

.share-btn[data-platform="twitter"] {
  background: #1DA1F2;
  color: white;
  border-color: #1DA1F2;
}

.share-btn[data-platform="twitter"]:hover {
  background: #0D8BD9;
  border-color: #0D8BD9;
  transform: translateY(-2px);
}

.share-btn[data-platform="pinterest"] {
  background: #E60023;
  color: white;
  border-color: #E60023;
}

.share-btn[data-platform="pinterest"]:hover {
  background: #CC001F;
  border-color: #CC001F;
  transform: translateY(-2px);
}

.share-btn[data-platform="linkedin"] {
  background: #0A66C2;
  color: white;
  border-color: #0A66C2;
}

.share-btn[data-platform="linkedin"]:hover {
  background: #095BA8;
  border-color: #095BA8;
  transform: translateY(-2px);
}

.share-btn[data-platform="whatsapp"] {
  background: #25D366;
  color: white;
  border-color: #25D366;
}

.share-btn[data-platform="whatsapp"]:hover {
  background: #22C55E;
  border-color: #22C55E;
  transform: translateY(-2px);
}

.share-btn[data-platform="email"] {
  background: var(--retro-brown);
  color: white;
  border-color: var(--retro-brown);
}

.share-btn[data-platform="email"]:hover {
  background: var(--retro-red);
  border-color: var(--retro-red);
  transform: translateY(-2px);
}

.share-btn[data-platform="copy"] {
  background: var(--retro-green);
  color: white;
  border-color: var(--retro-green);
}

.share-btn[data-platform="copy"]:hover {
  background: var(--retro-red);
  border-color: var(--retro-red);
  transform: translateY(-2px);
}

.share-btn[data-platform="print"] {
  background: var(--retro-yellow);
  color: var(--color-text);
  border-color: var(--retro-brown);
}

.share-btn[data-platform="print"]:hover {
  background: var(--retro-green);
  color: white;
  border-color: var(--retro-green);
  transform: translateY(-2px);
}

/* Share button icons */
.share-btn .share-icon {
  font-size: var(--fs-base);
  line-height: 1;
}

/* Responsive design */
@media (max-width: 768px) {
  .share-buttons {
    gap: var(--space-xs);
  }
  
  .share-btn {
    min-width: 100px;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-xs);
  }
  
  .social-sharing-section {
    padding: var(--space-md);
  }
  
  .social-sharing-section h3 {
    font-size: var(--fs-lg);
    flex-direction: column;
    gap: var(--space-xs);
  }
}

@media (max-width: 480px) {
  .share-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .share-btn {
    width: 100%;
    max-width: 200px;
    min-width: auto;
  }
}

/* Copy notification styles (already defined in JS, but here for completeness) */
#copy-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--retro-green);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  z-index: 10000;
  font-family: var(--font-primary);
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

/* Print-specific styles */
@media print {
  .social-sharing-section {
    display: none;
  }
}