/* Phone-prefix inline layout
 *
 * Pairs the searchable country dropdown (.form-select-phone-prefix, enhanced
 * by search-select.js) with the local-number input on a single row. On mobile
 * the two cells stack vertically.
 *
 * Used by:
 *   - templates/shared/widgets/phone_prefix_field.html (form-bound)
 *   - {% phone_prefix_select %} template tag (standalone)
 */

.phone-field-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.phone-prefix-cell {
    flex: 0 0 13.75rem; /* 220px — fits "🇸🇬 Singapore (+65)" without truncation */
    min-width: 0;
}

.phone-number-cell {
    flex: 1 1 12rem;
    min-width: 0;
}

/* The search-select wrapper inside the prefix cell should fill it. */
.phone-prefix-cell .ss-wrapper {
    width: 100%;
    max-width: none;
}

/* Native <select> fallback styling (before search-select.js boots). */
.form-select-phone-prefix {
    width: 100%;
}

@media (max-width: 767px) {
    .phone-field-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .phone-prefix-cell,
    .phone-number-cell {
        flex: 1 1 100%;
    }
}