.rating-stars {
    --rating-percent: 0%;
    --rating-size: 32px;
    --rating-empty-color: #ffffff;
    --rating-fill-color: #000000;
    --rating-stroke-color: #000000;

    position: relative;
    display: inline-block;
    font-size: var(--rating-size);
    line-height: 1;
    font-family: Arial, sans-serif;
    vertical-align: middle;
}

.rating-stars::before {
    content: "☆☆☆☆☆";
    color: var(--rating-empty-color);
    -webkit-text-stroke: 1.5px var(--rating-stroke-color);
}

.rating-stars::after {
    content: "★★★★★";
    color: var(--rating-fill-color);
    position: absolute;
    top: 0;
    left: 0;
    width: var(--rating-percent);
    overflow: hidden;
    white-space: nowrap;
}

.rating-value {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    font-size: 0.95rem;
}