/* Odtwarzacz Marcina — style frontu (v1.0)
 * Przycisk start/stop po lewej + fala (canvas) na całą szerokość.
 * Wszystko sterowane zmiennymi CSS (kolor, grubość, odstęp, wysokość). */

.mzp-player{
  --mzp-color:#1a1a1a;
  --mzp-line:1.5px;   /* grubość kreski fali / przycisku / postępu */
  --mzp-gap:2px;      /* odstęp między kreskami fali */
  --mzp-height:56px;  /* wysokość fali */
  --mzp-btn:32px;     /* rozmiar ikony przycisku */
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
  color:var(--mzp-color);
  font-family:inherit;
  user-select:none;
  -webkit-user-select:none;
}

/* przycisk start/stop — cienka linia, bez ramki.
   Twardy reset, żeby motyw/WordPress nie dokładał tła, obwódki ani podświetlenia. */
.mzp-player .mzp-btn,
.mzp-player .mzp-btn:hover,
.mzp-player .mzp-btn:focus,
.mzp-player .mzp-btn:active,
.mzp-player .mzp-btn:focus-visible{
  flex:0 0 auto;
  width:var(--mzp-btn);
  height:var(--mzp-btn);
  display:grid;place-items:center;
  padding:0 !important;margin:0;
  border:0 !important;
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  border-radius:0 !important;
  -webkit-appearance:none;appearance:none;
  color:inherit;cursor:pointer;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.mzp-btn::after{content:"";position:absolute;inset:-8px;} /* powiększona strefa kliknięcia */
.mzp-btn svg{display:block;width:100%;height:100%;overflow:visible;}
.mzp-btn svg *{
  stroke:var(--mzp-color);
  stroke-width:var(--mzp-line);
  stroke-linejoin:round;
  stroke-linecap:round;
  fill:none;
  vector-effect:non-scaling-stroke;
}
.mzp-btn .mzp-pause{display:none;}
.mzp-player.is-playing .mzp-btn .mzp-play{display:none;}
.mzp-player.is-playing .mzp-btn .mzp-pause{display:block;}

/* obszar fali wypełnia całą pozostałą szerokość */
.mzp-wave-wrap{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mzp-canvas{
  display:block;
  width:100%;
  height:var(--mzp-height);
}

/* cienka linia postępu pod falą */
.mzp-progress{
  position:relative;
  width:100%;
  height:var(--mzp-line);
  background:color-mix(in srgb, var(--mzp-color) 18%, transparent);
}
.mzp-progress > span{
  position:absolute;inset:0 auto 0 0;
  width:0;
  background:var(--mzp-color);
  transition:width .08s linear;
}
.mzp-player[data-progress="off"] .mzp-progress{display:none;}

/* stan ładowania fali */
.mzp-player.is-loading .mzp-canvas{opacity:.35;}

/* audio jest ukryte — sterowanie przez przycisk */
.mzp-player audio{display:none;}