/* Configurator CSS, letterlijke extractie uit het statische prototype.
   Bron: raamdecohuis-screens-prototype/index.html
   Style-blok: regels 12 tot 683 (<style> ... </style>)
   Configurator-HTML: regels 737 tot 902 (section.config-sec)
   Dynamische onderdelen uit de JS-builders: regels 1555 tot 1700
   Meegenomen buiten de sectie: zoom-lightbox (129 tot 134), validatie-feedback
   (276 tot 284), mobiele preview config-fab / config-sheet / cs-* (608 tot 609
   en 649 tot 666).
   Weggelaten: navigatie, header, footer, alle andere secties en de
   lightbox-samenvatting sum*.
   Geen enkele waarde is aangepast of afgerond. */

/* ---------- :root variabelen (bron: regels 13 tot 27) ---------- */
.rdh-cfg{
  --rdh-green:#41C138; --rdh-green-600:#37a82f; --rdh-green-700:#2d8f27; --rdh-green-050:#eef9ec; --rdh-green-100:#dcf3d8;
  --rdh-ink:#20343A; --rdh-ink-700:#2b444c; --rdh-ink-600:#3a565f;
  --rdh-text:#243035; --rdh-muted:#6a7a7f; --rdh-muted-2:#8b979b;--rdh-body-grey:#676767;
  --rdh-line:#e5eae9; --rdh-line-2:#eef2f1;
  --rdh-grey-btn:#dfe3e3; --rdh-grey-btn-h:#d2d8d8;
  --rdh-bg:#ffffff; --rdh-bg-soft:#f4f8f6; --rdh-bg-soft-2:#eef4f2;
  --rdh-r-xs:8px; --rdh-r-sm:12px; --rdh-r-md:16px; --rdh-r-lg:22px; --rdh-r-xl:30px; --rdh-r-pill:999px;
  --rdh-shadow-sm:0 2px 8px rgba(32,52,58,.06);
  --rdh-shadow:0 10px 30px rgba(32,52,58,.10);
  --rdh-shadow-lg:0 24px 60px rgba(32,52,58,.16);
  --rdh-maxw:1220px;
  --rdh-font-head:'Comfortaa','Poppins',system-ui,sans-serif;
  --rdh-font-body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- Basis / reset (bron: regels 28 tot 36) ---------- */
.rdh-cfg *{box-sizing:border-box}

.rdh-cfg{margin:0;font-family:var(--rdh-font-body);color:var(--rdh-text);background:var(--rdh-bg);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.rdh-cfg h1,.rdh-cfg h2,.rdh-cfg h3,.rdh-cfg h4{font-family:var(--rdh-font-head);color:var(--rdh-ink);font-weight:700;line-height:1.2;margin:0}
.rdh-cfg p{margin:0 0 1em}
.rdh-cfg a{color:inherit;text-decoration:none}
.rdh-cfg img{max-width:100%;display:block}
.rdh-cfg .rdh-wrap{max-width:var(--rdh-maxw);margin:0 auto;padding:0 24px}
.rdh-cfg .rdh-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ---------- Buttons (bron: regels 39 tot 46) ---------- */
.rdh-cfg .rdh-btn{border:0;cursor:pointer;font-family:var(--rdh-font-head);font-weight:700;font-size:16px;border-radius:var(--rdh-r-xs);padding:14px 16px 14px 22px;display:inline-flex;align-items:center;justify-content:center;gap:12px;transition:transform .12s,background .15s,box-shadow .15s;text-align:left;line-height:1.2}
.rdh-cfg .rdh-btn:active{transform:translateY(1px)}
.rdh-cfg .rdh-btn .rdh-hex{width:30px;height:30px;flex:none;background:var(--rdh-ink);clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);display:grid;place-items:center}
.rdh-cfg .rdh-btn .rdh-hex svg{width:13px;height:13px;color:#fff}
.rdh-cfg .rdh-btn-primary{background:var(--rdh-green);color:#fff;box-shadow:0 8px 20px rgba(65,193,56,.30)}
.rdh-cfg .rdh-btn-primary:hover{background:var(--rdh-green-600)}
.rdh-cfg .rdh-btn-secondary{background:var(--rdh-grey-btn);color:var(--rdh-ink)}
.rdh-cfg .rdh-btn-secondary:hover{background:var(--rdh-grey-btn-h)}

/* ---------- Configurator (bron: regels 90 tot 91) ---------- */
.rdh-cfg .rdh-config-sec{padding:24px 0 56px}
.rdh-cfg .rdh-config-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:44px;align-items:start}

/* Visual column (bron: regels 94 tot 110) */
.rdh-cfg .rdh-visual{position:sticky;top:20px}
/* Salient zet overflow:hidden op de body en dat maakt de body een scroll-container
   die nooit scrolt, waardoor position:sticky niets doet; clip knipt visueel exact
   hetzelfde af zonder scroll-container te worden. Bewust op Salient gescoped: op een
   thema dat op html geen overflow zet propageert de body-overflow naar het viewport
   en zet clip het scrollen van de hele pagina uit. De vaste Salient-header op live is
   140px hoog, dus daar hangt de afbeelding onder de navigatie (plus 32px adminbar
   voor ingelogde beheerders). Mobiel is geen aanpassing nodig: onder 1000px staat
   de visual op static. */
body.wp-theme-salient:has(.rdh-cfg){overflow:clip}
/* De hoogte van die vaste header als variabele, want naast de visual rekent ook het
   aanvraagblok ermee. Een getal op twee plekken loopt uit elkaar zodra de header wijzigt.
   De uitkomst is dezelfde als voorheen: 140 plus de 20px lucht van het ontwerp is 160,
   met adminbalk 192. */
body.wp-theme-salient .rdh-cfg{--rdh-salient-header:140px}
body.wp-theme-salient.admin-bar .rdh-cfg{--rdh-salient-header:172px}
body.wp-theme-salient .rdh-cfg .rdh-visual{top:calc(var(--rdh-salient-header) + 20px)}
.rdh-cfg .rdh-stage{position:relative;background:radial-gradient(120% 120% at 50% 8%,#fbfcfb 0%,#eef3f1 70%,#e7eeeb 100%);border:1px solid var(--rdh-line);border-radius:var(--rdh-r-xl);padding:22px;box-shadow:var(--rdh-shadow-sm);overflow:hidden}
.rdh-cfg .rdh-stage-badges{position:absolute;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;gap:10px;z-index:2}
.rdh-cfg .rdh-chip{background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border:1px solid var(--rdh-line);color:var(--rdh-ink);font-size:12px;font-weight:600;padding:7px 12px;border-radius:var(--rdh-r-pill);display:inline-flex;align-items:center;gap:6px;box-shadow:var(--rdh-shadow-sm)}
.rdh-cfg .rdh-chip svg{width:14px;height:14px;color:var(--rdh-green)}
.rdh-cfg .rdh-chip.rdh-solar{background:var(--rdh-ink);color:#fff;border-color:var(--rdh-ink)}
.rdh-cfg .rdh-chip.rdh-solar svg{color:#ffd54a}
.rdh-cfg .rdh-render-frame{position:relative;display:grid;place-items:center;margin:6px 0 0;cursor:zoom-in}
.rdh-cfg .rdh-render-frame img{width:100%;max-width:440px;aspect-ratio:900/1180;object-fit:contain;margin:0 auto;filter:drop-shadow(0 24px 34px rgba(32,52,58,.18));transition:opacity .28s ease}
.rdh-cfg .rdh-render-frame img.rdh-swapping{opacity:.25}
.rdh-cfg .rdh-zoom-btn{position:absolute;bottom:10px;right:0;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--rdh-line);box-shadow:var(--rdh-shadow-sm);display:grid;place-items:center;cursor:pointer;color:var(--rdh-ink);z-index:3}
.rdh-cfg .rdh-zoom-btn svg{width:19px;height:19px}
.rdh-cfg .rdh-zoom-btn:hover{background:#fff}
.rdh-cfg .rdh-stage-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.rdh-cfg .rdh-selcap{font-family:var(--rdh-font-head);font-weight:600;color:var(--rdh-ink);font-size:15px}
.rdh-cfg .rdh-selcap small{display:block;font-family:var(--rdh-font-body);font-weight:400;color:var(--rdh-muted);font-size:13px;margin-top:2px}
.rdh-cfg .rdh-note-indicatief{font-size:12px;color:var(--rdh-muted-2);text-align:right;max-width:190px;line-height:1.4}
/* social proof (bron: regels 112 tot 126) */
.rdh-cfg .rdh-socialproof{margin-top:16px;background:#fff;border:1px solid var(--rdh-line);border-radius:var(--rdh-r-lg);padding:18px 20px;box-shadow:var(--rdh-shadow-sm)}
.rdh-cfg .rdh-sp-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rdh-cfg .rdh-sp-stars{color:#f5b301;font-size:16px;letter-spacing:2px}
.rdh-cfg .rdh-sp-score{font-family:var(--rdh-font-head);color:var(--rdh-ink);display:flex;align-items:baseline;gap:3px}
.rdh-cfg .rdh-sp-score b{font-size:18px}
.rdh-cfg .rdh-sp-score span{color:var(--rdh-muted);font-size:12.5px}
.rdh-cfg .rdh-sp-quote{font-size:14px;color:var(--rdh-ink-600);font-style:italic;margin:0 0 8px;line-height:1.55}
.rdh-cfg .rdh-sp-meta{font-size:12px;color:var(--rdh-muted-2);margin-bottom:13px}
.rdh-cfg .rdh-sp-badges{display:flex;gap:8px;flex-wrap:wrap}
.rdh-cfg .rdh-sp-badges span{background:var(--rdh-green-050);color:var(--rdh-green-700);border-radius:var(--rdh-r-pill);padding:6px 12px;font-size:12px;font-weight:600;font-family:var(--rdh-font-head);display:inline-flex;align-items:center;gap:6px}
.rdh-cfg .rdh-sp-badges svg{width:13px;height:13px}
.rdh-cfg .rdh-sp-source{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--rdh-muted)}
.rdh-cfg .rdh-sp-source b{color:var(--rdh-ink);font-weight:600;font-family:var(--rdh-font-head)}
.rdh-cfg .rdh-sp-wk{width:28px;height:28px;flex:none;display:grid;place-items:center}
.rdh-cfg .rdh-sp-wk img{width:28px;height:28px;object-fit:contain}

/* Lightbox (bron: regels 129 tot 134) */
/* De z-index is die van het ontwerp plus 10000. In het prototype is 100 genoeg, want daar
   staat niets anders vast op het venster, maar een thema met een plakkende navigatiebalk
   zit daar ruim boven: Salient zet #header-outer op position:fixed met z-index 9999. Die
   balk viel dus over het aanvraagblok en de vergrote afbeelding heen. Alle vaste lagen
   van de configurator schuiven met hetzelfde bedrag op, zodat hun onderlinge orde die van
   het ontwerp blijft (knop, venster, lightbox, aanvraagblok, melding) en ze allemaal
   boven de navigatie uitkomen. Onder de WordPress-adminbalk (99999) blijven ze bewust:
   die hoort altijd bereikbaar te zijn. */
.rdh-cfg .rdh-lightbox{position:fixed;inset:0;background:rgba(20,32,36,.86);backdrop-filter:blur(3px);z-index:10100;display:none;align-items:center;justify-content:center;padding:30px}
.rdh-cfg .rdh-lightbox.rdh-open{display:flex}
.rdh-cfg .rdh-lightbox img{max-width:min(92vw,720px);max-height:90vh;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
.rdh-cfg .rdh-lightbox .rdh-lb-close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;display:grid;place-items:center;cursor:pointer}
.rdh-cfg .rdh-lightbox .rdh-lb-close svg{width:22px;height:22px}
.rdh-cfg .rdh-lightbox .rdh-lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#dfe8e8;font-family:var(--rdh-font-head);font-size:15px}

/* Config panel (bron: regels 137 tot 146) */
.rdh-cfg .rdh-panel-head .rdh-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--rdh-green-700);font-weight:600;font-size:13px;letter-spacing:.02em;text-transform:uppercase;margin-bottom:10px}
.rdh-cfg .rdh-panel-head h1{font-size:40px;letter-spacing:-.5px}
.rdh-cfg .rdh-title-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:6px 0 14px}
.rdh-cfg .rdh-subline{display:flex;align-items:center;gap:14px;margin:10px 0 14px;flex-wrap:wrap}
.rdh-cfg .rdh-subline .rdh-bereken{font-family:var(--rdh-font-head);font-size:26px;color:var(--rdh-ink);font-weight:500}
.rdh-cfg .rdh-vanaf-pill{background:var(--rdh-ink);color:#fff;font-family:var(--rdh-font-head);font-weight:600;font-size:16px;padding:11px 20px;border-radius:14px;display:inline-flex;align-items:center;gap:7px}
.rdh-cfg .rdh-lead{color:var(--rdh-ink-600);font-size:15.5px;max-width:52ch;margin-bottom:18px}
.rdh-cfg .rdh-usp-checks{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:11px 24px}
/* list-style hoort op de li en niet alleen op de ul erboven. Salient zet een bolletje met
   een kale regel `ul li{list-style:disc}`, en een declaratie op het element zelf verslaat
   de none die de li van zijn ul erft, hoe specifiek die ul-regel ook is. Vandaar op elke
   lijst van de configurator, met !important omdat elk thema hier iets kan neerzetten en
   deze lijsten hun eigen opsommingsteken hebben: een groen bolletje, een vinkje of niets.
   Zonder dit staat er op live een zwarte disc naast. */
.rdh-cfg .rdh-usp-checks li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--rdh-ink);font-weight:500;font-family:var(--rdh-font-body);list-style:none !important}
.rdh-cfg .rdh-usp-checks li svg{width:18px;height:20px;flex:none}

/* Solar inbegrepen (bron: regels 148 tot 152, plus regel 529) */
.rdh-cfg .rdh-solar-inc{display:flex;align-items:center;gap:12px;background:var(--rdh-ink);color:#fff;border-radius:var(--rdh-r-md);padding:13px 16px;margin-bottom:22px}
.rdh-cfg .rdh-solar-inc .rdh-ico{width:40px;height:40px;border-radius:10px;background:rgba(255,213,74,.16);display:grid;place-items:center;flex:none}
.rdh-cfg .rdh-solar-inc .rdh-ico svg{width:22px;height:22px;color:#ffd54a}
.rdh-cfg .rdh-solar-inc b{font-family:var(--rdh-font-head);font-weight:600;font-size:14.5px}
.rdh-cfg .rdh-solar-inc span{display:block;font-size:13px;color:#c4d1d1;margin-top:1px}
.rdh-cfg .rdh-solar-inc .rdh-remote-img{width:30px;height:auto;max-height:58px;object-fit:contain;flex:none;margin-left:auto;filter:drop-shadow(0 3px 7px rgba(0,0,0,.4))}

/* Steps (bron: regels 155 tot 161) */
.rdh-cfg .rdh-step{border-top:1px solid var(--rdh-line);padding:20px 0}
.rdh-cfg .rdh-step:first-of-type{border-top:0}
.rdh-cfg .rdh-step-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.rdh-cfg .rdh-step-num{width:28px;height:28px;flex:none;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);background:var(--rdh-green-050);color:var(--rdh-green-700);font-family:var(--rdh-font-head);font-weight:700;font-size:13px;display:grid;place-items:center}
.rdh-cfg .rdh-step-title{font-family:var(--rdh-font-head);font-weight:600;font-size:16.5px;color:var(--rdh-ink)}
.rdh-cfg .rdh-step-value{margin-left:auto;font-size:13.5px;color:var(--rdh-muted);font-weight:500;text-align:right}
.rdh-cfg .rdh-step-sub{font-size:13px;color:var(--rdh-muted);margin:-2px 0 13px}

/* Info hover (bron: regels 164 tot 175) */
.rdh-cfg .rdh-info{position:relative;display:inline-flex}
/* De vorm van dit knopje staat vast: een rondje van 18 bij 18. Vandaar !important op de
   radius en op de maten, en flex:none zodat een flexbox eromheen hem niet uitrekt. Een
   thema dat een kale button-regel meebrengt maakt er anders een afgerond vierkant van
   (px-radius) of een ovaal (andere breedte of hoogte). aspect-ratio houdt hem vierkant
   ook als iets alleen de breedte raakt. */
.rdh-cfg .rdh-info-btn{width:18px !important;height:18px !important;aspect-ratio:1;flex:none;border-radius:50% !important;border:1px solid var(--rdh-muted-2);color:var(--rdh-muted);background:#fff;font-size:11px;font-weight:700;cursor:pointer;display:grid;place-items:center;font-family:var(--rdh-font-head);line-height:1;padding:0 !important}
/* Themaskins hangen graag een ripple of gloed aan een button; dit knopje heeft er zelf
   geen, dus alles wat een thema hier neerzet mag weg. */
.rdh-cfg .rdh-info-btn::before,.rdh-cfg .rdh-info-btn::after{content:none !important}
.rdh-cfg .rdh-info-btn:hover,.rdh-cfg .rdh-info-btn[aria-expanded="true"]{border-color:var(--rdh-green);color:var(--rdh-green-700);background:var(--rdh-green-050)}
.rdh-cfg .rdh-info-pop{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:300px;max-width:78vw;background:var(--rdh-ink);color:#eaf1f0;font-size:13px;line-height:1.55;padding:14px 16px;border-radius:var(--rdh-r-md);box-shadow:0 10px 26px rgba(16,26,30,.2),0 2px 6px rgba(16,26,30,.1);z-index:30;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s;font-weight:400;font-family:var(--rdh-font-body)}
.rdh-cfg .rdh-info-pop .rdh-ip-lead{margin:0 0 9px;color:#fff}
.rdh-cfg .rdh-info-pop .rdh-ip-list{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.rdh-cfg .rdh-info-pop .rdh-ip-list li{position:relative;padding-left:15px;color:#d7e1e0;list-style:none !important}
.rdh-cfg .rdh-info-pop .rdh-ip-list li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--rdh-green)}
.rdh-cfg .rdh-info-pop .rdh-ip-list li b{color:#fff;font-weight:600}
.rdh-cfg .rdh-info-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--rdh-ink)}
.rdh-cfg .rdh-info.rdh-open .rdh-info-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-2px)}
@media (max-width:600px){.rdh-cfg .rdh-info-pop{left:auto;right:-8px;transform:none}.rdh-cfg .rdh-info-pop::after{left:auto;right:16px;transform:none}.rdh-cfg .rdh-info.rdh-open .rdh-info-pop{transform:translateY(-2px)}}

/* Segmented (bron: regels 178 tot 186) */
.rdh-cfg .rdh-seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rdh-cfg .rdh-seg .rdh-opt{border:1.5px solid var(--rdh-line);border-radius:var(--rdh-r-md);padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;background:#fff}
.rdh-cfg .rdh-seg .rdh-opt:hover{border-color:#c7d6d1}
.rdh-cfg .rdh-seg .rdh-opt.rdh-sel{border-color:var(--rdh-green);background:var(--rdh-green-050);box-shadow:0 0 0 3px rgba(65,193,56,.12)}
.rdh-cfg .rdh-seg .rdh-opt .rdh-t{font-family:var(--rdh-font-head);font-weight:600;color:var(--rdh-ink);font-size:15px;display:flex;align-items:center;gap:8px}
.rdh-cfg .rdh-seg .rdh-opt .rdh-d{font-size:12.5px;color:var(--rdh-muted);margin-top:4px}
.rdh-cfg .rdh-seg .rdh-opt .rdh-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--rdh-muted-2);flex:none;display:grid;place-items:center}
.rdh-cfg .rdh-seg .rdh-opt.rdh-sel .rdh-dot{border-color:var(--rdh-green)}
.rdh-cfg .rdh-seg .rdh-opt.rdh-sel .rdh-dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--rdh-green)}

/* Dimensions (bron: regels 189 tot 200) */
.rdh-cfg .rdh-dims{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}
.rdh-cfg .rdh-field label{display:block;font-size:13px;color:var(--rdh-muted);font-weight:500;margin-bottom:6px}
.rdh-cfg .rdh-inp{position:relative;display:flex;align-items:center}
/* De achtergrond staat er expliciet bij. In het prototype is dit veld wit omdat daar
   niemand een achtergrond zet en de browser dat zelf doet, maar Salient tint elk
   tekstveld met input[type=text]{background-color:#f1f1f1}. Dat is een ander grijs dan
   het vlak met de vierkante meters ernaast (#f4f8f6), en die twee bijna-gelijke grijzen
   naast elkaar lezen als een fout. */
.rdh-cfg .rdh-inp input{width:100%;height:56px;border:1.5px solid var(--rdh-line);border-radius:var(--rdh-r-sm);padding:0 44px 0 14px;font-family:var(--rdh-font-head);font-weight:600;font-size:17px;color:var(--rdh-ink);background:var(--rdh-bg);outline:none;transition:border-color .15s}
.rdh-cfg .rdh-inp input:focus{border-color:var(--rdh-green);box-shadow:0 0 0 3px rgba(65,193,56,.12)}
.rdh-cfg .rdh-inp .rdh-unit{position:absolute;right:14px;color:var(--rdh-muted-2);font-size:14px;font-weight:500;pointer-events:none}
.rdh-cfg .rdh-area-box{background:var(--rdh-bg-soft);border:1px solid var(--rdh-line);border-radius:var(--rdh-r-sm);height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 14px;text-align:center;min-width:104px}
.rdh-cfg .rdh-area-box .rdh-v{font-family:var(--rdh-font-head);font-weight:700;color:var(--rdh-ink);font-size:18px}
.rdh-cfg .rdh-area-box .rdh-l{font-size:11px;color:var(--rdh-muted);text-transform:uppercase;letter-spacing:.03em}
.rdh-cfg .rdh-dim-hint{font-size:12.5px;color:var(--rdh-muted-2);margin-top:12px}
.rdh-cfg .rdh-dim-err{color:#c0392b;font-size:12.5px;margin-top:8px;display:none}
.rdh-cfg .rdh-dim-err.rdh-show{display:block}
/* multi-window (bron: regels 202 tot 213) */
.rdh-cfg .rdh-wrow{border-top:1px dashed var(--rdh-line);padding-top:14px;margin-top:14px}
.rdh-cfg .rdh-wrow:first-child{border-top:0;padding-top:0;margin-top:0}
.rdh-cfg .rdh-wrow-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.rdh-cfg .rdh-wtag{font-family:var(--rdh-font-head);font-weight:600;font-size:12.5px;color:var(--rdh-green-700);background:var(--rdh-green-050);padding:4px 11px;border-radius:var(--rdh-r-pill)}
.rdh-cfg .rdh-wremove{border:0;background:transparent;color:var(--rdh-muted);cursor:pointer;font-size:12.5px;display:inline-flex;align-items:center;gap:5px;font-family:var(--rdh-font-body)}
.rdh-cfg .rdh-wremove:hover{color:#c0392b}
.rdh-cfg .rdh-wremove svg{width:14px;height:14px}
.rdh-cfg .rdh-wrow-err{color:#c0392b;font-size:12.5px;margin-top:8px;display:none}
.rdh-cfg .rdh-wrow-err.rdh-show{display:block}
.rdh-cfg .rdh-add-win{margin-top:16px;width:100%;border:0;background:var(--rdh-ink);color:#fff;font-family:var(--rdh-font-head);font-weight:700;font-size:15px;border-radius:var(--rdh-r-pill);padding:15px 18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .15s;box-shadow:0 10px 22px -6px rgba(32,52,58,.35)}
.rdh-cfg .rdh-add-win:hover{background:#2c4650}
.rdh-cfg .rdh-add-win .rdh-pl{font-size:20px;font-weight:700;line-height:1}
/* dual-side badge on doek thumbnail (bron: regels 215 tot 216) */
.rdh-cfg .rdh-doeksw .rdh-th .rdh-dual-badge{position:absolute;top:5px;left:50%;transform:translateX(-50%);background:rgba(32,52,58,.92);color:#fff;border-radius:var(--rdh-r-pill);padding:2px 8px 2px 6px;display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;font-family:var(--rdh-font-head);box-shadow:0 2px 5px rgba(0,0,0,.2);white-space:nowrap}
.rdh-cfg .rdh-doeksw .rdh-th .rdh-dual-badge svg{width:10px;height:10px;color:var(--rdh-green)}
/* montage diagram (bron: regels 218 tot 220) */
.rdh-cfg .rdh-opt .rdh-diagram{height:58px;margin-bottom:11px;background:var(--rdh-bg-soft);border-radius:8px;display:grid;place-items:center}
.rdh-cfg .rdh-opt.rdh-sel .rdh-diagram{background:#fff}
.rdh-cfg .rdh-opt .rdh-diagram svg{height:44px;width:auto}
/* meet-helper (bron: regels 222 tot 232) */
.rdh-cfg .rdh-measure-toggle{margin-top:14px;background:none;border:0;color:var(--rdh-green-700);font-family:var(--rdh-font-head);font-weight:600;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:0}
.rdh-cfg .rdh-measure-toggle svg{width:16px;height:16px}
.rdh-cfg .rdh-measure-toggle:hover{text-decoration:underline}
.rdh-cfg .rdh-measure-help{display:none;margin-top:12px;background:var(--rdh-bg-soft);border:1px solid var(--rdh-line);border-radius:var(--rdh-r-md);padding:16px}
.rdh-cfg .rdh-measure-help.rdh-show{display:block}
.rdh-cfg .rdh-mh-grid{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.rdh-cfg .rdh-mh-diagram svg{width:130px;height:auto}
.rdh-cfg .rdh-mh-tips p{margin:0 0 8px;font-size:13px;color:var(--rdh-ink-600)}
.rdh-cfg .rdh-mh-tips .rdh-mh-re{color:var(--rdh-green-700);font-weight:600;margin:0;display:flex;gap:7px;align-items:flex-start}
.rdh-cfg .rdh-mh-tips .rdh-mh-re svg{width:15px;height:15px;flex:none;margin-top:2px}
@media(max-width:600px){.rdh-cfg .rdh-mh-grid{grid-template-columns:1fr}.rdh-cfg .rdh-mh-diagram{margin:0 auto}}

/* Frame swatches (bron: regels 241 tot 248) */
.rdh-cfg .rdh-swatches{display:flex;flex-wrap:wrap;gap:10px}
.rdh-cfg .rdh-sw{width:46px;height:46px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--rdh-line),var(--rdh-shadow-sm);cursor:pointer;position:relative;transition:transform .12s;padding:0}
.rdh-cfg .rdh-sw:hover{transform:translateY(-2px)}
.rdh-cfg .rdh-sw.rdh-sel{box-shadow:0 0 0 2px var(--rdh-green),0 4px 10px rgba(0,0,0,.12)}
.rdh-cfg .rdh-sw.rdh-sel::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.rdh-cfg .rdh-sw.rdh-light.rdh-sel::after{filter:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320343A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.rdh-cfg .rdh-sw-label{font-size:13.5px;color:var(--rdh-muted);margin-top:10px}
.rdh-cfg .rdh-sw-label b{color:var(--rdh-ink);font-weight:600}

/* custom color swatch (bron: regels 518 tot 522) */
.rdh-cfg .rdh-sw-custom{background:#fff;border:1.5px dashed var(--rdh-muted-2);display:grid;place-items:center;box-shadow:0 0 0 1.5px var(--rdh-line),var(--rdh-shadow-sm)}
.rdh-cfg .rdh-sw-custom svg{width:20px;height:20px;color:var(--rdh-muted)}
.rdh-cfg .rdh-sw-custom.rdh-sel{box-shadow:0 0 0 2px var(--rdh-green),0 4px 10px rgba(0,0,0,.12);border-color:var(--rdh-green)}
.rdh-cfg .rdh-sw-custom.rdh-sel svg{color:var(--rdh-green-700)}
.rdh-cfg .rdh-sw-custom.rdh-sel::after{display:none}

/* frame custom-color note (bron: regels 533 tot 534) */
.rdh-cfg .rdh-frame-note{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--rdh-ink-600);background:var(--rdh-green-050);border:1px solid var(--rdh-green-100);border-radius:var(--rdh-r-md);padding:14px 16px;margin-top:14px}
.rdh-cfg .rdh-frame-note svg{width:20px;height:20px;color:var(--rdh-green-700);flex:none;margin-top:1px}

/* Doek picker = image previews (bron: regels 251 tot 259) */
.rdh-cfg .rdh-doekgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.rdh-cfg .rdh-doeksw{border:1.5px solid var(--rdh-line);border-radius:var(--rdh-r-sm);padding:5px 5px 8px;cursor:pointer;background:#fff;transition:border-color .15s,transform .12s,box-shadow .15s;text-align:center;display:flex;flex-direction:column}
.rdh-cfg .rdh-doeksw:hover{transform:translateY(-2px);border-color:#c7d6d1}
.rdh-cfg .rdh-doeksw.rdh-sel{border-color:var(--rdh-green);box-shadow:0 0 0 2px var(--rdh-green)}
.rdh-cfg .rdh-doeksw .rdh-th{display:block;position:relative;border-radius:8px;overflow:hidden;background:linear-gradient(160deg,#f3f6f5,#e7eeeb);aspect-ratio:1/1}
.rdh-cfg .rdh-doeksw .rdh-th img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
.rdh-cfg .rdh-doeksw .rdh-nm{display:block;font-size:11px;color:var(--rdh-muted);margin-top:6px;line-height:1.25;font-weight:500}
.rdh-cfg .rdh-doeksw.rdh-sel .rdh-nm{color:var(--rdh-ink)}
.rdh-cfg .rdh-doeksw .rdh-dual{display:block;width:max-content;margin:3px auto 0;font-size:9px;font-weight:700;color:var(--rdh-green-700);background:var(--rdh-green-050);border-radius:4px;padding:1px 5px}

/* Light-level cards (bron: regels 262 tot 269) */
.rdh-cfg .rdh-lvls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rdh-cfg .rdh-lvl{border:1.5px solid var(--rdh-line);border-radius:var(--rdh-r-md);padding:13px 12px;cursor:pointer;text-align:center;transition:border-color .15s,background .15s,box-shadow .15s;background:#fff}
.rdh-cfg .rdh-lvl:hover{border-color:#c7d6d1}
.rdh-cfg .rdh-lvl.rdh-sel{border-color:var(--rdh-green);background:var(--rdh-green-050);box-shadow:0 0 0 3px rgba(65,193,56,.12)}
.rdh-cfg .rdh-lvl .rdh-bar{height:30px;border-radius:6px;margin-bottom:9px;position:relative;overflow:hidden;background:#e9efed}
.rdh-cfg .rdh-lvl .rdh-bar i{position:absolute;inset:0;display:block}
.rdh-cfg .rdh-lvl .rdh-pct{font-family:var(--rdh-font-head);font-weight:700;color:var(--rdh-ink);font-size:15px}
.rdh-cfg .rdh-lvl .rdh-nm{font-size:11.5px;color:var(--rdh-muted);margin-top:2px;line-height:1.3}

/* Zichtzijde toggle en validatie-feedback (bron: regels 272 tot 294) */
.rdh-cfg .rdh-side-block{display:none;margin-top:14px;background:var(--rdh-green-050);border:1.5px solid var(--rdh-green-100);border-radius:var(--rdh-r-md);padding:15px 16px}
.rdh-cfg .rdh-side-block.rdh-show{display:block;animation:rdh-sideAttn 1.7s ease 1}
.rdh-cfg .rdh-side-preview{display:none;position:relative}
.rdh-cfg .rdh-valid-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);background:var(--rdh-ink);color:#fff;padding:13px 18px;border-radius:12px;font-family:var(--rdh-font-head);font-weight:600;font-size:14px;box-shadow:0 14px 34px rgba(0,0,0,.32);z-index:10200;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;display:flex;align-items:center;gap:10px;max-width:min(92vw,420px)}
.rdh-cfg .rdh-valid-toast.rdh-show{opacity:1;transform:translateX(-50%) translateY(0)}
.rdh-cfg .rdh-valid-toast svg{width:20px;height:20px;color:#ff6f61;flex:none}
@keyframes rdh-flashReq{0%{box-shadow:0 0 0 0 rgba(224,72,58,0)}25%{box-shadow:0 0 0 4px rgba(224,72,58,.45)}100%{box-shadow:0 0 0 0 rgba(224,72,58,0)}}
.rdh-cfg .rdh-flash-required{border-radius:var(--rdh-r-md);animation:rdh-flashReq 1.5s ease}
.rdh-cfg .rdh-inp.rdh-err-flag{border-radius:10px;box-shadow:0 0 0 2px #e0483a,0 0 0 5px rgba(224,72,58,.15)}
.rdh-cfg .rdh-side-block.rdh-err-flag{border-color:#e0483a;box-shadow:0 0 0 3px rgba(224,72,58,.16)}
@keyframes rdh-sideAttn{0%{box-shadow:0 0 0 0 rgba(65,193,56,0)}28%{box-shadow:0 0 0 4px rgba(65,193,56,.22)}100%{box-shadow:0 0 0 0 rgba(65,193,56,0)}}
.rdh-cfg .rdh-side-block .rdh-sh{font-size:14px;color:var(--rdh-ink);font-weight:700;font-family:var(--rdh-font-head);margin-bottom:5px;display:flex;align-items:center;gap:8px}
.rdh-cfg .rdh-side-block .rdh-sh svg{width:16px;height:16px;color:var(--rdh-green-700);flex:none}
.rdh-cfg .rdh-side-block .rdh-sd{font-size:12.5px;color:var(--rdh-muted);margin-bottom:12px;line-height:1.5}
.rdh-cfg .rdh-side-toggle{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.rdh-cfg .rdh-side-toggle button{border:1.5px solid var(--rdh-line);background:#fff;font-family:var(--rdh-font-head);font-weight:700;font-size:13.5px;color:var(--rdh-ink);padding:12px 10px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:border-color .15s,background .15s,color .15s}
.rdh-cfg .rdh-side-toggle button:hover{border-color:var(--rdh-green)}
.rdh-cfg .rdh-side-toggle button::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--rdh-muted-2);flex:none;transition:all .15s;background:no-repeat center/10px 10px}
.rdh-cfg .rdh-side-toggle button.rdh-on{background:var(--rdh-ink);color:#fff;border-color:var(--rdh-ink)}
.rdh-cfg .rdh-side-toggle button.rdh-on::before{border-color:var(--rdh-green);background-color:var(--rdh-green);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}


/* Price + CTA (bron: regels 297 tot 309) */
.rdh-cfg .rdh-pricebox{margin-top:26px;background:var(--rdh-ink);border-radius:var(--rdh-r-lg);padding:22px 24px;color:#fff;box-shadow:var(--rdh-shadow)}
.rdh-cfg .rdh-price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rdh-cfg .rdh-price-main .rdh-l{font-size:13px;color:#b9c8c8;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:7px}
.rdh-cfg .rdh-price-main .rdh-p{font-family:var(--rdh-font-head);font-weight:700;font-size:40px;line-height:1;margin-top:6px}
.rdh-cfg .rdh-price-main .rdh-p .rdh-star{color:var(--rdh-green);font-size:20px;vertical-align:super}
.rdh-cfg .rdh-price-main .rdh-excl{font-size:12.5px;color:#9fb2b2;margin-top:6px}
.rdh-cfg .rdh-incl-list{list-style:none;margin:0;padding:0;font-size:13px;color:#d3dedd;text-align:right}
.rdh-cfg .rdh-incl-list li{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-bottom:5px;list-style:none !important}
.rdh-cfg .rdh-incl-list li svg{width:14px;height:14px;color:var(--rdh-green);flex:none}
.rdh-cfg .rdh-cta-row{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.rdh-cfg .rdh-cta-row .rdh-btn-primary{flex:1;min-width:230px}
.rdh-cfg .rdh-price-fine{font-size:12px;color:#9fb2b2;margin-top:14px;line-height:1.5}
.rdh-cfg .rdh-price-fine b{color:#cdd9d8;font-weight:600}

/* disclaimer notes (bron: regels 312 tot 314) */
.rdh-cfg .rdh-disc-notes{margin-top:18px;display:grid;gap:10px}
.rdh-cfg .rdh-disc{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--rdh-ink-600);background:var(--rdh-bg-soft);border:1px solid var(--rdh-line);border-radius:var(--rdh-r-sm);padding:11px 13px}
.rdh-cfg .rdh-disc svg{width:16px;height:16px;color:var(--rdh-green-700);flex:none;margin-top:2px}

/* extra label in een montage-optie (bron: regel 379) */
.rdh-cfg .rdh-opt .rdh-t .rdh-opt-extra{margin-left:8px;font-family:var(--rdh-font-body);font-weight:700;font-size:11.5px;color:var(--rdh-green-700);background:var(--rdh-green-050);border-radius:20px;padding:2px 8px;white-space:nowrap}

/* mobiele preview, basis (bron: regels 608 tot 609) */
.rdh-cfg .rdh-config-fab{display:none}
.rdh-cfg .rdh-config-sheet{display:none}

/* ---------- Responsive (bron: regels 616 tot 630) ---------- */
@media (max-width:1000px){
  .rdh-cfg .rdh-config-grid{grid-template-columns:1fr;gap:30px}
  .rdh-cfg .rdh-visual{position:static}
  .rdh-cfg .rdh-render-frame img{max-width:340px}
}
/* ---------- Responsive (bron: regels 631 tot 682) ---------- */
@media (max-width:680px){
  .rdh-cfg .rdh-wrap{padding:0 18px}
  .rdh-cfg .rdh-panel-head h1{font-size:32px}
  .rdh-cfg .rdh-dims{grid-template-columns:1fr 1fr}
  .rdh-cfg .rdh-area-box{grid-column:1/-1}
  .rdh-cfg .rdh-lvls{grid-template-columns:1fr}
  .rdh-cfg .rdh-price-main .rdh-p{font-size:34px}
  .rdh-cfg .rdh-config-fab{display:inline-flex;position:fixed;left:16px;bottom:16px;z-index:10060;align-items:center;gap:8px;background:var(--rdh-green);color:#fff;border:0;border-radius:var(--rdh-r-pill);padding:13px 18px;font-family:var(--rdh-font-head);font-weight:700;font-size:14.5px;box-shadow:0 12px 26px -6px rgba(65,193,56,.55);cursor:pointer;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .25s,transform .25s}
  .rdh-cfg .rdh-config-fab.rdh-show{opacity:1;transform:none;pointer-events:auto}
  .rdh-cfg .rdh-config-fab svg{width:19px;height:19px;flex:none}
  .rdh-cfg .rdh-config-sheet{display:block;position:fixed;inset:0;z-index:10070;visibility:hidden}
  .rdh-cfg .rdh-config-sheet .rdh-cs-backdrop{position:absolute;inset:0;background:rgba(16,26,30,.6);opacity:0;transition:opacity .25s}
  .rdh-cfg .rdh-config-sheet .rdh-cs-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.95);width:min(92vw,390px);max-height:88vh;background:var(--rdh-bg);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.38);opacity:0;transition:opacity .25s,transform .25s}
  .rdh-cfg .rdh-config-sheet.rdh-open{visibility:visible}
  .rdh-cfg .rdh-config-sheet.rdh-open .rdh-cs-backdrop{opacity:1}
  .rdh-cfg .rdh-config-sheet.rdh-open .rdh-cs-panel{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .rdh-cfg .rdh-cs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--rdh-line);flex:none}
  .rdh-cfg .rdh-cs-head h3{font-family:var(--rdh-font-head);font-size:15px;color:var(--rdh-ink)}
  .rdh-cfg .rdh-cs-close{border:0;background:var(--rdh-bg-soft);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--rdh-ink);flex:none}
  .rdh-cfg .rdh-cs-close svg{width:17px;height:17px}
  .rdh-cfg .rdh-cs-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px}
  .rdh-cfg .rdh-cs-body .rdh-stage{margin:0}
  .rdh-cfg .rdh-cs-foot{flex:none;padding:12px 16px 16px;border-top:1px solid var(--rdh-line)}
  .rdh-cfg .rdh-cs-edit{width:100%;border:0;background:var(--rdh-ink);color:#fff;font-family:var(--rdh-font-head);font-weight:700;font-size:14px;border-radius:var(--rdh-r-pill);padding:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
  .rdh-cfg .rdh-cs-edit svg{width:16px;height:16px}
  .rdh-cfg .rdh-side-preview{display:block;margin:2px 0 12px}
  .rdh-cfg .rdh-side-preview img{width:100%;max-height:200px;object-fit:contain;border-radius:12px;background:linear-gradient(160deg,#eef3f1,#dbe6e2);padding:10px;display:block;cursor:zoom-in}
  .rdh-cfg .rdh-side-preview .rdh-zoom-btn{right:14px;bottom:14px}
  .rdh-cfg .rdh-incl-list{text-align:left}
  .rdh-cfg .rdh-incl-list li{justify-content:flex-start}
}

/* ---------- Aanvraagblok en overlay (bron: prototype style-blok) ---------- */
.rdh-cfg .rdh-btn-block{width:100%}
.rdh-cfg .rdh-sum-windows{display:grid;gap:2px;margin:4px 0 0}
.rdh-cfg .rdh-sum-windows .rdh-swr{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.1)}
.rdh-cfg .rdh-sum-windows .rdh-swr .rdh-k{color:#a9b9b9}
.rdh-cfg .rdh-sum-windows .rdh-swr .rdh-v{color:#fff;font-family:var(--rdh-font-head)}
.rdh-cfg .rdh-sum-area{font-size:13px;color:#c5d2d1;margin-top:12px;display:flex;justify-content:space-between}
.rdh-cfg .rdh-sum-area b{color:#fff;font-family:var(--rdh-font-head);font-weight:600}
.rdh-cfg .rdh-price-main .rdh-p .rdh-star{color:var(--rdh-green);font-size:20px;vertical-align:super}
.rdh-cfg .rdh-form-panel{position:relative;background:var(--rdh-ink);border-radius:var(--rdh-r-xl);padding:44px 40px;color:#fff}
.rdh-cfg .rdh-modal{position:fixed;inset:0;background:rgba(16,26,30,.72);backdrop-filter:blur(4px);z-index:10120;display:none;overflow-y:auto;padding:34px 20px}
.rdh-cfg .rdh-modal.rdh-open{display:block}
/* Onder de vaste Salient-header beginnen in plaats van erachter: de 34px lucht van het
   ontwerp bovenop de hoogte van die header. De z-index hierboven legt de overlay al over
   de navigatie heen; deze ruimte is het vangnet, zodat de samenvatting ook leesbaar
   begint als het thema of een andere plugin de header ooit weer bovenop zet.
   Alleen op de desktopheader: deze site heeft data-mobile-fixed="false", dus onder de
   Salient-grens van 1000px staat de header mee te scrollen en is er niets te ontwijken.
   Salient laat de header bij scrollen krimpen, dus dit is de ruimste stand. */
@media (min-width:1001px){
  body.wp-theme-salient .rdh-cfg .rdh-modal{padding-top:calc(var(--rdh-salient-header) + 34px)}
}
.rdh-cfg .rdh-modal-inner{max-width:1000px;margin:0 auto;position:relative;animation:rdh-modalIn .22s ease}
.rdh-cfg .rdh-modal-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:3}
.rdh-cfg .rdh-modal-close:hover{background:rgba(255,255,255,.2)}
.rdh-cfg .rdh-modal-close svg{width:22px;height:22px}
.rdh-cfg .rdh-upsells{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.rdh-cfg .rdh-ups-title{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#a9b9b9;margin-bottom:11px;font-weight:600;font-family:var(--rdh-font-head)}
.rdh-cfg .rdh-ups{display:flex;align-items:center;gap:12px;padding:12px 13px;border:1.5px solid rgba(255,255,255,.16);border-radius:var(--rdh-r-sm);cursor:pointer;margin-bottom:9px;transition:border-color .15s,background .15s}
.rdh-cfg .rdh-ups:hover{border-color:rgba(255,255,255,.32)}
.rdh-cfg .rdh-ups.rdh-on{border-color:var(--rdh-green);background:rgba(65,193,56,.12)}
.rdh-cfg .rdh-ups input{width:18px;height:18px;accent-color:var(--rdh-green);flex:none;cursor:pointer}
.rdh-cfg .rdh-ups-b{flex:1}
.rdh-cfg .rdh-ups-n{display:block;font-family:var(--rdh-font-head);font-weight:600;color:#fff;font-size:14px}
.rdh-cfg .rdh-ups-d{display:block;font-size:12px;color:#a9b9b9;margin-top:2px}
.rdh-cfg .rdh-ups-p{font-family:var(--rdh-font-head);font-weight:700;color:var(--rdh-green);font-size:14px;white-space:nowrap}
.rdh-cfg .rdh-ups-img{width:64px;height:64px;flex:none;border-radius:12px;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));display:grid;place-items:center;padding:6px}
.rdh-cfg .rdh-ups-img svg{width:30px;height:30px}
.rdh-cfg .rdh-ups-img img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.rdh-cfg .rdh-sum-note{font-size:12px;color:#9fb2b2;margin:6px 0 2px;display:flex;gap:7px;align-items:flex-start}
.rdh-cfg .rdh-sum-note svg{width:14px;height:14px;color:var(--rdh-green);flex:none;margin-top:2px}
.rdh-cfg .rdh-form-grid{display:grid;grid-template-columns:1fr 420px;gap:44px;align-items:start}
.rdh-cfg .rdh-form-intro .rdh-eyebrow{color:var(--rdh-green);font-weight:600;font-size:13px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:12px;display:block}
.rdh-cfg .rdh-form-intro h2{color:#fff;font-size:30px;letter-spacing:-.3px}
.rdh-cfg .rdh-form-intro p{color:#c5d2d1;margin-top:14px;font-size:15.5px}
.rdh-cfg .rdh-summary-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--rdh-r-lg);padding:22px;margin-top:26px}
.rdh-cfg .rdh-summary-card h3{color:#fff;font-size:15px;font-family:var(--rdh-font-head);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.rdh-cfg .rdh-summary-card h3 svg{width:17px;height:17px;color:var(--rdh-green)}
.rdh-cfg .rdh-sum-list{list-style:none;margin:0;padding:0}
.rdh-cfg .rdh-sum-list li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.14);font-size:14px;list-style:none !important}
.rdh-cfg .rdh-sum-list li:last-child{border-bottom:0}
.rdh-cfg .rdh-sum-list .rdh-k{color:#a9b9b9}
.rdh-cfg .rdh-sum-list .rdh-v{color:#fff;font-weight:600;text-align:right;font-family:var(--rdh-font-head)}
/* De zichtzijde achter de doeknaam staat in het ontwerp klein geschreven, terwijl op de
   knop "Kant 2" staat. Dat verschil is opmaak, dus text-transform: de tekst blijft in de
   DOM zoals de beheerder hem invulde, en dat is ook wat de aanvraag meestuurt. */
.rdh-cfg .rdh-sum-list .rdh-sum-side{text-transform:lowercase}
.rdh-cfg .rdh-sum-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}
.rdh-cfg .rdh-sum-total .rdh-k{color:#c5d2d1;font-size:13px}
.rdh-cfg .rdh-sum-total .rdh-v{font-family:var(--rdh-font-head);font-weight:700;font-size:26px;color:#fff}
.rdh-cfg .rdh-sum-total .rdh-v .rdh-star{color:var(--rdh-green);font-size:14px;vertical-align:super}
.rdh-cfg .rdh-form-reassure{text-align:center;font-size:12.5px;color:var(--rdh-muted);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:7px}
.rdh-cfg .rdh-form-reassure svg{width:14px;height:14px;color:var(--rdh-green-700)}
@media (max-width:1000px){
.rdh-cfg .rdh-split,.rdh-cfg .rdh-form-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:680px){
.rdh-cfg .rdh-faq-panel,.rdh-cfg .rdh-form-panel,.rdh-cfg .rdh-spec-panel{padding:28px 20px}
}

@keyframes rdh-modalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Plugin-aanvulling: afbeeldingen op de plek van de prototype-SVG's ----------
   Dit is de enige CSS in dit bestand die NIET uit het prototype komt.

   Het prototype zette hier inline SVG's, dus de regels ernaast gelden alleen voor svg.
   In de plugin komen deze beelden uit de mediabibliotheek als <img> met width- en
   height-attributen. Die attributen horen er te staan, anders verschuift de pagina
   tijdens het laden, maar ze werken hier als presentatie-hint: de img neemt de maat uit
   het attribuut over in plaats van die van zijn kader. Bij de extra's zakte de tekening
   daardoor onder het vierkant uit.

   De maten hieronder zijn exact overgenomen van de svg-regel die ernaast staat. */
.rdh-cfg .rdh-ups-img img{width:auto;height:auto}
.rdh-cfg .rdh-solar-inc .rdh-ico img{width:22px;height:22px;object-fit:contain}
.rdh-cfg .rdh-opt .rdh-diagram img{height:44px;width:auto;object-fit:contain}
.rdh-cfg .rdh-lvl .rdh-bar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* !important en een eigen max-width, want Salient zet met een eigen regel
   `.row .col img:not([srcset]){width:auto}` en die is specifieker dan de onze. De tekening
   kreeg daardoor breedte auto met max-width:100% in een grid-kolom die zichzelf op zijn
   inhoud maat, en zo'n combinatie schiet samen naar nul: het beeld was geladen maar 0x0.
   Lokaal viel dat niet op, want daar bestaat die themaregel niet. */
.rdh-cfg .rdh-mh-diagram img{width:130px !important;max-width:130px !important;height:auto !important}

/* Het prototype zette deze drie waarden als inline stijl op de info-knop binnen het
   donkere prijsblok, omdat de standaardknop daar een witte vlek wordt. Als regel in
   plaats van als attribuut, maar met exact dezelfde waarden. */
.rdh-cfg .rdh-pricebox .rdh-info-btn{border-color:rgba(255,255,255,.4);color:#cfe0df;background:transparent}

/* ---------- Plugin-aanvulling: zichtbare focus ----------
   Het prototype regelt focus niet, dus viel de configurator terug op de blauwe ring van
   de browser. Die is functioneel maar valt uit de huisstijl, en op de groene knop leest
   hij als een fout. Hier een eigen ring in het groen van de huisstijl.

   :focus-visible en niet :focus, zodat een muisklik geen ring achterlaat maar een
   toetsenbordgebruiker hem wel krijgt. Elk interactief element in de sectie staat erin;
   focus onzichtbaar maken is geen optie, want dan is de configurator niet met het
   toetsenbord te bedienen. */
.rdh-cfg :focus-visible{outline:3px solid var(--rdh-green);outline-offset:2px;border-radius:var(--rdh-r-xs)}
.rdh-cfg .rdh-sw:focus-visible,.rdh-cfg .rdh-info-btn:focus-visible{border-radius:50%}
.rdh-cfg .rdh-btn:focus-visible{outline-offset:3px}
/* Op het donkere prijsblok en in de overlay heeft groen te weinig contrast met de
   achtergrond, dus daar een witte ring. */
.rdh-cfg .rdh-pricebox :focus-visible,.rdh-cfg .rdh-form-panel :focus-visible{outline-color:#fff}

/* ---------- Vorm van de knoppen vastzetten tegen het thema ----------
   Elke knop heeft in het ontwerp zijn eigen vorm: een pil, een rondje of 8px. Salient
   hoekt en tint knoppen en velden op tagniveau (input[type=text]{border-radius:4px},
   button[type=submit]{border-radius:2px}, in de materialskin zelfs met !important), en
   welke regel een thema morgen meebrengt weten we niet. De radius staat daarom hier nog
   een keer met !important, op een plek, in plaats van verspreid over tien regels. De
   knop van de tooltip zet zijn eigen maten ook vast; die staat bij zijn eigen regel,
   omdat daar ook de breedte en hoogte bij horen. */
.rdh-cfg .rdh-btn{border-radius:var(--rdh-r-xs) !important}
.rdh-cfg .rdh-add-win,.rdh-cfg .rdh-cs-edit,.rdh-cfg .rdh-config-fab{border-radius:var(--rdh-r-pill) !important}
.rdh-cfg .rdh-sw,.rdh-cfg .rdh-zoom-btn,.rdh-cfg .rdh-modal-close,.rdh-cfg .rdh-cs-close,
.rdh-cfg .rdh-lightbox .rdh-lb-close{border-radius:50% !important}

/* ---------- Kleurkiezers vastzetten tegen het thema ----------
   De rand en de ring om een staaltje dragen hier de betekenis: een witte rand met een
   grijs ringetje eromheen is niet gekozen, een groene ring is gekozen, en het negende
   staaltje heeft een streepjesrand. Een thema dat buttons een eigen rand of schaduw
   geeft maakt daar iets anders van, en dan is niet meer te zien wat gekozen is. Waarden
   letterlijk die van het ontwerp; alleen !important erbij.

   Let op: de kleur zelf staat als inline style op de knop (style="background:#hex"), dus
   hier staat bewust geen background op .rdh-sw. Met !important zou elk staaltje dezelfde
   kleur krijgen. Bij .rdh-sw-custom mag het wel: die heeft geen inline kleur.

   De data-attributen staan er niet voor de sier: !important verslaat !important niet,
   dat doet specificiteit. Een thema dat zijn eigen regel ook op !important zet met een
   selector als `body.material .rdh-cfg button` komt op drie tellers uit; met het eigen
   data-attribuut erbij komen deze regels daarboven. Ze blijven binnen .rdh-cfg. */
.rdh-cfg .rdh-sw[data-rdh-frame]{width:46px !important;height:46px !important;padding:0 !important;border:2px solid #fff !important;box-shadow:0 0 0 1.5px var(--rdh-line),var(--rdh-shadow-sm) !important}
.rdh-cfg .rdh-sw[data-rdh-frame].rdh-sel{box-shadow:0 0 0 2px var(--rdh-green),0 4px 10px rgba(0,0,0,.12) !important}
.rdh-cfg .rdh-sw-custom[data-rdh-frame]{background:#fff !important;border:1.5px dashed var(--rdh-muted-2) !important;box-shadow:0 0 0 1.5px var(--rdh-line),var(--rdh-shadow-sm) !important}
.rdh-cfg .rdh-sw-custom[data-rdh-frame].rdh-sel{border:1.5px dashed var(--rdh-green) !important;box-shadow:0 0 0 2px var(--rdh-green),0 4px 10px rgba(0,0,0,.12) !important}
.rdh-cfg .rdh-doeksw[data-rdh-color]{border:1.5px solid var(--rdh-line) !important;background:#fff !important;box-shadow:none !important}
.rdh-cfg .rdh-doeksw[data-rdh-color].rdh-sel{border:1.5px solid var(--rdh-green) !important;box-shadow:0 0 0 2px var(--rdh-green) !important}
/* Een muisklik hoort geen ring achter te laten. Doet een thema of de browser dat toch,
   dan leest die donkere ring als de gekozen-stand. De eigen groene ring voor
   toetsenbordgebruikers blijft, want die hangt aan :focus-visible. */
.rdh-cfg button:not(:focus-visible),.rdh-cfg input:not(:focus-visible),.rdh-cfg a:not(:focus-visible){outline:none !important}
/* Staat er geen opsomming onder de inleidende regel, dan hoort die 9px eronder ook niet.
   Het prototype zette daar een inline style margin:0; dit doet hetzelfde zonder attribuut. */
.rdh-cfg .rdh-info-pop .rdh-ip-lead:only-child{margin-bottom:0}
/* Het ontwerp zet deze maat als attribuut op de svg in plaats van in CSS. Hier als regel,
   zoals bij de 27 andere icoonmaten, met dezelfde waarde. */
.rdh-cfg .rdh-panel-head .rdh-eyebrow svg{width:14px;height:14px;flex:none}

/* De witte kaart zelf. Deze regel was bij de extractie weggevallen: alleen de afgeleide
   regels op .form-card kwamen mee, waardoor het formulier zonder achtergrond, padding,
   radius en schaduw rechtstreeks op het donkere paneel stond. Waarden uit het prototype. */
.rdh-cfg .rdh-form-card{background:#fff;border-radius:var(--rdh-r-lg);padding:28px;box-shadow:var(--rdh-shadow-lg);color:var(--rdh-text)}

/* Het aanvraagformulier komt uit WPForms, maar hoort eruit te zien als in het ontwerp.
   De waarden hieronder komen letterlijk uit het style-blok van het prototype
   (.form-card, .fld, .two, .file-drop, .consent, .req, .req-legend); alleen de
   selectors zijn omgezet naar de klassen die WPForms uitstuurt. WPForms zet zijn eigen
   opmaak met een enkele class, dus .rdh-cfg ervoor is genoeg om te winnen. */
.rdh-cfg .rdh-form-card .wpforms-container{margin:0}
/* WPForms zet zelf padding op een veld via div.wpforms-container-full .wpforms-field;
   het ontwerp heeft daar niets. De container-class erbij zodat deze regel wint. */
.rdh-cfg .rdh-form-card div.wpforms-container-full .wpforms-field{padding:0;margin:0 0 15px}
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-field-label{display:block;font-size:13px;color:var(--rdh-muted);font-weight:500;margin-bottom:6px;line-height:1.3}
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-required-label{color:#e0603f;margin-left:2px;border:0}
/* box-sizing en line-height horen erbij: in het ontwerp is min-height op de textarea de
   TOTALE hoogte (92px), en een invoerveld is 45px hoog met line-height normal. Zonder
   deze twee werd het 120px respectievelijk 43px. */
.rdh-cfg .rdh-form-card .wpforms-form input[type=text],
.rdh-cfg .rdh-form-card .wpforms-form input[type=email],
.rdh-cfg .rdh-form-card .wpforms-form input[type=tel],
.rdh-cfg .rdh-form-card .wpforms-form input[type=url],
.rdh-cfg .rdh-form-card .wpforms-form textarea{box-sizing:border-box;line-height:normal;width:100%;max-width:none;border:1.5px solid var(--rdh-line);border-radius:var(--rdh-r-sm);padding:12px 14px;font-family:inherit;font-size:15px;color:var(--rdh-ink);outline:none;background:#fff;box-shadow:none;transition:border-color .15s}
.rdh-cfg .rdh-form-card .wpforms-form input:focus,
.rdh-cfg .rdh-form-card .wpforms-form textarea:focus{border-color:var(--rdh-green);box-shadow:0 0 0 3px rgba(65,193,56,.12)}
/* In het ontwerp is 92px de TOTALE hoogte van de textarea. WPForms rekent zijn eigen
   hoogte uit rijen en regelhoogte, dus de container-class erbij om die te verslaan.
   height en niet alleen min-height: anders wint zijn berekende hoogte alsnog. */
/* WPForms rekent de hoogte als calc(input-height * 2.8) met specificiteit (0,4,2), dus
   deze selector moet daarboven komen. */
.rdh-cfg .rdh-form-card div.wpforms-container-full .wpforms-form textarea.wpforms-field-medium,
.rdh-cfg .rdh-form-card div.wpforms-container-full .wpforms-form textarea{resize:vertical;box-sizing:border-box;height:92px;min-height:92px}
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-field-description{display:block;font-size:12px;color:var(--rdh-ink-600);margin-top:7px;line-height:1.45}

/* e-mail en telefoon naast elkaar, zoals .two in het ontwerp */
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-field.wpforms-one-half{width:calc(50% - 6px);display:inline-block;vertical-align:top;margin-right:12px}
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-field.wpforms-one-half.wpforms-last{margin-right:0}

/* Het uploadvak op de maten van het ontwerp: 109px hoog, 16px padding, icoon 22x22 en
   een regel tekst. WPForms zet er een tweede regel met een uploadlimiet onder; die staat
   niet in het ontwerp en verdubbelt de hoogte. */
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-uploader{box-sizing:border-box;border:1.5px dashed var(--rdh-line);border-radius:var(--rdh-r-sm);padding:16px;text-align:center;color:var(--rdh-muted);cursor:pointer;font-size:13px;font-weight:500;background:none;min-height:109px;display:grid;place-items:center;transition:border-color .15s,background .15s}
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-uploader:hover{border-color:var(--rdh-green) !important;background:var(--rdh-green-050) !important}
/* Dropzone zet deze class zolang er een bestand boven het vak hangt. Een browser laat
   :hover tijdens een sleepactie niet gelden, dus zonder deze regel geeft het vak juist
   op het moment van neerzetten geen enkele terugkoppeling. Het ontwerp heeft geen
   sleepstand; dit is de .has-stand uit het ontwerp (doorlopende groene rand op de groene
   tint), die daar het duidelijkst "hier mag het" zegt.

   Rand en achtergrond staan er twee keer in: als eigen declaratie en als WPForms-
   variabele. Bij :hover valt de veldregel van WPForms weg (die staat op
   :not(:hover):not(:active)) en is de eigen declaratie genoeg, maar slepen is geen
   hover: dan blijft die regel staan en tekent WPForms de rand uit zijn eigen
   variabelen.
   Gemeten bleek dat nog niet genoeg: alleen border-style kwam erdoor, terwijl kleur en
   achtergrond grijs bleven. Vandaar !important op die twee, zodat het vak tijdens het
   slepen ook echt groen wordt. */
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-uploader.dz-drag-hover{
  --wpforms-field-border-color:var(--rdh-green);
  --wpforms-field-background-color:var(--rdh-green-050);
  border-style:solid !important;
  border-color:var(--rdh-green) !important;
  background:var(--rdh-green-050) !important;
}
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-uploader.dz-drag-hover .modern-title{color:var(--rdh-green-700)}
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-uploader .dz-message{display:block;padding:0;border:0;background:none;min-height:0}
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-uploader .dz-message svg{width:22px;height:22px;color:var(--rdh-green-700);margin:0 auto 4px;display:block}
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-uploader .modern-title{display:block;font-size:13px;font-weight:500;color:var(--rdh-muted);line-height:1.6}
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-uploader .modern-title span{color:var(--rdh-green-700);font-weight:600}
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-uploader .modern-hint{display:none}
/* De formulierplugin bouwt een deel van deze melding client-side opnieuw op en zet daar
   zijn eigen Engelse tekst terug. Die node blijft dus in de DOM staan; het ontwerp heeft
   hier een regel, dus de rest gaat weg. */
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-uploader .modern-title span{display:none}
.rdh-cfg .rdh-form-card .wpforms-form input[type=file]{font-size:13px;font-weight:500;color:var(--rdh-muted)}

/* de akkoord-regel */
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-consent .wpforms-field-label{display:none}
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-consent ul{margin:6px 0 0;padding:0;list-style:none}
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-consent li{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:500;color:var(--rdh-muted);margin:0;list-style:none !important}
/* WPForms zet appearance:none op het vakje en tekent er met :before en :after zijn eigen
   vinkje over. Daardoor deed de accent-color uit het ontwerp niets: je zag het vakje van
   de formulierplugin en niet het echte. Hier gaat het native vakje weer aan en gaan die
   twee lagen uit. Met !important omdat de regels van WPForms op div.wpforms-container-full
   staan en dat een specificiteitsrace is die je niet wilt voeren. */
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-consent input[type=checkbox]{
  -webkit-appearance:checkbox !important;appearance:checkbox !important;
  position:static !important;
  width:16px !important;height:16px !important;min-width:0 !important;min-height:0 !important;
  margin:3px 0 0 !important;padding:0 !important;
  accent-color:var(--rdh-green) !important;
  background:none !important;border:0 !important;box-shadow:none !important;
  flex:none;
}
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-consent input[type=checkbox]:before,
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-consent input[type=checkbox]:after{
  content:none !important;display:none !important;
}
/* WPForms zet ook 12px padding voor het label, terwijl de regel in het ontwerp zijn ruimte
   al uit de gap van 10px haalt. Anders staat de tekst 22px van het vakje. */
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-consent input[type=checkbox]+label{
  padding-inline-start:0 !important;
}
/* In het ontwerp is dit een label, en daar verslaat .form-card label (13px, gewicht 500)
   de eigen .consent-regel op specificiteit. De uitkomst van die cascade overnemen, niet
   de waarden van de regel die verliest. */
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-consent label{font-size:13px;color:var(--rdh-muted);font-weight:500;margin:0;line-height:1.45}
/* De link naar de privacyverklaring in de akkoordregel: kleur en gewicht uit het
   ontwerp, in rust zonder streep. Groen #2d8f27 haalt tegen het omliggende grijs
   #6a7a7f maar 1.06:1, dus is het vette gewicht in rust het enige verschil; bij hover
   en toetsenbordfocus komt de streep erbij zodat de link daar onmiskenbaar is. */
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-consent a{color:var(--rdh-green-700);font-weight:600}
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-consent a:hover,
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-consent a:focus-visible{color:var(--rdh-green-600);text-decoration:underline;text-underline-offset:2px}
/* Binnen het donkere aanvraagpaneel is de focusring wit, maar deze kaart is zelf wit:
   daar hoort de gewone groene ring, anders is de focus op de link onvindbaar. */
.rdh-cfg .rdh-form-card :focus-visible{outline-color:var(--rdh-green)}

/* de legenda boven de velden */
.rdh-cfg .rdh-form-card .rdh-veld-legenda .wpforms-field-label{display:none}
.rdh-cfg .rdh-form-card .rdh-veld-legenda{font-size:12px;color:var(--rdh-muted);margin-bottom:14px!important}
/* WPForms zet de tekst van een content-veld in een <p> en geeft die 20px ondermarge.
   Samen met de 14px van het veld stond het eerste veld 34px onder de legenda in plaats
   van de 14px uit het ontwerp. De container-class en de rij erbij, want met dezelfde
   specificiteit als WPForms verliest deze regel op laadorde; het wint zo ook van de
   p-reset van de plugin hierboven. */
.rdh-cfg .rdh-form-card div.wpforms-container-full .rdh-veld-legenda .wpforms-field-row p{margin:0}

/* de RAL-vraag: groen kader, en alleen zichtbaar bij die keuze in de configurator */
/* De container-class erbij, anders wint de algemene padding:0-regel voor WPForms-velden
   hierboven van deze padding. */
.rdh-cfg .rdh-form-card div.wpforms-container-full .wpforms-field.rdh-veld-ralwens{display:none;background:var(--rdh-green-050);border:1px solid var(--rdh-green-100);border-radius:var(--rdh-r-sm);padding:12px 14px}
.rdh-cfg .rdh-form-card div.wpforms-container-full .wpforms-field.rdh-veld-ralwens.rdh-toon{display:block}
.rdh-cfg .rdh-form-card .wpforms-form .rdh-veld-ralwens .wpforms-field-label{color:var(--rdh-green-700);font-weight:600}

/* WPForms zet zijn eigen opmaak via CSS-variabelen op de container en gebruikt daarbij
   selectors met :not(:hover):not(:active). Daar tegenaan duwen met specificiteit is een
   wedloop; de variabelen overschrijven is de bedoelde weg. Waarden uit het ontwerp. */
.rdh-cfg .rdh-form-card .wpforms-container{
  --wpforms-button-background-color:var(--rdh-green);
  --wpforms-button-text-color:#fff;
  --wpforms-button-border-radius:var(--rdh-r-xs);
  --wpforms-button-size-height:66px;
  --wpforms-field-border-color:var(--rdh-line);
  --wpforms-field-border-radius:var(--rdh-r-sm);
  --wpforms-field-text-color:var(--rdh-ink);
  --wpforms-label-color:var(--rdh-muted);
  --wpforms-label-size-font-size:13px;
  /* WPForms zet een expliciete veldhoogte via deze variabelen; zonder deze regels bleef
     een invoerveld op 43px staan en de textarea op 120px, tegen 45 en 92 in het ontwerp. */
  --wpforms-field-size-input-height:45px;
  --wpforms-field-size-textarea-height:92px;
  --wpforms-field-size-font-size:15px;
  --wpforms-field-size-line-height:17.5px;
  --wpforms-field-size-input-spacing:14px;
  --wpforms-field-border-size:1.5px;
}
/* Alleen de vorm die geen variabele heeft: volle breedte, het kop-font en de schaduw. */
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-submit-container{padding:0;margin-top:6px}
.rdh-cfg .rdh-form-card .wpforms-form button[type=submit]{width:100%;border:0;cursor:pointer;font-family:var(--rdh-font-head);font-weight:700;font-size:16px;box-shadow:0 8px 20px rgba(65,193,56,.30);padding:14px 16px 14px 22px;display:flex;align-items:center;justify-content:center;gap:12px}
.rdh-cfg .rdh-form-card .wpforms-form button[type=submit]:active{transform:translateY(1px)}
/* Het zeshoekje met het pijltje hoort bij de knop in het ontwerp. WPForms rendert zijn
   eigen knop-markup, dus geen span maar een ::after met dezelfde clip-path en maten, en
   het pijltje als achtergrond in plaats van als svg-element. */
.rdh-cfg .rdh-form-card .wpforms-form button[type=submit]::after{content:"";width:30px;height:30px;flex:none;background:var(--rdh-ink) no-repeat center/13px 13px;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0% 50%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E")}

/* de verborgen velden mogen geen ruimte innemen */
.rdh-cfg .rdh-form-card .wpforms-form .wpforms-field-hidden{margin:0;padding:0}