/* استایل صفحهٔ قیمت لایهٔ توکن این پوشه --color-* و --sp-* و --fs-* است نه --dv-* ERP، و نردبان کارت‌ها ۱→۲(۷۰۰px)→۴(۱۱۶۰px) */

/* ── نوار کاهش ریسک ─────────────────────────────────────────────────────── */
.pricing-risk-section {
  padding-block: var(--sp-6) 0;
}

.pricing-risk {
  list-style: none;
  margin: 0;
  padding: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.pricing-risk li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.pricing-risk i {
  color: var(--color-brand);
  font-size: var(--fs-sm);
}

.pricing-risk strong {
  color: var(--color-text-strong);
}

/* شبکهٔ کارت‌های مدت — کارتِ آزمایشی هم در همین ردیف می‌نشیند تا همهٔ گزینه‌ها هم‌قد دیده شوند */
.plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: stretch;
}

.plans-grid-note {
  margin: var(--sp-5) auto 0;
  max-width: var(--container-narrow);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ── کارت یک مدت ────────────────────────────────────────────────────────── */
/* کارت هم‌شکل سه‌گانهٔ تعرفهٔ صفحهٔ اصلی است تا «مدت اشتراک» در قیمت و لندینگ یک زبان بصری داشته باشد (§۲۹) */
.pc-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

/* تأکید «انتخاب پیشنهادی» چند حامل دارد: مرز ضخیم برند، سایه و نشانِ متنی، تا کاربر کم‌بینا یا نابینای رنگ هم تشخیص دهد */
.pc-card-best {
  border-width: 2px;
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
}

.pc-card-trial {
  border-style: dashed;
}

.pc-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

.pc-flag-trial {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
}

.pc-name {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  color: var(--color-text-strong);
}

.pc-amount {
  margin: var(--sp-2) 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.pc-amount-value {
  font-size: var(--fs-h4, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-strong);
}

.pc-amount-unit {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.pc-amount-na {
  color: var(--color-text-muted);
}

/* نرخ فهرستیِ خط‌خورده کنار مبلغ می‌نشیند، کوچک‌تر و کم‌رنگ‌تر تا مبلغ اصلی را نبلعد */
.pc-amount-list {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration-thickness: 1px;
}

.pc-term {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* اعلام مالیات؛ لحن اطلاع‌رسان است نه تأکیدی، چون بخشی از شرایط پرداخت است */
.pc-tax {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.pc-equal {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.pc-equal strong {
  color: var(--color-text-strong);
}

/* خطِ زیرِ مبلغ در هر کارت (حتی بی‌تخفیف) هست تا همه هم‌قد بمانند؛ حالتِ بی‌تخفیف با رنگِ کم‌رنگ از تخفیفِ واقعی جدا می‌شود */
.pc-save {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  margin: var(--sp-1) 0 0;
  color: var(--color-brand-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.pc-save i {
  font-size: var(--fs-xs);
}

.pc-save.is-flat {
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
}

.pc-cta {
  margin-block-start: auto;
  inline-size: 100%;
}

/* ── افشای تدریجی: جزئیات فاکتور و شرح ماژول ─────────────────────────────── */
.pc-more,
.pm-more,
.pf-box {
  margin-block-start: var(--sp-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.pc-more>summary,
.pm-more>summary,
.pf-box>summary {
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-brand-ink);
  border-radius: var(--radius-md);
  list-style: none;
}

/* مثلث پیش‌فرض وبکیت حذف و با یک نشانگر جهت‌آگاه جایگزین می‌شود تا در RTL درست بیفتد */
.pc-more>summary::-webkit-details-marker,
.pm-more>summary::-webkit-details-marker,
.pf-box>summary::-webkit-details-marker {
  display: none;
}

.pc-more>summary::after,
.pm-more>summary::after,
.pf-box>summary::after {
  content: '+';
  margin-inline-start: var(--sp-2);
  font-weight: var(--fw-bold);
}

.pc-more[open]>summary::after,
.pm-more[open]>summary::after,
.pf-box[open]>summary::after {
  content: '−';
}

.pc-more>summary:focus-visible,
.pm-more>summary:focus-visible,
.pf-box>summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.pc-more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-inline: var(--sp-3);
  padding-block-end: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.pc-more-list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: space-between;
}

.pc-more-num {
  color: var(--color-text);
}

/* ── شامل هر اشتراک ─────────────────────────────────────────────────────── */
.pm-base-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.pm-base-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.pm-base-item i {
  color: var(--color-brand);
  margin-block-start: 0.2rem;
}

.pm-base-name {
  font-weight: var(--fw-medium);
  color: var(--color-text-strong);
}

.pm-base-value {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ── ماژول‌های قابل افزودن ──────────────────────────────────────────────── */
.pm-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.pm-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.pm-name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-base);
  color: var(--color-text-strong);
}

.pm-name i {
  color: var(--color-brand);
  font-size: var(--fs-sm);
}

/* برچسب نوع افزونه (امکان تکمیلی / سرویس تکمیلی / سرویس مصرفی) تا اشتباه در تمایز §۵ شکل نگیرد */
.pm-name span:first-of-type {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.pm-type-badge {
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--color-brand-border);
  border-radius: var(--radius-pill);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium, 500);
  line-height: var(--lh-tight);
}

.pm-value {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.pm-more>p {
  margin: 0;
  padding: 0;
  padding-inline: var(--sp-3);
  padding-block-end: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.pm-rate {
  margin-block-start: auto;
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--color-border-subtle);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

.pm-rate strong {
  color: var(--color-text-strong);
}

.pm-storage {
  margin: var(--sp-6) auto 0;
  max-width: var(--container-narrow);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.pm-storage i {
  color: var(--color-brand);
}

.pm-storage strong {
  color: var(--color-text-strong);
}

.pm-actions {
  margin: var(--sp-5) 0 0;
  text-align: center;
}

/* ── اجزای قیمت ─────────────────────────────────────────────────────────── */
.pf-list {
  margin: 0;
  padding: 0;
  padding-inline: var(--sp-6) var(--sp-4);
  padding-block-end: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.pf-list strong {
  color: var(--color-text-strong);
}

.pricing-note {
  margin: var(--sp-6) auto 0;
  max-width: var(--container-narrow);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ── فوکوس: هیچ outline حذف نمی‌شود، فقط پررنگ‌تر می‌شود ─────────────────── */
.pc-card a:focus-visible,
.pm-card a:focus-visible,
.pricing-note a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* ── نردبان واکنشی ──────────────────────────────────────────────────────── */
@media (min-width: 561px) {

  .pm-grid,
  .pm-base-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* کارتِ آزمایشی از همین مرحله در ردیف می‌نشیند: ۲×۲ تا ۱۰۲۳px، سپس همهٔ چهار کارت در یک ردیف */
@media (min-width: 700px) {
  .plans-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {

  .pm-grid,
  .pm-base-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1160px) {
  .plans-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pm-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ضدِ کارتِ یتیم: شمار ماژول‌ها از دیتابیس می‌آید و «زوج‌کردن» ممکن نیست، پس کارتِ آخرِ تنها عرضِ یک ستون را وسط می‌گیرد؛ بازه‌ها کران‌دارند تا در حالت سه‌ستونی هر شمارِ فردِ غیریتیم پهن نشود */
@media (min-width: 561px) and (max-width: 899px) {
  .pm-grid> :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - var(--sp-4)) / 2);
  }

  .pm-base-list> :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - var(--sp-3)) / 2);
  }
}

@media (min-width: 900px) and (max-width: 1159px) {
  .pm-grid> :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - 2 * var(--sp-4)) / 3);
  }

  .pm-base-list> :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - 2 * var(--sp-3)) / 3);
  }
}

/* ≥۱۱۶۰px کارت‌های مدت و شبکهٔ ماژول هر دو چهارستونی و یک‌ردیفه می‌شوند، پس قاعدهٔ ضدِ یتیمِ شبکهٔ مدت اینجا معنا ندارد و فقط ماژول و فهرست پایه می‌مانند */
@media (min-width: 1160px) {
  .pm-grid> :last-child:nth-child(4n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - 3 * var(--sp-4)) / 4);
  }

  .pm-base-list> :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - 2 * var(--sp-3)) / 3);
  }
}

/* در ۳۶۰px عرضِ درونی کارت کم‌تر از ۳۰۰px می‌شود؛ بدون این پله رقم مبلغ سرریز می‌کند */
@media (max-width: 360px) {

  .pc-card,
  .pm-card {
    padding: var(--sp-4) var(--sp-3);
  }

  .pc-amount-value {
    font-size: var(--fs-2xl);
  }

  .pricing-risk {
    padding: var(--sp-3);
  }

  .pc-more-list li {
    justify-content: flex-start;
  }

  /* نوار تب در ۳۲۰px با اسکرول بومی باز می‌شود؛ دکمه‌ها فشرده‌تر می‌شوند تا نشانه‌ها نخوانده نمانند */
  .pricing-tab-btn {
    padding: var(--sp-2) var(--sp-2);
    font-size: var(--fs-xs, 0.8125rem);
  }

  .pricing-limit,
  .pricing-discount,
  .pricing-inquiry-item,
  .pricing-policy-item {
    padding: var(--sp-2) var(--sp-3);
  }

  .pricing-limit-value,
  .pricing-discount-value,
  .pricing-inquiry-value,
  .pricing-policy-value {
    white-space: normal;
    text-align: left;
  }
}

/* ردیف گام‌های پرداخت روی Swiper است و عرض سلید از components/swiper-slides.css می‌آید؛ اینجا فقط خواصِ فشردهٔ کارتِ متنی برای عرض کوچک */
@media (max-width: 1199px) {
  .pay-flow .step-item {
    padding: var(--sp-5) var(--sp-4);
  }
}

@media (max-width: 479px) {
  .pay-flow .step-item {
    padding: var(--sp-4) var(--sp-3);
  }
}

/* ── نوارِ هفت‌تبِ صفحهٔ قیمت (RTL) ─────────────────────────────────────────── */
/* بدون جاوااسکریپت همهٔ پنجره‌ها بازند (ترقیِ تدریجی)؛ با JS فقط پنجرهٔ فعال دیده می‌شود */
.pricing-tabs-section {
  padding-top: 0;
}

.pricing-tabs {
  /* نوار تب و پنجره‌ها در یک ستونِ یکتا می‌نشینند تا هیچ افقیِ اضافه در ۳۲۰px ساخته نشود */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.pricing-tabs-nav {
  /* ردیف تب‌ها روی یک بسترِ کم‌رنگ می‌نشیند تا از پس‌زمینهٔ صفحه جدا شود و گروه‌بندیِ بخش‌ها خوانا بماند */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1, 0.375rem);
  padding: var(--sp-1, 0.375rem);
  background: var(--color-surface-sunken, #f9fafb);
  border: 1px solid var(--color-border-subtle, #f3f4f6);
  border-radius: var(--radius-xl, 12px);
}

/* در عرض کم، ردیف تب‌ها افقی می‌لغزد تا هیچ دکمه‌ای خوانده‌نشده نماند و صفحه کشیده نشود */
@media (max-width: 767px) {
  .pricing-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    scrollbar-width: thin;
  }
}

.pricing-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1, 0.375rem);
  white-space: nowrap;
  padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
  border: 0;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--color-text-muted, #6b7280);
  font-family: inherit;
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-medium, 500);
  line-height: var(--lh-tight, 1.35);
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.pricing-tab-btn i {
  font-size: 0.9em;
  opacity: 0.85;
}

.pricing-tab-btn:hover {
  color: var(--color-text, #111827);
  background-color: var(--color-surface, #fff);
}

/* تب فعال یک «پیلِ» برند است نه فقط خطِ زیرین، تا در نگاهِ اول مشخص شود کدام بخش باز است */
.pricing-tab-btn.is-active {
  color: var(--color-text-on-brand, #fff);
  background-color: var(--color-brand, #0f766e);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(18, 27, 26, 0.06));
}

.pricing-tab-btn.is-active i {
  opacity: 1;
}

.pricing-tab-btn:focus-visible {
  outline: 2px solid var(--color-focus, #0d9488);
  outline-offset: 2px;
  border-radius: var(--radius-md, 8px);
}

.pricing-tab-panes {
  padding-top: var(--sp-4, 1rem);
}

/* همهٔ پنجره‌ها بدون جاوااسکریپت بازند (ترقیِ تدریجی)؛ فقط با کلاسِ is-js که رفتارساز می‌افزاید تک‌پنجره‌ای می‌شوند */
.pricing-tab-pane {
  display: block;
}

.pricing-tabs.is-js .pricing-tab-pane {
  display: none;
}

.pricing-tabs.is-js .pricing-tab-pane.is-active {
  display: block;
  animation: pricing-tab-in 0.24s ease;
}

@keyframes pricing-tab-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ── کارت‌های نرخ ظرفیت، تخفیف‌ها، استعلام و سیاست ────────────────────────── */
.pricing-limits,
.pricing-discounts,
.pricing-inquiry,
.pricing-policy {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--sp-3, 0.75rem);
}

.pricing-limit,
.pricing-discount,
.pricing-inquiry-item,
.pricing-policy-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 0.5rem);
  padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-xl, 12px);
  background: var(--color-surface, #fff);
}

.pricing-limit > i,
.pricing-discount > i,
.pricing-inquiry-item > i,
.pricing-policy-item > i {
  color: var(--color-brand, #0f766e);
  font-size: 1.05em;
  flex: 0 0 auto;
}

.pricing-limit-label,
.pricing-discount-label,
.pricing-inquiry-label,
.pricing-policy-label {
  color: var(--color-text-muted, #6b7280);
  font-size: var(--fs-xs, 0.8125rem);
  flex: 1 1 auto;
}

.pricing-limit-value,
.pricing-discount-value,
.pricing-inquiry-value,
.pricing-policy-value {
  color: var(--color-text, #111827);
  font-weight: 700;
  font-size: var(--fs-sm, 0.875rem);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {

  .pc-card,
  .pm-card,
  .pm-base-item {
    transition: none;
    animation: none;
    transform: none;
  }

  .pricing-tab-pane {
    animation: none;
  }

  .pricing-tab-btn {
    transition: none;
  }
}