/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

.category-review-feed {
    display: flex;
	flex-wrap: wrap; /* extra items vormen een nieuwe rij van 3 i.p.v. erbij gepropte kolommen */
	gap: 20px; /* meer ruimte tussen de afzonderlijke beoordelingen */
}

.review-item {
    width: calc(33.333% - 24px) !important; /* 3 kolommen passend bij de grotere gap */
    padding: 14px 16px;
    border: #efeae3 solid 4px;
	 color: #6e6e6e;
}

span.review-rating {
    color: #ffe218;
	margin-left: 10px;
}

.review-product a {
    color: #6e6e6e;
	text-decoration: underline;
	font-weight: 500;
}

.review-meta { 
	font-weight: 500;
}

@media (max-width: 768px) {
	.category-review-feed {
	    flex-direction: column;
	}
	.review-item {
   		width: 100% !important;
	}
	.category-review-feed {
		gap: 0px;
	}
	.category-review-feed .review-item {
		padding: 0px;
		border-bottom: #efeae3 solid 1px !important;
		border: 0px;
		padding-bottom: 6px;
        padding-top: 6px;
	}
	.category-reviews-overall {
		margin-bottom: 10px !important;
	}
	.category-review-feed .review-item .review-product,
	.category-review-feed .review-item .review-meta {
    	margin-bottom: 2px;
	}
}

.review-item-hidden {
    display: none !important;
}

.review-load-more {
    display: inline-block;
    color: var(--e-global-color-fbb63fe);
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

.review-load-more:hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* Knoppen "Laad meer" / "Toon minder" */
.category-review-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* Uniforme knopstijl cat-pagina's (klantverzoek 2026-07-23):
   16px (14px mobiel), lichtblauw #00b1cf, radius 10px, padding 12px 24px */
.category-review-actions button {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.category-review-actions .cr-load-more,
.category-review-actions .cr-show-less {
    background-color: var(--e-global-color-fbb63fe, #00b1cf);
    color: #ffffff;
}

.category-review-actions .cr-load-more:hover,
.category-review-actions .cr-show-less:hover {
    background-color: #123c57;
    color: #ffffff;
}

.category-review-actions button[hidden] {
    display: none !important;
}

/* Overall beoordeling bovenaan (naar voorbeeld van thuiszorgwinkelxl.nl) */
.category-reviews-overall {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.cr-overall-score {
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    color: #3c3c3c;
}

.cr-overall-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Sterren met exacte gedeeltelijke vulling via een overlay-laag.
   We gebruiken letterlijke ★-tekens (net als de losse review-sterren) i.p.v. een
   ::before-glyph, omdat pseudo-element-content elders kan worden overschreven. */
.cr-overall-stars {
    position: relative;
    display: inline-block;
    font-size: 22px;
    line-height: 1;
    white-space: nowrap;
}

.cr-overall-stars .cr-stars-empty {
    color: #d8d2c8; /* lege sterren */
    letter-spacing: 3px;
}

.cr-overall-stars .cr-stars-full {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffe218; /* gevulde sterren, gelijk aan de losse review-sterren */
    letter-spacing: 3px;
}

/* Compacte header-score ([category_reviews_score], vervangt de etrusted-
   widget in de header zodat het cijfer gelijk is aan de cat-pagina's) */
.cr-header-score {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 10px; /* niet tegen de schermrand aan (topbar heeft links ook ~10px) */
    /* !important: thema-linkkleur (groen) gaat anders voor; topbar is licht,
       dus donkerblauw zoals de overige topbar-tekst */
    color: #123c57 !important;
    text-decoration: none !important;
    font-weight: 700;
}

.cr-header-score:hover {
    color: #123c57 !important;
    text-decoration: none !important;
    opacity: 0.85;
}

.cr-header-score .cr-header-score__badge {
    /* zelfde maat als het logo in de oude etrusted-widget (20x20) */
    display: block;
    width: 20px;
    height: 20px;
}

.cr-header-score .cr-overall-stars {
    font-size: 16px;
}

.cr-header-score .cr-header-score__value {
    font-size: 15px;
    line-height: 1;
}

.cr-header-score .cr-header-score__grade {
    /* TS-kwaliteitslabel ("Uitstekend") achter het cijfer */
    font-size: 13px;
    line-height: 1;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 480px) {
    /* Topbar is smal op mobiel; laat het label daar weg, cijfer + sterren blijven. */
    .cr-header-score .cr-header-score__grade { display: none; }
}

.cr-overall-count {
    color: #6e6e6e;
    font-weight: 500;
    font-size: 14px;
}

@media (max-width: 768px) {
    .cr-overall-score {
        font-size: 36px;
    }

    /* Uniforme knopstijl: op mobiel 14px */
    .category-review-actions button {
        font-size: 14px;
    }
}

/* ===== Geabsorbeerd 2026-08-17 uit awcf_product_reviews_load_more ===== */
/* Product reviews "laad meer" */

#reviews ol.commentlist li.awcf-review-hidden {
    display: none !important;
}

/* Zelfde stijl als de oude "Lees meer →"-knop: een tekstlink in het merkblauw. */
.awcf-reviews-loadmore {
    display: inline-block;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    color: var(--e-global-color-fbb63fe, #00b1cf);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.2s ease;
}

.awcf-reviews-loadmore::after {
    content: " \2192"; /* → */
}

.awcf-reviews-loadmore:hover,
.awcf-reviews-loadmore:focus {
    background: none;
    color: #123C57;
    text-decoration: underline;
}