/* Template css resource: Core 8 - Fluid - Template database - xml feed klantenvertellen */
/* =============================================================================
XML-REVIEW · self-contained styling (scoped op .xmlrev)
-----------------------------------------------------------------------------
Brengt de Core8-basis (.review / .reviews / sterren-vulling) ZELF mee, net als
new-reviews — leunt bewust NIET op de host style.css, zodat de snippet er ook
op oudere/afgeslankte Core8-sites identiek uitziet. Look = Core8 review-typografie
(titel bold, subtitle muted #706f6f, gouden sterren) in een kaart-grid.
Accent override-baar via  style="--xmlrev-accent:#xxx"  of  data-accent="#xxx".
============================================================================= */
/* box-sizing op de hele widget: width:100% + padding + border nooit te breed -> geen horizontale overflow */
.xmlrev, .xmlrev *, .xmlrev *::before, .xmlrev *::after { box-sizing: border-box; }
/* host-CSS mag onze verborgen elementen (bv. Reset) niet tonen: [hidden] wint altijd */
.xmlrev [hidden] { display: none !important; }
.xmlrev {
max-width: 100%;                     /* nooit breder dan de container (geen horizontale scrollbar) */
overflow-wrap: break-word;           /* lange woorden/URL's breken i.p.v. de layout op te rekken */
--xmlrev-accent: #5b6770;            /* huisstijl-accent (override via data-accent) */
--xmlrev-muted: #706f6f;
--xmlrev-border: #e3e3e3;
--xmlrev-card-bg: #fff;
--review-star-color: #f7b70a;        /* Core8-basis ster-vulling */
--review-star-empty-color: #d4d7da;
color: #2b2b2b;
}
/* ---- score-header (huisstijl-accent op het bovenste blok) ---- */
.xmlrev__header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 28px;
margin-bottom: 28px;
padding: 16px 20px;
background: #f6f6f7;                                       /* fallback (oudere browsers) */
background: color-mix(in srgb, var(--xmlrev-accent) 7%, #fff);
border-left: 4px solid var(--xmlrev-accent);
border-radius: 8px;
}
/* score-blok: count-up cijfer + sterren die vol-lopen (zoals new-reviews snippet-score) */
.xmlrev__score { display: inline-flex; align-items: center; gap: 14px; }
.xmlrev__score-num {
position: relative;
display: inline-block;
min-width: 2.4ch;
text-align: center;
font-variant-numeric: tabular-nums;           /* vaste breedte -> geen resize tijdens tellen */
font-family: "Oswald", "Open Sans", sans-serif;
font-size: 2.8rem;
font-weight: 700;
line-height: 1;
color: var(--xmlrev-accent);
}
.xmlrev__score-num--blip { animation: xmlrev-num-blip 0.5s ease; }
@keyframes xmlrev-num-blip { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 100% { transform: scale(1); } }
.xmlrev__score-stars { display: inline-flex; gap: 3px; font-size: 1.5rem; line-height: 1; }
.xmlrev__star { position: relative; display: inline-block; transform-origin: center; }
.xmlrev__star .e { color: var(--review-star-empty-color); }
.xmlrev__star .f {
position: absolute; left: 0; top: 0;
width: 0; overflow: hidden; white-space: nowrap;
color: var(--review-star-color);
}
.xmlrev__star--pop { animation: xmlrev-score-pop 0.45s ease; }
@keyframes xmlrev-score-pop { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } }
.xmlrev__meta { font-size: 0.95rem; line-height: 1.5; }
.xmlrev__meta .xmlrev__count strong { font-size: 1.15rem; }
.xmlrev__recommend { color: var(--xmlrev-muted); }
.xmlrev__recommend strong { color: var(--xmlrev-accent); }
.xmlrev__link {
display: inline-block;
margin-top: 2px;
color: var(--xmlrev-accent);
font-weight: 600;
text-decoration: none;
}
.xmlrev__link:hover { text-decoration: underline; }
.xmlrev__empty { color: var(--xmlrev-muted); }
.xmlrev__shown { margin: 0 0 14px; font-size: 0.85rem; color: var(--xmlrev-muted); }
/* ---- grid (self-contained: niet leunen op host .reviews) ---- */
.xmlrev .reviews {
display: grid;
grid-gap: 44px;                        /* ruime tussenruimte zodat de hover-schaduw vrij loskomt */
justify-items: stretch;
align-items: stretch;                  /* kaarten EVEN HOOG per rij (= de langste in die rij) */
grid-template-columns: 1fr;
margin: 0;
}
@media (min-width: 600px)  { .xmlrev .reviews { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .xmlrev .reviews { grid-template-columns: repeat(3, 1fr); } }
/* ---- kaart (Core8 review-layout, op INHOUD-hoogte) ---- */
.xmlrev .review {
display: grid;
grid-template-columns: 48px 1fr;
grid-template-rows: min-content min-content;
grid-template-areas: "author header" "content content";
column-gap: 16px;
row-gap: 8px;
align-items: start;
align-content: start;                  /* inhoud bovenaan; geen uitgerekte rijen binnen de kaart */
width: 100%;
max-width: none;
margin: 0;                             /* GEEN height:100% -> kaart = inhoud-hoogte (paginator valt strak onder de inhoud) */
background: var(--xmlrev-card-bg);
border: 1px solid var(--xmlrev-border);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.xmlrev .review:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16); transform: translateY(-4px); }
.xmlrev .review__header { grid-area: header; }
.xmlrev .review__content { grid-area: content; line-height: 1.35; }
.xmlrev .review__content p { margin: 0 0 8px; }
.xmlrev .review__content p:last-child { margin-bottom: 0; }
.xmlrev .review__title { font-weight: 700; line-height: 1.25; margin: 4px 0; }
.xmlrev .review__subtitle { color: var(--xmlrev-muted); font-size: 0.9rem; }
.xmlrev .review__dot { color: var(--xmlrev-border); }
.xmlrev .review__date { color: var(--xmlrev-muted); }
.xmlrev .review__author-thumb {
grid-area: author;
width: 48px; height: 48px; min-height: 0;
border-radius: 50%;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0idXVpZC0xNjA5MjBmZC1lMmMyLTQzMjgtYTgyNi00NjVjMzYyM2FkZTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDkwNCA5MDQiPgoJPGcgaWQ9InV1aWQtMWMxMDYwY2EtY2RmOC00NDM4LWI2ZWMtMDIzOWM3ZWVjOTY1Ij4KCQk8cGF0aCBkPSJNOTA0LDQ1MmMwLDE0My4yMy02Ni42MiwyNzAuOS0xNzAuNTcsMzUzLjcxLTc3LjIxLDYxLjUzLTE3NS4wMyw5OC4yOS0yODEuNDMsOTguMjlzLTIwNC4yMi0zNi43Ni0yODEuNDMtOTguMjlDNjYuNjIsNzIyLjksMCw1OTUuMjMsMCw0NTIsMCwyMDIuMzcsMjAyLjM3LDAsNDUyLDBzNDUyLDIwMi4zNyw0NTIsNDUyWiIgc3R5bGU9ImZpbGw6I2NlZDVkODsiLz4KCQk8Y2lyY2xlIGN4PSI0NTIiIGN5PSIzNTEiIHI9IjE5MCIgc3R5bGU9ImZpbGw6I2E2YWZiMjsiLz4KCQk8cGF0aCBkPSJNNzMzLjQzLDgwNS43MWMtNzcuMjEsNjEuNTMtMTc1LjAzLDk4LjI5LTI4MS40Myw5OC4yOXMtMjA0LjIyLTM2Ljc2LTI4MS40My05OC4yOWMzNi41NS0xMjAuNzgsMTQ4LjcyLTIwOC43MSwyODEuNDMtMjA4LjcxczI0NC44OCw4Ny45MywyODEuNDMsMjA4LjcxWiIgc3R5bGU9ImZpbGw6I2E2YWZiMjsiLz4KCTwvZz4KPC9zdmc+Cg==");
background-size: contain; background-position: center; background-repeat: no-repeat;
}
/* ---- sterren (1:1 Core8-mechaniek) ---- */
.xmlrev .review__rating { display: flex; gap: 8px; align-items: center; }
.xmlrev .review__rating-value { font-weight: 700; }
.xmlrev .review__stars { display: inline-block; line-height: 1; translate: 0 -2px; }
.xmlrev .review__stars svg { width: 106px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); }
.xmlrev .review__star { fill: var(--review-star-empty-color); }
.xmlrev .review__current--full ~ .review__star { fill: var(--review-star-color); }
.xmlrev .review__current--half ~ .review__star { fill: var(--review-star-color); }
.xmlrev .review__current--half + .review__star { fill: url(#review__half-star-fill); }
.xmlrev .review__stars linearGradient stop:not([stop-color]) { stop-color: var(--review-star-empty-color); }
/* ---- badge "Beveelt aan" ---- */
.xmlrev .review__badge {
display: inline-block;
margin-bottom: 6px;
font-family: "Oswald", "Open Sans", sans-serif;
font-size: 0.66rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--xmlrev-accent);
border: 1px solid var(--xmlrev-accent);
border-radius: 999px;
padding: 2px 9px;
}
/* ---- ingekorte tekst: "lees verder"-link naar Klanten vertellen ---- */
.xmlrev .review__more { margin: 8px 0 0; }
.xmlrev .review__more a {
font-size: 0.85rem;
font-weight: 600;
color: var(--xmlrev-accent);
text-decoration: none;
}
.xmlrev .review__more a:hover { text-decoration: underline; }
/* ---- lazy-load: kaarten faden zacht in (alleen opacity, geen verspringen) ---- */
.xmlrev .review { animation: xmlrev-fade-in 0.35s ease both; }
@keyframes xmlrev-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .xmlrev .review { animation: none; } }
/* ---- sorteer/filter-balk (sterren links, sorteren rechts; à la Klanten vertellen) ---- */
.xmlrev__controls {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.xmlrev__filter-stars { display: inline-flex; align-items: center; gap: 4px; }
.xmlrev__fstar {                          /* halve-ster-capabel: .e (leeg) + .f (vulling, breedte) */
position: relative; display: inline-block; cursor: pointer;
font-size: 2rem; line-height: 1;
}
.xmlrev__fstar .e { color: var(--review-star-empty-color); }
.xmlrev__fstar .f {
position: absolute; left: 0; top: 0;
width: 0; overflow: hidden; white-space: nowrap;
color: var(--review-star-color);
pointer-events: none;                   /* klik-/muispositie blijft op de hele ster */
}
.xmlrev__fstar:focus-visible { outline: 2px solid var(--xmlrev-accent); outline-offset: 2px; border-radius: 3px; }
.xmlrev__fval {                           /* cijfer waarop gefilterd wordt (0-10) */
margin-left: 8px;
font-family: "Oswald", "Open Sans", sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--xmlrev-accent);
min-width: 1.6ch;
}
.xmlrev__fstar-reset {
-webkit-appearance: none !important; appearance: none !important;
background: none !important; border: 0 !important; box-shadow: none !important;
height: auto !important; padding: 0 !important; margin: 0 0 0 10px !important;
cursor: pointer;
font: inherit; font-size: 0.8rem; font-weight: 600;
color: var(--xmlrev-muted); text-decoration: underline;
}
.xmlrev__ctrl-group { display: inline-flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.xmlrev__ctrl {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
font-weight: 600;
color: var(--xmlrev-muted);
}
/* !important = bewust: schermt de eigen select af tegen host-CSS (Core8 stylet select globaal via id-selectors) */
.xmlrev__ctrl select {
-webkit-appearance: none !important;
appearance: none !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 7px 30px 7px 12px !important;
border: 1px solid var(--xmlrev-border) !important;
border-radius: 6px !important;
background-color: #fff !important;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23706f6f' stroke-width='1.5'/></svg>") !important;
background-repeat: no-repeat !important;
background-position: right 11px center !important;
font: inherit !important;
font-weight: 600 !important;
line-height: normal !important;
color: #2b2b2b !important;
cursor: pointer !important;
box-shadow: none !important;
}
.xmlrev__ctrl select:focus-visible { outline: 2px solid var(--xmlrev-accent); outline-offset: 1px; }
/* ---- paginator ---- */
.xmlrev__pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 32px; }
.xmlrev__pager-btn {
-webkit-appearance: none !important; appearance: none !important;
min-width: 40px; height: 40px; padding: 0 11px;
border: 1px solid var(--xmlrev-border) !important;
background: #fff !important;
color: var(--xmlrev-accent) !important;
border-radius: 6px !important;
box-shadow: none !important;
font: inherit !important; font-weight: 700 !important; line-height: 1 !important;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.xmlrev__pager-btn:hover:not(:disabled):not(.is-active) { border-color: var(--xmlrev-accent) !important; }
.xmlrev__pager-btn.is-active { background: var(--xmlrev-accent) !important; border-color: var(--xmlrev-accent) !important; color: #fff !important; cursor: default; }
.xmlrev__pager-btn:disabled { opacity: 0.4; cursor: default; }
.xmlrev__pager-gap { align-self: flex-end; padding: 0 4px 10px; color: var(--xmlrev-muted); }
/* ---- laad-status ---- */
.xmlrev--loading { min-height: 80px; position: relative; }
.xmlrev--loading::after {
content: "Reviews laden\2026";
color: var(--xmlrev-muted);
font-size: 0.9rem;
}
/* ---- ster-hover-pop (zoals new-reviews) ---- */
.xmlrev .review__stars .review__star { transform-box: fill-box; transform-origin: center; }
.xmlrev .review:hover .review__stars .review__star { animation: xmlrev-star-pop 0.5s ease both; }
.xmlrev .review:hover .review__stars .review__star:nth-of-type(5) { animation-delay: 0s; }
.xmlrev .review:hover .review__stars .review__star:nth-of-type(4) { animation-delay: 0.06s; }
.xmlrev .review:hover .review__stars .review__star:nth-of-type(3) { animation-delay: 0.12s; }
.xmlrev .review:hover .review__stars .review__star:nth-of-type(2) { animation-delay: 0.18s; }
.xmlrev .review:hover .review__stars .review__star:nth-of-type(1) { animation-delay: 0.24s; }
@keyframes xmlrev-star-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .xmlrev .review:hover .review__stars .review__star { animation: none; } }