/* Rating Stars Component */
.rating-stars {
    display: flex;
    justify-content: center;
    direction: rtl;
    /* Reverse the order to make hover/marking work correctly */
    unicode-bidi: bidi-override;
    font-size: 2rem;
    color: #ddd;
    cursor: pointer;
}

.rating-stars input {
    display: none;
    /* Hide the radio buttons */
}

.rating-stars label {
    display: inline-block;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: #ddd;
    transition: color 0.2s ease;
}

.rating-stars label:before {
    content: "\2605";
    /* Unicode star character */
    display: block;
}

.rating-stars label:hover,
.rating-stars label:hover~label,
.rating-stars input:checked~label {
    color: #ffc107;
    /* Bootstrap warning color for gold stars */
}

/* For display-only ratings (not interactive) */
.rating-display {
    display: flex;
    font-size: 1.2rem;
    color: #ddd;
}

.rating-display .star {
    display: inline-block;
    padding: 0 1px;
    color: #ddd;
}

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

.rating-display .star.half {
    position: relative;
    color: #ffc107;
}

.rating-display .star.half:before {
    content: "\2606";
    /* Unicode outline star */
    position: absolute;
    left: 0;
    color: #ddd;
}

/* Size variations */
.rating-stars-sm,
.rating-display.rating-stars-sm {
    font-size: 1.5rem;
}

.rating-stars-lg,
.rating-display.rating-stars-lg {
    font-size: 2.5rem;
}

.modal .rating-stars {
    font-size: 1.8rem;
    margin: 10px 0;
}

/* Fix for Firefox and other browsers that might not support unicode-bidi properly */
@-moz-document url-prefix() {
    .rating-stars {
        direction: ltr;
    }

    .rating-stars label {
        float: right;
    }
}