/**
 * Choices.js customizations and enforced CSS for FLEXIcontent
 * Matching the select2 overrides in flexi_shared.less / flexi_form.less
 */

/* ===========================
   SINGLE SELECT - Core sizing
   =========================== */

#flexicontent .choices,
.choices {
	margin: 0;
	min-height: calc(var(--form-inp-height) - 2px);
	line-height: calc(var(--form-inp-height) - 4px);
	vertical-align: baseline;
	padding: 0;
}

#flexicontent .choices .choices__inner,
.choices .choices__inner {
	padding: 0 7px !important;
	margin: 0 !important;
	font-weight: normal !important;
	display: flex !important;
	align-items: center !important;
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 4px) !important;
	height: auto !important;
	box-sizing: border-box !important;
	background: var(--form-control-bg, #fff) !important;
	border-radius: var(--border-radius, 0) !important;
	border: var(--form-control-border, 1px solid var(--input-border-color, #aaa)) !important;
}

/* Frontend : Cassiopeia ne définit pas --form-control-* mais définit
   --border-radius (.25rem). On fige 5px uniquement hors backend pour
   donner aux selects choices un bord arrondi cohérent sur le front,
   indépendant des variables du template. En backend (body.admin), ce sont
   les variables Atum qui s'appliquent. */
body:not(.admin) .choices {
	--border-radius: 5px;
}

#flexicontent.fcconfig-form .choices .choices__inner {
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 4px) !important;
}

html[dir="rtl"] .choices .choices__inner {
	padding: 0 8px 0 0 !important;
}

.choices .choices__item--selectable {
	color: inherit;
	white-space: pre-wrap !important;
	padding: 0 !important;
	min-height: calc(var(--form-inp-height) - 4px) !important;
	line-height: calc(var(--form-inp-height) - 4px) !important;
}

.choices .choices__list--single .choices__item--selectable {
	padding: 0 7px !important;
}

/* The base choices.css adds 4px top/bottom padding to .choices__list--single,
   which makes the closed box 6px taller than a same-height input placed
   beside it (single-select textselect field). Zero it so the box matches
   the input height and they align vertically. */
/* Single-select list: restore the original padding (0 top/bottom, 16px right
   for the arrow reserve, 4px left) so the closed box keeps its original look,
   while the vertical padding fix still applies. */
.choices .choices__list--single {
	padding: 0 16px 0 4px !important;
}

/* The template .form-control (Atum .5rem / Bootstrap .375rem vertical padding)
   makes the input taller than the choices box next to it, because flexicontent
   forces min-height --form-inp-height but not the vertical padding. Neutralize
   the vertical padding on inputs in the inline (.fc-xpended) layouts so the
   input and the choices box have exactly the same height. */
#flexicontent .fc-xpended > input,
#flexicontent .fc-xpended-row > input {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.choices .choices__button {
	border-left: 0px solid #aaa !important;
	background: none !important;
	margin: 0 !important;
	padding: 0 2px !important;
	background-image: url('../images/select2.png') !important;
	background-position: right center !important;
	background-repeat: no-repeat !important;
	text-indent: 0 !important;
	width: auto !important;
	height: auto !important;
	font-size: 0 !important;
}

/* Form validation failed */
.choices.invalid .choices__inner {
	border-color: red !important;
}

/* Placeholder text */
.choices .choices__placeholder {
	color: #999 !important;
	opacity: 1 !important;
}

/* Focus state */
.choices.is-focused .choices__inner {
	border-color: #5897fb !important;
	outline: 0 !important;
	box-shadow: none !important;
}


/* ===========================
   MULTI SELECT - Core
   =========================== */

.choices .choices__list--multiple {
	list-style-type: none !important;
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	padding: 0px !important;
	margin: 0 !important;
	white-space: normal !important;
	width: auto !important;
	min-width: 2rem !important;
	min-height: 1.9rem !important;
	line-height: 1.9rem !important;
	display: flex !important;
	flex-wrap: wrap !important;
}

/* The chips container (.choices__list--multiple) is created by choices.js and
   IS required: selected values (tags) are rendered inside it. But when no value
   is selected it must not reserve any horizontal space, otherwise the cloned
   input (and its placeholder) is pushed to the right by the 2rem min-width. */
.choices .choices__list--multiple:empty {
	min-width: 0 !important;
}

/* Same in the backend items manager filter box, where the list grows (flex:1 1 auto) */
#fc-filters-box .choices[data-type*="select-multiple"] .choices__list--multiple:empty {
	flex-grow: 0 !important;
}

.choices .choices__list--multiple .choices__item {
	box-sizing: content-box !important;
	display: inline-flex !important;
	align-items: center !important;
	border-radius: var(--border-radius, 0) !important;
	margin: 1px !important;
	padding: 0 4px !important;
	min-height: 1.7rem !important;
	line-height: 1.7rem !important;
	font-size: 0.9rem !important;
	background-color: var(--choices-list-multiple-item-bg, var(--form-control-bg, #fff)) !important;
	border: 1px solid var(--choices-list-multiple-item-bg, var(--input-border-color, #aaa)) !important;
	color: var(--choices-list-multiple-item, inherit) !important;
	word-break: break-word !important;
}

.choices .choices__list--multiple .choices__button {
	/* Inline SVG icon (same as the admin theme) instead of the select2 sprite:
	   the sprite was painted outside of the button box, and the box itself was
	   4x0 px, so a selected value could not be unchecked */
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%236b6b6b' d='M1.4 0L0 1.4l2.6 2.6L0 6.6 1.4 8 4 5.4 6.6 8 8 6.6 5.4 4 8 1.4 6.6 0 4 2.6z'/%3E%3C/svg%3E") !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 8px 8px !important;
	text-indent: 0 !important;
	padding: 0 !important;
	margin: -1px 0 0 2px !important;
	font-size: 0 !important;
	width: 12px !important;
	height: 12px !important;
	min-width: 12px !important;
	min-height: 12px !important;
	vertical-align: middle !important;
	cursor: pointer !important;
	border: 0 !important;
	background-color: transparent !important;
	color: #999 !important;
	opacity: 0.8 !important;
}

.choices .choices__list--multiple .choices__button:hover {
	color: #666 !important;
	opacity: 1 !important;
}

/* The placeholder is rendered as an item, but it must not be removable */
.choices .choices__list--multiple .choices__item[data-value=""] .choices__button {
	display: none !important;
}

/* Search field in multi-select */
.choices .choices__input--cloned {
	padding: 0px !important;
	margin: 0px 2px !important;
	line-height: 1em !important;
	position: relative !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
}

.choices__input--cloned {
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 2px) !important;
	padding: 0 7px !important;
	margin-top: 1px !important;
	box-sizing: content-box !important;
	background: #fff !important;
	background-image: url('../images/select2.png') !important;
	background-repeat: no-repeat !important;
	background-position: 93% -22px !important;
	border: 0px solid lightgray !important;
	cursor: pointer !important;
	min-width: 32px !important;
	width: 22px !important;
}

.choices.is-open .choices__input--cloned {
	min-width: 124px !important;
	width: auto !important;
	cursor: default !important;
	padding: 2px 6px 2px 26px !important;
	background-position: -32px -22px !important;
}


/* ===========================
   DROPDOWN
   =========================== */

.choices__list--dropdown {
	padding: 0px !important;
}

/* Search input inside dropdown (single-select) */
.choices__list--dropdown .choices__input {
	display: block !important;
	width: 100% !important;
	padding: 6px 8px !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #ddd !important;
	font-size: 0.9rem !important;
	background: #f7f7f7 !important;
	box-sizing: border-box !important;
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 2px) !important;
}

.choices__list--dropdown .choices__input:focus {
	outline: 0 !important;
	background: #fff !important;
}

.choices__list--dropdown .choices__list {
	padding: 0px !important;
	max-height: 400px !important;
	overflow-y: auto !important;
}

.choices__list--dropdown .choices__item {
	padding: 0 2px 0 1rem !important;
	font-size: 0.9rem !important;
	line-height: 1.9rem !important;
	min-height: 1.9rem !important;
	cursor: pointer !important;
	white-space: normal !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: #d8d8d8 !important;
	color: #fff !important;
}

.choices__list--dropdown .choices__item--disabled {
	opacity: 0.6 !important;
	font-style: italic !important;
}

/* Manager header (scope selector next to the search box): the .choices box is only as wide as
   the selected label, so let the dropdown be wider than it, keep text on 1 line, and stack it
   above neighbouring controls (thumb sliders, toolbars, etc.) */
#fc-managers-header .choices.is-open,
#fc-managers-header .choices.is-focused {
	z-index: 1000;
}

#fc-managers-header .choices__list--dropdown,
#fc-managers-header .choices__list[aria-expanded] {
	min-width: 240px;
	z-index: 1000 !important;
}

#fc-managers-header .choices__list--dropdown .choices__item {
	white-space: nowrap !important;
}

/* Dropdown border when active */
.choices.is-open .choices__list--dropdown {
	border: 1px solid #aaa !important;
	border-radius: 0 0 var(--border-radius, 0) var(--border-radius, 0) !important;
}


/* ===========================
   FILTER BOX OVERRIDES
   =========================== */

#flexicontent .fc_filter_box .choices,
.fc_filter_box .choices {
	height: unset !important;
	min-height: var(--filts-inp-height) !important;
	line-height: var(--filts-inp-height) !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#flexicontent .fc_filter_box .choices .choices__inner,
.fc_filter_box .choices .choices__inner {
	height: unset !important;
	min-height: var(--filts-inp-height) !important;
	line-height: var(--filts-inp-height) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#flexicontent .fc_filter_box .choices .choices__input--cloned,
.fc_filter_box .choices .choices__input--cloned {
	height: unset !important;
	min-height: calc(var(--filts-inp-height) - 2px) !important;
	line-height: calc(var(--filts-inp-height) - 2px) !important;
	padding: 0 4px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#flexicontent .fc_filter_box .choices .choices__list--multiple,
.fc_filter_box .choices .choices__list--multiple {
	height: unset !important;
	min-height: var(--filts-inp-height) !important;
	line-height: var(--filts-inp-height) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}


/* ===========================
   BACKEND MANAGER FILTER BOX (#fc-filters-box) — MULTI-SELECT FIX
   =========================== */
/* The outer .choices__inner is display:flex nowrap (see above) while the
   cloned search input is a sibling of the chips list. The input expands to
   min-width:124px on .is-open, so with nowrap it stole the row width and the
   chips list (.choices__list--multiple) got squeezed. Allow wrapping so the
   input moves to its own line instead of compressing the list. */

#fc-filters-box .choices[data-type*="select-multiple"] .choices__inner {
	flex-wrap: wrap !important;
}

#fc-filters-box .choices[data-type*="select-multiple"] .choices__list--multiple {
	flex: 1 1 auto !important;
}

#fc-filters-box .choices[data-type*="select-multiple"] .choices__input--cloned {
	flex: 0 0 auto !important;
}

#fc-filters-box .choices[data-type*="select-multiple"].is-open .choices__input--cloned {
	flex: 1 1 100% !important;
}


/* ===========================
   INPUT GROUP SIZING (form-inp-height)
   =========================== */

.input-prepend .choices,
.input-append .choices,
.input-group .choices {
	height: unset !important;
	min-height: var(--form-inp-height) !important;
	line-height: var(--form-inp-height) !important;
	box-sizing: border-box !important;
}

.input-prepend .choices .choices__inner,
.input-append .choices .choices__inner,
.input-group .choices .choices__inner {
	height: unset !important;
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 2px) !important;
}

.input-prepend .choices .choices__input--cloned,
.input-append .choices .choices__input--cloned,
.input-group .choices .choices__input--cloned {
	min-height: calc(var(--form-inp-height) - 2px) !important;
	line-height: calc(var(--form-inp-height) - 2px) !important;
}

.input-prepend .choices .choices__list--multiple,
.input-append .choices .choices__list--multiple,
.input-group .choices .choices__list--multiple {
	min-height: var(--form-inp-height) !important;
	line-height: var(--form-inp-height) !important;
}


/* ===========================
   MANAGER INPUT GROUP SIZING (fcman-inp-height)
   =========================== */

#j-main-container .fc-xpended .choices,
#j-main-container .btn-group .choices {
	min-height: var(--fcman-inp-height) !important;
	line-height: var(--fcman-inp-height) !important;
}

#j-main-container .fc-xpended .choices .choices__inner,
#j-main-container .btn-group .choices .choices__inner {
	min-height: calc(var(--fcman-inp-height) - 2px) !important;
	line-height: calc(var(--fcman-inp-height) - 2px) !important;
}

#j-main-container .fc-xpended .choices .choices__input--cloned,
#j-main-container .btn-group .choices .choices__input--cloned {
	min-height: calc(var(--fcman-inp-height) - 2px) !important;
	line-height: calc(var(--fcman-inp-height) - 2px) !important;
}

#j-main-container .fc-xpended .choices .choices__list--multiple,
#j-main-container .btn-group .choices .choices__list--multiple {
	min-height: var(--fcman-inp-height) !important;
	line-height: var(--fcman-inp-height) !important;
}


/* ===========================
   FLOATED-LABEL MODE
   =========================== */

.flexicontent > div.use_select2_lib .choices,
.flexicontent > .choices {
	width: 100% !important;
}

.flexicontent > div.use_select2_lib .choices .choices__inner,
.flexicontent > .choices .choices__inner {
	border-radius: 0 !important;
	border: 1px solid transparent !important;
	border-bottom: 1px solid gray !important;
	padding: 0 0 0 0px !important;
}

.flexicontent > div.use_select2_lib:not(.is-focused) .choices .choices__inner,
.flexicontent > .choices:not(.is-focused) .choices__inner {
	background: transparent !important;
	box-shadow: unset !important;
}


/* ===========================
   CHECKBOX MODE (multi-select with checkboxes)
   =========================== */

/* Force vertical stacking inside the checkbox dropdown */
.choices__list--dropdown .choices__list--choice {
	display: block !important;
	width: 100% !important;
}

.fc-choices-checkbox-item {
	display: flex !important;
	align-items: center !important;
	padding: 2px 8px !important;
	cursor: pointer !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.fc-choices-checkbox {
	margin-right: 6px !important;
	cursor: pointer !important;
}

.fc-choices-checkbox-label {
	cursor: pointer !important;
	line-height: 1.9rem !important;
}


/* ===========================
   SORTABLE
   =========================== */

.fc-choices-ghost {
	opacity: 0.4 !important;
}

.fc-choices-drag {
	background: #e8e8e8 !important;
	border: 1px dashed #aaa !important;
}

/* Drag handle prepended to each sortable tag */
.fc-select2-handle {
	display: inline-block !important;
	width: 1rem !important;
	min-width: 1rem !important;
	text-align: center !important;
	cursor: grab !important;
	user-select: none !important;
	opacity: 0.7 !important;
	font-size: 0.85rem !important;
	line-height: 1 !important;
	color: inherit !important;
}

.fc-select2-handle:hover {
	opacity: 1 !important;
}

.fc-select2-handle:active {
	cursor: grabbing !important;
}


/* ===========================
   INNER LABELS & PROMPTS
   =========================== */

.fc_has_inner_label_choices,
.fc_has_inner_prompt_choices {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	color: #999;
	font-style: italic;
	padding: 0 7px;
	line-height: calc(var(--form-inp-height) - 4px);
	min-height: calc(var(--form-inp-height) - 4px);
}

.fc_has_inner_prompt_choices {
	display: none;
}

.choices__inner {
	position: relative !important;
}


/* ===========================
   MARKER IMAGE (addressint)
   =========================== */

.fc-marker-img {
	max-height: 20px;
	vertical-align: middle;
	margin-right: 4px;
}


/* ===========================
   RTL SUPPORT
   =========================== */

html[dir="rtl"] .choices .choices__inner {
	padding: 0 8px 0 0 !important;
}

html[dir="rtl"] .choices .choices__list--multiple .choices__item {
	margin-left: 0 !important;
	margin-right: 1px !important;
}

html[dir="rtl"] .choices .choices__button {
	margin-left: 0 !important;
	margin-right: 2px !important;
}

html[dir="rtl"] .choices .choices__list--multiple .choices__button {
	margin: -1px 2px 0 0 !important;
}

html[dir="rtl"] .fc_has_inner_label_choices,
html[dir="rtl"] .fc_has_inner_prompt_choices {
	right: 0;
	left: auto;
}


/* ===========================
   DARK MODE (Joomla 5/6, data-bs-theme)
   =========================== */

[data-bs-theme="dark"] .choices .choices__inner {
	background: var(--body-bg, #26282b) !important;
	border-color: var(--border-color, #4a4a4a) !important;
	color: var(--body-color, #dee1e6) !important;
}

[data-bs-theme="dark"] .choices.is-focused .choices__inner,
[data-bs-theme="dark"] .choices.is-open .choices__inner {
	border-color: #4c8bf5 !important;
}

[data-bs-theme="dark"] .choices .choices__placeholder {
	color: var(--text-muted, #999999) !important;
}

[data-bs-theme="dark"] .choices .choices__item {
	color: var(--body-color, #dee1e6) !important;
}

[data-bs-theme="dark"] .choices .choices__list--multiple .choices__item {
	background: var(--template-bg-dark-40, #3a3d42) !important;
	border-color: var(--border-color, #555) !important;
	color: var(--body-color, #dee1e6) !important;
}

[data-bs-theme="dark"] .choices .choices__button {
	background-image: none !important;
}

[data-bs-theme="dark"] .choices .choices__list--multiple .choices__button {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23dee1e6' d='M1.4 0L0 1.4l2.6 2.6L0 6.6 1.4 8 4 5.4 6.6 8 8 6.6 5.4 4 8 1.4 6.6 0 4 2.6z'/%3E%3C/svg%3E") !important;
	color: var(--text-muted, #999) !important;
}

[data-bs-theme="dark"] .choices .choices__list--multiple .choices__button:hover {
	color: var(--body-color, #fff) !important;
}

[data-bs-theme="dark"] .choices .choices__input--cloned,
[data-bs-theme="dark"] .choices__list--dropdown .choices__input {
	background: var(--body-bg, #26282b) !important;
	background-image: none !important;
	color: var(--body-color, #dee1e6) !important;
	border-bottom-color: var(--border-color, #4a4a4a) !important;
}

[data-bs-theme="dark"] .choices__list--dropdown .choices__input:focus {
	background: var(--body-bg, #26282b) !important;
}

[data-bs-theme="dark"] .choices__list--dropdown {
	background: var(--body-bg, #26282b) !important;
	border-color: var(--border-color, #4a4a4a) !important;
}

[data-bs-theme="dark"] .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: var(--template-bg-dark-40, #4a4d52) !important;
	color: var(--body-color, #fff) !important;
}

[data-bs-theme="dark"] .choices[data-type*=select-one]::after {
	border-color: var(--body-color, #dee1e6) transparent transparent transparent;
}

[data-bs-theme="dark"] .choices[data-type*=select-one].is-open::after {
	border-color: transparent transparent var(--body-color, #dee1e6);
}

[data-bs-theme="dark"] .choices.is-disabled .choices__inner,
[data-bs-theme="dark"] .choices.is-disabled .choices__input {
	background-color: var(--template-bg-dark-80, #1f2124) !important;
}

[data-bs-theme="dark"] .fc-choices-checkbox-label {
	color: var(--body-color, #dee1e6) !important;
}

[data-bs-theme="dark"] .fc_has_inner_label_choices,
[data-bs-theme="dark"] .fc_has_inner_prompt_choices {
	color: var(--text-muted, #999) !important;
}

[data-bs-theme="dark"] .flexicontent > div.use_select2_lib .choices:not(.is-focused) .choices__inner,
[data-bs-theme="dark"] .flexicontent > .choices:not(.is-focused) .choices__inner {
	border-bottom-color: var(--border-color, #4a4a4a) !important;
}


/* ===========================
   BACKEND (Joomla admin / Atum) — theme CSS variables
   COULEURS & ARRONDI issus des variables du thème (template.css)
   =========================== */

body.admin .choices .choices__inner {
	background: var(--form-control-bg, var(--body-bg, #fff)) !important;
	border: var(--form-control-border, 1px solid var(--input-border-color, #aaa)) !important;
	border-radius: var(--border-radius, 0.25rem) !important;
	color: var(--body-color, inherit) !important;
}

body.admin .choices.is-focused .choices__inner {
	border-color: var(--focus, #39f) !important;
	box-shadow: 0 0 0 0.2rem var(--focus-shadow, transparent) !important;
}

body.admin .choices .choices__placeholder {
	color: var(--choices-input-placeholder, var(--text-muted, #999)) !important;
}

body.admin .choices .choices__list--dropdown {
	background: var(--dropdown-bg, var(--body-bg, #fff)) !important;
	border: var(--dropdown-border-width, var(--border-width, 1px)) solid var(--dropdown-border-color, var(--border-color, #dee2e6)) !important;
	border-radius: var(--dropdown-border-radius, var(--border-radius, 0.25rem)) !important;
	box-shadow: var(--dropdown-box-shadow, 0 1px 1px #00000026) !important;
}

body.admin .choices .choices__list--dropdown .choices__item {
	color: var(--dropdown-link-color, var(--body-color, inherit)) !important;
}

body.admin .choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: var(--atum-dropdown-link-hover-bg, var(--dropdown-link-hover-bg, var(--template-bg-dark-5, #e9ecef))) !important;
	color: var(--atum-dropdown-link-hover-color, var(--dropdown-link-hover-color, var(--body-color, inherit))) !important;
}

body.admin .choices .choices__input,
body.admin .choices .choices__input--cloned,
body.admin .choices__list--dropdown .choices__input {
	background-color: var(--form-control-bg, var(--body-bg, #fff)) !important;
	color: var(--body-color, inherit) !important;
}

body.admin .choices .choices__list--multiple .choices__item {
	background: var(--choices-list-multiple-item-bg, var(--template-bg-dark)) !important;
	border-color: var(--choices-list-multiple-item-bg, var(--template-bg-dark)) !important;
	color: var(--choices-list-multiple-item, var(--template-text-light, #fff)) !important;
	border-radius: var(--border-radius-sm, 0.2rem) !important;
}

body.admin .choices .choices__list--multiple .choices__button {
	width: 1.25rem !important;
	height: 1.25rem !important;
	min-width: 1.25rem !important;
	min-height: 1.25rem !important;
	padding: 0 !important;
	margin: 0 0 0 4px !important;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffffff' d='M1.4 0L0 1.4l2.6 2.6L0 6.6 1.4 8 4 5.4 6.6 8 8 6.6 5.4 4 8 1.4 6.6 0 4 2.6z'/%3E%3C/svg%3E") !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 8px 8px !important;
	color: var(--choices-list-multiple-item, var(--template-text-light, #fff)) !important;
	opacity: 0.8 !important;
}

body.admin .choices .choices__list--multiple .choices__button:hover {
	opacity: 1 !important;
}

body.admin .choices .choices__button:focus {
	box-shadow: var(--choices__button_joomla-focus-box-shadow, 0 0 0 #00bcd4) !important;
	outline: 0 !important;
}

body.admin .choices .choices__button {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%236b6b6b' d='M1.4 0L0 1.4l2.6 2.6L0 6.6 1.4 8 4 5.4 6.6 8 8 6.6 5.4 4 8 1.4 6.6 0 4 2.6z'/%3E%3C/svg%3E") !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 8px 8px !important;
	opacity: 0.8 !important;
}

body.admin .choices .choices__button:hover {
	opacity: 1 !important;
}

body.admin .fc_has_inner_label_choices,
body.admin .fc_has_inner_prompt_choices {
	color: var(--choices-input-placeholder, var(--text-muted, #999)) !important;
}

/* Native scrollbar for filter value lists (vertical/horizontal) —
   replaces the jQuery mCustomScrollbar (mCSB) used in legacy (select2js) mode,
   since this stylesheet is only loaded when choices.js is active. */
.fc_add_scroller {
	overflow-y: auto !important;
	max-height: 220px !important;
	-webkit-overflow-scrolling: touch;
}
.fc_add_scroller_horizontal {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
}


/* ===========================
   ITEM FORM: selected tags (ul#ultagbox)
   Make them look like the Choices.js multi-select chips (e.g. "Secondary" categories)
   =========================== */

ul#ultagbox > li {
	box-sizing: content-box !important;
	display: inline-flex !important;
	align-items: center !important;
	float: none !important;
	height: auto !important;
	min-height: 1.7rem !important;
	margin: 1px !important;
	padding: 0 4px !important;
	line-height: 1.7rem !important;
	font-size: 0.9rem !important;
	border-radius: var(--border-radius, 0) !important;
	background-color: var(--choices-list-multiple-item-bg, var(--form-control-bg, #fff)) !important;
	border: 1px solid var(--choices-list-multiple-item-bg, var(--input-border-color, #aaa)) !important;
	color: var(--choices-list-multiple-item, inherit) !important;
}

ul#ultagbox > li.tagitem > span,
ul#ultagbox > li.tagitem.plain > span {
	float: none !important;
	padding: 0 !important;
	font-size: inherit !important;
	background: none !important;
	word-break: break-word;
}

ul#ultagbox > li.tagitem > a.deletetag {
	/* X icon painted with the chip's text color via mask, so it stays readable on any chip background */
	color: inherit !important; /* <a> would otherwise use the link color */
	background-color: currentColor !important;
	background-image: none !important;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1.4 0L0 1.4l2.6 2.6L0 6.6 1.4 8 4 5.4 6.6 8 8 6.6 5.4 4 8 1.4 6.6 0 4 2.6z'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1.4 0L0 1.4l2.6 2.6L0 6.6 1.4 8 4 5.4 6.6 8 8 6.6 5.4 4 8 1.4 6.6 0 4 2.6z'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
	display: inline-block !important;
	width: 12px !important;
	height: 12px !important;
	margin: -1px 0 0 6px !important;
	padding: 0 !important;
	opacity: 0.7;
	cursor: pointer;
}

ul#ultagbox > li.tagitem > a.deletetag:hover {
	opacity: 1;
}


/* ===========================
   CATEGORY SELECTS WITH PATH (select class fc_cat_path)
   =========================== */

.choices__list--dropdown .choices__item--choice .choices__description {
	display: block;
	margin-top: -2px;
	font-size: 0.75rem !important;
	line-height: 1.1rem;
	opacity: .65;
	font-weight: normal;
}

.choices__list--dropdown .choices__item--choice:has(.choices__description) {
	line-height: 1.2rem !important;
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}

/* Selected value: single line, the parents path is shortened with an ellipsis, the title is always visible */
.fc-choices-catpath .choices__list--single .choices__item {
	display: flex !important;
	align-items: baseline;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

.fc-choices-catpath .fc-catpath-parents,
.fc-choices-catpath .fc-catpath-title {
	white-space: nowrap !important;
	word-break: normal !important;
}

.fc-choices-catpath .choices__list--single .choices__item {
	flex-wrap: nowrap !important;
	overflow: hidden !important;
}

.fc-choices-catpath .fc-catpath-parents {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: .6;
	font-size: .9em;
	padding-right: .25em;
}

.fc-choices-catpath .fc-catpath-title {
	flex: 0 0 auto;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Dropdown: as wide as the longest path (not wider than the viewport), paths wrap instead of being cut, no horizontal scroll */
.fc-choices-catpath .choices__list--dropdown {
	width: max-content;
	min-width: 100%;
	max-width: min(560px, calc(100vw - 32px));
}

.fc-choices-catpath .choices__list--dropdown .choices__list {
	overflow-x: hidden !important;
}

.fc-choices-catpath .choices__list--dropdown .choices__item--choice {
	white-space: normal !important;
}

.fc-choices-catpath .choices__list--dropdown .choices__description {
	word-break: break-word;
}

/* Checkbox mode (multiple selects): path of the category below its title */
.fc-choices-checkbox-textbox {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.fc-choices-checkbox-textbox .fc-choices-checkbox-label {
	line-height: 1.4rem !important;
}

.fc-choices-checkbox-textbox .choices__description {
	display: block;
	margin: -2px 0 0 0;
	font-size: 0.75rem;
	line-height: 1.1rem;
	opacity: .65;
	white-space: normal;
}