:root {
  --store-bg: #C2D9EB;
}

/* خلفية المتجر */
body,
.site-wrapper, /* أو الكلاس اللي يغلف المتجر عندك */
.store-content {
  background-color: var(--store-bg) !important;
  min-height: 100%;
}

/* لو تبي تحسين قراءة النصوص على الخلفية الفاتحة */
body {
  color: #1E3A5F; /* نص داكن يتباين كويس مع الخلفية */
}



/* 1. حدود زرقاء على بطاقات المنتج */
.salla-product-card,
.product-card,
.horizontal-products .salla-product-card,
.s-product-card-vertical {
  border: 2px solid #1E73BE; /* أزرق رئيسي */
}

/* 2. هيدر (القائمة العليا) بلون أزرق غامق ونص أبيض */
.main-nav-container.fixed-header .inner,
.main-nav-container.fixed-pinned .inner {
  background-color: #174F8D !important; /* أزرق غامق */
  color: #ffffff !important;
}

/* 3. تأكد من أن كل الروابط والأيقونات في الهيدر باللون الأبيض */
.main-nav-container.fixed-header .inner a,
.main-nav-container.fixed-pinned .inner a,
.main-nav-container.fixed-header .inner .sicon-shopping-bag:before,
.main-nav-container.fixed-pinned .inner .sicon-shopping-bag:before,
.main-nav-container.fixed-header .inner .sicon-user-circle:before,
.main-nav-container.fixed-pinned .inner .sicon-user-circle:before,
.main-nav-container.fixed-header .inner .hamburger-icon,
.main-nav-container.fixed-pinned .inner .hamburger-icon {
  color: #ffffff !important;
}

/* ================================= */
/* 1. جعل القسم السفلي (Footer) بلون أزرق غامق ونص أبيض */
/* ================================= */
.footer-is-light .store-footer,
.footer-is-light .store-footer .store-footer__inner,
.store-footer {
  background-color: #174F8D !important;  /* أزرق غامق */
  color: #ffffff !important;
}

/* روابط ونصوص الفوتر */
.footer-is-light .store-footer a,
.footer-is-light .store-footer p,
.footer-is-light .store-footer h3 {
  color: rgba(255,255,255,0.85) !important;
  transition: color .2s ease;
}
.footer-is-light .store-footer a:hover {
  color: #ffffff !important;
}

/* سياسات الموقع (Footer Policies) */
.store-footer .footer-policies {
  background: linear-gradient(135deg,
     #174F8D 0%,   /* أزرق غامق */
     #174F8D 50%,
     #ffffff 50%,
     #ffffff 100%);
  border-top: 1px solid rgba(255,255,255,0.2);
  padding: 2rem 0;
  color: #ffffff !important;
}

/* توازن النص في الشاشات الصغيرة */
@media (max-width: 900px) {
  .footer-is-light .store-footer,
  .store-footer .footer-policies .container {
    text-align: center !important;
  }
}

/* ================================================= */
/*  تعديل شكل صور الأقسام إلى مربعة بحواف ناعمة وحجم أكبر  */
/* ================================================= */

/* 1) تعريف متغيرات للحجم ونصف القطر */
:root {
  --section-img-size: 120px;     /* عرض وارتفاع الصورة */
  --section-img-radius: 0.75rem; /* نصف قطر الحواف */
}

/* 2) ضبط حاوية القسم لتوسيط الصورة وإضافة Padding */
.s-block.s-block--banners .banner-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem; /* مسافة حول الصورة */
}

/* 3) تحويل الصورة إلى مربع بحجم محدد وحواف مدورة */
.s-block.s-block--banners .banner-entry img {
  width: var(--section-img-size) !important;
  height: var(--section-img-size) !important;
  border-radius: var(--section-img-radius) !important;
  object-fit: cover; /* اقتصاص وتعبئة مربّعة */
}
/* ======================================= */
/* تعديل شكل وصيغة صور الأقسام (Categories) */
/* ======================================= */

/* ===== Splash (مرّة واحدة على الرئيسية) ===== */
:root{
  --splash-bg: rgba(23,79,141,0.9); /* شفافية الخلفية */
  --splash-size: 180px;             /* حجم الشعار */
}

.splash-overlay{
  position: fixed;
  inset: 0;
  background: var(--splash-bg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647; /* فوق الكل */
  opacity: 1;
  pointer-events: all;
  transition: opacity .8s ease;
}

.splash-overlay.hide{
  opacity: 0;
  pointer-events: none;
}

.splash-card{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.splash-logo{
  width: var(--splash-size);
  height: var(--splash-size);
  background: center / contain no-repeat;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
  animation: introPop 1.8s ease forwards, glow 2.4s ease-in-out 1.8s 2;
}

@keyframes introPop {
  0%   { transform: scale(0.2) rotate(-30deg); opacity: 0; }
  40%  { transform: scale(1.12) rotate(4deg);  opacity: 1; }
  70%  { transform: scale(0.97) rotate(-2deg); }
  100% { transform: scale(1)    rotate(0deg);  }
}

@keyframes glow {
  0%,100% { filter: drop-shadow(0 6px 16px rgba(0,0,0,.25)); }
  50%     { filter: drop-shadow(0 10px 26px rgba(0,0,0,.35)); }
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .splash-logo{ animation: none !important; }
  .splash-overlay{ transition: none !important; }
}