/* ZMS Reviews — opmaak van de referentiepagina.
 *
 * Wordt als Webflow-asset gehost en met een <link> middenin de body geladen (op deze
 * site een bewezen route). Reden voor een los bestand: het embed groeide richting
 * 75 KB en elke stijlwijziging kostte dan een volledige Webflow-paste plus een
 * worker-deploy. Nu volstaat een asset-upload.
 *
 * ARCHITECTUUR — naar het model van de Trustpilot-reviewpagina:
 *   links  een meeschuivende scorekolom (cijfer, verdeling die tevens filtert)
 *   rechts banner -> zoeken en sorteren -> thema-chips -> feed -> toon meer -> principes
 *
 * Alle regels zijn geprefixt met #zms-reviews, zodat de volgorde ten opzichte van de
 * paginakop nooit uitmaakt en er niets naar de rest van de site lekt.
 */

/* ---------------------------------------------------------------- */
/* Raamwerk                                                          */
/* ---------------------------------------------------------------- */

#zms-reviews {
  --zr-oranje: #FF6B00;
  --zr-oranje-diep: #b4470a;
  --zr-donker: #111827;
  --zr-tekst: #454545;
  --zr-kop: #1a1a1a;
  --zr-zacht: #6b7280;
  --zr-lijn: #e9ecf1;
  --zr-groen: #1a7f4b;
  --zr-vlak: #f6f7f9;
  display: block;
  font-family: Ambit, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--zr-tekst);
}
#zms-reviews *, #zms-reviews *::before, #zms-reviews *::after { box-sizing: border-box; }
#zms-reviews p, #zms-reviews h2, #zms-reviews h3, #zms-reviews blockquote { margin: 0; }
#zms-reviews .zmsr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
#zms-reviews .zmsr-ster { display: block; flex: none; color: #e6e8ec; }

/* de twee kolommen; de muur breekt bewust breder uit dan de leeskolom van de pagina */
#zms-reviews .zmsr-body-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(4vw, calc(50vw - 620px));
  padding-right: max(4vw, calc(50vw - 620px));
}

/* ---------------------------------------------------------------- */
/* Linkerkolom: score en verdeling                                   */
/* ---------------------------------------------------------------- */

#zms-reviews .zmsr-rail { position: sticky; top: 96px; align-self: start; }

#zms-reviews .zmsr-score-kop { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#zms-reviews .zmsr-score-num {
  font-size: clamp(2.4rem, 3.4vw, 3.2rem); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--zr-kop);
}
#zms-reviews .zmsr-score-uit { font-size: .95rem; color: var(--zr-zacht); }
#zms-reviews .zmsr-score-titel {
  font-size: 1.15rem; font-weight: 800; color: var(--zr-kop); letter-spacing: -.01em; margin-bottom: 4px;
}
#zms-reviews .zmsr-score-sub { font-size: .88rem; color: var(--zr-zacht); line-height: 1.5; margin-bottom: 16px; }

#zms-reviews .zmsr-rail-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 2px;
  background: var(--zr-oranje); color: #fff;
  font-size: .88rem; font-weight: 700; text-decoration: none; line-height: 1.3;
  transition: background .25s ease, transform .25s ease;
}
#zms-reviews .zmsr-rail-cta:hover { background: var(--zr-oranje-diep); transform: translateY(-1px); }

/* verdelingskaart: elke rij is tegelijk een filterknop */
#zms-reviews .zmsr-verdeling {
  margin-top: 22px; padding: 16px 18px;
  border: 1px solid var(--zr-lijn); border-radius: 12px; background: #fff;
}
#zms-reviews .zmsr-vrij {
  display: grid; grid-template-columns: 18px 62px minmax(0, 1fr) 44px;
  align-items: center; gap: 10px;
  width: 100%; padding: 7px 0; border: 0; background: none;
  font-family: inherit; font-size: .84rem; color: var(--zr-tekst);
  cursor: pointer; text-align: left;
}
#zms-reviews .zmsr-vrij[disabled] { cursor: default; opacity: .45; }
#zms-reviews .zmsr-vak {
  width: 17px; height: 17px; border: 1.5px solid #c9cfd8; border-radius: 4px;
  display: grid; place-items: center; transition: background .2s ease, border-color .2s ease;
}
#zms-reviews .zmsr-vak svg { width: 11px; height: 11px; opacity: 0; }
#zms-reviews .zmsr-vrij[aria-pressed='true'] .zmsr-vak { background: var(--zr-oranje); border-color: var(--zr-oranje); }
#zms-reviews .zmsr-vrij[aria-pressed='true'] .zmsr-vak svg { opacity: 1; }
#zms-reviews .zmsr-vrij-baan { height: 11px; border-radius: 3px; background: #eef0f4; overflow: hidden; }
#zms-reviews .zmsr-vrij-vul { display: block; height: 100%; border-radius: 3px; background: var(--zr-donker); }
#zms-reviews .zmsr-vrij-pct { text-align: right; font-weight: 700; color: var(--zr-kop); }

#zms-reviews .zmsr-rail-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: .84rem; font-weight: 600; color: var(--zr-oranje-diep);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- */
/* Rechterkolom: banner, zoeken, chips                               */
/* ---------------------------------------------------------------- */

#zms-reviews .zmsr-banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 18px; margin-bottom: 22px;
  background: rgba(255, 107, 0, .05); border: 1px solid rgba(255, 107, 0, .16);
  border-radius: 12px; font-size: .9rem; line-height: 1.55;
}
#zms-reviews .zmsr-banner svg { flex: none; color: var(--zr-oranje); margin-top: 1px; }

#zms-reviews .zmsr-zoekrij { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
#zms-reviews .zmsr-zoek { position: relative; flex: 1 1 260px; min-width: 0; }
#zms-reviews .zmsr-zoek svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--zr-zacht); }
#zms-reviews .zmsr-zoek input {
  width: 100%; padding: 12px 16px 12px 44px;
  border: 1px solid var(--zr-lijn); border-radius: 100px; background: #fff;
  font-family: inherit; font-size: .92rem; color: var(--zr-kop);
}
#zms-reviews .zmsr-zoek input:focus { outline: 2px solid rgba(255, 107, 0, .45); outline-offset: 1px; }
#zms-reviews .zmsr-sorteer {
  padding: 12px 16px; border: 1px solid var(--zr-lijn); border-radius: 100px; background: #fff;
  font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--zr-kop); cursor: pointer;
}

#zms-reviews .zmsr-chips-kop { font-size: 1.05rem; font-weight: 800; color: var(--zr-kop); margin-bottom: 12px; }
#zms-reviews .zmsr-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
#zms-reviews .zmsr-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--zr-lijn); background: #fff;
  font-family: inherit; font-size: .88rem; font-weight: 600; color: var(--zr-kop);
  cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease;
}
#zms-reviews .zmsr-chip:hover { border-color: #c9cfd8; }
#zms-reviews .zmsr-chip .zmsr-chip-n { font-size: .8rem; color: var(--zr-zacht); font-weight: 700; }
#zms-reviews .zmsr-chip[aria-pressed='true'] {
  background: var(--zr-oranje); border-color: var(--zr-oranje); color: #fff;
}
#zms-reviews .zmsr-chip[aria-pressed='true'] .zmsr-chip-n { color: rgba(255, 255, 255, .75); }

#zms-reviews .zmsr-teller {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  font-size: .88rem; color: var(--zr-zacht); margin-bottom: 16px;
}
#zms-reviews .zmsr-wis {
  border: 0; background: none; padding: 0; font-family: inherit; font-size: .86rem; font-weight: 600;
  color: var(--zr-oranje-diep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
#zms-reviews .zmsr-leeg {
  display: none; padding: 34px 24px; text-align: center;
  border: 1px dashed var(--zr-lijn); border-radius: 12px; color: var(--zr-zacht); font-size: .95rem;
}
#zms-reviews.zmsr-niets .zmsr-leeg { display: block; }

/* ---------------------------------------------------------------- */
/* De reviewfeed                                                     */
/* ---------------------------------------------------------------- */

#zms-reviews .zmsr-feed { display: flex; flex-direction: column; }
#zms-reviews .zmsr-card { padding: 26px 0; border-top: 1px solid var(--zr-lijn); }
#zms-reviews .zmsr-card:first-child { border-top: 0; padding-top: 4px; }
#zms-reviews .zmsr-card[hidden] { display: none; }

#zms-reviews .zmsr-kop { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 12px; }
#zms-reviews .zmsr-avatar {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 107, 0, .13); color: var(--zr-oranje-diep);
  font-size: .95rem; font-weight: 800; letter-spacing: .02em;
}
#zms-reviews .zmsr-wie { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#zms-reviews .zmsr-naam { font-size: 1rem; font-weight: 700; color: var(--zr-kop); line-height: 1.35; }
#zms-reviews .zmsr-bedrijf { font-size: .85rem; color: var(--zr-zacht); line-height: 1.4; }
#zms-reviews .zmsr-datum { font-size: .84rem; color: var(--zr-zacht); white-space: nowrap; padding-top: 2px; }

#zms-reviews .zmsr-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 11px; }
#zms-reviews .zmsr-verif { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; line-height: 1.3; }
#zms-reviews .zmsr-verif-uitnodiging { color: var(--zr-groen); }
#zms-reviews .zmsr-verif-spontaan { color: var(--zr-zacht); }
#zms-reviews .zmsr-verif svg { flex: none; }

#zms-reviews .zmsr-titel {
  font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.35;
  color: var(--zr-kop); margin-bottom: 7px;
}
#zms-reviews .zmsr-tekst { font-size: 1rem; line-height: 1.62; color: var(--zr-tekst); }
#zms-reviews .zmsr-chip-rij { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
#zms-reviews .zmsr-tag {
  display: inline-block; padding: 4px 10px; border-radius: 100px;
  background: var(--zr-vlak); border: 1px solid var(--zr-lijn);
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: var(--zr-zacht);
}

/* antwoord van Dominic: genest onder de review met een verticale lijn, als Trustpilot */
#zms-reviews .zmsr-reply {
  margin: 18px 0 0 22px; padding: 15px 18px;
  border-left: 2px solid var(--zr-lijn); background: var(--zr-vlak);
  border-radius: 0 10px 10px 0;
}
#zms-reviews .zmsr-reply-kop { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
#zms-reviews .zmsr-reply-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--zr-donker); color: #fff; font-size: .7rem; font-weight: 800;
}
#zms-reviews .zmsr-reply-naam { font-size: .88rem; font-weight: 700; color: var(--zr-kop); }
#zms-reviews .zmsr-reply-tekst { font-size: .92rem; line-height: 1.58; color: var(--zr-tekst); }

#zms-reviews .zmsr-meer {
  display: block; width: 100%; margin-top: 26px; padding: 14px;
  border: 1px solid var(--zr-lijn); border-radius: 2px; background: #fff;
  font-family: inherit; font-size: .95rem; font-weight: 700; color: var(--zr-kop);
  cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
#zms-reviews .zmsr-meer:hover { border-color: #c9cfd8; background: var(--zr-vlak); }
#zms-reviews .zmsr-meer[hidden] { display: none; }

/* ---------------------------------------------------------------- */
/* Principeblok                                                      */
/* ---------------------------------------------------------------- */

#zms-reviews .zmsr-principes {
  margin-top: 44px; padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--zr-lijn); border-radius: 16px; background: #fff;
}
#zms-reviews .zmsr-principes-kop {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -.02em;
  color: var(--zr-kop); margin-bottom: 8px;
}
#zms-reviews .zmsr-principes-lead {
  text-align: center; font-size: .95rem; line-height: 1.6; color: var(--zr-zacht);
  max-width: 60ch; margin: 0 auto 24px;
}
#zms-reviews .zmsr-uit { border-radius: 10px; background: rgba(255, 107, 0, .05); margin-bottom: 10px; overflow: hidden; }
#zms-reviews .zmsr-uit-knop {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 16px 20px; border: 0; background: none;
  font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--zr-kop);
  text-align: left; cursor: pointer;
}
#zms-reviews .zmsr-uit-pijl { flex: none; color: var(--zr-oranje); transition: transform .3s ease; }
#zms-reviews .zmsr-uit[open] .zmsr-uit-pijl { transform: rotate(180deg); }
#zms-reviews .zmsr-uit-paneel {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1);
}
#zms-reviews .zmsr-uit[open] .zmsr-uit-paneel { grid-template-rows: 1fr; }
#zms-reviews .zmsr-uit-inhoud { overflow: hidden; }
#zms-reviews .zmsr-uit-inhoud p {
  padding: 0 20px 18px; font-size: .93rem; line-height: 1.62; color: var(--zr-tekst);
}

/* ---------------------------------------------------------------- */
/* Responsief                                                        */
/* ---------------------------------------------------------------- */

@media (max-width: 991px) {
  #zms-reviews .zmsr-body-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  #zms-reviews .zmsr-rail { position: static; }
  #zms-reviews .zmsr-verdeling { max-width: 420px; }
}
@media (max-width: 767px) {
  /* De datum gaat op smal beeld naar een eigen regel. Dat vraagt flex-wrap op de
     kop, anders eist width:100% de hele rij op, wordt het naamvak 0px breed en
     valt de naamtekst dwars over de datum heen. De inspringing is de avatar plus
     de tussenruimte, zodat de datum netjes onder de naam uitkomt. */
  #zms-reviews .zmsr-kop { gap: 11px; flex-wrap: wrap; }
  #zms-reviews .zmsr-datum { width: 100%; padding-top: 4px; padding-left: 51px; }
  #zms-reviews .zmsr-avatar { width: 40px; height: 40px; font-size: .85rem; }
  #zms-reviews .zmsr-reply { margin-left: 0; }
  #zms-reviews .zmsr-vrij { grid-template-columns: 18px 54px minmax(0, 1fr) 40px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #zms-reviews .zmsr-uit-paneel { transition: none; }
  #zms-reviews .zmsr-rail-cta, #zms-reviews .zmsr-chip, #zms-reviews .zmsr-meer { transition: none; }
  #zms-reviews .zmsr-rail-cta:hover { transform: none; }
}