/* === Overlay centré === */
#um2fa-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(17,17,17,.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 99999;
}
#um2fa-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Empêche le scroll du body quand la modale est ouverte */
html.um2fa-lock, body.um2fa-lock { overflow: hidden !important; }

/* === Modal === */
.um2fa-modal {
  width: min(420px, 92vw);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
  font-family: inherit;
  position: relative;
  outline: none;
}

/* === Close (X) === */
.um2fa-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* === Header === */
.um2fa-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; text-align: center; }
.um2fa-subtitle { margin: 0 0 16px; text-align: center; color: #555; font-size: 14px; }

/* === Input code === */
.um2fa-code {
  width: 100%;
  font-size: 18px;
  text-align: center;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  letter-spacing: 2px;
}

/* === Actions : 2 colonnes (Vérifier | Renvoyer) === */
.um2fa-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.um2fa-actions button {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 14px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  transition: background .2s ease, transform .08s ease, opacity .12s ease;
}

/* Bouton principal */
.um2fa-submit { background: var(--um2fa-base,#6F42C1); color: #fff; }
.um2fa-submit:hover { background: var(--um2fa-hover,#54348E); transform: translateY(-1px); }
.um2fa-submit:disabled { opacity: .6; cursor: not-allowed; }

/* Bouton secondaire (Renvoyer) */
.um2fa-resend { background: #F2F2F7; color: #111; }
.um2fa-resend:hover { background: #e4e4ea; }
.um2fa-resend:disabled { opacity: .6; cursor: not-allowed; }

/* === Feedback === */
.um2fa-feedback { margin-top: 8px; color: #B30000; font-size: 14px; min-height: 18px; text-align: center; }

/* === Toasts === */
.um2fa-toast {
  position: fixed; top: 16px; right: 16px; max-width: 380px;
  background: #fff; border: 1px solid #eee; border-left: 4px solid #6F42C1;
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 100000; font-size: 14px; line-height: 1.45;
  opacity: 0; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease;
}
.um2fa-toast.is-show { opacity: 1; transform: translateY(0); }
.um2fa-toast strong { display: block; margin-bottom: 4px; font-weight: 700; }
.um2fa-toast--error  { border-left-color: #D92D20; }
.um2fa-toast--success{ border-left-color: #1A7F37; }
.um2fa-toast--info   { border-left-color: #6F42C1; }

/* === Accessibilité: focus visible (clavier) === */
.um2fa-close:focus-visible,
.um2fa-submit:focus-visible,
.um2fa-resend:focus-visible,
.um2fa-code:focus-visible {
  outline: 3px solid rgba(111,66,193,.35);
  outline-offset: 2px;
  border-radius: 10px;
}

/* === Réduction des animations si demandé par l’utilisateur === */
@media (prefers-reduced-motion: reduce) {
  #um2fa-overlay, .um2fa-toast { transition: none; }
  .um2fa-submit:hover { transform: none; }
}