/* CALCULATOR — оболочка и слайдер */

.calc {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  padding: var(--sp-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}

@media (min-width: 900px) {
  .calc {
    grid-template-columns: 1fr 1.2fr;
    padding: var(--sp-lg);
  }
}

.calc:hover {
  border-color: var(--border-bright);
  box-shadow: var(--shadow-md);
}

.calc-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.calc-label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-2);
}

.calc-label strong {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  color: var(--text-0);
}

.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--bg-2);
  border-radius: 4px;
  outline: none;
  margin: 8px 0 0;
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 24px;
  background: var(--grad-brand);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--bg-0);
  box-shadow: var(--glow-tg);
  transition: transform var(--dur-fast);
}

/* Touch devices — крупнее thumb для удобства */
@media (pointer: coarse) {
  .calc-slider { height: 8px; }
  .calc-slider::-webkit-slider-thumb { width: 28px; height: 28px; }
  .calc-slider::-moz-range-thumb { width: 28px; height: 28px; }
}

.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

.calc-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--accent-tg);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid var(--bg-0);
}

.calc-summary {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: rgba(178, 75, 243, 0.08);
  border: 1px solid var(--accent-violet-dim);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-1);
}

.calc-summary .big {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 800;
  color: var(--text-0);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.calc-summary .big .text-mint { display: inline; }
.calc-payback {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--accent-violet-dim);
  font-size: 13px;
  color: var(--text-2);
}
.calc-payback b {
  color: var(--accent-mint);
  font-weight: 700;
}

/* Fluid typography */
.calc-label { font-size: clamp(13px, 1vw, 15px); }
.calc-label strong { font-size: clamp(19px, 1.8vw, 24px); }