/*
 * Pro-Quiz — "Modern" style pack.
 * Load this file AFTER css/wpProQuiz_front(.min).css when the "modern" style
 * is selected in plugin settings. It layers on top of the classic stylesheet,
 * so only colors, radii, shadows, borders and states are overridden.
 *
 * HARD CONSTRAINTS honoured:
 *  - No width, height, padding, margin, font-size or line-height is ever
 *    changed, except the radio/checkbox inputs which are restored to 1em
 *    because the classic style hides them with `appearance: none` without
 *    giving them any size. This is necessary to make them visible again.
 *  - Buttons configured in settings (color/width/height) are not overridden;
 *    only border-radius, box-shadow, border-color, hover and focus are added.
 *  - No HTML/JS changes.
 */

.wpProQuiz_content {
    --wpq-accent: #1e73e7;
    --wpq-accent-dark: #1558b5;
    --wpq-accent-soft: #e8f1fd;
    --wpq-text: #3a4453;
    --wpq-muted: #64748b;
    --wpq-card-bg: #ffffff;
    --wpq-card-border: #e5e9f0;
    --wpq-control-border: #94a3b8;
    --wpq-green: #1e7e46;
    --wpq-green-soft: #e9f7ef;
    --wpq-red: #d0342c;
    --wpq-red-soft: #fdecea;
    --wpq-amber: #b45309;
    --wpq-radius: 10px;
    --wpq-radius-s: 8px;
    color: var(--wpq-text);
}

/* ==========================================================================
   1. Base typography (weights/colors only — no size changes)
   ========================================================================== */

.wpProQuiz_content h2 {
    color: #1f2937;
    font-weight: 600;
}

.wpProQuiz_header {
    color: #1f2937;
    font-weight: 600;
}

.wpProQuiz_content a {
    color: var(--wpq-accent);
}

.wpProQuiz_content a:hover,
.wpProQuiz_content a:focus {
    color: var(--wpq-accent-dark);
}

.wpProQuiz_question_page {
    color: var(--wpq-muted);
}

.wpProQuiz_question_page span {
    color: #1f2937;
}

/* ==========================================================================
   2. Cards — white surfaces, soft borders, subtle shadows
   ========================================================================== */

.wpProQuiz_questionList {
    background: var(--wpq-card-bg) !important;
    border: 1px solid var(--wpq-card-border) !important;
    border-radius: var(--wpq-radius) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.wpProQuiz_questionListItem {
    border-radius: var(--wpq-radius-s);
    transition: background-color 0.15s ease;
}

.wpProQuiz_questionListItem:hover {
    background-color: #f4f8fd;
}

.wpProQuiz_question_text {
    color: #26313f;
}

.wpProQuiz_response {
    background: var(--wpq-card-bg) !important;
    border: 1px solid var(--wpq-card-border) !important;
    border-radius: var(--wpq-radius) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}

.wpProQuiz_response .wpProQuiz_correct {
    background: var(--wpq-green-soft) !important;
    border-radius: var(--wpq-radius-s) !important;
    color: var(--wpq-green);
}

.wpProQuiz_response .wpProQuiz_incorrect {
    background: var(--wpq-red-soft) !important;
    border-radius: var(--wpq-radius-s) !important;
    color: var(--wpq-red);
}

.wpProQuiz_correct .wpProQuiz_respone_span::before,
.wpProQuiz_response .wpProQuiz_correct > span:first-child::before {
    content: "\2713\00a0\00a0";
    font-weight: bold;
}

.wpProQuiz_incorrect .wpProQuiz_respone_span::before,
.wpProQuiz_response .wpProQuiz_incorrect > span:first-child::before {
    content: "\2717\00a0\00a0";
    font-weight: bold;
}

.wpProQuiz_answerCorrect {
    background: var(--wpq-green-soft) !important;
    color: var(--wpq-green) !important;
}

.wpProQuiz_answerCorrect label {
    color: var(--wpq-green) !important;
}

.wpProQuiz_answerIncorrect {
    background: var(--wpq-red-soft) !important;
    color: var(--wpq-red) !important;
}

/* Hint / tip overlay */
.wpProQuiz_tipp > div {
    background-color: var(--wpq-accent-soft) !important;
    border: 1px solid #bcd6f7 !important;
    border-radius: var(--wpq-radius) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14) !important;
    color: #274a72;
}

/* Matrix / sorting */
.wpProQuiz_matrixSortString {
    background: var(--wpq-card-bg) !important;
    border: 1px solid var(--wpq-card-border) !important;
    border-radius: var(--wpq-radius) !important;
}

.wpProQuiz_sortable,
.wpProQuiz_sortStringItem {
    background-color: var(--wpq-card-bg) !important;
    border: 1px solid #d7dee8 !important;
    border-radius: var(--wpq-radius-s) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.wpProQuiz_sortable:hover,
.wpProQuiz_sortStringItem:hover {
    border-color: var(--wpq-accent) !important;
    box-shadow: 0 3px 10px rgba(30, 115, 231, 0.14) !important;
}

.wpProQuiz_mextrixTr > td {
    border: 1px solid var(--wpq-card-border) !important;
}

.wpProQuiz_maxtrixSortText {
    background: #f8fafc;
    border-radius: 6px;
}

.wpProQuiz_placehold {
    background-color: #ebf8ff !important;
    border: 1px dashed #7cc0f7 !important;
    border-radius: var(--wpq-radius-s) !important;
}

/* Cloze gaps */
.wpProQuiz_cloze input[type="text"] {
    border-bottom-color: var(--wpq-control-border) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpProQuiz_cloze input[type="text"]:focus {
    border-bottom-color: var(--wpq-accent) !important;
    box-shadow: 0 1px 0 var(--wpq-accent) !important;
}

.wpProQuiz_clozeCorrect {
    color: var(--wpq-green);
}

/* Status / info boxes */
.wpProQuiz_box,
.wpProQuiz_reviewQuestion {
    background-color: var(--wpq-card-bg) !important;
    border: 1px solid var(--wpq-card-border) !important;
    border-radius: var(--wpq-radius) !important;
}

/* ==========================================================================
   3. Custom radios (✓) and checkboxes (✗) — HIGH SPECIFICITY FIX
   ========================================================================== */

/* --- پایه: بازگرداندن نمایش input --- */
body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="radio"],
body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="checkbox"],
body .wpProQuiz_content .wpProQuiz_forms input[type="radio"],
body .wpProQuiz_content .wpProQuiz_forms input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    min-width: 1em !important;
    min-height: 1em !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    pointer-events: auto !important;
    z-index: auto !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    cursor: pointer !important;
    transition: box-shadow 0.15s ease;
}

/* --- hover و focus --- */
body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="radio"]:hover,
body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="checkbox"]:hover,
body .wpProQuiz_content .wpProQuiz_forms input[type="radio"]:hover,
body .wpProQuiz_content .wpProQuiz_forms input[type="checkbox"]:hover {
    box-shadow: 0 0 0 3px rgba(30, 115, 231, 0.15) !important;
}

body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="radio"]:focus-visible,
body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="checkbox"]:focus-visible,
body .wpProQuiz_content .wpProQuiz_forms input[type="radio"]:focus-visible,
body .wpProQuiz_content .wpProQuiz_forms input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(30, 115, 231, 0.3) !important;
    outline: none !important;
}

/* --- رادیو: دایره + تیک ✓ در حالت انتخاب --- */
body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="radio"],
body .wpProQuiz_content .wpProQuiz_forms input[type="radio"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9IiNmZmZmZmYiIHN0cm9rZT0iIzk0YTNiOCIgc3Ryb2tlLXdpZHRoPSIyLjUiLz48L3N2Zz4=") !important;
}

body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="radio"]:hover,
body .wpProQuiz_content .wpProQuiz_forms input[type="radio"]:hover {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9IiNmZmZmZmYiIHN0cm9rZT0iIzY0NzQ4YiIgc3Ryb2tlLXdpZHRoPSIyLjUiLz48L3N2Zz4=") !important;
}

body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="radio"]:checked,
body .wpProQuiz_content .wpProQuiz_forms input[type="radio"]:checked {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAuNzUiIGZpbGw9IiMxZTczZTciLz48cGF0aCBkPSJNNyAxMi41bDMuMiAzLjJMMTcgOSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") !important;
}

/* --- چک‌باکس: مربع گرد + ضربدر ✗ در حالت انتخاب --- */
body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="checkbox"],
body .wpProQuiz_content .wpProQuiz_forms input[type="checkbox"] {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMi41IiB5PSIyLjUiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgcng9IjQuNSIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjOTRhM2I4IiBzdHJva2Utd2lkdGg9IjIuNSIvPjwvc3ZnPg==") !important;
}

body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="checkbox"]:hover,
body .wpProQuiz_content .wpProQuiz_forms input[type="checkbox"]:hover {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMi41IiB5PSIyLjUiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgcng9IjQuNSIgZmlsbD0iI2ZmZmZmZiIgc3Ryb2tlPSIjNjQ3NDhiIiBzdHJva2Utd2lkdGg9IjIuNSIvPjwvc3ZnPg==") !important;
}

body .wpProQuiz_content .wpProQuiz_questionListItem input.wpProQuiz_questionInput[type="checkbox"]:checked,
body .wpProQuiz_content .wpProQuiz_forms input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMi41IiB5PSIyLjUiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgcng9IjQuNSIgZmlsbD0iIzFlNzNlNyIvPjxwYXRoIGQ9Ik04IDhsOCA4TTE2IDhsLTggOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==") !important;
}

/* ==========================================================================
   4. Form fields (text, mail, number, date, select, textarea)
   ========================================================================== */

.wpProQuiz_forms input[type="text"],
.wpProQuiz_forms input[type="email"],
.wpProQuiz_forms input[type="number"],
.wpProQuiz_forms textarea,
.wpProQuiz_forms select,
.wpProQuiz_addToplist input[type="text"],
.wpProQuiz_addToplist input[type="email"] {
    border-color: #cbd5e1 !important;
    border-radius: var(--wpq-radius-s) !important;
    background-color: #ffffff !important;
    text-transform: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpProQuiz_forms input:focus,
.wpProQuiz_forms textarea:focus,
.wpProQuiz_forms select:focus,
.wpProQuiz_addToplist input:focus {
    border-color: var(--wpq-accent) !important;
    box-shadow: 0 0 0 3px rgba(30, 115, 231, 0.15) !important;
    outline: none !important;
}

.wpProQuiz_required {
    color: var(--wpq-red) !important;
}

.wpProQuiz_invalidate {
    background: var(--wpq-red-soft) !important;
    border: 1px solid #f2c1c1 !important;
    border-radius: var(--wpq-radius-s) !important;
    color: #b3261e;
}

.wpProQuiz_captchaImg {
    border-radius: 4px;
    vertical-align: middle;
}

/* ==========================================================================
   5. Buttons — colors/width/height come from inline builder settings
      and are intentionally untouched. Only chrome + hover/focus added.
   ========================================================================== */

.wpProQuiz_button,
.wpProQuiz_QuestionButton {
    border-radius: var(--wpq-radius-s) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18) !important;
    transition: box-shadow 0.15s ease, filter 0.15s ease, transform 0.15s ease;
    cursor: pointer;
}

.wpProQuiz_button:hover,
.wpProQuiz_QuestionButton:hover {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.24) !important;
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.wpProQuiz_button:active,
.wpProQuiz_QuestionButton:active {
    filter: brightness(0.97);
    transform: translateY(0);
}

.wpProQuiz_button2 {
    background: #ffffff !important;
    border: 1px solid #d7dee8 !important;
    border-radius: var(--wpq-radius-s) !important;
    color: var(--wpq-text) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    transition: box-shadow 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10 !important;  /* در صورت نیاز برای بالاتر بودن از سایر عناصر */
    position: relative !important; /* در صورت نیاز */
}

.wpProQuiz_button2:hover {
    background: #f1f5f9 !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12) !important;
    transform: translateY(-1px);
}

.wpProQuiz_button:focus-visible,
.wpProQuiz_button2:focus-visible,
.wpProQuiz_QuestionButton:focus-visible {
    outline: 2px solid var(--wpq-accent) !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   6. Countdown timer — blue base, red as time runs out
   ========================================================================== */

.wpProQuiz_time_limit .time {
    color: #334155 !important;
    font-variant-numeric: tabular-nums;
}

.wpProQuiz_time_limit .time span {
    color: #1e88e5 !important;
    font-variant-numeric: tabular-nums;
    transition: color 0.4s linear;
}

.wpProQuiz_time_limit .wpProQuiz_progress {
    background-color: #1e88e5 !important;
    border-radius: 5px !important;
    box-shadow: 0 0 0 1px rgba(30, 136, 229, 0.18) !important;
    transition: background-color 0.5s linear, box-shadow 0.5s linear;
}

.wpProQuiz_time_limit.wpq-timer-warn .wpProQuiz_progress {
    background-color: #f59e0b !important;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25) !important;
}

.wpProQuiz_time_limit.wpq-timer-warn .time span {
    color: var(--wpq-amber) !important;
}

.wpProQuiz_time_limit.wpq-timer-critical .wpProQuiz_progress {
    background-color: #e53935 !important;
    box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.28) !important;
}

.wpProQuiz_time_limit.wpq-timer-critical .time span {
    color: #c62828 !important;
}

@supports (background-color: color-mix(in srgb, #e53935 50%, #1e88e5)) {
    .wpProQuiz_time_limit .wpProQuiz_progress {
        background-color: color-mix(in srgb, #e53935 calc((100 - var(--wpq-remaining, 100)) * 1%), #1e88e5) !important;
    }

    .wpProQuiz_time_limit .time span {
        color: color-mix(in srgb, #c62828 calc((100 - var(--wpq-remaining, 100)) * 1%), #1e88e5) !important;
    }
}

.wpProQuiz_time_limit_expired {
    color: var(--wpq-red) !important;
}

/* ==========================================================================
   7. Question navigation / review box
   ========================================================================== */

/* 7a. Base state — no !important on background-color so the JS setColor()
   inline styles (green for answered, amber for bookmarked) can override it.
   The JS writes background-color directly on the <li> via jQuery .css(). */
.wpProQuiz_reviewQuestion li,
.wpProQuiz_checkPage li {
    background-color: #ffffff;
    border: 1px solid #d7dee8 !important;
    border-radius: var(--wpq-radius-s) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 7b. Hover — subtle accent ring */
.wpProQuiz_reviewQuestion li:hover,
.wpProQuiz_checkPage li:hover {
    border-color: var(--wpq-accent) !important;
    box-shadow: 0 1px 4px rgba(30, 115, 231, 0.2);
}

/* 7c. Focus — accessible outline */
.wpProQuiz_reviewQuestion li:focus-visible,
.wpProQuiz_checkPage li:focus-visible {
    outline: 2px solid var(--wpq-accent) !important;
    outline-offset: 1px !important;
}

/* 7d. Current question indicator — set by JS class wpProQuiz_reviewQuestionTarget.
   NOTE: background-color is intentionally NOT declared here, matching the classic
   stylesheet behavior.  The JS setColor() writes inline background-color (green
   for answered, amber for review) and the current-question blue accent is shown
   via border-color + box-shadow only.  Declaring background-color with !important
   here would clobber those inline colors. */
.wpProQuiz_reviewQuestionTarget {
    border-color: var(--wpq-accent) !important;
    box-shadow: 0 0 0 2px rgba(30, 115, 231, 0.2) !important;
}

/* 7e. Draggable scrollbar thumb in the review box.
   Classic: background-color:#B8B8B8; the modern pack colours it with the
   accent for a cohesive look. Must NOT use !important so JS can override
   on individual li elements. */
.wpProQuiz_reviewQuestion div {
    background-color: #637497;
    box-shadow: 0 0 0 1px rgba(30, 115, 231, 0.35);
}

/* 7f. Review legend text */
.wpProQuiz_reviewLegend .wpProQuiz_reviewText {
    color: var(--wpq-muted);
}

/* 7g. Answer-marker legend swatches (classic .wpProQuiz_reviewColor).
   These are 10×10 squares shown next to legend text like "Answered", "Review". */
.wpProQuiz_reviewColor {
    height: 10px !important;
    width: 10px !important;
    display: inline-block !important;
    margin-right: 2px !important;
    vertical-align: middle !important;
    border-radius: 2px !important;
}

/* Green swatch — answered/correct */
.wpProQuiz_reviewColor.wpProQuiz_reviewCorrect {
    background-color: var(--wpq-green);
}

/* Amber swatch — for review / bookmark */
.wpProQuiz_reviewColor.wpProQuiz_reviewReview {
    background-color: var(--wpq-amber);
}

/* Blue swatch — current question */
.wpProQuiz_reviewColor.wpProQuiz_reviewCurrent {
    background-color: var(--wpq-accent);
}

/* ==========================================================================
   8. Results, points, categories
   ========================================================================== */

.wpProQuiz_correct_answer {
    color: var(--wpq-green);
    font-weight: bold;
}

.wpProQuiz_points {
    color: #1f2937 !important;
    direction: inherit !important;
    text-align: start !important;
    font-variant-numeric: tabular-nums;
}

.wpProQuiz_quiz_time {
    font-variant-numeric: tabular-nums;
}

.wpProQuiz_resultTable {
    background: var(--wpq-card-bg) !important;
    border: 1px solid var(--wpq-card-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

.wpProQuiz_resultTable table,
.wpProQuiz_resultTable table td {
    text-align: start !important;
}

.wpProQuiz_resultName {
    border: 0 !important;
    border-inline-end: 1px solid var(--wpq-card-border) !important;
    color: var(--wpq-muted);
}

.wpProQuiz_resultValue div {
    border-radius: 4px !important;
}

.wpProQuiz_catOverview li {
    border-bottom: 1px solid #eef2f6 !important;
}

.wpProQuiz_catName {
    color: #1f2937;
}

.wpProQuiz_catPercent {
    color: var(--wpq-accent-dark) !important;
}

.wpProQuiz_catScoreGraphBarWrap {
    background-color: #eef2f6 !important;
    border-radius: 6px !important;
}

.wpProQuiz_catScoreGraphBar {
    border-radius: 6px !important;
}

.wpProQuiz_chartNoData {
    text-align: center !important;
    color: var(--wpq-muted) !important;
}

/* ==========================================================================
   9. Notices and leaderboard
   ========================================================================== */

.wpProQuiz_lock,
.wpProQuiz_prerequisite,
.wpProQuiz_startOnlyRegisteredUser,
.wpProQuiz_loadQuiz {
    background-color: var(--wpq-red-soft) !important;
    border: 1px solid #f2c1c1 !important;
    border-radius: var(--wpq-radius) !important;
    color: #8c2b26;
}

.wpProQuiz_lock p,
.wpProQuiz_prerequisite p,
.wpProQuiz_startOnlyRegisteredUser p,
.wpProQuiz_loadQuiz p {
    color: #8c2b26;
}

.wpProQuiz_addToplist {
    background-color: var(--wpq-card-bg) !important;
    border: 1px solid var(--wpq-card-border) !important;
    border-radius: var(--wpq-radius) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}

.wpProQuiz_addToplistMessage {
    background-color: #fff8e6 !important;
    border: 1px solid #f2dc9c !important;
    border-radius: var(--wpq-radius-s) !important;
    color: var(--wpq-amber);
}

.wpProQuiz_toplistTable {
    border: 1px solid var(--wpq-card-border) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: var(--wpq-radius) !important;
    overflow: hidden;
}

.wpProQuiz_toplistTable caption {
    text-align: start !important;
    color: var(--wpq-muted) !important;
}

.wpProQuiz_toplistTable thead tr {
    background: var(--wpq-accent-soft) !important;
    color: #1e3a5f !important;
}

.wpProQuiz_toplistTable th {
    background: var(--wpq-accent-soft) !important;
    color: #1e3a5f !important;
}

.wpProQuiz_toplistTrOdd {
    background-color: #f6f9fc !important;
}

/* ==========================================================================
   8b. Additional classic styles not covered above
   ========================================================================= */

/* Question list item — table layout inside options */
.wpProQuiz_questionListItem > table {
    border-collapse: collapse !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: right !important;
}

.wpProQuiz_questionListItem > table .alt {
    background: inherit !important;
}

.wpProQuiz_questionListItem > table td {
    text-align: right !important;
    vertical-align: middle !important;
}

/* List resets that the modern pack doesn't explicitly restyle */
.wpProQuiz_list {
    border: 0 !important;
}

.wpProQuiz_listItem {
    position: relative !important;
    border: 0 !important;
    background-image: none !important;
}

.wpProQuiz_questionListItem input,
.wpProQuiz_questionListItem label {
    margin: 0 !important;
    font-weight: normal !important;
    display: inline !important;
}

.wpProQuiz_questionListItem label {
    float: none !important;
}

.wpProQuiz_questionListItem input {
    float: none !important;
    display: inline !important;
}

/* Results list reset */
.wpProQuiz_resultsList {
    border: 0 !important;
}

.wpProQuiz_resultsList > li {
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style-type: none !important;
    border: 0 !important;
}

/* Question page numbering */
.wpProQuiz_question_page span {
    font-weight: bold !important;
}

/* Sort / matrix */
.wpProQuiz_sort {
    width: 25px !important;
}

.wpProQuiz_sort_correct_answer {
    font-weight: bold !important;
    margin-right: 5px !important;
    display: none !important;
}

.wpProQuiz_maxtrixSortCriterion {
    padding: 5px !important;
}

/* Cloze input — ensure native appearance */
.wpProQuiz_quiz input[type="checkbox"] {
    -webkit-appearance: checkbox;
}

.wpProQuiz_quiz input[type="radio"] {
    -webkit-appearance: radio;
}

/* Forms table cell alignment */
.wpProQuiz_forms table .alt {
    background: inherit !important;
}

.wpProQuiz_forms td {
    vertical-align: top !important;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
}

.wpProQuiz_forms input,
.wpProQuiz_forms textarea,
.wpProQuiz_forms label,
.wpProQuiz_forms select {
    margin: 0 !important;
    float: none !important;
    display: inline !important;
    text-transform: lowercase !important;
}

.wpProQuiz_forms select {
    width: auto !important;
}

/* Hidden result form (shown on demand) */
.wpProQuiz_resultForm {
    display: none;
}

/* ==========================================================================
   8c. Anti-cheat notice boxes
   ========================================================================= */

.wpProQuiz_acNotice {
    margin: 8px 0 !important;
    padding: 6px 10px !important;
    border: 1px solid #e2a900 !important;
    background-color: #fff8e1 !important;
    border-radius: var(--wpq-radius-s) !important;
    color: #7a5400 !important;
}

.wpProQuiz_acBlock {
    margin: 8px 0 !important;
    padding: 8px 12px !important;
    border: 1px solid #d32f2f !important;
    background-color: #fdecea !important;
    color: #b71c1c !important;
    border-radius: var(--wpq-radius-s) !important;
    font-weight: bold !important;
}

.wpProQuiz_acDisabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.wpProQuiz_acFs {
    margin: 10px 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #f57c00 !important;
    background-color: #fff3e0 !important;
    border-radius: var(--wpq-radius-s) !important;
    color: #e65100 !important;
}

.wpProQuiz_acFs p {
    margin: 0 0 8px 0 !important;
    font-weight: bold !important;
}

.wpProQuiz_acOverlay {
    margin: 10px 0 !important;
    padding: 14px !important;
    border: 1px solid #d32f2f !important;
    background-color: #fdecea !important;
    color: #b71c1c !important;
    border-radius: var(--wpq-radius-s) !important;
    font-weight: bold !important;
}

/* ==========================================================================
   8d. Category score graph (classic styles modernised)
   ========================================================================= */

.wpProQuiz_catScoreGraph h4 {
    margin-bottom: 10px !important;
    color: var(--wpq-text) !important;
}

.wpProQuiz_catScoreName {
    font-weight: 500 !important;
    color: var(--wpq-text) !important;
}

.wpProQuiz_catScoreGraphPercent {
    font-weight: bold !important;
    color: var(--wpq-accent-dark) !important;
}

/* ==========================================================================
   8e. Review box width / float (from classic, modernized)
   ========================================================================= */

.wpProQuiz_reviewDiv {
    margin: 20px 0 !important;
    float: right !important;
    width: 100% !important;
}

/* ==========================================================================
   8f. Clear float helper
   ========================================================================= */

.clearClass {
    clear: both !important;
}

/* ==========================================================================
   9. Motion preferences
   ========================================================================== */

body.rtl .wpProQuiz_catPercent,
[dir="rtl"] .wpProQuiz_catPercent {
    left: 0 !important;
    right: auto !important;
}

body.rtl .wpProQuiz_question,
[dir="rtl"] .wpProQuiz_question {
    margin: 10px 10px 10px 0 !important;
}

body.rtl .wpProQuiz_reviewQuestion ol,
body.rtl .wpProQuiz_checkPage ol,
[dir="rtl"] .wpProQuiz_reviewQuestion ol,
[dir="rtl"] .wpProQuiz_checkPage ol {
    padding: 5px 5px 0 12px !important;
	z-index: 9999 !important;
}

body.rtl .wpProQuiz_reviewQuestion li,
body.rtl .wpProQuiz_checkPage li,
[dir="rtl"] .wpProQuiz_reviewQuestion li,
[dir="rtl"] .wpProQuiz_checkPage li {
    margin: 0 0 5px 5px !important;
}

body.rtl .wpProQuiz_sortStringList > li,
[dir="rtl"] .wpProQuiz_sortStringList > li {
    float: right !important;
}

body.rtl .wpProQuiz_reviewQuestion div,
[dir="rtl"] .wpProQuiz_reviewQuestion div {
    right: auto;
    left: 0;
}

body:not(.rtl):not([dir="rtl"]) .wpProQuiz_reviewDiv {
    float: left !important;
}

body:not(.rtl):not([dir="rtl"]) .wpProQuiz_reviewLegend {
    float: left !important;
}

body.rtl .wpProQuiz_forms table,
body.rtl .wpProQuiz_forms table td,
body.rtl .wpProQuiz_questionListItem > table,
body.rtl .wpProQuiz_questionListItem > table td,
[dir="rtl"] .wpProQuiz_forms table,
[dir="rtl"] .wpProQuiz_forms table td,
[dir="rtl"] .wpProQuiz_questionListItem > table,
[dir="rtl"] .wpProQuiz_questionListItem > table td {
    text-align: start !important;
}

body:not(.rtl):not([dir="rtl"]) .wpProQuiz_forms table,
body:not(.rtl):not([dir="rtl"]) .wpProQuiz_forms table td,
body:not(.rtl):not([dir="rtl"]) .wpProQuiz_questionListItem > table,
body:not(.rtl):not([dir="rtl"]) .wpProQuiz_questionListItem > table td {
    text-align: start !important;
}

/* ==========================================================================
   11. Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .wpProQuiz_button,
    .wpProQuiz_button2,
    .wpProQuiz_QuestionButton,
    .wpProQuiz_questionListItem,
    .wpProQuiz_sortable,
    .wpProQuiz_sortStringItem,
    .wpProQuiz_time_limit .wpProQuiz_progress,
    .wpProQuiz_time_limit .time span {
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   12. Fallback: show icons on label if input is still hidden
       (useful for themes that apply display:none !important directly)
   ========================================================================== */

@supports selector(:has(*)) {
    body .wpProQuiz_content .wpProQuiz_questionListItem label:has(> input.wpProQuiz_questionInput[type="radio"]:checked)::before {
        content: "\2713\00a0\00a0";
        color: #1e73e7;
        font-weight: bold;
        display: inline-block;
    }

    body .wpProQuiz_content .wpProQuiz_questionListItem label:has(> input.wpProQuiz_questionInput[type="checkbox"]:checked)::before {
        content: "\2717\00a0\00a0";
        color: #1e73e7;
        font-weight: bold;
        display: inline-block;
    }
}

/* ==========================================================================
   13. Responsive — review bar full-width on small screens
   ========================================================================= */

@media (max-width: 800px) {
    .wpProQuiz_reviewDiv {
        float: none !important;
        width: 100% !important;
    }

    .wpProQuiz_reviewDiv {
        margin: 25px 0 !important;
    }
}

/* ==========================================================================
   14. Review navigation — CSS variable aliases for JS-driven colors

       The JS (wpProQuiz_front.js setColor) writes inline `background-color`
       on the <li> elements:
         - solved/answered → #6CA54C (green)
         - bookmark/review  → #FFB800 (amber/yellow)

       Our base rule (7a) uses a plain background-color (no !important) so
       those inline styles always win over the CSS cascade.
   ========================================================================= */
/* 10.14 - login box (login-required quizzes) */

.wpProQuiz_loginBoxIcon {
    background: rgba(140, 43, 38, 0.08);
    color: #8c2b26;
}