/* =====================================================
   FILE: assets/css/style.css
===================================================== */

/* ===== RESET ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* ===== COMMON ===== */
body {
    background: #f4f6f8;
    color: #222;
}

.stp-box,
.stp-result-box,
#stp-result-wrapper {
    max-width: 900px;
    margin: 30px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}

h2, h3 {
    margin-bottom: 15px;
}

/* ===== LOGIN / REGISTER ===== */
.stp-box input,
.stp-box button {
    width: 100%;
    padding: 10px;
    margin-bottom: 12px;
}

.stp-box button {
    background: #0a63e8;
    color: #fff;
    border: 0;
    cursor: pointer;
    border-radius: 4px;
}

/* ===== EXAM UI ===== */
.stp-exam-header {
    display: flex;
    justify-content: space-between;
    background: #0a63e8;
    color: #fff;
    padding: 12px 20px;
}

.stp-exam-body {
    padding: 20px;
}

.stp-question {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}

.stp-option {
    display: block;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 8px 0;
    cursor: pointer;
}

.stp-option input {
    margin-right: 8px;
}

.stp-exam-footer {
    text-align: center;
    padding: 20px;
}

.stp-exam-footer button {
    padding: 12px 30px;
    font-size: 16px;
    background: #28a745;
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

/* ===== RESULT ===== */
.stp-summary p {
    margin: 6px 0;
    font-size: 15px;
}

.stp-analysis {
    margin-top: 20px;
}

.stp-question-box {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 15px;
}

.stp-correct {
    color: green;
    font-weight: bold;
}

.stp-wrong {
    color: red;
    font-weight: bold;
}

/* ===== ADS ===== */
.stp-ad-box {
    margin: 20px 0;
    padding: 15px;
    background: #f1f1f1;
    text-align: center;
    font-size: 14px;
    color: #666;
    border: 1px dashed #ccc;
}

/* ===== ACTIONS ===== */
.stp-actions {
    text-align: center;
    margin-top: 30px;
}

.stp-actions button {
    padding: 12px 25px;
    background: #0a63e8;
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .stp-box,
    #stp-result-wrapper {
        margin: 15px;
        padding: 15px;
    }

    .stp-exam-header {
        flex-direction: column;
        gap: 10px;
    }
}

/* =====================================================
   ADDITIONS ONLY FOR TEST-ATTEMPT PAGE
   (Nothing above changed / removed)
===================================================== */

/* layout wrapper */
.stp-exam-wrapper {
    max-width: 1200px;
    margin: 0px auto;
    background: #fff;
}

/* main layout */
.stp-exam-main {
    display: flex;
    min-height: 500px;
}

/* question area */
.stp-question-area {
    flex: 3;
    padding: 20px;
}

/* hide all questions by default (JS controls visibility) */
.stp-question {
    display: none;
}

/* palette */
.stp-palette {
    flex: 1;
    border-left: 1px solid #ddd;
    padding: 15px;
    background: #fafafa;
}

#stpPalette {
    display: flex;
    flex-wrap: wrap;
}

#stpPalette button {
    width: 38px;
    height: 38px;
    margin: 5px;
    border-radius: 4px;
    border: 1px solid #999;
    background: #e9ecef;
    cursor: pointer;
    font-weight: bold;
}

/* active question */
#stpPalette button.active {
    background: #0a63e8;
    color: #fff;
    border-color: #0a63e8;
}

/* attempted question */
#stpPalette button.attempted {
    background: #28a745;
    color: #fff;
    border-color: #28a745;
}

/* mobile exam layout */
@media (max-width: 768px) {
    .stp-exam-main {
        flex-direction: column;
    }

    .stp-palette {
        border-left: 0;
        border-top: 1px solid #ddd;
    }
}
/* ================= CORE RESET ================= */
body{
    margin:0;
    background:#f4f6f8;
}

/* ================= WRAPPER ================= */
.stp-exam-wrapper{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:#fff;
}

/* ================= HEADER ================= */
.stp-exam-header{
    background:#0a63e8;
    color:#fff;
    padding:12px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* ================= DESKTOP LAYOUT ================= */
 

/* LEFT – DESCRIPTION */
.stp-desc-area{
    border-right:1px solid #ddd;
    padding:15px;
    overflow-y:auto;
    background:#fafafa;
}

/* CENTER – QUESTION */
.stp-question-area{
    padding:20px;
    overflow-y:auto;
}

/* RIGHT – PALETTE */
.stp-palette{
    border-left:1px solid #ddd;
    padding:15px;
    overflow-y:auto;
    background:#fafafa;
}

#stpPalette{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}

#stpPalette button{
    height:38px;
    min-width:38px;
    border-radius:4px;
    border:1px solid #999;
    background:#e9ecef;
    font-weight:bold;
    cursor:pointer;
}

#stpPalette button.active{
    background:#0a63e8;
    color:#fff;
}

#stpPalette button.attempted{
    background:#28a745;
    color:#fff;
}

/* ================= QUESTIONS ================= */
.stp-question{
    display:none;
}

/* ================= QUESTION LAYOUT ================= */
.stp-q-wrap{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.stp-q-desc{
    width:35%;
    max-height:65vh;
    overflow-y:auto;
    padding-right:10px;
    border-right:1px solid #ddd;
}

.stp-q-main{
    width:65%;
}

/* ================= DESCRIPTION ================= */
.stp-desc-img{
    max-width:100%;
    margin-bottom:10px;
}

.stp-desc-text{
    font-size:15px;
    line-height:1.6;
}

/* ================= TITLE IMAGE ================= */
.stp-title-img{
    max-width:100%;
    margin:10px 0;
}

/* ================= OPTIONS ================= */
.stp-option{
    display:block;
    border:1px solid #ddd;
    padding:10px;
    margin:10px 0;
    border-radius:6px;
    cursor:pointer;
}

.stp-opt-text{
    margin-bottom:6px;
}

.stp-option-img{
    min-height:120px;
    max-height:220px;
    display:block;
    margin-top:6px;
}

/* ================= ZOOM ================= */
.stp-zoom-img{
    cursor:zoom-in;
}

/* ================= FOOTER ================= */
.stp-exam-footer{
    position:sticky;
    bottom:0;
    background:#fff;
    border-top:1px solid #ddd;
    padding:12px;
    display:flex;
    justify-content:center;
    gap:15px;
}

/* ================= QUESTION NAV ================= */
.stp-question-nav{
    position:sticky;
    bottom:60px;
    background:#fff;
    padding:12px;
    display:flex;
    gap:12px;
    justify-content:center;
    border-top:1px solid #ddd;
}

.stp-question-nav button{
    padding:10px 18px;
    border-radius:6px;
    border:0;
    cursor:pointer;
    background:#0a63e8;
    color:#fff;
}

#stpReview{background:#6f42c1;}
#stpSaveNext{background:#198754;}
#stpSkipNext{background:#6c757d;}

/* ================= SUBMIT BAR ================= */
.stp-submit-bar{
    position:sticky;
    bottom:0;
    background:#f8f9fa;
    border-top:2px solid #ddd;
    padding:14px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:20;
}

.stp-submit-bar button{
    padding:12px 28px;
    background:#28a745;
    color:#fff;
    border:0;
    border-radius:6px;
    font-size:16px;
}

/* ================= PALETTE STATES ================= */
#stpPalette .palette-btn.answered{background:#28a745;color:#fff;}
#stpPalette .palette-btn.review{background:#6f42c1;color:#fff;}
#stpPalette .palette-btn.answered.review{background:#ffc107;color:#000;}

/* ================= INSTRUCTIONS ================= */
.stp-instruction-wrap{
    padding:10px 15px;
    border-bottom:1px solid #ddd;
    background:#f8f9fa;
}

.stp-instr-btn{
    background:#0a63e8;
    color:#fff;
    border:0;
    padding:8px 14px;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
}

.stp-instruction-box{
    margin-top:12px;
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    padding:12px;
}

.stp-instr-list{
    margin-left:18px;
    margin-bottom:10px;
}

.stp-instr-list li{
    margin:6px 0;
    font-size:14px;
}

/* ================= LEGEND ================= */
.stp-legend{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.stp-legend .lg{
    padding:6px 10px;
    border-radius:4px;
    font-size:13px;
    color:#fff;
}

.lg.notvisited{background:#adb5bd;}
.lg.answered{background:#28a745;}
.lg.review{background:#6f42c1;}
.lg.answered.review{background:#ffc107;color:#000;}
.lg.active{background:#0a63e8;}

/* ================= WATERMARK ================= */
.stp-exam-wrapper::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background:url("https://solotutes.com/wp-content/uploads/2025/08/solotutes-round-logo-55x55.png") repeat;
    background-size:120px 120px;
    opacity:0.05;
}

.stp-exam-wrapper::after{
    content:"solotutes.com";
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:60px;
    font-weight:700;
    color:#000;
    opacity:0.04;
    transform:rotate(-30deg);
    pointer-events:none;
}

.stp-exam-wrapper>*{
    position:relative;
    z-index:2;
}

/* ================= MOBILE ================= */
@media(max-width:768px){

    .stp-exam-main{
        grid-template-columns:1fr;
    }

    .stp-palette{
        order:-1;
        border:none;
        border-bottom:1px solid #ddd;
        overflow-x:auto;
    }

    #stpPalette{
        display:flex;
        flex-wrap:nowrap;
    }

    .stp-desc-area{
        border:none;
        border-bottom:1px solid #ddd;
        max-height:200px;
    }

    .stp-question-area{
        padding:15px;
    }

    .stp-q-wrap{
        flex-direction:column;
    }

    .stp-q-desc,
    .stp-q-main{
        width:100%;
        max-height:none;
        border:none;
        padding:0;
    }

    .stp-legend{
        flex-direction:column;
    }
}
/* ================= FINAL EXAM LAYOUT FIX ================= */

.stp-exam-main{
    display:flex;
    align-items:stretch;
    overflow:hidden;
}

/* LEFT : Question + Description */
.stp-question-area{
    flex:1;
    min-width:0;               /* IMPORTANT: prevents squeeze */
    padding:20px;
    overflow-y:auto;
}

/* RIGHT : Palette */
.stp-palette{
    width:260px;               /* controlled width */
    min-width:260px;
    max-width:260px;
    border-left:1px solid #ddd;
    padding:15px;
    overflow-y:auto;
    background:#fafafa;
}

/* Palette grid tight & clean */
#stpPalette{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
}

/* Question inner split remains SAME */
.stp-q-wrap{
    display:flex;
    gap:20px;
}

/* Description */
.stp-q-desc{
    width:35%;
    max-height:65vh;
    overflow-y:auto;
    padding-right:10px;
    border-right:1px solid #ddd;
}

/* Question */
.stp-q-main{
    width:65%;
}
@media(max-width:768px){

    .stp-exam-main{
        flex-direction:column;
    }

    .stp-palette{
        width:100%;
        min-width:100%;
        max-width:100%;
        border-left:0;
        border-bottom:1px solid #ddd;
        overflow-x:auto;
    }

    #stpPalette{
        display:flex;
        flex-wrap:nowrap;
    }

    .stp-q-wrap{
        flex-direction:column;
    }

    .stp-q-desc,
    .stp-q-main{
        width:100%;
        border:none;
    }
}
/* ================= FIXED INSTRUCTION / LEGEND PANEL ================= */

/* wrap stays normal (no layout effect) */
.stp-instruction-wrap{
    position:relative;
}

/* toggle button fixed */
#stpToggleInstr{
    position:fixed;
    top:90px;
    right:15px;
    z-index:1002;
}

/* instruction box becomes fixed panel */
#stpInstructionBox{
    position:fixed;
    top:0;
    right:-320px;               /* hidden */
    width:320px;
    height:100vh;
    background:#fff;
    border-left:1px solid #ddd;
    padding:15px;
    overflow-y:auto;
    z-index:1001;
    transition:right 0.3s ease;
    box-shadow:-4px 0 12px rgba(0,0,0,0.1);
}

/* open state */
#stpInstructionBox.open{
    right:0;
}

/* legend vertical */
#stpInstructionBox .stp-legend{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:10px;
}

/* mobile width */
@media(max-width:768px){
    #stpInstructionBox{
        width:90%;
        right:-90%;
    }
}