/*!
 * Linceris WHMCS Theme  -  brand layer
 * Built from linceris.com (index.html): dark #020617 canvas with blue grid glow,
 * JetBrains Mono, uppercase chrome, cut-corner buttons, glass cards.
 *
 * Loaded AFTER theme.min.css (Bootstrap 4.5 + WHMCS base) and custom.css (tokens).
 * Convention copied from the site: UI chrome (nav, labels, buttons, headings,
 * table heads, badges) is UPPERCASE; reading content (paragraphs, inputs, table
 * cells, alerts, ticket messages) stays natural case.
 */

/* ===================================================================
   1. BASE
   =================================================================== */
html { scroll-behavior: smooth; }

body,
body.primary-bg-color {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.3px;
    color: var(--text-main);
    background-color: var(--bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.menu-open { overflow: hidden; }

/* Fixed blue grid + glow canvas (verbatim from the site) */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 15%, rgba(16, 98, 254, 0.25) 0%, transparent 35%),
        radial-gradient(circle at 85% 30%, rgba(16, 98, 254, 0.15) 0%, transparent 30%),
        radial-gradient(circle at 50% 70%, rgba(16, 98, 254, 0.2) 0%, transparent 40%),
        linear-gradient(rgba(16, 98, 254, 0.08) 1.5px, transparent 1.5px),
        linear-gradient(90deg, rgba(16, 98, 254, 0.08) 1.5px, transparent 1.5px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 60px 60px, 60px 60px;
    animation: lncBgPulse 10s ease-in-out infinite alternate;
}
@keyframes lncBgPulse { 0% { opacity: .8; } 100% { opacity: 1; } }
@keyframes lncFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

::selection { background: var(--primary); color: #fff; }

.container { max-width: 1400px; padding-left: 24px; padding-right: 24px; }

a { color: var(--primary-light); transition: .3s ease; }
a:hover { color: #fff; text-decoration: none; }

hr { border-top: 1px solid var(--glass-border); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-fancy);
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
h1, .h1 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); letter-spacing: -1px; }
h2, .h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -1px; }
h3, .h3 { font-size: 1.25rem; font-weight: 700; }
h4, .h4 { font-size: 1.05rem; font-weight: 700; }
h5, .h5 { font-size: .95rem; font-weight: 700; }
h6, .h6 { font-size: .8rem; font-weight: 700; }
h1 span.accent, h2 span.accent { color: var(--primary); }
h1 small, h2 small, h3 small, .h1 small, .h2 small, .h3 small { font-family: var(--font-mono); color: var(--text-dim); font-weight: 400; }

p, li, td, dd { text-transform: none; }
.breadcrumb li, .nav-links li, .dropdown-menu li, .footer-col li, .list-group-item { text-transform: inherit; }
small, .small { font-size: 78%; }
.text-muted, .text-secondary { color: var(--text-dim) !important; }
.text-primary { color: var(--primary-light) !important; }
.text-success { color: var(--status-green-subtle) !important; }
.text-danger { color: var(--status-red) !important; }
.text-warning { color: var(--status-orange) !important; }
.text-info { color: var(--primary-light) !important; }
.text-white, .text-light { color: #fff !important; }
.text-dark { color: var(--text-main) !important; }
.bg-white, .bg-light { background-color: rgba(15, 23, 42, .6) !important; }
.bg-dark { background-color: #020617 !important; }
.bg-primary { background-color: var(--primary) !important; }
.border, .border-top, .border-bottom, .border-left, .border-right { border-color: var(--glass-border) !important; }
code { color: var(--primary-light); background: rgba(16, 98, 254, .1); padding: .1em .4em; border-radius: 4px; }
pre, kbd { background: rgba(15, 23, 42, .8); color: var(--silver); border: 1px solid var(--glass-border); border-radius: 8px; }
pre { padding: 1rem; }
mark, .mark { background: rgba(16, 98, 254, .35); color: #fff; }
blockquote { border-left: 3px solid var(--primary); padding-left: 1rem; color: var(--text-dim); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--primary-light); }

img { -webkit-user-drag: none; }

/* Main content entrance, same easing as the site's .reveal */
/* NB: no fill-mode - a retained transform would trap position:fixed modals inside content */
.primary-content, .sidebar { animation: lncContentIn .6s cubic-bezier(.2, 1, .3, 1); }
@keyframes lncContentIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

/* ===================================================================
   2. TOPBAR (logged-in strip)
   =================================================================== */
.site-header .topbar {
    background: rgba(2, 6, 23, .92);
    border-bottom: 1px solid var(--glass-border);
    font-family: var(--font-mono);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 4px 0;
}
.topbar .active-client { display: inline-flex; align-items: center; gap: 4px; }
.topbar .active-client-label { color: var(--text-dim); margin-right: 6px; }
.topbar .topbar-btn,
.topbar .topbar-btn:focus {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    box-shadow: none;
    clip-path: none;
}
.topbar .topbar-btn:hover { color: #fff; border-color: var(--glass-border); background: rgba(16, 98, 254, .1); transform: none; }
.topbar .btn-active-client { color: #fff; font-weight: 700; }
.topbar .btn-return-to-admin { color: var(--status-orange); border-color: rgba(255, 157, 0, .35); }
.topbar .btn-return-to-admin:hover { color: #fff; background: rgba(255, 157, 0, .15); border-color: var(--status-orange); }

/* ===================================================================
   3. MAIN NAVBAR  -  copied from linceris.com: transparent, 100px,
      no background, no border, same links / outlined buttons / overlay.
   =================================================================== */
.site-header { position: relative; z-index: 1000; background: transparent; }
.site-header .topbar { background: transparent; border: 0; font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: 1.5px; padding: 8px 0 0; }
.topbar .active-client { display: inline-flex; align-items: center; gap: 4px; }
.topbar .active-client-label { color: var(--text-dim); margin-right: 6px; }
.topbar .topbar-btn, .topbar .topbar-btn:focus {
    background: transparent; border: 1px solid transparent; border-radius: 4px; color: var(--text-dim);
    font-family: var(--font-mono); font-size: .65rem; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 4px 10px; box-shadow: none; clip-path: none;
}
.topbar .topbar-btn:hover { color: #fff; border-color: var(--glass-border); background: rgba(16, 98, 254, .1); transform: none; }
.topbar .btn-active-client { color: #fff; font-weight: 700; }
.topbar .btn-return-to-admin { color: var(--status-orange); border-color: rgba(255, 157, 0, .35); }
.topbar .btn-return-to-admin:hover { color: #fff; background: rgba(255, 157, 0, .15); border-color: var(--status-orange); }

/* hard guarantee: the header/nav surface is never filled */
#header.site-header, nav#mainNav.site-nav {
    background: transparent !important; background-image: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important; border-color: transparent !important;
}
nav.site-nav {
    height: 100px;
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: all .4s ease;
    padding: 0;
}
.nav-content { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; gap: 15px; }
.logo-link { display: flex; align-items: center; z-index: 1001; flex-shrink: 0; }
.logo-img { max-height: 55px; width: auto; object-fit: contain; transition: .3s; filter: drop-shadow(0 0 10px rgba(16, 98, 254, .2)); }

.nav-links { display: flex; align-items: center; gap: 30px; flex: 1 1 0; min-width: 0; justify-content: flex-end; }
.mobile-logo, .close-menu, .menu-toggle { display: none; }

/* #nav is measured by whmcs.js autoCollapse(): one row must stay <30px tall,
   so hit-areas are enlarged with a pseudo-element, not padding. */
.nav-links #nav {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    flex: 0 1 auto; min-width: 0; gap: 0 30px; margin: 0; padding: 0; list-style: none;
}
.nav-links .navbar-nav { flex-direction: row; }
.nav-links li { position: relative; list-style: none; }
.nav-links .nav-primary > li > a {
    position: relative; display: inline-block; padding: 0;
    color: var(--text-dim); text-decoration: none;
    font-family: var(--font-mono); font-size: .7rem; line-height: 1.6;
    text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap;
    transition: .3s ease;
}
.nav-links .nav-primary > li > a::before { content: ''; position: absolute; left: -6px; right: -6px; top: -22px; bottom: -22px; }
.nav-links .nav-primary > li > a:hover, .nav-links .nav-primary > li.show > a { color: var(--primary); transform: translateY(-2px); }
.nav-links .dropdown-toggle::after { margin-left: .5em; vertical-align: .15em; border-top-color: currentColor; }
.nav-links .badge { font-size: .55rem; padding: 2px 6px; vertical-align: 1px; }

/* right cluster (site .nav-auth) */
.nav-auth {
    display: flex; align-items: center; gap: 15px; flex-shrink: 0;
    margin-left: 20px; border-left: 1px solid var(--glass-border); padding-left: 25px;
}
.nav-auth .nav-secondary { display: flex; flex-direction: row; align-items: center; gap: 15px; margin: 0; padding: 0; }

/* outlined buttons (site .btn-nav-discord / .btn-nav-dashboard) */
.btn-nav-discord, .btn-nav-dashboard,
.nav-links .nav-secondary > li > a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    font-family: var(--font-mono); font-size: .65rem; font-weight: 700; line-height: 1.6;
    text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap;
    color: var(--text-dim); background: transparent;
    border: 1px solid var(--glass-border); border-radius: 4px;
    text-decoration: none; transition: .3s; cursor: pointer;
}
.btn-nav-dashboard:hover, .btn-nav-dashboard:focus,
.nav-links .nav-secondary > li > a:hover, .nav-links .nav-secondary > li.show > a {
    color: #fff; border-color: var(--primary); background: rgba(16, 98, 254, .1); transform: none; outline: none;
}
.btn-nav-discord:hover { color: #5865F2 !important; border-color: #5865F2 !important; background: rgba(88, 101, 242, .1); }
.btn-nav-discord i { color: #5865F2; }
.nav-cart { flex-shrink: 0; position: relative; }
.nav-cart .badge { background: var(--primary); color: #fff; font-size: .6rem; padding: 2px 6px; border-radius: 4px; }
.nav-search-menu { min-width: 300px; padding: 12px; }
.nav-search-menu .form-control { height: 40px; }

/* tighter spacing only where the full-size header would overflow */
@media (min-width: 1101px) and (max-width: 1250px) {
    .btn-nav-discord { font-size: 0; gap: 0; }
    .btn-nav-discord i { font-size: .9rem; }
    .nav-links { gap: 14px; }
    .nav-links #nav { gap: 0 18px; }
    .nav-links .nav-primary > li > a { letter-spacing: 1px; }
    .nav-auth { margin-left: 0; padding-left: 16px; gap: 10px; }
    .nav-auth .nav-secondary { gap: 10px; }
    .btn-nav-discord, .btn-nav-dashboard, .nav-links .nav-secondary > li > a { padding: 8px 11px; letter-spacing: 1px; }
}

/* dropdown panels (the only glass surface in the nav - needed for legibility) */
.dropdown-menu {
    background: rgba(2, 6, 23, .96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border); border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(16, 98, 254, .08);
    padding: 8px; margin-top: 14px; min-width: 220px; font-family: var(--font-mono);
}
.dropdown-menu li { list-style: none; }
.dropdown-menu .dropdown-item, .dropdown-menu li.dropdown-item > a {
    display: block; color: var(--text-dim); font-size: .68rem; letter-spacing: 1px; text-transform: uppercase;
    padding: 9px 12px; border-radius: 4px; background: transparent; white-space: normal;
}
.dropdown-menu li.dropdown-item { padding: 0; background: transparent; }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu li.dropdown-item:hover { background: rgba(16, 98, 254, .12); color: var(--primary-light); }
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { background: var(--primary); color: #fff; }
.dropdown-menu .dropdown-item.disabled { color: var(--neutral-400); }
.dropdown-divider { border-top: 1px solid var(--glass-border); margin: 6px 0; }
.dropdown-header { color: var(--primary); font-size: .6rem; letter-spacing: 2px; text-transform: uppercase; }
.collapsable-dropdown-menu li.dropdown-item { display: block; }
.collapsable-dropdown-menu li.dropdown-item a { display: block; color: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; padding: 9px 12px; }

/* ----- <= 1100px: full-screen overlay (site uses 992px; WHMCS needs room for more menu items) ----- */
@media (max-width: 1100px) {
    nav.site-nav { height: 80px; }
    .nav-cart { margin-left: auto; margin-right: 44px; }
    .menu-toggle { display: block; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 1002; transition: .3s; }
    /* display:none keeps #nav height 0 so autoCollapse never fires while the menu is closed */
    .nav-links { display: none; }
    .nav-links.active {
        display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        flex-direction: column; justify-content: center; align-items: center;
        background: #020617; padding: 40px; gap: 25px; overflow-y: auto; z-index: 1005;
        animation: lncMenuIn .4s cubic-bezier(.7, 0, .3, 1);
    }
    @keyframes lncMenuIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
    .mobile-logo { display: block; margin-bottom: 20px; text-align: center; }
    .mobile-logo img { max-height: 60px; }
    .close-menu { display: block; position: absolute; top: 30px; right: 30px; font-size: 2rem; color: #fff; cursor: pointer; }
    .nav-links #nav { flex: 0 0 auto; flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 25px; }
    .nav-links .nav-primary > li > a { font-size: 1.2rem; font-weight: 700; color: #fff; letter-spacing: 2px; }
    .nav-links .nav-primary > li > a::before { top: -8px; bottom: -8px; }
    .nav-auth { flex-direction: column; border-left: none; padding-left: 0; margin-left: 0; width: 100%; gap: 15px; margin-top: 20px; align-items: center; }
    .nav-auth .nav-secondary { flex-direction: column; gap: 15px; width: 100%; align-items: center; }
    .nav-auth .nav-secondary > li { width: 100%; display: flex; justify-content: center; }
    .nav-auth a, .nav-auth .btn-nav-dashboard, .nav-links .nav-secondary > li > a { width: 100%; max-width: 280px; text-align: center; justify-content: center; }
    .nav-auth .dropdown.nav-search { width: 100%; display: flex; justify-content: center; }
    .nav-links .dropdown-menu { position: static !important; transform: none !important; float: none; margin: 10px auto 0; text-align: center; width: 100%; max-width: 320px; }
    .nav-search-menu { min-width: 0; }
}

/* ===================================================================
   4. BREADCRUMB  (site .hero-tag language)
   =================================================================== */
.master-breadcrumb { background: transparent; padding: 28px 0 8px; }
.master-breadcrumb .breadcrumb {
    display: inline-flex;
    background: rgba(16, 98, 254, .05);
    border: 1px solid var(--primary);
    border-radius: 4px;
    padding: 5px 15px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--text-dim); }
.breadcrumb-item a:hover { color: var(--primary-light); }
.breadcrumb-item.active { color: var(--primary); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--primary); content: "/"; padding-right: .7rem; }

#main-body { padding: 24px 0 90px; min-height: 55vh; }

/* ===================================================================
   5. BUTTONS  (cut-corner clip-path, mono caps, glow on hover)
   =================================================================== */
.btn {
    font-family: var(--font-fancy);
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: 0;
    transition: .3s;
    box-shadow: none;
    line-height: 1.4;
}
.btn:focus, .btn.focus { box-shadow: none; outline: none; }
.btn:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }
.btn.disabled, .btn:disabled { opacity: .4; }

/* solid -> notch bottom-right (site .btn-primary) */
.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning {
    color: #fff;
    border: none;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%);
}
.btn-primary { background: var(--primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--primary-dark); color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px var(--primary-glow);
}
.btn-success { background: var(--star-green); }
.btn-success:hover, .btn-success:focus, .btn-success:active { background: #009a68; color: #fff; transform: translateY(-3px); }
.btn-danger { background: #d83a3a; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: #b92d2d; color: #fff; transform: translateY(-3px); }
.btn-info { background: var(--primary-light); }
.btn-info:hover, .btn-info:focus, .btn-info:active { background: #0080d6; color: #fff; transform: translateY(-3px); }
.btn-warning { background: var(--status-orange); color: #020617; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background: #d98400; color: #020617; transform: translateY(-3px); }

/* outline -> notch top-left (site .btn-outline) */
.btn-default, .btn-secondary, .btn-light, .btn-dark, .btn-link.btn-outline,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-info, .btn-outline-warning {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: #fff;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 30%);
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover, .btn-dark:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover, .btn-outline-danger:hover, .btn-outline-info:hover, .btn-outline-warning:hover,
.btn-default:focus, .btn-secondary:focus, .btn-outline-primary:focus, .btn-default:active, .btn-secondary:active, .btn-outline-primary:active,
.btn-default:not(:disabled):not(.disabled):active {
    border-color: var(--primary); color: var(--primary-light); background: rgba(16, 98, 254, .08); box-shadow: none;
}
.btn-outline-success { color: var(--status-green-subtle); }
.btn-outline-danger { color: var(--status-red); }
.btn-outline-warning { color: var(--status-orange); }
.btn-outline-primary:hover { background: var(--primary); color: #fff; }
.btn-outline-success:hover { background: var(--star-green); border-color: var(--star-green); color: #fff; }
.btn-outline-danger:hover { background: #d83a3a; border-color: #d83a3a; color: #fff; }
.btn-link { color: var(--primary-light); font-weight: 700; text-decoration: none; padding-left: 8px; padding-right: 8px; }
.btn-link:hover { color: #fff; text-decoration: none; }

/* compact / grouped / inline buttons: no clip so they never cut content or menus */
.btn-sm, .btn-group-sm > .btn, .btn-xs, .btn-group-xs > .btn,
.btn-group > .btn, .btn-group-vertical > .btn,
.input-group .btn, .dropdown-toggle.btn, .btn-icon, .btn-reveal-pw,
.table .btn, .card-header .btn, .pagination .btn, .modal-header .btn, .bootstrap-switch .btn {
    clip-path: none;
}
.btn-sm, .btn-group-sm > .btn, .btn-xs, .btn-group-xs > .btn { padding: 8px 14px; font-size: .65rem; letter-spacing: 1.5px; border-radius: 4px; }
.btn-lg, .btn-group-lg > .btn { padding: 18px 36px; font-size: .78rem; }
.btn-group > .btn, .input-group .btn { border-radius: 0; }
.btn-group > .btn:first-child, .input-group-append .btn { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.btn-group > .btn:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.btn-group > .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.btn-block { display: block; width: 100%; }
.close { color: #fff; text-shadow: none; opacity: .7; font-weight: 400; }
.close:hover { color: var(--primary-light); opacity: 1; }

/* ===================================================================
   6. FORMS
   =================================================================== */
label, .form-control-label, legend { font-family: var(--font-mono); font-size: .68rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); font-weight: 500; }
.form-check-label, .custom-control-label, .radio-inline, .checkbox-inline, .form-check label { text-transform: none; letter-spacing: .3px; font-size: .8rem; color: var(--silver); }

.form-control, .custom-select, select.form-control, textarea.form-control,
.input-group-text, .select2-selection, input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=url], input[type=search], textarea, select {
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .3px;
    text-transform: none;
    color: #fff;
    background-color: rgba(15, 23, 42, .6);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
}
.form-control, .custom-select { height: calc(1.6em + 1.4rem); padding: .7rem .9rem; }
textarea.form-control { height: auto; }
.form-control::placeholder { color: #64748b; opacity: 1; }
.form-control:focus, .custom-select:focus, textarea:focus {
    color: #fff;
    background-color: rgba(16, 98, 254, .06);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    outline: 0;
}
.form-control:disabled, .form-control[readonly], .custom-select:disabled {
    background-color: rgba(2, 6, 23, .7); color: var(--text-dim); opacity: 1;
}
.custom-select, select.form-control {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231062fe' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px 8px; padding-right: 2.2rem;
}
select option, select optgroup { background: #0b1224; color: #fff; }
input:-webkit-autofill, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px #0b1224 inset; caret-color: #fff; border: 1px solid var(--glass-border);
}
.input-group-text { color: var(--text-dim); background-color: rgba(16, 98, 254, .08); }
.input-group-merge .input-group-text { border-right: 0; }
.form-group.has-error .form-control, .form-control.is-invalid { border-color: var(--status-red); }
.form-control.is-valid { border-color: var(--star-green); }
.invalid-feedback, .field-error-msg { color: var(--status-red); font-size: .72rem; }
.form-text, .help-block { color: var(--text-dim); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--primary); border-color: var(--primary); }
.custom-control-label::before { background-color: rgba(15, 23, 42, .8); border: 1px solid var(--glass-border); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--primary-glow); }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
.custom-range::-webkit-slider-thumb { background: var(--primary); }
.custom-file-label { background: rgba(15, 23, 42, .6); border-color: var(--glass-border); color: var(--text-dim); }
.custom-file-label::after { background: rgba(16, 98, 254, .15); color: #fff; border-left: 1px solid var(--glass-border); }
.iradio_square-blue, .icheckbox_square-blue { filter: hue-rotate(0deg) brightness(.95); }
.bootstrap-switch { border-color: var(--glass-border); background: transparent; }
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label { font-family: var(--font-mono); font-size: .65rem; letter-spacing: 1px; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--primary); }
.bootstrap-switch .bootstrap-switch-label { background: #1e293b; color: #fff; }
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default { background: #0f172a; color: var(--text-dim); }

/* intl-tel-input + multiselect */
.intl-tel-input .country-list, .iti__country-list { background: #0b1224; border: 1px solid var(--glass-border); color: #fff; }
.intl-tel-input .country-list .country.highlight, .iti__country.iti__highlight { background: rgba(16, 98, 254, .15); }
.intl-tel-input .country-list .divider { border-bottom-color: var(--glass-border); }
.intl-tel-input .selected-flag:hover, .intl-tel-input .selected-flag:focus { background: rgba(16, 98, 254, .1); }
.multiselect-container { background: #0b1224; border: 1px solid var(--glass-border); }
.multiselect-container > li > a > label { color: var(--silver); text-transform: none; }
.multiselect-container > li > a:hover { background: rgba(16, 98, 254, .12); }

/* password strength + progress */
.progress { background: rgba(15, 23, 42, .9); border: 1px solid var(--glass-border); border-radius: 4px; height: 8px; }
.progress-bar { background: var(--primary); }
.progress-bar-success, .bg-success.progress-bar { background: var(--star-green) !important; }
.progress-bar-warning, .bg-warning.progress-bar { background: var(--status-orange) !important; }
.progress-bar-danger, .bg-danger.progress-bar { background: var(--status-red) !important; }

/* ===================================================================
   7. CARDS  (glass panel + the price-card accent bar)
   =================================================================== */
.card, .primary-content .card, .primary-content .mc-promo-manage, .primary-content .mc-promo-login,
.mc-promo-manage, .mc-promo-login, .promo-container, .panel {
    position: relative;
    background: rgba(15, 23, 42, .55);
    /* no backdrop-filter here: it would become the containing block for modals nested in cards */
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: none;
    color: var(--text-main);
    transition: .3s ease;
}
.card::before, .primary-content .card::before {
    content: ''; position: absolute; top: -1px; left: -1px; width: 80px; height: 6px; z-index: 1;
    background: var(--primary); border-top-left-radius: 12px;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
    pointer-events: none;
}
.card:hover { border-color: rgba(16, 98, 254, .45); }
.card-header {
    background: rgba(16, 98, 254, .05);
    border-bottom: 1px solid var(--glass-border);
    border-radius: 12px 12px 0 0 !important;
    padding: 1rem 1.4rem;
    color: #fff;
}
.card-footer { background: rgba(2, 6, 23, .4); border-top: 1px solid var(--glass-border); border-radius: 0 0 12px 12px !important; color: var(--text-dim); }
.card-body, .primary-content .card-body { padding: 1.5rem; color: var(--text-main); }
.card-title, .primary-content .card-title, .primary-content .card-title.h3 {
    font-family: var(--font-fancy); font-weight: 700; font-size: .95rem; letter-spacing: 1px; text-transform: uppercase; color: #fff;
}
.card-columns .card { break-inside: avoid; }
.card-accent-gold, .card-accent-orange, .card-accent-sun-flower { border-top: 2px solid var(--status-orange); }
.card-accent-green, .card-accent-lime, .card-accent-emerald, .card-accent-teal, .card-accent-turquoise { border-top: 2px solid var(--star-green); }
.card-accent-red, .card-accent-pomegranate, .card-accent-magenta { border-top: 2px solid var(--status-red); }
.card-accent-blue, .card-accent-wet-asphalt, .card-accent-midnight-blue, .card-accent-silver, .card-accent-asbestos { border-top: 2px solid var(--primary); }
.card-accent-purple, .card-accent-amethyst, .card-accent-pink { border-top: 2px solid var(--discord); }
.jumbotron { background: rgba(15, 23, 42, .4); border: 1px solid var(--glass-border); border-radius: 12px; }

/* tinted highlight bars used by tiles & promo headers */
.bg-color-blue, .bg-color-wet-asphalt, .bg-color-midnight-blue, .bg-color-silver, .bg-color-asbestos { background-color: var(--primary) !important; }
.bg-color-green, .bg-color-lime, .bg-color-emerald, .bg-color-teal, .bg-color-turquoise { background-color: var(--star-green) !important; }
.bg-color-red, .bg-color-pomegranate, .bg-color-magenta { background-color: var(--status-red) !important; }
.bg-color-gold, .bg-color-orange, .bg-color-sun-flower { background-color: var(--status-orange) !important; }
.bg-color-pink, .bg-color-purple, .bg-color-amethyst { background-color: var(--discord) !important; }

/* list groups */
.list-group-item {
    background: transparent; color: var(--silver); border: 0; border-bottom: 1px solid var(--glass-border);
    font-size: .8rem; transition: .3s ease;
}
.list-group-item:last-child { border-bottom: 0; }
.list-group-item-action:hover, .list-group-item-action:focus { background: rgba(16, 98, 254, .08); color: #fff; }
.list-group-item.active, .list-group-item.active:hover { background: rgba(16, 98, 254, .18); color: #fff; border-color: var(--glass-border); box-shadow: inset 3px 0 0 var(--primary); }
.list-group-item.disabled { color: #475569; background: transparent; }

/* ===================================================================
   8. TABLES  &  DATATABLES
   =================================================================== */
.table { color: var(--silver); font-size: .82rem; margin-bottom: 0; background: transparent; }
.table th, .table td { border-top: 1px solid var(--glass-border); padding: .9rem 1rem; vertical-align: middle; }
.table thead th {
    font-family: var(--font-mono); font-size: .65rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--primary-light); background: rgba(16, 98, 254, .05);
    border-top: 0; border-bottom: 1px solid var(--glass-border);
}
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(16, 98, 254, .03); }
.table-hover tbody tr:hover, .table tbody tr:hover { background-color: rgba(16, 98, 254, .07); color: #fff; }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--glass-border); }
.table-light, .table-light > td, .table-light > th { background: rgba(15, 23, 42, .6); color: #fff; }
.table-active, .table-active > td, .table-active > th { background: rgba(16, 98, 254, .12); }
.table-responsive { border-radius: 8px; }
.table-container, .table-list { background: transparent; }
.table a { color: #fff; font-weight: 500; }
.table a:hover { color: var(--primary-light); }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { color: var(--primary); }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_info, .dataTables_length label, .dataTables_filter label {
    color: var(--text-dim); font-size: .7rem; letter-spacing: 1px; text-transform: uppercase;
}
.dataTables_filter input, .dataTables_length select { margin: 0 6px; height: 36px; padding: 0 10px; width: auto; display: inline-block; }
div.dataTables_wrapper div.dataTables_processing { background: #0b1224; border: 1px solid var(--glass-border); color: #fff; }
.dataTables_empty { color: var(--text-dim); text-align: center; padding: 2rem !important; }
.view-filter-btns { margin-bottom: 1rem; }

/* WHMCS "table-list" (client-side DataTables) - original sets hard white cells */
.dataTables_wrapper table.table-list, .dataTables_wrapper table.table-list.table {
    border: 1px solid var(--glass-border); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin: 14px 0 !important;
}
table.table-list thead th, .dataTables_wrapper table.table-list thead th {
    background-color: rgba(16, 98, 254, .06); color: var(--primary-light); border-bottom: 1px solid var(--glass-border);
    font-weight: 700; text-align: left; padding: .9rem 1rem;
}
.dataTables_wrapper table.table-list thead th.sorting_asc, .dataTables_wrapper table.table-list thead th.sorting_desc { background-color: rgba(16, 98, 254, .14); }
table.table-list tbody td, .table-list > tbody > tr > td { background-color: transparent; color: var(--silver); font-size: .82rem; border-top: 1px solid var(--glass-border); padding: .9rem 1rem; }
.table-list > tbody > tr:hover > td { background-color: rgba(16, 98, 254, .08); color: #fff; }
.table-list > tbody > tr > td a.border-left { border-left: 1px solid var(--glass-border); }
.dataTables_wrapper .dataTables_filter label .form-control { background-color: rgba(15, 23, 42, .6); background-image: none; padding: 0 12px !important; height: 38px; font-size: .8rem; }
.dataTables_wrapper .dataTables_filter label .form-control:focus { background-color: rgba(16, 98, 254, .06); }
table.table-solid-bottom-border-light-gray { border-bottom: 1px solid var(--glass-border); }

/* pagination */
.pagination .page-link, .pagination > li > a, .pagination > li > span {
    background: rgba(15, 23, 42, .6); border: 1px solid var(--glass-border); color: var(--text-dim);
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: 1px; padding: .5rem .85rem; margin: 0 2px; border-radius: 4px;
}
.pagination .page-link:hover, .pagination > li > a:hover { background: rgba(16, 98, 254, .12); border-color: var(--primary); color: #fff; }
.page-item.active .page-link, .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.page-item.disabled .page-link { background: transparent; color: #475569; border-color: var(--glass-border); }

/* ===================================================================
   9. ALERTS, BADGES, LABELS, STATUS
   =================================================================== */
.alert {
    font-size: .82rem; text-transform: none; letter-spacing: .3px;
    background: rgba(15, 23, 42, .6); color: var(--silver);
    border: 1px solid var(--glass-border); border-left-width: 3px; border-radius: 8px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.alert a, .alert .alert-link { color: #fff; text-decoration: underline; }
.alert-info { border-color: rgba(0, 154, 255, .4); border-left-color: var(--primary-light); background: rgba(0, 154, 255, .08); color: #bfe3ff; }
.alert-success { border-color: rgba(0, 182, 122, .4); border-left-color: var(--star-green); background: rgba(0, 182, 122, .08); color: #b6f3dc; }
.alert-warning { border-color: rgba(255, 157, 0, .4); border-left-color: var(--status-orange); background: rgba(255, 157, 0, .08); color: #ffe0ad; }
.alert-danger, .alert-error { border-color: rgba(255, 77, 77, .4); border-left-color: var(--status-red); background: rgba(255, 77, 77, .08); color: #ffc4c4; }
.alert-primary { border-color: var(--glass-border); border-left-color: var(--primary); background: rgba(16, 98, 254, .08); color: #cfe0ff; }
.alert-dark, .alert-secondary, .alert-light { background: rgba(15, 23, 42, .6); color: var(--silver); }
.alert .close { color: #fff; }

.badge, .label {
    display: inline-block; font-family: var(--font-mono); font-weight: 700; font-size: .6rem; letter-spacing: 1px;
    text-transform: uppercase; line-height: 1.2; padding: .35em .7em; border-radius: 4px; color: #fff; border: 1px solid transparent;
}
.badge-primary, .badge-info { background: rgba(16, 98, 254, .2); border-color: rgba(16, 98, 254, .5); color: var(--primary-light); }
.badge-success { background: rgba(0, 182, 122, .15); border-color: rgba(0, 182, 122, .5); color: var(--status-green-subtle); }
.badge-warning { background: rgba(255, 157, 0, .15); border-color: rgba(255, 157, 0, .5); color: var(--status-orange); }
.badge-danger { background: rgba(255, 77, 77, .15); border-color: rgba(255, 77, 77, .5); color: var(--status-red); }
.badge-secondary, .badge-light, .badge-dark { background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .35); color: var(--silver); }

/* status chips (WHMCS .label.status-*) -> tinted + outlined like the site's .panel-tag */
.label { margin-bottom: 0; font-size: .6rem; }
.label-default, .status-closed, .status-refunded, .status-dead, .status-transferred-away, .status-cancelled, .status-terminated { background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .4); color: var(--silver); }
.label-success, .status-active, .status-completed, .status-paid, .status-answered, .status-delivered, .status-accepted { background: rgba(0, 182, 122, .15); border-color: rgba(0, 182, 122, .55); color: var(--status-green-subtle); }
.label-info, .status-customer-reply, .status-inprogress { background: rgba(16, 98, 254, .2); border-color: rgba(16, 98, 254, .55); color: var(--primary-light); }
.label-warning, .status-pending-transfer, .status-grace, .status-onhold, .status-payment-pending, .status-pending { background: rgba(255, 157, 0, .15); border-color: rgba(255, 157, 0, .55); color: var(--status-orange); }
.label-danger, .status-suspended, .status-fraud, .status-unpaid, .status-collections { background: rgba(255, 77, 77, .15); border-color: rgba(255, 77, 77, .55); color: var(--status-red); }
.requestor-type-operator, .requestor-type-owner { background: rgba(16, 98, 254, .2); color: var(--primary-light); border: 1px solid rgba(16, 98, 254, .5); }
.requestor-type-authorizeduser, .requestor-type-registereduser, .requestor-type-subaccount, .requestor-type-guest { background: rgba(148, 163, 184, .12); color: var(--silver); border: 1px solid rgba(148, 163, 184, .35); }

/* ===================================================================
   10. TABS, MODALS, TOOLTIPS, POPOVERS
   =================================================================== */
.nav-tabs { border-bottom: 1px solid var(--glass-border); }
.nav-tabs .nav-link {
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-dim); background: transparent; border: 1px solid transparent; border-radius: 4px 4px 0 0; padding: .8rem 1.2rem;
}
.nav-tabs .nav-link:hover { color: #fff; border-color: transparent; background: rgba(16, 98, 254, .06); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--primary-light); background: rgba(16, 98, 254, .1); border-color: var(--glass-border) var(--glass-border) transparent; box-shadow: inset 0 2px 0 var(--primary); }
.nav-pills .nav-link { font-family: var(--font-mono); font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); border-radius: 4px; border: 1px solid transparent; }
.nav-pills .nav-link:hover { color: #fff; border-color: var(--glass-border); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--primary); color: #fff; }
.tab-content { color: var(--text-main); }
.responsive-tabs-sm .nav-item a { background: rgba(15, 23, 42, .6); border-color: var(--glass-border); color: var(--text-dim); }
.responsive-tabs-sm .nav-item a.active { background: var(--primary); color: #fff; }

.modal-backdrop { background-color: #020617; }
.modal-backdrop.show { opacity: .85; }
.modal-content, .modal .modal-dialog .modal-content {
    background: #0b1224; color: var(--text-main);
    border: 1px solid var(--glass-border); border-radius: 12px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 50px rgba(16, 98, 254, .08);
}
.modal-header, .modal .modal-header { border-bottom: 1px solid var(--glass-border); background: rgba(16, 98, 254, .05); border-radius: 12px 12px 0 0; }
.modal-header .modal-title { font-family: var(--font-fancy); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: .95rem; color: #fff; }
.modal-footer { border-top: 1px solid var(--glass-border); }
.modal-localisation .modal-content { background: #0b1224; }
.modal-localisation .item-selector .item { border: 1px solid var(--glass-border); color: var(--text-dim); background: rgba(15, 23, 42, .5); border-radius: 4px; font-size: .75rem; }
.modal-localisation .item-selector .item:hover { border-color: var(--primary); color: #fff; }
.modal-localisation .item-selector .item.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.tooltip-inner { background: #0b1224; border: 1px solid var(--glass-border); color: #fff; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .5px; border-radius: 4px; }
.tooltip.bs-tooltip-top .arrow::before { border-top-color: var(--glass-border); }
.tooltip.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--glass-border); }
.popover, .popover-user-notifications { background: #0b1224; border: 1px solid var(--glass-border); border-radius: 8px; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); font-family: var(--font-mono); }
.popover-header { background: rgba(16, 98, 254, .08); border-bottom: 1px solid var(--glass-border); color: #fff; }
.popover-body { color: var(--silver); }
.bs-popover-bottom > .arrow::after, .popover-user-notifications.bs-popover-bottom > .arrow::after { border-bottom-color: #0b1224; }
.bs-popover-bottom > .arrow::before { border-bottom-color: var(--glass-border); }
.popover-user-notifications ul li a { color: var(--silver); }
.popover-user-notifications ul li a:hover { background: rgba(16, 98, 254, .1); color: #fff; }
.popover-user-notifications ul li, .popover-user-notifications ul li:last-child { border-color: var(--glass-border); }
.popover-user-notifications ul li.none { color: var(--text-dim); }
.popover-user-notifications ul li .message { text-transform: none; font-size: .75rem; }

/* ===================================================================
   11. SIDEBAR
   =================================================================== */
.sidebar .card-sidebar, .sidebar .card { margin-bottom: 1.2rem; }
.sidebar .card-header { cursor: pointer; padding: .9rem 1.2rem; }
.sidebar .card-title, .sidebar .card-title.m-0 {
    font-size: .72rem; letter-spacing: 2px; color: #fff; display: flex; align-items: center; gap: 8px;
}
.sidebar .card-title i:not(.card-minimise) { color: var(--primary); }
.sidebar .card-title .badge { margin-left: auto; }
.sidebar .card-minimise { margin-left: auto; color: var(--primary); font-size: .7rem; transition: .3s; }
.sidebar .card-minimise.minimised { transform: rotate(180deg); }
.sidebar .list-group-item { padding: .65rem 1.2rem; border-color: var(--glass-border); font-size: .76rem; }
.sidebar .list-group-item .badge { width: auto; min-width: 26px; padding: 3px 6px; background: rgba(16, 98, 254, .2); color: var(--primary-light); border: 1px solid rgba(16, 98, 254, .4); }
.sidebar .list-group-item.active, .sidebar .list-group-item.active:hover, .sidebar .list-group-item.active:focus {
    background-color: rgba(16, 98, 254, .18); border-color: var(--glass-border); color: #fff;
}
.sidebar .list-group-item.active .sidebar-menu-item-icon { color: var(--primary-light); }
.sidebar .list-group-item > i.far.fa-circle, .sidebar .sidebar-menu-item-icon { color: var(--primary); }
.sidebar .card-body { padding: 1.1rem 1.2rem; font-size: .78rem; color: var(--silver); }
.sidebar .sidebar-menu-item-label { text-transform: none; }

/* ===================================================================
   12. CLIENT AREA HOME  (tiles, panels, services list)
   =================================================================== */
.tiles .tile {
    display: block; position: relative; padding: 22px 24px 18px;
    background: rgba(15, 23, 42, .4);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border); border-right: 1px solid var(--glass-border);
    margin: 0 8px 16px; border-radius: 12px;
    color: var(--text-main); overflow: hidden; text-decoration: none;
    transition: .4s cubic-bezier(.4, 0, .2, 1);
}
.tiles .row > div:last-child .tile,
.tiles div:nth-child(1) > .tile, .tiles div:nth-child(2) > .tile { border: 1px solid var(--glass-border); }
.tiles .tile:hover, .tiles div:nth-child(1) > .tile:hover, .tiles div:nth-child(2) > .tile:hover, .tiles .row > div:last-child .tile:hover { border-color: var(--primary); }
.tiles .tile:hover i { font-size: 1.9rem; }
.tiles .tile i { transition: .3s; }
.tiles .tile:hover { background: rgba(16, 98, 254, .06); border-color: var(--primary); transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
.tiles .tile .stat { font-family: var(--font-fancy); font-size: 2.6rem; font-weight: 800; color: #fff; letter-spacing: -1px; margin-top: 18px; }
.tiles .tile .title { font-family: var(--font-mono); font-size: .65rem; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-top: 6px; }
.tiles .tile i { color: var(--primary); font-size: 1.4rem; opacity: .9; }
.tiles .tile:hover i { color: var(--primary-light); }
.tiles .tile .highlight { height: 2px; margin-top: 14px; border-radius: 2px; width: 40px; transition: .4s; }
.tiles .tile:hover .highlight { width: 100%; }
.tiles .row.no-gutters { margin-left: -8px; margin-right: -8px; }

.client-home-cards .card-header { background: rgba(16, 98, 254, .05); border-bottom: 1px solid var(--glass-border); }
.client-home-cards .card-title { font-size: .78rem; letter-spacing: 2px; }
.client-home-cards .card-header .btn { background: transparent; color: var(--text-dim); border: 1px solid var(--glass-border); clip-path: none; padding: 6px 12px; }
.client-home-cards .card-header .btn:hover { color: #fff; border-color: var(--primary); }
.client-home-cards .card-body p, .client-home-cards small { color: var(--text-dim); }
.client-home-cards .list-group .list-group-item { border-color: var(--glass-border); }
.client-home-cards .card-footer { background: rgba(2, 6, 23, .4); }

/* home page: products + domain search */
.home-domain-search { background: transparent; }
.home-domain-search h2 { text-transform: uppercase; letter-spacing: -1px; font-weight: 800; }
.home-domain-search .tld-logos { color: var(--text-dim); font-family: var(--font-mono); font-size: 1rem; }
.home-domain-search .input-group-wrapper {
    background: rgba(15, 23, 42, .6); border: 1px solid var(--glass-border); border-radius: 8px; padding: 6px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.home-domain-search .input-group-wrapper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.home-domain-search .input-group-wrapper .form-control { background: transparent; border: 0; }
.home-domain-search .input-group-wrapper .btn { clip-path: none; border-radius: 4px; }
.home-domain-search .input-group-wrapper .advanced-input .btn-success { background: var(--primary); }
.card-columns.home .card { text-align: center; }
.card-columns.home .card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, .4); }
.pricing-card-title { font-size: 1.4rem; }

/* ===================================================================
   13. PAGE ELEMENTS: banners, notices, tickets, markdown, cc, 2fa
   =================================================================== */
.verification-banner {
    background: rgba(255, 157, 0, .08); border-bottom: 1px solid rgba(255, 157, 0, .3); color: var(--silver);
    font-weight: 400; text-transform: none;
}
.verification-banner.user-validation, .verification-banner.email-verification { background: rgba(16, 98, 254, .08); border-bottom: 1px solid var(--glass-border); }
.verification-banner .btn { clip-path: none; padding: 4px 12px; }
.network-issue-alert { background: rgba(255, 77, 77, .1); border-bottom: 1px solid rgba(255, 77, 77, .4); color: #ffc4c4; }
.network-issue-alert a { color: #fff; text-decoration: underline; }
.admin-masquerade-notice { font-family: var(--font-mono); color: var(--status-orange); }

.view-ticket .card-body, .view-ticket .mc-promo-manage .content, .mc-promo-manage .view-ticket .content { border-bottom: 1px solid var(--glass-border); }
.view-ticket .posted-by { background: rgba(16, 98, 254, .06); color: var(--text-dim); font-size: .75rem; letter-spacing: .5px; }
.view-ticket .posted-by .posted-by-name { color: #fff; }
.view-ticket .attachments { border-top: 1px dashed var(--glass-border); }
.view-ticket .attachment-list li span { border: 1px solid var(--glass-border); border-radius: 4px; background: rgba(15, 23, 42, .6); }
.view-ticket .attachment-list li figure { background: rgba(16, 98, 254, .06); color: var(--primary); }
.view-ticket .message { text-transform: none; color: var(--silver); }
.ticket-reply .rating span.star:before, .ticket-reply .rating-done span.star:before { color: #475569; }

/* markdown + editor */
.md-editor { border: 1px solid var(--glass-border); border-radius: 8px; background: rgba(15, 23, 42, .6); }
.md-editor.active { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.md-editor > .btn-toolbar { background: rgba(16, 98, 254, .05); border-bottom: 1px solid var(--glass-border); }
.md-editor > textarea { background: transparent; color: #fff; border: 0; }
.md-editor > .md-preview { background: rgba(2, 6, 23, .5); color: var(--silver); border-top: 1px solid var(--glass-border); }
.markdown-content, .md-preview { text-transform: none; color: var(--silver); }
.markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .md-preview h1, .md-preview h2, .md-preview h3, .md-preview h4 { color: #fff; }
.markdown-content pre, .md-preview pre { background: rgba(2, 6, 23, .8); border: 1px solid var(--glass-border); color: var(--silver); }
.markdown-content blockquote, .md-preview blockquote { border-left: 3px solid var(--primary); color: var(--text-dim); }
.markdown-content table > thead > tr > th, .md-preview table > thead > tr > th { background: rgba(16, 98, 254, .06); border-color: var(--glass-border); }
.markdown-content table > tbody > tr > td, .md-preview table > tbody > tr > td { border-color: var(--glass-border); }
.markdown-editor-status { color: var(--text-dim); }

/* payment / cc */
.cc-payment-form .control-label { color: var(--text-dim); }
#payMethodList tr { font-size: .78rem; }
.paymethod-info { border-color: var(--glass-border); }
#frmPayment .paymethod-info label { color: var(--silver); text-transform: none; }

/* account switching, invites, 2fa */
.select-account a { border-bottom: 1px solid var(--glass-border); color: var(--silver); }
.select-account a:hover { background: rgba(16, 98, 254, .08); color: #fff; }
.invite-box { background: rgba(15, 23, 42, .5); border: 1px solid var(--glass-border); border-radius: 12px; }
.twofa-module { border: 1px solid var(--glass-border); border-radius: 8px; background: rgba(15, 23, 42, .4); }
.twofa-module.active { border-color: var(--primary); background: rgba(16, 98, 254, .08); }
.twofa-setup .backup-code { background: rgba(2, 6, 23, .8); border: 1px dashed var(--primary); color: #fff; font-family: var(--font-mono); }
#popup-backdrop { background-color: #020617; }
#fullpage-overlay .outer-wrapper { background: rgba(2, 6, 23, .9); }
#fullpage-overlay .msg { color: #fff; font-family: var(--font-mono); letter-spacing: 2px; text-transform: uppercase; }
.captchaimage { border-radius: 4px; border: 1px solid var(--glass-border); }
.password-strength-meter p { color: var(--text-dim); font-size: .75rem; }

/* store / promos / SSL / MarketConnect (store.css is loaded later by those pages) */
body .store-order-container, body .store-promoted-product, body .promo-container { color: var(--text-main); }
body .store-order-container .store-domain-tabs li a { background: rgba(15, 23, 42, .6); border-color: var(--glass-border); color: var(--text-dim); }
body .store-order-container .store-domain-tabs li.active a { background: var(--primary); color: #fff; }
body .store-order-container .store-domain-tab-content { background: rgba(15, 23, 42, .5); border-color: var(--glass-border); }
body .store-promoted-product ul.features li { color: var(--silver); }
body .promo-container .header { background: rgba(16, 98, 254, .08); border-bottom: 1px solid var(--glass-border); }
body #order-standard_cart .view-cart-items-header { background: rgba(16, 98, 254, .08); }

/* ===================================================================
   14. LOGIN / AUTH CARDS  (centered, narrow)
   =================================================================== */
.mw-540 { max-width: 540px; }
.mw-750 { max-width: 750px; }
.login-form .card, .card.mw-540 { margin-left: auto; margin-right: auto; box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 50px rgba(16, 98, 254, .05); }
.login-form .card-body h6.h3, .card.mw-540 h6.h3 { font-size: 1.4rem; letter-spacing: -1px; }
.login-form .card-body p.text-muted { text-transform: none; }
.login-form .card-footer, .card.mw-540 .card-footer { text-transform: none; }
.login-form .card-footer a { color: var(--primary-light); }
.login-form .btn-primary { min-width: 140px; }

/* ===================================================================
   15. FOOTER  -  copied from linceris.com (same grid, spacing, type, links)
   =================================================================== */
footer.site-footer {
    padding: 80px 0 30px; background: transparent; contain: content; position: relative;
    margin: 0; border: 0;
    font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
    text-transform: uppercase; letter-spacing: .5px; color: var(--text-main);
}
footer.site-footer p, footer.site-footer ul, footer.site-footer h4 { margin: 0; padding: 0; }
footer.site-footer .footer-grid { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }
footer.site-footer .footer-brand .logo-img { max-height: 55px; margin-bottom: 25px; filter: drop-shadow(0 0 10px rgba(16, 98, 254, .2)); }
footer.site-footer .company-info-text p { font-size: .75rem; color: var(--text-dim); text-transform: none; letter-spacing: .5px; margin-bottom: 6px; line-height: 1.4; white-space: nowrap; }
footer.site-footer .company-info-text p strong { color: #fff; margin-right: 5px; }
footer.site-footer .footer-col h4 { font-family: var(--font-fancy); color: #fff; font-size: .85rem; margin-bottom: 25px; font-weight: 700; letter-spacing: .5px; line-height: 1.6; }
footer.site-footer .footer-col ul { list-style: none; }
footer.site-footer .footer-col ul li { margin-bottom: 12px; }
footer.site-footer .footer-col ul li a { color: var(--text-dim); text-decoration: none; font-size: .7rem; letter-spacing: .5px; transition: .3s ease; }
footer.site-footer .footer-col ul li a:hover { color: var(--primary); }
footer.site-footer .social-links { display: flex; gap: 20px; align-items: center; }
footer.site-footer .social-links a { font-size: 1.4rem; transition: .3s cubic-bezier(.4, 0, .2, 1); display: flex; align-items: center; justify-content: center; color: #475569; text-decoration: none; }
footer.site-footer .social-links a:hover { transform: translateY(-5px); }
footer.site-footer .social-links a:hover .fa-discord { color: #5865F2; }
footer.site-footer .social-links a:hover .fa-linkedin { color: #0A66C2; }
footer.site-footer .social-links a:hover .fa-youtube { color: #FF0000; }
footer.site-footer .footer-bottom {
    display: flex; justify-content: space-between; align-items: center;
    color: var(--text-dim); font-size: .65rem; flex-wrap: wrap; gap: 15px;
    padding-top: 25px; border-top: 1px solid var(--glass-border);
}
footer.site-footer .footer-bottom p { color: #bdbdbd; text-transform: none; letter-spacing: .5px; }
footer.site-footer .footer-bottom p img { width: 16px; height: 12px; vertical-align: middle; margin: 0 6px 2px 0; }
/* only rendered when more than one language/currency is enabled in WHMCS */
footer.site-footer .btn-locale { clip-path: none; background: transparent; border: 1px solid var(--glass-border); border-radius: 4px; color: var(--text-dim); padding: 8px 16px; font-size: .65rem; letter-spacing: 1.5px; }
footer.site-footer .btn-locale:hover { color: #fff; border-color: var(--primary); transform: none; }

body > .btn-return-to-admin { position: fixed; bottom: 20px; left: 20px; z-index: 1100; background: var(--status-orange); color: #020617; border-radius: 4px; padding: 10px 16px; }

@media (max-width: 1200px) {
    footer.site-footer .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    footer.site-footer .company-info-text p { white-space: normal; }
}
@media (max-width: 992px) {
    footer.site-footer .footer-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    footer.site-footer .footer-brand { align-items: center; text-align: center; display: flex; flex-direction: column; }
    footer.site-footer .social-links { justify-content: center; margin-top: 20px; }
    footer.site-footer .footer-bottom { justify-content: center; text-align: center; flex-direction: column; }
    footer.site-footer .company-info-text p { white-space: normal; }
    .card-body, .primary-content .card-body { padding: 1.2rem; }
}
@media (max-width: 576px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .tiles .tile { margin: 0 4px 10px; padding: 16px; }
    .tiles .row.no-gutters { margin-left: -4px; margin-right: -4px; }
    .tiles .tile .stat { font-size: 2rem; }
    .btn { padding: 13px 20px; }
    .master-breadcrumb .breadcrumb { letter-spacing: 1.5px; flex-wrap: wrap; }
}


/* ===================================================================
   16. #registration form fields (register page, account details, ...)
   The base theme styles these with ID selectors (white fields); matched here.
   =================================================================== */
#registration label { font-weight: 500; color: var(--text-dim); font-size: .68rem; }
#registration .prepend-icon { width: 100%; display: block; margin-bottom: 1rem; }
#registration .field, #registration .form-control,
#registration select.field, #registration select.form-control, #registration textarea.field {
    height: 46px; width: 100%; padding: 0 .9rem; border: 1px solid var(--glass-border); border-radius: 4px;
    background-color: rgba(15, 23, 42, .6); color: #fff;
    font-family: var(--font-mono); font-size: .8rem; letter-spacing: .3px; text-transform: none;
}
#registration textarea.field { height: auto; padding: .8rem .9rem; }
#registration .prepend-icon .field, #registration .prepend-icon .form-control { padding-left: 44px; }
#registration .field::placeholder, #registration .form-control::placeholder { color: #64748b; opacity: 1; }
#registration .field:focus, #registration .form-control:focus {
    border-color: var(--primary); background-color: rgba(16, 98, 254, .06); color: #fff;
    box-shadow: 0 0 0 3px var(--primary-glow); outline: 0;
}
#registration .field[disabled], #registration .field[readonly], #registration .form-control[disabled], #registration .form-control[readonly] { background-color: rgba(2, 6, 23, .7); color: var(--text-dim); opacity: 1; }
#registration select.field, #registration select.form-control {
    -webkit-appearance: none; appearance: none; padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231062fe' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px 8px;
}
#registration .prepend-icon .field-icon { top: 0; width: 44px; height: 46px; line-height: 46px; margin: 0; color: var(--primary); z-index: 4; }
#registration .field-icon i, #registration .prepend-icon .field-icon i { color: var(--primary); font-size: .85rem; }
#registration .field:focus ~ .field-icon i, #registration .prepend-icon:focus-within .field-icon i { color: var(--primary-light); }
#registration .field-help-text { color: var(--text-dim); font-size: .7rem; text-transform: none; }
#registration .sub-heading { border-top: 1px solid var(--glass-border); }
#registration .sub-heading span { background-color: var(--bg); color: var(--primary-light); }
#registration .iti, #registration .intl-tel-input { width: 100%; display: block; }
#registration .intl-tel-input .field, #registration .intl-tel-input .form-control { padding-left: 52px; }
/* intl-tel-input places the flag itself - the decorative icon would sit on top of it */
#registration .intl-tel-input ~ .field-icon, #registration .prepend-icon:has(.intl-tel-input) .field-icon { display: none; }
#registration .custom-select, #registration .form-check-label, #registration .form-check { color: var(--silver); text-transform: none; }


/* international phone input: flag + dial code must never sit on top of the typed text */
#registration .intl-tel-input, .intl-tel-input { width: 100%; display: block; }
#registration .intl-tel-input .selected-flag, .intl-tel-input .selected-flag { background: transparent; border-right: 1px solid var(--glass-border); padding: 0 10px 0 12px; display: flex; align-items: center; z-index: 5; }
#registration .intl-tel-input .selected-flag:hover, #registration .intl-tel-input .selected-flag:focus { background: rgba(16, 98, 254, .1); }
#registration .intl-tel-input .selected-dial-code, .intl-tel-input .selected-dial-code { color: #fff; font-family: var(--font-mono); font-size: .8rem; margin-left: 8px; }
#registration .intl-tel-input .iti-arrow, .intl-tel-input .iti-arrow { border-top-color: var(--primary); margin-left: 6px; }
#registration .intl-tel-input.separate-dial-code input[type=tel], .intl-tel-input.separate-dial-code input[type=tel] { padding-left: 100px; } /* JS (linceris.js) refines this to the exact width */
.intl-tel-input .country-list { text-transform: none; font-family: var(--font-mono); font-size: .75rem; z-index: 1060; }
.intl-tel-input .country-list .country-name, .intl-tel-input .country-list .dial-code { color: var(--silver); }
.intl-tel-input .country-list .dial-code { color: var(--text-dim); }
#registration .prepend-icon .intl-tel-input ~ .field-icon, #registration .prepend-icon:has(.intl-tel-input) > .field-icon { display: none; }


/* ===================================================================
   17. ACTIVE PRODUCTS / SERVICES  (client area home) - standard WHMCS size
   =================================================================== */
/* whmcs.js sets an inline #ddd border on the last visible row; keep it on-brand */
div[menuitemname="Active Products/Services"] .list-group, .client-home-cards .list-group { border-top: 0 !important; border-color: var(--glass-border) !important; }
div[menuitemname="Active Products/Services"] .list-group-item { border-bottom-color: var(--glass-border) !important; }
div[menuitemname="Active Products/Services"] .list-group-item:last-child { border-bottom: 0 !important; }
.div-service-item { transition: background .3s ease; }
.div-service-item:hover { background: rgba(16, 98, 254, .05); }
.div-service-name .text-domain { color: var(--text-dim); text-transform: none; }
.div-service-name .text-domain:hover { color: #fff; }

/* header action buttons (Order New Services, ...) on the home panels: outlined, readable */
.client-home-cards .card-header .btn[class*="bg-color"], .client-home-cards .card-header .btn.btn-xs {
    background: transparent !important; color: #fff; border: 1px solid var(--glass-border); clip-path: none; border-radius: 4px; padding: 10px 18px; font-size: .68rem;
}
.client-home-cards .card-header .btn[class*="bg-color"]:hover { border-color: var(--primary); background: rgba(16, 98, 254, .12) !important; color: #fff; transform: none; box-shadow: none; }
.client-home-cards .card-header .btn i { color: var(--primary); }

/* ===================================================================
   18. SUBMIT TICKET: one card + one explicit button per department
   =================================================================== */
.ticket-dept-card {
    position: relative; height: 100%; display: flex; flex-direction: column; gap: 18px;
    padding: 26px 26px 24px;
    background: rgba(2, 6, 23, .45); border: 1px solid var(--glass-border); border-radius: 12px; transition: .35s cubic-bezier(.4, 0, .2, 1);
}
.ticket-dept-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 64px; height: 5px; background: var(--primary); border-top-left-radius: 12px; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); }
.ticket-dept-card:hover { border-color: rgba(16, 98, 254, .55); background: rgba(16, 98, 254, .06); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.ticket-dept-icon {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 8px;
    background: rgba(16, 98, 254, .1); border: 1px solid var(--glass-border); color: var(--primary); font-size: 1.1rem;
}
.ticket-dept-body { flex: 1; }
.ticket-dept-name { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: -.2px; color: #fff; }   /* plain text, not a link */
.ticket-dept-desc { margin: 0; color: var(--text-dim); font-size: .8rem; line-height: 1.7; text-transform: none; }
.ticket-dept-btn { align-self: stretch; padding: 16px 24px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.ticket-dept-btn i { font-size: .7rem; }

/* ===================================================================
   19. FIXES: black footer bars on home panels + white markdown editor (ticket form)
   =================================================================== */
/* panel footers (Overdue Invoices, Register a Domain, ...) were near-black bars */
.client-home-cards .card-footer { background: transparent; }
.client-home-cards .card-footer:empty { display: none; }

/* markdown editor: theme.css forces #fff with !important (incl. focus + fullscreen), which
   made the box white with white text as soon as someone typed in it. Keep it dark everywhere. */
.md-editor, .md-editor.active { background: rgba(15, 23, 42, .6) !important; border: 1px solid var(--glass-border) !important; border-radius: 8px; box-shadow: none; }
.md-editor.active { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-glow); }
.md-editor > .btn-toolbar, .md-editor > .md-header { background: rgba(16, 98, 254, .06) !important; border-bottom: 1px solid var(--glass-border); }
.md-editor > .md-header .btn, .md-editor > .btn-toolbar .btn { background: transparent !important; color: var(--silver) !important; border: 1px solid var(--glass-border); }
.md-editor > .md-header .btn:hover, .md-editor > .btn-toolbar .btn:hover, .md-editor > .btn-toolbar .btn.active { background: rgba(16, 98, 254, .18) !important; color: #fff !important; }
.md-editor > textarea, .md-editor > textarea.markdown-editor, .md-editor > textarea:focus, .md-editor > textarea.markdown-editor:focus,
.md-editor > .md-input, .md-editor > .md-input:focus, .md-editor > .md-input:hover {
    background: transparent !important; background-color: transparent !important; color: #fff !important;
    border-color: var(--glass-border) !important; box-shadow: none !important; outline: 0;
}
.md-editor > .md-preview { background: rgba(2, 6, 23, .5) !important; color: var(--silver) !important; border-color: var(--glass-border) !important; }
.md-editor .md-footer, .md-editor > .md-footer { background: rgba(2, 6, 23, .4) !important; border-top: 1px solid var(--glass-border); }
/* fullscreen mode */
.md-editor.md-fullscreen-mode { background: var(--bg) !important; }
.md-editor.md-fullscreen-mode .md-input, .md-editor.md-fullscreen-mode .md-preview,
.md-editor.md-fullscreen-mode .md-input:hover, .md-editor.md-fullscreen-mode .md-input:focus {
    background: transparent !important; color: #fff !important;
}
.md-editor.md-fullscreen-mode .md-header { background: transparent !important; }
.md-editor.md-fullscreen-mode .btn { background: transparent !important; color: var(--silver) !important; border: 0 !important; }
.md-editor.md-fullscreen-mode .md-fullscreen-controls a { color: var(--silver); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
    body::before, .primary-content, .sidebar, .nav-links.active { animation: none; }
    * { transition-duration: .01ms !important; }
}
@media print {
    body::before, .site-header, .site-footer, .master-breadcrumb, .sidebar { display: none !important; }
    body { background: #fff; color: #000; }
}