/* public/assets/css/audio-player.css */

/* Container */
.custom-audio-player {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
  font-family: sans-serif;
  color: white;
}

/* Hide native controls */
.custom-audio-player audio {
  display: none;
}

/* Left controls */
.controls-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.controls-left button {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1.25rem;
}
.controls-left .play {
  width: 2.5rem;
  height: 2.5rem;
  background: white;
  color: #07120F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.controls-left .time-display {
  font-size: 1rem;
  min-width: 3ch;
  text-align: center;
}

/* Progress & action buttons */
.progress-wrapper {
  display: flex;            /* make children flow horizontally */
  align-items: center;
  flex: 1;                  /* fill remaining space */
  gap: 0.5rem;              
  height: 2.5rem;
}

.progress-track {
  flex: 1;                  /* this grows to fill available width */
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.progress-filled {
  height: 100%;
  width: 0%;
  background: #F2C94C;
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* Unified button styles */
.download-button,
#btnBuyout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  color: #07120F;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.download-button:hover,
#btnBuyout:hover {
  opacity: 0.8;
}

/* If you want the second button darker, override: */
#btnBuyout {
  background: #4B5563;
  color: white;
}

#btnBuyout:hover {
  background: #6B7280;
}


/* slider-white CSS */

.slider-white {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #fff;       /* white track */
  border-radius: 4px;
  outline: none;
  margin: 0.5rem 0;
}

/* WebKit track (Chrome, Safari) */
.slider-white::-webkit-slider-runnable-track {
  height: 8px;
  background: #fff;
  border-radius: 4px;
}

/* WebKit thumb */
.slider-white::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #fff;       /* white thumb */
  border: 2px solid #a3e635; /* lime border (or your accent) */
  border-radius: 50%;
  margin-top: -4px;       /* center vertically (half of thumb-height minus half of track-height) */
  cursor: pointer;
}

/* Firefox track */
.slider-white::-moz-range-track {
  height: 8px;
  background: #fff;
  border-radius: 4px;
}

/* Firefox thumb */
.slider-white::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid #a3e635;
  border-radius: 50%;
  cursor: pointer;
}

/* IE / Edge track */
.slider-white::-ms-track {
  height: 8px;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.slider-white::-ms-fill-lower,
.slider-white::-ms-fill-upper {
  background: #fff;
  border-radius: 4px;
}
.slider-white::-ms-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid #a3e635;
  border-radius: 50%;
  margin-top: 0; /* Edge places the thumb differently */
  cursor: pointer;
}

.slider-container {
  position: relative;
  width: 100%;             /* oder fixe Breite */
  margin: 1rem 0;
}

.slider-container input[type="range"] {
  width: 100%;
  /* Entferne Standard-Focus-Outline, wenn gewünscht */
  /* outline: none; */
}

.slider-tooltip {
  position: absolute;
  top: -4px;            /* hebt die Bubble über den Slider */
  left: 0;                 /* wird per JS verschoben */
  transform: translateX(-50%);
  padding: 4px 0.2rem;
  background: #fff !important;  
  color: #000;
  font-size: 0.70rem;
  border-radius: 0.25rem;
  pointer-events: none;    /* Klicks durchlassen */
  white-space: nowrap;
  border-radius:20px;
  width:30px;
  height:30px;
  cursor: pointer;
  border: 3px solid #F2C94C;
  text-align: center;
}

#btnBuyout{
  cursor:pointer
}