*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: black;
    font-family: sans-serif;
}   

html, body{
    scroll-behavior: smooth;
    background-color: #730202;
}

/*Css sobre a barra de navegação.*/
::-webkit-scrollbar {
    width: 8px;
    height: 150px; 
}

::-webkit-scrollbar-thumb {
    background-color: #730202; 
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover{
    background-color: #260101;
    
}
::-webkit-scrollbar-track{
    background-color: white;
}
/*Css sobre o header.*/
header{

    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    z-index: 26;
    backdrop-filter: blur(3px); 
    transition: 1s;
    background-color: #260101;
}

#box-access-message{

    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    background-color: #260101;
    backdrop-filter: blur(3px);
    border-radius: 6px;
    z-index: 99;

}

#box-logo{

    height: 52px;
    width: 52px;
    border-radius: 50%;
}

#box-logo abbr{

    height: 100%;
    width: 100%;
    overflow: hidden;
}

#box-logo img{

    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 1px solid white;

}

#div-options-nav{

    display: flex;
    gap: 15px;
    
}

#box-options-nav{
    display: flex;
    gap: 8px;
}

#box-options-nav a{
    color: white;
    padding: 3px 8px;
    border-radius: 7px;
    border: none;
    text-align: center;
    align-items: center;
    transition: 1s;
    box-shadow: 0 0 1px 1px white;
    font-size: 15px;
}


#box-options-nav a:hover{

    box-shadow: 0 0 2px 2px white;
}

#box-icons{
    
    display: flex;
    gap: 10px;
}
.icons{
    cursor: pointer;
}
.icons i{
    font-size: 20px;
    color: white;
}
#search-products{
    width: 20px; 
    height: 20px;
}
#notification{

    width: 24px; 
    height: 24px;
}

#box_nav{
    
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: 20px;
    width: 22px;
    padding: 3px;
    cursor: pointer;
}
.litle_bar{
    background-color: white;
    width: 20px;
    height: 3px;
    transition: .5s;
}
#cart-product-list{

    padding: 20px 5px ;
    position: fixed;
    top: 72px;
    right: -320px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: #260101;
    backdrop-filter: blur(10px);
    max-height: 100vh;
    width: 320px;
    transition: right .7s;
    z-index: 26;
    border-end-start-radius: 10px;

}

#cart-product-list h4{

    text-align: start;
    color: white;
}

#cart-product-list h4 span{

    color: white;
}

#btn_foods, #btn_drinks, #btn_fruits, #btn_frozen_foods, #btn_personal_hygiene, #btn_cleanliness, #btn_sweets{
    display: none;
}

.option-menu{

    width: 90%;
    padding: 5px 0;
    text-align: center;
    color: white;
    border-radius: 3px;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid white;
}

.option-menu:hover{
    box-shadow: 0 0 3px white, 0 0 6px white;
}

/*========== Campo de pesquisa de produto =============*/
#box-search-products{

    position: fixed;
    right: -320px;
    top: 72px;
    max-height: 100vh;
    width: 320px;
    background-color: #260101;
    backdrop-filter: blur(10px);
    border-end-start-radius: 10px;
    z-index: 26;
    padding: 20px 2px 10px 2px;
    transition: .5s;
    overflow: hidden;

}

#div-field-search-products{
    text-align: center;
    width: 98%;
    margin: 0 auto;
    border: 1px solid black;
    background-color: rgba(0, 0, 0, .35);
    border-radius: 4px;

}

#field-search-products{
    height: 100%;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    color: white;
    background-color: transparent;
    border: 1px solid transparent;
}

.separation-line{
    width: 98%;
    background-color: white;
    box-shadow: 0 0 10px white;
    margin: 5px auto;
}

#list_products_searched, #add_products_list{
    
    
    overflow-y: auto; 
    width: 100%;
    padding: 5px;
    position: relative;
}

#add_products_list{
    
    max-height: 60vh;
}

#list_products_searched{
    max-height: 75vh;
}

#box-btns-header{

    display: flex;
    gap: 7px;
    
}
#loader {
    display: none;
    margin: 0 auto;
    border: 3px solid #f3f3f3; 
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
.btns-header{

    padding: 5px;
    background-color: rgba(0, 0, 0, .45);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    cursor: pointer;
}

#btn-product{
    display: none;
}

#btn-user{
    display: none;
}

@media (max-width: 480px){
    
    #box-options-nav{

        padding: 40px 5px ;
        position: fixed;
        top: 60px;
        right: -320px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        background-color: #260101;
        backdrop-filter: blur(5px);
        height: 100vh;
        width: 320px;
        transition: right .7s;
        z-index: 26;
    }

    #box_nav{
        display: flex;
    }

    #box-access-message{
        width: 90%;   
    }   
}

@media (max-width: 375px){

    #box-search-products, #cart-product-list, #box-options-nav{
        width: 100%;
        right: -375px;
    }

    #box-options-nav{

        height: 90vh;
    }

    #box-options-nav a{
        
        padding: 8px;
        font-size: 17px;
    }

    #cart-product-list{
        height: 87vh;
    }
    #box-search-products{
        
        height: 87vh;
        padding-bottom: 45px;
    }
    #box-access-message{
        top: 20px; 
    }  
    
}