@charset "UTF-8";

/* Runner question, answer and readable prose owner from the P15.179 route split. */

/* Answer highlighting */
.correct-answer {
    background-color: var(--color-success-light) !important;
    border: 2px solid var(--color-success) !important;
    border-radius: var(--radius-badge);
    padding: 8px;
}

.wrong-answer {
    background-color: var(--color-danger-light) !important;
    border: 2px solid var(--color-danger) !important;
    border-radius: var(--radius-badge);
    padding: 8px;
}

.correct-answer label {
    color: var(--color-success-text) !important;
    font-weight: bold;
}

.wrong-answer label {
    color: var(--color-danger-text) !important;
}


/* Runner prose should stay readable even when the shell uses the shared LMS width. */
#test-container.lms-runner-shell #question-text,
#test-container.lms-runner-shell #learning-question-text,
#test-container.lms-runner-shell #explanation-block,
#test-container.lms-runner-shell #learning-explanation,
#test-container.lms-runner-shell .explanation-content {
    max-width: 72ch;
}

/* Keep runner answer cards aligned with the readable question/explanation measure. */
#test-container.lms-runner-shell #answer-options.test-answer-options {
    width: 100%;
    max-width: 72ch;
}

/* Preserve editor textarea line breaks in runner question and answer text. */
#question-text,
#learning-question-text,
#answer-options .answer-option__label {
    white-space: pre-line;
}

/* Question type hint styles live in ts-lms-components.css as .ts-answer-hint. */

/* Answer ordering helpers */

/* Базовые стили для всех вариантов ответов */
#answer-options .form-check,
#answer-options .answer-option {
    position: relative !important;
    min-height: 46px !important;
    padding: 12px 14px 12px 44px !important;
    margin-bottom: 8px !important;
    display: block !important;
    background: var(--color-bg-card, #ffffff) !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    border-radius: var(--radius-card, 10px) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    color: var(--color-text-primary, #1f2937) !important;
    cursor: pointer !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

#answer-options .form-check:hover,
#answer-options .answer-option:hover {
    border-color: var(--color-border-strong, #cbd5e1) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07) !important;
}

#answer-options .form-check.is-selected:not(.correct-answer):not(.incorrect-answer):not(.missed-answer),
#answer-options .answer-option.is-selected:not(.correct-answer):not(.incorrect-answer):not(.missed-answer),
#answer-options .form-check:has(input:checked):not(.correct-answer):not(.incorrect-answer):not(.missed-answer),
#answer-options .answer-option:has(input:checked):not(.correct-answer):not(.incorrect-answer):not(.missed-answer) {
    background: var(--color-primary-light, #eff6ff) !important;
    border-color: var(--color-primary, #2563eb) !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08) !important;
}

#answer-options .form-check:focus-within:not(.correct-answer):not(.incorrect-answer):not(.missed-answer),
#answer-options .answer-option:focus-within:not(.correct-answer):not(.incorrect-answer):not(.missed-answer) {
    border-color: var(--color-primary, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

#answer-options .form-check:has(input:disabled):not(.correct-answer):not(.incorrect-answer):not(.missed-answer),
#answer-options .answer-option:has(input:disabled):not(.correct-answer):not(.incorrect-answer):not(.missed-answer) {
    background: var(--color-bg-subtle, #f8fafc) !important;
    border-color: var(--color-border, #e5e7eb) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.72;
}

/* ФИКСИРУЕМ ПОЗИЦИЮ ЧЕКБОКСА АБСОЛЮТНО */
#answer-options .form-check input[type="checkbox"],
#answer-options .form-check input[type="radio"] {
    position: absolute !important;
    left: 14px !important;
    top: 15px !important;
    transform: none !important;
    margin: 0 !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: var(--color-primary, #2563eb) !important;
}

#answer-options .form-check input[type="checkbox"]:disabled,
#answer-options .form-check input[type="radio"]:disabled {
    cursor: not-allowed !important;
}

#answer-options .form-check label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: var(--color-text-primary, #1f2937);
    font-size: 1rem !important;
    line-height: 1.45 !important;
}

#answer-options .form-check:has(input:disabled) label {
    cursor: not-allowed !important;
}

@media (max-width: 560px) {#test-container.lms-runner-shell #answer-options.test-answer-options {
        max-width: none;
    }

    #answer-options .form-check,
    #answer-options .answer-option {
        min-height: 44px !important;
        padding: 10px 10px 10px 36px !important;
    }

    #answer-options .form-check input[type="checkbox"],
    #answer-options .form-check input[type="radio"] {
        left: 10px !important;
        top: 13px !important;
    }

}


/* Правильный ответ (зеленый): состояние после отправки должно быть контрастнее selected/disabled */
#answer-options .form-check.correct-answer,
#answer-options .answer-option.correct-answer,
.correct-answer {
    background: #ecfdf3 !important;
    background-color: #ecfdf3 !important;
    border: 2px solid #16a34a !important;
    border-left: 5px solid #16a34a !important;
    box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.18), 0 4px 12px rgba(22, 163, 74, 0.10) !important;
    color: #14532d !important;
}

#answer-options .form-check.correct-answer label,
#answer-options .answer-option.correct-answer label,
#answer-options .answer-option.correct-answer .answer-option__label,
.correct-answer label {
    color: #14532d !important;
    font-weight: 600 !important;
}

#answer-options .form-check.correct-answer input[type="checkbox"],
#answer-options .form-check.correct-answer input[type="radio"],
#answer-options .answer-option.correct-answer input[type="checkbox"],
#answer-options .answer-option.correct-answer input[type="radio"],
.correct-answer input[type="checkbox"],
.correct-answer input[type="radio"] {
    border-color: #16a34a !important;
    accent-color: #16a34a !important;
}

/* Неправильный ответ (красный): выбранный ошибочный вариант должен читаться сразу */
#answer-options .form-check.incorrect-answer,
#answer-options .answer-option.incorrect-answer,
#answer-options .form-check.wrong-answer,
#answer-options .answer-option.wrong-answer,
.incorrect-answer,
.wrong-answer {
    background: #fef2f2 !important;
    background-color: #fef2f2 !important;
    border: 2px solid #dc2626 !important;
    border-left: 5px solid #dc2626 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.16), 0 4px 12px rgba(220, 38, 38, 0.10) !important;
    color: #7f1d1d !important;
}

#answer-options .form-check.incorrect-answer label,
#answer-options .answer-option.incorrect-answer label,
#answer-options .answer-option.incorrect-answer .answer-option__label,
#answer-options .form-check.wrong-answer label,
#answer-options .answer-option.wrong-answer label,
#answer-options .answer-option.wrong-answer .answer-option__label,
.incorrect-answer label,
.wrong-answer label {
    color: #7f1d1d !important;
    font-weight: 600 !important;
}

#answer-options .form-check.incorrect-answer input[type="checkbox"],
#answer-options .form-check.incorrect-answer input[type="radio"],
#answer-options .answer-option.incorrect-answer input[type="checkbox"],
#answer-options .answer-option.incorrect-answer input[type="radio"],
#answer-options .form-check.wrong-answer input[type="checkbox"],
#answer-options .form-check.wrong-answer input[type="radio"],
#answer-options .answer-option.wrong-answer input[type="checkbox"],
#answer-options .answer-option.wrong-answer input[type="radio"],
.incorrect-answer input[type="checkbox"],
.incorrect-answer input[type="radio"],
.wrong-answer input[type="checkbox"],
.wrong-answer input[type="radio"] {
    border-color: #dc2626 !important;
    accent-color: #dc2626 !important;
}

/* Пропущенный правильный ответ (желтый) - только для multiple choice */
.missed-answer {
    background-color: var(--color-warning-light) !important;
    border: 2px solid var(--color-warning) !important;
    border-left: 4px solid var(--color-warning) !important;
}

.missed-answer label {
    color: var(--color-warning-text) !important;
    font-weight: 500 !important;
}

.missed-answer input[type="checkbox"] {
    border-color: var(--color-warning) !important;
    accent-color: var(--color-warning) !important;
}

/* Убираем двойные галочки у disabled checkbox */
.correct-answer input[type="checkbox"]:disabled:checked::before,
.incorrect-answer input[type="checkbox"]:disabled:checked::before,
.missed-answer input[type="checkbox"]:disabled:checked::before,
.correct-answer input[type="radio"]:disabled:checked::before,
.incorrect-answer input[type="radio"]:disabled:checked::before {
    content: none !important;
    display: none !important;
}

/* Убираем фоновые стили Bootstrap для checked состояния */
.correct-answer input[type="checkbox"]:checked,
.incorrect-answer input[type="checkbox"]:checked,
.missed-answer input[type="checkbox"]:checked,
.correct-answer input[type="radio"]:checked,
.incorrect-answer input[type="radio"]:checked {
    background-image: none !important;
}

/* ДОПОЛНИТЕЛЬНО: убираем все возможные галочки */
#answer-options .form-check input[type="checkbox"]:checked::after,
#answer-options .form-check input[type="radio"]:checked::after,
#answer-options .form-check input[type="checkbox"]::after,
#answer-options .form-check input[type="radio"]::after {
    content: none !important;
    display: none !important;
}

/* Убираем галочки из Bootstrap form-check */
.form-check-input:checked::before,
.form-check-input:checked::after {
    content: none !important;
    display: none !important;
}

/* Полностью скрываем background-image с галочкой */
#answer-options input[type="checkbox"]:checked,
#answer-options input[type="radio"]:checked {
    background-image: none !important;
    background-color: transparent !important;
}

#answer-options input[type="checkbox"],
#answer-options input[type="radio"] {
    background-image: none !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
}


#question-text img,
#learning-question-text img,
.explanation-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

#question-text p,
#learning-question-text p,
.explanation-content p {
    margin-bottom: 0.5rem;
}

.explanation-content blockquote,
#explanation-block blockquote,
#learning-explanation blockquote {
    margin: 1rem 0;
    padding: 0.85rem 1rem 0.85rem 1.1rem;
    border-radius: var(--radius-card);
    background: #fff3df;
    color: var(--color-text-primary);
    font-style: italic;
}

.explanation-content blockquote > :last-child,
#explanation-block blockquote > :last-child,
#learning-explanation blockquote > :last-child {
    margin-bottom: 0;
}