/* ==========================================================================
   Modal Payment – MODALE “MAISON” (sans Bootstrap JS)
   Portée limitée à #paymentLinkModal et classes .pmodal*
   ========================================================================== */

/* Scroll lock quand une modale est ouverte */
html.pmodal-open, :root.pmodal-open { overflow: hidden; }

/* Conteneur de la modale */
#paymentLinkModal.pmodal {
  position: fixed;
  inset: 0;
  display: none; /* caché par défaut */
  z-index: 1000; /* au-dessus du site */
  /* centrage via Flexbox */
  align-items: center;
  justify-content: center;
  /* respirations et safe areas */
  padding: 1rem;
  padding-left: calc(1rem + env(safe-area-inset-left));
  padding-right: calc(1rem + env(safe-area-inset-right));
}
#paymentLinkModal[aria-hidden="false"] { display: flex; }

/* Backdrop */
#paymentLinkModal .pmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

/* Dialog */
#paymentLinkModal .pmodal__dialog {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  min-height: auto;
  /* plus de positionnement vertical : Flexbox du conteneur centre le dialog */
  margin: 0;
  background: #fff;
  color: #212529; /* force le texte sombre dans la modale, même si le thème global est clair sur fond clair */
  -webkit-font-smoothing: antialiased;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  padding: 1rem 1rem .75rem;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Entête / Titre / Bouton fermer */
#paymentLinkModal .pmodal__title {
  margin: 0 2.25rem .5rem 0;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.25;
}
#paymentLinkModal .pmodal__close {
  position: absolute;
  top: .5rem; right: .75rem;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  opacity: .7;
  cursor: pointer;
}
#paymentLinkModal .pmodal__close { color:#212529; }
#paymentLinkModal .pmodal__close:hover,
#paymentLinkModal .pmodal__close:focus { opacity: 1; outline: none; }

/* Corps / Pied */
#paymentLinkModal .pmodal__body { padding-top: .25rem; }
#paymentLinkModal .pmodal__footer { margin-top: .75rem; text-align: right; }
#paymentLinkModal .pmodal__spinner { margin-left: .5rem; font-size: .95rem; opacity: .9; }

/* Forme et champs (on laisse profiter des classes Bootstrap visuelles) */
#paymentLinkModal label { font-weight: 600; margin-bottom: .25rem; }
#paymentLinkModal .form-group { margin-bottom: .85rem; }
#paymentLinkModal .form-control,
#paymentLinkModal input[type="text"],
#paymentLinkModal input[type="tel"],
#paymentLinkModal input[type="email"],
#paymentLinkModal input[type="search"] {
  background-color: #fff;           /* fond blanc lisible */
  color: #212529;                   /* texte sombre */
  border: 1px solid #ced4da;        /* bordure visible */
  border-radius: .25rem;
  border-width: 1px !important;     /* évite les thèmes "soulignés" trop légers */
  box-shadow: none;
}
#paymentLinkModal .form-control:focus,
#paymentLinkModal input[type="text"]:focus,
#paymentLinkModal input[type="tel"]:focus,
#paymentLinkModal input[type="email"]:focus,
#paymentLinkModal input[type="search"]:focus {
  background-color: #fff;
  color: #212529;
  border-color: #80bdff;            /* cohérent Bootstrap 4 */
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}
#paymentLinkModal .form-control::placeholder,
#paymentLinkModal input::placeholder {
  color: #6c757d;                   /* placeholder lisible */
  opacity: 1;
}
/* Texte secondaire lisible dans la modale (peut être surchargé globalement en blanc) */
#paymentLinkModal .text-muted { color: #6c757d !important; }

/* Spécifique au champ téléphone : taille/espacement confortables */
#paymentLinkModal #mp-phone {
  font-size: 1.1rem;
  padding: .6rem .75rem;
  letter-spacing: .02em;
}
/* --- Forçage fort (au cas où des styles globaux mettent !important) --- */
#paymentLinkModal .form-control,
#paymentLinkModal #mp-phone {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #ced4da !important;
  caret-color: #212529 !important;
  background-clip: padding-box;
}
#paymentLinkModal .form-control:focus,
#paymentLinkModal #mp-phone:focus {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #80bdff !important;
  box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) !important;
  outline: 0 !important;
}
/* Sélection de texte lisible dans l'input */
#paymentLinkModal #mp-phone::selection { background: #cfe2ff; color: #212529; }
#paymentLinkModal #mp-phone::-moz-selection { background: #cfe2ff; color: #212529; }

/* Autofill Chrome : supprime le jaune en forçant un fond blanc via box-shadow inset */
#paymentLinkModal input:-webkit-autofill,
#paymentLinkModal input:-webkit-autofill:hover,
#paymentLinkModal input:-webkit-autofill:focus {
  -webkit-text-fill-color: #212529 !important;
  caret-color: #212529 !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  transition: background-color 9999s ease-out 0s; /* neutralise le flash */
}

/* Boutons : contraste élevé, focus visible */
#paymentLinkModal .btn-primary {
  color: #fff !important;
  background-color: #0d6efd !important; /* bleu accessible sur texte blanc */
  border-color: #0d6efd !important;
}
#paymentLinkModal .btn-primary:hover,
#paymentLinkModal .btn-primary:focus {
  background-color: #0b5ed7 !important;
  border-color: #0b5ed7 !important;
}
#paymentLinkModal .btn-primary:focus {
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.35) !important;
  outline: 0 !important;
}
#paymentLinkModal .btn-secondary {
  color:#fff !important;
  background-color:#6c757d !important;
  border-color:#6c757d !important;
}
#paymentLinkModal .btn-secondary:focus {
  box-shadow: 0 0 0 .2rem rgba(108,117,125,.35) !important;
  outline:0 !important;
}

/* Liens : couleur lisible et soulignés par défaut */
#paymentLinkModal a {
  color:#0b5ed7;
  text-decoration: underline;
}
#paymentLinkModal a:focus-visible {
  outline: 2px solid #0b5ed7;
  outline-offset: 2px;
}

/* Bordures/états désactivés mais lisibles */
#paymentLinkModal #mp-phone:disabled,
#paymentLinkModal .form-control:disabled {
  background-color: #e9ecef !important;
  color: #495057 !important;
  opacity: 1 !important;
}

#paymentLinkModal #mp-alert { margin-top: .5rem; }
#paymentLinkModal #mp-result .alert { margin-bottom: .35rem; }
#paymentLinkModal #mp-link { text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
#paymentLinkModal #mp-link:hover, #paymentLinkModal #mp-link:focus { text-decoration: underline; }
#paymentLinkModal #mp-origin { display: block; margin-top: .15rem; }

/* Alertes plus contrastées (palette Bootstrap 5) */
#paymentLinkModal .alert-success { color:#0f5132; background-color:#d1e7dd; border-color:#badbcc; }
#paymentLinkModal .alert-danger  { color:#842029; background-color:#f8d7da; border-color:#f5c2c7; }
#paymentLinkModal .alert-warning { color:#664d03; background-color:#fff3cd; border-color:#ffecb5; }
#paymentLinkModal .alert a { color:#0b5ed7; text-decoration: underline; }

/* Accessibilité / Réduction animations (pas d’anim JS ici) */
@media (max-width: 575.98px) {
  #paymentLinkModal .pmodal__dialog {
    max-width: 520px;
    width: 100%;
    /* le centrage reste assuré par Flexbox sur le conteneur */
  }
}

@media (min-width: 992px) {
  #paymentLinkModal .pmodal__dialog { max-width: 600px; }
}