/* Algemene container voor het hele widget */
.klantenvertellen-widget-wrapper {
    display: flex;
    /* Gebruik flexbox voor twee kolommen */
    background-color: #000;
    /* Donkere achtergrond voor het geheel */
    color: #00313E;
    /* Goudkleurige tekst voor het geheel */
    font-family: Arial, sans-serif;
    max-width: 700px;
    /* Pas aan naar de breedte van uw afbeelding */
    margin: 30px auto;
    /* Centreer de widget */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    /* Lichte afronding van hoeken */
    overflow: hidden;
    /* Zorgt dat afgeronde hoeken correct zijn */
}

/* Linkerpaneel: De samenvattende scores */
.kv-left-panel {
    flex: 1;
    /* Neemt gelijke ruimte in */
    background-color: #000;
    /* Zwarte achtergrond */
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* Verdeelt ruimte tussen elementen */
    border-right: 1px solid #333;
    /* Subtiele scheiding */
}

.kv-logo img {
    max-width: 150px;
    /* Grootte van het logo */
    height: auto;
    margin-bottom: 20px;
}

.kv-score-summary,
.kv-recommendation {
    margin-bottom: 20px;
}

.kv-average-rating,
.kv-percentage {
    font-size: 60px;
    /* Groot cijfer */
    font-weight: bold;
    line-height: 1;
    display: block;
    position: relative;
    /* Voor de superscript 2 op de 9 van 9,2 */
    /* De API geeft dit niet direct, dus dit is een visuele trick */
    /* .kv-average-rating::after {
        content: '2'; 
        font-size: 0.5em; 
        position: absolute; 
        top: 0; 
        vertical-align: super;
        margin-left: -5px;
    } */
}

.kv-label {
    font-size: 16px;
    color: #aaa;
    /* Lichtere goudtint */
    margin-top: 5px;
}

/* Rechterpaneel: De gedetailleerde scores */
.kv-right-panel {
    flex: 1.5;
    /* Neemt meer ruimte in beslag */
    background-color: #fff;
    /* Witte achtergrond */
    color: #333;
    /* Donkere tekst */
    padding: 30px;
}

.kv-overall-score {
    font-size: 18px;
    font-weight: normal;
    color: #666;
    /* Grijs voor de tekst */
    margin-top: 0;
    margin-bottom: 10px;
}

.kv-review-count {
    font-weight: bold;
    color: #333;
}

.kv-divider {
    border: none;
    border-top: 1px solid #eee;
    margin: 15px 0;
}

.kv-detail-scores {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kv-detail-scores li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 15px;
}

.kv-category-name {
    flex: 2;
    /* Naam neemt meer ruimte in */
    color: #555;
}

.kv-category-stars {
    flex: 1;
    /* Sterren nemen ruimte in */
    text-align: center;
    color: #ffd700;
    /* Goudkleurige sterren */
    font-size: 16px;
    letter-spacing: 1px;
}

/* Specifieke styling voor sterren om de halve sterren van de afbeelding na te bootsen */
.kv-category-stars .kv-star {
    display: inline-block;
    width: 0.8em;
    /* Zorg dat sterren niet te veel ruimte innemen */
    overflow: hidden;
    /* Verberg delen van de ster indien nodig */
    position: relative;
}

.kv-category-stars .kv-full-star {
    color: #00313E;
    /* Gouden volle ster */
}

.kv-category-stars .kv-half-star {
    /* Dit is de tricky part om een halve ster te maken met één unicode teken */
    /* We gebruiken een volle ster en maskeren de helft */
    color: #00313E;
    /* Gouden kleur voor de zichtbare helft */
    /* De achtergrond ster is leeg */
    background: linear-gradient(to right, #00313E 50%, #eee 50%);
    /* Gouden links, grijze rechts */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Zorgt dat de tekstkleur verdwijnt en de gradient zichtbaar wordt */
}

.kv-category-stars .kv-empty-star {
    color: #eee;
    /* Lichtgrijs voor lege sterren */
}

.kv-category-value {
    flex: 0.5;
    /* Waarde neemt minder ruimte in */
    text-align: right;
    font-weight: bold;
    color: #333;
}

.kv-no-detail-scores {
    text-align: center;
    color: #888;
    padding: 20px;
}

/* Foutmeldingen */
.kv-error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    margin: 20px auto;
    max-width: 600px;
}

/* Responsive aanpassingen voor kleinere schermen */
@media (max-width: 600px) {
    .klantenvertellen-widget-wrapper {
        flex-direction: column;
        /* Stapel panelen onder elkaar */
        max-width: 100%;
        border-radius: 0;
    }

    .kv-left-panel {
        border-right: none;
        border-bottom: 1px solid #333;
        /* Scheiding onderaan */
    }
}

/* Latest Reviews Section */
.kv-latest-reviews {
    max-width: 700px;
    margin: 30px auto;
    padding: 0;
}

.kv-reviews-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    padding: 0 15px;
}

.kv-review-item {
    display: flex;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
    gap: 20px;
}

.kv-review-left {
    flex-shrink: 0;
    width: 80px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.kv-review-rating {
    font-size: 36px;
    font-weight: bold;
    color: #ffd700;
    line-height: 1;
}

.kv-review-right {
    flex: 1;
}

.kv-review-stars {
    color: #ffd700;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* Star styling for review stars */
.kv-review-stars .kv-star {
    display: inline-block;
}

.kv-review-stars .kv-full-star {
    color: #00313E;
}

.kv-review-stars .kv-half-star {
    background: linear-gradient(to right, #00313E 60%, #eee 40%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kv-review-stars .kv-empty-star {
    color: #eee;
}

.kv-review-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0;
}

.kv-review-description {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin: 0 0 15px 0;
}

.kv-review-categories {
    background-color: #f9f9f9;
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
}

.kv-category-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0;
}

.kv-category-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kv-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    font-size: 14px;
}

.kv-cat-name {
    color: #555;
    flex: 1;
}

.kv-cat-stars {
    color: #00313E;
    font-size: 14px;
    letter-spacing: 1px;
    margin-left: 10px;
}

/* Star styling for category stars */
.kv-cat-stars .kv-star {
    display: inline-block;
}

.kv-cat-stars .kv-full-star {
    color: #ffd700;
}

.kv-cat-stars .kv-half-star {
    background: linear-gradient(to right, #ffd700 50%, #eee 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kv-cat-stars .kv-empty-star {
    color: #eee;
}

.kv-review-meta {
    font-size: 14px;
    color: #999;
}

.kv-review-author {
    font-weight: 600;
    color: #555;
}

.kv-review-date {
    color: #999;
}

/* Read More Button */
.kv-read-more-wrapper {
    max-width: 700px;
    margin: 20px auto;
    text-align: center;
}

.kv-read-more-btn {
    display: inline-block;
    background-color: #00313E;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.kv-read-more-btn:hover {
    background-color: #00313E;
    color: #000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    text-decoration: none;
}

.kv-read-more-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Responsive voor reviews */
@media (max-width: 600px) {
    .kv-review-item {
        flex-direction: column;
        gap: 10px;
    }

    .kv-review-left {
        width: 100%;
        justify-content: flex-start;
    }

    .kv-review-rating {
        font-size: 28px;
    }
}

/* ... (zie vorige reactie voor de volledige CSS) ... */

/* Linkerpaneel: De samenvattende scores */
.kv-left-panel {
    flex: 1;
    /* Neemt gelijke ruimte in */
    background-color: #000;
    /* Zwarte achtergrond */
    padding: 30px;
    /* ... andere stijlen ... */
}

/* Rechterpaneel: De gedetailleerde scores */
.kv-right-panel {
    flex: 1.5;
    /* Neemt meer ruimte in beslag */
    background-color: #fff;
    /* Witte achtergrond */
    /* ... andere stijlen ... */
}

/* De CSS voor de visuele halve sterren: */
.kv-category-stars .kv-half-star {
    /* Dit is de tricky part om een halve ster te maken met één unicode teken */
    background: linear-gradient(to right, #ffd700 50%, #eee 50%);
    /* Gouden links, grijze rechts */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Zorgt dat de tekstkleur verdwijnt en de gradient zichtbaar wordt */
}

/* ... (andere stijlen) ... */

/* Container voor alle sterren */
.kv-star-container {
    display: inline-block;
    /* Achtergrondkleur van je afbeelding */
    background-color: #e0d7c3; 
}

/* Stijl voor alle individuele sterren */
.kv-star {
    font-size: 24px; /* Pas de grootte aan indien nodig */
    line-height: 1;
    display: inline-block;
    position: relative;
    color: #fff; /* Wit is de vulkleur voor volle/halve sterren */
}

/* De lege sterren (die met de omtrek) */
.kv-empty-star {
    /* Je kunt de kleur van de omtrek hier instellen als je een font icon gebruikt
       of een speciaal karakter. Aangezien je '★' gebruikt, zal dit wit zijn.
       Om een omtrek te krijgen, moet je text-shadow gebruiken. */
    color: #e0d7c3; /* Achtergrondkleur */
    text-shadow: 
        1px 1px 0 #fff, 
        -1px 1px 0 #fff, 
        1px -1px 0 #fff, 
        -1px -1px 0 #fff; /* Maak de omtrek wit */
}

/* De volle sterren */
.kv-full-star {
    color: #fff; /* Volledig wit */
    text-shadow: none;
}

/* 🌟 DE FIX: Halve ster 🌟 */
.kv-half-star {
    position: relative;
    display: inline-block;
    /* De halve breedte die zichtbaar moet zijn */
    width: 0.5em; 
    overflow: hidden; /* BELANGRIJK: knipt de rechterhelft weg */
    color: #fff; /* De zichtbare helft moet wit zijn */
    direction: ltr;
    text-shadow: none; /* Geen schaduw op de gevulde helft */
}

/* Omdat de halve ster de overflow: hidden krijgt, moeten we de lege ster
   die direct na de halve ster komt, de correcte positie geven.
   Omdat in je PHP de 4.5 sterren zo worden:
   .... full-star | half-star | empty-star ...
   Dit is complex zonder aanpassing van de PHP.
   
   EENVOUDIGSTE FIX: We zorgen dat de HALF STAR eruitziet als de volle ster.
   De PHP logica van 9.1 (4.55) rond nu af op 4.5.

   De **Halve ster** is de 5e ster die half gevuld moet zijn.
   De HTML is: <span class="kv-full-star">★</span> x 4 | <span class="kv-half-star">★</span> | <span class="kv-empty-star">★</span> x 0
   
   Dit betekent dat de halve ster gewoon de vierde volle ster is die half getoond wordt.
   We combineren nu de `kv-half-star` en de `kv-empty-star` om de look uit je afbeelding te krijgen:
*/

/* 1. Reset de `kv-half-star` om als basis te dienen */
.kv-half-star {
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: #fff; /* Kleur van de gevulde helft */
    width: 1em; /* Begin met de volledige breedte */
}

/* Zorg dat de SVG-ster even groot is als de Font-ster */
.kv-star-svg svg {
    /* Pas deze grootte aan op basis van de font-size die je gebruikt
       voor .kv-star, bijvoorbeeld 1em of 24px. */
    width: 1em; 
    height: 1em;
    display: block; /* Belangrijk voor juiste uitlijning */
}

/* Je kunt de algemene ster-grootte hier instellen (indien nog niet gedaan) */
.kv-star {
    font-size: 24px; /* Voorbeeldgrootte */
    line-height: 1;
    display: inline-block;
	margin-right: 3px;
}

.cijfer {
	font-family: Poppins, sans-serif;
    color: #00313E;
    font-size: 60px;
	font-weight: bold;
}

.kv-detail-scores .kv-category-stars .kv-star {
	width: 1em;
}

.kv-detail-scores .kv-category-name{
	color: #00313E;
		font-family: Poppins, sans-serif;
}

.kv-review-left svg text {
	fill: #00313E;
		font-family: Poppins, sans-serif;
	font-size: 60px;
}

.kv-review-item {
    display: flex;
    background-color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 15px;
    gap: 20px;
    padding-bottom: 30px;
    border-bottom: solid 2px #CABC9E;
    border-radius: unset;
    padding-top: 20px;
}

.kv-review-left svg {
	    height: fit-content!important;
}

.kv-cat-stars svg {
	width: 1.7em;
	height: 1.7em;
	margin-right: 3px;
}

.kv-review-stars svg {
		width: 1.7em;
	height: 1.7em;
	margin-right: 3px;
}

.kv-review-title
{
			font-family: Poppins, sans-serif;
	color: #00313E;
}

.kv-review-description {
				font-family: Poppins, sans-serif;
	color: #00313E;
}

.kv-cat-name {
					font-family: Poppins, sans-serif;
	color: #00313E;
}

.kv-review-author {
						font-family: Poppins, sans-serif;
	color: #00313E;
}

.kv-review-date {
						font-family: Poppins, sans-serif;
	color: #00313E;
}