/* Vexalhosting client theme, dark magenta/cyan Geist */

@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Geist";
    src: url("../fonts/Geist-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;

    --white: #fff;

    --neutral-50: #f2f2f5;
    --neutral-100: #e4e4ea;
    --neutral-200: #c4c4cd;
    --neutral-300: #a8a8b3;
    --neutral-400: #8a8a97;
    --neutral-500: #6c6c79;
    --neutral-600: #4a4a56;
    --neutral-700: #2e2e38;
    --neutral-800: #1a1a21;
    --neutral-900: #0e0e13;
    --neutral-950: #050508;

    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    --primary: #dd1af0;
    --primary-lifted: #e12afb;
    --primary-accented: #f158fc;
    /* darker fill, white text */
    --primary-fill: #bd14d0;
    --primary-fill-lifted: #cd17e2;

    --secondary: #38bdf8;
    --secondary-lifted: #77d4ff;
    --secondary-accented: #a6e4ff;

    --success: #22c55e;
    --success-lifted: #4ade80;
    /* solid fill, lifted greens fail contrast on white text */
    --success-solid: #15803d;
    --success-solid-hover: #166534;
    --success-accented: #86efac;

    --info: #38bdf8;
    --info-lifted: #77d4ff;
    --info-accented: #a6e4ff;

    --notice: #a855f7;
    --notice-lifted: #c084fc;
    --notice-accented: #d8b4fe;

    --warning: #f59e0b;
    --warning-lifted: #fbbf24;
    --warning-accented: #fcd34d;

    --error: #f43f5e;
    --error-lifted: #fb7185;
    --error-accented: #fda4af;

    /* Grayscale - button borders, pills */
    --grayscale: #1c1c24;
    --grayscale-lifted: #2a2a33;
    --grayscale-accented: #3a3a45;

    --neutral: var(--neutral-300);
    --neutral-lifted: var(--neutral-200);
    --neutral-accented: var(--neutral-400);

    /* Text neutral colors - AA checked */
    --text-inverted: var(--neutral-50);
    --text-muted: var(--neutral-300);
    --text-lifted: var(--neutral-400);
    --text-accented: var(--neutral-200);
    --text: var(--neutral-50);

    /* Border neutral colors - low alpha */
    --border-muted: rgba(255, 255, 255, 0.06);
    --border: rgba(255, 255, 255, 0.10);
    --border-lifted: rgba(255, 255, 255, 0.16);
    --border-accented: rgba(255, 255, 255, 0.28);

    --bg: #050508;
    --bg-muted: #0a0a0f;
    --bg-lifted: #121218;
    --bg-accented: #1c1c24;
    /* html, footer, primary button */
    --bg-inverted: #0a0a0f;

    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    --rounding-sm: 0.375rem;
    --rounding-md: 0.75rem;
    --rounding-lg: 1.25rem;

    --letter-spacing: -0.01em;
    --disabled-opacity: 25%;

    /* shared panel surface, no backdrop-filter */
    --panel-surface: linear-gradient(160deg,
        color-mix(in srgb, var(--bg-lifted) 65%, transparent) 0%,
        color-mix(in srgb, var(--bg-muted) 55%, transparent) 100%);
    /* softer variant, dashboard cards */
    --panel-surface-soft: linear-gradient(160deg,
        color-mix(in srgb, var(--bg-lifted) 60%, transparent) 0%,
        color-mix(in srgb, var(--bg-muted) 55%, transparent) 100%);
    /* readable on black, old 12% vanished */
    --panel-border: color-mix(in srgb, var(--text) 20%, transparent);
}

body {
    background-color: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    /* backstop: stray wide element forces mobile zoom-out */
    overflow-x: hidden;
}
/* 2nd layer on html::before, lightbox owns body::after */
body::before,
html::before {
    content: '';
    position: fixed;
    /* inset:-25% overscan pushed layers off-edge, mobile zoomed out */
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
/* magenta, dominant layer, blob behind nav pill */
body::before {
    background:
        radial-gradient(64rem 50rem at 8% -10%, rgba(221, 26, 240, 0.38), transparent 66%),
        radial-gradient(50rem 42rem at 107% 58%, rgba(221, 26, 240, 0.24), transparent 68%),
        radial-gradient(30rem 20rem at 50% -19%, rgba(221, 26, 240, 0.30), transparent 70%);
}
/* violet, recessive layer, reads as depth not 2nd color */
html::before {
    background:
        radial-gradient(52rem 44rem at -13% 98%, rgba(124, 45, 214, 0.24), transparent 70%),
        radial-gradient(42rem 36rem at 89% -13%, rgba(124, 45, 214, 0.18), transparent 70%);
}
/* opacity only, brightness cycle without drift */
@keyframes vexal-aurora-a {
    0%   { opacity: 0.85; }
    50%  { opacity: 1; }
    100% { opacity: 0.85; }
}
@keyframes vexal-aurora-b {
    0%   { opacity: 0.84; }
    50%  { opacity: 1; }
    100% { opacity: 0.84; }
}
body::before {
    animation: vexal-aurora-a 30s ease-in-out infinite;
    will-change: opacity;
}
html::before {
    animation: vexal-aurora-b 38s ease-in-out infinite;
    will-change: opacity;
}
/* auth pages run their own orbs instead */
body:has(.auth-orb)::before {
    content: none;
}
html:has(.auth-orb)::before {
    content: none;
}
@media (prefers-reduced-motion: reduce) {
    body::before,
    html::before {
        animation: none;
    }
}

/* Surface layer - nexus hard-codes light panels */

/* page chrome */
html {
    background-color: var(--bg);
    /* clip stray horizontal overflow, pairs with body below */
    overflow-x: hidden;
    /* hide scrollbar, keep wheel/touch/key scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
/* scroll containers keep scrolling, no visible bar */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
*::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
header.header {
    background-color: transparent;
}
footer.footer {
    background-color: var(--bg-muted);
    border-top: 1px solid var(--border);
}
section#main-body {
    background-color: transparent;
}

/* cards and panels */
.card,
.mc-promo-manage,
.mc-promo-login,
.modal-content {
    background-color: var(--bg-muted);
    border-color: var(--border);
}
.card-header,
.card-footer,
.client-home-cards .card-header,
body .primary-content .client-home-cards .card .card-footer,
body .primary-content .client-home-cards .card .card-header,
body #order-standard_cart .panel .panel-footer {
    background-color: transparent;
    border-color: var(--border);
}
.dropdown-menu,
.popover {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    /* own shadow, notifications popover shares z-index with drawer */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    z-index: 1070;
}
@media (max-width: 1199px) {
    /* centered dialog, !important beats popper's inline styles */
    .popover.popover-user-notifications {
        position: fixed !important;
        inset: auto !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        width: calc(100vw - 2.5rem);
        max-width: 22rem;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 1080;
    }
    .popover.popover-user-notifications > .arrow {
        display: none;
    }
    /* dim backdrop behind the dialog */
    body:has(.popover.popover-user-notifications.show)::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1075;
    }
}
.dropdown-item {
    color: var(--text);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-accented);
    color: var(--text);
}
.list-group-item {
    background-color: transparent;
    border-color: var(--border);
    color: var(--text);
}
.alert:has(form),
body .secondary-cart-body #domainRenewals {
    background-color: var(--bg-lifted);
}
.bg-white {
    background-color: var(--bg-muted) !important;
}

/* tables force white */
.table {
    color: var(--text);
}
body #main-body .table td,
body #main-body .table th {
    background-color: transparent;
    border-color: var(--border);
    color: var(--text);
}
.table thead th {
    border-color: var(--border-lifted);
    color: var(--text-muted);
}
/* table action buttons, gap even when they wrap */
body #main-body td .btn {
    margin: .2rem .3rem .2rem 0;
}

/* form fields */
.form-control,
.custom-select,
.custom-file-label {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    color: var(--text);
}
.form-control:focus,
.custom-select:focus {
    background-color: var(--bg-lifted);
    border-color: var(--primary);
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(221, 26, 240, 0.25);
}
.form-control::placeholder {
    color: var(--text-lifted);
}
.input-group-text {
    background-color: var(--bg-accented);
    border-color: var(--border);
    color: var(--text-muted);
}
.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active {
    background-color: var(--bg-accented);
    color: var(--primary);
    border-color: var(--border-lifted);
}

/* soft gray divider, stock rule paints it near-white on dark */
.dropdown-divider {
    border-top-color: color-mix(in srgb, var(--text) 12%, transparent);
}

/* buttons */
.btn-primary {
    background: var(--primary-fill);
    border-color: var(--primary-fill);
    color: var(--white);
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out,
        background-color 0.18s ease-out, border-color 0.18s ease-out;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-fill-lifted);
    border-color: var(--primary-fill-lifted);
    color: var(--white);
    transform: translateY(-2px);
}
.btn-primary:active {
    background: var(--primary-fill-lifted);
    border-color: var(--primary-fill-lifted);
    color: var(--white);
    transform: translateY(0);
}
/* magenta pill on hover, not grey fill */
.btn-outline-secondary {
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out,
        background-color 0.18s ease-out, border-color 0.18s ease-out,
        color 0.18s ease-out;
}
/* homepage CTAs: outline pill, lighter weight so it sits below primary */
/* body #main-body prefix beats the global .btn weight:600 */
body #main-body .vx-hero-ctas .btn-outline-secondary,
body #main-body .vx-cta-ctas .btn-outline-secondary {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--text) 15%, transparent);
    color: var(--text-muted);
    font-weight: 400;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: color-mix(in srgb, var(--primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--primary) 55%, transparent);
}
.btn-outline-secondary:active {
    background-color: color-mix(in srgb, var(--primary) 20%, transparent);
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    color: var(--white);
    transform: translateY(0);
}
.btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover {
    background-color: var(--bg-lifted) !important;
    border-color: var(--border) !important;
    color: var(--text);
}
/* beats browser's visited-link default */
.btn-default:visited {
    color: var(--text);
}
.btn-default:hover {
    background-color: var(--bg-accented);
    border-color: var(--border-lifted);
    color: var(--text);
}
/* mailing list toggle - plain switch, no plugin */
.vexal-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}
.vexal-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.vexal-toggle-track {
    display: inline-block;
    width: 64px;
    height: 24px;
    border-radius: 999px;
    background-color: var(--bg-lifted);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: background-color .15s ease;
}
.vexal-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--text);
    transition: transform .15s ease;
    z-index: 1;
}
.vexal-toggle-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    opacity: 0;
    transition: opacity .15s ease;
}
.vexal-toggle-label-off {
    right: 8px;
    color: var(--text-muted);
}
.vexal-toggle-label-on {
    left: 8px;
    color: var(--bg);
}
.vexal-toggle input:not(:checked) + .vexal-toggle-track .vexal-toggle-label-off {
    opacity: 1;
}
.vexal-toggle input:checked + .vexal-toggle-track .vexal-toggle-label-on {
    opacity: 1;
}
.vexal-toggle input:checked + .vexal-toggle-track {
    background-color: var(--success-lifted);
    border-color: var(--success-lifted);
}
.vexal-toggle input:checked + .vexal-toggle-track .vexal-toggle-thumb {
    transform: translateX(42px);
    background-color: var(--bg);
}
.vexal-toggle input:focus-visible + .vexal-toggle-track {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* theme.css hard-codes this white */
.btn.btn-success.open-modal.twofa-config-link.enable {
    color: var(--white);
    background-color: var(--success-solid);
    border-color: var(--success-solid);
}
.btn.btn-success.open-modal.twofa-config-link.enable:hover,
.btn.btn-success.open-modal.twofa-config-link.enable:focus {
    color: var(--white);
    background-color: var(--success-solid-hover);
    border-color: var(--success-solid-hover);
}

/* tabs and pagination */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--bg-muted);
    border-color: var(--border) var(--border) transparent;
    color: var(--text);
}
.page-link,
.page-item.disabled .page-link {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    color: var(--text);
}
.page-item.active .page-link {
    background-color: var(--primary-fill);
    border-color: var(--primary-fill);
    color: var(--white);
}

/* empty breadcrumb stripe */
.master-breadcrumb,
.master-breadcrumb .breadcrumb {
    background-color: var(--bg-muted);
}

/* product cards - Browse button takes the brand colour */
body #main-body .btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}
body #main-body .btn-outline-primary:hover,
body #main-body .btn-outline-primary:focus,
body #main-body .btn-outline-primary:active {
    background-color: var(--primary-fill);
    border-color: var(--primary-fill);
    color: #fff;
}

/* remaining hard-coded whites */
.img-thumbnail,
.list-group-item.disabled,
.list-group-item:disabled,
.promo-banner,
.upgrade .products .product,
.responsive-tabs-sm,
.md-editor > .btn-toolbar,
.md-preview table,
.markdown-content table,
.home-domain-search .input-group-wrapper,
.store-order-container .store-domain-tabs li.active a,
.responsive-tabs-sm .nav-item a.active,
body .primary-content .client-home-cards .card .card-header .btn,
#registration .field,
#registration .form-control {
    background-color: var(--bg-lifted) !important;
    border-color: var(--border);
    color: var(--text);
}
.custom-control-label::before {
    background-color: var(--bg-accented);
    border-color: var(--border-lifted);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary-fill);
    border-color: var(--primary-fill);
}
/* beats theme.css's own !important on the editor textarea */
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview,
.md-editor .md-input {
    background-color: var(--bg-lifted) !important;
    border-color: var(--border) !important;
    color: var(--text);
}
/* footer strip below the box, same white leak */
.md-editor .md-footer {
    background-color: var(--bg-lifted) !important;
    border-color: var(--border) !important;
    color: var(--text-muted);
}
/* toolbar buttons - real gaps instead of collapsed seams */
.md-editor .btn-toolbar .btn-group > .btn {
    border-radius: var(--rounding-sm, .375rem) !important;
    margin-left: 0 !important;
    margin-right: 3px;
}
.md-editor .btn-toolbar .btn-group > .btn:last-child {
    margin-right: 0;
}
/* outer wrapper border, light in both idle and active states */
.md-editor,
div.md-editor.active {
    border-color: var(--border);
}
#registration .sub-heading span {
    background-color: var(--bg);
    color: var(--text-muted);
}

/* glass surface, no highlight bar */
.tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    border: none !important;
    background: none !important;
}
.tiles .row.no-gutters {
    display: contents;
}
.tiles .row.no-gutters > div {
    display: contents;
}
.tiles .tile {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.9rem;
    row-gap: 0.05rem;
    align-items: center;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--rounding-lg);
    padding: 1.25rem 1.35rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 14px 28px -18px rgba(0, 0, 0, 0.7);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.2s ease-out,
        box-shadow 0.2s ease-out;
}
.tiles .tile:hover {
    background-color: transparent;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--text) 12%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 28px -14px color-mix(in srgb, var(--primary) 25%, transparent);
}
/* icon: rounded magenta badge, spans rows */
.tiles .tile i {
    grid-row: 1 / 3;
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 14px;
    margin: 0;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
    font-size: 1.25rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.tiles .tile:hover i {
    background: color-mix(in srgb, var(--primary) 26%, transparent);
    color: var(--primary-lifted);
}
.tiles .tile .stat {
    grid-column: 2;
    align-self: end;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
}
.tiles .tile .title {
    grid-column: 2;
    align-self: start;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
@media (max-width: 1199.98px) {
    .tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (prefers-reduced-motion: reduce) {
    .tiles .tile {
        transition: none;
    }
}

/* sidebar cards fall back to stock bg-light, paints white */
body #main-body .card.bg-light {
    background-color: var(--bg-muted) !important;
    border-color: var(--border-muted);
    /* no sidebar.tpl mb-3 here, sits flush against next item */
    margin-bottom: 1rem;
}
body #main-body .card.bg-light .form-control {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    color: var(--text);
}
/* base theme's 4rem gap is dead space with one announcement */
body #main-body .announcements .announcement {
    margin-bottom: 2.25rem;
}
body #main-body .announcements .announcement:last-child {
    margin-bottom: 0;
}

/* length/pagination controls cramped once floats collapse */
@media (max-width: 575px) {
    body .dataTables_wrapper .dataTables_length,
    body .dataTables_wrapper .dataTables_paginate {
        float: none;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    body .dataTables_wrapper .dataTables_length {
        margin-bottom: 0.75rem;
    }
    body .dataTables_wrapper .dataTables_paginate .pagination {
        gap: 0.4rem;
    }
}

/* fixed icon/text slots, stock resized icon per label */
.affiliate-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: var(--rounding-lg);
    text-align: left;
}
.affiliate-stat i {
    float: none;
    flex: 0 0 auto;
    padding: 0;
    font-size: 2.5em;
}
.affiliate-stat span {
    font-size: 1.6em;
}

/* affiliates: table surface + brand-color withdraw button */
body #main-body .table-bordered {
    background-color: var(--bg-muted);
    border-color: var(--border-muted) !important;
}
body #main-body .table-bordered th,
body #main-body .table-bordered td {
    border-color: var(--border-muted) !important;
}
body #main-body .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-lifted);
}
body #main-body .btn-danger:not(#myTabContent .btn-danger) {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
body #main-body .btn-danger:not(#myTabContent .btn-danger):hover,
body #main-body .btn-danger:not(#myTabContent .btn-danger):focus {
    background-color: var(--primary-fill);
    border-color: var(--primary-fill);
}
body #main-body .btn-danger:not(#myTabContent .btn-danger).disabled,
body #main-body .btn-danger:not(#myTabContent .btn-danger):disabled {
    background-color: var(--neutral);
    border-color: var(--neutral);
    opacity: var(--disabled-opacity);
}

/* action buttons sit flush against summary on mobile stack */
.product-actions-wrapper {
    margin-bottom: 1.25rem;
}

/* bare h4 pairs sit flush, oversized for a field label */
.product-details .row > .col-md-6.text-center h4 {
    margin-top: 1rem;
    margin-bottom: 0.3rem;
    font-size: var(--text-md);
    color: var(--text-lifted);
}
.product-details .row > .col-md-6.text-center h4:first-child {
    margin-top: 0;
}

/* error pages: theme stock blue/cyan, gap the buttons */
body .text-primary {
    color: var(--primary) !important;
}
body .btn-info {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: #050508;
}
body .btn-info:hover,
body .btn-info:focus {
    background-color: var(--secondary-accented);
    border-color: var(--secondary-accented);
    color: #050508;
}
body .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* password reset card spans edge to edge below 768px */
@media (max-width: 767.98px) {
    .password-reset-wrapper {
        margin-left: 0;
        margin-right: 0;
        padding: 0 1rem;
    }
    .password-reset-wrapper .card-body {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* status bar: tint like status pills, not flat fill */
.product-status {
    background-color: transparent !important;
}
.product-status-text {
    padding: 0.6rem 1rem;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.product-status-pending .product-status-text {
    border-color: rgba(245, 158, 11, 0.28);
    background-color: rgba(245, 158, 11, 0.12);
    color: var(--warning-lifted);
}
.product-status-active .product-status-text {
    border-color: rgba(34, 197, 94, 0.28);
    background-color: rgba(34, 197, 94, 0.12);
    color: var(--success-lifted);
}
.product-status-suspended .product-status-text {
    border-color: rgba(56, 189, 248, 0.28);
    background-color: rgba(56, 189, 248, 0.12);
    color: var(--secondary-lifted);
}
.product-status-terminated .product-status-text,
.product-status-cancelled .product-status-text {
    background-color: var(--bg-accented);
    color: var(--text-muted);
}
.product-status-fraud .product-status-text {
    border-color: rgba(244, 63, 94, 0.28);
    background-color: rgba(244, 63, 94, 0.12);
    color: var(--error-lifted);
}

/* below 768px, keep horizontal tab row, not stock stacked list */
@media (max-width: 767.98px) {
    .responsive-tabs-sm {
        display: flex;
        /* labels can exceed 375px, scroll instead of wrap */
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        align-items: stretch;
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
    }
    .responsive-tabs-sm::-webkit-scrollbar {
        display: none;
    }
    .responsive-tabs-sm .nav-item {
        width: auto;
        flex: 0 0 auto;
        margin-left: 0;
        border-bottom: 0 !important;
    }
    .responsive-tabs-sm .nav-item a,
    .responsive-tabs-sm .nav-item:first-child a,
    .responsive-tabs-sm .nav-item:last-child,
    .responsive-tabs-sm .nav-item:last-child a {
        width: auto;
        margin-right: 0;
        display: flex;
        align-items: center;
        height: 100%;
        margin-bottom: 0;
        padding: 0.55rem 0.7rem !important;
        font-size: var(--text-sm);
        line-height: 1.4;
        white-space: nowrap;
        /* stacked-list corners curved the underline, force square */
        border-radius: 0 !important;
        border-bottom: 2px solid transparent !important;
    }
    .responsive-tabs-sm .nav-item a.active {
        background-color: transparent !important;
        border-bottom-color: var(--primary) !important;
        color: var(--primary);
    }
    /* the elbow only exists to join the stacked list to the panel */
    .responsive-tabs-sm-connector {
        display: none !important;
    }
    .product-details-tab-container {
        border-radius: 0 0 var(--rounding-md) var(--rounding-md);
    }
}

@media (max-width: 575px) {
    /* keep desktop's label/value row shape on mobile */
    #configoptions .row,
    #additionalinfo .row {
        display: grid;
        /* same 5/7 split, keeps value column aligned */
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
        align-items: baseline;
        gap: 0.6rem;
        text-align: left;
        padding: 0.7rem 0.25rem;
        /* bootstrap's .row negative gutter overflows the tab panel */
        margin-left: 0;
        margin-right: 0;
        border-bottom: 1px solid var(--border-muted);
    }
    #configoptions .row:last-child,
    #additionalinfo .row:last-child {
        border-bottom: none;
    }
    /* grid owns the widths, bootstrap's col padding would inset them */
    #configoptions .row > div,
    #additionalinfo .row > div {
        width: auto;
        max-width: 100%;
        flex: none;
        padding-left: 0;
        padding-right: 0;
    }
    #configoptions .row .col-sm-5,
    #additionalinfo .row .col-sm-5 {
        font-size: var(--text-sm);
        color: var(--text-lifted);
    }
    /* smaller size fits long option values on one line */
    #configoptions .row .col-sm-7.text-left,
    #additionalinfo .row .col-sm-7.text-left {
        color: var(--text);
        font-size: var(--text-sm);
        font-weight: 600;
    }
}

/* data tables */
table.table-list thead th,
.table-list > tbody > tr > td,
.dataTables_wrapper .dataTables_filter label .form-control,
body .dataTables_wrapper .dataTables_filter label .form-control {
    background-color: transparent !important;
    border-color: var(--border);
    color: var(--text);
}
/* row hover, !important beats DataTables' own tr:hover fill */
.table-list > tbody > tr:hover > td {
    background-color: color-mix(in srgb, var(--primary) 9%, transparent) !important;
}
/* faint tint, bg-lifted read near-black on this gradient */
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--bg-accented) !important;
}
/* table its own card, not the whole container */
body #main-body .table-container table.table-list {
    background-color: var(--bg-muted);
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-lg);
}
body #main-body .table-container table.table-list thead th:first-child,
body #main-body .table-container table.table-list td:first-child {
    padding-left: 1rem;
}
body #main-body .table-container table.table-list thead th:last-child,
body #main-body .table-container table.table-list td:last-child {
    padding-right: 1rem;
}

/* light greys across long-tail pages */
.breadcrumb,
.jumbotron,
.progress,
.popover-header,
.modal .modal-header,
.verification-banner,
.twofa-setup .backup-code,
.select-account a:hover,
.continue-container,
.invite-box,
.view-ticket .posted-by,
.view-ticket .attachment-list li figure,
.invoice-summary-table td.total-row,
tr.masspay-total td,
div.product-details div.product-icon,
div.product-details-tab-container,
.upgrade .product-to-be-upgraded,
.md-preview table > thead > tr > th,
.markdown-content table > thead > tr > th,
.store-order-container .store-domain-tabs li a,
.responsive-tabs-sm .nav-item a:hover,
.popover-user-notifications ul li a:hover,
.page-link:hover,
.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
    background-color: var(--bg-lifted) !important;
    border-color: var(--border);
    color: var(--text);
}
/* desktop only, element+class outranks mobile override */
@media (min-width: 768px) {
    /* strip rounds top, panel rounds bottom, one shared box */
    ul.responsive-tabs-sm {
        border-radius: var(--rounding-lg) var(--rounding-lg) 0 0;
        margin-bottom: 0;
    }
    div.product-details-tab-container,
    div.store-domain-tab-content {
        border-radius: 0 0 var(--rounding-lg) var(--rounding-lg);
    }
    /* transparent fill, keeps strip's rounded corner on active tab */
    ul.responsive-tabs-sm .nav-item a.active,
    ul.responsive-tabs-sm .nav-item a:hover {
        background-color: transparent !important;
    }
}
/* match strip's bg-lifted, generic bg-white is a shade off */
.tab-content.store-domain-tab-content {
    background-color: var(--bg-lifted) !important;
}

/* order form and cart */
body #order-standard_cart .products .product,
body #order-standard_cart .cart-body .products .product header,
body #order-standard_cart .cart-body .view-cart-empty,
body #order-standard_cart .domain-selection-options,
body #order-standard_cart .domain-selection-options .option-selected,
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-selected=true],
body #order-standard_cart .panel .panel-heading,
body #order-standard_cart .domain-promo-box,
body #order-standard_cart .sub-heading span {
    background-color: var(--bg-muted) !important;
    border-color: var(--border);
    color: var(--text);
}
body #order-standard_cart .products .product .product-desc,
body #order-standard_cart .products .product .product-pricing {
    color: var(--text-muted);
}
body #order-standard_cart .products .product header,
body #order-standard_cart .products .product header span {
    color: var(--text);
}

/* ===== store listing: glass on product cards + sidebar panels ===== */
/* reachable only by selector, matches .vx-glass */
body #order-standard_cart .products .product,
body #order-standard_cart .panel {
    background: var(--panel-surface) !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: var(--rounding-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 14px 28px -18px rgba(0, 0, 0, 0.7);
}
/* rides the glass, divider not fill */
body #order-standard_cart .products .product header,
body #order-standard_cart .panel .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}

/* ===== store listing: plan cards ===== */
/* real classes here, not stock .product overrides */

body #order-standard_cart .vx-store-head {
    margin-bottom: 2rem;
}
body #order-standard_cart .vx-store-head h1 {
    margin-bottom: 0.5rem;
}
/* short brand rule replaces stock's full-width grey underline */
body #order-standard_cart .vx-store-head h1::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    margin-top: 0.85rem;
    border-radius: 2px;
    background: var(--primary);
}
body #order-standard_cart .vx-store-tagline {
    color: var(--text-muted);
    margin: 0;
}

/* auto-fill not auto-fit, stops lone card stretching */
.vx-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.vx-plan {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: var(--rounding-lg);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--bg-lifted) 70%, transparent) 0%,
        color-mix(in srgb, var(--bg-muted) 55%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 14px 28px -18px rgba(0, 0, 0, 0.7);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vx-plan:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 22px 44px -22px rgba(0, 0, 0, 0.8),
        0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent),
        0 18px 60px -30px color-mix(in srgb, var(--primary) 55%, transparent);
}
@media (prefers-reduced-motion: reduce) {
    .vx-plan {
        transition: border-color 120ms linear;
    }
    .vx-plan:hover {
        transform: none;
    }
}

/* form carries column layout, pushes CTA to bottom */
.vx-plan > form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vx-plan-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.vx-plan-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.vx-plan-stock {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
/* heading line the client typed above their spec list */
.vx-plan-lead {
    margin: 1.4rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text);
}
.vx-plan-lead strong,
.vx-plan-lead b {
    font-weight: 600;
}
.vx-plan-lead > :last-child {
    margin-bottom: 0;
}
.vx-plan-lead + .vx-plan-specs {
    margin-top: 0.9rem;
    padding-top: 0;
    border-top: 0;
}

/* price leads, not trails description */
.vx-plan-price {
    margin-top: 1.4rem;
}
.vx-plan-eyebrow {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}
.vx-plan-amount {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--primary);
    letter-spacing: -0.02em;
}
.vx-plan-cycle {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-left: 0.4rem;
}
.vx-plan-setup {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.vx-plan-specs {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    font-size: 0.875rem;
}
.vx-plan-specs li {
    position: relative;
    padding-left: 1.6rem;
    line-height: 1.5;
    color: var(--text);
}
.vx-plan-specs li + li {
    margin-top: 0.6rem;
}
.vx-plan-specs li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: 700;
}
.vx-plan-specs .feature-value {
    font-weight: 600;
}

/* addon target-service picker */
.vx-plan-field {
    margin-top: 1.4rem;
}
.vx-plan-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.vx-plan-field select.form-control {
    width: 100%;
}

/* pinned bottom, aligns CTAs across uneven card heights */
.vx-plan-cta {
    display: block;
    width: 100%;
    margin-top: auto;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0;
    text-align: center;
    font-weight: 600;
    border-radius: var(--rounding-md);
    background-color: var(--primary);
    color: var(--text-inverted);
    border: 1px solid var(--primary);
    transition: background-color 180ms ease-out, border-color 180ms ease-out;
}
/* first child after the price when a plan lists no specs */
.vx-plan-price + .vx-plan-cta,
.vx-plan-lead + .vx-plan-cta,
.vx-plan-specs + .vx-plan-cta,
.vx-plan-field + .vx-plan-cta {
    margin-top: 1.6rem;
}
.vx-plan-cta:hover,
.vx-plan-cta:focus {
    background-color: var(--primary-lifted);
    border-color: var(--primary-lifted);
    color: var(--text-inverted);
    text-decoration: none;
}

/* ===== store listing: empty state ===== */
/* not an error, category is just empty */
.vx-empty {
    padding: 3.5rem 2rem;
    text-align: center;
    border-radius: var(--rounding-lg);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--bg-lifted) 55%, transparent) 0%,
        color-mix(in srgb, var(--bg-muted) 40%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.vx-empty-msg {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}
.vx-empty-cta {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: var(--rounding-md);
    font-weight: 600;
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    transition: border-color 180ms ease-out, background-color 180ms ease-out;
}
.vx-empty-cta:hover,
.vx-empty-cta:focus {
    background-color: color-mix(in srgb, var(--text) 6%, transparent);
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
    color: var(--text);
    text-decoration: none;
}

/* ===== store listing: sidebar nav rail ===== */
/* flat pill rail, not another card competing with plans */
.vx-rail {
    margin-bottom: 2rem;
}
.vx-rail-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 0.9rem;
    margin-bottom: 0.65rem;
}
.vx-rail-items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.vx-rail-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--rounding-md);
    color: var(--text-muted);
    font-size: 0.925rem;
    /* fixed weight, bolding on select reflows the row */
    font-weight: 500;
    transition: background-color 160ms ease-out, color 160ms ease-out;
}
.vx-rail-item:hover {
    background-color: color-mix(in srgb, var(--text) 6%, transparent);
    color: var(--text);
    text-decoration: none;
}
.vx-rail-item.is-active {
    background-color: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
}
.vx-rail-item.is-disabled {
    opacity: var(--disabled-opacity, 0.5);
    pointer-events: none;
}
.vx-rail-item .badge {
    margin-left: auto;
}
.vx-rail-body,
.vx-rail-footer {
    padding: 0 0.9rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

@media (max-width: 767px) {
    .vx-plan {
        padding: 1.4rem;
    }
    .vx-plan-amount {
        font-size: 2rem;
    }
}

/* ===== configure product: page furniture ===== */
/* markup is ours (theme/vexal_cart/configureproduct.tpl) */

/* matches listing card, same object across Order Now click */
.vx-cfg-product {
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
    border-radius: var(--rounding-lg);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--bg-lifted) 70%, transparent) 0%,
        color-mix(in srgb, var(--bg-muted) 55%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.vx-cfg-product-name {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.vx-cfg-product-intro {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0.5rem 0 0;
}
.vx-cfg-product-specs {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
}

/* left-aligned heading with brand tick, not a centered divider */
.vx-cfg-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.vx-cfg-heading::before {
    content: "";
    width: 3px;
    height: 0.95rem;
    border-radius: 2px;
    background: var(--primary);
}
.vx-cfg-heading-note {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}
.vx-cfg-note {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ===== configure product: fields ===== */

.vx-cfg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    align-items: start;
}
/* full row, half column truncates priced labels */
.vx-cfg-wide {
    grid-column: 1 / -1;
}

/* single column, half columns clip priced labels */
.vx-cfg-stack {
    display: grid;
    gap: 0.75rem;
}

.vx-cfg-block {
    padding: 1.15rem 1.25rem;
    border-radius: var(--rounding-md);
    background-color: color-mix(in srgb, var(--bg-muted) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
}
/* body weight, label is the question not chrome */
.vx-cfg-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.7rem;
}
/* capped width, stock select stretched full row */
.vx-cfg-select {
    width: 100%;
    max-width: 26rem;
}
.vx-cfg-help {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}
.vx-cfg-fields {
    display: grid;
    gap: 1rem;
}

/* ===== configure product: priced option rows ===== */
/* full-width rows, price right-aligned for column comparison */
.vx-opts {
    display: grid;
    gap: 0.4rem;
}
.vx-opt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--rounding-sm);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    background-color: color-mix(in srgb, var(--bg) 40%, transparent);
    font-weight: 400;
    cursor: pointer;
    transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.vx-opt:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
/* iCheck: match both native input and its wrapper class */
.vx-opt:has(input:checked),
.vx-opt:has(.checked) {
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}
/* wrap, not squeeze, price drops to its own line */
.vx-opt-text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
    flex: 1;
    min-width: 0;
}
.vx-opt-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
}
.vx-opt-price {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* flatten single toggle, block itself is the affordance */
.vx-opts .vx-opt:only-child,
.vx-opts .vx-opt:only-child:hover {
    padding: 0;
    border: none;
    background: transparent;
}
/* only worth right-aligning when several options stack */
.vx-opts .vx-opt:only-child .vx-opt-name {
    flex: 0 1 auto;
}
.vx-opts .vx-opt:only-child .vx-opt-price {
    margin-left: 0;
}
.vx-cfg-block:has(.vx-opt:only-child input:checked),
.vx-cfg-block:has(.vx-opt:only-child .checked) {
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}
.vx-opt:has(input:checked) .vx-opt-price,
.vx-opt:has(.checked) .vx-opt-price {
    color: var(--primary);
}

.vx-qty {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.vx-qty .form-control-qty {
    width: 5.5rem;
    flex: none;
}
/* also carries .vx-opt-text, aligns like radio rows */
.vx-qty-unit {
    font-size: 0.9rem;
    color: var(--text);
}

/* ===== configure product: addon cards ===== */
.vx-addon {
    display: block;
    margin: 0;
    padding: 1.15rem 1.25rem;
    border-radius: var(--rounding-md);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    background-color: color-mix(in srgb, var(--bg-muted) 55%, transparent);
    font-weight: 400;
    cursor: pointer;
    transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.vx-addon:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.vx-addon:has(input:checked),
.vx-addon:has(.checked) {
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}
.vx-addon-top {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.vx-addon-name {
    font-weight: 600;
    color: var(--text);
}
.vx-addon-price {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.vx-addon-desc {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0.6rem 0 0;
}

/* ===== configure product: metrics list ===== */
.vx-cfg-metrics {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
.vx-cfg-metrics li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--rounding-sm);
    background-color: color-mix(in srgb, var(--bg-muted) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
    font-size: 0.9rem;
}
.vx-cfg-metric-name {
    font-weight: 600;
    color: var(--text);
}
.vx-cfg-metric-price {
    color: var(--text-muted);
    margin-left: auto;
}
.vx-cfg-metric-btn {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    border-radius: var(--rounding-sm);
    color: var(--text);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
}

/* offer of help, not a warning alert */
.vx-cfg-contact {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    font-size: 0.85rem;
    color: var(--text-muted);
}
.vx-cfg-contact a {
    color: var(--primary);
}

/* ===== configure product: order summary ===== */
/* reflows recalctotals()'s float rows */
.vx-summary {
    padding: 1.5rem;
    border-radius: var(--rounding-lg);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--bg-lifted) 70%, transparent) 0%,
        color-mix(in srgb, var(--bg-muted) 55%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
}
.vx-summary-heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 1.1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.vx-summary .summary-container .product-name {
    display: block;
    font-weight: 600;
    color: var(--text);
}
.vx-summary .summary-container .product-group {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}
/* wrap row, price own line instead of crushing label */
.vx-summary .summary-container .clearfix {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.1rem 0.75rem;
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 0.3rem 0;
}
.vx-summary .summary-container .clearfix > * {
    float: none !important;
}
.vx-summary .summary-container .clearfix .pull-left,
.vx-summary .summary-container .clearfix .float-left {
    flex: 1 1 auto;
    min-width: 0;
}
.vx-summary .summary-container .clearfix .pull-right,
.vx-summary .summary-container .clearfix .float-right {
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
    color: var(--text-muted);
}
.vx-summary .summary-totals {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.vx-summary .summary-totals .clearfix {
    font-weight: 600;
    color: var(--text);
}
.vx-summary .total-due-today {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    text-align: right;
}
.vx-summary .total-due-today .amt {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--primary);
}
.vx-summary .total-due-today > span:last-child {
    font-size: 0.75rem;
    color: var(--text-muted);
}
/* reuses store CTA, sits outside the panel */
#orderSummary .vx-plan-cta {
    margin-top: 1.25rem;
}

@media (max-width: 767px) {
    .vx-cfg-product {
        padding: 1.25rem;
    }
}

/* ===== checkout ===== */
/* styles repeated .sub-heading pattern once */
body #order-standard_cart .sub-heading {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    text-align: left;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    margin: 2.5rem 0 1.25rem;
    padding: 0 0 0.65rem;
}
body #order-standard_cart .sub-heading::before {
    content: "";
    width: 3px;
    height: 0.95rem;
    border-radius: 2px;
    background: var(--primary);
}
body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading span.primary-bg-color {
    position: static;
    top: auto;
    display: block;
    padding: 0;
    background: transparent !important;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}
/* required-fields note rides inside the same span */
body #order-standard_cart .sub-heading span small,
body #order-standard_cart .sub-heading span i {
    font-size: 0.75rem;
    font-weight: 400;
    font-style: normal;
    color: var(--text-muted);
}

/* running total, not a green success alert */
body #order-standard_cart #totalDueToday {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 1.15rem 1.4rem;
    border-radius: var(--rounding-lg);
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--bg-lifted) 70%, transparent) 0%,
        color-mix(in srgb, var(--bg-muted) 55%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: left;
}
body #order-standard_cart #totalDueToday #totalCartPrice {
    margin-left: auto;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--primary);
}

/* credit-balance choice reuses the option row language */
body #order-standard_cart .apply-credit-container .radio {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.4rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--rounding-sm);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    background-color: color-mix(in srgb, var(--bg) 40%, transparent);
    font-weight: 400;
    cursor: pointer;
}
body #order-standard_cart .apply-credit-container .radio:has(input:checked),
body #order-standard_cart .apply-credit-container .radio:has(.checked) {
    border-color: color-mix(in srgb, var(--primary) 60%, transparent);
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* end of flow, wider than a small centered pill */
.vx-checkout-cta {
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
}
.vx-checkout-cta:disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
}

/* an SSL confirmation is reassurance, not a warning */
body #order-standard_cart .checkout-security-msg {
    margin-top: 1.5rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--rounding-md);
    background-color: color-mix(in srgb, var(--bg-muted) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}

/* ===== client area sidebar: rail ===== */
/* strips chrome, keeps sidebar JS working */
body #main-body .sidebar .vx-rail-items,
body #main-body .sidebar .vx-rail-items.list-group-flush {
    border: none;
    background: transparent;
    border-radius: 0;
}
body #main-body .sidebar .vx-rail-item.list-group-item {
    border: none;
    background-color: transparent;
    padding: 0.6rem 0.9rem;
    border-radius: var(--rounding-md);
    color: var(--text-muted);
    font-size: 0.925rem;
    /* fixed weight, bolding on select reflows the row */
    font-weight: 500;
}
body #main-body .sidebar .vx-rail-item.list-group-item:hover {
    background-color: color-mix(in srgb, var(--text) 6%, transparent);
    color: var(--text);
}
body #main-body .sidebar .vx-rail-item.list-group-item.is-active,
body #main-body .sidebar .vx-rail-item.list-group-item.active {
    background-color: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
}
/* wraps label in stock icon/label/badge flexbox */
body #main-body .sidebar .vx-rail-item .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
body #main-body .sidebar .vx-rail-item .sidebar-menu-item-badge {
    margin-left: auto;
}

/* ===== billing tables ===== */
/* rows are click targets, taller with one-row hover */
body #main-body .table-container table.table-list > tbody > tr {
    cursor: pointer;
    transition: background-color 140ms ease-out;
}
body #main-body .table-container table.table-list > tbody > td,
body #main-body .table-container table.table-list > tbody > tr > td {
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
    vertical-align: middle;
    border-top-color: color-mix(in srgb, var(--text) 8%, transparent);
}
/* amounts align on the decimal, scannable column */
body #main-body .table-container table.table-list td.vx-money {
    font-variant-numeric: tabular-nums;
}

/* ===== datatables chrome ===== */
/* theme the stock search/length/pager furniture */
body #main-body .dataTables_wrapper .dataTables_info,
body #main-body .dataTables_wrapper .dataTables_length,
body #main-body .dataTables_wrapper .dataTables_filter {
    color: var(--text-muted);
    font-size: 0.82rem;
}
body #main-body .dataTables_wrapper .dataTables_length select,
body #main-body .dataTables_wrapper .dataTables_filter input {
    background-color: color-mix(in srgb, var(--bg) 45%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: var(--rounding-md);
    color: var(--text);
    padding: 0.35rem 0.7rem;
}
body #main-body .dataTables_wrapper .dataTables_filter input:focus,
body #main-body .dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}
/* button styling on the anchor, li gets a second box */
body #main-body .dataTables_wrapper .dataTables_paginate .paginate_button {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-left: 0.3rem;
}
body #main-body .dataTables_wrapper .dataTables_paginate .paginate_button .page-link {
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    background: transparent;
    color: var(--text-muted);
    padding: 0.35rem 0.85rem;
    transition: border-color 140ms ease-out, color 140ms ease-out;
}
body #main-body .dataTables_wrapper .dataTables_paginate .paginate_button .page-link:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
    color: var(--text);
}
body #main-body .dataTables_wrapper .dataTables_paginate .paginate_button.active .page-link,
body #main-body .dataTables_wrapper .dataTables_paginate .paginate_button.current .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverted);
    font-weight: 600;
}
body #main-body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: var(--disabled-opacity, 0.45);
    pointer-events: none;
}

/* dark text left over from the light theme */
.close,
.close:hover,
.popover-body,
.dropdown-menu,
.text-body,
.text-dark,
.list-group-item-action,
.list-group-item-action:hover,
.list-group-item-action:focus,
table.table-list thead th,
.pagination > li > a,
.pagination > li > span,
.md-preview h2,
.md-preview h3,
.md-preview h4,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.upgrade .products .product ul li span,
.popover-user-notifications ul li a,
#registration label,
#registration .field,
#registration .form-control,
.featured-tld .price {
    color: var(--text);
}
.text-muted,
.breadcrumb-item.active,
.dropdown-header,
.verification-banner .fas,
.verification-banner .fal,
.verification-banner .far {
    color: var(--text-lifted) !important;
}

/* ===== global interactive states ===== */
/* sidebar active - brand tint */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    background-color: rgba(221, 26, 240, 0.15) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.sidebar .list-group-item.active .sidebar-menu-item-icon,
.sidebar .list-group-item.active .sidebar-menu-item-label {
    color: var(--primary) !important;
}

/* list-group hover - kill the white bg */
.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: rgba(221, 26, 240, 0.08) !important;
    color: var(--text) !important;
}
/* list-group click/active */
.list-group-item-action:active {
    background-color: var(--bg-lifted) !important;
    color: var(--text) !important;
}
.list-group-item.active {
    background-color: rgba(221, 26, 240, 0.15) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* dropdown click/select */
.dropdown-item:active,
.dropdown-item.active {
    background-color: rgba(221, 26, 240, 0.15) !important;
    color: var(--text) !important;
}
/* class stays on li, scripts.js needs it for the menu */
.dropdown-menu > li.dropdown-item {
    padding: 0;
    background-color: transparent !important;
}
/* square, full width, menu padding clears rounded corners */
.dropdown-menu > li.dropdown-item > a.dropdown-item {
    display: block;
    padding: 0.45rem 0.9rem !important;
    border-radius: 0;
}

/* pagination active/focus */
.page-item.active .page-link {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
}
.page-link:focus {
    background-color: var(--bg-lifted) !important;
    color: var(--text) !important;
    box-shadow: 0 0 0 0.2rem rgba(221, 26, 240, 0.25) !important;
}

/* nav active/focus */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background-color: rgba(221, 26, 240, 0.15) !important;
    color: var(--primary) !important;
    border-color: var(--border) !important;
}

/* btn active/focus (generic; btn-primary has its own) */
.btn:active,
.btn.active {
    box-shadow: 0 0 0 0.2rem rgba(221, 26, 240, 0.25) !important;
}
.btn:focus-visible,
.btn.focus {
    box-shadow: 0 0 0 0.2rem rgba(221, 26, 240, 0.25) !important;
}

/* store cart sidebar active */
.cart-sidebar .list-group-item.active {
    background-color: rgba(221, 26, 240, 0.15) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

/* ===== glass pill nav ===== */
.main-navbar-wrapper {
    /* glass over flat dark page */
    background-color: rgba(255, 255, 255, 0.045) !important;
    /* faint sheen, adds depth */
    background-image: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--rounding-lg, 1rem);
    border: 1px solid rgba(255, 255, 255, 0.09);
    /* inset highlight lifts the pill */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    /* contained pill, not full width */
    max-width: 1140px;
    margin: 1.25rem auto 0.5rem;
    /* above main-body, dropdowns stay uncovered */
    position: relative;
    z-index: 1020;
}
/* more room than bootstrap's container cap */
@media (min-width: 1200px) {
    .main-navbar-wrapper {
        max-width: 1320px;
    }
    .main-navbar-wrapper > .container {
        max-width: none;
    }
}
.main-navbar-wrapper .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.main-navbar-wrapper .brand-wordmark {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text);
    white-space: nowrap;
}
/* let Home clear the brand, desktop only */
@media (min-width: 1200px) {
    .main-navbar-wrapper .navbar-nav.mr-auto {
        padding-left: 1.5rem;
    }
}
/* hamburger matches dark theme */
.main-navbar-wrapper .navbar-toggler {
    color: var(--text);
    border-color: var(--border);
    padding: 0.25rem 0.5rem;
}
.main-navbar-wrapper .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}
/* vertically center nav items */
.main-navbar-wrapper .navbar-collapse,
.main-navbar-wrapper .navbar-nav {
    align-items: center;
}
/* hide empty More toggle, collapse JS reveals it even with nothing inside */
#nav .collapsable-dropdown:not(:has(.collapsable-dropdown-menu li)) {
    display: none !important;
}
/* kill base theme's 8px/20px nav-list margin skew */
.main-navbar-wrapper .navbar-nav {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* nexus renders these anchors with an empty class, not .nav-link */
.main-navbar-wrapper .navbar-nav a,
.main-navbar-wrapper .navbar-nav .nav-link {
    color: var(--text) !important;
    transition: color 0.15s ease;
    display: flex;
    align-items: center;
}
/* hover: color only on primary nav items */
.main-navbar-wrapper .navbar-nav a:hover,
.main-navbar-wrapper .navbar-nav .nav-link:hover {
    color: var(--primary) !important;
}
/* active item: raised chip only */
.main-navbar-wrapper .navbar-nav .active > a,
.main-navbar-wrapper .navbar-nav a.active,
.main-navbar-wrapper .navbar-nav .nav-link.active {
    color: var(--primary) !important;
    background-color: rgba(255, 255, 255, 0.07);
    border-radius: 0.5rem;
    padding: 0.3rem 0.7rem;
}
.main-navbar-wrapper .navbar-nav a:focus,
.main-navbar-wrapper .navbar-nav .nav-link:focus {
    color: var(--text) !important;
    outline: none;
}
/* icon-only buttons (cart, affiliates) as rounded-square chips */
.main-navbar-wrapper .nav-icon-btn,
.main-navbar-wrapper .navbar-nav.ml-auto > .nav-item > .nav-link,
.main-navbar-wrapper .navbar-nav.ml-auto > .nav-item > a {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.6rem;
    padding: 0.45rem 0.6rem;
}
.main-navbar-wrapper .nav-icon-btn:hover,
.main-navbar-wrapper .navbar-nav.ml-auto > .nav-item > .nav-link:hover,
.main-navbar-wrapper .navbar-nav.ml-auto > .nav-item > a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.nav-icon-btn .badge {
    font-size: 0.65rem;
    padding: 0.2em 0.4em;
    vertical-align: middle;
}
/* even out the gap, base theme left right list too tight */
@media (min-width: 1200px) {
    .main-navbar-wrapper .navbar-nav.ml-auto {
        column-gap: 1rem;
        /* clear the last primary item on a full bar */
        margin-left: 2rem;
    }
}
/* ===== off-canvas nav drawer (mobile) ===== */
/* always flex, so it can animate position */
.vexal-offcanvas {
    display: flex !important;
    flex-basis: auto;
}

@media (max-width: 1199px) {
    /* strip pill chrome from the wrapper on mobile */
    .main-navbar-wrapper {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: transparent !important;
        background-image: none;
        border: none;
        box-shadow: none;
        margin: 0.75rem 0 0;
        padding: 0;
        /* stacking context above overlay, drawer stays uncovered */
        position: relative;
        z-index: 1060;
    }
    .vexal-drawer-close {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--border);
        border-radius: 0;
        color: var(--text-muted);
        padding: 0.3rem 0.55rem;
        cursor: pointer;
        line-height: 1;
        font-size: 0.9rem;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .vexal-drawer-close:hover {
        background: rgba(255, 255, 255, 0.12);
        color: var(--text);
    }
    .vexal-offcanvas {
        position: fixed !important;
        top: 0;
        left: -300px;
        width: 280px;
        height: 100vh;
        overflow-y: auto;
        z-index: 1060;
        transition: left 0.28s ease;
        background: var(--bg-lifted);
        border-right: 1px solid var(--border);
        border-radius: 0;
        padding: 3rem 1rem 2rem;
        flex-direction: column;
        align-items: stretch;
    }
    .vexal-offcanvas.show {
        left: 0;
    }
    /* force left-align, kill base-theme gap, id beats class */
    .vexal-offcanvas .navbar-nav,
    .vexal-offcanvas .navbar-nav.ml-auto,
    .vexal-offcanvas #nav {
        flex-direction: column;
        align-items: stretch !important;
        align-self: stretch;
        width: 100%;
        gap: 0 !important;
        row-gap: 0 !important;
        column-gap: 0 !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .vexal-offcanvas .navbar-nav .nav-item {
        width: 100%;
    }
    .vexal-offcanvas .navbar-nav a,
    .vexal-offcanvas .navbar-nav .nav-link {
        padding: 0.7rem 0.5rem !important;
        border-bottom: 1px solid var(--border);
        border-radius: 0 !important;
        background: transparent !important;
        width: 100%;
        color: var(--text) !important;
        font-weight: 500;
        justify-content: flex-start;
    }
    /* keep active color, reset chip padding in drawer */
    .vexal-offcanvas .navbar-nav .active > a,
    .vexal-offcanvas .navbar-nav a.active,
    .vexal-offcanvas .navbar-nav .nav-link.active {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0.7rem 0.5rem !important;
    }
    /* right-cluster block in drawer */
    .vexal-offcanvas .navbar-nav.ml-auto {
        margin-top: 0.75rem !important;
        padding-top: 0.25rem;
    }
    /* show text label instead of chip in drawer */
    .vexal-offcanvas .navbar-nav.ml-auto > .nav-item > .nav-link,
    .vexal-offcanvas .navbar-nav.ml-auto > .nav-item > a,
    .vexal-offcanvas .nav-icon-btn {
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid var(--border) !important;
        border-radius: 0 !important;
        padding: 0.7rem 0.5rem !important;
        justify-content: flex-start;
    }
    /* text-only rows here, icons stay on top bar */
    .vexal-offcanvas .nav-icon-btn i,
    .vexal-offcanvas .nav-icon-btn .badge {
        display: none !important;
    }
    /* accordion sub-menu, driven by .vexal-sub-open */
    .vexal-offcanvas .dropdown-menu {
        display: none !important;
        position: static !important;
        float: none;
        border: none;
        background: transparent;
        padding: 0 0 0.25rem 1rem;
        box-shadow: none;
        margin: 0;
    }
    .vexal-offcanvas .vexal-sub-open > .dropdown-menu {
        display: block !important;
    }
    /* caret flips when its section is open */
    .vexal-offcanvas .vexal-sub-open > .dropdown-toggle .caret,
    .vexal-offcanvas .vexal-sub-open > .dropdown-toggle::after {
        transform: rotate(180deg);
    }
    .vexal-offcanvas .dropdown-menu .dropdown-item {
        padding: 0.5rem 0.5rem;
        color: var(--text-muted) !important;
        font-size: 0.88rem;
        border-radius: 0;
        white-space: normal;
    }
    .vexal-offcanvas .dropdown-menu .dropdown-item:hover {
        color: var(--primary) !important;
        background: rgba(255, 255, 255, 0.05);
    }
    /* dim overlay, no backdrop-filter to avoid bleed on drawer */
    .vexal-nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1050;
    }
    .vexal-nav-overlay.active {
        display: block;
    }
    /* lock page scroll while drawer open */
    body.vexal-nav-open {
        overflow: hidden;
    }
}
@media (prefers-reduced-motion: reduce) {
    .main-navbar-wrapper .navbar-nav .nav-link,
    .vexal-offcanvas {
        transition: none;
    }
}

/* breadcrumb bar - blend with the page, not a lifted band */
.master-breadcrumb,
.master-breadcrumb .breadcrumb {
    background-color: transparent !important;
}

/* ===== footer columns ===== */
.footer {
    border-top: 1px solid var(--border);
    padding-top: 2.5rem;
    margin-top: 3rem;
}
.footer-cols {
    padding-bottom: 2rem;
    text-align: center;
}
.footer-col-heading {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.footer-col a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    display: block;
    padding: 0.2rem 0;
    transition: color 0.15s ease;
}
.footer-col a:hover {
    color: var(--text);
}
.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 1rem 0;
}
.footer-bottom .copyright {
    font-size: 0.8rem;
    color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
    .footer-col a { transition: none; }
}

/* below md the rotated tab falls back unstyled, theme it */
@media (max-width: 767.98px) {
    .btn-return-to-admin {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin: 0 auto 1.5rem;
        width: fit-content;
        padding: 0.5rem 1rem !important;
        background-color: var(--bg-accented) !important;
        color: var(--text-accented) !important;
        border: 1px solid var(--border);
        border-radius: var(--rounding-sm);
        font-size: 0.85rem !important;
        text-decoration: none;
    }
    .btn-return-to-admin:hover {
        background-color: var(--bg-lifted) !important;
        color: var(--text) !important;
    }
}

/* logo sizing */
.logo-img {
    height: 38px;
    width: auto;
    display: block;
}

/* ===== auth pages ===== */

/* ambient orbs */
.auth-orb {
    position: fixed;
    border-radius: 50%;
    /* blur on base rule, not keyframes, avoids per-frame recompute */
    filter: blur(90px);
    pointer-events: none;
    /* match glow layer's z-index, else it paints over footer */
    z-index: -1;
    will-change: transform, opacity;
}
.auth-orb-1 {
    width: 560px;
    height: 560px;
    top: -120px;
    left: -80px;
    background: radial-gradient(circle, rgba(221,26,240,0.38) 0%, transparent 70%);
    animation: vexal-auth-orb-a 18s ease-in-out infinite;
}
.auth-orb-2 {
    width: 520px;
    height: 520px;
    bottom: -100px;
    right: -60px;
    background: radial-gradient(circle, rgba(221,26,240,0.34) 0%, transparent 70%);
    animation: vexal-auth-orb-b 24s ease-in-out infinite;
}
/* living light, matches homepage aurora */
@keyframes vexal-auth-orb-a {
    0%   { transform: translate3d(0, 0, 0) scale(1);       opacity: 0.72; }
    50%  { transform: translate3d(6%, 5%, 0) scale(1.18);  opacity: 1; }
    100% { transform: translate3d(0, 0, 0) scale(1);       opacity: 0.72; }
}
@keyframes vexal-auth-orb-b {
    0%   { transform: translate3d(0, 0, 0) scale(1.1);     opacity: 0.7; }
    50%  { transform: translate3d(-7%, -5%, 0) scale(1);   opacity: 0.96; }
    100% { transform: translate3d(0, 0, 0) scale(1.1);     opacity: 0.7; }
}

/* lift content above fixed orbs */
.login-form,
.password-reset-wrapper,
.auth-shell,
.auth-brand,
#registration {
    position: relative;
    z-index: 1;
}

/* ---- split auth shell ---- */
.auth-shell {
    max-width: 960px;
    margin: 2rem auto 3rem;
}
.auth-split {
    display: grid;
    grid-template-columns: 1fr;
    border-radius: var(--rounding-lg);
    overflow: hidden;
    position: relative;
    /* raised edge, light top to dark base */
    border: 1px solid transparent;
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--bg-lifted) 94%, transparent) 0%,
            color-mix(in srgb, var(--bg-muted) 97%, transparent) 100%) padding-box,
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.03) 45%,
            rgba(255, 255, 255, 0.09) 100%) border-box;
    /* stacked shadows read as depth */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 2px 4px rgba(0, 0, 0, 0.35),
        0 10px 20px -6px rgba(0, 0, 0, 0.45),
        0 30px 60px -20px rgba(0, 0, 0, 0.72),
        0 54px 96px -44px rgba(221, 26, 240, 0.30);
}
@media (min-width: 992px) {
    .auth-split {
        grid-template-columns: 0.85fr 1fr;
    }
}

/* ---- brand side ---- */
.auth-aside {
    position: relative;
    overflow: hidden;
    /* dark ground, else orbs merge into one wash */
    background-color: #0e0a14;
    padding: 3rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
@media (min-width: 992px) {
    .auth-aside {
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }
}
/* light source behind the glass, for it to refract */
.auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    /* anchored to corners so glow leaks inward, center stays black */
    background:
        radial-gradient(circle at 0% 0%, rgba(221, 26, 240, 0.60), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(124, 45, 214, 0.55), transparent 45%),
        radial-gradient(circle at 100% 6%, rgba(168, 85, 247, 0.30), transparent 32%),
        radial-gradient(circle at 0% 92%, rgba(221, 26, 240, 0.22), transparent 30%);
    /* blur on the base rule, not in the keyframes. see .auth-orb */
    filter: blur(30px);
    pointer-events: none;
    animation: vexal-auth-glow 17s ease-in-out infinite;
    will-change: transform, opacity;
}
/* tinted pane, no backdrop-filter, orbs already blurred */
.auth-aside::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(155deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.00) 45%,
        rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
}
.auth-aside > * {
    position: relative;
    z-index: 1;
}
@keyframes vexal-auth-glow {
    0%   { transform: translate3d(0, 0, 0) scale(1);       opacity: 0.82; }
    50%  { transform: translate3d(4%, -3%, 0) scale(1.12); opacity: 1; }
    100% { transform: translate3d(0, 0, 0) scale(1);       opacity: 0.82; }
}

/* brand lockup */
.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.auth-brand img {
    height: 54px;
    width: auto;
    filter: drop-shadow(0 4px 12px rgba(221, 26, 240, 0.45));
}
.auth-brand span {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
}
.auth-tagline {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
    text-wrap: balance;
}
.auth-points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.8rem;
}
.auth-points li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.85rem;
    /* --text-muted washes out on this panel */
    color: var(--text-lifted);
}
.auth-points i {
    width: 1.9rem;
    height: 1.9rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.8rem;
    /* magenta on magenta vanished, lift glyph and darken chip */
    color: var(--primary-lifted);
    background: rgba(221, 26, 240, 0.16);
    border: 1px solid rgba(221, 26, 240, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ---- form side ---- */
.auth-main {
    padding: 3rem 2.25rem;
}
.auth-main .h3 {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}
/* alternate action, replaces the old card footer */
.auth-alt {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.auth-alt a {
    color: var(--primary);
    font-weight: 600;
}
.auth-alt a:hover {
    color: var(--primary-lifted);
}

/* ---- panels on register, same raised treatment ---- */
body:has(.auth-orb) .card {
    border: 1px solid transparent;
    background:
        linear-gradient(160deg,
            color-mix(in srgb, var(--bg-lifted) 94%, transparent) 0%,
            color-mix(in srgb, var(--bg-muted) 97%, transparent) 100%) padding-box,
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.16) 0%,
            rgba(255, 255, 255, 0.03) 45%,
            rgba(255, 255, 255, 0.08) 100%) border-box;
    border-radius: var(--rounding-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 10px 20px -6px rgba(0, 0, 0, 0.42),
        0 30px 60px -24px rgba(0, 0, 0, 0.66);
    overflow: hidden;
}
body:has(.auth-orb) .card .h3 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}
body:has(.auth-orb) .card-footer {
    background: color-mix(in srgb, var(--bg-accented) 45%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--text) 7%, transparent);
    text-align: center;
    padding: 1rem 1.5rem;
}
body:has(.auth-orb) .card-footer a {
    color: var(--primary);
}
body:has(.auth-orb) .card-footer a:hover {
    color: var(--primary-lifted);
}

/* standalone brand mark, register only */
.auth-brand-standalone {
    justify-content: center;
    margin: 2rem 0 1.75rem;
}

/* ---- fields: one unified control, icon sits inside ---- */
body:has(.auth-orb) .input-group {
    position: relative;
    display: block;
}
body:has(.auth-orb) .input-group-prepend {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    pointer-events: none;
}
body:has(.auth-orb) .input-group-text {
    background: none;
    border: none;
    color: var(--text-lifted);
    width: 2.9rem;
    padding: 0;
    justify-content: center;
    transition: color 0.18s ease-out;
}
body:has(.auth-orb) .form-control,
body:has(.auth-orb) .custom-select {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--rounding-md);
    color: var(--text);
    height: auto;
    padding: 0.75rem 0.95rem;
    /* inner top shadow sinks the field into the panel */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
    transition: background-color 0.18s ease-out, border-color 0.18s ease-out,
        box-shadow 0.18s ease-out;
}
/* icon/reveal are absolutely positioned, field keeps full radius */
body:has(.auth-orb) .input-group > .form-control {
    padding-left: 2.9rem;
}
body:has(.auth-orb) .input-group > .form-control,
body:has(.auth-orb) .input-group > .custom-select {
    border-radius: var(--rounding-md);
}
body:has(.auth-orb) .form-control:focus,
body:has(.auth-orb) .custom-select:focus {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--primary);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.35),
        0 0 0 3px rgba(221, 26, 240, 0.20),
        0 0 18px -2px rgba(221, 26, 240, 0.35);
}
body:has(.auth-orb) .input-group:focus-within .input-group-text {
    color: var(--primary);
}
body:has(.auth-orb) .form-control::placeholder {
    color: var(--text-lifted);
}
body:has(.auth-orb) .form-control-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

/* reveal button rides inside the field, no seam */
body:has(.auth-orb) .input-group-append {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
}
/* matches .btn-default's !important background */
body:has(.auth-orb) .btn-reveal-pw,
body:has(.auth-orb) .input-group .btn-reveal-pw:hover,
body:has(.auth-orb) .input-group .btn-reveal-pw:focus,
body:has(.auth-orb) .input-group .btn-reveal-pw:active {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none;
    color: var(--text-lifted);
    padding: 0 1rem;
    height: 100%;
    transition: color 0.18s ease-out;
}
body:has(.auth-orb) .input-group .btn-reveal-pw:hover,
body:has(.auth-orb) .input-group .btn-reveal-pw:focus,
body:has(.auth-orb) .input-group .btn-reveal-pw:active {
    color: var(--primary);
}
body:has(.auth-orb) .input-group > .pw-input {
    padding-right: 3.1rem;
}

/* ---- register: uses .prepend-icon, not .input-group ---- */
body:has(.auth-orb) .form-group.prepend-icon {
    position: relative;
    margin-bottom: 1rem;
}
body:has(.auth-orb) .prepend-icon .field-icon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2.9rem;
    margin: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-lifted);
    pointer-events: none;
    transition: color 0.18s ease-out;
}
body:has(.auth-orb) .prepend-icon .field {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--rounding-md);
    color: var(--text);
    height: auto;
    padding: 0.75rem 0.95rem 0.75rem 2.9rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
    transition: background-color 0.18s ease-out, border-color 0.18s ease-out,
        box-shadow 0.18s ease-out;
}
body:has(.auth-orb) .prepend-icon .field:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--primary);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.35),
        0 0 0 3px rgba(221, 26, 240, 0.20),
        0 0 18px -2px rgba(221, 26, 240, 0.35);
}
body:has(.auth-orb) .prepend-icon:focus-within .field-icon {
    color: var(--primary);
}
body:has(.auth-orb) .prepend-icon .field::placeholder {
    color: var(--text-lifted);
}
/* selects keep room for the caret */
body:has(.auth-orb) .prepend-icon select.field {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.4rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-lifted) 50%),
        linear-gradient(135deg, var(--text-lifted) 50%, transparent 50%);
    background-position: right 1.15rem center, right 0.9rem center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
/* phone field plugin wraps the input */
body:has(.auth-orb) .prepend-icon .iti {
    width: 100%;
}

body:has(.auth-orb) .card-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
    margin: 0 0 1.5rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
body:has(.auth-orb) .card-title small {
    font-weight: 400;
    color: var(--text-lifted);
}

.auth-page-head {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 2.25rem 0 2rem;
}
.auth-page-title {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
    margin: 0 0 0.4rem;
}
.auth-page-sub {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

/* register submit */
body:has(.auth-orb) #frmCheckout input[type="submit"].btn-primary {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    font-weight: 600;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}
.auth-remember .form-check-input {
    position: static;
    margin: 0;
}
.btn-primary.auth-submit {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    body:has(.auth-orb) .form-control,
    body:has(.auth-orb) .custom-select,
    body:has(.auth-orb) .input-group-text,
    body:has(.auth-orb) .btn-reveal-pw {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-orb-1,
    .auth-orb-2,
    .auth-aside::before {
        animation: none;
    }
}

/* ===== viewinvoice page (no #main-body wrapper, own document) ===== */
.invoice-container {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--bg-lifted) 92%, transparent) 0%,
        color-mix(in srgb, var(--bg-muted) 96%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: var(--rounding-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 2px 4px rgba(0, 0, 0, 0.32),
        0 24px 52px -28px rgba(0, 0, 0, 0.75),
        0 50px 90px -55px rgba(221, 26, 240, 0.22);
    /* clips status ribbon bleed to the card's true corner */
    position: relative;
    overflow: hidden;
    /* stock's 15px margin + width:100% overflowed the viewport */
    width: auto;
}
/* logo, sized to the header row not the source asset */
.invoice-container .invoice-header img {
    height: 96px;
    width: auto;
}
.invoice-container .table {
    color: var(--text);
}
.invoice-container .table th,
.invoice-container .table td {
    padding: 0.8rem 1rem;
    border-top: 1px solid var(--border-muted);
    font-variant-numeric: tabular-nums;
}
.invoice-container .table thead th,
.invoice-container .table thead td {
    border-bottom: 1px solid var(--border);
    color: var(--primary-lifted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
/* pay is the page's one primary action */
.invoice-container .payment-btn-container .btn {
    padding: 0.7rem 2rem;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 8px 24px -8px rgba(221, 26, 240, 0.55);
}
/* field labels, matches branded PDF's magenta accent */
.invoice-container .invoice-col > strong {
    color: var(--primary-lifted);
}
.invoice-container .table-hover tbody tr:hover {
    color: var(--text);
    background-color: rgba(221, 26, 240, 0.06);
}
/* totals read as one summing block */
.invoice-container td.total-row {
    background-color: color-mix(in srgb, var(--primary) 6%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    font-weight: 600;
}
/* corner pill, matches PDF's status style */
.invoice-container .row > div:has(> .invoice-status) {
    /* undo .invoice-col relative, else pill anchors to column */
    position: static;
}
.invoice-container .invoice-status {
    position: absolute;
    /* zero out stock's 20px top margin */
    margin: 0;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
}
.invoice-container .invoice-status span {
    display: inline-block;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* status tones, matching the pill set used in the invoices table */
.invoice-container .draft,
.invoice-container .cancelled {
    background-color: color-mix(in srgb, var(--neutral) 18%, transparent);
    border-color: color-mix(in srgb, var(--neutral) 40%, transparent);
    color: var(--neutral-lifted);
}
.invoice-container .unpaid {
    background-color: color-mix(in srgb, var(--error) 18%, transparent);
    border-color: color-mix(in srgb, var(--error) 40%, transparent);
    color: var(--error-lifted);
}
.invoice-container .paid {
    background-color: color-mix(in srgb, var(--success) 18%, transparent);
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
    color: var(--success-lifted);
}
.invoice-container .refunded {
    background-color: color-mix(in srgb, var(--info) 18%, transparent);
    border-color: color-mix(in srgb, var(--info) 40%, transparent);
    color: var(--info-lifted);
}
.invoice-container .collections {
    background-color: color-mix(in srgb, var(--warning) 18%, transparent);
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
    color: var(--warning-lifted);
}
/* unscoped, viewinvoice/viewquote have their own body tag */
body p.text-center.d-print-none > a {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--bg-muted) 45%, transparent);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    transition: border-color 160ms ease-out, color 160ms ease-out, background-color 160ms ease-out;
}
body p.text-center.d-print-none > a:hover,
body p.text-center.d-print-none > a:focus {
    border-color: color-mix(in srgb, var(--primary) 50%, transparent);
    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--text);
    text-decoration: none;
}

/* ledger sub-panel */
.invoice-container .card {
    background-color: var(--bg-muted);
    border: 1px solid var(--border-muted);
}
/* magenta tint, !important beats bg-info/bg-success utilities */
.invoice-container .card-title.bg-info,
.invoice-container .card-header.bg-success {
    background-color: rgba(221, 26, 240, 0.1) !important;
    color: var(--primary-lifted) !important;
    border-bottom: 1px solid var(--border);
}
/* Invoice Items / Quote Line Items panel header */
.invoice-container .card-header {
    background-color: rgba(221, 26, 240, 0.1);
    border-bottom: 1px solid var(--border);
}
.invoice-container .card-header .card-title {
    color: var(--primary-lifted);
}
/* print reverts to ink on paper, tokens cascade above */
@media print {
    .invoice-container {
        background: #fff !important;
        color: #111114;
        --bg: #fff;
        --bg-muted: #fff;
        --bg-lifted: #f5f5f6;
        --bg-accented: #eceef0;
        --text: #111114;
        --text-muted: #55555f;
        --text-lifted: #3a3a45;
        --text-accented: #26262e;
        --border: #ddd;
        --border-muted: #eee;
        --border-lifted: #ccc;
        --primary: #8a1a94;
        --primary-lifted: #8a1a94;
        --error-lifted: #c81e3a;
        --success-lifted: #157347;
        --info-lifted: #0f6d94;
        --warning-lifted: #b45309;
    }
}

/* ===== primitive: card baseline ===== */
body #main-body .card,
body #main-body .panel {
    background-color: var(--bg-muted);
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* default gap between stacked cards */
body #main-body .card + .card {
    margin-top: 1.5rem;
}
/* undo stack gap inside a grid, siblings sit side by side */
body #main-body .vx-panel-grid .card + .card,
body #main-body .client-home-cards .row > .card + .card {
    margin-top: 0;
}
/* viewemail.tpl has no #main-body wrapper, scope separately */
body#popup-backdrop .card {
    margin: 1.5rem;
    background-color: var(--bg-muted);
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
body#popup-backdrop .card-header,
body#popup-backdrop .card-footer {
    background-color: transparent;
    border-color: var(--border);
    color: var(--text);
}
body#popup-backdrop .card-body {
    color: var(--text);
}
body#popup-backdrop h2 {
    color: var(--text);
}
body #main-body .btn,
body #main-body .btn-sm,
body #main-body .btn-xs {
    border-radius: 999px;
    font-weight: 600;
}
body #main-body .btn-primary {
    box-shadow: 0 2px 12px rgba(221, 26, 240, 0.28);
}
body #main-body .btn-primary:hover,
body #main-body .btn-primary:focus {
    box-shadow: 0 10px 28px -6px rgba(221, 26, 240, 0.55);
}

/* ===== primitive: data table ===== */
/* eyebrow table headers */
body #main-body .table thead th,
body #main-body table.table-list thead th {
    padding: 0.75rem 1rem;
    border-top: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-lifted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body #main-body .table td {
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--border-muted);
    vertical-align: middle;
}
body #main-body table.table-list > tbody > tr[onclick] {
    cursor: pointer;
}
/* tables never push the body */
body #main-body .table-container {
    overflow-x: auto;
}
/* long department/subject text forces tall cramped rows */
@media (max-width: 575px) {
    body #main-body table.table-list thead th,
    body #main-body table.table-list td {
        padding: 0.6rem 0.5rem;
        font-size: var(--text-sm);
    }
    body #main-body table.table-list td {
        line-height: 1.3;
    }
}
/* legible empty table */
body #main-body td.dataTables_empty {
    padding: 3rem 1rem;
    color: var(--text-lifted);
    font-size: var(--text-lg);
    text-align: center;
}

/* ===== primitive: tinted status pills ===== */
body #main-body .label.status,
body .dataTables_wrapper table.table-list .label.status {
    display: inline-block;
    padding: 0.3em 0.85em;
    border: 1px solid transparent;
    border-radius: 999px;
    background-color: var(--bg-accented);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
/* match [class~=status-x] alone, some widgets omit bare .status */
/* green: healthy */
body #main-body [class~="status-active"],
body #main-body [class~="status-open"],
body #main-body [class~="status-paid"],
body #main-body [class~="status-completed"],
body #main-body [class~="status-delivered"],
body #main-body [class~="status-accepted"] {
    border-color: rgba(34, 197, 94, 0.28) !important;
    background-color: rgba(34, 197, 94, 0.12) !important;
    color: var(--success-lifted) !important;
}
/* red: needs action, status-overdue included defensively */
body #main-body [class~="status-unpaid"],
body #main-body [class~="status-overdue"],
body #main-body [class~="status-terminated"],
body #main-body [class~="status-fraud"],
body #main-body [class~="status-dead"],
body #main-body [class~="status-collections"] {
    border-color: rgba(244, 63, 94, 0.28) !important;
    background-color: rgba(244, 63, 94, 0.12) !important;
    color: var(--error-lifted) !important;
}
/* amber: paused */
body #main-body [class~="status-suspended"],
body #main-body [class~="status-grace"],
body #main-body [class~="status-redemption"],
body #main-body [class~="status-onhold"] {
    border-color: rgba(245, 158, 11, 0.28) !important;
    background-color: rgba(245, 158, 11, 0.12) !important;
    color: var(--warning-lifted) !important;
}
/* cyan: in flight */
body #main-body [class~="status-pending"],
body #main-body [class~="status-inprogress"],
body #main-body [class~="status-payment-pending"],
body #main-body [class~="status-pending-registration"],
body #main-body [class~="status-pending-transfer"],
body #main-body [class~="status-customer-reply"] {
    border-color: rgba(56, 189, 248, 0.28) !important;
    background-color: rgba(56, 189, 248, 0.12) !important;
    color: var(--secondary-lifted) !important;
}
/* violet: answered */
body #main-body [class~="status-answered"] {
    border-color: rgba(168, 85, 247, 0.28) !important;
    background-color: rgba(168, 85, 247, 0.12) !important;
    color: var(--notice-lifted) !important;
}
/* muted: closed out */
body #main-body [class~="status-closed"],
body #main-body [class~="status-cancelled"],
body #main-body [class~="status-expired"],
body #main-body [class~="status-refunded"],
body #main-body [class~="status-lost"],
body #main-body [class~="status-transferred-away"] {
    border-color: var(--border) !important;
    background-color: var(--bg-accented) !important;
    color: var(--text-muted) !important;
}
/* bare status-x tokens get .label.status pill shape too */
body #main-body [class*="status-"]:not(.product-status):not([class*="product-status-"]) {
    display: inline-block;
    padding: 0.3em 0.85em;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
/* plain labels match pills */
body #main-body .label {
    display: inline-block;
    padding: 0.3em 0.85em;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
}
body #main-body .label-success {
    border-color: rgba(34, 197, 94, 0.28);
    background-color: rgba(34, 197, 94, 0.12);
    color: var(--success-lifted);
}
body #main-body .label-danger {
    border-color: rgba(244, 63, 94, 0.28);
    background-color: rgba(244, 63, 94, 0.12);
    color: var(--error-lifted);
}
body #main-body .label-info {
    border-color: rgba(56, 189, 248, 0.28);
    background-color: rgba(56, 189, 248, 0.12);
    color: var(--secondary-lifted);
}
body #main-body .label-default {
    border-color: var(--border);
    background-color: var(--bg-accented);
    color: var(--text-muted);
}
body #main-body .label-warning {
    border-color: rgba(245, 158, 11, 0.28);
    background-color: rgba(245, 158, 11, 0.12);
    color: var(--warning-lifted);
}
body #main-body .label-primary {
    border-color: rgba(168, 85, 247, 0.28);
    background-color: rgba(168, 85, 247, 0.12);
    color: var(--notice-lifted);
}

/* ===== primitive: form rhythm ===== */
body #main-body label,
body #main-body .control-label {
    margin-bottom: 0.375rem;
    color: var(--text-accented);
    font-size: var(--text-md);
    font-weight: 500;
}
body #main-body .form-group {
    margin-bottom: 1.25rem;
}
body #main-body small.form-text,
body #main-body .help-block,
body #main-body .form-text.text-muted {
    color: var(--text-lifted);
    font-size: var(--text-sm);
}
/* eyebrow legends */
body #main-body fieldset legend {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-muted);
    color: var(--text-lifted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ===== primitive: alerts, tabs, pagination ===== */
body #main-body .alert {
    border-radius: var(--rounding-md);
    border-width: 1px;
    font-size: var(--text-lg);
}
body #main-body .alert-success {
    border-color: rgba(34, 197, 94, 0.28);
    background-color: rgba(34, 197, 94, 0.10);
    color: var(--success-lifted);
}
/* WHMCS core hardcodes dark text on this link */
body #main-body .alert-success .alert-link,
body #main-body .alert-success a#ticket-number {
    color: var(--success-lifted);
}
body #main-body .alert-danger {
    border-color: rgba(244, 63, 94, 0.28);
    background-color: rgba(244, 63, 94, 0.10);
    color: var(--error-lifted);
}
body #main-body .alert-warning {
    border-color: rgba(245, 158, 11, 0.28);
    background-color: rgba(245, 158, 11, 0.10);
    color: var(--warning-lifted);
}
/* magenta not stock cyan, tint icon/title only */
body #main-body .alert-info {
    border-color: rgba(221, 26, 240, 0.28);
    background-color: rgba(221, 26, 240, 0.08);
    color: var(--text);
}
body #main-body .alert-info > i:first-child,
body #main-body .alert-info .alert-heading,
body #main-body .alert-info strong:first-child {
    color: var(--primary-lifted);
}

/* pill pagination */
body #main-body .page-link {
    margin: 0 2px;
    border-radius: 999px;
}
body #main-body .pagination {
    gap: 0;
}

/* underline tabs, not boxes */
body #main-body .nav-tabs {
    border-bottom: 1px solid var(--border);
}
body #main-body .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    font-weight: 500;
}
body #main-body .nav-tabs .nav-link:hover {
    border-bottom-color: var(--border-lifted);
    color: var(--text);
}
body #main-body .nav-tabs .nav-link.active,
body #main-body .nav-tabs .nav-item.show .nav-link {
    border-bottom-color: var(--primary);
    background-color: transparent;
    color: var(--text);
}

/* ===== billing: glass on cards ===== */
/* .vx-glass alone loses to `.card`, match its specificity */
body #main-body .card.vx-glass,
body #main-body .panel.vx-glass {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: var(--rounding-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.30),
        0 18px 40px -24px rgba(0, 0, 0, 0.75),
        0 44px 80px -50px rgba(221, 26, 240, 0.22);
}
/* headers/footers ride the glass, no own fill */
body #main-body .card.vx-glass > .card-header,
body #main-body .card.vx-glass > .card-footer {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--text) 8%, transparent);
}

/* ===== billing: table panel ===== */
/* container carries the surface, table inside goes transparent */
body #main-body .table-container {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: var(--rounding-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.30),
        0 18px 40px -24px rgba(0, 0, 0, 0.75),
        0 44px 80px -50px rgba(221, 26, 240, 0.22);
    /* clip table corners to panel radius, scroll moves to .listtable */
    overflow: hidden;
    /* keeps last row clear of the clipped corner curve */
    padding-bottom: 0.4rem;
}
/* row highlight must read square, no cell rounding */
body #main-body .table-container table.table-list > tbody > tr > td {
    border-radius: 0;
}
/* container is the surface now, kill inner card + radius */
body #main-body .table-container table.table-list {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    /* clearance so last row misses the clipped corner */
    margin-bottom: 0.4rem;
}
/* mark sort on the label, avoids stray block on two-column sort */
body #main-body .dataTables_wrapper table.table-list thead th.sorting_asc,
body #main-body .dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: transparent !important;
    color: var(--primary-lifted);
}
/* breathing room before the powered-by credit */
body #main-body .table-container {
    margin-bottom: 2rem;
}
/* spaces WHMCS's bare Powered-by notice */
body #main-body .primary-content > p:last-child {
    margin-top: 2rem;
}
/* wide tables scroll here, not on the panel */
body #main-body .dataTables_wrapper .listtable {
    overflow-x: auto;
}

/* ===== billing: datatables chrome ===== */
/* search + info become one header band above the table */
body #main-body .dataTables_wrapper .dataTables_filter {
    float: left;
    padding: 0.9rem 1rem;
    text-align: left;
}
body #main-body .dataTables_wrapper .dataTables_filter label {
    display: block;
    position: relative;
    margin: 0;
}
/* moves theme.css's existing magnifier into the field */
body #main-body .dataTables_wrapper .dataTables_filter::after {
    left: 2.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-lifted);
    font-size: 0.8rem;
    transition: color 0.18s ease-out;
}
body #main-body .dataTables_wrapper .dataTables_filter:focus-within::after {
    color: var(--primary);
}
body #main-body .dataTables_wrapper .dataTables_filter label .form-control {
    width: 18rem;
    max-width: 100%;
    height: auto;
    padding: 0.6rem 0.9rem 0.6rem 2.6rem;
    background-color: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
    color: var(--text);
    font-size: var(--text-md);
    transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
}
body #main-body .dataTables_wrapper .dataTables_filter label .form-control:focus {
    border-color: var(--primary);
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.35),
        0 0 0 3px rgba(221, 26, 240, 0.20);
}
/* record count, right side caption */
body #main-body .dataTables_wrapper .dataTables_info {
    float: right;
    padding: 1.45rem 1.25rem;
    color: var(--text-lifted);
    font-size: var(--text-sm);
}
/* hairline before table starts */
body #main-body .dataTables_wrapper .listtable table.table-list {
    clear: both;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
/* length + pagination, footer band inside panel */
body #main-body .table-container .dataTables_wrapper .dataTables_length,
body #main-body .table-container .dataTables_wrapper .dataTables_paginate {
    margin: 0;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
body #main-body .table-container .dataTables_wrapper .dataTables_paginate {
    border-top-color: transparent;
}
body #main-body .dataTables_wrapper .dataTables_length select {
    padding: 0.3rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
    color: var(--text);
}
body #main-body .dataTables_wrapper .paginate_button {
    border-radius: 999px !important;
}
@media (max-width: 575px) {
    body #main-body .dataTables_wrapper .dataTables_filter,
    body #main-body .dataTables_wrapper .dataTables_info {
        float: none;
        padding: 0.75rem 0.85rem;
    }
    body #main-body .dataTables_wrapper .dataTables_info {
        padding-top: 0;
    }
    body #main-body .dataTables_wrapper .dataTables_filter label .form-control {
        width: 100%;
    }
    /* stacked footer, only top edge draws a rule */
    body #main-body .table-container .dataTables_wrapper .dataTables_paginate {
        padding-top: 0;
    }
}

/* ===== billing: rows ===== */
/* money and dates align column-wise */
body #main-body .vx-money,
body #main-body table.table-list td {
    font-variant-numeric: tabular-nums;
}
/* first column leads the row */
body #main-body table.table-list td:first-child {
    color: var(--text);
    font-weight: 600;
}
/* no gradient here, would restart per cell not per row */
body #main-body table.table-list > tbody > tr[onclick] > td {
    transition: background-color 0.16s ease-out;
}
/* chevron on hover so the row reads as navigable */
body #main-body table.table-list > tbody > tr[onclick] > td:last-child {
    position: relative;
}
body #main-body table.table-list > tbody > tr[onclick] > td:last-child::after {
    content: "\f054";
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translate(-4px, -50%);
    color: var(--primary);
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.16s ease-out, transform 0.16s ease-out;
}
body #main-body table.table-list > tbody > tr[onclick]:hover > td:last-child::after {
    opacity: 1;
    transform: translate(0, -50%);
}
/* action columns own their last cell, no chevron */
body #main-body table.table-list > tbody > tr[onclick] > td:last-child:has(form),
body #main-body table.table-list > tbody > tr[onclick] > td:last-child:has(.btn) {
    position: static;
}
body #main-body table.table-list > tbody > tr[onclick] > td:last-child:has(form)::after,
body #main-body table.table-list > tbody > tr[onclick] > td:last-child:has(.btn)::after {
    content: none;
}
@media (prefers-reduced-motion: reduce) {
    body #main-body table.table-list > tbody > tr[onclick] > td,
    body #main-body table.table-list > tbody > tr[onclick] > td:last-child::after {
        transition: none;
    }
}

/* ===== billing: summary strip ===== */
/* .vx-info-strip is the generic alias, reused later */
.vx-billing-summary,
.vx-info-strip {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    border-radius: var(--rounding-lg);
    overflow: hidden;
}
.vx-summary-item {
    flex: 1 1 12rem;
    padding: 1.1rem 1.35rem;
    border-right: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.vx-summary-item:last-child {
    border-right: 0;
}
.vx-summary-label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--text-lifted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.vx-summary-value {
    display: block;
    color: var(--text);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.vx-summary-item.is-due .vx-summary-value {
    color: var(--error-lifted);
}
/* money you can act on now vs money still maturing */
.vx-summary-item.is-earned .vx-summary-value {
    color: var(--success-lifted);
}
.vx-summary-item.is-pending .vx-summary-value {
    color: var(--warning-lifted);
}
@media (max-width: 575px) {
    .vx-summary-item {
        flex: 1 1 100%;
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    }
    .vx-summary-item:last-child {
        border-bottom: 0;
    }
}

/* ===== billing: masspay ===== */
/* invoice group header rows */
body #main-body tr td.bg-default {
    background-color: color-mix(in srgb, var(--primary) 8%, transparent) !important;
    color: var(--primary-lifted);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
}
/* totals read as a summing block, not more line items */
body #main-body tr.masspay-total td {
    background-color: transparent !important;
    border-top: 0;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
body #main-body tr.masspay-total:first-of-type td {
    border-top: 1px solid var(--border);
    padding-top: 0.9rem;
}
body #main-body tr.masspay-total:last-child td {
    padding-bottom: 0.9rem;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
}

/* ===== billing: payment summary ===== */
body #main-body .invoice-summary-table td {
    font-variant-numeric: tabular-nums;
}
/* last total row is the balance, not another line */
body #main-body .invoice-summary-table tr:last-child td.total-row {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
}

/* ===== billing: payment methods ===== */
.vx-paymethod-list {
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}
.vx-paymethod {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: var(--rounding-md);
    background-color: rgba(255, 255, 255, 0.03);
    transition: border-color 0.18s ease-out, background-color 0.18s ease-out;
}
.vx-paymethod:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    background-color: rgba(221, 26, 240, 0.05);
}
.vx-paymethod-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rounding-md);
    background-color: rgba(221, 26, 240, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    color: var(--primary);
    font-size: 1.1rem;
}
.vx-paymethod-body {
    flex: 1 1 auto;
    min-width: 0;
}
.vx-paymethod-name {
    display: block;
    color: var(--text);
    font-weight: 600;
}
.vx-paymethod-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.2rem;
    color: var(--text-lifted);
    font-size: var(--text-sm);
}
.vx-paymethod-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex-shrink: 0;
}
.vx-paymethod-empty {
    padding: 2.5rem 1rem;
    color: var(--text-lifted);
    text-align: center;
}
@media (max-width: 575px) {
    .vx-paymethod {
        flex-wrap: wrap;
    }
    .vx-paymethod-actions {
        width: 100%;
    }
}

/* ===== support: ticket list ===== */
/* kills light-theme stripe, matches bootstrap's !important */
body #main-body .table-list > tbody > tr > td a.border-left {
    border-left: 0 !important;
    padding-left: 0 !important;
}
/* unread subject: full brand weight */
body #main-body .ticket-subject.unread {
    color: var(--text);
    font-weight: 700;
}

/* ===== support: view ticket ===== */
body #main-body .card.view-ticket {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: var(--rounding-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.30),
        0 18px 40px -24px rgba(0, 0, 0, 0.75),
        0 44px 80px -50px rgba(221, 26, 240, 0.22);
}
/* theme.css hardcodes a light #ddd rule between replies */
body #main-body .view-ticket .card-body {
    border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
/* flush against the card, no separate tinted band */
body #main-body .view-ticket .posted-by {
    background-color: transparent !important;
}
body #main-body .view-ticket .posted-by .posted-by-name {
    color: var(--text);
}
/* another light-theme #ddd leftover */
body #main-body .view-ticket .attachments {
    border-top: 1px dashed color-mix(in srgb, var(--text) 12%, transparent);
}
body #main-body .view-ticket .attachment-list li span {
    border-color: color-mix(in srgb, var(--text) 10%, transparent);
}
/* match type class alone, badge/label pairing is inconsistent */
body #main-body [class*="requestor-type-"] {
    padding: 0.3em 0.85em;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
}
body #main-body .requestor-type-owner {
    background-color: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.28) !important;
    color: var(--success-lifted) !important;
}
body #main-body .requestor-type-operator {
    background-color: rgba(56, 189, 248, 0.12) !important;
    border-color: rgba(56, 189, 248, 0.28) !important;
    color: var(--secondary-lifted) !important;
}
body #main-body .requestor-type-authorizeduser {
    background-color: rgba(168, 85, 247, 0.12) !important;
    border-color: rgba(168, 85, 247, 0.28) !important;
    color: var(--notice-lifted) !important;
}
body #main-body .requestor-type-registereduser {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.28) !important;
    color: var(--warning-lifted) !important;
}
body #main-body .requestor-type-subaccount,
body #main-body .requestor-type-guest {
    background-color: var(--bg-accented) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}

/* grey default not #999, amber not gold, avoids magenta clash */
body #main-body .ticket-reply .rating span.star:before,
body #main-body .ticket-reply .rating-done span.star:before {
    color: var(--text-lifted);
}
body #main-body .ticket-reply .rating span.star:hover:before,
body #main-body .ticket-reply .rating span.star:hover ~ span.star:before,
body #main-body .ticket-reply .rating-done span.star.active:before {
    color: var(--warning);
}
/* reply form rides the same glass surface as the thread above it */
body #main-body .card#ticketReplyContainer {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: var(--rounding-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.30),
        0 18px 40px -24px rgba(0, 0, 0, 0.75),
        0 44px 80px -50px rgba(221, 26, 240, 0.22);
}

/* ===== support: submit flow ===== */
/* department picker, same row affordance as paymethod list */
.vx-pick-list {
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
}
.vx-pick-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: var(--rounding-md);
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.18s ease-out, background-color 0.18s ease-out;
}
.vx-pick-item:hover,
.vx-pick-item:focus {
    border-color: color-mix(in srgb, var(--primary) 30%, transparent);
    background-color: rgba(221, 26, 240, 0.05);
    color: var(--text);
    text-decoration: none;
}
.vx-pick-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rounding-md);
    background-color: rgba(221, 26, 240, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    color: var(--primary);
    font-size: 1.1rem;
}
.vx-pick-body {
    flex: 1 1 auto;
    min-width: 0;
}
.vx-pick-name {
    display: block;
    font-weight: 600;
}
.vx-pick-desc {
    display: block;
    margin-top: 0.15rem;
    color: var(--text-lifted);
    font-size: var(--text-sm);
}

/* bare unclassed span[style=color], build a pill for it */
body #main-body .recent-ticket span[style*="color:"] {
    padding: 0.2em 0.7em;
    border-radius: 999px;
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    background-color: var(--bg-accented) !important;
    border: 1px solid var(--border);
    color: var(--text-accented) !important;
}
/* open, brand green, matches with/without space after colon */
body #main-body .recent-ticket span[style*="color: #779500"],
body #main-body .recent-ticket span[style*="color:#779500"] {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.35);
    color: var(--success-lifted) !important;
}
/* answered, WHMCS ships this status as #000000 */
body #main-body .recent-ticket span[style*="color: #000000"],
body #main-body .recent-ticket span[style*="color:#000000"] {
    background-color: rgba(168, 85, 247, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.35);
    color: var(--notice-lifted) !important;
}
/* customer reply, cyan like every other in-flight status */
body #main-body .recent-ticket span[style*="color: #ff8c00"],
body #main-body .recent-ticket span[style*="color:#ff8c00"] {
    background-color: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.35);
    color: var(--secondary-lifted) !important;
}
/* closed, muted */
body #main-body .recent-ticket span[style*="color: #cccccc"],
body #main-body .recent-ticket span[style*="color:#cccccc"] {
    background-color: var(--bg-accented) !important;
    border-color: var(--border);
    color: var(--text-muted) !important;
}

/* join plain sibling input+button, no .input-group markup here */
body #main-body #inputAddCcEmail {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}
body #main-body #btnAddCcEmail {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* match the field, not the global pill btn */
    border-top-right-radius: var(--rounding-md);
    border-bottom-right-radius: var(--rounding-md);
}

/* ===== phase 5: pterosync module ===== */

/* scoped to module tab region, matches bootstrap's !important */
body #main-body #myTabContent .text-success {
    color: var(--success-lifted) !important;
}
body #main-body #myTabContent .text-danger {
    color: var(--error-lifted) !important;
}

/* modal footer kept a light rule */
.modal-footer {
    border-top-color: var(--border);
}

/* quick actions, tinted to match alert primitives */
body #main-body #myTabContent .btn-success {
    background-color: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.35);
    color: var(--success-lifted);
}
body #main-body #myTabContent .btn-warning {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
    color: var(--warning-lifted);
}
body #main-body #myTabContent .btn-danger {
    background-color: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.35);
    color: var(--error-lifted);
}
body #main-body #myTabContent .btn-info {
    background-color: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.35);
    color: var(--secondary-lifted);
}

/* stack full width, grids the .col-12 sections not the panels */
body #main-body .client-home-cards .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
/* auto-fill, not auto-fit, lone panel keeps its track width */
body #main-body .client-home-cards .vx-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    align-items: start;
}
/* space before "Powered by" notice, no markup there to target */
body #main-body .client-home-cards {
    margin-bottom: 2rem;
}

/* match inline style itself, not per-widget wrapper markup */
body #main-body .label[style*="background-color"],
body #main-body [class*="status"][style*="background-color"] {
    padding: 0.3em 0.85em;
    border-radius: 999px;
    display: inline-block;
    font-weight: 600;
    background-color: var(--bg-accented) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-accented) !important;
}
/* open / active, matches the green used everywhere else */
body #main-body .label[style*="#779500"] {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: var(--success-lifted) !important;
}
/* answered, matches the violet used everywhere else */
body #main-body .label[style*="#000000"] {
    background-color: rgba(168, 85, 247, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.35) !important;
    color: var(--notice-lifted) !important;
}
/* customer reply, cyan like every other in-flight status */
body #main-body .label[style*="#ff6600"],
body #main-body .label[style*="#ff8c00"] {
    background-color: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    color: var(--secondary-lifted) !important;
}
/* closed, muted */
body #main-body .label[style*="#cccccc"] {
    background-color: var(--bg-accented) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}
/* sidebar pairs a status pill with a priority pill, keep them level */
body #main-body .ticket-details-children {
    color: var(--text-muted);
}
body #main-body .ticket-details-children .label {
    margin-right: 0.4rem;
    vertical-align: middle;
}
/* priority pill, hook wraps the bare word, unknown levels stay neutral */
body #main-body .vx-priority {
    border-color: var(--border);
    background-color: var(--bg-accented);
    color: var(--text-muted);
}
body #main-body .vx-priority-high {
    border-color: rgba(244, 63, 94, 0.28);
    background-color: rgba(244, 63, 94, 0.12);
    color: var(--error-lifted);
}
body #main-body .vx-priority-medium {
    border-color: rgba(245, 158, 11, 0.28);
    background-color: rgba(245, 158, 11, 0.12);
    color: var(--warning-lifted);
}
body #main-body .vx-priority-low {
    border-color: rgba(34, 197, 94, 0.28);
    background-color: rgba(34, 197, 94, 0.12);
    color: var(--success-lifted);
}

/* button floats top-right, long titles wrap beside it not below */
body #main-body .client-home-cards .card-header .card-title {
    display: flow-root;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
}
/* leading icon, magenta accent for the title */
body #main-body .client-home-cards .card-header .card-title > i {
    color: var(--primary);
    font-size: 1.05rem;
    margin-right: 0.2rem;
}
/* action button pinned top-right, title text flows around it */
body #main-body .client-home-cards .card-header .card-title .float-right {
    float: right;
    margin-left: 0.75rem;
}

/* "View More" link, was bare muted text with no affordance */
body #main-body .client-home-cards .card-footer {
    padding: 0.85rem 1.35rem;
    border-top: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
    text-align: right;
}
body #main-body .client-home-cards .card-footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
}
body #main-body .client-home-cards .card-footer a::after {
    content: "\2192";
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
body #main-body .client-home-cards .card-footer a:hover {
    color: var(--primary-lifted);
    text-decoration: none;
}
body #main-body .client-home-cards .card-footer a:hover::after {
    transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
    body #main-body .client-home-cards .card-footer a::after,
    body #main-body .client-home-cards .card-footer a:hover::after {
        transition: none;
        transform: none;
    }
}

/* ===== dashboard: glass panels + sidebar cards ===== */
/* dashboard-scoped, invoice/ticket internal cards stay flat */
body #main-body .client-home-cards .card,
body #main-body .card-sidebar {
    background: var(--panel-surface-soft);
    border: 1px solid var(--panel-border);
    border-radius: var(--rounding-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 18px 36px -22px rgba(0, 0, 0, 0.75);
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
/* gentle magenta glow, no lift, content panels */
body #main-body .client-home-cards .card:hover,
body #main-body .card-sidebar:hover {
    border-color: color-mix(in srgb, var(--primary) 26%, var(--text) 10%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 22px 40px -20px color-mix(in srgb, var(--primary) 20%, rgba(0, 0, 0, 0.75));
}
/* tighter rhythm, short panels stop ballooning */
body #main-body .client-home-cards .card-header,
body #main-body .card-sidebar .card-header {
    padding: 1.05rem 1.35rem;
}
body #main-body .client-home-cards .card-body {
    padding: 1.35rem;
}
/* sidebar card title + minimise chevron */
body #main-body .card-sidebar .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
}
body #main-body .card-sidebar .card-title > i:first-child {
    color: var(--primary);
}
body #main-body .card-sidebar .card-title .card-minimise {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8rem;
}
/* barely-there divider, glass depth already separates it */
body #main-body .client-home-cards .card-header {
    border-bottom-color: color-mix(in srgb, var(--text) 6%, transparent);
}

/* ===== sidebar cards: content hierarchy ===== */
/* gives WHMCS's flat strong/em/text run real hierarchy */
body #main-body .card-sidebar .card-body {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-muted);
}
body #main-body .card-sidebar .card-body strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text);
}
body #main-body .card-sidebar .card-body em {
    display: block;
    margin-bottom: 0.4rem;
    font-style: normal;
    font-size: 0.8rem;
    color: var(--text-lifted);
}
/* drop redundant <br>, block display already spaces the line */
body #main-body .card-sidebar .card-body strong + br,
body #main-body .card-sidebar .card-body em + br {
    display: none;
}
/* actions span the rail width, one column */
body #main-body .card-sidebar .card-body .btn,
body #main-body .card-sidebar .card-footer .btn {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
}
/* input-group buttons stay on the field's line */
body #main-body .card-sidebar .card-body .input-group .btn,
body #main-body .card-sidebar .card-footer .input-group .btn {
    display: inline-block;
    width: auto;
    margin-top: 0;
}

/* ===== dashboard: list rows (tickets, news, services) ===== */
/* drop hard rule, use rhythm + hover */
/* theme.css paints hard #ddd rules top+bottom with !important */
body #main-body .client-home-cards .list-group,
body #main-body .client-home-cards .list-group-flush {
    border: none !important;
    background: none;
    padding: 0.4rem;
    max-height: 14rem;
    overflow-y: auto;
    /* belt-and-suspenders, this element showed a scrollbar track */
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}
body #main-body .client-home-cards .list-group::-webkit-scrollbar,
body #main-body .client-home-cards .list-group-flush::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
body #main-body .client-home-cards .list-group::-webkit-scrollbar-track,
body #main-body .client-home-cards .list-group::-webkit-scrollbar-thumb {
    background: transparent;
}
/* clip scrolling list to card's rounded corners */
body #main-body .client-home-cards .card {
    overflow: hidden;
}
body #main-body .client-home-cards .list-group-item {
    border: none !important;
    border-radius: var(--rounding, 0.5rem);
    padding: 0.75rem 0.9rem;
    margin: 0;
    background: transparent;
    transition: background-color 0.15s ease-out;
}
/* whisper-thin separator, indented off both edges */
body #main-body .client-home-cards .list-group-item + .list-group-item {
    position: relative;
}
body #main-body .client-home-cards .list-group-item + .list-group-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0.9rem;
    right: 0.9rem;
    height: 1px;
    background: color-mix(in srgb, var(--text) 7%, transparent);
}
body #main-body .client-home-cards .list-group-item:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
/* hover fill sits over its own top separator */
body #main-body .client-home-cards .list-group-item:hover::before,
body #main-body .client-home-cards .list-group-item:hover + .list-group-item::before {
    opacity: 0;
}

/* ===== dashboard: message-body cards (overdue, affiliate) ===== */
/* keep copy top-left, not a lonely centered sentence */
body #main-body .client-home-cards .card-body > p:only-child {
    margin: 0;
    line-height: 1.6;
}

/* ===== dashboard: two-column panel layout ===== */
/* second .col-12 section lays out two panels up */
@media (min-width: 992px) {
    /* 2x2 grid, align-items:start ends each card at its own content */
    body #main-body .client-home-cards .row > .col-12 + .col-12 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        align-items: start;
    }
    body #main-body .client-home-cards .row > .col-12 + .col-12 > .card {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    body #main-body .client-home-cards .card,
    body #main-body .card-sidebar {
        transition: none;
    }
}

/* ===== homepage: hero ===== */
/* was 3rem + 3rem seams, opened a 6rem dark gap */
.vx-hero {
    padding: 3.5rem 0 2rem;
}
.vx-kicker {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.vx-hero-heading {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}
/* breathing halo, tight core + wide bloom swell together */
@keyframes vexal-text-glow {
    0%, 100% {
        text-shadow:
            0 0 10px color-mix(in srgb, var(--primary) 40%, transparent),
            0 0 24px color-mix(in srgb, var(--primary) 18%, transparent);
    }
    50% {
        text-shadow:
            0 0 18px color-mix(in srgb, var(--primary) 72%, transparent),
            0 0 44px color-mix(in srgb, var(--primary) 40%, transparent);
    }
}
.vx-hero-heading .text-primary,
.vx-cta-heading .text-primary {
    animation: vexal-text-glow 3.6s ease-in-out infinite;
}
.vx-hero-sub {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 36rem;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.vx-hero-ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== homepage: sections ===== */
.vx-section {
    padding: 2rem 0;
}
.vx-section-heading {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.vx-section-sub {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* ===== homepage: glass surface (shared) ===== */
.vx-glass {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 14px 28px -18px rgba(0, 0, 0, 0.7);
}

/* ===== homepage: product cards ===== */
.vx-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
/* pins Order Now link to card foot, evens out uneven taglines */
.vx-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--rounding-lg);
    padding: 2rem;
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.22s ease-out,
        box-shadow 0.22s ease-out;
}
.vx-product-card::after {
    content: "";
    position: absolute;
    top: -60%;
    right: -30%;
    width: 60%;
    padding-bottom: 60%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 72%);
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.22s ease-out;
}
.vx-product-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--text) 12%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 22px 40px -16px color-mix(in srgb, var(--primary) 28%, transparent),
        0 8px 16px -8px rgba(0, 0, 0, 0.6);
}
.vx-product-card:hover::after {
    opacity: 1;
}
.vx-product-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.vx-product-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}
.vx-product-card .vx-text-link {
    margin-top: auto;
    align-self: flex-start;
}
.vx-text-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease-out;
    display: inline-block;
}
.vx-text-link:hover {
    color: var(--primary-lifted);
    text-decoration: none;
    transform: translateX(3px);
}

/* ===== homepage: quick actions ===== */
/* even 2-up grid, old 2-large-plus-3-col split misaligned icons */
.vx-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.vx-action-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    border-radius: var(--rounding-lg);
    padding: 1.25rem 1.5rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.2s ease-out,
        box-shadow 0.2s ease-out,
        background-color 0.2s ease-out;
}
.vx-action-tile:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 40%, var(--text) 12%);
    color: var(--text);
    text-decoration: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 28px -14px color-mix(in srgb, var(--primary) 25%, transparent);
}
.vx-action-tile .vx-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease-out;
}
.vx-action-tile:hover .vx-action-icon {
    background: color-mix(in srgb, var(--primary) 26%, transparent);
}
.vx-action-tile i {
    font-size: 1.05rem;
    color: var(--primary);
    flex-shrink: 0;
}
@media (max-width: 767.98px) {
    .vx-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== homepage: CTA banner ===== */
/* asymmetric split, message left, buttons right */
.vx-cta-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    border-radius: var(--rounding-lg);
    padding: 2.75rem 3rem;
    margin: 2rem 0 3rem;
}
.vx-cta-banner::before,
.vx-cta-banner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}
/* primary magenta bloom, sweeps up from the lower-left */
.vx-cta-banner::before {
    left: -10%;
    bottom: -120%;
    width: 45%;
    padding-bottom: 45%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 32%, transparent) 0%, transparent 70%);
    animation: vexal-cta-glow 6s ease-in-out infinite;
}
/* recessive violet bloom, counter-drifts upper-right */
.vx-cta-banner::after {
    right: -8%;
    top: -110%;
    width: 38%;
    padding-bottom: 38%;
    background: radial-gradient(circle, color-mix(in srgb, var(--violet, #7c2dd6) 30%, transparent) 0%, transparent 70%);
    animation: vexal-cta-glow-b 9s ease-in-out infinite;
}
@keyframes vexal-cta-glow {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate3d(10%, -8%, 0) scale(1.5); opacity: 1; }
}
@keyframes vexal-cta-glow-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); opacity: 0.35; }
    50% { transform: translate3d(-9%, 7%, 0) scale(1.4); opacity: 0.7; }
}
.vx-cta-banner > * {
    position: relative;
}
.vx-cta-text {
    text-align: left;
    max-width: 32rem;
}
.vx-cta-heading {
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.vx-cta-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
@media (max-width: 767.98px) {
    .vx-cta-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 2.5rem 1.75rem;
    }
    .vx-cta-text {
        max-width: none;
        text-align: center;
    }
    .vx-cta-ctas {
        justify-content: center;
    }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    .vx-product-card,
    .vx-product-card::after,
    .vx-action-tile,
    .vx-action-tile .vx-action-icon,
    .vx-text-link {
        transition: none;
    }
    .vx-hero-heading .text-primary,
    .vx-cta-heading .text-primary,
    .vx-cta-banner::before,
    .vx-cta-banner::after {
        animation: none;
    }
}

/* legacy module markup */
.module-client-area {
    margin-top: 1.25rem;
}
.module-client-area .button,
.module-client-area input[type="submit"]:not(.btn),
.module-client-area button[type="submit"]:not(.btn) {
    display: inline-block;
    padding: .5rem 1.25rem;
    border: 1px solid var(--primary-fill);
    border-radius: 999px;
    background: var(--primary-fill);
    color: var(--white);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(221, 26, 240, 0.28);
    transition: background-color 0.18s ease-out, border-color 0.18s ease-out,
        box-shadow 0.18s ease-out, transform 0.18s ease-out;
}
.module-client-area .button:hover,
.module-client-area .button:focus,
.module-client-area input[type="submit"]:not(.btn):hover,
.module-client-area input[type="submit"]:not(.btn):focus,
.module-client-area button[type="submit"]:not(.btn):hover,
.module-client-area button[type="submit"]:not(.btn):focus {
    background: var(--primary-fill-lifted);
    border-color: var(--primary-fill-lifted);
    color: var(--white);
    box-shadow: 0 10px 28px -6px rgba(221, 26, 240, 0.55);
    transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
    .module-client-area .button,
    .module-client-area input[type="submit"]:not(.btn),
    .module-client-area button[type="submit"]:not(.btn) {
        transition: none;
    }
}