/* =========================================
   HQ - Medical Theme CSS 
========================================= */

/* 1. تعريف الألوان الأساسية (الهوية البصرية) */
:root {
  --medical-green: #0CA678; /* الأخضر الطبي */
  --medical-green-hover: #098A63; /* درجة أغمق عند مرور الماوس */
  --bg-white: #FFFFFF; /* الأبيض للخلفية */
  --text-dark: #2D3748; /* لون خط مريح للعين */
  --light-gray: #F7FAFC; /* لون رمادي فاتح جداً للخلفيات الثانوية */
}

/* 2. الإعدادات العامة للموقع */
body {
  background-color: var(--bg-white) !important;
  color: var(--text-dark);
  font-family: 'Cairo', 'Tajawal', sans-serif; /* خطوط عربية احترافية ومريحة */
}

/* 3. تنسيق الأزرار (Call to Action) */
button, 
.btn, 
.checkout-button, 
.add-to-cart {
  background-color: var(--medical-green) !important;
  color: var(--bg-white) !important;
  border: none !important;
  border-radius: 8px !important; /* حواف ناعمة */
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  transition: all 0.3s ease-in-out !important;
  box-shadow: 0 4px 6px rgba(12, 166, 120, 0.2) !important;
}

button:hover, 
.btn:hover, 
.checkout-button:hover, 
.add-to-cart:hover {
  background-color: var(--medical-green-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(12, 166, 120, 0.3) !important;
}

/* 4. زر إتمام الطلب العائم للموبايل (Sticky Checkout) */
.sticky-checkout-btn,
.mobile-bottom-bar button {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 400px;
  z-index: 9999 !important;
  font-size: 18px !important;
  padding: 15px !important;
}

/* 5. تنسيق كروت المنتجات (Product Cards) */
.product-card, 
.product-item {
  background-color: var(--bg-white) !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 10px !important;
  transition: box-shadow 0.3s ease !important;
}

.product-card:hover, 
.product-item:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05) !important;
  border-color: var(--medical-green) !important; /* إبراز الكارت بالأخضر عند المرور عليه */
}

/* 6. العناوين الرئيسية والأسعار */
h1, h2, h3, .product-title {
  color: var(--text-dark) !important;
  font-weight: 700 !important;
}

.product-price, 
.price {
  color: var(--medical-green) !important;
  font-weight: bold !important;
  font-size: 1.2rem !important;
}

/* 7. شريط الإعلانات العلوي (Announcement Bar) - إن وجد */
.announcement-bar, 
.top-bar {
  background-color: var(--medical-green) !important;
  color: var(--bg-white) !important;
  text-align: center !important;
  font-weight: 600 !important;
}