/* Bootstrap 5 variant of the phone number widget.
   Same select2 region picker as the Primer variant, restyled so the select2
   control sits inside a BS5 input-group and matches .form-control. */

.phone-number-widget {
    position: relative;
    max-width: 100%;
}

/* Closed control sizes to its (narrow) content so the number input fills the
   rest of the group. The open dropdown is widened separately below. */
.phone-number-widget .select2-container {
    width: auto !important;
}

/* Make the select2 box look and size like a Bootstrap form-control, flush
   against the number input on its right. Flex centring keeps the value
   vertically aligned regardless of select2's defaults. */
.phone-number-widget .select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px);
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-right: 0;
    border-radius: 0.375rem 0 0 0.375rem;
    background-color: #fff;
}

.phone-number-widget .select2-container--default
.select2-selection--single .select2-selection__rendered {
    padding: 0 1.75rem 0 0.75rem;
    line-height: 1.5;
    color: #212529;
}

.phone-number-widget .select2-container--default
.select2-selection--single .select2-selection__arrow {
    height: 100%;
}

/* Bootstrap form-control focus ring. */
.phone-number-widget .select2-container--default.select2-container--focus
.select2-selection--single,
.phone-number-widget .select2-container--default.select2-container--open
.select2-selection--single {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* The number input meets the region box: square its left corners. */
.phone-number-widget input[type="text"] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* The open dropdown must be wider than the narrow closed control so the
   country names fit; stretch it across the full widget width. */
.phone-number-widget .select2-container:last-child {
    left: 0;
    right: 0;
}

.phone-number-widget .select2-dropdown {
    left: 0;
    right: 0;
    width: 100% !important;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}