/* Container */
.vmd-audio-wrap{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: 10px;
}

/* Single round Play/Pause button */
.vmd-audio-btn{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #990000;
  color: #fff;
  cursor: pointer;
}
.vmd-audio-btn:hover{ opacity: 0.9; }
.vmd-audio-btn .vmd-audio-btn-fallback{
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}

/* Make sure the waveform area is the positioning context */
.vmd-audio-visual{
  position: relative;
  flex: 1 1 auto;
  min-width: 200px;
}

/* Time badges over the wave (centered vertically), clickable wave still works */
.vmd-time-current,
.vmd-time-duration{
  position: absolute;
  top: 50%;                     /* vertical center over the wave */
  transform: translateY(-50%);  /* pull up by half height */
  font-size: 12px;
  line-height: 1;
  background: rgba(153, 0, 0, 0.92); /* #990000 with slight translucency */
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  z-index: 3;                   /* above WaveSurfer canvas */
  pointer-events: none;         /* don't block dragging/seek on the wave */
}

.vmd-time-current{ left: 8px; }     /* over-wave on the left */
.vmd-time-duration{ right: 8px; }   /* over-wave on the right */