/* ============================================================
   FxM WP Form Builder for Divi - Frontend Form Styles
   ============================================================ */

.fxm-form-wrap {
	box-sizing: border-box;
}

.fxm-form {
	width: 100%;
}

/* Fields row layout */
.fxm-form-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* Reset theme-inherited vertical margins so our gap controls spacing.
   Divi adds margin-bottom to inputs/selects/textareas and paragraphs, which
   stacks on top of our gap and makes the form look too tall. */
.fxm-form .fxm-input,
.fxm-form .fxm-checkbox-label,
.fxm-form .fxm-radio-label,
.fxm-form p {
	margin-bottom: 0 !important;
}

/* Field wrapper */
.fxm-field-wrap {
	box-sizing: border-box;
	flex-shrink: 0;
	margin-bottom: 0 !important;
}
.fxm-width-100 { width: 100% !important; flex-basis: 100% !important; }
.fxm-width-50  { width: calc(50% - 8px) !important; flex-basis: calc(50% - 8px) !important; }
.fxm-width-33  { width: calc(33.333% - 11px) !important; flex-basis: calc(33.333% - 11px) !important; }

/* Labels */
.fxm-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	margin-bottom: 6px;
}
.fxm-required {
	color: #e53935;
}

/* Inputs */
.fxm-input {
	display: block;
	width: 100%;
	padding: 10px 14px;
	font-size: 16px;
	color: #333;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	transition: border-color 0.2s, box-shadow 0.2s;
	-webkit-appearance: none;
	appearance: none;
}
.fxm-input:focus {
	outline: none;
	border-color: #2271b1;
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}
.fxm-input.fxm-error {
	border-color: #e53935;
	box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
}
.fxm-textarea {
	min-height: 120px;
	resize: vertical;
}
.fxm-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
	cursor: pointer;
}

/* Helper text */
.fxm-field-description {
	font-size: 12px;
	color: #888;
	margin: 4px 0 0;
}

/* Error messages — take no vertical space until an error is actually shown
   (JS fills the span with text on validation failure and clears it otherwise). */
.fxm-error-msg {
	display: block;
	font-size: 12px;
	color: #e53935;
}
.fxm-error-msg:not(:empty) {
	margin-top: 4px;
}

/* Checkbox */
.fxm-field-type-checkbox .fxm-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.4;
}
.fxm-checkbox {
	width: auto;
	margin-top: 3px;
	flex-shrink: 0;
}

/* Checkbox group (multi-select options) */
.fxm-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Radio group */
.fxm-radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fxm-radio-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 15px;
}
.fxm-radio-label input[type="radio"] {
	width: auto;
	flex-shrink: 0;
}

/* Section / Divider */
.fxm-field-type-section {
	width: 100%;
	padding: 8px 0 0;
}
.fxm-section-hr {
	border: none;
	border-top: 2px solid #e0e0e0;
	margin: 0 0 16px;
}
.fxm-section-heading {
	font-size: 18px;
	font-weight: 700;
	color: #1a237e;
	margin: 0 0 4px;
}
.fxm-section-description {
	font-size: 14px;
	color: #666;
	margin: 0 0 8px;
}

/* Submit Button */
.fxm-field-submit {
	width: 100%;
	margin-top: 8px;
}
.fxm-submit-btn {
	display: inline-block;
	padding: 12px 32px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: #1a237e;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
}
.fxm-submit-btn:hover {
	background: #283593;
}
.fxm-submit-btn:active {
	transform: scale(0.98);
}
.fxm-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Form-level messages */
.fxm-form-messages {
	margin-top: 16px;
	border-radius: 4px;
	font-size: 15px;
}
.fxm-form-messages.fxm-msg-success {
	padding: 16px 20px;
	background: #e8f5e9;
	color: #1b5e20;
	border: 1px solid #a5d6a7;
}
.fxm-form-messages.fxm-msg-error {
	padding: 16px 20px;
	background: #ffebee;
	color: #b71c1c;
	border: 1px solid #ef9a9a;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 640px) {
	.fxm-width-50,
	.fxm-width-33 {
		width: 100%;
	}
	.fxm-submit-btn {
		width: 100%;
		text-align: center;
	}
}