
/* ===== Loan Recommender Readability Fix ===== */
#loan-recommender{
  background:#ffffff;
  border-radius:18px;
  box-shadow:0 12px 34px rgba(16,24,40,.08);
  padding:22px 22px 10px;
  color:#0f172a;
}
#loan-recommender .rate-content span{
  display:inline-block;
  color:#1d4ed8;
  background:#eff6ff;
  padding:6px 10px;
  border-radius:10px;
  font-weight:700;
  font-size:.9rem;
  margin-bottom:8px;
}
#loan-recommender .rate-content h3{
  margin:6px 0 12px;
  color:#0a173c;
  font-weight:800;
}
#loan-recommender .form-group label{
  font-weight:800;
  color:#0f172a;
}
/* Inputs inline label */
#loan-recommender .form small{ color:#475569; }

/* Range: thicker & accessible */
#loan-recommender input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;
  height:8px;
  background:#e2e8f0;
  border-radius:999px;
  outline:none;
}
#loan-recommender input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:#2563eb;border:2px solid #fff;
  box-shadow:0 2px 8px rgba(37,99,235,.4);
  cursor:pointer;
}
#loan-recommender input[type="range"]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:#2563eb;border:2px solid #fff;
  box-shadow:0 2px 8px rgba(37,99,235,.4);
  cursor:pointer;
}

/* Number box */
#loan-recommender input[type="number"]{
  background:#f8fafc;border:1px solid #cbd5e1;
  border-radius:12px;
  padding:8px 10px;
  color:#0f172a;
  font-weight:700;
}

/* Recommendation list */
#loan-recommender #recommendations{
  display:grid;gap:12px;
}
#loan-recommender #recommendations li{
  display:flex;align-items:center;gap:12px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 8px 20px rgba(2,17,79,.05);
}
#loan-recommender #recommendations li:hover{
  background:#f8fafc;
}
#loan-recommender #recommendations img{
  width:44px;height:44px;object-fit:contain;
  border-radius:10px;background:#f1f5f9;padding:6px;
}
#loan-recommender #recommendations strong{
  color:#0f172a;font-weight:900;
}
#loan-recommender #recommendations span{
  color:#475569;font-size:.92rem;
}

/* Button spacing */
#loan-recommender .rate-btn{ margin-top:8px;text-align:center }
#loan-recommender .default-btn{ font-weight:800 }

/* Mobile tweaks */
@media (max-width: 575.98px){
  #loan-recommender{ padding:18px 16px 8px }
  #loan-recommender .rate-content h3{ font-size:1.15rem }
  #loan-recommender #recommendations span{ font-size:.9rem }
}
