/* 1Xtra TV details + dedicated playback layout v1
   Only affects a TV detail (recognized by its Add to My List button) or the
   actual native-only fullscreen player. Does not touch stream requests. */

/* TV channel details: undo oversized desktop detail minimum heights. */
body:not(.video-playback-active):has(#page #videoMyList) #page {
  width: min(1200px, 100%) !important;
  max-width: 1200px !important;
  min-height: 0 !important;
  height: auto !important;
  margin-inline: auto !important;
  padding-bottom: clamp(112px, 12vh, 165px) !important;
  box-sizing: border-box !important;
}
body:not(.video-playback-active):has(#page #videoMyList) #page .page-title {
  max-width: 100% !important;
  margin: 18px 0 14px !important;
}
body:not(.video-playback-active):has(#page #videoMyList) #page .page-title h1 {
  font-size: clamp(22px, 3vw, 34px) !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere;
}
body:not(.video-playback-active):has(#page #videoMyList) #page .flutter-media-detail {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) !important;
  gap: clamp(14px, 2.4vw, 28px) !important;
  align-items: center !important;
  min-height: 0 !important;
  max-width: 100% !important;
  padding: clamp(14px, 2vw, 26px) !important;
  margin: 0 !important;
}
body:not(.video-playback-active):has(#page #videoMyList) #page .detail-image {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 10 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
body:not(.video-playback-active):has(#page #videoMyList) #page .media-detail-copy {min-width:0 !important}
body:not(.video-playback-active):has(#page #videoMyList) #page .media-detail-copy h2 {
  font-size: clamp(22px, 3vw, 34px) !important;
  line-height: 1.16 !important;
  overflow-wrap: anywhere;
  margin: 0 0 12px !important;
}
body:not(.video-playback-active):has(#page #videoMyList) #page .media-detail-actions {
  display:flex !important; gap:10px !important; flex-wrap:wrap !important;
}
body:not(.video-playback-active):has(#page #videoMyList) #page .media-detail-actions .btn {
  min-height: 44px !important; padding: 11px 16px !important;
}
body:not(.video-playback-active):has(#page #videoMyList) #page .tv-guide.broadcast-guide {
  margin: 16px 0 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
}
@media(max-width:700px){
  body:not(.video-playback-active):has(#page #videoMyList) #page {padding: 10px 12px 125px !important}
  body:not(.video-playback-active):has(#page #videoMyList) #page .flutter-media-detail {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 14px !important; padding: 14px !important;
  }
  body:not(.video-playback-active):has(#page #videoMyList) #page .detail-image {
    aspect-ratio: 16/9 !important;
  }
  body:not(.video-playback-active):has(#page #videoMyList) #page .media-detail-actions .btn {flex: 1 1 135px !important}
}

/* Native full-screen player must never share its canvas with app navigation. */
html body.video-playback-active:has(#page .native-only-video-screen) :is(
  #bottomNav, #mxHomeAirplayNavV14, #mxPhoneNavUnified,
  #mxNavRescue, #mxRemainingFlutterWorkspace, #mxFlutterMarketTabs,
  .mx-rescue-service-nav, .mx-flutter-market-tabs,
  .mx-home-quicknav, nav[aria-label="Magic 1Xtra main navigation"],
  nav[aria-label="Flutter service navigation"],
  [role="tablist"].service-bottom-nav
) {
  display:none !important; visibility:hidden !important;
  opacity:0 !important; pointer-events:none !important;
}
html body.video-playback-active:has(#page .native-only-video-screen) :is(#app,#page) {
  position:fixed !important; inset:0 !important; width:100vw !important;
  height:100dvh !important; max-width:none !important;
  padding:0 !important; margin:0 !important; overflow:hidden !important;
}
html body.video-playback-active:has(#page .native-only-video-screen) #page .native-only-video-screen {
  position:fixed !important; inset:0 !important;
  width:100vw !important; height:100dvh !important;
  margin:0 !important; padding:0 !important;
  z-index:1000 !important; background:#000 !important;
}
html body.video-playback-active:has(#page .native-only-video-screen) #page .native-only-video-screen video {
  object-fit:contain !important; width:100% !important; height:100% !important;
}