/* ------------------------------- product_search --------------------------  */


.post_search{
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    background-color: rgb(31, 29, 28);
    padding: 4rem;
    min-height: 78vh;
}
.post_search .search-result{
    color: aliceblue;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.post_search .order {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.post_search.search{
    width: 30%;
}
.post_search .search form{
    width: 100%;
    padding-bottom: .5rem;
    border-bottom: 1px solid white;
}
.post_search .search form input{
    width: 100%;
    padding: .5rem 1rem;
    background-color: transparent;
    border: none;
    outline: none;
    color: aliceblue;
}
.post_search form{
    width: 60%;
    display: flex;
    justify-content: start;
    align-items: center;
}
.post_search .form_row{
    display: flex;
    justify-content: space-between;
    width: 70%;
}
.post_search .form_row label{
    display: flex;
    justify-content: start;
    align-items: center;
    color: aliceblue;
    margin: 0;
    width: 20%;
}
.post_search .form_row select{
    width: 80%;
    outline: none;
    border: none;
    background-color: rgb(37, 37, 37);
    color: aliceblue;
    padding: .5rem 1rem;
    border-radius: 5px;
}
.post_search .confirm{
    margin-right: 1rem;
}
.post_search .confirm button{
    padding: .5rem 3rem;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    border-radius: 8px;
}
.post_search .confirm button:hover{
    background-color: rgb(252, 187, 66);
    color: aliceblue;
}
.post_search .box{
    padding: 1rem;
    background-color: rgb(15, 15, 15);
    display: flex;
    align-items: start;
    justify-content: start;
    border-radius: 5px;
    box-shadow: 1px 1px 15px rgb(24, 23, 23);
}
.post_search .box .image{
    width: 300px;
    height: 180px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: start;
}
.post_search .box img{
    width: 130%;
}
.post_search .content{
    padding-right: 2rem;
    width: 80%;
    color: white;
}
.post_search .titr{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.post_search .category_color{
    padding: .5rem 1.5rem;
    margin: 0;
}
.post_search .offer-box{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: .5rem;
    border-radius: .5rem;
    color: aliceblue;
    margin-left: 10px;
}
.post_search .offer-box .offer-price{
    padding: .5rem;
    gap: 1rem;
    box-shadow: 2px 2px 5px black;
    background-color: #e73469;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.post_search .date{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.post_search .text{
    margin-top: 1rem;
    padding-top: 1rem;    
    padding-left: 1rem;

} 
.post_search .auth-but{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
}
.post_search .auth-but .price{
    background-color: #08914d;
    padding: .5rem;
    border-radius: .5rem;
}
.post_search .profile{
    display: flex;
    justify-content: start;
    align-items: center;
}
.auth-but .btn{
    margin: 0;
    padding: 0;    
    padding-left: 1rem;
}
.btn form button{
    border-radius: 4px;
    background-color: black;
    color: aliceblue;
    border: none;
}
.post_search .post-link,.post-link:hover{
    margin: 0;
    padding: .5rem 2rem !important;
    border-radius: 4px;
    background-color: rgb(54, 54, 54);
    color: rgb(172, 172, 172);
}
.btn .post-link:hover{
    color: aliceblue;
}

.post_search h4{
    margin: 0;
}



/* ----------------------------       product_list        ----------------------------- */




.product_lists{
    display: flex;
    justify-content: start;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    background-color: rgb(31, 29, 28);
    padding: 4rem;
    min-height: 78vh;
}
.product_lists .order {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.product_lists .order h5{
    display: none;
}
.product_lists .search{
    width: 30%;
    font-size: 14px;
}
.product_lists .search form{
    width: 100%;
    padding-bottom: .5rem;
    border-bottom: 1px solid white;
}
.product_lists .search form input{
    width: 100%;
    padding: .5rem 1rem;
    background-color: transparent;
    border: none;
    outline: none;
    color: aliceblue;
}
.product_lists form{
    width: 60%;
    display: flex;
    justify-content: start;
    align-items: center;
}
.product_lists .form_row{
    display: flex;
    justify-content: space-between;
    width: 70%;
}
.product_lists .form_row label{
    display: flex;
    justify-content: start;
    align-items: center;
    color: aliceblue;
    margin: 0;
    width: 20%;
}
.product_lists .form_row select{
    width: 80%;
    outline: none;
    border: none;
    background-color: rgb(37, 37, 37);
    color: aliceblue;
    padding: .5rem 1rem;
    border-radius: 5px;
}
.product_lists .confirm{
    margin-right: 1rem;
}
.product_lists .confirm button{
    padding: .5rem 3rem;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    border-radius: 8px;
    font-size: 14px;
}
.product_lists .confirm button:hover{
    background-color: rgb(252, 187, 66);
    color: aliceblue;
}
.product_lists .product_box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
}
.product_lists .box{
    width: 23%;
    padding: 1rem;
    background-color: rgb(15, 15, 15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    border-radius: 5px;
    box-shadow: 1px 1px 15px rgb(24, 23, 23);
    position: relative;
    overflow: hidden;
}
.product_lists .offer-box{
    display: flex;
    position: absolute;
    flex-direction: row;
    justify-content:center;
    align-items: center;
    padding: .5rem;
    border-radius: .5rem;
    color: aliceblue;
    left: .5rem;
    top: .5rem;
}
.product_lists .offer-box .offer-price{
    padding: .5rem;
    gap: .5rem;
    text-shadow: 2px 2px 5px black;
    box-shadow: 2px 2px 5px black;
    background-color: #f3212c;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}
.product_lists .box .image{
    width: 300px;
    height: 180px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: start;
}
.product_lists .box img{
    width: 120%;
}
.product_lists .product_box .content{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    color: white;
    font-size: 14px;
}
.product_lists .titr{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.product_lists .category_color{
    padding: .5rem 1.5rem;
    margin: 0;
    text-shadow: 2px 2px 5px black;
}
.product_lists .text{
    margin-top: 1rem;
    font-size: 14px;
} 
.product_lists .price-but{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 1rem 1rem 1rem;
}
.product_lists .profile{
    display: flex;
    justify-content: start;
    align-items: center;
}
.price-but .btn{
    margin: 0;
    padding: 0;    
}
.btn form button{
    border-radius: 4px;
    background-color: black;
    color: aliceblue;
    border: none;
}
.product_lists form button a{
    margin: 0;
    padding: .5rem 2rem !important;
    border-radius: 4px;
    border:2px solid #08914d;
    color: rgb(172, 172, 172);
    font-size: 12px;
}
.product_lists .product-link:hover{
    margin: 0;
    padding: .5rem 2rem !important;
    border-radius: 4px;
    background-color: rgb(17, 173, 87);
    color: rgb(172, 172, 172);
}
.btn .product-link:hover{
    color: aliceblue;
}

.product_lists h4{
    margin: 0;
}



/* ----------------------        page_product         ------------------------- */




.product-box a,a:hover{
    color: aliceblue;
    text-decoration: none;
}
.product-page{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding: 1rem;
    background-color: rgb(18, 18, 19);
    min-height: 78vh;

}
.product-back{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
}
.product-box {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    border-radius: 15px;
    box-shadow: 2px 2px 10px black;
    padding: 2rem;
    color: aliceblue;
    background-color:rgba(0, 0, 0, 0.438);
    backdrop-filter: blur(5px);
    background-blend-mode: darken;
}
.product-box .image{
    width: 40%;
    height: 300px;
    overflow: hidden;
    border-radius:5px ;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.product-box .image img{
    width: 100%;
}
.product-box .content{
    padding: 0 3rem 0 1rem;
    width: 60%;
}
.product-box .titr{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.product-box .titr h5{
    margin: 0 !important;
}
.product-box .titr a{

    font-size: 12px;
    text-shadow: 2px 2px 3px black;
}
.product-box .full_time{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.product-box .full_time h5{
    margin: 0 1rem 0 1rem;
}
.product-box .date_time{
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.418);

}
.product-box .time{
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid rgba(255, 255, 255, 0.418);
}
.product-box .date{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    font-size: 14px;
}
.product-box .text{
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.418);
    font-size: 14px;
} 
.product-box .price{
    width: fit-content;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 16px;
    padding: 1rem;
    color: rgb(255, 255, 255);
    border-radius: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.418);
    background-color: rgba(189, 189, 189, 0.185);
}
.product-box .price h5{
    font-size: 16px;
    margin: 0 !important;
}
.product-box .buy_item{
    margin-top: 2rem;
    text-align: end;
    display: flex;
    align-items: center;
    justify-content: end;
}
.product-box .buy_item form{
    background-color: rgb(250, 57, 67);
    padding-right: .5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
}
.buy_item form select{
    outline: none;
    border: none;
    background-color: rgb(250, 57, 67);
    color: aliceblue;
}
.product-box .buy_clik{
    color: aliceblue;
    background-color: transparent;
    font-size: 13px;
}
.product-box .price h4{
    margin: 0;
    text-shadow: 2px 2px 4px black;
}
.product-box .price span{
    margin-right:.5rem ;
    text-shadow: 2px 2px 4px black;
    color: rgb(42, 209, 126);
}
.offer-box{
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: .5rem;
    border-radius: .5rem;
    color: rgb(8, 8, 8);
    font-size: 12px;
}
.offer-box .offer-price{
    padding: 1rem;
    gap: 1rem;
    background-color: #dfc531;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comment-box {
    display: flex;
    width: 100%;
    justify-content: start;
    padding: 2rem;
    flex-direction: column;
}
.comment-box span {
   font-size: 14px;
}
.comment-box form{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: start ;
    font-size: 14px;
}
.comment-box .form_row{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
}
.comment-box .form_row label{
    width: 20%;
}
.comment-box .form_row textarea{
    width: 100%;
    padding: 1rem;
    color:white;
    border: none;
    outline: none;
    background-color: rgb(29, 29, 29);
}
.comment-box .sub-form{
    margin: 1rem 1rem 1rem 0;
}
.comment-box .sub-form button{
    font-size: 12px;
}
/* --------------------------   ****    resposive dasboard   *****    ---------------------------- */

@media only screen and (max-width: 1465px) {
    
    /* ------------- products */
    .product_lists .product_box .price-but{
       flex-direction: column;
    }
    .product_lists .product_box .price-but .price{
        margin-bottom: 1rem;
    }
    .product_lists .product_box .box .offer-box {
        left: 2px;
        font-size: 12px;
    }
    .product_lists .product_lists .product_box .box{
        width: 20%;
    }
    .product_lists .product_box .box .image{
        width: 100%;
        height: auto;
    }
    .product_lists .product_box .product_box{
        align-items: start;
    }
    
    .product_lists .product_box .text {
        font-size: 12px;
    }
     
    /* ---------- pro_search */

    .product_lists form{
        width: 70%;
    }
    .product_lists .search{
        width: 20%;
        font-size: 12px;
    }
    .product_lists .search i{
        font-size: 1rem;
    }
    .product_lists .search form{
        padding: 0;
    }
    .product_lists .form_row label{

        font-size: 11px;
    }
    .product_lists .form_row select{
        width: 80%;
        font-size: 12px;
    }
    .product_lists .confirm button{
        font-size: 12px;
    }

  }
@media only screen and (max-width: 1415px) {
    .product_box .box .offer-box .price_number{
        display: none;
    }

}
@media only screen and (max-width: 1315px) {
    .product_box .titr h5{
        font-size: 16px;
    }
    .product_box .date{
        font-size: 12px;
    }
}
@media only screen and (max-width: 1215px) {
    .product_box .box .offer-box .price_number{
        display: none;
    }
    .product_box .box .offer-box {
        font-size: 10px;
    }

}
@media only screen and (max-width: 1150px) {
    .product_lists .box {
        width: 30%;
    }
    .product_lists .box .text{
        font-size: 10px;
    }
}
@media only screen and (max-width: 800px) {
    .product_lists .box {
        width: 40%;
    }

}
@media only screen and (max-width: 850px) {
    .product_lists .confirm, .form_row label , select {
        font-size: 10px;
    }
    .product_lists .order{
        flex-direction: column;
    }
    .product_lists .order ,.search{
        margin-top: 1rem;
    }
    .product_lists .order form .form_row{
        flex-direction: column;
        width: 100%;
    }
    .product_lists .order form .form_row select{
        width: 100%;
    }
    .product_lists .order form .form_row label{
        display: none;
    }
    .product_lists form {
        width: 80%;
        justify-content: space-between;
    }
    .product_lists .order h5{
        display: flex;
        font-size: 14px;
        color: aliceblue;
    }
    .product_lists .search {
        width: 80%;
        font-size: 12px;
    }
}

@media only screen and (max-width: 620px) {
    .product_lists .box {
        width: 65%;
    }
    .product_lists {
        padding: 1rem;
    }
    .product-box {
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }
    .product-box .image {
        width: 100%;
    }
    .product-box .content {
        width: 100%;
        margin-top: 1rem;
        padding: .5rem;
    }
    .product-box .date {
        font-size: 11px;
    }
    .product-box .text {
        font-size: 11px;
    }
    .product-box .price {
        font-size: 11px;
    }

}
@media only screen and (max-width: 500px) {
    .product_lists .box {
        width: 80%;
    }
    .star-rank{
        flex-direction: column;
    }
    .star-rank span{
        margin-bottom: 1rem;
        margin-right: 0 !important;
    }
    .comment-box .form_row {
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }

}