/* pricing-calc.css — interactive top-up/bonus calculator for the landing pages.
   A faithful copy of the billing.html витрина (same tiers, steppers, bonus
   math) but purely illustrative: no API, no real purchase — the buy button is
   a CTA to /register.html. Rendered by pricing-calc.js into #pricing-calc.

   Self-contained: everything is scoped under #pricing-calc with its own --pc-*
   vars and a pc- class prefix, so it renders identically on any landing and
   never collides with the landing's own .plan / .pricing-grid styles. */

#pricing-calc{
  --pc-paper:#eeeeec; --pc-surface:#fbfbfa; --pc-surface2:#f3f3f0;
  --pc-ink:#1a1a18; --pc-ink2:#454440; --pc-ink3:#7c7b76;
  --pc-line:#e1e1dd; --pc-line2:#d8d8d3; --pc-fix:#316b48;
  --pc-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  display:grid; grid-template-columns:1fr; gap:18px;
  max-width:880px; margin:0 auto;
}
@media(min-width:760px){#pricing-calc{grid-template-columns:repeat(3,1fr)}}

#pricing-calc *{box-sizing:border-box}

/* Card — receipt grammar: pay → +bonus → balance. */
#pricing-calc .pc-plan{
  background:var(--pc-surface); border:1px solid var(--pc-line2); border-radius:14px;
  padding:42px 28px 32px; display:flex; flex-direction:column; position:relative;
  min-height:360px; box-shadow:0 1px 2px rgba(26,26,24,.04);
  font-family:'IBM Plex Sans',system-ui,sans-serif; color:var(--pc-ink);
}

/* Floating tier badge above the card — dark "Popular", green "Best value". */
#pricing-calc .pc-tag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--pc-ink); color:var(--pc-paper); font-family:var(--pc-mono);
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; white-space:nowrap;
}
#pricing-calc .pc-tag.best{background:var(--pc-fix); color:var(--pc-paper)}

/* Pay figure — the single big number, flanked by contextual steppers. */
#pricing-calc .pc-pay{margin-bottom:16px; text-align:center}
#pricing-calc .pc-pay-cap{font-size:12.5px; color:var(--pc-ink3); margin-bottom:5px}
#pricing-calc .pc-pay-amt{font-family:var(--pc-mono); font-size:40px; font-weight:500; letter-spacing:-.02em; color:var(--pc-ink); line-height:1}

#pricing-calc .pc-amt-row{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:6px}
#pricing-calc .pc-step-btn{
  width:34px; height:34px; flex-shrink:0; border:1px solid var(--pc-line2); border-radius:8px;
  background:var(--pc-surface2); font-family:var(--pc-mono); font-size:18px; line-height:1;
  color:var(--pc-ink2); cursor:pointer; transition:background 120ms,border-color 120ms;
}
#pricing-calc .pc-step-btn:hover{background:var(--pc-line); border-color:var(--pc-ink3)}
#pricing-calc .pc-step-btn.hidden{visibility:hidden; pointer-events:none}

/* Bonus row — the gift, green, boxed so it reads as added value. */
#pricing-calc .pc-bonus-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:10px; background:rgba(49,107,72,.07);
  border:1px solid rgba(49,107,72,.22); margin-bottom:14px;
}
#pricing-calc .pc-b-main{font-family:var(--pc-mono); font-size:15px; font-weight:500; color:var(--pc-fix)}
#pricing-calc .pc-b-pct{font-family:var(--pc-mono); font-size:12px; color:var(--pc-fix); opacity:.85; white-space:nowrap}
#pricing-calc .pc-bonus-row.nobonus{background:var(--pc-surface2); border-color:var(--pc-line2)}
#pricing-calc .pc-bonus-row.nobonus .pc-b-main{color:var(--pc-ink3)}
#pricing-calc .pc-bonus-row.nobonus .pc-b-pct{display:none}

/* Total balance — the result, divider ties it to the math. */
#pricing-calc .pc-total{
  display:flex; align-items:baseline; gap:7px; padding-top:14px;
  border-top:1px solid var(--pc-line); margin-bottom:22px;
}
#pricing-calc .pc-t-amt{font-family:var(--pc-mono); font-size:20px; font-weight:500; color:var(--pc-ink)}
#pricing-calc .pc-t-cap{font-size:12.5px; color:var(--pc-ink3)}

/* CTA — mirrors billing's Pay button; here it's a link to register. */
#pricing-calc .pc-buy-btn{
  margin-top:auto; width:100%; padding:11px 0; border-radius:9px; text-align:center;
  font-size:13.5px; font-weight:500; font-family:inherit; cursor:pointer; text-decoration:none;
  transition:background 120ms,border-color 120ms,color 120ms;
  background:transparent; color:var(--pc-ink); border:1px solid var(--pc-line2);
}
#pricing-calc .pc-buy-btn:hover{background:var(--pc-surface2); border-color:var(--pc-ink3)}
#pricing-calc .pc-buy-btn.primary{background:var(--pc-ink); color:var(--pc-paper); border-color:var(--pc-ink)}
#pricing-calc .pc-buy-btn.primary:hover{background:#000}