.ps-main-container { width: 90vw; position: relative; left: 50%; right: 50%; margin-left: -45vw; margin-right: -45vw; }
.ps-media-content { background: #000; border-radius: 8px; min-height: 400px; position: relative; overflow-y: auto; max-height: 80vh; }
.modulheaderdiv { background: #0d0079; color: #fff; padding: 12px; text-align: center; font-weight: bold; border-radius: 6px; margin-bottom: 15px; }
.ps-active-blue { background: #0118D8; color: #fff; padding: 12px; font-weight: bold; border-radius: 4px; margin-bottom: 5px; }
.ps-inactive-gray { background: #f0f0f0; display: block; padding: 12px; color: #444; text-decoration: none; font-weight: bold; border-radius: 4px; margin-bottom: 5px; border-left: 4px solid #ccc; transition: 0.3s; }
.ps-inactive-gray:hover { background: #e0e0e0; border-left: 4px solid #0118D8; }
.ps-number-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 15px; }
.btn-num-default { border: 1px solid #ccc; text-align: center; padding: 5px 0; text-decoration: none; color: #666; font-size: 12px; }
.btn-num-active { background: #0118D8; color: #fff; border: 1px solid #0118D8; text-align: center; padding: 5px 0; font-size: 12px; }
.ps-btn-back { display: block; text-align: center; padding: 12px; margin-top: 20px; border: 1px dashed #0d0079; color: #0d0079; text-decoration: none; font-weight: bold; }


/* ============================================================
   1. QUESTION PAGE
   ============================================================ */

/* Modifikasi div */

.modulheaderdiv {
margin: 0px 0px 20px 0px;
    padding: 10px 15px;
    text-align: center;
    text-transform: none;
    display: block;
    color: #ffffff;
font-size: 16px;
background-color: #0d0079;
font-weight: 700;
border: 2px solid #201c1d;
 border-radius: 3px;
}

.holder {
height: auto;
display: block;
background-color: #f5f5ee;
    padding: 25px 25px;
border: 2px solid #fdf6ea;
 border-radius: 3px;
}

/* 1. Main Container */
.soal-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.instruction-box {
    background: #fdf6ea;
    border: 1px dashed #d97706;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 14px;
}
                                                                                                                                                
/* 2. Question Badge */
.soaldiv {
    display: inline-block !important;
    background: #1e3a8a !important; /* Clavius Navy */
    color: #ffffff !important;
    padding: 6px 16px !important;
    border-radius: 6px !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

/* 3. Question Text */
.question-text {
    font-size: 17px;
    line-height: 1.7;
    color: #1a202c;
    margin-bottom: 25px;
}

/* 4. Hoverable Options */
.option-item {
    display: block;
    padding: 12px 15px;
    margin: 8px 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-color: #ffffff;
    color: #4a5568;
}

.option-item:hover {
    background-color: #eff6ff; 
    border-color: #1e3a8a;
    color: #1e3a8a;
    transform: translateX(5px);
}

/* Base style for the icon */
.option-item::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 12px;
    vertical-align: middle;
    border: 2px solid #cbd5e0;
    transition: all 0.2s;
}

/* Multiple Choice (MC) gets a Circle */
.soal-container[data-type="mc"] .option-item::before {
    border-radius: 50%;
}

/* Multiple Correct (Multi) gets a Square */
.soal-container[data-type="multi"] .option-item::before {
    border-radius: 4px;
}

/* Change icon color when selected */
.option-item.selected::before {
    background-color: #1e3a8a;
    border-color: #1e3a8a;
    box-shadow: inset 0 0 0 3px #fff; /* Creates a "dot" or "check" effect */
}

/* --- OPTION ICONS (CIRCLE VS SQUARE) --- */

/* Align text and icon vertically */
.options-group .option-item {
    display: flex !important;
    align-items: center;
    padding: 12px 18px;
}

/* The Icon Shape */
.options-group .option-item::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-right: 15px;
    border: 2px solid #cbd5e0;
    background-color: #fff;
    transition: all 0.2s ease;
}

/* Multiple Choice -> Circle */
.soal-container[data-type="mc"] .option-item::before,
.soal-container[data-type="tf"] .option-item::before {
    border-radius: 50%;
}

/* Multiple Correct -> Square */
.soal-container[data-type="multi"] .option-item::before {
    border-radius: 4px;
}

/* Selected/Correct/Incorrect Filling */
.option-item.selected::before {
    background-color: #1e3a8a;
    border-color: #1e3a8a;
    box-shadow: inset 0 0 0 3px #fff; /* Creates the 'checked' look */
}

.option-item.correct::before {
    background-color: #22c55e !important;
    border-color: #22c55e !important;
    box-shadow: inset 0 0 0 3px #fff;
}

.option-item.incorrect::before {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    box-shadow: inset 0 0 0 3px #fff;
}

/* --- HEADER ROW & BADGE --- */

/* Wrapper to keep items side-by-side */
.q-header-row {
    display: flex;
    align-items: center; 
    gap: 12px;           /* Space between Box and Badge */
}

/* Reset margin on soaldiv so it doesn't push the badge up */
.soal-container .soaldiv {
    margin-bottom: 5px;
    display: inline-block !important;
}

.multi-badge {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Prevents badge from breaking into 2 lines */
}

/* 5. Discussion Section with Lightbulb */
.ansdiv {
    display: flex;
    align-items: center;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 12px 18px;
    margin-top: 20px;
    color: #92400e;
    font-weight: 700;
}

.ansdiv::before {
    content: "💡";
    font-size: 20px;
    margin-right: 12px;
}

/* Color for the Correct choice */
.option-item.correct {
    background-color: #dcfce7 !important; 
    border-color: #22c55e !important;
    color: #166534 !important;
}

/* Color for the Incorrect choice */
.option-item.incorrect {
    background-color: #fee2e2 !important; 
    border-color: #ef4444 !important;
    color: #991b1b !important;
}

/* Disable clicking after an answer is chosen */
.options-group.answered .option-item {
    pointer-events: none;
    cursor: default;
}

/* Container for the button - now Left Aligned */
.button-row {
    display: flex !important;
    justify-content: flex-start !important; 
    text-align: left !important; 
    margin-top: 20px !important;
    margin-bottom: 15px !important;
    width: auto !important; /* Changed from 100% to auto */
}

.check-btn {
    background-color: #028900 !important; 
    color: white !important;
    border: none !important;
    padding: 10px 22px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    margin-top: 10px !important;
    margin-right: 10px !important;
}

.check-btn:hover {
    background-color: #152a61;
}

/* Style for when the box is open */
.check-btn.active {
    background-color: #64748b; /* Slate Grey */
}

/* The Solution Box - placed below the button */
.solution-box {
    display: none; 
    margin-top: 15px;
    background: #f8fafc;
    border-left: 4px solid #028900;
    padding: 20px;
    border-radius: 4px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 2. Responsive Adjustments for Mobile */
@media screen and (max-width: 768px) {
    .soal-container {
        padding: 15px; /* Less padding so it doesn't push the sidebar out */
        margin-bottom: 20px;
    }
    .question-text {
        font-size: 15px; /* Slightly smaller text for phone screens */
    }
}

/* On mobile, we remove 'clear' to allow the navigation to flow correctly */
@media screen and (max-width: 768px) {
    .button-row {
        clear: none !important; 
    }
}


/* --- ADDITIONS FOR NEW QUESTION TYPES --- */

/* 1. Short Answer Input */
.short-answer-input {
    width: 100%;
    max-width: 300px;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #0d0079;
    margin-bottom: 10px;
}
.short-answer-input:focus { border-color: #1e3a8a; outline: none; }

/* 2. Multiple Correct (Selection State) */
/* In MC, clicking finishes the question. In Multi-Correct, we just highlight the box blue */
.option-item.selected {
    background-color: #eff6ff;
    border-color: #1e3a8a !important;
    color: #1e3a8a !important;
    font-weight: 700;
}

/* 3. Feedback Text */
.q-feedback {
    margin-top: 10px;
    font-weight: 700;
    font-size: 14px;
}


/* --- SHORT ANSWER SPECIFIC STYLES --- */

.short-answer-wrapper {
    margin-bottom: 20px;
    max-width: 300px; /* Keeps the input from being too wide */
}

.short-answer-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 700;
    color: #1e3a8a !important; /* Clavius Navy */
    border: 2px solid #1e3a8a !important;
    border-radius: 8px;
    transition: all 0.2s ease;
    background-color: #ffffff;
}

.short-answer-input:focus {
    border-color: #eff6ff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.2);
}

/* When the question is answered, we lock the input */
.soal-container.answered .short-answer-input {
    pointer-events: none;
    cursor: default;
}

/* --- MULTI-SHORT ANSWER STYLES --- */

/* The Grid Container */
.multi-answer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates two equal columns */
    gap: 20px;                      /* Space between columns and rows */
    margin-bottom: 25px;
}

/* The row container for 1A, 1B etc */

.multi-answer-row {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between "1A)" and the input box */
    margin-bottom: 15px;
}

.sub-label {
    font-weight: 700;
    color: #1e3a8a; /* Your Clavius Navy color */
    min-width: 35px;
}

.multi-answer-row .short-answer-wrapper {
    flex: 1;
    margin-bottom: 0; /* Remove bottom margin since the grid gap handles it */
}

/* Responsive: On mobile phones, go back to 1 column */
@media (max-width: 600px) {
    .multi-answer-grid {
        grid-template-columns: 1fr;
    }
}
    


/* Validation Styles applied via JS */
.short-answer-input.is-correct {
    background-color: #dcfce7 !important; /* Light Green */
    border-color: #22c55e !important;    /* Strong Green */
    color: #166534 !important;
}

.short-answer-input.is-wrong {
    background-color: #fee2e2 !important; /* Light Red */
    border-color: #ef4444 !important;    /* Strong Red */
    color: #991b1b !important;
}

/* Lock inputs once answered, same as your existing rule */
.soal-container.answered .short-answer-input {
    pointer-events: none;
    opacity: 0.9;
}

/* --- TRUE / FALSE: HORIZONTAL LAYOUT --- */
.tf-group {
    display: flex;
    gap: 10px;
}

.tf-group .option-item {
    flex: 1; /* Makes both buttons equal width */
    text-align: center;
    font-size: 12px;
    margin: 0; /* Removes the default top/bottom margin */
}

@media (max-width: 600px) {
    .tf-group {
        flex-direction: column; /* Stack them on very small phones */
        gap: 10px;
    }
}


/* --- MATCHING QUESTION STYLES --- */
.match-wrapper {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

.match-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.match-item {
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    transition: all 0.2s ease;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Hover & Selected States */
.match-item:hover { border-color: #1e3a8a; background: #f8faff; }
.match-item.selected { border-color: #1e3a8a; background: #eff6ff; color: #1e3a8a; box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2); }

/* Completed/Paired State */
.match-item.paired { background: #f1f5f9; border-style: dashed; color: #94a3b8; cursor: default; }

/* Result States */
.match-item.correct { background-color: #dcfce7 !important; border-color: #22c55e !important; color: #166534 !important; }
.match-item.incorrect { background-color: #fee2e2 !important; border-color: #ef4444 !important; color: #991b1b !important; }

@media (max-width: 600px) {
    .match-wrapper { gap: 10px; }
    .match-item { font-size: 14px; padding: 8px; }
}