/* contains styles for INVESTMENT PAGE: */
/* CALCULATOR section */



/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  .fund-calc__section {
    /* outline: 4px solid gold; */

    width: 100%;
    padding: 0 0 8rem 0;
  }

  .fund-calc__container {
    /* outline: 4px solid black; */

    width: 100%;
  }

  .fund-calc__title {
    /* outline: 2px solid blue; */

    padding-bottom: 2rem;

    text-align: center;
    font-family: var(--ff-primary);
    font-size: var(--fs-600);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--clr-primary-650);
    text-transform: capitalize;
  }

  /** style wrapper for both save & invest calc */
  .savings__investment__calc__wrapper {
    /* outline: 2px solid red; */

    width: 100%;
    padding: 2rem 1rem;
    box-shadow: var(--gen-shadow-3d-02);

    /* ///////////// */
    .investment__calc__section {
      /* outline: 3px solid cyan; */

      width: 100%;
    }
  }

  /** style always visible part of calc accordion */
  .fund-calc__accordion__container {
    /* outline: 2px solid rosybrown; */

    width: 100%;

    /* //////////////////// */
    .fund-calc__accordion__button {
      /* outline: 2px solid lime; */

      width: 100%;
      padding: 1rem 1rem 1rem 2rem;
      color: var(--clr-neutral-white-2);
      text-align: center;
      text-transform: capitalize;
      cursor: pointer;

      font-family: var(--ff-btn);
      font-size: var(--fs-800);
      font-weight: var(--fw-semi-bold);

      background-color: var(--clr-tertiary-200);
      background-image: linear-gradient(45deg,
          var(--clr-tertiary-200),
          var(--clr-tertiary-200),
          var(--clr-tertiary-200),
          var(--clr-primary-650));
      border-radius: 12px;
      border: none;

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;

      position: relative;

      /* /////////////// */
      &:hover {
        filter: brightness(115%);
        transform: translateY(-2px);
      }

      /* //////////////// */
      .fund-calc__accordion__button--head {
        /* outline: 2px solid rosybrown; */

        margin-right: 4rem;
      }

      /* //////////// */
      @media screen and (width > 440px) and (width <=500px) {
        .fund-calc__accordion__button--head {
          /* outline: 2px solid rosybrown; */

          white-space: nowrap;
        }
      }

      /* ////////////////// */
      .fund-calc__accordion__button--arrow {
        height: 15px;
        width: 15px;
        border: 3px solid var(--clr-neutral-white-2);
        border-left: none;
        border-top: none;

        position: absolute;
        top: 50%;
        right: 8%;
        transform: translate(-50%, -50%);
        rotate: 45deg;

        transition: all 200ms ease;
      }
    }
  }

  /** style the Investment & savings aspect of calculator */
  .investment__calc__container {
    /* outline: 2px dashed green; */

    width: 100%;
    max-width: var(--width__900px);
    margin: 0 auto;

    font-family: var(--ff-primary);
    font-size: var(--fs-800);
    font-weight: var(--fw-semi-bold);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 2rem;
  }

  /** investment & savings calc FORM */
  /* ////////////////// */
  label {
    padding: 0 0 0.5rem 0;
    text-transform: capitalize;
    border-radius: 4px;
    font-weight: var(--fw-bold);

    display: block;
    text-align: center;
  }

  /* ///////////// */
  input {
    /* outline: 2px solid pink; */

    padding: 0 0 0 0.5rem;
    margin: 0;
    width: 100%;
    height: 3rem;
    border-radius: 4px;
    border: 1px solid var(--clr-primary-650);

    /* //////////// */
    &:focus {
      outline-color: var(--clr-primary-650);
    }
  }

  /* ///////////// */
  select {
    margin: 0;
    padding: 0 0 0 0.5rem;
    width: 100%;
    height: 3rem;
    border-radius: 4px;
    border: 1px solid var(--clr-primary-650);

    /* //////////// */
    &:focus {
      outline-color: var(--clr-primary-650);
    }
  }

  .investment__calc__form {
    /* outline: 2px dashed pink; */

    width: 100%;
    max-width: 400px;
    margin-top: 2rem;

    /* //////////// */
    .invest__plan__form-1 {
      /* outline: 2px solid blue; */

      width: 100%;

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-start;
    }

    /* ////////////// */
    .invest__plan__form-1__input-label__container {
      /* outline: 2px solid orchid; */

      width: 100%;
      padding-bottom: 1.2rem;
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      row-gap: 0rem;

      position: relative;
    }

    /* /////////// */
    .error-message {
      /* outline: 2px solid red; */

      font-family: var(--ff-primary);
      font-size: var(--fs-900);
      font-weight: var(--fw-bold);
      line-height: 1.5;
      color: var(--clr-alert-error-600);
      text-align: center;

      position: absolute;
      bottom: 0%;
    }

    /* //////////// */
    .invest__plan__submit {
      background-color: var(--clr-primary-100);
      color: var(--clr-neutral-white-2);

      font-family: var(--ff-btn);
      font-size: var(--fs-800);
      font-weight: var(--fw-bold);

      width: 100%;
      padding: 0.8rem 0;
      border: none;
      border-radius: 4px;
      text-transform: capitalize;
      cursor: pointer;


      /* ///////////// */
      &:hover {
        filter: brightness(125%);
      }

      /* //////////// */
      &:active {
        transform: translateY(-2px);
      }

    }
  }

  /** investment & savings calculator Result */
  .investment__calc__results__container {
    /* outline: 2px dashed pink; */

    display: none;
    width: 100%;
    max-width: 400px;
    background-color: var(--clr-primary-100);
    border-radius: 4px;
    color: var(--clr-neutral-white-2);
    padding: 2rem 0.5rem;

    /* ///////////////// */
    .investment__calc__results__header {
      text-transform: uppercase;
      padding-bottom: 2rem;
      text-align: center;
    }

    /* style horizontal lines in results */
    /* //////////// */
    .horizontal_line__calc__result {
      margin-bottom: 1rem;

      width: 100%;
      border: 1px solid var(--clr-primary-200);
    }

    /* ////////////// */
    .calc__result__wrapper {
      text-transform: capitalize;

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-end;
    }

    /* //////////////// */
    .invest__result__text {
      padding-bottom: 1rem;
      padding-top: 2rem;
      text-transform: none;
    }

    /* /////////////// */
    .calc-for-extra-padding {
      padding-top: 2rem;
    }

    /* ///////////// */
    .investment__result__roi--percent,
    .investment__result__capital,
    .invest__result__roi--naira,
    .client__total-amount__at__end {
      /* outline: 2px solid red; */

      /* white-space: nowrap; */
      padding-right: 1.5rem;
    }

    /* ///////////// */
    .investment__result__roi--percent__value,
    .investment__result__capital__value,
    .invest__result__roi--naira__value,
    .client__total-amount__at__end__value {
      white-space: nowrap;
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {
  .fund-calc__section {
    /* outline: 4px solid gold; */

    width: 100%;
    padding: 0 0 10rem 0;
  }

  .fund-calc__container {
    /* outline: 4px solid black; */

    width: 100%;
  }

  .fund-calc__title {
    /* outline: 2px solid blue; */

    padding-bottom: 2rem;

    text-align: center;
    font-family: var(--ff-primary);
    font-size: var(--fs-500);
    font-weight: var(--fw-bold);
    line-height: var(--lh-600);
    letter-spacing: 1px;
    color: var(--clr-primary-650);
    text-transform: capitalize;
  }

  /** style wrapper for both save & invest calc */
  .savings__investment__calc__wrapper {
    /* outline: 2px solid red; */

    width: 100%;
    padding: 4rem 1rem;
    box-shadow: var(--gen-shadow-3d-02);

    /* ///////////// */
    .investment__calc__section {
      /* outline: 3px solid cyan; */

      width: 100%;
    }
  }

  /** style always visible part of calc accordion */
  .fund-calc__accordion__container {
    width: 100%;

    /* //////////////////// */
    .fund-calc__accordion__button {

      width: 100%;
      max-width: var(--width__900px);
      margin: 0 auto;
      padding: 1rem;
      color: var(--clr-neutral-white-2);
      text-align: center;
      text-transform: capitalize;
      cursor: pointer;

      font-family: var(--ff-btn);
      font-size: var(--fs-700);
      font-weight: var(--fw-bold);

      background-color: var(--clr-tertiary-200);
      background-image: linear-gradient(45deg,
          var(--clr-tertiary-200),
          var(--clr-tertiary-200),
          var(--clr-tertiary-200),
          var(--clr-primary-650));
      border-radius: 12px;
      border: none;

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;

      position: relative;

      /* /////////////// */
      &:hover {
        filter: brightness(115%);
        transform: translateY(-2px);
      }

      /* //////////////// */
      .fund-calc__accordion__button--head {
        /* outline: 2px solid rosybrown; */

        margin-right: 4rem;
      }

      /* ////////////////// */
      .fund-calc__accordion__button--arrow {
        height: 15px;
        width: 15px;
        border: 3px solid var(--clr-neutral-white-2);
        border-left: none;
        border-top: none;

        position: absolute;
        top: 50%;
        right: 15%;
        transform: translate(-50%, -50%);
        rotate: 45deg;

        transition: all 200ms ease;

        /* ////////////// */
        @media screen and (width > 500px) and (width < 600px) {
          right: 8%;
        }

        /* ////////////// */
        @media screen and (width > 600px) and (width < 700px) {
          right: 12%;
        }

      }
    }
  }

  /** style the Investment & savings aspect of calculator */
  .investment__calc__container {
    /* outline: 2px dashed green; */

    width: 100%;
    max-width: var(--width__900px);
    margin: 0 auto;

    font-family: var(--ff-primary);
    font-size: var(--fs-800);
    font-weight: var(--fw-semi-bold);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 2rem;
  }

  /** investment & savings calc FORM */
  /* ////////////////// */
  label {
    padding-bottom: 0.5rem;
    text-transform: capitalize;
    border-radius: 4px;
    font-weight: var(--fw-bold);

    display: block;
    text-align: center;
  }

  /* ///////////// */
  input {
    /* outline: 2px solid pink; */

    padding: 0 0 0 0.5rem;
    margin: 0;
    width: 100%;
    height: 3rem;
    border-radius: 4px;
    border: 1px solid var(--clr-primary-650);

    /* //////////// */
    &:focus {
      outline-color: var(--clr-primary-650);
    }
  }

  /* ///////////// */
  select {
    margin: 0;
    padding: 0 0 0 0.5rem;
    width: 100%;
    height: 3rem;
    border-radius: 4px;
    border: 1px solid var(--clr-primary-650);

    /* //////////// */
    &:focus {
      outline-color: var(--clr-primary-650);
    }
  }

  .investment__calc__form {
    /* outline: 2px dashed pink; */

    width: 50%;
    min-width: 350px;
    margin-top: 2rem;

    /* //////////// */
    .invest__plan__form-1 {
      /* outline: 2px solid blue; */

      width: 100%;

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-start;
    }

    /* ////////////// */
    .invest__plan__form-1__input-label__container {
      /* outline: 2px solid orchid; */

      width: 100%;
      padding-bottom: 1.2rem;
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;

      position: relative;
    }

    /* /////////// */
    .error-message {
      /* outline: 2px solid red; */

      font-family: var(--ff-primary);
      font-size: var(--fs-900);
      font-weight: var(--fw-bold);
      line-height: 1.5;
      color: var(--clr-alert-error-600);
      text-align: center;

      position: absolute;
      bottom: 0%;
    }

    /* //////////// */
    .invest__plan__submit {
      background-color: var(--clr-primary-100);
      color: var(--clr-neutral-white-2);

      font-family: var(--ff-btn);
      font-size: var(--fs-800);
      font-weight: var(--fw-bold);

      width: 100%;
      padding: 0.8rem 0;
      border: none;
      border-radius: 4px;
      text-transform: capitalize;
      cursor: pointer;


      /* ///////////// */
      &:hover {
        filter: brightness(125%);
      }

      /* //////////// */
      &:active {
        transform: translateY(-2px);
      }

    }
  }

  /** investment & savings calculator Result */
  .investment__calc__results__container {
    /* outline: 2px dashed pink; */

    display: none;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;

    background-color: var(--clr-primary-100);
    border-radius: 4px;
    color: var(--clr-neutral-white-2);

    /* ///////////////// */
    .investment__calc__results__header {
      text-transform: uppercase;
      padding-bottom: 2rem;
      text-align: center;
    }

    /* style horizontal lines in results */
    /* //////////// */
    .horizontal_line__calc__result {
      margin-bottom: 1rem;

      width: 100%;
      border: 1px solid var(--clr-primary-200);
    }

    /* ////////////// */
    .calc__result__wrapper {
      /* outline: 2px solid blue; */

      text-transform: capitalize;

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-end;
    }

    /* //////////////// */
    .invest__result__text {
      padding-bottom: 1rem;
      padding-top: 2rem;
      text-transform: none;
    }

    /* /////////////// */
    .calc-for-extra-padding {
      padding-top: 2rem;
    }

    /* ///////////// */
    .investment__result__roi--percent,
    .investment__result__capital,
    .invest__result__roi--naira,
    .client__total-amount__at__end {
      /* white-space: nowrap; */
      padding-right: 2rem;
    }

    /* ///////////// */
    .investment__result__roi--percent__value,
    .investment__result__capital__value,
    .invest__result__roi--naira__value,
    .client__total-amount__at__end__value {
      white-space: nowrap;
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {
  .fund-calc__section {
    /* outline: 4px solid gold; */

    width: 100%;
    max-width: var(--width__1440px);
    margin: 0 auto;
    padding: 0 0 12rem 0;
  }

  .fund-calc__container {
    /* outline: 4px solid black; */

    width: 100%;
    margin: 0 auto;
  }

  /** style wrapper for invest calc */
  .savings__investment__calc__wrapper {
    /* outline: 2px solid red; */

    padding: 4rem 1rem;
    width: 100%;
    margin: 0 auto;
    border-radius: 12px;
    border: none;
    box-shadow: var(--gen-shadow-3d-02a);
    box-shadow: var(--gen-shadow-3d-02);

    /* /////////////// */
    @media screen and (width <=1460px) {
      border-radius: 0;
    }

    /* ///////////// */
    .investment__calc__section {
      /* outline: 3px solid cyan; */

      width: 100%;
    }
  }

  .fund-calc__title {
    /* outline: 2px solid blue; */

    padding-bottom: 2rem;

    text-align: center;
    font-family: var(--ff-primary);
    font-size: var(--fs-400);
    font-weight: var(--fw-bold);
    line-height: var(--lh-600);
    letter-spacing: 1px;
    color: var(--clr-primary-650);
    text-transform: capitalize;
  }

  /** style visible part of calc accordion */
  .fund-calc__accordion__container {
    width: 100%;

    /* //////////////////// */
    .fund-calc__accordion__button {
      /* outline: 2px solid tomato; */

      width: 100%;
      max-width: var(--width__900px);
      margin: 0 auto;
      padding: 1rem;
      color: var(--clr-neutral-white-2);
      text-align: center;
      text-transform: capitalize;
      cursor: pointer;

      font-family: var(--ff-btn);
      font-size: var(--fs-700);
      font-weight: var(--fw-bold);

      background-color: var(--clr-tertiary-200);
      background-image: linear-gradient(45deg,
          var(--clr-tertiary-200),
          var(--clr-tertiary-200),
          var(--clr-tertiary-200),
          var(--clr-primary-650));
      border-radius: 12px;
      border: none;

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;

      position: relative;

      /* /////////////// */
      &:hover {
        filter: brightness(115%);
        transform: translateY(-2px);
      }

      /* //////////////// */
      .fund-calc__accordion__button--head {
        /* outline: 2px solid rosybrown; */

        margin-right: 4rem;
      }

      /* ////////////////// */
      .fund-calc__accordion__button--arrow {
        height: 15px;
        width: 15px;
        border: 3px solid var(--clr-neutral-white-2);
        border-left: none;
        border-top: none;

        position: absolute;
        top: 50%;
        right: 20%;
        transform: translate(-50%, -50%);
        rotate: 45deg;

        transition: all 200ms ease;
      }
    }
  }

  /** style the Investment aspect of calculator */
  .investment__calc__container {
    /* outline: 2px dashed green; */

    width: 100%;
    max-width: var(--width__900px);
    margin: 0 auto;

    font-family: var(--ff-primary);
    font-size: var(--fs-800);
    font-weight: var(--fw-semi-bold);

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 4rem;
  }

  /** investment calc FORM */
  /* ////////////////// */
  label {
    padding: 0 0 0.5rem 0;
    text-transform: capitalize;
    border-radius: 4px;
    font-weight: var(--fw-bold);
  }

  /* ///////////// */
  input {
    /* outline: 2px solid pink; */

    padding: 0 0 0 0.5rem;
    margin: 0;
    width: 100%;
    height: 3rem;
    border-radius: 4px;
    border: 1px solid var(--clr-primary-650);

    /* //////////// */
    &:focus {
      outline-color: var(--clr-primary-650);
    }
  }

  /* ///////////// */
  select {
    margin: 0;
    padding: 0 0 0 0.5rem;
    width: 100%;
    height: 3rem;
    border-radius: 4px;
    border: 1px solid var(--clr-primary-650);

    /* //////////// */
    &:focus {
      outline-color: var(--clr-primary-650);
    }
  }

  .investment__calc__form {
    /* outline: 2px dashed pink; */

    flex-basis: 40%;
    margin-top: 2rem;

    /* //////////// */
    .invest__plan__form-1 {
      /* outline: 2px solid blue; */

      width: 100%;

      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-start;
    }

    /* ////////////// */
    .invest__plan__form-1__input-label__container {
      /* outline: 2px solid orchid; */

      width: 100%;
      padding-bottom: 1.2rem;
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;

      position: relative;
    }

    /* /////////// */
    .error-message {
      /* outline: 2px solid red; */

      font-family: var(--ff-primary);
      font-size: var(--fs-900);
      font-weight: var(--fw-bold);
      line-height: 1.5;
      color: var(--clr-alert-error-600);
      text-align: center;

      position: absolute;
      bottom: 0%;
    }

    /* //////////// */
    .invest__plan__submit {
      background-color: var(--clr-primary-100);
      color: var(--clr-neutral-white-2);

      font-family: var(--ff-btn);
      font-size: var(--fs-700);
      font-weight: var(--fw-bold);

      width: 100%;
      padding: 0.8rem 0;
      border: none;
      border-radius: 4px;
      text-transform: capitalize;
      cursor: pointer;

      /* ///////////// */
      &:hover {
        filter: brightness(125%);
      }

      /* //////////// */
      &:active {
        transform: translateY(-2px);
      }

    }
  }

  /** investment calculator Result */
  .investment__calc__results__container {
    /* outline: 2px dashed pink; */

    display: none;
    background-color: var(--clr-primary-100);
    width: 45%;
    border-radius: 4px;
    color: var(--clr-neutral-white-2);
    padding: 2.5rem 1.5rem;
    margin-top: 2rem;

    /* ///////////////// */
    .investment__calc__results__header {
      text-transform: uppercase;
      padding-bottom: 2rem;
    }

    /* style horizontal lines in results */
    /* //////////// */
    .horizontal_line__calc__result {
      margin-bottom: 1rem;

      width: 100%;
      border: 1px solid var(--clr-primary-200);
    }

    /* ////////////// */
    .calc__result__wrapper {
      text-transform: capitalize;

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-end;
    }

    /* //////////////// */
    .invest__result__text {
      padding-bottom: 1rem;
      padding-top: 2rem;
      text-transform: none;
    }

    /* /////////////// */
    .calc-for-extra-padding {
      padding-top: 2rem;
    }

    /* ///////////// */
    .investment__result__roi--percent,
    .investment__result__capital,
    .invest__result__roi--naira,
    .client__total-amount__at__end {
      /* white-space: nowrap; */
      padding-right: 2rem;
    }

    /* ///////////// */
    .investment__result__roi--percent__value,
    .investment__result__capital__value,
    .invest__result__roi--naira__value,
    .client__total-amount__at__end__value {
      white-space: nowrap;
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */
/* GENERAL STYLE FOR CALC ACCORDION BUTTON open&close FUNCTIONALITY */
/* ///////////////////////// */
/** WHEN CLOSED */
/* ///////////////////////// */
/* makes the height of the accordion Item to be 0 so it is not visible */
.investment__calc__container {
  /* outline: 2px dashed violet; */

  /* when button accordion is closed */
  max-height: 0;

  /* keeps the content from showing beneath the accordion-item when closed */
  overflow: hidden;

  /* controls the transition when closing-->going to this style */
  transition: max-height 700ms ease;

}

/* /////////////////////// */
/** WHEN OPEN */
/* ///////////////////// */
/* changes the height of the accordion Item from 0 so it is visible */
.investment__calc__section button[aria-expanded="true"]+.investment__calc__container {
  /* outline: 2px dashed red; */

  /* *when button accordion is opened */
  /* max-height: 100rem;-- this is set by javascript */

  /* controls the transition when opening-->going to this style */
  transition: max-height 2.5s ease;

}

/* style the button when it is open */
.investment__calc__section button[aria-expanded="true"] {
  background-color: var(--clr-primary-200);
  background-image: linear-gradient(45deg,
      var(--clr-primary-200),
      var(--clr-primary-200),
      var(--clr-primary-200),
      var(--clr-primary-650));
}

/* style the button arrow when button is open */
.investment__calc__section button[aria-expanded="true"] .fund-calc__accordion__button--arrow {
  height: 15px;
  width: 15px;
  border: 3px solid var(--clr-neutral-white-2);
  border-right: none;
  border-bottom: none;

  position: absolute;
  top: 65%;
  transform: translate(-50%, -50%);
  rotate: 45deg;
}