/* Control buttons (prev/play/next) */
.controls button {
  width: 40px;
  height: 32px;
  background: #c0c0c0; /* classic Win98 button color */
  border: 2px solid #fff; /* highlights */
  border-right-color: #808080; /* shadows */
  border-bottom-color: #808080;
  padding: 0;
  font-size: 16px; /* for Unicode buttons like ►, ❚❚ */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.controls button:active {
  border: 2px solid #808080; /* pressed look */
  border-right-color: #fff;
  border-bottom-color: #fff;
}

/* Playlist styling */
#playlist {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Tahoma', sans-serif;
  font-size: 14px;
}

#playlist li {
  padding: 4px 6px;
  cursor: pointer;
  border-bottom: 1px solid #808080;
}

#playlist li:hover {
  background: #3f3f3f; /* classic highlight */
  color: #fff;
}

/* Album Art container */
#album-art {
  border: 2px inset #fff; /* classic inset style */
  background: #808080;
}

/* Make sure buttons don’t stretch */
button img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* ==========================
   MP Sliders - 98 Style
   ========================== */

/* Container for sliders with labels */
.mp-slider-container {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.mp-slider-container label {
  font-family: "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
}

/* --------------------------
   Volume Slider
--------------------------- */
.mp-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  background: #575757; /* solid track only */
  box-shadow:
    inset -1px -3px #fff,
    inset 1px 1px #808080,
    inset -2px -2px #dfdfdf,
    inset 2px 2px #0a0a0a;
  border-radius: 0;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.mp-slider:focus {
  outline: none;
}

/* WebKit / Chrome / Safari */
.mp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px;
  height: 12px;
  background: #c0c0c0;
  border: 2px solid #808080;
  box-shadow: -1px -1px #fff, 1px 1px #000;
  border-radius: 0;
  margin-top: 0;
  cursor: pointer;
}

.mp-slider::-webkit-slider-runnable-track {
  height: 14px;
  background: #575757; /* solid track only */
  box-shadow: inset -1px -3px #fff, inset 1px 1px #808080;
  border-radius: 0;
}

/* Firefox */
.mp-slider::-moz-range-thumb {
  width: 4px;
  height: 12px;
  background: #c0c0c0;
  border: 2px solid #808080;
  box-shadow: -1px -1px #fff, 1px 1px #000;
  border-radius: 0;
  cursor: pointer;
}

.mp-slider::-moz-range-track {
  height: 14px;
  background: #575757;
  box-shadow: inset -1px -3px #fff, inset 1px 1px #808080;
  border-radius: 0;
}

.mp-slider::-moz-range-progress {
  background: #9e9e9e;
  height: 14px;
}

/* --------------------------
   Progress Slider
--------------------------- */
.mp-progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #3f3f3f; /* solid track */
  border: 2px inset #c0c0c0;
  border-radius: 2px;
  cursor: pointer;
}

/* WebKit / Chrome / Safari */
.mp-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px;
  height: 9px;
  background: #c0c0c0;
  border: 2px solid #808080;
  box-shadow: -1px -1px #fff, 1px 1px #000;
  border-radius: 20%;
  margin-top: -1px;
  cursor: pointer;
}

.mp-progress::-webkit-slider-runnable-track {
  height: 6px;
  background: #3f3f3f; /* solid track only */
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
  border-radius: 2px;
}

/* Firefox */
.mp-progress::-moz-range-thumb {
  width: 3px;
  height: 9px;
  background: #c0c0c0;
  border: 2px solid #808080;
  box-shadow: -1px -1px #fff, 1px 1px #000;
  border-radius: 20%;
  cursor: pointer;
}

.mp-progress::-moz-range-track {
  height: 6px;
  background: #3f3f3f;
  box-shadow: inset -1px -1px #fff, inset 1px 1px #808080;
  border-radius: 2px;
}

.mp-progress::-moz-range-progress {
  background: black;
  height: 6px;
}