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

.wizard-header{

    margin-bottom:40px;

}

.wizard-heading{

    font-size:32px;

    font-weight:700;

    color:#fff;

}

.wizard-subtitle{

    color:#b8bfd3;

}

.wizard-progress{

    width:100%;

    height:8px;

    background:#252836;

    border-radius:50px;

    overflow:hidden;

}

.wizard-progress-bar{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #00d084,
        #00a8ff
    );

    transition:.35s;

}

.wizard-step-counter {
    font-size: 14px;
    color: #00d084;
    border: 1px solid #00d084;
    padding: 5px 10px;
    border-radius: 25px;
}

#wizardStepTitle{

    color:#fff;

    font-weight:700;

}

/* ==========================================================
   Wizard Timeline
========================================================== */

.tw-stepper {
    display: flex;
    align-items: center;
    margin-top: 30px;
}

.tw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.tw-step-circle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 2px solid #3A465F;
    border-radius: 50%;

    background: #1A2336;

    color: #8FA4C3;
    font-weight: 700;

    transition: all 0.3s ease;
}

.tw-step span {
    margin-top: 10px;

    color: #8FA4C3;

    font-size: 13px;

    font-weight: 600;
}

.tw-step-line {
    flex: 1;
    height: 2px;
    margin: 0 10px;
    background: #29344D;
}

.tw-step.active .tw-step-circle {

    background: linear-gradient(135deg, var(--tw-primary), var(--tw-secondary));

    border-color: transparent;

    color: #FFFFFF;

    box-shadow: 0 0 20px rgba(0, 208, 132, 0.30);

}

.tw-step.active span {

    color: #FFFFFF;

}

.tw-step.completed .tw-step-circle {

    background: var(--tw-primary);

    border-color: var(--tw-primary);

    color: #FFFFFF;

}

.tw-step.completed + .tw-step-line {

    background: var(--tw-primary);

}

.wizard-page-title {

    margin: 10px 0 6px;

    color: #FFFFFF;

    font-size: 28px;

    font-weight: 700;

}

.wizard-page-description {

    color: #9FB0C8;

    font-size: 15px;

    margin-bottom: 0;

}

.wizard-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:40px;
}

#wizardRightActions{
    display:flex;
    align-items:center;
    gap:15px;
    margin-left:auto;
}

.tw-btn-danger{
    background: transparent;
    border: 1px solid #39465d;
    color: #b7c3d6;
}

.tw-btn-danger:hover{
    background: #d9534f;
    border-color: #d9534f;
    color: #fff;
}

.tw-btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-width:170px;
    height:50px;

    border:none;
    border-radius:14px;

    background:linear-gradient(135deg,#14d8c4,#18b9ff);
    color:#fff;

    font-weight:700;

    box-shadow:0 10px 30px rgba(20,216,196,.25);

    transition:all .25s ease;
}

.tw-btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 15px 35px rgba(20,216,196,.35);
}

.tw-btn-primary:active{
    transform:translateY(0);
}


.plan-summary-card{

    background:linear-gradient(135deg,#111827,#101826);

    border:1px solid rgba(22,216,210,.28);

    border-radius:22px;

    padding:32px;

    box-shadow:
    0 0 0 1px rgba(22,216,210,.08),
    0 18px 50px rgba(0,0,0,.45);

}

.plan-info{

    padding-right:30px;

    border-right:1px solid rgba(255,255,255,.06);

}

.plan-label{

    font-size:14px;

    color:#aeb8cb;

    font-weight:500;

}

.plan-name{

    font-size:28px;

    font-weight:700;

    color:#16d8d2;

}

.plan-status{

    background:#18b968;

    color:#fff;

    font-size:12px;

    font-weight:700;

    padding:6px 14px;

    border-radius:999px;

}

.plan-stat{

    padding:0 28px;

    text-align:center;

    border-left:1px solid rgba(255,255,255,.06);

}

.plan-stat-label{

    display:block;

    font-size:14px;

    color:#b9c4d7;

    margin-bottom:8px;

}

.plan-stat h2{

    font-size:44px;

    color:#fff;

    font-weight:700;

    margin:0;

}

.plan-progress{

    margin-top:16px;

    height:10px;

    background:#243045;

    border-radius:999px;

    overflow:hidden;

}

.plan-progress-fill{

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #15d27e,
        #16d8d2,
        #2ea7ff
    );

}

.plan-divider{

    height:1px;

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

    margin:30px 0;

}

.plan-files-title{

    color:#dce6f5;

    font-weight:600;

    margin-bottom:18px;

}

.plan-files{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.plan-file-chip{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:12px;

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

    background:#161f31;

    color:#fff;

    font-weight:600;

}

.plan-file-chip i{

    color:#16d87b;

    font-size:18px;

}

/*
|--------------------------------------------------------------------------
| Deployment Reminder Modal
|--------------------------------------------------------------------------
*/

#deploymentReminderModal .modal-content {

    border: 0;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 25px 60px rgba(15, 23, 42, .18);

}

#deploymentReminderModal .modal-header {

    padding: 1.5rem 1.75rem .75rem;

    border-bottom: 1px solid #eef2f7;

}

#deploymentReminderModal .modal-title {

    display: flex;

    align-items: center;

    gap: .65rem;

    font-size: 1.3rem;

    font-weight: 700;

    color: #1e293b;

}

#deploymentReminderModal .modal-title i {

    font-size: 1.4rem;

}

#deploymentReminderModal .modal-body {

    padding: 1.5rem 1.75rem;

}

#deploymentReminderModal .modal-body p {

    color: #475569;

    line-height: 1.75;

    margin-bottom: 1rem;

}

#deploymentReminderModal .alert {

    border: 0;

    border-left: 4px solid #0d6efd;

    background: #eff6ff;

    color: #1e3a8a;

    border-radius: 12px;

    padding: 1rem 1.25rem;

}

/*
|--------------------------------------------------------------------------
| Generated Files
|--------------------------------------------------------------------------
*/

#generatedAssetsList {

    margin-top: 1.5rem;

    border: 0;

}

#generatedAssetsList .list-group-item {

    display: flex;

    align-items: center;

    gap: .75rem;

    padding: 1rem 1.25rem;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    margin-bottom: .75rem;

    background: #f8fafc;

    transition: all .25s ease;

}

#generatedAssetsList .list-group-item:hover {

    background: #f1f5f9;

    border-color: #cbd5e1;

}

#generatedAssetsList i {

    color: #16a34a;

    font-size: 1.1rem;

}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

#deploymentReminderModal .modal-footer {

    padding: 1rem 1.75rem 1.5rem;

    border-top: 1px solid #eef2f7;

    justify-content: space-between;

}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

#deploymentReminderModal .tw-btn {

    min-width: 170px;

}

#deploymentReminderModal .tw-btn-secondary {

    background: #f8fafc;

    color: #475569;

    border: 1px solid #dbe4ee;

}

#deploymentReminderModal .tw-btn-secondary:hover {

    background: #eef2f7;

}

#deploymentReminderModal .tw-btn-success {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: .5rem;

}

.tw-stepper.justify-content-center{
    justify-content:center;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width:768px){

    #deploymentReminderModal .modal-body {

        padding: 1.25rem;

    }

    #deploymentReminderModal .modal-footer {

        flex-direction: column;

        gap: .75rem;

    }

    #deploymentReminderModal .tw-btn {

        width: 100%;

    }

}