/* =================================================================
   مینی‌پولی — کامپوننت‌های ثبت‌نام، پشتیبانی و محتوا

   روی main.css و ui.css سوار می‌شود و فقط از توکن‌های آن‌ها می‌خواند.
   قانون رنگ BRAND.md پابرجاست: سبز فقط برای «باز/موفق»، قرمزِ ember
   فقط برای «بسته/فوری»، طلایی فقط برای کد جایزه، بنفش دست نمی‌خورد.
   ================================================================= */

/* ===== ۱) نشان وضعیت ثبت‌نام ===== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-fine);
  font-weight: 800;
  line-height: 1.2;
  color: var(--muted);
  background: rgba(255, 255, 255, .03);
}
.status-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}
.status-badge--green {
  color: var(--green);
  border-color: rgba(124, 245, 107, .38);
  background: rgba(124, 245, 107, .07);
}
.status-badge--green::before { box-shadow: 0 0 0 4px rgba(124, 245, 107, .16); }
.status-badge--red {
  color: var(--err);
  border-color: rgba(255, 107, 74, .42);
  background: rgba(255, 107, 74, .08);
}

/* ===== ۲) حلقهٔ «فرصت ثبت‌نام» =====
   conic-gradient + ماسک شعاعی؛ نه SVG، نه JS برای کشیدن. --p بین ۰ و ۱. */
.ring {
  --p: 0;
  --size: 112px;
  --thick: 9px;
  --ring: var(--green);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: none;
}
.ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--p) * 1turn), var(--green-track) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + 1px));
  transition: background var(--dur-slow) var(--ease-out);
}
.ring--warn { --ring: var(--warn); }
.ring--red { --ring: var(--ember); }
.ring--off { --ring: var(--faint); }
.ring__label {
  position: relative;
  display: grid;
  gap: 2px;
  text-align: center;
  line-height: 1.1;
}
.ring__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ring__unit { font-size: var(--fs-tiny); color: var(--dim); }

.reg-status {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.reg-status__text { display: grid; gap: var(--sp-2); min-width: 0; flex: 1 1 180px; }

/* ===== ۳) اعلان اولویت ===== */
.notice {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px solid var(--warn-edge);
  border-inline-start-width: 3px;
  border-radius: var(--r-sm);
  background: var(--warn-bg);
  color: var(--ink);
  font-size: var(--fs-fine);
  line-height: var(--lh-snug);
}
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--warn); }

/* ===== ۴) میزبان‌ها — اسپانسر و سازندهٔ محتوا ===== */
.partners { display: grid; gap: var(--sp-3); }
.partner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  color: inherit;
  text-decoration: none;
}
a.partner:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .04); }
.partner__role {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
}
.partner__name { font-weight: 800; }
.partner__tagline { font-size: var(--fs-tiny); color: var(--dim); }
.partner > .stack { min-width: 0; flex: 1; }
/* نشان اسپانسر در ui.css کل خانه را پر می‌کند (برای دیوار لوگو)؛ اینجا فقط یک مربع کنار متن است */
.partner .sponsor-mark {
  flex: none;
  width: auto;
  height: auto;
  padding: 0;
}
.partner .sponsor-mark img { max-height: 40px; max-width: 72px; }

/* ===== ۵) باکس جامعه ===== */
.community { display: grid; gap: var(--sp-2); }
.community__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.community__link:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .04); }
.community__glyph {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}
.community__text { display: grid; min-width: 0; }
.community__title { font-weight: 700; font-size: var(--fs-fine); }
.community__desc { font-size: var(--fs-tiny); color: var(--dim); }
.community__arrow { margin-inline-start: auto; color: var(--faint); }

/* ===== ۶) تیک رضایت ===== */
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-fine);
  line-height: var(--lh-snug);
  color: var(--muted);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.check:hover { border-color: var(--line-2); }
.check:has(input:checked) { border-color: rgba(124, 245, 107, .3); background: rgba(124, 245, 107, .04); color: var(--ink); }
.check:has(input[aria-invalid='true']) { border-color: var(--err-edge); background: var(--err-bg); }
.check input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xs);
  background: var(--surface-3);
  cursor: pointer;
}
.check input::after {
  content: "";
  width: 10px;
  height: 6px;
  border: solid var(--green-ink);
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.check input:checked { background: var(--green); border-color: var(--green); }
.check input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.check input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.check__req { color: var(--err); font-weight: 800; }
.check a { color: var(--ink); }

/* ===== ۷) آپلود استیکر / پیوست ===== */
.upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.upload.is-drag { border-color: var(--green); background: rgba(124, 245, 107, .05); }
.upload__preview {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--faint);
}
.upload__preview img { width: 100%; height: 100%; object-fit: cover; }
.upload__body { display: grid; gap: var(--sp-1); min-width: 0; flex: 1; }
.upload__name { font-weight: 700; font-size: var(--fs-fine); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__hint { font-size: var(--fs-tiny); color: var(--dim); }
.upload__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.upload input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.legal {
  font-size: var(--fs-tiny);
  line-height: var(--lh-snug);
  color: var(--dim);
  padding-inline-start: var(--sp-3);
  border-inline-start: 2px solid var(--line-2);
}

.attach-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.attach {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-tiny);
  color: var(--muted);
  background: rgba(255, 255, 255, .02);
  text-decoration: none;
}
a.attach:hover { color: var(--ink); border-color: var(--line-2); }
.attach img { width: 28px; height: 28px; object-fit: cover; border-radius: var(--r-xs); }
.attach__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.attach button {
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
  font: inherit;
  padding: 0 2px;
}
.attach button:hover { color: var(--err); }

/* ===== ۸) تایید موبایل ===== */
.phone-verify { display: grid; gap: var(--sp-3); }
.phone-verify__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.phone-verify__row .input { flex: 1 1 180px; }
.phone-verify__done {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--ok-edge);
  border-radius: var(--r-sm);
  background: var(--ok-bg);
  font-size: var(--fs-fine);
}
.phone-verify__done svg { width: 18px; height: 18px; color: var(--green); flex: none; }
.otp--compact .otp-input { width: 42px; height: 48px; font-size: 20px; }

/* ===== ۹) باکس مرکزی فرم ثبت‌نام ===== */
.regform { display: grid; gap: var(--sp-5); }
.regform__section { display: grid; gap: var(--sp-3); }
.regform__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-weight: 800;
  font-size: var(--fs-note);
}
.regform__num {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--faint);
}
.regform__state { margin-inline-start: auto; font-size: var(--fs-tiny); font-weight: 700; }

/* چک‌لیست کنار دکمهٔ پرداخت */
#quote-reqs li { transition: color var(--dur-fast) var(--ease); }
#quote-reqs li:not(.is-done) { color: var(--dim); }
#quote-reqs li:not(.is-done) .pxl { opacity: .3; filter: grayscale(1); }
#quote-reqs li.is-done { color: var(--ink); }

/* ===== ۱۰) مودال ===== */
dialog.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: var(--rim), var(--elev-3);
}
dialog.modal::backdrop { background: rgba(3, 5, 8, .72); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: modal-in var(--dur) var(--ease-out); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.modal__title { font-size: var(--fs-h6); font-weight: 900; margin: 0; }
.modal__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
}
.modal__close:hover { color: var(--ink); border-color: var(--line-2); }
.modal__body { padding: var(--sp-6); overflow-y: auto; }

/* ===== ۱۱) بنرهای دسترسی سریع ===== */
.banners {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  /* همان ناودان هدر — shell خودش پدینگ کناری ندارد */
  padding: var(--sp-4) var(--gutter) 0;
}
.banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)), var(--surface-1);
  box-shadow: var(--rim), var(--elev-1);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease-out);
}
.banner:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--rim), var(--elev-2); }
.banner__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--muted);
}
.banner__icon svg { width: 20px; height: 20px; }
.banner__text { display: grid; gap: 2px; min-width: 0; }
.banner__title { font-weight: 800; font-size: var(--fs-note); }
.banner__sub { font-size: var(--fs-tiny); color: var(--dim); }
.banner__go { margin-inline-start: auto; color: var(--faint); transition: transform var(--dur-fast) var(--ease); }
.banner:hover .banner__go { transform: translateX(-3px); color: var(--ink); }

/* ===== ۱۲) دسته‌بندی بازی‌ها ===== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.cat {
  position: relative;
  display: grid;
  grid-template-rows: 120px auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: var(--rim), var(--elev-1);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease-out);
}
.cat:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--rim), var(--elev-2); }
.cat__art { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.cat__body { display: grid; gap: var(--sp-2); padding: var(--sp-4); }
.cat__meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-tiny); color: var(--dim); }
.cat__open { color: var(--green); font-weight: 800; }
.cat.is-empty { opacity: .72; }
.cat .tag { position: absolute; top: var(--sp-3); inset-inline-start: var(--sp-3); }

.suggest-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
}

/* ===== ۱۳) کد جایزه ===== */
.reward {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px dashed rgba(255, 194, 75, .42);
  border-radius: var(--r-md);
  background: rgba(255, 194, 75, .04);
  text-align: center;
}
.reward__code {
  font-family: var(--font-code);
  font-size: clamp(18px, 1.6vw + 10px, 26px);
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--warn);
  direction: ltr;
  word-break: break-all;
}
.reward.is-dead { border-color: var(--line-2); background: transparent; }
.reward.is-dead .reward__code { color: var(--faint); text-decoration: line-through; }

/* ===== ۱۴) پشتیبانی — فهرست و گفتگو ===== */
.ticket-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ticket-row:hover { border-color: var(--line-2); background: var(--surface-2); }
.ticket-row.is-unread { border-inline-start: 3px solid var(--green); }
.ticket-row__subject { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row__meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-tiny); color: var(--dim); }
.ticket-row__code { font-family: var(--font-code); direction: ltr; }
.dot-unread {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(124, 245, 107, .18);
}

.thread { display: grid; gap: var(--sp-3); }
.msg {
  display: grid;
  gap: var(--sp-2);
  max-width: min(86%, 640px);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  justify-self: start;
}
/* پیام پشتیبانی آن‌طرف گفتگو می‌نشیند (در RTL: چپ) */
.msg--staff { justify-self: end; background: var(--surface-3); border-color: var(--line-2); }
.msg--internal {
  justify-self: stretch;
  max-width: none;
  border-style: dashed;
  border-color: var(--warn-edge);
  background: var(--warn-bg);
}
.msg__head { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: baseline; font-size: var(--fs-tiny); color: var(--dim); }
.msg__author { font-weight: 800; color: var(--ink); }
.msg__body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--lh-body); font-size: var(--fs-note); }

.composer { display: grid; gap: var(--sp-3); }
.composer__bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.composer__bar .spacer { flex: 1; }

/* ===== ۱۵) بلاگ ===== */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); }
.blog-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: var(--rim), var(--elev-1);
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast) var(--ease);
}
.blog-card:hover { transform: translateY(-3px); border-color: var(--line-2); }
.blog-card__cover { aspect-ratio: 16 / 7; width: 100%; max-width: 100%; object-fit: cover; background: var(--surface-3); }
.blog-card__body { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-5); }
.blog-card__title { font-size: var(--fs-h6); font-weight: 900; line-height: var(--lh-tight); }
.blog-card__meta { font-size: var(--fs-tiny); color: var(--dim); }

.prose { max-width: var(--measure); display: grid; gap: var(--sp-5); }
.prose p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--muted); }

/* ===== ۱۶) واکنش‌گرایی ===== */
@media (max-width: 900px) {
  .banners { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ring { --size: 96px; --thick: 8px; }
  .ring__value { font-size: 19px; }
  .msg { max-width: 100%; }
  .ticket-row { grid-template-columns: 1fr; }
  .upload { flex-wrap: wrap; }
  .modal__body { padding: var(--sp-5); }
}

@media (prefers-reduced-motion: reduce) {
  dialog.modal[open] { animation: none; }
  .banner, .cat, .blog-card { transition: none; }
}