/* استایل کلی لودینگ چند لایه */
.multi-spinner-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.spinner-layer {
    width: 60px;
    height: 60px;
    animation: rotate 4s linear infinite;
}

/* رنگ‌های خاص */
.spinner-circle {
    position: absolute;
    border-radius: 50%;
    border: 4px solid transparent;
    width: 100%;
    height: 100%;
}

.spinner-circle-1 {
    border-top-color: #4fc3f7; /* فیروزه‌ای روشن */
    animation: rotate-1 1.5s linear infinite;
}

.spinner-circle-2 {
    border-right-color: #29b6f6; /* فیروزه‌ای */
    animation: rotate-2 1.5s linear infinite;
}

.spinner-circle-3 {
    border-bottom-color: #03a9f4; /* فیروزه‌ای تیره */
    animation: rotate-3 1.5s linear infinite;
}

.spinner-circle-4 {
    border-left-color: #0288d1; /* آبی تیره */
    animation: rotate-4 1.5s linear infinite;
}

/* چرخش لایه‌ها */
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

/* انیمیشن چرخش جداگانه برای هر لایه */
@keyframes rotate-1 {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-2 {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-3 {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

@keyframes rotate-4 {
    0% {
        transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(10deg) rotateY(10deg) rotateZ(360deg);
    }
}





/* استایل اختصاصی برای لودینگ سبد خرید */
.cart-spinner-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.85);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.cart-spinner {
    width: 50px;
    height: 50px;
    position: relative;
}

.cart-spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: #0071e3;
    border-radius: 50%;
    animation: cart-spin 1.2s linear infinite;
}

    .cart-spinner-ring:nth-child(1) {
        animation-delay: -0.45s;
        border-top-color: rgba(0, 113, 227, 0.7);
    }

    .cart-spinner-ring:nth-child(2) {
        animation-delay: -0.3s;
        border-top-color: rgba(0, 113, 227, 0.5);
    }

    .cart-spinner-ring:nth-child(3) {
        animation-delay: -0.15s;
        border-top-color: rgba(0, 113, 227, 0.3);
    }

@keyframes cart-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}