/* Added from Figma */
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&display=swap');

.login-page-body {
    background-color: #ebf5fb !important; /* Use important to override other styles */
}

.header {
    padding: 35px 33px;
}

.admin-portal-title {
    font-family: "Familjen Grotesk", sans-serif;
    font-weight: 600;
    font-size: 48px;
    color: #027488;
    margin: 0;
}

.member-login-subtitle {
    font-family: "Familjen Grotesk", sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 36px;
    color: #3d7a8e;
    text-align: center;
    margin-bottom: 20px;
}
/* End of Figma styles */

/* login_page.css (or add to landing_page.css) */

/* Styles to ensure the login page takes full height if _main_base has padding/margins */
body, html { /* Apply these globally if needed, or scope them if possible */
    height: 100%;
}
body.login-page-body,
body.login-page-body html { /* Or just body.login-page-body if html style is global */
    height: 100%;
}
/* You might also need to ensure that the wrapper elements in _main_base.html
   and login.html allow for this full height to be utilized by the .login-page-wrapper.
   For instance, if _main_base.html has <div id="app"> which wraps everything: */
body.login-page-body #app,
body.login-page-body main { /* if main wraps content block */
    height: 100%;
    display: flex; /* If you want to use flex to fill hkght */
    flex-direction: column;
}
body.login-page-body .login-page-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5% 20px 20px 20px;
    box-sizing: border-box;
}

.login-container {
    width: 100%;
    max-width: 450px; /* Max width of the login card */
}

.login-card {
    background-color: #ffffff;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid #d9d9d9;
    box-shadow: none;
}

.login-logo img {
    max-width: 180px; /* Adjust logo size */
    margin-bottom: 20px;
}

.login-title {
    font-size: 1.8em; /* Adjust title size */
    color: var(--primary-color, #2F6B6E);
    margin-bottom: 25px;
    font-weight: 600;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form label {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #1e1e1e;
    margin-bottom: 8px;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 8.5px;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #1e1e1e;
    width: 100%;
    box-sizing: border-box;
}

.login-form input[type="text"]::placeholder,
.login-form input[type="password"]::placeholder {
    color: #b3b3b3;
}

.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    border-color: var(--primary-color, #2F6B6E);
    box-shadow: 0 0 0 3px rgba(47, 107, 110, 0.15); /* Focus ring with primary color tint */
    outline: none;
}

/* Error Message Styling */
.login-error-message.text-center,
.field-error-message {
    color: #dc3545; /* Bootstrap danger red */
    font-size: 0.9em;
    margin-top: 5px;
    margin-bottom: 15px;
}
.field-error-message {
    margin-top: 5px;
    display: block;
}


.form-options { /* For "Remember me" and "Forgot password" if you add them */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 0.9em;
}
.form-options .form-check {
    display: flex;
    align-items: center;
}
.form-options .form-check input[type="checkbox"] {
    margin-right: 8px;
}
.form-options .forgot-password-link {
    color: var(--primary-color, #2F6B6E);
    text-decoration: none;
}
.form-options .forgot-password-link:hover {
    text-decoration: underline;
}


.btn-login {
    background-color: #2c2c2c;
    color: #ffffff;
    border: 1px solid #2c2c2c;
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    cursor: pointer;
}

.login-footer-links {
    margin-top: 25px;
    font-size: 0.9em;
}

.login-footer-links p {
    margin-bottom: 10px;
    color: var(--text-secondary, #555);
}

.login-footer-links a {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #1e1e1e;
    text-decoration: underline;
}

.login-footer-links a:hover {
    text-decoration: underline;
}

/* Ensure Django's default form error styling doesn't interfere too much if it adds <ul class="errorlist"> */
.login-form ul.errorlist {
    list-style-type: none;
    padding: 0;
    margin: 0 0 15px 0;
    color: #dc3545;
    font-size: 0.9em;
}
.login-form ul.errorlist li {
    margin-bottom: 5px;
    text-align: center; /* Or left, depending on preference */
}