/**
 * Music Links & Share Buttons for LyricFinder — v5
 * Listen buttons: compact. Share buttons: eye-catching.
 */

/* ── Action bar ── */
.lf-action-bar {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(2, 6, 23, 0.06);
}

/* ── Listen row (compact, same as v3) ── */
.lf-listen-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lf-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff !important;
  text-decoration: none !important;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', 'Poppins', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.lf-btn:hover {
  transform: translateY(-1px);
  color: #fff !important;
  text-decoration: none !important;
  filter: brightness(1.1);
}

.lf-btn:active {
  transform: translateY(0) scale(0.97);
}

.lf-btn svg { flex-shrink: 0; width: 18px; height: 18px; }

.lf-btn-yt {
  background: #FF0000;
  box-shadow: 0 2px 6px rgba(255, 0, 0, 0.2);
}

.lf-btn-spotify {
  background: #1DB954;
  box-shadow: 0 2px 6px rgba(29, 185, 84, 0.2);
}

.lf-btn-apple {
  background: linear-gradient(135deg, #fc3c44, #a833b9);
  box-shadow: 0 2px 6px rgba(252, 60, 68, 0.2);
}

.lf-btn-tiktok {
  background: #000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.lf-btn-translate {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

/* ── Share row (eye-catching) ── */
.lf-share-row {
  margin-top: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #f8f5ff, #f0f7ff, #f5fff8);
  border: 1px solid #e4ddf2;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lf-share-label {
  font-size: 12px;
  font-weight: 700;
  color: #7c6baa;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.lf-share-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Share buttons: filled platform colors by default ── */
.lf-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
  text-decoration: none !important;
  line-height: 1;
  color: #fff !important;
}

.lf-share-btn:hover {
  transform: translateY(-2px);
  text-decoration: none !important;
  color: #fff !important;
}

.lf-share-btn:active {
  transform: translateY(0) scale(0.97);
}

.lf-share-btn svg { flex-shrink: 0; }
.lf-share-btn svg path { fill: #fff; }
.lf-share-btn svg [stroke] { stroke: #fff; }

/* Facebook */
.lf-share-fb {
  background: #1877F2;
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);
}
.lf-share-fb:hover {
  box-shadow: 0 5px 16px rgba(24, 119, 242, 0.45);
}

/* X */
.lf-share-x {
  background: #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.lf-share-x:hover {
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.35);
}

/* WhatsApp */
.lf-share-wa {
  background: #25D366;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}
.lf-share-wa:hover {
  box-shadow: 0 5px 16px rgba(37, 211, 102, 0.45);
}

/* Copy Link */
.lf-share-copy {
  background: #6b5b95;
  box-shadow: 0 2px 8px rgba(107, 91, 149, 0.3);
}
.lf-share-copy:hover {
  box-shadow: 0 5px 16px rgba(107, 91, 149, 0.45);
}

/* Copy success */
.lf-share-copy.lf-copied {
  background: #10b981 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35) !important;
}

.lf-copy-check {
  font-weight: 700;
  font-size: 14px;
}

/* Share buttons: icon-only on all screens */
.lf-share-btn span {
  display: none;
}

.lf-share-btn {
  padding: 8px;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .lf-btn {
    padding: 7px 10px;
    font-size: 12px;
  }

  .lf-share-row {
    padding: 8px 10px;
    gap: 6px;
  }

  .lf-share-label {
    display: none;
  }
}