/* Add custom CSS styles below */ 
/* استهداف الشاشات الصغيرة فقط (الجوال) */
@media (max-width: 768px) {
    /* تحويل الحاوية الكبرى لتصبح عمود واحد بدلاً من شبكة معقدة */
    #informative-content-4 .grid.lg\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* تحويل حاويات العناصر (اليمين واليسار) لتصبح شبكة من عمودين */
    #informative-content-4 .flex.flex-col.justify-center {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* هنا السحر: عمودين متساويين */
        gap: 15px !important;
        padding: 0 10px !important;
    }

    /* تعديل ترتيب العناصر لتناسب العرض الصغير */
    #informative-content-4 .anime-item {
        flex-direction: column !important; /* الأيقونة فوق النص */
        text-align: center !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* جعل الصورة التي في المنتصف تظهر بشكل كامل ومرتب بين المجموعتين */
    #informative-content-4 .flex-center.px-15 {
        order: -1; /* إذا أردت الصورة في البداية، أو اتركها لتظهر في المنتصف */
        padding: 20px 0 !important;
    }
    
    /* تصغير حجم الأيقونات قليلاً لتناسب العرض الضيق */
    #informative-content-4 .image-wrap, 
    #informative-content-4 .image-wrap img {
        width: 60px !important;
        height: 60px !important;
    }

    /* تصغير النصوص قليلاً لضمان عدم تداخلها */
    #informative-content-4 h2.text-base {
        font-size: 0.9rem !important;
    }
    #informative-content-4 p.text-sm {
        font-size: 0.75rem !important;
    }
}

/* loader */

/* 1. السيطرة الكاملة على حاوية اللودر */
.loader-init {
    background: #080d0b !important; /* لون Midnight Green الفاخر */
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999999 !important;
}

/* 2. إخفاء الشعار القديم وأي أيقونات تحميل تقليدية */
.loader-init img, .loader-init .s-loader, .loader-init div {
    display: none !important;
}

/* 3. بناء المشهد السينمائي باستخدام Pseudo-elements (بدون الحاجة لـ HTML) */
.loader-init::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    background: url('https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/nEyaKa/x9lRkjYamTLcDhYrv1X5kRROjYMZkAJWRfGYoMLz.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    filter: drop-shadow(0 0 15px rgba(197, 160, 89, 0.3));
    animation: alwah-reveal 2s ease-in-out infinite;
}

/* 4. إضافة هالة الضوء الذهبية المتحركة خلف الشعار */
.loader-init::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 3s infinite alternate;
}

/* 5. إضافة نص الفخامة في الأسفل */
.has-not-loader-icon::after {
    content: "أَلْوّة .. تَنَفّس الفَخَامَة";
    position: absolute;
    bottom: 22%;
    color: #C5A059;
    font-size: 15px;
    letter-spacing: 5px;
    font-weight: 300;
    opacity: 0.6;
    animation: text-fade 2s infinite ease-in-out;
}

/* الحركات الاحترافية (Hardware Accelerated) */

/* ظهور واختفاء الشعار بنعومة (مثل عبق العود) */
@keyframes alwah-reveal {
    0%, 100% { transform: scale(0.98); opacity: 0.7; filter: brightness(0.8) drop-shadow(0 0 5px rgba(197, 160, 89, 0.1)); }
    50% { transform: scale(1.05); opacity: 1; filter: brightness(1.2) drop-shadow(0 0 25px rgba(197, 160, 89, 0.4)); }
}

/* نبض الهالة الضوئية */
@keyframes pulse-glow {
    from { transform: scale(0.8); opacity: 0.2; }
    to { transform: scale(1.5); opacity: 0.5; }
}

/* حركة النص الترحيبي */
@keyframes text-fade {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 0.7; transform: translateY(-5px); }
}