/* Sngine Videos Player Only - v28 Admin Settings + Speed
   Fixes HD/CC overlap, adds real volume slider, and forces the custom overlay style. */

/* Main wrapper */
.vm-feed-player-only,
.svpo-player {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #050505 !important;
  box-shadow: none !important;
  isolation: isolate !important;
  line-height: 1 !important;
  font-family: inherit !important;
}

/* Video area */
.vm-feed-frame,
.vm-feed-real-frame,
.svpo-video-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: #050505 !important;
}

/* Real video */
.svpo-video {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  background: #050505 !important;
  border: 0 !important;
  outline: 0 !important;
  cursor: pointer !important;
  z-index: 1 !important;
}

/* Hide native/browser controls completely */
.svpo-video[controls],
.svpo-player video[controls] {
  controls: none !important;
}

.svpo-video::-webkit-media-controls,
.svpo-video::-webkit-media-controls-enclosure,
.svpo-video::-webkit-media-controls-panel,
.svpo-video::-webkit-media-controls-play-button,
.svpo-video::-webkit-media-controls-start-playback-button,
.svpo-video::-webkit-media-controls-timeline,
.svpo-video::-webkit-media-controls-current-time-display,
.svpo-video::-webkit-media-controls-time-remaining-display,
.svpo-video::-webkit-media-controls-mute-button,
.svpo-video::-webkit-media-controls-volume-slider,
.svpo-video::-webkit-media-controls-fullscreen-button {
  display: none !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
}

/* Stop old Plyr from showing inside this player */
.svpo-player .plyr__controls,
.svpo-player .plyr__control--overlaid,
.svpo-player .plyr__menu,
.svpo-player .plyr__tooltip {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.svpo-player .plyr,
.svpo-player .plyr__video-wrapper {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #050505 !important;
  overflow: hidden !important;
}

/* All player buttons reset */
.svpo-player button,
.svpo-player input,
.svpo-player .svpo-control-btn,
.svpo-player .svpo-big-play,
.svpo-player .svpo-quality-option {
  font-family: inherit !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}

/* Center play */
.svpo-big-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 74px !important;
  height: 74px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.56) !important;
  color: #fff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  z-index: 8 !important;
  cursor: pointer !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34) !important;
  transition: transform .16s ease, background .16s ease, opacity .16s ease !important;
}

.svpo-big-play:hover {
  transform: translate(-50%, -50%) scale(1.06) !important;
  background: rgba(0, 0, 0, 0.68) !important;
}

.svpo-player.is-playing .svpo-big-play {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Bottom controls overlay */
.svpo-controls-layer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: 92px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 0 13px 12px !important;
  margin: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 42%, rgba(0,0,0,0) 100%) !important;
  z-index: 7 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Controls row */
.svpo-controls-row,
.svpo-progress-track,
.svpo-quality-wrap,
.svpo-volume-wrap,
.svpo-control-btn,
.svpo-time {
  pointer-events: auto !important;
}

.svpo-controls-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Buttons */
.svpo-control-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.50) !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: background .15s ease, transform .15s ease !important;
}

.svpo-control-btn:hover {
  background: rgba(0,0,0,.72) !important;
  transform: translateY(-1px) !important;
}

.svpo-control-btn i,
.svpo-control-btn svg {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

/* Progress */
.svpo-progress-track {
  --svpo-progress: 0%;
  --svpo-buffer: 0%;
  position: relative !important;
  width: 100% !important;
  height: 16px !important;
  display: block !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  z-index: 9 !important;
}

.svpo-progress-rail {
  position: relative !important;
  width: 100% !important;
  height: 3px !important;
  display: block !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.32) !important;
}

.svpo-progress-buffer {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 3px !important;
  width: var(--svpo-buffer) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.46) !important;
}

.svpo-progress-played {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 3px !important;
  width: var(--svpo-progress) !important;
  border-radius: 999px !important;
  background: #ff2d55 !important;
}

.svpo-progress-handle {
  position: absolute !important;
  left: var(--svpo-progress) !important;
  top: 50% !important;
  width: 11px !important;
  height: 11px !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  background: #ff2d55 !important;
  box-shadow: 0 0 0 3px rgba(255,45,85,.18) !important;
  z-index: 2 !important;
}

/* Time */
.svpo-time {
  display: inline-flex !important;
  align-items: center !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

.svpo-spacer {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 8px !important;
}

/* Volume control */
.svpo-volume-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 128px !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.svpo-volume-range {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 74px !important;
  height: 18px !important;
  min-width: 74px !important;
  max-width: 74px !important;
  display: inline-block !important;
  opacity: .96 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

.svpo-volume-range::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(to right, #fff var(--svpo-volume, 100%), rgba(255,255,255,.35) var(--svpo-volume, 100%)) !important;
}

.svpo-volume-range::-webkit-slider-thumb {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  margin-top: -4px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.28) !important;
}

.svpo-volume-range::-moz-range-track {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.35) !important;
}

.svpo-volume-range::-moz-range-progress {
  height: 4px !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.svpo-volume-range::-moz-range-thumb {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 0 !important;
}

/* Quality menu */
.svpo-quality-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.svpo-quality-menu {
  position: absolute !important;
  right: 0 !important;
  bottom: 42px !important;
  width: 150px !important;
  display: none !important;
  padding: 8px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: rgba(18, 18, 18, .96) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.32) !important;
  z-index: 20 !important;
}

.svpo-quality-wrap.is-open .svpo-quality-menu {
  display: block !important;
}

.svpo-quality-title {
  padding: 5px 8px 7px !important;
  color: rgba(255,255,255,.64) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

.svpo-quality-option {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 9px !important;
  margin: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.svpo-quality-option:hover,
.svpo-quality-option.is-active {
  background: rgba(255,255,255,.12) !important;
}

/* HD and CC separated */
.svpo-hd-btn,
.svpo-cc-toggle {
  border-radius: 9px !important;
  width: 34px !important;
  max-width: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.svpo-hd-btn {
  width: auto !important;
  max-width: none !important;
  min-width: 36px !important;
  padding: 0 8px !important;
}

.svpo-hd-badge {
  display: inline-block !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .2px !important;
}

.svpo-cc-toggle.is-active {
  background: rgba(255,255,255,.24) !important;
}

/* Loading */
.svpo-loading {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 28px !important;
  z-index: 10 !important;
  background: rgba(0,0,0,.12) !important;
  pointer-events: none !important;
}

.svpo-player.is-loading .svpo-loading {
  display: flex !important;
}

.svpo-player.is-loading .svpo-loading i {
  animation: svpo-spin 1s linear infinite !important;
}

@keyframes svpo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Night mode stays clean */
body.night-mode .vm-feed-player-only,
body.night-mode .svpo-player,
body.night-mode .svpo-video-wrap,
body.night-mode .svpo-video {
  background: #050505 !important;
}

/* When post is narrow */
@media (max-width: 768px) {
  .vm-feed-player-only,
  .svpo-player,
  .vm-feed-frame,
  .vm-feed-real-frame,
  .svpo-video-wrap {
    border-radius: 10px !important;
  }

  .svpo-big-play {
    width: 58px !important;
    height: 58px !important;
    font-size: 22px !important;
  }

  .svpo-controls-layer {
    min-height: 82px !important;
    padding: 0 10px 9px !important;
    gap: 7px !important;
  }

  .svpo-controls-row {
    gap: 5px !important;
  }

  .svpo-control-btn {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    font-size: 14px !important;
  }

  .svpo-time {
    font-size: 12px !important;
  }

  .svpo-volume-range {
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }

  .svpo-volume-wrap {
    gap: 5px !important;
    max-width: 95px !important;
  }

  .svpo-hd-btn {
    min-width: 34px !important;
    padding: 0 6px !important;
  }

  .svpo-hd-badge {
    font-size: 9px !important;
  }

  .svpo-quality-menu {
    width: 132px !important;
    bottom: 38px !important;
  }
}

@media (max-width: 420px) {
  .svpo-volume-range {
    display: none !important;
  }
  .svpo-time {
    font-size: 11px !important;
  }
  .svpo-controls-row {
    gap: 4px !important;
  }
}


/* v22-performance-fix: prevent browser/native controls and heavy repaints */
.svpo-player,
.svpo-video-wrap,
.svpo-video {
  contain: layout paint style !important;
}
.svpo-video {
  will-change: auto !important;
}
.svpo-progress-played,
.svpo-progress-buffer,
.svpo-progress-handle {
  will-change: width, left !important;
}
.svpo-player video::-webkit-media-controls,
.svpo-player video::-webkit-media-controls-enclosure,
.svpo-player video::-webkit-media-controls-panel,
.svpo-player video::-webkit-media-controls-play-button,
.svpo-player video::-webkit-media-controls-start-playback-button,
.svpo-player video::-webkit-media-controls-timeline,
.svpo-player video::-webkit-media-controls-current-time-display,
.svpo-player video::-webkit-media-controls-time-remaining-display,
.svpo-player video::-webkit-media-controls-mute-button,
.svpo-player video::-webkit-media-controls-volume-slider,
.svpo-player video::-webkit-media-controls-fullscreen-button {
  display: none !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
}


/* v23 FFMPEG quality: hide empty CC/quality safely and support Shorts/Reels player */
.svpo-quality-wrap[style*="display: none"],
.svpo-hd-btn[style*="display: none"],
.svpo-cc-toggle[style*="display: none"] {
  display: none !important;
}

.svpo-reel-player {
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.svpo-reel-player .svpo-video-wrap {
  aspect-ratio: 9 / 16 !important;
  background: #050505 !important;
}

.svpo-reel-player .svpo-video {
  object-fit: cover !important;
}

.reel-video-wrapper .reel-video-container .svpo-reel-page-player {
  width: 100% !important;
  max-width: 459px !important;
  height: calc(100dvh - 70px) !important;
  margin: auto !important;
  border-radius: 0 !important;
}

.reel-video-wrapper .reel-video-container .svpo-reel-page-player .svpo-video-wrap {
  height: 100% !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}

.reel-video-wrapper .reel-video-container .svpo-reel-page-player .svpo-controls-layer {
  padding-right: 78px !important;
  z-index: 6 !important;
}

.reel-video-wrapper .reel-video-container .svpo-reel-page-player .svpo-big-play {
  z-index: 6 !important;
}

.reel-video-wrapper .reel-video-container .video-caption,
.reel-video-wrapper .reel-video-container .video-controlls {
  z-index: 9 !important;
}

@media screen and (max-width: 768px) {
  .svpo-reel-player {
    max-width: 100% !important;
  }
  .reel-video-wrapper .reel-video-container .svpo-reel-page-player .svpo-controls-layer {
    padding-right: 70px !important;
  }
  .reel-video-wrapper .reel-video-container .svpo-reel-page-player .svpo-volume-range {
    display: none !important;
  }
}


/* v24 reels controls + fullscreen fit fix
   Reels had Sngine caption/action overlays covering the custom controls.
   Fullscreen was zoomed because object-fit: cover was still active. */
.reel-video-container .svpo-player,
.reel-video-wrapper .svpo-player,
.reel-container .svpo-player,
.svpo-reel-player {
  position: relative !important;
  z-index: 50 !important;
}

.reel-video-container .svpo-controls-layer,
.reel-video-wrapper .svpo-controls-layer,
.reel-container .svpo-controls-layer,
.svpo-reel-player .svpo-controls-layer {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  bottom: 0 !important;
  min-height: 112px !important;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.62) 46%, rgba(0,0,0,0) 100%) !important;
}

.svpo-reel-player .svpo-progress-track,
.svpo-reel-player .svpo-controls-row,
.svpo-reel-player .svpo-control-btn,
.svpo-reel-player .svpo-volume-wrap,
.svpo-reel-player .svpo-volume-range,
.svpo-reel-player .svpo-quality-wrap,
.svpo-reel-player .svpo-time {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 1000000 !important;
}

.svpo-reel-player .svpo-controls-row {
  height: 34px !important;
  min-height: 34px !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  overflow: visible !important;
}

.svpo-reel-player .svpo-progress-track {
  height: 18px !important;
  padding: 7px 0 !important;
  margin: 0 0 2px !important;
}

.svpo-reel-player .svpo-control-btn {
  background: rgba(0,0,0,.66) !important;
  color: #fff !important;
  text-shadow: none !important;
  filter: none !important;
}

.svpo-reel-player .svpo-control-btn:hover,
.svpo-reel-player .svpo-control-btn:focus {
  background: rgba(0,0,0,.82) !important;
}

.svpo-reel-player .svpo-time {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.65) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.svpo-reel-player .svpo-volume-range {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
}

/* Move reel caption above the control bar so it does not cover play/volume/progress. */
.reel-video-container .video-caption,
.reel-video-wrapper .video-caption,
.reel-container .video-caption {
  bottom: 122px !important;
  pointer-events: none !important;
  z-index: 40 !important;
}

.reel-video-container .video-caption-overlay,
.reel-video-wrapper .video-caption-overlay,
.reel-container .video-caption-overlay {
  pointer-events: none !important;
  z-index: 35 !important;
}

/* Fullscreen must show the full real video, not zoom/crop it. */
.svpo-player:fullscreen,
.svpo-player:-webkit-full-screen,
.svpo-player:-moz-full-screen,
.svpo-player:-ms-fullscreen,
.svpo-player.svpo-is-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
  overflow: hidden !important;
  z-index: 2147483647 !important;
}

.svpo-player:fullscreen .svpo-video-wrap,
.svpo-player:-webkit-full-screen .svpo-video-wrap,
.svpo-player:-moz-full-screen .svpo-video-wrap,
.svpo-player:-ms-fullscreen .svpo-video-wrap,
.svpo-player.svpo-is-fullscreen .svpo-video-wrap {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  background: #000 !important;
}

.svpo-player:fullscreen .svpo-video,
.svpo-player:-webkit-full-screen .svpo-video,
.svpo-player:-moz-full-screen .svpo-video,
.svpo-player:-ms-fullscreen .svpo-video,
.svpo-player.svpo-is-fullscreen .svpo-video,
.svpo-player:fullscreen.svpo-reel-player .svpo-video,
.svpo-player:-webkit-full-screen.svpo-reel-player .svpo-video,
.svpo-player.svpo-is-fullscreen.svpo-reel-player .svpo-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}

.svpo-player:fullscreen .svpo-controls-layer,
.svpo-player:-webkit-full-screen .svpo-controls-layer,
.svpo-player:-moz-full-screen .svpo-controls-layer,
.svpo-player:-ms-fullscreen .svpo-controls-layer,
.svpo-player.svpo-is-fullscreen .svpo-controls-layer {
  z-index: 2147483647 !important;
  min-height: 118px !important;
  padding: 0 18px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

@media (max-width: 480px) {
  .svpo-reel-player .svpo-controls-layer {
    min-height: 104px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .svpo-reel-player .svpo-controls-row {
    gap: 5px !important;
  }

  .svpo-reel-player .svpo-volume-range {
    display: none !important;
  }

  .svpo-reel-player .svpo-time {
    font-size: 11px !important;
  }

  .svpo-reel-player .svpo-hd-btn {
    display: none !important;
  }

  .reel-video-container .video-caption,
  .reel-video-wrapper .video-caption,
  .reel-container .video-caption {
    bottom: 112px !important;
  }
}


/* v25 CC + Settings icon fix
   Keeps CC and settings visible in Reels/Shorts and uses text/icon fallbacks so icons never disappear. */
.svpo-gear-mark,
.svpo-cc-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

.svpo-gear-mark {
  font-size: 17px !important;
  font-weight: 700 !important;
  transform: translateY(-1px) !important;
}

.svpo-cc-mark {
  min-width: 18px !important;
  height: 14px !important;
  padding: 1px 3px !important;
  border: 1.6px solid rgba(255,255,255,.95) !important;
  border-radius: 3px !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: -.2px !important;
}

.svpo-player .svpo-quality-wrap[style*="display: none"] {
  display: inline-flex !important;
}

.svpo-player .svpo-cc-toggle[style*="display: none"] {
  display: inline-flex !important;
}

.svpo-player .svpo-quality-toggle,
.svpo-player .svpo-cc-toggle {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex: 0 0 auto !important;
}

.svpo-player .svpo-cc-toggle.is-disabled {
  opacity: .72 !important;
}

.svpo-reel-player .svpo-quality-wrap,
.svpo-reel-player .svpo-quality-toggle,
.svpo-reel-player .svpo-cc-toggle,
.svpo-reel-player .svpo-hd-btn,
.svpo-reel-player .svpo-fullscreen-toggle {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex: 0 0 auto !important;
  z-index: 1000002 !important;
}

.svpo-reel-player .svpo-pip-toggle {
  display: none !important;
}

.svpo-reel-player .svpo-volume-range {
  display: none !important;
}

.svpo-reel-player .svpo-volume-wrap {
  width: 31px !important;
  min-width: 31px !important;
  max-width: 31px !important;
  gap: 0 !important;
  flex: 0 0 31px !important;
}

.svpo-reel-player .svpo-time {
  min-width: 52px !important;
  max-width: 68px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
}

.svpo-reel-player .svpo-spacer {
  flex: 1 1 auto !important;
  min-width: 2px !important;
}

.reel-video-wrapper .reel-video-container .svpo-reel-page-player .svpo-controls-layer {
  padding-right: 72px !important;
}

@media (max-width: 480px) {
  .svpo-reel-player .svpo-hd-btn {
    display: inline-flex !important;
  }
  .svpo-reel-player .svpo-control-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
  }
  .svpo-reel-player .svpo-hd-btn {
    min-width: 32px !important;
    max-width: none !important;
  }
  .reel-video-wrapper .reel-video-container .svpo-reel-page-player .svpo-controls-layer {
    padding-right: 64px !important;
  }
}


/* v28 Admin settings + speed menu */
.svpo-menu-divider {
  height: 1px !important;
  margin: 7px 4px !important;
  background: rgba(255,255,255,.12) !important;
}

.svpo-speed-option {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: 31px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 9px !important;
  margin: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.svpo-speed-option:hover,
.svpo-speed-option.is-active {
  background: rgba(255,255,255,.12) !important;
}

.svpo-speed-option.is-active::after,
.svpo-quality-option.is-active::after {
  content: "✓" !important;
  display: inline-block !important;
  margin-left: 8px !important;
  color: #fff !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.svpo-player .svpo-quality-menu {
  max-height: 260px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

.svpo-reel-player .svpo-quality-menu {
  width: 142px !important;
  max-height: 238px !important;
}

@media (max-width: 480px) {
  .svpo-reel-player .svpo-quality-menu {
    right: -34px !important;
    width: 132px !important;
  }
}

/* v33 thumbnail/poster visibility fix
   Use a real image layer so browsers cannot replace the initial frame with a dark box. */
.svpo-poster-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #050505 !important;
  z-index: 4 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity .14s ease !important;
}

.svpo-player.svpo-has-started .svpo-poster-image {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Keep controls/play above the poster image. */
.svpo-player .svpo-big-play { z-index: 12 !important; }
.svpo-player .svpo-controls-layer { z-index: 11 !important; }

/* Reels/Shorts use the same 9:16 crop as the real video. */
.svpo-reel-player .svpo-poster-image {
  object-fit: cover !important;
  object-position: center center !important;
}


/* v36 readable automatic captions + plugin watermark */
.svpo-auto-caption {
  position: absolute !important;
  left: 50% !important;
  bottom: 76px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: min(76%, 680px) !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  background: rgba(0,0,0,.78) !important;
  color: #fff !important;
  font-size: clamp(13px, 1.55vw, 18px) !important;
  font-weight: 600 !important;
  line-height: 1.28 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9) !important;
  z-index: 20 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity .12s ease !important;
}
.svpo-auto-caption.is-visible { opacity: 1 !important; visibility: visible !important; }
.svpo-auto-caption.is-notice { font-size: 13px !important; font-weight: 500 !important; }
.svpo-reel-player .svpo-auto-caption { bottom: 92px !important; max-width: 78% !important; }
.svpo-player video::cue {
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 1em;
  font-weight: 600;
}

.svpo-watermark {
  position: absolute !important;
  z-index: 18 !important;
  pointer-events: none !important;
  user-select: none !important;
  max-width: 34% !important;
  opacity: .86 !important;
}
.svpo-watermark-top-left { top: 12px !important; left: 12px !important; }
.svpo-watermark-top-right { top: 12px !important; right: 12px !important; }
.svpo-watermark-bottom-left { bottom: 74px !important; left: 12px !important; }
.svpo-watermark-bottom-right { bottom: 74px !important; right: 12px !important; }
.svpo-watermark-text {
  display: inline-block !important;
  padding: 5px 8px !important;
  border-radius: 5px !important;
  background: rgba(0,0,0,.32) !important;
  color: #fff !important;
  font-size: clamp(11px, 1.5vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.9) !important;
  white-space: nowrap !important;
}
.svpo-watermark-image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 150px !important;
  max-height: 58px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)) !important;
}
.svpo-reel-player .svpo-watermark-bottom-left,
.svpo-reel-player .svpo-watermark-bottom-right { bottom: 92px !important; }
.svpo-reel-player .svpo-watermark-image { max-width: 105px !important; max-height: 48px !important; }
@media (max-width: 576px) {
  .svpo-watermark-top-left { top: 8px !important; left: 8px !important; }
  .svpo-watermark-top-right { top: 8px !important; right: 8px !important; }
  .svpo-watermark-bottom-left { left: 8px !important; bottom: 68px !important; }
  .svpo-watermark-bottom-right { right: 8px !important; bottom: 68px !important; }
  .svpo-watermark-image { max-width: 92px !important; max-height: 40px !important; }
  .svpo-watermark-text { font-size: 11px !important; padding: 4px 6px !important; }
  .svpo-auto-caption { bottom: 68px !important; max-width: 92% !important; font-size: 14px !important; }
  .svpo-reel-player .svpo-auto-caption { bottom: 86px !important; }
}