/*   CHECKOUT CSS CHAT GPT      */

                    .checkout-step{

                        display:none;
                      
                        animation:fade .35s ease;
                      
                      }
                      
                      .checkout-step.active{
                      
                        display:block;
                      
                      }
                      
                      @keyframes fade{
                      
                        from{
                      
                            opacity:0;
                      
                            transform:translateY(15px);
                      
                        }
                      
                        to{
                      
                            opacity:1;
                      
                            transform:translateY(0);
                      
                        }
                      
                      }

                      #verify-wrapper{

                        overflow:hidden;
                    
                        max-height:0;
                    
                        opacity:0;
                    
                        transition:.4s;
                    
                    }
                    
                    #verify-wrapper.open{
                    
                        max-height:500px;
                    
                        opacity:1;
                    
                        margin-top:25px;
                    
                    }
                    
                    .verify-time{
                    
                        text-align:center;
                    
                        margin-bottom:20px;
                    
                        font-size:var(--font-size-base);
                    
                        opacity:.7;
                    
                    }
                    
                    .verify-rules{
                    
                        display:flex;
                    
                        gap:10px;
                    
                        align-items:center;
                    
                        margin:10px;
                    
                    }
                    
                    .verify-rules a{
                    
                        text-decoration:underline;
                    
                    }
                    




                    .rules-link{

                      border:none;
                  
                      background:none;
                  
                      padding:0;
                  
                      cursor:pointer;
                  
                      text-decoration:underline;
                  
                      font:inherit;
                  
                      color:inherit;
                  
                  }

                  /**             استایل validator */
                  
    .input-error{

    color:#d93025;

    font-size:var(--font-size-base);

    margin-top:8px;

    line-height:1.5;

}

.is-invalid{

    border-color:#d93025 !important;

}              

/**   تایمر و کد تایید */
.d-none{

  display:none;

}

.otp-timer{

  margin-bottom:20px;

  text-align:center;

  font-size:var(--font-size-base);

  color:#888;

}

.otp-timer span{

  color:var(--theme-color);

  font-weight:700;

  margin-right:6px;

}

.verify-box{

  margin-top:20px;

}

/* ========================================================= */
/* استایل‌های جدید فاز ب — روش ارسال، تخفیف، جمع سبد، مراحل   */
/* ========================================================= */

/* --- روش‌های ارسال (پر میشه توسط JS در فاز د) --- */
/* ⚠️ اصلاح: قبلاً روی این کانتینر هیچ قانون display صریحی نبود و
   ممکن بود از استایل‌های عمومی تم به‌صورت افقی/کنار هم دربیاد.
   الان صریحاً هر روش ارسال دقیقاً در یک سطر جدا قرار می‌گیره. */
.shipping-methods-list{
    display: flex;
    flex-direction: column;
}

.shipping-methods-list .shipping-loading{
    opacity: .6;
    font-size: var(--font-size-base);
    margin: 0;
}

/* --- باکس کد تخفیف --- */
.discount-box{
    align-items: stretch;
}

.discount-box .entry-box{
    margin-bottom: 0;
}

.discount-message{
    margin-top: 10px;
    font-size: var(--font-size-base);
    min-height: 18px;
}

.discount-message.success{
    color: #1a9c5c;
}

.discount-message.error{
    color: #d93025;
}

/* --- جمع سبد خرید --- */
.cart-totals{
    font-size: var(--font-size-base);
}

.cart-total-row span:first-child{
    opacity: .7;
}

/* --- دکمه‌های رفت‌وبرگشت بین مراحل --- */
.step-nav{
    gap: 15px;
}

/* آیکون دایره‌ای این دکمه‌ها flex-shrink نداشت، پس تو فضای کم (موبایل +
   دو دکمه کنار هم) عرضش فشرده می‌شد ولی ارتفاعش نه => به‌جای دایره بیضی می‌شد */
.step-nav .dsn-btn-shape .icon {
    flex-shrink: 0;
}

/* ریسپانسیو کردن این دکمه‌ها روی موبایل (تمپلیت خودش الگویی برای این
   نداشت، اندازه‌ها اینجا متناسب با موبایل تنظیم شدن) */
@media only screen and (max-width: 767px) {
    .step-nav .dsn-btn-shape .button {
        padding: 0 20px;
        height: 34px;
        font-size: 12px;
    }
    .step-nav .dsn-btn-shape .icon {
        width: 30px;
        height: 30px;
    }
    .step-nav .dsn-btn-shape .icon svg {
        width: 9px;
        height: 9px;
    }
}

/* --- گیرنده شخص دیگر / خلاصه سفارش --- */
#receiver-wrapper{
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,.08);
}

.order-summary-recap{
    margin-bottom: 25px;
    font-size: var(--font-size-base);
    line-height: 2;
}

/* --- مودال قوانین و مقررات (ساده) --- */
.rules-modal:not(.d-none){
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.rules-modal .rules-modal-box{
    background: #fff;
    color: #111;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 30px;
    border-radius: 12px;
}