:root{
  --card-pad-y: 18px;
  --card-pad-x: 18px;

  --gap-intra: 12px;
  --gap-group: 28px;
  --gap-mobile-row: 14px;

  --btn-h: 44px;
  --btn-min-w: 84px;

  --btn-min-w-rvp: 56px;
  --btn-min-w-ltv: 64px;

  --dd-pad-x: 12px;
  --dd-pad-x-mortgage: 10px;

  --w-dd-mortgage-ch: 12.0;
  --w-dd-rvp-ch:       7.0;
  --w-dd-energy-ch:    6.5;

  --mortgage-fixed-pad: 8px;
  --mortgage-min-w: 108px;

  --fs-btn: 17px; 
  --fs-title: 16px;

  /* ====== MODE + COMBI ====== */
  --mode-pad-y: 10px;
  --mode-pad-x: 10px;
  --mode-gap:   10px;
  --mode-btn-h: 44px;
  --mode-btn-px: 18px;
  --mode-fs: 16px;
  --mode-fs-mobile: 14px;
  --mode-card-radius: 14px;
  --mode-card-h: calc(var(--mode-btn-h) + (var(--mode-pad-y) * 2));

  /* Brand */
  --brand-yellow: #FAB74E;
  --brand-green:  #64CAB9;
  --brand-purple: #B082C8;
  --brand-yellow-text: #0f172a;

  /* Neutrals */
  --ink: #0f172a;
  --surface: #ffffff;

  /* Tints */
  --green-50:  rgba(100, 202, 185, .10);
  --green-100: rgba(100, 202, 185, .18);
  --green-200: rgba(100, 202, 185, .32);
  --green-300: rgba(100, 202, 185, .48);
  --green-400: rgba(100, 202, 185, .62);

  --purple-50: rgba(176, 130, 200, .10);
  --purple-200: rgba(176, 130, 200, .30);

  --yellow-50: rgba(250, 183, 78, .12);

  /* Focus ring */
  --focus: 2px solid #2563eb;

  --sticky-cta-bg: #EE983F;
  --sticky-cta-text: #000000;

  --card-bg: #fff;
  --card-bd: #e7e7ea;
  --card-radius: 12px;
  --txt: #18181b;
  --muted: #6b7280;
  --pill-bg: #f3f4f6;
  --pill-bd: #e5e7eb;
  --pill-active-bg: #111827;
  --pill-active-txt: #ffffff;

  --ui-scale: 1;
  
  --mobile-col-gap: calc(var(--gap-group) * var(--ui-scale));
  --mobile-col-gap-min: 6px;

  --rvp-fixed-pad: 8px;
  --rvp-min-w: 96px;
  --energy-fixed-pad: 8px;
  --energy-min-w: 78px;

  --rvp-mobile-w: 88px;
  --energy-mobile-w: 80px;
  --mortgage-mobile-w: 132px;

  /* Fade timings */
  --fx-total: 1450ms;
  --fx-out:   600ms;
  --fx-hold:  250ms;
  --fx-in:    1000ms;

  /* Palet */
  --mc-bg:    #4A2B60;
  --mc-bd:    rgba(255,255,255,.10);
  --mc-label: rgba(255,255,255,.92);

  --mc-pill:             rgba(176, 130, 200, .22);
  --mc-pill-text:        rgba(255,255,255,.74);
  --mc-pill-active:      var(--brand-purple);
  --mc-pill-active-text: #000000;

  --fc-bg:    #1F5E56;
  --fc-label: rgba(255,255,255,.92);

  --fc-pill:             rgba(255,255,255,.16);
  --fc-pill-text:        rgba(255,255,255,.92);
  --fc-pill-active:      var(--brand-green);
  --fc-pill-active-text: #0B1220;

  --cc-bg:    var(--sticky-cta-bg);
  --cc-bd:    rgba(15, 23, 42, .12);
  --cc-label: rgba(15, 23, 42, .92);

  --cc-pill:             #D67A2B;
  --cc-pill-text:        #0B1220;

  --cc-pill-active:      #C7681E;
  --cc-pill-active-text: #0B1220;

  --res-chip-bg:         #c8d9ff;
  --res-chip-text:       #0f172a;

  --cta-bg: #6A4481;
  --cta-text: #FFFFFF;

  --cta-min-h: 50px;
  --results-scroll-top-gap: 14px;

  --ltv-label-text: "Schuld-marktwaarde verhouding";
}

/* ===== Responsive scaling MODE ===== */
@media (max-width: 802px){
  :root{
    --mode-btn-h:  clamp(34px, 4.6vw, 40px);
    --mode-btn-px: clamp(10px, 2.1vw, 15px);
    --mode-fs:     clamp(12px, 1.9vw, 15px);

    --mode-pad-y:  clamp(7px,  1.6vw, 9px);
    --mode-gap:    clamp(6px,  1.6vw, 9px);
  }
}
@media (max-width: 619px){
  :root{
    --mode-btn-h:  clamp(32px, 5.6vw, 36px);
    --mode-btn-px: clamp(9px,  2.7vw, 12px);
    --mode-fs:     clamp(11px, 2.8vw, 13px);

    --mode-pad-y:  clamp(6px,  2.0vw, 8px);
    --mode-gap:    clamp(6px,  2.0vw, 8px);
  }
}
@media (max-width: 486px){
  :root{
    --mode-btn-h:  clamp(30px, 7.8vw, 38px);
    --mode-btn-px: clamp(8px,  2.6vw, 12px);
    --mode-fs:     clamp(10.5px, 2.675vw, 13px);

    --mode-pad-y:  clamp(6px,  1.8vw, 8px);
    --mode-gap:    clamp(5px,  1.6vw, 8px);
  }
}
@media (max-width: 387px){
  :root{
    --mode-fs: clamp(9px, 2.55vw, 10.5px);
  }
}

/* =================================================================================
   SCOPE START — alles hieronder is scoped zodat WP header/layout niet meer raakt
   ================================================================================= */

.rt-tool{
  /* tool base look */
  background:#f7f7fb;
  color: var(--txt);
  padding: 0;

  /* ✅ breek uit WP/theme containers (fix voor “te grote marges” op mobiel) */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* scope box sizing */
.rt-tool, 
.rt-tool *{
  box-sizing: border-box;
}

/* Fade (titel + lijst) */
.rt-tool [data-fade]{
  opacity: 1;
  transition-property: opacity, visibility;
  transition-timing-function: ease;
}

.rt-tool .is-fading-out [data-fade]{
  transition-duration: var(--fx-out);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rt-tool .is-hold [data-fade]{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rt-tool .is-fading-in [data-fade]{
  transition-duration: var(--fx-in);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rt-tool .is-fading-out #filterCard,
.rt-tool .is-hold       #filterCard,
.rt-tool .is-fading-in  #filterCard{
  pointer-events: none;
}

.rt-tool #filterCard{ pointer-events: auto; }

.rt-tool .fade-scope{ background: #fff; }

html.ui-lock .rt-tool #modeCard,
html.ui-lock .rt-tool #filterCard,
html.ui-lock .rt-tool .dd-menu,
html.ui-lock .rt-tool .btn-cta,
html.ui-lock .rt-tool .sticky-cta{
  pointer-events: none !important;
}

html.ui-lock .rt-tool button{ cursor: not-allowed; }

.rt-tool .page{
  max-width: 1220px;
  min-width: 337px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  --page-gap: 14px;
  gap: var(--page-gap);
}

@media (max-width: 768px){
  .rt-tool .page{
    max-width: 100% !important;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ================= VERHUURTYPE TOGGLE ================= */
.rt-tool .mode-card{
  background: var(--mc-bg);
  border: 1px solid var(--mc-bd);
  border-radius: 14px;

  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: center;

  padding: var(--mode-pad-y);
  column-gap: var(--mode-gap);

  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.20);
}

.rt-tool #modeRegular{ justify-self: start; }
.rt-tool #modeShared { justify-self: center; position: static; transform: none; }
.rt-tool #modeMixed{ justify-self: end; }

.rt-tool .mode-top, 
.rt-tool .mode-bottom{ display: inline; }
.rt-tool .mode-top::after{ content: " "; }

.rt-tool .mode-btn{
  height: var(--mode-btn-h);
  min-width: 0;
  padding: 0 var(--mode-btn-px);
  border-radius: 26px;

  background: var(--mc-pill);
  color: var(--mc-pill-text);
  border: 1px solid rgba(255,255,255,.14);

  font-size: var(--mode-fs);
  font-weight: 600;
  cursor: pointer;

  transition: filter .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.rt-tool .mode-btn:hover{ filter: brightness(1.1); }
.rt-tool .mode-btn.active{
  background: var(--mc-pill-active);
  color: var(--mc-pill-active-text);
  border-color: rgba(0,0,0,.08);
}
.rt-tool .mode-btn:focus-visible{
  outline: var(--focus);
  outline-offset: 2px;
}

/* Forceer tool zichtbaar zodra JS klaar is */
body.rt-ready .rt-tool .rt-fade-wrap{
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 619px){
  .rt-tool .mode-top, .rt-tool .mode-bottom{ display:block; }
  .rt-tool .mode-top::after{ content:""; }

  .rt-tool .mode-card{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rt-tool .mode-btn{
    width: 100%;
    min-width: 0;
    display: grid;
    place-items: center;

    white-space: normal;
    overflow-wrap: anywhere;

    font-size: var(--mode-fs);
    min-height: var(--mode-btn-h);

    padding-top: calc(var(--mode-pad-y) * 0.9);
    padding-bottom: calc(var(--mode-pad-y) * 0.9);
    padding-left: var(--mode-btn-px);
    padding-right: var(--mode-btn-px);

    height: auto;
    text-align:center;
    line-height: 1.15;
  }
}

/* ================= COMBI-CARD ================= */
.rt-tool .combi-card{
  background: var(--cc-bg);
  border: 1px solid var(--cc-bd);
  border-radius: var(--mode-card-radius);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);

  position: relative;
  z-index: 40;

  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  padding: 0 calc(var(--card-pad-x) * var(--ui-scale));
  pointer-events: none;

  margin-top: calc(-1 * var(--page-gap));
  margin-bottom: 0;

  transition:
    max-height var(--fx-in) ease,
    opacity    var(--fx-in) ease,
    transform  var(--fx-in) ease,
    padding    var(--fx-in) ease,
    margin     var(--fx-in) ease;
}

.rt-tool .combi-card[aria-hidden="false"]{
  max-height: 140px;
  opacity: 1;
  transform: translateY(0);

  padding: calc(var(--mode-pad-y) * var(--ui-scale)) calc(var(--card-pad-x) * var(--ui-scale));
  margin-top: 0;
  margin-bottom: 0;

  overflow: visible;
  pointer-events: auto;
}

.rt-tool .cc-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  column-gap: calc(var(--mode-gap) * var(--ui-scale));
  min-height: calc(var(--mode-btn-h) * var(--ui-scale));
}
.rt-tool .cc-left{
  grid-column: 1 / span 2;
  justify-self: center;
}
.rt-tool .cc-right{
  grid-column: 3 / span 2;
  justify-self: center;
}

.rt-tool .combi-card .dd-btn{
  height: calc(var(--mode-btn-h) * var(--ui-scale));
  padding: 0 calc(var(--mode-btn-px) * var(--ui-scale));
  border-radius: 999px;

  background: var(--cc-pill);
  color: var(--cc-pill-text);
  border: 1px solid rgba(15,23,42,.18);

  font-size: calc(var(--mode-fs) * var(--ui-scale));
  font-weight: 700;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  transition: opacity var(--fx-in) ease, filter .15s ease;
}

.rt-tool .combi-card .dd-btn:hover{ filter: brightness(1.06); }
.rt-tool .combi-card .dd-btn.active{
  background: var(--cc-pill-active);
  color: var(--cc-pill-active-text);
}

.rt-tool .combi-card .dd-btn .dd-label{
  position: static;
  transform: none;
  left: auto;
  pointer-events: none;
  white-space: nowrap;
}

.rt-tool .combi-card .field{ position: relative; z-index: 2000; }
.rt-tool .combi-card .dd-menu{ z-index: 999999; }

@media (max-width: 574px){
  .rt-tool .cc-row{
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--mode-gap) * var(--ui-scale));
  }
  .rt-tool .cc-left{ grid-column: 1; justify-self: start; }
  .rt-tool .cc-right{ grid-column: 2; justify-self: end; }
}

/* fade only combi content */
.rt-tool .combi-card .cc-row{
  transition: opacity var(--fx-out) ease;
  opacity: 1;
}
.rt-tool .page.is-fading-out .combi-card[aria-hidden="false"] .cc-row,
.rt-tool .page.is-hold      .combi-card[aria-hidden="false"] .cc-row{
  opacity: 0;
  transition-duration: var(--fx-out);
}

/* ================= FILTERKAART ================= */
.rt-tool .filter-card{
  background: var(--fc-bg);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--card-radius);
  padding: calc(var(--card-pad-y) * var(--ui-scale)) calc(var(--card-pad-x) * var(--ui-scale));
  display: flex;
  align-items: flex-start;
  gap: calc(var(--gap-group) * var(--ui-scale));
  flex-wrap: nowrap;

  position: relative;
  z-index: 20;
}
.rt-tool .filter-card .group-label{ color: var(--fc-label); }

.rt-tool .filter-card.is-mobile{
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  column-gap: var(--mobile-col-gap, calc(var(--gap-group) * var(--ui-scale)));
  row-gap: calc(var(--gap-mobile-row) * var(--ui-scale));
}
.rt-tool .filter-card.is-mobile .group-mortgage{ grid-column: 1; grid-row: 1; justify-self: start; }
.rt-tool .filter-card.is-mobile .group-rvp{      grid-column: 2; grid-row: 1; justify-self: end;  }
.rt-tool .filter-card.is-mobile .group-ltv{      grid-column: 1; grid-row: 2; justify-self: start;}
.rt-tool .filter-card.is-mobile .group-energy{   grid-column: 2; grid-row: 2; justify-self: end;  }

.rt-tool .filter-card.is-mobile .group-rvp .group-row,
.rt-tool .filter-card.is-mobile .group-energy .group-row{ justify-content: flex-end; }

.rt-tool .filter-card.is-mobile .filter-group{ min-width: 0; }

.rt-tool .filter-group{
  display:flex;
  flex-direction: column;
  align-items:stretch;
  gap: 8px;
  white-space: nowrap;
}
.rt-tool .group-row{
  display:flex;
  align-items:center;
  gap: calc(var(--gap-intra) * var(--ui-scale));
}
.rt-tool .group-label{
  font-size: var(--fs-title);
  user-select: none;
  line-height: 1.2;
  padding-left: 2px;
}

/* Energielabel label rechts plakken */
.rt-tool .group-energy .group-label{
  position: absolute;
  top: 0; right: 0;
  text-align: right;
  white-space: nowrap;
  width: auto;
  pointer-events: none;
}
.rt-tool .group-energy .group-row{ justify-content: flex-end; }
.rt-tool .group-energy{
  margin-left: auto;
  position: relative;
  padding-top: calc(var(--fs-title) * 1.2 + 8px);
}

/* ---------- KNOPPEN/PILLEN ---------- */
.rt-tool .pill,
.rt-tool .dd-btn{
  height: calc(var(--btn-h) * var(--ui-scale));
  line-height: 1;
  padding: 0 calc(var(--dd-pad-x) * var(--ui-scale));
  border-radius: 999px;
  border: 1px solid var(--pill-bd);
  font-size: calc(var(--fs-btn) * var(--ui-scale));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--pill-bg);
  cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  vertical-align: middle;
}
.rt-tool .pill{ min-width: calc(var(--btn-min-w) * var(--ui-scale)); }
.rt-tool .pill.rvp{ min-width: calc(var(--btn-min-w-rvp) * var(--ui-scale)); }
.rt-tool .pill.ltv{ min-width: calc(var(--btn-min-w-ltv) * var(--ui-scale)); }
.rt-tool .pill:hover{ border-color:#cfd3d8; }
.rt-tool .pill:focus-visible{ outline: var(--focus); outline-offset: 2px; }
.rt-tool .pill.active{
  background: var(--pill-active-bg);
  color: var(--pill-active-txt);
  border-color: var(--pill-active-bg);
}

.rt-tool .dd-btn{
  position: relative;
  width: auto;
  align-items: center;
}
.rt-tool .dd-btn .dd-label{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  white-space: nowrap; text-align: center;
  pointer-events: none;
}
.rt-tool .dd-btn .dd-label.left{
  position: static; transform: none; text-align: left; pointer-events: auto;
}
.rt-tool .dd-btn:hover{ border-color:#cfd3d8; }
.rt-tool .dd-btn:focus-visible{ outline: var(--focus); outline-offset: 2px; }
.rt-tool .dd-btn.active{
  background: var(--pill-active-bg);
  color: var(--pill-active-txt);
  border-color: var(--pill-active-bg);
}

/* Theme inside filter-card */
.rt-tool .filter-card .pill,
.rt-tool .filter-card .dd-btn{
  background: var(--fc-pill);
  color: var(--fc-pill-text);
  border: none;
}
.rt-tool .filter-card .pill:hover,
.rt-tool .filter-card .dd-btn:hover{ filter: brightness(1.1); }
.rt-tool .filter-card .pill.active,
.rt-tool .filter-card .dd-btn.active{
  background: var(--fc-pill-active);
  color: var(--fc-pill-active-text);
  border: none;
}

/* Dropdown widths */
.rt-tool .group-mortgage .dd-btn{
  padding-left:  calc(var(--dd-pad-x-mortgage) * var(--ui-scale));
  padding-right: calc(var(--dd-pad-x-mortgage) * var(--ui-scale));
  width: clamp(
    var(--mortgage-min-w),
    calc(
      (var(--w-dd-mortgage-ch) * 1ch) * var(--ui-scale)
      + (var(--w-dd-mortgage-ch) * 1ch) * 0.15
      + (var(--mortgage-fixed-pad) * 2)
    ),
    100vw
  );
}
.rt-tool .group-rvp .dd-btn{
  width: calc((var(--w-dd-rvp-ch) * 1ch + (var(--dd-pad-x) * 2)) * var(--ui-scale));
}
.rt-tool .group-energy .dd-btn{
  width: calc((var(--w-dd-energy-ch) * 1ch + (var(--dd-pad-x) * 2)) * var(--ui-scale));
}
.rt-tool .group-ltv .dd-btn{
  width: calc(var(--btn-min-w-ltv) * var(--ui-scale));
}

/* Combi dropdowns */
.rt-tool #creValueBtn,
.rt-tool #creRentBtn{
  width: auto;
  min-width: 0;
  max-width: none;
}

/* Dropdown menu */
.rt-tool .field{ position: relative; }
.rt-tool .dd-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background:#fff;
  border:1px solid var(--card-bd);
  border-radius:10px;
  padding:6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  z-index: 20000;
}
.rt-tool .dd-menu.dd-menu-right{ right: 0; left: auto; }
.rt-tool .dd-menu[aria-hidden="true"]{ display:none; }
.rt-tool .dd-menu li{
  list-style:none;
  padding:10px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size: 14px;
  text-align: left;
}
.rt-tool .dd-menu li[aria-selected="true"]{ background:#f1f5f9; }
.rt-tool .dd-menu li:hover{ background:#f8fafc; }

/* ================= RESULTATEN ================= */
.rt-tool .results-card{
  position: relative;
  z-index: 1;
  margin-top: 0;
  background:#fff;
  border:1px solid var(--card-bd);
  border-radius: 14px;
  padding: 20px;
  padding-top: 14px;
  padding-bottom: 14px;

  --rate-col-w: calc(var(--btn-min-w-ltv) * var(--ui-scale));
  --rate-col-gap: 12px;

  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rt-tool .results-card::-webkit-scrollbar{ width: 0; height: 0; }

.rt-tool .results-title{
  margin: 8px 0 18px 0;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
}
.rt-tool .nowrap{ white-space: nowrap; }

.rt-tool .results-empty{
  margin: -8px 0 18px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

.rt-tool .results-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.rt-tool .result-row{
  background:#fff;
  border:1px solid var(--card-bd);
  border-radius:12px;
  padding:0px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transition: box-shadow .2s ease, transform .2s ease;
}

.rt-tool .results-disclaimer{
  margin-top: 12px;
  text-align: right;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  padding-right: 10px;
}

/* Provider */
.rt-tool .provider{
  display:flex;
  align-items:center;
  gap:42px;
  min-width: 220px;
}

/* Logo */
.rt-tool .logo{
  width:92px;
  height:92px;
  flex: 0 0 92px;
  border-radius:0;
  background: transparent;
  border: 0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rt-tool .logo img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.rt-tool .provider-name{
  font-size:18px;
  color:#1f2937;
  font-weight:600;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}

/* Rentes */
.rt-tool .rates{
  margin-left: 0;
  display:grid;
  grid-template-columns: repeat(5, var(--rate-col-w));
  column-gap: var(--rate-col-gap);
  justify-content:flex-start;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
}
.rt-tool .rate{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height: 0;
  height: auto;
  font-variant-numeric: tabular-nums;
  color:#111827;
}
.rt-tool .rate.is-selected{
  background: var(--fc-pill-active) !important;
  color: var(--fc-pill-active-text) !important;
  height: calc(var(--btn-h) * var(--ui-scale));
  min-height: calc(var(--btn-h) * var(--ui-scale));
  border-radius: 999px;
  padding: 0 calc(var(--dd-pad-x) * var(--ui-scale));
  font-size: calc(var(--fs-btn) * var(--ui-scale));
  font-weight: 600;
}

/* CTA */
.rt-tool .btn-cta .cta-long { display: inline; }
.rt-tool .btn-cta .cta-short { display: none; }
.rt-tool .btn-cta{
  margin-left:auto;
  background:var(--cta-bg);
  color:var(--cta-text);
  font-size: 16px;
  line-height: 1.1;
  padding: 12px 27px;
  min-height: var(--cta-min-h);
  border-radius:999px;
  font-weight:700;
  border:0;
  cursor:pointer;
  flex: 0 1 auto;
  max-width: 100%;
}
.rt-tool .btn-cta:hover{ filter: brightness(0.95); }

/* Boundary + sticky CTA */
.rt-tool .results-area{
  position: relative;
  padding-bottom: calc(16px + 52px + 16px);
}

/* ===== Resultaten — mobile ===== */
@media (max-width: 1099px){
  .rt-tool .rates{ display: flex; justify-content: center; }
  .rt-tool .rates .rate{ display: none; }
  .rt-tool .rates .rate.is-selected{ display: inline-flex; border:0 !important; white-space: nowrap; }

  .rt-tool .results-list .result-row{
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 14px;
    align-items: center;
  }
  .rt-tool .results-list .rates{ margin-left: 0 !important; display:flex; justify-content:center; }
  .rt-tool .results-list .btn-cta{ justify-self: end; }
}

@media (max-width: 1099px) and (min-width: 430px){
  .rt-tool .results-card{ --rate-col-w-mobile: 86px; }
  .rt-tool .result-row{
    display: grid !important;
    grid-template-columns: 92px minmax(0,1fr) var(--rate-col-w-mobile, 96px) auto;
    column-gap: 10px;
    align-items: center;
    overflow: hidden;
  }
  .rt-tool .provider{ display: contents; }
  .rt-tool .logo{ grid-column: 1; }
  .rt-tool .provider-name{
    grid-column: 2;
    padding-left: 28px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .rt-tool .rates{
    grid-column: 3;
    justify-self: center;
    width: var(--rate-col-w-mobile, 96px);
    margin-left: 0;
    display: grid;
    grid-template-columns: auto;
  }
  .rt-tool .btn-cta{ grid-column: 4; justify-self: end; white-space: nowrap; }
}

/* ===== Resultaten — provider naam verbergen vanaf <= 705px ===== */
@media (max-width: 705px){
  .rt-tool .provider-name{
    display: none !important;
  }
}

@media (max-width: 430px){
  .rt-tool .result-row{
    display: grid;
    grid-template-columns: 64px 1fr max-content;
    align-items: center;
    gap: 14px;
    overflow: hidden;
  }
  .rt-tool .provider{ min-width:0; width:56px; }
  .rt-tool .provider-name{ display:none; }
  .rt-tool .rates{ justify-self:center; width: var(--rate-col-w-mobile, 96px); margin-left: 0; }
  .rt-tool .btn-cta{ justify-self:end; white-space:nowrap; }
}

@media (max-width: 980px){
  .rt-tool .filter-card{ gap: calc((var(--gap-group) - 2px) * var(--ui-scale)); }
}

@media (max-width: 768px){
  .rt-tool .filter-card{ flex-wrap: wrap; row-gap: calc(var(--gap-mobile-row) * var(--ui-scale)); }
  .rt-tool .group-energy{ margin-left: 0; }

  .rt-tool .filter-card.is-mobile .group-label{ font-size: calc(var(--fs-title) - 2px); }

  .rt-tool .filter-card.is-mobile .group-energy{ position: relative; padding-top: 0; }
  .rt-tool .filter-card.is-mobile .group-energy .group-label{
    position: static;
    width: 100%;
    text-align: right;
    pointer-events: auto;
  }
  .rt-tool .filter-card.is-mobile .group-mortgage .dd-btn{ width: calc(var(--mortgage-mobile-w) * var(--ui-scale)); }
  .rt-tool .filter-card.is-mobile .group-rvp .dd-btn{ width: calc(var(--rvp-mobile-w) * var(--ui-scale)); }
  .rt-tool .filter-card.is-mobile .group-energy .dd-btn{ width: calc(var(--energy-mobile-w) * var(--ui-scale)); }

  .rt-tool .logo{ width:64px; height:64px; flex:0 0 64px; }

  .rt-tool .btn-cta{
    white-space: nowrap;
    line-height: 1;
    min-height: calc(var(--btn-h) * var(--ui-scale));
    padding: 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .rt-tool .btn-cta:hover{ filter: brightness(0.80); }
  .rt-tool .btn-cta br{ display:none; }
}

.rt-tool .filter-card.is-mobile .group-ltv .group-label{
  font-size: 0;
  line-height: 0;
  padding-left: 0;
}
.rt-tool .filter-card.is-mobile .group-ltv .group-label::before{
  content: var(--ltv-label-text);
  font-size: calc(var(--fs-title) - 2px);
  line-height: 1.2;
  padding-left: 2px;
  display: inline-block;
  color: var(--fc-label);
  white-space: nowrap;
}

.rt-tool .filter-card .group-ltv .group-label .ltv-suffix{ display: inline; }
.rt-tool .filter-card.is-mobile .group-ltv .group-label .ltv-suffix{
  font-size: calc(var(--fs-title) - 2px);
  line-height: 1.2;
  color: var(--fc-label);
}

@media (max-width: 800px){
  .rt-tool .filter-card .group-ltv .group-label .ltv-suffix{ display: none !important; }
}
@media (max-width: 768px){
  .rt-tool .filter-card .group-ltv .group-label .ltv-suffix{ display: inline !important; }
}
@media (max-width: 400px){
  .rt-tool .filter-card .group-ltv .group-label .ltv-suffix{ display: none !important; }
}

@media (max-width: 532px){
  .rt-tool .btn-cta{
    font-size: 14px;
    min-height: 44px;
    padding: 10px 18px;
    width: clamp(92px, 26vw, 118px);
    max-width: 100%;
  }
  .rt-tool .btn-cta .cta-long{ display:none; }
  .rt-tool .btn-cta .cta-short{ display:inline; }
}

@media (max-width: 453px){
  .rt-tool .rate.is-selected{
    height: 40px;
    min-height: 40px;
    padding: 0 10px;
    font-size: 14px;
  }
  .rt-tool .rates{ display:flex; justify-content:center; }
  .rt-tool .rates .rate{ display:none; }
  .rt-tool .rates .rate.is-selected{ display:inline-flex; }
  .rt-tool .btn-cta{ width: clamp(86px, 24vw, 108px); padding: 10px 16px; }
}

@media (max-width: 423px){
  .rt-tool .results-list .result-row{
    gap: 8px;
    column-gap: 8px;
    padding: 0 12px;
    grid-template-columns: 64px 1fr max-content;
  }
}

@media (max-width: 379.5px){
  .rt-tool .logo{ width:45px; height:45px; flex:0 0 45px; }
  .rt-tool .rates .rate.is-selected{
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 10pt !important;
  }
  .rt-tool .results-list .result-row{
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) max-content;
    column-gap: 10px;
    align-items: center;
  }
  .rt-tool .results-list .btn-cta{
    font-size: 13px;
    min-height: 30px;
    padding: 0 10px;
    width: 80px;
  }
}

/* ===== Page-load fade-in voor de hele tool ===== */
.rt-tool .rt-fade-wrap{
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);

  transition: opacity 900ms ease;
  opacity: 1;
}
.rt-tool .rt-fade-init{ opacity: 0; }

/* ===== Fade-out bij navigatie via header menu ===== */
body.rt-page-fadeout .rt-tool .rt-fade-wrap{ opacity: 0; }

/* ===============================
   SAFETY: tool content nooit permanent hidden
   =============================== */
body.rt-tool-page .rt-tool .page{
  display: flex !important;
}
body.rt-tool-page .rt-tool [data-fade]{
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ===== Hard guard: tool content mag nooit verdwijnen door late WP overrides ===== */
body.rt-tool-page .rt-tool .rt-fade-wrap,
body.rt-tool-page .rt-tool .page,
body.rt-tool-page .rt-tool #filterCard,
body.rt-tool-page .rt-tool .results-card,
body.rt-tool-page .rt-tool #resultsList,
body.rt-tool-page .rt-tool #resultsTitle{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Als WP ergens gap reset: */
body.rt-tool-page .rt-tool .page{
  gap: var(--page-gap, 14px) !important;
}

/* En dit voorkomt dat een generieke font rule je rates “omzet” */
body.rt-tool-page .rt-tool .rate{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important;
}

/* iOS/Safari: voorkom “white tiles” tijdens opacity animaties */
.rt-tool .rt-fade-wrap{
  background: #f7f7fb;              /* zelfde als .rt-tool achtergrond */
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
}

/* Class-based fade (stabieler dan inline style transitions op iOS) */
.rt-tool .rt-fade-wrap{
  opacity: 1;
  transition: opacity var(--fx-out) ease;
}
.rt-tool .rt-fade-wrap.rt-fade-out{
  opacity: 0;
  transition-duration: var(--fx-out);
}
.rt-tool .rt-fade-wrap.rt-fade-in{
  opacity: 1;
  transition-duration: var(--fx-in);
}

/* =========================================================
   CTA v9 — DEFINITIEF FIX
   Fixes:
   - Centering (always)
   - Fixed bottom (always)
   - No duplicate “unstyled” button (prevents flow rendering)
   - No scroll-to-top on click side effects (CSS side)
   - Page scroll allowed on desktop/portrait; lock ONLY landscape mobile
   - Title slightly lower
   - Close appears only after roll-open finishes
   ========================================================= */

:root{
  --cta-dur: 1000ms;
  --cta-ease: cubic-bezier(.45,0,.55,1);

  --cta-open-h: 640px;
  --cta-closed-w: 360px;
  --cta-radius: 26px;

  --cta-title-shift: -6px; /* minder hoog dan -10px */
  --cta-header-offset: 84px;
}

/* Wrapper: ID-based, NOT scoped to .rt-tool (because we move it to body) */
#stickyCta{
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;

  transform: translateX(-50%) !important;
  margin: 0 !important;

  z-index: 999999 !important;

  /* belangrijk: wrapper hoeft niet 100% breed te zijn */
  width: auto !important;
  pointer-events: none;

  translate: 0 var(--cta-push, 0px);
  transition: translate 120ms linear;
}

/* Shell */
#stickyCtaShell{
  pointer-events: auto;
  position: relative;

  /* fixed “button width” */
  width: var(--cta-closed-w);
  max-width: calc(100vw - 24px);

  background: var(--sticky-cta-bg);
  color: var(--sticky-cta-text);

  border: 0;
  border-radius: var(--cta-radius);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
  overflow: hidden;

  max-height: 52px;
  transition: max-height var(--cta-dur) var(--cta-ease);
  will-change: max-height;

  filter: none !important;
  transform: none !important;
}

#stickyCta.is-open #stickyCtaShell{
  max-height: var(--cta-open-h);
}

/* Hover only when closed */
#stickyCta:not(.is-open) #stickyCtaShell:hover{ filter: brightness(1.06); }
#stickyCta.is-open #stickyCtaShell:hover{ filter: none !important; }

/* HEAD */
#stickyCtaBtn{
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;

  min-height: 52px;
  padding: 14px 22px;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#stickyCta .cta-head-title{
  font-weight: 850;
  font-size: 16px;
  line-height: 1.15;
  color: #0f172a;
  text-align: center;
  transition: transform var(--cta-dur) var(--cta-ease);
}

#stickyCta .cta-head-arrow{
  position: absolute;
  left: 22px;          /* <-- links i.p.v. rechts */
  right: auto;
  top: 50%;
  transform: translateY(-50%);

  width: 26px;
  height: 14px;
  background-color: #0f172a;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20'%3E%3Cpath d='M0 10h18 M22 0l12 10-12 10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20'%3E%3Cpath d='M0 10h18 M22 0l12 10-12 10' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;

  /* <-- fade precies gelijk met uitrollen */
  transition: opacity var(--cta-dur) linear;
}

/* title/arrow motion on open */
#stickyCta.is-open .cta-head-title{ transform: translateY(var(--cta-title-shift)); }
#stickyCta.is-open .cta-head-arrow{
  opacity: 0;
}

/* CLOSE: only visible after roll-open finished */
#ctaClose{
  position: absolute;
  top: 10px;
  right: 10px;

  /* 40% kleiner (punt 5) */
  width: 26px;
  height: 26px;

  border-radius: 999px;
  border: 0;

  background: rgba(255,255,255,.75);
  box-shadow: 0 6px 18px rgba(15,23,42,.18);
  cursor: pointer;

  opacity: 0;
  pointer-events: none;

  /* start meteen met infaden en klaar bij einde uitrollen */
  transition: opacity var(--cta-dur) linear;
}

/* kruis tekenen */
#ctaClose::before,
#ctaClose::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 14px;     /* mee schalen */
  height: 2.2px;
  background: rgba(15,23,42,.92);
  border-radius: 999px;
  transform-origin: center;
}
#ctaClose::before{ transform: translate(-50%,-50%) rotate(45deg); }
#ctaClose::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* ✅ zichtbaar vanaf start van open */
#stickyCta.is-open #ctaClose{
  opacity: 1;
}

/* ✅ pas klikbaar als open animatie klaar is */
#stickyCta.is-open-done #ctaClose{
  pointer-events: auto;
}

/* FORM */
#stickyCtaForm{
  /* altijd zichtbaar, zodat het bij sluiten “mee zakt” */
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;

  padding: 0 22px 22px;
  display: grid;
  gap: 14px;
}

/* alleen interactie uitzetten wanneer gesloten */
#stickyCta:not(.is-open) #stickyCtaForm{
  pointer-events: none;
}
#stickyCta.is-open #stickyCtaForm{
  pointer-events: auto;
}

#stickyCta .cta-row{ display: grid; gap: 6px; }
#stickyCta .cta-label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(15,23,42,.90);
}

#stickyCtaShell .cta-input{
  width: 100%;
  display: block;
  border: 1px solid rgba(15,23,42,.16);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  background: #fff;
}
#stickyCtaShell .cta-input:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* phone/email switch */
#stickyCtaShell .cta-pane{ display:none; }
#stickyCta:not(.is-mail) #stickyCtaShell .cta-pane[data-cta-mode="call"]{ display:block; }
#stickyCta.is-mail       #stickyCtaShell .cta-pane[data-cta-mode="mail"]{ display:block; }

/* radio */
#stickyCtaShell .cta-radio{
  display:grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
}
#stickyCtaShell .cta-radio-btn{
  position: relative;
  display:grid;
  place-items:center;
  padding: 10px 10px;
  cursor:pointer;
  user-select:none;
  font-weight: 900;
  font-size: 14px;
  color: rgba(15,23,42,.86);
  background: rgba(100,202,185,.18);
  transition: background .18s ease, color .18s ease;
}
#stickyCtaShell .cta-radio-btn input{ position:absolute; opacity:0; pointer-events:none; }
#stickyCtaShell .cta-radio-btn:has(input:checked){
  background: var(--brand-green);
  color: #0B1220;
}

/* submit */
#ctaSubmit{
  border: 0;
  border-radius: 999px;
  padding: 14px 18px;
  font-weight: 900;
  cursor: pointer;
  background: var(--cta-bg, #6A4481);
  color: #fff;
  margin-top: 10px;
  transition: filter .15s ease, background .15s ease;
}
#ctaSubmit:hover{ filter: brightness(1.08); }
#ctaSubmit.is-error{ background: #DC2626 !important; }
#ctaSubmit.is-success{ background: var(--brand-green) !important; color:#0B1220 !important; }

/* =========================
   Landscape mobile fullscreen (ONLY panel area orange)
   - No global background changes
   - Only lock scroll in this mode
   ========================= */
@media (orientation: landscape) and (max-width: 1024px){
  html.cta-lock,
  body.cta-lock{
    overflow: hidden !important;
    height: 100% !important;
  }

  #stickyCta.is-open{
    left: 0;
    transform: none;
    bottom: 0;
    width: 100%;
    height: 100%;
  }

  #stickyCta.is-open #stickyCtaShell{
    position: fixed;
    left: 0;
    right: 0;
    top: var(--cta-header-offset);
    bottom: 0;

    width: 100% !important;
    max-width: 100% !important;

    border-radius: 0;
    max-height: none !important;
  }

  #stickyCta.is-open #stickyCtaForm{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100dvh - var(--cta-header-offset) - 72px);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* =========================
   HARD KILL legacy leftovers (fix #4)
   If an old CTA exists somewhere else, hide it.
   ========================= */
.rt-tool .sticky-cta,
.rt-tool .sticky-cta-wrap{
  display: none !important;
}

/* =========================
   Page fade (rentetool template)
   ========================= */
.rt-page-fade{
  opacity: 1;
  transition: opacity 900ms ease;
}
.rt-page-fade.rt-fade-init{
  opacity: 0;
}

/* Fade out on navigate */
html.rt-page-fadeout .rt-page-fade,
body.rt-page-fadeout .rt-page-fade{
  opacity: 0;
}

/* CTA fades too (even if moved to <body>) */
#stickyCta{
  opacity: 1;
  transition: opacity 900ms ease;
}
.rt-page-fade.rt-fade-init #stickyCta{
  opacity: 0;
}
html.rt-page-fadeout #stickyCta,
body.rt-page-fadeout #stickyCta{
  opacity: 0;
  pointer-events: none;
}

/* checkbox row */
#stickyCta .cta-check{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(15,23,42,.86);
  user-select: none;
}
#stickyCta .cta-check input{
  width: 18px;
  height: 18px;
  accent-color: var(--brand-green);
}