/* =========================================================
   SPORTIVA Promo Frame Safe Area - Container Transform + Fullscreen FIX v8
   Tujuan:
   - Frame promo berdiri sendiri sebagai sibling player.
   - Player/container tetap di flow halaman, TIDAK absolute.
   - Transform diterapkan ke .watch-player-container / .featured-player.
   - #featuredVideo tidak di-transform langsung.
   - Split layout tidak dipakai.
   ========================================================= */

html body .promo-frame-safe-stage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  background: #000 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  --promo-safe-top: 0%;
  --promo-safe-left: 0%;
  --promo-player-scale-x: 1;
  --promo-player-scale-y: 1;
}

html body .promo-frame-safe-stage > .promo-frame-layer,
html body .promo-frame-safe-stage > #promoFrameLayer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
  user-select: none !important;
  background: transparent !important;
  transition: opacity .28s ease, visibility .28s ease !important;
}

html body .promo-frame-safe-stage > .promo-frame-layer.is-visible,
html body .promo-frame-safe-stage > #promoFrameLayer.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

html body .promo-frame-safe-stage > .promo-frame-layer.is-clickable,
html body .promo-frame-safe-stage > #promoFrameLayer.is-clickable {
  pointer-events: auto !important;
}

html body .promo-frame-safe-stage .promo-frame-item {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

html body .promo-frame-safe-stage > .promo-frame-layer.is-clickable .promo-frame-item,
html body .promo-frame-safe-stage > #promoFrameLayer.is-clickable .promo-frame-item {
  pointer-events: auto !important;
}

html body .promo-frame-safe-stage .promo-frame-item img,
html body .promo-frame-safe-stage .promo-frame-item video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center center !important;
  border: 0 !important;
}

/* INI BAGIAN UTAMA:
   Player tetap position:relative dan tetap mengisi layout normal halaman.
   Jangan absolute, karena kalau absolute, konten bawah akan seperti timpa-timpaan. */
html body .promo-frame-safe-stage > .featured-player,
html body .promo-frame-safe-stage > .watch-player-container {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  z-index: 5 !important;
  margin: 0 !important;
  transform-origin: left top !important;
  transform: translate(0%, 0%) scale(1, 1) !important;
  transition: transform 2000ms ease-in-out !important;
  will-change: transform !important;
  overflow: hidden !important;
  line-height: normal !important;
}

html body .promo-frame-safe-stage.promo-frame-active > .featured-player,
html body .promo-frame-safe-stage.promo-frame-active > .watch-player-container {
  transform: translate(var(--promo-safe-left, 0%), var(--promo-safe-top, 0%)) scale(var(--promo-player-scale-x, 0.846), var(--promo-player-scale-y, 0.845)) !important;
}

/* Pastikan video tidak ikut punya transform sendiri dari patch lama/cache lama. */
html body .promo-frame-safe-stage > .featured-player > video#featuredVideo,
html body .promo-frame-safe-stage > .watch-player-container > video#featuredVideo,
html body .promo-frame-safe-stage > .featured-player > iframe,
html body .promo-frame-safe-stage > .watch-player-container > iframe {
  transform: none !important;
  transition: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  z-index: auto !important;
}

/* Jika masih ada layer promo lama di dalam player karena cache HTML lama, matikan agar tidak nutup video. */
html body .featured-player > .promo-frame-layer,
html body .watch-player-container > .promo-frame-layer {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Jangan sembunyikan frame hanya karena player punya class ad-playing.
   Class ad-playing milik prestream, tapi container-nya tetap harus bisa dikecilkan. */
html body .promo-frame-safe-stage.promo-frame-active > .promo-frame-layer,
html body .promo-frame-safe-stage.promo-frame-active > #promoFrameLayer {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 768px) {
  html body .promo-frame-safe-stage > .featured-player,
  html body .promo-frame-safe-stage > .watch-player-container {
    transition-duration: 650ms !important;
  }
}


/* =========================================================
   SPORTIVA Promo Frame Fullscreen Behaviour v8
   - Fullscreen target adalah .promo-frame-safe-stage, bukan video saja.
   - Pseudo fullscreen dipakai untuk iPhone/iPad Safari agar frame promo tetap ikut tampil.
   - Tetap responsif di portrait, landscape, mobile, dan desktop.
   ========================================================= */
html.sportiva-promo-pseudo-fullscreen,
html.sportiva-promo-pseudo-fullscreen body {
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}

html body .promo-frame-safe-stage:fullscreen,
html body .promo-frame-safe-stage:-webkit-full-screen,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: auto !important;
  background: #000 !important;
  z-index: 2147483000 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body .promo-frame-safe-stage:fullscreen > .promo-frame-layer,
html body .promo-frame-safe-stage:-webkit-full-screen > .promo-frame-layer,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .promo-frame-layer,
html body .promo-frame-safe-stage:fullscreen > #promoFrameLayer,
html body .promo-frame-safe-stage:-webkit-full-screen > #promoFrameLayer,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > #promoFrameLayer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

html body .promo-frame-safe-stage:fullscreen > .featured-player,
html body .promo-frame-safe-stage:-webkit-full-screen > .featured-player,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .featured-player,
html body .promo-frame-safe-stage:fullscreen > .watch-player-container,
html body .promo-frame-safe-stage:-webkit-full-screen > .watch-player-container,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .watch-player-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: #000 !important;
}

html body .promo-frame-safe-stage:fullscreen > .featured-player > video#featuredVideo,
html body .promo-frame-safe-stage:-webkit-full-screen > .featured-player > video#featuredVideo,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .featured-player > video#featuredVideo,
html body .promo-frame-safe-stage:fullscreen > .watch-player-container > video#featuredVideo,
html body .promo-frame-safe-stage:-webkit-full-screen > .watch-player-container > video#featuredVideo,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .watch-player-container > video#featuredVideo,
html body .promo-frame-safe-stage:fullscreen > .featured-player > iframe,
html body .promo-frame-safe-stage:-webkit-full-screen > .featured-player > iframe,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .featured-player > iframe,
html body .promo-frame-safe-stage:fullscreen > .watch-player-container > iframe,
html body .promo-frame-safe-stage:-webkit-full-screen > .watch-player-container > iframe,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .watch-player-container > iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}

html body .promo-frame-safe-stage:fullscreen .player-controls,
html body .promo-frame-safe-stage:-webkit-full-screen .player-controls,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .player-controls {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 30 !important;
}

html body .promo-frame-safe-stage:fullscreen .player-overlay,
html body .promo-frame-safe-stage:-webkit-full-screen .player-overlay,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .player-overlay,
html body .promo-frame-safe-stage:fullscreen .quality-menu,
html body .promo-frame-safe-stage:-webkit-full-screen .quality-menu,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .quality-menu,
html body .promo-frame-safe-stage:fullscreen .prestream-ad,
html body .promo-frame-safe-stage:-webkit-full-screen .prestream-ad,
html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .prestream-ad {
  z-index: 25 !important;
}

@media (orientation: portrait) and (max-width: 820px) {
  html body .promo-frame-safe-stage:fullscreen > .featured-player,
  html body .promo-frame-safe-stage:-webkit-full-screen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .featured-player,
  html body .promo-frame-safe-stage:fullscreen > .watch-player-container,
  html body .promo-frame-safe-stage:-webkit-full-screen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen > .watch-player-container {
    transform-origin: left top !important;
  }

  html body .promo-frame-safe-stage:fullscreen .player-controls,
  html body .promo-frame-safe-stage:-webkit-full-screen .player-controls,
  html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .player-controls {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  html body .promo-frame-safe-stage:fullscreen .player-controls,
  html body .promo-frame-safe-stage:-webkit-full-screen .player-controls,
  html body .promo-frame-safe-stage.sportiva-pseudo-fullscreen .player-controls {
    transform: scale(.92) !important;
    transform-origin: bottom center !important;
  }
}


/* =========================================================
   SPORTIVA Mobile Fullscreen Auto Landscape v9
   - Android/Chrome: JS mencoba screen.orientation.lock('landscape') setelah fullscreen.
   - Browser yang tidak mengizinkan lock: fallback visual diputar ke landscape dengan CSS.
   - iPhone/iPad Safari: fallback CSS tetap menjaga frame promo + player di satu stage fullscreen.
   ========================================================= */
html.sportiva-mobile-landscape-fullscreen,
html.sportiva-mobile-landscape-fullscreen body {
  overflow: hidden !important;
  background: #000 !important;
}

html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen {
  background: #000 !important;
}

@media (orientation: portrait) and (max-width: 920px) {
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen > #promoFrameLayer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen > #promoFrameLayer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen > #promoFrameLayer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen > .promo-frame-layer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen > .promo-frame-layer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen > .promo-frame-layer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen > .watch-player-container {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100vh !important;
    width: 100dvh !important;
    height: 100vw !important;
    min-width: 100vh !important;
    min-width: 100dvh !important;
    min-height: 100vw !important;
    max-width: none !important;
    max-height: none !important;
    transform: translate(-50%, -50%) rotate(90deg) !important;
    transform-origin: center center !important;
    border-radius: 0 !important;
  }

  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen .player-controls,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen .player-controls,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen .player-controls {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}

@media (orientation: landscape) and (max-width: 920px) {
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen > #promoFrameLayer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen > #promoFrameLayer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen > #promoFrameLayer,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen > .featured-player,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:fullscreen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen:-webkit-full-screen > .watch-player-container,
  html body .promo-frame-safe-stage.sportiva-force-landscape-fullscreen.sportiva-pseudo-fullscreen > .watch-player-container {
    transform: none !important;
  }
}