/* Page-scoped styles for the EKR rendszerhasználati díj calculator.
   Scope is only the calculator card and the result it injects. Everything else
   on the page (hero, prose sections, FAQ, CTA, advisor card) uses the shared
   blocks and their existing styling, so nothing here duplicates those.

   Kept out of editorial.src.css because every .feecalc-result__* class only ever
   appears in JS-injected markup, which PurgeCSS cannot see. Mirrors the
   deadline-calculator and value-thresholds card aesthetic: cream section, white
   card, cobalt top rule, mono eyebrow, hairline rules. */

.feecalc-section {
  background: var(--color-cream);
  padding: 72px 0 80px;
}
.feecalc-section .section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 2rem;
}
/* Without this the global `h2 { font-size: 2.5rem }` and `h2, h3 { color:
   #1e40af }` in main.css win, and the heading renders as bold blue sans-serif
   instead of the editorial serif the sibling tool pages use. */
.feecalc-section .section-header h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  line-height: 1.1;
  color: var(--color-ink);
  margin-bottom: 1rem;
}
.feecalc-section .section-header p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.72);
  max-width: 60ch;
  margin: 0 auto;
}

.feecalc-card {
  background: #ffffff;
  border: 1px solid var(--color-rule);
  border-top: 3px solid var(--color-cobalt);
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.75rem 1.75rem;
}

.feecalc-form__group {
  margin-bottom: 1.25rem;
}
.feecalc-form__group:last-child {
  margin-bottom: 0;
}
.feecalc-form__hint {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(15, 23, 42, 0.62);
  margin: 0.45rem 0 0;
}
.feecalc-card .form-label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono, monospace);
  color: rgba(15, 23, 42, 0.68);
  margin-bottom: 0.4rem;
}
.feecalc-card .form-input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-ink);
  background: #ffffff;
  border: 1px solid var(--color-rule);
  border-radius: 0;
}
.feecalc-card .form-input:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 1px;
}

/* Quote-shaped note between the form and the result. Borrows the pull-quote
   vocabulary from editorial.src.css (cobalt left rule, mono uppercase eyebrow,
   display serif body) so it reads as an aside rather than as part of the
   answer. Scoped here because the calculator card is not .blog-content, so the
   editorial rules do not reach it. */
.feecalc-note {
  margin: 1.5rem 0 0;
  padding: 0.1rem 0 0.1rem 1.25rem;
  border-left: 2px solid var(--color-cobalt);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.feecalc-note__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-cobalt);
  margin: 0;
}
.feecalc-note__body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--color-ink);
  font-variation-settings: "opsz" 32;
}
.feecalc-note__body p {
  margin: 0;
}
/* The inline link would otherwise inherit the italic serif and disappear into
   the quote. */
.feecalc-note__body a {
  font-style: normal;
  color: var(--color-cobalt);
}

.feecalc-result:empty {
  display: none;
}

.feecalc-result__card {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-rule);
}
.feecalc-result__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.6);
  margin: 0 0 0.35rem;
}
/* The gross figure, because that is the number actually transferred. The decree
   states only the net, which is why every stale third-party page quotes 40 000
   and every authority that copies them underpays. */
.feecalc-result__amount {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-cobalt);
  margin: 0 0 0.4rem;
}
.feecalc-result__breakdown {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0 0 1rem;
}

.feecalc-result__rows {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border-top: 1px solid var(--color-rule);
}
.feecalc-result__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-rule);
}
.feecalc-result__key {
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.6);
  flex: 0 0 auto;
}
.feecalc-result__value {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-ink);
  text-align: right;
}

.feecalc-result__note {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.78);
  margin: 0 0 0.9rem;
}
.feecalc-result__disclaimer {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.58);
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-rule);
}

.feecalc-footnote {
  max-width: 760px;
  margin: 1.25rem auto 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.62);
}

@media (max-width: 600px) {
  .feecalc-card {
    padding: 1.5rem 1.15rem 1.25rem;
  }
  /* The label/value pair does not survive a 320px viewport side by side, and the
     value is the half that matters. */
  .feecalc-result__row {
    flex-direction: column;
    gap: 0.2rem;
  }
  .feecalc-result__value {
    text-align: left;
  }
}