.rating {
    display: inline-block;
    direction: rtl;            /* zodat ~ de “linker” sterren pakt */
    unicode-bidi: bidi-override;
    font-size: 24px;           /* stergrootte */
    line-height: 1;
}
.rating input {
    /* visueel verbergen, maar focusbaar/semantisch blijven */
    position: absolute !important;
    clip: rect(0 0 0 0);
    width: 1px; height: 1px; margin: -1px; overflow: hidden; border: 0; padding: 0;
}
.rating label {
    display: inline-block;
    cursor: pointer;
    color: #ddd;               /* inactief */
    padding: 0 2px;
}
.rating label::before {
    content: "★";
}
/* Hover preview */
.rating label:hover,
.rating label:hover ~ label {
    color: #f5b301;
}
/* Gekozen waarde */
.rating input:checked ~ label {
    color: #f5b301;
}

/* === Star rating (groter + subtiele gele focus-ring) === */
.rating{
    /* pas grootte makkelijk aan met deze variabele */
    --star-size: 32px;              /* maak groter/kleiner naar wens */
    --star-color: #ddd;             /* inactief */
    --star-active: #f5b301;         /* actief/hover */
    --focus-ring: #f5c400;          /* geel randje bij focus */

    display:inline-block;
    direction: rtl;                 /* zodat ~ links vult */
    unicode-bidi: bidi-override;
    font-size: var(--star-size);
    line-height: 1;
}

.rating input{
    position:absolute !important;
    clip: rect(0 0 0 0);
    width:1px; height:1px; margin:-1px; overflow:hidden; border:0; padding:0;
}

.rating label{
    position: relative;             /* nodig voor focus-ring */
    display:inline-block;
    font-size: 22px;
    cursor:pointer;
    color: var(--star-color);
    padding: 2px;                   /* klein beetje ruimte voor het ringetje */
    border-radius: 50%;             /* ronde focus-ring */
}
.rating label::before{ content:"★"; }

/* Hover preview */
.rating label:hover,
.rating label:hover ~ label{ color: var(--star-active); }

/* Gekozen waarde */
.rating input:checked ~ label{ color: var(--star-active); }

/* Subtiele gele ronde focus-indicator (ipv blauw vierkant) */
.rating input:focus + label::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    transform: translate(-50%,-50%);
    width: 1.9em;                   /* rondje schaalt met stergrootte */
    height: 1.9em;
    border: 1.5px solid var(--focus-ring);
    border-radius:50%;
    box-shadow: 0 0 0 2px rgba(245,196,0,.15); /* heel subtiele gloed */
    pointer-events:none;            /* klik valt nog op de ster */
}
/* container highlight als rating ontbreekt */
.rating.is-invalid{
    border:1px solid #d9534f;        /* BS3 danger */
    box-shadow: inset 0 0 0 2px #f2dede;
    border-radius:8px;
    padding:6px 8px;                  /* kleine binnenruimte voor de rand */
}

/* alleen na een submitpoging of via JS */
form.was-validated #rating:has(input[required]:invalid),
#rating.is-invalid{
    border:1px solid #d9534f;
    box-shadow: inset 0 0 0 2px #f2dede;
    border-radius:8px;
    padding:6px 8px;
}

.form-control.is-invalid { border-color: #dc3545 !important; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(220,53,69,.25); }