/* Éléments partagés par les formulaires d'authentification/inscription :
   indicatif pays, cases de code, bouton afficher/masquer le mot de passe. */

.mb-phone-row { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 8px; }
.mb-phone-row select {
  min-width: 0;
  padding: 10px 8px;
  border-radius: var(--mb-radius-sm);
  border: 1px solid var(--mb-border);
  background: var(--mb-surface);
  color: var(--mb-text);
  font-size: 0.9rem;
}

.mb-code-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.mb-code-digit {
  width: 44px;
  height: 52px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: var(--mb-radius-sm);
  border: 2px solid var(--mb-border);
  background: var(--mb-surface);
  color: var(--mb-text);
}
.mb-code-digit:focus { border-color: var(--mb-accent); outline: none; }
.mb-code-digit--error { border-color: var(--mb-error); animation: mb-shake 0.3s; }
@keyframes mb-shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.mb-password-field { position: relative; }
.mb-password-field input { padding-right: 42px; width: 100%; }
.mb-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--mb-text-muted);
  cursor: pointer;
  padding: 6px;
  display: flex;
}
.mb-password-toggle:hover { color: var(--mb-accent); }

.mb-auth-login-link {
  text-align: center;
  font-size: 0.9rem;
  color: var(--mb-text-muted);
}
.mb-auth-login-link a { color: var(--mb-accent); font-weight: 600; }

.mb-cgu-panel iframe { width: 100%; height: 320px; border: none; border-radius: var(--mb-radius-sm); }

.mb-pw-strength { margin-top: -4px; }
.mb-pw-strength-track { height: 4px; border-radius: 999px; background: var(--mb-border); overflow: hidden; }
.mb-pw-strength-bar { height: 100%; width: 10%; background: var(--mb-error); transition: width 0.2s ease, background-color 0.2s ease; }
.mb-pw-strength-label { font-size: 0.75rem; font-weight: 600; }