/* =========================================================
   ADDVIBES — PREMIUM MOBILE MENU CARD
   Global Header CSS
   Logo ratio used: 900 × 506
========================================================= */

:root{
  --av-menu-navy:#071426;
  --av-menu-navy-2:#0B1C33;
  --av-menu-warm:#F3E5CF;
  --av-menu-muted:rgba(243,229,207,.68);
  --av-menu-line:rgba(243,229,207,.12);
  --av-menu-cyan:#35D6FF;
  --av-menu-violet:#8D63E8;
  --av-menu-pink:#F34FAE;
  --av-menu-orange:#FF7A00;
}

/* نفس كارت المنيو الموجود في EasyOrders */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0{
  position:relative !important;
  isolation:isolate;
  overflow:hidden auto !important;

  width:min(88vw,360px) !important;
  max-width:360px !important;
  min-height:100dvh;

  padding:
    calc(118px + env(safe-area-inset-top))
    16px
    calc(28px + env(safe-area-inset-bottom))
    !important;

  border-left:1px solid rgba(243,229,207,.12);
  border-radius:26px 0 0 26px;

  background:
    radial-gradient(circle at 12% 12%,rgba(53,214,255,.13),transparent 29%),
    radial-gradient(circle at 88% 28%,rgba(243,79,174,.12),transparent 30%),
    radial-gradient(circle at 52% 96%,rgba(255,122,0,.10),transparent 34%),
    linear-gradient(160deg,#0A1A30 0%,#071426 52%,#050D19 100%)
    !important;

  color:var(--av-menu-warm) !important;

  box-shadow:
    -24px 0 70px rgba(0,0,0,.50),
    inset 1px 0 0 rgba(255,255,255,.04)
    !important;

  -webkit-backdrop-filter:blur(20px) saturate(125%);
  backdrop-filter:blur(20px) saturate(125%);

  scrollbar-width:thin;
  scrollbar-color:rgba(53,214,255,.42) transparent;
}

/* الشعار الرئيسي أعلى الكارت */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0::after{
  content:"";

  position:absolute;
  z-index:3;
  top:calc(24px + env(safe-area-inset-top));
  left:50%;

  width:148px;
  aspect-ratio:900 / 506;

  transform:translateX(-50%);

  background:
    url("https://files.easy-orders.net/1785801109199502938.png")
    center / contain no-repeat;

  filter:
    drop-shadow(0 0 14px rgba(255,122,0,.20))
    drop-shadow(0 0 20px rgba(53,214,255,.10));

  pointer-events:none;
}

/* Watermark كبير داخل الخلفية */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0::before{
  content:"";

  position:fixed;
  z-index:-1;
  left:50%;
  top:52%;

  width:min(290px,72vw);
  aspect-ratio:900 / 506;

  transform:
    translate(-50%,-50%)
    rotate(-11deg)
    scale(1.08);

  background:
    url("https://files.easy-orders.net/1785801109199502938.png")
    center / contain no-repeat;

  opacity:.045;
  filter:grayscale(1) brightness(2.1);

  pointer-events:none;
}

/* زر الإغلاق */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> div.flex.justify-end.px-4.pt-5{
  position:absolute;
  z-index:5;
  top:calc(16px + env(safe-area-inset-top));
  right:14px;

  padding:0 !important;
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> div.flex.justify-end.px-4.pt-5 button{
  width:42px;
  height:42px;

  padding:0 !important;

  border:1px solid rgba(243,229,207,.16);
  border-radius:14px !important;

  background:rgba(7,20,38,.70);

  color:var(--av-menu-warm) !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    transform .20s ease,
    border-color .20s ease,
    background .20s ease;
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> div.flex.justify-end.px-4.pt-5 button:active{
  transform:scale(.94);
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> div.flex.justify-end.px-4.pt-5 button:hover{
  border-color:rgba(53,214,255,.38);
  background:rgba(11,28,51,.94);
}

/* إزالة الـdivide الافتراضي */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
.divide-y,
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
.divide-y > :not([hidden]) ~ :not([hidden]){
  border-color:transparent !important;
}

/* كل مجموعة */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y{
  position:relative;
  z-index:2;

  margin:0 0 16px;
  padding:18px 14px !important;

  border:1px solid var(--av-menu-line);
  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  box-shadow:
    0 16px 36px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);

  overflow:hidden;
}

/* شريط Accent أعلى الكارت */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y::before{
  content:"";

  position:absolute;
  inset:0 0 auto 0;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--av-menu-cyan) 18%,
      var(--av-menu-violet) 42%,
      var(--av-menu-pink) 68%,
      var(--av-menu-orange) 88%,
      transparent 100%
    );

  opacity:.78;
}

/* عناوين الأقسام والصفحات */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y > p{
  position:relative;

  margin:0 0 13px !important;
  padding:0 0 11px !important;

  color:var(--av-menu-warm) !important;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.2;

  letter-spacing:.04em;

  border-bottom:1px solid rgba(243,229,207,.10);
}

/* نقطة مضيئة قبل العنوان */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y > p::before{
  content:"";

  display:inline-block;

  width:8px;
  height:8px;

  margin-inline-end:8px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      var(--av-menu-cyan),
      var(--av-menu-pink),
      var(--av-menu-orange)
    );

  box-shadow:
    0 0 10px rgba(53,214,255,.38),
    0 0 16px rgba(243,79,174,.24);
}

/* عناصر اللينكات */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y > div{
  margin:7px 0 0;

  padding:0 !important;

  border:0 !important;
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a{
  position:relative;

  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  min-height:48px;

  padding:0 14px !important;

  border:1px solid rgba(243,229,207,.08);
  border-radius:15px;

  background:rgba(255,255,255,.025);

  color:rgba(243,229,207,.86) !important;
  text-decoration:none !important;

  font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;
  font-size:13px !important;
  font-weight:650 !important;
  line-height:1.25;

  transition:
    transform .20s ease,
    color .20s ease,
    border-color .20s ease,
    background .20s ease,
    box-shadow .20s ease;
}

/* سهم صغير */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a::after{
  content:"↗";

  flex:0 0 auto;

  color:rgba(243,229,207,.38);

  font-size:13px;

  transition:
    transform .20s ease,
    color .20s ease;
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a:hover,
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a:focus-visible{
  transform:translateX(-2px);

  border-color:rgba(53,214,255,.24);

  background:
    linear-gradient(
      90deg,
      rgba(53,214,255,.08),
      rgba(141,99,232,.08),
      rgba(243,79,174,.06)
    );

  color:#FFF5E7 !important;

  box-shadow:
    0 10px 22px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.04);

  outline:none;
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a:hover::after,
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a:focus-visible::after{
  transform:translate(2px,-2px);
  color:var(--av-menu-orange);
}

/* Dot مختلف لكل كاتيجوري */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a::before{
  content:"";

  width:8px;
  height:8px;

  flex:0 0 8px;

  margin-inline-end:2px;

  border-radius:999px;

  background:rgba(243,229,207,.22);

  box-shadow:0 0 0 4px rgba(243,229,207,.035);
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a[href*="/Frames"]::before{
  background:var(--av-menu-cyan);
  box-shadow:0 0 11px rgba(53,214,255,.42);
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a[href*="/Acrylic"]::before{
  background:#E8C98F;
  box-shadow:0 0 11px rgba(232,201,143,.40);
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a[href*="/Neon"]::before{
  background:var(--av-menu-pink);
  box-shadow:0 0 11px rgba(243,79,174,.42);
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a[href*="/Allproducts"]::before{
  background:var(--av-menu-orange);
  box-shadow:0 0 11px rgba(255,122,0,.42);
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a[href*="/pegboards"]::before{
  background:var(--av-menu-violet);
  box-shadow:0 0 11px rgba(141,99,232,.42);
}

/* سياسات المتجر أهدى بصرياً */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
a[href*="/pages/"]{
  min-height:46px;

  color:rgba(243,229,207,.72) !important;

  font-size:12px !important;
}

/* سكرول بار */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0::-webkit-scrollbar{
  width:5px;
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0::-webkit-scrollbar-track{
  background:transparent;
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0::-webkit-scrollbar-thumb{
  border-radius:999px;

  background:
    linear-gradient(
      var(--av-menu-cyan),
      var(--av-menu-pink),
      var(--av-menu-orange)
    );
}

/* موبايلات صغيرة */
@media (max-width:370px){
  body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0{
    width:91vw !important;
    padding-inline:12px !important;
  }

  body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0::after{
    width:132px;
  }

  body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
  > .divide-y{
    padding-inline:11px !important;
  }
}

/* تقليل الحركة لمن يفضل ذلك */
@media (prefers-reduced-motion:reduce){
  body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0 *,
  body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0 *::before,
  body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0 *::after{
    transition:none !important;
  }
}


/* =========================================================
   ADDVIBES — MOBILE MENU SCROLL HARD FIX
   Constrain the drawer to the viewport so overflow-y can work.
========================================================= */

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0{
  height:100dvh !important;
  max-height:100dvh !important;
  min-height:0 !important;

  overflow-x:hidden !important;
  overflow-y:auto !important;

  overscroll-behavior-y:contain !important;
  -webkit-overflow-scrolling:touch;

  touch-action:pan-y !important;

  scrollbar-gutter:stable;
}

/* iOS / older mobile fallback */
@supports not (height:100dvh){
  body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0{
    height:100vh !important;
    max-height:100vh !important;
  }
}

/* Keep fixed/absolute decorative layers from blocking touch scrolling */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0::before,
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0::after{
  pointer-events:none !important;
}


/* =========================================================
   ADDVIBES — INNER GROUP SCROLL FIX
   Make "الأقسام" and "الصفحات" scrollable inside their cards.
========================================================= */

/* Every top-level group card can scroll vertically */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y{
  overflow-x:hidden !important;
  overflow-y:auto !important;

  overscroll-behavior-y:contain !important;
  -webkit-overflow-scrolling:touch;

  touch-action:pan-y !important;

  scrollbar-width:thin;
  scrollbar-color:rgba(53,214,255,.38) transparent;
}

/* الأقسام */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y.py-4{
  max-height:58dvh !important;
}

/* الصفحات */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y.pb-8{
  max-height:30dvh !important;
}

/* Small premium scrollbar inside the cards */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y::-webkit-scrollbar{
  width:4px;
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y::-webkit-scrollbar-track{
  background:transparent;
}

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:
    linear-gradient(
      var(--av-menu-cyan),
      var(--av-menu-pink),
      var(--av-menu-orange)
    );
}

/* Mobile fallback */
@supports not (height:100dvh){
  body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
  > .divide-y.py-4{
    max-height:58vh !important;
  }

  body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
  > .divide-y.pb-8{
    max-height:30vh !important;
  }
}


/* =========================================================
   ADDVIBES — FINAL MOBILE MENU TITLE FLOW FIX
   Titles scroll normally with their own card content.
========================================================= */

body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y > p{
  position:relative !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  z-index:2 !important;

  margin:0 0 13px !important;
  padding:0 0 11px !important;

  background:transparent !important;

  transform:none !important;
}

/* Keep inner scrolling working without overlaying the first links */
body div.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto.bg-white.pb-12.shadow-xl.translate-x-0
> .divide-y{
  scroll-padding-top:0 !important;
}