/* ---------- Base ---------- */
body.nx-theme {
    font-family: var(--nx-font-family);
    font-size: var(--nx-font-size);
    font-weight: var(--nx-weight-body);
    line-height: var(--nx-line-height);
    letter-spacing: var(--nx-letter-spacing);
    background-color: var(--nx-bg);
    color: var(--nx-text);
    transition: background-color var(--nx-transition-slow), color var(--nx-transition-slow);
}

body.nx-theme h1, body.nx-theme .h1 { font-size: var(--nx-font-size-h1); }
body.nx-theme h2, body.nx-theme .h2 { font-size: var(--nx-font-size-h2); }
body.nx-theme h3, body.nx-theme .h3 { font-size: var(--nx-font-size-h3); }
body.nx-theme h1, body.nx-theme h2, body.nx-theme h3,
body.nx-theme h4, body.nx-theme h5, body.nx-theme h6,
body.nx-theme .card-title, body.nx-theme .panel-title {
    font-weight: var(--nx-weight-heading);
    text-transform: var(--nx-heading-transform);
    font-family: var(--nx-heading-font-family, var(--nx-font-family));
}

body.nx-theme small, body.nx-theme .small { font-size: var(--nx-font-size-sm); }

body.nx-theme a:not(:where(.nx-btn)) {
    color: var(--nx-link, var(--nx-primary));
    text-decoration: var(--nx-link-decoration, none);
}
body.nx-theme a:not(:where(.nx-btn)):hover,
body.nx-theme a:not(:where(.nx-btn)):focus {
    color: var(--nx-primary-hover);
}

body.nx-theme .nx-hp-child-link:hover,
body.nx-theme .nx-hp-panel-link:hover,
body.nx-theme .nx-inv-link:hover,
body.nx-theme .nx-tl-subj-link:hover,
body.nx-theme .nx-tl-filter-link:hover,
body.nx-theme .nx-tsc-ticket-link:hover,
body.nx-theme .nx-prods-domain-link:hover,
body.nx-theme .nx-dd-link:hover,
body.nx-theme .nx-epp-mail-link:hover,
body.nx-theme .nx-pd-backlink:hover,
body.nx-theme .nx-vt-attach-link:hover,
body.nx-theme .nx-vi-cart-link:hover {
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: none;
}

body.nx-theme .text-muted, body.nx-theme .small.text-muted { color: var(--nx-muted); }

body.nx-theme .main-content,
body.nx-theme #main-body {
    max-width: var(--nx-container-width);
    margin-left: auto;
    margin-right: auto;
    padding: var(--nx-content-padding);
}

/* ---------- Header ---------- */
body.nx-theme #header,
body.nx-theme .navbar-main,
body.nx-theme nav.navbar {
    background: var(--nx-header-bg);
    border-bottom: var(--nx-border-width) solid var(--nx-border);
    box-shadow: var(--nx-shadow);
    min-height: var(--nx-header-height);
}

body.nx-theme.nx-header-sticky header.nx-topbar,
body.nx-theme.nx-header-sticky #header,
body.nx-theme.nx-header-sticky nav.navbar-main {
    position: sticky;
    top: 0;
    z-index: 1030;
}

body.nx-theme { --nx-header-offset: 0px; }
body.nx-theme.nx-header-sticky { --nx-header-offset: var(--nx-header-height, 64px); }
body.nx-theme.nx-header-sticky:has(.nx-topbar-expanded) {
    --nx-header-offset: calc(var(--nx-header-height, 64px) + var(--nx-topbar-utility-height, 48px));
}

body.nx-theme #logo img, body.nx-theme .navbar-brand img {
    height: var(--nx-logo-height);
    width: auto;
}

body.nx-theme #main-menu .navbar-nav > li > a,
body.nx-theme nav .navbar-nav .nav-link {
    color: var(--nx-text);
    font-weight: var(--nx-weight-nav);
    border-radius: var(--nx-radius-button);
    transition: background var(--nx-transition), color var(--nx-transition);
}

body.nx-theme #main-menu .navbar-nav > li > a:hover,
body.nx-theme nav .navbar-nav .nav-link:hover {
    color: var(--nx-primary-text, var(--nx-primary));
    background: rgba(var(--nx-primary-rgb), 0.08);
}

body.nx-theme #main-menu .navbar-nav > li.active > a,
body.nx-theme nav .navbar-nav .nav-link.active {
    color: var(--nx-primary-text, var(--nx-primary));
    background: rgba(var(--nx-primary-rgb), 0.10);
}

body.nx-theme .dropdown-menu {
    background: var(--nx-card-bg);
    border: var(--nx-border-width) solid var(--nx-border);
    border-radius: calc(var(--nx-radius-card) * 0.75);
    box-shadow: var(--nx-shadow);
    overflow: hidden;
}

body.nx-theme .dropdown-menu .dropdown-item,
body.nx-theme .dropdown-menu > li > a {
    color: var(--nx-text);
    font-size: var(--nx-font-size);
}

body.nx-theme .dropdown-menu .dropdown-item:hover,
body.nx-theme .dropdown-menu > li > a:hover {
    background: rgba(var(--nx-primary-rgb), 0.08);
    color: var(--nx-primary-text, var(--nx-primary));
}

/* ---------- Cards / Panels ---------- */
body.nx-theme .card,
body.nx-theme .panel,
body.nx-theme .tile,
body.nx-theme .list-group {
    background: var(--nx-card-bg);
    border: var(--nx-border-width) solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow);
    margin-bottom: var(--nx-card-gap);
    overflow: hidden;
}

body.nx-theme .card-body, body.nx-theme .panel-body { padding: var(--nx-card-padding); }

body.nx-theme .card-header,
body.nx-theme .panel-heading {
    background: transparent;
    border-bottom: max(var(--nx-border-width), 1px) solid var(--nx-border);
    padding: calc(var(--nx-card-padding) * 0.75) var(--nx-card-padding);
    font-weight: var(--nx-weight-heading);
    color: var(--nx-text);
}

body.nx-theme .card-footer, body.nx-theme .panel-footer {
    background: transparent;
    border-top: max(var(--nx-border-width), 1px) solid var(--nx-border);
}

body.nx-theme .list-group-item {
    background: transparent;
    border-color: var(--nx-border);
    color: var(--nx-text);
}

body.nx-theme .list-group-item:hover {
    background: rgba(var(--nx-primary-rgb), 0.05);
}

/* ---------- Sidebar (twenty-one .sidebar panels) ---------- */
body.nx-theme .sidebar .card,
body.nx-theme .sidebar .panel-sidebar {
    background: var(--nx-sidebar-bg);
}

body.nx-theme .sidebar .card .card-header {
    color: var(--nx-sidebar-text);
    text-transform: uppercase;
    font-size: var(--nx-font-size-sm);
    letter-spacing: 0.5px;
}

body.nx-theme .sidebar .list-group-item { color: var(--nx-sidebar-text); }
body.nx-theme .sidebar .list-group-item.active {
    background: rgba(var(--nx-primary-rgb), 0.10);
    color: var(--nx-primary-text, var(--nx-primary));
    border-left: 3px solid var(--nx-primary);
    font-weight: var(--nx-weight-nav);
}

/* Sidebar menu layout mode: fixed left/right column */
@media (min-width: 992px) {
    body.nx-theme.nx-menu-sidebar #main-body .sidebar,
    body.nx-theme.nx-menu-sidebar .main-sidebar {
        width: var(--nx-sidebar-width);
        transition: width var(--nx-transition-slow);
    }
    .nx-sidebar-mode-compact body.nx-theme.nx-menu-sidebar #main-body .sidebar,
    .nx-sidebar-mode-compact body.nx-theme.nx-menu-sidebar .main-sidebar {
        width: var(--nx-sidebar-width-compact);
        font-size: calc(var(--nx-font-size) - 1px);
    }
    .nx-sidebar-mode-icons body.nx-theme.nx-menu-sidebar #main-body .sidebar,
    .nx-sidebar-mode-icons body.nx-theme.nx-menu-sidebar .main-sidebar {
        width: var(--nx-sidebar-width-icons);
    }
    .nx-sidebar-mode-icons body.nx-theme.nx-menu-sidebar .sidebar .list-group-item span,
    .nx-sidebar-mode-icons body.nx-theme.nx-menu-sidebar .sidebar .card-header span {
        display: none;
    }
    .nx-sidebar-mode-icons body.nx-theme.nx-menu-sidebar .sidebar .list-group-item {
        text-align: center;
    }
    body.nx-theme.nx-sidebar-right #main-body { flex-direction: row-reverse; }
}

@media (min-width: 1250px) {
    body.nx-theme.nx-sidebar-right .nx-app-layout { flex-direction: row-reverse; }
    body.nx-theme.nx-sidebar-right .nx-sidebar {
        border-right: 0;
        border-left: 1px solid var(--nx-border);
    }
}
html.nx-dark body.nx-sidebar-right .nx-sidebar {
    border-right: 0;
    border-left: 1px solid var(--nx-border);
}

/* Hide the client-area sidebar entirely when menu layout = top */
body.nx-theme.nx-menu-top .sidebar .card-header { border-radius: var(--nx-radius-card) var(--nx-radius-card) 0 0; }

/* ---------- Buttons ---------- */
body.nx-theme .btn {
    border-radius: var(--nx-radius-button);
    font-weight: var(--nx-weight-button);
    text-transform: var(--nx-btn-transform);
    font-family: var(--nx-font-family);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
    border-width: 1px;
}

body.nx-theme .btn-primary,
body.nx-theme .btn-styled-blue {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
}

body.nx-theme .btn-primary:hover,
body.nx-theme .btn-primary:focus,
body.nx-theme .btn-primary:not(:disabled):not(.disabled):active,
body.nx-theme .btn-primary:not(:disabled):not(.disabled).active,
body.nx-theme .show > .btn-primary.dropdown-toggle {
    background-color: var(--nx-primary-hover);
    border-color: var(--nx-primary-hover);
    color: #fff;
}
body.nx-theme .btn-primary:focus,
body.nx-theme .btn-primary:not(:disabled):not(.disabled):active:focus,
body.nx-theme .btn-primary:not(:disabled):not(.disabled).active:focus,
body.nx-theme .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--nx-primary-rgb), .35);
}

body.nx-theme .btn-success:not(:disabled):not(.disabled):active,
body.nx-theme .btn-success:not(:disabled):not(.disabled).active,
body.nx-theme .show > .btn-success.dropdown-toggle {
    background-color: color-mix(in srgb, var(--nx-success) 85%, #000);
    border-color: color-mix(in srgb, var(--nx-success) 85%, #000);
    color: #fff;
}
body.nx-theme .btn-danger:not(:disabled):not(.disabled):active,
body.nx-theme .btn-danger:not(:disabled):not(.disabled).active,
body.nx-theme .show > .btn-danger.dropdown-toggle {
    background-color: color-mix(in srgb, var(--nx-danger) 85%, #000);
    border-color: color-mix(in srgb, var(--nx-danger) 85%, #000);
    color: #fff;
}
body.nx-theme .btn-warning:not(:disabled):not(.disabled):active,
body.nx-theme .btn-warning:not(:disabled):not(.disabled).active,
body.nx-theme .btn-info:not(:disabled):not(.disabled):active,
body.nx-theme .btn-info:not(:disabled):not(.disabled).active {
    filter: brightness(0.85);
    color: #fff;
}
body.nx-theme .btn-success:focus,
body.nx-theme .btn-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nx-success) 35%, transparent);
}
body.nx-theme .btn-danger:focus,
body.nx-theme .btn-danger:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nx-danger) 35%, transparent);
}

/* Outline variant - Bootstrap pins this one to #369 in every state. */
body.nx-theme .btn-outline-primary {
    color: var(--nx-primary-text, var(--nx-primary));
    border-color: var(--nx-primary);
    background-color: transparent;
}
body.nx-theme .btn-outline-primary:hover,
body.nx-theme .btn-outline-primary:not(:disabled):not(.disabled):active,
body.nx-theme .btn-outline-primary:not(:disabled):not(.disabled).active,
body.nx-theme .show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--nx-primary);
    border-color: var(--nx-primary);
}
body.nx-theme .btn-outline-primary:focus,
body.nx-theme .btn-outline-primary.focus,
body.nx-theme .btn-outline-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--nx-primary-rgb), .35);
}
body.nx-theme .btn-outline-primary:disabled,
body.nx-theme .btn-outline-primary.disabled {
    color: var(--nx-primary-text, var(--nx-primary));
    background-color: transparent;
}

body.nx-theme.nx-buttons-soft .btn-primary {
    background: rgba(var(--nx-primary-rgb), 0.12);
    border-color: transparent;
    color: var(--nx-primary-text, var(--nx-primary));
    box-shadow: none;
}

body.nx-theme.nx-buttons-soft .btn-primary:hover {
    background: rgba(var(--nx-primary-rgb), 0.20);
    color: var(--nx-primary-hover);
}

body.nx-theme.nx-buttons-outline .btn-primary {
    background: transparent;
    border-color: var(--nx-primary);
    color: var(--nx-primary-text, var(--nx-primary));
    box-shadow: none;
}

body.nx-theme.nx-buttons-outline .btn-primary:hover {
    background: var(--nx-primary);
    color: #fff;
}

body.nx-theme .btn-default, body.nx-theme .btn-secondary {
    background: var(--nx-card-bg);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

body.nx-theme .btn-default:hover, body.nx-theme .btn-secondary:hover {
    background: rgba(var(--nx-primary-rgb), 0.06);
    border-color: var(--nx-primary);
    color: var(--nx-primary-text, var(--nx-primary));
}

body.nx-theme .btn-success {
    background: var(--nx-success);
    border-color: var(--nx-success);
    color: #fff;
}
body.nx-theme .btn-danger {
    background: var(--nx-danger);
    border-color: var(--nx-danger);
    color: #fff;
}
body.nx-theme .btn-warning {
    background: var(--nx-warning);
    border-color: var(--nx-warning);
    color: #fff;
}
body.nx-theme .btn-info {
    background: var(--nx-info);
    border-color: var(--nx-info);
    color: #fff;
}

body.nx-theme .btn-success:hover,
body.nx-theme .btn-danger:hover,
body.nx-theme .btn-warning:hover,
body.nx-theme .btn-info:hover {
    filter: brightness(0.93);
    color: #fff;
}

body.nx-theme.nx-buttons-soft .btn-success,
body.nx-theme.nx-buttons-soft .btn-danger,
body.nx-theme.nx-buttons-soft .btn-warning,
body.nx-theme.nx-buttons-soft .btn-info {
    border-color: transparent;
    box-shadow: none;
}
body.nx-theme.nx-buttons-soft .btn-success { background: rgba(var(--nx-success-rgb), 0.12); color: var(--nx-success); }
body.nx-theme.nx-buttons-soft .btn-danger  { background: rgba(var(--nx-danger-rgb), 0.12);  color: var(--nx-danger); }
body.nx-theme.nx-buttons-soft .btn-warning { background: rgba(var(--nx-warning-rgb), 0.12); color: var(--nx-warning); }
body.nx-theme.nx-buttons-soft .btn-info    { background: rgba(var(--nx-info-rgb), 0.12);    color: var(--nx-info); }

body.nx-theme.nx-buttons-outline .btn-success,
body.nx-theme.nx-buttons-outline .btn-danger,
body.nx-theme.nx-buttons-outline .btn-warning,
body.nx-theme.nx-buttons-outline .btn-info {
    background: transparent;
    box-shadow: none;
}
body.nx-theme.nx-buttons-outline .btn-success { border-color: var(--nx-success); color: var(--nx-success); }
body.nx-theme.nx-buttons-outline .btn-danger  { border-color: var(--nx-danger);  color: var(--nx-danger); }
body.nx-theme.nx-buttons-outline .btn-warning { border-color: var(--nx-warning); color: var(--nx-warning); }
body.nx-theme.nx-buttons-outline .btn-info    { border-color: var(--nx-info);    color: var(--nx-info); }

body.nx-theme.nx-buttons-outline .btn-success:hover { background: var(--nx-success); color: #fff; }
body.nx-theme.nx-buttons-outline .btn-danger:hover  { background: var(--nx-danger);  color: #fff; }
body.nx-theme.nx-buttons-outline .btn-warning:hover { background: var(--nx-warning); color: #fff; }
body.nx-theme.nx-buttons-outline .btn-info:hover    { background: var(--nx-info);    color: #fff; }
body.nx-theme .btn-info    { background: var(--nx-info);    border-color: var(--nx-info); }
body.nx-theme .btn-link    { color: var(--nx-link); box-shadow: none; }

/* ---------- Forms ---------- */
body.nx-theme .form-control,
body.nx-theme select.form-control,
body.nx-theme .custom-select {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-input);
    color: var(--nx-text);
    font-family: var(--nx-font-family);
    font-size: var(--nx-font-size);
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}

body.nx-theme .form-control:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.15);
    outline: none;
}

body.nx-theme label, body.nx-theme .control-label {
    color: var(--nx-text);
    font-weight: var(--nx-weight-body);
}

body.nx-theme .input-group-text {
    background: var(--nx-bg);
    border-color: var(--nx-border);
    color: var(--nx-muted);
    border-radius: var(--nx-radius-input);
}

/* ---------- Tables ---------- */
body.nx-theme .table {
    color: var(--nx-text);
    border-color: var(--nx-border);
}

body.nx-theme .table thead th,
body.nx-theme .table > thead > tr > th {
    background: transparent;
    border-bottom: max(var(--nx-border-width), 1px) solid var(--nx-border);
    color: var(--nx-muted);
    font-size: var(--nx-font-size-sm);
    font-weight: var(--nx-weight-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.nx-theme .table td, body.nx-theme .table th { border-color: var(--nx-border); }

body.nx-theme .table-striped > tbody > tr:nth-of-type(odd),
body.nx-theme .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(var(--nx-primary-rgb), 0.025);
}

body.nx-theme .table-hover tbody tr:hover {
    background: rgba(var(--nx-primary-rgb), 0.05);
}

body.nx-theme div.dataTables_wrapper,
body.nx-theme .table-container {
    background: var(--nx-card-bg);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow);
    border: var(--nx-border-width) solid var(--nx-border);
    padding: calc(var(--nx-card-padding) * 0.5);
}

body.nx-theme div.dataTables_wrapper:has(#tableInvoicesList) .dataTables_filter,
body.nx-theme div.dataTables_wrapper:has(#tableQuotesList) .dataTables_filter {
    display: none;
}

body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_filter input {
    background: var(--nx-bg); color: var(--nx-text);
    border: 1px solid var(--nx-border); border-radius: var(--nx-radius-input, 10px);
    padding: 6px 12px; font-size: 13px; font-weight: 400; outline: none;
}
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12); }
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_info { color: var(--nx-muted); font-size: 12.5px; font-weight: 400; }
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate {
    display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: 2px;
    padding: 4px; border: none; border-radius: 0; background: transparent;
}
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .pagination {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0;
}
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item),
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    border-radius: var(--nx-radius-sm) !important; border: 1px solid var(--nx-border) !important;
    background: transparent !important; color: var(--nx-text) !important;
    font-weight: 400 !important; font-size: 13px !important; text-transform: none !important;
    letter-spacing: normal !important; margin: 0 !important; padding: 7px 13px !important;
    min-width: 36px; text-align: center; line-height: 1.2; box-shadow: none !important;
}
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .paginate_button.page-item {
    border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
}
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item):focus,
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item):active,
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item):hover:not(.current):not(.disabled),
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .page-link:focus,
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .page-link:active,
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    outline: none !important; box-shadow: none !important;
    color: var(--nx-text) !important; background: transparent !important;
    border-color: var(--nx-border) !important;
}
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).current,
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: var(--nx-primary) !important; color: #fff !important;
    border: 2px solid var(--nx-primary) !important;
}
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).disabled,
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    opacity: .4; cursor: default; color: var(--nx-muted) !important; background: transparent !important;
}
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).previous,
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).next,
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .page-item.previous .page-link,
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .page-item.next .page-link {
    font-weight: 400 !important; color: var(--nx-muted) !important;
}
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).previous:hover:not(.disabled),
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).next:hover:not(.disabled),
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .page-item.previous:not(.disabled) .page-link:hover,
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .page-item.next:not(.disabled) .page-link:hover {
    color: var(--nx-primary-text, var(--nx-primary)) !important;
}
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .ellipsis,
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link[aria-label="..."] {
    padding: 7px 6px; color: var(--nx-muted); cursor: default;
}
body.nx-theme .nx-inv-card div.dataTables_wrapper .dataTables_length input {
    background: var(--nx-bg) !important; color: var(--nx-text) !important;
    border: 1px solid var(--nx-border) !important; border-radius: var(--nx-radius-input, 10px) !important;
    padding: 5px 10px !important; font-size: 13px !important; font-weight: 400 !important; outline: none !important;
    box-shadow: none !important;
}

/* ---------- Status pills / labels / badges ---------- */
body.nx-theme .label, body.nx-theme .badge, body.nx-theme .status {
    border-radius: var(--nx-radius-badge);
    padding: 4px 12px;
    font-size: var(--nx-font-size-sm);
    font-weight: var(--nx-weight-body);
    text-transform: capitalize;
}

body.nx-theme .status-active, body.nx-theme .label-success, body.nx-theme .badge-success,
body.nx-theme .domain-status-active {
    background: var(--nx-pill-active-bg);
    color: var(--nx-pill-active-text);
}

body.nx-theme .status-pending, body.nx-theme .label-warning, body.nx-theme .badge-warning {
    background: var(--nx-pill-pending-bg);
    color: var(--nx-pill-pending-text);
}

body.nx-theme .status-suspended {
    background: var(--nx-pill-suspended-bg);
    color: var(--nx-pill-suspended-text);
}

body.nx-theme .status-cancelled, body.nx-theme .status-terminated,
body.nx-theme .label-danger, body.nx-theme .badge-danger {
    background: var(--nx-pill-cancelled-bg);
    color: var(--nx-pill-cancelled-text);
}

body.nx-theme .status-open, body.nx-theme .label-info, body.nx-theme .badge-info {
    background: var(--nx-pill-open-bg);
    color: var(--nx-pill-open-text);
}

body.nx-theme .status-answered, body.nx-theme .status-customer-reply {
    background: var(--nx-pill-answered-bg);
    color: var(--nx-pill-answered-text);
}

body.nx-theme .status-closed, body.nx-theme .label-default, body.nx-theme .badge-secondary {
    background: var(--nx-pill-closed-bg);
    color: var(--nx-pill-closed-text);
}

/* ---------- Alerts ---------- */
body.nx-theme .alert {
    border-radius: var(--nx-radius-card);
    border: none;
}

body.nx-theme .alert-success { background: var(--nx-pill-active-bg); color: var(--nx-pill-active-text); }
body.nx-theme .alert-danger  { background: var(--nx-pill-cancelled-bg); color: var(--nx-pill-cancelled-text); }
body.nx-theme .alert-warning { background: var(--nx-pill-pending-bg); color: var(--nx-pill-pending-text); }
body.nx-theme .alert-info    { background: var(--nx-pill-open-bg); color: var(--nx-pill-open-text); }

/* ---------- Pagination / tabs / breadcrumb ---------- */
body.nx-theme .pagination .page-link {
    border-color: var(--nx-border);
    color: var(--nx-text);
    background: var(--nx-card-bg);
}

body.nx-theme .pagination .page-item.active .page-link {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
}

body.nx-theme .nav-tabs { border-color: var(--nx-border); }
body.nx-theme .nav-tabs .nav-link { color: var(--nx-muted); border: none; }
body.nx-theme .nav-tabs .nav-link.active {
    color: var(--nx-primary-text, var(--nx-primary));
    background: transparent;
    border-bottom: 2px solid var(--nx-primary);
}

body.nx-theme .breadcrumb {
    background: transparent;
    padding-left: 0;
    font-size: var(--nx-font-size-sm);
}
body.nx-theme .breadcrumb a { color: var(--nx-muted); }
body.nx-theme .breadcrumb .active { color: var(--nx-text); }

/* ---------- Modals / popovers ---------- */
body.nx-theme .modal-content {
    background: var(--nx-card-bg);
    color: var(--nx-text);
    border: none;
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow);
}

body.nx-theme .modal-header, body.nx-theme .modal-footer { border-color: var(--nx-border); }

/* ---------- Footer ---------- */
body.nx-theme #footer, body.nx-theme footer.footer {
    background: var(--nx-footer-bg);
    color: var(--nx-muted);
    border-top: var(--nx-border-width) solid var(--nx-border);
    flex-shrink: 0;
}

body.nx-theme .nx-mobile-navbar {
    background: var(--nx-card-bg);
}

@media (max-width: 1249.98px) {
    body.nx-theme .nx-mobile-navbar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, 85vw);
        display: flex;
        flex-direction: column;
        z-index: 1060;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        box-shadow: 4px 0 24px rgba(15, 15, 20, 0.15);
        border-right: 1px solid var(--nx-border);
    }

    body.nx-mobile-nav-open .nx-mobile-navbar {
        transform: translateX(0);
    }

    .nx-mobile-navbar-head {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        padding: 16px 16px 12px;
        border-bottom: 1px solid var(--nx-border);
    }

    .nx-mobile-nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 4px;
        color: var(--nx-text);
        cursor: pointer;
    }

    .nx-mobile-navbar-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 8px 0;
    }

    body.nx-theme .nx-mobile-navbar-body .list-group {
        background: transparent;
        border: 0;
        box-shadow: none;
        margin: 0;
        border-radius: 0;
        overflow: visible;
    }

    body.nx-theme .nx-mobile-navbar-body .list-group-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: transparent;
        border: 0;
        padding: 12px 20px;
        color: var(--nx-text);
        font-size: 15px;
        font-weight: 400;
        border-radius: 0;
        transition: color var(--nx-transition);
    }

    body.nx-theme .nx-mobile-navbar-body .list-group-item:hover,
    body.nx-theme .nx-mobile-navbar-body .list-group-item:active {
        background: rgba(var(--nx-primary-rgb), 0.06);
    }

    body.nx-theme .nx-mobile-navbar-body .list-group-item.text-primary {
        background: rgba(var(--nx-primary-rgb), 0.08);
    }

    body.nx-theme .nx-mobile-navbar-body .nx-secondary-nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        border: 0;
        padding: 12px 20px;
        color: var(--nx-text);
        font-size: 15px;
        font-weight: 400;
        border-radius: 0;
        transition: color var(--nx-transition), background var(--nx-transition);
    }
    body.nx-theme .nx-mobile-navbar-body .nx-secondary-nav-item:hover,
    body.nx-theme .nx-mobile-navbar-body .nx-secondary-nav-item:active {
        background: rgba(var(--nx-primary-rgb), 0.06);
        color: var(--nx-text);
    }
    body.nx-theme .nx-mobile-navbar-body .nx-secondary-nav-item i {
        width: 22px;
        margin-right: 0 !important;
        text-align: center;
        font-size: 16px;
        color: var(--nx-primary-text, var(--nx-primary));
        flex-shrink: 0;
    }

    .nx-mobile-nav-ico {
        min-width: 22px;
        margin-right: 10px;
        font-size: 20px;
        color: var(--nx-primary-text, var(--nx-primary));
        flex-shrink: 0;
    }

    .nx-mobile-nav-caret {
        font-size: 20px;
        color: var(--nx-muted);
        flex-shrink: 0;
        transition: transform var(--nx-transition-slow);
    }

    .nx-mobile-nav-parent[aria-expanded="true"] .nx-mobile-nav-caret {
        transform: rotate(180deg);
        color: var(--nx-primary-text, var(--nx-primary));
    }

    body.nx-theme .nx-mobile-navbar-body .nx-mobile-nav-submenu {
        margin: 2px 0 4px 20px;
        padding-left: 16px;
        border-left: 2px solid var(--nx-border);
    }

    body.nx-theme .nx-mobile-navbar-body .nx-mobile-nav-submenu .list-group-item {
        justify-content: flex-start;
        gap: 10px;
        padding: 10px 12px;
        font-size: 14px;
        font-weight: 400;
        color: var(--nx-muted);
    }

    body.nx-theme .nx-mobile-navbar-body .nx-mobile-nav-submenu .list-group-item:hover,
    body.nx-theme .nx-mobile-navbar-body .nx-mobile-nav-submenu .list-group-item.text-primary {
        color: var(--nx-primary-text, var(--nx-primary));
        background: rgba(var(--nx-primary-rgb), 0.06);
    }

    .nx-mobile-nav-sub-ico {
        min-width: 20px;
        font-size: var(--nx-nav-icon-size-mobile);
        color: inherit;
        flex-shrink: 0;
    }

    .nx-mobile-nav-divider {
        height: 1px;
        margin: 8px 20px;
        background: var(--nx-border);
    }
    .nx-mobile-nav-section-label {
        padding: 4px 20px 8px;
        font-size: 11.5px;
        font-weight: 400;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--nx-muted);
    }

    .nx-mobile-navbar-footer {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--nx-border);
    }

    .nx-mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(15, 15, 20, 0.5);
    }

    body.nx-mobile-nav-open .nx-mobile-backdrop {
        display: block;
    }

    body.nx-mobile-nav-open {
        overflow: hidden;
    }
}

@media (max-width: 1249.98px) {
    body.nx-theme .nx-topbar .nx-sh-tb-row,
    body.nx-theme .nx-topbar-expanded-top .nx-content-container,
    body.nx-theme .nx-topbar-expanded-bottom .nx-content-container {
        display: flex !important;
        flex-wrap: nowrap;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    body.nx-theme .nx-topbar .nx-sh-flex-grow,
    body.nx-theme .nx-topbar-expanded-top .nx-sh-flex-grow,
    body.nx-theme .nx-topbar-expanded-bottom .nx-sh-flex-grow {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }
    body.nx-theme .nx-topbar-hamburger {
        flex-shrink: 0;
        margin-right: 0 !important;
    }
    body.nx-theme .nx-topbar .nx-sh-flex-grow > a.nx-sh-nodeco,
    body.nx-theme .nx-topbar-expanded-bottom .nx-sh-flex-grow > a.nx-sh-nodeco {
        margin-right: 0 !important;
        flex-shrink: 0;
        min-width: 0;
        overflow: hidden;
    }
    body.nx-theme .nx-topbar-nav-middle { display: none !important; }

    /* Right side: cart, currency and the dark-mode toggle only. */
    body.nx-theme .nx-topbar-right,
    body.nx-theme .nx-sh-tb-actions {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
        flex-shrink: 0;
        width: auto;
    }
    body.nx-theme .nx-guest-login-buttons { display: none !important; }
    body.nx-theme .nx-topbar-right .nx-topbar-divider,
    body.nx-theme .nx-sh-tb-actions .nx-topbar-divider {
        display: none !important;
    }
    @media (max-width: 575.98px) {
        body.nx-theme .nx-topbar-right .nx-langsw-name,
        body.nx-theme .nx-sh-tb-actions .nx-langsw-name {
            display: none;
        }
        body.nx-theme .nx-topbar-right .btn.nx-langsw-btn,
        body.nx-theme .nx-sh-tb-actions .btn.nx-langsw-btn {
            padding-left: 8px;
            padding-right: 8px;
        }
        body.nx-theme .nx-topbar-right .nx-langmenu,
        body.nx-theme .nx-sh-tb-actions .nx-langmenu {
            width: auto;
            min-width: 0;
            max-width: calc(100vw - 32px);
        }
    }
    body.nx-theme .nx-sh-tb-cart-text { display: none; }
    body.nx-theme .nx-topbar-link.nx-sh-tb-cart { padding: 6px; }

    body.nx-theme .nx-topbar-expanded-top.nx-th-merged { display: none !important; }
    body.nx-theme .nx-topbar-expanded-bottom .nx-content-container > .nx-sh-tb-actions {
        flex-shrink: 0;
        margin-left: auto;
    }

    body.nx-theme .nx-topbar {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 768px) and (max-width: 1249.98px) {
    /* Desktop-only pieces, forced back off. */
    body.nx-theme .nx-sidebar.d-md-flex,
    body.nx-theme .nx-topbar-nav-middle.d-md-flex,
    body.nx-theme .nx-guest-login-buttons.d-md-flex,
    body.nx-theme .nx-topbar-openticket.d-md-flex {
        display: none !important;
    }

    body.nx-theme .nx-mobile-nav-toggle.d-md-none {
        display: inline-flex !important;
    }

    body.nx-theme .nx-topbar-expanded-bottom.d-md-none {
        display: block !important;
    }

    body.nx-theme .nx-mobile-navbar.d-md-none {
        display: flex !important;
    }

    body.nx-mobile-nav-open .nx-mobile-backdrop.d-md-none {
        display: block !important;
    }
}

body.nx-theme.nx-footer-hidden #footer,
body.nx-theme.nx-footer-hidden footer.footer { display: none; }

body.nx-theme.nx-footer-minimal #footer .row > div:not(:first-child) { display: none; }

/* ---------- Floating controls injected by the module ---------- */
body.nx-theme .nx-mode-toggle,
body.nx-theme .nx-sidebar-collapse {
    position: fixed;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--nx-card-bg);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow), 0 2px 8px rgba(0,0,0,0.12);
    cursor: pointer;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--nx-font-size-xl);
    transition: transform var(--nx-transition);
}

body.nx-theme .nx-mode-toggle { bottom: 20px; }
body.nx-theme .nx-sidebar-collapse { bottom: 74px; }
body.nx-theme .nx-mode-toggle:hover,
body.nx-theme .nx-sidebar-collapse:hover { transform: scale(1.08); color: var(--nx-primary-text, var(--nx-primary)); }
body.nx-theme .nx-sidebar-collapse i { transition: transform var(--nx-transition); }
body.nx-theme .nx-sidebar-collapse.is-collapsed i { transform: rotate(180deg); }

@media (max-width: 1249.98px) {
    body.nx-theme .nx-sidebar-collapse { display: none; }
}

/* ---------- Nexum Sidebar Layout Elements ---------- */
.nx-app-layout {
    font-family: var(--nx-font-family);
    background-color: var(--nx-bg);
    color: var(--nx-text);
    width: 100%;
}

.nx-app-layout > .nx-main-area {
    flex: 1 1 auto;
    min-width: 0;
}

.nx-sidebar {
    background: var(--nx-sidebar-bg);
    border-right: 1px solid var(--nx-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-x: hidden;
    transition: background var(--nx-transition-slow), border-color var(--nx-transition-slow), width var(--nx-transition-slow), flex-basis var(--nx-transition-slow), padding var(--nx-transition-slow), align-items var(--nx-transition-slow);
}

/* Expanded Sidebar Mode */
.nx-sidebar-mode-expanded .nx-sidebar {
    width: var(--nx-sidebar-width, 260px);
    flex: 0 0 var(--nx-sidebar-width, 260px);
    align-items: flex-start;
    padding: 22px 20px;
}
.nx-sidebar-mode-expanded .nx-sidebar-logo {
    justify-content: flex-start;
    width: 100%;
    padding-left: 8px;
    transition: background-color var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
}
.nx-sidebar-mode-expanded .nx-sidebar-nav {
    align-items: stretch;
    transition: background-color var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
}
.nx-sidebar-mode-expanded .nx-nav-item {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 10px 14px;
    gap: 12px;
    border-radius: var(--nx-radius-md);
    transition: background-color var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
}
.nx-sidebar-mode-expanded .nx-nav-label {
    display: block;
    text-align: left;
    font-size: var(--nx-font-size-md);
    padding: 0;
    word-break: normal;
    transition: background-color var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
}

/* Compact Sidebar Mode (Icon top, label bottom) */
.nx-sidebar-mode-compact .nx-sidebar {
    width: var(--nx-sidebar-width-compact, 96px) !important;
    flex: 0 0 var(--nx-sidebar-width-compact, 96px) !important;
    align-items: center !important;
    padding: 22px 0 !important;
}
.nx-sidebar-mode-compact .nx-sidebar-logo {
    justify-content: center;
    width: 100%;
    padding-left: 0;
}
.nx-sidebar-mode-compact .nx-sidebar-nav {
    align-items: center;
}
.nx-sidebar-mode-compact .nx-nav-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    padding: 11px 0;
    gap: 6px;
    border-radius: var(--nx-radius-card);
}
.nx-sidebar-mode-compact .nx-nav-label {
    display: block;
    text-align: center;
    font-size: 11.5px;
}

/* Icons Only Sidebar Mode */
.nx-sidebar-mode-icons .nx-sidebar {
    width: var(--nx-sidebar-width-icons, 72px);
    flex: 0 0 var(--nx-sidebar-width-icons, 72px);
    align-items: center;
    padding: 22px 0;
}
.nx-sidebar-mode-icons .nx-sidebar-logo {
    justify-content: center;
    width: 100%;
    padding-left: 0;
}
.nx-sidebar-mode-icons .nx-sidebar-nav {
    align-items: center;
}
.nx-sidebar-mode-icons .nx-nav-item {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 10px 0;
    gap: 0;
    border-radius: var(--nx-radius-md);
}
.nx-sidebar-mode-icons .nx-nav-label {
    display: none;
}

/* Collapse Sidebar Fixes */
.nx-sidebar-mode-compact .nx-sidebar,
.nx-sidebar-mode-compact .nx-sidebar-top,
.nx-sidebar-mode-icons .nx-sidebar,
.nx-sidebar-mode-icons .nx-sidebar-top {
    overflow: visible;
}
.nx-sidebar-mode-compact .nx-sidebar-submenu-list,
.nx-sidebar-mode-icons .nx-sidebar-submenu-list,
.nx-sidebar-mode-compact .nx-sidebar-submenu-collapse,
.nx-sidebar-mode-icons .nx-sidebar-submenu-collapse {
    display: none;
}
.nx-sidebar-mode-compact .nx-nav-arrow,
.nx-sidebar-mode-icons .nx-nav-arrow {
    display: none;
}

html.nx-dark body .nx-sidebar {
    background: var(--nx-sidebar-bg);
    border-right: 1px solid var(--nx-border);
}

.nx-sidebar-logo {
    height: 44px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nx-sidebar-logo .nx-logo-img,
.nx-sidebar-logo img {
    max-height: var(--nx-logo-height, 36px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.nx-sidebar-mode-compact .nx-sidebar-logo .nx-logo-compact,
.nx-sidebar-mode-icons .nx-sidebar-logo .nx-logo-compact {
    max-height: 44px;
    max-width: 44px;
    width: 44px;
    height: auto;
}
.nx-sidebar-mode-icons .nx-sidebar-logo .nx-logo-compact {
    max-height: 34px;
    max-width: 34px;
    width: 34px;
}
/* Topbar logo (top layout) */
.nx-topbar-left img,
.nx-logo-top {
    max-height: var(--nx-logo-height, 36px);
    width: auto;
    object-fit: contain;
}

body.nx-theme .nx-sidebar-nav {
    margin-top: 0;
}

.nx-logo-mark {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--nx-secondary), var(--nx-primary));
    box-shadow: 0 6px 16px rgba(var(--nx-primary-rgb), 0.35);
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nx-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: center;
}

.nx-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 80px;
    padding: 11px 0;
    border-radius: var(--nx-radius-card);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}

.nx-nav-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nx-bg);
    color: var(--nx-muted);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}

html.nx-dark body .nx-nav-icon-wrapper {
    background: var(--nx-card-bg);
    color: var(--nx-muted);
}

.nx-nav-label {
    font-size: 11.5px;
    letter-spacing: 0.1px;
    font-weight: var(--nx-weight-nav);
    color: var(--nx-sidebar-text);
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
    padding: 0 4px;
    transition: color var(--nx-transition);
}

html.nx-dark body .nx-nav-label {
    color: var(--nx-muted);
}

/* Inactive Hover state */
.nx-nav-item:hover .nx-nav-icon-wrapper {
    background: rgba(var(--nx-primary-rgb), 0.08);
    color: var(--nx-primary-text, var(--nx-primary));
}

html.nx-dark body .nx-nav-item:hover .nx-nav-icon-wrapper {
    background: rgba(var(--nx-primary-rgb), 0.12);
    color: var(--nx-primary-text, var(--nx-primary));
}

.nx-nav-item:hover .nx-nav-label {
    color: var(--nx-primary-text, var(--nx-primary));
}

html.nx-dark body .nx-nav-item:hover .nx-nav-label {
    color: var(--nx-primary-text, var(--nx-primary));
}

/* Active State */
.nx-nav-item.active .nx-nav-icon-wrapper {
    background: var(--nx-primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(var(--nx-primary-rgb), 0.35);
}

html.nx-dark body .nx-nav-item.active .nx-nav-icon-wrapper {
    background: var(--nx-primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(var(--nx-primary-rgb), 0.45);
}

.nx-nav-item.active .nx-nav-label {
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}

html.nx-dark body .nx-nav-item.active .nx-nav-label {
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}

.nx-sidebar-footer {
    border-top: none;
    padding-top: 0;
    display: flex;
    justify-content: center;
    width: 100%;
}

.nx-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(140deg, #f59e0b, #ea580c);
    color: #ffffff;
    font-weight: 400;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.nx-user-info {
    display: none;
}

/* ---------- Dark Mode Toggle Switch ---------- */
.nx-topbar-mode-toggle {
    width: 44px;
    height: 24px;
    border-radius: var(--nx-radius-badge);
    background: rgba(var(--nx-muted-rgb, 100, 116, 139), 0.85);
    position: relative;
    cursor: pointer;
    transition: background-color var(--nx-transition-slow);
    flex-shrink: 0;
    border: none;
    padding: 0;
}

.nx-topbar-mode-toggle.active {
    background: var(--nx-primary);
}

.nx-topbar-mode-toggle:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: 2px;
}

.nx-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--nx-card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nx-muted);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform var(--nx-transition-slow), color var(--nx-transition-slow);
}

.nx-toggle-thumb .material-symbols-rounded {
    font-size: 12px;
    line-height: 1;
}

.nx-toggle-thumb .nx-toggle-ico-light {
    display: inline-flex;
}
.nx-toggle-thumb .nx-toggle-ico-dark {
    display: none;
    font-variation-settings: 'FILL' 1;
}
html.nx-dark body .nx-toggle-thumb .nx-toggle-ico-light {
    display: none;
}
html.nx-dark body .nx-toggle-thumb .nx-toggle-ico-dark {
    display: inline-flex;
}

.nx-topbar-mode-toggle.active .nx-toggle-thumb {
    transform: translateX(20px);
    background: #fff;
    color: var(--nx-primary-text, var(--nx-primary));
}

/* ---------- Main Column and Topbar ---------- */
.nx-main-area {
    min-width: 0;
    background: var(--nx-bg);
}

.nx-topbar {
    position: relative;
    z-index: 1040;
    height: var(--nx-header-height);
    background: var(--nx-header-bg);
    border-bottom: 1px solid var(--nx-border);
    padding: 0 var(--nx-topbar-gutter);
    flex-shrink: 0;
    justify-content: center;
}

.nx-page-category-label {
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
}

.nx-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nx-topbar-divider {
    width: 1px;
    height: 24px;
    background: var(--nx-border);
    flex-shrink: 0;
}

html.nx-dark body .nx-topbar-divider {
    background: var(--nx-border);
}

.nx-logo-light-mode {
    display: inline-block;
}
.nx-logo-dark-mode {
    display: none;
}
html.nx-dark body .nx-logo-light-mode {
    display: none;
}
html.nx-dark body .nx-logo-dark-mode {
    display: inline-block;
}

.nx-topbar-link {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--nx-text);
    font-weight: 400;
    font-size: var(--nx-font-size-md);
    text-decoration: none;
    background: transparent;
    border: none;
    padding: 6px 6px;
    border-radius: var(--nx-radius-md);
    box-shadow: none;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
    overflow: visible;
}

html.nx-dark body .nx-topbar-link {
    color: var(--nx-text);
}

.nx-topbar-link:hover {
    color: var(--nx-primary-text, var(--nx-primary));
}

/* Fix input group focus border spread */
.input-group .form-control:focus {
    box-shadow: none !important;
    border-color: var(--nx-border) !important;
}

.input-group:focus-within .form-control {
    border-color: var(--nx-primary) !important;
}

.input-group:focus-within .btn {
    border-color: var(--nx-primary) !important;
}

/* Horizontal Top Navigation Links */
.nx-topbar-nav-middle .nx-navbar-link::after {
    display: none;
    content: none;
}
.nx-navbar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--nx-font-size-md);
    font-weight: var(--nx-weight-nav);
    color: var(--nx-text);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--nx-radius-md);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}

.nx-navbar-link.active {
    color: var(--nx-primary-text, var(--nx-primary));
    background: rgba(var(--nx-primary-rgb), 0.08);
}

html.nx-dark body .nx-navbar-link.active {
    background: rgba(var(--nx-primary-rgb), 0.15);
}

.nx-navbar-link:hover {
    color: var(--nx-primary-text, var(--nx-primary));
    background: rgba(var(--nx-primary-rgb), 0.05);
}

.nx-navbar-link:hover span,
.nx-navbar-link.active span {
    color: var(--nx-primary-text, var(--nx-primary)) !important;
}

/* Auto open dropdowns on hover */
@media (min-width: 1250px) {
    .nx-top-nav-dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

.nx-top-nav-dropdown .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
    z-index: -1;
}

.nx-content-wrapper {
    padding: calc(var(--nx-content-padding) * 1.25) var(--nx-content-padding) var(--nx-content-padding);
    min-width: 0;
}

body.nx-theme .nx-content-container > :last-child:not(.row):not(div[id]):not(form) {
    margin-bottom: 0;
}
body.nx-theme .nx-content-container > .text-center:last-child,
body.nx-theme .nx-content-container > p:last-child {
    margin-top: var(--nx-space-8, 32px);
    padding-top: var(--nx-space-5, 20px);
    color: var(--nx-muted);
    font-size: var(--nx-font-size-sm);
}
body.nx-theme .nx-content-container > .text-center:last-child a,
body.nx-theme .nx-content-container > p:last-child a {
    color: var(--nx-muted);
    text-decoration: none;
}
body.nx-theme .nx-content-container > .text-center:last-child a:hover,
body.nx-theme .nx-content-container > p:last-child a:hover {
    color: var(--nx-primary-text, var(--nx-primary));
}

.nx-sidebar-mode-compact .nx-content-wrapper,
.nx-sidebar-mode-icons .nx-content-wrapper {
    padding: calc(var(--nx-content-padding) * 0.6);
}

/* Sidebar Logo Toggles for Compact States */
.nx-sidebar-mode-compact .nx-logo-full,
.nx-sidebar-mode-icons .nx-logo-full {
    display: none;
}
.nx-sidebar-mode-compact .nx-logo-compact,
.nx-sidebar-mode-icons .nx-logo-compact {
    display: block;
}

.nx-content-container {
    max-width: var(--nx-container-width);
    margin: 0 auto;
    width: 100%;
}

.nx-topbar .nx-content-container,
.nx-topbar-expanded-top .nx-content-container,
.nx-topbar-expanded-bottom .nx-content-container {
    padding-left: 0;
    padding-right: 0;
}

body.nx-theme div[style*="#ffffd2"] {
    display: none;
}

.nx-page-title {
    font-size: var(--nx-font-size-h1);
    font-weight: var(--nx-weight-page-title);
    color: var(--nx-text);
    letter-spacing: -0.01em;
}

.nx-page-subtitle {
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
}

/* ---------- Redesigned Count Cards ---------- */
.nx-stat-card {
    background: var(--nx-card-bg);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    transition: transform var(--nx-transition), box-shadow var(--nx-transition);
}

.nx-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.nx-stat-icon-badge {
    width: 32px;
    height: 32px;
    border-radius: var(--nx-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--nx-font-size-xl);
    flex-shrink: 0;
}

.nx-icon-services {
    background: rgba(var(--nx-primary-rgb), 0.12);
    color: var(--nx-primary-text, var(--nx-primary));
}

html.nx-dark body .nx-icon-services {
    background: rgba(var(--nx-primary-rgb), 0.20);
}

.nx-icon-domains {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}

html.nx-dark body .nx-icon-domains {
    background: rgba(14, 165, 233, 0.20);
}

.nx-icon-billing {
    background: rgba(225, 29, 72, 0.12);
    color: #e11d48;
}

html.nx-dark body .nx-icon-billing {
    background: rgba(225, 29, 72, 0.20);
}

.nx-icon-tickets {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

html.nx-dark body .nx-icon-tickets {
    background: rgba(217, 119, 6, 0.20);
}

.nx-stat-label {
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.nx-stat-value {
    font-size: 24px;
    font-weight: 400;
    color: var(--nx-text);
    line-height: 1.2;
}

/* ---------- Status Filter Chips ---------- */
.nx-filter-chips {
    gap: 8px;
}

.nx-filter-chip {
    border-radius: var(--nx-radius-badge);
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 400;
    border: none;
    box-shadow: none;
    background-color: var(--nx-border);
    color: var(--nx-muted);
    transition: background var(--nx-transition), color var(--nx-transition);
}

.nx-filter-chip.active {
    background-color: var(--nx-primary) !important;
    color: #fff !important;
}

/* ---------- Profile Dropdown Styling ---------- */
.btn-profile {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--nx-text);
    font-weight: 400;
}

.btn-profile:focus, .btn-profile:active {
    box-shadow: none !important;
}

.gap-2 {
    gap: 8px;
}

/* ---------- Responsive Sidebar & Mobile Buttons ---------- */
.nx-mobile-toggle-btn,
.nx-sidebar-close-btn {
    background: transparent;
    border: none;
    color: var(--nx-text);
    font-size: var(--nx-font-size-h3);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nx-mobile-toggle-btn:focus,
.nx-sidebar-close-btn:focus {
    box-shadow: none;
    outline: none;
}
.nx-mobile-toggle-btn:focus-visible,
.nx-sidebar-close-btn:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: 2px;
}

@media (max-width: 991px) {
    .nx-sidebar {
        position: fixed;
        top: 0;
        left: -280px; /* Initially off-screen */
        width: 260px;
        height: 100vh;
        z-index: 1050;
        transition: left var(--nx-transition-slow);
        box-shadow: 4px 0 24px rgba(15,15,20,0.12);
        padding: 20px 14px;
    }
    
    .nx-sidebar.open {
        left: 0;
    }
    
    .nx-topbar {
        padding: 0 var(--nx-topbar-gutter);
    }

    .nx-content-wrapper {
        padding: calc(var(--nx-content-padding) * 0.75) 16px;
    }
}

/* ---------- Home panels grid rhythm ---------- */
body.nx-theme .client-home-panels .card { height: calc(100% - var(--nx-card-gap)); }

/* ---------- Scrollbar (webkit) ---------- */
body.nx-theme ::-webkit-scrollbar { width: 10px; height: 10px; }
body.nx-theme ::-webkit-scrollbar-track { background: var(--nx-bg); }
body.nx-theme ::-webkit-scrollbar-thumb {
    background: var(--nx-border);
    border-radius: var(--nx-radius-md);
}
body.nx-theme ::-webkit-scrollbar-thumb:hover { background: var(--nx-muted); }

/* ---------- Comprehensive Dark Mode Overrides ---------- */
html.nx-dark body {
    background-color: var(--nx-bg);
    color: var(--nx-text);
}

html.nx-dark body .nx-main-area {
    background-color: var(--nx-bg);
}

html.nx-dark body .nx-content-wrapper {
    background-color: var(--nx-bg);
}

html.nx-dark body .nx-topbar {
    background-color: var(--nx-card-bg);
    border-bottom-color: var(--nx-border);
}

html.nx-dark body .nx-topbar-link {
    color: var(--nx-muted);
}

html.nx-dark body .nx-topbar-link:hover {
    color: var(--nx-primary-text, var(--nx-primary));
}

html.nx-dark body .nx-page-category-label {
    color: var(--nx-muted);
}

html.nx-dark body .nx-topbar-divider {
    background: var(--nx-border);
}

html.nx-dark body .card,
html.nx-dark body .list-group-item,
html.nx-dark body .dropdown-menu {
    background-color: var(--nx-card-bg);
    border-color: var(--nx-border);
    color: var(--nx-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

html.nx-dark body .dropdown-item {
    color: var(--nx-text);
    transition: background var(--nx-transition), color var(--nx-transition);
}

html.nx-dark body .dropdown-item:hover,
html.nx-dark body .dropdown-item:focus {
    background-color: rgba(var(--nx-primary-rgb), 0.14);
    color: var(--nx-text);
}

html.nx-dark body .dropdown-divider {
    border-top-color: var(--nx-border);
}

html.nx-dark body .card-header,
html.nx-dark body .card-footer {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--nx-border);
    color: var(--nx-text);
}
/* Sidebar cards are padded boxes; a tinted footer would show as a band inside them. */
html.nx-dark body .nx-pd-side-card > .card-footer { background-color: transparent; }

html.nx-dark body input,
html.nx-dark body select,
html.nx-dark body textarea {
    background-color: var(--nx-bg);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

html.nx-dark body input:focus, 
html.nx-dark body select:focus, 
html.nx-dark body textarea:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 2px rgba(var(--nx-primary-rgb), 0.25);
}

html.nx-dark body table,
html.nx-dark body th,
html.nx-dark body td {
    border-color: var(--nx-border);
    color: var(--nx-text);
}

html.nx-dark body .table th {
    background-color: var(--nx-card-bg);
}

html.nx-dark body .text-muted,
html.nx-dark body p.text-muted,
html.nx-dark body span.text-muted,
html.nx-dark body small.text-muted {
    color: var(--nx-muted);
}

/* ---------- Sidebar Submenu Flyouts ---------- */
body.nx-theme .nx-nav-dropdown-wrapper .dropdown-menu {
    border: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
}
body.nx-theme .nx-nav-dropdown-wrapper .dropdown-item {
    background: transparent;
    color: var(--nx-text);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
body.nx-theme .nx-nav-dropdown-wrapper .dropdown-item:hover {
    background: rgba(var(--nx-primary-rgb), 0.06);
    color: var(--nx-primary-text, var(--nx-primary));
}

/* Hide bootstrap dropdown toggle carets in sidebar */
body.nx-theme .nx-sidebar .dropdown-toggle::after {
    display: none !important;
}

/* Sidebar word-wrap wrapping */
body.nx-theme .sidebar .list-group-item,
body.nx-theme .cart-sidebar .list-group-item,
body.nx-theme .list-group-item-action,
body.nx-theme .nx-sidebar-nav .nx-nav-label {
    white-space: normal;
    word-break: break-word;
    text-overflow: clip;
    overflow: visible;
}

/* ---------- Expanded Accordion Sidebar Styles ---------- */
.nx-sidebar-mode-expanded .d-none-compact {
    display: block !important;
}
.nx-sidebar-mode-expanded .d-block-compact {
    display: none !important;
}
.nx-sidebar-mode-compact .d-none-compact,
.nx-sidebar-mode-icons .d-none-compact {
    display: none !important;
}
.nx-sidebar-mode-compact .d-block-compact,
.nx-sidebar-mode-icons .d-block-compact {
    display: block !important;
}

/* Expanded Sidebar: Nav Items & Icons */
.nx-sidebar-mode-expanded .nx-nav-item {
    background: transparent;
    color: var(--nx-sidebar-text);
}
.nx-sidebar-mode-expanded .nx-nav-icon-wrapper {
    background: transparent;
    color: var(--nx-sidebar-text);
    width: 24px;
    height: 24px;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
.nx-sidebar-mode-expanded .nx-nav-label {
    color: var(--nx-sidebar-text);
    font-weight: var(--nx-weight-nav);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}

/* Inactive Hover state */
.nx-sidebar-mode-expanded .nx-nav-item:hover {
    background: rgba(var(--nx-primary-rgb), 0.04);
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-sidebar-mode-expanded .nx-nav-item:hover .nx-nav-icon-wrapper {
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-sidebar-mode-expanded .nx-nav-item:hover .nx-nav-label {
    color: var(--nx-primary-text, var(--nx-primary));
}

/* Active & Expanded Accordion State */
.nx-sidebar-mode-expanded .nx-nav-item.active,
.nx-sidebar-mode-expanded .nx-nav-item[aria-expanded="true"] {
    color: var(--nx-primary-text, var(--nx-primary)) !important;
}
.nx-sidebar-mode-expanded .nx-nav-item.active .nx-nav-icon-wrapper,
.nx-sidebar-mode-expanded .nx-nav-item[aria-expanded="true"] .nx-nav-icon-wrapper {
    color: var(--nx-primary-text, var(--nx-primary)) !important;
}
.nx-sidebar-mode-expanded .nx-nav-item.active .nx-nav-label,
.nx-sidebar-mode-expanded .nx-nav-item[aria-expanded="true"] .nx-nav-label {
    color: var(--nx-primary-text, var(--nx-primary)) !important;
    font-weight: 400 !important;
}

/* Arrow indicator rotate */
.nx-sidebar-mode-expanded .nx-nav-item .nx-nav-arrow {
    color: var(--nx-muted);
    transition: transform var(--nx-transition-slow), color var(--nx-transition);
}
.nx-sidebar-mode-expanded .nx-nav-item[aria-expanded="true"] .nx-nav-arrow {
    transform: rotate(180deg);
    color: var(--nx-primary-text, var(--nx-primary));
}

/* Submenu layout */
.nx-sidebar-mode-expanded .nx-sidebar-submenu-list {
    border-left: 1.5px solid var(--nx-border);
}
.nx-sidebar-mode-expanded .nx-sidebar-submenu-item {
    color: var(--nx-sidebar-text);
    text-decoration: none;
}
.nx-sidebar-submenu-item .nx-sidebar-submenu-ico {
    font-size: var(--nx-nav-icon-size-sm);
    line-height: 1;
    flex-shrink: 0;
    margin-right: 10px;
    color: var(--nx-primary-text, var(--nx-primary));
    align-self: flex-start;
    margin-top: 1px;
}
.nx-sidebar-submenu-item.active .nx-sidebar-submenu-ico,
.nx-sidebar-submenu-item:hover .nx-sidebar-submenu-ico {
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-sidebar-mode-expanded .nx-sidebar-submenu-item:hover {
    background: rgba(var(--nx-primary-rgb), 0.08);
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-sidebar-mode-expanded .nx-sidebar-submenu-item.active {
    color: var(--nx-primary-text, var(--nx-primary)) !important;
    font-weight: 400 !important;
}

/* Profile Card Customizations */
.nx-sidebar-profile-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    border: none;
    background: var(--nx-card-bg);
    border-radius: var(--nx-radius-md);
    padding: 10px 12px;
}
.nx-sidebar-profile-card a {
    color: var(--nx-muted);
    transition: color var(--nx-transition);
}
.nx-sidebar-profile-card a:hover {
    color: var(--nx-danger-alt);
}
html.nx-dark body .nx-sidebar-profile-card {
    background: var(--nx-card-bg);
}
html.nx-dark body .nx-sidebar-profile-card span {
    color: var(--nx-text);
}
html.nx-dark body .nx-sidebar-profile-card span + span {
    color: var(--nx-muted);
}
html.nx-dark body .nx-sidebar-profile-card a {
    color: var(--nx-muted);
}
html.nx-dark body .nx-sidebar-profile-card a:hover {
    color: var(--nx-danger, #f04438);
}
html.nx-dark body .nx-logo-text-span {
    color: #ffffff;
}

/* Dark Mode Expanded Sidebar Elements */
html.nx-dark body.nx-sidebar-mode-expanded .nx-nav-label {
    color: var(--nx-text);
}
html.nx-dark body.nx-sidebar-mode-expanded .nx-nav-icon-wrapper {
    color: var(--nx-muted);
}
html.nx-dark body.nx-sidebar-mode-expanded .nx-nav-item:hover {
    background: rgba(255, 255, 255, 0.03);
}
html.nx-dark body.nx-sidebar-mode-expanded .nx-sidebar-submenu-list {
    border-left-color: var(--nx-border);
}
html.nx-dark body.nx-sidebar-mode-expanded .nx-sidebar-submenu-item {
    color: var(--nx-muted);
}
html.nx-dark body.nx-sidebar-mode-expanded .nx-sidebar-submenu-item:hover {
    background: rgba(var(--nx-primary-rgb), 0.12);
    color: var(--nx-primary-text, var(--nx-primary));
}
html.nx-dark body.nx-sidebar-mode-expanded .nx-sidebar-submenu-item.active {
    color: var(--nx-primary-text, var(--nx-primary));
}

body.nx-theme .nx-btn-cancel {
    border: 1px solid color-mix(in srgb, var(--nx-danger) 30%, var(--nx-border));
    background: color-mix(in srgb, var(--nx-danger) 6%, var(--nx-card-bg));
    color: var(--nx-danger);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
body.nx-theme .nx-btn-cancel:hover {
    background: color-mix(in srgb, var(--nx-danger) 12%, var(--nx-card-bg));
    border-color: color-mix(in srgb, var(--nx-danger) 50%, var(--nx-border));
    color: var(--nx-danger);
}

.nx-invoice-alert {
    border-radius: var(--nx-radius-card);
    border: 1px solid var(--nx-border);
    border-left: 4px solid var(--nx-danger);
    background: var(--nx-card-bg);
    padding: 18px 24px;
    gap: 16px;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.nx-invoice-alert-text {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
}
.nx-invoice-alert-meta {
    display: block;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
    margin-top: 3px;
}
.nx-invoice-alert-btn {
    border-radius: var(--nx-radius-md);
    background: var(--nx-danger);
    color: #fff !important;
    font-size: var(--nx-font-size-md);
    height: 38px;
    padding: 0 20px;
    border: none;
    box-shadow: none;
    transition: background-color var(--nx-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nx-invoice-alert-btn:hover {
    background: color-mix(in srgb, var(--nx-danger) 85%, #000);
    color: #fff !important;
}

/* Markdown Editor Dark Mode */
body.nx-theme .md-editor {
    background-color: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    overflow: hidden;
}
body.nx-theme .md-editor.active {
    border-color: var(--nx-border);
    box-shadow: none;
}
body.nx-theme .md-editor > textarea,
body.nx-theme .md-editor textarea {
    background-color: var(--nx-card-bg);
    color: var(--nx-text);
    border: 0 !important;
    outline: none;
    box-shadow: none !important;
    font-family: var(--nx-font-family);
    font-size: var(--nx-font-size);
    font-weight: 400;
    padding: 14px;
}
body.nx-theme .md-editor > textarea:focus,
body.nx-theme .md-editor textarea:focus {
    background-color: var(--nx-card-bg);
    color: var(--nx-text);
    border: 0 !important;
    outline: none;
    box-shadow: none !important;
}
body.nx-theme .md-editor > textarea::placeholder {
    color: var(--nx-muted);
}
body.nx-theme .md-editor > .md-header,
body.nx-theme .md-editor .md-header {
    background-color: var(--nx-bg);
    border-bottom: 1px solid var(--nx-border);
    padding: 8px 12px;
}
body.nx-theme .md-editor .md-footer {
    background-color: var(--nx-card-bg);
    border-top: 1px solid var(--nx-border);
    color: var(--nx-muted);
    padding: 6px 12px;
    font-size: var(--nx-font-size-sm);
}
body.nx-theme .md-editor .btn-default {
    background-color: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-text);
    font-weight: 400;
    font-size: 13px;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
body.nx-theme .md-editor .btn-default:hover {
    background-color: var(--nx-bg);
    border-color: var(--nx-primary);
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .md-editor .btn-default.active,
body.nx-theme .md-editor .btn-group .btn-default.active {
    background-color: var(--nx-primary);
    color: #fff;
    border-color: var(--nx-primary);
}
body.nx-theme .md-editor > .md-preview,
body.nx-theme .md-editor .md-preview {
    background-color: var(--nx-card-bg);
    color: var(--nx-text);
    border: none;
    padding: 14px;
}
/* Fullscreen mode pins itself to #fff !important in the vendor bundle. */
body.nx-theme .md-editor.md-fullscreen-mode {
    background: var(--nx-bg) !important;
}
body.nx-theme .md-editor.md-fullscreen-mode .md-input,
body.nx-theme .md-editor.md-fullscreen-mode .md-preview {
    background: var(--nx-card-bg) !important;
    color: var(--nx-text) !important;
}
body.nx-theme .md-editor .md-controls .md-control {
    color: var(--nx-muted);
}
body.nx-theme .md-editor .md-controls .md-control:hover {
    color: var(--nx-primary-text, var(--nx-primary));
}

html.nx-dark body .nx-plus-badge {
    border-color: var(--nx-card-bg);
}

/* ---------- Top Layout Navigation Row ---------- */
.nx-navbar-row {
    height: 62px;
    background: var(--nx-header-bg);
    border-bottom: 1px solid var(--nx-border);
    padding: 0 40px;
    display: flex;
    align-items: center;
    transition: background var(--nx-transition-slow), border-color var(--nx-transition-slow);
}

html.nx-dark body .nx-navbar-row {
    background: var(--nx-card-bg);
    border-bottom: 1px solid var(--nx-border);
}

.nx-navbar-nav-left {
    display: flex;
    align-items: center;
    gap: 28px;
}

.nx-navbar-link {
    font-size: 14.5px;
    font-weight: var(--nx-weight-nav);
    color: var(--nx-text);
    text-decoration: none;
    padding: 18px 0;
    position: relative;
    transition: color var(--nx-transition);
}

.nx-navbar-link:hover,
.nx-navbar-link.active {
    color: var(--nx-primary-text, var(--nx-primary)) !important;
}

/* Bottom line indicator on hover/active */
.nx-navbar-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--nx-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--nx-transition-slow);
}

.nx-navbar-link.active::after,
.nx-navbar-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Call to Action Button */
.nx-navbar-btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: var(--nx-radius-md);
    font-size: 13px;
    font-weight: 400;
    color: #ffffff;
    background: var(--nx-primary);
    box-shadow: 0 4px 12px rgba(var(--nx-primary-rgb), 0.25);
    text-decoration: none;
    transition: background-color var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
}

.nx-navbar-btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--nx-primary-rgb), 0.35);
    filter: brightness(1.05);
}

/* ---------- Promotional Banner Slider ---------- */
.nx-banner-slider {
    position: relative;
    border-radius: var(--nx-radius-card);
    overflow: hidden;
    box-shadow: var(--nx-shadow);
}
.nx-banner-track {
    position: relative;
}
.nx-banner-slide {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 40px;
    position: relative;
}
.nx-banner-slide.active {
    display: flex;
    animation: nxBannerFade 0.5s ease;
}
@keyframes nxBannerFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.nx-banner-content {
    position: relative;
    z-index: 2;
    max-width: 60%;
}
.nx-banner-badge {
    display: inline-block;
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: var(--nx-radius-badge);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin-bottom: 14px;
}
.nx-banner-title {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 10px;
    color: inherit;
}
.nx-banner-subtitle {
    font-size: var(--nx-font-size-lg);
    opacity: 0.85;
    margin: 0 0 20px;
    color: inherit;
}
.nx-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #0b1f3a;
    font-weight: 400;
    font-size: var(--nx-font-size);
    padding: 11px 22px;
    border-radius: var(--nx-radius-button);
    text-decoration: none;
    transition: transform var(--nx-transition), box-shadow var(--nx-transition);
}
.nx-banner-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.nx-banner-media {
    flex-shrink: 0;
    max-width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.nx-banner-media img {
    max-height: 85%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.nx-banner-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 16px);
    z-index: 1;
    pointer-events: none;
}

.nx-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}
.nx-banner-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        var(--nx-b-start, #0b1f3a) 0%,
        var(--nx-b-start, #0b1f3a) 20%,
        color-mix(in srgb, var(--nx-b-end, #0b1f3a) 84%, transparent) 44%,
        color-mix(in srgb, var(--nx-b-end, #0b1f3a) 42%, transparent) 68%,
        color-mix(in srgb, var(--nx-b-end, #0b1f3a) 10%, transparent) 100%);
}
@supports not (background: linear-gradient(color-mix(in srgb, red 50%, transparent), red)) {
    .nx-banner-bg::after {
        background: linear-gradient(100deg,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.62) 44%,
            rgba(0, 0, 0, 0.26) 68%,
            rgba(0, 0, 0, 0.04) 100%);
    }
}
.nx-banner-slide.nx-banner-has-bg { min-height: 190px; }
.nx-banner-has-bg .nx-banner-content { max-width: 58%; }
.nx-banner-dots {
    position: absolute;
    bottom: 14px;
    left: 40px;
    display: flex;
    gap: 8px;
    z-index: 3;
}
.nx-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--nx-radius-badge);
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: width var(--nx-transition-slow), background var(--nx-transition-slow);
}
.nx-banner-dot.active {
    width: 22px;
    background: #fff;
}
.nx-banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--nx-transition);
}
.nx-banner-arrow:hover { background: rgba(255, 255, 255, 0.3); }
.nx-banner-prev { left: 12px; }
.nx-banner-next { right: 12px; }

/* Dismiss button */
.nx-banner-close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--nx-transition), transform var(--nx-transition);
}
.nx-banner-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

@media (max-width: 767px) {
    .nx-banner-slide { padding: 24px; flex-direction: column; text-align: center; min-height: 0; }
    .nx-banner-content { max-width: 100%; }
    .nx-banner-title { font-size: var(--nx-font-size-h2); }
    .nx-banner-media { max-width: 70%; margin-top: 16px; }
    .nx-banner-dots { left: 50%; transform: translateX(-50%); }
    .nx-banner-arrow { display: none; }

    .nx-banner-has-bg .nx-banner-content { max-width: 100%; }
    .nx-banner-slide.nx-banner-has-bg { min-height: 0; }
    .nx-banner-bg::after {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--nx-b-start, #0b1f3a) 90%, transparent) 0%,
            color-mix(in srgb, var(--nx-b-end, #0b1f3a) 80%, transparent) 100%);
    }
    @supports not (background: linear-gradient(color-mix(in srgb, red 50%, transparent), red)) {
        .nx-banner-bg::after {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.6) 100%);
        }
    }
}

/* Breadcrumb separator override */
.breadcrumb-item + .breadcrumb-item::before {
    content: none !important;
    display: none !important;
}

/* Sticky Sidebar Support */
body.nx-sidebar-sticky .nx-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}
body.nx-sidebar-sticky.nx-sidebar-mode-compact .nx-sidebar,
body.nx-sidebar-sticky.nx-sidebar-mode-icons .nx-sidebar {
    overflow: visible;
}
body.nx-sidebar-sticky .nx-sidebar::-webkit-scrollbar {
    width: 4px;
}
body.nx-sidebar-sticky .nx-sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}
html.nx-dark body.nx-sidebar-sticky .nx-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
}

/* Dark Mode General Border Color Overrides */
html.nx-dark body .border,
html.nx-dark body .border-top,
html.nx-dark body .border-bottom,
html.nx-dark body .border-left,
html.nx-dark body .border-right,
html.nx-dark body hr {
    border-color: var(--nx-border) !important;
}

html.nx-dark body footer.footer {
    border-top: 1px solid var(--nx-border);
}

html.nx-dark body .nx-sidebar-footer-wrapper {
    border-top: 1px solid var(--nx-border);
}

/* WHMCS Order Form Custom Styling - Nexum Theme */
#order-standard_cart, #order-nexum {
    padding: 0;
}

#order-standard_cart > .row, #order-nexum > .row {
    margin: 0;
}

@media (min-width: 992px) {
    #order-standard_cart > .row, #order-nexum > .row {
        display: flex;
        flex-direction: row;
        width: 100%;
        margin: 0;
        gap: 24px;
    }
    #order-standard_cart .cart-sidebar, #order-nexum .cart-sidebar {
        width: 250px !important;
        flex: 0 0 250px !important;
        padding: 0 !important;
    }
    #order-standard_cart .cart-body, #order-nexum .cart-body {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    #order-standard_cart .cart-body > .row:not(.nx-content-row),
    #order-nexum .cart-body > .row:not(.nx-content-row) {
        display: flex !important;
        flex-direction: row !important;
        gap: 24px !important;
        margin: 0 !important;
        width: 100% !important;
    }
    #order-standard_cart .secondary-cart-body, #order-nexum .secondary-cart-body {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    #order-standard_cart .secondary-cart-sidebar, #order-nexum .secondary-cart-sidebar {
        width: 300px !important;
        flex: 0 0 300px !important;
        padding: 0 !important;
    }
}

@media (max-width: 991px) {
    #order-standard_cart > .row, #order-nexum > .row {
        flex-direction: column !important;
    }
    #order-standard_cart .cart-sidebar, #order-nexum .cart-sidebar {
        width: 100% !important;
        flex: none !important;
    }
    #order-standard_cart .cart-body > .row:not(.nx-content-row),
    #order-nexum .cart-body > .row:not(.nx-content-row) {
        flex-direction: column !important;
    }
    #order-standard_cart .secondary-cart-sidebar, #order-nexum .secondary-cart-sidebar {
        width: 100% !important;
        flex: none !important;
        margin-top: 24px;
    }
}

#order-standard_cart .sidebar-categories-collapsed, #order-nexum .sidebar-categories-collapsed,
#order-standard_cart .hidden-sm.hidden-xs, #order-nexum .hidden-sm.hidden-xs {
    display: none;
}

#order-standard_cart .form-control {
    background: var(--nx-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-text);
    box-shadow: none;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
#order-standard_cart .form-control:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.1);
}

/* Style list bullet specifications inside product-info cards */
#order-standard_cart .product-info ul, #order-nexum .product-info ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 16px 0 0 !important;
    list-style: none !important;
}
#order-standard_cart .product-info li, #order-nexum .product-info li {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: var(--nx-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--nx-bg) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius-md) !important;
    padding: 8px 12px !important;
}
#order-standard_cart .product-info li::before, #order-nexum .product-info li::before {
    font-family: 'Material Symbols Rounded';
    content: "done" !important;
    font-size: var(--nx-font-size-xl) !important;
    color: var(--nx-primary-text, var(--nx-primary)) !important;
}

/* Payment gateway active highlights */
#order-standard_cart .gateway-card.active, #order-nexum .gateway-card.active {
    border: 2px solid var(--nx-primary) !important;
    box-shadow: 0 4px 12px rgba(var(--nx-primary-rgb), 0.05) !important;
}

/* Sidebar Collapsed Mobile Selectors */
#order-standard_cart .sidebar-collapsed, #order-nexum .sidebar-collapsed {
    display: none !important;
}

@media (max-width: 991px) {
    #order-standard_cart .sidebar-collapsed, #order-nexum .sidebar-collapsed {
        display: block !important;
        margin-bottom: 24px !important;
    }
}

#order-standard_cart #orderSummary,
#order-nexum #orderSummary,
#order-standard_cart .secondary-cart-body,
#order-nexum .secondary-cart-body {
    margin-top: 0 !important;
}

#orderSummary {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow);
    overflow: hidden;
    margin-bottom: 24px;
}
#orderSummary h2 {
    background: var(--nx-primary);
    color: #fff;
}
#orderSummary .summary-container {
    background: var(--nx-card-bg);
    color: var(--nx-text);
    padding: 20px;
}
#orderSummary .summary-container span,
#orderSummary .summary-container div {
    color: var(--nx-text);
}
#orderSummary .total-due-today {
    background: var(--nx-bg);
    border-top: 1px solid var(--nx-border);
    padding: 15px 20px;
    text-align: center;
}
#orderSummary .total-due-today span {
    color: var(--nx-text);
}
#orderSummary .total-due-today .amt {
    font-size: 24px;
    font-weight: 400;
    color: var(--nx-primary-text, var(--nx-primary));
    display: block;
}
/* Inner wrapper + the "View Cart" button area both inherit the card surface */
#orderSummary .order-summary,
#orderSummary > .text-center {
    background: var(--nx-card-bg);
    color: var(--nx-text);
}
#orderSummary > .text-center {
    padding: 16px 20px;
    border-top: 1px solid var(--nx-border);
}

/* Footer Payment Method Icons */
.nx-payment-icon-pill {
    background: #ffffff;
    border: 1px solid #e4e7eb;
    padding: 4px 8px;
    border-radius: var(--nx-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 36px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: background-color var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
}
.nx-payment-icon-pill img {
    max-height: 24px;
    max-width: 44px;
    width: auto;
    height: auto;
    display: block;
}
.nx-payment-icon-pill svg {
    max-height: 24px;
    max-width: 44px;
    width: auto;
    height: auto;
    display: block;
}
.nx-payment-icon-pill span {
    font-size: 9.5px;
    font-weight: 400;
    color: #475569;
    text-transform: uppercase;
}
/* Dark Mode Payment Icons */
html.nx-dark body .nx-payment-icon-pill {
    background: var(--nx-card-bg);
    border-color: var(--nx-border);
}
html.nx-dark body .nx-payment-icon-pill img,
html.nx-dark body .nx-payment-icon-pill svg {
    opacity: 0.85;
}
html.nx-dark body .nx-payment-icon-pill span {
    color: var(--nx-muted);
}

#orderSummary .order-summary-footer {
    background: var(--nx-card-bg) !important;
}

/* Product Grid Redesign */
.nx-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.nx-product-card {
    background: #ffffff;
    border: 1px solid #eaeff4;
    border-radius: 24px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    /* No transition left to run: the hover state this animated is gone. */
}

/* Featured card highlights */
.nx-product-card.featured {
    border-color: var(--nx-primary);
    box-shadow: 0 12px 30px rgba(var(--nx-primary-rgb), 0.08);
}

/* Diagonal Ribbon */
.nx-popular-ribbon {
    position: absolute;
    top: 15px;
    right: -35px;
    background: var(--nx-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 40px;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 2;
}

/* Card Header */
.nx-card-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-primary-rgb), 0.06);
    color: var(--nx-primary-text, var(--nx-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.nx-card-icon-wrapper span {
    font-size: 24px;
    font-variation-settings: 'FILL' 1;
}

.nx-product-title {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}
.nx-product-description {
    font-size: var(--nx-font-size-md);
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Badges list */
.nx-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.nx-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(var(--nx-primary-rgb), 0.06);
    color: var(--nx-primary-text, var(--nx-primary));
    padding: 6px 12px;
    border-radius: var(--nx-radius-card);
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
}

/* Specs List */
.nx-card-specs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
    flex-grow: 1;
}
.nx-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    line-height: 1.4;
}
.nx-spec-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-weight: 400;
}
.nx-spec-left span.chk {
    font-family: 'Material Symbols Rounded';
    font-size: var(--nx-font-size-xl);
    color: var(--nx-primary-text, var(--nx-primary));
    background: rgba(var(--nx-primary-rgb), 0.06);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
}
.nx-spec-right {
    color: #1e293b;
    font-weight: 400;
}

/* Pricing & Button */
.nx-card-footer {
    border-top: 1px solid #eaeff4;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.nx-price-lbl {
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.nx-price-amt {
    font-size: 28px;
    font-weight: 400;
    color: #0f172a;
    line-height: 1.1;
}
.nx-price-cycle {
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: #64748b;
    margin-top: 4px;
}

/* Buttons */
.nx-btn-order {
    width: 100%;
    padding: 14px;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
    text-decoration: none;
}
.nx-btn-order.filled {
    background: var(--nx-primary);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 12px rgba(var(--nx-primary-rgb), 0.15);
}
.nx-btn-order.filled:hover {
    background: var(--nx-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--nx-primary-rgb), 0.25);
}
.nx-btn-order.outline {
    background: transparent;
    color: var(--nx-primary-text, var(--nx-primary)) !important;
    border: 1.5px solid rgba(var(--nx-primary-rgb), 0.15);
}
.nx-btn-order.outline:hover {
    background: rgba(var(--nx-primary-rgb), 0.04);
    border-color: var(--nx-primary);
    transform: translateY(-1px);
}

/* Dark Mode Overrides */
html.nx-dark body .nx-product-card {
    background: var(--nx-card-bg);
    border-color: var(--nx-border);
}
/* Dark-mode hover border removed with the light one above. */
html.nx-dark body .nx-product-card.featured {
    border-color: var(--nx-primary);
}
html.nx-dark body .nx-product-title {
    color: var(--nx-text);
}
html.nx-dark body .nx-product-description {
    color: var(--nx-muted);
}
html.nx-dark body .nx-spec-left {
    color: var(--nx-muted);
}
html.nx-dark body .nx-spec-right {
    color: var(--nx-text);
}
html.nx-dark body .nx-card-footer {
    border-top-color: var(--nx-border);
}
html.nx-dark body .nx-price-amt {
    color: var(--nx-text);
}
html.nx-dark body .nx-price-cycle {
    color: var(--nx-muted);
}
html.nx-dark body .nx-btn-order.outline {
    color: var(--nx-primary-text, var(--nx-primary));
    border-color: rgba(var(--nx-primary-rgb), 0.3);
}
html.nx-dark body .nx-btn-order.outline:hover {
    background: rgba(var(--nx-primary-rgb), 0.1);
    border-color: var(--nx-primary);
}

/* Centered Specs Layout */
.nx-centered-specs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 28px;
}

.nx-centered-spec-row {
    font-size: var(--nx-font-size-lg);
    line-height: 1.4;
}

.nx-centered-spec-val {
    font-weight: 400;
    color: #1e293b;
    margin-right: 4px;
}

.nx-centered-spec-key {
    font-weight: 400;
    color: #64748b;
}

html.nx-dark body .nx-centered-spec-val {
    color: var(--nx-text);
}

html.nx-dark body .nx-centered-spec-key {
    color: var(--nx-muted);
}

/* Left Aligned Specs Layout */
.nx-left-specs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 28px;
    width: 100%;
}

.nx-left-spec-row {
    font-size: var(--nx-font-size-lg);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.nx-left-spec-val {
    font-weight: 400;
    color: #1e293b;
}

.nx-left-spec-key {
    font-weight: 400;
    color: #64748b;
}

html.nx-dark body .nx-left-spec-val {
    color: var(--nx-text);
}

html.nx-dark body .nx-left-spec-key {
    color: var(--nx-muted);
}

/* Custom Select Dropdown Styling */
.nx-custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
.nx-custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    padding: 0 16px;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-input, 10px);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow), transform var(--nx-transition-slow);
}
.nx-custom-select-trigger:hover, .nx-custom-select-wrapper.open .nx-custom-select-trigger {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.1);
}
.nx-custom-select-trigger:focus { outline: none; }
.nx-custom-select-trigger:focus-visible {
    outline: none;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.25);
}
.nx-card:has(.nx-custom-select-wrapper.open),
.nx-card:has(.nx-custom-select-wrapper.open) .nx-card-body {
    overflow: visible;
}
body.nx-theme .card:has(.nx-custom-select-wrapper.open),
body.nx-theme .panel:has(.nx-custom-select-wrapper.open) {
    overflow: visible;
    position: relative;
    z-index: 5;
}
body.nx-theme .card:has(.nx-custom-select-wrapper.open) .card-body,
body.nx-theme .panel:has(.nx-custom-select-wrapper.open) .panel-body {
    overflow: visible;
}
.nx-custom-select-wrapper.open {
    z-index: 20;
}
.nx-custom-select-trigger i {
    font-size: var(--nx-font-size-xs);
    color: var(--nx-muted);
    transition: transform var(--nx-transition-slow);
}
.nx-custom-select-wrapper.open .nx-custom-select-trigger i {
    transform: rotate(180deg);
}
.nx-custom-select-options {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0;
    right: 0;
    display: none;
    list-style: none;
    padding: 6px;
    margin: 0 !important;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
}
.form-group:has(.nx-custom-select-wrapper) {
    overflow: visible !important;
}
.nx-custom-select-option {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 400;
    color: var(--nx-text);
    border-radius: var(--nx-radius-sm);
    cursor: pointer;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
    margin: 0;
    list-style: none;
}
.nx-custom-select-option:hover {
    background: rgba(var(--nx-primary-rgb), 0.05);
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-custom-select-option.selected {
    background: rgba(var(--nx-primary-rgb), .10);
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}
.nx-custom-select-option.selected:hover {
    background: rgba(var(--nx-primary-rgb), .16);
}

/* Global Styling Alignments for Fallback Templates */
body.nx-theme .card,
body.nx-theme .panel {
    background-color: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 16px);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

body.nx-theme .card-header,
body.nx-theme .panel-heading {
    background-color: transparent;
    border-bottom: 1px solid var(--nx-border);
    color: var(--nx-text);
    font-weight: 600;
}

body.nx-theme .card-footer,
body.nx-theme .panel-footer {
    background-color: transparent;
    border-top: 1px solid var(--nx-border);
}

body.nx-theme .table {
    color: var(--nx-text);
}

body.nx-theme .table th {
    border-bottom: 2px solid var(--nx-border);
    color: var(--nx-muted);
    font-weight: 400;
    text-transform: uppercase;
    font-size: var(--nx-font-size-xs);
    letter-spacing: 0.5px;
}

body.nx-theme .table td {
    border-top: 1px solid var(--nx-border);
    color: var(--nx-text);
    font-size: var(--nx-font-size-md);
}

body.nx-theme .list-group-item {
    background-color: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-text);
}

body.nx-theme .breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 20px;
}

body.nx-theme .breadcrumb-item a {
    color: var(--nx-muted);
    text-decoration: none;
}

body.nx-theme .breadcrumb-item.active {
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}

body.nx-theme .alert {
    border-radius: var(--nx-radius-button, 10px);
}

/* ---------- Page head + breadcrumb ---------- */
.nx-page-head { margin-bottom: var(--nx-card-gap); }
.nx-page-head .nx-page-title {
    font-size: var(--nx-font-size-h1);
    font-weight: var(--nx-weight-page-title);
    color: var(--nx-text);
    letter-spacing: -0.5px;
    margin: 0;
    line-height: 1.2;
}
.nx-page-sub { margin: 4px 0 0; font-size: var(--nx-font-size-md); color: var(--nx-muted); }

/* ---------- Card ---------- */
.nx-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 18px);
    box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04));
    overflow: hidden;
}
.nx-card + .nx-card { margin-top: 22px; }
.nx-card-pad { padding: var(--nx-card-padding, 22px); }
.nx-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--nx-border);
}
.nx-card-head h1, .nx-card-head h2, .nx-card-head h3,
.nx-card-head h4, .nx-card-head h5, .nx-card-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: var(--nx-weight-card-title);
    color: var(--nx-text);
}
.nx-card-body { padding: 22px; }

.nx-card-head-lg { align-items: flex-start; gap: 14px; }
.nx-card-head-lg:has(.nx-card-head-badge) { justify-content: flex-start; }
.nx-card-head-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--nx-radius-md);
    background: color-mix(in srgb, var(--nx-primary) 12%, transparent);
    color: var(--nx-primary-text, var(--nx-primary));
    font-size: 22px;
}
.nx-card-head-badge-info {
    background: color-mix(in srgb, var(--nx-primary) 12%, transparent);
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-card-head-copy { min-width: 0; }
.nx-card-head-copy .nx-card-title { margin: 0; }
.nx-card-head-desc {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--nx-muted);
    font-weight: 400;
}
.nx-card-head .nx-user-avatar { width: 44px; height: 44px; font-size: 16px; flex-shrink: 0; }

/* ---------- Stat tiles ---------- */
.nx-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.nx-stat-tile {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 18px);
    box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04));
    padding: 22px;
}
.nx-stat-tile .nx-stat-tile-label { font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-muted); }
.nx-stat-tile .nx-stat-tile-value {
    font-size: 32px; font-weight: 400; color: var(--nx-text);
    letter-spacing: -1px; margin-top: 8px; line-height: 1.1;
}
.nx-stat-tile .nx-stat-tile-hint { font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 400; margin-top: 4px; }
.nx-stat-tile.nx-stat-accent {
    background: linear-gradient(135deg, var(--nx-primary) 0%, var(--nx-primary-hover) 100%);
    border: none; color: #fff;
}
.nx-stat-tile.nx-stat-accent .nx-stat-tile-label,
.nx-stat-tile.nx-stat-accent .nx-stat-tile-value,
.nx-stat-tile.nx-stat-accent .nx-stat-tile-hint { color: #fff; opacity: .96; }

/* ---------- Tables ---------- */
.nx-table { width: 100%; margin: 0; border-collapse: collapse; }
.nx-table thead th {
    font-size: 11.5px; font-weight: 400; text-transform: uppercase;
    letter-spacing: .4px; color: var(--nx-muted);
    padding: 14px 18px; border: none; border-bottom: 1px solid var(--nx-border);
    background: rgba(0,0,0,0.015); text-align: left;
}
.nx-table tbody td {
    padding: 14px 18px; border: none;
    border-bottom: 1px solid var(--nx-border);
    font-size: var(--nx-font-size); color: var(--nx-text); vertical-align: middle;
}
.nx-table tbody tr:last-child td { border-bottom: none; }
.nx-table tbody tr { transition: background var(--nx-transition-fast); }
.nx-table tbody tr:hover { background: rgba(var(--nx-primary-rgb), 0.03); }
.nx-table .nx-td-strong { font-weight: 400; }
.nx-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.nx-aum-actions-col { width: 260px; }
.nx-aum-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nx-aum-email-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 2px; }
.nx-aum-email-row .nx-aum-success { color: var(--nx-success); }
@media (max-width: 575px) {
    .nx-aum-actions-col { width: auto; }
    .nx-aum-actions { flex-direction: column; align-items: stretch; }
}

body.nx-theme .min-w-0 { min-width: 0; }
body.nx-theme .gap-2 { gap: var(--nx-space-2); }
body.nx-theme .gap-3 { gap: var(--nx-space-3); }

body.nx-theme .nx-content-container > .table-responsive,
body.nx-theme .nx-prods-table-card > .table-responsive,
body.nx-theme .nx-card > .table-responsive {
    max-width: 100%;
}

/* ---------- Badges / status pills ---------- */
.nx-badge {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 4px 11px; border-radius: var(--nx-radius-badge, 999px);
    font-size: var(--nx-font-size-sm); font-weight: 400; line-height: 1.4; white-space: nowrap;
    background: rgba(var(--nx-secondary-rgb), .1); color: var(--nx-secondary);
}
.nx-badge-active,   .nx-badge-paid,      .nx-badge-completed { background: var(--nx-pill-active-bg);    color: var(--nx-pill-active-text); }
.nx-badge-pending,  .nx-badge-draft {                          background: var(--nx-pill-pending-bg);   color: var(--nx-pill-pending-text); }
.nx-badge-suspended, .nx-badge-overdue {                       background: var(--nx-pill-suspended-bg); color: var(--nx-pill-suspended-text); }
.nx-badge-cancelled, .nx-badge-unpaid, .nx-badge-terminated,
.nx-badge-fraud,     .nx-badge-refunded {                      background: var(--nx-pill-cancelled-bg); color: var(--nx-pill-cancelled-text); }
.nx-badge-open {                                               background: var(--nx-pill-open-bg);      color: var(--nx-pill-open-text); }
.nx-badge-answered, .nx-badge-customer-reply {                 background: var(--nx-pill-answered-bg);  color: var(--nx-pill-answered-text); }
.nx-badge-closed {                                             background: var(--nx-pill-closed-bg);    color: var(--nx-pill-closed-text); }

/* ---------- Buttons ---------- */
.nx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 400; font-size: var(--nx-font-size-md); line-height: 1;
    padding: 11px 18px; border-radius: var(--nx-radius-button, 11px);
    color: var(--nx-text);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); text-transform: var(--nx-btn-transform, none);
}
.nx-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .25); }
.nx-btn-primary { background: var(--nx-primary); color: #fff; }
.nx-btn-primary:hover { background: var(--nx-primary-hover); }
.nx-btn-outline { background: var(--nx-card-bg); color: var(--nx-text); border-color: var(--nx-border); }
.nx-btn-outline:hover { border-color: var(--nx-primary); color: var(--nx-primary-text, var(--nx-primary)); }
.nx-btn-danger { background: var(--nx-danger); color: #fff; }
.nx-btn-success { background: var(--nx-success); color: #fff; }
.nx-btn-ghost { background: transparent; color: var(--nx-primary-text, var(--nx-primary)); border-color: var(--nx-primary); }
.nx-btn-ghost:hover { background: rgba(var(--nx-primary-rgb), 0.08); }
.nx-btn-sm { padding: 7px 13px; font-size: 12.5px; }
.nx-btn-lg { padding: 14px 24px; font-size: var(--nx-font-size-lg); }
.nx-btn-block { width: 100%; }

/* ---------- Forms ---------- */
.nx-form-group { margin-bottom: 18px; }
.nx-form-label { display: block; font-size: 13px; font-weight: 400; color: var(--nx-text); margin-bottom: 7px; }
.nx-form-control,
body.nx-theme .form-control {
    width: 100%; height: auto; padding: 11px 14px;
    background: var(--nx-card-bg); color: var(--nx-text);
    border: 1px solid var(--nx-border); border-radius: var(--nx-radius-input, 11px);
    font-size: var(--nx-font-size); line-height: 1.4; transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
    box-sizing: border-box;
}
textarea.nx-form-control, body.nx-theme textarea.form-control { height: auto; padding: 12px 14px; min-height: 110px; }
#inputCaptchaImage { max-width: 100%; min-width: 0; height: auto; }
.input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.input-group > .form-control,
.input-group > .nx-form-control,
body.nx-theme .input-group > .form-control,
body.nx-theme .input-group > .nx-form-control {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}
.input-group > .input-group-append,
.input-group > .input-group-prepend {
    display: flex;
}
.nx-form-control:focus,
body.nx-theme .form-control:focus {
    outline: none; border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .15);
}
body.nx-theme .nx-form-control:focus-visible,
body.nx-theme .form-control:focus-visible {
    outline: none !important;
}
.nx-form-hint { font-size: var(--nx-font-size-sm); color: var(--nx-muted); margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
    body.nx-theme *,
    body.nx-theme *::before,
    body.nx-theme *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
    body.nx-theme.nx-hover-lift .card:hover,
    body.nx-theme.nx-hover-lift .tile:hover {
        transform: none;
    }
}

body.nx-theme button:focus,
body.nx-theme [role="button"]:focus,
body.nx-theme .btn:focus,
body.nx-theme a:focus,
body.nx-theme summary:focus,
body.nx-theme select:focus,
body.nx-theme input:focus,
body.nx-theme textarea:focus {
    outline: none;
}
body.nx-theme button:focus-visible,
body.nx-theme [role="button"]:focus-visible,
body.nx-theme .btn:focus-visible,
body.nx-theme a:focus-visible,
body.nx-theme summary:focus-visible,
body.nx-theme select:focus-visible,
body.nx-theme input:focus-visible,
body.nx-theme textarea:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: 2px;
}

body.nx-theme .nx-mp-select:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: 1px;
}

body.nx-theme .nx-doms-search-input:focus,
body.nx-theme .nx-doms-search-input:focus-visible,
body.nx-theme .nx-hp-domain-input:focus,
body.nx-theme .nx-hp-domain-input:focus-visible,
body.nx-theme .nx-pmm-iginput:focus,
body.nx-theme .nx-pmm-iginput:focus-visible,
body.nx-theme .nx-kb-search-input:focus,
body.nx-theme .nx-kb-search-input:focus-visible,
body.nx-theme .nx-list-search input:focus,
body.nx-theme .nx-list-search input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}
body.nx-theme .nx-doms-search-box:focus-within,
body.nx-theme .nx-hp-domain-inputwrap:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.25);
}
body.nx-theme .nx-kb-search:focus-within {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
body.nx-theme .nx-pmm-igroup:focus-within {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), 0.15);
}

.material-symbols-rounded {
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
    user-select: none;
}
.nx-theme .fas,
.nx-theme .far,
.nx-theme .fab {
    line-height: 1;
    vertical-align: middle;
}

body.nx-theme input[type="checkbox"],
body.nx-theme input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    background: var(--nx-card-bg);
    border: 1.5px solid var(--nx-border);
    box-shadow: none;
    cursor: pointer;
    transition: background-color var(--nx-transition), border-color var(--nx-transition);
    display: inline-grid;
    place-content: center;
    vertical-align: middle;
}
body.nx-theme input[type="radio"] { border-radius: 50%; }
body.nx-theme input[type="checkbox"] { border-radius: 5px; }

body.nx-theme input[type="radio"]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    transform: scale(0);
    transition: transform var(--nx-transition);
    background: #fff;
}
body.nx-theme input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: transform var(--nx-transition);
    background: #fff;
    clip-path: polygon(14% 44%, 0 65%, 39% 100%, 100% 16%, 80% 0%, 39% 62%);
}
body.nx-theme input[type="checkbox"]:checked,
body.nx-theme input[type="radio"]:checked {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
}
body.nx-theme input[type="checkbox"]:checked::before,
body.nx-theme input[type="radio"]:checked::before {
    transform: scale(1);
}
body.nx-theme input[type="checkbox"]:hover:not(:checked),
body.nx-theme input[type="radio"]:hover:not(:checked) {
    border-color: rgba(var(--nx-primary-rgb), .5);
}
body.nx-theme input[type="checkbox"]:focus-visible,
body.nx-theme input[type="radio"]:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: 2px;
}
body.nx-theme input[type="checkbox"]:disabled,
body.nx-theme input[type="radio"]:disabled {
    opacity: .5;
    cursor: default;
}
body.nx-theme .form-check-input {
    position: static;
    margin-left: 0;
}
/* Inside a real .form-check wrapper Bootstrap's hanging indent is intentional. */
body.nx-theme .form-check > .form-check-input {
    position: absolute;
    margin-left: -1.25rem;
}

/* ---------- Toggle switch ---------- */
.nx-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
    vertical-align: middle;
}
.nx-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.nx-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--nx-border);
    border-radius: var(--nx-radius-badge);
    transition: background-color var(--nx-transition-slow);
}
.nx-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--nx-card-bg);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform var(--nx-transition-slow);
}
.nx-switch input:checked + .nx-slider { background: var(--nx-primary); }
.nx-switch input:checked + .nx-slider::before { transform: translateX(20px); }
.nx-switch input:focus-visible + .nx-slider {
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .25);
}

/* ---------- Alerts / confirmation panels ---------- */
.nx-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 18px; border-radius: var(--nx-radius-card, 14px);
    border: 1px solid var(--nx-border); background: var(--nx-card-bg);
    color: var(--nx-text); font-size: var(--nx-font-size); margin-bottom: 18px;
}
.nx-alert .nx-alert-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.nx-alert-success, .nx-alert-info, .nx-alert-warning, .nx-alert-danger {
    background: var(--nx-card-bg);
    color: var(--nx-text);
    border: 1px solid var(--nx-border);
    border-left-width: 4px;
    box-shadow: var(--nx-shadow-sm);
}
.nx-alert-success { border-left-color: var(--nx-pill-active-text); }
.nx-alert-info    { border-left-color: var(--nx-pill-open-text); }
.nx-alert-warning { border-left-color: var(--nx-pill-pending-text); }
.nx-alert-danger  { border-left-color: var(--nx-danger); }
.nx-alert-success .nx-alert-icon { color: var(--nx-pill-active-text); }
.nx-alert-info    .nx-alert-icon { color: var(--nx-pill-open-text); }
.nx-alert-warning .nx-alert-icon { color: var(--nx-pill-pending-text); }
.nx-alert-danger  .nx-alert-icon { color: var(--nx-danger); }

.nx-alert-danger:has(.nx-alert-body ul),
.nx-alert.nx-alert-danger {
    padding: var(--nx-space-5) var(--nx-space-6);
    border-left: 4px solid var(--nx-danger);
    box-shadow: var(--nx-shadow-sm);
    border-radius: var(--nx-radius-card);
    color: var(--nx-text);
}
.nx-alert-danger .nx-alert-body > strong {
    display: block;
    margin: 0 0 var(--nx-space-2);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-danger);
}
.nx-alert-danger .nx-alert-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.nx-alert-danger .nx-alert-body ul li {
    position: relative;
    padding-left: 14px;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
}
.nx-alert-danger .nx-alert-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nx-danger);
}

/* ---------- Security page ---------- */
.nx-page-lead { color: var(--nx-muted); margin-bottom: 18px; }

/* ---------- Empty state ---------- */
.nx-empty-state {
    text-align: center; padding: 48px 24px; color: var(--nx-muted);
    font-size: var(--nx-font-size); font-weight: 400;
}
.nx-empty-state .nx-empty-icon {
    font-size: 44px; color: var(--nx-border); margin-bottom: 10px; display: block;
}

/* ---------- Layout helpers ---------- */
.nx-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.nx-section-label {
    font-size: var(--nx-font-size-sm); font-weight: 400; letter-spacing: .7px;
    text-transform: uppercase; color: var(--nx-muted); margin-bottom: 14px;
}

body.nx-theme .panel,
body.nx-theme .card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 16px);
    box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04));
    color: var(--nx-text);
}
body.nx-theme .panel-heading,
body.nx-theme .card-header {
    background: transparent;
    border-bottom: 1px solid var(--nx-border);
    color: var(--nx-text); font-weight: 400;
}
body.nx-theme .table { color: var(--nx-text); }
body.nx-theme .table thead th { border-bottom: 1px solid var(--nx-border); color: var(--nx-muted); text-transform: uppercase; font-size: 11.5px; letter-spacing: .4px; }
body.nx-theme .table td, body.nx-theme .table th { border-color: var(--nx-border); }
body.nx-theme .label, body.nx-theme .badge {
    border-radius: var(--nx-radius-badge, 999px); font-weight: 400; padding: 4px 10px;
}
/* body.nx-theme a { color: var(--nx-primary-text, var(--nx-primary)); } */
body.nx-theme hr { border-color: var(--nx-border); }

/* ---------- Custom-select label + disabled option (hardened transformer) ---------- */
.nx-custom-select-trigger .nx-cs-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 8px;
}
.nx-custom-select-option.disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Full-page loading overlay (showOverlay()/hideOverlay() in scripts.js) ---------- */
.nx-fullpage-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(15, 18, 25, 0.6);
    display: flex; align-items: center; justify-content: center;
}
.nx-fullpage-overlay-inner {
    background: var(--nx-card-bg); color: var(--nx-text);
    border-radius: var(--nx-radius-card, 16px); box-shadow: var(--nx-shadow-elevated, 0 24px 60px rgba(0,0,0,.25));
    padding: 28px 36px; text-align: center; font-size: 14px; font-weight: 400;
}
.nx-fullpage-overlay-inner .material-symbols-rounded { font-size: 28px; color: var(--nx-primary-text, var(--nx-primary)); display: block; margin: 0 auto 10px; }

#fullpage-overlay.w-hidden { display: none !important; }

/* ---------- Modal theming (includes/modal.tpl, confirmation.tpl) ---------- */
body.nx-theme .modal-content,
.nx-modal .modal-content,
#modalAjax .modal-content {
    background: var(--nx-card-bg);
    color: var(--nx-text);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 16px);
    box-shadow: 0 24px 60px rgba(16, 24, 40, .22);
    overflow: hidden;
}
body.nx-theme .modal-footer,
#modalAjax .modal-footer {
    border-color: var(--nx-border);
    background: var(--nx-card-bg);
}
body.nx-theme .modal .modal-header,
body.nx-theme .modal .modal-header.bg-primary,
body.nx-theme .modal .modal-header.card-header,
#modalAjax .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 16px 20px;
    background: var(--nx-primary);
    color: #fff;
    border-bottom: none;
}
body.nx-theme .modal .modal-header .modal-title,
body.nx-theme .modal .modal-header h4,
body.nx-theme .modal .modal-header h5,
#modalAjax .modal-header .modal-title {
    margin: 0;
    font-size: var(--nx-font-size-lg);
    font-weight: 600;
    color: #fff;
}
body.nx-theme .modal .modal-header .close,
#modalAjax .modal-header .close {
    position: static;
    float: none;
    margin: 0;
    padding: 0;
    color: #fff;
    opacity: .85;
    text-shadow: none;
}
body.nx-theme .modal .modal-header .close:hover,
#modalAjax .modal-header .close:hover {
    color: #fff;
    opacity: 1;
}
#modalAjax .modal-body {
    background: var(--nx-card-bg);
    color: var(--nx-text);
}
#modalAjax .modal-body label,
#modalAjax .modal-body p {
    color: var(--nx-text);
}
#modalAjax .modal-body .list-group-item,
#modalAjax .modal-body .card {
    background: var(--nx-card-bg);
    border-color: var(--nx-border);
    color: var(--nx-text);
}
#modalAjax .btn,
#modalAjax .modal-footer .btn {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    padding: 11px 18px;
    border-radius: var(--nx-radius-button, 11px);
    line-height: 1;
}
body.nx-theme .modal-title { color: var(--nx-text); font-weight: 600; }
body.nx-theme .modal-backdrop.show { opacity: .5; }
body.nx-theme .close { color: var(--nx-muted); opacity: 1; text-shadow: none; }
body.nx-theme .close:hover { color: var(--nx-text); }

/* ---------- Guest homepage action buttons (homepage.tpl) ---------- */
.action-icon-btns .nx-home-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    height: 100%;
    padding: 26px 14px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 16px);
    box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04));
    color: var(--nx-text);
    font-weight: 400;
    font-size: var(--nx-font-size-md);
    text-decoration: none;
    transition: transform var(--nx-transition), border-color var(--nx-transition), box-shadow var(--nx-transition);
}
.action-icon-btns .nx-home-action:hover {
    transform: translateY(-3px);
    border-color: var(--nx-primary);
    box-shadow: 0 10px 24px rgba(var(--nx-primary-rgb), .14);
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: none;
}
.action-icon-btns .nx-home-action .material-symbols-rounded {
    font-size: 30px;
    color: var(--nx-primary-text, var(--nx-primary));
}

.nx-text        { color: var(--nx-text); }
.nx-muted       { color: var(--nx-muted); }
.nx-primary-text{ color: var(--nx-primary-text, var(--nx-primary)); }

/* Section / label typography */
.nx-eyebrow {                 /* small uppercase section label */
    font-size: var(--nx-font-size-sm); font-weight: 400; color: var(--nx-muted);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block;
}
.nx-eyebrow-sm { margin-bottom: 6px; }
.nx-title-sm   { font-size: 14.5px; font-weight: 400; color: var(--nx-text); }
.nx-title-md   { font-size: var(--nx-font-size-xl);   font-weight: 600; color: var(--nx-text); }
.nx-title-lg   { font-size: 19px;   font-weight: 600; color: var(--nx-text); }
.nx-label      { font-weight: 400; font-size: 13px; color: var(--nx-text); }
.nx-value      { font-weight: 400; font-size: var(--nx-font-size); color: var(--nx-text); }
.nx-hint-text  { font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-muted); }

/* Divider */
.nx-divider {
    height: 1px; background: var(--nx-border); margin: 24px 0; border: none;
}

/* Cell reset used inside nx tables built with the bootstrap table markup */
.nx-cell-plain { border: none; vertical-align: middle; }

/* Spacing helpers (only the most-repeated) */
.nx-mb-24 { margin-bottom: 24px; }
.nx-mb-20 { margin-bottom: 20px; }
.nx-mb-16 { margin-bottom: 16px; }
.nx-gap-12 { gap: 12px; }

/* Table header cell (matches the .nx-table thead look for bootstrap tables) */
.nx-th {
    font-size: 11.5px; font-weight: 400; text-transform: uppercase;
    color: var(--nx-muted); border: none;
}

/* Inputs/controls repeated inline (map to the form-control look) */
.nx-input-line {
    height: 42px; border-radius: var(--nx-radius-input, 8px);
    border: 1px solid var(--nx-border); background: var(--nx-bg);
    color: var(--nx-text); font-weight: 400; padding: 0 12px;
}
.nx-input-ghost {
    height: 42px; border-radius: var(--nx-radius-input, 10px);
    border: 1px solid var(--nx-border); background: transparent; color: var(--nx-text);
}

body.nx-theme .card-sidebar {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 16px);
    box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04));
    overflow: hidden;
}
body.nx-theme .card-sidebar .card-header {
    cursor: pointer;
    background: transparent;
    border-bottom: 1px solid var(--nx-border);
}
body.nx-theme .card-sidebar .card-title {
    display: flex;
    align-items: center;
    font-size: var(--nx-font-size);
    font-weight: 600;
    color: var(--nx-text);
}
/* Chevron: rotate smoothly to indicate collapsed/expanded state */
body.nx-theme .card-sidebar .card-minimise {
    margin-left: auto;
    color: var(--nx-muted);
    transition: transform var(--nx-transition-slow);
    transform: rotate(0deg);   /* chevron-up = expanded */
}
body.nx-theme .card-sidebar .card-minimise.minimised {
    transform: rotate(180deg); /* points down = collapsed */
}
body.nx-theme .card-sidebar .collapsable-card-body { overflow: hidden; }
body.nx-theme .card-sidebar .list-group,
body.nx-theme .card-sidebar .list-group-item {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}
body.nx-theme .card-sidebar .list-group-item {
    color: var(--nx-sidebar-text, var(--nx-muted));
    font-weight: 400;
    font-size: var(--nx-font-size-md);
    padding: 10px 18px;
    transition: background var(--nx-transition), color var(--nx-transition);
}
/* Same measured Lagom values as the order form sidebar - see the note there. */
body.nx-theme .card-sidebar .list-group-item {
    padding: 6px 0;
    margin: 1px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    gap: 8px;
    background: transparent;
    color: var(--nx-primary-text, var(--nx-primary));
    border-radius: 4px;
    transition: padding .24s ease, background-color .24s ease;
}
body.nx-theme .card-sidebar .list-group-item:hover:not(.active) {
    background: transparent;
    text-decoration: none;
    padding-left: 12px;
    padding-right: 12px;
}
body.nx-theme .card-sidebar .list-group-item.active {
    background: rgba(var(--nx-primary-rgb), 0.07);
    color: var(--nx-primary-text, var(--nx-primary));
    padding-left: 12px;
    padding-right: 12px;
}

.nx-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--nx-radius-badge, 999px);
    background: rgba(var(--nx-primary-rgb), 0.1);
    color: var(--nx-primary-text, var(--nx-primary));
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.4;
}
.nx-secondary-nav-item {
    color: var(--nx-text);
}
.nx-sh-menu-item i,
.nx-secondary-nav-item i {
    color: var(--nx-primary-text, var(--nx-primary));
}

/* --- Domain Details --- */
.nx-dd-hero.nx-dd-hero.nx-dd-hero {
    background: linear-gradient(135deg, var(--nx-primary) 0%, var(--nx-secondary) 100%);
    border-radius: var(--nx-radius-card);
    padding: 24px 30px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(var(--nx-primary-rgb), 0.15);
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}
.nx-dd-hero-top.nx-dd-hero-top.nx-dd-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.nx-dd-hero-name.nx-dd-hero-name.nx-dd-hero-name {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nx-dd-hero-globe.nx-dd-hero-globe.nx-dd-hero-globe {
    font-size: 26px;
    color: #fff;
    opacity: 0.9;
}
.nx-dd-hero-domain.nx-dd-hero-domain.nx-dd-hero-domain {
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.3px;
}
.nx-dd-status-pill.nx-dd-status-pill.nx-dd-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 400;
    padding: 5px 12px;
    border-radius: var(--nx-radius-badge);
}
.nx-dd-hero-meta.nx-dd-hero-meta.nx-dd-hero-meta {
    border-top: 1px solid rgba(255,255,255,0.15);
}
.nx-dd-hero-label.nx-dd-hero-label.nx-dd-hero-label {
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nx-dd-hero-value.nx-dd-hero-value.nx-dd-hero-value {
    font-size: 14.5px;
    font-weight: 400;
    margin-top: 2px;
}
.nx-dd-tabs.nx-dd-tabs.nx-dd-tabs {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}
.nx-dd-card.nx-dd-card.nx-dd-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: 20px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    margin-bottom: 22px;
}
.nx-dd-panel.nx-dd-panel.nx-dd-panel {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: 24px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.nx-dd-side-card.nx-dd-side-card.nx-dd-side-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: 18px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.nx-dd-card-head.nx-dd-card-head.nx-dd-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.nx-dd-title15.nx-dd-title15.nx-dd-title15 {
    font-size: var(--nx-font-size-lg);
    font-weight: 600;
    color: var(--nx-text);
}
.nx-dd-mb18.nx-dd-mb18.nx-dd-mb18 {
    margin-bottom: 18px;
}
.nx-dd-mb14.nx-dd-mb14.nx-dd-mb14 {
    margin-bottom: 14px;
}
.nx-dd-link.nx-dd-link.nx-dd-link {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: none;
}
.nx-dd-col-10.nx-dd-col-10.nx-dd-col-10 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nx-dd-ns.nx-dd-ns.nx-dd-ns {
    font-family: monospace;
    font-size: var(--nx-font-size);
    font-weight: 400;
    color: var(--nx-text);
    padding: 8px 12px;
    background: rgba(0,0,0,0.02);
    border-radius: var(--nx-radius-sm);
    border: 1px solid var(--nx-border);
}
.nx-dd-empty.nx-dd-empty.nx-dd-empty {
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    font-weight: 400;
}
.nx-dd-label.nx-dd-label.nx-dd-label {
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    color: var(--nx-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nx-dd-value.nx-dd-value.nx-dd-value {
    font-size: var(--nx-font-size);
    font-weight: 400;
    margin-top: 4px;
}
.nx-dd-on.nx-dd-on.nx-dd-on {
    color: var(--nx-success);
}
.nx-dd-off.nx-dd-off.nx-dd-off {
    color: var(--nx-danger);
}
.nx-dd-value-plain.nx-dd-value-plain.nx-dd-value-plain {
    color: var(--nx-text);
}
.nx-dd-h3.nx-dd-h3.nx-dd-h3 {
    font-size: var(--nx-font-size-xl);
    font-weight: 400;
    color: var(--nx-text);
    margin-bottom: 10px;
}
.nx-dd-check-label.nx-dd-check-label.nx-dd-check-label {
    font-weight: 400;
    color: var(--nx-text);
}
.nx-dd-form-label.nx-dd-form-label.nx-dd-form-label {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-muted);
}
.nx-dd-form-label2.nx-dd-form-label2.nx-dd-form-label2 {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
}
.nx-dd-input.nx-dd-input.nx-dd-input {
    border-radius: var(--nx-radius-md);
    height: 40px;
    font-size: var(--nx-font-size-md);
}
.nx-dd-input-lg.nx-dd-input-lg.nx-dd-input-lg {
    border-radius: var(--nx-radius-md);
    height: 42px;
    font-size: var(--nx-font-size-md);
}
.nx-dd-btn-primary.nx-dd-btn-primary.nx-dd-btn-primary {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    font-weight: 400;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-md);
    padding: 10px 22px;
}
.nx-dd-btn.nx-dd-btn.nx-dd-btn {
    font-weight: 400;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-md);
    padding: 10px 22px;
}
.nx-dd-desc.nx-dd-desc.nx-dd-desc {
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 20px;
}
.nx-dd-desc-24.nx-dd-desc-24.nx-dd-desc-24 {
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 24px;
}
.nx-dd-desc-plain.nx-dd-desc-plain.nx-dd-desc-plain {
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    font-weight: 400;
    margin-bottom: 24px;
}
.nx-dd-status-row.nx-dd-status-row.nx-dd-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(0,0,0,0.02);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    margin-bottom: 24px;
}
.nx-dd-pill.nx-dd-pill.nx-dd-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    padding: 4px 10px;
    border-radius: var(--nx-radius-badge);
}
.nx-dd-pill-on.nx-dd-pill-on.nx-dd-pill-on {
    background: color-mix(in srgb, var(--nx-success) 12%, var(--nx-card-bg));
    color: var(--nx-success);
}
.nx-dd-pill-off.nx-dd-pill-off.nx-dd-pill-off {
    background: color-mix(in srgb, var(--nx-danger) 12%, var(--nx-card-bg));
    color: var(--nx-danger);
}
.nx-dd-steps.nx-dd-steps.nx-dd-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.nx-dd-step.nx-dd-step.nx-dd-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: rgba(0,0,0,0.01);
}
.nx-dd-step-left.nx-dd-step-left.nx-dd-step-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nx-dd-step-num.nx-dd-step-num.nx-dd-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 400;
}
.nx-dd-step-ico.nx-dd-step-ico.nx-dd-step-ico {
    font-size: 16px;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.nx-dd-step-done.nx-dd-step-done.nx-dd-step-done {
    background: #eefdf6;
    color: var(--nx-success-alt);
}
.nx-dd-step-todo.nx-dd-step-todo.nx-dd-step-todo {
    background: var(--nx-border);
    color: var(--nx-muted);
}
.nx-dd-step-title.nx-dd-step-title.nx-dd-step-title {
    font-size: var(--nx-font-size);
    font-weight: 600;
    color: var(--nx-text);
}
.nx-dd-step-sub.nx-dd-step-sub.nx-dd-step-sub {
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
    font-weight: 400;
}
.nx-dd-btn-sm.nx-dd-btn-sm.nx-dd-btn-sm {
    font-size: var(--nx-font-size-sm);
    border-radius: var(--nx-radius-sm);
}
.nx-dd-col-20.nx-dd-col-20.nx-dd-col-20 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.nx-dd-addon.nx-dd-addon.nx-dd-addon {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--nx-border);
}
.nx-dd-addon-last.nx-dd-addon-last.nx-dd-addon-last {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.nx-dd-addon-icon.nx-dd-addon-icon.nx-dd-addon-icon {
    font-size: 28px;
    color: var(--nx-primary-text, var(--nx-primary));
    background: rgba(var(--nx-primary-rgb), 0.08);
    padding: 8px;
    border-radius: var(--nx-radius-md);
}
.nx-dd-flex1.nx-dd-flex1.nx-dd-flex1 {
    flex: 1;
}
.nx-dd-addon-name.nx-dd-addon-name.nx-dd-addon-name {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--nx-text);
}
.nx-dd-addon-desc.nx-dd-addon-desc.nx-dd-addon-desc {
    font-size: 12.5px;
    color: var(--nx-muted);
    font-weight: 400;
    margin-top: 4px;
    line-height: 1.4;
}
.nx-dd-mt10.nx-dd-mt10.nx-dd-mt10 {
    margin-top: 10px;
}
.nx-dd-btn-xs.nx-dd-btn-xs.nx-dd-btn-xs {
    font-size: var(--nx-font-size-sm);
    padding: 6px 14px;
    border-radius: var(--nx-radius-sm);
}
.nx-dd-btn-xs-primary.nx-dd-btn-xs-primary.nx-dd-btn-xs-primary {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    font-size: var(--nx-font-size-sm);
    padding: 6px 14px;
    border-radius: var(--nx-radius-sm);
    font-weight: 400;
    color: #fff;
}
.nx-dd-renew.nx-dd-renew.nx-dd-renew {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    padding: 14px 0;
    border-radius: var(--nx-radius-md);
    font-size: 14.5px;
    font-weight: 400;
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--nx-primary-rgb), 0.3);
}
.nx-dd-ic19.nx-dd-ic19.nx-dd-ic19 {
    font-size: 19px;
}
.nx-dd-ic19-primary.nx-dd-ic19-primary.nx-dd-ic19-primary {
    font-size: 19px;
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-dd-side-head.nx-dd-side-head.nx-dd-side-head {
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--nx-muted);
    margin-bottom: 12px;
    padding-left: 10px;
}
.nx-dd-navlist.nx-dd-navlist.nx-dd-navlist {
    border: none;
    gap: 4px;
}
.nx-dd-navlink.nx-dd-navlink.nx-dd-navlink {
    border: none;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
.nx-dd-ic16.nx-dd-ic16.nx-dd-ic16 {
    font-size: var(--nx-font-size-xl);
    color: var(--nx-muted);
}

/* --- View Invoice --- */
.nx-vi-relative { position: relative; }
.nx-vi-plus-badge { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--nx-primary); color: #fff; font-size: 10px; font-weight: 400; border: 1.5px solid #fff; line-height: 1; pointer-events: none; }
.nx-vi-dropright-wrap { width: 100%; display: flex; justify-content: center; z-index: 1050; }
.nx-vi-btn-reset { padding: 0; background: transparent; border: none; box-shadow: none; }
.nx-vi-avatar-lg { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, #f59e0b, #ea580c); color: #ffffff; font-weight: 400; font-size: var(--nx-font-size); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(234,88,12,0.2); }
.nx-vi-side-dropdown { min-width: 180px; border-radius: var(--nx-radius-md); box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid var(--nx-border); margin-left: 10px; background: var(--nx-card-bg); }
.nx-vi-dd-name { font-size: 13px; font-weight: 400; color: var(--nx-text); border-color: var(--nx-border); }
.nx-vi-divider { border-color: var(--nx-border); }
.nx-vi-error-icon { font-size: 40px; color: var(--nx-danger); margin-bottom: var(--nx-space-4); }
.nx-vi-back-btn { max-width: 220px; margin: var(--nx-space-5) auto 0; }
.nx-vi-icon-18 { font-size: var(--nx-font-size-h3); }
.nx-vi-icon-19 { font-size: 19px; }
.nx-vi-icon-14 { font-size: var(--nx-font-size-xs); }
.nx-vi-icon-16 { font-size: var(--nx-font-size-sm); }

.nx-vi-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: var(--nx-font-size-md); color: var(--nx-muted); font-weight: var(--nx-weight-body); margin-bottom: var(--nx-space-4); }
.nx-vi-breadcrumb a { display: inline-flex; align-items: center; gap: 5px; color: var(--nx-muted); text-decoration: none; }
.nx-vi-breadcrumb a:hover { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-vi-crumb-sep { font-size: var(--nx-font-size); color: var(--nx-border); }
.nx-vi-crumb-current { color: var(--nx-text); font-weight: var(--nx-weight-heading); }

.nx-vi-title-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--nx-space-3); margin-bottom: var(--nx-space-1); }
.nx-vi-title-left { display: flex; align-items: center; gap: var(--nx-space-3); flex-wrap: wrap; }
.nx-vi-title { font-size: var(--nx-font-size-h1); font-weight: var(--nx-weight-heading); margin: 0; letter-spacing: -0.5px; }
.nx-vi-title-actions { display: flex; align-items: center; gap: var(--nx-space-2); }
.nx-vi-btn-top {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    height: 40px;
    padding: 0 var(--nx-space-4);
    border-radius: var(--nx-radius-button);
    border: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-weight: var(--nx-weight-button);
    font-size: var(--nx-font-size-md);
    text-decoration: none;
    cursor: pointer;
}
.nx-vi-btn-top:hover { border-color: var(--nx-primary); color: var(--nx-primary-text, var(--nx-primary)); }

.nx-vi-status-badge {
    font-size: var(--nx-font-size-md);
    font-weight: var(--nx-weight-heading);
    padding: 5px var(--nx-space-3);
    border-radius: var(--nx-radius-badge);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.nx-vi-status-badge.unpaid { background-color: color-mix(in srgb, var(--nx-danger) 12%, var(--nx-card-bg)); color: var(--nx-danger); }
.nx-vi-status-badge.paid { background-color: color-mix(in srgb, var(--nx-success) 12%, var(--nx-card-bg)); color: var(--nx-success); }
.nx-vi-status-badge.draft,
.nx-vi-status-badge.cancelled { background-color: color-mix(in srgb, var(--nx-muted) 12%, var(--nx-card-bg)); color: var(--nx-muted); }
.nx-vi-status-badge.refunded { background-color: rgba(var(--nx-primary-rgb), 0.08); color: var(--nx-primary-text, var(--nx-primary)); }

.nx-vi-due-line { display: flex; align-items: center; gap: 6px; font-size: var(--nx-font-size-md); font-weight: var(--nx-weight-body); margin-bottom: var(--nx-space-6); }
.nx-vi-due-line .material-symbols-rounded { font-size: var(--nx-font-size-lg); }
.nx-vi-due-line.is-unpaid { color: var(--nx-danger); }
.nx-vi-due-line.is-paid { color: var(--nx-success); }

.nx-inv-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: var(--nx-card-padding);
    box-shadow: var(--nx-shadow);
    margin-bottom: var(--nx-space-6);
}

.nx-vi-card-header { display: flex; justify-content: space-between; margin-bottom: var(--nx-space-7); border-bottom: 1px solid var(--nx-border); padding-bottom: var(--nx-space-6); flex-wrap: wrap; gap: var(--nx-space-5); }
.nx-vi-company-info h2 { font-size: var(--nx-font-size-h2); font-weight: var(--nx-weight-heading); margin: 0 0 var(--nx-space-2) 0; }
.nx-vi-company-info address { font-style: normal; color: var(--nx-muted); font-size: var(--nx-font-size-md); line-height: var(--nx-line-height); }
.nx-vi-logo-p { margin: 0 0 var(--nx-space-4) 0; }
.nx-vi-logo-img { max-height: 45px; }

.nx-vi-section-label { font-size: var(--nx-font-size-xs); font-weight: var(--nx-weight-heading); text-transform: uppercase; letter-spacing: 0.6px; color: var(--nx-muted); margin-bottom: var(--nx-space-2); }

.nx-vi-detail-list { font-size: var(--nx-font-size-md); }
.nx-vi-detail-row { display: flex; justify-content: space-between; gap: var(--nx-space-5); margin-bottom: var(--nx-space-2); }
.nx-vi-detail-row:last-child { margin-bottom: 0; }
.nx-vi-detail-row label { color: var(--nx-muted); }
.nx-vi-detail-row span { font-weight: var(--nx-weight-heading); text-align: right; }
.nx-vi-danger-text { color: var(--nx-danger); }
.nx-vi-text-right { text-align: right; }
.nx-vi-text-left { text-align: left; }
.nx-vi-fw-700 { font-weight: var(--nx-weight-heading); }

.nx-vi-billing-row { display: flex; justify-content: space-between; margin-bottom: var(--nx-space-7); flex-wrap: wrap; gap: var(--nx-space-5); }
.nx-vi-billing-col { font-size: var(--nx-font-size-md); line-height: var(--nx-line-height); }
.nx-vi-billing-col address { font-style: normal; font-weight: var(--nx-weight-heading); }
.nx-vi-billing-col.nx-vi-text-right { min-width: 180px; }

.nx-vi-gateway-select { font-size: var(--nx-font-size-md); font-weight: var(--nx-weight-heading); border-radius: var(--nx-radius-sm); background: var(--nx-bg); border-color: var(--nx-border); color: var(--nx-text); }

.nx-inv-card:has(.nx-custom-select-wrapper) { overflow: visible; }

.nx-vi-credit-card { background: color-mix(in srgb, var(--nx-success) 6%, var(--nx-card-bg)); border: 1px dashed var(--nx-success); border-radius: var(--nx-radius-md); padding: var(--nx-space-5); margin-bottom: var(--nx-space-6); font-size: var(--nx-font-size-md); }
.nx-vi-credit-title { font-weight: var(--nx-weight-heading); margin-bottom: var(--nx-space-2); color: var(--nx-success); }
.nx-vi-credit-desc { margin: 0 0 var(--nx-space-3) 0; }
.nx-vi-credit-row { max-width: 320px; gap: var(--nx-space-2); }
.nx-vi-credit-input { border-radius: var(--nx-radius-sm); font-weight: var(--nx-weight-heading); }
.nx-vi-credit-btn { border-radius: var(--nx-radius-sm); height: 36px; padding: 0 var(--nx-space-4); }

.nx-vi-alert { border-radius: var(--nx-radius-md); font-weight: var(--nx-weight-body); }
.nx-vi-alert-notes { border-radius: var(--nx-radius-md); }
.nx-vi-notes-title { font-weight: var(--nx-weight-heading); margin-bottom: var(--nx-space-1); }

.nx-vi-table-title { font-size: var(--nx-font-size-lg); font-weight: var(--nx-weight-heading); margin-bottom: var(--nx-space-4); text-transform: uppercase; letter-spacing: 0.5px; }
.nx-vi-table { width: 100%; border-collapse: collapse; margin-bottom: var(--nx-space-7); }
.nx-vi-table th { font-size: var(--nx-font-size-xs); font-weight: var(--nx-weight-heading); text-transform: uppercase; letter-spacing: 0.5px; color: var(--nx-muted); padding: var(--nx-space-3) var(--nx-space-4); border-bottom: 2px solid var(--nx-border); }
.nx-vi-table td { padding: var(--nx-space-4); border-bottom: 1px solid var(--nx-border); font-size: var(--nx-font-size); font-weight: var(--nx-weight-heading); }
.nx-vi-table td.nx-vi-amount-col { text-align: right; }
.nx-vi-mb-0 { margin-bottom: 0; }
.nx-vi-empty-cell { text-align: center; color: var(--nx-muted); font-size: var(--nx-font-size-md); padding: var(--nx-space-6); }
.nx-vi-balance-label { text-align: right; font-weight: var(--nx-weight-heading); border-bottom: none; }
.nx-vi-balance-value { color: var(--nx-primary-text, var(--nx-primary)); font-size: var(--nx-font-size-lg); border-bottom: none; }
.nx-vi-amount-col { text-align: right; }

.nx-vi-item-desc { display: flex; align-items: center; gap: var(--nx-space-3); }
.nx-vi-item-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--nx-radius-sm);
    background: rgba(var(--nx-primary-rgb), 0.08);
    color: var(--nx-primary-text, var(--nx-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--nx-font-size-lg);
}
.nx-vi-item-icon.is-discount { background: color-mix(in srgb, var(--nx-success) 12%, var(--nx-card-bg)); color: var(--nx-success); }
.nx-vi-item-lines { display: flex; flex-direction: column; gap: 2px; }
.nx-vi-table td.nx-vi-amount-col.is-discount { color: var(--nx-success); }

.nx-vi-totals { width: 320px; margin-left: auto; font-size: var(--nx-font-size); }
.nx-vi-total-row { display: flex; justify-content: space-between; padding: var(--nx-space-2) 0; border-bottom: 1px dashed var(--nx-border); font-weight: var(--nx-weight-heading); }
.nx-vi-total-row.nx-vi-grand-total { border-bottom: none; padding-top: var(--nx-space-4); font-size: var(--nx-font-size-h3); }
.nx-vi-total-row label { color: var(--nx-muted); }
.nx-vi-total-row.nx-vi-grand-total label { color: var(--nx-text); }
.nx-vi-tax-note { font-size: var(--nx-font-size-xs); color: var(--nx-muted); margin-top: var(--nx-space-5); }

.nx-vi-transactions-card { margin-bottom: var(--nx-space-6); }

/* Sidebar */
.nx-vi-due-card { color: #fff; }
.nx-vi-due-card.is-unpaid { background: linear-gradient(135deg, var(--nx-primary) 0%, color-mix(in srgb, var(--nx-primary) 78%, black) 100%); box-shadow: 0 4px 20px color-mix(in srgb, var(--nx-primary) 25%, transparent); border: none; }
.nx-vi-due-card.is-paid { background: linear-gradient(135deg, var(--nx-success) 0%, color-mix(in srgb, var(--nx-success) 80%, black) 100%); box-shadow: 0 4px 20px color-mix(in srgb, var(--nx-success) 25%, transparent); border: none; }
.nx-vi-due-card.is-other { background: linear-gradient(135deg, var(--nx-secondary) 0%, color-mix(in srgb, var(--nx-secondary) 80%, black) 100%); box-shadow: 0 4px 20px color-mix(in srgb, var(--nx-secondary) 25%, transparent); border: none; }
.nx-vi-due-label { font-size: var(--nx-font-size-xs); font-weight: var(--nx-weight-heading); text-transform: uppercase; letter-spacing: 0.8px; opacity: 0.85; margin-bottom: var(--nx-space-2); }
.nx-vi-due-value { font-size: 32px; font-weight: var(--nx-weight-heading); letter-spacing: -0.5px; margin-bottom: var(--nx-space-4); }
.nx-vi-due-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.18); border-radius: var(--nx-radius-badge); padding: 7px var(--nx-space-4); font-size: var(--nx-font-size-md); font-weight: var(--nx-weight-body); margin-bottom: var(--nx-space-5); }
.nx-vi-due-pill .material-symbols-rounded { font-size: var(--nx-font-size-sm); }

.nx-vi-due-gw { margin-bottom: var(--nx-space-4); }
.nx-vi-due-gw-label { display: block; font-size: var(--nx-font-size-xs); font-weight: var(--nx-weight-heading); text-transform: uppercase; letter-spacing: 0.7px; opacity: 0.85; margin-bottom: var(--nx-space-2); }
.nx-vi-due-gw-select { width: 100%; border: none; border-radius: var(--nx-radius-input); padding: 11px var(--nx-space-4); font-size: var(--nx-font-size-md); font-weight: var(--nx-weight-heading); background: rgba(255,255,255,0.94); color: var(--nx-text); }
.nx-vi-due-gw .nx-custom-select-trigger {
    height: 46px;
    border: none;
    border-radius: var(--nx-radius-input);
    background: rgba(255,255,255,0.94);
    color: #1f2937;
    font-weight: var(--nx-weight-heading);
}
.nx-vi-due-gw .nx-custom-select-trigger i { color: #6b7280; }
.nx-vi-due-gw .nx-custom-select-options {
    margin-top: var(--nx-space-2);
    border: none;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    left: 0;
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: min(360px, calc(100vw - 32px));
}
.nx-vi-due-gw .nx-custom-select-option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nx-vi-billing-col .nx-custom-select-options {
    left: auto;
    right: 0;
    width: max-content;
    min-width: 100%;
    max-width: min(360px, calc(100vw - 32px));
}
.nx-vi-billing-col .nx-custom-select-option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nx-vi-payment-btn { width: 100%; color: var(--nx-text); }
.nx-vi-payment-btn > *:not(button):not(input):not(.btn) {
    background: var(--nx-card-bg);
    border-radius: var(--nx-radius-md);
    padding: var(--nx-space-3);
    margin-bottom: var(--nx-space-2);
}
.nx-vi-payment-btn > *:not(button):not(input):not(.btn):last-child { margin-bottom: 0; }
.nx-vi-payment-btn * { box-sizing: border-box; max-width: 100%; }
.nx-vi-payment-btn input[type="file"] { display: block; width: 100%; margin-bottom: var(--nx-space-2); font-size: var(--nx-font-size-sm); }
.nx-vi-payment-btn > form > input[type="submit"],
.nx-vi-payment-btn > form > button[type="submit"] {
    width: 100% !important;
    background: #ffffff !important;
    color: var(--nx-primary-text, var(--nx-primary)) !important;
    border: none !important;
    font-weight: var(--nx-weight-heading) !important;
    border-radius: var(--nx-radius-button) !important;
    padding: 13px var(--nx-space-6) !important;
    font-size: var(--nx-font-size-md) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    transition: all var(--nx-transition) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--nx-space-2) !important;
}
.nx-vi-payment-btn > form > input[type="submit"]:hover,
.nx-vi-payment-btn > form > button[type="submit"]:hover {
    background: #f9fafb !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
    transform: translateY(-1px) !important;
}
.nx-vi-secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--nx-font-size-xs); opacity: 0.85; margin-top: var(--nx-space-3); }
.nx-vi-secure-note .material-symbols-rounded { font-size: var(--nx-font-size-sm); }

.nx-vi-payment-btn .alert-danger,
.nx-vi-payment-btn .text-danger { color: var(--nx-danger) !important; }
.nx-vi-payment-btn .alert-success,
.nx-vi-payment-btn .text-success { color: var(--nx-success) !important; }
.nx-vi-payment-btn .alert-warning,
.nx-vi-payment-btn .text-warning { color: var(--nx-warning) !important; }
.nx-vi-payment-btn .alert-info,
.nx-vi-payment-btn .text-info,
.nx-vi-payment-btn .text-muted { color: var(--nx-muted) !important; }
.nx-vi-payment-btn a:not(.btn) { color: var(--nx-primary-text, var(--nx-primary)); }

.nx-vi-actions-card { padding: var(--nx-space-5) var(--nx-space-6); }
.nx-vi-actions-title,
.nx-vi-accepted-title { font-size: var(--nx-font-size-xs); font-weight: var(--nx-weight-heading); text-transform: uppercase; letter-spacing: 0.8px; color: var(--nx-muted); margin-bottom: var(--nx-space-4); }
.nx-vi-action-buttons { display: flex; flex-direction: column; }
.nx-vi-btn-action {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-3) 4px;
    border: none;
    border-top: 1px solid var(--nx-border);
    background: transparent;
    color: var(--nx-text);
    font-weight: var(--nx-weight-heading);
    font-size: var(--nx-font-size-md);
    text-decoration: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    transition: color var(--nx-transition);
}
.nx-vi-action-buttons .nx-vi-btn-action:first-child { border-top: none; padding-top: 4px; }
.nx-vi-btn-action .material-symbols-rounded:first-child { font-size: var(--nx-font-size-lg); color: var(--nx-primary-text, var(--nx-primary)); }
.nx-vi-chevron { margin-left: auto; font-size: var(--nx-font-size-sm); color: var(--nx-muted); }
.nx-vi-btn-action:hover { color: var(--nx-primary-text, var(--nx-primary)); }

.nx-vi-accepted-card { padding: var(--nx-space-5) var(--nx-space-6); }
.nx-vi-accepted-icons { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); }
.nx-vi-accepted-icons .nx-payment-icon-pill { border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); padding: 6px 10px; display: flex; align-items: center; justify-content: center; background: var(--nx-bg); }
.nx-vi-accepted-icons .nx-payment-icon-pill img { max-width: 34px; max-height: 16px; display: block; }

@media (max-width: 768px) {
    .nx-inv-card { padding: var(--nx-space-5); }
    .nx-vi-totals { width: 100%; }
}

/* --- Invoices --- */
.nx-inv-stat-row { gap: 0; margin-left: -8px; margin-right: -8px; }
.nx-inv-tile-danger { background: linear-gradient(135deg, var(--nx-danger, #f04438) 0%, #d92d20 100%); border-radius: var(--nx-radius-card); padding: 22px; color: #fff; box-shadow: 0 10px 24px rgba(var(--nx-danger-rgb, 240, 68, 56),0.22); height: 100%; }
.nx-inv-tile { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); padding: 22px; box-shadow: 0 1px 2px rgba(16,24,40,.04); height: 100%; }
.nx-inv-tile-label-light { font-size: var(--nx-font-size-md); font-weight: 400; color: rgba(255,255,255,0.85); }
.nx-inv-tile-value-light { font-size: 34px; font-weight: 400; color: #fff; letter-spacing: -1px; margin-top: 8px; }
.nx-inv-tile-hint-light { font-size: var(--nx-font-size-sm); color: rgba(255,255,255,0.8); font-weight: 400; margin-top: 4px; }
.nx-inv-tile-label { font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-muted); }
.nx-inv-tile-value { font-size: 34px; font-weight: 400; color: var(--nx-text); letter-spacing: -1px; margin-top: 8px; }
.nx-inv-tile-value-success { font-size: 34px; font-weight: 400; color: var(--nx-success-alt); letter-spacing: -1px; margin-top: 8px; }
.nx-inv-tile-hint { font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 400; margin-top: 4px; }
.nx-inv-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-inv-border { border-color: var(--nx-border); }
.nx-inv-card-title { margin: 0; font-size: 15.5px; font-weight: var(--nx-weight-card-title); color: var(--nx-text); }
.nx-inv-link { font-size: 13px; color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; text-decoration: none; }
.nx-inv-va-middle { vertical-align: middle; }
.nx-inv-thead-row { border-bottom: 1px solid var(--nx-border); background: rgba(0,0,0,0.01); }
.nx-inv-row { border-bottom: 1px solid var(--nx-border); vertical-align: middle; }
.nx-inv-num { font-size: 14.5px; font-weight: 400; color: var(--nx-text); }
.nx-inv-date { font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-text); }
.nx-inv-total { font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-text); }
.nx-inv-btn-pay {
    border-radius: var(--nx-radius-md);
    background: var(--nx-primary-hover);
    color: #fff;
    font-size: 13px;
    border: none;
    text-decoration: none;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
.nx-inv-btn-pay:hover {
    background: var(--nx-primary);
    color: #fff;
}
.nx-inv-btn-manage { border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-size: 13px; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); }
.nx-inv-empty { border: none; color: var(--nx-muted); font-size: var(--nx-font-size); font-weight: 400; }
.nx-inv-empty-icon { font-size: 40px; color: var(--nx-border); margin-bottom: 8px; display: block; }
.nx-inv-page-link { border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; padding: 6px 12px; }
.nx-inv-page-info { border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-muted); font-weight: 400; padding: 6px 12px; }
.nx-inv-gap-22 { gap: 22px; }
.nx-inv-side-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); padding: 20px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-inv-cc { background: #0f172a; border-radius: var(--nx-radius-card); padding: 22px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 12px 24px rgba(15,23,42,0.18); min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 16px; }
.nx-inv-cc-deco1 { position: absolute; right: -20px; bottom: -20px; width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%); }
.nx-inv-cc-deco2 { position: absolute; right: 20px; top: -10px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.02); }
.nx-inv-cc-top { display: flex; justify-content: space-between; align-items: start; z-index: 2; }
.nx-inv-cc-brand { font-size: var(--nx-font-size-md); font-weight: 400; letter-spacing: 0.5px; text-transform: uppercase; color: #94a3b8; }
.nx-inv-cc-chip { color: rgba(255,255,255,0.7); font-size: 24px; }
.nx-inv-cc-number { font-size: 19px; font-weight: 400; letter-spacing: 2px; font-family: monospace, ui-monospace; margin: 16px 0; z-index: 2; }
.nx-inv-cc-bottom { display: flex; justify-content: space-between; align-items: end; z-index: 2; }
.nx-inv-cc-col { display: flex; flex-direction: column; }
.nx-inv-cc-col-right { display: flex; flex-direction: column; text-align: right; }
.nx-inv-cc-label { font-size: 9px; text-transform: uppercase; color: #64748b; font-weight: 400; letter-spacing: 0.5px; }
.nx-inv-cc-value { font-size: 13px; font-weight: 400; color: #f8fafc; margin-top: 1px; }
.nx-inv-add-card { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; font-size: 13px; padding: 11px 0; border-radius: var(--nx-radius-md); text-decoration: none; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); }
.nx-inv-add-card-icon { font-size: var(--nx-font-size-h3); color: var(--nx-primary-text, var(--nx-primary)); }
.nx-inv-contact { display: flex; flex-direction: column; gap: 4px; font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-text); line-height: 1.55; margin-bottom: 16px; }
.nx-inv-contact-name { font-size: 15.5px; font-weight: 400; color: var(--nx-text); }
.nx-inv-contact-email { color: var(--nx-muted); font-size: var(--nx-font-size-md); }
.nx-inv-contact-addr { margin-top: 6px; font-size: 13px; color: var(--nx-muted); font-weight: 400; }

/* --- Mass Pay --- */
.nx-mp-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-mp-overflow-hidden { overflow: hidden; }
.nx-mp-body-30 { padding: 30px; }
.nx-mp-body-24 { padding: 24px; }
.nx-mp-gap-10 { gap: 10px; }
.nx-mp-icon-22 { color: var(--nx-primary-text, var(--nx-primary)); font-size: var(--nx-font-size-h2); }
.nx-mp-icon-20 { color: var(--nx-primary-text, var(--nx-primary)); font-size: 20px; }
.nx-mp-icon-19 { font-size: 19px; }
.nx-mp-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.nx-mp-thead-row { border-bottom: 2px solid var(--nx-border); }
.nx-mp-th { font-size: var(--nx-font-size-xs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: var(--nx-muted); padding: 12px 16px; border: none; }
.nx-mp-text-right { text-align: right; }
.nx-mp-inv-head-cell { padding: 20px 16px 8px 16px; border: none; vertical-align: middle; }
.nx-mp-inv-badge { background: rgba(79,70,229,0.06); color: var(--nx-primary-text, var(--nx-primary)); font-size: 11.5px; font-weight: 400; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 4px; }
.nx-mp-row { border-bottom: 1px solid var(--nx-border); }
.nx-mp-td-desc { padding: 12px 16px; border: none; font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-muted); vertical-align: middle; }
.nx-mp-td-amount { padding: 12px 16px; border: none; font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-text); text-align: right; vertical-align: middle; }
.nx-mp-empty { text-align: center; color: var(--nx-muted); font-size: var(--nx-font-size-md); padding: 30px; }
.nx-mp-totals { background: var(--nx-bg); border-radius: var(--nx-radius-md); padding: 20px; margin-top: 24px; max-width: 380px; margin-left: auto; display: flex; flex-direction: column; gap: 10px; }
.nx-mp-total-line { display: flex; justify-content: space-between; font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-muted); }
.nx-mp-total-val { color: var(--nx-text); font-weight: 400; }
.nx-mp-sep { border-top: 1px dashed var(--nx-border); margin: 4px 0; }
.nx-mp-grand { display: flex; justify-content: space-between; font-size: 15.5px; font-weight: 400; color: var(--nx-text); }
.nx-mp-grand-val { color: var(--nx-primary-text, var(--nx-primary)); font-size: var(--nx-font-size-h3); }
.nx-mp-card-head { background: rgba(0,0,0,0.01); border-bottom: 1px solid var(--nx-border); padding: 18px 24px; gap: 8px; }
.nx-mp-card-title { font-size: var(--nx-font-size-lg); font-weight: var(--nx-weight-card-title); color: var(--nx-text); }
.nx-mp-label { font-size: var(--nx-font-size-xs); font-weight: 400; color: var(--nx-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block; }
.nx-mp-select { height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; padding: 0 12px; outline: none; }
.nx-mp-mb-14 { margin-bottom: 14px; }
.nx-mp-pay-btn { height: 44px; border-radius: var(--nx-radius-md); background: var(--nx-primary); border: none; font-weight: 400; font-size: var(--nx-font-size); gap: 8px; color: #fff; width: 100%; box-shadow: 0 4px 12px rgba(79,70,229,0.2); cursor: pointer; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); }
.nx-mp-pay-btn:hover { background: var(--nx-primary-hover); box-shadow: 0 6px 16px rgba(79,70,229,0.3); }
.nx-mp-secure { font-size: 11.5px; color: var(--nx-muted); font-weight: 400; display: flex; align-items: center; justify-content: center; gap: 6px; }
.nx-mp-secure-icon { font-size: var(--nx-font-size-xl); color: var(--nx-success); }

/* --- Invoice Payment (Checkout) --- */
.nx-ip-subtitle { margin: 4px 0 0; font-size: var(--nx-font-size-md); color: var(--nx-muted); }
.nx-ip-pci-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--nx-radius-badge);
    border: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    font-size: var(--nx-font-size-sm);
    font-weight: var(--nx-weight-heading);
    color: var(--nx-success);
    white-space: nowrap;
}
.nx-ip-pci-badge .material-symbols-rounded { color: var(--nx-success); }

.nx-ip-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04)); overflow: hidden; }
.nx-ip-card, .nx-ip-card * { box-sizing: border-box; }
.nx-ip-card input, .nx-ip-card select, .nx-ip-card textarea, .nx-ip-card > div, .nx-ip-card .form-control {
    max-width: 100%;
}
.nx-ip-card-head { background: rgba(0,0,0,0.01); border-bottom: 1px solid var(--nx-border); padding: var(--nx-space-5) var(--nx-space-6); }
.nx-ip-card-title { font-size: var(--nx-font-size-xl); font-weight: var(--nx-weight-heading); color: var(--nx-text); }
.nx-ip-card-sub { margin: 4px 0 0; font-size: var(--nx-font-size-md); color: var(--nx-muted); }
.nx-ip-body-24 { padding: var(--nx-space-6); }
.nx-ip-icon-22 { color: var(--nx-primary-text, var(--nx-primary)); font-size: var(--nx-font-size-h2); }
.nx-ip-mb-18 { margin-bottom: var(--nx-space-5); }
.nx-ip-mb-0 { margin-bottom: 0; }
.nx-ip-label { font-size: var(--nx-font-size-sm); font-weight: var(--nx-weight-heading); color: var(--nx-muted); padding-top: 10px; }
.nx-ip-submit { height: 46px; border-radius: var(--nx-radius-md); background: var(--nx-primary); border: none; font-weight: var(--nx-weight-heading); font-size: var(--nx-font-size); gap: var(--nx-space-2); color: #fff; padding: 0 var(--nx-space-6); box-shadow: 0 4px 12px rgba(var(--nx-primary-rgb), 0.2); outline: none; }
.nx-ip-submit:focus { outline: none; box-shadow: 0 4px 12px rgba(var(--nx-primary-rgb), 0.2); }
.nx-ip-submit:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; }
.nx-ip-icon-19 { font-size: 19px; }
.nx-ip-ssl-alert { border-radius: var(--nx-radius-md); gap: var(--nx-space-2); margin-top: var(--nx-space-5); }
.nx-ip-icon-20 { font-size: 20px; }

.nx-ip-card .three-column-grid {
    display: grid;
    grid-template-columns: 28px 46px minmax(0,1fr) minmax(0,1.3fr) auto;
    align-items: center;
    column-gap: var(--nx-space-4);
    row-gap: var(--nx-space-2);
    margin-bottom: var(--nx-space-3);
}
.nx-ip-card .three-column-grid .paymethod-info {
    padding: var(--nx-space-3) 0;
    border-top: 1px solid var(--nx-border);
    border-bottom: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    font-size: var(--nx-font-size-md);
}
.nx-ip-card .three-column-grid .paymethod-info:nth-child(5n+1) {
    border-left: 1px solid var(--nx-border);
    border-top-left-radius: var(--nx-radius-md);
    border-bottom-left-radius: var(--nx-radius-md);
    padding-left: var(--nx-space-4);
}
.nx-ip-card .three-column-grid .paymethod-info:nth-child(5n) {
    border-right: 1px solid var(--nx-border);
    border-top-right-radius: var(--nx-radius-md);
    border-bottom-right-radius: var(--nx-radius-md);
    padding-right: var(--nx-space-4);
}
.nx-ip-card .three-column-grid .paymethod-info label { margin: 0; cursor: pointer; }
.nx-ip-card .three-column-grid i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 24px;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-text);
    color: var(--nx-card-bg);
    font-size: 11px;
}

.nx-ip-card .two-column-grid {
    display: grid;
    grid-template-columns: 28px 32px minmax(0,1fr) minmax(0,1.3fr);
    align-items: center;
    column-gap: var(--nx-space-4);
    row-gap: var(--nx-space-2);
    margin-bottom: var(--nx-space-3);
}
.nx-ip-card .two-column-grid .paymethod-info {
    padding: var(--nx-space-3) 0;
    border-top: 1px solid var(--nx-border);
    border-bottom: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    font-size: var(--nx-font-size-md);
}
.nx-ip-card .two-column-grid .paymethod-info:nth-child(4n+1) {
    border-left: 1px solid var(--nx-border);
    border-top-left-radius: var(--nx-radius-md);
    border-bottom-left-radius: var(--nx-radius-md);
    padding-left: var(--nx-space-4);
}
.nx-ip-card .two-column-grid .paymethod-info:nth-child(4n) {
    border-right: 1px solid var(--nx-border);
    border-top-right-radius: var(--nx-radius-md);
    border-bottom-right-radius: var(--nx-radius-md);
    padding-right: var(--nx-space-4);
}
.nx-ip-card .two-column-grid .paymethod-info label { margin: 0; cursor: pointer; color: var(--nx-primary-text, var(--nx-primary)); }
.nx-ip-card label:has(#newCCInfo),
.nx-ip-card label:has(#newAccountInfo) {
    display: flex;
    align-items: center;
    gap: var(--nx-space-3);
    padding: var(--nx-space-3) var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    font-weight: var(--nx-weight-heading);
    color: var(--nx-text);
    cursor: pointer;
    margin-bottom: var(--nx-space-3);
}
.nx-ip-card label:has(#newCCInfo:checked),
.nx-ip-card label:has(#newAccountInfo:checked) {
    border-color: var(--nx-primary);
    background: color-mix(in srgb, var(--nx-primary) 6%, var(--nx-card-bg));
    color: var(--nx-primary-text, var(--nx-primary));
}

.nx-ip-card .iradio_square-blue,
.nx-ip-card .icheckbox_square-blue {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
}
.nx-ip-card .iCheck-helper { display: none !important; }
.nx-ip-card input[type="radio"],
.nx-ip-card input[type="checkbox"] {
    position: static !important;
    width: 17px !important;
    height: 17px !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--nx-card-bg) !important;
    border: 1.5px solid var(--nx-border) !important;
    display: inline-grid !important;
    place-content: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.nx-ip-card input[type="radio"] { border-radius: 50% !important; }
.nx-ip-card input[type="checkbox"] { border-radius: 5px !important; }
.nx-ip-card input[type="radio"]:checked,
.nx-ip-card input[type="checkbox"]:checked {
    background: var(--nx-primary) !important;
    border-color: var(--nx-primary) !important;
}

.nx-ip-card .cc-details,
.nx-ip-card .cc-billing-address,
.nx-ip-card #billingAddressChoice {
    display: block;
    margin: 0 0 var(--nx-space-4) 0;
}
.nx-ip-card .cc-details > label,
.nx-ip-card .cc-billing-address > label,
.nx-ip-card #billingAddressChoice > label {
    display: block;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    text-align: left !important;
    font-size: var(--nx-font-size-sm);
    font-weight: var(--nx-weight-heading);
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--nx-muted);
    margin-bottom: var(--nx-space-2);
    padding: 0;
}
.nx-ip-card .cc-details > div,
.nx-ip-card .cc-billing-address > div {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding: 0;
}

.nx-u-choice-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nx-u-choice-head { display: flex; align-items: center; gap: var(--nx-space-2); }

/* --- Payment Methods Manage --- */
.nx-pmm-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-pmm-body { padding: 30px; }
.nx-pmm-head { gap: 16px; }
.nx-pmm-head-left { gap: 14px; }
.nx-pmm-head-ico {
    width: 44px; height: 44px; border-radius: var(--nx-radius-md); flex-shrink: 0;
    background: rgba(var(--nx-primary-rgb), 0.1); color: var(--nx-primary-text, var(--nx-primary));
    display: flex; align-items: center; justify-content: center;
}
.nx-pmm-ico-24 { font-size: 24px; }
.nx-pmm-pci-badge {
    flex-shrink: 0; background: rgba(var(--nx-success-rgb, 16,185,129), 0.1); color: var(--nx-success, #10b981);
    font-size: 11.5px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 5px 12px; border-radius: var(--nx-radius-card);
}
.nx-pmm-head-divider { margin: 24px 0 28px; }
.nx-pmm-field { margin-bottom: 24px; }
.nx-pmm-field-label { display: block; margin-bottom: 8px; }
.nx-pmm-optional { font-weight: 400; color: var(--nx-muted); text-transform: none; letter-spacing: 0; }
.nx-pmm-igicon-left { padding-left: 16px; padding-right: 0; }
.nx-pmm-card-badges { display: flex; gap: 6px; padding-right: 14px; flex-shrink: 0; }
.nx-pmm-card-badge {
    font-size: 10px; font-weight: 400; color: var(--nx-muted); background: var(--nx-bg);
    border: 1px solid var(--nx-border); border-radius: 4px; padding: 2px 6px; letter-spacing: 0.3px;
}
.nx-cc-type-dot {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--nx-border);
    flex-shrink: 0; position: relative; transition: border-color var(--nx-transition);
}
.nx-cc-type-dot::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--nx-primary);
    opacity: 0; transition: opacity var(--nx-transition);
}
body.nx-theme .nx-cc-type-pill.active .nx-cc-type-dot { border-color: var(--nx-primary); }
body.nx-theme .nx-cc-type-pill.active .nx-cc-type-dot::after { opacity: 1; }
.nx-pmm-cvv-link { font-size: 12.5px; margin-left: 6px; }
.nx-pmm-secnote {
    display: flex; align-items: center; gap: 10px; background: var(--nx-bg); color: var(--nx-muted);
    border-radius: var(--nx-radius-md); padding: 14px 18px; font-size: 13.5px; font-weight: 400; margin-bottom: 24px;
}
.nx-pmm-secnote .material-symbols-rounded { color: var(--nx-muted); flex-shrink: 0; }
.nx-pmm-actions { margin-top: 4px; }
.nx-pmm-title { margin: 0; font-size: var(--nx-font-size-h3); font-weight: 600; color: var(--nx-text); }
.nx-pmm-intro { color: var(--nx-muted); font-size: var(--nx-font-size-md); font-weight: 400; margin-top: 4px; margin-bottom: 0; }
.nx-pmm-alert { border-radius: var(--nx-radius-md); font-weight: 400; margin-bottom: 24px; }
.nx-pmm-pt-8 { padding-top: 8px; }
.nx-pmm-pt-4 { padding-top: 4px; }
.nx-pmm-gap-20 { gap: 20px; }
.nx-pmm-radio { margin: 0; width: 16px; height: 16px; }
.nx-pmm-radio-plain { width: 16px; height: 16px; }
.nx-pmm-igroup { height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); overflow: hidden; display: flex; align-items: center; width: 100%; }
.nx-pmm-iginput { border: none; height: 100%; font-weight: 400; padding: 0 16px; flex-grow: 1; outline: none; background: transparent; color: var(--nx-text); font-size: var(--nx-font-size); }
.nx-pmm-igsuffix { padding-right: 16px; font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 400; }
.nx-pmm-igicon { padding-right: 16px; color: var(--nx-muted); display: flex; align-items: center; }
.nx-pmm-ico-20 { font-size: 20px; }
.nx-pmm-ico-19 { font-size: 19px; }
.nx-pmm-ico-18 { font-size: var(--nx-font-size-h3); }
.nx-pmm-ico-16 { font-size: var(--nx-font-size-xl); }
.nx-pmm-fw-600 { font-weight: 400; }
.nx-pmm-loadtxt { font-weight: 400; color: var(--nx-muted); }
.nx-pmm-input { height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; padding: 0 16px; outline: none; font-size: var(--nx-font-size); transition: border-color var(--nx-transition), box-shadow var(--nx-transition); }
.nx-pmm-input:focus { border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .15); }
.nx-pmm-w-140 { max-width: 140px; }
.nx-pmm-w-100 { max-width: 100px; }
.nx-pmm-w-full { width: 100%; }
.nx-pmm-err { font-size: var(--nx-font-size-sm); color: var(--nx-danger); font-weight: 400; }
.nx-pmm-linkbtn { padding: 0; color: var(--nx-primary-text, var(--nx-primary)); text-decoration: none; font-size: var(--nx-font-size-md); border: none; background: transparent; box-shadow: none; }
.nx-pmm-radiolabel { gap: 8px; font-weight: 400; color: var(--nx-text); cursor: pointer; margin: 0; }
.nx-pmm-mb-12 { margin-bottom: 12px; }
.nx-pmm-mt-20 { margin-top: 20px; }
.nx-pmm-m-0 { margin: 0; }
.nx-pmm-btn-add { height: 38px; border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; font-size: 13px; padding: 0 16px; gap: 6px; }
.nx-pmm-btn-add:hover { color: var(--nx-text); background: var(--nx-bg); }
.nx-pmm-btn-add:focus { outline: none; box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12); }
.nx-pmm-btn-primary { height: 44px; border-radius: var(--nx-radius-md); background: var(--nx-primary); border: none; font-weight: 400; font-size: var(--nx-font-size-md); padding: 0 24px; gap: 8px; color: #fff; }
.nx-pmm-btn-cancel { height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; font-size: var(--nx-font-size-md); padding: 0 24px; }
.nx-pmm-iframe { border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-card-bg); }
.nx-pmm-modal { border-radius: var(--nx-radius-card); border: 1px solid var(--nx-border); background: var(--nx-card-bg); overflow: hidden; }
.nx-pmm-mhead { border-bottom: 1px solid var(--nx-border); padding: 18px 24px; }
.nx-pmm-mtitle { font-size: var(--nx-font-size-xl); font-weight: 600; color: var(--nx-text); }
.nx-pmm-mclose { color: var(--nx-text); opacity: 0.5; }
.nx-pmm-mbody { padding: 24px; }
.nx-pmm-mfoot { border-top: 1px solid var(--nx-border); padding: 18px 24px; gap: 12px; display: flex; justify-content: flex-end; }
.nx-pmm-btn-no { height: 38px; border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); font-weight: 400; font-size: 13px; padding: 0 18px; color: var(--nx-text); background: var(--nx-card-bg); }
.nx-pmm-btn-yes { height: 38px; border-radius: var(--nx-radius-sm); border: none; font-weight: 400; font-size: 13px; padding: 0 18px; color: #fff; background: var(--nx-primary); }

.nx-pmm-card { overflow: hidden; }
body.nx-theme .nx-pmm-body { max-width: 900px; padding: 30px; }
.nx-pmm-head { padding-bottom: 2px; }
.nx-pmm-head-ico { background: color-mix(in srgb, var(--nx-primary) 10%, var(--nx-card-bg)); }
.nx-pmm-head-divider { border-top: 1px solid var(--nx-border); }
.nx-cc-type-group { gap: 10px !important; }
.nx-cc-type-pill {
    display: inline-flex; align-items: center; gap: 9px; min-height: 38px;
    padding: 0 14px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg); color: var(--nx-text); font-size: var(--nx-font-size-md);
    font-weight: 400; cursor: pointer; transition: border-color var(--nx-transition), background-color var(--nx-transition), box-shadow var(--nx-transition);
}
.nx-cc-type-pill:hover { border-color: var(--nx-primary); background: color-mix(in srgb, var(--nx-primary) 4%, var(--nx-card-bg)); }
.nx-cc-type-pill.active { border-color: var(--nx-primary); background: color-mix(in srgb, var(--nx-primary) 5%, var(--nx-card-bg)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nx-primary) 12%, transparent); }
body.nx-theme .nx-cc-type-pill input {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.nx-pmm-field { margin-bottom: 20px; }
.nx-pmm-field-label { color: var(--nx-text); font-size: var(--nx-font-size-sm); font-weight: 400; }
.nx-pmm-igroup, .nx-pmm-input { transition: border-color var(--nx-transition), box-shadow var(--nx-transition), background-color var(--nx-transition); }
.nx-pmm-igroup:focus-within { border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12); }
.nx-pmm-input::placeholder, .nx-pmm-iginput::placeholder { color: color-mix(in srgb, var(--nx-muted) 58%, transparent); font-weight: 400; }
.nx-pmm-input:disabled, .nx-pmm-iginput:disabled { background: var(--nx-bg); }
body.nx-theme .nx-address-radio-label {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 11px 13px;
    border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-card-bg);
    color: var(--nx-muted); font-size: var(--nx-font-size-sm); line-height: 1.45; cursor: pointer;
    transition: border-color var(--nx-transition), background-color var(--nx-transition), color var(--nx-transition);
}
body.nx-theme .nx-address-radio-label + .nx-address-radio-label { margin-top: 8px; }
body.nx-theme .nx-address-radio-label:hover,
body.nx-theme .nx-address-radio-label.active { border-color: var(--nx-primary); background: color-mix(in srgb, var(--nx-primary) 5%, var(--nx-card-bg)); color: var(--nx-text); }
body.nx-theme .nx-address-radio-label input { margin-top: 3px; accent-color: var(--nx-primary); flex: 0 0 auto; }
body.nx-theme .nx-address-radio-label strong { color: var(--nx-text); }
.nx-pmm-secnote { border: 1px solid color-mix(in srgb, var(--nx-border) 70%, transparent); font-size: var(--nx-font-size-sm); font-weight: 400; }
.nx-pmm-btn-primary { box-shadow: 0 5px 12px rgba(var(--nx-primary-rgb), .18); transition: transform var(--nx-transition), box-shadow var(--nx-transition), background-color var(--nx-transition); }
.nx-pmm-btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(var(--nx-primary-rgb), .24); }
.nx-pmm-btn-cancel:hover { color: var(--nx-text); background: var(--nx-bg); }

@media (max-width: 767.98px) {
    body.nx-theme .nx-pmm-body { padding: 22px 18px; }
    .nx-pmm-head { align-items: flex-start !important; }
    .nx-pmm-pci-badge { font-size: 10px; padding: 4px 8px; }
    .nx-pmm-title { font-size: 20px; }
    .nx-pmm-intro { font-size: 12px; line-height: 1.45; }
    .nx-pmm-head-divider { margin: 20px 0 22px; }
    .nx-pmm-field { margin-bottom: 18px; }
    .nx-pmm-actions { align-items: stretch !important; flex-direction: column; }
    .nx-pmm-btn-primary, .nx-pmm-btn-cancel { width: 100%; }
}

/* --- Payment Methods --- */
.nx-pm-intro { color: var(--nx-muted); font-size: var(--nx-font-size-md); font-weight: 400; margin-top: 4px; margin-bottom: 24px; }
.nx-pm-btn-primary { height: 44px; border-radius: var(--nx-radius-md); background: var(--nx-primary); border: none; font-weight: 400; font-size: var(--nx-font-size-md); padding: 0 20px; gap: 8px; color: #fff; }
.nx-pm-btn-outline { height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; font-size: var(--nx-font-size-md); padding: 0 20px; gap: 8px; }
.nx-pm-table { margin-bottom: 0; }
.nx-pm-thead-row { border-bottom: 2px solid var(--nx-border); }
.nx-pm-th { font-size: var(--nx-font-size-xs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; color: var(--nx-muted); border: none; padding: 12px 16px; }
.nx-pm-right { text-align: right; }
.nx-pm-row { border-bottom: 1px solid var(--nx-border); vertical-align: middle; }
.nx-pm-td { padding: 16px; border: none; vertical-align: middle; }
.nx-pm-name { font-weight: 400; color: var(--nx-text); font-size: 14.5px; }
.nx-pm-desc { font-weight: 400; color: var(--nx-muted); font-size: var(--nx-font-size-md); }
.nx-pm-chip { width: 44px; height: 28px; border-radius: 6px; background: linear-gradient(135deg, var(--nx-secondary) 0%, var(--nx-primary) 100%); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 2px 6px rgba(var(--nx-primary-rgb),0.2); }
.nx-pm-pill-active { background: rgba(16,185,129,0.08); color: #10b981; border-radius: var(--nx-radius-card); font-weight: 400; padding: 4px 12px; font-size: var(--nx-font-size-sm); gap: 6px; }
.nx-pm-dot-active { width: 6px; height: 6px; background-color: #10b981; border-radius: 50%; display: inline-block; }
.nx-pm-pill { background: rgba(107,114,128,0.08); color: var(--nx-muted); border-radius: var(--nx-radius-card); font-weight: 400; padding: 4px 12px; font-size: var(--nx-font-size-sm); gap: 6px; }
.nx-pm-dot { width: 6px; height: 6px; background-color: var(--nx-muted); border-radius: 50%; display: inline-block; }
.nx-pm-gap-8 { gap: 8px; }
.nx-pm-gap-6 { gap: 6px; }
.nx-pm-btn-sm { height: 34px; border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; font-size: 12.5px; padding: 0 14px; }
.nx-pm-btn-del { height: 34px; border-radius: var(--nx-radius-sm); border: 1px solid #fee2e2; background: #fffcfc; color: var(--nx-danger-alt); font-weight: 400; font-size: 12.5px; padding: 0 14px; gap: 6px; }
.nx-pm-td-empty { text-align: center; color: var(--nx-muted); font-size: var(--nx-font-size-md); padding: 30px; }
.nx-pm-mbody { padding: 24px; font-size: 14.0px; color: var(--nx-text); font-weight: 400; }
.nx-pm-btn-danger { height: 38px; border-radius: var(--nx-radius-sm); border: none; font-weight: 400; font-size: 13px; padding: 0 18px; color: #fff; background: var(--nx-danger-alt); }

/* --- Contacts Manage --- */
.nx-acm-mb-0 { margin-bottom: 0; }
.nx-acm-checklabel {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 10px;
    font-weight: 400;
    color: var(--nx-text);
    cursor: pointer;
    margin: 0;
}
.nx-acm-check {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    position: static !important;
    flex-shrink: 0;
    order: -1;
}
.nx-acm-modal { border-radius: var(--nx-radius-card); border: 1px solid var(--nx-border); background: var(--nx-card-bg); }
.nx-acm-mbody { padding: 24px; color: var(--nx-text); font-weight: 400; }

/* --- User Management --- */
.nx-aum-success { color: var(--nx-success); }
.nx-aum-note { margin: 12px 0 0; }
.nx-aum-permbox { background: var(--nx-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); padding: 18px; }
.nx-aum-radiogroup { display: flex; flex-wrap: wrap; gap: 24px; }
.nx-aum-radiolabel {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}
.nx-aum-radio {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    position: static !important;
    flex-shrink: 0;
    order: -1;
}
.nx-aum-permlabel {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 12px;
    border-radius: var(--nx-radius-md);
    cursor: pointer;
    transition: background var(--nx-transition);
}
.nx-aum-permlabel:hover { background: var(--nx-card-bg); }
.nx-aum-permlabel + .nx-aum-permlabel { margin-top: 2px; }
.nx-aum-permlabel input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 !important;
    position: static !important;
    flex-shrink: 0;
    order: -1;
}
.nx-aum-permlabel .nx-aum-permtext {
    display: block;
    font-weight: 400;
    color: var(--nx-text);
    line-height: 1.5;
}
.nx-aum-permlabel .nx-muted { font-weight: 400; }

/* --- Invite Accept --- */
.nx-uia-card { max-width: 760px; margin: 0 auto; }
.nx-uia-body { padding: 44px 32px; }
.nx-uia-h2 { color: var(--nx-text); font-weight: 400; }
.nx-uia-danger { color: var(--nx-danger); }
.nx-uia-box { background: var(--nx-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card,16px); padding: 24px; height: 100%; }
.nx-uia-box-title { color: var(--nx-text); font-weight: 600; font-size: 20px; margin-bottom: 18px; }
.nx-uia-progress { height: 10px; border-radius: var(--nx-radius-badge); background: var(--nx-border); }

/* --- Verify Email Page --- */
.nx-uve-card { max-width: 540px; margin: 0 auto; }
.nx-uve-success { color: var(--nx-success); }
.nx-uve-warning { color: var(--nx-warning); }

/* --- Client Details --- */
.nx-cad-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); padding: 24px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-cad-h-100 { height: 100%; }
.nx-cad-cardtitle { margin-bottom: 20px; border-bottom: 1px solid var(--nx-border); padding-bottom: 12px; }
.nx-cad-ico { font-size: 20px; vertical-align: middle; color: var(--nx-primary-text, var(--nx-primary)); }
.nx-cad-label { font-weight: 400; font-size: 13px; color: var(--nx-text); }
.nx-cad-checklabel {
    display: flex !important;
    justify-content: flex-start !important;
    font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-text); gap: 10px; cursor: pointer;
}
.nx-cad-check {
    width: 18px; height: 18px;
    position: static !important;
    margin: 0 !important;
    flex-shrink: 0;
    order: -1;
}
/* Colour comes from the shared input[type="checkbox"] rules. */
.nx-cad-check-lg { width: 20px; height: 20px; }
.nx-cad-mkt { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.nx-cad-mkt-title { margin: 0 0 6px 0; }
.nx-cad-mkt-desc { font-size: 13px; color: var(--nx-muted); margin: 0; }
.nx-cad-flex-center { display: flex; align-items: center; }
.nx-cad-btn-save { border-radius: var(--nx-radius-button, 10px); background: var(--nx-primary); border: none; height: 42px; font-size: 13.5px; font-weight: 400; }
.nx-cad-btn-reset { border-radius: var(--nx-radius-button, 10px); background: var(--nx-border); border: none; color: var(--nx-text); height: 42px; font-size: 13.5px; font-weight: 400; }
.nx-cad-formactions { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.nx-input-icon-wrap { position: relative; }
.nx-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--nx-muted); pointer-events: none;
}
body.nx-theme .nx-input-icon-wrap .nx-input-has-icon,
.nx-input-icon-wrap .nx-input-has-icon { padding-left: 42px; }

/* Account details page: sidebar "Account summary" stat rows + "Related" quick links. */
.nx-cad-summary-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--nx-border);
}
.nx-cad-summary-row:last-child { border-bottom: none; padding-bottom: 0; }
.nx-cad-summary-row:first-child { padding-top: 0; }
.nx-cad-summary-label { font-size: 13px; color: var(--nx-muted); }
.nx-cad-summary-value { font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-text); text-align: right; }
.nx-cad-related-label {
    font-size: 11px; font-weight: 400; letter-spacing: .5px; text-transform: uppercase;
    color: var(--nx-muted); margin-bottom: 10px;
}
.nx-cad-related-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; font-size: var(--nx-font-size-md); font-weight: 400;
    color: var(--nx-primary-text, var(--nx-primary)); text-decoration: none;
}
.nx-cad-related-link:hover { text-decoration: underline; }
.nx-cad-related-link .material-symbols-rounded { font-size: 19px; }

/* --- Verify Email Banner --- */
.nx-vem-banner {
    background: color-mix(in srgb, var(--nx-warning) 10%, var(--nx-card-bg));
    border: 1.5px solid color-mix(in srgb, var(--nx-warning) 28%, var(--nx-border));
    border-radius: var(--nx-radius-card);
    padding: 14px 20px;
    margin-bottom: 28px;
    width: 100%;
    gap: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (min-width: 768px) {
    .nx-vem-banner {
        flex-direction: row;
        align-items: center;
    }
}
.nx-vem-left { gap: 16px; min-width: 0; flex: 1; }
.nx-vem-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--nx-radius-md);
    background: color-mix(in srgb, var(--nx-warning) 18%, var(--nx-card-bg));
    color: var(--nx-warning);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nx-vem-labels { text-align: left; min-width: 0; }
.nx-vem-title { margin: 0 0 2px; font-size: var(--nx-font-size); font-weight: 600; color: var(--nx-text); }
.nx-vem-desc { margin: 0; font-size: 12.5px; color: var(--nx-muted); line-height: 1.4; }
.nx-vem-desc strong { color: var(--nx-text); }
.nx-vem-right { gap: 16px; flex-shrink: 0; }
.nx-vem-btn-resend { gap: 8px; font-weight: 400; font-size: 13px; padding: 8px 16px; border-radius: var(--nx-radius-sm); background: var(--nx-primary); border: none; color: #fff; box-shadow: 0 4px 12px rgba(var(--nx-primary-rgb), 0.25); cursor: pointer; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); }
.nx-vem-btn-resend:hover { background: var(--nx-primary-hover); color: #fff; }
.nx-vem-send-ico { font-size: var(--nx-font-size-lg); transform: rotate(-25deg); margin-top: -2px; }
.nx-vem-close { border: none; background: transparent; color: var(--nx-muted); font-size: 20px; line-height: 1; cursor: pointer; transition: color var(--nx-transition); }
.nx-vem-close:hover { color: var(--nx-danger); }

/* --- Product Details --- */
.nx-pd-backlink.nx-pd-backlink.nx-pd-backlink { text-decoration: none; gap: 4px; }
.nx-pd-ic-16.nx-pd-ic-16.nx-pd-ic-16 { font-size: var(--nx-font-size-xl); vertical-align: middle; }
.nx-pd-ic-19.nx-pd-ic-19.nx-pd-ic-19 { font-size: 19px; }
.nx-pd-alert-danger.nx-pd-alert-danger.nx-pd-alert-danger { border-radius: var(--nx-radius-md); font-weight: 400; }
.nx-pd-gap-14.nx-pd-gap-14.nx-pd-gap-14 { gap: 14px; }
.nx-pd-gap-16.nx-pd-gap-16.nx-pd-gap-16 { gap: 16px; }
.nx-pd-banner.nx-pd-banner.nx-pd-banner { background: linear-gradient(135deg, var(--nx-primary) 0%, var(--nx-secondary) 100%); border-radius: var(--nx-radius-card); padding: 28px 32px; color: #fff; box-shadow: 0 10px 30px rgba(var(--nx-primary-rgb),0.18); margin-bottom: 24px; position: relative; overflow: hidden; }
.nx-pd-banner-icon.nx-pd-banner-icon.nx-pd-banner-icon { width: 48px; height: 48px; border-radius: var(--nx-radius-md); background: rgba(255,255,255,0.12); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--nx-font-size-h2); }
.nx-pd-banner-eyebrow.nx-pd-banner-eyebrow.nx-pd-banner-eyebrow { font-size: var(--nx-font-size-xs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255,255,255,0.65); }
.nx-pd-banner-title.nx-pd-banner-title.nx-pd-banner-title { margin: 0; font-size: var(--nx-font-size-h2); font-weight: 600; color: #fff; letter-spacing: -0.5px; }
.nx-pd-banner-domain.nx-pd-banner-domain.nx-pd-banner-domain { color: rgba(255,255,255,0.95); font-weight: 400; font-size: var(--nx-font-size); text-decoration: none; }
.nx-pd-status-pill.nx-pd-status-pill.nx-pd-status-pill { background: rgba(255,255,255,0.15); color: #fff; border-radius: var(--nx-radius-card); font-weight: 400; padding: 6px 16px; font-size: 13px; gap: 8px; }
.nx-pd-status-dot.nx-pd-status-dot.nx-pd-status-dot { width: 8px; height: 8px; background-color: #4ade80; border-radius: 50%; display: inline-block; }
.nx-pd-banner-row.nx-pd-banner-row.nx-pd-banner-row { border-top: 1px solid rgba(255,255,255,0.15); gap: 16px 0; }
.nx-pd-banner-cell-label.nx-pd-banner-cell-label.nx-pd-banner-cell-label { font-size: var(--nx-font-size-sm); color: rgba(255,255,255,0.7); font-weight: 400; }
.nx-pd-banner-cell-value.nx-pd-banner-cell-value.nx-pd-banner-cell-value { font-size: var(--nx-font-size-xl); font-weight: 400; color: #fff; margin-top: 2px; }
.nx-pd-card.nx-pd-card.nx-pd-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04); margin-bottom: 24px; }
.nx-pd-card-head.nx-pd-card-head.nx-pd-card-head { padding: 20px 24px; border-bottom: 1px solid var(--nx-border); }
.nx-pd-card-title.nx-pd-card-title.nx-pd-card-title { margin: 0; font-size: var(--nx-font-size-xl); font-weight: var(--nx-weight-card-title); color: var(--nx-text); }
.nx-pd-cell.nx-pd-cell.nx-pd-cell { padding: 20px 24px; }
.nx-pd-cell-bb.nx-pd-cell-bb.nx-pd-cell-bb { border-bottom: 1px solid var(--nx-border); }
.nx-pd-cell-br.nx-pd-cell-br.nx-pd-cell-br { border-right: 1px solid var(--nx-border); }
.nx-pd-cell-label.nx-pd-cell-label.nx-pd-cell-label { letter-spacing: 0.5px; font-size: var(--nx-font-size-xs); }
.nx-pd-cell-value.nx-pd-cell-value.nx-pd-cell-value { color: var(--nx-text); font-size: 14.5px; margin-top: 4px; }
.nx-pd-card-pad24.nx-pd-card-pad24.nx-pd-card-pad24 { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); padding: 24px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-pd-cf-title.nx-pd-cf-title.nx-pd-cf-title { margin-top: 0; margin-bottom: 18px; font-size: var(--nx-font-size-xl); font-weight: 600; color: var(--nx-text); }
.nx-pd-row-gap16.nx-pd-row-gap16.nx-pd-row-gap16 { gap: 16px 0; }
.nx-pd-cf-value.nx-pd-cf-value.nx-pd-cf-value { color: var(--nx-text); font-size: 14.5px; margin-top: 2px; }
.nx-pd-actions-card.nx-pd-actions-card.nx-pd-actions-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); padding: 20px; box-shadow: 0 1px 2px rgba(16,24,40,.04); display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.nx-pd-action-btn.nx-pd-action-btn.nx-pd-action-btn { border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-size: var(--nx-font-size-md); gap: 8px; height: 42px; }
.nx-pd-cancel-btn.nx-pd-cancel-btn.nx-pd-cancel-btn { border-radius: var(--nx-radius-md); border: 1px solid #fee2e2; background: #fffcfc; color: var(--nx-danger-alt); font-size: var(--nx-font-size-md); gap: 8px; height: 42px; }
.nx-pd-ic-cancel.nx-pd-ic-cancel.nx-pd-ic-cancel { font-size: 19px; color: var(--nx-danger, #f04438); }
.nx-pd-side.nx-pd-side.nx-pd-side { margin-bottom: 26px; }
.nx-pd-side-head.nx-pd-side-head.nx-pd-side-head { font-size: var(--nx-font-size-xl); font-weight: 400; color: var(--nx-text); margin-bottom: 10px; letter-spacing: -.2px; }
.nx-pd-side-card.nx-pd-side-card.nx-pd-side-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); padding: 18px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-pd-side-card .nx-pd-side-head { font-size: var(--nx-font-size-md); font-weight: 400; }
.nx-pd-side-body.nx-pd-side-body.nx-pd-side-body { font-size: var(--nx-font-size-md); color: var(--nx-muted); line-height: 1.55; }
.nx-pd-side-body img { max-width: 150px; width: 100%; height: auto; display: block; margin: 0 auto 12px; }
.nx-pd-side-body p { margin-bottom: 8px; }
.nx-pd-side-body a { color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; text-decoration: none; }
.nx-pd-side-body a:hover { color: var(--nx-primary-hover); text-decoration: none; }
.nx-pd-side-body .btn { display: inline-flex; align-items: center; gap: 6px; }
.nx-pd-side-body > :last-child { margin-bottom: 0; }
.nx-pd-hookout.nx-pd-hookout.nx-pd-hookout { margin-bottom: 24px; }
.nx-pd-hookout img { max-width: 100%; height: auto; }
.nx-pd-sidelist.nx-pd-sidelist.nx-pd-sidelist { display: flex; flex-direction: column; gap: 2px; }
.nx-pd-sidelink.nx-pd-sidelink.nx-pd-sidelink { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-radius: var(--nx-radius-md); font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-primary-text, var(--nx-primary)); text-decoration: none; transition: background-color var(--nx-transition), color var(--nx-transition); }
.nx-pd-sidelink-ico.nx-pd-sidelink-ico.nx-pd-sidelink-ico { width: 18px; flex: 0 0 18px; text-align: center; font-size: 15px; }
.nx-pd-sidelink-label.nx-pd-sidelink-label.nx-pd-sidelink-label { flex: 1 1 auto; min-width: 0; }
.nx-pd-sidelink-badge.nx-pd-sidelink-badge.nx-pd-sidelink-badge { flex: 0 0 auto; font-size: var(--nx-font-size-xs); font-weight: 400; padding: 2px 8px; border-radius: var(--nx-radius-card); background: rgba(var(--nx-primary-rgb), .12); color: var(--nx-primary-text, var(--nx-primary)); }
.nx-pd-sidelink.nx-pd-sidelink.nx-pd-sidelink:hover { background: rgba(var(--nx-primary-rgb), .06); color: var(--nx-primary-text, var(--nx-primary)); text-decoration: none; }
.nx-pd-sidelink.nx-pd-sidelink.nx-pd-sidelink.active { background: rgba(var(--nx-primary-rgb), .10); color: var(--nx-primary-text, var(--nx-primary)); }
.nx-pd-sidelink-plain.nx-pd-sidelink-plain.nx-pd-sidelink-plain { color: var(--nx-muted); font-weight: 400; }
.nx-pd-sidelink-danger.nx-pd-sidelink-danger.nx-pd-sidelink-danger { color: var(--nx-danger); }
.nx-pd-sidelink-danger.nx-pd-sidelink-danger.nx-pd-sidelink-danger:hover { background: color-mix(in srgb, var(--nx-danger) 8%, transparent); color: var(--nx-danger); }
.nx-pd-sidelink.disabled.disabled { pointer-events: none; opacity: .5; }
.nx-pd-toprow.nx-pd-toprow.nx-pd-toprow { margin-bottom: 0; }
.nx-pd-tabwrap.nx-pd-tabwrap.nx-pd-tabwrap { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04); margin-bottom: 24px; }
.nx-pd-tabnav.nx-pd-tabnav.nx-pd-tabnav { border: 0; border-bottom: 1px solid var(--nx-border); background: rgba(var(--nx-primary-rgb), .03); padding: 0 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nx-pd-tabnav::-webkit-scrollbar { display: none; }
.nx-pd-tablink.nx-pd-tablink.nx-pd-tablink { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 16px 16px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-muted); text-decoration: none; transition: color var(--nx-transition), border-color var(--nx-transition); }
.nx-pd-tablink .material-symbols-rounded { font-size: 19px; }
.nx-pd-tablink.nx-pd-tablink.nx-pd-tablink:hover { background: transparent !important; color: var(--nx-text); text-decoration: none; }
.nx-pd-tablink.nx-pd-tablink.nx-pd-tablink.active { background: transparent !important; color: var(--nx-primary-text, var(--nx-primary)); border: 0 !important; border-bottom: 2px solid var(--nx-primary) !important; }
.nx-pd-pane-pad.nx-pd-pane-pad.nx-pd-pane-pad { padding: 24px; }
.nx-pd-hero.nx-pd-hero.nx-pd-hero { position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg,
    color-mix(in srgb, var(--nx-primary) 38%, #000) 0%,
    color-mix(in srgb, var(--nx-primary) 62%, #000) 48%,
    color-mix(in srgb, var(--nx-primary) 80%, #000) 100%); border-radius: var(--nx-radius-card); color: #fff; box-shadow: 0 10px 30px rgba(var(--nx-primary-rgb), .18); }
.nx-pd-hero-body.nx-pd-hero-body.nx-pd-hero-body { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 24px; }
.nx-pd-hero-icon.nx-pd-hero-icon.nx-pd-hero-icon { width: 48px; height: 48px; border-radius: var(--nx-radius-md); background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.nx-pd-hero-icon .material-symbols-rounded { font-size: 26px; color: #fff; }
.nx-pd-hero-eyebrow.nx-pd-hero-eyebrow.nx-pd-hero-eyebrow { font-size: var(--nx-font-size-xs); font-weight: 400; text-transform: uppercase; letter-spacing: .9px; color: rgba(255,255,255,.7); }
.nx-pd-hero-title.nx-pd-hero-title.nx-pd-hero-title { margin: 6px 0 0; font-size: var(--nx-font-size-h2); font-weight: 600; letter-spacing: -.5px; color: #fff; }
.nx-pd-hero-foot.nx-pd-hero-foot.nx-pd-hero-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-top: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.08); font-size: var(--nx-font-size-sm); font-weight: 400; color: #fff; text-decoration: none; }
.nx-pd-hero-foot .material-symbols-rounded { font-size: 15px; }
.nx-pd-hero-foot.nx-pd-hero-foot.nx-pd-hero-foot:hover { color: #fff; text-decoration: none; background: rgba(0,0,0,.14); }
.nx-pd-stats.nx-pd-stats.nx-pd-stats { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); padding: 8px 22px; height: 100%; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-pd-stat.nx-pd-stat.nx-pd-stat { padding: 12px 0; border-bottom: 1px solid var(--nx-border); }
.nx-pd-stat.nx-pd-stat.nx-pd-stat:last-child { border-bottom: 0; }
.nx-pd-stat-label.nx-pd-stat-label.nx-pd-stat-label { font-size: var(--nx-font-size-sm); font-weight: 400; color: var(--nx-muted); }
.nx-pd-stat-value.nx-pd-stat-value.nx-pd-stat-value { font-size: 15px; font-weight: 400; color: var(--nx-text); margin-top: 3px; }
.nx-pd-stat-status.nx-pd-stat-status.nx-pd-stat-status { display: flex; align-items: center; gap: 8px; color: var(--nx-success); }
.nx-pd-stat-status.nx-pd-status-suspended { color: var(--nx-warning); }
.nx-pd-stat-status.nx-pd-status-terminated,
.nx-pd-stat-status.nx-pd-status-cancelled,
.nx-pd-stat-status.nx-pd-status-fraud { color: var(--nx-danger); }
.nx-pd-stat-status.nx-pd-status-pending { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-pd-stat-status .nx-pd-status-dot { background-color: currentColor; }
.nx-pd-status-suspended.nx-pd-status-suspended .nx-pd-status-dot { background-color: #f59e0b; }
.nx-pd-status-terminated.nx-pd-status-terminated .nx-pd-status-dot,
.nx-pd-status-cancelled.nx-pd-status-cancelled .nx-pd-status-dot,
.nx-pd-status-fraud.nx-pd-status-fraud .nx-pd-status-dot { background-color: var(--nx-danger, #f04438); }
.nx-pd-status-pending.nx-pd-status-pending .nx-pd-status-dot { background-color: #93c5fd; }
.nx-pd-pw.nx-pd-pw.nx-pd-pw { gap: 8px; }
.nx-pd-pw-value.nx-pd-pw-value.nx-pd-pw-value { word-break: break-all; }
.nx-pd-pw-toggle.nx-pd-pw-toggle.nx-pd-pw-toggle { border: 0; background: transparent; padding: 0; line-height: 0; color: var(--nx-muted); cursor: pointer; outline: none; }
.nx-pd-pw-toggle.nx-pd-pw-toggle.nx-pd-pw-toggle:hover { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-pd-pw-toggle .material-symbols-rounded { font-size: 18px; position: relative; }
/* Revealed: the eye is struck through (the subset font has no visibility_off glyph). */
.nx-pd-pw.is-shown .nx-pd-pw-toggle .material-symbols-rounded::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 20px; margin: -10px 0 0 -1px; background: currentColor; border-radius: 1px; transform: rotate(-45deg); box-shadow: 0 0 0 1px var(--nx-card-bg, #fff); }
.nx-pd-module.nx-pd-module.nx-pd-module { padding: 24px; color: var(--nx-text); }
.nx-pd-module .btn { margin: 4px; }
.nx-pd-optlist.nx-pd-optlist.nx-pd-optlist { padding: 6px 0; }
.nx-pd-optrow.nx-pd-optrow.nx-pd-optrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--nx-border); }
.nx-pd-optrow.nx-pd-optrow.nx-pd-optrow:last-child { border-bottom: 0; }
.nx-pd-optname.nx-pd-optname.nx-pd-optname { font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-muted); }
.nx-pd-optvalue.nx-pd-optvalue.nx-pd-optvalue { font-size: 14.5px; font-weight: 400; color: var(--nx-text); text-align: right; }
.nx-pd-addons.nx-pd-addons.nx-pd-addons { display: flex; flex-direction: column; }
.nx-pd-addon.nx-pd-addon.nx-pd-addon { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--nx-border); flex-wrap: wrap; }
.nx-pd-addon.nx-pd-addon.nx-pd-addon:last-child { border-bottom: 0; }
.nx-pd-addon-link.nx-pd-addon-link.nx-pd-addon-link { text-decoration: none; color: inherit; transition: background-color var(--nx-transition); }
.nx-pd-addon-link.nx-pd-addon-link.nx-pd-addon-link:hover { background: rgba(var(--nx-primary-rgb), .04); text-decoration: none; }
.nx-pd-addon-main.nx-pd-addon-main.nx-pd-addon-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nx-pd-addon-ico.nx-pd-addon-ico.nx-pd-addon-ico { width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--nx-primary) 12%, transparent); color: var(--nx-primary-text, var(--nx-primary)); display: inline-flex; align-items: center; justify-content: center; }
.nx-pd-addon-ico .material-symbols-rounded { font-size: 21px; }
.nx-pd-addon-name.nx-pd-addon-name.nx-pd-addon-name { font-size: 14.5px; font-weight: 400; color: var(--nx-text); }
.nx-pd-addon-meta.nx-pd-addon-meta.nx-pd-addon-meta { font-size: var(--nx-font-size-sm); color: var(--nx-muted); margin-top: 2px; }
.nx-pd-addon-side.nx-pd-addon-side.nx-pd-addon-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nx-pd-addon-status.nx-pd-addon-status.nx-pd-addon-status { font-size: var(--nx-font-size-xs); font-weight: 400; text-transform: uppercase; letter-spacing: .5px; padding: 5px 12px; border-radius: var(--nx-radius-card); background: color-mix(in srgb, var(--nx-success) 14%, transparent); color: var(--nx-success); }
.nx-pd-addon-status.nx-pd-status-suspended { background: color-mix(in srgb, var(--nx-warning) 16%, transparent); color: var(--nx-warning); }
.nx-pd-addon-status.nx-pd-status-terminated,
.nx-pd-addon-status.nx-pd-status-cancelled { background: color-mix(in srgb, var(--nx-danger) 14%, transparent); color: var(--nx-danger); }
.nx-pd-addon-status.nx-pd-status-pending { background: color-mix(in srgb, var(--nx-primary) 12%, transparent); color: var(--nx-primary-text, var(--nx-primary)); }
.nx-pd-form-label.nx-pd-form-label.nx-pd-form-label { display: block; font-size: var(--nx-font-size-sm); font-weight: 400; color: var(--nx-muted); margin-bottom: 6px; }

/* --- Products --- */
.nx-prods-stat-row.nx-prods-stat-row.nx-prods-stat-row { gap: 0; margin-left: -8px; margin-right: -8px; }
.nx-prods-tile.nx-prods-tile.nx-prods-tile { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); padding: 22px; box-shadow: 0 1px 2px rgba(16,24,40,.04); height: 100%; }
.nx-prods-tile-label.nx-prods-tile-label.nx-prods-tile-label {
    font-size: 11px;
    font-weight: 400;
    color: var(--nx-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}
.nx-prods-tile-value.nx-prods-tile-value.nx-prods-tile-value { font-size: 27px; font-weight: 400; letter-spacing: -1px; margin-top: 8px; }
.nx-prods-green.nx-prods-green.nx-prods-green { color: var(--nx-success-alt); }
.nx-prods-red.nx-prods-red.nx-prods-red { color: var(--nx-danger, #f04438); }
.nx-prods-orange.nx-prods-orange.nx-prods-orange { color: var(--nx-warning-alt); }
.nx-prods-primary.nx-prods-primary.nx-prods-primary { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-prods-gap-8.nx-prods-gap-8.nx-prods-gap-8 { gap: 8px; }
.nx-prods-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.nx-prods-tabs-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.nx-prods-tab.nx-prods-tab.nx-prods-tab { border-radius: var(--nx-radius-md); font-size: 13px; font-weight: 400; padding: 7px 14px; height: 38px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--nx-transition); border: 1px solid transparent; }
.nx-prods-tab-active.nx-prods-tab-active.nx-prods-tab-active { background: var(--nx-primary); color: #fff; border-color: var(--nx-primary); box-shadow: 0 2px 6px rgba(var(--nx-primary-rgb), 0.2); }
.nx-prods-tab-inactive.nx-prods-tab-inactive.nx-prods-tab-inactive { background: var(--nx-card-bg); border-color: var(--nx-border); color: var(--nx-text); }
.nx-prods-tab-inactive:hover { border-color: var(--nx-primary); color: var(--nx-primary-text, var(--nx-primary)); }
.nx-prods-ic-18.nx-prods-ic-18.nx-prods-ic-18 { font-size: var(--nx-font-size-h3); vertical-align: middle; }
.nx-prods-table-card.nx-prods-table-card.nx-prods-table-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-prods-va-middle.nx-prods-va-middle.nx-prods-va-middle { vertical-align: middle; }
.nx-prods-thead-row.nx-prods-thead-row.nx-prods-thead-row { border-bottom: 1px solid var(--nx-border); }
.nx-prods-row.nx-prods-row.nx-prods-row { border-bottom: 1px solid var(--nx-border); vertical-align: middle; }
.nx-prods-prod-icon.nx-prods-prod-icon.nx-prods-prod-icon { width: 40px; height: 40px; border-radius: var(--nx-radius-md); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.nx-prods-flex-col.nx-prods-flex-col.nx-prods-flex-col { display: flex; flex-direction: column; }
.nx-prods-domain-link.nx-prods-domain-link.nx-prods-domain-link { font-size: var(--nx-font-size-sm); color: var(--nx-muted); text-decoration: none; font-weight: 400; margin-top: 1px; }
.nx-prods-cycle.nx-prods-cycle.nx-prods-cycle { font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 400; }
.nx-prods-overdue.nx-prods-overdue.nx-prods-overdue { font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-danger, #f04438); }
.nx-prods-duedate.nx-prods-duedate.nx-prods-duedate { font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-text); }
.nx-prods-manage-btn.nx-prods-manage-btn.nx-prods-manage-btn { border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-size: 13px; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); }
.nx-prods-empty-cell.nx-prods-empty-cell.nx-prods-empty-cell { border: none; color: var(--nx-muted); font-size: var(--nx-font-size); font-weight: 400; }
.nx-prods-empty-icon.nx-prods-empty-icon.nx-prods-empty-icon { font-size: 40px; color: var(--nx-border); margin-bottom: 8px; display: block; }
.nx-prods-page-link.nx-prods-page-link.nx-prods-page-link.nx-prods-page-link { border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; padding: 6px 12px; }
.nx-prods-page-info.nx-prods-page-info.nx-prods-page-info.nx-prods-page-info { border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-muted); font-weight: 400; padding: 6px 12px; }

@media (max-width: 767.98px) {
    .nx-prods-filter-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .nx-prods-tabs-bar { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
    .nx-prods-tab.nx-prods-tab.nx-prods-tab { flex: 1 1 auto; min-width: fit-content; padding: 6px 10px; font-size: 12.5px; height: 36px; text-align: center; justify-content: center; }
}

/* --- Upgrade --- */
.nx-upg-gap-12.nx-upg-gap-12.nx-upg-gap-12 { gap: 12px; }
.nx-upg-btn-muted.nx-upg-btn-muted.nx-upg-btn-muted.nx-upg-btn-muted, .nx-upg-btn-muted.nx-upg-btn-muted.nx-upg-btn-muted.nx-upg-btn-muted:hover, .nx-upg-btn-muted.nx-upg-btn-muted.nx-upg-btn-muted.nx-upg-btn-muted:focus { border-radius: var(--nx-radius-md); background-color: var(--nx-border); border: none; }
.nx-upg-btn-primary.nx-upg-btn-primary.nx-upg-btn-primary.nx-upg-btn-primary, .nx-upg-btn-primary.nx-upg-btn-primary.nx-upg-btn-primary.nx-upg-btn-primary:hover, .nx-upg-btn-primary.nx-upg-btn-primary.nx-upg-btn-primary.nx-upg-btn-primary:focus { border-radius: var(--nx-radius-md); background-color: var(--nx-primary); border: none; }
.nx-upg-info-alert.nx-upg-info-alert.nx-upg-info-alert { border-radius: var(--nx-radius-md); font-weight: 400; color: var(--nx-text); background: rgba(var(--nx-primary-rgb), 0.08); border: 1px solid var(--nx-border); gap: 12px; }
.nx-upg-ic-primary-20.nx-upg-ic-primary-20.nx-upg-ic-primary-20 { color: var(--nx-primary-text, var(--nx-primary)); font-size: 20px; }
.nx-upg-row-gap24.nx-upg-row-gap24.nx-upg-row-gap24 { gap: 24px 0; }
.nx-upg-pkg-card.nx-upg-pkg-card.nx-upg-pkg-card { background: var(--nx-card-bg); border: 2px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); padding: 28px 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.02); height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.nx-upg-pkg-card-rec.nx-upg-pkg-card-rec.nx-upg-pkg-card-rec { border-color: var(--nx-primary); }
.nx-upg-rec-badge.nx-upg-rec-badge.nx-upg-rec-badge { position: absolute; top: -14px; right: 24px; border-radius: var(--nx-radius-card); font-size: var(--nx-font-size-xs); background: var(--nx-primary); color: #fff; letter-spacing: 0.5px; text-transform: uppercase; }
.nx-upg-pkg-name.nx-upg-pkg-name.nx-upg-pkg-name { margin-top: 0; margin-bottom: 8px; font-size: var(--nx-font-size-h3); font-weight: 400; color: var(--nx-text); }
.nx-upg-price-26.nx-upg-price-26.nx-upg-price-26 { font-size: 26px; font-weight: 400; color: var(--nx-text); }
.nx-upg-price-28.nx-upg-price-28.nx-upg-price-28 { font-size: 28px; font-weight: 400; color: var(--nx-text); }
.nx-upg-price-20.nx-upg-price-20.nx-upg-price-20 { font-size: 20px; font-weight: 400; color: var(--nx-text); }
.nx-upg-price-term.nx-upg-price-term.nx-upg-price-term { font-size: 13px; color: var(--nx-muted); font-weight: 400; margin-left: 4px; }
.nx-upg-price-term-lg.nx-upg-price-term-lg.nx-upg-price-term-lg { font-size: var(--nx-font-size-md); color: var(--nx-muted); font-weight: 400; margin-left: 4px; }
.nx-upg-desc.nx-upg-desc.nx-upg-desc { font-size: var(--nx-font-size-md); color: var(--nx-muted); font-weight: 400; line-height: 1.7; margin-bottom: 24px; }
.nx-upg-desc-list.nx-upg-desc-list.nx-upg-desc-list { display: flex; flex-direction: column; gap: 10px; }
.nx-upg-check.nx-upg-check.nx-upg-check { color: var(--nx-success-alt); font-size: var(--nx-font-size-xl); font-variation-settings: 'FILL' 1; }
.nx-upg-check-mt.nx-upg-check-mt.nx-upg-check-mt { color: var(--nx-success-alt); font-size: var(--nx-font-size-xl); font-variation-settings: 'FILL' 1; margin-top: 2px; }
.nx-upg-cycle-select.nx-upg-cycle-select.nx-upg-cycle-select, .nx-upg-cycle-select.nx-upg-cycle-select.nx-upg-cycle-select:focus { border-radius: var(--nx-radius-md); border-color: var(--nx-border); font-size: var(--nx-font-size-md); height: 38px; }
.nx-upg-btn-current.nx-upg-btn-current.nx-upg-btn-current { border-radius: var(--nx-radius-md); background: var(--nx-border); color: var(--nx-muted); border: none; font-size: var(--nx-font-size-md); }
.nx-upg-choose-btn.nx-upg-choose-btn.nx-upg-choose-btn { border-radius: var(--nx-radius-md); font-size: var(--nx-font-size-md); }
.nx-upg-choose-btn-rec.nx-upg-choose-btn-rec.nx-upg-choose-btn-rec.nx-upg-choose-btn-rec, .nx-upg-choose-btn-rec.nx-upg-choose-btn-rec.nx-upg-choose-btn-rec.nx-upg-choose-btn-rec:hover, .nx-upg-choose-btn-rec.nx-upg-choose-btn-rec.nx-upg-choose-btn-rec.nx-upg-choose-btn-rec:focus { background: var(--nx-primary); border: none; color: #fff; }
.nx-upg-choose-btn-def.nx-upg-choose-btn-def.nx-upg-choose-btn-def.nx-upg-choose-btn-def, .nx-upg-choose-btn-def.nx-upg-choose-btn-def.nx-upg-choose-btn-def.nx-upg-choose-btn-def:hover, .nx-upg-choose-btn-def.nx-upg-choose-btn-def.nx-upg-choose-btn-def.nx-upg-choose-btn-def:focus { border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); }
.nx-upg-tr-b.nx-upg-tr-b.nx-upg-tr-b { border-bottom: 1px solid var(--nx-border); }
.nx-upg-th.nx-upg-th.nx-upg-th { border: none; color: var(--nx-muted); font-size: var(--nx-font-size-sm); font-weight: 400; text-transform: uppercase; }
.nx-upg-td-name.nx-upg-td-name.nx-upg-td-name { border: none; font-weight: 400; color: var(--nx-text); vertical-align: middle; }
.nx-upg-td-current.nx-upg-td-current.nx-upg-td-current { border: none; font-weight: 400; color: var(--nx-muted); vertical-align: middle; }
.nx-upg-td-plain.nx-upg-td-plain.nx-upg-td-plain { border: none; vertical-align: middle; }
.nx-upg-r-8.nx-upg-r-8.nx-upg-r-8 { border-radius: var(--nx-radius-sm); }
.nx-upg-switch-lbl.nx-upg-switch-lbl.nx-upg-switch-lbl { margin: 0; vertical-align: middle; }
.nx-upg-qty-input.nx-upg-qty-input.nx-upg-qty-input { border-radius: var(--nx-radius-sm); max-width: 120px; }
.nx-upg-btn-continue.nx-upg-btn-continue.nx-upg-btn-continue.nx-upg-btn-continue, .nx-upg-btn-continue.nx-upg-btn-continue.nx-upg-btn-continue.nx-upg-btn-continue:hover, .nx-upg-btn-continue.nx-upg-btn-continue.nx-upg-btn-continue.nx-upg-btn-continue:focus { border-radius: var(--nx-radius-md); background: var(--nx-primary); border: none; font-size: var(--nx-font-size); }

/* --- Upgrade Configure --- */
.nx-upc-h4.nx-upc-h4.nx-upc-h4 { color: var(--nx-text); font-weight: 400; margin-bottom: 16px; }
.nx-upc-h4-lg.nx-upc-h4-lg.nx-upc-h4-lg { color: var(--nx-text); font-weight: 400; margin-bottom: 18px; }
.nx-upc-h5.nx-upc-h5.nx-upc-h5 { color: var(--nx-text); font-weight: 400; margin: 0; }
.nx-upc-small.nx-upc-small.nx-upc-small { color: var(--nx-muted); font-weight: 400; }
.nx-upc-prod-card.nx-upc-prod-card.nx-upc-prod-card { display: flex; flex-direction: column; position: relative; }
.nx-upc-prod-name.nx-upc-prod-name.nx-upc-prod-name { color: var(--nx-text); font-weight: 400; font-size: var(--nx-font-size-h3); }
.nx-upc-prod-desc.nx-upc-prod-desc.nx-upc-prod-desc { color: var(--nx-muted); font-size: var(--nx-font-size-md); }
.nx-upc-grow.nx-upc-grow.nx-upc-grow { flex-grow: 1; }
.nx-upc-feature.nx-upc-feature.nx-upc-feature { border-bottom: 1px solid var(--nx-border); font-size: var(--nx-font-size-md); color: var(--nx-text); }
.nx-upc-ic-yes.nx-upc-ic-yes.nx-upc-ic-yes { color: var(--nx-success); }
.nx-upc-ic-no.nx-upc-ic-no.nx-upc-ic-no { color: var(--nx-muted); }
.nx-upc-qty-lbl.nx-upc-qty-lbl.nx-upc-qty-lbl { color: var(--nx-muted); font-size: 13px; }
.nx-upc-qty-input.nx-upc-qty-input.nx-upc-qty-input { width: 100px; }

/* --- Cancel Request --- */
.nx-cr-r-10.nx-cr-r-10.nx-cr-r-10 { border-radius: var(--nx-radius-md); }
.nx-cr-warn-banner.nx-cr-warn-banner.nx-cr-warn-banner { border-radius: var(--nx-radius-md); font-weight: 400; color: #9f1239; background: #fff1f2; border: 1px solid #fecdd3; gap: 12px; }
.nx-cr-warn-icon.nx-cr-warn-icon.nx-cr-warn-icon { color: #f43f5e; font-size: var(--nx-font-size-h2); }
.nx-cr-form-card.nx-cr-form-card.nx-cr-form-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); padding: 28px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-cr-label.nx-cr-label.nx-cr-label { font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-text); margin-bottom: 8px; display: block; }
.nx-cr-label-lg.nx-cr-label-lg.nx-cr-label-lg { font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-text); margin-bottom: 12px; display: block; }
.nx-cr-type-card.nx-cr-type-card.nx-cr-type-card { border-radius: var(--nx-radius-md); cursor: pointer; display: flex; align-items: center; gap: 14px; transition: border var(--nx-transition); }
.nx-cr-type-selected.nx-cr-type-selected.nx-cr-type-selected { border: 2px solid var(--nx-primary); background: rgba(var(--nx-primary-rgb),0.02); }
.nx-cr-type-unselected.nx-cr-type-unselected.nx-cr-type-unselected { border: 1px solid var(--nx-border); }
.nx-cr-radio.nx-cr-radio.nx-cr-radio { width: 18px; height: 18px; cursor: pointer; }
.nx-cr-opt-title.nx-cr-opt-title.nx-cr-opt-title { font-size: var(--nx-font-size); font-weight: 600; color: var(--nx-text); }
.nx-cr-opt-sub.nx-cr-opt-sub.nx-cr-opt-sub { font-size: 12.5px; color: var(--nx-muted); font-weight: 400; margin-top: 2px; }
.nx-cr-select.nx-cr-select.nx-cr-select, .nx-cr-select.nx-cr-select.nx-cr-select:focus { border-radius: var(--nx-radius-md); font-size: var(--nx-font-size); height: 42px; border-color: var(--nx-border); color: var(--nx-text); }
.nx-cr-textarea.nx-cr-textarea.nx-cr-textarea, .nx-cr-textarea.nx-cr-textarea.nx-cr-textarea:focus { border-radius: var(--nx-radius-md); font-size: var(--nx-font-size); border-color: var(--nx-border); color: var(--nx-text); }
.nx-cr-domain-alert.nx-cr-domain-alert.nx-cr-domain-alert { border-radius: var(--nx-radius-md); background: #fffbeb; border: 1px solid #fef3c7; color: #b45309; }
.nx-cr-domain-title.nx-cr-domain-title.nx-cr-domain-title { font-size: var(--nx-font-size); margin-top: 0; margin-bottom: 6px; }
.nx-cr-domain-text.nx-cr-domain-text.nx-cr-domain-text { font-size: 13px; margin-bottom: 12px; }
.nx-cr-check-label.nx-cr-check-label.nx-cr-check-label { gap: 8px; cursor: pointer; font-size: 13px; font-weight: 400; }
.nx-cr-m-0.nx-cr-m-0.nx-cr-m-0 { margin: 0; }
.nx-cr-btn-danger.nx-cr-btn-danger.nx-cr-btn-danger { border-radius: var(--nx-radius-md); font-size: var(--nx-font-size); height: 42px; gap: 8px; border: none; background: var(--nx-danger, #f04438); color: #fff; }
.nx-cr-btn-cancel.nx-cr-btn-cancel.nx-cr-btn-cancel { border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-size: var(--nx-font-size); height: 42px; display: inline-flex; align-items: center; justify-content: center; }
.nx-cr-btn-login.nx-cr-btn-login.nx-cr-btn-login.nx-cr-btn-login, .nx-cr-btn-login.nx-cr-btn-login.nx-cr-btn-login.nx-cr-btn-login:hover, .nx-cr-btn-login.nx-cr-btn-login.nx-cr-btn-login.nx-cr-btn-login:focus { border-radius: var(--nx-radius-md); font-size: var(--nx-font-size); gap: 8px; height: 44px; background: var(--nx-primary); border: none; color: #fff; }
.nx-cr-ic-20.nx-cr-ic-20.nx-cr-ic-20 { font-size: 20px; }
.nx-cr-action-btn.nx-cr-action-btn.nx-cr-action-btn { border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-size: var(--nx-font-size-md); gap: 8px; height: 44px; }
.nx-cr-cancel-btn-sz.nx-cr-cancel-btn-sz.nx-cr-cancel-btn-sz { border-radius: var(--nx-radius-md); height: 44px; }
.nx-cr-tools-card.nx-cr-tools-card.nx-cr-tools-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); padding: 20px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-cr-tools-title.nx-cr-tools-title.nx-cr-tools-title { font-size: var(--nx-font-size-xs); font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--nx-muted); margin-bottom: 14px; padding-left: 6px; }
.nx-cr-tools-list.nx-cr-tools-list.nx-cr-tools-list { display: flex; flex-direction: column; gap: 6px; }
.nx-cr-shortcut.nx-cr-shortcut.nx-cr-shortcut { border-radius: var(--nx-radius-md); color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; font-size: 14.5px; text-decoration: none; transition: background var(--nx-transition); gap: 10px; background: transparent; }
.nx-cr-shortcut.nx-cr-shortcut.nx-cr-shortcut:hover { background: rgba(var(--nx-primary-rgb),0.06); color: var(--nx-primary-text, var(--nx-primary)); }

/* --- Auto Renew --- */
.nx-ar-toggle-card.nx-ar-toggle-card.nx-ar-toggle-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); padding: 24px; box-shadow: 0 1px 2px rgba(16,24,40,.04); display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.nx-ar-icon.nx-ar-icon.nx-ar-icon { width: 44px; height: 44px; border-radius: var(--nx-radius-md); background: rgba(18,183,106,0.08); color: var(--nx-success-alt); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.nx-ar-sub.nx-ar-sub.nx-ar-sub { margin: 4px 0 0; font-size: 13px; color: var(--nx-muted); font-weight: 400; }
.nx-ar-card.nx-ar-card.nx-ar-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.04); margin-bottom: 28px; }
.nx-ar-cell-value.nx-ar-cell-value.nx-ar-cell-value { color: var(--nx-text); font-size: var(--nx-font-size-lg); margin-top: 4px; }
.nx-ar-btn-save.nx-ar-btn-save.nx-ar-btn-save.nx-ar-btn-save, .nx-ar-btn-save.nx-ar-btn-save.nx-ar-btn-save.nx-ar-btn-save:hover, .nx-ar-btn-save.nx-ar-btn-save.nx-ar-btn-save.nx-ar-btn-save:focus { border-radius: var(--nx-radius-md); background: var(--nx-primary); border: none; font-size: var(--nx-font-size); height: 42px; }

/* --- Add Funds --- */
.nx-af-card-mb.nx-af-card-mb.nx-af-card-mb { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); box-shadow: 0 1px 2px rgba(16,24,40,.04); margin-bottom: 24px; }
.nx-af-card.nx-af-card.nx-af-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card, 18px); box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden; }
.nx-af-body.nx-af-body.nx-af-body { padding: 24px 30px; }
.nx-af-list.nx-af-list.nx-af-list { display: flex; flex-direction: column; gap: 0; }
.nx-af-row.nx-af-row.nx-af-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; }
.nx-af-row-bb.nx-af-row-bb.nx-af-row-bb { border-bottom: 1px solid var(--nx-border); }
.nx-af-strong.nx-af-strong.nx-af-strong { font-size: 14.5px; font-weight: 400; color: var(--nx-text); }
.nx-af-head.nx-af-head.nx-af-head { background: rgba(0,0,0,0.01); border-bottom: 1px solid var(--nx-border); padding: 18px 24px; gap: 8px; }
.nx-af-ic-22.nx-af-ic-22.nx-af-ic-22 { color: var(--nx-primary-text, var(--nx-primary)); font-size: var(--nx-font-size-h2); }
.nx-af-label.nx-af-label.nx-af-label { font-size: var(--nx-font-size-xs); font-weight: 400; color: var(--nx-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block; }
.nx-label { font-size: var(--nx-font-size-xs); font-weight: 400; color: var(--nx-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block; }
.nx-af-field.nx-af-field.nx-af-field { height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; padding: 0 12px; outline: none; transition: border-color var(--nx-transition), box-shadow var(--nx-transition); }
.nx-af-field.nx-af-field.nx-af-field:focus { border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .15); }
.nx-af-w-100.nx-af-w-100.nx-af-w-100 { width: 100%; }
.nx-af-btn.nx-af-btn.nx-af-btn.nx-af-btn, .nx-af-btn.nx-af-btn.nx-af-btn.nx-af-btn:hover, .nx-af-btn.nx-af-btn.nx-af-btn.nx-af-btn:focus { height: 46px; border-radius: var(--nx-radius-md); background: var(--nx-primary); border: none; font-weight: 400; font-size: var(--nx-font-size); gap: 8px; color: #fff; width: 100%; box-shadow: 0 4px 12px rgba(79,70,229,0.2); }
.nx-af-foot.nx-af-foot.nx-af-foot { background: rgba(0,0,0,0.01); border-top: 1px solid var(--nx-border); padding: 14px 30px; }
.nx-af-note.nx-af-note.nx-af-note { color: var(--nx-muted); font-weight: 400; font-size: 12.5px; }

/* --- Change Password (user-password.tpl) --- */
.nx-pw-row { display: flex; align-items: center; gap: 10px; }
.nx-pw-row .nx-af-field { flex: 1 1 auto; }
.nx-pw-generate.nx-pw-generate { flex: 0 0 auto; height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; font-size: 13px; padding: 0 16px; white-space: nowrap; }
.nx-pw-generate.nx-pw-generate:hover { border-color: var(--nx-primary); color: var(--nx-primary-text, var(--nx-primary)); background: var(--nx-bg); }
.nx-pw-actions { display: flex; gap: 10px; margin-top: 4px; }
@media (max-width: 575px) {
    .nx-pw-row { flex-direction: column; align-items: stretch; }
}

/* --- View Ticket --- */
.nx-vt-closed-alert { border-radius: var(--nx-radius-md); font-weight: 400; }
.nx-vt-title { margin: 0; font-size: 24px; font-weight: 600; color: var(--nx-text); letter-spacing: -0.5px; }
.nx-vt-subtitle { font-size: var(--nx-font-size-md); color: var(--nx-muted); font-weight: 600; margin-top: 4px; }
.nx-vt-gap-8 { gap: 8px; }
.nx-vt-status-badge { font-size: var(--nx-font-size-sm); font-weight: 400; padding: 6px 12px; border-radius: var(--nx-radius-card); text-transform: uppercase; letter-spacing: 0.5px; }
.nx-vt-status-closed { background: var(--nx-border); color: var(--nx-muted); }
.nx-vt-status-answered { background: rgba(var(--nx-primary-rgb),0.08); color: var(--nx-primary-text, var(--nx-primary)); }
html.nx-dark body .nx-vt-status-answered { color: #fff; }
.nx-vt-status-open { background: rgba(var(--nx-warning-rgb, 245, 158, 11),0.14); color: var(--nx-warning); }
.nx-vt-reply-head-left { gap: 10px; }
.nx-vt-avatar { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nx-vt-avatar-admin { background: var(--nx-primary); font-size: var(--nx-font-size-lg); box-shadow: 0 2px 8px rgba(var(--nx-primary-rgb), 0.15); }
.nx-vt-avatar-client { background: var(--nx-accent); font-weight: 400; font-size: var(--nx-font-size-sm); box-shadow: 0 2px 8px rgba(var(--nx-accent-rgb), 0.15); }
.nx-vt-ico-16 { font-size: var(--nx-font-size-xl); }
.nx-vt-ico-19 { font-size: 19px; }
.nx-vt-ico-20 { font-size: 20px; }
.nx-vt-ico-28 { font-size: 28px; }
.nx-vt-reply-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.03); }
.nx-vt-reply-head { border-bottom: 1px solid var(--nx-border); background: rgba(0,0,0,0.01); }
.nx-vt-reply-author { font-weight: 400; color: var(--nx-text); font-size: 14.5px; }
.nx-vt-staff-tag { font-size: 10px; background: rgba(var(--nx-primary-rgb),0.1); color: var(--nx-primary-text, var(--nx-primary)); padding: 2px 8px; border-radius: var(--nx-radius-md); margin-left: 8px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.5px; }
.nx-vt-reply-date { font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 400; }
.nx-vt-reply-body { font-size: var(--nx-font-size); color: var(--nx-text); line-height: 1.6; font-weight: 400; }
/* The writer's own bold, kept a step below the heavy default it had. */
.nx-vt-reply-body strong,
.nx-vt-reply-body b { font-weight: 400; }
.nx-vt-reply-ip { font-size: var(--nx-font-size-xs); color: var(--nx-muted); margin-top: 16px; border-top: 1px solid var(--nx-border); padding-top: 8px; }
.nx-vt-attach-wrap { padding: 12px 16px; background: rgba(0,0,0,0.01); border-top: 1px solid var(--nx-border); }
.nx-vt-attach-label { color: var(--nx-text); font-size: 12.5px; }
.nx-vt-attach-link { padding: 6px 12px; border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; text-decoration: none; font-size: var(--nx-font-size-sm); display: inline-flex; align-items: center; gap: 6px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-vt-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); box-shadow: 0 1px 2px rgba(16,24,40,.04); overflow: hidden; }
.nx-vt-reply-form-card { overflow: visible; }
.nx-vt-reply-form-head { gap: 8px; padding: 18px 24px; background: rgba(0,0,0,0.01); border-bottom: 1px solid var(--nx-border); }
.nx-vt-reply-form-head .nx-vt-ico-22 { color: var(--nx-primary-text, var(--nx-primary)); font-size: 22px; }
.nx-vt-details-head { gap: 8px; margin-bottom: 20px; }
.nx-vt-details-head .nx-vt-ico-19 { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-vt-pad-24 { padding: 24px; }
.nx-vt-form-title { font-size: var(--nx-font-size-xl); font-weight: 600; color: var(--nx-text); }
.nx-vt-input { height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; padding: 0 16px; }
.nx-vt-textarea { border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; padding: 12px 16px; }
.nx-vt-submit { height: 40px; border-radius: var(--nx-radius-md); background: var(--nx-primary); border: none; font-weight: 400; font-size: var(--nx-font-size-md); padding: 0 24px; color: #fff; cursor: pointer; }
.nx-vt-details-card { padding: 24px; margin-bottom: 20px; }
.nx-vt-details-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--nx-muted); }
.nx-vt-details-list { display: flex; flex-direction: column; gap: 14px; }
.nx-vt-detail-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--nx-border); padding-bottom: 10px; }
.nx-vt-val-muted { color: var(--nx-muted); }
.nx-vt-val-primary { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-vt-val-warning { color: var(--nx-warning); }
html.nx-dark body .nx-vt-val-primary { color: #fff !important; }
.nx-vt-val-danger { color: var(--nx-danger); }
.nx-vt-val-amber { color: var(--nx-warning); }
.nx-vt-val-green { color: var(--nx-success); }
.nx-vt-val-text { color: var(--nx-text); }
.nx-vt-close-btn { width: 100%; border: 1px solid rgba(var(--nx-danger-rgb), 0.25); background: var(--nx-card-bg); color: var(--nx-danger); font-weight: 400; font-size: var(--nx-font-size-md); border-radius: var(--nx-radius-md); height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); }
.nx-vt-close-btn:hover { background: rgba(var(--nx-danger-rgb), 0.06); border-color: var(--nx-danger); }
.nx-vt-close-btn-top { width: auto; height: 38px; padding: 0 16px; font-size: var(--nx-font-size-sm); }

.nx-vt-service-card { padding: 24px; margin-bottom: 20px; }
.nx-vt-service-body { margin-top: 4px; }
.nx-vt-service-name { font-weight: 400; color: var(--nx-text); font-size: var(--nx-font-size-md); }
.nx-vt-service-domain { color: var(--nx-muted); font-size: var(--nx-font-size-sm); margin-top: 2px; margin-bottom: 14px; }
.nx-vt-service-link { display: inline-flex; align-items: center; gap: 6px; color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; font-size: var(--nx-font-size-sm); text-decoration: none; }
.nx-vt-service-link:hover { text-decoration: underline; }

.nx-vt-more-card { padding: 20px 24px; }
.nx-vt-more-label { font-size: 11.5px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.6px; color: var(--nx-muted); margin-bottom: 14px; }
.nx-vt-more-link { display: flex; align-items: center; gap: 8px; color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; font-size: var(--nx-font-size-md); text-decoration: none; padding: 6px 0; }
.nx-vt-more-link:hover,
.nx-vt-more-link:focus { text-decoration: none; color: var(--nx-primary-hover); }

/* --- Tickets List --- */
.nx-tl-row { gap: 0; margin-left: -8px; margin-right: -8px; }
/* Tabs left, search bar right, one row -- the Services list's arrangement. */
.nx-tl-filter-row { gap: 12px; }
.nx-tl-banner { background: linear-gradient(135deg, var(--nx-primary) 0%, var(--nx-secondary) 100%); border-radius: var(--nx-radius-card); padding: 24px; color: #fff; box-shadow: 0 10px 24px rgba(var(--nx-primary-rgb),0.2); display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; height: 100%; }
.nx-tl-banner-title { margin: 0; font-size: 20px; font-weight: 600; color: #fff; letter-spacing: -0.3px; }
.nx-tl-banner-sub { margin: 6px 0 0; font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 400; }
.nx-tl-mt-16 { margin-top: 16px; }
.nx-tl-banner-btn { background: #fff; color: var(--nx-primary-text, var(--nx-primary)); border: none; border-radius: var(--nx-radius-md); padding: 10px 18px; font-weight: 400; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.nx-tl-ico-18 { font-size: var(--nx-font-size-h3); vertical-align: middle; }
.nx-tl-dept-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); padding: 22px; box-shadow: 0 1px 2px rgba(16,24,40,.04); display: flex; flex-direction: column; gap: 12px; height: 100%; text-decoration: none; transition: transform var(--nx-transition); }
.nx-tl-dept-ico { width: 38px; height: 38px; border-radius: var(--nx-radius-md); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.nx-tl-dept-txt { display: flex; flex-direction: column; min-width: 0; }
.nx-tl-dept-name { font-size: var(--nx-font-size-lg); font-weight: 400; color: var(--nx-text); }
.nx-tl-dept-desc { font-size: 11.5px; color: var(--nx-muted); font-weight: 400; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-tl-clip { overflow: hidden; }
.nx-tl-bordercol { border-color: var(--nx-border); }
.nx-tl-card-title { margin: 0; font-size: 15.5px; font-weight: var(--nx-weight-card-title); color: var(--nx-text); }
.nx-tl-filter-link { font-size: 13px; color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; text-decoration: none; }
.nx-tl-table { vertical-align: middle; }
.nx-tl-thead-row { border-bottom: 1px solid var(--nx-border); }
.nx-tl-tr { border-bottom: 1px solid var(--nx-border); vertical-align: middle; }
.nx-tl-gap-10 { gap: 10px; }
.nx-tl-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.nx-tl-subj-col { min-width: 0; display: flex; flex-direction: column; }
.nx-tl-subj-link { font-size: 14.5px; font-weight: 400; color: var(--nx-text); text-decoration: none; }
.nx-tl-tid { font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 400; margin-top: 1px; }
.nx-tl-dept-cell { font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-text); }
.nx-tl-lastreply { font-size: var(--nx-font-size-md); color: var(--nx-muted); font-weight: 400; }
.nx-tl-empty-cell { border: none; color: var(--nx-muted); font-size: var(--nx-font-size); font-weight: 400; }
.nx-tl-empty-icon { font-size: 40px; color: var(--nx-border); margin-bottom: 8px; display: block; }
.nx-tl-page-link { border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; padding: 6px 12px; }
.nx-tl-kb-card { padding: 20px; }
.nx-tl-kb-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.nx-tl-kb-link { display: flex; align-items: center; gap: 10px; font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-text); text-decoration: none; transition: color var(--nx-transition); }
body.nx-theme .nx-tl-kb-link:hover,
body.nx-theme .nx-tl-kb-link:focus {
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: none;
}
.nx-tl-kb-ico { font-size: 19px; color: var(--nx-primary-text, var(--nx-primary)); }
.nx-tl-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-tl-kb-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(var(--nx-primary-rgb), 0.08); color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; font-size: 13px; padding: 11px 0; border-radius: var(--nx-radius-md); text-decoration: none; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); }

/* --- Submit Ticket Step Two --- */
.nx-ts2-pad-30 { padding: 30px; }
.nx-ts2-title { margin: 0 0 24px 0; font-size: var(--nx-font-size-h3); font-weight: 600; color: var(--nx-text); }
.nx-ts2-select { height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; padding: 0 12px; }
.nx-ts2-priority-btn { height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; font-size: var(--nx-font-size-md); cursor: pointer; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); }
.nx-ts2-mb-30 { margin-bottom: 30px; }
.nx-ts2-dropzone { border: 2px dashed var(--nx-border); border-radius: var(--nx-radius-card); padding: 30px 24px; text-align: center; background: rgba(0,0,0,0.01); cursor: pointer; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); }
.nx-ts2-drop-ico { font-size: 30px; color: var(--nx-muted); margin-bottom: 8px; display: flex; align-items: center; justify-content: center; }
.nx-ts2-drop-text { font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-muted); }

.nx-priority-btn.active {
    border: 2px solid var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.05);
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-ts2-ico-32 { font-size: 32px; }
.nx-ts2-gap-16 { gap: 16px; }
.nx-ts2-submit { height: 44px; border-radius: var(--nx-radius-md); background: var(--nx-primary); border: none; font-weight: 400; font-size: var(--nx-font-size); padding: 0 24px; gap: 8px; color: #fff; text-decoration: none; }
.nx-ts2-cancel { height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-size: var(--nx-font-size); padding: 0 24px; }

/* --- Submit Ticket Confirm --- */
.nx-tsc-pad { padding: 40px 30px; }
.nx-tsc-check-circle { width: 64px; height: 64px; border-radius: 50%; background: rgba(18, 183, 106, 0.1); color: var(--nx-success); display: inline-flex; align-items: center; justify-content: center; font-size: 34px; margin-bottom: 16px; }
.nx-tsc-ico-36 { font-size: 36px; }
.nx-tsc-title { margin: 0; font-size: 20px; font-weight: 600; color: var(--nx-text); }
.nx-tsc-ticket-link { font-weight: 400; color: var(--nx-success); text-decoration: underline; }
.nx-tsc-desc { color: var(--nx-muted); font-size: var(--nx-font-size); font-weight: 400; margin-top: 16px; }
.nx-tsc-mt-24 { margin-top: 24px; }

/* --- Ticket Feedback --- */
.nx-tf-mt-20 { margin-top: 20px; }
.nx-tf-my-20 { margin: 20px 0; }
.nx-tf-return-btn { height: 44px; line-height: 28px; border-radius: var(--nx-radius-md); background: var(--nx-primary); border: none; font-weight: 400; font-size: var(--nx-font-size); padding: 8px 24px; color: #fff; text-decoration: none; }
.nx-tf-muted { color: var(--nx-muted); font-weight: 400; }
.nx-tf-text { color: var(--nx-text); font-weight: 400; }
.nx-tf-btn-success { height: 44px; border-radius: var(--nx-radius-md); background: var(--nx-success); border: none; font-weight: 400; font-size: var(--nx-font-size); padding: 0 24px; gap: 8px; color: #fff; text-decoration: none; }
.nx-tf-staff-cont { border-top: 1px solid var(--nx-border); padding-top: 20px; margin-top: 20px; }
.nx-tf-reset { height: 44px; border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text); font-weight: 400; font-size: var(--nx-font-size); padding: 0 24px; margin-left: 8px; }

/* --- Domains --- */
.nx-doms-banner {
    background: linear-gradient(135deg, var(--nx-primary) 0%, var(--nx-secondary) 100%);
    border-radius: var(--nx-radius-card);
    padding: 28px 32px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(var(--nx-primary-rgb), 0.18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 28px;
}
.nx-doms-banner-text {
    flex: 1;
    min-width: 250px;
}
body.nx-theme h2.nx-doms-banner-title {
    margin: 0;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #fff;
}
body.nx-theme p.nx-doms-banner-sub {
    margin: 6px 0 0;
    font-size: var(--nx-font-size-md);
    color: rgba(255, 255, 255, 0.75);
    font-weight: 400;
}
.nx-doms-banner-form {
    flex: 1.2;
    min-width: 320px;
    margin: 0;
}
.nx-doms-search-box {
    background: var(--nx-card-bg);
    border-radius: var(--nx-radius-md);
    padding: 5px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    gap: 6px;
}
body.nx-theme input.nx-doms-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 8px 14px;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--nx-text);
    background: transparent;
    background-color: transparent;
    box-shadow: none;
}
body .btn.nx-doms-search-btn {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 20px;
    font-weight: 400;
    font-size: var(--nx-font-size-md);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
}

@media (max-width: 767.98px) {
    body.nx-theme .nx-doms-search-btn .material-symbols-rounded,
    body.nx-theme .nx-doms-search-btn .nx-doms-ic-18 {
        display: none;
    }
    .nx-doms-banner-form {
        min-width: 0;
        width: 100%;
    }
    .nx-doms-search-box {
        min-width: 0;
    }
    body .btn.nx-doms-search-btn {
        padding: 9px 16px;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    body.nx-theme input.nx-doms-search-input {
        min-width: 0;
    }
}
.nx-doms-ic-18 {
    font-size: var(--nx-font-size-h3);
    vertical-align: middle;
}
.nx-doms-gap-8 {
    gap: 8px;
}
body .btn.nx-doms-tab {
    border-radius: var(--nx-radius-md);
}
body .btn.nx-doms-tab-on {
    background: var(--nx-primary);
    color: #fff;
    border: none;
}
body .btn.nx-doms-tab-off {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-text);
}

body.nx-theme:has(.nx-list-search) .dataTables_filter,
#tableServicesList_filter,
.nx-prods-table-card .dataTables_filter,
.nx-dt-card .dataTables_filter {
    display: none !important;
}

.nx-list-search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 320px;
    padding: 0 6px 0 14px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    box-sizing: border-box;
}
@media (max-width: 767.98px) {
    .nx-list-search,
    .nx-prods-search {
        max-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box;
    }
}
.nx-list-search input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    border: 0;
    background: transparent;
    padding: 9px 0;
    font-size: var(--nx-font-size-md);
    color: var(--nx-text);
    height: auto;
}
.nx-list-search input:focus,
.nx-list-search input:focus-visible {
    outline: none;
    box-shadow: none;
    border: 0;
}
.nx-list-search input:-webkit-autofill,
.nx-list-search input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--nx-text);
    -webkit-box-shadow: 0 0 0px 1000px var(--nx-card-bg) inset;
    box-shadow: 0 0 0px 1000px var(--nx-card-bg) inset;
    transition: background-color 9999s ease-in-out 0s;
}
.nx-list-search:focus-within {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
.nx-list-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: calc(var(--nx-radius-md) - 4px);
    background: transparent;
    color: var(--nx-muted);
    cursor: pointer;
}
.nx-list-search-submit .material-symbols-rounded { font-size: 18px; }
.nx-list-search-submit:hover { background: rgba(var(--nx-primary-rgb), .08); color: var(--nx-primary-text, var(--nx-primary)); }

.nx-doms-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.nx-doms-table-middle {
    vertical-align: middle;
}
.nx-doms-thead-row {
    border-bottom: 1px solid var(--nx-border);
    background: rgba(0, 0, 0, 0.01);
}
.nx-doms-center {
    text-align: center;
}
.nx-doms-row {
    border-bottom: 1px solid var(--nx-border);
    vertical-align: middle;
}
.nx-doms-domain-ic {
    width: 40px;
    height: 40px;
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-primary-rgb), 0.08);
    color: var(--nx-primary-text, var(--nx-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.nx-doms-date {
    font-size: var(--nx-font-size);
    font-weight: 400;
    color: var(--nx-text);
}
.nx-doms-date-warn {
    color: var(--nx-warning-alt);
}
body .btn.nx-doms-manage-btn {
    border-radius: var(--nx-radius-md);
    border: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: 13px;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
body .table td.nx-doms-empty {
    border: none;
    color: var(--nx-muted);
    font-size: var(--nx-font-size);
    font-weight: 400;
}
.nx-doms-empty-ic {
    font-size: 40px;
    color: var(--nx-border);
    margin-bottom: 8px;
    display: block;
}
body .pagination .page-item .page-link.nx-doms-page-link {
    border-radius: var(--nx-radius-sm);
    border: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-weight: 400;
    padding: 6px 12px;
}
body .pagination .page-item .page-link.nx-doms-page-info {
    border-radius: var(--nx-radius-sm);
    border: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    color: var(--nx-muted);
    font-weight: 400;
    padding: 6px 12px;
}
/* --- Domain DNS --- */
.nx-dns-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--nx-border);
}
.nx-dns-card-title {
    font-size: var(--nx-font-size-xl);
    font-weight: 600;
    color: var(--nx-text);
}
.nx-dns-card-title-bar {
    font-size: var(--nx-font-size-xl);
    font-weight: 600;
    color: var(--nx-text);
    padding: 18px 24px;
    border-bottom: 1px solid var(--nx-border);
}
.nx-dns-count {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--nx-muted);
    background: rgba(0, 0, 0, 0.04);
    padding: 4px 10px;
    border-radius: var(--nx-radius-badge);
}
body .table thead tr th.nx-dns-th {
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--nx-muted);
    border: none;
}
body .table thead tr th.nx-dns-th-120 {
    width: 120px;
}
.nx-dns-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    padding: 4px 10px;
    border-radius: 6px;
    width: 70px;
    text-align: center;
}
body .form-control.nx-dns-inline-input {
    background: transparent;
    border: 1px solid transparent;
    font-weight: 400;
    color: var(--nx-text);
    font-size: var(--nx-font-size-md);
    height: 34px;
    padding: 0 8px;
    border-radius: var(--nx-radius-sm);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
body .form-control.nx-dns-inline-input:focus {
    border: 1px solid var(--nx-border);
    background: var(--nx-bg);
}
.nx-dns-na {
    font-size: 13px;
    color: var(--nx-muted);
    font-weight: 400;
}
.nx-dns-actions {
    background: rgba(0, 0, 0, 0.01);
    border-top: 1px solid var(--nx-border);
    padding: 18px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
}
body .btn.nx-dns-btn-pri {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
}
body .btn.nx-dns-btn {
    font-weight: 400;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-md);
    padding: 9px 22px;
}
body.nx-theme label.nx-dns-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--nx-muted);
    display: block;
    margin-bottom: 6px;
}
body .form-control.nx-dns-input {
    border-radius: var(--nx-radius-md);
    height: 42px;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
}
body .btn.nx-dns-btn-add {
    font-weight: 400;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-md);
    padding: 10px 24px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.nx-dns-ic-18 {
    font-size: var(--nx-font-size-h3);
}
/* --- Register Nameservers --- */
body.nx-theme a.nx-rns-back {
    color: var(--nx-muted);
    text-decoration: none;
    font-size: var(--nx-font-size);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
}
body.nx-theme label.nx-rns-label {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-muted);
}
body .form-control.nx-rns-input {
    border-radius: var(--nx-radius-md);
    height: 42px;
    font-size: var(--nx-font-size-md);
}
body .form-control.nx-rns-input-l {
    border-radius: var(--nx-radius-md) 0 0 var(--nx-radius-md);
    height: 42px;
    font-size: var(--nx-font-size-md);
}
body.nx-theme span.input-group-text.nx-rns-addon {
    border-radius: 0 10px 10px 0;
    font-size: 13px;
    font-weight: 400;
}
body .btn.nx-rns-btn {
    font-weight: 400;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-md);
    padding: 10px 22px;
}
/* --- Email Forwarding --- */
body .table thead tr th.nx-def-th-plain {
    border: none;
}
.nx-def-row-plain {
    vertical-align: middle;
}
body .table td.nx-def-cell-at {
    border: none;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 400;
    color: var(--nx-muted);
    white-space: nowrap;
}
body .form-control.nx-def-input {
    border-radius: var(--nx-radius-md);
    height: 40px;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
}
/* --- EPP Code --- */
.nx-epp-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: 28px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.nx-epp-key-ic {
    font-size: 26px;
    color: var(--nx-primary-text, var(--nx-primary));
    background: rgba(var(--nx-primary-rgb), 0.08);
    padding: 12px;
    border-radius: var(--nx-radius-md);
}
.nx-epp-flex1 {
    flex: 1;
}
body.nx-theme h3.nx-epp-title {
    font-size: var(--nx-font-size-xl);
    font-weight: 600;
    color: var(--nx-text);
    margin: 0;
}
body.nx-theme p.nx-epp-desc {
    font-size: 13px;
    color: var(--nx-muted);
    font-weight: 400;
    margin: 4px 0 20px;
}
body .alert.nx-epp-alert {
    border-radius: var(--nx-radius-md);
    font-weight: 400;
    font-size: var(--nx-font-size-md);
    padding: 14px 18px;
}
.nx-epp-ic-18r {
    font-size: var(--nx-font-size-h3);
    vertical-align: middle;
    margin-right: 6px;
}
.nx-epp-codebox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px dashed var(--nx-border);
    border-radius: var(--nx-radius-md);
    padding: 14px 20px;
    background: rgba(0, 0, 0, 0.01);
    margin-bottom: 20px;
}
.nx-epp-code {
    font-family: monospace;
    font-size: var(--nx-font-size-h3);
    font-weight: 400;
    color: var(--nx-text);
    letter-spacing: 0.5px;
}
body .btn.nx-epp-copy-btn {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    font-weight: 400;
    font-size: 13px;
    padding: 7px 18px;
    border-radius: var(--nx-radius-sm);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nx-epp-ic-16 {
    font-size: var(--nx-font-size-xl);
}
body.nx-theme a.nx-epp-mail-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: none;
}
.nx-epp-warnbox {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: var(--nx-radius-card);
    padding: 18px 22px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .02);
}
.nx-epp-warn-ic {
    font-size: var(--nx-font-size-h2);
    color: #d97706;
    margin-top: 2px;
}
body.nx-theme p.nx-epp-warn-text {
    font-size: var(--nx-font-size-md);
    color: #b45309;
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}
/* --- Domain Addons --- */
.nx-dao-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: 28px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    margin-bottom: 24px;
}
body.nx-theme h3.nx-dao-h3 {
    font-size: var(--nx-font-size-h3);
    font-weight: 600;
    color: var(--nx-text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
body.nx-theme h3.nx-dao-h3-plain {
    font-size: var(--nx-font-size-h3);
    font-weight: 600;
    color: var(--nx-text);
    margin-bottom: 16px;
}
.nx-dao-h3-ic {
    font-size: 24px;
    color: var(--nx-primary-text, var(--nx-primary));
    background: rgba(var(--nx-primary-rgb), 0.08);
    padding: 8px;
    border-radius: var(--nx-radius-md);
}
body.nx-theme p.nx-dao-desc {
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    font-weight: 400;
    line-height: 1.5;
}
body .btn.nx-dao-btn-lg {
    font-weight: 400;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size);
    padding: 12px 28px;
}
body.nx-theme p.nx-dao-confirm {
    font-size: var(--nx-font-size);
    color: var(--nx-text);
    font-weight: 400;
}
/* --- Domain Contact Info --- */
.nx-dci-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: 28px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
body.nx-theme h3.nx-dci-h3 {
    font-size: var(--nx-font-size-h3);
    font-weight: 600;
    color: var(--nx-text);
    margin-bottom: 8px;
}
body.nx-theme p.nx-dci-desc {
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 20px;
}
body.nx-theme label.nx-dci-radio {
    font-weight: 400;
    color: var(--nx-text);
}
/* --- Bulk Domain Management --- */
.nx-bdm-li {
    background: var(--nx-bg);
    border-color: var(--nx-border);
    color: var(--nx-text);
}
body.nx-theme p.nx-bdm-text {
    color: var(--nx-text);
}
body.nx-theme p.nx-bdm-muted {
    color: var(--nx-muted);
}

/* --- Shared page pieces (revamped stock pages) --- */
.nx-ico-14 { font-size: var(--nx-font-size); line-height: 1; }
.nx-ico-16 { font-size: var(--nx-font-size-xl); line-height: 1; }
.nx-mt-22 { margin-top: 22px; }
.nx-page-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.nx-pagination-nav { display: flex; justify-content: center; margin-top: 22px; }
.nx-pagination { gap: 4px; margin: 0; }
.nx-pagination .page-link {
    border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); background: var(--nx-card-bg);
    color: var(--nx-text); font-weight: 400; font-size: 13px; padding: 6px 12px; margin: 0 2px;
}
.nx-pagination .page-item.active .page-link { background: var(--nx-primary); border-color: var(--nx-primary); color: #fff; }
.nx-pagination .page-item.disabled .page-link { color: var(--nx-muted); opacity: .6; }
.nx-card-title-ico { font-size: 19px; color: var(--nx-primary-text, var(--nx-primary)); vertical-align: -4px; margin-right: 4px; }
.nx-alert-link { color: inherit; font-weight: 400; text-decoration: underline; }
body.nx-theme .alert .alert-link {
    color: inherit;
    font-weight: 400;
    text-decoration: underline;
}
.nx-spin { display: inline-block; animation: nx-spin-rot 1s linear infinite; vertical-align: -4px; color: var(--nx-primary-text, var(--nx-primary)); }
@keyframes nx-spin-rot { to { transform: rotate(360deg); } }
.nx-article-body { font-size: 14.5px; line-height: 1.7; color: var(--nx-text); }
.nx-article-body img { max-width: 100%; height: auto; border-radius: var(--nx-radius-md); }
.nx-article-body a { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-article-body table { max-width: 100%; }
.nx-article-body pre {
    background: rgba(var(--nx-primary-rgb), .05); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md); padding: 14px; overflow-x: auto; color: var(--nx-text);
}

/* --- Announcements --- */
.nx-ann-list { display: flex; flex-direction: column; gap: 22px; }
.nx-ann-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.nx-ann-meta-group { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.nx-ann-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 400; color: var(--nx-muted); }
.nx-ann-meta-ico { font-size: var(--nx-font-size-xl); color: var(--nx-primary-text, var(--nx-primary)); }
.nx-ann-title { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.nx-ann-title a { color: var(--nx-text); text-decoration: none; transition: color var(--nx-transition); }
.nx-ann-title a:hover { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-ann-excerpt { margin-bottom: 16px; color: var(--nx-muted); }
.nx-ann-full { padding: 8px 0 0; }

/* --- Knowledgebase / Downloads --- */
.nx-kb-search-wrap { margin-bottom: 24px; }
.nx-kb-search {
    display: flex; align-items: center; gap: 10px;
    background: var(--nx-card-bg); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    padding: 8px 8px 8px 16px;
}
.nx-kb-search-ico { font-size: var(--nx-font-size-h2); color: var(--nx-muted); flex-shrink: 0; }
.nx-kb-search-input {
    flex: 1 1 auto; min-width: 0; height: 42px; border: none !important;
    background: var(--nx-card-bg) !important; color: var(--nx-text);
    box-shadow: none !important; font-size: 14.5px; font-weight: 400; outline: none;
}
.nx-kb-search-input::placeholder { color: var(--nx-muted); font-weight: 400; }
.nx-kb-search-input:-webkit-autofill,
.nx-kb-search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--nx-text);
    -webkit-box-shadow: 0 0 0px 1000px var(--nx-card-bg) inset;
    box-shadow: 0 0 0px 1000px var(--nx-card-bg) inset;
    transition: background-color 9999s ease-in-out 0s;
}
.nx-kb-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.nx-kb-cat-card {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--nx-card-bg); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 16px); box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04));
    padding: 18px; text-decoration: none; color: var(--nx-text);
    transition: transform var(--nx-transition), border-color var(--nx-transition), box-shadow var(--nx-transition);
}
.nx-kb-cat-card:hover {
    transform: translateY(-2px); border-color: var(--nx-primary);
    box-shadow: 0 10px 24px rgba(var(--nx-primary-rgb), .12); text-decoration: none; color: var(--nx-text);
}
.nx-kb-cat-ico {
    width: 42px; height: 42px; border-radius: var(--nx-radius-md); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--nx-primary-rgb), .1); color: var(--nx-primary-text, var(--nx-primary));
}
.nx-kb-cat-ico .material-symbols-rounded { font-size: var(--nx-font-size-h2); }
.nx-kb-cat-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.nx-kb-cat-name { font-size: 14.5px; font-weight: 400; color: var(--nx-text); }
.nx-kb-cat-desc { font-size: 12.5px; font-weight: 400; color: var(--nx-muted); line-height: 1.5; }
.nx-kb-cat-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.nx-kb-art-list { display: flex; flex-direction: column; }
.nx-kb-art-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 22px; border-bottom: 1px solid var(--nx-border);
    text-decoration: none; color: var(--nx-text); transition: background var(--nx-transition-fast);
}
.nx-kb-art-item:last-child { border-bottom: none; }
.nx-kb-art-item:hover { background: rgba(var(--nx-primary-rgb), .04); text-decoration: none; color: var(--nx-text); }
.nx-kb-art-ico { font-size: 20px; color: var(--nx-primary-text, var(--nx-primary)); flex-shrink: 0; margin-top: 1px; }
.nx-kb-art-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.nx-kb-art-title { font-size: var(--nx-font-size); font-weight: 600; color: var(--nx-text); }
.nx-kb-art-item:hover .nx-kb-art-title { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-kb-art-desc { font-size: 12.5px; font-weight: 400; color: var(--nx-muted); line-height: 1.5; }
.nx-kb-article-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.nx-kb-article-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nx-kb-useful { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 400; color: var(--nx-muted); }
.nx-kb-vote { border-top: 1px solid var(--nx-border); margin-top: 22px; padding-top: 18px; }
.nx-kb-vote-title { font-size: 14.5px; font-weight: 600; color: var(--nx-text); margin: 0 0 12px; }
.nx-kb-vote-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nx-dl-type { flex-shrink: 0; margin-top: 2px; }
.nx-dl-type img { max-width: 20px; height: auto; }
.nx-dl-size { font-size: var(--nx-font-size-sm); font-weight: 400; color: var(--nx-text); margin-top: 2px; }

/* --- Server status / network issues --- */
.nx-ss-table thead th.text-center, .nx-ss-table tbody td.text-center { text-align: center; }
.nx-ss-table tbody td { font-weight: 400; }
.nx-ss-phpinfo { color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; text-decoration: none; }
.nx-ss-phpinfo:hover { text-decoration: underline; }
.nx-issue-card { margin-bottom: 22px; }
.nx-issue-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.nx-issue-status { font-size: 12.5px; font-weight: 400; color: var(--nx-muted); }
.nx-issue-affecting { font-size: var(--nx-font-size); color: var(--nx-text); margin: 0 0 12px; }
.nx-issue-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.nx-issue-desc { font-size: var(--nx-font-size); line-height: 1.65; color: var(--nx-text); margin: 0; }

/* --- Contact --- */
.nx-contact-grid { max-width: 860px; margin: 0 auto; }
.nx-contact-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.nx-contact-ico {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--nx-primary-rgb), .1); color: var(--nx-primary-text, var(--nx-primary));
}
.nx-contact-ico .material-symbols-rounded { font-size: 26px; }
.nx-contact-sub { margin: 3px 0 0; font-size: var(--nx-font-size-md); font-weight: 400; color: var(--nx-muted); }
.nx-contact-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.nx-contact-captcha { text-align: center; margin-bottom: 18px; }
.nx-contact-submit { display: flex; justify-content: flex-end; }

.nx-reg-captcha { margin-bottom: 22px; }
.nx-reg-captcha > .row { margin: 0; }
.nx-reg-captcha .col-md-8 {
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
    padding: 0;
    margin: 0;
}
.nx-reg-captcha #default-captcha-domainchecker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 440px;
    margin: 0 auto;
    padding: 18px;
    background: rgba(var(--nx-primary-rgb), .06);
    border: 1px solid rgba(var(--nx-primary-rgb), .16);
    border-radius: var(--nx-radius-card, 16px);
}
.nx-reg-captcha #default-captcha-domainchecker > .col-6 {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding: 0;
}
.nx-reg-captcha #default-captcha-domainchecker .nx-form-hint {
    flex: 1 1 100%;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--nx-muted);
    text-align: center;
}
.nx-reg-captcha .captchaimage { line-height: 0; }
.nx-reg-captcha #inputCaptchaImage {
    height: 44px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    border-radius: 10px;
    display: block;
}
.nx-reg-captcha #inputCaptcha {
    float: none !important;
    width: 140px;
    max-width: 100%;
    min-width: 0;
    height: 44px;
    border: 1px solid var(--nx-border);
    border-radius: 10px;
    background: var(--nx-card-bg);
    color: var(--nx-text);
    padding: 0 14px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    box-shadow: none;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
.nx-reg-captcha #inputCaptcha:focus {
    outline: none;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
.nx-reg-captcha #google-recaptcha-domainchecker {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

/* --- DataTables list cards (quotes / emails / pricing / affiliates) --- */
.nx-dt-card { margin-bottom: 22px; }
.nx-dt-card .table-container { margin: 0; }
body.nx-theme .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

body.nx-theme table.nx-rtable > tbody > tr > td.dtr-control { display: none !important; }
body.nx-theme table.nx-rtable > tbody > tr.child,
body.nx-theme table.nx-rtable tr.dtr-expanded + tr.child { display: none !important; }
body.nx-theme table.nx-rtable > tbody > tr > td.dtr-hidden,
body.nx-theme table.nx-rtable > thead > tr > th.dtr-hidden {
    display: table-cell !important;
}
body.nx-theme table.nx-rtable .nx-rtable-emptied { display: none !important; }
/* List rows: every cell centred on one line, with one padding (Bootstrap's .table td is top-aligned). */
@media (min-width: 768px) {
    body.nx-theme table.nx-rtable > tbody > tr > td,
    body.nx-theme table.nx-rtable > thead > tr > th { vertical-align: middle !important; }
    body.nx-theme table.nx-rtable > tbody > tr > td { padding-top: 14px !important; padding-bottom: 14px !important; }
    body.nx-theme table.nx-rtable .btn,
    body.nx-theme table.nx-rtable .nx-u-pill,
    body.nx-theme table.nx-rtable :is(.nx-inv-date, .nx-inv-total, .nx-prods-duedate, .nx-value) { white-space: nowrap; }
    body.nx-theme table.nx-rtable .nx-u-pill + .btn { margin-left: 6px; }
}

@media (max-width: 767.98px) {
    body.nx-theme table.nx-rtable,
    body.nx-theme table.nx-rtable > tbody,
    body.nx-theme table.nx-rtable > tbody > tr,
    body.nx-theme table.nx-rtable > tbody > tr > td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    body.nx-theme table.nx-rtable > thead { display: none; }
    body.nx-theme table.nx-rtable > tbody > tr:not(.nx-rtable-detail) {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 14px;
        padding: 12px 4px;
        border-bottom: 1px solid var(--nx-border);
        box-sizing: border-box;
    }
    body.nx-theme table.nx-rtable > tbody > tr:not(.nx-rtable-detail) > td {
        display: inline-flex;
        align-items: center;
        width: auto;
        padding: 0;
        border: 0;
    }
    body.nx-theme table.nx-rtable .nx-rtable-emptied { display: none; }
    body.nx-theme table.nx-rtable .nx-rtable-toggle-cell { order: -1; }
    body.nx-theme table.nx-rtable .nx-rtable-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 1px solid var(--nx-border);
        border-radius: 50%;
        background: var(--nx-bg);
        color: var(--nx-muted);
        cursor: pointer;
    }
    body.nx-theme table.nx-rtable .nx-rtable-toggle .material-symbols-rounded { font-size: 18px; }
    body.nx-theme table.nx-rtable .nx-rtable-detail {
        background: var(--nx-bg);
        border-bottom: 1px solid var(--nx-border);
    }
    body.nx-theme table.nx-rtable .nx-rtable-detail.w-hidden { display: none; }
    body.nx-theme table.nx-rtable .nx-rtable-detail,
    body.nx-theme table.nx-rtable .nx-rtable-detail > td {
        box-sizing: border-box;
    }
    body.nx-theme table.nx-rtable .nx-rtable-detail > td {
        padding: 4px 16px 12px 46px;
        border: 0;
    }
    body.nx-theme table.nx-rtable .nx-rtable-detail-line {
        display: block;
        padding: 6px 0;
        font-size: 13px;
        max-width: 100%;
        box-sizing: border-box;
    }
    body.nx-theme table.nx-rtable .nx-rtable-detail-label {
        display: block;
        color: var(--nx-muted);
        font-weight: 400;
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .4px;
        margin-bottom: 3px;
    }
    body.nx-theme table.nx-rtable .nx-rtable-detail-value {
        display: block;
        color: var(--nx-text);
        text-align: left;
        max-width: 100%;
        overflow-wrap: break-word;
    }
    body.nx-theme table.nx-rtable .nx-rtable-detail-value form {
        display: inline-flex;
    }
    body.nx-theme table.nx-rtable .nx-rtable-detail-value .btn,
    body.nx-theme table.nx-rtable .nx-rtable-detail-value a {
        max-width: 100%;
        white-space: normal;
        box-sizing: border-box;
    }
}

:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper { padding: 14px 22px 18px; }
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_filter input,
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_length select {
    background: var(--nx-bg); color: var(--nx-text);
    border: 1px solid var(--nx-border); border-radius: var(--nx-radius-input, 10px);
    padding: 6px 12px; font-size: 13px; font-weight: 400; outline: none;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--nx-primary); box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12); }
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_info { color: var(--nx-muted); font-size: 12.5px; font-weight: 400; }
.nx-dt-card table.table-list { color: var(--nx-text); margin-bottom: 8px; }
.nx-dt-card table.table-list thead th {
    font-size: 11.5px; font-weight: 400; text-transform: uppercase; letter-spacing: .4px;
    color: var(--nx-muted); border-top: none; border-bottom: 1px solid var(--nx-border);
    background: transparent; padding: 12px 14px;
}
.nx-dt-card table.table-list tbody td {
    border-top: none; border-bottom: 1px solid var(--nx-border);
    font-size: var(--nx-font-size-md); padding: 13px 14px; vertical-align: middle;
}
.nx-dt-card table.table-list tbody tr { transition: background var(--nx-transition-fast); cursor: pointer; }
.nx-dt-card table.table-list tbody tr:hover { background: rgba(var(--nx-primary-rgb), .04); }
.nx-dt-card table.table-list tbody tr:last-child td { border-bottom: none; }
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate {
    display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: 2px;
    padding: 4px; border: none; border-radius: 0; background: transparent;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .pagination {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item),
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .page-item .page-link {
    border-radius: var(--nx-radius-sm) !important; border: 1px solid var(--nx-border) !important;
    background: transparent !important; color: var(--nx-text) !important;
    font-weight: 400 !important; font-size: 13px !important; text-transform: none !important;
    letter-spacing: normal !important; margin: 0 !important; padding: 7px 13px !important;
    min-width: 36px; text-align: center; line-height: 1.2; box-shadow: none !important;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition);
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .paginate_button.page-item {
    border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .paginate_button:focus,
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .page-link:focus {
    outline: none; box-shadow: none !important;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled),
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    color: var(--nx-primary-text, var(--nx-primary)) !important; background: rgba(var(--nx-primary-rgb), .08) !important;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .paginate_button.current,
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: var(--nx-primary) !important; color: #fff !important;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    opacity: .4; cursor: default; color: var(--nx-muted) !important; background: transparent !important;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .paginate_button.next,
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .page-item.previous .page-link,
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .page-item.next .page-link {
    font-weight: 400 !important; color: var(--nx-muted) !important;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover:not(.disabled),
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover:not(.disabled),
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .page-item.previous:not(.disabled) .page-link:hover,
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .page-item.next:not(.disabled) .page-link:hover {
    color: var(--nx-primary-text, var(--nx-primary)) !important;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .ellipsis,
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link[aria-label="..."] {
    padding: 7px 6px; color: var(--nx-muted); cursor: default;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_length select,
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_length input {
    background: var(--nx-bg) !important; color: var(--nx-text) !important;
    border: 1px solid var(--nx-border) !important; border-radius: var(--nx-radius-input, 10px) !important;
    padding: 5px 10px !important; font-size: 13px !important; font-weight: 400 !important; outline: none !important;
    box-shadow: none !important;
}
:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper .dataTables_length select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 28px !important;
}
.nx-dt-loading { padding: 34px 0; color: var(--nx-muted); font-weight: 400; }
.nx-emails-date-col { width: 1%; white-space: nowrap; }
.nx-email-clip { color: var(--nx-muted); vertical-align: -3px; }

body.nx-theme :is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper,
body.nx-theme :is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .table-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 14px 22px 18px;
}
body.nx-theme :is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .table-container { padding: 0; }

body.nx-theme .nx-dt-card table.table-list {
    background: transparent;
    border: none;
    margin: 10px 0 8px !important;
}
body.nx-theme .nx-dt-card table.table-list thead th {
    background: transparent;
    color: var(--nx-muted);
    border-bottom: 1px solid var(--nx-border);
    text-align: left;
}
body.nx-theme .nx-dt-card table.table-list > tbody > tr > td,
body.nx-theme .nx-dt-card table.table-list tbody tr.odd > td,
body.nx-theme .nx-dt-card table.table-list tbody tr.even > td {
    background: transparent;
    color: var(--nx-text);
}
body.nx-theme .nx-dt-card table.table-list > tbody > tr:hover > td {
    background: rgba(var(--nx-primary-rgb), .04);
}
body.nx-theme .nx-dt-card table.table-list td.dataTables_empty {
    background: transparent;
    color: var(--nx-muted);
    text-align: center;
    padding: 34px 14px;
    font-weight: 400;
    cursor: default;
}
body.nx-theme .nx-dt-card table.table-list tbody tr:hover td.dataTables_empty {
    background: transparent;
}

body.nx-theme .nx-dt-card .dataTables_filter { float: right; }
body.nx-theme .nx-dt-card .dataTables_filter label {
    margin: 0;
    display: block;
    position: relative;
}
body.nx-theme .nx-dt-card .dataTables_filter label .form-control {
    background-color: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808a99' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px 16px;
    padding: 7px 12px 7px 36px !important;
    height: auto;
    width: 240px;
    max-width: 100%;
    font-size: 13px;
    color: var(--nx-text);
}
body.nx-theme .nx-dt-card .dataTables_filter label .form-control::placeholder {
    color: var(--nx-muted);
    opacity: 1;
}

body.nx-theme :is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_length,
body.nx-theme :is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_length label {
    color: var(--nx-muted);
    font-size: 13px;
    font-weight: 400;
    margin: 0;
}
body.nx-theme :is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_length select {
    width: auto;
    display: inline-block;
    margin: 0 6px;
}

body.nx-theme :is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_paginate .page-link,
body.nx-theme :is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_paginate .paginate_button a {
    color: var(--nx-text);
    background: transparent;
    border: none;
}
body.nx-theme :is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_paginate .page-item.active .page-link {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
}

@media (max-width: 600px) {
    body.nx-theme .nx-dt-card .dataTables_filter {
        float: none;
        width: 100%;
        margin-top: 12px;
    }
    body.nx-theme .nx-dt-card .dataTables_filter label .form-control { width: 100%; }
}

@media (max-width: 600px) {
    body.nx-theme :is(.nx-inv-card, .nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper > .row {
        justify-content: center !important;
    }
    body.nx-theme :is(.nx-inv-card, .nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_paginate,
    body.nx-theme :is(.nx-inv-card, .nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_length,
    body.nx-theme :is(.nx-inv-card, .nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_info {
        width: 100%;
        display: flex !important;
        justify-content: center !important;
        text-align: center;
    }
}

/* --- Domain pricing --- */
.nx-tld-featured-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
@media (max-width: 991.98px) {
    .nx-tld-featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .nx-tld-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
    .nx-tld-featured-grid { grid-template-columns: minmax(0, 1fr); }
}
.nx-tld-featured {
    background: var(--nx-card-bg); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 16px); box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04));
    padding: 18px 14px; text-align: center;
    transition: transform var(--nx-transition), border-color var(--nx-transition);
}
.nx-tld-featured:hover { transform: translateY(-2px); border-color: var(--nx-primary); }
.nx-tld-featured-img img { max-width: 100%; max-height: 40px; height: auto; }
html.nx-dark .nx-tld-featured-img img {
    filter: brightness(0) invert(1);
}
.nx-tld-featured-img img[alt=".biz"], .nx-tld-featured-img img[alt=".cloud"],
.nx-tld-featured-img img[alt=".co"], .nx-tld-featured-img img[alt=".eu"],
.nx-tld-featured-img img[alt=".in"], .nx-tld-featured-img img[alt=".info"],
.nx-tld-featured-img img[alt=".me"], .nx-tld-featured-img img[alt=".online"],
.nx-tld-featured-img img[alt=".pk"], .nx-tld-featured-img img[alt=".studio"],
.nx-tld-featured-img img[alt=".us"] {
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
}
html.nx-dark .nx-tld-featured-img img[alt=".biz"], html.nx-dark .nx-tld-featured-img img[alt=".cloud"],
html.nx-dark .nx-tld-featured-img img[alt=".co"], html.nx-dark .nx-tld-featured-img img[alt=".eu"],
html.nx-dark .nx-tld-featured-img img[alt=".in"], html.nx-dark .nx-tld-featured-img img[alt=".info"],
html.nx-dark .nx-tld-featured-img img[alt=".me"], html.nx-dark .nx-tld-featured-img img[alt=".online"],
html.nx-dark .nx-tld-featured-img img[alt=".pk"], html.nx-dark .nx-tld-featured-img img[alt=".studio"],
html.nx-dark .nx-tld-featured-img img[alt=".us"] {
    background: transparent;
    padding: 0;
}
html.nx-dark .nx-tld-featured-img img[alt=".biz"], html.nx-dark .nx-tld-featured-img img[alt=".eu"],
html.nx-dark .nx-tld-featured-img img[alt=".info"], html.nx-dark .nx-tld-featured-img img[alt=".in"],
html.nx-dark .nx-tld-featured-img img[alt=".me"], html.nx-dark .nx-tld-featured-img img[alt=".us"] {
    filter: none;
}
html.nx-dark .nx-tld-featured-img img[alt=".online"] {
    filter: brightness(2.2);
}
html.nx-dark .nx-tld-featured-img img[alt=".co"], html.nx-dark .nx-tld-featured-img img[alt=".cloud"],
html.nx-dark .nx-tld-featured-img img[alt=".pk"], html.nx-dark .nx-tld-featured-img img[alt=".studio"] {
    filter: invert(1);
}
.nx-tld-featured-img img[alt=".name"] { max-height: 38.6px; max-width: 133.2px; }
.nx-tld-featured-img img[alt=".news"] { max-height: 26.3px; max-width: 135.7px; }
.nx-tld-featured-img img[alt=".online"] { max-height: 47.9px; max-width: 144.1px; }
.nx-tld-featured-img img[alt=".us"] { max-height: 78.6px; max-width: 67.2px; }
.nx-tld-featured-img img[alt=".co"] { max-height: 38.5px; max-width: 92.8px; }
.nx-tld-featured-img img[alt=".shop"] { max-height: 39.7px; max-width: 106.2px; }
.nx-tld-featured-img img[alt=".live"] { max-height: 34.4px; max-width: 105px; }
.nx-tld-featured-img img[alt=".me"] { max-height: 69px; max-width: 73.5px; }
.nx-tld-featured-img img[alt=".info"] { max-height: 56.2px; max-width: 118.9px; }
.nx-tld-featured-img img[alt=".cloud"] { max-height: 85.2px; max-width: 155.5px; }
.nx-tld-featured-img img[alt=".net"] { max-height: 49.2px; max-width: 103.4px; }
.nx-tld-featured-img img[alt=".com"] { max-height: 40px; max-width: 127.1px; }
.nx-tld-featured-img img[alt=".couk"] { max-height: 64.4px; max-width: 109.3px; }
.nx-tld-featured-img img[alt=".pk"] { max-height: 52.8px; max-width: 71.1px; }
.nx-tld-featured-img img[alt=".blog"] { max-height: 48.3px; max-width: 106.4px; }
.nx-tld-featured-img img[alt=".host"] { max-height: 47.3px; max-width: 111.3px; }
.nx-tld-featured-img img[alt=".tech"] { max-height: 33.9px; max-width: 105.7px; }
.nx-tld-featured-img img[alt=".app"] { max-height: 39.8px; max-width: 104.7px; }
.nx-tld-featured-img img[alt=".eu"] { max-height: 52.6px; max-width: 95.2px; }
.nx-tld-featured-img img[alt=".website"] { max-height: 38.1px; max-width: 182.9px; }
.nx-tld-featured-img img[alt=".social"] { max-height: 38.9px; max-width: 129.6px; }
.nx-tld-featured-img img[alt=".dev"] { max-height: 41.9px; max-width: 102.6px; }
.nx-tld-featured-img img[alt=".store"] { max-height: 31.4px; max-width: 116.4px; }
.nx-tld-featured-img img[alt=".studio"] { max-height: 86.4px; max-width: 146.9px; }
.nx-tld-featured-img img[alt=".in"] { max-height: 69.3px; max-width: 73.3px; }
.nx-tld-featured-img img[alt=".tv"] { max-height: 56.2px; max-width: 91.1px; }
.nx-tld-featured-img img[alt=".biz"] { max-height: 54.5px; max-width: 92px; }
.nx-tld-featured-img img[alt=".club"] { max-height: 32.1px; max-width: 113.7px; }
.nx-tld-featured-img img[alt=".ca"] { max-height: 56.9px; max-width: 88.4px; }
.nx-tld-featured-img img[alt=".rocks"] { max-height: 27.5px; max-width: 131.3px; }
.nx-tld-fallback-text { display: inline-block; font-size: var(--nx-font-size-h3); font-weight: 400; color: var(--nx-text); line-height: 40px; }
.nx-tld-featured-price { margin-top: 10px; font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-text); }
.nx-tld-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.nx-tld-toolbar-left { min-width: 0; }
.nx-tld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nx-tld-chip {
    display: inline-flex; align-items: center;
    background: var(--nx-card-bg); color: var(--nx-text);
    border: 1px solid var(--nx-border); border-radius: var(--nx-radius-badge);
    font-size: 12.5px; font-weight: 400; padding: 6px 13px;
    text-decoration: none; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); cursor: pointer;
}
.nx-tld-chip:hover { border-color: var(--nx-primary); color: var(--nx-primary-text, var(--nx-primary)); }
.nx-tld-chip.badge-success { background: var(--nx-primary) !important; border-color: var(--nx-primary); color: #fff !important; }
.nx-tld-currency { flex-shrink: 0; }
.nx-tld-currency select { min-width: 200px; height: 42px; }
body.nx-theme .tld-sale-group {
    display: inline-flex; margin-left: 6px; padding: 2px 8px; border-radius: var(--nx-radius-badge);
    background: var(--nx-pill-pending-bg); color: var(--nx-pill-pending-text);
    font-size: 10.5px; font-weight: 400; text-transform: uppercase;
}

/* --- Affiliates --- */
.nx-aff-stat-ico { font-size: var(--nx-font-size-h3); color: var(--nx-primary-text, var(--nx-primary)); vertical-align: -4px; margin-right: 4px; }
.nx-aff-link-input { font-weight: 400; }
.nx-aff-balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.nx-aff-balance-item {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--nx-bg); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md); padding: 14px 16px;
}
.nx-aff-balance-label { font-size: var(--nx-font-size-sm); font-weight: 400; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .4px; }
.nx-aff-balance-value { font-size: 20px; font-weight: 400; color: var(--nx-text); letter-spacing: -.4px; }
.nx-aff-balance-available { color: var(--nx-success, #12b76a); }
.nx-aff-withdraw { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.nx-aff-withdraw-hint { margin: 0; font-size: 12.5px; font-weight: 400; color: var(--nx-muted); }
.nx-btn.disabled, .nx-btn[disabled] { opacity: .55; pointer-events: none; }

/* --- Revamp wrapper hooks --- */
.nx-ann-item { margin: 0; }
.nx-kb-vote-form { margin: 0; }
.nx-contact-card { margin: 0; }

/* ---- generic shell utilities ---- */
.nx-sh-w100 { width: 100%; }
.nx-sh-cursor-pointer { cursor: pointer; }
.nx-sh-nodeco { text-decoration: none; }
.nx-sh-flex-grow { flex-grow: 1; }
.nx-sh-gap6 { gap: 6px; }
.nx-sh-gap10 { gap: 10px; }
.nx-sh-gap12 { gap: 12px; }
.nx-sh-iflex-shrink { display: inline-flex; flex-shrink: 0; }
.nx-sh-shrink0 { flex-shrink: 0; }
.nx-sh-ico-text { color: var(--nx-text); }

/* material-symbol size helpers */
.nx-sh-ms-15-muted { font-size: var(--nx-font-size-lg); color: var(--nx-muted); }
.nx-sh-ms-16 { font-size: var(--nx-font-size-xl); }
.nx-sh-ms-18-muted { font-size: var(--nx-font-size-h3); color: var(--nx-muted); }
.nx-sh-ms-19-primary { font-size: 19px; color: var(--nx-primary-text, var(--nx-primary)); }
.nx-sh-ms-20-shrink { flex-shrink: 0; font-size: 20px; color: var(--nx-text); }
.nx-sh-ms-20-primary { color: var(--nx-primary-text, var(--nx-primary)); font-size: 20px; }
.nx-sh-ms-20-danger { color: var(--nx-danger, #f04438); font-size: 20px; }
.nx-sh-ms-20-warn { color: var(--nx-warning-alt); font-size: 20px; }
.nx-sh-ms-19-fill { font-size: 19px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* =====================  SIDEBAR (shared)  ===================== */
.nx-sh-sidebar-scroll {
    display: flex; flex-direction: column; width: 100%;
    min-height: 0; flex-grow: 1; overflow-y: auto; overflow-x: hidden;
}
.nx-sh-init-hidden { display: none; }
.nx-sh-logo-fallback { gap: 12px; width: 100%; justify-content: flex-start; }
.nx-sidebar-mode-compact .nx-sh-logo-fallback,
.nx-sidebar-mode-icons .nx-sh-logo-fallback {
    justify-content: center;
}
.nx-sh-logo-textwrap { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.nx-logo-text-span { font-size: var(--nx-font-size-xl); font-weight: 400; color: var(--nx-text); }

/* Open Ticket button (sidebar) */
.nx-sh-openticket-exp { padding: 10px 14px; width: 100%; }
.nx-sh-openticket-cmp { padding: 10px 0; width: 100%; display: none; justify-content: center; }
.btn.nx-sh-openticket-btn {
    gap: 8px; padding: 10px 18px; border-radius: var(--nx-radius-button, 10px);
    font-weight: 400; font-size: var(--nx-font-size-md); width: 100%; box-shadow: var(--nx-shadow-button);
    background: var(--nx-primary); border: none; color: #fff; text-decoration: none;
}
.btn.nx-sh-openticket-btn-cmp {
    width: 38px; height: 38px; padding: 0; border-radius: var(--nx-radius-button, 10px);
    background: var(--nx-primary); border: none; color: #fff;
    box-shadow: var(--nx-shadow-button); text-decoration: none;
}

/* nav collapse / toggle */
.nx-sh-nav-toggle {
    cursor: pointer; display: flex; align-items: center;
    justify-content: space-between; width: 100%;
}
.nx-nav-icon-wrapper { position: relative; }
.nx-nav-arrow { font-size: 20px; transition: transform var(--nx-transition-slow); margin-left: auto; }
.nx-sidebar-submenu-list {
    margin-left: 18px; padding-left: 12px; border-left: 1px solid var(--nx-border);
    display: flex; flex-direction: column; gap: 4px; margin-top: 4px; margin-bottom: 8px;
    min-width: 0;
}
.nx-sidebar-submenu-list > a.nx-sidebar-submenu-item {
    min-width: 0;
    overflow-wrap: anywhere;
}
a.nx-sidebar-submenu-item {
    padding: 8px 12px; border-radius: var(--nx-radius-sm); font-size: var(--nx-font-size-md); font-weight: 400;
    color: var(--nx-muted); text-decoration: none; display: block; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}

/* plus badge on Open Ticket icon */
.nx-plus-badge {
    position: absolute; top: -3px; right: -3px; width: 14px; height: 14px;
    border-radius: 50%; background: var(--nx-primary); color: #fff; font-size: 10px;
    font-weight: 400; border: 1.5px solid #fff; line-height: 1; pointer-events: none;
}

/* dropright flyouts (compact / icons sidebar) */
.nx-sh-flyout-menu {
    min-width: 200px; width: max-content; max-width: 320px;
    border-radius: var(--nx-radius-card); padding: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); border: 1px solid var(--nx-border);
    margin-left: 14px; z-index: 1060;
}
.nx-sidebar-mode-compact .nx-sidebar-store-wrapper,
.nx-sidebar-mode-icons .nx-sidebar-store-wrapper {
    padding-left: 0;
    padding-right: 0;
}
.nx-sidebar-mode-compact .nx-sidebar .nx-nav-dropdown-wrapper,
.nx-sidebar-mode-icons .nx-sidebar .nx-nav-dropdown-wrapper {
    width: 100%;
    position: relative;
}
.nx-sidebar-mode-compact .nx-sidebar .nx-nav-dropdown-wrapper > .nx-nav-item,
.nx-sidebar-mode-icons .nx-sidebar .nx-nav-dropdown-wrapper > .nx-nav-item {
    margin-left: auto;
    margin-right: auto;
}
.nx-sidebar-mode-compact .nx-nav-dropdown-wrapper > .dropdown-menu,
.nx-sidebar-mode-icons .nx-nav-dropdown-wrapper > .dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    right: auto;
    bottom: auto;
    margin: 0;
}
.nx-sidebar-mode-compact .nx-nav-dropdown-wrapper:hover > .dropdown-menu,
.nx-sidebar-mode-compact .nx-nav-dropdown-wrapper:focus-within > .dropdown-menu,
.nx-sidebar-mode-icons .nx-nav-dropdown-wrapper:hover > .dropdown-menu,
.nx-sidebar-mode-icons .nx-nav-dropdown-wrapper:focus-within > .dropdown-menu {
    display: block;
}

.nx-nav-item:hover,
.nx-nav-item:focus {
    text-decoration: none;
    color: var(--nx-primary-text, var(--nx-primary));
}

.nx-sidebar-mode-compact .nx-sh-openticket-cmp > .btn,
.nx-sidebar-mode-icons .nx-sh-openticket-cmp > .btn {
    margin-left: auto;
    margin-right: auto;
}

.nx-sh-flyout-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: -14px;
    width: 14px;
    height: 100%;
}
.nx-sh-flyout-head {
    font-size: var(--nx-font-size-xs); font-weight: 400; letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--nx-muted); margin-bottom: 12px; padding-left: 10px;
}
.nx-sh-dd-divider { margin: 8px 0; border-top: 1px solid var(--nx-border); }
a.dropdown-item.nx-sh-flyout-item {
    gap: 10px; padding: 8px 10px; border-radius: var(--nx-radius-sm); color: var(--nx-text);
    font-weight: 400; font-size: var(--nx-font-size-md); transition: background var(--nx-transition); background: transparent;
}

/* store + footer wrappers */
.nx-sidebar-store-wrapper {
    width: 100%; padding: 0 14px 4px; display: flex; flex-direction: column;
    justify-content: center; z-index: 1050;
}

.nx-sidebar-store-wrapper:not(.mt-auto) {
    margin-top: 4px;
}
.nx-sidebar-footer-wrapper {
    width: 100%; display: flex; justify-content: center; z-index: 1050; padding: 10px 14px 14px;
}
.nx-sidebar-footer-wrapper.nx-sh-footer-guest { border-top: 1px solid var(--nx-border); }

/* profile card (moved from embedded <style> blocks) */
.nx-sidebar-footer-wrapper { border-top: 1px solid #eaeff4; }
html.nx-dark body .nx-sidebar-footer-wrapper { border-top: 1px solid #2a2b36; }
.nx-sidebar-footer-wrapper.nx-sh-footer-guest { border-top: 1px solid var(--nx-border); }
html.nx-dark body .nx-sidebar-footer-wrapper.nx-sh-footer-guest { border-top: 1px solid var(--nx-border); }
.nx-sidebar-profile-card { background: #f8fafc; }
html.nx-dark body .nx-sidebar-profile-card { background: #191b22; }
.nx-sidebar-profile-card a { color: var(--nx-sidebar-text); transition: color var(--nx-transition); }
.nx-sidebar-profile-card a:hover { color: var(--nx-danger-alt); }
html.nx-dark body .nx-sidebar-profile-card a { color: #707584; }
html.nx-dark body .nx-sidebar-profile-card a:hover { color: var(--nx-danger, #f04438); }

.nx-sidebar-profile-card.nx-sh-profile-card {
    display: flex; flex-direction: row; align-items: center;
    justify-content: space-between; flex-wrap: nowrap;
    border-radius: var(--nx-radius-md); padding: 8px 10px; width: 100%;
    border: none;
}
.nx-sidebar-mode-expanded .nx-sidebar-profile-card.nx-sh-profile-card {
    display: flex !important;
}
.nx-sh-profile-info { min-width: 0; }
.nx-sidebar-profile-card a.nx-sh-profile-logout {
    color: var(--nx-muted); font-size: 20px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0; transition: color var(--nx-transition); text-decoration: none; margin-left: 8px;
}
.nx-sidebar-profile-card a.nx-sh-profile-logout:hover { color: var(--nx-danger-alt); }
html.nx-dark body .nx-sidebar-profile-card a.nx-sh-profile-logout { color: var(--nx-muted); }
html.nx-dark body .nx-sidebar-profile-card a.nx-sh-profile-logout:hover { color: var(--nx-danger-alt); }

/* ---------- Sidebar footer: compact login button + profile card ---------- */

.nx-sidebar-mode-compact .btn.nx-sh-btn-login-cmp,
.nx-sidebar-mode-icons .btn.nx-sh-btn-login-cmp {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.nx-sidebar-profile-card,
html.nx-dark body .nx-sidebar-profile-card {
    background: transparent;
}

.nx-sidebar-profile-card a.nx-sh-profile-logout {
    margin-left: auto;
    flex-shrink: 0;
}

/* avatars */
.nx-user-avatar {
    position: relative; overflow: hidden;
    border-radius: 50%; background: linear-gradient(135deg, var(--nx-primary) 0%, var(--nx-primary-hover) 100%);
    color: #ffffff; font-weight: 400; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    text-transform: uppercase;
}
.nx-sh-avatar-32 { width: 32px; height: 32px; font-size: var(--nx-font-size-xs); }
.nx-sh-avatar-44 { width: 44px; height: 44px; font-size: var(--nx-font-size); cursor: pointer; box-shadow: 0 4px 10px rgba(var(--nx-primary-rgb),0.2); }
.nx-sh-avatar-36 {
    width: 36px; height: 36px; font-size: 13px;
}
.btn.nx-sh-avatar-btn { padding: 0; background: transparent; border: none; box-shadow: none; }
.nx-user-avatar-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: none;
}

/* dropdown user menus */
.nx-sh-user-menu {
    min-width: 180px; border-radius: var(--nx-radius-md); box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid var(--nx-border); margin-left: 10px; background: var(--nx-card-bg);
}
.nx-sh-menu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--nx-border);
    color: var(--nx-text);
}
.nx-sh-menu-head-avatar {
    position: relative;
    overflow: hidden;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nx-primary) 0%, var(--nx-primary-hover) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--nx-font-size-md);
    font-weight: var(--nx-weight-heading);
    letter-spacing: .3px;
    text-transform: uppercase;
}
.nx-sh-menu-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nx-sh-menu-head-company {
    font-size: var(--nx-font-size-sm);
    font-weight: var(--nx-weight-body);
    color: var(--nx-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nx-sh-menu-head-name {
    font-size: var(--nx-font-size-lg);
    font-weight: var(--nx-weight-heading);
    color: var(--nx-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.dropdown-item.nx-sh-menu-item { color: var(--nx-text); }
.nx-sh-menu-divider { border-color: var(--nx-border); }

/* login button (guest, sidebar footer) */
.btn.nx-sh-btn-login-block {
    border-radius: var(--nx-radius-md); font-weight: 400; font-size: 13px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn.nx-sh-btn-login-cmp {
    display: none; width: 44px; height: 44px; border-radius: 50%; padding: 0;
    align-items: center; justify-content: center;
}
.nx-sh-ms-18 { font-size: var(--nx-font-size-h3); }
.nx-sh-ms-20 { font-size: 20px; }
/* =====================  TOPBAR (header.tpl)  ===================== */
.nx-topbar.nx-topbar-expanded { height: auto; padding: 0; }
.nx-topbar-expanded-top {
    height: var(--nx-topbar-utility-height);
    background: var(--nx-header-bg);
    width: 100%;
}
.nx-topbar-expanded-bottom {
    height: var(--nx-header-height);
    background: var(--nx-header-bg);
    width: 100%;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
.nx-sh-tb-row { width: 100%; height: 100%; padding: 0 var(--nx-topbar-gutter); }
/* Logo rendered in the utility strip when logo_row is 'topbar'. */
.nx-topbar-logo { flex-shrink: 0; margin-right: auto; }
.nx-topbar-logo .nx-logo-img { height: var(--nx-logo-height); width: auto; }
.nx-sh-tb-actions { gap: 12px; flex-wrap: nowrap; }
.nx-topbar-right { gap: 12px; flex-wrap: nowrap; }
.nx-topbar-nav-middle { gap: 8px; flex-grow: 1; }
.nx-topbar-divider { width: 1px; height: 24px; background: var(--nx-border); margin: 0 4px; flex-shrink: 0; }

.nx-topbar-link.nx-sh-tb-cart {
    gap: 8px; text-decoration: none; padding: 6px 12px; border-radius: var(--nx-radius-md);
    white-space: nowrap; flex-wrap: nowrap; flex-shrink: 0;
}
.nx-sh-tb-cart-text { font-size: 13px; font-weight: 400; color: var(--nx-text); }
.btn.nx-topbar-link.nx-sh-tb-btn {
    padding: 6px 12px; border-radius: var(--nx-radius-md); background: transparent; border: none; box-shadow: none;
    white-space: nowrap; flex-wrap: nowrap; display: flex; align-items: center; justify-content: center;
}
.btn.nx-topbar-link.nx-sh-lang-btn {
    gap: 4px; padding: 6px 12px; border-radius: var(--nx-radius-md); background: transparent; border: none; box-shadow: none;
    white-space: nowrap; flex-wrap: nowrap;
}
.nx-sh-iflex-shrink {
    width: 20px;
    height: 20px;
}
.nx-sh-count-badge {
    position: absolute !important; top: -8px !important; right: -8px !important;
    font-size: 8px; background: var(--nx-danger, #f04438); color: #fff;
    width: 14px !important; height: 14px !important; min-width: 0 !important; max-width: 14px !important;
    border-radius: 50% !important; display: flex; align-items: center;
    justify-content: center; padding: 0 !important; border: 1.5px solid var(--nx-card-bg); font-weight: 400; line-height: 1; z-index: 5;
    box-sizing: border-box !important; pointer-events: none;
}
.btn.nx-sh-tb-btn .nx-sh-count-badge,
.btn .nx-sh-count-badge {
    position: absolute !important; top: -6px !important; right: -6px !important;
}
.nx-sh-notif-menu {
    width: 320px; border-radius: var(--nx-radius-md); box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid var(--nx-border); margin-top: 8px; z-index: 1070;
}
.nx-sh-notif-head { font-size: var(--nx-font-size-lg); color: var(--nx-text); border-color: var(--nx-border); }
.nx-sh-notif-list { max-height: 280px; overflow-y: auto; }
.nx-sh-notif-item { border: none; border-bottom: 1px solid var(--nx-border); background: transparent; transition: background 0.2s; }
.nx-sh-notif-msg { font-size: 13px; line-height: 1.4; color: var(--nx-text); text-align: left; }
body.nx-theme .nx-sh-notif-menu .nx-sh-notif-list {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}
body.nx-theme .nx-sh-notif-menu .nx-sh-notif-item:last-child {
    border-bottom: none;
}
body.nx-theme .nx-sh-notif-menu {
    max-width: calc(100vw - 24px);
}
body.nx-theme .nx-sh-notif-menu .nx-sh-notif-head {
    background: transparent;
    border-bottom-color: color-mix(in srgb, var(--nx-border) 45%, transparent);
}
body.nx-theme .nx-sh-notif-menu .nx-sh-notif-list,
body.nx-theme .nx-sh-notif-menu .nx-sh-notif-item {
    background: transparent;
}
body.nx-theme .nx-sh-notif-menu .nx-sh-notif-item {
    border-bottom-color: color-mix(in srgb, var(--nx-border) 45%, transparent);
}
@media (max-width: 767.98px) {
    body.nx-theme .nx-sh-notif-menu {
        width: calc(100vw - 24px);
    }
    body.nx-theme .nx-sh-notif-menu .nx-sh-notif-list {
        max-height: 60vh;
    }
    body.nx-theme .nx-sh-notif-msg {
        font-size: 13.5px;
    }
}
.nx-sh-lang-name { font-size: 13px; font-weight: 400; color: var(--nx-text); }
.nx-sh-lang-menu { border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); margin-top: 8px; z-index: 1070; }
body.nx-theme .nx-sh-lang-menu,
body.nx-theme .nx-sh-currency-menu {
    max-height: calc(100vh - 140px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.nx-theme .nx-sh-lang-menu::-webkit-scrollbar,
body.nx-theme .nx-sh-currency-menu::-webkit-scrollbar { width: 8px; }
body.nx-theme .nx-sh-lang-menu::-webkit-scrollbar-thumb,
body.nx-theme .nx-sh-currency-menu::-webkit-scrollbar-thumb {
    background: var(--nx-border);
    border-radius: 8px;
}
body.nx-theme .nx-sh-lang-menu,
body.nx-theme .nx-sh-currency-menu {
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border) transparent;
}
.btn.nx-topbar-link.nx-sh-currency-btn {
    gap: 4px; padding: 6px 12px; border-radius: var(--nx-radius-md); background: transparent; border: none; box-shadow: none;
    white-space: nowrap; flex-wrap: nowrap;
}
.nx-sh-currency-name { font-size: 13px; font-weight: 400; color: var(--nx-text); }
.nx-sh-currency-menu { border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg); margin-top: 8px; z-index: 1070; min-width: 160px; }
a.dropdown-item.nx-sh-menu-item.item.active { color: #fff; font-weight: 400; }

.btn.nx-sh-acct-btn {
    gap: 8px; padding: 0; background: transparent; border: none; box-shadow: none;
    white-space: nowrap; flex-wrap: nowrap; display: flex; align-items: center;
}
.btn.nx-sh-acct-btn-g4 {
    gap: 4px; padding: 0; background: transparent; border: none; box-shadow: none;
    white-space: nowrap; flex-wrap: nowrap; display: flex; align-items: center;
}
.nx-sh-acct-name { color: var(--nx-text); font-weight: 400; font-size: 13px; white-space: nowrap; }
.nx-sh-acct-menu {
    min-width: 180px; border-radius: var(--nx-radius-md); box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid var(--nx-border); margin-top: 8px; background: var(--nx-card-bg); z-index: 1070;
}
.nx-guest-login-buttons { display: flex; gap: 8px; flex-shrink: 0; }
.btn.nx-sh-btn-login-sm {
    border-radius: var(--nx-radius-sm); font-weight: 400; font-size: 13px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn.nx-sh-btn-register-sm {
    border-radius: var(--nx-radius-sm); font-weight: 400; font-size: 13px; height: 36px;
    align-items: center; justify-content: center; border-color: var(--nx-border); color: var(--nx-text);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition);
}
.btn.nx-sh-btn-register-sm:hover {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
}

.nx-logo-img { height: var(--nx-logo-height, 36px); width: auto; max-width: 100%; object-fit: contain; }
.nx-sh-logo-mark-36 {
    width: 36px; height: 36px; border-radius: 9px; background: var(--nx-primary); display: flex;
    align-items: center; justify-content: center; color: #fff; font-weight: 400; font-size: 19px;
    box-shadow: 0 4px 10px rgba(var(--nx-primary-rgb),0.15);
}
.nx-sh-brand-name { font-size: var(--nx-font-size-lg); font-weight: 400; color: var(--nx-text); letter-spacing: -0.2px; }
.nx-navbar-link.nx-sh-topnav-link {
    display: flex; align-items: center; gap: 6px; font-size: var(--nx-font-size-md); font-weight: var(--nx-weight-nav);
    color: var(--nx-text); text-decoration: none; padding: 7px 14px; border-radius: var(--nx-radius-md);
}
.nx-navbar-link.nx-sh-topnav-link-dd {
    display: flex; align-items: center; gap: 6px; font-size: var(--nx-font-size-md); font-weight: var(--nx-weight-nav);
    color: var(--nx-text); text-decoration: none; padding: 7px 14px; border-radius: var(--nx-radius-md);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition); white-space: nowrap;
}
body.nx-theme .nx-sh-topnav-menu {
    min-width: 220px; z-index: 1060; background: transparent; border: none; box-shadow: none;
    padding: 0; padding-top: 10px; margin: 0;
}
.nx-sh-topnav-card {
    border-radius: var(--nx-radius-md); padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid var(--nx-border); background: var(--nx-card-bg);
}
a.dropdown-item.nx-sh-topnav-item {
    padding: 8px 12px; border-radius: var(--nx-radius-sm); color: var(--nx-text); font-weight: 400;
    font-size: var(--nx-font-size-md); gap: 4px; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
.nx-sh-topnav-item-ico {
    color: var(--nx-primary-text, var(--nx-primary)); font-size: var(--nx-nav-icon-size-sm); flex-shrink: 0; margin-right: 8px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.btn.nx-sh-openticket-btn2 {
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--nx-radius-button);
    font-weight: 400;
    font-size: var(--nx-font-size-md);
    line-height: 1;
    white-space: nowrap;
    align-self: center;
    flex-shrink: 0;
    box-shadow: var(--nx-shadow-button);
}

/* centered login layout (header.tpl) */
.nx-sh-mw-440 { max-width: 440px; }
.nx-sh-logo-48 { height: 48px; }
.nx-sh-logo-mark-32 { width: 32px; height: 32px; vertical-align: middle; }
.nx-logo-text.nx-sh-logo-text-24 { font-size: 24px; vertical-align: middle; margin-left: 8px; }
.card.nx-sh-card-r16 { border-radius: var(--nx-radius-card); }

.nx-auth-logo .nx-logo-img {
    height: calc(var(--nx-logo-height, 36px) * 1.5);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.nx-auth-logo .nx-logo-mark {
    width: calc(var(--nx-logo-height, 36px) * 1.5);
    height: calc(var(--nx-logo-height, 36px) * 1.5);
    border-radius: calc(var(--nx-logo-height, 36px) * .38);
    vertical-align: middle;
}
body.nx-theme .nx-auth-logo .nx-logo-mark .material-symbols-rounded {
    font-size: calc(var(--nx-logo-height, 36px) * .78);
}

/* =====================  FOOTER (footer.tpl)  ===================== */
body.nx-theme .btn.nx-sh-footer-lang-btn,
body.nx-theme .btn.nx-sh-footer-currency-btn {
    color: var(--nx-text);
}
.nx-sh-footer-lang { display: inline-block; position: relative; z-index: 1050; }
.btn.nx-sh-footer-lang-btn {
    border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); background: var(--nx-card-bg);
    color: var(--nx-text); font-size: var(--nx-font-size-sm); padding: 4px 10px; gap: 4px; box-shadow: none;
}
.nx-sh-caret { color: var(--nx-muted); margin-left: 2px; }
.dropup .nx-sh-caret,
.dropdown .nx-sh-caret { transition: transform var(--nx-transition); }
.dropup.show .nx-sh-caret { transform: rotate(180deg); }

.nx-sh-footer-lang-menu {
    border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06); padding: 6px; min-width: 140px; margin-bottom: 8px;
}
body.nx-theme .nx-sh-footer-lang-menu,
body.nx-theme .nx-sh-footer-currency-menu,
.nx-sh-footer-lang-menu,
.nx-sh-footer-currency-menu {
    position: absolute !important;
    top: auto !important;
    bottom: 100% !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    max-height: calc(100vh - 140px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1060;
}
body.nx-theme .nx-sh-footer-lang-menu::-webkit-scrollbar,
body.nx-theme .nx-sh-footer-currency-menu::-webkit-scrollbar {
    width: 8px;
}
body.nx-theme .nx-sh-footer-lang-menu::-webkit-scrollbar-thumb,
body.nx-theme .nx-sh-footer-currency-menu::-webkit-scrollbar-thumb {
    background: var(--nx-border);
    border-radius: 8px;
}
body.nx-theme .nx-sh-footer-lang-menu::-webkit-scrollbar-thumb:hover,
body.nx-theme .nx-sh-footer-currency-menu::-webkit-scrollbar-thumb:hover {
    background: var(--nx-muted);
}
body.nx-theme .nx-sh-footer-lang-menu,
body.nx-theme .nx-sh-footer-currency-menu {
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border) transparent;
}
a.dropdown-item.nx-sh-footer-lang-item { border-radius: 6px; padding: 6px 12px; font-weight: 400; color: var(--nx-text); }
.nx-sh-footer-currency { display: inline-block; position: relative; z-index: 1050; }
.btn.nx-sh-footer-currency-btn {
    border-radius: var(--nx-radius-sm); border: 1px solid var(--nx-border); background: var(--nx-card-bg);
    color: var(--nx-text); font-size: var(--nx-font-size-sm); padding: 4px 10px; gap: 4px; box-shadow: none;
}
.nx-sh-footer-currency-menu {
    border-radius: var(--nx-radius-md); border: 1px solid var(--nx-border); background: var(--nx-card-bg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.06); padding: 6px; min-width: 140px; margin-bottom: 8px;
}
a.dropdown-item.nx-sh-footer-lang-item.item.active { color: #fff; font-weight: 400; }

/* =====================  HOMEPAGE PANEL (includes/homepage-panel.tpl)  ===================== */
.nx-hp-domain-banner {
    background: linear-gradient(135deg, var(--nx-primary-hover) 0%, var(--nx-primary) 100%);
    border-radius: var(--nx-radius-card); padding: 24px 28px; color: #fff;
    box-shadow: 0 10px 30px rgba(var(--nx-primary-rgb),0.18);
    display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px;
}
h2.nx-hp-domain-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.5px; color: #fff; }
.nx-hp-domain-sub { margin: 4px 0 0; font-size: 13px; color: rgba(255,255,255,0.75); font-weight: 400; }
.nx-hp-domain-form { width: 100%; margin: 0; }
.nx-hp-domain-inputwrap {
    background: var(--nx-card-bg);
    border-radius: var(--nx-radius-card);
    padding: 5px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    gap: 6px;
    transition: box-shadow var(--nx-transition);
}
input.nx-hp-domain-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 8px 12px;
    font-size: var(--nx-font-size);
    font-weight: 400;
    color: var(--nx-text);
    background: transparent;
    box-shadow: none;
}
.btn.nx-hp-domain-btn {
    background: var(--nx-primary-hover);
    border: none;
    color: #fff;
    border-radius: calc(var(--nx-radius-card) - 5px);
    padding: 0 18px;
    font-weight: 400;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    flex-shrink: 0;
    white-space: nowrap;
}
.btn.nx-hp-domain-btn:hover {
    background: var(--nx-primary);
    color: #fff;
}
.nx-hp-domain-btn-ico { font-size: var(--nx-font-size-h3); vertical-align: middle; }

.nx-hp-panel {
    background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card);
    box-shadow: 0 1px 2px rgba(16,24,40,.04); display: flex; flex-direction: column; margin-bottom: 22px;
}
.nx-hp-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid var(--nx-border); }
.nx-hp-panel-head-left { display: flex; align-items: center; gap: 10px; }
.nx-hp-panel-ico {
    width: 30px; height: 30px; border-radius: 9px; background: var(--nx-hp-ico-bg); color: var(--nx-hp-ico-fg);
    display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
}
.nx-hp-panel-title { font-size: var(--nx-font-size-lg); font-weight: 600; color: var(--nx-text); }
a.nx-hp-panel-link { font-size: 13px; color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; text-decoration: none; }
.nx-hp-panel-body { padding: 20px; display: flex; flex-direction: column; }
.nx-hp-body-html { font-size: var(--nx-font-size-md); color: var(--nx-muted); padding-bottom: 8px; }
.nx-hp-ticket-list { display: flex; flex-direction: column; gap: 16px; }
a.nx-hp-ticket { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; text-decoration: none; transition: opacity 0.2s; }
.nx-hp-ticket-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; flex: 1; }
.nx-hp-ticket-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-hp-dot); margin-top: 7px; flex-shrink: 0; }
.nx-hp-ticket-textwrap { min-width: 0; display: flex; flex-direction: column; }
.nx-hp-ticket-title { font-size: 14.5px; font-weight: 600; color: var(--nx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-hp-ticket-meta { font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 400; margin-top: 1px; }
.nx-hp-ticket-time { font-size: 13px; color: var(--nx-muted); font-weight: 400; flex-shrink: 0; }
.nx-hp-empty { font-size: var(--nx-font-size-md); color: var(--nx-muted); text-align: center; padding: 12px 0; }
.nx-hp-sec-list { display: flex; flex-direction: column; gap: 20px; }
.nx-hp-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nx-hp-sec-left { display: flex; align-items: center; gap: 14px; }
.nx-hp-sec-ico {
    width: 42px; height: 42px; border-radius: var(--nx-radius-md); background: var(--nx-hp-ico-bg); color: var(--nx-hp-ico-fg);
    display: flex; align-items: center; justify-content: center; font-size: var(--nx-font-size-h2); flex-shrink: 0;
}
.nx-hp-sec-ico-warn {
    width: 42px; height: 42px; border-radius: var(--nx-radius-md); background: rgba(247, 144, 9, 0.08); color: var(--nx-warning-alt);
    display: flex; align-items: center; justify-content: center; font-size: var(--nx-font-size-h2); flex-shrink: 0;
}
.nx-hp-ms-22-fill { font-variation-settings: 'FILL' 1; font-size: var(--nx-font-size-h2); }
.nx-hp-ms-22 { font-size: var(--nx-font-size-h2); }
.nx-hp-sec-label { font-size: 14.5px; font-weight: 400; color: var(--nx-text); }
.nx-hp-sec-textwrap { display: flex; flex-direction: column; }
.nx-hp-sec-sublabel { font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 400; margin-top: 1px; }
.nx-hp-sec-status-green { font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-success-alt); }
a.nx-hp-sec-action { font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-primary-text, var(--nx-primary)); text-decoration: none; }
.nx-hp-prod-list { display: flex; flex-direction: column; }
.nx-hp-prod-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--nx-border); gap: 16px; }
.nx-hp-child-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--nx-border); gap: 12px; }
.nx-hp-noborder { border-bottom: none; }
.nx-hp-prod-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.nx-hp-prod-ico {
    width: 42px; height: 42px; border-radius: var(--nx-radius-md); background: var(--nx-hp-ico-bg); color: var(--nx-hp-ico-fg);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nx-hp-prod-textwrap { text-align: left; min-width: 0; display: flex; flex-direction: column; }
.nx-hp-prod-name { font-size: 14.5px; font-weight: 400; color: var(--nx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-hp-prod-meta { font-size: 12.5px; color: var(--nx-muted); font-weight: 400; margin-top: 2px; }
.nx-hp-prod-expiry { color: var(--nx-hp-expiry); font-weight: 400; }
.nx-hp-prod-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.nx-hp-prod-status {
    display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px; border-radius: var(--nx-radius-badge);
    font-size: var(--nx-font-size-sm); font-weight: 400; background: var(--nx-hp-st-bg); color: var(--nx-hp-st-fg); text-transform: capitalize;
}
.btn.nx-hp-prod-manage {
    border: 1px solid var(--nx-border); background: var(--nx-card-bg); color: var(--nx-text);
    font-weight: 400; font-size: 13px; border-radius: var(--nx-radius-sm); padding: 6px 14px; text-decoration: none; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
.btn.nx-hp-prod-manage:hover { background: rgba(0,0,0,0.03); }
.nx-hp-child-textwrap { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.nx-hp-child-link { font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-text); text-decoration: none; }
.nx-hp-child-span { font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-text); }
.nx-hp-child-right { flex-shrink: 0; text-align: right; }

/* =====================  CLIENT AREA HOME (clientareahome.tpl)  ===================== */
.nx-sh-gap24 { gap: 24px; }
.nx-dash-left-col { width: 264px; flex: 0 0 264px; display: flex; flex-direction: column; gap: 22px; }
.nx-dash-right-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 991.98px) {
    body.nx-theme .nx-dash-left-col,
    body.nx-theme .nx-dash-right-col {
        width: 100%;
        flex: 1 1 100%;
    }
    body.nx-theme .nx-dash-right-col > .row {
        margin-left: 0;
        margin-right: 0;
    }
    body.nx-theme .nx-dash-right-col > .row > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }
}

.nx-ca-profile {
    border-radius: var(--nx-radius-card); overflow: hidden;
    background: linear-gradient(155deg, var(--nx-primary) 0%, var(--nx-secondary) 100%);
    box-shadow: 0 12px 30px rgba(var(--nx-primary-rgb),.28); padding: 26px; position: relative;
}
.nx-ca-profile-deco { position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); }
.nx-ca-profile-avatar {
    width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--nx-primary-text, var(--nx-primary));
    display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: var(--nx-font-size-h2);
    border: 3px solid rgba(255,255,255,.55); margin-bottom: 20px;
}
.nx-ca-ms-30 { font-size: 30px; }
.nx-ca-ms-18 { font-size: var(--nx-font-size-h3); }
.nx-ca-ms-18-mid { font-size: var(--nx-font-size-h3); vertical-align: middle; }
.nx-ca-profile-name { color: #fff; font-size: var(--nx-font-size-h2); font-weight: 400; letter-spacing: -.3px; line-height: 1.25; }
.nx-ca-profile-addr { color: rgba(255,255,255,.92); font-size: var(--nx-font-size-md); font-weight: 400; margin-top: 14px; line-height: 1.95; }
.nx-ca-profile-actions { display: flex; gap: 10px; margin-top: 22px; }
a.nx-ca-profile-btn { flex: 1; text-align: center; background: #fff; color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; font-size: var(--nx-font-size-md); padding: 10px 0; border-radius: var(--nx-radius-md); text-decoration: none; border: 1px solid transparent; }
a.nx-ca-profile-btn2 {
    flex: 1;
    text-align: center;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.38);
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-weight: 400;
    font-size: var(--nx-font-size-md);
    padding: 10px 0;
    border-radius: var(--nx-radius-md);
    text-decoration: none;
}
a.nx-ca-profile-btn2:hover { background: rgba(255,255,255,.32); color: #fff; -webkit-text-fill-color: #fff; }

.nx-ca-card { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); padding: 20px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.nx-ca-card-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-weight-card-title); letter-spacing: .7px; text-transform: uppercase; color: var(--nx-muted); margin-bottom: 14px; }
.nx-ca-contact-list { display: flex; flex-direction: column; gap: 13px; margin-bottom: 16px; }
a.nx-ca-contact { display: flex; align-items: center; gap: 10px; font-size: var(--nx-font-size); font-weight: 400; color: var(--nx-text); text-decoration: none; }
.nx-ca-contact-ico { font-variation-settings: 'FILL' 1; font-size: 19px; color: var(--nx-primary-text, var(--nx-primary)); }
.nx-ca-nocontact { font-size: 13px; color: var(--nx-muted); font-weight: 400; }
a.nx-ca-more { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 400; color: var(--nx-muted); text-decoration: none; }
a.nx-ca-addcontact { display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(var(--nx-primary-rgb), 0.08); color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; font-size: 13px; padding: 10px 0; border-radius: var(--nx-radius-md); text-decoration: none; }
.nx-ca-shortcut-list { display: flex; flex-direction: column; gap: 13px; }

.nx-ca-banner-slider { position: relative; border-radius: var(--nx-radius-card); overflow: hidden; margin-bottom: 4px; }
.nx-ca-banner-content { flex: 1; padding-top: var(--nx-bpt); padding-bottom: var(--nx-bpb); padding-left: 36px; padding-right: 36px; z-index: 2; }
.nx-ca-banner-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.14); color: #dbe7ff; font-size: var(--nx-font-size-xs); font-weight: 400; letter-spacing: 0.5px; text-transform: uppercase; padding: 6px 12px; border-radius: var(--nx-radius-badge); margin-bottom: 16px; }
h2.nx-ca-banner-title { margin: 0; color: #fff; font-size: 29px; font-weight: 600; line-height: 1.15; letter-spacing: -0.6px; max-width: 420px; }
.nx-ca-banner-subtitle { margin: 12px 0 20px; color: #b9cbf0; font-size: var(--nx-font-size); max-width: 400px; }
a.nx-ca-banner-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; font-size: var(--nx-font-size); padding: 11px 20px; border-radius: var(--nx-radius-button); text-decoration: none; }
.nx-ca-banner-dots { position: absolute; bottom: 15px; left: 36px; z-index: 10; display: flex; gap: 6px; }

.nx-ca-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 4px; }
@media (max-width: 767.98px) {
    .nx-ca-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.nx-ca-stat-tile { background: var(--nx-card-bg); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-card); padding: 20px; box-shadow: 0 1px 2px rgba(16,24,40,.04); text-decoration: none; display: block; transition: transform var(--nx-transition); }
.nx-ca-stat-top { display: flex; justify-content: space-between; align-items: center; }
.nx-ca-stat-label { font-size: 13px; font-weight: 400; color: var(--nx-muted); }
.nx-ca-stat-ico { width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--nx-radius-md); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.nx-ca-stat-ico-primary { background: rgba(var(--nx-primary-rgb), 0.08); color: var(--nx-primary-text, var(--nx-primary)); }
.nx-ca-stat-ico-secondary { background: rgba(var(--nx-secondary-rgb), 0.08); color: var(--nx-secondary); }
.nx-ca-stat-ico-danger { background: rgba(var(--nx-danger-rgb, 240, 68, 56), 0.08); color: var(--nx-danger, #f04438); }
.nx-ca-stat-ico-green { background: rgba(18, 183, 106, 0.08); color: var(--nx-success-alt); }
.nx-ca-stat-num { font-size: 38px; font-weight: 400; letter-spacing: -1px; margin-top: 8px; }
.nx-ca-stat-num-primary { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-ca-stat-num-secondary { color: var(--nx-secondary); }
.nx-ca-stat-num-danger { color: var(--nx-danger, #f04438); }
.nx-ca-stat-num-green { color: var(--nx-success-alt); }
.nx-ca-stat-cap { font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 400; margin-top: 2px; }
.nx-ca-stat-ico-warning { background: rgba(247, 144, 9, 0.08); color: var(--nx-warning-alt); }
.nx-ca-stat-num-warning { color: var(--nx-warning-alt); }
.nx-ca-stat-num { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-prods-stat-grid { margin-bottom: 22px; }
@media (min-width: 992px) and (max-width: 1299.98px) {
    .nx-prods-stat-grid .nx-ca-stat-num { font-size: 32px; }
}

/* anchors (color / background) */
a.nx-sidebar-submenu-item { color: var(--nx-muted) !important; }
a.dropdown-item.nx-sh-flyout-item { color: var(--nx-text) !important; }
a.dropdown-item.nx-sh-menu-item:not(.active) { color: var(--nx-text) !important; }
a.nx-navbar-link.nx-sh-topnav-link, a.nx-navbar-link.nx-sh-topnav-link-dd { color: var(--nx-text); }
a.dropdown-item.nx-sh-topnav-item { color: var(--nx-text) !important; }
a.dropdown-item.nx-sh-footer-lang-item:not(.active) { color: var(--nx-text) !important; }
a.nx-hp-panel-link { color: var(--nx-primary-text, var(--nx-primary)); }
a.nx-hp-sec-action { color: var(--nx-primary-text, var(--nx-primary)); }
a.nx-hp-child-link { color: var(--nx-text); }
a.nx-ca-profile-btn { color: var(--nx-primary-text, var(--nx-primary)); background: #fff; }
a.nx-ca-profile-btn2 { color: #fff; -webkit-text-fill-color: #fff; background: rgba(255,255,255,.22); }
a.nx-ca-contact { color: var(--nx-text); }
a.nx-ca-more { color: var(--nx-muted); }
a.nx-ca-addcontact { color: var(--nx-primary-text, var(--nx-primary)); background: rgba(var(--nx-primary-rgb), 0.08); }
a.nx-ca-banner-btn { color: var(--nx-primary-text, var(--nx-primary)); background: #fff; }

/* buttons (color / background / border) */
.btn.nx-sh-openticket-btn { background: var(--nx-primary) !important; border: none !important; color: #fff !important; }
.btn.nx-sh-openticket-btn-cmp { background: var(--nx-primary) !important; border: none !important; color: #fff !important; }
.btn.nx-topbar-link.nx-sh-tb-btn { background: transparent !important; border: none !important; box-shadow: none !important; }
.btn.nx-topbar-link.nx-sh-lang-btn { background: transparent !important; border: none !important; box-shadow: none !important; }
.btn.nx-topbar-link.nx-sh-currency-btn { background: transparent !important; border: none !important; box-shadow: none !important; }
.btn.nx-sh-acct-btn, .btn.nx-sh-acct-btn-g4 { background: transparent !important; border: none !important; box-shadow: none !important; }
.btn.nx-sh-avatar-btn { background: transparent !important; border: none !important; box-shadow: none !important; }
.btn.nx-hp-prod-manage { border: 1px solid var(--nx-border) !important; background: var(--nx-card-bg) !important; color: var(--nx-text) !important; }
.btn.nx-hp-prod-manage:hover { background: rgba(0,0,0,0.03) !important; }

/* headings inside colored banners */
h2.nx-hp-domain-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.5px; color: #fff; }
h2.nx-ca-banner-title { margin: 0; color: #fff; font-size: 29px; font-weight: 600; line-height: 1.15; letter-spacing: -0.6px; }

@media (max-width: 767.98px) {
    .nx-ca-banner-content {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: min(var(--nx-bpt, 34px), 22px);
        padding-bottom: min(var(--nx-bpb, 34px), 22px);
    }
    h2.nx-ca-banner-title {
        font-size: 20px;
        line-height: 1.25;
        letter-spacing: -0.3px;
        max-width: none;
    }
    .nx-ca-banner-subtitle {
        font-size: var(--nx-font-size-sm);
        line-height: 1.45;
        margin: 8px 0 16px;
        max-width: none;
    }
    .nx-ca-banner-badge {
        margin-bottom: 12px;
        padding: 5px 10px;
        letter-spacing: .3px;
        white-space: nowrap;
    }
    a.nx-ca-banner-btn {
        padding: 11px 18px;
        white-space: nowrap;
    }
    .nx-ca-banner-dots {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 12px;
    }
}

body.nx-theme .nx-auth { text-align: left; }

body.nx-theme .nx-auth-head { margin-bottom: 22px; }
body.nx-theme .nx-auth-title {
    font-size: var(--nx-font-size-h2); font-weight: 600; letter-spacing: -0.3px;
    color: var(--nx-text); margin: 0 0 4px;
}
body.nx-theme .nx-auth-sub {
    font-size: var(--nx-font-size-md); color: var(--nx-muted); margin: 0; font-weight: 400;
}

body.nx-theme .nx-field { margin-bottom: 16px; }
body.nx-theme .nx-field .nx-field-label,
body.nx-theme .nx-auth label.nx-field-label {
    display: block; font-size: 12.5px; font-weight: 400;
    color: var(--nx-text); margin-bottom: 6px; letter-spacing: .1px;
}
body.nx-theme .nx-field-labelrow {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
body.nx-theme .nx-field-labelrow .nx-field-label { margin-bottom: 0; }

body.nx-theme .nx-auth .form-control,
body.nx-theme .nx-auth-input { height: 46px; }

/* Password reveal input group (keeps .input-group for reveal JS) */
body.nx-theme .nx-input-reveal { position: relative; display: block; }
body.nx-theme .nx-input-reveal .form-control {
    width: 100%;
    padding-right: 46px;
    border-radius: var(--nx-radius-input, 11px);
}
body.nx-theme .nx-input-reveal .nx-reveal-btn,
body.nx-theme .nx-input-reveal button.nx-reveal-btn {
    position: absolute; top: 0; right: 0; height: 46px; width: 46px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; box-shadow: none;
    color: var(--nx-muted); padding: 0; cursor: pointer; z-index: 3;
}
body.nx-theme .nx-input-reveal .nx-reveal-btn:hover { color: var(--nx-primary-text, var(--nx-primary)); }
body.nx-theme .nx-input-reveal .nx-reveal-btn .material-symbols-rounded { font-size: 20px; }
body.nx-theme .nx-input-reveal .nx-input-icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--nx-muted); pointer-events: none; z-index: 3;
}
body.nx-theme .nx-input-reveal .form-control.nx-input-has-icon { padding-left: 42px; }

body.nx-theme .nx-auth-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 400; color: var(--nx-muted);
    margin: 4px 0 18px; cursor: pointer;
}
body.nx-theme .nx-auth-check input { margin: 0; }
body.nx-theme .nx-auth-check span { user-select: none; }
body.nx-theme .nx-auth-check.is-inline {
    display: inline-flex;
    margin: 0;
    vertical-align: middle;
}

body.nx-theme .btn.nx-auth-btn,
body.nx-theme button.nx-auth-btn,
body.nx-theme input.nx-auth-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 48px; font-size: 14.5px; font-weight: 400;
    border-radius: var(--nx-radius-button, 11px);
}

body.nx-theme a.nx-auth-link {
    font-size: 12.5px; font-weight: 400; color: var(--nx-muted);
    text-decoration: none; transition: color var(--nx-transition);
}
body.nx-theme a.nx-auth-link:hover { color: var(--nx-primary-text, var(--nx-primary)); }
body.nx-theme a.nx-auth-link.strong { font-weight: 400; color: var(--nx-primary-text, var(--nx-primary)); }

body.nx-theme .nx-auth-foot {
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--nx-border);
    text-align: center; font-size: 13px; color: var(--nx-muted);
}
body.nx-theme .nx-auth-foot small { font-size: 13px; }

body.nx-theme .nx-auth-actions {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-top: 6px;
}
body.nx-theme .nx-auth-actions .btn { flex: 1 1 auto; }

/* Two-factor challenge widget spacing */
body.nx-theme .nx-auth .nx-2fa-challenge { margin-bottom: 18px; }
body.nx-theme .nx-auth .nx-2fa-challenge input.form-control { height: 46px; }
body.nx-theme .nx-2fa-backupcode {
    display: block; width: 100%; text-align: center;
    font-size: 26px; font-weight: 400; letter-spacing: 2px;
    color: var(--nx-text); background: var(--nx-bg);
    border: 1px dashed var(--nx-border); border-radius: var(--nx-radius-input, 11px);
    padding: 16px; margin: 18px 0;
}

/* Register - neutralize outer centered card, widen, tidy section cards */
body:has(#registration) .container > .w-100,
body:has(#frmCheckout) .container > .w-100 { max-width: 720px !important; }
body:has(#registration) .container > .w-100 > .card {
    background: transparent; border: none;
    box-shadow: none; padding: 0; border-radius: 0;
}
body.nx-theme #registration .card { margin-bottom: 18px; }
body.nx-theme #registration .card-title,
body.nx-theme #registration h3.card-title {
    font-size: var(--nx-font-size-xl); font-weight: 600; color: var(--nx-text);
    margin-bottom: 18px; letter-spacing: -0.2px;
}
/* Make bare .field inputs match nexum form-control */
body.nx-theme #registration .field,
body.nx-theme #registration input.field,
body.nx-theme #registration select.field {
    width: 100%; height: 44px; padding: 0 14px 0 40px;
    background: var(--nx-card-bg); color: var(--nx-text);
    border: 1px solid var(--nx-border); border-radius: var(--nx-radius-input, 11px);
    font-size: var(--nx-font-size); box-shadow: none; transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
body.nx-theme #registration .field:focus,
body.nx-theme #registration input.field:focus,
body.nx-theme #registration select.field:focus {
    outline: none; border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .15);
}

body.nx-theme #registration .intl-tel-input input.field,
body.nx-theme #registration .intl-tel-input input.field.form-control {
    padding-left: 96px;
}
body.nx-theme #registration .intl-tel-input .selected-flag {
    width: 84px;
    padding-left: 12px;
    background-color: var(--nx-bg);
    border-right: 1px solid var(--nx-border);
    border-top-left-radius: var(--nx-radius-input, 11px);
    border-bottom-left-radius: var(--nx-radius-input, 11px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
body.nx-theme #registration .intl-tel-input:focus-within .selected-flag {
    border-right-color: var(--nx-primary);
}
body.nx-theme #registration .prepend-icon:has(.intl-tel-input) .field-icon {
    display: none;
}

body.nx-theme #registration .prepend-icon { position: relative; }
body.nx-theme #registration .prepend-icon .field-icon {
    position: absolute; left: 0; top: 0; height: 44px; width: 38px;
    display: flex; align-items: center; justify-content: center;
    color: var(--nx-muted); z-index: 2; pointer-events: none; margin: 0;
}
body.nx-theme #registration .prepend-icon .field-icon i { color: var(--nx-muted); font-size: var(--nx-font-size); }
body.nx-theme #registration .prepend-icon .form-control,
body.nx-theme #registration .prepend-icon .nx-form-control,
body.nx-theme #registration .prepend-icon .nx-custom-select-trigger {
    padding-left: 40px;
}
body.nx-theme #registration .prepend-icon .nx-custom-select-wrapper { display: block; }

body.nx-theme #registration .nx-reg-optin {
    margin-top: 4px;
}
body.nx-theme #registration .password-strength-meter { margin-top: 8px; }
body.nx-theme #registration .btn.btn-lg.btn-primary { min-width: 240px; height: 48px; font-weight: 400; }

body.nx-theme .nx-store-order { max-width: 960px; margin: 0 auto; }
body.nx-theme .nx-store-order .store-order-head {
    background: var(--nx-card-bg); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 18px); padding: 26px 28px;
    box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04)); margin-bottom: 20px;
}
body.nx-theme .nx-store-order .store-order-head h2 {
    font-size: var(--nx-font-size-h2); font-weight: 600; color: var(--nx-text);
    letter-spacing: -0.3px; margin: 0 0 8px;
}
body.nx-theme .nx-store-order .store-order-head p {
    font-size: var(--nx-font-size); color: var(--nx-muted); margin: 0; line-height: 1.6;
}
body.nx-theme .nx-store-order .payment-term h4,
body.nx-theme .nx-store-order > form > h4 {
    font-size: 13px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .6px; color: var(--nx-muted); margin: 0 0 10px;
}
body.nx-theme .nx-store-order .payment-term .custom-select,
body.nx-theme .nx-store-order .payment-term select { height: 46px; }

body.nx-theme .nx-store-order .store-domain-tabs {
    border: none; display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0;
}
body.nx-theme .nx-store-order .store-domain-tabs .nav-item { margin: 0; }
body.nx-theme .nx-store-order .store-domain-tabs .nav-link {
    border: 1px solid var(--nx-border); border-radius: var(--nx-radius-button, 11px);
    background: var(--nx-card-bg); color: var(--nx-muted); font-weight: 400; font-size: var(--nx-font-size-md);
    padding: 12px 22px; transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
body.nx-theme .nx-store-order .store-domain-tabs .nav-link:hover {
    border-color: var(--nx-primary); color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nx-store-order .store-domain-tabs .nav-link.active,
body.nx-theme .nx-store-order .store-domain-tabs .nav-item.active .nav-link {
    background: var(--nx-primary); border-color: var(--nx-primary);
    color: #fff;
}
body.nx-theme .nx-store-order .store-domain-tab-content {
    background: var(--nx-card-bg); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 18px); padding: 22px; margin-top: 16px;
}
body.nx-theme .nx-store-order .store-domain-tab-content .form-control,
body.nx-theme .nx-store-order .store-domain-tab-content .custom-select { height: 46px; }
body.nx-theme .nx-store-order .domain-validation.ok { color: var(--nx-success); font-weight: 400; }
body.nx-theme .nx-store-order .store-order-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 22px; flex-wrap: wrap;
}
body.nx-theme .nx-store-order .store-order-actions .actions-right {
    display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto;
}
body.nx-theme .nx-store-order .store-promoted-product h3 {
    font-size: 20px; font-weight: 600; color: var(--nx-text); margin-bottom: 4px;
}
body.nx-theme .nx-store-order .store-promoted-product h4 {
    font-size: var(--nx-font-size); color: var(--nx-muted); font-weight: 600; margin-bottom: 12px;
}
body.nx-theme .nx-store-order .store-promoted-product .features { list-style: none; padding: 0; margin: 12px 0; }
body.nx-theme .nx-store-order .store-promoted-product .features li {
    display: flex; align-items: center; gap: 8px; font-size: var(--nx-font-size-md);
    color: var(--nx-text); padding: 4px 0;
}
body.nx-theme .nx-store-order .store-promoted-product .features li i { color: var(--nx-success); }

body.nx-theme .nx-state {
    min-height: 58vh; display: flex; align-items: center;
    justify-content: center; padding: 40px 16px;
}
body.nx-theme .nx-state-card {
    width: 100%; max-width: 520px; text-align: center;
    background: var(--nx-card-bg); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 18px); padding: 44px 40px;
    box-shadow: var(--nx-shadow, 0 1px 2px rgba(16,24,40,.04));
}
body.nx-theme .nx-state-icon {
    width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
body.nx-theme .nx-state-icon .material-symbols-rounded { font-size: 40px; line-height: 1; }
body.nx-theme .nx-state-icon.danger { background: rgba(var(--nx-danger-rgb, 240, 68, 56),.10); color: var(--nx-danger, #f04438); }
body.nx-theme .nx-state-icon.warning { background: rgba(247,144,9,.12); color: var(--nx-warning, #f79009); }
body.nx-theme .nx-state-icon.info { background: rgba(var(--nx-primary-rgb), .10); color: var(--nx-primary-text, var(--nx-primary)); }
body.nx-theme .nx-state-card h1 {
    font-size: 26px; font-weight: 600; letter-spacing: -0.4px;
    color: var(--nx-text); margin: 0 0 8px;
}
body.nx-theme .nx-state-card p,
body.nx-theme .nx-state-card .nx-state-text {
    font-size: var(--nx-font-size); color: var(--nx-muted); margin: 0 0 8px; line-height: 1.6;
}
body.nx-theme .nx-state-list {
    list-style: none; padding: 0; margin: 14px 0; text-align: left;
    border: 1px solid var(--nx-border); border-radius: var(--nx-radius-input, 11px);
    overflow: hidden;
}
body.nx-theme .nx-state-list li {
    padding: 10px 16px; font-size: var(--nx-font-size-md); color: var(--nx-text);
    border-bottom: 1px solid var(--nx-border);
}
body.nx-theme .nx-state-list li:last-child { border-bottom: none; }
body.nx-theme .nx-state-meta {
    display: inline-flex; flex-direction: column; gap: 4px; text-align: left;
    margin: 8px auto 4px; font-size: var(--nx-font-size-md); color: var(--nx-text);
}
body.nx-theme .nx-state-meta strong { color: var(--nx-text); }
body.nx-theme .nx-state-actions {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px;
}
body.nx-theme .nx-state-actions .btn {
    display: inline-flex; align-items: center; gap: 8px;
}
body.nx-theme .nx-state-actions .material-symbols-rounded { font-size: 19px; }

/* --- Safety net: alert body/title + address radio active --- */
.nx-alert-body { flex: 1 1 auto; min-width: 0; }
.nx-alert-body ul { margin: 6px 0 0; padding-left: 18px; }
.nx-alert-title { font-size: var(--nx-font-size-lg); font-weight: 600; margin: 0 0 4px; color: inherit; }
.nx-address-radio-label.active { border-color: var(--nx-primary) !important; box-shadow: 0 0 0 1px var(--nx-primary); }

body.nx-theme .well {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 12px);
    color: var(--nx-text);
    box-shadow: none;
    padding: var(--nx-card-padding, 20px);
}
body.nx-theme .jumbotron {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 12px);
    color: var(--nx-text);
}
body.nx-theme .progress {
    background: var(--nx-pill-open-bg, rgba(var(--nx-primary-rgb), 0.10));
    border-radius: var(--nx-radius-badge);
    box-shadow: none;
    height: 16px;
}
body.nx-theme .progress-bar {
    background-color: var(--nx-primary);
    color: #fff;
}
body.nx-theme .progress-bar.progress-bar-success { background-color: var(--nx-success, #12b76a); }
body.nx-theme .progress-bar.progress-bar-warning { background-color: var(--nx-warning-alt); }
body.nx-theme .progress-bar.progress-bar-danger  { background-color: var(--nx-danger, #f04438); }
body.nx-theme .tab-content {
    color: var(--nx-text);
}
body.nx-theme .nav-pills .nav-link {
    color: var(--nx-muted);
    border-radius: var(--nx-radius-button, 8px);
}
body.nx-theme .nav-pills .nav-link.active {
    background: var(--nx-primary);
    color: #fff;
}
/* Raw module output containers rendered by WHMCS product/service modules */
body.nx-theme #moduleoutput,
body.nx-theme .product-details-module,
body.nx-theme .module-output {
    color: var(--nx-text);
}
body.nx-theme #moduleoutput .table,
body.nx-theme .product-details-module .table,
body.nx-theme .module-output .table {
    color: var(--nx-text);
    background: transparent;
}
body.nx-theme #moduleoutput .table th,
body.nx-theme .product-details-module .table th,
body.nx-theme .module-output .table th {
    color: var(--nx-muted);
    border-color: var(--nx-border);
}
body.nx-theme #moduleoutput .table td,
body.nx-theme .product-details-module .table td,
body.nx-theme .module-output .table td {
    border-color: var(--nx-border);
}
body.nx-theme .panel-group .panel,
body.nx-theme .panel-default {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-text);
}
/* Homepage panel raw body HTML emitted by WHMCS ({$output} / getBodyHtml) */
body.nx-theme .nx-hp-body-html .table {
    color: var(--nx-text);
    background: transparent;
    margin-bottom: 0;
}
body.nx-theme .nx-hp-body-html .table th,
body.nx-theme .nx-hp-body-html .table td {
    border-color: var(--nx-border);
}
body.nx-theme .nx-hp-body-html .btn-default {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-text);
}
/* Dark-mode fine-tuning for the raw module output */
html.nx-dark body .well,
html.nx-dark body .jumbotron,
html.nx-dark body .panel-default,
html.nx-dark body .panel-group .panel {
    background: var(--nx-card-bg);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

/* ---------- Card-type pills (account-paymentmethods-manage.tpl) ---------- */
/* Moved out of a per-page <style> block that hardcoded an indigo active tint. */
body.nx-theme .nx-cc-type-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--nx-space-2);
    padding: 10px var(--nx-space-4);
    border-radius: var(--nx-radius-md);
    border: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-weight: 400;
    font-size: var(--nx-font-size-md);
    cursor: pointer;
    transition: border-color var(--nx-transition), background var(--nx-transition);
    margin: 0;
}
body.nx-theme .nx-cc-type-pill:hover { border-color: var(--nx-primary); }
body.nx-theme .nx-cc-type-pill.active {
    border: 2px solid var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.05);
    color: var(--nx-primary-text, var(--nx-primary));
    padding: 9px 15px;
}

/* ---------- Country dropdown (clientareadetails.tpl) ---------- */
/* WHMCS renders its own <select>; the custom skin is suppressed here. */
body.nx-theme .nx-custom-country-dropdown-wrap select { display: block; }
body.nx-theme .nx-custom-country-dropdown-wrap .nx-custom-select-wrapper { display: none; }

/* ---------- Domain detail tabs (clientareadomaindetails.tpl) ---------- */
body.nx-theme .nav-tabs .nav-link { background: transparent; }
body.nx-theme .nav-tabs .nav-link:hover {
    background: rgba(var(--nx-primary-rgb), 0.05);
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nav-tabs .nav-link.active {
    background: rgba(var(--nx-primary-rgb), 0.08);
    color: var(--nx-primary-text, var(--nx-primary));
    border: none;
}
body.nx-theme .py-2-5 { padding-top: 10px; padding-bottom: 10px; }

/* ---------- View ticket (viewticket.tpl) ---------- */
body.nx-theme .ticket-details-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--nx-muted);
}
body.nx-theme .ticket-details-value {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
    text-align: right;
}

/* ---------- Destructive buttons ---------- */
body.nx-theme .btn-delete:hover,
body.nx-theme .nx-btn-close-ticket:hover {
    background: rgba(var(--nx-danger-rgb), 0.06);
    border-color: rgba(var(--nx-danger-rgb), 0.45);
    color: var(--nx-danger);
}
html.nx-dark body .btn-delete,
html.nx-dark body .nx-btn-close-ticket {
    border-color: rgba(var(--nx-danger-rgb), 0.40);
    background: rgba(var(--nx-danger-rgb), 0.10);
    color: var(--nx-danger);
}
html.nx-dark body .btn-delete:hover,
html.nx-dark body .nx-btn-close-ticket:hover {
    background: rgba(var(--nx-danger-rgb), 0.18);
}

/* Text */
body.nx-theme .nx-u-text { color: var(--nx-text); }
body.nx-theme .nx-u-muted { color: var(--nx-muted); }
body.nx-theme .nx-u-strong { font-weight: 400; color: var(--nx-text); }
body.nx-theme .nx-u-medium { font-weight: 400; color: var(--nx-text); }
body.nx-theme .nx-u-body { color: var(--nx-text); font-size: 14.5px; }
body.nx-theme .nx-u-body-mb-16 { color: var(--nx-text); font-size: 14.5px; margin-bottom: var(--nx-space-4); }
body.nx-theme .nx-u-body-mb-18 { color: var(--nx-text); font-size: 14.5px; margin-bottom: 18px; }
body.nx-theme .nx-u-body-mb-20 { color: var(--nx-text); font-size: 14.5px; margin-bottom: var(--nx-space-5); }
body.nx-theme .nx-u-muted-sm { color: var(--nx-muted); font-size: var(--nx-font-size-md); }
body.nx-theme .nx-u-muted-grow { color: var(--nx-muted); font-size: var(--nx-font-size-md); flex-grow: 1; }
body.nx-theme .nx-u-muted-mt-4 { color: var(--nx-muted); font-size: var(--nx-font-size-md); font-weight: 400; margin-top: var(--nx-space-1); }
body.nx-theme .nx-u-muted-mb-14 { color: var(--nx-muted); font-size: 13px; font-weight: 400; margin-bottom: 14px; }
body.nx-theme .nx-u-muted-mt-12 { color: var(--nx-muted); margin: var(--nx-space-3) 0 0; }
body.nx-theme .nx-u-muted-margin-top { color: var(--nx-muted); margin-top: var(--nx-space-3); }
body.nx-theme .nx-u-muted-link {
    color: var(--nx-muted);
    text-decoration: none;
    transition: color var(--nx-transition);
}
body.nx-theme .nx-u-muted-link:hover { color: var(--nx-primary-text, var(--nx-primary)); }

/* Headings */
body.nx-theme .nx-u-section-title {
    color: var(--nx-text);
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: var(--nx-space-7) 0 var(--nx-space-6);
}
body.nx-theme .nx-u-section-title-tight {
    color: var(--nx-text);
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: var(--nx-space-2) 0 var(--nx-space-6);
}
body.nx-theme .nx-u-h-19 { color: var(--nx-text); font-weight: 400; font-size: 19px; }
body.nx-theme .nx-u-h-18 { color: var(--nx-text); font-weight: 400; font-size: var(--nx-font-size-h3); margin-bottom: var(--nx-space-3); }
body.nx-theme .nx-u-h-18-flush { margin: 0; font-size: var(--nx-font-size-h3); font-weight: 400; color: var(--nx-text); }
body.nx-theme .nx-u-h-16 { margin: 0 0 var(--nx-space-1); font-size: var(--nx-font-size-xl); font-weight: 400; color: var(--nx-text); }

/* Labels + small print */
body.nx-theme .nx-u-label-muted { font-weight: 400; color: var(--nx-muted); font-size: var(--nx-font-size-md); }
body.nx-theme .nx-u-label-strong { font-weight: 400; color: var(--nx-text); font-size: var(--nx-font-size-md); }
body.nx-theme .nx-u-label-lg { font-weight: 400; color: var(--nx-text); font-size: var(--nx-font-size-lg); }
body.nx-theme .nx-u-block-strong { display: block; font-weight: 400; color: var(--nx-text); font-size: var(--nx-font-size); }
body.nx-theme .nx-u-eyebrow {
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--nx-space-2);
    display: block;
}
body.nx-theme .nx-u-hint { font-size: var(--nx-font-size-sm); color: var(--nx-muted); font-weight: 400; margin-top: 6px; }
body.nx-theme .nx-u-sub { font-size: 12.5px; color: var(--nx-muted); font-weight: 400; margin-top: 2px; }
body.nx-theme .nx-u-sub-block { display: block; font-size: 12.5px; color: var(--nx-muted); font-weight: 400; margin-top: 2px; }

/* Surfaces */
body.nx-theme .nx-u-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow-sm);
}
body.nx-theme .nx-u-tile-link {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    text-decoration: none;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
    gap: var(--nx-space-4);
    min-height: 84px;
    height: 100%;
}
body.nx-theme .nx-u-tile-link:hover { border-color: var(--nx-primary); }

body.nx-theme .nx-u-center { text-align: center; }
body.nx-theme .nx-u-block { display: block; }
/* A form that only wraps a button, so it must not break the row it sits in. */
body.nx-theme .nx-u-inline-form { display: inline; }

/* Inline row for an icon beside its label. */
body.nx-theme .nx-u-inline-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.nx-theme .nx-u-inline-row-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Icon sizes, so a Material Symbol never needs an inline font-size. */
body.nx-theme .nx-u-ico-18 { font-size: 18px; }
body.nx-theme .nx-u-ico-22 { font-size: 22px; }

/* Spacing steps used by the payment and oauth partials. */
body.nx-theme .nx-u-mb-8 { margin-bottom: var(--nx-space-2); }
body.nx-theme .nx-u-mb-16 { margin-bottom: var(--nx-space-4); }
body.nx-theme .nx-u-my-14 { margin: 14px 0; }

body.nx-theme .nx-u-choice-row {
    display: flex;
    align-items: flex-start;
    gap: var(--nx-space-3);
    padding: var(--nx-space-3) var(--nx-space-4);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    margin-bottom: var(--nx-space-2);
    cursor: pointer;
    font-size: var(--nx-font-size-md);
    transition: border-color var(--nx-transition), background-color var(--nx-transition);
}
body.nx-theme .nx-u-choice-row:last-child { margin-bottom: 0; }
body.nx-theme .nx-u-choice-row:hover { border-color: color-mix(in srgb, var(--nx-primary) 40%, var(--nx-border)); }
body.nx-theme .nx-u-choice-row:has(input:checked) {
    border-color: var(--nx-primary);
    background: color-mix(in srgb, var(--nx-primary) 6%, var(--nx-card-bg));
}
body.nx-theme .nx-u-choice-row input[type="radio"] { margin-top: 3px; flex-shrink: 0; }
body.nx-theme .nx-u-choice-row .name { font-weight: var(--nx-weight-heading); color: var(--nx-text); }
body.nx-theme .nx-u-choice-row .text-truncate { color: var(--nx-muted); font-size: var(--nx-font-size-sm); }

/* Thin progress bar for usage meters. */
body.nx-theme .nx-u-progress-thin {
    height: 10px;
    margin-top: 10px;
}

body.nx-theme .nx-u-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--nx-radius-badge);
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    white-space: nowrap;
    color: var(--nx-muted);
    background: color-mix(in srgb, var(--nx-muted) 12%, var(--nx-card-bg));
}
body.nx-theme .nx-u-pill.is-success {
    color: var(--nx-success);
    background: color-mix(in srgb, var(--nx-success) 12%, var(--nx-card-bg));
}
body.nx-theme .nx-u-pill.is-danger {
    color: var(--nx-danger);
    background: color-mix(in srgb, var(--nx-danger) 12%, var(--nx-card-bg));
}
body.nx-theme .nx-u-pill.is-warning {
    color: var(--nx-warning);
    background: color-mix(in srgb, var(--nx-warning) 12%, var(--nx-card-bg));
}
body.nx-theme .nx-u-pill.is-primary {
    color: var(--nx-primary-text, var(--nx-primary));
    background: color-mix(in srgb, var(--nx-primary) 12%, var(--nx-card-bg));
}
html.nx-dark body.nx-theme .nx-u-pill.is-primary {
    color: #fff !important;
    background: color-mix(in srgb, var(--nx-primary) 32%, var(--nx-card-bg)) !important;
}
body.nx-theme .nx-u-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--nx-muted);
}
body.nx-theme .nx-u-dot.is-success { background: var(--nx-success); }
body.nx-theme .nx-u-dot.is-danger  { background: var(--nx-danger); }
body.nx-theme .nx-u-dot.is-warning { background: var(--nx-warning); }
body.nx-theme .nx-u-dot.is-primary { background: var(--nx-primary); }

/* Inside a pill the dot inherits the pill's own colour. */
body.nx-theme .nx-u-pill .nx-u-dot { background: currentColor; }

/* Square tinted tile for a leading icon, same tone scale as the pills. */
body.nx-theme .nx-u-tint-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--nx-radius-md);
    color: var(--nx-muted);
    background: color-mix(in srgb, var(--nx-muted) 12%, var(--nx-card-bg));
}
body.nx-theme .nx-u-tint-tile.is-success {
    color: var(--nx-success);
    background: color-mix(in srgb, var(--nx-success) 12%, var(--nx-card-bg));
}
body.nx-theme .nx-u-tint-tile.is-danger {
    color: var(--nx-danger);
    background: color-mix(in srgb, var(--nx-danger) 12%, var(--nx-card-bg));
}
body.nx-theme .nx-u-tint-tile.is-warning {
    color: var(--nx-warning);
    background: color-mix(in srgb, var(--nx-warning) 12%, var(--nx-card-bg));
}
body.nx-theme .nx-u-tint-tile.is-primary {
    color: var(--nx-primary-text, var(--nx-primary));
    background: color-mix(in srgb, var(--nx-primary) 12%, var(--nx-card-bg));
}

body.nx-theme .nx-sj-preview {
    min-height: 130px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    opacity: 0;
    transition: opacity var(--nx-transition-slow)-in-out;
}
body.nx-theme .nx-sj-actions {
    gap: 6px;
    min-width: 250px;
}
body.nx-theme .nx-sj-actions #sitejetSsoButton { min-width: 140px; }
body.nx-theme .nx-u-list-link {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    padding: 14px var(--nx-space-4);
    gap: var(--nx-space-3);
    text-decoration: none;
    align-items: flex-start;
    transition: border-color var(--nx-transition);
}
body.nx-theme .nx-u-list-link:hover { border-color: var(--nx-primary); }
body.nx-theme .nx-u-chip-link {
    padding: 14px 18px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-button);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    text-decoration: none;
    font-weight: 400;
    transition: border-color var(--nx-transition), background var(--nx-transition);
}
body.nx-theme .nx-u-chip-link:hover { border-color: var(--nx-primary); }
body.nx-theme .nx-u-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--nx-space-3) var(--nx-space-4);
    border-radius: var(--nx-radius-md);
    border: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-weight: 400;
    font-size: var(--nx-font-size-md);
    cursor: pointer;
    transition: border-color var(--nx-transition), background var(--nx-transition);
    margin: 0;
}
body.nx-theme .nx-u-option-row.active {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), 0.04);
}

/* Was a hardcoded indigo rgba(79,70,229,.08); now follows the admin primary. */
body.nx-theme .nx-u-icon-tile {
    width: 44px;
    height: 44px;
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-primary-rgb), 0.08);
    color: var(--nx-primary-text, var(--nx-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
body.nx-theme .nx-u-ico-primary { font-size: 20px; color: var(--nx-primary-text, var(--nx-primary)); flex-shrink: 0; }
body.nx-theme .nx-u-meter {
    width: 260px;
    max-width: 80%;
    height: 8px;
    border-radius: var(--nx-radius-badge);
    background: var(--nx-border);
    overflow: hidden;
}
body.nx-theme .nx-u-bg-primary { background: var(--nx-primary); }
body.nx-theme .nx-u-3ds-frame {
    width: 100%;
    border: 0;
    border-radius: var(--nx-radius-input);
    background: var(--nx-card-bg);
}

/* Form controls */
body.nx-theme .nx-u-check { width: 18px; height: 18px; }
body.nx-theme .nx-u-check-static { width: 18px; height: 18px; margin: 0; position: static; }
body.nx-theme .nx-u-check-pointer { cursor: pointer; width: 18px; height: 18px; margin: 0; }
body.nx-theme .nx-u-check-label {
    gap: 10px;
    font-weight: 400;
    color: var(--nx-text);
    cursor: pointer;
    margin: 0;
}

/* Layout */
body.nx-theme .nx-u-narrow { max-width: 540px; margin: 0 auto; }
body.nx-theme .nx-u-plain-list {
    background: transparent;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}
body.nx-theme .nx-u-stack-10 { display: flex; flex-direction: column; gap: 10px; }
body.nx-theme .nx-u-stack-12 { display: flex; flex-direction: column; gap: var(--nx-space-3); margin-bottom: var(--nx-space-2); }
body.nx-theme .nx-u-crumb-sep {
    margin: 0 var(--nx-space-2);
    color: var(--nx-muted);
    font-size: var(--nx-font-size-sm);
    display: inline-block;
    transform: translateY(-0.5px);
}

body.nx-theme .nx-crumb {
    display: flex;
    align-items: center;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
}
body.nx-theme .nx-crumb-link {
    color: var(--nx-muted);
    font-weight: 400;
    text-decoration: none;
    transition: color var(--nx-transition);
}
body.nx-theme .nx-crumb-link:hover,
body.nx-theme .nx-crumb-link:focus-visible {
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: none;
}
body.nx-theme .nx-crumb.is-current {
    color: var(--nx-primary-text, var(--nx-primary));
}

/* Spacing helpers */
body.nx-theme .nx-u-gap-8-wrap { gap: var(--nx-space-2); flex-wrap: wrap; }
body.nx-theme .nx-u-gap-10 { gap: 10px; }
body.nx-theme .nx-u-gap-10-pad { gap: 10px; padding: var(--nx-space-2) 0; }
body.nx-theme .nx-u-gap-10-mb-20 { gap: 10px; margin-bottom: var(--nx-space-5); }
body.nx-theme .nx-u-gap-12 { gap: var(--nx-space-3); }
body.nx-theme .nx-u-gap-16-0 { gap: var(--nx-space-4) 0; }
body.nx-theme .nx-u-gap-20 { gap: var(--nx-space-5); margin-bottom: var(--nx-space-2); }
body.nx-theme .nx-u-m-0 { margin: 0; }
body.nx-theme .nx-u-mb-0 { margin-bottom: 0; }
body.nx-theme .nx-u-mb-20 { margin-bottom: var(--nx-space-5); }
body.nx-theme .nx-u-mb-24 { margin-bottom: var(--nx-space-6); }
body.nx-theme .nx-u-mt-24 { margin-top: var(--nx-space-6); }
body.nx-theme .nx-u-pad-30 { padding: 30px; }

/* ---- Phone number input (intl-tel-input) ---- */
body.nx-theme .intl-tel-input .country-list {
    background-color: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    box-shadow: var(--nx-shadow);
    color: var(--nx-text);
}
body.nx-theme .intl-tel-input .country-list .divider { border-bottom-color: var(--nx-border); }
body.nx-theme .intl-tel-input .country-list .country { color: var(--nx-text); }
body.nx-theme .intl-tel-input .country-list .country .dial-code { color: var(--nx-muted); }
body.nx-theme .intl-tel-input .country-list .country.highlight,
body.nx-theme .intl-tel-input .country-list .country:hover {
    background-color: rgba(var(--nx-primary-rgb), .08);
}
body.nx-theme .intl-tel-input .selected-flag .iti-arrow { border-top-color: var(--nx-muted); }
body.nx-theme .intl-tel-input .selected-flag .iti-arrow.up { border-bottom-color: var(--nx-muted); }
body.nx-theme .intl-tel-input.separate-dial-code .selected-flag {
    background-color: var(--nx-bg);
    color: var(--nx-text);
    font-weight: 400;
}
body.nx-theme .intl-tel-input.separate-dial-code .selected-dial-code { color: var(--nx-text); }
body.nx-theme .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
    background-color: rgba(var(--nx-primary-rgb), .08);
}

body.nx-theme #registration .card,
body.nx-theme .card:has(.intl-tel-input),
body.nx-theme .panel:has(.intl-tel-input),
body.nx-theme .card:has(.nx-custom-select-wrapper),
body.nx-theme .panel:has(.nx-custom-select-wrapper) {
    overflow: visible;
}
body.nx-theme .intl-tel-input .country-list {
    z-index: 1000;
    min-width: 260px;
    max-height: 240px;
    overflow-y: auto;
}
body.nx-theme .intl-tel-input .country-list .country {
    padding: 9px 12px;
    line-height: 1.3;
}
@media (max-width: 500px) {
    body.nx-theme .intl-tel-input .country-list {
        min-width: 0;
        width: max-content;
        max-width: min(86vw, 320px);
        max-height: 210px;
    }
    body.nx-theme .intl-tel-input .country-list .country {
        white-space: nowrap;
    }
}

body.nx-theme .intl-tel-input .form-control,
body.nx-theme .intl-tel-input input.field { padding-left: 52px; }
body.nx-theme .intl-tel-input.iti-sdc-2 .form-control,
body.nx-theme .intl-tel-input.iti-sdc-2 input.field { padding-left: 66px; }
body.nx-theme .intl-tel-input.iti-sdc-3 .form-control,
body.nx-theme .intl-tel-input.iti-sdc-3 input.field { padding-left: 74px; }
body.nx-theme .intl-tel-input.allow-dropdown.iti-sdc-2 .form-control,
body.nx-theme .intl-tel-input.allow-dropdown.iti-sdc-2 input.field { padding-left: 76px; }
body.nx-theme .intl-tel-input.allow-dropdown.iti-sdc-3 .form-control,
body.nx-theme .intl-tel-input.allow-dropdown.iti-sdc-3 input.field { padding-left: 84px; }

body.nx-theme .intl-tel-input.separate-dial-code .selected-flag {
    border-top-left-radius: var(--nx-radius-input, 11px);
    border-bottom-left-radius: var(--nx-radius-input, 11px);
    border-right: 1px solid var(--nx-border);
}
body.nx-theme .intl-tel-input { width: 100%; display: block; }

body.nx-theme .intl-tel-input:focus-within .selected-flag {
    border-right-color: var(--nx-primary);
}

body.nx-theme .bootstrap-switch { border-color: var(--nx-border); }
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
    background-color: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
}
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
    background-color: var(--nx-success);
    border-color: var(--nx-success);
    color: #fff;
}
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
    background-color: var(--nx-danger);
    border-color: var(--nx-danger);
    color: #fff;
}
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary,
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    background-color: var(--nx-bg);
    border-color: var(--nx-border);
    color: var(--nx-text);
}
body.nx-theme .bootstrap-switch .bootstrap-switch-label {
    background-color: var(--nx-card-bg);
    color: var(--nx-text);
}
body.nx-theme .bootstrap-switch {
    border: none;
    border-radius: var(--nx-radius-badge);
    box-shadow: none;
}
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-on,
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-off {
    min-width: 0 !important;
    font-size: 0;
}
body.nx-theme .bootstrap-switch .bootstrap-switch-label {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px;
    margin: 2px;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    background-color: #fff !important;
}

/* ---- Lightbox ---- */
body.nx-theme .lb-outerContainer {
    background-color: var(--nx-card-bg);
    border-radius: var(--nx-radius-md);
}
body.nx-theme .lb-dataContainer { background: var(--nx-card-bg); }
body.nx-theme .lb-data .lb-caption { color: var(--nx-text); }
body.nx-theme .lb-data .lb-number { color: var(--nx-muted); }

/* ---- Captcha popup ---- */
body.nx-theme .captcha-overlay-popup {
    background-color: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    color: var(--nx-text);
    box-shadow: var(--nx-shadow);
}

/* ---------- shared lift + glow hover ---------- */
.nx-lift {
    transition: transform var(--nx-transition-slow), box-shadow var(--nx-transition-slow), border-color var(--nx-transition-slow);
}

/* ---------- section heading: eyebrow + title ---------- */
.nx-sec { margin: 34px 0 16px; }
.nx-eyebrow {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-sec-title {
    margin: 8px 0 0;
    font-size: 24px;
    font-weight: var(--nx-weight-heading, 800);
    letter-spacing: -.6px;
    color: var(--nx-text);
}

/* ---------- dual-tone icon tile ---------- */
.nx-ico-tile {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: var(--nx-radius-md);
    background: color-mix(in srgb, var(--nx-primary) 12%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nx-ico-tile .material-symbols-rounded {
    font-size: 22px;
    color: var(--nx-primary-text, var(--nx-primary));
    font-variation-settings: 'FILL' 0, 'wght' 400;
}
.nx-ico-tile-lg { width: 46px; height: 46px; }
.nx-ico-tile-lg .material-symbols-rounded { font-size: 25px; }

/* ---------- hero (guest) ---------- */
.nx-hero {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: var(--nx-card-gap, 20px);
    align-items: stretch;
    margin-bottom: var(--nx-card-gap, 20px);
}
.nx-hero-main { padding: 42px 40px; }
.nx-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--nx-primary-text, var(--nx-primary));
    background: color-mix(in srgb, var(--nx-primary) 12%, transparent);
    padding: 6px 12px;
    border-radius: var(--nx-radius-badge);
}
.nx-hero-badge .material-symbols-rounded { font-size: 16px; }
.nx-hero-title {
    margin: 18px 0 0;
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: -1.2px;
    font-weight: var(--nx-weight-heading, 800);
    color: var(--nx-text);
    text-wrap: pretty;
}
.nx-hero-sub {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--nx-muted);
    max-width: 520px;
    text-wrap: pretty;
}
.nx-hero-cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.nx-hero-cta .material-symbols-rounded { font-size: 18px; margin-left: 6px; }
.nx-hero-aside { display: flex; flex-direction: column; gap: var(--nx-card-gap, 20px); }
.nx-hero-tile {
    flex: 1;
    padding: 22px 24px;
    display: block;
    color: inherit;
}
.nx-hero-tile-head { display: flex; align-items: center; gap: 12px; }
.nx-hero-tile-title { font-size: 15px; font-weight: 600; color: var(--nx-text); }
.nx-hero-tile-sub { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--nx-muted); }

/* ---------- domain band ---------- */
.nx-dband-form { margin-bottom: var(--nx-card-gap, 20px); }
.nx-dband { padding: 34px; overflow: visible; }
.nx-dband-head { text-align: center; margin-bottom: 22px; }
.nx-dband-title {
    margin: 8px 0 0;
    font-size: 27px;
    font-weight: var(--nx-weight-heading, 800);
    letter-spacing: -.7px;
    color: var(--nx-text);
}
.nx-dband-sub {
    margin: 8px auto 0;
    max-width: 560px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--nx-muted);
    text-wrap: pretty;
}
.nx-dband-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 860px;
    margin: 0 auto;
}
.nx-dband-input {
    flex: 1 1 400px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 58px;
    padding: 0 18px;
    border-radius: var(--nx-radius-input);
    border: 1px solid var(--nx-border);
    background: var(--nx-bg);
}
.nx-dband-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--nx-font-family);
    font-size: 16px;
    color: var(--nx-text);
}
.nx-dband-input-ico { font-size: 21px; color: var(--nx-primary-text, var(--nx-primary)); }
body.nx-theme .nx-dband-input input:focus,
body.nx-theme .nx-dband-input input:focus-visible,
body.nx-theme .nx-dfilters-search input:focus,
body.nx-theme .nx-dfilters-search input:focus-visible {
    outline: none;
}
body.nx-theme .nx-dband-input:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .22);
}
.nx-dband-select {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 58px;
    padding: 0 14px 0 18px;
    border-radius: var(--nx-radius-input);
    border: 1px solid var(--nx-border);
    background: var(--nx-bg);
}
.nx-dband-select select {
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--nx-font-family);
    font-size: 14.5px;
    font-weight: 400;
    color: var(--nx-muted);
    cursor: pointer;
    appearance: none;
    padding-right: 2px;
}
.nx-dband-select-ico { font-size: 18px; color: var(--nx-muted); pointer-events: none; }
.nx-dband-btn { height: 58px; padding: 0 34px; font-size: 15px; }

.nx-dband-modes { display: flex; justify-content: center; margin-top: 18px; }
.nx-dband-modes-inner {
    display: flex;
    gap: 4px;
    padding: 5px;
    border-radius: var(--nx-radius-card);
    background: var(--nx-bg);
    border: 1px solid var(--nx-border);
}
.nx-dband-mode {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    font-family: var(--nx-font-family);
    font-size: 13px;
    font-weight: 400;
    color: var(--nx-muted);
    cursor: pointer;
    transition: background var(--nx-transition), color var(--nx-transition);
}
.nx-dband-mode .material-symbols-rounded { font-size: 17px; }
.nx-dband-mode.is-active {
    background: var(--nx-card-bg);
    color: var(--nx-primary-text, var(--nx-primary));
    box-shadow: var(--nx-shadow);
}
.nx-dband-mode:not(.is-active):hover { color: var(--nx-text); }
.nx-dband-mode:focus,
.nx-dband-mode:focus-visible,
.nx-dband-btn:focus,
.nx-dband-btn:focus-visible,
.nx-dfilters-toggle:focus,
.nx-dfilters-toggle:focus-visible { outline: none; }

.nx-dband-mode-ai .material-symbols-rounded { color: var(--nx-muted); transition: color var(--nx-transition); }
.nx-dband-mode.is-active .material-symbols-rounded,
.nx-dband-input.is-ai .nx-dband-input-ico {
    color: var(--nx-primary-text, var(--nx-primary));
    -webkit-text-fill-color: var(--nx-primary);
}
.nx-dband-input-ico { transition: color var(--nx-transition); }

.nx-dband-tlds {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--nx-border);
}
.nx-dband-tld {
    padding: 4px 26px;
    text-align: center;
    border-right: 1px solid var(--nx-border);
}
.nx-dband-tld:last-child { border-right: 0; }
.nx-dband-tld-name { display: block; font-size: 15px; font-weight: 400; color: var(--nx-text); }
.nx-dband-tld-price { display: block; font-size: 13px; color: var(--nx-muted); }
/* orange is reserved for sale / unpaid only */
.nx-dband-tld.is-sale .nx-dband-tld-name,
.nx-dband-tld.is-sale .nx-dband-tld-price { color: var(--nx-warning); font-weight: 400; }

.nx-dband-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    font-size: 13px;
}
.nx-dband-links a { color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; }
.nx-dband-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--nx-muted); opacity: .6; }

/* ---------- product group card ---------- */
.nx-pcard {
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.nx-pcard-top { display: flex; align-items: flex-start; justify-content: space-between; }
.nx-pcard-name {
    margin: 16px 0 0;
    font-size: 17px;
    font-weight: 400;
    color: var(--nx-text);
}
.nx-pcard-desc {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--nx-muted);
    flex-grow: 1;
}
.nx-pcard-price {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--nx-border);
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.nx-pcard-price small { font-size: 12.5px; font-weight: 400; color: var(--nx-muted); }
.nx-pcard-price b { font-size: 25px; font-weight: 400; letter-spacing: -.7px; color: var(--nx-text); }
.nx-pcard-btn { margin-top: 14px; }

/* ---------- transfer / login strip ---------- */
.nx-strip {
    padding: 22px 28px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: var(--nx-card-gap, 20px);
    position: relative;
    overflow: hidden;
    transition: border-color var(--nx-transition-slow), box-shadow var(--nx-transition-slow);
}
.nx-strip::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--nx-primary), var(--nx-primary-hover));
}
.nx-strip:hover {
    border-color: color-mix(in srgb, var(--nx-primary) 30%, var(--nx-border));
    box-shadow: var(--nx-shadow-elevated);
}
.nx-strip-main { display: flex; align-items: center; gap: 16px; flex: 1 1 320px; }
.nx-strip-title { font-size: 16px; font-weight: 600; color: var(--nx-text); letter-spacing: -.2px; }
.nx-strip-sub { margin-top: 3px; font-size: 13.5px; color: var(--nx-muted); }
.nx-strip-sep { width: 1px; height: 32px; background: var(--nx-border); }
.nx-strip .nx-ico-tile-lg {
    background: linear-gradient(145deg, color-mix(in srgb, var(--nx-primary) 18%, transparent), color-mix(in srgb, var(--nx-primary) 8%, transparent));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--nx-primary) 18%, transparent);
}

/* ---------- home action tiles keep the same lift ---------- */
.nx-home-action { transition: transform var(--nx-transition-slow), box-shadow var(--nx-transition-slow), border-color var(--nx-transition-slow); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .nx-hero { grid-template-columns: 1fr; }
    .nx-hero-aside { flex-direction: row; }
}
@media (max-width: 700px) {
    .nx-hero-main { padding: 28px 22px; }
    .nx-hero-title { font-size: 32px; }
    .nx-hero-aside { flex-direction: column; }
    .nx-dband { padding: 24px 18px; }
    .nx-dband-btn { width: 100%; }
    .nx-dband-tld { border-right: 0; padding: 8px 16px; }
}

body.nx-theme .nx-topbar {
    height: auto;
    min-height: 70px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--nx-card-bg);
    border: 0;
    border-bottom: 1px solid var(--nx-border);
    border-radius: 0;
    box-shadow: none;
}
body.nx-theme.nx-header-sticky header.nx-topbar {
    top: 16px;
    z-index: 1040;
}
body.nx-theme.nx-header-sticky header.nx-topbar::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    width: auto;
    height: 20px;
    background: var(--nx-bg);
    z-index: -1;
    pointer-events: none;
}

body.nx-theme.nx-header-sticky { --nx-header-offset: calc(var(--nx-header-height, 64px) + 16px); }
body.nx-theme.nx-header-sticky:has(.nx-topbar-expanded) {
    --nx-header-offset: calc(var(--nx-header-height, 64px) + var(--nx-topbar-utility-height, 48px) + 16px);
}

body.nx-theme .nx-topbar.nx-topbar-expanded { padding: 0; }
body.nx-theme .nx-topbar-expanded-top,
body.nx-theme .nx-topbar-expanded-bottom {
    background: transparent;
    box-shadow: none;
    height: auto;
    padding: 10px 18px;
}
body.nx-theme .nx-topbar-expanded-top { border-bottom: 0; }

/* Nav pills - design uses radius 11, 9px/13px, active on a primary tint. */
body.nx-theme .nx-navbar-link.nx-sh-topnav-link,
body.nx-theme .nx-navbar-link.nx-sh-topnav-link-dd {
    padding: 9px 13px;
    border-radius: var(--nx-radius-button);
    font-size: 14.5px;
}
body.nx-theme .nx-navbar-link.active {
    background: color-mix(in srgb, var(--nx-primary) 12%, transparent);
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}
/* The underline indicator is not in this design - the pill carries the state. */
body.nx-theme .nx-navbar-link::after { content: none; }

/* Theme toggle: 40x40 square button, not a pill switch. */
body.nx-theme .nx-topbar-mode-toggle {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--nx-bg);
    border: 1px solid var(--nx-border);
}
body.nx-theme .nx-topbar-mode-toggle.active { background: var(--nx-bg); }
body.nx-theme .nx-topbar-mode-toggle .nx-toggle-thumb {
    position: static;
    width: 100%;
    height: 100%;
    background: transparent;
    box-shadow: none;
    transform: none;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nx-topbar-mode-toggle.active .nx-toggle-thumb {
    transform: none;
    background: transparent;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nx-topbar-mode-toggle .nx-toggle-thumb .material-symbols-rounded { font-size: 20px; }

/* Login / Register pair. 40px tall, Register on the brand gradient. */
body.nx-theme .btn.nx-sh-btn-login-sm,
body.nx-theme .btn.nx-sh-btn-register-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13.5px;
    white-space: nowrap;
}
body.nx-theme .btn.nx-sh-btn-login-sm,
body.nx-theme .btn.nx-sh-btn-login-sm:hover,
body.nx-theme .btn.nx-sh-btn-login-sm:focus {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-text);
    font-weight: 400;
    gap: 8px;
}
body.nx-theme .btn.nx-sh-btn-login-sm:hover {
    border-color: color-mix(in srgb, var(--nx-primary) 35%, var(--nx-border));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--nx-primary) 20%, transparent);
}
body.nx-theme .btn.nx-sh-btn-login-sm .material-symbols-rounded { color: var(--nx-primary-text, var(--nx-primary)); }

body.nx-theme .btn.nx-sh-btn-register-sm {
    padding: 0 18px;
    font-weight: 400;
    color: #fff;
    border-color: transparent;
    background: var(--nx-primary);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--nx-primary) 32%, transparent);
}
body.nx-theme .btn.nx-sh-btn-register-sm:hover {
    background: var(--nx-primary-hover);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--nx-primary) 20%, transparent);
    color: #fff;
}

/* ---------- hero ---------- */
.nx-hero { grid-template-columns: 1.15fr .85fr; gap: 24px; margin-bottom: 22px; }
.nx-hero-main { padding: 44px 42px; }
.nx-hero-title { font-size: 46px; line-height: 1.08; letter-spacing: -1.4px; }
.nx-hero-aside { gap: 14px; }

.nx-hero-stats {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--nx-border);
}
.nx-hero-stat-num { font-size: 22px; font-weight: 400; color: var(--nx-text); }
.nx-hero-stat-cap { font-size: 12.5px; color: var(--nx-muted); }

/* ---------- hero aside tiles ---------- */
.nx-hero-tile-head { gap: 10px; }
.nx-hero-tile-title { font-size: 14.5px; font-weight: 600; }
.nx-pill-ok {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 5px 10px;
    border-radius: var(--nx-radius-badge);
    color: var(--nx-success);
    background: color-mix(in srgb, var(--nx-success) 12%, var(--nx-card-bg));
    border: 1px solid color-mix(in srgb, var(--nx-success) 30%, var(--nx-border));
    white-space: nowrap;
}
.nx-status-rows { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.nx-status-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.nx-status-row span { color: var(--nx-muted); }
.nx-status-row b { font-weight: 400; color: var(--nx-success); }

.nx-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--nx-muted);
}

/* ---------- section heading with a trailing link ---------- */
.nx-sec-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nx-sec-sub { margin: 6px 0 0; font-size: 14px; color: var(--nx-muted); }
.nx-sec-link { font-size: 13.5px; font-weight: 400; color: var(--nx-primary-text, var(--nx-primary)); white-space: nowrap; }

/* ---------- compact product card (groups 4 and beyond) ---------- */
.nx-pcard-sm {
    display: block;
    padding: 22px 24px;
    color: inherit;
}
.nx-pcard-sm:hover { color: inherit; }
.nx-pcard-sm-head { display: flex; align-items: center; gap: 12px; }
.nx-pcard-sm-name { font-size: 15.5px; font-weight: 400; color: var(--nx-text); }
.nx-pcard-sm .nx-pcard-desc { margin-top: 12px; flex-grow: 0; }
.nx-pcard-sm .nx-ico-tile { width: 38px; height: 38px; }
.nx-pcard-sm .nx-ico-tile .material-symbols-rounded { font-size: 20px; }

/* ---------- transfer strip ---------- */
.nx-strip-ask { font-size: 13.5px; color: var(--nx-muted); }

/* ---------- domain band: 60px controls ---------- */
.nx-dband-input,
.nx-dband-select,
.nx-dband-btn { height: 60px; border-radius: 15px; }
.nx-dband-btn { padding: 0 34px; }
.nx-dband-note { font-size: 13px; color: var(--nx-muted); }

/* ---------- support tiles: icon tile + title + caption ---------- */
.action-icon-btns .nx-home-action {
    gap: 10px;
    padding: 20px 16px;
    border-radius: 14px;
}
.action-icon-btns .nx-home-action:hover {
    box-shadow: var(--nx-shadow), 0 14px 30px color-mix(in srgb, var(--nx-primary) 20%, transparent);
    border-color: color-mix(in srgb, var(--nx-primary) 35%, var(--nx-border));
    color: var(--nx-text);
}
/* The icon now sits inside .nx-ico-tile, so the old 30px glyph rule has to go. */
.action-icon-btns .nx-home-action .nx-ico-tile .material-symbols-rounded {
    font-size: 22px;
}
.nx-home-action-title { font-size: 13.5px; font-weight: 600; color: var(--nx-text); }
.nx-home-action-meta { font-size: 11.5px; font-weight: 400; color: var(--nx-muted); }
.nx-home-action-meta.is-ok { color: var(--nx-success); font-weight: 400; }

/* ---------- footer card ---------- */
body.nx-theme footer.nx-footer {
    background: transparent;
    border-top: 0;
    padding: 0;
    margin-top: 38px;
}
body.nx-theme .nx-footer-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-bottom: 0;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: var(--nx-shadow);
    padding: 30px 32px 26px;
    text-align: left;
}
.nx-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.nx-footer-brand { display: flex; align-items: center; gap: 11px; }
.nx-footer-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: var(--nx-radius-button);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--nx-primary) 80%, #fff),
        var(--nx-primary-hover));
}
.nx-footer-mark .material-symbols-rounded { font-size: 20px; }
.nx-footer-mark.nx-footer-mark-img { width: auto; height: auto; flex: 0 0 auto; background: none; padding: 0; }
.nx-footer-mark.nx-footer-mark-img img { height: var(--nx-logo-height); width: auto; object-fit: contain; }
.nx-footer-name { font-size: 14.5px; font-weight: 400; color: var(--nx-text); }
.nx-footer-tag { font-size: 12.5px; color: var(--nx-muted); }
.nx-footer-pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nx-footer-pay-label { font-size: 12px; color: var(--nx-muted); margin-right: 4px; }

.nx-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--nx-border);
}
body.nx-theme .nx-footer-card > .nx-footer-bottom:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.nx-footer-copy { font-size: 12.5px; color: var(--nx-muted); }
.nx-footer-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body.nx-theme .nx-footer-links > a {
    font-size: 12.5px;
    font-weight: var(--nx-weight-footer);
    color: var(--nx-muted);
    text-decoration: none;
}
body.nx-theme .nx-footer-links > a:hover { color: var(--nx-primary-text, var(--nx-primary)); }
body.nx-theme .nx-footer-links .btn.nx-sh-footer-lang-btn,
body.nx-theme .nx-footer-links .btn.nx-sh-footer-currency-btn {
    height: 36px;
    padding: 0 12px;
    gap: 8px;
    border-radius: var(--nx-radius-button);
    background: var(--nx-bg);
    font-size: 12.5px;
    font-weight: 400;
}
body.nx-theme .nx-footer-links .btn.nx-sh-footer-currency-btn {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    box-shadow: none;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1;
    color: var(--nx-text);
    transition: border-color var(--nx-transition), color var(--nx-transition);
}
body.nx-theme .nx-footer-links .btn.nx-sh-footer-currency-btn:hover,
body.nx-theme .nx-footer-links .nx-sh-footer-currency.show .btn.nx-sh-footer-currency-btn {
    border-color: color-mix(in srgb, var(--nx-primary) 35%, var(--nx-border));
    color: var(--nx-primary-text, var(--nx-primary));
    background: var(--nx-card-bg);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .nx-hero { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .nx-hero-main { padding: 28px 22px; }
    .nx-hero-title { font-size: 32px; }
    .nx-hero-stats { gap: 18px; }
    .nx-feature-grid { grid-template-columns: 1fr; }
    body.nx-theme .nx-footer-card { padding: 22px 18px 20px; }
    .nx-footer-bottom { justify-content: flex-start; }
}

/* ---------- logo fallback mark ---------- */
body.nx-theme .nx-logo-mark .material-symbols-rounded {
    font-size: 22px;
    font-variation-settings: 'FILL' 0, 'wght' 500;
    color: inherit;
}
body.nx-theme .nx-logo-mark.nx-sh-logo-mark-36 .material-symbols-rounded { font-size: 20px; }
body.nx-theme .nx-logo-mark.nx-sh-logo-mark-32 .material-symbols-rounded { font-size: 18px; }
body.nx-theme .nx-sh-logo-mark-32 {
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* ---------- header stays on one line ---------- */
body.nx-theme .nx-topbar .nx-sh-tb-row {
    flex-wrap: nowrap;
    gap: 12px;
}
body.nx-theme .nx-topbar-nav-middle {
    flex-wrap: nowrap;
    min-width: 0;
    overflow: visible;
}
body.nx-theme .nx-topbar-right,
body.nx-theme .nx-sh-tb-actions,
body.nx-theme .nx-guest-login-buttons {
    flex-wrap: nowrap;
    flex-shrink: 0;
}
body.nx-theme .nx-topbar .nx-topbar-left { min-width: 0; }

body.nx-theme .nx-footer-tag:only-child {
    font-size: 13.5px;
    font-weight: 400;
}

/* ---------- domain band: skinned TLD select ---------- */
body.nx-theme .nx-dband-select { padding: 0; }
body.nx-theme .nx-dband-select .nx-custom-select-wrapper { width: auto; }
body.nx-theme .nx-dband-select .nx-custom-select-trigger {
    height: 60px;
    min-width: 150px;
    padding: 0 18px;
    gap: 10px;
    border: 0;
    background: transparent;
    border-radius: 15px;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--nx-muted);
}
body.nx-theme .nx-dband-select .nx-custom-select-trigger:hover,
body.nx-theme .nx-dband-select .nx-custom-select-wrapper.open .nx-custom-select-trigger {
    box-shadow: none;
    border: 0;
    color: var(--nx-text);
}
body.nx-theme .nx-dband-select .nx-custom-select-trigger i { color: var(--nx-muted); }
body.nx-theme .nx-dband-select .nx-custom-select-options { min-width: 100%; }

body.nx-theme .nx-dfilters [hidden] { display: none !important; }

body.nx-theme .nx-dfilters {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

body.nx-theme .nx-dfilters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 60px;
    padding: 0 18px;
    border: 1px solid var(--nx-border);
    border-radius: 15px;
    background: var(--nx-bg);
    font-family: var(--nx-font-family);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1;
    color: var(--nx-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--nx-transition), border-color var(--nx-transition);
}
body.nx-theme .nx-dfilters-toggle:hover,
body.nx-theme .nx-dfilters.is-open .nx-dfilters-toggle {
    color: var(--nx-primary-text, var(--nx-primary));
    border-color: color-mix(in srgb, var(--nx-primary) 35%, var(--nx-border));
}
body.nx-theme .nx-dfilters-toggle .material-symbols-rounded {
    font-size: 18px;
    transition: transform var(--nx-transition-fast);
}
body.nx-theme .nx-dfilters.is-open .nx-dfilters-toggle .material-symbols-rounded {
    transform: rotate(180deg);
}
/* ---------- first-level menu ---------- */
body.nx-theme .nx-dfilters-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1080;
    min-width: 230px;
    padding: 8px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow), 0 12px 32px rgba(16, 24, 40, .10);
    text-align: left;
}

body.nx-theme .nx-dfilters-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
    font-family: var(--nx-font-family);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--nx-text);
    cursor: pointer;
    text-align: left;
    transition: background var(--nx-transition), color var(--nx-transition);
}
body.nx-theme .nx-dfilters-row:hover,
body.nx-theme .nx-dfilters-row[aria-expanded="true"] {
    background: color-mix(in srgb, var(--nx-primary) 8%, transparent);
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nx-dfilters-label { flex: 1 1 auto; }
body.nx-theme .nx-dfilters-arrow { font-size: 18px; color: var(--nx-muted); }
body.nx-theme .nx-dfilters-row[aria-expanded="true"] .nx-dfilters-arrow { color: var(--nx-primary-text, var(--nx-primary)); }

body.nx-theme .nx-dfilters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--nx-radius-badge);
    background: var(--nx-primary);
    color: #fff;
    font-size: 11.5px;
    font-weight: 400;
}

/* ---------- checkbox / radio rows ---------- */
body.nx-theme .nx-dfilters-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 12px;
    border-radius: var(--nx-radius-md);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--nx-text);
    cursor: pointer;
    transition: background var(--nx-transition);
}
body.nx-theme .nx-dfilters-check:hover { background: color-mix(in srgb, var(--nx-primary) 8%, transparent); }
body.nx-theme .nx-dfilters-check input { margin: 0; }

/* ---------- flyout panels ---------- */
body.nx-theme .nx-dfilters-panel {
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
    z-index: 1081;
    width: 168px;
    padding: 8px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow), 0 12px 32px rgba(16, 24, 40, .10);
    text-align: left;
}
body.nx-theme .nx-dfilters-panel-len { width: 130px; }
body.nx-theme .nx-dfilters-panel.nx-dfilters-panel-flip {
    left: auto;
    right: calc(100% + 8px);
}

body.nx-theme .nx-dfilters-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--nx-border);
}
body.nx-theme .nx-dfilters-search .material-symbols-rounded { font-size: 18px; color: var(--nx-muted); }
body.nx-theme .nx-dfilters-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--nx-font-family);
    font-size: 13.5px;
    color: var(--nx-text);
}

body.nx-theme .nx-dfilters-list {
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border) transparent;
}
body.nx-theme .nx-dfilters-list::-webkit-scrollbar { width: 8px; }
body.nx-theme .nx-dfilters-list::-webkit-scrollbar-thumb {
    background: var(--nx-border);
    border-radius: 8px;
}

/* ---------- small screens: the flyout stacks under the menu ---------- */
@media (max-width: 899.98px) {
    body.nx-theme .nx-dfilters { width: 100%; }
    body.nx-theme .nx-dfilters-toggle { width: 100%; justify-content: flex-start; }
    body.nx-theme .nx-dfilters-menu { left: 0; right: 0; min-width: 0; }
    body.nx-theme .nx-dfilters-panel {
        left: 0;
        right: 0;
        width: auto;
        top: calc(100% + 8px);
    }
}

@keyframes nx-loader-spin { to { transform: rotate(360deg); } }

body.nx-theme .nx-loader,
body.nx-theme .nx-spin,
body.nx-theme .fa-spinner,
body.nx-theme .fas.fa-spinner,
body.nx-theme .fa.fa-spinner,
body.nx-theme .spinner-border {
    display: inline-block;
    box-sizing: border-box;
    width: var(--nx-loader-size, 18px);
    height: var(--nx-loader-size, 18px);
    border: var(--nx-loader-width, 2px) solid color-mix(in srgb, currentColor 20%, transparent);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: nx-loader-spin .7s linear infinite;
    vertical-align: -3px;
    flex-shrink: 0;
    font-size: 0 !important;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
}
/* Font Awesome draws its glyph through ::before; the ring replaces it. */
body.nx-theme .fa-spinner::before,
body.nx-theme .fas.fa-spinner::before,
body.nx-theme .fa.fa-spinner::before { content: ""; }

/* fa-spin and spinner-border animate themselves; ours is the only one running. */
body.nx-theme .fa-spinner.fa-spin,
body.nx-theme .spinner-border {
    animation: nx-loader-spin .7s linear infinite;
}

/* Sizes */
body.nx-theme .nx-loader-sm,
body.nx-theme .spinner-border-sm { --nx-loader-size: 14px; --nx-loader-width: 2px; }
body.nx-theme .nx-loader-lg { --nx-loader-size: 28px; --nx-loader-width: 3px; }
body.nx-theme .nx-loader-xl { --nx-loader-size: 44px; --nx-loader-width: 3px; }

body.nx-theme .nx-spin { color: var(--nx-primary-text, var(--nx-primary)); }
body.nx-theme .nx-loader-primary { color: var(--nx-primary-text, var(--nx-primary)); }
body.nx-theme .nx-loader-muted { color: var(--nx-muted); }

/* ---------- loading block: ring + label, centred ---------- */
body.nx-theme .nx-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 34px 0;
    color: var(--nx-muted);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
}
body.nx-theme .nx-dt-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* ---------- full-surface overlay ---------- */
body.nx-theme .nx-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--nx-card-bg) 82%, transparent);
    border-radius: inherit;
    color: var(--nx-primary-text, var(--nx-primary));
}

@media (prefers-reduced-motion: reduce) {
    body.nx-theme .nx-loader,
    body.nx-theme .nx-spin,
    body.nx-theme .fa-spinner,
    body.nx-theme .spinner-border {
        animation: none;
        border-top-color: color-mix(in srgb, currentColor 60%, transparent);
    }
}

@media (max-width: 899.98px) {
    body.nx-theme .nx-dband-row { display: flex; flex-direction: row; overflow: visible; }
    body.nx-theme .nx-dband-row .nx-dband-input,
    body.nx-theme .nx-dband-row .nx-dfilters,
    body.nx-theme .nx-dband-row .nx-dband-select,
    body.nx-theme .nx-dband-row .nx-dband-btn {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    body.nx-theme .nx-dband-row .nx-dfilters { margin-top: 10px; }
    body.nx-theme .nx-dfilters-menu,
    body.nx-theme .nx-dfilters-panel { overflow: visible; }
}

body.nx-theme a.nx-btn,
body.nx-theme a.nx-btn:link,
body.nx-theme a.nx-btn:visited,
body.nx-theme a.nx-btn:hover,
body.nx-theme a.nx-btn:focus,
body.nx-theme a.nx-btn:active {
    text-decoration: none;
}

body.nx-theme a.nx-btn-primary,
body.nx-theme a.nx-btn-primary:hover,
body.nx-theme a.nx-btn-primary:focus,
body.nx-theme a.nx-btn-primary:active {
    color: #fff;
}

body.nx-theme a.nx-inv-btn-pay,
body.nx-theme a.nx-inv-btn-pay:link,
body.nx-theme a.nx-inv-btn-pay:visited,
body.nx-theme a.nx-inv-btn-pay:hover,
body.nx-theme a.nx-inv-btn-pay:focus,
body.nx-theme a.nx-inv-btn-pay:active {
    text-decoration: none;
    color: #fff;
}
body.nx-theme a.nx-btn-danger,
body.nx-theme a.nx-btn-danger:hover,
body.nx-theme a.nx-btn-danger:focus,
body.nx-theme a.nx-btn-success,
body.nx-theme a.nx-btn-success:hover,
body.nx-theme a.nx-btn-success:focus {
    color: #fff;
}

body.nx-theme a.nx-btn-outline,
body.nx-theme a.nx-btn-outline:focus { color: var(--nx-text); }
body.nx-theme a.nx-btn-outline:hover,
body.nx-theme a.nx-btn-outline:active { color: var(--nx-primary-text, var(--nx-primary)); }
body.nx-theme a.nx-btn-ghost,
body.nx-theme a.nx-btn-ghost:hover,
body.nx-theme a.nx-btn-ghost:focus { color: var(--nx-primary-text, var(--nx-primary)); }

body.nx-theme .nx-lift a.nx-btn:hover,
body.nx-theme .nx-pcard a.nx-btn:hover,
body.nx-theme .nx-pcard-sm:hover a.nx-btn {
    text-decoration: none;
}

body.nx-theme .nx-on-primary {
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--nx-primary) 90%, #fff),
        var(--nx-primary-hover));
    border-color: transparent;
    color: #fff;
}

body.nx-theme .nx-dband {
    background: linear-gradient(105deg,
        color-mix(in srgb, var(--nx-primary) 38%, #000) 0%,
        color-mix(in srgb, var(--nx-primary) 62%, #000) 48%,
        color-mix(in srgb, var(--nx-primary) 80%, #000) 100%);
    border-color: transparent;
    color: #fff;
}

body.nx-theme .nx-on-primary h1,
body.nx-theme .nx-on-primary h2,
body.nx-theme .nx-on-primary h3,
body.nx-theme .nx-on-primary h4,
body.nx-theme .nx-on-primary h5,
body.nx-theme .nx-on-primary h6,
body.nx-theme .nx-on-primary p,
body.nx-theme .nx-on-primary span,
body.nx-theme .nx-on-primary div,
body.nx-theme .nx-on-primary li,
body.nx-theme .nx-on-primary b,
body.nx-theme .nx-on-primary strong,
body.nx-theme .nx-on-primary small,
body.nx-theme .nx-on-primary label,
body.nx-theme .nx-on-primary .text-muted,
body.nx-theme .nx-dband .nx-eyebrow,
body.nx-theme .nx-dband .nx-dband-title,
body.nx-theme .nx-dband .nx-dband-sub,
body.nx-theme .nx-dband .nx-dband-note,
body.nx-theme .nx-dband .nx-dband-tld-name,
body.nx-theme .nx-dband .nx-dband-tld-price {
    color: #fff;
}

body.nx-theme .nx-on-primary a,
body.nx-theme .nx-dband .nx-dband-links a {
    color: #fff;
    text-decoration: none;
}
body.nx-theme .nx-on-primary a:hover,
body.nx-theme .nx-dband .nx-dband-links a:hover {
    color: #fff;
    opacity: .82;
}

body.nx-theme .nx-on-primary .nx-eyebrow,
body.nx-theme .nx-on-primary .nx-sec-title,
body.nx-theme .nx-on-primary .nx-sec-sub {
    color: #fff;
}

body.nx-theme .nx-on-primary .material-symbols-rounded,
body.nx-theme .nx-dband > .nx-dband-head .material-symbols-rounded {
    color: #fff;
}

body.nx-theme .nx-dband .nx-dband-sub,
body.nx-theme .nx-on-primary .nx-sec-sub {
    opacity: .82;
}

body.nx-theme .nx-dband .nx-dband-tld {
    border-right-color: rgba(255, 255, 255, .28);
}
body.nx-theme .nx-dband .nx-dband-tlds {
    border-top-color: rgba(255, 255, 255, .28);
}
body.nx-theme .nx-dband .nx-dband-dot {
    background: #fff;
    opacity: .5;
}
body.nx-theme .nx-dband .nx-dband-tld.is-sale .nx-dband-tld-name,
body.nx-theme .nx-dband .nx-dband-tld.is-sale .nx-dband-tld-price {
    color: var(--nx-warning);
}

body.nx-theme .nx-on-primary .nx-card,
body.nx-theme .nx-on-primary input,
body.nx-theme .nx-on-primary select,
body.nx-theme .nx-on-primary textarea {
    background: var(--nx-card-bg);
    border-color: var(--nx-border);
    color: var(--nx-text);
}

body.nx-theme .nx-dband .nx-dband-input,
body.nx-theme .nx-dband .nx-dband-select,
body.nx-theme .nx-dband .nx-dfilters-toggle,
body.nx-theme .nx-dband .nx-dfilters-menu,
body.nx-theme .nx-dband .nx-dfilters-panel {
    background: var(--nx-card-bg);
    border-color: transparent;
    color: var(--nx-text);
}
body.nx-theme .nx-dband .nx-dband-input input,
body.nx-theme .nx-dband .nx-dfilters-toggle,
body.nx-theme .nx-dband .nx-dfilters-label,
body.nx-theme .nx-dband .nx-dfilters-check span,
body.nx-theme .nx-dband .nx-dfilters-search input {
    color: var(--nx-text);
}
body.nx-theme .nx-dband .nx-dband-input input::placeholder,
body.nx-theme .nx-dband .nx-dfilters-search input::placeholder {
    color: var(--nx-muted);
}
body.nx-theme .nx-dband .nx-dfilters-search {
    border-bottom-color: var(--nx-border);
}
body.nx-theme .nx-dband .nx-dband-input input,
body.nx-theme .nx-dband .nx-dfilters-search input {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
}
body.nx-theme .nx-dband .nx-dband-input input:-webkit-autofill {
    -webkit-text-fill-color: var(--nx-text);
    -webkit-box-shadow: 0 0 0 100px var(--nx-card-bg) inset !important;
    caret-color: var(--nx-text);
}
body.nx-theme .nx-dband .nx-dfilters-check:hover {
    background: color-mix(in srgb, var(--nx-primary) 8%, transparent);
}
body.nx-theme .nx-dband .nx-dband-input-ico {
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nx-dband .nx-dfilters-toggle .material-symbols-rounded,
body.nx-theme .nx-dband .nx-dfilters-arrow {
    color: var(--nx-muted);
}
body.nx-theme .nx-dband .nx-dband-modes-inner {
    background: rgba(255, 255, 255, .13);
    border-color: transparent;
}
body.nx-theme .nx-dband .nx-dband-mode,
body.nx-theme .nx-dband .nx-dband-mode .material-symbols-rounded {
    color: #fff;
    background: transparent;
    -webkit-text-fill-color: currentColor;
}
body.nx-theme .nx-dband .nx-dband-mode:not(.is-active):hover {
    background: rgba(255, 255, 255, .10);
}
body.nx-theme .nx-dband .nx-dband-mode.is-active {
    color: var(--nx-primary-text, var(--nx-primary));
    background: var(--nx-card-bg);
}
body.nx-theme .nx-dband .nx-dband-mode.is-active .material-symbols-rounded {
    color: var(--nx-primary-text, var(--nx-primary));
    -webkit-text-fill-color: var(--nx-primary);
}
body.nx-theme .nx-dband .nx-dband-btn {
    background: var(--nx-primary-hover);
    border-color: transparent;
    color: #fff;
}
body.nx-theme .nx-dband .nx-dband-btn:hover {
    background: color-mix(in srgb, var(--nx-primary-hover) 85%, #000);
    color: #fff;
}

body.nx-theme .nx-card,
body.nx-theme .nx-u-card,
body.nx-theme .card,
body.nx-theme .panel,
body.nx-theme .card-sidebar,
body.nx-theme .nx-ca-card,
body.nx-theme .nx-ca-stat-tile,
body.nx-theme .nx-stat-tile,
body.nx-theme .nx-stat-card,
body.nx-theme .nx-inv-tile,
body.nx-theme .nx-inv-card,
body.nx-theme .nx-inv-side-card,
body.nx-theme .nx-prods-tile,
body.nx-theme .nx-prods-table-card,
body.nx-theme .nx-pd-card,
body.nx-theme .nx-pd-card-pad24,
body.nx-theme .nx-pd-stats,
body.nx-theme .nx-pd-tabwrap,
body.nx-theme .nx-pd-side-card,
body.nx-theme .nx-pd-actions-card,
body.nx-theme .nx-dd-card,
body.nx-theme .nx-dd-panel,
body.nx-theme .nx-dd-side-card,
body.nx-theme .nx-hp-panel,
body.nx-theme .nx-tl-dept-card,
body.nx-theme .nx-vt-card,
body.nx-theme .nx-vt-reply-card,
body.nx-theme .nx-mp-card,
body.nx-theme .nx-ip-card,
body.nx-theme .nx-pmm-card,
body.nx-theme .nx-af-card,
body.nx-theme .nx-af-card-mb,
body.nx-theme .nx-cr-form-card,
body.nx-theme .nx-cr-tools-card,
body.nx-theme .nx-ar-card,
body.nx-theme .nx-ar-toggle-card,
body.nx-theme .nx-kb-cat-card,
body.nx-theme .nx-kb-search,
body.nx-theme .nx-tld-featured,
body.nx-theme .nx-doms-card,
body.nx-theme .nx-epp-card,
body.nx-theme .nx-dao-card,
body.nx-theme .nx-dci-card,
body.nx-theme .nx-state-card,
body.nx-theme .nx-store-order .store-order-head,
body.nx-theme .nx-product-card,
body.nx-theme .nx-footer-card,
body.nx-theme .nx-topbar,
body.nx-theme .action-icon-btns .nx-home-action,
body.nx-theme div.dataTables_wrapper,
body.nx-theme .table-container {
    border: 0;
}

body.nx-theme .nx-lift:hover,
body.nx-theme .action-icon-btns .nx-home-action:hover,
body.nx-theme .nx-kb-cat-card:hover,
body.nx-theme .nx-tld-featured:hover,
body.nx-theme .nx-u-tile-link:hover,
body.nx-theme .nx-u-list-link:hover,
body.nx-theme .nx-u-chip-link:hover {
    border-color: transparent;
}

body.nx-theme .nx-footer-card {
    border-bottom: 0;
}

body.nx-theme .nx-product-card.featured,
body.nx-theme .nx-upg-pkg-card-rec,
body.nx-theme .nx-cr-type-selected,
body.nx-theme .nx-u-option-row.active,
body.nx-theme .nx-cc-type-pill.active,
body.nx-theme .gateway-card.active {
    border: 2px solid var(--nx-primary);
}

body.nx-theme {
    --nx-btn-shadow: none;
    --nx-btn-shadow-hover: none;
}

/* Flat class selectors, one list, no descendant chains. */
body.nx-theme .btn,
body.nx-theme .nx-btn,
body.nx-theme .nx-btn-primary,
body.nx-theme .nx-btn-danger,
body.nx-theme .nx-btn-success,
body.nx-theme .nx-btn-outline,
body.nx-theme .nx-sh-btn-login-sm,
body.nx-theme .nx-sh-btn-register-sm,
body.nx-theme .nx-sh-openticket-btn,
body.nx-theme .nx-sh-openticket-btn-cmp,
body.nx-theme .nx-sh-openticket-btn2,
body.nx-theme .nx-mp-pay-btn,
body.nx-theme .nx-af-btn,
body.nx-theme .nx-pm-btn-primary,
body.nx-theme .nx-pmm-btn-primary,
body.nx-theme .nx-ip-submit,
body.nx-theme .nx-vem-btn-resend,
body.nx-theme .nx-tl-banner-btn,
body.nx-theme .nx-tl-kb-btn,
body.nx-theme .nx-inv-btn-pay,
body.nx-theme .nx-dd-renew,
body.nx-theme .nx-dd-btn-primary,
body.nx-theme .nx-invoice-alert-btn,
body.nx-theme .nx-navbar-btn-cta,
body.nx-theme .nx-banner-btn,
body.nx-theme .nx-ca-banner-btn,
body.nx-theme .nx-btn-order,
body.nx-theme .nx-btn-order.filled,
body.nx-theme .nx-dband-btn,
body.nx-theme .nx-pcard-btn,
body.nx-theme .nx-ts2-submit,
body.nx-theme .nx-vt-submit,
body.nx-theme .nx-tf-return-btn,
body.nx-theme .nx-tf-btn-success,
body.nx-theme .nx-cr-btn-danger,
body.nx-theme .nx-cr-btn-login,
body.nx-theme .nx-upg-btn-primary,
body.nx-theme .nx-upg-btn-continue,
body.nx-theme .nx-upg-choose-btn-rec,
body.nx-theme .nx-ar-btn-save,
body.nx-theme .nx-cad-btn-save,
body.nx-theme .nx-doms-search-btn,
body.nx-theme .nx-hp-domain-btn,
body.nx-theme .nx-epp-copy-btn,
body.nx-theme .nx-dns-btn,
body.nx-theme .nx-dns-btn-add,
body.nx-theme .nx-rns-btn,
body.nx-theme .nx-dao-btn-lg {
    box-shadow: var(--nx-btn-shadow);
}

body.nx-theme .btn:hover,
body.nx-theme .nx-btn:hover,
body.nx-theme .nx-btn-primary:hover,
body.nx-theme .nx-sh-btn-login-sm:hover,
body.nx-theme .nx-sh-btn-register-sm:hover,
body.nx-theme .nx-mp-pay-btn:hover,
body.nx-theme .nx-vem-btn-resend:hover,
body.nx-theme .nx-navbar-btn-cta:hover,
body.nx-theme .nx-banner-btn:hover,
body.nx-theme .nx-btn-order.filled:hover,
body.nx-theme .nx-btn-order.outline:hover {
    box-shadow: var(--nx-btn-shadow-hover);
}

body.nx-theme .nx-btn:focus {
    box-shadow: none;
}
body.nx-theme .nx-btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-primary) 25%, transparent);
}
body.nx-theme .btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-primary) 25%, transparent);
}

body.nx-theme .nx-error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}
body.nx-theme .nx-error-card { max-width: 560px; width: 100%; text-align: center; }
body.nx-theme .nx-error-body { padding: 44px 40px; }
body.nx-theme .nx-error-icon { font-size: 72px; color: var(--nx-primary-text, var(--nx-primary)); line-height: 1; }
body.nx-theme .nx-error-code {
    font-size: 64px;
    font-weight: var(--nx-weight-heading, 800);
    letter-spacing: -1px;
    margin: 12px 0 4px;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nx-error-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--nx-text);
}
body.nx-theme .nx-error-text { color: var(--nx-muted); margin: 0 0 8px; }
body.nx-theme .nx-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}
body.nx-theme .nx-error-note { max-width: 720px; margin: 0 auto 40px; padding: 0 16px; }
body.nx-theme .nx-error-note-alert { text-align: center; }

body.nx-theme .btn[class],
body.nx-theme .nx-btn[class],
body.nx-theme .nx-btn-order[class],
body.nx-theme .nx-navbar-btn-cta[class],
body.nx-theme .nx-banner-btn[class],
body.nx-theme .nx-ca-banner-btn[class],
body.nx-theme .nx-tl-banner-btn[class],
body.nx-theme .nx-invoice-alert-btn[class],
body.nx-theme .nx-vem-btn-resend[class],
body.nx-theme .nx-dd-renew[class],
body.nx-theme .nx-mp-pay-btn[class],
body.nx-theme .nx-af-btn[class],
body.nx-theme .nx-ip-submit[class],
body.nx-theme .nx-pmm-btn-primary[class],
body.nx-theme .nx-pm-btn-primary[class],
body.nx-theme .nx-ts2-submit[class],
body.nx-theme .nx-vt-submit[class],
body.nx-theme .nx-tf-return-btn[class],
body.nx-theme .nx-tf-btn-success[class],
body.nx-theme .nx-dd-btn-xs-primary[class],
body.nx-theme .nx-doms-search-btn[class],
body.nx-theme .nx-hp-domain-btn[class] {
    box-shadow: none;
}

body.nx-theme .btn[class]:hover,
body.nx-theme .nx-btn[class]:hover,
body.nx-theme .nx-btn-order[class]:hover,
body.nx-theme .nx-navbar-btn-cta[class]:hover,
body.nx-theme .nx-banner-btn[class]:hover,
body.nx-theme .nx-ca-banner-btn[class]:hover,
body.nx-theme .nx-tl-banner-btn[class]:hover,
body.nx-theme .nx-invoice-alert-btn[class]:hover,
body.nx-theme .nx-vem-btn-resend[class]:hover,
body.nx-theme .nx-mp-pay-btn[class]:hover,
body.nx-theme .nx-hp-domain-btn[class]:hover {
    box-shadow: none;
}

body.nx-theme .btn[class]:focus-visible,
body.nx-theme .nx-btn[class]:focus-visible,
body.nx-theme .nx-btn-order[class]:focus-visible,
body.nx-theme .nx-navbar-btn-cta[class]:focus-visible,
body.nx-theme .nx-hp-domain-btn[class]:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-primary) 32%, transparent);
}

body.nx-theme .card-sidebar {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 28px;
}
body.nx-theme .card-sidebar .card-header {
    background: transparent;
    border-bottom: 0;
    padding: 0 0 10px;
    cursor: default;
}
body.nx-theme .card-sidebar .card-title {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--nx-text);
}
body.nx-theme .card-sidebar .card-title > i {
    display: none;
}
body.nx-theme .card-sidebar .card-minimise {
    display: none;
}
body.nx-theme .card-sidebar .list-group-item {
    padding: 9px 12px;
    border-radius: var(--nx-radius-md);
}

/* Sidebar Builder - divider item rendered inside a panel's body HTML. */
body.nx-theme .nx-sidebar-divider {
    border: 0;
    border-top: 1px solid var(--nx-border);
    margin: 10px 0;
}

/* Dashboard Widgets - child-link icon when it comes from the widget builder. */
body.nx-theme .nx-hp-child-ico {
    font-size: 18px;
    line-height: 1;
    vertical-align: -4px;
    margin-right: 6px;
    color: var(--nx-primary-text, var(--nx-primary));
}

body.nx-theme .nx-menu-header,
body.nx-theme .dropdown-menu .nx-menu-header {
    display: block;
    padding: 10px 12px 4px;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--nx-muted);
    pointer-events: none;
    cursor: default;
}
body.nx-theme .nx-menu-divider,
body.nx-theme .dropdown-menu .nx-menu-divider {
    display: block;
    height: 1px;
    margin: 6px 10px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    background: var(--nx-border);
    pointer-events: none;
    overflow: hidden;
}
/* Badge beside a custom item's label. */
body.nx-theme .nx-navbar-link .badge,
body.nx-theme .nx-sh-topnav-item .badge {
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: var(--nx-radius-badge);
    background: color-mix(in srgb, var(--nx-primary) 14%, transparent);
    color: var(--nx-primary-text, var(--nx-primary));
    font-size: 10.5px;
    font-weight: 400;
}

.nx-custom-select-search {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: -6px -6px 10px;
    background: var(--nx-card-bg);
    border-bottom: 1px solid var(--nx-border);
}
.nx-custom-select-search .material-symbols-rounded { font-size: 18px; color: var(--nx-muted); flex-shrink: 0; }
.nx-custom-select-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-family: var(--nx-font-family);
    font-size: 13.5px;
    color: var(--nx-text);
}
body.nx-theme .nx-custom-select-search input:focus,
body.nx-theme .nx-custom-select-search input:focus-visible,
body.nx-theme .nx-langmenu-search input:focus,
body.nx-theme .nx-langmenu-search input:focus-visible {
    outline: none;
    box-shadow: none;
}
body.nx-theme .nx-custom-select-search:focus-within,
body.nx-theme .nx-langmenu-search:focus-within {
    border-bottom-color: var(--nx-primary);
}
body.nx-theme .nx-custom-select-search:focus-within .material-symbols-rounded,
body.nx-theme .nx-langmenu-search:focus-within .material-symbols-rounded {
    color: var(--nx-primary-text, var(--nx-primary));
}

.nx-custom-select-noresult { padding: 12px; text-align: center; font-size: 13px; color: var(--nx-muted); }

/* Group headings for skinned selects that ship <optgroup>. */
.nx-custom-select-group {
    padding: 10px 12px 6px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nx-muted);
    list-style: none;
    cursor: default;
}
/* ================= language switcher ================= */
.nx-langsw { position: relative; display: inline-block; z-index: 1050; }

.btn.nx-langsw-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    box-shadow: none;
    font-family: var(--nx-font-family);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1;
    color: var(--nx-text);
    transition: border-color var(--nx-transition), color var(--nx-transition);
}
.btn.nx-langsw-btn:hover,
.nx-langsw.show .btn.nx-langsw-btn {
    border-color: color-mix(in srgb, var(--nx-primary) 35%, var(--nx-border));
    color: var(--nx-primary-text, var(--nx-primary));
    background: var(--nx-card-bg);
}
.nx-langsw-flag { flex-shrink: 0; border-radius: 2px; }
.nx-langsw-name { white-space: nowrap; color: var(--nx-text) !important; }
.nx-langsw-caret { font-size: 18px; color: var(--nx-muted); transition: transform var(--nx-transition-fast); }
.nx-langsw.show .nx-langsw-caret { transform: rotate(180deg); }

.nx-langmenu {
    width: 268px;
    min-width: 268px;
    padding: 8px;
    margin: 8px 0 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    background: var(--nx-card-bg);
    box-shadow: var(--nx-shadow), 0 12px 32px rgba(16, 24, 40, .10);
}
.nx-langsw-up .nx-langmenu { margin: 0 0 8px; }

.nx-langmenu-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--nx-border);
}
.nx-langmenu-search .material-symbols-rounded { font-size: 18px; color: var(--nx-muted); }
.nx-langmenu-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    outline: none;
    box-shadow: none;
    font-family: var(--nx-font-family);
    font-size: 13.5px;
    color: var(--nx-text);
}
.nx-langmenu-search input::placeholder { color: var(--nx-muted); }

.nx-langmenu-list {
    max-height: min(300px, 38vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--nx-border) transparent;
}
.nx-langmenu-list::-webkit-scrollbar { width: 8px; }
.nx-langmenu-list::-webkit-scrollbar-thumb { background: var(--nx-border); border-radius: 8px; }

a.nx-langmenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--nx-radius-md);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--nx-text);
    text-decoration: none;
    transition: background var(--nx-transition), color var(--nx-transition);
}
a.nx-langmenu-item:hover,
a.nx-langmenu-item:focus {
    background: color-mix(in srgb, var(--nx-primary) 8%, transparent);
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: none;
}
a.nx-langmenu-item.is-active {
    background: color-mix(in srgb, var(--nx-primary) 12%, transparent);
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}
.nx-langmenu-flag { flex-shrink: 0; border-radius: 2px; }
.nx-langmenu-text { flex: 1 1 auto; min-width: 0; }

.nx-langmenu-empty {
    padding: 14px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--nx-muted);
}

@media (max-width: 480px) {
    .nx-langmenu { width: 240px; min-width: 240px; }
}

body.nx-theme .nx-topbar-expanded-top {
    border-bottom: 1px solid var(--nx-border);
}
body.nx-theme .nx-topbar-expanded-bottom {
    box-shadow: none;
}
body.nx-theme.nx-header-sticky header.nx-topbar {
    top: 0;
}
body.nx-theme.nx-header-sticky header.nx-topbar::before {
    content: none;
}

body.nx-theme footer.nx-footer {
    margin-top: 38px;
}
body.nx-theme footer.nx-footer > .nx-content-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
body.nx-theme .nx-footer-card {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: var(--nx-topbar-gutter);
    padding-right: var(--nx-topbar-gutter);
}
body.nx-theme .nx-footer-top,
body.nx-theme .nx-footer-cols,
body.nx-theme .nx-footer-bottom {
    max-width: var(--nx-container-width);
    margin-left: auto;
    margin-right: auto;
}

body.nx-theme .btn,
body.nx-theme .btn:hover,
body.nx-theme .btn:active,
body.nx-theme .btn:focus,
body.nx-theme .nx-btn,
body.nx-theme .nx-btn:hover,
body.nx-theme .nx-btn:active,
body.nx-theme .nx-btn:focus,
body.nx-theme button,
body.nx-theme button:hover,
body.nx-theme button:active,
body.nx-theme button:focus,
body.nx-theme input[type="submit"],
body.nx-theme input[type="submit"]:hover,
body.nx-theme input[type="submit"]:focus {
    box-shadow: none;
}
body.nx-theme .btn:focus-visible,
body.nx-theme .nx-btn:focus-visible,
body.nx-theme button:focus-visible,
body.nx-theme input[type="submit"]:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-primary) 25%, transparent);
}

body.nx-theme .nx-inv-due {
    background: linear-gradient(105deg,
        color-mix(in srgb, var(--nx-primary) 38%, #000) 0%,
        color-mix(in srgb, var(--nx-primary) 62%, #000) 48%,
        color-mix(in srgb, var(--nx-primary) 80%, #000) 100%);
    border: 0;
    border-radius: var(--nx-radius-card);
    box-shadow: none;
    padding: 22px;
}
body.nx-theme .nx-inv-due .amount-due-label {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, .75);
}
body.nx-theme .nx-inv-due .amount-due-value {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -.8px;
    color: #fff;
    margin-top: 2px;
}
body.nx-theme .nx-inv-gw {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}
body.nx-theme .nx-inv-gw-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, .75);
}
body.nx-theme .nx-inv-gw form { margin: 0; }
body.nx-theme .nx-inv-gw-select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    font-family: var(--nx-font-family);
    font-size: 14px;
    font-weight: 400;
    color: var(--nx-text);
}
body.nx-theme .nx-inv-due .payment-btn-container { margin-top: 14px; }
body.nx-theme .nx-inv-due .payment-btn-container .btn,
body.nx-theme .nx-inv-due .payment-btn-container input[type="submit"] {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}

body.nx-theme .nx-inv-actions { margin-top: 24px; }
body.nx-theme .nx-inv-actions-title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.3px;
    color: var(--nx-text);
    margin-bottom: 10px;
}
body.nx-theme .nx-inv-action {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 9px 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 400;
    color: var(--nx-primary-text, var(--nx-primary));
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
body.nx-theme .nx-inv-action:hover {
    color: var(--nx-primary-hover);
    text-decoration: none;
}
body.nx-theme .nx-inv-action .material-symbols-rounded { font-size: 19px; }

body.nx-theme .nx-ip-submit-row {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

body.nx-theme .nx-ipsum {
    background: linear-gradient(105deg,
        color-mix(in srgb, var(--nx-primary) 38%, #000) 0%,
        color-mix(in srgb, var(--nx-primary) 62%, #000) 48%,
        color-mix(in srgb, var(--nx-primary) 80%, #000) 100%);
    border-radius: var(--nx-radius-card);
    padding: 22px;
    color: #fff;
}
body.nx-theme .nx-ipsum-head {
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -.3px;
    margin-bottom: 16px;
}
body.nx-theme .nx-ipsum-items {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .35) transparent;
    padding-right: 4px;
}
body.nx-theme .nx-ipsum-items::-webkit-scrollbar { width: 6px; }
body.nx-theme .nx-ipsum-items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .3);
    border-radius: 6px;
}
body.nx-theme .nx-ipsum-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
}
body.nx-theme .nx-ipsum-desc { min-width: 0; }
body.nx-theme .nx-ipsum-amt { white-space: nowrap; font-weight: 400; }
body.nx-theme .nx-ipsum-sub {
    color: rgba(255, 255, 255, .82);
}
body.nx-theme .nx-ipsum-sep {
    height: 1px;
    background: rgba(255, 255, 255, .22);
    margin: 12px 0;
}
body.nx-theme .nx-ipsum-total-label {
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, .75);
}
body.nx-theme .nx-ipsum-total {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -.8px;
    margin-top: 2px;
}
body.nx-theme .nx-ipsum-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin-top: 18px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: color-mix(in srgb, var(--nx-primary) 12%, #fff);
    color: var(--nx-primary-text, var(--nx-primary));
    font-family: var(--nx-font-family);
    font-size: 14.5px;
    font-weight: 400;
    cursor: pointer;
    transition: background var(--nx-transition);
}
body.nx-theme .nx-ipsum-pay:hover {
    background: #fff;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nx-ipsum-pay .nx-btn-arrow {
    order: 2;
    font-size: 18px;
    color: inherit;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}

body.nx-theme .nx-ipsum-pay .nx-btn-arrow {
    color: currentColor !important;
    -webkit-text-fill-color: currentColor;
    background: none;
}

body.nx-theme .nx-ipsum-back {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--nx-space-2);
    padding: var(--nx-space-2) 0;
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: var(--nx-weight-heading);
    font-size: var(--nx-font-size-md);
    text-decoration: none;
}
body.nx-theme .nx-ipsum-back:hover { color: var(--nx-primary-hover); }

/* Icon pack: one weight for every icon. Regular and light only exist in the Pro font WHMCS ships, so
   the family is pinned to it; a Font Awesome Free stylesheet added by another module cannot then
   swap in a font that lacks the glyph. */
body.nx-theme.nx-icons-fas :is(.fa, .fas, .far, .fal, .fa-solid, .fa-regular, .fa-light) {
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
}
body.nx-theme.nx-icons-far :is(.fa, .fas, .far, .fal, .fa-solid, .fa-regular, .fa-light) {
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 400;
}
body.nx-theme.nx-icons-fal :is(.fa, .fas, .far, .fal, .fa-solid, .fa-regular, .fa-light) {
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 300;
}
/* Without a pack the stock weights stay, but the family is still WHMCS's own. */
body.nx-theme :is(.fas, .fa-solid) { font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "Font Awesome 6 Free", "Font Awesome 5 Free"; }

.nx-dband .domainchecker-homepage-captcha,
.nx-dband #default-captcha-domainchecker,
.nx-dband #google-recaptcha-domainchecker { width: 100%; }

.nx-dband #default-captcha-domainchecker {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 420px;
    margin: 18px auto 0;
    padding: 16px 18px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
}
.nx-dband #default-captcha-domainchecker > .col-6,
.nx-dband #default-captcha-domainchecker > .col-md-8 {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding: 0;
}
.nx-dband #default-captcha-domainchecker .nx-form-hint {
    flex: 1 1 100%;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
    text-align: center;
}
.nx-dband #default-captcha-domainchecker .captchaimage { line-height: 0; }
.nx-dband #inputCaptchaImage {
    height: 42px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    border-radius: 9px;
    display: block;
}
.nx-dband #inputCaptcha {
    width: 130px;
    max-width: 100%;
    min-width: 0;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 9px;
    background: #fff;
    color: var(--nx-text);
    padding: 0 14px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    box-shadow: none;
}
.nx-dband #inputCaptcha:focus { outline: none; border-color: #fff; }
.nx-dband #inputCaptcha::placeholder { letter-spacing: 0; font-weight: 400; }

.nx-dband #google-recaptcha-domainchecker {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

/* Settings > Client experience: "Animated page transitions" */
@keyframes nxPageFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
body.nx-page-fade { animation: nxPageFade .3s ease; }

/* Settings > Client experience: "Compact tables on mobile" */
@media (max-width: 640px) {
    body.nx-compact-tables .nx-table th,
    body.nx-compact-tables .nx-table td,
    body.nx-compact-tables .invoice-table th,
    body.nx-compact-tables .invoice-table td {
        padding: 8px 10px;
        font-size: 12px;
    }
    body.nx-compact-tables table:not(.nx-table):not(.invoice-table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

@keyframes nx-btn-spin { to { transform: rotate(360deg); } }

body.nx-theme .nx-btn-loading {
    position: relative;
    box-sizing: border-box;
    pointer-events: none;
    color: transparent !important;
    filter: brightness(.92);
    --nx-btn-spinner: #fff;
}
body.nx-theme .nx-btn-loading > * { visibility: hidden !important; }
body.nx-theme .nx-btn-loading i.fa-spinner,
body.nx-theme .nx-btn-loading .loader,
body.nx-theme .nx-btn-loading .nx-loader { display: none !important; }
body.nx-theme .nx-btn-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid color-mix(in srgb, var(--nx-btn-spinner) 35%, transparent);
    border-top-color: var(--nx-btn-spinner);
    border-radius: 50%;
    animation: nx-btn-spin .6s linear infinite;
    pointer-events: none;
}
body.nx-theme .nx-btn-loading.btn-default,
body.nx-theme .nx-btn-loading.nx-btn-outline,
body.nx-theme .nx-btn-loading.nx-modal-cancel {
    --nx-btn-spinner: var(--nx-primary);
}
body.nx-theme .nx-btn-loading:focus,
body.nx-theme .nx-btn-loading:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
    body.nx-theme .nx-btn-loading::after { animation: none; }
}

body.nx-theme#popup-backdrop {
    background: var(--nx-bg);
    margin: 0;
    padding: 24px;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.nx-ve-card {
    width: 100%;
    max-width: 680px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: var(--nx-shadow);
    overflow: hidden;
}
.nx-ve-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--nx-border);
}
.nx-ve-head-ico {
    color: var(--nx-primary-text, var(--nx-primary));
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}
.nx-ve-title {
    margin: 0;
    font-size: var(--nx-font-size-lg);
    font-weight: 600;
    color: var(--nx-text);
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.nx-ve-attachments {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.nx-ve-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--nx-radius-sm);
    border: 1px solid var(--nx-border);
    background: var(--nx-bg);
    color: var(--nx-muted);
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
}
.nx-ve-attach-ico { font-size: 15px; }
.nx-ve-body { padding: 0; }
.nx-ve-frame {
    display: block;
    width: 100%;
    height: 60vh;
    min-height: 320px;
    border: none;
    background: #fff;
}
.nx-ve-foot {
    display: flex;
    justify-content: center;
    padding: 16px 24px;
    border-top: 1px solid var(--nx-border);
}
body.nx-theme .nx-pmm-body { padding: 24px; }
body.nx-theme .nx-pmm-head-divider { margin: 18px 0 20px; }
body.nx-theme .nx-pmm-field { margin-bottom: 16px; }
body.nx-theme .fieldgroup-auxfields { margin: 0; padding: 0; }
body.nx-theme .nx-cc-type-pill.active,
body.nx-theme .nx-address-radio-label.active { border-width: 1px; box-shadow: none; }
body.nx-theme .nx-pmm-secnote { padding: 10px 14px; margin-bottom: 18px; }

body.nx-theme .nx-cad-mkt-title.nx-card-title { display: flex; align-items: center; gap: 4px; font-size: 15.5px; font-weight: var(--nx-weight-card-title); }
body.nx-theme .nx-cad-mkt-title .nx-card-title-ico { margin-right: 0; vertical-align: middle; }
body.nx-theme .nx-cad-mkt-desc { font-size: var(--nx-font-size-sm); line-height: 1.5; font-weight: 400; }
body.nx-theme .nx-card-head .nx-card-title:has(.nx-card-title-ico) { display: flex; align-items: center; gap: 4px; font-size: 15.5px; font-weight: var(--nx-weight-card-title); }
body.nx-theme .nx-card-head .nx-card-title:has(.nx-card-title-ico) .nx-card-title-ico { margin-right: 0; vertical-align: middle; }
body.nx-theme .nx-card-head-lg .nx-card-title { font-size: 15.5px; font-weight: var(--nx-weight-card-title); }
body.nx-theme .nx-card-head-lg .nx-card-title-ico { margin-right: 0; vertical-align: middle; }

body.nx-theme .nx-card-head-lg .nx-card-title { font-size: 15.5px; font-weight: var(--nx-weight-card-title); }
body.nx-theme .nx-card-head-lg .nx-card-head-desc { font-size: var(--nx-font-size-sm); line-height: 1.5; }
body.nx-theme .nx-form-label { font-size: var(--nx-font-size-sm); font-weight: 400; }
body.nx-theme .nx-form-group { margin-bottom: 16px; }
body.nx-theme .nx-acm-checklabel { font-size: var(--nx-font-size-sm); }

@media (max-width: 767.98px) {
    body.nx-theme .nx-pmm-body { padding: 18px 16px; }
    body.nx-theme .nx-pmm-head-divider { margin: 16px 0 18px; }
}

body.nx-theme .bootstrap-switch {
    width: 44px !important; height: 24px !important; min-width: 44px !important;
    padding: 0 !important; overflow: hidden; border: 0; border-radius: var(--nx-radius-badge);
    background: var(--nx-border); vertical-align: middle;
}
body.nx-theme .bootstrap-switch input {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
body.nx-theme .bootstrap-switch .bootstrap-switch-container {
    width: 100% !important; height: 100% !important; min-width: 100% !important;
    transform: none !important; position: relative; display: block !important;
}
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-on,
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-off {
    position: absolute; inset: 0; width: 100% !important; min-width: 100% !important;
    height: 100% !important; padding: 0 !important; border: 0;
    font-size: 0; line-height: 24px; display: block !important;
}
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-off { background: var(--nx-border); }
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-on { background: var(--nx-primary); }
body.nx-theme .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-on,
body.nx-theme .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-off { display: none !important; }
body.nx-theme .bootstrap-switch .bootstrap-switch-label {
    position: absolute; z-index: 2; top: 2px; left: 2px; width: 20px !important;
    min-width: 20px !important; height: 20px; margin: 0; padding: 0 !important;
    border: 0; border-radius: 50%; background: #fff !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .22);
    transition: transform var(--nx-transition-fast);
}
body.nx-theme .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label { transform: translateX(20px); }

body.nx-theme .nx-vt-reply-card,
body.nx-theme .nx-vt-card { border-width: 1px; }
body.nx-theme .nx-vt-reply-card { margin-bottom: 12px !important; }
body.nx-theme .nx-vt-reply-head { padding: 12px 14px !important; }
body.nx-theme .nx-vt-reply-body { padding: 14px !important; line-height: 1.55; }
body.nx-theme .nx-vt-reply-form-head { padding: 14px 16px; }
body.nx-theme .nx-vt-pad-24 { padding: 16px; }
body.nx-theme .nx-vt-details-card,
body.nx-theme .nx-vt-service-card { padding: 18px; margin-bottom: 12px; }
body.nx-theme .nx-vt-details-head { margin-bottom: 14px; }
body.nx-theme .nx-vt-details-list { gap: 10px; }
body.nx-theme .nx-vt-detail-row { padding-bottom: 8px; }
body.nx-theme .nx-vt-more-card { padding: 16px 18px; }
body.nx-theme .nx-vt-submit { min-width: 128px; height: 38px; box-shadow: 0 5px 12px rgba(var(--nx-primary-rgb), .18); }
body.nx-theme .nx-vt-submit:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(var(--nx-primary-rgb), .24); }

@media (max-width: 991.98px) {
    body.nx-theme .nx-vt-title { font-size: 22px; }
    body.nx-theme .nx-vt-close-btn-top { height: 36px; }
}

@media (max-width: 575.98px) {
    body.nx-theme .nx-vt-title { font-size: 20px; }
    body.nx-theme .nx-vt-subtitle { font-size: 12px; line-height: 1.5; }
    body.nx-theme .nx-vt-reply-date { font-size: 11px; }
    body.nx-theme .nx-vt-reply-form-head { padding: 12px 14px; }
    body.nx-theme .nx-vt-pad-24 { padding: 14px; }
    body.nx-theme .nx-vt-submit { width: 100%; }
}

body.nx-theme .bootstrap-switch {
    position: relative; display: inline-block !important; width: 44px !important;
    min-width: 44px !important; height: 24px !important; min-height: 24px !important;
    padding: 0 !important; border: 0 !important; border-radius: 999px !important;
    background: var(--nx-border) !important; overflow: hidden !important;
    vertical-align: middle; box-shadow: none !important;
}
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-on,
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-off,
body.nx-theme .bootstrap-switch .bootstrap-switch-label { display: none !important; }
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-on,
body.nx-theme .bootstrap-switch .bootstrap-switch-handle-off {
    position: absolute !important; inset: 0; z-index: 4; width: 100% !important;
    min-width: 100% !important; height: 100% !important; padding: 0 !important;
    opacity: 0 !important; cursor: pointer;
}
body.nx-theme .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off,
body.nx-theme .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on { display: block !important; }
body.nx-theme .bootstrap-switch .bootstrap-switch-container {
    position: static !important; display: block !important; width: 100% !important;
    height: 100% !important; min-width: 0 !important; transform: none !important;
}
body.nx-theme .bootstrap-switch::after {
    content: ""; position: absolute; z-index: 2; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .22);
    transition: transform var(--nx-transition-fast);
}
body.nx-theme .bootstrap-switch.bootstrap-switch-on { background: var(--nx-primary) !important; }
body.nx-theme .bootstrap-switch.bootstrap-switch-on::after { transform: translateX(20px); }
body.nx-theme .bootstrap-switch input {
    position: absolute !important; inset: 0; z-index: 3; width: 100% !important;
    height: 100% !important; margin: 0 !important; opacity: 0 !important;
    cursor: default; display: block !important; pointer-events: none;
}
body.nx-theme .bootstrap-switch.off .bootstrap-switch-handle-off,
body.nx-theme .bootstrap-switch.on .bootstrap-switch-handle-on { display: block !important; }
body.nx-theme .bootstrap-switch.off .bootstrap-switch-handle-on,
body.nx-theme .bootstrap-switch.on .bootstrap-switch-handle-off { display: none !important; }
body.nx-theme .bootstrap-switch.on { background: var(--nx-primary) !important; }
body.nx-theme .bootstrap-switch.on::after { transform: translateX(20px); }

.dataTables_length select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--nx-card-bg) !important;
    color: var(--nx-text) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: 8px !important;
    padding: 6px 30px 6px 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
    outline: none !important;
    box-shadow: none !important;
}
.dataTables_length select:hover {
    border-color: var(--nx-muted) !important;
}
.dataTables_length select:focus,
.dataTables_length select:focus-visible,
.dataTables_length select:active {
    border-color: var(--nx-primary) !important;
    outline: none !important;
    box-shadow: none !important;
}

.nx-custom-select-search input {
    background-color: transparent !important;
    color: var(--nx-text) !important;
    border: 0 !important;
}
.nx-custom-select-options {
    margin-top: 10px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4) !important;
}

.dataTables_length {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.dataTables_length select {
    width: auto !important;
    min-width: 65px;
    display: inline-block !important;
}

.dataTables_wrapper > .row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
    margin: 0 !important;
    flex: 0 0 auto;
}

.dataTables_paginate .paginate_button {
    background: transparent !important;
    border: none !important;
    color: var(--nx-text) !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    margin: 0 2px;
    transition: background-color var(--nx-transition), color var(--nx-transition);
}
.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: var(--nx-border) !important;
    color: var(--nx-text) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: var(--nx-primary) !important;
    color: #fff !important;
    border-radius: 8px !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
    background: transparent !important;
    color: var(--nx-muted) !important;
    opacity: .5;
    cursor: default;
}

.nx-quotes-page .dataTables_wrapper .dataTables_paginate {
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
}
.nx-quotes-page .dataTables_wrapper .dataTables_paginate .paginate_button,
.nx-quotes-page .dataTables_wrapper .dataTables_paginate .page-link {
    min-width: 32px;
    padding: 6px 10px !important;
    border-radius: 8px !important;
}

@media (max-width: 768px) {
    .dataTables_wrapper > .row {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
    }
    .dataTables_length {
        justify-content: center !important;
        width: 100%;
    }
    .dataTables_wrapper .dataTables_paginate {
        display: flex !important;
        width: 100%;
        justify-content: center !important;
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .nx-quotes-page .dataTables_wrapper .dataTables_paginate {
        align-self: flex-end !important;
        width: auto !important;
    }
}
@media (max-width: 400px) {
    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dataTables_paginate .page-item .page-link {
        padding: 6px 9px !important;
        min-width: 30px !important;
        font-size: 12px !important;
    }
}

.dataTables_paginate .paginate_button:not(.page-item),
.dataTables_paginate .page-item .page-link {
    border: 1px solid var(--nx-border) !important;
    background: transparent !important;
    color: var(--nx-text) !important;
    box-shadow: none !important;
    outline: none !important;
}
.dataTables_paginate .paginate_button.page-item {
    border: none !important;
    background: transparent !important;
}
.dataTables_paginate .paginate_button:not(.page-item):hover:not(.disabled):not(.current),
.dataTables_paginate .paginate_button:not(.page-item):focus,
.dataTables_paginate .paginate_button:not(.page-item):active,
.dataTables_paginate .page-item:not(.disabled):not(.active) .page-link:hover,
.dataTables_paginate .page-link:focus,
.dataTables_paginate .page-link:active {
    background: transparent !important;
    color: var(--nx-text) !important;
    border-color: var(--nx-border) !important;
    box-shadow: none !important;
    outline: none !important;
}
.dataTables_paginate .paginate_button:not(.page-item).current,
.dataTables_paginate .paginate_button:not(.page-item).current:hover,
.dataTables_paginate .page-item.active .page-link,
.dataTables_paginate .page-item.active .page-link:hover {
    background: var(--nx-primary) !important;
    color: #fff !important;
    border: 2px solid var(--nx-primary) !important;
}
.dataTables_paginate .paginate_button:not(.page-item).disabled,
.dataTables_paginate .page-item.disabled .page-link {
    background: transparent !important;
    color: var(--nx-muted) !important;
    opacity: .5;
    box-shadow: none !important;
}

body.nx-theme .nx-legal-page-body {
    color: var(--nx-text);
    font-size: 14.5px;
    line-height: 1.75;
    max-width: 1400px;
}
body.nx-theme .nx-legal-page-body > *:first-child { margin-top: 0; }
body.nx-theme .nx-legal-page-body > *:last-child { margin-bottom: 0; }

body.nx-theme .nx-legal-page-body h2 {
    margin: 30px 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--nx-text);
}
body.nx-theme .nx-legal-page-body h3 {
    margin: 22px 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--nx-text);
}
body.nx-theme .nx-legal-page-body p { margin: 0 0 14px; }
body.nx-theme .nx-legal-page-body ul,
body.nx-theme .nx-legal-page-body ol { margin: 0 0 14px; padding-left: 22px; }
body.nx-theme .nx-legal-page-body li { margin-bottom: 6px; }
body.nx-theme .nx-legal-page-body a { color: var(--nx-primary-text, var(--nx-primary)); font-weight: 400; }
body.nx-theme .nx-legal-page-body strong { color: var(--nx-text); font-weight: 400; }
body.nx-theme .nx-legal-page-body hr {
    margin: 26px 0;
    border: 0;
    border-top: 1px solid var(--nx-border);
}
/* A table an admin pastes in should not blow the card open on mobile. */
body.nx-theme .nx-legal-page-body table { width: 100%; margin: 0 0 14px; }
body.nx-theme .nx-legal-page-body th,
body.nx-theme .nx-legal-page-body td {
    padding: 8px 10px;
    border: 1px solid var(--nx-border);
    text-align: left;
}

body.nx-theme .nx-legal-page-body .nx-legal-template-note {
    margin: 0 0 22px;
    padding: 12px 14px;
    border: 1px solid var(--nx-border);
    border-left: 3px solid var(--nx-warning);
    border-radius: var(--nx-radius-md, 10px);
    background: rgba(var(--nx-primary-rgb), 0.04);
    color: var(--nx-muted);
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    body.nx-theme .nx-legal-page-body { font-size: 14px; }
    body.nx-theme .nx-legal-page-body h2 { margin-top: 24px; font-size: 16px; }
}

@media (min-width: 1250px) {
    /* 12px -> 6px between every item in the row. */
    body.nx-theme .nx-topbar-right,
    body.nx-theme .nx-sh-tb-actions { gap: 6px; }

    body.nx-theme .nx-topbar-right .nx-topbar-divider,
    body.nx-theme .nx-sh-tb-actions .nx-topbar-divider { margin: 0; }

    body.nx-theme .nx-topbar-right .btn.nx-langsw-btn,
    body.nx-theme .nx-sh-tb-actions .btn.nx-langsw-btn {
        gap: 5px;
        padding: 0 8px;
    }
    body.nx-theme .nx-topbar-right .btn.nx-topbar-link.nx-sh-currency-btn,
    body.nx-theme .nx-sh-tb-actions .btn.nx-topbar-link.nx-sh-currency-btn {
        padding: 6px 6px;
    }
    /* Icon-only at this width, so 12px of side padding was mostly air. */
    body.nx-theme .nx-topbar-right .nx-topbar-link.nx-sh-tb-cart,
    body.nx-theme .nx-sh-tb-actions .nx-topbar-link.nx-sh-tb-cart:not(:has(.nx-sh-tb-cart-text)) {
        padding-left: 8px;
        padding-right: 8px;
    }

    body.nx-theme .nx-guest-login-buttons { gap: 4px; }
    body.nx-theme .btn.nx-sh-btn-login-sm,
    body.nx-theme .btn.nx-sh-btn-register-sm {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    body.nx-theme .nx-topbar .nx-topbar-left > a.nx-sh-nodeco {
        margin-right: 14px !important;
    }

    body.nx-theme .nx-navbar-link.nx-sh-topnav-link { white-space: nowrap; }

    body.nx-theme .nx-topbar .nx-topbar-left.nx-sh-flex-grow { min-width: 0; }
    body.nx-theme .nx-topbar .nx-topbar-nav-middle { min-width: 0; }
    body.nx-theme .nx-topbar .nx-topbar-right { flex-shrink: 0; }

    body.nx-theme .nx-topbar-nav-middle { gap: 4px; }
    body.nx-theme .nx-navbar-link.nx-sh-topnav-link,
    body.nx-theme .nx-navbar-link.nx-sh-topnav-link-dd {
        padding-left: 10px;
        padding-right: 10px;
    }
}

body.nx-theme .nx-auth-shell {
    position: relative;
    z-index: 1;
}
body.nx-theme .nx-auth-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    height: 210px;
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--nx-primary) 24%, var(--nx-bg)) 0%,
        color-mix(in srgb, var(--nx-primary) 9%, var(--nx-bg)) 100%);
    z-index: -1;
    pointer-events: none;
}
@supports not (background: linear-gradient(color-mix(in srgb, red 50%, transparent), red)) {
    body.nx-theme .nx-auth-shell::before {
        background: rgba(var(--nx-primary-rgb), 0.12);
    }
}
html:has(.nx-auth-shell) { overflow-x: hidden; }

body.nx-theme .nx-auth-shell {
    align-items: flex-start !important;
    padding-top: 64px !important;
}
body.nx-theme .nx-auth-shell > .w-100 { margin: 0 auto; }

/* ---------- the card ---------- */
body.nx-theme .nx-auth-shell .card.nx-sh-card-r16 {
    border-radius: var(--nx-radius-card);
    padding: 28px !important;
    background: var(--nx-card-bg);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
                0 12px 32px rgba(16, 24, 40, .07);
}
body.nx-theme:has(#registration) .nx-auth-shell .card.nx-sh-card-r16 {
    padding: 0 !important;
    box-shadow: none;
    border-radius: 0;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration .card {
    border-radius: var(--nx-radius-card);
    border: 1px solid var(--nx-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
                0 12px 32px rgba(16, 24, 40, .06);
}

/* ---------- registration's own heading, above the card ---------- */
body.nx-theme .nx-auth-hero {
    text-align: center;
    margin: 0 0 22px;
}
body.nx-theme .nx-auth-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--nx-primary) 78%, var(--nx-text));
}
body.nx-theme h1.nx-auth-hero-title {
    margin: 0;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.2;
    color: var(--nx-text);
}

/* ---------- theme credit, last line inside the card ---------- */
body.nx-theme .nx-auth-credit {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--nx-muted);
}
body.nx-theme .nx-auth-credit span {
    font-weight: 400;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme:has(#registration) .nx-auth-credit { margin-top: 14px; }

/* ---------- the provider (Google) button ---------- */
body.nx-theme .nx-auth-shell .social-signin-btns { margin: 0; }
body.nx-theme .nx-auth-shell .social-signin-btns .btn,
body.nx-theme .nx-auth-shell .social-signin-btns a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    border-radius: var(--nx-radius-input, 11px);
    border: 1px solid var(--nx-border);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-weight: 400;
    font-size: 14px;
    box-shadow: none;
}
body.nx-theme .nx-auth-shell .social-signin-btns .btn:hover,
body.nx-theme .nx-auth-shell .social-signin-btns a.btn:hover {
    border-color: color-mix(in srgb, var(--nx-primary) 35%, var(--nx-border));
    background: var(--nx-card-bg);
    color: var(--nx-text);
}

/* The "or" rule between the provider button and the form. */
body.nx-theme .nx-auth-shell .nx-section-label {
    position: relative;
    margin: 20px 0;
    text-align: center;
}
body.nx-theme .nx-auth-shell .nx-section-label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--nx-border);
}
body.nx-theme .nx-auth-shell .nx-section-label span {
    position: relative;
    padding: 0 12px;
    background: var(--nx-bg);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nx-muted);
}
/* On login the divider sits inside the white card, not on the page ground. */
body.nx-theme .nx-auth-shell .card .nx-section-label span { background: var(--nx-card-bg); }

@media (max-width: 575.98px) {
    body.nx-theme .nx-auth-shell { padding-top: 40px !important; }
    body.nx-theme .nx-auth-shell::before { height: 170px; }
    body.nx-theme .nx-auth-shell .card.nx-sh-card-r16 { padding: 20px !important; }
    body.nx-theme h1.nx-auth-hero-title { font-size: 23px; }
}

/* ---- 1. drop the duplicate label, keep the hero ---- */
body.nx-theme:has(#registration) .nx-auth-shell .providerPreLinking + .nx-section-label,
body.nx-theme:has(#registration) .nx-auth-shell .nx-section-label {
    display: none;
}

/* ---- 2. provider button: compact, centred, on the page ground ---- */
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns {
    display: flex;
    justify-content: center;
    margin: 0 0 4px;
}
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns .btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns a.btn {
    width: auto;
    min-width: 240px;
    padding: 0 22px;
}
body.nx-theme:has(#registration) .nx-auth-shell .providerPreLinking {
    position: relative;
    margin: 0 0 26px;
    padding-bottom: 22px;
}
body.nx-theme:has(#registration) .nx-auth-shell .providerPreLinking::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    height: 1px;
    background: var(--nx-border);
}
body.nx-theme:has(#registration) .nx-auth-shell .providerPreLinking::after {
    content: "OR";
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    padding: 0 12px;
    background: var(--nx-bg);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .12em;
    color: var(--nx-muted);
}

/* ---- 3. one continuous panel, hairline rules between sections ---- */
body.nx-theme:has(#registration) .nx-auth-shell #containerNewUserSignup {
    background: transparent;
    box-shadow: none;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration .card {
    margin-bottom: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--nx-card-bg);
}
body.nx-theme:has(#registration) .nx-auth-shell #containerNewUserSignup > .card:first-child,
body.nx-theme:has(#registration) .nx-auth-shell #containerNewUserSignup > div:not(.providerPreLinking):not(#providerLinkingMessages) > .card {
    border-radius: 0;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration .card {
    border-top: 1px solid var(--nx-border);
}
body.nx-theme:has(#registration) .nx-auth-shell #registration .card:first-of-type,
body.nx-theme:has(#registration) .nx-auth-shell .providerPreLinking ~ .card:first-of-type {
    border-top: 0;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration .card-body { padding: 22px 24px !important; }
body.nx-theme:has(#registration) .nx-auth-shell #registration h3.card-title { margin-bottom: 16px; font-size: 16px; }

/* ---- 4. width, and the tail of the form ---- */
body.nx-theme:has(#registration) .nx-auth-shell > .w-100,
body:has(#registration) .container > .w-100 { max-width: 560px !important; }

body.nx-theme:has(#registration) .nx-auth-shell .nx-reg-captcha,
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center {
    background: var(--nx-card-bg);
    margin-bottom: 0;
    padding: 0 24px;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center:first-of-type { padding-top: 18px; }
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center:last-of-type {
    padding-bottom: 22px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    margin-bottom: 0;
}
/* Register: full width with the primary glow the reference gives it. */
body.nx-theme:has(#registration) .nx-auth-shell #registration input.btn[type="submit"] {
    display: block;
    width: 100%;
    height: 50px;
    border-radius: var(--nx-radius-button, 12px);
    font-size: 15px;
    font-weight: 400;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--nx-primary) 34%, transparent);
}
/* The panel's shadow, applied once under the whole stack. */
body.nx-theme:has(#registration) .nx-auth-shell #registration form {
    filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .04))
            drop-shadow(0 10px 24px rgba(16, 24, 40, .07));
}

body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns .btn,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns a.btn {
    width: auto;
    min-width: 210px;
    padding: 0 20px;
    height: 44px;
}
body.nx-theme .nx-auth-shell .nx-auth-foot {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--nx-border);
}

body.nx-theme:has(#registration) .nx-auth-shell #registration form {
    background: var(--nx-card-bg);
    border-radius: var(--nx-radius-card);
    overflow: hidden;
    filter: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
                0 12px 32px rgba(16, 24, 40, .07);
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking {
    background: var(--nx-bg);
    margin: 0;
    padding: 22px 24px 24px;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::before { bottom: 12px; }
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::after {
    bottom: 4px;
    background: var(--nx-bg);
}

/* Nothing inside the panel carries its own surface, gap or corner any more. */
body.nx-theme:has(#registration) .nx-auth-shell #registration .card,
body.nx-theme:has(#registration) .nx-auth-shell #registration .card-body {
    background: transparent;
    border-radius: 0 !important;
    box-shadow: none;
}
body.nx-theme:has(#registration) .nx-auth-shell .nx-reg-captcha,
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center {
    background: transparent;
    border-radius: 0;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center {
    padding-left: 24px;
    padding-right: 24px;
    margin-bottom: 0;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center:last-of-type {
    padding-top: 4px;
    padding-bottom: 24px;
}
/* A separating rule above the ToS row, matching the ones between sections. */
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center:first-of-type {
    border-top: 1px solid var(--nx-border);
    padding-top: 20px;
}

body.nx-theme .nx-auth-shell .social-signin-btns .btn,
body.nx-theme .nx-auth-shell .social-signin-btns a.btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns .btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns a.btn,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns .btn,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns a.btn {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 18px;
}
body.nx-theme .nx-auth-shell .social-signin-btns {
    display: block;
    margin: 0;
}

/* The row is part of the panel now, not a strip on the page behind it. */
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking {
    background: transparent;
    padding: 24px 24px 0;
    margin: 0 0 22px;
}
/* The OR rule and its label therefore sit on the card surface. */
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::before { bottom: -12px; }
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::after {
    bottom: -20px;
    background: var(--nx-card-bg);
}
body.nx-theme:has(#registration) .nx-auth-shell .providerPreLinking + .card { border-top: 0; }

body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns { margin-top: 14px; }

body.nx-theme:has(#registration) .nx-auth-shell #registration form {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .05))
            drop-shadow(0 10px 22px rgba(16, 24, 40, .08));
}
body.nx-theme:has(#registration) .nx-auth-shell #registration #containerNewUserSignup {
    background: transparent;
}

/* ---- the provider block: on the page ground, above the panel ---- */
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking {
    background: transparent;
    padding: 0;
    margin: 0 0 26px;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration .social-signin-btns .btn,
body.nx-theme:has(#registration) .nx-auth-shell #registration .social-signin-btns a.btn {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 14px;
    background: var(--nx-card-bg);
    font-size: 14.5px;
}
/* OR, on the page ground under the button. */
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::before { bottom: -16px; }
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::after {
    bottom: -24px;
    background: var(--nx-bg);
}

/* ---- the panel: each part paints the surface, ends are rounded ---- */
body.nx-theme:has(#registration) .nx-auth-shell #registration .card,
body.nx-theme:has(#registration) .nx-auth-shell #registration .nx-reg-captcha,
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center {
    background: var(--nx-card-bg);
}
body.nx-theme:has(#registration) .nx-auth-shell #registration .providerPreLinking + .card,
body.nx-theme:has(#registration) .nx-auth-shell #registration #containerNewUserSignup > .card:first-child {
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
}
/* Last part = the Register button's row. */
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center:last-of-type {
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
}

body.nx-theme:has(#registration) .nx-auth-shell #registration form {
    filter: none;
}

/* ---- provider button: its own block, its own shadow, real air below ---- */
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking {
    margin: 0 0 58px;
    padding-bottom: 0;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration .social-signin-btns .btn,
body.nx-theme:has(#registration) .nx-auth-shell #registration .social-signin-btns a.btn {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05),
                0 8px 20px rgba(16, 24, 40, .07);
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::before {
    bottom: -30px;
    left: 8px;
    right: 8px;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::after {
    bottom: -38px;
    padding: 0 14px;
    background: var(--nx-bg);
}

/* ---- the panel's shadow, assembled from its parts ---- */
body.nx-theme:has(#registration) .nx-auth-shell #registration .card,
body.nx-theme:has(#registration) .nx-auth-shell #registration .nx-reg-captcha,
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center {
    box-shadow: -16px 0 26px -16px rgba(16, 24, 40, .10),
                 16px 0 26px -16px rgba(16, 24, 40, .10);
}
body.nx-theme:has(#registration) .nx-auth-shell #registration .providerPreLinking + .card,
body.nx-theme:has(#registration) .nx-auth-shell #registration #containerNewUserSignup > .card:first-child {
    box-shadow: -16px 0 26px -16px rgba(16, 24, 40, .10),
                 16px 0 26px -16px rgba(16, 24, 40, .10),
                 0 -8px 20px -10px rgba(16, 24, 40, .10);
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center:last-of-type {
    box-shadow: -16px 0 26px -16px rgba(16, 24, 40, .10),
                 16px 0 26px -16px rgba(16, 24, 40, .10),
                 0 14px 28px -12px rgba(16, 24, 40, .12);
}

body.nx-theme:has(#registration) .nx-auth-shell .card.nx-sh-card-r16 {
    background: transparent !important;
    border: 0 !important;
}

body.nx-theme:has(#registration) .nx-auth-shell #registration #containerNewUserSignup > .card {
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration #containerNewUserSignup > .card ~ .card {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* ---- tighter gap around the rule ---- */
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking {
    margin: 0 0 42px;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::before {
    bottom: -22px;
    left: 0;
    right: 0;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::after {
    bottom: -30px;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration .providerLinkingFeedback:empty {
    display: none;
}

body.nx-theme:has(#registration) .nx-auth-shell #registration .nx-reg-captcha {
    margin: 0;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration .nx-reg-captcha:empty {
    display: none;
}

body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center:first-of-type {
    border-top: 1px solid var(--nx-border);
    padding-top: 18px;
    padding-bottom: 0;
    margin-bottom: 0;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center:last-of-type {
    padding-top: 14px;
    padding-bottom: 18px;
    /* No longer the last row -- WHMCS's credit line below it closes the panel. */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: -16px 0 26px -16px rgba(16, 24, 40, .10),
                 16px 0 26px -16px rgba(16, 24, 40, .10);
}

body.nx-theme:has(#registration) .nx-auth-shell #registration + p {
    background: var(--nx-card-bg);
    margin: 0;
    padding: 0 24px 22px;
    font-size: 12.5px;
    color: var(--nx-muted);
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    box-shadow: -16px 0 26px -16px rgba(16, 24, 40, .10),
                 16px 0 26px -16px rgba(16, 24, 40, .10),
                 0 14px 28px -12px rgba(16, 24, 40, .12);
}
body.nx-theme:has(#registration) .nx-auth-shell #registration + p a {
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}

body.nx-theme .nx-auth-shell .card.nx-sh-card-r16 > p[style*="text-align:center"] {
    margin: 18px 0 0;
    font-size: 12.5px;
    color: var(--nx-muted);
}
body.nx-theme .nx-auth-shell .card.nx-sh-card-r16 > p[style*="text-align:center"] a {
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}

body.nx-theme:has(#registration) .nx-auth-shell #registration,
body.nx-theme:has(#registration) .nx-auth-shell #registration form,
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center,
body.nx-theme:has(#registration) .nx-auth-shell #registration .nx-reg-captcha,
body.nx-theme:has(#registration) .nx-auth-shell #registration + p {
    margin: 0 !important;
}
/* Whitespace-only wrapper: no captcha configured, nothing to show. */
body.nx-theme:has(#registration) .nx-auth-shell #registration .nx-reg-captcha:not(:has(*)) {
    display: none;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center > .form-check {
    margin: 0;
}

body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin > div,
body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin > div > div,
body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin div[role="button"],
body.nx-theme .nx-auth-shell .social-signin-btns .nsm7Bb-HzV7m-LgbsSe,
body.nx-theme .nx-auth-shell .social-signin-btns .S9gUrf-YoZ4jf {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
body.nx-theme .nx-auth-shell .social-signin-btns iframe {
    border: 0 !important;
    background: transparent !important;
    width: 100% !important;
}
/* GSI centres its label in whatever width it is given. */
body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- login: the single border, full width, as in the reference ---- */
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns .btn,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns a.btn {
    width: 100%;
    height: 48px;
    border: 1px solid var(--nx-border);
    border-radius: 12px;
    background: var(--nx-card-bg);
    box-shadow: none;
}
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns .btn:hover,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns a.btn:hover {
    border-color: color-mix(in srgb, var(--nx-primary) 35%, var(--nx-border));
    background: var(--nx-card-bg);
}

body.nx-theme .nx-auth-shell .social-signin-btns .btn,
body.nx-theme .nx-auth-shell .social-signin-btns a.btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns .btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns a.btn,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns .btn,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

body.nx-theme:has(#registration) .nx-auth-shell .card.nx-sh-card-r16 {
    gap: 0 !important;
    row-gap: 0 !important;
}
body.nx-theme:has(#registration) .nx-auth-shell .card.nx-sh-card-r16 > p[style*="text-align:center"] {
    margin: 0 !important;
    padding-top: 0 !important;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center:last-of-type {
    padding-bottom: 20px;
}

/* ---- wider cards, both pages ---- */
body.nx-theme .nx-auth-shell > .w-100.nx-sh-mw-440 { max-width: 480px; }
body.nx-theme:has(#registration) .nx-auth-shell > .w-100,
body:has(#registration) .container > .w-100 { max-width: 660px !important; }

body.nx-theme .nx-auth-shell .social-signin-btns .btn,
body.nx-theme .nx-auth-shell .social-signin-btns a.btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns .btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns a.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 56px;
    height: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--nx-card-bg) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05),
                0 8px 20px rgba(16, 24, 40, .07) !important;
}
/* Login: the reference gives it a hairline instead of the lifted shadow. */
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns .btn,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns a.btn {
    min-height: 50px;
    border: 1px solid var(--nx-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns .btn:hover,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns a.btn:hover {
    border-color: color-mix(in srgb, var(--nx-primary) 35%, var(--nx-border)) !important;
}
body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: auto;
}

.nsm7Bb-HzV7m-LgbsSe,
.social-signin-btns .nsm7Bb-HzV7m-LgbsSe {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 50px !important;
    border-radius: 12px !important;
    border-color: var(--nx-border, #dadce0) !important;
    font-family: var(--nx-font-family) !important;
    box-shadow: none !important;
}
.social-signin-btns .g_id_signin,
.social-signin-btns .g_id_signin > div,
.social-signin-btns .g_id_signin > div > div,
.social-signin-btns .S9gUrf-YoZ4jf {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

body.nx-theme .nx-auth-shell .social-signin-btns .btn,
body.nx-theme .nx-auth-shell .social-signin-btns a.btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns .btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns a.btn,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns .btn,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns a.btn {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--nx-card-bg) !important;
}
/* Registration keeps the lift the reference gives that block; login does not. */
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns .btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns a.btn {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05),
                0 8px 20px rgba(16, 24, 40, .07) !important;
}
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns .btn,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns a.btn {
    box-shadow: none !important;
}

body.nx-theme .nx-auth-shell .social-signin-btns .btn,
body.nx-theme .nx-auth-shell .social-signin-btns a.btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns .btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns a.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin,
body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin > div {
    width: auto !important;
    margin: 0 auto !important;
}

/* ---- the card carries the panel now ---- */
body.nx-theme:has(#registration) .nx-auth-shell .card.nx-sh-card-r16 {
    background: var(--nx-card-bg) !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
                0 12px 32px rgba(16, 24, 40, .07) !important;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking {
    background: var(--nx-bg) !important;
    border-radius: 18px 18px 0 0;
    margin: 0 !important;
    padding: 0 0 56px !important;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::before { bottom: 22px; }
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::after { bottom: 14px; }

body.nx-theme:has(#registration) .nx-auth-shell #registration,
body.nx-theme:has(#registration) .nx-auth-shell #registration form,
body.nx-theme:has(#registration) .nx-auth-shell #registration .card,
body.nx-theme:has(#registration) .nx-auth-shell #registration .card-body,
body.nx-theme:has(#registration) .nx-auth-shell #registration .nx-reg-captcha,
body.nx-theme:has(#registration) .nx-auth-shell #registration form > p.text-center,
body.nx-theme:has(#registration) .nx-auth-shell #registration + p {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
/* Keep only the hairlines that separate one section from the next. */
body.nx-theme:has(#registration) .nx-auth-shell #registration #containerNewUserSignup > .card ~ .card {
    border-top: 1px solid var(--nx-border) !important;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration #containerNewUserSignup > .card:first-of-type,
body.nx-theme:has(#registration) .nx-auth-shell #registration .providerPreLinking ~ .card:first-of-type {
    border-top: 0 !important;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration + p {
    padding: 0 24px 22px !important;
}

body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns .btn,
body.nx-theme .nx-auth-shell:not(:has(#registration)) .social-signin-btns a.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ---- registration: the provider row joins the card ---- */
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking {
    background: transparent !important;
    border-radius: 0;
    padding: 22px 24px 0 !important;
    margin: 0 0 40px !important;
}
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns .btn,
body.nx-theme:has(#registration) .nx-auth-shell .social-signin-btns a.btn {
    background: transparent !important;
    box-shadow: none !important;
    min-height: 0 !important;
}
/* The rule sits in the margin below, on the card's own surface. */
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::before {
    bottom: -20px;
    left: 24px;
    right: 24px;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration form > #containerNewUserSignup > .providerPreLinking::after {
    bottom: -28px;
    background: var(--nx-card-bg);
}

body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin,
body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin > div,
body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin > div > div,
body.nx-theme .nx-auth-shell .social-signin-btns .S9gUrf-YoZ4jf {
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.nx-theme:has(#registration) .nx-auth-shell #registration #containerNewUserSignup > .card {
    border-top: 0 !important;
}
body.nx-theme:has(#registration) .nx-auth-shell #registration #containerNewUserSignup > .card ~ .card {
    border-top: 1px solid var(--nx-border) !important;
}

body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin div {
    width: auto !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}
/* And the block itself stays a centring row whatever else has set it. */
body.nx-theme .nx-auth-shell .social-signin-btns .g_id_signin {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

body.nx-theme:has(#registration) .nx-auth-shell #registration .col-sm-6:has(#inputCurrency) {
    flex: 0 0 100%;
    max-width: 100%;
}

body.nx-theme #registration .intl-tel-input {
    display: block;
    width: 100%;
    border-radius: var(--nx-radius-input, 11px) !important;
}
body.nx-theme #registration .intl-tel-input input.field,
body.nx-theme #registration .intl-tel-input input.field.form-control,
body.nx-theme #registration .intl-tel-input input[type="tel"] {
    border-radius: var(--nx-radius-input, 11px) !important;
    width: 100%;
}
body.nx-theme #registration .intl-tel-input .selected-flag,
body.nx-theme #registration .intl-tel-input .flag-container .selected-flag {
    border-top-left-radius: var(--nx-radius-input, 11px) !important;
    border-bottom-left-radius: var(--nx-radius-input, 11px) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
body.nx-theme #registration .intl-tel-input .flag-container {
    border-top-left-radius: var(--nx-radius-input, 11px);
    border-bottom-left-radius: var(--nx-radius-input, 11px);
    overflow: hidden;
}
body.nx-theme #registration .intl-tel-input.allow-dropdown .flag-container:has(.country-list:not(.hide)),
body.nx-theme #registration .intl-tel-input .flag-container:focus-within {
    overflow: visible;
}

body.nx-theme .btn-primary,
body.nx-theme .btn-styled-blue {
    background: var(--nx-btn-primary, var(--nx-primary));
    border-color: var(--nx-btn-primary, var(--nx-primary));
    color: var(--nx-btn-primary-text, #fff);
}
body.nx-theme .btn-primary:hover,
body.nx-theme .btn-primary:focus,
body.nx-theme .btn-primary:not(:disabled):not(.disabled):active,
body.nx-theme .btn-primary:not(:disabled):not(.disabled).active,
body.nx-theme .show > .btn-primary.dropdown-toggle {
    background-color: var(--nx-btn-primary-hover, var(--nx-primary-hover));
    border-color: var(--nx-btn-primary-hover, var(--nx-primary-hover));
    color: var(--nx-btn-primary-text, #fff);
}

body.nx-theme .btn-default,
body.nx-theme .btn-secondary {
    background: var(--nx-btn-secondary, var(--nx-card-bg));
    border-color: var(--nx-btn-secondary-border, var(--nx-border));
    color: var(--nx-btn-secondary-text, var(--nx-text));
    font-weight: var(--nx-weight-button-secondary);
}
body.nx-theme .btn-default:hover,
body.nx-theme .btn-secondary:hover,
body.nx-theme .btn-secondary:focus,
body.nx-theme .btn-secondary:not(:disabled):not(.disabled):active,
body.nx-theme .btn-secondary:not(:disabled):not(.disabled).active,
body.nx-theme .show > .btn-secondary.dropdown-toggle {
    background: var(--nx-btn-secondary-hover, rgba(var(--nx-primary-rgb), 0.06));
    border-color: var(--nx-btn-secondary-border, var(--nx-primary));
    color: var(--nx-btn-secondary-text, var(--nx-primary));
}

body.nx-theme .btn.nx-auth-btn,
body.nx-theme button.nx-auth-btn,
body.nx-theme input.nx-auth-btn,
body.nx-theme .btn.nx-btn-primary {
    background: var(--nx-btn-primary, var(--nx-primary));
    border-color: var(--nx-btn-primary, var(--nx-primary));
    color: var(--nx-btn-primary-text, #fff);
}
body.nx-theme .btn.nx-auth-btn:hover,
body.nx-theme button.nx-auth-btn:hover,
body.nx-theme input.nx-auth-btn:hover,
body.nx-theme .btn.nx-btn-primary:hover {
    background: var(--nx-btn-primary-hover, var(--nx-primary-hover));
    border-color: var(--nx-btn-primary-hover, var(--nx-primary-hover));
    color: var(--nx-btn-primary-text, #fff);
}

body.nx-theme .nx-footer-card {
    background: var(--nx-footer-bg-custom, var(--nx-card-bg));
}
body.nx-theme .nx-footer-card,
body.nx-theme .nx-footer-card .nx-footer-tag {
    color: var(--nx-footer-text, inherit);
}
body.nx-theme .nx-footer-card .nx-footer-copy,
body.nx-theme .nx-footer-card .nx-footer-col-title {
    color: var(--nx-footer-text, var(--nx-muted));
}
body.nx-theme .nx-footer-card .nx-footer-links a,
body.nx-theme .nx-footer-card .nx-footer-col-list a {
    color: var(--nx-footer-link, var(--nx-muted));
}
body.nx-theme .nx-footer-card .nx-footer-links a:hover,
body.nx-theme .nx-footer-card .nx-footer-col-list a:hover {
    color: var(--nx-footer-link, var(--nx-primary));
    opacity: .85;
}
body.nx-theme .nx-footer-card:has(.nx-footer-cols) .nx-footer-bottom,
body.nx-theme .nx-footer-card .nx-footer-cols {
    border-top-color: color-mix(in srgb, currentColor 18%, transparent);
}

/* ---------- the columns ---------- */
.nx-footer-cols {
    display: grid;
    grid-template-columns: repeat(var(--nx-footer-cols, 3), minmax(0, 1fr));
    gap: 28px 32px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--nx-border);
}
.nx-footer-col-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.nx-footer-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nx-footer-col-list li + li { margin-top: 9px; }
.nx-footer-col-list a {
    font-size: 13.5px;
    font-weight: var(--nx-weight-footer);
    text-decoration: none;
    transition: color var(--nx-transition), opacity var(--nx-transition);
}

@media (max-width: 991.98px) {
    .nx-footer-cols {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 24px;
    }
}
@media (max-width: 575.98px) {
    .nx-footer-cols {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 20px;
        padding-top: 20px;
    }
    .nx-footer-col-title { margin-bottom: 9px; }
    .nx-footer-col-list li + li { margin-top: 8px; }
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    max-width: none !important;
    width: 100%;
    padding: 0 !important;
    min-height: 100vh;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside)::before { content: none; }

/* ---------- left: the form column ---------- */
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
    max-width: 460px !important;
    margin: 0 auto;
    padding: 48px 32px;
    align-self: center;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .card.nx-sh-card-r16 {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
/* Logo goes top-left with the copy, not centred above a card. */
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .nx-auth-logo {
    text-align: left !important;
    margin-bottom: 34px !important;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .nx-login-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .nx-auth-title {
    font-size: 27px;
    letter-spacing: -.5px;
}
/* The copyright line sits under the form column, not across the whole page. */
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) > .w-100 > .text-center:last-child {
    margin-top: 26px;
}

/* ---------- right: the artwork panel ---------- */
.nx-auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;
    padding: 56px 40px;
    overflow: hidden;
    background: linear-gradient(150deg,
        var(--nx-primary) 0%,
        color-mix(in srgb, var(--nx-primary) 78%, #000) 100%);
    color: #fff;
    text-align: center;
}
@supports not (background: linear-gradient(color-mix(in srgb, red 50%, black), red)) {
    .nx-auth-aside { background: var(--nx-primary); }
}
/* The faint dot field the reference has behind the icons. */
.nx-auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .5;
    pointer-events: none;
}
.nx-auth-aside-icons {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.nx-auth-aside-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
}
.nx-auth-aside-ico .material-symbols-rounded { font-size: 22px; color: #fff; }
.nx-auth-aside-copy { position: relative; max-width: 420px; }
.nx-auth-aside-copy h2 {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 700;
    color: #fff;
}
.nx-auth-aside-copy p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
}

@media (max-width: 991.98px) {
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside) {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
        padding: 40px 24px 28px;
    }
    .nx-auth-aside {
        gap: 30px;
        padding: 36px 28px 40px;
    }
    .nx-auth-aside-ico { width: 42px; height: 42px; border-radius: 12px; }
}
@media (max-width: 575.98px) {
    .nx-auth-aside { display: none; }
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
        padding: 32px 20px 28px;
    }
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: stretch;
    gap: 0;
    max-width: none !important;
    width: 100%;
    padding: 0 !important;
    min-height: 100vh;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow)::before { content: none; }

body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) > .w-100 {
    max-width: 620px !important;
    margin: 0 auto;
    padding: 46px 32px 40px;
    align-self: start;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) .card.nx-sh-card-r16,
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration form,
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .card,
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .card-body,
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration + p {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .card-body {
    padding-top: 0 !important;
    padding-bottom: 18px !important;
}
/* Section headings become coloured labels rather than card titles. */
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration h3.card-title {
    margin: 22px 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration h3.card-title i,
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration h3.card-title br { display: none; }

body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .field-icon { display: none; }
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .field,
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration input.field,
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration select.field {
    padding-left: 14px;
}
.nx-reg-flabel {
    display: block;
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--nx-text);
}
.nx-reg-flabel:has(+ .form-group [required])::after {
    content: " *";
    color: var(--nx-danger);
    font-weight: 400;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .form-group { margin-bottom: 16px; }

/* ---------- the tail ---------- */
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration input.btn[type="submit"] {
    width: 100%;
    height: 50px;
    margin-top: 4px;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration form > p.text-center {
    padding: 0 !important;
    border: 0 !important;
}

.nx-auth-aside-narrow {
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 26px 24px;
    text-align: left;
}
.nx-auth-aside-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 44px;
}
.nx-auth-aside-brand img { height: 26px; width: auto; }
.nx-auth-aside-brand .material-symbols-rounded { font-size: 24px; }
.nx-auth-aside-news { position: relative; flex: 1 1 auto; }
.nx-auth-aside-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}
.nx-auth-aside-date {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, .72);
}
.nx-auth-aside-news h2 {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.28;
    color: #fff;
}
.nx-auth-aside-news p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}
.nx-auth-aside-tiles {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 28px;
}
.nx-auth-aside-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .16);
}
.nx-auth-aside-tile .material-symbols-rounded { font-size: 19px; color: #fff; }
.nx-auth-aside-tile em {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.3;
    color: #fff;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) > .w-100 {
        padding: 34px 24px 32px;
    }
    .nx-auth-aside-narrow { padding: 24px; }
    .nx-auth-aside-brand { margin-bottom: 22px; }
    .nx-auth-aside-tiles { margin-top: 20px; }
}
@media (max-width: 575.98px) {
    .nx-auth-aside-tiles { display: none; }
    .nx-auth-aside-narrow { padding: 20px; }
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) > .w-100 {
        padding: 26px 18px 28px;
    }
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside),
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) {
    display: grid !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    align-content: stretch !important;
}
.nx-auth-aside {
    justify-content: center;
    gap: 0;
}
.nx-auth-aside-icons { margin-bottom: auto; margin-top: auto; }
.nx-auth-aside-copy { margin-top: auto; }

body.nx-theme .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
    justify-self: center;
    align-self: center;
    width: 100%;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) > .w-100 {
    justify-self: center;
    width: 100%;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .nx-auth-logo .nx-logo-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .nx-auth-logo .nx-logo-mark .material-symbols-rounded {
    font-size: 22px;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .nx-auth-logo .nx-logo-img {
    height: 34px;
}

/* ---------- responsive, restated for the same reason ---------- */
@media (max-width: 991.98px) {
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside),
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) {
        grid-template-columns: 1fr !important;
        min-height: 0 !important;
    }
    .nx-auth-aside { min-height: 0; }
    .nx-auth-aside-icons { margin: 0 0 24px; }
    .nx-auth-aside-copy { margin-top: 0; }
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) {
    grid-template-columns: 300px minmax(0, 1fr) !important;
}
.nx-auth-aside-narrow { order: -1; }

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside-narrow) .card.nx-sh-card-r16,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside-narrow) #registration form,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .card,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .card-body,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .nx-reg-captcha,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside-narrow) #registration form > p.text-center,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside-narrow) #registration + p {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside-narrow) #registration #containerNewUserSignup > .card,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside-narrow) #registration #containerNewUserSignup > .card ~ .card {
    border-top: 0 !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside-narrow) .providerPreLinking {
    padding: 0 !important;
    margin: 0 0 26px !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside-narrow) .social-signin-btns .btn {
    border: 1px solid var(--nx-border) !important;
    border-radius: 12px !important;
    background: var(--nx-card-bg) !important;
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) > .w-100 {
    max-width: 560px !important;
}

@media (max-width: 991.98px) {
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .nx-auth-aside-narrow { order: -1; }
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) > .w-100 {
        max-width: 620px !important;
    }
}
@media (max-width: 575.98px) {
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .col-sm-6,
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .col-sm-4,
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration .col-sm-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
    max-width: 620px !important;
    align-self: center;
    padding: 48px 36px;
}

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .card.nx-sh-card-r16,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration form,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card-body,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .nx-reg-captcha,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration form > p.text-center,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration + p {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration #containerNewUserSignup > .card,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration #containerNewUserSignup > .card ~ .card {
    border-top: 0 !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card-body {
    padding-top: 0 !important;
    padding-bottom: 14px !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration h3.card-title {
    margin: 20px 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .field-icon { display: none; }
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .field,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration input.field,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration select.field {
    padding-left: 14px;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration input.btn[type="submit"] {
    width: 100%;
    height: 50px;
    margin-top: 4px;
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .social-signin-btns .btn,
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .social-signin-btns a.btn,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .social-signin-btns .btn,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .social-signin-btns a.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .providerPreLinking {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 0 26px !important;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
        max-width: 640px !important;
        padding: 36px 24px 30px;
    }
}
@media (max-width: 575.98px) {
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
        padding: 28px 18px 26px;
    }
    /* Two fields to a row is unusable this narrow. */
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-6,
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-4,
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .nx-auth-hero,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .nx-auth-logo,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .social-signin-btns,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration {
    text-align: left !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .nx-auth-hero {
    margin-bottom: 22px;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) h1.nx-auth-hero-title {
    font-size: 26px;
}

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-4,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-5,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-3 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .field-icon,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration label.field-icon {
    display: none !important;
}
/* Every control on the same footing: same height, same border, same radius. */
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .field,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration input.field,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration select.field,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration input.form-control,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration select.form-control {
    width: 100%;
    height: 44px;
    padding-left: 14px !important;
    border-radius: var(--nx-radius-input, 11px);
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .intl-tel-input {
    display: block;
    width: 100%;
}

/* ---- mailing list, ToS and the way back to sign-in ---- */
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card:has(.nx-reg-optin) .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px !important;
    border: 1px solid var(--nx-border);
    border-radius: 14px;
    background: var(--nx-bg) !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card:has(.nx-reg-optin) h3.card-title {
    margin: 0 0 3px;
    font-size: 13.5px;
    color: var(--nx-text);
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card:has(.nx-reg-optin) p {
    margin: 0;
    font-size: 12.5px;
    color: var(--nx-muted);
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration form > p.text-center:first-of-type {
    text-align: left !important;
    padding-top: 16px !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .form-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
}
.nx-reg-foot {
    justify-content: center;
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
}

/* ---- the aside's fuller copy on registration ---- */
body:has(#registration) .nx-auth-aside-copy { max-width: 380px; }
body:has(#registration) .nx-auth-aside-copy h2 { font-size: 23px; line-height: 1.25; }
body:has(#registration) .nx-auth-aside-copy .nx-auth-aside-eyebrow,
body:has(#registration) .nx-auth-aside-copy .nx-auth-aside-date { text-align: left; }
body:has(#registration) .nx-auth-aside-copy .nx-auth-aside-tiles {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 26px;
}
body:has(#registration) .nx-auth-aside { text-align: left; }
body:has(#registration) .nx-auth-aside-icons { display: none; }

@media (max-width: 575.98px) {
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-4,
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-5,
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

body.nx-theme .nx-footer-col-title,
body.nx-theme h3.nx-footer-col-title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
}

body:has(#registration) .nx-auth-aside {
    justify-content: flex-start;
    align-items: stretch;
    text-align: left;
    padding: 34px 36px;
}
body:has(#registration) .nx-auth-aside-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 auto;
    font-size: 17px;
    font-weight: 400;
    color: #fff;
}
body:has(#registration) .nx-auth-aside-brand img { height: 28px; width: auto; }
body:has(#registration) .nx-auth-aside-brand .material-symbols-rounded { font-size: 26px; }
/* Copy sits above the tiles, both anchored to the lower half. */
body:has(#registration) .nx-auth-aside-copy { margin: auto 0 0; max-width: 420px; }
body:has(#registration) .nx-auth-aside-tiles { margin-top: 30px; }

body:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .nx-auth-logo { display: none; }

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .intl-tel-input input.field,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .intl-tel-input input.form-control {
    padding-left: 96px !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .intl-tel-input .selected-flag {
    display: flex;
    align-items: center;
    width: 84px;
    padding-left: 12px;
}

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card:has(.nx-reg-optin) .card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 18px;
    row-gap: 2px;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card:has(.nx-reg-optin) h3.card-title {
    grid-column: 1;
    grid-row: 1;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card:has(.nx-reg-optin) p {
    grid-column: 1;
    grid-row: 2;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card:has(.nx-reg-optin) .nx-reg-optin {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
}

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration [class*="col-sm-"] {
    display: flex;
    flex-direction: column;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration [class*="col-sm-"] .form-group {
    margin-top: auto;
    margin-bottom: 16px;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .row {
    align-items: flex-end;
}

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    body:has(#registration) .nx-auth-aside {
        padding: 26px 24px 30px;
    }
    body:has(#registration) .nx-auth-aside-brand { margin-bottom: 22px; }
    body:has(#registration) .nx-auth-aside-copy { margin: 0; }
    body:has(#registration) .nx-auth-aside-tiles { margin-top: 22px; }
}
@media (max-width: 575.98px) {
    body:has(#registration) .nx-auth-aside-tiles { display: none; }
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card:has(.nx-reg-optin) .card-body {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.nx-auth-slider { display: flex; flex-direction: column; }

.nx-auth-slides {
    position: relative;
    overflow: hidden;
    transition: height .35s cubic-bezier(.22, .68, .36, 1);
}
.nx-auth-track {
    display: flex;
    align-items: flex-start;
    will-change: transform;
    transition: transform .4s cubic-bezier(.22, .68, .36, 1);
}
.nx-auth-slider.is-dragging .nx-auth-track { transition: none; }
.nx-auth-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
    .nx-auth-slides,
    .nx-auth-track { transition: none; }
}

.nx-auth-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
}
.nx-auth-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: width var(--nx-transition-slow), background-color var(--nx-transition-slow);
}
.nx-auth-dot.is-active {
    width: 18px;
    border-radius: var(--nx-radius-badge);
    background: #fff;
}
.nx-auth-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

body:has(#registration) .nx-auth-aside-brand {
    margin: 0 0 38px;
}
body:has(#registration) .nx-auth-aside-copy.nx-auth-slider {
    margin: 0;
    flex: 1 1 auto;
    min-height: 0;
}
body:has(#registration) .nx-auth-slides {
    /* Everything after the slides is pushed to the bottom of the panel. */
    margin-bottom: auto;
}
body:has(#registration) .nx-auth-aside-tiles { margin-top: 30px; }
body:has(#registration) .nx-auth-dots { margin-top: 16px; }

@media (max-width: 991.98px) {
    body:has(#registration) .nx-auth-aside-brand { margin-bottom: 20px; }
    body:has(#registration) .nx-auth-slides { margin-bottom: 0; }
    body:has(#registration) .nx-auth-aside-tiles { margin-top: 20px; }
}

body:has(#registration) .nx-auth-aside-brand,
body:has(#registration) .nx-auth-aside-copy,
body:has(#registration) .nx-auth-aside-copy.nx-auth-slider {
    width: 100%;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
/* The flexible child still has to stay flexible after the margins above. */
body:has(#registration) .nx-auth-aside-copy.nx-auth-slider {
    flex: 1 1 auto;
    min-height: 0;
}
body:has(#registration) .nx-auth-aside-brand { margin-bottom: 38px; }
body:has(#registration) .nx-auth-aside-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 30px;
}
.nx-auth-dots.is-single .nx-auth-dot { cursor: default; }

@media (max-width: 991.98px) {
    body:has(#registration) .nx-auth-aside-brand,
    body:has(#registration) .nx-auth-aside-copy,
    body:has(#registration) .nx-auth-aside-copy.nx-auth-slider {
        max-width: 620px;
    }
    body:has(#registration) .nx-auth-aside-brand { margin-bottom: 20px; }
}

body.nx-theme .primary-bg-color:not(body) {
    background-color: transparent;
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside) {
    background: var(--nx-card-bg);
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .nx-section-label span,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .providerPreLinking::after {
    background: var(--nx-card-bg);
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside) {
    background: var(--nx-bg);
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .card.nx-sh-card-r16,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .card.nx-sh-card-r16 {
    background: var(--nx-card-bg) !important;
    border-radius: 18px !important;
    padding: 32px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04),
                0 12px 32px rgba(16, 24, 40, .07) !important;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .nx-section-label span,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .providerPreLinking::after {
    background: var(--nx-card-bg);
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .card:has(.nx-reg-optin) .card-body {
    background: var(--nx-bg) !important;
}

@media (max-width: 991.98px) {
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .card.nx-sh-card-r16,
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .card.nx-sh-card-r16 {
        padding: 24px !important;
    }
}
@media (max-width: 575.98px) {
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .card.nx-sh-card-r16,
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .card.nx-sh-card-r16 {
        padding: 20px !important;
        border-radius: 14px !important;
    }
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside) {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 460px) !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
    max-width: 660px !important;
}

@media (max-width: 991.98px) {
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
    max-width: 520px !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
    max-width: 720px !important;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside):not(:has(#registration)) .nx-auth-logo {
    text-align: center !important;
}

@media (max-width: 991.98px) {
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
        max-width: 560px !important;
    }
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
        max-width: 700px !important;
    }
}

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration [class*="col-sm-"].w-hidden,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration [class*="col-sm-"].hidden {
    display: none !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-6 {
    flex: 1 1 50%;
    max-width: 100%;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-4,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-5,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-3 {
    flex: 1 1 33.3333%;
    max-width: 100%;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-12 {
    flex: 1 1 100%;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-6,
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-4,
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-5,
    body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .col-sm-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside):not(:has(#registration)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}

@media (max-width: 991.98px) {
    /* Stacked below this, same as every other split rule here. */
    body.nx-theme .nx-auth-shell:has(.nx-auth-aside):not(:has(#registration)) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .intl-tel-input {
    display: block;
    width: 100%;
    height: 44px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-input, 11px);
    background: var(--nx-card-bg);
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .intl-tel-input:focus-within {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .intl-tel-input input.field,
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .intl-tel-input input.form-control {
    height: 42px;
    border: 0 !important;
    background: transparent;
    box-shadow: none !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .intl-tel-input .selected-flag {
    height: 100%;
    background: var(--nx-bg);
    border-right: 1px solid var(--nx-border);
    border-top-left-radius: var(--nx-radius-input, 11px);
    border-bottom-left-radius: var(--nx-radius-input, 11px);
}

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration form > p.text-center:last-of-type {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) .nx-reg-foot {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--nx-border);
}
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration + p {
    padding: 12px 0 0 !important;
    margin: 0 !important;
}

.nx-itl-search {
    list-style: none;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--nx-card-bg);
    border-bottom: 1px solid var(--nx-border);
}
.nx-itl-search .material-symbols-rounded {
    font-size: 18px;
    color: var(--nx-muted);
    flex-shrink: 0;
}
.nx-itl-search input,
body.nx-theme .nx-itl-search input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--nx-font-family);
    font-size: 13.5px;
    color: var(--nx-text);
}
.nx-itl-search input::placeholder { color: var(--nx-muted); }
body.nx-theme .nx-itl-search input:focus,
body.nx-theme .nx-itl-search input:focus-visible {
    outline: none;
    box-shadow: none;
    border: 0;
}
body.nx-theme .nx-itl-search:focus-within { border-bottom-color: var(--nx-primary); }
body.nx-theme .nx-itl-search:focus-within .material-symbols-rounded { color: var(--nx-primary-text, var(--nx-primary)); }

/* Matches .nx-custom-select-noresult rather than inventing a third look. */
.nx-itl-empty {
    list-style: none;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--nx-muted);
}

body.nx-theme .nx-auth-aside-brand .nx-logo-img,
body:has(#registration) .nx-auth-aside-brand .nx-logo-img {
    height: calc(var(--nx-logo-height, 36px) * .8);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
body.nx-theme .nx-auth-aside-brand > .material-symbols-rounded,
body:has(#registration) .nx-auth-aside-brand > .material-symbols-rounded {
    font-size: calc(var(--nx-logo-height, 36px) * .72);
    line-height: 1;
}

body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .nx-auth-logo .nx-logo-img {
    height: var(--nx-logo-height, 36px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .nx-auth-logo .nx-logo-mark {
    width: var(--nx-logo-height, 36px);
    height: var(--nx-logo-height, 36px);
    border-radius: calc(var(--nx-logo-height, 36px) * .28);
}
body.nx-theme .nx-auth-shell:has(.nx-auth-aside) .nx-auth-logo .nx-logo-mark .material-symbols-rounded {
    font-size: calc(var(--nx-logo-height, 36px) * .58);
    line-height: 1;
}

@media (min-width: 768px) {
    body.nx-theme :is(.nx-dt-card, .nx-inv-card, .nx-doms-card, .nx-prods-table-card, .nx-tl-clip) table.table {
        border-collapse: separate;
        border-spacing: 0;
        margin-bottom: 0;
    }

    /* Header: ruled off, on the card's own ground rather than a grey wash. */
    body.nx-theme :is(.nx-dt-card, .nx-inv-card, .nx-doms-card, .nx-prods-table-card, .nx-tl-clip) table.table > thead > tr > th {
        background: var(--nx-card-bg);
        border-bottom: 1px solid var(--nx-border);
        border-top: 0;
        border-right: 0;
        border-left: 0;
    }

    body.nx-theme :is(.nx-dt-card, .nx-inv-card, .nx-doms-card, .nx-prods-table-card, .nx-tl-clip) table.table > tbody > tr > td {
        border-bottom: 1px solid var(--nx-border);
        border-top: 0;
        border-right: 0;
        border-left: 0;
    }
    body.nx-theme :is(.nx-dt-card, .nx-inv-card, .nx-doms-card, .nx-prods-table-card, .nx-tl-clip) table.table > tbody > tr:last-child > td {
        border-bottom: 0;
    }
}

body.nx-theme :is(.nx-dt-card, .nx-inv-card, .nx-doms-card, .nx-prods-table-card, .nx-tl-clip) table.table > tbody > tr:hover > td {
    background-color: rgba(var(--nx-primary-rgb), .04);
}
/* ...except the "no records" row, which is not a record to point at. */
body.nx-theme :is(.nx-dt-card, .nx-inv-card, .nx-doms-card, .nx-prods-table-card, .nx-tl-clip) table.table > tbody > tr:hover > td.dataTables_empty,
body.nx-theme :is(.nx-dt-card, .nx-inv-card, .nx-doms-card, .nx-prods-table-card, .nx-tl-clip) table.table > tbody > tr:hover > td[colspan] {
    background-color: transparent;
}

body.nx-theme .dataTables_wrapper .dataTables_info {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 768px) {
    body.nx-theme .dataTables_wrapper > .row:last-child {
        margin: 12px 0 0;
        padding: 12px 16px 0;
        border-top: 1px solid var(--nx-border);
        align-items: center;
    }
}

body.nx-theme .dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item),
body.nx-theme .dataTables_wrapper .dataTables_paginate .page-item .page-link {
    border-radius: var(--nx-radius-sm) !important;
    border: 1px solid var(--nx-border) !important;
    background: transparent !important;
    color: var(--nx-text) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
    padding: 7px 13px !important;
    min-width: 36px;
    text-align: center;
    line-height: 1.2;
    box-shadow: none !important;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition);
}
body.nx-theme .dataTables_wrapper .dataTables_paginate .paginate_button.page-item {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.nx-theme .dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item):hover:not(.current):not(.disabled),
body.nx-theme .dataTables_wrapper .dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
    background: rgba(var(--nx-primary-rgb), .06) !important;
    border-color: var(--nx-primary) !important;
    color: var(--nx-primary-text, var(--nx-primary)) !important;
}
body.nx-theme .dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).current,
body.nx-theme .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background: var(--nx-primary) !important;
    border-color: var(--nx-primary) !important;
    color: #fff !important;
}
body.nx-theme .dataTables_wrapper .dataTables_paginate .paginate_button:not(.page-item).disabled,
body.nx-theme .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    background: transparent !important;
    color: var(--nx-muted) !important;
    opacity: .5;
    box-shadow: none !important;
}
body.nx-theme .dataTables_wrapper .dataTables_paginate .paginate_button:focus,
body.nx-theme .dataTables_wrapper .dataTables_paginate .page-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12) !important;
}

body.nx-theme .dataTables_wrapper .dataTables_length select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--nx-bg);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    color: var(--nx-text);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-input, 10px);
    padding: 7px 34px 7px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
body.nx-theme .dataTables_wrapper .dataTables_length select:hover { border-color: var(--nx-primary); }
body.nx-theme .dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
/* IE/Edge legacy arrow, and Firefox's dotted focus ring on the text. */
body.nx-theme .dataTables_wrapper .dataTables_length select::-ms-expand { display: none; }
body.nx-theme .dataTables_wrapper .dataTables_length select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--nx-text); }
/* The options themselves are drawn by the OS; only these two are honoured. */
body.nx-theme .dataTables_wrapper .dataTables_length select option {
    background: var(--nx-card-bg);
    color: var(--nx-text);
}

/* The label text either side of the select ("Show ... entries"). */
body.nx-theme .dataTables_wrapper .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--nx-muted);
    font-size: 13px;
    font-weight: 400;
}

@media (min-width: 768px) {
    body.nx-theme :is(.nx-dt-card, .nx-inv-card, .nx-doms-card, .nx-prods-table-card, .nx-tl-clip) table.table > thead > tr > th {
        white-space: nowrap;
        padding-top: .5rem !important;
        padding-bottom: .5rem !important;
        vertical-align: middle;
        line-height: 1.3;
    }
}

:is(.nx-dt-card, .nx-doms-card, .nx-prods-table-card) .dataTables_wrapper { padding-top: 6px; }

.nx-tl-tabs,
.nx-quotes-tabs {
    gap: 8px;
}
.nx-tl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 575.98px) {
    .nx-tl-tabs,
    .nx-quotes-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }
    .nx-tl-tabs::-webkit-scrollbar,
    .nx-quotes-tabs::-webkit-scrollbar { display: none; }
    .nx-tl-tabs > .nx-status-tab,
    .nx-quotes-tabs > .nx-status-tab { flex: 0 0 auto; }
    .nx-tl-filter-row > .nx-tl-tabs { min-width: 0; flex: 1 1 100%; }
}

body.nx-theme .nx-side-no-filter .nx-pd-side-card:has(.view-filter-btns),
body.nx-theme .nx-side-no-filter .nx-pd-side-card:has(input[type="radio"]),
body.nx-theme .nx-side-no-filter .card-sidebar:has(.view-filter-btns),
body.nx-theme .nx-side-no-filter .card-sidebar:has(input[type="radio"]) {
    display: none !important;
}

@media (min-width: 768px) {
    body.nx-theme .nx-tl-row {
        display: grid;
        grid-template-columns: 3fr 1fr;
        margin-left: 0;
        margin-right: 0;
    }
    body.nx-theme .nx-tl-row > [class*="col-"] {
        max-width: none;
        flex: none;
        width: auto;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 0;
    }
    body.nx-theme .nx-tl-row > [class*="col-"]:nth-child(n+2) {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        gap: 12px;
        min-width: 0;
    }
    /* Both cards fill their cell so their heights match. */
    body.nx-theme .nx-tl-row .nx-tl-dept-card { height: 100%; }
}

/* ---- the card ---- */
body.nx-theme .nx-dci-card { padding: 0; overflow: hidden; }
body.nx-theme .nx-dci-card > h3.nx-dci-h3,
body.nx-theme .nx-dci-card > p.nx-dci-desc { padding: 0 24px; }
body.nx-theme .nx-dci-card > h3.nx-dci-h3 { padding-top: 24px; }
body.nx-theme .nx-dci-card > p.nx-dci-desc { margin-bottom: 18px; }

body.nx-theme .nx-dci-card .nav-tabs {
    gap: 8px;
    padding: 0 24px;
    border-bottom: 1px solid var(--nx-border);
    flex-wrap: wrap;
}
body.nx-theme .nx-dci-card .nav-tabs .nav-item { margin: 0; }
body.nx-theme .nx-dci-card .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 10px 10px 0 0;
    padding: 10px 16px;
    margin-bottom: -1px;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-muted);
    background: transparent;
    transition: color var(--nx-transition), background-color var(--nx-transition);
}
body.nx-theme .nx-dci-card .nav-tabs .nav-link:hover { color: var(--nx-primary-text, var(--nx-primary)); }
body.nx-theme .nx-dci-card .nav-tabs .nav-link.active {
    color: var(--nx-primary-text, var(--nx-primary));
    background: var(--nx-card-bg);
    border-color: var(--nx-border) var(--nx-border) var(--nx-card-bg);
}
body.nx-theme .nx-dci-card .responsive-tabs-sm-connector { display: none; }

body.nx-theme .nx-dci-card .tab-content { padding: 24px !important; }
body.nx-theme .nx-dci-card .tab-pane > .form-check {
    padding: 14px 16px;
    margin: 0 0 14px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md, 10px);
    background: var(--nx-bg);
}
body.nx-theme .nx-dci-card label.nx-dci-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}
body.nx-theme .nx-dci-card label.nx-dci-radio .form-check-input {
    position: static;
    margin: 0;
    flex: 0 0 auto;
}

body.nx-theme .nx-dci-card .tab-pane > .row > .offset-1 {
    margin-left: 0;
    max-width: none;
    flex: 1 1 100%;
    padding: 0 0 0 16px;
}
body.nx-theme .nx-dci-card .tab-pane > .row { margin: -6px 0 18px; }

@media (min-width: 768px) {
    body.nx-theme .nx-dci-card .tab-pane.active.show {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 18px;
    }
    body.nx-theme .nx-dci-card .tab-pane > .form-check,
    body.nx-theme .nx-dci-card .tab-pane > .row { grid-column: 1 / -1; }
}
body.nx-theme .nx-dci-card .tab-pane > .form-group { margin-bottom: 16px; }
body.nx-theme .nx-dci-card .tab-pane > .form-group > label.nx-rns-label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
}

/* ---- controls ---- */
body.nx-theme .nx-dci-card .form-control,
body.nx-theme .nx-dci-card .custom-select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-input, 10px);
    background-color: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: var(--nx-font-size-md);
    box-shadow: none;
}
body.nx-theme .nx-dci-card .form-control:focus,
body.nx-theme .nx-dci-card .custom-select:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
    outline: none;
}
body.nx-theme .nx-dci-card .custom-select:disabled {
    background-color: var(--nx-bg);
    color: var(--nx-muted);
    cursor: not-allowed;
}

/* ---- footer ---- */
body.nx-theme .nx-dci-card form > .border-top {
    margin: 0 !important;
    padding: 18px 24px !important;
    border-top: 1px solid var(--nx-border) !important;
    background: var(--nx-bg);
    gap: 10px;
}

@media (max-width: 575.98px) {
    body.nx-theme .nx-dci-card > h3.nx-dci-h3,
    body.nx-theme .nx-dci-card > p.nx-dci-desc,
    body.nx-theme .nx-dci-card .nav-tabs { padding-left: 16px; padding-right: 16px; }
    body.nx-theme .nx-dci-card .tab-content { padding: 16px !important; }
    body.nx-theme .nx-dci-card form > .border-top {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 16px !important;
    }
    body.nx-theme .nx-dci-card form > .border-top .btn { width: 100%; }
    /* Tabs scroll sideways rather than wrapping into stacked rows. */
    body.nx-theme .nx-dci-card .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    body.nx-theme .nx-dci-card .nav-tabs::-webkit-scrollbar { display: none; }
    body.nx-theme .nx-dci-card .nav-tabs .nav-item { flex: 0 0 auto; }
}
@media (min-width: 768px) {
    body.nx-theme .nx-footer-card.nx-footer-menu-on {
        display: grid;
        grid-template-columns: repeat(var(--nx-footer-total, 4), minmax(0, 1fr));
        column-gap: max(24px, calc(48px - (var(--nx-footer-total, 4) - 4) * 10px));
        row-gap: 0;
        padding-left: max(var(--nx-topbar-gutter), calc((100% - var(--nx-container-width)) / 2));
        padding-right: max(var(--nx-topbar-gutter), calc((100% - var(--nx-container-width)) / 2));
        align-items: start;
    }

    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-top {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        grid-column: 1;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-tag {
        /* Free to use the column's width now that nothing sits beside it. */
        max-width: 34ch;
        line-height: 1.6;
    }

    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-pay {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* The link columns keep their own grid, inside the card's second track. */
    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-cols {
        /* Every track after the brand's. */
        grid-column: 2 / -1;
        max-width: none;
        margin: 0;
        padding: 0;
        border-top: 0;
        grid-template-columns: repeat(var(--nx-footer-cols, 3), minmax(0, 1fr));
        gap: 28px 32px;
    }

    /* The copyright row spans the whole grid and keeps its spacing. */
    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-bottom {
        grid-column: 1 / -1;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        margin-top: 30px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body.nx-theme .nx-footer-card.nx-footer-menu-on {
        grid-template-columns: minmax(0, 1fr);
    }
    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-top {
        /* Back to a row here: there is a full width to spread across again. */
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
        padding-bottom: 22px;
    }
    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-brand {
        flex-direction: row;
        align-items: center;
        gap: 11px;
    }
    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-tag {
        max-width: none;
    }
    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-pay {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-cols {
        grid-column: 1;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
}

body.nx-theme .nx-footer .nx-footer-bottom {
    border-top: 0;
}

body.nx-theme .btn.nx-langsw-btn,
body.nx-theme .btn.nx-sh-footer-currency-btn,
body.nx-theme .nx-footer-links .btn.nx-sh-footer-currency-btn {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--nx-text);
    transition: color var(--nx-transition);
}
body.nx-theme .btn.nx-langsw-btn:hover,
body.nx-theme .btn.nx-langsw-btn:focus-visible,
body.nx-theme .nx-langsw.show .btn.nx-langsw-btn,
body.nx-theme .btn.nx-sh-footer-currency-btn:hover,
body.nx-theme .btn.nx-sh-footer-currency-btn:focus-visible,
body.nx-theme .nx-footer-links .btn.nx-sh-footer-currency-btn:hover,
body.nx-theme .nx-sh-footer-currency.show .btn.nx-sh-footer-currency-btn {
    border: 0 !important;
    background: transparent !important;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .btn.nx-langsw-btn:hover .nx-langsw-name,
body.nx-theme .nx-langsw.show .btn.nx-langsw-btn .nx-langsw-name {
    color: var(--nx-primary-text, var(--nx-primary)) !important;
}
body.nx-theme .btn.nx-langsw-btn:hover .nx-langsw-caret,
body.nx-theme .nx-langsw.show .btn.nx-langsw-btn .nx-langsw-caret {
    color: var(--nx-primary-text, var(--nx-primary));
}

body.nx-theme .nx-footer .nx-footer-links > a,
body.nx-theme .nx-footer .btn.nx-langsw-btn,
body.nx-theme .nx-footer .btn.nx-langsw-btn .nx-langsw-name,
body.nx-theme .nx-footer .btn.nx-sh-footer-currency-btn {
    font-weight: 400;
}

body.nx-theme .nx-pd-side-body .btn,
body.nx-theme .nx-pd-side-body .btn.btn-success,
body.nx-theme .nx-pd-side-body .btn.btn-default {
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-md);
    font-weight: var(--nx-weight-button-secondary);
    line-height: 1;
    box-shadow: none;
}
body.nx-theme .nx-pd-side-body .btn.btn-success,
body.nx-theme .nx-pd-side-body .btn.btn-primary {
    background: var(--nx-primary);
    border: 1px solid var(--nx-primary);
    color: #fff;
}
body.nx-theme .nx-pd-side-body .btn.btn-success:hover,
body.nx-theme .nx-pd-side-body .btn.btn-primary:hover,
body.nx-theme .nx-pd-side-body .btn.btn-success:focus,
body.nx-theme .nx-pd-side-body .btn.btn-primary:focus {
    background: var(--nx-primary-hover);
    border-color: var(--nx-primary-hover);
    color: #fff;
}
body.nx-theme .nx-pd-side-body .btn.btn-default,
body.nx-theme .nx-pd-side-body .btn.btn-secondary {
    background: var(--nx-btn-secondary, var(--nx-card-bg));
    border: 1px solid var(--nx-btn-secondary-border, var(--nx-border));
    color: var(--nx-btn-secondary-text, var(--nx-text));
}
body.nx-theme .nx-pd-side-body .btn.btn-default:hover,
body.nx-theme .nx-pd-side-body .btn.btn-secondary:hover,
body.nx-theme .nx-pd-side-body .btn.btn-default:focus,
body.nx-theme .nx-pd-side-body .btn.btn-secondary:focus {
    border-color: var(--nx-primary);
    color: var(--nx-primary-text, var(--nx-primary));
    background: var(--nx-card-bg);
}
body.nx-theme .nx-pd-side-body.card-footer:has(> [class*="col-button"]) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.nx-theme .nx-pd-side-body [class*="col-button"] {
    float: none !important;
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    margin: 0;
}
body.nx-theme .nx-pd-side-body [class*="col-button"] > .btn {
    width: 100%;
    margin: 0;
}
@media (max-width: 1399.98px) {
    body.nx-theme .nx-pd-side-body [class*="col-button"] {
        flex: 1 1 100%;
    }
}
body.nx-theme .nx-pd-side-body > .btn {
    float: none !important;
    margin: 0 8px 0 0;
    vertical-align: top;
}
body.nx-theme .nx-pd-side-body > .btn:last-child { margin-right: 0; }

.nx-pd-sidelink.nx-pd-sidelink.nx-pd-sidelink {
    gap: 4px;
    padding: 8px 12px;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    font-weight: 400;
    font-size: var(--nx-font-size-md);
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition), box-shadow var(--nx-transition), transform var(--nx-transition);
}
.nx-pd-sidelink-ico.nx-pd-sidelink-ico.nx-pd-sidelink-ico {
    width: auto;
    flex: 0 0 auto;
    margin-right: 8px;
    color: var(--nx-primary-text, var(--nx-primary));
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.nx-pd-sidelink.nx-pd-sidelink.nx-pd-sidelink:hover {
    background: rgba(var(--nx-primary-rgb), 0.06);
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: none;
}
.nx-pd-sidelink.nx-pd-sidelink.nx-pd-sidelink.active {
    background: rgba(var(--nx-primary-rgb), 0.10);
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-pd-sidelink-ico.nx-pd-sidelink-ico.nx-pd-sidelink-ico:empty {
    width: 20px;
    flex: 0 0 20px;
}

@media (max-width: 767.98px) {
    .nx-mp-body-30 { padding: 18px 14px; }
    .nx-mp-body-24 { padding: 16px 14px; }
    .nx-mp-card-head { padding: 14px 16px; }

    /* Cells lose the side padding the card is already providing. */
    .nx-mp-th,
    .nx-mp-td-desc,
    .nx-mp-td-amount { padding-left: 0; padding-right: 0; }
    .nx-mp-inv-head-cell { padding-left: 0; padding-right: 0; }

    .nx-mp-totals {
        max-width: none;
        margin-left: 0;
        padding: 16px;
    }

    .nx-mp-td-desc { word-break: break-word; }
    .nx-mp-td-amount { white-space: nowrap; }
}

body.nx-theme .nx-dd-addon .btn.btn-success,
body.nx-theme .nx-dd-addon-last .btn.btn-success,
body.nx-theme.nx-buttons-soft .nx-dd-addon .btn.btn-success,
body.nx-theme.nx-buttons-soft .nx-dd-addon-last .btn.btn-success,
body.nx-theme.nx-buttons-outline .nx-dd-addon .btn.btn-success,
body.nx-theme.nx-buttons-outline .nx-dd-addon-last .btn.btn-success {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
}
body.nx-theme .nx-dd-addon .btn.btn-success:hover,
body.nx-theme .nx-dd-addon-last .btn.btn-success:hover,
body.nx-theme .nx-dd-addon .btn.btn-success:focus,
body.nx-theme .nx-dd-addon-last .btn.btn-success:focus {
    background: var(--nx-primary-hover);
    border-color: var(--nx-primary-hover);
    color: #fff;
}

.nx-pd-sidelink-spin.nx-pd-sidelink-spin.nx-pd-sidelink-spin {
    width: 20px;
    flex: 0 0 20px;
    margin-right: 8px;
    text-align: center;
    position: relative;
}
.nx-pd-sidelink-spin > i {
    visibility: hidden;
}
.nx-pd-sidelink-spin::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(var(--nx-primary-rgb), .3);
    border-top-color: var(--nx-primary);
    border-radius: 50%;
    animation: nx-btn-spin .6s linear infinite;
}

body.nx-theme .modal .btn.btn-success,
body.nx-theme .modal .btn.btn-primary,
body.nx-theme.nx-buttons-soft .modal .btn.btn-success,
body.nx-theme.nx-buttons-outline .modal .btn.btn-success {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
}
body.nx-theme .modal .btn.btn-success:hover,
body.nx-theme .modal .btn.btn-primary:hover,
body.nx-theme .modal .btn.btn-success:focus,
body.nx-theme .modal .btn.btn-primary:focus {
    background: var(--nx-primary-hover);
    border-color: var(--nx-primary-hover);
    color: #fff;
}

/* Selects and inputs inside a dialog, matched to the theme's own fields. */
body.nx-theme .modal select.form-control,
body.nx-theme .modal input.form-control {
    border-color: var(--nx-border);
    border-radius: var(--nx-radius-md);
    background-color: var(--nx-card-bg);
    color: var(--nx-text);
    min-height: 44px;
}
body.nx-theme .modal select.form-control:focus,
body.nx-theme .modal input.form-control:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
    outline: none;
}
body.nx-theme .modal select.form-control option:checked {
    background: var(--nx-primary);
    color: #fff;
}
body.nx-theme .modal input[type="checkbox"],
body.nx-theme .modal input[type="radio"] {
    accent-color: var(--nx-primary);
}

.nx-dd-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.nx-dd-toggle-state {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
}
.nx-dd-toggle-form {
    margin: 0;
}

body.nx-theme select option:checked,
body.nx-theme select option[selected] {
    background: var(--nx-primary);
    background-color: var(--nx-primary);
    color: #fff;
}
body.nx-theme select option:hover,
body.nx-theme select option:focus {
    background: rgba(var(--nx-primary-rgb), .12);
    color: var(--nx-text);
}
body.nx-theme select.form-control:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
    outline: none;
}

.nx-custom-select-trigger.nx-custom-select-trigger {
    font-weight: 400;
}
.nx-custom-select-option.nx-custom-select-option {
    font-weight: 400;
}
.nx-custom-select-option.selected.nx-custom-select-option.selected {
    font-weight: 400;
}

body.nx-theme [class*="cselect"] > [class*="cselect-trigger"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    padding: 0 16px;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-input, 10px);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--nx-transition-slow), border-color var(--nx-transition-slow), color var(--nx-transition-slow), box-shadow var(--nx-transition-slow);
}
body.nx-theme [class*="cselect"] > [class*="cselect-trigger"]:hover {
    border-color: var(--nx-primary);
}
body.nx-theme [class*="cselect"] > [class*="cselect-trigger"]:focus,
body.nx-theme [class*="cselect"] > [class*="cselect-trigger"]:focus-visible {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
    outline: none;
}
body.nx-theme [class*="cselect"] [class*="cselect-caret"] {
    color: var(--nx-muted);
    font-size: 12px;
    transition: transform var(--nx-transition-slow);
}

body.nx-theme [class*="cselect"] > [class*="cselect-list"] {
    list-style: none;
    padding: 4px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    z-index: 1051;
}
body.nx-theme [class*="cselect"] [class*="cselect-option"] {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 400;
    color: var(--nx-text);
    border-radius: var(--nx-radius-sm);
    cursor: pointer;
    list-style: none;
    margin: 0;
    transition: background-color var(--nx-transition), color var(--nx-transition);
}
body.nx-theme [class*="cselect"] [class*="cselect-option"]:hover {
    background: rgba(var(--nx-primary-rgb), .05);
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme [class*="cselect"] [class*="cselect-option"].selected {
    background: rgba(var(--nx-primary-rgb), .10);
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}
body.nx-theme [class*="cselect"] [class*="cselect-option"].selected:hover {
    background: rgba(var(--nx-primary-rgb), .16);
}

body.nx-theme [class*="_da-btn"][class*="-success"],
body.nx-theme [class*="_da-btn"][class*="-primary"] {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
}
body.nx-theme [class*="_da-btn"][class*="-success"]:hover,
body.nx-theme [class*="_da-btn"][class*="-primary"]:hover,
body.nx-theme [class*="_da-btn"][class*="-success"]:focus,
body.nx-theme [class*="_da-btn"][class*="-primary"]:focus {
    background: var(--nx-primary-hover);
    border-color: var(--nx-primary-hover);
    color: #fff;
}

.nx-pd-sidelink.nx-pd-sidelink.nx-pd-sidelink {
    /* No wrapping at row level either, or the badge drops under the label. */
    flex-wrap: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}

body.nx-theme .btn.nx-dao-btn-lg.btn-success,
body.nx-theme.nx-buttons-soft .btn.nx-dao-btn-lg.btn-success,
body.nx-theme.nx-buttons-outline .btn.nx-dao-btn-lg.btn-success {
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
}
body.nx-theme .btn.nx-dao-btn-lg.btn-success:hover,
body.nx-theme .btn.nx-dao-btn-lg.btn-success:focus {
    background: var(--nx-primary-hover);
    border-color: var(--nx-primary-hover);
    color: #fff;
}

body .btn.nx-rns-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nx-ot-sub {
    margin: 6px 0 0;
    font-size: var(--nx-font-size-md);
    color: var(--nx-muted);
}

.nx-ot-row {
    margin-left: -12px;
    margin-right: -12px;
}
.nx-ot-row > [class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
}

/* ---- Cards ---- */
.nx-ot-card {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    margin-bottom: 24px;
}
.nx-ot-card-head {
    padding: 18px 24px;
    border-bottom: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card) var(--nx-radius-card) 0 0;
}
.nx-ot-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--nx-font-size-lg);
    font-weight: 600;
    color: var(--nx-text);
}
.nx-ot-card-body {
    padding: 24px;
}

/* ---- Fields ---- */
.nx-ot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}
.nx-ot-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.nx-ot-field-full {
    margin-top: 18px;
}
.nx-ot-label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--nx-muted);
}
body.nx-theme .nx-ot-input {
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
body.nx-theme .nx-ot-input:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
    outline: none;
}
body.nx-theme textarea.nx-ot-textarea {
    height: auto;
    min-height: 200px;
    padding: 14px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: var(--nx-font-size-md);
    line-height: 1.6;
    resize: vertical;
}
body.nx-theme textarea.nx-ot-textarea:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
    outline: none;
}

.nx-ot-dept-desc {
    margin: 14px 0 0;
    font-size: var(--nx-font-size-sm);
    line-height: 1.55;
    color: var(--nx-muted);
}

/* ---- Ticket creator tile (signed in) ---- */
.nx-ot-creator {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-primary-rgb), .04);
    min-width: 0;
}
.nx-ot-avatar {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--nx-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
}
.nx-ot-creator-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}
.nx-ot-creator-name {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nx-ot-creator-mail {
    font-size: var(--nx-font-size-xs);
    color: var(--nx-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Priority ---- */
.nx-ot-priority {
    display: flex;
    gap: 10px;
}
body.nx-theme .nx-ot-prio {
    flex: 0 0 auto;
    min-width: 96px;
    height: 42px;
    padding: 0 18px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    cursor: pointer;
    transition: border-color var(--nx-transition), color var(--nx-transition), background-color var(--nx-transition);
}
body.nx-theme .nx-ot-prio:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nx-ot-prio.active {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), .08);
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}

/* ---- Actions ---- */
.nx-ot-captcha {
    margin-top: 20px;
}
.nx-ot-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}
body.nx-theme .btn.nx-ot-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    border-radius: var(--nx-radius-md);
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
}
body.nx-theme .btn.nx-ot-submit:hover {
    background: var(--nx-primary-hover);
    border-color: var(--nx-primary-hover);
    color: #fff;
}
.nx-ot-ico-18 {
    font-size: 18px;
}
body.nx-theme .btn.nx-ot-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
}
body.nx-theme .btn.nx-ot-cancel:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary-text, var(--nx-primary));
}

/* ---- Knowledgebase panel ---- */
.nx-ot-kb-card.nx-ot-kb-card {
    position: relative;
}
.nx-ot-kb-body {
    padding: 20px 18px 18px;
}
.nx-ot-kb-empty {
    padding: 2px 4px 14px;
    text-align: center;
}
.nx-ot-kb-empty-ico {
    font-size: 40px;
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-ot-kb-empty-text {
    margin: 10px 0 0;
    font-size: var(--nx-font-size-sm);
    line-height: 1.55;
    color: var(--nx-muted);
}

.nx-ot-kb-search {
    position: relative;
    display: block;
}
.nx-ot-kb-search .nx-ot-kb-search-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--nx-muted);
    pointer-events: none;
}
body.nx-theme .nx-ot-kb-input {
    display: block;
    width: 100%;
    height: 42px;
    padding: 0 40px 0 42px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
body.nx-theme .nx-ot-kb-input:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
    outline: none;
}
.nx-ot-kb-spin {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid rgba(var(--nx-primary-rgb), .25);
    border-top-color: var(--nx-primary);
    border-radius: 50%;
    animation: nx-btn-spin .6s linear infinite;
    pointer-events: none;
}

.nx-ot-kb-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    z-index: 20;
    max-height: 340px;
    overflow-y: auto;
    padding: 8px;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
}
.nx-ot-kb-results a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-md);
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: none;
    transition: background-color var(--nx-transition);
}
.nx-ot-kb-results a:hover {
    background: rgba(var(--nx-primary-rgb), .06);
    text-decoration: none;
}
.nx-ot-kb-results a + a {
    border-top: 1px solid var(--nx-border);
    border-radius: 0;
}

/* No results -- laid out like Lagom's: icon, title, hint, clear link. */
.nx-ot-kb-none {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px 14px;
    text-align: center;
}
.nx-ot-kb-none-ico {
    font-size: 36px;
    color: var(--nx-primary-text, var(--nx-primary));
    margin-bottom: 4px;
}
.nx-ot-kb-none-title {
    font-size: var(--nx-font-size-md);
    font-weight: 600;
    color: var(--nx-text);
}
.nx-ot-kb-none-text {
    font-size: var(--nx-font-size-sm);
    line-height: 1.5;
    color: var(--nx-muted);
}
.nx-ot-kb-clear {
    margin-top: 6px;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: none;
}
.nx-ot-kb-clear:hover {
    text-decoration: underline;
    color: var(--nx-primary-text, var(--nx-primary));
}

/* ---- Tablet: the knowledgebase panel moves under the form ---- */
@media (max-width: 991.98px) {
    .nx-ot-side {
        margin-top: 0;
    }
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
    .nx-ot-card-head { padding: 14px 16px; }
    .nx-ot-card-body { padding: 16px; }

    .nx-ot-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .nx-ot-priority {
        gap: 8px;
    }
    body.nx-theme .nx-ot-prio {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 8px;
    }

    body.nx-theme textarea.nx-ot-textarea { min-height: 160px; }

    .nx-ot-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    body.nx-theme .btn.nx-ot-submit,
    body.nx-theme .btn.nx-ot-cancel {
        width: 100%;
    }
}

.nx-ot-label.nx-ot-label {
    margin-bottom: 8px;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--nx-text);
}

.nx-ot-grid-row2 {
    margin-top: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}
@media (max-width: 767.98px) {
    .nx-ot-grid-row2 {
        grid-template-columns: 1fr;
    }
}

.nx-ot-card:has(.nx-custom-select-wrapper.open) {
    position: relative;
    z-index: 5;
}

.nx-vt-section-title {
    margin: 4px 0 16px;
    font-size: var(--nx-font-size-lg);
    font-weight: 600;
    color: var(--nx-text);
}

.nx-vt-poster {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: rgba(var(--nx-primary-rgb), .04);
    min-width: 0;
}
.nx-vt-poster-avatar {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--nx-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
}
.nx-vt-poster-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.nx-vt-poster-name {
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nx-vt-poster-mail {
    font-size: var(--nx-font-size-xs);
    color: var(--nx-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Field labels in the visitor name/email row. */
.nx-vt-label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
}

/* Send on the left, Cancel beside it. */
.nx-vt-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.nx-theme .btn.nx-vt-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    border-radius: var(--nx-radius-md);
    background: var(--nx-primary);
    border-color: var(--nx-primary);
    color: #fff;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
}
body.nx-theme .btn.nx-vt-submit:hover {
    background: var(--nx-primary-hover);
    border-color: var(--nx-primary-hover);
    color: #fff;
}
body.nx-theme .btn.nx-vt-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 24px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
}
body.nx-theme .btn.nx-vt-cancel:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary-text, var(--nx-primary));
}

.nx-vt-rating-wrap {
    padding: 12px 16px;
    border-top: 1px solid var(--nx-border);
}
.nx-vt-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nx-vt-rate-label {
    margin-right: 8px;
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
}
.nx-vt-rating .star {
    width: 18px;
    height: 18px;
    cursor: pointer;
    background: var(--nx-border);
    transition: background-color var(--nx-transition-fast);
    -webkit-mask: var(--nx-star-mask) center / contain no-repeat;
            mask: var(--nx-star-mask) center / contain no-repeat;
}
.nx-vt-rating .star.active,
.nx-vt-rating:hover .star:hover,
.nx-vt-rating:hover .star:hover ~ .star {
    background: var(--nx-warning);
}
.nx-vt-rating-wrap .rating-done .star {
    cursor: default;
}
.nx-vt-rated {
    margin-left: 8px;
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
}
:root {
    --nx-star-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

/* The Owner tag beside the requestor in the sidebar. */
.nx-vt-owner-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--nx-radius-card);
    background: rgba(var(--nx-success-rgb), .14);
    color: var(--nx-success);
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
}

@media (max-width: 767.98px) {
    /* Full-width, stacked -- side by side they would each be too narrow. */
    .nx-vt-actions {
        flex-direction: column;
        align-items: stretch;
    }
    body.nx-theme .btn.nx-vt-submit,
    body.nx-theme .btn.nx-vt-cancel {
        width: 100%;
    }
}

.nx-vt-title ~ .nx-crumbs,
.nx-vt-subtitle + nav .nx-crumbs {
    margin-top: 8px;
}

body.nx-theme .nx-pd-side-body.card-footer,
body.nx-theme .nx-pd-side-body.panel-footer {
    padding: 14px 0 0;
}
/* The card body above it has the same problem, for the same reason. */
body.nx-theme .nx-pd-side-body.card-body {
    padding: 0 0 14px;
}

body.nx-theme .nx-attach-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-primary-text, var(--nx-primary));
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--nx-transition), background-color var(--nx-transition);
}
body.nx-theme .nx-attach-btn:hover {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), .04);
}
body.nx-theme .nx-attach-btn:focus-visible {
    outline: none;
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .12);
}
.nx-attach-ico {
    font-size: 19px;
    color: var(--nx-primary-text, var(--nx-primary));
    flex-shrink: 0;
}
.nx-attach-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nx-attach-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Names of the files the customer picked, listed under the row. */
.nx-attach-files {
    margin-top: 8px;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-primary-text, var(--nx-primary));
    word-break: break-word;
}
.nx-attach-files:empty {
    margin-top: 0;
}

.nx-attach-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    font-size: var(--nx-font-size-xs);
    line-height: 1.5;
    color: var(--nx-muted);
}
.nx-attach-hint-ico {
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

.nx-vt-reply-head.nx-vt-reply-head {
    background: transparent;
}

.nx-vt-attach-wrap.nx-vt-attach-wrap {
    background: transparent;
}
.nx-vt-attach-label.nx-vt-attach-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--nx-muted);
}
/* One column, so a filename can use the full width of the card. */
.nx-vt-attach-wrap .d-flex {
    flex-direction: column;
    align-items: stretch;
}
.nx-vt-attach-link.nx-vt-attach-link {
    max-width: none;
    width: 100%;
    padding: 10px 12px;
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}
.nx-vt-attach-link.nx-vt-attach-link:hover {
    border-color: var(--nx-primary);
    background: rgba(var(--nx-primary-rgb), .04);
}

body.nx-theme .md-editor > .md-header,
body.nx-theme .md-editor .md-header {
    background-color: var(--nx-card-bg);
    border-bottom: 1px solid var(--nx-border);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

/* Plain glyphs, no box. */
body.nx-theme .md-editor .btn-default,
body.nx-theme .md-editor .btn-group .btn-default {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: var(--nx-muted);
    font-weight: 400;
    font-size: 13px;
    padding: 6px 9px;
    border-radius: var(--nx-radius-sm);
    transition: background-color var(--nx-transition), color var(--nx-transition);
}
body.nx-theme .md-editor .btn-default:hover,
body.nx-theme .md-editor .btn-group .btn-default:hover {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .md-editor .btn-default:focus,
body.nx-theme .md-editor .btn-default:active,
body.nx-theme .md-editor .btn-group .btn-default:focus,
body.nx-theme .md-editor .btn-group .btn-default:active {
    outline: none;
    box-shadow: none !important;
    border: 0;
}
body.nx-theme .md-editor .btn-default.active,
body.nx-theme .md-editor .btn-group .btn-default.active {
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: var(--nx-primary-text, var(--nx-primary));
}

body.nx-theme .md-editor .md-header .btn-group {
    margin-left: 8px;
    padding-left: 10px;
    border-left: 1px solid var(--nx-border);
}

body.nx-theme .md-editor .md-header > .btn-group:has(> .btn-primary) {
    order: -1;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}
body.nx-theme .md-editor .md-header .btn.btn-primary {
    background-color: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    color: var(--nx-text);
    font-weight: 400;
    font-size: 13px;
    padding: 6px 9px;
    border-radius: var(--nx-radius-sm);
    transition: color var(--nx-transition);
}
body.nx-theme .md-editor .md-header .btn.btn-primary:hover,
body.nx-theme .md-editor .md-header .btn.btn-primary.active,
body.nx-theme .md-editor .md-header .btn.btn-primary:focus,
body.nx-theme .md-editor .md-header .btn.btn-primary:active {
    background-color: transparent;
    background-image: none;
    border: 0;
    box-shadow: none !important;
    outline: none;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .md-editor .md-header .btn.btn-primary > .fa,
body.nx-theme .md-editor .md-header .btn.btn-primary > .fas,
body.nx-theme .md-editor .md-header .btn.btn-primary > .glyphicon,
body.nx-theme .md-editor .md-header .btn.btn-primary > i {
    display: none;
}

/* Fullscreen and help sit at the far end. */
body.nx-theme .md-editor .md-header .md-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Footer: the counters run to the left, as in the reference. */
body.nx-theme .md-editor .md-footer {
    background-color: var(--nx-card-bg);
    border-top: 1px solid var(--nx-border);
    color: var(--nx-muted);
    padding: 8px 12px;
    font-size: var(--nx-font-size-xs);
    text-align: left;
}

body.nx-theme .md-editor.active {
    border-color: var(--nx-primary);
    box-shadow: none;
}

body.nx-theme .nx-pd-sidelink:has(.recent-ticket) {
    align-items: flex-start;
}
body.nx-theme .nx-pd-sidelink:has(.recent-ticket) .nx-pd-sidelink-ico {
    /* Lifted to sit on the title's line rather than centre on the block. */
    margin-top: 1px;
}

.recent-ticket {
    min-width: 0;
}
.recent-ticket .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
}
.recent-ticket small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
    font-size: var(--nx-font-size-xs);
    color: var(--nx-muted);
}
.recent-ticket small .float-right,
.recent-ticket small .pull-right {
    float: none !important;
    flex-shrink: 0;
    order: 1;
    color: var(--nx-primary-text, var(--nx-primary));
}
.recent-ticket small > span:not(.float-right):not(.pull-right) {
    color: var(--nx-muted) !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.nx-theme .nx-pd-sidelink-plain > .nx-pd-sidelink-ico {
    display: none;
}
body.nx-theme .nx-pd-sidelink-plain {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--nx-border);
    font-weight: 400;
    color: var(--nx-text);
}
body.nx-theme .nx-pd-sidelist > .nx-pd-sidelink-plain:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
body.nx-theme .nx-pd-sidelink-plain:first-child {
    padding-top: 0;
}
body.nx-theme .nx-pd-sidelink-plain > .nx-pd-sidelink-label {
    display: block;
    line-height: 1.45;
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    color: var(--nx-text);
}

/* The field name: small and quiet, so the value it introduces reads first. */
body.nx-theme .nx-pd-sidelink-label > .title {
    display: block;
    margin-bottom: 2px;
    font-size: var(--nx-font-size-xs);
    font-weight: 600;
    color: var(--nx-muted);
}
/* ---- Badges inside those rows ---- */
/* "Owner" beside the requestor. */
body.nx-theme .nx-pd-sidelink-label .label.requestor-type-owner {
    display: inline-block;
    margin-left: 4px;
    padding: 2px 8px;
    border-radius: var(--nx-radius-card);
    background: rgba(var(--nx-success-rgb), .14);
    color: var(--nx-success);
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    vertical-align: middle;
}
body.nx-theme .nx-pd-sidelink-label .label:not(.requestor-type-owner) {
    display: inline-block;
    margin-right: 4px;
    padding: 2px 8px;
    border-radius: var(--nx-radius-card);
    background-color: rgba(var(--nx-primary-rgb), .12) !important;
    color: var(--nx-primary-text, var(--nx-primary)) !important;
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    vertical-align: middle;
}

body.nx-theme .nx-pd-side-body [class*="col-button"] > .btn.btn-danger,
body.nx-theme .nx-pd-side-body [class*="col-button"] > .btn.btn-danger:disabled,
body.nx-theme .nx-pd-side-body [class*="col-button"] > .btn.btn-danger[disabled] {
    background: transparent;
    border-color: var(--nx-border);
    color: var(--nx-muted);
    opacity: 1;
}

body.nx-theme .nx-pd-side-body #containerAddCcEmail {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    margin: 0;
}
body.nx-theme .nx-pd-side-body #containerAddCcEmail > .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 40px;
    border: 1px solid var(--nx-border);
    border-right: 0;
    border-radius: var(--nx-radius-md) 0 0 var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-size: var(--nx-font-size-md);
    padding: 0 12px;
}
body.nx-theme .nx-pd-side-body #containerAddCcEmail > .form-control:focus {
    border-color: var(--nx-primary);
    box-shadow: none;
    outline: none;
}
/* The wrapper Bootstrap 3 and 4 both emit -- matched on either name. */
body.nx-theme .nx-pd-side-body #containerAddCcEmail > .input-group-btn,
body.nx-theme .nx-pd-side-body #containerAddCcEmail > .input-group-append {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
}
body.nx-theme .nx-pd-side-body #containerAddCcEmail .btn {
    height: 40px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--nx-border);
    border-radius: 0 var(--nx-radius-md) var(--nx-radius-md) 0;
    background: var(--nx-card-bg);
    color: var(--nx-primary-text, var(--nx-primary));
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    white-space: nowrap;
}
body.nx-theme .nx-pd-side-body #containerAddCcEmail .btn:hover {
    background: rgba(var(--nx-primary-rgb), .06);
    border-color: var(--nx-primary);
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme [data-nx-side-group="CC Recipients"] .nx-pd-sidelink-plain:has(> .nx-pd-sidelink-label:empty) {
    display: none;
}

body.nx-theme .nx-pd-side-body > .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin: 0;
}
body.nx-theme .nx-pd-side-body > .row > [class*="col-button"] {
    float: none !important;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 0;
    margin: 0;
}
body.nx-theme .nx-pd-side-body > .row > [class*="col-button"] > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    margin: 0;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-md);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}
@media (max-width: 1399.98px) {
    body.nx-theme .nx-pd-side-body > .row {
        flex-wrap: wrap;
    }
    body.nx-theme .nx-pd-side-body > .row > [class*="col-button"] {
        flex: 1 1 100%;
    }
}

.nx-prods-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.nx-prods-tile-ico.nx-prods-tile-ico {
    font-size: 46px;
    line-height: 1;
    flex-shrink: 0;
    opacity: .55;
}

@media (min-width: 992px) {
    body.nx-theme .row > [class*="col-lg-"].order-lg-first:has(> .card-sidebar),
    body.nx-theme .row > .nx-side-no-filter.order-lg-first {
        flex: 0 0 279px;
        max-width: 279px;
    }
    body.nx-theme .row:has(> [class*="col-lg-"].order-lg-first:has(> .card-sidebar)) > .col-lg-9,
    body.nx-theme .row:has(> .nx-side-no-filter.order-lg-first) > .col-lg-9 {
        flex: 1 1 0;
        max-width: none;
    }
}

body.nx-theme .nx-card-head.nx-card-head.nx-card-head h4,
body.nx-theme .nx-card-head.nx-card-head.nx-card-head h5,
body.nx-theme .nx-card-title.nx-card-title.nx-card-title,
body.nx-theme .nx-inv-card-title.nx-inv-card-title.nx-inv-card-title,
body.nx-theme .nx-tl-card-title.nx-tl-card-title.nx-tl-card-title,
body.nx-theme .nx-pd-card-title.nx-pd-card-title.nx-pd-card-title,
body.nx-theme .nx-pd-cf-title.nx-pd-cf-title.nx-pd-cf-title,
body.nx-theme .nx-vt-form-title.nx-vt-form-title.nx-vt-form-title,
body.nx-theme .nx-dns-card-title.nx-dns-card-title.nx-dns-card-title,
body.nx-theme .nx-dns-card-title-bar.nx-dns-card-title-bar.nx-dns-card-title-bar,
body.nx-theme .nx-uia-box-title.nx-uia-box-title.nx-uia-box-title,
body.nx-theme .nx-mp-card-title.nx-mp-card-title.nx-mp-card-title,
body.nx-theme .nx-ip-card-title.nx-ip-card-title.nx-ip-card-title,
body.nx-theme .nx-cad-cardtitle.nx-cad-cardtitle.nx-cad-cardtitle,
body.nx-theme .nx-hp-panel-title.nx-hp-panel-title.nx-hp-panel-title,
body.nx-theme .nx-vi-table-title.nx-vi-table-title.nx-vi-table-title,
body.nx-theme .nx-vi-notes-title.nx-vi-notes-title.nx-vi-notes-title,
body.nx-theme .nx-vt-section-title.nx-vt-section-title.nx-vt-section-title,
body.nx-theme .nx-pmm-mtitle.nx-pmm-mtitle.nx-pmm-mtitle,
body.nx-theme .nx-epp-title.nx-epp-title.nx-epp-title,
body.nx-theme .nx-ot-card-title.nx-ot-card-title.nx-ot-card-title,
body.nx-theme .nx-title-md.nx-title-md.nx-title-md {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--nx-text);
}

body.nx-theme .nx-cad-mkt-title.nx-card-title.nx-card-title,
body.nx-theme .nx-card-head .nx-card-title:has(.nx-card-title-ico) {
    font-size: 17px;
    font-weight: 500;
}

body.nx-theme .nx-navbar-link.active,
body.nx-theme .nx-navbar-link.nx-sh-topnav-link.active,
body.nx-theme .nx-navbar-link.nx-sh-topnav-link-dd.active,
html.nx-dark body.nx-theme .nx-navbar-link.active {
    background: transparent;
    color: var(--nx-primary-text, var(--nx-primary));
}
body.nx-theme .nx-navbar-link.active:hover,
body.nx-theme .nx-navbar-link.active:focus {
    background: transparent;
    color: var(--nx-primary-text, var(--nx-primary));
}

body.nx-theme .nx-navbar-link:hover,
body.nx-theme .nx-navbar-link:focus,
body.nx-theme .nx-navbar-link.show,
body.nx-theme .nx-navbar-link.dropdown-toggle.show,
body.nx-theme .nx-navbar-link.nx-sh-topnav-link:hover,
body.nx-theme .nx-navbar-link.nx-sh-topnav-link-dd:hover,
body.nx-theme .nx-navbar-link.nx-sh-topnav-link-dd.show {
    background: transparent;
    box-shadow: none;
    color: var(--nx-primary-text, var(--nx-primary));
}

/* Page sidebars switched off (Layout -> Page sidebars). */
body.nx-page-no-sidebar .nx-side-group {
    display: none !important;
}
body.nx-page-no-sidebar .row > .nx-side-col:not(:has(> :not(.nx-side-group))) {
    display: none !important;
}
body.nx-page-no-sidebar .row:has(> .nx-side-col:not(:has(> :not(.nx-side-group)))) > :not(.nx-side-col) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Phones: primary sidebar above the content, secondary sidebar after it. */
@media screen and (max-width: 991.98px) {
    .row > .nx-side-col {
        display: contents !important;
    }
    .row > .nx-side-col > * {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .row > .nx-side-col > .nx-side-primary {
        order: -1;
    }
    .row > .nx-side-col > .nx-side-secondary {
        order: 99;
    }
}

body.nx-theme .nx-auth-shell:not(:has(.nx-auth-aside))::before {
    content: none;
}
body.nx-theme .nx-auth-shell:not(:has(.nx-auth-aside)) {
    padding-top: 40px !important;
}

body.nx-theme:has(#registration) .nx-auth-shell:not(:has(.nx-auth-aside)) > .w-100,
body:has(#registration) .container > .w-100 {
    max-width: 760px !important;
}

body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) > .w-100 {
    max-width: 800px !important;
    padding-left: 28px;
    padding-right: 28px;
}

@keyframes nxAuthIcoFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

.nx-auth-aside-ico {
    animation: nxAuthIcoFloat 3.2s ease-in-out infinite;
    transition: background-color var(--nx-transition-slow), border-color var(--nx-transition-slow), box-shadow var(--nx-transition-slow);
    will-change: transform;
}
.nx-auth-aside-ico .material-symbols-rounded {
    transition: transform .25s cubic-bezier(.22, .68, .36, 1);
}

.nx-auth-aside-ico:nth-child(1) { animation-delay: 0s; }
.nx-auth-aside-ico:nth-child(2) { animation-delay: .18s; }
.nx-auth-aside-ico:nth-child(3) { animation-delay: .36s; }
.nx-auth-aside-ico:nth-child(4) { animation-delay: .54s; }
.nx-auth-aside-ico:nth-child(5) { animation-delay: .72s; }
.nx-auth-aside-ico:nth-child(6) { animation-delay: .90s; }
.nx-auth-aside-ico:nth-child(7) { animation-delay: 1.08s; }
.nx-auth-aside-ico:nth-child(8) { animation-delay: 1.26s; }
.nx-auth-aside-ico:nth-child(9) { animation-delay: 1.44s; }

@media (hover: hover) {
    .nx-auth-aside-ico:hover {
        animation-play-state: paused;
        background: rgba(255, 255, 255, .24);
        border-color: rgba(255, 255, 255, .34);
        box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
    }
    .nx-auth-aside-ico:hover .material-symbols-rounded { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .nx-auth-aside-ico,
    .nx-auth-aside-ico:hover {
        animation: none;
        will-change: auto;
    }
    .nx-auth-aside-ico .material-symbols-rounded,
    .nx-auth-aside-ico:hover .material-symbols-rounded { transform: none; }
}

body:has(#registration) .nx-auth-slides { margin-bottom: 0; }
body:has(#registration) .nx-auth-dots {
    order: 1;
    margin-top: 18px;
}
body:has(#registration) .nx-auth-aside-tiles {
    order: 2;
    margin-top: auto;
    padding-top: 30px;
}
@media (max-width: 991.98px) {
    body:has(#registration) .nx-auth-aside-tiles {
        margin-top: 20px;
        padding-top: 0;
    }
}

.nx-auth-slider { touch-action: pan-y; }

.nx-auth-slide p {
    white-space: pre-line;
}

.nx-auth-dot {
    width: 10px;
    height: 10px;
    transition: width var(--nx-transition-slow), height var(--nx-transition-slow), background-color var(--nx-transition-slow), transform var(--nx-transition-slow);
}
.nx-auth-dot.is-active {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
}

.nx-auth-slider { cursor: grab; }
.nx-auth-slider.is-dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}
/* The dots are buttons -- they keep their own cursor. */
.nx-auth-slider .nx-auth-dot { cursor: pointer; }
.nx-auth-dots.is-single .nx-auth-dot { cursor: default; }

body:has(#registration) .nx-auth-aside-copy .nx-auth-aside-eyebrow {
    font-size: 23px;
    line-height: 1.25;
    letter-spacing: .02em;
    margin-bottom: 6px;
    color: #fff;
}

body:not(:has(#registration)) .nx-auth-aside {
    justify-content: center;
    gap: 26px;
}
body:not(:has(#registration)) .nx-auth-aside-icons {
    margin-top: 0;
    margin-bottom: 0;
}
body:not(:has(#registration)) .nx-auth-aside-copy {
    margin-top: 0;
}

.nx-auth-aside-ico {
    width: 56px;
    height: 56px;
    border-radius: 16px;
}
.nx-auth-aside-ico .material-symbols-rounded { font-size: 26px; }
@media (max-width: 991.98px) {
    .nx-auth-aside-ico {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }
    .nx-auth-aside-ico .material-symbols-rounded { font-size: 24px; }
}

.nx-ca-shortcut-list .material-symbols-rounded {
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-ca-shortcut-list a.nx-ca-contact {
    transition: color var(--nx-transition);
}
.nx-ca-shortcut-list a.nx-ca-contact:hover,
.nx-ca-shortcut-list a.nx-ca-contact:focus {
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: none;
}

/* ---- the search band ---- */
.nx-kb-hero {
    display: block;
    margin: 0 0 26px;
    padding: 30px;
    border-radius: var(--nx-radius-card, 16px);
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--nx-primary) 88%, #000) 0%,
        var(--nx-primary) 60%,
        color-mix(in srgb, var(--nx-primary) 88%, #fff) 100%);
}
@supports not (background: linear-gradient(color-mix(in srgb, red 50%, white), red)) {
    .nx-kb-hero { background: var(--nx-primary); }
}
.nx-kb-hero-inner {
    display: flex;
    align-items: stretch;
    gap: 12px;
}
.nx-kb-hero .nx-kb-search {
    flex: 1 1 auto;
    min-width: 0;
    border-color: transparent;
    padding: 4px 8px 4px 18px;
}
.nx-kb-hero .nx-kb-search-input { height: 46px; }
.nx-kb-hero .nx-kb-search-ico { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-kb-hero-btn {
    flex: 0 0 auto;
    padding: 0 30px;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 14.5px;
    font-weight: 400;
    cursor: pointer;
    transition: background var(--nx-transition);
}
.nx-kb-hero-btn:hover,
.nx-kb-hero-btn:focus {
    background: rgba(255, 255, 255, .28);
    color: #fff;
    outline: none;
}

/* ---- section headings, outside the cards ---- */
.nx-kb-section-title {
    margin: 26px 0 12px;
    font-size: 17px;
    font-weight: 500;
    color: var(--nx-text);
}
/* The first one follows the band, which already has its own bottom margin. */
.nx-kb-hero + .nx-kb-section-title { margin-top: 0; }

/* The list cards hold their own rows; the rows carry the padding. */
.nx-kb-list-card { padding: 0; overflow: hidden; }

/* ---- categories as rows ---- */
.nx-kb-cat-list { display: flex; flex-direction: column; }
.nx-kb-cat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--nx-border);
    text-decoration: none;
    color: var(--nx-text);
    transition: background var(--nx-transition-fast);
}
.nx-kb-cat-row:last-child { border-bottom: none; }
.nx-kb-cat-row:hover {
    background: rgba(var(--nx-primary-rgb), .04);
    text-decoration: none;
    color: var(--nx-text);
}
.nx-kb-cat-row-ico {
    font-size: 20px;
    color: var(--nx-primary-text, var(--nx-primary));
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1;
}
.nx-kb-cat-row-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.nx-kb-cat-row-name {
    font-size: var(--nx-font-size);
    font-weight: 400;
    color: var(--nx-primary-text, var(--nx-primary));
}
/* The count sits with the name but should not compete with it. */
.nx-kb-cat-row-count { font-weight: 400; color: var(--nx-muted); }
.nx-kb-cat-row-desc {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--nx-muted);
    line-height: 1.5;
}
/* Admin-only edit buttons must not stretch with the row. */
.nx-kb-row-edit { flex-shrink: 0; align-self: center; }

.nx-kb-list-card .nx-kb-art-title { color: var(--nx-primary-text, var(--nx-primary)); }
.nx-dl-size { font-size: 12px; font-weight: 400; color: var(--nx-muted); margin-top: 2px; }
.nx-dl-type { flex-shrink: 0; margin-top: 1px; }

@media (max-width: 575.98px) {
    .nx-kb-hero { padding: 20px; }
    /* Side by side, the button would squeeze the input to nothing on a phone. */
    .nx-kb-hero-inner { flex-direction: column; }
    .nx-kb-hero-btn { padding: 12px 20px; }
    .nx-kb-cat-row,
    .nx-kb-list-card .nx-kb-art-item { padding-left: 16px; padding-right: 16px; }
}

.nx-kb-useful {
    padding: 5px 12px;
    border-radius: var(--nx-radius-badge, 999px);
    background: rgba(var(--nx-success-rgb), .12);
    color: var(--nx-success);
}
.nx-kb-useful .material-symbols-rounded { font-size: 15px; }

.nx-kb-article-head {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--nx-border);
}

/* ---- the vote block ---- */
/* The <form> is the flex row (it wraps both halves), not .nx-kb-vote. */
.nx-kb-vote-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.nx-kb-vote-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nx-kb-vote-title { margin: 0; }
.nx-kb-vote-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 400;
    color: var(--nx-muted);
}
.nx-kb-vote-stat .material-symbols-rounded { font-size: 14px; }
.nx-kb-vote-btns { flex-shrink: 0; }

/* ---- related articles ---- */
.nx-kb-rel-head { padding: 18px 22px; border-bottom: 1px solid var(--nx-border); }
.nx-kb-art-item-slim { align-items: center; }
.nx-kb-art-item-slim .nx-kb-art-title { color: var(--nx-primary-text, var(--nx-primary)); }

@media (max-width: 575.98px) {
    /* Buttons under the question, full row, rather than squeezed beside it. */
    .nx-kb-vote-form { flex-direction: column; align-items: flex-start; }
    .nx-kb-rel-head { padding: 16px; }
}

body.nx-theme .nx-ann-title a {
    color: var(--nx-text);
}
body.nx-theme .nx-ann-title a:hover,
body.nx-theme .nx-ann-title a:focus {
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-ann-list { gap: 14px; }

body.nx-theme .nx-ann-title {
    font-weight: 400;
    letter-spacing: 0;
}
body.nx-theme .nx-ann-title a {
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
}
body.nx-theme .nx-ann-title a:hover,
body.nx-theme .nx-ann-title a:focus {
    color: var(--nx-primary-text, var(--nx-primary));
    text-decoration: underline;
}

body.nx-theme .nx-ann-more {
    background: rgba(var(--nx-primary-rgb), .08);
    border: 0;
    color: var(--nx-primary-text, var(--nx-primary));
    font-weight: 400;
    box-shadow: none;
}
body.nx-theme .nx-ann-more:hover,
body.nx-theme .nx-ann-more:focus {
    background: rgba(var(--nx-primary-rgb), .14);
    border: 0;
    color: var(--nx-primary-text, var(--nx-primary));
    box-shadow: none;
    text-decoration: none;
}

body.nx-theme .nx-ann-item {
    transition: transform var(--nx-transition-fast), box-shadow var(--nx-transition-fast);
}
body.nx-theme .nx-ann-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--nx-shadow-elevated, 0 10px 24px rgba(16, 24, 40, .10));
}

body.nx-theme .nx-ann-more {
    padding: 11px 20px;
    font-size: 13px;
}

body.nx-theme .nx-ann-list {
    gap: 0;
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card, 18px);
    box-shadow: var(--nx-shadow, 0 1px 2px rgba(16, 24, 40, .04));
    overflow: hidden;
}
body.nx-theme .nx-ann-list > .nx-ann-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--nx-border);
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    transition: background-color var(--nx-transition);
}
body.nx-theme .nx-ann-list > .nx-ann-item:last-child {
    border-bottom: 0;
}
body.nx-theme .nx-ann-item:hover {
    transform: none;
    box-shadow: none;
    background-color: rgba(var(--nx-primary-rgb), .05);
}
body.nx-theme .nx-ann-title a:hover,
body.nx-theme .nx-ann-title a:focus {
    text-decoration: none;
}
body.nx-theme .nx-ann-title,
body.nx-theme .nx-ann-title a {
    font-weight: 300;
}

.nx-topbar-logo-mobile { display: none !important; }
@media (max-width: 1249.98px) {
    .nx-topbar-logo-mobile { display: flex !important; }
}

body.nx-theme .intl-tel-input .country-list .nx-itl-search input,
body.nx-theme #registration .intl-tel-input .country-list .nx-itl-search input {
    padding-left: 0;
}

body.nx-theme #registration .intl-tel-input .flag-container .selected-flag {
    height: 100%;
}

body.nx-theme .nx-vi-totals {
    width: 100%;
    margin-left: 0;
}
body.nx-theme .nx-vi-total-row > label {
    margin-bottom: 0;
}

body.nx-theme .nx-ot-avatar {
    position: relative;
    overflow: hidden;
}

body.nx-theme .nx-footer-mark-img .nx-logo-light-mode { display: inline-block; }
body.nx-theme .nx-footer-mark-img .nx-logo-dark-mode { display: none; }
html.nx-dark body.nx-theme .nx-footer-mark-img .nx-logo-light-mode { display: none; }
html.nx-dark body.nx-theme .nx-footer-mark-img .nx-logo-dark-mode { display: inline-block; }

body.nx-theme .nx-vt-poster-avatar {
    position: relative;
    overflow: hidden;
}

body.nx-theme .nx-auth-logo .nx-logo-img {
    height: var(--nx-logo-height, 36px);
}
body.nx-theme .nx-auth-logo .nx-logo-mark {
    width: var(--nx-logo-height, 36px);
    height: var(--nx-logo-height, 36px);
    border-radius: calc(var(--nx-logo-height, 36px) * .28);
}
body.nx-theme .nx-auth-logo .nx-logo-mark .material-symbols-rounded {
    font-size: calc(var(--nx-logo-height, 36px) * .58);
}

body.nx-theme .nx-auth-aside-brand .nx-logo-img,
body.nx-theme:has(#registration) .nx-auth-aside-brand .nx-logo-img,
body.nx-theme .nx-auth-aside-brand img,
body.nx-theme:has(#registration) .nx-auth-aside-brand img {
    height: var(--nx-logo-height, 36px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
body.nx-theme .nx-auth-aside-brand .material-symbols-rounded,
body.nx-theme:has(#registration) .nx-auth-aside-brand .material-symbols-rounded {
    font-size: calc(var(--nx-logo-height, 36px) * .72);
}

body.nx-theme:has(#registration) .nx-auth-shell #registration button.btn[type="submit"],
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration button.btn[type="submit"],
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration button.btn[type="submit"] {
    display: block;
    width: 100%;
    height: 50px;
    border-radius: var(--nx-radius-button, 12px);
    font-size: 15px;
    font-weight: 400;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--nx-primary) 34%, transparent);
}
/* The split and narrow layouts add a little breathing room above it. */
body.nx-theme .nx-auth-shell:has(.nx-auth-aside-narrow) #registration button.btn[type="submit"],
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration button.btn[type="submit"] {
    margin-top: 4px;
}
body.nx-theme #registration button.btn.btn-lg.btn-primary {
    min-width: 0;
}

body.nx-theme .nx-vt-avatar {
    position: relative;
    overflow: hidden;
}

body.nx-theme .nx-ca-profile-avatar {
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    /* Exactly one column in the row -> it takes the whole row. */
    body.nx-theme form[action="?action=details"] .row:has(> [class*="col-md-"]:only-child) > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Exactly two -> half each, whatever widths the template asked for. */
    body.nx-theme form[action="?action=details"] .row:has(> [class*="col-md-"]:nth-child(2):last-child) > [class*="col-md-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

body.nx-theme .md-editor > textarea,
body.nx-theme .md-editor textarea,
body.nx-theme textarea.nx-vt-textarea,
body.nx-theme .nx-vt-textarea {
    font-weight: var(--nx-weight-body, 400);
}

body.nx-theme .nx-vt-closed-alert,
body.nx-theme .nx-pmm-alert,
body.nx-theme .nx-pd-alert-danger.nx-pd-alert-danger.nx-pd-alert-danger,
body.nx-theme .nx-upg-info-alert.nx-upg-info-alert.nx-upg-info-alert,
body.nx-theme .nx-alert {
    font-weight: var(--nx-weight-body, 400);
}
/* The parts that should still stand out. */
body.nx-theme .nx-alert .nx-alert-title,
body.nx-theme .nx-alert .nx-alert-link,
body.nx-theme .nx-vt-closed-alert strong,
body.nx-theme .nx-alert strong,
body.nx-theme .nx-alert b {
    font-weight: 400;
}

body.nx-theme .nx-ca-profile-name {
    font-weight: var(--nx-weight-body, 400);
    letter-spacing: 0;
}

body.nx-theme .btn,
body.nx-theme .nx-btn,
body.nx-theme button.btn,
body.nx-theme a.btn,
body.nx-theme input[type="submit"].btn,
body.nx-theme input[type="button"].btn {
    font-weight: var(--nx-weight-button, var(--nx-weight-body, 400));
}

body.nx-theme .nx-aum-permbox {
    background: transparent;
}
body.nx-theme .nx-aum-permlabel .nx-aum-permtext {
    font-weight: var(--nx-weight-body, 400);
}
body.nx-theme .nx-aum-permlabel:hover {
    background: rgba(var(--nx-primary-rgb), .04);
}

body.nx-theme .nx-acm-checklabel,
body.nx-theme .nx-cad-checklabel {
    font-weight: var(--nx-weight-body, 400);
}

body.nx-theme .nx-card:has(.intl-tel-input),
body.nx-theme .nx-card:has(.nx-custom-select-wrapper),
body.nx-theme .nx-card-body:has(.intl-tel-input),
body.nx-theme .nx-card-body:has(.nx-custom-select-wrapper) {
    overflow: visible;
}

body.nx-theme .nx-itl-search input,
body.nx-theme .intl-tel-input .country-list .nx-itl-search input,
body.nx-theme .iti .iti__country-list .nx-itl-search input {
    padding: 0 !important;
    margin: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
}
/* The row itself: a little tighter to the icon than the 8px it had. */
body.nx-theme .nx-itl-search {
    gap: 6px;
    padding-left: 12px;
}

body.nx-theme .nx-aum-permbox {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

body.nx-theme .nx-cad-formactions-single {
    margin-top: 4px;
    padding: 0 22px 8px;
}
@media (max-width: 575.98px) {
    body.nx-theme .nx-cad-formactions-single {
        flex-wrap: wrap;
    }
}

body.nx-theme .ticket-reply .nx-vt-rating,
body.nx-theme .ticket-reply .nx-vt-rating-wrap .rating-done {
    float: none;
    padding: 0;
    direction: ltr;
    unicode-bidi: normal;
    font-size: inherit;
}
body.nx-theme .ticket-reply .nx-vt-rating span.star,
body.nx-theme .ticket-reply .nx-vt-rating-wrap .rating-done span.star {
    font-family: inherit;
    font-size: 0;
}
/* The glyph the vendor rules inject via ::before -- the mask is the star. */
body.nx-theme .ticket-reply .nx-vt-rating span.star::before,
body.nx-theme .ticket-reply .nx-vt-rating-wrap .rating-done span.star::before {
    content: none;
}

body.nx-theme .nx-vt-reply-head {
    align-items: flex-start;
}
.nx-vt-reply-who {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
body.nx-theme .nx-vt-reply-who .nx-vt-reply-date {
    font-size: var(--nx-font-size-xs);
    font-weight: 400;
    color: var(--nx-muted);
}
/* Badge above, rating below, both hard against the right edge. */
.nx-vt-reply-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}
body.nx-theme .nx-vt-reply-meta .nx-vt-rating-wrap {
    padding: 0;
    border-top: 0;
}
/* On a narrow screen the label pushes the stars out of the column. */
@media (max-width: 575.98px) {
    body.nx-theme .nx-vt-reply-meta .nx-vt-rate-label { display: none; }
}

/* ---- the requestor badge ---- */
.nx-vt-req-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--nx-radius-badge, 999px);
    font-size: 10px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    background: var(--nx-border);
    color: var(--nx-muted);
}
.nx-vt-req-owner {
    background: rgba(var(--nx-success-rgb), .12);
    color: var(--nx-success);
}
.nx-vt-req-operator {
    background: rgba(var(--nx-primary-rgb), .1);
    color: var(--nx-primary-text, var(--nx-primary));
}

/* ---- staff replies stand apart ---- */
body.nx-theme .nx-vt-reply-card.is-staff {
    border-left: 4px solid var(--nx-primary);
}

body.nx-theme .modal .modal-header .modal-title,
body.nx-theme .modal .modal-header h1,
body.nx-theme .modal .modal-header h2,
body.nx-theme .modal .modal-header h3,
body.nx-theme .modal .modal-header h4,
body.nx-theme .modal .modal-header h5,
body.nx-theme .modal .modal-header h6,
#modalAjax .modal-header .modal-title,
.modal .modal-header .modal-title {
    color: #fff !important;
}
/* The close glyph sits on the same bar. */
body.nx-theme .modal .modal-header .close,
body.nx-theme .modal .modal-header .close .material-symbols-rounded,
#modalAjax .modal-header .close {
    color: #fff !important;
}

body.nx-theme .nx-pw-actions .nx-cad-btn-save,
body.nx-theme .nx-pw-actions .nx-cad-btn-reset {
    font-size: 13.5px;
    height: 42px;
    padding: 0 20px;
}

.nx-aum-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nx-aum-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
}
body.nx-theme .nx-aum-avatar {
    width: 42px;
    height: 42px;
    font-size: 15px;
    flex-shrink: 0;
}
.nx-aum-who {
    flex: 1 1 auto;
    min-width: 0;
}
.nx-aum-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nx-font-size);
    font-weight: 400;
    color: var(--nx-text);
}
.nx-aum-mail,
.nx-aum-login-label,
.nx-aum-login-value {
    font-size: var(--nx-font-size-sm);
    color: var(--nx-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nx-aum-login {
    flex: 0 0 auto;
    text-align: left;
    line-height: 1.45;
}
.nx-aum-login-value { color: var(--nx-text); }
/* Badge above, actions below, both against the right edge. */
.nx-aum-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}
.nx-aum-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
/* The pending-invites heading that used to be a full-width table row. */
.nx-aum-subhead {
    margin-top: 6px;
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    color: var(--nx-muted);
}
/* An invite has no avatar or login column, so its text block takes the room. */
.nx-aum-who-wide { flex: 1 1 auto; }

@media (max-width: 767.98px) {
    .nx-aum-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .nx-aum-login { flex: 1 1 100%; }
    .nx-aum-side {
        flex: 1 1 100%;
        align-items: flex-start;
    }
    .nx-aum-actions { flex-wrap: wrap; }
}

.nx-aum-shield {
    font-size: 17px;
    line-height: 1;
    color: var(--nx-muted);
    font-variation-settings: 'FILL' 1;
    cursor: default;
}
.nx-aum-shield.is-on { color: var(--nx-success); }

.nx-aum-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-muted);
    cursor: pointer;
    transition: border-color var(--nx-transition), color var(--nx-transition), background-color var(--nx-transition);
}
.nx-aum-iconbtn .material-symbols-rounded { font-size: 18px; }
.nx-aum-iconbtn:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary-text, var(--nx-primary));
}
.nx-aum-iconbtn-danger:hover {
    border-color: var(--nx-danger);
    color: var(--nx-danger);
}
.nx-aum-row .nx-aum-who .nx-aum-name:only-child { margin: 0; }

body.nx-theme .nx-aum-radiolabel {
    font-weight: var(--nx-weight-body, 400);
}

body.nx-theme .nx-address-radio-label.nx-u-option-row {
    font-weight: 400;
}
body.nx-theme .nx-address-radio-label.nx-u-option-row strong {
    font-weight: 400;
}

.nx-pmm-card #stripeElements .cc-billing-address,
.nx-pmm-card #stripeElements .form-group.row {
    display: block;
    margin: 0 0 16px 0;
}
.nx-pmm-card #stripeElements .cc-billing-address:last-child,
.nx-pmm-card #stripeElements .form-group.row:last-child {
    margin-bottom: 0;
}

.nx-pmm-card #stripeElements [class*="col-sm-"],
.nx-pmm-card #stripeElements [class*="col-md-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
    float: none;
}
.nx-pmm-card #stripeElements [class*="col-sm-"]:empty {
    display: none;
}

.nx-pmm-card #stripeElements label,
.nx-pmm-card #stripeElements .control-label {
    display: block;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin: 0 0 8px;
    padding: 0;
    text-align: left !important;
    color: var(--nx-text);
    font-size: var(--nx-font-size-sm);
    font-weight: 400;
    line-height: 1.3;
}

.nx-pmm-card #stripeElements .StripeElement,
.nx-pmm-card #stripeElements .form-control {
    display: block;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 13px 16px;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-md);
    background: var(--nx-card-bg);
    color: var(--nx-text);
    font-family: var(--nx-font-family);
    font-size: var(--nx-font-size);
    font-weight: 400;
    box-shadow: none;
    transition: border-color var(--nx-transition), box-shadow var(--nx-transition);
}
.nx-pmm-card #stripeElements .StripeElement--focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 3px rgba(var(--nx-primary-rgb), .15);
}
.nx-pmm-card #stripeElements .StripeElement--invalid {
    border-color: var(--nx-danger);
}

.nx-pmm-card #stripeElements #stripeCardType:empty,
.nx-pmm-card #stripeElements #stripeCvcWhere:empty {
    display: none;
}
.nx-pmm-card #stripeElements #stripeCardType,
.nx-pmm-card #stripeElements #stripeCvcWhere {
    margin-top: 6px;
    border: 0;
    padding: 0;
    background: none;
    min-height: 0;
}

body.nx-theme .nx-cc-type-pill:has(input:disabled) {
    cursor: default;
    box-shadow: none;
    background: var(--nx-card-bg);
    color: var(--nx-muted);
}
body.nx-theme .nx-cc-type-pill:has(input:disabled):hover {
    border-color: var(--nx-border);
    background: var(--nx-card-bg);
}
body.nx-theme .nx-cc-type-pill.active:has(input:disabled) {
    border-color: var(--nx-primary);
    color: var(--nx-text);
}
body.nx-theme .nx-cc-type-pill.active:has(input:disabled):hover {
    border-color: var(--nx-primary);
}
body.nx-theme .nx-cc-type-pill:has(input:disabled) .nx-cc-type-dot {
    opacity: .55;
}

body.nx-theme .nx-pmm-body .nx-pmm-cardhead {
    margin: -24px -24px 24px;
}
@media (max-width: 767.98px) {
    body.nx-theme .nx-pmm-body .nx-pmm-cardhead {
        margin: -18px -16px 18px;
    }
}
body.nx-theme .nx-pmm-cardhead .nx-pmm-pci-badge {
    flex: 0 0 auto;
}

.nx-ve-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: -4px -6px 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--nx-radius-sm, 6px);
    background: transparent;
    color: var(--nx-muted);
    cursor: pointer;
    transition: background-color var(--nx-transition), color var(--nx-transition);
}
.nx-ve-close:hover,
.nx-ve-close:focus-visible {
    background: var(--nx-bg);
    color: var(--nx-text);
}
.nx-ve-close .material-symbols-rounded {
    font-size: 20px;
    line-height: 1;
}

body.nx-theme .nx-sh-acct-name {
    display: inline-block;
    max-width: 11ch;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
@media (min-width: 1200px) {
    body.nx-theme .nx-sh-acct-name { max-width: 16ch; }
}

body.nx-theme .nx-dci-card .nx-dci-cardhead {
    margin: 0;
}

body.nx-theme .nx-dci-card .nx-dci-subfield {
    padding-left: 26px;
    margin: -6px 0 18px;
}
@media (min-width: 768px) {
    body.nx-theme .nx-dci-card .tab-pane > .nx-dci-subfield { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    body.nx-theme .nx-dci-card .nx-dci-subfield { padding-left: 0; }
}

body.nx-theme .nx-dci-card label.nx-dci-radio {
    font-weight: 400;
}
body.nx-theme .nx-dci-card .nx-card-head-desc {
    font-weight: 400;
}
body.nx-theme .nx-dci-card .tab-pane > .form-group > label.nx-rns-label {
    font-weight: 400;
}

body.nx-theme .nx-dci-card .nx-dci-btn {
    height: 44px;
    padding: 0 24px;
    border-radius: var(--nx-radius-md);
    font-size: var(--nx-font-size-md);
    font-weight: var(--nx-weight-button, 500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--nx-transition), border-color var(--nx-transition), color var(--nx-transition);
}
body.nx-theme .nx-dci-card .nx-dci-btn-save {
    background: var(--nx-primary);
    border: none;
    color: #fff;
}
body.nx-theme .nx-dci-card .nx-dci-btn-save:hover {
    background: var(--nx-primary-hover);
    color: #fff;
}
body.nx-theme .nx-dci-card .nx-dci-btn-cancel {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    color: var(--nx-text);
}
body.nx-theme .nx-dci-card .nx-dci-btn-cancel:hover {
    border-color: var(--nx-primary);
    color: var(--nx-primary-text, var(--nx-primary));
}

body.nx-theme a.dropdown-item.nx-sh-footer-lang-item {
    font-weight: 400;
    color: var(--nx-text);
}
body.nx-theme a.dropdown-item.nx-sh-footer-lang-item:hover,
body.nx-theme a.dropdown-item.nx-sh-footer-lang-item:focus {
    background-color: color-mix(in srgb, var(--nx-primary) 8%, transparent) !important;
    color: var(--nx-primary-text, var(--nx-primary)) !important;
}
body.nx-theme a.dropdown-item.nx-sh-footer-lang-item.item.active,
body.nx-theme a.dropdown-item.nx-sh-footer-lang-item.item.active:hover,
body.nx-theme a.dropdown-item.nx-sh-footer-lang-item.item.active:focus {
    background-color: color-mix(in srgb, var(--nx-primary) 12%, transparent) !important;
    color: var(--nx-primary-text, var(--nx-primary)) !important;
    font-weight: 400;
}

/* The language menu's own rows carry the same 600 the currency ones did. */
body.nx-theme a.nx-langmenu-item,
body.nx-theme a.nx-langmenu-item.is-active {
    font-weight: 400;
}

h1.nx-card-title.nx-card-title.nx-card-title,
h2.nx-card-title.nx-card-title.nx-card-title,
h3.nx-card-title.nx-card-title.nx-card-title,
h4.nx-card-title.nx-card-title.nx-card-title,
h5.nx-card-title.nx-card-title.nx-card-title,
body.nx-theme h3.nx-card-title.nx-card-title.nx-card-title {
    font-size: 15.5px;
    font-weight: var(--nx-weight-card-title);
    color: var(--nx-text);
}

body.nx-theme .nx-pd-side-head h3.nx-card-title {
    font-size: 15.5px;
    font-weight: 600;
}

h3.nx-card-title.nx-dd-h3,
h3.nx-card-title.nx-dao-h3,
h3.nx-card-title.nx-dao-h3-plain,
h3.nx-card-title.nx-uia-box-title,
h3.nx-card-title.nx-upc-h4,
h3.nx-card-title.nx-upc-h4-lg,
body.nx-theme h3.nx-card-title.nx-dd-h3,
body.nx-theme h3.nx-card-title.nx-dao-h3,
body.nx-theme h3.nx-card-title.nx-uia-box-title,
body.nx-theme h3.nx-card-title.nx-upc-h4,
body.nx-theme h3.nx-card-title.nx-upc-h4-lg {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--nx-text);
}

h3.nx-card-title.nx-u-h-18,
h3.nx-card-title.nx-ca-card-title,
body.nx-theme h3.nx-card-title.nx-u-h-18,
body.nx-theme h3.nx-card-title.nx-ca-card-title {
    font-size: 15.5px;
    font-weight: var(--nx-weight-card-title);
    color: var(--nx-text);
}
h3.nx-card-title.nx-ca-card-title {
    letter-spacing: 0;
    text-transform: none;
}

body.nx-theme .nx-pd-module .card-title,
body.nx-theme .nx-pd-module .panel-title,
body.nx-theme .nx-pd-module .panel-heading h1,
body.nx-theme .nx-pd-module .panel-heading h2,
body.nx-theme .nx-pd-module .panel-heading h3,
body.nx-theme .nx-pd-module .panel-heading h4,
body.nx-theme .nx-pd-module .card-header h1,
body.nx-theme .nx-pd-module .card-header h2,
body.nx-theme .nx-pd-module .card-header h3,
body.nx-theme .nx-pd-module .card-header h4 {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--nx-text);
}

h3.nx-card-title.nx-u-h-16,
h3.nx-card-title.nx-ve-title,
body.nx-theme h3.nx-card-title.nx-u-h-16,
body.nx-theme h3.nx-card-title.nx-ve-title {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--nx-text);
}

i.nx-nav-ico {
    font-size: calc(var(--nx-nav-icon-size) * var(--nx-fa-scale));
    line-height: 1;
    vertical-align: middle;
}
i.nx-sh-topnav-item-ico {
    font-size: calc(var(--nx-nav-icon-size-sm) * var(--nx-fa-scale));
    line-height: 1;
    vertical-align: middle;
}
i.nx-mobile-nav-sub-ico {
    font-size: calc(var(--nx-nav-icon-size-mobile) * var(--nx-fa-scale));
    line-height: 1;
    vertical-align: middle;
}
i.nx-pd-sidelink-ico {
    font-size: calc(var(--nx-side-icon-size) * var(--nx-fa-scale));
    line-height: 1;
}

.nx-navbar-link > .material-symbols-rounded,
.nx-navbar-link > i.nx-nav-ico {
    color: var(--nx-muted);
}

body.nx-theme .btn.nx-doms-tab,
body.nx-theme .btn.nx-status-tab,
body.nx-theme .btn.nx-doms-manage-btn,
body.nx-theme .btn.nx-prods-manage-btn,
body.nx-theme .btn.nx-inv-btn-pay,
body.nx-theme .btn.nx-inv-btn-manage {
    padding: 0.5rem 1rem;
}

.nx-nav-icon-wrapper > .material-symbols-rounded,
.nx-nav-icon-wrapper > i {
    font-size: var(--nx-nav-icon-size);
    line-height: 1;
}
.nx-sidebar-submenu-item i.nx-sidebar-submenu-ico {
    font-size: calc(var(--nx-nav-icon-size-sm) * var(--nx-fa-scale));
    line-height: 1;
}

body.nx-theme .dropdown-menu,
body.nx-theme .nx-sh-flyout-menu,
body.nx-theme .nx-sh-topnav-card {
    background: color-mix(in srgb, var(--nx-card-bg) 72%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
}
body.nx-theme .nx-sh-topnav-menu {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html.nx-dark body .dropdown-menu,
html.nx-dark body .nx-sh-flyout-menu,
html.nx-dark body .nx-sh-topnav-card {
    background-color: color-mix(in srgb, var(--nx-card-bg) 68%, transparent);
}
/* Same exclusion as above, for the dark rule's background-color. */
html.nx-dark body .nx-sh-topnav-menu {
    background-color: transparent;
}
body.nx-theme .nx-sidebar {
    background: color-mix(in srgb, var(--nx-sidebar-bg) 84%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
}
body.nx-theme .nx-pd-side-card {
    background: color-mix(in srgb, var(--nx-card-bg) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
}

body.nx-theme .nx-alert.w-hidden {
    display: none;
}

.nx-sidebar-mode-icons .nx-nav-item .nx-nav-badge {
    display: none;
}

.nx-prods-tile-head {
    align-items: flex-start;
    gap: 12px;
}
.nx-prods-tile-value.nx-prods-tile-value.nx-prods-tile-value {
    margin-top: 0;
    line-height: 1.1;
}
.nx-prods-tile .nx-prods-tile-label {
    display: block;
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 28px;
    margin: 0;
}
.nx-prods-tile.nx-prods-tile.nx-prods-tile {
    position: relative;
    padding-bottom: 58px;
}
.nx-prods-tile::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--nx-tile-accent, var(--nx-border));
    opacity: .85;
}
/* One line per tone, so the rule matches the figure above it. */
.nx-prods-tile:has(.nx-prods-green)   { --nx-tile-accent: var(--nx-success-alt); }
.nx-prods-tile:has(.nx-prods-red)     { --nx-tile-accent: var(--nx-danger, #f04438); }
.nx-prods-tile:has(.nx-prods-orange)  { --nx-tile-accent: var(--nx-warning-alt); }
.nx-prods-tile:has(.nx-prods-primary) { --nx-tile-accent: var(--nx-primary); }

@media (min-width: 640px) and (max-width: 871.98px) {
    body.nx-theme .nx-footer-cols:has(> .nx-footer-col:nth-child(4)):not(:has(> .nx-footer-col:nth-child(5))),
    body.nx-theme .nx-footer-card.nx-footer-menu-on .nx-footer-cols:has(> .nx-footer-col:nth-child(4)):not(:has(> .nx-footer-col:nth-child(5))) {
        /* Two even rows of two. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.nx-theme .nx-btn-outline {
    background: var(--nx-btn-secondary, var(--nx-card-bg));
    border-color: var(--nx-btn-secondary-border, var(--nx-border));
    color: var(--nx-btn-secondary-text, var(--nx-text));
    font-weight: var(--nx-weight-button-secondary);
}

body.nx-theme .btn.nx-hp-prod-manage {
    background: var(--nx-btn-secondary, var(--nx-card-bg)) !important;
    border-color: var(--nx-btn-secondary-border, var(--nx-border)) !important;
    color: var(--nx-btn-secondary-text, var(--nx-text)) !important;
    font-weight: var(--nx-weight-button-secondary);
}

/* Skinned select whose hidden <select> failed validation. */
.nx-cs-invalid .nx-custom-select-trigger,
.nx-cs-invalid .nx-custom-select-trigger:hover {
    border-color: var(--nx-danger) !important;
}

.nx-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--nx-space-3);
}
.nx-footer-social .list-inline-item {
    margin-right: 0;
}

/* iCheck wrapper on the payment-type pills: the pill draws its own dot. */
body.nx-theme .nx-cc-type-pill .iradio_square-blue {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    background: none;
}

/* Primary-coloured text: the darker dark-mode primary is for fills; text uses the link colour. */
.nx-dark { --nx-primary-text: var(--nx-link, #5686ef); }
/* Dark mode: icons drawn in the fill colours need the lighter text tint. */
.nx-dark .nx-ca-stat-ico-primary,
.nx-dark .nx-ca-stat-ico-secondary { color: var(--nx-link, #5686ef); }
/* The secondary colour is often a dark brand navy; lift it so the count reads on a dark card. */
.nx-dark .nx-ca-stat-num-secondary { color: var(--nx-link, #5686ef); color: color-mix(in srgb, var(--nx-secondary) 35%, #fff); }
.nx-dark .nx-ca-stat-ico-secondary { color: color-mix(in srgb, var(--nx-secondary) 35%, #fff); }
.nx-dark .nx-hp-panel-ico { --nx-hp-ico-fg: var(--nx-link, #5686ef); }
.nx-vi-credit-card .btn-success { background-color: #15803d; border-color: #15803d; color: #fff; }
.nx-vi-credit-card .btn-success:hover { background-color: #166534; border-color: #166534; }
/* Sign-up with the side panel shows no field icons, so the skinned dropdowns drop the icon gap too. */
body.nx-theme:has(#registration) .nx-auth-shell:has(.nx-auth-aside) #registration .nx-custom-select-trigger {
    padding-left: 14px !important;
}

/* Gateway containers on the pay and payment-method pages. The gateways' own ids and classes are kept;
   only their look is aligned with the theme (a gateway stylesheet may hard-code white boxes). */
body.nx-theme #frmPayment.paypal_ppcpv-payment-form .paymethod-info:not([data-paymethod-id]),
body.nx-theme #frmPayment #creditCardInputFields ul {
    border-color: var(--nx-border) !important;
    background: transparent !important;
    color: var(--nx-text);
}
body.nx-theme #frmPayment.paypal_ppcpv-payment-form .selected,
body.nx-theme #frmPayment.paypal_ppcpv-payment-form #creditCardInputFields { background-color: transparent !important; }
body.nx-theme #paymentGatewayInput iframe,
body.nx-theme #tokenGatewayRemoteInputOutput iframe,
body.nx-theme iframe.auth3d-area,
body.nx-theme iframe.submit-3d {
    max-width: 100%;
    border: 0;
    border-radius: var(--nx-radius-md);
    background: transparent;
}
body.nx-theme .fieldgroup-remoteinput,
body.nx-theme #frmThreeDAuth {
    background: var(--nx-card-bg);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-card);
    padding: 16px;
}