/* Hallmark · macrostructure: editorial pricing comparison · tone: restrained LegalEase · anchor hue: navy */
.billing-dashboard {
  --color-ink-soft: var(--app-muted);
  --color-ink: var(--brand-navy);
  --color-muted: var(--app-muted);
  --color-rule: var(--app-border);
  --color-rule-strong: var(--app-border);
  --color-surface: var(--bs-body-bg);
  --color-paper-alt: var(--app-bg);
  --color-accent: var(--brand-gold);
  --color-focus: var(--brand-navy);
  --font-body: 'Inter', system-ui, sans-serif;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --text-sm: .875rem;
  --radius-panel: .5rem;
}
.pricing-page { padding-block: var(--space-2xl); }
.pricing-heading { max-width: 50rem; }
.pricing-heading h1 { max-width: 18ch; font-size: var(--text-hero); letter-spacing: var(--tracking-hero); line-height: var(--leading-hero); }
.pricing-heading > p { max-width: 66ch; margin-block: var(--space-md); color: var(--color-ink-soft); font-size: var(--text-lead); }
.pricing-section { padding-top: var(--space-2xl); }
.pricing-section-heading { max-width: 70ch; }
.pricing-section-heading h2, .pricing-contact h2 { font-size: var(--text-title); }
.pricing-section-heading p { max-width: 68ch; margin-top: var(--space-sm); color: var(--color-muted); }
.pricing-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-md); margin-top: var(--space-lg); }
.pricing-plan { display: flex; flex-direction: column; min-width: 0; padding: var(--space-lg); border: 1px solid var(--color-rule); border-top: 3px solid var(--color-accent); border-radius: var(--radius-panel); background: var(--color-surface); color: var(--color-ink); }
.pricing-plan h3 { font-size: var(--text-title); }
@supports (grid-template-rows: subgrid) {
  .pricing-subscription-plans > .pricing-plan { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; }
  .pricing-subscription-plans .pricing-limits { display: grid; grid-template-rows: repeat(5, 1fr); }
  .pricing-subscription-plans .pricing-limits > div { align-items: center; }
}
.pricing-subscription-plans > .pricing-plan:nth-child(2) { border-color: #b89c68; background: #fffdf8; }
.pricing-description { margin-block: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.pricing-price { padding-block: var(--space-sm); }
.pricing-price p { margin: 0 0 var(--space-xs); }
.pricing-price strong { font-size: 1.25rem; font-weight: 600; }
.pricing-price-label { display: inline-block; min-width: 3.5rem; font-size: var(--text-sm); color: var(--color-muted); }
.pricing-tax, .pricing-unconfirmed { color: var(--color-muted); font-size: var(--text-sm); }
.pricing-limits { margin-block: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.pricing-limits > div { display: flex; justify-content: space-between; gap: var(--space-sm); border-bottom: 1px solid var(--color-rule); padding-block: var(--space-xs); }
.pricing-limits dt { font-weight: 400; color: var(--color-muted); }
.pricing-limits dd { margin: 0; font-weight: 600; text-align: right; }
.pricing-features { margin: 0 0 var(--space-lg); padding-left: 1.2rem; font-size: var(--text-sm); }
.pricing-features li + li { margin-top: var(--space-xs); }
.pricing-plan > .button, .pricing-plan > form { margin-top: auto; }
.pricing-plan .button, .pricing-plan .btn { white-space: nowrap; width: 100%; }
.pricing-pending { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-lg); padding: var(--space-lg); margin-top: var(--space-lg); border-block: 1px solid var(--color-rule-strong); background: var(--color-paper-alt); }
.pricing-pending h3 { font-size: var(--text-title); }
.pricing-pending p { max-width: 60ch; margin-top: var(--space-sm); color: var(--color-ink-soft); }
.pricing-explainer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); margin-block: var(--space-lg) 0; }
.pricing-explainer > div { padding-block: var(--space-md); border-top: 1px solid var(--color-rule); }
.pricing-explainer dt { font-weight: 600; }
.pricing-explainer h3 { font: 600 1rem/1.5 var(--font-body); }
.pricing-explainer p { margin-top: .5rem; color: var(--color-ink-soft); font-size: var(--text-sm); }
.pricing-limits dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pricing-explainer dd { margin: var(--space-xs) 0 0; color: var(--color-ink-soft); font-size: var(--text-sm); }
.pricing-contact { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-strong); }
.pricing-contact p { max-width: 60ch; margin-top: var(--space-sm); color: var(--color-muted); }
.billing-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.billing-summary h2, .billing-section h2 { font: 600 1.15rem/1.4 var(--font-body); }
.billing-balance { font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; margin: var(--space-sm) 0; }
.billing-balance small { font-size: var(--text-sm); font-weight: 400; }
.billing-breakdown { margin: 0; font-size: var(--text-sm); }
.billing-breakdown > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-xs); border-bottom: 1px solid var(--color-rule); }
.billing-breakdown dt { font-weight: 400; }
.billing-breakdown dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.billing-section { margin-top: var(--space-lg); }
.billing-note { padding: var(--space-sm); background: var(--color-paper-alt); border-left: 3px solid var(--color-rule-strong); font-size: var(--text-sm); }
.billing-dashboard .pricing-plan { padding: var(--space-md); }
.billing-dashboard .pricing-plan h3 { font: 600 1.15rem/1.4 var(--font-body); }
.billing-dashboard .pricing-plans { margin-top: var(--space-sm); }
.billing-dashboard .btn:focus-visible, .pricing-page a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.billing-dashboard button:disabled { cursor: not-allowed; }
.pricing-table-scroll { max-width: 100%; overflow-x: auto; margin-top: 1.5rem; border: 1px solid var(--color-rule); border-radius: .5rem; }
.pricing-table-scroll:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.pricing-table { width: 100%; min-width: 780px; border-collapse: separate; border-spacing: 0; background: var(--color-surface, #fff); font-size: .875rem; font-variant-numeric: tabular-nums; }
.pricing-table caption { padding: .75rem 1rem; text-align: left; color: var(--color-muted); }
.pricing-table th, .pricing-table td { padding: 1rem; border-bottom: 1px solid var(--color-rule); vertical-align: middle; text-align: center; color: var(--color-ink); }
.pricing-table th:first-child { width: 31%; min-width: 210px; text-align: left; font-weight: 500; }
.pricing-table thead th { background: var(--color-paper-alt); font-size: 1.1rem; font-weight: 600; }
.pricing-table small { display: block; margin-top: .3rem; font-size: .75rem; font-weight: 400; color: var(--color-muted); }
.pricing-table .pricing-table-price td { font-size: 1.1rem; font-weight: 600; white-space: nowrap; }
.pricing-table .pricing-table-group th, .pricing-table .pricing-table-group td { background: var(--color-paper-alt); padding-block: .6rem; }
.pricing-table .pricing-table-group th { font-weight: 600; }
.pricing-table tfoot th, .pricing-table tfoot td { border: 0; }
.pricing-check { color: #2e7d32; font-size: 1.25rem; font-weight: 600; }
.pricing-scroll-hint { font-size: .8rem; color: var(--color-muted); }
.pricing-term-trigger { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; margin-inline-start: .15rem; vertical-align: middle; border: 0; border-radius: 50%; color: #725b31; background: transparent; font: 600 .75rem/1 'Inter', sans-serif; cursor: help; }
.pricing-term-trigger[hidden] { display: none; }
.pricing-term-trigger span { display: inline-flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; width: 1rem; height: 1rem; }
.pricing-term-trigger:hover { background: #f0ece3; }
.pricing-term-trigger:focus-visible { outline: 2px solid #293b55; outline-offset: 2px; }
.pricing-term-definition { display: block; font-weight: 400; font-size: .8rem; margin-top: .5rem; }
.pricing-term-definition[popover] { display: none; }
.pricing-term-definition:popover-open { display: block; position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: min(21rem, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow-y: auto; padding: 1rem; border: 1px solid #d9d2c6; border-radius: .5rem; background: #fffdf9; color: #293b55; box-shadow: 0 6px 24px #17233824; font: 400 .875rem/1.6 'Inter', sans-serif; text-align: left; z-index: 10; }
.pricing-addon-note { margin-top: 1.5rem; padding: 1.25rem; border-left: 3px solid #9d7d43; background: var(--color-paper-alt); }
.pricing-addon-note h3 { font: 600 1rem/1.5 var(--font-body); }
.pricing-addon-note p { margin: .5rem 0 0; font-size: .875rem; max-width: 85ch; }
[id^="billing-plan-"], [id^="plan-"] { scroll-margin-top: 7rem; }
.pricing-founding { padding: var(--space-lg); border: 1px solid var(--color-rule); border-top: 3px solid var(--color-accent); border-radius: var(--radius-panel); background: var(--color-paper-alt); }
.pricing-founding .pricing-explainer { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--space-md); }
.pricing-founding > .button { display: inline-flex; }
.pricing-usage { margin-top: var(--space-lg); }
.pricing-usage h3 { font: 600 1rem/1.5 var(--font-body); }
.pricing-usage > p { max-width: 70ch; margin-top: var(--space-xs); color: var(--color-ink-soft); font-size: var(--text-sm); }
.pricing-usage ul { list-style: none; margin: var(--space-md) 0 0; padding: 0; }
.pricing-usage li { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); }
.pricing-usage li span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color-ink-soft); }
@media (max-width: 56rem) { .pricing-founding .pricing-explainer { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .pricing-explainer, .billing-summary { grid-template-columns: 1fr; } .pricing-page { padding-block: var(--space-xl); } }

/* CLNT-4439: pricing-page micro-motion (reveal itself comes from motion.css). */
.pricing-page .pricing-plan { transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.pricing-page .pricing-plans > .pricing-plan:nth-child(2) { transition-delay: 90ms, 90ms, 0s; }
.pricing-page .pricing-plans > .pricing-plan:nth-child(3) { transition-delay: 180ms, 180ms, 0s; }
.pricing-table tbody tr:not(.pricing-table-group) > * { transition: background-color var(--dur-short); }
.pricing-term-definition:popover-open { animation: motion-rise 160ms var(--ease-out) both; }
@media (hover: hover) {
  .pricing-page .pricing-plan.is-revealed:hover, .pricing-page .pricing-plan:not([data-reveal]):hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgb(27 38 59 / .28); transition-delay: 0s; }
  .pricing-table tbody tr:not(.pricing-table-group):hover > * { background-color: color-mix(in srgb, var(--color-paper-alt) 60%, var(--color-surface, #fff)); }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-page .pricing-plan, .pricing-table tbody tr > * { transition: none; }
  .pricing-page .pricing-plan:hover { transform: none; }
  .pricing-term-definition:popover-open { animation: none; }
}

/* CLNT-4524: manual (bank-transfer) invoices; one card per period, never a wide table. */
.billing-periods { list-style: none; margin: 0; padding: 0; }
.billing-period { padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); }
.billing-period-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); }
.billing-period-status { margin-left: auto; font-weight: 600; }
.billing-period-invoiced .billing-period-status { color: var(--color-accent-ink); }
.billing-period-void { color: var(--color-muted); }
.billing-period-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-xs) var(--space-md); margin: var(--space-xs) 0 0; }
.billing-period-meta dt { font-weight: 400; color: var(--color-ink-soft); }
.billing-period-meta dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.billing-period-late .billing-period-status, .billing-due-late { color: var(--bs-danger, #b42318); }
.billing-period-late { border-left: 3px solid var(--bs-danger, #b42318); padding-left: var(--space-sm); }

/* CLNT-4410: public pricing leads with the monthly offer; billing stays unchanged. */
.pricing-page .pricing-heading { max-width: none; }
.pricing-page .pricing-heading h1 { max-width: none; font-size: var(--text-title); }
.pricing-page .pricing-heading > p { margin-block: var(--space-sm); }
.pricing-page .pricing-heading .pricing-beta-note { max-width: 90ch; font-size: var(--text-sm); }
.pricing-jump-links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); margin-top: var(--space-sm); font-size: var(--text-sm); }
.pricing-jump-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.pricing-page .pricing-package-section { padding-top: var(--space-md); }
.pricing-package-section .pricing-section-heading > p { margin-top: var(--space-xs); }
.pricing-package-section .billing-note { margin-top: var(--space-sm); padding-block: var(--space-xs); }
.pricing-page .pricing-subscription-plans { margin-top: var(--space-md); }
.pricing-page .pricing-subscription-plans > .pricing-plan { display: flex; padding: var(--space-md); }
.pricing-page .pricing-plan h3 { font: 600 var(--text-lead)/1.5 var(--font-body); letter-spacing: 0; }
.pricing-page .pricing-price strong { font-size: calc(var(--text-lead) * 1.4); white-space: nowrap; }
.pricing-page .pricing-limits { display: block; }
.pricing-page .pricing-limits dt { min-width: 0; }
.pricing-credit-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.pricing-shared { margin-top: var(--space-md); padding: var(--space-md); border-block: 1px solid var(--color-rule); }
.pricing-shared h2 { font: 600 var(--text-lead)/1.5 var(--font-body); letter-spacing: 0; }
.pricing-shared ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); padding-left: var(--space-sm); margin-bottom: 0; font-size: var(--text-sm); }
.pricing-usage-section { padding-top: var(--space-lg); }
.pricing-usage-section .pricing-usage { margin-top: 0; }
.pricing-usage-section h2 { font-size: var(--text-title); }
.pricing-usage-section .pricing-usage > p { max-width: 90ch; }
.pricing-page .pricing-founding { margin-top: var(--space-xl); }
.pricing-public-comparison .pricing-table th:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface); border-right: 1px solid var(--color-rule); }
.pricing-public-comparison .pricing-table thead th:first-child, .pricing-public-comparison .pricing-table-group th:first-child { background: var(--color-paper-alt); }
.pricing-public-comparison .pricing-table thead th { position: sticky; top: 0; z-index: 2; }
.pricing-public-comparison .pricing-table thead th:first-child { z-index: 3; }
.pricing-public-comparison .pricing-table-scroll { max-height: 38rem; overflow: auto; }
.pricing-public-comparison .pricing-table { min-width: 680px; }
.pricing-faq details { border-bottom: 1px solid var(--color-rule); }
.pricing-faq details:first-of-type { margin-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.pricing-faq summary { min-height: 44px; padding-block: var(--space-sm); cursor: pointer; font-weight: 600; font-size: var(--text-sm); }
.pricing-faq details > p { max-width: 80ch; margin: 0 0 var(--space-md); color: var(--color-ink-soft); font-size: var(--text-sm); }
.pricing-faq .pricing-topups { margin-block: 0 var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pricing-faq .pricing-topups .pricing-price strong { font-size: var(--text-lead); }
#tipikus-fogyasztas, #csomagok, #alapito-partner, #csomag-osszehasonlitas, #gyakori-kerdesek { scroll-margin-top: var(--space-lg); }
@media (max-width: 40rem) {
  .pricing-page .pricing-heading h1 { font-size: var(--text-title); }
  .pricing-page .pricing-plan { padding: var(--space-sm); }
  .pricing-page .pricing-limits dt { max-width: 75%; }
  .pricing-page .pricing-section { padding-top: var(--space-xl); }
  .pricing-page .pricing-package-section { padding-top: var(--space-md); }
  .pricing-page .pricing-founding { padding: var(--space-md); }
  .pricing-public-comparison .pricing-table th:first-child { width: 9rem; min-width: 9rem; max-width: 9rem; }
  .pricing-public-comparison .pricing-table th, .pricing-public-comparison .pricing-table td { padding: var(--space-xs); }
  .pricing-public-comparison .pricing-table .text-link { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
}

.pricing-page { padding-block: var(--space-lg); }
.pricing-package-section .pricing-section-heading h2 { font: 600 var(--text-lead)/1.5 var(--font-body); letter-spacing: 0; }
/* Explanatory tooltips contain no controls and must not cover their own trigger. */
.pricing-page .pricing-term-definition[popover] { pointer-events: none; }

/* Keep technical capacity secondary to the public plan choice. */
.pricing-details { border-block: 1px solid var(--color-rule); }
.pricing-details > summary { min-height: 44px; padding-block: var(--space-sm); cursor: pointer; font-weight: 600; font-size: var(--text-sm); }
.pricing-details > p { color: var(--color-ink-soft); font-size: var(--text-sm); max-width: 80ch; }
.pricing-details .pricing-section { padding-top: var(--space-md); padding-bottom: var(--space-md); }
#csomag-reszletek { scroll-margin-top: var(--space-lg); }

.pricing-lex-policy { margin-top: var(--space-sm); max-width: 90ch; }
/* CLNT-5040: purchase states on the office billing page. */
.billing-dashboard .billing-recommended .badge { background: var(--brand-navy); color: #fff; font-weight: 600; white-space: normal; text-align: left; }
.billing-dashboard .pricing-plan:has([data-plan-recommended]) { border-color: var(--brand-navy); border-top-color: var(--brand-navy); }
.billing-dashboard .billing-pending p { overflow-wrap: anywhere; }
.billing-dashboard .billing-checkout-status p { overflow-wrap: anywhere; }
.billing-dashboard [data-plan-seat-blocked] a, .billing-dashboard [data-plan-profile-needed] a, .billing-dashboard [data-topup-profile-needed] a { font-weight: 600; }
/* Only the recommended plan is featured on the office page; a blocked Profi stays plain. */
.billing-dashboard .pricing-subscription-plans:has([data-plan-recommended]) > .pricing-plan:nth-child(2):not(:has([data-plan-recommended])) { border-color: var(--color-rule); border-top-color: var(--color-accent); background: var(--color-surface); }
/* Inline recovery links are touch targets on phones. */
.billing-dashboard [data-plan-seat-blocked] a, .billing-dashboard [data-plan-profile-hint] a { padding-block: .5rem; margin-block: -.5rem; }
.billing-dashboard .billing-pending .btn { min-height: 44px; }