/* Sneat client area: "billing" page family (invoices, quotes, invoice/quote/credit-note documents, payment, mass pay,
   add funds, payment methods). Every rule is scoped to this family's markup (.sn-bill wrapper or the page class
   body.sn-tpl-<template>) so the other families are untouched. Generic components (buttons, forms, tables, badges,
   alerts, cards, pills, modals) come from sneat-base.css; this file only lays out the billing pages.
   Prefix used below:  body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill  (beats the base by one class). */

/* ============================================================== tokens */
body.hg-sneat .sn-bill {
    --snbl-gap: 1.5rem;
    --snbl-soft: rgba(var(--snb-base-rgb), .04);
}

/* ============================================================== lists (invoices, quotes): summary + table card */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary .card-body { gap: 1rem 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary h6 { margin: 0 0 .25rem; color: var(--snb-heading) !important; font-size: .9375rem !important; font-weight: 500 !important; line-height: 1.5 !important; text-transform: none !important; letter-spacing: normal !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary__body,
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary__body * { margin: 0 !important; color: var(--snb-body) !important; font-size: .9375rem !important; text-align: start !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
/* WHMCS wraps the two buttons in column divs; let the buttons sit side by side */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary__actions :is(.row, [class*="col-"], .clearfix) { display: contents !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary__actions br { display: none; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary__actions .btn {
    display: inline-flex !important; align-items: center; justify-content: center; gap: .375rem;
    width: auto !important; margin: 0 !important; padding: .4812rem 1.125rem !important; font-size: .9375rem !important;
}
/* "Pay all" is the page's primary action, "Add funds" the secondary one */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary__actions .btn:is(.btn-success, .btn-primary) {
    border-color: var(--snb-primary) !important; background: var(--snb-primary) !important; color: #fff !important;
    box-shadow: 0 .125rem .25rem 0 rgba(var(--snb-primary-rgb), .4) !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary__actions .btn:is(.btn-success, .btn-primary):hover { background: var(--snb-primary-hover) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary__actions .btn:not(.btn-success):not(.btn-primary) {
    border-color: transparent !important; background: rgba(var(--snb-secondary-rgb), .16) !important; color: var(--snb-secondary) !important; box-shadow: none !important;
}
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary__actions .btn:not(.btn-success):not(.btn-primary) { color: #b2b2c4 !important; }

/* card header: status pills on the left, search on the right */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-card-head { padding-bottom: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-pills .nav { margin: 0 !important; padding: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-pills .nav-link { padding: .4812rem 1rem !important; white-space: nowrap; cursor: pointer; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-pills .nav-link > span:not(.badge) { color: inherit !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-pills .sn-pill-badge {
    min-width: 1.5rem; margin-left: .375rem !important; padding: .2rem .45rem !important; border-radius: 50rem !important;
    background: rgba(var(--snb-primary-rgb), .16) !important; color: var(--snb-primary-text) !important; font-size: .75rem !important; line-height: 1.1 !important; text-align: center;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-pills .nav-link.active .sn-pill-badge { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-pills .sn-pill-badge { color: #d9a7ec !important; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-pills .nav-link.active .sn-pill-badge { color: #fff !important; }

body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-search { margin-left: auto; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-search .dataTables_filter { float: none !important; margin: 0 !important; padding: 0 !important; text-align: start !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-search .dataTables_filter label { position: relative; display: block !important; width: 100%; margin: 0 !important; font-size: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-search .dataTables_filter label::before {
    content: ""; position: absolute; top: 50%; left: .875rem; width: 1.125rem; height: 1.125rem; transform: translateY(-50%);
    background-color: var(--snb-muted); pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18a7.95 7.95 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.95 7.95 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18a7.95 7.95 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.95 7.95 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-card-head .sn-bill-search .dataTables_filter label > input.form-control {
    width: 15rem !important; min-width: 0 !important; height: auto !important; margin: 0 !important;
    padding: .4812rem .9375rem .4812rem 2.5rem !important; padding-inline: 2.5rem .9375rem !important; background-image: none !important; font-size: .9375rem !important;
}

/* the table spans the card; a horizontal scroll inside the card on narrow screens */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-dt .table-container { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .dataTables_wrapper,
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .dataTables_wrapper .listtable { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll { margin: 0; border-radius: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll > .table { width: 100% !important; min-width: 40rem; margin: 0 !important; border-collapse: collapse !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll > .table > tbody > tr { cursor: pointer; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll > .table > :not(caption) > tr > :is(th, td) { white-space: nowrap; text-align: start !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll > .table > :not(caption) > tr > :is(th, td).text-end { text-align: end !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll > .table > :not(caption) > tr > :is(th, td):first-child { padding-left: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll > .table > :not(caption) > tr > :is(th, td):last-child { padding-right: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll > .table > tbody > tr > td { padding-top: .875rem !important; padding-bottom: .875rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll > .table > tbody > tr:last-child > td { border-bottom: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll > .table > tbody > tr > td[data-title]::before { display: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-num { color: var(--snb-primary-text) !important; font-weight: 500 !important; text-decoration: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-num:hover { text-decoration: underline !important; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-num { color: #d9a7ec !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-amount { color: var(--snb-heading) !important; font-weight: 500 !important; }
/* the subject may wrap (two lines at most), so the row actions never scroll out of the card */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll > .table > tbody > tr > td.sn-bill-subject-cell { min-width: 12rem; white-space: normal; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-subject { display: -webkit-box; max-width: 24rem; overflow: hidden; color: var(--snb-heading); -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll .btn.btn-icon.sn-bill-row-btn { width: 2rem !important; height: 2rem !important; min-height: 0 !important; padding: 0 !important; line-height: 1 !important; border: 0 !important; background: transparent !important; color: var(--snb-secondary) !important; box-shadow: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll .btn.btn-icon.sn-bill-row-btn .icon-base { width: 1.25rem !important; height: 1.25rem !important; font-size: 1.25rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll .btn.btn-icon.sn-bill-row-btn:hover { background: rgba(var(--snb-secondary-rgb), .16) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-row-form { display: inline-block; margin: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #tableLoading { padding: 1.5rem; color: var(--snb-muted); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #tableLoading p { margin: 0; }

/* footer row: length + info on the left, pagination on the right */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.25rem 1.5rem; border-top: 1px solid var(--snb-border); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-foot__start { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-foot :is(.dataTables_length, .dataTables_info, .dataTables_paginate) { float: none !important; margin: 0 !important; padding: 0 !important; text-align: start !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-foot .dataTables_info { color: var(--snb-muted) !important; font-size: .8125rem !important; white-space: normal; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-foot .dataTables_length label { gap: .5rem; color: var(--snb-body) !important; font-size: .8125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-foot .dataTables_length select { padding-top: .3rem !important; padding-bottom: .3rem !important; font-size: .8125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-foot .pagination { margin: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-foot .page-link { min-width: 2.125rem; height: 2.125rem; font-size: .8125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-foot :is(.previous, .next) .page-link { padding-inline: .75rem !important; }

/* empty list */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-empty { padding: 3rem 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-empty h5 { color: var(--snb-heading) !important; font-size: 1.125rem !important; font-weight: 500 !important; }

@media (max-width: 767.98px) {
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-search { width: 100%; margin-left: 0; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-search .dataTables_filter input { width: 100% !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-pills { width: 100%; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-pills .nav { flex-wrap: wrap !important; gap: .25rem; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-foot { justify-content: center; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-foot__start { justify-content: center; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-summary__actions .btn { flex: 1 1 auto; }
}

/* small screens: the main-site layer turns .table-list into stacked cards (<=768px) and every content table into a
   block (<992px); the billing tables stay real Sneat tables that scroll inside their card */
@media (max-width: 991.98px) {
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-dt-scroll, .sn-doc-table, .sn-pmlist-table) > .table { display: table !important; width: 100% !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-dt-scroll, .sn-doc-table, .sn-pmlist-table) > .table > thead {
        position: static !important; display: table-header-group !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important;
    }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-dt-scroll, .sn-doc-table, .sn-pmlist-table) > .table > tbody { display: table-row-group !important; width: auto !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-dt-scroll, .sn-doc-table, .sn-pmlist-table) > .table > tfoot { display: table-footer-group !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-dt-scroll, .sn-doc-table, .sn-pmlist-table) > .table > * > tr {
        display: table-row !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
    }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-dt-scroll, .sn-doc-table, .sn-pmlist-table) > .table > * > tr > :is(td, th):not(.d-none) {
        display: table-cell !important; width: auto !important; border: 0 !important; border-bottom: 1px solid var(--snb-border) !important;
    }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-dt-scroll, .sn-pmlist-table) > .table > tbody > tr > td:not(.d-none) { padding-top: .75rem !important; padding-bottom: .75rem !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-dt-scroll, .sn-pmlist-table) > .table > tbody > tr:last-child > td { border-bottom: 0 !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-dt-scroll, .sn-pmlist-table) > .table > tbody > tr > td:last-child { text-align: end !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-dt-scroll > .table { min-width: 32rem; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table > .table > tfoot > tr > :is(td, th) { border-bottom: 0 !important; }
}
@media (max-width: 767.98px) {
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-card-head .sn-bill-search .dataTables_filter label > input.form-control { width: 100% !important; }
    /* the main-site stacked-card rule (display:flex !important) would show the columns Bootstrap hides below md */
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-dt-scroll, .sn-doc-table, .sn-pmlist-table) > .table > * > tr > :is(td, th).d-none { display: none !important; }
}

/* ============================================================== documents (invoice, quote, credit/debit note) */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc { overflow: hidden; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-head {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
    margin: 1.5rem 1.5rem 0; padding: 1.5rem; border-radius: var(--snb-radius); background: rgba(var(--snb-base-rgb), .04);
}
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-head { background: rgba(255, 255, 255, .04); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-logo { display: inline-flex; margin-bottom: 1rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-logo__img { display: block; width: auto; height: 2.125rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-logo__img--dark { display: none; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-logo__img--light { display: none; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-logo__img--dark { display: block; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-address { margin: 0; color: var(--snb-body) !important; font-size: .9375rem !important; font-style: normal; line-height: 1.625 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-strong { color: var(--snb-heading) !important; font-weight: 500 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-meta { min-width: 13rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-no { margin: 0 0 1rem; color: var(--snb-heading) !important; font-size: 1.125rem !important; font-weight: 500 !important; line-height: 1.375 !important; text-transform: none !important; letter-spacing: normal !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-no .badge { margin-inline-start: .5rem; vertical-align: middle; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-doc-dates, .sn-doc-facts, .sn-doc-totals, .sn-act-facts) { margin: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-doc-dates, .sn-doc-facts, .sn-doc-totals, .sn-act-facts) > div { display: flex; align-items: baseline; gap: .5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.sn-doc-dates, .sn-doc-facts, .sn-doc-totals, .sn-act-facts) :is(dt, dd) { margin: 0; color: var(--snb-body) !important; font-size: .9375rem !important; font-weight: 400 !important; line-height: 1.625 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-dates dd { color: var(--snb-heading) !important; font-weight: 500 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-dates > div + div { margin-top: .25rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-facts > div + div { margin-top: .375rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-facts dt { flex: 0 0 auto; min-width: 8.5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-facts dd { color: var(--snb-heading) !important; overflow-wrap: anywhere; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-label { margin: 0 0 .75rem; color: var(--snb-heading) !important; font-size: .9375rem !important; font-weight: 500 !important; line-height: 1.5 !important; text-transform: none !important; letter-spacing: normal !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-parties { padding-top: 1.5rem !important; }

body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table { margin: 0; border-top: 1px solid var(--snb-border); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table > .table > thead > tr > th { border-top: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table > .table > :not(caption) > tr > :is(th, td) { text-align: start; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table > .table > :not(caption) > tr > :is(th, td).text-end { text-align: end !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table > .table > :not(caption) > tr > :is(th, td):first-child { padding-left: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table > .table > :not(caption) > tr > :is(th, td):last-child { padding-right: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table > .table > tbody > tr > td { color: var(--snb-heading) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table .sn-doc-desc { min-width: 16rem; color: var(--snb-body) !important; line-height: 1.625; white-space: normal; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table > .table > tbody > tr:last-child > td { border-bottom: 1px solid var(--snb-border) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table > .table > tfoot > tr > :is(th, td) { border-bottom: 0 !important; color: var(--snb-heading) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: normal !important; font-size: .9375rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table .sn-doc-empty { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; color: var(--snb-muted) !important; text-align: center !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table a { color: var(--snb-primary-text) !important; font-weight: 500; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-table a { color: #d9a7ec !important; }

body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-sum { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-sum__note { flex: 1 1 14rem; color: var(--snb-body); font-size: .9375rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-totals { flex: 0 1 18rem; min-width: 14rem; margin-left: auto; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-totals > div { justify-content: space-between; gap: 2rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-totals > div + div { margin-top: .25rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-totals dd { color: var(--snb-heading) !important; font-weight: 500 !important; text-align: end; white-space: nowrap; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-totals .sn-doc-totals__grand { margin-top: .75rem !important; padding-top: .75rem; border-top: 1px solid var(--snb-border); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-totals .sn-doc-totals__grand :is(dt, dd) { color: var(--snb-heading) !important; font-weight: 500 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-section { padding: 1.5rem 1.5rem .25rem; border-top: 1px solid var(--snb-border); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-section + .sn-doc-table { border-top: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-section + .sn-doc-table > .table > thead > tr > th { border-top: 1px solid var(--snb-border) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-notes { border-top: 1px solid var(--snb-border); border-radius: 0 !important; color: var(--snb-body); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-notes__body { margin-top: .25rem; overflow-wrap: anywhere; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-notes__body > :last-child { margin-bottom: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-qr { border-top: 1px solid var(--snb-border); border-radius: 0 !important; text-align: center; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-block { border-top: 1px solid var(--snb-border); border-radius: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-block__body { color: var(--snb-body); overflow-wrap: anywhere; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-block__body > :last-child { margin-bottom: 0; }

/* actions card */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-total { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-total__label { display: block; margin-bottom: .125rem; color: var(--snb-body); font-size: .9375rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-total__value { display: block; color: var(--snb-heading); font-size: 1.625rem; font-weight: 500; line-height: 1.3; white-space: nowrap; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-facts { margin: 1.25rem 0 0 !important; padding-top: 1rem; border-top: 1px solid var(--snb-border); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-facts > div { justify-content: space-between; gap: 1rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-facts > div + div { margin-top: .375rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-facts dt { flex: 0 0 auto; white-space: nowrap; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-facts dd { color: var(--snb-heading) !important; font-weight: 500 !important; text-align: end; text-wrap: balance; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-facts--method { margin-top: 0 !important; padding-top: .375rem; border-top: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-gateway { margin: 1.25rem 0 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-pay { margin-top: 1.25rem; color: var(--snb-body); font-size: .9375rem; overflow-wrap: anywhere; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-pay:empty { display: none; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-pay form { margin: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-pay :is(.btn, button, input[type="submit"], input[type="button"]) {
    display: inline-flex !important; align-items: center; justify-content: center; gap: .5rem;
    width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: .5625rem 1.25rem !important;
    border: 1px solid var(--snb-primary) !important; border-radius: var(--snb-radius) !important;
    background: var(--snb-primary) !important; color: #fff !important; font-size: .9375rem !important; font-weight: 500 !important; line-height: 1.375 !important;
    box-shadow: 0 .125rem .25rem 0 rgba(var(--snb-primary-rgb), .4) !important; text-transform: none !important; letter-spacing: normal !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-pay :is(.btn, button, input[type="submit"], input[type="button"]):hover { background: var(--snb-primary-hover) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-pay img { max-width: 100%; height: auto; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-pay :is(p, div, span, strong, b) { color: inherit; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-buttons { display: grid; gap: .75rem; margin-top: 1.25rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-buttons form { margin: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-buttons .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: .5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-act-credit .input-group > .btn { flex: 0 0 auto; }

/* alerts above a document */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-alert { margin-bottom: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-alert .alert-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; border-radius: var(--snb-radius); background: currentColor; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-alert .alert-icon .bx { color: var(--snb-paper); background-color: var(--snb-paper); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-alert .alert-heading { color: inherit !important; font-size: .9375rem !important; font-weight: 500 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-alert__text > :last-child { margin-bottom: 0; }

/* error card */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-error .card-body { padding: 3rem 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-error h4 { color: var(--snb-heading) !important; font-size: 1.375rem !important; font-weight: 500 !important; }

@media (max-width: 575.98px) {
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-head { margin: 1rem 1rem 0; padding: 1.25rem; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-facts dt { min-width: 7rem; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-totals { flex-basis: 100%; }
}

/* printing a document: the document card only */
@media print {
    body.hg-sneat:is(.sn-tpl-viewinvoice, .sn-tpl-viewquote, .sn-tpl-viewbillingnote) > :is(header, footer, .sn-portal, .hg-aichat-panel) { display: none !important; }
    body.hg-sneat:is(.sn-tpl-viewinvoice, .sn-tpl-viewquote, .sn-tpl-viewbillingnote) .sn-root :is(.layout-menu, .sn-page-head, .layout-overlay, .sn-act-col) { display: none !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-col { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc { box-shadow: none !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-logo__img--light { display: block !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-doc-logo__img--dark { display: none !important; }
}

/* ============================================================== shared bits */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-muted { color: var(--snb-muted) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .card-header .sn-bill-muted { color: var(--snb-body) !important; font-size: .9375rem !important; font-weight: 400 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .btn > .icon-base { width: 1.125rem; height: 1.125rem; font-size: 1.125rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .btn:has(> .icon-base) { display: inline-flex !important; align-items: center; justify-content: center; gap: .5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill > .alert,
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .col-xl-8 > .alert { margin-bottom: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .alert ul { margin: .5rem 0 0; padding-left: 1.25rem; }

/* ============================================================== add funds */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-stat__label { display: block; margin-bottom: .25rem; color: var(--snb-body); font-size: .9375rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-stat__value { display: block; color: var(--snb-heading); font-size: 1.375rem; font-weight: 500; line-height: 1.4; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-note { padding-bottom: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-note__body,
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-note__body * { margin: 0; color: var(--snb-body) !important; font-size: .9375rem !important; font-weight: 400 !important; text-align: start !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-form-card .card-body { padding-top: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-form-actions { margin-top: 1.5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-bill-form-foot { padding-top: 0 !important; color: var(--snb-muted); }

/* ============================================================== mass payment */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill-masspay .sn-mp-group > td { padding-top: .625rem !important; padding-bottom: .625rem !important; background: rgba(var(--snb-base-rgb), .04) !important; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill-masspay .sn-mp-group > td { background: rgba(255, 255, 255, .04) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill-masspay .sn-mp-group .icon-base { color: var(--snb-primary-text); vertical-align: -.125em; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill-masspay .sn-mp-totals { flex: none; min-width: 0; margin: 0; }

/* ============================================================== payment form (invoice payment, add/edit payment method) */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-field { margin: 0 0 1.5rem !important; padding: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-field > .form-label,
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-field > label:first-child { display: block; width: auto; max-width: none; margin: 0 0 .25rem !important; padding: 0 !important; float: none; text-align: start !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-field--half { display: inline-block; width: calc(50% - .75rem); vertical-align: top; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-field--half + .sn-pay-field--half { margin-left: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-field .field-error-msg { display: none; margin-top: .25rem; color: var(--snb-danger); font-size: .8125rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-field.has-error .form-control { border-color: var(--snb-danger) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-cvv__row { display: flex; align-items: center; gap: .75rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-cvv__row .form-control { flex: 1 1 auto; min-width: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-cvv__row .btn-link { flex: 0 0 auto; padding: 0 !important; white-space: nowrap; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-grid { margin-bottom: 1.5rem; --bs-gutter-y: 1.5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-grid > [class*="col-"].sn-pay-field,
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-grid > [class*="col-"] > .sn-pay-field { margin-bottom: 0 !important; padding-left: calc(var(--bs-gutter-x) * .5) !important; padding-right: calc(var(--bs-gutter-x) * .5) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-grid > [class*="col-"] > .sn-pay-field { padding: 0 !important; }
/* the grid's columns keep Bootstrap's gutter margin (the generic field margin above would cancel it, so the row's
   negative top margin pulled the first fields onto whatever sits above the grid) */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-grid > [class*="col-"] { margin-top: var(--bs-gutter-y) !important; }
/* card fields: full rows and half rows (expiry | CVV) without inline-block whitespace */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .fieldgroup-creditcard > .cc-details { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .fieldgroup-creditcard > .cc-details > .sn-pay-field { flex: 0 0 100%; min-width: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .fieldgroup-creditcard > .cc-details > .sn-pay-field.sn-pay-field--half { flex-basis: calc(50% - .75rem); width: auto; margin-left: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-inline { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-radio { display: inline-flex !important; align-items: center; gap: .5rem; margin: 0 !important; color: var(--snb-heading) !important; font-size: .9375rem !important; font-weight: 400 !important; cursor: pointer; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-submit { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 !important; padding: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-store { display: flex !important; align-items: center; gap: .75rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-store .form-check-label { margin: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-secure { display: flex; align-items: flex-start; gap: .5rem; padding-top: 0 !important; color: var(--snb-muted); font-size: .8125rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-secure .icon-base { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .125rem; font-size: 1rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-loading { display: flex; align-items: center; gap: .75rem; padding: 1rem 0 1.5rem; color: var(--snb-body); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-frame { display: block; width: 100%; max-width: 100%; border: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #inputDescriptionContainer { margin-left: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .gateway-errors:not(.w-hidden) { margin-bottom: 1.5rem !important; }

/* option rows (saved cards, new card, billing addresses, method type): Sneat "custom option" boxes */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-list { display: grid; gap: .75rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-list > br { display: none; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-list--inline { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option {
    display: flex !important; align-items: center; gap: .875rem; width: 100%; min-height: 3.25rem; margin: 0 !important; padding: .75rem 1rem !important;
    border: 1px solid var(--snb-border) !important; border-radius: var(--snb-radius) !important; background: transparent !important;
    color: var(--snb-body) !important; font-size: .9375rem !important; font-weight: 400 !important; text-align: start !important; cursor: pointer;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option:hover { border-color: rgba(var(--snb-primary-rgb), .5) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option:has(input:checked) { border-color: var(--snb-primary) !important; background: rgba(var(--snb-primary-rgb), .06) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option:has(input:disabled) { cursor: not-allowed; opacity: .65; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option__check { display: inline-flex; flex: 0 0 auto; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: var(--snb-radius); background: rgba(var(--snb-primary-rgb), .12); color: var(--snb-primary-text); font-size: 1.25rem; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option__icon { background: rgba(201, 138, 224, .16); color: #d9a7ec; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option__icon .icon-base { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option__name { color: var(--snb-heading) !important; font-weight: 500 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option__desc { color: var(--snb-body) !important; font-size: .8125rem; line-height: 1.5; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option__desc * { color: inherit !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option__meta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .5rem; color: var(--snb-body); font-size: .8125rem; white-space: nowrap; }

/* iCheck radios/checkboxes (WHMCS keeps them for its ifChecked events) drawn as Sneat form-check inputs */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.iradio_square-blue, .icheckbox_square-blue) {
    position: relative; display: inline-block; flex: 0 0 auto; width: 1.2rem !important; height: 1.2rem !important; margin: 0 !important;
    border: 2px solid var(--snb-muted) !important; background: transparent none !important; vertical-align: middle; cursor: pointer;
    filter: none !important;
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .iradio_square-blue { border-radius: 50% !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .icheckbox_square-blue { border-radius: .267rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.iradio_square-blue, .icheckbox_square-blue).checked {
    border-color: var(--snb-primary) !important; background-color: var(--snb-primary) !important; box-shadow: 0 .125rem .25rem 0 rgba(var(--snb-primary-rgb), .4);
}
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .iradio_square-blue.checked::after { content: ""; position: absolute; inset: 0; margin: auto; width: .4rem; height: .4rem; border-radius: 50%; background: #fff; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .icheckbox_square-blue.checked::after { content: ""; position: absolute; inset: 0; margin: auto; width: .3rem; height: .55rem; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-.06rem) rotate(45deg); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.iradio_square-blue, .icheckbox_square-blue).disabled { opacity: .45; cursor: not-allowed; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill :is(.iradio_square-blue, .icheckbox_square-blue).hover:not(.checked):not(.disabled) { border-color: var(--snb-body) !important; }

/* bootstrap-switch ("store this card") as a Sneat switch */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .bootstrap-switch { flex: 0 0 auto; border: 0 !important; border-radius: 2rem !important; background: rgba(var(--snb-base-rgb), .12) !important; box-shadow: 0 0 .25rem 0 rgba(34, 48, 62, .16) inset !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--snb-primary) !important; color: #fff !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .bootstrap-switch :is(.bootstrap-switch-handle-on, .bootstrap-switch-handle-off) { font-size: .75rem !important; font-weight: 500 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .bootstrap-switch .bootstrap-switch-label { background: var(--snb-paper) !important; }

/* Stripe Elements (mounted by the gateway into WHMCS's old two-column rows): stacked labels, expiry and CVC side by side */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #stripeElements > .form-group { display: block !important; margin: 0 0 1.5rem !important; padding: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #stripeElements > .form-group:nth-child(2),
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #stripeElements > .form-group:nth-child(3) { display: inline-block !important; width: calc(50% - .75rem); vertical-align: top; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #stripeElements > .form-group:nth-child(3) { margin-left: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #stripeElements > .form-group > label { display: block; width: auto; max-width: none; margin: 0 0 .25rem !important; padding: 0 !important; color: var(--snb-heading) !important; font-size: .8125rem !important; font-weight: 500 !important; text-align: start !important; text-transform: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #stripeElements > .form-group > [class*="col-"] { flex: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #stripeElements > .form-group > [class*="col-"]:empty { display: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #stripeElements #stripeCvcWhere:not(:empty) { margin-top: .25rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill #stripeElements #stripeCvcWhere .btn-link { padding: 0 !important; font-size: .8125rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .StripeElement { min-height: calc(1.375em + 1.086rem + 2px); padding: .65rem .9375rem !important; border: 1px solid var(--snb-input-border) !important; border-radius: var(--snb-radius) !important; background: transparent !important; box-shadow: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .StripeElement--focus { border-color: var(--snb-primary) !important; box-shadow: inset 0 0 0 1px var(--snb-primary) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .StripeElement--invalid { border-color: var(--snb-danger) !important; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .StripeElement { background: #fff !important; }

/* invoice summary next to the payment form */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-items { margin: 0 0 1.25rem; padding: 0 0 1.25rem; border-bottom: 1px solid var(--snb-border); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-items > li { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-items > li + li { margin-top: .75rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-items__desc { min-width: 0; color: var(--snb-body); font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-items__amount { flex: 0 0 auto; color: var(--snb-heading); font-weight: 500; white-space: nowrap; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-totals { flex: none; min-width: 0; margin: 0; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-balance { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding: .75rem 1rem; border-radius: var(--snb-radius); background: rgba(var(--snb-primary-rgb), .1); color: var(--snb-primary-text); font-weight: 500; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-balance { background: rgba(201, 138, 224, .14); color: #e6c3f3; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-balance strong { font-size: 1.125rem; font-weight: 600; white-space: nowrap; }

/* 3-D Secure */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-3ds-frame { overflow: hidden; border: 1px solid var(--snb-border); border-radius: var(--snb-radius); }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-3ds-frame iframe { display: block; width: 100%; height: 500px; border: 0; }

/* ============================================================== payment methods list */
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-head { padding-bottom: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-table > .table > :not(caption) > tr > :is(th, td) { text-align: start; white-space: nowrap; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-table > .table > :not(caption) > tr > :is(th, td).text-end { text-align: end !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-table > .table > :not(caption) > tr > :is(th, td):first-child { padding-left: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-table > .table > :not(caption) > tr > :is(th, td):last-child { padding-right: 1.5rem !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-brand { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: var(--snb-radius); background: rgba(var(--snb-primary-rgb), .12); color: var(--snb-primary-text); font-size: 1.25rem; }
html[data-bs-theme="dark"] body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-brand { background: rgba(201, 138, 224, .16); color: #d9a7ec; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-name { color: var(--snb-heading); font-weight: 500; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-menu .dropdown-toggle::after { display: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-menu .btn.btn-icon { width: 2.25rem !important; height: 2.25rem !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--snb-secondary) !important; box-shadow: none !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-menu .btn.btn-icon:hover,
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-menu .btn.btn-icon.show { background: rgba(var(--snb-secondary-rgb), .16) !important; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-menu .btn.btn-icon .icon-base { width: 1.375rem; height: 1.375rem; font-size: 1.375rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-menu .dropdown-item { display: flex; align-items: center; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-menu .dropdown-item .icon-base { width: 1.125rem; height: 1.125rem; font-size: 1.125rem; }
body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pmlist-menu .dropdown-item.text-danger { color: var(--snb-danger) !important; }

/* modals of the family (accept quote, delete payment method, new billing address) */
body.hg-sneat .sn-bill-modal .form-check { display: flex; align-items: flex-start; gap: .5rem; padding-left: 0; }
body.hg-sneat .sn-bill-modal .form-check-label { display: inline-flex; align-items: flex-start; gap: .5rem; color: var(--snb-heading); font-weight: 400; }
body.hg-sneat .sn-bill-modal .form-check-input { position: static; flex: 0 0 auto; margin: .2rem 0 0; }
body.hg-sneat .sn-bill-modal .form-label { display: block; margin-bottom: .25rem; color: var(--snb-heading); font-size: .8125rem; font-weight: 500; }
body.hg-sneat .sn-bill-modal .form-group { margin-bottom: 0; }

@media (max-width: 575.98px) {
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-field--half { display: block; width: 100%; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pay-field--half + .sn-pay-field--half { margin-left: 0 !important; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .sn-pm-option__meta { display: none; }
    body.hg-sneat #main-body:not(#sn-a):not(#sn-b):not(#sn-c) .sn-bill .fieldgroup-creditcard > .cc-details > .sn-pay-field.sn-pay-field--half { flex-basis: 100%; }
}

/* ============================================================== standalone document page (credit/debit note: WHMCS
   renders it without the client-area shell) */
body.hg-sneat.sn-doc-standalone { margin: 0; background: var(--snb-body-bg); color: var(--snb-body); font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html[data-bs-theme="dark"] body.hg-sneat.sn-doc-standalone { background: #232333; }
body.hg-sneat.sn-doc-standalone .sn-root { min-height: 100vh; background: transparent; }
body.hg-sneat.sn-doc-standalone .sn-doc-page { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 992px) { body.hg-sneat.sn-doc-standalone .sn-doc-page { padding-top: 3rem; padding-bottom: 3rem; } }
@media print { body.hg-sneat.sn-doc-standalone, body.hg-sneat.sn-doc-standalone .sn-root { background: #fff !important; } }