/* ===========================
   DCLA HP Login UI
=========================== */

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

body{
    font-family:'Poppins',sans-serif;
    background:#f4f7fc;
    color:#1f2937;
}

a{
    text-decoration:none;
}

.login-wrapper{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* ===========================
   Header
=========================== */

.top-bar{

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    padding:14px 0;

    box-shadow:0 3px 12px rgba(0,0,0,.05);

}

.brand{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo{

    width:58px;

    height:58px;

    object-fit:contain;

}

.brand h4{

    margin:0;

    font-size:22px;

    font-weight:600;

    color:#0f172a;

}

.brand p{

    margin:0;

    color:#6b7280;

    font-size:14px;

}

.version{

    background:#e8f0fe;

    color:#0d6efd;

    padding:8px 18px;

    border-radius:30px;

    font-weight:600;

    font-size:13px;

}

/* ===========================
   Main
=========================== */

.login-row{

    min-height:calc(100vh - 90px);

    padding:50px 0;

}

/* ===========================
   Left Panel
=========================== */

.left-panel{

    padding:40px;

}

.illustration{

    width:100%;

    max-width:500px;

    margin:auto;

    display:block;

}

.left-panel h2{

    margin-top:35px;

    font-weight:700;

    font-size:36px;

    color:#0f172a;

    line-height:1.3;

}

.left-panel p{

    margin-top:18px;

    color:#64748b;

    font-size:17px;

    line-height:1.8;

}

.features{

    margin-top:35px;

}

.features div{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    background:#ffffff;

    padding:15px 18px;

    border-radius:14px;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

    font-weight:500;

    transition:.3s;

}

.features div:hover{

    transform:translateX(6px);

}

.features i{

    color:#0d6efd;

    font-size:22px;

}

/* ===========================
   Login Card
=========================== */

.login-card{

    background:#ffffff;

    padding:45px;

    border-radius:22px;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    animation:fadeUp .5s ease;

}

.login-card h3{

    font-size:34px;

    font-weight:700;

    color:#111827;

}

.login-card p{

    color:#6b7280;

    margin-top:8px;

}

/* ===========================
   Inputs
=========================== */

.form-control{

    height:60px;

    border-radius:14px;

    border:1px solid #d1d5db;

    font-size:15px;

}

.form-control:focus{

    border-color:#0d6efd;

    box-shadow:0 0 0 .15rem rgba(13,110,253,.18);

}

.form-floating label{

    color:#6b7280;

}

.form-floating i{

    margin-right:8px;

}

/* ===========================
   Password
=========================== */

.password-wrapper{

    position:relative;

}

.toggle-password{

    position:absolute;

    top:50%;

    right:18px;

    transform:translateY(-50%);

    cursor:pointer;

    font-size:20px;

    color:#64748b;

    z-index:5;

}

/* ===========================
   Remember
=========================== */

.form-check-input{

    cursor:pointer;

}

.form-check-label{

    cursor:pointer;

    font-size:14px;

}

.login-card a{

    color:#0d6efd;

    font-weight:500;

}

/* ===========================
   Login Button
=========================== */

.btn-login{

    height:58px;

    border:none;

    border-radius:14px;

    background:#0d6efd;

    color:#ffffff;

    font-size:17px;

    font-weight:600;

    transition:.3s;

}

.btn-login:hover{

    background:#0b5ed7;

    transform:translateY(-2px);

}

/* ===========================
   OTP UI (Future Ready)
=========================== */

.otp-box{

    width:58px;

    height:58px;

    border:2px solid #d1d5db;

    border-radius:12px;

    text-align:center;

    font-size:22px;

    font-weight:700;

}

.otp-box:focus{

    border-color:#0d6efd;

    outline:none;

}

.timer{

    font-size:18px;

    font-weight:700;

    color:#dc3545;

}

.resend{

    color:#0d6efd;

    font-weight:600;

}

/* ===========================
   Animation
=========================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
   Mobile
=========================== */

@media(max-width:991px){

    .left-panel{

        display:none;

    }

    .login-row{

        padding:25px 0;

    }

    .login-card{

        padding:30px;

    }

}

@media(max-width:576px){

    .brand h4{

        font-size:18px;

    }

    .brand p{

        font-size:12px;

    }

    .logo{

        width:45px;

    }

    .version{

        display:none;

    }

    .login-card{

        padding:22px;

        border-radius:18px;

    }

    .login-card h3{

        font-size:28px;

    }

    .btn-login{

        height:52px;

    }

}