/* خلفية الصفحة الافتراضية */

body {
    margin: 0;
    background-color: #252525;
    overflow: hidden;
}


/* اللودر يغطي الشاشة كاملة */

.loader-overlay {
    position: fixed;
    inset: 0;
    background-color: #252525;
    /* 👈 الخلفية */
    z-index: 999999;
}


/* السبينر (كودك الأصلي) */

.spinner {
    width: 56px;
    height: 56px;
    display: grid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* بقية كود السبينر */

.spinner::before,
.spinner::after {
    content: '';
    grid-area: 1/1;
    background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%;
    background-size: 13.4px 13.4px;
    background-repeat: no-repeat;
    animation: spinner-3hs4a3 1s infinite;
}

.spinner::before {
    --c: radial-gradient(farthest-side, #8b5e3c 92%, #0000);
    margin: 4.5px;
    background-size: 9px 9px;
    animation-timing-function: linear;
}

.spinner::after {
    --c: radial-gradient(farthest-side, #8b5e3c 92%, #0000);
}

@keyframes spinner-3hs4a3 {
    100% {
        transform: rotate(0.5turn);
    }
}


/* إخفاء اللودر بعد التحميل */

body.loaded .loader-overlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

body.loaded {
    overflow: auto;
}