/* Klantbeoordelingen (template-reviews.php) — 1-op-1 uit het Claude Design-prototype
   "klantbeoordelingen.html", klassen geprefixt met rv- zodat ze nooit botsen met
   chrome/cat/adv. Het prototype-chrome (topbar/header/footer) is weggelaten: de pagina
   draait binnen get_header()/get_footer() van het thema. */
.rv-page{
  --rv-navy:#01273f; --rv-navy-2:#16456b; --rv-ink:#0e2a3f; --rv-muted:#5e6f7c;
  --rv-muted-2:#6f7e8c; --rv-faint:#8a97a3; --rv-bg:#f4f7fa; --rv-line:#e3ebf1;
  --rv-line-2:#eef1f4; --rv-star:#ffb814; --rv-orange:#e77935; --rv-orange-soft:#f5a26d;
  background:var(--rv-bg); color:var(--rv-ink);
}
/* Het prototype leunde op een globale `*{box-sizing:border-box}` reset. Die is hier niet
   overgenomen omdat deze stylesheet niets buiten .rv-page mag raken, dus hij hoort er scoped
   alsnog in: zonder dit telt de 2x24px padding van .rv-wrap bij de breedte op en loopt de
   pagina op mobiel 48px buiten het scherm. */
.rv-page, .rv-page *, .rv-page *::before, .rv-page *::after{box-sizing:border-box}
.rv-page .rv-wrap{width:1180px;max-width:100%;margin:0 auto;padding:0 24px}
.rv-page a{color:var(--rv-navy);text-decoration:none}
.rv-page a:hover{color:var(--rv-navy-2)}

/* Hero */
.rv-hero{background:radial-gradient(120% 130% at 0% 0%,var(--rv-navy-2) 0%,var(--rv-navy) 58%);color:#fff;padding:52px 0;position:relative;overflow:hidden}
.rv-hero .rv-emblem{position:absolute;right:-90px;bottom:-120px;width:460px;opacity:.05;pointer-events:none}
.rv-hero .rv-wrap{position:relative}
.rv-breadcrumbs{font-size:12.5px;color:rgba(255,255,255,.55);margin-bottom:14px}
.rv-breadcrumbs a{color:rgba(255,255,255,.75)}
.rv-breadcrumbs a:hover{color:#fff}
.rv-hero-grid{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:start}
.rv-hero h1{margin:0 0 18px;font-weight:600;line-height:1.12;font-size:50px;letter-spacing:-.035em;color:#fff}
.rv-hero .rv-lede{font-size:17px;line-height:1.65;color:rgba(255,255,255,.75);margin:0;max-width:52ch}
.rv-hero .rv-lede strong{color:#fff}
.rv-trust-points{display:flex;flex-wrap:wrap;gap:22px;margin-top:30px;font-size:13.5px;color:rgba(255,255,255,.85)}
.rv-trust-points span{display:inline-flex;align-items:center;gap:9px}
.rv-trust-points svg{color:var(--rv-orange-soft)}

/* Scorecard */
.rv-scorecard{background:#fff;border-radius:24px;padding:28px 28px 22px;color:var(--rv-ink);box-shadow:0 30px 70px -40px rgba(1,39,63,.7)}
.rv-score-head{display:flex;align-items:center;gap:18px}
.rv-score-tile{display:grid;place-items:center;width:88px;height:88px;border-radius:22px;background:radial-gradient(120% 120% at 20% 15%,var(--rv-navy-2) 0%,var(--rv-navy) 70%);color:#fff;flex-shrink:0;text-align:center;line-height:1}
.rv-score-tile .rv-num{font-size:30px;font-weight:700;letter-spacing:-.03em}
.rv-score-tile .rv-of{font-size:11.5px;color:rgba(255,255,255,.65);margin-top:4px}
.rv-stars{display:flex;gap:3px;color:var(--rv-star)}
.rv-score-head .rv-stars{margin-bottom:7px}
.rv-score-sub{font-size:13.5px;color:var(--rv-muted);line-height:1.5}
.rv-score-sub strong{color:var(--rv-ink)}
.rv-platform-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--rv-line-2);font-size:13.5px}
.rv-platform-row:first-of-type{margin-top:18px}
.rv-platform-id{display:flex;align-items:center;gap:10px;min-width:0}
.rv-platform-id .rv-chip{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;flex-shrink:0;background:#f2f6f9}
.rv-platform-id img{display:block;width:28px;height:28px;flex-shrink:0}
.rv-platform-id small{color:var(--rv-muted);font-size:12.5px}
.rv-platform-score{font-weight:700;font-size:15px;white-space:nowrap}
.rv-platform-score svg{color:var(--rv-muted)}
.rv-shops-note{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rv-line-2);font-size:12px;color:var(--rv-faint);line-height:1.5}
.rv-flags{display:flex;flex-shrink:0}
.rv-flags svg{border-radius:50%;box-shadow:0 0 0 2px #fff}
.rv-flags svg + svg{margin-left:-6px}

/* Reviews */
/* De 210px onderaan is geen smaak maar ruimte die al bezet is: de nieuwsbriefband van de
   footer (`.lof-news-band--top`) trekt zichzelf met `translateY(-150px)` over de sectie
   erboven heen. Met minder verdwijnt de onderste rij kaarten er half achter. Zelfde maat als
   .kp-section in tekstpagina.css, zodat alle zelfstandige pagina's dezelfde bodem houden. */
.rv-reviews{padding:44px 0 210px}
.rv-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.rv-tabs{display:flex;gap:8px;background:#fff;border:1px solid var(--rv-line);border-radius:999px;padding:5px}
.rv-tab{border:0;background:transparent;font:inherit;font-size:14px;font-weight:500;color:var(--rv-muted);padding:9px 18px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.rv-tab .rv-count{font-size:12px;opacity:.7}
.rv-tab img{display:block;width:19px;height:19px}
.rv-tab svg{color:currentColor}
.rv-tab.active{background:var(--rv-navy);color:#fff}
.rv-sort{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--rv-muted)}
/* Chevron, maatvoering en kleuren uit het component dat Jay aanleverde (sterrenfilter.html).
   Eén afwijking: daar staat 10px verticale padding, hier 14.5px. Dat component staat op een
   lege demopagina, hier staat de tabbladpil ernaast en die is 49px hoog. Met 10px wordt het
   veld 42px en staat het weer scheef naast die pil. */
.rv-sort select{
  font-family:inherit;font-size:14px;color:var(--rv-ink);background:#fff;
  border:1px solid var(--rv-line);border-radius:999px;padding:14.5px 34px 14.5px 16px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230e2a3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
/* MOET hier staan. Het `hidden`-attribuut krijgt zijn `display:none` uit de stylesheet van de
   browser zelf, en elke eigen display-regel wint daarvan. `.rv-card{display:flex}` hieronder
   zette dus wél het attribuut maar bleef de kaart tonen: het filter leek niet te werken. */
.rv-page [hidden]{display:none}
.rv-leeg{margin:0;padding:38px 24px;text-align:center;color:var(--rv-muted);font-size:15px;background:#fff;border:1px solid var(--rv-line-2);border-radius:20px}
.rv-sort select:disabled,.rv-sort option:disabled{color:var(--rv-faint)}
.rv-card{background:#fff;border:1px solid var(--rv-line-2);border-radius:20px;padding:24px 24px 20px;display:flex;flex-direction:column;box-shadow:0 18px 42px -34px rgba(8,38,65,.35)}
.rv-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.rv-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#2f7d55;background:#eaf6ef;border-radius:999px;padding:5px 11px;font-weight:600}
.rv-card h3{margin:0 0 10px;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.rv-card p{font-size:14.5px;line-height:1.62;color:var(--rv-muted-2);margin:0;flex:1 0 auto}
.rv-card-foot{margin-top:18px;padding-top:15px;border-top:1px solid var(--rv-line-2);display:flex;align-items:center;justify-content:space-between;gap:12px}
.rv-who{font-size:13.5px;font-weight:600}
.rv-when{font-size:12.5px;color:var(--rv-muted)}
.rv-src-link{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rv-line);border-radius:999px;padding:5px 11px 5px 5px;font-size:12px;font-weight:600;color:var(--rv-ink);background:#fff;white-space:nowrap}
.rv-src-link:hover{border-color:var(--rv-navy-2);color:var(--rv-navy-2)}
.rv-src-link img{display:block;width:22px;height:22px}
.rv-src-link .rv-chip{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#f2f6f9}
.rv-src-link .rv-ext{color:var(--rv-muted)}

/* Tablet */
@media (max-width:1024px){
  .rv-hero-grid{grid-template-columns:1fr;gap:32px}
  .rv-hero h1{font-size:40px}
  .rv-hero h1 br{display:none}
  .rv-grid{grid-template-columns:repeat(2,1fr)}
  .rv-reviews{padding:40px 0 200px}
}
/* Mobile */
@media (max-width:640px){
  .rv-hero{padding:36px 0}
  .rv-hero h1{font-size:31px}
  .rv-trust-points{flex-direction:column;gap:10px;margin-top:20px}
  .rv-scorecard{padding:20px 20px 14px}
  .rv-score-tile{width:74px;height:74px;border-radius:18px}
  .rv-score-tile .rv-num{font-size:25px}
  .rv-grid{grid-template-columns:1fr;gap:16px}
  .rv-reviews{padding:36px 0 190px}
  .rv-controls{gap:10px}
  .rv-tabs{overflow-x:auto;max-width:100%}
  .rv-sort{margin-left:0}
}

/* Landvlag per review, in de voet van de kaart. */
.rv-card-foot .rv-foot-id{display:flex;align-items:center;gap:9px;min-width:0}
.rv-card-foot .rv-flag{display:flex;flex-shrink:0}
.rv-card-foot .rv-flag svg{border-radius:50%;box-shadow:0 0 0 1px var(--rv-line)}