/* ===== Modern Login Popup Styling ===== */

/* Popup window card */
.login-window {
	border-radius: 16px !important;
	box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.35) !important;
	overflow: hidden !important;
	border: none !important;
}

/* Title bar - gradient brand header */
.login-window .titlebar {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%) !important;
	padding: 8px 16px !important;
	border: none !important;
	min-height: 48px !important;
}
.login-window .titlebar .text-w,
.login-window .titlebar .bricks-text {
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 600 !important;
}

/* Content area padding */
.login-window .flexbox {
	padding: 0 !important;
}

/* Tab panel modern styling */
.login-window .tabpanel {
	background: transparent !important;
	border: none !important;
	display: flex !important;
	flex-direction: column !important;
}
.login-window .tabpanel-tabs {
	display: flex !important;
	border-bottom: 2px solid #e2e8f0 !important;
	background: #f8fafc !important;
	padding: 0 !important;
	gap: 0 !important;
}
.login-window .tabpanel-tab {
	padding: 14px 24px !important;
	cursor: pointer !important;
	border-bottom: 3px solid transparent !important;
	margin-bottom: -2px !important;
	transition: all 0.2s ease !important;
	color: #64748b !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	background: transparent !important;
}
.login-window .tabpanel-tab:hover {
	color: #6366f1 !important;
	background: rgba(99, 102, 241, 0.04) !important;
}
.login-window .tabpanel-tab-active,
.login-window .tabpanel-tab-selected {
	color: #6366f1 !important;
	border-bottom-color: #6366f1 !important;
	background: transparent !important;
}
.login-window .tabpanel-content {
	padding: 0 !important;
	background: #ffffff !important;
	overflow: hidden !important;
	flex: 1 !important;
	min-height: 0 !important;
}
.login-window .tabpanel-content .scrollpanel {
	height: 100% !important;
}
.login-window .tabpanel-content .scrollpanel .vcontainer {
	padding: 20px 24px !important;
}

/* Form styling */
.login-window .vcontainer {
	gap: 4px !important;
}
.login-window .inputbox {
	border-radius: 10px !important;
	border: 1.5px solid #e2e8f0 !important;
	padding: 10px 14px !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
	background: #f8fafc !important;
	font-size: 14px !important;
}
.login-window .inputbox:focus,
.login-window .inputbox:focus-within {
	border-color: #6366f1 !important;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
	background: #ffffff !important;
	outline: none !important;
}
.login-window input.inputbox {
	height: 42px !important;
}

/* Form labels */
.login-window .field-label,
.login-window .bricks-form label {
	font-weight: 500 !important;
	color: #374151 !important;
	font-size: 13px !important;
	margin-bottom: 4px !important;
}

/* Toolbar buttons */
.login-window .htoolbar {
	padding: 8px 0 !important;
	gap: 8px !important;
	justify-content: center !important;
}
.login-window .submit_btn {
	background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 10px 32px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}
.login-window .submit_btn:hover {
	opacity: 0.92 !important;
	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
	transform: translateY(-1px) !important;
}
.login-window .reset_btn,
.login-window .clear_btn {
	border-radius: 10px !important;
	border: 1.5px solid #e2e8f0 !important;
	background: #ffffff !important;
	color: #64748b !important;
	padding: 10px 20px !important;
	font-weight: 500 !important;
	transition: all 0.2s ease !important;
}
.login-window .reset_btn:hover,
.login-window .clear_btn:hover {
	border-color: #cbd5e1 !important;
	background: #f8fafc !important;
}

/* SMS send button */
.sms-send-btn {
	border-radius: 10px !important;
	border: 1.5px solid #6366f1 !important;
	background: rgba(99, 102, 241, 0.06) !important;
	color: #6366f1 !important;
	padding: 8px 20px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}
.sms-send-btn:hover {
	background: rgba(99, 102, 241, 0.12) !important;
}
.sms-send-btn:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

/* Description text */
.login-window .bricks-text {
	color: #64748b;
}

/* Form description */
.login-desc {
	color: #94a3b8 !important;
	font-size: 12px !important;
	text-align: center !important;
	margin-top: 4px !important;
}

/* Section separator */
.login-separator {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 8px 0 !important;
	color: #cbd5e1 !important;
	font-size: 12px !important;
}
.login-separator::before,
.login-separator::after {
	content: '' !important;
	flex: 1 !important;
	height: 1px !important;
	background: #e2e8f0 !important;
}

/* Dark theme support */
[data-theme="dark"] .login-window {
	background: #1e293b !important;
}
[data-theme="dark"] .login-window .tabpanel-content {
	background: #1e293b !important;
}
[data-theme="dark"] .login-window .tabpanel-tabs {
	background: #0f172a !important;
	border-bottom-color: #334155 !important;
}
[data-theme="dark"] .login-window .tabpanel-tab {
	color: #94a3b8 !important;
}
[data-theme="dark"] .login-window .tabpanel-tab-active,
[data-theme="dark"] .login-window .tabpanel-tab-selected {
	color: #818cf8 !important;
	border-bottom-color: #818cf8 !important;
}
[data-theme="dark"] .login-window .inputbox {
	background: #0F172A !important;
	border-color: #475569 !important;
	color: #e2e8f0 !important;
}
[data-theme="dark"] .login-window .inputbox:focus,
[data-theme="dark"] .login-window .inputbox:focus-within {
	border-color: #818cf8 !important;
	box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.15) !important;
}
[data-theme="dark"] .login-window .field-label {
	color: #cbd5e1 !important;
}
[data-theme="dark"] .login-window .reset_btn,
[data-theme="dark"] .login-window .clear_btn {
	background: #334155 !important;
	border-color: #475569 !important;
	color: #cbd5e1 !important;
}
[data-theme="dark"] .sms-send-btn {
	border-color: #818cf8 !important;
	color: #818cf8 !important;
	background: rgba(129, 140, 248, 0.1) !important;
}