/**
 * Kennisquiz — bouwt voort op tbg-tools.css en quiz-block.css.
 * Alleen de extra's voor de kennistest: voortgangsbalk, goed/fout-feedback,
 * resultaat-hero met score, deelknoppen, lead-magnet en leestips.
 */

.tbg-quiz__noscript { padding: 28px; text-align: center; color: var(--tbg-text-muted); }

/* cobrand */
.kq-cobrand{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px;background:var(--tbg-bg-card);border-bottom:1px solid var(--tbg-border)}
.kq-cobrand strong{color:var(--tbg-text);font-weight:800}
.kq-cobrand span{font-size:11px;color:var(--tbg-text-meta);font-weight:700;text-transform:uppercase;letter-spacing:.07em}

/* welcome */
.kq-welcome{text-align:center}
.kq-meta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 0 22px}
.kq-pill{display:inline-flex;align-items:center;gap:7px;background:var(--tbg-bg-card);border:1px solid var(--tbg-border);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--tbg-text-muted)}

/* progress bar */
.kq-prog{background:var(--tbg-bg);padding:24px 32px 18px;border-bottom:1px solid var(--tbg-border)}
.kq-bar{height:8px;background:var(--tbg-bg-soft);border:1px solid var(--tbg-border-strong);border-radius:999px;overflow:hidden}
.kq-bar-fill{height:100%;width:0;background:var(--tbg-accent);border-radius:999px;transition:width .3s ease}
.kq-bar-l{display:flex;justify-content:space-between;font-size:11px;color:var(--tbg-text-meta);font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:10px}

/* answer letter inside opt-icon */
.tbg-quiz__opt-icon--letter{font-weight:800;font-size:.95rem;color:var(--tbg-text-meta)}
/* correct / wrong states (op .tbg-quiz__opt) */
.tbg-quiz__opt.is-correct{border-color:var(--tbg-accent);background:var(--tbg-bg-success)}
.tbg-quiz__opt.is-correct .tbg-quiz__opt-icon{background:var(--tbg-accent);color:#fff}
.tbg-quiz__opt.is-wrong{border-color:#fecaca;background:#fef2f2}
.tbg-quiz__opt.is-wrong .tbg-quiz__opt-icon{background:#b91c1c;color:#fff}
.tbg-quiz__opt.is-dim{opacity:.55}
.tbg-quiz__opt[disabled]{cursor:default;transform:none;box-shadow:none}

/* feedback */
.kq-fb{margin-top:18px;padding:14px 16px;border-radius:var(--tbg-radius-md);font-size:14px;line-height:1.55;display:flex;gap:10px;align-items:flex-start}
.kq-fb svg{flex-shrink:0;margin-top:2px}
.kq-fb.good{background:var(--tbg-bg-success);border:1px solid var(--tbg-border-success);color:var(--tbg-text-success)}
.kq-fb.bad{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.kq-fb strong{font-weight:800}

/* nav */
.kq-nav{display:flex;justify-content:space-between;align-items:center;padding-top:20px;margin-top:24px;border-top:1px solid var(--tbg-border)}
.kq-counter{font-size:11px;color:var(--tbg-text-meta);font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* RESULT hero */
.kq-hero{background:var(--tbg-bg-card);padding:30px 32px 24px;border-bottom:1px solid var(--tbg-border);text-align:center}
.kq-score{font-size:3rem;font-weight:800;color:var(--tbg-accent);line-height:1;letter-spacing:-.02em;margin:6px 0 8px}
.kq-score small{font-size:1rem;color:var(--tbg-text-meta);font-weight:700}
.kq-headline{font-size:1.5rem;font-weight:800;color:var(--tbg-text);line-height:1.2;letter-spacing:-.01em;margin:0 0 6px}
.kq-headline em{font-style:normal}
.kq-text{font-size:1rem;color:var(--tbg-text-muted);margin:0 auto 16px;max-width:480px}
.kq-sharelabel{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--tbg-text-meta);margin:0 0 10px}
.kq-chips{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.kq-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--tbg-radius-md);border:1px solid var(--tbg-border-strong);background:var(--tbg-bg-card);color:var(--tbg-text);font-size:12.5px;font-weight:700;text-decoration:none;cursor:pointer;transition:all .15s ease}
.kq-chip:hover{border-color:var(--tbg-accent);color:var(--tbg-accent-hover)}
.kq-chip .d{width:9px;height:9px;border-radius:2px}
.kq-chip.wa .d{background:#25D366}.kq-chip.li .d{background:#0A66C2}.kq-chip.x .d{background:#0f172a}.kq-chip.fb .d{background:#1877F2}.kq-chip.cp .d{background:#10b981}

/* LEAD MAGNET (e-book) — krijgt nadruk met success-tint */
.kq-leadzone{padding:22px 32px;background:var(--tbg-bg)}
.kq-lead{background:var(--tbg-bg-success);border:1px solid var(--tbg-border-success);border-radius:var(--tbg-radius-lg);padding:24px;text-align:center}
.kq-lead h3{margin:0 0 6px;font-size:1.2rem;font-weight:800;color:var(--tbg-text)}
.kq-lead p{margin:0 0 16px;font-size:.95rem;color:var(--tbg-text-muted)}
.kq-form{display:flex;gap:8px;max-width:430px;margin:0 auto}
.kq-form input{flex:1;min-width:0;border:1px solid var(--tbg-border-strong);border-radius:var(--tbg-radius-md);padding:13px 14px;font-size:15px;color:var(--tbg-text);background:#fff;outline:none}
.kq-form input:focus{border-color:var(--tbg-accent);box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.kq-form .tbg-tool__btn{white-space:nowrap}
.kq-subnote{font-size:12px;color:var(--tbg-text-meta);margin-top:10px}
.kq-done{display:none;color:var(--tbg-text-success);font-weight:700}
.kq-done svg{vertical-align:-4px;margin-right:4px}
.kq-expertcta{text-align:center}
.kq-expertcta .kq-sub-link{display:block;margin-top:12px;font-size:13px;color:var(--tbg-text-light)}
.kq-expertcta .kq-sub-link a{color:var(--tbg-accent-hover);font-weight:700;text-decoration:none}

/* VERDER LEZEN */
.kq-read{padding:18px 32px 22px;background:var(--tbg-bg)}
.kq-read-title{font-size:1.05rem;font-weight:800;color:var(--tbg-text);margin:0 0 12px}
.kq-cards{display:flex;flex-direction:column;gap:10px}
.kq-rcard{display:flex;gap:14px;align-items:center;padding:12px;background:var(--tbg-bg-card);border:1px solid var(--tbg-border);border-radius:var(--tbg-radius-md);text-decoration:none;transition:all .15s ease}
.kq-rcard:hover{border-color:var(--tbg-accent);box-shadow:var(--tbg-shadow-card);transform:translateY(-1px)}
.kq-rthumb{width:64px;height:64px;border-radius:var(--tbg-radius-sm);flex-shrink:0;object-fit:cover;background:var(--tbg-accent-cta-grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px}
.kq-rbody{flex:1;min-width:0}
.kq-rname{display:block;font-size:1rem;font-weight:700;color:var(--tbg-text);line-height:1.3}
.kq-rdesc{font-size:13px;color:var(--tbg-text-light);margin-top:3px;line-height:1.45}
.kq-rarrow{color:var(--tbg-text-meta);flex-shrink:0;margin-left:auto}

.kq-foot{padding:16px 32px 22px;text-align:center;background:var(--tbg-bg)}

@media(max-width:600px){
  .kq-prog{padding:18px 18px 14px}.kq-hero{padding:26px 18px 20px}
  .kq-leadzone,.kq-read{padding-left:18px;padding-right:18px}
  .kq-form{flex-direction:column}
}

/* ===== v8.131.2 polish ===== */
/* antwoorden links uitlijnen */
.tbg-quiz__opt{text-align:left}
.tbg-quiz__opt-text{text-align:left}
.tbg-quiz__opt-title{text-align:left;font-size:1rem}
/* duidelijke groene hover (alleen voor nog niet beantwoorde opties) */
.tbg-quiz__opt:not([disabled]):hover{border-color:var(--tbg-accent);background:var(--tbg-accent);box-shadow:0 2px 10px rgba(16,185,129,.28);transform:translateY(-1px)}
.tbg-quiz__opt:not([disabled]):hover .tbg-quiz__opt-title{color:#fff}
.tbg-quiz__opt:not([disabled]):hover .tbg-quiz__opt-icon{background:rgba(255,255,255,.22);color:#fff}

/* TBG logo in header */
.kq-logo{height:26px;width:auto;display:block}

/* lead magnet als nette witte kaart met boekcover */
.kq-lead{background:var(--tbg-bg-card);border:1px solid var(--tbg-border);border-radius:var(--tbg-radius-lg);padding:22px;text-align:left;box-shadow:var(--tbg-shadow-card)}
.kq-lead .kq-form{margin-top:4px}
.kq-lead.kq-expertcta{text-align:center}
.kq-lead.kq-expertcta h3{margin-bottom:6px}

/* verder lezen zonder thumbnail */
.kq-rcard{padding:14px 16px}
.kq-rname{font-size:1rem}
.kq-rarrow{align-self:center}

@media(max-width:600px){
  .kq-lead .tbg-quiz__ebook-row{gap:12px}
  .tbg-quiz__opt{padding:13px 14px}
}

/* ===== deelknoppen met merk-iconen (stijl uit [tbg_share]) ===== */
.kq-share{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.kq-sharebtn{width:40px;height:40px;border-radius:var(--tbg-radius-sm);background:var(--tbg-bg);border:1px solid var(--tbg-border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;padding:0;text-decoration:none}
.kq-sharebtn:hover{background:var(--tbg-accent);border-color:var(--tbg-accent);transform:translateY(-1px)}
.kq-sharebtn svg{width:18px;height:18px;color:var(--tbg-text-muted)}
.kq-sharebtn:hover svg{color:#fff}
.kq-sharebtn.is-copied{background:var(--tbg-accent);border-color:var(--tbg-accent)}
.kq-sharebtn.is-copied svg{color:#fff}

/* link-knoppen (a) houden witte tekst op hover, anders pakt het thema de link-hoverkleur */
.tbgq a.tbg-tool__btn--primary,
.tbgq a.tbg-tool__btn--primary:hover,
.tbgq a.tbg-tool__btn--primary:focus{color:#fff;text-decoration:none}
.tbgq a.tbg-tool__btn--primary:hover{background:var(--tbg-accent-hover)}