/**
 * Elementor <-> intl-tel-input integration.
 *
 * The library wraps the input in a .iti container and overlays the country
 * selector on top of it, so the only work left here is keeping that
 * container as wide as the input it replaced and stopping the BuddyBoss
 * button styling from drawing a second border around the selector.
 */

.elementor-field-group .iti {
    width: 100%;
}

/* The country selector is a <button>, so the theme and the Elementor kit
   both style it as one: a border that cuts the field in two, and on hover a
   1px border plus a primary fill with white text. The border is the worst of
   it — with no padding to absorb it, it shifts the dial code sideways on
   every hover — and the white text turns "+49" invisible once the matching
   fill is gone. Neutralise all states, colour included. */
.elementor-field-group .iti__selected-country,
.elementor-field-group .iti__selected-country:hover,
.elementor-field-group .iti__selected-country:focus,
.elementor-field-group .iti__selected-country:active {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    padding: 0;
}

/* The dial-code mirror: a bare read-only input inside the selector button.
   It wears the real field's Elementor classes so the kit's selectors give it
   the field's typography and vertical padding; these rules undo everything
   a field must have but an inline dial code must not. Height 100% tracks the
   button (= the input minus its border), keeping the vertical geometry equal
   to the phone input's without JS. */
.elementor-field-group .iti .iti__selected-country .phone-field__dial {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    field-sizing: content;
    flex: 0 0 auto;
    height: 100%;
    margin: 0 0 0 4px;
    min-height: 0;
    padding-left: 0;
    padding-right: 0;
    pointer-events: none;
    text-align: left;
    width: auto;
}

/* Neutralising the button states above also removed the only focus cue the
   theme had left, so put one back with outline — unlike a border it does not
   take up space and cannot shift the dial code. */
.elementor-field-group .iti__selected-country:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.elementor-field-group .iti__dropdown-content {
    z-index: 10;
}

/* Match the surrounding form typography instead of the library default. */
.elementor-field-group .iti__search-input,
.elementor-field-group .iti__country-name,
.elementor-field-group .iti__dial-code {
    font-family: inherit;
    font-size: 0.9em;
}

.phone-field__error {
    color: #d9534f;
    display: block;
    flex-basis: 100%;
    font-size: 0.85em;
    margin-top: 6px;
}

.phone-field--invalid .iti__tel-input {
    border-color: #d9534f;
}