/* ── BQ Custom Login v1.0.0 ─────────────────────────────────────── */
:root {
	--bq-bg:         #0d2518;
	--bq-card:       #152e1f;
	--bq-input-bg:   #1a3828;
	--bq-input-bd:   #254d35;
	--bq-green:      #22c55e;
	--bq-green-dark: #16a34a;
	--bq-text:       #ffffff;
	--bq-muted:      #9ca3af;
	--bq-radius:     24px;
	--bq-radius-md:  14px;
}

/* ── Reset & page ────────────────────────────────────────────────── */
body.bq-login-page {
	background-color: var(--bq-bg);
	background-image:
		linear-gradient(rgba(34,197,94,0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(34,197,94,0.07) 1px, transparent 1px);
	background-size: 40px 40px;
	font-family: 'Space Grotesk', sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

body.bq-login-page::before {
	content: '';
	position: fixed;
	inset: 0;
	background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(13,37,24,0.88) 100%);
	pointer-events: none;
	z-index: 0;
}

/* ── Login wrapper ───────────────────────────────────────────────── */
body.bq-login-page #login {
	position: relative;
	z-index: 1;
	width: min(92%, 420px) !important;
	padding: 0 !important;
	background: var(--bq-card);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: var(--bq-radius);
	box-shadow: 0 24px 64px rgba(0,0,0,0.45);
	overflow: visible;
}

/* ── Brand badge (icon) ──────────────────────────────────────────── */
.bq-brand-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(52px, 10vw, 64px);
	height: clamp(52px, 10vw, 64px);
	background: rgba(34,197,94,0.2);
	border: 1.5px solid rgba(34,197,94,0.55);
	border-radius: 18px;
	margin: clamp(28px,5vw,40px) auto 18px;
	box-shadow: 0 0 18px rgba(34,197,94,0.18);
}

.bq-brand-badge svg {
	width: 32px;
	height: 32px;
}

/* ── Heading & subtitle ──────────────────────────────────────────── */
.bq-heading,
h1.bq-heading {
	text-align: center;
	font-size: clamp(20px, 5vw, 26px) !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	opacity: 1 !important;
	text-shadow: none !important;
	filter: none !important;
	-webkit-font-smoothing: antialiased;
	letter-spacing: -0.5px;
	line-height: 1.2;
	margin: 0 0 8px;
	padding: 0 clamp(20px,5vw,36px);
}

.bq-subtitle {
	text-align: center;
	font-size: clamp(12px, 3vw, 14px);
	font-weight: 400;
	color: var(--bq-muted);
	line-height: 1.5;
	margin: 0 0 clamp(20px,4vw,28px);
	padding: 0 clamp(20px,5vw,36px);
}

/* ── WP login form card inner ────────────────────────────────────── */
#loginform,
#lostpasswordform,
#registerform {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 clamp(22px,5vw,36px) clamp(28px,5vw,36px) !important;
	margin: 0 !important;
}

/* ── Divider ─────────────────────────────────────────────────────── */
#loginform::before {
	content: '';
	display: block;
	height: 1px;
	background: rgba(255,255,255,0.06);
	margin-bottom: clamp(18px,4vw,24px);
}

/* ── Labels ──────────────────────────────────────────────────────── */
#loginform label,
#lostpasswordform label {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: var(--bq-muted);
	display: block;
	margin-bottom: 6px;
}

/* ── Input wrapper paragraph spacing ────────────────────────────── */
#loginform p,
#lostpasswordform p {
	margin-bottom: 16px !important;
}

/* ── Icon wrapper div (injected by JS around each input) ─────────── */
#loginform p > div,
#lostpasswordform p > div {
	position: relative !important;
	display: block !important;
}

/* Icon span inside wrapper */
#loginform p > div > span[aria-hidden],
#lostpasswordform p > div > span[aria-hidden] {
	position: absolute !important;
	left: 15px !important;
	top: 0 !important;
	bottom: 0 !important;
	display: flex !important;
	align-items: center !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

/* Eye toggle inside wrapper */
#loginform p > div > button,
#lostpasswordform p > div > button {
	position: absolute !important;
	right: 14px !important;
	top: 0 !important;
	bottom: 0 !important;
	display: flex !important;
	align-items: center !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	z-index: 2 !important;
	cursor: pointer !important;
}

/* ── Inputs ──────────────────────────────────────────────────────── */
#loginform input[type="text"],
#loginform input[type="password"],
#loginform input[type="email"],
#lostpasswordform input[type="text"],
#lostpasswordform input[type="email"] {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: var(--bq-text);
	background: var(--bq-input-bg);
	border: 1px solid var(--bq-input-bd);
	border-radius: var(--bq-radius-md);
	height: 52px;
	width: 100%;
	padding: 0 16px 0 46px;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
	vertical-align: middle;
	display: block;
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus,
#lostpasswordform input[type="text"]:focus {
	border-color: var(--bq-green);
	box-shadow: 0 0 0 4px rgba(34,197,94,0.1);
}

#loginform input[type="text"]::placeholder,
#loginform input[type="password"]::placeholder {
	color: #4b7a5c;
}

/* ── Remember me ─────────────────────────────────────────────────── */
.forgetmenot {
	display: flex;
	align-items: center;
	gap: 8px;
}

.forgetmenot label {
	font-size: 13px;
	color: var(--bq-muted);
	margin: 0;
	cursor: pointer;
}

.forgetmenot input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--bq-green);
	cursor: pointer;
}

/* ── Submit button ───────────────────────────────────────────────── */
#loginform .submit,
#lostpasswordform .submit {
	margin-top: 20px;
}

#loginform input[type="submit"],
#lostpasswordform input[type="submit"] {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #07140d;
	background: var(--bq-green);
	border: none;
	border-radius: var(--bq-radius-md);
	height: 54px;
	width: 100%;
	cursor: pointer;
	transition: background 0.18s;
	letter-spacing: 0.1px;
}

#loginform input[type="submit"]:hover,
#lostpasswordform input[type="submit"]:hover {
	background: var(--bq-green-dark);
}

/* ── Error / message notices ─────────────────────────────────────── */
#login_error,
.message,
.success {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	border-radius: 10px;
	border-left: none;
	margin: 0 clamp(22px,5vw,36px) 16px;
	padding: 12px 16px;
}

#login_error {
	background: rgba(239,68,68,0.1);
	border: 1px solid rgba(239,68,68,0.2);
	color: #fca5a5;
}

.message,
.success {
	background: rgba(34,197,94,0.08);
	border: 1px solid rgba(34,197,94,0.18);
	color: #86efac;
}

/* ── Nav links (Lost password etc.) ─────────────────────────────── */
#nav,
#backtoblog {
	text-align: center;
	padding: 0 clamp(22px,5vw,36px) !important;
	margin: 12px 0 0 !important;
}

#nav a,
#backtoblog a {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	color: var(--bq-muted);
	text-decoration: none;
	transition: color 0.15s;
}

#nav a:hover,
#backtoblog a:hover {
	color: var(--bq-green);
}

/* ── Powered by footer ───────────────────────────────────────────── */
.bq-powered-by {
	text-align: center;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	font-weight: 400;
	color: var(--bq-muted);
	padding: 22px clamp(22px,5vw,36px) clamp(28px,5vw,36px);
}

.bq-powered-by a {
	color: var(--bq-green);
	font-weight: 600;
	text-decoration: none;
}

.bq-powered-by a:hover {
	text-decoration: underline;
}

/* ── Hide browser native password reveal button ──────────────────── */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
	display: none !important;
	visibility: hidden !important;
}

/* ── Hide WP default privacy policy link ─────────────────────────── */
.privacy-policy-page-link {
	display: none !important;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
	body.bq-login-page #login {
		width: 92% !important;
	}
}

@media (max-width: 360px) {
	.bq-heading {
		font-size: 19px;
	}
	#loginform input[type="text"],
	#loginform input[type="password"] {
		height: 48px;
	}
	#loginform input[type="submit"] {
		height: 50px;
	}
}