.application-form-wrapper { max-width: 760px; margin: 0 auto; padding: 0 1rem 3rem 1rem; }

.phone-row { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
/* Use auto flex-basis so it doesn’t become height when stacked */
.phone-row .phone-input { flex: 1 1 auto; min-width: 160px; }

/* Normalize the masked phone input height to match other text fields via Radzen CSS vars */
/* Cover both when the class is applied to the wrapper or the input itself */
.phone-row .phone-input,
.phone-row .phone-input input,
.phone-row .phone-input .rz-inputtext,
.phone-row input.phone-input {
 height: var(--rz-form-field-input-height, var(--rz-input-height,2.75rem));
 min-height: var(--rz-form-field-input-height, var(--rz-input-height,2.75rem));
 line-height: var(--rz-input-line-height,1.25);
 padding: var(--rz-input-padding-y,0.5rem) var(--rz-input-padding-x,0.75rem);
 box-sizing: border-box;
}

/* Ensure we don't get a tall field when the row stacks on mobile */
@media (max-width: 600px) {
 .application-form-wrapper { padding-bottom: 6rem; }
 .submit-row { justify-content: stretch !important; }
 .submit-button { width: 100%; }
 .phone-row { flex-direction: column; align-items: stretch; }
 .phone-row > * { width: 100% !important; max-width: none !important; }
 .phone-row .phone-input { flex: 0 0 auto; min-height: auto; }
}

.submit-row { margin-top: 1.5rem; }
.submit-button { min-width: 160px; }