.puente-phone-fields {
    display: grid;
    grid-template-columns: minmax(190px, .9fr) minmax(130px, .55fr) minmax(190px, 1fr);
    gap: .75rem;
    align-items: end;
}

.puente-phone-fields > div {
    min-width: 0;
}

.puente-phone-fields .form-label {
    margin-bottom: .3rem;
    color: #64748b;
    font-size: .82rem;
    font-weight: 600;
}

.puente-phone-native-select.is-enhanced {
    display: none;
}

.puente-phone-picker {
    position: relative;
}

.puente-phone-picker-input {
    padding-right: 2.5rem;
    background-image: var(--bs-form-select-bg-img);
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
}

.puente-phone-picker-input[aria-expanded="true"] {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

.puente-phone-picker-menu {
    position: absolute;
    z-index: 1080;
    top: calc(100% + .25rem);
    right: 0;
    left: 0;
    display: none;
    max-height: 18rem;
    padding: .35rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .5rem;
    box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .16);
}

.puente-phone-picker-menu.is-open {
    display: block;
}

.puente-phone-picker-option,
.puente-phone-picker-empty {
    width: 100%;
    padding: .55rem .7rem;
    color: #1e293b;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: .35rem;
}

.puente-phone-picker-option:hover,
.puente-phone-picker-option:focus,
.puente-phone-picker-option.is-active {
    color: #0b3f91;
    background: #eaf2ff;
    outline: 0;
}

.puente-phone-picker-option.is-selected {
    font-weight: 700;
}

.puente-phone-picker-empty {
    color: #64748b;
}

@media (max-width: 767.98px) {
    .puente-phone-fields {
        grid-template-columns: 1fr;
    }
}