/* ===================================================
   LOANS PAGE STYLES
   =================================================== */

/* Loan Type Cards */
.loan-type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap:1.25rem; margin-bottom:1.75rem; }
.loan-type-card {
  background: var(--bg-card); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 1.5rem; cursor: pointer;
  transition: all var(--transition-base); text-align: center;
  position: relative; overflow: hidden;
}
.loan-type-card:hover { border-color: var(--border-glow); transform: translateY(-3px); box-shadow: var(--shadow-glow); }
.loan-type-card.active { border-color: var(--accent-gold); background: rgba(255,184,0,0.04); box-shadow: 0 0 30px rgba(255,184,0,0.12); }
.loan-type-card.active::before { content:'✓'; position:absolute; top:0.75rem; right:0.875rem; color:var(--accent-gold); font-weight:800; font-size:0.85rem; }
.loan-type-icon { font-size:2rem; margin-bottom:0.75rem; }
.loan-type-name { font-family:var(--font-display); font-weight:700; font-size:1rem; margin-bottom:0.25rem; }
.loan-type-desc { font-size:0.75rem; color:var(--text-muted); margin-bottom:0.5rem; }
.loan-type-rate { font-size:0.85rem; color:var(--text-secondary); }

/* Loans Grid */
.loans-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.25rem; }
.loans-right-panel { display:flex; flex-direction:column; gap:1.25rem; }

/* Loan Slider */
.loan-slider-wrap { margin: 0.25rem 0 0.5rem; }
.loan-slider {
  width: 100%; appearance: none; -webkit-appearance: none;
  height: 6px; background: linear-gradient(to right, var(--accent-cyan), var(--accent-blue));
  border-radius: 3px; outline: none; cursor: pointer;
}
.loan-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(15,122,77,0.3), 0 2px 8px rgba(0,0,0,0.4);
  cursor: pointer; transition: all var(--transition-fast);
}
.loan-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* Loan Summary Box */
.loan-summary-box {
  background: rgba(15,122,77,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.loan-summary-row { display: flex; justify-content: space-between; align-items: center; }

/* Repayment Buttons */
.repay-btn {
  padding: 0.5rem 1rem; border-radius: var(--radius-full);
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--border-subtle); background: transparent;
  color: var(--text-secondary); transition: all var(--transition-fast);
}
.repay-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.repay-btn.active { border-color: var(--accent-cyan); background: rgba(15,122,77,0.1); color: var(--accent-cyan); }

/* AI Credit Card */
.ai-credit-body { display:flex; align-items:center; justify-content:center; margin:1rem 0; position:relative; width:fit-content; margin-left:auto; margin-right:auto; }
.credit-ring-label { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.credit-score-num   { font-family:var(--font-display); font-size:1.75rem; font-weight:800; }
.credit-score-grade { font-size:0.7rem; color:var(--accent-green); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }

.credit-factors { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1rem; }
.credit-factor-row { display:flex; align-items:center; gap:0.75rem; }
.cf-label { font-size:0.75rem; color:var(--text-secondary); min-width:110px; }
.cf-bar   { flex:1; height:5px; background:rgba(15,122,77,0.08); border-radius:3px; overflow:hidden; }
.cf-fill  { height:100%; border-radius:3px; background:var(--grad-primary); transition:width 0.8s ease; }
.cf-val   { font-size:0.72rem; font-weight:700; min-width:28px; text-align:right; }

.credit-verdict {
  display:flex; align-items:center; gap:0.875rem;
  background:rgba(0,230,118,0.06); border:1px solid rgba(0,230,118,0.2);
  border-radius:var(--radius-md); padding:0.875rem;
}
.verdict-icon { font-size:1.25rem; }

/* Active Loan Item */
.active-loan-item {
  padding: 1rem; background: rgba(15,122,77,0.04);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
}
.active-loan-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem; }
.active-loan-type { font-weight:700; font-size:0.875rem; }
.active-loan-amount { font-family:var(--font-display); font-weight:700; color:var(--accent-cyan); }

/* Loan Application Form */
.loan-application-form { display:flex; flex-direction:column; gap:1rem; }

/* Success Modal */
.loan-ref-box {
  background: rgba(15,122,77,0.06); border:1px solid var(--border-glow);
  border-radius: var(--radius-md); padding:1rem;
}
.mt-xl { margin-top:2rem; }
.mt-md { margin-top:1rem; }

/* Checkbox */
.checkbox { accent-color:var(--accent-cyan); width:16px; height:16px; min-width:16px; cursor:pointer; }

/* Spinner */
.spinner { width:18px; height:18px; border:2px solid rgba(0,0,0,0.3); border-top-color:#000; border-radius:50%; animation:spin 0.7s linear infinite; display:inline-block; }
.hidden { display:none !important; }

@media (max-width:1100px) {
  .loans-grid { grid-template-columns:1fr; }
  .loan-type-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .loan-type-grid { grid-template-columns:1fr; }
}