/*
 * psiformcrm — international phone field (v2.9.83, CI-572; v2.9.84 markup
 * aligned with the sitepackage field: div.formField > span.formField-field >
 * span.psiPhone > [span.select > select] + input.field)
 *
 * Layout only, on top of intlTelInput.min.css. Colours, borders, radii and
 * fonts come from the site's `.field` / `.select` rules — the number input is
 * the same `input.field.form-control` as the stock Telephone element, the
 * widget's country button inherits from it. Without JavaScript the native
 * select (library `span.select`, with its chevron) sits in front of the
 * input; with JavaScript (.is-enhanced) it is visually hidden — still in the
 * DOM, still submitted — and the flag dropdown takes its place.
 */

.psiPhone {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

.psiPhone .psiPhone-countryWrap {
    flex: 0 1 16em;
    min-width: 0;
}

.psiPhone .psiPhone-countryWrap .psiPhone-country {
    width: 100%;
}

.psiPhone .psiPhone-number {
    flex: 1 1 auto;
    min-width: 0;
}

/* JavaScript mode: the widget wraps the input; the native select steps aside
   but stays focusable for assistive technology that lands on it. */
.psiPhone.is-enhanced .psiPhone-countryWrap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.psiPhone.is-enhanced .iti {
    flex: 1 1 auto;
    width: 100%;
    display: block;
}

.psiPhone.is-enhanced .iti .psiPhone-number {
    width: 100%;
}

/* Selected-flag button and list: the field's font and colour; the list a
   step smaller than the 18px field font so 250 rows stay compact. */
.psiPhone .iti__selected-country {
    font: inherit;
    color: inherit;
}

.psiPhone .iti__dropdown-content {
    font: inherit;
    font-size: 16px;
    color: inherit;
}

.psiPhone .iti__search-input {
    font: inherit;
    font-size: 16px;
    width: 100%;
}

@media (max-width: 480px) {
    .psiPhone:not(.is-enhanced) {
        flex-wrap: wrap;
    }
    .psiPhone:not(.is-enhanced) .psiPhone-countryWrap {
        flex-basis: 100%;
    }
}