/* ===========================================================================
   Shared video-player CSS — onlybangz.com / pornobed.org / transbangz.com
   ---------------------------------------------------------------------------
   ONE canonical copy, symlinked into each theme's assets/ directory. Edit this
   file; both sites get it.

   These rules lived in two places and drifted, which cost real money. The
   .ob-player-ad-slot rule sat inline inside single-video.php's
   `if ($needs_videojs)` block on transbangz — false for iframe sources — so on
   514 of that site's 1,737 published videos (30%) the ad slot rendered with no
   position and no size and the ad overlay was simply broken. onlybangz had hit
   the identical bug on 2026-09-19 and fixed it by moving the rule into
   style.css. The fix was never carried across, because there was no shared
   place to put it.

   A smaller drift found at the same time: z-index was 40 here and 50 on
   onlybangz. Both clear .ob-lazy-play (8), so neither was broken — but two
   numbers for one decision is how the next one breaks.
   =========================================================================== */

.ob-vjs-wrap { position:relative; aspect-ratio:16/9; padding:0; background:#000; border-radius:4px; overflow:hidden; cursor:pointer; background-size:cover; background-position:center; }
.ob-vjs-wrap video.video-js { position:absolute; inset:0; width:100%!important; height:100%!important; }
.ob-vjs-wrap[data-ob-player="fluid"] video,
.ob-vjs-wrap[data-ob-player="fluid"] .fluid_video_wrapper { position:absolute!important; inset:0; width:100%!important; height:100%!important; }
.ob-vjs-wrap[data-ob-player="fluid"] .fluid_controls_container { z-index:50; }
/* Phone layout: Fluid's bar assumes desktop width, so the progress bar and the
   button group overlap on a ~370px player. Progress gets its own row and the
   controls a phone doesn't need are dropped (2026-09-19). */
@media (max-width: 680px) {
  .ob-vjs-wrap[data-ob-player="fluid"] .fluid_controls_container { display:flex; flex-wrap:wrap; align-items:center; padding:0 8px 6px; box-sizing:border-box; }
  /* position:relative, not Fluid's absolute: out-of-flow elements ignore
     order/flex, so this never became its own row and, with width:100%, ran
     13px past the bar (track ended at x=394 on a 393px Pixel 5 -- the end of
     the timeline was off-screen). relative keeps it a containing block for
     its own absolute internals. */
  .ob-vjs-wrap[data-ob-player="fluid"] .fluid_controls_progress_container { position:relative!important; left:0!important; right:auto!important; top:0!important; align-self:flex-start; order:-1; flex:0 0 100%; width:100%!important; margin:0 0 8px!important; }
  .ob-vjs-wrap[data-ob-player="fluid"] .fluid_control_volume_container,
  .ob-vjs-wrap[data-ob-player="fluid"] .fluid_control_theatre,
  .ob-vjs-wrap[data-ob-player="fluid"] .fluid_control_playback_rate { display:none!important; }
  /* Fluid keeps the volume BUTTON absolutely positioned while the duration is a
     normal flex child, so the layout reserves no space for it and they overlap
     (measured on a Pixel 5: button x=62..86, duration text from x=72). Pad the
     duration clear rather than re-flowing anything -- moving Fluid's absolutely
     positioned buttons makes the sprite icons vanish. */
  .ob-vjs-wrap[data-ob-player="fluid"] .fluid_control_duration { font-size:12px; white-space:nowrap;
    padding-left:34px; box-sizing:border-box; }
}
.ob-player-ad-slot { position:absolute; inset:0; z-index:50; display:none; background:#000; }
.ob-vjs-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }