/* css/musicplayer.css — FINAL: COMPACT + ICONS + GREEN PLAY + RED PAUSE + % VOLUME */

#musicPlayer {
  position: fixed;
  bottom: -100px;
  left: 0;
  width: 100%;
  height: 90px;
  background: rgba(0, 0, 30, 0.95);
  backdrop-filter: blur(25px);
  border-top: 2px solid rgba(255,255,255,0.3);
  box-shadow: 0 -15px 40px rgba(0,0,0,0.7);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 15px;
  transition: bottom 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: 'Orbitron', sans-serif;
  color: white;
  font-size: 16px;
}

#musicPlayer.music-visible {
  bottom: 0;
}

/* ICON BUTTONS */
#prevBtn, #playPauseBtn, #stopBtn, #nextBtn {
  width: 55px;
  height: 55px;
  background: rgba(255,255,255,0.08);
  border: 2px solid white;
  color: white;
  border-radius: 50%;
  font-size: 26px;
  cursor: pointer;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#playPauseBtn {
  background: #8b0000; /* Red when paused */
}

#playPauseBtn.playing {
  background: #006400; /* Green when playing */
}

#playPauseBtn:hover { background: #00ff00 !important; transform: scale(1.15); }
#stopBtn:hover { background: #ff0000 !important; transform: scale(1.15); }
#prevBtn:hover, #nextBtn:hover { background: rgba(255,255,255,0.3); transform: scale(1.15); }

/* TRACK INFO */
.track-info {
  text-align: center;
  min-width: 180px;
}

.track-title {
  color: #00ffff;
  font-size: 18px;
  margin: 4px 0;
}

/* VOLUME */
.volume-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

#volumeSlider {
  width: 140px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.2);
  outline: none;
  -webkit-appearance: none;
}

#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}

#volumePercent {
  font-size: 16px;
  min-width: 40px;
  color: #00ff00;
  font-weight: bold;
}

/* MOBILE */
@media (max-width: 768px) {
  #musicPlayer { height: 120px; flex-direction: column; gap: 15px; }
  #volumeSlider { width: 180px; }
}