/* ============================================================
   Penguin Roastery — الكود الكامل الموحّد (بديل كامل لأي كود قديم)

   ⚠️ مهم جدًا: امسح كل اللي موجود حاليًا في خانة الـ CSS في
   "الأكواد المخصصة" بالكامل، والصق الكود ده بدل منه من الصفر،
   بعدين احفظ. متسبش الكود القديم موجود وتحط ده فوقيه زي ما حصل
   المرة اللي فاتت — لازم يبقى استبدال كامل مش إضافة.

   لوحة تحكم سلة ← تصميم المتجر ← تخصيص التصميم على ثيم "رائد"
   ← الأكواد المخصصة (Custom Code) ← تبويب CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@400;600;700;800&display=swap');

:root {
  --brand-navy:   #173B45; /* اللون الغامق الأساسي بالهوية */
  --brand-cream:  #E9E4D5; /* الكريمي - خلفية المتجر */
  --brand-orange: #F4802B; /* لون التمييز في الهوية */
  --button-text:  var(--brand-orange); /* لون كتابة الأزرار الافتراضي (فوق خلفية نيفي) */
}

/* ============================================================
   الخط العام والنصوص
   ============================================================ */
body {
  font-family: 'Alexandria', sans-serif !important;
  color: var(--brand-navy) !important;
}
h1, h2, h3, h4, h5, h6, p, span, a, li, small, strong {
  color: var(--brand-navy) !important;
}

/* ============================================================
   خلفية المتجر بالكريمي بدل الأبيض (وضع الألوان الفاتح فقط)
   ============================================================ */
body.color-mode-light,
body.color-mode-light main,
body.color-mode-light .s-block {
  background-color: var(--brand-cream) !important;
}

/* ============================================================
   الفوتر بالنيفي الغامق بدل الأسود الافتراضي، والنص فوقه كريمي
   (الكلاس الحقيقي هو .store-footer — .site-footer القديم مكانش
   بيطابق أي عنصر فعلي على الموقع، عشان كده ماكانش بيتغير خالص)
   ============================================================ */
.store-footer,
.store-footer .store-footer__inner {
  background: var(--brand-navy) !important;
}
.store-footer,
.store-footer a,
.store-footer span,
.store-footer li,
.store-footer strong,
.store-footer p,
.store-footer h1, .store-footer h2, .store-footer h3,
.store-footer h4, .store-footer h5, .store-footer h6 {
  color: var(--brand-cream) !important;
}

/* ============================================================
   الهيدر (شريط البحث + السلة + اللوجو) بالنيفي الغامق بدل الأبيض
   ============================================================ */
body.color-mode-light .store-header,
.store-header {
  background: var(--brand-navy) !important;
  color: var(--brand-cream) !important;
}
.store-header a,
.store-header span,
.store-header li,
.store-header strong,
.store-header p {
  color: var(--brand-cream) !important;
}
/* صندوق البحث نفسه يفضل أبيض عشان يبان كحقل إدخال واضح فوق النيفي */
.store-header .header-search input,
.store-header input[type="search"],
.store-header input[type="text"] {
  background: #ffffff !important;
  color: var(--brand-navy) !important;
}
.store-header input::placeholder {
  color: rgba(23,59,69,0.55) !important;
}
/* الصف اللي فيه اللوجو + السلة + الحساب + قوائم التصنيفات (بوكسات/أكواب/...)
   عنده خلفية بيضاء لصقة عليه من الثيم نفسه (bg-white)، فلازم تتجاوزها بالتحديد
   وإلا هتفضل بيضاء فوق النيفي زي ما حصل معاك بالظبط */
.store-header .main-nav-container,
.store-header .main-nav-container.bg-white,
.store-header .inner {
  background: var(--brand-navy) !important;
}

/* ============================================================
   بطاقات المنتج والبوكسات — بيضاء (مش برتقالي زي ما كانت غلط قبل كده)
   عشان الصور تبان واضحة فوق خلفية الموقع الكريمي
   ============================================================ */
.card, .product, .product-card, .box, .content, .modal-content,
body.color-mode-light .s-product-card,
body.color-mode-light [class*="product-card"] {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(23,59,69,0.08) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}

/* ============================================================
   الأسعار
   ============================================================ */
.price, .product-price, .s-price {
  color: var(--brand-navy) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}
.sale-price, .s-price--sale, .price--sale {
  color: var(--brand-orange) !important;
  font-size: 28px !important;
  font-weight: 900 !important;
}
del, .old-price {
  color: rgba(23,59,69,0.45) !important;
}

/* ============================================================
   نصوص الأزرار العامة (لون الكتابة بس، مش الخلفية)
   ============================================================ */
button, .btn {
  border: none !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
}

/* أزرار سلة الشراء (زي "متابعة إلى الدفع" و"إتمام الطلب") خلفيتها نيفي
   تلقائيًا (من لون العلامة التجارية في سلة)، فكانت كلمتها بتتلوّن نيفي
   برده زي القديم = تختفي فوق خلفية نفس اللون. دلوقتي كتابتها برتقالي
   واضحة فوق الخلفية النيفي */
.s-button-element,
.s-button-element .s-button-text {
  color: var(--button-text) !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
}

/* ============================================================
   زراير الشراء (أضف إلى السلة / تسوق الآن) بالبرتقالي كلون CTA مميز —
   في بطاقات المنتج، صفحة المنتج، البانرات — بينما باقي الموقع
   (التابات، الروابط) يفضل بالنيفي الغامق (مضبوط من إعداد "لون
   العلامة التجارية" في سلة على #173B45 بالفعل، من غير ما نلمسه هنا)
   ============================================================ */
body.color-mode-light .s-product-card,
body.color-mode-light [class*="product-card"],
body.color-mode-light .s-block--hero,
body.color-mode-light .s-block--fixed-banner,
body.color-mode-light .s-block--product,
body.color-mode-light [class*="product-single"] {
  --color-primary: var(--brand-orange);
  --color-primary-dark: #D96A1F;
  --color-primary-light: #F79A5B;
  --button-text: #ffffff; /* هنا خلفية الزرار بقت برتقالي، فالكتابة تبقى بيضاء مش برتقالي تاني فوق برتقالي */
}

/* لو زرار "أضف إلى السلة" في صفحة المنتج نفسه ما اتلوّنش بالبرتقالي بعد
   نشر الكود ده، ابعتلي اسم الكلاس بتاعه (دوس يمين على الزرار ← Inspect)
   وأنا أضيفلك سطر واحد إضافي يظبطه بالظبط */
/* .your-add-to-cart-wrapper-class { --color-primary: var(--brand-orange); } */

/* ============================================================
   الحقول (فورم الإدخال) — كانت نص برتقالي على أبيض وده بيبوّظ وضوح
   الكتابة، رجّعناه نيفي غامق عادي
   ============================================================ */
input, textarea, select {
  background: #ffffff !important;
  color: var(--brand-navy) !important;
  border: 1px solid rgba(23,59,69,0.12) !important;
  border-radius: 12px !important;
}

/* ============================================================
   الأيقونات
   ============================================================ */
i[class*="icon"], i[class*="sicon"], i[class*="fa-"] {
  color: var(--brand-navy) !important;
}

/* تصحيح دقيق: أيقونات "مميزات المتجر" (شحن سريع/خدمة العملاء/تسوق آمن)
   عبارة عن حرف أيقونة <i class="sicon-..."> جوه دايرة (.feature-icon)
   خلفيتها بتاخد لون العلامة التجارية تلقائيًا من سلة (بقى نيفي زي ما
   ضبطناه). القاعدة اللي فوق كانت بتلوّن رسمة الأيقونة نفسها نيفي كمان
   فبتختفي جوه دايرة نيفي بنفس اللون بالظبط — مش مشكلة fill ولا svg
   زي ما كنت متصور قبل كده، اتأكدت منها دلوقتي من الـ DOM الفعلي.
   الحل: نرجّع رسمة الأيقونة بيضاء تحديدًا جوه الدايرة دي بس. */
.feature-icon i,
.feature-icon [class*="sicon"] {
  color: #ffffff !important;
}

/* ============================================================
   الشريط الإعلاني (زي "شحن مجاني..." و"استخدم كود PEN10...")
   ============================================================ */
/* تصحيح تاني: revert مكانتش الأداة الصح هنا — revert بترجع اللون
   لإعداد المتصفح الافتراضي وبتتخطى الـ inline style اللي سلة حاطاه،
   مش بترجعه لِلون سلة نفسه زي ما كنت متوقع، عشان كده فضلت نفس المشكلة.
   الصح إننا نخلي النصوص جوه الإعلان تورث (inherit) لون العنصر الأب
   s-advertisement مباشرة، وده اللي فيه فعليًا الـ inline color بتاع
   سلة لكل إعلان حسب data-id بتاعه. وسبنا العنصر الأب نفسه من غير أي
   تعديل عشان لونه الأصلي الجاي من سلة يفضل زي ما هو */
.s-advertisement * {
  color: inherit !important;
}

/* ============================================================
   تصحيح: أيقونة زرار فتح القائمة (الهامبرجر) ودايرة الحساب/تسجيل
   الدخول في الهيدر — كانت بتتلوّن نيفي زي قاعدة الأيقونات العامة
   اللي فوق (اللي همّتها أصلاً حل مشكلة تانية خالص: أيقونات مميزات
   المتجر جوه دواير بيضاء)، والنيفي ده بيختفي فوق خلفية الهيدر
   النيفي نفسها. فحصت العنصرين فعليًا (sicon-menu و
   s-user-menu-trigger-icon) ولقيت إنهم فعلاً بيورثوا كريمي من
   الهيدر أصلاً، والقاعدة العامة للأيقونات كانت بتلغي الوراثة دي.
   هنا برجعلهم الكريمي تحديدًا هما بس، من غير ما ألمس باقي
   الأيقونات في الموقع (زي أيقونات مميزات المتجر البيضاء اللي
   فوق دي، أو أيقونة البحث اللي لازم تفضل غامقة فوق خلفية بيضاء)
   ============================================================ */
.store-header i,
.mobile-menu i {
  color: var(--brand-cream) !important;
}

/* تأكيد إضافي: نفس فكرة الهيدر، بس لعناصر قائمة التصنيفات اللي
   بتفتح من الجنب في الموبايل (بوكسات / أكواب / محاصيل القهوة...)
   عشان تفضل واضحة كريمي مهما كانت طريقة تداخلها في الصفحة */
.mobile-menu,
.mobile-menu a,
.mobile-menu span,
.mobile-menu li,
.mobile-menu strong {
  color: var(--brand-cream) !important;
}

/* ============================================================
   تصحيح: قايمة الحساب المنسدلة (اللي بتفتح لما تدوس على دايرة
   الحساب/تسجيل الدخول) خلفيتها بيضاء أصلاً من سلة نفسها، بس
   كانت بتورث نفس لون النص الكريمي بتاع الهيدر (لأنها متداخلة
   جواه في الكود)، فبقى النص الكريمي مش واضح فوق خلفيتها البيضاء.
   رجّعناها نيفي عادي زي أي نص فوق خلفية بيضاء في باقي الموقع
   ============================================================ */
.s-user-menu-dropdown,
.s-user-menu-dropdown a,
.s-user-menu-dropdown span,
.s-user-menu-dropdown li,
.s-user-menu-dropdown p,
.s-user-menu-dropdown i {
  color: var(--brand-navy) !important;
}