/*=========================================
GLOBAL
=========================================*/

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

body{

    background:#0e0f14;

}

a{

    text-decoration:none;

}

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

.login-page{

    display:flex;

    min-height:100vh;

}

/*=========================================
LEFT IMAGE
=========================================*/

.login-image{

    position:relative;

    width:55%;

    background:
    url("../images/login-car.jpg")
    center center/cover no-repeat;

}

.image-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(8,10,18,.92) 0%,
        rgba(8,10,18,.35) 45%,
        rgba(8,10,18,.15) 100%
    );

}

.image-logo{

    position:relative;

    z-index:2;

    padding:40px 50px;

    color:#fff;

    font-size:22px;

    font-weight:800;

    letter-spacing:1px;

}

.image-logo span{

    color:#d4a22c;

}

.image-caption{

    position:absolute;

    left:50px;

    bottom:60px;

    z-index:2;

    color:#fff;

    max-width:420px;

}

.image-caption h2{

    font-size:38px;

    font-weight:700;

    margin-bottom:10px;

}

.image-caption p{

    color:#d8dae2;

    font-size:15px;

    margin-bottom:26px;

}

.explore-btn{

    display:inline-block;

    background:#fff;

    color:#0e0f14;

    font-weight:700;

    font-size:14px;

    padding:14px 30px;

    border-radius:8px;

    transition:.3s;

}

.explore-btn:hover{

    background:#d4a22c;

    color:#fff;

}

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

.login-form-panel{

    width:45%;

    background:#14171f;

    padding:70px 90px;

    position:relative;

    overflow-y:auto;

}

.form-view{

    display:none;

    flex-direction:column;

    justify-content:space-between;

    min-height:100%;

}

.form-view.active{

    display:flex;

}

.form-top h1{

    color:#fff;

    font-size:36px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:32px;

}

.form-error{

    background:rgba(224,82,82,.12);

    border:1px solid rgba(224,82,82,.35);

    color:#f18b8b;

    font-size:13px;

    padding:10px 14px;

    border-radius:8px;

    margin-bottom:20px;

}

/*=========================================
FORM FIELDS
=========================================*/

.field{

    margin-bottom:18px;

}

.field-row{

    display:flex;

    gap:16px;

}

.field-row .field{

    flex:1;

    min-width:0;

}

.field label{

    display:block;

    color:#9ea1ac;

    font-size:13px;

    margin-bottom:8px;

}

.field input{

    width:100%;

    background:#22262f;

    border:1.5px solid #2e323d;

    border-radius:8px;

    padding:15px 16px;

    color:#fff;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    outline:none;

    transition:border-color .25s ease;

}

.field input::placeholder{

    color:#6b6f7a;

}

.field input:focus{

    border-color:#d4a22c;

}

.field select{

    width:100%;

    background:#22262f;

    border:1.5px solid #2e323d;

    border-radius:8px;

    padding:15px 16px;

    color:#fff;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    outline:none;

    cursor:pointer;

    appearance:none;

    -webkit-appearance:none;

    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ea1ac' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");

    background-repeat:no-repeat;

    background-position:right 16px center;

    transition:border-color .25s ease;

}

.field select:focus{

    border-color:#d4a22c;

}

.field select option{

    background:#22262f;

    color:#fff;

}

.field-hint{

    font-size:12px;

    color:#6b6f7a;

    margin:-10px 0 16px;

}

.field-hint.error{

    color:#f18b8b;

}

/*=========================================
OPTIONS ROW
=========================================*/

.options{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:6px 0 30px;

    font-size:13px;

}

.remember{

    display:flex;

    align-items:center;

    gap:8px;

    color:#9ea1ac;

    cursor:pointer;

}

.remember input[type="checkbox"]{

    width:15px;

    height:15px;

    accent-color:#d4a22c;

    cursor:pointer;

}

.forgot{

    color:#d4a22c;

    font-weight:500;

}

.forgot:hover{

    color:#fff;

}

/*=========================================
BUTTONS
=========================================*/

.login-btn{

    width:100%;

    background:linear-gradient(135deg,#e8bb4c,#d4a22c);

    color:#14171f;

    font-family:'Poppins',sans-serif;

    font-weight:700;

    font-size:15px;

    letter-spacing:.5px;

    border:none;

    padding:16px 0;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;

}

.login-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(212,162,44,.3);

}

.divider{

    display:flex;

    align-items:center;

    text-align:center;

    color:#6b6f7a;

    font-size:12px;

    margin:22px 0;

}

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

    content:"";

    flex:1;

    height:1px;

    background:#2e323d;

}

.divider span{

    padding:0 14px;

    color:#9ea1ac;

}

.signup-btn{

    width:100%;

    background:transparent;

    color:#d4a22c;

    font-family:'Poppins',sans-serif;

    font-weight:600;

    font-size:15px;

    letter-spacing:.5px;

    border:1.5px solid #d4a22c;

    padding:15px 0;

    border-radius:8px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.3s;

}

.signup-btn:hover{

    background:#d4a22c;

    color:#14171f;

}

/*=========================================
FORM BOTTOM
=========================================*/

.form-bottom{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin-top:40px;

}

.form-bottom a{

    color:#d4a22c;

    font-size:13px;

    font-weight:500;

}

.form-bottom a:hover{

    color:#fff;

}

/*=========================================
RESPONSIVE
=========================================*/

@media (max-width:1000px){

    .login-form-panel{

        padding:60px 50px;

    }

    .image-caption{

        left:40px;

        bottom:40px;

    }

}

@media (max-width:800px){

    .login-page{

        flex-direction:column;

    }

    .login-image{

        width:100%;

        min-height:280px;

    }

    .login-form-panel{

        width:100%;

        padding:50px 30px 60px;

    }

    .image-caption{

        bottom:30px;

        max-width:100%;

        padding-right:30px;

    }

    .image-caption h2{

        font-size:28px;

    }

    .form-top h1{

        font-size:28px;

        margin-bottom:32px;

    }

    .field-row{

        flex-direction:column;

        gap:0;

    }

    .login-page{

        min-height:auto;

    }

}

@media (max-width:420px){

    .login-image{

        min-height:220px;

    }

    .image-logo{

        padding:26px 24px;

        font-size:18px;

    }

    .image-caption{

        left:24px;

        bottom:22px;

    }

    .image-caption h2{

        font-size:22px;

    }

    .image-caption p{

        font-size:13px;

        margin-bottom:18px;

    }

    .explore-btn{

        padding:12px 24px;

        font-size:13px;

    }

    .login-form-panel{

        padding:40px 22px 50px;

    }

    .form-top h1{

        font-size:24px;

    }

}

/*=========================================
FORGOT PASSWORD MODAL
=========================================*/

.modal-overlay{

    position:fixed;
    inset:0;
    background:rgba(10,15,30,.6);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:1000;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;

}

.modal-overlay.active{

    opacity:1;
    visibility:visible;

}

.modal-box{

    background:#14171f;
    border:1px solid #2e323d;
    width:100%;
    max-width:420px;
    border-radius:16px;
    padding:32px 28px;
    position:relative;
    box-shadow:0 20px 50px rgba(0,0,0,.4);

}

.modal-close{

    position:absolute;
    top:14px;
    right:14px;
    width:32px;
    height:32px;
    border:none;
    background:#22262f;
    color:#9ea1ac;
    font-size:20px;
    border-radius:50%;
    cursor:pointer;

}

.modal-close:hover{

    background:#2e323d;
    color:#fff;

}

.modal-box h2{

    color:#fff;
    font-size:22px;
    margin-bottom:8px;

}

.modal-subtitle{

    color:#9ea1ac;
    font-size:14px;
    line-height:1.6;
    margin-bottom:22px;

}

.dash-field{

    margin-bottom:18px;

}

.dash-field label{

    display:block;
    color:#9ea1ac;
    font-size:13px;
    margin-bottom:8px;

}

.dash-field input{

    width:100%;
    background:#22262f;
    border:1.5px solid #2e323d;
    border-radius:8px;
    padding:15px 16px;
    color:#fff;
    font-family:'Poppins',sans-serif;
    font-size:16px;
    outline:none;
    transition:border-color .25s ease;

}

.dash-field input:focus{

    border-color:#d4a22c;

}

.order-status{

    font-size:13px;
    margin-bottom:14px;

}

.order-status.error{

    color:#f18b8b;

}