/* CTA چسبان موبایل (partials/sticky-cta.ejs) — الگوی موبایل؛ در ≥۶۴۱px نوار و فاصله‌گیرش display:none می‌شوند؛ بارگذاری در PAGE_ASSETS pricing/hardware/hardware-detail */

.sticky-cta,
.sticky-cta-spacer {
  display: none;
}

@media (max-width: 640px) {
  /* فاصله‌گیر: هم‌ارتفاع نوار تا آخرین ردیف فوتر زیر نوار پنهان نشود */
  .sticky-cta-spacer {
    display: block;
    height: 5.5rem;
  }

  .sticky-cta {
    display: block;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    /* --z-sticky زیر هدر و کشوی موبایل می‌نشیند تا وقتی منو باز است رویش نیاید */
    z-index: var(--z-sticky);
    padding: var(--sp-3) var(--gutter);
    /* در iOS نوار خانه پایین صفحه است؛ بدون این پدینگ دکمه زیر آن می‌رفت */
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-lg);
  }

  /* وقتی کشوی ناوبری (معادلِ مودال) باز است نوار از چیدمان و ترتیبِ تمرکز حذف می‌شود تا روی محتوای کشو نیفتد */
  html.nav-drawer-open .sticky-cta {
    display: none;
  }

  /* فاصله‌گیرِ پیش از فوتر نوار را بالاتر نمی‌برد (فوتر بعد از آن در DOM است)، پس کفِ فوتر به‌اندازهٔ نوار پایین می‌رود تا ردیفِ آخر زیر نوار پنهان نشود */
  .site-footer {
    padding-bottom: calc(var(--sp-8) + 5.5rem);
  }

  .sticky-cta-note {
    margin: 0 0 var(--sp-2);
    color: var(--color-text-muted);
    font-size: var(--fs-2xs);
    text-align: center;
  }

  .sticky-cta-actions {
    display: flex;
    gap: var(--sp-2);
  }

  /* اقدام اصلی سهم بیشتری از عرض می‌گیرد تا سلسله‌مراتب فقط با رنگ نباشد */
  .sticky-cta-primary {
    flex: 2 1 0;
  }

  .sticky-cta-secondary {
    flex: 1 1 0;
  }

  .sticky-cta .btn {
    /* هدف لمسی حداقل ۴۴px مطابق دسترس‌پذیری موبایل */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--sp-3);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }
}