/* ============================================================
   PlaySominalTV — Plyr Dark Theme (MP4 Only)
   Accent: #FFDE17 | Default Play Icon
   Normal: cover | Fullscreen: contain (centered letterbox)
   ============================================================ */

:root {
  --plyr-color-main: #FFDE17;
  --plyr-video-control-background: #0f0f10;
  --plyr-video-control-color: #e9e9ea;
  --plyr-video-progress-buffered-background: rgba(255,255,255,0.22);
}

/* ===== Player Container ===== */
.plyr {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* ===== Normal Mode: fill the box (no bars) ===== */
.plyr__video-wrapper {
  position: relative;
  aspect-ratio: auto;
  padding-bottom: 0 !important;
  background: #000;
}
.plyr__video-wrapper video,
.plyr__poster {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;            /* fill in normal mode */
  object-position: center;
}

/* ===== Controls Bar ===== */
.plyr__controls {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(5,5,6,0.85) 55%,
    rgba(5,5,6,1) 100%
  );
  padding: 10px 12px 12px;
}

/* Buttons */
.plyr__control {
  background: var(--plyr-video-control-background);
  color: var(--plyr-video-control-color);
  border-radius: 10px;
  transition: all 0.2s ease;
}
.plyr__control:hover,
.plyr__control[aria-expanded="true"] {
  background: #1a1a1c;
  color: #fff;
}

/* Time + progress */
.plyr__time { color: #d7d7da; font-weight: 500; }
.plyr__progress__buffer { background: var(--plyr-video-progress-buffered-background) !important; }
.plyr__progress input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(255,222,23,0.25); }
.plyr__progress input[type=range]::-moz-range-thumb    { box-shadow: 0 0 0 6px rgba(255,222,23,0.25); }

/* Menus + tooltips */
.plyr__tooltip { background: #0f0f10; color: #fff; border: 1px solid #232326; }
.plyr__menu__container { background: #0f0f10; border: 1px solid #232326; }
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true] {
  background: #1a1a1c; color: #FFDE17;
}

/* Captions */
.plyr__captions { text-shadow: 0 2px 6px rgba(0,0,0,0.85); font-weight: 600; }

/* ===== Default Round Play Icon (centered, visible on pause) ===== */
.plyr.plyr--paused .plyr__control--overlaid,
.plyr.plyr--stopped .plyr__control--overlaid {
  display: block !important; opacity: 1 !important; visibility: visible !important;
}
.plyr__video-wrapper .plyr__control--overlaid {
  position: absolute !important;
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  z-index: 4;
}
.plyr__control--overlaid {
  background-color: #FFDE17; color: #000;
  box-shadow: 0 8px 20px rgba(255,222,23,0.4);
  border: none; border-radius: 50%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plyr__control--overlaid:hover {
  transform: translate(-50%, -50%) scale(1.1) !important;
  box-shadow: 0 10px 35px rgba(255,222,23,0.55);
}

/* ============================================================
   Fullscreen: maintain aspect ratio (letterbox) & center video
   ============================================================ */

.plyr--fullscreen,
.plyr:fullscreen,
.plyr:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100% !important;
  max-height: 100% !important;
  background: #000 !important;
  z-index: 999999 !important;
}

/* The wrapper fills the viewport... */
.plyr--fullscreen .plyr__video-wrapper,
.plyr:fullscreen .plyr__video-wrapper,
.plyr:-webkit-full-screen .plyr__video-wrapper {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;    /* vertical center */
  justify-content: center !important;/* horizontal center */
  background: #000 !important;       /* bars color */
}

/* ...and the video keeps its aspect ratio, centered */
.plyr--fullscreen .plyr__video-wrapper video,
.plyr:fullscreen .plyr__video-wrapper video,
.plyr:-webkit-full-screen .plyr__video-wrapper video,
.plyr--fullscreen .plyr__poster,
.plyr:fullscreen .plyr__poster,
.plyr:-webkit-full-screen .plyr__poster {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;    /* key: preserve aspect ratio */
  object-position: center center !important;
}

/* Prevent background scroll in fallback fullscreen */
html.plyr-fullscreen-open,
body.plyr-fullscreen-open { overflow: hidden !important; }