/* General Styles for Both Pages */
body {
    font-family: Arial, sans-serif;
    background-color: #eaeef2; /* Very dark blue background */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items to the top */
    min-height: 100vh;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box; /* Include padding in width/height calculations */
    overflow: auto; /* Allow scrolling if content is too tall */
    /* color: #f1f1f1; Light text color for contrast on dark background */
    line-height: 1.6; /* Improve readability with increased line height */
}

/* Container Styles */
#quiz-container {
    background-color: #ffffff;
    padding: 25px; /* Slightly increased padding for breathing space */
    border-radius: 12px; /* More rounded corners for modern design */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow for depth */
    width: 100%;
    max-width: 640px; /* Increased max-width for better readability */
    text-align: center;
    margin-top: 30px; /* More space from top */
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    box-sizing: border-box;
    color: #333; /* Dark text for better readability on white background */
}

/* Timer Styles */
#quiz-timer {
    width: 100%;
    padding: 15px; /* Increased padding for readability */
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 25px; /* Extra space between timer and content */
    box-sizing: border-box;
    background-color: #f7f7f7;
    font-size: 16px; /* Slightly larger font for timer */
    font-family: monospace;
    text-align: center;
    color: #444; /* Darker text for contrast */
}

/* Card Styles */
.card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
    background-color: #f9f9f9; /* Lighter card background for distinction */
    border: 1px solid #e0e0e0; /* Subtle border for card */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.card-title {
    margin-top: 2;
}

/* Styling for Quiz Question Options */
.checkbox-label {
    display: flex;
    align-items: center;
    padding: 12px 18px; /* More padding for a comfortable click area */
    background-color: #e7f0ff;
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 10px; /* Increased margin for spacing between options */
    width: 100%;
    box-sizing: border-box;
    cursor: pointer; /* Make entire label clickable */
}

.checkbox-label:hover {
    background-color: #d0e0ff; /* Subtle hover effect */
}

/* Override Bootstrap Hover Effect */
.btn-outline-secondary:hover {
    background-color: #e0ecff !important;
    color: #333 !important;
    border-color: #cdd7ff !important; /* Lighter border color on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.checkbox-label input[type="radio"],
.checkbox-label input[type="checkbox"] {
    margin-right: 12px;
    cursor: pointer;
}

/* Output Area for JSON in Quiz Generator */
#output {
    width: calc(100% - 30px);
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 20px;
    box-sizing: border-box;
    resize: none;
    background-color: #f7f7f7;
    font-size: 15px; /* Slightly larger font for output readability */
    font-family: monospace;
    text-align: center;
    color: #444;
}

/* Status Messages */
#status {
    color: #ff4136; /* Brighter red for status messages */
    font-size: 18px; /* Larger font size for prominence */
    font-weight: bold; /* Bold text for emphasis */
    margin-bottom: 15px;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    #quiz-container {
        padding: 20px;
        margin-top: 15px;
    }

    .checkbox-label {
        width: 100%;
    }

    .btn {
        width: 100%;
        max-width: 100%;
    }

    #quiz-timer, #output {
        font-size: 14px; /* Reduced font size for smaller screens */
    }
}

/* Ensure images fit within their container */
img.img-fluid {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}

/* Ensure buttons fit within their container */
.btn {
    max-width: 100%;
    box-sizing: border-box;
}

/* Flex Container and Items */
.flex-container {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Prevent overflow of flex items */
.flex-container > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Custom class extending Bootstrap's btn-success for correct answers */
.btn-success-subtle {
    background-color: #d4edda !important; /* Subtle green */
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

/* Custom class extending Bootstrap's btn-warning for missed answers */
.btn-warning-subtle {
    background-color: #fff3cd !important; /* Subtle orange */
    color: #856404 !important;
    border-color: #ffeeba !important;
}

/* Custom class extending Bootstrap's btn-danger for incorrect answers */
.btn-danger-subtle {
    background-color: #f8d7da !important; /* Subtle red */
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}