@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}



    body,
    html {
        font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI',
            Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
            'Droid Sans', 'Helvetica Neue', sans-serif;

        background: white;
        overflow: hidden;
    }

    .login-wrapper {
        display: flex;
        width: 100vw;
        height: 100vh;
    }

    /* LEFT PANEL */
    .left-panel {
        height: 110vh;
        width: 45%;
        background: #09345F;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    /* Top-left paw */
    .paw-bg-left svg {
        position: absolute;
        top: -9px;
        left: -40px;
        width: 260px;
        height: 240px;
        opacity: 0.1;
        fill: white;
        transform: rotate(-180deg);
        z-index: 1;
    }

    /* Center logo */
    .left-logo {
        width: 350px;
        z-index: 5;
    }

    .left-logo svg {
        width: 70%;
        fill: white;
        margin: 20px 10px 20px;
    }

    /* RIGHT PANEL */
    .right-panel {
        width: 50%;
        padding: 110px 130px;
        position: relative;
        margin-top: 70px;

    }

    .welcome {
        font-size: 36px;
        font-weight: 800;
        color: #12C8FF;
    }

    .subtitle {
        color: #0A2F5A;
        font-size: 18px;
        margin-top: 6px;
    }

    .form-area {
        margin-top: 45px;
    }

    /* INPUT FIELDS with ICON */
    .input-group {
        position: relative;
        width: 380px;
        margin-bottom: 22px;
    }

    .input-group .icon {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        pointer-events: none;
    }

    .input-group .icon svg {
        width: 22px;
        height: 22px;
    }

    .input {
        width: 380px;
        height: 55px;
        background: #F4F7FC;
        border: none;
        outline: none;
        border-radius: 20px;
        padding: 0 20px;
        padding-left: 60px !important;
        font-size: 16px;
    }

    .input:focus {
        border: 1px solid rgb(6, 57, 100);
    }

    /* Buttons */
    .btn-row {
        display: flex;
        gap: 20px;
        margin-top: 10px;
    }

    .btn {
        padding: 15px 45px;
        border-radius: 18px;
        border: 1px solid #09345F;
        font-size: 16px;
        cursor: pointer;
    }

    .login-btn {
        background: #09345F;
        color: white;
    }

    .reset-btn,
    .signup-btn {
        background: white;
        color: #09345F;
    }

    .signup-btn {
        margin-top: 35px;
        padding: 15px 60px;
    }

    /* Bottom-right paw */
    .paw-bg-right svg {
        position: absolute;
        bottom: -70px;
        right: -40px;
        width: 240px;
        height: 240px;
        opacity: 0.12;
        fill: rgb(146, 165, 206);
        transform: rotate(-1deg);
        z-index: 1;
    }

    /* ------------------ MOBILE (max-width: 600px) ------------------ */
@media (max-width: 600px) {

    body, html {
        overflow-y: auto;
    }

    .login-wrapper {
        flex-direction: column;
        height: auto;
    }

    .left-panel {
        width: 100%;
        height: 220px;
        display: flex;        /* KEEP IT VISIBLE */
        justify-content: center;
        align-items: center;
    }

    .left-logo {
        width: 200px;
    }

    .right-panel {
        width: 100%;
        padding: 40px 25px;
        margin-top: 0;
    }

    .welcome {
        font-size: 30px;
    }

    .subtitle {
        font-size: 16px;
    }

    .input-group,
    .input {
        width: 100%;
    }

    .input {
        height: 50px;
        font-size: 15px;
    }

    .btn-row {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
        text-align: center;
        padding: 14px;
        font-size: 15px;
    }

    .signup-btn {
        width: 100%;
    }

    /* Keep paw or hide? */
    .paw-bg-right {
        display: none;   /* keep hidden for clean layout */
    }
}