/**
 * CF7 Ultimate Add-ons — Multiple Select styles.
 *
 * Small adjustments layered on top of the bundled Select2 theme so the control
 * lines up with typical Contact Form 7 inputs. Scoped to .cf7ua-multiselect
 * fields to avoid touching other Select2 instances on the page.
 */

/* Match a full-width CF7 input. */
.wpcf7 .cf7ua-multiselect + .select2-container {
	width: 100% !important;
	max-width: 100%;
}

/* Comfortable control height + border that reads like a CF7 text input. */
.wpcf7 .select2-container--default .select2-selection--multiple {
	min-height: 2.6em;
	padding: 0.15em 0.25em;
	border: 1px solid #c7ccd1;
	border-radius: 6px;
	cursor: text;
}

.wpcf7 .select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: #2563eb;
	box-shadow: 0 0 0 2px rgba( 37, 99, 235, 0.25 );
	outline: none;
}

/* Selected "pills". */
.wpcf7 .select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: #2563eb;
	border: 1px solid #1d4ed8;
	color: #fff;
	border-radius: 4px;
	padding: 0.1em 0.5em;
	margin-top: 0.3em;
}

.wpcf7 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: #dbe4ff;
	margin-right: 0.35em;
}

.wpcf7 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #fff;
}

/* Highlighted dropdown option. */
.wpcf7 .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: #2563eb;
}

/* Reflect CF7's invalid state on the Select2 control. */
.wpcf7 .cf7ua-multiselect.wpcf7-not-valid + .select2-container .select2-selection--multiple {
	border-color: #dc2626;
}