/* ==========================================================================
   DROIX — wp-login.php light branded lock screen.
   Maps WordPress's native login DOM onto the handoff .wp-* light spec.
   Self-contained: token values are flattened literally (droix-tokens is not
   loaded on wp-login.php). Light DROIX: green = action/CTA + "store admin" badge.
   ========================================================================== */

body.login {
	background:
		radial-gradient(120% 90% at 50% -10%, #F3F8DC, transparent 55%),
		#F8F8F8;
	color: #242421;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#login {
	width: 384px;
	max-width: 92vw;
	padding: 6% 0 40px;
}

/* ── Brand: DROIX logo + "Store administration" badge (injected via login_message) ── */
#login h1 { display: none; } /* native WP logo hidden — we supply our own */

.droix-login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 0 22px; }
.droix-login-brand .droix-login-logo { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.droix-login-brand .droix-login-logo img { height: 40px; width: auto; }
.droix-login-brand .droix-login-badge {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px;
	font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	line-height: 1; white-space: nowrap; vertical-align: middle;
	color: #74A401; background: #F3F8DC; border: 1px solid rgba(176,203,31,.35);
	border-radius: 999px; padding: 6px 13px;
}
.droix-login-brand .droix-login-badge svg { width: 14px; height: 14px; }

/* ── Form card ── */
#loginform,
#lostpasswordform,
#registerform,
#resetpassform {
	background: #fff;
	border: 1px solid #F0F0F0;
	box-shadow: 0 8px 24px rgba(38,38,38,.08), 0 2px 6px rgba(38,38,38,.04);
	border-radius: 20px;
	padding: 28px 26px 30px;
	margin-top: 0;
}
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: #fff;
	border: 1px solid #D9D9D9;
	color: #0B0B0B;
	border-radius: 12px;
	height: 48px;
	font-size: 15px;
	padding: 0 12px;
	margin: 0 0 18px;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .15s ease;
}
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: #B0CB1F;
	box-shadow: 0 0 0 3px #F3F8DC;
	outline: none;
}
.login form .input::placeholder { color: #AAAAAA; }

.login label { color: #484848; font-size: 13px; font-weight: 600; }

/* password show/hide */
.login .wp-pwd { position: relative; }
.login .wp-pwd .button.wp-hide-pw { background: transparent; border: 0; color: #999; height: 48px; top: 0; }
.login .wp-pwd .button.wp-hide-pw:hover { color: #0B0B0B; }
.login .wp-pwd .button.wp-hide-pw .dashicons { font-size: 20px; }

/* remember me */
.login .forgetmenot label { color: #484848; font-size: 13px; }
.login input[type="checkbox"] { accent-color: #B0CB1F; }
.login input[type="checkbox"]:focus { border-color: #B0CB1F; box-shadow: 0 0 0 3px #F3F8DC; outline: none; }

/* Cloudflare Turnstile */
.login .cf-turnstile,
.login .cf-turnstile > div,
.login iframe[src*="challenges.cloudflare.com"] {
	margin-left: auto;
	margin-right: auto;
}
.login .cf-turnstile {
	display: flex;
	justify-content: center;
	max-width: 100%;
}

/* submit button */
.login .button-primary,
.login #wp-submit {
	background: #B0CB1F;
	border-color: #B0CB1F;
	color: #1c2400;
	border-radius: 14px;
	font-weight: 700;
	font-size: 15px;
	padding: 11px 22px;
	height: auto;
	line-height: 1.3;
	text-shadow: none;
	box-shadow: 0 8px 20px rgba(176,203,31,.35);
	transition: background .2s ease, color .2s ease, transform .15s ease;
}
.login .button-primary:hover,
.login #wp-submit:hover {
	background: #74A401;
	border-color: #74A401;
	color: #fff;
	transform: translateY(-1px);
}
.login .button-primary:focus,
.login #wp-submit:focus { box-shadow: 0 0 0 3px rgba(176,203,31,.45); }

/* footer links */
#login #nav,
#login #backtoblog { text-align: center; padding: 0 24px; }
#login #nav a,
#login #backtoblog a,
.login .privacy-policy-page-link a { color: #666; transition: color .15s ease; }
#login #nav a:hover,
#login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover { color: #74A401; }

/* messages / errors — light panels */
.login #login_error,
.login .message,
.login .notice,
.login .success {
	background: #fff;
	border-left: 4px solid #D9D9D9;
	box-shadow: 0 8px 24px rgba(38,38,38,.08);
	color: #242421;
	border-radius: 12px;
}
.login #login_error { border-left-color: #DC3545; }
.login .message,
.login .success { border-left-color: #74A401; }
.login #login_error a,
.login .message a { color: #74A401; }

/* language switcher (if present) */
.login .language-switcher { margin-top: 18px; }
.login .language-switcher select { background: #fff; border: 1px solid #D9D9D9; color: #484848; border-radius: 8px; }

/* ── Wordfence Login Security: 2FA step ──────────────────────────────────
   After the password step, Wordfence appends #wfls-prompt-overlay over
   #loginform. Keep it on the light card so our light labels/inputs read. */
.login #wfls-prompt-overlay { background-color: #fff; border-radius: 20px; }
.login #wfls-prompt-wrapper label,
.login #wfls-prompt-wrapper label[for="wfls-token"],
.login .wfls-remember-device-wrapper label { color: #484848; }
.login #wfls-prompt-wrapper #wfls-token {
	background: #fff;
	border: 1px solid #D9D9D9;
	color: #0B0B0B;
	border-radius: 12px;
}
.login #wfls-prompt-wrapper #wfls-token:focus {
	border-color: #B0CB1F;
	box-shadow: 0 0 0 3px #F3F8DC;
	outline: none;
}
/* "?" help icon → DROIX green accent instead of admin blue */
.login .wfls-2fa-code-help .dashicons { color: #74A401; }
.login .wfls-2fa-code-help:hover .dashicons { color: #B0CB1F; }