/* ================================================================
   cnpx-player.css  —  ChinesePixel custom HTML5 video player v3
   All values sourced directly from the original AllVideoShare /
   MediaElement.js CSS (mediaelementplayer.css + allvideoshare.css)
   ================================================================ */

/* ── Outer wrapper: self-sizing 16:9 ───────────────────────────── */

.cnpx-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #fff;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}

/* ── Video fill ────────────────────────────────────────────────── */

.cnpx-video-wrap {
  position: absolute;
  inset: 0;
  background: #000;
  line-height: 0;
}

.cnpx-vid {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}

/* ── Overlay play button ───────────────────────────────────────── */

.cnpx-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

.cnpx-overlay svg {
  width: 80px;
  height: 80px;
  pointer-events: none;
}

/* Ring changes white → red on hover. No scale, no shadow. */
.cnpx-overlay-ring { transition: stroke 0.18s; }
.cnpx-overlay:hover .cnpx-overlay-ring { stroke: #c1272d; }

/* ── Share trigger (original: share.png on rgba(0,0,0,0.6) bg) ── */

.cnpx-share-trigger {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.6) url('/assets/images/player/share.png') center no-repeat;
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  opacity: 1;
  transition: opacity 0.4s;
}
.cnpx-share-trigger:hover { opacity: 0.8; }

/* ── Share modal (full-video overlay) ─────────────────────────── */

.cnpx-share-modal {
  position: absolute;
  inset: 0;
  background: #000;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.cnpx-share-modal.cnpx-open { display: flex; }

.cnpx-share-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: url('/assets/images/player/close.png') center no-repeat;
  border: none;
  cursor: pointer;
}

.cnpx-share-body { text-align: center; }

.cnpx-share-heading {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #eee;
  text-transform: uppercase;
}

/* Social icons — original used 30px PNG images + 360° spin on hover */
.cnpx-share-icons { margin: 10px 0; }

.cnpx-si {
  display: inline-block;
  padding: 5px;
  transition: transform 0.5s ease-in-out;
  text-decoration: none;
}
.cnpx-si:hover { transform: rotate(360deg); }
.cnpx-si img { width: 30px; display: block; }

/* ================================================================
   Controls bar — absolute overlay at bottom
   Auto-hides via .cnpx-idle class, timings from MEJS source:
     mouseEnter  : 2500ms
     mouseLeave  : 1000ms
     default     : 1500ms
   ================================================================ */

.cnpx-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 0;
  background: #c1272d;
  z-index: 20;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.4s;
}

/* Auto-hide: controls + share button fade together */
.cnpx-player.cnpx-idle .cnpx-controls,
.cnpx-player.cnpx-idle .cnpx-share-trigger {
  opacity: 0;
  pointer-events: none;
}

/* ── Generic icon button ───────────────────────────────────────── */

.cnpx-btn {
  background: transparent url('/assets/images/player/mejs-controls.svg');
  /* individual buttons override background-position */
  border: 0;
  cursor: pointer;
  display: block;
  font-size: 0;
  height: 20px;
  line-height: 0;
  margin: 10px 6px;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 20px;
  flex-shrink: 0;
}

/* Use SVG icons instead of the sprite (we don't have the exact sprite) */
.cnpx-btn {
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  width: auto;
  height: 40px;
  padding: 0 2px;
}
.cnpx-btn svg { width: 20px; height: 20px; display: block; }
.cnpx-play-btn svg { width: 24px; height: 24px; }  /* 20% larger than other icons */
.cnpx-btn:hover { opacity: 0.75; }

/* ── Time displays ─────────────────────────────────────────────── */

.cnpx-time {
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  padding: 0 6px;
  flex-shrink: 0;
  line-height: 1;
  transform: translateY(1px);   /* compensates for digit ascender weight */
}

/* ── Progress rail ─────────────────────────────────────────────── */
/* Source: .mejs__time-rail - flex-grow:1, height:40px, padding-top:10px,
   margin: 0 10px. The visible track is 10px inside the 40px rail.   */

.cnpx-progress {
  flex: 1;
  height: 40px;          /* full bar height = large click target */
  padding-top: 10px;     /* visual track sits 10px from top */
  position: relative;
  cursor: pointer;
  margin: 0 10px;
  box-sizing: border-box;
}

/* Track background. Source: .mejs__time-total rgba(255,255,255,0.3) */
/* All track layers sit at top:15px — MEJS source has padding-top:10px
   on the rail PLUS margin:5px 0 0 on .mejs__time-total, so the visual
   track is 15px from the bar top, centred in the 40px control bar.   */

.cnpx-prog-track {
  position: absolute;
  left: 0; top: 15px;
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

/* Buffered. Source: .mejs__time-loaded rgba(255,255,255,0.3) */
.cnpx-prog-buf {
  position: absolute;
  left: 0; top: 15px;
  height: 10px;
  width: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  pointer-events: none;
}

/* Ghost hover fill. Source: .mejs__time-hovered rgba(255,255,255,0.5)
   Shows from 0 → cursor while hovering, masking behind the played bar. */
.cnpx-prog-hover {
  position: absolute;
  left: 0; top: 15px;
  height: 10px;
  width: 0;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  pointer-events: none;
  z-index: 5;
}

/* Played. Source: .mejs__time-current rgba(255,255,255,0.9) — sits above
   the ghost fill so it masks it in the already-played region.           */
.cnpx-prog-played {
  position: absolute;
  left: 0; top: 15px;
  height: 10px;
  width: 0;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  pointer-events: none;
  z-index: 6;
}

/* Buffering animation. Source values verbatim from mediaelementplayer.css:
   linear-gradient (NOT repeating) + background-size:15px + 2s + 30px 0  */
@keyframes cnpx-buffering {
  from { background-position: 0 0; }
  to   { background-position: 30px 0; }
}

.cnpx-prog-buf.cnpx-loading {
  width: 100% !important;
  background-image: linear-gradient(
    -45deg,
    rgba(255,255,255,0.4) 25%, transparent 25%,
    transparent 50%,
    rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 75%,
    transparent 75%, transparent
  );
  background-size: 15px 15px;
  background-color: transparent;
  animation: cnpx-buffering 2s linear infinite;
}

/* Playhead handle. Source: .mejs__time-handle-content
   border:4px solid rgba(255,255,255,0.9), border-radius:50%, 10×10px.
   background fills the tiny box-sizing inner area so no red dot shows.
   Shown on hover of the CONTROL BAR (not the full player).            */
.cnpx-prog-handle {
  position: absolute;
  top: 15px;
  left: 0;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.9);   /* fills inner area, kills the dot */
  border: 4px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-sizing: border-box;
  transform: translate(-50%, 0) scale(0);
  transform-origin: center center;
  pointer-events: none;
  transition: transform 0.1s ease;
  z-index: 11;
}

/* Show on hover of the CONTROL BAR or while actively seeking */
.cnpx-controls:hover .cnpx-prog-handle,
.cnpx-player.cnpx-seeking .cnpx-prog-handle {
  transform: translate(-50%, 0) scale(1);
}

/* Time tooltip. Source: .mejs__time-float
   bg:#eee, border:1px solid #333, h:17px, w:36px, bottom:100%,
   margin-bottom:9px. Small triangle notch beneath.               */
.cnpx-time-tooltip {
  position: absolute;
  bottom: 100%;
  margin-bottom: 9px;
  left: 0;
  transform: translateX(-50%);
  background: #eee;
  border: 1px solid #333;
  color: #111;
  font-size: 10px;
  height: 17px;
  width: 36px;
  line-height: 17px;
  text-align: center;
  display: none;
  pointer-events: none;
  white-space: nowrap;
  z-index: 20;
  border-radius: 2px;
}

.cnpx-time-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #eee;
}

.cnpx-progress:hover .cnpx-time-tooltip { display: block; }

/* ── Quality selector ──────────────────────────────────────────── */

.cnpx-qual-wrap {
  position: relative;
  flex-shrink: 0;
}
.cnpx-qual-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  cursor: pointer;
  padding: 0 4px;
  line-height: 40px;
  height: 40px;
}
.cnpx-qual-btn:hover { color: rgba(255,255,255,0.75); }

/* Source: .mejs__qualities-selector — rgba(50,50,50,0.7) bg,
   positioned above the button (top: -100px)                      */
.cnpx-qual-menu {
  position: absolute;
  bottom: 40px;
  left: -10px;
  background: #320000;          /* custom theme override, not unskinned gray */
  border: 1px solid transparent;
  min-width: 60px;
  display: none;
  flex-direction: column;
  z-index: 30;
  overflow: hidden;
  padding: 0;
}
.cnpx-qual-menu.cnpx-open { display: flex; }

.cnpx-qual-opt {
  color: #fff;
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 4px 10px;
  cursor: pointer;
  list-style: none;
  margin: 0 0 6px;
}
.cnpx-qual-opt:hover   { background: rgba(255,255,255,0.2); }
.cnpx-qual-opt.cnpx-active { color: #ff6969; }  /* custom theme: #ff6969 not cyan */

/* ── Volume control ────────────────────────────────────────────── */
/* Source: custom div slider, NOT <input type=range>.
   Popup: 25px wide × 115px tall, rgba(50,50,50,0.7) bg.
   Track: 2px wide × 100px tall — very thin, centered in popup.
   Handle: 16px × 6px flat BAR (not circle), rgba(255,255,255,0.9)
   Full popup width is the click/drag area (not just the 2px track). */

.cnpx-vol-wrap {
  position: relative;
  flex-shrink: 0;
}

.cnpx-vol-btn:hover { opacity: 1 !important; }

.cnpx-vol-popup {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: #320000;          /* custom theme override, not unskinned gray */
  width: 25px;
  height: 115px;
  display: none;
  z-index: 30;
  cursor: pointer;              /* pointer for whole popup, ns-resize only on knob */
}
.cnpx-vol-popup.cnpx-open { display: block; }

/* The 2px-wide visible track */
.cnpx-vol-total {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100px;
  background: rgba(255, 255, 255, 0.5);
}

/* Filled portion (current level) grows from bottom */
.cnpx-vol-current {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 100%;   /* JS sets this */
  background: rgba(255, 255, 255, 0.9);
}

/* The flat horizontal drag handle bar (16×6px) */
.cnpx-vol-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 6px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
  cursor: ns-resize;
  /* top is set by JS */
}

/* ── Fullscreen ────────────────────────────────────────────────── */

.cnpx-player:fullscreen,
.cnpx-player:-webkit-full-screen,
.cnpx-player:-moz-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  aspect-ratio: unset !important;
}