/* Notifal Login Styles - Ultra High Specificity */

/* Complete CSS Reset for Login Container */
.notifal-login-container,
.notifal-login-container *,
.notifal-login-container *:before,
.notifal-login-container *:after {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 100% !important;
	font: inherit !important;
	vertical-align: baseline !important;
	box-sizing: border-box !important;
	background: transparent !important;
	outline: none !important;
	text-decoration: none !important;
	list-style: none !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
}

/* Loading spinner styles - must come after reset and override the reset */
div.notifal-login-container button.notifal-btn.loading::after {
	border: 3px solid rgba(255, 255, 255, 0.2) !important;
	border-top: 3px solid white !important;
}

/* Firefox specific spinner fix */
@-moz-document url-prefix() {
	div.notifal-login-container button.notifal-btn.loading::after {
		border: 3px solid rgba(255, 255, 255, 0.2);
		border-top: 3px solid white;
		animation: notifal-spin 0.8s linear infinite;
	}
}

/* Main Container */
div.notifal-login-container {
	display: block !important;
	position: relative !important;
	max-width: 420px !important;
	margin: 40px auto !important;
	padding: 32px !important;
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: #374151 !important;
}

/* Form Messages */
div.notifal-login-container div.form-message {
	margin: 0 0 20px 0 !important;
	padding: 12px 16px !important;
	background: #f9fafb !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	text-align: center !important;
}

div.notifal-login-container div.form-message.notifal-error {
	background: #fef2f2 !important;
	border-color: #fecaca !important;
	color: #dc2626 !important;
	padding-left: 40px !important;
	position: relative !important;
}

div.notifal-login-container div.form-message.notifal-error::before {
	content: '' !important;
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 20px !important;
	height: 20px !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23dc2626'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
}

div.notifal-login-container div.form-message.notifal-success {
	background: #f0fdf4 !important;
	border-color: #bbf7d0 !important;
	color: #16a34a !important;
	padding-left: 40px !important;
	position: relative !important;
}

div.notifal-login-container div.form-message.notifal-success::before {
	content: '' !important;
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 20px !important;
	height: 20px !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2316a34a'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
}

/* Google Sign-in */
div.notifal-login-container div.google-signin-container {
	display: flex !important;
    justify-content: center;
	margin: 0 0 24px 0 !important;
}

/* Form Divider */
div.notifal-login-container div.form-divider {
	display: block !important;
	position: relative !important;
	text-align: center !important;
	margin: 24px 0 !important;
}

div.notifal-login-container div.form-divider:before {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	right: 0 !important;
	height: 1px !important;
	background: #e5e7eb !important;
}

div.notifal-login-container div.form-divider span {
	display: inline-block !important;
	position: relative !important;
	background: #ffffff !important;
	padding: 0 16px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #6b7280 !important;
	z-index: 1 !important;
}

/* Form Groups */
div.notifal-login-container div.form-group {
	display: block !important;
	position: relative !important;
	margin: 0 0 16px 0 !important;
}

/* Input Fields */
div.notifal-login-container div.form-group input[type="text"],
div.notifal-login-container div.form-group input[type="email"], 
div.notifal-login-container div.form-group input[type="password"] {
	display: block !important;
	width: 100% !important;
	padding: 16px 20px !important;
	margin: 0 !important;
	background: #FDF8FF !important;
	border: 2px solid #7B2CBF !important;
	border-radius: 12px !important;
	font-family: inherit !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: #374151 !important;
	transition: all 0.2s ease !important;
	outline: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

div.notifal-login-container div.form-group input:focus {
	border-color: #7B2CBF !important;
	box-shadow: 0 0 0 3px rgba(123, 44, 191, 0.1) !important;
}

div.notifal-login-container div.form-group input::placeholder {
	color: #DFA5FF !important;
	opacity: 1 !important;
}

/* Password Groups */
div.notifal-login-container div.password-group {
	position: relative !important;
}

div.notifal-login-container div.password-group input {
	padding-right: 50px !important;
}

div.notifal-login-container span.password-toggle {
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	right: 16px !important;
	transform: translateY(-50%) !important;
	cursor: pointer !important;
	z-index: 10 !important;
	padding: 4px !important;
	background: transparent !important;
	border-radius: 4px !important;
	transition: background-color 0.2s ease !important;
}


div.notifal-login-container span.password-toggle i.eye-icon {
	display: inline-block !important;
	font-size: 18px !important;
	font-style: normal !important;
	opacity: 0.6 !important;
	transition: opacity 0.2s ease !important;
}

div.notifal-login-container span.password-toggle:hover i.eye-icon,
div.notifal-login-container span.password-toggle i.eye-icon {
	opacity: 0.6 !important;
	transition: opacity 0.2s ease !important;
}

div.notifal-login-container span.password-toggle:hover i.eye-icon {
	opacity: 1 !important;
}

/* Specific positioning for register password toggle */
div.notifal-login-container span.password-toggle[data-target="register-password"] {
	top: 15% !important;
	transform: none !important;
}

/* Password Strength Indicator */
div.notifal-login-container div.password-strength-indicator {
	display: block !important;
	margin-top: 8px !important;
	font-size: 12px !important;
	clear: both !important;
	position: relative !important;
	z-index: 1 !important;
}

div.notifal-login-container div.password-strength-meter {
	display: block !important;
	width: 100% !important;
	height: 4px !important;
	background: #e5e7eb !important;
	border-radius: 2px !important;
	margin-bottom: 4px !important;
	overflow: hidden !important;
}

div.notifal-login-container div.password-strength-bar {
	display: block !important;
	height: 100% !important;
	width: 0% !important;
	border-radius: 2px !important;
	transition: width 0.3s ease, background-color 0.3s ease !important;
	box-sizing: content-box !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

div.notifal-login-container div.password-strength-bar.weak {
	background: #dc2626 !important;
}

div.notifal-login-container div.password-strength-bar.fair {
	background: #f59e0b !important;
}

div.notifal-login-container div.password-strength-bar.good {
	background: #3b82f6 !important;
}

div.notifal-login-container div.password-strength-bar.strong {
	background: #16a34a !important;
}

div.notifal-login-container div.password-strength-text {
	display: block !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-align: left !important;
}

div.notifal-login-container div.password-strength-text.weak {
	color: #dc2626 !important;
}

div.notifal-login-container div.password-strength-text.fair {
	color: #f59e0b !important;
}

div.notifal-login-container div.password-strength-text.good {
	color: #3b82f6 !important;
}

div.notifal-login-container div.password-strength-text.strong {
	color: #16a34a !important;
}

/* Remember Me */
div.notifal-login-container div.remember-group {
	margin: 20px 0 !important;
}

div.notifal-login-container label.remember-label {
	display: flex !important;
	align-items: center !important;
	cursor: pointer !important;
	font-size: 14px !important;
	color: #374151 !important;
	margin: 0 !important;
	gap: 10px;
	font-size: 17px !important;
}

div.notifal-login-container label.remember-label input[type="checkbox"] {
	display: none !important;
}

div.notifal-login-container div.remember-group label.remember-label span.toggle-switch {
	display: inline-block !important;
	width: 44px !important;
	height: 24px !important;
	background: #e5e7eb !important;
	border-radius: 24px !important;
	position: relative !important;
	transition: background-color 0.3s ease !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	border: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

div.notifal-login-container div.remember-group label.remember-label span.toggle-switch span.toggle-slider {
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	background: #ffffff !important;
	border-radius: 50% !important;
	position: absolute !important;
	top: 3px !important;
	left: 3px !important;
	transition: transform 0.3s ease !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

div.notifal-login-container div.remember-group label.remember-label input[type="checkbox"]:checked + span.toggle-switch {
	background: #7B2CBF !important;
}

div.notifal-login-container div.remember-group label.remember-label input[type="checkbox"]:checked + span.toggle-switch span.toggle-slider {
	transform: translateX(20px) !important;
}

/* Buttons */
div.notifal-login-container button.notifal-btn {
	display: block !important;
	width: 100% !important;
	padding: 16px 20px !important;
	margin: 0 0 12px 0 !important;
	background: #7B2CBF !important;
	border: none !important;
	border-radius: 12px !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: white !important;
	text-align: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	outline: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

div.notifal-login-container button.notifal-btn-primary {
	background: #7B2CBF !important;
	color: white !important;
}

div.notifal-login-container button.notifal-btn-primary:hover {
	background: #6A24A3 !important;
	transform: translateY(-1px) !important;
}
div.notifal-login-container button.notifal-btn-secondary:focus{
	background: #7B2CBF !important;
	color: white !important
}
div.notifal-login-container button.notifal-btn-secondary {
	border: 2px solid #7B2CBF !important;
}

div.notifal-login-container button.notifal-btn-secondary:hover {
	background: #7B2CBF !important;
	color: white !important;
}

/* Form Footer */
div.notifal-login-container div.form-footer {
	text-align: center !important;
	margin: 24px 0 0 0 !important;
}

div.notifal-login-container div.form-footer p {
	margin: 0 !important;
	font-size: 14px !important;
	color: #6b7280 !important;
}

div.notifal-login-container div.form-footer a,
div.notifal-login-container a.switch-to-register,
div.notifal-login-container a.switch-to-login {
	color: #7B2CBF !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

div.notifal-login-container div.form-footer a:hover,
div.notifal-login-container a.switch-to-register:hover,
div.notifal-login-container a.switch-to-login:hover {
	color: #6A24A3 !important;
}

/* OTC Section */
div.notifal-login-container div#otc-section {
	text-align: center !important;
}

div.notifal-login-container div.otc-header h2 {
	margin: 0 0 24px 0 !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: #374151 !important;
	line-height: 1.4 !important;
}

div.notifal-login-container div.otc-inputs-container {
	display: flex !important;
	justify-content: center !important;
	gap: 12px !important;
	margin: 0 0 24px 0 !important;
}

div.notifal-login-container input.otc-input {
	display: block !important;
	width: 55px !important;
	height: 55px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #FDF8FF !important;
	border: 2px solid #7B2CBF !important;
	border-radius: 8px !important;
	text-align: center !important;
	font-family: inherit !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: #374151 !important;
	outline: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

div.notifal-login-container input.otc-input:focus {
	border-color: #7B2CBF !important;
	box-shadow: 0 0 0 3px rgba(123, 44, 191, 0.1) !important;
}

div.notifal-login-container div.otc-footer {
	margin: 24px 0 0 0 !important;
}

div.notifal-login-container div.otc-footer p {
	margin: 8px 0 !important;
	font-size: 14px !important;
	color: #6b7280 !important;
}

div.notifal-login-container div.otc-footer a {
	color: #7B2CBF !important;
	font-weight: 600 !important;
}

div.notifal-login-container div.otc-footer a:hover {
	color: #6A24A3 !important;
}

div.notifal-login-container span.otc-counter {
	font-weight: 600 !important;
	color: #7B2CBF !important;
}

/* Utility Classes */
div.notifal-login-container .d-none {
	display: none !important;
}

/* Loading State */
div.notifal-login-container button.notifal-btn.loading {
	color: transparent !important;
	position: relative !important;
	pointer-events: none !important;
}

div.notifal-login-container button.notifal-btn.loading::after {
	content: '' !important;
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 20px !important;
	height: 20px !important;
	margin-top: -10px !important;
	margin-left: -10px !important;
	border-radius: 50% !important;
	border: 2px solid transparent !important;
	border-top: 2px solid #ffffff !important;
	border-right: 2px solid #ffffff !important;
	transform-origin: center !important;
	animation: spin 1s linear infinite !important;
	-webkit-animation: spin 1s linear infinite !important;
	-moz-animation: spin 1s linear infinite !important;
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes notifal-spin {
	0% { -webkit-transform: rotate(0deg) !important; }
	100% { -webkit-transform: rotate(360deg) !important; }
}

@-moz-keyframes notifal-spin {
	0% { 
		-moz-transform: rotate(0deg) !important; 
		transform: rotate(0deg) !important; 
	}
	100% { 
		-moz-transform: rotate(360deg) !important; 
		transform: rotate(360deg) !important; 
	}
}

@-o-keyframes notifal-spin {
	0% { -o-transform: rotate(0deg) !important; }
	100% { -o-transform: rotate(360deg) !important; }
}

@keyframes notifal-spin {
	0% { transform: rotate(0deg) !important; }
	100% { transform: rotate(360deg) !important; }
}

/* Error States */
div.notifal-login-container input.error {
	border-color: #dc2626 !important;
}

div.notifal-login-container input.error:focus {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Mobile Responsive */
@media (max-width: 480px) {
	div.notifal-login-container {
		margin: 20px 16px !important;
		padding: 24px 20px !important;
	}
	
	div.notifal-login-container div.otc-inputs-container {
		gap: 8px !important;
	}
	
	div.notifal-login-container input.otc-input {
		width: 50px !important;
		height: 50px !important;
		font-size: 18px !important;
	}
}