/* ===== فونت یکان‌بخ ===== */
@font-face {
  font-family: "YekanBakh";
  src: url("font/yekanbakh/YekanBakh-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "YekanBakh";
  src: url("font/yekanbakh/YekanBakh-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "YekanBakh";
  src: url("font/yekanbakh/YekanBakh-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "YekanBakh";
  src: url("font/yekanbakh/YekanBakh-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

/* ===== متغیرهای رنگ برند ===== */
:root {
  --black: #010000;
  --yellow: #FEC555;
  --gold: #BE933C;
  --gray: #7B7B7B;
  --gray-line: #EBEBEB;
  --gray-line-2: #E6E6E5;
  --yellow-soft: #FEDB99;
  --amber: #FCB216;
  --bg-soft: #F5F6F6;
  --white: #FFFFFF;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 2px 14px rgba(1, 0, 0, 0.06);
  --shadow-hover: 0 8px 28px rgba(1, 0, 0, 0.12);
  /* عرض محتوای دسکتاپ: هدر/فوتر و همهٔ صفحات تا ۱۴۴۰ باز می‌شوند.
     تنها استثناء صفحهٔ جزئیات آگهی (body.page-product) است که در ۱۲۰۰ نگه داشته می‌شود. */
  --container: 1440px;
}

/* ===== ریست ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "YekanBakh", Tahoma, sans-serif;
  background: var(--white);
  color: var(--black);
  direction: rtl;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  /* فاصلهٔ کم در موبایل/تبلت؛ همان الگوی صفحهٔ حساب */
  padding: 0 6px;
}

/* فاصلهٔ بزرگ‌تر فقط در دسکتاپ */
@media (min-width: 1025px) {
  .container {
    padding: 0 20px;
  }
}

/* صفحهٔ جزئیات هر آگهی: فقط گرید محصول در عرض ۱۲۰۰ می‌ماند تا چیدمان دوستونیِ
   گالری + کارت خرید جمع‌وجور بماند. هدر، فوتر و مسیرراهنما (breadcrumb) مثل بقیهٔ
   صفحات تا ۱۴۴۰ باز می‌شوند (روی .container سراسری). */
.page-product .product__grid {
  max-width: 1200px;
}

/* ===== هدر ===== */
/* تا قبل از لود شدن partial هدر، جای آن رزرو می‌شود تا محتوای صفحه نپرد (CLS) */
div[data-include="header.inc"] {
  min-height: 77px; /* 76px ارتفاع هدر + 1px خط زیرین */
  background: var(--white);
  border-bottom: 1px solid var(--gray-line);
}

.header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-line);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 76px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img {
  height: 30px;
  width: auto;
}

/* جستجو */
.search {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  height: 46px;
  transition: border-color 0.2s, background 0.2s;
}

/* نتایج زندهٔ جستجو (زیر باکس) */
.search__results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
  overflow: hidden;
  z-index: 60;
}

.search__result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--black);
  text-align: right;
  transition: background 0.15s;
}

.search__result + .search__result {
  border-top: 1px solid var(--gray-line);
}

.search__result svg {
  flex-shrink: 0;
  color: var(--gray);
}

.search__result strong {
  font-weight: 800;
  color: var(--amber);
}

button.search__result:hover {
  background: var(--bg-soft);
}

.search__result--empty {
  color: var(--gray);
  font-weight: 500;
  cursor: default;
}

.search-head__cat {
  color: var(--amber);
  font-weight: 800;
}

.search:focus-within {
  border-color: var(--amber);
  background: var(--white);
}

.search svg {
  flex-shrink: 0;
  color: var(--gray);
}

.search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--black);
}

.search input::placeholder {
  color: var(--gray);
}

/* انتخاب شهر */
.city {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  flex-shrink: 0;
  padding: 8px 6px;
  border-radius: 8px;
  transition: background 0.2s;
}

.city:hover {
  background: var(--bg-soft);
}

.city svg {
  color: var(--amber);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.link-login {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.link-login svg {
  color: var(--gold);
  flex-shrink: 0;
}

.link-login:hover {
  color: var(--black);
  border-color: var(--yellow-soft);
  background: var(--bg-soft);
}

/* دکمه ثبت آگهی */
.btn-post {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--amber);
  color: var(--black);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}

.btn-post:hover {
  background: var(--yellow);
  box-shadow: 0 6px 16px rgba(252, 178, 22, 0.4);
}

.btn-post:active {
  transform: scale(0.97);
}

/* دکمه منوی همبرگری (فقط در موبایل) */
.btn-menu {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--black);
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
}

.btn-menu:hover {
  background: var(--bg-soft);
}

/* دکمه منوی دسکتاپ (بین لوگو و کادر جستجو) */
.btn-menu-desktop {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: border-color 0.2s, background 0.2s;
}

.btn-menu-desktop:hover {
  border-color: var(--yellow-soft);
  background: var(--bg-soft);
}

.btn-menu-desktop__caret {
  transition: transform 0.2s ease;
}

.btn-menu-desktop[aria-expanded="true"] .btn-menu-desktop__caret {
  transform: rotate(180deg);
}

/* ===== پنل کشویی منوی دسکتاپ (به عرض سایت، زیر هدر) ===== */
.desktop-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 45;
  background: var(--white);
  border-top: 1px solid var(--gray-line);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.desktop-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.desktop-menu__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.desktop-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  transition: background 0.15s, color 0.15s;
}

.desktop-menu__item:hover {
  background: var(--bg-soft);
}

.desktop-menu__item svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
}

/* ===== کشوی منوی موبایل ===== */
.mobile-menu,
.mobile-menu-overlay {
  display: none;
}

/* نوار پایین فقط در موبایل نمایش داده می‌شود */
.bottom-nav {
  display: none;
}

/* ===== بخش قهرمان / دسته‌بندی‌ها ===== */
.hero {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--gray-line);
  padding: 36px 0 40px;
}

.hero__title {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 6px;
}

.hero__subtitle {
  text-align: center;
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 28px;
}

.categories {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  /* عرض ثابت برای ۶ ستونِ ۱۳۶px + ۵ فاصلهٔ ۱۶px = ۸۹۶px → ردیف بالا دقیقاً ۶ کادر و
     کادرهای ردیف پایین با flex-wrap + justify-content وسط‌چین می‌شوند (دسکتاپ). */
  max-width: 896px;
  margin-inline: auto;
}

.category {
  flex: 0 0 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 20px 10px;
  text-align: center;
  transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s;
}

.category:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--yellow-soft);
}

.category__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border-radius: 50%;
  color: var(--black);
  transition: background 0.2s, color 0.2s;
}

.category:hover .category__icon {
  background: var(--yellow-soft);
  color: var(--gold);
}

.category__icon svg {
  width: 28px;
  height: 28px;
}

.category__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--black);
}

/* ===== بخش آخرین آگهی‌ها ===== */
.section {
  padding: 38px 0 60px;
}

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
}

.section__title {
  font-size: 20px;
  font-weight: 800;
}

.section__title span {
  display: inline-block;
  width: 26px;
  height: 4px;
  background: var(--amber);
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.section__link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold);
}

.section__link:hover {
  text-decoration: underline;
}

/* شبکه آگهی‌ها */
.listings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* کارتِ آگهی به‌صورت افقی: تصویر سمت چپ، اطلاعات سمت راست.
   صفحه راست‌به‌چپ است؛ پس row-reverse تصویر را به سمت چپ می‌برد.
   (در «آگهی‌های من» این کارت دوباره به حالت عمودیِ قبلی برمی‌گردد.) */
.card {
  display: flex;
  flex-direction: row-reverse;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.card__media {
  position: relative;
  flex: 0 0 40%;
  max-width: 170px;
  aspect-ratio: 1 / 1;
  align-self: flex-start;
  margin: 12px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-soft), var(--gray-line));
  color: var(--gray);
}

.card__media svg {
  width: 46px;
  height: 46px;
  opacity: 0.55;
}

.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(1, 0, 0, 0.62);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
}

.card__badge svg {
  width: 12px;
  height: 12px;
  opacity: 1;
}

.card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  /* عنوان بلند به خط دوم می‌رود و اگر باز هم بلند بود با … کوتاه می‌شود */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  /* عنوان به بالا می‌چسبد و سه خط بعدی (زمان/قیمت/شهر) به پایین رانده می‌شوند */
  margin-bottom: auto;
}

.card__price {
  font-size: 14.5px;
  font-weight: 400;
  color: var(--black);
  white-space: nowrap;
}

.card__price small {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray);
}

/* قیمتِ توافقی روی کارت‌ها: برچسبِ «توافقی» با تأکیدِ رنگِ برند */
.card__price--agree {
  font-weight: 700;
  color: var(--gold);
}

.card__time {
  font-size: 12px;
  color: var(--gray);
}

/* شهر در کارت افقی (زیر عنوان/زمان/قیمت) */
.card__city {
  font-size: 12px;
  color: var(--gray);
}

/* فقط کارت‌های افقیِ شبکه‌ها (صفحهٔ اصلی/دسته/جستجو)؛ «آگهی‌های من» داخل .account-ads است و دست نمی‌خورد.
   عنوان هم‌وزنِ پایه (۶۰۰/SemiBold) می‌ماند تا درشت و زمخت نشود؛ زمان/قیمت/شهر کوچک‌تر تا متنِ بلند به خط بعد برود. */
.listings .card__title {
  font-weight: 600;
}

.listings .card__price {
  font-size: 12.5px;
}

.listings .card__price small {
  font-size: 10.5px;
}

.listings .card__time,
.listings .card__city {
  font-size: 11.5px;
}

.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gray);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--gray-line);
}

.card__tag {
  color: var(--gold);
  font-weight: 600;
}

.listings__empty,
.product__message {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--gray);
  padding: 48px 16px;
  font-size: 15px;
}

/* ===== فوتر ===== */
.footer {
  margin-top: auto;
  background: var(--bg-soft);
  color: var(--gray);
  border-top: 1px solid var(--gray-line);
  padding: 40px 0 24px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1.6fr 1fr auto;
  gap: 32px;
  margin-bottom: 32px;
}

.footer__trust a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: 10px;
}

.footer__trust img {
  max-width: 90px;
  height: auto;
  border-radius: 6px;
}

.footer__brand img {
  height: 28px;
  margin-bottom: 12px;
}

.footer__brand p {
  font-size: 13px;
  color: var(--gray);
  max-width: 320px;
  line-height: 2;
}

.footer__col h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 14px;
}

.footer__col h4::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 4px;
  background: var(--amber);
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.footer__col li {
  margin-bottom: 9px;
}

.footer__col a {
  font-size: 13px;
  color: var(--gray);
  transition: color 0.2s;
}

.footer__col a:hover {
  color: var(--yellow);
}

/* دسته‌بندی‌های فوتر: چیپ‌های گرد که افقی می‌چینند و سرریز به خط بعد می‌رود */
.footer__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font-size: 12.5px;
  color: var(--gray);
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  line-height: 1.6;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.footer__cat::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
  transition: transform 0.2s;
}

/* انتخابگر را اختصاصی‌تر از `.footer__col a:hover` می‌نویسیم تا رنگ متنِ هاور
   (مشکی) بر رنگ زردِ پیش‌فرضِ لینک‌های فوتر غالب شود. */
.footer__col a.footer__cat:hover {
  color: var(--black);
  border-color: var(--amber);
  background: var(--yellow-soft);
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(252, 178, 22, 0.2);
}

.footer__cat:hover::before {
  transform: scale(1.4);
}

.footer__bottom {
  border-top: 1px solid var(--gray-line);
  padding-top: 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--gray);
}

/* ===== صفحه محصول ===== */

/* مسیر راهنما */
.breadcrumb {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--gray-line);
}

.breadcrumb__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray);
  padding-top: 14px;
  padding-bottom: 14px;
  /* اگر مسیر طولانی شد، به‌جای شکستن در چند خط، با انگشت چپ‌وراست اسکرول شود */
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
}

.breadcrumb__inner::-webkit-scrollbar {
  display: none;                    /* Chrome/Safari/Edge */
}

/* اجزای مسیر نباید بشکنند یا جمع شوند تا اسکرولِ افقی درست کار کند */
.breadcrumb__inner > * {
  flex: 0 0 auto;
  white-space: nowrap;
}

.breadcrumb a {
  color: var(--gray);
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: var(--black);
}

.breadcrumb__sep {
  color: var(--gray-line-2);
}

.breadcrumb__current {
  color: var(--black);
  font-weight: 600;
}

/* چیدمان محصول */
.product {
  padding: 28px 0 60px;
}

.product__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: start;
}

.product__panels {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* گالری تصاویر */
.gallery {
  grid-column: 2;
}

.gallery__main {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-soft), var(--gray-line));
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  color: var(--gray);
}

.gallery__main--draggable {
  touch-action: pan-y;
  cursor: grab;
}

.gallery__main--draggable.is-grabbing {
  cursor: grabbing;
}

.gallery__main svg {
  width: 76px;
  height: 76px;
  opacity: 0.5;
}

.gallery__main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 1;
  user-select: none;
  -webkit-user-drag: none;
}

/* فقط هنگام جابه‌جایی، حرکت کشویی فعال می‌شود */
.gallery__img.is-animating {
  transition: transform 0.35s ease;
}

/* فلش‌های قبلی/بعدی روی تصویر بزرگ */
.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gray-line);
  background: rgba(255, 255, 255, 0.85);
  color: var(--black);
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.2s, transform 0.15s;
}

.gallery__nav:hover {
  background: var(--white);
  transform: translateY(-50%) scale(1.08);
}

.gallery__nav--prev { right: 12px; }
.gallery__nav--next { left: 12px; }

.gallery__nav svg {
  width: 22px;
  height: 22px;
  opacity: 1;
}

.gallery__condition {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: var(--amber);
  color: var(--black);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
}

/* همیشه ۵ ستونه تا اندازهٔ هر بندانگشتی ثابت بماند؛ چون صفحه راست‌به‌چپ است،
   اگر کمتر از ۵ تصویر باشد آیتم‌ها از سمت راست پر می‌شوند و ستون‌های خالی سمت چپ می‌مانند. */
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.gallery__thumb {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  color: var(--gray);
  transition: border-color 0.2s, transform 0.15s;
}

.gallery__thumb svg {
  width: 28px;
  height: 28px;
  opacity: 0.5;
}

.gallery__thumb {
  overflow: hidden;
  cursor: pointer;
}

.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.gallery__thumb:hover {
  transform: translateY(-2px);
}

/* تصویر فعال در نوار بندانگشتی: هاله‌ای دور آن می‌افتد تا مشخص باشد اکنون کدام عکس بالاست */
.gallery__thumb.is-active {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px var(--amber);
  cursor: default;
}

.gallery__thumb.is-active:hover {
  transform: none;
}

.gallery__thumb.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(252, 178, 22, 0.16);
  pointer-events: none;
}

.gallery__thumb {
  position: relative;
}

/* ===== پاپ‌آپ نمایش تصویر در اندازهٔ واقعی (لایت‌باکس) ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(1, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox__stage {
  position: relative;
  width: 92vw;
  height: 88vh;
  overflow: hidden;
}

.lightbox__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* فقط هنگام جابه‌جایی، حرکت کشویی فعال می‌شود */
.lightbox__img.is-animating {
  transition: transform 0.35s ease;
}

.lightbox__close {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox__close svg {
  width: 24px;
  height: 24px;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s;
}

.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox__nav svg {
  width: 26px;
  height: 26px;
}

.lightbox__nav--prev { right: 16px; }
.lightbox__nav--next { left: 16px; }

.lightbox__counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.14);
  padding: 4px 14px;
  border-radius: 999px;
}

/* پنل‌های محتوا */
.panel {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.panel__title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 14px;
}

.panel__title span {
  display: inline-block;
  width: 22px;
  height: 4px;
  background: var(--amber);
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.panel__text {
  font-size: 13px;
  color: #000;
  line-height: 2.1;
  white-space: pre-wrap;
}

/* جدول مشخصات */
.specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.spec {
  display: grid;
  grid-template-columns: 150px auto;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--gray-line);
}

.spec__label {
  color: var(--gray);
}

.spec__value {
  font-weight: 700;
  color: var(--black);
}

.spec__value--ok {
  color: #1f9d55;
}

/* کارت کناری خرید */
.product__side {
  grid-column: 1;
  grid-row: 1 / 3;
  position: sticky;
  top: 96px;
}

.buy-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 20px 22px;
}

.buy-card__title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.8;
  margin-bottom: 6px;
}

.buy-card__time {
  font-size: 12.5px;
  color: var(--gray);
  margin-bottom: 12px;
}

.buy-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 12.5px;
  color: var(--gray);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-line);
}

.buy-card__cat {
  color: var(--gold);
  font-weight: 700;
}

/* «دستهٔ اصلی | زیردسته» در صفحهٔ آگهی */
.buy-card__cats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.buy-card__cat-sep {
  color: var(--gray);
  font-weight: 400;
}

.buy-card__loc {
  display: flex;
  align-items: center;
  gap: 4px;
}

.buy-card__status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #1f9d55;
  padding: 14px 0;
}

.buy-card__status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1f9d55;
}

/* وقتی کالا موجود است، دایرهٔ سبز نرم روشن و خاموش می‌شود */
.buy-card__status:not(.buy-card__status--off) .dot {
  animation: dot-pulse 1.8s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.45);
  }
  50% {
    opacity: 0.45;
    box-shadow: 0 0 0 4px rgba(31, 157, 85, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .buy-card__status:not(.buy-card__status--off) .dot {
    animation: none;
  }
}

/* قیمت‌های اجاره */
.prices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
}

.price__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
}

.price__value {
  font-size: 16px;
  font-weight: 800;
  color: var(--black);
}

.price__value small {
  font-size: 11px;
  font-weight: 400;
  color: var(--gray);
  margin-right: 4px;
}

/* قیمتِ توافقی در کارتِ خریدِ صفحهٔ آگهی */
.price--agree .price__value {
  color: var(--gold);
}

/* نکات سریع */
.quick {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.quick li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #3a3a3a;
}

.quick svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--gold);
}

/* دکمه تماس با مالک */
/* دکمهٔ «تماس با مالک» که با کلیک به کادر شماره تبدیل می‌شود */
.contact-reveal {
  display: grid;
}
.contact-reveal > .btn-contact,
.contact-reveal > .btn-phone {
  grid-area: 1 / 1;          /* روی هم قرار می‌گیرند */
}

.btn-contact {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;   /* رنگ واقعی در fill است تا قابل حرکت باشد */
  color: var(--black);
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  padding: 14px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform 0.15s;
}

/* لایهٔ رنگیِ دکمه که هنگام کلیک به‌نرمی به سمت چپ سُر می‌خورد */
.btn-contact__fill {
  position: absolute;
  inset: 0;
  background: var(--amber);
  border-radius: inherit;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
}
.btn-contact__face {
  position: relative;        /* روی لایهٔ رنگی */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.25s ease;
}

.btn-contact:hover .btn-contact__fill {
  background: var(--yellow);
  box-shadow: 0 6px 16px rgba(252, 178, 22, 0.4);
}
.btn-contact:active {
  transform: scale(0.98);
}

/* کادر سفیدِ شماره که زیر دکمه پنهان است و پس از کنار رفتنِ رنگ نمایان می‌شود */
.btn-phone {
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--white);
  color: var(--black);
  border: 1.5px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-weight: 800;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease 0.15s, box-shadow 0.2s, border-color 0.2s;
}
.btn-phone__num { direction: ltr; unicode-bidi: bidi-override; letter-spacing: 0.5px; }
.btn-phone--empty {
  border-color: var(--gray-line);
  color: var(--gray);
  font-size: 14px;
  font-weight: 600;
}

/* حالتِ نمایان‌شده: رنگ به چپ می‌رود، متنِ دکمه محو می‌شود، شماره ظاهر می‌شود */
.contact-reveal.is-revealed .btn-contact__fill {
  transform: translateX(-100%);
}
.contact-reveal.is-revealed .btn-contact__face {
  opacity: 0;
}
.contact-reveal.is-revealed .btn-contact {
  pointer-events: none;
}
.contact-reveal.is-revealed .btn-phone {
  opacity: 1;
  pointer-events: auto;
}
.btn-phone:hover {
  border-color: var(--yellow);
  box-shadow: 0 4px 14px rgba(252, 178, 22, 0.25);
}

/* هشدار «اجاره رفته/ناموجود» که فقط پس از کلیک روی دکمهٔ تماس نمایان می‌شود */
.contact-unavailable {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: #d92d20;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.8;
  transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
}
.contact-reveal.is-revealed .contact-unavailable {
  opacity: 1;
  max-height: 80px;
  margin-top: 10px;
}
/* برای آگهی ناموجود دکمه سُر نمی‌خورد و سرِ جایش می‌ماند؛ فقط هشدار زیرش ظاهر می‌شود */
.contact-reveal[data-unavailable="true"].is-revealed .btn-contact__fill {
  transform: none;
}
.contact-reveal[data-unavailable="true"].is-revealed .btn-contact__face {
  opacity: 1;
}
.contact-reveal[data-unavailable="true"].is-revealed .btn-contact {
  pointer-events: auto;
}

.buy-card__note {
  font-size: 11.5px;
  color: var(--gray);
  text-align: center;
  line-height: 1.9;
  margin-top: 12px;
}

/* ===== صفحه دسته‌بندی ===== */
.catpage {
  padding: 24px 0 60px;
}

.cat__grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

/* --- نوار کناری فیلترها (سمت راست) --- */
.filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* در دسکتاپ، بدنه بدون جعبه است تا کارت‌ها مستقیم در ستون قرار گیرند */
.filters__body {
  display: contents;
}

.filter-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.filter-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-line);
}

.filter-card__head h3 {
  font-size: 15px;
  font-weight: 800;
}

.filter-reset {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}

.filter-reset:hover {
  text-decoration: underline;
}

/* سایر دسته‌بندی‌ها */
.cat-list {
  padding: 6px 0;
}

.cat-list a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  font-size: 13.5px;
  color: #3a3a3a;
  transition: background 0.15s, color 0.15s;
}

.cat-list a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gray);
}

.cat-list a:hover {
  background: var(--bg-soft);
  color: var(--black);
}

.cat-list a.is-active {
  background: var(--yellow-soft);
  color: var(--black);
  font-weight: 700;
}

.cat-list a.is-active svg {
  color: var(--gold);
}

/* زیردسته‌ها: با تورفتگی و فونت کوچک‌تر زیر دستهٔ اصلی نمایش داده می‌شوند */
.cat-list a.cat-list__child {
  padding-inline-start: 34px;
  font-size: 12.5px;
  color: #5a5a5a;
}

.cat-list a.cat-list__child svg {
  width: 15px;
  height: 15px;
}

/* گروهِ دستهٔ دارای زیردسته: لینک دسته + دکمهٔ فلشِ باز/بسته‌کردن زیردسته‌ها */
.cat-list .cat-group__row {
  display: flex;
  align-items: stretch;
}

.cat-list .cat-group__link {
  flex: 1 1 auto;
}

.cat-list .cat-group__toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray);
  transition: background 0.15s, color 0.15s;
}

.cat-list .cat-group__toggle:hover {
  background: var(--bg-soft);
  color: var(--black);
}

.cat-list .cat-group__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}

.cat-list .cat-group.is-open .cat-group__toggle svg {
  transform: rotate(180deg);
}

/* ناحیهٔ زیردسته‌ها: پس‌زمینهٔ کم‌رنگِ خنثی و تمام‌عرض تا از دسته‌های اصلی متمایز شود.
   با تغییر max-height (به‌جای hidden) نرم باز/بسته می‌شود. */
.cat-sub {
  background: #EEF0F2;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

.cat-list .cat-group.is-open .cat-sub {
  max-height: 600px;
  opacity: 1;
}

.cat-list .cat-sub a.cat-list__child:hover {
  background: #E1E5E9;
}

/* صفحهٔ ۴۰۴: وقتی لینک به دسته/آگهیِ موجود در بک‌اند اشاره نمی‌کند نمایش داده می‌شود */
.notfound {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 16px;
}

.notfound__box {
  text-align: center;
  max-width: 420px;
}

.notfound__code {
  font-size: 92px;
  font-weight: 800;
  line-height: 1;
  color: var(--yellow, #FEC555);
  letter-spacing: 2px;
}

.notfound__title {
  font-size: 20px;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--black);
}

.notfound__text {
  font-size: 14px;
  color: var(--gray);
  margin: 0 0 24px;
}

.notfound__home {
  display: inline-block;
  background: var(--yellow, #FEC555);
  color: var(--black);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 26px;
  border-radius: 10px;
  text-decoration: none;
}

.notfound__home:hover {
  filter: brightness(0.96);
}

/* بلوک فیلتر */
.filter-block {
  padding: 16px;
  border-bottom: 1px solid var(--gray-line);
}

.filter-block:last-child {
  border-bottom: none;
}

.filter-block__title {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* بازه قیمت */
.price-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-range input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--black);
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.price-range input:focus {
  border-color: var(--amber);
  background: var(--white);
}

.price-range input::placeholder {
  color: var(--gray);
}

.price-range span {
  font-size: 12px;
  color: var(--gray);
  flex-shrink: 0;
}

/* انتخاب کشویی */
.filter-select {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  color: var(--black);
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}

.filter-select:focus {
  border-color: var(--amber);
}

/* گزینه‌های چک‌باکس */
.opt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #3a3a3a;
  padding: 6px 0;
  cursor: pointer;
}

.opt input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.6px solid var(--gray-line-2);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.opt input:checked {
  border-color: var(--amber);
  background: var(--amber)
    center / 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23010000%22 stroke-width=%223.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%225 12 10 17 19 7%22/%3E%3C/svg%3E");
}

/* گزینه با کلید روشن/خاموش */
.opt--toggle {
  justify-content: space-between;
}

.switch {
  position: relative;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}

.switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--gray-line-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}

.switch input:checked {
  background: var(--amber);
}

.switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(1, 0, 0, 0.25);
  transition: transform 0.2s;
}

.switch input:checked::after {
  transform: translateX(-16px);
}

/* دکمه اعمال فیلتر */
.filter-apply {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--amber);
  color: var(--black);
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  padding: 12px;
  border-radius: var(--radius-sm);
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.filter-apply:hover {
  background: var(--yellow);
  box-shadow: 0 6px 16px rgba(252, 178, 22, 0.4);
}

.filter-apply:active {
  transform: scale(0.98);
}

/* --- ستون اصلی نتایج --- */
.cat__main {
  min-width: 0;
}

.cat__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.cat__heading h1 {
  font-size: 20px;
  font-weight: 800;
}

.cat__count {
  font-size: 13px;
  color: var(--gray);
  margin-top: 2px;
}

.cat__count-cats {
  display: inline-block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--gray);
}

/* تراشه فیلترهای فعال */
.cat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--black);
}

.chip button {
  display: flex;
  color: var(--gray);
  transition: color 0.15s;
}

.chip button:hover {
  color: var(--black);
}

.chip button svg {
  width: 13px;
  height: 13px;
}

/* شبکه نتایج سه‌ستونه */
.listings--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* دیدبانِ اسکرول بی‌نهایت: نقطه‌ای نامرئی که با نزدیک‌شدن کاربر، صفحهٔ بعدی پیش‌بارگذاری می‌شود.
   هنگام بارگذاری یک چرخانِ کوچک نمایش داده می‌شود. */
.infinite-sentinel {
  width: 100%;
  height: 1px;
}

.infinite-sentinel.is-loading {
  height: 48px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.infinite-sentinel.is-loading::after {
  content: "";
  width: 26px;
  height: 26px;
  border: 3px solid var(--gray-line);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: infinite-spin 0.7s linear infinite;
}

@keyframes infinite-spin {
  to { transform: rotate(360deg); }
}

/* عناصر کشوی فیلتر — فقط در موبایل و تبلت دیده می‌شوند */
/* نوار فیلتر موبایل فقط در ≤۱۰۲۴px نمایش داده می‌شود */
.filters-sticky {
  display: none;
}

/* ===== شیت فیلتر/مرتب‌سازی (از پایین باز می‌شود) ===== */
.fsheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(1, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.fsheet-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.fsheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 260;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fsheet.is-open {
  transform: translateY(0);
  box-shadow: 0 -10px 36px rgba(1, 0, 0, 0.2);
}

.fsheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  gap: 8px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--gray-line);
  font-size: 15px;
  font-weight: 800;
}
.fsheet__bar-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}
.fsheet__back {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  gap: 3px;
  max-width: 38%;
  padding: 0;
  font-family: inherit;
  background: none;
  border: none;
  color: var(--gray);
  cursor: pointer;
  transition: color 0.15s;
}
.fsheet__back svg {
  flex-shrink: 0;
}
.fsheet__back-label {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.fsheet__back:hover {
  color: var(--black);
}
.fsheet__back[hidden] {
  visibility: hidden;
  pointer-events: none;
}
.fsheet__close {
  display: flex;
  flex: 0 0 auto;
  width: 28px;
  justify-content: flex-end;
  color: var(--gray);
  cursor: pointer;
  transition: color 0.15s;
}
.fsheet__close:hover {
  color: var(--black);
}

.fsheet__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0 10px;
}
.fsheet__empty,
.filter-empty {
  padding: 18px;
  font-size: 13.5px;
  color: var(--gray);
}

/* بدنهٔ اسکرول‌شوندهٔ شیت «همه فیلترها» */
.fsheet__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: var(--white);
}
.fsheet__scroll .filter-card {
  flex-shrink: 0;
}

/* شیت «دسته‌بندی‌ها»: فهرست تمام‌عرض با آیتم‌های بزرگ‌تر برای لمس راحت */
.cat-sheet {
  padding: 0;
}
.cat-sheet .catsheet__list {
  padding: 6px 0;
}

/* فوتر چسبیده به پایین شیت با دکمهٔ «اعمال فیلترها» */
.fsheet__footer {
  flex: 0 0 auto;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--gray-line);
  background: var(--white);
}
.fsheet__footer .fsheet__apply {
  width: 100%;
  margin: 0;
}

/* گزینهٔ تک‌انتخابی (مثل مرتب‌سازی، محله) */
.fsheet-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--black);
  cursor: pointer;
}
.fsheet-opt:active {
  background: var(--bg-soft);
}
.fsheet-opt__check {
  opacity: 0;
  color: var(--gold);
}
.fsheet-opt.is-active {
  color: var(--gold);
  font-weight: 800;
}
.fsheet-opt.is-active .fsheet-opt__check {
  opacity: 1;
}

/* گزینهٔ چندانتخابی (تیک) */
.fsheet-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--black);
  cursor: pointer;
}
.fsheet-check input {
  width: 19px;
  height: 19px;
  accent-color: var(--gold);
  cursor: pointer;
}

/* بازهٔ عددی (مثل قیمت) */
.fsheet__range {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  padding: 18px;
}
.fsheet__range input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--black);
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  outline: none;
  transition: border-color 0.2s;
}
.fsheet__range input:focus {
  border-color: var(--amber);
}
.fsheet__range span {
  font-size: 13px;
  color: var(--gray);
}

/* دکمهٔ «اعمال» پایین شیت (برای چندانتخابی و بازه) */
.fsheet__apply {
  display: block;
  flex: 0 0 auto;
  width: calc(100% - 36px);
  margin: 4px 18px 18px;
  background: var(--amber);
  color: var(--black);
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  padding: 13px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

body.sheet-open {
  overflow: hidden;
}

/* ===== شیت دسته‌بندی‌ها (انتخاب دسته/زیردسته — ناوبری پله‌ای) ===== */
.catsheet__list {
  padding: 4px 0 12px;
}
.catsheet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--black);
  text-align: inherit;
  background: none;
  border: none;
  border-top: 1px solid var(--gray-line);
  cursor: pointer;
}
.catsheet-item:first-child {
  border-top: none;
}
.catsheet-item svg:not(.catsheet-chevron) {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
}
.catsheet-item span {
  flex: 1 1 auto;
  min-width: 0;
}
.catsheet-item:active {
  background: var(--bg-soft);
}
.catsheet-item.is-active {
  color: var(--gold);
  font-weight: 800;
}
.catsheet-item--drill {
  padding-inline-end: 14px;
}
.catsheet-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--gray);
}
.catsheet__list--subs .catsheet-item {
  font-size: 14px;
}
.catsheet-slide {
  animation: catsheet-slide-in 0.22s ease;
}
@keyframes catsheet-slide-in {
  from {
    opacity: 0.55;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* (قدیمی — سازگاری با markup قبلی در صورت وجود) */
.catsheet-group + .catsheet-group {
  border-top: 1px solid var(--gray-line);
}
.catsheet-row {
  display: flex;
  align-items: center;
}
.catsheet-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--black);
}
.catsheet-link svg {
  width: 20px;
  height: 20px;
  color: var(--gold);
  flex-shrink: 0;
}
.catsheet-link:active {
  background: var(--bg-soft);
}
.catsheet-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 15px 18px;
  color: var(--gray);
  cursor: pointer;
}
.catsheet-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}
.catsheet-group.is-open .catsheet-toggle svg {
  transform: rotate(180deg);
}
.catsheet-sub {
  background: var(--bg-soft);
}
.catsheet-child {
  display: block;
  padding: 13px 18px;
  padding-inline-start: 44px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-dark, var(--black));
}
.catsheet-child:active {
  background: var(--gray-line);
}

/* ===== واکنش‌گرا ===== */
@media (max-width: 1024px) {
  .categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: none;
  }
  .listings {
    grid-template-columns: repeat(2, 1fr);
  }
  .product__grid {
    grid-template-columns: 1fr;
  }
  .product__side {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  .gallery {
    grid-column: 1;
    order: -1;
  }
  .product__panels {
    grid-column: 1;
  }
  .cat__grid {
    grid-template-columns: 1fr;
  }
  .listings--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* نوار ابزار مرتب‌سازی/فیلتر: تمام‌عرض مثل هدر؛ هنگام رسیدن هدر زیر آن می‌چسبد */
  .filters-sticky {
    display: block;
    position: sticky;
    top: var(--header-h, 64px);
    z-index: 40;
    /* شکستن از حاشیهٔ container تا نوار سراسری (تمام‌عرض صفحه) شود */
    margin: 0 -20px 14px;
    padding: 0 20px;
    /* نوار با پس‌زمینهٔ ملایم خاکستری از سفیدِ صفحه متمایز می‌شود */
    background: var(--bg-soft);
    border-bottom: 1px solid var(--gray-line-2);
  }

  /* نوار فیلتر سبک دیوار: کل نوار (دکمهٔ «فیلترها» + چیپ‌ها) با هم افقی اسکرول می‌شود */
  .cat-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-toolbar::-webkit-scrollbar {
    display: none;
  }
  /* دکمهٔ «فیلترها» (کشوی کامل را باز می‌کند) — همراه چیپ‌ها اسکرول می‌شود */
  .cat-toolbar__filters {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--black);
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .cat-toolbar__filters:active {
    background: var(--bg-soft);
  }
  .cat-toolbar__filters svg {
    width: 17px;
    height: 17px;
    color: var(--gold);
  }
  /* خط جداکنندهٔ کوتاه بین «فیلترها» و چیپ‌ها */
  .cat-toolbar__sep {
    flex: 0 0 auto;
    width: 1px;
    height: 22px;
    align-self: center;
    background: var(--gray-line);
  }
  /* ناحیهٔ چیپ‌ها (با JS پر می‌شود) — اسکرول مستقل ندارد؛ همراه کل نوار حرکت می‌کند */
  .cat-toolbar__chips {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    /* فضای انتهای اسکرول تا آخرین چیپ کامل دیده شود */
    padding-left: 4px;
  }
  .chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 13px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #3a3a3a;
    background: var(--white);
    border: 1px solid var(--gray-line);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .chip:active {
    background: var(--bg-soft);
  }
  .chip__caret {
    width: 14px;
    height: 14px;
    color: var(--gray);
    transition: color 0.15s;
  }
  .chip.is-active {
    background: var(--yellow-soft);
    border-color: var(--amber);
    color: var(--black);
    font-weight: 700;
  }
  .chip.is-active .chip__caret {
    color: var(--gold);
  }
  /* ضربدرِ حذف فیلتر روی چیپ فعال */
  .chip__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-inline-start: 1px;
    border-radius: 50%;
    color: var(--white);
    background: var(--gold);
  }
  .chip__clear:active {
    opacity: 0.8;
  }

  /* سایدبار فیلتر فقط مخصوص دسکتاپ است؛ در موبایل/تبلت با نوار چیپ و
     شیت «همه فیلترها» جایگزین می‌شود */
  .filters {
    display: none;
  }
}

@media (max-width: 760px) {
  /* در موبایل هدر فقط شامل باکس جستجوست؛ 14+46+14+1 */
  div[data-include="header.inc"] {
    min-height: 75px;
  }
  .container.header__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .header__actions {
    display: none;
  }
  .logo,
  .link-login,
  .city,
  .btn-post,
  .btn-menu-desktop,
  .desktop-menu {
    display: none;
  }
  /* همبرگر در موبایل، سمت راستِ کادر جستجو */
  .btn-menu {
    display: flex;
    order: -1;
    flex-shrink: 0;
    margin-left: 0;
    margin-right: -4px;
  }
  .search {
    flex: 1;
    margin-bottom: 0;
  }

  /* ===== نوار پایین چسبیده به کف صفحه ===== */
  .bottom-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    background: var(--white);
    border-top: 1px solid var(--gray-line);
    box-shadow: 0 -4px 16px rgba(1, 0, 0, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1;
    padding: 9px 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray);
    transition: color 0.15s;
  }
  .bottom-nav__item svg {
    width: 24px;
    height: 24px;
  }
  .bottom-nav__item:active {
    color: var(--black);
  }
  /* دکمه ثبت رایگان آگهی در وسط، برجسته */
  .bottom-nav__item--post {
    color: var(--black);
  }
  .bottom-nav__post-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -16px;
    border: 3px solid var(--white);
    border-radius: 50%;
    background: var(--amber);
    color: var(--black);
    box-shadow: 0 4px 12px rgba(252, 178, 22, 0.45);
  }
  .bottom-nav__post-icon svg {
    width: 24px;
    height: 24px;
  }

  /* فضای خالی پایین صفحه تا نوار روی محتوا نیفتد */
  body {
    padding-bottom: 68px;
  }

  /* پوشش تیره پشت کشو */
  .mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(1, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .mobile-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* کشوی منو از سمت راست */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    z-index: 200;
    background: var(--white);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  .mobile-menu.is-open {
    transform: translateX(0);
    box-shadow: -10px 0 36px rgba(1, 0, 0, 0.2);
  }

  /* نوار بالایی کشو */
  .mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    border-bottom: 1px solid var(--gray-line);
    flex-shrink: 0;
  }
  .mobile-menu__title {
    font-size: 15px;
    font-weight: 800;
  }
  .mobile-menu__close {
    display: flex;
    color: var(--gray);
    padding: 4px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
  }
  .mobile-menu__close:hover {
    color: var(--black);
    background: var(--bg-soft);
  }

  /* لیست آیتم‌های منو */
  .mobile-menu__nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    transition: background 0.15s;
  }
  .mobile-menu__item:hover {
    background: var(--bg-soft);
  }
  .mobile-menu__item svg {
    width: 20px;
    height: 20px;
    color: var(--gold);
    flex-shrink: 0;
  }

  /* قفل اسکرول صفحه هنگام باز بودن کشو */
  body:has(.mobile-menu.is-open) {
    overflow: hidden;
  }

  .categories {
    grid-template-columns: repeat(3, 1fr);
  }
  .category__name {
    font-size: 10px;
  }
  .listings {
    grid-template-columns: 1fr;
  }
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .specs {
    grid-template-columns: 1fr;
  }
  .container {
    padding: 0 6px;
  }
  .catpage {
    padding: 18px 0 48px;
  }
  .cat__bar {
    margin-bottom: 14px;
  }
  /* در موبایل حاشیهٔ container \u200F۱۶px است؛ تمام‌عرض‌بودن نوار را با همان مقدار تنظیم کن */
  .filters-sticky {
    margin-left: -6px;
    margin-right: -6px;
    padding-left: 6px;
    padding-right: 6px;
  }
  .cat__main .listings {
    gap: 14px;
  }
  .cat__chips {
    margin-bottom: 14px;
  }
}

@media (max-width: 420px) {
  .categories {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .listings,
  .listings--3 {
    grid-template-columns: 1fr;
  }
  .gallery__thumbs {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
}

/* ===== صفحات ورود / کد تأیید ===== */
.auth-body {
  background: var(--bg-soft);
  min-height: 100vh;
}

.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 28px 24px;
  text-align: center;
}

.auth__logo {
  display: inline-flex;
  margin-bottom: 18px;
}

.auth__logo img {
  height: 44px;
  width: auto;
}

.auth__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 8px;
}

.auth__subtitle {
  font-size: 13.5px;
  color: var(--gray);
  margin-bottom: 24px;
  line-height: 1.9;
}

.auth__phone {
  font-weight: 700;
  color: var(--black);
  margin: 0 4px;
}

.auth__edit {
  display: inline-block;
  margin-right: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold);
}

.auth__edit:hover {
  text-decoration: underline;
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}

.auth__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 2px;
}

.auth__field {
  display: flex;
  align-items: center;
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  direction: ltr; /* پیشوند +۹۸ سمت چپ، ورودی سمت راست */
  transition: border-color 0.2s, background 0.2s;
}

.auth__field:focus-within {
  border-color: var(--amber);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(252, 178, 22, 0.15);
}

.auth__prefix {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray);
  padding-right: 10px;
  border-right: 1px solid var(--gray-line);
  margin-right: 10px;
  user-select: none;
}

.auth__field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  padding: 13px 0;
  letter-spacing: 1px;
}

.auth__field input::placeholder {
  color: var(--gray);
  font-weight: 500;
  letter-spacing: 0;
}

.auth__error {
  min-height: 20px;
  font-size: 12.5px;
  color: #d63b3b;
  margin-top: 2px;
}

.auth__submit {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--amber);
  color: var(--black);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  padding: 13px 18px;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.auth__submit:hover {
  background: var(--yellow);
  box-shadow: 0 8px 22px rgba(252, 178, 22, 0.35);
}

.auth__submit:active {
  transform: scale(0.98);
}

.auth__submit svg {
  transform: scaleX(-1); /* در RTL آیکون به سمت چپ */
}

.auth__terms {
  margin-top: 18px;
  font-size: 12px;
  color: var(--gray);
  line-height: 1.9;
}

.auth__terms a {
  color: var(--gold);
  font-weight: 600;
}

.auth__terms a:hover {
  text-decoration: underline;
}

.auth__back {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray);
  transition: color 0.2s;
}

.auth__back:hover {
  color: var(--black);
}

/* ===== خانه‌های کد OTP ===== */
.otp {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.otp__box {
  width: 100%;
  aspect-ratio: 1 / 1;
  text-align: center;
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  color: var(--black);
  background: var(--bg-soft);
  border: 1.5px solid var(--gray-line);
  border-radius: var(--radius-sm);
  outline: 0;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.otp__box:focus {
  border-color: var(--amber);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(252, 178, 22, 0.18);
}

.auth__resend {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--gray);
  text-align: center;
}

.auth__resend strong {
  color: var(--black);
  font-weight: 700;
  margin: 0 4px;
}

.auth__resend-btn {
  background: transparent;
  border: 0;
  color: var(--gold);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.auth__resend-btn:hover {
  background: var(--bg-soft);
  color: var(--black);
}

.auth__resend-btn:disabled {
  color: var(--gray);
  cursor: not-allowed;
  background: transparent;
}

@media (max-width: 420px) {
  .auth__card {
    padding: 26px 20px 20px;
  }
  .otp__box {
    font-size: 20px;
  }
}

/* ===== پاپ‌آپ ورود / ثبت‌نام ===== */
body.no-scroll {
  overflow: hidden;
}

.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-modal.is-open {
  display: flex;
  animation: authFadeIn 0.18s ease-out;
}

.auth-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 24, 0.55);
  backdrop-filter: blur(2px);
}

.auth-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  padding: 32px 28px 24px;
  text-align: center;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  animation: authPopIn 0.22s ease-out;
}

.auth-modal__close {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--gray);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.auth-modal__close:hover {
  background: var(--bg-soft);
  color: var(--black);
}

.auth-step .auth__edit {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

@keyframes authFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes authPopIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 420px) {
  .auth-modal__dialog {
    padding: 28px 20px 20px;
  }
}

/* ===== صفحه حساب کاربری ===== */
.account {
  padding: 28px 0 60px;
  background: var(--bg-soft);
  min-height: calc(100vh - 76px);
}

/* ستون کناری: کارت کاربر + تب‌ها، به‌صورت چسبان در بالا */
.account__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 96px;
}

.account__user {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow);
}

.account__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--yellow-soft);
  color: var(--gold);
  flex-shrink: 0;
}

.account__avatar svg {
  width: 30px;
  height: 30px;
}

.account__user-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.account__user-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--black);
}

.account__user-phone {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray);
  letter-spacing: 0.5px;
}

/* چیدمان دو ستونه: ستون کناری (راست) + محتوا (چپ/وسط) */
.account__grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 22px;
  align-items: start;
}

/* کارت تب‌ها */
.account__tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 10px;
}

.account-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #3a3a3a;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: right;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.account-tab svg {
  width: 20px;
  height: 20px;
  color: var(--gray);
  flex-shrink: 0;
  transition: color 0.18s;
}

.account-tab:hover {
  background: var(--bg-soft);
  color: var(--black);
}

.account-tab.is-active {
  background: var(--yellow-soft);
  color: var(--black);
  font-weight: 800;
}

.account-tab.is-active svg {
  color: var(--gold);
}

.account-tab--logout {
  margin-top: 6px;
  border-top: 1px solid var(--gray-line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding-top: 14px;
  color: #d63b3b;
}

.account-tab--logout svg {
  color: #d63b3b;
}

.account-tab--logout:hover {
  background: rgba(214, 59, 59, 0.08);
  color: #d63b3b;
}

.account-tab--logout.is-active {
  background: rgba(214, 59, 59, 0.12);
  color: #d63b3b;
}

.account-tab--logout.is-active svg {
  color: #d63b3b;
}

/* ستون محتوای تب */
.account__content {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 24px 26px;
  min-height: 360px;
  /* آیتمِ grid به‌طور پیش‌فرض min-width:auto دارد، یعنی زیرِ عرضِ محتوایش کوچک
     نمی‌شود. بدونِ این صفر، جدولِ پهنِ «صورت‌حساب‌ها» (min-width:720px) به‌جای
     اسکرول‌شدن در قابِ خودش، ستونِ 1fr را کش می‌آورد و کلِ صفحه در موبایل بیرون
     می‌زند. با min-width:0 ستون می‌تواند کوچک شود و overflow-x جدول عمل می‌کند. */
  min-width: 0;
}

.account-pane {
  display: none;
}

.account-pane.is-active {
  display: block;
}

.account-pane__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--gray);
}

.account-pane__placeholder h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 8px;
}

.account-pane__placeholder p {
  font-size: 13.5px;
  color: var(--gray);
}

/* ===== تب «آگهی‌های من» ===== */
.my-ads__head {
  margin-bottom: 18px;
}

.my-ads__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 6px;
}

.my-ads__subtitle {
  font-size: 13px;
  color: var(--gray);
  line-height: 1.7;
}

.my-ads__status {
  font-size: 13.5px;
  color: var(--gray);
  padding: 24px 4px;
}

.my-ads__status[hidden] {
  display: none;
}

/* شبکهٔ آگهی‌های کاربر؛ به‌خاطر باریک‌تر بودن ستونِ محتوا، خودکار چیده می‌شود */
.account-ads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 760px) {
  .account-ads {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .account-ads {
    grid-template-columns: 1fr;
  }
}

/* ===== تب «آمارهای آگهی» =====
   هر آگهی یک کادرِ عکس+عنوان است؛ کلیک روی آن جدولِ آمار را با حرکت نرم
   (ترفند grid-template-rows: 0fr → 1fr) زیرش باز می‌کند. */
.ad-stats__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 16px;
}

.ad-stats__status {
  font-size: 13.5px;
  color: var(--gray);
  padding: 24px 4px;
}

.ad-stats__status[hidden] {
  display: none;
}

.ad-stats__ads {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.ad-stats__item {
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ad-stats__item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  text-align: right;
  background: var(--white);
  transition: background 0.18s;
}

.ad-stats__item-head:hover {
  background: var(--bg-soft);
}

.ad-stats__thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-soft);
  display: block;
}

/* عنوان بلند به‌جای تک‌خطی‌ماندن (که در موبایل کادر را از صفحه بیرون می‌زد)
   به خط بعد می‌شکند؛ overflow-wrap برای کلمه‌های بی‌فاصلهٔ خیلی بلند است. */
.ad-stats__item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--black);
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ad-stats__chev {
  margin-right: auto;
  width: 16px;
  height: 16px;
  color: var(--gray);
  flex-shrink: 0;
  transition: transform 0.18s;
}

.ad-stats__item.is-open .ad-stats__chev {
  transform: rotate(180deg);
}

/* بازشدنِ نرم بدنهٔ آمار */
.ad-stats__item-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.ad-stats__item.is-open .ad-stats__item-body {
  grid-template-rows: 1fr;
}

.ad-stats__item-inner {
  overflow: hidden;
  min-height: 0;
}

.ad-stats__item-inner > :first-child {
  border-top: 1px solid var(--gray-line);
}

.ad-stats__table {
  width: 100%;
  border-collapse: collapse;
}

.ad-stats__table th {
  text-align: right;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--gray);
  padding: 8px 14px;
}

.ad-stats__table td {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  padding: 8px 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ad-stats__table tr + tr th,
.ad-stats__table tr + tr td {
  border-top: 1px solid var(--gray-line);
}

.ad-stats__loading {
  font-size: 12.5px;
  color: var(--gray);
  padding: 10px 14px;
}

@media (prefers-reduced-motion: reduce) {
  .ad-stats__item-body,
  .ad-stats__chev {
    transition: none;
  }
}

/* پوشهٔ هر آگهی در «آگهی‌های من»: خودِ کادر، شاملِ کارت + نوار اکشن‌ها در یک قاب */
.account-ad {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.2s;
}

.account-ad:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* کارت داخل کادر دیگر قاب جدا ندارد تا با اکشن‌ها یک کادر یکپارچه شود.
   در این صفحه کارت همان حالت عمودیِ قبلی را نگه می‌دارد (برخلاف بقیهٔ صفحات که افقی شده‌اند). */
.account-ad .card {
  flex: 1;
  flex-direction: column;
  border: none;
  border-radius: 0;
  background: transparent;
}

.account-ad .card__media {
  flex: none;
  max-width: none;
  align-self: auto;
  min-height: 0;
  margin: 0;
  border-radius: 0;
  aspect-ratio: 4 / 3;
}

/* در «آگهی‌های من» عنوان مثل قبل تا دو خط نمایش داده می‌شود (نه تک‌خطی با …) */
.account-ad .card__title {
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
}

/* در «آگهی‌های من» قیمت مثل قبل پررنگ می‌ماند */
.account-ad .card__price {
  font-weight: 800;
}

.account-ad .card:hover {
  transform: none;
  box-shadow: none;
}

/* نوار پایینِ همان کادر: وضعیت موجودی (روشن/خاموش) و ویرایش */
.account-ad__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--white);
  border-top: 1px solid var(--gray-line);
}

.account-ad__status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-ad__status-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--black);
}

.account-ad__edit {
  border: none;
  background: none;
  padding: 4px 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--amber);
  cursor: pointer;
}

.account-ad__edit:hover {
  text-decoration: underline;
}

.account-ad__edit.is-open {
  color: var(--black);
}

/* ===== باکس ویرایش آگهی (ردیفِ تمام‌عرض زیر همان آگهی در گرید آگهی‌های من) ===== */
.account-edit-row {
  grid-column: 1 / -1;
}

.account-edit {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-hover);
  animation: accountEditIn 0.22s ease;
}

@keyframes accountEditIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.account-edit__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-line);
}

.account-edit__head-start {
  display: flex;
  align-items: center;
  gap: 14px;
}

.account-edit__title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--black);
}

.account-edit__delete {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #d63b3b;
  background: rgba(214, 59, 59, 0.08);
  border: 1px solid rgba(214, 59, 59, 0.35);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.account-edit__delete svg {
  width: 16px;
  height: 16px;
}

.account-edit__delete:hover {
  background: rgba(214, 59, 59, 0.14);
  border-color: #d63b3b;
}

.account-edit__delete:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ===== پاپ‌آپِ تأیید (حذف آگهی و …) ===== */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.confirm-modal.is-open {
  display: flex;
  animation: authFadeIn 0.18s ease-out;
}

.confirm-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 24, 0.55);
  backdrop-filter: blur(2px);
}

.confirm-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  padding: 26px 24px 20px;
  text-align: center;
  animation: authPopIn 0.22s ease-out;
}

.confirm-modal__msg {
  margin: 0 0 20px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--black);
}

.confirm-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.confirm-modal__btn {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.confirm-modal__btn--cancel {
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  color: var(--black);
}

.confirm-modal__btn--cancel:hover {
  background: var(--white);
  border-color: var(--gray);
}

.confirm-modal__btn--confirm {
  background: var(--amber);
  border: 1px solid var(--amber);
  color: var(--black);
}

.confirm-modal__btn--confirm:hover {
  background: var(--yellow);
}

.confirm-modal__btn--danger {
  background: #d63b3b;
  border-color: #d63b3b;
  color: #fff;
}

.confirm-modal__btn--danger:hover {
  background: #c22f2f;
  box-shadow: 0 6px 18px rgba(214, 59, 59, 0.3);
}

.account-edit__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gray-line);
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.account-edit__close svg {
  width: 16px;
  height: 16px;
}

.account-edit__close:hover {
  background: var(--bg-soft);
  border-color: var(--amber);
}

.account-edit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}

.account-edit__grid .form-field--full {
  grid-column: 1 / -1;
}

.account-edit__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--gray-text, #6b7280);
}

.account-edit__actions {
  margin-top: 14px;
}

.account-edit__actions .form-submit {
  width: 100%;
}

@media (max-width: 600px) {
  .account-edit__grid {
    grid-template-columns: 1fr;
  }
}

/* کارتِ «در حال بررسی» لینک نیست و کمی محو نمایش داده می‌شود */
.card--review {
  cursor: default;
}

.card--review .card__media img {
  filter: grayscale(0.35) brightness(0.9);
}

/* نوارِ «در حال بررسی برای انتشار» روی تصویر */
.card__review {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  z-index: 2;
}

/* نوارِ «در انتظار پرداخت» روی تصویر (آگهیِ دستهٔ پولی که هنوز پرداخت نشده) */
.card__review--pay {
  background: rgba(190, 147, 60, 0.62);
}

/* نشانِ «منتشر شده» در گوشهٔ پایین‌ـراستِ تصویر (پس از تأیید مدیر سایت) */
.card__published {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  background: rgba(22, 163, 74, 0.92);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  z-index: 2;
}

/* واکنش‌گرا */
@media (max-width: 1024px) {
  .account__grid {
    grid-template-columns: 220px 1fr;
    gap: 16px;
  }
}

@media (max-width: 760px) {
  .account {
    padding: 18px 0 40px;
  }
  /* حاشیهٔ کناری صفحهٔ حساب در موبایل حداقلی باشد تا کادرها تقریباً تمام‌عرض شوند */
  .account .container {
    padding: 0 6px;
  }
  .account__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .account__side {
    position: static;
  }
  .account__content {
    padding: 18px 16px;
  }
  .account__user {
    width: 100%;
    padding: 12px 14px;
  }
}

/* ===== فرم ثبت آگهی ===== */
.post-form {
  text-align: right;
}

.post-form__head {
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-line);
}

.post-form__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
  margin-bottom: 4px;
}

.post-form__subtitle {
  font-size: 13px;
  color: var(--gray);
}

.post-form__body {
  display: block;
}

/* ===== فرم مرحله‌ای ===== */
.form-stepper {
  display: flex;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.form-stepper__item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray);
  text-align: center;
}

/* خط رابط بین دایره‌ها: از مرکز هر دایره به سمت راست (دایره قبلی) کشیده می‌شود */
.form-stepper__item::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--gray-line);
  z-index: 0;
}
.form-stepper__item:first-child::before {
  display: none;
}
.form-stepper__item.is-active::before,
.form-stepper__item.is-done::before {
  background: var(--amber);
}

.form-stepper__dot {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--gray-line);
  color: var(--gray);
  font-size: 13px;
  font-weight: 800;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.form-stepper__item.is-active .form-stepper__dot,
.form-stepper__item.is-done .form-stepper__dot {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--black);
}
.form-stepper__item.is-active .form-stepper__label {
  color: var(--black);
  font-weight: 800;
}

.form-step {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  animation: pfStepIn 0.25s ease;
}
.form-step.is-active {
  display: grid;
}
@keyframes pfStepIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-step__heading {
  grid-column: 1 / -1;
  font-size: 15px;
  font-weight: 800;
  color: var(--black);
  margin: 0 0 2px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--gray-line);
}

.form-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-line);
}

.form-nav__btn {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s, opacity 0.2s;
}
.form-nav__btn--next {
  background: var(--amber);
  color: var(--black);
  border: 0;
}
.form-nav__btn--next:hover {
  background: var(--yellow);
  box-shadow: 0 6px 18px rgba(252, 178, 22, 0.25);
}
.form-nav__btn--next:active {
  transform: translateY(1px);
}
.form-nav__btn--prev {
  background: #f3f4f6;
  color: var(--black);
  border: 1px solid var(--gray-line);
}
.form-nav__btn--prev:hover {
  background: #e9eaed;
}
.form-nav__btn.is-invisible {
  visibility: hidden;
}

/* دکمه «ثبت آگهی» تا مرحله آخر پنهان بماند
   (کلاس .form-submit با display:inline-flex وگرنه attribute hidden را خنثی می‌کند) */
.form-nav .form-submit[hidden] {
  display: none;
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: #d63b3b;
}

.form-check-group.is-invalid .form-check__box {
  border-color: #d63b3b;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* خاصیت hidden باید فیلد را مخفی کند؛ بدون این، display:flex بالا آن را خنثی می‌کند */
.form-field[hidden] {
  display: none;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-section {
  grid-column: 1 / -1;
  margin-top: 6px;
}

.form-section__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--black);
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--gray-line);
}

.form-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--black);
}

.form-label--required::after {
  content: "*";
  color: #d63b3b;
  margin-right: 4px;
  font-weight: 800;
}

.form-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--gray);
  margin-right: 4px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: 0;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--gray);
  font-weight: 500;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--amber);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(252, 178, 22, 0.15);
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7B7B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 16px 16px;
  padding-left: 38px;
}

.form-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.8;
}

/* راهنمای زیر فیلد */
.form-hint {
  font-size: 12.5px;
  color: var(--gray);
  margin-top: 2px;
}

.form-hint--warn {
  color: #d63b3b;
}

/* آپلود تصاویر */
.uploader {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.uploader__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  background: var(--bg-soft);
  border: 1.5px dashed var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 26px 18px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.uploader__drop:hover,
.uploader__drop--hover {
  border-color: var(--amber);
  background: var(--white);
}

.uploader__drop--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.uploader__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--yellow-soft);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.uploader__icon svg {
  width: 22px;
  height: 22px;
}

.uploader__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--black);
}

.uploader__sub {
  font-size: 12.5px;
  color: var(--gray);
}

.uploader__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.uploader__previews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.uploader__previews:empty {
  display: none;
}

.uploader__item {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  display: flex;
  flex-direction: column;
}

.uploader__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.uploader__remove {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: var(--white);
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s;
}

.uploader__remove svg {
  width: 14px;
  height: 14px;
}

.uploader__remove:hover {
  background: #d63b3b;
}

.uploader__remove:active {
  transform: scale(0.94);
}

/* نشان «تصویر اصلی» روی اولین تصویر */
.uploader__item--main {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber) inset;
}

.uploader__badge {
  display: block;
  text-align: center;
  background: var(--amber);
  color: var(--black);
  font-size: 12px;
  font-weight: 800;
  padding: 8px 6px;
  border-top: 1px solid var(--gray-line);
}

/* جابه‌جایی متن کامل/کوتاه بین دسکتاپ و موبایل */
.uploader__badge .t-short,
.uploader__set-main .t-short {
  display: none;
}

/* دکمه «انتخاب به‌عنوان تصویر اصلی» روی سایر تصاویر */
.uploader__set-main {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--bg-soft);
  color: var(--black);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 6px;
  border: 0;
  border-top: 1px solid var(--gray-line);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.uploader__set-main:hover {
  background: var(--yellow-soft);
  color: var(--black);
}

.uploader__set-main:active {
  background: var(--amber);
}

/* فیلد فرعی (مثلاً مبلغ ودیعه وقتی نقد انتخاب شود) */
.form-subfield {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-line);
}

.form-subfield[hidden] {
  display: none;
}

.form-label--sub {
  font-size: 12.5px;
  color: var(--gray);
  font-weight: 600;
}

/* چک‌باکس‌ها */
.form-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.form-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--black);
  user-select: none;
}

.form-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-check__box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--gray-line);
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, border-color 0.18s;
  position: relative;
}

.form-check__box::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--amber);
  transform: scale(0);
  transition: transform 0.15s;
}

.form-check input:checked + .form-check__box {
  border-color: var(--amber);
}

.form-check input:checked + .form-check__box::after {
  transform: scale(1);
}

.form-check input:focus-visible + .form-check__box {
  box-shadow: 0 0 0 3px rgba(252, 178, 22, 0.2);
}

/* ردیف کلید روشن/خاموش */
.form-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.form-toggle-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-toggle-row__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
}

.form-toggle-row__hint {
  font-size: 12px;
  color: var(--gray);
}

.form-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.form-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-toggle__track {
  display: inline-block;
  width: 44px;
  height: 24px;
  background: #d2d2d2;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}

.form-toggle__thumb {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: right 0.2s, background 0.2s;
}

.form-toggle input:checked + .form-toggle__track {
  background: var(--amber);
}

.form-toggle input:checked + .form-toggle__track .form-toggle__thumb {
  right: 22px;
}

.form-toggle input:focus-visible + .form-toggle__track {
  box-shadow: 0 0 0 3px rgba(252, 178, 22, 0.25);
}

/* اکشن‌ها */
.form-status {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
}

.form-status--ok {
  background: rgba(34, 160, 94, 0.12);
  color: #1d8a4f;
}

.form-status--err {
  background: rgba(214, 59, 59, 0.1);
  color: #d63b3b;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--amber);
  color: var(--black);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  padding: 13px 28px;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.form-submit:hover {
  background: var(--yellow);
  box-shadow: 0 6px 18px rgba(252, 178, 22, 0.25);
}

.form-submit:active {
  transform: translateY(1px);
}

@media (max-width: 760px) {
  .form-step {
    grid-template-columns: 1fr;
  }
  .form-stepper__label {
    display: none;
  }
  .form-toggle-row {
    flex-direction: row;
    align-items: center;
  }

  /* پیش‌نمایش تصاویر در موبایل: کوچک، مربعی، کنار هم */
  .uploader__previews {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .uploader__badge,
  .uploader__set-main {
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 4px;
    line-height: 1.3;
  }
  .uploader__badge .t-full,
  .uploader__set-main .t-full {
    display: none;
  }
  .uploader__badge .t-short,
  .uploader__set-main .t-short {
    display: inline;
  }
  .uploader__remove {
    width: 22px;
    height: 22px;
    top: 4px;
    left: 4px;
  }
  .uploader__remove svg {
    width: 11px;
    height: 11px;
  }
}

@media (max-width: 420px) {
  .uploader__previews {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   صفحهٔ «درباره ما»
   ============================================================ */
.about {
  display: block;
}

/* --- قهرمان --- */
.about-hero {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--gray-line);
  padding: 56px 0 60px;
}

.about-hero__inner {
  max-width: 760px;
  text-align: center;
}

.about-hero__badge {
  display: inline-block;
  background: var(--yellow-soft);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.about-hero__title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 16px;
}

.about-hero__lead {
  font-size: 16px;
  color: var(--gray);
  line-height: 2;
  margin-bottom: 28px;
}

.about-hero__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.about-btn {
  display: inline-block;
  font-weight: 700;
  font-size: 14.5px;
  padding: 12px 28px;
  border-radius: 10px;
  transition: transform 0.16s, box-shadow 0.2s, filter 0.2s, background 0.2s, color 0.2s;
}

.about-btn--primary {
  background: var(--yellow);
  color: var(--black);
}

.about-btn--primary:hover {
  filter: brightness(0.97);
  transform: translateY(-2px);
}

.about-btn--ghost {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--gray-line-2);
}

.about-btn--ghost:hover {
  border-color: var(--yellow);
  transform: translateY(-2px);
}

.about-btn--dark {
  background: var(--black);
  color: var(--white);
}

.about-btn--dark:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

/* --- آمار --- */
.about-stats {
  padding: 40px 0;
}

.about-stats__card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 12px;
  text-align: center;
}

.about-stat {
  padding: 4px 16px;
}

.about-stat + .about-stat {
  border-right: 1px solid var(--gray-line);
}

.about-stat__num {
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 4px;
}

.about-stat__label {
  font-size: 13.5px;
  color: var(--gray);
}

/* --- بخش‌ها --- */
.about-section {
  padding: 56px 0;
}

.about-section--soft {
  background: var(--bg-soft);
  border-top: 1px solid var(--gray-line);
  border-bottom: 1px solid var(--gray-line);
}

.about-h2 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 20px;
}

.about-h2 span {
  display: inline-block;
  width: 26px;
  height: 4px;
  background: var(--amber);
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.about-h2--center {
  text-align: center;
  margin-bottom: 36px;
}

/* --- بخش دوستونه --- */
.about-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.about-split__text p {
  color: var(--gray);
  line-height: 2;
  margin-bottom: 14px;
}

.about-split__text p:last-child {
  margin-bottom: 0;
}

.about-quote {
  background: linear-gradient(135deg, var(--yellow-soft), var(--yellow));
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  color: var(--black);
}

.about-quote svg {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  color: var(--gold);
}

.about-quote p {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.9;
}

/* --- گام‌ها --- */
.about-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.about-step {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s;
}

.about-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--yellow-soft);
}

.about-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--gold);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 16px;
}

.about-step:hover .about-step__num {
  background: var(--yellow-soft);
}

.about-step h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.about-step p {
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.9;
}

/* --- ارزش‌ها --- */
.about-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.about-value {
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 26px 22px;
  transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s;
}

.about-value:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--yellow-soft);
}

.about-value__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: var(--bg-soft);
  color: var(--gold);
  margin-bottom: 16px;
}

.about-value__icon svg {
  width: 26px;
  height: 26px;
}

.about-value h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.about-value p {
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.9;
}

/* --- فراخوان نهایی --- */
.about-cta {
  padding: 0 0 64px;
}

.about-cta__card {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.about-cta__title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 12px;
}

.about-cta__text {
  font-size: 15px;
  color: #c9c9c9;
  margin-bottom: 26px;
  line-height: 1.9;
}

/* --- واکنش‌گرا --- */
@media (max-width: 1024px) {
  .about-steps,
  .about-values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .about-hero {
    padding: 44px 0 48px;
  }
  .about-hero__title {
    font-size: 26px;
  }
  .about-hero__lead {
    font-size: 15px;
  }
  .about-stats__card {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 24px;
    padding: 26px 12px;
  }
  .about-stat + .about-stat {
    border-right: none;
  }
  .about-stat:nth-child(even) {
    border-right: 1px solid var(--gray-line);
  }
  .about-section {
    padding: 44px 0;
  }
  .about-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 420px) {
  .about-hero__title {
    font-size: 23px;
  }
  .about-steps,
  .about-values {
    grid-template-columns: 1fr;
  }
  .about-hero__cta .about-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ===== قوانین و مقررات ===== */
.terms-doc {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 0 64px;
}

.terms-updated {
  font-size: 13px;
  color: var(--gray);
  margin-bottom: 26px;
}

.terms-callout {
  background: var(--yellow-soft);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 38px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.terms-callout svg {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--gold);
  margin-top: 3px;
}

.terms-callout p {
  font-size: 15px;
  line-height: 2;
  font-weight: 600;
  color: var(--black);
  margin: 0;
}

.terms-block {
  margin-bottom: 30px;
}

.terms-block h2 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.terms-block .terms-num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--yellow);
  color: var(--black);
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.terms-block p {
  font-size: 14.5px;
  line-height: 2.1;
  color: var(--gray);
  margin-bottom: 10px;
}

.terms-block p:last-child {
  margin-bottom: 0;
}

.terms-block ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 12px;
}

.terms-block li {
  position: relative;
  padding-right: 20px;
  font-size: 14.5px;
  line-height: 2.1;
  color: var(--gray);
  margin-bottom: 6px;
}

.terms-block li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

.terms-block strong {
  color: var(--black);
  font-weight: 700;
}

.terms-block a {
  color: var(--gold);
  font-weight: 600;
}

.terms-block a:hover {
  text-decoration: underline;
}

.terms-contact {
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 8px;
}

@media (max-width: 760px) {
  .terms-doc {
    padding: 32px 0 48px;
  }
  .terms-block h2 {
    font-size: 16.5px;
  }
  .terms-callout p {
    font-size: 14px;
  }
}

/* ===== تماس با ما ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.contact-card {
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
  text-align: center;
}

.contact-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--yellow-soft);
  color: var(--gold);
  margin-bottom: 18px;
}

.contact-card__icon svg {
  width: 28px;
  height: 28px;
}

.contact-card__title {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 14px;
}

.contact-card__sub {
  font-size: 13.5px;
  color: var(--gray);
  margin-bottom: 22px;
}

/* دکمه «تماس با پشتیبانی» (همان استایل دکمه «تماس با مالک» در .contact-reveal) */
.contact .contact-reveal {
  max-width: 320px;
  margin: 0 auto 22px;
}

.contact-hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  color: var(--gray);
  margin-bottom: 18px;
}

.contact-hours svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;
}

.contact-hours strong {
  color: var(--black);
  font-weight: 800;
}

.contact-note {
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.9;
  max-width: 420px;
  margin: 0 auto;
}

.contact-note strong {
  color: var(--black);
  font-weight: 700;
}

/* --- شبکه پیام‌رسان‌ها --- */
.contact-messengers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.contact-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 6px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius-sm);
  transition: transform 0.16s, box-shadow 0.2s, border-color 0.2s;
}

.contact-msg:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--yellow-soft);
}

.contact-msg__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: var(--white);
}

.contact-msg__icon svg {
  width: 24px;
  height: 24px;
}

.contact-msg__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--black);
}

/* رنگ برند هر پیام‌رسان */
.contact-msg--bale     .contact-msg__icon { background: #00a86b; }
.contact-msg--rubika   .contact-msg__icon { background: #f5564e; }
.contact-msg--eitaa    .contact-msg__icon { background: #ff7a00; }
.contact-msg--whatsapp .contact-msg__icon { background: #25d366; }
.contact-msg--telegram .contact-msg__icon { background: #229ed9; }
.contact-msg--instagram .contact-msg__icon {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.contact-msg--twitter  .contact-msg__icon { background: #000000; }
.contact-msg--linkedin .contact-msg__icon { background: #0a66c2; }

/* --- واکنش‌گرا --- */
@media (max-width: 760px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .contact-phone {
    font-size: 23px;
  }
}

@media (max-width: 420px) {
  .contact-messengers {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* فاصلهٔ افقی یکسان با صفحهٔ حساب در همهٔ صفحه‌ها، فقط در موبایل */
@media (max-width: 760px) {
  .container {
    padding-inline: 6px !important;
  }
}
/* گاتر سراسریِ صفحات در موبایل و تبلت */
@media (max-width: 1024px) {
  .container,
  .container.header__inner,
  .breadcrumb__inner,
  .desktop-menu__inner,
  main > .container,
  main .container,
  .footer .container {
    width: 100%;
    max-width: none;
    padding-inline: 6px !important;
  }

  /* کارت‌های صفحهٔ اصلی از لبهٔ کانتینر فاصلهٔ اضافه نگیرند */
  .categories {
    max-width: none;
    margin-inline: 0;
    justify-content: space-between;
  }
}
/* صفحهٔ اصلی: کارت‌های دسته‌بندی مانند کادرهای account کل عرضِ کانتینر را پر کنند */
@media (max-width: 760px) {
  .categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    margin-inline: 0;
    gap: 10px;
  }

  .category {
    width: auto;
    min-width: 0;
    flex: none;
  }
}
/* تمام قاب‌های محتواییِ صفحات با گاتر مشترک موبایل */
@media (max-width: 1024px) {
  .product__grid,
  .cat__grid,
  .about-hero__inner,
  .about-split,
  .about-steps,
  .about-values,
  .about-stats__card,
  .terms-doc,
  .contact-grid,
  .notfound__box,
  .listings,
  .footer__grid {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}

/* ===== دکمهٔ «تکمیل پرداخت» در کارت آگهیِ «در انتظار پرداخت» (آگهی‌های من) ===== */
.account-ad__pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  background: var(--amber);
  color: var(--black);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.account-ad__pay:hover {
  background: var(--yellow);
}

/* ===== صفحهٔ انتخاب طرح و پرداخت (checkout) ===== */
.checkout {
  width: 100%;
}

.checkout__head {
  margin-bottom: 16px;
}

.checkout__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--black);
}

.checkout__subtitle {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--gray);
}

.checkout__status {
  margin: 10px 0;
  font-size: 13.5px;
  color: var(--gray);
}

/* ردیفِ اطلاعاتِ آگهی: عکس کوچک، عنوان، دسته‌بندی */
.checkout__ad {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  margin-bottom: 18px;
}

.checkout-ad__thumb {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--gray-line);
}

.checkout-ad__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkout-ad__noimg {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gray-line-2);
}

.checkout-ad__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
}

.checkout-ad__cat {
  flex: none;
  padding: 4px 10px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray);
}

/* سه کارتِ طرح: هر کارت عنوان، قیمتِ درشت، فهرستِ امکانات و یک دکمهٔ پرداخت دارد.
   کارتِ «پیشنهاد ویژه» با قاب و برچسبِ طلایی از بقیه جدا می‌شود. */
.checkout__plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
  padding-top: 12px; /* جا برای برچسبی که از لبهٔ کارت بیرون می‌زند */
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.plan-card:hover {
  transform: translateY(-3px);
  border-color: var(--amber);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}

.plan-card--featured {
  border-color: var(--amber);
  border-width: 2px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
}

.plan-card__badge {
  position: absolute;
  top: -12px;
  inset-inline-start: 20px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--black);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}

.plan-card__title {
  font-size: 16px;
  font-weight: 800;
  color: var(--black);
}

.plan-card__tagline {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--gray);
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 16px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-line);
}

.plan-card__amount {
  font-size: 24px;
  font-weight: 800;
  color: var(--black);
  line-height: 1.2;
}

.plan-card__unit,
.plan-card__free {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray);
}

.plan-card__free {
  font-size: 22px;
  color: var(--gold);
}

.plan-card__features {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

/* تیکِ سبز پیش از هر امکان (با ::before ساخته می‌شود تا HTML سبک بماند). */
.plan-card__feature {
  position: relative;
  padding-inline-start: 22px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--gray);
}

.plan-card__feature::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--black);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.plan-card__btn {
  margin-top: auto;
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--white);
  color: var(--black);
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.plan-card__btn:hover,
.plan-card--featured .plan-card__btn {
  background: var(--amber);
}

.plan-card--featured .plan-card__btn:hover {
  background: var(--yellow);
  border-color: var(--yellow);
}

.plan-card__btn:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .plan-card,
  .plan-card:hover {
    transition: none;
    transform: none;
  }
}

@media (max-width: 860px) {
  .checkout__plans {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .checkout-ad__cat {
    display: none;
  }
}

/* ===== تب «صورت‌حساب‌ها» ===== */
.invoices__head {
  margin-bottom: 20px;
}

.invoices__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.invoices__subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.invoices__status {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
}

/* در موبایل جدول از عرض صفحه پهن‌تر است؛ این wrapper افقی اسکرول می‌شود تا کاربر
   با کشیدنِ انگشت ستون‌های بعدی را ببیند. -webkit-overflow-scrolling برای اسکرولِ
   روانِ iOS است و overscroll-behavior-x جلوی «back» ناخواستهٔ مرورگر را می‌گیرد. */
.invoices {
  min-width: 0;
  max-width: 100%;
}

.invoices__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  /* قاب هرگز از والدش پهن‌تر نمی‌شود؛ هر چه اضافه بیاید داخلِ خودش اسکرول می‌خورد
     و به صفحه سرریز نمی‌کند. */
  min-width: 0;
  max-width: 100%;
}

.invoices__scroll:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.invoices__table {
  width: 100%;
  border-collapse: collapse;
  /* ستون‌ها زیر این عرض فشرده نمی‌شوند؛ در موبایل همین باعث اسکرولِ افقی می‌شود. */
  min-width: 720px;
  font-size: 14px;
}

.invoices__table th,
.invoices__table td {
  padding: 14px 16px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.invoices__table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-soft, #f7f7f9);
  font-weight: 700;
  color: var(--muted);
  font-size: 13px;
}

.invoices__table tbody tr:last-child td {
  border-bottom: 0;
}

.invoices__table tbody tr:hover {
  background: var(--bg-soft, #f7f7f9);
}

.invoices__cell-img {
  width: 72px;
}

.invoices__thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-soft, #f1f1f4);
  flex: none;
}

.invoices__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.invoices__noimg {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg-soft, #f1f1f4);
}

/* عنوان می‌تواند بلند باشد؛ تنها ستونی است که اجازهٔ کوتاه‌شدن با «…» دارد. */
.invoices__cell-title {
  font-weight: 700;
  color: var(--text);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invoices__cell-amount {
  font-weight: 700;
  color: var(--text);
}

.invoices__cell-amount small {
  font-weight: 500;
  color: var(--muted);
}

.invoices__free {
  color: var(--ok, #16a34a);
  font-weight: 700;
}

.invoices__pending {
  color: var(--muted);
}