/* --- This reset is crucial for responsive design --- */
* {
    box-sizing: border-box;
}

/* --- This is your updated mobile CSS --- */
@media screen and (max-width: 900px) {

    /* 1. Make the main card stack vertically and fit the screen */
    .styles_login_form_container__6OeU9 {
        flex-direction: column;
        width: 100%;    /* Use 100% of the screen width, not 900px */
        height: auto;   /* Let height be automatic, not 500px */
        box-shadow: none;
        border-radius: 0;
    }

    /* 2. Adjust the outer container for mobile */
    .styles_login_container__tFYKU {
        align-items: flex-start;
        padding: 0; /* Remove any desktop padding */
    }
    
    /* 3. Make both left and right sections full-width AND center content */
    .styles_left__3IY\+M,
    .styles_right__c-oQe {
        width: 100%;
        flex: 1; /* Reset the desktop 'flex' rule */
        padding: 40px 20px; /* Add some internal spacing */
        border-radius: 0; /* Fix the border-radius for a stacked layout */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    /* 4. Fix ALL heading text */
    .styles_form_container__uFWIj h1,
    .styles_right__c-oQe h1 {
        font-size: 30px; /* Make text smaller for phones */
        text-align: center;
        overflow-wrap: break-word; /* Ensure long text wraps */
        margin-bottom: 25px; /* Add spacing below headings */
    }

    /* 5. Make inputs and 'Sign In' button fit */
    .styles_input__EuUgK,
    .styles_green_btn__WfC2r {
        width: 100%;
        max-width: 350px; 
    }

    /* 6. Style the 'Sign Up' button specifically */
    .styles_white_btn__-JvDo {
        /*width: 100%; */
        max-width: 350px; 
        padding-top: 12px;
        padding-bottom: 12px;
        white-space: nowrap; 
        font-size: 16px;
    }
}