/* ========================================================================== Ranking Masters, 3-staps aanvraagformulier Alles is gescoped onder .rmlb-form zodat je dit veilig kunt embedden. De knoppen komen uit de style guide: https://rm-style-guide.vercel.app/ ========================================================================== */
/* Gilroy: kopfont uit de style guide */
/* Playfair Display italic: het accentwoord in de titel */
/* Ubuntu: body, UI-labels en buttons */
.rmlb-form *,
.rmlb-form *::before,
.rmlb-form *::after { box-sizing: border-box; }
.rmlb-form {
  /* Merk: kleuren uitgemeten uit Background.svg / de style guide */
  --rm-navy:        #08288b;  /* koppen, labels, invoertekst */
  --rm-navy-soft:   #64748b;  /* subtitel */
  --rm-orange:      #f16b37;
  --rm-orange-dark: #d04813;
  --rm-green:       #20920d;  /* stat-tekst */
  --rm-green-dark:  #2D8B4E;  /* rand stat-balk */
  --rm-green-soft:  #EAF6EC;
  --rm-panel:       #E7EEFA;
  --rm-card-line:   #EEF2FA;
  --rm-line:        #E4E8F2;
  --rm-muted:       #7d89a6;
  --rm-placeholder: #97a5ce;
  --rm-red:         #d13c30;

  --rm-radius:      8px;
  --rm-radius-lg:   20px;

  /* Knop-tokens uit de style guide */
  --rm-cta-gradient:           linear-gradient(79deg, #ff8555 0%, #d04813 100%);
  --rm-cta-shadow:             0 12px 40px rgba(208, 72, 19, .35);
  --rm-cta-shadow-hover:       0 20px 56px rgba(255, 133, 85, .45), 0 10px 28px rgba(208, 72, 19, .35);
  --rm-cta-arrow:              #08288b;
  --rm-ease-cta:   cubic-bezier(.34, 1.56, .64, 1);
  --rm-ease-arrow: cubic-bezier(.65, 0, .35, 1);
  --rm-dur-cta:    .32s;
  --rm-dur-arrow:  .38s;
  --rm-dur-fade:   .26s;
  --rm-dur-press:  .14s;

  font-family: ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--rm-navy);
  -webkit-font-smoothing: antialiased;

  max-width: 860px;
  margin: 0 auto;
}
/* Het blauwe vlak; de merkenstrip valt hier bewust buiten */
.rmlb-form .rmlb-panel {
  position: relative;
  padding: 40px 40px 50px;
  background: var(--rm-panel);
  border-radius: var(--rm-radius-lg);
  overflow: hidden;
}
/* --- Kop ---------------------------------------------------------------- */
.rmlb-form .rmlb-title {
  margin: 0 0 13px;
  font-family: gilroy, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-size: 34px;
  line-height: 1.25;
  font-weight: 700;          /* Gilroy Bold */
  letter-spacing: -.03em;
  color: var(--rm-navy);
}
.rmlb-form .rmlb-title em {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
}
.rmlb-form .rmlb-title .rmlb-accent { color: var(--rm-orange); }
.rmlb-form .rmlb-sub {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--rm-navy-soft);
}
.rmlb-form .rmlb-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0 0 25px;
  padding: 10px 14px;
  background: rgba(45, 139, 78, .0627);
  border: 1px solid var(--rm-green-dark);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--rm-green);
}
.rmlb-form .rmlb-stat svg { flex: 0 0 auto; }
/* --- Kaart + voortgang --------------------------------------------------- */
.rmlb-form .rmlb-card {
  background: #fff;
  border: 1px solid var(--rm-card-line);
  border-radius: var(--rm-radius-lg);
  padding: 33px 27px 31px;
  box-shadow: 0 18px 40px -30px rgba(8, 40, 139, .35);
}
.rmlb-form .rmlb-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 31px; }
.rmlb-form .rmlb-progress-track {
  flex: 1;
  height: 6px;
  background: #e9eefb;
  border-radius: 99px;
  overflow: hidden;
}
.rmlb-form .rmlb-progress-bar {
  height: 100%;
  width: 0;                     /* start leeg; vult zich zodra men begint met invullen */
  background: linear-gradient(90deg, var(--rm-orange), #f7893f);
  border-radius: 99px;
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.rmlb-form .rmlb-progress-label { font-size: 14px; font-weight: 500; color: var(--rm-muted); white-space: nowrap; }
/* --- Stappen ------------------------------------------------------------- */
.rmlb-form .rmlb-step { display: none; }
.rmlb-form .rmlb-step.rmlb-is-active { display: block; animation: rmlb-in .32s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes rmlb-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rmlb-form .rmlb-step-title {
  margin: 0 0 29px;
  font-family: gilroy, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--rm-navy);
}
.rmlb-form .rmlb-step-title:focus,
.rmlb-form .rmlb-note:focus { outline: none; }
.rmlb-form .rmlb-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.rmlb-form .rmlb-note--green { background: var(--rm-green-soft); border: 1px solid #cfe8d7; }
.rmlb-form .rmlb-note--warm { background: #FDF1E8; border: 1px solid #f6dcc8; }
.rmlb-form .rmlb-note b { font-weight: 700; }
.rmlb-form .rmlb-note svg { flex: 0 0 auto; margin-top: 2px; }
/* --- Velden -------------------------------------------------------------- */
.rmlb-form .rmlb-field { margin-bottom: 20px; }
.rmlb-form .rmlb-label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1px;
  color: var(--rm-navy);
}
.rmlb-form .rmlb-control { position: relative; display: block; }
.rmlb-form .rmlb-control > svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rm-placeholder);
  pointer-events: none;
}
.rmlb-form .rmlb-input,
.rmlb-form .rmlb-textarea {
  width: 100%;
  height: 50px;
  padding: 0 16px 0 46px;
  font-family: inherit;
  font-size: 16px;
  color: var(--rm-navy);
  background: #fff;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.rmlb-form .rmlb-textarea { height: auto; min-height: 96px; padding: 13px 16px; resize: vertical; }
.rmlb-form .rmlb-input::placeholder,
.rmlb-form .rmlb-textarea::placeholder { color: var(--rm-placeholder); }
.rmlb-form .rmlb-input:focus,
.rmlb-form .rmlb-textarea:focus {
  border-color: var(--rm-orange);
  box-shadow: 0 0 0 3px rgba(241, 107, 55, .15);
}
.rmlb-form .rmlb-field.rmlb-has-error .rmlb-input,
.rmlb-form .rmlb-field.rmlb-has-error .rmlb-textarea { border-color: var(--rm-red); box-shadow: 0 0 0 3px rgba(209, 60, 48, .12); }
.rmlb-form .rmlb-error {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rm-red);
}
.rmlb-form .rmlb-field.rmlb-has-error .rmlb-error { display: block; }
/* --- Keuzekaarten -------------------------------------------------------- */
.rmlb-form .rmlb-choices { display: grid; gap: 10px; margin-bottom: 8px; }
.rmlb-form .rmlb-choice { position: relative; display: block; cursor: pointer; }
.rmlb-form .rmlb-choice input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.rmlb-form .rmlb-choice-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius);
  font-size: 16px;
  font-weight: 500;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.rmlb-form .rmlb-choice:hover .rmlb-choice-box { border-color: #b9c7e6; transform: translateY(-1px); }
.rmlb-form .rmlb-choice-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #f2f5fd;
  color: var(--rm-navy);
  transition: background .18s, color .18s;
}
.rmlb-form .rmlb-choice input:checked + .rmlb-choice-box {
  border-color: var(--rm-orange);
  background: #FEF3EC;
  box-shadow: 0 0 0 3px rgba(240, 102, 43, .13);
}
.rmlb-form .rmlb-choice input:checked + .rmlb-choice-box .rmlb-choice-icon { background: var(--rm-orange); color: #fff; }
.rmlb-form .rmlb-choice input:focus-visible + .rmlb-choice-box { border-color: var(--rm-orange); box-shadow: 0 0 0 3px rgba(240, 102, 43, .25); }
.rmlb-form .rmlb-other { display: none; margin-top: 4px; }
.rmlb-form .rmlb-other.rmlb-is-visible { display: block; animation: rmlb-in .25s ease both; }
/* --- Knoppen: component uit de style guide ------------------------------ */
.rmlb-form .rmlb-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;  /* tekst gecentreerd, cirkel blijft rechts (absoluut) */
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  padding: 7px 55px;        /* 7 rand + 36 cirkel + 12 ruimte, aan beide kanten gelijk */
  font-family: ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  color: #fff;
  background-image: var(--rm-cta-gradient);
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: none;                /* geen gloed in rust; alleen bij hover */
  transition: transform var(--rm-dur-cta) var(--rm-ease-cta), box-shadow var(--rm-dur-cta) ease, filter var(--rm-dur-cta) ease;
}
.rmlb-form .rmlb-btn:hover,
.rmlb-form .rmlb-btn:focus-visible {
  box-shadow: var(--rm-cta-shadow-hover);
  filter: brightness(1.07) saturate(1.05);
  transform: translateY(-3px) scale(1.025);
}
.rmlb-form .rmlb-btn:active { transition-duration: var(--rm-dur-press); transform: translateY(-1px) scale(1); }
.rmlb-form .rmlb-btn:focus-visible { outline: 2px solid var(--rm-orange); outline-offset: 3px; }
.rmlb-form .rmlb-btn[disabled] { opacity: .7; cursor: progress; transform: none; }
/* De pijl vliegt weg, een tweede schuift in */
.rmlb-form .rmlb-cta-fx {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9999px;
  background: #fff;
}
.rmlb-form .rmlb-cta-fx > svg {
  position: absolute;
  top: 50%; left: 50%;
  stroke: var(--rm-cta-arrow);
  transition: transform var(--rm-dur-arrow) var(--rm-ease-arrow), opacity var(--rm-dur-fade) ease;
}
.rmlb-form .rmlb-cta-fx > .rmlb-cta-arrow-out { transform: translate(-50%, -50%); }
.rmlb-form .rmlb-cta-fx > .rmlb-cta-arrow-in { opacity: 0; transform: translate(-180%, 80%); }
.rmlb-form .rmlb-btn:hover .rmlb-cta-fx > .rmlb-cta-arrow-out,
.rmlb-form .rmlb-btn:focus-visible .rmlb-cta-fx > .rmlb-cta-arrow-out { opacity: 0; transform: translate(80%, -180%); }
.rmlb-form .rmlb-btn:hover .rmlb-cta-fx > .rmlb-cta-arrow-in,
.rmlb-form .rmlb-btn:focus-visible .rmlb-cta-fx > .rmlb-cta-arrow-in { opacity: 1; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) {
.rmlb-form .rmlb-btn,
.rmlb-form .rmlb-btn:hover,
.rmlb-form .rmlb-btn:focus-visible,
.rmlb-form .rmlb-btn:active { transform: none; transition: box-shadow .15s, filter .15s; }
.rmlb-form .rmlb-cta-fx > svg { transition: opacity .15s; }
.rmlb-form .rmlb-cta-fx > .rmlb-cta-arrow-in,
.rmlb-form .rmlb-btn:hover .rmlb-cta-fx > .rmlb-cta-arrow-out,
.rmlb-form .rmlb-btn:focus-visible .rmlb-cta-fx > .rmlb-cta-arrow-out { transform: translate(-50%, -50%); }
}
.rmlb-form .rmlb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 4px 2px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--rm-muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .18s;
}
.rmlb-form .rmlb-back:hover { color: var(--rm-navy); }
/* Wit kadertje, zodat de tekst niet wegvalt tegen de gloed van de knop */
.rmlb-form .rmlb-trust {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--rm-line);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rm-green);
}
.rmlb-form .rmlb-trust svg { flex: 0 0 auto; margin-top: 2px; }
/* --- Succes -------------------------------------------------------------- */
.rmlb-form .rmlb-success { display: none; text-align: center; padding: 12px 6px 6px; }
.rmlb-form .rmlb-success.rmlb-is-active { display: block; animation: rmlb-in .35s ease both; }
.rmlb-form .rmlb-success-icon {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 16px;
  border-radius: 99px;
  background: var(--rm-green-soft);
}
.rmlb-form .rmlb-success h3 {
  margin: 0 0 8px;
  font-family: gilroy, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
}
.rmlb-form .rmlb-success p { margin: 0 auto; max-width: 460px; font-size: 16px; line-height: 1.6; color: var(--rm-navy-soft); }
/* --- Merkenstrip (Figma 12:20224) ---------------------------------------- */
.rmlb-form .rmlb-brands {
  margin: 24px 0 0;
  padding-top: 12px;
  border-top: 1px solid #cfdcec;
  text-align: center;
}
.rmlb-form .rmlb-brands-label {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: .1px;
  color: #5c6575;
}
.rmlb-form .rmlb-brands-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 44px;
}
.rmlb-form .rmlb-brand {
  display: block;
  width: auto;
  height: 20px;
  object-fit: contain;
}
.rmlb-form .rmlb-brand--loods { height: 30px; }
.rmlb-form .rmlb-brand--dille { height: 32px; }
.rmlb-form .rmlb-brand--geld { height: 26px; }
.rmlb-form .rmlb-brand--meubel { height: 19px; }
.rmlb-form .rmlb-hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
/* --- Mobiel -------------------------------------------------------------- */
@media (max-width: 640px) {
.rmlb-form .rmlb-panel { padding: 24px 14px 26px; border-radius: 16px; }
.rmlb-form .rmlb-title { font-size: 28px; max-width: 100%; }
.rmlb-form .rmlb-card { padding: 18px 14px 18px; }
/* Strakkere verticale ritmiek op mobiel */
.rmlb-form .rmlb-progress { margin-bottom: 18px; }
.rmlb-form .rmlb-step-title { margin-bottom: 16px; font-size: 22px; }
.rmlb-form .rmlb-label { margin-bottom: 8px; }
.rmlb-form .rmlb-field { margin-bottom: 14px; }
.rmlb-form .rmlb-sub { margin-bottom: 20px; }
.rmlb-form .rmlb-stat { margin-bottom: 20px; }
.rmlb-form .rmlb-note { margin-bottom: 14px; }
.rmlb-form .rmlb-brands { padding-left: 18px; padding-right: 18px; }
.rmlb-form .rmlb-brands-list { gap: 12px 28px; }
/* Lange knoplabels breken af i.p.v. onder de pijl-cirkel te schuiven */
.rmlb-form .rmlb-btn {
    white-space: normal;
    padding: 10px 46px;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
  }
.rmlb-form .rmlb-cta-fx { right: 7px; }
/* Tikoppervlak van 44px voor de terug-link */
.rmlb-form .rmlb-back { min-height: 44px; padding: 10px 2px; }
}
/* ==========================================================================
   Pop-uphuls + Contact Form 7-compatibiliteit
   Ranking Masters: linkbuilding-audit pop-up
   ========================================================================== */

/* --- 1. De pop-up ------------------------------------------------------- */

.rm-lb-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(12px, 4vh, 48px) clamp(12px, 4vw, 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.rm-lb-modal.rmlb-is-open { display: flex; }

.rm-lb-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 10, 32, .74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: rm-lb-fade .22s ease both;
}

.rm-lb-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 740px;
  margin: auto;
  padding: 20px;
  background: #f5f7fc;
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(3, 10, 32, .45);
  animation: rm-lb-pop .28s cubic-bezier(.34, 1.4, .64, 1) both;
}

/* Sluitknop: rechtsboven, buiten de tekstkolom van het paneel */
.rm-lb-modal__close {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #d6e0f4;
  border-radius: 50%;
  background: #fff;
  color: #08288b;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}
.rm-lb-modal__close:hover { background: #eaf0fd; border-color: #b9c7e6; transform: rotate(90deg); }
.rm-lb-modal__close:focus-visible { outline: 2px solid #f16b37; outline-offset: 2px; }
.rm-lb-modal__close svg { pointer-events: none; }

/* Binnen de pop-up is de buitenmarge van het formulier overbodig */
.rm-lb-modal .rmlb-form { max-width: none; margin: 0; }



@keyframes rm-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm-lb-pop  { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rm-lb-modal__backdrop,
  .rm-lb-modal__dialog { animation: none; }
  .rm-lb-modal__close:hover { transform: none; }
}

/* Scroll-lock. scrollbar-gutter houdt de ruimte van de scrollbar vast, zodat
   de pagina achter de backdrop niet verspringt bij openen en sluiten. */
html.rm-lb-modal-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}
html.rm-lb-modal-open body { overflow: hidden; }

@media (max-width: 640px) {
  .rm-lb-modal { padding: 0; }
  .rm-lb-modal__dialog {
    max-width: none;
    min-height: 100%;
    padding: 14px 12px 24px;
    border-radius: 0;
  }
  /* 44px blijft het minimum tikoppervlak op mobiel */
  .rm-lb-modal__close { top: 18px; right: 16px; width: 44px; height: 44px; }
  /* Alleen hier houdt de kop ruimte vrij voor de sluitknop; op desktop is er
     ruim 250px over en zou het de kop onnodig laten afbreken. */
  .rm-lb-modal .rmlb-form .rmlb-title { padding-right: 52px; }
}

/* --- 2. Contact Form 7 ------------------------------------------------- */

/* CF7 zet zijn eigen wrappers tussen .rmlb-form en .rmlb-panel */
.rmlb-form .wpcf7,
.rmlb-form form.wpcf7-form { margin: 0; padding: 0; }
.rmlb-form .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }

/* Elk veld krijgt van CF7 een extra <span> om de input heen; die moet
   layout-neutraal zijn, anders klapt .rmlb-control uit elkaar */
.rmlb-form .rmlb-control > .wpcf7-form-control-wrap { display: block; }

/* CF7 valideert zelf mee en plakt een eigen tip in het veld. Wij tonen
   .rmlb-error met onze eigen teksten, dus die tip blijft verborgen. De rode
   rand nemen we wel over. */
.rmlb-form .wpcf7-not-valid-tip { display: none; }
.rmlb-form .rmlb-input.wpcf7-not-valid,
.rmlb-form .rmlb-textarea.wpcf7-not-valid {
  border-color: var(--rm-red);
  box-shadow: 0 0 0 3px rgba(209, 60, 48, .12);
}

/* Geen CF7-spinner: de knop krijgt zijn eigen "Versturen…"-status */
.rmlb-form .wpcf7-spinner { display: none; }

/* De responsregel van CF7 (serverfouten, spam, mail mislukt) verschijnt
   standaard onderaan het formulier. JS verplaatst hem in de kaart; deze
   opmaak hoort bij die plek.

   Zichtbaarheid gaat op de inhoud, niet op de statusklasse van het formulier.
   CF7 zet bij live veldvalidatie de status op `validating` en laat die staan;
   een regel die alleen `init`, `submitting` en `sent` verbergt liet daardoor
   een leeg gekleurd balkje zien zodra iemand begon te typen. */
.rmlb-form form.wpcf7-form .rmlb-card > .wpcf7-response-output,
.rmlb-form form.wpcf7-form .wpcf7-response-output {
  display: block;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #f6dcc8;
  border-radius: var(--rm-radius);
  background: #FDF1E8;
  font-size: 15px;
  line-height: 1.5;
  color: var(--rm-navy);
}
.rmlb-form form.wpcf7-form .rmlb-card > .wpcf7-response-output:empty,
.rmlb-form form.wpcf7-form .wpcf7-response-output:empty { display: none; }

/* --- 3. Trigger-knoppen ------------------------------------------------ */
/* De CTA's blijven gewone links (werken zonder JS); JS onderschept de klik. */
.rm-lb-cta-trigger { cursor: pointer; }

/* --- 4. Themapantser ---------------------------------------------------- */
/* Het child-thema stijlt `button` en `input[type=...]` rechtstreeks, met
   selectors op input-type plus focus (0,2,1) die onze klasseregels
   (0,2,0) verslaan. Elke eigenschap die de export níet declareert, komt dan
   uit het thema. Hieronder staan precies de eigenschappen die uit de
   ontwerp-pariteitstest naar voren kwamen, expliciet vastgezet. */

.rm-lb-modal .rmlb-form .rmlb-input,
.rm-lb-modal .rmlb-form .rmlb-textarea {
  line-height: normal;
  -webkit-appearance: none;
  appearance: none;
}
/* Het thema zet de focus-kleur van inputs op #111; navy moet blijven staan. */
.rm-lb-modal .rmlb-form .rmlb-card .rmlb-input:focus,
.rm-lb-modal .rmlb-form .rmlb-card .rmlb-textarea:focus {
  color: var(--rm-navy);
}

/* De vaste hoogte van 38px op button uit het thema klemde de knop vast,
   waardoor een label over twee regels boven en onder de pill uitstak. */
.rm-lb-modal .rmlb-form .rmlb-btn {
  height: auto;
  line-height: normal;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.rm-lb-modal .rmlb-form .rmlb-back {
  height: auto;
  line-height: normal;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* GEEN margin-bottom-correctie hier: de ontwerp-pariteitstest liet zien dat de
   losse HTML dezelfde 14px onder de trust-regel heeft (browserdefault op p), en
   dat .rmlb-sub en .rmlb-brands-label hun marge zelf declareren. Dat wegpoetsen was
   een regressie op het goedgekeurde ontwerp, geen fix. */

/* --- 5. Beweging ------------------------------------------------------- */
/* De export dekt onder reduced-motion alleen de knop en de pop-up; de
   stapwissel, de voortgangsbalk en de keuzekaart-hover niet. */
@media (prefers-reduced-motion: reduce) {
  .rm-lb-modal .rmlb-form .rmlb-step.rmlb-is-active { animation: none; }
  .rm-lb-modal .rmlb-form .rmlb-success.rmlb-is-active { animation: none; }
  .rm-lb-modal .rmlb-form .rmlb-other.rmlb-is-visible { animation: none; }
  .rm-lb-modal .rmlb-form .rmlb-progress-bar { transition: none; }
  .rm-lb-modal .rmlb-form .rmlb-choice:hover .rmlb-choice-box { transform: none; }
}

/* --- 6. Ingelogde beheerders ------------------------------------------- */
/* De WP-adminbar staat boven de pop-up; schuif de dialoog eronder zodat de
   sluitknop bereikbaar blijft. Alleen zichtbaar voor ingelogde gebruikers. */
body.admin-bar .rm-lb-modal { padding-top: 46px; }
@media screen and (max-width: 782px) {
  body.admin-bar .rm-lb-modal { padding-top: 46px; }
}

/* --- 7. Eigen meldregel ------------------------------------------------ */
/* Voor het geval CF7 helemaal geen antwoord geeft: dan blijft zijn eigen
   responsregel verborgen en zou de gebruiker zonder enige melding achter een
   dode knop staan. */
.rm-lb-modal .rmlb-form .rmlb-melding {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #f0c2bc;
  border-radius: var(--rm-radius);
  background: #fdf0ee;
  font-size: 15px;
  line-height: 1.5;
  color: #8f2018;
}
.rm-lb-modal .rmlb-form .rmlb-melding[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Hoge dialoog: bovenkant bleef onbereikbaar.

   `.rm-lb-modal` is een scrollende flex-container en `.rm-lb-modal__dialog`
   stond op `margin:auto`. Die auto-marge centreert verticaal, en zodra de
   inhoud hoger is dan het scherm duwt dat de bovenrand buiten het scrollbare
   gebied: je kon de titel niet meer bereiken, ook niet door te scrollen.
   Dat is het bekende flex-centreer-probleem bij overflow.

   Oplossing zonder de gecentreerde uitstraling op te geven: de dialoog krijgt
   zelf een maximum van de beschikbare hoogte en scrolt intern. `max-height:100%`
   rekent tegen de content-box van de container, dus de padding en de extra
   padding-top bij een ingelogde admin-balk zitten er automatisch in.
   Korte formulieren blijven precies staan waar ze stonden.
   ───────────────────────────────────────────────────────────────────────── */
.rm-lb-modal__dialog {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Volledig scherm op mobiel: daar staat de dialoog al op min-height:100% en
   padding 0, dus alleen het interne scrollen is hier nodig. */
@media (max-width: 860px) {
  .rm-lb-modal__dialog { max-height: 100%; }
}