:root{
  --fruitkha-accent:#F28123;
  --fruitkha-text:#051922;
  --fruitkha-muted:#777;
}
.checkout { padding-top: 80px; padding-bottom: 80px; }
.ck-steps { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap;}
.ck-step {
  flex:1 1 160px; background:#fff; border:1px solid #eee; border-radius:14px; padding:12px 14px;
  display:flex; align-items:center; gap:10px; position:relative;
}
.ck-step .num{ background:rgba(242,129,35,.12); color:var(--fruitkha-accent); width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:600; }
.ck-step .label{ font-weight:600; color:var(--fruitkha-text);}
.ck-step.done{ border-color: rgba(242,129,35,.35); }
.ck-step.active{ box-shadow:0 6px 18px rgba(5,25,34,.08); border-color:var(--fruitkha-accent); }
.ck-card{
  background:#fff; border-radius:16px; box-shadow:0 10px 24px rgba(5,25,34,.08); padding:20px; margin-bottom:18px;
}
.ck-actions{ display:flex; justify-content:space-between; gap:12px; margin-top:16px; }
.ck-actions .boxed-btn{ min-width:180px; text-align:center; }
.ck-summary .table{ margin-bottom:0; }
.ck-mini{ color:var(--fruitkha-muted); font-size:.92rem; }
.ck-note{ display:none; }
.ck-note.show{ display:block; }
.ck-review .addr{ border:1px solid #eee; border-radius:14px; padding:12px; background:#fff; }
.badge-method{ background:rgba(242,129,35,.12); color:var(--fruitkha-accent); border-radius:999px; padding:4px 8px; font-size:.85rem; }
#card-element{ border:1px solid #ced4da; border-radius:.25rem; padding:.5rem .75rem; }

/* Stepper cliquable uniquement si l'étape est déjà remplie (done) */
.ck-step[aria-disabled="false"] { cursor:pointer; }
.ck-step[aria-disabled="true"]  { cursor:default; }
.ck-step:focus { outline: 2px solid rgba(242,129,35,.5); outline-offset: 2px; }

/* Logos moyens de paiement */
.pay-logos img{
  height: 22px;
  margin-left: 6px;
  vertical-align: middle;
  opacity: .95;
}
.custom-control-label .pay-logos{ margin-left: 8px; }

/* Hôtes Stripe Elements (bords identiques aux inputs) */
.stripe-host{
  border:1px solid #ced4da;
  border-radius:.25rem;
  padding:.5rem .75rem;
  background:#fff;
}


/* FIX: affichage opérateur mobile money sous le champ */
.mm-op-display{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.mm-op-name{ font-weight:600; }
.mm-logo{ height:24px; }

/* uniformiser l'apparence des champs */
#pay-card .form-control::placeholder { opacity:.7; }

.stripe-element { padding:.5rem .75rem; }


  #paymentWarningModal .modal-content {
    border-radius: 0.75rem;
  }
  #paymentWarningModal .modal-header.bg-warning {
    background: #ff9800 !important;
  }