/* =========================================
   Employee Wizard Layout
========================================= */

.employee-wizard-card {

    border-radius: 24px;
    background: #ffffff;
    border: none;
    box-shadow:
        0 10px 30px rgba(0,0,0,0.08);

}


.employee-wizard-container {

    max-width: 850px;
    margin: auto;

}



/* =========================================
   Header
========================================= */


.wizard-title {

    font-size: 30px;
    font-weight: 700;
    color: #1a73e8;

}


.wizard-subtitle {

    color: #6c757d;
    font-size: 15px;

}



/* =========================================
   Step Indicator
========================================= */


.step-wrapper {

    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:35px;

}


.step-item {

    display:flex;
    align-items:center;
    color:#9aa0a6;
    font-size:14px;
    font-weight:600;

}


.step-circle {

    width:38px;
    height:38px;

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

    border-radius:50%;

    background:#e9ecef;

    color:#6c757d;

    margin-right:8px;

    transition:.3s;

}



.step-item.active .step-circle {

    background:#1a73e8;
    color:white;

}



.step-item.completed .step-circle {

    background:#34a853;
    color:white;

}



.step-line {

    width:70px;

    height:3px;

    background:#e0e0e0;

    margin:0 15px;

}



.step-line.active {

    background:#1a73e8;

}



/* =========================================
   Form Inputs
========================================= */


.form-control,
.form-select {


    height:48px;

    border-radius:12px;

    border:1px solid #dadce0;

    padding-left:16px;

    font-size:15px;

}



.form-control:focus,
.form-select:focus {


    border-color:#1a73e8;

    box-shadow:
        0 0 0 3px rgba(26,115,232,.15);

}



.form-label {

    font-weight:600;

    color:#3c4043;

}



/* =========================================
   Wizard Steps Animation
========================================= */


.wizard-step {

    animation:
        fadeSlide .35s ease;

}



@keyframes fadeSlide {


    from {

        opacity:0;

        transform:translateX(30px);

    }


    to {

        opacity:1;

        transform:translateX(0);

    }

}



/* =========================================
   Buttons
========================================= */


.wizard-btn {


    height:46px;

    border-radius:24px;

    padding-left:30px;

    padding-right:30px;

    font-weight:600;

}



.btn-primary {


    background:#1a73e8;

    border-color:#1a73e8;

}



.btn-primary:hover {


    background:#1557b0;

}



/* =========================================
   Password Generator Box
========================================= */


.password-box {


    background:#f8f9fa;

    border-radius:14px;

    padding:15px;

    border:1px solid #eee;

}



.password-display {


    font-size:18px;

    font-weight:600;

    letter-spacing:2px;

}



/* =========================================
   Mobile Responsive
========================================= */


@media(max-width:768px){


    .step-wrapper {

        overflow-x:auto;

        justify-content:flex-start;

    }


    .step-line {

        width:35px;

        margin:0 8px;

    }


    .wizard-title {

        font-size:24px;

    }


    .employee-wizard-card {

        border-radius:16px;

    }


}