@charset "UTF-8";

/*configs gerais*/
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bolder;
}

/*variaveis*/
:root{
    --bkg: #F4EDEB;
    --titulos: #260F08;
    --subTitulos: #8f7674d5;
    --valores: #CD6243;
    --legendaCarrinho: #87635A;
    --ativo: #C73A0F;
    --ativoHover: #c73a0fb1;
    --exclusao: #bdb6b4;
    --bkgCarbono: #F4EDEB;
    --textCarbono: #79554A;
}

body{
    background-color: var(--bkg);

    padding-bottom: 50px;
}

main{
    padding: 20px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
    z-index: 0;
}


/*area menu*/

#menu{
    max-width: 900px;
}

#h1Menu{
    padding-bottom: 50px;

    color: var(--titulos);

    padding-left: 50px;

    font-weight: 900;
}

#cntMenu{
    display: flex;
    justify-content: space-between;
    justify-content: center;
    flex-wrap: wrap;
}

.itens{
    position: relative;

    margin: 15px;
}

.imgItens{
    width: 200px;

    border-radius: 20px;

    margin-bottom: 60px;

    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.63);
}

.imgItens-ativo{
    border:2px solid var(--ativo);
}

.btns, .btns-ativado{
    position: absolute;

    padding: 12px;

    width: 170px;

    border-radius: 20px;
    border: 1px solid var(--titulos);

    top: 55%;
    left: 50%;
    transform: translate(-50%,-50%);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1.2em;
    font-weight: 100;

    background-color: white;

    cursor: pointer;

    transition: .5s;
}

.btns-ativado{
    background-color: var(--ativo);
    color: white;

    border: 1px solid var(--ativo);
}

.btns:hover{
    border-color: var(--valores);

    color: var(--valores);
}

.btns-ativo:hover{
    border: 1px solid var(--ativo);

    color: white;
}

/*parte do segundo conteudo do btn*/
.operacoesP{
    border-radius: 50%;
    border: 1px solid white;

    padding: 3px 6px 4px 5px;
    margin-left: 5px;
}

.operacoesN{
    border-radius: 50%;
    border: 1px solid white;

    padding: 2px 7px 5px 8px;

    margin-right: 5px;
}
/*fim parte do segundo conteudo do btn*/

p{
    padding-bottom: 5px;

    color: var(--subTitulos);

    font-size: 1.1em;
}

.valores{
    color: var(--valores);
}

h2{
    padding-bottom: 5px;

    color: var(--titulos);
}

/* fim area do menu */

/*area carrinho*/

#seCarrinho{
    background-color: white;

    width: 313px;

    border-radius: 20px;

    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.63);

    padding: 10px;

    display: flex;
    flex-direction: column;
}

#carrinhoVazio{
    display: flex;
    flex-direction: column;
}

#no-cart{
    align-self: center;
}

#h1Carrinho{
    color: var(--valores);

    padding-bottom: 20px;
}

#legendaCarrinho{
    color: var(--legendaCarrinho);
    text-align: center;
}   

.item_carrinho{
    margin: 0px 10px;

    font-size: 0.9em;
}

#carrinhoCheio{
    flex-direction: column;

    padding: 10px;
}

.cntCarrinhoCheio{
    display: flex;

    justify-content: space-between;
}

.nomeItem{
    color: var(--titulos);
}

.descricaoItem{
    display: flex;
    justify-content: space-between;

    padding: 5px;
    margin-bottom: 10px;

    border-bottom: 2px solid var(--exclusao);
}

.qtdItem{
    color: var(--ativo);
}

.excluirItem{
    color: var(--exclusao);

    border: 1px solid var(--exclusao);
    border-radius: 50%;
    padding: 3px 4px 2px 4px;

    cursor: pointer;
}

#order{
    font-weight: 100;

    color: var(--titulos);
}

#orderValue{
    color: var(--titulos);
}

#carbonNeutral{
    background-color: var(--bkgCarbono);

    border-radius: 20px;
    padding: 10px;
}

#carbonNeutral > p{
    color: var(--textCarbono);
}

#carbono{
    color: var(--titulos);
}

#confirmarPedido, #novoPedido{
    background-color: var(--ativo);

    border: none;
    border-radius: 20px;

    height: 50px;
    
    margin-top: 20px;

    color: white;

    font-size: 1.2em;

    cursor: pointer;
}

#confirmarPedido:hover, #novoPedido:hover{
    background-color: var(--ativoHover);
}

/*fim da area do carrinho*/

/*inicio area ded confirmação de pedido*/
#cntPedidoConfirm{
    align-items: center;
    justify-content: center;


    position: absolute;
    top: 0%;

    width: 100vw;
    height: 100vh;

    background-color: rgba(0, 0, 0, 0.132);
}

#itensConfirmados{
    min-width: 350px;

    background-color: white;

    border-radius: 20px;

    padding: 10px;
}

#topoConfirmado{
    display: flex;
    flex-direction: column;
}

#topoConfirmado > h1{
    color: var(--titulos);

    font-weight: bolder;
    font-size: 1.8em;
}

#topoConfirmado > p{
    color: var(--titulos);
}