/*
 * Shared phone-control layout.
 *
 * Phone selectors are intentionally wider than ordinary compact selects so
 * the selected calling code remains legible (including +971/+358 and shared
 * calling-plan labels). The number field keeps the flexible remainder.
 */
.input-group:has(> select.phone-country-code-dropdown),
.input-group:has(> select[name*="country_code" i]),
.input-group:has(> select[id*="PhoneCountryCode"]),
.input-group:has(> select[aria-label*="country code" i]),
.input-group:has(> select[aria-label*="phone country" i]) {
    flex-wrap: nowrap;
}

.input-group:has(> select.phone-country-code-dropdown) > select,
.input-group:has(> select[name*="country_code" i]) > select,
.input-group:has(> select[id*="PhoneCountryCode"]) > select,
.input-group:has(> select[aria-label*="country code" i]) > select,
.input-group:has(> select[aria-label*="phone country" i]) > select {
    flex: 0 0 11rem;
    width: 11rem;
    min-width: 11rem;
    max-width: none !important;
    white-space: nowrap;
}

.input-group:has(> select.phone-country-code-dropdown) > input[type="tel"],
.input-group:has(> select[name*="country_code" i]) > input[type="tel"],
.input-group:has(> select[id*="PhoneCountryCode"]) > input[type="tel"],
.input-group:has(> select[aria-label*="country code" i]) > input[type="tel"],
.input-group:has(> select[aria-label*="phone country" i]) > input[type="tel"] {
    flex: 1 1 0;
    width: 1%;
    min-width: 0;
}

/* The admin contact editor is a grid row rather than a Bootstrap input group. */
.aup-field .aup-phone-row {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, .72fr);
}

.aup-phone-row > select {
    min-width: 11rem;
    width: 100%;
}

@media (max-width: 420px) {
    .input-group:has(> select.phone-country-code-dropdown),
    .input-group:has(> select[name*="country_code" i]),
    .input-group:has(> select[id*="PhoneCountryCode"]),
    .input-group:has(> select[aria-label*="country code" i]),
    .input-group:has(> select[aria-label*="phone country" i]) {
        flex-direction: column;
        align-items: stretch;
    }

    .input-group:has(> select.phone-country-code-dropdown) > select,
    .input-group:has(> select[name*="country_code" i]) > select,
    .input-group:has(> select[id*="PhoneCountryCode"]) > select,
    .input-group:has(> select[aria-label*="country code" i]) > select,
    .input-group:has(> select[aria-label*="phone country" i]) > select,
    .input-group:has(> select.phone-country-code-dropdown) > input[type="tel"],
    .input-group:has(> select[name*="country_code" i]) > input[type="tel"],
    .input-group:has(> select[id*="PhoneCountryCode"]) > input[type="tel"],
    .input-group:has(> select[aria-label*="country code" i]) > input[type="tel"],
    .input-group:has(> select[aria-label*="phone country" i]) > input[type="tel"] {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none !important;
    }

    .aup-field .aup-phone-row {
        grid-template-columns: minmax(0, 1fr);
    }
}