.plyr--audio .plyr__controls { background:transparent !important; }

:root {
  --plyr-color-main: #d35400;         /* główny pomarańcz */
  --plyr-audio-controls-background: #111;
  --plyr-audio-progress-buffered-background: #333;
  --plyr-audio-progress-track-background: #222;
  --plyr-font-family: inherit;
  --plyr-audio-control-color: #FFF;
}

/* ================================
   STREFA FM – PLYR THEME (FULL)
   ================================ */

:root{
  --sf-orange:#d35400;
  --sf-bg:#111;
  --sf-bg2:#1a1a1a;
  --sf-text:#fff;
  --sf-muted:rgba(255,255,255,.55);
  --sf-hover:rgba(211,84,0,.18);
}

/* tło kontrolek */
.plyr--audio .plyr__controls{
  background: var(--sf-bg);
  color: var(--sf-text);
  padding: 10px 12px;
  border-radius: 10px;
}

/* ogólne przyciski */
.plyr--audio .plyr__control{
  color: var(--sf-text);
  border-radius: 999px;
  padding: 10px;             /* wygodny touch */
  background: transparent;
  transition: background .15s ease, transform .05s ease;
}

/* delikatny hover (bez niebieskich domyślnych) */
.plyr--audio .plyr__control:hover{
  background: var(--sf-hover) !important;
}

/* klik feeling */
.plyr--audio .plyr__control:active{
  transform: scale(.98);
}

/* ===== PLAY/PAUSE: pomarańczowe kółko + biała ikona ===== */
.plyr--audio .plyr__control--play{
  background: var(--sf-orange) !important;
  color: #fff !important;
  padding: 12px !important;          /* większy “guzik” */
}

/* ikona w środku */
.plyr--audio .plyr__control--play svg{
  color:#fff !important;
  fill: currentColor;
}

/* hover na play też subtelny (trochę jaśniej) */
.plyr--audio .plyr__control--play:hover{
  background: #e05d08 !important;
}

/* ===== PROGRESS ===== */
.plyr--audio .plyr__progress{
  margin: 0 10px;
}

/* tor */
.plyr--audio .plyr__progress input[type=range]{
  color: var(--sf-orange); /* plyr używa tego do fill */
}

/* buffered tło */
.plyr--audio .plyr__progress__buffer{
  color: rgba(255,255,255,.18);
}

/* kropka/thumb na pasku */
.plyr--audio .plyr__progress input[type=range]::-webkit-slider-thumb{
  background: var(--sf-orange);
  border: 0;
  box-shadow: none;
}
.plyr--audio .plyr__progress input[type=range]::-moz-range-thumb{
  background: var(--sf-orange);
  border: 0;
}

/* ===== VOLUME ===== */
.plyr--audio .plyr__volume input[type=range]{
  color: var(--sf-orange);
}
.plyr--audio .plyr__volume input[type=range]::-webkit-slider-thumb{
  background: var(--sf-orange);
  border: 0;
}
.plyr--audio .plyr__volume input[type=range]::-moz-range-thumb{
  background: var(--sf-orange);
  border: 0;
}

/* ===== CZAS (Twoje NA ŻYWO / -mm:ss) ===== */
.plyr--audio .plyr__time{
  color: var(--sf-text);
  font-weight: 600;
  letter-spacing: .2px;
}

/* Spinner przy ŁĄCZENIE */
.plyr__time--current.loading{
  color: var(--sf-muted);
}
.plyr__time--current.loading::after{
  content:'';
  width: 14px;
  height: 14px;
  border: 2px solid var(--sf-orange);
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  animation: sfspin .9s linear infinite;
}
@keyframes sfspin{ to{ transform: rotate(360deg);} }

/* ===== usuń focus ringi przeglądarki / plyr jeśli przeszkadzają ===== */
.plyr--audio .plyr__control:focus{
  outline: none;
  box-shadow: none;
}

/* przycisk play/pause */
.plyr--audio button[data-plyr="play"]{
  color:#fff !important;
  border-radius:999px !important;
  transition: background .15s ease;
}

/* STAN: stopped/paused => pomarańczowe kółko + biała ikonka */
.plyr--audio.plyr--stopped button[data-plyr="play"],
.plyr--audio.plyr--paused  button[data-plyr="play"]{
  background:#d35400 !important;
  padding:10px !important;
}

/* hover przed startem: lekko jaśniej */
.plyr--audio.plyr--stopped button[data-plyr="play"]:hover,
.plyr--audio.plyr--paused  button[data-plyr="play"]:hover{
  background:#e05d08 !important;
}

/* STAN: playing => bez kółka (zostaje biała pauza) */
.plyr--audio.plyr--playing button[data-plyr="play"]{
  background:transparent !important;
  padding:10px !important;
}

/* ikonka zawsze biała */
.plyr--audio button[data-plyr="play"] svg{
  fill:#fff !important;
  color:#fff !important;
}


#jp_container_1 .jp-pause { display: none; }
#jp_container_1 .jp-play  { display: inline-flex; }
#jp_container_1.audioplayer-playing .jp-play  { display: none; }
#jp_container_1.audioplayer-playing .jp-pause { display: inline-flex; }
.plyr__time--current.loading{
  position: relative;
  color: #ddd;
}
.plyr__time--current.loading::after{
  content:'';
  width:14px;height:14px;
  border:2px solid #fff;
  border-top-color:transparent;
  border-radius:50%;
  display:inline-block;
  margin-left:8px;
  vertical-align:middle;
  animation:spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ap-spin { to { transform: rotate(360deg); } }
@media (max-width: 767.98px) {
  .plyr__volume {
    display: none !important;
  }
}