/* v3.2.4: one fixed-header layout for all WHMCS page shells.
   Header styling/footer remain v3.2.3; no new stylesheets or JS. */
body.vx-theme{--vx-html-topbar-height:36px;--vx-html-topbar-offset:calc(var(--vx-html-topbar-height) + 1px)}
body.vx-theme .vh-topbar,body.vx-theme .vh-topbar *{box-sizing:border-box}
body.vx-theme .vh-topbar{position:fixed;top:0;left:0;right:0;z-index:1039;width:100%;background:#080d12;color:#c9d0d7;border-bottom:1px solid rgba(255,255,255,.07);font-family:"DM Sans",Arial,sans-serif;letter-spacing:normal}
body.vx-theme .vh-topbar .vh-container{width:min(calc(100% - 48px),1420px);max-width:1420px;margin-inline:auto}
body.vx-theme .vh-topbar__inner{height:var(--vx-html-topbar-height);display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:13px;line-height:1.2;font-weight:500}
body.vx-theme .vh-topbar__left,body.vx-theme .vh-topbar__right{display:flex;align-items:center;gap:20px;min-width:0}
body.vx-theme .vh-topbar__lead{display:flex;align-items:center;gap:9px;color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap;text-decoration:none}
body.vx-theme .vh-status-dot{display:inline-block;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#da7826;box-shadow:0 0 0 4px rgba(218,120,38,.12)}
body.vx-theme .vh-topbar__lead-short{display:none}
body.vx-theme .vh-topbar__right .vh-topbar__support{color:#aeb7c1;white-space:nowrap}
body.vx-theme .vh-topbar a{transition:color .18s ease;text-decoration:none}
body.vx-theme .vh-topbar a:hover{color:#fff}
body.vx-theme .vh-topbar__right a{color:#d9dee4;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12.5px}
body.vx-theme .vh-topbar__link-icon{display:block;flex:0 0 15px;width:15px;height:15px;color:inherit;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.vx-theme .vh-topbar a:focus-visible{outline:2px solid #da7826;outline-offset:2px}
/* Reserve the top-bar's former in-flow height exactly once for every page type.
   This stops long DNS tables / invoices from scrolling into the top-bar area. */
body.vx-theme{padding-top:var(--vx-html-topbar-offset)!important}
/* Customer dashboard: customer header remains fixed and directly touches the dark strip.
   Sidebar/mobile backdrop begin below both headers; client-main retains its native
   --vxc-topbar padding so no second offset is added. */
body.vx-theme.vx-logged-in .vx-client-topbar{position:fixed!important;top:var(--vx-html-topbar-offset)!important;z-index:1038!important}
body.vx-theme.vx-logged-in .vx-client-sidebar{top:calc(var(--vxc-topbar,60px) + var(--vx-html-topbar-offset))!important}
body.vx-theme.vx-logged-in .vx-mobile-backdrop{top:calc(var(--vxc-topbar,60px) + var(--vx-html-topbar-offset))!important}
/* Public/support/invoice header: same stationary behavior.
   Make up for the header being taken out of normal flow with one main margin. */
body.vx-theme.vx-public-mode .vx-public-header{position:fixed!important;top:var(--vx-html-topbar-offset)!important;left:0;right:0;z-index:1038!important}
body.vx-theme.vx-public-mode > main.vx-public-main{margin-top:var(--vx-guest-header-height,78px)!important}
/* Logged-out shopping and domain pages have their own existing navigation.
   Keep the full checkout flow and its 1180px content container unchanged. */
body.vx-theme.vx-cart-guest > main.vx-checkout-main{margin-top:0!important}
body.vx-theme.vx-domain-landing-mode .vx-domain-landing-header{position:fixed!important;top:var(--vx-html-topbar-offset)!important;left:0;right:0;z-index:1038!important}
body.vx-theme.vx-domain-landing-mode > main.vx-domain-landing-main{margin-top:68px!important}
/* The order-summary sticky fallback and JS follower use the same header clearance. */
body.vx-theme.vx-cart-guest:where(.vx-page-configureproduct,.vx-page-viewcart,.vx-final-checkout-page){--vx-summary-sticky-top:calc(var(--vx-html-topbar-offset) + 12px)}
body.vx-theme.vx-logged-in:where(.vx-page-configureproduct,.vx-page-viewcart,.vx-final-checkout-page){--vx-summary-sticky-top:calc(var(--vx-html-topbar-offset) + var(--vxc-topbar,60px) + 12px)}
@media(min-width:981px){body.vx-theme.vx-cart-guest.vx-final-checkout-page #order-standard_cart .vx-reference-order-summary:not(.vx-js-summary-follower){top:var(--vx-summary-sticky-top)!important}}
/* Let WHMCS modals/backdrops (Bootstrap 1040+) cover both headers.
   Browsers should scroll the document, never the fixed header strip. */
@media(max-width:1080px){body.vx-theme .vh-topbar__mail-link{display:none!important}}
@media(max-width:980px){
 body.vx-theme .vh-topbar__lead-long{display:none}
 body.vx-theme .vh-topbar__lead-short{display:inline}
 body.vx-theme .vh-topbar__inner{gap:12px;min-width:0}
 body.vx-theme .vh-topbar__left{flex:1 1 auto;min-width:0}
 body.vx-theme .vh-topbar__right{flex:0 0 auto;gap:12px}
 body.vx-theme .vh-topbar__lead{min-width:0;font-size:12px;letter-spacing:0}
}
@media(max-width:720px){
 body.vx-theme{--vx-html-topbar-height:34px}
 body.vx-theme .vh-topbar .vh-container{width:min(calc(100% - 32px),1420px)}
 body.vx-theme .vh-topbar__right .vh-topbar__support{display:none}
 body.vx-theme .vh-topbar__right{gap:14px}
}
/* Keep the older mobile client sidebar hidden until the customer opens its menu. */
@media(max-width:820px){
 body.vx-theme.vx-logged-in .vx-client-sidebar:not(.is-open){transform:translateX(-105%)!important}
 body.vx-theme.vx-logged-in .vx-client-sidebar.is-open{transform:translateX(0)!important}
}
@media(max-width:560px){
 body.vx-theme{--vx-html-topbar-height:38px}
 body.vx-theme .vh-topbar__right a[href*="submitticket"]{display:none}
 body.vx-theme .vh-topbar__lead-short{font-size:11px}
 body.vx-theme .vh-topbar__right a{font-size:11.5px}
}
@media(max-width:360px){body.vx-theme .vh-topbar__lead-short{font-size:10.5px}}
@media print{body.vx-theme{padding-top:0!important}body.vx-theme .vh-topbar{display:none!important}body.vx-theme.vx-public-mode > main.vx-public-main,body.vx-theme.vx-cart-guest > main.vx-checkout-main,body.vx-theme.vx-domain-landing-mode > main.vx-domain-landing-main{margin-top:0!important}}