@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@500&family=DM+Sans:wght@400;500;700&display=swap');
/* Viva theme */
/*
 * Viva Hosting billing theme (WHMCS Nexus client area, cart and checkout) in the VHBuilder look.
 * Appended after Nexus's own custom.css by ops/whmcs-theme.sh, so these values replace Nexus's palette.
 * Dark is the default; data-theme="light" on <html> switches it (see theme-toggle.js).
 * Change colours here, in the two token blocks, and run whmcs/theme/tests/contrast.test.mjs.
 */

:root,
:root[data-theme="dark"] {
  --bg: #1e1e1e;
  --bg-muted: #181818;
  --bg-lifted: #252526;
  --bg-accented: #2d2d30;
  --bg-inverted: #f0ede8;
  --text: #d6d3ce;
  --text-muted: #9aa0a6;
  --text-lifted: #e4e0da;
  --text-accented: #f0ede8;
  --text-inverted: #111111;
  --border: #3e3e42;
  --border-muted: #333337;
  --border-lifted: #4a4a4f;
  --border-accented: #5a5a60;
  --primary: #ff6600;
  --primary-lifted: #ff8533;
  --primary-accented: #d55500;
  --primary-text: #111111;
  --link: #ff8533;
  --secondary: #9aa0a6;
  --secondary-lifted: #b4b9be;
  --secondary-accented: #cdd1d4;
  --neutral: #9aa0a6;
  --neutral-lifted: #b4b9be;
  --neutral-accented: #cdd1d4;
  --grayscale: #e4e0da;
  --grayscale-lifted: #f0ede8;
  --grayscale-accented: #ffffff;
  --success: #46aa64;
  --success-lifted: #5bbd78;
  --success-accented: #3a9456;
  --info: #ff6600;
  --info-lifted: #ff8533;
  --info-accented: #d55500;
  --notice: #d68b32;
  --notice-lifted: #e09c48;
  --notice-accented: #bf7a28;
  --warning: #d68b32;
  --warning-lifted: #e09c48;
  --warning-accented: #bf7a28;
  --error: #e75d52;
  --error-lifted: #ee766c;
  --error-accented: #c9453b;
  --viva-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(255 102 0 / .06);
  --viva-shadow-float: 0 2px 4px rgb(0 0 0 / .5), 0 16px 40px rgb(255 102 0 / .10);
  --viva-grain: .05;
  --viva-glow-1: .10;
  --viva-glow-2: .06;
}

:root[data-theme="light"] {
  --bg: #fbf9f6;
  --bg-muted: #f3efe9;
  --bg-lifted: #ffffff;
  --bg-accented: #e9e3da;
  --bg-inverted: #1e1e1e;
  --text: #2a2723;
  --text-muted: #5f5a52;
  --text-lifted: #3b3731;
  --text-accented: #111111;
  --text-inverted: #f0ede8;
  --border: #d9d2c7;
  --border-muted: #e6e0d6;
  --border-lifted: #c4bbad;
  --border-accented: #8f867a;
  --primary: #ff6600;
  --primary-lifted: #ff8533;
  --primary-accented: #d55500;
  --primary-text: #111111;
  --link: #b94700;
  --secondary: #5f5a52;
  --secondary-lifted: #4a4640;
  --secondary-accented: #35322d;
  --neutral: #5f5a52;
  --neutral-lifted: #4a4640;
  --neutral-accented: #35322d;
  --grayscale: #2a2723;
  --grayscale-lifted: #3b3731;
  --grayscale-accented: #111111;
  --success: #1f7a3d;
  --success-lifted: #19652f;
  --success-accented: #145226;
  --info: #b94700;
  --info-lifted: #9c3b00;
  --info-accented: #7f3000;
  --notice: #8a5300;
  --notice-lifted: #704300;
  --notice-accented: #573400;
  --warning: #8a5300;
  --warning-lifted: #704300;
  --warning-accented: #573400;
  --error: #c0261b;
  --error-lifted: #a21e14;
  --error-accented: #84170f;
  --viva-shadow: 0 1px 2px rgb(60 40 20 / .08), 0 8px 24px rgb(185 71 0 / .08);
  --viva-shadow-float: 0 2px 4px rgb(60 40 20 / .10), 0 16px 40px rgb(185 71 0 / .12);
  --viva-grain: .03;
  --viva-glow-1: .05;
  --viva-glow-2: .03;
}

:root {
  --viva-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --viva-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --viva-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --viva-radius: 12px;
  --viva-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---- Page ------------------------------------------------------------------------------------------------------ */
html, body { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--viva-body);
  line-height: 1.7;

  &::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--viva-grain);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
}

/* The cart pages (standard_cart/nexus_cart stylesheets) paint their own white page area */
body section#main-body,
#main-body,
#order-standard_cart,
.cart-body {
  background-color: transparent !important;
  color: var(--text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.header-lined h1 {
  font-family: var(--viva-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--text-accented);
}

a {
  color: var(--link);
  transition: opacity .2s ease;

  &:hover { color: var(--primary); opacity: .9; }
  &:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
}

/* ---- Header and navigation ------------------------------------------------------------------------------------- */
.header,
.header .navbar,
.main-navbar-wrapper {
  background: var(--bg-lifted);
  border-color: var(--border);
}
.header { border-bottom: 1px solid var(--border); box-shadow: var(--viva-shadow); }
.main-navbar-wrapper { border-top: 1px solid var(--border-muted); }

.navbar .nav-link,
.main-navbar-wrapper .navbar-nav > li > a {
  color: var(--text);
  min-height: 44px;
  display: inline-flex;
  align-items: center;

  &:hover { color: var(--primary); }
  &:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
}
.main-navbar-wrapper .navbar-nav > li > a {
  font-family: var(--viva-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 0 12px;
}

.dropdown-menu {
  background: var(--bg-lifted);
  border: 1px solid var(--border);
  border-radius: var(--viva-radius);
  box-shadow: var(--viva-shadow-float);

  .dropdown-item, a { color: var(--text); }
  .dropdown-item:hover, .dropdown-item:focus-visible, a:hover { background: var(--bg-accented); color: var(--primary); }
  .dropdown-divider { border-color: var(--border-muted); }
}

.viva-theme-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .2s var(--viva-spring), opacity .2s ease;

  &:hover { color: var(--primary); transform: translateY(-1px); }
  &:active { transform: translateY(1px) scale(.96); }
  &:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
}
.viva-theme-floating {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1050;
  background: var(--bg-lifted);
  box-shadow: var(--viva-shadow-float);
}

/* ---- Surfaces -------------------------------------------------------------------------------------------------- */
.card,
.panel,
.modal-content,
.list-group-item,
.sidebar .card {
  background: var(--bg-lifted);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--viva-radius);
}
.card, .panel { box-shadow: var(--viva-shadow); }
.card-header, .panel-heading, .modal-header, .modal-footer {
  background: var(--bg-muted);
  border-color: var(--border-muted);
  color: var(--text-accented);
}
.card-title, .panel-title { font-family: var(--viva-display); font-weight: 400; letter-spacing: -0.03em; }

/* ---- Tables ---------------------------------------------------------------------------------------------------- */
.table {
  color: var(--text);

  th, td { border-color: var(--border-muted); }
  thead th {
    font-family: var(--viva-mono);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
  }
  &.table-striped tbody tr:nth-of-type(odd), tbody tr:hover { background: var(--bg-muted); }
}

/* ---- Forms ----------------------------------------------------------------------------------------------------- */
.form-control,
.custom-select,
.input-group-text,
select, textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"] {
  background: var(--bg-muted);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 44px;

  &::placeholder { color: var(--text-muted); }
  &:focus, &:focus-visible {
    background: var(--bg-muted);
    color: var(--text);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgb(255 102 0 / .25);
    outline: none;
  }
}
label, .col-form-label { color: var(--text-lifted); }

/* ---- Buttons --------------------------------------------------------------------------------------------------- */
.btn {
  min-height: 44px;
  border-radius: 8px;
  font-weight: 500;
  transition: transform .2s var(--viva-spring), opacity .2s ease;

  &:active { transform: translateY(1px); }
  &:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: none; }
}
.btn-primary, .btn-info, .btn-success {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);

  &:hover { background: var(--primary-lifted); border-color: var(--primary-lifted); color: var(--primary-text); transform: translateY(-1px); }
  &:active { background: var(--primary-accented); border-color: var(--primary-accented); }
}
.btn-default, .btn-secondary, .btn-outline-primary, .btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--border-lifted);
  color: var(--text);

  &:hover { background: var(--bg-accented); color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
}
.btn-danger { background: var(--error); border-color: var(--error); color: #ffffff; &:hover { background: var(--error-lifted); border-color: var(--error-lifted); } }

/* ---- Badges, labels, alerts ------------------------------------------------------------------------------------ */
.badge, .label, .status {
  font-family: var(--viva-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
}
.badge-success, .label-success, .status-active, .status-paid { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.badge-danger, .label-danger, .status-unpaid, .status-overdue, .status-cancelled { background: color-mix(in srgb, var(--error) 18%, transparent); color: var(--error); }
.badge-warning, .label-warning, .status-pending, .status-suspended { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.badge-info, .badge-primary { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--link); }
.badge-dark { background: var(--primary); color: var(--primary-text); }

.alert {
  border-radius: var(--viva-radius);
  border: 1px solid var(--border);
  background: var(--bg-lifted);
  color: var(--text);
}
.alert-success { border-color: var(--success); }
.alert-danger, .alert-error { border-color: var(--error); }
.alert-warning { border-color: var(--warning); }
.alert-info { border-color: var(--primary); }

/* ---- Client area pieces that carry their own surface -------------------------------------------------------------
   Found by scanning the logged-in pages for large surfaces of the wrong brightness (see whmcs/theme/README.md). */
.topbar {
  background: var(--bg-muted) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border-muted);

  a, .btn, .input-group-text { color: var(--text-lifted); }
}

a.tile, .tile {
  background: var(--bg-lifted) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-muted);
  border-radius: var(--viva-radius);

  .icon, i { color: var(--border-lifted) !important; }
  &:hover { background: var(--bg-accented) !important; }
}

#main-body .card-header,
#main-body .card-footer,
#main-body .panel-heading,
#main-body .panel-footer {
  background: var(--bg-muted) !important;
  color: var(--text-accented) !important;
  border-color: var(--border-muted) !important;
}
#main-body .card-title, #main-body .card-header h3, #main-body .panel-title { color: var(--text-accented) !important; }

:is(.btn-primary, .btn-success, .btn-info):not(.disabled):not(:disabled),
input.btn.btn-success {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-text) !important;

  &:hover { background: var(--primary-lifted) !important; border-color: var(--primary-lifted) !important; }
}

.btn-default, .btn-light, a.btn.btn-default[class*="bg-color"] {
  background: transparent !important;
  border: 1px solid var(--border-lifted) !important;
  color: var(--text) !important;

  &:hover { background: var(--bg-accented) !important; color: var(--primary) !important; border-color: var(--primary) !important; }
}

table.dataTable thead th, .table thead th {
  background: var(--bg-muted) !important;
  color: var(--text-muted);
}
td.dataTables_empty, table.dataTable tbody td { background: transparent !important; }

.page-link {
  background: var(--bg-lifted) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;

  &:hover { background: var(--bg-accented) !important; color: var(--primary) !important; }
}
.page-item.active .page-link { background: var(--primary) !important; border-color: var(--primary) !important; color: var(--primary-text) !important; }

body .md-editor .md-header, body .md-editor .md-footer, div.md-header.btn-toolbar, .md-header, .md-footer, .custom-file-label, .dataTables_filter input {
  background: var(--bg-muted) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ---- Footer and misc ------------------------------------------------------------------------------------------- */
#footer.footer {
  background: var(--bg-muted) !important;
  color: var(--text-muted);
  border-top: 1px solid var(--border);

  .nav-link { padding: .5rem 1rem; }
  .nav-link, a { color: var(--text-lifted) !important; &:hover { color: var(--primary) !important; } }
  .copyright { color: var(--text-muted) !important; }
  .btn-outline-light {
    background: transparent;
    border: 1px solid var(--border-lifted);
    color: var(--text) !important;

    &:hover { background: var(--bg-accented); color: var(--primary) !important; border-color: var(--primary); }
  }
}
hr { border-color: var(--border-muted); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/*
 * Cart, checkout and store pages (WHMCS standard_cart / nexus_cart) in the Viva theme.
 * Built into viva-theme.css by ops/lib/theme-build.sh, so it loads last in <head> on every client-area page and
 * follows the light/dark toggle. All colours come from the theme tokens in viva-theme.css; no hex values here.
 */

/* Short names used by the rules below, mapped onto the theme tokens */
:root {
  --vhc-bg: var(--bg-muted);
  --vhc-surface: var(--bg-lifted);
  --vhc-surface-raised: var(--bg-accented);
  --vhc-input: var(--bg-muted);
  --vhc-border: var(--border);
  --vhc-text: var(--text);
  --vhc-text-bright: var(--text-accented);
  --vhc-text-muted: var(--text-muted);
  --vhc-brand: var(--primary);
  --vhc-brand-hover: var(--primary-lifted);
  --vhc-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --vhc-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

/* ---- Nexus cart tokens ---------------------------------------------------------------------------------------- */
/* The cart view page is Nexus's own JavaScript component. It takes every colour from these tokens (set on :root, so they
   reach inside it). Nexus's own file, which comes before this one, maps them to WHMCS's defaults; these replace them. */
:root,
:host {
  --vl-primary: var(--primary);
  --vl-primary-lifted: var(--primary-lifted);
  --vl-primary-accented: var(--primary-accented);
  --vl-secondary: var(--secondary);
  --vl-secondary-lifted: var(--secondary-lifted);
  --vl-secondary-accented: var(--secondary-accented);
  --vl-neutral: var(--neutral);
  --vl-neutral-lifted: var(--neutral-lifted);
  --vl-neutral-accented: var(--neutral-accented);
  --vl-grayscale: var(--grayscale);
  --vl-grayscale-lifted: var(--grayscale-lifted);
  --vl-grayscale-accented: var(--grayscale-accented);
  --vl-success: var(--success);
  --vl-success-lifted: var(--success-lifted);
  --vl-success-accented: var(--success-accented);
  --vl-info: var(--info);
  --vl-info-lifted: var(--info-lifted);
  --vl-info-accented: var(--info-accented);
  --vl-notice: var(--notice);
  --vl-notice-lifted: var(--notice-lifted);
  --vl-notice-accented: var(--notice-accented);
  --vl-warning: var(--warning);
  --vl-warning-lifted: var(--warning-lifted);
  --vl-warning-accented: var(--warning-accented);
  --vl-error: var(--error);
  --vl-error-lifted: var(--error-lifted);
  --vl-error-accented: var(--error-accented);
  --vl-text: var(--text);
  --vl-text-muted: var(--text-muted);
  --vl-text-lifted: var(--text-lifted);
  --vl-text-accented: var(--text-accented);
  --vl-text-inverted: var(--text-inverted);
  --vl-bg: var(--bg);
  --vl-bg-muted: var(--bg-muted);
  --vl-bg-lifted: var(--bg-lifted);
  --vl-bg-accented: var(--bg-accented);
  --vl-bg-inverted: var(--bg-inverted);
  --vl-border: var(--border);
  --vl-border-muted: var(--border-muted);
  --vl-border-lifted: var(--border-lifted);
  --vl-border-accented: var(--border-accented);
  --vl-rounding-sm: 6px;
  --vl-rounding-md: 8px;
  --vl-rounding-lg: 12px;
}

/* ---- Page ------------------------------------------------------------------------------------------------- */
/* One soft glow, fixed to the window so it never ends in a seam; the page layers above it are transparent */
html {
  background:
    radial-gradient(circle at 15% 8%, rgb(255 102 0 / var(--viva-glow-1)) 0%, transparent 34%),
    radial-gradient(circle at 85% 70%, rgb(255 102 0 / var(--viva-glow-2)) 0%, transparent 40%),
    var(--vhc-bg) fixed !important;
}

body,
body.primary-bg-color,
body section#main-body,
#main-body {
  background: transparent !important;
  color: var(--vhc-text);
}

#header,
header#header,
.header {
  background: var(--bg-muted) !important;
  border-bottom: 1px solid var(--vhc-border);
}

#header a,
#header .nav-link,
#header .navbar a {
  color: var(--vhc-text) !important;
}

#header a:hover {
  color: var(--vhc-brand) !important;
}

.master-breadcrumb {
  background: var(--vhc-surface) !important;
  border-bottom: 1px solid var(--vhc-border);
}

.master-breadcrumb a,
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item.active {
  color: var(--vhc-text-muted) !important;
}

#footer,
footer#footer {
  background: var(--bg-muted) !important;
  border-top: 1px solid var(--vhc-border);
}

#footer a,
#footer p,
#footer .nav-link {
  color: var(--vhc-text-muted) !important;
}

/* ---- Cart content ----------------------------------------------------------------------------------------- */
#order-standard_cart,
#order-standard_cart .cart-body,
#order-standard_cart .secondary-cart-body {
  color: var(--vhc-text);
}

#order-standard_cart a {
  color: var(--vhc-brand);
}

#order-standard_cart a:hover {
  color: var(--vhc-brand-hover);
}

#order-standard_cart .header-lined h1,
#order-standard_cart .header-lined h1 small {
  font-family: var(--vhc-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--vhc-text-bright);
  font-size: clamp(40px, 5vw, 58px);
  line-height: 1;
}

#order-standard_cart .header-lined {
  border-bottom: 1px solid var(--vhc-border);
}

#order-standard_cart .header-lined p {
  color: var(--vhc-text-muted);
  line-height: 1.7;
}

/* Section headings ("Personal Information", "Additional Information", ...) */
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading-borderless {
  border-top-color: var(--vhc-border);
}

#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading-borderless span {
  background: var(--bg) !important;
  color: var(--vhc-brand) !important;
  font-family: var(--vhc-mono);
  line-height: 1.2;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#order-standard_cart .product-info,
#order-standard_cart .product-title,
#order-standard_cart .product-info p {
  color: var(--vhc-text);
}

#order-standard_cart .product-info {
  background: var(--vhc-surface);
  border: 1px solid var(--vhc-border);
  border-radius: 10px;
  padding: 18px 20px;
  line-height: 1.7;
}

#order-standard_cart .product-title {
  font-family: var(--vhc-display);
  font-size: 30px;
  letter-spacing: 0.01em;
  color: var(--vhc-text-bright);
}

/* ---- Forms ------------------------------------------------------------------------------------------------ */
#order-standard_cart .form-control,
#order-standard_cart .custom-select,
#order-standard_cart select,
#order-standard_cart textarea,
#order-standard_cart .field,
#order-standard_cart .intl-tel-input input {
  background: var(--vhc-input) !important;
  border: 1px solid var(--vhc-border) !important;
  color: var(--vhc-text-bright) !important;
  border-radius: 6px;
  box-shadow: none;
}

#order-standard_cart .form-control:focus,
#order-standard_cart .custom-select:focus,
#order-standard_cart .field:focus,
#order-standard_cart textarea:focus {
  border-color: var(--vhc-brand) !important;
  outline: 2px solid rgba(255, 102, 0, 0.35);
  outline-offset: 0;
}

#order-standard_cart .form-control::placeholder,
#order-standard_cart .field::placeholder {
  color: var(--vhc-text-muted);
}

#order-standard_cart .field-icon,
#order-standard_cart .prepend-icon .field-icon i {
  color: var(--vhc-text-muted);
}

#order-standard_cart label,
#order-standard_cart .col-form-label,
#order-standard_cart .checkbox-inline,
#order-standard_cart .radio-inline {
  color: var(--vhc-text);
}

/* ---- Buttons ---------------------------------------------------------------------------------------------- */
#order-standard_cart .btn-primary,
#order-standard_cart .btn-order-now,
#order-standard_cart .btn-checkout,
#order-standard_cart #btnCompleteOrder,
#order-standard_cart #btnCompleteProductConfig {
  background: var(--vhc-brand) !important;
  border: 1px solid var(--vhc-brand) !important;
  color: var(--primary-text) !important;
  font-weight: 600;
  border-radius: 6px;
  transition: background 120ms ease, transform 80ms ease;
}

#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-order-now:hover,
#order-standard_cart #btnCompleteOrder:hover,
#order-standard_cart #btnCompleteProductConfig:hover {
  background: var(--vhc-brand-hover) !important;
  border-color: var(--vhc-brand-hover) !important;
}

#order-standard_cart .btn-primary:focus-visible,
#order-standard_cart .btn:focus-visible {
  outline: 2px solid var(--vhc-text-bright);
  outline-offset: 2px;
}

#order-standard_cart .btn-primary:active {
  transform: translateY(1px);
}

#order-standard_cart .btn-default,
#order-standard_cart .btn-info,
#order-standard_cart .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--vhc-border) !important;
  color: var(--vhc-text) !important;
  border-radius: 6px;
}

#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-info:hover,
#order-standard_cart .btn-secondary:hover {
  border-color: var(--vhc-brand) !important;
  color: var(--vhc-brand) !important;
}

/* ---- Order summary and panels ----------------------------------------------------------------------------- */
#order-standard_cart .order-summary {
  background: var(--vhc-surface);
  border: 1px solid var(--vhc-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 48px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 102, 0, 0.05);
}

#order-standard_cart .order-summary h2 {
  background: var(--vhc-surface-raised);
  color: var(--vhc-text-bright);
  font-family: var(--vhc-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--vhc-border);
}

#order-standard_cart .summary-container,
#order-standard_cart .order-summary .summary-container {
  background: transparent;
  color: var(--vhc-text);
  border-color: var(--vhc-border);
}

#order-standard_cart .order-summary .total-due-today,
#order-standard_cart .order-summary .amt {
  color: var(--vhc-text-bright);
}

#order-standard_cart .panel,
#order-standard_cart .card {
  background: var(--vhc-surface);
  border: 1px solid var(--vhc-border);
  border-radius: 10px;
  color: var(--vhc-text);
}

#order-standard_cart .panel-heading,
#order-standard_cart .card-header {
  background: var(--vhc-surface-raised);
  border-bottom: 1px solid var(--vhc-border);
  color: var(--vhc-text-bright);
}

#order-standard_cart .list-group-item {
  background: transparent;
  border-color: var(--vhc-border);
  color: var(--vhc-text);
}

/* The Viva store's category and action menus mean nothing in a VHBuilder checkout. The currency chooser stays,
   because prices are set per currency. */
#order-standard_cart .cart-sidebar .card-sidebar:not([menuItemName="Choose Currency"]) {
  display: none;
}

/* ---- Notices ---------------------------------------------------------------------------------------------- */
#order-standard_cart .alert {
  border-radius: 8px;
  border: 1px solid var(--vhc-border);
}

#order-standard_cart .alert-warning,
#order-standard_cart .alert-info {
  background: rgba(214, 139, 50, 0.10);
  border-color: rgba(214, 139, 50, 0.45);
  color: var(--warning-lifted);
}

#order-standard_cart .alert-success {
  background: rgba(70, 170, 100, 0.10);
  border-color: rgba(70, 170, 100, 0.40);
  color: var(--success-lifted);
}

#order-standard_cart .alert-danger {
  background: rgba(226, 85, 74, 0.10);
  border-color: rgba(226, 85, 74, 0.45);
  color: var(--error-lifted);
}

#order-standard_cart .alert-link {
  color: inherit;
  text-decoration: underline;
}

/* ---- Overrides for parts the cart styles with higher specificity ------------------------------------------- */
#order-standard_cart .panel-heading,
#order-standard_cart .card-header,
#order-standard_cart .card-sidebar .panel-heading {
  background: var(--vhc-surface-raised) !important;
  border-bottom: 1px solid var(--vhc-border) !important;
}

#order-standard_cart .panel-title,
#order-standard_cart .panel-title i,
#order-standard_cart h3.panel-title {
  color: var(--vhc-text-bright) !important;
}

#order-standard_cart .product-info,
#order-standard_cart .order-summary,
#order-standard_cart #producttotal,
#order-standard_cart .summary-container {
  background: var(--vhc-surface) !important;
  color: var(--vhc-text) !important;
  border-color: var(--vhc-border) !important;
}

#order-standard_cart .order-summary h2,
#order-standard_cart h2.font-size-30 {
  background: var(--vhc-surface-raised) !important;
  color: var(--vhc-text-bright) !important;
}

#order-standard_cart .order-summary .summary-totals,
#order-standard_cart .order-summary hr,
#order-standard_cart .summary-container hr {
  border-color: var(--vhc-border) !important;
}

#order-standard_cart .form-group label,
#order-standard_cart label,
#order-standard_cart .field-help-text,
#order-standard_cart .col-form-label {
  color: var(--vhc-text) !important;
}

#order-standard_cart .sub-heading i,
#order-standard_cart .sub-heading small,
#order-standard_cart .sub-heading-borderless small {
  font-family: inherit;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vhc-text-muted) !important;
}

.master-breadcrumb .breadcrumb,
.master-breadcrumb .container,
.master-breadcrumb nav {
  background: transparent !important;
}

#order-standard_cart ~ .powered-by,
.powered-by,
.powered-by a,
#main-body a[href*="whmcs.com"] {
  color: var(--vhc-text-muted) !important;
}

/* Checkout details: password strength bar, card fields, the mailing-list switch, the terms tick-box */
#order-standard_cart .progress,
#order-standard_cart .cc-input-container,
#order-standard_cart ul.selected {
  background: var(--vhc-input) !important;
  border-color: var(--vhc-border) !important;
  color: var(--vhc-text) !important;
}

#order-standard_cart .bootstrap-switch,
#order-standard_cart .bootstrap-switch .bootstrap-switch-handle-off,
#order-standard_cart .bootstrap-switch .bootstrap-switch-label {
  background: var(--vhc-surface-raised) !important;
  color: var(--vhc-text) !important;
  border-color: var(--vhc-border) !important;
}

#order-standard_cart #accepttos {
  accent-color: var(--vhc-brand);
}

/* ---- Header search ------------------------------------------------------------------------------------------ */
#header .form-control,
#header input[type="text"],
#header input[type="search"] {
  background: var(--vhc-input) !important;
  border: 1px solid var(--vhc-border) !important;
  color: var(--vhc-text-bright) !important;
}

#header .form-control::placeholder {
  color: var(--vhc-text-muted);
}

#header .btn,
#header .input-group-text {
  background: var(--vhc-surface-raised) !important;
  border-color: var(--vhc-border) !important;
  color: var(--vhc-text) !important;
}

/* ---- Small screens ---------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #order-standard_cart .header-lined h1 {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #order-standard_cart .btn {
    transition: none;
  }
}

/* ---- Store product cards and small screens -------------------------------------------------------------------- */
#order-standard_cart .products .product header,
#order-standard_cart .products .product header span {
  background: var(--bg-accented) !important;
  color: var(--text-accented) !important;
}

#order-standard_cart .products .product {
  background: var(--bg-lifted) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--viva-radius);
  overflow: hidden;
}

@media (max-width: 767px) {
  #order-standard_cart { padding-left: 12px; padding-right: 12px; }
}

/* The collapsed main menu leaves an empty bar on phones and tablets: close it up while it is shut */
@media (max-width: 1199px) {
  .main-navbar-wrapper:has(.navbar-collapse:not(.show)) {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    border-top: 0;
  }
}

/* ---- Fields on every page (register, contact, tickets) --------------------------------------------------------- */
#main-body .form-control,
#main-body .field,
#main-body .custom-select,
#main-body select,
#main-body textarea,
#main-body input[type="text"],
#main-body input[type="email"],
#main-body input[type="password"],
#main-body input[type="tel"],
#main-body input[type="number"],
#main-body input[type="search"],
#main-body .intl-tel-input input {
  background-color: var(--bg-muted) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

#main-body .form-control::placeholder,
#main-body .field::placeholder,
#main-body textarea::placeholder {
  color: var(--text-muted) !important;
}

#main-body .intl-tel-input .selected-flag,
#main-body .intl-tel-input .flag-container .selected-flag {
  background-color: var(--bg-accented) !important;
}

/* ---- The plan-link token (also in the VHBuilder order form; kept here because that file's URL is cached) ------- */
#order-standard_cart .form-group:has(#customfield449),
#order-standard_cart .form-group:has(#customfield450),
#order-standard_cart .form-group:has(#customfield451) {
  display: none;
}

#order-standard_cart .field-container:has(:is(#customfield449, #customfield450, #customfield451)):not(:has(.form-group:not(:has(:is(#customfield449, #customfield450, #customfield451))))) {
  display: none;
}

#order-standard_cart .sub-heading:has(+ .field-container:has(:is(#customfield449, #customfield450, #customfield451)):not(:has(.form-group:not(:has(:is(#customfield449, #customfield450, #customfield451)))))) {
  display: none;
}