/* 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; }

/* Match the final Select2 chip, including space for its remove control. */
.efsp-language-preview > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}
.efsp-language-preview > span::after {
    content: '\00d7';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 22px;
    color: #667085;
    font: 400 16px/1 Arial, sans-serif;
}
.efsp-phone-pending { position: relative; }
.efsp-phone-preview { display: none; }
.efsp-js .efsp-phone-preview {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38px;
    align-items: center;
    pointer-events: none;
    font-size: 14px;
    line-height: 1;
    color: #25334b;
    overflow: hidden;
}
.efsp-phone-country { flex: 0 0 96px; padding-left: 12px; box-sizing: border-box; color: #52627a; }
.efsp-phone-country::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 14px;
    margin-right: 10px;
    vertical-align: middle;
    background: linear-gradient(#4891d9 0 33.33%, #000 33.33% 66.66%, #fff 66.66%);
}
.efsp-phone-country::after { content: '\25be'; position: absolute; left: 35px; top: 15px; font: 8px/1 Arial; }
.efsp-phone-number { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.efsp-phone-placeholder { color: #77849a; }
.efsp-js .efsp-phone-pending > input { color: transparent !important; caret-color: #25334b; }
.efsp-js .efsp-phone-pending > input::placeholder { color: transparent !important; }
.efsp-js .efsp-phone-pending > input:focus { color: #25334b !important; }
.efsp-js .efsp-phone-pending > input:focus::placeholder { color: #77849a !important; }
.efsp-phone-pending:has(.iti) > .efsp-phone-preview,
.efsp-phone-pending:focus-within > .efsp-phone-preview { display: none; }
.ef-account-field--phone .iti__flag.iti__ee {
    background-image: linear-gradient(#4891d9 0 33.33%, #000 33.33% 66.66%, #fff 66.66%) !important;
    background-position: 0 0 !important;
    background-size: 100% 100% !important;
}

/* Avatar controls must not wait for Font Awesome; preserve the existing links. */
.ef-account-field--image .hp-field__button--delete i::before { content: '\00d7' !important; font: 700 18px/1 Arial, sans-serif; }
.ef-account-field--image .hp-field__button--download i::before { content: '\2193' !important; font: 700 18px/1 Arial, sans-serif; }
.ef-account-field--image picture { aspect-ratio: 1; }
.ef-account-field--image picture img { margin: 0 !important; }

/* Fixed flag box even if the language script replaces its text or emoji. */
.efl-switcher .efl-flag[style*="data:image/svg"] { width:20px !important; height:14px !important; flex:0 0 20px !important; font-size:0 !important; line-height:0 !important; }
.efl-switcher .efl-flag[style*="data:image/svg"] img { display:none !important; }
.efl-switcher .efl-language-menu > summary { min-width:80px; box-sizing:border-box; }

/* Native input and its preview must never be painted together. Opacity also
   handles theme rules that force the input text colour with !important. */
.efsp-js .efsp-phone-pending > input[type="tel"] { opacity: 0 !important; }
.efsp-js .efsp-phone-pending > input[type="tel"]:focus { opacity: 1 !important; }
.efsp-js .efsp-phone-pending:has(.iti) > .efsp-phone-preview,
.efsp-js .efsp-phone-pending:focus-within > .efsp-phone-preview { display: none !important; }

.efsp-js .efsp-phone-preview { box-sizing: border-box; border: 1px solid #d5deea; border-radius: 8px; background: #fff; }

/* intl-tel-input 25 uses country-container/selected-country instead of the
   old flag-container/selected-flag elements styled by the theme. Keep the
   preview and the live widget in the same columns, including longer codes. */
.ef-account-section--profile .ef-account-field--phone {
    --efsp-phone-country-width: 104px;
}
.ef-account-section--profile .efsp-phone-country {
    display: flex;
    align-items: center;
    height: 100%;
    flex-basis: var(--efsp-phone-country-width);
}
.ef-account-section--profile .efsp-phone-country::before {
    flex: 0 0 16px;
    width: 16px;
    height: 12px;
    margin-right: 27px;
}
.ef-account-section--profile .efsp-phone-country::after {
    content: '';
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #555;
}
.ef-account-section--profile .ef-account-field--phone .iti {
    width: 100%;
}
.ef-account-section--profile .ef-account-field--phone .iti__country-container {
    width: var(--efsp-phone-country-width);
    z-index: 3;
}
.ef-account-section--profile .ef-account-field--phone .iti__selected-country {
    width: 100%;
}
.ef-account-section--profile .ef-account-field--phone .iti__selected-country-primary {
    flex: 0 0 48px;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 8px;
}
.ef-account-section--profile .ef-account-field--phone .iti input[type="tel"] {
    padding-left: var(--efsp-phone-country-width) !important;
}