/* ==========================================================================
   1. VARIÁVEIS GLOBAIS E RESET
   ========================================================================== */
:root {
    --bg-dark: #0b0b10;
    --bg-card: #161622;
    --primary: #e50914; /* Vermelho estilo Netflix */
    --primary-hover: #f40612;
    --text-light: #f5f5f1;
    --text-muted: #999999;
    --font-main: 'Poppins', sans-serif;
    --nav-height: 80px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: var(--font-main);
    overflow-x: hidden;
    line-height: 1.6;
}

/* ==========================================================================
   2. HEADER & NAVEGAÇÃO
   ========================================================================== */
/* BARRA DE NAVEGAÇÃO SUPERIOR */
.header-principal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 68px; /* Altura padrão Netflix */
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%), #141414;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    z-index: 1000; /* Garante que fica por cima de tudo */
    box-sizing: border-box;
}

/* LINK QUE ENVOLVE A LOGO */
.logo-link {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
    margin-left: 25px; /* EMPURRA A LOGO UM POUCO PARA A DIREITA */
}

/* A IMAGEM DA LOGO EM SI */
.site-logo {
    height: 130px;                 /* Altura ideal para não estourar o header */
    width: auto;                  /* Mantém a proporção perfeita da largura */
    object-fit: contain;          /* Não deixa a imagem amassar */
    max-width: 150px;             /* Limite de largura para não empurrar o menu */
    display: block;
    image-rendering: -webkit-optimize-contrast; /* Deixa as bordas da logo nítidas */
    transition: transform 0.2s ease-in-out;
}

/* Efeito sutil ao passar o mouse na logo */
.site-logo:hover {
    transform: scale(1.1);
}

nav {
    display: flex;
    gap: 30px;
}

nav a {
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

nav a:hover {
    color: var(--primary);
}

/* =======================================================
   ESTILIZAÇÃO DA BARRA DE PESQUISA ESTILO NETFLIX
   ======================================================= */

/* Estilo do input de busca */
/* CONTAINER DO INPUT + LUPA */
.search-box {
    display: flex;
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    padding: 5px;
    height: 35px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    box-sizing: border-box;
    position: relative;
}

/* QUANDO A BUSCA ESTIVER ATIVA (CLICADA) */
.search-box.ativo {
    background: rgba(0, 0, 0, 0.85);
    border-color: #fff;
    border-radius: 4px;
}

/* BOTÃO DA LUPA */
.search-btn {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    z-index: 2;
}

/* TAMANHO DO ÍCONE DA LUPA */
.icon-lupa {
    width: 22px;
    height: 22px;
}

/* O INPUT DE TEXTO (COMEÇA ZERADO IGUAL NA NETFLIX) */
#search {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    width: 0; /* Começa totalmente fechado */
    padding: 0;
    opacity: 0;
    transition: width 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* QUANDO O INPUT ESTIVER EXPANDIDO */
.search-box.ativo #search {
    width: 220px; /* Largura que ele ganha ao abrir */
    padding-left: 10px;
    padding-right: 10px;
    opacity: 1;
}

#search::placeholder {
    color: #808080;
}

/* ==========================================================================
   3. BANNER PRINCIPAL (HOME) - AUTOMÁTICO COM BARRA DE PROGRESSO
   ========================================================================== */
.banner {
    position: relative;
    height: 80vh;
    min-height: 500px;
    background: url('https://image.tmdb.org/t/p/original/9l16669uYiwv1669SOf96989467.jpg') center/cover no-repeat;
    overflow: hidden; /* Garante que a barra não vaze para fora */
}

.banner .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-dark) 0%, rgba(11, 11, 16, 0.4) 50%, rgba(11, 11, 16, 0.8) 100%),
                linear-gradient(to right, var(--bg-dark) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4%;
}

.categoria {
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

#titulo {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 15px;
    max-width: 700px;
    line-height: 1.1;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

#descricao {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 500px;
    margin-bottom: 30px;
    
    /* LIMITADORES DE SEGURANÇA */
    max-height: 80px;      
    overflow: hidden;      
    text-overflow: ellipsis; 
    display: -webkit-box;
    -webkit-box-orient: vertical;
    
    /* PROPRIEDADES DE CORTE (Ajustado aqui) */
    -webkit-line-clamp: 3; /* Para navegadores baseados em Webkit (Chrome, Edge, Safari) */
    line-clamp: 3;         /* Propriedade padrão para compatibilidade geral */
}

.buttons {
    display: flex;
    gap: 15px;
}

.buttons button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#assistir {
    background-color: var(--primary);
    color: white;
}

#assistir:hover {
    background-color: var(--primary-hover);
    transform: scale(1.05);
}

.secundario {
    background-color: rgba(109, 109, 110, 0.7);
    color: white;
    backdrop-filter: blur(5px);
}

.secundario:hover {
    background-color: rgba(109, 109, 110, 0.9);
}

/* --- BARRA DE PROGRESSO DO BANNER --- */
.banner-progress-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2); /* Fundo cinza transparente */
    z-index: 10;
}

.banner-progress-bar {
    height: 100%;
    width: 0%; /* Começa zerada */
    background-color: #ffffff; /* Barra branca enchendo */
    transition: width 10s linear; /* Faz o preenchimento suave em exatamente 10s */
}

/* ==========================================================================
   4. SEÇÕES DE CONTEÚDO (CATÁLOGO)
   ========================================================================== */

/* Garante que o primeiro catálogo comece bem abaixo do banner e da barra */
#secaoFilmes {
    margin-top: 40px; 
    padding-top: 20px;
}

/* Cria o espaçamento perfeito entre a seção de Filmes e a de Séries */
#secaoSeries {
    margin-top: 5px; /* Empurra as séries para baixo, desgrudando dos filmes */
    padding-top: 20px;
}

/* Regra geral para as seções do catálogo (caso queira unificar) */
.catalogo {
    padding: 0 4%;
    clear: both; /* Evita que elementos flutuantes anteriores esbarrem aqui */
}

.catalogo h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}

.card {
    background-color: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
}

.card h3 {
    font-size: 0.9rem;
    padding: 12px;
    text-align: center;
    font-weight: 500;
    color: var(--text-primary);
    
    /* MODIFICAÇÕES PARA MOSTRAR O TEXTO COMPLETO: */
    white-space: normal;      /* Permite que o texto quebre linhas */
    overflow: visible;        /* Torna o texto escondido visível */
    text-overflow: clip;      /* Remove os "..." */
}

/* ==========================================================================
   5. PÁGINA INTERNA DO FILME (Escondida por padrão)
   ========================================================================== */
.movie-page {
    display: none; /* Só aparece quando o JS ativar */
    padding: 100px 4% 40px;
    min-height: 100vh;
    animation: fadeIn 0.4s ease-in-out;
}

.back-button {
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
    transition: color 0.3s ease;
}

.back-button:hover {
    color: var(--primary);
}

.movie-content {
    max-width: 1100px;
    margin: 0 auto;
}

#movieTitle {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

#movieDescription {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 25px;
    max-width: 800px;
}

.watch-button {
    display: none; /* Caso queira usar um botão antes de abrir o iframe, deixei oculto para já rodar direto */
}

.movie-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
}

.movie-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ==========================================================================
   6. FOOTER & ANIMAÇÕES
   ========================================================================== */
footer {
    text-align: center;
    padding: 30px 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    background-color: #08080c;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   7. RESPONSIVIDADE
   ========================================================================== */
@media (max-width: 768px) {
    nav { display: none; }
    #titulo { font-size: 2.5rem; }
    .search-box input { width: 120px; }
    .search-box input:focus { width: 150px; }
    .cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ==========================================================================
   8. Paginas
   ========================================================================== */

.paginacao-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 40px 0;
    padding: 0 4%;
}

.btn-pagina {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 18px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-pagina:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-pagina.active {
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--primary);
}

/* PÁGINA DE APRESENTAÇÃO ESTILO NETFLIX */
/* MÁSCARA ESCURA DE FUNDO (PERMITE VER O SITE ATRÁS) */
.detalhes-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinha no topo para a rolagem original funcionar de cima para baixo */
    
    /* REATIVA A BARRA DE ROLAGEM ORIGINAL DA TELA */
    overflow-y: auto; 
    padding: 40px 0; /* Cria um espaçamento respirável no topo e na base da popup */
}

/* CAIXA DA POPUP ATUALIZADA COM EFEITO DE EXPANSÃO */
/* CAIXA DA POPUP - ESTILO ORIGINAL NETFLIX */
.detalhes-popup {
    position: relative;
    width: 100%;
    background-color: #181818;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.9);
    
    /* Alterado para 0.8s (mais lento) e com a transição oficial da Netflix */
    animation: abrirEstiloNetflix 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center bottom; /* Faz a animação crescer de baixo para cima */
}

/* ANIMAÇÃO ESTILO NETFLIX (FADE + SUBIDA SUAVE) */
@keyframes abrirEstiloNetflix {
    from {
        opacity: 0;
        /* Começa um pouco menor e deslocada para baixo */
        transform: scale(0.92) translateY(40px);
    }
    to {
        opacity: 1;
        /* Termina no tamanho real e na posição correta */
        transform: scale(1) translateY(0);
    }
}

/* BOTÃO X DE FECHAR COPIADO DA FOTO DA NETFLIX */
.close-modal-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #181818;
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    font-size: 24px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
    transition: background-color 0.2s;
}

.close-modal-btn:hover {
    background-color: #2a2a2a;
}

/* AJUSTES ADAPTADOS DO BANNER DENTRO DA MODAL */
.detalhes-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.detalhes-banner {
    width: 100%;
    min-height: 500px;
    background-size: cover;
    background-position: center top;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.detalhes-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #181818 5%, rgba(24,24,24,0.7) 40%, rgba(24,24,24,0) 80%);
    z-index: 1;
}

.detalhes-conteudo {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 30px;
}

.detalhes-conteudo h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.detalhes-banner {
    width: 100%;
    min-height: 45vh;       /* O banner da foto se adapta ao tamanho da tela */
    background-size: cover;
    background-position: center top;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.detalhes-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(77deg, rgba(20,20,20,1) 30%, rgba(20,20,20,0.8) 50%, rgba(20,20,20,0) 100%),
                linear-gradient(to top, rgba(20,20,20,1) 0%, rgba(20,20,20,0) 20%);
    z-index: 1;
}

.detalhes-conteudo {
    position: relative;
    z-index: 2;
    max-width: 650px;
    padding: 40px 4%;
    margin-bottom: 20px;
}

.detalhes-conteudo h1 {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.detalhes-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.meta-item {
    color: #46d369; /* Verde estilo Netflix para info ou anos */
    font-weight: bold;
}

.meta-badge {
    border: 1px solid rgba(255,255,255,0.4);
    padding: 1px 6px;
    font-size: 0.8rem;
    border-radius: 3px;
    font-weight: bold;
}

.meta-imdb {
    background-color: #e50914;
    color: white;
    padding: 2px 8px;
    font-weight: bold;
    border-radius: 4px;
    font-size: 0.9rem;
}

.detalhes-botoes {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.btn-assistir-netflix {
    background-color: white;
    color: black;
    border: none;
    padding: 12px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease;
}

.btn-assistir-netflix:hover {
    background-color: rgba(255, 255, 255, 0.75);
}

.btn-circular {
    background-color: rgba(43, 43, 43, 0.6);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0.2s, background-color 0.2s;
}

.btn-circular:hover {
    border-color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

.detalhes-sinopse {
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 25px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.detalhes-creditos {
    font-size: 0.95rem;
    color: #bcbcbc;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detalhes-creditos strong {
    color: #808080;
}

/* Ajuste nos botões genéricos de voltar */
.back-btn {
    background: #2b2b2b;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 15px 4%;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
}
.back-btn:hover { background: #444; }

/* ESTILIZAÇÃO DA LOGO EM PNG DO FILME (MÁXIMO DE LARGURA) */
.movie-logo-png {
    display: block;
    max-width: 320px;       /* Limita o tamanho horizontal da logo */
    max-height: 140px;      /* Limita a altura para ficar idêntico ao Toy Story */
    object-fit: contain;    /* Mantém a proporção perfeita do desenho da logo */
    margin-bottom: 15px;    /* Espaço para as informações de baixo */
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.7)); /* Adiciona relevo sutil */
}

/* Ajuste responsivo para telas menores */
@media (max-width: 600px) {
    .movie-logo-png {
        max-width: 200px;
        max-height: 90px;
    }
}

/* DEIXA A POPUP BEM MAIS AMPLA (ESTILO POPUP DA NETFLIX NO PC) */
.detalhes-popup.ampla {
    width: 90vw;
    max-width: 1050px;
    /* Removemos a altura fixa em vh para a caixa esticar naturalmente com o texto */
    height: auto; 
    background-color: #181818;
    border-radius: 12px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.9);
    margin-bottom: 40px;
    
    /* REMOVE A BARRA DE ROLAGEM DO LADO DO MENU */
    overflow: hidden; 
    
    animation: abrirEstiloNetflix 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ÁREA DO TRAILER DE FUNDO */
.trailer-container-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background-color: #000;
}

.trailer-container-background iframe {
    width: 100%;
    height: 100%;
    transform: scale(1.35); /* Amplia levemente para cortar as bordas pretas do YouTube */
    pointer-events: none; /* Impede cliques manuais que pausam o trailer */
}

/* Garante que o banner cresça para dar espaço ao vídeo */
/* AJUSTE PARA EMPURRAR O CONTEÚDO PARA BAIXO DIANTE DO TRAILER */
.detalhes-banner {
    min-height: 620px; /* Aumenta um pouco a altura total do bloco do trailer */
    display: flex;
    align-items: flex-end; /* Garante que os textos e botões comecem colados no rodapé */
}

/* GRADIENTE RETIFICADO - CORREÇÃO DO BUG DE COR */
.detalhes-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Transição suave do transparente no topo direto para o tom exato do fundo (#181818) */
    background: linear-gradient(to top, 
        #181818 0%, 
        rgba(24, 24, 24, 0.9) 30%, 
        rgba(24, 24, 24, 0.4) 70%, 
        transparent 100%
    );
    z-index: 1;
}

.detalhes-conteudo {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 30px;
    padding-top: 120px;     /* Reduzido para encaixar melhor em telas menores */
}

/* DEIXA A LOGO TRANSPARENTE BEM POSICIONADA */
.movie-logo-png {
    margin-bottom: 20px;
}

/* CONTAINER DE GRID DOS NOVOS CARDS HORIZONTAIS */
.container-cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 20px 0;
}

/* CARD DEITADO ESTILO NETFLIX */
.card-horizontal {
    position: relative;
    width: 280px;              /* Largura ideal para caber vários por linha */
    height: 158px;             /* Altura proporcional calculada em 16:9 */
    background-color: #222;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* EFEITO DE ZOOM AO PASSAR O MOUSE (HOVER) */
.card-horizontal:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    z-index: 5;
}

/* IMAGEM DE FUNDO DO CARD */
.card-fundo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CONTAINER DA LOGO CENTRALIZADA */
.card-logo-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 3;
}

/* LOGO TRANSPARENTE DENTRO DO CARD */
.card-logo-png {
    max-width: 85%;
    max-height: 65%;
    object-fit: contain;
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.7));
}

/* TEXTO DE SEGURANÇA (Caso o filme não tenha logo cadastrada no TMDB) */
.card-titulo-fallback {
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    font-family: 'Poppins', sans-serif;
}

/* ESCURECIMENTO SUTIL DO CARD PARA DESTACAR A LOGO */
.card-overlay-sombra {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    z-index: 2;
    transition: background 0.3s;
}

.card-horizontal:hover .card-overlay-sombra {
    background: rgba(0, 0, 0, 0.4); /* Escurece um pouquinho mais no foco */
}

/* GRID VERTICAL CENTRALIZADO PARA AS ABAS EXCLUSIVAS */
/* GRID VERTICAL CENTRALIZADO (APENAS PARA AS ABAS DEDICADAS) */
#containerFilmesAba, 
#containerSeriesAba,
#containerFavoritos,
.container-cards-grid {
    display: flex !important;
    flex-wrap: wrap !important;      
    flex-direction: row !important;
    gap: 25px !important;            
    padding: 20px 4%;
    justify-content: center !important; /* Centraliza apenas aqui */
    width: 100%;
    box-sizing: border-box;
}

/* CARROSSEL DA PÁGINA INICIAL (EVITA QUE ELES FIQUEM UM DENTRO DO OUTRO) */
#containerFilmes,
#containerSeries {
    display: flex !important;
    flex-wrap: nowrap !important;       /* Força a ficar em uma linha só na Home */
    flex-direction: row !important;
    gap: 20px !important;
    overflow-x: auto !important;        /* Permite arrastar/scrollar de lado se houver mais */
    justify-content: flex-start !important; /* Alinhamento correto para a Home */
    padding: 20px 4%;
    width: 100%;
}

/* COMPORTAMENTO PADRÃO DOS CARDS HORIZONTAIS */
.card-horizontal {
    flex: 0 0 280px !important;         /* Impede o card de encolher ou esmagar */
    width: 280px !important;
    height: 158px !important;
    position: relative;
    cursor: pointer;
}

/* CONTAINER BASE DA LOGO (Zera o alinhamento antigo estático) */
.card-logo-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 15px;
    z-index: 3;
    box-sizing: border-box;
}

/* 1. CLASSE ESQUERDA (Ex: Teen Wolf - Personagem na direita, logo na esquerda) */
.card-logo-container.esquerda {
    justify-content: flex-start;
    align-items: center;
}
.card-logo-container.esquerda .card-logo-png {
    max-width: 55%; /* Diminui a largura para não invadir o lado direito */
}

/* 2. CLASSE DIREITA (Ex: The Flash - Personagem na esquerda, logo na direita) */
.card-logo-container.direita {
    justify-content: flex-end;
    align-items: center;
}
.card-logo-container.direita .card-logo-png {
    max-width: 55%;
}

/* 3. CLASSE EMBAIXO / CENTRO (Ex: The Rookie - Várias pessoas, logo centralizada embaixo) */
.card-logo-container.embaixo {
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 12px;
}
.card-logo-container.embaixo .card-logo-png {
    max-width: 80%;
    max-height: 45%;
}

/* 4. PADRÃO CENTRO UNIVERSAL */
.card-logo-container.centro {
    justify-content: center;
    align-items: center;
}

/* Ajuste sutil na sombra da logo para destacar independente do fundo */
.card-logo-png {
    object-fit: contain;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.8)) 
            drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.5));
}

/* =======================================================
   ESTILIZAÇÃO DA ABA DE FAVORITOS (CORREÇÃO DE ALINHAMENTO)
   ======================================================= */

/* Estilo do container geral da aba */
#tela-favoritos {
    padding: 20px 4%;
    padding-top: 120px !important; /* Espaço de segurança para não sumir sob a logo */
    min-height: 80vh;
    box-sizing: border-box;
}

#tela-favoritos h2 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 100%;
}

/* Alinhamento dos cards em formato de Grid Responsivo */
#containerFavoritos {
    display: flex;
    flex-wrap: wrap !important;     /* Força os cards a irem para a linha de baixo */
    flex-direction: row !important;
    gap: 20px !important;           /* Cria o espaçamento perfeito entre cada filme */
    justify-content: flex-start;    /* Alinha o início dos cards à esquerda */
    width: 100%;
    padding: 20px 0;
}

/* Garante que os cards de favoritos mantenham o tamanho correto */
#containerFavoritos .card-horizontal {
    flex: 0 0 auto !important;
    width: 280px !important;        /* Tamanho padrão do catálogo */
    height: 158px !important;
    margin: 0 !important;
}

/* Mensagem de aviso quando não houver favoritos salvos */
.sem-resultados {
    color: #808080;
    font-size: 1.2rem;
    text-align: center;
    width: 100%;
    margin-top: 50px;
}

/* ESCONDE A BARRA DE ROLAGEM NO CHROME, SAFARI E OPERA */
#containerFilmes::-webkit-scrollbar,
#containerSeries::-webkit-scrollbar {
    display: none !important;
}

/* ESCONDE A BARRA DE ROLAGEM NO FIREFOX E IE/EDGE */
#containerFilmes,
#containerSeries {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important;  /* IE/Edge */
}

/* Container do carrossel para controlar a aparição das setas */
.carrossel-wrapper {
    position: relative;
    width: 100%;
}

/* Configuração base da seta (invisível por padrão) */
.seta-carrossel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4%; /* Largura idêntica à margem do site */
    height: 158px; /* Alinhado perfeitamente com a altura do card */
    margin: auto 0;
    background: transparent;
    color: #fff;
    border: none;
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    opacity: 0; /* Esconde a seta inicialmente */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, background 0.3s ease, transform 0.2s ease;
}

/* Mostra as setas quando o usuário passa o mouse por cima de TODO o carrossel */
.carrossel-wrapper:hover .seta-carrossel {
    opacity: 1;
}

/* Seta Esquerda: Gradiente sutil para o lado escuro da tela */
.seta-esquerda {
    left: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.seta-esquerda:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Seta Direita: Gradiente sutil para o lado direito da tela */
.seta-direita {
    right: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.seta-direita:hover {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Efeito de aumentar o tamanho do ícone (Seta) ao passar o mouse direto nela */
.seta-carrossel:hover {
    font-size: 3.2rem; /* Seta fica maior igual na Netflix */
}

/* ============================================================================
   REVISÃO VISUAL DO GERENCIADOR DE PERFIS (PREMIUM STYLE)
   ============================================================================ */

/* Fundo escuro com efeito de desfoque de cinema */
.perfis-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Mudado para preto puro e sólido, sem transparência */
    background: #141414; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* Garante que fique por cima de ABSOLUTAMENTE tudo */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow-y: auto; /* Permite rolar a tela de perfis se necessário, mas isolado */
}

/* Container principal centralizado */
.perfis-container {
    position: absolute;
    top: 0px;
    right: 50px;
    text-align: center;
    animation: fadeInPerfis 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.perfis-container h1 {
    color: #fff;
    font-size: 3.5rem;
    font-weight: 500;
    margin-bottom: 40px;
    letter-spacing: 1px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Lista de Perfis Alinhada */
.perfis-lista {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    margin-bottom: 60px;
}

/* Card de Perfil Individual */
.perfil-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    width: 140px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Moldura do Avatar */
.perfil-avatar {
    width: 130px;
    height: 130px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.perfil-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Nome do Perfil */
.perfil-card span {
    color: #808080;
    font-size: 1.1rem;
    margin-top: 15px;
    transition: color 0.3s ease, font-weight 0.2s;
}

/* EFEITOS DE HOVER (PASSAR O MOUSE) */
.perfil-card:hover {
    transform: translateY(-5px);
}

.perfil-card:hover .perfil-avatar {
    border-color: #fff;
    box-shadow: 0 12px 30px rgba(255,255,255,0.2);
}

.perfil-card:hover .perfil-avatar img {
    transform: scale(1.05);
}

.perfil-card:hover span {
    color: #fff;
}

/* ÍCONE DE LÁPIS NO MODO GERENCIAMENTO */
.perfil-card.modo-edicao .perfil-avatar::after {
    content: "✏️";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.perfil-card.modo-edicao:hover .perfil-avatar::after {
    opacity: 1;
}

/* BOTÃO DE ADICIONAR PERFIL ("+") COERENTE */
.perfil-card-adicionar {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 140px;
    transition: transform 0.3s ease;
}

.avatar-adicionar-icone {
    width: 130px;
    height: 130px;
    border-radius: 8px;
    border: 3px dashed #404040;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #404040;
    background: rgba(255,255,255,0.01);
    transition: all 0.3s ease;
}

.perfil-card-adicionar:hover {
    transform: translateY(-5px);
}

.perfil-card-adicionar:hover .avatar-adicionar-icone {
    border-color: #808080;
    color: #808080;
    background: rgba(255, 255, 255, 0.05);
}

/* BOTÃO PRINCIPAL "GERENCIAR PERFIS" */
.btn-gerenciar {
    background: transparent;
    border: 1px solid #808080;
    color: #808080;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 2px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.btn-gerenciar:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(255,255,255,0.05);
}

/* ANIMAÇÃO DE ENTRADA SUAVE */
@keyframes fadeInPerfis {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* CONTAINER DOS ELEMENTOS DA DIREITA */
.menu-direita-container {
    display: flex;
    align-items: center;
    gap: 20px; /* Espaço entre a barra de pesquisa e a foto */
}

/* ESTILIZAÇÃO DO BOTÃO DA FOTO DE PERFIL */
.perfil-header-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 4px; /* Cantinhos levemente arredondados estilo Netflix */
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.perfil-header-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Efeito ao passar o mouse por cima do avatar */
.perfil-header-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* MODO GERENCIAMENTO: ADICIONA ÍCONE DE LÁPIS POR CIMA */
.perfil-card.modo-edicao .perfil-avatar {
    position: relative;
    filter: brightness(0.6);
}

.perfil-card.modo-edicao .perfil-avatar::after {
    content: "✏️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    z-index: 5;
}

/* CONTAINER DA BOX DE EDIÇÃO */
.editar-perfil-box {
    display: flex;
    background: #1a1a1a; /* Fundo cinza escuro texturizado */
    padding: 40px;
    border-radius: 12px;
    gap: 50px;
    align-items: flex-start;
    max-width: 680px;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid #2a2a2a;
    animation: fadeInPerfis 0.4s ease-out;
}

/* Coluna da Esquerda: Avatar e Uploads */
.avatar-edit-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
    width: 160px;
}

/* Pré-visualização da foto grande */
#edit-avatar-preview, #criar-avatar-preview {
    width: 130px;
    height: 130px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    border: 2px solid #333;
    transition: border-color 0.3s ease;
}

/* Botão de Upload Local Estilizado */
.btn-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaço entre o ícone e o texto */
    background: rgba(229, 9, 20, 0.1); /* Fundo vermelho bem translúcido */
    color: #e50914;
    border: 1px dashed #e50914; /* Borda tracejada estilosa */
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.5px;
}

/* Efeito quando passa o mouse por cima */
.btn-upload-label:hover {
    background: #e50914; /* Preenche com o vermelho sólido */
    color: #fff; /* Texto fica branco */
    border-style: solid; /* A borda deixa de ser tracejada */
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.5); /* Brilho neon suave */
    transform: translateY(-2px); /* Leve levantada */
}

/* Grid de fotos padrão abaixo da principal */
.trocar-foto-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 100%;
    margin-top: 5px;
}

.trocar-foto-grid img {
    width: 100%;
    height: 34px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    object-fit: cover;
    border: 1px solid transparent;
}

.trocar-foto-grid img:hover {
    transform: scale(1.15);
    border-color: #fff;
    box-shadow: 0 4px 10px rgba(255,255,255,0.2);
}

/* Coluna da Direita: Inputs e Botões */
.inputs-edit-wrapper {
    display: flex;
    flex-direction: column;
    gap: 25px;
    flex-grow: 1;
    align-self: center;
}

/* Campo do Nome do Perfil */
#edit-nome-input, #criar-nome-input {
    background: #404040;
    border: 1px solid transparent;
    padding: 14px;
    color: #fff;
    font-size: 1.3rem;
    outline: none;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

#edit-nome-input:focus, #criar-nome-input:focus {
    background: #555;
    border-color: #808080;
    box-shadow: 0 0 10px rgba(255,255,255,0.05);
}

/* Campo do Link do GIF/Imagem */
#edit-link-input, #criar-link-input {
    background: #141414;
    border: 1px solid #333;
    padding: 12px;
    color: #aaa;
    font-size: 0.85rem;
    outline: none;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

#edit-link-input:focus, #criar-link-input:focus {
    border-color: #e50914;
    color: #fff;
}

/* Ações/Botões do Rodapé do Formulário */
.botoes-edicao {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.btn-salvar {
    background: #fff;
    color: #000;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    letter-spacing: 1px;
    transition: background 0.2s ease;
}

.btn-salvar:hover {
    background: #b3b3b3;
}

.btn-cancelar {
    background: transparent;
    color: #808080;
    border: 1px solid #808080;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}

.btn-cancelar:hover {
    color: #fff;
    border-color: #fff;
    background: rgba(255,255,255,0.05);
}

/* BOTÃO DE UPLOAD DE FOTO CUSTOMIZADO */
.btn-upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaço entre o ícone e o texto */
    background: rgba(229, 9, 20, 0.1); /* Fundo vermelho bem translúcido */
    color: #e50914;
    border: 1px dashed #e50914; /* Borda tracejada estilosa */
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: 0.5px;
}

/* Efeito quando passa o mouse por cima */
.btn-upload-label:hover {
    background: #e50914; /* Preenche com o vermelho sólido */
    color: #fff; /* Texto fica branco */
    border-style: solid; /* A borda deixa de ser tracejada */
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.5); /* Brilho neon suave */
    transform: translateY(-2px); /* Leve levantada */
}

/* Efeito opcional de clique (pressionado) */
.btn-upload-label:active {
    transform: translateY(0);
    box-shadow: 0 0 5px rgba(229, 9, 20, 0.8);
}

/* Esconde o input file padrão que é feio */
#upload-foto-computador {
    display: none !important;
}

.label-pequeno {
    color: #808080;
    font-size: 0.8rem;
    margin-top: 5px;
}

/* Novo input de link da web */
#edit-link-input {
    background: #333;
    border: 1px solid #555;
    padding: 10px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

#edit-link-input:focus {
    border-color: #fff;
}

/* CARD DE ADICIONAR NOVO PERFIL */
.perfil-card-adicionar {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 150px;
}

.avatar-adicionar-icone {
    width: 130px;
    height: 130px;
    border-radius: 4px;
    background: transparent;
    border: 3px dashed #808080;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #808080;
    transition: all 0.2s ease;
}

.perfil-card-adicionar:hover .avatar-adicionar-icone {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.perfil-card-adicionar:hover span {
    color: #fff;
}

/* ============================================================================
   CHASSIS DA TELA DE EDIÇÃO DE PERFIS (ESTILO NETFLIX)
   ============================================================================ */

/* Caixa principal que une a foto e os inputs */
.editar-perfil-box {
    display: flex;
    background: #1c1c1c;
    padding: 30px;
    border-radius: 8px;
    gap: 40px;
    align-items: center;
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

/* Coluna da esquerda: Foto e Upload */
.avatar-edit-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

#edit-avatar-preview, #criar-avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 4px;
    object-fit: cover;
}

/* Mini grade de fotos padrão */
.trocar-foto-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.trocar-foto-grid img {
    width: 35px;
    height: 35px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.1s ease;
    object-fit: cover;
}

.trocar-foto-grid img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 5px #fff;
}

/* Botão vermelho de Upload Local */
.btn-upload-label {
    background: #e50914;
    color: #fff;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
    display: inline-block;
}

.btn-upload-label:hover {
    background: #b81d24;
}

.label-pequeno {
    color: #808080;
    font-size: 0.8rem;
    margin-top: 5px;
}

/* Coluna da direita: Inputs de Texto e Links */
.inputs-edit-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

#edit-nome-input, #criar-nome-input {
    background: #666;
    border: none;
    padding: 10px;
    color: #fff;
    font-size: 1.2rem;
    outline: none;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

#edit-link-input, #criar-link-input {
    background: #333;
    border: 1px solid #555;
    padding: 10px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

#edit-link-input:focus, #criar-link-input:focus {
    border-color: #fff;
}

/* Bloco de Botões Salvar/Cancelar */
.botoes-edicao {
    display: flex;
    gap: 15px;
}

.btn-salvar, .btn-cancelar {
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    font-weight: bold;
    border-radius: 4px;
}

.btn-salvar { 
    background: #fff; 
    color: #000; 
}

.btn-salvar:hover { 
    background: #e6e6e6; 
}

.btn-cancelar { 
    background: transparent; 
    color: #808080; 
    border: 1px solid #808080; 
}

.btn-cancelar:hover { 
    color: #fff; 
    border-color: #fff; 
}

/* ============================================================================
   SISTEMA DO BOTÃO EXCLUIR POR APROXIMAÇÃO (GATILHO INVISÍVEL)
   ============================================================================ */

.zona-excluir-gatilho {
    margin-top: 30px;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-excluir-secreto {
    background: transparent;
    color: #e50914;
    border: 1px solid #e50914;
    padding: 10px 24px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 4px;
    opacity: 1; /* Mude temporariamente de 0 para 1 para testar */
    transform: translateY(0); /* Mude de 10px para 0 */
}

/* Detecta quando o mouse chega perto da área abaixo da caixa */
.zona-excluir-gatilho:hover .btn-excluir-secreto {
    opacity: 0.5; 
    transform: translateY(0); 
}

/* Quando o mouse entra diretamente em cima do botão */
.btn-excluir-secreto:hover {
    opacity: 1 !important;
    background: #e50914;
    color: #fff;
}

/* ============================================================================
   CORREÇÃO DE ALINHAMENTO DO HEADER (USANDO MENU-DIREITA-CONTAINER)
   ============================================================================ */

/* Alinha a lupa e a foto de perfil lado a lado na horizontal */
.menu-direita-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Centraliza verticalmente no meio do header */
    gap: 20px !important; /* Força um espaçamento seguro de 20px entre a lupa e a foto */
    position: relative !important;
}

/* Blinda a foto de perfil para ela não sair do lugar nem achatar */
.foto-nav {
    width: 35px !important;
    height: 35px !important;
    border-radius: 4px !important;
    object-fit: cover !important; /* Impede que a foto fique esticada ou distorcida */
    display: block !important;
    transition: transform 0.2s ease;
}

.foto-nav:hover {
    transform: scale(1.05);
}

/* Garante que o container do menu de perfil não use posições absolutas que quebram o alinhamento */
.perfil-menu-container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

/* Evita que a caixa de busca passe por cima da foto de perfil */
.search-box {
    display: flex;
    align-items: center;
    position: relative;
}

/* ============================================================================
   POPUP DE CONFIRMAÇÃO CUSTOMIZADO (PREMIUM)
   ============================================================================ */
.modal-overlay-confirm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px); /* Desfoca o fundo do site atrás do popup */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999; /* Fica acima de tudo, inclusive do gerenciador */
    animation: fadeInModal 0.2s ease-out;
}

.modal-confirm-box {
    background: #181818;
    border: 1px solid #333;
    padding: 35px;
    border-radius: 8px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    animation: scaleUpModal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-confirm-box h2 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.modal-confirm-box p {
    color: #aaa;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 30px;
}

.modal-confirm-botoes {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.modal-confirm-botoes button {
    padding: 12px 25px;
    font-size: 0.95rem;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-confirm-sim {
    background: #e50914;
    color: #fff;
}

.btn-confirm-sim:hover {
    background: #b81d24;
    box-shadow: 0 0 10px rgba(229, 9, 20, 0.4);
}

.btn-confirm-nao {
    background: #333;
    color: #fff;
}

.btn-confirm-nao:hover {
    background: #444;
}

/* Animações de entrada do popup */
@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleUpModal {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ============================================================================
   TELA DE AUTENTICAÇÃO (LOGIN/CADASTRO)
   ============================================================================ */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Fundo oficial da Netflix com degradê escuro para dar contraste no formulário */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('https://files.tecnoblog.net/wp-content/uploads/2019/01/netflix-700x394.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999; /* Garante que cobre absolutamente tudo */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.auth-box {
    background: rgba(0, 0, 0, 0.75);
    padding: 60px;
    border-radius: 8px;
    width: 100%;
    max-width: 450px;
    box-sizing: border-box;
}

.auth-box h2 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 28px;
    font-weight: 500;
}

.input-grupo {
    margin-bottom: 16px;
}

.input-grupo input {
    width: 100%;
    padding: 14px;
    background: #333;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 1rem;
    box-sizing: border-box;
    outline: none;
}

.input-grupo input:focus {
    background: #454545;
}

#btn-auth-principal {
    width: 100%;
    padding: 14px;
    background: #e50914;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 24px;
    transition: background 0.2s;
}

#btn-auth-principal:hover {
    background: #b81d24;
}

.auth-alternar {
    color: #737373;
    margin-top: 30px;
    font-size: 1rem;
}

#btn-alternar-modo {
    color: #fff;
    cursor: pointer;
}

#btn-alternar-modo:hover {
    text-decoration: underline;
}

/* ============================================================================
   BOTÃO DE LOGOUT (DESLOGAR) PREMIUM
   ============================================================================ */
/* Torna o container de perfis a referência para o botão posicionado */
.perfis-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    box-sizing: border-box;
}

/* ============================================================================
   BOTÃO DE LOGOUT PREMIUM (CANTO SUPERIOR DIREITO)
   ============================================================================ */
.btn-logout-topo {
    position: absolute;
    top: 35px;
    right: -1100px;
    background: transparent;
    color: #555;
    border: 1px solid #555;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-logout-topo:hover {
    color: #fff;
    border-color: #e50914;
    background: #e50914;
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.4);
}