/* Slimverspreiden DM planner — gebruikt de gedeelde .svon-tokens (svon.css). */
.svp-dm-planner{
  font-family:'Hanken Grotesk',system-ui,sans-serif !important; color:var(--ink);
  max-width:var(--maxw); margin:0 auto; font-size:16px; line-height:1.5;
}
.svp-dm-planner *{box-sizing:border-box;}
.svp-dm-planner h3,.svp-dm-planner h4{font-family:'Bricolage Grotesque',sans-serif !important; margin:0;}

/* Tabs */
.svp-dm-planner .svp-tabbar{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.svp-dm-planner .svp-tab{font-family:inherit !important; font-weight:600; font-size:15px; padding:10px 18px;
  border:1.5px solid var(--line); background:var(--white); color:var(--muted-2);
  border-radius:999px; cursor:pointer; transition:.15s;}
.svp-dm-planner .svp-tab.is-active{background:var(--ink); color:#fff; border-color:var(--ink);}

/* Layout */
.svp-dm-planner .svp-grid{display:grid; grid-template-columns:1fr 320px; gap:22px; align-items:start;}
.svp-dm-planner .svp-main{background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.svp-dm-planner .svp-step-head{display:flex; align-items:center; gap:14px; padding:14px 20px;
  background:linear-gradient(90deg,var(--magenta-700),var(--magenta)); color:#fff;}
.svp-dm-planner .svp-num{font-family:'IBM Plex Mono',monospace !important; font-weight:600; width:28px; height:28px;
  border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;}
.svp-dm-planner .svp-step-head h3{font-size:18px; color:#fff;}

.svp-dm-planner .svp-pane{padding:20px;}
.svp-dm-planner .svp-map{height:440px; width:100%; border-radius:10px; border:1px solid var(--line); background:var(--mist);}
.svp-dm-planner .svp-maphelp{font-size:13.5px; color:var(--muted); margin:10px 0 0;}
.svp-dm-planner .svp-hint{background:var(--magenta-050); border:1px solid #F3C9D9; border-radius:10px;
  padding:16px; font-size:14.5px; color:var(--muted-2);}
.svp-dm-planner .svp-hint code{background:#fff; padding:2px 6px; border-radius:4px; font-size:13px;}

/* Filters */
.svp-dm-planner .svp-filters{margin-top:22px; border-top:1px solid var(--line); padding-top:18px;}
.svp-dm-planner .svp-filters h4{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:14px;}
.svp-dm-planner .svp-toggle{display:flex; align-items:center; gap:10px; font-size:15px; margin-bottom:14px; cursor:pointer;}
.svp-dm-planner .svp-range{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:15px;}
.svp-dm-planner .svp-range input{width:130px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit !important; font-size:15px;}

/* Summary */
.svp-dm-planner .svp-summary{position:sticky; top:20px; background:var(--ink); color:#EAF0EA;
  border-radius:14px; padding:22px;}
.svp-dm-planner .svp-st{font-family:'IBM Plex Mono',monospace !important; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#8FB3A0;}
.svp-dm-planner .svp-summary h4{color:#fff; font-size:18px; margin:6px 0 16px;}
.svp-dm-planner .svp-line{display:flex; justify-content:space-between; align-items:baseline;
  padding:10px 0; border-top:1px solid rgba(255,255,255,.10);}
.svp-dm-planner .svp-line b{color:#fff; font-weight:600; font-size:15px;}
.svp-dm-planner .svp-line span{color:#A9C0B2; font-size:14px;}
.svp-dm-planner #svpOplage{font-family:'IBM Plex Mono',monospace !important; color:#fff; font-weight:500;}
.svp-dm-planner .svp-total{margin-top:4px; padding-top:12px; border-top:1px solid rgba(255,255,255,.22);}
.svp-dm-planner .svp-total b:last-child{font-family:'IBM Plex Mono',monospace !important; color:#EC5A8A;}
.svp-dm-planner .svp-cta{width:100%; margin-top:18px; padding:13px; border:none; border-radius:999px;
  background:var(--magenta); color:#fff; font-family:inherit !important; font-weight:700; font-size:15px; cursor:pointer;}
.svp-dm-planner .svp-cta:disabled{background:#5A6B60; cursor:not-allowed;}
.svp-dm-planner .svp-tag{margin-top:12px; font-family:'IBM Plex Mono',monospace !important; font-size:11px; color:#7E9A8A; min-height:14px;}

/* Selected PC4 pulse */
.svp-dm-planner .svp-map .leaflet-interactive.svp-sel{}

@media(max-width:820px){
  .svp-dm-planner .svp-grid{grid-template-columns:1fr;}
  .svp-dm-planner .svp-summary{position:static;}
}

/* ── Wizard: stappen 2–4 ── */
.svp-dm-planner .svp-step{padding:20px;}
.svp-dm-planner .svp-step[data-step="1"]{padding:0;}
.svp-dm-planner .svp-step[data-step="1"] .svp-tabbar{padding:16px 20px 0;}
.svp-dm-planner .svp-step[data-step="1"] .svp-pane{padding:16px 20px 20px;}

.svp-dm-planner .svp-options{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px;}
.svp-dm-planner .svp-options--delivery{grid-template-columns:repeat(3,1fr);}
.svp-dm-planner .svp-opt{position:relative; text-align:left; background:var(--white); border:1.5px solid var(--line);
  border-radius:12px; padding:16px 14px; cursor:pointer; font-family:inherit !important; display:flex; flex-direction:column; gap:4px; transition:.15s;}
.svp-dm-planner .svp-opt:hover{border-color:var(--magenta-600);}
.svp-dm-planner .svp-opt.is-sel{border-color:var(--magenta); background:var(--magenta-050);}
.svp-dm-planner .svp-opt-check{position:absolute; top:-10px; right:-10px; width:24px; height:24px; border-radius:50%;
  background:var(--ink); color:#fff; font-size:13px; display:none; align-items:center; justify-content:center;}
.svp-dm-planner .svp-opt.is-sel .svp-opt-check{display:flex;}
.svp-dm-planner .svp-opt-naam{font-family:'Bricolage Grotesque',sans-serif !important; font-weight:700; font-size:15px;}
.svp-dm-planner .svp-opt-desc{font-size:13px; color:var(--muted);}
.svp-dm-planner .svp-opt-prijs{font-family:'IBM Plex Mono',monospace !important; font-size:12.5px; color:var(--magenta-600); margin-top:4px;}

.svp-dm-planner .svp-sub{margin-top:18px; border-top:1px solid var(--line); padding-top:16px; font-size:15px;}
.svp-dm-planner .svp-sub select{margin-top:6px; display:block; padding:9px 12px; border:1px solid var(--line); border-radius:8px; font-family:inherit !important; font-size:15px; min-width:220px;}

.svp-dm-planner .svp-upsells{margin-top:18px; border-top:1px solid var(--line); padding-top:16px; display:flex; flex-direction:column; gap:12px;}
.svp-dm-planner .svp-upsells em{font-family:'IBM Plex Mono',monospace !important; font-style:normal; color:var(--muted); font-size:13px;}

.svp-dm-planner .svp-ref{margin-top:18px; font-size:15px;}
.svp-dm-planner .svp-ref label{display:block; font-weight:600;}
.svp-dm-planner .svp-ref input{margin-top:6px; width:100%; max-width:380px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-family:inherit !important; font-size:15px;}
.svp-dm-planner .svp-req{color:var(--magenta);}

.svp-dm-planner .svp-actions{margin-top:20px; display:flex; gap:12px; flex-wrap:wrap;}
.svp-dm-planner .svp-btn{font-family:inherit !important; font-weight:700; font-size:15px; padding:12px 24px; border-radius:999px; border:2px solid transparent; cursor:pointer;}
.svp-dm-planner .svp-btn--primary{background:var(--magenta); color:#fff; border-color:var(--magenta);}
.svp-dm-planner .svp-btn--primary:disabled{background:#C5CFC6; border-color:#C5CFC6; cursor:not-allowed;}
.svp-dm-planner .svp-btn--ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.svp-dm-planner .svp-done{margin-top:18px; padding:16px; background:#EAF4EE; border:1px solid #BFE0CC; border-radius:10px; font-size:14.5px;}
.svp-dm-planner .svp-note{color:var(--muted); font-size:13px;}

.svp-dm-planner .svp-nav{display:flex; justify-content:space-between; gap:12px; padding:16px 20px; border-top:1px solid var(--line); background:var(--mist);}
.svp-dm-planner .svp-nav-btn{font-family:inherit !important; font-weight:700; font-size:15px; padding:11px 22px; border-radius:999px; cursor:pointer; border:2px solid var(--line); background:#fff; color:var(--ink);}
.svp-dm-planner .svp-next{background:var(--ink); color:#fff; border-color:var(--ink); margin-left:auto;}

.svp-dm-planner .svp-demo{margin-top:10px; font-size:11px; color:#8FB3A0; font-family:'IBM Plex Mono',monospace !important;}

@media(max-width:820px){ .svp-dm-planner .svp-options--delivery{grid-template-columns:1fr;} }