/* MVPF — Loan Comparison Table
   Kit armor first: the Elementor kit styles bare `table/th/td` (borders,
   backgrounds, margins), which otherwise fights every control in this widget.
   Everything visual is pinned inside .mvpf-lct so the widget's own controls win. */

.mvpf-lct {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

.mvpf-lct table,
.mvpf-lct thead,
.mvpf-lct tbody,
.mvpf-lct tr,
.mvpf-lct th,
.mvpf-lct td {
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent;
  font-family: inherit !important;
  text-transform: none;
  letter-spacing: normal;
}

.mvpf-lct table {
  width: 100% !important;
  /* separate, NOT collapse. Under `border-collapse: collapse` the spec says
     border-radius on cells has no effect, so the header's Top Corner Radius
     control was being written to the page and silently ignored — the corners
     stayed square and the wrapper's background showed through behind them.
     Cells here only ever set border-bottom, so separate with zero spacing
     renders identically: nothing doubles up. */
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  font-size: 15px;
  line-height: 1.45;
}

/* A rounded top with square bottom corners shows the same background sliver at
   the foot of the table that the header had. The last row carries the matching
   radius, and loses its rule, so the whole thing reads as one card. */
.mvpf-lct tbody tr:last-child > th,
.mvpf-lct tbody tr:last-child > td { border-bottom: 0 !important; }

.mvpf-lct thead th {
  text-align: left !important;
  vertical-align: middle !important;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
}

.mvpf-lct tbody th {
  text-align: left !important;
  vertical-align: top !important;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  border-bottom: 1px solid #e2e6ee !important;
}
/* Kit armor: the Elementor kit applies the global Accent font to every
   `a:hover` (family + size + weight), which would resize the program name on
   hover. Pin the type on both states so hover only changes colour. */
.mvpf-lct tbody th a,
.mvpf-lct tbody th a:hover {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
}
.mvpf-lct tbody th a:hover { opacity: .75; }

.mvpf-lct tbody td {
  vertical-align: top !important;
  font-size: 15px;
  font-weight: 400;
  border-bottom: 1px solid #e2e6ee !important;
}

.mvpf-lct td > span { display: inline; }

/* ── stacked cards on narrow screens (Stack control adds .is-stack) ────── */
@media (max-width: 760px) {
  .mvpf-lct.is-stack { overflow-x: visible; }
  .mvpf-lct.is-stack table { min-width: 0 !important; display: block !important; }
  .mvpf-lct.is-stack thead { display: none !important; }
  .mvpf-lct.is-stack tbody { display: block !important; }
  .mvpf-lct.is-stack tbody tr {
    display: block !important;
    margin: 0 0 16px !important;
    border: 1px solid #e2e6ee !important;
    border-radius: 10px !important;   /* nested element (stacked card) */
    overflow: hidden;
    background: #fff;
  }
  .mvpf-lct.is-stack.is-zebra tbody tr:nth-child(even) th,
  .mvpf-lct.is-stack.is-zebra tbody tr:nth-child(even) td { background: transparent !important; }
  .mvpf-lct.is-stack tbody th {
    display: block !important;
    white-space: normal;
    border-bottom: 0 !important;
    background: #002738 !important;
    color: #fff !important;
  }
  .mvpf-lct.is-stack tbody th a { color: inherit; }
  .mvpf-lct.is-stack tbody td {
    display: flex !important;
    justify-content: space-between;
    gap: 16px;
  }
  .mvpf-lct.is-stack tbody tr td:last-child { border-bottom: 0 !important; }
  .mvpf-lct.is-stack tbody td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #002738;
  }
  .mvpf-lct.is-stack tbody td > span { text-align: right; }
}