/* Start fresh: custom login CSS cleared */
/* ================================
   SMARTGUARD LOGIN PAGE STYLING
   ================================ */

/* Page background */
body[data-path="login"],
body.for-login,
.page-card-layout {
	background: radial-gradient(circle at top, #0b2d67 0%, #04142f 45%, #020b19 100%) !important;
	min-height: 100vh;
}

/* Centering wrapper */
body[data-path="login"] .page-card-layout,
body.for-login .page-card-layout {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 100vh !important;
	padding: 30px !important;
}

/* Login card */
body[data-path="login"] .page-card,
body.for-login .page-card {
	background: linear-gradient(180deg, #0a2a63 0%, #08224f 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 34px !important;
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.03),
		0 20px 60px rgba(0, 0, 0, 0.45),
		0 0 40px rgba(19, 115, 255, 0.18) !important;
	padding: 42px 34px 30px !important;
	width: 100% !important;
	max-width: 520px !important;
}

/* Remove plain white look */
body[data-path="login"] .page-card-head,
body.for-login .page-card-head {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	margin-bottom: 12px !important;
}

/* Big title */
body[data-path="login"] .page-card-head h4,
body[data-path="login"] .page-card-head .page-card-head-title,
body.for-login .page-card-head h4,
body.for-login .page-card-head .page-card-head-title {
	color: #ffffff !important;
	font-size: 56px !important;
	font-weight: 800 !important;
	text-align: center !important;
	letter-spacing: -1px !important;
	margin: 12px 0 28px !important;
	line-height: 1.1 !important;
}

/* Circular icon container above title */
.fraudshield-login-icon {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	margin: 0 auto 18px auto;
	background: rgba(255,255,255,0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 0 25px rgba(255,255,255,0.04);
}

.fraudshield-login-icon svg {
	width: 50px;
	height: 50px;
	fill: #8db8ff;
	opacity: 0.95;
}

/* Labels */
body[data-path="login"] .form-group label,
body.for-login .form-group label {
	color: #ffffff !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	margin-bottom: 10px !important;
	display: block !important;
}

/* Inputs */
body[data-path="login"] .form-control,
body.for-login .form-control {
	background: rgba(10, 45, 105, 0.98) !important;
	border: none !important;
	border-radius: 18px !important;
	height: 66px !important;
	color: #ffffff !important;
	font-size: 18px !important;
	padding-left: 18px !important;
	padding-right: 18px !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}

body[data-path="login"] .form-control::placeholder,
body.for-login .form-control::placeholder {
	color: rgba(255, 255, 255, 0.70) !important;
}

/* Password reveal / small buttons near field */
body[data-path="login"] .input-with-feedback .link-btn,
body[data-path="login"] .password-field .link-btn,
body.for-login .input-with-feedback .link-btn,
body.for-login .password-field .link-btn {
	color: #c7dbff !important;
}

/* Forgot password link */
body[data-path="login"] .forgot-password-message,
body[data-path="login"] .forgot-password-message a,
body[data-path="login"] a[href*="forgot"],
body.for-login .forgot-password-message,
body.for-login .forgot-password-message a,
body.for-login a[href*="forgot"] {
	color: #bdd3ff !important;
	font-size: 16px !important;
	text-align: right !important;
	display: block !important;
	margin-top: 10px !important;
	margin-bottom: 18px !important;
	text-decoration: none !important;
}

/* Login button */
body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary,
body.for-login .btn-login,
body.for-login .btn-primary {
	width: 100% !important;
	height: 62px !important;
	border: none !important;
	border-radius: 18px !important;
	background: linear-gradient(90deg, #1672ff 0%, #0f84ff 100%) !important;
	color: #ffffff !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	box-shadow: 0 10px 30px rgba(21, 114, 255, 0.35) !important;
	margin-top: 8px !important;
}

/* "or" separator */
body[data-path="login"] .login-divider,
body[data-path="login"] .page-card .divider,
body.for-login .login-divider,
body.for-login .page-card .divider {
	color: rgba(255,255,255,0.55) !important;
	margin: 16px 0 !important;
}

/* Email login link below button */
body[data-path="login"] a[href*="login_email"],
body[data-path="login"] .sign-up-message a,
body[data-path="login"] .page-card a.btn-secondary,
body.for-login a[href*="login_email"],
body.for-login .sign-up-message a,
body.for-login .page-card a.btn-secondary {
	color: #cfe0ff !important;
	font-size: 17px !important;
	text-align: center !important;
	display: block !important;
	text-decoration: none !important;
	margin-top: 14px !important;
}

/* Hide default footer clutter on login if present */
body[data-path="login"] footer,
body.for-login footer {
	background: transparent !important;
	border: none !important;
}

/* Better spacing for form groups */
body[data-path="login"] .form-group,
body.for-login .form-group {
	margin-bottom: 18px !important;
}

/* Mobile */
@media (max-width: 768px) {
	body[data-path="login"] .page-card,
	body.for-login .page-card {
		padding: 30px 22px !important;
		border-radius: 28px !important;
		max-width: 94vw !important;
	}

	body[data-path="login"] .page-card-head h4,
	body[data-path="login"] .page-card-head .page-card-head-title,
	body.for-login .page-card-head h4,
	body.for-login .page-card-head .page-card-head-title {
		font-size: 42px !important;
	}

	.fraudshield-login-icon {
		width: 82px;
		height: 82px;
	}
}