/*
 Theme Name:   AchadosZap
 Theme URI:    https://achadoszap.com.br
 Author:       Seu Nome
 Author URI:   https://seusite.com.br
 Description:  Tema simples para a home do AchadosZap
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  achadoszap
*/


@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --text-color: #02020A;
    --white: #ffffff;
    --yellow: #fafae8;
    --bright-yellow: #64df17;
    --cream: #fafae8;
    --golden-sand: #f3e16b;
    --brown: #133016;
    --pastel_blue: #c8e1f4;
    --pastel_red: #f48394;

}

html {
    scroll-behavior: smooth;
}

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

/* CSS Básico */

.privacy-policy section {
		margin: 40px 0;
	}
	
	.privacy-policy section ul {
		margin: 0 40px;
	}

p {
    font-size: 1.1rem;
    color: var(--text-color);
}

h1 {
    font-size: 3rem;
    font-weight: 900;
    color: var(--brown);
}


h2 {
    font-size: 2rem;
    font-weight: 900;
    color: var(--brown);
}

span {
    background-color: var(--yellow);
    padding: 0.1rem 0.3rem;
    color: var(--brown);
    font-weight: bolder;
    border-radius: 5px;;
}

a {
    text-decoration: none;
}


.logo, .logo a {
    font-family: "Nunito", sans-serif;
    color: var(--brown);
    font-size: 1.6rem;
    font-weight: 800;
}


/* Menu Principal */

header nav, .login_header nav {
    padding: 0 3rem;
    border-radius: 2rem;
    margin: 1rem;
    align-items: center;
    height: 7rem;
    gap: 3rem;
    display: flex;
    justify-content: space-between;
    background-color: #fafae829;
}

header nav a, .login_header nav a {
    text-decoration: none;
    font-weight: 1000;
    color: var(--brown);
}

.menu_home {
    gap: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hamburger {
    display: none;
    width: 30px;
    height: 25px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1100; /* Para ficar acima do menu */
}

.hamburger span {
    display: block;
    height: 3px;
    background-color: var(--brown);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Animação do ícone hambúrguer para 'X' */
.hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
}

.hamburger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Login */

.login_header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}



/* Home */

header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: url('images/bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.main_hero {
    align-items: center;
    width: 100%;
    padding-top: 7rem;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    justify-content: flex-start;
}

.hero {
    width: 80%;
    gap: 1.6rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;;
    padding: 0 4.3rem;
    
}

.cta, .hero button, .center_block button {

    color: var(--text-color);
    margin-top: 1rem;
    font-weight: 1000;
    background-color: var(--bright-yellow);
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    width: fit-content;
}

.scroll_link, footer a {
    font-weight: 700;
    color: var(--brown);
    text-decoration: underline;
}

.body_section {
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    max-width: 1800px;
    padding: 0 12rem;
}

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

.section_block p {
    font-size: 1.2rem;
}

.center_block {
    padding: 6.3rem 0;
    text-align: center;
    width: 100%;
    gap: 1.5rem;
    display: flex;
    flex-direction: column;
}

.center {
    justify-content: center !important;
}

.left_block, .right_block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    width: 40%;
    padding: 4.3rem 0;
}

.right_block img, .left_block img {
    border-radius: 2rem;
}

.list_home {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.list_item {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
}

.list_item .step_home {
    font-weight: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;             /* Define a largura fixa para o quadrado */
    height: 3rem;            /* Define a altura fixa para o quadrado */
    padding: 0.5rem;         /* Ajusta o preenchimento, se necessário */
    background-color: var(--bright-yellow);
    color: var(--brown);
    border-radius: 5px;
}

.full_center {
    gap: 4rem;
    background-color: var(--cream);
    border-radius: 2rem;
    height: 18rem;
    display: flex;
    justify-content: center;
    text-align: left !important;
    
}

.section_block button {

    width: fit-content;
    color: var(--text-color);
    margin-top: 1rem;
    font-weight: 1000;
    background-color: var(--bright-yellow);
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    width: fit-content;
}

/* Forms */

.form_top {
    margin: 1rem 0;
    padding: 1rem;
    background-color: var(--white);
}

.full_content form, .section_block form {
    background-color: var(--cream);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 5px;
}

.full_content form input[type="text" i], .full_content form input[type="email" i], .full_content form select,
.section_block form input[type="text" i], .section_block form input[type="email" i], .section_block form input[type="password" i], .section_block form select {

    margin-top: 1rem;
    border-radius: 5px;
    border: 1px solid var(--brown);
    padding: 0.5rem;
    background-color: var(--white);

}

#add_ans_btn {
    margin-top: 1rem;
    font-weight: 700;
    font-size: 0.8rem;
    width: 30%;
    background-color: var(--golden-sand);
    padding: 0.5rem 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;

}

.sbt_btn {
    display: block;
    width: 100%;
    color: var(--text-color);
    margin-top: 0;
    font-weight: 1000;
    background-color: var(--bright-yellow);
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
}

.sbt_btn:hover, .hero button:hover, .section_block button:hover, .cta:hover {
    background-color: var(--yellow);
}

.tooltip {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: var(--white);
    border-radius: 5px;
}

.tooltip p {
    font-size: 0.7rem;
    font-weight: 700;
}

/* Dashboard do Usuário */

.top_content ul {
    list-style: none;
}

.user_sidebar {
    display: flex;
    flex: 1;
}

/* Esconder o botão de menu em telas maiores */
.menu-toggle {
    display: none;
}

/* Footer */

footer {
    background-color: var(--yellow);
    padding: 2rem 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer_social {
    display: flex;
    gap: 1rem;
}

.footer_social img {
    width: 24px;
    height: 24px;
}

/* Estilos para o menu lateral */
.user_sidebar_menu {
    position: fixed;
    width: 250px;
    background-color: var(--golden-sand);
    height: 100%;
    transition: left 0.3s ease;
}

.user_sidebar_content {
    margin-left: 250px;
    width: 85%;
    background-color: var(--white);
    padding: 2rem;
}

.logo_area {
    padding: 1rem;
    text-align: center;
}

.config_area {
    padding: 1rem;
}

#rd_account_select {
    background-color: var(--cream);
    border: none;
    border-radius: 5px;
    padding: 0.5rem;
    width: 100%;
}

.menu_area {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu_area nav ul {
    list-style-type: none; /* Remove os marcadores das listas */
    padding: 0;
    margin: 0;
}

.menu_area nav ul li {
    margin: 5px 0; /* Espaçamento entre os itens, se necessário */
}

.menu_area nav ul li a {
    display: block;           /* Faz o link ocupar o bloco inteiro */
    padding: 10px 15px;       /* Ajuste o preenchimento conforme desejado */
    text-decoration: none;    /* Remove o sublinhado do link */
    color: var(--text-color);              /* Cor do texto do link */
    transition: all 0.2s ease;
    font-weight: 600;
}

.menu_area nav ul li a:hover {
    background-color: #f5f2c9; /* Efeito de hover para feedback visual */
}


.top_content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.full_content {
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.full_content ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style-type: none;
}

.full_content ul li {
    padding: 1rem;
    border-radius: 5px;
    background-color: var(--cream);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.list_links {
    display: flex;
    gap: 0.5rem;
}

.list_links a {
    font-weight: 700;
    color: var(--brown);
    text-decoration: underline;
}

.answer_list {
    width: 80%;
    display:flex;
    flex-direction: column;
    padding: 1rem;
    margin-bottom: 2rem;
}

.answer {
    background-color: var(--golden-sand);
    margin: 1rem 0;
    padding: 0.5rem;
    justify-content: space-evenly;
    display: flex;
    border-radius: 5px;
}

.next_steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.step {
    background-color: var(--cream);
    padding: 1rem;
    border-radius: 5;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.step_number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;             /* Define a largura fixa para o quadrado */
    height: 3rem;            /* Define a altura fixa para o quadrado */
    padding: 0.5rem;         /* Ajusta o preenchimento, se necessário */
    background-color: var(--bright-yellow);
    color: var(--brown);
    border-radius: 5px;
}

.tutorial {
    display: flex;
    gap: 3.5rem;                /* Espaçamento entre os cards */
    justify-content: center;    /* Centraliza os cards */
    align-items: stretch;       /* Garante que todos os cards tenham a mesma altura */
}

.tutorial_card {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    box-shadow: 8px 8px 19px -7px rgba(206, 206, 206, 1);
    border-radius: 5px;
    width: 250px;               /* Define a largura fixa para cada card */
    height: 300px;              /* Define a altura fixa para cada card */
    padding: 1rem;
    align-items: center;        /* Centraliza o conteúdo horizontalmente */
}

.card_top {
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;                /* Ocupa toda a largura do card */
    margin-bottom: 1rem;        /* Espaçamento entre o topo e o conteúdo */
    background-color: var(--golden-sand);
    border-radius: 5px;
}

.card_top img {
    width: 40px;                /* Define o tamanho do SVG */
    height: 40px;
    background-color: var(--pastel_red);
    border-radius: 50%;         /* Torna o fundo um círculo */
    padding: 10px;              /* Espaçamento interno para centralizar o SVG */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card_content {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    height: 60%;
}

.instructions {

    padding: 1rem 0;
}

.instructions ul li {
    display: flex;
    gap: 1.5rem;
    flex-direction: row;
    align-items: center;
}

.instructions ul li a {
    display: block;
    color: var(--text-color);
    font-weight: 1000;
    background-color: var(--bright-yellow);
    padding: 0.8rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
}

.sbt_btn:hover {
    background-color: var(--yellow);
}

.tag_user {
    font-size: 0.8rem;
    padding: 0.1rem 0.7rem;
    background-color: var(--pastel_blue);
    font-weight: 800;
    border-radius: 10px;
}

.tag_ia {
    font-size: 0.8rem;
    padding: 0.1rem 0.7rem;
    background-color: var(--pastel_red);
    font-weight: 800;
    border-radius: 10px;
}

.clipboard {
    background-color: var(--brown);
    padding: 0.2rem 0.5rem;
    font-size: 0.5rem;
    font-weight: 800;
    color: var(--white);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.full_content ul li  p input {
    padding: 0.2rem 0.5rem;;
    font-weight: 700;
    font-size: 0.8rem;
    width: 50%;
    background-color: var(--white);
    border: none;
    border-radius: 5px;
}

.clipboard:hover {
    background-color: var(--text-color);
}

/* Mobile */

@media (max-width: 1000px) {

    .logo a {
        font-size: 1rem;
    }

    .hamburger {
        display: flex;
    }

    .menu_home {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s ease, opacity 0.3s ease;
        z-index: 1000;
    }

    .menu_home_login a {
        font-size: 2.5rem;
    }

    .menu_home.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Esconder o menu padrão no mobile */
    .menu_home:not(.active) {
        display: none;
    }

    /* Garantir que o logo esteja sempre visível */
    .logo_menu_home {
        z-index: 1100;
        position: relative;
    }

	
	
	
/* Estilos opcionais para os links do menu no mobile */
.menu_home a {
    margin: 1rem 0;
    font-size: 1rem;
}

    header {
        background-image: url('images/bg_mobile.webp');
    }

    .order {
        order: 2;
    }

    h2 {
        margin: 1rem 0;
    }

    .hero {
        width: 100%;
        padding: 0 1.8rem;
        gap: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    h1 {
        font-size: 2rem;
    }

    .hero a {
        font-size: 1rem;
    }

    .body_section {
        padding: 0;
    }


    .section_block {
        flex-direction: column;
        padding: 2rem 1rem;
    }

    .left_block, .right_block {
        width: 100%;
        padding: 0.5rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    p {
        font-size: 1rem;
    }

    .section_block p {
        font-size: 1rem;
    }

    .full_center {
        height: auto;
        flex-direction: column;
        gap: 1rem;
        padding: 2rem;
    }

    .section_block button, .hero button {
        font-size: 2rem;
        padding: 1.5rem 4rem;
    }

    .list_item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }

    .step_home {
        width: 5rem;
        height: 5rem;
    }

    .form_top {
        padding: 3rem;
    }

    .full_content form label, .section_block form label{
        font-size: 2.2rem;
    }
    
    .full_content form input[type="text" i], .full_content form select,
    .section_block form input[type="text" i], .section_block form input[type="email" i], .section_block form input[type="password" i], .section_block form select {
    
        height: 5rem;
        line-height: 2.2rem;
        font-size: 2rem;
    
    }

   

    .user_sidebar {
        flex-direction: column;
    }
    .user_sidebar_menu {
        
        position: fixed;
        left: -100%;
        top: 0;
        width: 30%;
        height: 100%;
        z-index: 1000;
    }
    .user_sidebar_menu.active {
        left: 0;
    }
    .user_sidebar_content {
        margin-top: 50px;
        width: 100%;
    }

    .user_menu {
        margin-top: 80px;
    }
    /* Exibir o botão de menu em telas menores */
    .menu-toggle {
        display: block;
        position: fixed;
        top: 1rem;
        left: 1rem;
        background-color: var(--golden-sand);
        border: none;
        padding: 1rem;
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 2000; /* Garante que o botão esteja acima do menu */
    }

    .tutorial {
        flex-direction: column;
        align-items: center;
    }

    .tutorial_card {
        width: 400px;
        height: 500px;
    }

    .card_top img {
        width: 80px;
        height: 80px;
        padding: 20px;
    }

    h3 {
        font-size: 2.2rem;
    }

    .tooltip p {
        font-size: 1.2rem;
    }

    .menu_area nav ul li a {
        font-size: 1.5rem;
    }

    footer {
        padding: 5rem 2rem;
        flex-direction: column;
        gap: 2rem;
    }

    .footer_social img {
        width: 64px;
        height: 64px;;
    }

    .main_hero {
        padding-top: 0;
    }

}