/* ==========================================
   نظام متجر كود تك المستقر والمتكامل
   (نسخة الأداء الخارق + تقليل الهوامش الجانبية)
   ========================================== */

/* --- 1. منع ظهور القالب الأبيض الافتراضي والخطوط العريضة بين الأقسام --- */
section,
.s-block, 
.s-block--html, 
.s-block-container,
.custom-section-wrapper,
div[class*="s-block"],
.s-block--html.bg-white {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.cyber-banner-container, .cat-section {
    animation: smoothFadeIn 0.4s ease-out forwards; /* تسريع ظهور العناصر لزيادة سرعة الاستجابة */
}
@keyframes smoothFadeIn {
    0% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- 2. تنعيم وتحسين استجابة التمرير --- */
html {
    scroll-behavior: smooth !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed; /* تحسين سرعة رندر الصفحات */
}

/* --- 3. إخفاء أسهم السلايدر وتقليص المسافات --- */
.swiper-button-next, .swiper-button-prev, .salla-slider-controls {
    display: none !important;
}

salla-products-slider, .salla-products-slider {
    margin-top: -30px !important;
}

/* --- 4. تحسين الأداء على شاشات الجوال العامة --- */
@media (max-width: 768px) {
    .trust-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    }
    salla-products-slider, .salla-products-slider {
        margin-top: -20px !important;
    }
}

/* --- 5. خلفية الجيمنج (وضوح 15%) --- */
body, .app-inner, .salla-inner {
    background-color: #0a0f16 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.15)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(40,40) scale(1.5) rotate(-15)'%3E%3Cpath d='M21 9v2a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V9a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5z'/%3E%3Cpath d='M6 12h4'/%3E%3Cpath d='M8 10v4'/%3E%3Ccircle cx='15' cy='11' r='1' fill='rgba(255,255,255,0.15)' stroke='none'/%3E%3Ccircle cx='18' cy='11' r='1' fill='rgba(255,255,255,0.15)' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(280,60) scale(1.3) rotate(20)'%3E%3Cpath d='M12 2a4 4 0 0 0-4 4v12a4 4 0 0 0 8 0V6a4 4 0 0 0-4-4z'/%3E%3Cpath d='M12 2v6'/%3E%3C/g%3E%3Cg transform='translate(180,180) scale(1.4) rotate(-10)'%3E%3Cpath d='M4 14v-3a8 8 0 0 1 16 0v3'/%3E%3Crect x='2' y='14' width='4' height='6' rx='1'/%3E%3Crect x='18' y='14' width='4' height='6' rx='1'/%3E%3Cpath d='M6 17h-2v4a2 2 0 0 0 2 2h2'/%3E%3C/g%3E%3Cg transform='translate(60,260) scale(1.2) rotate(10)'%3E%3Crect x='2' y='6' width='20' height='12' rx='2'/%3E%3Cpath d='M6 10h.01'/%3E%3Cpath d='M10 10h.01'/%3E%3Cpath d='M14 10h.01'/%3E%3Cpath d='M18 10h.01'/%3E%3Cpath d='M6 14h.01'/%3E%3Cpath d='M10 14h8'/%3E%3C/g%3E%3Cg transform='translate(320,280) scale(1.2)'%3E%3Crect x='0' y='0' width='6' height='6'/%3E%3Ccircle cx='16' cy='3' r='3'/%3E%3Cpath d='M4 12l-3 5h6z'/%3E%3Cpath d='M13 12l4 4m0-4l-4 4'/%3E%3C/g%3E%3Cg transform='translate(220,80) scale(1) rotate(15)'%3E%3Cpath d='M14 6h-4V2H6v4H2v4h4v4h4v-4h4V6z'/%3E%3C/g%3E%3Cg transform='translate(100,140) scale(1) rotate(-20)'%3E%3Cpath d='M4 14v-8a4 4 0 0 1 8 0v8l-2-2-2 2-2-2-2 2z'/%3E%3Ccircle cx='6' cy='8' r='1' fill='rgba(255,255,255,0.15)' stroke='none'/%3E%3Ccircle cx='10' cy='8' r='1' fill='rgba(255,255,255,0.15)' stroke='none'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.22)' stroke='none'%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3Ccircle cx='150' cy='30' r='1'/%3E%3Ccircle cx='350' cy='20' r='2'/%3E%3Ccircle cx='100' cy='100' r='1.5'/%3E%3Ccircle cx='300' cy='150' r='1'/%3E%3Ccircle cx='40' cy='200' r='1.5'/%3E%3Ccircle cx='250' cy='220' r='1'/%3E%3Ccircle cx='380' cy='180' r='2'/%3E%3Ccircle cx='150' cy='320' r='1.5'/%3E%3Ccircle cx='280' cy='360' r='1.5'/%3E%3Ccircle cx='50' cy='350' r='1'/%3E%3Ccircle cx='380' cy='380' r='1'/%3E%3Cpath d='M80 78v4m-2-2h4' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cpath d='M230 28v4m-2-2h4' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cpath d='M350 228v4m-2-2h4' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cpath d='M120 238v4m-2-2h4' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3Cpath d='M220 348v4m-2-2h4' stroke='rgba(255,255,255,0.15)' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    background-size: 400px 400px !important;
    background-attachment: fixed !important;
}

/* --- 6. البنر الرئيسي (ارتق بمستوى لعبك) --- */
.cyber-banner-container {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important; 
    background: linear-gradient(135deg, #0a0f16 0%, #171f2a 100%) !important;
    border: 1px solid rgba(0, 229, 255, 0.15) !important;
    border-radius: 12px !important; 
    padding: 30px 20px !important; 
    text-align: center !important; 
    margin: 20px auto !important;
    width: 100% !important;
}
.cyber-title { 
    color: #fff !important; 
    font-size: 32px !important; 
    font-weight: 900 !important; 
    margin: 0 0 10px 0 !important; 
    text-align: center !important;
    width: 100% !important;
}
.cyber-title span { color: #00e5ff !important; }
.cyber-subtitle { 
    color: #a0aab5 !important; 
    font-size: 16px !important; 
    margin: 0 !important; 
    line-height: 1.6 !important; 
    text-align: center !important;
    max-width: 800px !important; 
}

@media (max-width: 768px) {
    .cyber-banner-container {
        padding: 15px 10px !important; 
    }
    .cyber-title { 
        font-size: 16px !important; 
        margin-bottom: 8px !important;
    }
    .cyber-subtitle { 
        font-size: 11px !important; 
        line-height: 1.4 !important;
    }
}

/* --- 7. القضاء النهائي على الخطوط الأفقية ووميض التحميل --- */
.skeleton,
.s-skeleton,
.skeleton-loader,
.s-block-skeleton,
.animate-pulse,
[class*="skeleton"],
[class*="placeholder"] {
    background-color: transparent !important;
    background-image: none !important;
    animation: none !important;
    box-shadow: none !important;
    border: none !important;
}

.s-block--html, 
.s-block, 
.s-block--html * {
    background-color: transparent !important;
    border-color: transparent !important;
}

table[border="0"], 
table[border="0"] tr, 
table[border="0"] td {
    border: none !important;
    border-collapse: collapse !important;
    outline: none !important;
    background: transparent !important;
}

img, 
picture,
#code-tech-special-banner .banner-image img {
    background-color: transparent !important;
    color: transparent !important; 
}

/* --- 8. تحسين استجابة حاويات المتجر وتقليل الهوامش الجانبية للكمبيوتر --- */
.s-block--html {
    min-height: 180px; 
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
    .s-block--html {
        min-height: 120px; 
    }
}

/* تعديل ذكي ومحسّن للكمبيوتر: تقليص الفراغات الجانبية المزعجة لتوسيع عرض المتجر وزيادة جاذبيته */
@media (min-width: 769px) {
    .container,
    .s-container,
    .app-inner .container,
    .s-block .container,
    .s-block-container {
        max-width: 1380px !important; /* توسيع العرض الأقصى لاحتواء الشاشات الحديثة بشكل مذهل */
        width: 94% !important;        /* تقليص الهوامش الجانبية لتصبح متناسقة وضيقة ومريحة للعين */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}