.star-rating {
    width: 0;
    position: relative;
    display:inline-block;
    background-image: url(star_0.svg);
    background-position: 0 0;
    background-repeat: repeat-x;
    cursor: pointer;
}

.star-rating .star-value {
    position: absolute;
    height: 100%;
    width: 100%;
    background: url('./star_1.svg') ;
    background-repeat: repeat-x;
}

    /* Hover effect for interactive stars only */
    .star-rating.interactive:hover .star-value {
        box-shadow: 0 0 10px yellow; /* Yellow glow ONLY for interactive stars */
    }

    /* Read-only stars (everything same, but no hover effect) */
    .star-rating.readonly {
        cursor: default; /* Prevents click interaction */
    }

        .star-rating.readonly .star-value {
            box-shadow: none !important; /* Ensures no hover effect */
        }

.star-rating .star-value.rtl {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    right: 0;
    left: auto;
}