/**
 * cart-animation.css
 * انیمیشن‌های مربوط به سبد خرید
 * Version: 1.0.0
 */

/* ===== هایلایت سبد خرید ===== */
.cart-highlight {
    animation: cartBlink 3s ease-in-out 3 forwards;
    background-color: #ffc107 !important;
    border-radius: 12px;
    padding: 5px 12px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

@keyframes cartBlink {
    0% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: 0 0 0px rgba(255, 193, 7, 0);
    }

    30% {
        background-color: #ffc107;
        transform: scale(1.15);
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.8);
    }

    60% {
        background-color: #ffc107;
        transform: scale(1.05);
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.6);
    }

    100% {
        background-color: #ffc107 !important;
        transform: scale(1.08);
        box-shadow: 0 0 12px rgba(255, 193, 7, 0.7);
    }
}

/* ===== استایل اصلی Badge سبد خرید ===== */
#cartItemsCount .cart-count,
.cart-count {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #dc3545 !important;
    color: white !important;
    border-radius: 50% !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
}

    /* مخفی کردن badge خالی */
    .badge-danger:empty,
    #cartItemsCount .cart-count:empty {
        display: none !important;
    }

/* ===== انیمیشن چشمک زدن Badge هنگام به‌روزرسانی ===== */
.cart-count-updated {
    animation: cartCountPulse 0.4s ease-in-out 2 !important;
}

@keyframes cartCountPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
        background-color: #ff5722 !important;
    }

    100% {
        transform: scale(1);
    }
}

/* ===== انیمیشن پالس Badge (برای ماندگاری) ===== */
.badge-pulse {
    animation: badgePulse 0.8s ease-in-out 2 forwards;
}

@keyframes badgePulse {
    0% {
        transform: scale(1);
        background-color: #dc3545;
    }

    50% {
        transform: scale(1.4);
        background-color: #ff5722;
        box-shadow: 0 0 8px rgba(220, 53, 69, 0.8);
    }

    100% {
        transform: scale(1.2);
        background-color: #dc3545;
        box-shadow: 0 0 4px rgba(220, 53, 69, 0.5);
    }
}
/* استایل دکمه هنگام بارگذاری */
.btn-loading {
    opacity: 0.7;
    cursor: wait;
}

    .btn-loading .fa-spinner {
        display: inline-block !important;
    }