/* --- assessment --- */
.assessment-wrapper { /* selfTest*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1200px;
    margin: 15px auto;
    padding: 0 20px;
}
.main-headline { /* selfTest*/
    text-align: center;
    font-size: 36px;
    color: #1a202c;
    margin-bottom: 20px;
    font-weight: 800;
}
.card {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    margin-bottom: 15px;
    border: 1px solid #eef2f7;
}
.card-sub-title {
    color: #2b6cb0;
    font-size: 28px;
    margin-bottom: 15px;
    border-bottom: 2px solid #ebf8ff;
    padding-bottom: 10px;
}
.content-section h3 {
    font-size: 24px;
    color: #2d3748;
    margin-bottom: 12px;
}
.content-section p {
    font-size: 20px;
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 20px;
}
.highlight-box {
    background: #f7fafc;
    padding: 15px 20px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.highlight-box p {
        margin-bottom: 0;
    }
    /* --- selfTest first panel --- */
    .selftest-container {
        width: 95%;
        max-width: 1200px;
        margin: 20px auto;
        background: #ffffff;
        padding: 40px;
        border-radius: 10px;
        box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    }

    .selftest-question-number {
        font-size: 18px;
        /* font-weight: bold; */
        color: #34495e;
    }

    .selftest-question-box {
        font-size: 18px !important;
        line-height: 1.6;
        margin-bottom: 20px;
        white-space: pre-line;
        color: #2c3e50;
        font-weight: 600;
    }

    .selftest-reply {
        display: flex;
        align-items: flex-end;
        gap: 15px;
        width: 100%;
    }
        .assessment-wrapper[dir="rtl"] .selftest-reply {
            flex-direction: row-reverse;
        }
        /* TEXT AREA SIDE → 70% */
        .input-container {
            flex: 7 1 0;
            min-width: 0;
        }

        /* BUTTON SIDE → 30% */
        .button-container {
            flex: 3 1 0;
            display: flex;
        }

            /* Make button fill its container nicely */
            .button-container .selftest-btn {
                width: 100%;
            }

    .left-align-container {
        text-align: left;
        width: 100%;
        margin-top: 15px;
    }

    .user-ans-label {
        color: #7f8c8d;
        font-weight: bold;
        margin-top: 10px;
        display: block;
    }

    .selftest-textbox {
        width: 100% !important;
        max-width: none !important;
        height: 110px !important; /* Reduced from 180px */
        display: block;
        box-sizing: border-box;
        padding: 12px;
        font-size: 16px;
        border: 1px solid #cbd5e0;
        border-radius: 6px;
        resize: none; /* Optional: prevents user from stretching the box */
    }

    .selftest-warning {
        color: red;
        font-size: 14px;
        display: block;
        margin-top: 5px;
    }

    .selftest-btn {
        padding: 10px 15px; /* Slightly tighter padding */
        font-size: 18px;
        border: none;
        line-height: 1.2;
        border-radius: 6px;
        background-color: #3498db;
        color: white;
        cursor: pointer;
        font-weight: bold;
        width: auto;
        min-width: 120px; /* Reduced from 140px to fit smaller containers */
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        white-space: nowrap;
        flex-shrink: 1; /* Allow it to shrink if parent is tiny to avoid overflow */
    }

        .selftest-btn:hover {
            background-color: #2c80b4;
        }
    /* --- selfTest second panel --- */
    .input-form-row {
        height: 45px !important;
        min-height: 45px !important;
        width: 100% !important;
        padding: 0 12px !important;
        margin-top: 5px;
        border: 1px solid #cbd5e0 !important;
    }

    .input-captcha-row {
        height: 45px !important;
        min-height: 45px !important;
        width: 80px !important; /* Keep captcha small but aligned */
        text-align: center;
        border: 1px solid #cbd5e0 !important;
    }

    .user-ans-label {
        color: #2d3748;
        font-size: 16px;
        margin-top: 0;
    }
    /*
.selftest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
*/
    /* --- assessResult --- */
    .unselectable { /* Security & Protection */
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
    }

    .result-card-item {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        padding: 25px;
        margin-bottom: 20px;
        border-radius: 8px;
    }

.expert-ans {
    background: #eef4ff;
    padding: 20px;
    font-size: 16px;
    border-right: 5px solid #3498db;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1.7;
    white-space: pre-line;
    margin-top: 15px;
    color: #2c3e50;
}

    .preface-section {
        border-bottom: 3px solid #3498db;
        margin-bottom: 30px;
        padding-bottom: 20px;
    }

        .preface-section p {
            font-size: 20px !important;
        }

    @media print {
        body {
            display: none !important;
        }
    }

    @media screen and (max-width: 1000px) {
        /* Page 2 specific: Only stack the button if it's in the reply area */
        .selftest-reply {
            flex-direction: column;
            align-items: stretch;
        }
            .assessment-wrapper[dir="rtl"] .selftest-reply {
                flex-direction: column;
            }
            .selftest-reply .selftest-btn {
                width: 100%; /* Only Page 2 button goes full width */
                margin-top: 10px;
            }
        /* Page 1 specific: Keep the "Start Test" button sized to its text */
        /* We target it via the highlight-box parent */
        .highlight-box .selftest-btn {
            width: auto;
            min-width: 140px; /* Keeps it from shrinking too much */
            margin-top: 15px; /* Adds space if the text above wraps */
        }
        /* General mobile cleanup */
        .selftest-btn {
            padding: 10px 15px;
            font-size: 15px; /* 14px is a bit too small for buttons, 16px is better */
        }

        .selftest-textbox {
            height: 100px !important;
            font-size: 22px;
            width: 100%; /* Ensures it fills the container width */
            box-sizing: border-box; /* Prevents padding from breaking the width */
        }

        .main-headline {
            font-size: 26px;
        }

        .selftest-question-number, .selftest-question-box {
            font-size: 24px !important;
        }

        .selftest-reply {
            font-size: 24px;
        }
    }