@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700&display=swap');

:root {
  --clr-lime: hsl(61, 70%, 52%);
  --clr-red: hsl(4, 69%, 50%);

  --clr-white: hsl(0, 0%, 100%);
  --clr-slate-100: hsl(202, 86%, 94%);
  --clr-slate-300: hsl(203, 41%, 72%);
  --clr-slate-500: hsl(200, 26%, 54%);
  --clr-slate-700: hsl(198, 79%, 19%);
  --clr-slate-900: hsl(202, 55%, 16%);

  --font-family: 'Plus Jakarta Sans', sans-serif;
  --fw-medium: 500;
  --fw-bold: 700;
}

*,*::after,*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--clr-slate-100);
  font-family: var(--font-family);
}

.mortgage-form{
  background-color: var(--clr-white);
  padding: 2rem;
  color: var(--clr-slate-900);
  display: flex;
  flex-direction: column;
  gap:2rem;
  }

  h1{
    font-size: 2rem;
    font-weight: var(--fw-bold);
  }
  a{
    margin-top: 0.5rem;
    color: var(--clr-slate-900);
  }
  label{
    margin-bottom: 0.5rem;
    font-weight: var(--fw-medium);
  }
  
  .input-amount, .input-rate, .input-term{
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
  }
  .input-unit {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

.input-unit input {
  border: none;
  outline: none;
  padding: 10px 12px;
  flex: 1;
}

.input-unit span {
  padding: 10px 12px;
  background: #f0f0f0;
  color: var(--clr-slate-900);
  border-left: 1px solid #ccc;
  background-color: var(--clr-slate-100);
}
  input{
    padding: 0.5rem;
    border: 1px solid var(--clr-slate-900);
    border-radius: 4px;
    font-size: 1.25rem;
    outline: none;
  }
  .option-repayment, .option-interest-only{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    border: 1px solid var(--clr-slate-300);
    height: 2.5rem;
    margin-block: 0.5rem;
    padding-left: 1rem;
    border-radius: 0.25rem;
  }
  button{
    background-color: var(--clr-lime);
    background-image: url(./assets/images/icon-calculator.svg);
    background-repeat: no-repeat;
    background-position: 20% center;
    color: var(--clr-slate-900);
    border: none;
    padding: 0.75rem;
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    cursor: pointer;
    border-radius: 1.5rem;
  }
  button:hover,.option-repayment:hover, .option-interest-only:hover{
    cursor: pointer;
    opacity:80%;
  }
  input:hover{
    cursor: pointer;
  }
  
  .error-message{
    color: var(--clr-red);
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }

  /* now l autre partie */

  .results-section{
    background-color: var(--clr-slate-700);
    padding: 2rem;
    color: var(--clr-slate-100);
    display: flex;
    flex-direction: column;
    gap:2rem;
  }
  .results-container{
    background-color: var(--clr-slate-900);
    align-self: center;
    padding: 1rem;
    width: 100%;
    border-top: 0.4rem solid var(--clr-lime);
    border-radius: 0.5rem;
  }
  .result-monthly-value{
    font-size: 3rem;
    font-weight: var(--fw-bold);
    color: var(--clr-lime);
  }
  hr{
    border: none;
    border-top: 1px solid var(--clr-slate-300);
    margin: 1rem 0;
  }
  .result-total-value{
    font-size: 2rem;
    font-weight: var(--fw-bold);
    color: var(--clr-white);
  }
  .empty-state{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
  }
  img{
    width: 50%;
    height: auto;
    object-fit: cover;
  }

  /*the computer version*/


  @media (min-width:35rem){
    main{
      width: 80%;
      height:80%;
      display: flex;
      margin-top: 3rem;
      border-radius: 2rem;
      overflow: hidden;
      background-color: var(--clr-white);
    } 
    section{
      flex: 1;
      min-width:0;
    }
    .form-title{
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }
    .input-group{
      display: grid;
      grid-template-columns: repeat(2, 50%);
      grid-template-areas: 
      "amount amount"
      "term rate";
      gap: 1rem;
    }
    .input-amount{
      grid-area: amount;
    }
    .input-rate{
      grid-area: rate
    }
    .input-term{
      grid-area: term
    }
    #mortgage-term,#interest-rate{
      width: 100%;
    }
    .results-section{
      border-bottom-left-radius: 6rem;
      overflow: hidden;
    }
    .results-container{
      height: 60%;
    }
    .result-monthly-value{
      font-size: 5rem;
    }
    .result-total-value{
      font-size: 3rem;
    }

  }