/* Add custom CSS styles below */ 
/* ==========================================================
   تخصيص ثيم نجم (Star Theme 1.46) — صيدلية أحلام الدواء
   مبني على متغيرات وأكلاسات الثيم الفعلية.
   الاستخدام: الصق الملف في خانة CSS المخصص ثم احفظ.
   الخط Tajawal موجود في الثيم، فلا نغيّره.
   ========================================================== */

/* ---------- 1) متغيرات الثيم (الطريقة الأنظف لتغيير الشكل) ---------- */
html:root {
  --bg-main: #f4f8fc;              /* خلفية الموقع: أزرق باهت بدل الرمادي */
  --header-bg: #ffffff;
  --header-text: #004182;
  --footer-bg: #004182;            /* فوتر أزرق داكن بدل الأبيض */
  --footer-text: #ffffff;
  --red-price: #d32f2f;            /* سعر الخصم */
  --mm-spn-item-height: 56px;      /* ارتفاع صف القائمة الجانبية (كان 70px) */

  --radius-card: 14px;
  --radius-ctrl: 10px;
  --line: #dde7f1;
}

/* ---------- 2) الهيدر ---------- */
header.store-header {
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 65, 130, .04);
}

/* الشعار كان محدد بـ max-h-9 (36px) فصار صغير جداً */
header.store-header .navbar-brand img {
  max-height: 56px !important;
  width: auto;
}

@media (max-width: 1023px) {
  header.store-header .navbar-brand img { max-height: 44px !important; }
}

/* زر الواتساب أخضر ليتميز عن باقي الهيدر */
header.store-header a[href*="wa.me"],
header.store-header a[href*="whatsapp"],
.store-header [class*="whatsapp"] {
  background: #1fa855 !important;
  border-color: #1fa855 !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- 3) الأزرار ---------- */
salla-button .s-button-element,
.s-button-element {
  border-radius: var(--radius-ctrl);
  font-weight: 700;
}

/* ---------- 4) بطاقة المنتج ---------- */
custom-salla-product-card.s-product-card-entry,
.s-product-card-entry {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.s-product-card-entry:hover {
  border-color: var(--color-primary, #006ab5);
  box-shadow: 0 6px 18px rgba(0, 65, 130, .08);
}

.s-product-card-image {
  background: #fff;
}

.s-product-card-image img.s-product-card-image-primary {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 8px;
}

.s-product-card-content {
  padding: 12px 14px 14px;
}

.s-product-card-content-title a {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text, #004182);
}

.s-product-card-sale-price h4,
.s-product-card-price {
  font-weight: 800;
}

.s-product-card-sale-price h4 { color: var(--red-price); }

.s-product-card-sale-price span {
  color: #7a8794;
  font-weight: 400;
}

/* شارة الخصم / العرض */
.s-product-card-promotion-title {
  background: var(--red-price);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
}

/* زر المفضلة */
.s-product-card-wishlist-btn {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 65, 130, .12);
}

/* ---------- 5) القائمة الجانبية للموبايل (mmenu) ---------- */
.mm-spn a,
.mm-spn li > a {
  color: var(--color-text, #004182) !important;
  text-decoration: none !important;
  font-weight: 500;
}

.mm-spn a:hover,
.mm-spn a:active {
  background: #eef5fc;
  color: var(--color-primary, #006ab5) !important;
}

/* صور التصنيفات: دوائر بنفس المقاس */
.mm-spn li img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* ---------- 6) الفوتر ---------- */
footer.store-footer,
footer.store-footer a,
footer.store-footer p,
footer.store-footer h3,
footer.store-footer h4 {
  color: #fff;
}

footer.store-footer a { opacity: .88; }
footer.store-footer a:hover { opacity: 1; text-decoration: underline; }

/* القائمة السفلية الثابتة في الموبايل */
footer.btm-nav-outer {
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0, 65, 130, .06);
}

/* ---------- 7) الحقول ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea {
  border-radius: var(--radius-ctrl);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary, #006ab5);
  outline-offset: 1px;
}

/* ---------- 8) إتاحة الاستخدام ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary, #006ab5);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 9) اختياري: توسيع المحتوى على الكمبيوتر ----------
   فعّله بإزالة علامات التعليق لو بقي المحتوى في عمود ضيق.
   لا نعرف اسم الحاوية في نجم بعد، فجرّبه وقل لي النتيجة.

@media (min-width: 1024px) {
  .container { max-width: 1240px; }
}
*//* ==========================================================
   تخصيص ثيم نجم (Star Theme 1.46) — صيدلية أحلام الدواء
   مبني على متغيرات وأكلاسات الثيم الفعلية.
   الاستخدام: الصق الملف في خانة CSS المخصص ثم احفظ.
   الخط Tajawal موجود في الثيم، فلا نغيّره.
   ========================================================== */

/* ---------- 1) متغيرات الثيم (الطريقة الأنظف لتغيير الشكل) ---------- */
html:root {
  --bg-main: #f4f8fc;              /* خلفية الموقع: أزرق باهت بدل الرمادي */
  --header-bg: #ffffff;
  --header-text: #004182;
  --footer-bg: #004182;            /* فوتر أزرق داكن بدل الأبيض */
  --footer-text: #ffffff;
  --red-price: #d32f2f;            /* سعر الخصم */
  --mm-spn-item-height: 56px;      /* ارتفاع صف القائمة الجانبية (كان 70px) */

  --radius-card: 14px;
  --radius-ctrl: 10px;
  --line: #dde7f1;
}

/* ---------- 2) الهيدر ---------- */
header.store-header {
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(0, 65, 130, .04);
}

/* الشعار: الثيم يحدده بـ max-h-9 (36px) وعرض 100% من الرابط،
   فنثبّت الارتفاع ونترك العرض تلقائياً (الصورة الأصلية 1350x900) */
header.store-header a.navbar-brand {
  width: auto;
  flex: none;
}

header.store-header a.navbar-brand img {
  height: 64px !important;
  max-height: 64px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;
}

@media (max-width: 1023px) {
  header.store-header a.navbar-brand img {
    height: 48px !important;
    max-height: 48px !important;
  }
}

/* زر الواتساب أخضر ليتميز عن باقي الهيدر */
header.store-header a[href*="wa.me"],
header.store-header a[href*="whatsapp"],
.store-header [class*="whatsapp"] {
  background: #1fa855 !important;
  border-color: #1fa855 !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- 3) الأزرار ---------- */
salla-button .s-button-element,
.s-button-element {
  border-radius: var(--radius-ctrl);
  font-weight: 700;
}

/* ---------- 4) بطاقة المنتج ---------- */
custom-salla-product-card.s-product-card-entry,
.s-product-card-entry {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.s-product-card-entry:hover {
  border-color: var(--color-primary, #006ab5);
  box-shadow: 0 6px 18px rgba(0, 65, 130, .08);
}

.s-product-card-image {
  background: #fff;
}

.s-product-card-image img.s-product-card-image-primary {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 8px;
}

.s-product-card-content {
  padding: 12px 14px 14px;
}

.s-product-card-content-title a {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-text, #004182);
}

.s-product-card-sale-price h4,
.s-product-card-price {
  font-weight: 800;
}

.s-product-card-sale-price h4 { color: var(--red-price); }

.s-product-card-sale-price span {
  color: #7a8794;
  font-weight: 400;
}

/* شارة الخصم / العرض */
.s-product-card-promotion-title {
  background: var(--red-price);
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
}

/* زر المفضلة */
.s-product-card-wishlist-btn {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 65, 130, .12);
}

/* ---------- 5) القائمة الجانبية للموبايل (mmenu) ---------- */
.mm-spn a,
.mm-spn li > a {
  color: var(--color-text, #004182) !important;
  text-decoration: none !important;
  font-weight: 500;
}

.mm-spn a:hover,
.mm-spn a:active {
  background: #eef5fc;
  color: var(--color-primary, #006ab5) !important;
}

/* صور التصنيفات: دوائر بنفس المقاس */
.mm-spn li img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* ---------- 6) الفوتر ---------- */
footer.store-footer,
footer.store-footer a,
footer.store-footer p,
footer.store-footer h3,
footer.store-footer h4 {
  color: #fff;
}

footer.store-footer a { opacity: .88; }
footer.store-footer a:hover { opacity: 1; text-decoration: underline; }

/* القائمة السفلية الثابتة في الموبايل */
footer.btm-nav-outer {
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0, 65, 130, .06);
}

/* ---------- 7) الحقول ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea {
  border-radius: var(--radius-ctrl);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary, #006ab5);
  outline-offset: 1px;
}

/* ---------- 8) إتاحة الاستخدام ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-primary, #006ab5);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- 9) عرض المحتوى على الكمبيوتر ----------
   الثيم يحدد الحاوية (desktop-container) بحد أقصى 1280px، وهذا مناسب.
   لو أردت أعرض قليلاً، أزل علامات التعليق:

@media (min-width: 1024px) {
  .desktop-container { max-width: 1360px; }
}
}/* ---------- إصلاح نص الفوتر داخل الكروت (موبايل) ---------- */
@media (max-width: 1023px) {
  footer.store-footer a,
  footer.store-footer p,
  footer.store-footer span,
  footer.store-footer li,
  footer.store-footer label,
  footer.store-footer h2,
  footer.store-footer h3,
  footer.store-footer h4,
  footer.store-footer button,
  footer.store-footer select {
    color: #004182 !important;
    opacity: 1;
  }

  footer.store-footer svg:not([class*="social"]) {
    color: #004182;
  }
}