/*
 * 2ubii Modern Video.js skin
 * CSS-only to preserve compatibility with PlayTube's legacy Video.js,
 * videojs-contrib-ads, videojs-ima and resolution switcher plugins.
 */
.video-player .video-js,
.pt_vdo_plyr .video-js {
  --vjs-accent: #ff2d55;
  --vjs-accent-alt: #ff6b35;
  background: #050609;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
  color: #fff;
  font-family: Inter, Roboto, "Open Sans", system-ui, -apple-system, sans-serif;
  height: 100% !important;
  overflow: hidden;
  width: 100% !important;
}

.video-player .video-js::after,
.pt_vdo_plyr .video-js::after {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 8;
}

.video-player .video-js video,
.pt_vdo_plyr .video-js video {
  object-fit: contain;
}

.video-js .vjs-poster {
  background-color: #050609;
  background-size: cover;
}

.video-js .vjs-big-play-button {
  background: linear-gradient(135deg, var(--vjs-accent), var(--vjs-accent-alt));
  border: 0;
  border-radius: 50%;
  box-shadow: 0 12px 34px rgba(255, 45, 85, .38);
  font-size: 3.2em;
  height: 1.9em;
  left: 50%;
  line-height: 1.9em;
  margin: -.95em 0 0 -.95em;
  opacity: .96;
  top: 50%;
  transform: scale(1);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  width: 1.9em;
}

.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus {
  background: linear-gradient(135deg, #ff416c, #ff7b40);
  box-shadow: 0 15px 42px rgba(255, 45, 85, .52);
  opacity: 1;
  transform: scale(1.08);
}

.video-js .vjs-control-bar {
  align-items: center;
  backdrop-filter: blur(12px) saturate(1.35);
  background: linear-gradient(0deg, rgba(3, 4, 8, .97), rgba(3, 4, 8, .82) 62%, rgba(3, 4, 8, .10));
  display: flex;
  height: 5em;
  padding: 1.45em .75em .3em;
}

.video-js .vjs-control-bar > .vjs-control:not(.vjs-progress-control) {
  align-self: center;
  flex: 0 0 auto;
  height: 3.2em;
  line-height: 3.2em;
}

.video-js .vjs-control {
  border-radius: 8px;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.video-js .vjs-button:hover,
.video-js .vjs-button:focus {
  background-color: rgba(255, 255, 255, .10);
  color: #fff;
}

.video-js .vjs-play-control:active,
.video-js .vjs-fullscreen-control:active {
  transform: scale(.92);
}

.video-js .vjs-progress-control {
  height: 1.6em;
  left: .9em;
  position: absolute;
  right: .9em;
  top: .45em;
  width: auto;
}

.video-js .vjs-progress-holder {
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
  height: .42em;
  margin: 0;
}

.video-js .vjs-load-progress,
.video-js .vjs-load-progress div {
  background: rgba(255, 255, 255, .28);
  border-radius: 999px;
}

.video-js .vjs-play-progress {
  background: linear-gradient(90deg, var(--vjs-accent), var(--vjs-accent-alt));
  border-radius: 999px;
}

.video-js .vjs-play-progress::before {
  color: #fff;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45));
  font-size: 1.05em;
  top: -.34em;
}

.video-js .vjs-time-control {
  align-items: center;
  display: flex;
  font-size: 1.05em;
  min-width: 0;
  padding-left: .35em;
  padding-right: .35em;
}

.video-js .vjs-remaining-time {
  display: none;
}

.video-js .vjs-time-divider {
  color: rgba(255, 255, 255, .5);
}

.video-js .vjs-current-time,
.video-js .vjs-duration,
.video-js .vjs-time-divider {
  display: flex;
}

.video-js .vjs-volume-panel {
  align-items: center;
}

.video-js .vjs-volume-bar {
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
}

.video-js .vjs-volume-level {
  background: #fff;
  border-radius: 999px;
}

.video-js .vjs-menu-button-popup .vjs-menu {
  /*
   * The legacy Video.js menu has a zero-height hover target. Giving it a
   * bridge between the control and popup prevents the quality menu closing
   * while the pointer travels upward.
   */
  bottom: 0;
  height: 3.2em;
  margin-bottom: 0;
  padding-top: 1.5em;
}

.video-js .vjs-menu-content {
  backdrop-filter: blur(16px);
  background: rgba(12, 14, 20, .94);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .38);
  overflow: hidden;
  padding: .35em;
}

.video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  bottom: 2.7em;
  min-width: 8.5em;
}

.video-js .vjs-menu-button-popup:hover .vjs-menu,
.video-js .vjs-menu-button-popup:focus-within .vjs-menu,
.video-js .vjs-menu-button-popup .vjs-menu:hover,
.video-js .vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
  display: block;
}

.video-js .vjs-menu li {
  border-radius: 7px;
  cursor: pointer;
  margin: 2px 0;
  padding: .65em .85em;
  text-transform: none;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}

.video-js .vjs-menu li.vjs-selected,
.video-js .vjs-menu li:hover {
  background: linear-gradient(135deg, var(--vjs-accent), var(--vjs-accent-alt));
  color: #fff;
  transform: translateX(2px);
}

.video-js .vjs-resolution-button {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0 .15em 0 auto;
  min-width: 4.8em;
}

.video-js .vjs-fullscreen-control {
  margin-left: .1em;
}

.video-js .vjs-resolution-button-label {
  align-items: center;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  display: flex;
  font-size: .92em;
  font-weight: 700;
  height: 2.15em;
  justify-content: center;
  letter-spacing: .01em;
  line-height: normal;
  min-width: 3.6em;
  padding: 0 .45em;
  position: static;
}

.video-js .vjs-resolution-button:hover .vjs-resolution-button-label,
.video-js .vjs-resolution-button:focus .vjs-resolution-button-label {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .24);
}

.video-js .vjs-loading-spinner {
  border-color: rgba(255, 255, 255, .2);
  border-radius: 50%;
}

.video-js .vjs-loading-spinner::before,
.video-js .vjs-loading-spinner::after {
  border-top-color: var(--vjs-accent);
}

/* Keep Google IMA and local ad UI above the player controls. */
.video-js .ima-ad-container,
.video-js .ima-ad-container > div,
#adContainer {
  border-radius: 14px;
  overflow: hidden;
}

.video-js.vjs-ad-playing .vjs-control-bar {
  z-index: 2147483646;
}

.video_js_skip_ad {
  background: rgba(8, 10, 15, .88);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 9px;
  bottom: 5.4em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  color: #fff;
  padding: .65em 1em;
  right: 1em;
}

.video_js_skip_ad a {
  color: #fff;
  font-weight: 700;
}

.video-player .ad-image,
.pt_vdo_plyr .ad-image {
  border-radius: 12px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .video-player .video-js,
  .pt_vdo_plyr .video-js,
  .video-js .ima-ad-container,
  #adContainer {
    border-radius: 8px;
  }

  .video-js .vjs-control-bar {
    height: 4.6em;
    padding-left: .25em;
    padding-right: .25em;
  }

  .video-js .vjs-big-play-button {
    font-size: 2.6em;
  }

  .video-js .vjs-volume-panel,
  .video-js .vjs-remaining-time {
    display: none;
  }

  .video-js .vjs-resolution-button {
    min-width: 4.2em;
  }

  .video-js .vjs-time-control {
    font-size: .95em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-js *,
  .video-js *::before,
  .video-js *::after {
    transition-duration: .01ms !important;
  }
}