/* منع التمرير أثناء التحميل */
body.is-loading {
    overflow: hidden;
}

/* الخلفية الرئيسية */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff; /* يمكنك تغييره لـ #f8f9fa لمظهر أهدأ */
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* إخفاء اللودر */
body.is-loaded .page-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* حاوية الدوائر */
.loader-spinner-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* الدائرة الخارجية - تدور لليمين */
.loader-ring-outer {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: #263370; /* اللون الأزرق الداكن */
    border-bottom-color: #263370;
    border-radius: 50%;
    animation: loader-spin 1.5s linear infinite;
}

/* الدائرة الداخلية - تدور لليسار وبسرعة مختلفة */
.loader-ring-inner {
    position: absolute;
    width: 60%;
    height: 60%;
    border: 3px solid transparent;
    border-left-color: #42b07a; /* اللون الأخضر */
    border-right-color: #42b07a;
    border-radius: 50%;
    animation: loader-spin-reverse 1s linear infinite;
}

/* النقطة المركزية - تنبض */
.loader-center-dot {
    width: 12px;
    height: 12px;
    background: #0c7fae; /* اللون الأزرق الفاتح */
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(12, 127, 174, 0.5);
    animation: loader-pulse 1s ease-in-out infinite alternate;
}

/* حركات الأنيميشن */
@keyframes loader-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes loader-spin-reverse {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes loader-pulse {
    from {
        transform: scale(0.8);
        opacity: 0.5;
    }

    to {
        transform: scale(1.2);
        opacity: 1;
    }
}