/*
  Equitifund Calculator Suite - shared runtime stylesheet.
  Loaded once by each calculator widget (rent-vs-buy, rent-vs-buy-visual,
  shared-equity, yield-estimator, borrowing-capacity, mortgage, stamp-duty)
  via <link rel="stylesheet" href="equitifund-styles.css">.

  Every rule is scoped to its widget's #{prefix}-widget root, so all six
  sections below can coexist on one page with no collisions. Colour, radius,
  shadow and font tokens are CSS custom properties: the values here are the
  built-in fallbacks, and equitifund-config.js overwrites them at runtime via
  each widget's applyTheme() (see equitifund-config.js theme block).
*/

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Rent vs Buy (rvb) - covers both rent-vs-buy.html and rent-vs-buy-visual.html
   ========================================================================== */

#rvb-widget {
  --ef-primary: #5E2A50;
  --ef-primary-dark: #47203D;
  --ef-bg: #ffffff;
  --ef-surface: #F6F1F7;
  --ef-border: #E7DEE8;
  --ef-text: #2C1A2A;
  --ef-muted: #6E6478;
  --ef-positive: #37A96B;
  --ef-negative: #E85A54;
  --ef-warn-bg: #FDEFE0;
  --ef-warn-border: #ED8B2E;
  --ef-warn-text: #8A4B12;
  --rvb-chart-buy: var(--ef-primary);
  --rvb-chart-rent: #2E9FD4;
  --rvb-chart-cross: #ED8B2E;
  --ef-focus: rgba(94,42,80,0.28);
  --ef-font-heading: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ef-shadow: 0 4px 16px rgba(44,26,42,0.08);
  --ef-radius: 16px;
  --ef-font: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;

  font-family: var(--ef-font);
  color: var(--ef-text);
  box-sizing: border-box;
  container-type: inline-size;
  container-name: rvb;
}
#rvb-widget *, #rvb-widget *::before, #rvb-widget *::after { box-sizing: inherit; }

#rvb-widget .rvb-card, #sec-widget .sec-card, #yie-widget .yie-card,
#bcs-widget .bcs-card, #mrc-widget .mrc-card, #sdc-widget .sdc-card {
  background: var(--ef-bg);
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  box-shadow: var(--ef-shadow);
  padding: 24px;
  max-width: 760px;
}

/* Shared warning/validation box, one definition for all six widgets. Add a
   widget-specific rule after this one (keyed off the same .{prefix}-warnings
   class) where a particular calculator needs to override something, e.g.
   .rvb-warnings ul below. */
.rvb-warnings, .sec-warnings, .yie-warnings, .bcs-warnings, .mrc-warnings, .sdc-warnings {
  margin: 12px 0;
  background: var(--ef-warn-bg);
  border: 1px solid var(--ef-warn-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--ef-warn-text);
}
.rvb-warnings ul { margin: 4px 0 0; padding-left: 18px; }
#sec-widget .sec-card, #mrc-widget .mrc-card, #sdc-widget .sdc-card { padding: 16px; }
.rvb-logo { display: block; height: 18px; width: auto; max-width: 120px; margin: 14px 0 0 auto; opacity: 0.85; }
.rvb-title { font-size: 1.4rem; margin: 0 0 4px; }
#rvb-widget h1, #rvb-widget h2, #rvb-widget h3, #rvb-widget h4, #rvb-widget .rvb-title { font-family: var(--ef-font-heading); font-weight: 600; }
.rvb-subtitle { margin: 0 0 20px; color: var(--ef-muted); font-size: 0.95rem; }

.rvb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}

.rvb-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.rvb-input-prefix, .rvb-input-suffix {
  display: flex;
  align-items: center;
  border: 1px solid var(--ef-border);
  border-radius: 8px;
  background: var(--ef-surface);
  overflow: hidden;
}
.rvb-input-prefix span, .rvb-input-suffix span {
  padding: 0 10px;
  color: var(--ef-muted);
  font-size: 0.9rem;
  user-select: none;
}
.rvb-input-prefix input, .rvb-input-suffix input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 8px;
  font-size: 16px;
  color: var(--ef-text);
  outline: none;
}
.rvb-input-suffix input { padding-right: 4px; }
.rvb-input-prefix:focus-within, .rvb-input-suffix:focus-within {
  border-color: var(--ef-primary);
  box-shadow: 0 0 0 3px var(--ef-focus);
}
.rvb-input-prefix input::-webkit-outer-spin-button,
.rvb-input-prefix input::-webkit-inner-spin-button,
.rvb-input-suffix input::-webkit-outer-spin-button,
.rvb-input-suffix input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rvb-input-prefix--readonly { background: var(--ef-border); }
.rvb-input-prefix--readonly input { cursor: default; color: var(--ef-muted); }
.rvb-input-prefix--readonly:focus-within { border-color: var(--ef-border); box-shadow: none; }

.rvb-deposit-row { display: flex; gap: 8px; }
.rvb-deposit-row .rvb-input-prefix { flex: 1; }
.rvb-slider { width: 100%; height: 24px; margin-top: 10px; accent-color: var(--ef-primary); cursor: pointer; }
.rvb-toggle {
  display: flex;
  border: 1px solid var(--ef-border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.rvb-toggle-btn {
  border: none;
  background: var(--ef-surface);
  color: var(--ef-muted);
  padding: 0 14px;
  font-size: 0.9rem;
  cursor: pointer;
}
.rvb-toggle-btn.is-active {
  background: var(--ef-primary);
  color: #fff;
}

.rvb-select { position: relative; }
.rvb-select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ef-primary); border-bottom: 2px solid var(--ef-primary); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.rvb-select select { width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--ef-border); border-radius: 8px; background: var(--ef-surface); padding: 10px 32px 10px 12px; font-size: 16px; font-family: var(--ef-font); color: var(--ef-text); outline: none; }
.rvb-select select:focus { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }

.rvb-hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--ef-muted); }
.rvb-input-prefix.rvb-has-error, .rvb-input-suffix.rvb-has-error { border-color: var(--ef-negative); }
.rvb-input-prefix.rvb-has-error:focus-within, .rvb-input-suffix.rvb-has-error:focus-within { box-shadow: 0 0 0 3px rgba(232,90,84,0.22); }

.rvb-link-btn {
  display: flex;
  width: fit-content;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
  background: none;
  border: none;
  color: var(--ef-primary);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  cursor: pointer;
  padding: 10px 0 4px;
}
.rvb-chevron { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 1.3em; flex-shrink: 0; transition: transform 0.15s ease; }
.rvb-chevron svg { width: 14px; height: 14px; display: block; }
.rvb-link-btn[aria-expanded="true"] .rvb-chevron { transform: rotate(90deg); }

.rvb-advanced-panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ef-border); }
.rvb-section-title { font-size: 0.95rem; margin: 16px 0 10px; color: var(--ef-text); }

.rvb-results { margin-top: 24px; border-radius: var(--ef-radius); }
.rvb-results.rvb-pulse { animation: ef-pulse 700ms ease-out; }
.rvb-result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* Wider layouts opt in via the widget's own container width (not the
   viewport), so it adapts to whatever column it is embedded in. */
@container rvb (min-width: 560px) {
  .rvb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container rvb (min-width: 620px) {
  .rvb-result-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 560px) { .rvb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 620px) { .rvb-result-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}
.rvb-result-box {
  background: var(--ef-surface);
  border: 1px solid var(--ef-border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.rvb-result-box--highlight {
  background: rgba(94,42,80,0.08);
  border-color: var(--ef-primary);
}
.rvb-result-label { font-size: 0.78rem; color: var(--ef-muted); margin-bottom: 4px; }
.rvb-result-value { font-size: 1.3rem; font-weight: 700; }
.rvb-result-note { font-size: 0.72rem; color: var(--ef-muted); margin-top: 4px; }
.rvb-result-value.is-positive { color: var(--ef-positive); }
.rvb-result-value.is-negative { color: var(--ef-negative); }

.rvb-advanced-results { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--ef-border); }
.rvb-model-note { margin-bottom: 12px; }

.rvb-table-wrap { overflow-x: auto; margin-top: 14px; }

.rvb-networth { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--ef-border); }
.rvb-networth-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rvb-networth-head .rvb-section-title { margin: 0; }
.rvb-view-toggle { display: inline-flex; border: 1px solid var(--ef-border); border-radius: 8px; overflow: hidden; }
.rvb-view-btn { border: none; background: var(--ef-bg); color: var(--ef-muted); padding: 7px 16px; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: var(--ef-font); }
.rvb-view-btn + .rvb-view-btn { border-left: 1px solid var(--ef-border); }
.rvb-view-btn.is-active { background: var(--ef-primary); color: #fff; }
.rvb-chart-block { margin-top: 16px; }
.rvb-chart { width: 100%; height: auto; min-height: 220px; display: block; background: var(--ef-bg); border: 1px solid var(--ef-border); border-radius: var(--ef-radius); padding: 6px 8px; }
.rvb-line-buy { fill: none; stroke: var(--rvb-chart-buy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rvb-line-rent { fill: none; stroke: var(--rvb-chart-rent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rvb-dot-buy { fill: var(--rvb-chart-buy); }
.rvb-dot-rent { fill: var(--rvb-chart-rent); }
.rvb-grid { stroke: var(--ef-border); stroke-width: 1; }
.rvb-axis-label { fill: var(--ef-muted); font-size: 11px; font-family: var(--ef-font); }
.rvb-axis-title { fill: var(--ef-muted); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--ef-font); }
.rvb-cross-line { stroke: var(--rvb-chart-cross); stroke-width: 1.4; stroke-dasharray: 4 3; }
.rvb-cross-label { fill: var(--rvb-chart-cross); font-size: 11px; font-weight: 600; font-family: var(--ef-font); }
.rvb-line-label { font-size: 11px; font-weight: 700; font-family: var(--ef-font); }
.rvb-line-label-buy { fill: var(--rvb-chart-buy); }
.rvb-line-label-rent { fill: var(--rvb-chart-rent); }
.rvb-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rvb-table th, .rvb-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ef-border); white-space: nowrap; }
.rvb-table th { color: var(--ef-muted); font-weight: 600; }

.rvb-lead-form-wrap { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ef-border); }
.rvb-lead-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rvb-lead-cancel-btn { background: none; border: none; color: var(--ef-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 8px 0; font-family: var(--ef-font); }
.rvb-lead-cancel-btn:hover { color: var(--ef-primary); }
.rvb-field--wide { grid-column: 1 / -1; }
.rvb-optional { font-weight: 400; color: var(--ef-muted); }
.rvb-lead-input {
  width: 100%;
  border: 1px solid var(--ef-border);
  border-radius: 8px;
  background: var(--ef-bg);
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--ef-font);
  color: var(--ef-text);
  outline: none;
  box-sizing: border-box;
}
.rvb-lead-input:focus { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }
.rvb-btn-primary {
  display: inline-block;
  background: var(--ef-primary);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.rvb-btn-primary:hover { background: var(--ef-primary-dark); }
.rvb-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.rvb-btn-primary[hidden] { display: none; }
.rvb-lead-form-wrap .rvb-btn-primary { margin-top: 4px; }
.rvb-lead-privacy { margin: 10px 0 0; font-size: 0.72rem; line-height: 1.4; color: var(--ef-muted); }
.rvb-lead-success {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--ef-bg);
  border: 1px solid var(--ef-positive);
  color: var(--ef-text);
  font-size: 0.9rem;
}

.rvb-disclaimer {
  margin-top: 20px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ef-muted);
  border-top: 1px solid var(--ef-border);
  padding-top: 14px;
}

.rvb-utility-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.rvb-utility-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: none; color: var(--ef-muted); font-size: 0.82rem; font-family: var(--ef-font); cursor: pointer; padding: 0; }
.rvb-utility-btn:hover { color: var(--ef-primary); }
.rvb-inline-lead { display: flex; align-items: center; gap: 12px; }
.rvb-inline-lead-title { display: none; }
.rvb-btn-compact { padding: 8px 16px; font-size: 0.85rem; }

/* --- Print / PDF report ---
   @page is shared across all six calculators' printed reports: consistent
   margins regardless of browser/OS defaults. Each report's root also gets a
   capped, centered max-width: a calculator's on-screen width is whatever its
   host page's iframe happens to be (often much wider than a printed page), and
   printing a specific frame does not always reflow that width down to the
   physical page, so without a cap the report can run off the right edge. */
@page { margin: 16mm; }

.rvb-print-only { display: none; }
@media print {
  #rvb-widget .rvb-card > *:not(.rvb-print-only) { display: none !important; }
  #rvb-widget .rvb-card { border: none; box-shadow: none; padding: 0; max-width: none; }
  #rvb-widget .rvb-print-only { display: block !important; max-width: 700px; margin: 0 auto; }
  .rvb-print-only h2 { font-size: 1.25rem; margin: 14px 0 8px; page-break-after: avoid; }
  .rvb-print-only h3 { font-size: 1rem; margin: 18px 0 8px; page-break-after: avoid; }
  .rvb-print-logo { display: block; height: 26px; width: auto; margin-bottom: 6px; }
  .rvb-print-meta { font-size: 0.75rem; color: #666; margin-bottom: 4px; }
  .rvb-print-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; font-size: 0.85rem; }
  .rvb-print-table th, .rvb-print-table td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
  .rvb-print-table th { background: #f4f4f4; width: 60%; }
  .rvb-print-table tr { page-break-inside: avoid; }
  .rvb-print-chart { max-width: 600px; margin: 4px 0 12px; page-break-inside: avoid; }
  .rvb-print-disclaimer { font-size: 0.72rem; line-height: 1.5; color: #555; margin-top: 18px; border-top: 1px solid #ccc; padding-top: 10px; page-break-inside: avoid; }
  .rvb-print-contact { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 0.8rem; color: #333; page-break-inside: avoid; }
  .rvb-print-contact h3 { font-size: 0.95rem; margin: 0 0 6px; }
  .rvb-print-contact p { margin: 2px 0; }
}

/* ==========================================================================
   Shared Equity (sec)
   ========================================================================== */

#sec-widget {
  --ef-primary: #5E2A50;
  --ef-primary-dark: #47203D;
  --ef-bg: #ffffff;
  --ef-surface: #F6F1F7;
  --ef-border: #E7DEE8;
  --ef-text: #2C1A2A;
  --ef-muted: #6E6478;
  --ef-warn-bg: #FDEFE0;
  --ef-warn-border: #ED8B2E;
  --ef-warn-text: #8A4B12;
  --sec-deposit: #5E2A50;
  --sec-equity: #ED8B2E;
  --sec-loan: #9B8FA3;
  --ef-focus: rgba(94,42,80,0.28);
  --ef-font-heading: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ef-shadow: 0 4px 16px rgba(44,26,42,0.08);
  --ef-radius: 16px;
  --ef-font: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-family: var(--ef-font);
  color: var(--ef-text);
  line-height: 1.4;
  container-type: inline-size;
  container-name: sec;
}
#sec-widget *, #sec-widget *::before, #sec-widget *::after { box-sizing: border-box; }

.sec-title { font-size: 1.4rem; margin: 0 0 4px; }
#sec-widget h1, #sec-widget h2, #sec-widget h3, #sec-widget h4, #sec-widget .sec-title { font-family: var(--ef-font-heading); font-weight: 600; }
.sec-subtitle { margin: 0 0 18px; color: var(--ef-muted); font-size: 0.95rem; }

.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 8px; }
.sec-field--wide { grid-column: 1 / -1; }

.sec-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.sec-input-prefix, .sec-input-suffix { display: flex; align-items: center; border: 1px solid var(--ef-border); border-radius: 8px; background: var(--ef-surface); overflow: hidden; }
.sec-input-prefix span, .sec-input-suffix span { padding: 0 10px; color: var(--ef-muted); font-size: 0.9rem; user-select: none; }
.sec-input-prefix input, .sec-input-suffix input { flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 8px; font-size: 16px; color: var(--ef-text); outline: none; }
.sec-input-prefix:focus-within, .sec-input-suffix:focus-within { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }
.sec-input-prefix input::-webkit-outer-spin-button, .sec-input-suffix input::-webkit-outer-spin-button,
.sec-input-prefix input::-webkit-inner-spin-button, .sec-input-suffix input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#sec-widget input[type=number] { -moz-appearance: textfield; }

.sec-slider { width: 100%; height: 24px; margin-top: 10px; accent-color: var(--ef-primary); cursor: pointer; }

.sec-deposit-row { display: flex; gap: 8px; }
.sec-deposit-row .sec-input-prefix { flex: 1; }

.sec-toggle { display: flex; border: 1px solid var(--ef-border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.sec-toggle-btn { border: none; background: var(--ef-surface); color: var(--ef-muted); padding: 0 14px; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.sec-toggle-btn:not(.is-active):hover { color: var(--ef-text); }
.sec-toggle-btn.is-active { background: var(--ef-primary); color: #fff; }

.sec-hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--ef-muted); }


.sec-results { border-radius: var(--ef-radius); }
.sec-results.sec-pulse { animation: ef-pulse 700ms ease-out; }
.sec-result-banner { background: var(--ef-primary); color: #fff; text-align: center; font-size: 1.1rem; padding: 16px; border-radius: 8px; margin: 18px 0 16px; }
.sec-result-banner strong { display: block; font-size: 1.7rem; font-size: clamp(1.4rem, 8cqi, 1.7rem); margin-top: 4px; }

.sec-bar { display: flex; width: 100%; height: 22px; border-radius: 6px; overflow: hidden; background: var(--ef-surface); border: 1px solid var(--ef-border); }
.sec-bar-seg { height: 100%; transition: width 0.2s ease; }
.sec-bar-deposit { background: var(--sec-deposit); }
.sec-bar-equity { background: var(--sec-equity); }
.sec-bar-loan { background: var(--sec-loan); }
.sec-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0 4px; font-size: 0.8rem; color: var(--ef-muted); }
.sec-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.sec-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sec-sw-deposit { background: var(--sec-deposit); }
.sec-sw-equity { background: var(--sec-equity); }
.sec-sw-loan { background: var(--sec-loan); }

.sec-result-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 16px 0 12px; }
.sec-result-cell { background: var(--ef-surface); border: 1px solid var(--ef-border); border-radius: 8px; padding: 14px; }
.sec-result-label { display: block; font-size: 0.8rem; color: var(--ef-muted); }
.sec-result-value { display: block; font-size: 1.5rem; font-size: clamp(1.25rem, 6cqi, 1.5rem); font-weight: 700; color: var(--ef-primary); margin: 2px 0; }
.sec-result-note { display: block; font-size: 0.78rem; color: var(--ef-muted); }

.sec-link-btn { display: inline-flex; align-items: flex-start; text-align: left; gap: 4px; background: none; border: none; color: var(--ef-primary); font-weight: 600; font-size: 0.9rem; line-height: 1.3; cursor: pointer; padding: 10px 0 4px; }
.sec-chevron { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 1.3em; flex-shrink: 0; transition: transform 0.15s ease; }
.sec-chevron svg { width: 14px; height: 14px; display: block; }
.sec-link-btn[aria-expanded="true"] .sec-chevron { transform: rotate(90deg); }
.sec-advanced-panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ef-border); }

.sec-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; }
.sec-table td { padding: 6px 4px; border-bottom: 1px solid var(--ef-border); }
.sec-table td:last-child { text-align: right; font-weight: 600; }

.sec-utility-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.sec-utility-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: none; color: var(--ef-muted); font-size: 0.82rem; cursor: pointer; padding: 0; }
.sec-utility-btn:hover { color: var(--ef-primary); }
.sec-inline-lead { display: flex; align-items: center; gap: 12px; }
.sec-inline-lead-title { display: none; }
.sec-btn-compact { padding: 8px 16px; font-size: 0.85rem; }

.sec-lead-form-wrap { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ef-border); }
.sec-lead-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sec-lead-cancel-btn { background: none; border: none; color: var(--ef-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 8px 0; }
.sec-lead-cancel-btn:hover { color: var(--ef-primary); }
.sec-optional { font-weight: 400; color: var(--ef-muted); }
.sec-lead-input {
  width: 100%;
  border: 1px solid var(--ef-border);
  border-radius: 8px;
  background: var(--ef-bg);
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--ef-font);
  color: var(--ef-text);
  outline: none;
  box-sizing: border-box;
}
.sec-lead-input:focus { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }
.sec-btn-primary {
  display: inline-block;
  background: var(--ef-primary);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.sec-btn-primary:hover { background: var(--ef-primary-dark); }
.sec-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.sec-btn-primary[hidden] { display: none; }
.sec-lead-form-wrap .sec-btn-primary { margin-top: 4px; }
.sec-lead-privacy { margin: 10px 0 0; font-size: 0.72rem; line-height: 1.4; color: var(--ef-muted); }
.sec-lead-success {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--ef-bg);
  border: 1px solid var(--ef-positive, #37A96B);
  color: var(--ef-text);
  font-size: 0.9rem;
}

.sec-disclaimer { margin-top: 20px; font-size: 0.75rem; line-height: 1.5; color: var(--ef-muted); border-top: 1px solid var(--ef-border); padding-top: 14px; }
.sec-logo { display: block; height: 18px; width: auto; max-width: 120px; margin: 14px 0 0 auto; opacity: 0.85; }

/* Wider layouts, opted into by the widget's own container width (not the
   viewport) so the calculator adapts to whatever column it is embedded in. */
@container sec (min-width: 620px) {
  .sec-card { padding: 24px; }
  .sec-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sec-result-detail { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* Fallback for browsers without container-query support: use the viewport. */
@supports not (container-type: inline-size) {
  @media (min-width: 620px) {
    .sec-card { padding: 24px; }
    .sec-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sec-result-detail { grid-template-columns: repeat(3, minmax(0,1fr)); }
  }
}

.sec-print-only { display: none; }
@media print {
  #sec-widget .sec-card > *:not(.sec-print-only) { display: none !important; }
  #sec-widget .sec-card { border: none; box-shadow: none; padding: 0; max-width: none; }
  #sec-widget .sec-print-only { display: block !important; max-width: 700px; margin: 0 auto; }
  .sec-print-only h2 { font-size: 1.25rem; margin: 14px 0 8px; page-break-after: avoid; }
  .sec-print-logo { display: block; height: 26px; width: auto; margin-bottom: 6px; }
  .sec-print-meta { font-size: 0.75rem; color: #666; margin-bottom: 4px; }
  .sec-print-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; font-size: 0.85rem; }
  .sec-print-table th, .sec-print-table td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
  .sec-print-table th { background: #f4f4f4; width: 55%; }
  .sec-print-table tr { page-break-inside: avoid; }
  .sec-print-disclaimer { font-size: 0.72rem; line-height: 1.5; color: #555; margin-top: 18px; border-top: 1px solid #ccc; padding-top: 10px; page-break-inside: avoid; }
  .sec-print-contact { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 0.8rem; color: #333; page-break-inside: avoid; }
  .sec-print-contact h3 { font-size: 0.95rem; margin: 0 0 6px; }
  .sec-print-contact p { margin: 2px 0; }
}

/* ==========================================================================
   Yield Estimator (yie)
   ========================================================================== */

#yie-widget {
  --ef-primary: #5E2A50;
  --ef-primary-dark: #47203D;
  --ef-bg: #ffffff;
  --ef-surface: #F6F1F7;
  --ef-border: #E7DEE8;
  --ef-text: #2C1A2A;
  --ef-muted: #6E6478;
  --ef-focus: rgba(94,42,80,0.28);
  --ef-font-heading: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ef-shadow: 0 4px 16px rgba(44,26,42,0.08);
  --ef-radius: 16px;
  --ef-font: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-family: var(--ef-font);
  color: var(--ef-text);
  container-type: inline-size;
  container-name: yie;
}
#yie-widget *, #yie-widget *::before, #yie-widget *::after { box-sizing: border-box; }

.yie-title { font-size: 1.4rem; margin: 0 0 4px; }
#yie-widget h1, #yie-widget h2, #yie-widget h3, #yie-widget h4, #yie-widget .yie-title { font-family: var(--ef-font-heading); font-weight: 600; }
.yie-subtitle { margin: 0 0 20px; color: var(--ef-muted); font-size: 0.95rem; line-height: 1.5; }

.yie-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@container yie (min-width: 720px) { .yie-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } }
@supports not (container-type: inline-size) {
  @media (min-width: 720px) { .yie-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; } }
}

.yie-field { margin-bottom: 18px; }
.yie-field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.yie-val { color: var(--ef-primary); font-weight: 700; }

.yie-input-prefix { display: flex; align-items: center; border: 1px solid var(--ef-border); border-radius: 8px; background: var(--ef-surface); overflow: hidden; }
.yie-input-prefix span { padding: 0 10px; color: var(--ef-muted); font-size: 0.9rem; user-select: none; }
.yie-input-prefix input { flex: 1; min-width: 0; border: none; background: transparent; padding: 11px 8px; font-size: 16px; color: var(--ef-text); outline: none; }
.yie-input-prefix:focus-within { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }
.yie-input-prefix input::-webkit-outer-spin-button, .yie-input-prefix input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.yie-input-prefix input[type=number] { -moz-appearance: textfield; }

.yie-rent-row { display: flex; flex-direction: column; gap: 8px; }
.yie-freq-toggle { display: flex; border: 1px solid var(--ef-border); border-radius: 8px; overflow: hidden; }
.yie-freq-btn { flex: 1; border: none; background: var(--ef-surface); color: var(--ef-muted); padding: 9px 4px; font-size: 0.8rem; cursor: pointer; }
.yie-freq-btn + .yie-freq-btn { border-left: 1px solid var(--ef-border); }
.yie-freq-btn.is-active { background: var(--ef-primary); color: #fff; }

.yie-slider { width: 100%; margin-top: 4px; accent-color: var(--ef-primary); }
.yie-hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--ef-muted); line-height: 1.4; }

.yie-link-btn { display: inline-flex; align-items: flex-start; text-align: left; gap: 6px; background: none; border: none; color: var(--ef-primary); font-weight: 600; font-size: 0.88rem; line-height: 1.3; cursor: pointer; padding: 4px 0; }
.yie-chevron { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 1.3em; flex-shrink: 0; transition: transform 0.15s ease; }
.yie-chevron svg { width: 14px; height: 14px; display: block; }
.yie-link-btn[aria-expanded="true"] .yie-chevron { transform: rotate(90deg); }
.yie-advanced-panel { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--ef-border); }

/* Results column */
.yie-results { background: var(--ef-surface); border: 1px solid var(--ef-border); border-radius: var(--ef-radius); padding: 20px; align-self: start; }
.yie-results.yie-pulse { animation: ef-pulse 700ms ease-out; }
.yie-yields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.yie-yield-box { background: var(--ef-bg); border: 1px solid var(--ef-border); border-radius: 8px; padding: 14px 10px 14px 10px; text-align: center; }
.yie-yield-box--net { background: var(--ef-primary); border-color: var(--ef-primary); }
.yie-yield-label { display: block; font-size: 0.78rem; color: var(--ef-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.yie-yield-box--net .yie-yield-label { color: rgba(255,255,255,0.85); }
.yie-yield-value { display: block; font-size: 1.9rem; font-size: clamp(1rem, 6.8cqi, 1.9rem); font-weight: 700; color: var(--ef-primary); margin-top: 4px; }
.yie-yield-box--net .yie-yield-value { color: #fff; }

.yie-net-income { margin: 0 0 16px; font-size: 0.9rem; color: var(--ef-muted); text-align: center; }
.yie-net-income strong { color: var(--ef-text); }

.yie-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.yie-table td { padding: 9px 4px; border-bottom: 1px solid var(--ef-border); }
.yie-table td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.yie-table-total td { border-bottom: none; border-top: 2px solid var(--ef-border); font-weight: 700; padding-top: 11px; }
.yie-table-total td:last-child { color: var(--ef-primary); }

.yie-utility-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.yie-utility-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: none; color: var(--ef-muted); font-size: 0.82rem; cursor: pointer; padding: 0; }
.yie-utility-btn:hover { color: var(--ef-primary); }
.yie-inline-lead { display: flex; align-items: center; gap: 12px; }
.yie-inline-lead-title { display: none; }
.yie-btn-compact { padding: 8px 16px; font-size: 0.85rem; }

.yie-lead-form-wrap { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ef-border); }
.yie-lead-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.yie-lead-cancel-btn { background: none; border: none; color: var(--ef-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 8px 0; }
.yie-lead-cancel-btn:hover { color: var(--ef-primary); }
.yie-optional { font-weight: 400; color: var(--ef-muted); }
.yie-lead-input {
  width: 100%;
  border: 1px solid var(--ef-border);
  border-radius: 8px;
  background: var(--ef-bg);
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--ef-font);
  color: var(--ef-text);
  outline: none;
  box-sizing: border-box;
}
.yie-lead-input:focus { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }
.yie-lead-error { margin: 10px 0; background: #FDEFE0; border: 1px solid #ED8B2E; border-radius: 8px; padding: 10px 14px; font-size: 0.85rem; color: #8A4B12; }
.yie-btn-primary {
  display: inline-block;
  background: var(--ef-primary);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.yie-btn-primary:hover { background: var(--ef-primary-dark); }
.yie-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.yie-btn-primary[hidden] { display: none; }
.yie-lead-form-wrap .yie-btn-primary { margin-top: 4px; }
.yie-lead-privacy { margin: 10px 0 0; font-size: 0.72rem; line-height: 1.4; color: var(--ef-muted); }
.yie-lead-success {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--ef-bg);
  border: 1px solid var(--ef-positive, #37A96B);
  color: var(--ef-text);
  font-size: 0.9rem;
}

.yie-disclaimer { margin: 22px 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--ef-muted); border-top: 1px solid var(--ef-border); padding-top: 14px; }
.yie-logo { display: block; height: 18px; width: auto; max-width: 120px; margin: 14px 0 0 auto; opacity: 0.85; }

/* --- Print / PDF report --- */
.yie-print-only { display: none; }
@media print {
  #yie-widget .yie-card { display: none !important; }
  #yie-widget .yie-print-only { display: block !important; max-width: 700px; margin: 0 auto; }
  .yie-print-logo { display: block; height: 26px; width: auto; margin-bottom: 10px; }
  .yie-print-only h1 { font-size: 1.35rem; margin: 0 0 4px; color: #5E2A50; page-break-after: avoid; }
  .yie-print-meta { font-size: 0.75rem; color: #666; margin-bottom: 18px; }
  .yie-print-banner { display: flex; gap: 16px; margin: 0 0 20px; page-break-inside: avoid; }
  .yie-print-banner div { flex: 1; border: 1px solid #ccc; border-radius: 8px; padding: 12px; text-align: center; }
  .yie-print-banner .lbl { font-size: 0.75rem; color: #666; text-transform: uppercase; letter-spacing: 0.04em; }
  .yie-print-banner .val { font-size: 1.6rem; font-weight: 700; display: block; margin-top: 4px; }
  .yie-print-only h2 { font-size: 1rem; margin: 18px 0 8px; page-break-after: avoid; }
  .yie-print-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 0.85rem; }
  .yie-print-table th, .yie-print-table td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
  .yie-print-table th { background: #f4f4f4; width: 55%; }
  .yie-print-table td { text-align: right; }
  .yie-print-table tr { page-break-inside: avoid; }
  .yie-print-disclaimer { font-size: 0.72rem; line-height: 1.5; color: #555; margin-top: 22px; border-top: 1px solid #ccc; padding-top: 10px; page-break-inside: avoid; }
  .yie-print-contact { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 0.8rem; color: #333; page-break-inside: avoid; }
  .yie-print-contact h3 { font-size: 0.95rem; margin: 0 0 6px; }
  .yie-print-contact p { margin: 2px 0; }
}

/* ==========================================================================
   Borrowing Capacity Snapshot (bcs)
   ========================================================================== */

#bcs-widget {
  --ef-primary: #5E2A50;
  --ef-primary-dark: #47203D;
  --ef-bg: #ffffff;
  --ef-surface: #F6F1F7;
  --ef-border: #E7DEE8;
  --ef-text: #2C1A2A;
  --ef-muted: #6E6478;
  --ef-warn-bg: #FDEFE0;
  --ef-warn-border: #ED8B2E;
  --ef-warn-text: #8A4B12;
  --ef-focus: rgba(94,42,80,0.28);
  --ef-font-heading: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ef-shadow: 0 4px 16px rgba(44,26,42,0.08);
  --ef-radius: 16px;
  --ef-font: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-family: var(--ef-font);
  color: var(--ef-text);
  container-type: inline-size;
  container-name: bcs;
}
#bcs-widget *, #bcs-widget *::before, #bcs-widget *::after { box-sizing: border-box; }

.bcs-title { font-size: 1.4rem; margin: 0 0 4px; }
#bcs-widget h1, #bcs-widget h2, #bcs-widget h3, #bcs-widget h4, #bcs-widget .bcs-title { font-family: var(--ef-font-heading); font-weight: 600; }
.bcs-subtitle { margin: 0 0 18px; color: var(--ef-muted); font-size: 0.95rem; }

.bcs-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--ef-border); margin-bottom: 20px; }
.bcs-tab { background: none; border: none; padding: 8px 0; font-size: 0.9rem; font-weight: 600; color: var(--ef-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.bcs-tab.is-active { color: var(--ef-primary); border-bottom-color: var(--ef-primary); }

/* Guided step indicator used by the step-by-step variant: a running
   "label + live value" line for the active step above a clickable,
   segmented progress bar (segments up to the active step are filled). */
.bcs-steps { border-bottom: 1px solid var(--ef-border); padding-bottom: 14px; margin-bottom: 20px; }
.bcs-steps-info { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.bcs-steps-label { font-size: 0.85rem; font-weight: 700; color: var(--ef-text); }
.bcs-steps-value { font-size: 0.85rem; font-weight: 700; color: var(--ef-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcs-steps-bar { display: flex; gap: 6px; }
.bcs-step-seg { flex: 1; height: 6px; padding: 0; border: none; border-radius: 3px; background: var(--ef-border); cursor: pointer; }
.bcs-step-seg.is-filled { background: var(--ef-primary); }
.bcs-step-seg:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ef-focus); }

.bcs-panel { display: none; }
.bcs-panel.is-active { display: block; }

.bcs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 8px; }
.bcs-grid--3 { grid-template-columns: minmax(0, 1fr); }
.bcs-field--wide { grid-column: 1 / -1; }

/* Always single-line, regardless of container width (used by the guided step
   variant's Salary/Frequency and Other income rows). The extra
   .bcs-grid qualifier raises specificity above the @container override below. */
.bcs-grid.bcs-salary-row { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 8px; }
.bcs-grid.bcs-other-income-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }

.bcs-field label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.bcs-input-prefix, .bcs-input-suffix { display: flex; align-items: center; border: 1px solid var(--ef-border); border-radius: 8px; background: var(--ef-surface); overflow: hidden; }
.bcs-input-prefix span, .bcs-input-suffix span { padding: 0 10px; color: var(--ef-muted); font-size: 0.9rem; user-select: none; }
.bcs-input-prefix input, .bcs-input-suffix input { flex: 1; min-width: 0; border: none; background: transparent; padding: 10px 8px; font-size: 16px; color: var(--ef-text); outline: none; }
.bcs-input-prefix:focus-within, .bcs-input-suffix:focus-within { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }
.bcs-input-prefix input::-webkit-outer-spin-button, .bcs-input-suffix input::-webkit-outer-spin-button,
.bcs-input-prefix input::-webkit-inner-spin-button, .bcs-input-suffix input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#bcs-widget select { width: 100%; padding: 10px 8px; border: 1px solid var(--ef-border); border-radius: 8px; background: var(--ef-surface); color: var(--ef-text); font-size: 16px; }
.bcs-slider { width: 100%; margin-top: 10px; accent-color: var(--ef-primary); }

.bcs-toggle { display: flex; border: 1px solid var(--ef-border); border-radius: 8px; overflow: hidden; }
.bcs-toggle-btn { flex: 1; border: none; background: var(--ef-surface); color: var(--ef-muted); padding: 10px 8px; font-size: 0.85rem; cursor: pointer; }
.bcs-toggle-btn.is-active { background: var(--ef-primary); color: #fff; }

.bcs-hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--ef-muted); }
.bcs-section-title { font-size: 0.95rem; margin: 18px 0 10px; }

.bcs-applicant { border-top: 1px solid var(--ef-border); padding-top: 16px; margin-top: 16px; }
.bcs-applicant-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.bcs-applicant-header h3 { margin: 0; font-size: 1.05rem; }
.bcs-applicant-total { font-weight: 700; color: var(--ef-primary); font-size: 0.95rem; }

.bcs-other-income { margin-top: 16px; background: var(--ef-surface); border: 1px solid var(--ef-border); border-radius: 8px; padding: 12px 14px; }
.bcs-other-income-intro { margin: 0 0 10px; font-size: 0.85rem; }
.bcs-other-income-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-weight: 700; font-size: 0.9rem; }
.bcs-other-income-total { font-weight: 700; color: var(--ef-primary); font-size: 0.85rem; }
.bcs-other-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; margin-bottom: 10px; }
.bcs-other-row .bcs-field label { font-size: 0.75rem; }
.bcs-delete-row { background: none; border: 1px solid var(--ef-border); border-radius: 6px; width: 36px; height: 36px; cursor: pointer; color: var(--ef-muted); }
.bcs-delete-row:hover { color: #E85A54; border-color: #E85A54; }
.bcs-add-income { background: none; border: 1px solid var(--ef-primary); color: var(--ef-primary); border-radius: 20px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.bcs-add-income:hover { background: rgba(94,42,80,0.08); }

.bcs-link-btn { display: inline-flex; align-items: flex-start; text-align: left; gap: 4px; background: none; border: none; color: var(--ef-primary); font-weight: 600; font-size: 0.9rem; line-height: 1.3; cursor: pointer; padding: 10px 0 4px; }
.bcs-chevron { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 1.3em; flex-shrink: 0; transition: transform 0.15s ease; }
.bcs-chevron svg { width: 14px; height: 14px; display: block; }
.bcs-link-btn[aria-expanded="true"] .bcs-chevron { transform: rotate(90deg); }
.bcs-advanced-panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ef-border); }

.bcs-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.bcs-btn-primary, .bcs-btn-secondary { border: none; border-radius: 24px; padding: 12px 20px; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.bcs-btn-primary { background: var(--ef-primary); color: #fff; }
.bcs-btn-primary:hover { background: var(--ef-primary-dark); }
.bcs-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.bcs-btn-secondary { background: var(--ef-surface); color: var(--ef-text); border: 1px solid var(--ef-border); }

.bcs-utility-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; }
.bcs-utility-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: none; color: var(--ef-muted); font-size: 0.8rem; cursor: pointer; padding: 0; }
.bcs-utility-btn:hover { color: var(--ef-primary); }
.bcs-inline-lead { display: flex; align-items: center; gap: 12px; }
.bcs-inline-lead-title { display: none; }
.bcs-btn-compact { padding: 8px 16px; font-size: 0.85rem; }

.bcs-result-banner { background: var(--ef-primary); color: #fff; text-align: center; font-size: 1.1rem; padding: 16px; border-radius: 8px; margin-bottom: 16px; }
.bcs-result-banner.bcs-pulse { animation: ef-pulse 700ms ease-out; }
.bcs-result-banner strong { font-size: 1.5rem; }
.bcs-result-banner-sub { display: block; font-size: 0.78rem; font-weight: 500; opacity: 0.85; margin-top: 6px; }

.bcs-result-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 12px; }
.bcs-drove-title { font-size: 0.95rem; margin: 0 0 8px; }
.bcs-drove-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; padding: 6px 0; border-bottom: 1px solid var(--ef-border); }
.bcs-drove-row:last-child { border-bottom: none; }
.bcs-drove-row--total { font-weight: 700; color: var(--ef-primary); }

/* Wider layouts opt in via the widget's own container width (not the viewport). */
@container bcs (min-width: 620px) {
  .bcs-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bcs-grid--3 { grid-template-columns: 2fr 1fr 1fr; }
  .bcs-other-row { grid-template-columns: 2fr 1fr 1fr auto; }
  .bcs-result-cards { grid-template-columns: 1.3fr 1fr; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 620px) {
    .bcs-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .bcs-grid--3 { grid-template-columns: 2fr 1fr 1fr; }
    .bcs-other-row { grid-template-columns: 2fr 1fr 1fr auto; }
    .bcs-result-cards { grid-template-columns: 1.3fr 1fr; }
  }
}
.bcs-result-detail-main, .bcs-result-cta { background: var(--ef-surface); border: 1px solid var(--ef-border); border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.bcs-result-label { display: block; font-size: 0.8rem; color: var(--ef-muted); }
.bcs-result-value { display: block; font-size: 1.6rem; font-weight: 700; color: var(--ef-primary); margin: 2px 0; }
.bcs-result-note { display: block; font-size: 0.8rem; color: var(--ef-muted); margin-bottom: 12px; }
.bcs-result-basis { font-size: 0.75rem; color: var(--ef-muted); margin: 10px 0 0; }
.bcs-result-cta p { margin: 0 0 8px; font-size: 0.85rem; }

.bcs-lead { margin-top: 22px; }
.bcs-lead-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bcs-lead-cancel-btn { background: none; border: none; color: var(--ef-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 8px 0; }
.bcs-lead-cancel-btn:hover { color: var(--ef-primary); }

.bcs-freq-toggle { display: inline-flex; border: 1px solid var(--ef-border); border-radius: 8px; overflow: hidden; }
.bcs-freq-btn { border: none; background: var(--ef-bg); color: var(--ef-muted); padding: 8px 14px; font-size: 0.85rem; cursor: pointer; }
.bcs-freq-btn.is-active { background: var(--ef-primary); color: #fff; }


.bcs-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; }
.bcs-table td { padding: 6px 4px; border-bottom: 1px solid var(--ef-border); }
.bcs-table td:last-child { text-align: right; font-weight: 600; }

.bcs-lead-form-wrap { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ef-border); }
.bcs-optional { font-weight: 400; color: var(--ef-muted); }
.bcs-lead-input {
  width: 100%;
  border: 1px solid var(--ef-border);
  border-radius: 8px;
  background: var(--ef-bg);
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--ef-font);
  color: var(--ef-text);
  outline: none;
  box-sizing: border-box;
}
.bcs-lead-input:focus { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }
.bcs-lead-privacy { margin: 10px 0 0; font-size: 0.72rem; line-height: 1.4; color: var(--ef-muted); }
.bcs-lead-success {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--ef-bg);
  border: 1px solid var(--ef-positive, #37A96B);
  color: var(--ef-text);
  font-size: 0.9rem;
}

.bcs-disclaimer { margin-top: 20px; font-size: 0.75rem; line-height: 1.5; color: var(--ef-muted); border-top: 1px solid var(--ef-border); padding-top: 14px; }
.bcs-logo { display: block; height: 18px; width: auto; max-width: 120px; margin: 14px 0 0 auto; opacity: 0.85; }

/* --- Print / PDF output ---
   Builds a clean, combined report (About you / Income / Expenses / result /
   loan details / results / disclaimer) instead of printing whichever single
   tab happens to be on screen. Hidden on-screen; shown only for print. */
.bcs-print-only { display: none; }
@media print {
  #bcs-widget .bcs-card > *:not(.bcs-print-only) { display: none !important; }
  #bcs-widget .bcs-card { border: none; box-shadow: none; padding: 0; max-width: none; }
  #bcs-widget .bcs-print-only { display: block !important; max-width: 700px; margin: 0 auto; }
  .bcs-print-logo { display: block; height: 26px; width: auto; margin-bottom: 6px; }
  .bcs-print-only h2 { font-size: 1.25rem; margin: 18px 0 8px; page-break-after: avoid; }
  .bcs-print-only h2:first-of-type { margin-top: 0; }
  .bcs-print-only h3 { font-size: 1rem; margin: 12px 0 6px; page-break-after: avoid; }
  .bcs-print-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; font-size: 0.85rem; }
  .bcs-print-table th, .bcs-print-table td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; vertical-align: top; }
  .bcs-print-table th { background: #f4f4f4; width: 36%; }
  .bcs-print-table tr { page-break-inside: avoid; }
  .bcs-print-banner { text-align: center; font-size: 1.1rem; margin: 22px 0; page-break-inside: avoid; }
  .bcs-print-banner strong { font-size: 1.7rem; display: block; margin-top: 4px; }
  .bcs-print-meta { font-size: 0.75rem; color: #666; margin-bottom: 16px; }
  .bcs-print-disclaimer { font-size: 0.72rem; line-height: 1.5; color: #555; margin-top: 22px; border-top: 1px solid #ccc; padding-top: 10px; page-break-inside: avoid; }
  .bcs-print-contact { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 0.8rem; color: #333; page-break-inside: avoid; }
  .bcs-print-contact h3 { font-size: 0.95rem; margin: 0 0 6px; }
  .bcs-print-contact p { margin: 2px 0; }
}

/* ==========================================================================
   Mortgage Repayment (mrc)
   ========================================================================== */

#mrc-widget {
  --ef-primary: #5E2A50;
  --ef-primary-dark: #47203D;
  --ef-bg: #ffffff;
  --ef-surface: #F6F1F7;
  --ef-border: #E7DEE8;
  --ef-text: #2C1A2A;
  --ef-muted: #6E6478;
  --ef-warn-bg: #FDEFE0;
  --ef-warn-border: #ED8B2E;
  --ef-warn-text: #8A4B12;
  --mrc-principal: #5E2A50;
  --mrc-interest: #ED8B2E;
  --ef-positive: #37A96B;
  --ef-focus: rgba(94,42,80,0.28);
  --ef-radius: 16px;
  --ef-shadow: 0 4px 16px rgba(44,26,42,0.08);
  --ef-font-heading: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ef-font: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-family: var(--ef-font);
  color: var(--ef-text);
  line-height: 1.4;
  container-type: inline-size;
  container-name: mrc;
}
#mrc-widget *, #mrc-widget *::before, #mrc-widget *::after { box-sizing: border-box; }

.mrc-title { font-size: 1.4rem; margin: 0 0 4px; }
#mrc-widget h2, #mrc-widget .mrc-title { font-family: var(--ef-font-heading); font-weight: 600; }
.mrc-subtitle { margin: 0 0 18px; color: var(--ef-muted); font-size: 0.95rem; }

.mrc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 8px; }
.mrc-field--wide { grid-column: 1 / -1; }
.mrc-field label { display: block; font-family: var(--ef-font-heading); font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--ef-text); }

.mrc-input-prefix, .mrc-input-suffix { display: flex; align-items: center; border: 1px solid var(--ef-border); border-radius: 8px; background: var(--ef-surface); overflow: hidden; }
.mrc-input-prefix span, .mrc-input-suffix span { padding: 0 10px; color: var(--ef-muted); font-size: 0.9rem; user-select: none; white-space: nowrap; }
.mrc-input-prefix input, .mrc-input-suffix input { flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 8px; font-size: 16px; color: var(--ef-text); outline: none; }
.mrc-input-prefix:focus-within, .mrc-input-suffix:focus-within { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }
#mrc-widget input[type=number]::-webkit-outer-spin-button, #mrc-widget input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#mrc-widget input[type=number] { -moz-appearance: textfield; }

.mrc-toggle { display: flex; border: 1px solid var(--ef-border); border-radius: 999px; background: var(--ef-surface); padding: 3px; gap: 3px; }
.mrc-toggle-btn { flex: 1; min-height: 40px; border: none; background: transparent; color: var(--ef-muted); border-radius: 999px; padding: 8px 8px; font-size: 0.85rem; font-weight: 600; font-family: var(--ef-font); cursor: pointer; }
.mrc-toggle-btn:not(.is-active):hover { color: var(--ef-text); }
.mrc-toggle-btn.is-active { background: var(--ef-primary); color: #fff; }


.mrc-results { border-radius: var(--ef-radius); }
.mrc-results.mrc-pulse { animation: ef-pulse 700ms ease-out; }
.mrc-result-banner { display: flex; flex-direction: column; align-items: center; background: var(--ef-primary); color: #fff; text-align: center; font-size: 1rem; padding: 18px 16px; border-radius: 12px; margin: 18px 0 16px; }
.mrc-result-banner strong { display: block; font-family: var(--ef-font-heading); font-size: clamp(1.6rem, 9cqi, 2.1rem); font-variant-numeric: tabular-nums; margin-top: 2px; }
.mrc-banner-note { font-size: 0.78rem; opacity: 0.85; margin-top: 4px; min-height: 1em; }

.mrc-bar { display: flex; width: 100%; height: 20px; border-radius: 6px; overflow: hidden; background: var(--ef-surface); border: 1px solid var(--ef-border); }
.mrc-bar-seg { height: 100%; transition: width 0.2s ease; }
.mrc-bar-principal { background: var(--mrc-principal); }
.mrc-bar-interest { background: var(--mrc-interest); }
.mrc-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0 4px; font-size: 0.8rem; color: var(--ef-muted); }
.mrc-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mrc-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.mrc-sw-principal { background: var(--mrc-principal); }
.mrc-sw-interest { background: var(--mrc-interest); }

.mrc-result-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 16px 0 12px; }
.mrc-result-cell { background: var(--ef-surface); border: 1px solid var(--ef-border); border-radius: 12px; padding: 14px; }
.mrc-result-label { display: block; font-size: 0.8rem; color: var(--ef-muted); }
.mrc-result-value { display: block; font-family: var(--ef-font-heading); font-size: clamp(1.25rem, 6cqi, 1.5rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ef-primary); margin: 2px 0; }
.mrc-result-note { display: block; font-size: 0.78rem; color: var(--ef-muted); }

.mrc-link-btn { display: inline-flex; align-items: flex-start; text-align: left; gap: 4px; background: none; border: none; color: var(--ef-primary); font-weight: 600; font-size: 0.9rem; line-height: 1.3; font-family: var(--ef-font); cursor: pointer; padding: 10px 0 4px; }
.mrc-chevron { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 1.3em; flex-shrink: 0; transition: transform 0.15s ease; }
.mrc-chevron svg { width: 14px; height: 14px; display: block; }
.mrc-link-btn[aria-expanded="true"] .mrc-chevron { transform: rotate(90deg); }
.mrc-advanced-panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ef-border); }

.mrc-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; font-variant-numeric: tabular-nums; }
.mrc-table td { padding: 7px 4px; border-bottom: 1px solid var(--ef-border); }
.mrc-table td:last-child { text-align: right; font-weight: 600; }
.mrc-table tr.mrc-row-total td { border-top: 1px solid var(--ef-border); border-bottom: none; font-weight: 700; }
.mrc-table tr.mrc-row-good td { color: var(--ef-positive); }

.mrc-utility-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.mrc-utility-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: none; color: var(--ef-muted); font-size: 0.82rem; font-family: var(--ef-font); cursor: pointer; padding: 0; }
.mrc-utility-btn:hover { color: var(--ef-primary); }
.mrc-inline-lead { display: flex; align-items: center; gap: 12px; }
.mrc-inline-lead-title { display: none; }
.mrc-btn-compact { padding: 8px 16px; font-size: 0.85rem; }
.mrc-hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--ef-muted); }

.mrc-lead-form-wrap { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ef-border); }
.mrc-lead-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mrc-lead-cancel-btn { background: none; border: none; color: var(--ef-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 8px 0; font-family: var(--ef-font); }
.mrc-lead-cancel-btn:hover { color: var(--ef-primary); }
.mrc-optional { font-weight: 400; color: var(--ef-muted); }
.mrc-lead-input {
  width: 100%;
  border: 1px solid var(--ef-border);
  border-radius: 8px;
  background: var(--ef-bg);
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--ef-font);
  color: var(--ef-text);
  outline: none;
  box-sizing: border-box;
}
.mrc-lead-input:focus { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }
.mrc-btn-primary {
  display: inline-block;
  background: var(--ef-primary);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.mrc-btn-primary:hover { background: var(--ef-primary-dark); }
.mrc-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.mrc-btn-primary[hidden] { display: none; }
.mrc-lead-form-wrap .mrc-btn-primary { margin-top: 4px; }
.mrc-lead-privacy { margin: 10px 0 0; font-size: 0.72rem; line-height: 1.4; color: var(--ef-muted); }
.mrc-lead-success {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--ef-bg);
  border: 1px solid var(--ef-positive);
  color: var(--ef-text);
  font-size: 0.9rem;
}

.mrc-disclaimer { margin-top: 20px; font-size: 0.75rem; line-height: 1.5; color: var(--ef-muted); border-top: 1px solid var(--ef-border); padding-top: 14px; }
.mrc-logo { display: block; height: 18px; width: auto; max-width: 120px; margin: 14px 0 0 auto; opacity: 0.85; }

@container mrc (min-width: 620px) {
  .mrc-card { padding: 24px; }
  .mrc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mrc-result-detail { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 620px) {
    .mrc-card { padding: 24px; }
    .mrc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .mrc-result-detail { grid-template-columns: repeat(3, minmax(0,1fr)); }
  }
}

.mrc-print-only { display: none; }
@media print {
  #mrc-widget .mrc-card > *:not(.mrc-print-only) { display: none !important; }
  #mrc-widget .mrc-card { border: none; box-shadow: none; padding: 0; max-width: none; }
  #mrc-widget .mrc-print-only { display: block !important; max-width: 700px; margin: 0 auto; }
  .mrc-print-only h2 { font-size: 1.25rem; margin: 14px 0 8px; page-break-after: avoid; }
  .mrc-print-only h3 { font-size: 1rem; margin: 18px 0 8px; page-break-after: avoid; }
  .mrc-print-logo { display: block; height: 26px; width: auto; margin-bottom: 6px; }
  .mrc-print-meta { font-size: 0.75rem; color: #666; margin-bottom: 4px; }
  .mrc-print-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; font-size: 0.85rem; }
  .mrc-print-table th, .mrc-print-table td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
  .mrc-print-table th, .mrc-print-table td:first-child { background: #f4f4f4; font-weight: 600; width: 60%; }
  .mrc-print-table tr { page-break-inside: avoid; }
  .mrc-print-disclaimer { font-size: 0.72rem; line-height: 1.5; color: #555; margin-top: 18px; border-top: 1px solid #ccc; padding-top: 10px; page-break-inside: avoid; }
  .mrc-print-contact { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 0.8rem; color: #333; page-break-inside: avoid; }
  .mrc-print-contact h3 { font-size: 0.95rem; margin: 0 0 6px; }
  .mrc-print-contact p { margin: 2px 0; }
}

/* ==========================================================================
   Stamp Duty (sdc)
   ========================================================================== */

#sdc-widget {
  --ef-primary: #5E2A50;
  --ef-primary-dark: #47203D;
  --ef-bg: #ffffff;
  --ef-surface: #F6F1F7;
  --ef-border: #E7DEE8;
  --ef-text: #2C1A2A;
  --ef-muted: #6E6478;
  --ef-warn-bg: #FDEFE0;
  --ef-warn-border: #ED8B2E;
  --ef-warn-text: #8A4B12;
  --sdc-duty: #5E2A50;
  --sdc-surcharge: #ED8B2E;
  --sdc-fees: #9B8FA3;
  --ef-positive: #37A96B;
  --ef-focus: rgba(94,42,80,0.28);
  --ef-radius: 16px;
  --ef-shadow: 0 4px 16px rgba(44,26,42,0.08);
  --ef-font-heading: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --ef-font: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-family: var(--ef-font);
  color: var(--ef-text);
  line-height: 1.4;
  container-type: inline-size;
  container-name: sdc;
}
#sdc-widget *, #sdc-widget *::before, #sdc-widget *::after { box-sizing: border-box; }

.sdc-title { font-size: 1.4rem; margin: 0 0 4px; }
#sdc-widget h2, #sdc-widget .sdc-title { font-family: var(--ef-font-heading); font-weight: 600; }
.sdc-subtitle { margin: 0 0 18px; color: var(--ef-muted); font-size: 0.95rem; }

.sdc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 8px; }
.sdc-field--wide { grid-column: 1 / -1; }
.sdc-field label { display: block; font-family: var(--ef-font-heading); font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--ef-text); }

.sdc-input-prefix { display: flex; align-items: center; border: 1px solid var(--ef-border); border-radius: 8px; background: var(--ef-surface); overflow: hidden; }
.sdc-input-prefix span { padding: 0 10px; color: var(--ef-muted); font-size: 0.9rem; user-select: none; }
.sdc-input-prefix input { flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 8px; font-size: 16px; color: var(--ef-text); outline: none; }
.sdc-input-prefix:focus-within { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }
#sdc-widget input[type=number]::-webkit-outer-spin-button, #sdc-widget input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#sdc-widget input[type=number] { -moz-appearance: textfield; }

.sdc-select { position: relative; }
.sdc-select::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ef-primary); border-bottom: 2px solid var(--ef-primary); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.sdc-select select { width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--ef-border); border-radius: 8px; background: var(--ef-surface); padding: 12px 32px 12px 12px; font-size: 16px; font-family: var(--ef-font); color: var(--ef-text); outline: none; }
.sdc-select select:focus { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }

.sdc-toggle { display: flex; border: 1px solid var(--ef-border); border-radius: 999px; background: var(--ef-surface); padding: 3px; gap: 3px; }
.sdc-toggle-btn { flex: 1; min-height: 40px; border: none; background: transparent; color: var(--ef-muted); border-radius: 999px; padding: 8px 8px; font-size: 0.85rem; font-weight: 600; font-family: var(--ef-font); cursor: pointer; }
.sdc-toggle-btn:not(.is-active):hover { color: var(--ef-text); }
.sdc-toggle-btn.is-active { background: var(--ef-primary); color: #fff; }


.sdc-results { border-radius: var(--ef-radius); }
.sdc-results.sdc-pulse { animation: ef-pulse 700ms ease-out; }
.sdc-result-banner { display: flex; flex-direction: column; align-items: center; background: var(--ef-primary); color: #fff; text-align: center; font-size: 1rem; padding: 18px 16px; border-radius: 12px; margin: 18px 0 16px; }
.sdc-result-banner strong { display: block; font-family: var(--ef-font-heading); font-size: clamp(1.6rem, 9cqi, 2.1rem); font-variant-numeric: tabular-nums; margin-top: 2px; }
.sdc-banner-note { font-size: 0.78rem; opacity: 0.85; margin-top: 4px; min-height: 1em; }

.sdc-bar { display: flex; width: 100%; height: 20px; border-radius: 6px; overflow: hidden; background: var(--ef-surface); border: 1px solid var(--ef-border); }
.sdc-bar-seg { height: 100%; transition: width 0.2s ease; }
.sdc-bar-duty { background: var(--sdc-duty); }
.sdc-bar-surcharge { background: var(--sdc-surcharge); }
.sdc-bar-fees { background: var(--sdc-fees); }
.sdc-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0 4px; font-size: 0.8rem; color: var(--ef-muted); }
.sdc-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.sdc-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sdc-sw-duty { background: var(--sdc-duty); }
.sdc-sw-surcharge { background: var(--sdc-surcharge); }
.sdc-sw-fees { background: var(--sdc-fees); }

.sdc-result-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 16px 0 12px; }
.sdc-result-cell { background: var(--ef-surface); border: 1px solid var(--ef-border); border-radius: 12px; padding: 14px; }
.sdc-result-label { display: block; font-size: 0.8rem; color: var(--ef-muted); }
.sdc-result-value { display: block; font-family: var(--ef-font-heading); font-size: clamp(1.25rem, 6cqi, 1.5rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ef-primary); margin: 2px 0; }
.sdc-result-note { display: block; font-size: 0.78rem; color: var(--ef-muted); }

.sdc-link-btn { display: inline-flex; align-items: flex-start; text-align: left; gap: 4px; background: none; border: none; color: var(--ef-primary); font-weight: 600; font-size: 0.9rem; line-height: 1.3; font-family: var(--ef-font); cursor: pointer; padding: 10px 0 4px; }
.sdc-chevron { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 1.3em; flex-shrink: 0; transition: transform 0.15s ease; }
.sdc-chevron svg { width: 14px; height: 14px; display: block; }
.sdc-link-btn[aria-expanded="true"] .sdc-chevron { transform: rotate(90deg); }
.sdc-advanced-panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ef-border); }

.sdc-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 8px; font-variant-numeric: tabular-nums; }
.sdc-table td { padding: 7px 4px; border-bottom: 1px solid var(--ef-border); }
.sdc-table td:last-child { text-align: right; font-weight: 600; }
.sdc-table tr.sdc-row-total td { border-top: 1px solid var(--ef-border); border-bottom: none; font-weight: 700; }
.sdc-table tr.sdc-row-credit td { color: var(--ef-positive); }

.sdc-utility-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.sdc-utility-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: none; border: none; color: var(--ef-muted); font-size: 0.82rem; font-family: var(--ef-font); cursor: pointer; padding: 0; }
.sdc-utility-btn:hover { color: var(--ef-primary); }
.sdc-inline-lead { display: flex; align-items: center; gap: 12px; }
.sdc-inline-lead-title { display: none; }
.sdc-btn-compact { padding: 8px 16px; font-size: 0.85rem; }
.sdc-hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--ef-muted); }

.sdc-lead-form-wrap { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ef-border); }
.sdc-lead-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sdc-lead-cancel-btn { background: none; border: none; color: var(--ef-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 8px 0; font-family: var(--ef-font); }
.sdc-lead-cancel-btn:hover { color: var(--ef-primary); }
.sdc-optional { font-weight: 400; color: var(--ef-muted); }
.sdc-lead-input {
  width: 100%;
  border: 1px solid var(--ef-border);
  border-radius: 8px;
  background: var(--ef-bg);
  padding: 10px 12px;
  font-size: 16px;
  font-family: var(--ef-font);
  color: var(--ef-text);
  outline: none;
  box-sizing: border-box;
}
.sdc-lead-input:focus { border-color: var(--ef-primary); box-shadow: 0 0 0 3px var(--ef-focus); }
.sdc-btn-primary {
  display: inline-block;
  background: var(--ef-primary);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.sdc-btn-primary:hover { background: var(--ef-primary-dark); }
.sdc-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.sdc-btn-primary[hidden] { display: none; }
.sdc-lead-form-wrap .sdc-btn-primary { margin-top: 4px; }
.sdc-lead-privacy { margin: 10px 0 0; font-size: 0.72rem; line-height: 1.4; color: var(--ef-muted); }
.sdc-lead-success {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--ef-bg);
  border: 1px solid var(--ef-positive);
  color: var(--ef-text);
  font-size: 0.9rem;
}

.sdc-disclaimer { margin-top: 20px; font-size: 0.75rem; line-height: 1.5; color: var(--ef-muted); border-top: 1px solid var(--ef-border); padding-top: 14px; }
.sdc-logo { display: block; height: 18px; width: auto; max-width: 120px; margin: 14px 0 0 auto; opacity: 0.85; }

@container sdc (min-width: 620px) {
  .sdc-card { padding: 24px; }
  .sdc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sdc-result-detail { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 620px) {
    .sdc-card { padding: 24px; }
    .sdc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sdc-result-detail { grid-template-columns: repeat(3, minmax(0,1fr)); }
  }
}

.sdc-print-only { display: none; }
@media print {
  #sdc-widget .sdc-card > *:not(.sdc-print-only) { display: none !important; }
  #sdc-widget .sdc-card { border: none; box-shadow: none; padding: 0; max-width: none; }
  #sdc-widget .sdc-print-only { display: block !important; max-width: 700px; margin: 0 auto; }
  .sdc-print-only h2 { font-size: 1.25rem; margin: 14px 0 8px; page-break-after: avoid; }
  .sdc-print-only h3 { font-size: 1rem; margin: 18px 0 8px; page-break-after: avoid; }
  .sdc-print-logo { display: block; height: 26px; width: auto; margin-bottom: 6px; }
  .sdc-print-meta { font-size: 0.75rem; color: #666; margin-bottom: 4px; }
  .sdc-print-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; font-size: 0.85rem; }
  .sdc-print-table th, .sdc-print-table td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
  .sdc-print-table th { background: #f4f4f4; width: 60%; }
  .sdc-print-table tr { page-break-inside: avoid; }
  .sdc-print-disclaimer { font-size: 0.72rem; line-height: 1.5; color: #555; margin-top: 18px; border-top: 1px solid #ccc; padding-top: 10px; page-break-inside: avoid; }
  .sdc-print-contact { margin-top: 14px; padding-top: 12px; border-top: 1px solid #ccc; font-size: 0.8rem; color: #333; page-break-inside: avoid; }
  .sdc-print-contact h3 { font-size: 0.95rem; margin: 0 0 6px; }
  .sdc-print-contact p { margin: 2px 0; }
}

/* ==========================================================================
   Shared: "results updated" pulse. One keyframe, referenced by every
   .{prefix}-pulse rule. Disabled for reduced-motion users below.
   ========================================================================== */
@keyframes ef-pulse {
  0%   { box-shadow: 0 0 0 3px rgba(94,42,80,0.5); }
  100% { box-shadow: 0 0 0 16px rgba(94,42,80,0); }
}
@media (prefers-reduced-motion: reduce) {
  .rvb-results.rvb-pulse,
  .sec-results.sec-pulse,
  .yie-results.yie-pulse,
  .bcs-result-banner.bcs-pulse,
  .mrc-results.mrc-pulse,
  .sdc-results.sdc-pulse { animation: none; }
}