/* =========================================================
   WondaHost by WondaNation: WHMCS client area theme
   Child of Twenty-One. Colours follow the WNS design system
   (Astra global colour tokens), light and dark.
   ========================================================= */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

/* ---------- Tokens ----------
   Astra slot     role                light      dark
   0              brand teal          #00C896    #00C896
   1              alt teal (links)    #007A58    #3DEBB0
   2              headings            #0A2647    #F0F7FF
   3              body text           #3D5166    #CBD5E0
   4              primary background  #FFFFFF    #0D1F3C
   5              ink background      #0F2E54    #0D1F3C
   6              on ink              #F4F7FA    #F4F7FA
   7              site canvas         #EEF4FB    #091929
   8              neon teal (decor)   #00FFE7    #00FFE7
   Border (not a token): #C8D8E8 / #1A3355
   Values marked "derived" are tints for hover and soft fills. */
:root {
  color-scheme: light dark;

  --wh-brand: #00C896;
  --wh-brand-strong: #00B386;      /* derived: hover */
  --wh-brand-soft: #8FE8D0;        /* derived */
  --wh-brand-tint: #E6FAF4;        /* derived */
  --wh-on-brand: #0A2647;          /* navy text on teal: 7:1 contrast */
  --wh-link: #007A58;
  --wh-link-hover: #005C42;        /* derived */
  --wh-heading: #0A2647;
  --wh-text: #3D5166;
  --wh-muted: #5F7389;             /* derived */
  --wh-surface: #FFFFFF;
  --wh-surface-2: #F4F7FA;
  --wh-surface-3: #E6EEF6;         /* derived */
  --wh-canvas: #EEF4FB;
  --wh-ink: #0F2E54;
  --wh-on-ink: #F4F7FA;
  --wh-on-ink-muted: #B8C7D9;      /* derived */
  --wh-neon: #00FFE7;
  --wh-border: #C8D8E8;
  --wh-shadow: 0 1px 2px rgba(10, 38, 71, 0.06), 0 4px 16px rgba(10, 38, 71, 0.06);
  --wh-radius: 14px;
  --wh-radius-sm: 10px;
  --wh-font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --wh-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --wh-brand-strong: #2EDBAE;    /* derived */
    --wh-brand-soft: #0E6B55;      /* derived */
    --wh-brand-tint: #0B3A3A;      /* derived */
    --wh-link: #3DEBB0;
    --wh-link-hover: #7FF3CB;      /* derived */
    --wh-heading: #F0F7FF;
    --wh-text: #CBD5E0;
    --wh-muted: #94A3B8;           /* derived */
    --wh-surface: #0D1F3C;
    --wh-surface-2: #10264A;       /* derived */
    --wh-surface-3: #15305A;       /* derived */
    --wh-canvas: #091929;
    --wh-ink: #0D1F3C;
    --wh-border: #1A3355;
    --wh-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  }
}

/* ---------- Generated: stock Twenty-One and Standard Cart colours mapped to the tokens above ---------- */
/*  from twenty-one/css/theme.css  */
body {
    color: var(--wh-text);
    background-color: var(--wh-surface)
}
a {
    color: var(--wh-link)
}
a:hover {
    color: var(--wh-link-hover)
}
caption {
    color: var(--wh-muted)
}
.blockquote-footer {
    color: var(--wh-muted)
}
.img-thumbnail {
    background-color: var(--wh-surface);
    border: 1px solid var(--wh-border)
}
.figure-caption {
    color: var(--wh-muted)
}
pre {
    color: var(--wh-text)
}
.table {
    color: var(--wh-text)
}
.table th,
.table td {
    border-top: 1px solid var(--wh-border)
}
.table thead th {
    border-bottom: 2px solid var(--wh-border)
}
.table tbody + tbody {
    border-top: 2px solid var(--wh-border)
}
.table-bordered {
    border: 1px solid var(--wh-border)
}
.table-bordered th,
.table-bordered td {
    border: 1px solid var(--wh-border)
}
.table-hover tbody tr:hover {
    color: var(--wh-text)
}
.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: var(--wh-brand-soft)
}
.table-primary th,
.table-primary td,
.table-primary thead th,
.table-primary tbody + tbody {
    border-color: var(--wh-brand-soft)
}
.table-hover .table-primary:hover {
    background-color: var(--wh-brand-soft)
}
.table-hover .table-primary:hover > td,
.table-hover .table-primary:hover > th {
    background-color: var(--wh-brand-soft)
}
.table-light,
.table-light > th,
.table-light > td {
    background-color: var(--wh-surface)
}
.table .thead-light th {
    color: var(--wh-muted);
    background-color: var(--wh-surface-3);
    border-color: var(--wh-border)
}
.form-control {
    color: var(--wh-muted);
    background-color: var(--wh-surface);
    border: 1px solid var(--wh-border)
}
.form-control:focus {
    color: var(--wh-muted);
    background-color: var(--wh-surface);
    border-color: var(--wh-brand);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 25%, transparent)
}
.form-control::-moz-placeholder {
    color: var(--wh-muted)
}
.form-control::placeholder {
    color: var(--wh-muted)
}
.form-control:disabled, .form-control[readonly] {
    background-color: var(--wh-surface-3)
}
select.form-control:focus::-ms-value {
    color: var(--wh-muted);
    background-color: var(--wh-surface)
}
.form-control-plaintext {
    color: var(--wh-text)
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
    color: var(--wh-muted)
}
.was-validated .custom-select:valid, .custom-select.is-valid {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") var(--wh-surface) no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
}
.was-validated .custom-select:invalid, .custom-select.is-invalid {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") var(--wh-surface) no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
}
.btn {
    color: var(--wh-text)
}
.btn:hover {
    color: var(--wh-text)
}
.btn:focus, .btn.focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 25%, transparent)
}
.btn-primary {
    background-color: var(--wh-brand);
    border-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.btn-primary:hover {
    background-color: var(--wh-brand-strong);
    border-color: var(--wh-brand-strong);
    color: var(--wh-on-brand)
}
.btn-primary:focus, .btn-primary.focus {
    background-color: var(--wh-brand-strong);
    border-color: var(--wh-brand-strong);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 50%, transparent);
    color: var(--wh-on-brand)
}
.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--wh-brand);
    border-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
    background-color: var(--wh-brand-strong);
    border-color: var(--wh-brand-strong);
    color: var(--wh-on-brand)
}
.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 50%, transparent)
}
.btn-light {
    background-color: var(--wh-surface-2);
    border-color: var(--wh-border)
}
.btn-light:hover {
    background-color: var(--wh-surface-3);
    border-color: var(--wh-border)
}
.btn-light:focus, .btn-light.focus {
    background-color: var(--wh-surface-3);
    border-color: var(--wh-border)
}
.btn-light.disabled, .btn-light:disabled {
    background-color: var(--wh-surface-2);
    border-color: var(--wh-border)
}
.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle {
    background-color: var(--wh-surface-3);
    border-color: var(--wh-border)
}
.btn-outline-primary {
    color: var(--wh-link);
    border-color: var(--wh-brand)
}
.btn-outline-primary:hover {
    background-color: var(--wh-brand);
    border-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 50%, transparent)
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: var(--wh-link)
}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--wh-brand);
    border-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 50%, transparent)
}
.btn-outline-secondary {
    color: var(--wh-muted)
}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
    color: var(--wh-muted)
}
.btn-outline-light {
    border-color: var(--wh-border)
}
.btn-outline-light:hover {
    color: var(--wh-text);
    background-color: var(--wh-surface-2);
    border-color: var(--wh-border)
}
.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active, .show > .btn-outline-light.dropdown-toggle {
    color: var(--wh-text);
    background-color: var(--wh-surface-2);
    border-color: var(--wh-border)
}
.btn-outline-dark {
    color: var(--wh-text)
}
.btn-outline-dark.disabled, .btn-outline-dark:disabled {
    color: var(--wh-text)
}
.btn-link {
    color: var(--wh-link)
}
.btn-link:hover {
    color: var(--wh-link-hover)
}
.btn-link:disabled, .btn-link.disabled {
    color: var(--wh-muted)
}
.dropdown-menu {
    color: var(--wh-text);
    background-color: var(--wh-surface)
}
.dropdown-divider {
    border-top: 1px solid var(--wh-border)
}
.dropdown-item {
    color: var(--wh-text)
}
.dropdown-item:hover, .dropdown-item:focus {
    color: var(--wh-text);
    background-color: var(--wh-surface-2)
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.dropdown-item.disabled, .dropdown-item:disabled {
    color: var(--wh-muted)
}
.dropdown-header {
    color: var(--wh-muted)
}
.dropdown-item-text {
    color: var(--wh-text)
}
.input-group-text {
    color: var(--wh-muted);
    background-color: var(--wh-surface-3);
    border: 1px solid var(--wh-border)
}
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--wh-brand);
    background-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 25%, transparent)
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--wh-brand)
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: var(--wh-brand-soft);
    border-color: var(--wh-brand-soft);
    color: var(--wh-on-brand)
}
.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
    color: var(--wh-muted)
}
.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
    background-color: var(--wh-surface-3)
}
.custom-control-label::before {
    background-color: var(--wh-surface)
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: var(--wh-brand);
    background-color: var(--wh-brand)
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: color-mix(in srgb, var(--wh-brand) 50%, transparent)
}
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
    background-color: color-mix(in srgb, var(--wh-brand) 50%, transparent)
}
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: color-mix(in srgb, var(--wh-brand) 50%, transparent)
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--wh-surface)
}
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: color-mix(in srgb, var(--wh-brand) 50%, transparent)
}
.custom-select {
    color: var(--wh-muted);
    background: var(--wh-surface) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
    border: 1px solid var(--wh-border)
}
.custom-select:focus {
    border-color: var(--wh-brand);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 25%, transparent)
}
.custom-select:focus::-ms-value {
    color: var(--wh-muted);
    background-color: var(--wh-surface)
}
.custom-select:disabled {
    color: var(--wh-muted);
    background-color: var(--wh-surface-3)
}
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--wh-brand);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 25%, transparent)
}
.custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label {
    background-color: var(--wh-surface-3)
}
.custom-file-label {
    color: var(--wh-muted);
    background-color: var(--wh-surface);
    border: 1px solid var(--wh-border)
}
.custom-file-label::after {
    color: var(--wh-muted);
    background-color: var(--wh-surface-3)
}
.custom-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 25%, transparent)
}
.custom-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 25%, transparent)
}
.custom-range:focus::-ms-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 25%, transparent)
}
.custom-range::-webkit-slider-thumb {
    background-color: var(--wh-brand)
}
.custom-range::-webkit-slider-thumb:active {
    background-color: var(--wh-brand-soft)
}
.custom-range::-webkit-slider-runnable-track {
    background-color: var(--wh-surface-3)
}
.custom-range::-moz-range-thumb {
    background-color: var(--wh-brand)
}
.custom-range::-moz-range-thumb:active {
    background-color: var(--wh-brand-soft)
}
.custom-range::-moz-range-track {
    background-color: var(--wh-surface-3)
}
.custom-range::-ms-thumb {
    background-color: var(--wh-brand)
}
.custom-range::-ms-thumb:active {
    background-color: var(--wh-brand-soft)
}
.custom-range::-ms-fill-lower {
    background-color: var(--wh-surface-3)
}
.custom-range::-ms-fill-upper {
    background-color: var(--wh-surface-3)
}
.nav-link.disabled {
    color: var(--wh-muted)
}
.nav-tabs {
    border-bottom: 1px solid var(--wh-border)
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-color: var(--wh-border) var(--wh-border) var(--wh-border)
}
.nav-tabs .nav-link.disabled {
    color: var(--wh-muted)
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--wh-muted);
    background-color: var(--wh-surface);
    border-color: var(--wh-border) var(--wh-border) #fff
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.card, .mc-promo-manage, .mc-promo-login {
    background-color: var(--wh-surface)
}
.breadcrumb {
    background-color: var(--wh-surface-3)
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--wh-muted)
}
.breadcrumb-item.active {
    color: var(--wh-muted)
}
.page-link {
    color: var(--wh-link);
    background-color: var(--wh-surface);
    border: 1px solid var(--wh-border)
}
.page-link:hover {
    color: var(--wh-link-hover);
    background-color: var(--wh-surface-3);
    border-color: var(--wh-border)
}
.page-link:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 25%, transparent)
}
.page-item.active .page-link {
    background-color: var(--wh-brand);
    border-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.page-item.disabled .page-link {
    color: var(--wh-muted);
    background-color: var(--wh-surface);
    border-color: var(--wh-border)
}
.badge-primary {
    background-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
a.badge-primary:hover, a.badge-primary:focus {
    background-color: var(--wh-brand-strong);
    color: var(--wh-on-brand)
}
a.badge-primary:focus, a.badge-primary.focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 50%, transparent)
}
.badge-light {
    background-color: var(--wh-surface-2)
}
a.badge-light:hover, a.badge-light:focus {
    background-color: var(--wh-surface-3)
}
.jumbotron {
    background-color: var(--wh-surface-3)
}
.alert-primary {
    color: var(--wh-link-hover);
    background-color: var(--wh-brand-tint);
    border-color: var(--wh-brand-soft)
}
.alert-primary hr {
    border-top-color: var(--wh-brand-soft)
}
.alert-secondary {
    background-color: var(--wh-surface-3);
    border-color: var(--wh-border)
}
.alert-secondary hr {
    border-top-color: var(--wh-border)
}
.alert-light {
    background-color: var(--wh-surface)
}
.alert-dark {
    border-color: var(--wh-border)
}
.alert-dark hr {
    border-top-color: var(--wh-border)
}
.progress {
    background-color: var(--wh-surface-3)
}
.progress-bar {
    background-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.list-group-item-action {
    color: var(--wh-muted)
}
.list-group-item-action:hover, .list-group-item-action:focus {
    color: var(--wh-muted);
    background-color: var(--wh-surface-2)
}
.list-group-item-action:active {
    color: var(--wh-text);
    background-color: var(--wh-surface-3)
}
.list-group-item {
    background-color: var(--wh-surface)
}
.list-group-item.disabled, .list-group-item:disabled {
    color: var(--wh-muted);
    background-color: var(--wh-surface)
}
.list-group-item.active {
    background-color: var(--wh-brand);
    border-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.list-group-item-primary {
    color: var(--wh-link-hover);
    background-color: var(--wh-brand-soft)
}
.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
    color: var(--wh-link-hover);
    background-color: var(--wh-brand-soft)
}
.list-group-item-primary.list-group-item-action.active {
    background-color: var(--wh-brand-strong);
    border-color: var(--wh-brand-strong);
    color: var(--wh-on-brand)
}
.list-group-item-secondary {
    color: var(--wh-text)
}
.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
    color: var(--wh-text)
}
.list-group-item-light {
    color: var(--wh-muted);
    background-color: var(--wh-surface)
}
.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
    color: var(--wh-muted)
}
.list-group-item-dark {
    color: var(--wh-text)
}
.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
    color: var(--wh-text)
}
.close {
    color: var(--wh-text)
}
.close:hover {
    color: var(--wh-text)
}
.toast-header {
    color: var(--wh-muted)
}
.modal-content {
    background-color: var(--wh-surface)
}
.modal-header {
    border-bottom: 1px solid var(--wh-border)
}
.modal-footer {
    border-top: 1px solid var(--wh-border)
}
.popover {
    background-color: var(--wh-surface)
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^=bottom] .popover-header::before {
    border-bottom: 1px solid var(--wh-border)
}
.popover-header {
    background-color: var(--wh-surface-2);
    border-bottom: 1px solid var(--wh-border)
}
.popover-body {
    color: var(--wh-text)
}
.carousel-indicators li {
    background-color: var(--wh-surface)
}
.bg-primary {
    background-color: var(--wh-brand) !important
}
a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: var(--wh-brand-strong) !important
}
.bg-light {
    background-color: var(--wh-surface-2) !important
}
a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
    background-color: var(--wh-surface-3) !important
}
.bg-white {
    background-color: var(--wh-surface) !important
}
.border {
    border: 1px solid var(--wh-border) !important
}
.border-top {
    border-top: 1px solid var(--wh-border) !important
}
.border-right {
    border-right: 1px solid var(--wh-border) !important
}
.border-bottom {
    border-bottom: 1px solid var(--wh-border) !important
}
.border-left {
    border-left: 1px solid var(--wh-border) !important
}
.border-primary {
    border-color: var(--wh-brand) !important
}
.border-light {
    border-color: var(--wh-border) !important
}
.text-primary {
    color: var(--wh-link) !important
}
a.text-primary:hover, a.text-primary:focus {
    color: var(--wh-link-hover) !important
}
.text-secondary {
    color: var(--wh-muted) !important
}
a.text-secondary:hover, a.text-secondary:focus {
    color: var(--wh-muted) !important
}
.text-body {
    color: var(--wh-text) !important
}
.text-muted {
    color: var(--wh-muted) !important
}
@media print {
    .table td,
  .table th {
        background-color: var(--wh-surface) !important
    }
}
@media print {
    .table-bordered th,
  .table-bordered td {
        border: 1px solid var(--wh-border) !important
    }
}
@media print {
    .table-dark th,
  .table-dark td,
  .table-dark thead th,
  .table-dark tbody + tbody {
        border-color: var(--wh-border)
    }
}
@media print {
    .table .thead-dark th {
        border-color: var(--wh-border)
    }
}
form[data-role=json-form] .has-error input.form-control,
form[data-role=json-form] .has-error textarea.form-control,
form[data-role=json-form] .has-error select.form-control {
    background-color: var(--wh-surface-2)
}
.select-account {
    border-top: 1px solid var(--wh-border)
}
.select-account a {
    border-bottom: 1px solid var(--wh-border)
}
.select-account a:hover {
    background-color: var(--wh-surface-2)
}
.continue-container {
    background-color: var(--wh-surface-2);
    border: 1px solid var(--wh-border)
}
.invite-box {
    background-color: var(--wh-surface-2);
    border: 1px solid var(--wh-border)
}
a.admin-inline-edit {
    color: var(--wh-muted)
}
a.admin-inline-edit:hover {
    color: var(--wh-muted)
}
.primary-bg-color {
    background-color: var(--wh-surface-2)
}
header.header {
    background-color: var(--wh-surface)
}
header.header .user-icon {
    color: var(--wh-muted)
}
header.header .toolbar .nav-link {
    border: 1px solid var(--wh-border)
}
header.header .toolbar .nav-link:hover {
    color: var(--wh-muted)
}
header.header .search {
    border: 1px solid var(--wh-border)
}
header.header .navbar a {
    color: var(--wh-muted)
}
.master-breadcrumb {
    background-color: var(--wh-surface-3)
}
@media (min-width: 768px) {
    .btn-return-to-admin {
        color: var(--wh-muted) !important
    }
}
@media (min-width: 768px) {
    .btn-return-to-admin:hover {
        color: var(--wh-muted) !important
    }
}
.btn-return-to-admin .floating {
    color: var(--wh-muted) !important
}
.btn-return-to-admin .floating:hover {
    color: var(--wh-muted) !important
}
.input-group .btn-reveal-pw:hover, .input-group .btn-reveal-pw:active {
    background-color: var(--wh-surface);
    color: var(--wh-link);
    border-color: var(--wh-border)
}
.modal .modal-header {
    background-color: var(--wh-surface-2)
}
.modal-localisation .item-selector .item {
    border: 1px solid var(--wh-border)
}
.modal-localisation .item-selector .item:hover {
    background-color: var(--wh-surface-2);
    color: var(--wh-muted)
}
.modal-localisation .item-selector .item.active {
    background-color: var(--wh-surface-3);
    border-color: var(--wh-border);
    color: var(--wh-muted)
}
.btn-default {
    color: var(--wh-text);
    background-color: var(--wh-surface);
    border-color: var(--wh-border)
}
.btn-default:focus,
.btn-default.focus {
    color: var(--wh-text);
    background-color: var(--wh-surface-3)
}
.btn-default:hover {
    background-color: var(--wh-surface-3)
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    color: var(--wh-text);
    background-color: var(--wh-surface-3)
}
.btn-default.disabled {
    border-color: var(--wh-border)
}
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
    background-color: var(--wh-surface) !important;
    border-color: var(--wh-border) !important
}
.card-accent-silver {
    border-top: 3px solid var(--wh-border)
}
.status-onhold {
    background-color: var(--wh-brand)
}
.status-payment-pending {
    background-color: var(--wh-brand)
}
.status-delivered {
    background-color: var(--wh-brand)
}
.responsive-tabs-sm .nav-item a:hover {
    background-color: var(--wh-surface-2)
}
@media (max-width: 767.98px) {
    .responsive-tabs-sm {
        border-left: 1px solid var(--wh-border);
        background: var(--wh-surface);
        border-top: 1px solid var(--wh-border);
        border-right: 1px solid var(--wh-border)
    }
}
@media (max-width: 767.98px) {
    .responsive-tabs-sm .nav-item {
        border-bottom: 1px solid var(--wh-border) !important
    }
}
@media (max-width: 767.98px) {
    .responsive-tabs-sm .nav-item a.active {
        background-color: var(--wh-surface) !important
    }
}
@media (max-width: 767.98px) {
    .responsive-tabs-sm-connector .channel {
        background: var(--wh-surface);
        border-right: 1px solid var(--wh-border)
    }
}
@media (max-width: 767.98px) {
    .responsive-tabs-sm-connector .bottom-border {
        border-bottom: 1px solid var(--wh-border)
    }
}
@media (max-width: 767.98px) {
    .responsive-tabs-sm-connector.store .channel {
        border-left: 1px solid var(--wh-border)
    }
}
.sidebar .list-group-item {
    border-color: var(--wh-border)
}
.sidebar .list-group-item .badge {
    background-color: var(--wh-surface);
    color: var(--wh-muted)
}
.sidebar .list-group-item > i.far.fa-circle {
    color: var(--wh-muted)
}
.home-domain-search .tld-logos {
    color: var(--wh-muted)
}
.home-domain-search .input-group-wrapper {
    background-color: var(--wh-surface);
    border: 1px solid var(--wh-border)
}
.home-domain-search .input-group-wrapper .advanced-input label {
    color: var(--wh-text)
}
.action-icon-btns a {
    color: var(--wh-muted);
    background-color: var(--wh-surface)
}
.action-icon-btns a:hover {
    color: var(--wh-muted)
}
.client-home-cards .card-header {
    background-color: var(--wh-surface)
}
.client-home-cards .card-header .btn:hover {
    color: var(--wh-text)
}
.client-home-cards .list-group {
    border-top: 1px solid var(--wh-border) !important;
    border-bottom: 1px solid var(--wh-border) !important
}
.client-home-cards .list-group .list-group-item {
    border-bottom: 1px solid var(--wh-border)
}
.client-home-cards small {
    color: var(--wh-muted)
}
.tiles .tile {
    background-color: var(--wh-surface-2);
    border-right: 1px solid var(--wh-border)
}
.tiles .tile .title {
    color: var(--wh-muted)
}
.tiles .tile:hover {
    background-color: var(--wh-surface-2)
}
@media (max-width: 1199.98px) {
    .tiles div:nth-child(1) > .tile,
  .tiles div:nth-child(2) > .tile {
        border-bottom: 1px solid var(--wh-border)
    }
}
div[menuitemname="Active Products/Services"] .btn-view-more.disabled {
    color: var(--wh-muted)
}
.twofa-setup .activation-msg {
    border: 1px dashed var(--wh-border)
}
.twofa-setup .backup-code {
    background-color: var(--wh-surface-2);
    color: var(--wh-muted)
}
.twofa-module {
    border: 1px solid var(--wh-border)
}
.twofa-module.active {
    border-color: var(--wh-brand)
}
.popover-user-notifications {
    border-color: var(--wh-border)
}
.popover-user-notifications ul li {
    border-bottom: 1px solid var(--wh-border)
}
.popover-user-notifications ul li a {
    color: var(--wh-muted)
}
.popover-user-notifications ul li a:hover {
    background-color: var(--wh-surface-2)
}
.verification-banner {
    background-color: var(--wh-surface-2);
    border-bottom: 1px solid var(--wh-border);
    color: var(--wh-text)
}
.verification-banner .fas,
.verification-banner .fal,
.verification-banner .far {
    color: var(--wh-muted)
}
.md-editor {
    border: 1px solid var(--wh-border)
}
.md-editor > .btn-toolbar {
    background-color: var(--wh-surface) !important
}
.md-editor > textarea.markdown-editor,
.md-editor > .md-preview {
    border-top: 1px solid var(--wh-border) !important;
    border-bottom: 1px solid var(--wh-border) !important;
    background-color: var(--wh-surface) !important
}
div.md-editor.active {
    border: 1px solid var(--wh-border)
}
.markdown-editor-status {
    color: var(--wh-muted)
}
.md-preview h1, .markdown-content h1 {
    color: var(--wh-text)
}
.md-preview h2, .markdown-content h2 {
    color: var(--wh-text)
}
.md-preview h3, .markdown-content h3 {
    color: var(--wh-text)
}
.md-preview h4, .markdown-content h4 {
    color: var(--wh-text)
}
.md-preview blockquote, .markdown-content blockquote {
    border-left: 5px solid var(--wh-border)
}
.md-preview table, .markdown-content table {
    background-color: var(--wh-surface);
    border: 1px solid var(--wh-border)
}
.md-preview table > thead > tr > th, .markdown-content table > thead > tr > th {
    background-color: var(--wh-surface-2);
    border: 1px solid var(--wh-border)
}
.md-preview table > tbody > tr > td, .markdown-content table > tbody > tr > td {
    border: 1px solid var(--wh-border)
}
.store-order-container .store-domain-tabs li a {
    background-color: var(--wh-surface-2);
    border-bottom: 1px solid var(--wh-border)
}
.store-order-container .store-domain-tabs li.active a {
    background-color: var(--wh-surface)
}
.store-order-container .store-domain-tab-content {
    border: 1px solid var(--wh-border)
}
.store-order-container .domain-validation {
    color: var(--wh-muted)
}
.promo-container {
    background-color: var(--wh-surface)
}
.promo-banner {
    background-color: var(--wh-surface)
}
.promo-banner.weebly {
    border-top: 3px solid var(--wh-brand)
}
.promo-banner.weebly .btn {
    background-color: var(--wh-brand)
}
.promo-banner.spamexperts {
    border-top: 3px solid var(--wh-brand)
}
.promo-banner.spamexperts .btn {
    background-color: var(--wh-brand)
}
.promo-banner.nordvpn {
    border-top: 3px solid var(--wh-brand)
}
.promo-banner.nordvpn .btn {
    background-color: var(--wh-brand)
}
.promo-banner.marketgoo {
    border-top: 3px solid var(--wh-brand)
}
.promo-banner.marketgoo .btn {
    background-color: var(--wh-brand)
}
.promo-banner.ox a {
    color: var(--wh-muted)
}
.client-home-cards div[menuitemname=ThreesixtymonitoringLogin] .threesixtymonitoring-metrics-row > div:not(:last-child) {
    border-right: 1px solid var(--wh-border)
}
.client-home-cards div[menuitemname=ThreesixtymonitoringLogin] .threesixtymonitoring-title {
    color: var(--wh-muted)
}
.upgrade .product-to-be-upgraded {
    background-color: var(--wh-surface-2)
}
.upgrade .products .product {
    background-color: var(--wh-surface)
}
.upgrade .products .product ul {
    border-left: 1px solid var(--wh-border);
    border-right: 1px solid var(--wh-border)
}
.upgrade .products .product .footer {
    border: 1px solid var(--wh-border)
}
.upgrade .products .product .header {
    background-color: var(--wh-brand-strong);
    color: var(--wh-on-brand)
}
.upgrade .products .product ul li {
    border-bottom: 1px solid var(--wh-border)
}
.upgrade .products .product ul li span {
    color: var(--wh-muted)
}
.upgrade .products .product .btn {
    background-color: var(--wh-brand-strong);
    color: var(--wh-on-brand)
}
.announcements .announcement article {
    background-color: var(--wh-surface-2);
    border-left: 4px solid var(--wh-border)
}
.kb-category a:hover {
    background-color: var(--wh-surface-2)
}
.kb-article-item:hover {
    background-color: var(--wh-surface-2)
}
.kb-article-item small {
    color: var(--wh-muted)
}
.ticket-reply .rating span.star:before,
.ticket-reply .rating-done span.star:before {
    color: var(--wh-muted)
}
.view-ticket .card-body, .view-ticket .mc-promo-manage .content, .mc-promo-manage .view-ticket .content, .view-ticket .mc-promo-login .content, .mc-promo-login .view-ticket .content {
    border-bottom: 1px solid var(--wh-border)
}
.view-ticket .posted-by {
    color: var(--wh-muted);
    background-color: var(--wh-surface-2)
}
.view-ticket .attachments {
    border-top: 1px dashed var(--wh-border)
}
.view-ticket .attachment-list li span {
    border: 1px solid var(--wh-border)
}
.view-ticket .attachment-list li figure {
    background-color: var(--wh-surface-2)
}
.ticketfeedbackstaffcont {
    background-color: var(--wh-surface-2)
}
#registration label {
    color: var(--wh-muted)
}
#registration .sub-heading {
    border-top: 1px solid var(--wh-border)
}
#registration .sub-heading span {
    color: var(--wh-link-hover);
    background-color: var(--wh-surface)
}
#registration .field,
#registration .form-control {
    border: 1px solid var(--wh-border);
    color: var(--wh-muted);
    background: var(--wh-surface)
}
#registration .form-control:focus {
    border-color: var(--wh-border)
}
#registration .field[disabled],
#registration .field[readonly],
#registration .form-control[disabled],
#registration .form-control[readonly] {
    background-color: var(--wh-surface-2)
}
#registration .field-help-text {
    color: var(--wh-muted)
}
div.credit-card {
    background-color: var(--wh-surface-2);
    border: 1px solid var(--wh-border)
}
.invoice-summary-table td.total-row {
    background-color: var(--wh-surface-2)
}
div.credit-card .logo-amex {
    color: var(--wh-link)
}
div.credit-card .logo-discover {
    color: var(--wh-text)
}
tr.masspay-total td {
    background-color: var(--wh-surface-2)
}
div.product-details div.product-icon {
    background-color: var(--wh-surface-2)
}
div.product-details-tab-container {
    border: 1px solid var(--wh-border);
    background-color: var(--wh-surface)
}
.featured-tld {
    background-color: var(--wh-surface)
}
.featured-tld .price {
    background-color: var(--wh-surface-2);
    color: var(--wh-muted)
}
.featured-tld .price.club {
    background-color: var(--wh-brand-strong);
    color: var(--wh-on-brand)
}
.featured-tld .price.com {
    background-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.domain-pricing .tld-row {
    border-bottom: 1px solid var(--wh-border)
}
.domain-pricing .tld-row.highlighted {
    background: var(--wh-surface-2)
}
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header .col-sm-4 {
    border-bottom: 6px solid var(--wh-brand-soft);
    background-color: var(--wh-surface-2)
}
.domain-pricing .tld-pricing-header div:nth-child(odd) {
    border-color: var(--wh-brand);
    background-color: var(--wh-surface-2)
}
@media (min-width: 768px) {
    .domain-pricing .two-row-center {
        border-right: 2px solid var(--wh-brand-soft)
    }
}
.dataTables_wrapper table.table-list {
    border: 1px solid var(--wh-border)
}
.dataTables_wrapper table.table-list thead th {
    border-bottom: 4px solid color-mix(in srgb, var(--wh-brand-strong) 20%, transparent)
}
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--wh-surface-2)
}
.dataTables_wrapper .dataTables_filter label .form-control {
    background: url("../../../assets/img/search.png") var(--wh-surface) no-repeat 8px 5px
}
.pagination > li > a,
.pagination > li > span {
    color: var(--wh-muted)
}
table.table-list thead th {
    background-color: var(--wh-surface);
    border-bottom: 1px solid var(--wh-border);
    color: var(--wh-text)
}
.table-list > tbody > tr > td a.border-left {
    border-left: 1px solid var(--wh-border)
}
.table-list > tbody > tr > td {
    background-color: var(--wh-surface)
}
.table-list > tbody > tr:hover > td {
    background-color: var(--wh-surface-2)
}
table.table-solid-bottom-border-light-gray {
    border-bottom: 1px solid var(--wh-border)
}
/*  from twenty-one/css/all.css  */
.intl-tel-input .country-list {
    border: 1px solid var(--wh-border)
}
.intl-tel-input .country-list .divider {
    border-bottom: 1px solid var(--wh-border)
}
.intl-tel-input .country-list .country .dial-code {
    color: var(--wh-muted)
}
.iti-flag {
    background-color: var(--wh-surface-3)
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
    .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
    background-color: var(--wh-brand);
    border-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:hover,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:hover {
    background-color: var(--wh-brand-strong);
    border-color: var(--wh-brand-strong);
    color: var(--wh-on-brand)
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:focus, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:focus,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wh-brand) 50%, transparent)
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:disabled {
    background-color: var(--wh-brand);
    border-color: var(--wh-brand)
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.active,
      .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary.dropdown-toggle,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary:active,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.active,
      .show >
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary.dropdown-toggle {
    background-color: var(--wh-brand-strong);
    border-color: var(--wh-brand-strong);
    color: var(--wh-on-brand)
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary,
    .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary {
    color: var(--wh-text);
    background-color: var(--wh-surface);
    border-color: var(--wh-border)
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:hover,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:hover {
    color: var(--wh-text);
    background-color: var(--wh-surface-3)
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.disabled, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.disabled,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:disabled {
    background-color: var(--wh-surface);
    border-color: var(--wh-border)
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary:active, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.active,
      .show > .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-secondary.dropdown-toggle,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:active,
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.active,
      .show >
      .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary.dropdown-toggle {
    color: var(--wh-text);
    background-color: var(--wh-surface-3)
}
.bootstrap-switch.bootstrap-switch-focused {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wh-brand) 50%, transparent)
}
.md-editor {
    border: 1px solid var(--wh-border)
}
.md-editor .md-footer,.md-editor>.md-header {
    background: var(--wh-surface-2)
}
.md-editor>.md-preview {
    background: var(--wh-surface);
    border-top: 1px dashed var(--wh-border);
    border-bottom: 1px dashed var(--wh-border)
}
.md-editor>textarea {
    border-top: 1px dashed var(--wh-border);
    border-bottom: 1px dashed var(--wh-border);
    background: var(--wh-surface-2)
}
.md-editor>textarea:focus {
    background: var(--wh-surface)
}
.md-editor.active {
    border-color: var(--wh-brand-soft);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px color-mix(in srgb, var(--wh-brand-soft) 60%, transparent);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px color-mix(in srgb, var(--wh-brand-soft) 60%, transparent)
}
.md-editor .md-controls .md-control:hover {
    color: var(--wh-text)
}
.md-editor.md-fullscreen-mode {
    background: var(--wh-surface) !important
}
.md-editor.md-fullscreen-mode .md-input,.md-editor.md-fullscreen-mode .md-preview {
    color: var(--wh-muted);
    background: var(--wh-surface) !important
}
.md-editor.md-fullscreen-mode .md-preview {
    color: var(--wh-text)
}
.md-editor.md-fullscreen-mode .md-input:focus,.md-editor.md-fullscreen-mode .md-input:hover {
    color: var(--wh-text);
    background: var(--wh-surface) !important
}
.md-editor.md-fullscreen-mode .btn.active,.md-editor.md-fullscreen-mode .btn:active,.md-editor.md-fullscreen-mode .btn:focus,.md-editor.md-fullscreen-mode .btn:hover {
    color: var(--wh-text)
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover {
    color: var(--wh-text)
}
div.dataTables_processing > div:last-child > div {
    background: color-mix(in srgb, var(--wh-brand) 90%, transparent)
}
table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--wh-brand) 90%, transparent)
}
table.dataTable > tbody > tr.selected a {
    color: var(--wh-text)
}
table.dataTable.table-hover > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--wh-brand) 98%, transparent)
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    background-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before {
    background-color: var(--wh-brand);
    color: var(--wh-on-brand)
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom: 1px solid var(--wh-border)
}
div.dtr-modal div.dtr-modal-display {
    background-color: var(--wh-surface-2)
}
div.dtr-modal div.dtr-modal-close {
    border: 1px solid var(--wh-border);
    background-color: var(--wh-surface-2)
}
div.dtr-modal div.dtr-modal-close:hover {
    background-color: var(--wh-surface-3)
}
.lb-data .lb-number {
    color: var(--wh-muted)
}
.captcha-overlay-popup {
    background-color: var(--wh-surface);
    border: 1px solid var(--wh-border)
}/*  from standard_cart/css/all.css  */
#order-standard_cart label,
#order-standard_cart p.domain-renewal-desc,
.service-renewals .div-renewal-period-label {
    color: var(--wh-muted)
}
#order-standard_cart .sub-heading {
    border-top: 1px solid var(--wh-border)
}
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
    color: var(--wh-link-hover)
}
#order-standard_cart .domain-checker-advanced label {
    color: var(--wh-text)
}
#order-standard_cart .products .product {
    background: var(--wh-surface);
    border: 1px solid var(--wh-border)
}
#order-standard_cart .products .product header {
    background: var(--wh-surface-2)
}
#order-standard_cart .products .product header span {
    color: var(--wh-text)
}
#order-standard_cart .products .product header .qty {
    color: var(--wh-muted)
}
#order-standard_cart .panel-addon .panel-body label {
    color: var(--wh-text)
}
#order-standard_cart .panel-addon .panel-price {
    background-color: var(--wh-surface-3)
}
#order-standard_cart .panel-addon-selected {
    border-color: var(--wh-border)
}
#order-standard_cart .domain-selection-options .option {
    background-color: var(--wh-surface-2)
}
#order-standard_cart .domain-selection-options .option-selected {
    background-color: var(--wh-surface-2)
}
#order-standard_cart .transfer-not-eligible {
    color: var(--wh-muted);
    background-color: var(--wh-surface-2)
}
#order-standard_cart .product-info {
    background-color: var(--wh-surface-2);
    border-top: 1px solid var(--wh-border);
    border-bottom: 1px solid var(--wh-border)
}
#order-standard_cart .summary-container {
    background-color: var(--wh-surface-2)
}
#order-standard_cart .order-summary .summary-totals {
    border-top: 1px solid var(--wh-border);
    border-bottom: 1px solid var(--wh-border)
}
#order-standard_cart .apply-credit-container {
    background-color: var(--wh-surface-2)
}
#order-standard_cart .cc-input-container {
    background-color: var(--wh-surface-2);
    border: 1px solid var(--wh-border)
}
#order-standard_cart .cc-input-container .existing-cc-grid {
    color: var(--wh-muted)
}
#order-standard_cart .field,
#order-standard_cart .form-control {
    border: 1px solid var(--wh-border);
    color: var(--wh-muted);
    background-color: var(--wh-surface)
}
#order-standard_cart .form-control:focus {
    border-color: var(--wh-border)
}
#order-standard_cart .field[disabled],
#order-standard_cart .field[readonly],
#order-standard_cart .form-control[disabled],
#order-standard_cart .form-control[readonly] {
    background-color: var(--wh-surface-2)
}
#order-standard_cart .field-help-text {
    color: var(--wh-muted)
}
#order-standard_cart .view-cart-items-header {
    background-color: var(--wh-brand-strong);
    color: var(--wh-on-brand)
}
#order-standard_cart .view-cart-items {
    border-bottom: 2px solid var(--wh-brand-strong)
}
#order-standard_cart .view-cart-items .item {
    background-color: var(--wh-surface)
}
#order-standard_cart .view-cart-items .item:nth-child(even) {
    background-color: var(--wh-surface-2)
}
#order-standard_cart .btn-remove-from-cart {
    color: var(--wh-muted)
}
#order-standard_cart .empty-cart .btn {
    background-color: var(--wh-brand-strong);
    color: var(--wh-on-brand)
}
#order-standard_cart .order-summary .subtotal {
    border-bottom: 1px solid var(--wh-border)
}
#order-standard_cart .order-summary .bordered-totals {
    border-bottom: 1px solid var(--wh-border)
}
#order-standard_cart .order-summary .recurring-charges {
    color: var(--wh-muted)
}
#order-standard_cart .order-summary .btn-continue-shopping {
    color: var(--wh-text)
}
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    border-color: var(--wh-border) var(--wh-border) var(--wh-border);
    background-color: var(--wh-surface-2)
}
#order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--wh-surface-2)
}
#order-standard_cart .view-cart-promotion-code {
    background-color: var(--wh-surface);
    border: 1px dashed var(--wh-border)
}
#order-standard_cart .view-cart-gateway-checkout {
    background-color: var(--wh-surface-3)
}
div.domainresults div:not(.btn-group) {
    background-color: var(--wh-surface-3);
    color: var(--wh-muted)
}
div.domainresults div:not(.btn-group) span {
    color: var(--wh-muted)
}
.domain-checker-container .input-group-box {
    background-color: var(--wh-surface)
}
.domain-pricing .tld-row {
    border-bottom: 1px solid var(--wh-border)
}
.domain-pricing .tld-row.highlighted {
    background: var(--wh-surface-2)
}
.domain-pricing .tld-pricing-header .col-xs-2,
.domain-pricing .tld-pricing-header .col-sm-2,
.domain-pricing .tld-pricing-header .col-xs-4,
.domain-pricing .tld-pricing-header .col-sm-4 {
    border-bottom: 6px solid var(--wh-brand-soft);
    background-color: var(--wh-surface-2)
}
.domain-pricing .tld-pricing-header div:nth-child(odd) {
    border-color: var(--wh-brand);
    background-color: var(--wh-surface-2)
}
.domain-pricing .two-row-center {
    border-right: 2px solid var(--wh-brand-soft)
}
.spotlight-tlds {
    background-color: var(--wh-surface-2)
}
.spotlight-tld {
    background-color: var(--wh-surface);
    border: 1px solid var(--wh-border);
    color: var(--wh-muted)
}
.spotlight-tld .unavailable,
.spotlight-tld .invalid {
    background-color: var(--wh-surface-2);
    border-color: var(--wh-border)
}
.suggested-domains .domain-lookup-suggestions-message,
.suggested-domains .domain-lookup-suggestions-loader {
    background-color: var(--wh-surface-2)
}
.domain-promo-box {
    background-color: var(--wh-surface-2);
    border: 1px solid var(--wh-border);
    color: var(--wh-text)
}
.domain-promo-box .small {
    color: var(--wh-muted)
}
.form-control.domain-renewals-filter,
.form-control.service-renewals-filter {
    background: url(../../../../assets/img/search.png) var(--wh-surface) no-repeat 8px 5px !important
}
.domain-renewals,
.service-renewals {
    border-top: 1px solid var(--wh-border)
}
.domain-renewals,
.service-renewals,
.addon-renewals .service-renewal {
    background-color: var(--wh-surface-2)
}
.domain-renewals .domain-renewal,
.service-renewals .service-renewal {
    border-bottom: 1px solid var(--wh-border)
}
.domain-renewals .domain-renewal:nth-child(even),
.service-renewals .service-renewal:nth-child(even),
.addon-renewals .service-renewal:nth-child(even) {
    background-color: var(--wh-surface-2)
}
.service-renewals .div-renewal-ineligible {
    color: var(--wh-muted)
}
.addon-renewals > div {
    border: 1px solid var(--wh-border)
}
#order-standard_cart .addon-promo-container {
    border: 1px solid var(--wh-border)
}
#order-standard_cart .mc-promo {
    background-color: var(--wh-surface);
    border: 1px dashed var(--wh-border)
}
#order-standard_cart .mc-promo .body {
    border-top: 10px solid var(--wh-border);
    background-color: var(--wh-surface-2)
}
#order-standard_cart .mc-promo.weebly .expander,
#order-standard_cart .mc-promo.weebly .price {
    color: var(--wh-muted)
}
#order-standard_cart .mc-promo.spamexperts {
    border-color: var(--wh-brand)
}
#order-standard_cart .mc-promo.spamexperts .btn-add {
    background-color: var(--wh-brand)
}
#order-standard_cart .mc-promo.spamexperts .arrow {
    background-color: var(--wh-brand)
}
#order-standard_cart .mc-promo.spamexperts .expander,
#order-standard_cart .mc-promo.spamexperts .price {
    color: var(--wh-link)
}
#order-standard_cart .mc-promo.sitelockvpn .expander,
#order-standard_cart .mc-promo.sitelockvpn .price {
    color: var(--wh-muted)
}
#order-standard_cart .mc-promo.nordvpn {
    border-color: var(--wh-brand)
}
#order-standard_cart .mc-promo.nordvpn .btn-add {
    background-color: var(--wh-brand)
}
#order-standard_cart .mc-promo.nordvpn .arrow {
    background-color: var(--wh-brand)
}
#order-standard_cart .mc-promo.nordvpn .expander,
#order-standard_cart .mc-promo.nordvpn .price {
    color: var(--wh-link)
}
#order-standard_cart .mc-promo.marketgoo {
    border-color: var(--wh-brand)
}
#order-standard_cart .mc-promo.marketgoo .btn-add {
    background-color: var(--wh-brand)
}
#order-standard_cart .mc-promo.marketgoo .arrow {
    background-color: var(--wh-brand)
}
#order-standard_cart .mc-promo.marketgoo .expander,
#order-standard_cart .mc-promo.marketgoo .price {
    color: var(--wh-link)
}
#order-standard_cart .default-captcha {
    background-color: var(--wh-surface-2);
    border: 1px solid var(--wh-border);
    color: var(--wh-muted)
}
#order-standard_cart .account-select-container {
    border-right: 1px solid var(--wh-border)
}
#order-standard_cart .account-select-container div.account {
    background: var(--wh-surface-2);
    border: 1px solid var(--wh-border)
}
#order-standard_cart .account-select-container div.account.active {
    background: var(--wh-surface)
}
.product-recommendations .product-recommendation {
    background-color: var(--wh-surface);
    border: 1px dashed var(--wh-border)
}
.product-recommendations .product-recommendation .body {
    border-top: 10px solid var(--wh-border);
    background-color: var(--wh-surface-2)
}
/* ---------- Base ---------- */
html { font-size: 16px; }
body,
body.primary-bg-color {
  font-family: var(--wh-font-body);
  color: var(--wh-text);
  background-color: var(--wh-canvas);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .modal-title, .navbar-brand {
  font-family: var(--wh-font-heading);
  color: var(--wh-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1, .h1 { font-weight: 700; letter-spacing: -0.02em; }
::selection { background: var(--wh-brand); color: var(--wh-on-brand); }
:focus-visible { outline: 2px solid var(--wh-brand); outline-offset: 2px; }

/* ---------- Buttons: pill, like wondanation.com ---------- */
.btn { border-radius: 999px; font-weight: 600; padding-left: 1.1rem; padding-right: 1.1rem; }
.btn-sm { padding-left: 0.8rem; padding-right: 0.8rem; }
.btn-lg { padding: 0.75rem 1.6rem; }
.btn-primary, .btn-success {
  background-color: var(--wh-brand);
  border-color: var(--wh-brand);
  color: var(--wh-on-brand);
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled):active {
  background-color: var(--wh-brand-strong);
  border-color: var(--wh-brand-strong);
  color: var(--wh-on-brand);
}
.btn-outline-primary { color: var(--wh-link); border-color: var(--wh-brand); }
.btn-outline-primary:hover { background-color: var(--wh-brand); border-color: var(--wh-brand); color: var(--wh-on-brand); }
.btn-default, .btn-light, .btn-secondary {
  background-color: var(--wh-surface);
  border: 1px solid var(--wh-border);
  color: var(--wh-heading);
}
.btn-default:hover, .btn-light:hover, .btn-secondary:hover {
  background-color: var(--wh-surface-2);
  border-color: var(--wh-brand);
  color: var(--wh-heading);
}

/* ---------- Cards and panels ---------- */
.card, .mc-promo-manage, .mc-promo-login, .modal-content, .dropdown-menu, .popover, .list-group-item {
  background-color: var(--wh-surface);
  border-color: var(--wh-border);
  color: var(--wh-text);
}
.card, .mc-promo-manage, .mc-promo-login { border-radius: var(--wh-radius); box-shadow: var(--wh-shadow); }
.card-header, .card-footer { background-color: var(--wh-surface-2); border-color: var(--wh-border); }
.card-header:first-child { border-radius: calc(var(--wh-radius) - 1px) calc(var(--wh-radius) - 1px) 0 0; }
.card-footer:last-child { border-radius: 0 0 calc(var(--wh-radius) - 1px) calc(var(--wh-radius) - 1px); }
.dropdown-item { color: var(--wh-text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--wh-surface-2); color: var(--wh-heading); }
.popover-body { color: var(--wh-text); }
.text-muted { color: var(--wh-muted) !important; }
hr { border-top-color: var(--wh-border); }

/* ---------- Forms ---------- */
.form-control, .custom-select, .input-group-text, .custom-file-label {
  background-color: var(--wh-surface);
  border-color: var(--wh-border);
  color: var(--wh-heading);
  border-radius: var(--wh-radius-sm);
}
.form-control::placeholder { color: var(--wh-muted); opacity: 1; }
.form-control:focus, .custom-select:focus {
  background-color: var(--wh-surface);
  color: var(--wh-heading);
  border-color: var(--wh-brand);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wh-brand) 25%, transparent);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--wh-surface-2); }
.input-group-text { background-color: var(--wh-surface-2); }
label, .col-form-label { color: var(--wh-heading); font-weight: 600; }

/* ---------- Tables ---------- */
.table { color: var(--wh-text); }
.table th, .table td, .table thead th { border-color: var(--wh-border); }
.table thead th { color: var(--wh-heading); font-family: var(--wh-font-heading); font-weight: 600; }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--wh-surface-2); }
.table-hover tbody tr:hover { background-color: var(--wh-brand-tint); color: var(--wh-heading); }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length { color: var(--wh-muted); }

/* ---------- Header ---------- */
header.header { background-color: var(--wh-surface); border-bottom: 1px solid var(--wh-border); }
header.header .topbar { background-color: var(--wh-ink); color: var(--wh-on-ink); }
header.header .topbar .btn,
header.header .topbar .input-group-text { color: var(--wh-on-ink); background: transparent; border: 0; }
header.header .topbar .btn-active-client span { border-bottom: 1px dashed var(--wh-on-ink-muted); }
header.header .navbar { background-color: var(--wh-surface); }
header.header .navbar-light .navbar-brand { padding: 0.35rem 0; }
header.header .main-navbar-wrapper { background-color: var(--wh-surface); border-top: 1px solid var(--wh-border); }
header.header .main-navbar-wrapper .navbar-nav .nav-link {
  color: var(--wh-heading);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}
header.header .main-navbar-wrapper .navbar-nav .nav-link:hover,
header.header .main-navbar-wrapper .navbar-nav .active > .nav-link {
  background-color: var(--wh-brand-tint);
  color: var(--wh-heading);
}
header.header .toolbar .nav-link,
header.header .toolbar .btn { color: var(--wh-heading); }
header.header .cart-btn .badge { background-color: var(--wh-brand); color: var(--wh-on-brand); }
header.header .search .form-control { border-radius: 0 999px 999px 0; }
header.header .search .btn { border-radius: 999px 0 0 999px; }

.wh-logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none !important;
}
.wh-logo__name {
  font-family: var(--wh-font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--wh-heading);
}
.wh-logo__name b { font-weight: 700; color: var(--wh-brand); }
.wh-logo__by {
  font-family: var(--wh-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wh-muted);
  margin-top: 0.3rem;
}
.wh-logo img { max-height: 44px; width: auto; }

header.header .wh-sitelinks .nav-link,
.wh-sitelinks .nav-link {
  color: var(--wh-muted);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.4rem 0.7rem;
}
header.header .wh-sitelinks .nav-link:hover,
.wh-sitelinks .nav-link:hover { color: var(--wh-link); }

.master-breadcrumb { background-color: transparent; }
.master-breadcrumb .breadcrumb { background: transparent; color: var(--wh-muted); }
.breadcrumb-item.active { color: var(--wh-muted); }

/* ---------- Sidebar ---------- */
.sidebar .card-header { background-color: var(--wh-surface); }
.sidebar .card-title { color: var(--wh-heading); }
.sidebar .list-group-item { border-color: var(--wh-border); color: var(--wh-text); }
.sidebar .list-group-item:hover { background-color: var(--wh-surface-2); color: var(--wh-heading); }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus,
.cart-sidebar .list-group-item.active,
.cart-sidebar .list-group-item.active:hover,
.cart-sidebar .list-group-item.active:focus {
  background-color: var(--wh-brand-tint);
  border-color: var(--wh-border);
  color: var(--wh-heading);
  box-shadow: inset 3px 0 0 var(--wh-brand);
}
.sidebar .list-group-item .badge { background-color: var(--wh-surface-2); color: var(--wh-heading); }

/* ---------- Client area home ---------- */
.tiles .tile { background-color: var(--wh-surface); border-color: var(--wh-border); color: var(--wh-text); }
.tiles .tile:hover { background-color: var(--wh-surface-2); }
.tiles .tile .stat { color: var(--wh-heading); font-family: var(--wh-font-heading); }
.tiles .tile .title { color: var(--wh-muted); }
.tiles .tile .highlight { background-color: var(--wh-brand) !important; }
.client-home-cards .card .card-header .card-title { font-size: 1.05rem; }
.card-accent-teal, .card-accent-green, .card-accent-midnight-blue, .card-accent-pomegranate,
.card-accent-sun-flower, .card-accent-asbestos, .card-accent-blue, .card-accent-gold {
  border-top-color: var(--wh-brand) !important;
}

/* Intake panel, added by the wondahost_intake hook */
.wh-intake { border: 1px solid var(--wh-brand); border-radius: var(--wh-radius); background: var(--wh-brand-tint); padding: 1rem 1.25rem; margin-bottom: 1.5rem; color: var(--wh-text); }
.wh-intake h3 { font-size: 1.1rem; margin: 0 0 0.35rem; }
.wh-intake p { margin: 0 0 0.75rem; }
.wh-intake__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0; border-top: 1px solid var(--wh-border); }
.wh-intake .wh-intake__name { font-weight: 600; color: var(--wh-heading); }

/* ---------- Logged-out homepage ---------- */
.wh-hero {
  background: var(--wh-ink);
  color: var(--wh-on-ink);
  border-radius: var(--wh-radius);
  padding: 2.5rem 1.5rem;
  margin: 1.5rem 0 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid var(--wh-neon);
}
.wh-hero h1 { color: #F4F7FA; font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: 0.75rem; }
.wh-hero p { color: var(--wh-on-ink-muted); font-size: 1.1rem; max-width: 40rem; margin: 0 auto 1.5rem; }
.wh-hero .btn + .btn { margin-left: 0.5rem; }
.wh-hero .btn-default { background: transparent; color: var(--wh-on-ink); border-color: var(--wh-on-ink-muted); }
.wh-hero .btn-default:hover { background: rgba(244, 247, 250, 0.08); color: var(--wh-on-ink); border-color: var(--wh-on-ink); }
@media (max-width: 575.98px) {
  .wh-hero .btn { display: block; width: 100%; }
  .wh-hero .btn + .btn { margin: 0.6rem 0 0; }
}
.wh-section-title { text-align: center; margin: 2.5rem 0 1.25rem; font-size: 1.6rem; }
.wh-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.wh-groups .card { margin: 0; height: 100%; }
.wh-groups .card-body { display: flex; flex-direction: column; text-align: center; padding: 1.75rem 1.5rem; }
.wh-groups .card-body p { flex: 1; color: var(--wh-text); }
.action-icon-btns a {
  background-color: var(--wh-surface);
  border: 1px solid var(--wh-border);
  border-top: 3px solid var(--wh-brand) !important;
  border-radius: var(--wh-radius);
  color: var(--wh-heading);
  box-shadow: var(--wh-shadow);
}
.action-icon-btns a:hover { border-color: var(--wh-brand); color: var(--wh-heading); text-decoration: none; }
.action-icon-btns a .ico-container,
.action-icon-btns a i { color: var(--wh-link) !important; }

/* Domain search band (homepage) */
.home-domain-search { background: var(--wh-surface); border-bottom: 1px solid var(--wh-border); }
.home-domain-search h2, .home-domain-search .lead { color: var(--wh-heading); }

/* ---------- Alerts: keep status colours readable in dark mode ---------- */
@media (prefers-color-scheme: dark) {
  .alert-info, .alert-primary { background: #0E2E4F; border-color: #1A4A73; color: #CFE6FF; }
  .alert-success { background: #0B3A2C; border-color: #145C45; color: #BFF2DD; }
  .alert-warning { background: #3A2E0A; border-color: #6B5414; color: #FFE7A3; }
  .alert-danger { background: #3D1418; border-color: #6E2229; color: #FFC9CE; }
  .alert a, .alert .alert-link { color: inherit; text-decoration: underline; }
  .badge-light, .btn-light { color: var(--wh-heading); }
  .bg-white { background-color: var(--wh-surface) !important; }
  .bg-light { background-color: var(--wh-surface-2) !important; }
  .text-dark { color: var(--wh-heading) !important; }
  .close { color: var(--wh-heading); text-shadow: none; }
  img.logo-img { filter: none; }
}

/* ---------- Footer ---------- */
footer.footer.wh-footer {
  background-color: var(--wh-ink);
  color: var(--wh-on-ink-muted);
  border-top: 3px solid var(--wh-neon);
  padding: 2.5rem 0 1.5rem;
  margin-top: 3rem;
}
.wh-footer .wh-logo__name { color: var(--wh-on-ink); }
.wh-footer .wh-logo__by { color: var(--wh-on-ink-muted); }
.wh-footer p { color: var(--wh-on-ink-muted); }
.wh-footer h4 { color: var(--wh-on-ink); font-size: 0.95rem; margin-bottom: 0.75rem; }
.wh-footer ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.wh-footer li { margin-bottom: 0.4rem; }
.wh-footer a, .wh-footer .btn { color: var(--wh-on-ink); }
.wh-footer a:hover { color: var(--wh-neon); text-decoration: none; }
.wh-footer .btn { border: 1px solid var(--wh-on-ink-muted); background: transparent; }
.wh-footer .btn:hover { border-color: var(--wh-neon); color: var(--wh-neon); }
.wh-footer .copyright { border-top: 1px solid rgba(244, 247, 250, 0.12); padding-top: 1.25rem; margin-top: 0.5rem; font-size: 0.875rem; color: var(--wh-on-ink-muted); }
.wh-footer .wh-footer__social .list-inline-item a { color: var(--wh-on-ink); }

/* ---------- Login and register ---------- */
.login-form .card, .card.mw-540 { border-top: 3px solid var(--wh-brand); }

/* ---------- Status labels ---------- */
.label, .badge { border-radius: 999px; font-weight: 600; }
.status-active, .status-paid, .status-completed { background-color: var(--wh-brand) !important; color: var(--wh-on-brand) !important; }

/* Domain search inside the homepage */
.wh-domain-search .home-domain-search { border: 1px solid var(--wh-border); border-radius: var(--wh-radius); box-shadow: var(--wh-shadow); }
.wh-domain-search .home-domain-search > .container { max-width: none; padding: 0; }
.wh-domain-search .home-domain-search .p-5 { padding: 1.75rem 1.25rem !important; }
@media (min-width: 768px) { .wh-domain-search .home-domain-search .p-5 { padding: 2.5rem !important; } }

/* Domain search with WHMCS 9 AI search (textarea, filters) */
.home-domain-search .input-group-wrapper {
  background-color: var(--wh-surface);
  border: 1px solid var(--wh-border);
  border-radius: var(--wh-radius-sm);
}
.home-domain-search textarea {
  background-color: var(--wh-surface);
  color: var(--wh-heading);
  border: 0;
  outline: 0;
  padding: 0.75rem 1rem;
  font-family: var(--wh-font-body);
}
.home-domain-search textarea::placeholder { color: var(--wh-muted); opacity: 1; }
.home-domain-search .input-group-wrapper .btn { border-radius: 999px !important; }
.home-domain-search .input-group-wrapper .advanced-input .btn-success,
.home-domain-search .input-group-wrapper .btn-success {
  background-color: transparent;
  border: 1px solid var(--wh-brand);
  color: var(--wh-link);
}
.home-domain-search .input-group-wrapper .advanced-input .btn-success:hover,
.home-domain-search .input-group-wrapper .btn-success:hover {
  background-color: var(--wh-brand);
  color: var(--wh-on-brand);
}
.home-domain-search .input-group-wrapper .advanced-input label { color: var(--wh-text); }
.home-domain-search .multiselect,
.home-domain-search .multiselect-native-select .btn,
.home-domain-search .dropdown-toggle.multiselect {
  background-color: var(--wh-surface-2);
  border: 1px solid var(--wh-border);
  color: var(--wh-heading);
}
.home-domain-search .multiselect-container { background-color: var(--wh-surface); border-color: var(--wh-border); }
.home-domain-search .multiselect-container .dropdown-item,
.home-domain-search .multiselect-container label { color: var(--wh-text); }
.home-domain-search .tld-logos { color: var(--wh-muted); }

/* Clicked menu item: WHMCS marks it active and greys it out */
header.header .dropdown-item.active,
header.header .dropdown-item:active,
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--wh-brand-tint);
  color: var(--wh-heading);
}

/* Table search box: stock icon is a PNG with a white background */
.dataTables_wrapper .dataTables_filter label .form-control {
  background: var(--wh-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;
  padding-left: 36px;
  border-radius: 999px;
}

/* Cart domain search (Register a New Domain): stock banner is yellow */
.domain-checker-container,
#order-standard_cart .domain-checker-container {
  background: var(--wh-ink);
  border-bottom: 3px solid var(--wh-neon);
  border-radius: var(--wh-radius);
}
.domain-checker-container .input-group-box {
  background-color: var(--wh-surface);
  border: 1px solid var(--wh-border);
  border-radius: var(--wh-radius-sm);
}
.domain-checker-container textarea {
  background-color: var(--wh-surface);
  color: var(--wh-heading);
  border: 0;
  outline: 0;
  padding: 0.75rem 1rem;
  font-family: var(--wh-font-body);
}
.domain-checker-container textarea::placeholder { color: var(--wh-muted); opacity: 1; }
#order-standard_cart .domain-checker-advanced .multiselect { color: var(--wh-heading); }
#order-standard_cart .domain-checker-advanced label { color: var(--wh-text); }
#order-standard_cart .domain-checker-advanced .multiselect-container { background-color: var(--wh-surface); border-color: var(--wh-border); }
#order-standard_cart .domain-checker-advanced .multiselect-container label,
#order-standard_cart .domain-checker-advanced .multiselect-container a { color: var(--wh-text); }
.cart-sidebar .list-group-item { background-color: var(--wh-surface); border-color: var(--wh-border); color: var(--wh-text); }
.cart-sidebar .list-group-item:hover { background-color: var(--wh-surface-2); color: var(--wh-heading); }
.domain-checker-bg { background-image: none; }
/* Menu items are a link inside a list item, both called dropdown-item: style the outer one only */
li.dropdown-item > a.dropdown-item,
li.dropdown-item > a.dropdown-item:active,
li.dropdown-item > a.dropdown-item:hover,
li.dropdown-item > a.dropdown-item:focus {
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* =========================================================
   Order form (Standard Cart), restyled by the theme
   ========================================================= */
#order-standard_cart .header-lined h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
#order-standard_cart .header-lined p { color: var(--wh-text); }

#order-standard_cart .products .product {
  background: var(--wh-surface);
  border: 1px solid var(--wh-border);
  border-radius: var(--wh-radius);
  box-shadow: var(--wh-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#order-standard_cart .products .product:hover { border-color: var(--wh-brand); }
#order-standard_cart .products .product header {
  background: var(--wh-surface-2);
  margin: 0;
  border-radius: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--wh-border);
}
#order-standard_cart .products .product header span {
  font-family: var(--wh-font-heading);
  font-weight: 600;
  color: var(--wh-heading);
}
#order-standard_cart .products .product div.product-desc { color: var(--wh-text); flex: 1; }
#order-standard_cart .products .product span.feature-value { color: var(--wh-heading); font-weight: 600; }
#order-standard_cart .products .product div.product-pricing { color: var(--wh-muted); }
#order-standard_cart .products .product div.product-pricing span.price {
  font-family: var(--wh-font-heading);
  font-weight: 700;
  color: var(--wh-heading);
}
#order-standard_cart .products .product footer { color: var(--wh-muted); }

#order-standard_cart .order-summary {
  background-color: var(--wh-ink);
  border-bottom: 3px solid var(--wh-neon);
  border-radius: var(--wh-radius);
  overflow: hidden;
}
#order-standard_cart .order-summary h2 { color: #F4F7FA; font-family: var(--wh-font-heading); font-weight: 600; }
#order-standard_cart .summary-container { background-color: var(--wh-surface); color: var(--wh-text); }
#order-standard_cart .order-summary .total-due-today .amt,
#order-standard_cart .order-summary .total-due-today span { color: var(--wh-heading); }
#order-standard_cart .btn-checkout { width: 100%; }

#order-standard_cart .view-cart-items-header {
  background-color: var(--wh-ink);
  color: #F4F7FA;
  border-radius: var(--wh-radius) var(--wh-radius) 0 0;
}
#order-standard_cart .view-cart-items { border-color: var(--wh-border); }
#order-standard_cart .view-cart-items .item { background-color: var(--wh-surface); color: var(--wh-text); border-color: var(--wh-border); }
#order-standard_cart .view-cart-items .item-title { color: var(--wh-heading); }

#order-standard_cart .sub-heading { border-top-color: var(--wh-border); }
#order-standard_cart .sub-heading span { background: var(--wh-canvas); color: var(--wh-heading); font-family: var(--wh-font-heading); font-weight: 600; }

#order-standard_cart .field, #order-standard_cart .form-control {
  background-color: var(--wh-surface);
  border-color: var(--wh-border);
  color: var(--wh-heading);
}
#order-standard_cart .prepend-icon .field-icon { color: var(--wh-muted); }
#order-standard_cart .cart-sidebar .card-header { background-color: var(--wh-surface); }

/* Payment method choices and the account type tabs */
#order-standard_cart .paymethod-info, #order-standard_cart label.radio-inline { color: var(--wh-heading); }
#order-standard_cart .account { background-color: var(--wh-surface); border-color: var(--wh-border); }
#order-standard_cart .account.active { border-color: var(--wh-brand); background-color: var(--wh-brand-tint); }

/* Dashboard intake panel sits inside a card already */
.client-home-cards .wh-intake, .card .wh-intake.mb-0 { border: 0; background: transparent; padding: 0; }