/* Container pour le single select, réutilisation de ton style multi-select */
.filter-single-select {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 0.25rem; /* pour laisser un petit espace sous le label */
}

/* Dropdown toggle = le select visible */
.filter-single-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background-color: #fff;
    cursor: pointer;
}

/* Badge affichant le pays sélectionné */
.filter-single-select select option:checked {
    background-color: var(--fms-badge-color);
    color: var(--fms-badge-text-color);
}

/* Flèche du select (pour mimique du dropdown multi-select) */
.filter-single-select select {
    background-image: linear-gradient(45deg, transparent 50%, #176fc7 50%),
                      linear-gradient(135deg, #176fc7 50%, transparent 50%);
    background-position: calc(100% - 1rem) calc(50% - 0.15em), calc(100% - 0.75rem) calc(50% - 0.15em);
    background-size: 0.4em 0.4em;
    background-repeat: no-repeat;
}

/* Pour s’assurer que le select occupe toute la largeur du parent */
.filter-single-select select.form-select {
    width: 100%;
    display: block;
}