/* Add custom CSS styles below */ 
/* ===================================================
   هوية متجر عبايتي - اليوم الوطني 96 (متوافق مع منصة سلة)
   =================================================== */

:root {
  /* ألوان الهوية الرئيسية */
  --brand-green-dark: #0a3d24;    /* الأخضر الملكي الداكن */
  --brand-green-light: #165b38;   /* الأخضر الوطني متوسط الشدة */
  --brand-gold: #d4af37;          /* الذهبي الملكي للرموز والعناوين */
  --brand-cream: #f9f6f0;         /* البيج الناعم خلفية الأقسام */
  --brand-beige-light: #f3efe6;   /* درجة خلفية ثانوية */
  --brand-text-dark: #1f2937;     /* لون النصوص الداكنة */
  --brand-white: #ffffff;
  
  /* التدرجات اللونية (Gradients) */
  --bg-national-gradient: linear-gradient(135deg, #072a18 0%, #114e2f 50%, #1a6d42 100%);
  --gold-text-gradient: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  --banner-split-gradient: linear-gradient(90deg, #f9f6f0 0%, #f9f6f0 45%, #0a3d24 55%, #072a18 100%);
}

/* 1. تخصيص الخلفية العامة للمتجر */
body {
  background-color: var(--brand-cream) !important;
  color: var(--brand-text-dark);
  font-family: 'Tajawal', 'DIN Next LT Arabic', sans-serif !important;
}

/* 2. شريط الإعلانات العلوي (Announcement Bar) */
.announcement-bar {
  background: var(--bg-national-gradient) !important;
  color: var(--brand-gold) !important;
  border-bottom: 1px solid var(--brand-gold);
  font-weight: bold;
}

/* 3. الهيدر والقائمة الرئيسية (Header & Navigation) */
.site-header {
  background-color: var(--brand-cream) !important;
  border-bottom: 2px solid var(--brand-green-dark);
}

.main-menu a {
  color: var(--brand-green-dark) !important;
  font-weight: 600;
}

.main-menu a:hover {
  color: var(--brand-gold) !important;
}

/* 4. أزرار الشراء والتفاعل (Buttons) */
.btn-primary, 
.s-button-element {
  background: var(--brand-green-dark) !important;
  color: var(--brand-white) !important;
  border: 1px solid var(--brand-gold) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease-in-out !important;
}

.btn-primary:hover, 
.s-button-element:hover {
  background: var(--brand-green-light) !important;
  border-color: var(--brand-gold) !important;
  box-shadow: 0 4px 12px rgba(10, 61, 36, 0.3);
}

/* 5. بطاقات المنتجات (Product Cards) */
.product-card {
  background-color: var(--brand-white) !important;
  border: 1px solid rgba(212, 175, 55, 0.2) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(10, 61, 36, 0.15) !important;
  border-color: var(--brand-gold) !important;
}

/* أسعار المنتجات */
.product-price {
  color: var(--brand-green-dark) !important;
  font-weight: bold !important;
  font-size: 1.1rem;
}

/* شارات الخصم والعروض (Badges) */
.promotion-title, 
.badge-offer {
  background: var(--brand-gold) !important;
  color: var(--brand-green-dark) !important;
  font-weight: bold !important;
  border-radius: 4px;
}

/* 6. قسم البانرات والعروض الخاصة اليوم الوطني */
.national-day-section {
  background: var(--bg-national-gradient) !important;
  color: var(--brand-white) !important;
  padding: 40px 20px;
  border-radius: 16px;
  border: 2px solid var(--brand-gold);
}

.national-day-title {
  color: var(--brand-gold) !important;
  font-weight: 800;
  font-size: 2rem;
}

/* 7. الفوتر (Footer) */
.site-footer {
  background-color: var(--brand-green-dark) !important;
  color: var(--brand-white) !important;
  border-top: 3px solid var(--brand-gold);
}

.site-footer a {
  color: var(--brand-beige-light) !important;
}

.site-footer a:hover {
  color: var(--brand-gold) !important;
}

/* 8. تخصيص شريط التمرير (Scrollbar) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--brand-cream);
}
::-webkit-scrollbar-thumb {
  background: var(--brand-green-dark);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-gold);
}