/* Star Rating System CSS - Performance Optimized */

/* Preload all star images to prevent server requests on hover */
/* This creates invisible background images that force the browser to download them */
.star-rating::before {
    content: '';
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    background: url('/images/star-off.gif') no-repeat,
                url('/images/star-on.gif') no-repeat,
                url('/images/star-half.gif') no-repeat;
    visibility: hidden;
}

/* Star rating container */
.star-rating {
    display: inline-flex;
    flex-direction: row-reverse; /* Reverse the visual order to show 1-5 from left to right */
    line-height: 1;
    font-size: 0; /* Remove whitespace between inline elements */
    position: relative; /* For the ::before preloader */
}

/* Individual star styling */
.star {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('/images/star-off.gif');
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    margin-right: 1px;
    transition: background-image 0.1s ease;
}

/* Star states */
.star.star-off {
    background-image: url('/images/star-off.gif');
}

.star.star-on {
    background-image: url('/images/star-on.gif');
}

.star.star-half {
    background-image: url('/images/star-half.gif');
}

/* Hover effects - show filled stars up to the hovered star */
/* Reset all stars to empty on container hover */
.star-rating:hover .star {
    background-image: url('/images/star-off.gif');
}

/* Fill stars from left to the hovered star - now using ~ selector correctly with reversed DOM order */
.star-rating .star[data-rating="1"]:hover {
    background-image: url('/images/star-on.gif');
}

.star-rating .star[data-rating="2"]:hover,
.star-rating .star[data-rating="2"]:hover ~ .star[data-rating="1"] {
    background-image: url('/images/star-on.gif');
}

.star-rating .star[data-rating="3"]:hover,
.star-rating .star[data-rating="3"]:hover ~ .star[data-rating="1"],
.star-rating .star[data-rating="3"]:hover ~ .star[data-rating="2"] {
    background-image: url('/images/star-on.gif');
}

.star-rating .star[data-rating="4"]:hover,
.star-rating .star[data-rating="4"]:hover ~ .star[data-rating="1"],
.star-rating .star[data-rating="4"]:hover ~ .star[data-rating="2"],
.star-rating .star[data-rating="4"]:hover ~ .star[data-rating="3"] {
    background-image: url('/images/star-on.gif');
}

.star-rating .star[data-rating="5"]:hover,
.star-rating .star[data-rating="5"]:hover ~ .star[data-rating="1"],
.star-rating .star[data-rating="5"]:hover ~ .star[data-rating="2"],
.star-rating .star[data-rating="5"]:hover ~ .star[data-rating="3"],
.star-rating .star[data-rating="5"]:hover ~ .star[data-rating="4"] {
    background-image: url('/images/star-on.gif');
}

/* Disabled state during rating submission */
.star-rating.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.star-rating.disabled .star {
    cursor: not-allowed;
}

/* Loading state */
.star-rating.loading::after {
    content: ' Rating...';
    font-size: 12px;
    color: #666;
    margin-left: 8px;
}