/* VendorManager.nl — gedeelde stijlen voor tools & templates (laadt ná styles.css) */
:root{--amber:#F5A623;--red:#FF5C5C;--red-soft:rgba(255,92,92,.10);--amber-soft:rgba(245,166,35,.12);--mint-soft:rgba(18,196,139,.12);--blue-soft:rgba(46,91,255,.08)}

[hidden]{display:none!important}

/* layout */
.tool-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.tool-app{padding:52px 0 72px}
.tool-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}
.tool-grid.wide{grid-template-columns:1fr}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.panel h2{font-size:21px;margin-bottom:6px}
.panel .sub{color:var(--muted);font-size:14.5px;margin-bottom:22px}
.sticky{position:sticky;top:90px}

/* hero variant */
.page-hero .hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.page-hero .hero-badges span{font-size:13px;font-weight:600;color:#DDE3F7;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:7px 14px}
.page-hero .crumb{font-size:13.5px;color:#B8C1E8;margin-bottom:14px;display:block}
.page-hero .crumb a:hover{color:#fff;text-decoration:underline}

/* form controls */
.f{display:block;margin-bottom:16px}
.f label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.f .hint{display:block;font-size:12.5px;color:var(--muted);margin-top:5px;font-weight:400}
.f input,.f select,.f textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;background:var(--paper);color:var(--ink)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(46,91,255,.15)}
.f.err input,.f.err select{border-color:var(--red)}
.f .msg{color:var(--red);font-size:12.5px;margin-top:5px;display:none}
.f.err .msg{display:block}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.f .unit{position:relative}
.f .unit input{padding-right:64px}
.f .unit span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--muted);font-weight:600}
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.seg button{border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(10,14,35,.12)}
.toggle{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:14.5px;font-weight:500}
.toggle input{appearance:none;width:44px;height:26px;border-radius:100px;background:#c9d0e6;position:relative;cursor:pointer;flex:0 0 auto;transition:background .2s}
.toggle input:checked{background:var(--blue)}
.toggle input:before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}
.toggle input:checked:before{left:21px}
.btn-sm{padding:9px 14px;font-size:13.5px;border-radius:9px}
.btn-block{width:100%}
.btn-danger-ghost{border-color:var(--line);color:var(--red);background:#fff}
.btn-danger-ghost:hover{border-color:var(--red)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* result card */
.result{background:linear-gradient(135deg,var(--ink),#182150);color:#fff;border-radius:var(--radius);padding:30px;position:relative;overflow:hidden}
.result:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;opacity:.7;pointer-events:none}
.result>*{position:relative}
.result .eyebrow{color:#8FA6FF}
.result .big{font-family:'Space Grotesk';font-weight:700;font-size:clamp(34px,4.4vw,52px);letter-spacing:-.02em;line-height:1.05;margin:8px 0 4px}
.result .big small{display:block;font-size:.4em;color:#B8C1E8;font-weight:500;letter-spacing:0;margin-top:4px}
.result .lead{color:#DDE3F7;font-size:15.5px;max-width:52ch}
.result .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.result .kpi{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px}
.result .kpi b{display:block;font-family:'Space Grotesk';font-size:20px;font-weight:700}
.result .kpi span{font-size:12.5px;color:#B8C1E8}
.result .pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.03em;padding:7px 14px;border-radius:100px}
.pill.ok{background:rgba(18,196,139,.18);color:#5EF0BC;border:1px solid rgba(18,196,139,.45)}
.pill.warn{background:rgba(245,166,35,.18);color:#FFD27A;border:1px solid rgba(245,166,35,.45)}
.pill.bad{background:rgba(255,92,92,.18);color:#FF9B9B;border:1px solid rgba(255,92,92,.45)}
.result .actions .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.result .actions .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.result .fine{font-size:12.5px;color:#9AA6CE;margin-top:16px}

/* light result rows */
.rows{display:grid;gap:10px;margin-top:18px}
.row{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 16px;font-size:14.5px}
.row b{font-family:'Space Grotesk';font-size:16px}
.row .tag{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:100px}
.tag.ok{background:var(--mint-soft);color:#0d7a57}
.tag.warn{background:var(--amber-soft);color:#9a5f00}
.tag.bad{background:var(--red-soft);color:#b42323}
.tag.info{background:var(--blue-soft);color:var(--blue)}

/* timeline (opzegtermijn) */
.tl{margin-top:22px;position:relative;padding-left:0}
.tl-track{height:10px;border-radius:100px;background:linear-gradient(90deg,var(--mint) 0%,var(--mint) var(--p,50%),rgba(255,255,255,.18) var(--p,50%));position:relative}
.tl-mark{position:absolute;top:-6px;width:4px;height:22px;background:#fff;border-radius:3px;transform:translateX(-50%)}
.tl-mark.now{background:var(--amber)}
.tl-mark.deadline{background:var(--red)}
.tl-labels{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:12px;color:#B8C1E8;margin-top:10px}
.tl-labels span:nth-child(2){text-align:center}.tl-labels span:nth-child(3){text-align:right}
.tl-labels b{display:block;color:#fff;font-size:13px}

/* bars */
.bars{display:grid;gap:12px;margin-top:16px}
.bar-row .top{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:5px}
.bar-row .top span:last-child{font-weight:600}
.bar-track{height:9px;background:var(--line);border-radius:100px;overflow:hidden}
.bar-track>i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--blue),var(--mint));transition:width .5s ease}
.bar-track>i.warn{background:var(--amber)}.bar-track>i.bad{background:var(--red)}

/* table editor (kostenscan, register) */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.tbl th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:6px 4px;vertical-align:middle;border-bottom:1px solid var(--line)}
.tbl input,.tbl select{width:100%;border:1px solid transparent;border-radius:8px;padding:9px 10px;font:inherit;font-size:14px;background:var(--paper);color:var(--ink);min-width:0}
.tbl input:focus,.tbl select:focus{border-color:var(--blue);background:#fff;outline:none}
.tbl input[type=number]{text-align:right}
.tbl .del{background:none;border:0;color:#a2abc4;cursor:pointer;font-size:18px;line-height:1;padding:6px}
.tbl .del:hover{color:var(--red)}
.tbl-scroll{overflow-x:auto;margin:0 -8px;padding:0 8px}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.totals{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.totals b{color:var(--ink);font-family:'Space Grotesk';font-size:17px}

/* questions (indexatie / scoring) */
.qlist{display:grid;gap:14px}
.q{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}
.q h4{font-size:15.5px;margin-bottom:10px;font-family:'Inter';font-weight:600}
.q .opts{display:grid;gap:8px}
.q .opt{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;font:inherit;font-size:14.5px;cursor:pointer;display:flex;gap:10px;align-items:center;transition:border-color .15s}
.q .opt:hover,.q .opt.sel{border-color:var(--blue)}
.q .opt.sel{background:var(--blue-soft)}
.q .opt .dot{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid #c3cbe6;display:grid;place-items:center}
.q .opt.sel .dot{border-color:var(--blue);background:var(--blue)}
.q .opt.sel .dot:after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}

/* recommendations */
.recs{display:grid;gap:12px;margin-top:18px}
.rec{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:10px;padding:14px 16px}
.rec.warn{border-left-color:var(--amber)}.rec.bad{border-left-color:var(--red)}.rec.ok{border-left-color:var(--mint)}
.rec h4{font-size:15px;margin-bottom:4px;font-family:'Inter';font-weight:600}
.rec p{font-size:14px;color:var(--muted)}

/* lead capture */
.capture{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.capture h3{font-size:17px;margin-bottom:4px}
.capture p{font-size:14px;color:var(--muted);margin-bottom:14px}
.capture form{display:grid;grid-template-columns:1fr auto;gap:10px}
.capture form.stack{grid-template-columns:1fr}
.capture input[type=email],.capture input[type=text]{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-size:15px;background:var(--paper);width:100%}
.capture .consent{grid-column:1/-1;display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted)}
.capture .consent input{margin-top:3px}
.capture .done{display:none;background:var(--mint-soft);border:1px solid rgba(18,196,139,.35);color:#0d7a57;border-radius:10px;padding:12px 14px;font-size:14px;font-weight:600}
.capture.sent form{display:none}.capture.sent .done{display:block}
.result .capture{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.result .capture h3{color:#fff}.result .capture p{color:#B8C1E8}
.result .capture input[type=email],.result .capture input[type=text]{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.result .capture input::placeholder{color:#9AA6CE}
.result .capture .consent{color:#B8C1E8}

/* tools index */
.tool-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative}
.tool-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#cdd5f0}
.tool-card h3{font-size:20px;margin:0 0 8px}
.tool-card p{color:var(--muted);font-size:15px;margin-bottom:14px}
.tool-card .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tool-card .meta span{font-size:12px;font-weight:600;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:4px 10px}
.tool-card .btn{margin-top:auto;align-self:flex-start}
.tool-card .soon{position:absolute;top:18px;right:18px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:4px 9px}
.tpl-card .fmt{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:11px;font-size:11px;font-weight:800;letter-spacing:.04em;margin-bottom:14px;color:#fff}
.fmt.xlsx{background:#1D6F42}.fmt.docx{background:#2B579A}
.tpl-card ul{list-style:none;display:grid;gap:6px;margin:0 0 16px;font-size:14px;color:#3a4258}
.tpl-card ul li:before{content:"✓";color:var(--mint);font-weight:700;margin-right:8px}

/* explainer */
.explain{max-width:72ch}
.explain h2{font-size:clamp(22px,2.6vw,28px);margin:34px 0 12px}
.explain h2:first-child{margin-top:0}
.explain p,.explain li{color:#3a4258;font-size:16px;line-height:1.7}
.explain p{margin-bottom:16px}
.explain ol,.explain ul{padding-left:22px;margin-bottom:16px}
.explain .note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:14px 16px;font-size:14.5px;color:#3a4258}

/* share bar */
.sharebar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px;font-size:13.5px;color:var(--muted)}
.sharebar a,.sharebar button{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 14px;cursor:pointer}
.sharebar a:hover,.sharebar button:hover{border-color:var(--blue);color:var(--blue)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:12px 18px;border-radius:12px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:960px){
  .tool-grid{grid-template-columns:1fr}
  .sticky{position:static}
  .result .kpis{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .tool-wrap{padding:0 20px}
  .tool-app{padding:36px 0 56px}
  .panel,.result{padding:22px}
  .f-row,.f-row-3{grid-template-columns:1fr}
  .result .kpis{grid-template-columns:1fr}
  .capture form{grid-template-columns:1fr}
  .actions .btn{width:100%}
}
@media print{
  header.nav,footer,.actions,.capture,.sharebar,.page-hero .cta-row,.explain,.menu-btn{display:none!important}
  .page-hero{background:#fff!important;color:var(--ink)!important}
  .page-hero p,.page-hero .crumb{color:var(--muted)!important}
  .result{background:#0A0E23!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tool-grid{grid-template-columns:1fr}
  .panel{box-shadow:none}
}


/* --- brug naar het platform, onder het resultaat --- */
.bridge{margin-top:22px;border:1px solid rgba(46,91,255,.28);background:linear-gradient(140deg,rgba(46,91,255,.06),rgba(18,196,139,.06));border-radius:14px;padding:20px 22px}
.bridge h3{font-size:16.5px;margin:0 0 6px}
.bridge p{font-size:14.5px;line-height:1.6;color:#3a4258;margin:0 0 14px}
.bridge .acts{display:flex;flex-wrap:wrap;gap:10px}
.bridge[hidden]{display:none!important}