/* کدپستی — لایه‌ی نازک روی قالب.
 *
 * ⚠️ نسخه‌ی اول ۱۶۰ خط بود و دکمه، اینپوت و کارتِ خودش را از صفر
 * می‌ساخت — نتیجه صفحه‌ای بود که مالک سایت پس زد چون شبیه بقیه‌ی
 * سایت نبود.
 *
 * حالا هرچه قالب دارد از قالب می‌آید (.button_border، .search-field،
 * .category_box) و اینجا فقط چیزی می‌ماند که معادل ندارد: خودِ جدول.
 */

/* ── فهرست لنگرِ شهرها ── */
.wpc-jump{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
/* margin-inline-end نه margin-left: در شیتِ RTL، فیزیکی یعنی فاصله
 * سمت اشتباه می‌افتد. */
.wpc-jump__label{font-size:.88rem;opacity:.7;margin-inline-end:4px}
/* ⚠️ حداقل ۴۴ پیکسل ارتفاع — توصیه‌ی WCAG 2.5.8 و لایت‌هاوس.
 * اندازه‌گیری شد: نسخه‌ی اول ۳۷ پیکسل بود. */
/* ⚠️ رنگ باید صریح باشد — همان باگی که صفحه‌ی ورود داشت.
   این چیپ‌ها `<a class="button button_border …>` داخلِ `.cdesc` هستند
   (single-postal_code.php از post_class('cdesc cforms') استفاده می‌کند)
   و قالب دو قاعده دارد که بر مقادیرِ `.button` غالب‌اند:

       .cdesc a       {color:var(--color1)}  (0,1,1) ⟩ .button_border{color:var(--color2)} (0,1,0)
       .cdesc a:hover {color:var(--color2)}  (0,2,1) ⟩ .button:hover {color:#fff}          (0,2,0)

   نتیجه: چیپ سبز به‌جای بنفش، و در hover که `.button_border:before`
   با بنفش پر می‌شود، متنِ بنفش روی بنفش ⇒ **نامرئی**.

   الگوی درست از قبل در همین فایل هست: `.wpc-pager a{color:inherit}`.
   اختصاصیتِ زیر (0,2,0) و (0,2,1) است؛ کمترش نکنید. */
.wpc-jump .wpc-jump__item,
.wpc-provinces .wpc-provinces__item{color:var(--color2,#402aa9)}
.wpc-jump .wpc-jump__item:hover,
.wpc-provinces .wpc-provinces__item:hover{color:#fff}

.wpc-jump__item{padding:9px 16px;font-size:.85rem;line-height:1.7;min-height:44px}
.wpc-jump__item small{opacity:.6;font-size:.78em}

/* ── جستجوی زنده ── */
.wpc-filter{margin:0 0 14px}
/* ⚠️ تکرار کلاس عمدی است.
 *
 * نرمالایزِ خود قالب این را دارد:
 *     input[type=search]{ box-sizing:content-box }   اختصاصیت (0,1,1)
 *
 * یعنی .wpc-filter__input با اختصاصیت (0,1,0) می‌بازد، box-sizing
 * روی content-box می‌ماند و عرض می‌شود ۱۰۰٪ + ۳۶px پدینگ + ۲px بردر.
 * نتیجه: در موبایل ۳۸۰ پیکسلی، فیلد ۳۸۸ پیکسل می‌شود و **کل صفحه**
 * افقی اسکرول می‌خورد (اندازه‌گیری شد: scrollWidth=403 vs 380).
 *
 * تکرار کلاس اختصاصیت را به (0,2,0) می‌برد که از (0,1,1) بالاتر است.
 */
.wpc-filter__input.wpc-filter__input{
  width:100%;max-width:100%;box-sizing:border-box;padding:12px 18px;
  /* زبان بصری قالب برای فیلدها ۵۰px است، نه گوشه‌ی تیز */
  border-radius:50px;border:1px solid rgba(0,0,0,.14);
  font:inherit;font-size:.95rem;background:#fff
}
.wpc-filter__input.wpc-filter__input:focus{outline:2px solid rgba(106,76,255,.35);outline-offset:1px;border-color:transparent}
.wpc-filter__count{margin:8px 4px 0;font-size:.85rem;opacity:.7;min-height:1.4em}

/* ── جدول ──
 * .wpc-scroll لازم است: جدول چهارستونی در موبایل جا نمی‌شود و بدون
 * این، کلِ صفحه افقی اسکرول می‌خورد نه فقط جدول.
 *
 * ⚠️ max-height عمدی است، نه تزئینی.
 *
 * وقتی یک محور overflow:visible نباشد، محور دیگر هم به auto محاسبه
 * می‌شود. یعنی overflow-x:auto این عنصر را به نزدیک‌ترین جدِ اسکرولیِ
 * **هر دو محور** تبدیل می‌کند — و آن‌وقت position:sticky روی thead
 * هیچ‌جا برای چسبیدن ندارد، چون این ظرف ارتفاعش آزاد است و هرگز
 * عمودی اسکرول نمی‌شود. نتیجه: سرستون‌ها با صفحه بالا می‌رفتند و
 * کاربر بعد از چند ده سطر نمی‌دانست کدام ستون چیست.
 *
 * با max-height، ظرف واقعاً عمودی اسکرول می‌شود و sticky کار می‌کند. */
.wpc-scroll{
  overflow:visible;max-height:none;margin:0 0 14px;
  border:1px solid rgba(0,0,0,.06);border-radius:12px
}

/* ⚠️ شکست ۹۹۱px است نه ۶۴۰px.
   جدول min-width:520px دارد. شرطِ واقعیِ نیاز به اسکرول «باریک‌تر بودنِ
   ظرف از ۵۲۰px» است، نه «باریک بودنِ ویوپورت». در چیدمان .inner_page که
   سایدبار ستون را می‌خورد، تا نزدیک ۹۹۱px هم ظرف زیر ۵۲۰px می‌شود و جدول
   بدون این، از ظرفش بیرون می‌زد و کلِ صفحه افقی اسکرول می‌خورد.

   فقط جایی که جدول واقعاً جا نمی‌شود، اسکرول افقی می‌گیرد — و هیچ‌وقت عمودی.
   در این حالت مرورگر محور عمودی را هم auto می‌کند و سرستونِ چسبان کار
   نمی‌کند؛ روی موبایل معامله‌ی درستی است، چون بریده‌شدن محتوا بدتر است. */
@media (max-width:991px){
  .wpc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
.wpc-scroll:focus-visible{outline:2px solid var(--color2);outline-offset:2px}

/* ⚠️ table-layout:fixed — مرورگر با چیدمان خودکار باید **همه‌ی** سلول‌ها
 * را اندازه بگیرد پیش از اولین رنگ. روی صدها سطر این مستقیم روی LCP
 * می‌نشیند. با عرض‌های اعلام‌شده، یک پاس کافی است. */
.wpc-table{
  width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px;
  table-layout:fixed
}
.wpc-table caption{text-align:right}
.wpc-table th,.wpc-table td{
  padding:11px 14px;text-align:right;border-bottom:1px solid rgba(0,0,0,.07);
  overflow-wrap:anywhere   /* نام محله‌ی خیلی بلند نباید ستون را بترکاند */
}
.wpc-table th:nth-child(1),.wpc-table td:nth-child(1){width:22%}
.wpc-table th:nth-child(2),.wpc-table td:nth-child(2){width:38%}
.wpc-table th:nth-child(3),.wpc-table td:nth-child(3){width:22%}
.wpc-table th:nth-child(4),.wpc-table td:nth-child(4){width:18%}
/* حالا که ظرف اسکرول نمی‌کند، سرستون نسبت به **صفحه** می‌چسبد — پس باید
   همان فاصله‌ی هدر و نوار مدیریت را رعایت کند، وگرنه زیرشان می‌رود. */
.wpc-table thead th{
  position:sticky;top:calc(var(--wsu-head, 0px) + var(--wsu-bar, 0px));z-index:2;
  background:#faf9ff;font-weight:700;font-size:.88rem;white-space:nowrap;
  box-shadow:0 1px 0 rgba(0,0,0,.08)
}
.wpc-table tbody tr:hover{background:rgba(106,76,255,.045)}
.wpc-table tbody tr[hidden]{display:none}

/* پیشوند کد پستی
 *
 * ⚠️ فونت مونواسپیس عمداً حذف شد.
 *
 * نسخه‌ی اول ui-monospace می‌گذاشت تا ارقام هم‌عرض شوند. نتیجه این بود
 * که ستون کد پستی با فونت سیستم رندر می‌شد و کنارِ بقیه‌ی جدول که با
 * IRANSans قالب است، وصله می‌زد.
 *
 * font-variant-numeric:tabular-nums همان هم‌عرضی را **در فونت خودِ
 * قالب** می‌دهد؛ مونواسپیس لازم نبود. */
.wpc-code{
  font-size:1.02em;letter-spacing:.06em;white-space:nowrap;
  font-variant-numeric:tabular-nums
}

.wpc-note{font-size:.86rem;opacity:.72;line-height:2;margin:0}
.wpc-empty{padding:26px 18px;text-align:center;opacity:.7}

@media (max-width:575px){
  .wpc-table th,.wpc-table td{padding:9px 10px;font-size:.88rem}
  .wpc-jump__label{width:100%;margin:0 0 2px}
}

/* ── فهرست استان‌ها در برگه‌ی هاب ── */
.wpc-provinces__cell{margin-bottom:12px}
.wpc-provinces__item{display:block;text-align:center}
.wpc-provinces__item small{opacity:.55;font-size:.78em}

/* ── سطرهای آمده از سرور ──
 * رنگِ خفیف تا معلوم باشد این‌ها در صفحه نبودند و تازه آمده‌اند. */
.wpc-remote tr{background:rgba(106,76,255,.05)}

/* ── پیوندهای داخلی ──
 * لینکِ متنی است نه دکمه: در بخش تبلیغ فقط **یک** کنش اصلی باید
 * وجود داشته باشد (فرم ثبت‌نام). دکمه‌ی دوم با آن رقابت می‌کند. */
.wpc-related{margin-top:22px;font-size:.9rem;opacity:.85}
.wpc-related__item{text-decoration:underline}
.wpc-related__item:focus-visible,.wpc-jump__item:focus-visible{
  outline:2px solid var(--color2);outline-offset:2px
}

/* ── بخش تبلیغ ──
 * قاب و فاصله از خودِ .section-cta و .cta-content قالب می‌آید؛
 * اینجا فقط جای کنشِ اصلی تعریف می‌شود. */
/* ⚠️ ذکرِ ثانویه‌ی LBS عمداً هیچ وزنِ بصریِ تازه‌ای نمی‌گیرد — نه رنگ،
 * نه bold، نه آیکون. فقط فاصله از پاراگرافِ قبلی؛ همان متنِ عادی که
 * .cdesc می‌دهد. نسخه‌ای که تمایزِ بصری داشت («کارت») رد شد. */
.wpc-cta__lbs{margin:14px 0 0}
.wpc-cta__act{
  margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(0,0,0,.08)
}
.wpc-cta__act .button{margin-top:0}
.wpc-cta__hint{font-size:.9rem;opacity:.75;margin:10px 0 0}
.wpc-cta .cta-content ul{margin:14px 0 0;padding-right:20px}
.wpc-cta .cta-content li{margin-bottom:6px}

/* ── ناوبری صفحه‌های جدول ──
 * فقط روی استان‌هایی دیده می‌شود که از سقف سطر رد شده‌اند (امروز فقط
 * تهران). لینک‌ها <a> واقعی‌اند تا خزنده دنبالشان برود.
 *
 * ⚠️ خاصیت‌های منطقی، نه فیزیکی: این شیت RTL است و margin-left در آن
 * سمتِ غلط می‌نشیند — همان قاعده‌ای که بالای همین فایل نوشته شده. */
.wpc-pager{margin:4px 0 18px}
.wpc-pager ul{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;margin:0;padding:0
}
.wpc-pager a,.wpc-pager__cur{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 12px;
  border-radius:10px;font-size:.95rem;line-height:1;
  font-variant-numeric:tabular-nums;
  text-decoration:none;transition:background .15s,border-color .15s
}
.wpc-pager a{
  border:1px solid rgba(0,0,0,.12);color:inherit;background:#fff
}
.wpc-pager a:hover{border-color:var(--color2);background:rgba(0,0,0,.02)}
.wpc-pager a:focus-visible{outline:2px solid var(--color2);outline-offset:2px}
.wpc-pager__cur{
  border:1px solid var(--color2);background:var(--color2);color:#fff;font-weight:700
}