/* Estilos Padrão (Mobile-First) */
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #141414; color: #ffffff; margin: 0; padding: 0; }
header { padding: 20px; display: flex; align-items: center; position: fixed; top: 0; left: 0; right: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.7) 10%, rgba(0,0,0,0)); z-index: 100; }
header h1 { color: #e50914; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 2px; margin: 0; margin-right: 25px; }

/* --- ESTILOS DO MENU (ATUALIZADO PARA ESTILO "BOTÃO") --- */
header nav {
    display: none; /* Escondido em mobile por padrão */
    margin: 0;
    padding: 0;
}
header nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
header nav li {
    margin-right: 15px; /* Espaço entre os botões */
}
header nav a {
    /* Aplicando o estilo de botão */
    background-color: #e50914; /* Fundo vermelho */
    color: #ffffff;            /* Texto branco */
    padding: 8px 15px;         /* Espaçamento interno (altura e largura) */
    border-radius: 6px;        /* Bordas arredondadas */
    
    display: inline-block;     /* Essencial para o padding funcionar */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    text-transform: uppercase; 
    letter-spacing: 1px;       
}
/* Estilo hover/ativo agora é INVERTIDO (fundo branco, texto escuro) */
header nav a:hover,
header nav a.active-nav {
    background-color: #ffffff; /* Fundo branco */
    color: #141414;            /* Texto escuro (cor do fundo do body) */
    transform: translateY(-2px); /* Efeito de "levantar" */
}
/* --- FIM DOS ESTILOS DO MENU --- */

main { padding-top: 80px; }
.video-player-container { padding: 0 20px; margin-bottom: 50px; }
#movie-details h2 { font-size: 2rem; font-weight: bold; border: none; margin-bottom: 10px; }
#movie-details p { color: #ccc; font-size: 1rem; line-height: 1.5; max-width: 100%; }

/* --- EFEITO FADE-IN DINÂMICO PARA O TEXTO DO PLAYER --- */
#movie-details h2, #movie-details p {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    opacity: 1;
    transform: translateY(0);
}
#movie-details.loading h2,
#movie-details.loading p {
    opacity: 0;
    transform: translateY(10px);
}
/* --- FIM DO EFEITO FADE-IN --- */

.video-player-container video { width: 100%; border-radius: 6px; background-color: #000; }
.movie-gallery { padding: 0 0 0 20px; }
.movie-gallery h2 { font-size: 1.2rem; font-weight: bold; margin: 20px 0 15px; border: none; }
.movie-row { display: flex; overflow-x: auto; padding-bottom: 25px; margin-bottom: 30px; }
.movie-row::-webkit-scrollbar { display: none; }

/* --- EFEITO HOVER DINÂMICO NOS CARDS --- */
.movie-card { 
    flex: 0 0 auto; 
    width: 180px; 
    margin-right: 10px; 
    border-radius: 4px; 
    overflow: hidden; 
    cursor: pointer; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.movie-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.movie-card:hover { 
    transform: scale(1.08) translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
/* --- FIM DO EFEITO HOVER --- */

/* --- Estilos da Barra de Busca (Voltaram ao normal) --- */
.search-container { margin-left: auto; }
#search-bar { 
    width: 150px; 
    padding: 8px 15px; 
    border-radius: 4px; 
    border: 1px solid #333; 
    background-color: #1f1f1f; 
    color: #fff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#search-bar:focus {
    outline: none;
    border-color: #ccc;
    box-shadow: 0 0 10px rgba(204, 204, 204, 0.2);
}
/* --- FIM DOS ESTILOS DA BUSCA --- */

/* Estilos do .btn-entrar foram REMOVIDOS */

footer { padding: 20px; margin-top: 40px; text-align: center; color: #808080; }

.series-link {
    text-decoration: none;
    color: inherit;
}

/* Regras para Tablets (>= 768px) */
@media (min-width: 768px) {
    header, .video-player-container { padding: 20px 40px; }
    
    header nav {
        display: block; /* Mostra o menu em tablets */
    }

    .movie-gallery { padding: 0 0 0 40px; }
    #search-bar { width: 240px; } /* Estilo original restaurado */
    .movie-card { width: 240px; }
}

/* Regras para Desktops (>= 992px) */
@media (min-width: 992px) {
    header, .video-player-container, .movie-gallery { padding: 20px 50px; }
    
    header nav a {
        font-size: 1rem; 
    }

    .movie-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; overflow-x: visible; }
    .movie-card { width: auto; margin-right: 0; }
}