/* ════════════════════════════════════════════════════════════
   نسيم البر — ملف CSS الكامل المُدمج
   ──────────────────────────────────────────────────────────────
   الإصدار 1.0 · يونيو 2026
   ضع هذا الملف في: لوحة سلة ← التصميم ← تخصيص الكود ← CSS
   ════════════════════════════════════════════════════════════ */


/* ═══ 1. استيراد الخطوط من Google Fonts ═══ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@700;900&family=Tajawal&display=swap');


/* ═══ 2. خلفية المتجر ولون النصوص ═══ */
body {
  background-color: #f4f1ea;
  color: #2c1810;
  --store-text-primary: #2c1810;
  --store-text-secondary: #3d2818;
  --bg-primary: #f4f1ea;
  --bg-secondary: #fdfcf9;
  font-family: 'Tajawal', sans-serif;
}


/* ═══ 3. الخطوط: Cairo للعناوين والأزرار ═══ */
h1, h2, h3,
custom-salla-product-card .product-card__title,
.home-block-title h2,
.s-page-title,
.s-modal-header .s-modal-title,
.cart-drawer .drawer-title,
.store-footer__title,
.btn,
salla-button button,
.main-menu a,
.mobile-menu a,
.selia-bottom-nav-button .selia-bottom-nav-text {
  font-family: 'Cairo', sans-serif;
  font-weight: 900;
}


/* ═══ 4. الأزرار العامة ═══ */
.btn,
salla-button button {
  border-radius: 12px !important;
  padding: 15px 30px !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  transition: all 0.2s ease-in-out;
  transform: translateY(0);
}

/* الأزرار الأساسية — برتقالي إنقاذ */
.btn--primary,
salla-button[color="primary"] button,
salla-button[color="success"] button,
salla-button:not([fill="outline"]):not([fill="none"]) button {
  background-color: #e8531f !important;
  color: #ffffff !important;
  border-color: #e8531f !important;
}

.btn--primary:hover,
salla-button[color="primary"] button:hover,
salla-button[color="success"] button:hover,
salla-button:not([fill="outline"]):not([fill="none"]) button:hover {
  background-color: #c4400f !important;
  border-color: #c4400f !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* الأزرار الثانوية — شفافة بحدود رملية */
.btn--outline,
.btn--light,
salla-button[fill="outline"] button,
salla-button[fill="none"] button,
salla-button[color="light"] button,
salla-button[color="gray"] button {
  background-color: transparent !important;
  border: 1px solid #e0d6c4 !important;
  color: #2c1810 !important;
}

.btn--outline:hover,
.btn--light:hover,
salla-button[fill="outline"] button:hover,
salla-button[fill="none"] button:hover,
salla-button[color="light"] button:hover,
salla-button[color="gray"] button:hover {
  border-color: #e8531f !important;
  color: #e8531f !important;
  background-color: rgba(232, 83, 31, 0.05) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* أزرار الروابط */
.btn--link,
salla-button[shape="link"] button {
  color: #2c1810 !important;
  background-color: transparent !important;
  border-color: transparent !important;
  padding: 10px 15px !important;
}

.btn--link:hover,
salla-button[shape="link"] button:hover {
  color: #e8531f !important;
  background-color: transparent !important;
  border-color: transparent !important;
  transform: translateY(-1px);
}

/* أزرار الكميات */
salla-quantity-input button {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  font-weight: 700 !important;
}

/* أزرار الإغلاق */
.btn--close,
.btn--close-sm {
  background-color: transparent !important;
  color: #2c1810 !important;
  border-color: transparent !important;
  padding: 8px !important;
  border-radius: 50% !important;
}

.btn--close:hover,
.btn--close-sm:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #e8531f !important;
}


/* ═══ 5. بطاقات المنتجات ═══ */
custom-salla-product-card .product-card {
  border-radius: 16px;
  border: 1px solid #e0d6c4;
  background-color: #ffffff;
  transition: all 0.3s ease-in-out;
}

custom-salla-product-card .product-card__image {
  background-color: #f4f1ea;
}

custom-salla-product-card .product-card:hover {
  transform: translateY(-4px);
  border-color: #e8531f;
  box-shadow: 0 8px 20px rgba(44, 24, 16, 0.18);
}

custom-salla-product-card .product-card:hover .product-card__image img {
  transform: scale(1.06);
}

/* انتقال سلس لتكبير صورة المنتج */
custom-salla-product-card .product-card__image img {
  transition: transform 0.6s cubic-bezier(0.2, 0.65, 0.35, 1);
}


/* ═══ 6. الأسعار وعنوان المنتج ═══ */
.product-card .product-card__price .total-price,
.product-single__info .total-price {
  color: #e8531f;
  font-family: 'Cairo', sans-serif;
  font-weight: 900;
}

.product-single__info .total-price {
  font-size: 1.9rem;
}

.product-single__info h1 {
  font-family: 'Cairo', sans-serif;
  font-weight: 900;
  color: #2c1810;
}


/* ═══ 7. الشارات والنجوم ═══ */
.s-badge, .s-tag {
  border-radius: 100px;
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  padding: 5px 14px;
}

.s-badge--offer {
  background-color: #e8531f;
  color: #ffffff;
}

salla-rating-stars .s-rating-stars__star {
  color: #e8531f;
}


/* ═══ 8. حقول النماذج ═══ */
input.form-control,
textarea.form-control,
select.form-control,
.form-control {
  background-color: #f4f1ea;
  border: 1px solid #e0d6c4;
  border-radius: 12px;
  padding: 13px 18px;
  transition: all 0.3s ease-in-out;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
.form-control:focus-within input,
.form-control:focus-within textarea,
.form-control:focus-within select {
  background-color: #ffffff;
  border-color: #e8531f;
  box-shadow: 0 0 0 4px rgba(232, 83, 31, 0.12);
  outline: none;
}


/* ═══ 9. الفوتر ═══ */
body {
  --footer-bg: #2c1810;
  --bottom-footer-bg: #2c1810;
  --footer-text-color: #b8a890;
}

.store-footer {
  position: relative;
}

.store-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #e8531f;
}

.store-footer a:hover {
  color: #e8531f !important;
}


/* ═══ 10. إزالة الفراغ الأبيض في الصفحة الرئيسية ═══ */
body.index main section.s-block:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   نهاية ملف نسيم البر — حُرّية الرّحلة تبدأ من عتادك
   ════════════════════════════════════════════════════════════ */