/*  ==========  #INFO  ==========  */

/* Ipad, laptop Devices < 1024px */
/* Tablet Devices < 767px */
/* Mobile Devices < 480px */
/* MINI Devices < 480px */

/*  ==========  END #INFO  ==========  */




/* ========== PROFILE STYLES ========== */
#profile .profile{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#profile .profile .avatar-icon{
    display: flex;
    justify-content: center;
}
#profile .profile .avatar-icon svg{
    width: 48px;
    height: 48px;
}
#profile .profile .title{padding: 0;}
#profile .profile .params{
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
}
#profile .profile .params .item{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#profile .profile .params .name{color: var(--color-text-secondary);}
#profile .profile .edit-button{
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: var(--color-blue-link-alpha);
    color: var(--color-blue-link);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 12px;
}
#profile .profile .edit-button:hover{opacity: .85;}

#profile .nav-bar{
    display: flex;
    flex-direction: column;
}
#profile .nav-bar .item{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 14px;
    box-sizing: border-box;
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
}
#profile .nav-bar .item:hover{background-color: var(--color-gray-bg);}
#profile .nav-bar .item.active{
    background-color: rgb(90,191,112,.15);
    color: var(--color-main);
}
#profile .nav-bar .item.active svg path{stroke: var(--color-main);}
#profile .nav-bar .item.active::after{color: var(--color-main);}
#profile .nav-bar .item svg{
    width: 24px;
    height: 24px;
}
#profile .nav-bar .item::after{
    content: '\f054';
    position: absolute;
    right: 14px;
    font-size: 12px;
    font-family: var(--font-awesome-free);
    font-weight: 600;
    color: var(--color-text-secondary);
}

#profile .layout-default-main .page-header{font-size: 18px;}

#profile .simple-block .local-title{
    font-weight: 600;
    color: var(--color-black);
}
#profile .simple-block.empty-page .icon{
    width: 120px;
    height: 120px;
    padding: 12px;
    box-sizing: border-box;
    background-image: url('../assets/icons/empty-file.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 100px;
}
#profile .simple-block.empty-page .title{
    text-align: center;
    color: var(--color-black);
    font-size: 22px;
    font-weight: 700;
    margin-top: 15px;
}
#profile .simple-block.empty-page .text{
    text-align: center;
    color: var(--color-text-secondary);
    margin-top: 5px;
}
#profile .simple-block.empty-page .button{font-weight: 600;}
@media screen and (max-width: 767px){
    #profile .simple-block.empty-page .title{font-size: 20px;}
    #profile .simple-block.empty-page .text{font-size: 14px;}
}

#profile .profile-page .grid-col-2{gap: 40px;}
#profile .profile-page .group{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 12px;
}
#profile .profile-page .edit-profile-button{
    color: var(--color-blue-link);
    cursor: pointer;
}
#profile .profile-page .edit-profile-button:hover{opacity: .85;}
#profile .profile-page .edit-profile-button.costom{
    position: absolute;
    right: 0;
    font-size: 14px;
}
#profile .profile-page .action-button{
    padding-top: 25px;
}
@media screen and (max-width: 767px){
    #profile .profile-page .action-button .button{width: 100%;}
}

#profile .order-history-page .orders-list{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#profile .order-history-page .order{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--color-border); 
}
#profile .order-history-page .order .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#profile .order-history-page .order .top .status-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#profile .order-history-page .order .top .status{
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background-color: var(--color-gray-bg);
    color: var(--color-black);
}
#profile .order-history-page .order .top .status.success{
    color: var(--color-main);
    background-color: var(--color-main-alpha);
}
#profile .order-history-page .order .top .created-date{font-size: 14px;}
#profile .order-history-page .order .top .created-date .date{font-weight: 500;}
#profile .order-history-page .order .order-details{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
#profile .order-history-page .order .order-details .item{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
#profile .order-history-page .order .order-details span{
    font-size: 14px;
    color: var(--color-black);
}
#profile .order-history-page .order .order-details span.name{color: var(--color-text-secondary);}
#profile .order-history-page .order .cart-items{
    flex-direction: column;
    align-items: start;
    gap: 10px;
}
#profile .order-history-page .order .cart-item{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border-6);
    position: relative;
}
#profile .order-history-page .order .cart-item .info{
    flex: 1;
    max-width: 380px;
    display: flex;
    align-items: center;
    gap: 24px;
}
#profile .order-history-page .order .cart-item .image{
    width: 90px;
    height: 90px;
    object-fit: contain;
}
#profile .order-history-page .order .cart-item .details{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
}
#profile .order-history-page .order .cart-item  .code,
#profile .order-history-page .order .company{
    color: var(--color-text-secondary) !important;
}
#profile .order-history-page .order .cart-item .title{
    font-size: 16px;
    color: #131313;
    font-weight: 500;
    margin-bottom: 5px;
    
    color: #131313;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
#profile .order-history-page .order .cart-item .actions{
    max-width: 280px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}
#profile .order-history-page .order .cart-item .quantity,
#profile .order-history-page .order .cart-item .price,
#profile .order-history-page .order .cart-item .summ{
    width: 80px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-black);
}
#profile .order-history-page .order .cart-item .close{
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #f6f7f8;
    cursor: pointer;
}
#profile .order-history-page .order .cart-item .close:hover i{color: var(--color-light-red);}

@media screen and (max-width: 767px){
    #profile .order-history-page .order .top{
        gap: 20px;
        flex-direction: column;
        align-items: unset;
    }
}
@media screen and (max-width: 1024px){
    #profile .order-history-page .order .cart-item {flex-direction: column;}
    #profile .order-history-page .order .cart-item .info{
        padding-right: 50px;
        box-sizing: border-box;
        max-width: unset;
        width: 100%;
    }
    #profile .order-history-page .order .cart-item .actions{
        max-width: unset;
        width: 100%;
        justify-content: space-between;
    }
}

#profile .address-list-page .add-button-wrap{
    display: flex;
    justify-content: start;
    padding-bottom: 22px;
}
#profile .address-list-page .add-button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    background-color: var(--color-blue-link-alpha);
    color: var(--color-blue-link);
    font-size: 14px;
    font-weight: 500;
    padding: 18px 32px;
    box-sizing: border-box;
    border-radius: 8px;
    cursor: pointer;
}
#profile .address-list-page .add-button i{color: var(--color-blue-link);}
#profile .address-list-page .add-button:hover{opacity: .85;}

@media screen and (max-width: 767px){
    #profile .address-list-page .add-button{width: 100%;}
}
/* ========== END PROFILE STYLES ========== */