/* ==========================================================================
   پنل کاربران — نسل بعد — پایهٔ بصری
   --------------------------------------------------------------------------
   این فایل فقط همان چیزی است که در <helmet><style> طرح (Panel.dc.html,
   خطوط ۱۲-۳۱) بود: کی‌فریم‌های انیمیشن، پایهٔ body، رنگ placeholder،
   لینک a، و رعایتِ prefers-reduced-motion. تمامِ استایلِ کامپوننت‌ها
   عمداً inline در خودِ index.php می‌ماند — دقیقاً همان‌طور که طرح
   نوشته بود؛ این فایل چیزی به آن اضافه نمی‌کند و چیزی از آن کم نمی‌کند.

   فونت‌ها محلی سرو می‌شوند (هرگز CDN) — کاربر ایرانی به fonts.googleapis
   و cdn.jsdelivr.net دسترسی پایدار ندارد؛ طرح از آن دو آدرس استفاده
   می‌کرد، اینجا با همان دو خانوادهٔ فونت ولی فایل‌های محلی جایگزین شده.
   ========================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Estedad";
  src: url("fonts/Estedad-arabic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D, U+2010-2011;
}
@font-face {
  font-family: "Estedad";
  src: url("fonts/Estedad-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122;
}

body {
  margin: 0;
  background: #0b0e0d;
  color: #e8ede9;
  font-family: Vazirmatn, "Segoe UI", Tahoma, sans-serif;
}
a { color: #34d399; text-decoration: none; }
a:hover { color: #6ee7b7; }
input::placeholder { color: #5d6761; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ringIn { from { stroke-dashoffset: 326.7; } }
@keyframes gaugeIn { from { stroke-dashoffset: 150.8; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes backdropIn { from { opacity: 0; } }
@keyframes bellWobble {
  0%, 78%, 100% { transform: rotate(0); }
  81% { transform: rotate(-11deg); }
  84% { transform: rotate(9deg); }
  87% { transform: rotate(-6deg); }
  90% { transform: rotate(3deg); }
  93% { transform: rotate(0); }
}
@keyframes bellPuff { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 65% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes bellPuffB { 0% { transform: scale(1); } 35% { transform: scale(1.32); } 65% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes notifIn { from { opacity: 0; transform: scale(.06); } }
@keyframes notifOut { to { opacity: 0; transform: scale(.06); } }
@keyframes backdropOut { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   حالتِ «در حالِ اتصال» بایندینگِ رانتایم — نه در طرح، ولی لازم تا صفحه
   قبل از اجرای app.js سفید نماند (کاربرِ اینترنتِ کند). */
[data-cp-if] { transition: none; }
.cp-boot-fallback {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  color: #7d877f; font-size: 13px;
}

/* ==========================================================================
   دو اصلاحِ سازگاریِ موبایل — نه در طرح (طرح فقط برایِ یک اندازهٔ ثابتِ
   پیش‌نمایش رسم شده بود)، ولی روی گوشیِ واقعی لازم‌اند. هر دو محافظِ
   ساختاری‌اند: تا وقتی چیزی سرریز نکند/کوتاه نباشد هیچ اثرِ بصری‌ای
   ندارند، پس چیزی از طرح را عوض نمی‌کنند.
   ========================================================================== */

/* ۱) «صفحه به چپ‌وراست کشیده می‌شود» — ستون همیشه max-width:430px است،
   ولی چند عنصرِ موقعیت‌دهی‌شده (مثلاً تول‌تیپِ نمودارِ مصرف که با
   inset-inline-start:50%+translateX(50%) روی آخرین میله می‌نشیند) چند
   پیکسل از لبه بیرون می‌زنند. روی سافاریِ موبایل حتی یکی-دو پیکسل سرریزِ
   افقی یعنی کلِ صفحه قابلِ کشیدن/رابرباند می‌شود. هیچ نیازِ مشروعی به
   اسکرولِ افقی در این اپ نیست.

   عمداً روی html/body نیست (باگِ واقعیِ همین پاس، پیدا و رفع‌شده):
   طبقِ اسپکِ CSS، وقتی overflow-x یک المنت چیزی غیر از visible باشد ولی
   overflow-y آن دست‌نخورده (یعنی visible) بماند، مرورگر مجبور است
   overflow-y را هم به auto تبدیل کند (نمی‌شود یک محور را قفل کرد و
   دیگری را واقعاً visible نگه داشت). این یعنی گذاشتنِ این قاعده روی
   html/body باعث می‌شد body عملاً یک «کانتینرِ اسکرولِ» جدا حساب شود —
   و <nav style="position:sticky;bottom:0"> (نوارِ پایین) دیگر نسبت به
   ویوپورتِ واقعی نمی‌چسبید، نسبت به body می‌چسبید که خودش دقیقاً هم‌قدِ
   محتواست (هیچ‌وقت اضافه‌ای برایِ چسبیدن ندارد) — نتیجه: نوارِ پایین در
   هر صفحه‌ای که محتوایش از ویوپورت بلندتر بود (یعنی تقریباً همه‌جا)
   دیگر «همیشه دیده» نبود؛ کاربر باید تا انتهای صفحه اسکرول می‌کرد تا
   نوارِ ناوبری را ببیند. رفع: این قاعده را از html/body برداشتیم و
   مستقیماً روی خودِ ناحیه‌هایِ محتوا گذاشتیم (header/main/صفحه‌هایِ
   ورود و بوت) — همه‌جایی که واقعاً ممکن است چیزی چند پیکسل بیرون بزند،
   ولی هیچ‌کدام جزوِ زنجیرهٔ اجدادِ <nav> نیستند، پس چسبندگیِ nav به
   ویوپورتِ واقعی دوباره درست کار می‌کند. */
header, main, [data-screen-label="ورود"], [data-screen-label="بوت"] {
  overflow-x: hidden;
}

/* ۲) مودال‌ها روی گوشیِ کوتاه — پنلِ مودال (`[data-cp-click="eatClick"]`،
   هر ۹ مودالِ اپ همین یک ساختار را دارند، به‌علاوهٔ `.cp-wa-panel` که مودالِ
   شارژِ کیف پول در wallet.js با DOM جدا می‌سازد و از همین قاعدهٔ مشترک
   تبعیت می‌کند) نه max-height داشت نه اسکرول؛ محتوای بلند (مثلاً «تأیید
   خرید» با چند ردیف + دو دکمه) روی صفحه‌نمایشِ کوتاه یا در حالتِ افقی از
   پایینِ ویوپورت بیرون می‌افتاد و هیچ راهی برایِ رسیدن به دکمه‌ها نبود.
   overflow-y:auto فقط وقتی فعال می‌شود که واقعاً لازم باشد — روی
   صفحه‌های معمولی هیچ تغییری در ظاهر نمی‌دهد. */
[data-cp-click="eatClick"], .cp-wa-panel {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   دسکتاپ — چیدمانِ هوشمند (≥ ۸۲۰px)
   نکتهٔ breakpoint: عمداً ۸۲۰ (نه ۱۰۲۴/۹۸۰). روی لپ‌تاپ با مقیاسِ ویندوزِ
   ۱۲۵–۱۵۰٪ یا زومِ مرورگر، عرضِ مؤثرِ CSS خیلی کمتر از عددِ فیزیکیِ صفحه
   می‌شود (مثلاً نمایشگرِ ۱۳۶۶ با مقیاسِ ۱۵۰٪ فقط ~۹۱۰px CSS است)؛ با ۹۸۰
   این صفحه‌ها اشتباهاً «موبایل روی دسکتاپ» می‌ماندند. ۸۲۰ همهٔ دسکتاپ/
   لپ‌تاپ‌ها (حتی مقیاس‌دار) و تبلتِ بزرگ را می‌گیرد، ولی موبایل و تبلتِ
   کوچک (پرتره ≤۷۶۸) دست‌نخورده می‌مانند.
   موبایل هیچ تغییری نمی‌کند؛ این بلوک فقط در عرضِ زیاد فعال می‌شود و
   «ستونِ ۴۳۰ کشیده روی دسکتاپ» را به «سایدبارِ راست + محتوایِ متعادل»
   تبدیل می‌کند — تماماً با override روی همان استایل‌هایِ inline، بدونِ
   دست‌زدن به ساختارِ HTML (پس با هیچ کارِ دیگری تداخل ندارد).

   دو نکتهٔ ظریف که این را امن می‌کند:
   • isApp با data-cp-if وقتی «فعال» است display:contents می‌گیرد و وقتی
     «غیرفعال» است display:none (app.js). قاعدهٔ گرید را با
     [style*="contents"] فقط به حالتِ فعال می‌چسبانیم — پس در صفحهٔ ورود
     (که isApp=none است) گرید فعال نمی‌شود و اپ اشتباهی نمایش داده نمی‌شود.
   • مودال‌ها position:fixed اند (خطِ ۵۹۰)، پس تبدیلِ isApp به گرید
     جای‌گذاریِ آن‌ها را به‌هم نمی‌زند.
   ========================================================================== */
@media (min-width: 820px) {
  /* رَپِرِ ریشه پهن می‌شود؛ ولی ورود/بوت باریک و وسط‌چین می‌مانند */
  .cp-root { max-width: 1180px !important; }
  [data-screen-label="ورود"], [data-screen-label="بوت"] {
    width: 100%; max-width: 430px; margin-inline: auto;
  }

  /* isApp فعال → گرید: سایدبارِ راست + هدر + محتوا (RTL: ستونِ اول راست است) */
  [data-cp-if="isApp"][style*="contents"] {
    display: grid !important;
    grid-template-columns: 244px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "side head" "side main";
    align-items: start;
    min-height: 100vh;
  }

  /* هدر و محتوا هم‌عرض، وسط‌چین در ستونِ محتوا */
  [data-cp-if="isApp"] > header {
    grid-area: head;
    width: 100%; max-width: 720px; margin-inline: auto;
    padding: 26px 30px 10px !important;
  }
  [data-cp-if="isApp"] > main {
    grid-area: main;
    width: 100%; max-width: 720px; margin-inline: auto;
    padding: 8px 30px 34px !important;
  }

  /* نوارِ پایین → سایدبارِ عمودیِ چسبان در سمتِ راست */
  [data-cp-if="isApp"] > nav {
    grid-area: side;
    position: sticky !important;
    top: 0 !important; bottom: auto !important;
    align-self: start;
    height: 100vh;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    border-top: none !important;
    border-inline-start: 1px solid rgba(255, 255, 255, .07) !important;
    background: transparent !important;
    padding: 22px 12px !important;
  }
  /* هر آیتم: افقی (آیکون + برچسب)، بزرگ‌تر و کلیک‌پذیرتر */
  [data-cp-if="isApp"] > nav > a {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 13px;
    font-size: 13.5px !important;
    transition: background .16s ease;
  }
  [data-cp-if="isApp"] > nav > a:hover { background: rgba(255, 255, 255, .05); }
}

/* ==========================================================================
   تول‌تیپِ نمودارِ «مصرف ۳۰ روز اخیر» — جلوگیری از بیرون‌زدن از کارت
   --------------------------------------------------------------------------
   هر میله یک لیبلِ شناور (em, white-space:nowrap) دارد که با
   inset-inline-start:50%+translateX(50%) روی همان میله وسط‌چین می‌شود.
   روی میله‌هایِ لبه (اولین = «۳۰ روز پیش» در راست، آخرین = «امروز» در چپ)
   نیمی از لیبل از لبهٔ کارت بیرون می‌زد — به‌ویژه با واحدهایِ بلندترِ
   «گیگابایت». این دو قاعده لیبلِ میله‌هایِ لبه را به‌جای وسط‌چین، به لبهٔ
   داخلیِ کارت لنگر می‌کنند تا به‌سمتِ داخل باز شود و بیرون نزند؛ میله‌هایِ
   میانی همان وسط‌چینِ قبلی می‌مانند. (موبایل و دسکتاپ، هر دو.) */
.cp-usebars > span:first-of-type em {
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  transform: none !important;
}
.cp-usebars > span:last-of-type em {
  inset-inline-start: auto !important;
  inset-inline-end: 0 !important;
  transform: none !important;
}

/* ==========================================================================
   چیپ‌هایِ ویژگیِ بسته — صفحهٔ «خرید و تمدید» (assets/screens/buy.js،
   renderMetaChips). یک خطِ متنیِ « مدت · کاربر همزمان · سرعت »-جدا را به
   چند چیپِ کوتاهِ آیکون‌دار تبدیل می‌کند تا هرکدام در یک خط جا شود؛ خودِ
   دادهٔ سرور (p.meta) دست‌نخورده می‌ماند، فقط چیدمانش عوض شده.

   بدونِ ویژگیِ فیزیکیِ چپ/راست: gap و padدینگِ متقارن کارِ RTL را بدونِ
   inset-inline می‌دهد؛ flex-wrap طبقِ جهتِ سندِ RTL خودش راست‌به‌چپ
   می‌چیند. رنگ‌ها عیناً پالتِ تیره‌ی همین فایل (muted #7d877f/#9aa59d،
   تینتِ rgba(255,255,255,..) — نه رنگِ جدید). */
.cp-feat-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.cp-feat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  white-space: nowrap;
}
.cp-feat-chip svg {
  flex: 0 0 auto;
  color: #7d877f;
}
.cp-feat-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: #9aa59d;
}