/* assets/keuzehulp.css */

/* KMK kleuren */
:root{
  --kmk-light:#36C8F7;
  --kmk-mid:#2195D2;
  --kmk-dark:#18385B;
  --kmk-orange:#F9A825;

  --wa-green:#25D366;
  --wa-green-dark:#128C7E;

  --bg-fresh:#EAF7FF;
  --border:rgba(24,56,91,0.14);
  --text:rgba(0,0,0,0.78);
  --muted:rgba(0,0,0,0.62);
}

.kmk-kh-wrap{max-width:920px;margin:18px auto;padding:0 14px;}
.kmk-kh-card{
  border:1px solid var(--border);
  border-radius:20px;
  padding:18px;
  background:linear-gradient(180deg,#ffffff 0%, var(--bg-fresh) 100%);
  box-shadow:0 16px 34px rgba(0,0,0,0.08);
}

.kmk-kh-title{
  font-size:22px;line-height:1.25;color:var(--kmk-dark);
  margin:0 0 6px;font-weight:700;
}
.kmk-kh-text{color:var(--text);font-size:15px;line-height:1.6;margin:0 0 14px;}

.kmk-kh-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 16px;}
.kmk-kh-progressbar{flex:1;height:10px;background:rgba(24,56,91,0.10);border-radius:999px;overflow:hidden;}
.kmk-kh-progressfill{height:10px;width:0%;background:var(--kmk-mid);border-radius:999px;transition:width 220ms ease;}
.kmk-kh-progressmeta{font-size:13px;color:var(--muted);white-space:nowrap;}

.kmk-kh-qtitle{
  font-size:18px;line-height:1.35;color:var(--kmk-dark);
  margin:6px 0 12px;font-weight:700;
}

.kmk-kh-options{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px;}
@media (min-width:760px){
  .kmk-kh-options{grid-template-columns:1fr 1fr;}
  .kmk-kh-options .kmk-kh-opt:last-child{grid-column:1/-1;}
}

.kmk-kh-opt{
  width:100%;text-align:left;
  border:1px solid rgba(24,56,91,0.16);
  border-radius:16px;
  padding:12px 12px;
  background:#fff;
  cursor:pointer;
  font-size:15px;line-height:1.45;color:var(--text);
  transition:transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.kmk-kh-opt:hover{
  border-color:rgba(33,149,210,0.55);
  box-shadow:0 10px 22px rgba(0,0,0,0.06);
  transform:translateY(-1px);
}
.kmk-kh-opt.is-selected{
  border-color:var(--kmk-mid);
  box-shadow:0 0 0 4px rgba(54,200,247,0.28), 0 12px 24px rgba(0,0,0,0.08);
}

.kmk-kh-help{
  border-left:4px solid var(--kmk-orange);
  padding:10px 12px;
  background:rgba(249,168,37,0.12);
  border-radius:14px;
  color:rgba(0,0,0,0.74);
  font-size:14px;line-height:1.6;
}

.kmk-kh-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.kmk-kh-btn{
  border:0;border-radius:14px;
  padding:11px 14px;cursor:pointer;
  background:var(--kmk-mid);color:#fff;
  font-size:15px;
  box-shadow:0 10px 20px rgba(33,149,210,0.22);
}
.kmk-kh-btn:disabled{opacity:0.45;cursor:not-allowed;box-shadow:none;}
.kmk-kh-prev{background:var(--kmk-dark);box-shadow:0 10px 20px rgba(24,56,91,0.18);}
.kmk-kh-next{background:var(--kmk-mid);}

/* Result */
.kmk-kh-result{
  border:1px solid rgba(24,56,91,0.14);
  border-radius:20px;
  padding:18px;
  background:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,0.08);
}

.kmk-kh-rkicker{font-size:13px;color:var(--muted);margin-bottom:8px;}
.kmk-kh-rtitle{font-size:20px;color:var(--kmk-dark);font-weight:700;margin:0 0 6px;}
.kmk-kh-rsub{font-size:15px;color:var(--text);line-height:1.6;margin:0 0 14px;}

.kmk-kh-bars{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px;}
.kmk-kh-bar{display:grid;grid-template-columns:90px 1fr 50px;gap:10px;align-items:center;}
.kmk-kh-barlabel{color:var(--kmk-dark);font-size:14px;}
.kmk-kh-bartrack{height:12px;background:rgba(24,56,91,0.10);border-radius:999px;overflow:hidden;}
.kmk-kh-barfill{height:12px;background:var(--kmk-mid);border-radius:999px;}
.kmk-kh-barpct{color:var(--muted);font-size:13px;text-align:right;}

.kmk-kh-ctas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px;}
.kmk-kh-wa,
.kmk-kh-wa:link,
.kmk-kh-wa:visited{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:16px;
  padding:12px 14px;
  background:var(--wa-green);
  color:#fff !important;
  cursor:pointer;
  font-size:15px;
  box-shadow:0 14px 26px rgba(37,211,102,0.28);
  text-decoration:none !important;
}
.kmk-kh-wa:hover,
.kmk-kh-wa:active,
.kmk-kh-wa:focus{
  background:var(--wa-green-dark);
  color:#fff !important;
  text-decoration:none !important;
}
.kmk-kh-rmeta{font-size:13px;color:var(--muted);margin-top:10px;}

/* Admin cards */
.kmk-kh-admin-card{
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  padding:16px;
  margin-top:14px;
}
.kmk-kh-admin-card h2{margin-top:0;}