/* Volition Hosting · WHMCS theme v2 (2026-10-04)
 * Built from the Claude Design concept "Volition billing site" (Turn 2), on the same tokens as the game panel.
 * Loaded after Twenty-One (all.min.css + theme.min.css) and standard_cart; replaces volition/css/custom.css
 * and orderforms/volition_cart/css/custom.css. Square, flat, warm charcoal + crimson.
 */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* ---------- 1. Tokens ---------- */
:root {
  --n-50:#F7F5F4; --n-100:#ECE9E7; --n-200:#D6D2CF; --n-300:#B5B0AC; --n-400:#8F8A86; --n-450:#7C7773; --n-500:#69645F;
  --n-600:#4F4B48; --n-700:#3A3734; --n-800:#282624; --n-900:#1C1A19; --n-950:#121110;
  --c-200:#FFC2C9; --c-300:#FF94A1; --c-400:#F45A6C; --c-450:#E0263F; --c-500:#C8102E; --c-600:#A80D27; --c-700:#8A0B21; --c-900:#4A0712; --c-950:#2A040A;

  --vh-bg:#121110; --vh-nav:#161514; --vh-surface:#1C1A19; --vh-surface-2:#211F1E; --vh-raised:#282624; --vh-hover:#232120;
  --vh-border:#3A3734; --vh-border-strong:#4F4B48; --vh-rule:#282624; --vh-hair:#2F2C2A;
  --vh-text:#F7F5F4; --vh-text-2:#B5B0AC; --vh-text-3:#8F8A86; --vh-text-4:#69645F;
  --vh-accent:#C8102E; --vh-accent-hover:#E0263F; --vh-accent-press:#A80D27; --vh-accent-text:#F45A6C; --vh-accent-tint:#4A0712;
  --vh-success:#3DD68C; --vh-success-text:#5FE3A1; --vh-warning:#F5B83D; --vh-warning-text:#F5C565;
  --vh-danger:#FF5A4F; --vh-danger-text:#FF8A80; --vh-info:#7AA7FF; --vh-info-text:#A9C6FF;
  --vh-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vh-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --vh-shadow: 0 16px 40px rgba(0,0,0,.6);
  --vh-dur:120ms; --vh-ease:cubic-bezier(.2,0,0,1);
  --vh-max: 1200px;
}

/* ---------- 2. Base ---------- */
html { color-scheme: dark; }
body, body.primary-bg-color { background: var(--vh-bg) !important; color: var(--vh-text) !important; font-family: var(--vh-font) !important; font-size: 14px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--vh-font) !important; color: var(--vh-text); letter-spacing: -.01em; }
h1, .h1 { font-weight: 800; } h2, .h2, h3, .h3 { font-weight: 700; } h4, h5, h6, .h4, .h5, .h6 { font-weight: 700; }
p, li, td, th, label, span, small { font-family: inherit; }
a { color: var(--vh-accent-text); transition: color var(--vh-dur) var(--vh-ease); }
a:hover { color: var(--c-300); text-decoration: none; }
::selection { background: rgb(200 16 46 / .45); color: #fff; }
:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--c-400) !important; outline-offset: 2px !important; box-shadow: none !important; }
.text-muted, .text-grey, small.text-muted { color: var(--vh-text-3) !important; }
.text-danger { color: var(--vh-danger-text) !important; } .text-success, .textgreen { color: var(--vh-success-text) !important; }
.text-warning { color: var(--vh-warning-text) !important; } .text-info { color: var(--vh-info-text) !important; }
.text-light { color: var(--vh-text) !important; }
code, pre, kbd, .font-mono { font-family: var(--vh-mono) !important; }
hr { border-top: 1px solid var(--vh-border) !important; }
* { scrollbar-width: thin; scrollbar-color: var(--vh-border-strong) var(--vh-nav); }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--vh-nav); }
::-webkit-scrollbar-thumb { background: var(--vh-border-strong); border: 3px solid var(--vh-nav); }
/* square corners everywhere (status dots and avatars excepted) */
.card, .btn, .form-control, .custom-select, .input-group-text, .alert, .badge, .label, .modal-content, .dropdown-menu, .list-group, .list-group-item,
.pagination .page-link, .nav-tabs .nav-link, .panel, .well, .tile, .progress, .popover, .tooltip-inner, .custom-file-label, .iti__flag-container, .rounded,
.input-group > .form-control, .input-group-prepend > *, .input-group-append > * { border-radius: 0 !important; }
.container { max-width: calc(var(--vh-max) + 30px) !important; }

/* ---------- 3. Header ---------- */
#header.header { background: var(--vh-nav) !important; border-bottom: 2px solid var(--vh-rule) !important; box-shadow: none !important; }
#header .topbar { background: var(--vh-bg) !important; border-bottom: 1px solid var(--vh-rule); font-size: 12.5px; color: var(--vh-text-3); }
#header .topbar .btn, #header .topbar .input-group-text, #header .topbar .form-control { background: transparent !important; border: 0 !important; color: var(--vh-text-3) !important; font-size: 12.5px !important; box-shadow: none !important; }
#header .topbar .btn:hover { color: var(--vh-text) !important; }
#header .topbar .active-client .btn.btn-active-client { border: 1px solid var(--vh-border) !important; color: var(--vh-text-2) !important; }
#header .navbar.navbar-light { background: var(--vh-nav) !important; min-height: 84px; padding: 0 !important; border: 0 !important; }
#header .navbar.navbar-light > .container { min-height: 84px; gap: 14px; }
#header .navbar-brand { padding: 0 !important; margin: 0 !important; display: flex; align-items: center; }
#header .navbar-brand img.logo-img { max-height: 66px !important; height: 66px; width: auto; }
#header .navbar-brand > span { display: none !important; }
/* knowledgebase search: 340px, "/" hint */
#header form.form-inline .input-group.search { width: 340px; height: 42px; background: var(--vh-bg); border: 1px solid var(--vh-border); position: relative; flex-wrap: nowrap; transition: border-color var(--vh-dur) var(--vh-ease); }
#header form.form-inline .input-group.search:hover { border-color: var(--n-500); }
#header form.form-inline .input-group.search:focus-within { border-color: var(--vh-accent); box-shadow: 0 0 0 3px rgb(200 16 46 / .25); }
#header .input-group.search .input-group-prepend .btn, #header .input-group.search .input-group-text { background: transparent !important; border: 0 !important; color: var(--vh-text-3) !important; padding: 0 4px 0 12px !important; height: 40px; box-shadow: none !important; }
#header .input-group.search .form-control { background: transparent !important; border: 0 !important; height: 40px !important; color: var(--vh-text) !important; font-size: 14px !important; font-weight: 400 !important; box-shadow: none !important; padding-right: 36px !important; }
#header .input-group.search .form-control::placeholder { color: var(--vh-text-3) !important; }
#header .input-group.search::after { content: "/"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--vh-mono); font-size: 11px; line-height: 1.4; color: var(--vh-text-2); border: 1px solid var(--vh-border); padding: 0 6px; pointer-events: none; }
#header .input-group.search:focus-within::after { opacity: 0; }
/* cart + mobile toggler: 44px square outline buttons */
#header .navbar-nav.toolbar { gap: 0; }
#header .navbar-nav.toolbar .nav-item { margin-left: 10px !important; }
#header .navbar-nav.toolbar .nav-link.btn, #header .navbar-nav.toolbar .cart-btn { position: relative; width: 44px; height: 44px; padding: 0 !important; display: flex; align-items: center; justify-content: center; background: transparent !important; border: 1px solid var(--vh-border) !important; color: var(--n-200) !important; font-size: 17px; }
#header .navbar-nav.toolbar .nav-link.btn:hover { background: var(--vh-raised) !important; border-color: var(--n-500) !important; color: var(--vh-text) !important; }
#header .cart-btn .badge, #header .cart-btn #cartItemCount { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; display: flex; align-items: center; justify-content: center; background: var(--vh-accent) !important; color: #fff !important; font-family: var(--vh-mono); font-size: 11px; font-weight: 600; box-shadow: 0 0 0 2px var(--vh-nav); border-radius: 0 !important; }
#header .cart-btn .badge.badge-0, #header .cart-btn[data-count="0"] .badge { display: none; }
/* main nav: 48px row, underline active */
#header .main-navbar-wrapper { background: var(--vh-nav) !important; border-top: 1px solid var(--vh-rule) !important; padding: 0 !important; min-height: 48px; }
#header .main-navbar-wrapper > .container { min-height: 48px; align-items: stretch; }
#header .main-navbar-wrapper .navbar-collapse { align-items: stretch; }
#header .main-navbar-wrapper .navbar-nav > li > a, #header .main-navbar-wrapper .navbar-nav > li > .nav-link { height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 14px !important; font-size: 14px; font-weight: 500; color: var(--vh-text-2) !important; background: transparent !important; border: 0 !important; transition: color var(--vh-dur) var(--vh-ease), box-shadow var(--vh-dur) var(--vh-ease); }
#header .main-navbar-wrapper .navbar-nav > li > a:hover { color: var(--vh-text) !important; box-shadow: inset 0 -2px 0 var(--vh-border-strong); }
#header .main-navbar-wrapper .navbar-nav > li.active > a, #header .main-navbar-wrapper .navbar-nav > li > a.active, #header .main-navbar-wrapper .navbar-nav > li.show > a { color: var(--vh-text) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--vh-accent); }
#header .main-navbar-wrapper .dropdown-toggle::after { border: 0 !important; width: 14px; height: 14px; margin-left: 2px; background: currentColor; opacity: .55; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat; vertical-align: middle; }
/* account menu (right of nav) → outline button */
#header .main-navbar-wrapper .navbar-nav.ml-auto > li > a { margin: 6px 0; height: 36px; border: 1px solid var(--vh-border) !important; color: var(--vh-text) !important; font-weight: 600; padding: 0 12px !important; }
#header .main-navbar-wrapper .navbar-nav.ml-auto > li > a:hover { background: var(--vh-raised) !important; border-color: var(--n-500) !important; box-shadow: none; }
/* dropdowns */
.dropdown-menu { background: var(--vh-raised) !important; border: 1px solid var(--vh-border-strong) !important; box-shadow: var(--vh-shadow) !important; padding: 4px 0 !important; margin-top: 0 !important; min-width: 240px; }
.dropdown-menu .dropdown-item, .dropdown-menu > li > a { height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 14px !important; font-size: 13.5px; color: var(--n-200) !important; background: transparent !important; }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu > li > a:hover, .dropdown-menu .dropdown-item.active { background: var(--vh-border) !important; color: var(--vh-text) !important; }
.dropdown-divider, .dropdown-menu .divider { border-top: 1px solid var(--vh-border) !important; margin: 4px 0 !important; height: 0; background: none; }

/* ---------- 4. Breadcrumb + page header ---------- */
.master-breadcrumb { background: var(--vh-nav) !important; border-bottom: 2px solid var(--vh-rule) !important; padding: 0 !important; }
.master-breadcrumb .breadcrumb { background: transparent !important; margin: 0 !important; padding: 14px 0 !important; font-size: 13px; }
.master-breadcrumb .breadcrumb-item, .master-breadcrumb .breadcrumb-item a { color: var(--vh-text-3) !important; }
.master-breadcrumb .breadcrumb-item a:hover { color: var(--vh-text) !important; }
.master-breadcrumb .breadcrumb-item.active { color: var(--vh-text) !important; font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { content: "›" !important; color: var(--n-500) !important; padding: 0 10px !important; }
#main-body { background: var(--vh-bg) !important; padding: 28px 0 56px !important; }
.header-lined { border: 0 !important; margin-bottom: 20px; }
.header-lined h1, .primary-content > div > h2.h3:first-child, h1.font-size-36, .font-size-36 { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.02em; color: var(--vh-text) !important; margin-bottom: 4px; }
.header-lined small, .header-lined p { color: var(--vh-text-2) !important; font-size: 14px; }
.sub-heading { border-bottom: 1px solid var(--vh-border) !important; margin: 24px 0 16px !important; }
.sub-heading span, .sub-heading .primary-bg-color { background: var(--vh-bg) !important; color: var(--vh-text) !important; font-weight: 700; font-size: 15px; padding-right: 12px !important; }

/* ---------- 5. Sidebar panels ---------- */
.sidebar .card-sidebar, .card.card-sidebar, .panel-sidebar { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; box-shadow: none !important; margin-bottom: 16px !important; overflow: hidden; }
.card-sidebar .card-header, .panel-sidebar .panel-heading { background: transparent !important; border: 0 !important; height: 46px; padding: 0 12px 0 16px !important; display: flex; align-items: center; cursor: pointer; }
.card-sidebar .card-header:hover { background: var(--vh-surface-2) !important; }
.card-sidebar .card-title, .panel-sidebar .panel-title { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 14px !important; font-weight: 700 !important; color: var(--vh-text) !important; margin: 0 !important; }
.card-sidebar .card-title > i:first-child, .card-sidebar .card-title .fas:not(.card-minimise), .card-sidebar .card-title .far, .card-sidebar .card-title .fab, .card-sidebar .card-title .fa-brands { color: var(--c-400) !important; width: 16px; text-align: center; font-size: 14px; }
.card-sidebar .card-minimise, .panel-sidebar .panel-minimise { color: var(--vh-text-3) !important; font-size: 12px; margin-left: auto; float: none !important; }
.card-sidebar .collapsable-card-body, .panel-sidebar .panel-body { border-top: 2px solid var(--vh-rule); }
.card-sidebar .card-body { padding: 14px 16px !important; font-size: 13.5px; line-height: 1.55; color: var(--vh-text-2) !important; background: transparent !important; }
.card-sidebar .card-body strong, .card-sidebar .card-body .h4 { color: var(--vh-text) !important; font-size: 14px !important; font-weight: 700; }
.card-sidebar .list-group { background: transparent !important; border: 0 !important; margin: 0 !important; }
.card-sidebar .list-group-item, .panel-sidebar .list-group-item { position: relative; display: flex !important; align-items: center; gap: 10px; min-height: 40px; padding: 9px 14px 9px 16px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--vh-rule) !important; color: var(--vh-text-2) !important; font-size: 13.5px; font-weight: 500; transition: background var(--vh-dur) var(--vh-ease), color var(--vh-dur) var(--vh-ease); }
.card-sidebar .list-group-item:last-child { border-bottom: 0 !important; }
.card-sidebar .list-group-item-action:hover, .card-sidebar .list-group-item-action:focus { background: var(--vh-hover) !important; color: var(--vh-text) !important; }
.card-sidebar .list-group-item.active, .panel-sidebar .list-group-item.active { background: var(--vh-raised) !important; color: var(--vh-text) !important; font-weight: 600; box-shadow: inset 3px 0 0 var(--vh-accent); }
.card-sidebar .list-group-item.active .sidebar-menu-item-icon, .card-sidebar .list-group-item.active i { color: var(--c-400) !important; }
.card-sidebar .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.card-sidebar .sidebar-menu-item-icon-wrapper { width: 16px; display: flex; justify-content: center; }
.card-sidebar .sidebar-menu-item-icon, .card-sidebar .list-group-item > i { color: inherit; font-size: 13px; width: 16px; text-align: center; opacity: .9; }
.card-sidebar .sidebar-menu-item-label { flex: 1; }
.card-sidebar .badge, .card-sidebar .sidebar-menu-item-badge { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px !important; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-raised) !important; color: var(--n-200) !important; font-family: var(--vh-mono); font-size: 11px; font-weight: 600; }
.card-sidebar .list-group-item.active .badge { background: var(--vh-accent-tint) !important; color: var(--c-200) !important; }
.card-sidebar .card-footer, .panel-sidebar .panel-footer { background: transparent !important; border-top: 1px solid var(--vh-rule) !important; padding: 12px 16px !important; }
.card-sidebar .card-footer .btn, .card-sidebar .card-body .btn { height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: transparent !important; border: 1px solid var(--vh-border-strong) !important; color: var(--vh-text) !important; font-size: 13.5px !important; font-weight: 600; padding: 0 12px !important; box-shadow: none !important; }
.card-sidebar .card-footer .btn:hover, .card-sidebar .card-body .btn:hover { background: rgba(247,245,244,.06) !important; border-color: var(--vh-text-3) !important; }
.card-sidebar .form-control, .card-sidebar .custom-select { margin: 0; }

/* ---------- 6. Cards / panels ---------- */
.card, .panel, .panel-default, .well, .bg-light, .bg-white, .card-light { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; color: var(--vh-text); box-shadow: none !important; }
.primary-content .card { margin-bottom: 20px; }
.card-header, .panel-heading { background: transparent !important; border-bottom: 2px solid var(--vh-rule) !important; padding: 16px 20px !important; color: var(--vh-text) !important; }
.card-header .card-title, .card-title, .panel-title, .card-header h3, .card-header h4 { font-size: 16px !important; font-weight: 700 !important; color: var(--vh-text) !important; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card-title > .float-right, .card-title > .pull-right, .card-header h3 > .float-right { order: 2; margin-left: auto; float: none !important; }
.card-title > i, .card-header .card-title > .fas, .card-header .card-title > .far { color: var(--c-400) !important; font-size: 15px; }
.card-body, .panel-body { color: var(--vh-text-2); padding: 20px !important; background: transparent !important; }
.card-footer, .panel-footer { background: transparent !important; border-top: 1px solid var(--vh-rule) !important; color: var(--vh-text-3); padding: 12px 20px !important; }
.card-accent-gold, .card-accent-blue, .card-accent-asbestos, .card-accent-green, .card-accent-red, [class*="card-accent-"] { border-top: 1px solid var(--vh-border) !important; }
.client-home-cards .card .card-header .btn, .card-header .btn-default.bg-color-gold, .card-header .btn-default.bg-color-blue, .card-header .btn-view-more { margin-left: auto; height: 30px; padding: 0 10px !important; display: inline-flex; align-items: center; gap: 6px; background: transparent !important; border: 0 !important; color: var(--vh-text) !important; font-size: 13px !important; font-weight: 600; }
.client-home-cards .card .card-header .btn:hover { color: var(--c-300) !important; }
.client-home-cards .list-group-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--vh-rule) !important; color: var(--vh-text-2) !important; padding: 14px 20px !important; }
.client-home-cards .list-group-item:hover { background: var(--vh-hover) !important; }
.client-home-cards .card-footer .btn-view-more, .btn-view-more { color: var(--vh-text-3) !important; font-size: 12.5px !important; }
/* dashboard tiles: 4 stat tiles in one bordered row */
.tiles { background: var(--vh-surface); border: 1px solid var(--vh-border); margin-bottom: 20px !important; }
.tiles .row { margin: 0 !important; }
.tiles .tile { display: block; position: relative; background: transparent !important; border: 0 !important; border-right: 1px solid var(--vh-border) !important; padding: 18px 18px 20px !important; min-height: 112px; text-align: left !important; color: var(--vh-text) !important; transition: background var(--vh-dur) var(--vh-ease); }
.tiles .col-6:last-child .tile, .tiles [class*="col-"]:last-child .tile { border-right: 0 !important; }
.tiles .tile:hover { background: var(--vh-surface-2) !important; }
.tiles .tile > i, .tiles .tile > svg, .tiles .tile > img { position: absolute !important; top: 19px !important; left: 18px !important; right: auto !important; bottom: auto !important; width: 14px !important; height: 14px !important; font-size: 13px !important; line-height: 14px; color: var(--vh-text-3) !important; opacity: 1 !important; margin: 0 !important; transform: none !important; }
.tiles .tile .stat { font-family: var(--vh-mono); font-size: 32px !important; font-weight: 600 !important; color: var(--vh-text) !important; line-height: 1.1; margin-top: 26px !important; }
.tiles .tile .title { position: absolute; top: 18px; left: 40px; font-size: 11px !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vh-text-3) !important; }
.tiles .tile .highlight { display: none !important; }
/* dashboard shortcut cards */
.primary-content .col-md-6.col-lg-3 > a, .primary-content .col-md-6.col-lg-3 > .card, .action-icon-btns a { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; color: var(--vh-text) !important; }
.action-icon-btns a:hover, .primary-content .col-md-6.col-lg-3 > a:hover { background: var(--vh-surface-2) !important; border-color: var(--vh-border-strong) !important; }
.ico-container { background: var(--vh-accent-tint) !important; color: var(--c-400) !important; border-radius: 0 !important; }

/* ---------- 7. Buttons ---------- */
.btn { font-family: var(--vh-font) !important; font-weight: 600 !important; font-size: 14px; border-width: 1px !important; box-shadow: none !important; text-shadow: none !important; transition: background-color var(--vh-dur) var(--vh-ease), border-color var(--vh-dur) var(--vh-ease), color var(--vh-dur) var(--vh-ease) !important; }
.btn-primary, .btn-success, .btn-order-now, .btn-checkout, .btn-cta, .btn-hero-primary, #btnCompleteProductConfig, #btnCompleteOrder, .btn-add {
  background: var(--vh-accent) !important; border-color: var(--vh-accent) !important; color: #fff !important; }
.btn-primary:hover, .btn-success:hover, .btn-order-now:hover, .btn-checkout:hover, .btn-cta:hover, .btn-hero-primary:hover, #btnCompleteProductConfig:hover, #btnCompleteOrder:hover, .btn-add:hover {
  background: var(--vh-accent-hover) !important; border-color: var(--vh-accent-hover) !important; color: #fff !important; }
.btn-primary:active, .btn-success:active, .btn-checkout:active { background: var(--vh-accent-press) !important; }
.btn-default, .btn-secondary, .btn-light, .btn-outline-secondary, .btn-hero-secondary, .btn-continue-shopping, .btn-info, .btn-outline-primary {
  background: transparent !important; border-color: var(--vh-border-strong) !important; color: var(--vh-text) !important; }
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-hero-secondary:hover, .btn-continue-shopping:hover, .btn-info:hover, .btn-outline-primary:hover {
  background: rgba(247,245,244,.06) !important; border-color: var(--vh-text-3) !important; color: var(--vh-text) !important; }
.btn-danger { background: transparent !important; border-color: rgb(255 90 79 / .5) !important; color: var(--vh-danger-text) !important; }
.btn-danger:hover { background: rgb(255 90 79 / .12) !important; border-color: var(--vh-danger) !important; }
.btn-warning { background: transparent !important; border-color: rgb(245 184 61 / .5) !important; color: var(--vh-warning-text) !important; }
.btn-link { color: var(--vh-accent-text) !important; background: transparent !important; border: 0 !important; }
.btn-lg { height: 46px; padding: 0 20px !important; font-size: 15px !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-sm, .btn-xs { font-size: 12.5px !important; padding: 4px 10px !important; }
.btn:disabled, .btn.disabled { opacity: .45 !important; }
.btn-group > .btn + .btn { margin-left: -1px; }

/* ---------- 8. Forms ---------- */
.form-control, .custom-select, select.form-control, textarea.form-control, .input-group-text, .custom-file-label, .md-input {
  background-color: var(--vh-bg) !important; border: 1px solid var(--vh-border) !important; color: var(--vh-text) !important; font-family: var(--vh-font) !important; font-size: 14px !important; box-shadow: none !important; transition: border-color var(--vh-dur) var(--vh-ease), box-shadow var(--vh-dur) var(--vh-ease) !important; }
.form-control, .custom-select, select.form-control { min-height: 40px; height: auto; padding: 9px 12px !important; line-height: 20px !important; }
.custom-select, select.form-control { padding-right: 34px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238F8A86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; -webkit-appearance: none; appearance: none; }
.form-control-sm, .custom-select-sm { min-height: 32px; padding: 5px 10px !important; font-size: 13px !important; }
.form-control:hover, .custom-select:hover { border-color: var(--n-500) !important; }
.form-control:focus, .custom-select:focus, .md-input:focus { border-color: var(--vh-accent) !important; box-shadow: 0 0 0 3px rgb(200 16 46 / .28) !important; outline: none !important; }
.form-control::placeholder { color: var(--vh-text-4) !important; }
.form-control:disabled, .form-control[readonly], .custom-select:disabled { background: var(--vh-surface) !important; border-style: dashed !important; color: var(--vh-text-3) !important; opacity: 1; }
.input-group-text, .input-group-prepend .btn, .input-group-append .btn:not(.btn-primary):not(.btn-success) { background: var(--vh-surface) !important; color: var(--vh-text-3) !important; border-color: var(--vh-border) !important; }
.prepend-icon .field-icon { color: var(--vh-text-3) !important; }
label, .control-label, .form-group > label, .col-form-label { color: var(--n-200) !important; font-size: 13px !important; font-weight: 600 !important; margin-bottom: 6px; text-transform: none !important; letter-spacing: 0 !important; }
.form-text, .help-block, .field-help-text { color: var(--vh-text-3) !important; font-size: 12.5px; }
.is-invalid, .has-error .form-control { border-color: var(--vh-danger) !important; }
.invalid-feedback, .field-error-msg { color: var(--vh-danger-text) !important; }
/* checkboxes and radios (native, iCheck and custom-control) */
input[type="checkbox"]:not(.custom-control-input):not(.custom-file-input), input[type="radio"]:not(.custom-control-input) { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0 8px 0 0; vertical-align: -3px; background: var(--vh-bg); border: 1.5px solid var(--vh-border-strong); cursor: pointer; flex: none; position: relative; }
input[type="radio"]:not(.custom-control-input) { border-radius: 50% !important; }
input[type="checkbox"]:checked { background: var(--vh-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7.5'/%3E%3C/svg%3E") center/12px no-repeat !important; border-color: var(--vh-accent) !important; }
input[type="radio"]:checked { border-color: var(--vh-accent) !important; box-shadow: inset 0 0 0 3.5px var(--vh-bg), inset 0 0 0 8px var(--vh-accent); }
.icheckbox_square-blue, .iradio_square-blue { background: var(--vh-bg) !important; border: 1.5px solid var(--vh-border-strong) !important; width: 16px !important; height: 16px !important; }
.iradio_square-blue { border-radius: 50% !important; }
.icheckbox_square-blue.checked { background: var(--vh-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7.5'/%3E%3C/svg%3E") center/12px no-repeat !important; border-color: var(--vh-accent) !important; }
.iradio_square-blue.checked { border-color: var(--vh-accent) !important; box-shadow: inset 0 0 0 3.5px var(--vh-bg), inset 0 0 0 8px var(--vh-accent); }
.custom-control-label::before { background: var(--vh-bg) !important; border: 1.5px solid var(--vh-border-strong) !important; border-radius: 0 !important; box-shadow: none !important; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--vh-accent) !important; border-color: var(--vh-accent) !important; }
/* bootstrap-switch → square toggle (38×22) */
.bootstrap-switch { border: 1px solid var(--vh-border-strong) !important; background: var(--vh-raised) !important; border-radius: 0 !important; box-shadow: none !important; }
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label { border-radius: 0 !important; font-family: var(--vh-font); font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--vh-accent) !important; color: #fff !important; }
.bootstrap-switch .bootstrap-switch-handle-off { background: var(--vh-raised) !important; color: var(--vh-text-3) !important; }
.bootstrap-switch .bootstrap-switch-label { background: var(--n-200) !important; }
/* phone input */
.intl-tel-input .country-list { background: var(--vh-raised) !important; border: 1px solid var(--vh-border-strong) !important; color: var(--vh-text-2); }
.intl-tel-input .country-list .country.highlight { background: var(--vh-border) !important; }
.intl-tel-input .selected-flag { background: transparent !important; }
.intl-tel-input .selected-dial-code { color: var(--vh-text-2) !important; }
/* password strength */
.progress { background: var(--vh-raised) !important; height: 4px !important; }
.progress-bar { background: var(--vh-success) !important; }
.progress-bar.bg-danger, .progress-bar-danger { background: var(--vh-danger) !important; } .progress-bar.bg-warning, .progress-bar-warning { background: var(--vh-warning) !important; }

/* ---------- 9. Tables ---------- */
.table, .table-list, .listtable table, table.dataTable { color: var(--vh-text-2) !important; background: transparent !important; border-collapse: collapse !important; }
.table thead th, table.dataTable thead th, .table-list thead th { background: var(--vh-surface) !important; color: var(--vh-text-3) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .09em; text-transform: uppercase; border: 0 !important; border-bottom: 1px solid var(--vh-border) !important; padding: 12px 16px !important; }
.table td, .table th, table.dataTable td { border-top: 0 !important; border-bottom: 1px solid var(--vh-rule) !important; padding: 13px 16px !important; vertical-align: middle !important; }
.table-striped tbody tr:nth-of-type(odd), table.dataTable tbody tr, table.dataTable.stripe tbody tr.odd, .table-list > tbody > tr, .table-list > tbody > tr > td { background: transparent !important; }
.table-list > tbody > tr:hover, .table-list > tbody > tr:hover > td, .table-hover tbody tr:hover, table.dataTable tbody tr:hover { background: var(--vh-hover) !important; color: var(--vh-text) !important; cursor: pointer; }
.table-list > tbody > tr > td strong, .table td strong { color: var(--vh-text); }
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_desc::before { color: var(--vh-text-3); opacity: .5 !important; }
table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { color: var(--vh-text) !important; }
.table-container, .dataTables_wrapper { background: var(--vh-surface); border: 1px solid var(--vh-border); padding: 0 !important; }
.dataTables_wrapper .listtable { padding: 0; }
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { padding: 12px 16px; color: var(--vh-text-3); font-size: 13px; }
.dataTables_wrapper .dataTables_filter input { margin-left: 8px; }
.dataTables_wrapper .dataTables_info { padding: 14px 16px !important; color: var(--vh-text-3) !important; font-size: 12.5px; }
.dataTables_wrapper .dataTables_paginate { padding: 10px 16px !important; }
.table-list .sorting_1, table.dataTable .sorting_1, table.dataTable .sorting_2 { background: transparent !important; }
/* pagination */
.pagination { gap: 4px; }
.pagination .page-link, .pagination .page-item .page-link { min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: transparent !important; border: 1px solid var(--vh-border) !important; color: var(--vh-text-2) !important; font-family: var(--vh-mono); font-size: 12.5px; margin: 0 !important; }
.pagination .page-link:hover { background: var(--vh-raised) !important; color: var(--vh-text) !important; }
.pagination .page-item.active .page-link { background: var(--vh-raised) !important; border-color: var(--vh-accent) !important; color: var(--vh-text) !important; box-shadow: inset 0 -2px 0 var(--vh-accent); }
.pagination .page-item.disabled .page-link { opacity: .4; }

/* ---------- 10. Status badges (services, invoices, tickets, domains) ---------- */
.label, .badge, .status, .label.status, span.status { display: inline-flex !important; align-items: center; gap: 6px; padding: 2px 7px !important; font-family: var(--vh-font) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; line-height: 16px !important; border: 0 !important; background: rgba(247,245,244,.08) !important; color: var(--n-200) !important; text-shadow: none !important; }
.label.status::before, .status::before, .vh-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vh-text-3); flex: none; }
.status-active, .status-paid, .status-answered, .status-accepted, .status-delivered, .status-completed, .label-success, .badge-success { background: rgba(61,214,140,.12) !important; color: var(--vh-success-text) !important; }
.status-active::before, .status-paid::before, .status-answered::before, .status-accepted::before, .status-delivered::before, .status-completed::before { background: var(--vh-success) !important; }
.status-pending, .status-unpaid, .status-customer-reply, .status-draft, .status-in-progress, .status-on-hold, .status-pending-transfer, .label-warning, .badge-warning { background: rgba(245,184,61,.12) !important; color: var(--vh-warning-text) !important; }
.status-pending::before, .status-unpaid::before, .status-customer-reply::before, .status-draft::before, .status-in-progress::before, .status-on-hold::before { background: var(--vh-warning) !important; }
.status-suspended, .status-overdue, .status-fraud, .status-collections, .label-danger, .badge-danger { background: rgba(255,90,79,.12) !important; color: var(--vh-danger-text) !important; }
.status-suspended::before, .status-overdue::before, .status-fraud::before, .status-collections::before { background: var(--vh-danger) !important; }
.status-refunded, .status-open, .status-payment-pending, .label-info, .badge-info { background: rgba(122,167,255,.12) !important; color: var(--vh-info-text) !important; }
.status-refunded::before, .status-open::before, .status-payment-pending::before { background: var(--vh-info) !important; }
.status-cancelled, .status-closed, .status-expired, .label-default, .badge-secondary { background: rgba(247,245,244,.08) !important; color: var(--n-200) !important; }
.status-terminated, .status-dead { background: transparent !important; border: 1px solid var(--vh-border-strong) !important; color: var(--vh-text-3) !important; padding: 1px 6px !important; }
.status-terminated::before { background: transparent !important; border: 1.5px solid var(--n-500); box-sizing: border-box; }
.badge-primary, .label-primary { background: var(--vh-accent-tint) !important; color: var(--c-200) !important; }

/* ---------- 11. Alerts ---------- */
.alert { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; border-left-width: 3px !important; color: var(--vh-text-2) !important; padding: 14px 16px !important; font-size: 13.5px; }
.alert-info { border-color: rgb(122 167 255 / .35) !important; border-left-color: var(--vh-info) !important; background: rgb(122 167 255 / .06) !important; }
.alert-warning { border-color: rgb(245 184 61 / .35) !important; border-left-color: var(--vh-warning) !important; background: rgb(245 184 61 / .06) !important; }
.alert-danger { border-color: rgb(255 90 79 / .35) !important; border-left-color: var(--vh-danger) !important; background: rgb(255 90 79 / .06) !important; }
.alert-success { border-color: rgb(61 214 140 / .35) !important; border-left-color: var(--vh-success) !important; background: rgb(61 214 140 / .06) !important; }
.alert strong, .alert b { color: var(--vh-text); }
.alert a, .alert .alert-link { color: var(--c-300) !important; font-weight: 600; }
.alert .close { color: var(--vh-text-3) !important; text-shadow: none; opacity: 1; }

/* ---------- 12. Tabs, list groups, modals, misc ---------- */
.nav-tabs { border-bottom: 1px solid var(--vh-border) !important; gap: 4px; }
.nav-tabs .nav-link { background: transparent !important; border: 0 !important; color: var(--vh-text-3) !important; font-weight: 500; padding: 12px 14px !important; }
.nav-tabs .nav-link:hover { color: var(--vh-text) !important; box-shadow: inset 0 -2px 0 var(--vh-border-strong); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--vh-text) !important; font-weight: 600; box-shadow: inset 0 -2px 0 var(--vh-accent); }
.tab-content { background: transparent; }
.list-group-item { background: var(--vh-surface) !important; border-color: var(--vh-border) !important; color: var(--vh-text-2) !important; }
.list-group-item.active { background: var(--vh-raised) !important; color: var(--vh-text) !important; border-color: var(--vh-border) !important; box-shadow: inset 3px 0 0 var(--vh-accent); }
.list-group-item-action:hover { background: var(--vh-hover) !important; color: var(--vh-text) !important; }
.modal-backdrop.show { opacity: .7 !important; background: #000; }
.modal-content { background: var(--vh-raised) !important; border: 1px solid var(--vh-border-strong) !important; box-shadow: var(--vh-shadow) !important; color: var(--vh-text-2); }
.modal-header, .modal-footer { border-color: var(--vh-border) !important; }
.modal-title { color: var(--vh-text) !important; font-weight: 700; }
.close { color: var(--vh-text-3) !important; text-shadow: none !important; opacity: 1 !important; }
.popover, .tooltip-inner { background: var(--vh-raised) !important; color: var(--vh-text) !important; border: 1px solid var(--vh-border-strong) !important; }
.loader, .fa-spinner { color: var(--c-400); }
.md-editor { border: 1px solid var(--vh-border) !important; background: var(--vh-bg) !important; }
.md-editor .md-header, .md-editor .md-footer { background: var(--vh-surface) !important; border-color: var(--vh-border) !important; }
.md-editor .btn-default, .md-editor .btn { background: transparent !important; border: 0 !important; color: var(--vh-text-3) !important; }
.md-editor .md-input { border: 0 !important; }
.custom-file-label::after { background: var(--vh-raised) !important; color: var(--vh-text) !important; border: 0 !important; border-left: 1px solid var(--vh-border) !important; border-radius: 0 !important; content: "Browse" !important; }
.recaptcha-container, .g-recaptcha, .h-captcha { display: inline-block; padding: 10px; background: var(--vh-surface); border: 1px solid var(--vh-border); border-left: 3px solid var(--vh-accent); }

/* ---------- 13. Footer ---------- */
#footer.vh-footer, #footer.footer, footer#footer { background: var(--vh-nav) !important; border-top: 2px solid var(--vh-rule) !important; color: var(--vh-text-3) !important; padding: 48px 0 0 !important; margin: 0 !important; }
#footer h5, #footer h4, #footer h6, #footer .vh-footer-heading, #footer [class*="heading"] { color: var(--vh-text-3) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase; margin-bottom: 14px !important; }
#footer ul { list-style: none; padding: 0; margin: 0; }
#footer li { margin-bottom: 10px; }
#footer a { color: var(--vh-text-2) !important; font-size: 13.5px; font-weight: 500 !important; }
#footer a:hover { color: var(--vh-text) !important; }
#footer p { color: var(--vh-text-3) !important; font-size: 13px; line-height: 1.6; font-weight: 400 !important; }
#footer img { max-height: 56px !important; width: auto; }
#footer .vh-footer-bottom { border-top: 1px solid var(--vh-rule) !important; margin-top: 24px; padding: 18px 0 22px !important; display: flex; justify-content: space-between; align-items: center; }
#footer .vh-footer-bottom p { margin: 0; font-size: 12.5px; }
#footer .vh-footer-bottom p a { font-size: 12.5px; }
#footer .vh-footer-social a { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--vh-border); color: var(--vh-text-3) !important; }

/* ---------- 14. Responsive ---------- */
@media (max-width: 1199.98px) {
  #header .navbar.navbar-light, #header .navbar.navbar-light > .container { min-height: 64px; }
  #header .navbar-brand img.logo-img { height: 48px; max-height: 48px !important; }
  #header .main-navbar-wrapper { border-top: 0 !important; min-height: 0; }
  #header .main-navbar-wrapper .navbar-collapse { background: var(--vh-nav); border-top: 1px solid var(--vh-rule); padding: 8px 0 12px; }
  #header .main-navbar-wrapper .navbar-nav > li > a { height: 44px; padding: 0 4px !important; }
  #header .main-navbar-wrapper .navbar-nav > li.active > a { box-shadow: inset 3px 0 0 var(--vh-accent); padding-left: 12px !important; }
  #header .main-navbar-wrapper form .input-group.search { background: var(--vh-bg); border: 1px solid var(--vh-border); }
}
@media (max-width: 767.98px) {
  #main-body { padding: 18px 0 40px !important; }
  .header-lined h1, .font-size-36 { font-size: 24px !important; }
  .tiles .tile { border-bottom: 1px solid var(--vh-border) !important; }
  .tiles .col-6:nth-child(2n) .tile { border-right: 0 !important; }
  #footer .vh-footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- 15. v2 building blocks (used by v2 templates) ---------- */
.vh2-ic { display: inline-block; flex: none; vertical-align: middle; }
.vh2-wrap { max-width: var(--vh-max); margin-left: auto; margin-right: auto; }
.vh2-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.vh2-mono { font-family: var(--vh-mono); }
.vh2-cap { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--vh-text-3); }
.vh2-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-400); }
.vh2-h2 { font-size: 38px !important; font-weight: 800 !important; letter-spacing: -.025em; line-height: 1.05; margin: 8px 0 0 !important; color: var(--vh-text) !important; }
.vh2-lead { font-size: 16px; line-height: 1.6; color: var(--vh-text-2); margin: 0; }
.vh2-btn { height: 40px; display: inline-flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 14px; font-weight: 600; border: 1px solid transparent; text-decoration: none !important; transition: background var(--vh-dur) var(--vh-ease), border-color var(--vh-dur) var(--vh-ease), color var(--vh-dur) var(--vh-ease); cursor: pointer; }
.vh2-btn-lg { height: 48px; padding: 0 16px; font-size: 15px; }
.vh2-btn-primary { background: var(--vh-accent); color: #fff !important; min-width: 220px; }
.vh2-btn-primary span, .vh2-btn-dark span { flex: 1; }
.vh2-btn-primary:hover { background: var(--vh-accent-hover); color: #fff !important; }
.vh2-btn-ghost { border-color: var(--n-500); background: rgba(18,17,16,.6); color: var(--vh-text) !important; }
.vh2-btn-ghost:hover { background: rgba(247,245,244,.08); border-color: var(--vh-text-2); }
.vh2-btn-dark { background: var(--vh-bg); color: #fff !important; min-width: 240px; height: 52px; padding: 0 18px; }
.vh2-btn-dark:hover { background: var(--vh-raised); color: #fff !important; }
.vh2-link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--c-300) !important; }
.vh2-link-arrow:hover { color: var(--vh-text) !important; }
.vh2-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.vh2-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vh2-pill-ok { background: rgba(61,214,140,.12); color: var(--vh-success-text); }
.vh2-pill-warn { background: rgba(245,184,61,.12); color: var(--vh-warning-text); }
.vh2-kv { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--vh-hair); }
.vh2-kv > div { display: flex; justify-content: space-between; padding: 6px 9px; font-size: 12px; }
.vh2-kv > div:nth-child(odd) { border-right: 1px solid var(--vh-hair); }
.vh2-kv > div:nth-child(-n+2) { border-bottom: 1px solid var(--vh-hair); }
.vh2-kv span { color: var(--vh-text-3); } .vh2-kv b { font-family: var(--vh-mono); font-weight: 400; color: var(--vh-text); }

/* ---------- 16. Homepage ---------- */
#main-body:has(.vh2-home) { padding: 0 !important; overflow-x: clip; }
body:has(.vh2-home) .master-breadcrumb { display: none !important; }
.vh2-home { color: var(--vh-text); }
.vh2-hero { position: relative; height: 620px; overflow: hidden; background: var(--vh-nav); border-bottom: 2px solid var(--vh-rule); }
.vh2-hero-art { position: absolute; top: 0; bottom: 0; right: 0; width: 62%; filter: grayscale(1) contrast(1.1); background: var(--vh-hero-art, none) center/cover no-repeat, repeating-linear-gradient(135deg, rgba(247,245,244,.03) 0 1px, transparent 1px 9px); }
.vh2-hero-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--vh-bg) 0%, var(--vh-bg) 40%, rgba(18,17,16,.7) 62%, rgba(18,17,16,.2) 100%); }
.vh2-hero-copy { position: relative; padding-top: 92px; display: flex; flex-direction: column; gap: 22px; }
.vh2-hero-title { font-size: 68px !important; font-weight: 800 !important; letter-spacing: -.035em; line-height: .98; max-width: 720px; margin: 0 !important; color: var(--vh-text) !important; }
.vh2-hero-lead { font-size: 18px; line-height: 1.55; color: var(--n-200); max-width: 560px; margin: 0; }
.vh2-hero-cta { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.vh2-hero-specs { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(18,17,16,.92); border-top: 2px solid var(--vh-border); }
.vh2-specs-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.vh2-specs-grid > div { padding: 16px 0 18px 20px; display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--vh-rule); }
.vh2-specs-grid > div:first-child { padding-left: 0; border-left: 0; }
.vh2-spec { font-size: 20px; font-weight: 700; }
.vh2-section { padding: 80px 0; display: flex; flex-direction: column; gap: 28px; }
.vh2-section-faq { padding-top: 0; gap: 24px; }
.vh2-section-head { display: flex; align-items: flex-end; gap: 24px; padding-bottom: 18px; border-bottom: 2px solid var(--vh-rule); }
.vh2-section-head > a { margin-left: auto; }
.vh2-game-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.vh2-game { display: flex; flex-direction: column; background: var(--vh-surface); border: 1px solid var(--vh-border); color: var(--vh-text) !important; text-decoration: none !important; transition: border-color var(--vh-dur) var(--vh-ease); }
.vh2-game:hover { border-color: var(--n-500); }
.vh2-game-art { position: relative; height: 132px; overflow: hidden; background: var(--vh-nav); border-bottom: 2px solid var(--vh-rule); }
.vh2-game-art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(247,245,244,.035) 0 1px, transparent 1px 7px); }
.vh2-game-word { position: absolute; left: 14px; bottom: -18px; font-weight: 800; font-size: 96px; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(247,245,244,.18); white-space: nowrap; text-transform: uppercase; }
.vh2-game-genre { position: absolute; left: 14px; top: 12px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--vh-text-3); z-index: 1; }
.vh2-game-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
.vh2-game-name { font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.vh2-game-price { display: flex; align-items: baseline; gap: 6px; }
.vh2-game-price .vh2-mono { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.vh2-per { font-size: 13px; color: var(--vh-text-2); }
.vh2-game-cta { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; border: 1px solid var(--vh-border-strong); font-size: 14px; font-weight: 600; transition: background var(--vh-dur), border-color var(--vh-dur); }
.vh2-game-cta span { flex: 1; }
.vh2-game:hover .vh2-game-cta { background: var(--vh-accent); border-color: var(--vh-accent); color: #fff; }
.vh2-band { background: var(--vh-nav); border-top: 2px solid var(--vh-rule); border-bottom: 2px solid var(--vh-rule); }
.vh2-section-tight { padding: 72px 0; }
.vh2-features { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 2px solid var(--vh-border); border-bottom: 2px solid var(--vh-border); margin-top: 28px; }
.vh2-features > div { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 12px; border-left: 2px solid var(--vh-rule); }
.vh2-features > div:first-child { padding-left: 0; border-left: 0; } .vh2-features > div:last-child { padding-right: 0; }
.vh2-features .vh2-ic { color: var(--c-400); }
.vh2-features b { font-size: 18px; font-weight: 700; }
.vh2-features p { font-size: 14px; line-height: 1.55; color: var(--vh-text-2); margin: 0; }
.vh2-panel-promo { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 56px; align-items: center; }
.vh2-panel-copy { display: flex; flex-direction: column; gap: 18px; }
.vh2-panel-copy .vh2-h2 { margin: 0 !important; }
.vh2-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--vh-rule); }
.vh2-checks li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--vh-rule); font-size: 14px; }
.vh2-checks .vh2-ic { color: var(--vh-success); }
.vh2-panel-demo { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--vh-nav); border: 1px solid var(--vh-rule); }
.vh2-sc { position: relative; background: var(--vh-surface); border: 1px solid var(--vh-border); padding: 14px 16px 0 19px; }
.vh2-sc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--vh-success); }
.vh2-sc-busy::before { background: var(--vh-warning); }
.vh2-sc-head { display: flex; align-items: center; gap: 10px; }
.vh2-sc-name { font-size: 15px; font-weight: 700; }
.vh2-sc-game { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vh-text-3); }
.vh2-sc-addr { font-family: var(--vh-mono); font-size: 12.5px; color: var(--vh-text-2); margin: 4px 0 12px; }
.vh2-sc-stats { display: grid; grid-template-columns: .85fr 1.05fr 1.3fr .8fr; margin: 0 -16px 0 -19px; border-top: 1px solid var(--vh-rule); }
.vh2-sc-stats > div { position: relative; padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--vh-rule); }
.vh2-sc-stats > div:last-child { border-right: 0; }
.vh2-sc-stats span { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vh-text-3); }
.vh2-sc-stats b { font-family: var(--vh-mono); font-size: 13px; font-weight: 500; }
.vh2-sc-stats i { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--vh-raised); }
.vh2-sc-stats i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--vh-accent); }
.vh2-console { background: #0F0E0D; border: 1px solid var(--vh-border); padding: 12px 16px; font-family: var(--vh-mono); font-size: 12.5px; line-height: 1.7; color: var(--n-200); }
.vh2-console span { color: var(--vh-text-3); margin-right: 14px; }
.vh2-console .vh2-prompt { color: var(--c-400); margin-right: 8px; }
.vh2-faq { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 16px; align-items: start; }
.vh2-faq-item { background: var(--vh-surface); border: 1px solid var(--vh-border); }
.vh2-faq-item summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px 0 18px; font-size: 15px; font-weight: 600; cursor: pointer; }
.vh2-faq-item summary::-webkit-details-marker { display: none; }
.vh2-faq-item summary:hover { background: var(--vh-surface-2); }
.vh2-faq-item summary > span:first-child { flex: 1; }
.vh2-faq-plus { color: var(--vh-text-3); display: flex; } .vh2-faq-minus { color: var(--c-400); display: none; }
.vh2-faq-item[open] .vh2-faq-plus { display: none; } .vh2-faq-item[open] .vh2-faq-minus { display: flex; }
.vh2-faq-a { padding: 14px 18px 18px; border-top: 2px solid var(--vh-rule); font-size: 14px; line-height: 1.6; color: var(--vh-text-2); }
.vh2-shortcuts { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border: 1px solid var(--vh-border); background: var(--vh-surface); margin-bottom: 80px; }
.vh2-shortcuts a { display: flex; align-items: center; gap: 12px; padding: 18px; border-right: 1px solid var(--vh-border); color: var(--vh-text) !important; font-size: 14.5px; font-weight: 600; transition: background var(--vh-dur); }
.vh2-shortcuts a:last-child { border-right: 0; }
.vh2-shortcuts a:hover { background: var(--vh-raised); }
.vh2-shortcuts a > .vh2-ic:first-child { color: var(--c-400); }
.vh2-shortcuts a > span { flex: 1; }
.vh2-shortcuts a > .vh2-ic:last-child { color: var(--n-500); }
.vh2-cta-band { background: var(--vh-accent); }
.vh2-cta-inner { padding: 64px 0; display: flex; align-items: flex-end; gap: 48px; }
.vh2-cta-inner h2 { font-size: 52px !important; font-weight: 800 !important; letter-spacing: -.035em; line-height: 1; color: #fff !important; max-width: 760px; margin: 0 !important; }
.vh2-cta-inner .vh2-btn { margin-left: auto; }
@media (max-width: 1240px) { .vh2-wrap { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 991.98px) {
  .vh2-hero { height: auto; } .vh2-hero-copy { padding-top: 56px; padding-bottom: 32px; } .vh2-hero-title { font-size: 46px !important; }
  .vh2-hero-specs { position: relative; } .vh2-specs-grid { grid-template-columns: 1fr 1fr; }
  .vh2-specs-grid > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .vh2-game-grid, .vh2-features { grid-template-columns: 1fr 1fr; }
  .vh2-features > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .vh2-panel-promo { grid-template-columns: 1fr; } .vh2-faq { grid-template-columns: 1fr; }
  .vh2-shortcuts { grid-template-columns: 1fr; } .vh2-shortcuts a { border-right: 0; border-bottom: 1px solid var(--vh-border); }
  .vh2-cta-inner { flex-direction: column; align-items: flex-start; } .vh2-cta-inner h2 { font-size: 38px !important; } .vh2-cta-inner .vh2-btn { margin-left: 0; }
}
@media (max-width: 575.98px) {
  .vh2-hero-title { font-size: 38px !important; } .vh2-h2 { font-size: 30px !important; }
  .vh2-game-grid, .vh2-features { grid-template-columns: 1fr; } .vh2-features > div { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--vh-rule); }
  .vh2-section { padding: 48px 0; } .vh2-section-head { flex-direction: column; align-items: flex-start; } .vh2-section-head > a { margin-left: 0; }
  .vh2-btn-primary, .vh2-btn-dark { min-width: 0; width: 100%; } .vh2-hero-cta .vh2-btn { width: 100%; }
}

/* ---------- 17. Header fixes ---------- */
/* Twenty-One's autoCollapse("#nav", 30) folds links into "More" while #nav is taller than 30px;
   keep the list itself 30px tall and let the 48px links overflow it (desktop only). */
@media (min-width: 1200px) {
  #header #nav { height: 30px; align-self: flex-start; overflow: visible; }
  #header #nav > li { height: 30px; }
}
#header .main-navbar-wrapper { border-bottom: 0 !important; box-shadow: none !important; }
#header .cart-btn[data-vh-count="0"] #cartItemCount { display: none !important; }
#header #nav .collapsable-dropdown:not(:has(.collapsable-dropdown-menu > li)) { display: none !important; }

/* ---------- 18. Order form (standard_cart) ---------- */
#order-standard_cart { color: var(--vh-text-2); }
#order-standard_cart .header-lined { margin-bottom: 18px; }
#order-standard_cart .cart-body > p, #order-standard_cart .secondary-cart-body > p { color: var(--vh-text-2); }
#order-standard_cart .prepend-icon .field, #order-standard_cart .prepend-icon .form-control { padding-left: 38px !important; }
#order-standard_cart .prepend-icon .field-icon { width: 38px; display: flex; align-items: center; justify-content: center; height: 40px; top: 0; }
#order-standard_cart .sub-heading { border: 0 !important; border-bottom: 2px solid var(--vh-rule) !important; text-align: left !important; height: auto; margin: 28px 0 16px !important; padding-bottom: 10px; }
#order-standard_cart .sub-heading span { position: static !important; padding: 0 !important; background: transparent !important; font-size: 15px !important; font-weight: 700 !important; color: var(--vh-text) !important; }
/* product cards (store) */
#order-standard_cart .products .product { position: relative; display: flex; flex-direction: column; background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 16px; transition: border-color var(--vh-dur) var(--vh-ease); }
#order-standard_cart .products .product:hover { border-color: var(--n-500) !important; }
#order-standard_cart .products .product header { position: relative; height: 96px; display: flex; align-items: flex-end; padding: 0 18px 12px !important; margin: 0 !important; background: var(--vh-nav) !important; border-bottom: 2px solid var(--vh-rule) !important; overflow: hidden; }
#order-standard_cart .products .product header::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(247,245,244,.035) 0 1px, transparent 1px 7px); }
#order-standard_cart .products .product header span { position: relative; font-size: 19px !important; font-weight: 800 !important; letter-spacing: -.015em; color: var(--vh-text) !important; }
#order-standard_cart .products .product .product-desc { width: 100% !important; float: none !important; padding: 14px 18px 4px !important; color: var(--vh-text-2) !important; font-size: 13px !important; }
#order-standard_cart .products .product .product-desc ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--vh-hair); }
#order-standard_cart .products .product .product-desc li { padding: 6px 9px; font-size: 12px; color: var(--vh-text) !important; border-bottom: 1px solid var(--vh-hair); }
#order-standard_cart .products .product .product-desc li:nth-child(odd) { border-right: 1px solid var(--vh-hair); }
#order-standard_cart .products .product .product-desc strong, #order-standard_cart .products .product .product-desc li strong { display: block; order: -1; color: var(--vh-text-3) !important; font-weight: 500 !important; font-size: 11px; }
#order-standard_cart .products .product .product-desc li { display: flex; flex-direction: column-reverse; gap: 1px; }
#order-standard_cart .products .product .product-desc .feature-value { color: var(--vh-text); }
#order-standard_cart .products .product footer { width: 100% !important; float: none !important; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 18px 18px !important; margin-top: auto; text-align: left !important; }
#order-standard_cart .products .product .product-pricing { color: var(--vh-text-3) !important; font-size: 11px !important; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.3; }
#order-standard_cart .products .product .product-pricing br { display: none; }
#order-standard_cart .products .product .product-pricing .price { display: block; font-family: var(--vh-mono); font-size: 26px !important; font-weight: 600 !important; letter-spacing: -.02em; text-transform: none; color: var(--vh-text) !important; margin: 2px 0; }
#order-standard_cart .products .product .btn-order-now { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px !important; font-size: 14px !important; background: transparent !important; border: 1px solid var(--vh-border-strong) !important; color: var(--vh-text) !important; }
#order-standard_cart .products .product .btn-order-now i { display: none; }
#order-standard_cart .products .product .btn-order-now::after { content: "→"; font-weight: 400; }
#order-standard_cart .products .product:hover .btn-order-now, #order-standard_cart .products .product .btn-order-now:hover { background: var(--vh-accent) !important; border-color: var(--vh-accent) !important; color: #fff !important; }
/* configure */
#order-standard_cart .product-info { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; padding: 18px 20px !important; color: var(--vh-text-2) !important; font-size: 13.5px; line-height: 1.7; margin-bottom: 20px; }
#order-standard_cart .product-info .product-title { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.015em; color: var(--vh-text) !important; margin-bottom: 8px !important; }
#order-standard_cart .product-info strong, #order-standard_cart .product-info b { color: var(--vh-text-3); font-weight: 500; }
#order-standard_cart .field-container .form-group label, #order-standard_cart .product-configurable-options label { font-size: 13px !important; }
#order-standard_cart .product-configurable-options { background: var(--vh-surface); border: 1px solid var(--vh-border); padding: 16px 20px 4px; margin-bottom: 16px; }
#order-standard_cart #frmConfigureProduct .alert.info-text-sm { text-align: left !important; }
/* order summary (configure + cart) */
#order-standard_cart .order-summary, #order-standard_cart #orderSummary { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; border-radius: 0 !important; padding: 0 !important; color: var(--vh-text-2) !important; margin-bottom: 14px; }
#order-standard_cart .order-summary h2, #order-standard_cart .order-summary .font-size-30 { background: transparent !important; color: var(--vh-text) !important; font-size: 16px !important; font-weight: 700 !important; text-align: left !important; padding: 16px 20px !important; margin: 0 !important; border-bottom: 2px solid var(--vh-rule); }
#order-standard_cart .summary-container { background: transparent !important; border: 0 !important; padding: 16px 20px 18px !important; color: var(--vh-text-2) !important; font-size: 13.5px; }
#order-standard_cart .summary-container .product-name { color: var(--vh-text) !important; font-weight: 700; font-size: 14.5px; }
#order-standard_cart .summary-container .product-group { color: var(--vh-text-3) !important; font-style: normal !important; }
#order-standard_cart .summary-container .clearfix, #order-standard_cart .summary-container > div { color: var(--vh-text-2); }
#order-standard_cart .summary-container .pull-right, #order-standard_cart .summary-container .float-right, #order-standard_cart .summary-container .amt { font-family: var(--vh-mono); color: var(--vh-text) !important; }
#order-standard_cart .summary-totals, #order-standard_cart .subtotal, #order-standard_cart .recurring-totals { border-top: 1px solid var(--vh-rule) !important; padding-top: 10px; margin-top: 10px; }
#order-standard_cart .total-due-today { border-top: 2px solid var(--vh-rule); margin-top: 12px; padding-top: 14px !important; text-align: left !important; }
#order-standard_cart .total-due-today .amt { display: block; font-family: var(--vh-mono); font-size: 34px !important; font-weight: 600; color: var(--vh-text) !important; letter-spacing: -.02em; }
#order-standard_cart .total-due-today span:not(.amt) { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--vh-text-3) !important; }
#order-standard_cart #btnCompleteProductConfig, #order-standard_cart .btn-checkout { width: 100%; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px !important; font-size: 15px !important; }
#order-standard_cart .btn-continue-shopping { color: var(--vh-text-2) !important; border: 0 !important; }
/* cart items */
#order-standard_cart .view-cart-items-header { background: var(--vh-surface) !important; color: var(--vh-text-3) !important; border: 1px solid var(--vh-border) !important; border-bottom: 0 !important; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; padding: 12px 16px !important; }
#order-standard_cart .view-cart-items { border: 1px solid var(--vh-border) !important; background: var(--vh-surface) !important; }
#order-standard_cart .view-cart-items .item { background: transparent !important; border-bottom: 1px solid var(--vh-rule) !important; padding: 16px !important; color: var(--vh-text-2); }
#order-standard_cart .view-cart-items .item-title { color: var(--vh-text) !important; font-weight: 700 !important; font-size: 15px; }
#order-standard_cart .view-cart-items .item-group { color: var(--vh-text-3) !important; font-style: normal; }
#order-standard_cart .view-cart-items .item-price span:first-child { font-family: var(--vh-mono); color: var(--vh-text) !important; font-size: 15px; }
#order-standard_cart .view-cart-items .cycle { color: var(--vh-text-3) !important; }
#order-standard_cart .btn-remove-from-cart { color: var(--vh-text-3) !important; }
#order-standard_cart .btn-remove-from-cart:hover { color: var(--vh-danger-text) !important; }
#order-standard_cart .empty-cart .btn { color: var(--vh-text-3) !important; }
#order-standard_cart .view-cart-tabs { margin-top: 20px; }
#order-standard_cart .view-cart-tabs .nav-tabs { border-bottom: 0 !important; }
#order-standard_cart .view-cart-tabs .nav-tabs .nav-item.active .nav-link, #order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active, #order-standard_cart .view-cart-tabs .nav-tabs > li.active > a { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; border-bottom: 0 !important; color: var(--vh-text) !important; box-shadow: none; }
#order-standard_cart .view-cart-tabs .tab-content { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; padding: 16px !important; }
/* checkout */
#order-standard_cart .already-registered { background: transparent !important; border: 0; padding: 0; color: var(--vh-text-2); }
#order-standard_cart .account-select-container .account { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; padding: 14px 16px !important; margin-bottom: 8px; }
#order-standard_cart .account-select-container .account.active { border-color: var(--vh-accent) !important; background: rgb(200 16 46 / .06) !important; }
#order-standard_cart .payment-methods, #order-standard_cart #paymentGatewaysContainer { text-align: left !important; display: flex; flex-direction: column; gap: 8px; }
#order-standard_cart .payment-methods .radio-inline, #order-standard_cart #paymentGatewaysContainer label.radio-inline { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 14px 16px !important; background: var(--vh-surface); border: 1px solid var(--vh-border); color: var(--vh-text) !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer; }
#order-standard_cart .payment-methods .radio-inline:has(input:checked), #order-standard_cart #paymentGatewaysContainer label.radio-inline:has(input:checked), #order-standard_cart #paymentGatewaysContainer label.radio-inline:has(.checked) { border-color: var(--vh-accent); background: rgb(200 16 46 / .07); }
#order-standard_cart .alert-success.total-due-today, #order-standard_cart .alert.alert-success.text-center { text-align: left !important; }
#order-standard_cart .checkout-security-msg { border-left-color: var(--vh-text-3) !important; background: transparent !important; border-color: var(--vh-border) !important; color: var(--vh-text-3) !important; font-size: 12.5px; }
#order-standard_cart .checkout-security-msg i { color: var(--vh-text-3) !important; }
#order-standard_cart #btnCompleteOrder { min-width: 240px; height: 48px; justify-content: center; }
#order-standard_cart .cc-input-container { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; padding: 16px !important; }
#order-standard_cart .marketing-email-optin, #order-standard_cart .marketing-email-optin h4 { color: var(--vh-text); }
#order-standard_cart .products .product .product-desc ul > strong, #order-standard_cart .products .product .product-desc > strong { display: none !important; }
#order-standard_cart .products .product .product-desc li strong:empty, #order-standard_cart .products .product .product-desc li .feature-value:empty { display: none; }

/* ---------- 19. Client area fixes ---------- */
.tiles .tile .tile-icon { position: absolute !important; top: 18px; left: 18px; width: 14px; height: 14px; margin: 0 !important; color: var(--vh-text-3) !important; background: none !important; }
.tiles .tile .tile-icon svg { width: 14px !important; height: 14px !important; display: block; }
.vh-feature-card { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 10px; text-align: left !important; padding: 18px !important; background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; color: var(--vh-text) !important; height: 100%; transition: background var(--vh-dur), border-color var(--vh-dur); }
.vh-feature-card:hover { background: var(--vh-raised) !important; border-color: var(--vh-border-strong) !important; }
.vh-feature-card .vh-feature-icon { margin: 0 !important; width: auto !important; height: auto !important; background: none !important; color: var(--c-400) !important; }
.vh-feature-card .vh-feature-icon svg { width: 20px; height: 20px; }
.vh-feature-card h4 { font-size: 14.5px !important; font-weight: 600 !important; margin: 0 !important; color: var(--vh-text) !important; }
/* datatable search */
.dataTables_filter input, .dataTables_wrapper .dataTables_filter input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238F8A86' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 10px center !important; background-size: 14px !important; padding-left: 32px !important; min-width: 220px; }
.dataTables_wrapper table.dataTable { border: 0 !important; margin: 0 !important; }
/* tickets */
.ticket-reply { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; margin-bottom: 12px !important; }
.ticket-reply .posted-by { background: var(--vh-raised) !important; border: 0 !important; border-bottom: 1px solid var(--vh-border) !important; color: var(--vh-text-3) !important; font-size: 13px; padding: 10px 16px !important; }
.ticket-reply .posted-by .posted-by-name, .ticket-reply .posted-by strong { color: var(--vh-text) !important; }
.ticket-reply.staff { border-left: 3px solid var(--vh-accent) !important; }
.ticket-reply.staff .posted-by { background: rgb(200 16 46 / .08) !important; }
.ticket-reply .requestor-badge { background: var(--vh-accent-tint) !important; color: var(--c-200) !important; font-size: 10.5px !important; font-weight: 600; letter-spacing: .06em; padding: 2px 7px; text-transform: uppercase; }
.ticket-reply .requestor-type-owner { background: rgba(247,245,244,.08) !important; color: var(--n-200) !important; }
.ticket-reply .message { color: var(--n-200) !important; padding: 16px !important; font-size: 14px; line-height: 1.6; }
.ticket-reply .rating .star, .rating .star::before { color: var(--vh-text-3) !important; }
.markdown-editor, .md-input, textarea.markdown-editor { background: var(--vh-bg) !important; color: var(--vh-text) !important; }
.md-editor .md-footer, .markdown-editor-status { color: var(--vh-text-3) !important; }
.ticket-cc-item, .ticket-details-children .ticket-requestor-name { color: var(--vh-text) !important; }
/* service detail */
.product-details .product-status { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; overflow: hidden; }
.product-details .product-icon { background: var(--vh-nav) !important; padding: 28px 20px !important; border-bottom: 2px solid var(--vh-rule); }
.product-details .product-icon .fa-stack .fa-circle { color: var(--vh-raised) !important; }
.product-details .product-icon .fa-inverse { color: var(--c-400) !important; }
.product-details .product-icon h3 { font-size: 20px !important; font-weight: 800 !important; color: var(--vh-text) !important; margin: 12px 0 2px !important; }
.product-details .product-icon h4 { font-size: 13px !important; font-weight: 500 !important; color: var(--vh-text-3) !important; }
.product-details .product-status-text { background: transparent !important; color: var(--n-200) !important; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 10px !important; }
.product-details .product-status-active .product-status-text { color: var(--vh-success-text) !important; background: rgba(61,214,140,.08) !important; }
.product-details .product-status-pending .product-status-text { color: var(--vh-warning-text) !important; background: rgba(245,184,61,.08) !important; }
.product-details .product-status-suspended .product-status-text { color: var(--vh-danger-text) !important; background: rgba(255,90,79,.08) !important; }
.product-details .col-md-6.text-center { text-align: left !important; color: var(--vh-text); font-size: 14.5px; display: grid; grid-template-columns: 1fr; }
.product-details .col-md-6.text-center h4 { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .09em; text-transform: uppercase; color: var(--vh-text-3) !important; margin: 14px 0 3px !important; }
.product-details .col-md-6.text-center h4:first-child { margin-top: 0 !important; }
.product-details-tab-container, .responsive-tabs-sm + .tab-content { background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; border-top: 0 !important; color: var(--vh-text-2); }
.product-details-tab-container .row > div:first-child, .tab-content .text-right strong { color: var(--vh-text-3) !important; font-weight: 500 !important; }

/* ---------- 20. Order flow: steps, cycle cards, option controls ---------- */
#order-standard_cart .header-lined.vh2-has-steps { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 2px solid var(--vh-rule) !important; margin-bottom: 24px; }
#order-standard_cart .header-lined.vh2-has-steps h1 { margin: 0 !important; }
.vh2-steps { list-style: none; margin: 0 0 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 140px); }
.vh2-steps li { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 3px solid var(--vh-border); font-size: 13.5px; font-weight: 500; color: var(--vh-text-3); }
.vh2-steps li.is-current, .vh2-steps li.is-done { border-top-color: var(--vh-accent); color: var(--vh-text); font-weight: 600; }
.vh2-step-n { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--vh-border-strong); font-family: var(--vh-mono); font-size: 11px; color: var(--vh-text-3); }
.vh2-steps li.is-current .vh2-step-n { border-color: var(--vh-accent); color: var(--c-400); }
.vh2-steps li.is-done .vh2-step-n { background: var(--vh-accent); border-color: var(--vh-accent); color: #fff; }
.vh2-hidden-select { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; }
/* billing cycle cards */
.vh2-cycle-group > label { font-size: 13px !important; color: var(--vh-text) !important; font-weight: 700 !important; }
.vh2-cycles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--vh-border); background: var(--vh-surface); }
.vh2-cycle { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px 14px 40px; background: transparent; border: 0; border-right: 1px solid var(--vh-border); color: var(--vh-text); text-align: left; cursor: pointer; font-family: var(--vh-font); transition: background var(--vh-dur); }
.vh2-cycle:last-child { border-right: 0; }
.vh2-cycle::before { content: ""; position: absolute; left: 16px; top: 17px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--vh-border-strong); }
.vh2-cycle:hover { background: var(--vh-surface-2); }
.vh2-cycle.is-on { background: rgb(200 16 46 / .08); box-shadow: inset 0 0 0 1px var(--vh-accent); }
.vh2-cycle.is-on::before { border-color: var(--vh-accent); box-shadow: inset 0 0 0 3px var(--vh-surface), inset 0 0 0 7px var(--vh-accent); }
.vh2-cycle-name { font-size: 14px; font-weight: 600; }
.vh2-cycle-price { font-size: 14px; color: var(--vh-text-2); }
.vh2-cycle.is-on .vh2-cycle-price { color: var(--vh-text); }
/* configurable options as rows */
#order-standard_cart .product-configurable-options { padding: 0 !important; }
#order-standard_cart .product-configurable-options .row { margin: 0; }
#order-standard_cart .product-configurable-options .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: 0; }
#order-standard_cart .product-configurable-options .form-group.vh2-opt-group { margin: 0; border-bottom: 1px solid var(--vh-rule); }
#order-standard_cart .product-configurable-options .form-group.vh2-opt-group > label { display: none; }
.vh2-opt { display: grid; grid-template-columns: 150px minmax(0,1fr) 90px; align-items: center; gap: 16px; padding: 18px 20px; }
.vh2-opt-name { display: flex; flex-direction: column; gap: 3px; }
.vh2-opt-name b { font-size: 14px; color: var(--vh-text); }
.vh2-opt-name small, .vh2-range, .vh2-ram-head small, .vh2-fixed small { font-size: 12.5px; color: var(--vh-text-3); }
.vh2-opt-add { text-align: right; font-size: 13.5px; color: var(--vh-text); }
.vh2-fixed { height: 40px; display: inline-flex; align-items: center; gap: 24px; padding: 0 14px; border: 1px solid var(--vh-border); font-size: 14px; color: var(--vh-text); }
.vh2-opt-ctl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vh2-stepper { display: inline-flex; border: 1px solid var(--vh-border-strong); }
.vh2-step-btn { width: 40px; height: 40px; background: transparent; border: 0; color: var(--vh-text-2); font-size: 18px; cursor: pointer; }
.vh2-step-btn:hover:not(:disabled) { background: var(--vh-raised); color: var(--vh-text); }
.vh2-step-btn:disabled { opacity: .35; cursor: not-allowed; }
.vh2-stepper output { width: 64px; height: 40px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--vh-border-strong); border-right: 1px solid var(--vh-border-strong); font-size: 16px; font-weight: 600; color: var(--vh-text); }
.vh2-opt-ram .vh2-opt-ctl { flex-direction: column; align-items: stretch; gap: 8px; }
.vh2-ram-head { display: flex; align-items: baseline; gap: 10px; }
.vh2-ram-head output { font-size: 16px; font-weight: 600; color: var(--vh-text); }
.vh2-ram { display: flex; gap: 3px; }
.vh2-ram-cell { flex: 1; height: 22px; min-width: 0; padding: 0; background: var(--vh-raised); border: 0; cursor: pointer; transition: background var(--vh-dur); }
.vh2-ram-cell:hover { background: var(--vh-border-strong); }
.vh2-ram-cell.is-on { background: var(--vh-accent); }
.vh2-ram-cell.is-on:hover { background: var(--vh-accent-hover); }
.vh2-ram-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--vh-text-3); }
@media (max-width: 767.98px) {
  .vh2-steps { margin-left: 0; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .vh2-opt { grid-template-columns: 1fr auto; } .vh2-opt-ctl { grid-column: 1 / -1; grid-row: 2; }
  .vh2-cycles { grid-template-columns: 1fr; } .vh2-cycle { border-right: 0; border-bottom: 1px solid var(--vh-border); }
}
/* order summary: sticky column instead of standard_cart's scroll-follow margin */
@media (min-width: 992px) {
  #order-standard_cart .secondary-cart-sidebar { align-self: flex-start; position: sticky; top: 20px; }
  #order-standard_cart #scrollingPanelContainer, #order-standard_cart #orderSummary { margin-top: 0 !important; top: auto !important; }
}

/* ---------- 21. Header row account (v2 include) + dashboard (v2 clientareahome) ---------- */
.vh2-signin { height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 12px; border: 1px solid var(--vh-border-strong); color: var(--vh-text) !important; font-size: 14px; font-weight: 600; transition: background var(--vh-dur), border-color var(--vh-dur); }
.vh2-signin:hover { background: rgba(247,245,244,.06); border-color: var(--vh-text-3); }
.vh2-account-btn { height: 44px; display: inline-flex !important; align-items: center; gap: 10px; padding: 0 10px 0 6px; border: 1px solid var(--vh-border); color: var(--vh-text) !important; font-size: 14px; font-weight: 600; }
.vh2-account-btn:hover, .vh2-account.show .vh2-account-btn { background: var(--vh-raised); border-color: var(--n-500); }
.vh2-account-btn::after { border: 0 !important; width: 15px; height: 15px; margin: 0; background: var(--vh-text-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/15px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/15px no-repeat; }
.vh2-avatar { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--vh-accent-tint); color: var(--c-200); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.vh2-account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh2-account-menu { width: 264px; margin-top: 8px !important; padding: 0 !important; }
.vh2-account-who { display: flex; flex-direction: column; gap: 1px; padding: 12px 14px; border-bottom: 2px solid var(--vh-border); }
.vh2-account-who b { font-size: 14px; color: var(--vh-text); } .vh2-account-who span { font-size: 12.5px; color: var(--vh-text-2); overflow: hidden; text-overflow: ellipsis; }
.vh2-account-menu .dropdown-item .vh2-ic { color: var(--vh-text-3); }
@media (min-width: 1200px) { #header .main-navbar-wrapper .navbar-nav.ml-auto { display: none !important; } }
.vh2-page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.vh2-page-icon { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--vh-accent); color: #fff; box-shadow: 0 8px 24px -8px rgb(200 16 46 / .6); }
.vh2-page-title { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -.02em; margin: 0 !important; }
.vh2-page-sub { margin: 2px 0 0; color: var(--vh-text-2); font-size: 14px; }
.vh2-due-alert { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; margin-bottom: 20px; background: rgb(245 184 61 / .07); border: 1px solid rgb(245 184 61 / .35); color: var(--vh-text-2); font-size: 14px; }
.vh2-due-alert > .vh2-ic { color: var(--vh-warning); }
.vh2-due-alert b { color: var(--vh-text); }
.vh2-due-alert .vh2-btn { margin-left: auto; min-width: 0; }
.vh2-btn-sm { height: 34px; padding: 0 12px; font-size: 13.5px; }
.vh2-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); background: var(--vh-surface); border: 1px solid var(--vh-border); margin-bottom: 20px; }
.vh2-stat { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; border-right: 1px solid var(--vh-border); color: var(--vh-text) !important; transition: background var(--vh-dur); }
.vh2-stat:last-child { border-right: 0; }
.vh2-stat:hover { background: var(--vh-surface-2); }
.vh2-stat .vh2-cap { display: flex; align-items: center; gap: 8px; }
.vh2-stat-n { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vh2-stat-sub { font-size: 13px; color: var(--vh-text-2); }
@media (max-width: 991.98px) { .vh2-stats { grid-template-columns: 1fr 1fr; } .vh2-stat:nth-child(2) { border-right: 0; } .vh2-stat:nth-child(-n+2) { border-bottom: 1px solid var(--vh-border); } }
#order-standard_cart .intl-tel-input.separate-dial-code input, .intl-tel-input.separate-dial-code input.form-control { padding-left: 84px !important; }
/* header row: keep toolbar items in a row and float the account menu (Bootstrap renders .navbar-nav dropdowns static outside navbar-expand) */
#header .navbar-light .navbar-nav.toolbar { flex-direction: row; align-items: center; }
#header .navbar-light .navbar-nav .vh2-account { position: relative; }
#header .navbar-light .navbar-nav .vh2-account .dropdown-menu { position: absolute !important; top: 100%; right: 0; left: auto; z-index: 1050; }

/* ---------- 22. Invoice page (viewinvoice.tpl, standalone) ---------- */
body:has(.invoice-container) { background: var(--vh-bg) !important; padding: 32px 16px; }
.invoice-container { max-width: 860px !important; margin: 0 auto !important; padding: 32px 36px !important; background: var(--vh-surface) !important; border: 1px solid var(--vh-border) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--vh-text-2) !important; }
.invoice-container hr { border-top: 2px solid var(--vh-rule) !important; margin: 20px 0 !important; }
.invoice-container .invoice-header { align-items: center; }
.invoice-container .invoice-header img { max-height: 72px !important; width: auto; }
.invoice-container .invoice-header h3 { font-size: 30px !important; font-weight: 800 !important; font-family: var(--vh-mono) !important; color: var(--vh-text) !important; letter-spacing: -.02em; margin: 8px 0 0 !important; }
.invoice-container .invoice-status { text-align: right; }
.invoice-container .invoice-status span { display: inline-block; padding: 6px 14px; border: 2px solid currentColor; background: transparent !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .14em; text-transform: uppercase; }
.invoice-container .invoice-status .paid { color: var(--vh-success-text) !important; }
.invoice-container .invoice-status .unpaid, .invoice-container .invoice-status .payment-pending, .invoice-container .invoice-status .draft { color: var(--vh-warning-text) !important; }
.invoice-container .invoice-status .collections, .invoice-container .invoice-status .overdue { color: var(--vh-danger-text) !important; }
.invoice-container .invoice-status .cancelled, .invoice-container .invoice-status .refunded { color: var(--n-200) !important; }
.invoice-container .invoice-col strong { display: block; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--vh-text-3); margin-bottom: 6px; }
.invoice-container address, .invoice-container .small-text { color: var(--vh-text) !important; font-size: 13.5px !important; line-height: 1.6; }
.invoice-container .card { margin-top: 12px; }
.invoice-container .card-header .card-title, .invoice-container .card-title.text-white { background: transparent !important; color: var(--vh-text) !important; font-size: 15px !important; padding: 12px 16px !important; }
.invoice-container .table td { color: var(--vh-text-2); }
.invoice-container .table td:last-child, .invoice-container .table th:last-child { text-align: right !important; font-family: var(--vh-mono); color: var(--vh-text); }
.invoice-container .table tr.total-row td, .invoice-container .table td.total-row { font-weight: 700; color: var(--vh-text); }
.invoice-container .payment-btn-container .btn, .invoice-container form .btn-primary, .invoice-container input[type="submit"] { height: 42px; padding: 0 18px !important; }
body:has(.invoice-container) > p.text-center a { color: var(--vh-text-3) !important; font-size: 13px; }
@media print {
  body:has(.invoice-container) { background: #fff !important; padding: 0; color: #201E1D !important; }
  .invoice-container { background: #fff !important; border: 0 !important; padding: 0 !important; color: #201E1D !important; }
  .invoice-container * { color: #201E1D !important; background: transparent !important; border-color: #D6D2CF !important; }
  .invoice-container .invoice-header { border-bottom: 2px solid #C8102E; padding-bottom: 12px; }
  .invoice-container .invoice-status .paid { color: #187A48 !important; } .invoice-container .invoice-status .unpaid { color: #8F5F00 !important; }
  .invoice-container .invoice-status .collections { color: #B83A28 !important; } .invoice-container .invoice-status .cancelled { color: #69645F !important; }
  .invoice-container .invoice-col strong { color: #69645F !important; }
}

/* service detail: "Open game panel" action (added by volition.js on active services) */
.vh2-panel-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 14px 16px; background: var(--vh-surface); border: 1px solid var(--vh-border); border-left: 3px solid var(--vh-success); }
.vh2-panel-cta span { color: var(--vh-text-2); font-size: 13.5px; } .vh2-panel-cta b { color: var(--vh-text); }
.vh2-panel-cta .vh2-btn { min-width: 0; }
.invoice-container .table td.total-row, .invoice-container .table th.total-row { background: var(--vh-surface-2) !important; color: var(--vh-text) !important; border-top: 1px solid var(--vh-border) !important; }
.invoice-container .table td.total-row strong { color: var(--vh-text-2); font-weight: 600; }

/* ---------- 23. Full-pass fixes (phone width, editor, captcha) ---------- */
@media (max-width: 1199.98px) { #header .main-navbar-wrapper > .container { min-height: 0; } }
.table-container, .dataTables_wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) { .table-container table.table-list, .dataTables_wrapper table.dataTable { min-width: 560px; } }
.responsive-tabs-sm .nav-link, .responsive-tabs-sm .nav-item .nav-link.active { background: transparent !important; color: var(--vh-text-2) !important; border: 0 !important; }
.responsive-tabs-sm .nav-item .nav-link.active { color: var(--vh-text) !important; box-shadow: inset 0 -2px 0 var(--vh-accent) !important; }
.responsive-tabs-sm-connector { display: none !important; }
#main-body .md-editor textarea.md-input, #main-body .md-editor > textarea, #main-body textarea.markdown-editor { background: var(--vh-bg) !important; color: var(--vh-text) !important; }
.recaptcha-container .h-captcha, .recaptcha-container .g-recaptcha { padding: 0; border: 0; background: transparent; }

/* ---------- 24. Legal pages (terms-of-service.tpl, privacy-policy.tpl) ---------- */
.vh2-legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.vh2-legal-nav { position: sticky; top: 16px; display: flex; flex-direction: column; border: 1px solid var(--vh-border); background: var(--vh-surface); }
.vh2-legal-link { padding: 12px 16px; color: var(--vh-text-2) !important; font-size: 14px; font-weight: 600; border-left: 3px solid transparent; }
.vh2-legal-link + .vh2-legal-link { border-top: 1px solid var(--vh-border); }
.vh2-legal-link:hover { color: var(--vh-text) !important; text-decoration: none; background: var(--vh-surface-2, rgba(255,255,255,.03)); }
.vh2-legal-link.active { color: var(--vh-text) !important; border-left-color: var(--vh-accent); }
.vh2-legal-body { max-width: 760px; padding: 28px 32px; background: var(--vh-surface); border: 1px solid var(--vh-border); color: var(--vh-text-2); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.vh2-legal-body h2 { margin: 32px 0 10px; padding-top: 20px; border-top: 1px solid var(--vh-border); font-size: 20px; font-weight: 800; color: var(--vh-text); }
.vh2-legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.vh2-legal-body h3 { margin: 22px 0 8px; font-size: 16px; font-weight: 700; color: var(--vh-text); }
.vh2-legal-body p, .vh2-legal-body ul, .vh2-legal-body ol { margin: 0 0 12px; }
.vh2-legal-body ul, .vh2-legal-body ol { padding-left: 22px; }
.vh2-legal-body li { margin-bottom: 6px; }
.vh2-legal-body b, .vh2-legal-body strong { color: var(--vh-text); }
.vh2-legal-body a { color: var(--vh-accent-text, var(--vh-accent)); }
@media (max-width: 991.98px) { .vh2-legal { grid-template-columns: 1fr; } .vh2-legal-nav { position: static; flex-direction: row; } .vh2-legal-link { flex: 1; text-align: center; border-left: 0; border-bottom: 3px solid transparent; } .vh2-legal-link + .vh2-legal-link { border-top: 0; border-left: 1px solid var(--vh-border); } .vh2-legal-link.active { border-bottom-color: var(--vh-accent); } .vh2-legal-body { padding: 20px 18px; } }