/*
 * Smart TV: modo "tela de 3 metros" (html.tv-mode) e reforços de
 * compatibilidade pra navegador antigo (html.no-flexgap). Os dois são
 * ligados pelo script inline do layout.blade.php.
 *
 * CSS "à moda antiga" de propósito (sem inset, gap, :is, :where, var em
 * cor) -- este arquivo precisa funcionar exatamente nas TVs velhas.
 */

/* ── Tamanho de leitura: tudo que é em rem cresce junto ─────────────── */
html.tv-mode {
    font-size: 17px;
}

@media (min-width: 1600px) {
    html.tv-mode {
        font-size: 20px;
    }
}

/* ── Foco bem visível: é o "cursor" de quem usa controle remoto ─────── */
html.tv-mode a:focus,
html.tv-mode button:focus,
html.tv-mode input:focus,
html.tv-mode select:focus,
html.tv-mode textarea:focus,
html.tv-mode [tabindex]:focus {
    outline: 4px solid #facc15 !important;
    /* Desenhado por dentro: carrossel com overflow escondido não corta. */
    outline-offset: -4px !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6), 0 0 18px rgba(250, 204, 21, 0.55);
}

/* Cartaz (filme/série/canal): a imagem cobre o outline do link, então a
   moldura vem de um ::after por cima de tudo. */
html.tv-mode .movie-item,
html.tv-mode a.group {
    position: relative;
    -webkit-transition: -webkit-transform 0.15s ease-out;
    transition: transform 0.15s ease-out;
}

html.tv-mode .movie-item:focus,
html.tv-mode a.group:focus {
    outline: none !important;
    box-shadow: none;
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
    z-index: 5;
}

html.tv-mode .movie-item:focus::after,
html.tv-mode a.group:focus::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border: 4px solid #facc15;
    border-radius: 12px;
    box-shadow: 0 0 18px rgba(250, 204, 21, 0.55);
    pointer-events: none;
    z-index: 10;
}

/* Efeitos de hover (group-hover) também no item com foco. */
html.tv-mode a:focus .group-hover\:scale-105 {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

html.tv-mode .menu-item a:focus,
html.tv-mode .category-item a:focus {
    background-color: rgba(250, 204, 21, 0.18);
}

/* Barras de rolagem não servem pra nada no controle remoto. */
html.tv-mode ::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Sem mouse na TV: some o que só faz sentido com toque/mouse. */
html.tv-mode #mobile-sidebar-toggle,
html.tv-mode #mobile-cat-toggle,
html.tv-mode #prevBtnMovie,
html.tv-mode #nextBtnMovie,
html.tv-mode #prevBtnSerie,
html.tv-mode #nextBtnSerie,
html.tv-mode #pwa-assistant,
html.tv-mode #pwa-assistant-panel {
    display: none !important;
}

/* Controles do player maiores. */
html.tv-mode .plyr {
    font-size: 18px;
}

html.tv-mode .plyr__control {
    padding: 12px;
}

html.tv-mode .plyr__control svg {
    width: 24px;
    height: 24px;
}

/* ── Sem "gap" em flexbox (Chromium < 84, TVs até ~2021) ───────────── */
/* Margem entre os filhos no lugar do gap, pras classes que o site usa. */
html.no-flexgap .flex.gap-1 > * + * { margin-left: 0.25rem; }
html.no-flexgap .flex.gap-2 > * + * { margin-left: 0.5rem; }
html.no-flexgap .flex.gap-3 > * + * { margin-left: 0.75rem; }
html.no-flexgap .flex.gap-4 > * + * { margin-left: 1rem; }
html.no-flexgap .flex.gap-6 > * + * { margin-left: 1.5rem; }
html.no-flexgap .flex.flex-col.gap-1 > * + * { margin-left: 0; margin-top: 0.25rem; }
html.no-flexgap .flex.flex-col.gap-2 > * + * { margin-left: 0; margin-top: 0.5rem; }
html.no-flexgap .flex.flex-col.gap-3 > * + * { margin-left: 0; margin-top: 0.75rem; }
html.no-flexgap .flex.flex-col.gap-4 > * + * { margin-left: 0; margin-top: 1rem; }
html.no-flexgap .flex.flex-col.gap-6 > * + * { margin-left: 0; margin-top: 1.5rem; }
html.no-flexgap .flex.flex-wrap.gap-2 > * { margin-bottom: 0.5rem; }
html.no-flexgap .flex.flex-wrap.gap-4 > * { margin-bottom: 1rem; }

/* ── Player sem aspect-ratio (Chromium < 88) ───────────────────────── */
html.no-aspect-ratio video[data-aspect-video] {
    height: 56.25vw;
    max-height: 80vh;
}