:root{
  --ink:#0f172a; --muted:#64748b; --line:#e5e7eb; --bg:#f8fafc; --panel:#ffffff;
  --violet:#6d28d9; --violet-2:#9333ea;
  --shadow:0 16px 44px rgba(15,23,42,.10);
  --shadow-strong:0 22px 60px rgba(109,40,217,.30);
}
html.hal-no-scroll{overflow:hidden}

/* ===================== CTA COMPACT (scoped) ===================== */
.hal-cta-compact{
  max-width:500px; /* was 300px */
  margin:0 auto;
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  box-shadow:0 6px 20px rgba(2,6,23,.06);
  padding:16px;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#0f172a;
}
.hal-cta-compact .cta-title{margin:0 0 6px; font-size:22px; font-weight:900}
.hal-cta-compact .sub{margin:0 0 12px; color:#6b7280; font-size:12px; line-height:1.35}

/* Sliders stacked vertically */
.hal-cta-compact .row{display:grid; gap:12px; margin-bottom:12px; grid-template-columns:1fr}

/* Labels/values */
.hal-cta-compact .label{
  font-size:15px; font-weight:800; color:#111827;
  display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
}
.hal-cta-compact .val{
  font-size:15px; /* bigger amounts */
  font-weight:900;
  background:#f5f7fb; border:1px solid #e5e7eb;
  border-radius:8px; padding:4px 10px; color:#0f172a;
}

/* CTA action */
.hal-cta-compact .cta-actions{display:flex; justify-content:flex-end; margin-top:4px}
.hal-cta-compact .btn-go{
  all:unset; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#6d28d9,#9333ea); color:#fff; font-weight:900;
  border-radius:10px; padding:10px 14px; box-shadow:0 10px 22px rgba(109,40,217,.22);
  font-size:14px; gap:8px; position:relative;
}
.hal-cta-compact .btn-go:hover{filter:brightness(.92)}

/* Loading state: subtle dim + spinner */
.hal-cta-compact .btn-go.is-loading{
  filter:brightness(.95); pointer-events:none;
}
.hal-cta-compact .btn-go.is-loading::after{
  content:"";
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff;
  border-radius:50%;
  animation:halspin .8s linear infinite;
  display:inline-block;
}
@keyframes halspin{ to { transform:rotate(360deg); } }

/* =================================================================
   SHARED RANGE SLIDER KIT (CTA + RESULTS)
   Applies to:
   - CTA:          .hal-cta-compact input[type=range]
   - Results page: .results-mortgage input[type=range]
   ================================================================= */
.hal-cta-compact input[type=range],
.results-mortgage input[type=range]{
  --fill: 100%; /* fallback fill; CTA/Results JS may set this dynamically */
  -webkit-appearance:none; appearance:none;
  width:100%; height:15px; border:none; outline:none; border-radius:15px;
  background:
    linear-gradient(var(--violet), var(--violet)) no-repeat,
    #b3b3b3; /* base track */
  background-size: var(--fill, 100%) 100%, 100% 100%;
  cursor:pointer;
}

/* WebKit track */
.hal-cta-compact input[type=range]::-webkit-slider-runnable-track,
.results-mortgage   input[type=range]::-webkit-slider-runnable-track{
  -webkit-appearance:none; height:15px; border-radius:15px;
  background:transparent; border:none; box-shadow:none;
}

/* WebKit thumb */
.hal-cta-compact input[type=range]::-webkit-slider-thumb,
.results-mortgage   input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  height:25px; width:25px; border-radius:50%; background:#fff;
  border:3px solid #e9d5ff; box-shadow:0 8px 18px rgba(2,6,23,.25);
  margin-top:-5px; /* center on 15px track */
  transition: box-shadow .2s ease-in-out;
}
.hal-cta-compact input[type=range]::-webkit-slider-thumb:hover,
.results-mortgage   input[type=range]::-webkit-slider-thumb:hover{
  box-shadow:0 0 0 10px rgba(109,40,217,0.10);
}
.hal-cta-compact input[type=range]:active::-webkit-slider-thumb,
.hal-cta-compact input[type=range]:focus ::-webkit-slider-thumb,
.results-mortgage   input[type=range]:active::-webkit-slider-thumb,
.results-mortgage   input[type=range]:focus  ::-webkit-slider-thumb{
  box-shadow:0 0 0 13px rgba(109,40,217,0.20);
}

/* Firefox track + progress */
.hal-cta-compact input[type=range]::-moz-range-track,
.results-mortgage   input[type=range]::-moz-range-track{
  height:15px; border-radius:15px; background:#b3b3b3; border:none;
}
.hal-cta-compact input[type=range]::-moz-range-progress,
.results-mortgage   input[type=range]::-moz-range-progress{
  height:15px; border-radius:15px; background:var(--violet);
}

/* Firefox thumb */
.hal-cta-compact input[type=range]::-moz-range-thumb,
.results-mortgage   input[type=range]::-moz-range-thumb{
  height:25px; width:25px; border-radius:50%; background:#fff;
  border:3px solid #e9d5ff; transition: box-shadow .2s ease-in-out;
}
.hal-cta-compact input[type=range]::-moz-range-thumb:hover,
.results-mortgage   input[type=range]::-moz-range-thumb:hover{
  box-shadow:0 0 0 10px rgba(109,40,217,0.10);
}
.hal-cta-compact input[type=range]:active::-moz-range-thumb,
.hal-cta-compact input[type=range]:focus  ::-moz-range-thumb,
.results-mortgage   input[type=range]:active::-moz-range-thumb,
.results-mortgage   input[type=range]:focus  ::-moz-range-thumb{
  box-shadow:0 0 0 13px rgba(109,40,217,0.20);
}