/* ==========================================================================
   BrackNodes full visual redesign for the WHMCS client area (Nexus theme)
   Goal: feel like an extension of bracknodes.in, not a recolored Bootstrap
   admin panel - rounded cards, glow shadows, gradient buttons, spacious
   layout, backdrop-blur header, matching typography scale.
   CSS-only: no core template (.tpl) file is touched, so WHMCS updates and
   functionality stay completely safe. Everything here targets the compiled
   theme.min.css output directly (verified against its actual selectors).
   ========================================================================== */

:root {
    --bn-bg: #0a0f1a;
    --bn-bg-alt: #0b1220;
    --bn-bg-card: #0f1729;
    --bn-bg-hover: #142036;
    --bn-border: rgba(255, 255, 255, .08);
    --bn-border-strong: rgba(255, 255, 255, .14);
    --bn-text: #ffffff;
    --bn-text-muted: rgba(255, 255, 255, .65);
    --bn-brand-300: #8ac0ff;
    --bn-brand-400: #54a5ff;
    --bn-brand-500: #2d8bff;
    --bn-brand-600: #1e6fe6;
    --bn-brand-700: #1858b4;
    --bn-emerald: #34d399;
    --bn-amber: #fbbf24;
    --bn-rose: #f43f5e;
    --bn-radius-lg: 1.25rem;
    --bn-radius-md: .75rem;
    --bn-radius-sm: .5rem;
    --bn-glow: 0 10px 25px -5px rgba(45, 139, 255, .25), 0 8px 10px -6px rgba(45, 139, 255, .15);
}

:root {
    color-scheme: dark;
}
* {
    scrollbar-color: var(--bn-brand-700) var(--bn-bg);
}
select,
select option,
.form-control option {
    color-scheme: dark;
    -webkit-text-fill-color: var(--bn-text) !important;
    color: var(--bn-text) !important;
    background-color: var(--bn-bg-alt) !important;
}
.iti-flag {
    background-blend-mode: normal !important;
    filter: none !important;
}

body {
    background-color: var(--bn-bg) !important;
    background-image:
        radial-gradient(circle at 15% 0%, rgba(45, 139, 255, .10), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(45, 139, 255, .06), transparent 35%);
    background-attachment: fixed;
    color: var(--bn-text);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

a {
    color: var(--bn-brand-400);
}
a:hover {
    color: var(--bn-brand-300);
}

h1, h2, h3, h4, h5, h6, .card-title {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* --- Broad reset: every one of these containers goes dark with light text.
   More specific rules further down (badges, alerts, colored TLD price tags,
   brand buttons) restore intentional colors and win via later cascade order
   at the same !important weight. --- */
.tile,
.tiles .tile,
.card,
.card-header,
.card-body,
.card-footer,
.client-home-cards .card-header,
.panel,
.panel-heading,
.panel-body,
.panel-footer,
.bg-white,
.bg-light,
.widget,
.widget-content,
.widget-body,
.table-light,
.table-light > td,
.table-light > th,
.form-control,
.form-control:focus,
.custom-select,
.custom-select:disabled,
.custom-file-label,
.custom-file-label::after,
.input-group-text,
.dropdown-menu,
.dropdown-item:hover,
.list-group-item,
.list-group-item.disabled,
.list-group-item:disabled,
.modal-content,
.popover-header,
.header,
#header,
.btn-default,
.btn-light,
.table td,
.table th,
.table-list thead th,
.table-list > tbody > tr > td,
.table-list > tbody > tr:hover > td,
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc,
.breadcrumb,
.jumbotron,
.progress,
.page-link,
.page-item.disabled .page-link,
.select-account a:hover,
.continue-container,
.invite-box,
.action-icon-btns a,
.home-domain-search .input-group-wrapper,
#domainRenewals,
.verification-banner,
.md-editor > .btn-toolbar,
.md-editor > .md-preview,
.md-editor > textarea.markdown-editor,
.markdown-content table,
.md-preview table,
.markdown-content table > thead > tr > th,
.store-order-container .store-domain-tabs li a,
.store-order-container .store-domain-tabs li.active a,
.promo-banner,
.upgrade .product-to-be-upgraded,
.upgrade .products .product,
.view-ticket .posted-by,
.view-ticket .attachment-list li figure,
.ticketfeedbackstaffcont,
#registration .sub-heading span,
.credit-card,
.invoice-summary-table td.total-row,
.masspay-total td,
.product-details div.product-icon,
.product-details-tab-container,
.featured-tld,
.domain-pricing .tld-pricing-header [class*="col-"],
#order-standard_cart .cart-body .view-cart-empty,
#order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
.tld-column,
.responsive-tabs-sm .nav-item a:hover,
.responsive-tabs-sm .nav-item a.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active,
.twofa-setup .backup-code,
.popover-user-notifications ul li a:hover,
.has-error textarea.form-control,
.alert-secondary,
.alert-warning,
.alert-danger,
.alert-light,
.badge-light,
.sidebar,
.sidebar .list-group-item,
.main-navbar-wrapper,
#footer,
footer {
    background-color: var(--bn-bg-card) !important;
    background-image: none !important;
    border-color: var(--bn-border) !important;
    color: var(--bn-text) !important;
}
/* The ticket/message textarea's top+bottom border is set as
   border-top/border-bottom (each a shorthand bundling width+style+#ddd
   colour together) in the core theme CSS, not as a plain border-color -
   the border-color override just above only ever touched the *-color
   longhands, so in practice it was a coin flip whether it actually beat
   the more specific-looking border-top/border-bottom declarations for
   those same longhands. Setting border-top-color/border-bottom-color
   explicitly here removes any doubt - #ddd (built for a white page) was
   showing up as a stark white line across the middle of the dark editor. */
.md-editor > textarea.markdown-editor {
    border-top-color: var(--bn-border) !important;
    border-bottom-color: var(--bn-border) !important;
}
/* This status bar (character/word count under the editor) has no
   background of its own here, and its own text colour (#959694, a mid
   grey meant for a white page) plus whatever it was inheriting behind it
   was reading as a pale/white bar under the message box. */
.markdown-editor-status {
    background-color: var(--bn-bg-card) !important;
    color: var(--bn-text-muted) !important;
}
/* Bootstrap popovers (the notifications bell's dropdown is one) - only
   .popover-header was ever dark-themed here, which this one doesn't even
   use, so the actual box (white, #fff) and its arrow (white/light-grey
   triangle) were showing Bootstrap's stock light-page styling untouched. */
.popover {
    background-color: var(--bn-bg-card) !important;
    border-color: var(--bn-border-strong) !important;
    color: var(--bn-text) !important;
}
.popover-body {
    color: var(--bn-text) !important;
}
.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before { border-top-color: var(--bn-border-strong) !important; }
.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after { border-top-color: var(--bn-bg-card) !important; }
.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before { border-bottom-color: var(--bn-border-strong) !important; }
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after { border-bottom-color: var(--bn-bg-card) !important; }
.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before { border-left-color: var(--bn-border-strong) !important; }
.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after { border-left-color: var(--bn-bg-card) !important; }
.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before { border-right-color: var(--bn-border-strong) !important; }
.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after { border-right-color: var(--bn-bg-card) !important; }
/* The notification list itself - icons/links/empty-state text inside the
   popover, same styling treatment as everywhere else on the dark theme. */
.client-alerts { margin: 0; padding: 0; list-style: none; }
.client-alerts li a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .25rem;
    color: var(--bn-text) !important;
    text-decoration: none !important;
}
.client-alerts li a:hover { color: var(--bn-brand-400) !important; }
.client-alerts li.none {
    padding: .5rem .25rem;
    color: var(--bn-text-muted);
}
/* The invoice page (viewinvoice.php) ships white-on-white by default -
   invoice.min.css sets .invoice-container{background:#fff}, a print-style
   convention that clashed with this site's dark theme. Recoloured to match
   the same surface tone the nested .card boxes (Invoice Items, Ledger)
   already use, so the whole document reads as one consistent dark sheet
   instead of a plain white page floating on a dark background. */
.invoice-container {
    background-color: var(--bn-bg-card) !important;
    border-color: var(--bn-border) !important;
    color: var(--bn-text) !important;
}
/* hr's default border colour (rgba(0,0,0,.1), invoice.min.css) is built for
   a white sheet and is essentially invisible on the new dark background. */
.invoice-container hr {
    border-top-color: var(--bn-border-strong) !important;
}
/* Same problem, different page: the ticket reply message's <hr> (shown
   above the IP address line) has no colour override at all here, so it
   falls back to the browser's own default <hr> style - on a dark page
   with white text, that renders as a stark white/bright line instead of a
   subtle divider. */
.view-ticket hr {
    border: none;
    border-top: 1px solid var(--bn-border-strong);
}
/* .refunded's default colour (#248 = #224488, invoice.min.css) is a dark
   blue that all but disappears against the equally-dark sheet above -
   lightened so the status stays legible. */
.invoice-container .refunded {
    color: #7fb0ff !important;
}
.tile *,
.card *,
.panel *,
.dropdown-menu *,
.list-group-item *,
.modal-content *,
.breadcrumb *,
.table-list *,
.credit-card *,
.featured-tld *,
.action-icon-btns a * {
    color: inherit;
}

/* --------------------------------------------------------------------
   STRUCTURAL REDESIGN: shape, elevation, spacing, motion
   -------------------------------------------------------------------- */

/* Cards: rounded, soft border, gentle glow shadow, subtle hover lift */
.card,
.tile,
.modal-content,
.credit-card,
.featured-tld {
    border-radius: var(--bn-radius-lg) !important;
    border: 1px solid var(--bn-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .35) !important;
    overflow: hidden;
}
/* .list-group is always nested straight inside a .card here (e.g. the
   Categories/Actions sidebar) - giving it its own border-radius/border too
   produced a visible "double rounded rectangle" ghosting seam right next
   to the card's own edge. The parent card already provides the border. */
.list-group {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover {
    border-color: var(--bn-border-strong) !important;
}
.card-header {
    border-bottom: 1px solid var(--bn-border) !important;
    padding: 1.1rem 1.4rem !important;
    font-size: 1.05rem;
}
.card-body {
    padding: 1.4rem !important;
}
.card-footer {
    border-top: 1px solid var(--bn-border) !important;
    padding: .9rem 1.4rem !important;
}
.list-group-item {
    border-color: var(--bn-border) !important;
    transition: background-color .15s ease;
}
.list-group-item:hover {
    background-color: var(--bn-bg-hover) !important;
}

/* Dashboard stat tiles: bigger radius, icon accent circle, lift-on-hover */
.tiles .tile {
    border-radius: var(--bn-radius-md) !important;
    margin: 0 6px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tiles .tile:hover {
    background-color: var(--bn-bg-hover) !important;
    transform: translateY(-3px);
    box-shadow: var(--bn-glow) !important;
}
.tile .title {
    color: var(--bn-text-muted) !important;
    font-size: .72rem;
    letter-spacing: .06em;
}
.tile i {
    color: var(--bn-brand-500) !important;
    opacity: .9;
}
.tile .stat {
    color: var(--bn-text) !important;
    font-weight: 800;
}
.tile .highlight {
    border-radius: 999px;
}

/* Buttons: gradient primary with glow, pill-ish rounding, lift on hover */
.btn {
    border-radius: var(--bn-radius-sm) !important;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn-primary,
.btn.btn-success.open-modal.twofa-config-link.enable {
    background: linear-gradient(135deg, var(--bn-brand-400), var(--bn-brand-600)) !important;
    border-color: var(--bn-brand-500) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(45, 139, 255, .35);
}
.btn-primary:hover,
.btn-primary:focus {
    transform: translateY(-1px);
    box-shadow: var(--bn-glow) !important;
    border-color: var(--bn-brand-400) !important;
}
.btn-outline-primary {
    color: var(--bn-brand-400) !important;
    border-color: var(--bn-brand-500) !important;
}
.btn-outline-primary:hover {
    background-color: var(--bn-brand-500) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.btn-default,
.btn-light,
.btn-outline-light:hover {
    background-color: var(--bn-bg-alt) !important;
    border-color: var(--bn-border) !important;
    color: var(--bn-text) !important;
}
.btn-default:hover,
.btn-default.focus,
.btn-default:focus,
.btn-default.active,
.btn-default:active {
    background-color: var(--bn-bg-hover) !important;
    border-color: var(--bn-brand-500) !important;
    transform: translateY(-1px);
}
.btn-success { background-color: var(--bn-emerald) !important; border-color: var(--bn-emerald) !important; }
.btn-warning { background-color: var(--bn-amber) !important; border-color: var(--bn-amber) !important; color: #1a1a1a !important; }
.btn-danger  { background-color: var(--bn-rose) !important; border-color: var(--bn-rose) !important; }
.bg-color-blue   { background: linear-gradient(135deg, var(--bn-brand-400), var(--bn-brand-600)) !important; }
.bg-color-green  { background-color: var(--bn-emerald) !important; }
.bg-color-red    { background-color: var(--bn-rose) !important; }
.bg-color-gold, .bg-color-orange { background-color: var(--bn-amber) !important; color: #1a1a1a !important; }

/* --- Header: sticky, translucent, blurred (matches the main site's nav) --- */
#header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(10, 15, 26, .85) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bn-border);
}
#header .navbar,
#header .topbar,
.main-navbar-wrapper {
    background-color: transparent !important;
}
#header .navbar-brand,
#header .navbar-nav > li > a,
#header #nav > li > a,
#header .navbar-nav .nav-link,
#header .navbar-nav .nav-item > a {
    color: rgba(255, 255, 255, .8) !important;
    font-weight: 600;
    padding: .5rem .9rem !important;
    border-radius: var(--bn-radius-sm, .5rem);
    transition: color .15s ease, background-color .15s ease;
}
#header .navbar-nav > li > a:hover,
#header #nav > li > a:hover,
#header .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-link.active,
#header .navbar-nav .nav-item > a:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .06);
}
#header .navbar-nav > li.active > a,
#header #nav > li.active > a {
    color: var(--bn-brand-400) !important;
}
#header .dropdown-menu {
    border-radius: var(--bn-radius-md, .75rem) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important;
    margin-top: .5rem !important;
}
#header .dropdown-item {
    color: rgba(255, 255, 255, .75) !important;
}
#header .dropdown-item:hover {
    color: #fff !important;
    background-color: var(--bn-bg-hover) !important;
}

/* --- Pill-style nav bar, matching bracknodes.in's main nav exactly --- */
@media (min-width: 1200px) {
    .main-navbar-wrapper .navbar-collapse {
        display: flex;
        justify-content: center;
        padding: .5rem 0;
    }
    .main-navbar-wrapper #nav {
        display: inline-flex;
        gap: .15rem;
        background-color: rgba(255, 255, 255, .05);
        border: 1px solid var(--bn-border);
        border-radius: 999px;
        padding: .3rem;
        margin: 0 auto;
    }
    .main-navbar-wrapper #nav > li > a,
    .main-navbar-wrapper #nav > li > a.dropdown-toggle {
        border-radius: 999px !important;
        padding: .5rem 1.1rem !important;
        font-size: .9rem;
    }
    .main-navbar-wrapper #nav > li.active > a {
        background: linear-gradient(135deg, var(--bn-brand-400), var(--bn-brand-600)) !important;
        color: #fff !important;
        box-shadow: 0 4px 14px rgba(45, 139, 255, .35);
    }
    .main-navbar-wrapper .navbar-nav.ml-auto {
        position: absolute;
        right: 1rem;
    }
}

/* --- Logo: gradient icon badge + wordmark, like the main site --- */
#header .navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
}
#header .navbar-brand img.logo-img {
    background: linear-gradient(135deg, var(--bn-brand-500), var(--bn-brand-700));
    border-radius: var(--bn-radius-sm, .5rem);
    padding: 6px;
    box-shadow: 0 4px 14px rgba(45, 139, 255, .3);
    max-height: 40px;
    width: 40px;
    object-fit: contain;
}

/* --- Mobile menu panel (Bootstrap collapse, xl breakpoint) --- */
@media (max-width: 1199.98px) {
    .main-navbar-wrapper {
        border-top: 1px solid var(--bn-border);
    }
    .main-navbar-wrapper .navbar-collapse.show,
    .main-navbar-wrapper .navbar-collapse.collapsing {
        background-color: rgba(10, 15, 26, .97) !important;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-radius: 0 0 var(--bn-radius-lg) var(--bn-radius-lg);
        padding: .75rem;
    }
    .main-navbar-wrapper #nav,
    .main-navbar-wrapper .navbar-nav.ml-auto {
        gap: .25rem;
    }
    .main-navbar-wrapper #nav > li > a,
    .main-navbar-wrapper .navbar-nav.ml-auto > li > a {
        display: block;
        border-radius: var(--bn-radius-sm) !important;
        padding: .75rem 1rem !important;
    }
    .main-navbar-wrapper #nav > li.active > a {
        background-color: rgba(45, 139, 255, .18) !important;
        color: var(--bn-brand-300) !important;
    }
}

/* --------------------------------------------------------------------
   MOBILE / SMALL-SCREEN POLISH (phones and small tablets)
   -------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body { overflow-x: hidden; }

    #header .topbar .container > .d-flex {
        flex-wrap: wrap;
        gap: .5rem;
    }
    #header .topbar .ml-auto .active-client {
        max-width: 60vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #header .navbar > .container {
        flex-wrap: nowrap;
    }
    #header form.form-inline.d-xl-block {
        display: none !important;
    }
    #header .navbar-brand span:last-child {
        font-size: 1.05rem;
    }

    /* Stat tiles: 2 per row already via Bootstrap col-6, just tighten padding */
    .tile {
        padding: 14px !important;
    }
    .tile i {
        font-size: 34px !important;
        top: 8px !important;
        right: 12px !important;
    }
    .tile .stat {
        font-size: 1.6rem !important;
        margin-top: 10px !important;
    }

    .card-header, .card-body, .card-footer {
        padding: 1rem !important;
    }

    /* Sidebar stacks above content on mobile - give it matching card style */
    .sidebar {
        margin-bottom: 1.25rem;
    }

    /* Tables: allow horizontal scroll instead of squeezing/breaking layout */
    .table-responsive,
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    h1, .h1 { font-size: 1.6rem !important; }
    h2, .h2 { font-size: 1.35rem !important; }
    .card-title { font-size: .95rem !important; }

    .btn { padding: .55rem .9rem !important; }
}
#header .navbar-brand {
    font-weight: 800;
    font-size: 1.3rem;
    color: #fff !important;
    letter-spacing: -.02em;
}
#header .topbar .btn,
#header .active-client .btn,
#header .input-group-text {
    background-color: var(--bn-bg-alt) !important;
    color: rgba(255, 255, 255, .75) !important;
    border-color: var(--bn-border) !important;
    border-radius: var(--bn-radius-sm) !important;
}
#header .topbar .btn:hover,
#header .btn-active-client:hover {
    color: #fff !important;
}
#header .cart-btn {
    color: rgba(255, 255, 255, .85) !important;
}
.logo-img {
    max-height: 40px;
    width: auto;
}

/* --- Tables --- */
.table {
    color: var(--bn-text);
}
.table thead th,
.table .thead-light th {
    background-color: var(--bn-bg-alt) !important;
    color: var(--bn-text-muted) !important;
    border-color: var(--bn-border) !important;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .05em;
}
.table td,
.table th {
    border-color: var(--bn-border) !important;
    vertical-align: middle;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .02) !important;
}
.table tbody tr {
    transition: background-color .15s ease;
}
.table-hover tbody tr:hover {
    background-color: var(--bn-bg-hover) !important;
}
.table-list thead th {
    color: var(--bn-text-muted) !important;
}
.table-list > tbody > tr:hover > td {
    background-color: var(--bn-bg-hover) !important;
}

/* --- Forms --- */
.form-control {
    border-radius: var(--bn-radius-sm) !important;
    padding: .6rem .9rem !important;
    height: auto !important;
    line-height: 1.5 !important;
}
select.form-control {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}
.form-control::placeholder {
    color: var(--bn-text-muted);
}
.form-control:focus {
    border-color: var(--bn-brand-500) !important;
    box-shadow: 0 0 0 .2rem rgba(45, 139, 255, .25) !important;
}
.custom-control-label::before {
    background-color: var(--bn-bg-alt) !important;
    border-color: var(--bn-border) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--bn-brand-500) !important;
    border-color: var(--bn-brand-500) !important;
}

/* --- Badges / status labels --- */
.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: .35em .7em;
}
.badge-success { background-color: rgba(52,211,153,.15) !important; color: var(--bn-emerald) !important; }
.badge-warning { background-color: rgba(251,191,36,.15) !important; color: var(--bn-amber) !important; }
.badge-danger  { background-color: rgba(244,63,94,.15) !important; color: var(--bn-rose) !important; }
.badge-primary { background-color: rgba(45,139,255,.18) !important; color: var(--bn-brand-300) !important; }
.badge-light   { background-color: var(--bn-bg-alt) !important; color: var(--bn-text) !important; }

/* --- Alerts --- */
.alert {
    border-radius: var(--bn-radius-md) !important;
    border-width: 1px !important;
}
.alert-success { background-color: rgba(52,211,153,.10) !important; border-color: rgba(52,211,153,.3) !important; color: var(--bn-emerald) !important; }
.alert-warning { background-color: rgba(251,191,36,.10) !important; border-color: rgba(251,191,36,.3) !important; color: var(--bn-amber) !important; }
.alert-danger  { background-color: rgba(244,63,94,.10) !important; border-color: rgba(244,63,94,.3) !important; color: var(--bn-rose) !important; }
.alert-info    { background-color: rgba(45,139,255,.10) !important; border-color: rgba(45,139,255,.3) !important; color: var(--bn-brand-300) !important; }

/* --- Pagination --- */
.page-link {
    color: var(--bn-brand-400) !important;
    border-radius: var(--bn-radius-sm) !important;
    margin: 0 2px;
}
.page-item.active .page-link {
    background: linear-gradient(135deg, var(--bn-brand-400), var(--bn-brand-600)) !important;
    border-color: var(--bn-brand-500) !important;
    color: #fff !important;
}

/* --- DataTables --- */
.dataTables_wrapper,
.dataTables_empty,
div.dataTables_length,
div.dataTables_filter,
div.dataTables_info,
div.dataTables_paginate {
    background-color: transparent !important;
    color: var(--bn-text-muted) !important;
}
table.dataTable,
table.dataTable tbody tr,
table.dataTable tbody td {
    background-color: var(--bn-bg-card) !important;
    color: var(--bn-text) !important;
}

/* --- Sidebar --- */
.sidebar {
    border-radius: var(--bn-radius-lg) !important;
}
.sidebar .list-group-item:first-child {
    border-top-left-radius: var(--bn-radius-lg) !important;
    border-top-right-radius: var(--bn-radius-lg) !important;
}
.sidebar .list-group-item:last-child {
    border-bottom-left-radius: var(--bn-radius-lg) !important;
    border-bottom-right-radius: var(--bn-radius-lg) !important;
}
.sidebar a {
    color: var(--bn-text-muted) !important;
}
.sidebar a:hover,
.sidebar .active > a {
    color: var(--bn-brand-400) !important;
}

/* --- Footer --- */
#footer,
footer {
    margin-top: 3rem;
    padding: 1.5rem 0;
}
#footer a,
footer a {
    color: var(--bn-brand-400) !important;
}

/* --- Breadcrumb --- */
.master-breadcrumb {
    background-color: transparent !important;
    padding: 1rem 0;
}
.breadcrumb {
    background-color: transparent !important;
    padding: 0 !important;
}
.breadcrumb-item.active,
.breadcrumb-item a {
    color: var(--bn-text-muted) !important;
}

/* --- Main content spacing (roomier, matches the main site) --- */
#main-body {
    padding-top: .5rem;
}
.client-home-cards .card,
.tiles {
    margin-bottom: 1.25rem;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bn-bg); }
::-webkit-scrollbar-thumb { background: var(--bn-brand-700); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--bn-brand-600); }

/* =========================================================
   BrackNodes - Sidebar Dashboard Layout
   Adds a persistent left nav (logged-in client area only)
   with a slim top bar, restyled dashboard widgets, and an
   Account Balance / Quick Actions card pair.
   ========================================================= */

:root {
    --bn-sidebar-w: 260px;
}

body.bn-app {
    background-color: var(--bn-bg) !important;
}

/* ---------- Sidebar ---------- */
.bn-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--bn-sidebar-w);
    background: var(--bn-bg-card);
    border-right: 1px solid var(--bn-border);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    overflow-y: auto;
}

.bn-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.35rem 1.5rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--bn-text) !important;
    border-bottom: 1px solid var(--bn-border);
    text-decoration: none !important;
}
.bn-sidebar-brand img {
    height: 30px;
    width: auto;
}

.bn-sidebar-nav {
    flex: 1 1 auto;
    padding: 1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.bn-nav-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .65rem .9rem;
    border-radius: var(--bn-radius-md);
    color: var(--bn-text-muted) !important;
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.bn-nav-link i {
    width: 18px;
    text-align: center;
    color: inherit;
}
.bn-nav-link:hover {
    background: var(--bn-bg-hover);
    color: var(--bn-text) !important;
}
.bn-nav-link.active {
    background: linear-gradient(90deg, var(--bn-brand-600), var(--bn-brand-500));
    color: #fff !important;
    box-shadow: var(--bn-glow);
}

.bn-sidebar-footer {
    padding: 1rem .9rem 1.35rem;
    border-top: 1px solid var(--bn-border);
}
.bn-help-card {
    background: var(--bn-bg-hover);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);
    padding: 1rem;
}
.bn-help-title {
    color: var(--bn-text);
    font-weight: 700;
    margin: 0 0 .25rem;
    font-size: .92rem;
}
.bn-help-text {
    color: var(--bn-text-muted);
    font-size: .8rem;
    margin: 0 0 .75rem;
}
.bn-help-btn {
    display: block;
    text-align: center;
    background: var(--bn-bg-card);
    border: 1px solid var(--bn-border-strong);
    border-radius: var(--bn-radius-sm);
    color: var(--bn-text) !important;
    font-weight: 600;
    font-size: .82rem;
    padding: .5rem;
    text-decoration: none !important;
}
.bn-help-btn:hover {
    background: var(--bn-brand-600);
    border-color: var(--bn-brand-600);
}

/* Mobile toggle (checkbox hack - no JS needed) */
.bn-sidebar-toggle-state {
    display: none;
}
.bn-sidebar-backdrop {
    display: none;
}
.bn-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--bn-radius-sm);
    color: var(--bn-text);
    cursor: pointer;
    margin-right: .5rem;
}
.bn-burger:hover {
    background: var(--bn-bg-hover);
}

/* ---------- Main content offset ---------- */
.bn-app .bn-main {
    margin-left: var(--bn-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.bn-app.bn-guest .bn-main {
    margin-left: 0;
}

/* ---------- Top bar ---------- */
#header.bn-topbar {
    padding: 0;
}
.bn-topbar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.5rem;
}
.bn-search-form {
    position: relative;
    flex: 1 1 auto;
    max-width: 420px;
}
.bn-search-form i {
    position: absolute;
    top: 50%;
    left: .9rem;
    transform: translateY(-50%);
    color: var(--bn-text-muted);
    font-size: .85rem;
}
.bn-search-form input {
    width: 100%;
    background: var(--bn-bg-hover);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);
    color: var(--bn-text) !important;
    padding: .55rem .9rem .55rem 2.3rem;
    font-size: .88rem;
}
.bn-search-form input::placeholder {
    color: var(--bn-text-muted);
}
.bn-search-form input:focus {
    outline: none;
    border-color: var(--bn-brand-500);
}

.bn-topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.bn-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--bn-text) !important;
    font-size: 1.05rem;
}
.bn-icon-btn:hover {
    background: var(--bn-bg-hover);
}
.bn-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 50px;
    background: var(--bn-brand-500);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.bn-account-btn {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--bn-bg-hover);
    border: 1px solid var(--bn-border);
    border-radius: 50px;
    padding: .35rem .9rem .35rem .35rem;
    color: var(--bn-text) !important;
}
.bn-account-btn:hover {
    border-color: var(--bn-border-strong);
}
.bn-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bn-brand-500), var(--bn-brand-700));
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
}
.bn-account-name {
    font-weight: 600;
    font-size: .88rem;
}

/* ---------- Dashboard welcome header ---------- */
.bn-welcome-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.bn-welcome-eyebrow {
    color: var(--bn-text-muted);
    margin: 0;
    font-size: .95rem;
}
.bn-welcome-title {
    color: var(--bn-text);
    font-weight: 800;
    font-size: 1.9rem;
    margin: .15rem 0;
}
.bn-welcome-sub {
    color: var(--bn-text-muted);
    margin: 0;
}
.bn-welcome-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}
.btn.bn-btn-primary {
    background: linear-gradient(90deg, var(--bn-brand-600), var(--bn-brand-500));
    border: none;
    color: #fff;
    font-weight: 600;
    border-radius: var(--bn-radius-sm);
    box-shadow: var(--bn-glow);
}
.btn.bn-btn-primary:hover {
    filter: brightness(1.1);
    color: #fff;
}
.btn.bn-btn-outline {
    background: transparent;
    border: 1px solid var(--bn-border-strong);
    color: var(--bn-text);
    font-weight: 600;
    border-radius: var(--bn-radius-sm);
}
.btn.bn-btn-outline:hover {
    background: var(--bn-bg-hover);
    color: var(--bn-text);
}

/* ---------- Account Balance / Quick Actions cards ---------- */
.bn-balance-amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--bn-text);
}
.bn-balance-label {
    color: var(--bn-text-muted);
    font-size: .85rem;
    margin: .1rem 0 1rem;
}
.bn-balance-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(90deg, var(--bn-brand-600), var(--bn-brand-500));
    color: #fff !important;
    font-weight: 600;
    border-radius: var(--bn-radius-sm);
    padding: .55rem 1rem;
    text-decoration: none !important;
    font-size: .88rem;
}
.bn-balance-btn:hover {
    filter: brightness(1.1);
}

.bn-quick-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .7rem .25rem;
    color: var(--bn-text) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--bn-border);
    font-size: .88rem;
    font-weight: 600;
}
.bn-quick-action:last-child {
    border-bottom: none;
}
.bn-quick-action i:first-child {
    width: 20px;
    color: var(--bn-brand-400);
    margin-right: .5rem;
}
.bn-quick-action .fa-chevron-right {
    color: var(--bn-text-muted);
    font-size: .75rem;
}
.bn-quick-action:hover {
    color: var(--bn-brand-300) !important;
}

/* ---------- Responsive: off-canvas sidebar below 992px ---------- */
@media (max-width: 991px) {
    .bn-sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.5);
    }
    .bn-app .bn-main {
        margin-left: 0;
    }
    .bn-burger {
        display: inline-flex;
    }
    .bn-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 1020;
    }
    .bn-sidebar-toggle-state:checked ~ .bn-sidebar-backdrop {
        display: block;
    }
    .bn-sidebar-toggle-state:checked ~ .bn-sidebar {
        transform: translateX(0);
    }
    .bn-search-form {
        max-width: none;
    }
}

@media (max-width: 575px) {
    .bn-topbar-inner {
        padding: .75rem 1rem;
    }
    .bn-search-form {
        display: none;
    }
    .bn-account-name {
        display: none !important;
    }
    .bn-welcome-title {
        font-size: 1.5rem;
    }
}

/* ---------- Dashboard content should use the full width next to the sidebar, not a centered fixed-width Bootstrap container ---------- */
.bn-app:not(.bn-guest) .bn-main #main-body > .container {
    max-width: 100%;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (max-width: 575px) {
    .bn-app:not(.bn-guest) .bn-main #main-body > .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
.bn-wave {
    display: inline-block;
}

/* =========================================================
   BrackNodes - List pages (Services / Invoices / Tickets / Domains)
   Stat-card row + DataTables restyle to match dashboard look
   ========================================================= */

.bn-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.bn-page-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--bn-radius-md);
    background: linear-gradient(135deg, var(--bn-brand-500), var(--bn-brand-700));
    color: #fff;
    font-size: 1.2rem;
    margin-right: .9rem;
}
.bn-page-head-text {
    display: flex;
    align-items: flex-start;
}
.bn-page-title {
    color: var(--bn-text);
    font-weight: 800;
    font-size: 1.7rem;
    margin: 0;
}
.bn-page-sub {
    color: var(--bn-text-muted);
    margin: .15rem 0 0;
}

.bn-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 991px) {
    .bn-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .bn-stats-row { grid-template-columns: 1fr; }
}
.bn-stat-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--bn-bg-card);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    padding: 1.1rem 1.25rem;
}
.bn-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--bn-radius-md);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.bn-stat-icon.blue { background: rgba(45,139,255,.15); color: var(--bn-brand-400); }
.bn-stat-icon.green { background: rgba(52,211,153,.15); color: var(--bn-emerald); }
.bn-stat-icon.amber { background: rgba(251,191,36,.15); color: var(--bn-amber); }
.bn-stat-icon.rose { background: rgba(244,63,94,.15); color: var(--bn-rose); }
.bn-stat-label {
    color: var(--bn-text-muted);
    font-size: .82rem;
    margin: 0;
}
.bn-stat-value {
    color: var(--bn-text);
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1.2;
}

.bn-cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: linear-gradient(90deg, rgba(45,139,255,.12), rgba(45,139,255,.03));
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}
.bn-cta-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--bn-radius-md);
    background: linear-gradient(135deg, var(--bn-brand-500), var(--bn-brand-700));
    color: #fff;
    font-size: 1.2rem;
    margin-right: 1rem;
}
.bn-cta-banner-title {
    color: var(--bn-text);
    font-weight: 700;
    margin: 0;
}
.bn-cta-banner-text {
    color: var(--bn-text-muted);
    font-size: .88rem;
    margin: 0;
}

/* ---------- DataTables restyle (Services / Invoices / Tickets / Domains lists) ---------- */
.dataTables_wrapper {
    background: transparent;
}
.dataTables_filter {
    margin-bottom: 1rem;
}
.dataTables_filter label {
    width: 100%;
    color: var(--bn-text-muted);
}
.dataTables_filter input {
    background: var(--bn-bg-card) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius-md) !important;
    color: var(--bn-text) !important;
    padding: .6rem 1rem !important;
    margin-left: .5rem !important;
    width: 260px;
    max-width: 100%;
}
.dataTables_length select {
    background: var(--bn-bg-card) !important;
    border: 1px solid var(--bn-border) !important;
    color: var(--bn-text) !important;
    border-radius: var(--bn-radius-sm);
}
.dataTables_info {
    color: var(--bn-text-muted) !important;
}
.dataTables_paginate .paginate_button {
    color: var(--bn-text) !important;
    border-radius: var(--bn-radius-sm) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}
.dataTables_paginate .paginate_button.current {
    background: linear-gradient(90deg, var(--bn-brand-600), var(--bn-brand-500)) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.dataTables_paginate .paginate_button:hover {
    background: var(--bn-bg-hover) !important;
    color: var(--bn-text) !important;
}
.dataTables_paginate .paginate_button.disabled {
    color: var(--bn-text-muted) !important;
    opacity: .5;
}

.table-container {
    background: var(--bn-bg-card);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    padding: 1.25rem;
}
table.table-list {
    background: transparent !important;
    color: var(--bn-text);
}
table.table-list thead th {
    color: var(--bn-text-muted) !important;
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--bn-border) !important;
    border-top: none !important;
    background: transparent !important;
}
table.table-list tbody td {
    border-color: var(--bn-border) !important;
    background: transparent !important;
    color: var(--bn-text);
    vertical-align: middle;
}
table.table-list tbody tr:hover td {
    background: var(--bn-bg-hover) !important;
}
table.table-list a {
    color: var(--bn-brand-400);
}

/* ---------- Add Funds / Billing page ---------- */
.bn-addfunds-card {
    background: var(--bn-bg-card) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius-lg) !important;
}
.bn-addfunds-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--bn-border);
    color: var(--bn-text);
}
.bn-addfunds-row:last-child {
    border-bottom: none;
}
.bn-addfunds-row strong {
    color: var(--bn-text);
    font-weight: 700;
}
.bn-addfunds-row span {
    color: var(--bn-brand-300);
    font-weight: 600;
}

/* =========================================================
   BrackNodes - Auth pages (login / register / password reset)
   Now share the main site's navbar + footer (see the guest-nav
   branch in header.tpl and guest-footer.tpl) instead of standing
   alone, so only the breadcrumb strip and the pages' own duplicate
   logo mark stay hidden.
   ========================================================= */
body.bn-auth-page nav.master-breadcrumb {
    display: none !important;
}
body.bn-auth-page #main-body {
    min-height: calc(100vh - 420px);
    display: flex;
    align-items: center;
    padding: 3rem 1rem;
}
body.bn-auth-page #main-body .primary-content {
    width: 100%;
}
body.bn-auth-page .bn-auth-brand {
    display: none;
}

.bn-auth-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.bn-auth-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 2rem;
    text-decoration: none !important;
    color: var(--bn-text) !important;
    font-weight: 800;
    font-size: 1.3rem;
}
.bn-auth-brand img {
    height: 40px;
    width: auto;
}

.bn-auth-card {
    background: var(--bn-bg-card) !important;
    border: 1px solid var(--bn-border) !important;
    border-radius: var(--bn-radius-lg) !important;
    box-shadow: var(--bn-glow);
    width: 100%;
}
.bn-auth-card .h3 {
    color: var(--bn-text);
}
.bn-auth-card .text-muted {
    color: var(--bn-text-muted) !important;
}
.bn-remember-me {
    color: var(--bn-text-muted);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

/* =========================================================
   BrackNodes - Guest header (login/store/cart/knowledgebase
   pages while not logged in) matching the main website's navbar
   ========================================================= */
.bn-guest-nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
}
.bn-guest-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--bn-text) !important;
    text-decoration: none !important;
    flex-shrink: 0;
}
.bn-guest-logo img {
    height: 32px;
    width: auto;
}
.bn-guest-pills {
    display: flex;
    align-items: center;
    gap: .25rem;
    background: var(--bn-bg-hover);
    border: 1px solid var(--bn-border);
    border-radius: 50px;
    padding: .3rem;
    margin: 0 auto;
}
.bn-pill-link {
    padding: .5rem 1.1rem;
    border-radius: 50px;
    color: var(--bn-text-muted) !important;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.bn-pill-link:hover {
    background: var(--bn-bg-card);
    color: var(--bn-text) !important;
}
.bn-guest-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}
.bn-guest-burger {
    display: none;
}

.bn-guest-mobile-menu {
    display: none;
    flex-direction: column;
    gap: .25rem;
    padding: 0 1.5rem 1.25rem;
    border-top: 1px solid var(--bn-border);
    margin-top: -1px;
}
.bn-guest-mobile-menu a:not(.btn) {
    color: var(--bn-text) !important;
    text-decoration: none !important;
    font-weight: 600;
    padding: .75rem .25rem;
    border-bottom: 1px solid var(--bn-border);
}
.bn-guest-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 1rem;
}

@media (max-width: 991px) {
    .bn-guest-pills,
    .bn-guest-actions .btn {
        display: none !important;
    }
    .bn-guest-burger {
        display: inline-flex;
        margin-left: auto;
    }
    .bn-sidebar-toggle-state:checked ~ .bn-guest-mobile-menu {
        display: flex;
    }
}
@media (max-width: 480px) {
    .bn-guest-nav-inner {
        padding: .85rem 1rem;
    }
}

/* =========================================================
   BrackNodes - Cart / Store pages polish (spacing, sidebar
   cards) so they feel as finished as the rest of the redesign,
   not just a bare functional page. Kept deliberately simple -
   no decorative overlays - to avoid clipping/overlap artifacts.
   ========================================================= */
.bn-guest #main-body {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.bn-guest .master-breadcrumb {
    padding: 1.5rem 0 0;
}

.bn-guest .card-sidebar .card-header {
    padding: 1rem 1.25rem !important;
}
.bn-guest .card-sidebar .card-title {
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bn-text-muted);
}
.bn-guest .card-sidebar .list-group-item {
    padding: .8rem 1.25rem;
    font-weight: 600;
}
.bn-guest .card-sidebar {
    background: var(--bn-bg-card) !important;
}

.bn-guest .table-container {
    background: var(--bn-bg-card);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
}

/* ---------- Wider content on cart/store pages too (less wasted side space) ----------
   !important because theme.min.css's own .container rule wins on plain
   specificity ties otherwise (it loads before this file but some of its
   breakpoint rules carry !important already). */
.bn-guest .bn-main #main-body > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}
.bn-guest-nav-inner {
    max-width: 100%;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
@media (max-width: 1450px) {
    .bn-guest .bn-main #main-body > .container {
        max-width: 100% !important;
    }
    .bn-guest-nav-inner {
        max-width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* ---------- Guest nav logo tagline + pill icons ---------- */
.bn-guest-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.bn-guest-tagline {
    font-size: .62rem;
    font-weight: 500;
    color: var(--bn-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.bn-pill-link i {
    margin-right: .35rem;
    font-size: .8rem;
}
@media (max-width: 767px) {
    .bn-guest-tagline {
        display: none;
    }
}

/* ---------- Let body's own background (flat color + subtle gradient
   glow) show through every wrapper on cart/store pages, instead of an
   intermediate layer repainting a flat color on top of it - that was the
   actual source of a visible seam/mismatch around the cart content. ---------- */
.bn-guest #main-body,
.bn-guest .bn-main #main-body > .container,
.bn-guest .primary-content {
    background-color: transparent !important;
    background-image: none !important;
}

/* ==========================================================================
   REGISTER PAGE (clientregister.tpl / register.php) - fields now use the
   same input-group icon pattern as login.tpl, so most fields need no extra
   CSS. One thing still needs help: Chrome/Edge autofill's own inset
   box-shadow (ignores background-color). The phone field's WHMCS
   intl-tel-input flag/dial-code rules used to live here too, scoped to
   #registration only - that's why the same widget overlapped the typed
   number on every OTHER page that has a phone field (Account Details,
   Contact Us, domain contact info, etc.): this plugin attaches to every
   input[type=tel] site-wide (it's a global WHMCS setting), not just the
   register page. Those rules are now unscoped further down instead.
   ========================================================================== */
#registration input:-webkit-autofill,
#registration input:-webkit-autofill:hover,
#registration input:-webkit-autofill:focus,
#registration input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--bn-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--bn-bg-card) inset !important;
    box-shadow: 0 0 0px 1000px var(--bn-bg-card) inset !important;
    caret-color: var(--bn-text) !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}
/* Sitewide: every icon + field input-group (login, register, checkout) was
   wrapping onto two lines - icon badge on its own row, the field itself on
   the row under it - instead of sitting inline. Bootstrap's own .input-group
   is flex-wrap:wrap by default; force the single-row layout explicitly
   rather than chase which exact rule was tipping the total width over 100%. */
.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}
.input-group-prepend {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
}
.input-group > input,
.input-group > select {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
}
/* The State field is the one field left on the old prepend-icon pattern
   (StatesDropdown.js reads/toggles a specific #inputStateIcon id and renames
   the input to #stateinput at runtime, so it couldn't be moved to the same
   input-group markup as everything else without breaking that script) - but
   this CSS for it only ever existed in the cart theme's custom.css, never
   here, so on register.php it was rendering with no width/padding rules at
   all, which is why it looked narrower and empty next to City/Postcode. */
#registration .form-group.prepend-icon {
    position: relative;
    display: block !important;
    margin-bottom: 14px;
}
#registration .form-group.prepend-icon .field-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%);
    color: var(--bn-text-muted) !important;
    pointer-events: none;
    font-size: .85rem;
    line-height: 1;
    margin: 0 !important;
    z-index: 2;
}
#registration .form-group.prepend-icon .field.form-control,
#registration .form-group.prepend-icon input.field,
#registration .form-group.prepend-icon select.field {
    width: 100% !important;
    padding: 10px 14px 10px 38px !important;
    height: auto;
}
/* Unscoped (was #registration-only, see note above) so every page's phone
   field reserves room for the flag/dial-code selector instead of the
   selector sitting on top of the typed digits.

   The WHMCS-bundled intl-tel-input version here is an OLDER build (single-
   hyphen classes: .intl-tel-input/.country-list/.iti-flag - not the newer
   .iti__* BEM names, which is why those never matched anything and were
   dead weight; kept below alongside the real names in case the library is
   ever upgraded). Its dropdownContainer:"body" option (see
   TelephoneCountryCodeDropdown.js) portals the open country-list to a NEW
   <div> appended straight to <body> - and that div reuses the exact same
   "intl-tel-input" class (plus an extra "iti-container" class) so the
   library's own CSS keeps targeting it. That means this rule used to hit
   that portalled div too, overriding the plugin's own inline
   absolute-positioning with position:relative/width:100%/display:block and
   dropping it wherever it fell in the normal document flow - which is
   exactly what made the open list look cut off/misplaced. :not(.iti-
   container) excludes that portalled div so only the actual field wrapper
   gets this rule. */
.iti,
.intl-tel-input:not(.iti-container) {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}
.iti input,
.intl-tel-input:not(.iti-container) input {
    width: 100% !important;
    padding-left: 100px !important;
}
/* The portalled .iti-container div itself (the floating popup, excluded
   above) needs to actually float - it should be pulled out of the page's
   normal flow and stacked on top of everything via position:absolute
   (matching the plugin's own default rule, just reasserted with !important
   in case anything else on the page is winning that fight and knocking it
   back to static/in-flow, which is what made it render squeezed into the
   page instead of floating over it). Deliberately NOT touching top/left
   here - the plugin sets those inline in JS, computed from the input's
   actual position, and !important on an external stylesheet beats inline
   styles, so setting them here would fight the plugin instead of trusting
   it. On narrow/mobile screens the plugin switches to a full-screen picker
   instead (adds .iti-mobile on the body) - reasserted the same way so that
   mode keeps working too. */
.intl-tel-input.iti-container {
    position: absolute !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 3000 !important;
}
.iti-mobile .intl-tel-input.iti-container {
    position: fixed !important;
    top: 30px !important;
    left: 30px !important;
    right: 30px !important;
    bottom: 30px !important;
    z-index: 3000 !important;
}
/* TelephoneCountryCodeDropdown.js now opens this dropdown with intl-tel-input's
   dropdownContainer: document.body option (see that file), specifically so it
   escapes the rounded .card it lives in - cards use overflow:hidden so their
   own corners clip cleanly, which was also silently clipping this dropdown to
   just a couple of visible rows. That means the list is no longer a
   descendant of #registration, so these rules can't be scoped to it any
   more, and position/top/left are left alone entirely - the plugin
   calculates and inline-styles those itself now to line back up under
   whichever field opened it. */
.iti__country-list,
.country-list {
    box-sizing: border-box !important;
    width: 320px !important;
    max-width: 90vw !important;
    /* Was a flat 280px (~6 rows before scrolling) - bumped way up so it
       shows a long list at a glance like the State/Region dropdown, instead
       of forcing a scroll for almost every country. min() so it still
       backs off on short windows instead of running off-screen. */
    max-height: min(65vh, 460px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 3000 !important;
    list-style: none !important;
    padding: 6px !important;
    background-color: var(--bn-bg-card) !important;
    border: 1px solid var(--bn-border-strong) !important;
    border-radius: var(--bn-radius-md) !important;
    color: var(--bn-text) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
    /* Same blue-on-dark scrollbar as the State/Region native <select> list -
       Firefox reads scrollbar-color, Chrome/Edge/Safari read the
       ::-webkit-scrollbar rules just below. */
    scrollbar-color: var(--bn-brand-400) transparent !important;
    scrollbar-width: thin !important;
}
.iti__country-list::-webkit-scrollbar,
.country-list::-webkit-scrollbar {
    width: 8px;
}
.iti__country-list::-webkit-scrollbar-track,
.country-list::-webkit-scrollbar-track {
    background: transparent;
}
.iti__country-list::-webkit-scrollbar-thumb,
.country-list::-webkit-scrollbar-thumb {
    background-color: var(--bn-brand-400);
    border-radius: 999px;
}
.iti__country,
.country-list .country {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--bn-text) !important;
    padding: 10px 14px !important;
    margin: 1px 0 !important;
    border-radius: var(--bn-radius-sm) !important;
    line-height: 1.3 !important;
    font-size: .95rem;
    cursor: pointer;
    transition: background-color .1s ease, color .1s ease;
}
/* Matches the State/Region list's look: hovered/keyboard-highlighted AND the
   currently-selected country both get the same solid blue fill as that
   native <select> uses for its highlighted row, with the text switching to
   a dark color so it stays readable on top of it. ".active" is the class
   the library puts on the currently-selected country when the list opens
   (previously unstyled, so the current country never stood out from the
   rest like "Rajasthan" does in the State list). */
.iti__country:hover,
.country-list .country:hover,
.iti__country.iti__highlight,
.country-list .country.highlight,
.iti__country.iti__active,
.country-list .country.active {
    background-color: var(--bn-brand-300) !important;
    color: #0b1220 !important;
}
.iti__country:hover .iti__dial-code,
.country-list .country:hover .dial-code,
.iti__country.iti__highlight .iti__dial-code,
.country-list .country.highlight .dial-code,
.iti__country.iti__active .iti__dial-code,
.country-list .country.active .dial-code {
    color: #0b1220 !important;
}
/* The name is the one part that's allowed to be long (some countries add a
   native-script name in brackets) - let it shrink and truncate with an
   ellipsis instead of pushing the dial code off the edge of the list. */
.iti__country-name,
.country-list .country .country-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.iti__dial-code,
.country-list .country .dial-code {
    flex-shrink: 0;
    color: var(--bn-text-muted) !important;
    margin-left: auto;
}
.iti__flag-box,
.country-list .country .flag-box {
    flex-shrink: 0;
}
/* Unlike the list above, the always-visible selected flag/code stays put
   inside the field - also unscoped now, same reason as .iti above.
   .selected-dial-code (no iti__ prefix) is the class this library version
   actually renders - see note above the .intl-tel-input rule further up. */
.iti__selected-dial-code,
.selected-dial-code {
    color: var(--bn-text) !important;
}
.iti__divider,
.country-list .divider {
    border-bottom: 1px solid var(--bn-border) !important;
    margin-bottom: 4px;
    padding-bottom: 4px;
}

/* ==========================================================================
   REGISTER PAGE - the "Already Registered?" sidebar card is gone (it was
   the whole point of the page's sidebar column, so the sidebar itself is
   now suppressed for this page in header.tpl and the form goes full width
   here) - a plain "Already have an account? Login" link takes its place,
   once above the form and once below it.
   ========================================================================== */
#registration {
    max-width: 760px;
    margin: 0 auto;
}
.bn-register-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.bn-register-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--bn-text);
}
.bn-login-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .6rem 1.1rem;
    border: 1px solid var(--bn-border-strong);
    border-radius: var(--bn-radius-md);
    color: var(--bn-text-muted) !important;
    font-size: .88rem;
    text-decoration: none !important;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.bn-login-btn:hover {
    color: var(--bn-text) !important;
    border-color: var(--bn-brand-500);
    background-color: var(--bn-bg-hover);
}
.bn-login-btn strong { color: var(--bn-brand-400); font-weight: 700; }
.bn-login-btn:hover strong { color: var(--bn-brand-400); }
.bn-register-bottombar {
    text-align: center;
    margin-top: -.5rem;
    margin-bottom: 2rem;
}
@media (max-width: 575px) {
    .bn-register-topbar { flex-direction: column; align-items: stretch; }
    .bn-login-btn { justify-content: center; }
}

/* ==========================================================================
   GUEST FOOTER - shown instead of the plain client-area footer whenever a
   visitor isn't logged in, or is anywhere in the cart/checkout flow (mirrors
   the guest-nav condition in header.tpl). Built to match the marketing
   site's own footer (bracknodes.in) without pulling in Tailwind.
   ========================================================================== */
.bn-guest-footer {
    position: relative;
    background: #05070d;
    border-top: 1px solid var(--bn-border);
    margin-top: 3rem;
    padding: 3rem 0 1.5rem;
    color: var(--bn-text-muted);
}
.bn-guest-footer-accent {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(45,139,255,.6), transparent);
}
.bn-guest-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
}
.bn-guest-footer-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .8rem;
    text-decoration: none !important;
}
.bn-guest-footer-logo img { height: 32px; width: 32px; object-fit: contain; }
.bn-guest-footer-logo span { color: var(--bn-text); font-weight: 700; font-size: 1.05rem; }
/* The main site's footer text (text-white/70) sits on a pure-black
   background, where 70%-opacity white composites down to a neutral grey.
   This footer sits on the theme's dark NAVY background instead, so the
   exact same semi-transparent white picks up a visible blue tint here -
   same colour value, different result. Solid grey instead - matches what
   the main site's footer actually looks like, regardless of what's behind
   it. */
.bn-guest-footer-brand p {
    font-size: .88rem;
    line-height: 1.6;
    max-width: 320px;
    color: #b3b3b3;
    margin: 0;
}
.bn-guest-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--bn-brand-400) !important;
    text-decoration: none !important;
}
.bn-guest-footer-cta:hover { color: var(--bn-brand-500) !important; }
.bn-guest-footer-col h3 {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bn-text);
    margin: 0 0 1rem;
}
.bn-guest-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.bn-guest-footer-col a {
    font-size: .88rem;
    color: #b3b3b3 !important;
    text-decoration: none !important;
    transition: color .15s ease;
}
.bn-guest-footer-col a:hover { color: var(--bn-brand-400) !important; }
.bn-guest-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bn-border);
    font-size: .82rem;
    color: rgba(255, 255, 255, .4);
}
.bn-guest-footer-bottom p { margin: 0; display: flex; align-items: center; gap: .4rem; }
.bn-guest-footer-bottom i { color: var(--bn-brand-400); }
@media (max-width: 991px) {
    .bn-guest-footer-grid { grid-template-columns: 1fr 1fr; }
    .bn-guest-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .bn-guest-footer-grid { grid-template-columns: 1fr; }
    .bn-guest-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Personal Information + Billing Address now live in a single merged card
   (were two separate stacked cards) - this heading marks where the second
   section starts inside it, playing the same role a fresh .card-title
   normally would but with a divider line since it's no longer a new card. */
#registration .card-title.bn-section-divider {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--bn-border);
}

/* ==========================================================================
   "Join our mailing list" / "Save this card" sliding toggle - replaces
   WHMCS's own toggle-switch-success widget (its CSS only survives as one
   unrelated fragment in the compiled theme: it's built entirely by JS-added
   classes, which a build-time CSS purge step didn't see as "used" in the
   raw markup, so it stripped the rest, leaving a bare visible checkbox).
   Real checkbox inside a <label> - clicking anywhere on it toggles, it's
   keyboard accessible, and the track/thumb/text are pure CSS driven off
   :checked, so there's no JS and nothing else can leave the checkbox
   showing through the way the old hide-it-with-clip approach just did.
   ========================================================================== */
.bn-toggle {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: .5rem;
    cursor: pointer;
    user-select: none;
}
.bn-toggle-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}
/* Belt and braces: this install also runs iCheck on plain checkboxes site-
   wide unless they're explicitly opted out, which is what left a second,
   separately-styled checkbox sitting next to the toggle even after
   toggle-switch-success was dropped. The markup now carries the same
   no-icheck opt-out class the original widget used, but keep this in case
   iCheck (or Bootstrap Switch, which also targets this field by id - see
   scripts.min.js) ever manages to wrap it again. */
.bn-toggle .icheckbox_square-blue,
.bn-toggle .iradio_square-blue,
.bn-toggle .bootstrap-switch {
    display: none !important;
}
.bn-toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--bn-border-strong);
    transition: background-color .2s ease;
}
.bn-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: left .2s ease;
}
.bn-toggle-input:checked ~ .bn-toggle-track {
    background: var(--bn-emerald);
}
.bn-toggle-input:checked ~ .bn-toggle-track .bn-toggle-thumb {
    left: 23px;
}
.bn-toggle-input:focus-visible ~ .bn-toggle-track {
    outline: 2px solid var(--bn-brand-500);
    outline-offset: 2px;
}
.bn-toggle-text-yes,
.bn-toggle-text-no {
    font-size: .88rem;
    font-weight: 700;
}
.bn-toggle-text-yes { display: none; color: var(--bn-emerald); }
.bn-toggle-text-no { display: inline; color: var(--bn-text-muted); }
.bn-toggle-input:checked ~ .bn-toggle-text-yes { display: inline; }
.bn-toggle-input:checked ~ .bn-toggle-text-no { display: none; }
.bn-toggle-label {
    margin-left: .2rem;
    color: var(--bn-text-muted);
    font-size: .88rem;
}