/* ── IVO v4 theme-responsive skin for WHMCS (Nexus) content ──────────────
   Light by default; dark when the navbar light/dark toggle sets body[data-mode=dark].
   Scoped to #main-body + breadcrumb + modals + the chrome wrapper. */

:root,body[data-mode="dark"]{
  --w-bg:#0e1014; --w-bg2:#171a20; --w-panel:#181b22; --w-panel2:#111a2c;
  --w-line:#2b303a; --w-line2:#242935; --w-ink:#e7eaf0; --w-ink2:#b2b9c6; --w-ink3:#8b93a1;
  --w-acc:#2563eb; --w-acc-deep:#60a5fa; --w-acc-bg:rgba(37,99,235,.20);
  --w-shadow:0 10px 30px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.4);
}
body{background:var(--w-bg) !important;transition:background .2s}
section#main-body,#main-body{background:var(--w-bg) !important;padding:34px 0 80px;color:var(--w-ink);font-family:var(--w-font)}
#main-body,#main-body p,#main-body span,#main-body div,#main-body td,#main-body th,#main-body li,#main-body dt,#main-body dd,#main-body label,#main-body small,#main-body strong,#main-body b{color:var(--w-ink)}
#main-body .text-muted,#main-body .text-secondary,#main-body .help-block,#main-body .form-text{color:var(--w-ink3)!important}
#main-body h1,#main-body h2,#main-body h3,#main-body h4,#main-body h5,#main-body .h1,#main-body .h2,#main-body .h3{color:var(--w-ink);font-family:var(--w-font);letter-spacing:-.02em}
#main-body a{color:var(--w-acc)}#main-body a:hover{color:var(--w-acc-deep)}#main-body hr{border-color:var(--w-line)}
.master-breadcrumb{background:transparent;border:0;padding-top:18px}
.master-breadcrumb .breadcrumb,.master-breadcrumb a,.master-breadcrumb li,.master-breadcrumb .active{background:transparent;color:var(--w-ink3)!important;font-size:13px}
.master-breadcrumb a{color:var(--w-ink2)!important}

#main-body .card,#main-body .panel,#main-body .well,#main-body .list-group,#main-body .tile,#main-body a.tile,
#main-body .promo-container,#main-body .promo-banner,#main-body .order-summary,#main-body .panel-sidebar{
  background:var(--w-panel)!important;border:1px solid var(--w-line)!important;border-radius:var(--w-r)!important}
#main-body .card-header,#main-body .panel-heading,#main-body .panel-title{background:transparent!important;border-color:var(--w-line)!important;color:var(--w-ink)!important;font-weight:680;font-size:15px}
#main-body .card-footer,#main-body .panel-footer{background:var(--w-panel2)!important;border-color:var(--w-line)!important}
#main-body .bg-white,#main-body .bg-light{background:var(--w-panel)!important}
#main-body .tile *,#main-body .promo-banner h1,#main-body .promo-banner h2,#main-body .promo-banner h3,#main-body .promo-banner p,#main-body .promo-banner span,#main-body .promo-banner div{color:var(--w-ink)!important}

#main-body .table{background:transparent;color:var(--w-ink)}
#main-body .table th,#main-body .table td{border-color:var(--w-line)!important;vertical-align:middle}
#main-body .table thead th{border-bottom:1px solid var(--w-line2)!important;border-top:0;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--w-ink3)!important;font-weight:680}
#main-body .table-hover tbody tr:hover,#main-body .table-hover tbody tr:hover td{background:var(--w-acc-bg)!important}

#main-body .form-control,#main-body .custom-select,#main-body select,#main-body textarea,#main-body input[type=text],#main-body input[type=email],#main-body input[type=password],#main-body input[type=number],#main-body input[type=tel],#main-body input[type=search]{
  background:var(--w-input,var(--w-panel2))!important;border:1px solid var(--w-line2)!important;color:var(--w-ink)!important;border-radius:12px}
#main-body .form-control::placeholder{color:var(--w-ink3)}
#main-body .form-control:focus,#main-body select:focus,#main-body textarea:focus{border-color:var(--w-acc)!important;box-shadow:0 0 0 3px var(--w-acc-bg)!important}
#main-body .input-group-text{background:var(--w-bg2)!important;border:1px solid var(--w-line2)!important;color:var(--w-ink2)!important;border-radius:var(--w-r-sm)}

#main-body .btn{border-radius:var(--w-r-sm);font-weight:600;font-family:var(--w-font);letter-spacing:-.01em;padding:.5rem 1.05rem;transition:.16s}
#main-body .btn-primary,#main-body .btn-success,#main-body .btn-info{background:var(--w-acc)!important;border-color:var(--w-acc)!important;color:#fff!important}
#main-body .btn-primary:hover,#main-body .btn-success:hover{background:var(--w-acc-deep)!important;border-color:var(--w-acc-deep)!important}
#main-body .btn-default,#main-body .btn-secondary,#main-body .btn-outline-light,#main-body .btn-light{background:var(--w-panel2)!important;border:1px solid var(--w-line2)!important;color:var(--w-ink)!important}
#main-body .btn-default:hover,#main-body .btn-secondary:hover{background:var(--w-line)!important}

#main-body .sidebar .list-group-item,#main-body .panel-sidebar .list-group-item,#main-body .sidebar a.list-group-item{background:transparent!important;border:0!important;color:var(--w-ink2)!important;border-radius:var(--w-r-sm);padding:9px 12px;font-weight:500;font-size:14px}
#main-body .sidebar .list-group-item:hover{background:var(--w-panel2)!important;color:var(--w-ink)!important}
#main-body .sidebar .list-group-item.active,#main-body .sidebar .active>a,#main-body .panel-sidebar .active>a{background:var(--w-acc-bg)!important;color:var(--w-acc-deep)!important;border:0!important;font-weight:600}
#main-body .list-group-item{background:var(--w-panel)!important;border-color:var(--w-line)!important;color:var(--w-ink)!important}

#main-body .nav-tabs{border-bottom:1px solid var(--w-line)}
#main-body .nav-tabs .nav-link,#main-body .nav-tabs>li>a{border:0!important;background:transparent!important;color:var(--w-ink3)!important;font-weight:600;border-bottom:2px solid transparent!important}
#main-body .nav-tabs .nav-link.active,#main-body .nav-tabs>li.active>a{color:var(--w-acc)!important;background:transparent!important;border-bottom:2px solid var(--w-acc)!important}

#main-body .alert{border-radius:var(--w-r-sm);border:1px solid var(--w-line);background:var(--w-panel)!important;color:var(--w-ink)}
#main-body .badge,#main-body .label{font-weight:600;border-radius:999px}#main-body .badge-primary{background:var(--w-acc)!important}
#main-body .progress{background:var(--w-bg2)!important}#main-body .progress-bar{background:var(--w-acc)!important}
.modal-content{background:var(--w-panel)!important;border:1px solid var(--w-line)!important;color:var(--w-ink)}
.modal-header,.modal-footer{border-color:var(--w-line)!important}.modal-title{color:var(--w-ink)!important}

/* let nav mega-menu dropdowns escape the chrome wrapper + sit above the content */
#ivo-chrome-top{overflow:visible !important;position:relative !important;z-index:500 !important}

/* mobile menu drawer - themed, clean hover-pill nav + compact CTA row */
@media(max-width:980px){
  /* tokens (light default; dark + accent variants below) */
  .m-mobile{--mm-ink:#1f2227;--mm-ink2:#8a8374;--mm-line:rgba(15,18,22,.10);--mm-surf:#f3f0ea;--mm-acc:#ff5a36;--mm-soft:rgba(255,90,54,.12);
    background:#fbfbf9 !important;gap:1px !important;padding:16px 14px 34px !important}
  html[data-mode="dark"] .m-mobile,html.lagom-dark-mode .m-mobile{--mm-ink:#eef0f5;--mm-ink2:#8a8a94;--mm-line:rgba(255,255,255,.10);--mm-surf:#191620;
    background:#0f0d12 !important}
  html[data-accent="blue"] .m-mobile,body[data-accent="blue"] .m-mobile{--mm-acc:#5b8cff;--mm-soft:rgba(91,140,255,.14)}

  /* nav links: hover-pill, no hairline separators */
  .m-mobile a:not(.ivo-btn){display:flex !important;align-items:center;gap:10px;padding:11px 12px !important;font-size:15px !important;font-weight:600 !important;color:var(--mm-ink) !important;border-bottom:0 !important;border-radius:11px !important;transition:background .15s,color .15s}
  .m-mobile a:not(.ivo-btn):hover,.m-mobile a:not(.ivo-btn):active{background:var(--mm-soft) !important;color:var(--mm-acc) !important}
  .m-mobile .m-mob-h{color:var(--mm-ink2) !important;font-size:11px !important;font-weight:800 !important;letter-spacing:.13em !important;text-transform:uppercase !important;padding:16px 12px 5px !important;margin-top:4px}

  /* CTA row: compact square toggles + flexible primary button */
  .m-mobile .m-mobile-cta{display:flex !important;grid-template-columns:none !important;gap:9px !important;align-items:center;flex-wrap:wrap;margin-bottom:12px !important}
  .m-mobile .m-mobile-cta .m-accent,.m-mobile .m-mobile-cta .m-theme{height:46px !important;width:46px !important;min-width:46px !important;flex:none !important;margin:0 !important;padding:0 !important;border-radius:12px !important;display:inline-flex !important;align-items:center;justify-content:center;background:var(--mm-surf) !important;border:1px solid var(--mm-line) !important;color:var(--mm-ink) !important}
  .m-mobile .m-mobile-cta .m-theme svg,.m-mobile .m-mobile-cta .m-accent svg{stroke:var(--mm-ink) !important;color:var(--mm-ink) !important;width:18px;height:18px}
  .m-mobile .m-mobile-cta .m-accent .m-accent-dot{width:16px !important;height:16px !important;border-radius:50% !important;background:var(--mm-acc) !important;box-shadow:0 0 0 3px var(--mm-soft)}
  .m-mobile .m-mobile-cta .ivo-btn{flex:1 1 auto !important;min-width:130px !important;height:46px !important;margin:0 !important;border-radius:12px !important;font-size:14px;font-weight:700 !important;display:inline-flex !important;align-items:center;justify-content:center;gap:7px}
  .m-mobile .m-mobile-cta .ivo-btn-primary{background:var(--mm-acc) !important;border-color:transparent !important;color:#fff !important}
  .m-mobile .m-mobile-cta .ivo-btn:not(.ivo-btn-primary){background:var(--mm-surf) !important;border:1px solid var(--mm-line) !important;color:var(--mm-ink) !important}

  /* close button */
  .m-mobile .m-mobile-close{background:var(--mm-surf) !important;border:1px solid var(--mm-line) !important;color:var(--mm-ink) !important;border-radius:12px !important;width:46px !important;height:46px !important;min-width:46px !important;min-height:46px !important;font-size:20px !important}
}

/* Theme toggle re-enabled on clientarea 2026-07-06 (dark tokens exist below;
   pages-3.js toggleTheme now works everywhere except the ?m=ivo SPA, which
   keeps its own theme system). */

/* ── WHMCS cart / order pages: Lagom hardcodes dark colors that ignore the theme
      (Order Summary h2, cart headers, empty-cart text, Checkout btn). Force theme
      tokens so they read correctly in BOTH light and dark. (2026-06-21) ── */
#main-body #order-standard_cart,#main-body #order-standard_cart *,#main-body .order-summary,#main-body .order-summary *,#main-body .view-cart-items,#main-body .view-cart-items *,#main-body .view-cart-empty,#main-body .view-cart-empty *{color:var(--w-ink)!important}
#main-body #order-standard_cart .text-muted,#main-body .order-summary .text-muted,#main-body #order-standard_cart small{color:var(--w-ink3,var(--w-ink2))!important}
#main-body .order-summary,#main-body .summary-container,#main-body .view-cart-empty,#main-body .cart-panel,#main-body .panel-sidebar{background:var(--w-panel)!important;border-color:var(--w-line)!important}
#main-body .view-cart-items-header{border-color:var(--w-line)!important}
#main-body #order-standard_cart a:not(.btn),#main-body .order-summary a:not(.btn){color:var(--w-acc,var(--accent))!important}
#main-body #order-standard_cart .close{color:var(--w-ink)!important;opacity:.7;text-shadow:none}
#main-body #order-standard_cart .btn-primary,#main-body #order-standard_cart .btn-success,#main-body #order-standard_cart .btn-checkout,#main-body #order-standard_cart .btn-checkout *{color:#fff!important}

/* cart fix v2: element-specific selectors under 2-id prefix to BEAT Lagom rules like
   `body #order-standard_cart .order-summary h2` (specificity 1,1,2). Ours = 2,0,1+. */
#main-body #order-standard_cart h1,#main-body #order-standard_cart h2,#main-body #order-standard_cart h3,#main-body #order-standard_cart h4,#main-body #order-standard_cart h5,#main-body #order-standard_cart p,#main-body #order-standard_cart span,#main-body #order-standard_cart div,#main-body #order-standard_cart td,#main-body #order-standard_cart th,#main-body #order-standard_cart li,#main-body #order-standard_cart label,#main-body #order-standard_cart strong,#main-body #order-standard_cart b,#main-body #order-standard_cart h2.font-size-30{color:var(--w-ink)!important}
#main-body #order-standard_cart .text-muted,#main-body #order-standard_cart small,#main-body #order-standard_cart .summary-item-name{color:var(--w-ink3,var(--w-ink2))!important}
#main-body #order-standard_cart a:not(.btn){color:var(--w-acc,var(--accent))!important}
#main-body #order-standard_cart .btn-success,#main-body #order-standard_cart .btn-primary,#main-body #order-standard_cart a.btn-checkout{color:#fff!important}
#main-body #order-standard_cart a.btn-link,#main-body #order-standard_cart a.btn-continue-shopping,#main-body #order-standard_cart .btn-continue-shopping{color:var(--w-ink)!important}

/* ============================================================================
   DARK/LIGHT CONTRAST SWEEP (2026-06-21): WHMCS-native pages that hardcode
   colors which ignore the theme. Force --w-* tokens, high specificity to beat
   Lagom. Covers: store/order product cards, active list-group/pagination,
   left-rail active item, native selects.
   ============================================================================ */
/* Store / product-order pages (#products .product cards) */
#main-body #products .product,#main-body #products .product header,#main-body #products .product footer,#main-body #products .product h1,#main-body #products .product h2,#main-body #products .product h3,#main-body #products .product p,#main-body #products .product span,#main-body #products .product li,#main-body #products .product div,#main-body #products .product .price,#main-body #products .product .product-desc,#main-body #products .product .feature-value{color:var(--w-ink)!important}
#main-body #products .product .qty,#main-body #products .product small,#main-body #products .product .text-muted,#main-body #products .product .product-desc small{color:var(--w-ink3,var(--w-ink2))!important}
#main-body #products .product,#main-body #products .product .panel,#main-body #products .product>div{background:var(--w-panel)!important;border-color:var(--w-line)!important}
#main-body #products .product header,#main-body #products .product footer{background:transparent!important;border-color:var(--w-line)!important}
#main-body #products .product .btn,#main-body #products .product button.btn,#main-body #products .product .btn-primary,#main-body #products .product .btn-success{color:#fff!important}
#main-body #products .product .close{color:var(--w-ink)!important;opacity:.7;text-shadow:none}
/* Active list-group items (WHMCS side nav / current page) */
#main-body .list-group-item.active,#main-body a.list-group-item-action.active{background:var(--accent-bg,rgba(91,140,255,.14))!important;color:var(--w-ink)!important;border-color:var(--w-line)!important}
/* Pagination active = white on accent */
#main-body .page-item.active .page-link{color:#fff!important;background:var(--accent,#5b8cff)!important;border-color:var(--accent,#5b8cff)!important}
/* native select options: keep on-theme where the OS honours it */
#main-body select.form-control option,#main-body .ivo-select option,#main-body select option{background:var(--w-bg2,#1b1f27)!important;color:var(--w-ink)!important}
/* left rail active item: derive bg from --accent so it never mismatches the accent text */
.ca-side-a.on,.ca-side .ca-side-a.on{background:color-mix(in srgb,var(--accent,#5b8cff) 16%,transparent)!important;color:var(--accent,#5b8cff)!important}
.ca-side-a.on svg,.ca-side-a.on i{color:var(--accent,#5b8cff)!important;opacity:1}

/* sweep cont.: close buttons + ghost/default small buttons anywhere in content
   (store quick-add etc.) - keep filled buttons untouched. */
#main-body .close{color:var(--w-ink)!important;opacity:.7;text-shadow:none}
#main-body .btn-sm:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-info):not(.btn-warning):not(.btn-checkout),#main-body .btn-default:not(.btn-primary){color:var(--w-ink)!important}
#main-body .list-group-item-action.active{color:var(--w-ink)!important}

/* sweep r2: WHMCS status labels (invoice/quote) hardcode bg/text combos that
   clash with the theme (Refunded white-on-yellow; Delivered dark-on-dark).
   Give the generic status badges a neutral always-readable pill; semantic
   .label-success/.label-danger etc. keep their tinted treatment elsewhere. */
#main-body .label.status,#main-body span.textblack,#main-body .invoice-status{background:var(--w-panel2,var(--w-bg2,rgba(127,127,127,.16)))!important;color:var(--w-ink)!important;border:1px solid var(--w-line)!important;text-shadow:none!important}
/* native selects: readable value + options in dark */
#main-body select,#main-body select.form-control,#main-body .custom-select{color:var(--w-ink)!important;background-color:var(--w-bg2,var(--bg-2))!important}
#main-body select option,#main-body .custom-select option{background:var(--w-bg2,#1b1f27)!important;color:var(--w-ink)!important}
/* recommended-promo close + faint pagination text: ensure visible */
#main-body .ivo-rec-close{color:var(--w-ink2,var(--w-ink))!important}