/**
 * Quote Enquiry Popup – form plugin adjustments.
 *
 * The core look comes from generic element rules in qep-popup.css. This
 * file only smooths over markup differences the generic rules cannot reach:
 * wrapper elements, validation messages and success boxes that use
 * plugin-specific classes. Every rule is scoped to .qep-popup, so forms
 * elsewhere on the site are unaffected.
 *
 * Disable with: add_filter( 'qep_load_integration_styles', '__return_false' );
 */

/* ==================================================================
 * Contact Form 7
 * ================================================================ */

/* Inputs are wrapped in an inline <span>; make it a block so width and
   validation tips line up. */
.qep-popup .wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

/* wpautop inserts <br> between a label and its field. */
.qep-popup .wpcf7-form label + br {
	display: none;
}

.qep-popup .wpcf7-not-valid-tip {
	display: block;
	margin: 6px 0 0;
	color: var(--qep-error);
	font-size: var(--qep-label-size);
	font-weight: 400;
	line-height: 1.4;
}

.qep-popup .wpcf7 form .wpcf7-response-output {
	margin: var(--qep-gap) 0 0;
	padding: 12px 14px;
	border: 1px solid var(--qep-warning);
	border-radius: var(--qep-field-radius);
	background: var(--qep-warning-bg);
	color: var(--qep-text);
	font-size: var(--qep-body-size);
	line-height: 1.5;
}

.qep-popup .wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--qep-success);
	background: var(--qep-success-bg);
}

.qep-popup .wpcf7 form.failed .wpcf7-response-output,
.qep-popup .wpcf7 form.aborted .wpcf7-response-output,
.qep-popup .wpcf7 form.spam .wpcf7-response-output {
	border-color: var(--qep-error);
	background: var(--qep-error-bg);
}

/* Spinner sits inside the button area instead of pushing layout around. */
.qep-popup .wpcf7-form p:has(> .wpcf7-submit),
.qep-popup .wpcf7-form .qep-submit {
	position: relative;
}

.qep-popup .wpcf7-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 16px;
	margin: -12px 0 0;
}

.qep-popup .wpcf7-list-item {
	margin: 0 16px 6px 0;
}

.qep-popup .wpcf7-list-item-label {
	font-size: var(--qep-body-size);
}

/* ==================================================================
 * Fluent Forms
 * ================================================================ */

.qep-popup .fluentform .ff-el-group {
	margin-bottom: var(--qep-gap);
}

.qep-popup .fluentform .ff-el-input--label {
	margin-bottom: 6px;
	line-height: 1.4;
}

.qep-popup .fluentform .ff-el-input--label label {
	margin: 0;
	color: var(--qep-label-color);
	font-size: var(--qep-label-size);
	font-weight: var(--qep-label-weight);
}

.qep-popup .fluentform .ff-el-is-required.asterisk-right label::after {
	margin-left: 3px;
	color: var(--qep-required-color);
}

/* Fluent's own error border rule is weaker than the core field rule. */
.qep-popup .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--qep-error);
}

.qep-popup .fluentform .error.text-danger,
.qep-popup .fluentform .ff-el-is-error .text-danger {
	margin-top: 6px;
	color: var(--qep-error);
	font-size: var(--qep-label-size);
	line-height: 1.4;
}

.qep-popup .fluentform .ff_submit_btn_wrapper {
	margin: 8px 0 0;
}

.qep-popup .ff-message-success {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--qep-success);
	border-radius: var(--qep-field-radius);
	background: var(--qep-success-bg);
	box-shadow: none;
	color: var(--qep-text);
	font-size: var(--qep-body-size);
}

.qep-popup .fluentform .ff-errors-in-stack {
	margin-top: var(--qep-gap);
	color: var(--qep-error);
}

/* Fluent's column containers collapse on narrow screens by viewport width;
   collapse them by popup width instead. */
@container qep-form (max-width: 459px) {
	.qep-popup .fluentform .ff-t-container {
		display: block;
	}

	.qep-popup .fluentform .ff-t-container .ff-t-cell {
		width: 100%;
		padding: 0;
	}
}