/* KreditKompass produkttest (kreditkompass-loans 4.8.0). Ärver sajtens token, egna variabler har prefixet --kkt-. */
.kk-test {
    --kkt-ink: var(--kk-ink, #16293C);
    --kkt-green: var(--kk-green, #3E6B48);
    --kkt-green-dark: var(--kk-green-dark, #2E5136);
    --kkt-body: var(--kk-body, #43566B);
    --kkt-line: var(--kk-line, #E2DDD0);
    --kkt-sage: var(--kk-sage-light, #EDF2E9);
    --kkt-card: #FFFFFF;
    --kkt-r-btn: var(--kk-radius-btn, 10px);
    --kkt-r-card: var(--kk-radius-card, 14px);
    --kkt-mono: var(--kk-font-mono, "IBM Plex Mono", monospace);
    font-family: inherit;
    color: var(--kkt-body);
    background: var(--kkt-card);
    border: 1px solid var(--kkt-line);
    border-radius: var(--kkt-r-card);
    padding: clamp(18px, 4vw, 32px);
    margin: 0 0 32px;
    max-width: 760px;
    scroll-margin-top: 80px;
}
.kk-test *, .kk-test *::before, .kk-test *::after { box-sizing: border-box; }
.kk-test h2, .kk-test h3 { font-family: var(--kk-font-heading, inherit); color: var(--kkt-ink); font-weight: 800; }
.kk-test-title { font-size: clamp(1.35rem, 4.5vw, 1.75rem); margin: 0 0 8px; line-height: 1.25; }
.kk-test-lead { margin: 0 0 20px; line-height: 1.55; }

.kk-test button, .kk-test-apply, .kk-test-review, .kk-test-all {
    font: inherit; font-weight: 700; min-height: 48px; border-radius: var(--kkt-r-btn);
    cursor: pointer; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 20px; transition: background-color .15s, border-color .15s, color .15s;
}
.kk-test-start, .kk-test-apply { background: var(--kkt-green); color: #fff; border: 1px solid var(--kkt-green); }
.kk-test-start:hover, .kk-test-apply:hover { background: var(--kkt-green-dark); border-color: var(--kkt-green-dark); color: #fff; }
.kk-test-start { width: 100%; }
@media (min-width: 600px) { .kk-test-start { width: auto; padding: 12px 32px; } }

/* Fråga */
.kk-test-progress { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; font-size: .875rem; }
.kk-test-bar { height: 6px; background: var(--kkt-sage); border-radius: 3px; overflow: hidden; }
.kk-test-bar i { display: block; height: 100%; background: var(--kkt-green); transition: width .2s; }
.kk-test fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.kk-test-qtext { font-family: var(--kk-font-heading, inherit); color: var(--kkt-ink); font-weight: 800; font-size: clamp(1.15rem, 4vw, 1.4rem); line-height: 1.3; margin: 0 0 16px; padding: 0; outline: none; }
.kk-test-opts { display: grid; gap: 10px; }
@media (min-width: 600px) { .kk-test-opts { grid-template-columns: 1fr 1fr; } }
.kk-test-opt {
    width: 100%; justify-content: flex-start !important; text-align: left; font-weight: 600 !important;
    background: var(--kkt-card); color: var(--kkt-ink); border: 1px solid var(--kkt-line);
}
.kk-test-opt:hover { border-color: var(--kkt-green); background: var(--kkt-sage); }
.kk-test-opt.is-selected { border-color: var(--kkt-green); background: var(--kkt-sage); box-shadow: inset 0 0 0 1px var(--kkt-green); }
.kk-test-back, .kk-test-restart {
    margin-top: 14px; background: transparent; color: var(--kkt-ink); border: 1px solid var(--kkt-line);
}
.kk-test-back:hover, .kk-test-restart:hover { border-color: var(--kkt-ink); }

/* Resultat */
.kk-test-rtitle { font-size: clamp(1.25rem, 4.5vw, 1.6rem); margin: 0 0 6px; outline: none; }
.kk-test-rlead { margin: 0 0 18px; }
.kk-test-list { display: grid; gap: 14px; }
.kk-test-res { border: 1px solid var(--kkt-line); border-radius: var(--kkt-r-card); padding: 16px; background: var(--kkt-card); }
.kk-test-res-top { border: 2px solid var(--kkt-green); }
.kk-test-res-label { margin: 0 0 10px; font-size: .8125rem; font-weight: 700; color: var(--kkt-green); }
.kk-test-res-head { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; }
.kk-test-res-img { width: 96px; height: auto; max-height: 64px; object-fit: contain; border-radius: 6px; flex: 0 0 auto; }
.kk-test-res-logo { width: 88px; max-height: 40px; }
.kk-test-res-name { font-size: 1.125rem; margin: 0; line-height: 1.3; }
.kk-test-why { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.kk-test-why li { position: relative; padding-left: 20px; line-height: 1.45; }
.kk-test-why li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 9px; height: 5px; border-left: 2px solid var(--kkt-green); border-bottom: 2px solid var(--kkt-green); transform: rotate(-45deg); }
.kk-test-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0 0 14px; }
.kk-test-facts div { background: var(--kkt-sage); border-radius: 8px; padding: 8px 10px; }
.kk-test-facts dt { font-size: .75rem; margin: 0 0 2px; }
.kk-test-facts dd { margin: 0; font-family: var(--kkt-mono); color: var(--kkt-ink); font-weight: 600; font-size: .9375rem; }
.kk-test-res-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.kk-test-res-btns a { flex: 1 1 160px; }
.kk-test-review, .kk-test-all { background: var(--kkt-card); color: var(--kkt-ink); border: 1px solid var(--kkt-line); }
.kk-test-review:hover, .kk-test-all:hover { border-color: var(--kkt-ink); color: var(--kkt-ink); }
.kk-test-sekki { font-size: .75rem; line-height: 1.5; margin: 12px 0 0; }
.kk-test-notes { margin: 18px 0 0; padding-left: 18px; font-size: .875rem; line-height: 1.55; }
.kk-test-notes li { margin: 0 0 6px; }
.kk-test-notes a { color: var(--kkt-green); }
.kk-test-disclosure { font-size: .75rem; line-height: 1.5; margin: 12px 0 0; }
.kk-test-end { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.kk-test-end > * { flex: 1 1 180px; margin-top: 0 !important; }

/* Temat (Astra) sätter vit text och egen bakgrund på button:hover och :focus. Lås färgerna. */
.kk-test .kk-test-opt, .kk-test .kk-test-opt:hover, .kk-test .kk-test-opt:focus, .kk-test .kk-test-opt:active,
.kk-test .kk-test-back, .kk-test .kk-test-back:hover, .kk-test .kk-test-back:focus, .kk-test .kk-test-back:active,
.kk-test .kk-test-restart, .kk-test .kk-test-restart:hover, .kk-test .kk-test-restart:focus, .kk-test .kk-test-restart:active,
.kk-test a.kk-test-review, .kk-test a.kk-test-review:hover, .kk-test a.kk-test-review:focus,
.kk-test a.kk-test-all, .kk-test a.kk-test-all:hover, .kk-test a.kk-test-all:focus { color: var(--kkt-ink) !important; }
.kk-test .kk-test-opt:hover, .kk-test .kk-test-opt:focus-visible, .kk-test .kk-test-opt.is-selected { background: var(--kkt-sage) !important; border-color: var(--kkt-green) !important; }
.kk-test .kk-test-opt:not(:hover):not(.is-selected):not(:focus-visible),
.kk-test .kk-test-back, .kk-test .kk-test-restart, .kk-test a.kk-test-review, .kk-test a.kk-test-all { background: var(--kkt-card) !important; }
.kk-test .kk-test-back:hover, .kk-test .kk-test-restart:hover, .kk-test a.kk-test-review:hover, .kk-test a.kk-test-all:hover { border-color: var(--kkt-ink) !important; }
.kk-test .kk-test-start, .kk-test .kk-test-start:focus, .kk-test a.kk-test-apply, .kk-test a.kk-test-apply:focus { background: var(--kkt-green) !important; border-color: var(--kkt-green) !important; color: #fff !important; }
.kk-test .kk-test-start:hover, .kk-test a.kk-test-apply:hover { background: var(--kkt-green-dark) !important; border-color: var(--kkt-green-dark) !important; color: #fff !important; }
.kk-test .kk-test-qtext:focus, .kk-test .kk-test-rtitle:focus { outline: none !important; box-shadow: none !important; }
.kk-test button:focus-visible, .kk-test a:focus-visible { outline: 2px solid var(--kkt-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .kk-test *, .kk-test-bar i { transition: none !important; } }