#shopLoader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #ffffff 0%, #fff5f5 100%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    #shopLoader.hide {
        opacity: 0;
        visibility: hidden;
    }

    .loader-box {
        text-align: center;
        direction: rtl;
    }

    .logo-animate {
        position: relative;
        width: 120px;
        height: 120px;
        margin: 0 auto 30px;
    }

    .logo-ring {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: linear-gradient(135deg, #dc2626, #ef4444);
        animation: pulseRing 1.5s ease-in-out infinite;
        box-shadow: 0 0 30px rgba(220, 38, 38, 0.4);
    }

    @keyframes pulseRing {
        0%, 100% {
            transform: scale(0.9);
            opacity: 0.6;
        }
        50% {
            transform: scale(1.1);
            opacity: 1;
            box-shadow: 0 0 50px rgba(220, 38, 38, 0.8);
        }
    }

    .logo-white {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70px;
        height: 70px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo-white svg {
        width: 45px;
        height: 45px;
        color: #dc2626;
        animation: shake 0.8s ease-in-out infinite;
    }

    @keyframes shake {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(-8deg); }
        75% { transform: rotate(8deg); }
    }

    .rings {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 140%;
        height: 140%;
    }

    .rings div {
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        border: 2px solid transparent;
        transform: translate(-50%, -50%);
    }

    .ring1 {
        width: 100%;
        height: 100%;
        border-top-color: #dc2626;
        animation: spin 1.2s linear infinite;
    }

    .ring2 {
        width: 80%;
        height: 80%;
        border-right-color: #ef4444;
        animation: spin 0.9s linear infinite reverse;
    }

    .ring3 {
        width: 60%;
        height: 60%;
        border-bottom-color: #b91c1c;
        animation: spin 0.6s linear infinite;
    }

    @keyframes spin {
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    .loader-title {
        font-size: 1.4rem;
        font-weight: 800;
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-top: 30px;
    }

    .loader-sub {
        font-size: 0.7rem;
        color: #9ca3af;
        letter-spacing: 3px;
        margin-top: 5px;
    }

    .progress-bar-custom {
        width: 280px;
        max-width: 80vw;
        height: 4px;
        background: #fee2e2;
        border-radius: 4px;
        margin: 25px auto 0;
        overflow: hidden;
    }

    .progress-fill-custom {
        width: 0%;
        height: 100%;
        background: linear-gradient(90deg, #dc2626, #ef4444);
        border-radius: 4px;
        animation: progressAnim 1.5s ease-in-out infinite;
    }

    @keyframes progressAnim {
        0% { width: 0%; margin-right: 0; }
        50% { width: 80%; margin-right: 0; }
        100% { width: 0%; margin-right: 100%; }
    }

    .dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }

    .dots span {
        width: 8px;
        height: 8px;
        background: #dc2626;
        border-radius: 50%;
        animation: dotAnim 1s ease-in-out infinite;
    }

    .dots span:nth-child(1) { animation-delay: 0s; }
    .dots span:nth-child(2) { animation-delay: 0.2s; background: #ef4444; }
    .dots span:nth-child(3) { animation-delay: 0.4s; background: #b91c1c; }

    @keyframes dotAnim {
        0%, 60%, 100% {
            transform: scale(0.5);
            opacity: 0.3;
        }
        30% {
            transform: scale(1.2);
            opacity: 1;
        }
    }

    @media (max-width: 640px) {
        .logo-animate { width: 90px; height: 90px; }
        .logo-white { width: 55px; height: 55px; }
        .logo-white svg { width: 35px; height: 35px; }
        .loader-title { font-size: 1.1rem; }
    }