Responsive Mortgage Calculator, using react

What challenges did you encounter, and how did you overcome them?

Making parent element change its css based on its children's (for ex input elem's) css state. So for making input's parent change ots border when input is checked/valid, we can do this .mortTypeInputHolder:has(input[type="radio"]:checked)

Making radio button of different color. Had to search a lot to find a way to make radio button look like as in design (with different color and behavior). Finally found a way to do it. Works like charm, and can be modified as per needs. This is how:

  appearance: none;
  width: 15px;
  height: 15px;
  padding: 3px;
  background-clip: content-box;
  border: 1.5px solid var(--slate700);
  background-color: white;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 10px;