/* style.css — bewaar als UTF-8 zonder BOM */

.ec-calculator {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
  padding: 20px;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  color: #223;
}

.ec-progress { position: relative; margin-bottom: 16px; }
.ec-progress-bar { height: 6px; background: linear-gradient(90deg,#82c172,#3bb4d1); border-radius: 6px; transition: width 300ms ease; }
.ec-progress-steps { display:flex; justify-content:space-between; margin-top:8px; }
.ec-step-indicator { width:28px; height:28px; border-radius:50%; background:#f1f1f1; color:#666; display:inline-flex; align-items:center; justify-content:center; font-weight:600; }
.ec-step-indicator.active { background:#82c172; color:#fff; border-color:rgba(11,106,166,0.15); }

/* Form */
.ec-form .ec-step { border:none; padding:0; margin:0 0 12px 0; }
.ec-form label { display:block; margin-bottom:10px; font-size:14px; color:#222; }
.ec-form input[type="number"], .ec-form input[type="text"], .ec-form input[type="email"], .ec-form select {
  width:100%; padding:10px; margin-top:6px; border:1px solid #d0d0d0; border-radius:6px; box-sizing:border-box; font-size:14px;
}
.ec-inline { display:flex; gap:8px; }
.ec-inline input { flex:1; }
.ec-inline select { width:120px; }

/* Buttons */
.ec-step-actions { display:flex; gap:10px; margin-top:12px; }
.ec-btn { background:#82c172; color:#fff; padding:9px 14px; border-radius:6px; border:1px solid #ddd; cursor:pointer; font-weight:600; }
.ec-btn.ec-primary { background:#82c172; color:#fff; border-color:rgba(11,106,166,0.2); }

/* Results */
.ec-results { margin-top:8px; padding-top:8px; border-top:1px dashed #e1e1e1; }
.ec-results ul { list-style:none; margin:0; padding:0; }
.ec-results li { padding:8px 0; font-size:14px; }

/* Helpers */
.ec-help { display:block; color:#666; font-size:12px; margin-top:4px; }
.ec-muted { font-size:13px; color:#666; }

/* Validation */
.ec-invalid { outline: 2px solid #e05a4f; }
.ec-error { color: #e05a4f; font-size: 12px; margin-top:6px; }

/* Responsive */
@media (min-width:640px) {
  .ec-form label { display:inline-block; width:calc(50% - 10px); }
  .ec-inline select { width:140px; }
}