/* Body and basic layout */
body {
    font-family: 'Roboto', sans-serif; /* Use one of the linked fonts */
    background-color: #f4f4f4; /* Light grey background */
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Full viewport height */
    margin: 0; /* Remove default body margin */
    padding: 20px; /* Add some padding for smaller screens */
    box-sizing: border-box; /* Include padding in width */
}

/* Login container */
.login-container {
    background-color: #fff; /* White background for the login box */
    padding: 30px; /* Inner spacing */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
    text-align: center; /* Center text content */
    width: 100%; /* Make it responsive */
    max-width: 380px; /* Increased max width slightly */
    box-sizing: border-box; /* Include padding in width */
}
.login-header{
    font-family: 'Unica One';
    font-size: 32px;
    overflow-wrap: break-word;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* Logo styling */
.login-logo {
    width: 225px;
    margin-bottom: 15px;
    height: auto; /* Maintain aspect ratio */
}

/* Title styling */
.login-title {
    font-family: "Unica One";
    font-size: 40px;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    padding: 0;
    display: block;
    color: #000;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    letter-spacing: normal;
    line-height: normal;
}

/* Form styling */
.login-form {
    width: 100%; /* Form takes full width of container */
}

/* Styling for form fields container */
/* Target the paragraphs generated by form.as_p */
.form-fields p {
    margin-bottom: 15px; /* Space between form field paragraphs */
    text-align: left; /* Align labels/inputs to the left */
}

/* Styling for form input elements */
.form-fields input[type="text"],
.form-fields input[type="password"],
.form-fields input[type="email"] { /* Add other relevant input types if needed */
    width: 100%; /* Input takes full width of its container */
    padding: 12px; /* Inner spacing */
    border: 1px solid #ccc; /* Light grey border */
    border-radius: 4px; /* Rounded corners for inputs */
    box-sizing: border-box; /* Include padding in width */
    font-size: 16px; /* Readable font size */
    margin-top: 5px; /* Small space above input if label is on its own line */
    display: block; /* Make inputs block level for full width */
}

/* Focus state for inputs */
.form-fields input[type="text"]:focus,
.form-fields input[type="password"]:focus,
.form-fields input[type="email"]:focus {
    outline: none; /* Remove default outline */
    border-color: #FA5500; /* Highlight border on focus (New Orange) */
    box-shadow: 0 0 5px rgba(250, 85, 0, 0.4); /* Soft shadow on focus using orange with transparency */
}

/* Login button styling */
.login-button {
    width: 100%; /* Button takes full width */
    padding: 12px; /* Inner spacing */
    background-color: #FA5500; /* Button color (New Orange) */
    color: white; /* White text color */
    border: none; /* No border */
    border-radius: 4px; /* Rounded corners */
    cursor: pointer; /* Indicate clickable */
    font-size: 18px; /* Larger font size */
    margin-top: 20px; /* Space above button */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    font-weight: bold; /* Make button text bold */
}

/* Button hover state (slightly darker orange) */
.login-button:hover {
    background-color: #D44700; /* Slightly darker orange for hover */
}

/* Forgot password link paragraph */
.forgot-password {
    margin-top: 15px; /* Space above the link */
    font-size: 14px; /* Smaller font size */
}

/* Forgot password link styling */
.forgot-password a {
    color: #FA5500; /* Link color (New Orange) */
    text-decoration: none; /* Remove underline */
}

/* Forgot password link hover state */
.forgot-password a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Styling for Django Form Errors */

/* Target the error list (usually <ul>) */
.login-form ul.errorlist {
    color: #dc3545; /* Red color for errors */
    list-style: none; /* Remove list bullets */
    padding: 0; /* Remove default padding */
    margin-top: 5px; /* Space above the error list */
    margin-bottom: 15px; /* Space below the error list */
    text-align: left; /* Align error text to the left */
    font-size: 14px; /* Smaller font size for errors */
}

/* Target individual error items (<li>) */
.login-form ul.errorlist li {
    margin-bottom: 5px; /* Space between individual error messages */
    font-weight: bold; /* Make error text bold */
}

/* Optional: Style for inputs with errors (Django often adds a class like .is-invalid or styles the input directly) */
/* You might need to inspect your form output to see the exact class/structure */
/* If Django adds a class like 'error' or 'is-invalid' to the input's parent p or the input itself: */
/*
.form-fields p.error,
.form-fields input.is-invalid {
    border-color: #dc3545; // Red border for error inputs
}
*/
/* If Django renders the error list directly before the input within the <p>: */
/* No specific rule needed for the input border based on the error list's presence */

/* Optional: Style for Django form labels if present */
/* Depending on how your form renders, you might need to adjust this */
.form-fields label {
    display: block; /* Make label a block element */
    margin-bottom: 5px; /* Space below label */
    font-weight: bold; /* Bold label text */
    color: #555; /* Dark grey label color */
}

.login-bottom-text{
    font-style: italic;
    text-align: center;
    max-width: 200px;
    font-size: 14px;
    line-height: 21px;
    
}


.login-footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}
.signup-link{
    display: block;
    width: 200px;
    height: 45px;
    background: white;
    color: black;
    border: 2px solid black;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 45px;
    letter-spacing: 4px;
}
.signup-link:hover{
    background: black;
    color: white;
    transition: all 0.3s ease-in-out;
}

/* If form errors are shown *above* the form fields, this might need adjustment */
/* .form-fields errorlist ul { ... } might be more specific if errors are inside the .form-fields div */
@media screen and (max-width: 762px) {
    .login-container{
        padding: 15px;
    }
    
}