/* ─── Cost Calculator Layout ─────────────────────────────── */
.calc-section { padding: 96px 0; background: #ffffff; border-top: 1px solid var(--border); }
.calc-box { max-width: 980px; margin: 0 auto; }

/* ─── Slider Block ───────────────────────────────────────── */
.calc-slider-block {
  background: transparent;
  border: none;
  padding: 0 0 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.calc-slider-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}

.calc-slider-question { font-size: 13.5px; font-weight: 500; color: var(--text-muted); letter-spacing: -0.01em; }

.calc-plays-display {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.calc-plays-display span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 6px;
  letter-spacing: 0;
}

/* ─── Range Input ────────────────────────────────────────── */
.calc-range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--border);
  outline: none;
  cursor: pointer;
  margin-bottom: 12px;
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--red);
  cursor: pointer;
  border: 4px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(225,29,72,0.25), 0 2px 8px rgba(225,29,72,0.30);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.calc-range::-webkit-slider-thumb:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(225,29,72,0.20), 0 4px 12px rgba(225,29,72,0.35);
}

.calc-range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--red); cursor: pointer;
  border: 4px solid #ffffff;
  box-shadow: 0 2px 8px rgba(225,29,72,0.30);
}

.calc-range-ticks {
  position: relative;
  height: 18px;
  margin-top: 8px;
}

.calc-range-ticks span {
  position: absolute;
  font-size: 11px;
  color: var(--text-muted);
  transform: translateX(-50%);
  white-space: nowrap;
}

.calc-range-ticks span:first-child { transform: translateX(0); }
.calc-range-ticks span:last-child  { transform: translateX(-100%); }

/* ─── Result Cards (3-column grid) ───────────────────────── */
.calc-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.calc-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 24px 20px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.calc-card-playrate { border-color: #a7f3d0; background: #f0fdf4; }

.calc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.calc-card-logo { font-size: 13.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
.calc-card-logo.logo-playrate { color: #059669; }

.calc-badge-plan {
  font-size: 10.5px; font-weight: 600; padding: 3px 9px;
  border-radius: var(--radius-full); letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--bg-surface); color: var(--text-muted); border: 1px solid var(--border);
}

.calc-badge-plan.badge-free { background: #d1fae5; color: #059669; border-color: #a7f3d0; }

/* ─── Price ──────────────────────────────────────────────── */
.calc-price {
  font-size: 32px; font-weight: 800; letter-spacing: -0.04em;
  color: var(--text-primary); margin-bottom: 2px;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

.calc-price.price-free { color: #059669; }
.calc-price.price-vturb, .calc-price.price-panda { color: var(--red); }
.calc-price-period { font-size: 11.5px; color: var(--text-muted); margin-bottom: 14px; }

/* ─── Breakdown ──────────────────────────────────────────── */
.calc-breakdown {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
  margin-top: auto;
}

.calc-breakdown-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-secondary);
}

.calc-breakdown-row .row-label { color: var(--text-muted); }
.calc-breakdown-row .row-val { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.calc-breakdown-row .row-val.val-overage { color: var(--red); }
.calc-breakdown-row .row-val.val-zero { color: #059669; }

/* ─── Savings Banner ─────────────────────────────────────── */
.calc-savings-banner {
  margin-top: 16px; padding: 16px 22px;
  background: var(--red-subtle); border: 1px solid var(--red-border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.calc-savings-text { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.calc-savings-amount {
  font-size: 22px; font-weight: 800; color: var(--red);
  letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .calc-results { grid-template-columns: 1fr; }
  .calc-slider-block { padding: 20px 0; }
  .calc-price { font-size: 28px; }
  .calc-savings-banner { flex-direction: column; align-items: flex-start; }
}