.pv-waveplayer{display:flex;align-items:center;gap:.75rem;width:100%;-webkit-tap-highlight-color:transparent}
.pv-waveplayer.pos-left{flex-direction:row}
.pv-waveplayer.pos-right{flex-direction:row-reverse}
.pv-waveplayer.pos-top{flex-direction:column;align-items:stretch}

/* Button */
.pv-waveplayer .pv-waveplayer__btn{
  width:var(--pv-btn-size,40px);
  height:var(--pv-btn-size,40px);
  min-width:var(--pv-btn-size,40px);
  border:0;
  cursor:pointer;
  line-height:1;
  text-align:center;
  user-select:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--pv-btn-fill,rgba(0,0,0,.3));
  color:var(--pv-icon,#ccddff);
  transition:background .15s,color .15s,border-radius .15s;
  border-radius:12px;
}
.pv-waveplayer.shape-circle .pv-waveplayer__btn{border-radius:9999px}
.pv-waveplayer.shape-pill .pv-waveplayer__btn{border-radius:9999px;min-width:calc(var(--pv-btn-size,40px)*1.8);padding:0 .6em}

/* Inline SVG icons inherit currentColor */
.pv-waveplayer .pv-waveplayer__btn .pv-icon{
  display:block;pointer-events:none;
}
.pv-waveplayer .pv-waveplayer__btn .pv-icon,
.pv-waveplayer .pv-waveplayer__btn .pv-icon *{
  fill:currentColor !important;stroke:none !important;
}

/* Force only one icon visible */
/* Hide both by default to avoid theme overrides, then explicitly show one */
.pv-waveplayer .pv-waveplayer__btn .pv-icon--play,
.pv-waveplayer .pv-waveplayer__btn .pv-icon--pause{display:none !important}
.pv-waveplayer:not(.is-playing) .pv-waveplayer__btn .pv-icon--play{display:block !important}
.pv-waveplayer.is-playing .pv-waveplayer__btn .pv-icon--pause{display:block !important}

/* States */
.pv-waveplayer .pv-waveplayer__btn:hover{
  background:var(--pv-btn-fill-hover,rgba(0,0,0,.45));
  color:var(--pv-icon-hover,#e3efff);
}
.pv-waveplayer.is-playing .pv-waveplayer__btn{
  background:var(--pv-btn-fill-active,rgba(0,0,0,.6));
  color:var(--pv-icon-active,#fff);
}

/* Wave canvas + time */
.pv-waveplayer__canvas{flex:1;min-width:140px;position:relative}
.pv-waveplayer__time{
  color:var(--pv-time-color,#333);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  min-width:50px;
  text-align:right
}
.pv-waveplayer.hide-time .pv-waveplayer__time{display:none}
.pv-waveplayer__notice{padding:.5rem .75rem;background:#fff3cd;color:#694a00;border:1px solid #ffe69c;border-radius:6px}

/* Cursor overlay above waveform */
.pv-waveplayer__canvas::after{
  content:"";
  position:absolute;
  top:0;bottom:0;left:0;
  width:var(--pv-cursor-width,1px);
  background:var(--pv-cursor-color,rgba(0,0,0,.25));
  transform:translateX(var(--pv-head-x,0px));
  pointer-events:none;
  z-index:2;
}

/* Keep WaveSurfer canvas below cursor */
.pv-waveplayer__canvas canvas{display:block;position:relative;z-index:1}