/**
 * Module a4w_authflow - Email-first authentication flow
 * @author allforweb
 */

/* Container */
.authflow {
  max-width: 500px;
  margin: 0 auto;
}

/* Boutons pleine largeur (1.8.2) : `d-grid` n'existe qu'en Bootstrap 5. Sur les
   thèmes Bootstrap 4 (allforweb de kronos360, classic), « Continuer », « Envoyer
   le code » et « Se connecter » gardaient la largeur de leur texte, calés à
   gauche sous des textes centrés. Même rendu que Bootstrap 5, borné au module. */
.authflow .d-grid {
  display: grid;
}

/* Step transitions */
.authflow__step {
  animation: authflowFadeIn 0.3s ease-in-out;
}

@keyframes authflowFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Email step ─── */

.authflow-email__intro {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--dark-gray, #666);
}

.authflow-email__input {
  font-size: 1rem;
  padding: 0.75rem 1rem;
}

.authflow-email__btn {
  margin-top: 1rem;
  padding: 0.75rem;
  font-size: 1rem;
}

.authflow-email__error {
  color: var(--alert-danger-color, var(--error-color, #dc3545));
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* ─── Email badge ─── */

.authflow__email-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* Écart porté par le module : `ms-2` sur le lien n'existe qu'en Bootstrap 5,
     l'adresse et « Changer » se touchaient sur les thèmes Bootstrap 4. */
  gap: 0.5rem;
  background: var(--light-gray, #f5f5f5);
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.authflow__email-display {
  font-weight: 600;
  word-break: break-all;
}

.authflow__change-email {
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ─── Login step ─── */

.authflow-login__welcome {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

/* Login method toggle buttons */
.authflow-login__methods {
  margin-bottom: 1.5rem;
}

.authflow-login__methods-intro {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--dark-gray, #666);
}

/* Choix du mode (1.9.0) : un fieldset de deux boutons radio réels, chacun dans une
   étiquette cliquable. Deux cartes distinctes, séparées par un écart, plutôt qu'un
   sélecteur segmenté ; le passage à la ligne évite l'écrasement sur mobile. Le mode
   retenu se lit à la bordure renforcée, pas à la seule couleur. */
.authflow-login__methods {
  border: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  min-width: 0;
}

.authflow-login__methods-intro {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin-bottom: 1rem;
  font-size: inherit;
  line-height: inherit;
  text-align: center;
  color: var(--dark-gray, #666);
}

.authflow-login__method-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.authflow-login__method-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 10rem;
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--background-color, #fff);
  color: var(--dark-gray, #666);
  border: 1px solid var(--border-color, #ced4da);
  border-radius: var(--border-radius, 0.375rem);
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
}

.authflow-login__method-btn input[type="radio"] {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--text-color, #212529);
}

.authflow-login__method-btn:hover {
  border-color: var(--input-border-color, #8e8c8d);
  color: var(--text-color, #333);
}

.authflow-login__method-btn--active,
.authflow-login__method-btn--active:hover {
  border-color: var(--text-color, #212529);
  box-shadow: inset 0 0 0 1px var(--text-color, #212529);
  color: var(--text-color, #212529);
}

/* #6737 : la question reçoit le focus à l'arrivée sur l'étape (lecteurs d'écran) ; ce n'est pas
   un contrôle, elle ne porte pas de contour. */
.authflow-login__methods-intro:focus {
  outline: none;
}

.authflow-login__method-btn:focus-within {
  outline: 2px solid var(--text-color, #212529);
  outline-offset: 2px;
}

/* ─── Code login section ─── */

.authflow-code__desc {
  text-align: center;
  color: var(--dark-gray, #666);
  margin-bottom: 1rem;
}

.authflow-code__send-btn {
  padding: 0.75rem;
  font-size: 1rem;
}

.authflow-code__sent-msg {
  text-align: center;
  color: var(--dark-gray, #666);
  margin-bottom: 1.5rem;
}

/* Champ suivi d'un bouton (code, mot de passe du widget) : Bootstrap 5 a retiré
   la marge de `.form-group`, le champ touchait son bouton sur les thèmes
   hummingbird (Gumuche). Limité aux blocs du module : les champs du formulaire
   natif repris par le flux gardent l'espacement du thème. */
.authflow-code__verify .form-group,
.authflow-register__code-section .form-group,
.authflow-login__form-wrapper > .form-group {
  margin-bottom: 1rem;
}

.authflow-code__input {
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

.authflow-code__error {
  color: var(--alert-danger-color, var(--error-color, #dc3545));
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.authflow-code__resend {
  font-size: 0.875rem;
}

/* ─── Register step ─── */

.authflow-register__intro {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Readonly email in registration form */
.authflow__email--readonly {
  background-color: var(--light-gray, #f5f5f5);
  cursor: not-allowed;
  opacity: 0.8;
}

/* ─── Spinners ─── */

.authflow-email__spinner,
.authflow-code__spinner {
  width: 1rem;
  height: 1rem;
}

/* Indicateur de chargement porté par le module (1.8.2) : `spinner-border` n'existe
   qu'à partir de Bootstrap 4.2, le thème de kronos360 embarque la 4.0 et le
   bouton n'indiquait rien pendant l'envoi. L'affichage reste piloté par le JS
   (style en ligne). */
.authflow .authflow-email__spinner,
.authflow .authflow-code__spinner {
  display: inline-block;
  vertical-align: -0.125em;
  border: 0.2em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: authflowSpin 0.75s linear infinite;
}

@keyframes authflowSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .authflow .authflow-email__spinner,
  .authflow .authflow-code__spinner {
    animation-duration: 1.5s;
  }
}

/* === v1.2.0 — error alerts + cooldown state === */

.authflow-code__send-error,
.authflow-code__resend-error {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.authflow-code__resend[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === v1.2.0 — checkout integration (sélecteurs corrigés en 1.5.0) === */

/* La classe `authflow-checkout-active` est posée sur la section d'étape par le JS,
   et seulement après reprise effective des formulaires natifs (voir
   adoptNativeCheckoutForms). Elle n'est donc jamais présente sans JavaScript :
   l'étape native reste alors utilisable au lieu d'un tunnel sans issue.

   Le masquage part du conteneur du module et vise ses frères — les onglets et le
   conteneur d'onglets vidé de ses formulaires. Cibler par la structure du thème
   ne tient pas : classic rend `ul.nav.nav-inline` dans un `div.content`,
   hummingbird `ul.nav.nav-underline` — la version 1.2.0 visait `.nav-tabs` sous
   `.step__content`, qui n'existent dans aucun des deux. */
.authflow-checkout-active .authflow-checkout-wrapper ~ ul.nav,
.authflow-checkout-active .authflow-checkout-wrapper ~ .tab-content {
  display: none !important;
}

/* === v1.4.0 — mode double authentification === */

.authflow-login__2fa-intro {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 1rem;
  /* Centré comme les autres textes d'accompagnement du parcours (1.8.2). */
  text-align: center;
}

.authflow-login__password-error {
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Case « appareil de confiance » : mise en page portée par le module.
   Les classes Bootstrap ne conviennent pas — les thèmes PrestaShop vont de
   Bootstrap 4 (classic et ses dérivés) à Bootstrap 5, et `form-check` n'y
   positionne pas la case de la même façon. */
.authflow-code__trust {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  text-align: left;
}

.authflow-code__trust input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin: 0.2rem 0 0 0;
}

.authflow-code__trust label {
  margin: 0;
  font-weight: normal;
  line-height: 1.4;
  cursor: pointer;
}

/* === v1.7.0 — widget deposit (contexte embarqué, §3.4) === */

/* Rendu dans une page hôte (marketplace) plutôt que sur la page /connexion
   dédiée : pas de marge automatique horizontale, la mise en page appartient à
   l'hôte. */
.authflow--embed {
  max-width: none;
  margin: 0;
}

.authflow-register__phone {
  margin-top: 1rem;
}

.authflow-register__code-section {
  margin-top: 1.5rem;
}

#authflow-register-error {
  font-size: 0.9rem;
}

/* === v1.9.0 — identification en 3 écrans (CPT-01) : briques communes === */

/* Texte réservé aux lecteurs d'écran : classe propre au module (`sr-only` en
   Bootstrap 4, `visually-hidden` en 5). */
.authflow-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.authflow__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.authflow__hint {
  margin: 0.375rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted-color, #6c757d);
}

.authflow-email__hint,
.authflow-register__required-note {
  text-align: center;
}

.authflow-code__resent:empty {
  display: none;
}

.authflow-code__resent {
  text-align: center;
}

.authflow .is-invalid,
.authflow [aria-invalid="true"] {
  border-color: var(--alert-danger-color, var(--error-color, #dc3545));
}

/* === Gumuche — charte v2, identification en 3 écrans (CPT-01, refs#6694) ===
   Habillage propre à ce site, absent du trunk (thème Bootstrap 5 hummingbird,
   jetons du thème avec repli). Les boutons d'action (« Continuer », « Envoyer le
   code », « Se connecter ») gardent le style `.btn-primary` du thème (achat). */

.authflow {
  max-width: 520px;
  margin: 2rem auto 0;
}

.authflow .authflow-email__intro {
  margin: 0;
  text-align: left;
  line-height: 1.6;
  color: var(--medium-gray, #565254);
}

.authflow .authflow-email__field {
  margin: 1.5rem 0 0;
}

.authflow .authflow__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color, #1D191B);
}

.authflow .authflow-email__input,
.authflow .authflow-code__input {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--input-border-color, #8E8C8D);
  border-radius: var(--border-radius, 3px);
  background: var(--background-color, #FFFFFF);
  font-family: var(--font-family-base, 'Noto Sans', sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-color, #1D191B);
}

.authflow .authflow-email__input:focus-visible,
.authflow .authflow-code__input:focus-visible {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: 2px;
  box-shadow: none;
}

.authflow .authflow-email__input.is-invalid,
.authflow .authflow-code__input.is-invalid {
  border-color: var(--alert-danger-color, #9B2C2C);
}

.authflow .authflow-email__error,
.authflow .authflow-code__error {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--alert-danger-color, #9B2C2C);
}

.authflow .authflow-email__btn,
.authflow .authflow-code__send-btn,
.authflow #authflow-verify-code-btn {
  width: 100%;
  min-height: var(--btn-min-height, 50px);
  padding: var(--btn-padding-y, 12px) var(--btn-padding-x, 24px);
  font-size: var(--btn-font-size, 1.125rem);
}

.authflow .authflow-email__btn {
  margin-top: 1.25rem;
}

.authflow .authflow__hint {
  color: var(--muted-color, #6C6A6B);
}

.authflow .authflow-email__hint {
  margin-top: 1rem;
}

/* Pastille de l'adresse + « Changer » */
.authflow .authflow__email-badge {
  gap: 4px 12px;
  padding: 14px 16px;
  margin-bottom: 0;
  background: var(--light-bg, #FAF7F4);
  border-radius: var(--border-radius, 3px);
  font-weight: 600;
  color: var(--text-color, #1D191B);
}

.authflow .authflow__change-email {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-color, #1D191B);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

.authflow .authflow__change-email:hover {
  text-decoration-color: var(--text-color, #1D191B);
}

.authflow .authflow__change-email:focus-visible,
.authflow .authflow-code__resend:focus-visible {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: 2px;
}

/* Titres d'écran (Gelasio) */
.authflow .authflow-login__welcome,
.authflow .authflow-register__intro {
  margin: 0 0 0.75rem;
  font-family: var(--font-family-title, 'Gelasio', serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--text-color, #1D191B);
}

.authflow .authflow-login__header {
  margin-bottom: 0 !important;
}

/* Choix « Mot de passe » / « Code unique par e-mail » : deux cartes, une colonne sur mobile */
.authflow .authflow-login__methods {
  margin: 1.75rem 0 0;
}

.authflow .authflow-login__methods-intro {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
  color: var(--text-color, #1D191B);
}

.authflow .authflow-login__method-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.authflow .authflow-login__method-btn {
  padding: 16px;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background: var(--background-color, #FFFFFF);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color, #1D191B);
}

.authflow .authflow-login__method-btn:hover {
  border-color: var(--input-border-color, #8E8C8D);
}

.authflow .authflow-login__method-btn--active,
.authflow .authflow-login__method-btn--active:hover {
  border-color: var(--text-color, #1D191B);
  box-shadow: inset 0 0 0 1px var(--text-color, #1D191B);
}

.authflow .authflow-login__password-section,
.authflow .authflow-login__code-section {
  margin-top: 1.75rem;
}

/* Code unique : 6 chiffres espacés */
.authflow .authflow-code__sent-msg {
  margin: 0 0 1.25rem;
  text-align: left;
  line-height: 1.6;
  color: var(--medium-gray, #565254);
}

.authflow .authflow-code__sent-msg strong {
  color: var(--text-color, #1D191B);
}

.authflow .authflow-code__input {
  padding-left: calc(14px + 0.4em);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.4em;
  text-align: center;
}

.authflow .authflow-code__input::placeholder {
  color: var(--muted-color, #6C6A6B);
  opacity: 0.6;
}

.authflow .authflow-code__resent {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.authflow .authflow-code__resend {
  min-height: 44px;
  padding: 0 12px;
  font-size: 0.875rem;
  color: var(--text-color, #1D191B);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

.authflow .authflow-code__resend[disabled] {
  color: var(--muted-color, #6C6A6B);
  text-decoration: none;
  opacity: 1;
  cursor: default;
}

/* Création de compte */
.authflow .authflow-register__required-note {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--medium-gray, #565254);
}

.authflow .authflow-register .register-form {
  margin-top: 1.25rem;
}

@media (max-width: 575.98px) {
  .authflow .authflow-login__method-btns {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .authflow .authflow__step {
    animation: none;
  }
}

/* ─── Connexion par code imposée (actionA4wAuthflowCheckEmail, ex. a4w_passwordreset) ───
   Maquette client « Identification client migré » : bloc centré de 520 px, titre, texte, bouton
   pleine largeur, lien « Modifier mon adresse e-mail » sous le bouton. */
.authflow-forced {
  max-width: 520px;
  margin: 32px auto 0;
  text-align: center;
}

.authflow-forced__title {
  margin: 0 0 16px;
  font-family: var(--font-family-title, inherit);
  font-size: var(--font-size-h5, 1.25rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-color, #1d191b);
}

.authflow-forced__title:focus {
  outline: none;
}

.authflow-forced__text {
  margin: 0;
  line-height: 1.6;
  color: var(--dark-gray, #565254);
}

.authflow-forced__text strong {
  color: var(--text-color, #1d191b);
  overflow-wrap: break-word;
}

.authflow-forced__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.authflow-forced__send {
  width: 100%;
}

.authflow-forced__change {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}