/* --------------------- */
/* login.css             */
/* --------------------- */

.hero-banner {
    position: relative;
    width: 100%;
}

    .hero-banner img {
        display: block;
        width: 100%;
        height: auto;
    }

/* center the form and lock it to 446px wide */
.page-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    /* exactly the same width as signup */
    width: 100%;
    max-width: 446px;
    margin: 0; /* no extra side gutters */
}

/* have the “white box” fill that 446px wrapper */
.custom-form-container {
    width: 100% !important;
    max-width: 446px !important;
}

/* inputs: make the grey wrapper and inner <input> fill 100% */
.custom-input-wrapper {
    width: 100% !important;
}

    .custom-input-wrapper input[type="text"],
    .custom-input-wrapper input[type="email"],
    .custom-input-wrapper input[type="password"] {
        width: 100% !important;
        box-sizing: border-box;
    }

 /* =============================================================================
   Form styling
   ============================================================================= */

 .login-form {
     /* stays at 100% of the 446px max-width wrapper */
     width: 100%;
     display: flex;
     flex-direction: column;
     padding: 24px;
     gap: 24px;
     border-radius: 25px;
     border: 2.5px solid #EAEAEA;
     background: #FFF;
     box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.15);
     box-sizing: border-box;
    
}


.login-header { /* your <h4> */
    margin: 0;
    font-family: "Inter Tight", sans-serif;
    font-size: 28px;
    color: #4DC24D;
    font-weight: 600;
}


 .divider {
     width: 100%;
     height: 1px;
     background: #EAEAEA;
    
}


 .input-wrapper {
     display: flex;
     align-items: center;
     padding: 10px 14px;
     gap: 8px;
     border-radius: 8px;
     border: 1px solid #D5D7DA;
     background: #FFF;
     box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
     box-sizing: border-box;
     width: 100%; /* ← fill the form width */
    
}

    .input-wrapper + .input-wrapper {
        margin-top: 16px;
    }

 .input-wrapper svg {
     flex-shrink: 0;
    
}

 .text-input {
     flex: 1 0 0;
     border: none;
     outline: none;
     background: transparent;
     font-family: Inter, sans-serif;
     font-size: 16px;
     line-height: 24px;
     color: #181D27;
    
}


 .text-danger {
     width: 100%;
     font-size: 14px;
     margin: -16px 0 8px;
    
}


.remember-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 24px;
}

    .remember-container + .login-btn {
        margin-top: 24px; /* gap between checkbox and button */
    }

 .remember-label {
     font-family: Inter, sans-serif;
     font-size: 14px;
     color: #181D27;
    
}


.forgot-password-container {
    width: 100%;
    text-align: center;
    margin-top: 12px;
}

 .forgot-password {
     font-family: Inter, sans-serif;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
     color: #4DC24D;
     text-decoration: none;
    
}


 .login-btn {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%; /* ← full width button */
     padding: 10px 16px;
     gap: 8px;
     border-radius: 8px;
     border: 1px solid #4DC24D;
     background: #4DC24D;
     color: #FFF;
     font-family: Inter, sans-serif;
     font-size: 16px;
     font-weight: 600;
     line-height: 24px;
     box-shadow: 0px 1px 2px rgba(10, 13, 18, 0.05);
     cursor: pointer;
     transition: opacity 0.2s ease;
    
}

 .login-btn:hover {
     opacity: 0.9;
    
}

.input-label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #181D27;
    margin-bottom: 4px;
}

.field-group {
    margin-bottom: 16px; /* space between email / password groups */
}