/* =====================================================================
   payment.css
   Module de paiement (modal + version inline "_PaymentPartial").
   -----------------------------------------------------------------------
   - Tout est scopé sous .fed-payment pour ne jamais entrer en conflit
     avec le Bootstrap 4 deja present dans le projet .NET 8.
   - Aucune regle ne redefinit .form-control / .card / .btn / .modal-*
     globalement (ces classes Bootstrap restent gerees par bootstrap.css).
     Les inputs/boutons du module utilisent leurs propres classes
     (.fed-payment .pay-input, .fed-payment .pay-btn, ...).
   - Les couleurs utilisent var(--fed-xxx, fallback) : si ton theme
     definit deja ces variables globalement, elles seront reprises,
     sinon les valeurs de secours (Evengent) s'appliquent.
   - Depend de Bootstrap Icons (classes "bi bi-*") pour les icones.
   ===================================================================== */
.btn-black-modern {
    background: #111827;color: #fff;
    border: 1px solid #111827;border-radius: 10px;
    transition: background-color .2s ease,border-color .2s ease,transform .15s ease;
}
.btn-black-modern:hover {background: #800009;color: #fff;border-color: #1F2937;}

.fed-payment {
  --pay-primary: var(--fed-primary, #0B6E4F);
  --pay-primary-dark: var(--fed-primary-dark, #075038);
  --pay-primary-soft: var(--fed-primary-soft, #E6F2ED);
  --pay-border: var(--fed-border, #E9ECEF);
  --pay-border-strong: var(--fed-border-strong, #DEE2E6);
  --pay-text: var(--fed-text, #212529);
  --pay-muted: var(--fed-muted, #6C757D);
  --pay-radius-card: var(--fed-radius-card, 20px);
  --pay-radius-btn: var(--fed-radius-btn, 50px);
  --pay-radius-input: var(--fed-radius-input, 15px);
  --pay-shadow-sm: var(--fed-shadow-sm, 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06));

  color: var(--pay-text);
  max-width: 680px;
  margin: 0 auto;
}

.fed-payment * { box-sizing: border-box; }

/* =====================================================================
   1) Choix de methode — liste verticale (utilisee dans le modal)
   ===================================================================== */
.fed-payment .pay-option {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1.15rem;
  border: 1.5px solid var(--pay-border);
  border-radius: var(--pay-radius-input);
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
}
.fed-payment .pay-option:hover,
.fed-payment .pay-option.selected {
  border-color: var(--pay-primary);
  background: var(--pay-primary-soft);
}
.fed-payment .pay-option .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--fed-bg, #F8F9FA); color: var(--pay-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem;
  flex: none;
}
.fed-payment .pay-option .name { font-weight: 700; font-size: 0.95rem; margin: 0; }
.fed-payment .pay-option .desc { color: var(--pay-muted); font-size: 0.82rem; margin: 0; }

/* =====================================================================
   2) Choix de methode — ligne horizontale (utilisee dans _PaymentPartial)
      display:flex + flex:1 1 0% => la largeur se partage EGALEMENT entre
      tous les .pay-method-btn presents (3 = 33% chacun, 2 = 50%, 4 = 25%...),
      automatiquement, sans configuration. flex-wrap:nowrap garantit qu'elles
      restent TOUJOURS sur une seule ligne. En dessous de min-width, la ligne
      overflow horizontalement (scroll + fleches, voir .pay-scroll-arrow)
      au lieu de continuer a retrecir indefiniment.
   ===================================================================== */
.fed-payment .pay-methods-carousel {
  position: relative;
  margin-bottom: 1.1rem;
}

.fed-payment .pay-methods-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;      /* jamais de retour a la ligne, meme sur mobile */
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
  overflow-x: auto;                  /* si les min-width ci-dessous ne rentrent plus -> scroll, pas de wrap */
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;             /* Firefox : scrollbar cachee, on pilote au clic via les fleches */
  -ms-overflow-style: none;
}
.fed-payment .pay-methods-row::-webkit-scrollbar { display: none; }

.fed-payment .pay-method-btn {
  display: flex !important;
  flex-direction: column !important; /* icone en haut, texte en dessous, a l'INTERIEUR d'un bouton */
  flex: 1 1 0% !important;           /* se partagent la largeur EGALEMENT tant que ca rentre (33%/25%/50%...) */
  min-width: 104px;                  /* en dessous de cette taille confortable -> la ligne overflow au lieu de continuer a retrecir */
  scroll-snap-align: start;align-items: center;
  justify-content: center;gap: 0.5rem;padding: 1rem 0.5rem;
  border: 1.5px solid var(--pay-border);
  border-radius: var(--pay-radius-input);
  background: #fff;
  cursor: pointer;transition: all 0.15s ease;text-align: center;
  outline: none;box-shadow: 0 0 0 0.06rem rgba(11, 110, 79, 0.15);
}
.fed-payment .color-white{ color:white!important;}
/* Fleches de defilement gauche/droite — rond, fond noir 60% opacite,
   centrees verticalement sur la ligne des methodes (style carousel reseaux sociaux).
   Affichees/masquees dynamiquement par payment.js selon l'overflow reel. */
.fed-payment .pay-scroll-arrow {
  position: absolute;top: 50%;transform: translateY(-50%);
  width: 32px; height: 32px;border-radius: 50%;
  border: none;background: rgba(0, 0, 0, 0.6);color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;z-index: 5;
  font-size: 0.9rem;transition: background 0.15s ease;
}
.fed-payment .pay-scroll-arrow:hover { background: rgba(0, 0, 0, 0.75); }
.fed-payment .pay-scroll-arrow[hidden] { display: none !important; }
.fed-payment .pay-scroll-arrow-left { left: -4px; }
.fed-payment .pay-scroll-arrow-right { right: -4px; }
@media (max-width: 767px) {
  .fed-payment .pay-method-btn { min-width: 88px; }
}
@media (max-width: 575px) {
  .fed-payment .pay-method-btn { min-width: 74px; }
  .fed-payment .pay-scroll-arrow { width: 26px; height: 26px; font-size: 0.75rem; }
}
.fed-payment .pay-method-btn:hover,
.fed-payment .pay-method-btn.selected {
  border-color: var(--pay-primary);
  background: var(--pay-primary-soft);
}
.fed-payment .pay-method-btn .pay-method-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--fed-bg, #F8F9FA); color: var(--pay-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  transition: width .15s ease, height .15s ease, font-size .15s ease;
}
.fed-payment .pay-method-btn .pay-method-label {
  font-weight: 700;
  font-size: 0.85rem;line-height: 1.15;color: var(--pay-text);
  overflow-wrap: anywhere;transition: font-size .15s ease;
}

/* La 3e methode (ou plus) reste sur la meme ligne : on reduit juste
   icone + texte aux paliers demandes, jamais le nombre de colonnes. */
@media (max-width: 991px) {
  .fed-payment .pay-method-btn .pay-method-icon { width: 40px; height: 40px; font-size: 1.1rem; }
  .fed-payment .pay-method-btn .pay-method-label { font-size: 0.8rem; }
}
@media (max-width: 767px) {
  .fed-payment .pay-methods-row { gap: 0.4rem; }
  .fed-payment .pay-method-btn { padding: 0.75rem 0.35rem; }
  .fed-payment .pay-method-btn .pay-method-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
  .fed-payment .pay-method-btn .pay-method-label { font-size: 0.72rem; }
}
@media (max-width: 575px) {
  .fed-payment .pay-method-btn { padding: 0.6rem 0.25rem; gap: 0.35rem; }
  .fed-payment .pay-method-btn .pay-method-icon { width: 28px; height: 28px; font-size: 0.85rem; border-radius: 8px; }
  .fed-payment .pay-method-btn .pay-method-label { font-size: 0.64rem; }
}

/* =====================================================================
   3) Panneaux de formulaire (stripe / paypal / momo)
   ===================================================================== */
.fed-payment .pay-method-panel { margin-top: 1rem; }
.fed-payment .pay-method-panel[hidden] { display: none !important; }

.fed-payment .pay-field { margin-bottom: 0.9rem; }
.fed-payment .pay-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--pay-text);
}

.fed-payment .pay-input,
.fed-payment .pay-input-group,
.fed-payment .pay-stripe-element {
  border-radius: var(--pay-radius-input);
  border: 1px solid var(--pay-border);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fed-payment .pay-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.92rem;
  color: var(--pay-text);
}
.fed-payment .pay-input:focus,
.fed-payment .pay-input-group:focus-within,
.fed-payment .pay-stripe-element.StripeElement--focus {
  border-color: var(--pay-primary);
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(11, 110, 79, 0.15);
}
.fed-payment .pay-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* input-group "maison" (ex: prefixe indicatif telephonique) */
.fed-payment .pay-input-group {
  display: flex;align-items: stretch;overflow: hidden;
}
.fed-payment .pay-input-group .pay-input-addon {
  display: flex; align-items: center; justify-content: center;
  padding: 0 0.85rem;
  background: var(--fed-bg, #F8F9FA);
  border-right: 1px solid var(--pay-border);
  font-weight: 600;font-size: 0.9rem;color: var(--pay-text);flex: none;
}
.fed-payment .pay-input-group .pay-input {border: 0;border-radius: 0;flex: 1 1 auto;}
.fed-payment .pay-stripe-element { padding: 0.75rem 1rem;min-height: 46px;}
.fed-payment .pay-paypal-note {color: var(--pay-muted);font-size: 0.85rem;}

/* =====================================================================
   4) Mobile Money — blocs progressifs (tout reste visible en s'empilant)
   ===================================================================== */
.fed-payment .momo-block { margin-bottom: 1.1rem; }
.fed-payment .momo-block[hidden] { display: none !important; }
.fed-payment .momo-block-title {font-size: 0.93rem;font-weight: 700;margin-bottom: 0.6rem;}

/* Selecteur pays (dropdown "maison" avec drapeau + nom + indicatif) */
.fed-payment .pay-select {position: relative;}
.fed-payment .pay-select-trigger {
    width: 100%;display: flex;align-items: center;gap: 0.7rem;
    padding: 0.57rem 0.85rem;
    border: 1px solid #4F5368; /*1px solid var(--pay-border);*/
    border-radius: var(--pay-radius-input);
    background: #fff;cursor: pointer;text-align: left;
}
.fed-payment .pay-select-trigger:hover,
.fed-payment .pay-select.open .pay-select-trigger {
  border-color: var(--pay-primary);
}
.fed-payment .pay-select-caret {
  margin-left: auto;color: var(--pay-muted);
  transition: transform .15s ease;flex: none;
}
.fed-payment .pay-select.open .pay-select-caret { transform: rotate(180deg); }

/* --- Ici la contrainte demandee : hauteur du drapeau = hauteur des 2 lignes de texte --- */
.fed-payment .pay-select-trigger,
.fed-payment .pay-select-option {
  --pay-line-h: 1.05rem;
}
.fed-payment .pay-select-flag {
  width: calc(var(--pay-line-h) * 2);
  height: calc(var(--pay-line-h) * 2);
  display: inline-block;
  object-fit: contain;
  border-radius: 2px;
  flex: none;
  /* Image réelle (voir /flags/*.svg) — les emoji drapeau ne s'affichent pas comme
     une image sur Windows (Segoe UI Emoji rend juste les 2 lettres du code pays). */
  background: transparent;
}
.fed-payment .pay-select-text { display: flex; flex-direction: column; min-width: 0; }
.fed-payment .pay-select-name {
  font-size: 0.88rem; font-weight: 600; line-height: var(--pay-line-h);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fed-payment .pay-select-dial {
  font-size: 0.76rem; color: var(--pay-muted); line-height: var(--pay-line-h);
}
.fed-payment .pay-select-placeholder { color: var(--pay-muted); font-weight: 500; }

.fed-payment .pay-select-panel {
  list-style: none;margin: 0.35rem 0 0;padding: 0.35rem;position: absolute;
  z-index: 20;top: 100%; left: 0; right: 0;
  max-height: 280px;overflow-y: auto;background: #fff;
  border: 1px solid var(--pay-border);
  border-radius: var(--pay-radius-input);
  box-shadow: var(--pay-shadow-sm);
}
.fed-payment .pay-select-panel[hidden] { display: none !important; }
.fed-payment .pay-select-option {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.6rem;border-radius: 10px;cursor: pointer;
}
.fed-payment .pay-select-option:hover,
.fed-payment .pay-select-option.selected {
  background: var(--pay-primary-soft);
}

/* Separateur "Or" entre les deux options de paiement wallet (compte interne / carte enregistree) */
.fed-payment .divider-or {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--pay-muted); font-size: 0.85rem;margin: 0.9rem 0;
}
.fed-payment .divider-or::before,
.fed-payment .divider-or::after {
  content: ''; flex: 1; height: 1px; background: var(--pay-border);
}

/* Grille d'operateurs / pays (meme design que dans le modal) */
.fed-payment .operator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
@media (min-width: 480px) {
  .fed-payment .operator-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fed-payment .operator-tile {
  border: 1.5px solid var(--pay-border);
  border-radius: var(--pay-radius-input);
  padding: 0.85rem;
  display: flex; align-items: center; gap: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
}
.fed-payment .operator-tile:hover { border-color: var(--pay-primary); }
.fed-payment .operator-tile.selected {
  border-color: var(--pay-primary);
  background: var(--pay-primary-soft);
}
.fed-payment .operator-tile .logo {
  width: 46px; height: 46px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 0.75rem; text-align: center;
  flex: none;
}
.fed-payment .operator-tile .op-name { margin: 0; font-weight: 600; font-size: 0.85rem; }
.fed-payment .operator-tile .op-sub { margin: 0; font-size: 0.78rem; color: var(--pay-muted); }

/* =====================================================================
   5) Etapes (stepper) — reutilise dans le modal pour Mobile Money
   ===================================================================== */
.fed-payment .step-dots { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.fed-payment .step-dots .dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--fed-bg, #F8F9FA); color: var(--pay-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; border: 1px solid var(--pay-border);
  flex: none;
}
.fed-payment .step-dots .dot.active,
.fed-payment .step-dots .dot.done {
  background: var(--pay-primary); color: #fff; border-color: var(--pay-primary);
}
.fed-payment .step-dots .step-bar { flex: 1; height: 3px; background: var(--pay-border); border-radius: 999px; }
.fed-payment .step-dots .step-bar.done { background: var(--pay-primary); }

/* =====================================================================
   6) Boutons / recap / confirmation (classes maison, pas .btn Bootstrap)
   ===================================================================== */
.fed-payment .pay-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: none;
  border-radius: var(--pay-radius-btn);
  padding: 0.75rem 1.4rem;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.fed-payment .pay-btn-primary { background: var(--pay-primary); color: #fff; }
.fed-payment .pay-btn-primary:hover { background: var(--pay-primary-dark); }
.fed-payment .pay-btn-primary:disabled { opacity: .65; cursor: not-allowed; }
.fed-payment .pay-btn-ghost { background: transparent; color: var(--pay-text); border: 1px solid var(--pay-border); }
.fed-payment .pay-btn-ghost:hover { background: #fff; border-color: var(--pay-border-strong); box-shadow: var(--pay-shadow-sm); }
.fed-payment .pay-btn-block { width: 100%; }

.fed-payment .pay-spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: pay-spin .6s linear infinite;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }

.fed-payment .pay-summary-card {
  background: var(--pay-primary-soft);
  border-radius: var(--pay-radius-input);
  padding: 0.9rem 1rem;
}
.fed-payment .pay-summary-card p { margin: 0 0 0.25rem; font-size: 0.85rem; }
.fed-payment .pay-summary-card p:last-child { margin-bottom: 0; }

.fed-payment .pay-muted { color: var(--pay-muted); }
.fed-payment .pay-small { font-size: 0.82rem; }

/* =====================================================================
   7) Chrome du modal — scope par .fed-payment-modal uniquement,
      donc n'affecte jamais les autres .modal Bootstrap 4 de l'app.
   ===================================================================== */
.fed-payment-modal .modal-content {
  border: 0;border-radius: var(--fed-radius-card, 20px);
}
.fed-payment-modal .modal-header,
.fed-payment-modal .modal-footer {border: 0;}