/*
 * core/buttons.css — همه‌ی استایل دکمه‌های فرانت (تنها منبع)
 * --------------------------------------------------------------------------
 * رنگ، شکل، اندازه و حالت‌های دکمه فقط اینجا تعریف می‌شوند. فایل‌های صفحه
 * فقط چیدمان (عرض، فاصله، ارتفاع برای هم‌تراز شدن با کنار دستی) را تنظیم
 * می‌کنند و رنگ/radius/فونت .btn را override نمی‌کنند.
 *
 * انتخاب variant بر اساس کار دکمه:
 *   .btn-primary            اقدام اصلی صفحه — افزودن به سبد، پرداخت، ثبت فرم
 *   .btn-secondary          اقدام مهم دوم (سرمه‌ای) — پرداخت با کیف پول، اعمال فیلتر/کد تخفیف
 *   .btn-outline-primary    اقدام فرعی / ناوبری — بازگشت به لیست، ویرایش، مشاهده
 *   .btn-outline-secondary  خنثی — انصراف، بستن، نمایش رمز
 *   .btn-link               اقدام متنی — ارسال مجدد کد، تغییر شماره
 *   .btn-danger             حذف قطعی (داخل پنجره‌ی تأیید)
 *   .btn-outline-danger     حذف در سطر/کارت — حذف از سبد، پایان نشست
 *   .btn-success            تأیید نهایی مثبت — تأیید دریافت سفارش
 *   .btn-outline-light      روی زمینه‌ی تیره (بخش‌های سرمه‌ای صفحه‌ی اصلی)
 *   .btn-choice             گزینه‌ی قابل انتخاب (label کنار input.btn-check)
 *
 * اندازه: .btn-sm / (پیش‌فرض) / .btn-lg — شکل: .btn-icon (فقط آیکون)، .btn-block (تمام‌عرض)
 */

/* ---- Base ---- */
.btn {
  --bs-btn-padding-x: var(--btn-padding-x);
  --bs-btn-padding-y: var(--btn-padding-y);
  --bs-btn-font-size: var(--btn-font-size);
  --bs-btn-font-weight: var(--btn-font-weight);
  --bs-btn-line-height: 1.5;
  --bs-btn-border-radius: var(--btn-radius);
  --bs-btn-border-width: 1px;
  --bs-btn-box-shadow: none;
  --bs-btn-disabled-opacity: .5;
  --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--btn-focus-ring, color-mix(in srgb, var(--color-primary) 25%, transparent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: inherit;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn:active:not(:disabled):not(.disabled) {
  transform: translateY(1px);
}

/* فقط <button> واقعاً disabled؛ لینکِ .disabled باید pointer-events:none بماند */
.btn:disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

.btn .spinner-border {
  width: 1em;
  height: 1em;
  border-width: .15em;
}

/* ---- Sizes ---- */
.btn-sm {
  --bs-btn-padding-x: var(--btn-padding-x-sm);
  --bs-btn-padding-y: var(--btn-padding-y-sm);
  --bs-btn-font-size: var(--btn-font-size-sm);
}

.btn-lg {
  --bs-btn-padding-x: var(--btn-padding-x-lg);
  --bs-btn-padding-y: var(--btn-padding-y-lg);
  --bs-btn-font-size: var(--btn-font-size-lg);
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ---- Shapes ---- */
.btn-icon {
  --btn-icon-size: 40px;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  padding: 0;
  border-radius: 50%;
  flex: none;
}

.btn-icon.btn-sm {
  --btn-icon-size: 32px;
}

.btn-icon.btn-lg {
  --btn-icon-size: 48px;
}

/* ---- Variants ---- */
.btn-primary {
  --btn-focus-ring: color-mix(in srgb, var(--color-warning) 45%, transparent);
  --bs-btn-color: var(--color-primary);
  --bs-btn-bg: var(--color-warning);
  --bs-btn-border-color: var(--color-warning);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-warning-strong);
  --bs-btn-hover-border-color: var(--color-warning-strong);
  --bs-btn-active-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-warning-strong);
  --bs-btn-active-border-color: var(--color-warning-strong);
  --bs-btn-disabled-color: var(--color-primary);
  --bs-btn-disabled-bg: var(--color-warning);
  --bs-btn-disabled-border-color: var(--color-warning);
}

.btn-secondary {
  --bs-btn-color: var(--color-white);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-primary-dark);
  --bs-btn-hover-border-color: var(--color-primary-dark);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-disabled-color: var(--color-white);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-disabled-color: var(--color-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-outline-secondary {
  --btn-focus-ring: color-mix(in srgb, var(--color-text-subtle) 35%, transparent);
  --bs-btn-color: var(--color-text);
  --bs-btn-bg: var(--color-white);
  --bs-btn-border-color: var(--color-line);
  --bs-btn-hover-color: var(--color-text);
  --bs-btn-hover-bg: var(--color-surface-soft);
  --bs-btn-hover-border-color: var(--color-text-subtle);
  --bs-btn-active-color: var(--color-text);
  --bs-btn-active-bg: var(--color-surface-badge);
  --bs-btn-active-border-color: var(--color-text-subtle);
  --bs-btn-disabled-color: var(--color-text-muted);
  --bs-btn-disabled-bg: var(--color-white);
  --bs-btn-disabled-border-color: var(--color-line);
}

.btn-link {
  --bs-btn-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-primary-light);
  --bs-btn-active-color: var(--color-primary-dark);
  --bs-btn-disabled-color: var(--color-text-muted);
  --bs-btn-padding-x: .25rem;
  text-decoration: none;
}

.btn-link:hover,
.btn-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn-danger {
  --btn-focus-ring: color-mix(in srgb, var(--color-danger) 30%, transparent);
  --bs-btn-color: var(--color-white);
  --bs-btn-bg: var(--color-danger);
  --bs-btn-border-color: var(--color-danger);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-sale-dark);
  --bs-btn-hover-border-color: var(--color-sale-dark);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-sale-dark);
  --bs-btn-active-border-color: var(--color-sale-dark);
  --bs-btn-disabled-color: var(--color-white);
  --bs-btn-disabled-bg: var(--color-danger);
  --bs-btn-disabled-border-color: var(--color-danger);
}

.btn-outline-danger {
  --btn-focus-ring: color-mix(in srgb, var(--color-danger) 30%, transparent);
  --bs-btn-color: var(--color-danger);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-danger);
  --bs-btn-hover-color: var(--color-sale-dark);
  --bs-btn-hover-bg: var(--color-danger-subtle);
  --bs-btn-hover-border-color: var(--color-sale-dark);
  --bs-btn-active-color: var(--color-sale-dark);
  --bs-btn-active-bg: var(--color-danger-soft);
  --bs-btn-active-border-color: var(--color-sale-dark);
  --bs-btn-disabled-color: var(--color-danger);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--color-danger);
}

.btn-success {
  --btn-focus-ring: color-mix(in srgb, var(--color-success) 30%, transparent);
  --bs-btn-color: var(--color-white);
  --bs-btn-bg: var(--color-success);
  --bs-btn-border-color: var(--color-success);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-success-hover);
  --bs-btn-hover-border-color: var(--color-success-hover);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-success-active);
  --bs-btn-active-border-color: var(--color-success-active);
  --bs-btn-disabled-color: var(--color-white);
  --bs-btn-disabled-bg: var(--color-success);
  --bs-btn-disabled-border-color: var(--color-success);
}

.btn-outline-success {
  --btn-focus-ring: color-mix(in srgb, var(--color-success) 30%, transparent);
  --bs-btn-color: var(--color-success);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-success);
  --bs-btn-hover-color: var(--color-success-active);
  --bs-btn-hover-bg: var(--color-success-soft);
  --bs-btn-hover-border-color: var(--color-success-active);
  --bs-btn-active-color: var(--color-success-active);
  --bs-btn-active-bg: var(--color-success-soft);
  --bs-btn-active-border-color: var(--color-success-active);
  --bs-btn-disabled-color: var(--color-success);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--color-success);
}

.btn-outline-light {
  --btn-focus-ring: color-mix(in srgb, var(--color-white) 40%, transparent);
  --bs-btn-color: var(--color-white);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: color-mix(in srgb, var(--color-white) 55%, transparent);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-white);
  --bs-btn-hover-border-color: var(--color-white);
  --bs-btn-active-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-gray-100);
  --bs-btn-active-border-color: var(--color-gray-100);
  --bs-btn-disabled-color: var(--color-white);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb, var(--color-white) 55%, transparent);
}

/* ---- Selectable option (label.btn-choice after input.btn-check) ---- */
.btn-choice {
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--color-text);
  --bs-btn-bg: var(--color-white);
  --bs-btn-border-color: var(--color-line);
  --bs-btn-hover-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-surface-soft);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-primary);
  --bs-btn-active-border-color: var(--color-primary);
  white-space: normal;
}

/* ---- Close (Bootstrap .btn-close) ---- */
.btn-close:focus-visible {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 25%, transparent);
}