/* =========================
   BUTTON

   قبلاً این فایل .card, .shortener_card, .form-group, .status,
   .result-box, .qr-box, .result-input, .benefits, .benefit-card هم
   داشت. با بررسی دقیق معلوم شد هیچ‌کدوم هیچ‌جا استفاده نمی‌شن —
   به‌جز .btn (+ .is-primary/.is-secondary/.is-danger) که panel.js
   موقع ساختن دکمه‌های کپی/QR/حذف/آمار و دکمه‌ی ارتقا واقعاً می‌سازه.
   بقیه حذف شدن. رنگ‌های واقعی این دکمه‌ها رو هر صفحه (مثل panel.css)
   خودش override می‌کنه برای تم تیره.
========================= */

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: var(--space-xs);

    width: 100%;

    height: var(--button-height);

    padding-inline: var(--space-lg);

    border-radius: var(--radius-md);

    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);

    cursor: pointer;

    transition:
        background-color var(--transition-base),
        transform var(--transition-fast);
}

.btn:active {
    transform: scale(0.98);
}

.btn.is-primary {
    background-color: var(--color-primary);
    color: #ffffff;
}

.btn.is-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn.is-secondary {
    background-color: #eef2ff;
    color: #1e3a8a;
}

.btn.is-secondary:hover {
    background-color: #e0e7ff;
}

/*
 * .is-danger رو panel.js واقعاً می‌سازه (روی دکمه‌ی حذف لینک) ولی این
 * فایل هیچ‌وقت رنگی براش تعریف نکرده بود — فقط چون panel.css خودش
 * .btn-delete رو جداگانه رنگ‌آمیزی می‌کنه (که با همون specificity،
 * چون بعد از این فایل لود می‌شه، برنده می‌شه) بصری مشکلی نداشت. عمداً
 * دست‌نخورده گذاشتمش تا رفتار قبلی عوض نشه؛ اگه یه‌جای دیگه هم از
 * .is-danger بدون override صفحه استفاده بشه، فعلاً بی‌رنگ می‌مونه.
 */