/**
 * calculatemydebt.com - Calculator widget styles
 * Scoped under .dc-widget so it won't leak into or clash with the host
 * WordPress theme. All colors/type go through custom properties so a
 * future theme pass only touches this one token block.
 */

.dc-widget {
  /* ---- Design tokens, pulled from the new logo (coral/rust/teal/yellow) ---- */
  --dc-bg: #faf6f1;           /* warm cream paper, pairs with the coral/rust/yellow logo */
  --dc-surface: #ffffff;
  --dc-ink: #2e2420;          /* warm dark neutral, primary text (not the accent rust, kept distinct) */
  --dc-ink-soft: #6b5d55;     /* secondary text, warm gray-brown */
  --dc-line: #ece3d8;         /* hairline borders, warm neutral */
  --dc-accent: #e34f45;       /* exact logo coral: decorative use only (chart line, borders, soft tints), fails AA with white text at small sizes so never a solid button/badge fill */
  --dc-accent-soft: #fbe4e1;
  --dc-accent-ink: #c1440e;   /* exact logo rust: the PRIMARY interactive color (buttons, links, badges), passes AA (5.1:1) with white text */
  --dc-accent-teal: #5dd3ba;  /* exact logo mint: decorative use only (chart line, swatches), same contrast problem as coral */
  --dc-accent-teal-dark: #377e6f; /* darkened teal, passes AA (4.8:1) with white text, used for badges/buttons that need a teal identity */
  --dc-accent-teal-soft: #e1f7f1;
  --dc-accent-yellow: #fcd56c; /* exact logo yellow: use with dark ink text (10.7:1), never white text */
  --dc-warn: #b3261e;         /* clear danger red, kept distinct from the rust accent so warnings don't read as "just another brand color" */
  --dc-warn-soft: #fbeae4;
  --dc-radius: 10px;
  --dc-shadow: 0 2px 8px rgba(46, 36, 32, 0.07), 0 1px 2px rgba(46, 36, 32, 0.05);
  --dc-shadow-hover: 0 8px 20px rgba(227, 79, 69, 0.14), 0 2px 6px rgba(46, 36, 32, 0.06);
  --dc-font-display: 'IBM Plex Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --dc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--dc-font-body);
  color: var(--dc-ink);
  background: var(--dc-bg);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-radius);
  padding: 28px;
  max-width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;
}
.dc-widget *,
.dc-widget *::before,
.dc-widget *::after {
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .dc-widget {
    padding: 18px;
  }
}

/* ---- Header ---- */
.dc-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--dc-line);
}
.dc-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.dc-subtitle {
  font-size: 14px;
  color: var(--dc-ink-soft);
  margin: 0;
}
.dc-currency-select {
  font-family: var(--dc-font-body);
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--dc-line);
  border-radius: 6px;
  background: var(--dc-surface);
  color: var(--dc-ink);
}
.dc-currency-select:focus-visible {
  outline: 2px solid var(--dc-accent);
  outline-offset: 1px;
}

/* ---- Layout ---- */
.dc-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: start;
  min-width: 0;
}
.dc-body > * {
  min-width: 0;
}
@media (max-width: 720px) {
  .dc-body {
    grid-template-columns: 1fr;
  }
}

/* ---- Debt rows ---- */
.dc-debt-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.dc-debt-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
  box-shadow: var(--dc-shadow);
  transition: box-shadow 0.2s ease;
}
.dc-debt-row:focus-within {
  box-shadow: var(--dc-shadow-hover);
}
@media (max-width: 560px) {
  .dc-debt-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'name name'
      'balance apr'
      'min remove';
  }
  .dc-debt-row .dc-field-name { grid-area: name; }
  .dc-debt-row .dc-field-balance { grid-area: balance; }
  .dc-debt-row .dc-field-apr { grid-area: apr; }
  .dc-debt-row .dc-field-min { grid-area: min; }
  .dc-debt-row .dc-remove-btn { grid-area: remove; justify-self: end; }
}
.dc-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dc-field label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dc-ink-soft);
}
.dc-field input {
  font-family: var(--dc-font-display);
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--dc-line);
  border-radius: 5px;
  width: 100%;
  background: var(--dc-bg);
  color: var(--dc-ink);
}
.dc-field input[type='text'] {
  font-family: var(--dc-font-body);
}
.dc-field input:focus-visible {
  outline: 2px solid var(--dc-accent);
  outline-offset: 1px;
}
.dc-remove-btn {
  background: none;
  border: 1px solid var(--dc-line);
  color: var(--dc-ink-soft);
  border-radius: 5px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.dc-remove-btn:hover {
  border-color: var(--dc-warn);
  color: var(--dc-warn);
}
.dc-add-btn {
  align-self: flex-start;
  background: var(--dc-surface);
  border: 1px dashed var(--dc-line);
  color: var(--dc-accent-ink);
  font-family: var(--dc-font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.dc-add-btn:hover {
  border-color: var(--dc-accent);
  background: var(--dc-accent-soft);
}
.dc-add-btn:active {
  transform: scale(0.97);
}

/* ---- Strategy toggle ---- */
.dc-strategy-toggle {
  display: inline-flex;
  border: 1px solid var(--dc-line);
  border-radius: 7px;
  overflow: hidden;
  margin: 18px 0 10px;
}
.dc-strategy-btn {
  font-family: var(--dc-font-body);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  background: var(--dc-surface);
  color: var(--dc-ink-soft);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.dc-strategy-btn + .dc-strategy-btn {
  border-left: 1px solid var(--dc-line);
}
.dc-strategy-btn[aria-pressed='true'] {
  background: var(--dc-accent-ink);
  color: #fff;
}
.dc-strategy-explainer {
  font-size: 12px;
  line-height: 1.5;
  color: var(--dc-ink-soft);
  margin: 0 0 8px;
}
.dc-strategy-explainer strong {
  color: var(--dc-ink);
}

/* ---- Extra payment slider ---- */
.dc-extra-payment {
  margin-top: 8px;
}
.dc-extra-payment-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
}
.dc-extra-payment-header strong {
  font-family: var(--dc-font-display);
}
.dc-slider {
  width: 100%;
  accent-color: var(--dc-accent);
}

/* ---- Results panel ---- */
.dc-results {
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: 8px;
  padding: 20px;
  position: sticky;
  top: 16px;
  box-shadow: var(--dc-shadow);
}
.dc-hero-stat {
  margin-bottom: 18px;
}
.dc-hero-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dc-ink-soft);
  margin-bottom: 4px;
}
.dc-hero-value {
  font-family: var(--dc-font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--dc-accent-ink);
  line-height: 1.1;
}
.dc-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--dc-line);
}
.dc-stat-label {
  font-size: 11px;
  color: var(--dc-ink-soft);
  margin-bottom: 2px;
}
.dc-stat-value {
  font-family: var(--dc-font-display);
  font-size: 17px;
  font-weight: 600;
}

/* ---- Payoff chart ---- */
.dc-chart-wrapper {
  position: relative;
  height: 220px;
  margin-bottom: 8px;
}
.dc-chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--dc-ink-soft);
}
.dc-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dc-swatch {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top: 2px solid var(--dc-accent);
}
.dc-swatch-dashed {
  border-top: 2px dashed var(--dc-accent-teal);
}

/* ---- Payoff ladder (signature element) ----
   Rank badges are rounded squares, not circles, echoing the calculator
   icon in the logo. Colors cycle through the icon's own palette (coral,
   teal, rust) rather than repeating a single flat accent tone, so the
   one part of the UI a person studies closely (their payoff order) is also
   the part that most visibly carries the brand mark. Rank-b uses the
   darker teal variant, not the light mint from the swatch/line above,
   since white text on the light mint fails contrast. */
.dc-ladder-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dc-ink-soft);
  margin-bottom: 10px;
}
.dc-ladder-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.dc-ladder-rank {
  font-family: var(--dc-font-display);
  font-size: 12px;
  font-weight: 700;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--dc-accent-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dc-ladder-rank.dc-rank-color-b {
  background: var(--dc-accent-teal-dark);
  color: #fff;
}
.dc-ladder-rank.dc-rank-color-c {
  background: var(--dc-accent-yellow);
  color: var(--dc-ink);
}
.dc-ladder-body {
  flex: 1;
  min-width: 0;
}
.dc-ladder-name-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
}
.dc-ladder-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-ladder-months {
  font-family: var(--dc-font-display);
  color: var(--dc-ink-soft);
  flex-shrink: 0;
  padding-left: 8px;
}
.dc-ladder-bar-track {
  height: 5px;
  background: var(--dc-bg);
  border-radius: 3px;
  overflow: hidden;
}
.dc-ladder-bar-fill {
  height: 100%;
  background: var(--dc-accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .dc-ladder-bar-fill { transition: none; }
}

/* ---- Warnings ---- */
.dc-warning {
  background: var(--dc-warn-soft);
  border: 1px solid color-mix(in srgb, var(--dc-warn) 30%, transparent);
  border-radius: 7px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.dc-warning strong {
  color: var(--dc-warn);
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
}

/* ---- Print-only debts table: hidden on screen, shown when printing
   (see @media print below), so the printed plan includes what was
   actually entered, not just the results. ---- */
.dc-print-debts,
.dc-print-debts-note,
.dc-print-debts-heading {
  display: none;
}

/* ---- Email capture ---- */
.dc-capture {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--dc-line);
}
.dc-print-btn {
  display: block;
  width: 100%;
  font-family: var(--dc-font-body);
  font-weight: 700;
  font-size: 13px;
  background: var(--dc-accent-ink);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  margin-top: 8px;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.dc-print-btn:hover {
  filter: brightness(0.9);
  box-shadow: var(--dc-shadow-hover);
}
.dc-print-btn:active {
  transform: scale(0.98);
}
.dc-capture-btn {
  display: block;
  width: 100%;
  font-family: var(--dc-font-body);
  font-weight: 700;
  font-size: 13px;
  background: transparent;
  color: var(--dc-accent-ink);
  border: 1px solid var(--dc-line);
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  margin-top: 8px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.dc-capture-btn:hover {
  border-color: var(--dc-accent-ink);
  background: var(--dc-accent-soft);
}
.dc-capture-btn:active {
  transform: scale(0.98);
}
.dc-capture-status {
  font-size: 12px;
  margin-top: 8px;
  min-height: 16px;
  color: var(--dc-accent-ink);
}
.dc-capture-status-error {
  color: var(--dc-warn);
}

/* ---- Lead capture form: off-screen (not display:none) until revealed.
   display:none can prevent Turnstile's iframe from ever initializing,
   since some iframe-based widgets need real layout dimensions to render
   at all, not just to be seen. Off-screen positioning gives it those
   dimensions from page load while staying invisible until needed. ---- */
.cmd-lead-form-offscreen {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 400px;
}
.cmd-lead-form-offscreen.is-visible {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--dc-line);
}
/* Light-touch styling so Fluent Forms' own field markup reads
   consistently with the rest of the widget, without trying to override
   everything Fluent Forms renders internally.
   Uses literal hex values, not var(--dc-*) tokens, on purpose: this form
   is output as a sibling of .dc-widget, not nested inside it (see
   class-shortcode.php render()), and every --dc-* custom property is
   scoped to .dc-widget. A var() reference to an out-of-scope custom
   property doesn't just fail quietly, per spec it makes the whole
   declaration invalid, which silently no-ops even !important rules.
   That's exactly why the submit button was still rendering Fluent
   Forms' own default blue despite an !important override. */
.cmd-lead-form-offscreen.is-visible label {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #6b5d55;
}
.cmd-lead-form-offscreen.is-visible input[type='email'],
.cmd-lead-form-offscreen.is-visible input[type='text'] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid #dde3e0;
  border-radius: 6px;
  width: 100%;
}
.cmd-lead-form-offscreen.is-visible button[type='submit'],
.cmd-lead-form-offscreen.is-visible input[type='submit'],
.cmd-lead-form-offscreen.is-visible .ff-btn,
.cmd-lead-form-offscreen.is-visible .ff-btn-submit,
.cmd-lead-form-offscreen.is-visible button.ff_btn_submit {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  background: #c1440e !important;
  background-color: #c1440e !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  margin-top: 10px !important;
  box-shadow: none !important;
}
.cmd-lead-form-offscreen.is-visible button[type='submit']:hover,
.cmd-lead-form-offscreen.is-visible input[type='submit']:hover,
.cmd-lead-form-offscreen.is-visible .ff-btn:hover,
.cmd-lead-form-offscreen.is-visible .ff-btn-submit:hover,
.cmd-lead-form-offscreen.is-visible button.ff_btn_submit:hover {
  background: #083d2f !important;
  background-color: #083d2f !important;
}

/* ---- Print: only the results panel should print, formatted as a
   clean payoff plan. Inputs, buttons, and the currency selector are
   working UI, not part of the document someone wants to keep. ---- */
@media print {
  .dc-header,
  .dc-inputs,
  .dc-print-btn,
  .dc-capture-btn,
  .dc-capture-status,
  .dc-chart-wrapper,
  .dc-chart-legend {
    display: none !important;
  }
  .dc-widget {
    border: none;
    padding: 0;
    max-width: 100%;
  }
  .dc-body {
    display: block;
  }
  .dc-results {
    border: none;
    padding: 0;
    position: static;
  }
  .dc-capture .dc-stat-label {
    display: none;
  }
  .dc-results::before {
    content: 'Your debt payoff plan';
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
  }
  .dc-print-debts-note,
  .dc-print-debts-heading {
    display: block;
  }
  .dc-print-debts-heading {
    font-size: 13px;
    font-weight: 700;
    margin: 18px 0 6px;
  }
  .dc-print-debts {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 6px;
    font-size: 12px;
  }
  .dc-print-debts caption {
    text-align: left;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .dc-print-debts th,
  .dc-print-debts td {
    text-align: left;
    padding: 5px 8px;
    border-bottom: 1px solid #ddd;
  }
  .dc-print-debts th {
    font-weight: 700;
    border-bottom: 1px solid #999;
  }
  .dc-print-debts-note {
    font-size: 11px;
    color: #555;
    margin-bottom: 4px;
  }
}

/* ---- DTI calculator badge, reuses existing contrast-safe tokens ---- */
.dti-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  background: var(--dc-accent-ink);
  color: #fff;
}
.dti-badge.dc-rank-color-b {
  background: var(--dc-accent-teal-dark);
}
.dti-badge.dc-rank-color-c {
  background: var(--dc-accent-yellow);
  color: var(--dc-ink);
}
.dti-badge.dti-band-high {
  background: var(--dc-warn);
  color: #fff;
}

/* ---- Input card: gives standalone field groups (like the DTI calculator)
   the same grouped, shadowed-card treatment as .dc-debt-row, instead of
   leaving individual fields flat with no depth. ---- */
.dc-input-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: var(--dc-surface);
  border: 1px solid var(--dc-line);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--dc-shadow);
  transition: box-shadow 0.2s ease;
}
.dc-input-card:focus-within {
  box-shadow: var(--dc-shadow-hover);
}
@media (max-width: 560px) {
  .dc-input-card {
    grid-template-columns: 1fr;
  }
}
.dc-field-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dc-ink-soft);
  margin: 4px 0 8px;
}