/*
 * WP Pro Quiz — Redesigned Sidebar (pixel-matched to target screenshot)
 */

/* ══════════════════════════════════════════
   TOP HEADER BAR — dark strip with Question Paper + Time Left
   ══════════════════════════════════════════ */

/* Give the content wrapper position context for the hidden timer element */
.wpProQuiz_content {
    position: relative !important;
}

/* ── TOPBAR: hidden by default; shown via .wpq_quiz_active ── */
.wpProQuiz_content .wpq_topbar {
    display: none !important;   /* hidden until quiz starts */
    background: #2c3e50 !important;
    padding: 0 16px !important;
    height: 52px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    border-radius: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Show topbar as flex when quiz is active */
.wpProQuiz_content.wpq_quiz_active .wpq_topbar {
    display: flex !important;
}

.wpq_topbar_left {
    flex: 1 !important;
}

.wpq_topbar_center {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.wpq_topbar_qp_btn {
    background: #3d5166 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 8px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: default !important;
    letter-spacing: 0.3px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.wpq_topbar_right {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.wpq_topbar_timeleft_label {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.wpq_topbar_timeleft_value {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    min-width: 62px !important;
    display: inline-block !important;
}

.wpq_topbar_fs_btn {
    background: #3d5166 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 4px !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
}

.wpq_topbar_fs_btn:hover {
    background: #4a6070 !important;
}

/* Hide the original time limit progress bar strip — info is shown in topbar */
/* Note: actual hiding done in TIME LIMIT BAR section below to keep JS working */

/* ══════════════════════════════════════════
   WHITE MAIN BODY — content area below topbar
   ══════════════════════════════════════════ */

.wpProQuiz_content .wpq_main_body {
    background: #ffffff !important;
    min-height: 400px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Remove any inherited dark backgrounds from content children */
.wpq_main_body .wpProQuiz_text,
.wpq_main_body .wpProQuiz_quiz,
.wpq_main_body .wpProQuiz_results,
.wpq_main_body .wpProQuiz_checkPage,
.wpq_main_body .wpProQuiz_infopage,
.wpq_main_body .wpProQuiz_lock,
.wpq_main_body .wpProQuiz_prerequisite,
.wpq_main_body .wpProQuiz_startOnlyRegisteredUser,
.wpq_main_body .wpProQuiz_loadQuiz,
.wpq_main_body .wpProQuiz_toplistInButton {
    background: #ffffff !important;
}

/* ══════════════════════════════════════════
   SIDEBAR CONTAINER
   ══════════════════════════════════════════ */
/* ── SIDEBAR: hidden by default; shown only after quiz starts via .wpq_quiz_active ── */
.wpProQuiz_content .wpProQuiz_reviewDiv {
    display: none !important;   /* hidden until JS adds .wpq_quiz_active */
    float: right !important;
    width: 268px !important;
    min-width: 268px !important;
    background: #ffffff !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    margin: 0 0 16px 16px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* When quiz is active (JS adds this class), show the sidebar as a block */
.wpProQuiz_content.wpq_quiz_active .wpProQuiz_reviewDiv {
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    order: 2 !important;
}

/* Left content area gets overflow:hidden so sidebar floats cleanly */
.wpProQuiz_content .wpProQuiz_quiz,
.wpProQuiz_content .wpProQuiz_results,
.wpProQuiz_content .wpProQuiz_checkPage,
.wpProQuiz_content .wpProQuiz_infopage,
.wpProQuiz_content .wpProQuiz_lock,
.wpProQuiz_content .wpProQuiz_prerequisite,
.wpProQuiz_content .wpProQuiz_startOnlyRegisteredUser,
.wpProQuiz_content .wpProQuiz_loadQuiz,
.wpProQuiz_content .wpProQuiz_startPage,
.wpProQuiz_content .wpProQuiz_toplistInButton,
.wpProQuiz_content .wpProQuiz_quizAnker {
    overflow: hidden !important;
}

/* ══════════════════════════════════════════
   USER ROW — gray silhouette avatar + name
   ══════════════════════════════════════════ */
.wpq_user_row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #fff !important;
}

.wpq_user_avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #d1d5db !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.wpq_user_avatar svg {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
}

.wpq_user_name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.3 !important;
}

/* ══════════════════════════════════════════
   STATUS BADGES GRID
   Row 1: [green pentagon] Answered  |  [red pentagon] Not Answered
   Row 2: [gray square]   Not Visited  |  [purple circle] Marked for Review
   Row 3 (full): [purple circle+check] Answered & Marked...
   ══════════════════════════════════════════ */
.wpq_status_badges {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    row-gap: 10px !important;
    column-gap: 6px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #fff !important;
}

.wpq_badge_item {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
}

.wpq_badge_item_full {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
}

/* ── Pentagon (Answered / Not Answered) ──
   6-sided shield: flat top, angled sides, pointed bottom
   Matches the screenshot badge shape exactly */
.wpq_badge_pentagon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    clip-path: polygon(15% 0%, 85% 0%, 100% 35%, 100% 75%, 50% 100%, 0% 75%, 0% 35%) !important;
    line-height: 1 !important;
}

/* ── Plain rectangle (Not Visited) ── */
.wpq_badge_square {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 26px !important;
    padding: 0 6px !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    border-radius: 3px !important;
    line-height: 1 !important;
}

/* ── Circle (Marked for Review, Answered+Marked) ── */
.wpq_badge_circle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    border-radius: 50% !important;
    position: relative !important;
    line-height: 1 !important;
}

/* Green ✓ badge on bottom-right of Answered+Marked circle */
.wpq_badge_circle_check::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    right: -2px !important;
    width: 14px !important;
    height: 14px !important;
    background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Badge colors */
.wpq_badge_answered    { background: #28a745 !important; }
.wpq_badge_notanswered { background: #dc3545 !important; }
.wpq_badge_notvisited  { background: #6c757d !important; }
.wpq_badge_marked      { background: #7b4fcc !important; }

.wpq_badge_label {
    font-size: 11.5px !important;
    color: #374151 !important;
    line-height: 1.35 !important;
    overflow: hidden !important;
}

/* ══════════════════════════════════════════
   MATHEMATICS / SUBJECT BAR — dark navy with dropdown
   ══════════════════════════════════════════ */
.wpq_section_bar {
    background: #1d3557 !important;
    color: #ffffff !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    user-select: none !important;
}

.wpq_section_dropdown {
    cursor: pointer !important;
}

.wpq_section_dropdown:hover {
    background: #16304a !important;
}

.wpq_section_bar_title {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.wpq_section_bar_arrow {
    font-size: 10px !important;
    margin-left: 8px !important;
    transition: transform 0.2s ease !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Collapsed state — arrow points right */
.wpq_section_bar.wpq_section_collapsed .wpq_section_bar_arrow {
    transform: rotate(-90deg) !important;
}

/* ══════════════════════════════════════════
   SECTION PANEL — wraps label + question grid
   ══════════════════════════════════════════ */
.wpq_section_panel {
    /* NOTE: no !important on display — jQuery slideUp/slideDown must be able
       to override it with inline display:none / display:block */
    display: block;
    background: #fff !important;
}

/* ══════════════════════════════════════════
   "Choose a Question" subheading
   ══════════════════════════════════════════ */
.wpq_section_label {
    font-size: 13px !important;
    color: #374151 !important;
    padding: 8px 14px 6px !important;
    font-weight: 400 !important;
    background: #fff !important;
    margin: 0 !important;
}

/* ══════════════════════════════════════════
   QUESTION NUMBER GRID
   The sidebar itself provides the scroll — the grid just flows naturally
   Right-side scrollbar matches the target image
   ══════════════════════════════════════════ */
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion {
    padding: 6px 8px 10px !important;
    background: #fff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    margin: 0 !important;
    max-height: none !important;
}

/* Question grid scroll wrapper — vertical scrollbar on right, matches screenshot */
.wpq_question_grid_scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 220px !important;
    scrollbar-width: auto !important;
    scrollbar-color: #9ca3af #f3f4f6 !important;
    background: #fff !important;
}

.wpq_question_grid_scroll::-webkit-scrollbar {
    width: 10px !important;
    display: block !important;
}
.wpq_question_grid_scroll::-webkit-scrollbar-track {
    background: #f3f4f6 !important;
    border-left: 1px solid #e5e7eb !important;
}
.wpq_question_grid_scroll::-webkit-scrollbar-thumb {
    background: #9ca3af !important;
    border-radius: 5px !important;
    border: 2px solid #f3f4f6 !important;
    min-height: 30px !important;
}
.wpq_question_grid_scroll::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
}

.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion > ol {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion > ol::after {
    display: none !important;
}

/* Default button — white bg, light gray border, rounded */
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion > ol > li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    width: auto !important;
    height: 38px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: #ffffff !important;
    border: 1px solid #c4c4c4 !important;
    border-radius: 4px !important;
    color: #333333 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    list-style: none !important;
    box-sizing: border-box !important;
    clip-path: none !important;
    transition: background 0.1s !important;
}

.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion > ol > li:hover {
    background: #f0f4f8 !important;
    border-color: #888 !important;
}

/* ── CURRENT question: RED trapezoid with top-left diagonal cut ──
   Polygon points (clockwise from top-left cut):
   top-left cut starts at (25%,0) going to (0%,25%) = folded corner
*/
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion ol li.wpProQuiz_reviewQuestionTarget {
    background-color: #c0392b !important;
    background-image: none !important;
    border-color: #c0392b !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
    clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 22%) !important;
}

/* ── ANSWERED: green — uses .wpq_status_answered class added by patched JS ── */
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion ol li.wpq_status_answered,
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion ol li[style*="6CA54C"],
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion ol li[style*="6ca54c"],
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion ol li[style*="108, 165"] {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: #ffffff !important;
    clip-path: none !important;
    border-radius: 4px !important;
}

/* ── MARKED: purple — uses .wpq_status_marked class added by patched JS ── */
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion ol li.wpq_status_marked,
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion ol li[style*="FFB800"],
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion ol li[style*="ffb800"],
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion ol li[style*="255, 184"] {
    background-color: #7b4fcc !important;
    border-color: #7b4fcc !important;
    color: #ffffff !important;
    clip-path: none !important;
    border-radius: 4px !important;
}

/* ── ANSWERED + MARKED together ── */
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion ol li.wpq_status_answered.wpq_status_marked {
    background-color: #7b4fcc !important;
    border-color: #7b4fcc !important;
}

/* Hide JS scrollbar helper div */
.wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion > div {
    display: none !important;
}

/* ══════════════════════════════════════════
   SUBMIT TEST BUTTON AREA
   ══════════════════════════════════════════ */
.wpq_submit_area {
    padding: 10px 12px !important;
    border-top: 1px solid #e5e7eb !important;
    background: #fff !important;
    margin: 0 !important;
}

.wpq_submit_btn {
    display: block !important;
    width: 100% !important;
    padding: 13px 0 !important;
    background: #1d3557 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    float: none !important;
    box-sizing: border-box !important;
    letter-spacing: 0.3px !important;
    transition: background 0.15s !important;
}

.wpq_submit_btn:hover {
    background: #2a4a73 !important;
    background-image: none !important;
}

/* ══════════════════════════════════════════
   TIME LIMIT BAR — visually hidden but JS-accessible so timer keeps ticking
   The timer value is mirrored to .wpq_topbar_timeleft_value via MutationObserver
   ══════════════════════════════════════════ */
.wpProQuiz_content .wpProQuiz_time_limit {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    /* NOT display:none — JS uses .show()/.hide() on this element; we leave it in flow but invisible */
}

/* ══════════════════════════════════════════
   QUESTION CONTENT (left panel)
   ══════════════════════════════════════════ */
.wpProQuiz_content .wpProQuiz_quiz {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.wpProQuiz_question_page {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #222 !important;
    padding: 14px 18px 4px !important;
    margin: 0 !important;
}

.wpProQuiz_listItem > h5.wpProQuiz_header {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    padding: 0 18px 4px !important;
    margin: 0 !important;
    display: block !important;
}

.wpProQuiz_question_text {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #1f2937 !important;
    padding: 6px 18px 4px !important;
    margin: 0 !important;
}

ul.wpProQuiz_questionList {
    background: transparent !important;
    border: none !important;
    padding: 6px 18px 18px !important;
    margin: 0 !important;
    list-style: none !important;
}

li.wpProQuiz_questionListItem {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    list-style: none !important;
    overflow: hidden !important;
}

li.wpProQuiz_questionListItem:hover {
    border-color: #1d3557 !important;
    background: #f0f4f8 !important;
}

li.wpProQuiz_questionListItem label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 14px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #374151 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
}

li.wpProQuiz_questionListItem input[type="radio"],
li.wpProQuiz_questionListItem input[type="checkbox"] {
    float: none !important;
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    accent-color: #1d3557 !important;
    display: inline-block !important;
    position: static !important;
}

li.wpProQuiz_answerCorrect { background: #dcfce7 !important; border-color: #16a34a !important; }
li.wpProQuiz_answerCorrect label { color: #15803d !important; font-weight: 600 !important; }
li.wpProQuiz_answerIncorrect { background: #fee2e2 !important; border-color: #dc2626 !important; }
li.wpProQuiz_answerIncorrect label { color: #dc2626 !important; }

/* ── BUTTONS ── */
input.wpProQuiz_button, .wpProQuiz_button {
    background: #1d3557 !important;
    background-image: none !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

input.wpProQuiz_button:hover, .wpProQuiz_button:hover {
    background: #2a4a73 !important;
    background-image: none !important;
}

input.wpProQuiz_button2:not(.wpq_submit_btn),
.wpProQuiz_button2:not(.wpq_submit_btn) {
    background: #fff !important;
    background-image: none !important;
    color: #374151 !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

input.wpProQuiz_button2:not(.wpq_submit_btn):hover {
    background: #f3f4f6 !important;
    background-image: none !important;
}

.wpProQuiz_response {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    margin: 0 18px 14px !important;
    box-shadow: none !important;
}

.wpProQuiz_content .wpProQuiz_results {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 20px !important;
    overflow: hidden !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
    .wpProQuiz_content .wpProQuiz_reviewDiv {
        float: none !important;
        width: 100% !important;
        margin: 0 0 14px 0 !important;
    }
    .wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion > ol {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}



/* ══════════════════════════════════════════
   BADGE FILTER — active & dim states
   ══════════════════════════════════════════ */
.wpq_badge_item {
    cursor: pointer !important;
    border-radius: 6px !important;
    padding: 3px 5px !important;
    transition: background 0.15s !important;
}

.wpq_badge_item:hover {
    background: #f3f4f6 !important;
}

.wpq_badge_item.wpq_filter_active {
    background: #e0e7ff !important;
    outline: 2px solid #4f46e5 !important;
    outline-offset: 1px !important;
}

/* Dim unmatched question numbers when filter is active */
.wpProQuiz_reviewQuestion ol li.wpq_filter_dim,
.wpq_qnum_chip.wpq_filter_dim {
    opacity: 0.2 !important;
    pointer-events: none !important;
}


/* ══════════════════════════════════════════
   META ROW (timer + username below section nav)
   ══════════════════════════════════════════ */
.wpq_meta_row {
    display: none !important;   /* hidden until quiz starts */
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 6px 16px !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Show meta row when quiz is active */
.wpProQuiz_content.wpq_quiz_active .wpq_meta_row {
    display: flex !important;
}

.wpq_meta_left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.wpq_meta_timeleft_label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

.wpq_meta_timeleft_value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #e65c00 !important;
}

.wpq_meta_cam {
    font-size: 16px !important;
    color: #6b7280 !important;
}

.wpq_meta_right {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

/* ══════════════════════════════════════════
   ACADLIX BOTTOM ACTION BAR
   ══════════════════════════════════════════ */
.wpq_action_bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.wpq_action_left,
.wpq_action_right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.wpq_action_btn {
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background 0.12s, opacity 0.12s !important;
    filter: none !important;
}

/* Outline style (Mark for Review, Clear Response, Previous) */
.wpq_btn_outline {
    background: #ffffff !important;
    border: 1px solid #9ca3af !important;
    color: #374151 !important;
}

.wpq_btn_outline:hover {
    background: #f3f4f6 !important;
    background-image: none !important;
}

/* Mark for Review — default outline */
.wpq_btn_mark_review {
    background: #ffffff !important;
    border: 1px solid #9ca3af !important;
    color: #374151 !important;
}

.wpq_btn_mark_review:hover {
    background: #f3f4f6 !important;
}

/* Save & Next — primary dark blue */
.wpq_btn_primary {
    background: #1d3557 !important;
    background-image: none !important;
    color: #ffffff !important;
}

.wpq_btn_primary:hover {
    background: #2a4a73 !important;
    background-image: none !important;
}

/* Submit Section — indigo */
.wpq_btn_section {
    background: #4f46e5 !important;
    background-image: none !important;
    color: #ffffff !important;
}

.wpq_btn_section:hover {
    background: #4338ca !important;
    background-image: none !important;
}

/* Submit — red */
.wpq_btn_submit {
    background: #dc3545 !important;
    background-image: none !important;
    color: #ffffff !important;
}

.wpq_btn_submit:hover {
    background: #b91c2c !important;
    background-image: none !important;
}

/* Hide the old floating buttons completely */
.wpq_hidden_btn {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* ══════════════════════════════════════════
   LAYOUT: wrap sidebar + quiz together
   ══════════════════════════════════════════ */
.wpProQuiz_content.wpq_quiz_active .wpProQuiz_quiz,
.wpProQuiz_content.wpq_quiz_active .wpProQuiz_results {
    margin-right: 0 !important;
}

/* === FORCE SCROLL FIX === */
.wpProQuiz_content .wpProQuiz_quiz {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 120px) !important;
}

.wpProQuiz_listItem {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: calc(100vh - 220px) !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

.wpq_question_grid_scroll {
    max-height: calc(100vh - 320px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 768px) {
    .wpProQuiz_content .wpProQuiz_quiz,
    .wpProQuiz_listItem,
    .wpq_question_grid_scroll {
        max-height: none !important;
    }
}

/* ══════════════════════════════════════════
   FULLSCREEN FIX — eliminate black areas on maximize / browser fullscreen
   ══════════════════════════════════════════ */

/* Ensure html and body are always white — scoped to quiz pages only */
body.wpq_quiz_open {
    background-color: #ffffff !important;
}

/* When native browser fullscreen is active, fill the entire screen */
:fullscreen .wpProQuiz_content,
:-webkit-full-screen .wpProQuiz_content,
:-moz-full-screen .wpProQuiz_content,
:-ms-fullscreen .wpProQuiz_content {
    width: 100vw !important;
    min-height: 100vh !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

/* Cover any WordPress page wrappers that might show black */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen {
    background: #ffffff !important;
    width: 100vw !important;
    height: 100vh !important;
}

:fullscreen *,
:-webkit-full-screen *,
:-moz-full-screen *,
:-ms-fullscreen * {
    max-width: 100% !important;
}

/* When the quiz content wrapper itself is fullscreened */
.wpProQuiz_content:fullscreen,
.wpProQuiz_content:-webkit-full-screen,
.wpProQuiz_content:-moz-full-screen {
    background: #ffffff !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fullscreen — topbar + main body fill height cleanly */
.wpProQuiz_content:fullscreen .wpq_main_body,
.wpProQuiz_content:-webkit-full-screen .wpq_main_body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    background: #ffffff !important;
}

/* Remove any min-height constraints that block full stretch */
.wpProQuiz_content:fullscreen .wpProQuiz_quiz,
.wpProQuiz_content:-webkit-full-screen .wpProQuiz_quiz {
    max-height: none !important;
    height: auto !important;
}

/* ══════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE IMPROVEMENTS
   ══════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Full width on mobile ── */
    .wpProQuiz_content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ── Topbar: compact on mobile ── */
    .wpq_topbar {
        height: auto !important;
        min-height: 44px !important;
        padding: 6px 10px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .wpq_topbar_qp_btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    .wpq_topbar_timeleft_label,
    .wpq_topbar_timeleft_value {
        font-size: 12px !important;
    }

    /* ── Sidebar: push below content on mobile ── */
    .wpProQuiz_content.wpq_quiz_active .wpProQuiz_reviewDiv {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 8px 0 0 0 !important;
        border-top: 2px solid #e5e7eb !important;
    }

    /* ── Main quiz area: full width ── */
    .wpProQuiz_content .wpProQuiz_quiz {
        max-height: none !important;
        overflow: visible !important;
    }

    .wpProQuiz_listItem {
        max-height: none !important;
        overflow: visible !important;
    }

    /* ── Question text: better font size ── */
    .wpProQuiz_question_text,
    .wpProQuiz_questiondiv {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    /* ── Answer options: full touch targets ── */
    .wpProQuiz_questionList li {
        padding: 10px 12px !important;
    }

    .wpProQuiz_questionList li label {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* ── Action bar: stack on very small screens ── */
    .wpq_action_bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px 10px !important;
        gap: 6px !important;
    }

    .wpq_action_left,
    .wpq_action_right {
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 6px !important;
    }

    .wpq_action_btn {
        flex: 1 1 auto !important;
        text-align: center !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        min-width: 0 !important;
    }

    /* ── Section nav tabs: scrollable ── */
    .wpq_section_tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
    }

    .wpq_section_tabs::-webkit-scrollbar {
        display: none !important;
    }

    /* ── Question grid: more columns on mobile ── */
    .wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion > ol {
        grid-template-columns: repeat(6, 1fr) !important;
    }

    /* ── Submit test button: full width ── */
    .wpq_sidebar_submit_btn,
    .wpProQuiz_reviewDiv .wpProQuiz_button2 {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* ── Meta row (timer bar below section nav) ── */
    .wpq_meta_row {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    /* ── User row ── */
    .wpq_user_row {
        padding: 8px 10px !important;
    }

    /* ── Leaderboard ticker ── */
    .wpq_leaderboard_bar,
    [class*="leaderboard"] {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {

    /* ── Ultra-compact topbar ── */
    .wpq_topbar_center {
        flex: 0 0 100% !important;
        order: -1 !important;
        justify-content: center !important;
    }

    /* ── Bigger tap targets for radio buttons ── */
    .wpProQuiz_questionList li {
        padding: 12px !important;
        margin-bottom: 4px !important;
    }

    /* ── Compact question grid ── */
    .wpProQuiz_reviewDiv .wpProQuiz_reviewQuestion > ol {
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 3px !important;
    }

    .wpq_qnum_chip {
        min-width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    /* ── Badge counters: smaller ── */
    .wpq_badge_count {
        min-width: 24px !important;
        height: 24px !important;
        font-size: 11px !important;
        line-height: 24px !important;
    }

    /* ── Action buttons: 2-per-row ── */
    .wpq_action_btn {
        flex: 1 1 calc(50% - 3px) !important;
        padding: 9px 4px !important;
        font-size: 11px !important;
    }
}


/* ══════════════════════════════════════════
   BLACK SPACE BELOW QUIZ FIX (v4 patch)
   The black area below the action bar is the page/theme body background
   showing through because the quiz wrapper doesn't stretch to fill the
   remaining viewport height. Fix: force all ancestor containers to be white
   and make the quiz content fill 100vh.
   ══════════════════════════════════════════ */

/* White background scoped to quiz wrapper only — does NOT touch page layout */
.wpProQuiz_content {
    background-color: #ffffff !important;
}

/* The quiz content wrapper itself: stretch to fill remaining height */
.wpProQuiz_content {
    min-height: calc(100vh - 60px) !important;
    background: #ffffff !important;
}

/* Main quiz body: grow to fill available space */
.wpq_main_body {
    min-height: calc(100vh - 120px) !important;
    background: #ffffff !important;
}

/* Removed: global body > div background override caused blank pages on all non-quiz pages */


/* ══════════════════════════════════════════
   UNIVERSAL FULLSCREEN TAKEOVER (v5)
   Uses position:fixed to cover 100vw×100vh regardless of any theme.
   Nothing from the page can bleed through — no black gaps possible.
   ══════════════════════════════════════════ */

.wpProQuiz_content.wpq_quiz_active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Topbar: fixed height at the top */
.wpProQuiz_content.wpq_quiz_active .wpq_topbar {
    flex: 0 0 auto !important;
    width: 100% !important;
}

/* Meta row (section/timer row): fixed height */
.wpProQuiz_content.wpq_quiz_active .wpq_meta_row {
    flex: 0 0 auto !important;
    width: 100% !important;
}

/* Main body: fills all remaining space between topbar and action bar */
.wpProQuiz_content.wpq_quiz_active .wpq_main_body {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 0 !important;
    background: #ffffff !important;
}

/* Quiz content (left): fills remaining space, scrollable */
.wpProQuiz_content.wpq_quiz_active .wpProQuiz_quiz {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Question list item: scrollable area */
.wpProQuiz_content.wpq_quiz_active .wpProQuiz_listItem {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    max-height: none !important;
    min-height: 0 !important;
}

/* Sidebar: fixed width, scrollable */
.wpProQuiz_content.wpq_quiz_active .wpProQuiz_reviewDiv {
    flex: 0 0 268px !important;
    width: 268px !important;
    min-width: 268px !important;
    overflow-y: auto !important;
    height: 100% !important;
    float: none !important;
    margin: 0 !important;
    border-left: 1px solid #e5e7eb !important;
}

/* Question grid scroll inside sidebar */
.wpProQuiz_content.wpq_quiz_active .wpq_question_grid_scroll {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Action bar: fixed height at the bottom */
.wpProQuiz_content.wpq_quiz_active .wpq_action_bar {
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: 0 !important;
    border-top: 1px solid #e5e7eb !important;
}

/* Prevent body from scrolling when quiz is active */
body.wpq_quiz_open {
    overflow: hidden !important;
}

/* ── Mobile: sidebar goes below on small screens ── */
@media (max-width: 768px) {
    .wpProQuiz_content.wpq_quiz_active .wpq_main_body {
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    .wpProQuiz_content.wpq_quiz_active .wpProQuiz_quiz {
        flex: 0 0 auto !important;
        overflow-y: visible !important;
    }

    .wpProQuiz_content.wpq_quiz_active .wpProQuiz_listItem {
        overflow-y: visible !important;
    }

    .wpProQuiz_content.wpq_quiz_active .wpProQuiz_reviewDiv {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        border-left: none !important;
        border-top: 2px solid #e5e7eb !important;
    }
}


/* ══════════════════════════════════════════
   VIEW QUESTIONS (post-quiz review) MODE
   ══════════════════════════════════════════ */

/* When viewing all questions after quiz ends, make the list scroll cleanly */
.wpProQuiz_content .wpProQuiz_list {
    padding: 0 !important;
    margin: 0 !important;
}

/* Each question item in review mode: clear separation */
.wpProQuiz_content .wpProQuiz_listItem {
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: #fff !important;
}

/* Correct answer highlight — green background */
.wpProQuiz_content .wpProQuiz_answerCorrect,
.wpProQuiz_content li.wpProQuiz_answerCorrect {
    background-color: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724 !important;
    border-radius: 4px !important;
}

/* Incorrect answer highlight — red background */
.wpProQuiz_content .wpProQuiz_answerIncorrect,
.wpProQuiz_content li.wpProQuiz_answerIncorrect {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24 !important;
    border-radius: 4px !important;
}

/* Correct message box */
.wpProQuiz_content .wpProQuiz_correct {
    background: #d4edda !important;
    border: 1px solid #28a745 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    color: #155724 !important;
    font-weight: 600 !important;
    margin: 8px 16px !important;
}

.wpProQuiz_content .wpProQuiz_correct h5 {
    color: #155724 !important;
    margin: 0 0 4px 0 !important;
}

/* Incorrect message box */
.wpProQuiz_content .wpProQuiz_incorrect {
    background: #f8d7da !important;
    border: 1px solid #dc3545 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    color: #721c24 !important;
    font-weight: 600 !important;
    margin: 8px 16px !important;
}

.wpProQuiz_content .wpProQuiz_incorrect h5 {
    color: #721c24 !important;
    margin: 0 0 4px 0 !important;
}

/* Response container */
.wpProQuiz_content .wpProQuiz_response {
    margin: 6px 16px 10px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* In view-questions mode: full scrollable list, no fixed heights */
.wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list {
    overflow: visible !important;
}


/* ══════════════════════════════════════════
   VIEW QUESTIONS MODE (post-quiz review)
   Triggered by .wpq_view_questions on the quiz container.
   Shows all questions in a scrollable layout.
   Works with or without wpq_quiz_active (desktop normal + fullscreen).
   ══════════════════════════════════════════ */

/* When in view questions mode inside fullscreen: make container scrollable */
.wpProQuiz_content.wpq_quiz_active.wpq_view_questions {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
}

/* Top bar stays pinned at top in fullscreen mode */
.wpProQuiz_content.wpq_quiz_active.wpq_view_questions .wpq_topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    width: 100% !important;
    background: #2c3e50 !important;
}

/* Hide meta row */
.wpProQuiz_content.wpq_view_questions .wpq_meta_row {
    display: none !important;
}

/* Hide action bar */
.wpProQuiz_content.wpq_view_questions .wpq_action_bar {
    display: none !important;
}

/* Hide sidebar */
.wpProQuiz_content.wpq_view_questions .wpProQuiz_reviewDiv {
    display: none !important;
}

/* Main body: plain block flow */
.wpProQuiz_content.wpq_quiz_active.wpq_view_questions .wpq_main_body {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
}

/* Quiz container: plain block */
.wpProQuiz_content.wpq_view_questions .wpProQuiz_quiz {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    flex: none !important;
}

/* Question list: no clipping */
.wpProQuiz_content.wpq_view_questions .wpProQuiz_list {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 16px !important;
}

/* Every question item: full natural height, block, no flex constraints */
.wpProQuiz_content.wpq_view_questions .wpProQuiz_listItem {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    flex: none !important;
    min-height: 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding-bottom: 16px !important;
    background: #fff !important;
}

/* Responses shown inline */
.wpProQuiz_content.wpq_view_questions .wpProQuiz_response {
    overflow: visible !important;
    max-height: none !important;
}

/* Allow body to scroll in view mode */
body.wpq_view_questions_open {
    overflow: auto !important;
}
body.wpq_quiz_open.wpq_view_questions_open {
    overflow: auto !important;
}


/* wpq-modern-layout class is no longer added by JS — block intentionally removed */


/* ══════════════════════════════════════════
   MOBILE MINIMIZE / MAXIMIZE PANEL BUTTON
   Mobile only (≤768px). The "–" / "+" button
   sits inside the existing "Choose a Question"
   label row. No layout changes on desktop.
   ══════════════════════════════════════════ */

/* Make the label row a flex row so button sits on the right */
.wpq_section_label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* The minimize / maximize button */
.wpq_panel_minmax {
    display: none;          /* hidden by default — shown only on mobile */
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    color: #374151;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    width: 26px;
    height: 26px;
    cursor: pointer;
    flex-shrink: 0;
    text-align: center;
    padding: 0;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    transition: background 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0.08);
}

.wpq_panel_minmax:active {
    background: #d1d5db;
}

@media (max-width: 768px) {
    /* Show the button on mobile */
    .wpq_panel_minmax {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* When grid is hidden, collapse its wrapper to zero */
    .wpq_question_grid_scroll.wpq_grid_hidden {
        display: none !important;
    }
}