/* General Styles */
body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #234F2C; /* Primary Background: Dark Green */
    color: #E1D3A5; /* Secondary Text / Body: Light Tan */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    color: #F5E6C8; /* Primary Text / Headings: Cream */
}

#welcome-message {
    color: #F5E6C8; /* Cream */
    font-size: 1.2rem;
    margin-top: -0.5rem; /* Adjust spacing with H1 */
    margin-bottom: 1rem;
    text-align: center;
}

/* Mobile-first approach */
.container {
    padding: 1rem;
    max-width: 100%;
    margin: 0 auto;
}

/* Buttons */
button {
    background-color: #B08B4F; /* Accent / Buttons / Borders: Golden Brown */
    color: #F5E6C8; /* Primary Text / Headings: Cream */
    border: none;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* Full width for mobile */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
}

button:hover {
    background-color: #8C6D3D; /* Hover/active: darker shade */
}

button:disabled {
    background-color: #B08B4F80; /* Lighter, semi-transparent golden brown for disabled */
    cursor: not-allowed;
    box-shadow: none;
}

/* Specific style for the 'Start Quiz' / 'Next Question' button */
#start-quiz-initial-btn {
    background-color: #221014; /* Dark Brown */
    margin-top: 1rem; /* Add some space above the button */
}

#start-quiz-initial-btn:hover {
    background-color: #11080a; /* Darker shade for hover */
}

#start-quiz-initial-btn:disabled {
    background-color: #22101480; /* Lighter, semi-transparent dark brown for disabled */
}



/* Input Fields */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: calc(100% - 2rem); /* Full width minus padding */
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #B08B4F;
    border-radius: 8px;
    background-color: #F5E6C8; /* Cream background */
    color: #234F2C; /* Dark Green text */
    font-size: 1rem;
}

/* Autocomplete Styles */
.autocomplete-container {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem; /* To maintain spacing with next element */
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #B08B4F; /* Golden Brown border */
    border-bottom: none;
    border-top: none;
    z-index: 99; /* Ensure it's above other content */
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px; /* Limit height and add scroll if many items */
    overflow-y: auto;
    background-color: #F5E6C8; /* Cream background */
    color: #234F2C; /* Dark Green text */
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none; /* Hidden by default */
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #E1D3A5; /* Light Tan separator */
}

.autocomplete-items div:hover, .autocomplete-active {
    background-color: #E1D3A5; /* Light Tan on hover and for active item */
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder {
    color: #2E5B35; /* Forest Green */
}

/* Quiz Question Box */
.quiz-question-box {
    background-color: #F5E6C8; /* Cream background */
    color: #234F2C; /* Dark Green text */
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Feedback Banners */
.feedback-correct {
    background-color: #3CA45C; /* Shamrock Green */
    color: #F5E6C8;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: bold;
}

.feedback-incorrect {
    background-color: #7B3F2A; /* Red-Brown */
    color: #F5E6C8;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
    font-weight: bold;
}

/* Leaderboards */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5rem;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 0.8rem;
    text-align: left;
    border-bottom: 1px solid #2E5B35; /* Forest Green */
}

.leaderboard-table th {
    background-color: #B08B4F; /* Golden Brown */
    color: #F5E6C8;
    font-family: 'Open Sans', sans-serif;
}

.leaderboard-table tr:nth-child(even) {
    background-color: #F5E6C8; /* Cream */
    color: #234F2C;
}

.leaderboard-table tr:nth-child(odd) {
    background-color: #E1D3A5; /* Light Tan */
    color: #234F2C;
}

/* Sections - initially hidden */
.section {
    display: none;
}

.section.active {
    display: block;
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.hidden {
    display: none;
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

/* Navigation Buttons */
.nav-buttons {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    justify-content: center;
    gap: 1rem; /* Space between buttons */
    margin-top: 2rem; /* Space above the navigation buttons */
    padding: 1rem 0;
}

.nav-buttons button {
    background-color: #B08B4F; /* Golden Brown */
    color: #F5E6C8; /* Cream text */
    border: none;
    border-radius: 8px;
    padding: 0.8rem 1.2rem; /* Adjusted padding for nav buttons */
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    flex-grow: 1; /* Allow buttons to grow */
    max-width: 180px; /* Max width for individual buttons */
}

.nav-buttons button:hover {
    background-color: #8C6D3D; /* Darker Golden Brown on hover */
    transform: translateY(-2px); /* Slight lift effect */
}

.nav-buttons button.active {
    background-color: #2E5B35; /* Forest Green for active button */
    color: #F5E6C8; /* Cream text */
    box-shadow: 0 0 0 3px #B08B4F; /* Golden Brown border highlight */
}

.nav-buttons button.active:hover {
    background-color: #1E4023; /* Darker Forest Green on hover for active */
}

/* Loading Spinner */
.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(35, 79, 44, 0.8); /* Dark Green with transparency */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top of other content */
}

.spinner {
    border: 8px solid rgba(245, 230, 200, 0.3); /* Light Cream border */
    border-top: 8px solid #F5E6C8; /* Solid Cream top border */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}