/* فاز ۱۲ — همان الگوی [data-plan] در tools.css، اینجا هم برای نوار وضعیت */
[data-shell-page] { --accent: var(--color-gold) }
[data-shell-page][data-plan="plan-free"] { --accent: var(--plan-free) }
[data-shell-page][data-plan="plan-iran"] { --accent: var(--plan-iran) }
[data-shell-page][data-plan="plan-basic"] { --accent: var(--plan-basic) }
[data-shell-page][data-plan="plan-silver"] { --accent: var(--plan-silver) }
[data-shell-page][data-plan="plan-gold"] { --accent: var(--plan-gold) }
[data-shell-page][data-plan="plan-diamond"] { --accent: var(--plan-diamond) }

.status-card {
  background: var(--color-navy-light); border: 1px solid rgba(196,163,90,.35); border-inline-start: 3px solid var(--accent, var(--color-gold));
  border-radius: 14px; padding: 20px 22px; margin-bottom: 26px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.status-card .status-text { font-size: 16px; font-weight: 700 }
.status-card .status-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--text-70); margin-top: 6px }
.status-card .status-meta b { color: var(--text-82); font-weight: 600; unicode-bidi: isolate }

.feature-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px }
.feature-chip {
  font-size: 12.5px; color: var(--color-cream); background: rgba(255,255,255,.06);
  border: 1px solid var(--accent, var(--color-gold)); border-radius: 999px; padding: 5px 12px;
}


/* این نشست — بند بازخورد کاربر: باکس‌ها هم‌اندازه، امکانات زیر هم (نه چیپ
   افقی)، و دکمه دقیقاً روی یک خط در همه‌ی کارت‌ها. راه‌حل: .offer-body با
   flex:1 هر فضای اضافه‌ی کارت را می‌بلعد (نه فقط margin-top:auto روی
   دکمه) — نتیجه‌اش این است که دکمه در هر کارتِ هم‌ردیف، صرف‌نظر از تعداد
   ویژگی‌ها، دقیقاً روی یک خط می‌ایستد. grid همیشه کارت‌های هم‌ردیف را
   هم‌قد می‌کند (align-items: stretch، پیش‌فرض). */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; gap: 18px }
.offer-card {
  /* دستور کار نسخه ۲، بند ۸ — نوار یک‌پیکسلی دور کارت به رنگ اختصاصی همان
     پلن (JS مقدار --card-plan-color را از plan.color_token ست می‌کند، نه
     کد رنگ مستقیم — نگاه کن به membership.js::planCard). */
  background: var(--color-navy-light); border: 1px solid var(--card-plan-color, var(--color-gold)); border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.offer-body { flex: 1; display: flex; flex-direction: column }
.offer-card .offer-kicker { font-size: 12px; letter-spacing: .08em; color: var(--color-gold); margin-bottom: 10px }
.offer-card .offer-title { font-family: var(--font-heading); font-size: 20px; font-weight: 700; margin-bottom: 6px }
.offer-card .offer-price { font-size: 14px; color: var(--text-70); margin-bottom: 16px }
.offer-card .offer-price b { color: var(--color-cream); font-size: 20px; unicode-bidi: isolate }
.offer-card .offer-price .strike { text-decoration: line-through; opacity: .6; margin-inline-end: 6px; unicode-bidi: isolate }

/* «همه‌ی ویژگی‌ها زیر هم» — یک ستون، هر مورد روی خط خودش. */
.offer-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.offer-feature-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-82) }
.offer-feature-check { color: var(--accent, var(--color-gold)); font-weight: 700; flex-shrink: 0 }

.method-row { display: flex; gap: 8px; flex-wrap: wrap }
.method-row .btn { flex: 1; min-width: 90px; font-size: 13.5px; padding: 10px 12px }

.discount-input {
  background: var(--color-navy); border: 1px solid rgba(196,163,90,.3); border-radius: 8px;
  padding: 8px 10px; color: var(--color-cream); font-size: 13px; width: 100%;
}

.offer-buy-btn { width: 100% }
.offer-buy-btn--disabled {
  width: 100%; text-align: center; padding: 10px 16px; border-radius: 8px;
  background: var(--color-navy); color: rgba(245,240,230,.5);
  border: 1px dashed rgba(196,163,90,.3); font-size: 13px; cursor: default;
}

/* این نشست — بند ۳د: مودال پذیرش قوانین. پس‌زمینه تار و غیرقابل‌تعامل،
   روی موبایل اسکرول‌پذیر، دکمه‌ی ادامه همیشه در دسترس (max-height +
   overflow روی خودِ دیالوگ، نه کل صفحه). */
.terms-modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,14,24,.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px;
}
.terms-modal {
  background: var(--color-navy-light); border: 1px solid rgba(196,163,90,.35); border-radius: 16px;
  padding: 26px; max-width: 460px; width: 100%; max-height: 85vh; overflow-y: auto;
}
.terms-modal h3 { font-family: var(--font-heading); font-size: 18px; margin: 0 0 14px }
.terms-modal-actions .btn { min-width: 110px }

/* دستور کار نسخه ۲، بند ۶ — مودال تبریک */
.congrats-modal { text-align: center; position: relative; padding-top: 34px }
.congrats-modal .congrats-close {
  position: absolute; inset-inline-end: 14px; top: 10px; font-size: 16px; color: var(--text-70); padding: 4px 8px;
}
.congrats-modal .congrats-txline { color: var(--good); font-weight: 700; font-size: 13px; margin: 0 0 6px }
.congrats-modal h3 { font-size: 19px; margin: 0 0 22px; line-height: 1.7 }
.congrats-modal .btn { width: 100%; max-width: 260px; margin: 0 auto }