/**
 * ANH Two Step Login - Frontend Styles
 * Version: 1.0.0
 * Supports standalone form and PMPro integration
 */

/* ==========================================================================
   BASE STYLES & UTILITIES
   ========================================================================== */

/* Container */
#tsl {
	max-width: 500px;
}

/* Reset empty divs */
#tsl div:empty {
	display: none;
}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

/* Labels */
.tsl-label,
#tsl label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
}

/* Input fields - Base styles */
.tsl-input {
	margin-bottom: 12px;
}

#tsl input[type="text"],
#tsl input[type="email"],
#tsl input[type="password"] {
	margin-bottom: 12px;
	max-width: none;
}

/* Input validation states */
.tsl-input-invalid {
	border-color: #d63638 !important;
}

.tsl-input-valid {
	border-color: #00a32a !important;
}

#tsl-email:invalid:not(:placeholder-shown) {
	border-color: #d63638;
}

#tsl-email:valid {
	border-color: #00a32a;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

/* Main buttons */
#tsl-login {
	display: block;
	width: 100%;
	padding: 16px 20px;
}

/* Button states */
.tsl-btn-disabled,
#tsl button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Secondary button (Change Email) */
.tsl-btn-secondary,
#tsl-change-email {
	background: #999;
	padding: 8px 12px;
	font-size: 13px;
	color: #fff;
}

#tsl-change-email {
	border-color: #999;
}

.tsl-btn-secondary:hover:not(:disabled),
#tsl-change-email:hover:not(:disabled) {
	background: #444;
}

#tsl-reset-link {
	margin-top: 10px;
	margin-bottom: 0;
}

/* Icon button (password toggle) */
.tsl-btn-icon {
	background: none !important;
	border: none !important;
	padding: 8px !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	transition: color 0.2s;
	width: auto !important;
	min-width: 36px;
	height: 36px;
}

.tsl-btn-icon:hover {
	color: #0073aa;
	background: none !important;
}

.tsl-btn-icon:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   PASSWORD FIELD WITH TOGGLE
   ========================================================================== */

.tsl-password-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.tsl-password-wrapper input {
	flex: 1;
	padding-right: 45px; /* Space for toggle button */
}

.tsl-toggle-password {
	position: absolute;
	right: 8px;
	background: none !important;
	border: none !important;
	padding: 8px !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	transition: color 0.2s;
	width: auto !important;
	min-width: 36px;
	height: 36px;
}

.tsl-toggle-password:hover {
	color: #0073aa;
	background: none !important;
}

.tsl-toggle-password:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Icons */
.tsl-icon {
	display: block;
	pointer-events: none;
}

.tsl-eye-icon {
	display: block;
	pointer-events: none;
}

#tsl .tsl-eye-icon {
	color: #ccc;
}

/* ==========================================================================
   MESSAGES
   ========================================================================== */

/* Error/status messages */
.tsl-message, .members-login-notice  {
	display: block;
	color: #00a32a;
	font-size: 14px;
	min-height: 18px;
	line-height: 1.4;
	font-weight: 500;
	margin-top: 5px;
}

.tsl-message-error, .members-login-error {
	padding: 8px !important;
	border: 1px solid #CA0000;
	color: #CA0000 !important;
	border-radius: 3px;
	margin-top: 10px;
}

#tsl-msg1,
#tsl-msg2,
#tsl-reset-msg {
	display: block;
	color: #d63638;
	font-size: 13px;
	min-height: 18px;
	line-height: 1.4;
	font-weight: 500;
}

/* Success messages */
.tsl-message-success {
	color: #00a32a;
}

/* Info messages */
.tsl-message-info {
	color: #0073aa;
}

#tsl .tsl-notice {
	background:#f7f7f7; padding:10px 12px; border-radius:4px; margin-bottom:12px; border-left:3px solid #0073aa;
}
#tsl .tsl-alert {
	color: #CA0000 !important;
}

/* ==========================================================================
   RESET PASSWORD SECTION
   ========================================================================== */

.tsl-reset-copy {
	line-height: 1.6;
}

.tsl-reset-copy p {
	margin: 8px 0;
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 600px) {
	/* Prevent iOS zoom on input focus */
	.tsl-input,
	#tsl-email,
	#tsl-pass {
		font-size: 16px !important;
	}
	
	/* Full-width buttons */
	.tsl-btn-mobile-full,
	#tsl button {
		/*width: 100%;*/
		padding: 12px;
	}
	
	/* Smaller text */
	.tsl-reset-copy {
		font-size: 14px;
	}
}

/* ==========================================================================
   UTILITY CLASSES (Optional - for future use)
   ========================================================================== */

/* Spacing */
.tsl-mb-1 { margin-bottom: 8px; }
.tsl-mb-2 { margin-bottom: 12px; }
.tsl-mb-3 { margin-bottom: 16px; }

.tsl-mt-1 { margin-top: 8px; }
.tsl-mt-2 { margin-top: 12px; }
.tsl-mt-3 { margin-top: 16px; }

/* Flexbox utilities */
.tsl-flex { display: flex; }
.tsl-flex-center { 
	display: flex; 
	align-items: center; 
	justify-content: center; 
}
.tsl-flex-between { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
}
.tsl-gap-1 { gap: 8px; }
.tsl-gap-2 { gap: 12px; }

/* Text utilities */
.tsl-text-error { color: #d63638; }
.tsl-text-success { color: #00a32a; }
.tsl-text-info { color: #0073aa; }
.tsl-text-muted { color: #666; }

.tsl-text-sm { font-size: 13px; }
.tsl-text-base { font-size: 14px; }

.tsl-font-medium { font-weight: 500; }
.tsl-font-semibold { font-weight: 600; }

/* Display utilities */
.tsl-hidden { display: none !important; }
.tsl-block { display: block !important; }
.tsl-inline-block { display: inline-block !important; }

/* Position utilities */
.tsl-relative { position: relative; }
.tsl-absolute { position: absolute; }

/* Border utilities */
.tsl-border-error { border-color: #d63638 !important; }
.tsl-border-success { border-color: #00a32a !important; }
.tsl-border-info { border-color: #0073aa !important; }

/* Commented out - Theme should handle base styling */

#tsl input[type="text"],
#tsl input[type="email"],
#tsl input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
}

#tsl input[type="email"]:focus,
#tsl input[type="password"]:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 1px #0073aa;
}
/*
#tsl button {
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	background: #0073aa;
	color: white;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s;
}

#tsl button:hover:not(:disabled) {
	background: #005a87;
}
*/

/* ==========================================================================
   PMPRO INTEGRATION STYLES
   ========================================================================== */

/* Change email button styling */
#tsl-pmpro-change-email {
	background: #999 !important;
	color: #fff !important;
	border: none !important;
	padding: 8px 16px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	/*border-radius: 4px !important;*/
}

#tsl-pmpro-change-email:hover {
	background: #666 !important;
}

/* PMPro reset button */
/*
#tsl-pmpro-reset-btn {
	background: #217346;
	color: #fff;
	border: none;
	padding: 12px 20px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 4px;
	text-decoration: none;
	display: inline-block;
}

#tsl-pmpro-reset-btn:hover {
	background: #1a5c38;
}
*/
#tsl-pmpro-reset-btn {
	line-height: 1.5;
}

/* PMPro message styling */
#tsl-pmpro-msg {
	border-radius: 4px;
	font-size: 14px;
}

/* PMPro Turnstile container */
#tsl-pmpro-turnstile-container {
	margin: 15px 0;
}

/* Ensure notice box in PMPro matches standalone */
#tsl-pmpro-reset-ui > div:empty {
	display: none;
}
#tsl-pmpro-reset-ui .tsl-notice {
	background: #f7f7f7;
	padding: 10px 12px;
	border-radius: 4px;
	margin: 15px 0;
	border-left: 3px solid #0073aa;
}

#tsl-pmpro-reset-ui .tsl-notice p {
	margin: 8px 0;
	line-height: 1.5;
}

#tsl-pmpro-reset-ui .tsl-alert {
	color: #CA0000 !important;
}

/* Reset message in PMPro */
#tsl-pmpro-reset-msg-ui {
	font-size: 14px;
	font-weight: 500;
}