/* /assets/css/pricing-billing-premium-v24.css
   WebNigerians Premium Membership + Billing V24
*/

:root{
  --pb-blue:#0867d1;
  --pb-blue2:#0c7ff0;
  --pb-navy:#071d3d;
  --pb-ink:#142a45;
  --pb-copy:#5f7085;
  --pb-line:#d9e5f1;
  --pb-soft:#f4f8fd;
  --pb-soft2:#edf5ff;
  --pb-green:#07986b;
  --pb-green-soft:#eafaf4;
  --pb-gold:#f5b91e;
  --pb-gold-soft:#fff8df;
  --pb-red:#c83b45;
  --pb-red-soft:#fff0f1;
  --pb-shadow:0 10px 32px rgba(7,42,85,.06);
  --pb-shadow-lg:0 22px 56px rgba(7,42,85,.10);
}

body{background:#f4f7fb!important;color:var(--pb-ink)}

.pbWrap{
  width:min(1280px,calc(100% - 28px));
  margin:0 auto;
  padding:22px 0 56px;
}

.pbHero{
  position:relative;
  overflow:hidden;
  min-height:285px;
  padding:36px;
  border-radius:26px;
  background:
    radial-gradient(circle at 82% 18%,rgba(31,169,255,.35),transparent 27%),
    radial-gradient(circle at 92% 80%,rgba(245,185,30,.20),transparent 25%),
    linear-gradient(135deg,#061b3a,#0759bd 65%,#0889e8);
  color:#fff;
  box-shadow:var(--pb-shadow-lg);
}
.pbHero:after{
  content:"";
  position:absolute;right:-70px;bottom:-110px;
  width:330px;height:330px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
}
.pbHeroInner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:28px;align-items:center;
}
.pbEyebrow{
  color:#b9dcff;
  font-size:11px;font-weight:950;letter-spacing:.13em;text-transform:uppercase
}
.pbHero h1{
  margin:10px 0 0;max-width:760px;
  font-size:clamp(34px,5vw,58px);line-height:.98;letter-spacing:-2.2px
}
.pbHero p{
  margin:16px 0 0;max-width:720px;
  color:rgba(255,255,255,.82);font-size:15px;line-height:1.65;font-weight:650
}
.pbTrust{
  display:flex;gap:9px;flex-wrap:wrap;margin-top:20px
}
.pbTrust span{
  min-height:34px;padding:0 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.09);
  display:inline-flex;align-items:center;gap:7px;
  font-size:10px;font-weight:900
}
.pbHeroSide{
  padding:20px;border:1px solid rgba(255,255,255,.18);border-radius:20px;
  background:rgba(255,255,255,.10);backdrop-filter:blur(10px)
}
.pbHeroSide b{display:block;font-size:19px;line-height:1.2}
.pbHeroSide p{font-size:11px;margin-top:8px}
.pbHeroSide .pbMiniLink{margin-top:14px}

.pbToggleBar{
  margin:-24px auto 0;position:relative;z-index:5;
  width:min(760px,calc(100% - 30px));
  padding:12px 14px;border:1px solid var(--pb-line);border-radius:18px;
  background:#fff;box-shadow:var(--pb-shadow);
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap
}
.pbSeg{
  display:flex;gap:5px;padding:5px;border-radius:999px;background:#eef3f8
}
.pbSeg button{
  border:0;background:transparent;padding:9px 14px;border-radius:999px;
  color:#65768b;font-size:11px;font-weight:900;cursor:pointer
}
.pbSeg button.active{
  background:#fff;color:var(--pb-navy);box-shadow:0 4px 13px rgba(7,42,85,.08)
}
.pbSave{
  padding:7px 10px;border-radius:999px;border:1px solid #bfe9d8;
  background:var(--pb-green-soft);color:var(--pb-green);
  font-size:10px;font-weight:900
}
.pbFine{color:#75859a;font-size:9.5px;font-weight:760}

.pbSection{margin-top:24px}
.pbSectionHead{
  display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:13px
}
.pbSectionHead h2{margin:0;color:var(--pb-navy);font-size:26px;letter-spacing:-.5px}
.pbSectionHead p{margin:5px 0 0;color:var(--pb-copy);font-size:11px;line-height:1.55}
.pbSectionHead a{color:var(--pb-blue);font-size:10px;font-weight:900;text-decoration:none}

.pbPlanGrid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch
}
.pbPlan{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:570px;
  border:1px solid var(--pb-line);border-radius:20px;background:#fff;
  box-shadow:0 7px 24px rgba(7,42,85,.045);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.pbPlan:hover{transform:translateY(-3px);box-shadow:var(--pb-shadow);border-color:#bdd3e9}
.pbPlan.featured{border:2px solid #7db8f0;box-shadow:0 16px 38px rgba(8,103,209,.12)}
.pbPlan.current:before{
  content:"CURRENT PLAN";position:absolute;top:0;right:0;
  padding:7px 10px;border-radius:0 18px 0 12px;
  background:var(--pb-green);color:#fff;font-size:8px;font-weight:950;letter-spacing:.08em
}
.pbPlanTop{padding:18px 17px 15px;background:linear-gradient(180deg,#f5faff,#fff 82%);border-bottom:1px solid #e5edf5}
.pbBadges{display:flex;gap:6px;flex-wrap:wrap;min-height:27px}
.pbBadge{
  display:inline-flex;align-items:center;min-height:25px;padding:0 8px;border-radius:999px;
  border:1px solid #d8e4f0;background:#fff;color:#65768a;font-size:8.5px;font-weight:900
}
.pbBadge.blue{border-color:#c4dcf7;background:#edf5ff;color:#0867d1}
.pbBadge.green{border-color:#bde8d7;background:#eafaf4;color:#087d5b}
.pbBadge.gold{border-color:#f2dda0;background:#fff8df;color:#906400}
.pbPlanName{margin-top:12px;color:var(--pb-navy);font-size:23px;font-weight:950}
.pbBestFor{margin-top:4px;color:#6b7d92;font-size:10px;line-height:1.4;min-height:28px}
.pbPriceLine{margin-top:17px}
.pbPriceMain{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.pbPrice{font-size:36px;line-height:1;font-weight:950;letter-spacing:-1.2px;color:#071d3d}
.pbPer{font-size:10px;color:#77879a;font-weight:900}
.pbAnnualNote{margin-top:6px;color:#65768b;font-size:9.5px;font-weight:780}
.pbQuotaGrid{
  margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:7px
}
.pbQuota{
  padding:10px;border:1px solid #e0e9f2;border-radius:12px;background:#f7faff
}
.pbQuota b{display:block;color:#112a49;font-size:13px}
.pbQuota span{display:block;margin-top:3px;color:#7a899c;font-size:8px;font-weight:850}

.pbPlanBody{padding:16px 17px;flex:1}
.pbPlanBody h4{margin:0 0 8px;color:#314a66;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.pbFeatures{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pbFeatures li{
  position:relative;padding-left:21px;color:#314a66;font-size:10.5px;line-height:1.42;font-weight:780
}
.pbFeatures li:before{
  content:"✓";position:absolute;left:0;top:-1px;
  width:15px;height:15px;border-radius:50%;display:grid;place-items:center;
  background:#e9f8f2;color:#07825d;font-size:8px;font-weight:950
}
.pbMore{
  margin-top:11px;color:#0867d1;text-decoration:none;font-size:9.5px;font-weight:900
}
.pbPlanFoot{padding:14px 17px 17px;border-top:1px solid #e5edf5;background:#fff}
.pbBtn{
  min-height:42px;padding:0 15px;border:1px solid #d4e0ec;border-radius:12px;
  background:#fff;color:#17324f;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:950;cursor:pointer
}
.pbBtn.primary{border-color:#086bd8;background:#086bd8;color:#fff}
.pbBtn.gold{border-color:#efb71d;background:#f5bd29;color:#0b2b53}
.pbBtn.green{border-color:#07986b;background:#07986b;color:#fff}
.pbBtn.full{width:100%}
.pbBtn:hover{filter:brightness(.985)}
.pbPlanFoot small{display:block;margin-top:8px;color:#8290a1;font-size:8.5px;line-height:1.4}

.pbRecommend{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px
}
.pbRec{
  padding:16px;border:1px solid var(--pb-line);border-radius:17px;background:#fff
}
.pbRec b{display:block;color:#0b2648;font-size:14px}
.pbRec p{margin:6px 0 0;color:#6e7f93;font-size:10px;line-height:1.5}
.pbRec a{display:inline-flex;margin-top:10px;color:#0867d1;text-decoration:none;font-size:9.5px;font-weight:900}

.pbCompare{
  border:1px solid var(--pb-line);border-radius:20px;background:#fff;overflow:hidden;
  box-shadow:0 6px 22px rgba(7,42,85,.04)
}
.pbCompare summary{
  list-style:none;padding:17px 18px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:15px;
  color:#0c284e;font-size:16px;font-weight:950
}
.pbCompare summary::-webkit-details-marker{display:none}
.pbCompare summary span{color:#7b8a9d;font-size:9.5px;font-weight:800}
.pbCmpScroll{overflow:auto;border-top:1px solid #e4edf5}
.pbCmp{width:100%;border-collapse:collapse;min-width:840px}
.pbCmp th,.pbCmp td{padding:11px 12px;border-bottom:1px solid #e8eef5;text-align:center;font-size:9.5px}
.pbCmp th{background:#f7faff;color:#6c7d91;font-size:8px;text-transform:uppercase;letter-spacing:.07em}
.pbCmp th:first-child,.pbCmp td:first-child{text-align:left;position:sticky;left:0;background:#fff;z-index:2}
.pbCmp th:first-child{background:#f7faff}
.pbCmp td:first-child{min-width:230px;color:#1b3553;font-weight:900}
.pbYes,.pbNo{
  min-height:27px;padding:0 8px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-size:8.5px;font-weight:900;white-space:nowrap
}
.pbYes{background:#eafaf4;color:#087d5b;border:1px solid #c3eadb}
.pbNo{background:#f3f6f9;color:#8996a5;border:1px solid #e0e7ef}

.pbFaq{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pbFaq details{
  border:1px solid var(--pb-line);border-radius:15px;background:#fff;overflow:hidden
}
.pbFaq summary{padding:14px 15px;cursor:pointer;color:#173451;font-size:10.5px;font-weight:900}
.pbFaq p{margin:0;padding:0 15px 14px;color:#6d7e92;font-size:10px;line-height:1.55}

.pbCtaBand{
  margin-top:20px;padding:22px 24px;border-radius:20px;
  background:linear-gradient(135deg,#071f44,#0866d3);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap
}
.pbCtaBand h3{margin:0;font-size:22px}
.pbCtaBand p{margin:5px 0 0;color:rgba(255,255,255,.78);font-size:10.5px}

/* BILLING */
.pbbOuter{
  width:min(1500px,calc(100% - 28px));
  margin:0 auto;padding:18px 0 54px;
  display:grid;grid-template-columns:245px minmax(0,1fr);gap:18px;align-items:start
}
.pbbLeft{position:sticky;top:82px;align-self:start}
.pbbMain{min-width:0}
.pbbHero{
  padding:24px;border:1px solid #cfe0f0;border-radius:22px;background:#fff;box-shadow:var(--pb-shadow);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap
}
.pbbHero h1{margin:0;color:#071d3d;font-size:31px;letter-spacing:-.7px}
.pbbHero p{margin:6px 0 0;color:#6b7d91;font-size:11px;line-height:1.55}
.pbbHeroActions{display:flex;gap:8px;flex-wrap:wrap}
.pbbGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:16px;margin-top:16px;align-items:start}
.pbbCard{overflow:hidden;border:1px solid var(--pb-line);border-radius:19px;background:#fff;box-shadow:0 7px 24px rgba(7,42,85,.04)}
.pbbHead{padding:15px 16px;border-bottom:1px solid #e5edf5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pbbHead h2,.pbbHead h3{margin:0;color:#0d2a4d;font-size:15px}
.pbbBody{padding:16px}
.pbbStatus{display:flex;gap:7px;flex-wrap:wrap}
.pbbNotice{margin-bottom:13px;padding:11px 12px;border-radius:12px;font-size:9.8px;font-weight:820;line-height:1.45}
.pbbNotice.good{background:#eafaf4;color:#087d5b;border:1px solid #bfe8d8}
.pbbNotice.warn{background:#fff8df;color:#8d6500;border:1px solid #f0dda2}
.pbbNotice.bad{background:#fff0f1;color:#a22d39;border:1px solid #f0c8cc}
.pbbSummary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.pbbSummary>div{padding:12px;border:1px solid #e1eaf3;border-radius:13px;background:#f9fbfe}
.pbbSummary span{display:block;color:#7b8a9d;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.pbbSummary b{display:block;margin-top:7px;color:#0e2948;font-size:12px}
.pbbUsage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.pbbUse{padding:13px;border:1px solid #e1eaf3;border-radius:14px;background:#fff}
.pbbUseTop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pbbUseTop b{color:#173552;font-size:10.5px}
.pbbUseTop span{color:#718196;font-size:9px;font-weight:900}
.pbbUseVal{margin-top:7px;color:#52677e;font-size:9.5px;font-weight:760}
.pbbBar{height:8px;margin-top:9px;border-radius:999px;background:#e8eef5;overflow:hidden}
.pbbBar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#0aa071,#0876db)}
.pbbBar.warn i{background:linear-gradient(90deg,#f0a713,#df7310)}
.pbbBar.danger i{background:linear-gradient(90deg,#d4474f,#f0a713)}
.pbbPlanList{display:grid;gap:9px}
.pbbPlan{
  padding:13px;border:1px solid #dce6f0;border-radius:14px;background:#fff
}
.pbbPlan.current{border-color:#a9dfca;background:#f4fcf8}
.pbbPlanTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pbbPlan h4{margin:0;color:#0b294c;font-size:12px}
.pbbPlanPrice{margin-top:5px;color:#4e647b;font-size:9.5px;font-weight:800}
.pbbPlanMeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pbbChip{padding:5px 7px;border-radius:999px;background:#f2f6fa;border:1px solid #e0e8f0;color:#6f7f92;font-size:8px;font-weight:850}
.pbbPlanActions{margin-top:10px}
.pbbToolWrap{overflow:auto;max-height:420px}
.pbbTable{width:100%;border-collapse:collapse;min-width:600px}
.pbbTable th,.pbbTable td{padding:10px 11px;border-bottom:1px solid #e8eef5;text-align:left;font-size:9px}
.pbbTable th{position:sticky;top:0;background:#f7faff;color:#748398;text-transform:uppercase;letter-spacing:.06em;z-index:1}
.pbbTable td{color:#52677d}
.pbbMono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#173451;font-weight:850}
.pbbSticky{position:sticky;top:82px;display:grid;gap:14px}

@media(max-width:1180px){
  .pbPlanGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pbbGrid{grid-template-columns:1fr}
  .pbbSticky{position:static}
}
@media(max-width:920px){
  .pbHeroInner{grid-template-columns:1fr}
  .pbHeroSide{max-width:520px}
  .pbbOuter{width:min(100% - 20px,1100px);display:block}
  .pbbLeft{display:none}
}
@media(max-width:700px){
  .pbWrap{width:min(100% - 18px,900px)}
  .pbHero{padding:25px 20px;min-height:auto;border-radius:20px}
  .pbPlanGrid{grid-template-columns:1fr}
  .pbRecommend{grid-template-columns:1fr}
  .pbFaq{grid-template-columns:1fr}
  .pbToggleBar{justify-content:flex-start}
  .pbbSummary,.pbbUsage{grid-template-columns:1fr}
}


/* =========================================================
   V24.1 — SINGLE PLAN-CHOICE CTA
   Prevent duplicated/mixed monthly + yearly buttons.
========================================================= */
.pbWrap [hidden],
.pbbOuter [hidden]{
  display:none!important;
}

.pbPlanChoice{
  white-space:normal;
  text-align:center;
  line-height:1.25;
}

.pbBtn.is-disabled{
  opacity:.52!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
  filter:none!important;
}

.pbbFreeNote{
  padding:10px 11px;
  border:1px solid #dce6f0;
  border-radius:11px;
  background:#f7faff;
  color:#6d7e92;
  font-size:8.8px;
  line-height:1.5;
  font-weight:760;
}