/* Shared video.js skin for all players (cat_studio, studio_gallery,
   video_detail, cancel_success). Load AFTER the stock video-js.css.
   Layout: full-width seek bar on its own top row, buttons row below. */

.video-js .vjs-control-bar {
  height: 5.2em;
  padding-top: 2.2em;
}

/* Seek bar: own full-width row above the buttons */
.video-js .vjs-progress-control {
  position: absolute;
  top: 0.4em;
  left: 0.8em;
  right: 0.8em;
  width: auto;
  height: 1.6em;
  min-width: 0;
}
.video-js .vjs-progress-control .vjs-progress-holder {
  margin: 0;
}
/* Stock skin hides the seek bar in x-small/tiny responsive layouts —
   it has its own row now, so keep it visible */
.video-js.vjs-layout-x-small .vjs-progress-control,
.video-js.vjs-layout-tiny .vjs-progress-control {
  display: flex;
}

/* Show "current / total" instead of the bare remaining time */
.video-js .vjs-current-time,
.video-js .vjs-time-divider,
.video-js .vjs-duration {
  display: block;
}
.video-js .vjs-current-time { padding-right: 0.3em; }
.video-js .vjs-time-divider { padding: 0; min-width: 1em; }
.video-js .vjs-duration { padding-left: 0.3em; }
.video-js .vjs-remaining-time { display: none; }

/* Push PiP/fullscreen to the right edge now that the seek bar
   no longer fills the button row */
.video-js .vjs-custom-control-spacer {
  display: block;
  flex: auto;
}

/* Touch devices: larger controls, thicker scrub track */
@media (pointer: coarse) {
  .video-js .vjs-control-bar { font-size: 130%; }
  .video-js .vjs-progress-holder { height: 0.5em; }
}