/* ---------- калькулятор стоимости ---------- */
.calc-hero{padding:64px 24px 40px;}
.calc-hero h1{font-size:clamp(30px,4.6vw,48px);line-height:1.08;margin-top:12px;max-width:720px;}
.calc-hero p{margin-top:16px;color:var(--ink-soft);font-size:16px;max-width:560px;}

.calc{
  display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:start;
  padding-bottom:96px;
}
.calc-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;}
.calc-panel h2{font-size:18px;font-weight:600;margin-bottom:22px;}
.calc-field{padding:20px 0;border-top:1px solid var(--line);}
.calc-field:first-of-type{border-top:none;padding-top:0;}
.calc-field[hidden]{display:none;}
.calc-label{font-size:15px;font-weight:600;}
.calc-hint{font-size:13.5px;color:var(--ink-soft);margin-top:3px;}

.calc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:none;}
.stepper button{
  width:42px;height:42px;border:none;background:var(--paper-soft);
  font-size:20px;line-height:1;color:var(--ink);
}
.stepper button:hover{background:var(--line);}
.stepper input{
  width:60px;height:42px;border:none;text-align:center;
  font-size:16px;font-weight:600;color:var(--ink);outline:none;
  -moz-appearance:textfield;appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

.calc-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;}
.switch{position:relative;flex:none;width:46px;height:26px;}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.switch span{
  position:absolute;inset:0;border-radius:999px;background:#d6d6da;
  transition:background .15s ease;pointer-events:none;
}
.switch span::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .15s ease;
}
.switch input:checked + span{background:var(--violet-1);}
.switch input:checked + span::after{transform:translateX(20px);}
.switch input:focus-visible + span{outline:2px solid var(--violet-2);outline-offset:2px;}
.calc-fixed{font-size:13px;font-weight:600;color:var(--ink-soft);background:var(--paper-soft);border:1px solid var(--line);border-radius:999px;padding:5px 12px;flex:none;}

.calc-periods{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.calc-period{
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:14px;color:var(--ink-soft);
}
.calc-period.active{background:var(--dark);border-color:var(--dark);color:#fff;}

.calc-summary{
  position:sticky;top:96px;
  background:var(--dark);color:#fff;border-radius:16px;padding:28px;
}
.calc-summary h2{font-size:18px;font-weight:600;color:#fff;margin-bottom:18px;}
.calc-lines li{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 0;border-bottom:1px solid #2a2a2e;font-size:14.5px;
}
.calc-lines small{display:block;color:#8a8a90;font-size:12.5px;margin-top:2px;}
.calc-lines b{font-weight:600;white-space:nowrap;}
.calc-total{margin-top:22px;}
.calc-total-label{font-size:13px;color:#a6a6ad;}
.calc-total-sum{font-size:clamp(28px,3.4vw,36px);font-weight:600;letter-spacing:-0.02em;margin-top:2px;}
.calc-renewal{
  margin-top:18px;padding:16px 18px;border-radius:12px;
  background:var(--dark-soft);border:1px solid #2a2a2e;
}
.calc-renewal-sum{font-size:22px;font-weight:600;margin-top:2px;}
.calc-renewal-note{font-size:12.5px;color:#8a8a90;margin-top:4px;}
.calc-summary .btn{margin-top:22px;background:#fff;color:var(--ink);}
.calc-summary .btn:hover{background:var(--violet-2);}
.calc-disclaimer{margin-top:14px;font-size:12px;color:#77777e;line-height:1.45;}

@media (max-width:960px){
  .calc{grid-template-columns:1fr;}
  .calc-summary{position:static;}
}
@media (max-width:600px){
  .calc-hero{padding:44px 24px 28px;}
  .calc-panel,.calc-summary{padding:22px 18px;}
}


/* счётчик внутри услуги и подсказки */
.calc-box{
  margin-top:14px;padding:8px 8px 8px 16px;
  background:var(--paper-soft);border:1px solid var(--line);border-radius:12px;
  transition:opacity .15s ease;
}
.calc-box-label{font-size:14px;font-weight:500;color:var(--ink);}
.calc-box .stepper{background:#fff;}
.calc-box .stepper button{width:36px;height:36px;font-size:18px;background:#fff;}
.calc-box .stepper input{width:48px;height:36px;font-size:15px;}
.calc-box.is-off{opacity:.4;pointer-events:none;}

.calc-notes{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.calc-notes li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ink-soft);}
.calc-notes li[hidden]{display:none;}
.calc-notes li.is-gift{color:#1d7a3a;font-weight:500;}
.calc-note-icon{flex:none;width:18px;text-align:center;font-size:14px;line-height:1.35;}
.calc-sip{margin-top:14px;font-size:13px;line-height:1.45;color:var(--violet-2);}
.calc-sip[hidden]{display:none;}
