/* SP_TRAILER_CONTROL_PANEL_V264: controls only; never modifies source, manifest, Shaka, or playback boot. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

#frame {
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  min-height: 100%;
  min-height: 100svh;
  overflow: hidden;
}

#frame #status,
#frame .status,
#frame .sp-trailer-status,
#frame [data-sp-trailer-status] {
  display: none !important;
}

#frame .top,
#frame .copy,
#frame #spTrailerUnifiedControls,
#frame #big,
#frame #spBigPlay,
#frame .bigplay {
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}

#frame.sp-trailer-controls-hidden .top,
#frame.sp-trailer-controls-hidden .copy,
#frame.sp-trailer-controls-hidden #spTrailerUnifiedControls {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#frame.sp-trailer-controls-hidden .copy {
  transform: translateY(10px) !important;
}

#frame.sp-trailer-controls-hidden #spTrailerUnifiedControls {
  transform: translateY(14px) !important;
}

#frame.sp-trailer-controls-visible .top,
#frame.sp-trailer-controls-visible .copy,
#frame.sp-trailer-controls-visible #spTrailerUnifiedControls {
  opacity: 1 !important;
  visibility: visible !important;
}

#frame.sp-trailer-playing #big,
#frame.sp-trailer-playing #spBigPlay,
#frame.sp-trailer-playing .bigplay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#frame.sp-trailer-paused #big,
#frame.sp-trailer-paused #spBigPlay,
#frame.sp-trailer-paused .bigplay {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#spTrailerUnifiedControls [data-sp-trailer-seek-v264="1"],
#spTrailerUnifiedControls [data-sp-trailer-timeline-v264="1"] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: 120 !important;
}

#spTrailerUnifiedControls {
  box-sizing: border-box !important;
  position: absolute !important;
  z-index: 2147483000 !important;
  left: clamp(16px, 3.2vw, 54px) !important;
  right: clamp(16px, 3.2vw, 54px) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 9px !important;
  max-height: min(34vh, 164px) !important;
  padding: 13px 16px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(38,38,42,.66), rgba(7,7,9,.58)) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.30) !important;
  color: #fff !important;
  backdrop-filter: blur(34px) saturate(1.65) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.65) brightness(1.06) !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}

#spTrailerUnifiedControls.is-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(14px) !important;
}

#spTrailerUnifiedControls.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

#spTrailerUnifiedControls .progress {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) max-content !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  color: rgba(255,255,255,.82) !important;
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

#spTrailerUnifiedControls .row {
  display: grid !important;
  grid-template-columns: minmax(220px, auto) minmax(240px, auto) !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 18px !important;
  margin: 0 !important;
}

#spTrailerUnifiedControls .group {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

#spTrailerUnifiedControls .sp-trailer-left {
  justify-content: flex-start !important;
}

#spTrailerUnifiedControls .sp-trailer-right {
  justify-content: flex-end !important;
}

#spTrailerUnifiedControls .btn,
#spTrailerUnifiedControls button,
#spTrailerUnifiedControls a,
#spTrailerUnifiedControls .sp-trailer-range-badge {
  appearance: none !important;
  -webkit-appearance: none !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.94) !important;
  font: 800 12px/1 Inter, "Helvetica Neue", Segoe UI, Arial, sans-serif !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
  white-space: nowrap !important;
  display: inline-grid !important;
  place-items: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

#spTrailerUnifiedControls #play {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 24px rgba(0,0,0,.24) !important;
}

#spTrailerUnifiedControls .sp-trailer-range-badge {
  min-width: 74px !important;
  background: linear-gradient(135deg, rgba(247,215,116,.92), rgba(205,143,38,.78)) !important;
  color: #150e03 !important;
  text-shadow: none !important;
}

#spTrailerUnifiedControls .range {
  appearance: none !important;
  width: 100% !important;
  height: 44px !important;
  min-width: 180px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,#e50914 var(--p,0%),rgba(255,255,255,.24) var(--p,0%)) !important;
  background-size: 100% 5px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  outline: none !important;
  cursor: pointer !important;
  touch-action: none !important;
}

#spTrailerUnifiedControls .range::-webkit-slider-thumb {
  appearance: none !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 0 6px rgba(229,9,20,.28) !important;
}

#frame #spTrailerTimelineV264 {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: auto minmax(80px,1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  background: rgba(5,5,5,.76) !important;
  backdrop-filter: blur(18px) !important;
  color: #fff !important;
  font: 800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace !important;
}

#frame #spTrailerTimelineV264 input {
  width: 100% !important;
  accent-color: #e50914 !important;
}

@media (max-width: 760px), (pointer: coarse) {
  #spTrailerUnifiedControls {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    max-height: min(36vh, 176px) !important;
    padding: 9px 10px 8px !important;
    border-radius: 22px !important;
    gap: 7px !important;
  }

  #spTrailerUnifiedControls .progress {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: 8px !important;
  }

  #spTrailerUnifiedControls .row {
    grid-template-columns: 232px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  #spTrailerUnifiedControls .sp-trailer-left {
    display: grid !important;
    grid-template-columns: repeat(4, 52px) !important;
    justify-content: center !important;
  }

  #spTrailerUnifiedControls .sp-trailer-right {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: max-content !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #spTrailerUnifiedControls .sp-trailer-right::-webkit-scrollbar {
    display: none !important;
  }

  #spTrailerUnifiedControls .btn,
  #spTrailerUnifiedControls button,
  #spTrailerUnifiedControls a,
  #spTrailerUnifiedControls .sp-trailer-range-badge {
    min-width: 46px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  #spTrailerUnifiedControls .sp-trailer-left .btn,
  #spTrailerUnifiedControls .sp-trailer-left button {
    width: 52px !important;
    padding: 0 !important;
  }

  #frame #spTrailerTimelineV264 {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    gap: 7px !important;
    padding: 9px !important;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  #spTrailerUnifiedControls {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(6px, env(safe-area-inset-bottom)) !important;
    max-height: min(38vh, 146px) !important;
    padding: 8px 12px 7px !important;
    gap: 6px 10px !important;
  }

  #spTrailerUnifiedControls .row {
    grid-template-columns: 216px minmax(0, 1fr) !important;
  }

  #spTrailerUnifiedControls .sp-trailer-left {
    grid-template-columns: repeat(4, 48px) !important;
    width: 216px !important;
    justify-content: flex-start !important;
  }

  #spTrailerUnifiedControls .sp-trailer-left .btn,
  #spTrailerUnifiedControls .sp-trailer-left button {
    width: 48px !important;
  }
}

@media (orientation: portrait) and (max-width: 900px) {
  #frame {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    height: 100svh;
    min-height: 100%;
    min-height: 100svh;
    overflow: hidden;
  }

  #frame #video,
  #frame #spTrailerVideo,
  #frame video.video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain !important;
    background: #000;
  }

  #frame #spTrailerUnifiedControls {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    max-width: calc(
      100vw
      - max(10px, env(safe-area-inset-left))
      - max(10px, env(safe-area-inset-right))
    ) !important;
  }

  #frame .top,
  #frame .copy {
    box-sizing: border-box;
    max-width: 100%;
  }
}