/* =====================================================================
   SMThemeTv  ·  Cinematic dark IPTV/streaming theme for WHMCS
   Author: Shahid Malla — https://shahidmalla.com
   ---------------------------------------------------------------------
   This file re-skins the Nexus base theme into the SMThemeTv look.
   It (1) overrides the theme design tokens to a dark cyan palette and
   (2) hard-styles the major Bootstrap surfaces so every page — login,
   register, client area, invoices and the order/cart — adopts the
   cinematic glass design without touching any Smarty logic.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------
   1) DESIGN TOKENS — remap the Nexus palette to SMThemeTv dark/cyan
   --------------------------------------------------------------------- */
:root {
  /* Brand cyan */
  --sm-brand:   #2bb6da;
  --sm-brand-2: #5fd0ec;
  --sm-brand-d: #1ea0c4;
  --sm-glow:    rgba(43,182,218,.42);
  --sm-soft:    rgba(43,182,218,.16);

  /* Cinematic dark surfaces */
  --sm-bg:      #071f29;
  --sm-bg2:     #0a2a38;
  --sm-card:    rgba(13,44,57,.72);
  --sm-card2:   rgba(18,56,71,.72);
  --sm-line:    rgba(255,255,255,.09);
  --sm-line2:   rgba(120,210,235,.22);
  --sm-ink:     #eaf6fb;
  --sm-muted:   #8fb2c0;

  /* --- override Nexus semantic tokens --- */
  --primary:            var(--sm-brand);
  --primary-lifted:     var(--sm-brand-d);
  --primary-accented:   var(--sm-brand-2);
  --primary-600:        var(--sm-brand);
  --primary-700:        var(--sm-brand-d);

  --secondary:          #4d6b76;
  --secondary-lifted:   #3c5560;
  --secondary-accented: #2b3f48;

  --grayscale:          var(--sm-ink);
  --grayscale-lifted:   #c8dde5;
  --grayscale-accented: #a8c4cf;

  --text:           var(--sm-ink);
  --text-muted:     var(--sm-muted);
  --text-lifted:    #a8c4cf;
  --text-accented:  #c8dde5;
  --text-inverted:  #04222c;

  --border-muted:    rgba(255,255,255,.06);
  --border:          var(--sm-line);
  --border-lifted:   var(--sm-line2);
  --border-accented: rgba(120,210,235,.35);

  --bg:          var(--sm-bg);
  --bg-muted:    var(--sm-bg2);
  --bg-lifted:   var(--sm-card);
  --bg-accented: var(--sm-card2);
  --bg-inverted: var(--sm-ink);

  --rounding-sm: 10px;
  --rounding-md: 14px;
  --rounding-lg: 18px;
}

/* ---------------------------------------------------------------------
   2) GLOBAL SHELL — cinematic background + typography
   --------------------------------------------------------------------- */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  color: var(--sm-ink) !important;
  background:
    radial-gradient(1200px 700px at 82% -12%, rgba(43,182,218,.18), transparent 58%),
    radial-gradient(900px 600px at -8% 4%,    rgba(20,90,120,.30),  transparent 55%),
    linear-gradient(160deg, #0a2a38 0%, #071f29 48%, #061a23 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}
h1,h2,h3,h4,h5,h6 { color: var(--sm-ink); font-weight: 800; letter-spacing: -.01em; }
a { color: var(--sm-brand-2); }
a:hover { color: var(--sm-brand); }
.text-muted { color: var(--sm-muted) !important; }
hr { border-color: var(--sm-line); }
small, .small { color: var(--sm-muted); }

/* ---------------------------------------------------------------------
   3) HEADER / NAVBAR
   --------------------------------------------------------------------- */
#header .topbar { background: rgba(7,28,38,.72); backdrop-filter: blur(18px); border-bottom: 1px solid var(--sm-line); }
#header .navbar, .main-navbar-wrapper { background: rgba(7,28,38,.6) !important; backdrop-filter: blur(18px); border-bottom: 1px solid var(--sm-line); }
.navbar-brand { color: var(--sm-ink) !important; font-weight: 800; }
.navbar .nav-link, #header .topbar .btn { color: var(--sm-muted) !important; }
.navbar .nav-link:hover { color: var(--sm-ink) !important; }
.main-navbar-wrapper .navbar-nav .nav-link { color: var(--sm-muted) !important; border-radius: 10px; padding: 8px 14px; }
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .nav-item.active > .nav-link { color: var(--sm-ink) !important; background: rgba(255,255,255,.05); }
.dropdown-menu { background: rgba(10,38,50,.97); backdrop-filter: blur(18px); border: 1px solid var(--sm-line); border-radius: 14px; }
.dropdown-item { color: var(--sm-muted); }
.dropdown-item:hover { background: rgba(255,255,255,.05); color: var(--sm-ink); }
.btn-active-client { background: var(--sm-soft) !important; color: var(--sm-brand-2) !important; border-radius: 999px; }
.cart-btn .badge { background: var(--sm-brand) !important; color: #04222c !important; }

/* ---------------------------------------------------------------------
   4) CARDS / PANELS — glass
   --------------------------------------------------------------------- */
.card, .panel {
  background: var(--sm-card) !important;
  backdrop-filter: blur(16px);
  border: 1px solid var(--sm-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
  color: var(--sm-ink);
}
.card-header, .panel-heading {
  background: transparent !important; border-bottom: 1px solid var(--sm-line) !important;
  color: var(--sm-ink); font-weight: 700;
}
.card-footer { background: transparent !important; border-top: 1px solid var(--sm-line) !important; }
.panel-body, .card-body { color: var(--sm-ink); }
.well, .box { background: var(--sm-card2) !important; border: 1px solid var(--sm-line) !important; border-radius: 14px; color: var(--sm-ink); }

/* ---------------------------------------------------------------------
   5) FORMS
   --------------------------------------------------------------------- */
.form-control, .custom-select {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--sm-line) !important;
  color: var(--sm-ink) !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif;
  padding: 12px 14px; height: auto;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--sm-brand) !important;
  box-shadow: 0 0 0 4px var(--sm-soft) !important;
  background: rgba(255,255,255,.06) !important;
}
.form-control::placeholder { color: var(--sm-muted) !important; }
label, .form-control-label, .control-label { color: var(--sm-muted) !important; font-weight: 600; }
.input-group-text {
  background: rgba(255,255,255,.04) !important; border: 1px solid var(--sm-line) !important;
  color: var(--sm-muted) !important;
}
.input-group-merge .form-control { border-radius: 12px; }
.custom-control-label::before { background: rgba(255,255,255,.06); border-color: var(--sm-line); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--sm-brand); border-color: var(--sm-brand); }

/* ---------------------------------------------------------------------
   6) BUTTONS — pill cyan / ghost
   --------------------------------------------------------------------- */
.btn { border-radius: 12px; font-weight: 700; }
.btn-primary, .btn-success.btn-checkout, button#btnCompleteProductConfig, #btnCompleteOrder {
  background: linear-gradient(135deg, var(--sm-brand-2), var(--sm-brand)) !important;
  border: none !important; color: #04222c !important;
  box-shadow: 0 12px 30px var(--sm-glow) !important;
}
.btn-primary:hover { filter: brightness(1.05); color: #04222c !important; }
.btn-outline-primary { color: var(--sm-brand-2) !important; border: 1px solid var(--sm-line2) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--sm-soft) !important; color: var(--sm-ink) !important; }
.btn-default, .btn-secondary {
  background: rgba(255,255,255,.05) !important; border: 1px solid var(--sm-line) !important; color: var(--sm-ink) !important;
}
.btn-default:hover, .btn-secondary:hover { background: rgba(255,255,255,.09) !important; }
.btn-link { color: var(--sm-brand-2) !important; }

/* ---------------------------------------------------------------------
   7) TABLES
   --------------------------------------------------------------------- */
.table { color: var(--sm-ink); }
.table thead th {
  border-bottom: 1px solid var(--sm-line) !important; color: var(--sm-muted);
  text-transform: uppercase; font-size: 12px; letter-spacing: .05em; font-family: 'Inter', sans-serif;
}
.table td, .table th { border-top: 1px solid var(--sm-line) !important; vertical-align: middle; }
.table-hover tbody tr:hover { background: rgba(255,255,255,.03); color: var(--sm-ink); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02); }

/* ---------------------------------------------------------------------
   8) BADGES / LABELS / STATUS
   --------------------------------------------------------------------- */
.badge { border-radius: 999px; font-weight: 600; padding: .4em .8em; }
.badge-success, .label-success, .status-active { background: rgba(52,211,153,.16) !important; color: #34d399 !important; }
.badge-danger, .label-danger, .status-unpaid, .status-cancelled { background: rgba(248,113,113,.16) !important; color: #f87171 !important; }
.badge-warning, .label-warning, .status-pending { background: rgba(251,191,36,.16) !important; color: #fbbf24 !important; }
.badge-info, .label-info { background: var(--sm-soft) !important; color: var(--sm-brand-2) !important; }
.badge-primary { background: var(--sm-brand) !important; color: #04222c !important; }

/* ---------------------------------------------------------------------
   9) ALERTS / NOTICES
   --------------------------------------------------------------------- */
.alert { border-radius: 14px; border: 1px solid var(--sm-line); }
.alert-success { background: rgba(52,211,153,.12); color: #6ee7b7; }
.alert-info    { background: var(--sm-soft); color: var(--sm-brand-2); border-color: var(--sm-line2); }
.alert-warning { background: rgba(251,191,36,.12); color: #fcd34d; }
.alert-danger  { background: rgba(248,113,113,.12); color: #fca5a5; }

/* --------------------------------------------------------------------
   10) SIDEBAR (client area)
   -------------------------------------------------------------------- */
.sidebar .list-group, .panel .list-group { background: transparent; }
.list-group-item {
  background: transparent !important; border: none !important; color: var(--sm-muted) !important;
  border-radius: 10px !important; margin-bottom: 2px; font-weight: 600;
}
.list-group-item:hover { background: rgba(255,255,255,.04) !important; color: var(--sm-ink) !important; }
.list-group-item.active, .list-group-item.panel-active { background: var(--sm-soft) !important; color: #fff !important; }
.list-group-item .badge { background: var(--sm-brand); color: #04222c; }

/* --------------------------------------------------------------------
   11) LOGIN / REGISTER — centered dark card
   -------------------------------------------------------------------- */
.login-form .card, .register-form .card { box-shadow: 0 30px 80px rgba(0,0,0,.5) !important; }
.login-form .btn-primary, .register-form .btn-primary { border-radius: 999px !important; width: 100%; padding: 14px; }
.login-form .float-left, .login-form .text-right { width: 100%; text-align: center !important; float: none !important; }

/* --------------------------------------------------------------------
   12) ORDER / CART / STORE  (our design)
   -------------------------------------------------------------------- */
.store-order-container, #order-standard-cart, .sidebar-cart, .order-summary {
  color: var(--sm-ink);
}
.order-summary, .sidebar-cart .panel, #orderSummary {
  background: var(--sm-card) !important; border: 1px solid var(--sm-line) !important; border-radius: 18px !important;
  backdrop-filter: blur(16px);
}
.payment-term, .product-purchase, .package, .pricebox, .order-product {
  background: var(--sm-card) !important; border: 1px solid var(--sm-line) !important; border-radius: 18px !important;
  color: var(--sm-ink); backdrop-filter: blur(14px);
}
.package.featured, .pricebox.featured, .order-product:hover {
  border-color: var(--sm-brand) !important; box-shadow: 0 0 0 1px var(--sm-brand), 0 18px 50px rgba(0,0,0,.4) !important;
}
.package .price, .pricebox .price, .product-price { color: var(--sm-brand-2) !important; font-weight: 800; }
.nav-tabs { border-bottom: 1px solid var(--sm-line); }
.nav-tabs .nav-link { color: var(--sm-muted); border: none; border-radius: 10px 10px 0 0; }
.nav-tabs .nav-link.active { color: var(--sm-brand-2) !important; background: transparent; border-bottom: 2px solid var(--sm-brand) !important; }
.store-domain-tabs .nav-link.active { background: var(--sm-soft) !important; }
.summary-container, .cart-total, .total-due { color: var(--sm-ink); }
.cycle-selector .btn, .billing-cycle .btn { border-radius: 999px; }
.product-purchase .qty, .configurable-options { background: var(--sm-bg2) !important; border-radius: 12px; }
.promobox, .promo-code { background: var(--sm-card2) !important; border: 1px solid var(--sm-line) !important; border-radius: 14px; color: var(--sm-ink); }
.order-steps, .checkout-steps, .progress-bar-container { color: var(--sm-muted); }
.order-steps .active, .checkout-steps .active { color: var(--sm-brand-2); }
.progress { background: rgba(255,255,255,.08); border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--sm-brand), var(--sm-brand-2)); }

/* --------------------------------------------------------------------
   13) MISC — breadcrumb, pagination, modals, footer, popovers
   -------------------------------------------------------------------- */
.breadcrumb { background: transparent; padding-left: 0; }
.breadcrumb-item, .breadcrumb-item a { color: var(--sm-muted); }
.breadcrumb-item.active { color: var(--sm-ink); }
.page-header h1, .header-lined { border-bottom: 1px solid var(--sm-line); }
.pagination .page-link { background: var(--sm-card); border: 1px solid var(--sm-line); color: var(--sm-muted); }
.pagination .page-item.active .page-link { background: var(--sm-brand); border-color: var(--sm-brand); color: #04222c; }
.modal-content { background: rgba(10,38,50,.98); backdrop-filter: blur(20px); border: 1px solid var(--sm-line); border-radius: 18px; color: var(--sm-ink); }
.modal-header, .modal-footer { border-color: var(--sm-line); }
.close { color: var(--sm-ink); opacity: .7; text-shadow: none; }
.popover { background: rgba(10,38,50,.98); border: 1px solid var(--sm-line); color: var(--sm-ink); }
.popover .arrow::after { border-bottom-color: rgba(10,38,50,.98); }
#footer, .footer {
  background: rgba(6,22,30,.85) !important; border-top: 1px solid var(--sm-line);
  color: var(--sm-muted);
}
#footer a, .footer a { color: var(--sm-muted); }
#footer a:hover, .footer a:hover { color: var(--sm-ink); }
.footer-logo-text, .footer-brand { color: var(--sm-ink); }

/* Inputs autofill fix on dark */
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sm-ink);
  transition: background-color 9999s ease-in-out 0s;
}

/* =====================================================================
   14) STORE MODULE  (cart.php product list + single product page)
   The store ships its own store.css with white cards — override here.
   ===================================================================== */
.products, .products-list { background: transparent !important; }
.product, .product.clearfix, .featured-product, .product-group {
  background: var(--sm-card) !important;
  border: 1px solid var(--sm-line) !important;
  border-radius: 18px !important;
  color: var(--sm-ink) !important;
  backdrop-filter: blur(14px);
}
.product:hover { border-color: var(--sm-line2) !important; }
.product.featured, .featured-product {
  border-color: var(--sm-brand) !important; box-shadow: 0 0 0 1px var(--sm-brand), 0 18px 50px rgba(0,0,0,.4) !important;
}
.product-name, .product h3, .product h2, .product-title { color: var(--sm-ink) !important; }
.product-desc, .product-desc *, .product-info, .product-info * { color: var(--sm-text, var(--sm-ink)) !important; }
.product-desc { color: var(--sm-muted) !important; }
.product-desc ul li, .product ul li, .product-features li { color: var(--sm-ink) !important; }
.product-pricing, .product-pricing *, .pricing, .cycle { color: var(--sm-ink) !important; }
.product .price, .price, .product-pricing .price, .amount, .product-price-amount { color: var(--sm-brand-2) !important; }
.product .term, .product small, .product .muted, .billing-cycle, .price .cycle { color: var(--sm-muted) !important; }
.product .btn-primary, .product .btn-order, .product-order-btn { box-shadow: 0 10px 24px var(--sm-glow) !important; }
.panel.card-sidebar, .panel-sidebar, .card-sidebar {
  background: var(--sm-card) !important; border: 1px solid var(--sm-line) !important; border-radius: 18px !important;
}
.card-sidebar .list-group-item { color: var(--sm-muted) !important; }
.card-sidebar .list-group-item:hover, .card-sidebar .list-group-item.active { color: var(--sm-ink) !important; }
/* store single-product configure page panels already use .panel.card (themed in §4) */
.summary-container, .order-summary, #orderSummary, .cart-total {
  background: var(--sm-card) !important; border: 1px solid var(--sm-line) !important; color: var(--sm-ink) !important;
}
.configure-product .panel, .product-configurable-options .panel { background: var(--sm-card) !important; }
.feature-list li, .product-features-list li { color: var(--sm-ink) !important; }
/* generic: any leftover white panel/box on store */
[class*="store"] .well, [class*="store"] .box { background: var(--sm-card) !important; color: var(--sm-ink) !important; }

/* Store product card — header band + order button + footer */
.product > header, .product header {
  background: transparent !important;
  border-bottom: 1px solid var(--sm-line) !important;
  padding: 16px 20px !important;
}
.product > header span, .product header span, .product [id$="-name"] {
  color: var(--sm-ink) !important; font-weight: 800; font-size: 18px;
}
.product > footer, .product footer { background: transparent !important; border-top: 0 !important; }
.product .product-desc { padding: 4px 20px !important; }
.product .product-pricing { padding: 0 20px !important; }
.btn-order-now, .product .btn-success, .product .btn {
  background: linear-gradient(135deg, var(--sm-brand-2), var(--sm-brand)) !important;
  color: #04222c !important; border: none !important;
  box-shadow: 0 10px 24px var(--sm-glow) !important; border-radius: 999px !important;
  font-weight: 700;
}
.featured-product > header, .product.featured > header {
  background: linear-gradient(135deg, rgba(43,182,218,.20), transparent) !important;
}

/* Force inner card/panel surfaces transparent so the dark .card shows through */
.card, .panel, .panel-default, .card.panel-default, .well, .accordion {
  background: var(--sm-card) !important;
}
.card-body, .panel-body, .card-header, .panel-heading, .card-footer, .panel-footer,
.tab-content, .tab-pane, .collapse, .collapsing, .collapsable-card-body,
.domain-selection-options, .domains-row, .primary-domain-header, .domain-input-group {
  background: transparent !important;
}
.card-body *, .panel-body * { border-color: var(--sm-line); }
.panel-title, .primary-domain-header, .domain-checker-result-headline { color: var(--sm-ink) !important; }
.domain-length-restrictions, .domain-suggestions-warning, .form-text, .help-block { color: var(--sm-muted) !important; }
/* radio/checkbox accent */
input[type="radio"], input[type="checkbox"] { accent-color: var(--sm-brand); }

/* Broad form theming — any input/textarea/select, even without .form-control */
.smtheme textarea,
.smtheme input[type="text"], .smtheme input[type="email"], .smtheme input[type="password"],
.smtheme input[type="tel"], .smtheme input[type="number"], .smtheme input[type="search"],
.smtheme input[type="url"], .smtheme select {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--sm-line) !important;
  color: var(--sm-ink) !important;
  border-radius: 12px !important;
}
.smtheme textarea::placeholder, .smtheme input::placeholder { color: var(--sm-muted) !important; }
.smtheme textarea:focus, .smtheme input:focus, .smtheme select:focus {
  border-color: var(--sm-brand) !important; box-shadow: 0 0 0 4px var(--sm-soft) !important; outline: none;
}
/* typeahead dropdowns */
.tt-menu, .twitter-typeahead .tt-menu { background: rgba(10,38,50,.98) !important; border: 1px solid var(--sm-line) !important; color: var(--sm-ink) !important; }
.tt-suggestion:hover { background: rgba(255,255,255,.06) !important; }

/* =====================================================================
   15) DATA TABLES (services, invoices, tickets, quotes, emails…)
   WHMCS DataTables/.table-list render white — force transparent so the
   dark glass card shows through. This fixes all client-area list pages.
   ===================================================================== */
.smtheme table, .smtheme .table, .smtheme table.table, .smtheme .dataTable, .smtheme .table-list,
.smtheme .table > thead, .smtheme .table > tbody, .smtheme .table > tfoot,
.smtheme .table thead tr, .smtheme .table tbody tr, .smtheme .table tfoot tr,
.smtheme table thead, .smtheme table tbody, .smtheme table tr,
.smtheme .table thead th, .smtheme .table tbody td, .smtheme .table tbody th,
.smtheme table td, .smtheme table th {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--sm-ink) !important;
  border-color: var(--sm-line) !important;
}
.smtheme .table thead th, .smtheme table.dataTable thead th {
  color: var(--sm-muted) !important;
  text-transform: uppercase; font-size: 12px; letter-spacing: .05em; font-weight: 700;
  border-bottom: 1px solid var(--sm-line) !important;
}
.smtheme .table-hover tbody tr:hover,
.smtheme table.dataTable tbody tr:hover,
.smtheme .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.035) !important; }
.smtheme .table a { color: var(--sm-brand-2) !important; }

/* DataTables chrome (search / length / info / pagination) */
.smtheme .dataTables_wrapper, .smtheme .dataTables_info,
.smtheme .dataTables_length, .smtheme .dataTables_filter,
.smtheme .dataTables_length label, .smtheme .dataTables_filter label { color: var(--sm-muted) !important; }
.smtheme .dataTables_length select, .smtheme .dataTables_filter input,
.smtheme .table-controls input, .smtheme .table-controls select {
  background: rgba(255,255,255,.05) !important; color: var(--sm-ink) !important;
  border: 1px solid var(--sm-line) !important; border-radius: 10px !important;
}
.smtheme .table-container, .smtheme .tablelist-container, .smtheme .dataTables_scroll,
.smtheme .dataTables_scrollHead, .smtheme .dataTables_scrollBody { background: transparent !important; }
.smtheme .paginate_button, .smtheme .page-link {
  background: rgba(255,255,255,.04) !important; color: var(--sm-muted) !important; border: 1px solid var(--sm-line) !important;
}
.smtheme .paginate_button.current, .smtheme .page-item.active .page-link {
  background: var(--sm-brand) !important; color: #04222c !important; border-color: var(--sm-brand) !important;
}
/* sort icons / empty row */
.smtheme table.dataTable .sorting:after, .smtheme table.dataTable .sorting_asc:after,
.smtheme table.dataTable .sorting_desc:after { color: var(--sm-muted) !important; }
.smtheme .dataTables_empty, .smtheme td.dataTables_empty { color: var(--sm-muted) !important; }

/* =====================================================================
   16) INVOICE PAGE (viewinvoice) — white "paper" → dark glass
   ===================================================================== */
.smtheme .invoice-container {
  background: var(--sm-card) !important;
  color: var(--sm-ink) !important;
  border: 1px solid var(--sm-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(16px);
}
.smtheme .invoice-container,
.smtheme .invoice-container p,
.smtheme .invoice-container span,
.smtheme .invoice-container td,
.smtheme .invoice-container th,
.smtheme .invoice-container h1, .smtheme .invoice-container h2,
.smtheme .invoice-container h3, .smtheme .invoice-container h4,
.smtheme .invoice-col, .smtheme .invoice-header, .smtheme .invoice-container .text-muted {
  color: var(--sm-ink) !important;
}
.smtheme .invoice-container a { color: var(--sm-brand-2) !important; }
.smtheme .invoice-container .table, .smtheme .invoice-items, .smtheme .invoice-items table { background: transparent !important; }
.smtheme .invoice-container .table thead th, .smtheme .invoice-items thead th {
  background: var(--sm-bg2) !important; color: var(--sm-ink) !important; border-color: var(--sm-line) !important;
}
.smtheme .invoice-container .table td, .smtheme .invoice-items td { border-color: var(--sm-line) !important; }
.smtheme .invoice-status { filter: none; }
/* print: keep readable */
@media print { .smtheme .invoice-container { background:#fff !important; color:#000 !important; } .smtheme .invoice-container * { color:#000 !important; } }

/* 16b) Invoice container — global (standalone invoice page has no body class) */
.invoice-container {
  background: var(--sm-card, rgba(13,44,57,.92)) !important;
  color: #eaf6fb !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.30) !important;
}
.invoice-container p, .invoice-container span, .invoice-container td, .invoice-container th,
.invoice-container h1, .invoice-container h2, .invoice-container h3, .invoice-container h4,
.invoice-col, .invoice-header, .invoice-container .text-muted, .invoice-container div, .invoice-container li {
  color: #eaf6fb !important;
}
.invoice-container a { color: #5fd0ec !important; }
.invoice-container .table thead th, .invoice-items thead th { background: #0a2a38 !important; color:#eaf6fb !important; }
.invoice-container td.total-row, .invoice-container .total-row { background: #0a2a38 !important; color:#eaf6fb !important; }
.invoice-container .table td, .invoice-items td { border-color: rgba(255,255,255,.09) !important; }
@media print { .invoice-container, .invoice-container * { background:#fff !important; color:#000 !important; } }

/* =====================================================================
   17) Register page — centered + constrained + logo
   ===================================================================== */
.sm-auth .authx-page { padding: 48px 20px 64px; }
.sm-auth #registration { max-width: 760px; margin-inline: auto; }
.sm-auth #registration .card { margin-bottom: 18px; }
.sm-auth #registration .authx-logo { font-size: 26px; justify-content: center; }
.sm-auth #registration .authx-reg-head h1 { color: var(--sm-ink); }

/* =====================================================================
   18) Button hover — text must always stay readable (fix invisible text)
   ===================================================================== */
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-pill, .btn-pill:hover, .btn-pill:focus,
.btn-success:hover, .btn-success:focus,
button#btnCompleteProductConfig:hover, #btnCompleteOrder:hover, .btn-order-now:hover,
.product .btn:hover {
  color: #04222c !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-default:hover, .btn-default:focus,
.btn-secondary:hover, .btn-secondary:focus,
.btn-ghost:hover, .btn-link:hover {
  color: var(--sm-ink) !important;
}
.btn-active-client:hover { color: var(--sm-brand-2) !important; }
/* generic safety: never let a button's text vanish on hover */
.btn:hover, a.btn:hover, button.btn:hover { text-decoration: none; }
.btn:hover { opacity: 1 !important; }

/* =====================================================================
   19) Cart icon (public top bar) + empty-cart link
   ===================================================================== */
.pbar .cart-link { position: relative; display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--d-line);
  color: var(--d-ink); transition: .15s; }
.pbar .cart-link:hover { border-color: var(--d-line-2); background: rgba(255,255,255,.05); }
.pbar .cart-link .count { position: absolute; top: -6px; right: -6px;
  background: var(--brand); color: #04222c; font-size: 11px; font-weight: 800;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-family: var(--font-ui); }
.btn-empty-cart { color: var(--red) !important; border: 1px solid rgba(248,113,113,.3) !important;
  background: transparent !important; }
.btn-empty-cart:hover { background: rgba(248,113,113,.12) !important; color: var(--red) !important; }

/* =====================================================================
   20) COMPREHENSIVE COVERAGE — theme EVERY remaining component so no
   page falls back to unreadable default (Bootstrap 4 + WHMCS widgets).
   Scoped to .smtheme so it only affects our theme.
   ===================================================================== */

/* ---- 20.1 Catch-all: kill light backgrounds / dark text everywhere ---- */
.smtheme .bg-white, .smtheme .bg-light, .smtheme .bg-body, .smtheme .bg-faded,
.smtheme [class*="bg-gray"], .smtheme .bg-secondary, .smtheme .jumbotron {
  background-color: var(--sm-card) !important; color: var(--sm-ink) !important;
}
.smtheme .text-dark, .smtheme .text-body, .smtheme .text-black,
.smtheme .text-secondary, .smtheme .text-gray-dark { color: var(--sm-ink) !important; }
.smtheme .text-white { color: var(--sm-ink) !important; }
.smtheme .border, .smtheme .border-top, .smtheme .border-bottom,
.smtheme .border-left, .smtheme .border-right, .smtheme [class*="border-line"],
.smtheme .dashed-border, .smtheme [class*="-border"], .smtheme .bottom-border {
  border-color: var(--sm-line) !important;
}
.smtheme hr, .smtheme .divider { border-color: var(--sm-line) !important; background: var(--sm-line) !important; }

/* ---- 20.2 Buttons — full variant set ---- */
.smtheme .btn-light, .smtheme .btn-white, .smtheme .btn-outline-light {
  background: rgba(255,255,255,.06) !important; color: var(--sm-ink) !important; border-color: var(--sm-line) !important;
}
.smtheme .btn-light:hover, .smtheme .btn-white:hover { background: rgba(255,255,255,.12) !important; color: var(--sm-ink) !important; }
.smtheme .btn-info { background: var(--sm-soft) !important; color: var(--sm-brand-2) !important; border:none !important; }
.smtheme .btn-info:hover { background: rgba(43,182,218,.28) !important; color: var(--sm-brand-2) !important; }
.smtheme .btn-warning { background: rgba(251,191,36,.16) !important; color: #fbbf24 !important; border:none !important; }
.smtheme .btn-danger { background: rgba(248,113,113,.16) !important; color: #f87171 !important; border:none !important; }
.smtheme .btn-dark { background: var(--sm-bg2) !important; color: var(--sm-ink) !important; border-color: var(--sm-line) !important; }
.smtheme .btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.smtheme .btn-group .btn { border-color: var(--sm-line) !important; }

/* ---- 20.3 Forms — complete ---- */
.smtheme .form-group, .smtheme .form-row { color: var(--sm-ink); }
.smtheme .col-form-label, .smtheme .form-label, .smtheme .form-check-label,
.smtheme .custom-control-label, .smtheme legend { color: var(--sm-muted) !important; }
.smtheme .custom-file-label { background: rgba(255,255,255,.04) !important; color: var(--sm-muted) !important; border-color: var(--sm-line) !important; }
.smtheme .custom-file-label::after { background: var(--sm-bg2) !important; color: var(--sm-ink) !important; }
.smtheme .input-group-append .btn, .smtheme .input-group-prepend .btn { border-color: var(--sm-line) !important; }
.smtheme .form-control:disabled, .smtheme .form-control[readonly] { background: rgba(255,255,255,.02) !important; color: var(--sm-muted) !important; }
.smtheme .label-placeholder, .smtheme .floating-label label { color: var(--sm-muted) !important; }
.smtheme .is-invalid, .smtheme .invalid-feedback { color: #fca5a5 !important; }
.smtheme .form-control.is-invalid { border-color: #f87171 !important; }
.smtheme .custom-switch .custom-control-label::before { background: rgba(255,255,255,.12) !important; }

/* ---- 20.4 Nav / tabs / pills / breadcrumb / pagination ---- */
.smtheme .nav-tabs .nav-link { color: var(--sm-muted) !important; border-color: transparent !important; }
.smtheme .nav-tabs .nav-link.active { color: var(--sm-brand-2) !important; background: transparent !important; border-bottom: 2px solid var(--sm-brand) !important; }
.smtheme .nav-pills .nav-link.active { background: var(--sm-brand) !important; color: #04222c !important; }
.smtheme .nav-pills .nav-link { color: var(--sm-muted) !important; }
.smtheme .breadcrumb { background: transparent !important; }
.smtheme .breadcrumb-item, .smtheme .breadcrumb-item a, .smtheme .breadcrumb-item.active { color: var(--sm-muted) !important; }
.smtheme .breadcrumb-item.active { color: var(--sm-ink) !important; }
.smtheme .master-breadcrumb { background: transparent !important; }

/* ---- 20.5 WHMCS dashboard tiles + stats + status ---- */
.smtheme .tiles .tile {
  background: var(--sm-card) !important; border: 1px solid var(--sm-line) !important;
  border-radius: 16px !important; color: var(--sm-ink) !important; overflow: hidden;
  transition: .18s; margin: 6px;
}
.smtheme .tiles .tile:hover { border-color: var(--sm-line2) !important; transform: translateY(-2px); }
.smtheme .tile .stat { color: var(--sm-ink) !important; font-weight: 800; }
.smtheme .tile .title { color: var(--sm-muted) !important; }
.smtheme .tile i { color: var(--sm-brand-2) !important; }
.smtheme .tile .highlight { opacity: .9; }
.smtheme .div-service-status, .smtheme .status, .smtheme .rawstatus, .smtheme .product-status { font-weight: 600; }
.smtheme .lockstatus { color: var(--sm-muted) !important; }

/* ---- 20.6 WHMCS home panels (Active Products/Services, Manage etc.) ---- */
.smtheme .card-accent-blue, .smtheme [class*="card-accent-"] { background: var(--sm-card) !important; }
.smtheme [class*="card-accent-"] .card-header { background: transparent !important; }
.smtheme .client-home-cards .list-group-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.smtheme .client-home-cards .list-group-item .btn { flex: none; }
.smtheme .card .btn-default, .smtheme .panel .btn-default { background: var(--sm-soft) !important; color: var(--sm-brand-2) !important; border: none !important; }
.smtheme .card .btn-default:hover { background: rgba(43,182,218,.26) !important; }

/* ---- 20.7 Product / order / store ---- */
.smtheme .product-showcase, .smtheme .product-details, .smtheme .product-info,
.smtheme .product-header, .smtheme .choose-product, .smtheme .store-order-container,
.smtheme .product-options, .smtheme .product-details-tab-container {
  background: transparent !important; color: var(--sm-ink) !important;
}
.smtheme .product-name, .smtheme .product-header h1, .smtheme .product-header h2 { color: var(--sm-ink) !important; }
.smtheme .product-icon, .smtheme .product-icon i { color: var(--sm-brand-2) !important; }
.smtheme .product-status-text, .smtheme [class*="product-status-"] { color: var(--sm-ink) !important; }
.smtheme .order-btn, .smtheme .btn-order-now { background: linear-gradient(135deg, var(--sm-brand-2), var(--sm-brand)) !important; color:#04222c !important; border:none !important; }
.smtheme .pricing-table, .smtheme .pricing-label, .smtheme .pricing { color: var(--sm-ink) !important; }
.smtheme .div-feature-labels, .smtheme .div-feature-order, .smtheme .div-feature-label-starting,
.smtheme .div-heading-border, .smtheme .sub-heading-borderless { color: var(--sm-ink) !important; border-color: var(--sm-line) !important; }

/* ---- 20.8 Domain checker / search ---- */
.smtheme .domainchecker, .smtheme .domainchecker-homepage-captcha, .smtheme .home-domain-search,
.smtheme .domain-input, .smtheme .domain-name, .smtheme .domain-pricing, .smtheme .text-domain {
  color: var(--sm-ink) !important;
}
.smtheme .domain-validation, .smtheme .domain-input-validation, .smtheme .subdomain-validation { color: var(--sm-muted) !important; }
.smtheme .store-domain-tabs .nav-link.active, .smtheme .store-domain-tab-content { background: var(--sm-soft) !important; color: var(--sm-ink) !important; }
.smtheme .store-domain-tab-content { background: transparent !important; }

/* ---- 20.9 Tickets ---- */
.smtheme .ticket, .smtheme .ticket-reply, .smtheme .ticket-subject, .smtheme .ticket-number,
.smtheme .view-ticket, .smtheme .ticket-actions, .smtheme .ticketfeedbackstaffcont {
  background: transparent !important; color: var(--sm-ink) !important;
}
.smtheme .ticket-reply, .smtheme .markdown-content { background: var(--sm-card2) !important; border:1px solid var(--sm-line) !important; border-radius: 14px !important; padding: 14px 16px; }

/* ---- 20.10 Markdown editor ---- */
.smtheme .markdown-editor, .smtheme .container-markdown-editor, .smtheme .markdown-editor-status {
  background: var(--sm-bg2) !important; color: var(--sm-ink) !important; border-color: var(--sm-line) !important;
}
.smtheme .editor-toolbar, .smtheme .CodeMirror { background: var(--sm-bg2) !important; color: var(--sm-ink) !important; border-color: var(--sm-line) !important; }
.smtheme .editor-toolbar a { color: var(--sm-muted) !important; }
.smtheme .editor-preview, .smtheme .editor-preview-side { background: var(--sm-card) !important; color: var(--sm-ink) !important; }

/* ---- 20.11 Progress / promos / misc ---- */
.smtheme .progress { background: rgba(255,255,255,.08) !important; }
.smtheme .progress-bar { background: linear-gradient(90deg, var(--sm-brand), var(--sm-brand-2)) !important; color:#04222c !important; }
.smtheme .promo-banner, .smtheme .promo-wrapper, .smtheme .promotion, .smtheme [class*="promo"],
.smtheme .competitive-upgrade-promo, .smtheme .store-promoted-product {
  background: var(--sm-card2) !important; color: var(--sm-ink) !important; border:1px solid var(--sm-line) !important; border-radius: 14px !important;
}
.smtheme .well { background: var(--sm-card2) !important; color: var(--sm-ink) !important; border:1px solid var(--sm-line) !important; }
.smtheme blockquote { border-left: 3px solid var(--sm-brand) !important; color: var(--sm-ink) !important; background: var(--sm-card2) !important; }
.smtheme code, .smtheme kbd { background: var(--sm-bg2) !important; color: var(--sm-brand-2) !important; }
.smtheme pre { background: var(--sm-bg2) !important; color: var(--sm-ink) !important; border:1px solid var(--sm-line) !important; border-radius: 12px; }
.smtheme .content-block, .smtheme .feature-block, .smtheme .feature, .smtheme .features { color: var(--sm-ink) !important; }
.smtheme .highlight1, .smtheme .highlight2, .smtheme .highlights, .smtheme .row-highlight { background: var(--sm-card2) !important; color: var(--sm-ink) !important; }

/* ---- 20.12 Affiliate / network status / misc widgets ---- */
.smtheme .affiliate-stat { background: var(--sm-card) !important; border:1px solid var(--sm-line) !important; border-radius: 14px; color: var(--sm-ink) !important; }
.smtheme .affiliate-stat-green { color: var(--green) !important; }
.smtheme .network-issue-alert { background: var(--sm-card) !important; border:1px solid var(--sm-line) !important; color: var(--sm-ink) !important; }
.smtheme .serverstatus, .smtheme .masspay-invoice-detail { color: var(--sm-ink) !important; }

/* ---- 20.13 Sidebar menu (WHMCS contextual) ---- */
.smtheme .sidebar-menu-item-wrapper, .smtheme .sidebar-menu-item-label { color: var(--sm-muted) !important; }
.smtheme .sidebar-menu-item-wrapper:hover { color: var(--sm-ink) !important; }
.smtheme .sidebar-menu-item-icon, .smtheme .sidebar-menu-item-icon-wrapper { color: var(--sm-brand-2) !important; }
.smtheme .sidebar-menu-item-badge { background: var(--sm-brand) !important; color: #04222c !important; }

/* ---- 20.14 Typography safety ---- */
.smtheme p, .smtheme li, .smtheme td, .smtheme dd, .smtheme dt, .smtheme span, .smtheme label { color: inherit; }
.smtheme .lead { color: var(--sm-ink) !important; }
.smtheme strong, .smtheme b { color: inherit; }
.smtheme a:not(.btn):not(.nav-link):not(.list-group-item):not(.dropdown-item):not(.side-link):not(.dd-item) { color: var(--sm-brand-2); }

/* =====================================================================
   21) MARKDOWN EDITOR (EasyMDE/CodeMirror) — runtime-injected CSS needs
   higher specificity (body.smtheme ...) to override its white editor.
   ===================================================================== */
body.smtheme .EasyMDEContainer .CodeMirror,
body.smtheme .CodeMirror,
body.smtheme .CodeMirror-scroll,
body.smtheme .CodeMirror-sizer,
body.smtheme .CodeMirror pre.CodeMirror-line {
  background: #0a2a38 !important;
  color: #eaf6fb !important;
}
body.smtheme .CodeMirror, body.smtheme .EasyMDEContainer .CodeMirror {
  border-color: rgba(255,255,255,.09) !important;
}
body.smtheme .CodeMirror-gutters { background: #0a2a38 !important; border-color: rgba(255,255,255,.09) !important; }
body.smtheme .CodeMirror-cursor { border-left-color: #eaf6fb !important; }
body.smtheme .CodeMirror-selectedtext, body.smtheme .CodeMirror-selected { background: rgba(43,182,218,.28) !important; }
body.smtheme .cm-s-easymde span, body.smtheme .CodeMirror pre { color: #eaf6fb !important; }
body.smtheme .editor-toolbar { background: #0a2a38 !important; border-color: rgba(255,255,255,.09) !important; opacity: 1; }
body.smtheme .editor-toolbar a { color: #8fb2c0 !important; }
body.smtheme .editor-toolbar a.active, body.smtheme .editor-toolbar a:hover {
  background: rgba(255,255,255,.08) !important; color: #eaf6fb !important; border-color: transparent !important;
}
body.smtheme .editor-toolbar i.separator { border-color: rgba(255,255,255,.09) !important; }
body.smtheme .editor-statusbar { color: #8fb2c0 !important; }
body.smtheme .editor-preview, body.smtheme .editor-preview-side { background: #0d2c39 !important; color: #eaf6fb !important; }
/* plain textarea fallback for non-EasyMDE markdown fields */
body.smtheme textarea.form-control, body.smtheme .markdown-editor textarea { background: #0a2a38 !important; color: #eaf6fb !important; }

/* Services list: Manage column never sorts oddly */
body.smtheme #tableServicesList td .btn-primary { color: #04222c !important; }

/* 21b) EasyMDE container edges — remove leftover white border/strip */
body.smtheme .EasyMDEContainer {
  border: 1px solid rgba(255,255,255,.09) !important; border-radius: 12px; overflow: hidden;
}
body.smtheme .EasyMDEContainer .CodeMirror { border: none !important; }
body.smtheme .editor-statusbar { background: #0a2a38 !important; border-top: 1px solid rgba(255,255,255,.09) !important; }
body.smtheme .EasyMDEContainer textarea, body.smtheme .editor-toolbar { background: #0a2a38 !important; }
body.smtheme .CodeMirror-scrollbar-filler, body.smtheme .CodeMirror-gutter-filler { background: #0a2a38 !important; }

/* =====================================================================
   22) alert-block container (contacts selector) + select2 widgets
   ===================================================================== */
body.smtheme .alert-info, body.smtheme .alert-block,
body.smtheme .alert.alert-info, body.smtheme .alert.alert-block {
  background: var(--sm-card2) !important; color: var(--sm-ink) !important;
  border: 1px solid var(--sm-line) !important; border-radius: 14px !important;
}
body.smtheme .alert-info label, body.smtheme .alert-block label,
body.smtheme .alert-info .col-form-label { color: var(--sm-muted) !important; }
body.smtheme .alert-info a { color: var(--sm-brand-2) !important; }

/* select2 dropdown widgets (if WHMCS enhances selects) */
body.smtheme .select2-container--default .select2-selection,
body.smtheme .select2-container .select2-selection,
body.smtheme .select2-selection--single, body.smtheme .select2-selection--multiple,
body.smtheme .select2-dropdown, body.smtheme .select2-search__field {
  background: rgba(255,255,255,.05) !important; border-color: var(--sm-line) !important;
  color: var(--sm-ink) !important; border-radius: 12px !important;
}
body.smtheme .select2-selection__rendered, body.smtheme .select2-selection__placeholder { color: var(--sm-ink) !important; }
body.smtheme .select2-selection__arrow b { border-color: var(--sm-muted) transparent transparent !important; }
body.smtheme .select2-results__option { background: rgba(10,38,50,.98) !important; color: var(--sm-ink) !important; }
body.smtheme .select2-results__option--highlighted { background: var(--sm-soft) !important; color: var(--sm-ink) !important; }
body.smtheme .select2-dropdown { background: rgba(10,38,50,.98) !important; }

/* =====================================================================
   23) Uploaded WHMCS logo ($assetLogoPath) sizing across brand spots
   ===================================================================== */
.brand .sm-logo-img { max-height: 42px; width: auto; display: block; object-fit: contain; }
.side .brand .sm-logo-img { max-height: 40px; max-width: 200px; }
.pbar .brand .sm-logo-img { max-height: 36px; max-width: 200px; }
.authx-logo .sm-logo-img.sm-logo-lg { max-height: 64px; max-width: 260px; width: auto; display: inline-block; }
.brand .sm-logo-img, .authx-logo .sm-logo-img { filter: none; }

/* =====================================================================
   24) Browser AUTOFILL — kill the white/yellow autofilled background
   (the real fix: paint over it with an inset box-shadow)
   ===================================================================== */
.smtheme input:-webkit-autofill,
.smtheme input:-webkit-autofill:hover,
.smtheme input:-webkit-autofill:focus,
.smtheme input:-webkit-autofill:active,
.smtheme textarea:-webkit-autofill,
.smtheme select:-webkit-autofill,
.authx input:-webkit-autofill,
.authx input:-webkit-autofill:hover,
.authx input:-webkit-autofill:focus {
  -webkit-text-fill-color: #eaf6fb !important;
  -webkit-box-shadow: 0 0 0 1000px #0a2a38 inset !important;
  box-shadow: 0 0 0 1000px #0a2a38 inset !important;
  caret-color: #eaf6fb !important;
  border-color: rgba(255,255,255,.12) !important;
  transition: background-color 99999s ease-in-out 0s !important;
}

/* =====================================================================
   25) MOBILE RESPONSIVE — prominent menu button, overlay, stacking
   ===================================================================== */
@media (max-width: 1024px) {
  /* Off-canvas sidebar gets a strong shadow + overlay */
  .smtheme .side { box-shadow: 0 0 80px rgba(0,0,0,.65); z-index: 70 !important; }
  .sm-overlay { position: fixed; inset: 0; background: rgba(3,12,16,.6); backdrop-filter: blur(2px);
    z-index: 65; opacity: 0; visibility: hidden; transition: .22s; }
  .sm-overlay.show { opacity: 1; visibility: visible; }
  /* PROMINENT hamburger menu button */
  .smtheme .menu-btn { display: grid !important; width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--cyan), var(--brand)) !important;
    color: #04222c !important; border: none !important; box-shadow: 0 6px 16px var(--brand-glow); }
  .smtheme .menu-btn .ic { stroke-width: 2.4; }
}
@media (max-width: 860px) {
  .smtheme .topbar { padding: 0 14px; gap: 10px; height: 66px; }
  .smtheme .topbar h1 { font-size: 17px; }
  .smtheme .topbar .search { display: none; }
  .smtheme .user-chip { border: none; padding: 0; }
  .smtheme .user-chip .nm { display: none; }
  .smtheme .user-chip .ic { display: none; }
  .smtheme .content { padding: 16px; gap: 16px; }
  .smtheme .welcome { padding: 22px 18px; }
  .smtheme .welcome h2 { font-size: 21px; }
  .smtheme .welcome p { font-size: 14px; }
  .smtheme .welcome-meta { gap: 16px 22px; }
  .smtheme .stats { grid-template-columns: 1fr 1fr !important; }
  .smtheme .tv-cards { grid-template-columns: 1fr !important; }
  .smtheme .grid-2c, .smtheme .detail-grid, .smtheme .form-grid { grid-template-columns: 1fr !important; }
  .smtheme .panel-head { padding: 14px 16px; flex-wrap: wrap; }
  .smtheme .panel-body { padding: 16px; }
  /* tables scroll horizontally instead of breaking */
  .smtheme .panel-body.flush, .smtheme .table-container, .smtheme .table-responsive,
  .smtheme .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .smtheme .tbl, .smtheme .content table.table { min-width: 560px; }
  /* footer stacks + centers */
  .mini-foot { flex-direction: column; text-align: center; gap: 8px; }
  .mini-foot .fnav { justify-content: center; }
  /* public top bar wraps */
  .pbar { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 10px; }
  .pwrap { padding: 28px 16px; }
  .pricing-grid, .news { grid-template-columns: 1fr !important; }
  /* cart / checkout stack */
  #order-standard_cart .row { display: block !important; }
  #order-standard_cart [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  .order-summary, .summary-container { margin-top: 16px; }
}
@media (max-width: 520px) {
  .smtheme .stats { grid-template-columns: 1fr !important; }
  .smtheme .topbar h1 { font-size: 16px; }
  .smtheme .welcome .welcome-meta .m b { font-size: 18px; }
  .authx-card { max-width: 100%; }
  .authx h1 { font-size: 26px; }
}

/* =====================================================================
   26) MOBILE SIDEBAR (robust, inline body.sm-nav driven) + topbar fixes
   ===================================================================== */
.side-close { display: none; }
.sm-overlay { display: none; }

@media (max-width: 1024px) {
  .smtheme .side {
    position: fixed; top: 0; left: -300px; width: 282px; height: 100vh;
    transition: left .25s ease; z-index: 80 !important;
  }
  body.sm-nav .side, .smtheme .side.open { left: 0 !important; }
  .sm-overlay {
    display: block; position: fixed; inset: 0; background: rgba(3,12,16,.62);
    backdrop-filter: blur(2px); z-index: 75; opacity: 0; visibility: hidden; transition: .22s;
  }
  body.sm-nav .sm-overlay { opacity: 1; visibility: visible; }
  body.sm-nav { overflow: hidden; }
  .smtheme .side-close {
    display: grid; place-items: center; position: absolute; top: 16px; right: 14px;
    width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.06);
    border: 1px solid var(--d-line); color: var(--d-ink); z-index: 3;
  }
  /* Prominent cyan hamburger */
  .smtheme .menu-btn {
    display: grid !important; width: 44px; height: 44px; align-self: center;
    background: linear-gradient(135deg, var(--cyan), var(--brand)) !important;
    color: #04222c !important; border: none !important; box-shadow: 0 6px 16px var(--brand-glow);
  }
  /* Collapse the account chip to just the avatar (stop email overflow) */
  .smtheme .user-chip .nm, .smtheme .user-chip > .ic { display: none !important; }
  .smtheme .user-chip { border: none !important; padding: 0 !important; }
}

/* Topbar buttons must stay square & centered (fixes empty stretched pills) */
.smtheme .topbar { align-items: center; }
.smtheme .topbar .icon-btn, .smtheme .topbar .cart-link {
  align-self: center !important; flex: 0 0 auto !important; width: 42px !important; height: 42px !important;
}
.smtheme .topbar .icon-btn .ic, .smtheme .topbar .cart-link .ic { width: 20px; height: 20px; }
.smtheme .topbar .dropdown { flex: 0 0 auto; }

/* =====================================================================
   27) Kill horizontal overflow / white side strip on mobile
   ===================================================================== */
html { background: #061a23 !important; }
html, body, body.smtheme, body.app {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
.smtheme .shell, .smtheme .main, .smtheme .content,
.smtheme .pwrap, .authx { max-width: 100vw; min-width: 0; }
.smtheme .main, .smtheme .content { overflow-x: hidden; }

@media (max-width: 1024px) {
  /* wide WHMCS tables scroll INSIDE their wrapper, never the page */
  .smtheme .content .table-container,
  .smtheme .content .dataTables_wrapper,
  .smtheme .content .table-responsive,
  .smtheme .dataTables_scrollBody,
  .smtheme .panel-body.flush {
    overflow-x: auto !important; max-width: 100%; -webkit-overflow-scrolling: touch;
  }
  .smtheme .content table.table, .smtheme .tbl { min-width: 520px; }
  /* any stray wide element clamps to viewport */
  .smtheme .content > *, .smtheme .panel, .smtheme .welcome,
  .smtheme .stats, .smtheme .grid-2c, .smtheme .detail-grid { max-width: 100%; }
  .smtheme .content img, .smtheme .panel img { max-width: 100%; height: auto; }
}

/* =====================================================================
   28) Mobile menu — SOLE driver is body.sm-nav (neutralise cached .open)
   ===================================================================== */
@media (max-width: 1024px) {
  /* sidebar closed unless body.sm-nav, regardless of any .open class */
  body.smtheme:not(.sm-nav) .side { left: -310px !important; }
  body.smtheme.sm-nav .side { left: 0 !important; }
  /* overlay shows only with body.sm-nav (ignore stray .show) */
  body.smtheme:not(.sm-nav) .sm-overlay { opacity: 0 !important; visibility: hidden !important; }
  body.smtheme.sm-nav .sm-overlay { opacity: 1 !important; visibility: visible !important; }
}