/* KL SME Loan - Design Tokens & Merged Styles */

:root {
  --primary: #000613;
  --primary-container: #001f3f;
  --on-primary: #ffffff;
  --on-primary-container: #6f88ad;
  --secondary: #115cb9;
  --secondary-container: #659dfe;
  --secondary-fixed: #d7e2ff;
  --on-secondary-fixed: #001a40;
  --tertiary: #110200;
  --tertiary-container: #391303;
  --on-tertiary-container: #b5785f;
  --accent-gold: #F2C95D;
  --background: #f7f9fb;
  --surface: #f7f9fb;
  --surface-white: #ffffff;
  --surface-bright: #f7f9fb;
  --surface-dim: #d8dadc;
  --surface-variant: #e0e3e5;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f2f4f6;
  --surface-container: #eceef0;
  --surface-container-high: #e6e8ea;
  --surface-container-highest: #e0e3e5;
  --outline: #74777f;
  --outline-variant: #c4c6cf;
  --text-slate: #0F172A;
  --on-surface: #191c1e;
  --on-surface-variant: #43474e;
  --inverse-surface: #2d3133;
  --inverse-on-surface: #eff1f3;
  --inverse-primary: #afc8f0;
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error: #ffffff;
  --on-error-container: #93000a;
  --container-max: 1200px;
}

/* Custom Shadows */
.financial-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.financial-shadow-hover {
  transition: all 0.3s ease;
}

.financial-shadow-hover:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.custom-shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.custom-shadow-hover {
  transition: all 0.3s ease;
}

.custom-shadow-hover:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}

/* Custom Inputs */
input[type="range"] {
  accent-color: #115cb9;
}

/* Rate Type Toggle Buttons */
.calc-type-btn.active {
  background-color: #001f3f;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.calc-type-btn:not(.active) {
  background-color: transparent;
  color: #43474e;
}

/* Matcher & Interactive Step Content */
.step-content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.step-content.active {
  display: block;
  opacity: 1;
}

.option-tile.selected {
  border-color: #115cb9 !important;
  background-color: #f0f5ff !important;
  box-shadow: 0 0 0 2px rgba(17, 92, 185, 0.25);
}

.option-tile.selected .material-symbols-outlined {
  color: #115cb9;
}

/* FAQ Accordion & Category Tabs */
.faq-category-content {
  display: none;
}

.faq-category-content.active {
  display: block;
}

.faq-tab-btn.active {
  background-color: #001f3f;
  color: #ffffff;
  border-color: #001f3f;
}

.faq-item .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, margin-top 0.3s ease;
  margin-top: 0;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  margin-top: 1rem;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}