/* Veltrix v2.21.26: order-flow styling is canonical in veltrix-production.min.css. */

/* ==========================================================================\n   VeltrixHost invoice experience v2.22.0\n   Clean in-client-area invoice + payment rail inspired by supplied reference.\n   ========================================================================== */
body.vx-page-viewinvoice .vx-main-body{padding:26px 34px 42px!important;background:#f5f7fb!important}
body.vx-page-viewinvoice .vx-page-grid{display:block!important;max-width:1480px!important;margin:0 auto!important}
body.vx-page-viewinvoice .vx-page-content{width:100%!important;max-width:none!important}
body.vx-page-viewinvoice .vx-page-sidebar{display:none!important}
body.vx-page-viewinvoice .vx-client-footer{background:#fff}
.vx-invoice-shell{width:100%;max-width:1450px;margin:0 auto;color:#172033}
.vx-invoice-shell *{box-sizing:border-box}
.vx-invoice-alert{display:flex;align-items:center;gap:10px;min-height:46px;margin:0 0 15px;padding:11px 16px;border:1px solid;border-radius:10px;font-size:13px}
.vx-invoice-alert-success{background:#eaf8f0;border-color:#bce8ce;color:#244b34}
.vx-invoice-alert-info{background:#eef5ff;border-color:#cdddf8;color:#28466f}
.vx-invoice-alert-danger{background:#fff0f0;border-color:#f1c6c6;color:#7d2c2c}
.vx-invoice-notice .card,.vx-invoice-notice .panel{margin-bottom:15px}
.vx-invoice-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 18px}
.vx-invoice-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:7px;color:#68768d!important;font-size:12px;font-weight:500!important}
.vx-invoice-back:hover{color:#111827!important}
.vx-invoice-page-head h1{margin:0!important;font-size:28px!important;line-height:1.12!important;font-weight:650!important;letter-spacing:-.03em!important;color:#111827!important}
.vx-invoice-page-head h1 span{color:var(--vx-ink,#101820)}
.vx-invoice-head-meta{margin-top:5px;color:#7a879c;font-size:12px;line-height:1.4}
.vx-invoice-head-meta b{padding:0 4px;color:#a8b1c0}
.vx-invoice-head-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.vx-invoice-action{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:8px 13px;border:1px solid #d8dee8;border-radius:9px;background:#fff;color:#263247!important;font-size:12px;font-weight:600!important;box-shadow:0 1px 2px rgba(17,24,39,.02)}
.vx-invoice-action:hover{border-color:#bfc8d6;background:#fbfcfe;color:#111827!important}
.vx-invoice-status{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 12px;border-radius:999px;font-size:11px;line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.vx-invoice-status-paid{background:#e5f8ec;color:#08853c}
.vx-invoice-status-unpaid,.vx-invoice-status-draft{background:#fff2d9;color:#9a6100}
.vx-invoice-status-cancelled,.vx-invoice-status-refunded{background:#f0f2f5;color:#687385}
.vx-invoice-status-collections{background:#fff0f0;color:#bd3030}
.vx-invoice-status-payment-pending{background:#eaf1ff;color:#315fbe}
.vx-invoice-layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:26px;align-items:start}
.vx-invoice-main-col{min-width:0}
.vx-invoice-card,.vx-invoice-pay-card,.vx-invoice-paid-card,.vx-invoice-state-card,.vx-invoice-help-card,.vx-invoice-history,.vx-invoice-credit-card{background:#fff;border:1px solid #dfe5ed;border-radius:14px;box-shadow:0 1px 2px rgba(14,24,40,.03),0 8px 24px rgba(14,24,40,.035)}
.vx-invoice-card{padding:34px 38px 30px;min-height:560px}
.vx-invoice-doc-head{display:flex;justify-content:space-between;gap:36px;align-items:flex-start}
.vx-invoice-brand{min-width:0;max-width:54%}
.vx-invoice-logo{display:block;width:auto;max-width:190px;max-height:52px;object-fit:contain;object-position:left center;margin-bottom:10px}
.vx-invoice-company-address{color:#748199;font-size:12px;line-height:1.65}
.vx-invoice-summary{width:280px;max-width:44%}
.vx-invoice-kicker{text-align:right;color:#9aa6bd;font-size:11px;line-height:1.1;letter-spacing:.08em}
.vx-invoice-number{text-align:right;margin:2px 0 10px;color:#0f1728;font-size:22px;line-height:1.1;font-weight:750;letter-spacing:-.025em}
.vx-invoice-summary dl{margin:0}
.vx-invoice-summary dl>div{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:7px 0;border-top:1px solid #e5e9ef}
.vx-invoice-summary dt,.vx-invoice-summary dd{margin:0;font-size:12px}
.vx-invoice-summary dt{color:#718097;font-weight:500}
.vx-invoice-summary dd{color:#111827;text-align:right;font-weight:650}
.vx-invoice-summary-total dt{color:#1b2638!important;font-weight:650!important}
.vx-invoice-summary-total dd{font-size:18px!important}
.vx-invoice-party-box{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin:28px 0 26px;padding:20px 22px;border:1px solid #e2e7ee;border-radius:12px;background:#f8fafc}
.vx-invoice-label{margin-bottom:9px;color:#98a4ba;font-size:11px;line-height:1;letter-spacing:.08em;font-weight:600}
.vx-invoice-client-name,.vx-invoice-payment-name{color:#111827;font-size:14px;font-weight:700;line-height:1.35}
.vx-invoice-client-details{margin-top:9px;color:#64748b;font-size:12px;line-height:1.55}
.vx-invoice-email{margin-top:8px}
.vx-invoice-payment-note{margin-top:6px;color:#718097;font-size:12px;line-height:1.45}
.vx-invoice-note{margin:0 0 22px;padding:12px 14px;border-left:3px solid #cfd5dd;border-radius:7px;background:#f8fafc;color:#5c6573;font-size:12px;line-height:1.5}
.vx-invoice-items-head,.vx-invoice-line{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:18px;align-items:start}
.vx-invoice-items-head{padding:0 4px 10px;border-bottom:1px solid #dfe5ed;color:#98a4ba;font-size:11px;letter-spacing:.07em;font-weight:650}
.vx-invoice-items-head span:last-child{text-align:right}
.vx-invoice-line{padding:15px 4px;border-bottom:1px solid #edf0f4;color:#263247;font-size:12px;line-height:1.45}
.vx-invoice-line strong{text-align:right;color:#111827;font-size:12px;font-weight:700;white-space:nowrap}
.vx-invoice-tax-star{color:#6b7280}
.vx-invoice-tax-note{padding:10px 4px 0;color:#a0aabc;font-size:11px}
.vx-invoice-totals{width:52%;min-width:300px;margin:18px 0 0 auto}
.vx-invoice-totals>div{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 4px;border-bottom:1px solid #e1e6ed;font-size:12px}
.vx-invoice-totals span{color:#4d5a70}
.vx-invoice-totals strong{color:#111827;font-weight:650}
.vx-invoice-totals .vx-invoice-grand-total{padding-top:12px;border-bottom:0;font-size:15px;font-weight:750}
.vx-invoice-totals .vx-invoice-grand-total span,.vx-invoice-totals .vx-invoice-grand-total strong{color:#111827;font-weight:750}
.vx-invoice-totals .vx-invoice-grand-total strong{font-size:21px}
.vx-invoice-qr{margin-top:22px;text-align:right}
.vx-invoice-side{display:grid;gap:15px;min-width:0}
.vx-invoice-pay-card,.vx-invoice-paid-card,.vx-invoice-state-card{padding:24px 22px}
.vx-invoice-due-amount{margin-top:-2px;color:#263247;font-size:34px;line-height:1.08;font-weight:750;letter-spacing:-.04em}
.vx-invoice-due-pill{display:inline-flex;margin-top:9px;padding:5px 10px;border-radius:999px;background:#fff1d8;color:#a16200;font-size:11px;font-weight:650}
.vx-invoice-divider{height:1px;margin:20px 0;background:#e6eaf0}
.vx-invoice-gateways{display:grid;gap:9px;margin-top:8px}
.vx-invoice-gateway{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 20px;gap:10px;align-items:center;min-height:62px;margin:0!important;padding:10px 12px;border:1px solid #dce2ea;border-radius:11px;background:#fff;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.vx-invoice-gateway:hover{border-color:#bbc5d3;background:#fcfdff}
.vx-invoice-gateway.is-selected{border:2px solid var(--vx-ink,#101820);padding:9px 11px;background:#fafbfc;box-shadow:0 0 0 2px rgba(16,24,32,.06)}
.vx-invoice-gateway-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#f3f5f8;color:#596574;font-size:16px}
.vx-invoice-gateway.is-selected .vx-invoice-gateway-icon{background:#eef1f4;color:var(--vx-ink,#101820)}
.vx-invoice-gateway-copy{min-width:0;display:flex;flex-direction:column}
.vx-invoice-gateway-copy strong{color:#172033;font-size:12px;line-height:1.25;font-weight:700}
.vx-invoice-gateway-copy small{margin-top:2px;color:#8290a5;font-size:10.5px;line-height:1.25;font-weight:400}
.vx-invoice-gateway input{position:absolute;opacity:0;pointer-events:none}
.vx-invoice-radio{display:block;width:17px;height:17px;border:1.5px solid #cbd4df;border-radius:50%;background:#fff}
.vx-invoice-gateway.is-selected .vx-invoice-radio{border:5px solid var(--vx-ink,#101820)}
.vx-invoice-selected-method{padding:12px;border:1px solid #dce2ea;border-radius:10px;color:#253146;font-size:12px;font-weight:650}
.vx-invoice-payment-button{margin-top:10px}
.vx-invoice-payment-button>form,.vx-invoice-payment-button .payment-form{margin:0!important}
.vx-invoice-payment-button .btn,.vx-invoice-payment-button button,.vx-invoice-payment-button input[type=submit]{width:100%!important;min-height:46px!important;border-radius:10px!important;background:#000!important;border-color:#000!important;color:#fff!important;font-size:13px!important;font-weight:750!important;box-shadow:none!important}
.vx-invoice-payment-button .btn:hover,.vx-invoice-payment-button button:hover,.vx-invoice-payment-button input[type=submit]:hover{background:#1a1a1a!important;border-color:#1a1a1a!important}
.vx-invoice-secure-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;color:#8c98aa;font-size:10.5px;line-height:1.35;text-align:left}
.vx-invoice-secure-note i{margin-top:2px;color:#55647a}
.vx-invoice-credit-card{padding:18px 20px}
.vx-invoice-credit-card h3,.vx-invoice-help-card h3{margin:0 0 8px!important;color:#111827!important;font-size:14px!important;font-weight:700!important}
.vx-invoice-credit-card p{margin:0 0 12px;color:#6f7d92;font-size:11.5px;line-height:1.45}
.vx-invoice-credit-form{display:grid;grid-template-columns:1fr auto;gap:8px}
.vx-invoice-credit-form .form-control{height:42px!important;min-height:42px!important}
.vx-invoice-credit-form .btn{min-height:42px!important;background:#000!important;border-color:#000!important;color:#fff!important}
.vx-invoice-paid-card{text-align:center;padding-top:42px;padding-bottom:36px}
.vx-invoice-paid-check{display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin:0 auto 12px;border-radius:50%;background:#e8f8ee;color:#16834a;font-size:21px}
.vx-invoice-paid-card h2,.vx-invoice-state-card h2{margin:0!important;color:#111827!important;font-size:17px!important;font-weight:750!important}
.vx-invoice-paid-card>p,.vx-invoice-state-card>p{margin:6px 0 18px;color:#8390a4;font-size:11.5px;line-height:1.45}
.vx-invoice-paid-card dl{margin:0;text-align:left}
.vx-invoice-paid-card dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px solid #e7ebf0;font-size:11.5px}
.vx-invoice-paid-card dt,.vx-invoice-paid-card dd{margin:0}
.vx-invoice-paid-card dt{color:#8794a8;font-weight:500}
.vx-invoice-paid-card dd{text-align:right;color:#172033;font-weight:650;overflow-wrap:anywhere}
.vx-invoice-state-card{text-align:center}
.vx-invoice-state-card .vx-invoice-status{margin-bottom:14px}
.vx-invoice-help-card{padding:17px 20px}
.vx-invoice-help-card a{display:flex;align-items:center;gap:9px;padding:6px 0;color:#172033!important;font-size:11.5px;font-weight:550!important}
.vx-invoice-help-card a i{width:14px;color:#98a4b7;text-align:center}
.vx-invoice-help-card a:hover{color:#000!important;text-decoration:underline!important;text-underline-offset:3px}
.vx-invoice-history{margin-top:16px;padding:16px 18px}
.vx-invoice-history h2{margin:0 0 10px!important;color:#172033!important;font-size:13px!important;font-weight:700!important;letter-spacing:0!important}
.vx-invoice-history-table-wrap{overflow-x:auto}
.vx-invoice-history-table{width:100%;border-collapse:collapse}
.vx-invoice-history-table th{padding:8px 6px;border-bottom:1px solid #dfe5ed;color:#98a4ba;font-size:9px;font-weight:650;text-align:left;letter-spacing:.05em;white-space:nowrap}
.vx-invoice-history-table th:last-child,.vx-invoice-history-table td:last-child{text-align:right}
.vx-invoice-history-table td{padding:9px 6px;border-bottom:1px solid #edf0f4;color:#66748a;font-size:10.5px;vertical-align:top}
.vx-invoice-history-table a{color:#172033!important;text-decoration:underline!important;text-underline-offset:2px}
.vx-invoice-history-balance td{border-bottom:0!important;color:#172033!important;font-weight:700!important}
.vx-invoice-history-balance td:first-child{text-align:right}

@media (max-width:1200px){
  .vx-invoice-layout{grid-template-columns:minmax(0,1fr) 340px;gap:18px}
  .vx-invoice-card{padding:28px}
}
@media (max-width:980px){
  body.vx-page-viewinvoice .vx-main-body{padding:20px 18px 34px!important}
  .vx-invoice-layout{grid-template-columns:1fr}
  .vx-invoice-side{grid-template-columns:1fr 1fr}
  .vx-invoice-pay-card,.vx-invoice-paid-card,.vx-invoice-state-card{grid-column:1/-1}
}
@media (max-width:680px){
  body.vx-page-viewinvoice .vx-main-body{padding:16px 12px 28px!important}
  .vx-invoice-page-head{align-items:flex-start;flex-direction:column}
  .vx-invoice-page-head h1{font-size:24px!important}
  .vx-invoice-head-actions{width:100%;justify-content:flex-start}
  .vx-invoice-card{padding:22px 18px}
  .vx-invoice-doc-head{flex-direction:column;gap:20px}
  .vx-invoice-brand,.vx-invoice-summary{width:100%;max-width:none}
  .vx-invoice-summary .vx-invoice-kicker,.vx-invoice-summary .vx-invoice-number{text-align:left}
  .vx-invoice-party-box{grid-template-columns:1fr;gap:22px;padding:18px}
  .vx-invoice-items-head,.vx-invoice-line{grid-template-columns:minmax(0,1fr) 90px;gap:12px}
  .vx-invoice-totals{width:100%;min-width:0}
  .vx-invoice-side{grid-template-columns:1fr}
  .vx-invoice-history{padding:14px}
}
@media (max-width:420px){
  .vx-invoice-head-actions .vx-invoice-status{width:100%;justify-content:center}
  .vx-invoice-action{flex:1;justify-content:center}
  .vx-invoice-card{padding:18px 14px;border-radius:11px}
  .vx-invoice-line{font-size:11px}
  .vx-invoice-line strong{font-size:11px}
  .vx-invoice-due-amount{font-size:30px}
  .vx-invoice-credit-form{grid-template-columns:1fr}
}
@media print{
  body.vx-page-viewinvoice{background:#fff!important}
  body.vx-page-viewinvoice .vx-client-header,
  body.vx-page-viewinvoice .vx-client-sidebar,
  body.vx-page-viewinvoice .vx-mobile-backdrop,
  body.vx-page-viewinvoice .vx-client-footer,
  body.vx-page-viewinvoice .vx-invoice-alert,
  body.vx-page-viewinvoice .vx-invoice-page-head,
  body.vx-page-viewinvoice .vx-invoice-side,
  body.vx-page-viewinvoice .vx-invoice-history,
  body.vx-page-viewinvoice .vx-page-sidebar{display:none!important}
  body.vx-page-viewinvoice .vx-client-main,
  body.vx-page-viewinvoice .vx-main-body,
  body.vx-page-viewinvoice .vx-page-grid,
  body.vx-page-viewinvoice .vx-page-content,
  body.vx-page-viewinvoice .vx-invoice-shell,
  body.vx-page-viewinvoice .vx-invoice-layout,
  body.vx-page-viewinvoice .vx-invoice-main-col{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#fff!important}
  body.vx-page-viewinvoice .vx-invoice-card{border:0!important;border-radius:0!important;box-shadow:none!important;padding:12mm 10mm!important;min-height:0!important}
}