/* =============================================================================
   Shop / client area
   -----------------------------------------------------------------------------
   These are ecommerce pages, not a separate application: cart.php, checkout.php
   and the payment screens sit inside the site's own chrome, so this file is
   loaded *after* css/style.css by includes/header.php and adds shop components on
   top of the theme rather than replacing it.

   Every colour, radius and font below is read from the site's variables, with a
   literal fallback. That fallback is not decoration: client/invoice-print.php
   loads this file on its own, without style.css, and the printable invoice still
   has to come out right.

   Where the Bootstrap classes used by the shop markup (btn, form-control, table,
   alert) clash with the theme, they are re-skinned here instead of being replaced
   class-for-class across the PHP — the pages stay readable, the pages stay on theme.
   ========================================================================== */

:root {
    /* Theme, borrowed. */
    --bill-accent:     var(--accent-color, #C82AEF);
    --bill-accent-dim: var(--accent-color-6, rgba(200, 42, 239, .52));
    --bill-ink:        var(--primary, #D1D1D1);
    --bill-muted:      var(--text-color, #8B8B8B);
    --bill-radius:     var(--global-border-radius, 25px 25px 25px 25px);
    --bill-font:       var(--global-font, "Plus Jakarta Sans", sans-serif);

    /* Shop-only surfaces. */
    --bill-bg:      #040404;
    --bill-panel:   radial-gradient(at top left, #1F1F1F 0%, #0E0E0E 60%);
    --bill-flat:    #141414;
    --bill-sunken:  #0A0A0A;
    --bill-line:    rgba(255, 255, 255, .09);
    --bill-line-2:  rgba(255, 255, 255, .18);
    --bill-ok:      #4ade80;
    --bill-warn:    #ffc46b;
    --bill-bad:     #ff8d8d;
    --bill-pill:    100px;
}

body.bill-body {
    background: var(--bill-bg);
    color: var(--bill-ink);
    font-family: var(--bill-font);
    font-size: 16px;
    line-height: 1.55;
}

/* ── Page frame ───────────────────────────────────────────────────────── */

.bill-page {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    padding: 34px 20px 96px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.bill-shop-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ── Shop layer: account nav + live basket ────────────────────────────── */

.bill-shopbar {
    position: sticky;
    top: 12px;
    z-index: 30;
    padding: 10px;
    border-radius: var(--bill-radius);
    border: 1px solid var(--bill-line);
    background: rgba(14, 14, 14, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .38);
}

.bill-shopbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.bill-shopnav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bill-shopnav-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: var(--bill-pill);
    color: var(--bill-ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s, background-color .2s;
}
.bill-shopnav-link svg { width: 17px; height: 17px; }
.bill-shopnav-link:hover { background: rgba(255, 255, 255, .07); color: var(--bill-accent); }
.bill-shopnav-link.is-active {
    background: var(--bill-accent);
    color: #0E0E0E;
    font-weight: 700;
}

.bill-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: var(--bill-pill);
    background: var(--bill-accent);
    color: #0E0E0E;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}
.bill-shopnav-link.is-active .bill-badge { background: #0E0E0E; color: var(--bill-accent); }
.bill-badge--warn { background: var(--bill-warn); color: #241a00; }

.bill-shopbar-aside {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.bill-shop-cart {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 20px;
    border-radius: var(--bill-pill);
    background: var(--bill-panel);
    border: 1px solid var(--bill-line);
    color: var(--bill-ink);
    font-size: 15px;
    text-decoration: none;
    transition: border-color .2s;
}
.bill-shop-cart:hover { border-color: var(--bill-accent); color: var(--bill-accent); }
.bill-shop-cart svg { width: 17px; height: 17px; }
.bill-shop-cart strong { font-size: 16px; font-weight: 700; }
.bill-shop-cart.is-empty { color: var(--bill-muted); }
.bill-shop-cart.is-empty .bill-shop-cart-label { font-weight: 500; }

.bill-shop-who {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}
.bill-shop-who-name { color: var(--bill-ink); font-weight: 600; text-decoration: none; }
.bill-shop-who-name:hover { color: var(--bill-accent); }
.bill-shop-who-out {
    padding: 7px 16px;
    border-radius: var(--bill-pill);
    border: 1px solid var(--bill-line);
    color: var(--bill-muted);
    font-size: 13.5px;
    text-decoration: none;
    transition: all .2s;
}
.bill-shop-who-out:hover { border-color: var(--bill-bad); color: var(--bill-bad); }
.bill-shop-who--guest { gap: 10px; color: var(--bill-muted); }

/* ── Page head ────────────────────────────────────────────────────────── */

.bill-crumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--bill-muted);
    margin-bottom: 14px;
}
.bill-crumbs a { color: var(--bill-muted); text-decoration: none; font-weight: 500; }
.bill-crumbs a:hover { color: var(--bill-accent); }
.bill-crumb-sep { color: rgba(255, 255, 255, .25); }
.bill-crumb-current { color: var(--bill-ink); font-weight: 600; }

.bill-shophead-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
/* min-width:0 is what lets a long invoice number shrink inside the row instead
   of shoving the "Search domains" button off the line. */
.bill-shophead-text { min-width: 0; }

.bill-shop-title {
    font-size: clamp(30px, 4.4vw, 48px) !important;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1px;
    margin: 0;
}
.bill-shop-lede {
    margin: 12px 0 0;
    font-size: 16px;
    color: var(--bill-muted);
    font-weight: 400;
    max-width: 62ch;
}

.bill-shop-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border-radius: var(--bill-pill);
    border: 1px solid var(--bill-line-2);
    color: var(--bill-ink);
    font-size: 14.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
}
.bill-shop-back svg { width: 16px; height: 16px; }
.bill-shop-back:hover { border-color: var(--bill-accent); color: var(--bill-accent); }

/* ── Purchase steps ───────────────────────────────────────────────────── */

.bill-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
}

.bill-step { position: relative; }

.bill-step a {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 9px 20px 9px 9px;
    border-radius: var(--bill-pill);
    color: var(--bill-muted);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}
.bill-step:not(:last-child) a { padding-right: 30px; }
.bill-step a:hover { color: var(--bill-accent); }

.bill-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    border: 1px solid var(--bill-line-2);
    background: var(--bill-flat);
    color: var(--bill-muted);
    font-size: 14px;
    font-weight: 700;
}
.bill-step-dot svg { width: 16px; height: 16px; }

/* Connector between steps, drawn from the step that precedes it. */
.bill-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 22px;
    height: 1px;
    background: var(--bill-line-2);
}

.bill-step.is-done .bill-step-dot { background: var(--bill-ok); border-color: var(--bill-ok); color: #06210F; }
.bill-step.is-done .bill-step-label { color: var(--bill-ink); }

.bill-step.is-current .bill-step-dot {
    background: var(--bill-accent);
    border-color: var(--bill-accent);
    color: #0E0E0E;
    box-shadow: 0 0 0 5px var(--bill-accent-dim);
}
.bill-step.is-current .bill-step-label { color: var(--bill-ink); }

/* A done step has no link, so the label sits on its own. */
.bill-step > span.bill-step-label {
    padding: 0 4px;
    color: var(--bill-muted);
    font-size: 14.5px;
    font-weight: 600;
}
.bill-step.is-done > span.bill-step-label,
.bill-step.is-current > span.bill-step-label { color: var(--bill-ink); }

/* ── Trust strip ──────────────────────────────────────────────────────── */

.bill-trust {
    display: flex;
    align-items: center;
    gap: 12px 30px;
    flex-wrap: wrap;
    list-style: none;
    padding: 18px 24px;
    margin: 22px 0 0;
    border-radius: var(--bill-radius);
    border: 1px solid var(--bill-line);
    background: var(--bill-sunken);
    font-size: 14px;
    color: var(--bill-muted);
}
.bill-trust li { display: inline-flex; align-items: center; gap: 9px; }
.bill-trust svg { width: 16px; height: 16px; color: var(--bill-accent); }

/* ── Flash ────────────────────────────────────────────────────────────── */

.bill-flash {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 22px;
    border-radius: var(--bill-radius);
    border: 1px solid var(--bill-line);
    background: var(--bill-flat);
    font-size: 15px;
}
.bill-flash svg { width: 19px; height: 19px; flex: 0 0 auto; }
.bill-flash--ok   { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .1); }
.bill-flash--ok svg { color: var(--bill-ok); }
.bill-flash--bad  { border-color: rgba(255, 141, 141, .45); background: rgba(255, 141, 141, .1); }
.bill-flash--bad svg { color: var(--bill-bad); }

/* Bootstrap alerts appear once (inside the payment widget's <noscript>). */
.bill-shop-content .alert {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 22px;
    border-radius: var(--bill-radius);
    border: 1px solid var(--bill-line);
    background: var(--bill-flat);
    color: var(--bill-ink);
    font-size: 15px;
}
.bill-shop-content .alert-success { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .1); }
.bill-shop-content .alert-danger,
.bill-shop-content .alert-warning { border-color: rgba(255, 196, 107, .45); background: rgba(255, 196, 107, .1); }

/* The Bootstrap utility classes the shop markup leans on, restated against the
   dark theme. Declared unscoped because client/invoice-print.php loads this file
   on its own — without them the amount column there loses its right alignment. */
.text-end    { text-align: right !important; }
.text-muted {
    color: var(--bill-muted) !important;
    text-align: center;
}
.text-danger { color: var(--bill-bad) !important; }
.text-success{ color: var(--bill-ok) !important; }

.bill-shop-content code {
    color: var(--bill-accent);
    background: rgba(200, 42, 239, .12);
    border-radius: 8px;
    padding: 2px 8px;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.bill-page .btn,
.bill-print-actions .btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: auto;
    gap: 9px;
    width: auto;
    max-width: 100%;
    padding: 13px 26px;
    border-radius: var(--bill-pill);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, background-color .2s, border-color .2s, color .2s;
}
.bill-page .btn svg, .bill-print-actions .btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.bill-page .btn-lg, .bill-print-actions .btn-lg { padding: 16px 32px; font-size: 16.5px; }
.bill-page .btn-sm, .bill-print-actions .btn-sm { padding: 9px 18px; font-size: 14px; }

/* The variants carry the print-action scope too: invoice-print.php loads this
   sheet without Bootstrap, so nothing else would colour those two buttons. */
.bill-page .btn-primary,
.bill-print-actions .btn-primary,
.login-modal .btn-primary {
    background: var(--bill-accent);
    border-color: var(--bill-accent);
    color: #0E0E0E;
}
.bill-page .btn-primary:hover,
.bill-page .btn-primary:focus,
.bill-print-actions .btn-primary:hover,
.login-modal .btn-primary:hover,
.login-modal .btn-primary:focus {
    background: #E05BFF;
    border-color: #E05BFF;
    color: #0E0E0E;
    transform: translateY(-1px);
}

.login-modal .btn-primary {
    justify-content: center;
    text-align: center;
}

.bill-page .btn-outline-primary,
.bill-print-actions .btn-outline-primary {
    background: transparent;
    border-color: var(--bill-accent);
    color: var(--bill-accent);
}
.bill-page .btn-outline-primary:hover,
.bill-print-actions .btn-outline-primary:hover { background: var(--bill-accent); color: #0E0E0E; }

.bill-page .btn-outline-secondary,
.bill-print-actions .btn-outline-secondary {
    background: transparent;
    border-color: var(--bill-line-2);
    color: var(--bill-ink);
}
.bill-page .btn-outline-secondary:hover,
.bill-print-actions .btn-outline-secondary:hover { border-color: var(--bill-accent); color: var(--bill-accent); }

.bill-page .btn-link,
.bill-print-actions .btn-link {
    background: none;
    border: 0;
    color: var(--bill-accent);
    text-decoration: none;
    padding: 6px 4px;
}
.bill-page .btn-link:hover,
.bill-print-actions .btn-link:hover { color: #E05BFF; }

.bill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--bill-pill);
    background: var(--bill-accent);
    color: #0E0E0E;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s;
}
.bill-btn:hover { background: #E05BFF; color: #0E0E0E; }
.bill-btn--sm { padding: 8px 16px; font-size: 13.5px; }

/* The cart pill that rides in the site navbar on shop pages. */
.bill-nav-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    color: var(--bill-ink);
    font-size: 20px;
    text-decoration: none;
    transition: all .3s ease-in-out;
}
.bill-nav-cart:hover { color: var(--bill-accent); }
.bill-nav-cart-count {
    position: absolute;
    top: 1px;
    right: -1px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--bill-pill);
    background: var(--bill-accent);
    color: #0E0E0E;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.bill-page .form-label {
    color: var(--bill-muted);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}
.bill-page .form-label.fw-semibold { color: var(--bill-ink); font-weight: 600; }

.bill-page .form-control,
.bill-page .form-select {
    background-color: var(--bill-sunken);
    border: 1px solid var(--bill-line-2);
    border-radius: var(--bill-pill);
    color: var(--bill-ink);
    font-family: inherit;
    font-size: 15px;
    padding: 13px 22px;
    min-height: 50px;
}
.bill-page textarea.form-control { border-radius: 22px; min-height: 0; }
.bill-page .form-control-sm, .bill-page .form-select-sm {
    padding: 9px 18px;
    min-height: 42px;
    font-size: 14px;
}
.bill-page .form-select option { background: var(--bill-flat); color: var(--bill-ink); }

.bill-page .form-control:focus,
.bill-page .form-select:focus {
    background-color: var(--bill-sunken);
    border-color: var(--bill-accent);
    color: var(--bill-ink);
    box-shadow: 0 0 0 4px var(--bill-accent-dim);
}
.bill-page .form-control::placeholder { color: rgba(209, 209, 209, .38); }

.bill-page .form-text { color: var(--bill-muted); font-size: 13px; }

.bill-page .form-check-input {
    background-color: var(--bill-sunken);
    border: 1px solid var(--bill-line-2);
}
.bill-page .form-check-input:checked {
    background-color: var(--bill-accent);
    border-color: var(--bill-accent);
}
.bill-page .form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E0E0E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 8.4l3.3 3.3L13 5'/%3e%3c/svg%3e");
}
.bill-page .form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E0E0E' stroke-width='3'%3e%3ccircle cx='8' cy='8' r='3.2'/%3e%3c/svg%3e");
}
.bill-page .form-switch .form-check-input { width: 2.9em; height: 1.5em; }
.bill-page .form-check-label { color: var(--bill-ink); font-size: 14.5px; }

.bill-page input[type="checkbox"],
.bill-page input[type="radio"] { accent-color: var(--bill-accent); }

.bill-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--bill-ink);
    cursor: pointer;
}
.bill-check input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; }
.bill-check small { display: block; color: var(--bill-muted); font-size: 12.5px; }

.bill-field { display: block; font-size: 13.5px; }
.bill-field > span { display: block; margin-bottom: 7px; color: var(--bill-muted); font-weight: 500; }
.bill-field-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.bill-field-row .bill-field { flex: 1 1 auto; min-width: 160px; }

.bill-note { font-size: 13.5px; color: var(--bill-muted); margin: 12px 0 0; }
.bill-note strong { color: var(--bill-ink); }

/* ── Panels & shared bits ─────────────────────────────────────────────── */

.bill-panel,
.bill-invoice,
.bill-checkout-form,
.bill-checkout-summary,
.bill-cart-summary,
.bill-manual,
.bill-widget {
    background: var(--bill-panel);
    border: 1px solid var(--bill-line);
    border-radius: var(--bill-radius);
    padding: 26px;
}

.bill-panel { margin-bottom: 0; }
.bill-panel h2, .bill-panel h3 {
    display: block;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.2px;
    margin: 0 0 8px;
    text-transform: uppercase;
        text-align: center;
}
.bill-panel h2 svg, .bill-panel h3 svg { width: 18px; height: 18px; color: var(--bill-accent); }

.bill-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 13px;
    border-radius: var(--bill-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
}
.bill-status--ok   { background: rgba(74, 222, 128, .15);  color: var(--bill-ok); }
.bill-status--warn { background: rgba(255, 196, 107, .15); color: var(--bill-warn); }
.bill-status--bad  { background: rgba(255, 141, 141, .15); color: var(--bill-bad); }

.bill-tag {
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: var(--bill-pill);
    background: rgba(255, 196, 107, .15);
    color: var(--bill-warn);
    font-size: 11px;
    font-weight: 700;
}

.bill-notice {
    display: flex;
    gap: 14px;
    padding: 18px 22px;
    border-radius: var(--bill-radius);
    background: var(--bill-flat);
    border: 1px solid var(--bill-line);
    margin-bottom: 20px;
    font-size: 15px;
}
.bill-notice > svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: var(--bill-accent); }
.bill-notice strong { display: block; margin-bottom: 3px; }
.bill-notice p { margin: 0; font-size: 14.5px; color: var(--bill-muted); }
.bill-notice--ok   { background: rgba(74, 222, 128, .1);  border-color: rgba(74, 222, 128, .35); }
.bill-notice--ok > svg { color: var(--bill-ok); }
.bill-notice--warn { background: rgba(255, 196, 107, .1); border-color: rgba(255, 196, 107, .35); }
.bill-notice--warn > svg { color: var(--bill-warn); }

/* Optional action parked on the right of a notice. The notice is a flex row
   (icon + copy), so the button only reaches the right edge via margin-left:auto.
   flex-wrap keeps it usable on a phone: below the wrap it drops to its own line
   rather than squeezing the copy into a two-word column.

   The class is expected ON the button, so the compound selector is written
   ".bill-notice-action" — a bare ".bill-notice-action .btn" would be a
   descendant selector and would never match, since the button is the element
   carrying the class. The descendant form is kept too so the class also works
   if it is ever put on a wrapper element instead. */
.bill-notice > :not(svg) { min-width: 0; }
.bill-notice-action,
.bill-notice-action .btn {
    margin-left: auto;
    align-self: center;
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 575px) {
    .bill-notice { flex-wrap: wrap; row-gap: 14px; }
    .bill-notice-action,
    .bill-notice-action .btn {
        margin-left: 0;
        width: 100%;
    }
}

.bill-consent {
    display: flex;
    gap: 13px;
    padding: 17px 20px;
    background: var(--bill-flat);
    border: 1px solid var(--bill-line);
    border-radius: var(--bill-radius);
    font-size: 14px;
    color: var(--bill-muted);
    margin: 20px 0;
}
.bill-consent > svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--bill-accent); }

.bill-instructions {
    padding: 16px 20px;
    background: var(--bill-flat);
    border-left: 3px solid var(--bill-accent);
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 14.5px;
    color: var(--bill-ink);
}

/* ── Empty cart ──────────────────────────────────────────────────────── */

/* The empty cart is a two-block page: a card that says what happened and what to
   do next, then a live price list. Same panel, border and radius language as a
   stocked cart, so the page does not change shape between the two states. */
.bill-empty-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
}
@media (min-width: 992px) {
    .bill-empty-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
}

.bill-empty {
    text-align: center;
    padding: 54px 34px 40px;
    border: 1px solid var(--bill-line);
    border-radius: var(--bill-radius);
    background: var(--bill-panel);
}

/* The icon sits in a ring rather than floating bare, which is how the rest of the
   theme treats a single leading glyph. */
.bill-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 1px solid var(--bill-line-2);
    background: var(--bill-sunken);
}
.bill-empty-icon svg { width: 36px; height: 36px; color: var(--bill-accent); }

.bill-empty h2 { font-size: 28px !important; font-weight: 800; margin: 22px 0 10px; }
.bill-empty p {
    color: var(--bill-muted);
    margin: 0 auto 26px;
    font-size: 15.5px;
    max-width: 46ch;
}
.bill-empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Reassurance sits under the actions as a quiet single line, the same job the
   shopbar trust strip does once there is a purchase to reassure about. */
.bill-empty-assure {
    list-style: none;
    padding: 22px 0 0;
    margin: 26px 0 0;
    border-top: 1px solid var(--bill-line);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 26px;
    font-size: 13.5px;
    color: var(--bill-muted);
}
.bill-empty-assure li { display: inline-flex; align-items: center; gap: 8px; }
.bill-empty-assure svg { width: 15px; height: 15px; color: var(--bill-accent); flex: 0 0 auto; }

.bill-extensions {
    padding: 34px 32px 30px;
    border: 1px solid var(--bill-line);
    border-radius: var(--bill-radius);
    background: var(--bill-flat);
}
.bill-extensions-head { margin-bottom: 22px; }
.bill-extensions-head h2 { font-size: 20px !important; font-weight: 700; margin: 0 0 6px; }
.bill-extensions-head p { margin: 0; font-size: 14px; color: var(--bill-muted); }

.bill-extension-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
}
.bill-extension {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px 16px;
    border: 1px solid var(--bill-line);
    border-radius: 18px;
    background: var(--bill-sunken);
    color: inherit;
    text-decoration: none;
    transition: border-color .2s, transform .2s, background-color .2s;
}
.bill-extension:hover {
    border-color: var(--bill-accent);
    background: var(--bill-flat);
    transform: translateY(-2px);
}
.bill-extension-tld { font-size: 21px; font-weight: 800; letter-spacing: -.4px; }
.bill-extension-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--bill-accent);
}
.bill-extension-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--bill-muted);
}
.bill-extension:hover .bill-extension-go { color: var(--bill-ink); }
.bill-extension-go svg { width: 13px; height: 13px; }

@media (max-width: 575px) {
    .bill-empty { padding: 38px 20px 30px; }
    .bill-extensions { padding: 26px 20px 24px; }
}

/* ── Stats & lists ────────────────────────────────────────────────────── */

.bill-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 4px;
}
.bill-stat {
    background: var(--bill-panel);
    border: 1px solid var(--bill-line);
    border-radius: var(--bill-radius);
    padding: 20px 22px;
}
.bill-stat strong { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.6px; }
.bill-stat span { font-size: 13px; color: var(--bill-muted); }

.bill-upcoming, .bill-invoice-list, .bill-activity { list-style: none; padding: 0; margin: 0; }
.bill-upcoming li, .bill-invoice-list li, .bill-activity li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bill-line);
    font-size: 15px;
}
.bill-upcoming li:last-child, .bill-invoice-list li:last-child, .bill-activity li:last-child { border-bottom: 0; }
.bill-invoice-list a { display: flex; gap: 10px; align-items: baseline; text-decoration: none; color: inherit; }
.bill-invoice-list a:hover { color: var(--bill-accent); }
.bill-activity small { font-size: 12.5px; }

.bill-order-domain { font-weight: 700; }
.bill-order-meta { display: block; font-size: 13px; color: var(--bill-muted); }
.bill-order-list { list-style: none; padding: 0; margin: 0 0 20px; }
.bill-order-list li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--bill-line);
}
.bill-order-list li:last-child { border-bottom: 0; }
.bill-order-price { font-weight: 700; text-align: right; }
.bill-order-list .bill-order-meta { grid-column: 1; }
.bill-order-list .bill-order-price { grid-row: 1 / span 2; align-self: center; }

/* ── Cart: product rows beside a sticky summary ────────────────────────── */

.bill-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 26px;
    align-items: start;
}

.bill-cart-list { display: flex; flex-direction: column; gap: 14px; }

.bill-cart-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--bill-panel);
    border: 1px solid var(--bill-line);
    border-radius: var(--bill-radius);
    padding: 22px;
    transition: border-color .25s;
}
.bill-cart-row:hover { border-color: var(--bill-line-2); }

/* A domain has no photograph, so the extension stands in for one. */
.bill-cart-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    flex: 0 0 66px;
    border-radius: 20px 20px 20px 6px;
    background: var(--bill-panel);
    border: 1px solid var(--bill-line-2);
    color: var(--bill-accent);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .3px;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.bill-cart-main { flex: 1 1 auto; min-width: 0; }
.bill-cart-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.bill-cart-domain { font-size: 19px; font-weight: 700; letter-spacing: -.2px; }
.bill-cart-type {
    padding: 3px 12px;
    border-radius: var(--bill-pill);
    background: rgba(255, 196, 107, .15);
    color: var(--bill-warn);
    font-size: 11.5px;
    font-weight: 700;
}
.bill-cart-controls { display: flex; flex-direction: column; gap: 13px; }
.bill-cart-money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
    min-width: 150px;
}
.bill-cart-price { font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.bill-cart-was { font-size: 14px; color: var(--bill-muted); text-decoration: line-through; }
.bill-cart-save { font-size: 12.5px; color: var(--bill-ok); font-weight: 700; }

.bill-ns summary,
.bill-domain-detail summary {
    cursor: pointer;
    font-size: 13.5px;
    color: var(--bill-muted);
    transition: color .2s;
}
.bill-ns summary:hover,
.bill-domain-detail summary:hover { color: var(--bill-accent); }
.bill-ns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 13px;
    align-items: end;
}

.bill-cart-summary { position: sticky; top: 106px; }

.bill-summary-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bill-summary-title svg { width: 18px; height: 18px; color: var(--bill-accent); }

.bill-coupon { margin-bottom: 22px; }
.bill-coupon-applied { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--bill-ok); font-weight: 600; }
.bill-coupon-applied svg { width: 16px; height: 16px; }

.bill-totals { margin: 0; }
.bill-totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 15px; }
.bill-totals dt { font-weight: 500; color: var(--bill-muted); margin: 0; }
.bill-totals dd { margin: 0; font-weight: 600; }
.bill-totals-save dt, .bill-totals-save dd { color: var(--bill-ok); }
.bill-totals-grand {
    border-top: 1px solid var(--bill-line);
    margin-top: 10px;
    padding-top: 15px !important;
}
.bill-totals-grand dt, .bill-totals-grand dd { font-size: 21px; font-weight: 800; color: var(--bill-ink); }

/* The "added today" / coupon note under a total reads as a footnote, not as a
   squeezed-in extra row, so it drops onto its own line inside the same block. */
.bill-totals small {
    display: block;
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bill-muted);
}

.bill-cart-buttons { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.bill-cart-buttons .btn-lg { margin-left: auto; }

/* ── Checkout ─────────────────────────────────────────────────────────── */

.bill-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 26px;
    align-items: start;
}
.bill-checkout-form h2, .bill-checkout-summary h2 { font-size: 19px; font-weight: 700; margin: 0 0 8px; }
.bill-checkout-form > p { color: var(--bill-muted); font-size: 14.5px; margin-bottom: 24px; }
.bill-checkout-summary { position: sticky; top: 106px; }

.bill-auth { max-width: 560px; margin: 0 auto; }

/* ── Invoice ──────────────────────────────────────────────────────────── */

.bill-invoice { padding: 30px; }

.bill-invoice-head {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--bill-line);
    margin-bottom: 24px;
}
.bill-invoice-head h2 { font-size: 21px !important; font-weight: 700; margin: 0 0 10px; }
.bill-invoice-head p { font-size: 14.5px; line-height: 1.65; margin: 0; }
.bill-invoice-number { font-size: 16px; font-weight: 800; letter-spacing: .4px; margin: 0 0 8px !important; }
.bill-invoice-meta { text-align: right; }
.bill-invoice-meta dl { margin: 14px 0 0; }
.bill-invoice-meta dl > div { display: flex; justify-content: flex-end; gap: 18px; padding: 3px 0; font-size: 14px; }
.bill-invoice-meta dt { color: var(--bill-muted); font-weight: 500; margin: 0; }
.bill-invoice-meta dd { margin: 0; font-weight: 600; }

.bill-invoice-lines { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.bill-invoice-lines th, .bill-invoice-lines td { padding: 13px 10px; text-align: left; vertical-align: top; }
.bill-invoice-lines thead th {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--bill-muted);
    border-bottom: 1px solid var(--bill-line-2);
}
.bill-invoice-lines tbody tr { border-bottom: 1px solid var(--bill-line); }
.bill-invoice-lines tbody td { font-size: 15px; }
.bill-invoice-lines tfoot th, .bill-invoice-lines tfoot td { font-size: 16px; border-top: 1px solid var(--bill-line); }
.bill-invoice-total th, .bill-invoice-total td { font-size: 20px !important; font-weight: 800; }
.bill-invoice-lines--small th, .bill-invoice-lines--small td { padding: 9px 8px; font-size: 14px; }
.bill-line-note { display: block; margin-top: 5px; font-size: 12.5px; color: var(--bill-muted); }

/* Action cell of a table row. The cell keeps Bootstrap's .text-end for the
   text-align contract, but the buttons are laid out with flex instead: inline
   anchors in a right-aligned cell have no gap between them and wrap badly on a
   phone. justify-content:flex-end reproduces the right alignment. */
.bill-row-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Icon-only button. Square so a column of them lines up, and the label lives on
   title/aria-label rather than in the markup — hence the sr-only span. */
.bill-icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.bill-icon-btn svg { width: 16px; height: 16px; }

.bill-payments { margin: 28px 0; }
.bill-payments h3 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }

.bill-pay { border-top: 1px solid var(--bill-line); padding-top: 24px; margin-top: 26px; }
.bill-pay h3 { font-size: 18px; font-weight: 700; margin: 0 0 16px; }
.bill-pay-list { display: flex; flex-direction: column; gap: 12px; }

.bill-pay-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 17px 20px;
    border: 1px solid var(--bill-line-2);
    border-radius: 18px;
    background: var(--bill-sunken);
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
.bill-pay-option:hover { border-color: var(--bill-accent-dim); background: rgba(200, 42, 239, .06); }
.bill-pay-option:has(input:checked) { border-color: var(--bill-accent); background: rgba(200, 42, 239, .12); }
.bill-pay-option input[type="radio"] { flex: 0 0 auto; width: 20px; height: 20px; }
.bill-pay-body { flex: 1 1 auto; min-width: 0; }
.bill-pay-name { display: block; font-weight: 700; font-size: 15.5px; }
.bill-pay-sub { display: block; font-size: 13.5px; color: var(--bill-muted); }
.bill-pay-fee { display: block; font-size: 13.5px; color: var(--bill-muted); margin-top: 3px; }
.bill-pay-total { font-weight: 800; font-size: 18px; white-space: nowrap; }

/* ── Domains ──────────────────────────────────────────────────────────── */

.bill-domain-card {
    border: 1px solid var(--bill-line);
    border-radius: var(--bill-radius);
    background: var(--bill-panel);
    padding: 24px;
    margin-bottom: 18px;
}
.bill-domain-card header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--bill-line);
    margin-bottom: 17px;
}
.bill-domain-card h3 { font-size: 19px; font-weight: 700; margin: 0 0 9px; }
.bill-domain-meta { display: flex; gap: 30px; flex-wrap: wrap; }
.bill-domain-meta small { display: block; font-size: 11px; color: var(--bill-muted); text-transform: uppercase; letter-spacing: .5px; }
.bill-domain-meta strong { font-size: 15px; font-weight: 600; }
.bill-domain-detail summary { color: var(--bill-accent); }
.bill-domain-actions { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--bill-line); }

/* ── Manual gateway & inline widget ───────────────────────────────────── */

.bill-manual, .bill-widget { max-width: 760px; margin: 0 auto; }
.bill-invoice-meta-inline { display: flex; gap: 38px; flex-wrap: wrap; margin-bottom: 22px; }
.bill-invoice-meta-inline small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--bill-muted); }
.bill-invoice-meta-inline strong { font-size: 18px; font-weight: 800; }
.bill-manual-form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.bill-manual-form h3 { font-size: 17px; font-weight: 700; margin: 0; }
.bill-widget-slot { min-height: 240px; display: flex; align-items: center; justify-content: center; }

/* ── Print sheet ──────────────────────────────────────────────────────── */

.bill-print {
    background: #0A0A0A;
    padding: 26px;
}
.bill-print-actions { max-width: 800px; margin: 0 auto 18px; display: flex; gap: 10px; }
.bill-print-sheet {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    color: #1f2933;
    border-radius: var(--bill-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    padding: 46px;
}
.bill-print-logo { max-height: 42px; margin-bottom: 14px; }
.bill-print-head {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    padding-bottom: 24px;
    border-bottom: 2px solid #1f2933;
    margin-bottom: 24px;
}
.bill-print-head h1 { font-size: 30px; font-weight: 800; margin: 0 0 6px; color: #1f2933; }
.bill-print-head p { font-size: 14px; color: #4b5563; margin: 0; line-height: 1.6; }
.bill-print-meta { text-align: right; }
.bill-print-number { font-size: 16px; font-weight: 800; letter-spacing: .4px; margin: 0 0 8px; color: #1f2933; }
.bill-print-meta dl { margin: 10px 0 0; }
.bill-print-meta dl > div { display: flex; justify-content: flex-end; gap: 16px; padding: 2px 0; font-size: 13.5px; }
.bill-print-meta dt { color: #6b7280; margin: 0; }
.bill-print-meta dd { margin: 0; font-weight: 600; }
.bill-print-parties { margin-bottom: 26px; font-size: 14px; }
.bill-print-parties h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: #6b7280; margin: 0 0 6px; }
.bill-print-parties p { margin: 0; line-height: 1.65; color: #1f2933; font-size: 14px; }
.bill-print-sheet .bill-invoice-lines th, .bill-print-sheet .bill-invoice-lines td { color: #1f2933; }
.bill-print-sheet .bill-invoice-number { color: #1f2933; font-weight: 800; }
.bill-print-sheet .text-muted { color: #4b5563 !important; }
.bill-print-sheet .bill-invoice-lines thead th { color: #6b7280; border-bottom-color: #d1d5db; }
.bill-print-sheet .bill-invoice-lines tbody tr { border-bottom-color: #e5e7eb; }
.bill-print-sheet .bill-invoice-lines tfoot th, .bill-print-sheet .bill-invoice-lines tfoot td { border-top-color: #d1d5db; }
.bill-print-foot { margin-top: 30px; padding-top: 18px; border-top: 1px solid #e5e7eb; font-size: 13px; }
.bill-print-foot p { color: #4b5563; font-size: 13px; margin: 0 0 4px; }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .bill-cart-layout, .bill-checkout { grid-template-columns: 1fr; }
    .bill-cart-summary, .bill-checkout-summary { position: static; }
    .bill-cart-buttons .btn-lg { margin-left: 0; }
}

@media (max-width: 768px) {
    .bill-page { padding: 22px 16px 70px; gap: 20px; }
    .bill-shopbar { position: static; padding: 8px; }
    .bill-shopnav { gap: 2px; }
    .bill-shopnav-link { padding: 9px 14px; font-size: 13.5px; }
    .bill-shopbar-inner { justify-content: flex-start; }
    .bill-cart-row { flex-wrap: wrap; padding: 18px; }
    .bill-cart-thumb { width: 54px; height: 54px; flex: 0 0 54px; }
    .bill-cart-money { align-items: flex-start; text-align: left; min-width: 0; }
    .bill-cart-buttons .btn-lg, .bill-cart-buttons .btn { width: 100%; }
    .bill-panel, .bill-invoice, .bill-checkout-form, .bill-checkout-summary,
    .bill-cart-summary, .bill-manual, .bill-widget { padding: 20px; }
    .bill-invoice-head { flex-direction: column; }
    .bill-invoice-meta, .bill-print-meta { text-align: left; }
    .bill-invoice-meta dl > div, .bill-print-meta dl > div { justify-content: flex-start; }
    .bill-domain-meta { gap: 18px; }
    .bill-steps { gap: 4px; }
    .bill-step a, .bill-step > span.bill-step-label { padding: 8px 12px; font-size: 13px; }
    .bill-step:not(:last-child) a { padding-right: 18px; }
    .bill-step:not(:last-child)::after { width: 12px; }
    .bill-print-sheet { padding: 22px; }
}