/* ============================================================
   AVS CRM — калькулятор окупаемости (перед блоком цен)
   Изолированный файл: не подключён к живому index.html, пока
   идёт ревью — подключается только из index.preview.html.
   ============================================================ */

.calc__title-accent { color: var(--accent); }
.calc__title-break { display: none; }
@media (min-width: 860px) {
  .calc__title-break { display: inline; }
}

.calc {
  margin: clamp(28px, 4vw, 44px) 0 0;
  background: rgba(255,255,255,.64); border: 1px solid rgba(255,255,255,.8);
  border-radius: 30px; padding: clamp(26px, 4vw, 44px);
  box-shadow: 0 50px 90px -56px rgba(48,45,120,.5), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}

.calc__grid { display: block; }

.calc__inputs { display: flex; flex-direction: column; gap: 18px; }

.calc__control { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.calc__slider {
  flex: 1; accent-color: var(--accent); height: 4px; cursor: pointer;
}
.calc__number {
  width: 108px; flex-shrink: 0; text-align: right;
  padding: 10px 12px; font-size: 15px;
  -moz-appearance: textfield; appearance: textfield;
}
/* Стрелки прибавить/убавить у number-инпута лишние — рядом уже есть
   слайдер для той же цели, а сами стрелки садятся вплотную к цифрам
   и выглядят слипшимися. */
.calc__number::-webkit-outer-spin-button,
.calc__number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc__hint {
  display: block; margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--muted);
}

.calc__result { margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(25,24,42,.08); }

.calc__result-line { font-size: 15px; color: #3a3950; margin: 0 0 8px; }
.calc__result-line b { color: var(--ink); font-weight: 700; }

.calc__payback { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 22px; }

.calc__tariff {
  flex: 1 1 200px; text-align: left; cursor: pointer;
  padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(79,93,224,.18);
  background: rgba(255,255,255,.7); display: flex; flex-direction: column; gap: 6px;
  font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink);
  transition: all .18s ease;
}
.calc__tariff span { font-family: var(--mono); font-weight: 700; font-size: 20px; color: var(--accent); }
.calc__tariff.is-active { border-color: var(--accent); background: rgba(79,93,224,.08); box-shadow: 0 12px 26px -14px rgba(79,93,224,.5); }

.calc__cta-toggle { width: 100%; }

.calc__form { margin: 20px 0 0; }
.calc__form.is-hidden { display: none; }

@media (min-width: 860px) {
  .calc__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px); align-items: start;
  }
  .calc__result {
    margin: 0; padding: 0 0 0 clamp(24px, 3vw, 40px);
    border-top: none; border-left: 1px solid rgba(25,24,42,.08);
  }
}

@media (max-width: 640px) {
  .calc { padding: 22px; border-radius: 22px; }
}