/* ==============================================
   MODERN PAGE LOADER - 2026 DESIGN
   Clean, Minimal, and Smooth
   ============================================== */

/* =====================
   CSS Custom Properties
   ===================== */
:root {
    --loader-primary: #1A1A3A;
    --loader-secondary: #A48111;
    --loader-accent: #D4AF37;
    --loader-bg: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    --loader-text: #1A1A3A;
    --loader-muted: #6c757d;
    --loader-transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --loader-primary: #ffffff;
    --loader-secondary: #D4AF37;
    --loader-accent: #FFD700;
    --loader-bg: linear-gradient(135deg, #0a0a1a 0%, #1A1A3A 100%);
    --loader-text: #ffffff;
    --loader-muted: #a0a0a0;
}

/* =====================
   Main Loader Container
   ===================== */
#page-loader {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--loader-bg);
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--loader-transition),
                visibility var(--loader-transition);
    overflow: hidden;
}

#page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#page-loader.disabled {
    display: none !important;
}

/* =====================
   Animated Gradient Background
   ===================== */
.loader-gradient-bg {
    position: absolute;
    inset: -50%;
    background: radial-gradient(
        circle at 30% 50%,
        rgba(164, 129, 17, 0.08) 0%,
        transparent 40%
    ),
    radial-gradient(
        circle at 70% 50%,
        rgba(26, 26, 58, 0.05) 0%,
        transparent 40%
    );
    animation: gradientShift 15s ease infinite;
}

[data-theme="dark"] .loader-gradient-bg {
    background: radial-gradient(
        circle at 30% 50%,
        rgba(212, 175, 55, 0.12) 0%,
        transparent 40%
    ),
    radial-gradient(
        circle at 70% 50%,
        rgba(255, 215, 0, 0.08) 0%,
        transparent 40%
    );
}

@keyframes gradientShift {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
}

/* =====================
   Geometric Shapes
   ===================== */
.loader-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.15;
}

.shape {
    position: absolute;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--loader-secondary), var(--loader-accent));
    animation: shapeFloat 8s ease-in-out infinite;
}

.shape-1 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 15%;
    animation-delay: 0s;
    opacity: 0.3;
}

.shape-2 {
    width: 80px;
    height: 80px;
    top: 60%;
    right: 20%;
    animation-delay: 2s;
    opacity: 0.4;
    border-radius: 50%;
}

.shape-3 {
    width: 100px;
    height: 100px;
    bottom: 15%;
    left: 25%;
    animation-delay: 4s;
    opacity: 0.25;
    transform: rotate(45deg);
}

.shape-4 {
    width: 60px;
    height: 60px;
    top: 30%;
    right: 10%;
    animation-delay: 6s;
    opacity: 0.35;
    border-radius: 50%;
}

@keyframes shapeFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-30px) rotate(180deg);
        opacity: 0.6;
    }
}

/* =====================
   Loader Content
   ===================== */
.loader-content {
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    position: relative;
    z-index: 10;
}

/* =====================
   Modern Spinner Container
   ===================== */
.modern-spinner-container {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 20px rgba(164, 129, 17, 0.2));
}

/* Outer Glow Effect */
.modern-spinner-container::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(164, 129, 17, 0.15) 60deg,
        rgba(212, 175, 55, 0.25) 120deg,
        rgba(255, 215, 0, 0.2) 180deg,
        rgba(212, 175, 55, 0.25) 240deg,
        rgba(164, 129, 17, 0.15) 300deg,
        transparent 360deg
    );
    animation: glowSpin 3s linear infinite;
    opacity: 0.8;
}

[data-theme="dark"] .modern-spinner-container::before {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(212, 175, 55, 0.2) 60deg,
        rgba(255, 215, 0, 0.3) 120deg,
        rgba(255, 223, 0, 0.25) 180deg,
        rgba(255, 215, 0, 0.3) 240deg,
        rgba(212, 175, 55, 0.2) 300deg,
        transparent 360deg
    );
}

@keyframes glowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Enhanced Triple Ring Spinner */
.spinner-ring {
    position: absolute;
    border-radius: 50%;
    border: 4px solid transparent;
    box-shadow: 0 0 15px rgba(164, 129, 17, 0.1);
}

.ring-1 {
    inset: 0;
    border-top-color: var(--loader-secondary);
    border-right-color: var(--loader-secondary);
    border-style: solid;
    border-width: 4px;
    animation: spinRotate 2.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite,
               ringPulse 3s ease-in-out infinite;
    box-shadow:
        0 0 20px rgba(164, 129, 17, 0.3),
        inset 0 0 20px rgba(164, 129, 17, 0.1);
}

.ring-2 {
    inset: 25px;
    border-bottom-color: var(--loader-accent);
    border-left-color: var(--loader-accent);
    border-style: solid;
    border-width: 3px;
    animation: spinRotate 2s linear infinite reverse,
               ringPulse 3s ease-in-out infinite 0.5s;
    opacity: 0.8;
    box-shadow:
        0 0 15px rgba(212, 175, 55, 0.4),
        inset 0 0 15px rgba(212, 175, 55, 0.15);
}

.ring-3 {
    inset: 48px;
    border-top-color: var(--loader-primary);
    border-right-color: var(--loader-primary);
    border-bottom-color: var(--loader-accent);
    border-style: solid;
    border-width: 2px;
    animation: spinRotate 1.5s ease-in-out infinite,
               ringPulse 3s ease-in-out infinite 1s;
    opacity: 0.6;
    box-shadow:
        0 0 10px rgba(26, 26, 58, 0.2),
        inset 0 0 10px rgba(164, 129, 17, 0.1);
}

[data-theme="dark"] .ring-1 {
    box-shadow:
        0 0 25px rgba(212, 175, 55, 0.5),
        inset 0 0 20px rgba(212, 175, 55, 0.2);
}

[data-theme="dark"] .ring-2 {
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.5),
        inset 0 0 15px rgba(255, 215, 0, 0.2);
}

[data-theme="dark"] .ring-3 {
    box-shadow:
        0 0 15px rgba(255, 255, 255, 0.3),
        inset 0 0 10px rgba(212, 175, 55, 0.15);
}

@keyframes spinRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ringPulse {
    0%, 100% {
        opacity: 0.8;
        filter: blur(0px);
    }
    50% {
        opacity: 1;
        filter: blur(0.5px);
    }
}

/* =====================
   Logo Container
   ===================== */
.logo-container {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.loader-logo {
    width: 90px;
    height: 90px;
    object-fit: contain;
    animation: logoBreath 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 16px rgba(164, 129, 17, 0.3));
    position: relative;
    z-index: 2;
}

@keyframes logoBreath {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 4px 16px rgba(164, 129, 17, 0.3));
    }
    50% {
        transform: scale(1.08);
        filter: drop-shadow(0 8px 24px rgba(164, 129, 17, 0.5));
    }
}

.logo-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(
        circle,
        rgba(164, 129, 17, 0.2) 0%,
        transparent 70%
    );
    animation: glowPulse 2s ease-in-out infinite;
    border-radius: 50%;
}

@keyframes glowPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
}

/* =====================
   Brand Section
   ===================== */
.loader-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.brand-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--loader-text);
    margin: 0;
    direction: rtl;
    letter-spacing: 0.5px;
    background: linear-gradient(
        135deg,
        var(--loader-text) 0%,
        var(--loader-secondary) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShimmer 3s ease-in-out infinite;
}

@keyframes titleShimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.brand-underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--loader-secondary),
        var(--loader-accent),
        var(--loader-secondary),
        transparent
    );
    border-radius: 2px;
    animation: underlineGrow 2s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(164, 129, 17, 0.4);
}

@keyframes underlineGrow {
    0%, 100% {
        width: 60px;
        opacity: 0.6;
    }
    50% {
        width: 120px;
        opacity: 1;
    }
}

/* =====================
   Progress Bar
   ===================== */
.loader-progress {
    width: 100%;
    max-width: 280px;
    height: 4px;
    background: rgba(164, 129, 17, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

[data-theme="dark"] .loader-progress {
    background: rgba(255, 255, 255, 0.1);
}

.progress-bar {
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--loader-secondary),
        var(--loader-accent),
        var(--loader-secondary)
    );
    border-radius: 4px;
    animation: progressMove 1.5s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(164, 129, 17, 0.6);
}

@keyframes progressMove {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(400%);
    }
}

/* =====================
   Status Text
   ===================== */
.loader-status {
    font-size: 13px;
    font-weight: 500;
    color: var(--loader-muted);
    margin: 0;
    direction: rtl;
    animation: statusBlink 2s ease-in-out infinite;
}

@keyframes statusBlink {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}


/* =====================
   Progress Hint
   ===================== */
.loader-hint {
    font-size: 13px;
    color: var(--loader-text);
    opacity: 0.6;
    direction: rtl;
    margin-top: -8px;
    animation: loaderFadeInOut 2s ease-in-out infinite;
}

@keyframes loaderFadeInOut {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}


/* =====================
   Minimal Variant
   For dashboard/admin pages
   ===================== */
#page-loader.loader-minimal .loader-shapes,
#page-loader.loader-minimal .loader-gradient-bg {
    display: none;
}

#page-loader.loader-minimal .modern-spinner-container {
    width: 140px;
    height: 140px;
}

#page-loader.loader-minimal .loader-logo {
    width: 70px;
    height: 70px;
}

#page-loader.loader-minimal .brand-title {
    font-size: 22px;
}

#page-loader.loader-minimal .loader-progress {
    display: none;
}

/* =====================
   Accessibility
   ===================== */
@media (prefers-reduced-motion: reduce) {
    .loader-gradient-bg,
    .shape,
    .spinner-ring,
    .loader-logo,
    .logo-glow,
    .brand-title,
    .brand-underline,
    .progress-bar,
    .loader-status {
        animation: none !important;
    }

    .spinner-ring {
        opacity: 0.5;
    }
}

/* =====================
   Responsive Design
   ===================== */
@media (max-width: 768px) {
    .modern-spinner-container {
        width: 160px;
        height: 160px;
    }

    .loader-logo {
        width: 70px;
        height: 70px;
    }

    .brand-title {
        font-size: 20px;
    }

    .loader-progress {
        max-width: 240px;
    }

    .shape {
        opacity: 0.1;
    }
}

@media (max-width: 480px) {
    .loader-content {
        gap: 24px;
    }

    .modern-spinner-container {
        width: 140px;
        height: 140px;
    }

    .spinner-ring {
        border-width: 2px;
    }

    .loader-logo {
        width: 60px;
        height: 60px;
    }

    .brand-title {
        font-size: 17px;
    }

    .loader-progress {
        max-width: 200px;
        height: 3px;
    }

    .loader-status {
        font-size: 11px;
    }

    .shape {
        display: none;
    }
}

/* =====================
   Button/Inline Spinner
   Reusable for any button
   ===================== */
.btn-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spinRotate 0.6s linear infinite;
}

.btn-spinner.active {
    display: inline-block;
}

/* Button loading state */
.btn.is-loading .btn-text {
    display: none;
}

.btn.is-loading .btn-spinner {
    display: inline-block;
}

/* =====================
   Overlay Loader
   For modals/sections
   ===================== */
.loader-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    z-index: 100;
}

[data-theme="dark"] .loader-overlay {
    background: rgba(26, 26, 58, 0.95);
}

.loader-overlay.active {
    display: flex;
}

.loader-overlay .overlay-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(164, 129, 17, 0.15);
    border-top-color: var(--loader-secondary);
    border-right-color: var(--loader-secondary);
    border-radius: 50%;
    animation: spinRotate 1s ease-in-out infinite;
}

.loader-overlay .overlay-text {
    margin-top: 16px;
    color: var(--loader-text);
    font-size: 14px;
    direction: rtl;
    font-weight: 500;
}