/* *****************************************************

    Varial Hosting - theme stylesheet

    Loaded from header.tpl AFTER Nexus's theme.min.css and
    custom.css, so Nexus's own design tokens keep updating with
    WHMCS releases. This file only overrides the tokens Varial
    changes, then styles components that Nexus still colours with
    hard-coded Bootstrap values, then adds the site header/footer.

    Design reference: varialhosting.com (reference/website/varial.css)

***************************************************** */

/* =====================================================
   1. Token overrides (only values that differ from Nexus)
   ===================================================== */

:root {
    /* Neutral shades: Varial greys + slate from the order/contact pages.
       Nexus derives its text/border/bg tokens from these. */
    --neutral-50: #fcfdfa;
    --neutral-100: #f2f5ee;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #999999;
    --neutral-500: #718096;
    --neutral-600: #666666;
    --neutral-700: #555555;
    --neutral-800: #444444;
    --neutral-900: #333333;
    --neutral-950: #222222;

    /* Varial green */
    --primary-50: #f2f5ee;
    --primary-100: #e4f1d2;
    --primary-200: #cbe6a5;
    --primary-300: #a7d864;
    --primary-400: #9cd64c;
    --primary-500: #8cb643;
    --primary-600: #85b642;
    --primary-700: #6f9a35;
    --primary-800: #5a7d2b;
    --primary-900: #3d5a1a;
    --primary-950: #2a3f12;

    --primary: var(--primary-600);
    --primary-lifted: var(--primary-300);
    --primary-accented: var(--primary-700);

    --success: var(--primary-600);
    --success-lifted: var(--primary-700);
    --success-accented: var(--primary-800);

    --info: #5a7af5;
    --info-lifted: #4866e0;
    --info-accented: #3a55c4;

    --grayscale-lifted: var(--neutral-700);
    --grayscale-accented: var(--neutral-900);

    --text-lifted: var(--neutral-600);
    --text-accented: var(--neutral-700);

    --border-accented: var(--primary-500);

    --bg-accented: #e9ebee;

    /* Rounding (site: 4px controls, 6px cards, 8px tables) */
    --rounding-sm: 4px;
    --rounding-md: 4px;
    --rounding-lg: 8px;

    --disabled-opacity: 50%;

    /* Varial-only helpers */
    --vh-green: #85b642;
    --vh-green-hover: #a7d864;
    --vh-green-light: #9cd64c;
    --vh-green-link: #8cb643;
    --vh-offwhite: #f2f5ee;
    --vh-slate-bg: #edf2f7;
    --vh-slate-text: #4a5568;
    --vh-focus-ring: 0 0 0 0.2rem rgba(133, 182, 66, 0.35);
}

/* =====================================================
   2. Client-area components
   ===================================================== */

/* ---------- Base & typography ---------- */

body {
    font-family: "Open Sans", sans-serif;
    color: #333333;
}

/* Nexus sets min-height: calc(100vh - 326px) to push its short footer to the
   bottom of the screen; with the tall site header/footer that just leaves a
   large empty gap above the language button. */
section#main-body {
    min-height: 0;
    background-color: #fff;
    padding: 28px 0 20px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Open Sans", sans-serif;
    color: #333333;
}

.primary-content h1,
.primary-content h2 {
    font-weight: 300;
    color: #666666;
}

.primary-content .card-title {
    font-weight: 400;
    color: #333333;
}

.primary-content p a:not(.btn),
.primary-content .card-body > a:not(.btn):not(.list-group-item),
.primary-content td a:not(.btn),
.primary-content label a,
.primary-content .text-link {
    color: var(--vh-green-link);
    text-decoration: underline;
}

.primary-content p a:not(.btn):hover,
.primary-content .card-body > a:not(.btn):not(.list-group-item):hover,
.primary-content td a:not(.btn):hover,
.primary-content label a:hover {
    color: var(--primary-700);
}

.text-primary,
a.text-primary {
    color: var(--vh-green) !important;
}

a.text-primary:hover,
a.text-primary:focus {
    color: var(--primary-700) !important;
}

.bg-primary {
    background-color: var(--vh-green) !important;
}

.border-primary {
    border-color: var(--vh-green) !important;
}

.text-muted {
    color: #718096 !important;
}

/* ---------- Buttons ---------- */

.btn {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    border-radius: 4px;
}

.btn:focus,
.btn.focus {
    box-shadow: var(--vh-focus-ring);
}

/* Solid green: website .button.green / .btn-solid */
.btn-primary,
.btn-success {
    color: #fff;
    background: var(--vh-green);
    background-color: var(--vh-green);
    border-color: var(--vh-green);
    border-radius: 4px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
    color: #fff;
    background: var(--vh-green-hover);
    background-color: var(--vh-green-hover);
    border-color: var(--vh-green-hover);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: var(--vh-focus-ring);
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-success.disabled,
.btn-success:disabled {
    color: #fff;
    background-color: var(--vh-green);
    border-color: var(--vh-green);
}

/* Outline: website .btn-plan-link */
.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-secondary {
    color: #333333;
    background-color: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default,
.btn-default:active:hover,
.btn-default.active:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle,
.btn-light:hover,
.btn-light:focus,
.btn-light:not(:disabled):not(.disabled):active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    color: var(--vh-green-link);
    background-color: #fcfdfa;
    border-color: var(--vh-green-link);
}

.btn-default.disabled:hover,
.btn-default[disabled]:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus {
    color: #333333;
    background-color: #fff !important;
    border-color: #cbd5e1 !important;
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--vh-green);
    background-color: #fff;
    border-color: var(--vh-green);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--vh-green);
    border-color: var(--vh-green);
}

/* Slate secondary: website .btn-domain-secondary */
.btn-info {
    color: var(--vh-slate-text);
    background-color: var(--vh-slate-bg);
    border-color: var(--vh-slate-bg);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
    color: #2d3748;
    background-color: #e2e8f0;
    border-color: #e2e8f0;
}

.btn-outline-info {
    color: var(--vh-slate-text);
    border-color: #cbd5e1;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:not(:disabled):not(.disabled):active {
    color: #2d3748;
    background-color: #e2e8f0;
    border-color: #e2e8f0;
}

/* Dark: website .button.gray */
.btn-dark {
    color: #fff;
    background-color: #333333;
    border-color: #333333;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #555555;
    border-color: #555555;
}

.btn-danger,
.btn-warning {
    border-radius: 4px;
}

.btn-link {
    color: var(--vh-green-link);
    font-weight: 600;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--primary-700);
    text-decoration: underline;
}

/* Large buttons: website .button (uppercase call-to-action) */
.btn-lg,
.btn-group-lg > .btn {
    min-height: 50px;
    padding: 0.7rem 35px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
}

.btn-sm,
.btn-group-sm > .btn {
    font-size: 13px;
    border-radius: 4px;
}

/* ---------- Forms ---------- */

label,
.control-label,
.col-form-label {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #666666;
}

.form-control,
.custom-select {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    color: #666666;
    background-color: var(--vh-offwhite);
    border: 1px solid var(--vh-offwhite);
    border-radius: 4px;
}

.form-control:not(textarea):not([multiple]):not([size]):not(.form-control-sm):not(.form-control-lg),
.custom-select:not([multiple]):not([size]):not(.custom-select-sm):not(.custom-select-lg) {
    height: 48px;
}

.form-control:focus,
.custom-select:focus {
    color: #333333;
    background-color: #fff;
    border-color: var(--vh-green-link);
    box-shadow: var(--vh-focus-ring);
}

.form-control::placeholder {
    color: #999999;
}

.form-control:disabled,
.form-control[readonly] {
    color: #999999;
    background-color: #e9ecef;
    border-color: #e9ecef;
}

.input-group-text {
    font-size: 14px;
    color: #666666;
    background-color: #e2e8f0;
    border-color: #e2e8f0;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--vh-green);
    border-color: var(--vh-green);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--vh-focus-ring);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--vh-green-link);
}

.custom-control-label {
    font-weight: 400;
}

/* iCheck "square-blue" checkboxes & radios, shifted to Varial green */
.icheckbox_square-blue,
.iradio_square-blue {
    filter: hue-rotate(-116deg) saturate(0.85) brightness(1.1);
}

/* bootstrap-switch */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
    color: #fff;
    background: var(--vh-green);
}

.bootstrap-switch.bootstrap-switch-focused,
.bootstrap-switch.bootstrap-switch-small.bootstrap-switch-focused {
    border-color: var(--vh-green-link);
    box-shadow: var(--vh-focus-ring);
}

/* Knowledgebase search: input and button share one height */
#btnKnowledgebaseSearch {
    padding-left: 24px;
    padding-right: 24px;
}

/* ---------- Tables ---------- */

.table {
    color: #333333;
}

.table th,
.table td {
    border-top-color: #e1e1e1;
}

.table thead th {
    border-bottom-color: #d1d1d1;
}

table.table-list,
.dataTables_wrapper table.table-list {
    border: 1px solid #d1d1d1;
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
}

table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
    padding: 14px 12px;
    background-color: var(--vh-green);
    border-bottom: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* One flat green for every heading; WHMCS often sorts by two columns at
   once, so shading sorted columns gives uneven dark bands. The sort state
   is shown by the arrows instead, which DataTables fades to 12.5%. */
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--vh-green);
    color: #fff;
}

table.dataTable.table-list thead > tr > th.sorting:before,
table.dataTable.table-list thead > tr > th.sorting:after,
table.dataTable.table-list thead > tr > th.sorting_asc:after,
table.dataTable.table-list thead > tr > th.sorting_desc:before {
    color: #fff;
    opacity: 0.4;
}

table.dataTable.table-list thead > tr > th.sorting_asc:before,
table.dataTable.table-list thead > tr > th.sorting_desc:after {
    color: #fff;
    opacity: 1;
}

table.table-list thead th:first-child,
table.table-list thead th:last-child,
.dataTables_wrapper table.table-list thead th:first-child,
.dataTables_wrapper table.table-list tr:last-child td:first-child,
.dataTables_wrapper table.table-list tr:last-child td:last-child {
    border-radius: 0;
}

table.table-list tbody td {
    padding: 14px 12px;
    border-top: 0;
    border-bottom: 1px solid #e1e1e1;
    color: #333333;
}

table.table-list tbody tr:last-child td {
    border-bottom: 0;
}

.table-list > tbody > tr:hover > td,
.table-hover tbody tr:hover {
    background-color: var(--vh-offwhite);
}

.dataTables_wrapper .dataTables_info {
    color: #718096;
    font-size: 13px;
}

/* ---------- Alerts ---------- */

.alert {
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: 6px;
    font-size: 14px;
}

.alert-success {
    color: #3d5a1a;
    background-color: var(--vh-offwhite);
    border-color: #d7e8bf;
    border-left-color: var(--vh-green);
}

.alert-info {
    color: var(--vh-slate-text);
    background-color: var(--vh-slate-bg);
    border-color: #e2e8f0;
    border-left-color: #718096;
}

.alert-warning {
    color: #7a4b00;
    background-color: #fff8e6;
    border-color: #fde7b0;
    border-left-color: #f0a500;
}

.alert-danger,
.alert-error {
    color: #8a1c1c;
    background-color: #fdf0f0;
    border-color: #f5cccc;
    border-left-color: #d9363e;
}

.alert-secondary,
.alert-light {
    color: #333333;
    background-color: #fcfdfa;
    border-color: #e2e8f0;
    border-left-color: #cbd5e1;
}

.alert-primary {
    color: #3d5a1a;
    background-color: var(--vh-offwhite);
    border-color: #d7e8bf;
    border-left-color: var(--vh-green);
}

.alert .alert-link,
.alert a:not(.btn) {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* ---------- Cards / panels ---------- */

.card,
.primary-content .card,
.primary-content .card.kb-category {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.card-header {
    font-weight: 600;
    background-color: #fcfdfa;
    border-bottom-color: #e2e8f0;
}

.card-header:first-child {
    border-radius: 5px 5px 0 0;
}

.card-footer {
    background-color: #fcfdfa;
    border-top-color: #e2e8f0;
}

.card-footer:last-child {
    border-radius: 0 0 5px 5px;
}

/* Nexus rounds every .card-body, so stacked bodies (e.g. each ticket reply)
   end in a curved divider. Only round the card's outer top/bottom edges. */
.card > .card-body {
    border-radius: 0;
}

.card > .card-body:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.card > .card-body:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Client-area home cards: green header bar (as the old theme) */
.client-home-cards .card-header,
.primary-content .card > .card-header:not(.card-header-tabs):not(.bg-white) {
    color: #fff;
    background-color: var(--vh-green-light);
    border-bottom-color: var(--vh-green-light);
}

.client-home-cards .card-header .card-title,
.client-home-cards .card-header a:not(.btn),
.primary-content .card > .card-header:not(.card-header-tabs):not(.bg-white) .card-title,
.primary-content .card > .card-header:not(.card-header-tabs):not(.bg-white) h3 {
    color: #fff;
}

.primary-content .card.kb-category:hover {
    border-color: var(--vh-green-link);
}

/* Nexus colours article excerpts with var(--bg-lifted), which is near-white */
.kb-article-item small {
    margin: 4px 0 0;
    color: #666666;
}

/* ---------- Sidebar ---------- */

.sidebar .card-sidebar {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.sidebar .card-header {
    padding: 14px 20px;
    color: #fff;
    background-color: var(--vh-green-light);
    border-bottom: 0;
    border-radius: 0;
}

.sidebar .card-title,
.sidebar .card-sidebar .panel-title {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}

.sidebar .card-header .far:first-child,
.sidebar .card-header .fas:first-child,
.sidebar .card-header .fal:first-child,
.sidebar .card-header .fad:first-child {
    display: inline-block;
}

.sidebar .card-sidebar .card-minimise {
    color: #fff;
}

.sidebar .list-group-item {
    padding: 11px 20px;
    border-top: 1px solid #eeeeee;
    color: #333333;
    font-size: 14px;
    font-weight: 600;
}

.sidebar .list-group-item:first-child {
    border-top: 0;
}

/* Nexus gives the first/last item of every list 8px corners
   (body .list-group-item:first-child). Inside cards that shows as rounded
   corners under the header when the item is active or hovered; square them
   and let the card's own corners do the rounding. */
body .card .list-group-item,
body .card .list-group-item:first-child,
body .card .list-group-item:last-child {
    border-radius: 0;
}

body .card > .list-group:last-child > .list-group-item:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.sidebar .list-group-item-action:hover,
.sidebar .list-group-item-action:focus {
    color: #333333;
    background-color: var(--vh-offwhite);
}

.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    color: #fff;
    background-color: #333333;
    border-color: #333333;
}

.sidebar .list-group-item .badge {
    background-color: transparent;
    color: #333333;
    font-size: 11px;
}

.sidebar .list-group-item.active .badge {
    color: #fff;
}

.sidebar .card-body {
    font-size: 14px;
}

.list-group-item.active {
    color: #fff;
    background-color: #333333;
    border-color: #333333;
}

/* ---------- Pagination ---------- */

.page-link,
.pagination > li > a,
.pagination > li > span {
    color: #333333;
    border-color: #e2e8f0;
    font-weight: 600;
}

.page-link:hover,
.page-link:focus {
    color: var(--vh-green-link);
    background-color: var(--vh-offwhite);
    border-color: #e2e8f0;
    box-shadow: none;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover,
.page-item.active .page-link {
    color: #fff;
    background-color: var(--vh-green);
    border-color: var(--vh-green);
}

.page-item.disabled .page-link {
    color: #999999;
    border-color: #e2e8f0;
}

/* ---------- Badges & labels ---------- */

.badge {
    padding: 0.35em 0.6em;
    font-weight: 600;
    border-radius: 4px;
}

.badge-primary,
.badge-success,
.badge-info {
    color: #fff;
    background-color: var(--vh-green);
}

a.badge-primary:hover,
a.badge-success:hover,
a.badge-info:hover {
    color: #fff;
    background-color: var(--primary-700);
}

.badge-secondary,
.badge-light {
    color: var(--vh-slate-text);
    background-color: var(--vh-slate-bg);
}

.badge-dark {
    color: #fff;
    background-color: #333333;
}

.label {
    border-radius: 4px;
    font-weight: 600;
}

/* ---------- Progress, tabs, dropdowns, modals ---------- */

.progress-bar {
    background-color: var(--vh-green);
}

.nav-tabs .nav-link {
    color: #666666;
    font-weight: 600;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: #333333;
    border-top: 2px solid var(--vh-green);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--vh-green);
}

.dropdown-menu {
    border-color: #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.dropdown-item {
    color: #333333;
    font-size: 14px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #333333;
    background-color: var(--vh-offwhite);
}

.dropdown-item.active,
.dropdown-item:active,
header.header .dropdown-item.active,
header.header .dropdown-item:active {
    color: #fff;
    background-color: var(--vh-green);
}

.modal-content {
    border: 0;
    border-radius: 6px;
}

.modal-header,
.modal-footer {
    border-color: #e2e8f0;
}

/* ---------- WHMCS header: topbar, main navbar, breadcrumb ---------- */

header.header {
    background-color: transparent;
}

header.header .topbar {
    padding: 4px 0;
    background-color: #333333;
    color: #fff;
}

header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text {
    color: #fff;
}

header.header .topbar .active-client .btn.btn-active-client span {
    border-bottom-color: rgba(255, 255, 255, 0.75);
}

header.header .main-navbar-wrapper {
    padding: 0;
    background-color: var(--vh-green);
}

header.header .main-navbar-wrapper .navbar,
header.header .navbar.main-navbar-wrapper {
    min-height: 56px;
}

header.header .main-navbar-wrapper .navbar-nav {
    margin-top: 0;
    margin-bottom: 0;
}

header.header .main-navbar-wrapper .navbar-nav > li > a,
header.header .main-navbar-wrapper .navbar-nav .nav-link {
    padding: 16px 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

header.header .main-navbar-wrapper .navbar-nav > li > a:hover,
header.header .main-navbar-wrapper .navbar-nav > li > a:focus,
header.header .main-navbar-wrapper .navbar-nav > .active > a,
header.header .main-navbar-wrapper .navbar-nav > .show > a {
    color: #fff;
    text-decoration: underline;
}

header.header .main-navbar-wrapper .dropdown-menu a,
header.header .main-navbar-wrapper .dropdown-menu .dropdown-item {
    color: #333333;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}

header.header .main-navbar-wrapper .dropdown-menu .dropdown-item.active,
header.header .main-navbar-wrapper .dropdown-menu .dropdown-item:active {
    color: #fff;
}

header.header .main-navbar-wrapper .toolbar {
    margin: 0;
}

header.header .main-navbar-wrapper .toolbar .nav-link.cart-btn,
header.header .main-navbar-wrapper .vh-navbar-toggle {
    padding: 0.45rem 0.8rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    text-decoration: none;
}

header.header .main-navbar-wrapper .toolbar .nav-link.cart-btn:hover,
header.header .main-navbar-wrapper .vh-navbar-toggle:hover {
    color: var(--vh-green);
    background-color: #fff;
}

header.header .main-navbar-wrapper .toolbar .nav-link .badge {
    color: #fff;
    background-color: #333333;
}

header.header .main-navbar-wrapper .vh-navbar-toggle {
    margin: 8px 0;
}

header.header .main-navbar-wrapper .toolbar {
    margin: 8px 0 8px auto;
}

@media (max-width: 1199.98px) {
    header.header .main-navbar-wrapper .navbar-collapse {
        padding-bottom: 12px;
    }

    header.header .main-navbar-wrapper .navbar-nav .nav-link {
        padding: 10px 0;
    }

    header.header .main-navbar-wrapper .dropdown-menu {
        margin-bottom: 8px;
    }
}

.master-breadcrumb,
.master-breadcrumb .breadcrumb {
    background-color: #e9ebee;
}

.master-breadcrumb .breadcrumb {
    padding: 10px 0;
    font-size: 14px;
}

.master-breadcrumb .breadcrumb a {
    color: #333333;
    font-weight: 600;
}

.master-breadcrumb .breadcrumb .breadcrumb-item.active {
    color: #666666;
}

/* ---------- WHMCS footer (language/currency button only) ---------- */

footer.footer {
    padding: 10px 0 0;
    background-color: #fff;
    color: #333333;
}

footer.footer .btn {
    padding-left: 16px;
    padding-right: 16px;
}

footer.footer .btn-primary {
    background-color: var(--vh-green-light);
    border-color: var(--vh-green-light);
}

footer.footer .btn-primary:hover,
footer.footer .btn-primary:focus {
    background-color: var(--vh-green);
    border-color: var(--vh-green);
}

/* ---------- Login & password reset (Nexus pages) ---------- */

.primary-content .card.mw-540 {
    border-color: #e2e8f0;
}

.primary-content .card.mw-540 h6,
.primary-content .card.mw-540 .h3 {
    font-weight: 300;
    color: #666666;
}

.primary-content .card.mw-540 .card-footer {
    background-color: #fcfdfa;
}

body .login-form .form-control:focus {
    border-color: var(--vh-green-link);
}

.input-group-merge .input-group-text {
    color: #999999;
    background-color: var(--vh-offwhite);
    border-color: var(--vh-offwhite);
}

/* =====================================================
   3. Site header & footer (ported from varialhosting.com)
      Scoped to .vh-site-header / .vh-site-footer so nothing
      leaks into the WHMCS client area.
   ===================================================== */

.vh-site-header .centered,
.vh-site-footer .centered {
    margin: 0 auto;
    max-width: 980px;
    width: 94%;
}

.vh-site-header .centered:after {
    content: "";
    display: table;
    clear: both;
}

/* ---------- Site header ---------- */

.vh-site-header {
    position: relative;
    box-sizing: content-box;
    width: 100%;
    height: 70px;
    padding-top: 20px;
    background-color: #9CD64C;
    font-family: "Open Sans", sans-serif;
}

.vh-site-header .centered div {
    float: right;
}

.vh-site-header div.logo-container {
    max-width: 124px;
    width: 100%;
    display: block;
    float: left;
    position: relative;
}

.vh-site-header .home-logo img {
    display: block;
    max-width: 100%;
}

.vh-site-header .top-navigation {
    float: right;
    width: 84%;
}

.vh-site-header .top-navigation ol {
    margin: 12px 8px;
    float: right;
    padding: 0;
}

.vh-site-header .top-navigation ol li {
    position: relative;
    display: inline-block;
    float: left;
    margin: 0 16px;
    list-style-type: none;
    line-height: 1.5;
}

.vh-site-header .top-navigation ol li:last-child {
    margin-right: 0;
}

.vh-site-header .top-navigation ol li a {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    color: #F2F5EE;
    padding: 18px 0;
}

.vh-site-header .top-navigation ol li a:hover {
    text-decoration: underline;
    color: #ffffff;
}

.vh-site-header .top-navigation ol li.wordpress-link a {
    color: #5a7af5;
}

.vh-site-header .top-navigation ol li a img.sign-in-label {
    display: inline-block;
    float: left;
    width: 27px;
    position: relative;
    top: -2px;
    vertical-align: baseline;
}

.vh-site-header .top-navigation ol li a span.sign-in-label {
    display: inline-block;
    float: right;
    margin-left: 10px;
}

.vh-site-header .toggle-menu {
    display: none;
    padding: 0;
    background: transparent;
    border: 0;
}

@media only screen and (max-width: 960px) {
    .vh-site-header .top-navigation ol li {
        margin: 0 10px;
    }
}

@media only screen and (max-width: 890px) {
    .vh-site-header .centered {
        width: 100%;
    }

    .vh-site-header .centered .home-logo {
        display: block;
        padding-left: 17px;
    }

    .vh-site-header .top-navigation {
        display: none;
        text-align: center;
    }

    .vh-site-header .top-navigation.active {
        display: block;
        background-color: #9CD64C;
        text-align: center;
        margin-top: 15px;
        overflow-y: visible;
        overflow-x: hidden;
        position: relative;
        z-index: 1000;
        width: 100%;
    }

    .vh-site-header .top-navigation.active ol {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    .vh-site-header .top-navigation.active ol li {
        float: none;
        display: block;
        margin: 0 auto;
    }

    .vh-site-header .top-navigation.active ol li a {
        width: 100%;
        height: 100%;
        display: block;
        text-align: center;
        margin: 0 auto;
        padding: 10px 0;
    }

    .vh-site-header .top-navigation.active ol li a > img.sign-in-label {
        display: none;
    }

    .vh-site-header .top-navigation.active ol li a > span.sign-in-label {
        float: none;
        margin-left: 0;
    }

    .vh-site-header .top-navigation.active ol li:last-child a {
        padding-bottom: 20px;
    }

    .vh-site-header .toggle-menu {
        display: inline-block;
        position: absolute;
        width: 48px;
        height: 48px;
        top: 15px;
        right: 20px;
        cursor: pointer;
    }
}

/* ---------- Site footer: "Give us a call" ---------- */

.vh-site-footer {
    width: 100%;
    font-family: "Open Sans", sans-serif;
}

.vh-site-footer section {
    width: 100%;
}

.vh-site-footer .contact {
    /* flow-root keeps the paragraph's 60px top margin inside this white
       section; otherwise it collapses outward and shows the dark body bg */
    display: flow-root;
    background-color: #ffffff;
    text-align: center;
}

.vh-site-footer .contact .centered p {
    margin: 60px 0 10px;
    font-family: "Open Sans", sans-serif;
    color: #666666;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.vh-site-footer .contact .big-emphasize {
    font-family: "Open Sans", sans-serif;
    color: #666666;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
}

.vh-site-footer .contact .centered .varial-crown {
    display: block;
    width: 50px;
    margin: 60px auto 0;
}

/* ---------- Site footer: dark "about" block ---------- */

.vh-site-footer .about {
    position: relative;
    clear: both;
    padding: 60px 0;
    background-color: #333333;
}

.vh-site-footer .about .centered {
    display: flex;
    flex-direction: column;
    font-family: "Open Sans", sans-serif;
    color: #999999;
    font-size: 14px;
    font-weight: 400;
}

.vh-site-footer .about .centered p {
    margin-top: 0;
    font-family: "Open Sans", sans-serif;
    color: #999999;
    font-size: 14px;
    font-weight: 400;
}

.vh-site-footer .footer-content-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.vh-site-footer .footer-left-block {
    width: 48%;
    min-width: 280px;
    text-align: left;
}

.vh-site-footer .footer-left-block .varial-description {
    margin-bottom: 0;
    text-align: left;
    line-height: 1.6;
}

.vh-site-footer .footer-right-block {
    width: 46%;
    min-width: 320px;
}

.vh-site-footer .footer-nav-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

.vh-site-footer .footer-nav-columns .nav-column {
    flex: 0 1 auto;
    min-width: 140px;
    text-align: left;
}

.vh-site-footer .footer-nav-columns .nav-column h4 {
    margin: 0 0 12px 0;
    color: #999999;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: underline;
    text-transform: none;
    text-align: left;
}

.vh-site-footer .footer-nav-columns .nav-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.vh-site-footer .footer-nav-columns .nav-column ul li {
    display: block;
    width: 100%;
    margin: 0;
    text-align: left;
}

.vh-site-footer .footer-nav-columns .nav-column ul li a {
    color: #999999;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.vh-site-footer .footer-nav-columns .nav-column ul li a:hover {
    color: #999999;
    text-decoration: underline;
}

.vh-site-footer .footer-baseline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 40px;
}

.vh-site-footer .award-winning {
    display: flex;
    align-items: center;
    height: 30px;
}

.vh-site-footer .award-winning img {
    display: block;
    width: 20px;
    margin: 0;
}

.vh-site-footer .about .award-winning p {
    margin: 0 0 0 20px;
    text-align: left;
}

.vh-site-footer .footer-socials-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vh-site-footer .footer-socials-wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #444444;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.vh-site-footer .footer-socials-wrap a svg {
    width: 14px;
    height: 14px;
    fill: #999999;
    transition: fill 0.2s ease;
}

.vh-site-footer .footer-socials-wrap a:hover {
    background-color: #555555;
}

.vh-site-footer .footer-socials-wrap a:hover svg {
    fill: #ffffff;
}

.vh-site-footer .about .centered .copyright {
    display: block;
    width: 100%;
    margin: 35px 0 0;
    padding-top: 20px;
    border-top: 1px solid #444444;
    font-size: 11px;
    line-height: 1.6;
    text-align: left;
}

.vh-site-footer .about .centered .copyright a {
    color: #999999;
    font-weight: 400;
}

@media screen and (max-width: 990px) {
    .vh-site-footer .about {
        padding: 50px 0;
    }

    .vh-site-footer .footer-content-grid,
    .vh-site-footer .footer-baseline-row {
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }

    .vh-site-footer .footer-content-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .vh-site-footer .footer-left-block,
    .vh-site-footer .footer-right-block {
        width: 100%;
        min-width: 0;
    }

    .vh-site-footer .footer-left-block .varial-description {
        margin-top: 15px;
    }

    .vh-site-footer .footer-baseline-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        margin-top: 30px;
    }

    .vh-site-footer .footer-socials-wrap {
        justify-content: center;
        width: 100%;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 890px) {
    .vh-site-footer .contact .centered p {
        margin-top: 30px;
    }

    .vh-site-footer .contact .centered .varial-crown {
        margin-top: 20px;
    }

    .vh-site-footer .about .centered .copyright {
        margin: 30px 0;
    }
}

@media screen and (max-width: 580px) {
    .vh-site-footer .footer-nav-columns .nav-column {
        min-width: 100%;
        margin-top: 25px;
    }

    .vh-site-footer .footer-nav-columns .nav-column:first-child {
        margin-top: 0;
    }

    .vh-site-footer .contact .big-emphasize {
        font-size: 32px;
    }
}

/* =====================================================
   4. Order form (varial_cart, a child of standard_cart)

      Every rule starts with "body #order-standard_cart":
      as specific as Nexus's own cart rules (and later in
      the cascade), and more specific than the cart's
      all.min.css, which loads after this file.
   ===================================================== */

/* ---------- Cart sidebar (same on every cart page) ---------- */

body #order-standard_cart .cart-sidebar .card-sidebar {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

body #order-standard_cart .cart-sidebar .card-header {
    padding: 14px 20px;
    color: #fff;
    background-color: var(--vh-green-light);
    border-bottom: 0;
    border-radius: 0;
}

body #order-standard_cart .cart-sidebar .card-sidebar > .card-header:has(+ .collapsable-card-body[style*="display: none"]) {
    border-radius: 0;
}

body #order-standard_cart .cart-sidebar .card-sidebar .panel-title,
body #order-standard_cart .cart-sidebar .card-title {
    color: #fff;
    font-size: 16px !important;
    font-weight: 400;
}

body #order-standard_cart .cart-sidebar .card-header .far:first-child,
body #order-standard_cart .cart-sidebar .card-header .fas:first-child,
body #order-standard_cart .cart-sidebar .card-sidebar .panel-title .fas:first-child {
    display: inline-block;
}

body #order-standard_cart .cart-sidebar .card-sidebar .card-minimise {
    color: #fff;
}

body #order-standard_cart .cart-sidebar .list-group {
    font-size: 14px;
}

body #order-standard_cart .cart-sidebar .list-group-item {
    padding: 11px 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
    border-radius: 0;
    color: #333333;
    font-size: 14px;
    font-weight: 600;
}

body #order-standard_cart .cart-sidebar .list-group-item:first-child {
    border-top: 0;
}

body #order-standard_cart .cart-sidebar .list-group-item:last-child {
    border-radius: 0;
}

body #order-standard_cart .cart-sidebar .list-group-item-action:hover,
body #order-standard_cart .cart-sidebar .list-group-item-action:focus {
    color: #333333;
    background-color: var(--vh-offwhite);
}

body #order-standard_cart .cart-sidebar .list-group-item.active,
body #order-standard_cart .cart-sidebar .list-group-item.active:hover,
body #order-standard_cart .cart-sidebar .list-group-item.active:focus {
    color: #fff;
    background-color: #333333;
    border-color: #333333;
}

body #order-standard_cart .cart-sidebar .list-group-item .badge {
    background-color: transparent;
    color: inherit;
    font-size: 11px;
}

body #order-standard_cart .cart-sidebar .card-body {
    font-size: 14px;
}

/* ---------- Cart form fields (match the client-area forms) ---------- */

body #order-standard_cart .form-control,
body #order-standard_cart .field {
    color: #666666;
    background-color: var(--vh-offwhite);
    border: 1px solid var(--vh-offwhite);
    border-radius: 4px;
}

body #order-standard_cart .form-control:focus,
body #order-standard_cart .field:focus {
    color: #333333;
    background-color: #fff;
    border-color: var(--vh-green-link);
    box-shadow: var(--vh-focus-ring);
}

body #order-standard_cart .input-group:not(:has(.input-group-addon)) .form-control,
body #order-standard_cart #inputPhone .form-control,
body #frmConfigureProduct .form-control {
    border-radius: 4px;
}

body #order-standard_cart .input-group:has(.input-group-addon) .form-control {
    border-radius: 0 4px 4px 0;
}

body #order-standard_cart .input-group:has(.input-group-addon) .input-group-addon {
    border-radius: 4px 0 0 4px;
}

body #frmConfigureProduct .form-control {
    color: #333333;
}

body #frmConfigureProduct label {
    color: #666666;
    font-weight: 600;
}

/* Section headings ("Configurable Options", "Personal Information", ...):
   uppercase label like the website's "CHOOSE A PLAN:", in Varial green */
body #order-standard_cart .sub-heading {
    border-top-color: #e2e8f0;
}

body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span {
    color: var(--primary-700);
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ---------- Product cards (products.tpl) ---------- */

body #order-standard_cart .cart-body .products .product {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

body #order-standard_cart .cart-body .products .product header {
    padding: 12px 20px;
    background: var(--vh-green-light);
    border-bottom: 0;
}

body #order-standard_cart .products .product header span {
    color: #fff;
    font-size: 1.2em;
    font-weight: 600;
}

body #order-standard_cart .products .product header .qty {
    color: #fff;
    font-weight: 400;
}

body #order-standard_cart .products .product div.product-desc {
    color: #555555;
    font-size: 14px;
}

body #order-standard_cart .products .product footer .product-pricing {
    color: #718096;
    font-size: 13px;
}

body #order-standard_cart .products .product div.product-pricing span.price {
    color: #333333;
    font-size: 1.8em;
    font-weight: 600;
}

body #order-standard_cart .products .product footer .btn-order-now {
    color: #fff;
    background: var(--vh-green);
    border-color: var(--vh-green);
    border-radius: 4px;
    font-weight: 600;
}

body #order-standard_cart .products .product footer .btn-order-now:hover,
body #order-standard_cart .products .product footer .btn-order-now:focus {
    color: #fff;
    background: var(--vh-green-hover);
    border-color: var(--vh-green-hover);
}

body #order-standard_cart .cart-body .products .product .btn-order-now:focus {
    box-shadow: var(--vh-focus-ring);
}

/* ---------- Configure product (configureproduct.tpl) ---------- */

body #order-standard_cart .product-info {
    padding: 16px 20px;
    color: #333333;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

body #order-standard_cart .product-info .product-title {
    color: #333333;
    font-weight: 600;
}

body #order-standard_cart .panel-addon {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

body #order-standard_cart .panel-addon:hover,
body #order-standard_cart .panel-addon-selected {
    border-color: var(--vh-green-link);
}

body #order-standard_cart .panel-addon .panel-body label {
    color: #333333;
}

body #order-standard_cart .panel-addon .panel-price {
    color: #333333;
    background-color: var(--vh-offwhite);
}

body #order-standard_cart .panel-addon .panel-add,
body #order-standard_cart .panel-addon-selected .panel-add {
    color: #fff;
    background-color: var(--vh-green);
    border-radius: 0;
    font-weight: 600;
}

/* ---------- Domain choice (configureproductdomain.tpl) ---------- */

body #order-standard_cart .domain-selection-options {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

body #order-standard_cart .domain-selection-options .option {
    padding: 12px 20px;
    border-radius: 0;
}

body #order-standard_cart .domain-selection-options .option + .option {
    border-top: 1px solid #e2e8f0;
}

body #order-standard_cart .domain-selection-options .option label {
    color: #333333;
    font-size: 14px;
}

body #order-standard_cart .domain-selection-options .option-selected {
    background: var(--vh-offwhite);
}

/* The selected option is off-white, so its fields need to be white to show */
body #order-standard_cart .domain-selection-options .form-control {
    background-color: #fff;
    border-color: #cbd5e1;
}

body #order-standard_cart .domain-selection-options .form-control:focus {
    border-color: var(--vh-green-link);
}

/* Carried over from the old cart custom.css: keeps "www." / name / TLD /
   button on one aligned row */
body #order-standard_cart .domains-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

body #order-standard_cart .domain-checker-available {
    color: var(--primary-800);
}

/* ---------- Domain search (domainregister.tpl / domaintransfer.tpl) ---------- */

body #order-standard_cart .domain-checker-container {
    background: linear-gradient(180deg, var(--vh-green-light) 0%, var(--vh-green) 100%);
    border-radius: 6px;
}

/* The stock globe artwork is cream-coloured for the yellow box; drop it */
body #order-standard_cart .domain-checker-bg {
    background-image: none;
}

body #order-standard_cart .domain-checker-container .input-group-box {
    border-radius: 6px;
}

body #order-standard_cart .domain-checker-container .input-group:not(:has(.input-group-addon)) .form-control {
    border-radius: 4px 0 0 4px;
}

body #order-standard_cart .suggested-domains .card-header,
body #order-standard_cart #DomainSearchResults .primary-domain-header {
    border-bottom-color: var(--vh-green);
}

body #order-standard_cart .spotlight-tld {
    border-color: #e2e8f0;
    border-radius: 6px;
    color: #333333;
}

body #order-standard_cart .spotlight-tld .btn:not(.domain-contact-support):not(.unavailable):not(.invalid) {
    color: #fff;
    background-color: var(--vh-green);
    border-color: var(--vh-green);
    border-radius: 4px;
    font-weight: 600;
}

body #order-standard_cart .spotlight-tld .btn:not(.domain-contact-support):not(.unavailable):not(.invalid):hover {
    background-color: var(--vh-green-hover);
    border-color: var(--vh-green-hover);
}

body #order-standard_cart .spotlight-tld .btn.unavailable,
body #order-standard_cart .spotlight-tld .btn.invalid {
    color: #999999;
    background-color: var(--vh-slate-bg);
    border-color: #e2e8f0;
    opacity: 1;
}

body #order-standard_cart .suggested-domains .btn:not(.domain-contact-support) {
    color: #fff;
    background-color: var(--vh-green);
    border-color: var(--vh-green);
    border-radius: 4px;
    font-weight: 600;
}

body #order-standard_cart .suggested-domains .btn:not(.domain-contact-support):hover {
    background-color: var(--vh-green-hover);
    border-color: var(--vh-green-hover);
}

body #order-standard_cart .domain-pricing .tld-filters .badge.badge-success {
    color: #fff;
    background-color: var(--vh-green);
    border-color: var(--vh-green);
}

body #order-standard_cart .domain-pricing .tld-filters .badge:focus {
    box-shadow: var(--vh-focus-ring);
}

body #order-standard_cart .domain-pricing .featured-tld,
body #order-standard_cart .domain-promo-box {
    border-radius: 6px;
}

body #order-standard_cart .domain-promo-box .btn-warning {
    color: #fff;
    background-color: var(--vh-green);
    border-color: var(--vh-green);
    border-radius: 4px;
    font-weight: 600;
}

body #order-standard_cart .domain-promo-box .btn-warning:hover,
body #order-standard_cart .domain-promo-box .btn-warning:focus {
    background-color: var(--vh-green-hover);
    border-color: var(--vh-green-hover);
}

/* ---------- View cart items (viewcart.tpl) ---------- */

body #order-standard_cart .cart-body .view-cart-items-header {
    padding: 12px 15px;
    color: #fff;
    background-color: var(--vh-green);
    border: 0;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

body #order-standard_cart .cart-body .view-cart-items .item {
    border-color: #e2e8f0;
    background-color: #fff;
}

body #order-standard_cart .cart-body .view-cart-items .item:nth-child(even) {
    background-color: #fcfdfa;
}

/* Green bottom edge, carried over from the old cart custom.css */
body #order-standard_cart .cart-body .view-cart-items .item:last-child {
    border-bottom: 2px solid var(--vh-green);
    border-radius: 0 0 6px 6px;
}

body #order-standard_cart .view-cart-items .item-title {
    color: #333333;
    font-weight: 600;
}

body #order-standard_cart .view-cart-items .item-group {
    color: #718096;
}

body #order-standard_cart .cart-body .view-cart-items .item-domain {
    color: #666666;
}

body #order-standard_cart .view-cart-items .item-price span {
    color: #333333;
}

body #order-standard_cart .view-cart-items .item-price .cycle {
    color: #718096;
}

body #order-standard_cart .btn-remove-from-cart {
    color: #999999;
}

body #order-standard_cart .btn-remove-from-cart:hover {
    color: #d9363e;
}

/* "Empty Cart": small green tab under the items (old cart custom.css) */
body #order-standard_cart .cart-body .empty-cart .btn {
    margin-top: 0;
    padding: 4px 12px;
    color: #fff;
    background: var(--vh-green);
    border: 0;
    border-radius: 0 0 4px 4px;
    font-weight: 600;
    text-decoration: none;
}

body #order-standard_cart .cart-body .empty-cart .btn:hover,
body #order-standard_cart .cart-body .empty-cart .btn:focus {
    color: #fff;
    background: var(--vh-green-hover);
}

body #order-standard_cart .cart-body .view-cart-empty {
    border-color: #e2e8f0;
    border-radius: 0 0 6px 6px;
}

/* Promo code / estimate taxes tabs */
body #order-standard_cart .secondary-cart-body .view-cart-tabs .nav-tabs a[aria-expanded=true],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] {
    color: #333333;
    background-color: #fff;
    border-color: #e2e8f0 #e2e8f0 #fff;
    border-top: 2px solid var(--vh-green);
    border-radius: 6px 6px 0 0;
}

body #order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    color: #666666;
    font-weight: 600;
}

body #order-standard_cart .secondary-cart-body .view-cart-tabs .tab-content {
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0 6px 6px 6px;
}

body #order-standard_cart .view-cart-promotion-code {
    border-color: #cbd5e1;
    border-radius: 4px;
}

/* ---------- Order Summary (view cart + configure page) ---------- */

body #order-standard_cart .order-summary {
    background-color: transparent;
    border-radius: 6px;
}

body #order-standard_cart .order-summary h2 {
    padding: 12px;
    color: #fff;
    background-color: var(--vh-green-light);
    border: 0;
    border-radius: 6px 6px 0 0;
    font-weight: 400;
}

body #order-standard_cart .order-summary .summary-container {
    color: #333333;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-top: 0;
    border-bottom: 3px solid var(--vh-green-light);
    border-radius: 0 0 6px 6px;
}

body #order-standard_cart .order-summary .summary-totals,
body #order-standard_cart .order-summary .subtotal,
body #order-standard_cart .order-summary .bordered-totals {
    border-color: #e2e8f0;
}

body #order-standard_cart .order-summary .product-group,
body #order-standard_cart .order-summary .recurring-charges {
    color: #718096;
}

body #order-standard_cart .order-summary .total-due-today .amt {
    color: #333333;
    font-weight: 600;
}

body #order-standard_cart .order-summary .loader {
    background-color: var(--vh-green);
}

body #order-standard_cart .text-right .btn-checkout {
    color: #fff;
    background: var(--vh-green);
    border-color: var(--vh-green);
    border-radius: 4px;
}

body #order-standard_cart .text-right .btn-checkout:hover,
body #order-standard_cart .text-right .btn-checkout:focus {
    color: #fff;
    background: var(--vh-green-hover);
    border-color: var(--vh-green-hover);
}

body #order-standard_cart .text-right .btn-checkout:focus {
    box-shadow: var(--vh-focus-ring);
}

body #order-standard_cart .order-summary .btn-continue-shopping {
    color: #666666;
    font-weight: 600;
}

body #order-standard_cart .order-summary .btn-continue-shopping:hover {
    color: var(--primary-700);
}

/* ---------- Checkout form (checkout.tpl) ---------- */

/* Icons inside fields: stock sizes them for 36px fields; ours are 48px */
body #order-standard_cart .prepend-icon .field-icon {
    height: 48px;
    line-height: 48px;
}

body #order-standard_cart .field-icon i {
    color: #999999;
}

/* Stock removes the native select arrow on icon fields (appearance: none);
   put one back so Country / State / contact selects read as dropdowns */
body #order-standard_cart .prepend-icon select.field {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666666' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px 6px;
}

body #order-standard_cart .field[disabled],
body #order-standard_cart .field[readonly],
body #order-standard_cart .form-control[disabled],
body #order-standard_cart .form-control[readonly] {
    color: #999999;
    background-color: #e9ecef;
    border-color: #e9ecef;
}

body #order-standard_cart .field-help-text {
    color: #718096;
}

/* Existing account picker (logged-in checkout) */
body #order-standard_cart .account-select-container div.account {
    background: var(--vh-offwhite);
    border-color: #e2e8f0;
}

body #order-standard_cart .account-select-container div.account.active {
    background: #fff;
    box-shadow: inset 3px 0 0 var(--vh-green);
}

body #order-standard_cart .apply-credit-container {
    background-color: var(--vh-offwhite);
    border-radius: 6px;
}

body #order-standard_cart #paymentGatewaysContainer .radio-inline {
    margin-right: 16px;
    color: #333333;
    font-size: 14px;
    font-weight: 400;
}

body #order-standard_cart #frmCheckout #creditCardInputFields {
    border-color: #e2e8f0;
    border-radius: 6px;
}

/* ---------- Discount Center crossed-out prices ---------- */

/* 1. Order summary: .vh-dc-old-price spans added in varial_cart/ordersummary.tpl
   (they keep the module's inline line-through as a fallback).
   2. The module's "Discount Label" setting injects
   <span class="discount_center-{$page}">{$oldPrice}</span> on product cards,
   cart items and domain prices; {$page} varies, so match the prefix. Its own
   colours come from modules/addons/DiscountCenter/storage/assets/discounts.css;
   these selectors are more specific so the Varial style wins. */
body #order-standard_cart .vh-dc-old-price,
body #order-standard_cart [class^="discount_center-"],
body #order-standard_cart [class*=" discount_center-"],
body .primary-content [class^="discount_center-"],
body .primary-content [class*=" discount_center-"] {
    margin-right: 4px;
    color: #718096;
    font-size: 0.85em;
    font-weight: 400;
    text-decoration: line-through;
}

/* Cart item prices: stock sizes every span in .item-price at 1.6em, so the
   label (a span inside that span) would compound to ~2.5em */
body #order-standard_cart .view-cart-items .item-price span[class^="discount_center-"],
body #order-standard_cart .view-cart-items .item-price span[class*=" discount_center-"] {
    color: #718096;
    font-size: 0.6em;
}

/* On the large product-card price, keep the old price clearly secondary */
body #order-standard_cart .products .product div.product-pricing span.price [class^="discount_center-"],
body #order-standard_cart .products .product div.product-pricing span.price [class*=" discount_center-"] {
    display: block;
    font-size: 0.6em;
}

/* =====================================================
   5. Invoice & billing note pages (viewinvoice.tpl, viewbillingnote.tpl)

      These standalone pages load varial.css only via css/custom.css.
      Everything is scoped to .invoice-container (or the "Back to Client
      Area" paragraph right after it). Accents are borders and text
      colour, not background fills, because browsers drop backgrounds
      when printing.
   ===================================================== */

.invoice-container {
    border-color: #e2e8f0;
    border-radius: 6px;
}

/* Status (PAID / UNPAID / ...); invoice.css sets these globally */
.invoice-container .invoice-status .paid {
    color: var(--primary-800);
}

.invoice-container .invoice-status .unpaid {
    color: #c53030;
}

.invoice-container .invoice-status .refunded {
    color: var(--vh-slate-text);
}

.invoice-container .invoice-status .collections {
    color: #b7791f;
}

.invoice-container .invoice-status .draft,
.invoice-container .invoice-status .cancelled {
    color: #718096;
}

/* Section headers: "Invoice Items", "Ledger" (Bootstrap bg-info, teal),
   "Apply credit" (bg-success). The Bootstrap bg-/text- utilities use
   !important, so these overrides must too. */
.invoice-container .card-header,
.invoice-container .card-title.bg-info,
.invoice-container .card-header.bg-success {
    color: #333333 !important;
    background-color: #fcfdfa !important;
    border-bottom: 2px solid var(--vh-green);
}

.invoice-container .card-title.bg-info {
    padding: 8px 12px !important;
}

.invoice-container .card-header .card-title,
.invoice-container .card-header .card-subtitle {
    color: #333333;
}

.invoice-container td.total-row {
    background-color: var(--vh-offwhite);
}

.invoice-container .table td,
.invoice-container .table th {
    border-color: #e2e8f0;
}

/* "« Back to Client Area" */
.invoice-container ~ p a {
    color: var(--primary-700);
    font-weight: 600;
    text-decoration: none;
}

.invoice-container ~ p a:hover,
.invoice-container ~ p a:focus {
    color: var(--primary-800);
    text-decoration: underline;
}

@media print {
    /* Stock Nexus prints a blank second page (html/body height: 100%)
       and a tinted page background */
    html,
    body {
        height: auto;
        background: #fff;
    }

    .invoice-container {
        border: 0;
    }
}