/* HEADER FIXO */
.header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: fit-content;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 32px;
    background-color: #1f1f1f; /* ou #1C1C1C */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

/* LOGO */
.header .logo img{
    width: 87%;
    font-weight: bold;
    color: #EB004B;
    cursor: pointer;
    /* se usar imagem: defina altura/largura aqui */
}

/* NAV PRINCIPAL */
.nav-main {
    background-color: #2e2e2e;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;               /* intermediate */
    padding: 6px 20px;          /* misto dos dois */
    border: 3px solid #3f3f3f;
    border-radius: 12px;
    gap: 20px;
}
.nav-main ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}
.nav-main li a,
.nav-main .nav-options {
    text-decoration: none;
    font-size: 15px;
    color: #fff;
    background: transparent;
    padding: 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.nav-main li a:hover,
.nav-options:hover {
    background-color: #1f1f1f; 
    color: #EB004B;
    box-shadow: 0 4px 9px rgba(0, 0, 0, 0.5);
}

/* AÇÕES DO HEADER */
.header-actions {
    display: flex;
    align-items: center;
    gap: 2.5em;
}
.header-actions .btn-icon {
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
}
.header-actions .btn-icon img {
    width: 82%;
}

/* CONTAINER DE BUSCA */
/* Container da busca - Essencial para posicionamento relativo */
.search-container {
    position: relative; /* Torna este o ponto de referência para elementos filhos posicionados absolutamente */
    display: flex; /* Mantém o layout do botão e input */
    align-items: center;
    /* Outros estilos do seu search-container, se houver */
}

/* Input de busca */
.search-input {
    /* Mantenha seus estilos existentes */
    width: 200px; /* Exemplo: defina uma largura para o input */
    padding: 8px 12px;
    border: 1px solid #555;
    background-color: #222;
    color: #eee;
    border-radius: 5px;
}

/* Botão do ícone de busca */
.search-container .btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin-right: 5px; /* Espaçamento entre o botão e o input */
}

/* Estilos para a lista de resultados da busca (o dropdown) */
.dropdown {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute; /* Posição absoluta em relação ao .search-container */
    top: 100%; /* Começa 100% abaixo do topo do pai (.search-container) */
    left: 0; /* Alinha à esquerda do pai */
    width: 100%; /* Ocupa a largura total do pai */
    background-color: #333; /* Cor de fundo do dropdown */
    border: 1px solid #555;
    max-height: 300px; /* Altura máxima para rolagem */
    overflow-y: auto;
    z-index: 1000; /* Garante que fique por cima de outros elementos */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none; /* Inicia escondido */
    border-radius: 0 0 5px 5px; /* Bordas arredondadas apenas na parte inferior */
}

.dropdown li {
    padding: 8px 12px;
    cursor: pointer;
    display: flex; /* Para alinhar imagem e texto */
    align-items: center; /* Centraliza verticalmente */
    gap: 10px; /* Espaço entre a imagem e o texto */
    border-bottom: 1px solid #444; /* Linha divisória */
    color: #eee; /* Cor do texto */
}

.dropdown li:last-child {
    border-bottom: none; /* Remove a linha do último item */
}

.dropdown li:hover,
.dropdown li.active { /* 'active' para navegação por teclado */
    background-color: #555; /* Cor de fundo ao passar o mouse */
    color: #fff;
}

.dropdown li img {
    width: 40px; /* Largura do poster */
    height: 60px; /* Altura do poster (proporcional à largura do filme) */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorção */
    border-radius: 3px; /* Bordas arredondadas */
    flex-shrink: 0; /* Impede que a imagem encolha */
}