/* Érték-kalkulátor (/value-calculator és a /pricing alja), 2026-11-05.
   A csúszkák a css/pricing.css .price-field komponensét használják. */
.vc {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-fluid-md, 40px);
  align-items: start;
  max-width: var(--span-10, 856px);
  margin: 0 auto;
  padding: var(--space-fluid-sm, 32px);
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-32);
  text-align: left;
}
.vc__group { margin: 0 0 var(--spacing-8); font-size: var(--typo-small-size); font-weight: 700; color: var(--text-primary); }
.vc__group:not(:first-child) { margin-top: var(--spacing-24); }
.vc__inputs .price-field { margin-bottom: var(--spacing-16); }
.vc__result {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding: var(--spacing-24);
  background: var(--brand-primary-subtle);
  border-radius: var(--radius-24);
}
.vc__caption { margin: 0; font-size: var(--typo-small-size); font-weight: 700; color: var(--text-neutral); }
.vc__net { margin: 0; font-size: 44px; line-height: 1.05; font-weight: 800; color: var(--brand-primary); }
.vc__net.is-negative { color: var(--text-primary); }
.vc__plan { margin: 0; font-size: var(--typo-small-size); color: var(--text-neutral); }
.vc__details { border-top: 1px solid var(--color-white-a20, #ffffff33); }
.vc__details summary {
  cursor: pointer;
  padding: var(--spacing-12) 0;
  font-size: var(--typo-small-size);
  font-weight: 700;
  color: var(--text-link);
}
.vc__rows { margin: 0; display: grid; gap: var(--spacing-8); font-size: var(--typo-small-size); }
.vc__row { display: flex; justify-content: space-between; gap: var(--spacing-16); }
.vc__row dt { color: var(--text-neutral); }
.vc__row dd { margin: 0; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.vc__row--sub dt { padding-left: var(--spacing-12); }
.vc__row--total { padding-top: var(--spacing-8); border-top: 1px solid var(--border-alt); }
.vc__row--total dt, .vc__row--total dd { font-weight: 800; color: var(--text-primary); }
.vc__cta { align-self: stretch; justify-content: center; text-align: center; }
.vc__foot { margin: 0; font-size: var(--typo-caption-size); line-height: 1.5; color: var(--text-secondary); }

@media (max-width: 860px) {
  .vc { grid-template-columns: 1fr; padding: var(--spacing-24) var(--spacing-16); }
  .vc__result { position: static; }
}