/* Turkish mobile-number entry: flag + fixed "+90" prefix + the masked input, on one row.
   These live here rather than in wwwroot/app.css because app.css is never linked from
   App.razor (dead leftover from the Blazor project template) — styles added there silently
   do nothing, which is exactly how the flag first shipped rendering at full card width. */

.phone-input {
    display: flex;
    align-items: center;
    gap: 6px;
}

.phone-input-flag {
    flex: 0 0 auto;
    width: 22px;
    height: 16px;
    object-fit: cover;
}

.phone-input-prefix {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

/* Let the field itself take the remaining width — MudTextField renders its own wrapper div,
   TrPhoneInput renders a bare <input>. */
.phone-input > .mud-input-control,
.phone-input > input {
    flex: 1 1 auto;
    min-width: 0;
}