/*
 * Formulaires d'authentification User Registration : connexion
 * ([user_registration_login], form-login.php surchargé), mot de passe
 * oublié + réinitialisation (form-lost-password.php / form-reset-password.php,
 * non surchargés — mêmes classes que la connexion, stylées ici sans PHP en
 * plus) et inscription ([user_registration_form id=X], form-registration.php,
 * non surchargé non plus : ses classes de champs sont génériques et déjà
 * gérées par type/attribut, donc pas besoin de copier ce fichier de 450
 * lignes pour un simple habillage visuel).
 *
 * Mêmes tokens que my-account.css / composants-elementor/formulaire-connexion.html :
 * vert (--color-primary) pour le logo et les CTA de connexion/mot de passe/
 * inscription. !important sur les couleurs et la largeur de bouton : le
 * plugin règle .user-registration-Button / .btn via des variables CSS
 * gérées dans ses propres Réglages > Style, avec des sélecteurs au moins
 * aussi spécifiques que les nôtres et imprimés après (footer) — sans
 * !important ces règles gagnent le cascade.
 */

/* ============================================================
   0. Header icône + titre (anm_auth_form_header(), inc/auth-forms.php) —
   icône ronde verte (même vert que le bouton juste en dessous, lecture
   "logo + CTA" cohérente). Posé juste au-dessus de la carte, jamais dans
   un fond distinct, pour lire comme un seul bloc avec elle. `gap` plus
   généreux qu'un simple espacement de texte : sépare clairement le
   pictogramme du titre plutôt que de les coller.
   ============================================================ */
.anm-auth-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 480px;
  margin: var(--space-2) auto 0;
  box-sizing: border-box;
  padding-bottom: 30px;
}

.anm-auth-header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
}

.anm-auth-header__icon svg {
  width: 24px;
  height: 24px;
}

.anm-auth-header__title {
  font-size: var(--text-xl);
  margin: 0;
  color: var(--color-ink);
  text-align: center;
}

/* ============================================================
   1. Connexion / mot de passe oublié / réinitialisation
   Les trois partagent le même wrapper .ur-frontend-form.login#ur-frontend-form
   et les mêmes classes de champs (form-login.php, form-lost-password.php,
   form-reset-password.php dans templates/myaccount/ du plugin).
   ============================================================ */
.ur-frontend-form.login#ur-frontend-form {
  box-sizing: border-box;
  max-width: 400px;
  margin: var(--space-4) auto var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  font-family: var(--font-base);
}

/* Le plugin réutilise ce même wrapper (classes "ur-frontend-form login" +
   id="ur-frontend-form") tel quel dans form-edit-profile.php,
   form-edit-profile-non-urm-user.php et form-edit-password.php (classe/ID
   plugin non renommés) — sans ce reset il hérite de la carte de connexion
   ci-dessus (fond/bordure/ombre/max-width:400px) par-dessus la vraie carte
   .anm-account-card, d'où un double encadré et un contenu écrasé sur 400px
   au lieu de toute la colonne. #user-registration (racine posée par le
   plugin sur la page Mon compte) suffit à gagner la cascade sur la règle
   ci-dessus, peu importe l'ordre de chargement des feuilles de style. */
#user-registration .ur-frontend-form.login#ur-frontend-form {
  max-width: none;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Astérisque des champs obligatoires — form-login.php, form-lost-password.php
   et (#user-registration) form-edit-profile-non-urm-user.php ; auth-forms.css
   se charge aussi sur la page Mon compte (is_ur_account_page(), voir
   anm_auth_forms_assets() ci-dessous), d'où une règle unique ici plutôt que
   dupliquée dans my-account.css. */
.ur-frontend-form.login .required,
#user-registration .required {
  color: var(--color-error);
  font-weight: 600;
}

.ur-frontend-form.login label {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-1);
}

.ur-frontend-form.login input.user-registration-Input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 var(--space-2);
  font-size: var(--text-base);
  font-family: var(--font-base);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease;
}

.ur-frontend-form.login input.user-registration-Input:focus {
  border-color: var(--color-focus);
}

/* Pas de ".ur-frontend-form.login" en ancêtre : en mode login classique
   (non-AJAX), le plugin imprime ce <ul> AVANT d'ouvrir ce div (sibling, pas
   descendant — cf. form-login.php ur_print_notices() / notices/error.php),
   la règle nichée ne matchait donc jamais et le message sortait sans style.
   Le mode AJAX (ur-login.js) l'insère lui en descendant : ce sélecteur plat
   couvre les deux cas. Fichier déjà scopé aux pages login/compte via
   anm_auth_forms_assets(), pas de risque de fuite ailleurs. */
.user-registration-error {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-gray-100);
  border-left: 4px solid var(--color-error);
  border-radius: var(--radius-sm);
  color: var(--color-error);
  font-size: var(--text-sm);
}

/* Notices success ("Mot de passe changé"...) / info — form-reset-password.php,
   form-login.php (force-logout). Même famille que .user-registration-error
   ci-dessus, couleur/bordure seules changent selon le type. */
.user-registration-message {
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
}

.user-registration-info {
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-gray-100);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: var(--text-sm);
}

/* Texte de lost-password-confirmation.php, sous le message de succès ci-dessus. */
.ur-frontend-form.login .ur-message-content {
  margin: 0;
  color: var(--color-gray-700);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  text-align: center;
}

/* Réglable dans Réglages > Connexion > Champs : "Afficher/masquer le mot
   de passe" — le plugin fournit déjà ce bouton et son JS (login, reset
   password), pas besoin d'en recoder un ; on l'habille juste ici. */
.ur-frontend-form.login .password-input-group {
  position: relative;
  display: block;
}

.ur-frontend-form.login .password_preview {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
}

.ur-frontend-form.login .user-registration-LostPassword a {
  font-size: var(--text-xs);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.ur-frontend-form.login .user-registration-before-login-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.ur-frontend-form.login .user-registration-Button.ur-submit-button,
.ur-frontend-form.login input.user-registration-Button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
  padding: 0 var(--space-3) !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: var(--text-base);
  border: 2px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.ur-frontend-form.login .user-registration-Button.ur-submit-button:hover,
.ur-frontend-form.login input.user-registration-Button:hover {
  background: var(--color-primary-dark) !important;
}

.ur-frontend-form.login .user-registration-Button.ur-submit-button:focus-visible,
.ur-frontend-form.login input.user-registration-Button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.ur-frontend-form.login .user-registration-register {
  margin-top: var(--space-2);
  text-align: center;
  font-size: var(--text-sm);
}

.ur-frontend-form.login .user-registration-register a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* ---- Spécifique mot de passe oublié (form-lost-password.php) ---- */
.ur-frontend-form.login .ur-lost-password-content-container {
  margin-bottom: var(--space-2);
}

.ur-frontend-form.login .ur-lost-password-message {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin: 0 0 var(--space-2);
}

.ur-frontend-form.login .ur-input-with-icon {
  position: relative;
}

.ur-frontend-form.login .ur-input-with-icon .input-icon {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-gray-500);
}

.ur-frontend-form.login .ur-input-with-icon input.user-registration-Input {
  padding-left: calc(var(--space-2) * 2 + 14px);
}

/* Lien "Retour à la connexion" (form-lost-password.php, form-reset-password.php),
   sous le bouton — même style que .user-registration-register (connexion)
   et .anm-registration-login-link (inscription). */
.ur-frontend-form.login .anm-auth-back-link {
  margin-top: var(--space-2);
  text-align: center;
  font-size: var(--text-sm);
}

.ur-frontend-form.login .anm-auth-back-link a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* ============================================================
   2. Inscription ([user_registration_form id=X], form-registration.php)
   Wrapper différent du bloc ci-dessus (.user-registration au lieu de
   .ur-frontend-form.login) : champs générés dynamiquement par le
   constructeur de formulaire du plugin, ciblés par type/attribut plutôt
   que par classe (mêmes sélecteurs que my-account.css §5, même principe :
   la classe de l'input n'est pas fiable, le type l'est).
   ============================================================ */
.user-registration.ur-frontend-form[id^="user-registration-form-"] {
  box-sizing: border-box;
  max-width: 480px;
  margin: var(--space-4) auto var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  font-family: var(--font-base);
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] .ur-field-item {
  margin-bottom: var(--space-2);
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] .ur-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] input[type="text"],
.user-registration.ur-frontend-form[id^="user-registration-form-"] input[type="email"],
.user-registration.ur-frontend-form[id^="user-registration-form-"] input[type="password"],
.user-registration.ur-frontend-form[id^="user-registration-form-"] input[type="tel"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 var(--space-2);
  font-size: var(--text-base);
  font-family: var(--font-base);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-sm);
  transition: border-color 150ms ease;
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] input[type="text"]:focus,
.user-registration.ur-frontend-form[id^="user-registration-form-"] input[type="email"]:focus,
.user-registration.ur-frontend-form[id^="user-registration-form-"] input[type="password"]:focus,
.user-registration.ur-frontend-form[id^="user-registration-form-"] input[type="tel"]:focus {
  border-color: var(--color-focus);
}

/* Root cause du bouton pas pleine largeur : le CSS par défaut du plugin
   (user-registration.scss) règle .ur-button-container en
   `display:flex; width:max-content` — un width:100% sur le bouton se
   résout par rapport à ce conteneur, qui n'a lui-même aucune largeur
   définie (juste la largeur de son contenu). Sans ce correctif sur le
   conteneur, le width:100% !important du bouton juste en dessous reste
   sans effet. */
.user-registration.ur-frontend-form[id^="user-registration-form-"] .ur-button-container {
  width: 100% !important;
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] .btn.button.ur-submit-button {
  display: flex !important;
  width: 100% !important;
  align-items: center;
  justify-content: center;
  min-height: 44px !important;
  padding: 0 var(--space-3) !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: var(--text-base);
  border: 2px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] .btn.button.ur-submit-button:hover {
  background: var(--color-primary-dark) !important;
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] .ur-message.user-registration-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
  background: var(--color-gray-100);
  border-left: 4px solid var(--color-error);
  border-radius: var(--radius-sm);
  color: var(--color-error);
  font-size: var(--text-sm);
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] .ur-message.user-registration-error svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] .ur-message.user-registration-error .ur-error-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] .ur-message.user-registration-message {
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
}

/* Lien CGV (anm_registration_cgv_link(), inc/auth-forms.php), juste
   au-dessus du bouton d'inscription — rendu vide si l'URL n'est pas
   renseignée dans Personnaliser > Réglages ANMTEPH. */
.user-registration.ur-frontend-form[id^="user-registration-form-"] .anm-cgv-link {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-gray-700);
  text-align: center;
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] .anm-cgv-link a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* Lien "Déjà membre ?" (anm_registration_login_link(), inc/auth-forms.php)
   sous le bouton — même style que .user-registration-register côté
   connexion (section 1 ci-dessus). */
.user-registration.ur-frontend-form[id^="user-registration-form-"] .anm-registration-login-link {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: var(--text-sm);
}

.user-registration.ur-frontend-form[id^="user-registration-form-"] .anm-registration-login-link a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* ============================================================
   3. Responsive — cartes pleine largeur sous 480px, on ne dépend pas
   du padding d'un conteneur parent (Elementor, page builder...) pour
   ne pas coller aux bords de l'écran.
   ============================================================ */
@media (max-width: 480px) {
  .anm-auth-header {
    margin-inline: var(--space-2);
    padding-bottom: 8px;
  }

  .anm-auth-header__icon {
    width: 40px;
    height: 40px;
  }

  .anm-auth-header__icon svg {
    width: 20px;
    height: 20px;
  }

  .anm-auth-header__title {
    font-size: var(--text-lg);
  }

  .ur-frontend-form.login#ur-frontend-form,
  .user-registration.ur-frontend-form[id^="user-registration-form-"] {
    margin: var(--space-2) var(--space-2) var(--space-3);
    padding: var(--space-2);
  }

  .ur-frontend-form.login .user-registration-before-login-btn {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}