/* ==============================
RESET
============================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{
    background:#f4f4f4;
    font-family:'Outfit',Arial,sans-serif;
}




.page-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 6px;
}


/* ==============================
PAGE
============================== */

.signin-page{

    width:100%;
    max-width:1280px;

    margin:40px auto;

}


.signin-card{
    display:flex;
    flex-direction:row;
    width:100%;
    min-height:650px;

    overflow:hidden;
}




/* ==============================
LEFT SIDE
============================== */

/* ==============================
   LEFT SIDE - NO BACKGROUND
============================== */

.signin-left{
    flex:1;
    min-height:650px;
    padding:70px 60px;
    color:#222;
    position:relative;
    overflow:hidden;

 
}

/* Remove dark/blue overlay */
.signin-left::before{
    display:none;
}

/* Keep text visible */
.signin-left>*{
    position:relative;
    z-index:2;
}


.welcome-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(255,255,255,.18);

    font-size:14px;

    margin-bottom:20px;

}



.signin-left h1{

    font-size:25px;

    line-height:1.15;

    margin-bottom:20px;

    font-weight:800;

}



.signin-left p{

    font-size:17px;

    line-height:1.8;

    max-width:480px;

}



.features{

    margin-top:35px;

}


.feature{

    font-size:17px;

    margin-bottom:18px;

    transition:.3s;

}


.feature:hover{

    transform:translateX(10px);

}




/* ==============================
RIGHT FORM
============================== */


.signin-right{

    width:480px;

    flex-shrink:0;
background: transparent;
  background:white;
    border:1px solid #ddd;
    border-radius:10px;

    padding:50px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}



.signin-right h2{

    text-align:center;

    font-size:34px;

    color:#222;

    margin-bottom:10px;

}


.signin-text{

    text-align:center;

    color:#666;

    margin-bottom:30px;

}


/* ==============================
INPUT
============================== */


.signin-input-box{

    margin-bottom:22px;

}



.signin-input-box label{

    display:block;

    font-weight:600;

    margin-bottom:8px;

    color:#333;

}



.signin-input-box input{

    width:100%;

    height:58px;

    padding:0 18px;

    border:1px solid #ddd;

    border-radius:14px;

    outline:none;

    font-size:15px;

}



.signin-input-box input:focus{

    border-color:#1677ff;

    box-shadow:
    0 0 0 4px rgba(22,119,255,.15);

}



/* PASSWORD */


.password-box{

    position:relative;

}


.password-box input{

    padding-right:55px;

}



.toggle-password{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:#777;

}



/* ==============================
ERROR
============================== */


.alert.error{

    background:#ffe8e8;

    color:#d00000;

    padding:12px;

    border-radius:10px;

    margin-bottom:20px;

    text-align:center;

}



/* ==============================
LINKS
============================== */


.login-links{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:20px 0;

}


.remember{

    font-size:14px;

}



.forgot-btn{

    border:0;

    background:none;

    color:#1677ff;

    cursor:pointer;

    font-weight:bold;

}











/* =====================================
   FORGOT PASSWORD POPUP
===================================== */
/* =====================================
   FORGOT PASSWORD POPUP
===================================== */

.forgot-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;

    background:rgba(0,0,0,.65);

    display:none;
    justify-content:center;
    align-items:center;

    z-index:999999;

    padding:20px;
    backdrop-filter:blur(5px);
}


/* POPUP BOX */
.forgot-popup{
    position:relative;

    width:100%;
    max-width:430px;

    background:#ffffff;

    border-radius:20px;

    padding:35px 30px;

    box-shadow:0 25px 70px rgba(0,0,0,.30);

    animation:forgotPopup .3s ease;
}


/* ANIMATION */
@keyframes forgotPopup{

    from{
        opacity:0;
        transform:translateY(30px) scale(.95);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}


/* CLOSE BUTTON */
.close-btn{
    position:absolute;

    top:12px;
    right:15px;

    width:38px;
    height:38px;

    border:none;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f1f1f1;
    color:#555;

    font-size:24px;
    line-height:1;

    cursor:pointer;

    transition:.3s;
}


.close-btn:hover{
    background:#90EE90;
    color:#fff;
    transform:rotate(90deg);
}


/* TITLE */
.forgot-popup h2{
    text-align:center;

    font-size:28px;

    color:#222;

    margin-bottom:10px;
}


/* DESCRIPTION */
.forgot-popup p{
    text-align:center;

    color:#666;

    font-size:15px;

    line-height:1.6;

    margin-bottom:25px;
}


/* INPUT */
.forgot-popup input{
    width:100%;

    height:55px;

    padding:0 18px;

    border:1px solid #ddd;

    border-radius:12px;

    outline:none;

    font-size:15px;

    margin-bottom:18px;

    transition:.3s;
}


.forgot-popup input:focus{
    border-color:#90EE90;

    box-shadow:0 0 0 4px rgba(144,238,144,.20);
}


/* RESET BUTTON */
.forgot-popup button[type="submit"]{
    width:100%;

    height:55px;

    border:none;

    border-radius:12px;

    background:#90EE90;

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}


.forgot-popup button[type="submit"]:hover{
    background:#66CC66;

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(102,204,102,.30);
}


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

    .forgot-overlay{
        padding:15px;
    }

    .forgot-popup{
        max-width:100%;

        padding:30px 20px;

        border-radius:16px;
    }

    .forgot-popup h2{
        font-size:25px;
    }

    .forgot-popup p{
        font-size:14px;
    }

    .forgot-popup input,
    .forgot-popup button[type="submit"]{
        height:52px;
    }

}









/* ==============================
LOGIN BUTTON
============================== */

.register-btn{
    width:100%;
    height:55px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:14px;
    border:none;
    background:#009688;
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    text-decoration:none;
}

.register-btn:hover{
    background:#66CC66;
    transform:translateY(-3px);
}




/* ==============================
DIVIDER
============================== */


.divider{

    display:flex;

    align-items:center;

    gap:15px;

    margin:30px 0;

}


.divider::before,
.divider::after{

    content:"";

    height:1px;

    background:#ddd;

    flex:1;

}


.divider span{

    font-weight:bold;

    color:#777;

}




/* SECOND BUTTON */


.secondary-btn{

    background:lightblue;

    color:white;

    border:lightgray;

}


.secondary-btn:hover{

    background:lightgreen;

    color:white;

}




.signin-bottom-link{

    text-align:center;

    margin-top:25px;

    color:#666;

}



.signin-bottom-link a{

    color:#1677ff;

    font-weight:bold;

}



/* =========================================================
   MOBILE LOGIN PAGE
========================================================= */

@media (max-width: 991px){

    .signin-page{
        width:100%;
        max-width:700px;
        margin:25px auto;
        padding:0 15px;
    }

    .signin-card{
        display:flex;
        flex-direction:column;
        width:100%;
        min-height:auto;
        overflow:visible;
    }

    /* LEFT TEXT */
    .signin-left{
        width:100%;
        min-height:auto;
        padding:40px 30px 30px;
        text-align:center;
    }

    .signin-left h1{
        font-size:28px;
        line-height:1.25;
    }

    .signin-left p{
        max-width:100%;
        font-size:15px;
        line-height:1.7;
    }

    .welcome-tag{
        margin-bottom:15px;
    }

    .features{
        margin-top:25px;
    }

    .feature{
        font-size:15px;
        margin-bottom:12px;
    }

    /* LOGIN FORM */
    .signin-right{
        width:100%;
        padding:35px 30px;
        border:1px solid #ddd;
        border-radius:10px;
        background:#fff;
    }

    .signin-right h2{
        font-size:30px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:600px){

    body{
        background:#f4f4f4;
    }

    .page-wrap{
        padding:0 8px;
    }

    .signin-page{
        width:100%;
        margin:15px auto;
        padding:0 8px;
    }

    .signin-card{
        width:100%;
        flex-direction:column;
    }

    /* LEFT TEXT */
    .signin-left{
       display: none !important;
    }

    .signin-left h1{
        font-size:24px;
        margin-bottom:15px;
    }

    .signin-left p{
        font-size:14px;
        line-height:1.6;
    }

    .welcome-tag{
        font-size:13px;
        padding:7px 15px;
    }

    .features{
        margin-top:20px;
    }

    .feature{
        font-size:14px;
        margin-bottom:10px;
    }

    /* RIGHT LOGIN FORM */
    .signin-right{
        width:100%;
        padding:25px 18px;
        border-radius:10px;
    }

    .signin-right h2{
        font-size:27px;
        margin-bottom:8px;
    }

    .signin-text{
        font-size:14px;
        margin-bottom:22px;
    }

    .signin-input-box{
        margin-bottom:18px;
    }

    .signin-input-box input{
        height:52px;
        font-size:15px;
        border-radius:12px;
    }

    .login-links{
        margin:15px 0;
        font-size:13px;
    }

    .register-btn{
        height:52px;
        font-size:16px;
        border-radius:12px;
    }

    .divider{
        margin:22px 0;
    }

    .signin-bottom-link{
        margin-top:20px;
        font-size:14px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width:400px){

    .signin-page{
        margin:10px auto;
        padding:0 5px;
    }

    .signin-left{
      display: none !important;
    }

    .signin-left h1{
        font-size:22px;
    }

    .signin-left p{
        font-size:13px;
    }

    .feature{
        font-size:13px;
    }

    .signin-right{
        padding:22px 14px;
    }

    .signin-right h2{
        font-size:25px;
    }

    .signin-input-box input{
        height:50px;
    }

}