.dots-pulse-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dots-pulse-loader .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #007bff;
    animation: dotsPulse 1.4s infinite ease-in-out both;
}

.dots-pulse-loader .dot:nth-child(1) {
    animation-delay: -0.32s;
}

.dots-pulse-loader .dot:nth-child(2) {
    animation-delay: -0.16s;
}

.dots-pulse-loader .dot:nth-child(3) {
    animation-delay: 0s;
}

@keyframes dotsPulse {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.dual-ring-loader {
    display: inline-block;
    width: 64px;
    height: 64px;
}

.dual-ring-loader:after {
    content: " ";
    display: block;
    width: 46px;
    height: 46px;
    margin: 8px;
    border-radius: 50%;
    border: 5px solid #4e73df;
    border-color: #4e73df transparent #4e73df transparent;
    animation: dualRing 1.2s linear infinite;
}

@keyframes dualRing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.circle-loader {
    width: 48px;
    height: 48px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: circleRotate 1s linear infinite;
}

@keyframes circleRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.gradient-ring-loader {
    width: 48px;
    height: 48px;
    border: 4px solid transparent;
    border-radius: 50%;
    border-top-color: #007bff;
    border-right-color: #17a2b8;
    animation: gradientRing 1s linear infinite;
}

@keyframes gradientRing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.bounce-loader {
    display: inline-flex;
    gap: 6px;
}

.bounce-loader .bounce-dot {
    width: 10px;
    height: 10px;
    background-color: #007bff;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.bounce-loader .bounce-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.bounce-loader .bounce-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

.modern-loading-container {
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.modern-loading-text {
    color: #6c757d;
    font-size: 0.95rem;
    margin: 0;
    animation: fadeInOut 1.5s infinite;
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@media (max-width: 576px) {
    .dual-ring-loader {
        width: 48px;
        height: 48px;
    }
    
    .dual-ring-loader:after {
        width: 32px;
        height: 32px;
        margin: 8px;
        border-width: 4px;
    }
    
    .dots-pulse-loader .dot {
        width: 10px;
        height: 10px;
    }
}

@keyframes successPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-pulse {
    animation: successPulse 0.6s ease-in-out;
}