/* ==========================================================================
   Buttons — основные CTA mcakes (поверх Bootstrap .btn)
   ========================================================================== */

.btn {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-pill);
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

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

/* === PRIMARY CTA — главная кнопка mcakes ============================== */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-primary-on);
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.btn-cta:hover,
.btn-cta:focus-visible {
  background: var(--color-primary-600);
  color: var(--color-primary-on);
  box-shadow: var(--shadow-cta);
  text-decoration: none;
}

.btn-cta:active {
  transform: translateY(1px);
  background: var(--color-primary-700);
}

.btn-cta--lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--fs-base);
}

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

/* === OUTLINE CTA — вторичная кнопка =================================== */
.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}

.btn-cta-outline:hover,
.btn-cta-outline:focus-visible {
  background: var(--color-primary);
  color: var(--color-primary-on);
  text-decoration: none;
}

/* === GHOST CTA — текстовая кнопка ===================================== */
.btn-cta-ghost {
  background: transparent;
  color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}

.btn-cta-ghost:hover,
.btn-cta-ghost:focus-visible {
  background: var(--color-bg-light);
  color: var(--color-text);
  text-decoration: none;
}

/* === ICON BUTTONS — круглые иконки (избранное, корзина) =============== */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  border: 0;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.btn-icon:hover,
.btn-icon:focus-visible {
  background: var(--color-bg-light);
  color: var(--color-primary);
}

.btn-icon--filled {
  background: var(--color-bg-light);
}

.btn-icon--sm { width: 36px; height: 36px; }
.btn-icon--lg { width: 52px; height: 52px; }

/* === PILL — округлый chip для фильтров/тегов ========================== */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-light);
  color: var(--color-text);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}

.btn-pill:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
  color: var(--color-primary-700);
}

.btn-pill.is-active {
  background: var(--color-primary);
  color: var(--color-primary-on);
  border-color: var(--color-primary);
}

/* === Loading state (общий) ============================================ */
.btn.is-loading,
.btn-cta.is-loading {
  pointer-events: none;
  opacity: 0.85;
  position: relative;
  color: transparent !important;
}

.btn.is-loading::after,
.btn-cta.is-loading::after {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-primary-on);
  animation: mc-spin 0.7s linear infinite;
}

/* === Ripple — эффект клика ============================================ */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: mc-ripple 0.6s var(--ease-out);
  pointer-events: none;
}

.btn-cta-outline .ripple,
.btn-pill .ripple {
  background: rgba(246, 98, 62, 0.18);
}