/* ================================================================
   VMVM Light Theme v6 — Full Glassmorphism
   Matching whmcs-preview.html dark theme → light adaptation
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Nunito:wght@700;800&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://fastly.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css');

:root{
    --v-bg:#f4f5fa;--v-glass:rgba(255,255,255,.55);--v-glass-border:rgba(255,255,255,.35);
    --v-border:rgba(0,0,0,.06);--v-border-h:rgba(139,92,246,.25);
    --v-accent:#8b5cf6;--v-accent-h:#7c3aed;--v-accent-l:rgba(139,92,246,.06);--v-accent-b:rgba(139,92,246,.18);
    --v-ok:#10b981;--v-err:#ef4444;--v-warn:#f59e0b;--v-info:#3b82f6;
    --v-t1:#18181b;--v-t2:#3f3f46;--v-t3:#71717a;--v-t4:#a1a1aa;
    --v-sans:'Plus Jakarta Sans','HarmonyOS Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',system-ui,-apple-system,sans-serif;
    --v-mono:'JetBrains Mono',monospace;--v-logo:'Nunito',sans-serif;
    --v-blur:20px;
    --v-sh-glow:0 0 60px rgba(139,92,246,.05),0 0 120px rgba(139,92,246,.025);
    --v-tr:all .25s cubic-bezier(.4,0,.2,1)
}

/* === BASE === */
html{scroll-behavior:smooth}
body,.primary-bg-color{
    background:var(--v-bg)!important;color:var(--v-t2)!important;
    font-family:var(--v-sans)!important;-webkit-font-smoothing:antialiased;line-height:1.6;font-size:.9375rem;font-weight:400;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -5%,rgba(139,92,246,.07) 0%,transparent 60%),
        radial-gradient(ellipse 40% 30% at 85% 20%,rgba(139,92,246,.04) 0%,transparent 50%),
        radial-gradient(ellipse 40% 30% at 15% 60%,rgba(139,92,246,.03) 0%,transparent 50%)
    !important;background-attachment:fixed!important
}
::selection{background:var(--v-accent);color:#fff}
a{color:var(--v-accent);transition:color .2s;font-weight:500}a:hover{color:var(--v-accent-h);text-decoration:none}
h1,h2,h3,h4,h5,h6{color:var(--v-t1);font-weight:700;font-family:var(--v-sans)}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(139,92,246,.18);border-radius:99px}

/* ================================================================
   LOGO — SVG cloud + VMVM text
   ================================================================ */
.navbar-brand{display:flex!important;align-items:center!important;gap:.625rem!important;padding:.375rem 0!important;text-decoration:none!important}
.navbar-brand img,.logo-img{
    content:url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23a78bfa'/%3E%3Cstop offset='100%25' stop-color='%237c3aed'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 25C12 18.3726 17.3726 13 24 13C29.656 13 34.4206 16.9388 35.632 22.233C35.9189 22.1923 36.208 22.1716 36.5 22.1716C40.6421 22.1716 44 25.5294 44 29.6716C44 33.8137 40.6421 37.1716 36.5 37.1716H14C8.47715 37.1716 4 32.6944 4 27.1716C4 21.9332 8.02895 17.6356 13.157 17.216' stroke='url(%23g)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='rgba(139,92,246,0.05)'/%3E%3C/svg%3E")!important;
    height:36px!important;width:36px!important;object-fit:contain!important;
    filter:drop-shadow(0 0 8px rgba(139,92,246,.4))!important
}
.navbar-brand::after{
    content:"VMVM";font-family:var(--v-logo)!important;font-weight:800!important;
    font-size:1.375rem!important;color:var(--v-t1)!important;letter-spacing:-.01em
}

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar{display:none!important}

/* ================================================================
   NAVBAR — Glassmorphism
   ================================================================ */
header .navbar,.main-navbar-wrapper{
    background:rgba(255,255,255,.88)!important;backdrop-filter:blur(var(--v-blur))!important;
    -webkit-backdrop-filter:blur(var(--v-blur))!important;
    border-bottom:1px solid rgba(0,0,0,.06)!important;box-shadow:0 1px 3px rgba(0,0,0,.03)!important;
    position:relative;z-index:1030!important;overflow:visible!important
}
/* Every ancestor of .cart-btn .badge must allow overflow so the badge is not clipped */
header .navbar .container,
header .navbar .container-fluid,
header .navbar .navbar-header,
header .navbar .navbar-right,
header .navbar .nav.navbar-right,
header .navbar .nav.navbar-right>li,
header .navbar ul.nav>li,
header .navbar li.cart-item,
header #nav>li{
    overflow:visible!important
}
#nav>li>a,.navbar-nav>li>a,.navbar-nav .nav-link{
    color:var(--v-t3)!important;font-weight:500!important;font-size:.875rem!important;
    padding:.5rem .75rem!important;border-radius:.375rem!important;transition:var(--v-tr)!important
}
#nav>li>a:hover,.navbar-nav>li>a:hover{color:var(--v-t1)!important;background:var(--v-accent-l)!important}
#nav>li.active>a,.navbar-nav .nav-link.active{color:var(--v-accent)!important;background:var(--v-accent-l)!important;font-weight:600!important}
header .input-group.search .form-control{background:rgba(255,255,255,.6)!important;border:1px solid var(--v-border)!important;border-radius:0 .75rem .75rem 0!important;font-size:.8125rem!important}
header .input-group.search .form-control:focus{border-color:var(--v-accent)!important;box-shadow:0 0 0 3px rgba(139,92,246,.1)!important}
header .input-group.search .btn{background:rgba(255,255,255,.6)!important;border:1px solid var(--v-border)!important;border-right:none!important;border-radius:.75rem 0 0 .75rem!important;color:var(--v-t4)!important}
/* Search group: remove any outer wrapper border */
header .input-group.search{border:none!important;box-shadow:none!important;outline:none!important}

/* Cart button: make same size as hamburger and position badge at top-right corner */
.navbar .cart-btn,.navbar a.cart-btn{
    position:relative!important;display:inline-flex!important;align-items:center!important;
    justify-content:center!important;width:2.25rem!important;height:2.25rem!important;
    padding:0!important;border-radius:.5rem!important;font-size:1.05rem!important;
    background:transparent!important;border:1px solid var(--v-border)!important;
    color:var(--v-t2)!important;transition:var(--v-tr)!important;flex-shrink:0!important;
    overflow:visible!important;margin-right:8px!important; /* 核心修复：允许角标溢出并预留右侧空间 */
}
.navbar .cart-btn:hover{
    background:var(--v-accent-l)!important;border-color:var(--v-border-h)!important;
    color:var(--v-accent)!important
}
.navbar .cart-btn .badge{
    position:absolute!important;top:-5px!important;right:-5px!important;
    background:var(--v-accent)!important;color:#fff!important;
    border-radius:99px!important;font-size:.5625rem!important;
    min-width:1rem!important;height:1rem!important;
    line-height:1rem!important;padding:0 .25rem!important;
    text-align:center!important;pointer-events:none!important;
    box-shadow:0 1px 4px rgba(139,92,246,.3)!important
}
/* Hamburger toggle: same size as cart button */
.navbar .navbar-toggler,.navbar .navbar-toggle{
    width:2.25rem!important;height:2.25rem!important;
    padding:0!important;display:inline-flex!important;
    align-items:center!important;justify-content:center!important;
    border-radius:.5rem!important;border:1px solid var(--v-border)!important;
    background:transparent!important;font-size:1.05rem!important;
    color:var(--v-t2)!important;flex-shrink:0!important
}
.navbar .navbar-toggler:hover,.navbar .navbar-toggle:hover{
    background:var(--v-accent-l)!important;border-color:var(--v-border-h)!important;
    color:var(--v-accent)!important
}
/* Ensure icon bar lines inside hamburger are visible */
.navbar-toggle .icon-bar{background:var(--v-t2)!important}
.navbar-toggle:hover .icon-bar{background:var(--v-accent)!important}

/* Dropdown */
.dropdown-menu{
    z-index:10000!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(var(--v-blur))!important;
    -webkit-backdrop-filter:blur(var(--v-blur))!important;
    border:1px solid rgba(0,0,0,.06)!important;border-radius:.75rem!important;
    box-shadow:0 12px 40px rgba(0,0,0,.1)!important;padding:.25rem!important;animation:vmvm-dd .2s ease;
    margin-top:2px!important
}
@keyframes vmvm-dd{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Nuclear reset: kill ALL backgrounds/outlines/shadows on every element inside dropdown */
.dropdown-menu,.dropdown-menu *,
.dropdown-menu li,.dropdown-menu div{
    outline:none!important;box-shadow:none!important;text-shadow:none!important
}
.dropdown-menu li{background:transparent!important;border:none!important;list-style:none!important;margin:0!important;padding:0!important}
/* Kill any divider/separator lines between items */
.dropdown-menu .divider,.dropdown-menu li+li{border-top:none!important}
.dropdown-menu>li:not(:last-child){border-bottom:none!important}

/* Default state: fully transparent, compact padding */
.dropdown-menu a,.dropdown-menu>li>a{
    color:var(--v-t2)!important;border-radius:.375rem!important;
    padding:.375rem .875rem!important;line-height:1.4!important;
    font-size:.8125rem!important;font-weight:500!important;
    background:transparent!important;border:none!important;outline:none!important;
    box-shadow:none!important;transition:background .15s,color .15s!important;
    display:block!important;text-decoration:none!important;
    margin:1px 0!important;white-space:nowrap!important
}

/* Hover/focus/active — ONE single light purple bg, nothing else */
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu a:active,
.dropdown-menu a.active,
.dropdown-menu .active>a,
.dropdown-menu li:hover>a,
.dropdown-menu li.active>a,
.dropdown-menu li.show>a{
    background:rgba(139,92,246,.06)!important;color:var(--v-accent)!important;
    border:none!important;outline:none!important;box-shadow:none!important;
    text-decoration:none!important
}
/* Bootstrap focus ring on the parent nav-link that opens dropdown */
.nav-link:focus,.nav-link:active,
.navbar-nav .nav-link:focus,.navbar-nav .nav-link:active,
#nav>li>a:focus,#nav>li>a:active,
.navbar-nav>li>a:focus,.navbar-nav>li>a:active{
    outline:none!important;box-shadow:none!important;background:transparent!important
}
/* Open dropdown parent link should not also highlight */
.navbar-nav .show>.nav-link,
.navbar-nav li.open>a,
#nav>li.open>a{
    background:var(--v-accent-l)!important;color:var(--v-accent)!important;
    box-shadow:none!important;outline:none!important
}
#main-body{position:relative}
/* Mobile collapse handled in responsive section at bottom */

/* ================================================================
   BREADCRUMBS
   ================================================================ */
.master-breadcrumb{display:none!important}
.breadcrumb{background:transparent!important;padding:.5rem 0!important;border:none!important;margin:0!important;font-size:.8125rem}
.breadcrumb-item{color:var(--v-t4)!important}.breadcrumb-item.active{color:var(--v-t2)!important;font-weight:600!important}
.breadcrumb-item a{color:var(--v-accent)!important;font-weight:500!important}

/* ================================================================
   SIDEBAR — Modern Navigation (matching dark theme sidebar-nav)
   ================================================================ */
/* Sidebar: default WHMCS layout preserved */

/* (tiles hidden, styled via vmvm-stats-row) */

/* Container panel → frosted look without backdrop-filter
   (backdrop-filter on parent cards causes Chrome simulator jitter
    when child selects open native dropdown — remove entirely) */
.sidebar .panel,.sidebar .card{
    background:rgba(255,255,255,.6)!important;
    backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
    border:1px solid rgba(255,255,255,.7)!important;border-radius:1.25rem!important;
    box-shadow:0 2px 8px rgba(0,0,0,.04),0 0 40px rgba(139,92,246,.04)!important;
    overflow:hidden!important;margin-bottom:.875rem!important;padding:0!important;
    position:relative!important;z-index:auto!important;transition:all .4s cubic-bezier(.4,0,.2,1)
}
.sidebar .panel:hover,.sidebar .card:hover{
    box-shadow:0 8px 24px rgba(0,0,0,.05),0 0 60px rgba(139,92,246,.08)!important;
    border-color:rgba(139,92,246,.2)!important
}

/* Panel heading → flex with arrow pushed right */
.sidebar .panel-heading,.sidebar .card-header{
    background:transparent!important;border-bottom:1px solid rgba(139,92,246,.08)!important;
    padding:.75rem 1rem!important;min-height:2.75rem!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    font-size:.8rem!important;font-weight:600!important;color:var(--v-t2)!important;cursor:pointer;
    border-radius:1.25rem 1.25rem 0 0!important
}
/* Panel title takes up available space, arrow stays right */
.sidebar .panel-heading .panel-title,.sidebar .card-header .card-title{
    font-size:.8rem!important;font-weight:600!important;color:var(--v-t2)!important;margin:0!important;
    flex:1!important
}
.sidebar .panel-heading .panel-title a{color:var(--v-t2)!important;text-decoration:none!important}
/* Collapse toggle arrow → push to far right */
.sidebar .panel-heading a[data-toggle],.sidebar .panel-heading .card-link,
.sidebar .card-header a[data-toggle],.sidebar .card-header [data-bs-toggle]{
    margin-left:auto!important;color:var(--v-accent)!important;text-decoration:none!important;
    flex-shrink:0!important
}

/* Panel body padding */
.sidebar .panel-body,.sidebar .card-body{padding:.75rem 1rem!important;font-weight:400!important;font-size:.8125rem!important;color:var(--v-t2)!important;background:transparent!important}

/* List group items → modern nav links like sidebar-nav a */
.sidebar .list-group{padding:.25rem .5rem .5rem!important}
.sidebar .list-group-item{
    background:transparent!important;border:none!important;
    display:flex!important;align-items:center!important;gap:.75rem!important;
    padding:.6rem .875rem!important;border-radius:.75rem!important;
    font-size:.8rem!important;font-weight:500!important;color:var(--v-t3)!important;
    transition:all .2s!important;margin-bottom:.15rem!important;border-bottom:none!important
}
.sidebar .list-group-item:hover{
    background:rgba(255,255,255,.5)!important;color:var(--v-t1)!important
}
.sidebar .list-group-item.active,.sidebar .list-group-item.active:hover{
    background:rgba(139,92,246,.08)!important;color:var(--v-accent)!important;
    border:1px solid rgba(139,92,246,.15)!important
}
.sidebar .list-group-item i{font-size:1.1rem;width:1.25rem;text-align:center;flex-shrink:0}
.sidebar .list-group-item .badge{
    background:var(--v-accent)!important;color:#fff!important;border-radius:99px!important;
    font-size:.6rem!important;padding:.25rem .5rem!important;margin-left:5px;
}

/* Sidebar panel footer → hidden if just spacer */
.sidebar .panel-footer,.sidebar .card-footer{display:none!important}

/* 侧边栏 panel 默认展开（覆盖 Bootstrap collapse 的默认收缩） */
.sidebar .panel-collapse,
.sidebar .collapse,
.sidebar .panel-collapse.collapse,
.sidebar .collapse:not(.navbar-collapse) {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* Sidebar button */
.sidebar .btn{
    font-size:.8rem!important;width:calc(100% - 1rem)!important;margin:.25rem .5rem .625rem!important;
    border-radius:.75rem!important;padding:.55rem!important;font-weight:600!important;
    background:rgba(139,92,246,.06)!important;border:1px solid rgba(139,92,246,.12)!important;
    color:var(--v-accent)!important;transition:all .2s!important
}
.sidebar .btn:hover{background:rgba(139,92,246,.12)!important;border-color:rgba(139,92,246,.25)!important}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{border-radius:.75rem!important;font-weight:400!important;transition:var(--v-tr)!important;font-size:.875rem;outline:none!important}
.btn:focus,.btn:focus-visible,.btn:active:focus,.btn.active:focus,
.btn:focus-within,.btn.focus{
    box-shadow:0 0 0 3px rgba(139,92,246,.15)!important;outline:none!important;
    border-color:rgba(139,92,246,.3)!important
}
.btn:active,.btn.active{outline:none!important;box-shadow:0 0 0 3px rgba(139,92,246,.15)!important}
.btn-primary,.btn-success{background:var(--v-accent)!important;border-color:var(--v-accent)!important;color:#fff!important;box-shadow:0 2px 12px rgba(139,92,246,.2)!important}
.btn-primary:hover,.btn-success:hover{background:var(--v-accent-h)!important;transform:translateY(-1px);box-shadow:0 6px 20px rgba(139,92,246,.25)!important}
.btn-primary:focus,.btn-primary:active,.btn-primary:focus-visible,
.btn-success:focus,.btn-success:active,.btn-success:focus-visible{
    background:var(--v-accent-h)!important;border-color:var(--v-accent-h)!important;
    box-shadow:0 0 0 3px rgba(139,92,246,.25)!important;outline:none!important
}
.btn-default,.btn-secondary{background:rgba(255,255,255,.7)!important;border:1px solid var(--v-border)!important;color:var(--v-t2)!important}
.btn-default:hover,.btn-secondary:hover{background:var(--v-accent-l)!important;border-color:var(--v-accent-b)!important;color:var(--v-accent)!important}
.btn-default:focus,.btn-default:active,.btn-default:focus-visible,
.btn-secondary:focus,.btn-secondary:active,.btn-secondary:focus-visible{
    border-color:rgba(139,92,246,.25)!important;outline:none!important;
    box-shadow:0 0 0 3px rgba(139,92,246,.1)!important
}
.btn-danger{background:rgba(239,68,68,.1)!important;border:1px solid rgba(239,68,68,.2)!important;color:var(--v-err)!important}
.btn-danger:hover{background:rgba(239,68,68,.18)!important}
.btn-danger:focus,.btn-danger:active,.btn-danger:focus-visible{
    border-color:rgba(239,68,68,.3)!important;outline:none!important;
    box-shadow:0 0 0 3px rgba(239,68,68,.12)!important
}
.btn-info{background:var(--v-info)!important;color:#fff!important}
.btn-warning{background:var(--v-warn)!important;color:#fff!important}
.btn-link{color:var(--v-accent)!important;background:transparent!important;box-shadow:none!important}
.btn-link:focus,.btn-link:active,.btn-link:focus-visible{box-shadow:none!important;outline:none!important;border-color:transparent!important}
.btn-xs,.btn-sm{padding:.375rem .75rem!important;font-size:.75rem!important;border-radius:.5rem!important}
/* Global: kill browser default focus outline on all interactive elements */
*:focus-visible{outline:none!important}
button:focus,a.btn:focus,input[type="submit"]:focus,input[type="button"]:focus{outline:none!important}

/* ================================================================
   CARDS / PANELS — Glassmorphism with glow
   ================================================================ */
.card,.panel,.panel-default,.panel-primary,.panel-success,.panel-info,.panel-warning,.panel-danger,
.vmvm-panel{
    background:var(--v-glass)!important;backdrop-filter:blur(var(--v-blur))!important;
    -webkit-backdrop-filter:blur(var(--v-blur))!important;
    border:1px solid var(--v-glass-border)!important;border-radius:1.5rem!important;
    box-shadow:0 1px 3px rgba(0,0,0,.03),var(--v-sh-glow)!important;
    transition:var(--v-tr);margin-bottom:1.25rem!important;
    overflow:hidden!important
}
.card:hover,.panel:hover,.vmvm-panel:hover{
    box-shadow:0 4px 16px rgba(0,0,0,.05),0 0 40px rgba(139,92,246,.06)!important;
    border-color:var(--v-border-h)!important
}

/* Card header */
.card-header,.panel-heading{
    background:rgba(255,255,255,.4)!important;backdrop-filter:blur(10px)!important;
    border-bottom:1px solid var(--v-glass-border)!important;
    padding:.875rem 1.25rem!important;font-weight:700!important;color:var(--v-t1)!important
}
.panel-title,.card-title{color:var(--v-t1)!important;font-weight:700!important;font-size:.9375rem!important;margin:0!important}
.panel-title a,.card-title a{color:var(--v-t1)!important}
body .card-body, body .panel-body{padding:1.25rem!important;background:transparent!important;border-radius:0!important}
.card-footer,.panel-footer{background:transparent!important;border-top:1px solid var(--v-glass-border)!important;padding:.75rem 1.25rem!important}
/* 消除 panel/card 内层白色背景（防止双层效果）*/
/* 用 body 前缀提高特异性，确保覆盖 theme.min.css 的 !important */
body .panel > .panel-body,
body .panel-default > .panel-body,
body .card > .card-body,
body .card-accent-blue > .card-body,
body .card-accent-red > .card-body,
body .card-accent-green > .card-body,
body .card-accent-gold > .card-body,
body .card-accent-orange > .card-body,
body .card-accent-purple > .card-body,
body .card-accent-teal > .card-body,
body .card-accent-cyan > .card-body,
body .card-accent-info > .card-body,
body .card-accent-warning > .card-body,
body .card-accent-danger > .card-body,
body .card-accent-success > .card-body,
body .card[class*="card-accent"] > .card-body,
body .panel > .panel-footer,
body .card > .card-footer,
body .card[class*="card-accent"] > .card-footer {
    background: transparent !important;
    border-radius: 0 !important;
}
body .panel > .panel-body:last-child,
body .card > .card-body:last-child,
body .card[class*="card-accent"] > .card-body:last-child {
    border-bottom-left-radius: calc(1.5rem - 2px) !important;
    border-bottom-right-radius: calc(1.5rem - 2px) !important;
}


/* Panel cards — frosted glass + purple glow, NO left border accent */
.card[class*="card-accent"],.card,.vmvm-panel,
.client-home-cards .card,.client-home-cards .card[class*="card-accent"]{
    background:rgba(255,255,255,.55)!important;
    backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
    border:1px solid rgba(255,255,255,.35)!important;border-radius:1.5rem!important;
    box-shadow:0 2px 8px rgba(0,0,0,.03),0 0 60px rgba(139,92,246,.05),0 0 120px rgba(139,92,246,.025)!important;
    transition:all .4s cubic-bezier(.4,0,.2,1);margin-bottom:1.25rem!important;
    position:relative;border-left:1px solid rgba(255,255,255,.35)!important;
    overflow:hidden!important
}
/* ★ SIDEBAR CARDS: Override general card backdrop-filter to prevent jitter
   Must be AFTER .card rule above to win cascade */
.sidebar .panel,.sidebar .card,
.sidebar .panel-default,.sidebar .card-sidebar,
.cart-sidebar .card,.cart-sidebar .panel,
.order-sidebar .card,.order-sidebar .panel,
#order-standard_cart .sidebar .card{
    background:rgba(245,243,252,.92)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border:1px solid rgba(255,255,255,.5)!important;border-radius:1.25rem!important;
    box-shadow:0 2px 8px rgba(0,0,0,.03),0 0 60px rgba(139,92,246,.05)!important;
    overflow:visible!important;margin-bottom:.875rem!important;padding:0!important;
    position:relative!important;z-index:auto!important
}
.card:hover,.vmvm-panel:hover,.client-home-cards .card:hover{
    box-shadow:0 8px 32px rgba(0,0,0,.06),0 0 80px rgba(139,92,246,.08)!important;
    border-color:rgba(139,92,246,.2)!important;transform:translateY(-2px)
}
/* Inner glow */
.client-home-cards .card::before{
    content:'';position:absolute;top:-3rem;right:-3rem;width:10rem;height:10rem;
    background:rgba(139,92,246,.06);border-radius:50%;filter:blur(40px);pointer-events:none;
    transition:background .5s;z-index:0
}
.client-home-cards .card:hover::before{background:rgba(139,92,246,.12)}
.client-home-cards .card>*{position:relative;z-index:1}

/* Override any card-accent left borders */
.card-accent-blue,.card-accent-red,.card-accent-green,
.card-accent-gold,.card-accent-orange,.card-accent-purple,.card-accent-teal{
    border-left:1px solid rgba(255,255,255,.35)!important
}

/* Card header — modern glass style */
.client-home-cards .card-header,.card-header{
    background:rgba(255,255,255,.45)!important;backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    border-bottom:1px solid rgba(0,0,0,.04)!important;
    padding:1rem 1.5rem!important;
    border-radius:0!important
}
.card-header .card-title,.card-title{
    color:var(--v-t1)!important;font-weight:700!important;font-size:.9375rem!important;margin:0!important
}
.card-header .card-title i{color:var(--v-accent)!important;margin-right:.375rem}
.card-header .card-title .float-right{float:right!important}

/* Card body & footer */
body .client-home-cards .card-body, body .card-body{padding:1.25rem 1.5rem!important;font-weight:400!important;color:var(--v-t2)!important;font-size:.875rem!important;background:transparent!important}
.client-home-cards .card-footer,.card-footer{
    background:rgba(255,255,255,.35)!important;border-top:1px solid rgba(0,0,0,.04)!important;
    padding:.75rem 1.5rem!important
}
.card-footer:empty{display:none!important}

/* Remove all list-group borders/backgrounds */
.list-group{border:none!important;border-radius:0!important;background:transparent!important;margin:0!important;padding:0!important}
.list-group-flush{border:none!important}

/* ─── Unified Panel Button: white bg, gray text ─── */
.vmvm-panel-btn{
    display:inline-flex!important;align-items:center!important;gap:.375rem!important;
    background:#fff!important;color:var(--v-t3)!important;
    border:1px solid rgba(0,0,0,.08)!important;padding:.375rem .875rem!important;
    border-radius:.5rem!important;font-weight:500!important;font-size:.75rem!important;
    transition:all .25s!important;text-decoration:none!important;white-space:nowrap!important;
    box-shadow:0 1px 3px rgba(0,0,0,.04)!important
}
.vmvm-panel-btn:hover{
    background:rgba(139,92,246,.04)!important;border-color:rgba(139,92,246,.2)!important;
    color:var(--v-accent)!important;box-shadow:0 2px 8px rgba(139,92,246,.06)!important
}
.vmvm-panel-btn i{font-size:.875rem}

/* Also override WHMCS bg-color-* buttons inside card headers */
.card-header .btn.bg-color-blue,.card-header .btn.bg-color-green,
.card-header .btn.bg-color-red,.card-header .btn.bg-color-gold,
.card-header .btn.bg-color-orange,.card-header .btn.bg-color-purple,
.card-header .btn.bg-color-teal,.card-header .btn-default{
    background:#fff!important;color:var(--v-t3)!important;
    border:1px solid rgba(0,0,0,.08)!important;border-radius:.5rem!important;
    font-weight:500!important;font-size:.75rem!important;
    box-shadow:0 1px 3px rgba(0,0,0,.04)!important;transition:all .25s!important
}
.card-header .btn.bg-color-blue:hover,.card-header .btn.bg-color-green:hover,
.card-header .btn.bg-color-red:hover,.card-header .btn.bg-color-gold:hover,
.card-header .btn.bg-color-orange:hover,.card-header .btn.bg-color-purple:hover,
.card-header .btn.bg-color-teal:hover,.card-header .btn-default:hover{
    background:rgba(139,92,246,.04)!important;border-color:rgba(139,92,246,.2)!important;
    color:var(--v-accent)!important
}

/* List group items — service rows */
.client-home-cards .list-group-item,.list-group-item{
    background:transparent!important;border:none!important;
    border-bottom:none!important;border-left:none!important;border-right:none!important;
    padding:.875rem 1.5rem!important;
    display:flex!important;align-items:center!important;flex-wrap:nowrap!important;
    width:100%!important;box-sizing:border-box!important;
    font-size:.875rem!important;font-weight:500!important;color:var(--v-t2)!important;
    transition:all .25s!important;border-radius:0!important;
    position:relative!important
}
.client-home-cards .list-group-item:first-child{border-top:none!important}
.client-home-cards .list-group-item:last-child{border-bottom:none!important}
.client-home-cards .list-group-item:hover{background:rgba(139,92,246,.04)!important;color:var(--v-accent)!important}
/* Service item badges */
.client-home-cards .list-group-item .badge{
    border-radius:99px!important;font-size:.65rem!important;font-weight:700!important;padding:.2rem .6rem!important;
    flex-shrink:0!important
}
/* Force buttons inside list items to absolute right */
.client-home-cards .list-group-item .btn,
.client-home-cards .list-group-item a.btn,
.list-group-item .btn,
.list-group-item a.btn{
    position:absolute!important;right:1.5rem!important;top:50%!important;transform:translateY(-50%)!important;
    background:#fff!important;color:var(--v-t3)!important;border:1px solid rgba(0,0,0,.08)!important;
    border-radius:.5rem!important;font-size:.75rem!important;font-weight:500!important;
    box-shadow:0 1px 3px rgba(0,0,0,.04)!important;padding:.35rem .75rem!important;
    white-space:nowrap!important;z-index:2!important
}
.client-home-cards .list-group-item .btn:hover,
.client-home-cards .list-group-item a.btn:hover,
.list-group-item .btn:hover,
.list-group-item a.btn:hover{
    background:rgba(139,92,246,.04)!important;border-color:rgba(139,92,246,.2)!important;
    color:var(--v-accent)!important
}

/* Announcement date text — JS wraps in .vmvm-date-right */
/* Uses absolute positioning as bulletproof fallback */
.vmvm-date-right{
    position:absolute!important;right:1.5rem!important;top:50%!important;
    transform:translateY(-50%)!important;
    font-size:.75rem!important;color:var(--v-t4)!important;font-weight:400!important;
    white-space:nowrap!important;display:inline-block!important
}
/* Also handle any existing .pull-right / .float-right from WHMCS */
.client-home-cards .list-group-item .pull-right,
.client-home-cards .list-group-item .float-right,
.client-home-cards .list-group-item .text-muted{
    margin-left:auto!important;flex-shrink:0!important;font-size:.75rem!important;
    color:var(--v-t4)!important;font-weight:400!important;white-space:nowrap!important;
    float:none!important;position:static!important
}

/* Badge "有效的" - ensure it doesn't overflow on mobile */
.badge,.label{
    font-size:.65rem!important;padding:.2rem .5rem!important;
    white-space:nowrap!important;flex-shrink:0!important;overflow:hidden!important;
    text-overflow:ellipsis!important;max-width:4.5rem
}
/* EXCEPTION: cart button badge must NOT be clipped — it uses absolute positioning */
.navbar .cart-btn .badge,
.cart-btn .badge,
header .cart-btn .badge{
    overflow:visible!important;max-width:none!important;
    text-overflow:clip!important
}
@media(max-width:575px){
    .badge,.label{font-size:.6rem!important;padding:.15rem .375rem!important;max-width:3.5rem}
}

/* bg-color helpers — keep for any elements outside headers */
.bg-color-blue{background:var(--v-info)!important;color:#fff!important}
.bg-color-green{background:var(--v-ok)!important;color:#fff!important}
.bg-color-red{background:var(--v-err)!important;color:#fff!important}
.bg-color-gold{background:var(--v-warn)!important;color:#fff!important}

/* Hide default tiles (replaced by vmvm-stats-row) */
.tiles{display:none!important}

/* ================================================================
   TABLES
   ================================================================ */
.table{background:transparent;border-radius:.75rem;overflow:hidden}
.table thead th{background:rgba(255,255,255,.5)!important;color:var(--v-t3)!important;font-weight:600!important;font-size:.7rem!important;text-transform:uppercase!important;letter-spacing:.05em!important;border-bottom:1px solid var(--v-border)!important;padding:.75rem 1rem!important;border-top:none!important}
.table td{color:var(--v-t2)!important;border-bottom:1px solid var(--v-border)!important;padding:.75rem 1rem!important;vertical-align:middle!important;border-top:none!important;font-size:.8125rem}
.table tbody tr:hover td{background:var(--v-accent-l)!important}
.table tbody tr:last-child td{border-bottom:none!important}

/* ================================================================
   FORMS
   ================================================================ */
.form-control,input[type="text"],input[type="email"],input[type="password"],textarea{
    background:rgba(255,255,255,.6)!important;backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    border:1px solid var(--v-border)!important;border-radius:.75rem!important;
    color:var(--v-t1)!important;font-size:.875rem!important;box-shadow:none!important;transition:var(--v-tr)!important;
    padding:.5rem .875rem!important;height:auto!important;line-height:1.5!important
}
/* Select: NO backdrop-filter (causes jitter on mobile when dropdown opens) */
select,select.form-control{
    background:rgba(255,255,255,.75)!important;
    border:1px solid var(--v-border)!important;border-radius:.75rem!important;
    color:var(--v-t1)!important;font-size:.875rem!important;box-shadow:none!important;
    padding:.5rem .875rem!important;height:auto!important;line-height:1.5!important;
    -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237c3aed'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;background-position:right .875rem center!important;
    background-size:.625rem!important;
    transition:border-color .2s ease!important;
    /* Anti-jitter: force GPU layer without backdrop-filter */
    transform:translateZ(0)!important;-webkit-transform:translateZ(0)!important;
    will-change:auto!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
.form-control:focus,input:focus,select:focus,select.form-control:focus{
    border-color:var(--v-accent)!important;box-shadow:0 0 0 3px rgba(139,92,246,.12)!important;
    background:rgba(255,255,255,.85)!important;outline:none!important
}
.form-control::placeholder{color:var(--v-t4)!important}
label,.control-label{color:var(--v-t2)!important;font-weight:400!important;font-size:.8rem!important}
/* Input group: icon + input alignment */
.input-group{display:flex!important;align-items:stretch!important}
.input-group .input-group-prepend,.input-group .input-group-append{display:flex!important}
.input-group .input-group-text,.input-group-addon{
    background:rgba(139,92,246,.04)!important;border:1px solid var(--v-border)!important;
    color:var(--v-t3)!important;font-size:.8125rem!important;
    padding:.5rem .75rem!important;display:flex!important;align-items:center!important;
    justify-content:center!important;min-width:2.5rem!important;line-height:1.5!important
}
.input-group .input-group-prepend .input-group-text{
    border-radius:.75rem 0 0 .75rem!important;border-right:none!important
}
.input-group .input-group-append .input-group-text{
    border-radius:0 .75rem .75rem 0!important;border-left:none!important
}
.input-group>.form-control,.input-group>input{
    border-radius:0 .75rem .75rem 0!important;border-left:none!important;
    padding-left:.75rem!important
}
/* If input-group-addon is before input (Bootstrap 3 compat) */
.input-group-addon+.form-control{border-radius:0 .75rem .75rem 0!important;border-left:none!important}
.input-group .form-control:first-child{border-radius:.75rem 0 0 .75rem!important}
/* Emoji / flag / icon in phone field alignment */
.iti,.intl-tel-input{width:100%!important}
.iti .selected-flag{border-radius:.75rem 0 0 .75rem!important}
.iti input{padding-left:3.25rem!important}

/* ================================================================
   ALERTS
   ================================================================ */
/* ================================================================
   ALERTS — Glassmorphism style
   ================================================================ */
.alert{
    border-radius:1rem!important;font-weight:500;
    padding:1rem 1.25rem!important;
    backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
    border:1px solid rgba(255,255,255,.55)!important;
    box-shadow:0 4px 24px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7)!important;
    position:relative!important
}
.alert::before{
    content:'';position:absolute;top:-2rem;right:-2rem;
    width:7rem;height:7rem;border-radius:50%;
    filter:blur(28px);pointer-events:none;z-index:0;opacity:.5
}
.alert>*,.alert p,.alert ul{ position:relative;z-index:1 }
.alert p,.alert ul{ margin-bottom:0 }
.alert-danger{
    background:rgba(255,240,240,.78)!important;color:#991b1b!important;
    border:1px solid rgba(239,68,68,.2)!important;
    box-shadow:0 4px 20px rgba(239,68,68,.07),inset 0 1px 0 rgba(255,255,255,.7)!important
}
.alert-danger::before{ background:rgba(239,68,68,.3) }
.alert-success{
    background:rgba(240,255,249,.78)!important;color:#065f46!important;
    border:1px solid rgba(16,185,129,.2)!important;
    box-shadow:0 4px 20px rgba(16,185,129,.07),inset 0 1px 0 rgba(255,255,255,.7)!important
}
.alert-success::before{ background:rgba(16,185,129,.3) }
.alert-warning{
    background:rgba(255,252,235,.78)!important;color:#92400e!important;
    border:1px solid rgba(245,158,11,.2)!important;
    box-shadow:0 4px 20px rgba(245,158,11,.07),inset 0 1px 0 rgba(255,255,255,.7)!important
}
.alert-warning::before{ background:rgba(245,158,11,.3) }
.alert-info{
    background:rgba(245,243,255,.78)!important;color:#5b21b6!important;
    border:1px solid rgba(139,92,246,.2)!important;
    box-shadow:0 4px 20px rgba(139,92,246,.07),inset 0 1px 0 rgba(255,255,255,.7)!important
}
.alert-info::before{ background:rgba(139,92,246,.25) }

/* ================================================================
   BADGES (global + VMVM custom)
   ================================================================ */
.badge,.label,.tag{border-radius:99px!important;font-weight:500!important;font-size:.675rem!important;padding:.25rem .625rem!important}
/* Cart button badge overrides: must NOT inherit overflow:hidden or max-width from .badge global rule */
.navbar .cart-btn .badge,.cart-btn .badge{
    overflow:visible!important;max-width:none!important;
    width:auto!important;text-overflow:clip!important;
    border-radius:99px!important;font-size:.5625rem!important;
    padding:0 .25rem!important;min-width:1rem!important;height:1rem!important;
    line-height:1rem!important
}
.badge-primary,.label-primary{background:var(--v-accent)!important;color:#fff!important}
.badge-success,.label-success{background:rgba(16,185,129,.12)!important;color:#065f46!important}
.badge-danger,.label-danger{background:rgba(239,68,68,.12)!important;color:#991b1b!important}
.badge-warning,.label-warning{background:rgba(245,158,11,.12)!important;color:#92400e!important}
.badge-info,.label-info{background:rgba(59,130,246,.12)!important;color:#1e40af!important}
/* VMVM badge variants */
.vmvm-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .75rem;border-radius:99px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:1px solid}
.vmvm-badge-active{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.2);color:#059669}
.vmvm-badge-suspended,.vmvm-badge-warning{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2);color:#d97706}
.vmvm-badge-terminated,.vmvm-badge-cancelled{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.2);color:#dc2626}
.vmvm-badge-pending{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.2);color:#2563eb}

/* ================================================================
   MODALS / TABS / PAGINATION
   ================================================================ */
/* General modals - minimal styling only */
.modal-content{background:#fff!important;border-radius:1rem!important;box-shadow:0 8px 32px rgba(0,0,0,.15)!important;border:1px solid rgba(0,0,0,.08)!important}
.nav-tabs{border-bottom:2px solid var(--v-border)!important}
.nav-tabs .nav-link{color:var(--v-t3)!important;font-weight:600!important;border:none!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important;margin-bottom:-2px!important}
.nav-tabs .nav-link:hover{color:var(--v-accent)!important;border-bottom-color:rgba(139,92,246,.3)!important}
.nav-tabs .nav-link.active,.nav-tabs>li.active>a{color:var(--v-accent)!important;border-bottom-color:var(--v-accent)!important}
.pagination .page-link{background:var(--v-glass)!important;border:1px solid var(--v-glass-border)!important;color:var(--v-t3)!important;border-radius:.375rem!important;font-weight:600!important;font-size:.8125rem!important}
.pagination .page-link:hover{background:var(--v-accent-l)!important;color:var(--v-accent)!important}
.pagination .active .page-link{background:var(--v-accent)!important;border-color:var(--v-accent)!important;color:#fff!important}

/* ================================================================
   FOOTER — Glass
   ================================================================ */
#footer,.footer{
    background:var(--v-glass)!important;backdrop-filter:blur(var(--v-blur))!important;
    border-top:1px solid var(--v-glass-border)!important;color:var(--v-t3)!important;
    padding:2rem 0 1.5rem!important;margin-top:3rem!important
}
#footer a{color:var(--v-t3)!important;font-weight:500!important;font-size:.8125rem}
#footer a:hover{color:var(--v-accent)!important}
.copyright{font-size:.8125rem!important;color:var(--v-t4)!important;border-top:1px solid var(--v-border);padding-top:1.25rem;margin-top:1rem}
#footer .btn[data-toggle="modal"],#footer .btn[data-target="#modalChooseLanguage"]{background:rgba(255,255,255,.3)!important;border:1px solid var(--v-border)!important;border-radius:.75rem!important;color:var(--v-t2)!important;font-size:.8125rem}

/* ================================================================
   TICKETS / CART / STORE
   ================================================================ */
.ticket-reply{background:var(--v-glass)!important;backdrop-filter:blur(var(--v-blur))!important;border:1px solid var(--v-glass-border)!important;border-radius:1.25rem!important;margin-bottom:1rem!important}
.ticket-reply-header{background:rgba(255,255,255,.3)!important;border-bottom:1px solid var(--v-glass-border)!important}
.staff-reply{border-left:3px solid var(--v-accent)!important}

/* Store product cards */
#order-standard_cart .product,.order-form .product,
.products .product,.product-group .card,
.order-cards .card{
    background:var(--v-glass)!important;backdrop-filter:blur(var(--v-blur))!important;
    -webkit-backdrop-filter:blur(var(--v-blur))!important;
    border:1px solid var(--v-glass-border)!important;border-radius:1.25rem!important;
    transition:var(--v-tr)!important;overflow:hidden!important
}
/* 产品卡片内层元素透明背景 */
.products .product > header,
.product-group .product > header,
#order-standard_cart .product > header,
.order-form .product > header{
    background:transparent!important;
    border:none!important;
    border-radius:0!important
}
.products .product > footer,
.product-group .product > footer,
#order-standard_cart .product > footer,
.order-form .product > footer{
    background:transparent!important;
    border:none!important;
    border-radius:0!important
}
.products .product .product-desc,
.product-group .product .product-desc,
#order-standard_cart .product .product-desc,
.order-form .product .product-desc{
    background:transparent!important
}
#order-standard_cart .product:hover,.order-form .product:hover,
.products .product:hover,.product-group .card:hover,
.order-cards .card:hover{
    border-color:var(--v-border-h)!important;transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,.06),0 0 40px rgba(139,92,246,.06)!important
}
/* Store page header / product group title */
#order-standard_cart h2,#order-standard_cart h3,
.order-form h2,.order-form h3,
#main-body h1,.store h1{
    color:var(--v-t1)!important;font-weight:700!important
}
/* Store sidebar cards — no backdrop-filter (prevent select jitter) */
.order-sidebar .card,.cart-sidebar .card,
#order-standard_cart .card-sidebar,
.order-form .card-sidebar{
    background:rgba(245,243,252,.92)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border:1px solid var(--v-glass-border)!important;border-radius:1.25rem!important
}
/* Store sidebar select/dropdown fix — NO backdrop-filter to prevent jitter */
.order-sidebar select,.cart-sidebar select,
.card-sidebar select,
.sidebar select,.sidebar select.form-control{
    background:rgba(255,255,255,.75)!important;border:1px solid var(--v-border)!important;
    border-radius:.75rem!important;padding:.5rem .75rem!important;
    color:var(--v-t1)!important;font-size:.875rem!important;
    width:100%!important;
    -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237c3aed'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;background-position:right .75rem center!important;
    background-size:.625rem!important;padding-right:2rem!important;
    position:relative!important;z-index:1!important;
    transform:translateZ(0)!important;will-change:auto!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    box-shadow:0 1px 4px rgba(139,92,246,.04)!important;
    transition:border-color .2s ease!important
}
.order-sidebar select:focus,.cart-sidebar select:focus,
.card-sidebar select:focus,.sidebar select:focus{
    border-color:var(--v-accent)!important;
    box-shadow:0 0 0 3px rgba(139,92,246,.1)!important
}
/* Store product pricing */
.product-pricing,.price,.product .price,
.order-cards .price{
    color:#18181b!important;font-weight:700!important
}
/* Order button */
.order-form .btn-order-now,.btn-order-now,
#order-standard_cart .btn-primary{
    background:var(--v-accent)!important;border-color:var(--v-accent)!important;
    color:#fff!important;border-radius:.75rem!important;
    box-shadow:0 2px 12px rgba(139,92,246,.2)!important
}
/* Fix: sidebar dropdown/select position overflow */
.card-sidebar .collapsable-card-body,
.card-sidebar .card-body{overflow:visible!important;background:transparent!important}
.sidebar .card-sidebar{overflow:visible!important}
.sidebar .panel-body{overflow:visible!important}
/* 「您的信息」面板：邮箱显示样式 */
.vmvm-user-info {
    display: flex !important;
    align-items: center !important;
    gap: .5rem !important;
    font-size: .8125rem !important;
    color: var(--v-t2) !important;
    font-weight: 500 !important;
    padding: .125rem 0 !important;
}
.vmvm-user-info i {
    color: var(--v-accent) !important;
    font-size: .875rem !important;
    flex-shrink: 0 !important;
}


/* ================================================================
   CART: Configure / Review / Checkout pages — Complete Overhaul
   ================================================================ */

/* ── Modal z-index: moved to end of file ── */
/* SweetAlert2 (WHMCS "empty cart" confirm) */
.swal2-container{z-index:11000!important}
.swal2-popup{z-index:11001!important;border-radius:1.25rem!important;
    background:rgba(255,255,255,.95)!important;backdrop-filter:blur(20px)!important}
.swal2-confirm{background:var(--v-accent)!important;border:none!important;
    border-radius:.75rem!important;font-weight:600!important;
    box-shadow:0 4px 16px rgba(139,92,246,.2)!important}
.swal2-cancel{border-radius:.75rem!important}

/* ── Order summary sidebar ── */
#order-standard_cart .order-summary,
.order-summary{
    background:rgba(255,255,255,.75)!important;backdrop-filter:blur(20px)!important;
    -webkit-backdrop-filter:blur(20px)!important;
    border:1px solid var(--v-glass-border)!important;border-radius:1.25rem!important
}
/* Summary header — purple gradient instead of dark gray */
#order-standard_cart .order-summary .card-header,
#order-standard_cart .order-summary .panel-heading,
.order-summary .card-header,
.order-summary .panel-heading,
.order-summary-header,
.order-summary .header-lined{
    background:linear-gradient(135deg,rgba(139,92,246,.08),rgba(139,92,246,.03))!important;
    border-bottom:1px solid rgba(139,92,246,.1)!important;
    color:var(--v-t1)!important;font-weight:700!important;
    padding:.875rem 1.25rem!important;font-size:.9375rem!important
}
/* ── CRITICAL: Fix oversized price/total in summary sidebar ── */
.order-summary .total-due-today,
.order-summary .amt,
.order-summary .pull-right.text-right h4,
#order-standard_cart .total-due-today,
#order-standard_cart .order-summary h4,
#order-standard_cart .order-summary .display-4,
#order-standard_cart .order-summary .display-3,
#order-standard_cart .order-summary .font-size-36,
.order-summary .font-size-36,
.cart-total .total-due-today,
.total-due-today{
    font-size:1.375rem!important;font-weight:700!important;color:var(--v-t1)!important;
    line-height:1.3!important;margin:0!important;word-break:break-all!important
}
.order-summary .total-due-today .currency-code,
#order-standard_cart .order-summary small{
    font-size:.8125rem!important;font-weight:500!important;color:var(--v-t3)!important;
    display:inline!important
}
.order-summary .summary-container,
.order-summary .card-body,
.order-summary .panel-body{
    padding:1rem 1.25rem!important;font-size:.8125rem!important
}
.order-summary .item-description,
.order-summary .small,
.order-summary small{
    font-size:.75rem!important;color:var(--v-t3)!important
}
.order-summary .clearfix .pull-left,
.order-summary .row .col-6:first-child,
.order-summary dt{
    font-size:.8125rem!important;color:var(--v-t3)!important;font-weight:500!important
}
.order-summary .clearfix .pull-right,
.order-summary .row .col-6:last-child,
.order-summary dd{
    font-size:.8125rem!important;color:var(--v-t1)!important;font-weight:600!important
}
/* "当前总计" label */
.order-summary .total-label,
.order-summary .text-large{
    font-size:.75rem!important;color:var(--v-t3)!important;font-weight:500!important
}
/* Continue / Checkout / Complete Order button */
#order-standard_cart .btn-success,
.order-summary .btn-primary,
.order-summary .btn-success,
#btnCompleteOrder{
    background:var(--v-accent)!important;border:none!important;
    color:#fff!important;border-radius:.75rem!important;
    font-weight:600!important;font-size:.875rem!important;
    padding:.625rem 1.5rem!important;
    box-shadow:0 4px 16px rgba(139,92,246,.2)!important;
    transition:all .3s!important
}
#order-standard_cart .btn-success:hover,
.order-summary .btn-primary:hover,
.order-summary .btn-success:hover,
#btnCompleteOrder:hover{
    background:var(--v-accent-h)!important;transform:translateY(-1px)!important;
    box-shadow:0 6px 20px rgba(139,92,246,.3)!important
}
/* "继续购买" link */
.order-summary a.btn-link,
.order-summary a[href*="cart.php"]{
    color:var(--v-accent)!important;font-size:.75rem!important;font-weight:500!important
}

/* ── Cart review table ── */
#order-standard_cart .view-cart-items-header,
#order-standard_cart thead th,
#order-standard_cart .cart-header{
    background:linear-gradient(135deg,rgba(139,92,246,.07),rgba(139,92,246,.02))!important;
    color:var(--v-t1)!important;font-weight:600!important;font-size:.8125rem!important;
    border-bottom:1px solid rgba(139,92,246,.1)!important;
    padding:.75rem 1.25rem!important
}
#order-standard_cart .view-cart-items,
#order-standard_cart .main-content>.panel.card,
#order-standard_cart .main-content>.card{
    background:rgba(255,255,255,.75)!important;backdrop-filter:blur(20px)!important;
    -webkit-backdrop-filter:blur(20px)!important;
    border:1px solid var(--v-glass-border)!important;border-radius:1.25rem!important;
    overflow:visible!important
}
/* Configure product panel */
#order-standard_cart .panel-default>.panel-heading,
#order-standard_cart .card-default>.card-header{
    background:transparent!important;
    border-bottom:1px solid rgba(0,0,0,.04)!important
}

/* ── Form inputs everywhere in cart ── */
#order-standard_cart .form-control,
#order-standard_cart select.form-control,
#order-standard_cart input[type="text"],
#order-standard_cart input[type="email"],
#order-standard_cart input[type="password"],
#order-standard_cart input[type="tel"],
#order-standard_cart textarea{
    background:rgba(255,255,255,.8)!important;
    border:1px solid rgba(0,0,0,.08)!important;
    border-radius:.625rem!important;
    color:var(--v-t1)!important;font-size:.875rem!important;
    padding:.5rem .75rem!important;
    transition:border-color .2s,box-shadow .2s!important;
    height:auto!important;line-height:1.5!important
}
#order-standard_cart .form-control:focus,
#order-standard_cart select.form-control:focus,
#order-standard_cart input:focus,
#order-standard_cart textarea:focus{
    border-color:rgba(139,92,246,.35)!important;
    box-shadow:0 0 0 3px rgba(139,92,246,.08)!important;
    outline:none!important
}
/* Input group (icon + input) alignment fix */
#order-standard_cart .input-group{
    border-radius:.625rem!important;overflow:hidden!important
}
#order-standard_cart .input-group .input-group-prepend .input-group-text,
#order-standard_cart .input-group .input-group-append .input-group-text,
#order-standard_cart .input-group-addon{
    background:rgba(139,92,246,.04)!important;
    border:1px solid rgba(0,0,0,.08)!important;
    color:var(--v-t3)!important;font-size:.8125rem!important;
    padding:.5rem .75rem!important;line-height:1.5!important;
    display:flex!important;align-items:center!important;
    min-width:2.5rem!important;justify-content:center!important
}
#order-standard_cart .input-group .form-control{
    border-left:none!important
}

/* ── Alert boxes ── */
#order-standard_cart .alert-info{
    background:rgba(245,243,255,.85)!important;
    border:1px solid rgba(139,92,246,.2)!important;
    border-radius:1rem!important;color:#5b21b6!important
}
#order-standard_cart .alert-success{
    background:rgba(240,255,249,.85)!important;
    border:1px solid rgba(16,185,129,.2)!important;
    border-radius:1rem!important
}
#order-standard_cart .alert-warning{
    background:rgba(255,252,235,.85)!important;
    border:1px solid rgba(245,158,11,.2)!important;
    border-radius:1rem!important
}
#order-standard_cart .alert-danger{
    background:rgba(255,240,240,.85)!important;
    border:1px solid rgba(239,68,68,.2)!important;
    border-radius:1rem!important;color:#991b1b!important
}
/* ── Coupon input ── */
#order-standard_cart #frmPromo .form-control,
#order-standard_cart input[name="promocode"]{
    border-radius:.625rem!important;
    border:1px solid rgba(0,0,0,.08)!important;
    background:rgba(255,255,255,.8)!important
}
/* ── Checkout section headings ── */
#order-standard_cart .sub-heading,
#order-standard_cart .field-container legend,
#order-standard_cart h2{
    color:var(--v-t1)!important;font-weight:700!important;font-size:1.125rem!important
}
/* ── Checkout form field labels ── */
#order-standard_cart label{
    font-size:.8125rem!important;font-weight:500!important;color:var(--v-t2)!important;
    margin-bottom:.25rem!important
}
/* ── Payment method section ── */
#order-standard_cart .gateway-option,
#order-standard_cart .payment-method{
    background:rgba(255,255,255,.6)!important;
    border:1px solid rgba(0,0,0,.06)!important;
    border-radius:.75rem!important;padding:.625rem 1rem!important;
    margin-bottom:.5rem!important;transition:all .2s!important;
    cursor:pointer!important;display:flex!important;align-items:center!important;gap:.5rem!important
}
#order-standard_cart .gateway-option:hover{
    border-color:rgba(139,92,246,.2)!important;background:rgba(139,92,246,.02)!important
}
/* Security notice */
#order-standard_cart .secure-notice,
#order-standard_cart .alert-danger{
    border-radius:.75rem!important
}
/* Empty cart / remove item links */
#order-standard_cart a.text-danger,
#order-standard_cart .remove-item{
    color:#ef4444!important;font-size:.8125rem!important;opacity:.7!important
}
#order-standard_cart a.text-danger:hover{opacity:1!important}

/* ================================================================
   VMVM DASHBOARD COMPONENTS — clientareahome.tpl
   ================================================================ */

/* Welcome Card — frosted glass with strong purple glow */
.vmvm-welcome{
    background:rgba(255,255,255,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.35);border-radius:1.5rem;
    padding:2rem 2.25rem;position:relative;margin-bottom:1.5rem;
    box-shadow:0 8px 32px rgba(0,0,0,.04),0 0 80px rgba(139,92,246,.06),0 0 160px rgba(139,92,246,.03)
}
.vmvm-welcome-glow{position:absolute;top:-4rem;right:-4rem;width:16rem;height:16rem;background:rgba(139,92,246,.1);border-radius:50%;filter:blur(50px);pointer-events:none;transition:background .5s}
.vmvm-welcome:hover .vmvm-welcome-glow{background:rgba(139,92,246,.14)}
.vmvm-welcome-pattern{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(139,92,246,.015) 1px,transparent 1px),linear-gradient(to bottom,rgba(139,92,246,.015) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.vmvm-welcome-inner{position:relative;z-index:10}
.vmvm-welcome-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.vmvm-welcome-date{font-size:.8rem;color:var(--v-t4);margin-bottom:.375rem}
.vmvm-welcome-title{font-size:1.5rem;font-weight:800;color:var(--v-t1);margin-bottom:.25rem}
.vmvm-welcome-sub{font-size:.875rem;color:var(--v-t3)}

.vmvm-btn-accent{
    display:inline-flex;align-items:center;gap:.375rem;background:var(--v-accent);color:#fff;
    border:none;padding:.625rem 1.5rem;border-radius:.75rem;font-weight:700;font-size:.875rem;
    transition:all .3s;box-shadow:0 2px 15px rgba(139,92,246,.2);text-decoration:none!important;white-space:nowrap
}
.vmvm-btn-accent:hover{background:var(--v-accent-h);transform:translateY(-2px);box-shadow:0 8px 25px rgba(139,92,246,.3);color:#fff!important}
.vmvm-btn-accent i{font-size:1rem}

/* Stats Row — single line: icon | number + label */
.vmvm-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.875rem;margin-bottom:1.5rem}
.vmvm-stat-card{
    background:rgba(255,255,255,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.3);border-radius:1rem;
    padding:.875rem 1rem;transition:all .4s cubic-bezier(.4,0,.2,1);text-decoration:none!important;
    display:flex!important;align-items:center;gap:.75rem;
    box-shadow:0 2px 8px rgba(0,0,0,.02),0 0 40px rgba(139,92,246,.04);position:relative
}
.vmvm-stat-card::before{
    content:'';position:absolute;top:-2rem;right:-2rem;width:6rem;height:6rem;
    background:rgba(139,92,246,.04);border-radius:50%;filter:blur(20px);pointer-events:none;
    transition:background .5s
}
.vmvm-stat-card:hover::before{background:rgba(139,92,246,.1)}
.vmvm-stat-card:hover{border-color:rgba(139,92,246,.25);background:rgba(255,255,255,.65);transform:translateY(-3px);box-shadow:0 12px 30px rgba(139,92,246,.08),0 0 60px rgba(139,92,246,.06);color:inherit!important}
.vmvm-stat-icon{
    width:2.25rem;height:2.25rem;border-radius:.625rem;display:flex;align-items:center;
    justify-content:center;font-size:.9rem;border:1px solid;flex-shrink:0
}
.vmvm-stat-purple{background:rgba(139,92,246,.08)!important;border-color:rgba(139,92,246,.15)!important;color:#8b5cf6!important}
.vmvm-stat-blue{background:rgba(59,130,246,.08)!important;border-color:rgba(59,130,246,.15)!important;color:#3b82f6!important}
.vmvm-stat-green{background:rgba(16,185,129,.08)!important;border-color:rgba(16,185,129,.15)!important;color:#10b981!important}
.vmvm-stat-amber{background:rgba(245,158,11,.08)!important;border-color:rgba(245,158,11,.15)!important;color:#f59e0b!important}
.vmvm-stat-text{min-width:0}
.vmvm-stat-card h4{font-size:1.375rem;font-weight:800;color:var(--v-t1);margin:0;line-height:1.2}
.vmvm-stat-card p{font-size:.7rem;color:var(--v-t3);font-weight:400;margin:0}

/* Section Header */
.vmvm-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.vmvm-section-header h3{font-size:1.0625rem;font-weight:700;color:var(--v-t1);display:flex;align-items:center;gap:.5rem;margin:0}
.vmvm-section-header h3 i{color:var(--v-accent);font-size:1.125rem}
.vmvm-link{color:var(--v-accent)!important;font-weight:600;font-size:.8125rem;text-decoration:none!important}
.vmvm-link:hover{color:var(--v-accent-h)!important}

/* Quick Actions — glass with glow */
.vmvm-quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.875rem}
.vmvm-action-card{
    background:rgba(255,255,255,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.3);border-radius:1rem;
    padding:1.25rem;display:flex;align-items:center;gap:.875rem;
    transition:all .4s cubic-bezier(.4,0,.2,1);text-decoration:none!important;color:inherit;
    box-shadow:0 2px 8px rgba(0,0,0,.02),0 0 40px rgba(139,92,246,.04);position:relative
}
.vmvm-action-card::before{
    content:'';position:absolute;top:-2rem;right:-2rem;width:6rem;height:6rem;
    background:rgba(139,92,246,.04);border-radius:50%;filter:blur(20px);pointer-events:none;
    transition:background .5s
}
.vmvm-action-card:hover::before{background:rgba(139,92,246,.1)}
.vmvm-action-card:hover{border-color:rgba(139,92,246,.25);background:rgba(255,255,255,.65);transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,92,246,.08),0 0 60px rgba(139,92,246,.06);color:inherit!important}
.vmvm-action-icon{
    width:2.75rem;height:2.75rem;border-radius:.75rem;display:flex;align-items:center;
    justify-content:center;font-size:1.25rem;flex-shrink:0;border:1px solid
}
.vmvm-action-card h5{font-size:.875rem;font-weight:700;color:var(--v-t1);margin:0 0 .15rem}
.vmvm-action-card p{font-size:.75rem;color:var(--v-t3);margin:0}

/* Ghost button (used in panels) */
.vmvm-btn-ghost{
    display:inline-flex;align-items:center;gap:.25rem;
    background:rgba(255,255,255,.4);border:1px solid var(--v-border);color:var(--v-t2);
    padding:.35rem .75rem;border-radius:.5rem;font-weight:600;font-size:.75rem;
    transition:all .3s;text-decoration:none!important
}
.vmvm-btn-ghost:hover{background:rgba(139,92,246,.06);border-color:var(--v-accent-b);color:var(--v-accent)!important}

/* ================================================================
   UTILITY
   ================================================================ */
.well{background:rgba(255,255,255,.3)!important;backdrop-filter:blur(10px)!important;border:1px solid var(--v-glass-border)!important;border-radius:.75rem!important}
.announcements-slider,.announcement-carousel{max-height:none!important;overflow:visible!important}
pre,code{background:rgba(255,255,255,.4)!important;border:1px solid var(--v-border)!important;border-radius:.375rem!important;color:var(--v-accent)!important;font-family:var(--v-mono)!important}
.progress{background:rgba(0,0,0,.06)!important;border-radius:99px!important;height:6px!important}
.progress-bar{background:var(--v-accent)!important;border-radius:99px!important}
.close{font-weight:300;text-shadow:none!important;opacity:.4!important}.close:hover{opacity:.7!important}
hr{border-color:var(--v-border)!important}
.text-primary{color:var(--v-accent)!important}.text-success{color:var(--v-ok)!important}
.text-danger{color:var(--v-err)!important}.text-muted{color:var(--v-t3)!important}

/* ================================================================
   HOMEPAGE (default WHMCS homepage.tpl styling)
   ================================================================ */
/* Product cards */
.card-columns.home{
    column-count:3!important;column-gap:1.25rem!important
}
@media(max-width:991px){.card-columns.home{column-count:2!important}}
@media(max-width:575px){.card-columns.home{column-count:1!important}}

.card-columns.home .card{
    background:rgba(255,255,255,.55)!important;backdrop-filter:blur(20px)!important;
    -webkit-backdrop-filter:blur(20px)!important;
    border:1px solid rgba(255,255,255,.35)!important;border-radius:1.5rem!important;
    box-shadow:0 2px 8px rgba(0,0,0,.03),0 0 60px rgba(139,92,246,.05)!important;
    transition:all .4s cubic-bezier(.4,0,.2,1)!important;
    display:inline-block!important;width:100%!important;break-inside:avoid!important
}
.card-columns.home .card:hover{
    border-color:rgba(139,92,246,.2)!important;transform:translateY(-4px)!important;
    box-shadow:0 12px 30px rgba(0,0,0,.06),0 0 80px rgba(139,92,246,.08)!important
}
.card-columns.home .card .card-body{
    padding:2rem 1.5rem!important
}
.card-columns.home .card .card-title{
    font-size:1.125rem!important;font-weight:700!important;margin-bottom:.75rem!important
}
.card-columns.home .card p{
    font-size:.875rem!important;font-weight:400!important;color:var(--v-t3)!important;
    line-height:1.6!important;margin-bottom:1.25rem!important
}
.card-columns.home .card .btn-outline-primary{
    border-color:var(--v-accent)!important;color:var(--v-accent)!important;
    border-radius:.75rem!important;font-weight:500!important;padding:.5rem 1.25rem!important;
    font-size:.875rem!important
}
.card-columns.home .card .btn-outline-primary:hover{
    background:var(--v-accent)!important;color:#fff!important
}

/* Action icon buttons */
.action-icon-btns{gap:.75rem 0}
.action-icon-btns a{
    display:flex!important;flex-direction:column!important;align-items:center!important;
    gap:.625rem!important;padding:1.5rem 1rem!important;border-radius:1.25rem!important;
    text-decoration:none!important;color:var(--v-t2)!important;font-size:.8125rem!important;
    font-weight:500!important;transition:all .3s!important;text-align:center!important;
    background:rgba(255,255,255,.4)!important;border:1px solid rgba(255,255,255,.3)!important
}
.action-icon-btns a:hover{
    background:rgba(255,255,255,.6)!important;border-color:rgba(139,92,246,.2)!important;
    transform:translateY(-2px)!important;color:var(--v-accent)!important
}
.action-icon-btns .ico-container{
    width:3.5rem!important;height:3.5rem!important;border-radius:1rem!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    background:rgba(139,92,246,.06)!important;border:1px solid rgba(139,92,246,.12)!important;
    margin:0!important
}
.action-icon-btns .ico-container i{font-size:1.25rem!important;color:var(--v-accent)!important}
/* Mobile: action icons 2-col grid */
@media(max-width:575px){
    .action-icon-btns{display:flex!important;flex-wrap:wrap!important}
    .action-icon-btns>[class*="col"]{flex:0 0 50%!important;max-width:50%!important;margin-bottom:.75rem!important}
    .action-icon-btns .offset-3{margin-left:0!important}
    .action-icon-btns .offset-md-2{margin-left:0!important}
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes vmvm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.vmvm-welcome,.vmvm-panel,.card,.panel{animation:vmvm-in .3s ease}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media(max-width:767.98px){
    .card,.panel,.vmvm-panel{border-radius:1rem!important}
    body{font-size:.875rem}
    .vmvm-welcome{padding:1.5rem}
    .vmvm-welcome-title{font-size:1.25rem}
    /* Keep stats as auto-fit, NOT forced 2-col */
    .vmvm-stats-row{grid-template-columns:repeat(2,1fr);gap:.625rem}
    .vmvm-quick-actions{grid-template-columns:1fr}

    /* Mobile: badge text shrink to fit */
    .client-home-cards .list-group-item .badge,
    .list-group-item .badge{
        font-size:.55rem!important;padding:.15rem .4rem!important;
        max-width:3.5rem!important;overflow:hidden!important;text-overflow:ellipsis!important;
        white-space:nowrap!important;flex-shrink:0!important
    }

    /* Mobile: list items less right padding for button */
    .client-home-cards .list-group-item{padding-right:4.5rem!important}
    .client-home-cards .list-group-item .btn,
    .list-group-item .btn{
        right:.75rem!important;font-size:.65rem!important;padding:.25rem .5rem!important
    }
}

/* Mobile navbar collapse: apply at tablet breakpoint where hamburger appears */
@media(max-width:1199px){
    /* ══════════════════════════════════════════════════════════
       JITTER FIX (definitive):
       backdrop-filter forces the browser to maintain a separate
       GPU compositing layer.  Bootstrap animates height via CSS
       transition.  Each frame of that animation invalidates the
       blur filter → GPU re-rasterizes every frame = jitter.

       Definitive fix: remove backdrop-filter from .navbar-collapse
       entirely.  The mobile menu uses a clean opaque white background
       instead — this eliminates jitter on ALL devices unconditionally.
       ══════════════════════════════════════════════════════════ */
    .navbar-collapse.collapsing{
        background:#fff!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
        border-top:1px solid var(--v-border)!important;
        padding:.5rem 0!important;
        will-change:height!important;
        transform:translateZ(0)!important;
        -webkit-transform:translateZ(0)!important;
        transition:height .2s ease-out!important;
        -webkit-transition:height .2s ease-out!important
    }
    .navbar-collapse.show{
        background:#fff!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
        border-top:1px solid var(--v-border)!important;
        padding:.5rem 0!important;
        will-change:auto!important;
        transform:none!important;
        -webkit-transform:none!important
    }

    /* ALL nav links inside collapsed menu — unified font/size/alignment */
    .navbar-collapse li>a,
    .navbar-collapse .nav-link,
    .navbar-collapse .navbar-nav>li>a,
    .navbar-collapse ul.nav>li>a{
        padding:.75rem 1.25rem!important;font-size:.9375rem!important;
        font-weight:500!important;color:var(--v-t2)!important;
        border-bottom:1px solid rgba(0,0,0,.04)!important;
        display:block!important;line-height:1.5!important;
        text-align:left!important;border-radius:0!important
    }
    /* "账户管理" dropdown toggle: same as other links */
    .navbar-collapse .dropdown>a,
    .navbar-collapse li.dropdown>a,
    .navbar-collapse .dropdown>.dropdown-toggle{
        padding:.75rem 1.25rem!important;font-size:.9375rem!important;
        font-weight:500!important;color:var(--v-t2)!important;
        display:flex!important;align-items:center!important;
        border-bottom:1px solid rgba(0,0,0,.04)!important;
        text-align:left!important;border-radius:0!important
    }
    .navbar-collapse .dropdown>a .caret,
    .navbar-collapse li.dropdown>a .caret{ margin-left:auto!important }
    .navbar-collapse li:last-child>a{ border-bottom:none!important }

    /* Dropdown inside collapse: no floating box, just indent */
    .navbar-collapse .dropdown-menu{
        box-shadow:none!important;border:none!important;
        background:rgba(139,92,246,.03)!important;
        backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
        padding:.125rem 0 .25rem 1.25rem!important;margin:0!important;
        border-radius:0!important;animation:none!important;transform:none!important
    }
    .navbar-collapse .dropdown-menu a,
    .navbar-collapse .dropdown-menu>li>a{
        padding:.5rem 1rem!important;font-size:.875rem!important;
        font-weight:400!important;color:var(--v-t3)!important;
        border-bottom:1px solid rgba(0,0,0,.03)!important;
        border-radius:.375rem!important
    }
    .navbar-collapse .dropdown-menu li:last-child>a{ border-bottom:none!important }
    .navbar-collapse .dropdown-menu a:hover,
    .navbar-collapse .dropdown-menu>li>a:hover{
        color:var(--v-accent)!important;background:rgba(139,92,246,.06)!important
    }

    /* Search box in mobile */
    header .input-group.search{
        border:none!important;box-shadow:none!important;outline:none!important;
        margin:.5rem 0!important
    }
}
/* ================================================================
   AUTH PAGES — Login / Register / Password Reset
   ================================================================ */
.vmvm-auth-wrap{
    display:flex;align-items:center;justify-content:center;
    min-height:65vh;padding:3rem 1rem;position:relative
}
.vmvm-auth-glow{
    position:absolute;top:-6rem;left:50%;transform:translateX(-50%);
    width:36rem;height:20rem;border-radius:50%;
    background:radial-gradient(circle,rgba(139,92,246,.08) 0%,transparent 70%);
    pointer-events:none;z-index:0;filter:blur(60px)
}
.vmvm-auth-card{
    position:relative;z-index:1;width:100%;max-width:480px;
    background:rgba(255,255,255,.75);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.5);border-radius:1.5rem;
    padding:3rem 2.5rem;
    box-shadow:0 4px 24px rgba(0,0,0,.04),0 0 80px rgba(139,92,246,.05)
}
.vmvm-auth-card-wide{max-width:540px}
.vmvm-auth-title{
    text-align:center;font-size:1.75rem;font-weight:700;color:var(--v-t1);margin:0 0 .5rem
}
.vmvm-auth-subtitle{
    text-align:center;font-size:.875rem;color:var(--v-t3);font-weight:400;margin:0 0 2rem
}

/* OAuth */
.vmvm-oauth-row{display:flex;gap:.75rem;margin-bottom:1.25rem}
.vmvm-oauth-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.7rem 1rem;border-radius:.75rem;font-size:.8125rem;font-weight:500;
    color:var(--v-t2);background:rgba(255,255,255,.6);
    border:1px solid rgba(0,0,0,.08);text-decoration:none;transition:all .2s
}
.vmvm-oauth-btn:hover{
    background:rgba(139,92,246,.04);border-color:rgba(139,92,246,.2);color:var(--v-accent)
}
.vmvm-auth-divider{
    display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;color:var(--v-t4);font-size:.75rem
}
.vmvm-auth-divider::before,.vmvm-auth-divider::after{
    content:'';flex:1;height:1px;background:rgba(0,0,0,.08)
}

/* Fields */
.vmvm-auth-form .vmvm-field{margin-bottom:1.25rem}
.vmvm-auth-form label{
    display:block;font-size:.8125rem;font-weight:500;color:var(--v-t2);margin-bottom:.375rem
}
.vmvm-auth-form .form-control,
.vmvm-auth-form select.form-control{
    width:100%;padding:.7rem 1rem;border-radius:.75rem;
    border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.5);
    font-size:.875rem;color:var(--v-t1);transition:all .2s;
    box-shadow:none;outline:none
}
.vmvm-auth-form .form-control:focus{
    border-color:rgba(139,92,246,.35);background:#fff;
    box-shadow:0 0 0 3px rgba(139,92,246,.08)
}
.vmvm-field-header{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:.375rem
}
.vmvm-field-header label{margin-bottom:0}
.vmvm-forgot{font-size:.75rem;color:var(--v-accent);font-weight:500;text-decoration:none}
.vmvm-forgot:hover{color:var(--v-accent-h)}

/* Checkbox */
.vmvm-check{margin-bottom:1.25rem}
.vmvm-check label{
    display:flex;align-items:flex-start;gap:.5rem;font-size:.8125rem;
    color:var(--v-t3);font-weight:400;cursor:pointer;line-height:1.4
}
.vmvm-check input[type="checkbox"]{
    width:1.125rem;height:1.125rem;border-radius:.25rem;accent-color:var(--v-accent);
    flex-shrink:0;margin-top:.1rem
}

/* Captcha */
.vmvm-captcha{margin-bottom:1.5rem;text-align:center}

/* Submit */
.vmvm-auth-submit{
    display:block;width:100%;padding:.75rem;border:none;border-radius:.75rem;
    background:var(--v-accent);color:#fff;font-size:.9375rem;font-weight:500;
    cursor:pointer;transition:all .3s;text-align:center;
    box-shadow:0 4px 16px rgba(139,92,246,.25)
}
.vmvm-auth-submit:hover{
    background:var(--v-accent-h);transform:translateY(-1px);
    box-shadow:0 6px 24px rgba(139,92,246,.35)
}
.vmvm-auth-submit:focus,.vmvm-auth-submit:active,.vmvm-auth-submit:focus-visible{
    outline:none!important;border:none!important;
    box-shadow:0 0 0 3px rgba(139,92,246,.3),0 4px 16px rgba(139,92,246,.25)!important;
    background:var(--v-accent-h)
}

/* Footer */
.vmvm-auth-footer{
    text-align:center;margin:1.75rem 0 0;font-size:.875rem;color:var(--v-t3);font-weight:400
}
.vmvm-auth-footer a{color:var(--v-accent);font-weight:600;text-decoration:none}
.vmvm-auth-footer a:hover{text-decoration:underline}

/* ================================================================
   CHECKOUT — Auth Toggle + Panels
   ================================================================ */
.vmvm-checkout-auth{margin-bottom:1.5rem}

/* Toggle tabs */
.vmvm-checkout-toggle{
    display:flex;gap:0;margin-bottom:1.5rem;
    background:rgba(0,0,0,.03);border-radius:.75rem;padding:3px;
    border:1px solid rgba(0,0,0,.06)
}
.vmvm-toggle-btn{
    flex:1;padding:.6rem 1rem;border:none;border-radius:.625rem;
    background:transparent;color:var(--v-t3);font-size:.8125rem;
    font-weight:600;cursor:pointer;transition:all .25s;
    text-align:center;outline:none
}
.vmvm-toggle-btn.active{
    background:#fff;color:var(--v-accent);
    box-shadow:0 1px 4px rgba(0,0,0,.08)
}
.vmvm-toggle-btn:hover:not(.active){
    color:var(--v-t1);background:rgba(255,255,255,.5)
}

/* Checkout panels (login/register) */
.vmvm-checkout-panel{
    animation:vmvm-fade-in .25s ease
}
@keyframes vmvm-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Fields inside checkout (reuse auth field style) */
.vmvm-checkout-panel .vmvm-field{margin-bottom:1rem}
.vmvm-checkout-panel .vmvm-field label,
.vmvm-checkout-auth label[for]{
    display:block;font-size:.8125rem;font-weight:500;color:var(--v-t2);margin-bottom:.375rem
}
.vmvm-checkout-panel .form-control{
    width:100%;padding:.7rem 1rem;border-radius:.75rem;
    border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.5);
    font-size:.875rem;color:var(--v-t1);transition:all .2s;
    box-shadow:none;outline:none
}
.vmvm-checkout-panel .form-control:focus{
    border-color:rgba(139,92,246,.35);background:#fff;
    box-shadow:0 0 0 3px rgba(139,92,246,.08)
}

/* Payment methods grid */
.vmvm-payment-methods{
    display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
    margin-top:.5rem
}
.vmvm-payment-option{
    display:flex;align-items:center;gap:.5rem;
    padding:.625rem 1rem;background:rgba(255,255,255,.7);
    border:1px solid rgba(0,0,0,.06);border-radius:.75rem;
    cursor:pointer;transition:all .2s;font-size:.8125rem;font-weight:500
}
.vmvm-payment-option:hover{
    border-color:rgba(139,92,246,.2);background:rgba(139,92,246,.03)
}
.vmvm-payment-option input[type="radio"]{accent-color:var(--v-accent)}
.vmvm-payment-option:has(input:checked){
    border-color:rgba(139,92,246,.35);background:rgba(139,92,246,.06);
    color:var(--v-accent)
}

/* ── Checkout: SSL security message — flex layout with proper icon ── */
.checkout-security-msg,.vmvm-security-msg{
    display:flex!important;align-items:center!important;gap:.75rem!important;
    padding:1rem 1.25rem!important;font-size:.8125rem!important;line-height:1.5!important;
    background:rgba(139,92,246,.04)!important;border:1px solid rgba(139,92,246,.1)!important;
    border-radius:.75rem!important;color:var(--v-t2)!important;
    margin-top:1.5rem!important
}
.checkout-security-msg i,.checkout-security-msg .fas,
.vmvm-security-msg i,.vmvm-security-msg .fas{
    font-size:1rem!important;color:var(--v-accent)!important;
    flex-shrink:0!important;line-height:1!important;
    width:1.25rem!important;text-align:center!important
}
.vmvm-security-msg span{flex:1}

/* ── Checkout: Password section layout ── */
.vmvm-pw-row{
    display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
    margin-top:1rem;margin-bottom:1.25rem;padding:.75rem 1rem;
    background:rgba(139,92,246,.03);border-radius:.75rem;
    border:1px solid rgba(139,92,246,.08)
}
.vmvm-pw-row .btn{
    flex-shrink:0;white-space:nowrap
}
.vmvm-pw-strength{
    flex:1;min-width:100px
}
.vmvm-pw-strength .progress{
    height:4px!important;border-radius:2px!important;margin:0!important;
    background:rgba(0,0,0,.06)!important;overflow:hidden!important
}
.vmvm-pw-strength .progress-bar{
    border-radius:2px!important;transition:width .3s ease!important
}
.vmvm-pw-strength p{
    font-size:.7rem!important;margin:.3rem 0 0!important;color:var(--v-t4)!important;
    text-align:center
}

/* ── Checkout: Hide state/province field that WHMCS may inject ── */
#frmCheckout #stateselect,
#frmCheckout .state-select-container,
#frmCheckout [name="state"]:not([type="hidden"]),
#frmCheckout select[name="state"]{
    display:none!important;height:0!important;overflow:hidden!important;
    position:absolute!important;left:-9999px!important;opacity:0!important;
    pointer-events:none!important
}

/* PW strength inside auth */
.vmvm-auth-form .pw-strength{margin-top:.5rem}
.vmvm-auth-form .generate-password{
    border-radius:.5rem;font-size:.75rem;padding:.375rem .75rem
}
/* Password strength tooltip / popover */
.vmvm-auth-form .pw-strength-info,
.vmvm-auth-card .popover,
.vmvm-auth-card .tooltip-inner{
    background:rgba(255,255,255,.85)!important;backdrop-filter:blur(16px)!important;
    border:1px solid rgba(139,92,246,.15)!important;border-radius:.75rem!important;
    color:var(--v-t1)!important;box-shadow:0 4px 16px rgba(0,0,0,.08)!important;
    font-size:.8125rem!important;padding:.875rem 1rem!important
}
/* Password tips alert inside auth card */
.vmvm-auth-card .alert,
.vmvm-auth-card .alert-info{
    background:rgba(139,92,246,.06)!important;
    border:1px solid rgba(139,92,246,.15)!important;
    border-radius:.75rem!important;color:var(--v-t1)!important;
    backdrop-filter:blur(8px)!important;font-size:.8125rem!important
}
/* Generate password modal + all modals glass effect */
.modal .modal-content{
    background:rgba(255,255,255,.85)!important;backdrop-filter:blur(24px)!important;
    -webkit-backdrop-filter:blur(24px)!important;
    border:1px solid rgba(139,92,246,.1)!important;border-radius:1.5rem!important;
    box-shadow:0 8px 32px rgba(0,0,0,.08),0 0 80px rgba(139,92,246,.06)!important
}
.modal .modal-header{
    background:linear-gradient(135deg,rgba(139,92,246,.06),rgba(139,92,246,.02))!important;
    border-bottom:1px solid rgba(139,92,246,.08)!important;
    padding:1.125rem 1.5rem!important
}
.modal .modal-header .modal-title,
.modal .modal-header h5{
    color:#1a1a2e!important;font-weight:700!important;font-size:1rem!important
}
.modal .modal-header .close,
.modal .modal-header .btn-close{
    color:#71717a!important;text-shadow:none!important;opacity:.7!important;
    font-size:1.25rem!important;font-weight:400!important;
    background:none!important;border:none!important;padding:.5rem!important
}
.modal .modal-body{
    padding:1.25rem 1.5rem!important;font-size:.875rem!important;color:#3f3f46!important
}
.modal .modal-body label,
.modal .modal-body .col-form-label{
    font-size:.8125rem!important;font-weight:600!important;color:#52525b!important
}
.modal .modal-body .form-control,
.modal .modal-body input{
    font-size:.875rem!important;border-radius:.625rem!important;
    border:1px solid rgba(0,0,0,.1)!important;padding:.5rem .75rem!important;
    background:rgba(255,255,255,.7)!important;backdrop-filter:none!important;
    transition:border-color .2s,box-shadow .2s!important
}
.modal .modal-body .form-control:focus,
.modal .modal-body input:focus{
    border-color:rgba(139,92,246,.35)!important;
    box-shadow:0 0 0 3px rgba(139,92,246,.08)!important;outline:none!important
}
.modal .modal-footer{
    border-top:1px solid rgba(139,92,246,.08)!important;
    padding:.875rem 1.5rem!important;background:rgba(249,250,251,.5)!important
}
/* Modal buttons - accent style */
.modal .modal-footer .btn-primary,
.modal .modal-footer .btn-success{
    background:var(--v-accent)!important;border:none!important;color:#fff!important;
    border-radius:.625rem!important;font-size:.8125rem!important;font-weight:600!important;
    padding:.5rem 1.25rem!important;box-shadow:0 2px 8px rgba(139,92,246,.2)!important;
    transition:all .2s!important
}
.modal .modal-footer .btn-primary:hover,
.modal .modal-footer .btn-success:hover{
    background:var(--v-accent-h)!important;transform:translateY(-1px)!important;
    box-shadow:0 4px 12px rgba(139,92,246,.3)!important
}
.modal .modal-footer .btn-default,
.modal .modal-footer .btn-secondary,
.modal .modal-footer [data-dismiss="modal"]{
    background:transparent!important;border:1px solid rgba(0,0,0,.1)!important;
    color:#52525b!important;border-radius:.625rem!important;
    font-size:.8125rem!important;font-weight:500!important;
    padding:.5rem 1.25rem!important;transition:all .2s!important
}
.modal .modal-footer .btn-default:hover,
.modal .modal-footer .btn-secondary:hover{
    background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.15)!important
}
/* Generate password action links */
.modal .modal-body a,
.modal .modal-body .btn-link{
    color:var(--v-accent)!important;font-weight:600!important;
    font-size:.8125rem!important;text-decoration:none!important
}
.modal .modal-body a:hover{color:var(--v-accent-h)!important}

/* Auth pages: outer card transparent */
.card:has(.vmvm-auth-wrap),
.card-body:has(.vmvm-auth-wrap){
    background:transparent!important;border:none!important;box-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border-radius:0!important;margin:0!important;padding:0!important;overflow:visible!important
}

/* Mobile */
@media(max-width:575px){
    .vmvm-auth-card{padding:2rem 1.5rem;border-radius:1.25rem}
    .vmvm-auth-title{font-size:1.375rem}
    .vmvm-oauth-row{flex-direction:column}
    .vmvm-auth-glow{width:20rem;height:14rem}
}

@media print{
    body{background:#fff!important}
    header,.sidebar,#footer,.master-breadcrumb{display:none!important}
    .card,.panel{box-shadow:none!important;backdrop-filter:none!important;background:#fff!important}
}

/* ================================================================
   MODAL FIX: Language/currency modal resets + themed
   ================================================================ */
.modal label{font-size:inherit!important;font-weight:inherit!important;color:inherit!important}
.modal .btn-outline-dark{
    background:transparent!important;border:1px solid rgba(0,0,0,.12)!important;
    color:#3f3f46!important;border-radius:.5rem!important;font-size:.875rem!important;font-weight:500!important;
    transition:all .2s!important
}
.modal .btn-outline-dark:hover,.modal .btn-outline-dark.active,.modal .btn-outline-dark:active{
    background:var(--v-accent)!important;color:#fff!important;
    border-color:var(--v-accent)!important
}
.modal a.item{display:block!important;cursor:pointer!important;color:#3f3f46!important;font-weight:500!important}


/* ================================================================
   VMVM CART PAGES — Shared Glassmorphism Styles
   ================================================================ */

/* ── Glass card base ── */
.vmvm-glass{
    background:rgba(255,255,255,.55)!important;
    backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;
    border:1px solid rgba(255,255,255,.6)!important;border-radius:1.5rem!important;
    box-shadow:0 8px 40px rgba(0,0,0,.04),0 0 80px rgba(139,92,246,.06),inset 0 1px 0 rgba(255,255,255,.7)!important;
    overflow:visible!important;position:relative!important;
    transition:all .4s cubic-bezier(.4,0,.2,1)!important
}
.vmvm-glass:hover{
    border-color:rgba(139,92,246,.2)!important;
    box-shadow:0 12px 48px rgba(0,0,0,.06),0 0 100px rgba(139,92,246,.08),inset 0 1px 0 rgba(255,255,255,.7)!important
}
.vmvm-glow{
    position:absolute;top:-4rem;right:-4rem;width:14rem;height:14rem;
    background:rgba(139,92,246,.1);border-radius:50%;filter:blur(50px);
    pointer-events:none;z-index:0;transition:all .5s
}
.vmvm-glass:hover .vmvm-glow{background:rgba(139,92,246,.18);width:16rem;height:16rem}
.vmvm-glow-bl{
    position:absolute;bottom:-3rem;left:-3rem;width:10rem;height:10rem;
    background:rgba(139,92,246,.05);border-radius:50%;filter:blur(40px);
    pointer-events:none;z-index:0
}
.vmvm-glow-sm{
    position:absolute;top:-2rem;right:-2rem;width:8rem;height:8rem;
    background:rgba(139,92,246,.06);border-radius:50%;filter:blur(30px);
    pointer-events:none;z-index:0
}

/* ── Summary card header ── */
.vmvm-summary-head{
    background:linear-gradient(135deg,rgba(139,92,246,.12),rgba(139,92,246,.04))!important;
    border-bottom:1px solid rgba(139,92,246,.1)!important;
    padding:1rem 1.25rem!important;text-align:center!important;
    position:relative!important;z-index:1!important;
    border-radius:1.5rem 1.5rem 0 0!important
}
.vmvm-summary-head h2{
    font-size:.9375rem!important;font-weight:700!important;color:#2d1b69!important;
    margin:0!important;letter-spacing:.02em!important;background:none!important;padding:0!important
}

/* ── Summary card body ── */
.vmvm-summary-body{padding:1.125rem 1.25rem!important;position:relative!important;z-index:1!important}
.vmvm-summary-body .clearfix{
    display:flex!important;justify-content:space-between!important;align-items:baseline!important;
    padding:.25rem 0!important;margin:0!important;border:none!important;overflow:visible!important
}
.vmvm-summary-body .clearfix .pull-left,
.vmvm-summary-body .clearfix .float-left{
    font-size:.8125rem!important;color:#71717a!important;font-weight:500!important;
    float:none!important;display:block!important;text-align:left!important
}
.vmvm-summary-body .clearfix .pull-right,
.vmvm-summary-body .clearfix .float-right{
    font-size:.8125rem!important;color:#18181b!important;font-weight:600!important;
    float:none!important;display:block!important;text-align:right!important;
    white-space:nowrap!important;margin-left:auto!important
}
.vmvm-summary-body .bordered-totals{
    border-top:1px solid rgba(139,92,246,.06)!important;
    border-bottom:1px solid rgba(139,92,246,.06)!important;
    margin:.375rem 0!important;padding:.25rem 0!important
}
.vmvm-summary-body .recurring-totals{padding:.25rem 0!important;border:none!important}
.vmvm-summary-body .recurring-totals .recurring-charges{
    font-size:.75rem!important;color:#52525b!important;font-style:italic!important;line-height:1.6!important
}
.vmvm-summary-body .recurring-totals .cost{font-weight:600!important;color:#18181b!important}

/* ── Total due today ── */
.vmvm-summary-body .total-due-today{
    text-align:right!important;margin-top:.75rem!important;padding-top:.625rem!important;
    border-top:1px solid rgba(139,92,246,.1)!important;background:none!important
}
.vmvm-summary-body .total-due-today .amt{
    font-size:1.25rem!important;font-weight:800!important;color:#18181b!important;
    display:block!important;line-height:1.3!important;text-align:right!important
}
.vmvm-summary-body .total-due-today span:not(.amt){
    font-size:.6875rem!important;color:#71717a!important;font-weight:500!important;
    display:block!important;text-align:right!important;letter-spacing:.04em!important
}

/* ── AJAX summary overrides (configureproduct) ── */
.vmvm-glass .summary-container *{}
.vmvm-glass .summary-container .font-size-36,
.vmvm-glass .summary-container .font-size-30,
.vmvm-glass .summary-container .display-4,
.vmvm-glass .summary-container .display-3{
    font-size:.875rem!important;font-weight:700!important;color:#18181b!important;
    background:none!important;margin:0 0 .5rem!important;padding:0!important;line-height:1.4!important
}
.vmvm-glass .primary-bg-color,
.vmvm-glass span.primary-bg-color,
.vmvm-glass div.primary-bg-color{
    background:none!important;background-color:transparent!important;
    color:#18181b!important;font-weight:700!important;padding:0!important;font-size:.875rem!important
}
.vmvm-glass .panel,.vmvm-glass .card,
.vmvm-glass .panel-default,.vmvm-glass .card-default{
    background:transparent!important;border:none!important;box-shadow:none!important;margin:0!important
}
.vmvm-glass .panel-heading,.vmvm-glass .card-header{
    background:transparent!important;border:none!important;padding:0!important
}
.vmvm-glass .panel-body,.vmvm-glass .card-body{padding:0!important}
.vmvm-glass .total-due-today span.amt,
.vmvm-glass .summary-container .total-due-today span.amt{
    font-size:1.25rem!important;font-weight:800!important;color:#18181b!important;
    display:block!important;line-height:1.3!important;text-align:right!important
}
.vmvm-glass hr{border-color:rgba(139,92,246,.06)!important;margin:.375rem 0!important}

/* ── Purple action buttons ── */
.vmvm-btn-primary{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.5rem!important;
    background:linear-gradient(135deg,#8b5cf6,#7c3aed)!important;
    color:#fff!important;border:none!important;border-radius:.75rem!important;
    padding:.75rem 2rem!important;font-size:.9375rem!important;font-weight:600!important;
    box-shadow:0 4px 20px rgba(139,92,246,.3)!important;cursor:pointer!important;
    transition:all .3s!important;text-decoration:none!important;margin-top:1rem!important
}
.vmvm-btn-primary:hover{
    background:linear-gradient(135deg,#7c3aed,#6d28d9)!important;color:#fff!important;
    transform:translateY(-2px)!important;box-shadow:0 8px 28px rgba(139,92,246,.4)!important;
    text-decoration:none!important
}
.vmvm-btn-primary.disabled{opacity:.5!important;pointer-events:none!important}
.vmvm-btn-primary:focus,.vmvm-btn-primary:active,.vmvm-btn-primary:focus-visible{
    outline:none!important;border:none!important;
    box-shadow:0 0 0 3px rgba(139,92,246,.3),0 4px 20px rgba(139,92,246,.3)!important;
    background:linear-gradient(135deg,#7c3aed,#6d28d9)!important
}
.vmvm-link{
    font-size:.8125rem!important;color:#8b5cf6!important;font-weight:500!important;
    text-decoration:none!important;display:inline-block!important;margin-top:.625rem!important
}
.vmvm-link:hover{color:#7c3aed!important;text-decoration:underline!important}

/* ── Product panel (config page) ── */
.vmvm-product-panel{
    background:rgba(255,255,255,.55)!important;
    backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
    border:1px solid rgba(255,255,255,.5)!important;border-radius:1.25rem!important;
    box-shadow:0 4px 24px rgba(0,0,0,.03),0 0 40px rgba(139,92,246,.02),inset 0 1px 0 rgba(255,255,255,.6)!important;
    padding:1.5rem!important;margin-bottom:1.25rem!important;
    position:relative!important;overflow:visible!important;transition:all .3s!important
}
.vmvm-product-panel:hover{
    border-color:rgba(139,92,246,.12)!important;
    box-shadow:0 8px 32px rgba(0,0,0,.04),0 0 60px rgba(139,92,246,.04),inset 0 1px 0 rgba(255,255,255,.6)!important
}
.vmvm-section-title{
    font-size:.8125rem;font-weight:700;color:#7c3aed;text-transform:uppercase;
    letter-spacing:.05em;margin-bottom:.75rem;padding-bottom:.5rem;
    border-bottom:1px solid rgba(139,92,246,.1);position:relative;z-index:1
}
.vmvm-info-bar{
    background:rgba(245,158,11,.04);border:1px solid rgba(245,158,11,.12);
    border-radius:.75rem;padding:.75rem 1rem;font-size:.8125rem;color:#92400e;
    text-align:center;margin-top:1.25rem
}
.vmvm-info-bar a{color:#8b5cf6;font-weight:600}
.vmvm-addon-card{
    background:rgba(255,255,255,.5);backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.4);border-radius:1rem;
    transition:all .3s;box-shadow:0 2px 12px rgba(0,0,0,.02)
}
.vmvm-addon-card:hover{border-color:rgba(139,92,246,.2);box-shadow:0 4px 20px rgba(139,92,246,.04)}
.vmvm-addon-card.selected{border-color:rgba(139,92,246,.3);background:rgba(245,243,255,.5)}

/* ── Cart items list (viewcart) ── */
.vmvm-items-panel{
    background:rgba(255,255,255,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.5);border-radius:1.25rem;
    box-shadow:0 4px 24px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.6);
    margin-bottom:1.25rem
}
.vmvm-items-header{
    background:linear-gradient(135deg,rgba(139,92,246,.06),rgba(139,92,246,.02));
    border-bottom:1px solid rgba(139,92,246,.06);
    padding:.625rem 1.25rem;font-size:.75rem;font-weight:600;color:#71717a;
    text-transform:uppercase;letter-spacing:.04em
}
.vmvm-items-panel .view-cart-items{padding:0}
.vmvm-items-panel .view-cart-items .item{
    padding:.875rem 1.25rem;border-bottom:1px solid rgba(0,0,0,.04);transition:background .2s
}
.vmvm-items-panel .view-cart-items .item:last-child{border-bottom:none}
.vmvm-items-panel .view-cart-items .item:hover{background:rgba(139,92,246,.02)}
.vmvm-items-panel .item-title{
    font-size:.875rem!important;font-weight:600!important;color:#18181b!important;display:block!important;margin-bottom:.125rem!important
}
.vmvm-items-panel .item-title .btn-link{font-size:.75rem!important;color:#8b5cf6!important;padding:.125rem .375rem!important}
.vmvm-items-panel .item-group{font-size:.75rem!important;color:#a1a1aa!important;display:block!important;font-style:italic!important}
.vmvm-items-panel .item-domain{font-size:.75rem!important;color:#52525b!important;display:block!important}
.vmvm-items-panel .item-price{text-align:right!important;font-size:.875rem!important;font-weight:600!important;color:#18181b!important}
.vmvm-items-panel .item-price .cycle{font-size:.75rem!important;font-weight:400!important;color:#71717a!important;display:block!important}
.vmvm-items-panel .btn-remove-from-cart{color:#d4d4d8!important;font-size:.875rem!important;transition:color .2s!important}
.vmvm-items-panel .btn-remove-from-cart:hover{color:#ef4444!important}
.vmvm-empty-cart{text-align:right;padding:.5rem 0;margin-bottom:1rem}
.vmvm-empty-cart .btn-link{font-size:.75rem!important;color:#8b5cf6!important;font-weight:500!important}
.vmvm-empty-cart .btn-link:hover{color:#7c3aed!important}
.vmvm-items-panel .view-cart-empty{padding:2rem;text-align:center;color:#a1a1aa;font-size:.875rem}

/* ── Promo / Tabs panel ── */
.vmvm-tabs-panel{
    background:rgba(255,255,255,.55)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
    border:1px solid rgba(255,255,255,.5)!important;border-radius:1.25rem!important;
    box-shadow:0 4px 24px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.6)!important;
    padding:1.25rem!important;position:relative!important
}
.vmvm-tabs-panel .vmvm-glow-sm{
    position:absolute;top:-2rem;right:-2rem;width:8rem;height:8rem;
    background:rgba(139,92,246,.05);border-radius:50%;filter:blur(30px);pointer-events:none;z-index:0
}
.vmvm-tabs-panel .nav-tabs{border-bottom:1px solid rgba(139,92,246,.08)!important;position:relative;z-index:1}
.vmvm-tabs-panel .nav-tabs .nav-link{
    font-size:.8125rem!important;font-weight:600!important;color:#71717a!important;border:none!important;
    padding:.5rem .75rem!important;border-radius:.5rem .5rem 0 0!important;background:transparent!important
}
.vmvm-tabs-panel .nav-tabs .nav-link.active{
    color:#7c3aed!important;border-bottom:2px solid #8b5cf6!important;background:transparent!important
}
.vmvm-tabs-panel .tab-content{padding:.875rem 0 .25rem!important;position:relative;z-index:1}
.vmvm-tabs-panel .form-group{position:relative;z-index:1}
.vmvm-tabs-panel .form-control{
    border-radius:.625rem!important;border:1px solid rgba(0,0,0,.08)!important;
    font-size:.8125rem!important;padding:.5rem .75rem .5rem 2.25rem!important
}
.vmvm-tabs-panel .prepend-icon .field-icon{
    position:absolute!important;left:.75rem!important;top:50%!important;
    transform:translateY(-50%)!important;z-index:2!important;
    color:#8b5cf6!important;font-size:.875rem!important;pointer-events:none!important;
    width:auto!important;height:auto!important;line-height:1!important
}
.vmvm-tabs-panel .prepend-icon{position:relative!important}
.vmvm-tabs-panel .btn-default,.vmvm-tabs-panel .btn-block{
    border-radius:.625rem!important;font-size:.8125rem!important;font-weight:500!important;
    border:1px solid rgba(139,92,246,.15)!important;color:#7c3aed!important;background:rgba(139,92,246,.04)!important
}
.vmvm-tabs-panel .btn-default:hover,.vmvm-tabs-panel .btn-block:hover{
    background:rgba(139,92,246,.08)!important;border-color:rgba(139,92,246,.25)!important
}

/* ── Modal styling ── */
.modal-remove-item .modal-content{border-radius:1rem!important;border:1px solid rgba(255,255,255,.5)!important}
.modal-remove-item .modal-footer .btn-primary{
    background:#8b5cf6!important;border-color:#8b5cf6!important;border-radius:.5rem!important
}
.modal-remove-item .modal-footer .btn-primary:hover{background:#7c3aed!important}
.modal-remove-item .modal-footer .btn-default{border-radius:.5rem!important}


/* ================================================================
   VMVM CART — Extra overrides for WHMCS defaults
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   LOGGED-IN CHECKOUT: glassmorphism wrapping for each section
   WHMCS renders these sections inside #frmCheckout directly.
   We target by WHMCS's own class names + sub-heading pattern.
   ────────────────────────────────────────────────────────────── */

/* Glass card mixin — applied to each checkout section block */
#frmCheckout .sub-heading,
#order-standard_cart .sub-heading{
    font-size:.75rem!important;font-weight:600!important;
    color:var(--v-accent)!important;text-transform:uppercase!important;
    letter-spacing:.07em!important;
    margin:2rem 0 1.25rem!important;
    padding:0!important;
    border:none!important;
    width:100%!important;
    text-align:center!important
}
/* Kill the WHMCS default dark span inside sub-heading */
#frmCheckout .sub-heading .primary-bg-color,
#order-standard_cart .sub-heading .primary-bg-color{
    background:none!important;background-color:transparent!important;
    color:var(--v-accent)!important;padding:0!important;
    border-radius:0!important;font-weight:700!important
}

/* Account selection cards */
#frmCheckout #containerExistingAccountSelect .account,
#order-standard_cart .account-select-container .account{
    background:rgba(255,255,255,.6)!important;
    backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
    border:1px solid rgba(255,255,255,.5)!important;
    border-radius:1rem!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.7)!important;
    padding:.875rem 1.125rem!important;
    margin-bottom:.625rem!important;
    transition:all .2s!important;cursor:pointer!important
}
#frmCheckout #containerExistingAccountSelect .account:hover,
#order-standard_cart .account-select-container .account:hover{
    border-color:rgba(139,92,246,.25)!important;
    background:rgba(245,243,255,.6)!important
}
#frmCheckout #containerExistingAccountSelect .account.active,
#order-standard_cart .account-select-container .account.active{
    border-color:rgba(139,92,246,.4)!important;
    background:rgba(245,243,255,.65)!important;
    box-shadow:0 4px 16px rgba(139,92,246,.08),inset 0 1px 0 rgba(255,255,255,.7)!important
}
/* Account radio labels — block layout, not flex */
#frmCheckout .account .radio-inline,
#frmCheckout .account label{
    display:block!important;
    cursor:pointer!important;margin:0!important;font-weight:400!important
}
#frmCheckout .account .radio-inline input[type="radio"],
#frmCheckout .account label input[type="radio"]{
    accent-color:var(--v-accent)!important;
    margin-right:.5rem!important;vertical-align:middle!important
}
#frmCheckout .account .address strong{
    font-size:.875rem!important;font-weight:600!important;color:var(--v-t1)!important;
    vertical-align:middle!important
}
#frmCheckout .account .address .small{
    font-size:.775rem!important;color:var(--v-t3)!important;line-height:1.5!important;
    display:block!important;margin-top:.25rem!important
}
/* Currency badge on account card */
#frmCheckout .account .label-info{
    background:rgba(139,92,246,.1)!important;color:var(--v-accent)!important;
    border-radius:99px!important;font-size:.65rem!important;
    padding:.2rem .6rem!important;font-weight:500!important;
    max-width:none!important;overflow:visible!important;
    margin-left:.375rem!important
}

/* Credit balance section */
/* Mobile: account container - ensure cols stack properly */
#frmCheckout #containerExistingAccountSelect{
    margin-left:0!important;margin-right:0!important
}
#frmCheckout #containerExistingAccountSelect>[class*="col-"]{
    padding-left:.375rem!important;padding-right:.375rem!important
}
@media(max-width:767.98px){
    #frmCheckout #containerExistingAccountSelect>[class*="col-"]{
        width:100%!important;flex:0 0 100%!important;max-width:100%!important;
        padding-left:0!important;padding-right:0!important
    }
}

#frmCheckout #applyCreditContainer,
#order-standard_cart .apply-credit-container{
    background:rgba(255,255,255,.55)!important;
    backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
    border:1px solid rgba(255,255,255,.5)!important;
    border-radius:1rem!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.7)!important;
    padding:1rem 1.25rem!important;
    margin-bottom:1rem!important
}
#frmCheckout #applyCreditContainer p{
    font-size:.875rem!important;color:var(--v-t2)!important;margin-bottom:.75rem!important;font-weight:400!important
}
#frmCheckout #applyCreditContainer .radio,
#frmCheckout #applyCreditContainer label.radio{
    /* Use block layout instead of flex to avoid breaking Bootstrap's radio float styling */
    display:block!important;
    padding:.75rem 1rem!important;border-radius:.875rem!important;
    border:1px solid rgba(0,0,0,.05)!important;
    background:rgba(255,255,255,.6)!important;
    margin-bottom:.5rem!important;cursor:pointer!important;
    font-size:.875rem!important;font-weight:400!important;
    transition:all .2s!important;overflow:hidden!important
}
#frmCheckout #applyCreditContainer .radio:hover,
#frmCheckout #applyCreditContainer label.radio:hover{
    border-color:rgba(139,92,246,.2)!important;background:rgba(245,243,255,.5)!important
}
/* The radio input inside: let it float naturally, no flex reordering */
#frmCheckout #applyCreditContainer .radio input[type="radio"],
#frmCheckout #applyCreditContainer label.radio input[type="radio"]{
    accent-color:var(--v-accent)!important;
    margin-right:.5rem!important;
    vertical-align:middle!important;
    float:none!important;
    position:static!important
}
/* The text spans next to radio */
#frmCheckout #applyCreditContainer .radio span,
#frmCheckout #applyCreditContainer label.radio span{
    vertical-align:middle!important
}

/* Payment gateway section wrapper */
#frmCheckout #paymentGatewaysContainer{
    background:rgba(255,255,255,.55)!important;
    backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
    border:1px solid rgba(255,255,255,.5)!important;
    border-radius:1rem!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03),inset 0 1px 0 rgba(255,255,255,.7)!important;
    padding:1rem 1.25rem!important;margin-bottom:1rem!important
}

/* Total due today badge (green glass) */
#frmCheckout #totalDueToday.alert-success,
#order-standard_cart #totalDueToday.alert-success{
    background:rgba(236,253,245,.85)!important;
    border:1px solid rgba(16,185,129,.2)!important;
    border-radius:1rem!important;color:#065f46!important;
    text-align:center!important;font-size:.875rem!important;
    font-weight:400!important;padding:.75rem 1rem!important;
    background-image:none!important
}
#frmCheckout #totalDueToday.alert-success::before,
#order-standard_cart #totalDueToday.alert-success::before{
    display:none!important
}

/* TOS checkbox: full-width natural block, not tiny centered box */
#frmCheckout .vmvm-check{
    padding:0!important;
    background:none!important;
    border:none!important;
    border-radius:0!important;
    margin-bottom:1rem!important;
    display:flex!important;
    align-items:center!important;
    gap:.5rem!important;
    justify-content:center!important
}

/* Kill WHMCS default striped rows and header bg */
#order-standard_cart .view-cart-items-header,
.vmvm-items-panel .view-cart-items-header{
    background:none!important;border:none!important;padding:0!important;margin:0!important;
    font-size:0!important;height:0!important;overflow:hidden!important
}
#order-standard_cart .view-cart-items .item{
    background:transparent!important;
    border-bottom:1px solid rgba(0,0,0,.04)!important
}
#order-standard_cart .view-cart-items .item:nth-child(odd),
#order-standard_cart .view-cart-items .item:nth-child(even){
    background:transparent!important
}
/* Item text sizes */
#order-standard_cart .item-title,
.vmvm-items-panel .item-title{
    font-size:.875rem!important;font-weight:600!important;color:#18181b!important
}
#order-standard_cart .item-group,
.vmvm-items-panel .item-group{
    font-size:.75rem!important;color:#a1a1aa!important;font-style:italic!important
}
#order-standard_cart .item-price,
.vmvm-items-panel .item-price{
    font-size:.875rem!important;font-weight:600!important;color:#18181b!important;text-align:right!important
}
#order-standard_cart .item-price .cycle,
.vmvm-items-panel .item-price .cycle{
    font-size:.6875rem!important;font-weight:400!important;color:#71717a!important
}

/* ── Promo input icon fix ── */
.vmvm-tabs-panel .prepend-icon,
#order-standard_cart .prepend-icon{
    position:relative!important
}
.vmvm-tabs-panel .prepend-icon .field-icon,
#order-standard_cart .prepend-icon .field-icon{
    position:absolute!important;left:.75rem!important;top:50%!important;
    transform:translateY(-50%)!important;z-index:2!important;
    color:#8b5cf6!important;font-size:.875rem!important;pointer-events:none!important;
    width:auto!important;height:auto!important;line-height:1!important;
    background:none!important;border:none!important;margin:0!important;padding:0!important
}
.vmvm-tabs-panel .prepend-icon .form-control,
.vmvm-tabs-panel .prepend-icon input.field,
#order-standard_cart .prepend-icon .form-control,
#order-standard_cart .prepend-icon input.field{
    padding-left:2.5rem!important
}

/* ── Force viewcart summary to match configproduct style ── */
#order-standard_cart .order-summary{
    background:transparent!important;border:none!important;box-shadow:none!important;
    padding:0!important;margin:0!important
}
#order-standard_cart .order-summary > h2,
#order-standard_cart .order-summary > .font-size-30{
    display:none!important
}
#order-standard_cart .order-summary .summary-container{
    background:transparent!important
}
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-success.btn-checkout{
    background:linear-gradient(135deg,#8b5cf6,#7c3aed)!important;
    color:#fff!important;border:none!important;border-radius:.75rem!important;
    padding:.75rem 2rem!important;font-size:.9375rem!important;font-weight:600!important;
    box-shadow:0 4px 20px rgba(139,92,246,.3)!important;
    transition:all .3s!important;text-decoration:none!important
}
#order-standard_cart .btn-checkout:hover{
    background:linear-gradient(135deg,#7c3aed,#6d28d9)!important;
    transform:translateY(-2px)!important;box-shadow:0 8px 28px rgba(139,92,246,.4)!important
}
#order-standard_cart .btn-continue-shopping{
    font-size:.8125rem!important;color:#8b5cf6!important;font-weight:500!important
}


/* ================================================================
   VMVM CART — V10 Fixes
   ================================================================ */

/* ── Items panel: remove outer white border/shadow ── */
.vmvm-items-panel{
    border:none!important;box-shadow:none!important;
    background:rgba(255,255,255,.45)!important;border-radius:1rem!important
}

/* ── Item price: smaller font ── */
#order-standard_cart .item-price span,
.vmvm-items-panel .item-price span,
.vmvm-items-panel .item-price > span:first-child{
    font-size:1em!important
}

/* ── Remove button: more spacing from edge ── */
#order-standard_cart .view-cart-items .item .row > .col-sm-1,
.vmvm-items-panel .view-cart-items .item .row > .col-sm-1{
    padding-right:1rem!important;display:flex!important;align-items:center!important;
    justify-content:center!important
}

/* ── Promo section fixes ── */
.vmvm-tabs-panel .nav-tabs .nav-link.active,
.vmvm-tabs-panel .nav-tabs .nav-link{
    text-align:left!important
}
.vmvm-tabs-panel .nav-tabs{
    justify-content:flex-start!important
}

/* ── Promo icon overlap — nuclear fix ── */
#order-standard_cart .prepend-icon .field-icon,
.view-cart-tabs .prepend-icon .field-icon,
.vmvm-tabs-panel .prepend-icon .field-icon,
.vmvm-promo-wrap .field-icon{
    display:none!important
}
.vmvm-promo-input{
    padding-left:.875rem!important;
    border-radius:.625rem!important;border:1px solid rgba(0,0,0,.08)!important;
    font-size:.875rem!important;height:auto!important;
    padding-top:.625rem!important;padding-bottom:.625rem!important
}

/* ── viewcart checkout btn text centering ── */
.vmvm-btn-primary{
    text-align:center!important;
    justify-content:center!important;
    width:auto!important
}

/* ── viewcart summary: kill order-summary default ── */
#orderSummary.vmvm-glass .order-summary,
.vmvm-glass .order-summary{
    background:transparent!important;padding:0!important;margin:0!important;
    border:none!important;box-shadow:none!important
}
.vmvm-glass .order-summary > h2.font-size-30,
.vmvm-glass .order-summary > h2{
    display:none!important
}


/* ================================================================
   VMVM CART — V10.1 Critical Fixes
   ================================================================ */

/* ── Summary container gray bg kill ── */
.vmvm-glass .summary-container,
.vmvm-summary-body .summary-container,
#orderSummary .summary-container,
#order-standard_cart .summary-container{
    background:transparent!important;background-color:transparent!important;
    border:none!important;box-shadow:none!important;padding:0!important
}
.vmvm-summary-body .subtotal{
    border:none!important;background:transparent!important
}

/* ── Checkout btn: always centered ── */
.vmvm-btn-primary{
    display:inline-flex!important;align-items:center!important;
    justify-content:center!important;text-align:center!important;
    gap:.5rem!important;
    margin-left:auto!important;margin-right:auto!important
}
.vmvm-btn-primary i{
    display:inline-block!important;font-size:.875rem!important;
    color:#fff!important;visibility:visible!important;
    width:auto!important;height:auto!important
}

/* ================================================================
   MODAL FIX — Single authoritative block
   The #1 cause of "modal behind backdrop" in glassmorphism themes:
   backdrop-filter on ANY ancestor creates a new stacking context,
   trapping the modal inside it even if z-index is high.
   
   Solution: Bootstrap appends .modal-backdrop to <body>, which is
   OUTSIDE the stacking context. But the .modal div itself may be
   INSIDE a stacking context if it's in the page HTML.
   
   Fix: Use JS to move modal to <body> before showing.
   Also ensure CSS z-index is correct as fallback.
   ================================================================ */
body.modal-open{overflow:hidden!important}
.modal-backdrop{z-index:1040!important}
.modal-backdrop.in,.modal-backdrop.show{opacity:.5!important}
.modal{z-index:1050!important}
.modal.in,.modal.show,.modal.fade.in,.modal.fade.show{display:block!important}
.modal-dialog{pointer-events:auto!important}
.modal-content{
    pointer-events:auto!important;background:#fff!important;
    border-radius:1rem!important;border:1px solid rgba(0,0,0,.06)!important;
    box-shadow:0 20px 60px rgba(0,0,0,.15)!important
}
.modal-body,.modal-footer,.modal-header{pointer-events:auto!important}
.modal .btn,.modal button,.modal a.btn,
.modal-footer .btn,.modal-footer button{
    pointer-events:auto!important;cursor:pointer!important
}
.modal .close,.modal button.close{
    pointer-events:auto!important;cursor:pointer!important;opacity:1!important
}
/* Reset stacking context on page elements so modals aren't trapped */
#order-standard_cart,.cart-body,.secondary-cart-body,
.secondary-cart-sidebar,#scrollingPanelContainer,
.vmvm-glass,.vmvm-items-panel,.vmvm-tabs-panel,.vmvm-product-panel,
#main-body,.main-content{
    z-index:auto!important
}


/* ================================================================
   VMVM CART — V10.2 Modal styling + items panel + promo fixes
   ================================================================ */

/* ── Remove/Empty modal: glassmorphism style ── */
.modal-remove-item .modal-content{
    background:rgba(255,255,255,.85)!important;
    backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;
    border:1px solid rgba(255,255,255,.6)!important;border-radius:1.5rem!important;
    box-shadow:0 20px 60px rgba(0,0,0,.1),0 0 80px rgba(139,92,246,.06)!important;
    overflow:visible!important
}
.modal-remove-item .modal-body{
    padding:2rem 2rem 1.25rem!important;text-align:center!important
}
.modal-remove-item .modal-body .fa-3x{
    font-size:2rem!important;color:#8b5cf6!important;
    display:block!important;margin-bottom:.75rem!important
}
.modal-remove-item .modal-body .modal-title{
    font-size:1.125rem!important;font-weight:700!important;color:#18181b!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;
    gap:.5rem!important;margin-bottom:.75rem!important
}
.modal-remove-item .modal-body .modal-title i{
    font-size:2rem!important;color:#8b5cf6!important
}
.modal-remove-item .modal-body .modal-title span{
    font-size:1.125rem!important
}
.modal-remove-item .modal-footer{
    padding:1rem 2rem 1.75rem!important;border-top:1px solid rgba(139,92,246,.06)!important;
    justify-content:center!important;gap:.75rem!important;
    background:transparent!important
}
.modal-remove-item .modal-footer .btn-default,
.modal-remove-item .modal-footer [data-dismiss="modal"]{
    border-radius:.75rem!important;padding:.5rem 1.5rem!important;
    font-size:.875rem!important;font-weight:500!important;
    border:1px solid rgba(0,0,0,.1)!important;background:#fff!important;color:#52525b!important;
    min-width:5rem!important
}
.modal-remove-item .modal-footer .btn-default:hover{
    border-color:rgba(0,0,0,.15)!important;background:#fafafa!important
}
.modal-remove-item .modal-footer .btn-primary{
    border-radius:.75rem!important;padding:.5rem 1.5rem!important;
    font-size:.875rem!important;font-weight:600!important;
    background:linear-gradient(135deg,#8b5cf6,#7c3aed)!important;
    border:none!important;color:#fff!important;
    box-shadow:0 4px 16px rgba(139,92,246,.25)!important;
    min-width:5rem!important
}
.modal-remove-item .modal-footer .btn-primary:hover{
    background:linear-gradient(135deg,#7c3aed,#6d28d9)!important;
    box-shadow:0 6px 20px rgba(139,92,246,.35)!important
}
.modal-remove-item .close{
    position:absolute!important;top:1rem!important;right:1.25rem!important;
    font-size:1.25rem!important;color:#a1a1aa!important;opacity:1!important;
    z-index:10!important
}
.modal-remove-item .close:hover{color:#18181b!important}

/* ── Items panel: kill white border completely ── */
.vmvm-items-panel{
    border:none!important;box-shadow:none!important;
    background:transparent!important;border-radius:0!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
.vmvm-items-panel .view-cart-items{
    background:transparent!important;border:none!important;
    box-shadow:none!important
}

/* ── Promo tab title size ── */
.vmvm-tabs-panel .nav-tabs .nav-link.active{
    font-size:1.125rem!important;font-weight:700!important;color:#7c3aed!important
}


/* ================================================================
   MOBILE — Navbar fix + Cart page spacing
   ================================================================ */
@media(max-width:767.98px){

    /* ── Navbar: hide search, keep logo+cart+hamburger ── */
    header .input-group.search,
    header form.search,
    header .navbar-search{
        display:none!important
    }
    header .navbar .container,
    header .navbar .container-fluid{
        flex-wrap:nowrap!important;align-items:center!important;
        padding:0 .75rem!important
    }
    header .navbar .navbar-header,
    header .navbar .navbar-brand-wrapper{
        flex:0 0 auto!important;display:flex!important;align-items:center!important
    }
    header .navbar .cart-btn,
    header .navbar .navbar-toggler,
    header .navbar .navbar-toggle{
        flex-shrink:0!important;
        width:2.25rem!important;height:2.25rem!important;padding:0!important;
        overflow:visible!important
    }
    header .navbar .navbar-right,
    header .navbar .nav.navbar-right{
        display:flex!important;align-items:center!important;
        flex-wrap:nowrap!important;gap:.375rem!important;
        margin-left:auto!important;
        padding-top:8px!important;padding-right:6px!important;
        overflow:visible!important
    }

    /* ── Mobile: Currency selector stays inline, not on separate row ── */
    .sidebar-header-currency,
    #currencyChooser,
    .currency-chooser,
    .sidebar-header .pull-right,
    .sidebar-header .float-right{
        display:inline-flex!important;align-items:center!important;
        float:none!important;margin:0!important
    }
    /* Sidebar collapsed header: flex row to keep items inline */
    .sidebar-categories-collapsed .pull-right,
    .sidebar-categories-collapsed .float-right,
    .sidebar-header{
        display:flex!important;flex-wrap:wrap!important;
        align-items:center!important;gap:.5rem!important
    }

    /* ── Mobile: Select/dropdown stabilization (anti-jitter) ── */
    /* backdrop-filter is REMOVED globally from selects - this is the
       root cause of mobile jitter when native dropdown opens.
       The GPU re-composites the filter layer on every frame. */
    select.form-control,select,
    .sidebar-categories-collapsed select,
    .order-sidebar select,.cart-sidebar select{
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
        background-color:rgba(255,255,255,.8)!important;
        border:1px solid var(--v-border)!important;
        border-radius:.625rem!important;
        font-size:.8125rem!important;
        padding:.5rem .75rem!important;
        padding-right:2rem!important;
        color:var(--v-t1)!important;
        height:auto!important;
        line-height:1.4!important;
        transform:translateZ(0)!important;
        -webkit-transform:translateZ(0)!important;
        will-change:auto!important;
        transition:border-color .2s!important;
        box-shadow:0 1px 3px rgba(139,92,246,.04)!important
    }
    select.form-control:focus,select:focus{
        border-color:var(--v-accent)!important;
        box-shadow:0 0 0 3px rgba(139,92,246,.1)!important;
        outline:none!important
    }

    /* ── Mobile dropdown menu: compact and stable ── */
    .navbar-nav .dropdown-menu,
    .navbar-nav .open .dropdown-menu,
    .navbar-default .navbar-nav .open .dropdown-menu{
        position:static!important;float:none!important;
        background:rgba(139,92,246,.03)!important;
        border:none!important;box-shadow:none!important;
        padding:.125rem 0!important;margin:0!important;
        border-radius:.5rem!important;
        transform:none!important;animation:none!important
    }
    .navbar-nav .dropdown-menu>li>a,
    .navbar-nav .open .dropdown-menu>li>a{
        padding:.4rem 1.5rem!important;line-height:1.4!important;
        font-size:.8125rem!important;color:var(--v-t2)!important;
        border:none!important
    }
    .navbar-nav .dropdown-menu>li>a:hover,
    .navbar-nav .open .dropdown-menu>li>a:hover{
        background:rgba(139,92,246,.06)!important;color:var(--v-accent)!important
    }

    /* ── ALL cart pages: consistent spacing ── */
    #order-standard_cart{
        padding:0!important;margin:0!important
    }
    #order-standard_cart > .row{
        margin:0!important
    }
    #order-standard_cart .cart-body{
        padding:0 .25rem!important
    }
    #order-standard_cart .header-lined{
        padding:0 .5rem!important;margin-bottom:.75rem!important
    }
    #order-standard_cart .header-lined h1{
        font-size:1.375rem!important;margin-bottom:.5rem!important
    }
    /* Cart sidebar (left: categories) hide on mobile - it collapses anyway */
    #order-standard_cart .cart-sidebar{
        padding:0 .5rem!important
    }
    /* Main content area */
    #order-standard_cart .secondary-cart-body{
        padding:0 .5rem!important;width:100%!important;
        flex:0 0 100%!important;max-width:100%!important
    }
    /* Right sidebar (order summary): full width below */
    #order-standard_cart .secondary-cart-sidebar,
    #scrollingPanelContainer{
        width:100%!important;flex:0 0 100%!important;max-width:100%!important;
        padding:0 .5rem!important;margin-top:1rem!important
    }
    /* Row inside secondary */
    #order-standard_cart .secondary-cart-body + .secondary-cart-sidebar{
        margin-top:.75rem!important
    }
    #order-standard_cart .row{
        margin-left:0!important;margin-right:0!important
    }
    #order-standard_cart [class*="col-"]{
        padding-left:.5rem!important;padding-right:.5rem!important
    }

    /* ── Glass card on mobile ── */
    .vmvm-glass{
        margin:0!important;border-radius:1.25rem!important
    }
    .vmvm-summary-head{
        padding:.75rem 1rem!important;border-radius:1.25rem 1.25rem 0 0!important
    }
    .vmvm-summary-body{padding:1rem!important}

    /* ── Config product panels ── */
    .vmvm-product-panel{
        padding:1.25rem 1rem!important;margin-bottom:.875rem!important;
        border-radius:1rem!important;margin-left:0!important;margin-right:0!important
    }
    .vmvm-section-title{
        font-size:.75rem!important;margin-bottom:.625rem!important
    }
    .vmvm-info-bar{
        margin:.875rem 0!important;padding:.75rem!important;font-size:.75rem!important
    }

    /* ── View cart items ── */
    .vmvm-items-panel{
        margin-left:0!important;margin-right:0!important
    }
    .vmvm-items-panel .view-cart-items .item{
        padding:.75rem .875rem!important
    }
    .vmvm-items-panel .item-price span{font-size:.875rem!important}

    /* ── Promo panel ── */
    .vmvm-tabs-panel{
        margin:0!important;border-radius:1rem!important;padding:1rem!important
    }

    /* ── Buttons ── */
    .vmvm-btn-primary{
        padding:.625rem 1.5rem!important;font-size:.875rem!important
    }
    .vmvm-empty-cart{padding:.25rem .5rem!important;margin-bottom:.75rem!important}

    /* ── Store product cards ── */
    .products .product,.product-group .card,
    .products .product-group > div{
        margin-bottom:.75rem!important
    }
}

@media(max-width:575px){
    #order-standard_cart .header-lined h1{font-size:1.25rem!important}
    #order-standard_cart .secondary-cart-body,
    #order-standard_cart .secondary-cart-sidebar,
    #scrollingPanelContainer{
        padding:0 .375rem!important
    }
    #order-standard_cart [class*="col-"]{
        padding-left:.375rem!important;padding-right:.375rem!important
    }
    .vmvm-product-panel{padding:1rem .875rem!important}
    .vmvm-items-panel .view-cart-items .item{padding:.625rem .75rem!important}
    .vmvm-summary-body{padding:.875rem!important}
}
/* ================================================================
   终极防抖补丁（解决 iPhone 移动端侧边栏下拉抖动）
   ================================================================ */
@media(max-width:991.98px){
    /* 1. 彻底切断移动端 GPU 毛玻璃在动画期间的重绘灾难 */
    .sidebar .panel, .sidebar .card,
    .cart-sidebar .card, .cart-sidebar .panel,
    .sidebar-categories-collapsed,
    .navbar-collapse, .dropdown-menu {
        transform: translate3d(0,0,0) !important;
        -webkit-transform: translate3d(0,0,0) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: rgba(250, 249, 255, 0.98) !important;
        backface-visibility: hidden !important;
        perspective: 1000px !important;
    }
    
    /* 2. 拦截 Bootstrap 过渡动画 */
    .collapse, .collapsing {
        -webkit-transition: none !important;
        transition: none !important;
    }

    /* 3. 【核心修复】解决 jQuery slideToggle 导致的 Margin 塌陷跳动 */
    .sidebar .panel-body,
    .sidebar .list-group,
    .cart-sidebar .panel-body,
    .sidebar-categories-collapsed .panel-body,
    .navbar-collapse .navbar-nav {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* 4. 强制隐藏溢出，防止下拉瞬间内容撑开容器 */
    /* 注意：.navbar-collapse 不能设 overflow:hidden，否则PC端dropdown被裁剪 */
    /* 注意：.sidebar .panel-collapse 不能设 overflow:hidden，否则默认展开时内容被裁剪 */
    .cart-sidebar .panel-collapse,
    .sidebar-categories-collapsed .collapse {
        overflow: hidden !important;
    }
}
/* ================================================================
   VMVM 极简排版 (全新思路版)：原生宽度 + 购物车左置 + 首页无标题
   ================================================================ */

/* 1. 彻底隐藏搜索长条 */
header form[action*="knowledgebase"],
header form.search, 
header .input-group.search, 
header .navbar-search {
    display: none !important;
}

/* 2. 面包屑转大标题 & 首页彻底隐藏 "门户首页" */
.master-breadcrumb {
    display: block !important; background: transparent !important;
    padding: 1.5rem 0 0.5rem 0 !important; border: none !important;
}
.master-breadcrumb .breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; }
.master-breadcrumb .breadcrumb li:not(:last-child) { display: none !important; }
.master-breadcrumb .breadcrumb li:last-child {
    display: block !important; font-size: 1.75rem !important; font-weight: 800 !important; color: var(--v-t1) !important;
}
.master-breadcrumb .breadcrumb li:last-child::before { display: none !important; }

/* 【核心】：如果面包屑只有一级（即在门户首页），彻底隐藏它！ */
.master-breadcrumb:has(li:first-child:last-child) { 
    display: none !important; 
}

/* 3. 手机端（<1200px） */
@media (max-width: 1199.98px) {

    /* cart-desktop-ul 手机端隐藏 */
    .cart-desktop-ul {
        display: none !important;
    }

    /* ── toolbar 购物车和汉堡统一尺寸 ── */
    header .navbar.navbar-light .toolbar .btn {
        width: 2.25rem !important;
        height: 2.25rem !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: .5rem !important;
        border: 1px solid var(--v-border) !important;
        background: transparent !important;
        font-size: 1.05rem !important;
        color: var(--v-t2) !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }
    header .navbar.navbar-light .toolbar .btn:hover {
        background: var(--v-accent-l) !important;
        border-color: var(--v-border-h) !important;
        color: var(--v-accent) !important;
    }

    /* ── 未登录时：账户管理区域变为登录/注册两个大按钮 ── */
    body:not(.client-loggedin) #mainNavbar .navbar-nav.ml-auto > li > a.dropdown-toggle {
        display: none !important;
    }

    body:not(.client-loggedin) #mainNavbar .navbar-nav.ml-auto .dropdown-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: .75rem !important;
        position: static !important;
        float: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 1rem 1.25rem 1.5rem !important;
        margin: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        animation: none !important;
    }

    body:not(.client-loggedin) #mainNavbar .navbar-nav.ml-auto .dropdown-menu > li.dropdown-item {
        flex: 1 1 calc(50% - .375rem) !important;
        padding: 0 !important;
        background: transparent !important;
    }

    body:not(.client-loggedin) #mainNavbar .navbar-nav.ml-auto .dropdown-menu > li.dropdown-item:nth-child(n+3) {
        display: none !important;
    }
    body:not(.client-loggedin) #mainNavbar .navbar-nav.ml-auto .dropdown-menu .dropdown-divider {
        display: none !important;
    }

    /* 登录/注册按钮样式 */
    body:not(.client-loggedin) #mainNavbar .navbar-nav.ml-auto .dropdown-menu > li.dropdown-item > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: .875rem 1rem !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        border-radius: .875rem !important;
        border: 1.5px solid rgba(0,0,0,.1) !important;
        background: transparent !important;
        color: var(--v-t2) !important;
        text-align: center !important;
        box-shadow: none !important;
        height: auto !important;
        white-space: nowrap !important;
        transition: var(--v-tr) !important;
        transform: none !important;
    }
    body:not(.client-loggedin) #mainNavbar .navbar-nav.ml-auto .dropdown-menu > li.dropdown-item > a:hover {
        border-color: var(--v-accent) !important;
        color: var(--v-accent) !important;
    }

    /* 第二个按钮（注册）：紫色实心 */
    body:not(.client-loggedin) #mainNavbar .navbar-nav.ml-auto .dropdown-menu > li.dropdown-item:nth-child(2) > a {
        background: var(--v-accent) !important;
        border-color: var(--v-accent) !important;
        color: #fff !important;
        font-weight: 600 !important;
    }
    body:not(.client-loggedin) #mainNavbar .navbar-nav.ml-auto .dropdown-menu > li.dropdown-item:nth-child(2) > a:hover {
        background: var(--v-accent-h) !important;
        border-color: var(--v-accent-h) !important;
        color: #fff !important;
    }

    /* ── 已登录时：账户管理 toggle 与其他菜单项样式一致 ── */
    body.client-loggedin #mainNavbar .navbar-nav.ml-auto > li > a.dropdown-toggle,
    body.client-loggedin #mainNavbar .navbar-nav.ml-auto > li > a.dropdown-toggle:link,
    body.client-loggedin #mainNavbar .navbar-nav.ml-auto > li > a.dropdown-toggle:visited {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: .75rem 1.25rem !important;
        font-size: .9375rem !important;
        font-weight: 500 !important;
        color: var(--v-t2) !important;
        background: transparent !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,.04) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }
    body.client-loggedin #mainNavbar .navbar-nav.ml-auto > li > a.dropdown-toggle:hover {
        color: var(--v-accent) !important;
        background: rgba(139,92,246,.04) !important;
    }
    body.client-loggedin #mainNavbar .navbar-nav.ml-auto .dropdown-menu {
        /* display 不强制，靠 Bootstrap .open 控制 */
        position: static !important;
        float: none !important;
        background: rgba(139,92,246,.03) !important;
        border: none !important;
        box-shadow: none !important;
        padding: .25rem 0 .5rem 1rem !important;
        margin: 0 !important;
        border-radius: 0 !important;
        animation: none !important;
    }
    /* 收缩状态：没有 .open 时隐藏 */
    body.client-loggedin #mainNavbar .navbar-nav.ml-auto > li:not(.open) > .dropdown-menu {
        display: none !important;
    }
    /* 展开状态：有 .open 时显示 */
    body.client-loggedin #mainNavbar .navbar-nav.ml-auto > li.open > .dropdown-menu {
        display: block !important;
    }
    body.client-loggedin #mainNavbar .navbar-nav.ml-auto .dropdown-menu > li {
        display: block !important;
        flex: none !important;
        width: 100% !important;
    }
    body.client-loggedin #mainNavbar .navbar-nav.ml-auto .dropdown-menu > li > a {
        display: block !important;
        padding: .5rem 1rem !important;
        font-size: .875rem !important;
        font-weight: 400 !important;
        color: var(--v-t2) !important;
        border: none !important;
        background: transparent !important;
        border-radius: .375rem !important;
        white-space: nowrap !important;
        height: auto !important;
    }
    body.client-loggedin #mainNavbar .navbar-nav.ml-auto .dropdown-menu > li > a:hover {
        background: rgba(139,92,246,.06) !important;
        color: var(--v-accent) !important;
    }
    body.client-loggedin #mainNavbar .navbar-nav.ml-auto .dropdown-menu .dropdown-divider {
        display: block !important;
        border-color: rgba(0,0,0,.06) !important;
        margin: .25rem .5rem !important;
    }

    /* collapse内其他btn类统一 */
    .navbar-collapse .navbar-nav > li > a.btn,
    .navbar-collapse .navbar-nav > li > button,
    .navbar-collapse .navbar-nav .btn-outline-primary,
    .navbar-collapse .navbar-nav .btn-outline-dark {
        display: block !important;
        width: 100% !important;
        padding: .875rem 1.25rem !important;
        font-size: .9375rem !important;
        font-weight: 500 !important;
        color: var(--v-t2) !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(0,0,0,.04) !important;
        border-radius: 0 !important;
        text-align: left !important;
        box-shadow: none !important;
        margin: 0 !important;
        height: auto !important;
    }
    .navbar-collapse .navbar-nav .btn:hover,
    .navbar-collapse .navbar-nav .btn:focus {
        color: var(--v-accent) !important;
        background: rgba(139,92,246,.04) !important;
    }
}

/* 4. 桌面端（≥1200px）：单行布局
   布局：[Logo + 购物车] [主菜单 ─────── 账户管理]
   注：购物车在toolbar(navbar-light)里，Logo右边
   ================================================================ */
@media (min-width: 1200px) {

    /* header：flex单行，z-index确保dropdown不被页面内容遮住 */
    header#header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        height: 64px !important;
        background: rgba(255,255,255,.88) !important;
        backdrop-filter: blur(var(--v-blur)) !important;
        -webkit-backdrop-filter: blur(var(--v-blur)) !important;
        border-bottom: 1px solid rgba(0,0,0,.06) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.03) !important;
        padding: 0 calc(50% - 570px) !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 1030 !important;
    }

    /* 子navbar：剥离背景/边框，移除backdrop-filter（避免创建stacking context干扰dropdown） */
    .topbar,
    .main-navbar-wrapper,
    header .navbar {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* navbar-light（Logo+购物车）：flex:0，只占自身宽度 */
    header .navbar.navbar-light {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }
    header .navbar.navbar-light .container {
        padding: 0 !important;
        width: auto !important;
        max-width: none !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }
    /* 桌面端：隐藏搜索框，toolbar保留（购物车在里面） */
    header .navbar.navbar-light .form-inline {
        display: none !important;
    }

    /* main-navbar-wrapper：flex:1，撑满右侧空间 */
    .main-navbar-wrapper {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        overflow: visible !important;
    }
    header .navbar.main-navbar-wrapper .container {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* navbar-collapse：强制展开，overflow:visible保证dropdown弹出 */
    header .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        height: auto !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    /* 桌面端购物车（.cart-desktop-ul）：正常显示 */
    .cart-desktop-ul {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
        margin: 0 .25rem !important;
    }

    /* 主菜单#nav：靠左 */
    header .navbar-nav#nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin-left: 1rem !important;
        margin-right: auto !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }
    header .navbar-nav#nav > li {
        float: none !important;
        overflow: visible !important;
    }

    /* 账户管理（ul.ml-2 / ul.ml-auto 兼容两种tpl） */
    header .navbar-nav.ml-2,
    header .navbar-nav.ml-auto {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: .375rem !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
    }
    header .navbar-nav.ml-2 > li,
    header .navbar-nav.ml-auto > li {
        float: none !important;
        overflow: visible !important;
    }

    /* 桌面端账管链接：默认样式为文字链接 */
    header .navbar-nav.ml-2 > li > a,
    header .navbar-nav.ml-auto > li > a {
        display: inline-flex !important;
        align-items: center !important;
        padding: .375rem .75rem !important;
        font-size: .875rem !important;
        font-weight: 500 !important;
        color: var(--v-t2) !important;
        background: transparent !important;
        border: none !important;
        border-radius: .5rem !important;
        transition: var(--v-tr) !important;
        white-space: nowrap !important;
    }
    header .navbar-nav.ml-2 > li > a:hover,
    header .navbar-nav.ml-auto > li > a:hover {
        color: var(--v-accent) !important;
        background: var(--v-accent-l) !important;
        text-decoration: none !important;
    }

    /* 最后一个 li（通常是"账户管理"主入口）：紫色圆角实心按钮 */
    header .navbar-nav.ml-2 > li:last-child > a,
    header .navbar-nav.ml-auto > li:last-child > a {
        background: var(--v-accent) !important;
        color: #fff !important;
        border-radius: 2rem !important;
        padding: .4rem 1.1rem !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 12px rgba(139,92,246,.35) !important;
        border: none !important;
    }
    header .navbar-nav.ml-2 > li:last-child > a:hover,
    header .navbar-nav.ml-auto > li:last-child > a:hover {
        background: var(--v-accent-h) !important;
        color: #fff !important;
        box-shadow: 0 4px 16px rgba(139,92,246,.45) !important;
        transform: translateY(-1px) !important;
    }
    /* 下拉箭头颜色保持白色 */
    header .navbar-nav.ml-2 > li:last-child > a.dropdown-toggle::after,
    header .navbar-nav.ml-auto > li:last-child > a.dropdown-toggle::after {
        border-top-color: #fff !important;
    }
}

/* 5. 修复购物车角标溢出被截断 */
header .cart-btn, .navbar .cart-btn, header .navbar-nav .cart-btn {
    overflow: visible !important; margin-right: 8px !important; 
}
header .cart-btn .badge {
    overflow: visible !important; 
}
/* ================================================================
   页面标题（产品中心、公告信息等特定页面）
   ================================================================ */
.vmvm-page-title {
    padding: 1.75rem 0 .5rem;
}
.vmvm-page-title h1 {
    font-size: 1.625rem !important;
    font-weight: 700 !important;
    color: var(--v-t1) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
}
@media (max-width: 767.98px) {
    .vmvm-page-title { padding: 1.25rem 0 .25rem; }
    .vmvm-page-title h1 { font-size: 1.25rem !important; }
}

/* ================================================================
   铃铛通知按钮 + 面板
   ================================================================ */
/* 按钮 */
.vmvm-bell-btn {
    position: relative !important;
    width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: .5rem !important;
    border: 1px solid var(--v-border) !important;
    background: transparent !important;
    font-size: 1rem !important;
    color: var(--v-t2) !important;
    transition: var(--v-tr) !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    margin-right: 4px !important;
}
.vmvm-bell-btn:hover,
.vmvm-bell-btn.active {
    background: var(--v-accent-l) !important;
    border-color: var(--v-border-h) !important;
    color: var(--v-accent) !important;
}
/* 角标 */
.vmvm-bell-badge {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: var(--v-err) !important;
    color: #fff !important;
    border-radius: 99px !important;
    font-size: .5rem !important;
    min-width: 1rem !important;
    height: 1rem !important;
    line-height: 1rem !important;
    padding: 0 .25rem !important;
    pointer-events: none !important;
    overflow: visible !important;
    max-width: none !important;
    font-weight: 700 !important;
}
/* 面板 */
.vmvm-bell-panel {
    position: absolute !important;
    z-index: 1999 !important;
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(139,92,246,.12) !important;
    border-radius: 1rem !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 0 60px rgba(139,92,246,.06) !important;
    overflow: hidden !important;
    animation: vmvm-dd .2s ease !important;
    min-width: 280px !important;
}
.vmvm-bell-panel-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: .75rem 1rem !important;
    border-bottom: 1px solid rgba(139,92,246,.08) !important;
    font-size: .8125rem !important;
    font-weight: 700 !important;
    color: var(--v-t1) !important;
    background: linear-gradient(135deg,rgba(139,92,246,.06),rgba(139,92,246,.02)) !important;
}
.vmvm-bell-panel-header i {
    color: var(--v-accent) !important;
    margin-right: .375rem !important;
}
.vmvm-bell-close {
    background: none !important;
    border: none !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    color: var(--v-t4) !important;
    cursor: pointer !important;
    padding: 0 .25rem !important;
    transition: color .2s !important;
}
.vmvm-bell-close:hover { color: var(--v-t1) !important; }
/* 通知列表 */
.vmvm-bell-list {
    list-style: none !important;
    margin: 0 !important;
    padding: .375rem 0 !important;
    max-height: 320px !important;
    overflow-y: auto !important;
}
.vmvm-bell-list-item a {
    display: flex !important;
    align-items: flex-start !important;
    gap: .625rem !important;
    padding: .625rem 1rem !important;
    font-size: .8125rem !important;
    color: var(--v-t2) !important;
    text-decoration: none !important;
    transition: background .15s !important;
    border-radius: 0 !important;
}
.vmvm-bell-list-item a:hover {
    background: var(--v-accent-l) !important;
    color: var(--v-accent) !important;
}
.vmvm-bell-list-item i {
    margin-top: .1rem !important;
    flex-shrink: 0 !important;
}
.vmvm-bell-danger i  { color: var(--v-err) !important; }
.vmvm-bell-warning i { color: var(--v-warn) !important; }
.vmvm-bell-info i    { color: var(--v-info) !important; }
.vmvm-bell-success i { color: var(--v-ok) !important; }
.vmvm-bell-list-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .5rem !important;
    padding: 1.5rem 1rem !important;
    color: var(--v-t4) !important;
    font-size: .8125rem !important;
}
.vmvm-bell-list-empty i { color: var(--v-ok) !important; font-size: 1rem !important; }

/* 手机端：min-width 取消，JS 控制尺寸和位置 */
@media (max-width: 767.98px) {
    .vmvm-bell-panel {
        min-width: unset !important;
    }
}

/* sidebar 所有内层元素强制透明背景 */
body .sidebar .collapsable-card-body,
body .sidebar .card-body,
body .sidebar .panel-body,
body .sidebar .list-group {
    background: transparent !important;
}

/* 全站按钮统一非粗体 */
body .btn, body .btn-primary, body .btn-success, body .btn-danger,
body .btn-warning, body .btn-info, body .btn-default, body .btn-secondary,
body .btn-order-now, body .btn-link {
    font-weight: 400 !important;
}
/* ================================================================
   [FIX] 手机端购物车页面水平溢出
   ================================================================ */
@media (max-width: 767.98px) {
    #order-standard_cart,
    #order-standard_cart .row,
    #order-standard_cart .container,
    #order-standard_cart .container-fluid {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    #order-standard_cart [class*="col-"] {
        max-width: 100% !important;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }
}
/* ================================================================
   工单页面 (viewticket) — 根据真实 HTML 结构精准匹配
   主卡片: .card.view-ticket
   回复内容: .card.view-ticket .ticket-reply
   回复表单: #ticketReplyContainer
   侧边栏工单信息: .list-group-item.ticket-details-children
   ================================================================ */

/* ── 侧边栏：工单信息 list-group-item 布局修复（flex横向对齐） ── */
.list-group-item.ticket-details-children {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(139,92,246,.06) !important;
    padding: .5rem 1.25rem !important;
    font-size: .8125rem !important;
    color: var(--v-t2) !important;
    line-height: 1.6 !important;
    overflow: hidden !important; /* clearfix for float */
}
.list-group-item.ticket-details-children:last-child {
    border-bottom: none !important;
}
/* br 完全移出布局 */
.list-group-item.ticket-details-children br {
    display: none !important;
    content: '' !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
}
/* 标题列浮动到左侧，固定宽度 */
.list-group-item.ticket-details-children .title {
    float: left !important;
    width: 4rem !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    color: var(--v-t3) !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
}
/* 右侧内容区：用 margin-left 推开，不受 float 影响，自然换行也不会缩到左列下面 */
.list-group-item.ticket-details-children .ticket-requestor-name,
.list-group-item.ticket-details-children .requestor-type-owner {
    display: inline !important;
}
/* 所有非.title的直接文本内容用 overflow: hidden 的块撑开右列 */
.list-group-item.ticket-details-children > *:not(.title):not(br) {
    display: inline !important;
}
/* 状态 badge：行内，跟在内容文字后面 */
.list-group-item.ticket-details-children .label {
    font-size: .7rem !important;
    border-radius: 99px !important;
    padding: .15rem .55rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    margin-left: .25rem !important;
}

/* ── 主卡片：.card.view-ticket ── */
.card.view-ticket {
    background: rgba(255,255,255,.55) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,.6) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.03), inset 0 1px 0 rgba(255,255,255,.7) !important;
    overflow: hidden !important;
    margin-bottom: 1.25rem !important;
}
/* 工单标题区 card-body（含编号+主题+按钮） */
.card.view-ticket > .card-body:first-child {
    background: linear-gradient(135deg, rgba(139,92,246,.07), rgba(139,92,246,.02)) !important;
    border-bottom: 1px solid rgba(139,92,246,.1) !important;
    padding: 1.25rem 1.5rem !important;
}
.card.view-ticket .card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--v-t1) !important;
    margin-bottom: .5rem !important;
}
/* 后续每个 card-body（含回复气泡）透明背景 */
.card.view-ticket > .card-body + .card-body {
    background: transparent !important;
    padding: 1rem 1.25rem !important;
}

/* ── 工单回复气泡：.ticket-reply.markdown-content ── */
.ticket-reply.markdown-content {
    background: rgba(255,255,255,.65) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    border-radius: 1rem !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
    overflow: hidden !important;
    margin-bottom: .75rem !important;
}
/* 客服回复左紫色竖线 */
.ticket-reply.markdown-content.staff-reply {
    border-left: 3px solid var(--v-accent) !important;
}
/* 回复头部 .posted-by */
.ticket-reply.markdown-content .posted-by {
    background: rgba(249,248,255,.7) !important;
    border-bottom: 1px solid rgba(139,92,246,.07) !important;
    padding: .625rem 1rem !important;
    font-size: .8rem !important;
    color: var(--v-t3) !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: .375rem !important;
}
.ticket-reply.markdown-content.staff-reply .posted-by {
    background: linear-gradient(135deg, rgba(139,92,246,.07), rgba(139,92,246,.02)) !important;
}
/* 发布者 badge */
.ticket-reply.markdown-content .requestor-badge {
    font-size: .65rem !important;
    border-radius: 99px !important;
    padding: .2rem .55rem !important;
}
/* 回复正文 .message */
.ticket-reply.markdown-content .message {
    padding: 1rem 1.25rem !important;
    font-size: .875rem !important;
    color: var(--v-t1) !important;
    line-height: 1.75 !important;
    background: transparent !important;
}

/* ── 回复表单：#ticketReplyContainer ── */
#ticketReplyContainer {
    background: rgba(255,255,255,.55) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,.6) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.03), inset 0 1px 0 rgba(255,255,255,.7) !important;
    overflow: hidden !important;
    margin-top: 1.25rem !important;
}
#ticketReplyContainer > .card-body {
    padding: 1.5rem !important;
    background: transparent !important;
}
#ticketReplyContainer .card-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--v-t1) !important;
    margin-bottom: 1.25rem !important;
}
/* Markdown 编辑器 .md-editor */
#ticketReplyContainer .md-editor {
    border: 1px solid var(--v-border) !important;
    border-radius: .75rem !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.75) !important;
}
/* 工具栏 .md-header */
#ticketReplyContainer .md-header {
    background: rgba(249,248,255,.9) !important;
    border-bottom: 1px solid rgba(139,92,246,.08) !important;
    padding: .375rem .625rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .25rem !important;
}
#ticketReplyContainer .md-header .btn {
    border-radius: .375rem !important;
    padding: .25rem .5rem !important;
    font-size: .8125rem !important;
    color: var(--v-t3) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}
#ticketReplyContainer .md-header .btn:hover {
    background: var(--v-accent-l) !important;
    color: var(--v-accent) !important;
    border-color: transparent !important;
}
#ticketReplyContainer .md-header .btn-primary {
    background: var(--v-accent) !important;
    color: #fff !important;
    border-radius: .75rem !important;
}
/* 编辑区 textarea */
#ticketReplyContainer .md-input,
#ticketReplyContainer textarea.markdown-editor {
    background: rgba(255,255,255,.8) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: .875rem 1rem !important;
    font-size: .875rem !important;
    color: var(--v-t1) !important;
    resize: vertical !important;
}
/* 底部状态栏 .md-footer */
#ticketReplyContainer .md-footer {
    background: rgba(249,248,255,.7) !important;
    border-top: 1px solid rgba(139,92,246,.06) !important;
    padding: .375rem .75rem !important;
    font-size: .75rem !important;
    color: var(--v-t3) !important;
}

/* ── 关闭工单按钮（卡片内 + 侧边栏） ── */
.card.view-ticket .btn-danger,
.card-sidebar .btn-danger {
    background: rgba(239,68,68,.08) !important;
    border: 1px solid rgba(239,68,68,.2) !important;
    color: #ef4444 !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}
.card.view-ticket .btn-danger:hover,
.card-sidebar .btn-danger:hover {
    background: rgba(239,68,68,.15) !important;
    border-color: rgba(239,68,68,.35) !important;
}

/* ================================================================
   [FIX] 首页工单列表文字重叠 — 确保 list-group-item 不被 br 删除影响
   [FIX] 卡片底部多余横线清除
   ================================================================ */

/* 清除 collapsable-card-body 底部边框 */
.collapsable-card-body,
.collapsable-card-body .list-group,
.collapsable-card-body .list-group-flush {
    border-bottom: none !important;
}
/* 清除 list-group-flush 本身及其最后子项底部线 */
.list-group-flush,
.list-group-flush > .list-group-item:last-child,
.list-group.list-group-flush > *:last-child {
    border-bottom: none !important;
}
/* 清除卡片 card-body 底部线 */
.card > .card-body:last-child,
.card > .collapsable-card-body:last-child,
.card > .list-group:last-child {
    border-bottom: none !important;
}
/* 首页工单/公告列表 list-group-item 行内元素对齐（避免被全局br规则误伤） */
#main-body .client-home-cards .list-group-item {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: .5rem !important;
    border-bottom: none !important;
}

/* ================================================================
   [FIX] 首页"最近提交的工单"列表行布局
   结构: a.list-group-item > 文本 + label.label + br + small
   目标: 左侧[标题+badge] 右侧[最后更新时间] 单行对齐
   ================================================================ */
/* 首页工单列表行：利用 WHMCS 原有 padding-right，small 绝对定位到右侧 */
#ClientAreaHomePagePanels-Recent_Support_Tickets a.list-group-item,
[id^="ClientAreaHomePagePanels-Recent_Support_Tickets"] a.list-group-item {
    display: block !important;
    position: relative !important;
    padding: .875rem 9rem .875rem 1.25rem !important; /* 右侧留出时间区域 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* 隐藏 <br> */
#ClientAreaHomePagePanels-Recent_Support_Tickets a.list-group-item br,
[id^="ClientAreaHomePagePanels-Recent_Support_Tickets"] a.list-group-item br {
    display: none !important;
}
/* badge 紧跟标题文字，行内显示 */
#ClientAreaHomePagePanels-Recent_Support_Tickets a.list-group-item .label,
[id^="ClientAreaHomePagePanels-Recent_Support_Tickets"] a.list-group-item .label {
    display: inline-flex !important;
    align-items: center !important;
    font-size: .65rem !important;
    border-radius: 99px !important;
    padding: .2rem .6rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    margin-left: .35rem !important;
}
/* 时间区域绝对定位到右侧，垂直居中 */
#ClientAreaHomePagePanels-Recent_Support_Tickets a.list-group-item small,
[id^="ClientAreaHomePagePanels-Recent_Support_Tickets"] a.list-group-item small {
    position: absolute !important;
    right: 1.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: .75rem !important;
    color: var(--v-t3) !important;
    white-space: nowrap !important;
    text-align: right !important;
    line-height: 1.4 !important;
}

/* ================================================================
   [FIX v3] 首页工单列表行最终修复
   ================================================================ */
#ClientAreaHomePagePanels-Recent_Support_Tickets a.list-group-item {
    display: block !important;
    position: relative !important;
    padding: .875rem 8.5rem .875rem 1.25rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.5 !important;
}
/* badge 紧跟标题，行内 */
#ClientAreaHomePagePanels-Recent_Support_Tickets a.list-group-item .label {
    display: inline !important;
    font-size: .65rem !important;
    border-radius: 99px !important;
    padding: .15rem .5rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    margin-left: .3rem !important;
    color: #fff !important;  /* 白色字 */
}
/* 时间绝对定位右侧，允许换行 */
#ClientAreaHomePagePanels-Recent_Support_Tickets a.list-group-item small {
    position: absolute !important;
    right: 1.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: .72rem !important;
    color: var(--v-t2) !important;
    white-space: normal !important;
    text-align: right !important;
    line-height: 1.4 !important;
    width: 6.5rem !important;
}
/* br 隐藏 */
#ClientAreaHomePagePanels-Recent_Support_Tickets a.list-group-item br {
    display: none !important;
}

/* ================================================================
   [FIX] 产品服务列表：主机名 JetBrains Mono + 手机端 badge 完整显示
   真实结构: .div-service-name > .text-domain（主机名）
             .div-service-status > .label-placeholder（badge）
   ================================================================ */
.text-domain {
    font-family: var(--v-mono) !important;
    font-size: .8rem !important;
}
/* 手机端 badge 字体缩小，确保"已激活/有效的"完整显示 */
@media (max-width: 767.98px) {
    .div-service-status .label-placeholder,
    .div-service-status .label {
        font-size: .6rem !important;
        padding: .15rem .4rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
    .div-service-status {
        width: auto !important;
        min-width: 3.5rem !important;
        flex-shrink: 0 !important;
    }
}

/* ================================================================
   [FIX] 产品详情 Billing Overview 布局修复
   真实结构: .panel-body > .row > .col-lg-6 > .row.p-2 > .col-6.text-right + .col-6
   桌面端和手机端标签列均右对齐导致视觉偏右
   修复：标签改左对齐，手机端两列堆叠
   ================================================================ */

/* 桌面端：仅账单概览(.p-2)标签列左对齐，服务器概览(.p-1)保持原样 */
.panel-body .row.p-2 .col-xs-6.text-right.vf-bold,
.card-body .row.p-2 .col-xs-6.text-right.vf-bold {
    text-align: left !important;
}

/* 手机端：账单概览(.p-2)两列堆叠 */
@media (max-width: 767.98px) {
    .panel-body .row.p-2,
    .card-body .row.p-2 {
        flex-direction: column !important;
        padding: .1rem .25rem !important;
    }
    .panel-body .row.p-2 > [class*="col-xs"],
    .card-body .row.p-2 > [class*="col-xs"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        padding: 0 !important;
        line-height: 1.5 !important;
    }
    .panel-body .row.p-2 > .vf-bold,
    .card-body .row.p-2 > .vf-bold {
        font-size: .75rem !important;
        color: var(--v-t3) !important;
        margin-top: .65rem !important;
    }
}

/* ================================================================
   [FIX] 服务器概览标签列左对齐（与标题对齐）
   ================================================================ */
.panel-body .row.p-1 .col-xs-4.text-right.vf-bold,
.card-body .row.p-1 .col-xs-4.text-right.vf-bold {
    text-align: left !important;
}

/* ================================================================
   [AFFILIATES] 推广页面 VMVM 风格
   ================================================================ */

/* 统计卡片行 */
.vmvm-aff-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: .5rem;
}
@media (max-width: 575.98px) {
    .vmvm-aff-stats { grid-template-columns: 1fr; }
}

.vmvm-aff-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1.25rem;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}
.vmvm-aff-stat-icon {
    width: 3rem; height: 3rem;
    border-radius: .875rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.vmvm-aff-purple .vmvm-aff-stat-icon { background: rgba(139,92,246,.12); color: var(--v-accent); }
.vmvm-aff-blue   .vmvm-aff-stat-icon { background: rgba(59,130,246,.12);  color: #3b82f6; }
.vmvm-aff-green  .vmvm-aff-stat-icon { background: rgba(16,185,129,.12);  color: #10b981; }
.vmvm-aff-stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--v-t1);
    line-height: 1.1;
}
.vmvm-aff-stat-label {
    font-size: .8rem;
    color: var(--v-t3);
    margin-top: .15rem;
}

/* 通用卡片 */
.vmvm-aff-card {
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 1.25rem;
    box-shadow: 0 2px 16px rgba(0,0,0,.04);
    overflow: hidden;
}
.vmvm-aff-card-header {
    padding: 1rem 1.5rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--v-t1);
    border-bottom: 1px solid rgba(139,92,246,.08);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.vmvm-aff-card-header i { color: var(--v-accent); }
.vmvm-aff-card-body { padding: 1.25rem 1.5rem; }
.vmvm-aff-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(139,92,246,.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

/* 推广链接 */
.vmvm-aff-link-wrap {
    display: flex;
    gap: .75rem;
    align-items: center;
}
.vmvm-aff-link-input {
    flex: 1;
    background: rgba(139,92,246,.04) !important;
    border: 1px solid rgba(139,92,246,.15) !important;
    border-radius: .75rem !important;
    padding: .5rem 1rem !important;
    font-size: .85rem !important;
    color: var(--v-t2) !important;
    font-family: var(--v-mono) !important;
}
.vmvm-aff-copy-btn {
    flex-shrink: 0;
    background: var(--v-accent);
    color: #fff;
    border: none;
    border-radius: .75rem;
    padding: .5rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
    white-space: nowrap;
}
.vmvm-aff-copy-btn:hover { opacity: .85; }

/* 佣金网格 */
.vmvm-aff-commission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 767.98px) {
    .vmvm-aff-commission-grid { grid-template-columns: 1fr; gap: .5rem; }
    .vmvm-aff-link-wrap { flex-direction: column; align-items: stretch; }
}
.vmvm-aff-commission-item {
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    background: rgba(139,92,246,.04);
    border: 1px solid rgba(139,92,246,.08);
}
.vmvm-aff-commission-highlight {
    background: rgba(139,92,246,.08);
    border-color: rgba(139,92,246,.2);
}
.vmvm-aff-commission-label {
    font-size: .75rem;
    color: var(--v-t3);
    margin-bottom: .4rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.vmvm-aff-commission-label i { color: var(--v-accent); }
.vmvm-aff-commission-val {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--v-t1);
    font-family: var(--v-mono);
}

/* 申请提现按钮 */
.vmvm-aff-withdraw-btn {
    background: var(--v-accent);
    color: #fff;
    border: none;
    border-radius: .875rem;
    padding: .6rem 1.75rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.vmvm-aff-withdraw-btn:hover { opacity: .85; }
.vmvm-aff-withdraw-btn.disabled {
    background: rgba(139,92,246,.25) !important;
    cursor: not-allowed;
    opacity: 1;
}
.vmvm-aff-withdraw-hint {
    font-size: .8rem;
    color: var(--v-t3);
    margin: 0;
    text-align: center;
}

/* ── affiliates 补充：提现区域间距 + 链接输入框 ── */
.vmvm-aff-withdraw-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(139,92,246,.08);
}
.vmvm-aff-withdraw-hint {
    font-size: .82rem;
    color: var(--v-t3);
    margin: 0;
    text-align: center;
}
.vmvm-aff-link-wrap {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-top: .5rem;
}
.vmvm-aff-link-input {
    font-family: var(--v-mono) !important;
    font-size: .82rem !important;
    background: rgba(139,92,246,.04) !important;
    border: 1px solid rgba(139,92,246,.15) !important;
    border-radius: .75rem !important;
    color: var(--v-t2) !important;
    cursor: pointer;
}
.vmvm-aff-copy-btn {
    flex-shrink: 0;
    background: var(--v-accent);
    color: #fff;
    border: none;
    border-radius: .75rem;
    padding: .5rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
    white-space: nowrap;
}
.vmvm-aff-copy-btn:hover { opacity: .85; }
@media (max-width: 575.98px) {
    .vmvm-aff-link-wrap { flex-direction: column; align-items: stretch; }
    .vmvm-aff-commission-grid { grid-template-columns: 1fr !important; }
}

/* ================================================================
   [FIX] 公告侧边栏月份日期转中文格式（JS处理）
   ================================================================ */

/* ================================================================
   [FIX] 公告页：标题加粗缩小，隐藏 card-title"公告信息"
   ================================================================ */
.announcements .announcement h1 {
    font-weight: 700 !important;
    font-size: 1.35rem !important;
}
.announcements .announcement h1 a {
    font-weight: 700 !important;
}

/* 修改点：前面加上 .announcements 限制作用域，不再全局隐藏 */
.announcements .card-body > h3.card-title {
    display: none !important;
}

/* 强力修正公告标题大小 (无视嵌套层级和前置隐藏元素) */
#main-body .primary-content h1,
#main-body .primary-content h2,
#main-body .primary-content .article-title h1,
#main-body .primary-content .article-title h2 {
    font-size: 1.375rem !important; /* 精准的 h3 大小 (约22px) */
    font-weight: 700 !important;
    margin-bottom: 0.875rem !important;
    line-height: 1.3 !important;
}

/* 确保标题和下方的日期保持合理的呼吸感间距 */
#main-body .primary-content .article-meta,
#main-body .primary-content ul.meta,
#main-body .primary-content ul.list-inline.text-muted {
    margin-top: 0.5rem !important;
    margin-bottom: 2rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}
/* =========================================
   隐藏 WHMCS 列表默认的最左侧图标列
   ========================================= */
table.dataTable thead tr th:first-child,
table.dataTable tbody tr td:first-child {
    display: none !important;
}
/* =========================================
   VMVM Theme - 我的账单列表居中对齐
   （仅针对账单表格，不影响产品服务列表）
   ========================================= */
#tableInvoicesList th,
#tableInvoicesList td {
    text-align: center !important;
}
/* =========================================
   VMVM Theme - 全站侧边栏角标(Badge)绝对右对齐
   ========================================= */
/* 1. 将父级列表变为定位基准，并预留右侧安全距离防重叠 */
.sidebar .list-group-item,
.sidebar-categories-collapsed .list-group-item {
    position: relative !important;
}

/* 2. 将角标绝对定位到最右侧，并垂直居中 */
.sidebar .list-group-item .badge,
.sidebar .list-group-item .label,
.sidebar-categories-collapsed .list-group-item .badge {
    position: absolute !important;
    right: 0.875rem !important; /* 匹配你原有的列表 padding 边缘 */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
}
/* =========================================
   VMVM Theme - 手机号码插件紧凑度优化 (V4)
   缩减拨号代码前的空白并保持对齐
   ========================================= */

/* 1. 缩减左侧装饰区宽度：从 95px 减小到 82px */
.intl-tel-input.separate-dial-code .selected-flag {
    width: 82px !important; 
    padding: 0 4px 0 10px !important; /* 减少左侧起始留白 */
    background: rgba(139, 92, 246, 0.06) !important;
    border-radius: 0.75rem 0 0 0.75rem !important;
    gap: 2px !important; /* 进一步收紧国旗、代码、箭头之间的间距 */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 靠左对齐，消除中间空隙 */
}

/* 2. 同步调整输入框的内边距：从 105px 减小到 92px */
body .intl-tel-input.separate-dial-code input#inputPhone {
    padding-left: 92px !important; 
}

/* 3. 精细调节内部元素位置 */
.intl-tel-input.separate-dial-code .iti-flag {
    margin-right: 4px !important;
    transform: scale(0.9) !important; /* 略微缩小国旗，使其更干练 */
}

.intl-tel-input.separate-dial-code .selected-dial-code {
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-left: 0 !important;
}

/* 4. 优化右侧小箭头的间距 */
.intl-tel-input .iti-arrow {
    margin-left: 2px !important;
    border-top-width: 3px !important; /* 缩小箭头尺寸 */
    border-left-width: 3px !important;
    border-right-width: 3px !important;
}

/* =========================================
   VMVM Theme - 使用者管理页面按钮优化
   ========================================= */
.table .btn-default[onclick*="manage"] {
    background: rgba(139, 92, 246, 0.04) !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    color: var(--v-accent) !important;
}

.table .btn-danger[onclick*="remove"] {
    background: rgba(239, 68, 68, 0.05) !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
    color: var(--v-err) !important;
}

/* =========================================
   VMVM Theme - 邮件存档页面 (Email Archive) 优化
   按钮右对齐 + VMVM 淡紫色风格重构
   ========================================= */

/* 1. 表格最后一列（操作列）文字对齐与边距预留 */
#tableEmailsList th:last-child,
#tableEmailsList td:last-child {
    text-align: right !important;
    padding-right: 1.5rem !important; /* 预留右侧间距，防止贴边 */
    vertical-align: middle !important;
}

/* 2. 重写“查看消息”按钮样式 (通常为 .btn-info) */
#tableEmailsList .btn-info,
#tableEmailsList .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(139, 92, 246, 0.06) !important; /* VMVM Accent Light */
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    color: var(--v-accent, #8b5cf6) !important;
    border-radius: 0.625rem !important;
    font-size: 0.8125rem !important;
    padding: 0.4rem 1rem !important;
    font-weight: 400 !important; /* 遵守全站非粗体原则 */
    box-shadow: none !important;
    transition: all .2s cubic-bezier(.4, 0, .2, 1) !important;
}

/* 3. 悬浮状态：变为实心紫色 */
#tableEmailsList .btn-info:hover,
#tableEmailsList .btn-primary:hover {
    background: var(--v-accent, #8b5cf6) !important;
    border-color: var(--v-accent, #8b5cf6) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
}

/* 4. 消除蓝色背景残留 */
#tableEmailsList .btn-info:focus, 
#tableEmailsList .btn-info:active {
    background: var(--v-accent-h, #7c3aed) !important;
    outline: none !important;
}

/* ================================================================
   VMVM Theme - 纯净版排版与防滑动修复
   ================================================================ */

/* 1. 物理级防横向滑动（安全模式：不干扰背景和原生边距） */
html, body {
    overflow-x: hidden !important;
}

/* 2. 保证手机端欢迎卡片左右间距等宽，且不撑破屏幕 */
@media (max-width: 767.98px) {
    .vmvm-welcome {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1.25rem !important;
    }
}

/* 3. 恢复快捷操作标题间距 */
.vmvm-section-header {
    margin-top: 1.75rem !important;
    margin-bottom: 1rem !important;
}

/* 4. 恢复手机端 sidebar 转到底部后的顶部安全间距 */
@media (max-width: 991.98px) {
    .sidebar > .card:first-child,
    .sidebar > .panel:first-child {
        margin-top: 1.5rem !important;
    }
    .sidebar .card + .card,
    .sidebar .panel + .panel,
    .sidebar .card + .panel,
    .sidebar .panel + .card {
        margin-top: .875rem !important;
    }
    .primary-content + div .sidebar,
    .col-lg-4:not(:first-child) .sidebar,
    .col-lg-3:not(:first-child) .sidebar {
        margin-top: 1.5rem !important;
    }
}

/* 5. 恢复 Welcome Hero 手机端标题字号收缩，防文字折行 */
@media (max-width: 575px) {
    .vmvm-welcome-title {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
    }
}
@media (min-width: 576px) and (max-width: 767px) {
    .vmvm-welcome-title {
        font-size: 1.5rem !important;
    }
}

/* 6. 恢复产品订购页 "Order Now" 按钮文字强制不换行 */
a.btn-order-now,
.btn.btn-order-now,
#order-standard_cart a.btn-order-now {
    white-space: nowrap !important;
}
/* ================================================================
   [FIX] 工单详情页侧边栏信息行布局修复
   将原有的 float + 固定宽度方案改为 grid 两列自适应，
   解决英文标签过长导致的文字重叠问题。
   追加到 custom.css 末尾即可。
   ================================================================ */

/* 每一行：grid 两列，左列自适应标签宽度，右列撑满剩余 */
.list-group-item.ticket-details-children {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: baseline !important;
    gap: .5rem !important;
    column-gap: 1rem !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(139,92,246,.06) !important;
    padding: .625rem 1.25rem !important;
    font-size: .8125rem !important;
    color: var(--v-t2) !important;
    line-height: 1.6 !important;
    overflow: visible !important;
}
.list-group-item.ticket-details-children:last-child {
    border-bottom: none !important;
}

/* 左列标签 */
.list-group-item.ticket-details-children .title {
    float: none !important;
    width: auto !important;
    font-size: .775rem !important;
    font-weight: 600 !important;
    color: var(--v-t3) !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
    display: block !important;
}

/* 右列内容区：允许换行，不被标签挤压 */
.list-group-item.ticket-details-children > *:not(.title):not(br) {
    display: inline !important;
}

/* br 完全隐藏，不占空间 */
.list-group-item.ticket-details-children br {
    display: none !important;
}

/* badge（所有者/已关闭）：行内，跟在内容后面 */
.list-group-item.ticket-details-children .label {
    display: inline-flex !important;
    align-items: center !important;
    font-size: .7rem !important;
    border-radius: 99px !important;
    padding: .15rem .55rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    margin-left: .35rem !important;
}
/* ================================================================
   [FIX] Alert 气泡修复
   1. 去掉右上角光晕（::before 圆形色块），改为均匀纯色背景
   2. 隐藏服务器状态页面重复的文字段落
   追加到 custom.css 末尾即可。
   ================================================================ */

/* ── 彻底移除所有 alert 的 ::before 光晕 ── */
.alert::before {
    display: none !important;
    content: none !important;
}

/* ── Alert 重写为均匀纯色气泡，无光晕无渐变 ── */
.alert {
    border-radius: 1rem !important;
    font-weight: 500 !important;
    padding: .875rem 1.25rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
    position: relative !important;
}
.alert-success {
    background: rgba(220,252,231,.85) !important;
    border: 1px solid rgba(16,185,129,.18) !important;
    color: #065f46 !important;
    box-shadow: 0 1px 4px rgba(16,185,129,.06) !important;
}
.alert-danger {
    background: rgba(254,226,226,.85) !important;
    border: 1px solid rgba(239,68,68,.18) !important;
    color: #991b1b !important;
    box-shadow: 0 1px 4px rgba(239,68,68,.06) !important;
}
.alert-warning {
    background: rgba(254,249,195,.85) !important;
    border: 1px solid rgba(245,158,11,.18) !important;
    color: #92400e !important;
    box-shadow: 0 1px 4px rgba(245,158,11,.06) !important;
}
.alert-info {
    background: rgba(237,233,254,.85) !important;
    border: 1px solid rgba(139,92,246,.18) !important;
    color: #5b21b6 !important;
    box-shadow: 0 1px 4px rgba(139,92,246,.06) !important;
}

/* ── 服务器状态页：隐藏 .alert 下方重复的普通文本段落 ──
   结构：.alert-success（带 ✓ 的气泡）后紧跟 <p> 同内容文字
   用相邻兄弟选择器只隐藏紧跟在 alert 后的 <p>，不影响其他内容 ── */
.alert-success + p,
.alert-success + div > p:first-child {
    display: none !important;
}
/* 备用：networkissues 页面特定结构 */
#networkissues .alert + p,
.network-issues .alert + p,
.network-status .alert + p {
    display: none !important;
}
/* ================================================================
   VMVM Theme - 修复英文状态下 Order Now 按钮文字右侧触边/溢出
   ================================================================ */

/* 1. 给购买按钮强制加上左右安全距离，防止文字贴边 */
a.btn-order-now,
.btn.btn-order-now,
#order-standard_cart a.btn-order-now {
    white-space: nowrap !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
}

/* 2. 针对手机端极窄屏幕（如小于380px宽的设备），微调字号和边距，确保完美容纳英文 */
@media (max-width: 380px) {
    a.btn-order-now,
    .btn.btn-order-now,
    #order-standard_cart a.btn-order-now {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
        font-size: 0.8125rem !important; /* 略微缩小字号，为长英文腾出空间 */
    }
}
/* ================================================================
   VMVM Theme - 终极解决：购物车产品选中时顶部边框消失/被吞 Bug
   ================================================================ */

/* 1. 解除父容器的“死亡裁剪”（这是导致顶部线条消失的真凶） */
@media (max-width: 767.98px) {
    #order-standard_cart,
    #order-standard_cart .row,
    #order-standard_cart .products,
    #order-standard_cart .container,
    #order-standard_cart .container-fluid {
        overflow: visible !important;
        overflow-x: visible !important;
    }
}

/* 2. 放弃传统 border，改用“绝对内聚”的内阴影描边法 */
#order-standard_cart .product.active,
#order-standard_cart .product.selected,
.product-group .card.active,
.product-group .card.selected,
.vmvm-addon-card.selected {
    /* 边框变透明，仅做物理占位防止高度跳动 */
    border: 1px solid transparent !important; 
    background-clip: padding-box !important;
    /* 核心：用 inset 向内画出 1.5px 的实线紫框。内阴影永远在背景色的上方，绝不可能被吞！ */
    box-shadow: 
        inset 0 0 0 1.5px #8b5cf6, 
        0 8px 32px rgba(139, 92, 246, 0.12) !important; 
}
/* ================================================================
   VMVM Theme - 修复 iPad/平板端购物车右侧订单摘要错位 BUG
   ================================================================ */

/* 1. 彻底干掉 WHMCS 原生 JS 动态计算定位导致的溢出，改用原生 CSS 粘性吸顶 */
#scrollingPanelContainer {
    position: -webkit-sticky !important; /* 兼容 Safari */
    position: sticky !important;
    top: 1.5rem !important; /* 页面往下滚时，距离屏幕顶部的吸顶间距 */
    width: 100% !important; /* 宽度绝对服从父级栅格，杜绝溢出重叠 */
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* 2. 针对 iPad Air / Pro 等平板尺寸 (768px - 1199px) 的专属栅格比例优化 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* 确保父级容器启用纯净的弹性盒子 */
    #order-standard_cart > .row {
        display: flex !important;
        flex-wrap: nowrap !important; /* 强制左右并排，不许掉下去 */
    }
    
    /* 左侧产品配置区：比例从原生的 66.6% 稍微收缩到 60% */
    #order-standard_cart .secondary-cart-body {
        flex: 0 0 60% !important;
        max-width: 60% !important;
        padding-right: 0.75rem !important;
    }
    
    /* 右侧订单摘要区：比例从原生的 33.3% 加宽到 40%，防止价格/按钮文字挤压 */
    #order-standard_cart .secondary-cart-sidebar {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        padding-left: 0.75rem !important;
        margin-top: 0 !important; 
    }
}
/* ================================================================
   VMVM Theme - 补充 iPad 右侧订单摘要的安全右边距
   ================================================================ */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #order-standard_cart .secondary-cart-sidebar {
        padding-right: 0.75rem !important; /* 补上遗漏的右侧呼吸空间 */
    }
}
/* ================================================================
   VMVM Theme - 终极修复 iPad 端 Order Now 按钮触边溢出
   ================================================================ */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #order-standard_cart .secondary-cart-sidebar {
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* 强制缩小按钮本身宽度，彻底杜绝贴边，并使其水平居中 */
    #order-standard_cart .secondary-cart-sidebar .btn-order-now,
    #order-standard_cart .secondary-cart-sidebar button[type="submit"] {
        width: calc(100% - 10px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }
}
/* ================================================================
   VMVM Theme - 修复 Chrome 平板端 Order Now 按钮触边溢出
   ================================================================ */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* 1. 强制给侧边栏容器加内边距，作为第一道防线 */
    #order-standard_cart .secondary-cart-sidebar {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* 2. 针对 Chrome 的特定优化：放弃 calc，改用自动宽度 + 侧边距 */
    #order-standard_cart .secondary-cart-sidebar .btn-order-now,
    #order-standard_cart .secondary-cart-sidebar button[type="submit"],
    #order-standard_cart .secondary-cart-sidebar .btn-checkout {
        width: auto !important;
        min-width: 100% !important; /* 保证铺满但受制于父级 padding */
        display: block !important;
        white-space: nowrap !important;
    }
}

/* 额外的 Safari/Chrome 兼容补丁：防止内容撑破容器 */
.secondary-cart-sidebar .cart-summary,
.secondary-cart-sidebar .order-summary {
    max-width: 100% !important;
    overflow: hidden !important;
}
/* ================================================================
   [FIX] 结账页 - 账户选择左右并排 + 新建账户表单全宽
   ================================================================ */

/* 强制flex覆盖Bootstrap float布局 */
#containerExistingAccountSelect {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
}

/* 所有直接子列默认50% */
#containerExistingAccountSelect > [class*="col-"] {
    float: none !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 表单展开时，含表单的列独占整行 */
#containerExistingAccountSelect > [class*="col-"]:has(#containerNewUserSignup:not([style*="display: none"])) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 表单本身全宽 */
#containerNewUserSignup {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* state select 隐藏 */
#containerNewUserSignup #stateselect {
    display: none !important;
}

/* ================================================================
   [FIX] configproduct 页并排布局 (>=768px)
   ================================================================ */
@media (min-width: 768px) {
    #order-standard_cart form > .row,
    #order-standard_cart .cart-body > form > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
    #order-standard_cart .secondary-cart-body {
        flex: 0 0 62% !important;
        max-width: 62% !important;
        padding-right: 1.25rem !important;
    }
    #order-standard_cart .secondary-cart-sidebar,
    #order-standard_cart #scrollingPanelContainer {
        flex: 0 0 38% !important;
        max-width: 38% !important;
    }
}

/* ================================================================
   [FIX] 结账页 未登录注册面板宽度修复
   ================================================================ */
.vmvm-checkout-auth,
#vmvmRegisterPanel,
#vmvmLoginPanel {
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
}

/* 结账页 已登录 新建账户表单全宽 */
#containerNewUserSignup {
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
}
/* ================================================================
   [FIX] 产品服务列表手机端横向滑动（覆盖 body overflow-x:hidden）
   ================================================================ */
@media (max-width: 767px) {
    /* 给表格直接父容器设置横向滚动 */
    #tableServicesList_wrapper,
    .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* 脱离 body overflow:hidden 的裁剪上下文 */
        position: relative !important;
        z-index: 1 !important;
    }
    /* 表格本身保持最小宽度，不被压缩 */
    #tableServicesList {
        min-width: 480px !important;
    }
    /* 不能让 overflow:visible 往上传播被 body 截掉，
       所以只在 wrapper 上设 auto，不动 visible */
}
/* ================================================================
   [FIX] 侧边栏 dl-horizontal 文字挤压
   产品/服务、域名等字段左右均衡显示
   ================================================================ */
.sidebar .panel-body dl,
.sidebar .card-body dl,
.sidebar dl {
    display: flex !important;
    flex-direction: column !important;
    gap: .375rem !important;
    margin: 0 !important;
}
.sidebar .panel-body dl > div,
.sidebar .card-body dl > div,
.sidebar dl > div,
.sidebar .dl-horizontal dt,
.sidebar dl dt {
    display: block !important;
    float: none !important;
    width: auto !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    color: var(--v-t3) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sidebar .dl-horizontal dd,
.sidebar dl dd {
    display: block !important;
    float: none !important;
    margin-left: 0 !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    color: var(--v-t1) !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    margin-bottom: .375rem !important;
    padding: 0 !important;
}