/* Commercial Lead - Cost Calculator styles (scoped with .cl- prefix) */
.cl-calc {
  --cl-ink: #111C35;
  --cl-body-txt: #414A5E;
  --cl-muted: #6B7488;
  --cl-line: #E4E8EF;
  --cl-line-soft: #EFF2F6;
  --cl-panel: #F7F9FB;
  --cl-accent: #E8801F;
  --cl-accent-dark: #CE6C10;
  --cl-font: "Inter", system-ui, -apple-system, sans-serif;

  padding: clamp(52px, 8vh, 90px) clamp(20px, 4vw, 60px);
  background: var(--cl-panel);
  font-family: var(--cl-font);
  color: var(--cl-ink);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
.cl-calc *{ box-sizing: border-box; }
.cl-calc-in { max-width: 1180px; margin: 0 auto; }
.cl-calc-wizard { max-width: 600px; margin-left: auto; margin-right: auto; }

.cl-card{
  background:#fff;border:1px solid var(--cl-line);border-radius:10px;
  box-shadow:0 22px 44px -30px rgba(17,28,53,.28);overflow:hidden;
}
.cl-chead{padding:16px 22px 0}
.cl-crow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cl-ctitle{font-size:15px;font-weight:600;letter-spacing:-.01em}
.cl-cstep{font-size:12.5px;color:var(--cl-muted);font-weight:500}
.cl-track{height:3px;background:var(--cl-line-soft);border-radius:2px;margin-top:12px;overflow:hidden}
.cl-track i{display:block;height:100%;width:20%;background:var(--cl-accent);border-radius:2px;transition:width .3s ease}

.cl-cbody{padding:18px 22px 20px;display:flex;flex-direction:column;min-height:clamp(300px,38vh,360px)}
.cl-q{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.35;margin:0}
.cl-qnote{margin-top:5px;font-size:13px;color:var(--cl-muted);line-height:1.45}

.cl-opts{margin-top:15px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cl-opt{
  font:inherit;font-size:14px;text-align:left;cursor:pointer;color:var(--cl-ink);
  background:#fff;border:1px solid var(--cl-line);border-radius:7px;
  padding:11px 12px 11px 32px;position:relative;transition:border-color .15s,background .15s;
}
.cl-opt::before{
  content:"";position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border:1.5px solid #CBD2DE;border-radius:50%;transition:.15s;
}
.cl-opt:hover{border-color:#C3CBD9;background:var(--cl-panel)}
.cl-opt[aria-pressed="true"]{border-color:var(--cl-accent);background:#FDF6EE}
.cl-opt[aria-pressed="true"]::before{border-color:var(--cl-accent);border-width:4px}

.cl-fields{margin-top:15px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cl-fields .cl-wide{grid-column:1/-1}
.cl-fields input{
  width:100%;font:inherit;font-size:14px;color:var(--cl-ink);background:#fff;
  border:1px solid var(--cl-line);border-radius:7px;padding:11px 12px;
}
.cl-fields input::placeholder{color:var(--cl-muted)}
.cl-fields input:hover{border-color:#C3CBD9}
.cl-fields input:focus{outline:none;border-color:var(--cl-accent);box-shadow:0 0 0 3px rgba(232,128,31,.13)}

.cl-cfoot{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:10px}
.cl-back{font:inherit;font-size:13.5px;font-weight:500;background:none;border:0;cursor:pointer;color:var(--cl-muted);padding:8px 2px}
.cl-back:hover{color:var(--cl-ink)}
.cl-back[hidden]{display:none}
.cl-next{
  margin-left:auto;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;color:#fff;
  background:var(--cl-accent);border:0;border-radius:7px;padding:11px 20px;
  display:inline-flex;align-items:center;gap:8px;transition:background .15s;
}
.cl-next:hover{background:var(--cl-accent-dark)}
.cl-next:disabled{background:#E7EAF0;color:var(--cl-muted);cursor:not-allowed}

.cl-note{padding:11px 22px;background:var(--cl-panel);border-top:1px solid var(--cl-line-soft);
  font-size:12.5px;color:var(--cl-muted);display:flex;align-items:center;gap:7px}
.cl-tick{color:var(--cl-accent);font-size:12px}

.cl-err{margin-top:10px;font-size:13px;color:#B3261E}

.cl-step{animation:cl-fade .22s ease both}
@keyframes cl-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cl-calc :focus-visible{outline:2px solid var(--cl-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cl-calc *{animation:none!important;transition:none!important}}

.cl-done{padding:8px 0 4px}
.cl-done .cl-ok{width:38px;height:38px;border-radius:50%;background:#FDF0E2;color:var(--cl-accent-dark);
  display:grid;place-items:center;font-size:17px;margin-bottom:14px}
.cl-done h2{font-size:19px;font-weight:700;letter-spacing:-.015em;margin:0}
.cl-done p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--cl-body-txt);max-width:40ch}
.cl-recap{margin-top:18px;border-top:1px solid var(--cl-line-soft)}
.cl-recap div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--cl-line-soft);font-size:13.5px}
.cl-recap span{color:var(--cl-muted);flex:0 0 auto}
.cl-recap b{font-weight:600;text-align:right}

@media (max-width:600px){ .cl-calc-wizard{max-width:none} }
@media (max-width:520px){
  .cl-cbody{min-height:0;padding:16px 18px 18px}
  .cl-chead{padding:14px 18px 0}
  .cl-note{padding:11px 18px}
  .cl-q{font-size:15px}
  .cl-opt{padding:12px 12px 12px 32px}
  .cl-cfoot{flex-wrap:wrap}
  .cl-next{flex:1 1 auto;justify-content:center}
  .cl-back{flex:0 0 auto}
}
@media (max-width:430px){
  .cl-opts,.cl-fields,.cl-recap div{grid-template-columns:1fr;flex-direction:column;align-items:flex-start;gap:3px}
  .cl-recap b{text-align:left}
}