/* MK Login Style 1.0.0 — learnenglish4.fun login screens */

:root {
	--mkls-green: #00A57C;
	--mkls-green-dark: #008F6B;
	--mkls-blue: #4594E1;
	--mkls-board: #2F4A3A;
	--mkls-wood: #B98B57;
	--mkls-he-accent: #F2B33D;
	--mkls-border: #C9D3DC;
	--mkls-text: #444444;
	--mkls-muted: #666666;
	--mkls-page: #8EDC7E;
}

.mkls-hidden { display: none !important; }
.mkls-hide-hg a[href*="hostgator.com"] { display: none !important; }

/* ---------- Card ---------- */

.mkls-ctx-uncanny .ult-box,
.mkls-ctx-woo form.woocommerce-form-login,
body.mkls-core #login {
	box-sizing: border-box;
	width: 100%;
	max-width: 420px;
	margin: 24px auto !important;
	padding: 0 0 22px !important;
	background: #ffffff !important;
	border: 1px solid #DFE5EA !important;
	border-radius: 12px !important;
	box-shadow: 0 6px 18px rgba(47, 74, 58, 0.10) !important;
	overflow: hidden;
	font-family: Roboto, Arial, sans-serif;
	color: var(--mkls-text);
}

.mkls-ctx-uncanny .ult-box > *:not(.mkls-header-wrap),
.mkls-ctx-woo form.woocommerce-form-login > *:not(.mkls-header-wrap),
body.mkls-core #login > *:not(.mkls-header-wrap) {
	margin-left: 24px !important;
	margin-right: 24px !important;
}

/* ---------- Chalkboard header ---------- */

.mkls-header-wrap { margin: 0 0 16px !important; padding: 0 !important; }

.mkls-header {
	background: var(--mkls-board);
	border-bottom: 8px solid var(--mkls-wood);
	padding: 20px 24px 16px;
	text-align: center;
}

.mkls-welcome {
	font-family: 'Indie Flower', cursive;
	color: #ffffff;
	font-size: 32px;
	line-height: 1.15;
}

.mkls-welcome-he {
	font-family: Rubik, Arial, sans-serif;
	color: var(--mkls-he-accent);
	font-size: 21px;
	font-weight: 500;
	line-height: 1.3;
	margin-top: 4px;
}

.mkls-tagline {
	margin: 14px 24px 0 !important;
	padding: 0 !important;
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mkls-muted);
}

.mkls-tagline span { display: block; }
.mkls-tagline .mkls-he { font-family: Rubik, Arial, sans-serif; }

/* ---------- Fields ---------- */

.mkls-ctx-uncanny .ult-box label,
.mkls-ctx-woo form.woocommerce-form-login label,
body.mkls-core #login label {
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--mkls-text) !important;
}

.mkls-ctx-uncanny .ult-box input[type="text"],
.mkls-ctx-uncanny .ult-box input[type="email"],
.mkls-ctx-uncanny .ult-box input[type="password"],
.mkls-ctx-woo form.woocommerce-form-login input[type="text"],
.mkls-ctx-woo form.woocommerce-form-login input[type="email"],
.mkls-ctx-woo form.woocommerce-form-login input[type="password"],
body.mkls-core #login input[type="text"],
body.mkls-core #login input[type="email"],
body.mkls-core #login input[type="password"] {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	margin: 4px 0 12px !important;
	padding: 0 12px !important;
	background: #ffffff !important;
	border: 1.5px solid var(--mkls-border) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	color: #222222 !important;
	font-size: 16px !important; /* 16px stops iOS zooming into the field */
	line-height: 1.2 !important;
}

.mkls-ctx-uncanny .ult-box input[type="password"],
.mkls-ctx-woo form.woocommerce-form-login input[type="password"],
body.mkls-core #login input[type="password"] {
	padding-right: 44px !important;
}

.mkls-ctx-uncanny .ult-box input:focus,
.mkls-ctx-woo form.woocommerce-form-login input:focus,
body.mkls-core #login input:focus {
	border-color: var(--mkls-green) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(0, 165, 124, 0.18) !important;
}

.mkls-ctx-uncanny .ult-box input[type="checkbox"],
.mkls-ctx-woo form.woocommerce-form-login input[type="checkbox"],
body.mkls-core #login input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--mkls-green);
	vertical-align: middle;
	margin: 0 6px 0 0;
}

/* ---------- Button ---------- */

.mkls-ctx-uncanny .ult-box [type="submit"],
.mkls-ctx-woo form.woocommerce-form-login [type="submit"],
body.mkls-core #login [type="submit"] {
	display: block !important;
	float: none !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: auto !important;
	min-height: 46px !important;
	margin: 10px 0 0 !important;
	padding: 12px 16px !important;
	background: var(--mkls-green) !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15) !important;
	text-shadow: none !important;
	font-family: Roboto, Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.mkls-ctx-uncanny .ult-box [type="submit"]:hover,
.mkls-ctx-woo form.woocommerce-form-login [type="submit"]:hover,
body.mkls-core #login [type="submit"]:hover {
	background: var(--mkls-green-dark) !important;
}

.mkls-ctx-uncanny .ult-box [type="submit"]:active,
.mkls-ctx-woo form.woocommerce-form-login [type="submit"]:active,
body.mkls-core #login [type="submit"]:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) !important;
}

/* ---------- Links ---------- */

.mkls-ctx-uncanny .ult-box a,
.mkls-ctx-woo form.woocommerce-form-login a,
body.mkls-core #login a {
	color: var(--mkls-blue) !important;
	text-decoration: none;
}

.mkls-ctx-uncanny .ult-box a:hover,
.mkls-ctx-woo form.woocommerce-form-login a:hover,
body.mkls-core #login a:hover {
	text-decoration: underline;
}

.mkls-footer {
	margin-top: 14px !important;
	padding-top: 14px;
	border-top: 1px solid #E6EBEF;
	text-align: center;
	font-size: 14px;
}

/* ---------- Cloudflare Turnstile ---------- */

.mkls-ctx-woo form.woocommerce-form-login .cf-turnstile,
.mkls-ctx-uncanny .ult-box .cf-turnstile,
body.mkls-core #login .cf-turnstile {
	min-width: 300px;
	margin: 4px 0 12px;
}

/* ---------- WooCommerce specifics ---------- */

.mkls-ctx-woo h2:has(+ form.woocommerce-form-login) { display: none; }

.mkls-ctx-woo form.woocommerce-form-login .woocommerce-form-login__rememberme {
	display: block;
	margin: 0 0 4px;
}

.mkls-ctx-woo form.woocommerce-form-login .lost_password {
	text-align: center;
	margin-top: 14px !important;
	margin-bottom: 0 !important;
}

/* ---------- Core wp-login.php specifics ---------- */

body.mkls-core { background: var(--mkls-page) !important; }

body.mkls-core #login { width: min(420px, 92vw); margin-top: 6vh !important; }

body.mkls-core #login h1 { display: none !important; }

body.mkls-core #loginform,
body.mkls-core #lostpasswordform,
body.mkls-core #resetpassform,
body.mkls-core #registerform {
	margin-top: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.mkls-core #login .message,
body.mkls-core #login .notice,
body.mkls-core #login_error {
	border-radius: 8px;
	box-shadow: none;
}

body.mkls-core #nav,
body.mkls-core #backtoblog {
	margin-top: 14px !important;
	padding: 0 !important;
	text-align: center;
	font-size: 14px;
}

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
	.mkls-ctx-uncanny .ult-box,
	.mkls-ctx-woo form.woocommerce-form-login,
	body.mkls-core #login {
		margin: 12px auto !important;
		border-radius: 10px !important;
	}
	.mkls-ctx-uncanny .ult-box > *:not(.mkls-header-wrap),
	.mkls-ctx-woo form.woocommerce-form-login > *:not(.mkls-header-wrap),
	body.mkls-core #login > *:not(.mkls-header-wrap) {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}
	.mkls-tagline { margin-left: 16px !important; margin-right: 16px !important; }
	.mkls-welcome { font-size: 28px; }
	.mkls-welcome-he { font-size: 19px; }
}

@media (max-width: 360px) {
	.mkls-ctx-uncanny .ult-box > *:not(.mkls-header-wrap),
	.mkls-ctx-woo form.woocommerce-form-login > *:not(.mkls-header-wrap),
	body.mkls-core #login > *:not(.mkls-header-wrap) {
		margin-left: 10px !important;
		margin-right: 10px !important;
	}
}