/* The native multiple select must occupy the same height as Select2.
   Do not override Select2's own visually-hidden source select. */
.ef-account-form .ef-account-field--languages select:not(.select2-hidden-accessible) {
    display: block;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    box-sizing: border-box !important;
}

/* Keep the complete saved number readable before the country widget wraps it. */
.ef-account-section--profile .ef-account-field--phone > input[type="tel"],
.ef-account-section--profile .ef-account-field--phone > input[data-component="phone"] {
    padding-left: 12px !important;
}

.ef-account-field--languages { position: relative; }
.efsp-language-preview { display: none; }
.efsp-js .ef-account-field--languages > .efsp-language-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38px;
    overflow: auto;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #d5deea;
    border-radius: 8px;
    background: #fff;
    pointer-events: none;
}
.efsp-language-preview > span {
    padding: 1px 6px;
    border-radius: 4px;
    background: #eef4ff;
    color: #25334b;
    font-size: 12px;
    line-height: 20px;
}
.efsp-js .ef-account-field--languages > select.efsp-language-native:not(.select2-hidden-accessible) { opacity: 0; }
.efsp-js .ef-account-field--languages > select.efsp-language-native:focus { opacity: 1; }
.efsp-js .ef-account-field--languages > select.efsp-language-native:focus ~ .efsp-language-preview,
.efsp-js .ef-account-field--languages:has(.select2-container) > .efsp-language-preview { display: none; }