/* =====================================================================
   loading-ui.css  —  سیستم لودینگ یکپارچه برای کل سایت
   - برندینگ Emerald / Cyan / Violet
   - سبک روی GPU (transform/opacity)
   - سازگار با Safari iOS (no backdrop-filter heavy)
   - بدون JS برای کارهای ساده
   ===================================================================== */

:root {
    --loader-emerald: #34d399;
    --loader-cyan:    #22d3ee;
    --loader-violet:  #8b5cf6;
    --loader-amber:   #fbbf24;
    --loader-bg:      rgba(15, 23, 42, .55);
    --loader-skeleton-base: rgba(255, 255, 255, .04);
    --loader-skeleton-shine: rgba(255, 255, 255, .12);
}

/* ============================================================
   1) Branded Spinner — حلقه دوار با گرادیان
   استفاده: <div class="lui-spinner"></div>
   اندازه‌ها: lui-spinner-sm / lui-spinner-lg
   ============================================================ */
.lui-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid rgba(255, 255, 255, .06);
    border-top-color: var(--loader-emerald);
    border-right-color: var(--loader-cyan);
    animation: luiSpin 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
    will-change: transform;
}
.lui-spinner::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid rgba(52, 211, 153, .14);
}
.lui-spinner-sm { width: 22px; height: 22px; border-width: 2px; }
.lui-spinner-lg { width: 52px; height: 52px; border-width: 4px; }
.lui-spinner-xl { width: 72px; height: 72px; border-width: 5px; }
.lui-spinner-violet { border-top-color: var(--loader-violet); border-right-color: var(--loader-cyan); }
.lui-spinner-amber  { border-top-color: var(--loader-amber);  border-right-color: var(--loader-emerald); }

@keyframes luiSpin { to { transform: rotate(360deg); } }

/* ============================================================
   2) Orbit Spinner — سه نقطه که دور یک محور می‌گردند (هویت برند)
   استفاده: <div class="lui-orbit"><span></span><span></span><span></span></div>
   ============================================================ */
.lui-orbit {
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-block;
}
.lui-orbit::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px dashed rgba(167, 139, 250, .2);
}
.lui-orbit span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: -4px;
    transform-origin: 0 0;
    animation: luiOrbit 1.6s cubic-bezier(.6,.05,.4,.95) infinite;
    will-change: transform, opacity;
}
.lui-orbit span:nth-child(1) {
    background: radial-gradient(circle, var(--loader-emerald), #047857);
    box-shadow: 0 0 12px var(--loader-emerald);
}
.lui-orbit span:nth-child(2) {
    background: radial-gradient(circle, var(--loader-cyan), #0e7490);
    box-shadow: 0 0 12px var(--loader-cyan);
    animation-delay: -.53s;
}
.lui-orbit span:nth-child(3) {
    background: radial-gradient(circle, var(--loader-violet), #5b21b6);
    box-shadow: 0 0 12px var(--loader-violet);
    animation-delay: -1.06s;
}
@keyframes luiOrbit {
    0%   { transform: rotate(0deg) translateX(18px) scale(.85); opacity: .6; }
    50%  { transform: rotate(180deg) translateX(18px) scale(1.1); opacity: 1; }
    100% { transform: rotate(360deg) translateX(18px) scale(.85); opacity: .6; }
}

/* ============================================================
   3) Bouncing Dots — سه نقطه پرشی
   استفاده: <div class="lui-dots"><span></span><span></span><span></span></div>
   ============================================================ */
.lui-dots {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.lui-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--loader-emerald);
    animation: luiBounce 1.1s cubic-bezier(.45,.05,.55,.95) infinite both;
    will-change: transform, opacity;
}
.lui-dots span:nth-child(1) { background: var(--loader-emerald); animation-delay: 0s; }
.lui-dots span:nth-child(2) { background: var(--loader-cyan);    animation-delay: .18s; }
.lui-dots span:nth-child(3) { background: var(--loader-violet);  animation-delay: .36s; }
@keyframes luiBounce {
    0%, 80%, 100% { transform: scale(.4); opacity: .4; }
    40%           { transform: scale(1);  opacity: 1; }
}

/* اندازه و رنگ‌بندی‌های جایگزین */
.lui-dots-sm span { width: 6px; height: 6px; }
.lui-dots-lg span { width: 11px; height: 11px; }

/* ============================================================
   4) Skeleton Shimmer — placeholder های loading
   استفاده:
     <div class="lui-skeleton" style="width:100%; height:20px"></div>
     <div class="lui-skeleton lui-skeleton-text"></div>
     <div class="lui-skeleton lui-skeleton-circle"></div>
     <div class="lui-skeleton lui-skeleton-card"></div>
   ============================================================ */
.lui-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--loader-skeleton-base);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .04);
}
.lui-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--loader-skeleton-shine) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: luiShimmer 1.6s cubic-bezier(.4, 0, .6, 1) infinite;
    will-change: transform;
}
[dir="rtl"] .lui-skeleton::after { transform: translateX(100%); }
[dir="rtl"] .lui-skeleton::after { animation-name: luiShimmerRtl; }

@keyframes luiShimmer    { to { transform: translateX(100%); } }
@keyframes luiShimmerRtl { to { transform: translateX(-100%); } }

.lui-skeleton-text { height: 14px; margin-bottom: .55rem; }
.lui-skeleton-text:last-child { margin-bottom: 0; width: 70%; }
.lui-skeleton-text-lg { height: 22px; }
.lui-skeleton-circle  { border-radius: 50%; }
.lui-skeleton-card {
    height: 180px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .06);
}
.lui-skeleton-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(15, 23, 42, .25);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .05);
    margin-bottom: .75rem;
}
.lui-skeleton-row .lui-skeleton-circle { flex-shrink: 0; width: 44px; height: 44px; }
.lui-skeleton-row > div:last-child { flex: 1; min-width: 0; }

/* ============================================================
   5) Linear Progress Bar — برای loading های مشخص نشده
   استفاده: <div class="lui-progress"><div></div></div>
   ============================================================ */
.lui-progress {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, .05);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.lui-progress > div {
    position: absolute;
    inset: 0;
    width: 35%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--loader-emerald) 30%,
        var(--loader-cyan) 70%,
        transparent 100%
    );
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(52, 211, 153, .45);
    animation: luiProgressSlide 1.4s cubic-bezier(.4, 0, .6, 1) infinite;
    will-change: transform;
}
@keyframes luiProgressSlide {
    0%   { transform: translateX(-130%); }
    100% { transform: translateX(330%); }
}

/* ============================================================
   6) Full-Page Overlay Loader
   استفاده: کلاس روی body یا فعال‌سازی با JS helper پایین
   ============================================================ */
.lui-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    background: rgba(2, 6, 23, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.lui-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.lui-overlay-card {
    padding: 1.5rem 2rem;
    border-radius: 1.25rem;
    background: linear-gradient(160deg, rgba(15, 23, 42, .92), rgba(2, 6, 23, .96));
    border: 1px solid rgba(52, 211, 153, .25);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .55),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    text-align: center;
    max-width: 90vw;
}
.lui-overlay-message {
    margin-top: 1rem;
    font-family: 'Vazirmatn', sans-serif;
    font-size: .9rem;
    font-weight: 700;
    background: linear-gradient(90deg, #f8fafc 0%, #6ee7b7 50%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.lui-overlay-sub {
    margin-top: .4rem;
    font-size: .72rem;
    color: #94a3b8;
}

/* ============================================================
   7) Inline Section Loader — برای داخل کارت‌ها و سکشن‌ها
   استفاده:
     <div class="lui-section-loader">
        <div class="lui-orbit"><span></span><span></span><span></span></div>
        <p class="lui-section-loader-text">در حال بارگذاری...</p>
     </div>
   ============================================================ */
.lui-section-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    padding: 2.5rem 1rem;
    text-align: center;
}
.lui-section-loader-text {
    font-family: 'Vazirmatn', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    color: #cbd5e1;
    background: linear-gradient(90deg, #f1f5f9 0%, #6ee7b7 50%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: luiTextFade 1.8s ease-in-out infinite;
}
.lui-section-loader-sub {
    font-size: .72rem;
    color: #64748b;
    margin-top: -.3rem;
}
@keyframes luiTextFade {
    0%, 100% { opacity: .65; }
    50%      { opacity: 1; }
}

/* ============================================================
   8) Inline Button Loader — جایگزین spinner داخل دکمه‌ها
   استفاده: <span class="lui-btn-spinner"></span>
   ============================================================ */
.lui-btn-spinner {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    display: inline-block;
    vertical-align: -0.15em;
    animation: luiSpin .8s linear infinite;
}

/* ============================================================
   9) Toast-Style Mini Loader — برای loading های فرعی گوشه صفحه
   ============================================================ */
.lui-mini {
    position: fixed;
    bottom: 1.2rem;
    inset-inline-end: 1.2rem;
    z-index: 9997;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem 1rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .92);
    border: 1px solid rgba(52, 211, 153, .35);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5);
    color: #e2e8f0;
    font-family: 'Vazirmatn', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
}
.lui-mini.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* ============================================================
   10) Pulse Glow — برای آیکن‌های زنده (live data)
   ============================================================ */
.lui-pulse-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--loader-emerald);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .55);
    animation: luiPulse 1.8s ease-out infinite;
}
@keyframes luiPulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* ============================================================
   11) Cleanup: حذف لودینگ بعد از تکمیل
   استفاده: <div class="lui-fade-out">...</div>
   ============================================================ */
.lui-fade-out {
    animation: luiFadeOut .35s ease forwards;
}
@keyframes luiFadeOut {
    to { opacity: 0; transform: translateY(-10px); pointer-events: none; }
}

/* ============================================================
   12) Top Progress Bar — نوار باریک بالای صفحه (YouTube/GitHub style)
       خودکار با fetch interceptor در loading-ui.js کنترل می‌شود.
   ============================================================ */
.lui-topbar {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 3px;
    z-index: 10000;
    background: transparent;
    pointer-events: none;
    overflow: hidden;
    transition: opacity .35s ease;
}
.lui-topbar.is-done { opacity: 0; }
.lui-topbar-fill {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        var(--loader-emerald) 0%,
        var(--loader-cyan)    50%,
        var(--loader-violet)  100%
    );
    box-shadow:
        0 0 10px rgba(52, 211, 153, .65),
        0 0 6px rgba(34, 211, 238, .45);
    border-radius: 0 999px 999px 0;
    transition: width .25s cubic-bezier(.4, 0, .2, 1);
}
.lui-topbar-fill::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 60px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55));
    border-radius: inherit;
    filter: blur(2px);
    animation: luiTopShine 1s ease-in-out infinite;
}
@keyframes luiTopShine {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}
/* در حالت RTL، fill از سمت راست به چپ رشد می‌کند */
[dir="rtl"] .lui-topbar-fill { border-radius: 999px 0 0 999px; }

/* Pulse برای حالتی که هیچ fetch نمی‌رسد اما باید "loading" نشان دهیم */
.lui-topbar.is-indeterminate .lui-topbar-fill {
    width: 35% !important;
    animation: luiTopSlide 1.4s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes luiTopSlide {
    0%   { transform: translateX(-130%); }
    100% { transform: translateX(330%); }
}
[dir="rtl"] .lui-topbar.is-indeterminate .lui-topbar-fill {
    animation-name: luiTopSlideRtl;
}
@keyframes luiTopSlideRtl {
    0%   { transform: translateX(130%); }
    100% { transform: translateX(-330%); }
}

/* ============================================================
   13) Suppress motion when user prefers
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .lui-spinner, .lui-orbit span, .lui-dots span,
    .lui-progress > div, .lui-skeleton::after,
    .lui-pulse-dot, .lui-btn-spinner {
        animation-duration: 2.5s !important;
    }
    .lui-overlay { transition: none !important; }
}

/* ============================================================
   13) Safari/iOS perf tweaks
   ============================================================ */
@supports (-webkit-touch-callout: none) {
    .lui-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(2, 6, 23, .96);
    }
    .lui-spinner::after { display: none; }
}