/**
 * ACX — Connexion par code (OTP)
 *
 * Le panneau est rendu dans .before-login-form-wrapper, à l'extérieur de
 * .login-form-wrapper : les styles du thème parent, qui sont portés par cette
 * seconde classe, ne s'y appliquent pas. On les reproduit donc ici, avec les
 * valeurs relevées sur le formulaire d'origine, pour que les deux panneaux
 * soient indiscernables.
 *
 * Reproduire plutôt qu'emprunter la structure du parent : ça fait quelques
 * lignes de plus, mais ça ne dépend d'aucun sélecteur interne du thème et
 * survit donc aux mises à jour hebdomadaires.
 */

/* --- Surface du panneau ------------------------------------------------
 *
 * .before-login-form-wrapper porte le rembourrage de 60px et le fond blanc
 * translucide : c'est la surface de la boîte, pas de la décoration. On la
 * laisse telle quelle quand le panneau est visible, et on la replie quand il
 * ne l'est pas — sinon elle dessine une bande vide au-dessus du formulaire.
 */
.kleo-login-wrap.acx-otp-mode-password .before-login-form-wrapper {
	padding: 0;
	margin: 0;
	background: transparent;
}

/*
 * Le conteneur hôte met 60px sur ses quatre côtés, alors que .login-form-wrapper
 * n'en met que 20 en bas. On s'aligne, sinon le panneau paraît lourd du bas.
 * Spécificité volontairement plus faible que les règles de repli ci-dessus.
 */
.kleo-login-wrap .before-login-form-wrapper {
	padding-bottom: 20px;
}

/* --- Bascule entre les deux panneaux ---------------------------------- */

/*
 * État de base : mot de passe visible. Si l'OTP est l'option par défaut, le
 * plugin injecte en ligne les règles qui inversent ceci — voir
 * ACX_OTP_Form::enqueue().
 */
.acx-otp-panel {
	display: none;
	/* Rembourrage plutôt qu'une marge sur le dernier lien : une marge basse
	   fusionne avec celle du parent et n'ouvre aucun espace. Avec les 20px du
	   conteneur, ça redonne les 50px du formulaire d'origine. */
	padding-bottom: 30px;
}

.kleo-login-wrap.acx-otp-mode-code .acx-otp-panel {
	display: block;
}

.kleo-login-wrap.acx-otp-mode-code .login-form-wrapper,
.kleo-login-wrap.acx-otp-mode-code .login-create-account-wrapper {
	display: none;
}

.kleo-login-wrap.acx-otp-mode-password .acx-otp-panel {
	display: none;
}

.acx-otp-step[hidden] {
	display: none;
}

/* --- Titre, repris du formulaire d'origine ---------------------------- */

/*
 * L'espacement est porté par notre propre classe, pas par .kleo-pop-title :
 * une règle du thème impose margin:0 sur cette dernière et l'emporterait.
 * Aucune marge négative ici — elles tenaient par chance et cassaient dès que
 * la marge du titre changeait.
 */
.acx-otp-panel .acx-otp-title-wrap {
	margin: 0 0 24px;
}

.acx-otp-panel .kleo-pop-title {
	margin: 0;
	font-family: "Open Sans", sans-serif;
	font-size: 18.8px;
	font-weight: 400;
	line-height: 28.2px;
	letter-spacing: 0.752px;
	color: rgb(44, 37, 56);
	text-align: center;
}

.acx-otp-intro {
	margin: 0 0 28px;
	font-size: 13px;
	line-height: 1.6;
	color: rgb(44, 37, 56);
	text-align: center;
	opacity: 0.8;
}

/* --- Champs ------------------------------------------------------------ */

.acx-otp-field {
	margin: 0 0 15px;
	text-align: left;
}

.acx-otp-field label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: 400;
	/* Couleur des étiquettes du thème. Le contraste est faible — voir la note
	   dans le README si l'accessibilité doit primer sur la fidélité visuelle. */
	color: rgb(232, 189, 148);
}

.acx-otp-field .form-control {
	width: 100%;
	height: 40px;
	padding: 0;
	font-size: 13px;
	color: rgb(44, 37, 56);
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(44, 37, 56, 0.18);
	border-radius: 0;
	box-shadow: none;
	transition: border-color 0.2s ease;
}

.acx-otp-field .form-control:focus {
	border-bottom-color: #da9655;
	box-shadow: 0 1px 0 0 #da9655;
	outline: none;
}

/* Clavier : un contour franc, jamais supprimé. */
.acx-otp-panel :focus-visible {
	outline: 2px solid #da9655;
	outline-offset: 2px;
}

.acx-otp-field .acx-otp-code {
	height: 50px;
	font-family: "Courier New", Courier, monospace;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.4em;
	text-align: center;
	text-indent: 0.4em; /* compense le letter-spacing du dernier caractère */
}

/* --- Bouton principal --------------------------------------------------
 *
 * Les classes Bootstrap du thème (btn-default) donnent un bouton gris et
 * arrondi hors de .login-form-wrapper : on repose les valeurs d'origine.
 */
.acx-otp-panel .login-button {
	display: block;
	width: 100%;
	height: 50px;
	margin: 15px 0 0;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 50px;
	letter-spacing: 0.42px;
	text-transform: uppercase;
	color: #fff;
	background-color: #da9655;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transition: background-color 0.2s ease;
}

.acx-otp-panel .login-button:hover,
.acx-otp-panel .login-button:focus {
	color: #fff;
	background-color: #c8853f;
}

/* --- Liens secondaires ------------------------------------------------- */

/*
 * overflow:hidden pour contenir le flottant : la classe kleo-other-action du
 * thème porte un float:right (c'est ce qui aligne « Mot de passe oublié ? » à
 * droite dans le formulaire d'origine). On ne combat pas sa spécificité — on
 * passe le lien en pleine largeur, ce qui neutralise l'effet visuel du
 * flottement, et on le centre.
 */
.acx-otp-toggle-wrap {
	clear: both;
	overflow: hidden;
	margin: 18px 0 0;
	padding-bottom: 30px;
	text-align: center;
}

.acx-otp-toggle-wrap .acx-otp-toggle {
	display: block;
	width: 100%;
	font-size: 13px;
	text-align: center;
}

.acx-otp-link {
	/* block et non inline-block : sur un élément de niveau ligne, la marge
	   basse ne repousse pas le bas du conteneur. */
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 4px 0;
	font-size: 13px;
	color: rgb(44, 37, 56);
	text-align: center;
	background: none;
	border: 0;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.2s ease;
}

.acx-otp-link:hover,
.acx-otp-link:focus {
	color: #da9655;
	opacity: 1;
}

.acx-otp-link[disabled] {
	cursor: default;
	opacity: 0.4;
}

/* Les 30px sous ce lien viennent du padding-bottom du panneau. */
.acx-otp-back {
	margin-top: 18px;
}

/* --- Messages ---------------------------------------------------------- */

.acx-otp-result {
	min-height: 1px;
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.5;
	color: rgb(44, 37, 56);
	text-align: center;
}

.acx-otp-result:empty {
	margin-top: 0;
}

.acx-otp-result.is-error {
	color: #b02a2a;
}

.acx-otp-result.is-ok {
	color: #2a7d2e;
}

.acx-otp-busy {
	pointer-events: none;
	opacity: 0.6;
}

/* --- Tablette et mobile ------------------------------------------------ */

@media (max-width: 767px) {
	/* Sous 16px, iOS zoome automatiquement au focus et décadre la page. */
	.acx-otp-field .form-control {
		font-size: 16px;
	}

	.acx-otp-field .acx-otp-code {
		font-size: 22px;
		letter-spacing: 0.3em;
		text-indent: 0.3em;
	}

	.acx-otp-panel .acx-otp-title-wrap {
		margin-bottom: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.acx-otp-field .form-control,
	.acx-otp-panel .login-button,
	.acx-otp-link {
		transition: none;
	}
}