.cRating { display: flex;align-items: center;gap:2px; }
.cRating label { display: flex;flex-direction: column; align-items: center;cursor: pointer; }
.cRating input { display: none; }
.cRating span { width: 36px;height: 36px;border-radius: 8px;display: flex;align-items: center;justify-content: center;font-weight: bold;color: white;font-size: 12px; }
.cRating input:checked + span {
    border: 1px solid #0B4EA2;
    position: relative;
    background-color: #0B4EA2 !important;
    color:#FFF !important;
}
.cRating input:checked + span::before {
    content: "";
    position: absolute;
    bottom: -10px; /* pijltje onder het blokje */
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 10px 8px;
    border-style: solid;
    border-color: transparent transparent #0B4EA2 transparent;
}

.cRating label:nth-child(1) span { background-color: #008000; }
.cRating label:nth-child(2) span { background-color: #32CD32; }
.cRating label:nth-child(3) span { background-color: #7CFC00; }
.cRating label:nth-child(4) span { background-color: #ADFF2F; }
.cRating label:nth-child(5) span { background-color: #FFFF00; }
.cRating label:nth-child(6) span { background-color: #FFD700; }
.cRating label:nth-child(7) span { background-color: #FFA500; }
.cRating label:nth-child(8) span { background-color: #FF4500; }
.cRating label:nth-child(9) span { background-color: #FF0000; }
.cRating label:nth-child(10) span { background-color: #B22222; }
.cRating label:nth-child(11) span { background-color: #8B0000; }

@media (max-width: 768px) {
    .cRating span { width: 26px;height: 26px; }
}