/*
| c9m.css - Habillage du moteur Commerce, branché sur le contrat de tokens.
|
| AUCUNE couleur/rayon/typo en dur : tout passe par les variables CSS du contrat
| de design (fournies par m14r ou par le FRAMEWORK ACTIF). Chaque var a un repli,
| donc c9m s'affiche correctement même seul ; mais dès qu'un framework peuple
| --color-primary / --color-surface / --radius-* …, c9m adopte son identité sans
| changer une ligne de code. C'est le « lien invisible » côté style.
*/

.c9m {
  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: var(--color-text, #0f172a);
  line-height: var(--leading, 1.55);
}

/* ── Fiche produit ── */
.c9m-card {
  display: flex; flex-direction: column; gap: var(--space-3, 12px);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-line, #e2e8f0);
  border-radius: var(--radius-lg, 16px);
  padding: var(--space-4, 16px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.06));
}
.c9m-card-media { border-radius: var(--radius-md, 10px); overflow: hidden; }
.c9m-card-media img { display: block; width: 100%; height: auto; }
.c9m-card-name { margin: 0; font-size: var(--text-lg, 18px); font-weight: 650; }
.c9m-card-desc { margin: 0; color: var(--color-muted, #64748b); font-size: var(--text-sm, 13px); }
.c9m-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); margin-top: auto; }

.c9m-price { font-size: var(--text-lg, 18px); font-weight: 700; color: var(--color-text, #0f172a); }

/* ── Bouton (Ajouter / Payer) ── */
.c9m-btn {
  appearance: none; cursor: pointer;
  font: inherit; font-weight: 600;
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border: 0; border-radius: var(--radius-md, 10px);
  background: var(--color-primary, #7c3aed); color: var(--color-on-primary, #fff);
  transition: filter var(--duration-fast, .12s) var(--ease, ease), box-shadow var(--duration-fast, .12s) var(--ease, ease);
}
.c9m-btn:hover { filter: brightness(1.06); box-shadow: 0 0 0 4px var(--color-primary-ring, rgba(124,58,237,.35)); }
.c9m-btn:disabled { opacity: .5; cursor: not-allowed; }
.c9m-btn--ghost { background: transparent; color: var(--color-primary, #7c3aed); border: 1px solid var(--color-line, #e2e8f0); }

/* ── Pastille de statut de commande ── */
.c9m-badge { display: inline-block; padding: 2px var(--space-2, 8px); border-radius: var(--radius-pill, 999px); font-size: var(--text-sm, 13px); font-weight: 600; }
.c9m-badge--paid     { background: color-mix(in srgb, var(--color-success, #10b981) 16%, transparent); color: var(--color-success, #10b981); }
.c9m-badge--pending  { background: color-mix(in srgb, var(--color-warning, #f59e0b) 16%, transparent); color: var(--color-warning, #f59e0b); }
.c9m-badge--refunded,
.c9m-badge--failed   { background: color-mix(in srgb, var(--color-danger, #ef4444) 16%, transparent); color: var(--color-danger, #ef4444); }

/* ── Facture ── */
.c9m-invoice { background: var(--color-surface, #fff); border: 1px solid var(--color-line, #e2e8f0); border-radius: var(--radius-lg, 16px); padding: var(--space-6, 32px); }
.c9m-invoice-title { margin: 0 0 var(--space-2, 8px); font-size: var(--text-xl, 24px); }
.c9m-invoice-meta { margin: 0 0 var(--space-5, 24px); color: var(--color-muted, #64748b); font-size: var(--text-sm, 13px); }
.c9m-table { width: 100%; border-collapse: collapse; font-size: var(--text-md, 15px); }
.c9m-table th, .c9m-table td { padding: var(--space-2, 8px) var(--space-3, 12px); border-bottom: 1px solid var(--color-line, #e2e8f0); text-align: left; }
.c9m-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.c9m-table .center { text-align: center; }
.c9m-table tfoot td { border-bottom: 0; font-weight: 700; }