/* STUPPLAYS — VOD CONTROLLER FINAL GEOMETRY
   Behavior is owned by block-10.js / spAttachCustomScrub().
   This file only controls the compact visual layout so every control stays
   inside the player and the seek track remains a usable hit target.
*/

#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 10px !important;
  width: calc(100% - 20px) !important;
  max-width: 1400px !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 6px 9px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  overflow: visible !important;
  z-index: 100002 !important;
  pointer-events: auto !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 12px !important;
  background: rgba(4,4,5,.94) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.42) !important;
}

/* Five compact controls: Pause, Stop, Mute, Expand. */
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-pp,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-stop,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-mute,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-expand {
  position: static !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: #e50914 !important;
  border: 1px solid #e50914 !important;
  color: #fff !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  transform: none !important;
  z-index: 2 !important;
}

#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-pp:hover,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-stop:hover,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-mute:hover,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-expand:hover {
  background: #e50914 !important;
  border-color: #e50914 !important;
  transform: none !important;
}

/* Make legacy glyphs/icons visually centered without changing their handlers. */
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-pp,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-stop,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-mute,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-expand {
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-pp i,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-stop i,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-mute i,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-expand i {
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Time labels occupy only the width they need. */
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-cur,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-dur {
  position: static !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #f5f5f5 !important;
  font: 700 14px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  text-align: center !important;
}
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-dur {
  min-width: 58px !important;
}

/* ONLY the actual track grows. Its visible line is thin; the 18px box is the
   pointer/touch target, so seeking is easy without making the bar look huge. */
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-track {
  position: relative !important;
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 70px !important;
  max-width: none !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  pointer-events: auto !important;
  touch-action: none !important;
  cursor: pointer !important;
  overflow: visible !important;
  z-index: 3 !important;
}

#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-track > .sp-scrub-track-bg,
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-track > .sp-scrub-fill {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 50% !important;
  width: 100% !important;
  height: 5px !important;
  min-height: 5px !important;
  margin: -2.5px 0 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  pointer-events: none !important;
}

#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-track > .sp-scrub-track-bg {
  background: rgba(255,255,255,.30) !important;
}
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-track > .sp-scrub-fill {
  background: #e50914 !important;
}

#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-track > .sp-scrub-thumb {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  width: 14px !important;
  height: 14px !important;
  margin: -7px 0 0 -7px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 7px rgba(0,0,0,.55) !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Quality remains compact at the far right. */
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-q-wrap {
  position: relative !important;
  flex: 0 0 112px !important;
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: center !important;
}
#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-q-wrap > .sp-scrub-q-btn {
  width: 112px !important;
  min-width: 112px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 7px !important;
  border-radius: 9px !important;
  box-sizing: border-box !important;
  font: 700 12px/34px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  white-space: nowrap !important;
  text-align: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-q-wrap > .sp-scrub-q-menu {
  left: auto !important;
  right: 0 !important;
  bottom: calc(100% + 6px) !important;
  z-index: 100005 !important;
}

/* Preserve the same compact structure on tablets/phones. */
@media (max-width: 991px) {
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub {
    bottom: 7px !important;
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 5px 6px !important;
    gap: 4px !important;
    border-radius: 10px !important;
  }
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-pp,
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-stop,
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-mute,
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-expand {
    flex-basis: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    font-size: 12px !important;
  }
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-cur,
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-dur {
    font-size: 11px !important;
    min-width: 31px !important;
  }
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-dur {
    min-width: 45px !important;
  }
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-track {
    flex: 1 1 0 !important;
    min-width: 30px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
  }
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-q-wrap,
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-q-wrap > .sp-scrub-q-btn {
    flex-basis: 78px !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
  }
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-q-wrap > .sp-scrub-q-btn {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    font-size: 9px !important;
    line-height: 30px !important;
    padding: 0 4px !important;
  }
}

@media (max-width: 420px) {
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub {
    width: calc(100% - 6px) !important;
    max-width: calc(100% - 6px) !important;
    gap: 3px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-pp,
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-stop,
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-mute,
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-expand {
    flex-basis: 27px !important;
    width: 27px !important;
    min-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
  }
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-q-wrap,
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-q-wrap > .sp-scrub-q-btn {
    flex-basis: 70px !important;
    width: 70px !important;
    min-width: 70px !important;
  }
  #sp-walkthrough .cinematic-slide.sp-offline-playing .poster-wrapper > .sp-custom-scrub > .sp-scrub-q-wrap > .sp-scrub-q-btn {
    font-size: 8px !important;
  }
}