@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

/* 🧩 مربعات الإحصائيات */
.addons-cart-count,
.addons-sales-count {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background: #f9f9f9;
  border-radius: 10px;
  padding: 12px 18px;
  width: 100%;
  margin: 8px 0;
  font-family: "Cairo", sans-serif;
  font-size: 18px;
  border: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  direction: rtl;
  text-align: right;
  line-height: 1.6;
}

/* الأيقونات */
.cart-icon i,
.sales-icon i {
  font-size: 20px;
  position: relative;
  top: 1px;
  transition: color 0.3s ease;
}

/* النص والرقم */
.addons-cart-count b,
.addons-sales-count b {
  font-weight: 700;
  margin: 0 3px;
}

/* 🔴 تخصيص لون السطر الخاص بالمبيعات فقط */
.addons-sales-count {
  color: #991b1b;
}

.addons-sales-count b {
  color: #991b1b;
}

.addons-sales-count .sales-icon i {
  color: #991b1b;
}

/* 🩵 السطر الخاص بالمشاهدات */
.addons-cart-count {
  color: #333;
}

.addons-cart-count b {
  color: #111827;
}

.addons-cart-count .cart-icon i {
  color: #0073aa;
}

/* إلغاء أي تأثير Hover */
.addons-cart-count:hover,
.addons-sales-count:hover {
  background: #f9f9f9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}