/**
 * Login page (bloggerz_social_login) – loads last so it overrides theme/plugins.
 * Centering + card style + background.
 */

/* Hide sidebar on login page */
body.bloggerz-login-page.cm-no-sidebar #cm-secondary,
body.bloggerz-login-page.cm-no-sidebar .cm-secondary {
	display: none !important;
}
body.bloggerz-login-page.cm-no-sidebar #cm-content .cm-row,
body.bloggerz-login-page.cm-no-sidebar #cm-content #cm-primary.cm-primary,
body.bloggerz-login-page.cm-no-sidebar #cm-content .cm-posts {
	max-width: none !important;
	width: 100% !important;
}

/* Center layout: row, primary, posts */
body.bloggerz-login-page #cm-content .cm-row {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}
body.bloggerz-login-page #cm-content .cm-primary,
body.bloggerz-login-page #cm-content #cm-primary,
body.bloggerz-login-page #cm-content .cm-posts {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 50vh;
	padding: 2rem 1rem !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	background: #f5f6f8 !important;
}

/* Center article and title */
body.bloggerz-login-page .cm-posts .post,
body.bloggerz-login-page .cm-posts article {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 100% !important;
}
body.bloggerz-login-page .cm-posts .cm-entry-header,
body.bloggerz-login-page .cm-posts .cm-entry-title {
	text-align: center !important;
	width: 100% !important;
}

/* Center the block that contains the card */
body.bloggerz-login-page .cm-posts .cm-entry-summary,
body.bloggerz-login-page .cm-entry-summary {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
body.bloggerz-login-page .cm-entry-summary p:has(.bloggerz-login-card) {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
	margin: 0 0 1em 0 !important;
}

/* When card is present (any page slug / no body class) – center ancestors */
.cm-entry-summary:has(.bloggerz-login-card) {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
}
.cm-posts:has(.bloggerz-login-card),
#cm-primary:has(.bloggerz-login-card) {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	background: #f5f6f8 !important;
}
.cm-posts:has(.bloggerz-login-card) .post,
.cm-posts:has(.bloggerz-login-card) article {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
}
.cm-entry-summary:has(.bloggerz-login-card) p {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
}

/* Card: fixed width + centering + visible box */
div.bloggerz-login-card {
	--bloggerz-primary: #0377b5;
	--bloggerz-primary-dark: #025a8a;
	--bloggerz-border: #d0d5dd;
	--bloggerz-bg: #ffffff;
	width: 460px !important;
	max-width: 100% !important;
	min-width: 0;
	align-self: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	display: block !important;
	box-sizing: border-box !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
	border: 1px solid #d0d5dd !important;
	padding: 2rem 1.8rem 1.8rem !important;
	position: relative;
	font-size: 18px !important;
}

/* Card inner */
div.bloggerz-login-card .bloggerz-social-login-wrap {
	max-width: none !important;
	margin: 0 !important;
}
div.bloggerz-login-card .bloggerz-login-method-label {
	margin: 0 0 12px 0 !important;
	font-weight: 600 !important;
	font-size: 1.36rem !important;
	color: #333 !important;
}
div.bloggerz-login-card .bloggerz-login-email-otp {
	margin-bottom: 0.95rem !important;
}
div.bloggerz-login-card .bloggerz-login-email-otp p {
	margin: 0 0 10px 0 !important;
}
div.bloggerz-login-card .bloggerz-login-input,
div.bloggerz-login-card input.input {
	width: 100% !important;
	padding: 13px 16px !important;
	box-sizing: border-box !important;
	border: 2px solid #d0d5dd !important;
	border-radius: 10px !important;
	font-size: 1.2rem !important;
	background: #fff !important;
}
div.bloggerz-login-card .bloggerz-login-input::placeholder,
div.bloggerz-login-card input.input::placeholder {
	font-size: 1.08rem !important;
}
div.bloggerz-login-card .bloggerz-login-input:focus,
div.bloggerz-login-card input.input:focus {
	outline: none !important;
	border-color: #0377b5 !important;
	box-shadow: 0 0 0 4px rgba(3, 119, 181, 0.15) !important;
}
div.bloggerz-login-card .bloggerz-btn {
	padding: 12px 20px !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	font-size: 1.12rem !important;
	cursor: pointer;
}
div.bloggerz-login-card .bloggerz-otp-send-row,
div.bloggerz-login-card .bloggerz-otp-actions-row {
	margin: 4px 0 0 0 !important;
	text-align: center !important;
}
div.bloggerz-login-card .bloggerz-btn-secondary {
	background: #fff !important;
	color: #334155 !important;
	border: 1px solid #cbd5e1 !important;
}
div.bloggerz-login-card .bloggerz-btn-secondary:hover {
	background: #f8fafc !important;
	color: #1e293b !important;
}
div.bloggerz-login-card .bloggerz-btn-primary,
div.bloggerz-login-card .button.bloggerz-btn-primary {
	background: #0377b5 !important;
	border: 1px solid #0377b5 !important;
	color: #fff !important;
}
div.bloggerz-login-card .bloggerz-btn-primary:hover,
div.bloggerz-login-card .button.bloggerz-btn-primary:hover {
	background: #025a8a !important;
	border-color: #025a8a !important;
	color: #fff !important;
}
div.bloggerz-login-card .bloggerz-login-divider {
	text-align: center !important;
	margin: 1rem 0 0.9rem !important;
	color: #666 !important;
	font-size: 1.08rem !important;
	position: relative;
}
div.bloggerz-login-card .bloggerz-otp-step-note {
	font-size: 1.08rem !important;
	color: #4b5563 !important;
	margin: 0 0 10px 0 !important;
}
div.bloggerz-login-card .bloggerz-otp-actions-row {
	text-align: center !important;
	margin-top: 6px !important;
}
div.bloggerz-login-card .bloggerz-login-divider::before,
div.bloggerz-login-card .bloggerz-login-divider::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	width: 40% !important;
	height: 1px !important;
	background: #d0d5dd !important;
}
div.bloggerz-login-card .bloggerz-login-divider::before {
	left: 0 !important;
}
div.bloggerz-login-card .bloggerz-login-divider::after {
	right: 0 !important;
}
div.bloggerz-login-card .bloggerz-social-login-buttons {
	min-height: 48px !important;
	margin-top: 0.2rem !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
}
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-container,
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-container-buttons {
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
}
div.bloggerz-login-card .bloggerz-otp-message {
	margin-top: 10px !important;
	padding: 10px 12px !important;
	border-radius: 8px !important;
	font-size: 1.1rem !important;
}
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-button-label-container,
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-button span,
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-button div {
	font-size: 1.16rem !important;
	line-height: 1.3 !important;
}
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-button,
div.bloggerz-login-card .bloggerz-social-login-buttons a {
	min-height: 50px !important;
}
div.bloggerz-login-card .bloggerz-otp-success {
	background: #e8f5e9 !important;
	color: #2e7d32 !important;
}
div.bloggerz-login-card .bloggerz-otp-error {
	background: #ffebee !important;
	color: #c62828 !important;
}

/* Final polish pass: tighter rhythm + balanced button sizing */
div.bloggerz-login-card .bloggerz-login-email-otp,
div.bloggerz-login-card #bloggerz-otp-login-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}
div.bloggerz-login-card #bloggerz-otp-login-form p {
	margin: 0 !important;
}
div.bloggerz-login-card .bloggerz-login-input,
div.bloggerz-login-card input.input {
	margin: 0 !important;
}
div.bloggerz-login-card .bloggerz-otp-send-row {
	display: flex !important;
	justify-content: center !important;
	padding-top: 2px !important;
}
div.bloggerz-login-card .bloggerz-otp-send-row .bloggerz-btn,
div.bloggerz-login-card .bloggerz-otp-code-wrap .bloggerz-btn-primary {
	min-width: 190px !important;
}
div.bloggerz-login-card .bloggerz-login-divider {
	margin: 14px 0 12px !important;
}
div.bloggerz-login-card .bloggerz-social-login-buttons {
	gap: 10px !important;
}
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-container,
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-container-buttons,
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-container-buttons a,
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-button {
	width: 100% !important;
	max-width: 100% !important;
}
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px 14px !important;
	border-radius: 6px !important;
}
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-button-label-container,
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-button span,
div.bloggerz-login-card .bloggerz-social-login-buttons .nsl-button div {
	font-weight: 600 !important;
}

@media (max-width: 480px) {
	div.bloggerz-login-card {
		width: 100% !important;
		max-width: 100% !important;
		padding: 1.5rem 1rem !important;
	}
}

/* Hard override: login typography + Google button text size */
body.bloggerz-login-page .bloggerz-login-card {
	font-size: 19px !important;
}
body.bloggerz-login-page .bloggerz-login-card .bloggerz-login-method-label {
	font-size: 1.4rem !important;
}
body.bloggerz-login-page .bloggerz-login-card .bloggerz-login-input,
body.bloggerz-login-page .bloggerz-login-card input.input {
	font-size: 1.24rem !important;
}
body.bloggerz-login-page .bloggerz-login-card .bloggerz-btn {
	font-size: 1.16rem !important;
}
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-button,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-button-default,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-button-google,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons a {
	min-height: 52px !important;
	font-size: 1.18rem !important;
}
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-button-label-container,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-button span,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-button div,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-button-default div,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-button-default span {
	font-size: 1.18rem !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
}

/* Keep social buttons centered and not overly wide */
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-container,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-container-buttons,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-container-buttons a,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-social-login-buttons .nsl-button {
	max-width: 360px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* OTP flow cleanup: strict step layout + no overlap */
body.bloggerz-login-page .bloggerz-login-card #bloggerz-otp-login-form {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}
body.bloggerz-login-page .bloggerz-login-card #bloggerz-otp-login-form .bloggerz-otp-email-row,
body.bloggerz-login-page .bloggerz-login-card #bloggerz-otp-login-form .bloggerz-otp-send-row,
body.bloggerz-login-page .bloggerz-login-card #bloggerz-otp-login-form .bloggerz-otp-code-wrap p {
	margin: 0 !important;
}
body.bloggerz-login-page .bloggerz-login-card #bloggerz-otp-login-form.bloggerz-otp-step-email .bloggerz-otp-code-wrap {
	display: none !important;
}
body.bloggerz-login-page .bloggerz-login-card #bloggerz-otp-login-form.bloggerz-otp-step-code .bloggerz-otp-email-row,
body.bloggerz-login-page .bloggerz-login-card #bloggerz-otp-login-form.bloggerz-otp-step-code .bloggerz-otp-send-row {
	display: none !important;
}
body.bloggerz-login-page .bloggerz-login-card #bloggerz-otp-login-form.bloggerz-otp-step-code .bloggerz-otp-code-wrap {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}
body.bloggerz-login-page .bloggerz-login-card .bloggerz-otp-send-row,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-otp-code-wrap .bloggerz-otp-actions-row {
	text-align: center !important;
}
body.bloggerz-login-page .bloggerz-login-card .bloggerz-otp-send-row .bloggerz-btn,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-otp-code-wrap #bloggerz_otp_verify,
body.bloggerz-login-page .bloggerz-login-card .bloggerz-otp-code-wrap #bloggerz_otp_change_email {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 180px !important;
	max-width: 240px !important;
	width: auto !important;
	margin: 0 auto !important;
	position: static !important;
	transform: none !important;
}
body.bloggerz-login-page .bloggerz-login-card .bloggerz-otp-step-note {
	margin: 0 !important;
	text-align: center !important;
}
body.bloggerz-login-page .bloggerz-login-card .bloggerz-otp-message {
	margin-top: 2px !important;
}