/* ===================================================================
   Bengali Quiz Main Stylesheet - v1.8 (DEFINITIVE)
=================================================================== */

.quiz-container {
    background-color: #ffffff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 700px;
    text-align: center;
    position: relative;
    border-top: 5px solid #00796b;
    margin: 20px auto;
}

h1 { color: #333; margin-bottom: 25px; font-size: 2em; }
#question-text { color: #212529; margin-bottom: 30px; font-size: 1.6em; font-weight: 500; text-align: left; line-height: 1.5; }
.score-display { position: absolute; top: 15px; right: 25px; font-size: 1.1em; font-weight: 600; color: #6c757d; background-color: #f1f1f1; padding: 5px 12px; border-radius: 20px; }

.options-grid { display: flex; flex-direction: column; gap: 15px; margin-top: 25px; width: 100%; text-align: left; }

.option-button {
    background-color: #f8f9fa;
    border: 2px solid #e9ecef;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 100%;
    box-sizing: border-box;
    display: block;
    color: #212529;
}

.options-grid:not(.answered) .option-button:hover {
    border-color: #00796b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #000000;
    font-weight: 700;
}

/* NOTE: The .correct and .incorrect styles are now handled by the inline style block from the PHP file. */
/* This prevents theme conflicts and caching issues. */

.option-feedback { display: none; margin-top: 15px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.95em; width: 100%; }
.option-feedback.visible { display: block; }
.feedback-status { font-weight: 700; margin-bottom: 8px; display: block; }
.option-button.correct .feedback-status { color: #1c7430; }
.option-button.incorrect .feedback-status { color: #a71d2a; }
.option-button .feedback-rationale { color: #3d4246 !important; line-height: 1.6; }

.navigation-buttons { display: flex; justify-content: flex-end; margin-top: 30px; }
button { background-color: #00796b; color: #ffffff; border: none; padding: 12px 28px; border-radius: 8px; font-size: 1.1em; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; font-weight: 600; }
button:hover:not(:disabled) { background-color: #00695c; transform: translateY(-1px); }
button:disabled { background-color: #e9ecef; color: #6c757d; cursor: not-allowed; }
#restart-button { background-color: #008c7a; margin-top: 20px; }
.hidden { display: none !important; }
.bq-review-because {
    font-size: 0.98em;
    margin-left: 2px;
    margin-top: 2px;
    color: #225ea8;
}