/* ==========================================================================
   iOS-style dock (Search · pill of tabs · Plus) — loaded AFTER dock-unified.css
   Layout (left → right): [search circle] [pill: home · listings · saved · messages] [+]
   Tweak: --dock-plus-bg / --dock-plus-fg for the + colour.
   ========================================================================== */
:root{
  --dock-glass:rgba(28,29,33,.62);
  --dock-stroke:rgba(255,255,255,.10);
  --dock-ic:rgba(255,255,255,.52);
  --dock-ic-on:#fff;
  --dock-on-bg:rgba(255,255,255,.13);
  --dock-plus-bg:#c6ff00;
  --dock-plus-fg:#000;
}
html body:not(#x) #bottomDock#bottomDock.bottom-dock{
  bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important; padding:0 16px !important;
}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .bottom-dock-inner{
  display:flex !important; flex-direction:row !important; direction:ltr !important;
  align-items:center !important; justify-content:center !important; gap:10px !important;
  width:100% !important; max-width:440px !important; padding:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  pointer-events:none !important;
}
/* shared glass look: search circle + pill */
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-search,
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill{
  pointer-events:auto !important; position:relative;
  background:var(--dock-glass) !important; background-color:var(--dock-glass) !important;
  -webkit-backdrop-filter:blur(12px) !important; backdrop-filter:blur(12px) !important;
  border:1px solid var(--dock-stroke) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-search{
  grid-column:auto !important; flex:0 0 auto !important; width:50px !important; height:50px !important; min-height:50px !important;
  border-radius:50% !important; color:#fff !important; transform:none !important;
}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill{
  display:flex !important; align-items:center !important; gap:2px !important; padding:4px !important; border-radius:999px !important;
}
/* items inside the pill */
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill .dock-item{
  grid-column:auto !important; flex:0 0 auto !important; width:46px !important; height:42px !important; min-height:42px !important;
  border-radius:999px !important; background:transparent !important; background-color:transparent !important;
  color:var(--dock-ic) !important; border:0 !important; box-shadow:none !important; display:flex !important;
  transform:none !important; pointer-events:auto !important;
}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill .dock-item.is-active{
  width:46px !important; background:var(--dock-on-bg) !important; background-color:var(--dock-on-bg) !important;
  color:var(--dock-ic-on) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
}
/* + button */
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item.dock-plus,
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item.dock-plus.is-active{
  grid-column:auto !important; pointer-events:auto !important; flex:0 0 auto !important;
  width:54px !important; height:54px !important; min-height:54px !important; border-radius:50% !important;
  background:var(--dock-plus-bg) !important; background-color:var(--dock-plus-bg) !important; color:var(--dock-plus-fg) !important;
  border:0 !important; transform:none !important;
  box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 20px color-mix(in srgb,var(--dock-plus-bg) 35%,transparent), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item.dock-plus svg{
  width:26px !important; height:26px !important; stroke:var(--dock-plus-fg) !important; color:var(--dock-plus-fg) !important; stroke-width:2.4 !important;
}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item.dock-plus:active{transform:scale(.94) !important}
/* icons / labels */
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-search svg,
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill .dock-item svg{
  width:22px !important; height:22px !important; stroke:currentColor !important; color:currentColor !important; stroke-width:1.9 !important;
}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item .dock-label{display:none !important}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item[data-dock="home"],
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item[data-dock="listings"],
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item[data-dock="sell"]{display:flex !important}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item:active{opacity:.75}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .mr-chat-dock-badge{border-color:#2a2b30 !important}
/* the outer nav itself is transparent; only the circle / pill / + are visible */
html body:not(#x) #bottomDock#bottomDock.bottom-dock{background:none !important;box-shadow:none !important;border:0 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
/* pill order, right → left: خانه · آگهی‌ها · نشان‌شده‌ها · پیام‌ها */
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill{direction:rtl !important}

/* snappier feel: no 300ms tap delay, instant highlight on touch */
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item{touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .12s ease,color .12s ease,opacity .1s ease}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill .dock-item.is-tap{
  background:var(--dock-on-bg) !important; background-color:var(--dock-on-bg) !important; color:var(--dock-ic-on) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill:has(.is-tap) .dock-item.is-active:not(.is-tap){
  background:transparent !important; background-color:transparent !important; color:var(--dock-ic) !important; box-shadow:none !important;
}

/* ==========================================================================
   Hide / show animation (search overlay, sheets, modals …)
   Hide: slides down + fades + shrinks slightly. Show: reverses the same motion.
   ========================================================================== */
html body:not(#x) #bottomDock#bottomDock.bottom-dock{
  opacity:1; visibility:visible; transform:translateY(0) scale(1) !important; transform-origin:50% 100%;
  transition:opacity .30s ease, transform .38s cubic-bezier(.2,.9,.25,1), visibility 0s linear 0s !important;
}
html body.has-popup:not(#x):not(#y) #bottomDock#bottomDock.bottom-dock,
html.menu-active body:not(#x):not(#y) #bottomDock#bottomDock.bottom-dock,
html.auth-active body:not(#x):not(#y) #bottomDock#bottomDock.bottom-dock,
html.mr-trust-dialog-open body:not(#x):not(#y) #bottomDock#bottomDock.bottom-dock,
html.mr-nf-open body:not(#x):not(#y) #bottomDock#bottomDock.bottom-dock,
html.nw-sheet-open body:not(#x):not(#y) #bottomDock#bottomDock.bottom-dock,
html.brand-sheet-lock body:not(#x):not(#y) #bottomDock#bottomDock.bottom-dock,
html.mr-sv-lock body:not(#x):not(#y) #bottomDock#bottomDock.bottom-dock{
  opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  transform:translateY(46px) scale(.94) !important;
  transition:opacity .22s ease, transform .30s cubic-bezier(.5,0,.75,0), visibility 0s linear .30s !important;
}
@media (prefers-reduced-motion:reduce){
  html body:not(#x) #bottomDock#bottomDock.bottom-dock,
  html body.has-popup:not(#x):not(#y) #bottomDock#bottomDock.bottom-dock{transition-duration:.01s !important}
}

/* ===== larger size (v2) ===== */
html body:not(#x) #bottomDock#bottomDock.bottom-dock .bottom-dock-inner{gap:9px !important}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-search{width:58px !important;height:58px !important;min-height:58px !important}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill{padding:5px !important;gap:1px !important}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill .dock-item,
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill .dock-item.is-active{width:50px !important;height:48px !important;min-height:48px !important}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item.dock-plus,
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item.dock-plus.is-active{width:62px !important;height:62px !important;min-height:62px !important}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-search svg,
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill .dock-item svg{width:25px !important;height:25px !important}
html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item.dock-plus svg{width:30px !important;height:30px !important}
@media (max-width:375px){
  html body:not(#x) #bottomDock#bottomDock.bottom-dock .bottom-dock-inner{gap:7px !important}
  html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-search{width:54px !important;height:54px !important;min-height:54px !important}
  html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill .dock-item,
  html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-pill .dock-item.is-active{width:45px !important;height:46px !important;min-height:46px !important}
  html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item.dock-plus,
  html body:not(#x) #bottomDock#bottomDock.bottom-dock .dock-item.dock-plus.is-active{width:58px !important;height:58px !important;min-height:58px !important}
}