/* ثبت‌نام کمینه‌ی پنل — inc/signup.php
   عمداً کم‌رنگ و بی‌ادعا: رنگ و فونت از قالب ارث می‌رسد تا در هر
   صفحه‌ای بنشیند. فقط چیدمان، فاصله و حالت‌ها تعریف شده. */

.wsu{--wsu-r:14px;--wsu-g:#0aa36b;--wsu-e:#d64545;--wsu-b:rgba(0,0,0,.12);
     max-width:520px;margin:0 auto;padding:clamp(18px,4vw,30px);
     border:1px solid var(--wsu-b);border-radius:var(--wsu-r);
     background:rgba(255,255,255,.65);direction:rtl;text-align:right}
.wsu *{box-sizing:border-box}
.wsu__head{margin-bottom:16px}
.wsu__title{margin:0 0 6px;font-size:clamp(1.15rem,3.6vw,1.5rem);line-height:1.5}
.wsu__sub{margin:0;opacity:.75;font-size:.92rem;line-height:1.9}

/* نوار پیشرفت */
.wsu__bar{height:5px;border-radius:99px;background:var(--wsu-b);overflow:hidden;margin:16px 0 20px}
.wsu__bar-fill{display:block;height:100%;width:10%;border-radius:99px;
               background:var(--wsu-g);transition:width .45s cubic-bezier(.22,1,.36,1)}

.wsu__step[hidden]{display:none}
.wsu__label{display:block;margin:0 0 6px;font-size:.88rem;opacity:.85}

/* ── فیلدها: بیضی، مثل خودِ قالب ──
   زبان بصری قالب «بیضی» است، نه مربع:
       .cforms input[type=text] { border-radius:50px; background:#f7f7f7; height:50px }
       .button                  { border-radius:50px; height:37px }
   نسخه‌ی اول من همه را ۱۰ پیکسل کرد، یعنی در جهت اشتباه یکدست‌شان
   کرد. حالا همان ۵۰ پیکسل قالب گرفته می‌شود و فقط به انواعی تعمیم
   داده می‌شود که قاعده‌ی قالب نمی‌گیرد (password، tel، search).

   ⚠️ تکرار کلاس لازم است: .cforms input[type=text] اختصاصیت (0,2,1)
   دارد و بر یک کلاسِ تنها غالب می‌شود. */
.wsu .wsu__input.wsu__input{
            width:100%;height:50px;padding:15px;
            border:1px solid transparent;border-radius:50px;
            background:#f7f7f7;font:inherit;font-size:1rem;
            text-indent:0;box-shadow:none;display:block;box-sizing:border-box;
            transition:border-color .18s,box-shadow .18s,background .18s}
.wsu .wsu__input.wsu__input:focus{outline:0;border-color:var(--wsu-g);background:#fff;
                  box-shadow:0 0 0 3px rgba(10,163,107,.14)}
.wsu .wsu__input.wsu__input::placeholder{opacity:.45}

.wsu .wsu__input--code.wsu__input{letter-spacing:.7em;text-align:center;font-size:1.25rem;padding-inline:0}

.wsu__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media (max-width:420px){.wsu__row{grid-template-columns:1fr}}

/* دکمه هم بیضی — .button قالب border-radius:50px دارد */
.wsu .wsu__btn{display:flex;align-items:center;justify-content:center;
          width:100%;min-height:50px;margin-top:14px;padding:12px 20px;border:0;
          border-radius:50px;background:var(--wsu-g);color:#fff;font:inherit;
          font-size:1rem;font-weight:600;cursor:pointer;text-align:center;
          text-decoration:none;transition:filter .18s,transform .08s}
.wsu .wsu__btn:hover{filter:brightness(1.07)}
.wsu .wsu__btn:active{transform:translateY(1px)}
.wsu .wsu__btn:disabled{opacity:.6;cursor:default;transform:none}

.wsu__link{display:block;width:100%;margin-top:10px;padding:8px;border:0;
           background:none;color:inherit;font:inherit;font-size:.9rem;
           text-decoration:underline;cursor:pointer;opacity:.8}
.wsu__link[hidden]{display:none}

.wsu__note,.wsu__hint{margin:10px 0 0;font-size:.82rem;opacity:.65;line-height:1.9}
.wsu__sent{margin:0 0 14px;font-size:.92rem}
.wsu__sent b{direction:ltr;display:inline-block;unicode-bidi:embed}

.wsu__err{margin:8px 0 0;font-size:.86rem;color:var(--wsu-e);line-height:1.8}
.wsu__err[hidden]{display:none}

/* لحظه‌ی بعد از تأیید */
.wsu__win{margin:0 0 18px;padding:14px 16px;border-radius:12px;
          background:rgba(10,163,107,.08);border:1px solid rgba(10,163,107,.22)}
.wsu__win-ok{margin:0;font-weight:600;color:var(--wsu-g);font-size:.96rem}
.wsu__win-op{margin:8px 0 0;font-size:.86rem;opacity:.8;line-height:1.9}
.wsu__win-op[hidden]{display:none}
.wsu__win-credit{margin:8px 0 0;font-size:.9rem;line-height:1.9}
.wsu__win-credit b{font-size:1.05rem}

.wsu__done{text-align:center;padding:14px 0}
.wsu__done-t{margin:0 0 6px;font-size:1.25rem;font-weight:700}

@media (prefers-reduced-motion:reduce){
  .wsu__bar-fill{transition:none}
  .wsu__btn{transition:none}
}

/* حالت فشرده‌ی سایدبار — [farazsms_signup compact="1"]
   ستون سایدبار حدود ۲۵۰ تا ۳۰۰ پیکسل است؛ فرم کامل آنجا جا نمی‌شود.
   فقط مرحله‌ی اول می‌ماند و بقیه در برگه‌ی ثبت‌نام ادامه پیدا می‌کند. */
.wsu--compact{max-width:none;padding:16px;border-radius:10px}
.wsu--compact .wsu__title{font-size:1.02rem;line-height:1.7}
.wsu--compact .wsu__sub{font-size:.84rem;line-height:1.85}
.wsu--compact .wsu__bar{margin:12px 0 14px}
.wsu--compact .wsu__row{grid-template-columns:1fr}
.wsu.wsu--compact .wsu__input.wsu__input{height:46px;padding:12px 16px;font-size:.95rem}
.wsu.wsu--compact .wsu__btn{min-height:46px;padding:10px 16px;font-size:.94rem;margin-top:10px}
.wsu--compact .wsu__note{font-size:.78rem}


/* ── ورود ── */
/* ثبت‌نام باید در صفحه‌ی ورود دیده شود، نه یک لینک ریز ته صفحه.
   کسی که رمزش را یادش نیست یا حساب ندارد، اگر راه دومی نبیند می‌رود. */
.wsl__alt{display:grid;gap:10px;margin-top:18px;padding-top:16px;
          border-top:1px solid var(--wsu-b)}
.wsl__signup{display:flex;align-items:center;justify-content:space-between;gap:12px;
             padding:13px 20px;border:1px solid var(--wsu-g);border-radius:50px;
             text-decoration:none;background:rgba(10,163,107,.06)}
.wsl__signup b{font-size:.98rem;color:var(--wsu-g)}
.wsl__signup span{font-size:.82rem;opacity:.75}
.wsl__forgot{text-align:center;font-size:.88rem}
.wsl__forgot a{text-decoration:underline}

/* نمایش/پنهان‌کردن رمز — بدون آن، خطای تایپ در فیلد ستاره‌دار
   نامرئی است و کاربر فقط «رمز اشتباه» می‌بیند. */
.wsl__pw{position:relative}
.wsl__pw .wsu__input.wsu__input{padding-inline-start:46px}
/* چشم: SVG، نه ایموجی. ایموجیِ 🙈 روی هر سیستم شکل متفاوتی دارد و
   در مک میمون می‌شود — که ربطی به «پنهان‌کردن رمز» ندارد. */
.wsl__eye{position:absolute;inset-inline-start:8px;top:50%;transform:translateY(-50%);
          width:34px;height:34px;border:0;background:none;cursor:pointer;
          padding:0;opacity:.5;border-radius:50%;
          display:flex;align-items:center;justify-content:center;transition:opacity .15s}
.wsl__eye:hover{opacity:.9;background:rgba(0,0,0,.05)}
.wsl__eye svg{width:20px;height:20px;display:block}
.wsl__eye .off{display:none}
.wsl__eye.is-on .on{display:none}
.wsl__eye.is-on .off{display:block}

/* انتخاب روش تأیید — وقتی حساب هم پیامک دارد هم Authenticator */
.wsl__methods{display:grid;gap:10px;margin-top:4px}
.wsl__method{display:flex;flex-direction:column;gap:3px;width:100%;
             padding:14px 20px;border:1px solid var(--wsu-b);border-radius:50px;
             background:#fff;font:inherit;text-align:right;cursor:pointer;
             transition:border-color .16s,background .16s}
.wsl__method:hover{border-color:var(--wsu-g);background:rgba(10,163,107,.05)}
.wsl__method b{font-size:.98rem}
.wsl__method span{font-size:.8rem;opacity:.65;line-height:1.8}
.wsl__method--def{border-color:var(--wsu-g);background:rgba(10,163,107,.06)}

/* نوع حساب — حقیقی یا حقوقی */
.wsu__ptype{display:flex;gap:8px;margin-bottom:14px}
.wsu__ptype-btn{flex:1;min-height:44px;padding:10px 16px;border:1px solid var(--wsu-b);
                border-radius:50px;background:#fff;font:inherit;font-size:.94rem;
                cursor:pointer;transition:border-color .16s,background .16s,color .16s}
.wsu__ptype-btn.is-on{border-color:var(--wsu-g);background:rgba(10,163,107,.08);
                      color:var(--wsu-g);font-weight:600}

/* ─── پاپ‌آپ ثبت‌نام ───────────────────────────────────────────────
 *
 * ⚠️ در موبایل «برگه‌ی پایین» است نه کادر وسط.
 *
 * کادر وسطِ صفحه در موبایل با بالاآمدن صفحه‌کلید نصف می‌شود و کاربر
 * باید کورکورانه اسکرول کند. الگوی برگه‌ی پایینی (bottom sheet) از
 * پایین می‌آید، انگشت شست به دکمه‌اش می‌رسد و با صفحه‌کلید هم
 * جابه‌جا نمی‌شود.
 */
/* ⚠️ قالب سه قاعده روی **خودِ عنصر** dialog دارد و هر سه ویرانگرند.
 *
 * بوت‌استرپ ۴ که داخل style.css باندل شده، اشتباهاً به‌جای .modal-dialog
 * به تگ dialog می‌زند:
 *
 *   dialog{display:block}                      ← خط ۷ نرمالایز
 *   dialog{position:relative;pointer-events:none;margin:.5rem}
 *   dialog{transform:translate(0,-25%);transition:transform .3s}
 *
 * نتیجه‌ی هرکدام:
 *
 *   display:block      → قاعده‌ی مرورگر `dialog:not([open]){display:none}`
 *                        را می‌شکند، چون استایل نویسنده بر UA مقدم است.
 *                        یعنی **فرم ثبت‌نام روی هر صفحه، زیر فوتر،
 *                        همیشه دیده می‌شود.** (گزارش شد.)
 *   pointer-events:none→ پاپ‌آپِ باز کاملاً غیرقابل کلیک می‌شود. تستِ
 *                        خودکار این را نگرفت چون element.click()
 *                        برنامه‌ای است و pointer-events را نادیده
 *                        می‌گیرد؛ انگشتِ کاربر نه.
 *   transform/position → جای پاپ‌آپ را در top layer به هم می‌ریزد.
 *
 * اختصاصیت `dialog` برابر (0,0,1) است و `.wsu-modal` برابر (0,1,0)،
 * پس نوشتنِ صریحِ هر چهار خاصیت کافی است.
 */
/* ⚠️ پوسته‌ی پاپ‌آپ بیرون از .wsu است، پس قاعده‌ی .wsu * شاملش نمی‌شود
   و تا امروز به ریست سراسری style.css تکیه داشت. صریح می‌نویسیم تا
   فایل خودکفا باشد؛ بدون این، padding به عرض اضافه می‌شد و پاپ‌آپ روی
   موبایل از لبه بیرون می‌زد. */
.wsu-modal,.wsu-modal *{box-sizing:border-box}
.wsu-modal:not([open]){display:none}

.wsu-modal{
  display:block;
  position:fixed;
  pointer-events:auto;
  transform:none;
  transition:none;
  padding:0;border:0;background:transparent;
  /* dvh نه vh: نوار آدرس iOS ارتفاع را عوض می‌کند و vh سرریز می‌سازد */
  /* ⚠️ 100vw شاملِ عرضِ نوار اسکرول است، پس روی دسکتاپِ ویندوز/لینوکس
   * پاپ‌آپ حدود ۱۵ پیکسل از نما پهن‌تر می‌شد و خودش اسکرول افقی
   * می‌ساخت. 100% عرضِ واقعیِ در دسترس است.
   *
   * و dvh در سافاری زیر ۱۵.۴ ناشناخته است و کلِ اعلان دور ریخته
   * می‌شود — پس vh اول می‌آید به‌عنوان پشتیبان. */
  max-height:92vh;
  max-height:92dvh;
  max-width:min(440px,100%);width:100%;
  margin:auto;color:inherit
}
.wsu-modal::backdrop{background:rgba(17,12,46,.55);backdrop-filter:blur(2px)}

.wsu-modal__inner{
  position:relative;pointer-events:auto;background:#fff;border-radius:22px;
  padding:26px 22px 22px;max-height:92dvh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 24px 60px -12px rgba(17,12,46,.35)
}

.wsu-modal__close{
  position:absolute;top:12px;left:12px;
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:rgba(0,0,0,.05);color:#333;cursor:pointer;
  padding:0
}
.wsu-modal__close:hover{background:rgba(0,0,0,.1)}
.wsu-modal__close:focus-visible{outline:2px solid var(--color2);outline-offset:2px}

/* قفل اسکرول پس‌زمینه — در iOS تنها position:fixed واقعاً کار می‌کند */
body.wsu-modal-open{position:fixed;width:100%;overflow:hidden}

@media (max-width:575px){
  .wsu-modal{
    max-width:100%;
    max-height:94vh;
    max-height:94dvh;
    margin:auto auto 0;   /* چسبیده به پایین */
  }
  .wsu-modal__inner{
    border-radius:22px 22px 0 0;
    max-height:94vh;
    max-height:94dvh;
    padding:22px 16px calc(18px + env(safe-area-inset-bottom))
  }
}

@media (prefers-reduced-motion:no-preference){
  .wsu-modal[open]{animation:wsu-modal-in .22s ease-out}
  @keyframes wsu-modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

.wsu-modal__loading{padding:34px 10px;text-align:center;opacity:.7;font-size:.92rem}

/* ═══ صفحه‌ی ورود، حالت دو-دکمه‌ای ═══
   دو دکمه باید **هم‌شکل و هم‌اندازه** باشند: در قالب، `.button` شکل را
   می‌دهد و `.button_green`/`.button_border` فقط رنگ را. بدون flex:1
   عرضشان با طول متنشان فرق می‌کرد و یکی بزرگ‌تر به‌نظر می‌آمد. */
.wsl__gate{display:flex;gap:12px;margin-top:4px}
/* ⚠️ حاشیه‌ی شفاف روی دکمه‌ی سبز عمدی است.
   `.button_border` حاشیه‌ی ۱px دارد و `.button_green` ندارد؛ بدون این،
   عرض دو دکمه ۲px فرق می‌کرد (اندازه‌گیری شد: ۲۲۲ و ۲۲۴). */
.wsl__gate .wsl__gate-btn{flex:1 1 0;min-width:0;height:48px;font-size:15px;
  padding:0 12px;border:1px solid transparent}
@media (max-width:420px){.wsl__gate{flex-direction:column}
  .wsl__gate .wsl__gate-btn{width:100%}}

.wsl__gate-points{list-style:none;margin:18px 0 14px;padding:0;
  display:grid;gap:8px;font-size:.88rem;opacity:.85}
.wsl__gate-points li{display:flex;align-items:center;gap:8px;line-height:1.9}
.wsl__gate-points li::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--color1,#0ace8c)}