/* Add custom CSS styles below */ 


/* 1. إجبار اللون على الأبيض الناصع في الوضع الداكن لجميع احتمالات المنصة */
.dark .product-card-content-meta h4,
[data-theme='dark'] .product-card-content-meta h4,
.theme-dark .product-card-content-meta h4,
body.dark-mode .product-card-content-meta h4 {
    color: #ffffff !important; /* الأبيض الناصع */
    opacity: 1 !important;    /* إلغاء أي شفافية قد تجعله رمادياً */
    -webkit-text-fill-color: #ffffff !important; /* ضمان اللون لجميع المتصفحات */
}

/* 2. ضمان بقاء العنوان في الوضع الفاتح باللون الأسود الواضح */
.light .product-card-content-meta h4,
[data-theme='light'] .product-card-content-meta h4,
body.light-mode .product-card-content-meta h4,
body:not(.dark):not([data-theme='dark']) .product-card-content-meta h4 {
    color: #000000 !important;
}

/* 3. كود توحيد الأسطر المذكور سابقاً (للتذكير بالدمج) */
.product-card-content-meta h4 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: 3.2em !important; 
    line-height: 1.6em !important;
    font-size: 14px !important;
    margin-top: 10px !important;
    margin-bottom: 5px !important;
    white-space: normal !important;
}





/* الإضافة الوحيدة لإصلاح مشكلة التصنيفات */
.product-card {
    position: relative !important;
}

/* 1. إجبار التموضع والمحاذاة لليمين تماماً وإلغاء أي إزاحة للشمال */ 
.product-card-content-meta-pricing { 
    position: absolute !important; 
    top: 20px !important;    /* هامش علوي مريح */ 
    right: 32px !important;  /* إزاحة من اليمين */ 
    left: auto !important;   /* إبطال أي قيم لليسار */ 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: flex-end !important;
    text-align: right !important; 
    z-index: 100 !important; 
    width: fit-content !important; 
}

/* 2. تقليل الهامش بين السعر القديم والجديد ليصبحا متقاربين */ 
.product-card-content-meta-pricing-current-discounted-meta { 
    order: 1 !important; /* السعر القديم في الأعلى */ 
    margin-bottom: -4px !important; /* تقليل الفراغ بين السعرين */ 
}

.product-card-content-meta-pricing-current { 
    order: 2 !important; /* السعر الجديد في الأسفل */ 
    margin-top: 0 !important; 
}

/* 3. تصغير السعر القديم (قبل التخفيض) قليلاً والحفاظ على اللون الأسود */ 
.product-card-content-meta-pricing-current-discounted-meta-regular, 
.product-card-content-meta-pricing-current-discounted-meta-regular *, 
.dark .product-card-content-meta-pricing-current-discounted-meta-regular, 
[data-theme='dark'] .product-card-content-meta-pricing-current-discounted-meta-regular { 
    font-size: 0.8rem !important; /* حجم أصغر للسعر القديم */ 
    color: #000000 !important; 
    -webkit-text-fill-color: #000000 !important; 
    opacity: 1 !important; 
}

/* 4. أحجام السعر الحالي (بعد التخفيض) للهاتف والكمبيوتر باللون الأحمر */ 
.product-card-content-meta-pricing-current-discounted, 
.product-card-content-meta-pricing-current, 
.product-card-content-meta-pricing-current-discounted *, 
.product-card-content-meta-pricing-current * { 
    font-size: 1.2rem !important; /* حجم بارز للسعر الجديد */ 
    color: #ef4444 !important; /* أحمر */ 
    -webkit-text-fill-color: #ef4444 !important; 
    font-weight: 800 !important; 
    background-color: #fff; 
}

/* إخفاء النسب المئوية وكلمة "وفر" */ 
.product-card-content-meta-pricing-current-discounted-percentage, 
.product-card-content-meta-pricing-current-discounted-meta-value { 
    display: none !important; 
}




/* إزالة الخلفية السوداء وجعل النص أسود للتقييم في جميع الأوضاع */
.product-card-content-media-rating {
    background-color: transparent !important;
    color: #000000 !important;
}

/* التأكد من أن قيمة التقييم باللون الأسود */
.product-card-content-media-rating-value {
    color: #000000 !important;
}







/* إخفاء التقييمات والعناوين الترويجية في بطاقات المنتجات */
.product-card-content-media-rating, 
.product-card-content-media-promotional-title {
    display: none !important;
}













/* --- 1. إصلاح أيقونات التواصل: إظهار الأيقونة وإخفاء الرقم تماماً --- */
.s-contacts-list {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 15px !important;
    margin: 20px 0 !important;
}

.s-contacts-item {
    width: 45px !important;
    height: 45px !important;
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important; /* هذا سيخفي أي نص يخرج عن الدائرة */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* إجبار النص (الأرقام) على الاختفاء التام */
.s-contacts-item .unicode, 
.s-contacts-item span:not(.s-contacts-icon) {
    display: none !important;
    opacity: 0 !important;
    position: absolute !important;
}

/* إظهار الأيقونة في المنتصف تماماً */
.s-contacts-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    background: transparent !important;
}

.s-contacts-icon svg {
    width: 22px !important;
    height: 22px !important;
    fill: #333 !important;
    z-index: 10 !important;
}


/* --- 2. روابط مهمة: توحيد الأبعاد وإصلاح زر "المدونة" --- */
.s-menu-footer-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    margin: 0 auto !important;
}

.s-menu-footer-item {
    display: inline-flex !important; /* لتوحيد المحاذاة الداخلية */
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important; /* توحيد الارتفاع لكل الأزرار */
    min-width: 80px !important; /* عرض أدنى لضمان التناسق */
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    color: #444 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

/* إصلاح التوهج أو الهوامش الزائدة في زر المدونة */
.s-menu-footer-item, .s-menu-footer-item * {
    margin: 0 !important;
    line-height: 1 !important;
}

.s-menu-footer-item:hover {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    transform: translateY(-2px);
}