/* ────────────────────────────────────────────────────────────────────────────── */
/* Module paiement V5 */
/* /var/www/cm-platform/frontend/modules/payments/payment.css */
/* ────────────────────────────────────────────────────────────────────────────── */

.cm-paymentModuleWrap{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cm-paymentModuleWrap--embedded{
  gap:10px;
}

.cm-paymentHero{
  border:1px solid var(--cm-border);
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
  padding:16px 18px;
  box-shadow:var(--cm-shadow-soft);
}

.cm-paymentHeroTitle{
  font-size:20px;
  font-weight:800;
  line-height:1.1;
  color:var(--cm-text);
}

.cm-paymentHeroSub{
  margin-top:5px;
  font-size:12px;
  line-height:1.45;
  color:var(--cm-text-soft);
}

.cm-paymentStatusWrap{
  margin-bottom:0;
}

.cm-paymentLoading{
  border:1px dashed var(--cm-border-strong);
  border-radius:12px;
  background:var(--cm-surface-soft);
  padding:12px;
  color:var(--cm-text-soft);
  font-size:12px;
}

.cm-paymentError{
  border:1px solid #fecaca;
  border-radius:12px;
  background:#fff1f2;
  color:#b91c1c;
  padding:12px;
  font-weight:700;
  font-size:12px;
}

.cm-paymentTopAlert{
  border-radius:12px;
  padding:12px 14px;
  font-size:12px;
  line-height:1.5;
  font-weight:700;
}

.cm-paymentTopAlert--error{
  border:1px solid #fecaca;
  background:#fff1f2;
  color:#b91c1c;
}

.cm-paymentTopAlert--success{
  border:1px solid #bbf7d0;
  background:#f0fdf4;
  color:#166534;
}

.cm-paymentTopAlert--info{
  border:1px solid #dbeafe;
  background:#f8fbff;
  color:var(--cm-text);
}

.cm-paymentStateGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.cm-payStateCard{
  border:1px solid var(--cm-border);
  border-radius:14px;
  background:#fff;
  padding:12px;
  box-shadow:var(--cm-shadow-soft);
}

.cm-payStateCard--ok{
  border-color:#bbf7d0;
  background:#f0fdf4;
}

.cm-payStateCard--warn{
  border-color:#fed7aa;
  background:#fff7ed;
}

.cm-payStateCard--off{
  border-color:#dbeafe;
  background:#f8fbff;
}

.cm-payStateLabel{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cm-text-soft);
  margin-bottom:6px;
}

.cm-payStateValue{
  font-size:17px;
  font-weight:800;
  line-height:1.05;
  color:var(--cm-text);
  margin-bottom:5px;
}

.cm-payStateSub{
  font-size:11px;
  color:var(--cm-text-soft);
  line-height:1.4;
}

.cm-paymentSection{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cm-paymentGrid2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.cm-paymentGrid2--single{
  grid-template-columns:minmax(0,1fr);
}

.cm-paymentPanel{
  border:1px solid var(--cm-border);
  border-radius:16px;
  background:#fff;
  padding:14px;
  box-shadow:var(--cm-shadow-soft);
  min-width:0;
}

.cm-paymentPanel--locked{
  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
  border-style:dashed;
}

.cm-paymentPanelHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.cm-paymentPanelTitle{
  font-size:15px;
  font-weight:800;
  line-height:1.2;
  color:var(--cm-text);
}

.cm-paymentPanelSub{
  margin-top:3px;
  font-size:11px;
  line-height:1.4;
  color:var(--cm-text-soft);
}

.cm-paymentPanelText{
  font-size:12px;
  line-height:1.55;
  color:var(--cm-text-soft);
}

.cm-paymentPanelActions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.cm-paymentLockedBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#6d28d9;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.cm-paymentMiniGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.cm-paymentMiniStat{
  border:1px solid var(--cm-border);
  border-radius:12px;
  background:#f8fbff;
  padding:10px;
}

.cm-paymentMiniStat span{
  display:block;
  font-size:10px;
  color:var(--cm-text-soft);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.cm-paymentMiniStat strong{
  display:block;
  font-size:13px;
  color:var(--cm-text);
  font-weight:800;
}

.cm-paymentBuilderWrap{
  border:1px solid var(--cm-border);
  border-radius:14px;
  background:#fff;
  padding:14px;
}

.cm-paymentBuilderHead{
  margin-bottom:10px;
}

.cm-paymentBuilderHead .cm-payTitle{
  font-size:15px;
  line-height:1.2;
  font-weight:800;
}

.cm-paymentBuilderHead .cm-paySub{
  margin-top:3px;
  font-size:11px;
  line-height:1.35;
  color:var(--cm-text-soft);
}

.cm-paymentForm{
  margin-top:6px;
}

.cm-paymentFormGrid{
  gap:10px;
}

.cm-paymentInput{
  padding:9px 12px;
  border-radius:12px;
  font-size:12px;
}

.cm-paymentActions{
  margin-top:12px;
}

.cm-paymentSubmit{
  padding:8px 14px;
  border-radius:12px;
  font-size:12px;
}

.cm-paymentResult{
  margin-top:12px;
}

.cm-paymentResultCard{
  border:1px solid var(--cm-border);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  padding:14px;
}

.cm-paymentResultHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.cm-paymentResultMeta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
  color:var(--cm-text);
  font-size:12px;
}

.cm-paymentLiveActions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}

.cm-paymentLiveBtn{
  width:max-content;
  min-width:220px;
}

.cm-paymentLiveHint{
  font-size:11px;
  line-height:1.45;
  color:var(--cm-text-soft);
}

.cm-paymentLiveFeedback{
  border:1px solid var(--cm-border);
  border-radius:12px;
  padding:10px 12px;
  font-size:11px;
  line-height:1.45;
  margin-bottom:12px;
}

.cm-paymentLiveFeedback--info{
  background:#f8fbff;
  color:var(--cm-text);
  border-color:#dbeafe;
}

.cm-paymentLiveFeedback--success{
  background:#f0fdf4;
  color:#166534;
  border-color:#bbf7d0;
}

.cm-paymentLiveFeedback--error{
  background:#fff1f2;
  color:#b91c1c;
  border-color:#fecaca;
}

.cm-paymentCodeBlock{
  margin-top:10px;
}

.cm-codeTitle{
  font-size:11px;
  font-weight:800;
  color:var(--cm-text);
  margin-bottom:6px;
}

.cm-paymentCodeBlock pre{
  margin:0;
  padding:12px;
  border-radius:12px;
  background:#0f172a;
  color:#e2e8f0;
  overflow:auto;
  font-size:10px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}

.cm-paymentHint{
  margin-top:10px;
  font-size:11px;
  color:var(--cm-text-soft);
  line-height:1.5;
}

.cm-statusBadge--success{
  background:#ecfdf3;
  color:#15803d;
  border:1px solid #bbf7d0;
}

.cm-paymentOverviewWrap{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.cm-paymentSummaryGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.cm-paymentSummaryCard{
  border:1px solid var(--cm-border);
  border-radius:16px;
  background:#fff;
  padding:14px;
  box-shadow:var(--cm-shadow-soft);
}

.cm-paymentSummaryCard span{
  display:block;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cm-text-soft);
  margin-bottom:6px;
}

.cm-paymentSummaryCard strong{
  display:block;
  font-size:20px;
  line-height:1.1;
  color:var(--cm-text);
  font-weight:800;
  margin-bottom:6px;
}

.cm-paymentSummaryCard small{
  display:block;
  font-size:11px;
  line-height:1.45;
  color:var(--cm-text-soft);
}

.cm-paymentHistoryPanel{
  border:1px solid var(--cm-border);
  border-radius:16px;
  background:#fff;
  padding:16px;
  box-shadow:var(--cm-shadow-soft);
}

.cm-paymentHistoryHead{
  margin-bottom:12px;
}

.cm-paymentEmpty{
  border:1px dashed var(--cm-border-strong);
  border-radius:14px;
  background:var(--cm-surface-soft);
  padding:16px;
  color:var(--cm-text-soft);
  font-size:12px;
}

.cm-paymentTableWrap{
  overflow:auto;
}

.cm-paymentTable{
  width:100%;
  border-collapse:collapse;
  min-width:860px;
}

.cm-paymentTable th,
.cm-paymentTable td{
  padding:12px 10px;
  border-bottom:1px solid var(--cm-border);
  text-align:left;
  vertical-align:top;
  font-size:12px;
  color:var(--cm-text);
}

.cm-paymentTable th{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--cm-text-soft);
  font-weight:800;
}

.cm-paymentCellMain{
  font-weight:700;
  color:var(--cm-text);
}

.cm-paymentCellSub{
  margin-top:2px;
  font-size:11px;
  color:var(--cm-text-soft);
}

.cm-paymentStatusChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:1px solid var(--cm-border);
  background:#f8fbff;
  color:var(--cm-text);
}

.cm-paymentStatusChip--réussi{
  background:#ecfdf3;
  color:#15803d;
  border-color:#bbf7d0;
}

.cm-paymentStatusChip--en-attente{
  background:#fff7ed;
  color:#c2410c;
  border-color:#fed7aa;
}

.cm-paymentStatusChip--échoué{
  background:#fff1f2;
  color:#b91c1c;
  border-color:#fecaca;
}

.cm-paymentStatusChip--remboursé{
  background:#eff6ff;
  color:#1d4ed8;
  border-color:#bfdbfe;
}

.cm-paymentStatusChip--inconnu{
  background:#f8fafc;
  color:#475569;
  border-color:#cbd5e1;
}

/* ────────────────────────────────────────────────────────────────────────────── */