/* Meta cost calculator (js/meta-calc.js) — public /pricing page and the portal's "WhatsApp costs". Xpert Group FZE-LLC.
   Works with the site tokens (--green, --line …) and the portal tokens (--wk-*), with plain fallbacks. */
.meta-calc { --mc-green: var(--green, var(--wk-green, #2a9245)); --mc-deep: var(--green-900, #133f22); --mc-line: var(--line, var(--wk-border, #e3ece4)); --mc-mint: var(--mint, #eefde9); --mc-muted: var(--text-3, #6b7a70); --mc-ink: var(--ink, var(--wk-ink, #1d2a22)); color: var(--mc-ink); }
.mc-controls { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; margin-bottom: 18px; }
.mc-field { display: grid; gap: 6px; font-size: 13px; color: var(--mc-muted); font-weight: 500; }
.mc-field select { min-width: 220px; height: 42px; padding: 0 12px; border: 1px solid var(--mc-line); border-radius: 12px; background: #fff; font: inherit; font-size: 14.5px; color: var(--mc-ink); }
.meta-calc .seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--mc-mint); border: 1px solid var(--mc-line); border-radius: 12px; }
.meta-calc .seg button { border: 0; background: none; padding: 7px 16px; border-radius: 9px; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--mc-muted); cursor: pointer; }
.meta-calc .seg button[aria-pressed="true"] { background: #fff; color: var(--mc-green); box-shadow: 0 1px 3px rgba(19, 63, 34, .15); }
.mc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.mc-sliders { display: grid; gap: 14px; }
.mc-row { padding: 14px 16px; border: 1px solid var(--mc-line); border-radius: 14px; background: #fff; }
.mc-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mc-row-head label { display: grid; gap: 1px; cursor: pointer; }
.mc-row-head b { font-size: 15px; color: var(--mc-ink); }
.mc-row-head small { font-size: 12.5px; color: var(--mc-muted); }
.mc-num { width: 120px; height: 36px; padding: 0 10px; border: 1px solid var(--mc-line); border-radius: 10px; font: inherit; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.mc-num:focus, .mc-field select:focus { outline: 2px solid var(--mc-green); outline-offset: 1px; }
.mc-range { --fill: 0%; width: 100%; height: 26px; margin: 10px 0 2px; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.mc-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--mc-green) var(--fill), #dfe9e1 var(--fill)); }
.mc-range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--mc-green) var(--fill), #dfe9e1 var(--fill)); }
.mc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--mc-green); box-shadow: 0 2px 6px rgba(19, 63, 34, .25); }
.mc-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--mc-green); box-shadow: 0 2px 6px rgba(19, 63, 34, .25); }
.mc-range:focus-visible { outline: 2px solid var(--mc-green); outline-offset: 2px; border-radius: 8px; }
.mc-line { margin: 0; font-size: 13px; color: var(--mc-muted); font-variant-numeric: tabular-nums; }
.mc-line b { color: var(--mc-ink); }
.mc-free { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(150, 201, 62, .2); color: var(--mc-deep); font-size: 11.5px; font-weight: 600; }
.mc-result { position: sticky; top: 92px; display: grid; gap: 4px; padding: 22px; border-radius: 18px; color: #fff; background: radial-gradient(400px 200px at 100% 0, rgba(150, 201, 62, .35), transparent 60%), linear-gradient(150deg, #133f22, #1f6f35); box-shadow: 0 14px 30px rgba(19, 63, 34, .22); }
.mc-label { font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.mc-result strong { font-size: 34px; line-height: 1.15; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.mc-per { font-size: 13px; color: rgba(255, 255, 255, .75); }
.mc-break { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .18); display: grid; gap: 6px; }
.mc-break div { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.mc-break dt { color: rgba(255, 255, 255, .8); } .mc-break dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); }
@media (max-width: 860px) { .mc-grid { grid-template-columns: minmax(0, 1fr); } .mc-result { position: static; } }
@media (max-width: 480px) { .mc-num { width: 96px; } .mc-field select { min-width: 0; width: 100%; } .mc-controls > * { flex: 1 1 100%; } }

/* Portal page "WhatsApp costs" (js/meta-charges.js) */
.mch { position: absolute; inset: 0; overflow: auto; background: var(--wk-bg, #f4faf5); font-family: var(--wk-font, Poppins, sans-serif); }
.mch.off { visibility: hidden; pointer-events: none; }
.mch-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 24px 48px; display: grid; gap: 20px; }
.mch-card { background: #fff; border: 1px solid var(--wk-border, #e7eee8); border-radius: 20px; padding: 22px; box-shadow: 0 1px 2px rgba(31, 60, 38, .04); }
.mch-card h2 { margin: 0 0 4px; font-size: 19px; }
.mch-sub { margin: 0 0 16px; color: #6b7a70; font-size: 13.5px; }
.mch-card .mch-sub:last-child { margin: 14px 0 0; }
.mch .table-wrap { overflow-x: auto; border: 1px solid var(--wk-border, #e7eee8); border-radius: 14px; }
.mch .rate-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.mch .rate-table caption { caption-side: top; text-align: left; padding: 12px 16px 8px; font-weight: 600; }
.mch .rate-table caption small { display: block; font-weight: 400; color: #6b7a70; font-size: 12.5px; }
.mch .rate-table th, .mch .rate-table td { padding: 10px 16px; border-top: 1px solid var(--wk-border, #e7eee8); text-align: left; }
.mch .rate-table thead th { background: #f4faf5; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #6b7a70; }
.mch .rate-table .num { text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .mch-wrap { padding: 16px 12px 32px; } .mch-card { padding: 16px 14px; } }