/* ------------------------------------------------------------ *\
	Finance calculator on the holiday home for sale page
	(Views/Partials/FinanceCalculator.cshtml). This file is only
	loaded when the calculator is shown, so other pages are unchanged.
\* ------------------------------------------------------------ */

/* The right-hand column is normally the red viewings box. With the calculator it becomes a
   plain wrapper: the red box styling moves onto the viewings widget and the calculator sits
   beneath it. The column also stops being sticky, as it is now taller than many screens. */
.section-services .section__aside.section__aside--finance {
  background: none;
  padding: 0;
  color: inherit;
}
@media (min-width: 768px) {
  .section-services .section__aside.section__aside--finance {
    position: static;
  }
}
.section-services .section__aside--finance .widget-viewings {
  background-color: #e6435f;
  color: var(--c-white);
  border-radius: 0.6rem;
  padding: 3.6rem 3rem 3.3rem;
}
@media (max-width: 1023px) {
  .section-services .section__aside--finance .widget-viewings {
    padding: 2rem 1.5rem;
  }
}
@media (max-width: 767px) {
  .section-services .section__aside--finance .widget-viewings {
    border-radius: 0;
    padding: 3.7rem 4rem 3.4rem;
  }
}

/* Calculator */
.finance-calc {
  margin-top: 2rem;
  font-family: var(--ff-base);
  color: var(--c-dark-blue);
}
@media (max-width: 767px) {
  .finance-calc {
    margin-top: 0;
  }
}
.finance-calc__inputs {
  background-color: #e7f4f0;
  border-radius: 0.6rem 0.6rem 0 0;
  padding: 3rem 3rem 3.4rem;
}
.finance-calc__breakdown {
  position: relative;
  background-color: #129671;
  color: var(--c-white);
  border-radius: 0 0 0.6rem 0.6rem;
  padding: 3.8rem 3rem 3rem;
}
/* Notch from the calculator panel into the breakdown, as in the design */
.finance-calc__breakdown:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 1.4rem solid transparent;
  border-right: 1.4rem solid transparent;
  border-top: 1.4rem solid #e7f4f0;
}
@media (max-width: 1023px) {
  .finance-calc__inputs {
    padding: 2rem 1.5rem 2.4rem;
  }
  .finance-calc__breakdown {
    padding: 3.2rem 1.5rem 2rem;
  }
}
@media (max-width: 767px) {
  .finance-calc__inputs,
  .finance-calc__breakdown {
    border-radius: 0;
  }
  .finance-calc__inputs {
    padding: 3.7rem 4rem 3.4rem;
  }
  .finance-calc__breakdown {
    padding: 4.2rem 4rem 3.4rem;
  }
}

.finance-calc .finance-calc__title {
  font-family: var(--ff-base);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.27;
  color: #129671;
  margin: 0 0 1rem;
}
.finance-calc__breakdown .finance-calc__title {
  color: var(--c-white);
  margin-bottom: 1.4rem;
}
.finance-calc__intro {
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0 0 1.4rem;
  white-space: pre-line;
}

/* Fields */
.finance-calc__field + .finance-calc__field {
  margin-top: 1.6rem;
}
.finance-calc__field label {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  color: #129671;
  margin-bottom: 0.8rem;
}
.finance-calc__field label span {
  font-size: 1.1rem;
  font-weight: 400;
}
.finance-calc .finance-calc__field input,
.finance-calc .finance-calc__field select {
  display: block;
  width: 100%;
  height: 4.4rem;
  padding: 0 1.8rem;
  border: 1px solid var(--c-white);
  border-radius: 0.6rem;
  background-color: var(--c-white);
  font-family: var(--ff-base);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c-dark-blue);
  box-shadow: none;
}
.finance-calc .finance-calc__field input:focus,
.finance-calc .finance-calc__field select:focus {
  border-color: #129671;
  outline: 2px solid #129671;
  outline-offset: 1px;
}
.finance-calc__select {
  position: relative;
}
.finance-calc .finance-calc__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 4.4rem;
  cursor: pointer;
}
/* Down arrow, as in the design */
.finance-calc__select:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.8rem;
  width: 1.1rem;
  height: 1.4rem;
  margin-top: -0.7rem;
  pointer-events: none;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='11' height='14' viewBox='0 0 11 14'%3e%3cpath d='M5.5 0v12M1 7.5l4.5 4.5L10 7.5' fill='none' stroke='%23129671' stroke-width='1.6'/%3e%3c/svg%3e") no-repeat center / contain;
}
.finance-calc__message {
  margin: 1.4rem 0 0;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.4;
  color: #b3261e;
}
.finance-calc__message[hidden] {
  display: none;
}

/* Breakdown */
.finance-calc__results {
  margin: 0;
}
.finance-calc__results > div {
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.finance-calc__results dt {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 0 0.3rem;
}
.finance-calc__results dd {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

/* The column hides its buttons on mobile, so this one is set explicitly */
.section-services .section__aside .finance-calc .finance-calc__button {
  display: inline-flex;
  margin-top: 2.4rem;
  background-color: var(--c-white);
  border: 1px solid var(--c-white);
  color: #129671;
  font-weight: 700;
  padding: 1.3rem 1.8rem;
}
@media (max-width: 1023px) {
  .section-services .section__aside .finance-calc .finance-calc__button {
    width: 100%;
    font-size: 1.4rem;
    padding: 1.2rem 1rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .section-services .section__aside .finance-calc .finance-calc__button:hover {
    background-color: var(--c-dark-blue);
    border-color: var(--c-dark-blue);
    color: var(--c-white);
  }
}
.finance-calc__small {
  font-size: 1.1rem;
  line-height: 1.45;
  margin: 1.8rem 0 0;
  white-space: pre-line;
}
.finance-calc__small + .finance-calc__small {
  margin-top: 1rem;
}