/**
 * Form Field Wrapper Block Styles
 */

.wp-block-spectra-pro-form-field-wrapper {
	position: relative;
	display: flex;
	flex-wrap: wrap; // Allow error messages to wrap to new line
	align-items: center;
	width: 100%;

	// V1-style icon positioning - icons on LEFT with border separator
	.wp-block-spectra-pro-form-icon {
		position: absolute !important;
		bottom: auto !important; // Don't stretch - use fixed height
		min-width: 40px !important;
		height: 100% !important; // Fixed height: 40px input - 2px borders
		z-index: 2 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 10px !important;
		box-sizing: border-box !important;
		pointer-events: none !important;
	}

	// Input field is now a direct child (no wrapper div!)
	.spectra-form-input-field__input,
	.spectra-pro-form-input-field__input {
		width: 100%;
		flex: 1 1 auto; // Allow flex but don't let error messages affect height calculation
		flex-basis: 100%; // Take full width in flex container
		max-height: fit-content; // Don't grow with wrapper
		border: 1px solid #e6e7e9;
		border-radius: 3px;
		padding: 11px 15px;
	}

	// Add left padding when icon is present (icon is now a direct sibling to input)
	&.has-icon {

		.spectra-form-input-field__input,
		.spectra-pro-form-input-field__input {
			padding-left: 45px !important;
		}
	}

	// When icon block is present as direct sibling to input
	.wp-block-spectra-pro-form-icon + .spectra-form-input-field__input,
	.wp-block-spectra-pro-form-icon + .spectra-pro-form-input-field__input {
		padding-left: 45px !important;
	}

	// Error messages positioned absolutely - don't affect wrapper height
	// This prevents error messages from expanding the wrapper and affecting password toggle
	.spectra-pro-login-form__field-error-message,
	.spectra-pro-register-form__field-error-message,
	.spectra-pro-form-input-field__error-message {
		position: absolute !important;
		left: 0 !important;
		top: 100% !important; // Position below the wrapper
		width: 100% !important;
		display: block !important;
		color: #dc3232;
		font-size: 12px;
		margin-top: 4px !important;
		z-index: 1 !important; // Below input/toggle
	}

	// Password field adjustments - needs space for both left icon and right toggle
	&--password {

		.spectra-form-input-field__input,
		.spectra-pro-form-input-field__input {
			padding-right: 50px; // Extra space for password toggle on right
		}

		// Password toggle positioned relative to wrapper
		// Since error messages don't affect wrapper height anymore, height: 100% works perfectly
		.spectra-pro-form-input-field__password-toggle {
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0; // Creates height: 100% effect
			height: 100%; // Match wrapper height (which equals input height)
			width: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: transparent;
			border: none;
			cursor: pointer;
			z-index: 3;

			svg {
				width: 16px;
				height: 16px;
				color: #959595;
			}

			&:hover svg {
				color: #007cba;
			}

			// Initially show visible icon, hide hidden icon
			.spectra-pro-password-toggle__icon--visible {
				display: block;
			}

			.spectra-pro-password-toggle__icon--hidden {
				display: none;
			}
		}
	}
}

// Legacy compatibility styles for old login block classes
// Use consistent positioning with main V1 styles
.spectra-pro-login-form-pass-wrap--have-icon,
.spectra-pro-login-form-username-wrap--have-icon {
	position: relative;

	// Position the icon container, not the SVG directly (match v1 exactly)
	.wp-block-spectra-pro-form-icon {
		position: absolute !important;
		bottom: auto !important; // Don't stretch - use fixed height
		min-width: 40px !important;
		height: 100% !important; // Fixed height: 40px input - 2px borders
		z-index: 2 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 10px !important;
		box-sizing: border-box !important;
		pointer-events: none !important;
	}

	// Input padding for legacy compatibility (input is now direct child)
	input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
	.spectra-form-input-field__input,
	.spectra-pro-form-input-field__input {
		padding-left: 45px !important;
	}
}

// Ensure login forms specifically get V1 positioning with higher specificity
.wp-block-spectra-pro-login .wp-block-spectra-pro-form-field-wrapper {

	.wp-block-spectra-pro-form-icon {
		position: absolute !important;
		bottom: auto !important; // Don't stretch to bottom - fixed height instead
		min-width: 40px !important;
		height: 100% !important; // Fixed height: 40px input - 2px borders
		z-index: 2 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 10px !important;
		box-sizing: border-box !important;
		pointer-events: none !important;
	}

	// Ensure icon padding is applied in login forms (input is now direct sibling)
	&.has-icon,
	&:has(.wp-block-spectra-pro-form-icon) {

		.spectra-form-input-field__input,
		.spectra-pro-form-input-field__input {
			padding-left: 45px !important;
		}
	}

	// Alternative selector for sibling positioning (input is now direct sibling)
	.wp-block-spectra-pro-form-icon + .spectra-form-input-field__input,
	.wp-block-spectra-pro-form-icon + .spectra-pro-form-input-field__input {
		padding-left: 45px !important;
	}
}
