/* ═══ Radio La Caletta — Favorites ═══ */

.fav-actions {
  display: flex; flex-direction: column; gap: 6px;
  margin-left: auto; flex-shrink: 0; align-items: flex-end;
}
.fav-actions .fav-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: all .15s; border: 1px solid rgba(255,255,255,0.25);
  background: transparent; color: rgba(255,255,255,0.75);
}
.fav-btn:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.5); transform: none !important; }
.fav-btn:disabled { opacity: .35; cursor: default; }
.fav-btn.sent { background: rgba(72,187,120,0.15); border-color: #48bb78; color: #48bb78; }
.fav-btn.fav-listen { border-color: rgba(145,70,255,0.4); color: rgba(200,170,255,0.85); }
.fav-btn.fav-listen:hover { background: rgba(145,70,255,0.15); border-color: rgba(145,70,255,0.7); color: #c8aaff; }
.fav-btn.fav-request { border-color: rgba(255,165,0,0.4); color: rgba(255,200,100,0.85); }
.fav-btn.fav-request:hover { background: rgba(255,165,0,0.12); border-color: rgba(255,165,0,0.7); color: #ffc864; }
.fav-btn.fav-remove { border-color: rgba(255,80,80,0.3); color: rgba(255,120,120,0.7); padding: 4px 10px; font-size: 10px; }
.fav-btn.fav-remove:hover { background: rgba(255,50,50,0.12); border-color: rgba(255,80,80,0.6); color: #ff5050; }
.fav-btn i { font-size: 12px; }

/* ── Toolbar ── */
.fav-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px 12px; flex-wrap: wrap;
}
.fav-toolbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 20px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: all .15s; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8);
  -webkit-tap-highlight-color: transparent;
}
.fav-toolbar-btn:hover { background: rgba(255,255,255,0.12); color: #fff; transform: none !important; }
.fav-toolbar-btn i { font-size: 13px; }
.fav-toolbar-btn.primary { background: rgba(145,70,255,0.2); border-color: rgba(145,70,255,0.4); color: #c8aaff; }
.fav-toolbar-btn.primary:hover { background: rgba(145,70,255,0.35); }
.fav-toolbar-btn.active { background: rgba(145,70,255,0.35); border-color: rgba(145,70,255,0.7); color: #c8aaff; }
.fav-toolbar-count { font-size: 11px; color: rgba(255,255,255,0.35); margin-left: auto; }

/* ── Drag Handle ── */
.fav-drag-handle {
  flex-shrink: 0; padding: 10px 6px; cursor: grab;
  color: rgba(255,255,255,0.25); font-size: 16px;
  touch-action: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fav-drag-handle:active { cursor: grabbing; color: rgba(255,255,255,0.6); }
.grid-row.dragging {
  opacity: 0.4; background: rgba(145,70,255,0.1);
  border: 1px dashed rgba(145,70,255,0.4);
}
.grid-row.drag-over { border-top: 2px solid rgba(145,70,255,0.7); }
.grid-row.fav-playing {
  background: rgba(145,70,255,0.06); border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(145,70,255,0.7), 0 0 12px 2px rgba(145,70,255,0.3), 0 0 24px 4px rgba(145,70,255,0.15);
  animation: favPlayingPulse 2s ease-in-out infinite;
}
@keyframes favPlayingPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(145,70,255,0.7), 0 0 12px 2px rgba(145,70,255,0.3), 0 0 24px 4px rgba(145,70,255,0.15); }
  50% { box-shadow: inset 0 0 0 2px rgba(145,70,255,0.9), 0 0 18px 4px rgba(145,70,255,0.45), 0 0 36px 8px rgba(145,70,255,0.25); }
}
.fav-playing-icon {
  display: none; font-size: 10px; color: rgba(145,70,255,0.9);
  margin-left: 6px; animation: lyricsPulse 1.5s ease-in-out infinite;
}
.grid-row.fav-playing .fav-playing-icon { display: inline; }