/* =========================================
   CREOSTARS - BUTTON SYSTEM
   Source unique pour tous les boutons
   ========================================= */

button.creo-btn,
a.creo-btn,
.creo-btn {
  border-radius: var(--creo-radius-pill) !important;
  padding: 10px 22px !important;
  border: 1px solid var(--couleur-bordure-theme) !important;

  background: var(--couleur-surface-theme) !important;
  color: var(--couleur-texte-theme) !important;

  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  text-decoration: none !important;
  box-shadow: none !important;

  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease, opacity 0.2s ease !important;
}

button.creo-btn:hover,
a.creo-btn:hover,
.creo-btn:hover {
  background: var(--couleur-hover-theme) !important;
  color: var(--couleur-texte-theme) !important;
  border-color: var(--couleur-accent-theme) !important;
  transform: translateY(-1px);
}

/* PRIMARY */
button.creo-btn-primary,
a.creo-btn-primary,
.creo-btn-primary {
  background: var(--couleur-accent-theme) !important;
  border-color: var(--couleur-accent-theme) !important;
  color: var(--couleur-fond-theme-inverse) !important;
}

button.creo-btn-primary:hover,
a.creo-btn-primary:hover,
.creo-btn-primary:hover {
  background: var(--couleur-c-creostars-theme) !important;
  border-color: var(--couleur-c-creostars-theme) !important;
  color: var(--couleur-fond-theme) !important;
}

/* SECONDARY */
button.creo-btn-secondary,
a.creo-btn-secondary,
.creo-btn-secondary {
  background: var(--couleur-surface-theme) !important;
  border-color: var(--couleur-bordure-theme) !important;
  color: var(--couleur-texte-theme) !important;
}

button.creo-btn-secondary:hover,
a.creo-btn-secondary:hover,
.creo-btn-secondary:hover {
  background: var(--couleur-hover-theme) !important;
  border-color: var(--couleur-accent-theme) !important;
  color: var(--couleur-texte-theme) !important;
}

/* OUTLINE */
button.creo-btn-outline,
a.creo-btn-outline,
.creo-btn-outline {
  background: transparent !important;
  border-color: var(--couleur-accent-theme) !important;
  color: var(--couleur-accent-theme) !important;
}

button.creo-btn-outline:hover,
a.creo-btn-outline:hover,
.creo-btn-outline:hover {
  background: var(--couleur-accent-theme) !important;
  color: var(--couleur-fond-theme-inverse) !important;
}

/* SUCCESS */
button.creo-btn-success,
a.creo-btn-success,
.creo-btn-success {
  background: var(--couleur-accent-theme) !important;
  border-color: var(--couleur-accent-theme) !important;
  color: var(--couleur-fond-theme-inverse) !important;
}

/* DANGER */
button.creo-btn-danger,
a.creo-btn-danger,
.creo-btn-danger {
  background: var(--couleur-c-creostars-theme) !important;
  border-color: var(--couleur-c-creostars-theme) !important;
  color: var(--couleur-fond-theme) !important;
}

/* ICON */
button.creo-btn-icon,
a.creo-btn-icon,
.creo-btn-icon {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

/* SIZES */
.creo-btn-sm {
  padding: 7px 14px !important;
  font-size: 0.82rem !important;
}

.creo-btn-lg {
  padding: 13px 28px !important;
  font-size: 1rem !important;
}

.creo-btn-block {
  width: 100% !important;
}

.creo-wallet-card {
  position: relative;
}