/* PeppyPOS billing pop-up, banner extras, Settings billing line + Payments card (core/billing.js).
   Brand: black #0E0B0F, orange #FB8B23 (black text on orange), cream #FFF7EE. Loaded after peppy.css. */

/* ---- pop-up ---- */
.modal.bill-pop{width:560px}
.bill-pop .modal-head{padding:22px 24px 10px;align-items:flex-start;background:linear-gradient(180deg,#FFF1E0 0%,#fff 100%)}
.bill-pop .modal-head .modal-title{font-size:21px;line-height:1.25;font-weight:600}
.bill-pop .modal-head .sub{font-size:13.5px;color:var(--body);margin-top:4px}
.bill-pop.is-overdue .modal-head{background:linear-gradient(180deg,#FBE9E9 0%,#fff 100%)}
.bill-pop.is-overdue .modal-head .sub{color:var(--danger);font-weight:700}
.bill-pop .modal-body{padding:4px 24px 20px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.bill-pop .bp-foot{flex:none;gap:10px;padding:14px 24px;background:var(--cream)}
.bill-pop .bp-foot .btn{min-height:44px;padding:0 20px;font-size:14.5px}
.bill-pop .bp-submit:disabled{opacity:.45;cursor:not-allowed}

.bp{display:flex;flex-direction:column;gap:18px;min-width:0}
.bp-plan{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.bp-plan-name{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--black);color:#fff;font-family:var(--display);font-weight:600;font-size:13.5px}
.bp-plan-amt{font-family:var(--display);font-weight:600;font-size:15px;color:var(--black)}
.bp-plan-flag{font-size:12px;font-weight:800;color:var(--danger);background:var(--danger-tint);border-radius:999px;padding:2px 10px}

.bp-sec{display:flex;flex-direction:column;gap:10px;min-width:0}
.bp-label{font-family:var(--display);font-weight:600;font-size:15px;color:var(--black)}

.bp-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bp-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--black);font-family:var(--font);text-align:left;cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s}
.bp-opt:hover{border-color:var(--tan)}
.bp-opt.on{border-color:var(--orange);background:#FFFBF6;box-shadow:0 0 0 3px rgba(251,139,35,.18)}
.bp-opt-t{font-family:var(--display);font-weight:600;font-size:15px}
.bp-opt-a{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.3}
.bp-opt-s{font-size:12.5px;color:var(--body)}
.bp-opt:focus-visible,.bp-tile:focus-visible,.bp-attach:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.bp-adv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bp-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:12px 6px 10px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--black);font-family:var(--font);cursor:pointer;transition:border-color .12s,background .12s}
.bp-tile:hover{border-color:var(--tan)}
.bp-tile.on{border-color:var(--black);background:var(--black);color:#fff}
.bp-tile-m{font-size:12.5px;font-weight:700}
.bp-tile-a{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.3}
.bp-tile-per{font-size:11.5px;color:var(--muted)}
.bp-tile.on .bp-tile-per{color:rgba(255,255,255,.7)}
.bp-tile-tag{font-size:11px;font-weight:800;color:var(--black);background:var(--orange);border-radius:999px;padding:1px 8px;white-space:nowrap}

.bp-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:12px;background:var(--cream);font-size:13.5px;color:var(--body)}
.bp-total span{min-width:0}
.bp-total b{flex:none;font-family:var(--display);font-weight:700;font-size:20px;color:var(--black)}

.bp-payto{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.bp-payto-head{font-size:13.5px;color:var(--body)}
.bp-payto-head b{color:var(--black)}
.bp-payto-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bp-payto-who{min-width:0}
.bp-payto-name{font-weight:700;color:var(--black);overflow-wrap:anywhere}
.bp-payto-num{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--black);overflow-wrap:anywhere}
.bp-copy{flex:none;min-height:36px}
.bp-payto-ask{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--black)}
.bp-payto-ask svg{flex:none;color:var(--orange)}
.bp-payto-note{margin:0;font-size:13.5px;color:var(--body);white-space:pre-line;overflow-wrap:anywhere}
.bp-payto-links{display:flex;flex-wrap:wrap;gap:8px}

.bp-field{display:flex;flex-direction:column;gap:6px}
.bp-field-l{font-size:12.5px;font-weight:700;color:var(--body)}
.bp-ref{height:46px;font-size:15px}
.bp-or{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.bp-or::before,.bp-or::after{content:"";flex:1;height:1px;background:var(--line)}
.bp-file{display:none}
.bp-attach{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;border:1.5px dashed var(--tan);border-radius:12px;background:#FFFBF6;color:var(--black);font-family:var(--font);text-align:left;cursor:pointer}
.bp-attach:hover{border-color:var(--orange);background:var(--orange-tint)}
.bp-attach svg{flex:none;color:var(--orange-d)}
.bp-attach span{display:flex;flex-direction:column}
.bp-attach b{font-family:var(--display);font-weight:600;font-size:14.5px}
.bp-attach small{font-size:12px;color:var(--body)}
.bp-shot{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;min-width:0}
.bp-shot img{width:52px;height:52px;flex:none;object-fit:cover;border-radius:8px;background:var(--cream)}
.bp-shot-meta{display:flex;flex-direction:column;flex:1;min-width:0}
.bp-shot-meta b{font-size:13.5px;color:var(--ok)}
.bp-shot-meta span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-shot .btn{flex:none}
.bp-hint{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.bp-error{padding:9px 12px;border-radius:10px;background:var(--danger-tint);color:var(--danger);font-size:13.5px;font-weight:700}

.bp-declined{display:flex;align-items:flex-start;gap:10px;padding:14px;border-radius:12px;background:var(--danger-tint);color:var(--danger);font-weight:700;font-size:14.5px;line-height:1.45}
.bp-declined svg{flex:none;margin-top:2px}
.bp-declined.small{padding:10px 12px;font-size:13.5px}

.bp-done{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px 6px;text-align:center}
.bp-done-ic{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--orange);color:var(--black)}
.bp-done.wait .bp-done-ic{background:var(--cream);color:var(--black);box-shadow:inset 0 0 0 2px var(--orange)}
.bp-done-ic svg{width:30px;height:30px}
.bp-done-t{font-family:var(--display);font-weight:600;font-size:20px;color:var(--black)}
.bp-done-p{margin:0;max-width:380px;font-size:14px;color:var(--body)}

/* phone: full width bottom sheet, scrolls inside */
@media (max-width:860px){
  .modal-backdrop.bill-pop-bd{align-items:flex-end;justify-content:stretch;padding:0}
  .modal.bill-pop{width:100%;max-width:none;max-height:94vh;max-height:94dvh;border-radius:20px 20px 0 0;animation:bp-up .22s ease}
  .bill-pop::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:rgba(14,11,15,.15)}
  .bill-pop{position:relative}
  .bill-pop .modal-head{padding:22px 16px 8px}
  .bill-pop .modal-head .modal-title{font-size:19px}
  .bill-pop .modal-body{padding:4px 16px 18px}
  .bill-pop .bp-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
  .bill-pop .bp-foot .btn{flex:1 1 0;min-width:0;padding:0 10px}
  .bp-opt{padding:11px 12px}
  .bp-opt-a{font-size:16px}
  .bp-tile{padding:10px 4px 9px}
  .bp-tile-a{font-size:15.5px}
}
@keyframes bp-up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}

/* ---- banner: "Pay now" in brand colors ---- */
.bill-banner .bill-banner-pay{background:var(--orange);border-color:var(--orange);color:var(--black)}
.bill-banner .bill-banner-pay:hover{background:var(--orange-d);border-color:var(--orange-d)}
.bill-banner.danger .bill-banner-pay{background:var(--black);border-color:var(--black);color:#fff}

/* ---- Settings: billing line in Subscription ---- */
.bill-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#FFFBF6}
.bill-sub[hidden]{display:none}
.bill-sub-info{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.bill-sub-text{font-weight:700;color:var(--black);font-size:13.5px}

/* ---- Settings: Payments card ---- */
.bill-pay-list{display:flex;flex-direction:column}
.bill-pay-row{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--line);min-width:0}
.bill-pay-row:last-of-type{border-bottom:0}
.bill-pay-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.bill-pay-what{min-width:0;font-weight:700;color:var(--black)}
.bill-pay-amt{flex:none;font-family:var(--display);font-weight:700}
.bill-pay-meta{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.bill-pay-status{margin-top:3px}
.bill-pay-status .pill{white-space:normal;line-height:1.45;padding:3px 10px;border-radius:10px}
.bill-pay-empty{color:var(--body)}
.bill-pay-stale{margin-bottom:6px}
.bill-pay-actions{padding-top:12px}
.bill-pop.is-done .modal-head,.bill-pop.is-overdue.is-done .modal-head{background:#fff}