/* Base setup */
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/* Ratings widget */
.rate {
    display: inline-flex;
    flex-direction: row-reverse;
    border: 0;
}

/* Add spacing ONLY after each full star */
.rate > label:nth-of-type(2n) {
    margin-left: 4px; /* adjust spacing */
}
/* Hide radio */
.rate > input {
    display: none;
}
.rate > label {
    position: relative;
}
/* The star of the show */
.rate > label:before {
    display: inline-block;
    font-size: 2rem;
    padding: .3rem 0.2rem;
    margin: 0;
    cursor: pointer;
    font-family: FontAwesome;
    content: "\f005 "; /* full star */
    /*border: solid 1px white;*/
}
/* Half star trick */
.rate .half:before {
    content: "\f089 "; /* half star no outline */
    position: absolute;
    padding-right: 0;
}
/* Click + hover color */
input:checked ~ label, /* color current and previous stars on checked */
label:hover, label:hover ~ label { color: #f2b600;  } /* color previous stars on hover */

/* Hover highlights */
input:checked + label:hover, input:checked ~ label:hover, /* highlight current and previous stars */
input:checked ~ label:hover ~ label, /* highlight previous selected stars for new rating */
label:hover ~ input:checked ~ label /* highlight previous selected stars */ { color: #f2b600;  } 

.rate > label:active {
    transform: scale(0.9);
}

.rate {
    touch-action: none;
}

/* ===== MOBILE FIX ===== */
@media (max-width: 768px) {

.rate > label:before {
    font-size: 1.2rem;
}
.rate > label {
    /*padding: 0.5rem;*/
    font-size: 0.9rem;
    }

    .rate {
        display: inline-flex;    /* better alignment */
        /*gap: 40px;                /* spacing between stars */
    }

}

/* Meta Info Styling */
.rating-meta { margin-top: 10px; color: #888; font-size: 0.9rem; }
.value { font-weight: bold; color: #FFD700; font-size: 1.2rem; }