/* ═══════════════════════════════════════════════════════════════════
   UITVOERDERSPROFIEL — de pagina (#pmUit) en de pop-up (.pmUitPop).

   Het profiel zelf is één set klassen die op allebei staat, want het is
   letterlijk dezelfde HTML uit pm_up_render(). Alleen de schil eromheen
   verschilt. Vandaar dat de profielregels hieronder onder BEIDE scopes
   staan: #pmUit voor de pagina, .pmUitPop voor de pop-up.

   Tokens uit informatie.css; de reviewkaartjes komen uit homepage.css,
   zodat dit profiel dezelfde taal spreekt als /reviews-uitvoerders/.
   ═══════════════════════════════════════════════════════════════════ */
#pmUit, .pmUitPop {
  --groen: #95C11F; --groen-donker: #7ba018;
  --blauw: #00AFEF; --blauw-donker: #0093c9;
  --teal: #1ec98d; --tealBlauw: #0aa0e9;
  --inkt: #0f172a; --inkt-zacht: #1e293b;
  --grijs: #64748b; --grijs-licht: #94a3b8;
  --lijn: #e2e8f0; --fond: #f8fafc;
  --goud: #f5b400;
  --radius: 22px;
  --schaduw: 0 12px 30px rgba(15,23,42,.07);
  font-family: 'Albert Sans', -apple-system, sans-serif;
  color: var(--inkt-zacht); line-height: 1.5;
}
#pmUit, #pmUit *, #pmUit *::before, #pmUit *::after,
.pmUitPop, .pmUitPop *, .pmUitPop *::before, .pmUitPop *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* Blocksy zet eigen kleuren op koppen en alinea's; zo'n elementregel wint van
   overerving. `button` staat hier BEWUST NIET bij: elke knop zet zijn eigen kleur,
   en `#pmUit button` zou dan winnen van `.knop` en de tekst donker maken. */
#pmUit h1, #pmUit h2, #pmUit h3, #pmUit p, #pmUit li, #pmUit time,
.pmUitPop h1, .pmUitPop h2, .pmUitPop h3, .pmUitPop p, .pmUitPop li, .pmUitPop time { color: inherit; }
#pmUit [hidden], .pmUitPop [hidden] { display: none !important; }
#pmUit a { color: var(--blauw-donker); }
#pmUit .wrap { max-width: 860px; margin: 0 auto; padding: 0 18px; }
#pmUit :focus-visible, .pmUitPop :focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; border-radius: 6px; }

/* ══ de pagina ══ */
#pmUit { background: #fff; padding-bottom: 0; }
#pmUit .pmUitKruimel { font-size: 12px; color: var(--grijs); padding: 18px 0 12px; display: flex;
  flex-wrap: wrap; gap: 6px; align-items: center; }
#pmUit .pmUitKruimel a { color: var(--grijs); text-decoration: none; }
#pmUit .pmUitKruimel a:hover { color: var(--blauw-donker); }
#pmUit .pmUitKaart { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 26px 24px 30px;
  box-shadow: var(--schaduw); background: #fff; }

#pmUit .pmUitLeeg { text-align: center; padding: 60px 18px 70px; }
#pmUit .pmUitLeeg h1 { font: 900 26px 'Inter', sans-serif; color: var(--inkt); letter-spacing: -.8px; }
#pmUit .pmUitLeeg p { font-size: 14.5px; color: var(--grijs); line-height: 1.65; margin: 12px auto 0; max-width: 460px; }
#pmUit .pmUitLeeg .knoppen { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
#pmUit .pmUitLeeg .knop { display: inline-block; text-decoration: none; font: 800 13.5px 'Inter', sans-serif;
  color: #fff; background: linear-gradient(90deg, var(--teal), var(--tealBlauw)); border-radius: 999px; padding: 12px 22px; }
#pmUit .pmUitLeeg .knopKaal { display: inline-block; text-decoration: none; font: 700 13.5px 'Inter', sans-serif;
  color: var(--inkt); background: #fff; border: 1.5px solid var(--lijn); border-radius: 999px; padding: 12px 22px; }

/* ══ het profiel: kop ══ */
#pmUit .pKop, .pmUitPop .pKop { display: flex; gap: 14px; align-items: flex-start; }
#pmUit .pFoto, .pmUitPop .pFoto { width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: linear-gradient(135deg, var(--teal), var(--tealBlauw)); display: grid; place-items: center;
  color: #fff; font: 900 22px 'Inter', sans-serif; border: 3px solid #fff; box-shadow: 0 4px 14px rgba(15,23,42,.14); }
#pmUit .pFoto img, .pmUitPop .pFoto img { width: 100%; height: 100%; object-fit: cover; }
#pmUit .pKopTekst, .pmUitPop .pKopTekst { flex: 1; min-width: 0; }
/* 22px, niet 27: bij een lange bedrijfsnaam liep de kop op mobiel over twee regels en
   pakte een kwart van het scherm. */
#pmUit .pNaam, .pmUitPop .pNaam { font: 900 22px 'Inter', sans-serif; color: var(--inkt);
  letter-spacing: -.6px; line-height: 1.15; }
#pmUit .pScore, .pmUitPop .pScore { display: flex; align-items: center; gap: 7px; margin-top: 5px; flex-wrap: wrap; }
#pmUit .pScore .sterren, .pmUitPop .pScore .sterren { color: var(--goud); font-size: 13px; letter-spacing: 1px; }
#pmUit .pScore .sterren .leeg, .pmUitPop .pScore .sterren .leeg { color: #dfe5ec; }
#pmUit .pScore .cijfer, .pmUitPop .pScore .cijfer { font: 800 13px 'Inter', sans-serif; color: var(--inkt); }
#pmUit .pScore .tel, .pmUitPop .pScore .tel { font-size: 12.5px; color: var(--grijs); }
#pmUit .pBadges, .pmUitPop .pBadges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
#pmUit .badge, .pmUitPop .badge { display: inline-flex; align-items: center; gap: 5px;
  font: 700 11.5px 'Inter', sans-serif; border-radius: 999px; padding: 5px 10px;
  background: #eefaf4; color: var(--groen-donker); }
#pmUit .badge.grijs, .pmUitPop .badge.grijs { background: var(--fond); color: var(--grijs); }
#pmUit .badge svg, .pmUitPop .badge svg { width: 11px; height: 11px; }

/* ══ de drie kerncijfers ══ */
/* ⚠ minmax(0, 1fr), NIET 1fr. Een 1fr-kolom krijgt min-width:auto, dus een lang label
   als "actief op het platform" maakt de kolom breder dan het venster en dan loopt de hele
   pop-up buiten beeld (gezien bij het renderen op 400px, 6 september 2026). */
#pmUit .pFeiten, .pmUitPop .pFeiten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin-top: 18px; border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; background: var(--fond); }
#pmUit .pFeit, .pmUitPop .pFeit { padding: 13px 10px; text-align: center; border-right: 1px solid var(--lijn);
  min-width: 0; }
#pmUit .pFeit:last-child, .pmUitPop .pFeit:last-child { border-right: 0; }
#pmUit .pFeit .groot, .pmUitPop .pFeit .groot { font: 800 19px 'Inter', sans-serif; color: var(--inkt);
  font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; gap: 5px; }
#pmUit .pFeit .ico, .pmUitPop .pFeit .ico { width: 15px; height: 15px; flex: 0 0 auto; display: block;
  /* De medaille komt van de biedingkaart en is daar goud. Hier niet: goud hoort bij een
     waardering, en een klussenteller is dat niet. Ontkleurd naar grijsblauw. */
  filter: grayscale(1) brightness(.92); opacity: .75; }
#pmUit .pFeit .klein, .pmUitPop .pFeit .klein { font-size: 11.5px; color: var(--grijs); margin-top: 2px; line-height: 1.35; }
#pmUit .pFeit .klein b, .pmUitPop .pFeit .klein b { font-family: 'Inter', sans-serif; font-weight: 800; color: var(--inkt-zacht); }

/* ══ ervaring met precies dit afval ══
   Het sterkste argument dat we hebben, en daarom het enige blok met een eigen
   kleurvlak. Al het andere blijft wit, anders concurreren ze. */
#pmUit .pErvaring, .pmUitPop .pErvaring { margin: 18px 0 6px; border: 1px solid #cdebd9; border-radius: 16px;
  overflow: hidden; background: linear-gradient(180deg, #f2fbf6 0%, #fbfefc 100%); }
#pmUit .pErvKop, .pmUitPop .pErvKop { display: flex; align-items: center; gap: 9px; padding: 12px 14px 10px; }
#pmUit .pErvVink, .pmUitPop .pErvVink { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--groen-donker); color: #fff; }
#pmUit .pErvVink svg, .pmUitPop .pErvVink svg { width: 12px; height: 12px; }
#pmUit .pErvKopTekst, .pmUitPop .pErvKopTekst { font: 800 13.5px 'Inter', sans-serif; color: #14532d;
  letter-spacing: -.2px; line-height: 1.35; }
#pmUit .pErvKopTekst b, .pmUitPop .pErvKopTekst b { color: var(--groen-donker); }
#pmUit .pErvLijst, .pmUitPop .pErvLijst { display: flex; flex-direction: column; gap: 1px; background: #e4f3ea; }
#pmUit .pErvRij, .pmUitPop .pErvRij { display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: #fff; min-width: 0; }
#pmUit .pErvIco, .pmUitPop .pErvIco { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
  object-fit: contain; background: var(--fond); border: 1px solid var(--lijn); padding: 2px; }
/* Alleen ruimte, geen kadertje: houdt de namen uitgelijnd zonder dat het op een
   mislukte afbeelding lijkt. */
#pmUit .pErvIco.pErvLeeg, .pmUitPop .pErvIco.pErvLeeg { background: none; border: 0; }
#pmUit .pErvNaam, .pmUitPop .pErvNaam { font: 700 12.5px 'Inter', sans-serif; color: var(--inkt);
  min-width: 0; overflow-wrap: anywhere; }
#pmUit .pErvAantal, .pmUitPop .pErvAantal { margin-left: auto; font: 800 14px 'Inter', sans-serif;
  color: var(--groen-donker); font-variant-numeric: tabular-nums; white-space: nowrap; }
#pmUit .pErvAantal span, .pmUitPop .pErvAantal span { font-size: 11px; font-weight: 700; color: var(--grijs); margin-left: 2px; }

/* ══ omschrijving en sectiekopjes ══ */
/* De kop boven de beoordelingen: een echte kop, geen klein grijs kapitaaltje. Maar
   ZONDER gouden ster ervoor. Goud is nu voorbehouden aan echte sterwaarderingen; er
   stonden achttien gouden tekens op één scherm en dan betekent de kleur niets meer. */
#pmUit .pTitel, .pmUitPop .pTitel { font: 800 16px 'Inter', sans-serif; letter-spacing: -.3px;
  text-transform: none; color: var(--inkt); margin: 24px 0 11px; }
/* Direct na het ervaringsblok mag er meer lucht: dat blok heeft een eigen rand en
   een kop die er strak tegenaan zit leest als een fout (Robbie, 6 sept 2026). */
#pmUit .pErvaring + .pTitel, .pmUitPop .pErvaring + .pTitel { margin-top: 28px; }
#pmUit .pErvaring + .pTitel + .pBio, .pmUitPop .pErvaring + .pTitel + .pBio { margin-bottom: 4px; }
#pmUit .pBio, .pmUitPop .pBio { font-size: 13.5px; color: #334155; line-height: 1.7; }
#pmUit .pBio p + p, .pmUitPop .pBio p + p { margin-top: 9px; }

/* ══ de beoordelingen ══ */
#pmUit .pReviews, .pmUitPop .pReviews { display: grid; gap: 10px; }
#pmUit .pRev, .pmUitPop .pRev { background: #fff; border: 1px solid var(--lijn); border-radius: 14px;
  padding: 14px 16px 12px; }

/* Het labeltje boven een naar voren gehaalde beoordeling. Klein en in hetzelfde
   zachte groen als de KvK-badge en het ervaringsblok: het betekent hetzelfde
   ("dit gaat over jouw klus"), alleen op kleinere schaal. Geen nieuwe kleur erbij. */
#pmUit .revMatch, .pmUitPop .revMatch { display: inline-flex; align-items: center; gap: 5px;
  font: 700 11px 'Inter', sans-serif; color: var(--groen-donker); background: #eefaf4;
  border-radius: 999px; padding: 4px 9px; margin-bottom: 8px; }
#pmUit .revMatch svg, .pmUitPop .revMatch svg { width: 10px; height: 10px; flex: 0 0 auto; }
#pmUit .revMatch b, .pmUitPop .revMatch b { font-weight: 800; }

/* ── de kop van de kaart: waar ging het over ── */
#pmUit .revKop, .pmUitPop .revKop { display: flex; align-items: center; gap: 11px; }
#pmUit .revKopTekst, .pmUitPop .revKopTekst { min-width: 0; flex: 1; }
#pmUit .revFoto, .pmUitPop .revFoto { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  object-fit: cover; background: var(--fond); border: 1px solid var(--lijn); }
/* De titel mag opvallen: dit is waar de lezer op scant. De plaatsnaam is er in de
   renderer afgehaald, dus hij past meestal op een regel. */
#pmUit .revKlusTitel, .pmUitPop .revKlusTitel { display: block; font: 800 13.5px 'Inter', sans-serif;
  color: var(--inkt); line-height: 1.3; letter-spacing: -.2px; }
#pmUit .revKopSub, .pmUitPop .revKopSub { display: flex; align-items: baseline; gap: 9px;
  flex-wrap: wrap; margin-top: 3px; }
/* De sterren: het enige goud op de kaart, en daardoor meteen duidelijk waar ze over gaan. */
#pmUit .pRev .sterren, .pmUitPop .pRev .sterren { color: var(--goud); font-size: 13.5px;
  letter-spacing: 1.5px; line-height: 1; }
#pmUit .pRev .sterren .leeg, .pmUitPop .pRev .sterren .leeg { color: #dfe5ec; }
#pmUit .revDatum, .pmUitPop .revDatum { font-size: 11.5px; color: var(--grijs-licht); }

/* Het citaat is de grootste tekst op de kaart en staat rechtop, niet cursief. Cursief
   op 12,5px was het slechtst leesbare van het hele scherm terwijl dit juist het stuk is
   dat overtuigt. De aanhalingstekens doen het werk dat cursief eerst deed. */
#pmUit .revTekst, .pmUitPop .revTekst { font-size: 14.5px; color: var(--inkt-zacht); line-height: 1.6;
  margin-top: 10px; }
#pmUit .revTekst.geen, .pmUitPop .revTekst.geen { color: var(--grijs-licht); font-style: italic; font-size: 13px; }

/* De voet: wie het schreef, en voor hoeveel. */
#pmUit .revVoet, .pmUitPop .revVoet { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #eef2f6; }
#pmUit .revNaam, .pmUitPop .revNaam { font: 700 12.5px 'Inter', sans-serif; color: var(--inkt);
  min-width: 0; overflow-wrap: anywhere; }
/* Het bedrag blijft inktkleur, net als het bod in de voet van de pop-up: de klant moet
   die twee naast elkaar kunnen leggen, en dat lukt niet als de een groen is. */
#pmUit .revPrijs, .pmUitPop .revPrijs { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font: 700 13px 'Inter', sans-serif; color: var(--inkt); font-variant-numeric: tabular-nums; }
#pmUit .revPrijs svg, .pmUitPop .revPrijs svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--groen-donker); }

#pmUit .pMeerRij, .pmUitPop .pMeerRij { display: flex; justify-content: center; padding-top: 14px; }
#pmUit .pMeer, .pmUitPop .pMeer { font: 700 13px 'Inter', sans-serif; color: var(--blauw-donker);
  border: 1.5px solid var(--lijn); background: #fff; border-radius: 999px; padding: 10px 20px; cursor: pointer; }
#pmUit .pMeer:hover, .pmUitPop .pMeer:hover { border-color: var(--blauw); }

/* ══ de uitnodiging om te beoordelen ══
   Alleen zichtbaar voor ingelogde klanten, en die komen hier vrijwel altijd
   rechtstreeks uit de uitnodigingsmail. Voor hen is dit de enige reden dat ze op
   deze pagina zijn, dus mag het het luidste element van de pagina zijn. */
/* ══ de uitnodiging om te beoordelen ══
   Alleen zichtbaar voor ingelogde klanten, en die komen hier vrijwel altijd
   rechtstreeks uit de uitnodigingsmail. Voor hen is dit de enige reden dat ze op
   deze pagina zijn, dus mag het het luidste element van de pagina zijn.

   GOUD, niet groen (Robbie, 6 september 2026): goud is op de hele site de kleur
   van een beoordeling — de sterren, het cijfer, de medaille. Groen is de kleur van
   een actie in de flow. Een groene knop hier las als "ga verder", niet als
   "geef een beoordeling". */
#pmUit .pagCta { margin-top: 18px; border: 2px solid #f2d489; border-radius: 18px; padding: 18px 20px;
  background: linear-gradient(135deg, #fffaeb 0%, #fdf3dc 100%);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 10px 26px rgba(232,164,0,.16); }
#pmUit .pagCta .ster { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; display: grid;
  place-items: center; background: linear-gradient(135deg, #f5b400, #e8a400); color: #fff; font-size: 21px;
  line-height: 1; box-shadow: 0 6px 14px rgba(232,164,0,.42); }
#pmUit .pagCta .tekst { flex: 1 1 240px; min-width: 0; }
#pmUit .pagCta h2 { font: 900 16.5px 'Inter', sans-serif; color: #4a3505; letter-spacing: -.3px; line-height: 1.3; }
#pmUit .pagCta p { font-size: 13.5px; color: #6b5526; line-height: 1.6; margin-top: 5px; }
/* De knop komt uit [beoordeling_knop] in het thema; die houdt zijn eigen modal en
   AJAX, wij geven hem alleen onze opmaak. Twee id's plus een klasse is specifiek
   genoeg om van de inline stijl van die shortcode te winnen.
   Donkere tekst, geen witte: wit op goud haalt nog geen 2,5:1 en is onleesbaar,
   terwijl inkt op goud rond de 9:1 zit. */
#pmUit .pagCta #open-rating-modal { font: 800 14.5px 'Inter', sans-serif; color: #241a00; border: 0;
  cursor: pointer; background: linear-gradient(90deg, #f5b400, #e8a400); border-radius: 999px;
  padding: 14px 24px; white-space: nowrap; box-shadow: 0 8px 20px rgba(232,164,0,.42);
  display: inline-flex; align-items: center; gap: 8px; transition: filter .2s ease; }
#pmUit .pagCta #open-rating-modal:hover { filter: brightness(1.06); }
#pmUit .pagCta #open-rating-modal .dashicons { color: #241a00; }

/* ══ eind-CTA ══ */
#pmUit .eindCta { margin: 30px -18px 0; background: var(--inkt); color: #fff; padding: 46px 18px 52px; text-align: center; }
#pmUit .eindCta h2 { font-family: 'Inter', sans-serif; font-size: 23px; font-weight: 900; letter-spacing: -.6px; color: #fff; }
#pmUit .eindCta .toel { font-size: 14px; color: #b6c6d8; line-height: 1.65; margin: 12px auto 20px; max-width: 520px; }
#pmUit .eindKnop { display: inline-flex; flex-direction: column; gap: 3px; padding: 14px 28px; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--tealBlauw)); color: #fff; text-decoration: none;
  box-shadow: 0 10px 26px rgba(30,201,141,.35); }
#pmUit .eindKnop .hoofd { font: 800 15px 'Inter', sans-serif; }
#pmUit .eindKnop .sub { font-size: 11.5px; opacity: .92; font-weight: 600; }
#pmUit .eindKnop:hover { filter: brightness(1.05); }

/* ══════════════════════════════════════════════════════════════════
   DE POP-UP
   ══════════════════════════════════════════════════════════════════ */
.pmUitLaag { position: fixed; inset: 0; z-index: 99998; background: rgba(15,23,42,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
/* ⚠ min-width: 0 is hier GEEN detail. Een flex-item krijgt standaard min-width:auto, en
   dan groeit de pop-up mee met zijn breedste inhoud in plaats van zich aan max-width te
   houden — op een telefoon liep hij daardoor rechts buiten beeld. Met min-width:0 blijft
   de doos binnen het scherm en vangt .popLijf de rest op met zijn eigen scroll. */
.pmUitPop { width: 100%; max-width: min(540px, 100%); min-width: 0;
  max-height: min(88vh, 700px); background: #fff; border-radius: 20px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(15,23,42,.35); }

/* De kop: waar zit ik, en hoe spring ik door. Dit is de kern van de pop-up —
   vier ophalers vergelijken zonder de voorstellenlijst te verlaten. */
.pmUitPop .popKop { display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--lijn); background: var(--fond); flex: 0 0 auto; }
.pmUitPop .popTeller { font: 800 12px 'Inter', sans-serif; color: var(--grijs); }
.pmUitPop .popPijl { margin-left: auto; display: flex; gap: 6px; }
.pmUitPop .popPijl button, .pmUitPop .popSluit { width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid var(--lijn); background: #fff; cursor: pointer; display: grid; place-items: center;
  color: var(--inkt-zacht); }
.pmUitPop .popPijl button:hover:not(:disabled), .pmUitPop .popSluit:hover { border-color: var(--blauw); color: var(--blauw-donker); }
.pmUitPop .popPijl button:disabled { opacity: .35; cursor: default; }
.pmUitPop .popPijl svg, .pmUitPop .popSluit svg { width: 15px; height: 15px; }
.pmUitPop .popSluit { margin-left: 6px; }

.pmUitPop .popLijf { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 20px 18px; flex: 1 1 auto;
  /* Lichte blauwe bodem: de reviewkaarten zijn wit en moeten er los op liggen.
     Op een witte ondergrond vielen ze weg (Robbie, 6 september 2026). */
  background: linear-gradient(180deg, #f3f9fd 0%, #edf5fb 100%); }
.pmUitPop .popLaden { padding: 60px 20px; text-align: center; color: var(--grijs-licht); font-size: 13.5px; }
.pmUitPop .popFout { padding: 40px 20px; text-align: center; color: var(--grijs); font-size: 13.5px; }
.pmUitPop .popFout a { color: var(--blauw-donker); }

/* De voet: het bedrag en de keuze staan ALTIJD in beeld, ook als de klant door de
   beoordelingen scrollt. */
.pmUitPop .popVoet { flex: 0 0 auto; border-top: 1px solid var(--lijn); padding: 13px 16px; background: #fff;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pmUitPop .popBedrag { line-height: 1.2; }
.pmUitPop .popBedrag .lab { font-size: 11px; color: var(--grijs-licht); font-weight: 600; display: block; }
.pmUitPop .popBedrag .num { font: 900 22px 'Inter', sans-serif; color: var(--inkt); font-variant-numeric: tabular-nums; }
.pmUitPop .popKnoppen { margin-left: auto; display: flex; gap: 8px; }
.pmUitPop .popNaar { font: 800 13.5px 'Inter', sans-serif; color: #fff; border: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--teal), var(--tealBlauw)); border-radius: 999px; padding: 12px 20px;
  box-shadow: 0 8px 20px rgba(30,201,141,.35); text-decoration: none; display: inline-block; }
.pmUitPop .popNaar:hover { filter: brightness(1.05); }

/* Zolang de pop-up open staat mag de pagina eronder niet meescrollen. */
body.pmUitOpen { overflow: hidden; }

@media (min-width: 700px) {
  #pmUit .pmUitKaart { padding: 32px 34px 36px; }
  #pmUit .pNaam { font-size: 27px; }
  .pmUitPop .pNaam { font-size: 24px; }
  #pmUit .pFoto { width: 82px; height: 82px; font-size: 30px; }
  #pmUit .eindCta { border-radius: var(--radius); margin-left: 0; margin-right: 0; }
  #pmUit .eindCta h2 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  #pmUit *, .pmUitPop * { transition: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   HET BEOORDELINGSFORMULIER VAN HET THEMA

   ⚠ Dit moest, en het is onze eigen schuld. De modal komt uit
   [beoordeling_knop] en staat sinds v3.71.0 BINNEN #pmUit, want daar
   zetten we de knop neer. Onze reset `#pmUit *` heeft specificiteit
   (1,0,0) en wint dus van élke klasseregel van die shortcode (0,1,0):
   padding: 40px, margin-bottom: 20px, de ruimte onder de labels, alles
   weg. Resultaat op een telefoon: tekst tegen de rand, velden tegen
   elkaar, knop tegen de onderkant (Robbie, 6 sept 2026, screenshot).

   We zetten die ruimte hier dus terug, en meteen in onze eigen stijl.
   De HTML, de modal-logica en de AJAX blijven volledig van het thema —
   alleen het uiterlijk is van ons.
   ══════════════════════════════════════════════════════════════════ */
#pmUit .afval-modal-overlay { padding: 16px; overflow-y: auto; background: rgba(15,23,42,.55); }
#pmUit .afval-modal-content { width: 100%; max-width: 420px; min-width: 0;
  max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 20px 20px 22px; border-radius: 20px; box-shadow: 0 24px 60px rgba(15,23,42,.35); }

#pmUit .modal-header { text-align: left; margin-bottom: 18px; padding: 0 34px 14px 0;
  border-bottom: 1px solid var(--lijn); }
#pmUit .modal-header h3 { font: 900 19px 'Inter', sans-serif; color: var(--inkt); letter-spacing: -.4px; }
#pmUit .close-modal { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--lijn);
  background: #fff; color: var(--grijs); font-size: 20px; line-height: 1; }
#pmUit .close-modal:hover { border-color: var(--blauw); color: var(--blauw-donker); }

#pmUit .input-group { margin-bottom: 16px; }
#pmUit .input-group label { display: block; font: 800 11.5px 'Inter', sans-serif; letter-spacing: .7px;
  text-transform: uppercase; color: var(--grijs); margin-bottom: 7px; }

#pmUit #modern-rating-form input[type="text"],
#pmUit #modern-rating-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--lijn);
  border-radius: 12px; background: #f7fbff; color: var(--inkt);
  font: 500 14px 'Albert Sans', sans-serif; }
#pmUit #modern-rating-form textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
#pmUit #modern-rating-form input[type="text"]:focus,
#pmUit #modern-rating-form textarea:focus { outline: none; border-color: var(--blauw); background: #fff; }
#pmUit #modern-rating-form ::placeholder { color: var(--grijs-licht); }

/* De sterren: de omgekeerde volgorde en het ~-trucje blijven van het thema,
   wij zetten alleen de maat en de kleur goed. */
#pmUit .star-rating-block { margin-top: 2px; }
#pmUit .star-rating-wrapper label { font-size: 30px; line-height: 1; color: #dfe5ec; margin-right: 6px; }
#pmUit .star-rating-wrapper input:checked ~ label,
#pmUit .star-rating-wrapper label:hover,
#pmUit .star-rating-wrapper label:hover ~ label { color: var(--goud); }

#pmUit .btn-submit-vrolijk { width: 100%; margin-top: 4px; padding: 14px 20px; border: 0;
  border-radius: 999px; background: var(--groen-donker); color: #fff; cursor: pointer;
  font: 800 15px 'Inter', sans-serif; box-shadow: 0 8px 20px rgba(123,160,24,.35); }
#pmUit .btn-submit-vrolijk:hover { background: #6b8c15; }
#pmUit #rating-response-msg p { margin-top: 12px !important; font-size: 13.5px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════
   BEVESTIGING NA HET INDIENEN

   Het blok vervaagt en er komt een vinkje overheen. De blur staat op de
   KINDEREN en niet op het blok zelf, want filter werkt door op alles wat
   erin zit — ook op de bevestiging die er juist scherp overheen moet.

   Klassen mogen hier: LiteSpeed's UCSS staat uit op auteurspagina's
   (includes/uitvoerder-routes.php), dus een klasse die alleen JavaScript
   zet kan hier niet weggestript worden.
   ══════════════════════════════════════════════════════════════════ */
#pmUit .pagCta.is-klaar { position: relative; }
#pmUit .pagCta.is-klaar > *:not(.pmUitKlaar) {
  filter: blur(3px); opacity: .4; pointer-events: none; user-select: none;
  transition: filter .25s ease, opacity .25s ease;
}
#pmUit .pmUitKlaar { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 12px; }
#pmUit .pmUitKlaarVink { width: 44px; height: 44px; border-radius: 50%; display: grid;
  place-items: center; background: var(--groen-donker); color: #fff;
  box-shadow: 0 8px 20px rgba(123,160,24,.4); }
#pmUit .pmUitKlaarVink svg { width: 22px; height: 22px; }
#pmUit .pmUitKlaarTekst { font: 800 14.5px 'Inter', sans-serif; color: #33470a; letter-spacing: -.2px; }
@media (prefers-reduced-motion: reduce) {
  #pmUit .pagCta.is-klaar > *:not(.pmUitKlaar) { transition: none; }
}