/* ==========================================================================
   Quiz engine styling — exam.blade.php, practice.blade.php, solutionquiz.blade.php.

   Rewritten to match the main site's design system (see resources/css/app.css
   and tailwind.config.js): same brand/gold/ink palette, same system-font
   stack (no webfont — the main site loads none either), same rounded-sm /
   shadow-card visual language. Every selector below is depended on by
   public/assets/js/quiz.js and practice.js, or by the Blade templates
   themselves — none were renamed, only restyled, so this is a pure reskin
   with zero behavior change.
   ========================================================================== */

:root {
    --qz-ink: #12151b;
    --qz-paper: #eef0f3;
    --qz-paper-raised: #ffffff;
    --qz-border: rgba(18, 21, 27, .1);
    --qz-border-strong: rgba(18, 21, 27, .18);

    --qz-brand-50: #f0f4f9;
    --qz-brand-100: #dbe4f0;
    --qz-brand-500: #3d5f89;
    --qz-brand-600: #2c4c72;
    --qz-brand-700: #24466f;
    --qz-brand-800: #1c3557;

    --qz-gold-50: #fbf6ea;
    --qz-gold-200: #e7c37a;
    --qz-gold-500: #b8862e;
    --qz-gold-700: #725419;

    --qz-success: #2f7d5c;
    --qz-success-bg: #eaf6f1;
    --qz-warning: #c77d2e;
    --qz-warning-bg: #fbf1e7;
    --qz-danger: #b23b3b;
    --qz-danger-bg: #fbeeee;

    --qz-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --qz-font-display: ui-serif, "Iowan Old Style", "Source Serif Pro", Georgia, "Times New Roman", serif;

    --qz-radius: 4px;
    --qz-shadow-card: 0 1px 2px rgba(18, 21, 27, .06), 0 8px 24px rgba(18, 21, 27, .06);
}

body {
    padding-left: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    font-family: var(--qz-font);
    color: var(--qz-ink);
    font-weight: 400;
    background: var(--qz-paper);
    -webkit-font-smoothing: antialiased;
}

.btn {
    font-size: 14px !important;
}

ul {
    list-style: none;
    margin-bottom: 0;
}

p {
    font-family: var(--qz-font);
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    color: var(--qz-ink);
}

p a {
    display: inline;
    position: relative;
    color: var(--qz-brand-700);
    border-bottom: solid 1px var(--qz-gold-500);
    transition: all 200ms ease;
}

.hide { display: none; }
.is-hide { display: none; }

/* ==========================================================================
   Question status legend + palette — shared color language across all three
   quiz pages (in-progress, review-your-answers, and solutions).
   ========================================================================== */
.qstatus {
    display: inline-block;
    width: 12px;
    height: 12px;
    min-width: 12px;
    border-radius: 3px;
    margin-right: 8px;
    margin-bottom: 0;
    vertical-align: middle;
    background: var(--qz-border-strong);
    padding-left: 0;
    float: none;
}
.qstatus.answered { background: var(--qz-success); }
.qstatus.notAnswered { background: var(--qz-danger); }
.qstatus.notVisited { background: var(--qz-border-strong); }
.qstatus.marked,
.qstatus.markedanswered { background: var(--qz-gold-500); }

.questionRecords .stext {
    font-size: 12.5px;
    color: rgba(18, 21, 27, .55);
    vertical-align: middle;
}

.statusLegendItem {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 calc(50% - 14px);
}
.statusLegendItem .qstatus { margin-right: 0; }
.statusLegendItem .label { margin-left: -2px; }

.question_no {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
}
.question_no li {
    float: none;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    border-radius: var(--qz-radius);
    background: var(--qz-paper);
    color: var(--qz-ink);
    border: 1px solid var(--qz-border-strong);
    cursor: pointer;
    transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease, background .15s ease;
}
.question_no li:hover {
    border-color: var(--qz-brand-700);
    transform: translateY(-1px);
}
.questionCount.answered {
    background: var(--qz-success); color: #fff; border-color: var(--qz-success);
    box-shadow: 0 1px 2px rgba(47, 125, 92, .25);
}
.questionCount.notAnswered {
    background: var(--qz-danger); color: #fff; border-color: var(--qz-danger);
    box-shadow: 0 1px 2px rgba(178, 59, 59, .25);
}
/* The blade markup always includes .notAnswered as a base class alongside the
   conditional .notVisited/.active class, so a genuinely-unvisited question
   carries both classes at once -- this rule must come last to win. */
.questionCount.notVisited { background: var(--qz-paper); color: var(--qz-ink); border-color: var(--qz-border-strong); }
.questionCount.marked {
    background: var(--qz-gold-500); color: #fff; border-color: var(--qz-gold-500);
    box-shadow: 0 1px 2px rgba(184, 134, 46, .25);
}
.questionCount.marked.answered,
.questionCount.markeda {
    background: var(--qz-gold-500); color: #fff; border-color: var(--qz-gold-500);
    box-shadow: inset 0 0 0 2px var(--qz-success), 0 1px 2px rgba(184, 134, 46, .25);
}
.questionCount.active,
.questionCount .active {
    border: 2px solid var(--qz-brand-700) !important;
    box-shadow: 0 0 0 3px rgba(36, 70, 111, .18);
    transform: translateY(-1px);
}

/* ==========================================================================
   Header — same paper/ink language as the main site header, kept minimal on
   purpose: an exam should not tempt someone away with nav links.
   ========================================================================== */
.quizHeader {
    padding: 14px 0;
    border-bottom: 1px solid var(--qz-border);
    background: var(--qz-paper-raised);
}
.quizHeader h5 {
    margin: 0;
    font-family: var(--qz-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--qz-ink);
    line-height: 1.3;
}
.quizHeader p, #counter {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(18, 21, 27, .45);
    padding: 0;
    margin: 0 0 2px;
}
.logo_container a img { max-height: 40px; }

.timeleft {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(18, 21, 27, .45);
}
#clockdiv {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--qz-radius);
    background: var(--qz-ink);
    color: #fff;
    font-variant-numeric: tabular-nums;
}
#clockdiv span {
    padding: 0;
    border: 0;
    background: transparent;
    font-weight: 600;
    font-size: 15px;
}
.quizBtn .btn { margin-left: 8px; }

/* ==========================================================================
   Buttons — swap the generic Bootstrap outline-primary look for the site's
   brand-navy / ghost pairing.
   ========================================================================== */
.btn-primary,
.quizsubjects .rbt-badge,
#quizBlock .btn-primary {
    background: var(--qz-brand-700);
    border-color: var(--qz-brand-700);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--qz-brand-800);
    border-color: var(--qz-brand-800);
    color: #fff;
}
.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--qz-border-strong);
    color: var(--qz-ink);
    font-weight: 600;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--qz-paper);
    border-color: var(--qz-brand-700);
    color: var(--qz-brand-700);
}
.btn-outline-danger {
    background: transparent;
    border: 1px solid rgba(178, 59, 59, .35);
    color: var(--qz-danger);
    font-weight: 600;
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--qz-danger-bg);
    border-color: var(--qz-danger);
    color: var(--qz-danger);
}
.btn-danger,
.extsubmit {
    background: var(--qz-danger);
    border-color: var(--qz-danger);
    color: #fff;
    font-weight: 600;
}
.btn-danger:hover, .extsubmit:hover { background: #9c3232; border-color: #9c3232; }
.btn.blue { background: var(--qz-brand-700); color: #fff; }

/* ==========================================================================
   Layout shell.
   ========================================================================== */
#quizBlock {
    position: relative;
    min-height: calc(100vh - 160px);
    padding: 24px 24px 90px;
}
.instructionBlock { padding: 0 10px; }

/* Center the active question card in the space between header and the fixed
   footer bar, instead of it hanging near the top with a bare gap below when
   the question is short. .rightBlock (palette) is absolutely positioned so
   it is unaffected by this flex change on its sibling column. */
.exam_id > .row > .col-sm-9 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 250px);
}

.quizsubjects {
    padding: 10px 14px;
    background: var(--qz-brand-50);
    border: 1px solid var(--qz-brand-100);
    border-radius: var(--qz-radius);
    color: var(--qz-brand-800);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.quizsubjects .rbt-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}
.bg_black { background: transparent; }

/* ==========================================================================
   Question + answer panel.
   ========================================================================== */
#quizBlock .heading {
    border: 0;
    border-bottom: 1px solid var(--qz-border);
    padding: 0 0 10px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(18, 21, 27, .5);
}
#quizBlock .heading strong { font-weight: 700; }

.questionBlock {
    height: auto;
    max-height: 640px;
    overflow: auto;
    background: var(--qz-paper-raised);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-radius);
    box-shadow: var(--qz-shadow-card);
    padding: 22px;
}
.optionBlock.col-sm-6,
.col-sm-6.optionBlock {
    background: var(--qz-paper-raised);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-radius);
    box-shadow: var(--qz-shadow-card);
    padding: 22px;
}

.questions {
    font-size: 16px;
    line-height: 1.6;
    color: var(--qz-ink);
    margin-bottom: 30px;
}
#quizBlock p, #quizBlock span { font-size: 15px; }
#quizBlock span.label { font-size: 13px !important; }

/* Exam / solution answer cards (.questionsBox — id="option_{id}"). */
.answerList { display: flex; flex-direction: column; gap: 10px; }
.answerList li { margin-bottom: 0; }
.answerList .ans_label { display: inline-block; }
.answerList label p { margin-bottom: 4px; display: initial; }

.questionsBox {
    border: 1px solid var(--qz-border-strong);
    border-radius: var(--qz-radius);
    background: var(--qz-paper-raised);
    transition: border-color .15s ease, background .15s ease;
}
.questionsBox:hover { border-color: var(--qz-brand-500); background: var(--qz-brand-50); }
.questionsBox label {
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
    margin: 0;
    padding: 14px 16px;
    cursor: pointer;
    gap: 12px;
    flex-wrap: wrap;
}
.answerList label:hover { background: transparent; }
.dpx { display: flex; align-items: center; margin-left: 0; width: 100%; }
.py { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.py span { margin-left: 0; font-size: 14.5px; color: var(--qz-ink); }

/* Practice-mode answer cards (.optionBlock + .option, distinct markup from exam). */
.practicepage .optionBlock {
    background: var(--qz-paper-raised);
    padding: 14px 18px;
    cursor: pointer;
    margin-bottom: 0;
    border: 1px solid var(--qz-border-strong);
    border-radius: var(--qz-radius);
    font-size: 14.5px;
    color: var(--qz-ink);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.practicepage .optionBlock:hover { border-color: var(--qz-brand-500); background: var(--qz-brand-50); }
.optionBlock.selected { border: 1px solid var(--qz-brand-700); box-shadow: 0 0 0 3px rgba(36, 70, 111, .12); }
.optionBlock.aright { background: var(--qz-success-bg) !important; border-color: var(--qz-success) !important; box-shadow: 0 0 0 3px rgba(47, 125, 92, .12); }
.optionBlock.awrong { background: var(--qz-danger-bg) !important; border-color: var(--qz-danger) !important; box-shadow: 0 0 0 3px rgba(178, 59, 59, .12); }
.optionBlock.correct-reveal { background: var(--qz-success-bg) !important; border-color: var(--qz-success) !important; }
.opexplanation {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px dashed var(--qz-border-strong);
    font-size: 13px;
    color: rgba(18, 21, 27, .6);
}

/* Custom radio/checkbox indicator — replaces the oversized skeuomorphic
   40px box with a clean circular dot matching the site's minimal aesthetic. */
.option-input,
input[type="checkbox"], input[type="radio"] {
    margin: 0;
    line-height: normal;
}
.option-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* style.css ships a global `input[type=radio] { opacity: 0; position:
       absolute; }` rule for its own hidden-input/label::before checkbox
       pattern elsewhere on the site. That attribute selector outranks a
       plain class selector on specificity regardless of source order, so
       both properties must be forced back here for our own checked-dot
       design (which needs the input itself visible and positioned). */
    opacity: 1 !important;
    position: relative !important;
    top: 2px;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    align-self: flex-start;
    transition: all .15s ease;
    background: var(--qz-paper-raised);
    border: 2px solid var(--qz-border-strong);
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin-right: 0;
    outline: none;
    z-index: 2;
    border-radius: 50%;
}
.option-input:hover { border-color: var(--qz-brand-500); }
.option-input:checked,
.option-input.selected {
    background: var(--qz-brand-700);
    border-color: var(--qz-brand-700);
}
.option-input:checked::before,
.option-input.selected::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #fff;
}
.option-input:checked::after,
.option-input.selected::after { content: none; }
.option-input.radio { border-radius: 50%; }

/* ==========================================================================
   Right rail — palette, legend, subject label.
   ========================================================================== */
.rightBlock {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 50px;
}
.ques_list {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--qz-paper-raised);
    border: 1px solid var(--qz-border);
    border-radius: var(--qz-radius);
    box-shadow: var(--qz-shadow-card);
    color: var(--qz-ink);
    overflow: auto;
    padding-bottom: 60px;
}
.ques_list span { font-size: 13px; padding-left: 5px; }
.ques_list .block.p-10 {
    padding: 16px !important;
    border-bottom: 1px solid var(--qz-border);
    font-weight: 600;
    color: var(--qz-ink);
}

.questionRecords {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    width: 100%;
    padding: 16px;
    border-bottom: 1px solid var(--qz-border);
    background: var(--qz-paper-raised);
}
.questionRecords strong { font-size: 11px; }

.questionSectionBlock { display: inline-block; padding: 16px; }
.qnh-inner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; }

/* ==========================================================================
   Bottom action bar.
   ========================================================================== */
.questionsRow {
    bottom: 0;
    width: 100%;
    position: fixed;
    background: var(--qz-paper-raised);
    border-top: 1px solid var(--qz-border);
    box-shadow: 0 -4px 12px rgba(18, 21, 27, .05);
    padding: 14px 24px;
    z-index: 10;
}

/* ==========================================================================
   AJAX loading overlay (generic, kept for main.js compatibility).
   ========================================================================== */
#overlay {
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    display: none;
    left: 0;
    background: rgba(18, 21, 27, .6);
}
.cv-spinner { height: 100%; display: flex; justify-content: center; align-items: center; }
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top: 3px solid #fff;
    border-radius: 50%;
    animation: sp-anime .8s infinite linear;
}
@keyframes sp-anime { 100% { transform: rotate(360deg); } }

/* ==========================================================================
   Responsive.
   ========================================================================== */
@media only screen and (max-width: 991px) {
    #quizBlock { padding: 16px 16px 0; }
    .rightBlock { position: static; margin-top: 20px; }
    .ques_list { position: static; padding-bottom: 20px; }
    .questionsRow { position: static; margin-top: 20px; box-shadow: none; }
}
@media only screen and (min-width: 320px) and (max-width: 667px) {
    .quizHeader .quizBtn { margin-bottom: 10px; margin-top: 15px; }
    .questionsRow .btn { font-size: 13px; margin-bottom: 10px; }
    .questions { padding: 0; margin: 0 0 10px; }
    ul { padding-left: 0; }
}