@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --gray-1: #FAFAFA;
    --gray-2: #F0F0F0;
    --gray-3: #EBEBEB;
    --gray-4: #DBDBDB;
    --gray-5: #DBDBDB;
    --gray-6: #B8B8B8;
    --gray-7: #A3A3A3;
    --gray-8: #8F8F8F;
    --gray-9: #7A7A7A;
    --gray-10: #666666;
    --gray-11: #525252;
    --gray-12: #3D3D3D;
    --gray-13: #292929;
    --gray-14: #141414;

    /*  */

    --blue-1: #EDF3FF;
    --blue-2: #D1DFFF;
    --blue-3: #B0C5FF;
    --blue-4: #8CA9F9;
    --blue-5: #6B8CE8;
    --blue-6: #6179DC;
    --blue-7: #5169CB;
    --blue-8: #3D55B8;
    --blue-9: #2F48AD;
    --blue-10: #1B3497;
    --blue-11: #0C227E;
    --blue-12: #051863;
    --blue-13: #00104E;
    --blue-14: #000A3F;
    --blue-15: #000832;
    --blue-16: #00051D;
}

body {
    background-color: #fafafb;
}



h1,
h2,
h3,
a,
button,
input::placeholder,
label {
    font-family: 'Poppins', sans-serif;
}



input,
span,
p,
li {
    font-family: "Inter", sans-serif;
}



.container-width {
    max-width: 1400px !important;
    margin: 0 auto;
}

.menu-hamburguer {
    width: 26px;
    height: 30px;
    display: block;
    position: relative !important;
}

.menu-hamburguer::before,
.menu-hamburguer::after {
    content: '';
    height: .2rem !important;
    border-radius: 8px;
    position: absolute;
    background-color: var(--gray-1);
    transition: .5s;
}

.menu-hamburguer::before {
    top: 30%;
    right: 0;
    width: 100%;
}

.menu-hamburguer::after {
    width: 100%;
    right: 0;
    top: 60%;
}

#menu:checked~label .menu-hamburguer::before {
    transform: rotate(225deg);
    top: 45%;
}

#menu:checked~label .menu-hamburguer::after {
    transform: rotate(-225deg);
    width: 100%;
    top: 45%;
}

.busca {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1)
}

.menu-mobile {
    transition: .5s;
}

.nav-mobile li {
    padding: 10px 0px;
    color: var(--gray-1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-mobile li a {
    font-size: 1.2rem;
    font-weight: 600;
}

.transform {
    transform: translateX(100%);
    opacity: 0;
}

.degrade-botao {
    background: linear-gradient(to bottom, var(--blue-8), var(--blue-10));
    padding: 8px 16px;
    font-weight: 500;
    letter-spacing: 1;
    color: var(--gray-1);
    border-radius: 4px;
    font-family: 'Poppins', sans-serif;
}



.titulo::before {
    content: '';
    display: inline-block;
    position: absolute;
    margin-right: 8px;
    height: 100%;
    width: 4px;
    left: -8px;
    top: 0;
    background-color: var(--blue-8);
}

#ofertas .ofertas {
    overflow: auto;
}

/* .oferta-card {
    min-width: 300px !important;
} */

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

.shadow-template {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .15)
}

.inativo {
    display: none;
}

#avaliacoes .select::after {
    content: '<';
    font-family: 'Poppins', sans-serif;
    display: inline-block;
    transform: rotate(-90deg);
    margin-left: 4px;
}

.rotate-arrow {
    transform: rotate(-180deg);
}

.arrow {
    transition: .3s;
}

footer .container-width {
    display: grid;
}

@media (max-width: 1024px) {
    .localizacao {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .padding-mobile {
        padding: 12px;
    }

    .acao-compra {
        flex-wrap: wrap !important;
    }
}


@media (min-width: 1024px) {
    .produto-container {
        display: grid;
        grid-template-columns: 1fr 3fr 2fr;
    }

    .img-principal {
        grid-column: 2;
    }

    .images-produto {
        display: grid;
        grid-row: 1;
    }

    footer .container-width {
        grid-template-columns: repeat(5, 1fr);
    }

    .ofertas::-webkit-scrollbar {
        height: .8rem;

    }

    .ofertas::-webkit-scrollbar-thumb {
        background-color: var(--blue-8);
        border-radius: 2px;
    }

    .produto-compra {
        padding: 24px;
        height: fit-content;
    }

}

.login-info {
    transition: .3s ease;
}

.login-animate {
    transform: translateY(-20px);
    opacity: 0;
}

.ofertas {
    height: fit-content;
}

.swiper2 {
    height: fit-content !important;
}

.swiper-slide {
    color: #121212 !important;
    text-align: left !important;
    min-width: 300px !important;
}

.swiper-button-disabled {
    opacity: 1 !important;
}



#ofertas .ofertas.container-width {
    max-width: 1400px;
}

@media (min-width: 768px) {
    .swiper1 {
        height: 400px !important;
    }
}

@media(min-width: 1024px) {
    .swiper1 {
        height: 600px !important;
    }

    .bt {
        border-top: dashed 2px var(--gray-8);
    }

    .br {
        border-right: dashed 2px var(--gray-8);
    }
}

.arrow-slide::before {
    content: '→';
    display: block;
    height: fit-content !important;
    width: fit-content;
    font-size: 2rem;
    line-height: 0;
    animation: slideArrow 1s infinite alternate ease;
    bottom: 5px !important;
    position: absolute;
    right: 0;
}

@keyframes slideArrow {
    100% {
        transform: translateX(-30px);
    }
}

.marcas-container .marca {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
}



@media (min-width: 1024px) and (max-width:1368px) {
    header div.container-width {
        padding: 40px;
    }

    .swiper-slide div.container-width {
        padding: 40px;
    }

    nav ul.container-width {
        padding: 20px 40px;
    }

    #marcas div.container-width {
        padding: 20px 40px;
    }

    #servicos div.container-width {
        padding: 20px 40px;
    }

    #receba-ofertas div.container-width {
        padding: 20px 40px;
    }
}



#aviso-cadastro {
    transition: .5s;
}

#favoritar {
    cursor: pointer;
}

.reveal2 {
    opacity: 1;
    transform: translateY(0);
}