/**
 * CSS Niveau 2 — Widget Universel Credit Button (credit-button.css)
 * Bouton universel compact déclenchant les actions payantes avec affichage discret
 * du coût en crédits "· X crédits" ou du statut "· Prêt", sans grosse pastille.
 */

.credit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  min-height: 36px;
  height: 38px;
  font-family: var(--font-family-sans);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  border-radius: 9px;
  border: 1px solid rgba(217, 38, 248, 0.45);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.22) 0%, rgba(217, 38, 248, 0.28) 100%);
  color: #fdf4ff;
  box-shadow: 0 2px 12px rgba(217, 38, 248, 0.2);
  width: 100%;
  box-sizing: border-box;
}

.credit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.35) 0%, rgba(217, 38, 248, 0.42) 100%);
  border-color: rgba(217, 38, 248, 0.8);
  box-shadow: 0 0 16px rgba(217, 38, 248, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
}

.credit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.credit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Mention discrète du coût en crédits (fini la grosse pastille avec bordure/fond) --- */
.credit-btn__badge,
.credit-btn__cost {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: #fde047;
  opacity: 0.95;
  margin-left: 0.15rem;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  letter-spacing: 0.01em;
}

/* Statut prêt / déjà calculé (vert émeraude discret) */
.credit-btn__badge--ready,
.credit-btn__cost--ready {
  color: #34d399 !important;
}

.credit-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.credit-btn__icon svg {
  display: block;
}

.credit-btn__label {
  white-space: nowrap;
}

/* --- Variantes de Bouton --- */
.credit-btn--secondary {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border-color: var(--color-border);
  box-shadow: none;
}

.credit-btn--secondary:hover:not(:disabled) {
  background: var(--color-bg-card-hover);
  border-color: var(--color-border-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --- État Solde Insuffisant --- */
.credit-btn--insufficient {
  opacity: 0.6;
  border-color: rgba(239, 68, 68, 0.4);
}

.credit-btn--insufficient .credit-btn__badge,
.credit-btn--insufficient .credit-btn__cost {
  color: #f87171 !important;
}

/* --- État de Chargement / Exécution --- */
.credit-btn--loading {
  cursor: wait;
}

.credit-btn__spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: credit-btn-spin 0.75s linear infinite;
  margin-right: var(--space-1);
}

@keyframes credit-btn-spin {
  to {
    transform: rotate(360deg);
  }
}