/* Quickscan: vragenlijst en resultaat. Kleuren en variabelen komen uit site.css van de website. */

.qs-disclaimer { display: flex; gap: .75rem; align-items: flex-start; background: var(--ib-sand-light); border-left: 4px solid var(--ib-teal); border-radius: 10px; padding: 1rem 1.25rem; font-size: .92rem; }
.qs-disclaimer > .k-icon { color: var(--ib-teal-dark); font-size: 1.3rem; margin-top: .1rem; }
.qs-disclaimer p:last-child { margin-bottom: 0; }
.qs-alert { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; background: #fde2e1; color: #9b1c1c; border-radius: 10px; padding: .8rem 1.1rem; font-weight: 600; }

.qs-progress { min-width: 240px; }

/* Zonder JavaScript: alle thema's onder elkaar, zonder stepper en zonder vorige/volgende. */
body:not(.qs-js) .qs-js-only { display: none !important; }
#qs-steps .k-step-text, #qs-steps .k-step-label { max-width: none; }

.qs-pane { margin: 0 0 1.5rem; }
.qs-pane-head { display: flex; gap: .9rem; align-items: center; margin-bottom: .25rem; }
.qs-question { padding: 1.25rem 0; border-bottom: 1px solid var(--ib-line); scroll-margin-top: 110px; }
.qs-question:has(+ .qs-pane-actions), .qs-question:last-child { border-bottom: 0; }
.qs-question.qs-missing { background: #fff6f5; box-shadow: -1rem 0 0 #fff6f5, 1rem 0 0 #fff6f5; }
.qs-question.qs-missing .qs-number { background: #d9534f; color: #fff; }
.qs-question-head { display: flex; gap: .75rem; align-items: baseline; margin-bottom: .35rem; }
.qs-number { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--ib-teal-50); color: var(--ib-teal-darker); font-weight: 800; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.qs-question-title { font-weight: 700; font-size: 1.05rem; }
.qs-statement { margin-bottom: .8rem; }

.qs-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, .8fr); gap: .5rem; }
.qs-option { border: 1.5px solid var(--ib-line); border-radius: 10px; padding: .55rem .7rem; cursor: pointer; font-size: .9rem; display: flex; gap: .5rem; align-items: flex-start; background: #fff; }
.qs-option:hover { border-color: var(--ib-teal-light); }
.qs-option:has(input:checked) { border-color: var(--ib-teal); background: var(--ib-teal-50); }
.qs-option:has(input:focus-visible) { outline: 2px solid var(--ib-teal); outline-offset: 2px; }
.qs-option strong { display: block; }
.qs-option small { color: var(--ib-muted); line-height: 1.35; display: block; }
.qs-option input { margin-top: .25rem; accent-color: var(--ib-teal); }
.qs-option-unknown { border-style: dashed; }
@media (max-width: 991.98px) { .qs-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qs-option-unknown { grid-column: 1 / -1; } }

.qs-pane-actions { display: flex; justify-content: space-between; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--ib-line); margin-top: .5rem; }

/* Resultaat */
.qs-gauge-value { font-size: 2rem; font-weight: 800; color: var(--ib-ink); }
.qs-bar { height: 10px; border-radius: 999px; background: var(--ib-line); overflow: hidden; }
.qs-bar > span { display: block; height: 100%; background: var(--ib-teal); }
.qs-bar-low > span { background: #e0a100; }
.qs-improvements { padding-left: 1.2rem; margin-bottom: 0; }
.qs-improvements li { padding: .6rem 0; border-bottom: 1px solid var(--ib-line); }
.qs-improvements li:last-child { border-bottom: 0; }
.qs-answer-tag { font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
.qs-answer-0, .qs-answer-x { background: #fde2e1; color: #9b1c1c; }
.qs-answer-1 { background: #fff1cc; color: #7a5600; }
.qs-answer-2 { background: var(--ib-teal-50); color: var(--ib-teal-darker); }
.qs-answer-3 { background: #dff3e6; color: #1e6b3f; }
.qs-iso { font-size: .72rem; font-weight: 700; color: var(--ib-muted); border: 1px solid var(--ib-line); border-radius: 999px; padding: .05rem .5rem; }
.qs-answer-list { padding: .25rem 1rem; }
.qs-answer-row { padding: .8rem 0; border-bottom: 1px solid var(--ib-line); }
.qs-answer-row:last-child { border-bottom: 0; }
.qs-advice strong { display: block; }

/* Opslaan en voortgang */
.qs-status { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; border: 1px solid var(--ib-line); background: #fff; border-radius: 10px; padding: .8rem 1.1rem; }
.qs-status > .k-icon { color: var(--ib-teal-dark); font-size: 1.2rem; }
.qs-status-ok { border-color: #bfe5cd; background: #f1faf4; }
.qs-status-ok > .k-icon { color: #1e6b3f; }
.qs-status form { margin: 0; }