/* ==========================
   PORTAL ELETROCAR V2
   Sprint 1.2
========================== */

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

body{
    background:#eef2f7;
}

/* ==========================
   TOPO
========================== */

#topo{

    height:72px;

    background:#0057A8;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 22px;

    position:sticky;

    top:0;

    z-index:1000;

    box-shadow:0 2px 10px rgba(0,0,0,.15);

}

.logo img{

    height:55px;

}

#pesquisa{

    width:46%;

    height:42px;

    border:none;

    border-radius:8px;

    padding:0 16px;

    font-size:15px;

    outline:none;

    margin-bottom: 8px;

}


    #cliente{
    color:white;
    text-align:center;
    font-size:15px;
    line-height:20px;
    margin:0;
}

/* ==========================
   CONTEÚDO
========================== */

main{

    display:flex;

    gap:22px;

    padding:18px;

    align-items:flex-start;

}

#catalogo{

    flex:1;

}

/* ==========================
   GRID
========================== */

#listaProdutos{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));

    gap:18px;

}

/* ==========================
   CARD
========================== */

.card{

    background:white;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

    transition:.20s;

    display:flex;

    flex-direction:column;

    padding:12px;

}

.card:hover{

    transform:translateY(-4px);

}

.card img{

    width:100%;

    height:185px;

    object-fit:contain;

    margin-bottom:8px;

}
.card h3{

    font-size:15px;

    line-height:20px;

    height:60px;

    overflow:hidden;

    font-weight:700;

}

.card p{

    margin-top:10px;

    color:#666;

}

.card small{

    color:#666;

    margin-top:4px;

    line-height:20px;

    font-size:14px;

}

.card h2{

    margin:12px 0;

    color:#0057A8;

    font-size:28px;

    font-weight:700;

}

/* ==========================
   CONTROLE QUANTIDADE
========================== */

.controle{

    display:grid;

    grid-template-columns:40px 70px 40px;

    justify-content:center;

    align-items:center;

    gap:6px;

    margin-top:auto;

}

.controle button{

    width:40px;

    height:36px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    background:#0057A8;

    color:white;

    font-size:22px;

    transition:.15s;

}

.controle button:hover{

    background:#004483;

}

.controle input{

    width:70px;

    height:36px;

    text-align:center;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:17px;

    font-weight:bold;

}

/* ==========================
   CARRINHO
========================== */

#carrinho{

    width:330px;

    background:white;

    border-radius:12px;

    padding:18px;

    position:sticky;

    top:92px;

    box-shadow:0 2px 12px rgba(0,0,0,.10);
    max-height:calc(100vh - 110px);

    display:flex;

    flex-direction:column;
}

#carrinho h2{

    margin-bottom:15px;

}
#listaPedido{

    overflow-y:auto;

    flex:1;

    min-height:0;

    padding-right:6px;

}
.itemCarrinho{

    border-bottom:1px solid #ececec;

    padding-bottom:15px;

    margin-bottom:15px;

}

.itemCarrinho small{

    display:block;

    color:#777;

    margin-top:4px;

}

.linhaQtd{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:12px;

}

.linhaQtd button{
    width:68px;
    height:38px;
    border:none;
    border-radius:8px;
    background:#0057A8;
    color:white;
    cursor:pointer;
    font-size:22px;
    font-weight:bold;
    transition:.2s;
}

.linhaQtd button:hover{
    background:#004483;
}

.subtotal{

    text-align:right;

    margin-top:10px;

    font-weight:bold;

    color:#169B45;

}

#total{

    margin-top:20px;

    font-size:26px;

    font-weight:bold;

    color:#0057A8;

}

#btnEnviarPedido{

    width:100%;

    margin-top:20px;

    height:48px;

    border:none;

    border-radius:8px;

    background:#169B45;

    color:white;

    font-size:17px;

    cursor:pointer;

}

/* ==========================
   TABLET
========================== */

@media(max-width:1200px){

    #listaProdutos{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:980px){

    main{

        flex-direction:column;

    }

    #carrinho{

        width:100%;

        position:relative;

        top:auto;

    }

    #listaProdutos{

        grid-template-columns:repeat(2,1fr);

    }

}
/* ==========================
   REFERÊNCIA DO PRODUTO
========================== */

.referenciaProduto{

    display:inline-block;

    margin-left:8px;

    color:#0057A8;

    font-size:13px;

    font-weight:700;

}
/* ==========================
   BOTÃO MEUS PEDIDOS
========================== */

#btnMeusPedidos{

    height:42px;

    padding:0 18px;

    border:none;

    border-radius:8px;

    background:#ffffff;

    color:#0057A8;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    white-space:nowrap;

}

#btnMeusPedidos:hover{

    background:#e9f2fb;

}
/* ==========================
   MODAL FOTO DO PRODUTO
========================== */

.modalFoto{

    display:none;

    position:fixed;

    z-index:3000;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.85);

    align-items:center;

    justify-content:center;

    padding:30px;

}

.imagemAmpliada{

    max-width:90%;

    max-height:90vh;

    object-fit:contain;

    background:white;

    border-radius:12px;

    padding:10px;

    box-shadow:0 4px 25px rgba(0,0,0,0.4);

}

.fecharFoto{

    position:absolute;

    top:18px;

    right:30px;

    color:white;

    font-size:42px;

    font-weight:bold;

    cursor:pointer;

    z-index:3001;

}
/* ==========================
   MODAL ALTERAR SENHA
========================== */

.modalSenha{

    display:none;

    position:fixed;

    z-index:4000;

    left:0;

    top:0;

    width:100%;

    height:100%;

    background:rgba(0,0,0,0.65);

    align-items:center;

    justify-content:center;

    padding:20px;

}

.conteudoModalSenha{

    width:100%;

    max-width:420px;

    background:white;

    border-radius:12px;

    padding:28px;

    box-shadow:0 4px 25px rgba(0,0,0,0.30);

}

.conteudoModalSenha h2{

    color:#0057A8;

    margin-bottom:20px;

    text-align:center;

}

.conteudoModalSenha input{

    width:100%;

    height:44px;

    margin-bottom:12px;

    padding:0 12px;

    border:1px solid #ccc;

    border-radius:8px;

    font-size:15px;

}

.conteudoModalSenha button{

    width:100%;

    height:44px;

    margin-top:10px;

    border:none;

    border-radius:8px;

    background:#169B45;

    color:white;

    font-size:16px;

    cursor:pointer;

}

.conteudoModalSenha button:last-child{

    background:#777;

}
/* ==========================
   DESCRIÇÃO NA FOTO AMPLIADA
========================== */

.modalFoto{

    flex-direction:column;

}

.descricaoFotoProduto{

    margin-top:12px;

    max-width:90%;

    color:white;

    font-size:18px;

    font-weight:700;

    text-align:center;

    line-height:1.4;

}
/* ==========================================
   CELULAR
========================================== */

@media (max-width: 768px){

    #topo{
        height:auto;
        padding:12px;
        display:flex;
        flex-direction:column;
        gap:4px;
        align-items:stretch;
    }

    .logo{
        display:flex;
        justify-content:center;
    }

    .logo img{
        height: 50px;
    }

    #pesquisa{
        width:100%;
    }

    #cliente{
    text-align:center;
    margin:0;
}

    #btnMeusPedidos,
    #btnAlterarSenha,
    #btnSair{
        width:100%;
        height:46px;
        font-size:15px;
    }

    main{
        padding:12px;
        gap:15px;
    }

    #listaProdutos{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}

    .card{
    padding:8px;
}

    .card img{
    height:120px;
}

    .card h3{
    font-size:13px;
    line-height:16px;
}

    .card h2{
    font-size:22px;
}

    .controle{
    grid-template-columns:42px 1fr 42px;
}

    .controle button{
    width:42px;
    height:38px;
    font-size:20px;
}

    .controle input{
        width:100%;
        height:42px;
        font-size:18px;
    }

    #carrinho{
        width:100%;
        position:relative;
        top:auto;
        max-height:none;
    }

    #total{
        font-size:28px;
        text-align:center;
    }

    #btnEnviarPedido{
        height:54px;
        font-size:18px;
    }

    .linhaQtd button{
        width:42px;
        height:42px;
    }

}
/* ==========================================
   ÁREA DE ATALHOS
========================================== */

#atalhos{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:6px 20px 12px;
    gap:10px;
    background:#0057A8;
}

#atalhos button{
    flex:1;
    max-width:220px;
    height:42px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
    font-weight:bold;
}

#btnCarrinho{
    background:#ffffff;
    color:#0057A8;
    border:2px solid #0057A8;
}

#btnMeusPedidos{
    background:white;
    color:#0057A8;
}

#btnAlterarSenha{
    background:#f5f5f5;
}

#btnSair{
    background:#d32f2f;
    color:white;
}
@media (max-width:768px){

    #atalhos{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;
        padding:12px;
    }

    #atalhos button{
        width:100%;
        max-width:none;
        height:48px;
        font-size:15px;
    }

    #atalhos{
    padding:2px 12px 10px;
    gap:8px;
   
}

}