/* =========================================================
   SAARTHI
   Election Management System
   Premium Indigo / Violet Theme
========================================================= */

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

html{
    height:100%;
}

body{

    min-height:100vh;

    padding:20px;

    display:flex;

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

    background:
        linear-gradient(
            135deg,
            #EEF0FA 0%,
            #F7F5FB 50%,
            #EEF3FC 100%
        );

    overflow-x:hidden;

    position:relative;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

body:before{

    content:'';

    position:absolute;

    width:520px;
    height:520px;

    background:
        radial-gradient(
            circle,
            rgba(79,70,165,.13) 0%,
            rgba(79,70,165,.05) 45%,
            transparent 70%
        );

    border-radius:50%;

    top:-230px;
    right:-190px;

    pointer-events:none;
}

body:after{

    content:'';

    position:absolute;

    width:460px;
    height:460px;

    background:
        radial-gradient(
            circle,
            rgba(224,180,92,.12) 0%,
            rgba(224,180,92,.04) 45%,
            transparent 70%
        );

    border-radius:50%;

    left:-190px;
    bottom:-210px;

    pointer-events:none;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.wrapper{

    width:1180px;

    max-width:100%;

    background:#FFFFFF;

    display:flex;

    border-radius:24px;

    overflow:hidden;

    position:relative;

    z-index:5;

    box-shadow:
        0 30px 80px rgba(41,48,74,.16),
        0 8px 25px rgba(41,48,74,.07);
}


/* =========================================================
   LEFT BRANDING PANEL
========================================================= */

.left{

    width:55%;

    padding:55px;

    color:#FFFFFF;

    display:flex;

    flex-direction:column;

    justify-content:center;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #37327D 0%,
            #4F46A5 52%,
            #6366C5 100%
        );
}


/* Decorative glow */

.left:before{

    content:'';

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.10),
            transparent 68%
        );

    top:-220px;
    right:-190px;

    pointer-events:none;
}

.left:after{

    content:'';

    position:absolute;

    width:300px;
    height:300px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

    bottom:-170px;
    left:-130px;

    pointer-events:none;
}


/* =========================================================
   BRAND ICON
========================================================= */

.brand-icon{

    width:78px;

    height:78px;

    border-radius:21px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    margin-bottom:22px;

    position:relative;

    z-index:2;

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

    border:
        1px solid rgba(255,255,255,.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 12px 30px rgba(0,0,0,.12);
}


/* =========================================================
   SAARTHI TITLE
========================================================= */

.left h1{

    font-size:54px;

    line-height:1.05;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:6px;

    position:relative;

    z-index:2;

    text-shadow:
        0 3px 15px rgba(0,0,0,.12);
}

.left h3{

    font-size:21px;

    line-height:1.4;

    font-weight:400;

    margin-bottom:38px;

    color:#E8E9FF;

    position:relative;

    z-index:2;
}


/* =========================================================
   FEATURES
========================================================= */

.feature{

    display:flex;

    align-items:center;

    margin-bottom:17px;

    font-size:16px;

    line-height:1.4;

    font-weight:500;

    color:#F7F7FF;

    position:relative;

    z-index:2;
}

.feature span{

    width:35px;

    height:35px;

    min-width:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-right:13px;

    border-radius:50%;

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

    border:
        1px solid rgba(255,255,255,.10);

    color:#E4C46D;

    font-size:16px;

    font-weight:700;
}


/* =========================================================
   RIGHT LOGIN PANEL
========================================================= */

.right{

    width:45%;

    padding:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#FFFFFF;
}


/* =========================================================
   LOGIN BOX
========================================================= */

.login-box{

    width:100%;

    max-width:420px;
}


/* =========================================================
   LOGIN HEADING
========================================================= */

.login-box h2{

    font-size:34px;

    line-height:1.2;

    font-weight:700;

    color:#403A8F;

    margin-bottom:9px;

    letter-spacing:-.3px;
}

.login-box p{

    color:#73778B;

    margin-bottom:32px;

    font-size:14px;

    line-height:22px;
}

.login-box p strong{

    color:#4F46A5;

    font-weight:600;
}


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

.input{

    margin-bottom:20px;
}

.input label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#343A52;

    font-size:14px;
}


/* =========================================================
   TEXTBOX
========================================================= */

.input input{

    width:100%;

    height:55px;

    padding:0 18px;

    border:
        1px solid #DDE0EC;

    border-radius:12px;

    background:#FFFFFF;

    color:#29304A;

    font-size:15px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.input input::placeholder{

    color:#A0A4B4;
}

.input input:hover{

    border-color:#C8CBDC;
}

.input input:focus{

    outline:none;

    border-color:#6366C5;

    background:#FFFFFF;

    box-shadow:
        0 0 0 3px rgba(99,102,197,.08),
        0 5px 15px rgba(79,70,165,.06);
}


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

.options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:24px;

    font-size:13px;
}

.options label{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    color:#606579;
}

.options input[type=checkbox]{

    width:16px;

    height:16px;

    accent-color:#5B55B7;

    cursor:pointer;
}

.options a{

    text-decoration:none;

    font-weight:600;

    color:#5148A5;

    transition:.2s;
}

.options a:hover{

    color:#39327F;

    text-decoration:underline;
}


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

.btn-login{

    width:100%;

    height:58px;

    border:0;

    border-radius:14px;

    background:
        linear-gradient(
            90deg,
            #4F46A5 0%,
            #5B55B7 50%,
            #6366C5 100%
        );

    color:#FFFFFF;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

    box-shadow:
        0 10px 25px rgba(79,70,165,.24);
}

.btn-login:hover{

    transform:translateY(-2px);

    background:
        linear-gradient(
            90deg,
            #433B91,
            #514AA7,
            #595CB5
        );

    box-shadow:
        0 15px 32px rgba(79,70,165,.30);
}

.btn-login:active{

    transform:translateY(0);

    box-shadow:
        0 7px 15px rgba(79,70,165,.22);
}

.btn-login:focus{

    outline:none;

    box-shadow:
        0 0 0 4px rgba(99,102,197,.14),
        0 10px 25px rgba(79,70,165,.24);
}


/* =========================================================
   MESSAGE
========================================================= */

#lbl_msg{

    font-weight:600;

    font-size:13px;
}


/* =========================================================
   SECURITY / ACCESS BOX
========================================================= */

.access-info{

    margin-top:24px;

    padding:15px 16px;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #F4F3FC,
            #F7F7FC
        );

    border:
        1px solid #E4E2F3;

    text-align:center;

    font-size:12px;

    color:#5A5791;

    line-height:20px;
}

.access-info strong{

    font-weight:700;

    color:#4F46A5;
}


/* =========================================================
   FOOTER
========================================================= */

.footer{

    margin-top:28px;

    text-align:center;

    font-size:12px;

    color:#85899A;

    line-height:22px;
}

.footer strong{

    color:#4F46A5;

    font-weight:700;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:991px){

    body{

        padding:20px;

        display:block;
    }

    .wrapper{

        flex-direction:column;

        margin:auto;
    }

    .left,
    .right{

        width:100%;
    }

    .left{

        padding:40px 30px;

        text-align:center;
    }

    .brand-icon{

        margin:
            0 auto 20px;
    }

    .left h1{

        font-size:42px;
    }

    .left h3{

        font-size:18px;

        margin-bottom:28px;
    }

    .feature{

        justify-content:center;

        font-size:15px;

        margin-bottom:13px;
    }

    .right{

        padding:42px 30px;
    }

    .login-box{

        max-width:430px;
    }
}


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

@media(max-width:768px){

    body{

        padding:15px;
    }

    .left{

        display:none;
    }

    .right{

        width:100%;

        padding:32px 22px;
    }

    .wrapper{

        width:100%;

        max-width:430px;

        border-radius:18px;
    }

    .login-box{

        max-width:100%;
    }
}


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

@media(max-width:576px){

    body{

        padding:10px;

        background:
            linear-gradient(
                135deg,
                #F0F1FA,
                #F8F6FC
            );
    }

    body:before,
    body:after{

        display:none;
    }

    .wrapper{

        border-radius:17px;

        box-shadow:
            0 15px 45px rgba(41,48,74,.14);
    }

    .right{

        padding:28px 18px;
    }

    .login-box h2{

        font-size:27px;

        text-align:center;

        margin-bottom:7px;
    }

    .login-box p{

        text-align:center;

        font-size:13px;

        line-height:20px;

        margin-bottom:25px;
    }

    .input{

        margin-bottom:17px;
    }

    .input label{

        font-size:13px;

        margin-bottom:7px;
    }

    .input input{

        height:51px;

        padding:0 14px;

        font-size:15px;
    }

    .options{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

        margin-bottom:22px;
    }

    .btn-login{

        height:53px;

        font-size:16px;
    }

    .access-info{

        margin-top:20px;

        padding:13px;

        font-size:11px;

        line-height:18px;
    }

    .footer{

        margin-top:22px;

        font-size:11px;

        line-height:20px;
    }
}


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

@media(max-width:360px){

    .right{

        padding:25px 16px;
    }

    .login-box h2{

        font-size:24px;
    }

    .login-box p{

        font-size:12px;

        margin-bottom:22px;
    }

    .input input{

        height:47px;

        font-size:14px;
    }

    .btn-login{

        height:49px;

        font-size:15px;
    }

    .access-info{

        font-size:10px;
    }

    .footer{

        font-size:10px;
    }
}