/* Shared exact player controls from watch.css, scoped to the Series viewer.
 * Do not redesign: direct-media.js is the same video player as Watch Shiurim.
 */
/* V14.2.17 direct media player used by production HLS -> MP4 -> Vimeo routing. */
.direct-media-player{position:absolute;inset:0;z-index:2;background:#000;color:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}.direct-media-player[hidden]{display:none!important}.direct-media-video{width:100%;height:100%;object-fit:contain;background:#000}.direct-media-controls{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:8px;padding:30px 13px 11px;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.88))}.direct-media-icon-button{width:37px;height:37px;flex:0 0 auto;border:0;border-radius:50%;background:rgba(15,31,53,.78);color:#fff;cursor:pointer}.direct-media-icon-button:hover,.direct-media-icon-button.active{background:var(--gold)}.direct-media-time{min-width:42px;text-align:center;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}.direct-media-seek{flex:1;min-width:70px;accent-color:#d0ae6a;cursor:pointer;direction:ltr;touch-action:none}.direct-media-volume{width:75px;accent-color:#d0ae6a}.direct-media-select{height:33px;border:1px solid rgba(255,255,255,.25);border-radius:9px;background:rgba(15,31,53,.85);color:#fff;padding:0 7px;font-size:11px;font-weight:800}.direct-media-loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.22);font-size:13px;font-weight:800;pointer-events:none}.direct-media-loading[hidden],.direct-media-error[hidden]{display:none!important}.direct-media-spinner{width:30px;height:30px;border:3px solid rgba(255,255,255,.28);border-top-color:#d0ae6a;border-radius:50%;animation:dmspin .8s linear infinite}@keyframes dmspin{to{transform:rotate(360deg)}}.direct-media-error{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);max-width:88%;padding:15px 17px;border-radius:13px;background:rgba(15,31,53,.96);font-size:13px;text-align:center}.direct-media-error button{margin-left:9px;border:0;border-radius:8px;background:#d0ae6a;padding:7px 9px;font-weight:800;cursor:pointer}@media(max-width:760px){.direct-media-controls{gap:5px;padding:24px 7px 7px}.direct-media-icon-button{width:33px;height:33px}.direct-media-time{min-width:34px;font-size:10px}.direct-media-volume{display:none}.direct-media-select{max-width:68px;height:30px;padding:0 4px;font-size:10px}}

/* V14.2.13: compact two-row direct-media controls for very narrow phones (CAT S22 etc.). */
@media (max-width: 480px){
  .direct-media-controls{
    display:grid;
    grid-template-columns:32px 32px minmax(46px,1fr) minmax(52px,1fr) 32px 32px;
    grid-template-rows:30px 34px;
    gap:4px;
    align-items:center;
    padding:24px 6px 6px;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  #dmNow{grid-column:1;grid-row:1}
  #dmSeek{grid-column:2 / 6;grid-row:1;width:100%;min-width:0;margin:0}
  #dmDur{grid-column:6;grid-row:1}
  #dmPlay{grid-column:1;grid-row:2}
  #dmMute{grid-column:2;grid-row:2}
  #dmSpeed{grid-column:3;grid-row:2}
  #dmQuality{grid-column:4;grid-row:2}
  #dmPip{grid-column:5;grid-row:2}
  #dmFull{grid-column:6;grid-row:2}
  .direct-media-icon-button{width:32px;height:32px;min-width:0;padding:0}
  .direct-media-time{min-width:0;width:32px;font-size:9px;line-height:1;white-space:nowrap;overflow:hidden;text-align:center}
  .direct-media-volume{display:none!important}
  .direct-media-select{width:100%;max-width:none;min-width:0;height:30px;padding:0 3px;font-size:9px;border-radius:8px}
}

@media (max-width: 340px){
  .direct-media-controls{
    grid-template-columns:30px 30px minmax(43px,1fr) minmax(48px,1fr) 30px 30px;
    gap:3px;
    padding-left:4px;
    padding-right:4px;
  }
  .direct-media-icon-button{width:30px;height:30px;font-size:12px}
  .direct-media-time{width:30px;font-size:8px}
  .direct-media-select{font-size:8px;padding:0 2px}
}



/* V14.2.18 - Size direct-player controls from the player itself, not only
   from the browser viewport. This keeps controls visible in the narrower
   left column of the desktop watch layout. */
.player-wrapper{container-type:inline-size;container-name:watch-player}
@container watch-player (max-width:680px){
  .direct-media-controls{gap:5px;padding:24px 7px 7px}
  .direct-media-icon-button{width:33px;height:33px}
  .direct-media-time{min-width:34px;font-size:10px}
  .direct-media-seek{min-width:36px}
  .direct-media-volume{display:none!important}
  .direct-media-select{max-width:68px;height:30px;padding:0 4px;font-size:10px}
}
@container watch-player (max-width:500px){
  .direct-media-controls{
    display:grid;
    grid-template-columns:32px 32px minmax(46px,1fr) minmax(52px,1fr) 32px 32px;
    grid-template-rows:30px 34px;
    gap:4px;
    align-items:center;
    padding:24px 6px 6px;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  #dmNow{grid-column:1;grid-row:1}
  #dmSeek{grid-column:2 / 6;grid-row:1;width:100%;min-width:0;margin:0}
  #dmDur{grid-column:6;grid-row:1}
  #dmPlay{grid-column:1;grid-row:2}
  #dmMute{grid-column:2;grid-row:2}
  #dmSpeed{grid-column:3;grid-row:2}
  #dmQuality{grid-column:4;grid-row:2}
  #dmPip{grid-column:5;grid-row:2}
  #dmFull{grid-column:6;grid-row:2}
  .direct-media-icon-button{width:32px;height:32px;min-width:0;padding:0}
  .direct-media-time{min-width:0;width:32px;font-size:9px;line-height:1;white-space:nowrap;overflow:hidden;text-align:center}
  .direct-media-volume{display:none!important}
  .direct-media-select{width:100%;max-width:none;min-width:0;height:30px;padding:0 3px;font-size:9px;border-radius:8px}
}


/* V14.2.19 - Media controls are playback controls, so their visual order must
   remain left-to-right even when the surrounding page is Hebrew/RTL. */
.direct-media-controls{direction:ltr!important}


/* A Hebrew page must not reverse the playback timeline or reorder controls.
   Global RTL input rules otherwise reverse the range elements, despite the
   toolbar itself already specifying LTR. Keep toolbar, icons, sliders and
   timestamps in their original English-mode order on desktop and mobile. */
.media-mode-switch,
.media-mode-switch .media-mode-button,
.direct-media-player,
.direct-media-controls,
.direct-media-controls .direct-media-icon-button,
.direct-media-controls .direct-media-select,
.direct-media-controls .direct-media-time,
.direct-media-controls input[type="range"],
.audio-card audio,
.audio-extra-controls {
  direction:ltr!important;
}
html[dir="rtl"] .direct-media-controls input[type="range"],
html[dir="rtl"] .direct-media-controls select,
html[dir="rtl"] .direct-media-controls .direct-media-time,
html[dir="rtl"] .audio-card audio,
html[dir="rtl"] .audio-extra-controls select {
  direction:ltr!important;
  unicode-bidi:isolate;
}
.direct-media-controls .direct-media-time,
.direct-media-controls .direct-media-select{
  text-align:center!important;
  font-variant-numeric:tabular-nums;
}


/* 15-second jump actions sit beside Play/Pause in every language.
   On narrow players use three short rows instead of cramming eight
   controls in the bottom row (including Cat S22 sized screens). */
.direct-media-controls .direct-media-skip{
  font:800 11px/1 Inter,Arial,sans-serif;
  white-space:nowrap;
  direction:ltr!important;
}
@media (max-width:480px) {
  .direct-media-controls{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:28px 32px 32px;
    gap:3px;
    padding:24px 5px 6px;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  #dmNow{grid-column:1;grid-row:1}
  #dmSeek{grid-column:2 / 4;grid-row:1;width:100%;min-width:0;margin:0}
  #dmDur{grid-column:4;grid-row:1}
  #dmPlay{grid-column:1;grid-row:2}
  #dmBack15{grid-column:2;grid-row:2}
  #dmForward15{grid-column:3;grid-row:2}
  #dmMute{grid-column:4;grid-row:2}
  #dmSpeed{grid-column:1;grid-row:3}
  #dmQuality{grid-column:2;grid-row:3}
  #dmPip{grid-column:3;grid-row:3}
  #dmFull{grid-column:4;grid-row:3}
  .direct-media-controls .direct-media-icon-button{
    justify-self:center;
    width:32px;height:32px;min-width:0;padding:0;
  }
  .direct-media-controls .direct-media-select{
    width:100%;max-width:none;min-width:0;
    height:30px;padding:0 3px;font-size:10px;
  }
  .direct-media-controls .direct-media-time{
    justify-self:center;min-width:0;width:auto;font-size:10px;
  }
  .direct-media-controls #dmVol{display:none!important}
}
@container watch-player (max-width:500px) {
  .direct-media-controls{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:28px 32px 32px;
    gap:3px;
    padding:24px 5px 6px;
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
  #dmNow{grid-column:1;grid-row:1}
  #dmSeek{grid-column:2 / 4;grid-row:1;width:100%;min-width:0;margin:0}
  #dmDur{grid-column:4;grid-row:1}
  #dmPlay{grid-column:1;grid-row:2}
  #dmBack15{grid-column:2;grid-row:2}
  #dmForward15{grid-column:3;grid-row:2}
  #dmMute{grid-column:4;grid-row:2}
  #dmSpeed{grid-column:1;grid-row:3}
  #dmQuality{grid-column:2;grid-row:3}
  #dmPip{grid-column:3;grid-row:3}
  #dmFull{grid-column:4;grid-row:3}
  .direct-media-controls .direct-media-icon-button{
    justify-self:center;
    width:32px;height:32px;min-width:0;padding:0;
  }
  .direct-media-controls .direct-media-select{
    width:100%;max-width:none;min-width:0;
    height:30px;padding:0 3px;font-size:10px;
  }
  .direct-media-controls .direct-media-time{
    justify-self:center;min-width:0;width:auto;font-size:10px;
  }
  .direct-media-controls #dmVol{display:none!important}
}



/* Automatic overlay controls fade away after three seconds of uninterrupted
   video playback. Focused, paused, loading and actively used controls remain
   visible; JavaScript toggles the player class, not the page RTL direction. */
.direct-media-player .direct-media-controls{
  opacity:1;
  visibility:visible;
  transition:opacity .25s ease,visibility 0s linear 0s;
}
.direct-media-player.direct-media-controls-hidden .direct-media-controls{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease,visibility 0s linear .25s;
}
.direct-media-player.direct-media-controls-hidden .direct-media-video{
  cursor:none;
}
@media (prefers-reduced-motion:reduce){
  .direct-media-player .direct-media-controls,
  .direct-media-player.direct-media-controls-hidden .direct-media-controls{
    transition:none;
  }
}