/* Testlar — «Yumshoq oq» kit */

/* ---------- Test kartasi ---------- */
.test-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 26px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sh-card);
    transition: transform .2s, box-shadow .2s;
}

.test-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-card-hover);
}

.test-card__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--r-icon);
    background: var(--blue-tint);
    color: var(--blue-ink);
    margin-bottom: 4px;
}

.test-card__icon .ico {
    width: 20px;
    height: 20px;
}

.test-card__topic {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    font: 600 11px/1.2 var(--font-kit);
    color: var(--ink-2);
}

.test-card__title {
    font: 700 18px/1.3 var(--font-kit);
    color: var(--ink);
}

.test-card__desc {
    font: 400 13px/1.65 var(--font-kit);
    color: var(--body);
    text-wrap: pretty;
}

.test-card .text-sm {
    font: 500 12px/1 var(--font-kit);
    color: var(--muted);
}

.test-card .btn {
    margin-top: 6px;
}

/* ---------- Test ishlash ---------- */
.test-form {
    padding-bottom: 32px;
}

.test-form__name {
    max-width: 420px;
    margin-bottom: 28px;
}

.test-questions {
    list-style: none;
    counter-reset: tq;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.test-question {
    counter-increment: tq;
    padding: 22px 24px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sh-soft);
}

/* Savol raqami: kitdagi step raqami kabi kvadrat */
.test-question__text {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font: 700 15px/1.45 var(--font-kit);
    color: var(--ink);
    margin-bottom: 16px;
}

.test-question__text::before {
    content: counter(tq);
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--r-step);
    background: var(--surface-2);
    color: var(--ink-2);
    font: 800 14px/1 var(--font-kit);
    transition: background .18s, color .18s, box-shadow .18s;
}

/* Javob berilgan savolning raqami qizil bo'ladi */
.test-question.is-answered .test-question__text::before {
    background: var(--red);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(244, 43, 76, .3);
}

/* ---------- Javob variantlari: input ko'rinishida ---------- */
.test-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 48px;
}

.test-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    background: var(--bg);
    cursor: pointer;
    transition: border-color .18s, background .18s;
}

.test-option:hover {
    border-color: var(--border-strong);
    background: var(--surface);
}

/* Haqiqiy radio yashiringan, harf doirasi uning o'rnini bosadi */
.test-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.test-option__letter {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--track);
    color: var(--ink-2);
    font: 700 12px/1 var(--font-kit);
    transition: background .18s, color .18s;
}

.test-option__text {
    font: 500 14px/1.45 var(--font-kit);
    color: var(--body);
}

/* Tanlangan variant */
.test-option:has(input:checked) {
    border-color: var(--red-tint-2);
    background: var(--red-card);
}

.test-option:has(input:checked) .test-option__letter {
    background: var(--red);
    color: #ffffff;
}

.test-option:has(input:checked) .test-option__text {
    color: var(--ink);
}

.test-option:has(input:focus-visible) {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* ---------- Pastki panel ---------- */
.test-form__footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
    margin-top: 24px;
    background: var(--bg);
    border-top: 1px solid var(--divider);
}

.test-progress {
    font: 600 13px/1 var(--font-kit);
    color: var(--ink-2);
}

/* ---------- Natija ---------- */
.result-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 26px 30px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sh-card);
}

.result-card__score {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.result-card__value {
    font: 800 48px/1.1 var(--font-kit);
    letter-spacing: -.02em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.result-card__percent {
    font: 600 14px/1 var(--font-kit);
    color: var(--muted);
    margin-top: 4px;
}

.result-card--great .result-card__value { color: var(--green); }
.result-card--low   .result-card__value { color: var(--red-ink); }

.result-card__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.result-card__bar {
    width: 100%;
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--track);
    overflow: hidden;
}

.result-card__bar span {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--blue), var(--blue-light));
    transition: width .8s var(--ease-out);
}

.result-card--great .result-card__bar span { background: linear-gradient(90deg, var(--green), #4ecb8a); }
.result-card--low   .result-card__bar span { background: linear-gradient(90deg, var(--red), #FF7C92); }

.result-card__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- Javoblar tahlili ---------- */
.review-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 32px;
}

.review-item {
    padding: 22px 24px;
    border-radius: var(--r-card);
    background: var(--surface);
    box-shadow: var(--sh-soft);
}

.review-item__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.review-item__mark {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font: 700 12px/1 var(--font-kit);
    color: #ffffff;
}

.review-item.is-right .review-item__mark { background: var(--green); }
.review-item.is-wrong .review-item__mark { background: var(--red); }

.review-item__q {
    font: 700 15px/1.45 var(--font-kit);
    color: var(--ink);
    padding-top: 3px;
}

.review-item__options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 38px;
}

.review-option {
    display: block;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-input);
    background: var(--bg);
    font: 500 13px/1.5 var(--font-kit);
    color: var(--body);
}

.review-option.is-correct {
    border-color: #bfe5cf;
    background: var(--green-tint);
    color: var(--ink);
}

.review-option.is-picked {
    border-color: var(--red-tint-2);
    background: var(--red-tint);
    color: var(--ink);
}

.review-option__tag {
    font: 700 10px/1 var(--font-kit);
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-left: 8px;
}

.review-option.is-correct .review-option__tag { color: var(--green); }
.review-option.is-picked  .review-option__tag { color: var(--red-ink); }

@media (max-width: 768px) {
    .result-card {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 16px;
    }

    .result-card__info {
        align-items: center;
    }

    .result-card__actions {
        flex-direction: row;
    }

    .result-card__actions .btn {
        flex: 1;
    }

    .test-options,
    .review-item__options {
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .test-card,
    .result-card__bar span {
        transition: none;
    }

    .test-card:hover {
        transform: none;
    }
}