/* Container da lista de filmes */
.lista-midia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem
}

/* Card individual de cada filme */
.filme-card {
    border-radius: 12px;
    overflow: hidden; /* Garante que a imagem não vaze das bordas arredondadas */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: relative; /* Necessário para o overview */
    transition: transform 0.3s ease;
}

.filme-card:hover {
    transform: scale(1.05);
}

.filme-card img {
    width: 100%;
    height: auto;
    display: block;
}

.filme-info {
    background-color: #007bff; /* <-- ADICIONE A COR DE FUNDO AQUI */
    color: #ffffff;           /* <-- E ADICIONE A COR DO TEXTO AQUI */
    padding: 0.75rem;
    display: flex;
    justify-content: center; /* Centraliza o título */
    align-items: center;
}

.filme-info h3 {
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
    overflow: hidden; /* Esconde o texto que ultrapassa o limite */
    text-overflow: ellipsis; /* Adiciona reticências (...) ao final do texto que não cabe */
}

.filme-nota {
    position: absolute; /* Permite que a nota "flutue" sobre o card */
    top: 5px;           /* Distância do topo */
    right: 5px;         /* Distância da direita */
    background-color: rgba(0, 0, 0, 0.8); /* Fundo preto semitransparente para legibilidade */
    color: #ffffff;
    padding: 0.1rem 0.4rem; /* Espaçamento interno */
    border-radius: 6px;   /* Bordas arredondadas */
    display: flex;
    align-items: center;
    gap: 0.3rem; /* Espaço entre a estrela e o número */
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 2; /* Garante que a nota fique ACIMA da imagem */
}

.filme-nota .fa-star {
    color: #f5c518; /* Amarelo IMDB */
}

/* --- ESTILOS DO CONTAINER DE BUSCA --- */
/* O container principal do formulário */
.busca-container {
    position: relative; /* Essencial para posicionar as sugestões abaixo dele */
    display: flex; /* Alinha o input e o botão lado a lado */
    width: 100%;
    max-width: 400px; /* Define uma largura máxima para a barra de busca */
    margin: 0 auto; /* Centraliza a barra de busca no card */
}

/* O campo de texto onde o usuário digita */
#input-busca {
    flex-grow: 1; /* Faz o input ocupar todo o espaço disponível */
    border: 2px solid #dfe1e5;
    border-right: none; /* Remove a borda direita para conectar com o botão */
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    border-radius: 24px 0 0 24px; /* Arredonda as bordas da esquerda */
    outline: none; /* Remove o contorno padrão do navegador */
    transition: all 0.3s ease-in-out;
}

/* Efeito quando o usuário clica no campo de texto */
#input-busca:focus {
    border-color: var(--cor-primaria, #007bff);
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15); /* Efeito de brilho sutil */
}

/* O botão de busca */
.busca-container button[type="submit"] {
    border: none;
    background-color: var(--cor-primaria, #007bff);
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 0 24px 24px 0; /* Arredonda as bordas da direita */
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

/* Efeito ao passar o mouse sobre o botão */
.busca-container button[type="submit"]:hover {
    background-color: #0056b3; /* Um tom mais escuro do azul primário */
}

/* --- ESTILOS DO CONTAINER DE SUGESTÕES --- */
.sugestoes-container {
    position: absolute;
    top: 100%; /* Posiciona exatamente abaixo da barra de busca */
    left: 0;
    right: 0;
    margin-top: 8px; /* Pequeno espaço entre a busca e as sugestões */
    
    background-color: var(--cor-fundo-card, #ffffff);
    border: 1px solid #dfe1e5;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    max-height: 400px; /* Altura máxima antes de aparecer a barra de rolagem */
    overflow-y: auto; /* Adiciona barra de rolagem se as sugestões forem muitas */
    z-index: 100; /* Garante que as sugestões fiquem sobre outros elementos */
    /* As sugestões começam escondidas e o JavaScript as tornará visíveis */
    display: none; 
}

/* Estilo para cada item individual na lista de sugestões */
/* (Você vai criar esses itens com JavaScript) */
.sugestao-item {
    padding: 0.75rem 1.2rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sugestao-item:last-child {
    border-bottom: none; /* Remove a borda do último item */
}

.sugestao-item:hover {
    background-color: #f5f5f5;
}

/* Para o poster do filme na sugestão */
.sugestao-item img {
    width: 40px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

/* --- TEMA ESCURO (DARK MODE) --- */
body.dark-mode #input-busca {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #ffffff;
}

body.dark-mode #input-busca:focus {
    border-color: var(--cor-primaria, #007bff);
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.2);
}

body.dark-mode .sugestoes-container {
    background-color: #2d3748;
    border-color: #4a5568;
}

body.dark-mode .sugestao-item {
    border-bottom-color: #4a5568;
}

body.dark-mode .sugestao-item:hover {
    background-color: #4a5568;
}

/* --- PAGINAÇÃO --- */
#paginacao-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-bottom: 1rem;
}

#paginacao-container button {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 8px;
    background-color: var(--cor-primaria, #007bff);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#paginacao-container button:hover:not(:disabled) {
    background-color: #0056b3;
}

#paginacao-container button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.7;
}

#paginacao-container span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cor-texto-secundario);
}

/* --- ESTILOS DO MODAL DO PLAYER --- */
.modal {
    display: none; /* Começa escondido */
    position: fixed; /* Fica fixo na tela */
    z-index: 1000; /* Garante que fique sobre todo o conteúdo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Adiciona rolagem se necessário */
    background-color: rgba(0, 0, 0, 0.8); /* Fundo preto semitransparente */
    backdrop-filter: blur(5px);
}

.modal-conteudo {
    background-color: #1e1e1e;
    margin: 5% auto; /* Centraliza verticalmente e dá um espaço no topo */
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 800px; /* Largura máxima do modal */
    position: relative;
    color: #ffffff;
}

.fechar-modal {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
}

.fechar-modal:hover,
.fechar-modal:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

#modal-titulo {
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cor-primaria, #007bff);
    padding-bottom: 0.5rem;
}

.player-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 para o vídeo */
    height: 0;
    overflow: hidden;
}

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

/* --- ESTILOS DAS OPÇÕES DO PLAYER --- */
.opcoes-player-container {
    display: flex;
    justify-content: center;
    gap: 1rem; /* Espaço entre os botões */
    margin-top: 0.9rem;
}

.opcoes-player-container button {
    padding: 0.6rem 0.8rem;
    border: none;
    border-radius: 8px;
    background-color: #007bff;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.opcoes-player-container button:hover {
    background-color: #0056b3;
}

/* Estilo para o botão de opção que está ativo */
.opcoes-player-container button.ativo {
    background-color: #0056b3; /* Um tom de azul mais escuro */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
}

/* --- ESTILOS DOS SELETORES DE TEMPORADA/EPISÓDIO --- */
.seletores-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.seletor-dropdown {
    flex-grow: 1;
    padding: 0.6rem;
    border: 1px solid #dfe1e5;
    border-radius: 8px;
    background-color: #f8f9fa;
    font-family: var(--fonte-principal);
    font-size: 0.9rem;
    max-width: 50%; 
}

/* Ajustes para o Tema Escuro */
body.dark-mode .seletor-dropdown {
    background-color: #2d3748;
    border-color: #4a5568;
    color: #ffffff;
}

/* --- AJUSTES ESPECÍFICOS PARA O FIRE STICK (E TELAS SIMILARES) --- */
/* Esta regra só será ativada para telas entre 960px e 1200px de largura */
@media (min-width: 960px) and (max-width: 1200px) {
    .modal-conteudo {
        width: 60%; /* Força o modal a ocupar 60% da tela do Fire Stick */
        max-width: none; /* Ignora qualquer max-width que possa existir */
        height: auto; /* Ajusta a altura automaticamente */
        aspect-ratio: 16 / 9; /* Mantém a proporção de 16:9 */
    }
}

/* --- AJUSTES MOBILE PARA OS BOTÕES DO PLAYER (QUEBRA DE LINHA) --- */
@media (max-width: 600px) {
  .opcoes-player-container {
    /* Permite que os botões quebrem para a próxima linha */
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
    .lista-midia {
        /* Copiamos as regras de grid que estavam antes no #grade-canais */
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }
    .filme-info h3 {
        font-size: 0.7rem;
    }
    #input-busca {
        padding: 0.6rem 0.6rem; 
    }
}