/******************
    Vanilla — Custom CSS
******************/

/* ===== BACKGROUND ===== */
body {
    background-color: #eef2f7 !important;
}

/* ===== QUESTION CONTAINER ===== */
.question-container {
    background-color: #ffffff !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s, border-left-color 0.2s !important;
}
.question-container:hover {
    box-shadow: 0 4px 16px rgba(51,122,183,0.13) !important;
    border-left-color: #337ab7 !important;
}

/* ===== QUESTION TITLE — نزدیک به گزینه‌ها ===== */
.question-title-container {
    background-color: #ffffff !important;
    border-bottom: none !important;
    padding: 18px 22px 6px 22px !important;
}
.ls-label-question,
.question-text,
legend.question-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1a2b3c !important;
    line-height: 1.6 !important;
}

/* ===== MANDATORY ASTERISK ===== */
.asterisk .fa-asterisk {
    color: #337ab7 !important;
    font-size: 9px !important;
}

/* ===== ANSWER CONTAINER ===== */
.answer-container {
    padding: 8px 22px 18px 22px !important;
    border: none !important;
    background-color: transparent !important;
}

/* ===== RADIO — همه یک رنگ ===== */
.radio-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.radio-list li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 5px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 7px !important;
    background-color: #f8f9fa !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    list-style: none !important;
}
.radio-list li:hover {
    background-color: #e3f0fb !important;
    border-color: #337ab7 !important;
}
.radio-item label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #3d4f60 !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex: 1 !important;
    line-height: 1.5 !important;
}
.radio-item [type='radio'] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #337ab7 !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* ===== CHECKBOX — همه یک رنگ ===== */
.checkbox-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.checkbox-list li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 5px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 7px !important;
    background-color: #f8f9fa !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    list-style: none !important;
}
.checkbox-list li:hover {
    background-color: #e3f0fb !important;
    border-color: #337ab7 !important;
}
.checkbox-item label {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #3d4f60 !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex: 1 !important;
}
.checkbox-item [type='checkbox'] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #337ab7 !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* ===== TEXT INPUT ===== */
.ls-answers input[type='text'],
.ls-answers input.text,
input.text {
    padding: 10px 13px !important;
    border: 1px solid #ced4da !important;
    border-radius: 7px !important;
    font-size: 14px !important;
    color: #1a2b3c !important;
    background-color: #ffffff !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    max-width: 500px !important;
    outline: none !important;
}
.ls-answers input[type='text']:focus,
input.text:focus {
    border-color: #337ab7 !important;
    box-shadow: 0 0 0 3px rgba(51,122,183,0.15) !important;
}

/* ===== ARRAY TABLE ===== */
.ls-answers .ls-heading th,
table.ls-answers thead th {
    background-color: #2c6096 !important;
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 12px 10px !important;
    border: none !important;
}
table.ls-answers thead th:first-child,
.ls-answers .ls-heading th:first-child {
    text-align: left !important;
    padding-left: 16px !important;
}
.ls-even { background-color: #f0f7ff !important; }
table.ls-answers tbody tr:hover { background-color: #e3f0fb !important; }
table.ls-answers tbody td {
    padding: 11px 10px !important;
    font-size: 13.5px !important;
    color: #3d4f60 !important;
    text-align: center !important;
    border-color: #e9ecef !important;
    vertical-align: middle !important;
}
table.ls-answers tbody td.answertext,
table.ls-answers tbody td:first-child {
    text-align: left !important;
    font-weight: 500 !important;
    color: #1a2b3c !important;
    padding-left: 16px !important;
}
table.ls-answers .radio-item [type='radio'],
table.ls-answers .checkbox-item [type='checkbox'] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #337ab7 !important;
}

/* ===== TABLE BORDERED ===== */
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
    border: 1px solid #dadada !important;
}

/* ===== PROGRESS BAR ===== */
.top-container .progress {
    height: 28px !important;
    border-radius: 14px !important;
    background-color: #d0dce8 !important;
    margin-bottom: 24px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
.progress .progress-bar {
    background-color: #337ab7 !important;
    background-image: none !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    line-height: 28px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    min-width: 42px !important;
}

/* ===== GROUP TITLE ===== */
.group-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #337ab7 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border-bottom: 1px solid #c5d8ea !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    background: transparent !important;
}

/* ===== HELP TEXT ===== */
.ls-questionhelp {
    color: #6c757d !important;
    font-size: 13px !important;
}
.ls-questionhelp::before {
    color: #337ab7 !important;
}

/* ===== ERROR ===== */
.ls-error, .error {
    background-color: #fff5f5 !important;
    border: none !important;
    border-left: 3px solid #dc3545 !important;
    border-radius: 6px !important;
    color: #842029 !important;
    font-size: 13px !important;
    padding: 9px 13px !important;
}