/* =========================================================
   Super Farmers
   Product Reviews Showcase
   FINAL UI
========================================================= */


/* =========================================================
   Main layout

   LEFT  = Rating Summary
   RIGHT = Customer Reviews
========================================================= */

.sfpr-wrap {
    width: 100%;

    display: grid;

    grid-template-columns:
        245px
        minmax(0, 1fr);

    gap: 14px;

    align-items: stretch;

    direction: ltr;

    margin: 0;

    padding: 0;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.6;
}


/*
 * نعيد RTL داخل كل Block
 */
.sfpr-summary,
.sfpr-reviews-area {

    direction: rtl;

    text-align: right;

    background: #fff;

    border:
        1px solid
        #e7e9ec;

    border-radius: 12px;

    box-shadow:
        0 1px 2px
        rgba(0, 0, 0, .02);
}



/* =========================================================
   Rating Summary
========================================================= */

.sfpr-summary {

    padding:
        18px
        16px;

}


/* العنوان */

.sfpr-summary-title {

    margin:
        0
        0
        15px;

    color:
        #171717;

    font-size:
        19px;

    font-weight:
        700;

    line-height:
        1.35;
}


/* الرقم + النجوم */

.sfpr-summary-score-row {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        17px;
}


.sfpr-summary-score {

    color:
        #111827;

    font-size:
        38px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        -.5px;
}


.sfpr-summary-meta {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        4px;
}


.sfpr-summary-count {

    color:
        #8c939d;

    font-size:
        14px;

    font-weight:
        500;

    line-height:
        1.2;
}



/* =========================================================
   Stars
========================================================= */

.sfpr-stars {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        1px;

    direction:
        ltr;
}


.sfpr-star {

    color:
        #d9dde2;

    font-size:
        16px;

    line-height:
        1;
}


.sfpr-star.is-filled {

    color:
        #f5ab00;

}



/* =========================================================
   Rating Bars
========================================================= */

.sfpr-rating-bars {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.sfpr-rating-bar-row {

    display:
        grid;

    grid-template-columns:
        46px
        minmax(70px, 1fr)
        46px;

    align-items:
        center;

    gap:
        7px;

    direction:
        rtl;
}


.sfpr-bar-label,
.sfpr-bar-percent {

    color:
        #676e78;

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.2;

    white-space:
        nowrap;
}


.sfpr-bar-label {

    text-align:
        right;
}


.sfpr-bar-percent {

    text-align:
        left;
}


.sfpr-bar-track {

    position:
        relative;

    width:
        100%;

    height:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #e9ecef;
}


.sfpr-bar-fill {

    position:
        absolute;

    top:
        0;

    right:
        0;

    height:
        100%;

    border-radius:
        inherit;

    background:
        #49b56d;
}



/* =========================================================
   Customer Reviews Area
========================================================= */

.sfpr-reviews-area {

    min-width:
        0;

    padding:
        18px;
}


/* Header */

.sfpr-reviews-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        15px;
}


.sfpr-reviews-title {

    margin:
        0;

    color:
        #171717;

    font-size:
        19px;

    font-weight:
        700;

    line-height:
        1.35;
}


.sfpr-all-reviews-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #26763e;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.2;

    text-decoration:
        none !important;

    transition:
        color .2s ease;
}


.sfpr-all-reviews-link:hover {

    color:
        #174f2a;

    text-decoration:
        none !important;
}


.sfpr-link-arrow {

    font-size:
        15px;

    line-height:
        1;
}



/* =========================================================
   Carousel
========================================================= */

.sfpr-carousel {

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    padding:
        0;
}


.sfpr-viewport {

    width:
        100%;

    overflow:
        hidden;
}


.sfpr-track {

    display:
        flex;

    flex-wrap:
        nowrap;

    gap:
        12px;

    width:
        100%;

    direction:
        ltr;

    will-change:
        transform;

    transition:
        transform
        .45s
        cubic-bezier(.4, 0, .2, 1);
}



/* =========================================================
   Review Card
========================================================= */

.sfpr-review-card {

    direction:
        rtl;

    position:
        relative;

    flex:
        0 0
        calc(
            (100% - 24px) / 3
        );

    min-width:
        calc(
            (100% - 24px) / 3
        );

    min-height:
        172px;

    padding:
        15px
        14px;

    overflow:
        hidden;

    background:
        #fff;

    border:
        1px solid
        #e6e9ed;

    border-radius:
        11px;

    text-align:
        right;

    box-shadow:
        0 1px 2px
        rgba(0, 0, 0, .015);
}



/* =========================================================
   Heart
========================================================= */

.sfpr-card-fav {

    position:
        absolute;

    top:
        12px;

    left:
        12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    color:
        #a0a7b0;

    background:
        #fff;

    border:
        1px solid
        #dfe3e8;

    border-radius:
        50%;

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1;
}



/* =========================================================
   Customer
========================================================= */

.sfpr-review-head {

    margin-bottom:
        8px;

    padding-left:
        34px;
}


.sfpr-review-user {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.sfpr-review-avatar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0
        38px;

    width:
        38px;

    height:
        38px;

    overflow:
        hidden;

    background:
        #f1f3f5;

    border-radius:
        50%;
}


.sfpr-review-avatar img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.sfpr-review-avatar--letter {

    color:
        #333;

    font-size:
        14px;

    font-weight:
        600;
}


.sfpr-review-user-meta {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1px;

    min-width:
        0;
}


.sfpr-review-name {

    color:
        #171717;

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.35;
}


.sfpr-review-date {

    color:
        #969da6;

    font-size:
        11px;

    font-weight:
        400;

    line-height:
        1.3;
}



/* =========================================================
   Card stars
========================================================= */

.sfpr-review-card
.sfpr-stars {

    margin-bottom:
        8px;
}


.sfpr-review-card
.sfpr-star {

    font-size:
        14px;
}



/* =========================================================
   Review Text
========================================================= */

.sfpr-review-text {

    display:
        -webkit-box;

    overflow:
        hidden;

    color:
        #42474e;

    font-size:
        13px;

    font-weight:
        400;

    line-height:
        1.75;

    -webkit-line-clamp:
        3;

    -webkit-box-orient:
        vertical;
}



/* =========================================================
   No Reviews
========================================================= */

.sfpr-no-reviews {

    padding:
        18px
        0;

    color:
        #707782;

    font-size:
        14px;
}



/* =========================================================
   REMOVE NAVIGATION ARROWS COMPLETELY
========================================================= */

.sfpr-nav,
.sfpr-nav-prev,
.sfpr-nav-next {

    display:
        none !important;

}



/* =========================================================
   Tablet
========================================================= */

@media
(max-width: 1024px) {

    .sfpr-wrap {

        grid-template-columns:
            220px
            minmax(0, 1fr);

        gap:
            12px;
    }


    .sfpr-review-card {

        flex:
            0 0
            calc(
                (100% - 12px) / 2
            );

        min-width:
            calc(
                (100% - 12px) / 2
            );
    }

}



/* =========================================================
   Mobile
========================================================= */

@media
(max-width: 767px) {

    .sfpr-wrap {

        display:
            flex;

        flex-direction:
            column;

        gap:
            12px;
    }


    /*
     * Reviews first on mobile
     */
    .sfpr-reviews-area {

        order:
            1;
    }


    .sfpr-summary {

        order:
            2;
    }


    .sfpr-summary,
    .sfpr-reviews-area {

        padding:
            15px;
    }


    .sfpr-summary-title,
    .sfpr-reviews-title {

        font-size:
            18px;
    }


    .sfpr-summary-score {

        font-size:
            34px;
    }


    .sfpr-review-card {

        flex:
            0 0
            100%;

        min-width:
            100%;

        min-height:
            160px;
    }


    .sfpr-reviews-header {

        gap:
            8px;
    }


    .sfpr-all-reviews-link {

        font-size:
            12px;
    }

}