/* Add custom CSS styles below */ 
i.angel-ad__icon.sicon-bell-ring{
  display: none;
}

p.s-product-card-content-subtitle.text-center {
    display: none;
}

.dark .da-cp{
  color: var(--dark-text-main) !important;
}

.shadow-none{
  color: var(--dark-text-main) ;
}

.main-nav-container.has-header-bottom.shadow-none {
  color: var(--dark-text-main) ;   
}

/* 2. الحالة الثانية: التراجع عن اللون الأبيض بمجرد ظهور كلاس التثبيت */
.main-nav-container.has-header-bottom.shadow-none.fixed-pinned {
  color: var(--color-primary) ;   
}



/* الهيكل الرئيسي الموحد - بستايل البانر  */
.brand-section-banner {
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-mid) 50%, var(--brand-main) 100%) !important;
    padding: 60px 0 !important;
    border-radius: 0px;
    margin: 0;
    position: relative;
    overflow: hidden;


    border: none !important;
}

/* التأثير الضوئي الخلفي (اللمسة التقنية) */
.brand-section-banner::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--brand-light-glow) 0%, transparent 70%);
    z-index: 1;
}

/* إضافة تدرج شفاف في أسفل كل قسم ليندمج مع ما بعده */
.brand-section-banner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2));
    z-index: 3;
    pointer-events: none;
}

/* تنسيق النصوص */
.brand-section-banner h2.da-cp {
    color: #ffffff !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
    letter-spacing: -1px;
    position: relative; z-index: 2;
}

.brand-section-banner p.da-ts {
    color: var(--brand-text-soft) !important;
    font-size: 1.1rem !important;
    opacity: 0.9;
    font-weight: 300;
    position: relative; z-index: 2;
}

/* تنسيق اللوجو */
.brand-section-banner .angel-products-img {
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.4));
    background: white;
    padding: 5px;
    border-radius: 12px;
}

/* زر عرض الكل (ستايل Glassmorphism الفخم) */
.brand-section-banner .s-block__display-all {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    padding: 8px 20px !important;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    z-index: 2; position: relative;
}

.brand-section-banner .s-block__display-all:hover {
    background: #ffffff !important;
    color: var(--brand-dark) !important;
}

.brand-section-banner .title-wrapper { position: relative; z-index: 2; }


.brand-section-banner {
    margin: -1px 0 0 0 !important; /* تداخل بسيط لمنع ظهور خطوط بيضاء */
    box-shadow: 0px 0px 50px 10px rgba(0,0,0,0.5); /* ظل يدمج الحواف */
}




/* قسم شرائح موبايلي */
.sec-mobily {
    --brand-dark: #001a35;
    --brand-mid: #005c97;
    --brand-main: #00c6ff;
    --brand-light-glow: rgba(0, 198, 255, 0.2);
    --brand-text-soft: #e0f7ff;
}
/* نهاية قسم موبايلي */




/* قسم شرائح زين */
.sec-zain {
    --brand-dark: #0d1a0d;       /* أخضر غامق جداً */
    --brand-mid: #1a4a2a;        /* أخضر متوسط */
    --brand-main: #68c28b;       /* لون زين */
    --brand-light-glow: rgba(104, 194, 139, 0.2);
    --brand-text-soft: #f0fff5;
}

/* نهاية قسم زين */



/* قسم شرائح سلام */

.sec-salam {
    /* تدرج يميل للأخضر البارد (Teal) لتمييزه عن زين */
    --brand-dark: #001a1a;        /* خلفية أغمق مائلة للسواد */
    --brand-mid: #004d4d;         /* درجة Teal متوسطة */
    --brand-main: #00ffcc;        /* أخضر سلام "الكهربائي" */
    
    /* توهج بلون مختلف تماماً عن وهج زين */
    --brand-light-glow: rgba(0, 255, 204, 0.15);
    
    /* نص بلون سماوي باهت جداً */
    --brand-text-soft: #e0fff9;
}

/* نهاية قسم سلام */


/* قسم شرائح stc */

.sec-stc {
    --brand-dark: #2e004f;        /* بنفسجي STC الداكن */
    --brand-mid: #4f008c;         /* الدرجة المتوسطة */
    --brand-main: #ff00ff;        /* لمسة فوشيا كهربائية للإضاءة */
    --brand-light-glow: rgba(255, 0, 255, 0.2);
    --brand-text-soft: #f3e5ff;
}
/* نهاية قسم stc */

/* قسم شرائح redbull */
.sec-redbull {
    --brand-dark: #2a0015;        /* أحمر مائل للسواد */
    --brand-mid: #8b0000;         /* أحمر دم الغزال */
    --brand-main: #ff0033;        /* أحمر ريد بول الصارخ */
    --brand-light-glow: rgba(255, 0, 51, 0.2);
    --brand-text-soft: #ffebeb;
}
/* نهاية قسم redbull */


.sec-visitors-all {
    --brand-dark: #1a0b2e;        /* بداية بالبنفسجي الغامق (STC/Zain Visitors) */
    --brand-mid: #002e5d;         /* انتقال للأزرق العميق (Mobily) */
    --brand-main: #0d4a2a;        /* نهاية بالأخضر الداكن (Zain) */
    
    --brand-light-glow: rgba(255, 255, 255, 0.1);
    
    --brand-text-soft: #f8f9fa;
}

.sec-visitors-all {
    background-size: 200% 200% !important;
    animation: gradientMove 10s ease infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}



.sec-flex {
    /* تدرج لوني حيوي يدمج ألوان الطيف التقني (أزرق، بنفسجي، وردي) */
    --brand-dark: #0f0524;        /* بنفسجي ليلي عميق جداً */
    --brand-mid: #3d0a91;         /* بنفسجي كهربائي */
    --brand-main: #00f2ff;        /* أزرق سيان مضيء (لون الفليكس والسرعة) */
    
    /* توهج بلون السيان ليعطي انطباع "المرونة" والطاقة */
    --brand-light-glow: rgba(0, 242, 255, 0.25);
    
    /* نص أبيض نقي لإبراز العناوين */
    --brand-text-soft: #ffffff;
}

.sec-flex {
    border: 1px solid rgba(0, 242, 255, 0.3) !important;
    box-shadow: inset 0 0 20px rgba(0, 242, 255, 0.05);
}




.sec-shabab {
    /* تدرج لوني جريء يجمع بين الأصفر الحيوي والبنفسجي الداكن */
    --brand-dark: #12002b;        /* بنفسجي غامق جداً للقاعدة */
    --brand-mid: #330066;         /* بنفسجي صريح */
    --brand-main: #f9d423;        /* أصفر "شباب" المضيء */
    
    /* توهج أصفر يعطي إيحاء بالإضاءة القوية */
    --brand-light-glow: rgba(249, 212, 35, 0.2);
    
    /* نص أبيض، ولكن العناوين الفرعية ستأخذ لوناً مائلاً للصفرة */
    --brand-text-soft: #fff9e6;
}

.sec-shabab .s-block__display-all:hover {
    background: #f9d423 !important;
    color: #12002b !important;
    box-shadow: 0 0 15px rgba(249, 212, 35, 0.4);
}







/* مميزات المتجر */

.Store-Features.angel-features {
    background: linear-gradient(180deg, #000000 0%, #0a0a1a 50%, #000000 100%) !important;
    padding: 80px 0 !important;
    position: relative;
    overflow: hidden;
}

/* إضافة توهج خلف الأيقونات */
.Store-Features .angel-feature {
    background: rgba(255, 255, 255, 0.03);
    padding: 30px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease;
}

.Store-Features .angel-feature:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-10px);
    border-color: var(--brand-main, #68c28b); /* سيأخذ لون آخر براند تفاعل معه العميل */
}

/* تنسيق الأيقونات (Sicons) */
.Store-Features i[class^="sicon-"] {
    color: #ffffff !important;
    filter: drop-shadow(0 0 10px rgba(104, 194, 139, 0.5)); /* توهج أخضر خفيف */
}

/* تنسيق النصوص */
.Store-Features h2.da-cp {
    color: #ffffff !important;
    font-weight: 800;
    margin-bottom: 10px;
}

.Store-Features h4.da-tm {
    color: #ffffff !important;
    font-weight: 600;
    margin-top: 15px;
}

.Store-Features p.da-ts {
    color: #9ca3af !important; /* رمادي خفيف */
}

.Store-Features .angel-feature:hover {
    border-color: var(--brand-main, #68c28b) !important; 
    box-shadow: 0 10px 30px var(--brand-light-glow, rgba(104, 194, 139, 0.2));
}

.Store-Features i[class^="sicon-"] {
    filter: drop-shadow(0 0 8px var(--brand-main, #68c28b));
}

@media (max-width: 768px) {
    /* 1. إعدادات القسم العام على الجوال */
    .Store-Features.angel-features {
        padding: 50px 15px !important;
        background: #000000 !important;
    }

    .Store-Features h2.da-cp {
        font-size: 2rem !important;
        margin-bottom: 8px !important;
        text-align: center;
    }

    /* 2. ضبط الشبكة (Grid) لضمان المحاذاة */
    .Store-Features .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        align-items: center !important;
    }

    /* 3. توحيد شكل وحجم البطاقات (The Fix) */
    .Store-Features .angel-feature {
        width: 100% !important;
        max-width: 350px; /* لضمان عدم تمددها بشكل مبالغ فيه */
        min-height: 240px !important; /* توحيد الطول لكل البطاقات */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* توزيع المحتوى بالتساوي */
        align-items: center !important;
        
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 25px !important;
        border-right: 4px solid var(--brand-main, #68c28b) !important; /* خط التميز الجانبي */
        padding: 30px 20px !important;
        margin: 0 auto !important;
        transition: all 0.3s ease;
    }

    /* 4. تنسيق الأيقونات داخل البطاقة */
    .Store-Features .angel-feature .flex-center.h-14 {
        margin-bottom: 15px !important;
        height: auto !important;
        width: auto !important;
    }

    .Store-Features i[class^="sicon-"] {
        font-size: 3rem !important;
        filter: drop-shadow(0 0 10px var(--brand-main, #68c28b));
    }

    /* 5. توحيد تنسيق النصوص لمنع اختلاف الأسطر */
    .Store-Features h4.has-num {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        color: #fff !important;
        text-align: center !important;
        margin: 10px 0 5px 0 !important;
        min-height: 2.8em; /* حجز مساحة لسطرين لضمان الثبات */
        display: flex;
        align-items: center;
    }

    .Store-Features p.da-ts {
        font-size: 0.9rem !important;
        color: #9ca3af !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* لمسة الهوفر اللمسية */
    .Store-Features .angel-feature:active {
        background: rgba(255, 255, 255, 0.08) !important;
        transform: scale(0.98);
    }
}




/* زر الواتس */
/* 1. الحاوية الأم - نجعلها مجرد وعاء شفاف للأزرار */
#wa-angel {
    background-color: transparent !important;
    display: flex !important;
    flex-direction: column-reverse !important; /* الواتساب بالأسفل والاتصال فوقه */
    /* align-items: flex-end !important; */
    gap: 12px !important;
    height: auto !important;
    width: 150px !important;
    bottom: 30px !important;
    right: 30px !important;
    position: fixed !important;
    z-index: 9999 !important;
    padding: 0 !important;
    box-shadow: none !important; /* إزالة أي ظل قديم للحاوية */
}

/* 2. الستايل المشترك للزرين (الواتساب والاتصال) */
.custom-float-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #22c55e !important;
    color: white !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease-in-out !important;
    /* تشغيل حركات الصعود والنبض */
    animation: angel-slideUp 0.8s ease-out, angel-pulse 2s infinite 0.8s;
}

/* 3. تأثير التحويم (Hover) */
.custom-float-btn:hover {
    transform: translateY(-5px) scale(1.05) !important;
    background-color: #16a34a !important;
    filter: brightness(1.1);
}

.custom-float-btn:hover i {
    transform: rotate(15deg);
}

.custom-float-btn i {
    transition: transform 0.3s ease;
}

/* 4. حركات الأنميشن */
@keyframes angel-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes angel-slideUp {
    from { 
        opacity: 0; 
        transform: translateY(50px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* 5. أيقونات سلة (تأكيد الخط) */
[class^=sicon-], [class*=" sicon-"] {
    font-family: "sallaicons" !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

/* 1. تعريف حركة التوهج المستمر (Glow Effect) */
@keyframes angel-glow {
    0% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.6), 0 0 10px rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.8), 0 0 30px rgba(34, 197, 94, 0.6);
    }
    100% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.6), 0 0 10px rgba(34, 197, 94, 0.4);
    }
}

/* 2. حركة الظهور من الأسفل */
@keyframes angel-slideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 3. تطبيق التعديلات على الزرين */
.custom-float-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: #22c55e !important;
    color: white !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2); /* إطار خفيف لتعزيز مظهر الزر */
    
    /* ربط الأنميشن: ظهور مرة واحدة + توهج مستمر */
    animation: angel-slideUp 0.8s ease-out, angel-glow 2.5s infinite ease-in-out;
    
    transition: all 0.3s ease-in-out !important;
}

/* 5. عند تمرير الماوس (Hover) */
.custom-float-btn:hover {
    transform: translateY(-5px) scale(1.05) !important;
    background-color: #16a34a !important;
    box-shadow: 0 0 40px rgba(34, 197, 94, 1) !important; /* توهج أقوى عند الحوم */
}
a.flex.items-center.gap-2
 {
    display: none !important;
}