/* =========================================================
   SALLA HEADER | HOMEPAGE ONLY (body.index)
   FLOATING TOP + FLOATING FIXED (2nd scroll)
   Target: #mainnav.main-nav-container

   States:
   1) Top (no fixed-*)            : Floating centered blur + GRID layout
   2) First scroll (fixed-pinned) : Hidden completely
   3) Second scroll (fixed-header): Floating centered blur (no halo) + compact height
========================================================= */

/* -----------------------
   Variables (edit here)
------------------------ */
:root{
  /* TOP floating */
  --top-width: min(65%, 980px);
  --top-top: 16px;
  --top-radius: 22px;
  --top-bg: rgba(0,0,0,.32);
  --top-blur: 18px;
  --top-shadow: 0 18px 45px rgba(0,0,0,.22);

  /* SECOND SCROLL floating */
  --fixed-width: min(92%, 1200px);
  --fixed-top: 12px;
  --fixed-radius: 18px;
  --fixed-bg: rgba(0,0,0,.38);
  --fixed-blur: 20px;
  --fixed-shadow: 0 10px 30px rgba(0,0,0,.20);
  --fixed-height: 65px;
}

/* =========================================================
   HOMEPAGE ONLY SCOPE = body.index
========================================================= */

/* Remove theme extra area (HOMEPAGE ONLY) */
body.index header.store-header{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: unset !important;
  box-shadow: none !important;
  filter: none !important;
}
body.index header.store-header::before,
body.index header.store-header::after{
  content: none !important;
  display: none !important;
}

/* Base safety & transitions (HOMEPAGE ONLY) */
body.index #mainnav.main-nav-container{
  z-index: 999999 !important;
  will-change: transform, opacity, width, height;
  transition: transform .45s cubic-bezier(.2,.9,.2,1),
              opacity .22s ease,
              width .45s cubic-bezier(.2,.9,.2,1),
              height .25s ease,
              border-radius .25s ease,
              box-shadow .25s ease !important;
}

/* Prevent headroom hide transforms (HOMEPAGE ONLY) */
body.index #mainnav.main-nav-container.fixed-unpinned,
body.index #mainnav.main-nav-container.fixed-pinned,
body.index #mainnav.main-nav-container.fixed-header{
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* State 2: Hide fixed-pinned fully (HOMEPAGE ONLY) */
body.index #mainnav.main-nav-container.fixed-pinned:not(.fixed-header){
  display: none !important;
}

/* =========================================================
   State 1: TOP (before scroll)  [no fixed-*] (HOMEPAGE ONLY)
========================================================= */
body.index #mainnav.main-nav-container:not([class*="fixed-"]){
  position: fixed !important;
  top: var(--top-top) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: var(--top-width) !important;

  background: var(--top-bg) !important;
  backdrop-filter: blur(var(--top-blur)) !important;
  -webkit-backdrop-filter: blur(var(--top-blur)) !important;

  border-radius: var(--top-radius) !important;
  box-shadow: var(--top-shadow) !important;
}

/* inner layers transparent on TOP */
body.index #mainnav.main-nav-container:not([class*="fixed-"]) .inner,
body.index #mainnav.main-nav-container:not([class*="fixed-"]) .container{
  background: transparent !important;
}

/* GRID layout for perfect alignment (TOP) */
body.index #mainnav.main-nav-container:not([class*="fixed-"])
.flex.items-stretch.justify-between.relative{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  width: 100% !important;
}

/* Center menu */
body.index #mainnav.main-nav-container:not([class*="fixed-"])
.flex.items-stretch.justify-between.relative nav{
  grid-column: 2 !important;
  justify-self: center !important;
  width: max-content !important;
  margin: 0 !important;
}
body.index #mainnav.main-nav-container:not([class*="fixed-"])
.flex.items-stretch.justify-between.relative nav ul{
  justify-content: center !important;
}

/* Right logo */
body.index #mainnav.main-nav-container:not([class*="fixed-"]) a.navbar-brand{
  grid-column: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
}

/* Left icons block */
body.index #mainnav.main-nav-container:not([class*="fixed-"])
.flex.items-stretch.justify-between.relative > .flex.items-center:first-child{
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  margin: 0 !important;
}

/* Hide justify-end on TOP */
body.index #mainnav.main-nav-container:not([class*="fixed-"]) .flex.items-center.justify-end{
  display: none !important;
}

/* White colors on TOP */
body.index #mainnav.main-nav-container:not([class*="fixed-"]) *{
  color: #fff !important;
}
body.index #mainnav.main-nav-container:not([class*="fixed-"]) svg,
body.index #mainnav.main-nav-container:not([class*="fixed-"]) svg *{
  fill: #fff !important;
  stroke: #fff !important;
}

/* =========================================================
   State 3: SECOND SCROLL (fixed-header) FLOATING (HOMEPAGE ONLY)
   no halo blur layer via ::before
========================================================= */
body.index #mainnav.main-nav-container.fixed-header{
  position: fixed !important;
  top: var(--fixed-top) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: var(--fixed-width) !important;

  height: var(--fixed-height) !important;
  min-height: var(--fixed-height) !important;

  border-radius: var(--fixed-radius) !important;

  /* remove real backdrop-filter from element to avoid halo */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;

  overflow: hidden !important;
  isolation: isolate !important;
}

/* clean blur layer */
body.index #mainnav.main-nav-container.fixed-header::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background: var(--fixed-bg) !important;
  backdrop-filter: blur(var(--fixed-blur)) !important;
  -webkit-backdrop-filter: blur(var(--fixed-blur)) !important;

  box-shadow: var(--fixed-shadow) !important;
  border-radius: var(--fixed-radius) !important;
}

/* content above blur */
body.index #mainnav.main-nav-container.fixed-header > *{
  position: relative !important;
  z-index: 1 !important;
}

/* remove empty light area under content */
body.index #mainnav.main-nav-container.fixed-header .inner{
  height: var(--fixed-height) !important;
  min-height: var(--fixed-height) !important;
  padding: 0 !important;
  background: transparent !important;
}

/* vertically center row */
body.index #mainnav.main-nav-container.fixed-header
.flex.items-stretch.justify-between.relative{
  height: var(--fixed-height) !important;
  min-height: var(--fixed-height) !important;
  align-items: center !important;
}

/* vertically center menu + logo */
body.index #mainnav.main-nav-container.fixed-header nav,
body.index #mainnav.main-nav-container.fixed-header nav ul{
  display: flex !important;
  align-items: center !important;
}
body.index #mainnav.main-nav-container.fixed-header a.navbar-brand{
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* show justify-end on fixed-header */
body.index #mainnav.main-nav-container.fixed-header .flex.items-center.justify-end{
  display: flex !important;
  align-items: center !important;
}

/* White colors on fixed-header */
body.index #mainnav.main-nav-container.fixed-header *{
  color: #fff !important;
}
body.index #mainnav.main-nav-container.fixed-header svg,
body.index #mainnav.main-nav-container.fixed-header svg *{
  fill: #fff !important;
  stroke: #fff !important;
}

/* Improve logo visibility on fixed-header */
body.index #mainnav.main-nav-container.fixed-header a.navbar-brand img{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)) !important;
}

/* -----------------------
   Mobile
------------------------ */
@media (max-width: 768px){
  :root{
    --top-width: 94%;
    --top-top: 10px;
    --top-radius: 16px;

    --fixed-width: 96%;
    --fixed-top: 10px;
    --fixed-radius: 16px;
    --fixed-height: 62px;
  }
}

/* =========================================================
   OTHER PAGES: disable side effects (non-index)
========================================================= */
body:not(.index) #mainnav.main-nav-container{
  transition: none !important;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:not(.index) #mainnav.main-nav-container::before,
body:not(.index) #mainnav.main-nav-container::after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   OTHER PAGES (non-index) → Floating header
   Keeps Salla layout normal (no GRID)
========================================================= */

body:not(.index) #mainnav.main-nav-container{
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: min(94%, 1200px) !important;  /* قللها لو عايز أضيق */
  z-index: 999999 !important;

  background: rgba(255,255,255,.72) !important;  /* خلفية فاتحة */
  border-radius: 18px !important;

  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;

  /* منع هالة البلور */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  overflow: hidden !important;
  isolation: isolate !important;
}

/* طبقة blur داخلية بدون هالة */
body:not(.index) #mainnav.main-nav-container::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* المحتوى فوق البلور */
body:not(.index) #mainnav.main-nav-container > *{
  position: relative !important;
  z-index: 1 !important;
}

/* خلي ألوان النصوص في باقي الصفحات أسود */
body:not(.index) #mainnav.main-nav-container *{
  color: #111 !important;
}
body:not(.index) #mainnav.main-nav-container svg,
body:not(.index) #mainnav.main-nav-container svg *{
  fill: #111 !important;
  stroke: #111 !important;
}

/* ارتفاع مناسب */
body:not(.index) #mainnav.main-nav-container,
body:not(.index) #mainnav.main-nav-container .inner,
body:not(.index) #mainnav.main-nav-container
.flex.items-stretch.justify-between.relative{
  height: 70px !important;
  min-height: 70px !important;
  align-items: center !important;
}

/* موبايل */
@media (max-width: 768px){
  body:not(.index) #mainnav.main-nav-container{
    width: 96% !important;
    top: 10px !important;
    border-radius: 16px !important;
  }
}

/* =========================================================
   OTHER PAGES (non-index)
   Before scroll  : normal (no overlap)
   After scroll   : floating (fixed-*)
========================================================= */

/* 1) قبل أول سكرول: الوضع الطبيعي (غير ثابت) */
body:not(.index) #mainnav.main-nav-container:not([class*="fixed-"]){
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

  width: 100% !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  background: inherit !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  overflow: visible !important;
  isolation: auto !important;
}

/* امنع طبقة البلور قبل السكرول */
body:not(.index) #mainnav.main-nav-container:not([class*="fixed-"])::before,
body:not(.index) #mainnav.main-nav-container:not([class*="fixed-"])::after{
  content: none !important;
  display: none !important;
}

/* 2) بعد أول سكرول: floating (أي fixed-*) */
body:not(.index) #mainnav.main-nav-container[class*="fixed-"]{
  position: fixed !important;
  top: 12px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  width: min(94%, 1200px) !important;
  z-index: 999999 !important;

  background: transparent !important;

  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;

  /* منع الهالة */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  overflow: hidden !important;
  isolation: isolate !important;
}

/* طبقة blur داخلية بعد السكرول */
body:not(.index) #mainnav.main-nav-container[class*="fixed-"]::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* المحتوى فوق البلور */
body:not(.index) #mainnav.main-nav-container[class*="fixed-"] > *{
  position: relative !important;
  z-index: 1 !important;
}

/* ألوان بعد السكرول (باقي الصفحات) */
body:not(.index) #mainnav.main-nav-container[class*="fixed-"] *{
  color: #111 !important;
}
body:not(.index) #mainnav.main-nav-container[class*="fixed-"] svg,
body:not(.index) #mainnav.main-nav-container[class*="fixed-"] svg *{
  fill: #111 !important;
  stroke: #111 !important;
}

/* ارتفاع ومحاذاة بعد السكرول */
body:not(.index) #mainnav.main-nav-container[class*="fixed-"],
body:not(.index) #mainnav.main-nav-container[class*="fixed-"] .inner,
body:not(.index) #mainnav.main-nav-container[class*="fixed-"]
.flex.items-stretch.justify-between.relative{
  height: 70px !important;
  min-height: 70px !important;
  align-items: center !important;
}

/* موبايل */
@media (max-width: 768px){
  body:not(.index) #mainnav.main-nav-container[class*="fixed-"]{
    width: 96% !important;
    top: 10px !important;
    border-radius: 16px !important;
  }
}

/* =========================================================
   OTHER PAGES (non-index)
   Hide fixed-pinned (1st scroll)
   Show floating only on fixed-header (2nd scroll)
========================================================= */

/* 1) اخفاء مرحلة first scroll (fixed-pinned) بالكامل */
body:not(.index) #mainnav.main-nav-container.fixed-pinned:not(.fixed-header){
  display: none !important;
}

/* 2) السماح فقط لـ fixed-header انه يظهر */
body:not(.index) #mainnav.main-nav-container.fixed-header{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 3) تأكيد ان fixed-unpinned ما يخفيش الهيدر */
body:not(.index) #mainnav.main-nav-container.fixed-unpinned,
body:not(.index) #mainnav.main-nav-container.fixed-header{
  transform: translateY(0) !important;
}

/* =========================================================
   OTHER PAGES (non-index) - FIX FLOATING POSITIONING
   Center using left/right + margin (RTL-safe)
   Applies only after 2nd scroll (fixed-header)
========================================================= */

/* قبل السكرول: طبيعي */
body:not(.index) #mainnav.main-nav-container:not([class*="fixed-"]){
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* اخفاء fixed-pinned (أول سكرول) */
body:not(.index) #mainnav.main-nav-container.fixed-pinned:not(.fixed-header){
  display: none !important;
}

/* بعد السكرول التاني فقط: floating centered (بدون transform) */
body:not(.index) #mainnav.main-nav-container.fixed-header{
  position: fixed !important;
  top: 12px !important;

  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;

  width: min(94%, 1200px) !important;

  transform: none !important;     /* مهم جدا */
  z-index: 999999 !important;

  border-radius: 18px !important;
  overflow: hidden !important;
  isolation: isolate !important;

  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  box-shadow: none !important;
}

/* طبقة blur داخلية (بدون هالة) */
body:not(.index) #mainnav.main-nav-container.fixed-header::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
}

/* المحتوى فوق البلور */
body:not(.index) #mainnav.main-nav-container.fixed-header > *{
  position: relative !important;
  z-index: 1 !important;
}

/* ألوان النصوص في باقي الصفحات */
body:not(.index) #mainnav.main-nav-container.fixed-header *{
  color: #111 !important;
}
body:not(.index) #mainnav.main-nav-container.fixed-header svg,
body:not(.index) #mainnav.main-nav-container.fixed-header svg *{
  fill: #111 !important;
  stroke: #111 !important;
}

/* موبايل */
@media (max-width: 768px){
  body:not(.index) #mainnav.main-nav-container.fixed-header{
    top: 10px !important;
    width: 96% !important;
    border-radius: 16px !important;
  }
}
/*========================================