/* VilaVPN customer pages: the October 2026 homepage's Refined Original system.
   Loaded after the legacy bundle. body.vi is deliberately absent on homepage.
   Preserve WHMCS visibility, status colours, table layout and payment widgets. */
body.vi {
  --vi-ink: #082031;
  --vi-body: #3a4a57;
  --vi-muted: #5a6b78;
  --vi-cyan: #28a3cc;
  --vi-cyan-hover: #47bbe0;
  --vi-link: #0a6f91;
  --vi-page: #f3f6f8;
  --vi-line: #e2e8ee;
  --vi-shadow: 0 1px 2px rgba(8,32,49,.06), 0 16px 36px -22px rgba(8,32,49,.22);
  --vi-cjk: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Hiragino Sans","Yu Gothic",sans-serif;
  --vi-head: "Titillium Web",var(--vi-cjk);
  --vi-text: "Roboto",var(--vi-cjk);
  --vi-font-body: 16px;
  --vi-font-meta: 14px;
  --vi-font-panel: 20px;
  --vi-font-subheading: 18px;
  background: var(--vi-page);
}
body.vi #main-body {
  padding: 40px 0 64px;
  background: var(--vi-page);
  color: var(--vi-body);
  font: 400 var(--vi-font-body)/1.6 var(--vi-text);
}
body.vi #main-body > .container { max-width: 1200px; }
body.vi #main-body .main-content {
  min-width: 0;
  margin-bottom: 24px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--vi-line);
  border-radius: 20px;
  box-shadow: var(--vi-shadow);
}
body.vi #main-body .header-lined { margin-bottom: 28px; }
body.vi #main-body .header-lined h1 {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  color: var(--vi-ink);
  font: 700 clamp(28px,3vw,40px)/1.18 var(--vi-head);
  letter-spacing: -.015em;
  text-transform: none;
  overflow-wrap: anywhere;
}
body.vi #main-body .header-lined small {
  display: block;
  margin-top: 10px;
  color: var(--vi-muted);
  font: 400 var(--vi-font-body)/1.6 var(--vi-text);
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  overflow: visible;
}
body.vi #main-body .breadcrumb {
  gap: 4px;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 14px;
}
body.vi #main-body .breadcrumb a { color: var(--vi-link); }
body.vi #main-body h2 { font: 700 28px/1.25 var(--vi-head); color: var(--vi-ink); }
body.vi #main-body h3 { font: 700 23px/1.3 var(--vi-head); }
body.vi #main-body h4 { font: 700 19px/1.35 var(--vi-head); }
body.vi #main-body .text-muted { color: var(--vi-muted) !important; }
body.vi #main-body :is(a,button,input,select,textarea):focus-visible {
  outline: 3px solid #0a84ff;
  outline-offset: 3px;
}

/* Forms and auth: comfortably sized controls; no gateway structure changes. */
body.vi #main-body .logincontainer {
  max-width: 520px;
  margin: 12px auto 24px;
  padding: 24px 8px;
  background: transparent;
}
body.vi #main-body .logincontainer.with-social { max-width: 880px; }
body.vi #main-body label { font-weight: 500; }
body.vi #main-body :is(.form-control,.form-select) {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #bccbd5;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: none;
}
body.vi #main-body :is(.form-control,.form-select):not(:disabled):not([readonly]) {
  color: var(--vi-ink);
  background-color: #fff;
}
body.vi #main-body .form-control::placeholder { color: var(--vi-muted); opacity: 1; }
body.vi #main-body #registration .field {
  min-height: 44px;
  border: 1px solid #8397a5;
  border-radius: 10px;
  color: var(--vi-ink);
  font-size: 16px;
}
body.vi #main-body #registration .prepend-icon .field { padding-left: 40px; }
body.vi #main-body #registration .field::placeholder { color: var(--vi-muted); opacity: 1; }
body.vi #main-body :is(.form-control,.form-select):focus {
  border-color: var(--vi-link);
  box-shadow: 0 0 0 3px rgba(40,163,204,.15);
}
body.vi #main-body :is(.is-invalid,.has-error) .form-control:not(:disabled):not([readonly]),
body.vi #main-body .form-control.is-invalid:not(:disabled):not([readonly]) {
  border-color: #b42332;
  background-color: #fff0f2;
}
body.vi #main-body :is(.is-invalid,.has-error) .form-control:focus,
body.vi #main-body .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(180,35,50,.18); }
body.vi #main-body .has-success .form-control,
body.vi #main-body .form-control.is-valid { border-color: #287747; }

/* Hidden header disclosures must not extend the scrollable canvas. */
body.vi header #languageChooserContent,
body.vi header #accountNotificationsContent { left: auto; right: 0; max-width: calc(100vw - 24px); }
body.vi #main-body .input-group > .form-control { min-width: 0; }
body.vi #main-body .home-kb-search .form-control { padding-left: 50px; }
body.vi #main-body .input-group-text { border-color: #bccbd5; font-size: 15px; }
body.vi #main-body .btn {
  min-height: 42px;
  border-radius: 999px;
  font: 700 16px/1.35 var(--vi-head);
  text-transform: none;
  white-space: normal;
}
body.vi #main-body .btn-sm { min-height: 34px; font-size: 14px; }
body.vi #main-body .btn-primary {
  padding: 10px 24px !important;
  background: var(--vi-cyan);
  border-color: var(--vi-cyan);
  color: #06121b;
  box-shadow: 0 8px 20px -12px rgba(40,163,204,.65);
}
body.vi #main-body .btn-primary:hover,
body.vi #main-body .btn-primary:focus {
  background: var(--vi-cyan-hover);
  border-color: var(--vi-cyan-hover);
  color: #06121b;
}
body.vi #main-body .btn-outline-secondary {
  padding: 9px 22px !important;
  border: 1px solid #a9bdcc;
  background: #fff;
  color: var(--vi-ink);
  box-shadow: none;
}
body.vi #main-body .btn-outline-secondary:hover { background: var(--vi-page); }
body.vi #main-body .btn-link { color: var(--vi-link); }

/* Shared panels/sidebar. Semantic .panel-* alerts retain their own headers. */
body.vi #main-body .card {
  margin-bottom: 24px;
  border-color: var(--vi-line);
  border-radius: 16px;
  box-shadow: none;
}
body.vi #main-body .card:not(.panel):not([class*="bg-"]) > .card-header {
  padding: 18px 20px;
  background: #f3f8fb;
  color: var(--vi-ink);
  border-bottom-color: var(--vi-line);
  border-radius: 15px 15px 0 0;
}
body.vi #main-body .card-body { padding: 20px; }
body.vi #main-body :is(.card-title,.panel-title) { margin: 0; font: 700 var(--vi-font-panel)/1.4 var(--vi-head); }
body.vi #main-body .card-footer { padding: 16px 20px; border-color: var(--vi-line); }
body.vi #main-body .card-sidebar { box-shadow: var(--vi-shadow); }
body.vi #main-body .card-sidebar .card-title { font-size: 18px; }
body.vi #main-body .list-group-item { padding: 14px 18px; border-color: var(--vi-line); overflow-wrap: anywhere; }
body.vi #main-body .card-sidebar .list-group-item:not(.active):not(.disabled) { color: var(--vi-body); }
body.vi #main-body .list-group-item.active {
  background: var(--vi-ink);
  border-color: var(--vi-ink);
  color: #fff;
}
body.vi #main-body .alert { border-radius: 12px; padding: 16px 20px; }
body.vi #main-body .nav-tabs { gap: 4px; border-color: var(--vi-line); }
body.vi #main-body .nav-tabs > li > a { padding: 12px 16px; border-radius: 10px 10px 0 0; }
body.vi #main-body .pagination .page-link { min-width: 36px; padding: 8px 12px; font-size: 14px; }

/* Account overview, lists and cart: keep responsive DataTables semantics. */
body.vi #main-body .tiles { margin: 0 0 28px; }
body.vi #main-body .tiles .tile { padding: 22px 16px; background: var(--vi-page); }
body.vi #main-body .tiles .tile a { color: var(--vi-ink); }
body.vi #main-body .tiles .tile .stat { font: 700 38px/1.15 var(--vi-head); }
body.vi #main-body .tiles .tile .title { font-size: 15px; }
body.vi #main-body .table-container { margin-bottom: 24px; }
body.vi #main-body .table { font-size: 15px; }
body.vi #main-body .table > thead > tr > th {
  padding: 14px 12px;
  background: var(--vi-page);
  color: var(--vi-ink);
  border-bottom: 1px solid #c4d2dc;
  font-weight: 500;
}
body.vi #main-body .table > tbody > tr > td { padding: 14px 12px; border-color: var(--vi-line); }
body.vi #main-body .dataTables_wrapper .dataTables_filter label .form-control { border-radius: 10px; }
body.vi #main-body .dataTables_wrapper .dataTables_length label .form-control { padding: 6px 10px; }
body.vi #main-body .dataTables_wrapper .dataTables_info {
  padding: 16px 12px !important;
  background: var(--vi-page);
  color: var(--vi-body);
  min-height: 68px;
}
body.vi #main-body .dataTables_wrapper .dataTables_filter label .form-control {
  border-color: #8397a5;
  background-position: 12px center;
}
body.vi #main-body #order-standard_cart .products .product {
  border: 1px solid var(--vi-line);
  border-radius: 16px;
  box-shadow: var(--vi-shadow);
}
body.vi #main-body #order-standard_cart .summary-container { border-radius: 16px; }

/* The active storefront uses WHMCS modern; checkout can switch to standard_cart. */
body.vi #main-body #order-modern .title-bar { margin: 0 0 32px; padding: 12px 0; }
body.vi #main-body #order-modern .title-bar h1 { color: var(--vi-ink); font: 700 40px/1.2 var(--vi-head); }
body.vi #main-body #order-modern .product {
  margin-bottom: 24px;
  padding: 28px;
  border: 1px solid var(--vi-line);
  border-top: 4px solid var(--vi-cyan);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--vi-shadow);
}
body.vi #main-body #order-modern .product .name { color: var(--vi-ink); font: 700 25px/1.3 var(--vi-head); }
body.vi #main-body #order-modern .product div.pricing { color: var(--vi-ink); font-size: 15px; line-height: 1.5; }
body.vi #main-body #order-modern .product span.pricing { font: 700 28px/1.25 var(--vi-head); }
body.vi #main-body #order-modern .product .prodfeature { display: inline-block; margin: 20px 0; padding: 14px 18px; border: 0; border-radius: 12px; background: #e9f7fb; color: var(--vi-link); }
body.vi #main-body #order-modern .product .description { margin: 16px 0 24px; color: var(--vi-body); font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
body.vi #main-body #order-modern .product .btn-success { padding: 12px 24px; background: var(--vi-cyan); border-color: var(--vi-cyan); color: #06121b; }
body.vi #main-body #order-modern .product .btn-success:hover { background: var(--vi-cyan-hover); }

/* Reading/support surfaces retain their content and action targets. */
body.vi #main-body .kb-search { margin-bottom: 32px; }
body.vi #main-body .kbcategories { row-gap: 20px; }
body.vi #main-body .kbcategories > div { padding-top: 14px; padding-bottom: 14px; }
body.vi #main-body :is(.kbcategories,.kbarticles,.kb-also-read) a { color: var(--vi-link); }
body.vi #main-body .kbarticles > a { font-weight: 500; }
body.vi #main-body .kbarticles p { margin: 8px 0 24px; color: var(--vi-muted); }
body.vi #main-body :is(.kb-article-content,.announcement article,.ticket-reply .message) {
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
body.vi #main-body :is(.kb-article-content,.announcement article,.ticket-reply .message) img { max-width: 100%; height: auto; }
body.vi #main-body :is(.kb-article-content,.ticket-reply .message) pre { max-width: 100%; overflow-x: auto; }
body.vi #main-body .kb-article-title h2 { margin-bottom: 24px; }
body.vi #main-body .kb-rate-article { padding: 20px; background: var(--vi-page); border-radius: 14px; }
body.vi #main-body .announcement { padding: 24px 0; border-bottom: 1px solid var(--vi-line); }
body.vi #main-body .announcement h1 { font: 700 28px/1.3 var(--vi-head); }
body.vi #main-body .announcement h1 a { color: var(--vi-ink); }
body.vi #main-body .ticket-reply { border-color: var(--vi-line); border-radius: 16px; }
body.vi #main-body .ticket-reply .user { border-radius: 15px 15px 0 0; }
body.vi #main-body .ticket-reply .message { padding: 24px; }
body.vi #main-body .ticket-reply .attachments { overflow-wrap: anywhere; }

/* Email preview shell only; message iframe keeps its original email formatting. */
body.vi#popup-backdrop { padding: 20px; color: var(--vi-body); font: 400 var(--vi-font-body)/1.6 var(--vi-text); }
body.vi#popup-backdrop > .card { border: 1px solid var(--vi-line); border-radius: 16px; }
body.vi#popup-backdrop .card-header { padding: 20px; background: var(--vi-ink); color: #fff; }
body.vi#popup-backdrop h2 { color: #fff; font-size: 22px; overflow-wrap: anywhere; }
body.vi#popup-backdrop .btn-primary { background: var(--vi-cyan); color: #06121b; border: 0; border-radius: 999px; padding: 12px 24px; }

@media (max-width: 767px) {
  body.vi #main-body { padding: 24px 0 36px; }
  body.vi #main-body .main-content { padding: 20px 16px; border-radius: 16px; }
  body.vi #main-body .header-lined { margin-bottom: 22px; }
  body.vi #main-body .logincontainer { margin: 0 auto; padding: 12px 0; }
  body.vi #main-body .card-body { padding: 16px; }
  body.vi #main-body .btn-primary,
  body.vi #main-body .btn-outline-secondary { padding-left: 18px !important; padding-right: 18px !important; }
  body.vi #main-body .table { font-size: 14px; }
  body.vi #main-body .table > tbody > tr > td { padding: 12px 8px; }
  body.vi #main-body .ticket-reply .message { padding: 18px 16px; }
  body.vi #main-body .kb-article-title h2 { font-size: 26px; }
  body.vi #main-body #order-modern .product { padding: 20px; }
  body.vi #main-body #order-modern .product div.pricing { float: none; text-align: left; margin-bottom: 14px; }
  body.vi #main-body .dataTables_wrapper .dataTables_filter { float: none; margin: 0 0 12px; width: 100%; }
  body.vi #main-body .dataTables_wrapper .dataTables_filter label { display: block; margin: 0; padding: 0; }
  body.vi #main-body .dataTables_wrapper .dataTables_filter label .form-control { width: 100%; }
  body.vi #main-body .dataTables_wrapper .dataTables_info { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.vi #main-body :is(a,.btn,.nav-link,.form-control,.card) { transition: none; }
  body.vi #main-body .btn:active { transform: none; }
}
@media print {
  body.vi, body.vi #main-body { background: #fff; }
  body.vi #main-body .main-content { border: 0; box-shadow: none; padding: 0; }
}

/* Keep inner-page navigation reachable at narrow widths and by keyboard. */
body.vi :is(#header a, .navbar-toggle, .navbar-offcanvas a):focus-visible {
  outline: 3px solid #8bdcf5;
  outline-offset: 2px;
}
@media (max-width: 1024px) {
  body.vi .navbar-offcanvas:not(.in):not(.show) { visibility: hidden; }
  body.vi .navbar-offcanvas:is(.in, .show) { visibility: visible; }
}
@media (max-width: 767px) {
  body.vi #header ul.top-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    float: none;
    width: 100%;
    white-space: normal;
  }
  body.vi #header ul.top-nav > li.primary-action { padding-left: 0; margin-left: 0; }
  body.vi #header ul.top-nav > li > a { padding: 6px; }
}

/* Make help categories easy to scan and keep signup controls legible. */
body.vi #main-body .kbcategories { row-gap: 12px; margin-bottom: 28px; }
body.vi #main-body .kbcategories > div { padding-top: 0; padding-bottom: 0; }
body.vi #main-body .kbcategories > div > a:first-child {
  display: flex; align-items: center; gap: 10px; min-height: 54px;
  padding: 12px 14px; border: 1px solid var(--vi-line); border-radius: 10px;
  background: var(--vi-page); font-weight: 500;
}
body.vi #main-body .kbcategories > div > a:first-child:hover { border-color: var(--vi-link); background: #eef8fc; }
body.vi #main-body .kbcategories p { margin: 8px 14px 0; }
body.vi #main-body .kbcategories p:empty { display: none; }
body.vi #main-body .btn-twitter { background-color: #146b92; border-color: #146b92; color: #fff; }
body.vi #main-body .btn-twitter:hover { background-color: #105574; border-color: #105574; }
body.vi #main-body .vv-src-pill { min-height: 44px; }
/* Cart-only visual polish; preserves existing content and actions. */
body.vi #main-body #order-modern:has(.product) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
body.vi #main-body #order-modern:has(.product) > .title-bar {
  grid-column: 1 / -1;
  margin-bottom: 12px;
}
body.vi #main-body #order-modern:has(.product) > .row { display: contents; }
body.vi #main-body #order-modern:has(.product) > .row > .col-md-6 {
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
  display: flex;
}
body.vi #main-body #order-modern:has(.product) .product {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 24px;
}
body.vi #main-body #order-modern:has(.product) .product > .name {
  order: 0;
  float: none;
  margin: 0 0 12px;
}
body.vi #main-body #order-modern:has(.product) .product > div.pricing {
  order: 1;
  float: none;
  width: auto;
  text-align: left;
  margin: 0 0 20px;
  line-height: 1.5;
}
body.vi #main-body #order-modern:has(.product) .product > div.pricing > span.pricing {
  float: none;
  display: block;
  width: auto;
  text-align: left;
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 4px;
}
body.vi #main-body #order-modern:has(.product) .product > div.pricing > br { display: none; }
body.vi #main-body #order-modern:has(.product) .product > .prodfeature {
  order: 2;
  display: block;
  width: 100%;
  margin: 0 0 20px;
  box-sizing: border-box;
}
body.vi #main-body #order-modern:has(.product) .product > .clear { display: none; }
body.vi #main-body #order-modern:has(.product) .product > .description {
  order: 3;
  margin: 0 0 24px;
  overflow-wrap: anywhere;
}
body.vi #main-body #order-modern:has(.product) .product > .text-right {
  order: 4;
  margin-top: auto;
}
body.vi #main-body #order-modern:has(.product) .choosecat > .dropdown-toggle {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #b6ceda;
  border-radius: 12px;
  color: #0a2635;
  background: #f4f9fc;
}
body.vi #main-body #order-modern:has(.product) .choosecat > .dropdown-toggle::after { display: none; }
body.vi #main-body #order-modern:has(.product) .choosecat > .dropdown-menu {
  left: 0;
  right: 0;
  min-width: 100%;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid #d9e5ed;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(7, 30, 44, .12);
}
body.vi #main-body #order-modern:has(.product) .choosecat > .dropdown-menu > li > a {
  display: block;
  padding: 12px;
  border-radius: 7px;
  color: #0a2635;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}
body.vi #main-body #order-modern:has(.product) .choosecat > .dropdown-menu > li > a:hover,
body.vi #main-body #order-modern:has(.product) .choosecat > .dropdown-menu > li > a:focus {
  background: #e8f7fc;
}
@media (max-width: 991px) {
  body.vi #main-body #order-modern:has(.product) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.vi #main-body #order-modern:has(.product) .product { padding: 24px; }
}
/* Bootstrap clearfix pseudo-elements must not become grid items. */
body.vi #main-body #order-modern:has(.product) > .row::before,
body.vi #main-body #order-modern:has(.product) > .row::after { display: none; }
body.vi #main-body .control.vv-src-group { display: block; margin-right: 0; }
body.vi #main-body .vv-src-group > label { display: block; margin-bottom: 10px; }
@media (max-width: 1024px) {
  /* The open menu must sit above the warning banner's stacking context. */
  body.vi header nav.navbar:has(.navbar-offcanvas:is(.in, .show)) { z-index: 1001 !important; }
}

/* Legacy service modules use panels and heading tags for metadata roles. */
body.vi #main-body .panel-body { font-size: var(--vi-font-body); line-height: 1.6; }
body.vi #main-body .product-details > .row > .text-center > h4 {
  margin: 18px 0 4px;
  color: var(--vi-muted);
  font: 500 var(--vi-font-meta)/1.5 var(--vi-text);
}
body.vi #main-body .product-details .product-icon > h4 { font: 400 var(--vi-font-body)/1.5 var(--vi-text); }
body.vi #main-body #v2raysocks #app_name { font: 700 var(--vi-font-subheading)/1.4 var(--vi-head); }
@media (max-width: 767px) {
  body.vi #main-body #v2raysocks .table { display: block; max-width: 100%; overflow-x: auto; }
}
@media (max-width: 575px) {
  body.vi #main-body #v2raysocks #connection_info .media { flex-direction: column; align-items: stretch !important; gap: 16px; }
  body.vi #main-body #v2raysocks #connection_info .media-body { width: 100%; min-width: 0; }
  body.vi #main-body #v2raysocks #app_img { width: 64px; height: 64px; object-fit: contain; }
}

/* Let the responsive chart keep its rendered aspect ratio; the legacy theme
   forced 408px height even when Chart.js rendered a short mobile canvas. */
body.vi #main-body #usageDayChart { width: 100% !important; height: auto !important; }
body.vi #main-body #usage_day_ranges { display: flex; flex-wrap: wrap; gap: 6px; }
body.vi #main-body #usage_day_ranges .usage-range-btn {
  min-width: 44px; min-height: 40px; margin: 0; padding: 8px 14px;
  border: 1px solid var(--vi-line); border-radius: 8px !important;
  background: var(--vi-page); color: var(--vi-body);
  font: 500 var(--vi-font-meta)/1.4 var(--vi-text);
}
body.vi #main-body #usage_day_ranges .usage-range-btn.active { background: var(--vi-ink); border-color: var(--vi-ink); color: #fff; }
body.vi #main-body #usage_day_summary { color: var(--vi-muted); font-size: var(--vi-font-meta); line-height: 1.6; }