/*
 * Oportfolio Calculators — shared stylesheet
 *
 * This file is enqueued once per page (no matter how many calculator
 * shortcodes are used). If you need to override any of this from the
 * child theme, target the same selectors there — child theme CSS loads
 * after this file and will win on specificity ties.
 */

.oportfolio-calc {
  font-family: "Nunito Sans", Arial, Helvetica, sans-serif;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px 40px;
}

.oportfolio-calc .oc-inline-block {
  display: inline-block;
}

.oportfolio-calc h3,
.oportfolio-calc h4 {
  font-size: 26px;
  font-family: "Nunito Sans", Arial, Helvetica, sans-serif;
  margin: 10px 0 25px 0;
}

.oportfolio-calc .oc-text-orange {
  color: #E15C03;
}

.oportfolio-calc a {
  color: #E15C03;
  text-decoration: none;
}

.oportfolio-calc .oc-input-grid {
  display: grid;
  align-items: end;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}

.oportfolio-calc .oc-input-container {
  margin-bottom: 30px;
}

.oportfolio-calc .oc-note-container {
  margin-top: -20px;
}

.oportfolio-calc .oc-field-note {
  font-size: 13px;
  font-style: italic;
  margin: 0;
  color: #555;
}

.oportfolio-calc .oc-input-grid .oc-input-container-full-width {
  grid-column: span 2;
}

.oportfolio-calc .oc-input-container label {
  font-size: 14px;
}

.oportfolio-calc label span {
  color: #E15C03;
}

.oportfolio-calc input,
.oportfolio-calc select {
  font-size: 14px;
  width: 100%;
  padding: 12px;
  border: none;
  font-weight: 600;
}
.oportfolio-calc input[type="radio"] {
  width: auto;
}
.oportfolio-calc .oc-radio-group {
  width: 100%;
  padding: 5px 15px;
  background-color: #ffffff;
}
.oportfolio-calc .oc-radio-group label {
  display: flex;
  margin: 15px 0 15px 0;
}
.oportfolio-calc .oc-radio-group input {
  accent-color: #E15C03;
  margin-right: 6px;
  margin-top: 8px;
}

.oportfolio-calc .oc-input {
  display: flex;
  margin-top: 8px;
}

.oportfolio-calc .oc-prefix {
  font-size: 14px;
  padding-right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oportfolio-calc .oc-postfix {
  font-size: 14px;
  padding-left: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Compound "duration" field (e.g. years + months) — two selects side by side */
.oportfolio-calc .oc-duration-input {
  display: flex;
  align-items: center;
  gap: 10px;
}
.oportfolio-calc .oc-duration-input select {
  width: auto;
  flex: 1;
}
.oportfolio-calc .oc-duration-unit-label {
  font-size: 13px;
  white-space: nowrap;
}

.oportfolio-calc .oc-button-container {
  padding-top: 6px;
  text-align: right;
}

.oportfolio-calc button {
  background-color: #2c4c58;
  color: #fff;
  font-size: 16px;
  padding: 12px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}
.oportfolio-calc button:hover {
  background-color: #98a4a8;
}
.oportfolio-calc button:disabled,
.oportfolio-calc button:disabled:hover {
  background-color: #c7ccce;
  cursor: not-allowed;
}

/* Inline validation error (currently used by the JBSP calculator's
   age/term cap check) — deliberately similar to .oc-field-note but in
   a warning colour so it reads as an error rather than a helper note. */
.oportfolio-calc .oc-jbsp-error-text {
  font-size: 13px;
  font-style: italic;
  margin: -10px 0 0 0;
  color: #b3261e;
}

/* Extra breathing room above the JBSP disclaimer note, which sits
   right after the term-cap note and would otherwise run straight
   into it (all .oc-field-note elements share the same -20px
   margin-top by default). */
.oportfolio-calc .oc-jbsp-disclaimer-note {
  display: block;
  padding-top: 20px;
}

/* JBSP calculator: reflow to a paired layout on desktop (income+income,
   then their two notes, then age+age) without changing the DOM order,
   which stays grouped by person (income, then that person's note) so
   mobile — where .oc-input-grid switches to display:block and 'order'
   has no effect — keeps each note directly under its own income field.
   :has() is used instead of adding per-field classes in the engine,
   since the engine doesn't expose a name/class hook on input containers. */
.oportfolio-calc .oc-input-container:has(input[name="oc-main-applicant-income"]) { order: 1; }
.oportfolio-calc .oc-input-container:has(input[name="oc-joint-borrower-income"]) { order: 2; }
.oportfolio-calc .oc-input-container:has(.oc-jbsp-note-main) { order: 3; }
.oportfolio-calc .oc-input-container:has(.oc-jbsp-note-joint) { order: 4; }
.oportfolio-calc .oc-input-container:has(input[name="oc-main-applicant-age"]) { order: 5; }
.oportfolio-calc .oc-input-container:has(input[name="oc-joint-borrower-age"]) { order: 6; }
.oportfolio-calc .oc-input-container:has(input[name="oc-deposit"]) { order: 7; }
.oportfolio-calc .oc-input-container:has(select[name="oc-mortgage-term-years"]) { order: 8; }
.oportfolio-calc .oc-input-container:has(.oc-jbsp-note-termcap) { order: 9; }
.oportfolio-calc .oc-input-container:has(.oc-jbsp-disclaimer-note) { order: 10; }

.oportfolio-calc .oc-results {
  margin-top: 60px;
  padding: 30px;
  background-color: white;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
}

.oportfolio-calc .oc-borrow-display {
  display: flex;
  justify-content: center;
  align-items: end;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.oportfolio-calc .oc-borrow-amount-and-arrow {
  width: 80%;
}

.oportfolio-calc .oc-result-amount {
  font-size: 50px;
  font-weight: 800;
}

.oportfolio-calc .oc-borrow-arrow-image-container {
  margin-top: -5px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 25px;
}

.oportfolio-calc .oc-borrow-arrow-image-container svg {
  height: 25px;
  position: absolute;
}

.oportfolio-calc .oc-borrow-house-icon {
  width: 20%;
  height: auto;
  margin-left: 10px;
  color: #E15C03;
}

@-webkit-keyframes ocFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes ocFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.oc-fade-in {
  -webkit-animation-name: ocFadeIn;
  animation-name: ocFadeIn;
}

@-webkit-keyframes ocSlideIn {
  0% {
    left: -170%;
  }

  100% {
    left: -70%;
  }
}

@keyframes ocSlideIn {
  0% {
    left: -170%;
  }

  100% {
    left: -70%;
  }
}

.oc-slide-in {
  -webkit-animation-name: ocSlideIn;
  animation-name: ocSlideIn;
}

.oc-animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media only screen and (max-width: 900px) {
  .oportfolio-calc {
    padding: 20px;
  }
  .oportfolio-calc h4, .oportfolio-calc h3 {
    font-size: 20px;
    margin: 5px 0 10px 0;
  }
  .oportfolio-calc .oc-input-grid {
    display: block;
  }
  .oportfolio-calc .oc-button-container button {
    width: 100%;
  }
  .oportfolio-calc .oc-results {
    margin-top: 35px;
    padding: 20px;
    font-size: 19px;
  }
  .oportfolio-calc .oc-results .oc-result-amount {
    font-size: 34px;
  }
  @-webkit-keyframes ocSlideIn {
    0% {
      right: 200px;
    }

    100% {
      right: -100px;
    }
  }

  @keyframes ocSlideIn {
    0% {
      right: 200px;
    }

    100% {
      right: -100px;
    }
  }
}

/*
 * Divi/page-level overrides.
 * These sit outside .oportfolio-calc scoping deliberately:
 * - the button rule targets a Divi row class (.calculator-row) applied
 *   around the shortcode in the page builder, not markup this plugin
 *   outputs itself
 * - the results paragraph rule is scoped to .oportfolio-calc, matching
 *   the rest of this file, so it can't leak onto unrelated .oc-results
 *   elements elsewhere on the site
 */
.et_pb_section .calculator-row .et_pb_button:after {
  padding-left: 20px;
}

.oportfolio-calc .oc-results p {
  padding-top: 30px;
  line-height: 1.1em;
}