/* --- MOBILE-OPERATORS.CSS initialisé (Kamto2025) --- */

.phone-payment-hidden {
  display: none !important;
}

.phone-payment-visible {
  display: block !important;
}

.momo-payment {
  text-align: center;
  margin-bottom: 20px;
}

#phone-payment-container {
/* 
  display: none;
  justify-content: center;
  flex-direction: column;
  align-items: center;
 */
  max-width: 550px;
  margin: 0px auto;
  padding: 20px;
  background-color: #fafafa;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  font-family: 'Roboto', sans-serif;
}


/* Affichage explicite formulaire Mobile Money */
#phone-payment-container:not(.phone-payment-hidden) {
  display: flex !important;
}

#momo-btn {
  font-size: 18px;
  cursor: pointer;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

#momo-btn img {
  height: 80px;
  vertical-align: middle;
}

#momo-btn:hover {
  opacity: 1;
}




/*
//////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
*/

.phonePayment-amount-selection {
  display: flex;
  flex-wrap: wrap; /* Ajout pour permettre aux éléments de revenir à la ligne si besoin */
  gap: 10px;
  margin-bottom: 15px;
}

.phonePayment-amount-btn {
/*  flex: 1; */
  flex: 1 1 calc(30% - 10px); /* Chaque élément occupe environ 50% de largeur en mobile */
  padding: 8px;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 8px;
	
  box-sizing: border-box;
  min-width: 100px; /* Empêche les éléments de trop rétrécir */
}

.phonePayment-amount-btn.selected {
  background: #007bff;
  color: #fff;
}

/*
.phonePayment-amount-btn:hover {
  background: #007bff;
  color: #fff;
}
*/

#phonePaymentCustomAmount {
  display: flex;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
  width: 50%;
  
  /* Ajouts ci-dessous : */
  margin: 0 auto; /* Centre horizontalement l’élément lui-même dans son conteneur */
  justify-content: center; /* Centre horizontalement le texte à l'intérieur de l'élément */
  align-items: center;     /* Centre verticalement le texte à l'intérieur de l'élément (facultatif) */
  text-align: center;      /* Centre explicitement le texte au cas où */
}


#phonePaymentCustomAmount.valid {
  background: #007bff;
  color: #fff;
}

#phonePaymentCustomAmount.invalid {
  background-color: #ffffff; /* couleur par défaut si invalide */
  color: #000;
}

.currency-information,
.phone-number-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

.currency-information div img {
  max-height: 25px;        /* limite absolue maximale */
  width: auto;           /* hauteur auto pour préserver le ratio original */
  object-fit: contain;    /* conserve les proportions sans distorsion */
  vertical-align: middle; /* alignement vertical précis avec l'input associé */
  border-radius: 8px;     /* cohérent avec boutons existants */
  border: 1px solid #ddd; /* même bordure que boutons opérateurs */
  background-color: #f0f0f0; /* fond lègèrement grisé */
  padding: 4px;           /* marge intérieure légère */
  /*box-shadow: 0 2px 4px rgba(0,0,0,0.1); */ /* effet d'ombre douce */
}

/* Normaisation des valeurs */
.phonePayment-amount-btn,
#phonePaymentCustomAmount,
#phonePaymentCountryCurrency,
#phonePaymentSubmitButton {
  font-family: 'Roboto', sans-serif; /* explicite la famille de police */
  font-size: 14px;                   /* taille identique et explicite */
  line-height: 1.2;                  /* hauteur de ligne explicite et harmonisée */
  box-sizing: border-box;            /* dimensionnement explicite incluant padding et border */
}


.phone-number-group {
  width: 100%;
  position: relative;
}

#countryCodeSelect,
#localPhoneNumber {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
  flex-grow: 1;
}


#xxphonePaymentCountryCurrency {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background-color: #f0f0f0; /* Fond légèrement grisé pour montrer qu'il est non modifiable */
  color: #555;               /* Texte plus sombre pour une bonne lisibilité */
  cursor: not-allowed;       /* Curseur indique clairement que l'input est en lecture seule */
}



#phonePaymentCountryCurrency {
  flex: 1;                      /* Permet à l'input d’occuper l'espace restant */
  min-width: 0;                 /* Permet à l'input de rétrécir complètement si nécessaire */
  width: 100%;                  /* occupe jusqu'à 100% de l'espace disponible restant */
  max-width: 100%;              /* empêche l'input de déborder de son conteneur */
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background-color: #f0f0f0;   /* Fond légèrement grisé pour montrer qu'il est non modifiable */
  color: #555;                 /* Texte plus sombre pour une bonne lisibilité */
  cursor: not-allowed;         /* Curseur indique clairement que l'input est en lecture seule */
  box-sizing: border-box;      /* Empêche le débordement dû au padding/border */
}


#countryCodeSelect {
width: 100px;
}

.clear-icon {
  cursor: pointer;
  font-size: 20px;
  color: #bbb;
}

#phonePaymentSubmitButton {
  width: 100%;
  height: 62px;
  padding: 0;
  background-color: #737473;
  border: 2px solid #737473;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.7;

  /* Flexbox pour un centrage parfait */
  display: flex;
  justify-content: center;   /* Centrage horizontal */
  align-items: center;       /* Centrage vertical */
}

#phonePaymentSubmitButton:enabled {
  background-color: #28a745;
  border: 2px solid #218B39;  /* #2B853F*/
  opacity: 1;
}

#phonePaymentSubmitButton.success {
  background-color: #FFFFFF; /* fond blanc */
  color: #411122;             /* texte sombre pour meilleure lisibilité */
  border: 2px solid #CCCCCC;  /* #2B853F*/
  opacity: 1;
}

#phonePaymentSubmitButton.error { 
  background-color: #F08A9C; 
  color: #970918;           
  border: 2px solid #BF0003;
  opacity: 1;
}

#phonePaymentSubmitButton.submitting-donation {
  background-color: #1B6B2D;
  border: 2px solid #218B39;  /* #2B853F*/
	
  pointer-events: none;  /* empêche le clic */
  opacity: 1;            /* conserve opacité d'origine (aucune différence visuelle) */
  cursor: default;       /* curseur standard sans indication de désactivation */
}

#phonePaymentSubmitButton img.btn-icon {
  max-height: 60px;                /* hauteur fixée à 60px */
  width: auto;               /* Largeur auto pour ratio intact */
  object-fit: contain;        /* évite la distorsion */
  vertical-align: middle;     /* alignement parfait avec le texte */
  pointer-events: none;       /* icône non cliquable individuellement */
}


#phonePaymentUserLocalNumber {
  width: 100%;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}


/* intl-tel-input : intégration propre avec tes styles existants */

.iti {
  width: 100%;
}

.iti__selected-flag {
  height: 100%;
  padding-left: 6px;
}

.iti input[type="tel"], #phone {
  width: 100%;
  padding-left: 50px !important; /* espace nécessaire au drapeau */
  height: 40px; /* ajuste selon tes besoins */
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #ddd;
}


.iti__flag-container {
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

/* ////////////////////////////////////////// */


/* Ajustement du conteneur des boutons opérateurs */
#phone-operator-buttons-container {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* logos remontent ici */
  gap: 10px;
  flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
  margin-bottom: 15px;
  padding-top: 0;
}

.operator-btn {
  height: clamp(40px, 15vw, 70px); /* la hauteur se réduit proportionnellement selon la largeur de l'écran */

  padding: 0px;          /* pour un espacement horizontal optionnel */
  border-radius: 8px;
  overflow: hidden; /* permet de masquer tout contenu qui dépasse du cadre arrondi */
  border: 2px solid #ddd;
	
  display: flex;   /* Ajusté pour ne pas imposer la largeur flexible */
  justify-content: center;
  align-items: center;
	
  cursor: pointer;
  transition: border 0.2s;
  box-sizing: border-box;
}

.operator-btn img {
  height: 100%;        /* Remplit toujours la hauteur dynamique du parent */
  width: auto;         /* Largeur s’ajuste automatiquement pour respecter les proportions */
  object-fit:contain;
}

.operator-btn.selected {
  border: 3px solid #007bff; /* même couleur que montant actif */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
}


.operator-btn.valid {
  border-color: #28a745 !important; /* vert - valide */
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
}

.operator-btn.invalid {
  border-color: #dc3545 !important; /* rouge - invalide */
  box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
}

/* 2) Footer fixe en bas (pour desktop) */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    color: #999;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px 10px;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
    z-index: 9999; /* Au-dessus du chat-container */
}

footer a {
    color: #999;
    text-decoration: underline;
    margin: 0 3px;
}

/* Masque le badge reCAPTCHA v3 */
.grecaptcha-badge {
    display: none; /* ou visibility: hidden; */
}

/* Spinner animation intégré au bouton */
.phone-payment-spinner {
  display: none; /* caché par défaut */
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white; /* couleur du spinner visible */
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 10px; /* espacement du spinner avec l'icône */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Activation du spinner pendant la soumission */
#phonePaymentSubmitButton.submitting-donation .phone-payment-spinner {
  display: inline-block; /* affiché pendant la soumission */
}