/* Geef de select zelf een vaste breedte als je wilt: */
#language-select {
    width: 40px;
    height: 40px !important;
}

/* Selected value: make the flag fill the entire box */
.lang-selection .select2-selection--single{
    height: var(--control-h, 40px);          /* already set by JS to match button */
    border-radius: 10px;
    overflow: hidden;                         /* crop the image to rounded corners */
}

/* ensure the render area itself fills the box */
.lang-selection .select2-selection__rendered{
    width: 100%;
    height: 100%;
    padding: 0 !important;
    display: block;                           /* not flex, so child can be 100%/100% */
}

/* the wrapper we returned in templateSelection */
.lang-selection .select2-selection__rendered .lang-item{
    width: 100%;
    height: 100%;
    display: block;
}

/* the flag inside the selection: fill completely */
.lang-selection .select2-selection__rendered .lang-flag{
    width: 100%;
    height: 100%;
    object-fit: cover;                        /* or 'contain' if you prefer full view */
    border-radius: inherit;                   /* same rounding as the box */
    display: block;
}

/* Dropdown stays compact */
.lang-dropdown .select2-results__option{
    padding: 6px 8px;
    display: flex; align-items: center; justify-content: center;
}
.lang-dropdown .lang-flag{
    width: 24px; height: 24px;
    border-radius: 9999px;
}