/*
 * Vitalink Mesotech Skin — Login screen
 * Colours/fonts from the shared :root variables in brand.css.
 */

.vlk-login-body {
	margin: 0;
	font-family: var(--vlk-font);
	background: var(--vlk-offwhite);
	color: var(--vlk-text);
}

/* hide the admin bar on the standalone login screen */
.vlk-login-body #wpadminbar { display: none; }
html { margin-top: 0 !important; }

.vlk-login-wrap {
	display: flex;
	min-height: 100vh;
	min-height: 100dvh;
}

/* ---------- Brand panel (right side in RTL) ---------- */
.vlk-login-brand {
	flex: 1 1 46%;
	background: linear-gradient(160deg, var(--vlk-blue) 0%, var(--vlk-blue-dark) 100%);
	color: var(--vlk-text-on-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px;
}
.vlk-login-brand-inner {
	max-width: 420px;
	text-align: center;
}
.vlk-login-brand .vlk-logo svg {
	width: 120px;
	height: auto;
	color: var(--vlk-text-on-blue);
	margin-bottom: 28px;
}
.vlk-login-brand h1 {
	font-size: 1.8rem;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--vlk-text-on-blue);
}
.vlk-login-brand p {
	font-size: 1.05rem;
	line-height: 1.9;
	opacity: .92;
	margin: 0;
}

/* ---------- Form card (left side in RTL) ---------- */
.vlk-login-card {
	flex: 1 1 54%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
}
.vlk-login-card-inner {
	width: 100%;
	max-width: 400px;
}
.vlk-login-logo-mobile { display: none; }
.vlk-login-logo-mobile .vlk-logo svg {
	width: 84px;
	height: auto;
	color: var(--vlk-blue);
}
.vlk-login-card h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--vlk-blue-dark);
	margin: 0 0 24px;
}

.vlk-login-error {
	background: #fdecec;
	border: 1px solid #f5c2c2;
	color: #a12626;
	border-radius: var(--vlk-radius);
	padding: 12px 16px;
	margin-bottom: 18px;
	font-size: .95rem;
}
.vlk-login-error a { color: var(--vlk-blue); }

.vlk-field {
	display: block;
	margin-bottom: 18px;
}
.vlk-field > span {
	display: block;
	font-size: .92rem;
	font-weight: 500;
	margin-bottom: 8px;
	color: var(--vlk-text);
}
.vlk-field input[type="text"],
.vlk-field input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px;
	border: 1px solid var(--vlk-border);
	border-radius: var(--vlk-radius);
	font-family: var(--vlk-font);
	font-size: 1rem;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.vlk-field input:focus {
	outline: none;
	border-color: var(--vlk-blue);
	box-shadow: 0 0 0 3px var(--vlk-blue-light);
}

/* password field with show/hide toggle */
.vlk-pass {
	position: relative;
	display: block;
}
.vlk-pass input {
	padding-inline-start: 48px !important;
}
.vlk-pass-toggle {
	position: absolute;
	inset-inline-start: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: none;
	background: transparent;
	color: #8a97a3;
	cursor: pointer;
	border-radius: 6px;
}
.vlk-pass-toggle:hover { color: var(--vlk-blue); }
.vlk-pass-toggle.is-on { color: var(--vlk-blue); }

.vlk-login-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 24px;
	font-size: .9rem;
}
.vlk-remember {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--vlk-text-muted);
}
.vlk-link {
	color: var(--vlk-blue);
	text-decoration: none;
}
.vlk-link:hover { text-decoration: underline; }

.vlk-login-btn {
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: var(--vlk-radius);
	background: var(--vlk-blue);
	color: #fff;
	font-family: var(--vlk-font);
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease;
}
.vlk-login-btn:hover { background: var(--vlk-blue-dark); }

.vlk-signup-line {
	text-align: center;
	margin: 22px 0 0;
	font-size: .95rem;
	color: var(--vlk-text-muted);
}

/* ---------- Responsive: stack on mobile ---------- */
@media (max-width: 880px) {
	.vlk-login-wrap { flex-direction: column; }
	.vlk-login-brand {
		flex: none;
		padding: 36px 24px;
	}
	.vlk-login-brand .vlk-logo svg { width: 86px; margin-bottom: 18px; }
	.vlk-login-brand h1 { font-size: 1.45rem; }
	.vlk-login-brand p { font-size: .98rem; }
	.vlk-login-card { padding: 32px 22px 48px; }
}

/* very small screens: hide big brand panel text, show compact logo above form */
@media (max-width: 520px) {
	.vlk-login-brand { display: none; }
	.vlk-login-logo-mobile {
		display: flex;
		justify-content: center;
		margin-bottom: 18px;
	}
}