/* ==========================================================================
   bewijs.css — de Google-reviews, overal op de site in dezelfde vorm.
   Alles begint met bw-, dus dit raakt niets van wat er al staat. De kleuren
   staan hier als eigen variabelen: elke pagina zet haar tokens in haar eigen
   <style>, en dit bestand mag daar niet van afhangen.
   ========================================================================== */
.bw-balk, .bw-strip, .bw-mini, .bw-wolk{
  --bw-or:#FF7D38; --bw-ink:#14161A; --bw-ink2:#3E464F; --bw-zacht:#6E7883;
  --bw-wit:#FFFFFF; --bw-papier:#F5F3F0; --bw-lijn:#E3E0DB; --bw-goud:#F5A623;
}

.bw-ster{ color:var(--bw-goud); letter-spacing:1px; font-size:.95em; line-height:1; white-space:nowrap }
.bw-g{ width:20px; height:20px; flex:none; display:block }

/* ---------- de balk: één regel, past onder een titel of naast een knop ---------- */
.bw-balk{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border:1px solid var(--bw-lijn); border-radius:999px;
  background:var(--bw-wit); font-size:.94rem; color:var(--bw-ink2);
}
.bw-balk .bw-cijfer{ font-weight:800; color:var(--bw-ink); font-variant-numeric:tabular-nums }
.bw-balk .bw-uit{ color:var(--bw-zacht) }
.bw-balk .bw-link{
  color:var(--bw-or); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(255,125,56,.4); padding-bottom:1px;
}
.bw-balk .bw-link:hover{ border-bottom-color:var(--bw-or) }
/* Op de telefoon was dit 57 x 27 px. Het blijft in de zin staan, maar krijgt
   wel de hoogte van een duim. */
@media(max-width:860px){
  .bw-balk .bw-link{ min-height:44px; display:inline-flex; align-items:center; }
  .bw-alle a{ min-height:44px; display:inline-flex; align-items:center; }
}

.bw-balk.bw-donker{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.82) }
.bw-balk.bw-donker .bw-cijfer{ color:#fff }
.bw-balk.bw-donker .bw-uit{ color:rgba(255,255,255,.66) }

/* ---------- mini: in de zijkar en op de afrekenpagina ---------- */
.bw-mini{
  display:flex; align-items:center; gap:8px;
  font-size:.86rem; color:var(--bw-zacht); line-height:1.3;
}
.bw-mini b{ color:var(--bw-ink); font-weight:700; font-variant-numeric:tabular-nums }
.bw-mini .bw-g{ width:16px; height:16px }

/* ---------- wolk: één zin naast een knop ---------- */
.bw-wolk{
  display:flex; flex-direction:column; gap:5px;
  padding:14px 16px; border-left:3px solid var(--bw-or);
  background:var(--bw-papier); border-radius:0 10px 10px 0;
  font-size:.92rem; color:var(--bw-ink2); line-height:1.5;
}
.bw-wolk i{ font-style:normal; font-size:.8rem; color:var(--bw-zacht) }

/* ---------- strip: drie kaarten, het blok voor de voettekst ---------- */
.bw-strip{
  max-width:1320px; margin:0 auto; padding:clamp(56px,7vw,92px) clamp(20px,5vw,64px);
}
.bw-strip-kop{
  display:flex; align-items:flex-end; justify-content:space-between; gap:26px; flex-wrap:wrap;
  margin-bottom:34px;
}
.bw-oog{
  display:block; font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bw-or); margin-bottom:12px;
}
.bw-strip-kop h2{
  font-family:Archivo,system-ui,sans-serif; font-weight:800; letter-spacing:-.03em; line-height:1.05;
  font-size:clamp(1.7rem,3.4vw,2.7rem); color:var(--bw-ink); margin:0;
}
.bw-score{ display:flex; align-items:center; gap:12px }
.bw-score b{
  font-family:Archivo,system-ui,sans-serif; font-size:clamp(2rem,3.6vw,2.9rem); font-weight:800;
  letter-spacing:-.03em; color:var(--bw-ink); font-variant-numeric:tabular-nums; line-height:1;
}
.bw-score i{ display:block; font-style:normal; font-size:.84rem; color:var(--bw-zacht); margin-top:3px }

.bw-kaarten{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.bw-kaart{
  display:flex; flex-direction:column; gap:14px;
  padding:26px 24px; border:1px solid var(--bw-lijn); border-radius:14px;
  background:var(--bw-wit); margin:0;
}
.bw-kaart p{ margin:0; font-size:.97rem; line-height:1.6; color:var(--bw-ink2) }
.bw-kaart footer{ display:flex; align-items:center; gap:11px; margin-top:auto; padding-top:4px }
.bw-av{
  width:38px; height:38px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bw-or); color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.02em;
}
.bw-kaart footer b{ display:block; font-size:.92rem; color:var(--bw-ink); font-weight:700 }
.bw-kaart footer small{ display:block; font-size:.78rem; color:var(--bw-zacht) }
.bw-alle{ margin:26px 0 0; font-size:.92rem }
.bw-alle a{ color:var(--bw-or); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,125,56,.4) }
.bw-alle a:hover{ border-bottom-color:var(--bw-or) }

.bw-strip.bw-donker .bw-strip-kop h2, .bw-strip.bw-donker .bw-score b{ color:#fff }
.bw-strip.bw-donker .bw-score i{ color:rgba(255,255,255,.6) }
.bw-strip.bw-donker .bw-kaart{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13) }
.bw-strip.bw-donker .bw-kaart p{ color:rgba(255,255,255,.84) }
.bw-strip.bw-donker .bw-kaart footer b{ color:#fff }
.bw-strip.bw-donker .bw-kaart footer small{ color:rgba(255,255,255,.55) }

@media(max-width:960px){
  .bw-kaarten{ grid-template-columns:1fr; gap:14px }
  .bw-strip-kop{ align-items:flex-start }
  .bw-kaart{ padding:22px 20px }
}

/* ---------- de band waarin de strip staat ---------- */
.bw-band{ background:#F5F3F0; border-top:1px solid #E3E0DB; }
.bw-band + .bw-band{ border-top:0; }