/* ============================================================
   CONTROLE-TV.CSS - ESTILOS VISUAIS PARA SMART TV E CONTROLE REMOTO
   Jonhflix / JonhTV - Foco espacial para Sofá (D-Pad)
   ============================================================ */

/* Quando a navegação por controle remoto estiver ativa */
.modo-tv-ativo :focus {
  outline: none !important;
}

/* O elemento atualmente selecionado no controle remoto */
.tv-focused {
  outline: none !important;
  position: relative;
  z-index: 99 !important;
  transform: scale(1.06) !important;
  box-shadow: 0 0 0 3px var(--accent, #e50914), 0 8px 30px rgba(0, 0, 0, 0.9) !important;
  transition: transform 0.16s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.16s cubic-bezier(0.2, 0, 0, 1) !important;
  border-radius: var(--radius, 8px);
}

/* Foco em botões */
button.tv-focused,
.btn-ver-tudo.tv-focused,
.btn-guia-epg.tv-focused,
.series-back-btn.tv-focused,
.btn-back-grid.tv-focused {
  background: var(--accent, #e50914) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px #ffffff, 0 4px 20px rgba(229, 9, 20, 0.6) !important;
  transform: scale(1.08) !important;
}

/* Foco nos cards de canais do JonhTV */
.tv-card.tv-focused,
.channel-card.tv-focused {
  box-shadow: 0 0 0 3.5px #00a8ff, 0 10px 30px rgba(0, 168, 255, 0.4) !important;
}

/* Foco nos episódios da lista de séries */
.episode-item.tv-focused {
  background: var(--surface-2, #262630) !important;
  border-left: 5px solid var(--accent, #e50914) !important;
  transform: scale(1.02) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important;
}

/* Foco nos chips de gênero e botões de filtro */
.chip-genero.tv-focused {
  border-color: #00a8ff !important;
  box-shadow: 0 0 0 3px #00a8ff, 0 4px 14px rgba(0, 168, 255, 0.5) !important;
  transform: scale(1.08) !important;
  background: var(--surface-2, #1c1c22) !important;
  color: #fff !important;
  z-index: 10;
}
.chip-genero.selected.tv-focused {
  border-color: #fff !important;
  box-shadow: 0 0 0 3px #ffffff, 0 4px 16px rgba(230, 57, 90, 0.7) !important;
}
.btn-filtro-genero.tv-focused,
.btn-limpar-filtros.tv-focused {
  box-shadow: 0 0 0 3px #00a8ff, 0 4px 14px rgba(0, 168, 255, 0.5) !important;
  transform: scale(1.05) !important;
}

/* Foco nos botões do modal de filme (estilo Netflix) */
.btn-play-movie.tv-focused {
  box-shadow: 0 0 0 3.5px #ffffff, 0 4px 20px rgba(230, 57, 90, 0.8) !important;
  transform: scale(1.06) !important;
}
.btn-restart-movie.tv-focused {
  border-color: #00a8ff !important;
  box-shadow: 0 0 0 3px #00a8ff, 0 4px 14px rgba(0, 168, 255, 0.6) !important;
  transform: scale(1.06) !important;
}
.movie-detail-close.tv-focused {
  box-shadow: 0 0 0 3px #ffffff, 0 4px 16px rgba(230, 57, 90, 0.8) !important;
  transform: scale(1.15) !important;
  background: #e6395a !important;
}

/* Foco nos campos de busca / inputs */
input.tv-focused,
select.tv-focused {
  border-color: var(--accent, #e50914) !important;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.5), 0 4px 15px rgba(0, 0, 0, 0.8) !important;
  transform: scale(1.02) !important;
}

/* ============================================================
   BARRA DE ABAS INFERIOR (BOTTOMNAV) NO MODO TV
   ============================================================ */
/* Oculta/recolhe a barra inferior durante a navegação nos cards para não atrapalhar a visão nem roubar foco */
.modo-tv-ativo .bottomnav {
  transform: translate(-50%, calc(100% + 40px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: transform 0.28s cubic-bezier(0.2, 0, 0, 1), opacity 0.25s ease !important;
}

/* Quando ativado (via botão Voltar/Escape, tecla M/Menu, ou ao subir do topo) */
.modo-tv-ativo .bottomnav.tv-menu-visivel,
.modo-tv-ativo .bottomnav:focus-within {
  transform: translate(-50%, 0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Foco nos botões de abas da barra inferior (bottomNav) */
.bn-item.tv-focused,
.nav-item.tv-focused {
  background: var(--accent, #e50914) !important;
  color: #ffffff !important;
  transform: scale(1.12) !important;
  box-shadow: 0 0 0 2.5px #ffffff, 0 6px 20px rgba(229, 9, 20, 0.6) !important;
  border-radius: 12px !important;
}
.bn-item.tv-focused svg,
.nav-item.tv-focused svg {
  stroke: #ffffff !important;
  fill: #ffffff !important;
}

/* ============================================================
   CABEÇALHO E FILTROS DO JONHTV (#tvView)
   ============================================================ */
.btn-back-grid.tv-focused {
  background: var(--accent, #e50914) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px #ffffff, 0 4px 20px rgba(229, 9, 20, 0.6) !important;
  transform: scale(1.15) !important;
  z-index: 100 !important;
}
.btn-back-grid.tv-focused svg {
  stroke: #ffffff !important;
}

.btn-guia-epg.tv-focused {
  background: #00a8ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px #ffffff, 0 4px 20px rgba(0, 168, 255, 0.6) !important;
  transform: scale(1.08) !important;
  z-index: 100 !important;
}

#busca-tv.tv-focused {
  background: var(--surface-2, #262630) !important;
  border-color: #00a8ff !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.6), 0 6px 20px rgba(0, 0, 0, 0.8) !important;
  transform: scale(1.02) !important;
}

#filtro-categoria-tv.tv-focused {
  background: var(--surface-2, #262630) !important;
  border-color: #00a8ff !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.6), 0 6px 20px rgba(0, 0, 0, 0.8) !important;
  transform: scale(1.04) !important;
}

#search-input.tv-focused {
  border: 1px solid var(--accent, #e50914) !important;
  box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.5), 0 4px 15px rgba(0, 0, 0, 0.8) !important;
  transform: scale(1.02) !important;
}

/* ============================================================
   FOCO NO GUIA DE PROGRAMAÇÃO (EPG)
   ============================================================ */

/* Coluna do Canal (Esquerda sticky) */
.epg-channel-col.tv-focused {
  background: #1e2236 !important;
  border-right: 3px solid #00a8ff !important;
  box-shadow: inset 0 0 0 2.5px #00a8ff, 0 4px 20px rgba(0, 168, 255, 0.5) !important;
  transform: scale(1.03) !important;
  z-index: 100 !important;
}

/* Bloco do Programa na Linha do Tempo */
.epg-program-block.tv-focused {
  background: rgba(0, 168, 255, 0.35) !important;
  border-color: #00a8ff !important;
  box-shadow: 0 0 0 2.5px #00a8ff, 0 6px 25px rgba(0, 168, 255, 0.6) !important;
  transform: scale(1.05) !important;
  z-index: 90 !important;
}

/* Programa que está No Ar ao Vivo */
.epg-program-block.no-ar.tv-focused {
  background: rgba(255, 65, 108, 0.38) !important;
  border-color: #ff416c !important;
  box-shadow: 0 0 0 2.5px #ff416c, 0 6px 25px rgba(255, 65, 108, 0.7) !important;
}

/* Botões do Topo do Guia */
.epg-btn-agora.tv-focused,
.epg-btn-watch.tv-focused {
  background: #00a8ff !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px #ffffff, 0 4px 20px rgba(0, 168, 255, 0.6) !important;
  transform: scale(1.06) !important;
}

.epg-btn-close.tv-focused,
.epg-btn-dismiss.tv-focused {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2.5px #ffffff !important;
  transform: scale(1.06) !important;
}

.epg-search-input.tv-focused {
  border-color: #00a8ff !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.5) !important;
}

/* ============================================================
   AVISO FLUTUANTE (TOAST) DE SAÍDA E CONFIGS DE SCROLL
   ============================================================ */
.tv-toast-saida {
  position: fixed;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1000000;
  background: rgba(20, 20, 26, 0.94);
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tv-toast-saida.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Otimização de rolagem suave e remoção de ponteiro de mouse no modo TV */
html.modo-tv-ativo,
html.modo-tv-ativo body {
  scroll-behavior: smooth;
  user-select: none;
  -webkit-user-select: none;
}

html.modo-tv-ativo,
html.modo-tv-ativo * {
  cursor: none !important;
}