/* ============================================================
   Services calculator — shared styles (index.html + app.html)
   ============================================================ */

.calc-panel { max-width:680px; margin:0 auto; background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-lg); overflow:hidden; }
.calc-head { padding:24px 30px 0; border-bottom:1px solid var(--border-color); }
.calc-dots { display:flex; gap:6px; margin-bottom:10px; }
.calc-dot { flex:1; height:3px; border-radius:3px; background:var(--border-color); transition:background .4s; }
.calc-dot.done { background:var(--accent); }
.calc-dot.active { background:var(--accent); opacity:.55; }
.calc-prog-row { display:flex; justify-content:space-between; font-size:12px; color:var(--secondary-text); padding-bottom:18px; }
.calc-body { padding:26px 30px 30px; }
@media(max-width:540px){ .calc-head{padding:18px 18px 0;} .calc-body{padding:18px;} }
.calc-step { display:none; }
.calc-step.active { display:block; animation:calcFadeUp .2s ease; }
@keyframes calcFadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.calc-q { font-size:17px; font-weight:500; margin-bottom:4px; }
.calc-hint { font-size:13px; color:var(--secondary-text); margin-bottom:20px; }
.calc-opts { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:22px; }
.calc-opts.c3 { grid-template-columns:repeat(3,1fr); }
@media(max-width:500px){ .calc-opts,.calc-opts.c3{grid-template-columns:1fr 1fr;} }
.calc-opt { background:var(--bg-color); border:1.5px solid var(--border-color); border-radius:var(--radius-sm); padding:14px 13px; cursor:pointer; text-align:left; font-family:inherit; color:var(--primary-text); transition:var(--transition); }
.calc-opt:hover { border-color:var(--accent); background:var(--accent-soft); }
.calc-opt.sel { border-color:var(--accent); background:var(--accent-soft); }
.calc-opt-ico { font-size:20px; display:block; margin-bottom:7px; }
.calc-opt-ttl { font-size:13px; font-weight:600; margin-bottom:2px; }
.calc-opt-sub { font-size:11px; color:var(--secondary-text); line-height:1.4; }
.calc-togs { display:flex; flex-direction:column; gap:7px; margin-bottom:22px; }
.calc-tog { display:flex; align-items:center; justify-content:space-between; background:var(--bg-color); border:1px solid var(--border-color); border-radius:10px; padding:11px 13px; cursor:pointer; transition:var(--transition); }
.calc-tog:hover { border-color:var(--accent); }
.calc-tog.on { border-color:var(--accent); background:var(--accent-soft); }
.calc-tog-l { display:flex; align-items:center; gap:9px; }
.calc-tog-ico { font-size:15px; }
.calc-tog-ttl { font-size:13px; font-weight:500; }
.calc-tog-price { font-size:11px; color:var(--secondary-text); margin-top:1px; }
.calc-sw { width:36px; height:20px; background:var(--border-color); border-radius:10px; position:relative; transition:background .2s; flex-shrink:0; }
.calc-sw::after { content:''; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; top:3px; left:3px; transition:transform .2s; }
.calc-tog.on .calc-sw { background:var(--accent); }
.calc-tog.on .calc-sw::after { transform:translateX(16px); }
.calc-sl { margin-bottom:18px; }
.calc-sl-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; font-size:14px; font-weight:500; }
.calc-sl-val { font-size:12px; font-weight:600; color:var(--accent); background:var(--accent-soft); padding:2px 9px; border-radius:6px; }
input[type=range] { width:100%; height:4px; -webkit-appearance:none; background:var(--border-color); border-radius:4px; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; box-shadow:0 0 0 4px var(--accent-soft); }
.calc-sl-hint { font-size:12px; color:var(--secondary-text); margin-top:5px; }
.calc-ta { width:100%; background:var(--bg-color); border:1.5px solid var(--border-color); border-radius:10px; padding:11px 13px; font-family:inherit; font-size:14px; color:var(--primary-text); outline:none; resize:vertical; margin-bottom:14px; transition:border-color .2s; box-sizing:border-box; }
.calc-ta:focus,.calc-inp:focus { border-color:var(--accent); }
.calc-ta::placeholder,.calc-inp::placeholder { color:var(--secondary-text); }
.calc-inp { width:100%; background:var(--bg-color); border:1.5px solid var(--border-color); border-radius:10px; padding:12px 13px; font-family:inherit; font-size:14px; color:var(--primary-text); outline:none; margin-bottom:9px; transition:border-color .2s; box-sizing:border-box; }
.calc-inp-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
@media(max-width:480px){ .calc-inp-grid{grid-template-columns:1fr;} }
.calc-lbl { font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--secondary-text); text-transform:uppercase; margin-bottom:9px; margin-top:18px; }
.calc-lbl:first-child { margin-top:0; }
.calc-err { font-size:13px; color:#e53e3e; background:#fff5f5; border:1px solid #fed7d7; border-radius:8px; padding:9px 13px; margin-bottom:14px; display:none; }
.calc-err.show { display:block; animation:errShake .35s ease; }
@keyframes errShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.calc-info { background:var(--accent-soft); border:1px solid rgba(47,143,122,.2); border-radius:10px; padding:13px; display:flex; gap:9px; margin-bottom:18px; font-size:13px; line-height:1.6; }
.calc-res-rows { margin-bottom:18px; }
.calc-res-row { display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--border-color); font-size:13px; }
.calc-res-row:last-child { border-bottom:none; }
.calc-res-name { color:var(--secondary-text); }
.calc-res-hrs { font-size:11px; color:var(--secondary-text); margin-left:4px; }
.calc-res-val { font-weight:600; }
.scope-block { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.scope-col { background:var(--card-bg); border:1px solid var(--border-color); border-radius:10px; padding:12px 14px; }
.scope-head { font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--secondary-text); margin-bottom:9px; }
.scope-row { display:flex; gap:7px; align-items:flex-start; font-size:12px; line-height:1.5; color:var(--secondary-text); margin-bottom:5px; }
.scope-ico { font-weight:700; font-size:13px; flex-shrink:0; margin-top:1px; }
.scope-ico.grn { color:var(--accent); }
.scope-ico.red { color:#d94f4f; }
@media(max-width:500px){ .scope-block { grid-template-columns:1fr; } }
.calc-price-block { background:var(--soft-section-bg); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:22px; text-align:center; margin-bottom:18px; }
.calc-price-lbl { font-size:11px; font-weight:600; letter-spacing:.08em; color:var(--secondary-text); text-transform:uppercase; margin-bottom:4px; }
.calc-price-mkt { font-size:14px; color:var(--secondary-text); text-decoration:line-through; margin-bottom:6px; }
.calc-price-save { display:inline-block; background:var(--accent-soft); border:1px solid rgba(47,143,122,.25); color:var(--accent-dark); font-size:11px; font-weight:600; padding:2px 10px; border-radius:100px; margin-bottom:10px; }
.calc-price-main { font-size:clamp(28px,10vw,42px); font-weight:300; letter-spacing:-0.03em; color:var(--primary-text); line-height:1; }
.calc-price-note { font-size:13px; color:var(--secondary-text); margin-top:5px; }
.calc-pp-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:22px; }
.calc-pp-card { background:var(--card-bg); border:1px solid var(--border-color); border-radius:var(--radius-sm); padding:13px; text-align:center; }
.calc-pp-lbl { font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--secondary-text); text-transform:uppercase; margin-bottom:5px; }
.calc-pp-val { font-size:clamp(15px,5vw,19px); font-weight:600; }
.calc-pp-val.grn { color:var(--accent); }
.calc-pp-val.amb { color:#b8730a; }
.calc-btn-row { display:flex; gap:9px; flex-wrap:wrap; }
.calc-btn-row .btn { min-height:48px; font-size:15px; }
@media(max-width:380px){ .calc-btn-row { flex-direction:column; } .calc-btn-row .btn-secondary { order:2; } }
.calc-ok { text-align:center; padding:12px 0; }
.calc-ok-ico { font-size:46px; display:block; margin-bottom:12px; }
.calc-ok h3 { font-size:19px; font-weight:500; margin-bottom:7px; }
.calc-ok p { color:var(--secondary-text); font-size:14px; line-height:1.65; }

/* ── ЛК: нативный вид калькулятора ─────────────────────────── */
.lk-svc-calc .calc-panel {
  max-width: none;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.lk-svc-calc .calc-head {
  background: #f0f4f3;
  border: none;
  border-radius: 12px;
  padding: 14px 16px 14px;
  margin-bottom: 14px;
}
.lk-svc-calc .calc-prog-row {
  padding-bottom: 0;
}
.lk-svc-calc .calc-body {
  padding: 0;
}
.lk-svc-calc .calc-step-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px 18px 22px;
}
@media(max-width:540px) {
  .lk-svc-calc .calc-step-card { padding: 16px 14px 18px; }
}