/* ===== Music Player Styles ===== */
.music-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  gap: var(--space-md);
  transition: background-color 0.3s ease;
}

/* Header Styles */
.music-header {
  text-align: center;
  padding-bottom: var(--space-xs);
}

.music-header h2 {
  font-size: 2.45rem;
  font-weight: 700;
  color: var(--dark-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.music-header h2 i {
  font-size: 2.5rem;
  color: var(--primary-color);
  transition: var(--transition-normal);
}

.music-header h2 i:hover {
  animation: pop 0.3s ease;
  color: var(--accent-color);
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Scrollable Song List */
.music-scroll-section {
  flex: 1;
  overflow-y: auto;
  max-height: 60vh;
  background: var(--light-color);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--light-gray);
}

.music-scroll-section::-webkit-scrollbar {
  width: 6px;
}

.music-scroll-section::-webkit-scrollbar-track {
  background: var(--light-gray);
  border-radius: var(--radius-lg);
}

.music-scroll-section::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: var(--radius-lg);
}

/* Song List Styles */
.song-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-xs);
}

.song-item {
  padding: var(--space-sm) var(--space-md);
  background-color: white;
  color: var(--dark-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-normal);
  border: 1px solid var(--light-gray);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.song-item:hover {
  background-color: var(--light-gray);
  transform: translateX(2px);
}

.song-item.active {
  background-color: rgba(67, 97, 238, 0.1);
  border-left: 4px solid var(--primary-color);
  font-weight: 600;
  color: var(--primary-dark);
}

.song-item i {
  color: var(--gray-color);
  font-size: 1.2rem;
}

.song-item.active i {
  color: var(--primary-color);
}

/* Fixed Music Player */
.fixed-music-player {
  position: fixed;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 600px;
  background: rgb(255, 255, 255);
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  transition: var(--transition-normal);
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.fixed-music-player:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%) translateY(-2px);
}

/* Now Playing Info */
#now-playing {
  font-size: 0.9rem;
  text-align: center;
  color: var(--dark-color);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 var(--space-md);
}

#now-playing strong {
  color: var(--primary-color);
  font-weight: 600;
}

/* Audio Player Customization */
.fixed-music-player audio {
  width: 100%;
  border-radius: var(--radius-md);
}

/* Custom audio element styling */
audio::-webkit-media-controls-panel {
  background-color: white;
  border-radius: var(--radius-md);
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button {
  background-color: var(--primary-color);
  border-radius: 50%;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  color: var(--dark-color);
  font-size: 0.8rem;
}

/* Music Controls */
.music-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
}

.music-controls button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
}

.music-controls button:hover {
  background-color: var(--primary-dark);
  transform: translateY(-1px);
}

.music-controls button:active {
  transform: translateY(0);
}

.music-controls button i {
  font-size: 1.2rem;
}

/* Main Play/Pause Button */
.music-controls .play-pause {
  background-color: var(--accent-color);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-lg);
}

.music-controls .play-pause:hover {
  background-color: var(--primary-color);
}

/* Dark Mode Styles */
.dark-mode .music-container {
    background-color: #2d2d2d;
    color: #ffffff;
}


.dark-mode .song-list {
    color: #e0e0e0;
}


/* body.dark-mode .music-scroll-section {
  background-color: var(--dark-color);
  border-color: #ffffff;
} */

body.dark-mode .song-item
/*body.dark-mode .fixed-music-player*/ {
  background-color: var(--dark-color);
  border-color: #ffffff;
}

body.dark-mode .song-item {
  background-color: #2a2a2a;
  color: #f1f1f1 !important;
  border-color: #444;
}

body.dark-mode .song-item:hover {
  background-color: #3a3a3a;
  color: #ffffff !important;
}

body.dark-mode .song-item.active {
  background-color: rgba(67, 97, 238, 0.2);
  border-left: 4px solid var(--accent-color);
  color: var(--accent-color) !important;
}

body.dark-mode .song-item i {
  color: #b0b0b0;
}

body.dark-mode .song-item.active i {
  color: var(--accent-color);
}

body.dark-mode .fixed-music-player {
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.06);
}

body.dark-mode #now-playing {
  color: var(--dark-color);
}

body.dark-mode #now-playing strong {
  color: var(--accent-color);
}

body.dark-mode audio::-webkit-media-controls-panel {
  background-color: #333;
}

body.dark-mode audio::-webkit-media-controls-current-time-display,
body.dark-mode audio::-webkit-media-controls-time-remaining-display {
  color: #f1f1f1 !important;
}

body.dark-mode #now-playing,
body.dark-mode .music-header h2 {
  color: #f1f1f1 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .music-header h2 {
    font-size: 2rem;
  }
  
  .song-item {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.9rem;
  }
  
  .fixed-music-player {
    padding: var(--space-sm);
    width: calc(100% - 1rem);
  }
  
  .music-controls button {
    padding: var(--space-xs) var(--space-sm);
    min-width: 36px;
    min-height: 36px;
  }
  
  .music-controls .play-pause {
    padding: var(--space-xs) var(--space-md);
  }
}

@media (max-width: 480px) {
  .music-container {
    padding: var(--space-sm);
  }
  
  .music-header h2 {
    font-size: 2rem;
    padding-bottom: var(--space-sm);
  }
  
  .music-scroll-section {
    max-height: 52vh;
  }
  
  #now-playing {
    font-size: 0.8rem;
  }
}