/* ====================================================================
   CentraleWeb — WHMCS Custom Theme Override
   Dark theme matching centraleweb.ca public site
   Parent: Twenty-One (Bootstrap 4)
   ==================================================================== */

/* ============================
   1. CSS VARIABLES / ROOT
   ============================ */
:root {
  --cw-bg: #061623;
  --cw-bg-soft: #08263d;
  --cw-bg-elevated: rgba(255,255,255,0.05);
  --cw-card: rgba(8, 38, 61, 0.78);
  --cw-text: #ffffff;
  --cw-muted: #a8b7c7;
  --cw-line: rgba(255,255,255,0.1);
  --cw-accent: #f4ab10;
  --cw-accent-soft: rgba(244,171,16,0.14);
  --cw-accent-text: #062743;
  --cw-radius: 18px;
  --cw-shadow: 0 20px 60px rgba(0,0,0,.25);
  --cw-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Bootstrap overrides */
  --primary: #f4ab10 !important;
  --secondary: #08263d !important;
  --light: #0c3b60 !important;
  --dark: #061623 !important;
}

/* ============================
   2. GLOBAL RESET
   ============================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  border-color: var(--cw-line);
}

body,
body.primary-bg-color {
  font-family: var(--cw-font) !important;
  background: var(--cw-bg) !important;
  background-image: radial-gradient(circle at top left, rgba(8,66,108,.55), transparent 28%), radial-gradient(circle at top right, rgba(244,171,16,.12), transparent 22%) !important;
  background-attachment: fixed !important;
  color: var(--cw-text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Kill ALL white/light backgrounds globally */
.primary-bg-color,
.bg-white,
.bg-light,
.bg-body {
  background-color: transparent !important;
}

a {
  color: var(--cw-accent);
  transition: color .2s ease;
}
a:hover {
  color: #ffd166;
  text-decoration: none;
}

::selection {
  background: var(--cw-accent);
  color: var(--cw-accent-text);
}

/* ============================
   3. HEADER / NAVBAR
   ============================ */

/* Kill any white background on header elements */
#header,
#header .header,
header,
header.header {
  background: transparent !important;
}

/* Top bar (logged in) */
#header .topbar {
  background: rgba(4, 17, 27, 0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cw-line) !important;
  color: var(--cw-muted);
}
#header .topbar .btn {
  color: var(--cw-muted) !important;
  background: transparent !important;
}
#header .topbar .btn:hover {
  color: var(--cw-text) !important;
}
#header .topbar .input-group-text {
  background: transparent !important;
  border: none !important;
  color: var(--cw-muted);
}
#header .topbar .btn-active-client {
  color: var(--cw-accent) !important;
  font-weight: 600;
}
#header .topbar .btn-return-to-admin {
  color: #28a745 !important;
}

/* Main navbar */
.navbar,
.navbar.navbar-light,
#header .navbar {
  background: rgba(6, 22, 35, 0.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cw-line) !important;
}

/* Fix white squares on ALL navbar elements */
.navbar .nav-link,
.navbar .nav-item,
.navbar .btn,
.navbar .cart-btn,
.navbar a.nav-link,
a.nav-link.cart-btn,
.navbar-nav .nav-link,
.navbar-nav .nav-item .nav-link {
  background: transparent !important;
  background-color: transparent !important;
}

.navbar-brand,
.navbar-brand:hover {
  color: var(--cw-text) !important;
  font-weight: 700;
  font-size: 1.2rem;
  background: transparent !important;
}
.navbar-brand .logo-img {
  max-height: 48px;
}

.main-navbar-wrapper {
  background: rgba(6, 22, 35, 0.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cw-line) !important;
}

/* Nav links */
#nav .nav-link,
.navbar-nav .nav-link,
.main-navbar-wrapper .nav-link {
  color: #d4dce4 !important;
  font-weight: 500;
  font-size: .95rem;
  transition: color .2s ease, background .2s ease;
  border-radius: 12px;
  padding: .5rem .9rem !important;
  background: transparent !important;
}
#nav .nav-link:hover,
.navbar-nav .nav-link:hover,
.main-navbar-wrapper .nav-link:hover {
  color: #fff !important;
  background: var(--cw-bg-elevated) !important;
}
#nav .nav-link.active,
.navbar-nav .nav-item.active .nav-link {
  color: var(--cw-accent) !important;
}

/* Cart button — FIX white square */
.cart-btn,
a.cart-btn,
.nav-link.cart-btn,
a.nav-link.cart-btn,
.btn.nav-link.cart-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #d4dce4 !important;
}
.cart-btn:hover {
  color: var(--cw-accent) !important;
}
.cart-btn .badge,
.cart-btn .badge-info,
#cartItemCount {
  background: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
  border-radius: 999px !important;
  font-size: .7rem;
  padding: .25rem .5rem;
}

/* Navbar toggler (mobile) */
.navbar-toggler {
  background: transparent !important;
  border-color: var(--cw-line) !important;
}
.navbar-toggler-icon,
.navbar-light .navbar-toggler-icon {
  filter: invert(1) !important;
}

/* Dropdowns in navbar */
.navbar .dropdown-menu {
  background: var(--cw-bg-soft) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  box-shadow: var(--cw-shadow) !important;
  padding: .5rem;
}
.navbar .dropdown-item {
  color: #d4dce4 !important;
  border-radius: 12px;
  padding: .6rem 1rem;
  background: transparent !important;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: var(--cw-bg-elevated) !important;
  color: #fff !important;
}
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
  background: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
}
.navbar .dropdown-divider {
  border-top-color: var(--cw-line) !important;
}

/* Search in navbar */
.navbar .search .form-control,
.navbar .search .btn-default,
.navbar .search .btn {
  background: var(--cw-bg-soft) !important;
  border-color: var(--cw-line) !important;
  color: var(--cw-text) !important;
}
.navbar .search .form-control::placeholder {
  color: var(--cw-muted);
}

/* Toolbar icons */
.navbar-nav.toolbar .nav-link {
  color: #d4dce4 !important;
  background: transparent !important;
}
.navbar-nav.toolbar .nav-link:hover {
  color: var(--cw-accent) !important;
}

/* Popover in navbar (notifications) */
.popover {
  background: var(--cw-bg-soft) !important;
  border-color: var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  box-shadow: var(--cw-shadow) !important;
}
.popover-header {
  background: rgba(255,255,255,0.04) !important;
  border-bottom-color: var(--cw-line) !important;
  color: var(--cw-text) !important;
}
.popover-body {
  color: #d3dce5 !important;
}
.bs-popover-bottom > .arrow::after,
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
  border-bottom-color: var(--cw-bg-soft) !important;
}
.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^="top"] > .arrow::after {
  border-top-color: var(--cw-bg-soft) !important;
}

/* ============================
   4. BREADCRUMB
   ============================ */
.master-breadcrumb {
  background: rgba(6, 22, 35, 0.5) !important;
  border-bottom: 1px solid var(--cw-line) !important;
  padding: .6rem 0;
}
.breadcrumb {
  background: transparent !important;
  margin: 0;
  padding: 0;
}
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--cw-muted) !important;
  font-size: .88rem;
}
.breadcrumb-item a:hover {
  color: #fff !important;
}
.breadcrumb-item.active {
  color: var(--cw-text) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,.3) !important;
}

/* ============================
   5. MAIN BODY / CONTENT
   ============================ */
#main-body {
  padding: 2rem 0 3rem;
  background: transparent !important;
}

/* All page titles */
h1, h2, h3, h4, h5, h6 {
  color: var(--cw-text) !important;
}

/* Header-lined section titles */
.header-lined {
  border-bottom-color: var(--cw-line) !important;
  margin-bottom: 1.5rem;
  padding-bottom: .8rem;
}
.header-lined h1 {
  font-weight: 700;
  font-size: 1.8rem;
}

p, li, dd, td, th, label, span {
  color: #d3dce5;
}

strong, b {
  color: var(--cw-text);
}

/* ============================
   6. CARDS & PANELS
   ============================ */
.card {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  box-shadow: var(--cw-shadow);
  color: var(--cw-text);
  transition: transform .2s ease;
}
.card:hover {
  transform: translateY(-2px);
}
.card-header {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid var(--cw-line) !important;
  color: var(--cw-text) !important;
  font-weight: 600;
}
.card-body {
  color: #d3dce5;
}
.card-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid var(--cw-line) !important;
}
.card-title {
  color: var(--cw-text) !important;
}

/* Panel (Bootstrap 3 legacy used in some WHMCS pages) */
.panel {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  box-shadow: var(--cw-shadow);
}
.panel-heading {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid var(--cw-line) !important;
  color: var(--cw-text) !important;
}
.panel-body {
  color: #d3dce5;
}
.panel-default {
  border-color: var(--cw-line) !important;
}
.panel-default > .panel-heading {
  background: rgba(255,255,255,0.04) !important;
  color: var(--cw-text) !important;
}
.panel-footer {
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid var(--cw-line) !important;
}

/* Panel surround (WHMCS client area) */
.panel-surround {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
}
.panel-surround .top-heading {
  border-bottom: 1px solid var(--cw-line) !important;
  color: var(--cw-text) !important;
  background: rgba(255,255,255,0.04) !important;
}
.panel-surround table thead th {
  background: rgba(255,255,255,0.03) !important;
}

/* ============================
   7. SIDEBAR
   ============================ */
.sidebar .list-group {
  border-radius: var(--cw-radius);
  overflow: hidden;
}
.sidebar .list-group-item {
  background: var(--cw-card) !important;
  border-color: var(--cw-line) !important;
  color: #d4dce4 !important;
  transition: .2s ease;
}
.sidebar .list-group-item:hover {
  background: var(--cw-bg-elevated) !important;
  color: #fff !important;
}
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover {
  background: var(--cw-accent) !important;
  border-color: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
}
.sidebar .list-group-item .badge {
  background: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
}
.sidebar .card {
  border-radius: var(--cw-radius) !important;
}
.sidebar .card-header {
  font-weight: 700;
  font-size: .95rem;
}

/* ============================
   8. BUTTONS
   ============================ */
.btn {
  border-radius: 14px;
  font-weight: 600;
  transition: .2s ease;
  padding: .65rem 1.2rem;
}

/* Primary */
.btn-primary,
.btn-primary:focus {
  background: var(--cw-accent) !important;
  border-color: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
  font-weight: 700;
}
.btn-primary:hover,
.btn-primary:active {
  background: #e59d0e !important;
  border-color: #e59d0e !important;
  color: var(--cw-accent-text) !important;
  filter: brightness(1.05);
}

/* Default / Secondary */
.btn-default,
.btn-secondary,
.btn-outline-secondary {
  background: transparent !important;
  border: 1px solid var(--cw-line) !important;
  color: var(--cw-text) !important;
}
.btn-default:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}

/* Success */
.btn-success {
  background: #28a745 !important;
  border-color: #28a745 !important;
  color: #fff !important;
}
.btn-success:hover {
  background: #218838 !important;
  border-color: #218838 !important;
}

/* Danger */
.btn-danger {
  background: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #fff !important;
}

/* Info */
.btn-info {
  background: #17a2b8 !important;
  border-color: #17a2b8 !important;
  color: #fff !important;
}

/* Link style */
.btn-link {
  color: var(--cw-accent) !important;
  background: transparent !important;
}
.btn-link:hover {
  color: #ffd166 !important;
}

/* ============================
   9. FORMS
   ============================ */
.form-control,
.custom-select,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"] {
  background: var(--cw-bg-soft) !important;
  border: 1px solid var(--cw-line) !important;
  color: var(--cw-text) !important;
  border-radius: 14px;
  padding: .7rem 1rem;
  transition: border-color .2s ease;
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--cw-accent) !important;
  box-shadow: 0 0 0 3px var(--cw-accent-soft) !important;
  background: var(--cw-bg-soft) !important;
  color: var(--cw-text) !important;
}
.form-control::placeholder {
  color: var(--cw-muted) !important;
}
.form-control:disabled,
.form-control[readonly] {
  background: rgba(8, 38, 61, 0.5) !important;
  color: var(--cw-muted) !important;
}

.input-group-text {
  background: var(--cw-bg-soft) !important;
  border: 1px solid var(--cw-line) !important;
  color: var(--cw-muted) !important;
}
.input-group .btn {
  border-color: var(--cw-line) !important;
}

label {
  color: #d3dce5 !important;
  font-weight: 500;
}

.custom-control-label::before {
  background-color: var(--cw-bg-soft) !important;
  border-color: var(--cw-line) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--cw-accent) !important;
  border-color: var(--cw-accent) !important;
}

/* Radio & Checkbox styled */
.form-check-input {
  background-color: var(--cw-bg-soft) !important;
  border-color: var(--cw-line) !important;
}

/* ============================
   10. TABLES
   ============================ */
.table {
  color: #d3dce5 !important;
}
.table th {
  color: var(--cw-text) !important;
  border-bottom-color: var(--cw-line) !important;
  border-top-color: var(--cw-line) !important;
  font-weight: 600;
  background: rgba(255,255,255,0.03) !important;
}
.table td {
  border-top-color: var(--cw-line) !important;
  color: #d3dce5 !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,0.02) !important;
}
.table-striped tbody tr:nth-of-type(even) {
  background: transparent !important;
}
.table-hover tbody tr:hover {
  background: rgba(244,171,16,0.06) !important;
  color: var(--cw-text) !important;
}
.table-bordered {
  border-color: var(--cw-line) !important;
}
.table-bordered th,
.table-bordered td {
  border-color: var(--cw-line) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--cw-bg-soft) !important;
  border: 1px solid var(--cw-line) !important;
  color: var(--cw-text) !important;
  border-radius: 10px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--cw-muted) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--cw-muted) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
  border-color: var(--cw-accent) !important;
}

/* ============================
   11. PAGINATION
   ============================ */
.pagination .page-link {
  background: var(--cw-bg-soft) !important;
  border-color: var(--cw-line) !important;
  color: var(--cw-muted) !important;
  border-radius: 10px !important;
  margin: 0 2px;
}
.pagination .page-link:hover {
  background: var(--cw-bg-elevated) !important;
  border-color: var(--cw-line) !important;
  color: #fff !important;
}
.pagination .page-item.active .page-link {
  background: var(--cw-accent) !important;
  border-color: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
}
.pagination .page-item.disabled .page-link {
  background: rgba(8, 38, 61, 0.4) !important;
  border-color: var(--cw-line) !important;
  color: rgba(168,183,199,0.4) !important;
}

/* ============================
   12. BADGES & ALERTS
   ============================ */

/* Badges */
.badge {
  border-radius: 999px;
  padding: .4rem .8rem;
  font-weight: 600;
  font-size: .8rem;
}
.badge-primary {
  background: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
}
.badge-info {
  background: #17a2b8 !important;
  color: #fff !important;
}
.badge-success {
  background: #28a745 !important;
  color: #fff !important;
}
.badge-warning {
  background: #ffc107 !important;
  color: #212529 !important;
}
.badge-danger {
  background: #dc3545 !important;
  color: #fff !important;
}
.badge-secondary {
  background: rgba(255,255,255,0.15) !important;
  color: var(--cw-muted) !important;
}

/* Alerts */
.alert {
  border-radius: var(--cw-radius) !important;
  border: 1px solid;
}
.alert-info {
  background: rgba(23, 162, 184, 0.12) !important;
  border-color: rgba(23, 162, 184, 0.3) !important;
  color: #7ce0f0 !important;
}
.alert-success {
  background: rgba(40, 167, 69, 0.12) !important;
  border-color: rgba(40, 167, 69, 0.3) !important;
  color: #7edd95 !important;
}
.alert-warning {
  background: rgba(255, 193, 7, 0.12) !important;
  border-color: rgba(255, 193, 7, 0.3) !important;
  color: #ffd166 !important;
}
.alert-danger {
  background: rgba(220, 53, 69, 0.12) !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
  color: #f09da6 !important;
}

/* Client alerts (notifications) */
.client-alerts li a {
  color: #d3dce5 !important;
}
.client-alerts li a:hover {
  background: var(--cw-bg-elevated) !important;
}

/* ============================
   13. MODALS
   ============================ */
.modal-content {
  background: var(--cw-bg-soft) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  color: var(--cw-text);
}
.modal-header {
  border-bottom-color: var(--cw-line) !important;
}
.modal-header .close,
.modal-header .btn-close {
  color: var(--cw-muted) !important;
  opacity: .8;
  text-shadow: none !important;
}
.modal-header .close:hover {
  color: #fff !important;
}
.modal-footer {
  border-top-color: var(--cw-line) !important;
}
.modal-title {
  color: var(--cw-text) !important;
  font-weight: 700;
}
.modal-backdrop.show {
  opacity: .7;
}

/* ============================
   14. FOOTER
   ============================ */
#footer,
.footer,
footer#footer {
  background: #04111b !important;
  border-top: 1px solid var(--cw-line) !important;
  padding: 2.5rem 0 !important;
  color: var(--cw-muted) !important;
}
#footer .nav-link,
.footer a {
  color: var(--cw-muted) !important;
}
#footer .nav-link:hover,
.footer a:hover {
  color: #fff !important;
}
#footer .copyright,
.footer p,
.footer small {
  color: rgba(168,183,199,0.6) !important;
  font-size: .88rem;
}
.footer .btn {
  color: var(--cw-muted) !important;
  background: transparent !important;
}
.footer .btn:hover {
  color: var(--cw-text) !important;
}

/* Language/currency selector in footer */
.footer select,
#footer select {
  background: var(--cw-bg-soft) !important;
  border-color: var(--cw-line) !important;
  color: var(--cw-text) !important;
  border-radius: 10px;
}

/* ============================
   15. DOMAIN SEARCH / HOMEPAGE
   ============================ */
.domain-search-container,
.domain-checker-container {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  padding: 2rem;
}
.domain-search-container .form-control {
  border-radius: 14px;
  font-size: 1.1rem;
}

/* Domain pricing table */
.domain-pricing-table th,
.domain-pricing-table td {
  color: #d3dce5 !important;
  border-color: var(--cw-line) !important;
}
.domain-pricing-table .tld-price {
  color: var(--cw-accent) !important;
  font-weight: 700;
}

/* Homepage panels */
.home-widgets .panel,
.home-widgets .card {
  background: var(--cw-card) !important;
  border-color: var(--cw-line) !important;
}

/* ============================
   16. INVOICE / BILLING
   ============================ */
.invoice-container {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
}

/* Payment methods */
.payment-method {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius);
  transition: .2s ease;
}
.payment-method:hover {
  border-color: var(--cw-accent) !important;
  transform: translateY(-2px);
}

/* View invoice */
.invoice-header,
.invoice-details {
  background: var(--cw-card) !important;
  color: #d3dce5 !important;
}

/* ============================
   17. SHOPPING CART / ORDER FORM / STORE
   ============================ */
.order-summary,
.order-summary .card {
  background: var(--cw-card) !important;
  border-color: var(--cw-line) !important;
}

/* Product cards in store */
.product-group .product,
.order-form .product,
.products .product,
.product-card,
.store-product {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  color: var(--cw-text) !important;
  transition: .2s ease;
}
.product-group .product:hover,
.products .product:hover {
  transform: translateY(-2px);
  border-color: rgba(244,171,16,0.4) !important;
}
.product-group .product.featured,
.product-group .product.highlighted {
  border-color: var(--cw-accent) !important;
  background: rgba(244,171,16,0.06) !important;
}

.product .product-price,
.product .price,
.product-pricing .price,
.product-card .price {
  color: var(--cw-accent) !important;
  font-weight: 700;
  font-size: 1.5rem;
}

.product .product-name,
.product .product-title,
.product h3,
.product h4 {
  color: var(--cw-text) !important;
}

.product .product-desc,
.product .product-description,
.product p {
  color: #d3dce5 !important;
}

/* Cart steps */
.order-form .steps .step {
  color: var(--cw-muted) !important;
}
.order-form .steps .step.active {
  color: var(--cw-accent) !important;
}
.order-form .steps .step.complete {
  color: #28a745 !important;
}

/* Checkout */
.checkout-container,
.order-summary-container {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
}

.total-due-today .amount {
  color: var(--cw-accent) !important;
  font-weight: 800;
  font-size: 2rem;
}

/* Store landing page */
.landing-page,
.store-page {
  background: transparent !important;
}
.landing-page .hero,
.landing-page .hero-unit {
  background: transparent !important;
  color: var(--cw-text) !important;
}
.landing-page .hero h1,
.landing-page .hero h2,
.landing-page .hero h3,
.landing-page .hero p {
  color: var(--cw-text) !important;
}

.landing-page .product-options,
.landing-page section {
  background: transparent !important;
}

.landing-page .content-block {
  background: var(--cw-card) !important;
  color: #d3dce5 !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
}

.landing-page .feature-block {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
}

.landing-page .btn-order-now,
.landing-page .btn-cta {
  background: var(--cw-accent) !important;
  border-color: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
  border-radius: 14px;
  font-weight: 700;
}
.landing-page .btn-order-now:hover,
.landing-page .btn-cta:hover {
  filter: brightness(1.05);
}

/* MarketConnect promo blocks */
.market-connect .promo,
.mc-promo {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
}

/* Store product listing — specific WHMCS selectors */
.store-product-group,
.product-listing {
  color: var(--cw-text) !important;
}

/* ============================
   18. SUPPORT TICKETS
   ============================ */
.ticket-reply,
.ticket-message {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  margin-bottom: 1rem;
}
.ticket-reply .staff,
.ticket-reply.staff-reply {
  border-left: 3px solid var(--cw-accent) !important;
}
.ticket-reply .client,
.ticket-reply.client-reply {
  border-left: 3px solid #17a2b8 !important;
}

/* ============================
   19. KNOWLEDGEBASE
   ============================ */
.kb-categories .card,
.kb-article {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
}

/* ============================
   20. SERVICE DETAILS
   ============================ */
.service-overview .list-group-item {
  background: var(--cw-card) !important;
  border-color: var(--cw-line) !important;
  color: #d3dce5 !important;
}

/* Product status labels */
.status-active,
.label-active {
  background: rgba(40, 167, 69, 0.15) !important;
  color: #7edd95 !important;
  border-radius: 999px;
  padding: .3rem .7rem;
}
.status-pending,
.label-pending {
  background: rgba(255, 193, 7, 0.15) !important;
  color: #ffd166 !important;
  border-radius: 999px;
}
.status-suspended,
.label-suspended,
.status-terminated,
.label-terminated {
  background: rgba(220, 53, 69, 0.15) !important;
  color: #f09da6 !important;
  border-radius: 999px;
}

/* ============================
   21. ACCOUNT / PROFILE / TABS
   ============================ */
.tab-content {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-top: none !important;
  border-radius: 0 0 var(--cw-radius) var(--cw-radius) !important;
  padding: 1.5rem;
}
.nav-tabs {
  border-bottom-color: var(--cw-line) !important;
}
.nav-tabs .nav-link {
  color: var(--cw-muted) !important;
  border: 1px solid transparent !important;
  border-radius: var(--cw-radius) var(--cw-radius) 0 0 !important;
  transition: .2s ease;
  background: transparent !important;
}
.nav-tabs .nav-link:hover {
  border-color: var(--cw-line) !important;
  background: var(--cw-bg-elevated) !important;
  color: #fff !important;
}
.nav-tabs .nav-link.active {
  background: var(--cw-card) !important;
  border-color: var(--cw-line) var(--cw-line) transparent !important;
  color: var(--cw-text) !important;
  font-weight: 600;
}

/* Pills */
.nav-pills .nav-link {
  color: var(--cw-muted) !important;
  border-radius: 14px;
  background: transparent !important;
}
.nav-pills .nav-link.active {
  background: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
}

/* ============================
   22. DROPDOWNS (generic)
   ============================ */
.dropdown-menu {
  background: var(--cw-bg-soft) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  box-shadow: var(--cw-shadow) !important;
}
.dropdown-item {
  color: #d4dce4 !important;
  border-radius: 10px;
  background: transparent !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--cw-bg-elevated) !important;
  color: #fff !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
}

/* ============================
   23. TOOLTIP
   ============================ */
.tooltip-inner {
  background: var(--cw-bg-soft) !important;
  color: var(--cw-text) !important;
  border-radius: 10px;
  padding: .5rem .8rem;
}
.bs-tooltip-top .arrow::before {
  border-top-color: var(--cw-bg-soft) !important;
}
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--cw-bg-soft) !important;
}

/* ============================
   24. MISC / UTILITIES
   ============================ */

/* Progress bars */
.progress {
  background-color: rgba(255,255,255,0.08) !important;
  border-radius: 10px;
}
.progress-bar {
  background-color: var(--cw-accent) !important;
}

/* List groups */
.list-group-item {
  background: var(--cw-card) !important;
  border-color: var(--cw-line) !important;
  color: #d3dce5 !important;
}
.list-group-item.active {
  background: var(--cw-accent) !important;
  border-color: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
}

/* Well / jumbotron */
.jumbotron,
.well {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  color: #d3dce5 !important;
}

/* Horizontal rules */
hr {
  border-top-color: var(--cw-line) !important;
}

/* Text utilities */
.text-muted {
  color: var(--cw-muted) !important;
}
.text-primary {
  color: var(--cw-accent) !important;
}
.text-dark {
  color: var(--cw-text) !important;
}
.text-body {
  color: var(--cw-text) !important;
}

/* Background utilities */
.bg-white,
.bg-light {
  background: var(--cw-card) !important;
}
.bg-primary {
  background: var(--cw-accent) !important;
}
.bg-dark {
  background: var(--cw-bg) !important;
}

/* Border utilities */
.border {
  border-color: var(--cw-line) !important;
}
.border-top {
  border-top-color: var(--cw-line) !important;
}
.border-bottom {
  border-bottom-color: var(--cw-line) !important;
}

/* Shadow utility override */
.shadow,
.shadow-sm,
.shadow-lg {
  box-shadow: var(--cw-shadow) !important;
}

/* Full-page overlay */
#fullpage-overlay {
  background: rgba(6, 22, 35, 0.9) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--cw-bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

/* ============================
   25. ANNOUNCEMENTS
   ============================ */
.announcement-single,
.view-announcement {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  padding: 1.5rem;
}
.announcement-single .date,
.view-announcement .date {
  color: var(--cw-muted) !important;
}

/* ============================
   26. LOGIN PAGE
   ============================ */
.login-container,
.logincontainer {
  max-width: 480px;
  margin: 3rem auto;
}
.login-container .card,
.logincontainer .card,
.login-container .panel,
.logincontainer .panel {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}

/* ============================
   27. WHMCS SPECIFIC CATCH-ALL
   ============================ */

/* Action icons */
.action i,
.actions-btn i {
  color: var(--cw-muted) !important;
}
.action:hover i,
.actions-btn:hover i {
  color: var(--cw-accent) !important;
}

/* Quick shortcuts (cPanel/Plesk) */
.quick-shortcuts .shortcut {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  color: #d3dce5 !important;
  transition: .2s ease;
}
.quick-shortcuts .shortcut:hover {
  background: var(--cw-bg-elevated) !important;
  transform: translateY(-2px);
}
.quick-shortcuts .shortcut i {
  color: var(--cw-accent) !important;
}

/* Feature highlights */
.feature-highlights .highlight {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
}

/* Promo code */
.promo-code-input .form-control {
  border-radius: 14px 0 0 14px !important;
}
.promo-code-input .btn {
  border-radius: 0 14px 14px 0 !important;
}

/* Add funds */
.add-funds-amounts .amount-option {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: 14px;
  color: #d3dce5 !important;
}
.add-funds-amounts .amount-option.selected {
  border-color: var(--cw-accent) !important;
  background: var(--cw-accent-soft) !important;
  color: var(--cw-accent) !important;
}

/* Accordion / Collapse */
.accordion .card {
  background: var(--cw-card) !important;
  border-color: var(--cw-line) !important;
}
.accordion .card-header {
  background: rgba(255,255,255,0.04) !important;
}
.accordion .card-header .btn-link {
  color: var(--cw-text) !important;
  font-weight: 600;
}

/* Affiliates */
.affiliate-stats .stat-value {
  color: var(--cw-accent) !important;
  font-size: 2rem;
  font-weight: 800;
}

/* SSL */
.ssl-landing .card {
  background: var(--cw-card) !important;
  border-color: var(--cw-line) !important;
}

/* Domain details */
.domain-details-info .list-group-item {
  background: var(--cw-card) !important;
  border-color: var(--cw-line) !important;
  color: #d3dce5 !important;
}
.domain-details-info strong {
  color: var(--cw-text) !important;
}

/* Email view */
.email-view {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
}
.email-view .email-header {
  border-bottom: 1px solid var(--cw-line) !important;
}

/* ============================
   28. RESPONSIVE FIXES
   ============================ */
@media (max-width: 991px) {
  .main-navbar-wrapper {
    background: var(--cw-bg-soft) !important;
  }
  #mainNavbar {
    background: var(--cw-bg-soft) !important;
    border-top: 1px solid var(--cw-line);
    padding: 1rem 0;
  }
  .sidebar {
    margin-bottom: 2rem;
  }
}

@media (max-width: 767px) {
  .table-responsive {
    border-color: var(--cw-line) !important;
  }
  #main-body {
    padding: 1.5rem 0 2rem;
  }
}

/* ============================
   29. NUCLEAR WHITE-BACKGROUND KILLER
   All remaining #fff / white / light-gray backgrounds
   from twenty-one parent (theme.css, all.css, store.css, oauth.css)
   ============================ */

/* ── Global background nuke ── */
.main-content,
.content-padded,
#content,
.container-fluid,
.page-header,
.page-title,
.media,
.media-body,
.form-group,
.form-row,
.input-group,
.figure,
.embed-responsive,
section,
aside,
main,
article {
  background-color: transparent !important;
}

/* ── Twenty-One specific wrappers ── */
.client-home-panels,
.client-home-panels .panel,
.client-home-panels .card,
.home-shortcuts,
.home-shortcuts .shortcut,
.home-widget,
.home-widget .card,
.announcements-summary,
.announcements-summary .card,
.service-status,
.service-status .status-item,
.client-alerts,
.client-alerts li,
.header-bg,
.secondary-bg-color,
.sidebar-menu-container {
  background: transparent !important;
}

.client-home-panels .panel,
.client-home-panels .card,
.home-widget .card,
.announcements-summary .card {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
}

/* ── Store landing pages (store.css white backgrounds) ── */
.landing-page .container,
.landing-page .row,
.landing-page .col,
.landing-page [class*="col-"],
.store-page .container,
.store-page .row,
.store-product .card,
.store-product .card-body,
.store-product .card-header,
.store-product .card-footer,
.product-group .card,
.product-group .card-body,
.product-group .card-header {
  background: transparent !important;
}

/* Store product listing boxes */
.product-group .product .card,
.product-listing .product,
.product-listing .card,
.store-items .item,
.store-items .card {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
}

/* ── Feature highlights and content blocks ── */
.feature-highlight,
.feature-highlight .card,
.feature-highlight .panel,
.feature-highlights .card,
.feature-block,
.feature-block .card,
.feature-block .icon,
.content-block,
.content-section,
.header-section,
.pricing-section,
.promo-section,
.hero-unit,
.hero-section {
  background: transparent !important;
  color: var(--cw-text) !important;
}

/* ── SSL landing pages ── */
.ssl-landing,
.ssl-landing .container,
.ssl-landing .row,
.ssl-landing section,
.ssl-landing .features,
.ssl-landing .feature-item,
.ssl-landing .pricing,
.ssl-landing .pricing .plan,
.ssl-landing .hero-unit,
.ssl-comparison .card,
.ssl-comparison .card-body,
.ssl-comparison .card-header {
  background: transparent !important;
  color: var(--cw-text) !important;
}

.ssl-landing .plan,
.ssl-landing .pricing .card {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
}

/* ── Email / Marketplace / Website Builder / VPN landing ── */
.email-landing,
.email-landing .container,
.email-landing section,
.website-builder-landing,
.website-builder-landing .container,
.website-builder-landing section,
.vpn-landing,
.vpn-landing .container,
.vpn-landing section,
.marketplace-landing,
.marketplace-landing .container,
.marketplace-landing section,
.codeguard-landing,
.codeguard-landing .container,
.codeguard-landing section,
.sitelock-landing,
.sitelock-landing .container,
.sitelock-landing section,
.spamexperts-landing,
.spamexperts-landing .container,
.spamexperts-landing section,
.weebly-landing,
.weebly-landing .container,
.weebly-landing section,
.monitoring-landing,
.monitoring-landing .container,
.monitoring-landing section,
.xovinow-landing,
.xovinow-landing .container,
.xovinow-landing section,
.marketgoo-landing,
.marketgoo-landing .container,
.marketgoo-landing section,
.nordvpn-landing,
.nordvpn-landing .container,
.nordvpn-landing section {
  background: transparent !important;
  color: var(--cw-text) !important;
}

/* ── Pricing cards / comparison tables in store ── */
.pricing .card,
.pricing .plan,
.pricing-table .card,
.comparison-table,
.comparison-table th,
.comparison-table td,
.plan-card,
.plan-card .card-body,
.plan-card .card-header,
.plan-features li {
  background: var(--cw-card) !important;
  color: var(--cw-text) !important;
  border-color: var(--cw-line) !important;
}

.pricing .plan.featured,
.pricing .card.featured {
  border-color: var(--cw-accent) !important;
  background: rgba(244,171,16,0.06) !important;
}

/* ── OAuth pages ── */
.oauth-container,
.oauth-container .card,
.oauth-form {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  color: var(--cw-text) !important;
}

/* ── Markdown content (KB articles, announcements) ── */
.markdown-content,
.markdown-content pre,
.markdown-content code,
.markdown-content blockquote {
  background: var(--cw-bg-soft) !important;
  color: var(--cw-text) !important;
  border-color: var(--cw-line) !important;
}

/* ── Catch-all for any remaining Bootstrap white ── */
.bg-white {
  background: var(--cw-card) !important;
}
.bg-light {
  background: var(--cw-bg-elevated) !important;
}
.bg-body {
  background: transparent !important;
}

/* ── Remaining TwentyOne theme-level wrappers ── */
.wrapper,
.wrapper-content,
.content-wrapper,
.main-wrapper,
#wrapper,
#content-wrapper,
.inner-container,
.page-bg,
.body-content {
  background: transparent !important;
}

/* ── Select / option white backgrounds ── */
option,
optgroup {
  background: var(--cw-bg-soft) !important;
  color: var(--cw-text) !important;
}

/* ── Popover / typeahead / autocomplete ── */
.typeahead,
.tt-menu,
.tt-suggestion,
.twitter-typeahead .tt-menu {
  background: var(--cw-bg-soft) !important;
  border-color: var(--cw-line) !important;
  color: var(--cw-text) !important;
}
.tt-suggestion:hover {
  background: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
}

/* ── Config options / server modules ── */
.config-option-row,
.config-option,
.config-options .row,
.custom-field,
.custom-field-row {
  background: transparent !important;
  color: var(--cw-text) !important;
}

/* ── Contact / forms backgrounds ── */
.contact-form,
.contact-details,
.personal-details,
.billing-details {
  background: transparent !important;
}

/* ── Invoice print-safe but screen-dark ── */
@media screen {
  .invoice-container table,
  .invoice-container table th,
  .invoice-container table td,
  .invoice-container .header,
  .invoice-container .footer {
    background: var(--cw-card) !important;
    color: var(--cw-text) !important;
    border-color: var(--cw-line) !important;
  }
}

/* ── Remaining white via attribute selectors ── */
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: white"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: white"],
[style*="background: #ffffff"],
[style*="background-color: #ffffff"],
[style*="background: rgb(255, 255, 255)"],
[style*="background-color: rgb(255, 255, 255)"] {
  background: var(--cw-card) !important;
}

/* ── iCheck plugin overrides ── */
.iradio_square-blue,
.icheckbox_square-blue,
.icheckbox_square-green,
.iradio_square-green {
  border: 1px solid var(--cw-line) !important;
  border-radius: 4px;
}

/* ============================
   30. NAVBAR Z-INDEX & MENU FIX
   ============================ */

/* Ensure navbar stays on top */
#header,
header,
.header,
.main-navbar-wrapper,
.navbar {
  position: relative;
  z-index: 1030 !important;
}

/* Sticky navbar */
.navbar.fixed-top,
.navbar.sticky-top,
header.sticky-top,
#header.sticky-top {
  position: sticky !important;
  z-index: 1030 !important;
}

/* Dropdown menus must overlay everything */
.dropdown-menu {
  z-index: 1050 !important;
}

.navbar .dropdown-menu {
  z-index: 1050 !important;
  position: absolute !important;
}

/* Mobile collapsed menu stays on top */
.navbar-collapse {
  z-index: 1040 !important;
}

@media (max-width: 991px) {
  .navbar-collapse {
    background: var(--cw-bg-soft) !important;
    border: 1px solid var(--cw-line) !important;
    border-radius: 0 0 var(--cw-radius) var(--cw-radius) !important;
    padding: 1rem;
    position: relative;
    z-index: 1040 !important;
  }
}

/* Prevent main content from overlapping dropdowns */
#main-body,
main,
.main-content,
.content-padded {
  position: relative;
  z-index: 1 !important;
}

/* Footer stays below */
#footer,
footer {
  position: relative;
  z-index: 1 !important;
}

/* ============================
   31. DEEP TABLE & DATATABLE DARK FIX
   ============================ */

/* ── Tables — force dark on EVERYTHING ── */
table,
table.dataTable,
.table,
.table-list,
.table-condensed,
.table-bordered,
.table-responsive,
.table-responsive > .table,
.tablesorter {
  background-color: var(--cw-card) !important;
  color: var(--cw-text) !important;
  border-color: var(--cw-line) !important;
}

table thead,
table thead tr,
table thead th,
.table thead,
.table thead tr,
.table thead th,
table.dataTable thead th,
table.dataTable thead td {
  background: rgba(255,255,255,0.04) !important;
  color: var(--cw-text) !important;
  border-color: var(--cw-line) !important;
}

table tbody,
table tbody tr,
.table tbody,
.table tbody tr,
table.dataTable tbody tr {
  background: transparent !important;
  color: #d3dce5 !important;
}

table tbody td,
.table tbody td,
table.dataTable tbody td {
  background: transparent !important;
  color: #d3dce5 !important;
  border-color: var(--cw-line) !important;
}

table tbody tr:nth-child(odd),
.table tbody tr:nth-child(odd),
.table-striped tbody tr:nth-of-type(odd),
table.dataTable tbody tr:nth-child(odd) {
  background: rgba(255,255,255,0.02) !important;
}

table tbody tr:nth-child(even),
.table tbody tr:nth-child(even),
.table-striped tbody tr:nth-of-type(even),
table.dataTable tbody tr:nth-child(even) {
  background: transparent !important;
}

table tbody tr:hover,
.table tbody tr:hover,
.table-hover tbody tr:hover,
table.dataTable tbody tr:hover {
  background: rgba(244,171,16,0.06) !important;
}

table tfoot,
table tfoot tr,
table tfoot td,
table tfoot th {
  background: rgba(255,255,255,0.03) !important;
  color: var(--cw-text) !important;
  border-color: var(--cw-line) !important;
}

/* ── DataTables wrapper/container ── */
.dataTables_wrapper {
  background: transparent !important;
  color: var(--cw-text) !important;
}

.dataTables_wrapper table,
.dataTables_wrapper table.table-list,
.dataTables_wrapper table.dataTable {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.dataTables_scrollBody,
.dataTables_scrollHead,
.dataTables_scrollHead .dataTables_scrollHeadInner,
.dataTables_scrollHead table,
.dataTables_scrollBody table {
  background: var(--cw-card) !important;
  color: var(--cw-text) !important;
}

.dataTables_wrapper .row {
  background: transparent !important;
}

/* ── Panel surround tables ── */
.panel-surround table,
.panel-surround tbody,
.panel-surround tbody tr,
.panel-surround tbody td,
.panel-surround thead,
.panel-surround thead th {
  background: transparent !important;
  color: #d3dce5 !important;
  border-color: var(--cw-line) !important;
}

.panel-surround thead th {
  background: rgba(255,255,255,0.04) !important;
  color: var(--cw-text) !important;
}

/* ============================
   32. MISSING WHMCS AREA SELECTORS
   ============================ */

/* ── Main body container ── */
#main-body .container,
#main-body .container-fluid,
.content-area,
.client-area,
.body-content,
.wrapper,
.wrapper-content,
.content-wrapper,
.main-wrapper,
#wrapper,
#content-wrapper,
.inner-container {
  background: transparent !important;
}

/* ── Tab panes ── */
.tab-pane {
  background: transparent !important;
  color: var(--cw-text) !important;
}

/* ── Sidebars ── */
#Primary_Sidebar,
#Secondary_Sidebar,
.sidebar-content,
.sidebar-menu-container,
.sidebar-header {
  background: transparent !important;
}

#Primary_Sidebar .list-group-item,
#Secondary_Sidebar .list-group-item {
  background: var(--cw-card) !important;
  border-color: var(--cw-line) !important;
  color: #d4dce4 !important;
}

#Primary_Sidebar .list-group-item:hover,
#Secondary_Sidebar .list-group-item:hover {
  background: var(--cw-bg-elevated) !important;
  color: #fff !important;
}

#Primary_Sidebar .list-group-item.active,
#Secondary_Sidebar .list-group-item.active {
  background: var(--cw-accent) !important;
  border-color: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
}

/* ── Widgets ── */
.widget,
.widget .card,
.widget .panel,
.widget .widget-content {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  color: var(--cw-text) !important;
}

.widget .widget-title,
.widget .card-header,
.widget .panel-heading {
  background: rgba(255,255,255,0.04) !important;
  border-bottom: 1px solid var(--cw-line) !important;
  color: var(--cw-text) !important;
}

/* ── Service details / tabs ── */
.service-details,
.service-details .tab-content,
.service-tab,
.service-tab .tab-pane {
  background: transparent !important;
  color: var(--cw-text) !important;
}

/* ── Bootstrap card groups ── */
.card-deck,
.card-group,
.card-columns {
  background: transparent !important;
}

.card-deck .card,
.card-group .card,
.card-columns .card {
  background: var(--cw-card) !important;
  border: 1px solid var(--cw-line) !important;
}

/* ── Form elements ── */
.form-control-plaintext {
  color: var(--cw-text) !important;
  background: transparent !important;
}

.input-group-prepend,
.input-group-append {
  background: transparent !important;
}

.input-group-prepend .input-group-text,
.input-group-append .input-group-text,
.input-group-prepend .btn,
.input-group-append .btn {
  background: var(--cw-bg-soft) !important;
  border-color: var(--cw-line) !important;
  color: var(--cw-muted) !important;
}

/* ── Remaining Twenty-One specific inner elements ── */
.row,
[class*="col-"] {
  background-color: transparent !important;
}

/* EXCEPTION: elements that NEED a card background */
.card,
.panel,
.list-group-item,
.modal-content,
.popover,
.tooltip-inner,
.dropdown-menu {
  /* already styled above — this prevents the col-* rule from breaking them */
}

/* ── WHMCS admin link bar / secondary nav ── */
.secondary-navbar,
.secondary-nav,
.sub-navbar,
.nav-secondary {
  background: var(--cw-bg-soft) !important;
  border-color: var(--cw-line) !important;
}

/* ── Remaining inline backgrounds from WHMCS templates ── */
div[style*="background:#f"],
div[style*="background: #f"],
div[style*="background-color:#f"],
div[style*="background-color: #f"],
tr[style*="background:#f"],
tr[style*="background: #f"],
tr[style*="background-color:#f"],
tr[style*="background-color: #f"],
td[style*="background:#f"],
td[style*="background: #f"],
td[style*="background-color:#f"],
td[style*="background-color: #f"],
div[style*="background:#e"],
div[style*="background: #e"],
div[style*="background-color:#e"],
div[style*="background-color: #e"],
div[style*="background:#d"],
div[style*="background: #d"],
div[style*="background-color:#d"],
div[style*="background-color: #d"] {
  background: var(--cw-card) !important;
}

/* ── Force all remaining white/light text colors to light ── */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--cw-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--cw-muted) !important;
  background: transparent !important;
  border-color: var(--cw-line) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--cw-bg-elevated) !important;
  color: #fff !important;
  border-color: var(--cw-line) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--cw-accent) !important;
  color: var(--cw-accent-text) !important;
  border-color: var(--cw-accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: rgba(168,183,199,0.3) !important;
  background: transparent !important;
  border-color: var(--cw-line) !important;
}

/* DataTables sorting icons */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-color: rgba(255,255,255,0.04) !important;
}

/* ── Empty row / no records ── */
.dataTables_wrapper .dataTables_empty,
table.dataTable td.dataTables_empty {
  background: var(--cw-card) !important;
  color: var(--cw-muted) !important;
}

/* ============================
   33. HOMEPAGE & TWENTY-ONE SPECIFIC
   ============================ */

/* Tiles (home shortcuts / quick links) */
.tiles .tile {
  background-color: var(--cw-card) !important;
  border-right-color: var(--cw-line) !important;
  color: var(--cw-text) !important;
}
.tiles .tile:hover {
  background-color: var(--cw-bg-elevated) !important;
  color: var(--cw-accent) !important;
}
@media (max-width: 1199.98px) {
  .tiles div:nth-child(1) > .tile,
  .tiles div:nth-child(2) > .tile {
    border-bottom-color: var(--cw-line) !important;
  }
}

/* Promo banners */
.promo-banner,
.promo-container {
  background-color: var(--cw-card) !important;
  border-color: var(--cw-line) !important;
  color: var(--cw-text) !important;
}

/* Home domain search input wrapper */
home-domain-search .input-group-wrapper,
.home-domain-search .input-group-wrapper,
.input-group-wrapper {
  background-color: var(--cw-bg-soft) !important;
  border-color: var(--cw-line) !important;
}

/* Action icon buttons (home page quick actions grid) */
.action-icon-btns a {
  background-color: var(--cw-card) !important;
  color: var(--cw-muted) !important;
  border: 1px solid var(--cw-line) !important;
}
.action-icon-btns a:hover {
  background-color: var(--cw-bg-elevated) !important;
  color: var(--cw-accent) !important;
  border-color: rgba(244,171,16,0.3) !important;
}

/* Header search box */
header.header .search {
  border-color: var(--cw-line) !important;
  background-color: var(--cw-bg-soft) !important;
}

/* Landing page product option items */
.landing-page .product-options .item,
.landing-page.mail-services .product-options .item {
  background-color: var(--cw-card) !important;
  color: var(--cw-text) !important;
  border: 1px solid var(--cw-line) !important;
}
.landing-page .product-options .item:hover {
  border-color: rgba(244,171,16,0.4) !important;
  background-color: rgba(244,171,16,0.05) !important;
}

/* ============================
   34. PRINT OVERRIDE
   ============================ */
@media print {
  body {
    background: #fff !important;
    color: #212529 !important;
  }
  .card,
  .panel,
  .table th,
  .table td {
    background: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
  }
}