/* کانتینر اصلی لودینگ که کل فضای جدول را می‌گیرد */
.loading-wrapper {
    display: flex;
    justify-content: center;
    /* وسط‌چین افقی */
    align-items: center;
    /* وسط‌چین عمودی */
    min-height: 300px;
    /* حداقل ارتفاع برای نمایش خوب */
    width: 100%;
    padding: 20px;
}

/* کانتینر داخلی برای اسپینر و متن */
.spinner-container {
    display: flex;
    flex-direction: column;
    /* چیدن اسپینر و متن زیر هم */
    align-items: center;
    /* وسط‌چین کردن محتویات داخل این کانتینر */
    gap: 15px;
    /* فاصله بین اسپینر و متن */
}

/* استایل خود اسپینر (دایره متحرک) */
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 123, 255, 0.2);
    /* رنگ حلقه بیرونی (کمرنگ) */
    border-top: 4px solid var(--accent);
    /* رنگ بخش متحرک (آبی) */
    border-radius: 50%;
    /* گرد کردن دایره */
    animation: spin 1s linear infinite;
    /* انیمیشن چرخش */
}


/* استایل متن زیر اسپینر */
.loading-text {
    margin: 0;
    font-size: 1rem;
    color: var(--accent);
    /* رنگ خاکستری ملایم */
    font-weight: 500;
}

/* تعریف انیمیشن چرخش */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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