/* Container */
.ebp-wrap{border:none;padding:0;background:transparent}

/* Linha: player à esquerda e meta (BPM/Tom) à direita */
.ebp-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

/* Bloco do player */
.ebp-player{
  flex:1;
  min-width:220px;
  max-width:100%;
}

/* Row interna: Play | Wave | Time | VolumeButton */
.ebp-row{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Botões (play/volume) */
.ebp-btn{
  border:1px solid rgba(255,255,255,.2);
  background:transparent;
  color:inherit;
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  line-height:1;
}
.ebp-btn:hover{border-color:rgba(255,255,255,.35)}

/* Waveform */
.ebp-wave{
  flex:1;
  min-width:160px;
  height:72px;
}

/* Tempo */
.ebp-time{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  opacity:.9;
  min-width:120px;
  text-align:center;
}

/* Volume: botão + popover com slider */
.ebp-volwrap{position:relative}
.ebp-volbtn{min-width:42px;text-align:center}
.ebp-volpanel{
  position:absolute;
  right:0; top:calc(100% + 8px);
  background:#111; color:#fff;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  padding:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  display:none; /* fechado padrão */
  z-index:50;
}
.ebp-volpanel.open{display:block}
.ebp-vol{width:160px}

/* Meta (BPM / Tom) – fica do lado direito da linha principal */
.ebp-meta{
  font-size:13px;
  opacity:.9;
  white-space:nowrap;
  margin-left:12px;
}

/* Fallback: <audio> nativo quando Wave está desligado */
.ebp-audio{
  flex:1;
  max-width:680px;
  min-width:220px;
  display:block;
}