/* Navegacao por controle remoto (LG webOS e modo de teste ?tv=1). */
html.gt-tv,
html.gt-tv body,
html.gt-tv body * {
  cursor: none !important;
}

html.gt-tv .gt-tv-focus {
  outline: 4px solid var(--red-2, #ff5266) !important;
  outline-offset: 4px !important;
  border-radius: 7px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .72), 0 0 24px rgba(235, 42, 65, .55) !important;
  position: relative;
  z-index: 8;
}

html.gt-tv .gx-card.gt-tv-focus,
html.gt-tv .cat-card.gt-tv-focus,
html.gt-tv .tvx-item.gt-tv-focus {
  transform: none !important;
}

html.gt-tv .gt-tv-focus:focus {
  outline: 4px solid var(--red-2, #ff5266) !important;
  outline-offset: 4px !important;
}

/* Nos campos embutidos em uma caixa, desenha o foco por dentro para que o
 * contorno nao seja recortado pelo cabecalho fixo ou pelo label externo. */
html.gt-tv .cx-search input.gt-tv-focus,
html.gt-tv .ah-search input.gt-tv-focus {
  outline: 3px solid var(--red-2, #ff5266) !important;
  outline-offset: -3px !important;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
}

/* A lista de episodios tem overflow para rolar. Um contorno externo era
 * recortado nas bordas da lista; o anel interno permanece inteiro. */
html.gt-tv .gmodal__ep.gt-tv-focus,
html.gt-tv .gmodal__ep.gt-tv-focus:focus {
  outline: 0 !important;
  outline-offset: 0 !important;
  border-color: var(--red-2, #ff5266) !important;
  box-shadow: inset 0 0 0 3px var(--red-2, #ff5266),
              0 0 16px rgba(235, 42, 65, .38) !important;
}

/* Os players escondem os controles por inatividade. Na TV, foco ativo os mantem visiveis. */
html.gt-tv .gmp:focus-within .gmp__top,
html.gt-tv .gmp:focus-within .gmp__bar,
html.gt-tv .gp:focus-within .gp__ctrl,
html.gt-tv .gp:focus-within .gp__title {
  opacity: 1 !important;
  pointer-events: auto;
}

/* Reproducao ociosa: tela limpa, sem foco ou informacoes sobre o filme. */
html.gt-tv .gmp.gt-tv-idle .gmp__top,
html.gt-tv .gmp.gt-tv-idle .gmp__bar,
html.gt-tv .gp.gt-tv-idle .gp__ctrl,
html.gt-tv .gp.gt-tv-idle .gp__title {
  opacity: 0 !important;
  pointer-events: none !important;
}

html.gt-tv .gp__vol.gt-tv-vol-active {
  outline: 4px solid #fff !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .72), 0 0 24px rgba(255, 255, 255, .5) !important;
}

html.gt-tv .gmp__b.gt-tv-focus,
html.gt-tv .gmp__back.gt-tv-focus,
html.gt-tv .gp__btn.gt-tv-focus,
html.gt-tv .gp__speed.gt-tv-focus {
  background: var(--red, #eb2a41) !important;
  color: #fff !important;
}

/* O foco nao pode trocar botoes de fechar absolutos para position:relative. */
html.gt-tv .gmodal__x.gt-tv-focus {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
}

html.gt-tv #gmpErrX.gt-tv-focus,
html.gt-tv #gpErroX.gt-tv-focus {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  left: auto !important;
}

html.gt-tv [data-tv-seek].gt-tv-focus {
  height: 12px;
  outline: 3px solid #fff !important;
  outline-offset: 5px !important;
}

html.gt-tv [data-tv-seek].gt-tv-focus .gmp__dot,
html.gt-tv [data-tv-seek].gt-tv-focus .gp__dot {
  width: 19px;
  height: 19px;
}

html.gt-tv .brand.gt-tv-focus {
  background: rgba(255,255,255,.12);
  padding: 6px 10px;
}

html.gt-tv .hc__nav {
  opacity: 1;
}

html.gt-tv .hc__dot.gt-tv-focus {
  width: 24px;
  background: #fff;
}

html.gt-tv {
  scroll-behavior: auto !important;
}

/* Menos composicao e animacao nos processadores mais lentos das TVs. */
html.gt-tv .gx-rail {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
  /* Reserva espaco para o contorno externo do card nao ser recortado. */
  padding-top: 18px;
  padding-bottom: 22px;
}

/* Grades de catalogo adaptadas a distancia de visualizacao da TV.
 * As propriedades grid-*-gap mantem compatibilidade com webOS antigo. */
html.gt-tv .cx-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  column-gap: 20px;
  row-gap: 28px;
  grid-column-gap: 20px;
  grid-row-gap: 28px;
  padding-left: 40px;
  padding-right: 40px;
}

/* Na busca da home, colunas fixas impedem que poucos resultados estiquem e
 * fiquem colados. O restante da largura vira respiro livre no fim da linha. */
html.gt-tv .ah-live__grid {
  grid-template-columns: repeat(auto-fill, 170px);
  justify-content: start;
  column-gap: 28px;
  row-gap: 36px;
  grid-column-gap: 28px;
  grid-row-gap: 36px;
}

html.gt-tv .ah-live .gx-card {
  width: 100%;
  min-width: 0;
}

/* Ao vivo: cabecalho/filtros ficam fixos e somente os canais rolam. */
html.gt-tv .tvx-panel-head {
  flex: 0 0 auto;
  background: #0c0e14;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  z-index: 3;
}

html.gt-tv .tvx-pills {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto !important;
  scrollbar-width: none;
}

html.gt-tv .tvx-pills::-webkit-scrollbar {
  display: none;
}

html.gt-tv .tvx-list {
  scroll-behavior: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
html.gt-tv .tvx-list::-webkit-scrollbar {
  display: none;
}

#tvxSpacerTop, #tvxSpacerBot {
  pointer-events: none;
  flex: 0 0 auto;
}

/* O brilho animado do foco força recomposição de tela em algumas LG. */
html.gt-tv .tvx-item.gt-tv-focus,
html.gt-tv .tvx-pill.gt-tv-focus,
html.gt-tv .tvx-srch .gt-tv-focus,
html.gt-tv .tvx-top .gt-tv-focus {
  box-shadow: none !important;
}

/*
 * Nao use content-visibility/contain aqui. Alguns webOS recompõem a camada
 * de video como um retangulo preto quando esses cards entram e saem da tela.
 */

/* height:100% conflita com flex:1 no Chromium do webOS: o player
 * ocupa 100% do stage e empurra o tvx-stage__info pra fora.
 * Com height:auto, flex:1 controla o tamanho e respeita os irmaos. */
html.gt-tv .tvx-player-wrap {
  height: auto;
  flex: 1 1 0%;
  min-height: 0;
}
html.gt-tv .tvx-player-wrap .gp {
  height: auto;
  flex: 1 1 0%;
  min-height: 0;
  overflow: visible;
}
html.gt-tv .tvx-stage__info {
  flex: 0 0 auto;
  min-height: 60px;
}

/* Reduz camadas de clipping sobre o <video> para evitar que o compositor
 * do webOS renderize um retangulo preto no lugar do quadro de video.
 * O grid pai .tvx ja tem overflow:hidden, entao nada escapa da tela. */
html.gt-tv .tvx-stage {
  overflow: visible;
}

/* NÃO aplique transform no <video> — desabilita o decodificador por hardware
 * do webOS, causando tela preta. Fullscreen funciona porque usa overlay nativo.
 * Em vez disso, promova o container e deixe o video sem propriedades extra. */
html.gt-tv .tvx-player-wrap {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* No player ao vivo, overlays ocultos saem da composicao em vez de usar
 * opacity. Isso mantem a camada de video estavel no compositor do webOS. */
html.gt-tv .tvx-player-wrap .gp__ctrl,
html.gt-tv .tvx-player-wrap .gp__title {
  transition: none !important;
}

html.gt-tv .tvx-player-wrap .gp:not(.show) .gp__ctrl,
html.gt-tv .tvx-player-wrap .gp:not(.show) .gp__title,
html.gt-tv .tvx-player-wrap .gp.gt-tv-idle .gp__ctrl,
html.gt-tv .tvx-player-wrap .gp.gt-tv-idle .gp__title {
  display: none !important;
}

html.gt-tv .tvx-player-wrap .gp.show .gp__ctrl,
html.gt-tv .tvx-player-wrap .gp:focus-within .gp__ctrl {
  display: block !important;
  opacity: 1 !important;
}

html.gt-tv .tvx-player-wrap .gp.show .gp__title,
html.gt-tv .tvx-player-wrap .gp:focus-within .gp__title {
  display: block !important;
  opacity: 1 !important;
}

/* A fileira de destino precisa ter geometria real para a navegacao espacial. */
html.gt-tv .gx-row.gt-tv-row-active {
  content-visibility: visible !important;
}

html.gt-tv .gx-card,
html.gt-tv .cat-card,
html.gt-tv .cx-card,
html.gt-tv .tvx-item,
html.gt-tv .gx-ch,
html.gt-tv .gx-rank {
  transition: none !important;
}

html.gt-tv .gx-card:hover,
html.gt-tv .cat-card:hover,
html.gt-tv .cx-card:hover,
html.gt-tv .gx-ch:hover,
html.gt-tv .gx-topitem:hover .gx-rank {
  transform: none !important;
}

/* Blur fixo durante rolagem costuma engasgar o compositor do webOS. */
html.gt-tv .top,
html.gt-tv .ah-nav,
html.gt-tv .cx-nav,
html.gt-tv .tvx-top,
html.gt-tv .btmnav {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.gt-tv { scroll-behavior: auto; }
  html.gt-tv .gx-card.gt-tv-focus,
  html.gt-tv .cat-card.gt-tv-focus,
  html.gt-tv .tvx-item.gt-tv-focus { transform: none; }
}

/* TV: remove visible delimiter borders for cleaner fullscreen look */
html.gt-tv .tvx-aside {
  border-right-color: transparent;
}
html.gt-tv .tvx-stage__info {
  border-top-color: rgba(255,255,255,.04);
}
html.gt-tv .tvx-top {
  border-bottom-color: rgba(255,255,255,.03);
}
html.gt-tv .ah-nav {
  border-bottom-color: rgba(255,255,255,.03);
}
html.gt-tv .gp-wrap {
  max-width: none;
  padding: 18px clamp(28px,4vw,56px);
}
html.gt-tv .gp {
  border-radius: 0;
  max-height: none;
}

/* Margem de segurança (overscan) para TVs.
   TVs cortam 2-5% das bordas — adicionamos padding extra para
   garantir que nenhum conteúdo seja cortado. */
html.gt-tv .ah-nav__in,
html.gt-tv .tvx-top__in {
  padding-left: max(env(safe-area-inset-left, 0px), 48px);
  padding-right: max(env(safe-area-inset-right, 0px), 48px);
}

html.gt-tv .gx-row {
  padding-left: max(env(safe-area-inset-left, 0px), 48px);
  padding-right: max(env(safe-area-inset-right, 0px), 48px);
}

html.gt-tv .hc__in,
html.gt-tv .ah-hero__in {
  padding-left: max(env(safe-area-inset-left, 0px), 48px);
  padding-right: max(env(safe-area-inset-right, 0px), 48px);
}

html.gt-tv .tvx {
  height: calc(100vh - 58px);
  height: calc(100dvh - 58px);
}

/* Sidebar mais larga na TV para facilitar navegação com controle remoto */
@media (min-width: 1200px) {
  html.gt-tv .cx-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    column-gap: 24px;
    row-gap: 30px;
    grid-column-gap: 24px;
    grid-row-gap: 30px;
    padding-left: 48px;
    padding-right: 48px;
  }
  html.gt-tv .ah-live__grid {
    grid-template-columns: repeat(auto-fill, 180px);
    column-gap: 30px;
    row-gap: 38px;
    grid-column-gap: 30px;
    grid-row-gap: 38px;
  }
  html.gt-tv .tvx {
    grid-template-columns: 420px 1fr;
  }
  html.gt-tv .tvx-item {
    padding: 12px 16px;
    gap: 16px;
    min-height: 68px;
  }
  html.gt-tv .tvx-logo {
    width: 54px;
    height: 54px;
  }
  html.gt-tv .tvx-nm {
    font-size: 1rem;
  }
  html.gt-tv .tvx-sub {
    font-size: .8rem;
  }
  html.gt-tv .tvx-num {
    font-size: .84rem;
    width: 28px;
  }
  html.gt-tv .gx-card {
    width: 200px;
  }
  html.gt-tv .gx-topitem .gx-card {
    width: 190px;
  }
}

@media (min-width: 1600px) {
  html.gt-tv .cx-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    column-gap: 28px;
    row-gap: 34px;
    grid-column-gap: 28px;
    grid-row-gap: 34px;
    padding-left: 64px;
    padding-right: 64px;
  }
  html.gt-tv .ah-live__grid {
    grid-template-columns: repeat(auto-fill, 200px);
    column-gap: 34px;
    row-gap: 42px;
    grid-column-gap: 34px;
    grid-row-gap: 42px;
  }
  html.gt-tv .tvx {
    grid-template-columns: 460px 1fr;
  }
  html.gt-tv .tvx-item {
    padding: 13px 18px;
    min-height: 74px;
  }
  html.gt-tv .tvx-logo {
    width: 58px;
    height: 58px;
  }
  html.gt-tv .tvx-nm {
    font-size: 1.06rem;
  }
  html.gt-tv .gx-card {
    width: 220px;
  }
  html.gt-tv .gx-topitem .gx-card {
    width: 210px;
  }
  html.gt-tv .gx-rail {
    gap: 20px;
  }
  html.gt-tv .ah-nav__in,
  html.gt-tv .tvx-top__in {
    padding-left: 64px;
    padding-right: 64px;
  }
  html.gt-tv .gx-row {
    padding-left: 64px;
    padding-right: 64px;
  }
  html.gt-tv .hc__in,
  html.gt-tv .ah-hero__in {
    padding-left: 64px;
    padding-right: 64px;
  }
}

@media (min-width: 1920px) {
  html.gt-tv .cx-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    column-gap: 30px;
    row-gap: 36px;
    grid-column-gap: 30px;
    grid-row-gap: 36px;
    padding-left: 80px;
    padding-right: 80px;
  }
  html.gt-tv .ah-live__grid {
    grid-template-columns: repeat(auto-fill, 210px);
    column-gap: 36px;
    row-gap: 46px;
    grid-column-gap: 36px;
    grid-row-gap: 46px;
  }
  html.gt-tv .tvx {
    grid-template-columns: 500px 1fr;
  }
  html.gt-tv .tvx-item {
    padding: 14px 20px;
    min-height: 78px;
  }
  html.gt-tv .tvx-logo {
    width: 62px;
    height: 62px;
  }
  html.gt-tv .tvx-nm {
    font-size: 1.1rem;
  }
  html.gt-tv .tvx-sub {
    font-size: .84rem;
  }
  html.gt-tv .tvx-pill {
    padding: 10px 20px;
    font-size: .9rem;
  }
  html.gt-tv .gx-card {
    width: 240px;
  }
  html.gt-tv .gx-topitem .gx-card {
    width: 230px;
  }
  html.gt-tv .gx-rail {
    gap: 22px;
  }
  html.gt-tv .ah-nav__in,
  html.gt-tv .tvx-top__in {
    padding-left: 80px;
    padding-right: 80px;
  }
  html.gt-tv .gx-row {
    padding-left: 80px;
    padding-right: 80px;
  }
  html.gt-tv .hc__in,
  html.gt-tv .ah-hero__in {
    padding-left: 80px;
    padding-right: 80px;
  }
  html.gt-tv .hc {
    min-height: clamp(440px, 56vh, 640px);
  }
  html.gt-tv .hc h1 {
    font-size: clamp(2.6rem, 5vw, 4.4rem);
  }
}