/* ═══════════════════════════════════════════════════════════════
   v33.22 UI POLISH — Navbar + Drawer premium upgrade
   (sirf visual: shadow/gradient/transition — koi layout change nahi)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── HEADER (frosted premium) ─────────── */
header.mx-head {
  background: linear-gradient(180deg, #ffffff 0%, #fffdfb 100%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.7) !important;
  backdrop-filter: blur(14px) saturate(1.7) !important;
  box-shadow: 0 1px 2px rgba(91,42,14,.05), 0 8px 24px -8px rgba(248,90,0,.16) !important;
  border-bottom-color: #ffe8d5 !important;
}
/* soft gradient accent edge (flat border ki jagah — glow feel) */
header.mx-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent 4%, rgba(248,90,0,.38) 30%, rgba(251,146,60,.30) 62%, transparent 96%);
  pointer-events: none;
}
/* brand logo icon — deeper gradient + glow */
header.mx-head > div:first-child > div:first-child {
  background: linear-gradient(135deg, #e64e00 0%, #f97316 55%, #fb923c 100%) !important;
  box-shadow: 0 4px 12px -2px rgba(248,90,0,.45), 0 2px 4px rgba(248,90,0,.25), inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
header.mx-head > div:first-child > div:first-child:active { transform: scale(.93); }
/* brand text */
header.mx-head > div:first-child > div:last-child > div:first-child { letter-spacing: -.02em; }
header.mx-head > div:first-child > div:last-child > div:last-child { color: #d97706; }

/* AI sparkle button — filled soft gradient */
header.mx-head a[aria-label="AI Support"] {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
  border-color: #fdba74 !important;
  color: #ea580c !important;
  box-shadow: 0 3px 10px -3px rgba(248,90,0,.28), inset 0 1px 0 #fff !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
header.mx-head a[aria-label="AI Support"]:hover {
  transform: translateY(-1px); filter: brightness(1.04);
  box-shadow: 0 6px 16px -4px rgba(248,90,0,.38), inset 0 1px 0 #fff !important;
}
header.mx-head a[aria-label="AI Support"]:active { transform: scale(.92); }

/* hamburger button — crisper */
#mxMenuBtn {
  box-shadow: 0 2px 8px -3px rgba(91,42,14,.14), inset 0 1px 0 #fff !important;
  border-color: #e8e3dc !important;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
#mxMenuBtn:hover { box-shadow: 0 5px 14px -5px rgba(248,90,0,.30) !important; }
#mxMenuBtn:active { transform: scale(.92); }

/* ─────────── DRAWER (premium menu) ─────────── */
#mxDrawerBackdrop { background: rgba(15,10,5,.48) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#mxDrawer {
  box-shadow: -18px 0 50px -12px rgba(91,42,14,.30), -2px 0 12px -4px rgba(248,90,0,.10) !important;
  border-left: 0 !important;
}
/* drawer profile header — richer gradient */
#mxDrawer > div:first-child {
  background: linear-gradient(150deg, #ffffff 0%, #fff7ed 70%, #ffedd5 100%) !important;
  box-shadow: 0 6px 18px -8px rgba(248,90,0,.20);
}
/* avatar — glow + ring */
#mxDrawer > div:first-child .w-10.h-10 {
  background: linear-gradient(135deg, #e64e00, #fb923c) !important;
  box-shadow: 0 4px 12px -2px rgba(248,90,0,.45), 0 0 0 3px rgba(255,255,255,.9) !important;
}
/* wallet chip — elevated */
#mxDrawer > div:first-child a.mt-3 {
  background: linear-gradient(135deg, #ffffff, #fff7ed) !important;
  border-color: #fdba74 !important;
  box-shadow: 0 6px 16px -6px rgba(248,90,0,.25), inset 0 1px 0 #fff !important;
  transition: transform .16s ease, box-shadow .16s ease;
}
#mxDrawer > div:first-child a.mt-3:hover { transform: translateY(-1px); box-shadow: 0 9px 22px -8px rgba(248,90,0,.35), inset 0 1px 0 #fff !important; }

/* nav items — icon chips + hover lift */
#mxDrawer nav a {
  margin: 1px 5px; border-radius: 13px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
#mxDrawer nav a > span:first-child {
  width: 30px !important; height: 30px !important; border-radius: 9px;
  background: #fff7ed; color: #ea580c;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px -3px rgba(248,90,0,.25);
  transition: background-color .18s ease, color .18s ease;
}
#mxDrawer nav a:hover {
  background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
  color: #c2410c !important;
  transform: translateX(3px);
  box-shadow: 0 6px 16px -8px rgba(248,90,0,.30);
}
#mxDrawer nav a:hover > span:first-child { background: #ffedd5; color: #c2410c; }
/* active item — filled warm pill */
#mxDrawer nav a.bg-orange-50 {
  background: linear-gradient(135deg, #ffedd5, #fed7aa) !important;
  color: #c2410c !important;
  box-shadow: 0 6px 18px -8px rgba(248,90,0,.38), inset 0 1px 0 #fff;
}
#mxDrawer nav a.bg-orange-50 > span:first-child { background: #fb923c; color: #fff; }

/* logout footer */
#mxDrawer > div:last-child { box-shadow: 0 -6px 18px -10px rgba(91,42,14,.12); }
#mxDrawer > div:last-child a {
  box-shadow: 0 2px 8px -4px rgba(91,42,14,.12), inset 0 1px 0 #fff;
}

/* drawer scrollbar — subtle */
#mxDrawer::-webkit-scrollbar { width: 4px; }
#mxDrawer::-webkit-scrollbar-thumb { background: rgba(248,90,0,.25); border-radius: 4px; }
#mxDrawer::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  header.mx-head *, #mxDrawer, #mxDrawer * { transition: none !important; transform: none !important; }
}