/* Lettertypes zitten in de plugin zelf (geen Google Fonts nodig) */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/montserrat-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/montserrat-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/montserrat-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/montserrat-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/playfair-display-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/playfair-display-latin-800-normal.woff2") format("woff2")}

/* Alle stijlen zitten onder .dsd zodat ze niet botsen met de rest van de website */
#dsd{
  container-type:inline-size; container-name:dsd;
  --navy:#1F4E78; --navy-d:#163A5A; --navy-l:#E8EEF4; --ink:#1B2430; --muted:#5B6675;
  --line:#D6DEE7; --bg:#F5F7FA; --white:#fff; --groen:#2E5E3A; --zwart:#1E1E1E; --antraciet:#3B3F44; --grijs:#A7ABAF;
  --warn-bg:#FFF4E5; --warn:#9A5B00;
  font-family:"Montserrat",Arial,sans-serif; color:var(--ink); background:var(--bg);
  line-height:1.5; font-size:15px; -webkit-font-smoothing:antialiased;
  max-width:1120px; margin:0 auto; border-radius:6px; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
#dsd *{box-sizing:border-box}
#dsd .dsd-head{background:var(--navy); color:#fff; padding:22px 28px; display:flex; align-items:center; gap:24px; flex-wrap:wrap}
#dsd .dsd-head img{height:64px; width:auto; display:block}
#dsd .dsd-head .t{border-left:1px solid rgba(255,255,255,.35); padding-left:24px}
#dsd .dsd-head h1{font-family:"Playfair Display",Georgia,serif; font-weight:800; font-size:28px; margin:0; letter-spacing:.5px; line-height:1.15}
#dsd .dsd-head p{margin:4px 0 0; font-size:13px; letter-spacing:2px; text-transform:uppercase; opacity:.85}
#dsd .dsd-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:24px; padding:24px 28px 28px}
@container dsd (max-width:860px){#dsd .dsd-body{grid-template-columns:minmax(0,1fr); padding:16px} #dsd .dsd-head{padding:18px 16px} #dsd .dsd-head .t{border-left:0;padding-left:0}}
#dsd .dsd-card{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:20px}
#dsd .dsd-step{padding:16px 0; border-bottom:1px solid var(--line)}
#dsd .dsd-step:first-child{padding-top:0}
#dsd .dsd-step:last-child{border-bottom:0; padding-bottom:0}
#dsd .dsd-label{display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; margin-bottom:10px; color:var(--navy)}
#dsd .dsd-num{width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:12px; display:inline-flex; align-items:center; justify-content:center; flex:none}
#dsd .dsd-hint{font-size:12px; color:var(--muted); margin-top:6px}
#dsd .dsd-seg{display:flex; flex-wrap:wrap; gap:8px}
#dsd .dsd-seg button{
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; background:#fff; color:var(--ink);
  border:1.5px solid var(--line); border-radius:4px; padding:9px 14px; display:inline-flex; align-items:center; gap:8px;
  transition:border-color .15s, background .15s;
}
#dsd .dsd-seg button:hover:not(:disabled){border-color:var(--navy)}
#dsd .dsd-seg button[aria-pressed="true"]{border-color:var(--navy); background:var(--navy); color:#fff}
#dsd .dsd-seg button:disabled{opacity:.4; cursor:not-allowed}
#dsd .dsd-seg.big button{flex:1 1 180px; flex-direction:column; align-items:flex-start; padding:12px 14px; gap:2px}
#dsd .dsd-seg.big small{font-weight:500; font-size:12px; opacity:.8}
#dsd .dsd-sw{width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.2); flex:none}
#dsd button[aria-pressed="true"] .dsd-sw{border-color:#fff}
#dsd .dsd-row{display:flex; gap:16px; flex-wrap:wrap}
#dsd .dsd-row > div{flex:1 1 160px}
#dsd .dsd-field label{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
#dsd .dsd-input{display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:4px; overflow:hidden; background:#fff}
#dsd .dsd-input:focus-within{border-color:var(--navy)}
#dsd .dsd-input input{font:inherit; font-weight:600; border:0; padding:9px 12px; width:100%; min-width:0; outline:none; background:transparent; color:var(--ink)}
#dsd .dsd-input span{padding:9px 12px; background:var(--navy-l); color:var(--muted); font-size:13px; display:flex; align-items:center}
#dsd .dsd-input button{font:inherit; font-weight:700; border:0; background:var(--navy-l); color:var(--navy); width:40px; cursor:pointer}
#dsd .dsd-input button:hover{background:#d6e1ec}
#dsd .dsd-input.step input{text-align:center}
#dsd .dsd-opt{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 0}
#dsd .dsd-opt + .dsd-opt{border-top:1px dashed var(--line)}
#dsd .dsd-opt .txt b{display:block; font-size:14px}
#dsd .dsd-opt .txt span{font-size:12px; color:var(--muted)}
#dsd .dsd-sub{margin-top:10px}
#dsd .dsd-sw-toggle{position:relative; width:44px; height:24px; flex:none; margin-top:2px}
#dsd .dsd-sw-toggle input{opacity:0; width:0; height:0; position:absolute}
#dsd .dsd-sw-toggle i{position:absolute; inset:0; background:#C5CDD6; border-radius:12px; cursor:pointer; transition:background .15s}
#dsd .dsd-sw-toggle i::after{content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.2)}
#dsd .dsd-sw-toggle input:checked + i{background:var(--navy)}
#dsd .dsd-sw-toggle input:checked + i::after{transform:translateX(20px)}
#dsd .dsd-sw-toggle input:focus-visible + i{outline:2px solid var(--navy); outline-offset:2px}
#dsd .dsd-hidden{display:none !important}

#dsd .dsd-res h2{font-family:"Playfair Display",Georgia,serif; font-size:22px; margin:0 0 4px; color:var(--navy)}
#dsd .dsd-sum{font-size:13px; color:var(--muted); margin:0 0 16px}
#dsd .dsd-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px}
#dsd .dsd-kpi{background:var(--navy-l); border-radius:4px; padding:10px 12px}
#dsd .dsd-kpi b{display:block; font-size:20px; color:var(--navy); line-height:1.2}
#dsd .dsd-kpi span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px}
#dsd .dsd-warn{background:var(--warn-bg); color:var(--warn); border-left:3px solid #E69A1F; padding:10px 12px; font-size:13px; border-radius:3px; margin-bottom:12px}
#dsd .dsd-tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:4px}
#dsd table{width:100%; border-collapse:collapse; font-size:13px}
#dsd th{background:var(--navy); color:#fff; text-align:left; font-weight:600; padding:9px 10px; white-space:nowrap}
#dsd td{padding:8px 10px; border-top:1px solid var(--line); vertical-align:top}
#dsd tr.grp td{background:var(--navy-l); font-weight:700; color:var(--navy); font-size:12px; text-transform:uppercase; letter-spacing:.5px; padding:6px 10px}
#dsd td.code{font-family:ui-monospace,Consolas,monospace; font-size:12.5px; white-space:nowrap; color:var(--navy-d); font-weight:600}
#dsd td.qty{text-align:right; font-weight:700; white-space:nowrap}
#dsd td.qty small{font-weight:500; color:var(--muted)}
#dsd td .why{display:block; font-size:11.5px; color:var(--muted)}
#dsd .dsd-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
#dsd .dsd-btn{font:inherit; font-weight:600; font-size:14px; cursor:pointer; border-radius:4px; padding:10px 16px; border:1.5px solid var(--navy); background:#fff; color:var(--navy); text-decoration:none; display:inline-flex; align-items:center}
#dsd .dsd-btn.primary{background:var(--navy); color:#fff}
#dsd .dsd-btn:hover{background:var(--navy-d); color:#fff; border-color:var(--navy-d)}
#dsd .dsd-note{font-size:12px; color:var(--muted); margin-top:14px}
#dsd .dsd-toast{font-size:13px; color:var(--groen); align-self:center}
#dsd .dsd-order{margin-top:18px; padding-top:18px; border-top:2px solid var(--navy)}
#dsd .dsd-order h3{font-family:"Playfair Display",Georgia,serif; font-size:18px; margin:0 0 6px; color:var(--navy)}
#dsd .dsd-order .dsd-field{margin-bottom:12px}
#dsd .dsd-order .dsd-row{gap:12px}
#dsd .dsd-input textarea{font:inherit; border:0; padding:9px 12px; width:100%; outline:none; resize:vertical; background:transparent; color:var(--ink)}
#dsd .dsd-input.bad{border-color:#C00000}
#dsd .dsd-err{color:#C00000; font-size:13px; min-height:0}
#dsd .dsd-err:not(:empty){margin-bottom:8px}
#dsd .dsd-err a{color:#C00000}
#dsd .dsd-order{position:relative}
#dsd .dsd-ok{background:#EAF4EC; border-left:3px solid var(--groen); padding:14px 16px; border-radius:3px}
#dsd .dsd-ok h3{margin:0 0 4px; color:var(--groen)}
#dsd .dsd-ok p{margin:0}

@media print{
  body *{visibility:hidden !important}
  #dsd, #dsd *{visibility:visible !important}
  #dsd{position:absolute; left:0; top:0; width:100%}
  #dsd{box-shadow:none; max-width:none; background:#fff}
  #dsd .dsd-form,#dsd .dsd-actions,#dsd .dsd-order{display:none !important}
  #dsd .dsd-body{display:block; padding:16px 0}
  #dsd .dsd-card{border:0; padding:0}
  #dsd .dsd-head{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  #dsd th,#dsd tr.grp td,#dsd .dsd-kpi{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* Neutraliseer stijlen van het WordPress-thema binnen de calculator */
#dsd button, #dsd input, #dsd textarea{font-family:inherit; text-transform:none; letter-spacing:normal; box-shadow:none; margin:0; line-height:1.3; min-height:0; height:auto; text-decoration:none}
#dsd h1, #dsd h2, #dsd h3, #dsd p{text-transform:none; letter-spacing:normal}
#dsd table{margin:0; border:0; table-layout:auto}
#dsd th, #dsd td{border-left:0; border-right:0; border-bottom:0}
#dsd img{max-width:none; border:0; box-shadow:none}
#dsd .dsd-input input, #dsd .dsd-input textarea{border:0 !important; background:transparent !important; box-shadow:none !important; border-radius:0}
#dsd b, #dsd strong{font-weight:700}
#dsd h2, #dsd h3{font-weight:700; line-height:1.2}

@container dsd (max-width:520px){#dsd td, #dsd th{padding:7px 6px} #dsd td.code{white-space:normal; word-break:break-word; font-size:11px; width:30%} #dsd td .why{display:none} #dsd .dsd-kpi b{font-size:16px}}

/* Slanke hoofding (zonder logo) */
#dsd .dsd-head{padding:18px 24px; gap:20px}
#dsd .dsd-head .t{border-left:0; padding-left:0}
#dsd .dsd-head img + .t{border-left:1px solid rgba(255,255,255,.35); padding-left:20px}
#dsd .dsd-head img{height:48px}
#dsd .dsd-head h1{font-size:24px; color:#fff; margin:0}
#dsd .dsd-head p{font-size:13px; letter-spacing:.3px; text-transform:none; opacity:.85; margin:2px 0 0; color:#fff}

/* Panelen: info over bestelartikelen */
#dsd .dsd-info{background:#EAF1F8; color:var(--navy-d); border-left:3px solid var(--navy); padding:10px 12px; font-size:13px; border-radius:3px; margin-bottom:12px}
#dsd .dsd-badge{display:inline-block; background:#FFF4E5; color:#9A5B00; border:1px solid #F0C27A; border-radius:3px; padding:1px 6px; font-family:"Montserrat",Arial,sans-serif; font-size:11px; font-weight:600; white-space:nowrap}
#dsd .dsd-seg button small{font-weight:500; font-size:11px; opacity:.75}
#dsd .dsd-seg.big button{text-align:left; justify-content:flex-start}

/* Keuzelijst */
#dsd .dsd-input select.dsd-select{font:inherit; font-weight:600; font-size:14px; border:0 !important; background:transparent !important; padding:10px 12px; width:100%; min-width:0; color:var(--ink); outline:none; cursor:pointer; box-shadow:none !important; -webkit-appearance:auto; appearance:auto; height:auto; margin:0}
#dsd .dsd-step .dsd-sub{margin-top:10px}

#dsd .dsd-versie{opacity:.55; white-space:nowrap}