/* Bewind Portal - Login branding */

/* Base */
body.login{
	--bg:#050914;
	--card:rgba(255,255,255,.06);
	--border:rgba(255,255,255,.14);
	--text:#e8eefc;
	--muted:#b6c3e6;
	--primary:#6ee7ff;
	--primary2:#8b5cf6;
	background:
		radial-gradient(1200px 600px at 20% -10%, rgba(110,231,255,.18), transparent 55%),
		radial-gradient(900px 500px at 110% 20%, rgba(139,92,246,.16), transparent 55%),
		var(--bg);
	color:var(--text);
}

/* Center card */
.login #login{
	width: 380px;
	padding: 60px 0 40px;
}

.login form,
.login .message,
.login .success,
.login #login_error{
	border: 1px solid var(--border);
	border-radius: 18px;
	background: var(--card);
	box-shadow: 0 18px 60px rgba(0,0,0,.40);
}

.login form{
	padding: 22px 22px 18px;
}

/* Logo -> simple badge */
.login h1 a{
	background-image: none !important;
	width: auto;
	height: auto;
	text-indent: 0;
	font-size: 18px;
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: .01em;
	color: var(--text);
	margin: 0 auto 18px;
	padding: 14px 18px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(139,92,246,.18));
	box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.login h1 a:focus{ box-shadow: 0 0 0 3px rgba(110,231,255,.25); outline: none; }

/* Labels + inputs */
.login label{ color: var(--muted) !important; font-weight: 700; }

.login form .input,
.login input[type=text],
.login input[type=password]{
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.18);
	background: rgba(0,0,0,.22);
	color: var(--text);
	padding: 12px 12px;
	box-shadow: none;
}

.login form .input:focus,
.login input[type=text]:focus,
.login input[type=password]:focus{
	border-color: rgba(110,231,255,.55);
	box-shadow: 0 0 0 4px rgba(110,231,255,.12);
	outline: none;
}

/* Buttons */
.login .button-primary{
	border: 0;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--primary), var(--primary2));
	color: #061022;
	font-weight: 800;
	text-shadow: none;
	box-shadow: 0 10px 24px rgba(0,0,0,.28);
	padding: 8px 14px;
	height: 42px;
}

.login .button-primary:hover,
.login .button-primary:focus{
	filter: brightness(1.04);
	box-shadow: 0 12px 28px rgba(0,0,0,.32);
}

.login .button-secondary,
.login .button{
	border-radius: 14px;
}

/* Links */
.login #nav a,
.login #backtoblog a{
	color: var(--muted) !important;
	text-decoration: none;
}

.login #nav a:hover,
.login #backtoblog a:hover{ color: var(--text) !important; }

/* Messages */
.login .message,
.login .success{
	color: var(--text);
	border-left: 4px solid rgba(110,231,255,.65);
}

.login #login_error{
	color: var(--text);
	border-left: 4px solid rgba(248,113,113,.8);
}

/* Reduce WP footer clutter spacing */
.login #nav, .login #backtoblog{ margin: 18px 0 0; }

@media (max-width: 420px){
	.login #login{ width: 92vw; }
}