/**
 * DESCRIPTION: Elementor-specific WPUF frontend form styles
 *
 * This file contains form styles scoped to the Elementor widget wrapper
 * to avoid conflicts with the theme and provide better Elementor integration.
 *
 * @package WPUF\Elementor
 */

// ============================================
// CSS Custom Properties (Variables)
// ============================================

.wpuf-elementor-widget-wrapper {
	--wpuf-border-color: #dadbdd;
	--wpuf-border-radius: 7px;
	--wpuf-text-color: #606266;
	--wpuf-primary-color: #1a7efb;
	--wpuf-danger-color: #F56C6C;

	// ============================================
	// Base Input Styles
	// ============================================

	.wpuf-fields input[type="text"],
	.wpuf-fields input[type="email"],
	.wpuf-fields input[type="url"],
	.wpuf-fields input[type="password"],
	.wpuf-fields input[type="number"],
	.wpuf-fields input[type="tel"],
	.wpuf-fields textarea,
	.wpuf-fields select {
		padding: 12px 15px;
		color: var(--wpuf-text-color);
		border: 1px solid var(--wpuf-border-color);
		border-radius: var(--wpuf-border-radius);
		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		margin-bottom: 0;
		width: 100%;

		&:focus {
			color: var(--wpuf-text-color);
			background-color: #fff;
			border-color: var(--wpuf-primary-color);
			outline: none;
			box-shadow: 0 0 0 2px rgba(26, 126, 251, 0.1);
		}
	}

	.wpuf-fields .wpuf-radio-block,
	.wpuf-fields .wpuf-checkbox-block {
		display: flex;
    	align-items: center;
		margin-bottom: 6px;
	}

	ul.wpuf-form {
		list-style: none;

		li:not(:first-child) {
			margin-top: 2rem;
		}

		li.wpuf-el {
			.wpuf-label {
				margin-bottom: 1rem;
			}
			
		}
	}

	// Container alignment based on data-align attribute
	&[data-align="left"] {
		margin: 0 auto 0 0;
	}

	&[data-align="center"] {
		margin: 0 auto;
	}

	&[data-align="right"] {
		margin: 0 0 0 auto;
	}

	// Full width submit button
	&.wpuf-elementor-submit-full .wpuf-submit .wpuf-submit-button {
		width: 100%;
		display: block;
	}

	// Full width upload button
	&.wpuf-elementor-upload-full .wpuf-attachment-upload-filelist .file-selector {
		width: 100%;
		display: block;
	}

	// Hide labels option
	&.wpuf-elementor-hide-labels .wpuf-label {
		display: none !important;
	}

	// Hide error messages option
	&.wpuf-elementor-hide-errors .wpuf-error,
	&.wpuf-elementor-hide-errors .error {
		display: none;
	}

	// Hide placeholder option
	&.wpuf-elementor-hide-placeholder input::-webkit-input-placeholder,
	&.wpuf-elementor-hide-placeholder textarea::-webkit-input-placeholder {
		opacity: 0;
		visibility: hidden;
	}

	&.wpuf-elementor-hide-placeholder input::-moz-placeholder,
	&.wpuf-elementor-hide-placeholder textarea::-moz-placeholder {
		opacity: 0;
		visibility: hidden;
	}

	&.wpuf-elementor-hide-placeholder input:-moz-placeholder,
	&.wpuf-elementor-hide-placeholder textarea:-moz-placeholder {
		opacity: 0;
		visibility: hidden;
	}

	&.wpuf-elementor-hide-placeholder input:-ms-input-placeholder,
	&.wpuf-elementor-hide-placeholder textarea:-ms-input-placeholder {
		opacity: 0;
		visibility: hidden;
	}

	&.wpuf-elementor-hide-placeholder input::-ms-input-placeholder,
	&.wpuf-elementor-hide-placeholder textarea::-ms-input-placeholder {
		opacity: 0;
		visibility: hidden;
	}

	// Custom radio/checkbox styling
	&.wpuf-elementor-custom-radio-checkbox input[type="checkbox"],
	&.wpuf-elementor-custom-radio-checkbox input[type="radio"] {
		outline: none;
		min-width: 1px;
		width: 15px;
		height: 15px;
		background: #ddd;
		padding: 3px;
	}

	&.wpuf-elementor-custom-radio-checkbox input[type="radio"] {
		border-radius: 50%;
	}

	// Submit button alignment
	&.wpuf-elementor-submit-center .wpuf-submit {
		text-align: center;

		.wpuf-submit-button {
			margin: 0 auto;
			display: inline-flex;
			align-items: center;
			justify-content: center;
		}
	}

	&.wpuf-elementor-submit-right .wpuf-submit {
		text-align: right;
	}

	&.wpuf-elementor-submit-left .wpuf-submit {
		text-align: left;
	}

	// ============================================
	// Math Captcha Styles
	// ============================================

	.wpuf-math-captcha {
		.captcha {
			display: flex;
			align-items: center;
			gap: 10px;
			flex-wrap: wrap;

			.refresh {
				cursor: pointer;
				transition: opacity 0.2s ease;

				&:hover {
					opacity: 0.7;
				}

				svg {
					display: block;
				}
			}

			.captcha-number-area {
				.captcha-number {
					display: flex;
					align-items: center;
					gap: 5px;
					margin: 0;
					font-size: 16px;
					font-weight: 500;
					color: var(--wpuf-text-color);
				}
			}

			.captcha-equal {
				font-size: 18px;
				font-weight: 600;
				color: var(--wpuf-text-color);
			}

			.wpuf-captcha-input-wrapper {
				flex: 1;
				min-width: 80px;
				position: relative;

				.wpuf-captcha-input {
					padding: 11px 15px;
					color: var(--wpuf-text-color);
					border: 1px solid var(--wpuf-border-color);
					border-radius: var(--wpuf-border-radius);
					transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
					margin-bottom: 0;
					width: 100%;
					font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

					&:focus {
						color: var(--wpuf-text-color);
						background-color: #fff;
						border-color: var(--wpuf-primary-color);
						outline: none;
						box-shadow: 0 0 0 2px rgba(26, 126, 251, 0.1);
					}
				}

				.wpuf-captcha-error {
					display: block;
					margin-top: 5px;
					font-size: 13px;
					color: var(--wpuf-danger-color);
				}
			}
		}
	}
}

// Ensure lity popup appears above Elementor popup
.lity {
	z-index: 9999 !important;
}