/* =====================================================================
   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; }
}

/* =====================================================================
   29) KNOWLEDGEBASE — readable contrast for article/category excerpts
   The "Most Popular Articles" and category lists render their summary as
   <small>/.text-muted, which were rendering far too dark on the dark bg.
   ===================================================================== */
/* Lay each popular-article row out cleanly: title row + readable excerpt */
.smtheme .kb-article-item {
  display: block !important;
  color: var(--sm-ink) !important;
  padding: 14px 16px !important;
}
.smtheme .kb-article-item small,
.smtheme .kb-article-item .article-excerpt {
  display: block;
  margin-top: 4px;
  color: #acc8d4 !important;      /* clearly readable muted */
  opacity: 1 !important;
  font-weight: 500;
  line-height: 1.5;
}
.smtheme .kb-article-item:hover { color: #fff !important; }
.smtheme .kb-article-item:hover small { color: var(--sm-ink) !important; }

/* Category cards — description + meta */
.smtheme .kb-category .text-muted,
.smtheme .kb-category small,
.smtheme .kb-category .card-body p {
  color: #acc8d4 !important;
  opacity: 1 !important;
}
.smtheme .kb-category .card-body { color: var(--sm-ink) !important; }

/* Faint Bootstrap icons (text-black-50) are invisible on dark — lift them */
.smtheme .kb-article-item .text-black-50,
.smtheme .kb-category .text-black-50,
.smtheme .knowledgebase .text-black-50,
.smtheme .list-group-item .text-black-50 { color: var(--sm-muted) !important; }

/* Search box on the KB landing */
.smtheme .kb-search .form-control { color: var(--sm-ink) !important; }

/* =====================================================================
   30) Theme-Manager addon — footer credit + announcement offsets
   ===================================================================== */
.sm-appfoot { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px;
  padding:18px; color:var(--sm-muted); font-size:13px; border-top:1px solid var(--sm-line); }
.sm-appfoot .foot-note, .mini-foot .foot-note { color:var(--sm-muted); }
.sm-appfoot .sm-credit a, .mini-foot .sm-credit { color:var(--sm-brand-2); text-decoration:none; }
.sm-appfoot .sm-credit a:hover, .mini-foot .sm-credit:hover { color:var(--sm-brand); }
/* keep a sticky topbar clear of the announcement bar */
body.smtv-has-annc .topbar { top: var(--smtv-annc-h, 0px); }

/* =====================================================================
   31) Responsive client-area tables — stack rows into cards on mobile
   Fixes horizontal overflow of the Products/Invoices/Domains DataTables.
   ===================================================================== */
@media (max-width: 767px) {
  /* kill the min-width + inline width DataTables forces (would overflow) */
  .smtheme .content table.table-list,
  .smtheme .content table.table,
  .smtheme .tbl { min-width: 0 !important; max-width: 100% !important; }
  .smtheme .content .dataTables_wrapper { width: 100% !important; max-width: 100% !important; }

  /* stack: hide header, turn rows into cards, cells into label:value lines */
  .smtheme .content table.table-list thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .smtheme .content table.table-list,
  .smtheme .content table.table-list tbody,
  .smtheme .content table.table-list tr,
  .smtheme .content table.table-list td { display: block !important; width: 100% !important; max-width: 100% !important; }
  .smtheme .content table.table-list tr {
    border: 1px solid var(--sm-line) !important; border-radius: 14px; margin-bottom: 12px;
    padding: 12px 16px; background: var(--sm-card2) !important; cursor: pointer;
  }
  .smtheme .content table.table-list td {
    border: 0 !important; padding: 7px 0 !important; text-align: left !important;
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    white-space: normal !important; overflow-wrap: anywhere;
  }
  .smtheme .content table.table-list td.text-center,
  .smtheme .content table.table-list td.text-right { text-align: left !important; }
  .smtheme .content table.table-list td:empty { display: none; }
  /* value emphasis */
  .smtheme .content table.table-list td strong,
  .smtheme .content table.table-list td .price { color: var(--sm-ink); }

  /* ---- Products & Services table: explicit labels + prominent name ---- */
  #tableServicesList td:nth-child(1) { display: none !important; }
  #tableServicesList td:nth-child(2) { display: block; font-size: 16px; padding-bottom: 6px !important; border-bottom: 1px solid var(--sm-line) !important; margin-bottom: 4px; }
  #tableServicesList td:nth-child(3)::before { content: "Pricing"; }
  #tableServicesList td:nth-child(4)::before { content: "Next due"; }
  #tableServicesList td:nth-child(5)::before { content: "Status"; }
  #tableServicesList td:nth-child(6) { display: block; margin-top: 10px; }
  #tableServicesList td:nth-child(6) .btn { display: block; width: 100%; text-align: center; }
  #tableServicesList td:nth-child(3)::before,
  #tableServicesList td:nth-child(4)::before,
  #tableServicesList td:nth-child(5)::before { color: var(--sm-muted); font-weight: 600; font-size: 13px; flex: 0 0 auto; }

  /* ---- Invoices / Quotes tables: label common columns ---- */
  #tableInvoicesList td:nth-child(1)::before { content: "Invoice #"; }
  #tableInvoicesList td:nth-child(2)::before { content: "Date"; }
  #tableInvoicesList td:nth-child(3)::before { content: "Due"; }
  #tableInvoicesList td:nth-child(4)::before { content: "Total"; }
  #tableInvoicesList td:nth-child(5)::before { content: "Status"; }
  #tableInvoicesList td[class*="nth"]::before,
  #tableInvoicesList td::before { color: var(--sm-muted); font-weight: 600; font-size: 13px; flex: 0 0 auto; }

  /* DataTables controls: keep tidy on mobile */
  .smtheme .dataTables_filter, .smtheme .dataTables_length { text-align: left; }
  .smtheme .dataTables_filter input { width: 100%; margin: 0; }
  .smtheme .dataTables_paginate { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; }
}

/* =====================================================================
   32) UI POLISH — unthemed surfaces + spacing consistency
   ===================================================================== */
/* Product/Service details: status block rendered as a white card */
.smtheme .product-status,
.smtheme [class*="product-status-"] {
  background: var(--sm-card2) !important; border: 1px solid var(--sm-line) !important;
  border-radius: 16px !important; overflow: hidden; padding: 20px !important;
}
.smtheme .product-status h3,
.smtheme .product-status .product-status-text,
.smtheme .product-status p { color: var(--sm-ink) !important; }
.smtheme .product-status .product-status-text { margin-top: 6px; }

/* Invoice / ledger "bg-info" header bar → themed (was bright cyan) */
.smtheme .card-title.bg-info,
.smtheme .invoice-container .bg-info,
.smtheme .transactions-container .bg-info {
  background: rgba(255,255,255,.05) !important; color: var(--sm-ink) !important;
  border-bottom: 1px solid var(--sm-line) !important; border-radius: 12px 12px 0 0;
  padding: 12px 16px !important;
}
.smtheme .transactions-container .card { border: 1px solid var(--sm-line) !important; border-radius: 14px !important; overflow: hidden; }
.smtheme .transactions-container table { margin-bottom: 0; }

/* MarketConnect / promo grey buttons → brand pill */
.smtheme .marketconnect-promo .btn,
.smtheme .promotion-cta .btn,
.smtheme .btn-marketconnect {
  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;
}

/* Product info column (Registration Date / Amount / …) — vertical rhythm */
.smtheme .product-details .product-fields > div,
.smtheme .product-meta > div,
.smtheme #tabOverview .col-md-6 dl > * { margin-bottom: 4px; }
.smtheme #tabOverview .col-md-6 h3 { margin: 18px 0 2px; }
.smtheme #tabOverview .col-md-6 h3:first-child { margin-top: 0; }

/* Consistent card / panel inner padding */
.smtheme .content .card > .card-body,
.smtheme .content .panel > .panel-body { padding: 22px 24px; }
.smtheme .content .card { margin-bottom: 22px; }

/* Section headings breathing room */
.smtheme .clientareabordertitle,
.smtheme .content h2.card-title,
.smtheme .content .header-lined { margin-bottom: 16px; }

/* Forms — consistent field spacing */
.smtheme .content .form-group,
.smtheme .content .mb-3 { margin-bottom: 18px; }
.smtheme .content form .row { row-gap: 4px; }

/* Tables — comfortable cell padding (desktop) */
.smtheme .content table.table th,
.smtheme .content table.table td { padding: 12px 14px; vertical-align: middle; }

/* Alerts — consistent padding + spacing */
.smtheme .content .alert { padding: 14px 18px; margin-bottom: 20px; }

/* §32b — product-icon box (#efefef in base theme) + info column rhythm */
.smtheme .product-icon { background: var(--sm-card2) !important; border: 1px solid var(--sm-line) !important; }
.smtheme .product-icon h3, .smtheme .product-status h3, .smtheme .product-status h4 { color: var(--sm-ink) !important; }
.smtheme .product-icon .fa-circle { color: var(--sm-soft) !important; }
.smtheme .product-icon .fa-inverse { color: var(--sm-brand-2) !important; }
.smtheme .product-status-text { color: #fff !important; }
/* Product info column: <h4> label + plain value — vertical rhythm */
.smtheme #tabOverview .col-md-6 h4,
.smtheme .product-details .col-md-6 h4 { margin: 16px 0 3px !important; color: var(--sm-ink) !important; font-size: 16px; }
.smtheme #tabOverview .col-md-6 h4:first-child,
.smtheme .product-details .col-md-6 h4:first-child { margin-top: 0 !important; }
.smtheme #tabOverview .col-md-6.text-center { padding: 6px 10px; }

/* =====================================================================
   33) SPACING / PADDING / ALIGNMENT AUDIT FIXES  (spacing only)
   Consolidated from per-page audit. Scale: card pad 22-24px,
   section margins 24px, form-group 18px, table cells 14/18px,
   icon-text gap 8px, control height 40/36px.
   ===================================================================== */

/* ---- (1) GLOBAL LAYOUT / CONTENT RHYTHM -------------------------- */
/* .content already = padding:30px; gap:26px (good). Just tame the
   oversized breadcrumb dead-zone and kill stray top margins. [MED] */
.smtheme .content > *:first-child { margin-top: 0 !important; }
.smtheme .content .breadcrumb { margin: 0 0 4px !important; }
/* belt-and-suspenders against any child that forces sideways scroll */
.smtheme .content, .smtheme .content .dataTables_wrapper { box-sizing: border-box; max-width: 100%; }

/* ---- (2) CARDS / PANELS ----------------------------------------- */
/* Equalize inner padding (fixes top<bottom and left>right insets on
   Edit Account + everywhere). [MED] */
.smtheme .card-body, .smtheme .panel-body { padding: 24px !important; }
/* Consistent gap when cards are stacked inside a wrapper that ISN'T a
   flex .content child (Edit Account panels sat ~12px apart). If your
   cards ARE direct .content children the gap:26px already spaces them —
   then delete this rule to avoid 26+24 doubling. [HIGH] */
.smtheme .content form .card,
.smtheme .content .row [class*="col"] > .card,
.smtheme .content .row [class*="col"] > .panel { margin-bottom: 24px; }
/* Kill double-gutter on a card nested inside a panel (Recommended/OX). [MED] */
.smtheme .panel-body > .card { margin: 0; box-shadow: none; }
.smtheme .panel-body > .card > .card-body { padding: 20px !important; }

/* ---- (3) SECTION HEADINGS & VERTICAL RHYTHM --------------------- */
/* Give section titles breathing room above/below. [MED] */
.smtheme .content .clientareabordertitle,
.smtheme .invoice-container h1 { margin: 24px 0 16px; }
.smtheme .content > .clientareabordertitle:first-child { margin-top: 0; }
.smtheme .invoice-container hr { margin: 16px 0 24px; }
/* Icon glued to heading text -> 8px gap (also covers alert/list titles). [HIGH] */
.smtheme .clientareabordertitle i,
.smtheme .clientareabordertitle svg { margin-right: 8px; }

/* ---- (4) TABLES / DATATABLES ------------------------------------ */
/* Comfortable cell rhythm + real left/right gutters (all list pages). [HIGH] */
.smtheme .content .table-list th, .smtheme .content .table-list td,
.smtheme .content table.table th, .smtheme .content table.table td { padding: 14px 18px; }
.smtheme .content .table-list th:first-child,
.smtheme .content .table-list td:first-child { padding-left: 20px; }
.smtheme .content .table-list th:last-child,
.smtheme .content .table-list td:last-child { padding-right: 20px; text-align: right; }
/* First-column icon spacing so lock/checkbox don't jam the name, and
   rows without an icon still read aligned (Products/Domains zig-zag). [MED] */
.smtheme .content .table-list td:first-child i,
.smtheme .content .table-list td:first-child .lock-icon { margin-right: 8px; }
.smtheme .content .table-list td:first-child input[type="checkbox"] { margin-right: 12px; }
/* Sort arrow: keep an inset off the border + reserve label space so it
   never sits flush to the edge (all list pages). [MED] */
.smtheme table.dataTable thead th, .smtheme .table-list thead th { position: relative; padding-right: 26px; }
.smtheme table.dataTable thead .sorting::after,
.smtheme table.dataTable thead .sorting_asc::after,
.smtheme table.dataTable thead .sorting_desc::after,
.smtheme table.dataTable thead .sorting::before,
.smtheme table.dataTable thead .sorting_asc::before,
.smtheme table.dataTable thead .sorting_desc::before { right: 10px !important; }

@media (min-width: 768px) {
  /* Wrap the whole DataTables block in one glass card so the info line,
     search, table and pager share a gutter instead of floating on the
     page (Products/Invoices/Tickets/Domains). [HIGH] */
  .smtheme .content .dataTables_wrapper {
    background: var(--sm-card);
    border: 1px solid var(--sm-line);
    border-radius: 16px;
    padding: 18px 22px;
  }
  /* neutralize the inner table's own frame so we don't double-box */
  .smtheme .content .dataTables_wrapper > .table-responsive,
  .smtheme .content .dataTables_wrapper table.table-list { border: 0; background: transparent; margin: 0; }

  /* Top controls: vertically center info text with the search box. [HIGH] */
  .smtheme .dataTables_wrapper .dataTables_info,
  .smtheme .dataTables_wrapper .dataTables_filter { display: flex; align-items: center; margin: 0; }
  .smtheme .dataTables_filter label { display: flex; align-items: center; gap: 8px; margin: 0; }
  /* Normalize the search field: real height, centered glyph, left inset. [HIGH] */
  .smtheme .dataTables_filter input.form-control {
    height: 40px; padding: 8px 14px; line-height: 1.2; max-width: 300px;
  }
  /* Bottom controls on one aligned baseline with breathing room. [MED] */
  .smtheme .dataTables_length, .smtheme .dataTables_paginate { margin-top: 16px; display: flex; align-items: center; }
  .smtheme .dataTables_paginate { justify-content: flex-end; }
}

/* Length "Show [10] entries": even gaps + roomy select. [MED] */
.smtheme .dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.smtheme .dataTables_length select.form-control { height: 36px; padding: 4px 10px; }
/* Pager buttons: separate them so they stop reading as one welded bar. [MED] */
.smtheme .dataTables_paginate .paginate_button { margin-left: 6px; border-radius: 8px; }
.smtheme .dataTables_paginate .paginate_button:first-child { margin-left: 0; }

/* ---- Invoice ledger/items parity + actions ---------------------- */
/* Match cell insets between the Items card and the bare Ledger. [HIGH] */
.smtheme .invoice-container .table td, .smtheme .invoice-container .table th,
.smtheme .invoice-container .invoice-items td, .smtheme .invoice-container .invoice-items th { padding: 12px 20px; }
.smtheme .invoice-container .table td:last-child,
.smtheme .invoice-container .table th:last-child { text-align: right; }
/* Print/Download were a cramped blob in the corner. [HIGH] */
.smtheme .invoice-container .invoice-actions,
.smtheme .invoice-container .text-right.buttons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.smtheme .invoice-container .btn, .smtheme .invoice-container .btn-pill { padding: 8px 16px; }
/* Even out the UNPAID / Due Date / Reference stack. [MED] */
.smtheme .invoice-header .text-right > * { margin: 0 0 10px 0; }

/* ---- (5) FORMS -------------------------------------------------- */
/* Consistent field rhythm + label-to-input grouping. [HIGH] */
.smtheme .content .form-group { margin-bottom: 18px; }
.smtheme .content .form-group label,
.smtheme .content .control-label { margin-bottom: 8px; display: inline-block; }
/* Checkbox lists (Email Preferences): un-glue box from label, add row gap. [HIGH] */
.smtheme .content .form-group.checkbox,
.smtheme .content .checkbox label,
.smtheme .content .email-preferences label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; line-height: 1.6; }
.smtheme .content .checkbox input[type="checkbox"] { margin: 0; }

/* ---- (6) BUTTONS ------------------------------------------------ */
/* Icon glued to button label -> 8px gap (skip icon-only buttons). [HIGH] */
.smtheme .btn i:not(:only-child), .smtheme .btn svg:not(:only-child) { margin-right: 8px; }
/* Un-weld grouped/toolbar buttons into distinct pills with real gaps
   (Domains toolbar; overrides Bootstrap's negative margins). [HIGH] */
.smtheme .btn-group, .smtheme .btn-toolbar { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.smtheme .btn-group > .btn { margin-left: 0 !important; border-radius: 12px !important; }
.smtheme .btn-group > .btn-pill { border-radius: 999px !important; }

/* ---- (7) DASHBOARD WIDGETS -------------------------------------- */
/* Stat cards: center the icon+number+label group so the tall card has
   no dead void; tidy internal gap. [HIGH] */
.smtheme .stat { display: flex; flex-direction: column; justify-content: center; padding: 22px; }
.smtheme .stat .si { margin-bottom: 12px; }
/* Welcome banner: vertically center the clock instead of pinning it top. [HIGH] */
.smtheme .welcome .clock { top: 50%; transform: translateY(-50%); }
/* Feature lists: icon-to-text gap + row rhythm (dashboard + product). [MED] */
.smtheme .feature-list li, .smtheme .product-features-list li {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; line-height: 1.6;
}
/* Sidebar links already flex+gap:13px — just guarantee no icon collision. [LOW] */
.smtheme .side-link .ic { margin-right: 0; }

/* ---- (8) MOBILE (<768px) ---------------------------------------- */
/* §31 already stacks rows into cards & full-widths the search. The card
   wrapper above is desktop-gated so mobile rows don't double-inset.
   Small touches only: */
@media (max-width: 767px) {
  .smtheme .content .clientareabordertitle { margin: 16px 0 12px; }
  .smtheme .stats { gap: 14px; }
  .smtheme .btn-group, .smtheme .btn-toolbar { width: 100%; }
  .smtheme .btn-group > .btn { flex: 1 1 auto; }        /* toolbar buttons share width instead of crowding */
  .smtheme .invoice-container .invoice-actions { justify-content: stretch; }
}

/* ================================================================
   §34  PASSWORD-RESET / AUTH FLOW  (email · security · change)
   The reset flow now renders inside the same centered .authx-card as
   the login page. These rules dress the reset-only elements so they
   match the login aesthetic (no stray Bootstrap input-group boxes).
   ================================================================ */
/* Alerts (error / success / logged-in notice) sit above the form. */
.authx-card .alert { margin-top: 22px; margin-bottom: 0; text-align: center; border-radius: 14px; }
.authx-card .alert + h1 { margin-top: 26px; }

/* Submit pill: match login button + centre the label & arrow. Also make
   the disabled state (password-strength gate) read as inactive. */
.authx form .btn-pill { margin-top: 4px; }
.authx form input.btn-pill { text-align: center; }
.btn-pill:disabled, .btn-pill[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.35); box-shadow: none; }
.authx .btn-pill .ic-sm { width: 18px; height: 18px; }

/* Security-question label above its answer field. */
.authx .sec-q { display: block; color: var(--d-ink); font-weight: 600; font-size: 14.5px;
  line-height: 1.5; margin: 2px 2px 2px; }

/* Captcha. Three modes render here, all centred inside the card:
   invisible reCAPTCHA (nothing visible), reCAPTCHA v2 checkbox, and the
   WHMCS default image captcha (image + code box). */
.authx-captcha { display: flex; justify-content: center; margin: 2px 0; }
.authx-captcha > .row, .authx-captcha .col-md-8 { margin: 0; padding: 0; width: 100%; max-width: 100%; }
.authx-captcha .recaptcha-container, .authx-captcha .g-recaptcha { margin: 0 auto; }
/* Default image captcha: instruction on top, image + code box centred as a pair. */
.authx-captcha #default-captcha-domainchecker { display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 10px; margin: 0; }
.authx-captcha #default-captcha-domainchecker p { flex: 0 0 100%; text-align: center;
  color: var(--d-muted); font-size: 13px; line-height: 1.5; margin: 0 0 4px; }
.authx-captcha #default-captcha-domainchecker .col-6,
.authx-captcha #default-captcha-domainchecker .captchaimage {
  flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
.authx-captcha #inputCaptchaImage { display: block; border-radius: 8px; height: 44px; }
.authx-captcha #inputCaptcha { width: 150px; text-align: center; letter-spacing: 3px;
  background: rgba(255,255,255,.04); border: 1px solid var(--d-line);
  color: var(--d-ink); border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.authx-captcha #inputCaptcha:focus { outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft); }

/* Password-strength meter inside the card. */
.authx .pwstrength-wrap { margin-top: -4px; }
.authx .pwstrength-wrap .progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,.06);
  overflow: hidden; margin: 6px 0 14px; }
.authx .pwstrength-wrap .progress-bar { height: 100%; transition: width .2s; }
.authx .pwstrength-wrap .alert { margin-top: 0; text-align: left; }
.authx #inputNewPassword2Msg .form-text { color: var(--sm-danger); font-size: 13.5px; margin: -6px 2px 4px; }
/* Password-strength validation ring on the field. */
.authx-input input.is-invalid { border-color: var(--sm-danger); }
.authx-input input.is-valid { border-color: var(--sm-success); }
.authx-input input.is-warning { border-color: var(--sm-warning); }



/* ================================================================
   §35  LOGIN — visible "Create account" button
   ================================================================ */
.authx-sep { display: flex; align-items: center; text-align: center; gap: 12px;
  margin: 24px 0 14px; color: var(--d-muted); font-size: 13px; }
.authx-sep::before, .authx-sep::after { content: ""; flex: 1; height: 1px; background: var(--d-line); }
.authx-create { display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 20px; border-radius: 999px; box-sizing: border-box;
  border: 1px solid var(--brand); color: var(--brand); background: transparent;
  font-family: var(--font-ui); font-weight: 700; font-size: 15px; line-height: 1;
  text-decoration: none; transition: .15s; }
.authx-create:hover { background: var(--sm-soft, rgba(43,182,218,.12)); color: var(--cyan);
  border-color: var(--cyan); }
.authx-create .ic-sm { width: 18px; height: 18px; }

/* ================================================================
   §36  Free-trial "Upgrade / Setup Guide" custom field
   Some installs inject this notice with custom CSS that absolutely-
   positions the two buttons, so they overlap. Force a clean, robust
   2-up layout (stacks on mobile) regardless of that CSS.
   ================================================================ */
.smtheme .new_custom_field { display: flex !important; flex-wrap: wrap; gap: 12px;
  align-items: stretch; position: static !important; text-align: left; }
.smtheme .new_custom_field > p { flex: 0 0 100%; max-width: 100%; margin: 0 0 6px; }
.smtheme .new_custom_field > .col-sm-6,
.smtheme .new_custom_field > [class*="col-"] {
  position: static !important; left: auto !important; top: auto !important;
  transform: none !important; float: none !important;
  flex: 1 1 200px; max-width: none; width: auto; padding: 0 !important; margin: 0 !important; }
.smtheme .new_custom_field > .col-sm-6 > a { display: block !important; width: 100%; text-decoration: none; }
.smtheme .new_custom_field .btn-block { display: block !important; width: 100% !important;
  position: static !important; margin: 0 !important; }
@media (max-width: 575px) { .smtheme .new_custom_field > .col-sm-6 { flex: 0 0 100%; } }