/* ========================= */
/* ===== Container Styles ===== */
/* ========================= */

#textContainer,
#questionsContainer {
    height: 70vh;
    overflow-y: auto; /* Changed from overflow: hidden; to enable vertical scrolling */
    position: relative; /* Establish positioning context for overlays */
    display: flex;
    flex-direction: column;
    background: #f9f9f9; /* Light background for readability */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add slight shadow */
    border-radius: 8px; /* Optional: Rounded corners */
    font-size: 18px; /* Slightly larger font size for visibility */

}

/* Updated selector from h3 to h2 to match the HTML structure */
#textContainer h2 {
    margin: 0 0 20px 0; /* Space below header */
    padding: 15px 20px; /* Added padding for better spacing */
    font-size: 18px; /* Slightly larger font size for visibility */
    font-weight: 700; /* Retain bold text */
    text-align: center;
    background: linear-gradient(135deg, #4a90e2, #0066cc); /* Gradient for a modern look */
    color: #fff; /* Keep text white for contrast */
    border-radius: 12px; /* Rounded corners for smoother look */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Enhanced shadow for depth */
    text-transform: uppercase; /* Make text uppercase for emphasis */
    letter-spacing: 1px; /* Slight spacing for a cleaner style */
}


/* ========================= */
/* ===== Questions Container Styles ===== */
/* ========================= */

#questionsContainer {
    display: flex;
    flex-direction: column;
}

#questionsContainer .question-content {
    flex-grow: 1; /* Allow the question content to grow and take available space */
    padding: 15px;
    overflow-y: auto; /* Enable vertical scrolling for question content */
}

/* ========================= */
/* ===== Navigation Buttons Styles ===== */
/* ========================= */

/* Retain positioning and layout styles for navigation buttons */
/* Removed color-related properties to prevent conflicts with external styles */

#questionsContainer .navigation {
    flex-shrink: 0; /* Prevent navigation from shrinking */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    border-top: 1px solid #ddd;
}

#questionsContainer .navigation button {
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    /* Removed background-color and color properties */
}

/* Removed background-color for disabled state */
#questionsContainer .navigation button:disabled {
    cursor: not-allowed;
    /* Removed background-color */
}

/* Removed empty rule set for hover state */
/* If external styles handle hover, no need to define here */

/* Retain counter styles */
#questionsContainer .navigation #questionCounter {
    font-size: 14px;
    color: #555;
}

/* ========================= */
/* ===== Answer Options Styles ===== */
/* ========================= */

.answer-option {
    font-size: 15px; /* Updated font size to 15px */
    padding: 10px 15px; /* Increased padding for better click area */
    list-style: none;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px; /* Increased margin for better spacing */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    background-color: #fff; /* Default background */
    color: #333; /* Default text color */
}

.answer-option:hover {
    background-color: #e0e7ff; /* Subtle hover effect */
}

.answer-option.selected {
    background-color: #d1e7dd; /* Light green background */
    border-color: #0f5132; /* Darker green border */
    color: #0f5132; /* Darker green text */
    font-weight: bold; /* Optional: Make selected text bold */
}

.answer-option:active {
    transform: scale(0.98);
}

/* ========================= */
/* ===== Animation Styles ===== */
/* ========================= */

.question-content {
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.slide-in-right {
    animation-name: slideInRight;
}

.slide-out-left {
    animation-name: slideOutLeft;
}

.slide-in-left {
    animation-name: slideInLeft;
}

.slide-out-right {
    animation-name: slideOutRight;
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
}

/* ========================= */
/* ===== Optional Enhancements ===== */
/* ========================= */

/* Ensure the question text is readable */
.question-content p {
    font-size: 18px; /* Slightly larger font size for visibility */
    margin-bottom: 20px; /* Increased margin for better spacing */
    line-height: 1.5;
}

/* Scrollbar styling for better aesthetics (optional) */
#questionsContainer .question-content::-webkit-scrollbar {
    width: 8px;
}

#questionsContainer .question-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#questionsContainer .question-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

#questionsContainer .question-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ========================= */
/* ===== Popup Styles ===== */
/* ========================= */

/* Popup overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Popup content */
.popup-content {
    background: #fff;
    padding: 20px;
    max-width: 80%;
    max-height: 80%;
    overflow-y: auto;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-family: Arial, sans-serif;
}

/* Close button */
.close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.3s ease; /* Added transition for hover effect */
    /* Removed background-color and color properties to use external styles */
}

/* Summary text */
.popup-content p {
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center; /* Centered text for better aesthetics */
    font-weight: bold; /* Bold text for emphasis */
}

/* Results list */
.results-list {
    max-height: 60vh;
    overflow-y: auto;
}

/* Question result */
.question-result {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 4px;
    position: relative;
}

/* Correctly answered question */
.question-correct {
    background-color: #e6ffe6; /* Light green */
    border-left: 5px solid #33cc33;
}

/* Incorrectly answered question */
.question-incorrect {
    background-color: #ffe6e6; /* Light red */
    border-left: 5px solid #ff3333;
}

/* Question header */
.question-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Result icons */
.result-icon {
    font-size: 20px;
    margin-right: 10px;
}

.icon-correct {
    color: #33cc33;
}

.icon-incorrect {
    color: #ff3333;
}

.question-header p {
    margin: 0;
    font-weight: bold;
    font-size: 16px; /* Increased font size for better readability */
}

/* Options list */
.question-result ul {
    list-style-type: none;
    padding: 0;
}

.question-result li {
    padding: 8px;
    margin: 4px 0;
    border-radius: 4px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

/* Highlight the user's selected answer */
.user-selected {
    background-color: #ffe5e5; /* Light red */
    color: #ff3333; /* Red text for incorrect answers */
}

/* Highlight the correct answer */
.correct-answer {
    background-color: #e5ffe5; /* Light green */
    color: #33cc33; /* Green text */
}

.user-selected.correct-answer,
.correct-answer.user-selected {
    background-color: #ccffcc; /* A different shade of green */
}

/* Your Answer Indication */
.your-answer {
    margin-top: 10px;
    padding: 8px;
    background-color: #ffe5e5; /* Light red background */
    border-radius: 4px;
    color: #ff3333; /* Red text */
}

.your-answer strong {
    color: #cc0000; /* Darker red for the label */
}

/* Correct Answer Indication */
.correct-answer-detail {
    margin-top: 5px;
    padding: 8px;
    background-color: #e5ffe5; /* Light green background */
    border-radius: 4px;
    color: #33cc33; /* Green text */
}

.correct-answer-detail strong {
    color: #006600; /* Darker green for the label */
}

/* Additional styling */
.popup-content {
    font-family: Arial, sans-serif;
}

/* Responsive design */
@media (max-width: 600px) {
    .popup-content {
        width: 90%;
        padding: 15px;
    }

    .close-button {
        top: 10px;
        right: 10px;
        /* Removed background-color and color properties to use external styles */
    }

    .popup-content p {
        font-size: 14px;
    }

    .question-result li {
        padding: 6px;
    }

    /* Adjust new classes for smaller screens */
    .your-answer, .correct-answer-detail {
        font-size: 14px;
    }

    #textContainer,
    #questionsContainer {
        height: 60vh; /* Adjust height for better readability on smaller screens */
    }
}