/* Pure-CSS 1-5 star rating input for the public "rate our site" widget.
   No JS dependency (index.php doesn't load jQuery, only Bootstrap 5 JS). */

.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 2rem;
    line-height: 1;
    color: #ccc;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #f5b301;
}

.star-rating input:focus-visible + label {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}