/* ============================================================
   FPLMan redesign — billing pages (pricing + checkout result)
   Layout uses the canonical .center-page and .btn (.btn--fill / .btn--outline)
   primitives from redesign.css; this file only adds the plan card
   and the success/cancel result card.
   ============================================================ */

.bill-inner{width:100%;max-width:480px;}
.bill-head{text-align:center;margin:0 0 28px;}
.bill-title{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px;line-height:1.1;}
.bill-sub{font-size:14.5px;color:var(--text-2);margin:0;line-height:1.5;}

/* ============ pricing plan card ============ */
.plan{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 24px;
}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.plan-name{font-size:18px;font-weight:800;letter-spacing:-.01em;}
.plan-badge{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-deep);background:var(--green-tint);border-radius:6px;padding:3px 8px;
}
.plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:22px;}
.plan-price .amt{font-family:var(--mono);font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--text);}
.plan-price .per{font-size:13px;color:var(--text-3);font-weight:600;}

.plan-features{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:12px;}
.plan-features li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-2);line-height:1.4;}
.plan-features li svg{flex-shrink:0;color:var(--green);margin-top:1px;}

.plan-status{
  display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--green-deep);
  background:var(--green-tint);border:1px solid var(--green-tint-2);border-radius:var(--radius-sm);
  padding:11px 14px;margin-bottom:14px;
}
.plan-status svg{flex-shrink:0;}

/* ============ checkout result (success / cancel) ============ */
.result-card{
  width:100%;max-width:460px;text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:36px 28px;
}
.result-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;}
.result-icon.ok{background:var(--green-tint);color:var(--green-deep);}
.result-icon.neutral{background:var(--surface-3);color:var(--text-3);}
.result-title{font-size:23px;font-weight:800;letter-spacing:-.02em;margin:0 0 9px;}
.result-copy{font-size:14.5px;color:var(--text-2);line-height:1.55;margin:0 auto 24px;max-width:34ch;}
.result-card .btn--full + .btn--full{margin-top:10px;}

@media(max-width:760px){
  .bill-title{font-size:24px;}
  .plan,.result-card{border-radius:var(--radius-md);}
}