:root{

    --primary:#0f766e;
    --primary-dark:#3730A3;
    --primary-light:#14b8a6;

    --success:#10B981;
    --danger:#EF4444;

    --bg:#F8FAFC;

    --card:#FFFFFF;

    --text:#111827;
    --text-light:#6B7280;

    --border:#E5E7EB;

    --radius:20px;

    --shadow:
        0 10px 40px rgba(0,0,0,.08);

    --transition:.3s ease;

    --font-family:'Plus Jakarta Sans',sans-serif;
}


body{

    #f8fafc;

    font-family:var(--font-family);


    min-height:100vh;
    background:
        radial-gradient(circle at 0% 0%, #c7d2fe 0%, transparent 35%),
        radial-gradient(circle at 100% 100%, #ddd6fe 0%, transparent 35%),
        linear-gradient(135deg,#f8fafc,#eef2ff);
}

.auth-wrapper{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;
}

.auth-card{
    width:100%;
    max-width:1200px;

    min-height:700px;

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

    backdrop-filter:blur(25px);

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

    border-radius:36px;

    overflow:hidden;

    box-shadow:
    0 40px 100px rgba(15,23,42,.12);

    padding:0;
}

.auth-left{

    height:700px;

    padding:60px;

    background: linear-gradient(135deg, #0f489c, #0a336f);

    color:#fff;

    display:flex;
    flex-direction:column;
    justify-content:center;

    position:relative;

    overflow:hidden;
}

.auth-right{

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    height:700px;

    background:#fff;
}

.partner-badge{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:10px 18px;

    border-radius:999px;

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

    backdrop-filter:blur(10px);

    font-size:13px;

    font-weight:600;

    margin-bottom:30px;
}
.auth-card::before{

    content:"";

    position:absolute;

    top:-100px;
    left:-100px;

    width:220px;
    height:220px;

    background:#4f46e5;

    opacity:.08;

    border-radius:50%;

    filter:blur(60px);
}

.auth-heading{

    font-size:38px;

    line-height:1.05;

    font-weight:800;

    margin-bottom:25px;

    max-width:550px;
}

.auth-desc{

    font-size:18px;

    line-height:1.8;

    opacity:.9;

    max-width:500px;

    margin-bottom:40px;
}

.feature-list{

    display:grid;

    gap:16px;
}

.feature-item{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px;

    border-radius:18px;

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

    backdrop-filter:blur(12px);
}

.feature-item i{

    font-size:22px;
}

.logo-wrap{

    width:90px;
    height:90px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    background:#fff;

    box-shadow:
    0 10px 30px rgba(15,23,42,.08);
}

.badge-auth{

    display:inline-block;

    padding:8px 14px;

    border-radius:999px;

    background:#ecfeff;

    color:#0f766e;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;
}

.logo{

    width:60px;
}

.title{

    font-size:42px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:15px;
}

.field-wrap{

    position:relative;
}

.field-icon{

    position:absolute;

    top:50%;
    left:20px;

    transform:translateY(-50%);

    color:#94a3b8;

    z-index:2;
}

.subtitle{

    font-size:15px;

    line-height:1.7;

    color:#64748b;

    max-width:320px;

    margin:auto auto 30px;
}

.form-label{

    font-size:14px;
    font-weight:600;
}

.form-control{

    height:64px;

    border-radius:18px;

    background:#f8fafc;

    border:2px solid transparent;

    font-size:15px;

    font-weight:500;

    padding-left:18px;

    transition:.3s;
}
.form-control:focus{

    background:#fff;

    border-color:#6366f1;

    box-shadow:
        0 0 0 6px rgba(99,102,241,.08);
}

.input-group{

    background:#f8fafc;

    border-radius:18px;

    overflow:hidden;
}

.btn-theme{

    height:56px;

    border:none;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:var(--transition);
}

.btn-theme:hover{

    background:var(--primary-dark);

    color:#fff;
}

.input-box{

    height:68px;

    border-radius:18px;

    padding-left:55px;

    border:2px solid #e2e8f0;

    background:#f8fafc;
}

.input-box:focus{

    border-color:#4f46e5;

    background:#fff;

    box-shadow:
    0 0 0 6px
    rgba(79,70,229,.08);
}


.input-group-text{

    background:#f8fafc;

    border:none;

    padding-left:18px;

    color:#64748b;
}
.btn-auth{

    height: 68px;
    border: none;
    border-radius: 18px;
    font-weight: 700;
    font-size: 16px;
    background: linear-gradient(135deg, #0d6efd, #03285d);
    color: #fff;
}

.security-info{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:20px;

    font-size:14px;

    color:#64748b;
}

.application-flow{

    margin-top:40px;

    padding-top:30px;

    border-top:1px solid #e2e8f0;
}

.application-flow ul{

    list-style:none;

    padding:0;

    margin:0;
}

.application-flow li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

    font-size:14px;
}

.application-flow li span{

    width:32px;
    height:32px;

    border-radius:50%;

    background:#f1f5f9;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    font-weight:700;
}

@media(max-width:991px){

    .auth-left{
        display:none;
    }

    .auth-right{

        height:auto;

        padding:35px 25px;
    }

    .title{

        font-size:28px;
    }

    .auth-card{

        min-height:auto;

        border-radius:24px;
    }
}

.btn-auth:hover{

    transform:translateY(-3px);

    box-shadow:
        0 15px 35px rgba(79,70,229,.35);

    color:#fff;
}

.shape{

    position:fixed;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;
}

.shape-1{

    width:300px;
    height:300px;

    background:#6366f1;

    opacity:.15;

    top:-100px;
    right:-100px;
}

.shape-2{

    width:300px;
    height:300px;

    background:#8b5cf6;

    opacity:.12;

    bottom:-120px;
    left:-120px;
}


/*OTP SEGMENT*/

.otp-section{

    margin-top:20px;
}

.otp-header{

    text-align:center;
    margin-bottom:25px;
}

.otp-header h4{

    font-weight:700;
    margin-bottom:10px;
}

.otp-header p{

    color:#64748b;
}

.otp-inputs{

    display:flex;

    justify-content:center;

    gap:10px;
}

.otp-box{

    width:55px;
    height:65px;

    border:2px solid #e2e8f0;

    border-radius:16px;

    text-align:center;

    font-size:24px;

    font-weight:700;

    outline:none;

    transition:.3s;
}

.otp-box:focus{

    border-color:#0f766e;

    box-shadow:
    0 0 0 4px rgba(15,118,110,.10);
}

.otp-footer{

    display:flex;

    justify-content:center;

    margin-top:20px;

    font-size:14px;
}

#resendOtp{

    color:#0f766e;

    font-weight:700;

    text-decoration:none;
}

.btn-auth:disabled{

    opacity:.85;

    cursor:not-allowed;

    transform:none !important;
    color: #fff;
}

.spinner-border-sm{

    width:1rem;
    height:1rem;
}


.swal2-styled{
    background: linear-gradient(135deg, #0d6efd, #03285d);
}

@media(max-width:746px){
    .auth-wrapper{
        min-width: auto;
        padding: 0px;
    }

    .auth-card {
        min-height: auto;
        border-radius: 24px;
        background: #fff;
        box-shadow: none;
        border: none;
        backdrop-filter: none;
    }

    body{
        background: #fff;
    }
}