/* ===========================================================================
   پنجرهٔ اشتراکِ دستیار — چیدمان. فاز ۷۰، [D60]
   ===========================================================================

   ── چرا این فایل مشترک است ───────────────────────────────────────────

   بدنهٔ این پنجره را **هیچ قالبی نمی‌نویسد**:
   `_shared/js/assistant.js` بعد از هر بار باز شدن کلش را با
   `createElement` از نو می‌سازد، از روی پاسخِ `get_ai_plans`. ساختارش
   را پس سرور تعیین می‌کند و نه قالب — همان مرزِ پنجمِ
   `docs/27-frontend-architecture.md` §۳.۵، مثلِ
   `order-detail-base.css` و `checkout-base.css`.

   ── D60، که این فایل بستش ────────────────────────────────────────────

   تا فاز ۶۹ آن ماژول کلاس‌های **بوت‌استرپ** می‌ساخت: `col-md-6`،
   `row g-4`، `list-group-item d-flex justify-content-between`،
   `btn btn-sm btn-success`. یعنی یک ماژولِ مشترک چیدمانِ یک کتابخانهٔ
   مشخص را دیکته می‌کرد.

   **ولمارت بوت‌استرپ ندارد.** در آن قالب هیچ‌کدام از آن کلاس‌ها معنایی
   نداشتند: کارت‌های پلن به‌جای دو ستون زیرِ هم می‌آمدند و دکمهٔ «انتخاب
   به عنوان فعلی» یک `<button>`ِ خامِ خاکستری بود. و فست‌کارت —
   تنها قالبی که این پنجره در آن شکلی داشت — همان نام‌ها را در
   `pages/bot.css` دوباره تعریف کرده بود، **دو بار**، با دو مقدارِ
   متفاوت برای `.plan-card`.

   ── مرزِ این فایل ────────────────────────────────────────────────────

   اینجا فقط **چیدمان** است: شبکه، فاصله، جهت. رنگ و قلم و گوشه از
   توکن‌ها می‌آیند، پس در هر قالب شکلِ همان قالب را می‌گیرند — و قالبی
   که بخواهد بیشتر از این عوض کند، در `pages/bot.css`ِ خودش رویش
   می‌نویسد.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   اشتراک‌های فعال
   --------------------------------------------------------------------------- */

.plans__heading {
    font-family: var(--theme-font, sans-serif);
    font-size: var(--ds-text-lg, 1.125rem);
    text-align: center;
    margin-block: 0 var(--ds-space-3, 1rem);
}

.plans__active { margin-block-end: var(--ds-space-4, 1.5rem); }

.plans__list {
    display: grid;
    gap: var(--ds-space-2, 8px);
}

.plans__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-2, 8px);
    flex-wrap: wrap;
    padding: var(--ds-space-2, 8px) var(--ds-space-3, 1rem);
    border-radius: var(--theme-radius-sm, 0);
}

.plans__row-label { min-width: 0; }

.plans__row-button {
    min-height: 36px;
    padding-inline: var(--ds-space-3, 1rem);
    border: 0;
    border-radius: var(--theme-radius, 0);
    background: var(--theme-accent, #2b6cb0);
    color: #fff;
    font: inherit;
    font-size: var(--ds-text-sm, 0.9rem);
    cursor: pointer;
}

/* اشتراکی که همین حالا فعال است: دکمه‌اش کاری ندارد، پس نه رنگِ اقدام
   می‌گیرد و نه نشانگرِ کلیک. */
.plans__row-button.is-current {
    background: transparent;
    border: 1px solid currentcolor;
    color: var(--theme-ink-muted, #718096);
    cursor: default;
}

.plans__empty {
    text-align: center;
    color: var(--theme-ink-muted, #718096);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   درآمدِ فهرستِ پلن‌ها
   --------------------------------------------------------------------------- */

.plans__intro {
    text-align: center;
    margin-block-end: var(--ds-space-4, 1.5rem);
}

.plans__title {
    font-family: var(--theme-font, sans-serif);
    font-size: var(--ds-text-xl, 1.4rem);
    margin-block: 0 var(--ds-space-1, 4px);
}

.plans__lede {
    color: var(--theme-ink-muted, #718096);
    font-size: var(--ds-text-sm, 0.9rem);
    line-height: var(--ds-leading-normal, 1.6);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   شبکهٔ پلن‌ها
   ---------------------------------------------------------------------------
   `auto-fit` و نه دو ستونِ ثابت: تعدادِ پلن‌ها را مالک تعیین می‌کند و نه
   قالب. با یک پلن، آن یکی تمام‌عرض می‌شود به‌جای اینکه نیمی از پنجره
   خالی بماند.

   `align-items: stretch` (پیش‌فرضِ grid) عمدی است: کارت‌ها هم‌قد
   می‌مانند حتی وقتی توضیحِ یکی‌شان بلندتر است، پس دکمه‌های «خرید» روی
   یک خط می‌نشینند.
   --------------------------------------------------------------------------- */

.plans__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--ds-space-3, 1rem);
}

.plans__cell { min-width: 0; }

.plans__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--ds-space-3, 1rem);
    border-radius: var(--theme-radius-sm, 0);
}

.plans__card-name {
    font-family: var(--theme-font, sans-serif);
    font-size: var(--ds-text-base, 1rem);
    margin-block: 0 var(--ds-space-2, 8px);
}

.plans__card-desc {
    font-size: var(--ds-text-sm, 0.9rem);
    color: var(--theme-ink-muted, #718096);
    line-height: var(--ds-leading-normal, 1.6);
    margin-block: 0 var(--ds-space-2, 8px);
}

.plans__quota { margin-block: 0 var(--ds-space-3, 1rem); }

/* `margin-block-start: auto` روی کشویی و نه روی دکمه: کشویی و دکمه با
   هم پایینِ کارت می‌نشینند، پس در کارت‌های هم‌قد هر دو هم‌تراز می‌مانند. */
.plans__duration {
    width: 100%;
    min-height: 40px;
    margin-block: auto 0 var(--ds-space-2, 8px);
    padding-inline: var(--ds-space-2, 8px);
    border: 1px solid var(--theme-line, rgb(0 0 0 / 12%));
    border-radius: var(--theme-radius-sm, 0);
    background: var(--theme-surface, #fff);
    color: var(--theme-ink, inherit);
    font: inherit;
}

.plans__buy {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: var(--theme-radius, 0);
    background: var(--theme-accent, #2b6cb0);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* پلنی که هنوز نمی‌شود تمدیدش کرد. متنِ دکمه خودش دلیل را می‌گوید، پس
   اینجا فقط باید «قابلِ کلیک نیست» را نشان بدهد. */
.plans__buy.is-locked {
    background: transparent;
    border: 1px solid var(--theme-line, rgb(0 0 0 / 12%));
    color: var(--theme-ink-muted, #718096);
    font-weight: 400;
    font-size: var(--ds-text-sm, 0.9rem);
    cursor: not-allowed;
}