/**
 * Webixhost client area
 *
 * Loaded after the stock Twenty-One styles. Everything brand-related is a
 * variable in :root, so a colour change is a one-line edit.
 *
 *  1. Brand tokens
 *  2. Base
 *  3. Shell: top bar, sidebar, main area
 *  4. Components restyled from Twenty-One
 *  5. Dashboard
 *  6. Guest pages
 *  7. Small screens
 */

/* 1. Brand tokens --------------------------------------------------------- */

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
}

:root {
    /* Sampled from the Webixhost logo */
    --wx-orange: #ff5b1f;
    --wx-orange-light: #ff8a4c;
    --wx-orange-deep: #d4420b;   /* orange that is readable as text on white */
    --wx-orange-50: #fff3ec;
    --wx-orange-100: #ffe4d6;
    --wx-gradient: linear-gradient(135deg, #ff8a4c 0%, #ff5b1f 55%, #f2470c 100%);
    --wx-glow: 0 10px 28px -10px rgba(255, 91, 31, 0.65);
    --wx-glow-soft: 0 0 0 4px rgba(255, 91, 31, 0.14);

    --wx-ink: #0e0e10;
    --wx-ink-2: #19191d;
    --wx-text: #1d2026;
    --wx-muted: #6a707c;
    --wx-line: #ebecef;
    --wx-bg: #f6f6f8;
    --wx-card: #ffffff;

    --wx-radius: 16px;
    --wx-radius-sm: 10px;
    --wx-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.03);
    --wx-shadow-lift: 0 12px 32px -12px rgba(16, 24, 40, 0.18);

    --wx-topbar-h: 68px;
    --wx-sidebar-w: 268px;
    --wx-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 2. Base ----------------------------------------------------------------- */

body.wx {
    font-family: var(--wx-font);
    color: var(--wx-text);
    background-color: var(--wx-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* :where() keeps these at element-level strength, so any class rule
   (buttons, list items, tabs, dark modals) still wins over them. */
:where(body.wx) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: var(--wx-font);
    font-weight: 700;
    letter-spacing: -0.01em;
}

:where(body.wx) a {
    color: var(--wx-orange-deep);
}
:where(body.wx) a:hover {
    color: #a83307;
}

body.wx ::selection {
    background: var(--wx-orange-100);
    color: var(--wx-ink);
}

body.wx :focus-visible {
    outline: 2px solid var(--wx-orange);
    outline-offset: 2px;
}

.wx-skip {
    position: absolute;
    z-index: 2000;
    top: 8px;
    left: 8px;
    padding: 8px 14px;
    background: var(--wx-ink);
    color: #fff !important;
    border-radius: var(--wx-radius-sm);
}

/* 3. Shell ---------------------------------------------------------------- */

.wx-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    height: var(--wx-topbar-h);
    padding: 0 24px 0 0;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--wx-line);
}
/* Thin brand line with a soft glow along the top edge */
.wx-topbar::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--wx-gradient);
    box-shadow: 0 0 18px rgba(255, 91, 31, 0.55);
    pointer-events: none;
}

.wx-brand {
    display: flex;
    align-items: center;
    flex: none;
    width: var(--wx-sidebar-w);
    height: 100%;
    padding-left: 24px;
}
.wx-brand-img {
    display: block;
    max-height: 34px;
    max-width: 180px;
    width: auto;
}

.wx-topnav {
    display: flex;
    align-items: center;
    gap: 4px;
}
body.wx .wx-topnav a {
    padding: 8px 14px;
    border-radius: var(--wx-radius-sm);
    color: var(--wx-text);
    font-weight: 600;
    font-size: 0.925rem;
    text-decoration: none;
}
body.wx .wx-topnav a:hover {
    background: var(--wx-bg);
    color: var(--wx-ink);
}

.wx-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.wx-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--wx-line);
    border-radius: 50%;
    background: #fff;
    color: var(--wx-text) !important;
    font-size: 1.05rem;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.wx-icon-btn:hover {
    border-color: var(--wx-orange);
    color: var(--wx-orange-deep) !important;
    box-shadow: var(--wx-glow-soft);
}
.wx-burger {
    display: none;
    margin-left: 14px;
    border-radius: var(--wx-radius-sm);
}

.wx-dot-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 9px;
    background: var(--wx-orange);
    color: var(--wx-ink);
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}
.wx-dot-badge-empty {
    display: none;
}

.wx-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 4px 0 14px;
    border: 1px solid var(--wx-line);
    border-radius: 20px;
    background: #fff;
    color: var(--wx-ink);
    font-family: var(--wx-font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wx-account-btn:hover,
.wx-account.show .wx-account-btn {
    border-color: var(--wx-orange);
    box-shadow: var(--wx-glow-soft);
}
.wx-account-btn::after {
    display: none; /* the avatar replaces the Bootstrap caret */
}
.wx-account-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wx-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--wx-gradient);
    color: var(--wx-ink);
    font-size: 0.8rem;
    font-weight: 800;
}

body.wx .dropdown-menu {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--wx-line);
    border-radius: 14px;
    box-shadow: var(--wx-shadow-lift);
    font-size: 0.9rem;
}
body.wx .dropdown-menu .dropdown-item {
    border-radius: 8px;
    color: var(--wx-text);
}
body.wx .wx-menu .dropdown-item {
    padding: 8px 12px;
}
body.wx .dropdown-menu .dropdown-item:hover,
body.wx .dropdown-menu .dropdown-item:focus {
    background: var(--wx-orange-50);
    color: var(--wx-ink);
}
body.wx .dropdown-menu .dropdown-item.active,
body.wx .dropdown-menu .dropdown-item:active {
    background: var(--wx-orange-100);
    color: var(--wx-ink);
}

/* Sidebar */

.wx-sidebar {
    position: fixed;
    top: var(--wx-topbar-h);
    bottom: 0;
    left: 0;
    z-index: 1020;
    display: flex;
    flex-direction: column;
    width: var(--wx-sidebar-w);
    padding: 16px 14px 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border-right: 1px solid var(--wx-line);
    /* The menu scrolls on short screens; the scrollbar stays out of sight
       until the pointer is over the menu. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.wx-sidebar:hover {
    scrollbar-color: #d5d7dd transparent;
}
.wx-sidebar::-webkit-scrollbar {
    width: 6px;
}
.wx-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.wx-sidebar::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: transparent;
}
.wx-sidebar:hover::-webkit-scrollbar-thumb {
    background: #d5d7dd;
}

.wx-search {
    position: relative;
    flex: none;
    margin-bottom: 14px;
}
.wx-search > i {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: var(--wx-muted);
    font-size: 0.9rem;
    pointer-events: none;
}
.wx-search-input {
    width: 100%;
    height: 42px;
    padding: 0 62px 0 36px;
    border: 1px solid var(--wx-line);
    border-radius: 12px;
    background: var(--wx-bg);
    color: var(--wx-text);
    font-family: var(--wx-font);
    font-size: 0.875rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.wx-search-input::placeholder {
    color: #9aa0ab;
}
.wx-search-input:focus {
    outline: none;
    border-color: var(--wx-orange);
    background: #fff;
    box-shadow: var(--wx-glow-soft);
}
.wx-kbd {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    padding: 2px 6px;
    border: 1px solid var(--wx-line);
    border-radius: 6px;
    background: #fff;
    color: var(--wx-muted);
    font-family: var(--wx-font);
    font-size: 0.65rem;
    font-weight: 700;
    box-shadow: none;
    pointer-events: none;
}

.wx-nav {
    flex: 1 0 auto;
}
.wx-nav-group {
    margin: 12px 12px 4px;
    color: #9aa0ab;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.wx .wx-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 36px;
    margin: 1px 0;
    padding: 5px 12px;
    border-radius: 10px;
    color: var(--wx-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.wx-nav-item > i {
    flex: none;
    width: 20px;
    color: var(--wx-muted);
    font-size: 1.05rem;
    text-align: center;
    transition: color 0.15s ease;
}
.wx-nav-label {
    flex: 1 1 auto;
    min-width: 0;
}
body.wx .wx-nav-item:hover {
    background: var(--wx-bg);
    color: var(--wx-ink);
}
body.wx .wx-nav-item.active {
    background: var(--wx-orange-50);
    color: var(--wx-ink);
}
.wx-nav-item.active > i,
.wx-nav-item:hover > i {
    color: var(--wx-orange);
}
.wx-nav-item.active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--wx-gradient);
    box-shadow: 0 0 12px rgba(255, 91, 31, 0.7);
}
.wx-nav-badge {
    flex: none;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 11px;
    background: var(--wx-bg);
    color: var(--wx-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}
.wx-nav-item.active .wx-nav-badge {
    background: #fff;
    color: var(--wx-orange-deep);
}
.wx-sidebar-foot {
    flex: none;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--wx-line);
}

.wx-sidebar-foot-joined {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
/* "Back to website" in the top bar */
body.wx .wx-site-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    margin-right: 6px;
    padding: 0 14px;
    border-radius: 20px;
    color: var(--wx-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
body.wx .wx-site-link:hover {
    background: var(--wx-bg);
    color: var(--wx-ink);
}
.wx-backdrop {
    display: none;
}

/* Main area */

.wx-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: calc(100vh - var(--wx-topbar-h));
    margin-left: var(--wx-sidebar-w);
    /* Ambient glow behind the top of the page */
    background:
        radial-gradient(900px 380px at 100% 0%, rgba(255, 91, 31, 0.07), transparent 65%),
        radial-gradient(600px 300px at 0% 0%, rgba(255, 138, 76, 0.05), transparent 60%);
    background-repeat: no-repeat;
}
.wx-main > section#main-body {
    flex: 1 0 auto;
    padding: 28px 0 40px;
}
/* Bootstrap sizes .container from the window width; here it has to fit the
   space left beside the sidebar instead. */
.wx-main .container {
    width: 100%;
    max-width: 1640px;
    padding-right: 32px;
    padding-left: 32px;
}

.wx-page {
    display: block;
}
.wx-page-aside {
    margin-bottom: 20px;
}
.wx-page-content {
    min-width: 0;
}
/* Notices WHMCS injects above the page (licence or module banners) carry
   their own inline sizes; keep them inside the content column and in step
   with the cards. */
.wx-page-content > div[style] {
    max-width: 100%;
    border-radius: 12px;
    overflow-wrap: anywhere;
}
.wx-page-content > p[style]:last-child {
    margin: 28px 0 0;
    color: var(--wx-muted);
    font-size: 0.8rem;
}

body.wx .master-breadcrumb {
    background: transparent;
}
body.wx .master-breadcrumb .breadcrumb {
    padding: 22px 0 0;
    background: transparent;
    font-size: 0.825rem;
    font-weight: 600;
}
body.wx .master-breadcrumb .breadcrumb-item,
body.wx .master-breadcrumb .breadcrumb-item a {
    color: var(--wx-muted);
}
body.wx .master-breadcrumb .breadcrumb-item.active {
    color: var(--wx-ink);
}
body.wx .master-breadcrumb + section#main-body,
body.wx .master-breadcrumb ~ section#main-body {
    padding-top: 18px;
}

body.wx footer.wx-footer {
    flex: none;
    padding: 20px 0 24px;
    background: transparent;
    border-top: 1px solid var(--wx-line);
    color: var(--wx-muted);
    font-size: 0.825rem;
}
.wx-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
}
.wx-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body.wx .wx-footer a,
body.wx .wx-footer .btn {
    color: var(--wx-muted);
    font-weight: 600;
}
body.wx .wx-footer a:hover,
body.wx .wx-footer .btn:hover {
    color: var(--wx-orange-deep);
}
body.wx .wx-footer .copyright {
    color: var(--wx-muted);
}
.wx-locale-btn {
    padding: 0;
    font-size: inherit;
}

body.wx .verification-banner {
    background: var(--wx-orange-50);
    border-bottom: 1px solid var(--wx-orange-100);
    color: var(--wx-ink);
    font-weight: 500;
}
body.wx .network-issue-alert {
    border-radius: 0;
}

/* 4. Components ----------------------------------------------------------- */

/* Buttons: black is the everyday action, orange is the one key action. */
body.wx .btn {
    border-radius: var(--wx-radius-sm);
    font-family: var(--wx-font);
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
body.wx .btn-lg {
    border-radius: 12px;
}
body.wx .btn-sm,
body.wx .btn-xs {
    border-radius: 8px;
}

body.wx .btn-primary {
    background: var(--wx-ink);
    border-color: var(--wx-ink);
    color: #fff;
}
body.wx .btn-primary:hover,
body.wx .btn-primary:focus,
body.wx .btn-primary:not(:disabled):not(.disabled):active,
body.wx .btn-primary:not(:disabled):not(.disabled).active,
body.wx .show > .btn-primary.dropdown-toggle {
    background: #2a2a30;
    border-color: #2a2a30;
    color: #fff;
    box-shadow: 0 8px 20px -10px rgba(14, 14, 16, 0.6);
}
body.wx .btn-primary.disabled,
body.wx .btn-primary:disabled {
    background: #8b8d94;
    border-color: #8b8d94;
}

body.wx .btn-default,
body.wx .btn-secondary,
body.wx .btn-outline-primary {
    background: #fff;
    border-color: #dcdde2;
    color: var(--wx-ink);
}
body.wx .btn-default:hover,
body.wx .btn-default:focus,
body.wx .btn-secondary:hover,
body.wx .btn-secondary:focus,
body.wx .btn-outline-primary:hover,
body.wx .btn-outline-primary:focus {
    background: #fff;
    border-color: var(--wx-orange);
    color: var(--wx-ink);
    box-shadow: var(--wx-glow-soft);
}

body.wx .btn-link {
    color: var(--wx-orange-deep);
}

body.wx .wx-btn-accent {
    background: var(--wx-gradient);
    border: 0;
    color: var(--wx-ink);
    font-weight: 700;
    box-shadow: var(--wx-glow);
}
body.wx .wx-btn-accent:hover,
body.wx .wx-btn-accent:focus {
    color: var(--wx-ink);
    filter: brightness(1.05);
    box-shadow: 0 14px 32px -10px rgba(255, 91, 31, 0.8);
    transform: translateY(-1px);
}
body.wx .wx-btn-accent:active {
    transform: translateY(0);
}

body.wx .wx-btn-soft {
    background: var(--wx-orange-50);
    border: 1px solid var(--wx-orange-100);
    color: var(--wx-ink);
    font-weight: 700;
}
body.wx .wx-btn-soft:hover,
body.wx .wx-btn-soft:focus {
    background: var(--wx-orange-100);
    color: var(--wx-ink);
}

/* Cards */
body.wx .card,
body.wx .mc-promo-manage,
body.wx .mc-promo-login {
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: var(--wx-card);
    box-shadow: var(--wx-shadow);
}
body.wx .card > .card-header:first-child {
    border-radius: var(--wx-radius) var(--wx-radius) 0 0;
}
body.wx .card > .card-footer:last-child,
body.wx .card > .list-group:last-child {
    border-radius: 0 0 var(--wx-radius) var(--wx-radius);
}
body.wx .card-header {
    padding: 16px 20px;
    background: transparent;
    border-bottom: 1px solid var(--wx-line);
}
body.wx .card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wx-ink);
}
body.wx .card-footer {
    background: transparent;
    border-top: 1px solid var(--wx-line);
}
body.wx [class*="card-accent-"] {
    border-top: 1px solid var(--wx-line);
}

/* Page sidebars (filters, actions) shown inside the content area */
body.wx .sidebar .card-sidebar {
    overflow: hidden;
}
body.wx .sidebar .card-sidebar .card-header {
    padding: 14px 18px;
}
body.wx .sidebar .list-group-item {
    border-color: var(--wx-line);
    color: var(--wx-text);
    font-size: 0.9rem;
    font-weight: 500;
}
body.wx .sidebar a.list-group-item:hover {
    background: var(--wx-bg);
    color: var(--wx-ink);
}
body.wx .sidebar .list-group-item.active,
body.wx .sidebar .list-group-item.active:hover,
body.wx .sidebar .list-group-item.active:focus {
    background: var(--wx-orange-50);
    border-color: var(--wx-line);
    color: var(--wx-ink);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--wx-orange);
}
body.wx .sidebar .list-group-item.active i {
    color: var(--wx-orange-deep);
}

body.wx .list-group-item {
    border-color: var(--wx-line);
}
body.wx a.list-group-item {
    color: var(--wx-text);
}
body.wx .list-group-item.active {
    background: var(--wx-ink);
    border-color: var(--wx-ink);
    color: #fff;
}

/* Forms */
body.wx .form-control,
body.wx .custom-select {
    border-color: #dcdde2;
    border-radius: var(--wx-radius-sm);
    color: var(--wx-text);
    font-family: var(--wx-font);
}
body.wx .form-control:focus,
body.wx .custom-select:focus {
    border-color: var(--wx-orange);
    box-shadow: var(--wx-glow-soft);
}
body.wx .form-control:focus-visible,
body.wx .custom-select:focus-visible,
.wx-search-input:focus-visible,
.wx-hero-input:focus-visible {
    outline: 0; /* these fields show the orange ring instead */
}
body.wx .input-group > .form-control:not(:last-child),
body.wx .input-group > .input-group-prepend > .btn,
body.wx .input-group > .input-group-prepend > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
body.wx .input-group > .form-control:not(:first-child),
body.wx .input-group > .input-group-append > .btn,
body.wx .input-group > .input-group-append > .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
body.wx .input-group-text {
    border-color: #dcdde2;
    border-radius: var(--wx-radius-sm);
    background: var(--wx-bg);
    color: var(--wx-muted);
}
body.wx .form-group > label,
body.wx .col-form-label,
body.wx .form-control-label {
    color: var(--wx-ink);
    font-weight: 600;
}
body.wx .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--wx-orange);
    border-color: var(--wx-orange);
}
body.wx .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--wx-glow-soft);
}

/* Tables */
body.wx .table {
    color: var(--wx-text);
}
body.wx .table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--wx-line);
    color: var(--wx-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
body.wx .table td,
body.wx .table th {
    border-color: var(--wx-line);
    vertical-align: middle;
}
body.wx .table-hover tbody tr:hover {
    background: #fbfbfc;
}
body.wx .dataTables_wrapper .dataTables_info {
    color: var(--wx-muted);
    font-size: 0.85rem;
}

/* Tabs, pagination, alerts, badges */
body.wx .nav-tabs {
    border-bottom-color: var(--wx-line);
}
body.wx .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--wx-muted);
    font-weight: 600;
}
body.wx .nav-tabs .nav-link:hover {
    color: var(--wx-ink);
}
body.wx .nav-tabs .nav-link.active,
body.wx .nav-tabs .nav-item.show .nav-link {
    background: transparent;
    border-bottom-color: var(--wx-orange);
    color: var(--wx-ink);
}

body.wx .page-link {
    border-color: var(--wx-line);
    color: var(--wx-text);
}
body.wx .page-item.active .page-link {
    background: var(--wx-ink);
    border-color: var(--wx-ink);
    color: #fff;
}

body.wx .alert {
    border-radius: 12px;
}
body.wx .badge-info,
body.wx .badge-primary {
    background: var(--wx-ink);
    color: #fff;
}

body.wx .modal-content {
    border: 0;
    border-radius: var(--wx-radius);
    box-shadow: var(--wx-shadow-lift);
}
body.wx .popover {
    border: 1px solid var(--wx-line);
    border-radius: 14px;
    box-shadow: var(--wx-shadow-lift);
    font-family: var(--wx-font);
}
body.wx .progress-bar {
    background-color: var(--wx-orange);
}

/* 5. Dashboard ------------------------------------------------------------ */

.wx-hello {
    margin-bottom: 22px;
}
body.wx .wx-hello-title {
    margin: 0 0 4px;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.wx-hello-name {
    background: var(--wx-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--wx-orange-deep);
}
.wx-hello-sub {
    margin: 0;
    color: var(--wx-muted);
}

.wx-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.wx-dash-main,
.wx-dash-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.wx-card {
    position: relative;
    padding: 24px;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: var(--wx-card);
    box-shadow: var(--wx-shadow);
}
body.wx .wx-card-title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
}
.wx-card-text {
    margin: 0 0 18px;
    color: var(--wx-muted);
    font-size: 0.875rem;
}

/* Stats */
.wx-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
body.wx .wx-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: var(--wx-card);
    box-shadow: var(--wx-shadow);
    color: var(--wx-text);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.wx .wx-stat:hover {
    border-color: var(--wx-orange);
    box-shadow: var(--wx-glow-soft), var(--wx-shadow-lift);
    transform: translateY(-2px);
}
.wx-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--wx-orange-50);
    color: var(--wx-orange-deep);
    font-size: 1.2rem;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.wx-stat:hover .wx-stat-icon {
    background: var(--wx-gradient);
    color: var(--wx-ink);
    box-shadow: var(--wx-glow);
}
.wx-stat-alert .wx-stat-icon {
    background: var(--wx-gradient);
    color: var(--wx-ink);
    box-shadow: var(--wx-glow);
}
.wx-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wx-stat-num {
    color: var(--wx-ink);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.wx-stat-label {
    overflow: hidden;
    color: var(--wx-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Domain search */
.wx-hero {
    overflow: hidden;
    padding: 30px;
    background:
        radial-gradient(520px 220px at 100% 0%, rgba(255, 91, 31, 0.16), transparent 62%),
        radial-gradient(380px 200px at 0% 110%, rgba(255, 138, 76, 0.12), transparent 60%),
        var(--wx-card);
}
body.wx .wx-hero-title {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.wx-hero-sub {
    margin: 0 0 20px;
    color: var(--wx-muted);
    font-size: 0.925rem;
}
.wx-hero-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.wx-hero-field {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}
.wx-hero-field > i {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--wx-muted);
    pointer-events: none;
}
.wx-hero-input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 44px;
    border: 1px solid #dcdde2;
    border-radius: 14px;
    background: #fff;
    color: var(--wx-ink);
    font-family: var(--wx-font);
    font-size: 1rem;
    font-weight: 500;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wx-hero-input:focus {
    outline: none;
    border-color: var(--wx-orange);
    box-shadow: var(--wx-glow-soft), 0 10px 30px -14px rgba(255, 91, 31, 0.55);
}
body.wx .wx-hero-form .btn {
    height: 52px;
    padding: 0 26px;
    border-radius: 14px;
}

/* Home panels */
.wx-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}
.wx-panels:empty {
    display: none;
}
.wx-panels-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
.wx-panels-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}
.wx-panels-col:empty {
    display: none;
}
body.wx .wx-panels .card {
    margin: 0;
    overflow: hidden;
}
body.wx .client-home-cards .card {
    font-size: 0.9rem;
}
body.wx .client-home-cards .card-header {
    padding: 16px 20px;
    background: transparent;
    border-bottom: 1px solid var(--wx-line);
}
body.wx .client-home-cards .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    line-height: 1.3;
}
/* The header button is floated in the stock markup; as a flex item it sits
   at the right and long titles wrap beside it instead of under it. */
body.wx .client-home-cards .card-title > .float-right {
    flex: none;
    order: 2;
    float: none !important;
    margin-left: auto;
}
/* A disabled "View More" footer has nothing to offer; leave it out. */
body.wx .client-home-cards .card-footer:has(> .btn-view-more.disabled) {
    display: none;
}
body.wx .client-home-cards .card-title > i {
    color: var(--wx-orange-deep);
}
/* Twenty-One paints these header buttons white-on-colour; here they are
   plain outlined buttons, so the text colour has to be set back. */
body.wx .client-home-cards .card-header .btn {
    padding: 4px 12px;
    border: 1px solid #dcdde2;
    background: #fff;
    color: var(--wx-ink);
    font-size: 0.8rem;
    font-weight: 600;
}
body.wx .client-home-cards .card-header .btn:hover,
body.wx .client-home-cards .card-header .btn:focus {
    border-color: var(--wx-orange);
    color: var(--wx-ink);
}
body.wx .client-home-cards .card-header .btn i {
    margin-right: 6px;
    color: var(--wx-muted);
    font-size: 0.8em;
}
body.wx .client-home-cards .card-body p {
    margin: 0;
    padding: 18px 20px;
    color: var(--wx-muted);
}
body.wx .client-home-cards .card-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--wx-line);
    font-size: 0.85rem;
    font-weight: 600;
}
body.wx .client-home-cards .list-group {
    max-height: 264px;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0;
}
body.wx .client-home-cards .list-group .list-group-item {
    padding: 12px 20px;
    border: 0;
    border-bottom: 1px solid var(--wx-line);
}
body.wx .client-home-cards .list-group .list-group-item:last-child {
    border-bottom: 0;
}
body.wx .client-home-cards .text-last-updated {
    color: var(--wx-muted);
    font-size: 0.8rem;
}
body.wx .client-home-cards a.list-group-item:hover {
    background: var(--wx-bg);
    color: var(--wx-ink);
}

/* Dark cards */
.wx-card-dark {
    overflow: hidden;
    border-color: var(--wx-ink);
    background:
        radial-gradient(300px 190px at 100% -10%, rgba(255, 91, 31, 0.55), transparent 70%),
        linear-gradient(160deg, var(--wx-ink-2) 0%, var(--wx-ink) 100%);
    box-shadow: 0 18px 40px -22px rgba(255, 91, 31, 0.55), var(--wx-shadow);
    color: #fff;
}
body.wx .wx-card-dark .wx-card-title {
    color: #fff;
}
.wx-card-dark .wx-card-title > i {
    margin-right: 6px;
    color: var(--wx-orange-light);
}
.wx-card-dark .wx-card-text {
    color: rgba(255, 255, 255, 0.72);
}

.wx-pin-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-height: 54px;
    padding: 8px 10px 8px 18px;
    border-radius: 12px;
    background: #fff;
    color: var(--wx-ink);
}
.wx-pin-code {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    font-variant-numeric: tabular-nums;
}
.wx-pin-box-empty .wx-pin-code {
    font-size: 1.2rem;
    letter-spacing: 0.22em;
}
.wx-pin-box-empty {
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.28);
    color: rgba(255, 255, 255, 0.55);
}
.wx-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 91, 31, 0.2);
    color: var(--wx-orange-light);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.wx-pin-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: var(--wx-bg);
    color: var(--wx-ink);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.wx-pin-copy:hover {
    background: var(--wx-orange-50);
    color: var(--wx-orange-deep);
}
.wx-pin-note {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
}
.wx-pin-note-ok {
    color: #7ee2a0;
}
.wx-pin-renew {
    margin: 12px 0 0;
}
.wx-pin-renew-btn {
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--wx-font);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.wx-pin-renew-btn:hover {
    color: var(--wx-orange-light);
}
.wx-pin-renew-btn i {
    margin-right: 4px;
}
.wx-pin-copy.wx-copied {
    background: var(--wx-gradient);
    color: var(--wx-ink);
}

body.wx .wx-help-link {
    display: inline-block;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}
body.wx .wx-help-link:hover {
    color: var(--wx-orange-light);
}
.wx-help-link i {
    margin-left: 4px;
    font-size: 0.8em;
}

.wx-wallet-amount {
    margin: 18px 0 20px;
    color: var(--wx-ink);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.wx-wallet-note {
    margin: 0;
    color: var(--wx-muted);
    font-size: 0.825rem;
    text-align: center;
}

/* 5b. Inner pages ---------------------------------------------------------- */

/* Page heading */
.wx-page-head {
    margin: 0 0 18px;
}
body.wx .wx-page-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.wx-page-tagline {
    margin: 4px 0 0;
    color: var(--wx-muted);
    font-size: 0.925rem;
}

/*
 * Page toolbar.
 *
 * WHMCS gives most pages a second sidebar of filters and actions. Beside the
 * main menu that reads as two sidebars, so for logged-in clients the same
 * panels are laid out as rows of pills above the content. The markup is the
 * stock sidebar include, untouched, so filters, tabs and module actions keep
 * working exactly as WHMCS and modules expect.
 */
.wx-app .wx-page-aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.wx-app .wx-page-aside:empty {
    display: none;
}
.wx-app .wx-page-aside > .sidebar {
    display: contents !important;
}
body.wx.wx-app .wx-page-aside .card-sidebar {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
/* These two panels repeat links that are already in the main menu. */
body.wx.wx-app .wx-page-aside .card-sidebar[menuItemName="Support"],
body.wx.wx-app .wx-page-aside .card-sidebar[menuItemName="Billing"] {
    display: none !important;
}
/* The stock phone version swaps each panel for a dropdown; pills replace it. */
.wx-app .wx-page-aside > .sidebar > .card.d-md-none {
    display: none !important;
}
body.wx.wx-app .wx-page-aside .card-sidebar > .card-header {
    flex: none;
    min-width: 76px;
    padding: 0;
    border: 0;
    background: transparent;
}
body.wx.wx-app .wx-page-aside .card-sidebar .card-title {
    margin: 0;
    color: #8b909b;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.wx-app .wx-page-aside .card-sidebar .card-title > i {
    display: none;
}
.wx-app .wx-page-aside .card-sidebar .card-title .badge {
    float: none !important;
}
.wx-app .wx-page-aside .collapsable-card-body {
    display: flex !important;
    flex: 1 1 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
}
body.wx.wx-app .wx-page-aside .card-sidebar .card-body {
    padding: 0;
    color: var(--wx-muted);
    font-size: 0.875rem;
}
body.wx.wx-app .wx-page-aside .card-sidebar .card-footer {
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
}
/* e.g. "Pay All" on the invoices page: the key action, so it gets the orange */
body.wx.wx-app .wx-page-aside .card-sidebar .card-footer .btn {
    display: inline-block;
    width: auto;
    padding: 7px 18px;
    border: 0;
    background: var(--wx-gradient);
    color: var(--wx-ink);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: var(--wx-glow);
}
body.wx.wx-app .wx-page-aside .card-sidebar .card-footer .btn i {
    margin-right: 4px;
}
body.wx.wx-app .wx-page-aside .list-group {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    border-radius: 0;
}
body.wx.wx-app .wx-page-aside .list-group-item {
    width: auto;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid #dcdde2;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: var(--wx-text);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
body.wx.wx-app .wx-page-aside a.list-group-item:hover,
body.wx.wx-app .wx-page-aside a.list-group-item:focus {
    border-color: var(--wx-orange);
    background: #fff;
    color: var(--wx-ink);
    box-shadow: var(--wx-glow-soft);
}
body.wx.wx-app .wx-page-aside .list-group-item.active,
body.wx.wx-app .wx-page-aside .list-group-item.active:hover,
body.wx.wx-app .wx-page-aside .list-group-item.active:focus {
    border-color: var(--wx-ink);
    background: var(--wx-ink);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}
body.wx.wx-app .wx-page-aside .list-group-item.disabled {
    opacity: 0.5;
}
.wx-app .wx-page-aside .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wx-app .wx-page-aside .sidebar-menu-item-icon-wrapper {
    display: inline-flex;
    width: auto;
    margin: 0;
    color: var(--wx-muted);
    font-size: 0.85em;
}
/* Filter panels use an empty-circle "radio" icon; the pill shape says it already. */
.wx-app .wx-page-aside .sidebar-menu-item-icon-wrapper:has(> .fa-circle, > .fa-dot-circle) {
    display: none;
}
body.wx.wx-app .wx-page-aside .list-group-item.active .sidebar-menu-item-icon-wrapper,
body.wx.wx-app .wx-page-aside .list-group-item.active i {
    color: var(--wx-orange-light);
}
.wx-app .wx-page-aside .sidebar-menu-item-badge .badge,
.wx-app .wx-page-aside .list-group-item > .badge {
    float: none !important;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--wx-bg);
    color: var(--wx-muted);
    font-size: 0.7rem;
    font-weight: 700;
}
.wx-app .wx-page-aside .list-group-item.active .badge {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* List tables: a search box, a soft header strip, and each row as a card */
body.wx .table-container {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
/* A one-column grid lets the search box, table and count be reordered while
   the table still shrinks to the page (so WHMCS can fold columns on phones). */
body.wx .dataTables_wrapper .listtable {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
body.wx .dataTables_wrapper .dataTables_filter {
    order: 1;
    float: none;
    margin: 0 0 6px;
    padding: 0;
    text-align: left;
}
body.wx .dataTables_wrapper .dataTables_filter label {
    display: block;
    margin: 0;
}
body.wx .dataTables_wrapper .dataTables_filter label .form-control {
    width: 100%;
    max-width: 460px;
    height: 46px;
    margin: 0;
    padding: 0 16px 0 44px !important;
    border-radius: 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236a707c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center;
    font-size: 0.925rem;
}
body.wx .dataTables_wrapper table.table-list {
    order: 2;
    clear: both;
    margin: 0 !important;
    border: 0;
    border-collapse: separate !important;
    border-spacing: 0 10px;
    border-radius: 0;
    background: transparent;
}
body.wx .dataTables_wrapper .dataTables_info {
    order: 3;
    float: none;
    padding: 2px 4px 0;
    color: var(--wx-muted);
    font-size: 0.85rem;
}
body.wx .dataTables_wrapper table.table-list thead th {
    padding: 14px 18px;
    border: 0;
    border-radius: 0;
    background-color: #eeeff2;
    color: var(--wx-muted);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}
body.wx .dataTables_wrapper table.table-list thead th.sorting_asc,
body.wx .dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: #eeeff2;
    color: var(--wx-ink);
}
body.wx .dataTables_wrapper table.table-list thead th:first-child {
    border-radius: 12px 0 0 12px;
}
body.wx .dataTables_wrapper table.table-list thead th:last-child,
body.wx .dataTables_wrapper table.table-list thead th:nth-last-child(1 of :not([style*="display: none"])) {
    border-radius: 0 12px 12px 0;
}
body.wx table.table-list tbody td {
    padding: 18px;
    border: 0;
    border-top: 1px solid #e3e4e8;
    border-bottom: 1px solid #e3e4e8;
    border-radius: 0;
    background-color: #fff;
    color: var(--wx-text);
    font-size: 0.9rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}
body.wx table.table-list tbody td:first-child {
    border-left: 1px solid #e3e4e8;
    border-radius: 12px 0 0 12px;
}
body.wx table.table-list tbody td:last-child,
body.wx table.table-list tbody td:nth-last-child(1 of :not([style*="display: none"])) {
    border-right: 1px solid #e3e4e8;
    border-radius: 0 12px 12px 0;
}
body.wx table.table-list tbody td:only-child {
    border-radius: 12px;
}
body.wx .table-list > tbody > tr:hover > td {
    border-color: rgba(255, 91, 31, 0.6);
    background-color: #fff;
}
body.wx table.table-list td.dataTables_empty,
body.wx .table-list > tbody > tr:hover > td.dataTables_empty {
    padding: 44px 16px;
    border-color: #e3e4e8;
    color: var(--wx-muted);
    text-align: center;
    cursor: default;
}
/* Cell contents */
body.wx .wx-cell-title {
    display: block;
    color: var(--wx-ink);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
}
body.wx a.wx-cell-title:hover {
    color: var(--wx-orange-deep);
}
body.wx .wx-cell-sub {
    display: block;
    margin-top: 2px;
    color: var(--wx-muted);
    font-size: 0.8rem;
    font-weight: 500;
}
.wx-cell-ico {
    margin-right: 8px;
    color: #9aa0ab;
}
.wx-cell-money {
    color: var(--wx-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body.wx table.table-list th.wx-col-ico,
body.wx table.table-list td.wx-col-ico,
body.wx table.table-list th.width-fixed-20,
body.wx table.table-list td:has(> input[type="checkbox"]:only-child) {
    width: 1% !important;
    padding-right: 0;
    padding-left: 16px;
    white-space: nowrap;
}
body.wx table.table-list td.wx-cell-action {
    text-align: right;
    white-space: nowrap;
}
body.wx .wx-row-link {
    color: var(--wx-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}
body.wx .wx-row-link:hover {
    color: var(--wx-orange-deep);
}
.wx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.wx-chip {
    padding: 2px 10px;
    border: 1px solid #e3e4e8;
    border-radius: 999px;
    background: #f6f6f8;
    color: var(--wx-text);
    font-size: 0.75rem;
    font-weight: 600;
}
body.wx .ticket-subject.unread {
    color: var(--wx-orange-deep);
}
body.wx .wx-bulk-actions {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
body.wx .wx-bulk-actions .btn {
    flex: none;
    padding: 7px 12px;
    white-space: nowrap;
}
body.wx .wx-bulk-actions .btn i {
    margin-right: 6px;
}
body.wx .dataTables_wrapper .dataTables_paginate {
    float: right;
    padding: 12px 0 0;
}
body.wx .dataTables_wrapper .dataTables_paginate .pagination {
    margin: 0;
}
body.wx .dataTables_wrapper .dataTables_length {
    padding: 12px 4px 0;
    color: var(--wx-muted);
    font-size: 0.85rem;
}
body.wx .dataTables_wrapper .dataTables_length label {
    margin: 0;
    font-weight: 500;
}
body.wx .dataTables_wrapper .dataTables_length select {
    display: inline-block;
    width: auto;
    margin: 0 4px;
}
body.wx .page-link {
    font-size: 0.85rem;
    font-weight: 600;
}
body.wx .page-item:first-child .page-link {
    border-radius: 10px 0 0 10px;
}
body.wx .page-item:last-child .page-link {
    border-radius: 0 10px 10px 0;
}
body.wx .page-item.disabled .page-link {
    color: #b3b7bf;
}

/* Page heading with its main action on the right */
.wx-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 20px;
}
body.wx .wx-page-head .btn {
    flex: none;
    padding: 9px 18px;
}
body.wx .wx-page-head .btn i {
    margin-right: 8px;
}

/* Status pills */
body.wx .label.status {
    display: inline-block;
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
body.wx .label.status-active,
body.wx .label.status-open,
body.wx .label.status-completed,
body.wx .label.status-paid {
    background: #e6f6ec;
    color: #146c37;
}
body.wx .label.status-pending,
body.wx .label.status-unpaid,
body.wx .label.status-overdue,
body.wx .label.status-collections,
body.wx .label.status-fraud {
    background: #fdecec;
    color: #b42318;
}
body.wx .label.status-suspended,
body.wx .label.status-pending-transfer,
body.wx .label.status-pending-registration,
body.wx .label.status-onhold,
body.wx .label.status-inprogress,
body.wx .label.status-grace,
body.wx .label.status-redemption {
    background: #fff4dc;
    color: #8a5a00;
}
body.wx .label.status-customer-reply {
    background: var(--wx-orange-100);
    color: #a83307;
}
body.wx .label.status-answered {
    background: var(--wx-ink);
    color: #fff;
}
body.wx .label.status-cancelled,
body.wx .label.status-terminated,
body.wx .label.status-closed,
body.wx .label.status-expired,
body.wx .label.status-refunded,
body.wx .label.status-draft,
body.wx .label.status-transferred-away {
    background: #eeeff2;
    color: #555b66;
}

/* Webix Cloud (Contabo) server page ---------------------------------------- */

/* The module's template carries its own styles with an indigo accent. These
   overrides only recolour it to the Webixhost orange and keep its sticky tab
   bar clear of the top bar; the module files themselves are not changed. */
body.wx .wxc {
    --wx-accent: #d4420b;
    --wx-accent2: #e8480f;
    font-family: var(--wx-font);
}
body.wx .wxc .wxc-hero:before {
    background: var(--wx-gradient);
}
body.wx .wxc .wxc-tabs {
    top: calc(var(--wx-topbar-h) + 8px);
}
body.wx .wxc .wxc-btn-primary,
body.wx .wxc .wxc-tabs a.active {
    box-shadow: var(--wx-glow);
}
body.wx .wxc .wxc-card-h h4 .wxc-hi {
    background: var(--wx-orange-50);
}
body.wx .wxc .wxc-input:focus {
    box-shadow: var(--wx-glow-soft);
}
body.wx .wxc .wxc-copy:hover {
    border-color: var(--wx-orange-100);
}
/* The page has its own tab bar, so the same links as a pill row would be a
   second menu. */
body.wx.wx-app .wx-page-aside .card-sidebar[menuItemName="Webix Server Management"] {
    display: none !important;
}

/* 5c. Order pages (cart, domain search, checkout) --------------------------- */

/*
 * The stock "standard_cart" order form is restyled from here; its template
 * files are untouched. Its own category sidebar becomes pill rows above the
 * content, the same way as on the inner pages.
 */
body.wx #order-standard_cart > .row {
    display: block;
    margin: 0;
}
body.wx #order-standard_cart .cart-sidebar,
body.wx #order-standard_cart .cart-body {
    float: none;
    width: 100%;
    padding: 0;
}
body.wx #order-standard_cart .cart-sidebar {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 22px;
}
/* The stock phone version is a dropdown of the same links. */
body.wx #order-standard_cart .sidebar-collapsed {
    display: none !important;
}
body.wx #order-standard_cart .cart-sidebar .card-sidebar {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.wx #order-standard_cart .cart-sidebar .card-header {
    flex: none;
    min-width: 92px;
    padding: 0;
    border: 0;
    background: transparent;
}
body.wx #order-standard_cart .cart-sidebar h3 {
    margin: 0;
    color: #8b909b;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.wx #order-standard_cart .cart-sidebar h3 > i {
    display: none;
}
body.wx #order-standard_cart .cart-sidebar .list-group {
    display: flex !important;
    flex: 1 1 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    border-radius: 0;
}
body.wx #order-standard_cart .cart-sidebar .card-body {
    flex: 1 1 0;
    padding: 0;
}
body.wx #order-standard_cart .cart-sidebar .list-group-item {
    width: auto;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid #dcdde2;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    color: var(--wx-text);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
body.wx #order-standard_cart .cart-sidebar .list-group-item i {
    margin-right: 4px;
    color: var(--wx-muted);
    font-size: 0.85em;
}
body.wx #order-standard_cart .cart-sidebar a.list-group-item:hover {
    border-color: var(--wx-orange);
    color: var(--wx-ink);
    box-shadow: var(--wx-glow-soft);
}
body.wx #order-standard_cart .cart-sidebar .list-group-item.active,
body.wx #order-standard_cart .cart-sidebar .list-group-item.active:hover {
    border-color: var(--wx-ink);
    background: var(--wx-ink);
    color: #fff;
    box-shadow: none;
}
body.wx #order-standard_cart .cart-sidebar .list-group-item.active i {
    color: var(--wx-orange-light);
}

/* Headings and text */
body.wx #order-standard_cart {
    font-family: var(--wx-font);
}
body.wx #order-standard_cart .header-lined {
    margin: 0 0 16px;
    border: 0;
}
body.wx #order-standard_cart .header-lined h1,
body.wx #order-standard_cart h1.font-size-36 {
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
body.wx #order-standard_cart .header-lined p,
body.wx #order-standard_cart .cart-body > p {
    color: var(--wx-muted);
}
body.wx #order-standard_cart .sub-heading {
    border-top-color: var(--wx-line);
}
body.wx #order-standard_cart .sub-heading span,
body.wx #order-standard_cart .sub-heading-borderless span {
    background: var(--wx-bg);
    color: var(--wx-ink);
    font-weight: 700;
}
body.wx #order-standard_cart .field,
body.wx #order-standard_cart .form-control {
    color: var(--wx-text);
}

/* Domain search */
body.wx .domain-checker-container {
    margin: 0 0 20px;
    padding: 0;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background:
        radial-gradient(560px 240px at 100% 0%, rgba(255, 91, 31, 0.18), transparent 62%),
        radial-gradient(420px 220px at 0% 110%, rgba(255, 138, 76, 0.14), transparent 60%),
        #fff;
    box-shadow: var(--wx-shadow);
}
body.wx .domain-checker-bg {
    padding: 44px 0;
    background-image: none;
}
body.wx .domain-checker-container .input-group-box {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
body.wx .domain-checker-container .input-group-box .form-control {
    height: 54px !important;
    padding: 0 18px;
    border: 1px solid #dcdde2;
    border-radius: 14px 0 0 14px;
    font-size: 1rem;
}
body.wx .domain-checker-container .input-group-box .btn {
    height: 54px !important;
    padding: 0 28px;
    border: 0;
    border-radius: 0 14px 14px 0;
    background: var(--wx-gradient);
    color: var(--wx-ink);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: var(--wx-glow);
}
body.wx .domain-checker-container .input-group-box .btn:hover {
    filter: brightness(1.05);
}
body.wx .domain-checker-result-headline,
body.wx #order-standard_cart .domain-checker-result-headline p {
    font-size: 1.05rem;
}
body.wx #order-standard_cart .domain-checker-available,
body.wx .domain-checker-available {
    color: #146c37;
}
body.wx #order-standard_cart .domain-checker-unavailable,
body.wx #order-standard_cart .domain-checker-invalid,
body.wx .domain-checker-unavailable,
body.wx .domain-checker-invalid {
    color: #b42318;
}
body.wx .domain-promo-box {
    padding: 22px;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: #fff;
    box-shadow: var(--wx-shadow);
}
body.wx .domain-promo-box h3 {
    font-size: 1.1rem;
    font-weight: 700;
}
body.wx .domain-promo-box .text-warning,
body.wx .domain-promo-box .text-primary,
body.wx .domain-promo-box .small {
    color: var(--wx-muted) !important;
}
body.wx .domain-promo-box .btn-warning,
body.wx .domain-promo-box .btn-primary {
    border-color: var(--wx-ink);
    background: var(--wx-ink);
    color: #fff;
}
body.wx .domain-promo-box > .float-right,
body.wx .domain-promo-box > .pull-right {
    color: var(--wx-orange-100);
}
body.wx .suggested-domains .card-header,
body.wx .suggested-domains .panel-heading {
    border-bottom: 1px solid var(--wx-line);
}
body.wx .suggested-domains .btn:not(.domain-contact-support),
body.wx .spotlight-tld .btn:not(.domain-contact-support) {
    background-color: var(--wx-ink);
    color: #fff;
}
body.wx .domain-pricing .tld-pricing-header .col-xs-2,
body.wx .domain-pricing .tld-pricing-header .col-sm-2,
body.wx .domain-pricing .tld-pricing-header div {
    border-bottom-color: var(--wx-orange-100);
}
body.wx .domain-pricing .tld-pricing-header div:nth-child(odd) {
    border-color: var(--wx-orange);
}
body.wx .domain-pricing .tld-row.highlighted {
    background: var(--wx-orange-50);
}

/* Product cards */
body.wx #order-standard_cart .products .product {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: #fff;
    box-shadow: var(--wx-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
body.wx #order-standard_cart .products .product:hover {
    border-color: var(--wx-orange);
    box-shadow: var(--wx-glow-soft), var(--wx-shadow-lift);
    transform: translateY(-2px);
}
body.wx #order-standard_cart .products .product header {
    padding: 18px 22px;
    border-radius: 0;
    border-bottom: 1px solid var(--wx-line);
    background: transparent;
}
body.wx #order-standard_cart .products .product header span {
    color: var(--wx-ink);
    font-size: 1.1rem;
    font-weight: 700;
}
body.wx #order-standard_cart .products .product div.product-desc {
    padding: 18px 22px;
    color: var(--wx-muted);
}
body.wx #order-standard_cart .products .product footer {
    padding: 18px 22px;
}
body.wx #order-standard_cart .products .product div.product-pricing span.price {
    color: var(--wx-ink);
    font-weight: 800;
}
body.wx #order-standard_cart .btn-order-now,
body.wx #order-standard_cart .products .product .btn-success {
    border: 0;
    background: var(--wx-gradient);
    color: var(--wx-ink);
    font-weight: 700;
    box-shadow: var(--wx-glow);
}

/* Cart and order summary */
body.wx #order-standard_cart .view-cart-items-header {
    padding: 12px 18px;
    border-radius: 12px;
    background-color: #eeeff2;
    color: var(--wx-muted);
    font-size: 0.85rem;
    font-weight: 600;
}
body.wx #order-standard_cart .view-cart-items {
    margin: 10px 0 20px;
    border: 1px solid #e3e4e8;
    border-radius: 12px;
    background: #fff;
}
body.wx #order-standard_cart .view-cart-items .item {
    padding: 16px 18px;
    border-radius: 12px;
    background: transparent;
}
body.wx #order-standard_cart .view-cart-items .item-title {
    color: var(--wx-ink);
    font-weight: 700;
}
body.wx #order-standard_cart .view-cart-items .item-domain {
    color: var(--wx-muted);
}
body.wx #order-standard_cart .view-cart-items .view-cart-empty {
    padding: 34px 16px;
    color: var(--wx-muted);
}
body.wx #order-standard_cart .empty-cart .btn {
    background-color: var(--wx-ink);
    color: #fff;
}
body.wx #order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 1px solid var(--wx-line);
}
body.wx #order-standard_cart .view-cart-tabs .tab-content {
    padding: 18px;
    border: 1px solid var(--wx-line);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: #fff;
}
body.wx #order-standard_cart .order-summary {
    overflow: hidden;
    border: 1px solid var(--wx-ink);
    border-radius: var(--wx-radius);
    background:
        radial-gradient(300px 170px at 100% -10%, rgba(255, 91, 31, 0.55), transparent 70%),
        linear-gradient(160deg, var(--wx-ink-2) 0%, var(--wx-ink) 100%);
    box-shadow: 0 18px 40px -22px rgba(255, 91, 31, 0.55), var(--wx-shadow);
}
body.wx #order-standard_cart .order-summary h2 {
    padding: 20px 22px 14px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    text-align: left;
}
body.wx #order-standard_cart .summary-container {
    margin: 0;
    padding: 4px 22px 22px;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
}
body.wx #order-standard_cart .order-summary .subtotal,
body.wx #order-standard_cart .order-summary .bordered-totals {
    border-color: rgba(255, 255, 255, 0.16);
}
body.wx #order-standard_cart .order-summary .recurring-charges,
body.wx #order-standard_cart .order-summary .product-name,
body.wx #order-standard_cart .order-summary .product-group {
    color: rgba(255, 255, 255, 0.72);
}
body.wx #order-standard_cart .order-summary .total-due-today .amt,
body.wx #order-standard_cart .order-summary .total-due-today span {
    color: #fff;
}
body.wx #order-standard_cart .order-summary .total-due-today .amt {
    font-weight: 800;
}
body.wx #order-standard_cart .order-summary .btn-continue-shopping,
body.wx #order-standard_cart .order-summary a {
    color: rgba(255, 255, 255, 0.8);
}
body.wx #order-standard_cart .btn-checkout,
body.wx #order-standard_cart #btnCompleteOrder,
body.wx #order-standard_cart #btnCompleteProductConfig {
    border: 0;
    border-radius: 12px;
    background: var(--wx-gradient);
    color: var(--wx-ink);
    font-weight: 700;
    box-shadow: var(--wx-glow);
}
body.wx #order-standard_cart .btn-checkout.disabled {
    opacity: 0.55;
    box-shadow: none;
}
body.wx #order-standard_cart .view-cart-gateway-checkout,
body.wx #order-standard_cart .cc-input-container,
body.wx #order-standard_cart .account-select-container div.account {
    border: 1px solid var(--wx-line);
    border-radius: 12px;
    background: #fff;
}
/* The tick boxes are a blue image; shift it to the brand orange. */
body.wx #order-standard_cart .icheckbox_square-blue,
body.wx #order-standard_cart .iradio_square-blue {
    filter: hue-rotate(172deg) saturate(1.5);
}
body.wx #order-standard_cart .label-info,
body.wx #order-standard_cart .badge-info {
    background: var(--wx-ink);
    color: #fff;
}
body.wx #order-standard_cart .panel-addon {
    overflow: hidden;
    border-radius: 12px;
}
body.wx #order-standard_cart .panel-addon .panel-add,
body.wx #order-standard_cart .panel-addon-selected .panel-add {
    background-color: var(--wx-ink);
    color: #fff;
}
body.wx #order-standard_cart .panel-addon-selected {
    border-color: var(--wx-orange);
}

@media (max-width: 767.98px) {
    body.wx #order-standard_cart .cart-sidebar .card-sidebar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    body.wx #order-standard_cart .cart-sidebar .card-sidebar.d-none {
        display: flex !important;
    }
    body.wx #order-standard_cart .cart-sidebar .list-group {
        flex: none;
        flex-wrap: nowrap;
        max-width: 100%;
        padding: 2px 0 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    body.wx #order-standard_cart .cart-sidebar {
        min-width: 0;
        overflow: hidden;
    }
    body.wx .domain-checker-bg {
        padding: 24px 0;
    }
}

/* 5d. Single-page order (js/wx-onepage.js) ---------------------------------- */

.wx-order-busy {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(246, 246, 248, 0.86);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.wx-order-busy-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border: 1px solid var(--wx-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--wx-shadow-lift);
    color: var(--wx-ink);
    font-weight: 700;
}
.wx-order-busy-box i {
    color: var(--wx-orange);
    font-size: 1.2rem;
}

.wx-op-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.wx-op-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-width: 0;
    counter-reset: wxstep;
}
/* Steps number themselves; sections WHMCS is hiding are not counted. */
.wx-op-step::before {
    counter-increment: wxstep;
    content: counter(wxstep);
}
.wx-op-plan:empty {
    display: none;
}
body.wx #order-standard_cart .wx-op-section,
body.wx #order-standard_cart .wx-op-card {
    border: 1px solid var(--wx-line);
    border-radius: var(--wx-radius);
    background: #fff;
    box-shadow: var(--wx-shadow);
}
body.wx #order-standard_cart .wx-op-section {
    padding: 0 24px 24px;
}
body.wx #order-standard_cart .wx-op-card {
    margin: 0 0 20px;
    overflow: hidden;
}
/* The form itself is only a stack of boxes */
body.wx #order-standard_cart .wx-op-form {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
/* Banner heading shared by "Your plan" and every section box */
body.wx #order-standard_cart .wx-op-card-head,
body.wx #order-standard_cart .wx-op-section > .wx-op-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 24px;
    border-bottom: 1px solid var(--wx-orange-100);
    background: linear-gradient(90deg, var(--wx-orange-50) 0%, #fff 85%);
}
body.wx #order-standard_cart .wx-op-section > .wx-op-title {
    margin: 0 -24px 22px;
    border-radius: var(--wx-radius) var(--wx-radius) 0 0;
}
body.wx #order-standard_cart .wx-op-card-body {
    padding: 22px 24px 24px;
}
body.wx #order-standard_cart .wx-op-card-body > :last-child {
    margin-bottom: 0;
}
body.wx #order-standard_cart .wx-op-card-head .sub-heading,
body.wx #order-standard_cart .wx-op-card-head .sub-heading-borderless {
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1.3;
    text-align: left;
}
body.wx #order-standard_cart .wx-op-card-head .sub-heading span,
body.wx #order-standard_cart .wx-op-card-head .sub-heading-borderless span {
    position: static;
    padding: 0;
    background: transparent;
    color: var(--wx-ink);
    font-size: 1.1rem;
    font-weight: 800;
}
body.wx #order-standard_cart .wx-op-title {
    font-size: 1.1rem;
    font-weight: 800;
}
.wx-op-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--wx-gradient);
    box-shadow: var(--wx-glow);
    color: var(--wx-ink);
    font-size: 0.85rem;
    font-weight: 800;
}
/* Section headings inside "Your plan" (Configure Server, Configurable Options) */
body.wx #order-standard_cart .wx-op-section .sub-heading {
    height: auto;
    margin: 26px 0 14px;
    border-top: 0;
    text-align: left;
}
body.wx #order-standard_cart .wx-op-section .sub-heading span {
    position: static;
    padding: 0;
    background: transparent;
    color: var(--wx-ink);
    font-size: 1rem;
    font-weight: 800;
}
/* "Already registered?" / "Create a new account" switch above the form */
body.wx #order-standard_cart .already-registered {
    float: none;
    margin: 0 0 14px;
    padding: 0;
}
body.wx #order-standard_cart .already-registered .btn {
    border: 1px solid #dcdde2;
    background: #fff;
    color: var(--wx-ink);
    font-size: 0.875rem;
    font-weight: 700;
}
body.wx #order-standard_cart .already-registered .btn:hover {
    border-color: var(--wx-orange);
    box-shadow: var(--wx-glow-soft);
}
body.wx #order-standard_cart .wx-op-card .field,
body.wx #order-standard_cart .wx-op-card .form-control {
    height: 44px;
}
body.wx #order-standard_cart .wx-op-card textarea.form-control {
    height: auto;
}
body.wx #order-standard_cart .wx-op-card .field-icon {
    top: 0;
    height: 44px;
    line-height: 44px;
}
body.wx #order-standard_cart .wx-op-section .product-info {
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--wx-orange-100);
    border-radius: 12px;
    background: var(--wx-orange-50);
}
body.wx #order-standard_cart .wx-op-section .product-info .product-title {
    margin: 0 0 2px;
    color: var(--wx-ink);
    font-size: 1.05rem;
    font-weight: 800;
}
body.wx #order-standard_cart .wx-op-section .product-info p:last-child {
    margin: 0;
    color: var(--wx-text);
    font-size: 0.875rem;
}
body.wx #order-standard_cart .wx-op-section .field-container {
    margin: 0;
}
body.wx #order-standard_cart .wx-op-section label {
    color: var(--wx-ink);
    font-size: 0.85rem;
    font-weight: 600;
}
body.wx #order-standard_cart .wx-op-section .form-control,
body.wx #order-standard_cart .wx-op-section .custom-select {
    height: 44px;
}
body.wx #order-standard_cart .wx-op-section select.select-inline {
    width: 100%;
    max-width: 360px;
}
body.wx #order-standard_cart .wx-op-section .alert:last-child {
    margin-bottom: 0;
}
body.wx #order-standard_cart .wx-op-form #btnCompleteOrder {
    min-width: 260px;
    padding: 14px 28px;
    font-size: 1.05rem;
}
body.wx #order-standard_cart #btnCompleteOrder.wx-op-working {
    opacity: 0.7;
    pointer-events: none;
}
body.wx #order-standard_cart .wx-op-hint {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--wx-orange-100);
    border-radius: 12px;
    background: var(--wx-orange-50);
    color: var(--wx-text);
    font-size: 0.875rem;
}
body.wx #order-standard_cart .wx-op-hint i {
    margin-right: 4px;
    color: var(--wx-orange-deep);
}
.wx-op-summary .order-summary {
    position: relative;
}
body.wx #order-standard_cart .wx-op-summary #orderSummaryLoader {
    position: absolute;
    top: 20px;
    right: 22px;
    color: var(--wx-orange-light);
}
body.wx #order-standard_cart .wx-op-summary .summary-container {
    min-height: 80px;
}
body.wx #order-standard_cart .wx-op-editcart {
    display: block;
    margin-top: 12px;
    color: var(--wx-muted);
    font-size: 0.825rem;
    font-weight: 600;
    text-align: center;
}
body.wx #order-standard_cart .wx-op-editcart:hover {
    color: var(--wx-orange-deep);
}
@media (min-width: 1200px) {
    .wx-op-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
    .wx-op-side {
        position: sticky;
        top: calc(var(--wx-topbar-h) + 20px);
    }
}
@media (max-width: 767.98px) {
    body.wx #order-standard_cart .wx-op-section {
        padding: 0 18px 18px;
    }
    body.wx #order-standard_cart .wx-op-section > .wx-op-title {
        margin: 0 -18px 18px;
        padding: 14px 18px;
    }
    body.wx #order-standard_cart .wx-op-card-head {
        padding: 14px 18px;
    }
    body.wx #order-standard_cart .wx-op-card-body {
        padding: 18px;
    }
    body.wx #order-standard_cart .wx-op-form #btnCompleteOrder {
        width: 100%;
        min-width: 0;
    }
}

/* 6. Guest pages ---------------------------------------------------------- */

.wx-guest .wx-main {
    margin-left: 0;
}
.wx-guest .wx-sidebar {
    display: none;
}
.wx-guest .wx-brand {
    width: auto;
    margin-right: 28px;
}
.wx-guest .wx-main .container {
    max-width: 1200px;
}
body.wx .login-form .card {
    box-shadow: var(--wx-shadow-lift);
}
body.wx .home-domain-search {
    background:
        radial-gradient(620px 240px at 85% 0%, rgba(255, 91, 31, 0.14), transparent 62%),
        #fff !important;
    border-bottom: 1px solid var(--wx-line);
}

/* 7. Screen sizes --------------------------------------------------------- */

/* Wide screens: dashboard side column */
@media (min-width: 1280px) {
    .wx-dash-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}
.wx-guest .wx-page-split {
    display: block;
}
@media (min-width: 992px) {
    .wx-guest .wx-page-split {
        display: grid;
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
}

/* Below wide: side cards sit under the main column, as many per row as fit */
@media (max-width: 1279.98px) {
    .wx-dash-side {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        align-items: stretch;
    }
}
@media (max-width: 1639.98px) {
    .wx-app .wx-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .wx-app .wx-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Tablet and phone: the sidebar becomes a slide-in drawer */
@media (max-width: 991.98px) {
    .wx-burger {
        display: inline-flex;
    }
    .wx-topbar {
        padding-right: 14px;
    }
    .wx-brand,
    .wx-guest .wx-brand {
        width: auto;
        margin-right: 0;
        padding-left: 12px;
    }
    .wx-brand-img {
        max-height: 28px;
    }
    .wx-topnav,
    .wx-account-name,
    .wx-site-link,
    .wx-btn-login {
        display: none;
    }
    .wx-account-btn {
        padding: 0 4px;
    }

    .wx-main {
        margin-left: 0;
    }
    .wx-sidebar,
    .wx-guest .wx-sidebar {
        top: 0;
        z-index: 1045;
        display: flex;
        width: min(86vw, 300px);
        border-right: 0;
        box-shadow: var(--wx-shadow-lift);
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0.25s ease;
    }
    .wx-menu-open .wx-sidebar {
        transform: none;
        visibility: visible;
    }
    .wx-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: block;
        background: rgba(14, 14, 16, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    .wx-menu-open .wx-backdrop {
        opacity: 1;
        visibility: visible;
    }
    body.wx-menu-open {
        overflow: hidden;
    }
    .wx-kbd {
        display: none;
    }
    .wx-search-input {
        padding-right: 14px;
    }
    .wx-nav-item.active::before {
        left: -14px;
    }

    .wx-main .container {
        padding-right: 16px;
        padding-left: 16px;
    }
    .wx-main > section#main-body {
        padding: 20px 0 32px;
    }
}

@media (max-width: 767.98px) {
    /* Page toolbar: pills scroll sideways instead of stacking */
    body.wx.wx-app .wx-page-aside .card-sidebar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .wx-app .wx-page-aside .collapsable-card-body {
        flex: none;
        max-width: 100%;
    }
    .wx-app .wx-page-aside {
        min-width: 0;
        overflow: hidden;
    }
    body.wx.wx-app .wx-page-aside .list-group {
        flex-wrap: nowrap;
        margin: 0;
        padding: 2px 0 6px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    body.wx.wx-app .wx-page-aside .list-group::-webkit-scrollbar {
        display: none;
    }
    body.wx .wx-page-title {
        font-size: 1.3rem;
    }
    body.wx .dataTables_wrapper .dataTables_filter label .form-control {
        max-width: none;
    }
    body.wx .dataTables_wrapper .dataTables_paginate,
    body.wx .dataTables_wrapper .dataTables_length {
        float: none;
        width: auto;
        text-align: center;
    }
    body.wx .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center;
    }
    /* Phones: each row becomes a stacked card, no sideways scrolling */
    body.wx .dataTables_wrapper table.table-list,
    body.wx .dataTables_wrapper table.table-list tbody {
        display: block;
        width: 100% !important;
    }
    body.wx .dataTables_wrapper table.table-list thead {
        display: none;
    }
    body.wx .dataTables_wrapper table.table-list tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
        margin: 10px 0 0;
        padding: 16px;
        border: 1px solid #e3e4e8;
        border-radius: 14px;
        background: #fff;
    }
    body.wx .dataTables_wrapper table.table-list tbody td,
    body.wx .dataTables_wrapper table.table-list tbody td:first-child,
    body.wx .dataTables_wrapper table.table-list tbody td:last-child {
        display: block;
        width: auto !important;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    body.wx .dataTables_wrapper table.table-list tbody td:has(> .wx-cell-title) {
        flex: 1 1 60%;
        min-width: 0;
    }
    body.wx .dataTables_wrapper table.table-list tbody td.wx-col-ico:empty {
        display: none;
    }
    body.wx .dataTables_wrapper table.table-list tbody td.wx-cell-action {
        flex: 1 1 100%;
        padding-top: 10px;
        border-top: 1px solid var(--wx-line);
        text-align: left;
    }
    body.wx .dataTables_wrapper table.table-list tbody td.dataTables_empty {
        flex: 1 1 100%;
        padding: 20px 0;
    }
    .wx-panels-cols {
        grid-template-columns: minmax(0, 1fr);
    }
    .wx-dash-grid,
    .wx-dash-main,
    .wx-dash-side,
    .wx-panels,
    .wx-panels-cols,
    .wx-panels-col {
        gap: 16px;
    }
    .wx-stats {
        gap: 12px;
    }
    body.wx .wx-stat {
        padding: 14px;
        gap: 10px;
    }
    .wx-stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 1.05rem;
    }
    .wx-stat-num {
        font-size: 1.35rem;
    }
    .wx-stat-label {
        line-height: 1.25;
        white-space: normal;
    }
    .wx-card,
    .wx-hero {
        padding: 20px;
    }
    body.wx .wx-hello-title {
        font-size: 1.4rem;
    }
    body.wx .wx-hero-form .btn {
        flex: 1 1 0;
    }
    .wx-hero-field {
        flex-basis: 100%;
    }
    .wx-footer-row {
        flex-direction: column;
        align-items: flex-start;
    }
    /* Comfortable tap targets */
    body.wx .btn:not(.btn-sm):not(.btn-xs) {
        min-height: 44px;
    }
    body.wx .wx-nav-item {
        min-height: 46px;
    }
}

@media (max-width: 359.98px) {
    .wx-app .wx-stats {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.wx *,
    body.wx *::before,
    body.wx *::after {
        transition: none !important;
    }
}