/* =========================================
   OneScan Login Page
   Responsive Version
========================================= */

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

html{
    width:100%;
    height:100%;
    overflow:hidden;
}

body{
    width:100%;
    height:100dvh;
    min-height:100dvh;

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

    padding:20px;

    font-family:"Sora",sans-serif;

    background:
    radial-gradient(circle at top left,
        rgba(102,82,255,.45),
        transparent 35%),

    radial-gradient(circle at bottom right,
        rgba(0,212,255,.35),
        transparent 35%),

    linear-gradient(
        135deg,
        #000000 0%,
        #101010 45%,
        #000000 100%
    );

    position:relative;
    overflow:hidden;
}

/* =========================
   BACKGROUND GLOW
========================= */

body::before{
    content:"";
    position:absolute;

    width:320px;
    height:320px;

    background:#6652ff;

    border-radius:50%;

    filter:blur(130px);

    opacity:.28;

    top:-120px;
    left:-120px;

    animation:moveGlow 8s infinite alternate;
}

body::after{
    content:"";
    position:absolute;

    width:300px;
    height:300px;

    background:#00d4ff;

    border-radius:50%;

    filter:blur(130px);

    opacity:.22;

    bottom:-120px;
    right:-120px;

    animation:moveGlow2 10s infinite alternate;
}

@keyframes moveGlow{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(60px,50px);
    }

}

@keyframes moveGlow2{

    from{
        transform:translate(0,0);
    }

    to{
        transform:translate(-60px,-50px);
    }

}

/* =========================
   LOGIN CARD
========================= */

.login-card{

    position:relative;
    z-index:2;

    width:min(100%,420px);

    background:#fff;

    padding:40px 34px;

    border-radius:28px;

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

    animation:cardShow .5s ease;

}

@keyframes cardShow{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

.logo{

    width:90px;
    height:90px;

    margin:auto;

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

    background:#6652ff;

    color:#fff;

    border-radius:50%;

    font-size:42px;

    box-shadow:
        0 15px 35px rgba(102,82,255,.35);

    transition:.3s;

}

.logo:hover{

    background:#00d4ff;

    color:#000;

    transform:translateY(-5px);

}

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

.title{

    margin-top:22px;

    font-size:38px;

    font-weight:800;

    letter-spacing:-1px;

    color:#000;

    text-align:center;

}

.subtitle{

    margin-top:8px;

    margin-bottom:34px;

    font-size:15px;

    font-weight:500;

    color:#666;

    text-align:center;

}

/* =========================
   LABEL
========================= */

label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:700;

    color:#000;

}

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

.phone-box{

    width:100%;

    height:58px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:0 18px;

    border-radius:16px;

    border:2px solid #ddd;

    transition:.3s;

}

.phone-box i{

    color:#6652ff;

    font-size:18px;

}

.phone-box input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    color:#000;

    font-size:16px;

    font-family:"Sora",sans-serif;

}

.phone-box input::placeholder{

    color:#999;

}

.phone-box:focus-within{

    border-color:#6652ff;

    box-shadow:
        0 0 0 4px rgba(102,82,255,.12);

}

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

.btn-main,
.btn-success{

    width:100%;

    height:58px;

    margin-top:22px;

    border:none;

    border-radius:16px;

    background:#6652ff;

    color:#ffffff;

    font-family:"Sora",sans-serif;

    font-size:16px;

    font-weight:700;

    letter-spacing:.2px;

    cursor:pointer;

    transition:.3s ease;

}

.btn-main:hover,
.btn-success:hover{

    background:#00d4ff;

    color:#000;

    transform:translateY(-3px);

    box-shadow:
        0 15px 30px rgba(0,212,255,.35);

}

.btn-main:active,
.btn-success:active{

    transform:scale(.98);

}

.btn-main i,
.btn-success i{

    margin-right:8px;

}

button:disabled{

    opacity:.6;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


/* =========================
   PREMIUM OTP CARD
========================= */

.otp-box{
    background:linear-gradient(135deg,#f8faff,#eef6ff);
    border:1px solid #dde8ff;

    border-radius:20px;

    padding:22px;

    text-align:center;

    margin-bottom:18px;
}

.otp-icon{
    width:54px;
    height:54px;

    margin:0 auto 14px;

    border-radius:16px;

    background:linear-gradient(135deg,#6652ff,#1fb8ff);

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

    color:#fff;
    font-size:22px;
}

.otp-box p{
    margin:0;
    color:#8b8b8b;
    font-size:12px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
}

.otp-box h5{
    margin-top:8px;
    font-size:15px;
    font-weight:700;
    color:#222;
    word-break:break-word;
}
/* =========================
   OTP INPUT
========================= */


/* OTP INPUT CONTAINER */

.otp-input-box{
    display:flex;
    align-items:center;
    gap:14px;

    width:100%;
    height:58px;

    padding:0 18px;
    margin:18px 0;

    background:#fff;

    border:2px solid #e6e6e6;
    border-radius:16px;

    transition:.25s;
}

.otp-input-box:focus-within{
    border-color:#6652ff;
    box-shadow:0 0 0 4px rgba(102,82,255,.12);
}

/* Lock Icon */

.otp-input-box i{
    color:#6652ff;
    font-size:18px;
    flex-shrink:0;
}

/* Input */

.otp-input-box input{
    flex:1;
    width:100%;
    border:none;
    outline:none;
    background:transparent;

    font-size:18px;
    font-weight:600;
    color:#222;

    letter-spacing:6px;
    text-align:left;
}

/* Placeholder */

.otp-input-box input::placeholder{
    letter-spacing:0;
    font-size:16px;
    font-weight:500;
    color:#b7b7b7;
}

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

.form-group{

    margin-bottom:18px;

}

.mb-3{

    margin-bottom:18px !important;

}

.mt-3{

    margin-top:18px !important;

}

.mt-4{

    margin-top:24px !important;

}

.w-100{

    width:100%;

}

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

.phone-box{

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .2s ease;

}

.phone-box:hover{

    border-color:#6652ff55;

}

.phone-box:focus-within{

    transform:translateY(-2px);

}

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

a{

    color:#6652ff;

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:#00d4ff;

}

/* =========================
   ICONS
========================= */

i{

    user-select:none;

}

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

img{

    max-width:100%;

    display:block;

    height:auto;

}

/* =========================================
   LARGE LAPTOPS
========================================= */

@media (min-width:1400px){

    .login-card{

        width:440px;

        padding:42px 38px;

    }

}

/* =========================================
   LAPTOP
========================================= */

@media (max-width:1200px){

    body{

        padding:18px;

    }

}

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

@media (max-width:768px){

    html,
    body{

        width:100%;
        height:100dvh;
        overflow:hidden;

    }

    body{

        padding:18px;

    }

    .login-card{

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

        padding:34px 28px;

        border-radius:24px;

    }

    .logo{

        width:82px;
        height:82px;
        font-size:38px;

    }

    .title{

        font-size:34px;

    }

    .subtitle{

        font-size:15px;

    }

}

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

@media (max-width:480px){

    html,
    body{

        width:100%;
        height:100dvh;
        overflow:hidden;

    }

    body{

        padding:12px;

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

    }

    .login-card{

        width:100%;
        max-width:100%;

        padding:24px 20px;

        border-radius:20px;

    }

    .logo{

        width:68px;
        height:68px;

        font-size:30px;

    }

    .title{

        margin-top:18px;

        font-size:28px;

    }

    .subtitle{

        margin-top:6px;

        margin-bottom:24px;

        font-size:14px;

    }

    label{

        font-size:13px;

    }

    .phone-box{

        height:52px;

        padding:0 15px;

    }

    .phone-box input{

        font-size:15px;

    }

    .btn-main,
    .btn-success{

        height:52px;

        font-size:15px;

        margin-top:18px;

    }

    .otp-box{

        padding:18px;

    }

    .otp-box h5{

        font-size:20px;

    }

    .test-otp{

        padding:12px;

    }

}

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

@media (max-width:360px){

    body{

        padding:10px;

    }

    .login-card{

        padding:20px 16px;

    }

    .logo{

        width:60px;
        height:60px;

        font-size:28px;

    }

    .title{

        font-size:24px;

    }

    .subtitle{

        font-size:13px;

        margin-bottom:20px;

    }

    .phone-box{

        height:48px;

    }

    .btn-main,
    .btn-success{

        height:48px;

        font-size:14px;

    }

}

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

img{

    max-width:100%;

    height:auto;

}

input,
button{

    font-family:inherit;

}

input{

    min-width:0;

}

button{

    cursor:pointer;

}

*:focus{

    outline:none;

}
        
        .logo-box{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:15px;
}


.logo-box img{
    width:200px;
    height:75px;
    object-fit:contain;
}

/* PREMIUM LOGIN STYLE */


.login-card{

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

    backdrop-filter:blur(20px);

}



/* LOGO */

.logo-box{

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

    margin-bottom:18px;

}


.logo-box img{

    width:150px;
    height:auto;

}



/* TITLE */

.brand-title{

    text-align:center;

    font-size:30px;

    font-weight:800;

    color:#000;

    letter-spacing:-.5px;

    margin-bottom:10px;

}




.subtitle{

    max-width:300px;

    margin:0 auto 22px;

    line-height:1.6;

}




/* SECURITY BADGE */


.trust-badge{

    width:max-content;

    margin:0 auto 28px;


    padding:9px 18px;


    border-radius:50px;


    background:
    linear-gradient(
    135deg,
    rgba(102,82,255,.12),
    rgba(0,212,255,.12)
    );


    border:1px solid rgba(102,82,255,.2);


    color:#6652ff;


    font-size:13px;

    font-weight:700;


}


.trust-badge i{

    margin-right:7px;

}



/* BOTTOM FEATURES */


.features-mini{


    display:flex;

    justify-content:space-between;

    gap:8px;


    margin-top:0px;

    padding-top:22px;

    border-top:1px solid #eee;


}


.features-mini div{


    flex:1;


    text-align:center;


    font-size:11px;

    color:#666;

    font-weight:600;


}


.features-mini i{


    display:block;

    font-size:18px;

    color:#6652ff;

    margin-bottom:6px;


}




@media(max-width:480px){


.brand-title{

    font-size:25px;

}


.logo-box img{

    width:130px;

}


.features-mini div{

    font-size:10px;

}


}

/* =========================
   RESEND OTP
========================= */

.resend-wrapper{

    text-align:center;

    margin-top:18px;

}

.otp-timer{

    color:#666;

    font-size:14px;

    font-weight:600;

}

.otp-timer span{

    color:#6652ff;

    font-weight:700;

}

.resend-btn{

    color:#6652ff;

    font-weight:700;

    text-decoration:none;

    padding:0;

}

.resend-btn:hover{

    color:#00d4ff;

    text-decoration:none;

}