/* Section 1 */
.c-calculator {
    background:var(--powder);
    padding-block:var(--space-l-2xl);
}
.c-caclulator__heading {
    margin-inline:auto;
    text-align: center;
    color:var(--pine);
}
.calculator {
  margin-block:var(--space-l);
  display:grid;
}
.c-calculator__inputs {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding:var(--space-l-xl);
  padding-block-end:0;
}

@media(min-width:992px) {
  .calculator {
    grid-template-columns:40% 60%;
  }
}

.c-calculator__results {
  background:var(--white);
  text-align:center;
  border:2px solid var(--corporategreen);
  border-radius:1.5em;
  padding:var(--space-l-xl);
}

.c-calculator-breakdown__row {
  border-bottom:2px solid var(--corporategreen);
}

.c-calculator-payment__row, .c-calculator-breakdown__row {
  display:flex;
  justify-content:space-between;
  margin-block-start:var(--space-s);
}

@media(min-width:992px) {
  .c-calculator__results {
    text-align:left
  }
}

.c-calculator__input-connected {
  display:grid;
  grid-template-columns:2fr 1fr;
  grid-gap:var(--space-2xs);
}
.c-calculator__inputs label {
  padding-block:var(--space-2xs) var(--space-3xs);
  font-weight:600;
  color:var(--black);
}
.c-calculator__inputs select {
  width:100%
}
.c-calculator__inputs input[type=range] {
  grid-column: span 2;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
}

.c-calculator__inputs input[type=range],
.c-calculator__inputs input[type=radio] {
  cursor:pointer;
  accent-color:var(--corporategreen);
}

.c-calculator__inputs input[type=tel],
.c-calculator__inputs input[type=text],
.c-calculator__inputs input[type=range] {
  width:100%;
}
.c-calculator__inputs input[type=tel],
.c-calculator__inputs input[type=text],
.c-calculator__inputs select {
  background:var(--white);
  color:var(--pine);
  height:45px;
  max-width:100%;
  border:2px solid var(--corporategreen);
  margin-block-end:var(--space-2xs);
  border-radius: .5em;
  padding-inline:var(--space-2xs);
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
}
.c-calculator__radio {
  display:grid;
  grid-template-columns:50% 50%
}
.c-calculator__radio label {
  padding:0
}
.c-calculator__radio input {
  margin:0 5px 0 0
}
.c-calculator__va-options span {
  font-weight:600
}
.c-calculator__va-options .c-calculator__checkbox label {
  padding:0;
  font-weight:400
}
.c-calculator__va-options input {
  margin:0 var(--space-3xs) 0 0
}

/* #estimated_monthly_payment {
  color:var(--fire);
  font-weight: 900;
}
#total_loan_payment {
  color:var(--fire);
  font-weight: 900;
} */

.c-calculator__monthly-value, .c-calculator-breakdown__total {
  margin-block:var(--space-l);
}

.c-calculator__disclaimer {
  font-style: italic;
  line-height: 200%;
  font-size:var(--step--1);
}

select[name="state_input"] option, 
select[name="credit_score"] option {
  font-style: normal;
  color: var(--black);
}
select[name="state_input"] option[value="custom"], 
select[name="credit_score"] option[value="custom"],
.c-calculator__inputs .js-is-custom {
  font-style: italic;
  color:#666666;
}

/* Canvas Styling */
.c-calculator__results {
  container-type: inline-size;
  container-name: mortgage-charts;
}
.c-calculator__chart {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 2;
}

.c-calculator__payment {
  display: none;
}

@container mortgage-charts (max-width:575px) {
  .c-calculator__chart {
    aspect-ratio: 1;
    min-height:420px;
    margin: 0 auto;
  }
}

@container mortgage-charts (max-width:350px) {
  .c-calculator__chart {
    aspect-ratio: unset;
    margin: 0 -25px;
  }
}