/* =====================================================
   BASIC
===================================================== */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;

    font-family:Georgia,"Times New Roman",serif;

    background:
        linear-gradient(
            135deg,
            #082b5c,
            #eef4fb 45%,
            #dbe7f4
        );

    padding:24px;
}


/* =====================================================
   MAIN CARD
===================================================== */

.page{
    width:min(100%,900px);
    min-height:760px;

    background:#fff;

    border-radius:34px;

    box-shadow:
        0 18px 55px rgba(4,28,61,.28);

    padding:55px 70px 35px;

    text-align:center;

    position:relative;

    overflow:hidden;

    animation:pageOpen .7s ease;
}

@keyframes pageOpen{

    from{
        opacity:0;
        transform:translateY(25px) scale(.97);
    }

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

}


.page:before,
.page:after{

    content:"";

    position:absolute;

    width:260px;
    height:34px;

    background:#f5b631;

    transform:rotate(-42deg);

    opacity:.95;

}

.page:before{
    left:-100px;
    top:30px;
}

.page:after{
    right:-100px;
    bottom:30px;
}


/* =====================================================
   LOGO
===================================================== */

.logo{

    width:min(100%,100px);
    height:100px;

    object-fit:contain;

    margin:0 auto 20px;

    display:block;

    animation:logoAnimation 1s ease;

}

@keyframes logoAnimation{

    0%{
        opacity:0;
        transform:scale(.7) rotate(-10deg);
    }

    70%{
        transform:scale(1.05);
    }

    100%{
        opacity:1;
        transform:scale(1) rotate(0);
    }

}


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

h1{

    color:#0b2a55;

    font-size:42px;

    margin:8px 20px;

}

.sub{

    font-family:Arial,sans-serif;

    color:#596276;

    font-size:24px;

    margin-bottom:34px;

}


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

.form{

    max-width:670px;

    margin:auto;

}


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

.field{

    height:124px;

    border:2px solid #b7cae6;

    border-radius:24px;

    margin:22px 0;

    display:flex;

    align-items:center;

    padding:14px 24px;

    background:#fff;

    transition:

        border-color .3s ease,

        box-shadow .3s ease,

        transform .3s ease,

        background .3s ease;

}


/* CLICK / FOCUS */

.field:focus-within{

    border-color:#1670cc;

    background:#fafdff;

    transform:translateY(-3px);

    box-shadow:

        0 0 0 5px rgba(22,112,204,.10),

        0 10px 25px rgba(7,62,131,.12);

    animation:fieldFocus .35s ease;

}

@keyframes fieldFocus{

    0%{
        transform:scale(.985);
    }

    60%{
        transform:scale(1.015);
    }

    100%{
        transform:scale(1);
    }

}


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

.icon{

    width:74px;
    height:74px;

    border-radius:50%;

    background:#d7e8ff;

    display:flex;

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

    font-family:Arial;

    font-size:34px;

    color:#092c5a;

    flex:none;

    transition:.3s;

}

.field:focus-within .icon{

    background:#073e83;

    color:#fff;

    transform:scale(1.08) rotate(-5deg);

}


/* =====================================================
   TEXT
===================================================== */

.text{

    flex:1;

    text-align:left;

    padding-left:28px;

    font-family:Arial,sans-serif;

}

.label{

    font-size:25px;

    font-weight:700;

    color:#5a6272;

    transition:.25s;

}

.field:focus-within .label{

    color:#073e83;

}


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

input{

    width:100%;

    border:0;

    outline:0;

    font-size:21px;

    color:#27364d;

    margin-top:7px;

    font-family:Arial,sans-serif;

    background:transparent;

}

input::placeholder{

    color:#a1aaba;

}


/* =====================================================
   PASSWORD EYE
===================================================== */

.eye{

    font-size:30px;

    color:#5d6677;

    cursor:pointer;

    transition:.25s;

    user-select:none;

}

.eye:hover{

    color:#073e83;

    transform:scale(1.15);

}


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

.login{

    width:100%;

    height:116px;

    border:2px solid #1670cc;

    border-radius:24px;

    background:

        linear-gradient(
            100deg,
            #073e83,
            #042b5c
        );

    color:#fff;

    font-size:38px;

    font-weight:700;

    cursor:pointer;

    box-shadow:

        0 12px 24px
        rgba(3,62,126,.28);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    transition:.25s;

    position:relative;

    overflow:hidden;

}

.login:hover{

    filter:brightness(1.08);

    transform:translateY(-3px);

    box-shadow:

        0 15px 30px
        rgba(3,62,126,.35);

}

.login:active{

    transform:scale(.98);

}


/* BUTTON SHINE */

.login:before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:60%;

    height:100%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
        );

    transform:skewX(-20deg);

}

.login:hover:before{

    animation:buttonShine .8s ease;

}

@keyframes buttonShine{

    from{
        left:-100%;
    }

    to{
        left:140%;
    }

}


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

.forgot{

    margin-top:18px;

    font-family:Arial,sans-serif;

    color:#073e83;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    display:inline-block;

    transition:.25s;

}

.forgot:hover{

    color:#f39c12;

    transform:translateY(-1px);

}


/* =====================================================
   SECURITY
===================================================== */

.secure{

    margin:35px auto 25px;

    max-width:600px;

    display:flex;

    align-items:center;

    gap:18px;

    color:#596276;

    font-family:Arial,sans-serif;

    font-size:20px;

}

.line{

    height:2px;

    background:#b9c2cf;

    flex:1;

}

.shield{

    font-size:32px;

    color:#092c5a;

}


/* =====================================================
   HELP
===================================================== */

.help{

    width:520px;

    max-width:100%;

    margin:auto;

    border:2px solid #b7cae6;

    border-radius:24px;

    padding:16px 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    font-family:Arial,sans-serif;

}

.phone{

    width:62px;

    height:62px;

    border-radius:50%;

    background:#ffe8ae;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:29px;

}

.helptext{

    text-align:left;

}

.need{

    font-size:19px;

    color:#687183;

}

.number{

    font-size:28px;

    font-weight:700;

    color:#0b2a55;

}

.copy{

    font-family:Arial,sans-serif;

    color:#7d879b;

    font-size:18px;

    margin-top:12px;

}


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

#error{

    display:none;

    color:#c62828;

    font:16px Arial,sans-serif;

    margin:12px;

    padding:10px;

    border-radius:10px;

    background:#fff1f1;

    animation:errorShake .35s ease;

}

@keyframes errorShake{

    0%,100%{
        transform:translateX(0);
    }

    25%{
        transform:translateX(-8px);
    }

    75%{
        transform:translateX(8px);
    }

}


/* =====================================================
   LOADING
===================================================== */

.loading{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(4,28,61,.65);

    backdrop-filter:blur(5px);

    align-items:center;

    justify-content:center;

    z-index:9999;

}

.loading.show{

    display:flex;

}

.loading-box{

    background:#fff;

    border-radius:22px;

    padding:35px 50px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

    animation:loadingOpen .3s ease;

}

@keyframes loadingOpen{

    from{
        opacity:0;
        transform:scale(.8);
    }

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

}

.spinner{

    width:55px;

    height:55px;

    border:5px solid #d7e8ff;

    border-top-color:#073e83;

    border-radius:50%;

    margin:auto;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{
        transform:rotate(360deg);
    }

}

.loading-text{

    margin-top:18px;

    color:#0b2a55;

    font:bold 18px Arial,sans-serif;

}


/* =====================================================
   OTP MODAL
===================================================== */

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(4,28,61,.65);

    backdrop-filter:blur(5px);

    align-items:center;

    justify-content:center;

    z-index:10000;

    padding:20px;

}

.modal.show{

    display:flex;

}

.modal-box{

    width:500px;

    max-width:100%;

    background:#fff;

    border-radius:28px;

    padding:35px;

    box-shadow:

        0 20px 60px
        rgba(0,0,0,.28);

    animation:modalOpen .35s ease;

}

@keyframes modalOpen{

    from{

        opacity:0;

        transform:
            translateY(25px)
            scale(.95);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}

.modal-title{

    color:#0b2a55;

    font-size:28px;

    margin-bottom:8px;

}

.modal-sub{

    color:#687183;

    font:15px Arial,sans-serif;

    margin-bottom:25px;

}

.modal-input{

    width:100%;

    height:60px;

    border:2px solid #b7cae6;

    border-radius:14px;

    padding:0 16px;

    font-size:20px;

    margin-bottom:15px;

}

.modal-input:focus{

    border-color:#073e83;

    box-shadow:

        0 0 0 4px
        rgba(7,62,131,.10);

}

.modal-btn{

    width:100%;

    height:58px;

    border:0;

    border-radius:14px;

    background:#073e83;

    color:#fff;

    font:bold 17px Arial,sans-serif;

    cursor:pointer;

    margin-top:8px;

}

.modal-btn:hover{

    background:#052d61;

}

.close-modal{

    float:right;

    border:0;

    background:#e74c3c;

    color:#fff;

    width:35px;

    height:35px;

    border-radius:50%;

    cursor:pointer;

    font-size:20px;

}


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

@media(max-width:650px){

    .page{

        padding:
            35px
            22px
            25px;

        min-height:auto;

    }

    .logo{

        height:100px;

    }

    h1{

        font-size:32px;

    }

    .sub{

        font-size:18px;

    }

    .field{

        height:95px;

        padding:10px 14px;

    }

    .icon{

        width:58px;

        height:58px;

        font-size:27px;

    }

    .text{

        padding-left:15px;

    }

    .label{

        font-size:18px;

    }

    input{

        font-size:16px;

    }

    .login{

        height:82px;

        font-size:28px;

    }

    .secure{

        font-size:15px;

    }

    .help{

        padding:12px;

    }

    .number{

        font-size:22px;

    }

}