@import url("/css/theme.css");

body{

    min-height:100vh;

    background:#0c2340;

    overflow-y:auto;

    overflow-x:hidden;

    margin:0;

    padding:40px 20px;

}

/*------------------------------------------------*/

.background{

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(255,255,255,.10),
    transparent 35%),

    radial-gradient(circle at 85% 80%,
    rgba(0,132,255,.22),
    transparent 30%),

    linear-gradient(

    135deg,

    #0b2548,

    #0d4f86

    );

}

/* Floating Glass Circles */

.background::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    filter:blur(30px);

    top:-140px;

    left:-120px;

    animation:floatOne 14s ease-in-out infinite;

}

.background::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    border-radius:50%;

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

    filter:blur(40px);

    right:-120px;

    bottom:-120px;

    animation:floatTwo 18s ease-in-out infinite;

}

@keyframes floatOne{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(40px);

}

}

@keyframes floatTwo{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-50px);

}

}

/*------------------------------------------------*/

.login-container{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:flex-start;

}

/*------------------------------------------------*/

.glass-card{

    width:520px;

    max-width:100%;

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

    backdrop-filter:blur(28px);

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

    border-radius:var(--radius-large);

    padding:50px;

    box-shadow:0 35px 80px rgba(0,0,0,.35);

    text-align:center;

}

/*------------------------------------------------*/

.logo{

    width:110px;

    margin-bottom:24px;

    filter:drop-shadow(0 0 25px rgba(255,255,255,.35));

}

/*------------------------------------------------*/

h1{

    font-size:26px;

    white-space:nowrap;

    font-weight:700;

}

h2{

    font-size:19px;

    font-weight:500;

    letter-spacing:.3px;

}

p{

    margin:28px 0;

    color:var(--text-light);

}

/*------------------------------------------------*/

input{

    width:100%;

    height:60px;

    padding:0 22px;

    border:none;

    border-radius:18px;

    background:white;

    font-size:15px;

    transition:.25s;

}

input:focus{

    transform:translateY(-2px);

    box-shadow:

        0 12px 30px rgba(0,0,0,.15);

}

/*------------------------------------------------*/

button{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    background:linear-gradient(135deg, #0066ff, #0047cc);

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:var(--speed);

    box-shadow:0 12px 30px rgba(0,70,255,.35);

    letter-spacing:.5px;

}

button:hover{

    transform:

        translateY(-3px)

        scale(1.01);

}

button:active{

    transform:scale(.98);

}

/*------------------------------------------------*/

.footer{

    margin-top:28px;

    font-size:13px;

    color:rgba(255,255,255,.7);

}

/*------------------------------------------------*/

@media(max-width:650px){

.glass-card{

padding:35px 28px;

}

h1{

font-size:28px;

}

h2{

font-size:18px;

}

}

.glass-card{

    animation:

        cardFade .8s ease;

}

@keyframes cardFade{

    from{

        opacity:0;

        transform:

            translateY(25px)

            scale(.98);

    }

    to{

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

}

.input-group{

    position:relative;

    margin-bottom:20px;

}

.input-group i{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

    font-size:22px;

    color:#8b96a8;

    z-index:2;

}

.input-group input,
.input-group select{

    width:100%;

    height:60px;

    padding-left:58px;

    padding-right:55px;

    border:none;

    outline:none;

    border-radius:18px;

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

    color:#1f2937;

    font-size:16px;

    font-weight:500;

    appearance:none;

    -webkit-appearance:none;

    -moz-appearance:none;

    cursor:pointer;

    transition:.3s;

}

.glass-card{

    animation:

        float 7s ease-in-out infinite;

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-7px);

    }

    100%{

        transform:translateY(0);

    }

}

.footer{

    margin-top:34px;

    color:rgba(255,255,255,.78);

    font-size:13px;

    line-height:1.7;

}

.footer span{

    padding:0 6px;

}


.auth-links{

    margin-top:24px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

}

.auth-links a{

    color:white;

    text-decoration:none;

    font-size:14px;

    transition:.25s;

}

.auth-links a:hover{

    opacity:.75;

}

.auth-links span{

    color:rgba(255,255,255,.5);

}

.step{

    display:none;

}

.step.active{

    display:block;

}

#step1{

    display:block;

}

.button-row{

    display:flex;

    gap:12px;

    margin-top:18px;

}

.secondary-button{

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

    color:white;

}

.secondary-button:hover{

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

}

.terms{

    display:flex;

    align-items:center;

    gap:10px;

    margin:22px 0;

    color:white;

    font-size:14px;

}

.terms input{

    width:18px;

    height:18px;

}

.progress{

    width:100%;

    height:8px;

    border-radius:20px;

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

    margin-top:25px;

    overflow:hidden;

}

.progress-bar{

    width:33%;

    height:100%;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #0d6efd,

        #4da3ff

    );

    transition:.35s;

}

.progress-text{

    margin-top:10px;

    color:white;

    opacity:.8;

    font-size:14px;

}

select{

    appearance:none;

    -webkit-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    background-size:18px;

}

select:disabled{

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

    color:rgba(255,255,255,.45);

    cursor:not-allowed;

}

.step{

    display:none;

    animation:fadeSlide .35s ease;

}

.step.active{

    display:block;

}

@keyframes fadeSlide{

    from{

        opacity:0;

        transform:translateX(25px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.wizard-steps{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin:30px 0;

}

.wizard-step{

    display:flex;

    flex-direction:column;

    align-items:center;

    color:rgba(255,255,255,.55);

    transition:.35s;

}

.wizard-step.active{

    color:#fff;

}

.circle{

    width:34px;

    height:34px;

    border-radius:50%;

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

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    margin-bottom:8px;

}

.wizard-step.active .circle{

    background:#1e72ff;

    box-shadow:0 0 18px rgba(30,114,255,.45);

}

.line{

    flex:1;

    height:2px;

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

    margin-top:-20px;

}

.section-title{

    margin-bottom:28px;

}

.section-title h3{

    font-size:24px;

    margin-bottom:8px;

}

.section-title p{

    opacity:.75;

    font-size:15px;

}

.step{

    display:none;

    animation:slideFade .4s ease;

}

.step.active{

    display:block;

}

@keyframes slideFade{

    from{

        opacity:0;

        transform:translateX(30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.summary-card{

    margin-top:15px;

    border-radius:20px;

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

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

    overflow:hidden;

}

.summary-row{

    display:flex;

    justify-content:space-between;

    padding:18px 22px;

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

}

.summary-row:last-child{

    border-bottom:none;

}

.summary-row span{

    opacity:.7;

}

.summary-row strong{

    font-weight:600;

}

.form-select{

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 20px center;

    background-size:18px;

}

.input-group input:focus,
.input-group select:focus{

    background:#fff;

    box-shadow:

        0 0 0 3px rgba(37,99,235,.15),

        0 15px 40px rgba(0,0,0,.12);

}

.input-group select:disabled{

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

    color:#8a94a6;

    cursor:not-allowed;

}

.form-select:disabled{

    background:#e9edf3;

    color:#888;

    cursor:not-allowed;

}