/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #1c1e21; /* Dark background */
    display: flex;
    flex-direction: column; /* Change to column flow */
    justify-content: flex-start; /* Start from the top */
    align-items: center; /* Center horizontally */
    min-height: 100vh;
    padding: 20px;
    overflow-y: auto; /* Allow body to scroll */
}

body.signup-active {
    align-items: flex-start;
}

/* Container */
.container {
    width: 100%;
    max-width: 500px; /* Increased from 400px to 500px */
    background-color: #2c2f33; /* Slightly lighter dark background */
    padding: 30px; /* Increased padding for better spacing */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 20px auto; /* Added top/bottom margin */
    position: relative; /* Allow JS to override with absolute if needed */
    z-index: 100; /* Ensure it's above other elements */
}

.form-container {
    width: 100%;
    position: relative;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #fff; /* White text */
}
h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #fff; /* White text */
}

/* Toggle Buttons */
.toggle-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.toggle-buttons button {
    width: 50%;
    padding: 10px;
    cursor: pointer;
    background-color: #1c1e21; /* Dark black for buttons */
    border: 1px solid #2c2f33; /* Slightly lighter dark border */
    color: white;
    transition: background-color 0.3s;
}

.toggle-buttons button.active {
    background-color: #333; /* Darker shade for active button */
    color: white;
    border: none;
}

.toggle-buttons button:not(.active):hover {
    background-color: #444; /* Slightly lighter hover effect */
}

/* Form Styles */
.form {
    display: none;
    width: 100%;
    padding-top: 10px; /* Add padding to top of forms */
}

.form.active {
    display: block;
}

/* Ensure signup form starts at the top */
#signup-form {
    position: relative; 
    top: 0;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #99aab5; /* Light grey for labels */
}

.input-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #2c2f33; /* Dark border for inputs */
    border-radius: 5px;
    background-color: #40444b; /* Darker background for inputs */
    color: #fff; /* White text in inputs */
}

button[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #1c1e21; /* Dark black for submit button */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button[type="submit"]:hover {
    background-color: #333; /* Darker shade for hover state */
}

.flashes {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
}

.flashes li {
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 4px;
}

.flashes .error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.flashes .success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.input-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #2c2f33; /* Dark border to match inputs */
    border-radius: 5px; /* Rounded corners to match inputs */
    background-color: #40444b; /* Darker background for dropdown */
    color: #fff; /* White text in dropdown */
    appearance: none; /* Remove default dropdown arrow (cross-browser) */
    font-family: inherit; /* Match font with inputs */
    font-size: 14px; /* Match font size with inputs */
    cursor: pointer; /* Show pointer for dropdown */
}

/* Add hover and focus styles for the dropdown */
.input-group select:hover,
.input-group select:focus {
    border: 1px solid #99aab5; /* Lighter border on hover/focus */
    outline: none; /* Remove default outline */
    background-color: #333; /* Slightly lighter background on hover/focus */
}

/* Optional: Add styling for the dropdown arrow */
.input-group select::after {
    content: '▼'; /* Dropdown arrow */
    position: absolute;
    right: 15px;
    pointer-events: none;
    color: #fff;
}

.team-link {
    color: #fff;          /* Matches your "Build Your Profile" color */
    text-decoration: none; /* Remove underlines (optional) */
    font-size: 14px;      /* Adjust as needed (e.g. 12px, 14px, etc.) */
}

/* Optional: hover state */
.team-link:hover {
    color: #ddd; /* Slightly lighter or darker color on hover */
}

#autocomplete-results {
    /* Limit how tall it can get */
  overflow-y: auto;      /* Scrollbar appears if content exceeds 200px */
}