/**
 * CHEK Login - Base stylesheet for wp-login.php
 *
 * Uses CSS custom properties that the Renderer injects inline based on
 * saved admin settings. This file only handles structure, spacing and
 * the bits that don't change per install.
 *
 * Scoped under body.chek-login so nothing bleeds into other screens.
 */

/*
 * Declare tokens at both :root and body.chek-login.
 * :root ensures the vars resolve even if the login_body_class filter is
 * stripped by a theme/plugin or during early render. body.chek-login is
 * where the renderer overrides with !important from saved settings.
 */
:root {
	--chek-blue: #3db5e6;
	--chek-blue-dark: #2a9cc9;
	--chek-black: #1d1d1b;
	--chek-grey: #6b6b6b;
	--chek-bg: #f5f7fa;
	--chek-card-bg: #ffffff;
	--chek-border: #e3e8ef;
	--chek-card-radius: 12px;
	--chek-input-radius: 8px;
	--chek-button-radius: 8px;
	--chek-font: 'soleil', 'Helvetica Neue', Arial, sans-serif;
}

body.chek-login {
	--chek-blue: #3db5e6;
	--chek-blue-dark: #2a9cc9;
	--chek-black: #1d1d1b;
	--chek-grey: #6b6b6b;
	--chek-bg: #f5f7fa;
	--chek-card-bg: #ffffff;
	--chek-border: #e3e8ef;
	--chek-card-radius: 12px;
	--chek-input-radius: 8px;
	--chek-button-radius: 8px;
	--chek-font: 'soleil', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Page background & font ---------- */
body.login.chek-login {
	font-family: var(--chek-font, 'soleil', 'Helvetica Neue', Arial, sans-serif) !important;
	color: var(--chek-black, #1d1d1b) !important;
}

body.chek-login,
body.chek-login a,
body.chek-login p,
body.chek-login label,
body.chek-login input {
	font-family: var(--chek-font, 'soleil', 'Helvetica Neue', Arial, sans-serif) !important;
}

/* ---------- Logo ---------- */
body.chek-login #login h1 a,
body.chek-login .login h1 a {
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	width: 220px !important;
	height: 80px !important;
	margin: 0 auto 20px !important;
	text-indent: -9999px !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ---------- Login card ---------- */
body.chek-login #login {
	width: 100% !important;
	max-width: 420px !important;
	padding: 6% 0 0 !important;
}

body.chek-login #loginform,
body.chek-login #registerform,
body.chek-login #lostpasswordform {
	background: var(--chek-card-bg, #ffffff) !important;
	border: 1px solid var(--chek-border, #e3e8ef) !important;
	border-radius: var(--chek-card-radius, 12px) !important;
	box-shadow: 0 8px 30px rgba( 29, 29, 27, 0.08 ) !important;
	padding: 32px 28px !important;
	margin-top: 8px !important;
}

/* ---------- Labels ---------- */
body.chek-login .login label {
	color: var(--chek-black, #1d1d1b) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.2px !important;
}

/* ---------- Inputs ---------- */
body.chek-login .login input[type="text"],
body.chek-login .login input[type="password"],
body.chek-login .login input[type="email"] {
	background: #fbfcfd !important;
	border: 1px solid var(--chek-border, #e3e8ef) !important;
	border-radius: var(--chek-input-radius, 8px) !important;
	box-shadow: none !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	color: var(--chek-black, #1d1d1b) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
	margin-top: 4px !important;
}

body.chek-login .login input[type="text"]:focus,
body.chek-login .login input[type="password"]:focus,
body.chek-login .login input[type="email"]:focus {
	border-color: var(--chek-blue, #3db5e6) !important;
	box-shadow: 0 0 0 3px rgba( 61, 181, 230, 0.18 ) !important;
	outline: none !important;
}

body.chek-login .login .wp-pwd button.wp-hide-pw {
	top: 50% !important;
	transform: translateY( -50% ) !important;
	color: var(--chek-grey, #6b6b6b) !important;
}

body.chek-login .login .wp-pwd button.wp-hide-pw:hover,
body.chek-login .login .wp-pwd button.wp-hide-pw:focus {
	color: var(--chek-blue, #3db5e6) !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* ---------- Remember me ---------- */
body.chek-login .login .forgetmenot label {
	font-weight: 500 !important;
	color: var(--chek-grey, #6b6b6b) !important;
	font-size: 13px !important;
}

body.chek-login .login input[type="checkbox"] {
	border: 1px solid var(--chek-border, #e3e8ef) !important;
	border-radius: 3px !important;
}

body.chek-login .login input[type="checkbox"]:checked::before {
	color: var(--chek-blue, #3db5e6) !important;
}

/* ---------- Submit button ---------- */
body.chek-login .login .button-primary,
body.chek-login .login #wp-submit {
	background: var(--chek-blue, #3db5e6) !important;
	background-image: none !important;
	border: 1px solid var(--chek-blue, #3db5e6) !important;
	border-radius: var(--chek-button-radius, 8px) !important;
	box-shadow: 0 2px 6px rgba( 61, 181, 230, 0.3 ) !important;
	text-shadow: none !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	letter-spacing: 0.3px !important;
	padding: 10px 20px !important;
	height: auto !important;
	line-height: 1.3 !important;
	transition: background 0.15s ease, transform 0.05s ease !important;
}

body.chek-login .login .button-primary:hover,
body.chek-login .login #wp-submit:hover,
body.chek-login .login .button-primary:focus,
body.chek-login .login #wp-submit:focus {
	background: var(--chek-blue-dark, #2a9cc9) !important;
	border-color: var(--chek-blue-dark, #2a9cc9) !important;
	box-shadow: 0 3px 10px rgba( 61, 181, 230, 0.4 ) !important;
}

body.chek-login .login .button-primary:active,
body.chek-login .login #wp-submit:active {
	transform: translateY( 1px ) !important;
}

/* ---------- Nav links ---------- */
body.chek-login .login #nav,
body.chek-login .login #backtoblog {
	text-align: center !important;
	padding: 16px 0 4px !important;
}

body.chek-login .login #nav a,
body.chek-login .login #backtoblog a {
	color: var(--chek-grey, #6b6b6b) !important;
	font-size: 13px !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
}

body.chek-login .login #nav a:hover,
body.chek-login .login #backtoblog a:hover,
body.chek-login .login #nav a:focus,
body.chek-login .login #backtoblog a:focus {
	color: var(--chek-blue, #3db5e6) !important;
	text-decoration: underline !important;
}

/* ---------- Messages ---------- */
body.chek-login .login .message,
body.chek-login .login #login_error,
body.chek-login .login .notice {
	border-radius: var(--chek-input-radius, 8px) !important;
	border-left-width: 4px !important;
	box-shadow: 0 2px 6px rgba( 29, 29, 27, 0.06 ) !important;
	font-size: 14px !important;
	padding: 12px 14px !important;
}

body.chek-login .login .message {
	border-left-color: var(--chek-blue, #3db5e6) !important;
}

body.chek-login .login #login_error {
	border-left-color: #d94343 !important;
}

/* ---------- Language / privacy ---------- */
body.chek-login .language-switcher {
	margin-top: 18px !important;
}

body.chek-login .language-switcher select {
	border-radius: 6px !important;
	border-color: var(--chek-border, #e3e8ef) !important;
}

body.chek-login .privacy-policy-page-link {
	margin-top: 20px !important;
}

body.chek-login .privacy-policy-page-link a {
	color: var(--chek-grey, #6b6b6b) !important;
	font-size: 12px !important;
}

/* ---------- Small screens ---------- */
@media ( max-width: 480px ) {
	body.chek-login #login {
		padding: 8% 5% 0 !important;
	}

	body.chek-login #loginform,
	body.chek-login #registerform,
	body.chek-login #lostpasswordform {
		padding: 24px 20px !important;
	}

	body.chek-login #login h1 a,
	body.chek-login .login h1 a {
		width: 180px !important;
		height: 64px !important;
	}
}