.audio-player {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 80px;
  background-color: #282828;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}

.player-controls {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.song-info {
  margin-bottom: 4px;
}

.song-title {
  font-size: 16px;
  color: #fff;
  margin: 0;
}

.artist {
  font-size: 12px;
  color: #b3b3b3;
  margin: 0;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background-color: #4f4f4f;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  width: 0%;
  height: 100%;
  background-color: #1db954;
  transform-origin: left;
}

.buttons {
  display: flex;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

.play-btn,
.pause-btn {
  padding-top: 6px;
  font-size: 16px;
  color: #fff;
  margin-right: 8px;
  transition: transform 0.2s ease-in-out;
}

.play-btn:hover,
.pause-btn:hover {
  transform: scale(1.2);
}

@keyframes progress-animation {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

.controls-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0px;
}

.toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-btn svg {
  width: 16px;
  height: 16px;
}

.progress-bar {
  flex-grow: 1;
  cursor: pointer;
  height: 8px; /* Ensure progress bar height matches your design */
}

.volume-control {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.volume-control input[type="range"] {
  width: 50px;
  height: 10px; /* Reduced from 100px to avoid overlap */
  background: #4f4f4f;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}

.volume-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; /* Slightly smaller thumb */
  height: 12px; /* Slightly smaller thumb */
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.volume-control input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

/* Ensure player-controls height doesn't constrain the layout */
.player-controls {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.audio-player {
  max-width: 100%;
  overflow: hidden; /* Prevent overflow from large elements */
}

/* Play/Pause Button - Filter - THANKS TO https://codepen.io/sosuke/pen/Pjoqqp */
/* OLD   filter: brightness(0%) saturate(100%) invert(31%) sepia(63%) saturate(7500%) hue-rotate(326deg) brightness(94%) contrast(88%); */
#togglepath:hover{
  transition: .5s ease-in-out;
  fill: var(--theme-color);
  /* filter: brightness(0%) saturate(100%) invert(39%) sepia(75%) saturate(6970%) hue-rotate(324deg) brightness(92%) contrast(93%); */
}