/* ==========================================
   JSI TALENT HUB
   FUTURISTIC PURPLE DARK THEME
========================================== */

:root{

    --jsi-bg:#06060d;
    --jsi-card:#0d1020;
    --jsi-card-2:#12162b;

    --jsi-purple:#7c3aed;
    --jsi-purple-light:#9f67ff;

    --jsi-text:#ffffff;
    --jsi-muted:#98a2b3;

    --jsi-border:rgba(255,255,255,.08);

    --jsi-success:#00d084;

    --jsi-radius:18px;
}

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

.jsi-wizard-wrap{

    max-width:900px;
    margin:40px auto;
    padding:25px;

}

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

#jsi-onboarding-form{

    background:linear-gradient(
        180deg,
        #0f1224,
        #090b16
    );

    border:1px solid var(--jsi-border);

    border-radius:28px;

    padding:35px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 40px rgba(124,58,237,.15);

    overflow:hidden;

}

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

.jsi-onboarding-title{

    text-align:center;
    color:#fff;
    font-size:32px;
    font-weight:800;
    margin-bottom:10px;

}

.jsi-onboarding-subtitle{

    text-align:center;
    color:var(--jsi-muted);
    margin-bottom:30px;

}

/* ===========================
   PROGRESS
=========================== */

.jsi-progress{

    margin-bottom:35px;

}

#jsi-progress-text{

    color:#fff;
    margin-bottom:10px;
    font-weight:600;

}

#jsi-progress-bar{

    width:100%;
    height:12px;

    background:#151826;

    border-radius:100px;

    overflow:hidden;

}

#jsi-progress-fill{

    width:0;

    height:100%;

    border-radius:100px;

    background:linear-gradient(
        90deg,
        #7c3aed,
        #9f67ff
    );

    transition:.4s ease;

}

/* ===========================
   STEPS
=========================== */

.jsi-step{

    display:none;

    animation:fadeSlide .25s ease;

}

.jsi-step.active{

    display:block;

}

@keyframes fadeSlide{

    from{

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

    }

    to{

        opacity:1;
        transform:none;

    }

}

/* ===========================
   STEP HEADINGS
=========================== */

.jsi-step h3{

    color:#fff;
    font-size:26px;
    margin-bottom:25px;

}

/* ===========================
   LABELS
=========================== */

.jsi-step label{

    display:block;

    color:#cfd5e3;

    font-size:14px;

    margin-bottom:8px;

    font-weight:600;

}

/* ===========================
   INPUTS
=========================== */

.jsi-step input,
.jsi-step select,
.jsi-step textarea{

    width:100%;

    background:#0c1020;

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

    color:#fff;

    padding:15px 18px;

    border-radius:14px;

    margin-bottom:18px;

    font-size:15px;

    transition:.25s;

}

.jsi-step textarea{

    min-height:140px;
    resize:vertical;

}

.jsi-step input:focus,
.jsi-step select:focus,
.jsi-step textarea:focus{

    outline:none;

    border-color:#7c3aed;

    box-shadow:
        0 0 0 3px rgba(124,58,237,.2);

}

/* ===========================
   PROFESSION CARDS
=========================== */

.jsi-profession-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));

    gap:15px;

}

.jsi-profession-card{

    background:#0d1020;

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

    border-radius:16px;

    padding:18px;

    cursor:pointer;

    color:#fff;

    transition:.25s;

    text-align:center;

}

.jsi-profession-card:hover{

    transform:translateY(-4px);

    border-color:#7c3aed;

}

.jsi-profession-card.active{

    border-color:#7c3aed;

    background:
    rgba(124,58,237,.15);

}

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

.jsi-upload-btn{

    width:100%;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #7c3aed,
        #9f67ff
    );

    color:#fff;

    padding:15px;

    font-weight:700;

    margin-bottom:12px;

    cursor:pointer;

    transition:.25s;

}

.jsi-upload-btn:hover{

    transform:translateY(-2px);

}

/* ===========================
   NAVIGATION
=========================== */

.jsi-wizard-nav{

    display:flex;

    justify-content:space-between;

    gap:12px;

    margin-top:30px;

}

.jsi-wizard-nav button{

    flex:1;

    border:none;

    border-radius:14px;

    padding:16px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

/* PREVIOUS */

#jsi-prev-step{

    background:#1b2034;

    color:#fff;

}

/* NEXT */

#jsi-next-step{

    background:linear-gradient(
        135deg,
        #7c3aed,
        #9f67ff
    );

    color:#fff;

}

/* FINISH */

#jsi-finish-step{

    background:linear-gradient(
        135deg,
        #00d084,
        #00e08a
    );

    color:#fff;

}

/* ===========================
   HOVER
=========================== */

#jsi-prev-step:hover,
#jsi-next-step:hover,
#jsi-finish-step:hover{

    transform:translateY(-2px);

}

/* ===========================
   SUCCESS CARD
=========================== */

.jsi-success-card{

    text-align:center;

    padding:60px 20px;

}

.jsi-success-card h3{

    color:#00d084;

    font-size:32px;

    margin-bottom:10px;

}

.jsi-success-card p{

    color:#cfd5e3;

}

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

@media(max-width:768px){

    .jsi-wizard-wrap{

        padding:12px;

    }

    #jsi-onboarding-form{

        padding:22px;

        border-radius:20px;

    }

    .jsi-step h3{

        font-size:22px;

    }

    .jsi-wizard-nav{

        flex-direction:column;

    }

}
.jsi-upload-box{

    border:2px dashed
    rgba(124,58,237,.35);

    border-radius:20px;

    padding:30px;

    text-align:center;

    cursor:pointer;

    background:
    rgba(124,58,237,.05);

    margin-bottom:15px;

    transition:.3s;

}

.jsi-upload-box:hover{

    border-color:#8b5cf6;

    background:
    rgba(124,58,237,.12);

}

.jsi-upload-inner{

    color:#fff;

}

.jsi-upload-icon{

    font-size:40px;

    margin-bottom:10px;

}

.jsi-upload-preview{

    width:100%;

    border-radius:16px;

    max-height:280px;

    object-fit:cover;

}

.uploading{

    opacity:.6;

    pointer-events:none;

}