/*==========================================================
    Sean B Shop Marketplace
    File: assets/css/components/ratings.css
    Part 5.4 - Ratings & Reviews System
==========================================================*/


/*==========================================================
    STAR RATING BASE
==========================================================*/

.rating{

    display:flex;

    align-items:center;

    gap:6px;

}


.rating-stars{

    display:flex;

    align-items:center;

    gap:3px;

}


.rating-stars i{

    color:#f5a623;

    font-size:1rem;

}


/*==========================================================
    EMPTY STAR
==========================================================*/

.star-empty{

    color:var(--gray-300)!important;

}


/*==========================================================
    HALF STAR SUPPORT
==========================================================*/

.star-half{

    position:relative;

    display:inline-block;

    color:var(--gray-300);

}


.star-half::before{

    content:"\f005";

    position:absolute;

    left:0;

    top:0;

    width:50%;

    overflow:hidden;

    color:#f5a623;

    font-family:"Font Awesome 6 Free";

    font-weight:900;

}


/*==========================================================
    RATING SCORE
==========================================================*/

.rating-score{

    font-size:.95rem;

    font-weight:var(--fw-bold);

    color:var(--text-primary);

}


.rating-count{

    font-size:.85rem;

    color:var(--text-muted);

}


/*==========================================================
    SMALL PRODUCT RATING
==========================================================*/

.product-rating{

    display:flex;

    align-items:center;

    gap:8px;

}


.product-rating .rating-stars i{

    font-size:.85rem;

}


/*==========================================================
    RATING SUMMARY BOX
==========================================================*/

.rating-summary{

    display:flex;

    gap:40px;

    padding:var(--space-6);

    background:var(--white);

    border:1px solid var(--border-color);

    border-radius:var(--radius-lg);

}


/*==========================================================
    OVERALL SCORE
==========================================================*/

.rating-average{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-width:150px;

}


.rating-average-number{

    font-size:3rem;

    font-weight:var(--fw-bold);

    color:var(--text-primary);

}


.rating-average-text{

    font-size:.85rem;

    color:var(--text-muted);

}


/*==========================================================
    RATING BREAKDOWN
==========================================================*/

.rating-breakdown{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:12px;

}


/*==========================================================
    RATING BAR ROW
==========================================================*/

.rating-bar-row{

    display:flex;

    align-items:center;

    gap:12px;

}


.rating-label{

    width:35px;

    font-size:.85rem;

    font-weight:var(--fw-semibold);

}


.rating-progress{

    flex:1;

    height:8px;

    background:var(--gray-200);

    border-radius:var(--radius-round);

    overflow:hidden;

}


.rating-progress span{

    display:block;

    height:100%;

    background:#f5a623;

    border-radius:inherit;

}


.rating-percentage{

    width:45px;

    text-align:right;

    font-size:.8rem;

    color:var(--text-muted);

}


/*==========================================================
    REVIEW SECTION
==========================================================*/

.reviews-section{

    margin-top:var(--space-8);

}


.reviews-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:var(--space-5);

}


.reviews-title{

    font-size:1.3rem;

    font-weight:var(--fw-bold);

}


/*==========================================================
    CUSTOMER REVIEW CARD
==========================================================*/

.review-card{

    padding:var(--space-5);

    background:var(--white);

    border:1px solid var(--border-color);

    border-radius:var(--radius-lg);

    margin-bottom:var(--space-4);

}


.review-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


/*==========================================================
    REVIEW USER
==========================================================*/

.review-user{

    display:flex;

    align-items:center;

    gap:12px;

}


.review-avatar{

    width:44px;

    height:44px;

    border-radius:50%;

    overflow:hidden;

    background:var(--gray-100);

}


.review-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}


.review-name{

    font-weight:var(--fw-semibold);

}


.review-date{

    font-size:.8rem;

    color:var(--text-muted);

}


/*==========================================================
    VERIFIED PURCHASE
==========================================================*/

.verified-purchase{

    display:inline-flex;

    align-items:center;

    gap:5px;

    padding:4px 10px;

    background:#e8f5e9;

    color:#2e7d32;

    border-radius:var(--radius-round);

    font-size:.75rem;

    font-weight:var(--fw-semibold);

}


.verified-purchase i{

    font-size:.75rem;

}


/*==========================================================
    REVIEW BODY
==========================================================*/

.review-rating{

    margin:12px 0;

}


.review-title{

    font-weight:var(--fw-bold);

    margin-bottom:8px;

}


.review-text{

    color:var(--text-secondary);

    line-height:1.7;

}


/*==========================================================
    REVIEW PHOTOS
==========================================================*/

.review-images{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:15px;

}


.review-image{

    width:75px;

    height:75px;

    border-radius:var(--radius-md);

    overflow:hidden;

}


.review-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/*==========================================================
    HELPFUL BUTTONS
==========================================================*/

.review-actions{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:20px;

}


.helpful-btn{

    display:flex;

    align-items:center;

    gap:6px;

    height:34px;

    padding:0 12px;

    border:1px solid var(--border-color);

    border-radius:var(--radius-round);

    color:var(--text-secondary);

    font-size:.85rem;

}


.helpful-btn:hover{

    color:var(--color-primary);

    border-color:var(--color-primary);

}


/*==========================================================
    REVIEW FILTERS
==========================================================*/

.review-filter{

    display:flex;

    gap:10px;

}


.review-filter button{

    padding:8px 16px;

    border-radius:var(--radius-round);

    border:1px solid var(--border-color);

    background:var(--white);

}


.review-filter button.active{

    background:var(--color-primary);

    color:var(--white);

}


/*==========================================================
    MOBILE RESPONSIVE
==========================================================*/

@media(max-width:768px){


    .rating-summary{

        flex-direction:column;

        gap:25px;

    }


    .rating-average-number{

        font-size:2.5rem;

    }


    .reviews-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }


    .review-header{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }


    .review-actions{

        flex-wrap:wrap;

    }


}


@media(max-width:480px){


    .rating-stars i{

        font-size:.8rem;

    }


    .review-card{

        padding:var(--space-4);

    }


    .review-image{

        width:60px;

        height:60px;

    }


    .rating-bar-row{

        gap:8px;

    }

}