.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: Arial, sans-serif;
}

.star-rating .star {
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
    font-size: 14px;
}

.star-rating .star.empty {
    color: #ddd;
}

.star-rating .star.average.filled {
    color: #ffc107;
}

.star-rating .star.average.partial {
    background: linear-gradient(to right, #ffc107 var(--fill-percentage, 0%), #ddd var(--fill-percentage, 0%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.star-rating .star.user.filled {
    color: #ac07ff;
}

.star-rating .star.user {
    cursor: pointer;
}

.star-rating .star.user.cancel.enabled {
    color: #ff0707;
}

.star-rating .star.user.cancel.disabled {
    color: #8a5151;
    cursor: default;
    pointer-events: none;
}

.star-rating .star.user.hovered {
    color: #7707ff;
}

.star-rating.loading {
    opacity: 0.6;
    pointer-events: none;
}