/* adjust your form for this popup */
.popup-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* === make each row fill its container and equalize its children === */
.row-2,
.row-3 {
  display: flex;
  flex-wrap: wrap;      /* ← allow children to wrap to new lines */
  width: 100%;
  gap: 1rem;
}

/* make this element span the full width of its (now wrap-enabled) row */
.full-row {
  flex: 0 0 100%;
}


.row-3 label,
.row-2 label {
  flex: 1;             /* every label (and thus input inside) gets an equal share */
}

/* inputs already width:100% from your base/forms.css, so they stretch to fill */

/* === on small screens just stack them === */
@media (max-width: 768px) {
  .row-3,
  .row-2 {
    flex-direction: column;
    align-items: stretch;   /* child labels now stretch full width of the column */
  }
}