/* ==========================================================================
   Stele de review — definitie UNICA pentru tot site-ul
   --------------------------------------------------------------------------
   - culoare: galbenul standard al review-urilor (#FBBC04, ca in Google); stelele goale: gri neutru
   - desen: stea cu varfuri rotunjite, 5 stele pe 160x28 (aceeasi masca pentru ambele variante de mai jos)
   - doua moduri de randare, acelasi aspect:
       1) .av-rating__stars  — marcaj propriu (homepage, lista de produse): umplerea o da --av-rating
          (procent calculat pe stele in PHP: nota * latimea unei stele + decalaj)
       2) .jratingaverage    — widgetul jRating (pagina de produs, review-uri): scriptul seteaza latimile,
          iar aici ii inlocuim doar aspectul (imaginea .jStar se ascunde, masca da forma)
   Incarcat din homepage.phtml, pagedProducts.phtml si newproduct.phtml (versiune = filemtime).
   ========================================================================== */

:root {
    --av-star: #fbbc04;
    --av-star-off: #4a4b50;
    --av-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 28'%3E%3Cg fill='%23000' stroke='%23000' stroke-width='.9' stroke-linejoin='round'%3E%3Cpath transform='translate(16 14) scale(1.55) translate(-12 -11.4)' d='M12 3.4l2.5 5.3 5.8.8-4.2 4.1 1 5.8L12 16.6 6.9 19.4l1-5.8L3.7 9.5l5.8-.8z'/%3E%3Cpath transform='translate(48 14) scale(1.55) translate(-12 -11.4)' d='M12 3.4l2.5 5.3 5.8.8-4.2 4.1 1 5.8L12 16.6 6.9 19.4l1-5.8L3.7 9.5l5.8-.8z'/%3E%3Cpath transform='translate(80 14) scale(1.55) translate(-12 -11.4)' d='M12 3.4l2.5 5.3 5.8.8-4.2 4.1 1 5.8L12 16.6 6.9 19.4l1-5.8L3.7 9.5l5.8-.8z'/%3E%3Cpath transform='translate(112 14) scale(1.55) translate(-12 -11.4)' d='M12 3.4l2.5 5.3 5.8.8-4.2 4.1 1 5.8L12 16.6 6.9 19.4l1-5.8L3.7 9.5l5.8-.8z'/%3E%3Cpath transform='translate(144 14) scale(1.55) translate(-12 -11.4)' d='M12 3.4l2.5 5.3 5.8.8-4.2 4.1 1 5.8L12 16.6 6.9 19.4l1-5.8L3.7 9.5l5.8-.8z'/%3E%3C/g%3E%3C/svg%3E");
}

/* 1) marcaj propriu */
.av-rating__stars {
    --av-rating: 0%;
    display: inline-block;
    flex: none;
    width: 84px;
    aspect-ratio: 160 / 28;
    background: linear-gradient(90deg, var(--av-star) var(--av-rating), var(--av-star-off) var(--av-rating));
    -webkit-mask: var(--av-stars) 0 0 / 100% 100% no-repeat;
    mask: var(--av-stars) 0 0 / 100% 100% no-repeat;
}

/* 2) widgetul jRating (doar afisare) */
.jratingaverage {
    -webkit-mask: var(--av-stars) 0 0 / 100% 100% no-repeat;
    mask: var(--av-stars) 0 0 / 100% 100% no-repeat;
}

.jratingaverage .jRatingColor {
    background-color: var(--av-star-off) !important;
}

.jratingaverage .jRatingAverage2 {
    background-color: var(--av-star) !important;
}

.jratingaverage .jStar {
    display: none !important;
}