html {
    font-size: 62.5%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

:root {
    --font-small: 1.6rem;
    --font-medium: 2.4rem;
    --font-large: 3.2rem;
}

#resposta {
    text-align: center;
    
    position: relative;
    z-index: 1;

    margin: 1.6rem 0;

    font-size: var(--font-small);
    font-weight: 500;
}

.none {
    display: none;
}

h1 {
    font-size: var(--font-large);
}

button {
    cursor: pointer;

    padding: 0.8rem 1.6rem;
    
    border: none;
    border-radius: 1.6rem;
    background-color: #303030;
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.4);

    color: white;
    font-size: calc( var(--font-small) / 1.25 );
    font-weight: bold;
}

.container {
    display: flex;
}

body, .container, .duvidas, .caixa-duvidas {
    overflow-y: hidden;
    max-height: 100dvh;
}

aside {
    min-width: 32rem;
    max-width: 32rem;
    height: 100dvh;

    padding: 3.2rem;

    box-shadow: 0 1.2rem 1.6rem rgba(0, 0, 0, 0.4);
    background-color: #ffcb08;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .btns-duvidas {
        width: 100%;

        display: flex;
        flex-direction: column;
        gap: 1.6rem;
    }   

    button {
        width: 100%;
        height: 4rem;
    }

    img {
        width: 12rem;
        aspect-ratio: 1 / 0.8;
    }
}

.duvidas {
    width: 100%;
    height: 100dvh;

    padding: 6.4rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;

    .container-duvida {
        min-height: 4.8rem;
    }

    .container-duvida .caixa-duvidas {            
        img {
            width: 2.4rem;
            height: 2.4rem;
        }

        input {
            width: 100%;
            height: 100%;

            padding-left: 1.6rem;

            border: none;
            border-radius: 3.2rem;

            background-color: #ffcb08;

            outline: none;
        }

        input::placeholder {
            color: black;
        }
        
        button {
            min-height: 4.8rem;
            box-shadow: none;
        }    
    }

    .duvidas-frequentes {
        width: 100%;

        position: relative;
        z-index: 1;
        
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.6rem;

        button {
            width: 30%;
            min-width: 24rem;
            aspect-ratio: 1 / 0.15;
        }
    }
}

.container-duvida {
    position: relative;
    z-index: 2; 
    width: 80%;

    padding-left: 3.2rem;

    border-radius: 3.2rem;
    background-color: #ffcb08;
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
}

.caixa-duvidas {
    position: relative;
    z-index: 2;
    width: 100%; 

    display: flex;
    align-items: center;
}

.all-questions {
    position: absolute;
    top: 100%; 
    left: 0;
    z-index: 2; 

    width: 100%; 
    max-height: 40dvh;
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: 0.8rem;

    background-color: #ffcb08;
    border-radius: 0 0 3.2rem 3.2rem;
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
}

.bottom {
    display: flex;
    flex-direction: column;

    padding-bottom: 1.6rem;

    position: relative;
    z-index: 1;

    max-height: 80dvh;
    overflow-y: auto;
}

@media ( min-width: 1000px ) and ( max-width: 1280px ) {
    .container {
        flex-direction: column;
    }

    .none {
        display: flex;
    }
    
    /* Adicionar para a .btns-duvidas */
    .btns-duvidas {
        position: absolute; /* Torna o menu suspenso absoluto dentro da aside */
        top: 0; /* Fixa no topo da aside */
        left: 0;

        padding: 3.2rem 1.6rem 1.6rem 1.6rem;
        margin-top: 3.2rem;

        width: 100%; /* Ajusta a largura para 100% da aside */
        z-index: 5; /* Faz com que ela sobreponha os outros elementos dentro da aside, mas abaixo das imagens */

        display: none; /* Inicialmente, o menu está oculto */
        flex-direction: column;

        background-color: #ffcb08; /* Cor do fundo */
    }

    /* Quando a classe active for adicionada, o menu será exibido */
    .btns-duvidas.active {
        display: flex;
        z-index: 10; /* Aumenta o índice para garantir que o menu fique acima de outros conteúdos */
    }

    /* Ajustes nos botões para que as imagens fiquem sobre o menu */
    aside img {
        z-index: 15; /* Garante que as imagens fiquem acima da .btns-duvidas */
        position: relative; /* Faz com que as imagens fiquem sobre o conteúdo absoluto */
    }

    .duvidas {
        padding: 3.2rem;
    }
        
    .duvidas .container-duvida, .duvidas .duvidas-frequentes {
        width: 100%;
    }

    aside {        
        min-width: 100%;
        height: auto;

        padding: 1.6rem 3.2rem;

        gap: 1.6rem;
    
        background-color: #ffcb08;
        box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.4);

        .btns {
            width: 100%;
            
            display: flex;
            justify-content: space-between;
        }

        .btns-duvidas {
            display: none;
            flex-direction: row;
        }

        .btns-duvidas.active {
            display: flex;
        }
    
        img {
            width: 4rem;
            height: 3.2rem;
        }
    }
}

@media ( max-width: 1000px ) {
    .container {
        flex-direction: column;
    }

    .none {
        display: flex;
    }

    /* Adicionar para a .btns-duvidas */
    .btns-duvidas {
        position: absolute; /* Torna o menu suspenso absoluto dentro da aside */
        top: 0; /* Fixa no topo da aside */
        left: 0;

        padding: 6.4rem 1.6rem 1.6rem 1.6rem;

        width: 100%; /* Ajusta a largura para 100% da aside */
        z-index: 5; /* Faz com que ela sobreponha os outros elementos dentro da aside, mas abaixo das imagens */

        display: none; /* Inicialmente, o menu está oculto */
        flex-direction: column;

        background-color: #ffcb08; /* Cor do fundo */
        box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.4);
    }

    /* Quando a classe active for adicionada, o menu será exibido */
    .btns-duvidas.active {
        display: flex;
        z-index: 10; /* Aumenta o índice para garantir que o menu fique acima de outros conteúdos */
    }

    /* Ajustes nos botões para que as imagens fiquem sobre o menu */
    aside img {
        z-index: 15; /* Garante que as imagens fiquem acima da .btns-duvidas */
        position: relative; /* Faz com que as imagens fiquem sobre o conteúdo absoluto */
    }

    #resposta {
        font-size: 1.2rem;
    }

    .duvidas {
        padding: 3.2rem;
    }
      
    .duvidas .container-duvida, .duvidas .duvidas-frequentes {
        width: 100%;
    }

    .duvidas .duvidas-frequentes button {
        width: 100%;
        min-width: 100%;
    }
    
    h1 {
        font-size: var(--font-medium);
    }

    aside {        
        min-width: 100%;
        height: auto;

        padding: 1.6rem 3.2rem;

        gap: 1.6rem;
    
        background-color: #ffcb08;
        box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.4);

        .btns {
            width: 100%;
            
            display: flex;
            justify-content: space-between;
        }

        .btns-duvidas {
            display: none;
            flex-direction: column;
        }

        .btns-duvidas.active {
            display: flex;
        }
    
        img {
            width: 4rem;
            height: 3.2rem;
        }
    }
}