/* 1. Torna o container do dropdown fixo na tela */
.dropdown {
    position: fixed;
    top: 20px;       /* Distância do topo da tela */
    left: 20px;     /* Distância da direita da tela (ajuste como preferir) */
    z-index: 9999;   /* Garante que o menu fique por cima de todo o conteúdo */
}

.dropbtn {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    /* --- AS LINHAS QUE RESOLVEM O SEU PROBLEMA --- */
    display: inline-flex;    /* Mantém o botão inline, mas ativa o flexbox interno */
    align-items: center;     /* Alinha o texto e o SVG perfeitamente na vertical */
    gap: 8px;                /* Cria um espaçamento perfeito entre o texto e o ícone */
    white-space: nowrap;     /* Garante que o texto "MENU" nunca quebre de linha */
}

/* Garante que o SVG tenha um tamanho controlado e não expanda o botão */
.dropbtn svg {
    width: 20px;             /* Ajuste a largura do ícone como preferir */
    height: 20px;            /* Ajuste a altura do ícone como preferir */
    display: inline-block;   /* Garante o comportamento inline dentro do flexbox */
    flex-shrink: 0;          /* Impede o ícone de amassar se o botão diminuir */
}

/* 3. O segredo: Ele se posiciona de forma absoluta EM RELAÇÃO ao .dropdown fixo */
.dropdown-content {
    display: none;        
    position: absolute;
    top: 100%;            
    left: 0;             
    background-color: #ffffff;
    min-width: 240px; /* Um pouco mais largo para acomodar bem a barra de rolagem */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 4px;
    margin-top: 5px;      

    /* --- AS LINHAS QUE RESOLVEM O SEU PROBLEMA --- */
    max-height: 75vh;     /* Limita a altura do menu a 75% da altura da tela do usuário */
    overflow-y: auto;     /* Adiciona o scroll vertical apenas se o conteúdo passar do limite */
    -webkit-overflow-scrolling: touch; /* Melhora a rolagem em celulares (iOS) */
}

/* Links de navegação dentro do dropdown */
.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: var(--font-sans);
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}

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

/* Efeito de hover nos links */
.dropdown-content a:hover {
    background-color: var(--bg-color);
    color: var(--primary-color);
}

/* Se o seu JS apenas altera o display, essa classe pode ser usada para mostrar o menu */
.dropdown-content.show {
    display: block;
}