/* static/login_style.css */

/* --- General Page Setup --- */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1F2B30;
    font-family: 'Courier New', monospace;
    margin: 0; /* Add margin reset */
}
/* --- Main Login Window --- */
.auth-container {
    width: 100%;
    max-width: 450px;
    text-align: center;
}
/* --- Logo --- */
.logo-image {
    width: 180px;
    height: auto;
    margin-bottom: 20px;
}
/* --- Form Structure & Alerts --- */
.form-group {
    margin-bottom: 35px;
    text-align: left;
    /* --- MODIFICATION 1 of 2: The Anchor --- */
    /* This makes the .form-group the positioning context (the "anchor")
       for the absolutely positioned error message inside it.
       It does not change the appearance of the form group itself. */
    position: relative;
}
/* --- Butter Boxes --- */
.alert {
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 0.9em;
    color: #000;
    background-color: #00E5E5;
    border: 2px solid black;
}
/* --- Links --- */
.extra-links {
    margin-top: 20px;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.6);
}
/* --- Bottom Link --- */
.extra-links a {
    color: #00E5E5;
    text-decoration: none;
}
/* --- Bottom Link on hover --- */
.extra-links a:hover {
    text-decoration: underline;
}
/* --- Field Error Message --- */
.field-error {
    color: #FF4136;
    font-weight: bold;
    font-size: 0.7em;
    margin-top: 4px;
    left: 20%;
    /* --- MODIFICATION 2 of 2: The Floating Element --- */
    /* This "lifts" the error message out of the document flow,
       so it no longer takes up any physical space or pushes other
       elements around. It will now appear neatly below the field
       without disturbing the layout. */
    position: absolute;
    /* We add a little extra margin at the bottom to ensure there's enough
       vertical space for the error message to appear without overlapping
       the next field. */
    padding-bottom: 20px;
}
.field-error-double {
    color: #FF4136;
    font-weight: bold;
    font-size: 0.7em;
    margin-top: 15px;
    /* --- MODIFICATION 2 of 2: The Floating Element --- */
    /* This "lifts" the error message out of the document flow,
       so it no longer takes up any physical space or pushes other
       elements around. It will now appear neatly below the field
       without disturbing the layout. */
    position: absolute;
    /* We add a little extra margin at the bottom to ensure there's enough
       vertical space for the error message to appear without overlapping
       the next field. */
    padding-bottom: 20px;
}


/* =================================================================== */
/* ==== Lottie-Based Field and Button CSS ==== */
/* =================================================================== */

/* --- Animation for Field Rows --- */
.lottie-field-wrapper {
    position: relative;
    height: 55px;
    transition: transform 0.1s ease-out;
}

/* --- Submit Button --- */
#lottie-submit-button {
    cursor: pointer;
}
/* --- Submit Button on Hover --- */
.lottie-field-wrapper:hover {
    transform: scale(1.02);
}
/* --- Lottie Player --- */
.lottie-field-wrapper lottie-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
/* --- Text input --- */
.lottie-input {
    position: absolute;
    top: 0;
    left: 19%;
    z-index: 2;
    width: 61%;
    height: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    outline: none;
    color: #00E5E5;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    font-weight: bold;
}
/* --- Text Input Placeholder --- */
.lottie-input::placeholder {
    color: #00E5E5;
    opacity: 0.6;
}