/* Star Rating Component */
.rating-group {
    display: inline-flex;
    flex-direction: row-reverse;
    /* Allows hover visual logic */
    gap: 2px;
}

.rating-input {
    position: absolute !important;
    left: -9999px !important;
}

.rating-label {
    cursor: pointer;
    padding: 0 2px;
    font-size: 1.5rem;
    color: var(--border);
    /* Empty star color */
    transition: color 0.1s;
}

.rating-label::before {
    content: "★";
}

/* Hover & Checked interaction */
.rating-label:hover,
.rating-label:hover~.rating-label,
.rating-input:checked~.rating-label {
    color: var(--secondary);
    /* Filled star color */
}

/* Gradient Star Logic - Red to Green */

/* Star 1 - Red (Hover & Checked) */
.rating-input[value="1"]:checked~.rating-label,
.rating-input[value="1"]+.rating-label:hover,
.rating-input[value="1"]+.rating-label:hover~.rating-label {
    color: #ef4444 !important;
    /* danger */
}

/* Star 2 - Orange (Hover & Checked) */
.rating-input[value="2"]:checked~.rating-label,
.rating-input[value="2"]:checked~.rating-label:hover,
.rating-input[value="2"]+.rating-label:hover,
.rating-input[value="2"]+.rating-label:hover~.rating-label {
    color: #f97316 !important;
    /* primary */
}

/* Star 3 - Yellow (Hover & Checked) */
.rating-input[value="3"]:checked~.rating-label,
.rating-input[value="3"]:checked~.rating-label:hover,
.rating-input[value="3"]+.rating-label:hover,
.rating-input[value="3"]+.rating-label:hover~.rating-label {
    color: #eab308 !important;
    /* yellow-500 */
}

/* Star 4 - Lime (Hover & Checked) */
.rating-input[value="4"]:checked~.rating-label,
.rating-input[value="4"]:checked~.rating-label:hover,
.rating-input[value="4"]+.rating-label:hover,
.rating-input[value="4"]+.rating-label:hover~.rating-label {
    color: #84cc16 !important;
    /* lime-500 */
}

/* Star 5 - Green (Hover & Checked) */
.rating-input[value="5"]:checked~.rating-label,
.rating-input[value="5"]:checked~.rating-label:hover,
.rating-input[value="5"]+.rating-label:hover,
.rating-input[value="5"]+.rating-label:hover~.rating-label {
    color: #22c55e !important;
    /* success */
}

/* Smaller Stars for Compact UI */
.rating-label.text-sm-stars {
    font-size: 1.25rem;
    padding: 0 1px;
}