/* ============================================================
   Loan marketplace
   The prototype's blue chrome is replaced by the app's green;
   flag red and gold appear only where they carry meaning —
   red for the rate (the number you are being charged) and for
   a blocked application, gold for a "popular" flag.
   ============================================================ */

/* A .screen is itself the scroll container, so an absolutely positioned bar
   inside one is pinned to the bottom of the *content*, not the viewport, and
   scrolls away. These screens hand the scrolling to an inner pane instead and
   keep the sticky bars as siblings of it. */
.screen.loan-screen { overflow: hidden; }
/* Only the marketplace opens with the green .loan-header, and only it may sit
   flush against the top of the shell so that header can run up behind the
   status bar. Detail / Apply open with a pale .topbar — pull those up and the
   topbar slides under the status bar instead. */
.loan-scroll-flush { margin-top: calc(-1 * var(--statusbar-h)); }

.loan-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Header ---------- */
.loan-header {
  position: relative;
  flex-shrink: 0;
  padding: 10px 14px 18px;
  padding-top: calc(10px + var(--statusbar-h));
  background: linear-gradient(150deg, var(--brand-green-700) 0%, var(--brand-green-800) 55%, var(--brand-green-900) 100%);
  color: #fff;
  overflow: hidden;
}
.loan-header::after {
  content: '';
  position: absolute;
  right: -60px; top: -70px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}

.loan-header-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.loan-header .back-btn {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
}
.loan-city {
  display: flex; align-items: center; gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.9;
}
.loan-search {
  flex: 1;
  min-width: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.75);
}
.loan-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
}
.loan-search input::placeholder { color: rgba(255,255,255,0.6); }

.loan-filter-btn {
  position: relative;
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
}
.loan-filter-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--brand-yellow);
  color: #3a2c00;
  font-size: 10px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Credit score card ---------- */
.loan-score-card {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.loan-score-left { flex-shrink: 0; }
.loan-score-right { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.loan-score-label {
  font-size: 10.5px;
  letter-spacing: 0.3px;
  opacity: 0.8;
}
.loan-score-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  margin-top: 2px;
}
.loan-score-tier {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--brand-yellow);
  color: #3a2c00;
  font-size: 9.5px;
  font-weight: 800;
}
.loan-score-limit {
  font-size: 15px;
  font-weight: 800;
  margin-top: 3px;
}
.loan-score-bar {
  margin-top: 8px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.22);
  overflow: hidden;
}
.loan-score-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand-yellow), var(--brand-green-400));
}

/* ---------- Body ---------- */
.loan-body {
  flex: 1;
  padding: 14px 16px calc(var(--nav-height) + 20px);
  background: var(--color-page-bg);
}
.chip-sort::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
}
.chip-sort.active::before { opacity: 1; }

.loan-disclaimer {
  margin: 18px 4px 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* ---------- Product card ---------- */
.loan-card {
  position: relative;
  margin-bottom: 12px;
  padding: 14px 15px 12px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border-2);
}
.loan-card.locked { background: #fbfbfa; }

.loan-bookmark {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: none;
  color: var(--color-text-placeholder);
  cursor: pointer;
}
.loan-bookmark.on { color: var(--brand-yellow-deep); }

.loan-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 30px;
}
.loan-org-tile {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.loan-org-info { flex: 1; min-width: 0; }
.loan-org-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loan-org-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loan-rating {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-yellow-deep);
}

.loan-product-name {
  margin-top: 11px;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-main);
}

.loan-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.loan-tag {
  padding: 2.5px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(var(--brand-deep-rgb), 0.08);
  color: var(--brand-green-700);
}
.loan-tag.hot {
  background: rgba(var(--brand-red-rgb), 0.1);
  color: var(--brand-red-dark);
}
.loan-tag.best {
  background: rgba(var(--brand-yellow-rgb), 0.22);
  color: #6b4e00;
}

/* ---------- Metrics strip ---------- */
.loan-metrics {
  display: flex;
  margin-top: 12px;
  padding: 11px 0;
  border-radius: var(--radius-sm);
  background: var(--color-bg-floating);
}
.loan-metric {
  flex: 1;
  text-align: center;
  position: relative;
}
.loan-metric + .loan-metric::before {
  content: '';
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 1px;
  background: var(--color-border-1);
}
.loan-metric-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-main);
}
.loan-metric-value.rate { color: var(--brand-red); }
.loan-metric-label {
  font-size: 10px;
  color: var(--color-text-secondary);
  margin-top: 3px;
}

.loan-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--color-text-general);
}

.loan-locked-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(var(--brand-red-rgb), 0.07);
  color: var(--brand-red-dark);
  font-size: 10.5px;
  line-height: 1.45;
}
.loan-locked-note .icon { flex-shrink: 0; margin-top: 1px; }

.loan-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.loan-card-actions .btn { flex: 1; }
.loan-compare-check {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}
.loan-check-box {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  border: 1.5px solid var(--color-border-1);
  color: #fff;
}
.loan-compare-check.on { color: var(--color-primary); }
.loan-compare-check.on .loan-check-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---------- Floating compare bar ---------- */
.loan-compare-bar {
  position: absolute;
  left: 14px; right: 14px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--brand-green-900);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(var(--brand-deep-rgb), 0.4);
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
  pointer-events: none;
}
.loan-compare-bar.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.loan-compare-bar .btn { flex-shrink: 0; }

/* ---------- Detail ---------- */
.loan-detail-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.loan-detail-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-main);
  line-height: 1.25;
}

.loan-block {
  margin-top: 12px;
  padding: 15px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.loan-block h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.loan-block h4::before {
  content: '';
  width: 3px; height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-green-400), var(--brand-green-800));
}
.loan-block p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-general);
}

.loan-fee-table { width: 100%; border-collapse: collapse; }
.loan-fee-table td {
  padding: 8px 0;
  font-size: 12.5px;
  border-bottom: 1px solid var(--color-border-2);
}
.loan-fee-table tr:last-child td { border-bottom: none; }
.loan-fee-table td:first-child { color: var(--color-text-general); }
.loan-fee-table td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--color-text-main);
}

/* padding-inline-start has a 40px UA default that survives list-style:none */
.loan-check-list { list-style: none; padding-left: 0; margin: 0; }
.loan-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-general);
}
.loan-check-list .icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

.loan-inst-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-text-general);
}
.loan-inst-row .icon { color: var(--color-primary); }

.loan-review-score {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-yellow-deep);
}
.loan-review-quote {
  margin-top: 7px;
  font-style: italic;
  color: var(--color-text-general);
}

/* ---------- Sticky bottom bar ---------- */
.loan-bottom-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border-2);
}
.loan-bottom-bar .btn-outline { flex: 0 0 52px; padding: 0; }

/* ---------- Apply form ---------- */
.loan-amount-input {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border-1);
}
.loan-amount-input > span {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
}
.loan-amount-input input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 26px;
  font-weight: 800;
  color: var(--color-text-main);
}
.loan-amount-input input.error { color: var(--color-danger); }

/* The purpose input sits directly in a .card, outside the .field wrapper that
   normally gives it its width. */
.loan-purpose-input { width: 100%; margin-top: 8px; }

.loan-quote-card {
  margin-top: 12px;
  padding: 15px;
  border-radius: var(--radius-lg);
  color: #fff;
  background: linear-gradient(135deg, var(--brand-green-600), var(--brand-green-800));
  box-shadow: 0 10px 26px rgba(var(--brand-deep-rgb), 0.3);
}
.loan-quote-main {
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.loan-quote-label { font-size: 11px; opacity: 0.85; }
.loan-quote-value { font-size: 25px; font-weight: 800; margin-top: 2px; }
.loan-quote-rows .summary-row { border: none; padding: 4px 0; }
.loan-quote-rows .summary-row .k { color: rgba(255,255,255,0.8); }
.loan-quote-rows .summary-row .v { color: #fff; font-weight: 700; }

/* ---------- Progress steps ---------- */
.loan-steps {
  display: flex;
  align-items: flex-start;
  margin-top: 12px;
}
.loan-step {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 62px;
}
.loan-step-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-border-1);
  color: #fff;
}
.loan-step.done .loan-step-dot { background: var(--color-primary); }
.loan-step.active .loan-step-dot {
  background: #fff;
  border: 4px solid var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-green-rgb), 0.18);
}
.loan-step-label {
  font-size: 9.5px;
  line-height: 1.2;
  text-align: center;
  color: var(--color-text-secondary);
}
.loan-step.active .loan-step-label,
.loan-step.done .loan-step-label {
  color: var(--color-text-main);
  font-weight: 700;
}
.loan-step-line {
  flex: 1;
  height: 2px;
  margin-top: 8px;
  background: var(--color-border-1);
  border-radius: 2px;
}
.loan-step-line.done { background: var(--color-primary); }

/* ---------- My applications ---------- */
.loan-stats {
  display: flex;
  padding: 14px 0;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.loan-stat { flex: 1; text-align: center; position: relative; }
.loan-stat + .loan-stat::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--color-border-2);
}
.loan-stat-num {
  font-size: 21px;
  font-weight: 800;
  color: var(--color-primary);
}
.loan-stat-label {
  font-size: 10.5px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.loan-app-card {
  margin-bottom: 12px;
  padding: 14px 15px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.loan-app-card.settled { opacity: 0.72; }
.loan-app-head { display: flex; align-items: center; gap: 10px; }
.loan-app-product {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loan-status {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
}
.loan-status.pending { background: rgba(var(--brand-yellow-rgb), 0.24); color: #6b4e00; }
.loan-status.ok { background: rgba(18,183,106,0.14); color: #0a7d47; }
.loan-status.done { background: var(--color-bg-floating); color: var(--color-text-secondary); }

.loan-app-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--color-text-general);
}
.loan-app-metrics b { color: var(--color-text-main); }

.loan-repay { margin-top: 12px; }
.loan-repay-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.loan-repay-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border-2);
  overflow: hidden;
}
.loan-repay-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand-green-400), var(--brand-green-700));
}

/* ---------- Sheets ---------- */
.loan-sheet-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-main);
  margin: 4px 40px 14px 0;
}
.loan-compare-scroll { overflow-x: auto; }
.loan-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.loan-compare-table th,
.loan-compare-table td {
  padding: 9px 8px;
  text-align: center;
  border-bottom: 1px solid var(--color-border-2);
}
.loan-compare-table tr:first-child th {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-main);
  background: var(--color-bg-floating);
}
.loan-compare-table th:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.loan-compare-table td.hi {
  font-weight: 800;
  color: var(--brand-green-700);
}
/* The two product columns are sized by their content, so without this the
   narrower column wraps its button label and the pair looks mismatched. */
.loan-compare-table .btn { white-space: nowrap; }

.loan-filter-body { max-height: 46vh; overflow-y: auto; }
.loan-filter-group { margin-bottom: 16px; }
.loan-filter-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 9px;
}
.loan-filter-title span {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-left: 6px;
}
.loan-filter-options { display: flex; flex-wrap: wrap; gap: 8px; }
.loan-filter-opt {
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-floating);
  border: 1px solid transparent;
  font-size: 12px;
  color: var(--color-text-general);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.loan-filter-opt.on {
  background: rgba(var(--brand-green-rgb), 0.1);
  border-color: var(--color-primary);
  color: var(--brand-green-700);
  font-weight: 700;
}
.loan-filter-footer {
  display: flex;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-2);
}
.loan-filter-footer .btn-outline { flex: 0 0 96px; }