.share-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  font-weight: 500;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: none;
  border-radius: 8px;
  background: var(--neutral-300);
  color: var(--neutral-800);
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-btn:hover {
  background: var(--neutral-800);
  transform: translateY(-2px);
}

.share-btn svg {
  flex-shrink: 0;
}

.share-btn--native {

  padding: 0.5rem 1rem;
  background: var(--brand-primary);
  color: white;

  @media(min-width: 1025px) {
    display: none;
  }
}

.share-btn--native:hover {
  background: #0055aa;
}



/* Platform colors on hover */
.share-btn--facebook:hover {
  background: #1877f2;
  color: white;
}

.share-btn--twitter:hover {
  color: white;
}

.share-btn--linkedin:hover {
  background: #0a66c2;
  color: white;
}

.share-btn--copy:hover {

  color: white;
}

.share-btn--copied {
  background: #22c55e !important;
  color: white !important;
}

/* Compact buttons on small screens */
@media (max-width: 480px) {
  .share-btn--native span {
    display: none;
  }

  .share-btn--native {
    padding: 0.5rem;
  }

  .share-buttons {
    gap: 0.25rem;
  }
}