/* Calculator CSS - inherits colors and fonts from site by default.
   Override via WP Admin → Broker360 Settings if needed. */

/* ── Unified Calculator (unicalc) ────────────────────────────────── */

/* Type tabs — 4-column grid */
.ucCalcTypeGroup {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.ucCalcTypeBtn {
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  border: 2px solid currentColor;
  padding: 10px 8px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease, color 0.2s ease;
          transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

/* IMC brand colours — all buttons filled by default for visual lift */
.ucCalcTypeBtn[data-type="ftb"]  { background-color: #54b6e3; border-color: #54b6e3; color: #fff; }
.ucCalcTypeBtn[data-type="sw"]   { background-color: #0f72be; border-color: #0f72be; color: #fff; }
.ucCalcTypeBtn[data-type="mh"]   { background-color: #1e2654; border-color: #1e2654; color: #fff; }
.ucCalcTypeBtn[data-type="btl"]  { background-color: #877F7D; border-color: #877F7D; color: #fff; }

/* Selected: inner white ring marks the active tab */
.ucCalcTypeBtn.btnSelected {
  -webkit-box-shadow: inset 0 0 0 3px rgba(255,255,255,0.5);
          box-shadow: inset 0 0 0 3px rgba(255,255,255,0.5);
}

/* Hover (non-selected): darker shade */
.ucCalcTypeBtn[data-type="ftb"]:hover  { background-color: #3aa4d1; border-color: #3aa4d1; }
.ucCalcTypeBtn[data-type="sw"]:hover   { background-color: #0a5e9e; border-color: #0a5e9e; }
.ucCalcTypeBtn[data-type="mh"]:hover   { background-color: #111833; border-color: #111833; }
.ucCalcTypeBtn[data-type="btl"]:hover  { background-color: #706866; border-color: #706866; }

/* Field groups — only FTB visible by default (JS also controls this) */
.ucFields          { display: none; }
.ucFields-ftb      { display: block; }

/* Fill Elementor (or any) container — override the global max-width */
#uc_form {
  max-width: 100%;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* ── Rate cards (horizontal row layout) ─────────────────────────── */

.ucRateCard {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  -webkit-transition: border-color 0.2s ease;
          transition: border-color 0.2s ease;
}

.ucRateCard--best {
  border-color: var(--calc-primary, #0066cc);
}

/* Header: logo + product name */
.ucCardHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px dashed #e0e0e0;
}

.ucCardLogo img {
  max-height: 44px;
  max-width: 90px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.ucCardProduct {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

/* Data row: 5 cells side by side */
.ucCardData {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.ucDataCell {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 14px 18px;
  border-right: 1px solid #eee;
}

.ucDataCell:last-child {
  border-right: none;
}

.ucDataCell--highlighted {
  background: #ebf5fb;
}

.ucDataCell--cta {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 14px 16px;
}

.ucDataPrimary {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-bottom: 4px;
}

.ucDataPrimary--ber {
  font-size: 15px;
  margin-top: 10px;
}

.ucDataSub {
  font-size: 12px;
  color: #777;
}

/* CTA button — teal pill */
.ucCtaBtn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center !important;
  gap: 6px !important;
  background-color: #3ab8aa !important;
  color: #fff !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  font-family: inherit;
  padding: 10px 20px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
          transition: background-color 0.2s ease;
}

.ucCtaBtn:hover {
  background-color: #2da89b !important;
}

/* Responsive */
@media (max-width: 640px) {
  .ucCalcTypeGroup {
    grid-template-columns: 1fr 1fr;
  }
  .ucCardData {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .ucDataCell {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
  .ucDataCell--cta {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    border-top: 1px solid #eee;
    padding: 12px 16px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

/* ── Rate section blocks ─────────────────────────────────────────── */

.ucSectionBlock {
  margin-bottom: 24px;
}

.ucSectionTitle {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #888;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 2px solid #eee;
}

/* ── Cashback checkbox toggle ────────────────────────────────────── */

.ucCashbackToggleWrap {
  margin: 4px 0 20px;
}

.ucCashbackToggleLabel {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #444;
  cursor: pointer;
}

.ucCashbackToggleLabel input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #3ab8aa;
}

/* ── Cashback expand (+) button in card header ───────────────────── */

.ucCbToggle {
  margin-left: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background: none;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #666;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
          transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ucCbToggle:hover {
  background-color: #3ab8aa;
  border-color: #3ab8aa;
  color: #fff;
}

/* ── Cashback detail row (hidden until + is clicked) ─────────────── */

.ucCbDetail {
  display: none;
  padding: 10px 20px;
  background: #f0faf8;
  border-top: 1px solid #d4f0eb;
  font-size: 13px;
  color: #444;
}

.ucCbLabel {
  font-weight: 600;
}

.ucCbValue {
  color: #3ab8aa;
  font-weight: 700;
  margin-left: 6px;
}

/* ─────────────────────────────────────────────────────────────────── */

.wmcForm {
  padding: 30px;
  background: #fff;
  max-width: 676px;
  border-radius: 20px;
}
.wmcContainer {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
.wmcRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.wmcCol {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 15px;
}
.wmcRow > .wmcCol:only-child {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}
.wmcCol.best-rate .boItem {
  font-weight: bold;
  border: 2px solid var(--calc-primary, #0066cc);
}
.wmcCol.best-rate .boItemtxt li {
  font-weight: bold;
}
.wmcBtn {
  background-color: transparent !important;
  font-size: 12px !important;
  text-transform: capitalize !important;
  border: 2px solid var(--calc-primary, #0066cc) !important;
  font-family: inherit !important;
  font-weight: 500 !important;
  color: var(--calc-primary, #0066cc) !important;
  padding: 10px 50px !important;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 8px !important;
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.3s ease, -webkit-transform 0.2s ease;
  transition: background-color 0.3s ease, transform 0.2s ease;
  transition: background-color 0.3s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
  cursor: pointer;
  margin: 5px !important;
}
.wmcBtnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.wmcBtn:hover, .wmcBtn:active, .wmcBtn.btnSelected {
  background-color: var(--calc-primary, #0066cc) !important;
  color: #fff !important;
}
.wmc button#wmcBtnCalculate {
  margin-top: 22px !important;
}
.wmcInput {
  margin-bottom: 5px;
}
.wmcInput > label {
  font-size: 14px;
  color: #474747;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 5px;
}
.wmcInput > input, .wmcInput select {
  width: 100%;
  border: 1px solid #ccc;
  padding: 8px 15px;
  font-family: inherit;
  border-radius: 5px;
  color: #474747;
}
.wmcInput > input:focus, .wmcInput > input:active, .wmcInput > input:focus-visible, .wmcInput select:focus, .wmcInput select:active, .wmcInput select:focus-visible {
  border: 1px solid var(--calc-primary);
  outline: none;
}
.wmcWarning {
  color: red;
  font-size: 12px;
}
.wmcFeedback {
  color: green;
  font-size: 12px;
}
.wmcOutputList {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wmcOutputList > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 10px 5px;
  border-bottom: 1px solid #ccc;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: inherit;
}
.wmcOutputList > li > span:last-child {
  color: var(--calc-primary, #0066cc);
  font-family: inherit;
  font-weight: bold;
  font-size: 22px;
}

.wmcInputCheckbox {
  display: -moz-inline-flex;
  display: -ms-inline-flex;
  display: -o-inline-flex;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  cursor: pointer;
}
.wmcInputCheckbox > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  z-index: 1;
}
.wmcInputCheckbox > input[type=checkbox]:checked ~ .wmcInputCheckboxControl {
  color: #fff;
  background: var(--calc-primary, #0066cc);
  border-color: var(--calc-primary, #0066cc);
}
.wmcInputCheckbox > input[type=checkbox]:checked ~ .wmcInputCheckboxControl:after {
  -webkit-transform: rotate(45deg) scale(1);
          transform: rotate(45deg) scale(1);
  opacity: 1;
  border-color: #fff;
}
.wmcInputCheckboxControl {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  position: relative;
  margin-right: 10px;
  border-radius: 2px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.wmcInputCheckboxControl:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: rotate(45deg) scale(0);
          transform: rotate(45deg) scale(0);
  opacity: 0;
  width: 6px;
  height: 11px;
  margin-left: -3px;
  margin-top: -8px;
  border-width: 0 2px 2px 0;
  border-color: #ccc;
  border-style: solid;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.boItem {
  background: #f7f7f7;
  padding: 20px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.boItemImg {
  min-height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}
.boItemImg > img {
  max-height: 75px !important;
}
.boItemtxt {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 10px;
  padding-bottom: 10px;
}
.boItemtxt li {
  border-bottom: 1px solid #ccc;
  padding-top: 5px;
  padding-bottom: 5px;
}
.boItemtxt li:last-child {
  border-bottom: none;
}
.boItem .wmcBtn {
  background: var(--calc-primary, #0066cc);
  color: #fff;
  border-radius: 50px;
  padding: 7px 15px !important;
  font-size: 12px;
  width: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.boItem .wmcBtn:hover {
  -webkit-box-shadow: 0px 0px 10px 1px var(--calc-primary, #0066cc) !important;
          box-shadow: 0px 0px 10px 1px var(--calc-primary, #0066cc) !important;
}

.loanTermRange {
  padding: 15px;
}

#loanTermRangeSlide {
  width: 100%;
}

input[type=range] {
  /* removing default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  /* creating a custom design */
  width: 100%;
  cursor: pointer;
  outline: none;
  /*  slider progress trick  */
  overflow: hidden;
  border-radius: 16px;
}

/* Track: webkit browsers */
input[type=range]::-webkit-slider-runnable-track {
  height: 12px;
  background: #ccc;
  border-radius: 16px;
}

/* Track: Mozilla Firefox */
input[type=range]::-moz-range-track {
  height: 12px;
  background: #ccc;
  border-radius: 16px;
}

/* Thumb: webkit */
input[type=range]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none;
  /* creating a custom design */
  height: 12px;
  width: 12px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid var(--calc-primary, #0066cc);
  /*  slider progress trick  */
  -webkit-box-shadow: -407px 0 0 400px var(--calc-primary, #0066cc);
          box-shadow: -407px 0 0 400px var(--calc-primary, #0066cc);
}

/* Thumb: Firefox */
input[type=range]::-moz-range-thumb {
  height: 12px;
  width: 1px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid var(--calc-primary);
  /*  slider progress trick  */
  box-shadow: -407px 0 0 400px var(--calc-primary, #0066cc);
}