/* FormsProWP Frontend Styles */

/* Form Wrapper */
.fpw-form-wrapper {
	max-width: 720px;
	margin: 0 auto;
	padding: 20px;
}

/* Success Message */
.fpw-success-message {
	background: #d4edda;
	border: 1px solid #c3e6cb;
	border-radius: 6px;
	padding: 16px 20px;
	margin-bottom: 24px;
	color: #155724;
	font-size: 16px;
	line-height: 1.5;
}

/* Form */
.fpw-form {
	background: #fff;
	padding: 0;
}

/* Field */
.fpw-field {
	margin-bottom: 24px;
}

.fpw-label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
	color: #1d2327;
}

.fpw-required {
	color: #d63638;
	margin-left: 4px;
}

/* Input Fields */
.fpw-input,
.fpw-textarea,
.fpw-select,
.fpw-file {
	width: 100%;
	font-size: 16px;
	padding: 12px 16px;
	border: 1px solid #8c8f94;
	border-radius: 6px;
	line-height: 1.5;
	background: #fff;
	transition: border-color 0.2s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.fpw-input:focus,
.fpw-textarea:focus,
.fpw-select:focus,
.fpw-file:focus {
	outline: 2px solid #2271b1;
	outline-offset: 0;
	border-color: #2271b1;
}

.fpw-textarea {
	resize: vertical;
	min-height: 120px;
	font-family: inherit;
}

.fpw-select {
	background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 20px;
	padding-right: 40px;
}

.fpw-file {
	padding: 10px 12px;
	cursor: pointer;
}

/* Radio and Checkbox Groups */
.fpw-radio-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fpw-radio-label,
.fpw-checkbox-label {
	display: flex;
	align-items: center;
	font-size: 16px;
	cursor: pointer;
	color: #1d2327;
}

.fpw-radio-label input[type="radio"],
.fpw-checkbox-label input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin-right: 10px;
	cursor: pointer;
	flex-shrink: 0;
}

/* Help Text */
.fpw-help-text {
	margin-top: 6px;
	font-size: 14px;
	color: #646970;
	font-style: italic;
	line-height: 1.5;
}

/* Submit Button */
.fpw-submit-wrapper {
	margin-top: 32px;
}

.fpw-submit-button {
	background: #2271b1;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	padding: 14px 32px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s ease;
	width: 100%;
	max-width: 300px;
	display: block;
	margin: 0 auto;
}

.fpw-submit-button:hover {
	background: #135e96;
}

.fpw-submit-button:active {
	background: #0a4b78;
}

.fpw-submit-button:focus {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* Field Type Specific Styles */
.fpw-field-checkbox .fpw-checkbox-label {
	font-weight: normal;
}

.fpw-field-date .fpw-input {
	max-width: 200px;
}

.fpw-field-number .fpw-input {
	max-width: 200px;
}

/* Responsive */
@media (max-width: 768px) {
	.fpw-form-wrapper {
		padding: 16px;
	}

	.fpw-label {
		font-size: 15px;
	}

	.fpw-input,
	.fpw-textarea,
	.fpw-select,
	.fpw-radio-label,
	.fpw-checkbox-label {
		font-size: 16px; /* Prevent zoom on mobile */
	}

	.fpw-submit-button {
		font-size: 16px;
		padding: 12px 24px;
		max-width: 100%;
	}
}

/* Accessibility */
.fpw-input:invalid,
.fpw-textarea:invalid,
.fpw-select:invalid {
	border-color: #d63638;
}

.fpw-input:invalid:focus,
.fpw-textarea:invalid:focus,
.fpw-select:invalid:focus {
	outline-color: #d63638;
}

/* Loading State */
.fpw-form.fpw-loading .fpw-submit-button {
	opacity: 0.6;
	cursor: not-allowed;
}