/* General styling for the login container */
.login-container {
    max-width: 400px; /* Limit the width of the login form */
    margin: 60px auto; /* Center the container horizontally with some top/bottom margin */
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
    background-color: #ffffff;
    text-align: center; /* Center the h2 and potentially button if not block */
}

/* Style for the heading */
.login-container h2 {
    font-size: 2.2em; /* Larger heading */
    color: #333;
    margin-bottom: 30px;
    font-weight: 600;
}

/* Styling for form paragraphs (Django's form.as_p wraps fields in <p> tags) */
.login-container p {
    margin-bottom: 15px; /* Space between form fields */
    text-align: left; /* Align labels/inputs to the left within their paragraph */
}

/* Style for labels */
.login-container label {
    display: block; /* Make labels appear above input fields */
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
    font-size: 0.95em;
}

/* Style for all input fields (text, password, etc.) */
.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="email"] { /* Add other input types if your form uses them */
    width: calc(100% - 20px); /* Full width minus padding */
    padding: 12px 10px;
    margin-bottom: 5px; /* Small margin after input */
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1em;
    color: #495057;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.login-container input[type="text"]:focus,
.login-container input[type="password"]:focus,
.login-container input[type="email"]:focus {
    border-color: #80bdff; /* Highlight border on focus */
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Subtle shadow on focus */
}

/* Style for the submit button */
.login-container button[type="submit"] {
    background-color: #007bff; /* Primary blue color */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* Make button full width */
    margin-top: 20px; /* Space above the button */
}

.login-container button[type="submit"]:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Optional: Style for form errors (if Django renders them, e.g., ul.errorlist) */
.login-container ul.errorlist {
    list-style-type: none;
    padding: 0;
    margin-top: -10px; /* Pull it closer to the field it's related to */
    margin-bottom: 15px;
    color: #dc3545; /* Red for errors */
    font-size: 0.875em;
    text-align: left;
}
.login-container ul.errorlist li {
    margin-bottom: 5px;
}
.register-or-reset {
    margin-top: 20px;
    font-size: 0.9em;
}