.custom-audio-player {
  display: flex;
  align-items: flex-start; /* align top edges */
  gap: 16px;
  max-width: 600px;
}

/* Play button */
.play-toggle {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border: 1px solid #0077BF;
  background: transparent;
  color: #0077BF;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 13px;
}
.play-toggle:hover{
  color: #FFF;
  background-color: #0077BF;
}

.play-toggle .icon-play {
  position: relative;
  left: 2px; /* nudge ▶ triangle right */
}

.play-toggle .icon-pause {
  position: relative;
  left: 0; /* ❚❚ stays naturally centered */
}

/* Wrapper ensures full width */
.time-progress {
  flex: 1; /* this makes it stretch to fill remaining space */
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Time above */
.time-display {
  font-size: 13px;
  line-height: 13px;
  white-space: nowrap;
}

.progress {
  width: 100%;
  appearance: none;
  height: 2px;
  background: #C2C2C2;
  border-radius: 4px;
  cursor: pointer;
}

/* WebKit (Chrome, Safari, Edge) */
.progress::-webkit-slider-thumb {
  appearance: none;
  width: 2px;              /* thin tick */
  height: 12px;
  border-radius: 9999px;
  background: #C2C2C2;
  cursor: pointer;
  border: none;
  margin-left: -1px;       /* shift tick 1px left of track */
}

/* Firefox */
.progress::-moz-range-thumb {
  width: 2px;
  height: 12px;
  border-radius: 9999px;
  background: #C2C2C2;
  border: none;
  cursor: pointer;
  transform: translateX(-1px); /* shift left */
}