/* ==========================================================================
   1. Assessment Layout
   ========================================================================== */
.assessment-card{
    background:#192235;
    border:0;
    border-radius:20px;
    overflow:hidden;
    padding:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.assessment-content{
    margin-top:20px;
}
.analysis-wrapper{
    padding:50px 0 70px;
}
.analysis-card{
    margin:0 auto;
    padding:50px 60px;
    background:#192235;
    border-radius:24px;
    box-shadow:0 15px 20px rgba(0,0,0,.08);
    animation:analysisFade .6s ease;
}
@keyframes analysisFade{
    from{
        opacity:0;
        transform:translateY(25px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* ==========================================================================
   2. Assessment Progress
   ========================================================================== */
.assessment-progress{
    margin-bottom:20px;
}
.assessment-percent{
    color:#ff9800;
    font-size:18px;
    font-weight:500;
}
.progress{
    height:10px;
    overflow:hidden;
    border-radius:20px;
    background:#e9ecef;
}
.progress-bar{
    background:#ff9800 !important;
}
/* ==========================================================================
   Progress Steps
   ========================================================================== */
.step-item{
    text-align:center;
}
.step-number{
    width:42px;
    height:42px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto 10px;
    border-radius:50%;
    background:#dee2e6;
    color:#999999;
    font-weight:500;
    transition:.3s;
}
.step-active .step-number{
    background:#ff9800;
    color:#fff;
}
.step-title{
    font-size:14px;
    font-weight:500;
    color:#ff9800;
}
/* ==========================================================================
   Analysis Progress
   ========================================================================== */
.analysis-progress{
    height:12px;
    max-width:620px;
    margin:30px auto;
    overflow:hidden;
    border-radius:999px;
    background:#eceff3;
}
.analysis-progress .progress-bar{
    transition:width 1.1s ease;
}
/* ==========================================================================
   3. Header
   ========================================================================== */
.assessment-header{
    text-align:center;
    margin-bottom:20px;
}
.assessment-title{
    font-size:32px;
    font-weight:500;
    color:#ff9800;
    margin-bottom:15px;
    margin-top: 15px;
}
.assessment-subtitle{
    max-width:550px;
    margin:0 auto;
    color:#999999;
    font-size: 13px;
}
.assessment-description{
    font-size:16px;
    color:#999999;
    line-height:1.8;
}
.assessment-icon{
    font-size:72px;
    line-height:1;
    margin-bottom:20px;
}
.assessment-badge{
    display:inline-block;
    padding:8px 18px;
    margin-bottom:20px;
    border-radius:30px;
    font-size:12px;
    letter-spacing:1px;
}
/* ==========================================================================
   4. Form
   ========================================================================== */
.assessment-group{
    margin-bottom:20px;
    padding:20px;
    background:#222738;
    border:1px solid #ff9800;
    border-radius:16px;
    transition:.25s;
}
.assessment-group h4{
    color:#999999;
}
.assessment-group:hover{
    border-color:#ffd166;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}
.assessment-label{
    display:block;
    margin-bottom:10px;
    font-size:15px;
    font-weight:500;
    color:#999999;
}
/* ==========================================================================
   Form Controls
   ========================================================================== */
.form-control{
    border-radius:5px;
    font-size:16px;
}
.input-group-text{
    border-radius:5px;
    font-weight:500;
}
/* ==========================================================================
   Radio
   ========================================================================== */
.assessment-radio{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    cursor:pointer;
    border-radius:10px;
    transition:.2s;
    color: #999999;
}
.assessment-radio:hover{
    color:#ff9800;
}
/* ==========================================================================
   Checkbox
   ========================================================================== */
.assessment-checkbox{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    color: #999999;
}
.assessment-checkbox:hover{
    color:#ff9800;
}
.assessment-checkbox input:checked + span{
    color:#ff9800;
    font-weight:400;
}
.assessment-checkbox input{
    width:18px;
    height:18px;
}
.other-input{
    margin-top:10px;
}
/* ==========================================================================
   Validation
   ========================================================================== */
.assessment-error{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:8px;
    color:#dc3545;
    font-size:.9rem;
    font-weight:500;
}
.assessment-error i{
    font-size:13px;
}
.assessment-alert{
    padding:10px;
    border:1px solid #ffd6d6;
    border-radius:14px;
}
.assessment-alert ul{
    margin:0;
    padding-left:18px;
}
.assessment-alert li{
    margin-bottom:6px;
}
.assessment-alert p{
    margin:0;
    color:#dc3545;
}
/* ==========================================================================
   5. Option Card
   ========================================================================== */
.option-card{
    display:block;
    cursor:pointer;
}
.option-card input{
    display:none;
}
.option-body{
    padding:5px;
    text-align:center;
    border:1px solid #ff9800;
    border-radius:10px;
    transition:.25s;
}
.option-card input:checked + .option-body{
    background:#fff8f2;
    border-color:#fd7e14;
}
.option-icon{
    font-size:28px;
    color: #ff9800;
}
.option-title{
    font-weight:400;
    color:#999999;
}
/* ==========================================================================
   6. Benefits
   ========================================================================== */
.assessment-benefits{
    margin:20px 0;
    padding:5px;
    background:#222738;
    border-radius:18px;
}
.assessment-benefits-toggle{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border:0;
    background:transparent;
    cursor:pointer;
    text-align:left;
}
.assessment-benefits-title{
    display:flex;
    align-items:center;
    gap:16px;
}
.assessment-benefits-title i{
    font-size:26px;
    color:#f59e0b;
}
.assessment-benefits-title strong{
    display:block;
    color:#999999;
}
.assessment-benefits-title small{
    color:#ff9800;
}
.assessment-benefits-arrow{
    font-size:18px;
    color:#f59e0b;
    transition:.3s;
}
.assessment-benefits-content{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}
.assessment-benefits.open .assessment-benefits-content{
    max-height:600px;
}
.assessment-benefits.open .assessment-benefits-arrow{
    transform:rotate(180deg);
}
.assessment-benefits-content ul{
    margin:0;
    padding:0 24px 24px;
    list-style:none;
}
.assessment-benefits-content li{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px dashed #ececec;
}
.assessment-benefits-content li:last-child{
    border-bottom:0;
}
.assessment-benefits-content li i{
    width:20px;
    color:#22c55e;
}
.benefit-item{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
    font-size:14px;
    color: #999999;
}
.benefit-item:last-child{
    margin-bottom:0;
}
.benefit-item i{
    color:#ffb400;
    font-size:20px;
}
/* ==========================================================================
   7. Footer
   ========================================================================== */
.assessment-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:50px;
}
.assessment-footer .btn{
    min-width:150px;
    height:40px;
    border-radius:12px;
    font-weight:500;
}
.btn-back{
    background:#2f364d;
    color:#fff;
}
.btn-back:hover{
    background:#262626;
    color:#999999;
}
.btn-next{
    background:#ff9800;
    color:#fff;
}
.btn-next:hover{
    background:#dc8401;
    color:#2f364d;
}
/* ==========================================================================
   8. Complete
   ========================================================================== */
.assessment-unlock-card,
.assessment-lock-card{
    overflow:hidden;
    margin-bottom:25px;
    border:1px solid #e9ecef;
    border-radius:18px;
    transition:.3s;
}
.assessment-unlock-card:hover,
.assessment-lock-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(0,0,0,.08);
}
.assessment-unlock-card .card-header{
    background:#198754;
    color:#fff;
}
.assessment-lock-card .card-header{
    background:#ffc107;
    color:#212529;
}
.assessment-unlock-card .card-header,
.assessment-lock-card .card-header{
    padding:16px 22px;
    font-weight:500;
}
.assessment-list{
    margin:0;
    padding:0;
    list-style:none;
    color: #999999;
}
.assessment-list li{
    display:flex;
    align-items:flex-start;
    gap:15px;
    padding:16px 0;
    border-bottom:1px solid #f1f1f1;
}
.assessment-list li:last-child{
    border-bottom:0;
}
.assessment-list i{
    width:26px;
    margin-top:4px;
    font-size:20px;
}

.assessment-unlock-card .assessment-list i {
    color:#198754;
}
.assessment-unlock-card .assessment-list strong {
    color:#198754;
}
.assessment-lock-card .assessment-list i{
    color:#f59e0b;
}
.assessment-list strong{
    display:block;
    margin-bottom:5px;
    color:#ff9800;
    font-size:16px;
}
.assessment-list small{
    display:block;
    color:#999999;
    line-height:1.6;
}
/* ==========================================================================
   9. Analysis
   ========================================================================== */
.analysis-icon{
    font-size:64px;
    line-height:1;
    margin-bottom:10px;
    color:#f59e0b;
}
.spinner-border{
    width:48px;
    height:48px;
    border-width:4px;
}
.analysis-card h2{
    margin-bottom:15px;
    font-size:2rem;
    font-weight:500;
    font-family:'Inter',sans-serif;
    color: #ff9800;
}
.analysis-card p{
    max-width:520px;
    margin:0 auto;
    color:#999999;
}
.analysis-status{
    min-height:28px;
    margin-top:20px;
    color:#f59e0b;
    font-size:17px;
    font-weight:500;
}
.analysis-list{
    max-width:420px;
    width:100%;
    margin:25px auto 0;
}
.analysis-item{
    display:flex;
    align-items:center;
    gap:14px;
    padding:11px 6px;
    color:#dcdbdb;
    font-size:16px;
    opacity:.45;
    transition:.35s;
}
.analysis-item.active{
    color:#f59e0b;
    opacity:1;
    transform:translateX(8px);
}
.analysis-item.done{
    color:#22c55e;
    opacity:1;
}
.analysis-check{
    width:22px;
    flex-shrink:0;
    text-align:center;
    font-size:19px;
    
}
.analysis-item.done .analysis-check{
    color:#22c55e;
}
/* ==========================================================================
   10. Action
   ========================================================================== */
.assessment-action{
    display:flex;
    gap:20px;
    margin-top:20px;
}
.assessment-action-btn{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:5px;
    padding: 10px;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:.25s;
}
.assessment-action-primary{
    background:#ff9800;
    color:#fff;
}
.assessment-action-primary:hover{
    background:#ffc107;
}
.assessment-action-secondary{
    background:#fff;
    color:#ffb400;
    border:2px solid #ffb400;
}
.assessment-action-secondary:hover{
    background:#ffb400;
    color:#fff;
}
/* ==========================================================================
   11. Responsive
   ========================================================================== */
.mobile-title{
    display:none;
}
@media (max-width:768px){
    .desktop-title{
        display:none;
    }
    .mobile-title{
        display:inline;
    }
    .assessment-card{
        padding:10px;
        border-radius:14px;
    }
    .assessment-title{
        font-size:20px;
    }
    .assessment-icon{
        font-size:56px;
    }
    .assessment-footer{
        gap:12px;
    }
    .assessment-footer .btn{
        flex:1;
        min-width:0;
    }
    .option-body{
        padding:5px 5px;
    }
    .option-icon{
        font-size:20px;
    }
    .analysis-wrapper{
        padding:25px 15px 20px;
    }
    .analysis-card{
        padding:35px 22px;
        border-radius:18px;
    }
    .analysis-card h2{
        font-size:28px;
    }
    .analysis-card p,
    .analysis-status,
    .analysis-item,
    .assessment-list small{
        font-size:15px;
    }
    .analysis-progress{
        height:10px;
        margin:25px auto;
    }
    .analysis-list{
        max-width:100%;
    }
}
.assessment-steps{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:16px;
}
@media (max-width:576px){

    .assessment-steps{
        grid-template-columns:repeat(4,1fr);
        gap:12px;
    }

    .step-number{
        width:40px;
        height:40px;
        font-size:16px;
    }

    .step-title{
        font-size:12px;
        line-height:1.2;
    }

}