.section--07-calculator { background: var(--surface-1); }

.s-calc__head { text-align: center; margin-bottom: var(--space-10); }
.s-calc__head h2 { font: 700 clamp(28px,3.5vw,40px)/1.1 var(--font-sans); color: var(--fg-1); letter-spacing: -0.02em; }
.s-calc__head p { color: var(--fg-2); margin-top: 8px; }

.s-calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-6);
  background: #fff;
  padding: var(--space-8);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  align-items: stretch;
}

/* ---------- Controls ---------- */
.s-calc__controls { display: flex; flex-direction: column; gap: var(--space-5); }

.s-calc__types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 60px;
  gap: 10px;
}
/* 7-й чип центрируется в строке, шириной как одна колонка */
.s-calc__types > .s-calc__type:nth-child(7) {
  grid-column: 2 / 3;
}

.s-calc__type {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  cursor: pointer;
  font: 500 14px var(--font-sans);
  color: var(--fg-2);
  background: #fff;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  position: relative;
}
.s-calc__type:hover { border-color: #B4B9C1; color: var(--fg-1); }
.s-calc__type input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.s-calc__type i { flex: 0 0 auto; color: var(--fg-2); }
.s-calc__type span { line-height: 1.2; }
.s-calc__type:has(input:checked) {
  border-color: var(--accent);
  background: rgba(255,84,54,0.06);
  color: var(--fg-1);
}
.s-calc__type:has(input:checked) i { color: var(--accent); }

.s-calc__controls .field { gap: 8px; }
.s-calc__controls input[type=range] {
  width: 100%;
  accent-color: var(--accent);
}

/* ---------- Result card ---------- */
.s-calc__result {
  background: var(--fg-1);
  color: #fff;
  border-radius: var(--r-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.s-calc__result .eyebrow { color: rgba(255,255,255,0.55); margin-bottom: 4px; }

.s-calc__day {
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.s-calc__day .text-money { font-size: 20px; }

.s-calc__month {
  font-size: clamp(20px, 2vw, 24px);
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  margin-bottom: 16px;
}
.s-calc__month-val {
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.05;
  color: var(--money);
  font-weight: 700;
}

.s-calc__result .btn { align-self: stretch; text-align: center; }
.s-calc__note {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 12px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .s-calc__grid { grid-template-columns: 1fr; padding: var(--space-5); }
  .s-calc__types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-calc__types > .s-calc__type:nth-child(7) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
  .s-calc__result { padding: var(--space-5); }
}
@media (max-width: 480px) {
  .s-calc__types { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .s-calc__types > .s-calc__type:nth-child(7) { grid-column: auto; width: 100%; }
}