/**
 * WHMCS Croster Auth Redesign (Login & Password Reset)
 * Clean, Human-Crafted SaaS Architecture
 */

/* ==========================================================================
   Design Tokens & CSS Variables
   ========================================================================== */
:root {
	--auth-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	
	/* Palette */
	--auth-canvas: #f8fafc;
	--auth-surface: #ffffff;
	--auth-surface-subtle: #f8fafc;
	--auth-border: #e2e8f0;
	--auth-border-hover: #cbd5e1;
	--auth-border-focus: #4f46e5;
	
	--auth-ink: #0f172a;
	--auth-ink-muted: #64748b;
	--auth-ink-subtle: #94a3b8;
	
	--auth-primary: #4f46e5;
	--auth-primary-hover: #4338ca;
	--auth-primary-glow: 0 4px 14px rgba(79, 70, 229, 0.25);
	--auth-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.12);
	
	--auth-radius-card: 16px;
	--auth-radius-input: 10px;
	--auth-radius-btn: 10px;
}

/* Dark Mode Overrides */
body.dark-mode {
	--auth-canvas: #090d16;
	--auth-surface: #111827;
	--auth-surface-subtle: #1f2937;
	--auth-border: rgba(255, 255, 255, 0.1);
	--auth-border-hover: rgba(255, 255, 255, 0.18);
	--auth-border-focus: #818cf8;
	
	--auth-ink: #f8fafc;
	--auth-ink-muted: #94a3b8;
	--auth-ink-subtle: #64748b;
	
	--auth-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* Global Reset on Auth Screens */
body.login,
body.login #wrapper,
.loginpage-with-sidebar {
	min-height: 100vh;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--auth-font);
	color: var(--auth-ink);
	background-color: var(--auth-canvas) !important;
}

body.login::before {
	display: none !important; /* Remove legacy Croster overlay */
}

/* ==========================================================================
   1. SPLIT-SCREEN LAYOUT (themesettings.loginpage.loginpagestyle != "")
   Strict 100vh Viewport - Left Sidebar NEVER Scrolls
   ========================================================================== */
.loginpage-with-sidebar {
	display: flex !important;
	flex-direction: row !important;
	height: 100vh !important;
	max-height: 100vh !important;
	width: 100% !important;
	overflow: hidden !important;
	background: var(--auth-canvas) !important;
}

/* Left Hero Showcase Column: Exactly 46% width, Locked to 100vh without scroll */
.loginpage-with-sidebar .sidebar-container {
	flex: 0 0 46% !important;
	max-width: 46% !important;
	width: 46% !important;
	height: 100vh !important;
	max-height: 100vh !important;
	overflow: hidden !important; /* STRICT: No scrollbar on sidebar */
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	padding: 48px clamp(36px, 4.5vw, 64px) !important;
	background: 
		radial-gradient(ellipse 80% 60% at 20% 10%, rgba(99, 102, 241, 0.28) 0%, transparent 60%),
		radial-gradient(ellipse 60% 60% at 85% 90%, rgba(14, 165, 233, 0.18) 0%, transparent 60%),
		linear-gradient(150deg, #090d16 0%, #0f172a 50%, #1e1b4b 100%) !important;
	color: #ffffff !important;
	position: relative !important;
	box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
	border: 0 !important;
	box-sizing: border-box !important;
	z-index: 2;
}

.loginpage-with-sidebar .sidebar-container .login-header {
	margin-bottom: 24px !important;
	text-align: left !important;
}

/* -------------------------------------------------------------
   Logo on Dark Background: ALWAYS Pure White
   ------------------------------------------------------------- */
.sidebar-container .login-header img,
.sidebar-container img,
.sidebar-logo img {
	max-height: 44px !important;
	max-width: 195px !important;
	object-fit: contain !important;
	filter: brightness(0) invert(1) !important;
	-webkit-filter: brightness(0) invert(1) !important;
	display: inline-block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.sidebar-container .login-header a,
.sidebar-container .login-header span,
.sidebar-container .login-header h1,
.sidebar-container .login-header h2,
.sidebar-logo span {
	color: #ffffff !important;
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* Left Sidebar Content */
.loginpage-with-sidebar .sidebar-content {
	max-width: 500px !important;
	margin: auto 0 !important;
	padding: 16px 0 !important;
}

.sidebar-title {
	font-size: clamp(2rem, 2.5vw, 2.6rem) !important;
	font-weight: 800 !important;
	letter-spacing: -0.035em !important;
	line-height: 1.2 !important;
	color: #ffffff !important;
	margin-bottom: 14px !important;
}

.sidebar-desc {
	font-size: 1rem !important;
	line-height: 1.6 !important;
	color: rgba(226, 232, 240, 0.8) !important;
	margin-bottom: 0 !important;
}

/* Sidebar Footer */
.sidebar-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(203, 213, 225, 0.6);
	font-size: 0.82rem;
}

.sidebar-footer a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color 0.15s ease;
}

.sidebar-footer a:hover {
	color: #ffffff;
}

/* Right Form Column: Remaining 54% width */
.loginpage-with-sidebar .center-container {
	flex: 1 1 54% !important;
	max-width: 54% !important;
	width: 54% !important;
	height: 100vh !important;
	max-height: 100vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 40px clamp(24px, 4vw, 64px) !important;
	background: var(--auth-canvas) !important;
	overflow-y: auto !important; /* Only the right form container scrolls if viewport is small */
	box-sizing: border-box !important;
}

.loginpage-with-sidebar .center-container .login-container {
	width: 100% !important;
	max-width: 420px !important;
	margin: 0 auto !important;
}

/* ==========================================================================
   2. CENTERED CARD LAYOUT (themesettings.loginpage.loginpagestyle == "")
   ========================================================================== */
#wrapper {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	background:
		radial-gradient(ellipse 60% 50% at 10% 10%, rgba(99, 102, 241, 0.12) 0%, transparent 60%),
		radial-gradient(ellipse 55% 45% at 90% 90%, rgba(14, 165, 233, 0.10) 0%, transparent 60%),
		var(--auth-canvas) !important;
	background-attachment: fixed;
}

#wrapper .container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 100%;
}

#wrapper .login-container {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
}

.login-header {
	margin-bottom: 24px;
	text-align: center;
}

.login-header a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.login-header img {
	max-height: 42px;
	max-width: 190px;
	object-fit: contain;
}

.login-header .logo-dark,
.login-header .logo-light {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--auth-ink);
}

/* ==========================================================================
   3. THE AUTH CARD
   ========================================================================== */
.login-box,
.auth-card {
	background: var(--auth-surface) !important;
	border: 1px solid var(--auth-border) !important;
	border-radius: var(--auth-radius-card) !important;
	box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
	padding: 38px 34px !important;
	position: relative;
	overflow: hidden;
	box-sizing: border-box !important;
}

.auth-card-title,
.login-box h1 {
	color: var(--auth-ink) !important;
	font-size: 1.65rem !important;
	font-weight: 750 !important;
	letter-spacing: -0.03em !important;
	margin: 0 0 6px !important;
	line-height: 1.25 !important;
	text-transform: none !important;
}

.auth-card-title i,
.login-box h1 i {
	display: none !important;
}

.auth-card-subtitle,
.login-box > p {
	color: var(--auth-ink-muted) !important;
	font-size: 0.925rem !important;
	line-height: 1.5 !important;
	margin: 0 0 24px !important;
}

.login-box hr {
	display: none !important;
}

/* ==========================================================================
   4. FORM FIELDS & INPUTS
   ========================================================================== */
.login-box .form-group {
	margin-bottom: 18px;
	position: relative;
}

.login-box label,
.login-box .form-control-label {
	display: block;
	margin-bottom: 6px;
	color: var(--auth-ink);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.auth-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.auth-input-icon {
	position: absolute;
	left: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--auth-ink-subtle);
	font-size: 0.9rem;
	pointer-events: none;
	transition: color 0.15s ease;
	z-index: 3;
}

.auth-input-wrapper:focus-within .auth-input-icon {
	color: var(--auth-primary);
}

.login-box .form-control,
.auth-input {
	width: 100%;
	height: 46px;
	padding: 0 14px 0 42px;
	border: 1px solid var(--auth-border) !important;
	border-radius: var(--auth-radius-input) !important;
	background: #ffffff !important;
	color: var(--auth-ink) !important;
	font-size: 0.925rem;
	font-weight: 500;
	box-shadow: none !important;
	transition: all 0.15s ease;
}

body.dark-mode .login-box .form-control,
body.dark-mode .auth-input {
	background: #1f2937 !important;
}

.login-box .form-control::placeholder,
.auth-input::placeholder {
	color: var(--auth-ink-subtle);
	font-weight: 400;
}

.login-box .form-control:focus,
.auth-input:focus {
	border-color: var(--auth-border-focus) !important;
	box-shadow: var(--auth-focus-ring) !important;
	outline: none !important;
}

/* Password with Reveal Button */
.auth-input-wrapper.has-reveal .form-control {
	padding-right: 44px;
}

.btn-reveal-pw {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--auth-ink-subtle);
	cursor: pointer;
	transition: all 0.15s ease;
	z-index: 4;
}

.btn-reveal-pw:hover {
	color: var(--auth-ink);
	background: rgba(0, 0, 0, 0.05);
}

body.dark-mode .btn-reveal-pw:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   5. REMEMBER ME & FORGOT PASSWORD ROW
   ========================================================================== */
.auth-options-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 14px 0 22px;
	gap: 10px;
}

.auth-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
	margin: 0;
}

.auth-checkbox-label input[type="checkbox"],
.rememberme {
	width: 16px;
	height: 16px;
	border-radius: 4px;
	border: 1.5px solid var(--auth-border);
	accent-color: var(--auth-primary);
	cursor: pointer;
}

.auth-checkbox-label .labels {
	color: var(--auth-ink-muted);
	font-size: 0.85rem;
	font-weight: 500;
	margin: 0;
}

.auth-forgot-link,
.login-box .form-group a {
	color: var(--auth-primary) !important;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease;
}

.auth-forgot-link:hover,
.login-box .form-group a:hover {
	color: var(--auth-primary-hover) !important;
	text-decoration: underline;
}

/* ==========================================================================
   6. PRIMARY BUTTON
   ========================================================================== */
.btn-auth-primary,
.login-box .btn-login,
.login-box button[type="submit"],
.login-box input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 46px;
	padding: 0 20px;
	border: 0;
	border-radius: var(--auth-radius-btn);
	background: var(--auth-primary) !important;
	color: #ffffff !important;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	box-shadow: var(--auth-primary-glow);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}

.btn-auth-primary:hover,
.login-box .btn-login:hover,
.login-box button[type="submit"]:hover,
.login-box input[type="submit"]:hover {
	background: var(--auth-primary-hover) !important;
	box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
	transform: translateY(-1px);
	color: #ffffff !important;
}

.btn-auth-primary:active,
.login-box .btn-login:active {
	transform: translateY(0);
}

/* Back Link Button */
.auth-back-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 16px;
	color: var(--auth-ink-muted);
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	padding: 6px 0;
	transition: color 0.15s ease;
}

.auth-back-link:hover {
	color: var(--auth-primary);
	text-decoration: none;
}

.auth-back-link:hover i {
	transform: translateX(-3px);
}

.auth-back-link i {
	font-size: 0.8rem;
	transition: transform 0.2s ease;
}

/* ==========================================================================
   7. DIVIDER ("OR") - CLEAN, CENTERED, NO MISPLACED BUTTON
   ========================================================================== */
.login-container .social-or-login,
.login-box .social-or-login,
.social-or-login,
.auth-divider {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	margin: 22px 0 16px !important;
	position: relative !important;
	width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	z-index: 1 !important;
}

/* Crisp hairline line on left */
.login-container .social-or-login::before,
.login-box .social-or-login::before,
.social-or-login::before,
.auth-divider::before {
	content: "" !important;
	display: block !important;
	position: static !important;
	flex: 1 1 auto !important;
	height: 1px !important;
	background-color: var(--auth-border) !important;
	border: 0 !important;
	margin: 0 12px 0 0 !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
}

/* Crisp hairline line on right */
.login-container .social-or-login::after,
.login-box .social-or-login::after,
.social-or-login::after,
.auth-divider::after {
	content: "" !important;
	display: block !important;
	position: static !important;
	flex: 1 1 auto !important;
	height: 1px !important;
	background-color: var(--auth-border) !important;
	border: 0 !important;
	margin: 0 0 0 12px !important;
}

/* Perfectly centered text, resets Croster's legacy blue pill */
.login-container .social-or-login span,
.login-box .social-or-login span,
.social-or-login span,
.auth-divider-text {
	display: inline-block !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 4px !important;
	margin: 0 !important;
	color: var(--auth-ink-subtle) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	line-height: 1 !important;
	position: static !important;
	flex-shrink: 0 !important;
}

/* ==========================================================================
   8. SOCIAL / GOOGLE SIGN-IN - STRIP ALL EXTERNAL BORDERS
   ========================================================================== */
.providerPreLinking,
.providerPreLinking *,
.social-signin-btns,
.social-signin-btns * {
	border: none !important;
	border-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

.providerPreLinking {
	min-height: auto !important;
	margin: 6px 0 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	padding: 0 !important;
	background: transparent !important;
}

.providerPreLinking .social-signin-btns {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
}

/* ==========================================================================
   9. CARD FOOTER
   ========================================================================== */
.login-container-register,
.auth-bottom-switch {
	margin: 22px 0 0 !important;
	padding: 18px 0 0 !important;
	border-top: 1px solid var(--auth-border) !important;
	background: transparent !important;
	color: var(--auth-ink-muted) !important;
	text-align: center !important;
	font-size: 0.88rem !important;
}

.login-container-register a,
.auth-bottom-switch a {
	color: var(--auth-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	margin-left: 4px !important;
}

.login-container-register a:hover,
.auth-bottom-switch a:hover {
	color: var(--auth-primary-hover) !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   10. LANGUAGE SELECTOR PILL
   ========================================================================== */
.lang-btn {
	margin-top: 18px;
	text-align: center;
}

.lang-btn .btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--auth-border);
	border-radius: 999px;
	background: var(--auth-surface);
	color: var(--auth-ink-muted);
	font-size: 0.8rem;
	font-weight: 550;
	transition: all 0.15s ease;
}

.lang-btn .btn:hover {
	border-color: var(--auth-border-hover);
	color: var(--auth-ink);
}

/* ==========================================================================
   11. FORGOT PASSWORD SPECIFIC STYLES
   ========================================================================== */
.auth-security-question-box {
	padding: 14px 16px;
	margin-bottom: 18px;
	background: var(--auth-surface-subtle);
	border: 1px solid var(--auth-border);
	border-radius: var(--auth-radius-input);
}

.auth-security-question-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--auth-ink-subtle);
	font-weight: 600;
	margin-bottom: 4px;
}

.auth-security-question-text {
	font-size: 0.95rem;
	font-weight: 650;
	color: var(--auth-ink);
	margin: 0;
}

/* Password Strength Bar */
#passwordStrengthBar {
	height: 6px;
	border-radius: 999px;
	background: var(--auth-border);
	overflow: hidden;
	margin: 8px 0 16px;
}

#passwordStrengthBar .progress-bar {
	height: 100%;
	transition: width 0.3s ease, background-color 0.3s ease;
}

/* Success Confirmation State */
.auth-success-container {
	text-align: center;
	padding: 12px 0 6px;
}

.auth-success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	color: #10b981;
	font-size: 1.5rem;
	margin-bottom: 18px;
}

.auth-success-container h2 {
	font-size: 1.45rem;
	font-weight: 750;
	color: var(--auth-ink);
	margin: 0 0 10px;
	letter-spacing: -0.025em;
}

.auth-success-container p {
	color: var(--auth-ink-muted);
	font-size: 0.925rem;
	line-height: 1.6;
	margin-bottom: 24px;
}

/* ==========================================================================
   12. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 991px) {
	.loginpage-with-sidebar {
		display: block !important;
		height: auto !important;
		max-height: none !important;
		overflow: auto !important;
	}
	
	.loginpage-with-sidebar .sidebar-container {
		display: none !important;
	}
	
	.loginpage-with-sidebar .center-container {
		flex: 1 1 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		min-height: 100vh !important;
		height: auto !important;
		max-height: none !important;
		padding: 40px 20px !important;
	}
}

@media (max-width: 500px) {
	.login-box,
	.auth-card {
		padding: 30px 20px !important;
		border-radius: 14px !important;
	}
	
	.auth-card-title,
	.login-box h1 {
		font-size: 1.45rem !important;
	}
}