/**
 * موبایل: ترتیب هدر، منوی روشن، و نوار پایین
 *
 * ⚠️ این فایل «اصلاحیه» است، نه استایل پایه.
 * هر قاعده‌ای اینجا دقیقاً یک چیز در style.css را بازنویسی می‌کند و
 * بالای هر کدام نوشته شده کدام. بدون این توضیح، حذفشان در آینده
 * بی‌خطر به نظر می‌رسد و نیست.
 */

:root{
  /* سبز را از خودِ برند می‌گیریم، نه رنگ دلخواه */
  --wsm-live: var(--color1, #0ace8c);
  --wsm-ink:  #1d1d28;

  /*
   * ارتفاع واقعی نوار پایین — یک منبع حقیقت.
   * padding نوار ۸px بالا + ۸px پایین، خانه‌ها min-block-size:46px، به‌علاوه‌ی
   * امن‌ناحیه‌ی دستگاه. قبلاً عدد ثابت ۷۰px در دو جا تکرار شده بود که روی
   * آیفون نُچ‌دار ۲۶px از محتوا را زیر نوار می‌برد.
   */
  --wsm-bar-h: calc(62px + env(safe-area-inset-bottom));

  /*
   * ⚠️ این دو توکن اینجا تعریف شده‌اند، نه در modular.css.
   *
   * modular.css بدون نسخه enqueue می‌شود و در قالب لندینگ dequeue هم
   * می‌شود؛ یعنی پشت کش آروان ممکن بود کهنه بماند و رفعِ چسبندگی هرگز به
   * کاربر نرسد. mobile.css هم نسخه‌گذاری filemtime دارد هم همیشه می‌آید.
   *
   * مصرف‌کننده‌ها: .blog__sidebar و .wpc-table thead th
   */
  --wsu-head: 0px;
  --wsu-bar:  0px;
}

/* هدر فقط در صفحه‌ی اصلی چسبان است؛ .inner_page آن را relative می‌کند */
body:not(.inner_page){ --wsu-head: 78px; }

/*
 * ⚠️ کفِ ۶۰۱px عمدی است.
 * نوار مدیریت وردپرس فقط بالای ۶۰۰px برابر position:fixed است؛ زیر آن
 * absolute می‌شود و با صفحه اسکرول می‌رود. بدون این کف، روی هر گوشی یک
 * فاصله‌ی ۴۶ پیکسلیِ همیشگی و بی‌دلیل بالای سایدبار و سرستون می‌ماند.
 */
@media screen and (min-width: 601px){
  body.admin-bar{ --wsu-bar: 32px; }
}
@media screen and (min-width: 601px) and (max-width: 782px){
  body.admin-bar{ --wsu-bar: 46px; }
}

/* ═══ ۱) ترتیب هدر موبایل ═══
 * در style.css قاعده‌ی `.head_site .row` مقدار flex-direction:row-reverse
 * دارد. در RTL یعنی اولین ستون (لوگو) به چپ می‌رود و .mobile_part به راست —
 * برعکسِ چیزی که باید باشد. تا ۱۱۹۹px برش می‌گردانیم.
 *
 * ⚠️ درباره‌ی .mobile_part: در style.css فقط شکلِ پیشونددارِ
 * `-webkit-justify-content: flex-end !important` هست؛ خاصیت استانداردش
 * `justify-content: end` است و !important ندارد. پس صریح بازنویسی می‌کنیم
 * و به ارث‌بری از آن تکیه نمی‌کنیم.
 *
 * انتخابگر نوشته شده نه شماره‌خط — شماره‌خط با اولین ویرایش style.css
 * می‌پوسد، و دقیقاً همین اتفاق افتاده بود.
 */
@media (max-width: 1199px){
  .head_site .row{flex-direction:row}
  .mobile_part{
    flex-direction:row !important;
    justify-content:flex-end !important;
    gap:10px;
  }
}

/* ═══ منوی موبایل: از بنفش توپر به سطح روشن ═══
 * بازخورد هیئت مدیره: بنفش توپر چشم را اذیت می‌کند. الگوی مرجع sms.ir
 * حس وب‌اپلیکیشن دارد — سطح روشن، متن تیره، جداکننده‌های نازک.
 * رنگ برند در حاشیه و حالت فعال می‌ماند، نه در کل پس‌زمینه.
 */
#menumobile{
    /* ⚠️ بالاتر از #wsm-bar (99996). با ۹۹۹۹۱ قدیمی، نوار پایین
     * روی پنل باز می‌افتاد و آخرین آیتم‌های منو را می‌پوشاند. */
    z-index:99997 !important;
    background:#fff !important;
    width:min(86vw, 320px) !important;
    right:calc(-1 * min(86vw, 320px)) !important;
    border-inline-start:1px solid rgba(20,20,40,.06);
}
#menumobile.come-menumobile{right:0 !important}
#menumobile a{color:var(--wsm-ink, #1b1830) !important}
#menumobile li{border-block-end:1px solid rgba(20,20,40,.06)}
#menumobile li:last-child{border-block-end:0}
#menumobile li > a{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; font-size:14.5px; font-weight:600;
}
#menumobile li > a:hover,
#menumobile li.current-menu-item > a{background:#f4f5f9; color:var(--color2) !important}
#menumobile li.current-menu-item > a{box-shadow:inset -3px 0 0 var(--color2)}
#menumobile .sub-menu{background:#fafbfc}
#menumobile .sub-menu a{font-weight:500; font-size:13.5px; padding-inline-start:30px}

/*
 * ⚠️ سه بازمانده‌ی چیدمان قدیمیِ پنل بنفش.
 *
 * پنل به min(86vw,320px) رفت ولی زیرمنو در style.css:592 روی
 * width:250px / right:-250px ماند — روی گوشی ۳۷۵px یک نوار ۷۰ پیکسلی از
 * پنل سفید لخت می‌ماند. لیبل «بازگشت» هم var(--color1) سبز بود که روی
 * پس‌زمینه‌ی #fafbfc تازه، کنتراستی حدود ۱.۹:۱ می‌دهد. و
 * `.main-mm ul li a{width:80%}` باعث می‌شد هایلایت و نوار تأکیدِ تازه فقط
 * ۸۰٪ ردیف را بگیرد در حالی که جداکننده‌ی li کل عرض را دارد.
 */
/* ⚠️ ویژگی فیزیکی، نه منطقی: پنل و style.css:594 هر دو از `right` استفاده
 * می‌کنند و در RTL، inset-inline-end به `left` نگاشت می‌شود — یعنی به محور
 * اشتباه. کلاس بازشدن (.come-submenu، style.css:632) هم right:0 !important
 * دارد و همان کافی است. */
#menumobile .sub-menu{
    width:min(86vw, 320px);
    right:calc(-1 * min(86vw, 320px));
}
#menumobile .main-mm ul li a{width:100%}
/*
 * ⚠️ با عرض ۱۰۰٪، مقدار `left:-25%` در style.css:630 معادل ۷۰- پیکسل
 * می‌شود و فلش باز کردن زیرمنو کاملاً بیرون از #menumobile می‌افتد که
 * overflow:hidden است — یعنی نه دیده می‌شود و نه کلیک‌پذیر است. قبلاً لینک
 * ۸۰٪ بود و ۲۵٪- از آن، درست لبه‌ی محتوا می‌نشست.
 */
#menumobile .main-mm ul li .childer{left:8px; right:auto}
#menumobile .main-mm ul li .childer i{left:6px}
#menumobile .title-subcome{color:var(--wsm-ink, #1b1830); font-weight:700}

/* سربرگ پنل هم باید روشن شود؛ وگرنه نوار بنفش بالای پنل سفید می‌ماند.
 * و چون سربرگ روشن شد، فیلتر invert لوگو (style.css:542) آن را سفیدِ
 * نامرئی می‌کرد — پس همان‌جا خنثی می‌شود. این دو با هم درست‌اند. */
#menumobile .title-mm{
    background:#fff; border-block-end:1px solid rgba(20,20,40,.08); padding:14px 18px;
}
#menumobile .title-mm img{filter:none}
#menumobile #nomenumobile{
    background:#f2f3f7; color:#5b5878; border-radius:50%;
    width:32px; height:32px; line-height:32px; font-size:11px; top:0;
}
#menumobile #nomenumobile:hover{background:#e7e8f0; color:var(--wsm-ink)}

/* ═══ نوار پایین موبایل ═══
 * سه اقدام اصلی با متن صریح. آیکن تنها (آدمک) به کاربر نمی‌گفت «ورود».
 */
#wsm-bar{display:none}
@media (max-width: 900px){
    #wsm-bar{
        display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px;
        position:fixed; inset-inline:0; inset-block-end:0; z-index:99996;
        padding:8px 10px calc(8px + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.96);
        -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
        border-block-start:1px solid rgba(20,20,40,.08);
        box-shadow:0 -6px 20px -12px rgba(20,20,40,.35);
    }
    #wsm-bar .wsm-bar__item{
        display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
        min-block-size:46px; border-radius:12px; font-size:12.5px; font-weight:700;
        color:var(--wsm-ink); text-decoration:none; background:#f4f5f9;
    }
    #wsm-bar .wsm-bar__item i{font-size:17px;line-height:1}
    /*
     * ⚠️ فوکوس دیدنی — نوار، ناوبری اصلیِ موبایل است.
     * بدون این، کاربر کیبورد و سوییچ هیچ نشانه‌ای ندارد کجاست.
     */
    #wsm-bar .wsm-bar__item:focus-visible{
        outline:2px solid var(--color2, #402aa9); outline-offset:2px;
    }
    #wsm-bar .wsm-bar__item--cta{
        background:var(--wsm-live); color:#fff; font-size:14px;
        box-shadow:0 8px 18px -10px rgba(16,185,129,.8);
    }
    /* «پیشنهاد ویژه» دکمه است نه لینک — ریست تا با بقیه یکسان دیده شود */
    #wsm-bar button.wsm-bar__item{border:0;font-family:inherit;cursor:pointer;appearance:none}
    /* با چهار خانه، ستون‌ها باریک می‌شوند و «ثبت‌نام رایگان» می‌شکست */
    #wsm-bar.wsm-bar--4 .wsm-bar__item{font-size:11.5px}
    #wsm-bar.wsm-bar--4 .wsm-bar__item--cta{font-size:12.5px}
    #wsm-bar.wsm-bar--4 .wsm-bar__item i{font-size:15px}
    /* فضا فقط روی صفحه‌هایی که نوار دارند (کلاس از websima_mbar_visible) */
    body.wsm-has-bar{padding-block-end:var(--wsm-bar-h)}

    /*
     * پاپ‌آپ چسبان (پیشنهاد ویژه) زیر نوار پایین گم شده بود.
     *
     * .sticky-popup روی bottom:0 با z-index 9991 است و نوار (99996) کاملاً
     * رویش می‌افتاد — هم خودش، هم دکمه‌ی گردِ بازکردنش که ۲۳ پیکسل بالاتر
     * می‌نشیند. حالا به اندازه‌ی ارتفاع نوار بالا می‌آید تا سرش پیدا باشد.
     */
    body.wsm-has-bar .sticky-popup{bottom:var(--wsm-bar-h)}

    /*
     * ⚠️ فلش پیش‌فرض رو به بالا.
     * قبلاً بسته = فلش رو به پایین بود، که یعنی «مرا ببند» در حالی که بسته
     * است. رو به بالا یعنی «مرا باز کن» — همان چیزی که کاربر انتظار دارد.
     */
    .open-st-popup{transform:rotate(180deg)}
    .open-st-popup.active{transform:rotate(0deg)}
}

/* ═══ ۴) نوار شناور قدیمی ═══
 * وقتی نوار پایین روشن است، footer.php دیگر .sticky_mobile را رندر
 * نمی‌کند. این قاعده فقط تورِ ایمنی است برای صفحه‌ای که از کش لبه‌ی
 * آروان با نشانه‌گذاری قدیمی می‌آید. */
body.wsm-has-bar .sticky_mobile{display:none}

/* ═══ ۵) ترتیب لایه‌ها ═══
 * نوار پایین z-index 99996 دارد و پوشش ماژول CTA فقط ۱۰۰۱ — یعنی نوار
 * روی مودالِ باز شناور می‌شد. مودال باید بالاتر از نوار بنشیند، مثل
 * #menumobile که ۹۹۹۹۷ گرفت.
 *
 * دکمه‌ی شناور همان ماژول هم در ناحیه‌ی نوار است (bottom:30px) و زیرش
 * گم می‌شد؛ به اندازه‌ی ارتفاع نوار بالا می‌آید به‌جای اینکه پنهان شود —
 * پنهان‌کردنش یعنی حذف بی‌صدای یک قابلیت موجود.
 */
@media (max-width: 900px){
  body.wsm-has-bar #websima-cta-popup{z-index:99998}
  body.wsm-has-bar .websima-cta-popup-btn{bottom:calc(var(--wsm-bar-h) + 14px)}
}