.elementor-1202 .elementor-element.elementor-element-ccb7f70:not(.elementor-motion-effects-element-type-background), .elementor-1202 .elementor-element.elementor-element-ccb7f70 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://demo64.mbswebsite.com/wp-content/uploads/2024/08/real-estate-agents-are-analyzing-insurance-discoun-2023-11-27-05-09-20-utc-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1202 .elementor-element.elementor-element-ccb7f70 > .elementor-container{min-height:357px;}.elementor-1202 .elementor-element.elementor-element-ccb7f70 > .elementor-background-overlay{opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1202 .elementor-element.elementor-element-ccb7f70{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1202 .elementor-element.elementor-element-afc6e29{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1202 .elementor-element.elementor-element-afc6e29 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1202 .elementor-element.elementor-element-d1f2162{--spacer-size:10px;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-1202 .elementor-element.elementor-element-a14c6e3{--divider-border-style:solid;--divider-color:#4D7CA0;--divider-border-width:4px;--divider-element-spacing:20px;}.elementor-1202 .elementor-element.elementor-element-a14c6e3 .elementor-divider-separator{width:100%;margin:0 auto;margin-center:0;}.elementor-1202 .elementor-element.elementor-element-a14c6e3 .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}.elementor-1202 .elementor-element.elementor-element-a14c6e3 .elementor-divider__text{color:#4D7CA0;font-family:"Open Sans", Sans-serif;font-size:40px;font-weight:700;}body.elementor-page-1202:not(.elementor-motion-effects-element-type-background), body.elementor-page-1202 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:center center;background-repeat:no-repeat;background-size:cover;}@media(min-width:1025px){.elementor-1202 .elementor-element.elementor-element-ccb7f70:not(.elementor-motion-effects-element-type-background), .elementor-1202 .elementor-element.elementor-element-ccb7f70 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}body.elementor-page-1202:not(.elementor-motion-effects-element-type-background), body.elementor-page-1202 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:scroll;}}@media(max-width:767px){.elementor-1202 .elementor-element.elementor-element-ccb7f70 > .elementor-container{min-height:145px;}.elementor-1202 .elementor-element.elementor-element-a14c6e3 .elementor-divider__text{font-size:30px;}}/* Start custom CSS for html, class: .elementor-element-89fa5fa */body {
  margin: 0;
  padding: 0;
  background: #f5f5f5; /* light gray page background */
  color: #374151; /* default text color (gray-700) */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
h3, h4 {
  margin: 0.5em 0;
}
p, label, li, button {
  font-size: 0.95rem;
  line-height: 1.4;
}
ul { list-style: none; padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; }

/* Main container */
.calculator-app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* Main tab navigation */
.main-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0;
  margin: 0 0 1rem;
  border-bottom: 2px solid #ccc;
}
button.cta-button {
    display: none;
}
.main-tabs li {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: #6b7280; /* gray-500 */
  font-weight: 600;
}
.main-tabs li.active {
  color: #ffffff;
  background: #4D7CA0; /* primary blue */
  border-radius: 5px 5px 0 0;
}
.main-tabs li:hover { color: #111827; }
/* Sub-tabs (for Affordability loan types) */
.sub-tabs ul {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1rem;
}
.sub-tabs li {
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #9ca3af; /* gray-400 */
  border-bottom: 3px solid transparent;
}
.sub-tabs li.active {
  color: #666666;
  border-color: #4D7CA0;
}
.sub-tabs li:hover { color: #666666; }

/* Calculator Sections layout */
.calc-section {
  display: none;
}
.calc-section.active {
  display: block;
}
.calc-container {
  display: flex;
  gap: 2rem;
}
.inputs-panel, .outputs-panel {
  flex: 1;
}

/* Inputs panel (left side) */
.inputs-panel {
  background: #1f2937; /* dark gray */
  color: #e5e7eb; /* light gray text */
  padding: 1rem;
  border-radius: 8px;
}
.inputs-panel .field {
  margin-bottom: 1rem;
}
.inputs-panel label {
  display: inline-block;
  margin-bottom: 0.25rem;
  color: #e5e7eb;
  font-weight: 500;
}
.inputs-panel .info {
  font-style: normal;
  color: #9ca3af;
  cursor: help;
  margin-left: 0.25rem;
}

.inputs-panel input,
.inputs-panel select,
.inputs-panel button.cta-button {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
}

.inputs-panel input, .inputs-panel select {
  background: #374151; /* slightly lighter dark for input fields */
  border: 1px solid #4b5563;
  color: #ffffff;
  border-radius: 4px;
}
.inputs-panel input:focus, .inputs-panel select:focus {
  outline: 2px solid #4D7CA0;
}
.inputs-panel select {
  color: #ffffff;
  /* remove default arrow style in some browsers: */
  -moz-appearance: none;
  -webkit-appearance: none;
}
.inputs-panel .dual-input {
  display: flex;
  align-items: center;
}
.inputs-panel .dual-input input {
  width: 45%;
}
.inputs-panel .dual-sep {
  flex: 0 0 auto;
  padding: 0 0.25rem;
  color: #9ca3af;
}
.inputs-panel .dual-suffix {
  flex: 0 0 auto;
  display: flex;
  margin-left: 0.25rem;
}
.inputs-panel .unit-toggle {
  background: #4b5563;
  color: #e5e7eb;
  border: 1px solid #6b7280;
  padding: 0.25rem 0.5rem;
  margin-left: -1px;
  cursor: pointer;
}
.inputs-panel .unit-toggle.active {
  background: #4D7CA0;
  color: #ffffff;
  border-color: #4D7CA0;
}
.inputs-panel .unit-toggle:first-child {
  border-radius: 4px 0 0 4px;
}
.inputs-panel .unit-toggle:last-child {
  border-radius: 0 4px 4px 0;
}

/* Output panel (right side) */
.outputs-panel {
  padding: 0.5rem 0;
}
.summary-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.summary-card {
  flex: 1;
  background: #4D7CA0;
  color: #ffffff;
  padding: 0.5rem;
  border-radius: 5px;
  text-align: center;
}
.summary-card h4 {
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.summary-card p {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 700;
}

/* Cards for breakdowns, details, etc. */
.card {
  background: #ffffff;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}
.card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #111827;
}
.card h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #111827;
}
.card .info {
  font-weight: 700;
  cursor: help;
  color: #6b7280;
  margin-left: 0.25rem;
}
.details-list li {
  margin: 0.25rem 0;
  font-size: 0.93rem;
}
.details-list li span {
  font-weight: 600;
}
.summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
}
.summary-table th, .summary-table td {
  text-align: right;
  padding: 0.25rem 0.5rem;
}
.summary-table th:first-child, .summary-table td:first-child {
  text-align: left;
}
.summary-table tr:nth-child(even) {
  background: #f9fafb;
}
.summary-table th {
  color: #374151;
  font-weight: 600;
}

/* Chart legend styling */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}
.chart-legend li {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}
.chart-legend span.swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 0.4rem;
  border-radius: 2px;
}

/* Info icon styling (for the 'i' tooltips) */
.info {
  font-family: Arial, sans-serif;
  border-bottom: 1px dashed #6b7280;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .calc-container {
    flex-direction: column;
  }
  .inputs-panel, .outputs-panel {
    width: 100%;
  }
  .summary-row {
    flex-direction: column;
  }
  .summary-card {
    width: 100%;
  }
  .main-tabs ul {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}/* End custom CSS */