/**
 * Catalog Request Form — front-end styles.
 *
 * The `crf-form` class is added by assets/js/crf.js to the form whose
 * name matches the configured form name, so nothing here leaks onto
 * other Elementor forms.
 */

/* --- Custom container (e.g. .custom-elform-error-con) --- */
/* Collapsed until the JS writes the summary into it, so an empty box
   never shows above the form. */
.custom-elform-error-con:empty {
	display: none;
}

/* An Elementor HTML widget often renders a newline inside the div, which
   defeats :empty. The JS adds crf-has-errors when it writes the summary, so
   hide any container that does not have it. */
.custom-elform-error-con:not(.crf-has-errors) {
	display: none;
}

.custom-elform-error-con.crf-has-errors {
	display: block;
}

/* The summary carries its own padding and background, so a container you
   have already styled would double up. Nothing is applied to the container
   itself here beyond hiding it while empty. */

/* --- Error summary box --- */
.crf-error-summary {
	width: 100%;
	background: #f8d7da;
	color: #8a1f2b;
	border-radius: 3px;
	padding: 20px 22px;
	margin: 0 0 28px;
	font-style: italic;
	line-height: 1.6;
}

.crf-error-summary p {
	margin: 0 0 14px;
}

.crf-error-summary ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.crf-error-summary li {
	margin: 0;
}

/* Keep the summary first even if the theme makes the form a flex column. */
.elementor-form.crf-form {
	flex-direction: column;
}

.elementor-form.crf-form > .crf-error-summary {
	order: -1;
}

/* --- Hide only the form-level message Elementor appends --- */
/* The summary box replaces it. Inline per-field messages are kept, and
   styled further down, so each bad field explains itself too. */
.elementor-form.crf-form + .elementor-message-danger,
.elementor-form.crf-form .elementor-message-danger:not(.crf-error-summary):not(.elementor-help-inline):not(.elementor-error-message) {
	display: none !important;
}

/* --- Failed field groups --- */
.elementor-form.crf-form .elementor-field-group.elementor-error {
	background-color: #f8d7da;
	/* content-box keeps the pink out of Elementor's column gutter. */
	background-clip: content-box;
	border-radius: 3px;
}

.elementor-form.crf-form .elementor-field-group.elementor-error > .elementor-field-label {
	padding-top: 10px;
	color: #8a1f2b;
}

.elementor-form.crf-form .elementor-field-group.elementor-error > .elementor-field,
.elementor-form.crf-form .elementor-field-group.elementor-error > .elementor-select-wrapper,
.elementor-form.crf-form .elementor-field-group.elementor-error > .elementor-field-subgroup {
	margin-bottom: 10px;
}

.elementor-form.crf-form .elementor-field-group.elementor-error input,
.elementor-form.crf-form .elementor-field-group.elementor-error textarea,
.elementor-form.crf-form .elementor-field-group.elementor-error select {
	border-color: #8a1f2b;
}

/* --- Inline message under the field that failed --- */
.elementor-form.crf-form .elementor-field-group.elementor-error > .elementor-message,
.elementor-form.crf-form .elementor-field-group.elementor-error > .elementor-error-message {
	display: block;
	width: 100%;
	margin: 0 0 10px;
	color: #8a1f2b;
	font-size: 0.85em;
	font-style: italic;
	line-height: 1.4;
}

/* The field already carries a 10px gap; pull the message back up to it. */
.elementor-form.crf-form .elementor-field-group.elementor-error > .elementor-field + .elementor-message,
.elementor-form.crf-form .elementor-field-group.elementor-error > .elementor-select-wrapper + .elementor-message {
	margin-top: -6px;
}