/* ULITIN DRAWER V1 */
@media (max-width: 820px) {
  body .topbar.marketplaceHeader .mobileNavDrawer,
  body .marketplaceHeader .mobileNavDrawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(360px, 90vw) !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 20px 18px 30px !important;
    display: grid !important;
    align-content: start !important;
    gap: 5px !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-left: 1px solid #e9e8f6 !important;
    border-radius: 20px 0 0 20px !important;
    box-shadow: -18px 0 60px rgba(24, 20, 65, .18) !important;
    z-index: 9999 !important;
    transform: translateX(110%) !important;
    transition: transform .24s ease !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.mobileNavOpen .topbar.marketplaceHeader .mobileNavDrawer,
  body.mobileNavOpen .marketplaceHeader .mobileNavDrawer {
    display: grid !important;
    right: 0 !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .marketplaceHeader .mobileDrawerHeader {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 15px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #eaeaf4 !important;
  }

  .marketplaceHeader .mobileDrawerHeader b {
    font-size: 21px !important;
    color: #222044 !important;
    font-weight: 850 !important;
  }

  .marketplaceHeader .mobileDrawerHeader button {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: #f3f2fa !important;
    color: #464164 !important;
    font-size: 25px !important;
  }

  .marketplaceHeader .mobileNavDrawer > a:not(.mobileDrawerPost),
  .marketplaceHeader .mobileNavDrawer > button:not(.mobileDrawerHeader button) {
    display: flex !important;
    align-items: center !important;
    min-height: 43px !important;
    padding: 10px 13px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: #29304a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  .marketplaceHeader .mobileNavDrawer > a:hover,
  .marketplaceHeader .mobileNavDrawer > button:hover {
    background: #f3f1ff !important;
    color: #5144e8 !important;
  }

  .marketplaceHeader .mobileNavDrawer > .mobileDrawerPost {
    display: flex !important;
    justify-content: center !important;
    min-height: 47px !important;
    margin: 3px 0 8px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg,#5145ed,#7953f5) !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    box-shadow: 0 7px 17px rgba(85,70,230,.18) !important;
  }

  .marketplaceHeader .mobileDrawerLanguage {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    margin: 4px 0 10px !important;
    border: 1px solid #e8e7f5 !important;
    border-radius: 12px !important;
    background: #f8f8ff !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  .marketplaceHeader .mobileDrawerLanguage select {
    width: auto !important;
    max-width: 165px !important;
    height: 35px !important;
    padding: 0 8px !important;
    border: 1px solid #dedcf3 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #39318e !important;
    font-size: 13px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketplaceHeader .mobileNavDrawer {
    transition: none !important;
  }
}


/* ULITIN DESKTOP DRAWER V2 */
@media (min-width: 821px) {
  body .topbar.marketplaceHeader .mobileNavDrawer,
  body .marketplaceHeader .mobileNavDrawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 350px !important;
    max-width: 90vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 22px 20px 32px !important;
    display: grid !important;
    align-content: start !important;
    gap: 5px !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-left: 1px solid #e9e8f6 !important;
    border-radius: 20px 0 0 20px !important;
    box-shadow: -20px 0 65px rgba(22, 19, 66, .20) !important;
    z-index: 9999 !important;
    transform: translateX(110%) !important;
    transition: transform .25s ease !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.mobileNavOpen .topbar.marketplaceHeader .mobileNavDrawer,
  body.mobileNavOpen .marketplaceHeader .mobileNavDrawer {
    display: grid !important;
    right: 0 !important;
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* COMMON DRAWER APPEARANCE */
body .marketplaceHeader .mobileDrawerHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 14px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid #ebeaf5 !important;
}

body .marketplaceHeader .mobileDrawerHeader b {
  font-size: 22px !important;
  font-weight: 850 !important;
  color: #242044 !important;
}

body .marketplaceHeader .mobileDrawerHeader button {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #f2f1fa !important;
  color: #45415f !important;
  font-size: 25px !important;
}

body .marketplaceHeader .mobileNavDrawer > a:not(.mobileDrawerPost),
body .marketplaceHeader .mobileNavDrawer > button[data-open-ai-cat] {
  display: flex !important;
  align-items: center !important;
  min-height: 43px !important;
  padding: 10px 13px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: #29304a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

body .marketplaceHeader .mobileNavDrawer > a:hover,
body .marketplaceHeader .mobileNavDrawer > button[data-open-ai-cat]:hover {
  background: #f3f1ff !important;
  color: #5144e8 !important;
}

body .marketplaceHeader .mobileNavDrawer > .mobileDrawerPost {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 48px !important;
  padding: 12px !important;
  margin: 4px 0 8px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg,#5145ed,#7953f5) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  box-shadow: 0 7px 17px rgba(85,70,230,.18) !important;
}

body .marketplaceHeader .mobileDrawerLanguage {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  margin: 4px 0 10px !important;
  border: 1px solid #e8e7f5 !important;
  border-radius: 12px !important;
  background: #f8f8ff !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}

body .marketplaceHeader .mobileDrawerLanguage select {
  width: auto !important;
  max-width: 165px !important;
  height: 35px !important;
  padding: 0 8px !important;
  border: 1px solid #dedcf3 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #39318e !important;
  font-size: 13px !important;
}


/* ULITIN DRAWER LAYER FIX V3 */

/* Raise the whole header stacking context while drawer is open */
body.mobileNavOpen .marketplaceHeader,
body.mobileNavOpen .topbar.marketplaceHeader {
  z-index: 2147483000 !important;
}

/* Put the drawer above every header button */
body.mobileNavOpen .marketplaceHeader .mobileNavDrawer,
body.mobileNavOpen .topbar.marketplaceHeader .mobileNavDrawer {
  position: fixed !important;
  z-index: 2147483002 !important;
  isolation: isolate !important;
}

/* Keep header controls below drawer */
body.mobileNavOpen .marketplaceHeader .marketHeaderTop,
body.mobileNavOpen .marketplaceHeader .headerActions,
body.mobileNavOpen .marketplaceHeader .mobileMenuButton {
  z-index: auto !important;
}

/* Backdrop covers the rest of the page */
body.mobileNavOpen::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(17, 20, 43, .46) !important;
  backdrop-filter: blur(3px) !important;
  z-index: 2147482999 !important;
  pointer-events: auto !important;
}

/* Prevent background scrolling */
body.mobileNavOpen {
  overflow: hidden !important;
}


/* ULITIN DRAWER DESIGN V4 */
body .marketplaceHeader .mobileNavDrawer {
  box-sizing: border-box !important;
  padding: 22px 18px 32px !important;
  gap: 4px !important;
}

body .marketplaceHeader .mobileDrawerHeader {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 54px !important;
  padding: 0 0 14px !important;
  margin: 0 0 12px !important;
  border-bottom: 1px solid #e8e9f4 !important;
}

body .marketplaceHeader .mobileDrawerHeader b {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -.5px !important;
  color: #211d49 !important;
}

body .marketplaceHeader .mobileDrawerHeader > button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #e4e2f3 !important;
  border-radius: 13px !important;
  background: #f5f4ff !important;
  color: #5145e9 !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

body .marketplaceHeader .mobileDrawerHeader > button:hover {
  background: #e9e6ff !important;
}

body .marketplaceHeader .mobileNavDrawer > a:not(.mobileDrawerPost),
body .marketplaceHeader .mobileNavDrawer > button[data-open-ai-cat] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 45px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #30324d !important;
  font-size: 14px !important;
  font-weight: 750 !important;
}

body .marketplaceHeader .mobileNavDrawer > a:not(.mobileDrawerPost)::before {
  content: "›";
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #f1efff;
  color: #6553ed;
  font-size: 19px;
  font-weight: 800;
}

body .marketplaceHeader .mobileNavDrawer > a:hover,
body .marketplaceHeader .mobileNavDrawer > button[data-open-ai-cat]:hover {
  background: #f4f2ff !important;
  color: #5145e9 !important;
}

body .marketplaceHeader .mobileNavDrawer > .mobileDrawerPost {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 49px !important;
  padding: 12px 16px !important;
  margin: 2px 0 10px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg,#5145ed,#8258f8) !important;
  color: white !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 22px rgba(79,70,229,.20) !important;
}

body .marketplaceHeader .mobileDrawerLanguage {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 52px !important;
  padding: 9px 12px !important;
  margin: 5px 0 14px !important;
  border: 1px solid #e6e4f5 !important;
  border-radius: 13px !important;
  background: #f7f6ff !important;
  color: #302c57 !important;
}

body .marketplaceHeader .mobileDrawerLanguage select {
  width: auto !important;
  max-width: 170px !important;
  height: 36px !important;
  border: 1px solid #e2e0f4 !important;
  border-radius: 10px !important;
  background: white !important;
  color: #4f46e5 !important;
  font-size: 13px !important;
}

/* Keep the drawer above the header, retaining the working V3 overlay. */
body.mobileNavOpen .marketplaceHeader .mobileNavDrawer {
  z-index: 2147483002 !important;
}


/* ULITIN DRAWER V5 — FINAL VISUAL POLISH */

/* Close button */
body .topbar.marketplaceHeader .mobileNavDrawer
.mobileDrawerHeader > button {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #e1def7 !important;
  border-radius: 12px !important;
  background: #f1efff !important;
  color: #5145e9 !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

/* Post Listing */
body .topbar.marketplaceHeader .mobileNavDrawer
a.mobileDrawerPost {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 12px 16px !important;
  margin: 4px 0 12px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg,#5145ed,#8057f7) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: 0 8px 20px rgba(79,70,229,.22) !important;
}

/* Individual navigation icons using existing link order */
body .topbar.marketplaceHeader .mobileNavDrawer
> a:not(.mobileDrawerPost)::before {
  content: "›" !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: #f0eeff !important;
  color: #5b4be8 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* Location, Home, Categories, Jobs, Stores, Vehicles */
body .topbar.marketplaceHeader .mobileNavDrawer > a:nth-of-type(2)::before {content:"⌖" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a:nth-of-type(3)::before {content:"⌂" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a:nth-of-type(4)::before {content:"▦" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a:nth-of-type(5)::before {content:"▣" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a:nth-of-type(6)::before {content:"▤" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a:nth-of-type(7)::before {content:"▰" !important}

/* Real Estate, Services, Community */
body .topbar.marketplaceHeader .mobileNavDrawer > a:nth-of-type(8)::before {content:"⌂" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a:nth-of-type(9)::before {content:"⚒" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a:nth-of-type(10)::before {content:"◎" !important}

/* User menu */
body .topbar.marketplaceHeader .mobileNavDrawer > a[href^="/dashboard"]::before {content:"▤" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a[href^="/messages"]::before {content:"✉" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a[href^="/favorites"]::before {content:"♡" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a[href^="/account"]::before {content:"◉" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a[href^="/admin"]::before {content:"⚙" !important}
body .topbar.marketplaceHeader .mobileNavDrawer > a[href="/logout"]::before {content:"↪" !important}

/* Hover */
body .topbar.marketplaceHeader .mobileNavDrawer > a:hover {
  background: #f4f2ff !important;
  color: #5145e9 !important;
}


/* ULITIN DRAWER V6 SVG ICONS */
body .topbar.marketplaceHeader .mobileNavDrawer
> a:not(.mobileDrawerPost)::before {
  content: none !important;
  display: none !important;
}

body .topbar.marketplaceHeader .mobileNavDrawer .drawerIcon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  background: #f0eeff !important;
  color: #6250e9 !important;
}

body .topbar.marketplaceHeader .mobileNavDrawer .drawerIcon svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
}

body .topbar.marketplaceHeader .mobileNavDrawer
> a:not(.mobileDrawerPost),
body .topbar.marketplaceHeader .mobileNavDrawer
> button[data-open-ai-cat] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 46px !important;
  padding: 6px 10px !important;
}

body .topbar.marketplaceHeader .mobileNavDrawer
> a:hover .drawerIcon,
body .topbar.marketplaceHeader .mobileNavDrawer
> button:hover .drawerIcon {
  background: #e4dfff !important;
}


/* ULITIN DRAWER V7 - CLOSE BUTTON */

body .topbar.marketplaceHeader
.mobileNavDrawer .mobileDrawerHeader button {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border: 1px solid #e4e0ff !important;
    border-radius: 12px !important;
    background: #f0eeff !important;
    color: #5945e8 !important;
    cursor: pointer !important;
    transition: background .2s, transform .2s !important;
}

body .topbar.marketplaceHeader
.mobileNavDrawer .mobileDrawerHeader button:hover {
    background: #e3ddff !important;
    transform: scale(1.05) !important;
}

body .topbar.marketplaceHeader
.mobileNavDrawer .mobileDrawerHeader button svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
}


/* DRAWER V8 - CLEAN CLOSE BUTTON */
body .topbar.marketplaceHeader
.mobileNavDrawer .mobileDrawerHeader button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid #ddd8ff !important;
    border-radius: 12px !important;
    background: #f3f1ff !important;
    color: #4338ca !important;
    box-shadow: none !important;
    transform: none !important;
}

body .topbar.marketplaceHeader
.mobileNavDrawer .mobileDrawerHeader button svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
}

body .topbar.marketplaceHeader
.mobileNavDrawer .mobileDrawerHeader button:hover {
    background: #e9e5ff !important;
    transform: none !important;
}


/* ULITIN DRAWER V9 - COMPACT CLOSE BUTTON */

body .topbar.marketplaceHeader
.mobileNavDrawer .mobileDrawerHeader {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body .topbar.marketplaceHeader
.mobileNavDrawer .mobileDrawerHeader button {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e5e2ff !important;
    border-radius: 10px !important;
    background: #f6f5ff !important;
    color: #5143d9 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
}

body .topbar.marketplaceHeader
.mobileNavDrawer .mobileDrawerHeader button svg {
    display: block !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .topbar.marketplaceHeader
.mobileNavDrawer .mobileDrawerHeader button:hover {
    background: #eeebff !important;
    transform: none !important;
}