/* ==========================================================================
   MeczRealu: odtwarzacz filmow (Plyr) w ukladzie X
   - cienki pasek postepu na calej szerokosci, NAD ikonami,
   - ikony: play | czas "0:08 / 2:02" ... wycisz, ustawienia, PiP, pelny ekran,
   - bez suwaka glosnosci (tylko wycisz), bez niebieskiego koloru,
   - duzy przycisk play: ciemne polprzezroczyste kolo z bialym trojkatem.
   Kolejnosc ikon: includes/assets/js/core/core.js. Relacje / reels bez zmian.
   ========================================================================== */
.plyr--video:not(.mr-x0) {
  --plyr-color-main: #ffffff;
  --plyr-video-control-color: #ffffff;
  --plyr-video-control-color-hover: #ffffff;
  --plyr-video-control-background-hover: rgba(255, 255, 255, .14);
  --plyr-control-icon-size: 18px;
  --plyr-control-spacing: 8px;
  --plyr-control-radius: 50%;
  --plyr-range-track-height: 3px;
  --plyr-range-thumb-height: 12px;
  --plyr-range-thumb-background: #ffffff;
  --plyr-range-thumb-shadow: none;
  --plyr-video-progress-buffered-background: rgba(255, 255, 255, .35);
  --plyr-video-range-track-background: rgba(255, 255, 255, .25);
  --plyr-font-size-time: 13px;
}

/* pasek ikon: dwa rzedy - postep na cala szerokosc, pod nim ikony */
.plyr--video:not(.mr-x0) .plyr__controls {
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2px;
  padding: 24px 10px 6px !important;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65)) !important;
}
.plyr--video:not(.mr-x0) .plyr__controls > .plyr__progress__container {
  order: -1;
  flex: 1 0 100%;
  margin: 0 0 2px !important;
  padding: 0 !important;
}
.plyr--video:not(.mr-x0) .plyr__progress input[type="range"] {
  height: 14px;
}
/* kropka na pasku tylko przy najechaniu (jak na X) */
.plyr--video:not(.mr-x0) .plyr__progress input[type="range"]::-webkit-slider-thumb { opacity: 0; transition: opacity .15s; }
.plyr--video:not(.mr-x0) .plyr__progress:hover input[type="range"]::-webkit-slider-thumb { opacity: 1; }
.plyr--video:not(.mr-x0) .plyr__progress input[type="range"]::-moz-range-thumb { opacity: 0; transition: opacity .15s; }
.plyr--video:not(.mr-x0) .plyr__progress:hover input[type="range"]::-moz-range-thumb { opacity: 1; }

/* czas "0:08 / 2:02" po prawej, przed ikonami */
.plyr--video:not(.mr-x0) .plyr__controls .plyr__time {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  padding: 0;
}
.plyr--video:not(.mr-x0) .plyr__controls .plyr__time--current {
  margin-left: auto;
}
.plyr--video:not(.mr-x0) .plyr__controls .plyr__time--duration {
  display: inline-block !important;   /* Plyr chowa czas trwania na waskich ekranach */
  margin-right: 6px;
}
.plyr--video:not(.mr-x0) .plyr__controls .plyr__time + .plyr__time::before {
  content: "/";
  margin: 0 3px;
}
.plyr--video:not(.mr-x0) .plyr__controls .plyr__control {
  padding: 6px;
}
/* waski (pionowy) film: ciasniej i bez "obrazu w obrazie" - inaczej ostatnia
   ikona spadala do nowego rzedu */
.plyr--video:not(.mr-x0) { container-type: inline-size; }
@container (max-width: 340px) {
  .plyr__controls .plyr__control { padding: 4px !important; }
  .plyr__controls .plyr__time { font-size: 12px !important; }
  .plyr__controls .plyr__time + .plyr__time::before { margin: 0 2px !important; }
  .plyr__controls [data-plyr="pip"] { display: none !important; }
}
/* przycisk "wycisz" siedzi w .plyr__volume razem z suwakiem - chowamy tylko suwak */
.plyr--video:not(.mr-x0) .plyr__controls .plyr__volume { width: auto; min-width: 0; max-width: none; }
.plyr--video:not(.mr-x0) .plyr__controls .plyr__volume input[type="range"] { display: none !important; }

/* duzy przycisk play: ciemne kolo, bez niebieskiego */
.plyr--video:not(.mr-x0) .plyr__control--overlaid {
  background: rgba(0, 0, 0, .55) !important;
  color: #fff !important;
  padding: 18px !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(2px);
}
.plyr--video:not(.mr-x0) .plyr__control--overlaid:hover,
.plyr--video:not(.mr-x0) .plyr__control--overlaid:focus-visible {
  background: rgba(0, 0, 0, .75) !important;
}
.plyr--video:not(.mr-x0) .plyr__control--overlaid svg {
  width: 26px;
  height: 26px;
}

/* menu ustawien - ciemne jak na X */
.plyr--video:not(.mr-x0) .plyr__menu__container {
  --plyr-menu-background: rgba(0, 0, 0, .9);
  --plyr-menu-color: #e7e9ea;
  --plyr-menu-arrow-color: #e7e9ea;
  --plyr-menu-border-color: rgba(255, 255, 255, .15);
  border-radius: 12px;
}