/* ===== Header Gradient (Itqan - Salla) ===== */ :root{ --hdr-fallback: #13173c; --g1: #132474; --g2: #1b0937; --g3: #4c0073; /* لو عايز تضيف درجة رابعة زي اللي كانت ظاهرة بالصورة: */ /* --g4: #800035; */ } /* جرّبنا أكثر من Selector لأن أسماء الهيدر تختلف حسب نسخة الثيم */ header, .header, .site-header, .store-header, .salla-header, .app-header, .navbar, .topbar{ background-color: var(--hdr-fallback) !important; background-image: linear-gradient(135deg, var(--g1) 0%, var(--g2) 40%, var(--g3) 80%) !important; /* بديل 4 ألوان لو حابب: background-image: linear-gradient(135deg, var(--g1) 0%, var(--g2) 40%, var(--g3) 80%, var(--g4) 100%) !important; */ background-repeat: no-repeat !important; background-size: cover !important; } /* خلي أي خلفيات داخل الهيدر شفافة عشان التدرج يبان "على الهيدر كله" */ header *, .header *, .site-header *, .store-header *, .salla-header *{ background-color: transparent !important; background-image: none !important; } /* اختياري: تحسين وضوح النص داخل الهيدر */ header a, .header a, .site-header a, .store-header a, .salla-header a{ color: #fff !important; } /* ===== Hero Slider / Banner: show full image (no cropping) ===== */ .s-slider, .s-hero-slider, .hero-slider, .s-block--slider, .s-block--hero, .s-block--fixed-banner{ overflow: hidden !important; }

/* =========================
   Home Slider: Height + No Crop + Subtle Overlay
   Target: #default-home-slider-0
   ========================= */

:root{
  --hero-h: 850px;      /* زود/قلل الطول من هنا */
  --hero-h-m: 300px;    /* موبايل */
  --hero-overlay: .10;  /* خفّة الجريديان */
}

/* 1) ارتفاع السلايدر والحاوية */
#default-home-slider-0 .s-slider-container{
  height: var(--hero-h) !important;
}

@media (max-width: 768px){
  #default-home-slider-0 .s-slider-container{
    height: var(--hero-h-m) !important;
  }
}

/* 2) خلي كل Slide ياخذ نفس الارتفاع */
#default-home-slider-0 .swiper-slide{
  height: 100% !important;
}

/* 3) منع قص الصورة: خلفية البنر تكون contain */
#default-home-slider-0 .swiper-lazy.has-overlay--before{
  height: 100% !important;
  background-size: contain !important;     /* الأهم: يمنع الأكل */
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* 4) خفف الـ Overlay (الجريديان الغامق) */
#default-home-slider-0 .has-overlay--before::before{
  opacity: var(--hero-overlay) !important;
}

/* =========================
   Full width slider (no black sides)
   Target: #default-home-slider-0
   ========================= */

:root{
  --g1:#132474; --g2:#1b0937; --g3:#4c0073;
}

/* 1) خلي بلوك السلايدر يطلع بعرض الشاشة */
#default-home-slider-0,
#default-home-slider-0 .s-slider-container,
#default-home-slider-0 .swiper,
#default-home-slider-0 .swiper-wrapper,
#default-home-slider-0 .swiper-slide{
  width: 100vw !important;
  max-width: 100vw !important;
}

/* إزالة أي padding/margin من حاويات السلايدر */
#default-home-slider-0{
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* 2) لو في container يضيّق العرض، خليه full */
#default-home-slider-0 .container{
  max-width: 100% !important;
}

/* 3) اجعل خلفية السلايد نفسها Gradient بدل الأسود */
#default-home-slider-0 .swiper-slide{
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 40%, var(--g3) 80%) !important;
}
#default-home-slider-0 .swiper-lazy.has-overlay--before{
  background-size: cover !important;
  background-position: center center !important;
}


/* =========================
   Fix header height + enlarge logo without extra vertical space
   ========================= */

:root{
  --header-h: 200px;       /* ارتفاع الهيدر النهائي */
  --logo-h: 200px;         /* ارتفاع اللوجو داخل الهيدر (لا تتجاوزه) */
  --logo-max-w: 250px;    /* أقصى عرض */
}

/* 1) ثبّت ارتفاع الهيدر/الناڤبار */
header, .navbar, .topbar, .site-header, .salla-header{
  min-height: var(--header-h) !important;
}

/* لو الهيدر عبارة عن bar داخلي (شائع في الثيمات) */
.navbar, .topbar{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) اضبط حاوية اللوجو */
a.navbar-brand{
  display: flex !important;
  align-items: center !important;
  height: var(--header-h) !important;  /* مهم */
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* 3) اضبط صورة اللوجو داخل نفس الارتفاع */
a.navbar-brand > img{
  height: var(--logo-h) !important;
  width: auto !important;
  max-width: var(--logo-max-w) !important;
  max-height: 100% !important;         /* يمنع دفع الهيدر */
  object-fit: contain !important;
  display: block !important;
}

/* موبايل */
@media (max-width: 200px){
  :root{
    --header-h: 60px;
    --logo-h: 46px;
    --logo-max-w: 100px;
  }
}



/* =========================
   Footer = Header Gradient + White text
   (Itqan / Salla)
   ========================= */

:root{
  --g1:#132474;
  --g2:#1b0937;
  --g3:#4c0073;
}

/* 1) خلفية الفوتر بالكامل */
.store-footer__top,
footer,
.store-footer,
.store-footer__bottom,
.store-footer__copyright,
.store-footer__credits{
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 40%, var(--g3) 80%) !important;
}

/* 2) خَلّي كل النصوص داخل الفوتر أبيض */
.store-footer__top,
.store-footer__top *{
  color: #fff !important;
}

/* 3) الروابط والـ menus */
.store-footer__top a,
.store-footer__top .s-menu-footer-item,
.store-footer__top .s-contacts-item,
.store-footer__top .s-social-link a{
  color: #fff !important;
  opacity: .92;
}

.store-footer__top a:hover,
.store-footer__top .s-menu-footer-item:hover{
  opacity: 1;
  text-decoration: underline;
}

/* 4) العناوين */
.store-footer__top .footer-title,
.store-footer__top .s-contacts-title{
  color: #fff !important;
}

/* 5) الغي أي خلفيات بيضاء داخلية (لو موجودة) */
.store-footer__top .container,
.store-footer__top .footer-list,
.store-footer__top .full-about-block{
  background: transparent !important;
}

/* 6) الجزء السفلي (حقوق/مدفوعات) غالبًا خارج store-footer__top */
.store-footer__bottom,
.store-footer__bottom *,
.store-footer__copyright,
.store-footer__copyright *{
  color: #fff !important;
}