/* Loan Calculator Styles */

.loan-calculator-section .loan-calculator-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 5px;
  outline: none;
  transition: all 0.2s ease-in-out;
}

.loan-calculator-section .loan-calculator-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #e7313f;
  cursor: pointer;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.loan-calculator-section .loan-calculator-slider::-webkit-slider-thumb:hover {
  background: #d12939;
}

.loan-calculator-section .loan-calculator-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #e7313f;
  cursor: pointer;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.loan-calculator-section .loan-calculator-slider::-moz-range-thumb:hover {
  background: #d12939;
}

.loan-calculator-section .loan-calculator-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: linear-gradient(
    to right,
    #e7313f 0%,
    #e7313f var(--slider-progress, 0%),
    #e5e7eb var(--slider-progress, 0%),
    #e5e7eb 100%
  );
  border-radius: 5px;
}

.loan-calculator-section .loan-calculator-slider::-moz-range-track {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 5px;
}

.loan-calculator-section .loan-calculator-slider::-moz-range-progress {
  height: 8px;
  background: #e7313f;
  border-radius: 5px;
}

.loan-calculator-section .loan-calculator-text-input {
  background-color: #f9fafb;
  transition: all 0.2s ease-in-out;
}

.loan-calculator-section .loan-calculator-checkbox:checked {
  background-color: #e7313f;
  border-color: #e7313f;
}

.loan-calculator-section .loan-calculator-primary-button {
  transition: all 0.2s ease-in-out;
}

.loan-calculator-section .loan-calculator-primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(231, 49, 63, 0.3);
}

.loan-calculator-section .loan-calculator-estimated-payment {
  transition: color 0.3s ease, transform 0.2s ease;
}

.loan-calculator-section .loan-calculator-terms-link:hover {
  text-decoration: underline;
}