/**
 * JF Industry & Position Filter - Language filter Select2 safety net.
 *
 * CONFIRMED VIA SOURCE TRACE (not a blind CSS patch):
 *
 *  - jobtex/css/template.css ALREADY contains complete, correct
 *    styling for Select2's multi-select mode:
 *      .select2-container.select2-container--default .select2-selection--multiple { border, min-height:50px, ... }
 *      ...select2-selection__choice { chip background/padding/radius }
 *      ...select2-selection__choice__remove { the "x" remove control }
 *      ...select2-selection--multiple .select2-selection__rendered { padding }
 *      ...select2-selection--multiple input[type="text"] { search field sizing }
 *    These rules are NOT scoped to a specific field - they should
 *    apply to ANY multi-select Select2 instance on the site
 *    automatically, including Language.
 *
 *  - The native rendering path for a multi-select filter field
 *    (WP_Job_Board_Pro_Abstract_Filter::filter_field_multiselect(),
 *    templates/widgets/filter-fields/multiselect.php) outputs
 *    <select multiple name="..." class="form-control" ...> - the
 *    SAME class every other working single-select filter
 *    (Country/Region/City/Industry/etc) uses, and JobTex's blanket
 *    Select2 initializer in js/job.js
 *    ($('.filter-listing-form select:not(.select-taxonomy-search, .select-field-region-search)').select2(...))
 *    includes it with no special-casing needed - Select2 auto-detects
 *    the native 'multiple' HTML attribute and switches modes itself.
 *  - The shared Select2 init options
 *    (includes/class-scripts.php: $select2_args = ['width'=>'100%', ...])
 *    are generic and apply uniformly to every select on the site -
 *    there is no per-field override that would disable multi-mode.
 *
 * So on paper, using the confirmed native mechanism should already
 * render correctly with zero extra CSS. This file is a defensive,
 * narrowly-scoped reinforcement for the one specific case reported as
 * broken - it re-asserts the theme's OWN already-designed multi-select
 * rules, scoped ONLY to .form-group-language (the confirmed live
 * wrapper class), so they win regardless of any CSS load-order or
 * specificity issue between this stylesheet and the theme's. It does
 * not invent new design, remove Select2, or touch any other filter -
 * every selector below is prefixed with .form-group-language and
 * mirrors the theme's own values.
 *
 * If the live "Language" field turns out to be using a different
 * field_call_back than filter_field_multiselect at all (checked via
 * Tools -> JFR Diagnostics -> "Live available filter fields" table,
 * now flagged automatically), that is a renderer-selection problem,
 * not a styling problem, and this CSS alone will not fix it - see the
 * chat report.
 */

.form-group-language .select2-container.select2-container--default .select2-selection--multiple {
	border: 1px solid #E5E5E5;
	border-radius: 4px;
	background: #fff;
	min-height: 50px;
	height: auto;
	width: 100%;
	box-sizing: border-box;
}

.form-group-language .select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 5px 15px 5px;
	margin: 0;
	list-style: none;
	width: 100%;
	box-sizing: border-box;
}

.form-group-language .select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice {
	border: 0;
	background: #F1F1F1;
	font-size: 1rem;
	padding: 3px 10px;
	border-radius: 4px;
	margin: 3px 6px 3px 0;
	max-width: 100%;
	white-space: normal;
	word-break: break-word;
}

.form-group-language .select2-container.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	float: none;
	margin-left: 6px;
	line-height: 1;
	display: inline-block;
}

.form-group-language .select2-container.select2-container--default .select2-selection--multiple .select2-search--inline {
	flex: 1 1 auto;
	min-width: 60px;
	margin: 3px 0;
}

.form-group-language .select2-container.select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
	width: 100% !important;
	min-width: 60px;
	margin-top: 0 !important;
	height: auto;
	background: transparent !important;
	border: 0;
	box-sizing: border-box;
}