/* AlphaSalary - Loan Calculator Styles */

.loan-calc-wrapper{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}
.loan-calc-inner{display:grid;grid-template-columns:1.2fr 0.8fr}
.loan-calc-form{padding:35px}
.loan-calc-form h3{font-size:1.3rem;margin-bottom:24px;color:var(--text-dark)}
.loan-calc-form h3 i{color:var(--accent);margin-right:8px}
.single-loan-slider{margin-bottom:28px}
.single-loan-slider h4{font-size:0.95rem;color:var(--text-dark);font-weight:600;margin-bottom:12px}
.single-loan-slider .ui-slider{height:8px;border-radius:4px;background:var(--border-color);border:none}
.single-loan-slider .ui-slider .ui-slider-range{background:var(--gradient-accent);border-radius:4px}
.single-loan-slider .ui-slider .ui-slider-handle{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--accent);cursor:grab;outline:none;box-shadow:var(--shadow-sm)}
.single-loan-counter{display:flex;align-items:baseline;gap:6px;margin-top:10px}
.single-loan-counter .currency{font-size:1.1rem;font-weight:600;color:var(--text-light)}
.single-loan-counter h6{font-size:1.5rem;font-weight:700;color:var(--text-dark);margin:0}
.single-loan-counter .unit{font-size:0.9rem;color:var(--text-light)}

.loan-calc-result{background:var(--gradient-primary);padding:35px;display:flex;flex-direction:column;justify-content:center}
.loan-calc-result h3{color:#fff;font-size:1.2rem;margin-bottom:24px}
.loan-calc-result h3 i{color:var(--teal);margin-right:8px}
.calc-result-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.1)}
.calc-result-row:last-of-type{border-bottom:none}
.calc-result-row span{color:rgba(255,255,255,0.7);font-size:0.92rem}
.calc-result-row strong{color:#fff;font-size:1rem}
.calc-result-row.total{border-top:2px solid rgba(255,255,255,0.2);border-bottom:none;margin-top:8px;padding-top:18px}
.calc-result-row.total strong{color:var(--teal);font-size:1.2rem}
.calc-apply-btn{margin-top:28px}

/* EMI Calculator (loan-calculator.php) */
.loan-yearly-changer{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.loan-yearly-changer label{font-size:0.9rem;color:var(--text-body);cursor:pointer}
.loan-yearly-changer input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}

@media(max-width:767px){
  .loan-calc-inner{grid-template-columns:1fr}
  .loan-calc-result{padding:28px}
}