/* =========================
   Custom Css for the theme (v1 UI)
   ========================= */

/* =========================
   AW Search Sheet – layout fix (results expand + scroll)
   ========================= */

body.aw-search-open .aw-search-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10010;
}

body.aw-search-open .aw-search-sheet{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(14px + env(safe-area-inset-top, 0px));
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: 18px;
  z-index: 10011;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
}

/* header */
.aw-search-sheet__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.aw-search-sheet__title{
  margin: 0;
  font-weight: 800;
  font-size: 16px;
}
.aw-search-sheet__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  cursor: pointer;
}

/* body scroll area */
.aw-search-sheet__body{
  flex: 1;
  min-height: 0;            /* مهم جداً لعمل scroll داخل flex */
  overflow: auto;
  padding: 12px 14px 14px;
}

/* ---- Salla search component normalization inside sheet ---- */
.aw-search-sheet salla-search{
  display: block;
}

/* هذه العناصر عند سلة أحياناً تكون فيها قيود ارتفاع/تموضع */
.aw-search-sheet .s-search-modal,
.aw-search-sheet .s-search-container{
  position: static !important;
  max-height: none !important;
  height: auto !important;
}

/* خلي container الداخلي يتمدد بشكل عمودي */
.aw-search-sheet .s-search-inline,
.aw-search-sheet .s-search-container.s-search-inline{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
}

/* input wrapper */
.aw-search-sheet .s-search-input-wrapper{
  position: sticky;         /* يثبت الإدخال فوق أثناء تمرير النتائج */
  top: 0;
  background: #fff;
  padding: 2px 0 10px;
  z-index: 2;
}

/* results should be visible and scroll naturally */
.aw-search-sheet .s-search-results{
  display: block !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Give list items breathing room */
.aw-search-sheet .s-search-product{
  border-radius: 14px;
}

/* Mobile: keep sheet comfy */
@media (max-width: 767px){
  body.aw-search-open .aw-search-sheet{
    top: calc(12px + env(safe-area-inset-top, 0px));
    width: calc(100vw - 16px);
    max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
  }
  .aw-search-sheet__body{
    padding: 10px 12px 12px;
  }
}

/* =========================
   AW Search Sheet – FORCE expand + scroll (override)
   Put this at VERY END of app.css
   ========================= */

body.aw-search-open .aw-search-sheet{
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: calc(100vh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
}

/* اجعل salla-search نفسه يتمدد داخل الشيت */
body.aw-search-open .aw-search-sheet > salla-search{
  display: block !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* بعض الثيمات تضع salla-search داخل Wrapper */
body.aw-search-open .aw-search-sheet salla-search{
  flex: 1 !important;
  min-height: 0 !important;
}

/* جوّا salla-search (Light DOM) */
body.aw-search-open .aw-search-sheet .s-search-modal{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
}

body.aw-search-open .aw-search-sheet .s-search-container{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
}

/* خلي الإدخال ثابت فوق والنتائج تتمدد تحت */
body.aw-search-open .aw-search-sheet .s-search-input-wrapper{
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: #fff !important;
  padding-bottom: 10px !important;
}

/* ✅ أهم سطرين: النتائج هي اللي تسكّرول وتاخذ باقي المساحة */
body.aw-search-open .aw-search-sheet .s-search-results{
  flex: 1 !important;
  min-height: 0 !important;
  overflow: auto !important;
  max-height: none !important;
  height: auto !important;
  position: relative !important;
  -webkit-overflow-scrolling: touch;
}

/* تحسين بسيط للشكل */
body.aw-search-open .aw-search-sheet .s-search-product{
  border-radius: 14px;
}

/* موبايل */
@media (max-width: 767px){
  body.aw-search-open .aw-search-sheet{
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* =========================
   AW Search Sheet (Overlay + Sheet)
   ========================= */

:root{
  --aw-ss-maxw: 640px;
  --aw-ss-radius: 18px;
  --aw-ss-top: 12vh;
  --aw-ss-pad: 14px;
  --aw-ss-z: 10050;
}

/* overlay */
.aw-search-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: var(--aw-ss-z);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* sheet */
.aw-search-sheet{
  position: fixed;
  top: var(--aw-ss-top);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: min(var(--aw-ss-maxw), calc(100vw - 24px));
  max-height: calc(80vh - env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-radius: var(--aw-ss-radius);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  z-index: calc(var(--aw-ss-z) + 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  overflow: hidden;
}

/* header row inside sheet */
.aw-search-sheet__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.aw-search-sheet__title{
  font-size: 14px;
  font-weight: 800;
  color: #111;
  margin: 0;
}

.aw-search-sheet__close{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.aw-search-sheet__close:active{
  transform: scale(.98);
}

/* body content */
.aw-search-sheet__body{
  padding: var(--aw-ss-pad);
  overflow: auto;
  max-height: calc(80vh - 64px - env(safe-area-inset-bottom, 0px));
}

/* open state */
body.aw-search-open .aw-search-overlay{
  opacity: 1;
  pointer-events: auto;
}

body.aw-search-open .aw-search-sheet{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* prevent background scroll */
body.aw-search-open{
  overflow: hidden !important;
  touch-action: none;
}

/* Make salla-search inside sheet full width */
.aw-search-sheet salla-search,
.aw-search-sheet .s-search-modal,
.aw-search-sheet .s-search-container{
  width: 100% !important;
  max-width: 100% !important;
}

/* Results box nicer inside sheet */
.aw-search-sheet .s-search-results{
  max-height: 52vh;
  overflow: auto;
  padding-top: 8px;
}

/* Ensure results don't get hidden by bottom navbar safe area if present */
.aw-search-sheet .s-search-results{
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}


/* =========================================================
   AW Bottom Navbar — FINAL CLEAN CSS (No Conflicts)
   Replace your current bottom-nav CSS with this block.
   Put at the END of public/app.css
========================================================= */

/* Variables (JS may override on mount via inline style) */
:root{
  --aw-bn-bg: #0b5a66;
  --aw-bn-icon: rgba(255,255,255,.75);
  --aw-bn-active: #bff4ea;

  --aw-bn-h: 64px;      /* JS sets */
  --aw-bn-r: 18px;      /* JS sets */
  --aw-bn-maxw: 560px;  /* max width of pill */

  --aw-bn-badge-bg: #ff3b30;
  --aw-bn-badge-text: #ffffff;

  --sab: env(safe-area-inset-bottom, 0px);
}

/* Mount (the pill) */
#awBottomNavMount.aw-bottomnav{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + var(--sab));
  width: min(var(--aw-bn-maxw), calc(100vw - 24px));
  height: var(--aw-bn-h);

  background: var(--aw-bn-bg);
  border-radius: var(--aw-bn-r);
  z-index: 9999;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Optional blur */
#awBottomNavMount.aw-bottomnav[data-blur="1"]{
  background: color-mix(in srgb, var(--aw-bn-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Optional shadow */
#awBottomNavMount.aw-bottomnav[data-shadow="1"]{
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* Hide on scroll */
#awBottomNavMount.aw-bottomnav.is-hidden{
  transform: translateX(-50%) translateY(calc(100% + 18px));
  transition: transform .22s ease;
}
#awBottomNavMount.aw-bottomnav:not(.is-hidden){
  transition: transform .22s ease;
}

/* Inner nav layout */
#awBottomNavMount.aw-bottomnav .aw-bottomnav__inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;

  margin: 0;
  padding: 0 6px;
  box-sizing: border-box;
}

/* Each item */
#awBottomNavMount.aw-bottomnav .aw-bottomnav__item{
  flex: 1 1 0;
  min-width: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  position: relative;

  padding: 2px 6px 10px;
  border-radius: 0; /* no tiles */
  color: var(--aw-bn-icon);
}

/* ICON WRAPPER: no background at all */
#awBottomNavMount.aw-bottomnav .aw-bottomnav__icon{
  width: 100%;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  line-height: 1;
}

/* Kill any pseudo backgrounds injected by other styles */
#awBottomNavMount.aw-bottomnav .aw-bottomnav__icon::before,
#awBottomNavMount.aw-bottomnav .aw-bottomnav__icon::after{
  content: none !important;
}

/* Salla icon <i> */
#awBottomNavMount.aw-bottomnav .aw-bottomnav__icon i{
  font-size: 22px;
  color: rgba(255,255,255,.72);
  transition: color .18s ease, transform .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Custom uploaded icon <img> */
#awBottomNavMount.aw-bottomnav .aw-bottomnav__icon img{
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  filter: none;
  transition: filter .18s ease, transform .18s ease;
}

/* Label */
#awBottomNavMount.aw-bottomnav .aw-bottomnav__label{
  /* margin-top: 6px; */
  font-size: 14px;
  font-weight: 650;
  line-height: 1.1;
  text-align: center;

  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  color: rgba(255,255,255,.78);
  transition: color .18s ease;
}

/* ACTIVE indicator (underline + glow) */
#awBottomNavMount.aw-bottomnav .aw-bottomnav__item::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  border-radius: 999px;
  opacity: 0;
  background: var(--aw-bn-active);
  box-shadow: 0 6px 14px rgba(191,244,234,.55);
  transition: width .22s ease, opacity .22s ease;
}

/* Active colors */
#awBottomNavMount.aw-bottomnav .aw-bottomnav__item.is-active .aw-bottomnav__label{
  color: var(--aw-bn-active);
}
#awBottomNavMount.aw-bottomnav .aw-bottomnav__item.is-active .aw-bottomnav__icon i{
  color: var(--aw-bn-active);
  transform: translateY(-1px);
}
#awBottomNavMount.aw-bottomnav .aw-bottomnav__item.is-active .aw-bottomnav__icon img{
  filter: drop-shadow(0 0 10px rgba(191,244,234,.55));
  transform: translateY(-1px);
}
#awBottomNavMount.aw-bottomnav .aw-bottomnav__item.is-active::after{
  width: 26px;
  opacity: 1;
}

/* Badge (cart) */
#awBottomNavMount.aw-bottomnav .aw-bottomnav__badge{
  position: absolute;
  top: 8px;
  right: 10px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;

  font-size: 10px;
  line-height: 18px;
  font-weight: 800;

  background: var(--aw-bn-badge-bg);
  color: var(--aw-bn-badge-text);

  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}

/* Hide on desktop */
@media (min-width: 1025px){
  #awBottomNavMount.aw-bottomnav{ display:none !important; }
}

/* Page padding only when JS adds body.aw-bn-on */
@media (max-width: 1024px){
  body.aw-bn-on{
    padding-bottom: calc(var(--aw-bn-h) + 26px + var(--sab));
  }
}

/* Login modal padding only when opened from bottom nav */
body.aw-login-from-bottomnav .s-modal-padding{
  padding: 1rem;
  padding-top: 1.5rem;
  padding-bottom: var(--aw-login-bottom-pad, 5.5rem) !important;
}

.aw-bottomnav__item:active{
  transform: scale(.94);
}

.aw-bottomnav__item.is-active .aw-bottomnav__icon{
  transform: translateY(-2px);
  transition:.18s;
}

.aw-bottomnav__item.is-active .aw-bottomnav__icon i,
.aw-bottomnav__item.is-active .aw-bottomnav__icon img{
  transform: scale(1.08);
}

/* ===== BottomNav Icon Hard Fix ===== */
#awBottomNavMount .aw-bottomnav__icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:42px !important;
  background:transparent !important;
  visibility:visible !important;
  opacity:1 !important;
}

#awBottomNavMount .aw-bottomnav__icon i{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:24px !important;
  line-height:1 !important;
  color:var(--aw-bn-icon) !important;
  visibility:visible !important;
  opacity:1 !important;
}

#awBottomNavMount .aw-bottomnav__icon img{
  display:block !important;
  width:26px !important;
  height:26px !important;
  object-fit:contain !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* =========================
   Localization modal padding (only when opened from BottomNav)
   ========================= */
body.aw-login-from-bottomnav .s-modal-padding,
body.aw-localization-from-bottomnav .s-modal-padding{
  padding: 1rem;
  padding-top: 1.5rem;
  padding-bottom: var(--aw-login-bottom-pad, 5.5rem) !important;
}

/* =========================================================
   AW Header — Glass + Sticky + Pill (Mobile/Tablet)
   FINAL (NO CONFLICTS) — replace your current header CSS with this
========================================================= */

/* Fallback defaults only (Twig inline vars override these) */
:root{
  --aw-h-bg: #0b5a66;
  /* --aw-h-blur: 14px; */
  --aw-h-radius: 18px;
  --aw-h-logo: 120px;

  --aw-h-border: rgba(255,255,255,.12);
  --aw-h-line: rgba(255,255,255,.16);

  /* shadow stronger (requested) */
  --aw-h-shadow: 0 14px 34px rgba(0,0,0,.20);

  /* glass mix */
  --aw-h-glass-mix: 82%;
}

/* =========================================================
   Remove TOP NAV on Mobile/Tablet ALWAYS (no conditions)
   Keep it for Desktop
========================================================= */
@media (max-width: 1024px){
  header.store-header .top-navbar.aw-topnav{
    display:none !important;
  }
  header.store-header salla-menu[topnav]{
    display:none !important;
  }
}

/* =========================================================
   Base header wrapper
========================================================= */
.store-header.aw-header{
  background: transparent;
}

/* Sticky base */
.store-header.aw-header.aw-header--sticky{
  position: sticky;
  top: 0;
  z-index: 9998;
}

/* =========================================================
   Main pill container (aw-mainnav)
========================================================= */
.store-header.aw-header .aw-mainnav{
  position: relative;
  background: var(--aw-h-bg);
  border: 1px solid var(--aw-h-border);

  /* radius on all corners */
  border-radius: var(--aw-h-radius);
  overflow: clip;

  /* smooth */
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  will-change: transform, background;
}

/* Glass effect */
.store-header.aw-header.aw-header--glass .aw-mainnav{
  background: color-mix(in srgb, var(--aw-h-bg) var(--aw-h-glass-mix), transparent);
  -webkit-backdrop-filter: blur(var(--aw-h-blur));
  backdrop-filter: blur(var(--aw-h-blur));
}

/* Shadow stronger */
.store-header.aw-header.aw-header--shadow .aw-mainnav{
  box-shadow: var(--aw-h-shadow);
}

/* Thin line (bottom) */
.store-header.aw-header.aw-header--line .aw-mainnav{
  border-bottom: 1px solid var(--aw-h-line);
}

/* Rounded toggle (keep, but radius already applied above; this only gates it if you prefer) */
.store-header.aw-header:not(.aw-header--rounded) .aw-mainnav{
  border-radius: 0;
}

/* =========================================================
   Pill margin only on Mobile/Tablet
========================================================= */
@media (max-width: 1024px){
  .store-header.aw-header .aw-mainnav{
    margin: 10px 12px; /* like bottom nav */
  }
}

/* Desktop: let theme behave normally */
@media (min-width: 1025px){
  .store-header.aw-header .aw-mainnav{
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* =========================================================
   Main bar layout
========================================================= */
.store-header.aw-header .aw-mainbar{
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

/* Left/Right */
.store-header.aw-header .aw-mainbar__left,
.store-header.aw-header .aw-mainbar__right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 52px;
}

/* Center */
.store-header.aw-header .aw-mainbar__center{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================================================
   Logo behavior
   - center only when aw-header--logo-center exists
   - otherwise: RTL => right, LTR => left
========================================================= */
@media (max-width: 1024px){
  .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar{
    grid-template-columns: auto 1fr auto;
  }

  /* FIX: justify-content values must be flex-start / flex-end */
  html[dir="rtl"] .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__center{
    justify-content: flex-end;
  }
  html[dir="ltr"] .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__center{
    justify-content: flex-start;
  }
}

/* =========================================================
   Brand (logo)
========================================================= */
.store-header.aw-header .aw-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.store-header.aw-header .aw-brand img{
  width: auto;
  height: auto;

  /* ✅ slider controls width */
  max-width: var(--aw-h-logo);

  /* allow it to grow; don't kill it with old limits */
  max-height: 90px;

  object-fit: contain;
  display:block;
}

/* Small phones refinements (NO hard max-height that breaks slider) */
@media (max-width: 767px){
  .store-header.aw-header .aw-mainbar{
    min-height: 68px;
    padding: 8px 10px;
  }
  .store-header.aw-header .aw-brand img{
    max-height: 86px;
  }
}

/* =========================================================
   Back button
========================================================= */
.store-header.aw-header .aw-header-back{
  display:none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color: transparent;
}

.store-header.aw-header .aw-header-back i{
  font-size:18px;
  line-height:1;
}

@media (max-width: 1024px){
  .store-header.aw-header .aw-header-back[data-aw-back="1"]{
    display:inline-flex;
  }
}

/* =========================================================
   Header icons on dark bg
========================================================= */
.store-header.aw-header .header-btn__icon,
.store-header.aw-header .sicon-menu{
  color: rgba(255,255,255,.92) !important;
}

/* =========================================================
   Mobile minimal mode
   - hide items only on mobile/tablet when enabled
========================================================= */
@media (max-width: 1024px){
  /* .store-header.aw-header.aw-header--mobile-min .aw-mainbar__right{
    display:none !important;
  } */
  /* .store-header.aw-header.aw-header--mobile-min .aw-burger{
    display:none !important;
  } */

  /* Keep center stable */
  .store-header.aw-header.aw-header--mobile-min .aw-mainbar__left{
    min-width: 52px;
  }
  .store-header.aw-header.aw-header--mobile-min .aw-mainbar__right{
    min-width: 52px;
  }

  /* IMPORTANT: when NOT minimal, force right area to be visible (fix any accidental hiding) */
  .store-header.aw-header:not(.aw-header--mobile-min) .aw-mainbar__right{
    display:flex !important;
  }
  .store-header.aw-header:not(.aw-header--mobile-min) .aw-burger{
    display:inline-flex !important;
  }
}
@media (max-width: 1024px){
  /* Hide mobile burger ONLY when "Hide header icons" is enabled */
  .store-header.aw-header.aw-header--hide-icons .aw-burger{
    display:none !important;
  }
}
/* @media (max-width: 1024px){
  .store-header.aw-header.aw-header--hide-icons .aw-mainbar__right{
    display:none !important;
  }
} */
/* =========================================================
   AW Header Patch (Mobile/Tablet)
   - Correct logo alignment when NOT centered:
     RTL => logo right, back/burger left
     LTR => logo left, back/burger right
   - Keep logo perfectly centered when centered
   - Arrow direction logic per your rules
========================================================= */

@media (max-width: 1024px){

  /* -------------------------------------------------------
     1) NOT centered: turn grid into flex for correct "edge" alignment
  ------------------------------------------------------- */
  .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__left,
  .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__right{
    flex:0 0 auto;
    min-width:52px; /* keep center stable */
    display:flex;
    align-items:center;
  }

  .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__center{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    min-width:0;
  }

  /* FIX: flex-start / flex-end */
  html[dir="rtl"] .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__center{
    justify-content:flex-end !important; /* logo goes to the RIGHT */
  }
  html[dir="ltr"] .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__center{
    justify-content:flex-start !important; /* logo goes to the LEFT */
  }

  /* ORDERS (FIXED)
     NOT centered:
       RTL: LEFT (back/burger) on LEFT, LOGO on RIGHT
       LTR: LEFT (back/burger) on RIGHT, LOGO on LEFT
  */
  html[dir="rtl"] .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__left{ order:1; }
  html[dir="rtl"] .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__center{ order:2; }
  html[dir="rtl"] .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__right{ order:3; }

  html[dir="ltr"] .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__center{ order:1; }
  html[dir="ltr"] .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__right{ order:2; }
  html[dir="ltr"] .store-header.aw-header:not(.aw-header--logo-center) .aw-mainbar__left{ order:3; }


  /* -------------------------------------------------------
     2) Centered: ensure grid center stays true center
     NOTE: your requirement: when centered, button becomes RIGHT
  ------------------------------------------------------- */
  .store-header.aw-header.aw-header--logo-center .aw-mainbar{
    display:grid !important;
    grid-template-columns: 1fr auto 1fr;
  }

  .store-header.aw-header.aw-header--logo-center .aw-mainbar__center{
    justify-content:center !important;
  }

  /* Centered: place the LEFT group on the RIGHT side (both RTL & LTR) */
  /* .store-header.aw-header.aw-header--logo-center .aw-mainbar__left{
    justify-content:flex-end !important;
  }
  .store-header.aw-header.aw-header--logo-center .aw-mainbar__right{
    justify-content:flex-start !important;
  } */

  /* -------------------------------------------------------
     3) Arrow direction logic per your request
     - Centered: button RIGHT => arrow RIGHT
     - Not centered:
        RTL: button LEFT => arrow LEFT
        LTR: button RIGHT => arrow RIGHT
  ------------------------------------------------------- */

  /* always allow rotate */
  .store-header.aw-header .aw-header-back i{
    display:inline-block;
    transition: transform .15s ease;
    transform-origin: 50% 50%;
  }

  /* 1) CENTERED => RIGHT arrow */
  .store-header.aw-header.aw-header--logo-center .aw-header-back i{
    transform: rotate(180deg); /* points right */
  }

  /* 2) NOT centered */
  html[dir="rtl"] .store-header.aw-header:not(.aw-header--logo-center) .aw-header-back i{
    transform: none; /* points left */
  }
  html[dir="ltr"] .store-header.aw-header:not(.aw-header--logo-center) .aw-header-back i{
    transform: rotate(180deg); /* points right */
  }
}
/* ==========================================
   AW Footer (Scoped) — Match Header Glass 1:1
   Scope: .aw-footer فقط
   Desktop: pill glass using SAME header vars
   Mobile: لا نغيّر شي (desktop block hidden)
========================================== */

.aw-footer{
  /* ✅ Use header tokens as source of truth */
  --aw-f-bg: var(--aw-h-bg, #0c5a66);
  --aw-f-glass-mix: var(--aw-h-glass-mix, 38%);
  --aw-f-blur: var(--aw-h-blur, 6px);
  --aw-f-border: var(--aw-h-border, rgba(255,255,255,.14));
  --aw-f-line: var(--aw-h-line, rgba(255,255,255,.14));
  --aw-f-radius: var(--aw-h-radius, 28px);

  --aw-f-text: #ffffff;
  --aw-f-muted: rgba(255,255,255,.72);

  --aw-gap: 18px;
}

/* -----------------------
   Desktop footer area
----------------------- */
.aw-footer__desktop{
  padding: 18px 0 14px;
}

/* ✅ Hide heavy footer on mobile (keep bottom only) */
@media (max-width: 1024px){
  .aw-footer__desktop{ display:none !important; }
}

/* =========================
   Pill wrapper (exact header glass recipe)
========================= */
.aw-footer__pill{
  border-radius: var(--aw-f-radius);
  padding: 18px 18px;

  /* ✅ SAME as header glass */
  background: color-mix(in srgb, var(--aw-f-bg) var(--aw-f-glass-mix), transparent);
  -webkit-backdrop-filter: blur(var(--aw-f-blur));
  backdrop-filter: blur(var(--aw-f-blur));

  border: 1px solid var(--aw-f-border);
  overflow: clip;

  /* ✅ keep it subtle like header */
  box-shadow: 0 16px 44px rgba(0,0,0,.14);

  color: var(--aw-f-text);
}

/* Optional: add line like header--line if you want a crisp edge */
.aw-footer__pill.aw-footer--line{
  border: 1px solid var(--aw-f-line);
}

/* Grid (Compact 3 cols) */
.aw-footer__grid{
  display: grid;
  grid-template-columns: 1.25fr .95fr 1.05fr;
  gap: var(--aw-gap);
  align-items: start;
}

/* Titles (Links column only) */
.aw-footer__title{
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 900;
  color: var(--aw-f-text);
}

/* Brand */
.aw-footer__brandLink{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.aw-footer__brandName{
  margin: 0;
  font-weight: 900;
  font-size: 18px;
  color: var(--aw-f-text);
}
.aw-footer__brandDesc{
  margin-top: 10px;
  color: var(--aw-f-muted);
  line-height: 1.7;
  max-width: 52ch;
}

/* Social */
.aw-footer__social{ margin-top: 12px; }

/* Trust row + VAT */
.aw-footer__trustRow{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.aw-footer__vat{
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.aw-footer__vatImg img{
  width: 40px;
  height: 50px;
  border-radius: 10px;
  object-fit: cover;
  opacity: .95;
  transition: opacity .15s ease;
}
.aw-footer__vatImg:hover img{ opacity: 1; }

.aw-footer__vatLabel{
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--aw-f-muted);
}
.aw-footer__vatNumber{
  font-size: 13px;
  color: var(--aw-f-text);
}

/* Menu links */
.aw-footer__menu a{
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
  text-decoration: none;
  color: var(--aw-f-text);
  opacity: .9;
}
.aw-footer__menu a:hover{ opacity: 1; }

/* Side column */
.aw-footer__side{
  display: grid;
  gap: 14px;
}

/* ✅ Make Salla components readable on glass (light touch only) */
.aw-footer salla-contacts,
.aw-footer salla-apps-icons,
.aw-footer salla-menu,
.aw-footer salla-social{
  color: var(--aw-f-text);
}

/* =========================
   Bottom bar (mobile + desktop)
   (Keep minimal; don't change mobile logic)
========================= */
.aw-footer__bottom{
  border-top: 1px solid rgba(0,0,0,.07);
  padding: 14px 0;
}

.aw-footer__bottomInner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.aw-footer__copyright{
  font-size: 13px;
  color: rgba(17,24,39,.70);
}

.aw-footer__payments{
  display: flex;
  align-items: center;
}

/* Mobile: center everything (as you already want) */
@media (max-width: 1024px){
  .aw-footer__bottom{
    padding: 14px 0 18px;
  }
  .aw-footer__bottomInner{
    justify-content: center;
    text-align: center;
    gap: 10px;
  }
  .aw-footer__payments{
    width: 100%;
    justify-content: center;
  }
}

/* Safety space so bottom-nav doesn't collide */
@media (max-width: 1024px){
  .aw-footer{
    padding-bottom: 82px; 
  }
}

/* =========================
   Alwaha Theme Options UI
   (Dashboard Theme Options)
   ========================= */

/* 0) Debug (احذفه بعد التأكد) */
/* html { outline: 6px solid red !important; } */

/* 1) Section cards: كل كروت الأقسام اللي layoutid يبدأ بـ section_ */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"]{
  /* كرت أفخم */
  background: linear-gradient(135deg, #0b5a66, #084650) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 22px !important;
  padding: 16px 18px !important;
  margin: 14px 0 10px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;

  /* ألوان عامة داخل الكرت */
  color: #fff !important;

  /* مهم: نخلي النصوص اللي سلة تسميها dark تصير بيضاء عبر متغيرات HSL */
  --dark-100: 0 0% 100%;
  --dark-200: 0 0% 100%;
  --tw-text-opacity: 1;

  /* مهم: نتحكم بألوان التوجل اللي داخله (Shadow DOM) */
  --primary: 189 100% 22%;     /* نفس روح #0b5a66 (تقريب HSL) */
  --gray-400: 0 0% 100%;       /* نخلي الخلفية الفاتحة للتوجل */
}

/* Hover بسيط */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"]:hover{
  transform: translateY(-1px);
  transition: .2s ease;
}

/* 2) محاذاة صف الكرت: نخلي المحتوى والسويتش في منتصف الارتفاع */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] > div > div.flex{
  align-items: center !important;
}

/* 3) عنوان ووصف القسم (بعض النسخ تظهرها داخل label/ small خارج shadow) */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"]
.field-wrapper__label .flex{
  color:#fff !important;
  font-weight: 800 !important;
}

.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"]
.field-wrapper__label small,
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] small{
  color: rgba(255,255,255,.82) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}

/* 4) Toggle positioning + “فخامة” من خارج الـ Shadow */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] s-toggle{
  /* نخليه متوسّط عموديًا */
  display: flex !important;
  align-items: center !important;

  /* نخليه دايمًا على اليسار (RTL) */
  margin-inline-start: auto !important;

  /* فخامة بسيطة بدون الدخول في shadow */
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.22));
  transform: translateY(0);
}

/* 5) تحسين “لون” وصف السلة اللي يجي غالبًا من text-dark-100 (Shadow) */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"]{
  /* هذا المتغير سلة تستخدمه كثير لنصوص داخل components */
  --dark: 0 0% 100%;
}

/* 6) (اختياري) لو تبغى السويتش أكبر شوي بدون لمس shadow */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] s-toggle .s-toggle,
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] s-toggle{
  transform: scale(1.03);
  transform-origin: left center;
}
/* === Fix: description inside s-toggle (Shadow DOM) still gray === */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] s-toggle{
  /* نصوص داخل shadow تعتمد على dark-100 / dark-200 */
  --dark-100: 0 0% 100% !important;
  --dark-200: 0 0% 100% !important;
  --dark-300: 0 0% 100% !important;
  --tw-text-opacity: 1 !important;

  /* أحيانًا تستخدم tokens مختلفة */
  --color-dark-100: #fff !important;
  --color-dark-200: #fff !important;
}

/* احتياط: لو الوصف جاي بكلاس Tailwind خارج shadow */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] .text-dark-100,
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] .text-dark-200{
  color: rgba(255,255,255,.85) !important;
}

/* =========================
   Fix desc color inside s-toggle Shadow DOM
   ========================= */

/* 1) غصب المتغيرات على نفس عنصر s-toggle */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] s-toggle.s-toggle{
  --dark-100: 0 0% 100% !important;          /* أبيض */
  --tw-text-opacity: 1 !important;
}

/* 2) احتياط: لو سلة تستخدم dark-200/300 لاحقاً */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] s-toggle.s-toggle{
  --dark-200: 0 0% 100% !important;
  --dark-300: 0 0% 100% !important;
}

/* 3) ولو تبغى الوصف أفتح شوي من العنوان (مو أبيض صافي)
   نستخدم متغير إضافي ونطبقه على s-toggle */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] s-toggle.s-toggle{
  --aw-desc: 0 0% 88%;
}

/* للأسف ما نقدر نمسك small داخل الشادو مباشرة، بس نقدر نخلي dark-100 = aw-desc */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] s-toggle.s-toggle{
  --dark-100: var(--aw-desc) !important;     /* يصير الوصف 88% بدل 100% */
}

/* ===== Force desc/title colors for s-toggle Shadow DOM ===== */

/* ✅ إجبار لون وصف الـ s-toggle (small.text-dark-100) يكون أبيض */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] s-toggle{
  --dark-100: 0 0% 100% !important;   /* يحوّل hsl إلى أبيض */
  --tw-text-opacity: 1 !important;
}

/* احتياط: لو الوصف ياخذ dark-200/300 في بعض الحالات */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch[layoutid^="section_"] s-toggle{
  --dark-200: 0 0% 100% !important;
  --dark-300: 0 0% 100% !important;
}

/* =========================
   Fix: Section Options Control card not matching layoutid
   ========================= */

/* نفس ستايل كروت الأقسام لكن بالاستهداف عبر id */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch:has(#section_options_control_enabled){
  background: linear-gradient(135deg, #0b5a66, #084650) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 22px !important;
  padding: 16px 18px !important;
  color: #fff !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 14px 0 10px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
}

/* title */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch:has(#section_options_control_enabled)
.s-toggle__info h4{
  color:#fff !important;
  font-weight:800 !important;
}

/* description */
.salla-form-builder-theme-options-form
.field-wrapper.form--boolean-switch:has(#section_options_control_enabled)
.s-toggle__info small{
  color: rgba(255,255,255,.82) !important;
  opacity: 1 !important;
}

/* =========================================================
   Fallback: اجعل كروت الأقسام تُبنى على s-toggle نفسه
   (ينقذنا لو تغيّر layoutid / classes في field-wrapper)
   ========================================================= */

.salla-form-builder-theme-options-form
s-toggle.s-toggle[id^="section_"]{
  display: block !important;
  width: 100% !important;

  background: linear-gradient(135deg, #0b5a66, #084650) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 22px !important;
  padding: 16px 18px !important;
  margin: 14px 0 10px !important;

  color: #fff !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
}

/* ترتيب محتوى الـ label داخل s-toggle: سويتش يسار + نص يمين */
.salla-form-builder-theme-options-form
s-toggle.s-toggle[id^="section_"] label{
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

/* خلي النص يتمدد */
.salla-form-builder-theme-options-form
s-toggle.s-toggle[id^="section_"] .s-toggle__info{
  flex: 1 !important;
  min-width: 0 !important;
}

/* العنوان */
.salla-form-builder-theme-options-form
s-toggle.s-toggle[id^="section_"] .s-toggle__info h4{
  color:#fff !important;
  font-weight: 800 !important;
}

/* الوصف */
.salla-form-builder-theme-options-form
s-toggle.s-toggle[id^="section_"] .s-toggle__info small{
  color: rgba(255,255,255,.82) !important;
  opacity: 1 !important;
}

/* hover */
.salla-form-builder-theme-options-form
s-toggle.s-toggle[id^="section_"]:hover{
  transform: translateY(-1px);
  transition: .2s ease;
}
/* ===== AW Floating Buttons (WhatsApp + Top) ===== */

:root{
  --aw-floating-desktop-bottom: 22px;
  --aw-floating-desktop-side: 14px;

  /* ✅ Mobile lift فوق البوتوم ناف */
  --aw-bottom-nav-h: 150px;       /* عدّلها لو تبغى */
  --aw-floating-gap: 14px;
}

.aw-floating{
  position: fixed;
  z-index: 99999;

  /* ✅ default desktop position */
  bottom: var(--aw-floating-desktop-bottom);
  right: var(--aw-floating-desktop-side);
  left: auto;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* left/right modifiers */
.aw-floating.is-left{
  left: var(--aw-floating-desktop-side);
  right: auto;
}
.aw-floating.is-right{
  right: var(--aw-floating-desktop-side);
  left: auto;
}

/* The FAB base */
.aw-fab{
  width: 46px !important;
  height: 46px !important;

  /* ✅ دائري بالكامل */
  border-radius: 9999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;

  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
}

.aw-fab i{
  font-size: 22px;
  line-height: 1;
}

/* WhatsApp button */
.aw-fab--wa{
  background: #25D366;
  color: #fff;
}

/* Back to top */
.aw-fab--top{
  background: #0b5a66;
  color: #fff;
  opacity: .92;
}

.aw-fab--top.is-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

/* ✅ Mobile: lift above bottom nav + safe area */
@media (max-width: 1024px){
  .aw-floating{
    bottom: calc(
      var(--aw-bottom-nav-h) +
      var(--aw-floating-gap) +
      env(safe-area-inset-bottom, 0px)
    ) !important;
  }
}

/* ✅ Desktop fallback (لو ما انضاف is-left/is-right لأي سبب) */
@media (min-width: 1025px){
  .aw-floating:not(.is-left):not(.is-right){
    right: var(--aw-floating-desktop-side) !important;
    left: auto !important;
    bottom: var(--aw-floating-desktop-bottom) !important;
  }
}

/* ===== /AW Floating Buttons ===== */

/* ===== AW Footer Mobile Note ===== */
.aw-footer__mobileNote{
  display: none;
}

@media (max-width: 1024px){

  /* نخلي البوتوم يترتب عمودياً في الجوال */
  .aw-footer__bottomInner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  .aw-footer__mobileNote{
    display: block;
    width: 100%;
    font-size: 13px;
    line-height: 1.7;
    opacity: .9;
    margin-bottom: 4px;
    order: 1;
  }

  .aw-footer__copyright{
    order: 2;
  }

  .aw-footer__payments{
    order: 3;
  }
}
/* ===== /AW Footer Mobile Note ===== */

/* ===== AW BottomNav Visibility Fallback (no inline display) ===== */
#awBottomNavMount{ display:none; }

@media (max-width: 1024px){
  #awBottomNavMount[data-enabled="1"][data-visibility="tablet"]{ display:block; }
}
@media (max-width: 767px){
  #awBottomNavMount[data-enabled="1"][data-visibility="mobile"]{ display:block; }
}