/* Estilos que só existem no webplayer — carregado DEPOIS do style.css (cópia
   byte a byte do app Windows), pelo mesmo motivo do web-ui.js: quanto menos o
   style.css divergir, mais fácil comparar as plataformas. */

/* ---------- Home: posições proporcionais à altura da tela ----------
   O web-ui.js deixa tudo 15% menor, o que aumenta a altura de design do
   canvas (720 -> 720/0.85). As telas de TV ao vivo/Filmes/Séries acompanham
   sozinhas (colunas em % e altura var(--tv-h)), mas a Home tem medidas fixas:
   o banner era min(560px, ...) e parava em 560, então passou a ocupar menos
   da tela — "Escolha seu Streaming" subia e "Novos Filmes" aparecia
   (reportado: "perdemos a posição dos itens").

   Aqui as duas medidas viram fração da altura, com os números do desenho
   original em 720: banner 560/720 da tela e "Novos Filmes" começando em
   729/720 (logo abaixo da borda). Em 720 dá exatamente o de antes; acima
   disso tudo fica no mesmo lugar e só o conteúdo encolhe. */
#dynamic-hero-banner {
    height: calc(var(--tv-h) * 0.7778);
}

/* O conteúdo da seção (título + cards) continua 169px; a folga embaixo é que
   cresce, pra "Novos Filmes" continuar começando fora da primeira tela. */
#home-streaming-section {
    min-height: calc(var(--tv-h) * 0.2347);
}

/* ---------- Cards de streaming um pouco maiores ----------
   Pedido depois da redução geral de 15%: "os ícones dos streaming pode
   aumentar um pouco". +15% em cima dos 176x99 do style.css, mesma proporção
   16:9 das artes. Cabe na seção sem empurrar "Novos Filmes" pra dentro da
   primeira tela: o conteúdo vai a ~184px e o min-height acima reserva
   --tv-h * 0.2347 (~199px com a redução). */
.streaming-row .streaming-logo-card {
    width: 202px;
    height: 114px;
}

/* Cards mais próximos (pedido): o espaço somava 34px — gap de 20px do
   .streaming-row mais o margin-left de 14px do .home-row > * + *. Só o gap
   diminui, o margin fica: 6 + 14 = 20px entre um card e outro. */
.streaming-row {
    gap: 6px;
}

/* ---------- Risco no rodapé da foto da ficha ----------
   Foto (.sd-hero-backdrop) e degradê (.sd-hero-gradient) terminavam na mesma
   linha. Com a escala fracionada do canvas (zoom do Windows, monitor de
   cliente) essa linha cai no meio de um pixel: os dois pintam só metade dele
   e sobra a cor da foto aparecendo — um risco atravessando a ficha na altura
   do elenco (reportado com print de cliente, e continuou só encurtando).
   Agora são duas travas: a foto acaba bem antes do degradê (dentro da faixa
   em que ele já é #000 sólido, 90%+) e ela mesma some em transparência antes
   da própria borda — não sobra borda de foto nenhuma pra aparecer, em
   qualquer escala. */
#vod-modal-inner .sd-hero-backdrop {
    height: 700px;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 96%);
}
#series-modal-inner .sd-hero-backdrop {
    height: 432px;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 96%);
}

/* ---------- Barra "Voltar" nas telas de TV ao vivo / Filmes / Séries ----------
   Nessas telas a top-nav some (mostrarCategoria esconde) e a única saída era o
   Esc/Voltar do controle — no navegador, com mouse, ninguém adivinha. A barra
   (montada pelo web-ui.js) ocupa a faixa de cima; as colunas descem pra dar
   lugar a ela. */
.live-tv-layout.web-com-voltar {
    position: relative;
    padding-top: 58px;
}

.web-voltar-barra {
    position: absolute;
    top: 14px;
    /* 14px do padding da tela + 8px do padding da coluna de categorias: o
       botão alinha com a borda esquerda dos cards de categoria. */
    left: 22px;
    right: 22px;
    /* .live-tv-layout > * + * dá margin-left:10px a todo filho depois do
       primeiro — inclusive a barra, que deslocava o botão pra fora do
       alinhamento com os cards. */
    margin: 0;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 5;
    pointer-events: none;
}

.web-voltar-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px 0 10px;
    /* Canto de 8px, o mesmo das abas da top-nav (.nav-item) — pílula ficou
       fora do padrão do app (reportado). Cores do .vod-btn.secondary. */
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    outline: none;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.web-voltar-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Hover igual ao resto do app (.nav-item.active:hover, .vod-btn:focus):
   fundo branco com texto preto. */
.web-voltar-btn:hover,
.web-voltar-btn:focus-visible {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.web-voltar-btn:active {
    transform: scale(0.96);
}

.web-voltar-dica {
    color: var(--vf-text-dim);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.web-voltar-dica kbd {
    display: inline-block;
    margin: 0 3px;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--vf-text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Mesma barra na ficha de filme e de série. Ali ela fica por cima da foto de
   fundo, não sobre preto: fundo do botão um pouco mais escuro e a dica em
   branco com sombra curta, senão some numa foto clara. */
.sd-screen > .web-voltar-barra {
    top: 18px;
    left: 24px;
    right: auto;
    z-index: 20;
}

.sd-screen > .web-voltar-barra .web-voltar-btn:not(:hover):not(:focus-visible),
.web-voltar-player .web-voltar-btn:not(:hover):not(:focus-visible) {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.3);
}

.sd-screen > .web-voltar-barra .web-voltar-dica,
.web-voltar-player .web-voltar-dica {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Botões da linha de controles do player (retroceder, play, avançar, ajustar,
   tela cheia): a bola de seleção (:focus do style.css) ficava fora do centro
   do ícone (reportado junto com o botão de tela cheia). Cada um tinha um
   tamanho (ícones de 36px e de 28px), e o play nem era flex — o ícone ficava
   na linha de base. Aqui todos viram o mesmo quadrado de 56px com o ícone no
   centro exato. !important no display/padding porque o index.html põe estilo
   inline (e o play precisa continuar trocando o ícone por style.display). */
#fs-controls-row .fs-control-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    padding: 0 !important;
    line-height: 0;
}
#fs-controls-row .fs-control-btn svg { flex: 0 0 auto; }
/* O desenho das setas duplas não é centrado no próprio viewBox: ◀◀ ocupa
   x 2,5–20 (centro 11,25 de 24) e ▶▶ x 4–21,5 (centro 12,75). ~1px de
   compensação no tamanho de 36px. */
#fs-btn-rewind svg { transform: translateX(1px); }
#fs-btn-forward svg { transform: translateX(-1px); }

/* Logo do filme/série no player: a caixa (150px, estilo inline no
   index.html) ficava em top:260px fixo — acima do meio (reportado: "logo um
   pouco acima, centralizar"). No web a altura do player acompanha a janela
   (--tv-h não é 720), então px fixo só acertaria um tamanho de tela: centro
   por 50% + translate. !important porque o original é style="" inline. */
#fs-ui > div:has(> #fs-logo) {
    top: 50% !important;
    transform: translateY(-50%);
}

/* Players (filme/série e tela cheia da TV ao vivo): canto de cima à
   esquerda, na altura do título centralizado do player de filme. */
.web-voltar-barra.web-voltar-player {
    top: 26px;
    left: 40px;
    right: auto;
    z-index: 20;
}

/* TV ao vivo: só em tela cheia, e só enquanto o mouse mexeu há pouco
   (web-voltar-acesa, timer no web-ui.js). visibility junto com opacity pra
   não sobrar botão invisível clicável por cima do vídeo. */
.live-player-container > .web-voltar-barra {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.live-player-container.fullscreen.web-voltar-acesa > .web-voltar-barra {
    opacity: 1;
    visibility: visible;
}

/* Botão de tela cheia do navegador na TV ao vivo em tela cheia (web-ui.js):
   canto de cima à DIREITA, espelhando a barra Voltar da esquerda — mesma
   altura (36px), canto de 8px e fundo escuro; acende/apaga junto com ela. */
.web-tela-cheia-aovivo {
    position: absolute;
    top: 26px;
    right: 40px;
    z-index: 20;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    outline: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.web-tela-cheia-aovivo svg { display: block; flex: 0 0 auto; }
.live-player-container.fullscreen.web-voltar-acesa > .web-tela-cheia-aovivo {
    opacity: 1;
    visibility: visible;
}
.web-tela-cheia-aovivo:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}
.web-tela-cheia-aovivo:active {
    transform: scale(0.96);
}