/* Shared styles for pricing + billing pages (same look as the dashboard) */

:root{--bg:#020712;--panel:#071525;--cyan:#00d8ff;--pink:#ff176b;--text:#f7fbff;--muted:#9fb5c7;--line:rgba(0,216,255,.26);--max:1220px}
*{box-sizing:border-box}
body{margin:0;color:var(--text);font-family:Arial,Helvetica,sans-serif;background:radial-gradient(circle at 80% 15%,rgba(0,216,255,.12),transparent 25%),radial-gradient(circle at 10% 70%,rgba(255,23,107,.09),transparent 23%),linear-gradient(180deg,#01050d,#06111e 55%,#020711);min-height:100vh}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--max),92%);margin:auto}
.topbar{position:sticky;top:0;z-index:10;background:rgba(2,7,18,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-weight:900;font-style:italic;font-size:24px}
.brand span{color:var(--cyan)}
.navlinks{display:flex;gap:9px;flex-wrap:wrap}
.navlinks a{padding:12px 14px;border:1px solid transparent;font-size:12px;font-weight:900;text-transform:uppercase}
.navlinks a:hover,.navlinks .active{border-color:var(--cyan);background:rgba(0,216,255,.08)}
.hero{text-align:center;padding:70px 0 35px}
.kicker{color:var(--pink);font-weight:900;letter-spacing:3px;text-transform:uppercase;font-size:12px}
.hero h1{font-size:clamp(44px,6vw,78px);font-style:italic;text-transform:uppercase;margin:10px 0}
.hero h1 span{color:var(--cyan)}
.hero p{max-width:780px;margin:0 auto;color:var(--muted);font-size:19px;line-height:1.55}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:30px 0 70px}
.card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(7,21,37,.96),rgba(3,11,21,.95));padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative}
.card.featured{border-color:var(--cyan);box-shadow:0 0 35px rgba(0,216,255,.13)}
.tag{color:var(--pink);font-size:11px;font-weight:900;letter-spacing:2px;text-transform:uppercase}
.card h2{font-size:28px;text-transform:uppercase;font-style:italic;margin:10px 0}
.price{font-size:40px;font-weight:900;color:var(--cyan);margin:15px 0}
.price small{font-size:13px;color:var(--muted)}
.card p,.card li{color:var(--muted);line-height:1.5}
.card ul{padding-left:20px;min-height:145px}
.btn{display:inline-flex;justify-content:center;width:100%;padding:15px;border:1px solid var(--cyan);background:linear-gradient(90deg,var(--cyan),#7befff);color:#03101a;font-weight:900;text-transform:uppercase;cursor:pointer}
.btn.secondary{background:rgba(0,216,255,.05);color:white}
.form-shell{max-width:720px;margin:35px auto 80px;border:1px solid var(--line);background:rgba(7,21,37,.96);padding:34px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field.full{grid-column:1/-1}
.field label{display:block;font-size:12px;font-weight:900;text-transform:uppercase;margin-bottom:7px}
.field input,.field select{width:100%;padding:14px;background:#020914;border:1px solid var(--line);color:white}
.notice{padding:14px;border-left:3px solid var(--cyan);background:rgba(0,216,255,.06);color:var(--muted);margin:18px 0}
.dash{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;padding:35px 0 70px}
.dash .card{min-height:220px}
.status{display:inline-block;padding:6px 9px;border:1px solid rgba(140,255,56,.4);color:#8cff38;font-size:11px;font-weight:900;text-transform:uppercase}
.actions{display:flex;gap:10px;margin-top:20px}
.actions .btn{width:auto}
.table{width:100%;border-collapse:collapse;margin-top:20px}
.table th,.table td{padding:14px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.table th{color:var(--cyan);font-size:12px;text-transform:uppercase}
footer{border-top:1px solid var(--line);padding:26px 0;color:#72899d;font-size:12px}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:850px){.grid,.dash{grid-template-columns:1fr}
.fields{grid-template-columns:1fr}
.nav{align-items:flex-start;flex-direction:column;padding:12px 0}
}

.notice.pending{margin-top:0;border-left-color:#ffd166}
.status.wait{border-color:rgba(255,209,102,.45);color:#ffd166}
.status.off{border-color:rgba(159,181,199,.35);color:#9fb5c7}
.pwform{margin-top:18px}
.msg{min-height:18px;margin-top:10px;font-size:13px;color:var(--cyan)}
button.btn{font-family:inherit;font-size:inherit}


/* ---------- pricing + billing ---------- */
button.btn{font-family:inherit;font-size:inherit}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.zar{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:4px}
.price small.unit{font-size:13px;color:var(--muted)}
.card ul.ticks{list-style:none;padding:0;min-height:0}
.card ul.ticks li{padding:6px 0 6px 22px;position:relative}
.card ul.ticks li:before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:900}
.section-title{font-size:30px;font-style:italic;text-transform:uppercase;margin:50px 0 6px}
.section-title span{color:var(--cyan)}
.section-sub{color:var(--muted);margin:0 0 22px;line-height:1.55}
.calc{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(7,21,37,.96),rgba(3,11,21,.95));padding:26px}
.calc .inputs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-content:start}
.calc label{display:block;font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;margin-bottom:7px;color:#dbeaf5}
.calc input,.calc select{width:100%;padding:12px;background:#020914;border:1px solid var(--line);color:#fff;font-size:15px}
.calc .presets{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.chipbtn{padding:8px 12px;border:1px solid rgba(0,216,255,.35);background:rgba(0,216,255,.05);color:#dbeaf5;font-size:11px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;cursor:pointer;font-family:inherit}
.chipbtn:hover,.chipbtn.on{background:rgba(0,216,255,.16);border-color:var(--cyan);color:#fff}
.result{border-left:1px solid var(--line);padding-left:18px}
.result .big{font-size:42px;font-weight:900;font-style:italic;color:var(--cyan)}
.result .row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);color:var(--muted);font-size:14px}
.result .row b{color:#fff}
.result .best{margin-top:12px;padding:12px;border-left:3px solid #8cff38;background:rgba(140,255,56,.06);color:#dbeaf5;font-size:14px}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:70px}
.faq div{border:1px solid rgba(0,216,255,.15);background:rgba(2,9,20,.6);padding:18px}
.faq h3{margin:0 0 8px;font-size:15px}
.faq p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:30px}
.kpi{border:1px solid var(--line);background:rgba(7,21,37,.96);padding:18px}
.kpi span{display:block;color:#71899c;font-size:10px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:8px}
.kpi strong{font-size:28px;font-style:italic}
.kpi small{display:block;color:var(--muted);margin-top:6px;font-size:12px}
.kpi.warn{border-color:rgba(255,209,102,.5)}
.kpi.bad{border-color:rgba(255,77,115,.6)}
.meter{height:8px;background:#020914;border:1px solid rgba(0,216,255,.2);margin-top:10px}
.meter i{display:block;height:100%;background:#1e98bd}
.panel{border:1px solid var(--line);background:rgba(7,21,37,.96);padding:24px;margin-top:18px}
.panel h2{margin:0 0 6px;font-style:italic;text-transform:uppercase;font-size:24px}
.panel .sub{color:var(--muted);margin:0 0 16px;font-size:14px;line-height:1.5}
.choices{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.choice{min-width:110px;padding:14px 16px;border:1px solid rgba(0,216,255,.3);background:#020914;color:#fff;cursor:pointer;text-align:left;font-family:inherit}
.choice b{display:block;font-size:20px;font-style:italic}
.choice small{color:var(--muted);font-size:11px}
.choice.on{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset;background:rgba(0,216,255,.08)}
.paybox{max-width:420px;min-height:50px}
.paynote{color:#71879a;font-size:12px;margin-top:10px;line-height:1.5}
.alert{padding:14px 16px;margin-top:18px;border-left:3px solid #ffd166;background:rgba(255,209,102,.07);color:#f1e3b8;font-size:14px;line-height:1.5}
.alert.bad{border-left-color:#ff4d73;background:rgba(255,77,115,.08);color:#ffd1dc}
.alert.good{border-left-color:#8cff38;background:rgba(140,255,56,.06);color:#dcf7c8}
.chart{position:relative;height:170px;display:flex;align-items:flex-end;gap:2px;padding:10px 0 0;border-bottom:1px solid rgba(255,255,255,.12)}
.chart .bar{flex:1;display:flex;align-items:flex-end;justify-content:center;height:100%;cursor:default;position:relative}
.chart .bar i{display:block;width:100%;max-width:24px;background:#1e98bd;border-radius:4px 4px 0 0;min-height:0}
.chart .bar:hover i{background:#29b4dc}
.chart-axis{display:flex;justify-content:space-between;color:#71879a;font-size:11px;margin-top:6px}
.chart-y{position:absolute;left:0;top:0;color:#71879a;font-size:11px}
.tip{position:fixed;pointer-events:none;background:#020914;border:1px solid var(--cyan);padding:8px 10px;font-size:12px;color:#dbeaf5;z-index:50;white-space:nowrap}
.tip b{color:#fff}
.tx{width:100%;border-collapse:collapse;font-size:13px}
.tx th{color:var(--cyan);font-size:11px;text-transform:uppercase;letter-spacing:1px;text-align:left;padding:10px;border-bottom:1px solid var(--line)}
.tx td{padding:10px;border-bottom:1px solid rgba(255,255,255,.06);color:#cfe0ec}
.tx td.num{text-align:right;font-variant-numeric:tabular-nums}
.tx td.pos{color:#8cff38}.tx td.neg{color:#ff829d}
@media(max-width:850px){.calc{grid-template-columns:1fr}.calc .inputs{grid-template-columns:1fr 1fr}.result{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}.faq{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}}