/* =========================================
   77 STORES - RELEASE COUNTDOWN
   Desktop + Mobile

   الترتيب من اليمين:
   ثانية | دقيقة | ساعة | يوم
   ========================================= */


/* =========================================
   السماح للعداد بالظهور فوق البطاقة
   وعدم قصه على الجوال
   ========================================= */

.z77-has-countdown,
.z77-countdown-host {
    overflow: visible !important;
    contain: none !important;
}

.z77-has-countdown {
    position: relative !important;
    z-index: 5 !important;
}

.z77-has-countdown .s-product-card-entry__content,
.z77-has-countdown .s-product-card-content,
.z77-has-countdown [class*="product-card-content"],
.z77-has-countdown [class*="card-content"] {
    overflow: visible !important;
    contain: none !important;
    position: relative !important;
}


/* =========================================
   العداد الرئيسي
   ========================================= */

.z77-countdown {
    display: flex !important;

    flex-direction: row !important;
    direction: ltr !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 4px !important;

    width: calc(100% - 12px) !important;
    max-width: calc(100% - 12px) !important;

    margin: 6px auto !important;
    padding: 5px 4px !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            180deg,
            #160307 0%,
            #0d0204 50%,
            #080203 100%
        ) !important;

    border: 1px solid #5a0b12 !important;

    border-radius: 9px !important;

    box-shadow:
        inset 0 0 7px rgba(255,255,255,.035),
        0 0 5px rgba(90,11,18,.75),
        0 0 10px rgba(179,38,54,.22) !important;

    color: #ffffff !important;

    /*
     * مهم:
     * لا نستخدم hidden حتى لا يتم قص
     * العداد أو الوهج على الجوال.
     */
    overflow: visible !important;

    position: relative !important;

    z-index: 999 !important;

    opacity: 1 !important;
    visibility: visible !important;

    isolation: isolate !important;

    transform: none !important;

    pointer-events: none !important;
}


/* =========================================
   خط النيون أعلى العداد
   ========================================= */

.z77-countdown::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 8% !important;

    width: 84% !important;
    height: 1px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #b32636 25%,
            #ffffff 50%,
            #b32636 75%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 4px rgba(255,255,255,.8),
        0 0 8px rgba(179,38,54,.7) !important;

    pointer-events: none !important;

    z-index: 2 !important;
}


/* =========================================
   كل خانة
   ========================================= */

.z77-countdown-item {
    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;
    align-items: center !important;

    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 4px 2px !important;

    box-sizing: border-box !important;

    text-align: center !important;

    background:
        linear-gradient(
            180deg,
            #0b0d11 0%,
            #07080b 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,.11) !important;

    border-radius: 6px !important;

    box-shadow:
        inset 0 0 5px rgba(255,255,255,.025) !important;

    position: relative !important;

    z-index: 3 !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================
   ترتيب الخانات بالقوة

   يسار الشاشة:
   يوم | ساعة | دقيقة | ثانية
                         ↑
                    يمين الشاشة
   ========================================= */

.z77-day-item {
    order: 1 !important;
}

.z77-hour-item {
    order: 2 !important;
}

.z77-min-item {
    order: 3 !important;
}

.z77-sec-item {
    order: 4 !important;
}


/* =========================================
   الرقم
   ========================================= */

.z77-countdown-item strong {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ff5664 !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    line-height: 15px !important;

    text-align: center !important;

    direction: ltr !important;

    unicode-bidi: isolate !important;

    font-variant-numeric:
        tabular-nums !important;

    text-shadow:
        0 0 5px rgba(255,86,100,.40),
        0 0 8px rgba(179,38,54,.25) !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================
   ثانية / دقيقة / ساعة / يوم
   ========================================= */

.z77-countdown-item small {
    display: block !important;

    width: 100% !important;

    margin: 3px 0 0 !important;
    padding: 0 !important;

    color:
        rgba(255,255,255,.90) !important;

    font-size: 8px !important;
    font-weight: 600 !important;

    line-height: 10px !important;

    white-space: nowrap !important;

    text-align: center !important;

    direction: rtl !important;

    unicode-bidi: isolate !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================
   عناصر سلة التي تحتوي العداد

   مهم للجوال:
   إلغاء القص فقط للحاويات التي
   وضع JavaScript عليها الكلاس.
   ========================================= */

salla-product-card.z77-has-countdown,
.s-product-card-entry.z77-has-countdown,
.product-card.z77-has-countdown,
.product-entry.z77-has-countdown,
.product-item.z77-has-countdown,
.swiper-slide.z77-countdown-host {
    overflow: visible !important;
    contain: none !important;
}


/* لا يوجد Media Query.
   نفس إعداد الكمبيوتر يعمل على الجوال. */
/* =====================================================
   77 STORES
   إصلاح تداخل الشريط السفلي - صفحة المنتج فقط
===================================================== */

@media (max-width: 768px) {

    /*
     * هذا الشرط يحدد صفحة المنتج فعلياً
     * لأن زر إضافة المنتج موجود داخل صفحة المنتج.
     */
    body:has(salla-add-product-button[product-id]) {

        /* مساحة احتياطية عامة أسفل صفحة المنتج */
        padding-bottom: 0 !important;
    }


    /* ==========================================
       قسم "منتجات قد تعجبك" الرسمي في سلة
    ========================================== */
    body:has(salla-add-product-button[product-id])
    salla-products-slider[source="related"] {
        display: block !important;

        /* المهم هنا: Padding وليس Margin فقط */
        padding-bottom: 260px !important;

        box-sizing: border-box !important;
    }


    /* ==========================================
       استهداف ثيم عالي إذا كان غيّر اسم القسم
    ========================================== */
    body:has(salla-add-product-button[product-id])
    .similar-products,

    body:has(salla-add-product-button[product-id])
    .related-products,

    body:has(salla-add-product-button[product-id])
    [class*="similar-products"],

    body:has(salla-add-product-button[product-id])
    [class*="related-products"],

    body:has(salla-add-product-button[product-id])
    [id*="similar-products"],

    body:has(salla-add-product-button[product-id])
    [id*="related-products"] {
        padding-bottom: 210px !important;
        box-sizing: border-box !important;
    }


    /* ==========================================
       آخر قسم داخل صفحة المنتج
       حل احتياطي في حال عالي نقل المنتجات
    ========================================== */
    body:has(salla-add-product-button[product-id])
    main > section:last-of-type {
        padding-bottom: 210px !important;
        box-sizing: border-box !important;
    }
}