/* ==========================================================================
   آلنیدو — چیدمان: هدر، سایدبار، فید، صفحهٔ آگهی، فوتر، تب‌بار
   ========================================================================== */

/* ================================================================= هدر */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background: rgb(var(--surface-neutral-base));
  border-bottom: 1px solid rgb(var(--border-neutral-default));
}
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 100%;
}

.logo {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 21px;
  font-weight: 700;
  color: rgb(var(--content-brand-default));
  flex: none;
}
.logo__mark {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-md);
  background: rgb(var(--surface-brand-default));
  color: #fff;
}

.header__divider {
  width: 1px; height: 24px;
  background: rgb(var(--border-neutral-default));
  flex: none;
}

/* جستجوی سراسری */
.search {
  position: relative;
  flex: 1;
  max-width: 520px;
}
.search__input {
  width: 100%;
  height: 40px;
  padding-inline: var(--sp-4) 42px;
  background: rgb(var(--surface-neutral-subtle));
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-label);
  transition: background-color var(--dur-fast), border-color var(--dur-fast),
              box-shadow var(--dur-fast);
}
.search__input:focus {
  outline: none;
  background: rgb(var(--surface-neutral-base));
  border-color: rgb(var(--border-brand-default));
  box-shadow: 0 0 0 3px rgb(var(--surface-brand-default) / 15%);
}
.search__icon {
  position: absolute;
  inset-inline-end: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: rgb(var(--content-neutral-tertiary));
  pointer-events: none;
}

/* ------------------------------------------------------------ مگامنو
   ظرفِ این منو یک .container داخل <header> است که خودش زیر نوار ۶۴ پیکسلی
   قرار دارد؛ پس top باید صفر باشد نه ارتفاع هدر، وگرنه دوبار جابه‌جا می‌شود. */
.megamenu {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-dropdown);
  display: grid;
  grid-template-columns: 260px 1fr;
  background: rgb(var(--surface-neutral-base));
  border: 1px solid rgb(var(--border-neutral-default));
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.megamenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.megamenu__rail {
  padding: var(--sp-3);
  border-inline-start: 1px solid rgb(var(--border-neutral-weak));
  max-height: 70vh;
  overflow-y: auto;
}
.megamenu__rail-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-label);
  font-weight: 500;
  color: rgb(var(--content-neutral-secondary));
  text-align: start;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.megamenu__rail-item:hover,
.megamenu__rail-item.is-active {
  background: rgb(var(--surface-brand-subtle));
  color: rgb(var(--content-brand-default));
}
.megamenu__rail-item span { display: flex; align-items: center; gap: var(--sp-3); }

.megamenu__stage { padding: var(--sp-5); max-height: 70vh; overflow-y: auto; }
.megamenu__panel[hidden] { display: none; }

.megamenu__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid rgb(var(--border-neutral-weak));
}
.megamenu__badge {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: var(--r-md);
  background: rgb(var(--tint, var(--content-neutral-tertiary)) / 16%);
}
.megamenu__title { font-size: var(--fs-h3); }

/* ستون‌بندی طبیعی: هر تعداد زیردسته باشد، جای خالی نمی‌ماند */
.megamenu__links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px var(--sp-4);
}
.megamenu__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-meta);
  color: rgb(var(--content-neutral-secondary));
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.megamenu__links a:hover {
  background: rgb(var(--surface-neutral-subtle));
  color: rgb(var(--content-brand-default));
}

/* صفحهٔ نخست استایل اختصاصی خود را دارد: assets/css/home.css */

/* ======================================================= صفحهٔ نتایج */
.results {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--sp-6);
  align-items: start;
  padding-block: var(--sp-5) var(--sp-8);
}

.sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  max-height: calc(100vh - var(--header-h) - var(--sp-6));
  overflow-y: auto;
  padding: var(--sp-4);
  background: rgb(var(--surface-neutral-base));
  border: 1px solid rgb(var(--border-neutral-default));
  border-radius: var(--r-lg);
  scrollbar-width: thin;
}
.sidebar__title {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: rgb(var(--content-neutral-tertiary));
  margin-bottom: var(--sp-2);
}

/* درخت دسته */
.cattree a {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-label);
  color: rgb(var(--content-neutral-secondary));
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.cattree a:hover { background: rgb(var(--surface-neutral-muted)); color: rgb(var(--content-neutral-primary)); }
.cattree .is-current {
  position: relative;
  color: rgb(var(--content-brand-default));
  font-weight: 500;
  background: rgb(var(--surface-brand-subtle));
}
.cattree .lvl-2 { padding-inline-start: var(--sp-5); }
.cattree .lvl-3 { padding-inline-start: var(--sp-7); }

.filter-group { padding-block: var(--sp-2); }
.range { display: flex; align-items: center; gap: var(--sp-2); }
.range .input { height: 40px; }
.range span { color: rgb(var(--content-neutral-tertiary)); }

.checkline {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: 6px 0;
  font-size: var(--fs-label);
  cursor: pointer;
}
.checkline input { accent-color: rgb(var(--surface-brand-default)); width: 17px; height: 17px; }
.checkline__count { font-size: var(--fs-caption); color: rgb(var(--content-neutral-tertiary)); }

/* نوار ابزار بالای نتایج */
.toolbar {
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.viewtoggle {
  display: flex;
  padding: 3px;
  background: rgb(var(--surface-neutral-muted));
  border-radius: var(--r-md);
}
.viewtoggle button {
  display: grid; place-items: center;
  width: 34px; height: 32px;
  border-radius: var(--r-sm);
  color: rgb(var(--content-neutral-tertiary));
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.viewtoggle button.is-active {
  background: rgb(var(--surface-neutral-base));
  color: rgb(var(--content-neutral-primary));
  box-shadow: var(--sh-1);
}

.activechips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* گرید فید */
.feed {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.feed--list { grid-template-columns: 1fr; }

.feed .card { animation: card-in var(--dur-base) var(--ease-out) backwards; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sentinel { height: 1px; }

/* ======================================================= صفحهٔ آگهی */
.detail {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--sp-6);
  align-items: start;
  padding-block: var(--sp-4) var(--sp-8);
}

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding-block: var(--sp-4);
  font-size: var(--fs-meta);
  color: rgb(var(--content-neutral-tertiary));
}
.breadcrumb a:hover { color: rgb(var(--content-brand-default)); }

.panel {
  background: rgb(var(--surface-neutral-base));
  border: 1px solid rgb(var(--border-neutral-default));
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.panel + .panel { margin-top: var(--sp-4); }
.panel__title { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }

/* گالری */
.gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  background: rgb(var(--surface-neutral-muted));
  border-radius: var(--r-lg);
  overflow: hidden;
}
.gallery__main img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: fade-in var(--dur-base) var(--ease-out);
}
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgb(var(--surface-neutral-base) / 92%);
  box-shadow: var(--sh-2);
  transition: transform var(--dur-fast) var(--ease-out);
}
.gallery__nav:hover { transform: translateY(-50%) scale(1.08); }
.gallery__nav--prev { inset-inline-end: var(--sp-3); }
.gallery__nav--next { inset-inline-start: var(--sp-3); }

.gallery__thumbs {
  display: flex; gap: var(--sp-2);
  margin-top: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-1);
  scrollbar-width: thin;
}
.gallery__thumb {
  width: 88px; height: 66px;
  flex: none;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid transparent;
  opacity: .65;
  transition: opacity var(--dur-fast), border-color var(--dur-fast);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { opacity: 1; border-color: rgb(var(--border-brand-default)); }
.gallery__thumb:hover { opacity: 1; }

/* جدول مشخصات */
.specs { width: 100%; border-collapse: collapse; }
.specs tr + tr { border-top: 1px solid rgb(var(--border-neutral-weak)); }
.specs th, .specs td { padding: var(--sp-3) 0; text-align: start; font-size: var(--fs-label); }
.specs th { font-weight: 400; color: rgb(var(--content-neutral-secondary)); width: 40%; }
.specs td { font-weight: 500; }

/* کارت اقدام چسبان */
.actionbox {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}
.actionbox__price {
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
}
.actionbox__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }

.seller { display: flex; align-items: center; gap: var(--sp-3); }
.seller__avatar {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  background: rgb(var(--surface-brand-subtle));
  color: rgb(var(--content-brand-default));
  font-weight: 700;
}

/* ==========================================================================
   نقشه (Leaflet)
   ========================================================================== */
.map {
  height: 320px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgb(var(--surface-neutral-muted));
  z-index: 0;               /* نگذار روی هدر چسبان بیفتد */
}
.map.mappick { height: 360px; }

/* کاشی‌ها در تم تیره کمی خاموش‌تر تا دایرهٔ نارنجی خوانا بماند */
:root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(.78) saturate(.85); }

.leaflet-container { font-family: var(--font-sans); direction: ltr; }
.leaflet-control-attribution { font-size: 10px; }
.leaflet-control-zoom a { color: rgb(var(--content-neutral-primary)) !important; }

/* ==========================================================================
   فاصله روی کارت + اسلایدر شعاع
   ========================================================================== */
.card__near {
  color: rgb(var(--content-brand-default));
  font-weight: 500;
}

input[type="range"] {
  width: 100%;
  accent-color: rgb(var(--surface-brand-default));
  margin-top: var(--sp-1);
}
.radius[hidden] { display: none; }


.mobilebar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgb(var(--surface-neutral-base));
  border-top: 1px solid rgb(var(--border-neutral-default));
  box-shadow: 0 -4px 16px rgb(0 0 0 / 6%);
}

/* =============================================================== فوتر */
.footer {
  margin-top: var(--sp-8);
  padding-block: var(--sp-7) var(--sp-5);
  background: rgb(var(--surface-neutral-base));
  border-top: 1px solid rgb(var(--border-neutral-default));
}
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-6);
}
.footer h4 { font-size: var(--fs-label); margin-bottom: var(--sp-3); }
.footer li a {
  display: block;
  padding: 5px 0;
  font-size: var(--fs-meta);
  color: rgb(var(--content-neutral-secondary));
}
.footer li a:hover { color: rgb(var(--content-brand-default)); }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid rgb(var(--border-neutral-weak));
  font-size: var(--fs-meta);
  color: rgb(var(--content-neutral-tertiary));
}

/* ========================================================== تب‌بار موبایل */
.tabbar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-header);
  background: rgb(var(--surface-neutral-base));
  border-top: 1px solid rgb(var(--border-neutral-default));
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__inner { display: grid; grid-template-columns: repeat(5, 1fr); }
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--sp-2) 0;
  min-height: var(--tabbar-h);
  justify-content: center;
  font-size: 11px;
  color: rgb(var(--content-neutral-tertiary));
  transition: color var(--dur-fast);
}
.tabbar a.is-active { color: rgb(var(--content-brand-default)); }
.tabbar__fab {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgb(var(--surface-brand-default));
  color: #fff;
}


/* ---------------------------------------------- فوتر آکاردئونی در موبایل
   در دسکتاپ چهار ستون باز؛ در موبایل هر ستون جمع می‌شود تا فوتر
   نیم صفحه اسکرول نخورد. */
.footer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  font-size: var(--fs-label);
  font-weight: 700;
  text-align: start;
  color: inherit;
  cursor: default;
}
.footer__toggle svg {
  display: none;
  flex: none;
  color: rgb(var(--content-neutral-tertiary));
  transition: transform var(--dur-base) var(--ease-out);
}
.footer h4, .footer__toggle { margin-bottom: var(--sp-3); }

.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgb(var(--content-neutral-secondary));
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__credit:hover,
.footer__credit:focus-visible { color: rgb(var(--content-brand-default)); }
.footer__credit strong { font-weight: 500; }

@media (max-width: 767px) {
  .footer__cols { gap: 0; }

  .footer__group { border-top: 1px solid rgb(var(--border-neutral-weak)); }

  .footer__toggle {
    padding-block: var(--sp-4);
    margin-bottom: 0;
    cursor: pointer;
    min-height: 48px;               /* ناحیهٔ لمس */
  }
  .footer__toggle svg { display: block; }
  .footer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .footer__panel { display: none; padding-bottom: var(--sp-3); }
  .footer__toggle[aria-expanded="true"] + .footer__panel {
    display: block;
    animation: fade-in var(--dur-base) var(--ease-out);
  }

  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}


/* ============================================================ ریسپانسیو */

/* ≥ 1600px — چهار ستون */
@media (min-width: 1600px) {
  .feed { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* < 1280px — سایدبار باریک‌تر */
@media (max-width: 1279px) {
  :root { --sidebar-w: 240px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

/* < 1024px — سایدبار به شیت تبدیل می‌شود */
@media (max-width: 1023px) {
  .results { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .detail { grid-template-columns: 1fr; }
  .actionbox { position: static; }
  .megamenu { grid-template-columns: 1fr; }
  .megamenu__rail { border: 0; border-bottom: 1px solid rgb(var(--border-neutral-weak)); }
  .megamenu { grid-template-columns: 1fr; }
}

/* < 768px — موبایل */
@media (max-width: 767px) {
  :root { --fs-display: 26px; --lh-display: 40px; }

  .hide-desktop { display: revert !important; }
  .hide-mobile  { display: none !important; }

  body { padding-bottom: var(--tabbar-h); }
  .tabbar { display: block; }

  .header__inner { gap: var(--sp-2); }
  .search { max-width: none; }


  .feed { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); }
  /* در کارت باریک، محله حذف می‌شود تا متا در یک خط بماند */
  .card__meta-wide { display: none; }
  .feed--list .card__meta-wide { display: initial; }
  .feed--list .card__media { width: 120px; }
  .card__title { font-size: var(--fs-label); line-height: 24px; min-height: 48px; }
  .card__price { font-size: var(--fs-card); }

  .footer__cols { grid-template-columns: 1fr; gap: var(--sp-5); }
  .megamenu__rail { max-height: 200px; }

  .panel { padding: var(--sp-4); }
  .detail { padding-bottom: 96px; }
  .mobilebar { display: flex; }
  .actionbox .actionbox__actions { display: none; }
}