/**
 * AG Login
 * Restyle épuré de wp-login.php avec les tokens du design system AG.
 * Tous les sélecteurs sont scopés sous `body.ag-login-body` pour ne jamais
 * impacter une autre page du backoffice.
 *
 * Layout : un seul axe vertical centré (logo, card, lien retour).
 * La card contient tous les contrôles : champs, checkbox, submit, register.
 * Le sélecteur de langue est positionné en absolute (top-right), même style
 * que `.ag-lang` du header (cf. wp-content/themes/howes/css/ag-header.css).
 */

/* Tokens locaux empruntés au header (pas dans ag-design-system.css). */
body.ag-login-body {
	--ag-radius-pill: 999px;
	--ag-shadow-dropdown: 0 12px 28px rgba(15, 23, 42, 0.12);
}

/* ─── Couleurs d'accent par langue ───────────────────────────────────
 * style.css n'est pas chargé sur wp-login.php, on rappatrie ici les
 * variables `--link-color` par locale (source de vérité : style.css)
 * et on aligne `--ag-accent` dessus, comme le fait ag-header.css.
 */
html[lang='fr-FR'] body.ag-login-body { --link-color: #175298; --ag-accent-soft: #eaf1fb; }
html[lang='en-US'] body.ag-login-body { --link-color: #175298; --ag-accent-soft: #eaf1fb; }
html[lang='es-ES'] body.ag-login-body { --link-color: #021f3c; --ag-accent-soft: #e6ecf2; }
html[lang='it-IT'] body.ag-login-body { --link-color: #067a45; --ag-accent-soft: #e6f4ed; }
html[lang='de-DE'] body.ag-login-body { --link-color: #333333; --ag-accent-soft: #f0f0f0; }
html[lang='pt-PT'] body.ag-login-body { --link-color: #1b6035; --ag-accent-soft: #e8f1ec; }
html[lang='pl-PL'] body.ag-login-body { --link-color: #db143c; --ag-accent-soft: #fce8ec; }
html[lang='nl-NL'] body.ag-login-body { --link-color: #175298; --ag-accent-soft: #eaf1fb; }

body.ag-login-body {
	--ag-accent: var(--link-color, #175298);
}

/* ─── Reset body : fond gris du design system ────────────────────────── */
body.ag-login-body,
body.ag-login-body.login {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--ag-bg) !important;
	background-image: none !important;
	font-family: var(--ag-font);
	color: var(--ag-text);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

body.ag-login-body #login {
	width: 100%;
	max-width: 400px;
	margin: 0;
	padding: 24px;
	box-sizing: border-box;
}

/* ─── Logo (h1) ──────────────────────────────────────────────────────── */
body.ag-login-body #login h1 {
	margin: 0 0 35px;
	padding: 0;
	text-align: center;
	line-height: 1;
}

body.ag-login-body #login h1 a {
	display: block;
	width: 260px;
	height: 59px;
	margin: 0 auto;
	background-image: var(--ag-login-logo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-color: transparent;
	text-indent: -9999px;
	overflow: hidden;
	outline: none;
	box-shadow: none;
}

/* ─── Form card (blanche sur fond gris) ──────────────────────────────── */
body.ag-login-body #loginform,
body.ag-login-body #registerform,
body.ag-login-body #lostpasswordform,
body.ag-login-body #resetpassform {
	background: var(--ag-surface) !important;
	border: 1px solid var(--ag-border) !important;
	border-radius: var(--ag-radius) !important;
	box-shadow: var(--ag-shadow) !important;
	padding: 28px !important;
	margin: 0 !important;
	overflow: visible !important;
}

body.ag-login-body #loginform p,
body.ag-login-body #registerform p,
body.ag-login-body #lostpasswordform p,
body.ag-login-body #resetpassform p {
	margin: 0 0 14px;
}

body.ag-login-body #loginform p:last-child,
body.ag-login-body #registerform p:last-child,
body.ag-login-body #lostpasswordform p:last-child,
body.ag-login-body #resetpassform p:last-child {
	margin-bottom: 0;
}

/* Labels — élargi à tous les forms sous #login (form custom register inclus) */
body.ag-login-body #login form label,
body.ag-login-body .user-pass-wrap label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: var(--ag-text);
	margin-bottom: 6px;
}

/* Inputs */
body.ag-login-body input[type="text"],
body.ag-login-body input[type="email"],
body.ag-login-body input[type="password"],
body.ag-login-body input[type="tel"],
body.ag-login-body input[type="url"],
body.ag-login-body input[type="number"],
body.ag-login-body input.input {
	width: 100%;
	height: 42px;
	margin: 0 !important; /* override wp-admin/css/login.css : .login .input { margin: 5px 0 ... } */
	padding: 0 14px;
	font-size: 14px;
	font-family: var(--ag-font);
	color: var(--ag-text);
	background: var(--ag-surface);
	border: 1px solid var(--ag-border-strong);
	border-radius: var(--ag-radius-sm);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

body.ag-login-body input[type="text"]:focus,
body.ag-login-body input[type="email"]:focus,
body.ag-login-body input[type="password"]:focus,
body.ag-login-body input[type="tel"]:focus,
body.ag-login-body input[type="url"]:focus,
body.ag-login-body input[type="number"]:focus,
body.ag-login-body input.input:focus {
	border-color: var(--ag-accent);
	box-shadow: 0 0 0 3px var(--ag-accent-soft);
	outline: none;
}

/* Champ password + bouton "œil" natif WP */
body.ag-login-body .user-pass-wrap { margin-bottom: 0; }

body.ag-login-body .wp-pwd { position: relative; }

body.ag-login-body .wp-pwd input[type="password"],
body.ag-login-body .wp-pwd input[type="text"] {
	padding-right: 44px;
}

body.ag-login-body .wp-pwd .wp-hide-pw {
	position: absolute !important;
	right: 4px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	width: 34px !important;
	height: 34px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	color: var(--ag-text-muted) !important;
	cursor: pointer;
	box-shadow: none !important;
	border-radius: var(--ag-radius-sm) !important;
}

body.ag-login-body .wp-pwd .wp-hide-pw:hover {
	color: var(--ag-accent) !important;
	background: var(--ag-bg) !important;
}

body.ag-login-body .wp-pwd .wp-hide-pw:focus {
	outline: none !important;
	box-shadow: none !important;
}

body.ag-login-body .wp-pwd .wp-hide-pw .dashicons {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	top: 0 !important;
	position: static !important;
	font-size: 18px !important;
	line-height: 1 !important;
	font-family: "bootstrap-icons" !important; /* swap dashicons → Bootstrap Icons */
}

/* WP toggle entre dashicons-visibility (œil) et dashicons-hidden (œil barré) au clic. */
body.ag-login-body .wp-pwd .wp-hide-pw .dashicons-visibility::before {
	content: "\f341" !important; /* bi-eye */
}

body.ag-login-body .wp-pwd .wp-hide-pw .dashicons-hidden::before {
	content: "\f340" !important; /* bi-eye-slash */
}

/* "Mot de passe oublié ?" sous le champ password, aligné à droite */
body.ag-login-body .ag-login-lostpw {
	margin: 6px 0 0 !important;
	text-align: right;
	line-height: 1;
}

body.ag-login-body .ag-login-lostpw-link {
	font-size: 12px;
	color: var(--ag-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

body.ag-login-body .ag-login-lostpw-link:hover { color: var(--ag-accent); }

/* Checkbox "Se souvenir de moi" — bien alignée verticalement avec le label */
body.ag-login-body .forgetmenot {
	font-size: 13px;
	color: var(--ag-text-muted);
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
}

body.ag-login-body .forgetmenot label {
	display: inline-flex;
	align-items: center;
	margin: 0 !important; /* override #loginform label { margin-bottom: 6px } plus spécifique */
	color: inherit;
	font-weight: 400;
	line-height: 1;
}

/* Checkbox custom — design moderne carré arrondi accent. */
body.ag-login-body .forgetmenot input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	margin: 0 !important;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--ag-border-strong);
	border-radius: 5px;
	background: var(--ag-surface);
	cursor: pointer;
	flex-shrink: 0;
	box-sizing: border-box;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

body.ag-login-body .forgetmenot input[type="checkbox"]:hover {
	border-color: var(--ag-accent);
}

body.ag-login-body .forgetmenot input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ag-accent-soft);
}

body.ag-login-body .forgetmenot input[type="checkbox"]:checked {
	border-color: var(--ag-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23175298' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px 12px;
	background-position: center;
	background-repeat: no-repeat;
}

/* ─── Boutons (primaire = Se connecter, secondaire = Inscription) ───── */
body.ag-login-body .submit,
body.ag-login-body p.submit { margin-top: 20px !important; }

/* Register + lostpassword : margin top ET bottom à 0 → l'espace entre primary et
   secondary est entièrement géré par .ag-login-register-btn { margin-top }, comme sur login. */
body.ag-login-body #loginform p.submit       { margin-bottom: 0 !important; }
body.ag-login-body #registerform p.submit    { margin: 0 !important; }
body.ag-login-body #lostpasswordform p.submit { margin: 0 !important; }

body.ag-login-body #login input[type="submit"],
body.ag-login-body #login .button-primary {
	width: 100% !important;
	height: 42px !important;
	padding: 0 20px !important;
	font-size: 14px;
	font-weight: 600;
	font-family: var(--ag-font);
	color: #fff;
	background: var(--ag-accent);
	border: none !important;
	border-radius: var(--ag-radius-sm);
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	box-sizing: border-box !important; /* sans ça, width: 100% + padding fait déborder hors de la card */
	float: none !important; /* WP login.css applique parfois float: right sur .button-primary */
	transition: background-color 0.15s ease, transform 0.05s ease;
}

body.ag-login-body #login input[type="submit"]:hover,
body.ag-login-body #login .button-primary:hover {
	background-color: color-mix(in srgb, var(--ag-accent), black 18%) !important;
	box-shadow: var(--ag-shadow-hover) !important;
}

body.ag-login-body input[type="submit"]:active,
body.ag-login-body .button-primary:active { transform: translateY(1px); }

body.ag-login-body #login input[type="submit"]:focus,
body.ag-login-body #login .button-primary:focus {
	background-color: color-mix(in srgb, var(--ag-accent), black 18%) !important;
	outline: none;
	box-shadow: 0 0 0 3px var(--ag-accent-soft) !important;
}

body.ag-login-body.wp-core-ui #login .button-primary { margin-bottom: 5px; }
body.ag-login-body.wp-core-ui #loginform .button-primary { margin-bottom: 0; }
body.ag-login-body.wp-core-ui #registerform .button-primary { margin: 0 !important; }
body.ag-login-body.wp-core-ui #lostpasswordform .button-primary { margin: 0 !important; }

/* Bouton Inscription (secondaire) injecté par JS sous le primaire */
body.ag-login-body .ag-login-register {
	display: block;
	margin: 0 !important;
	padding: 0;
}

body.ag-login-body .ag-login-register-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 42px;
	margin-top: 5px !important; /* marge directement sur le bouton, contourne toute collapse */
	padding: 0 20px;
	font-size: 14px;
	font-weight: 600;
	font-family: var(--ag-font);
	color: var(--ag-accent);
	background: var(--ag-surface);
	border: 1px solid var(--ag-border-strong);
	border-radius: var(--ag-radius-sm);
	text-decoration: none;
	box-sizing: border-box;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

body.ag-login-body .ag-login-register-btn:hover {
	background: var(--ag-accent-soft);
	border-color: var(--ag-accent);
	color: var(--ag-accent);
	box-shadow: var(--ag-shadow-hover);
}

/* ─── Messages & erreurs ─────────────────────────────────────────────── */
/* Layout commun à toutes les alertes (danger/info/success). */
body.ag-login-body #login_error,
body.ag-login-body .message,
body.ag-login-body .notice,
body.ag-login-body .notice-success {
	border-width: 1px;
	border-style: solid;
	border-radius: var(--ag-radius-sm);
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.5;
	box-shadow: none;
}

/* Danger (erreur d'authentification, etc.) */
body.ag-login-body #login_error,
body.ag-login-body .notice {
	background: var(--ag-danger-soft);
	border-color: #fecaca;
	color: #991b1b;
}

/* Info (ex: « email envoyé », instructions) */
body.ag-login-body .message {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: #1e40af;
}

/* Succès */
body.ag-login-body .notice-success {
	background: var(--ag-success-soft);
	border-color: #a7f3d0;
	color: #065f46;
}

/* ─── Lien "Aller sur …" en bas, très discret ────────────────────────── */
body.ag-login-body #backtoblog {
	margin: 16px 0 0;
	padding: 0;
	text-align: center;
	font-size: 12px;
	color: var(--ag-text-soft);
	text-shadow: none;
}

body.ag-login-body #backtoblog a {
	color: var(--ag-text-soft);
	text-decoration: none;
	transition: color 0.15s ease;
}

body.ag-login-body #backtoblog a:hover { color: var(--ag-accent); }

/* Le #nav natif est vidé par le JS et supprimé — on le cache au cas où */
body.ag-login-body #nav { display: none; }

/* Cachés sur la page d'inscription : note d'instruction et message d'accueil natifs WP */
body.ag-login-body #reg_passmail,
body.ag-login-body p.message.register { display: none; }

/* ─── Sélecteur de langue (haut droite) — style identique au header ─── */
body.ag-login-body .ag-lang {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 50;
}

body.ag-login-body .ag-lang-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 12px 0 14px;
	border-radius: var(--ag-radius-pill);
	background: var(--ag-surface);
	color: var(--ag-text);
	border: 1px solid var(--ag-border-strong);
	box-shadow: var(--ag-shadow);
	font-size: 13px;
	font-weight: 600;
	font-family: var(--ag-font);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.ag-login-body .ag-lang-btn:hover {
	border-color: var(--ag-accent);
	box-shadow: var(--ag-shadow-hover);
}

body.ag-login-body .ag-lang-btn .code {
	letter-spacing: 0.03em;
	text-transform: uppercase;
	font-size: 12.5px;
}

body.ag-login-body .ag-lang-btn .chev {
	font-size: 11px;
	color: var(--ag-text-soft);
	font-style: normal;
}

body.ag-login-body .ag-lang-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 180px;
	background: var(--ag-surface);
	border: 1px solid var(--ag-border);
	border-radius: var(--ag-radius);
	box-shadow: var(--ag-shadow-dropdown);
	padding: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: all 0.15s ease;
}

body.ag-login-body .ag-lang.is-open .ag-lang-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

body.ag-login-body .ag-lang-dropdown a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	color: var(--ag-text);
	text-decoration: none;
	border-radius: var(--ag-radius-sm);
	font-size: 13.5px;
	font-weight: 500;
}

body.ag-login-body .ag-lang-dropdown a:hover { background: var(--ag-bg); }

body.ag-login-body .ag-lang-dropdown a.is-active {
	color: var(--ag-accent);
	font-weight: 600;
}

body.ag-login-body .ag-flag {
	width: 18px;
	height: 12px;
	display: inline-block;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 2px;
	vertical-align: middle;
}

/* ─── Plugins tiers (Wordfence, 2FA, Turnstile…) ─────────────────────── */
body.ag-login-body .cf-turnstile,
body.ag-login-body .g-recaptcha,
body.ag-login-body iframe[src*="turnstile"],
body.ag-login-body iframe[src*="recaptcha"] {
	margin: 10px auto !important;
	display: flex;
	justify-content: center;
}

body.ag-login-body .wf-2fa-otp,
body.ag-login-body .two-factor-prompt { font-size: 14px; }

/* Popup 2FA Wordfence : aligner sur le radius de la card */
body.ag-login-body #wfls-prompt-overlay { border-radius: var(--ag-radius); }

/* ─── Bandeaux parasites ─────────────────────────────────────────────── */
/* WPML / WP natif injectent leurs propres sélecteurs de langue sur wp-login.php.
   On les cache largement — le JS les supprime du DOM en complément. */
body.ag-login-body #wpadminbar,
body.ag-login-body .wpml-admin-edit-language,
body.ag-login-body .wpml_floating_lang_switcher,
body.ag-login-body .wpml-login-ls,
body.ag-login-body .language-switcher,
body.ag-login-body #language-switcher,
body.ag-login-body form.language-switcher,
body.ag-login-body [class*="wpml-ls"],
body.ag-login-body [class*="wpml-login"],
body.ag-login-body [id*="wpml-ls"],
body.ag-login-body [id*="wpml-login"],
body.ag-login-body [class*="language-switcher"]:not(.ag-lang):not(.ag-lang *),
body.ag-login-body [id*="language-switcher"]:not(.ag-lang),
body.ag-login-body form[action*="wp-login"]:not(#loginform):not(#registerform):not(#lostpasswordform):not(#resetpassform) { display: none !important; }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	body.ag-login-body #login { padding: 16px; }
	body.ag-login-body #loginform,
	body.ag-login-body #registerform,
	body.ag-login-body #lostpasswordform,
	body.ag-login-body #resetpassform { padding: 22px; }
	body.ag-login-body #login h1 { margin-bottom: 32px; }
	body.ag-login-body #login h1 a { width: 230px; height: 52px; }
	body.ag-login-body .ag-lang { top: 12px; right: 12px; }
}