/*
 * ====================================================================
 * Zentos - Sticky Add to Cart Bar Mobile Position Fix
 * إصلاح مكان شريط إضافة السلة اللاصق على شاشات الموبايل
 * ====================================================================
 */

/*
 * هذا الكود سيتم تطبيقه فقط على شاشات الموبايل
 */
@media (max-width: 767px) {
    /*
     * استهداف الشريط اللاصق بالاسم الصحيح من الكود الذي أرسلته
     */
    section.sticky-product-bar {
        /*
         * ارفع الشريط من الأسفل بمقدار 160 بكسل
         * ليكون فوق زر الواتساب (90 بكسل) وزر الموسيقى (90 بكسل)
         * مع ترك مسافة أمان إضافية
         */
        bottom: 160px !important;

        /* تعديلات إضافية لتحسين المظهر */
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1); /* إضافة ظل علوي لتمييزه */
        transition: bottom 0.3s ease-in-out; /* إضافة حركة ناعمة لظهوره */
    }
}

/*
 * =======================================================
 * Zentos - Yalla Ludo Sub-Category Filters
 * =======================================================
 */
.zentos-ludo-filters { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; width: 100%; margin-bottom: 2.5rem; }
.zentos-ludo-filters .filter-btn { display: inline-flex; padding: 0.75rem 1.5rem; border: 1px solid var(--color-primary); border-radius: 9999px; color: var(--color-primary); background-color: transparent; font-weight: bold; text-decoration: none; transition: all 0.2s ease-in-out; }
.zentos-ludo-filters .filter-btn:hover { background-color: var(--color-primary); color: white; transform: translateY(-2px); }

/* =============================================
 * Zentos - Takeover Strategy (CSS) - V2
 * =========================================== */

/* * الخطوة 1: إخفاء كل المحتوى الأصلي داخل الفوتر
*/
footer > div {
    display: none !important;
}

/* * الخطوة 2: التأكد من أن حاوية الفوتر نفسها ظاهرة 
 * مع إزالة المسافة العلوية الزائدة
*/
footer, .zentos-takeover-content {
    display: block !important;
    padding-top: 0 !important; /* تم تغيير القيمة هنا من 3rem إلى 0 */
}

/* * الخطوة 3: تنسيقات بسيطة لمحتوى الفوتر الجديد
*/
.zentos-takeover-content h2 {
    color: white !important;
    font-size: 1.25rem;
    font-weight: bold;
}
.zentos-takeover-content .app-buttons img {
    height: 40px;
    width: auto;
}
/* ==============================================
 * Zentos - Another Edits (CSS)
============================================== */

/* --- Navbar Styles --- */
.main-navbar{position:fixed;top:.75rem;left:50%;transform:translateX(-50%);width:95%;padding:.3rem 1rem;border-radius:1rem;background-color:rgba(255,255,255,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:0 solid rgba(255,255,255,.2);box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:50;display:flex;justify-content:space-between;align-items:center;transition-property:all;transition-timing-function:cubic-bezier(.5,.52,.5,.52);transition-duration:300ms}@media (prefers-color-scheme:dark){.main-navbar{background-color:rgba(31,31,44,.7)}}

/* --- Hide Specific Nav Items --- */
[id="2028357971"],[id="1937919874"],[id="121665149"],[id="410232070"],[id="1224257357"],[id="1594243893"],[id="2023830094"],[id="1897617688"]{display:none!important}

/* --- FAQ Hover Styles --- */
.faq-content-single-question{transition:all .3s ease;border-radius:1rem}.faq-content-single-question:hover{background-color:var(--color-primary);color:#fff!important;border-color:var(--color-primary)}.faq-content-single-question:hover .faq-content-single-question-title{color:#fff}

/* --- WhatsApp Button Style --- */
#karzoun-widget-send-button{background-color:#8a30df!important}

/*
 * =======================================================
 * Zentos - WhatsApp Button Mobile Position Fix
 * إصلاح مكان زر الواتساب على شاشات الموبايل
 * =======================================================
 */

/*
 * هذا الكود سيتم تطبيقه فقط على الشاشات التي يقل
 * عرضها عن 768 بكسل (شاشات الجوال)
 */
@media (max-width: 767px) {
  #karzoun-widget-send-button {
    /*
     * ارفع الزر من الأسفل بمقدار 90 بكسل بدلاً من القيمة الافتراضية
     * ليكون فوق شريط التنقل السفلي بمسافة كافية
     */
    bottom: 90px !important;
  }
}

/*
 =========================================================
  Purple Card - Image to Video on Hover Effect
 =========================================================
*/

/* 1. تجهيز الحاوية الرئيسية للصورة والفيديو */
.main-links-style-2-slider-single-content-image {
    position: relative; /* ضروري لجعل الفيديو يتمركز بداخلها */
    overflow: hidden;   /* يضمن عدم خروج الفيديو عن إطار الصورة */
}

/* 2. تصميم الفيديو الذي سنضيفه بالـ JavaScript */
.main-links-style-2-slider-single-content-image .hover-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* يضمن ملء الفيديو للمساحة بالكامل */
    opacity: 0; /* يبدأ شفافًا ومخفيًا */
    transition: opacity 0.4s ease-in-out; /* حركة ظهور ناعمة */
    pointer-events: none; /* لمنع الفيديو من اعتراض حركة الماوس */
}

/* 3. التأثير عند مرور الماوس */
.main-links-style-2-slider-single-content-image:hover .hover-video {
    opacity: 1; /* إظهار الفيديو عند مرور الماوس */
}


/*
=================================================
  Replace Header & Footer Logo
=================================================
*/

/*
  هذا الكود يستهدف صورة اللوجو في كل من هيدر الجوال
  والنافبار الثابت في نسخة سطح المكتب ويقوم باستبدالها.
*/
.header-mobile .logo img,
.main-nav-container.fixed-header .logo img,
.main-navbar a[aria-label="Store Home Page"] img {
    /* استخدم خاصية `content` لاستبدال مصدر الصورة */
    content: url("https://res.cloudinary.com/dbvl7eq8m/image/upload/v1754502345/CNLDGBXbStVPtYn3GC4S6D2SrGTzBqnz1mfMTzZb_xdfnoj.avif") !important;
}

/* --- 2. استهداف لوجو الفوتر (بناءً على الكود الجديد الذي أرسلته) --- */
footer a[aria-label="Store Homepage"] img {
    content: url("https://res.cloudinary.com/dbvl7eq8m/image/upload/v1754502345/CNLDGBXbStVPtYn3GC4S6D2SrGTzBqnz1mfMTzZb_xdfnoj.avif") !important;
}