/* =========================================================
   HDCAT – HARD LAYOUT ISOLATION (PERMANENT FIX)
   ========================================================= */


.hdcat-test-container {
    /* Layout lock */
    display: block;
    max-width: 720px;
    margin: 24px auto;
    padding: 24px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;

    /* Stop forum / login CSS bleed */
    isolation: isolate;
    contain: layout style paint;

    /* Typography baseline */
    font-family: -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    box-sizing: border-box;
}

/* Predictable sizing */
.hdcat-test-container *,
.hdcat-test-container *::before,
.hdcat-test-container *::after {
    box-sizing: border-box;
}

/* =========================================================
   HDCAT – TITLE
   ========================================================= */

.hdcat-test-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* =========================================================
   HDCAT – QUESTION BLOCK
   ========================================================= */

.hdcat-q-block {
    margin-bottom: 20px;
}

.hdcat-q-text {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* =========================================================
   HDCAT – OPTIONS
   ========================================================= */

.hdcat-option-label {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 15px;
    line-height: 1.4;

    margin-bottom: 8px;
    cursor: pointer;
}

/* Safe reset for radio only */
.hdcat-option-label input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

/* =========================================================
   HDCAT – Submit Test Button
   ========================================================= */

.hdcat-submit-btn {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border: none !important;

    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;

    border-radius: 6px;
    cursor: pointer;

    display: inline-block;
    margin-top: 16px;

    transition: background-color 0.25s ease, transform 0.1s ease;
}

.hdcat-submit-btn:hover {
    background-color: #218838 !important;
}

.hdcat-submit-btn:active {
    transform: scale(0.98);
}

/* =========================================================
   HDCAT – RESULT & ERRORS
   ========================================================= */

.hdcat-result {
    margin-top: 16px;
    font-size: 15px;
}

.hdcat-inline-error {
    color: #dc3545;
    font-size: 13px;
    margin-top: 6px;
    font-weight: 600;
}


/* =========================================================
   HDCAT – ANSWER / RESULT STYLING (RESTORED)
   ========================================================= */

/* Wrapper that appears after submit */
.hdcat-result {
    margin-top: 20px;
    padding-top: 10px;
}

/* Score line */
.hdcat-result strong,
.hdcat-result b {
    font-weight: 700;
}

/* -------------------------
   Correct Answer
   ------------------------- */
.hdcat-result .correct,
.hdcat-result .hdcat-correct {
    background: #e6fffa;           /* light green */
    border-left: 4px solid #16a34a;
    color: #065f46;

    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 6px;
}

/* -------------------------
   Wrong Answer
   ------------------------- */
.hdcat-result .wrong,
.hdcat-result .hdcat-wrong {
    background: #fff1f2;           /* light red / pink */
    border-left: 4px solid #dc2626;
    color: #7f1d1d;

    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 6px;
}

/* -------------------------
   Explanation Box
   ------------------------- */
.hdcat-result .explanation,
.hdcat-result .hdcat-explanation {
    background: #f8fafc;           /* soft grey-blue */
    border: 1px dashed #94a3b8;

    margin-top: 10px;
    padding: 12px 14px;

    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

/* Explanation title (if present) */
.hdcat-result .explanation strong,
.hdcat-result .hdcat-explanation strong {
    display: block;
    margin-bottom: 6px;
}
.hdcat-correct {
    background: #e6fffa;
    border-left: 4px solid #16a34a;
    color: #065f46;
    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 6px;
}

.hdcat-wrong {
    background: #fff1f2;
    border-left: 4px solid #dc2626;
    color: #7f1d1d;
    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 6px;
}

.hdcat-explanation {
    background: #f8fafc;
    border: 1px dashed #94a3b8;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 8px;
}

/* =========================================================
   HDCAT – CORRECT / WRONG ANSWER STYLING (FINAL FIX)
   ========================================================= */

.hdcat-result-block {
    margin-bottom: 20px;
}

/* Each option row */
.hdcat-result-option {
    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 6px;
    font-size: 14px;
}

/* ✅ Correct answer */
.hdcat-result-option.hdcat-correct-answer {
    background: #e6fffa;                 /* light green */
    border-left: 4px solid #16a34a;
    color: #065f46;
    font-weight: 600;
}

/* ❌ Wrong selected answer */
.hdcat-result-option.hdcat-wrong-answer {
    background: #fff1f2;                 /* light red / pink */
    border-left: 4px solid #dc2626;
    color: #7f1d1d;
    font-weight: 600;
}

/* Explanation box */
.hdcat-explanation {
    background: #f8fafc;
    border: 1px dashed #94a3b8;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
}

.hdcat-inline-error {
    margin: 12px 0;
    padding: 12px 14px;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.5;
}

.hdcat-inline-error {
    margin: 12px 0;
    padding: 12px 14px;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.5;
}


.hdcat-test-container .hdcat-result-option.hdcat-correct-answer {
    background-color: #e6fffa !important;
}

.hdcat-test-container .hdcat-result-option.hdcat-wrong-answer {
    background-color: #fff1f2 !important;
}