/* --- Sign Up Page Specific Styles --- */
/* These styles target elements within the .signup-container */

.signup-container {
    max-width: 600px; /* Max width of the form container */
    margin: 40px auto; /* Center the container with top/bottom margin */
    padding: 30px; /* Inner spacing */
    border: 1px solid #e0e0e0; /* Light grey border */
    border-radius: 8px; /* Rounded corners */
    background-color: #f9f9f9; /* Slightly off-white background */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
}

.signup-container h2 {
    text-align: center; /* Center the heading */
    margin-bottom: 25px; /* Space below the heading */
    color: #333; /* Dark text color */
}

/* Grid layout for form fields */
.form-grid {
    display: grid;
    /* Creates responsive columns: minimum 180px wide, fitting as many as possible */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px 20px; /* 15px gap between rows, 20px between columns */
    margin-bottom: 15px; /* Space below each grid group */
}

/* Modifier class for grid items that should span the full width */
.form-grid.full-width {
    grid-template-columns: 1fr; /* Forces a single column */
}

/* Styling for each form group (label + input) */
.form-group {
    display: flex; /* Use flexbox for label/input alignment */
    flex-direction: column; /* Stack label above input */
}

.form-group label {
    margin-bottom: 5px; /* Space between label and input */
    font-weight: bold; /* Make labels bold */
    font-size: 0.9em; /* Slightly smaller font size */
    color: #555; /* Medium-dark grey color */
}

/* Common styles for text inputs, email, password, date, tel, and select dropdowns */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="tel"],
.form-group select {
    padding: 10px; /* Inner padding */
    border: 1px solid #ccc; /* Standard border */
    border-radius: 4px; /* Slightly rounded corners */
    font-size: 1em; /* Standard font size */
    width: 100%; /* Make inputs fill their container */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Style for focused inputs/selects */
.form-group input:focus,
.form-group select:focus {
    border-color: #007bff; /* Blue border on focus */
    outline: none; /* Remove default browser outline */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Add a subtle blue glow */
}

/* Ensure form groups take up one grid column by default */
.form-group {
    grid-column: span 1;
}

/* Styling for the main submit button */
.submit-button {
    display: block; /* Make it a block element */
    width: 100%; /* Full width */
    padding: 12px; /* Padding */
    background-color: #007bff; /* Blue background */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 4px; /* Rounded corners */
    font-size: 1.1em; /* Slightly larger font */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.2s ease; /* Smooth background transition */
    margin-top: 20px; /* Space above the button */
    grid-column: 1 / -1; /* Make button span all columns in the grid */
}

.submit-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Styling for the 'Back' button */
.back-button {
     display: inline-block; /* Allow text flow around it if needed */
     padding: 8px 15px; /* Padding */
     margin-bottom: 20px; /* Space below the button */
     background-color: #6c757d; /* Grey background */
     color: white; /* White text */
     text-decoration: none; /* Remove underline */
     border-radius: 4px; /* Rounded corners */
     font-size: 0.9em; /* Smaller font */
     transition: background-color 0.2s ease; /* Smooth transition */
}

 .back-button:hover {
     background-color: #5a6268; /* Darker grey on hover */
 }

/* Common styling for message boxes (success/error) */
.message {
    padding: 15px; /* Padding */
    margin-bottom: 20px; /* Space below message */
    border-radius: 4px; /* Rounded corners */
    font-size: 0.95em; /* Font size */
    /* Ensure message boxes span full width if placed within the grid structure */
    grid-column: 1 / -1;
}

/* Specific styling for error messages */
.message.error {
    background-color: #f8d7da; /* Light red background */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb; /* Reddish border */
}

/* Styling for the unordered list within error messages */
 .message.error ul {
     margin: 0; /* Remove default margin */
     padding-left: 20px; /* Indent list items */
 }

/* Specific styling for success messages */
.message.success {
    background-color: #d4edda; /* Light green background */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb; /* Greenish border */
    text-align: center; /* Center the success message text */
}

/* Styling for the small helper text (e.g., below password) */
.form-group small {
    font-size: 0.8em; /* Very small text */
    color: #6c757d; /* Grey color */
    margin-top: 3px; /* Small space above */
}