.bootstrap-select {
    border: 1px solid #ced4da;
}

/* Item selecionado/em destaque em azul (primary do Bootstrap), como no select nativo — definição do produto na
   TECH-6942; o verde fica para feedbacks e botões. */
.bootstrap-select .dropdown-menu li a:focus,
.bootstrap-select .dropdown-menu li a.active,
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li a:hover {
    background-color: var(--primary) !important;
    color: #fff;
}

.dropdown-menu .show {
    width: 386px;
}

.dark-theme .bootstrap-select .btn {
    background-color: #666666;
    color: var(--dark-text-light);
    border-color: #666666;
}

.dark-theme .bootstrap-select .no-results {
    background-color: var(--dark-bg-select);
}

.form-control-transparent:disabled, 
.form-control-transparent[readonly] {
    background-color: inherit;
}

.bootstrap-select .disabled {
    background-color: #f8f9fa;
}

/* Multi-Select Searchable (TECH-6962, initMultiSelectSearchable em js-v17.js): este mesmo select com pesquisa em modo
   múltiplo. Muda só o que o card pede — checkbox nas opções, "N selecionados" (countSelectedText) e botão "Limpar" à
   direita do campo —; cores herdadas do item (currentColor), sem cor nova. */

/* A regra '.dropdown-menu .show' acima (386px) deixava a lista mais larga que o campo. */
.bootstrap-select.cg-multiselect-searchable .dropdown-menu {
    min-width: 100%;
}

.bootstrap-select.cg-multiselect-searchable .dropdown-menu .inner.show {
    width: auto;
}

/* Checkbox à esquerda no lugar do check à direita do show-tick. */
.bootstrap-select.cg-multiselect-searchable .dropdown-menu li a span.text {
    margin-right: 0;
}

.bootstrap-select.cg-multiselect-searchable .dropdown-menu li a span.check-mark,
.bootstrap-select.cg-multiselect-searchable .dropdown-menu li.selected a span.check-mark {
    display: inline-block;
    position: relative;
    top: auto;
    right: auto;
    width: 1em;
    height: 1em;
    margin-right: .5rem;
    vertical-align: -.15em;
    border: 1px solid currentColor;
    border-radius: .2rem;
}

.bootstrap-select.cg-multiselect-searchable .dropdown-menu li a span.check-mark::after {
    display: none;
}

.bootstrap-select.cg-multiselect-searchable .dropdown-menu li.selected a span.check-mark::after {
    display: block;
    position: absolute;
    left: .3em;
    top: .08em;
    width: .35em;
    height: .65em;
    border-width: 0 .15em .15em 0;
    border-color: currentColor;
}

/* Botão "Limpar" na extremidade direita do campo, antes da seta; só aparece com seleção. */
/* :not(.bs-container): a lista aberta no body (ações do chatbot) herda as classes do campo e precisa continuar absolute. */
.bootstrap-select.cg-multiselect-searchable:not(.bs-container) {
    position: relative;
}

.bootstrap-select.cg-multiselect-searchable .cg-multiselect-clear {
    display: none;
    position: absolute;
    top: 50%;
    right: 1.375rem;
    transform: translateY(-50%);
    z-index: 3;
    padding: 0 .125rem;
    font-size: .75rem;
    line-height: 1.5;
}

.bootstrap-select.cg-multiselect-searchable.cg-multiselect-has-selection .cg-multiselect-clear {
    display: block;
}

/* Espaço do "Limpar" só no texto: no botão, o padding empurraria a seta para antes do "Limpar". */
.bootstrap-select.cg-multiselect-searchable.cg-multiselect-has-selection > .dropdown-toggle .filter-option {
    padding-right: 3.5rem;
}

/* Tema escuro: '.dark-theme .bootstrap-select .btn' daria fundo de botão ao "Limpar"; fica como link. */
.dark-theme .bootstrap-select.cg-multiselect-searchable .cg-multiselect-clear {
    background-color: transparent;
    border-color: transparent;
}