/************************************************/
/* ظرف اصلی ویزارد برای مدیریت اسلاید */
/* ظرف هر مرحله */
.step-content {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

    /* وقتی مرحله فعال شد */
    .step-content.active {
        max-height: 1200px; /* عدد بزرگ‌تر از بیشترین ارتفاع احتمالی */
        opacity: 1;
    }

/* لایه داخلی برای انیمیشن اسلاید */
.step-inner {
    transform: translateX(100%); /* پیش‌فرض: بیرون از قاب */
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* وقتی مرحله فعال شد، محتوای داخلی به جای خودش برگرده */
.step-content.active .step-inner {
    transform: translateX(0);
    opacity: 1;
}

/* اگر بخوای جهت ورود رو کنترل کنی */
.step-content.active.slide-left .step-inner {
    transform: translateX(0); /* ورود از راست */
    opacity: 1;
}

.step-content.active.slide-right .step-inner {
    transform: translateX(0); /* ورود از چپ */
    opacity: 1;
}

/* دکمه انتخاب‌شده */
.btn.active-choice {
    box-shadow: 0 0 8px rgba(0,0,0,0.25);
    /*transform: scale(1.05);*/
    transition: all 0.25s ease;
}

/* Progress bar انیمیت‌شده */
.progress.progress-animated .progress-bar {
    transition: width 0.4s ease;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 576px) {
    .step-inner h4 {
        font-size: 1.1rem;
    }

    .btn.m-1 {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .btn-staff,
    .btn.active-choice {
        width: 100% !important;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* انیمیشن ورود از چپ (مرحله قبل) */
.step-content.slide-right.active {
    animation: slideInRight 0.5s ease forwards;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* هایلایت آیتم انتخاب‌شده */
.btn.active-choice {
    box-shadow: 0 0 8px rgba(0,0,0,0.25);
    /*transform: scale(1.04);*/
    transition: all 0.25s ease;
    color: #fff;
    border-color: #fda31b;
    border-radius: 25px 25px 25px 0;
    background: #fda31b;
}
.step-btn {
    width: 174px;
}
.btn-staff {
    width: 330px ;
}
/* Progress bar انیمیت‌شده */
.progress.progress-animated .progress-bar {
    transition: width 0.4s ease;
}

.item-outline {
    color: #6c757d;
    border-color: #fda31b;
    border-radius: 25px 25px 25px 0;
    background: #fff;
    
}

    .item-outline:hover {
        border-color: #fda31b;
        border-radius: 25px 25px 25px 0;
        background: #fda31b;
        color: #fff;
    }