.sof-wrap{--p:#83bfd0;--pd:#579caf;--dark:#222;--border:#e3e7e9;--bg:#f7f9fa;width:100%;color:var(--dark)}
.sof-wrap *{box-sizing:border-box}.sof-shell{max-width:920px;margin:0 auto;padding:45px;background:#fff;border-radius:20px;box-shadow:0 15px 50px rgba(0,0,0,.08)}
.sof-header{display:flex;justify-content:space-between;align-items:flex-start;gap:30px}.sof-eyebrow{display:block;margin-bottom:10px;color:var(--pd);font-size:12px;font-weight:700;letter-spacing:1.8px}
.sof-header h2{margin:0 0 8px;font-size:34px;line-height:1.15}.sof-header p,.sof-help{margin:0;color:#727272}.sof-counter{padding:10px 16px;background:var(--bg);border-radius:30px;font-weight:600;white-space:nowrap}.sof-current{color:var(--pd)}
.sof-progress{height:6px;margin:28px 0 38px;overflow:hidden;background:#edf0f1;border-radius:10px}.sof-progress-bar{width:25%;height:100%;background:var(--p);transition:.35s}
.sof-step{display:none}.sof-step.active{display:block;animation:sofFade .3s ease}@keyframes sofFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sof-step h3{margin:0 0 7px;font-size:27px}.sof-services{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
.sof-card{position:relative;display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:14px;padding:22px;border:2px solid var(--border);border-radius:14px;cursor:pointer;transition:.2s}
.sof-card:hover{border-color:var(--p);transform:translateY(-2px)}.sof-card.selected{border-color:var(--pd);background:rgba(131,191,208,.1)}.sof-card input,.sof-options input{position:absolute;opacity:0;pointer-events:none}
.sof-icon{grid-row:1/3;display:flex;width:52px;height:52px;align-items:center;justify-content:center;background:var(--bg);border-radius:12px;font-size:24px}.sof-card-title{align-self:end;font-size:17px;font-weight:700}.sof-card-text{margin-top:4px;color:#777;font-size:13px}
.sof-conditional{display:none;margin-top:30px}.sof-conditional.active{display:block}.sof-field{margin-bottom:22px}.sof-field>label{display:block;margin-bottom:8px;font-weight:600}
.sof-field input,.sof-field select,.sof-field textarea{width:100%;height:auto;margin:0;padding:15px 16px;border:1px solid var(--border);border-radius:9px;background:#fff;color:#222;font:inherit;outline:none;box-shadow:none}
.sof-field input:focus,.sof-field select:focus,.sof-field textarea:focus{border-color:var(--pd);box-shadow:0 0 0 3px rgba(131,191,208,.15)}.sof-field textarea{min-height:130px;resize:vertical}
.sof-suffix{position:relative}.sof-suffix input{padding-right:60px}.sof-suffix>span{position:absolute;right:17px;top:50%;transform:translateY(-50%);color:#777}
.sof-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.sof-options{display:flex;flex-wrap:wrap;gap:10px}.sof-options label{position:relative;cursor:pointer}.sof-options span{display:block;padding:12px 18px;border:1px solid var(--border);border-radius:8px}.sof-options input:checked+span{border-color:var(--pd);background:rgba(131,191,208,.12)}
.sof-actions{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:35px}.sof-right{justify-content:flex-end}.sof-next,.sof-submit{margin:0;padding:15px 27px;border:0;border-radius:8px;background:var(--p);color:#17272c;font:inherit;font-weight:700;cursor:pointer}.sof-next:hover,.sof-submit:hover{background:var(--pd);color:#fff}.sof-back{margin:0;padding:14px 0;border:0;background:transparent;color:#777;font:inherit;cursor:pointer}
.sof-summary{margin:28px 0 20px;padding:22px;background:var(--bg);border-radius:12px}.sof-summary p{margin:5px 0}.sof-consent{display:flex;align-items:flex-start;gap:10px;color:#666;font-size:13px}.sof-consent input{width:auto;margin-top:3px}.sof-success{text-align:center;padding:45px 15px}.sof-success-icon{display:flex;width:70px;height:70px;margin:0 auto 20px;align-items:center;justify-content:center;background:var(--p);border-radius:50%;font-size:30px;font-weight:700}
@media(max-width:700px){.sof-shell{padding:27px 18px;border-radius:14px}.sof-header h2{font-size:27px}.sof-services,.sof-grid{grid-template-columns:1fr}.sof-card{padding:17px}.sof-header{gap:15px}.sof-counter{font-size:13px}}


/* v1.1.0 – tydligare tjänsteval */
.sof-services{
  gap:18px;
}
.sof-card{
  min-height:112px;
  grid-template-columns:68px minmax(0,1fr) 28px;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:18px;
  padding:20px 22px;
  border:1.5px solid #dfe6e9;
  border-radius:15px;
  background:#fff;
  box-shadow:0 2px 8px rgba(20,40,50,.025);
}
.sof-card::after{
  content:"";
  grid-column:3;
  grid-row:1 / 3;
  width:24px;
  height:24px;
  border:2px solid #cbd6da;
  border-radius:50%;
  justify-self:end;
  background:#fff;
  box-shadow:inset 0 0 0 5px #fff;
  transition:.2s ease;
}
.sof-card:hover{
  border-color:var(--p);
  box-shadow:0 7px 22px rgba(40,100,120,.08);
}
.sof-card.selected{
  border:2px solid var(--p);
  background:linear-gradient(90deg,rgba(131,191,208,.10),rgba(131,191,208,.025));
  box-shadow:0 7px 22px rgba(40,100,120,.08);
}
.sof-card.selected::after{
  border-color:var(--p);
  background:var(--p);
}
.sof-icon{
  grid-column:1;
  grid-row:1 / 3;
  width:64px;
  height:64px;
  border-radius:50%;
  font-size:28px;
  background:#f4f7f8;
}
.sof-card-title{
  grid-column:2;
  grid-row:1;
  align-self:end;
  font-size:18px;
  line-height:1.25;
  font-weight:700;
  color:#18232a;
}
.sof-card-text{
  grid-column:2;
  grid-row:2;
  align-self:start;
  margin-top:4px;
  font-size:14px;
  line-height:1.35;
  color:#68747b;
}

/* v1.1.0 – mobil */
@media(max-width:700px){
  .sof-shell{
    width:calc(100% - 16px);
    margin-left:auto;
    margin-right:auto;
    padding:22px 14px 20px;
    border-radius:14px;
    box-shadow:0 8px 26px rgba(0,0,0,.06);
  }
  .sof-header{
    position:relative;
    display:block;
    padding-right:54px;
  }
  .sof-header h2{
    font-size:25px;
    line-height:1.16;
    margin-bottom:7px;
  }
  .sof-header p{
    font-size:14px;
    line-height:1.45;
  }
  .sof-eyebrow{
    font-size:11px;
    letter-spacing:1.4px;
    margin-bottom:8px;
  }
  .sof-counter{
    position:absolute;
    right:0;
    top:0;
    padding:7px 10px;
    font-size:12px;
  }
  .sof-progress{
    margin:20px 0 25px;
    height:5px;
  }
  .sof-step h3{
    font-size:22px;
  }
  .sof-help{
    font-size:14px;
  }
  .sof-services{
    grid-template-columns:1fr;
    gap:9px;
    margin-top:18px;
  }
  .sof-card{
    min-height:76px;
    grid-template-columns:46px minmax(0,1fr) 22px;
    column-gap:12px;
    padding:11px 12px;
    border-radius:11px;
  }
  .sof-card::after{
    width:20px;
    height:20px;
    border-width:2px;
    box-shadow:inset 0 0 0 4px #fff;
  }
  .sof-icon{
    width:44px;
    height:44px;
    font-size:20px;
  }
  .sof-card-title{
    font-size:15px;
    line-height:1.2;
  }
  .sof-card-text{
    margin-top:2px;
    font-size:12px;
    line-height:1.25;
  }
  .sof-actions{
    margin-top:22px;
  }
  .sof-actions.sof-right{
    justify-content:stretch;
  }
  .sof-actions.sof-right .sof-next{
    width:100%;
  }
  .sof-next,.sof-submit{
    min-height:48px;
    padding:13px 18px;
  }
  .sof-field{
    margin-bottom:17px;
  }
  .sof-field input,.sof-field select,.sof-field textarea{
    padding:13px 14px;
  }
  .sof-grid{
    grid-template-columns:1fr;
    gap:0;
  }
}


/* v1.2.0 – gråare profil och vit ikonbakgrund */
.sof-wrap{
  --p:#7d8996;
  --pd:#65717e;
}

.sof-progress-bar{
  background:#8795a2;
}

.sof-icon{
  background:#fff;
  border:1px solid #e1e6e9;
  box-shadow:0 2px 8px rgba(20,35,45,.035);
}

.sof-card.selected{
  border-color:#7f9aaa;
  background:linear-gradient(90deg,rgba(125,137,150,.08),rgba(125,137,150,.025));
}

.sof-card.selected::after{
  border-color:#7d8996;
  background:#7d8996;
}

.sof-next,
.sof-submit{
  background:#7d8996;
  color:#fff;
}

.sof-next:hover,
.sof-submit:hover{
  background:#65717e;
  color:#fff;
}

.sof-current,
.sof-eyebrow{
  color:#6f7f8b;
}

@media(max-width:700px){
  .sof-icon{
    background:#fff;
  }
}


/* v1.3.0 – starkare kort, ikoner och Enfold-säkra regler */
#top .sof-wrap .sof-card,
.sof-wrap .sof-card{
  border:1.5px solid #c8d1d7 !important;
  background:#fff !important;
  box-shadow:0 3px 12px rgba(28,42,52,.035) !important;
}

#top .sof-wrap .sof-card:hover,
.sof-wrap .sof-card:hover{
  border-color:#9eabb4 !important;
  box-shadow:0 7px 20px rgba(28,42,52,.075) !important;
}

#top .sof-wrap .sof-card.selected,
.sof-wrap .sof-card.selected{
  border:2px solid #718896 !important;
  background:#f5f7f8 !important;
  box-shadow:0 7px 20px rgba(28,42,52,.07) !important;
}

#top .sof-wrap .sof-icon,
.sof-wrap .sof-icon{
  width:64px !important;
  height:64px !important;
  min-width:64px !important;
  background:#fff !important;
  border:1px solid #d5dde2 !important;
  box-shadow:0 2px 8px rgba(20,35,45,.04) !important;
  font-size:29px !important;
  line-height:1 !important;
}

#top .sof-wrap .sof-card-title,
.sof-wrap .sof-card-title{
  font-size:18px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  color:#202a31 !important;
}

#top .sof-wrap .sof-card-text,
.sof-wrap .sof-card-text{
  font-size:14px !important;
  line-height:1.4 !important;
  color:#626e76 !important;
}

#top .sof-wrap .sof-card::after,
.sof-wrap .sof-card::after{
  border-color:#b9c6cd !important;
}

#top .sof-wrap .sof-card.selected::after,
.sof-wrap .sof-card.selected::after{
  border-color:#718896 !important;
  background:#718896 !important;
}

#top .sof-wrap .sof-next,
#top .sof-wrap .sof-submit,
.sof-wrap .sof-next,
.sof-wrap .sof-submit{
  min-width:112px;
  min-height:52px;
  border:1px solid #707d89 !important;
  background:#7d8996 !important;
  color:#fff !important;
  border-radius:8px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

#top .sof-wrap .sof-next:hover,
#top .sof-wrap .sof-submit:hover,
.sof-wrap .sof-next:hover,
.sof-wrap .sof-submit:hover{
  border-color:#596570 !important;
  background:#65717e !important;
  color:#fff !important;
}

@media(max-width:700px){
  #top .sof-wrap .sof-card,
  .sof-wrap .sof-card{
    min-height:76px;
    grid-template-columns:48px minmax(0,1fr) 22px;
    padding:11px 12px !important;
    border-width:1.5px !important;
  }

  #top .sof-wrap .sof-card.selected,
  .sof-wrap .sof-card.selected{
    border-width:2px !important;
  }

  #top .sof-wrap .sof-icon,
  .sof-wrap .sof-icon{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    font-size:22px !important;
  }

  #top .sof-wrap .sof-card-title,
  .sof-wrap .sof-card-title{
    font-size:15px !important;
  }

  #top .sof-wrap .sof-card-text,
  .sof-wrap .sof-card-text{
    font-size:12px !important;
  }

  #top .sof-wrap .sof-next,
  .sof-wrap .sof-next{
    min-height:50px;
  }
}


/* v1.4.0 – tydligare formulärfält och navigeringsknappar */
#top .sof-wrap .sof-field > label,
.sof-wrap .sof-field > label{
  color:#202a31 !important;
  font-weight:700 !important;
  font-size:14px !important;
}

#top .sof-wrap .sof-field input,
#top .sof-wrap .sof-field select,
#top .sof-wrap .sof-field textarea,
.sof-wrap .sof-field input,
.sof-wrap .sof-field select,
.sof-wrap .sof-field textarea{
  border:1.5px solid #b9c6cf !important;
  background:#fff !important;
  color:#202a31 !important;
  border-radius:9px !important;
  min-height:54px;
  padding:14px 16px !important;
  box-shadow:0 1px 3px rgba(25,40,50,.025) !important;
}

#top .sof-wrap .sof-field textarea,
.sof-wrap .sof-field textarea{
  min-height:130px;
}

#top .sof-wrap .sof-field input::placeholder,
#top .sof-wrap .sof-field textarea::placeholder,
.sof-wrap .sof-field input::placeholder,
.sof-wrap .sof-field textarea::placeholder{
  color:#78848d !important;
  opacity:1 !important;
}

#top .sof-wrap .sof-field input:focus,
#top .sof-wrap .sof-field select:focus,
#top .sof-wrap .sof-field textarea:focus,
.sof-wrap .sof-field input:focus,
.sof-wrap .sof-field select:focus,
.sof-wrap .sof-field textarea:focus{
  border-color:#718896 !important;
  box-shadow:0 0 0 3px rgba(113,136,150,.12) !important;
}

#top .sof-wrap .sof-back,
.sof-wrap .sof-back{
  min-width:112px;
  min-height:52px;
  padding:13px 20px !important;
  border:1.5px solid #c4cdd3 !important;
  border-radius:8px !important;
  background:#f3f5f6 !important;
  color:#3f4a52 !important;
  font-weight:600 !important;
  text-decoration:none !important;
  transition:.2s ease;
}

#top .sof-wrap .sof-back:hover,
.sof-wrap .sof-back:hover{
  border-color:#aeb9c0 !important;
  background:#e9edef !important;
  color:#202a31 !important;
}

#top .sof-wrap .sof-next,
#top .sof-wrap .sof-submit,
.sof-wrap .sof-next,
.sof-wrap .sof-submit{
  min-width:122px;
  min-height:52px;
  border:1.5px solid #65717e !important;
  background:#7d8996 !important;
  color:#fff !important;
}

#top .sof-wrap .sof-next:hover,
#top .sof-wrap .sof-submit:hover,
.sof-wrap .sof-next:hover,
.sof-wrap .sof-submit:hover{
  background:#65717e !important;
  border-color:#596570 !important;
}

@media(max-width:700px){
  #top .sof-wrap .sof-field input,
  #top .sof-wrap .sof-field select,
  .sof-wrap .sof-field input,
  .sof-wrap .sof-field select{
    min-height:50px;
  }

  #top .sof-wrap .sof-actions,
  .sof-wrap .sof-actions{
    gap:10px;
  }

  #top .sof-wrap .sof-back,
  #top .sof-wrap .sof-next,
  #top .sof-wrap .sof-submit,
  .sof-wrap .sof-back,
  .sof-wrap .sof-next,
  .sof-wrap .sof-submit{
    min-width:0;
    min-height:48px;
  }
}

.sof-status{margin-top:18px;font-weight:600}.sof-submit:disabled{opacity:.65;cursor:wait}