.quiz-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 20px;
    background: #FAF3E0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    text-align: center;
    display: none;
}

#topicContainer {
    display: block;
}

.pg-head {
    color: #8B3A3A; 
    margin-bottom: 5px;
    font-size: 24px;
}

#lblQuestionCounts {
    margin-bottom: 5px;
    font-size: 16px !important;
    font-weight: bold;
    padding: 5px;
    color: #8B3A3A;
}

#question-container {
    margin-bottom: 20px;
    font-size: 20px !important;
    font-weight: bold;
    background-color: #FFECD1;
    padding: 15px;
    border-radius: 12px; /* Slightly curved edges */
    color: #4B4B4B;
}

#options-container {
    display: flex; /* Use Flexbox to align items */
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically if needed */
    gap: 10px; /* Add space between buttons */
}

/* Option buttons (via class .option-button) */
.option-button {
    background-color: #FF784E; /* Orangish-red color for options */
    color: white;
    padding: 10px 20px; /* Add some horizontal padding */
    margin: 5px 0; /* Add vertical margin to space out buttons */
    border: none;
    border-radius: 12px;
    cursor: pointer;
    width: 100%; /* Make buttons stretch to fit the container */
    max-width: 300px; /* Limit the maximum width of each button */
    font-size: 16px;
    font-weight: bold;
    display: inline-block; /* Ensure buttons stack vertically */
    text-align: center; /* Center the text in the button */
    transition: transform 0.2s, box-shadow 0.2s;
}

    /* Hover effect for buttons */
    .option-button:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

#next-btn {
    background-color: #FFB74D; /* Brownish-red color for Next button */
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    max-width: 250px;
    margin-top: 20px;
    font-weight: bold;
    transition: background-color 0.3s ease; /* Smooth transition for enabling/disabling */
}

    #next-btn:disabled {
        background-color: #D6D6D6; /* Lighter shade of the brownish-red to show it's disabled */
        color: #FFFFFF; /* Optional: Adjust text color for better contrast */
        cursor: not-allowed; /* Change cursor to show it's not clickable */
        opacity: 0.6; /* Add some transparency */
    }


/* Correct answer styling */
.correct {
    border: 3px solid #2ecc71; /* Green for correct answers */
    background-color: #4CAF50;
}

/* Wrong answer styling */
.wrong {
    border: 3px solid #e74c3c; /* Red for wrong answers */
    background-color: #E53935;
}

/* Disable pointer events after answer selection */
.no-pointer {
    pointer-events: none;
    cursor: default !important;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .quiz-container {
        width: 100%;
    }

    .option-button {
        max-width: 100%; /* Allow buttons to expand fully on small screens */
    }
}

/*Question Review container*/
#review-container h1 {
    font-size: 20px !important;
    padding: 15px;
}

.review-question h2 {    
    font-size: 18px !important;
    text-align: left;
}

.review-question ul {
    font-size: 16px !important;
    text-align: left;
}

.topic-list {
    max-width: 400px; /* Restrict width */
    margin: 20px; /* Center horizontally */
    padding: 10px;
    list-style-type: disc; /* Numbered list */
}

.topic-item {
    font-size: 1.2rem; /* Make text slightly bigger */
    padding: 10px;
    border-bottom: 1px solid #ccc; /* Subtle separator */
    cursor: pointer;
    transition: background 0.3s ease;
}

    .topic-item:hover {
        background: #f0f0f0; /* Light gray on hover */
    }
#backtoTopics {
    background: none;
    border: none;
    color: #007BFF; /* Bootstrap blue; change as needed */
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font: inherit; /* Inherit font from parent for a more natural look */
    margin-top: 15px;
}

    #backtoTopics:hover {
        color: #0056b3; /* Darker blue on hover */
        text-decoration: none; /* Optional: removes underline on hover */
    }