/* Futuristic login/register styling (wp-login.php)
   Scoped to .login body to avoid wp-admin side effects.
*/

:root{
	--qrzcb-bg:#070b12;
	--qrzcb-panel:#0b1220;
	--qrzcb-panel-2:#0f172a;
	--qrzcb-border:rgba(255,255,255,.10);
	--qrzcb-border-2:rgba(255,255,255,.06);
	--qrzcb-text:#e5e7eb;
	--qrzcb-text-dim:#94a3b8;
	--qrzcb-accent:#60a5fa;
	--qrzcb-accent-2:#22d3ee;
	--qrzcb-glow:
		0 0 0 1px rgba(96,165,250,.18),
		0 0 46px rgba(34,211,238,.16);
	--qrzcb-glow-strong:
		0 0 0 1px rgba(34,211,238,.20),
		0 0 0 2px rgba(96,165,250,.10),
		0 0 46px rgba(34,211,238,.22),
		0 0 90px rgba(96,165,250,.18);
}

body.login{
	background:
		linear-gradient(180deg, rgba(7,11,18,.96), rgba(7,11,18,.96)),
		radial-gradient(920px 420px at 15% 10%, rgba(96,165,250,.22), transparent 62%),
		radial-gradient(820px 420px at 85% 10%, rgba(34,211,238,.18), transparent 62%),
		radial-gradient(980px 620px at 50% 120%, rgba(168,85,247,.12), transparent 60%);
	color: var(--qrzcb-text);
	min-height: 100vh;
	overflow-y: auto;
}

body.login #login{
	padding: 0;
	width: min(420px, calc(100vw - 28px));
}

/* On some setups a wrapper forces fixed heights; ensure the page can grow */
body.login .ml-container,
body.login .ml-form-container,
body.login #login{
	height: auto !important;
	max-height: none !important;
}

/* Logo */
body.login .wp-login-logo a,
body.login h1 a{
	filter: drop-shadow(0 10px 26px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(34,211,238,.16));
}

/* Glass container (forms are used for login/register/lost password) */
body.login #loginform,
body.login #registerform,
body.login #lostpasswordform{
	background: linear-gradient(180deg, rgba(11,18,32,.92), rgba(7,11,18,.96)) !important;
	border: 1px solid rgba(34,211,238,.22) !important;
	border-radius: 18px !important;
	box-shadow: 0 30px 90px rgba(0,0,0,.70), var(--qrzcb-glow-strong) !important;
	backdrop-filter: blur(10px) saturate(1.2);
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}

body.login #loginform::after,
body.login #registerform::after,
body.login #lostpasswordform::after{
	content:"";
	position:absolute;
	inset:-2px;
	border-radius: 18px;
	pointer-events:none;
	background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 9px);
	opacity: .14;
}

body.login form{
	position: relative;
}

/* Make notices tighter + less tall */
body.login .notice.notice-info.message.register,
body.login .message.register,
body.login .notice,
body.login .message{
	margin: 8px 0 !important;
	padding: 10px 12px !important;
	line-height: 1.35;
}

body.login .notice + .notice,
body.login .notice + .message,
body.login .message + .notice,
body.login .message + .message{
	margin-top: 6px !important;
}

/* Reduce default paragraph spacing on wp-login */
body.login #login p{margin: 10px 0;}
body.login #loginform p,
body.login #registerform p,
body.login #lostpasswordform p{margin: 10px 0;}

/* Labels + messages */
body.login label{
	color: rgba(229,231,235,.92) !important;
	font-weight: 700;
	letter-spacing: .02em;
}

body.login .message,
body.login .notice{
	border-left: 0 !important;
	border: 1px solid rgba(34,211,238,.22) !important;
	background: rgba(34,211,238,.08) !important;
	color: rgba(229,231,235,.92) !important;
	border-radius: 14px;
	box-shadow: 0 16px 60px rgba(0,0,0,.55), var(--qrzcb-glow);
}

body.login .message a,
body.login .notice a{
	color: rgba(34,211,238,.92) !important;
}

/* Inputs */
body.login input[type=text],
body.login input[type=password],
body.login input[type=email],
body.login input[type=number],
body.login input[type=tel],
body.login input[type=url],
body.login textarea,
body.login select{
	background: rgba(7,11,18,.55) !important;
	border: 1px solid rgba(255,255,255,.10) !important;
	border-radius: 12px !important;
	color: rgba(229,231,235,.92) !important;
	box-shadow: none !important;
}

body.login input:focus,
body.login textarea:focus,
body.login select:focus{
	border-color: rgba(34,211,238,.55) !important;
	box-shadow: 0 0 0 3px rgba(34,211,238,.12) !important;
	outline: none !important;
}

/* Primary button */
body.login .wp-core-ui .button-primary{
	border: 1px solid rgba(34,211,238,.42) !important;
	border-radius: 999px !important;
	background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(96,165,250,.12)) !important;
	color: rgba(229,231,235,.95) !important;
	text-shadow: 0 0 14px rgba(34,211,238,.12);
	box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(96,165,250,.10), 0 0 44px rgba(34,211,238,.14) !important;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding-inline: 18px;
}
body.login .wp-core-ui .button-primary:hover{
	border-color: rgba(34,211,238,.60) !important;
	filter: brightness(1.06);
}

/* Secondary links */
body.login #nav a,
body.login #backtoblog a{
	color: rgba(148,163,184,.92) !important;
	text-decoration: none;
}
body.login #nav a:hover,
body.login #backtoblog a:hover{
	color: rgba(34,211,238,.92) !important;
	text-decoration: underline;
}

/* Register link/button-like (covers your existing selector too) */
body.login #nav a[href*="register"],
body.login #wp-login-register,
body.login #register-link-label{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid rgba(96,165,250,.42) !important;
	background: linear-gradient(180deg, rgba(96,165,250,.18), rgba(34,211,238,.10)) !important;
	color: rgba(229,231,235,.95) !important;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none !important;
	box-shadow: 0 12px 30px rgba(0,0,0,.38), 0 0 34px rgba(96,165,250,.12);
}
body.login #nav a[href*="register"]:hover,
body.login #wp-login-register:hover,
body.login #register-link-label:hover{
	border-color: rgba(34,211,238,.55) !important;
	box-shadow: 0 14px 36px rgba(0,0,0,.44), 0 0 46px rgba(34,211,238,.12);
}

/* Leaflet map in registration form */
body.login #custom-users-register-map{
	border: 1px solid rgba(34,211,238,.22) !important;
	border-radius: 14px !important;
	overflow: hidden;
	box-shadow: 0 16px 60px rgba(0,0,0,.65), var(--qrzcb-glow);
}

@media (max-width: 480px){
	body.login #login{
		width: calc(100vw - 20px);
	}
}