/* ============================================================
   Gravity Host — Client Portal Theme (Phase 3 — Full Integration)
   Every page matches gravityhost.co.uk main site exactly
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ---- Variables (matching gravityhost.co.uk exactly) ---- */
:root {
  --gh-bg:         #06060c;
  --gh-surface:    #0c0c16;
  --gh-elevated:   #121220;
  --gh-border:     rgba(255,255,255,0.06);
  --gh-border-hover: rgba(255,255,255,0.12);
  --gh-accent:     #22d3a7;
  --gh-accent-rgb: 34,211,167;
  --gh-accent-dim: rgba(34,211,167,0.12);
  --gh-accent-glow: rgba(34,211,167,0.25);
  --gh-accent-hover: #1bbd94;
  --gh-gold:       #f0c040;
  --gh-text:       #e4e4ec;
  --gh-text-muted: #6e6e84;
  --gh-text-dim:   #44445a;
  --gh-radius:     12px;
  --gh-radius-lg:  20px;
  --gh-radius-sm:  8px;
  --gh-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   1. GLOBAL — Dark everything
   ============================================================ */
body {
  background-color: var(--gh-bg) !important;
  color: var(--gh-text) !important;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

a { color: var(--gh-accent) !important; text-decoration: none !important; }
a:hover { color: var(--gh-accent-hover) !important; }

h1, h2, h3, h4, h5, h6,
.ce-container h1, .ce-container h2, .ce-container h3,
.page-header-top h1 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  color: #fff !important;
  letter-spacing: -0.01em;
}

p, li, td, th, span, div, label {
  color: inherit;
}

::selection {
  background: var(--gh-accent);
  color: var(--gh-bg);
}

/* Kill ALL light backgrounds anywhere */
.ce-overall-light,
.ce-overall-dark,
.content-area,
.dashboard-wraper,
.client-area-page,
.ce-container {
  background-color: var(--gh-bg) !important;
  color: var(--gh-text) !important;
}


/* ============================================================
   2. HEADER / NAV — Match homepage glassmorphism navbar
   ============================================================ */
.header {
  background: rgba(6,6,12,0.85) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  border-bottom: 1px solid var(--gh-border) !important;
  box-shadow: none !important;
}
.main-meta {
  background: transparent !important;
}

/* Logo */
.header .logo img {
  max-height: 36px !important;
}
.header .logo a,
.header .logo h1 a {
  color: #fff !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Nav links — clean, no carets overlapping */
.main-menu > ul > li > a {
  color: var(--gh-text-muted) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  border-radius: var(--gh-radius-sm) !important;
  padding: 8px 14px !important;
  transition: all var(--gh-transition) !important;
  white-space: nowrap !important;
}
.main-menu > ul > li > a:hover,
.main-menu > ul > li.show > a,
.main-menu > ul > li > a:focus {
  color: var(--gh-text) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* Dropdown caret — REMOVED (killed in section 37) */

/* Home link */
.gh-home-link > a {
  opacity: 0.5 !important;
  font-size: 0.8rem !important;
}
.gh-home-link > a:hover {
  opacity: 1 !important;
  color: var(--gh-accent) !important;
}

/* Dropdown menus */
.dropdown-menu,
.main-menu > ul > li .dropdown-menu {
  background: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
  padding: 6px !important;
  margin-top: 4px !important;
}
.dropdown-menu > li,
.main-menu > ul > li .dropdown-menu > li {
  border-top: none !important;
  border: none !important;
}
.dropdown-menu > li > a,
.dropdown-item,
.main-menu > ul > li .dropdown-menu > li > a {
  color: var(--gh-text-muted) !important;
  border-radius: var(--gh-radius-sm) !important;
  padding: 8px 14px !important;
  font-size: 0.875rem !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
}
.dropdown-menu > li > a:hover,
.dropdown-item:hover,
.dropdown-item:focus,
.main-menu > ul > li .dropdown-menu > li > a:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--gh-text) !important;
}

/* User menu — style Login link as green button */
.header-user-menu .current-user {
  color: var(--gh-text) !important;
}
#login-menu a {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
  font-weight: 600 !important;
  padding: 8px 20px !important;
  border-radius: 50rem !important;
  font-size: 0.85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all var(--gh-transition) !important;
}
#login-menu a:hover {
  background: var(--gh-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--gh-accent-glow) !important;
}

/* Logged-in user menu */
.header-user-menu .current-user .user-toggle .user-tag h5 {
  color: var(--gh-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
}
.header-user-menu .current-user > ul {
  background: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}
.header-user-menu .current-user > ul li a {
  color: var(--gh-text-muted) !important;
  font-size: 0.875rem !important;
  padding: 8px 14px !important;
  border-radius: var(--gh-radius-sm) !important;
}
.header-user-menu .current-user > ul li a:hover {
  background: rgba(255,255,255,0.04) !important;
  color: var(--gh-text) !important;
}
.header-user-menu .current-user .user-toggle:after,
.header-user-menu .current-user .user-toggle.active:after {
  color: var(--gh-text-muted) !important;
}


/* ============================================================
   3. PAGE HEADERS
   ============================================================ */
.page-header-top {
  background-color: var(--gh-surface) !important;
  border-bottom: 1px solid var(--gh-border) !important;
}
.page-header-top h1 {
  color: #fff !important;
  font-size: 1.5rem !important;
}


/* ============================================================
   4. CLIENT AREA ACTION BOXES (Homepage)
   ============================================================ */
.client-area-top-block {
  background: transparent !important;
}
.client-area-top-box {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-lg) !important;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
  transition: all var(--gh-transition) !important;
  min-height: 200px;
}
.client-area-top-box:hover {
  border-color: var(--gh-border-hover) !important;
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3) !important;
}
.client-area-top-box img {
  max-height: 48px !important;
  margin-bottom: 1rem !important;
  filter: brightness(0) invert(1) opacity(0.6) !important;
}
.client-area-top-box:hover img {
  filter: brightness(0) saturate(100%) invert(73%) sepia(44%) saturate(1000%) hue-rotate(115deg) brightness(95%) contrast(87%) !important;
}
.client-area-top-box p {
  color: var(--gh-text-muted) !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
.client-area-top-box p span {
  display: block !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  color: #fff !important;
  margin-bottom: 0.5rem !important;
}
.client-area-top-block a {
  text-decoration: none !important;
}
.client-area-top-block a:hover {
  text-decoration: none !important;
}


/* ============================================================
   5. TABS (FAQ, Popular Articles, etc.)
   ============================================================ */
.resp-tabs-list {
  background: transparent !important;
  border-bottom: 1px solid var(--gh-border) !important;
}
.resp-tabs-list li {
  color: var(--gh-text-muted) !important;
  background: transparent !important;
  border: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  transition: all var(--gh-transition) !important;
}
.resp-tab-active {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-bottom: none !important;
  border-top: 2px solid var(--gh-accent) !important;
  color: #fff !important;
}
.resp-tab-content {
  border: 1px solid var(--gh-border) !important;
  border-top: none !important;
  background: var(--gh-surface) !important;
  color: var(--gh-text) !important;
}
.resp-tab-content h3,
.resp-tab-content h4 {
  color: #fff !important;
}
/* Accordion mode (mobile) */
h2.resp-accordion {
  background: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}
h2.resp-tab-active {
  background: var(--gh-elevated) !important;
  border-bottom: none !important;
}


/* ============================================================
   6. CARDS, PANELS, WELLS — Dark everything
   ============================================================ */
.panel,
.panel-default,
.panel-heading,
.panel-body,
.well,
.card {
  background-color: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  color: var(--gh-text) !important;
  box-shadow: none !important;
}
.panel-heading {
  border-bottom: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) var(--gh-radius) 0 0 !important;
  color: #fff !important;
  background: var(--gh-elevated) !important;
}


/* ============================================================
   7. ORDER / CART PAGES — Full dark treatment
   ============================================================ */

/* Cart wrapper */
.cart-pages-wrapper {
  background: var(--gh-bg) !important;
  color: var(--gh-text) !important;
}

/* Progress/stepper bar */
.cart-status-bar {
  background: var(--gh-surface) !important;
  border-radius: var(--gh-radius) !important;
  padding: 16px 24px !important;
  margin-bottom: 2rem !important;
  border: 1px solid var(--gh-border) !important;
}
.cart-status-rail {
  background: transparent !important;
}
.cart-status-nodes {
  filter: none !important;
}
.cart-status-nodes .cart-status-label {
  color: var(--gh-text-dim) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
}
.cart-status-nodes.active .cart-status-label,
.cart-status-nodes.now .cart-status-label {
  color: var(--gh-accent) !important;
}
.cart-status-nodes.done .cart-status-label {
  color: var(--gh-text-muted) !important;
}
.cart-status-nodes.now,
.cart-status-nodes.done,
.cart-status-nodes.done.first-step {
  filter: none !important;
}
.cart-status-bar .inner-rail {
  filter: none !important;
  background: var(--gh-border) !important;
}

/* Product group boxes (step 0) */
.product-groups-block {
  background: transparent !important;
}
.product-group-box {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-lg) !important;
  padding: 2rem !important;
  text-align: center !important;
  transition: all var(--gh-transition) !important;
  cursor: pointer;
}
.product-group-box:hover {
  border-color: var(--gh-accent) !important;
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3) !important;
}
.product-group-box h4,
.product-group-box h4 a {
  color: #fff !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
}
.product-group-box .cm-height {
  color: var(--gh-text-muted) !important;
}

/* Product cards (step 1 — plan selection) */
.product-flex-wrapper {
  gap: 16px !important;
}
.product-flex-item {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-lg) !important;
  overflow: hidden !important;
  transition: all var(--gh-transition) !important;
}
.product-flex-item:hover {
  border-color: var(--gh-border-hover) !important;
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3) !important;
}
.product-flex-item .head {
  background: var(--gh-elevated) !important;
  padding: 1.5rem !important;
  text-align: center !important;
  border-bottom: 1px solid var(--gh-border) !important;
}
.product-flex-item .head .title h4 {
  color: #fff !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
}
.product-flex-item .head .prod-icon img {
  filter: brightness(0) invert(1) opacity(0.3) !important;
  max-height: 40px !important;
}
.product-flex-item .head h3 {
  color: var(--gh-text) !important;
  margin: 0 !important;
}
/* Pricing display */
.product-flex-item .pricesSmall {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--gh-accent) !important;
  display: block !important;
}
.product-flex-item .compare-term {
  color: var(--gh-text-muted) !important;
  font-size: 0.82rem !important;
}
.product-flex-item .compare-term.setupfee {
  display: none !important; /* Hide £0 setup fee — just noise */
}
.product-flex-item .product-features {
  padding: 1.5rem !important;
  background: var(--gh-surface) !important;
}
.product-flex-item .cm-listing {
  color: var(--gh-text-muted) !important;
}
.product-flex-item .cm-listing li {
  color: var(--gh-text-muted) !important;
  border-color: var(--gh-border) !important;
}

/* Order Now button */
.continue-button.app-btns.primary,
.app-btns.primary {
  background: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
  border-radius: 50rem !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.9rem !important;
  padding: 12px 24px !important;
  transition: all var(--gh-transition) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  display: inline-block !important;
  width: auto !important;
}
.continue-button.app-btns.primary:hover,
.app-btns.primary:hover {
  background: var(--gh-accent-hover) !important;
  box-shadow: 0 4px 20px var(--gh-accent-glow) !important;
  transform: translateY(-1px);
}

/* Product config page (step 2) */
.config-product-section {
  background: var(--gh-bg) !important;
  color: var(--gh-text) !important;
}
.config-product-section .summary-info,
.config-product-section .summary-holder {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  color: var(--gh-text) !important;
}
.config-product-section .summary-info .summary-holder .summery-fees .change-code a {
  color: var(--gh-accent) !important;
}
.config-product-section h2,
.config-product-section h3 {
  color: #fff !important;
}

/* Checkout page (step 3) */
.checkout-wrapper {
  background: var(--gh-bg) !important;
}


/* ============================================================
   8. SUPPORT / KNOWLEDGE BASE — Dark theme
   ============================================================ */
.cm-holder {
  background: var(--gh-bg) !important;
  color: var(--gh-text) !important;
}
.cs-padding {
  background: transparent !important;
}
.datatable-page,
.data-table-wrapper {
  background: var(--gh-bg) !important;
  color: var(--gh-text) !important;
}

/* Submit ticket form */
.customfields-wrapper,
.customfields {
  background: transparent !important;
  color: var(--gh-text) !important;
}
.customfields-header {
  color: #fff !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
}

/* Knowledge base */
.knowledge-base-wraper {
  background: var(--gh-bg) !important;
}
.knowledge-base-wraper .knowledge-base-search2 {
  background: var(--gh-surface) !important;
}
.knowledge-base-wraper .knowledge-base-search2 .knowledge-base-search-box2 .knowledge-search-box:after {
  background: var(--gh-accent) !important;
}
.kb-article-content {
  color: var(--gh-text) !important;
}

/* FAQ items in tabs */
.cm-tabs .resp-tab-content a {
  color: var(--gh-accent) !important;
}


/* ============================================================
   9. TABLES
   ============================================================ */
.table, .dataTable, table {
  color: var(--gh-text) !important;
}
.table > thead > tr > th,
.dataTable th,
table thead th {
  background-color: var(--gh-elevated) !important;
  border-bottom: 1px solid var(--gh-border) !important;
  color: var(--gh-text-muted) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 10px 14px !important;
}
.table > tbody > tr > td,
.dataTable td,
table tbody td {
  border-top: 1px solid var(--gh-border) !important;
  color: var(--gh-text) !important;
  padding: 12px 14px !important;
  font-size: 0.88rem !important;
}
.table > tbody > tr:hover > td {
  background-color: rgba(255,255,255,0.02) !important;
}
.table-striped > tbody > tr:nth-child(odd) > td {
  background-color: rgba(255,255,255,0.01) !important;
}


/* ============================================================
   10. BUTTONS — All pill-shaped, accent green
   ============================================================ */
.btn-primary,
.btn-success {
  background: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
  border-radius: 50rem !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.88rem !important;
  padding: 10px 22px !important;
  transition: all var(--gh-transition) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:hover {
  background: var(--gh-accent-hover) !important;
  border-color: var(--gh-accent-hover) !important;
  color: var(--gh-bg) !important;
  box-shadow: 0 4px 20px var(--gh-accent-glow) !important;
  transform: translateY(-1px);
}

.btn-default,
.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--gh-border-hover) !important;
  color: var(--gh-text) !important;
  border-radius: 50rem !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  padding: 10px 22px !important;
  transition: all var(--gh-transition) !important;
  text-shadow: none !important;
}
.btn-default:hover,
.btn-secondary:hover {
  border-color: rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.04) !important;
  color: #fff !important;
}

.btn-danger {
  background: rgba(239,68,68,0.15) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #ef4444 !important;
  border-radius: 50rem !important;
}

.btn-group > button {
  background: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
  border-radius: var(--gh-radius-sm) !important;
}
.btn-group > button:hover,
.btn-group > button.btn-primary {
  background: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
}

/* Feature tab (signup) */
.feature-tab {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
  border-radius: var(--gh-radius-sm) !important;
}

/* Signup steps */
#signup-steps .on,
#signup-steps .last-on {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
}


/* ============================================================
   11. FORMS
   ============================================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
  background-color: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-sm) !important;
  color: var(--gh-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.9rem !important;
  padding: 10px 14px !important;
  transition: border-color var(--gh-transition), box-shadow var(--gh-transition) !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gh-accent) !important;
  box-shadow: 0 0 0 3px var(--gh-accent-dim) !important;
  outline: none !important;
  background-color: var(--gh-surface) !important;
}
label, .col-form-label {
  color: var(--gh-text-muted) !important;
  font-weight: 500 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 50px var(--gh-surface) inset !important;
  -webkit-text-fill-color: var(--gh-text) !important;
}

/* Search/select2 */
.select2-container .select2-choice,
.select2-container--default .select2-selection--single,
.searchSelect2 + .select2-container .select2-selection {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  color: var(--gh-text) !important;
  border-radius: var(--gh-radius-sm) !important;
}
.select2-drop,
.select2-container--default .select2-results,
.select2-dropdown {
  background: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
}
.select2-results .select2-highlighted,
.select2-container--default .select2-results__option--highlighted {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
}


/* ============================================================
   12. LOGIN PAGE
   ============================================================ */
.login-form,
#loginForm,
form[action*="login"] {
  color: var(--gh-text) !important;
}
.login-form .panel,
.login-form .well,
.login-form .card {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-lg) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.4) !important;
  max-width: 440px;
  margin: 3rem auto !important;
}


/* ============================================================
   13. SIDEBAR MENU
   ============================================================ */
.ce-menuitem,
.accordion-toggle,
.accordion-toggle.collapsed {
  background: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
  border-radius: var(--gh-radius-sm) !important;
  transition: all var(--gh-transition) !important;
}
.ce-menuitem:hover,
.accordion-toggle:hover {
  background: var(--gh-elevated) !important;
  color: #fff !important;
}
.accordion-group {
  border-color: var(--gh-border) !important;
  background: transparent !important;
}


/* ============================================================
   14. PAGINATION
   ============================================================ */
ul.pagination li > a,
ul.pagination li > span {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
  border-radius: var(--gh-radius-sm) !important;
  margin: 0 2px !important;
}
ul.pagination li.active > a,
ul.pagination li.active > span {
  background-color: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
}


/* ============================================================
   15. ALERTS
   ============================================================ */
.alert {
  border-radius: var(--gh-radius) !important;
  border-width: 1px !important;
}
.alert-success { background: rgba(34,211,167,0.08) !important; border-color: rgba(34,211,167,0.2) !important; color: var(--gh-accent) !important; }
.alert-info { background: rgba(96,165,250,0.08) !important; border-color: rgba(96,165,250,0.2) !important; color: #60a5fa !important; }
.alert-warning { background: rgba(240,192,64,0.08) !important; border-color: rgba(240,192,64,0.2) !important; color: var(--gh-gold) !important; }
.alert-danger { background: rgba(239,68,68,0.08) !important; border-color: rgba(239,68,68,0.2) !important; color: #ef4444 !important; }


/* ============================================================
   16. BADGES / LABELS
   ============================================================ */
.badge, .label { border-radius: 50rem !important; font-weight: 500 !important; padding: 4px 10px !important; font-size: 0.72rem !important; }
.badge-success, .label-success { background: var(--gh-accent-dim) !important; color: var(--gh-accent) !important; }
.badge-warning, .label-warning { background: rgba(240,192,64,0.12) !important; color: var(--gh-gold) !important; }
.badge-danger, .label-danger, .label-important { background: rgba(239,68,68,0.12) !important; color: #ef4444 !important; }
.badge-info, .label-info { background: rgba(96,165,250,0.12) !important; color: #60a5fa !important; }


/* ============================================================
   17. MODALS
   ============================================================ */
.modal-content {
  background-color: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-lg) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
  color: var(--gh-text) !important;
}
.modal-header { border-bottom: 1px solid var(--gh-border) !important; }
.modal-header .close { color: var(--gh-text-muted) !important; opacity: 0.5 !important; }
.modal-footer { border-top: 1px solid var(--gh-border) !important; }
.modal-backdrop.in { opacity: 0.7 !important; }


/* ============================================================
   18. FOOTER — Full dark styling
   ============================================================ */
.footer {
  background: var(--gh-surface) !important;
  border-top: 1px solid var(--gh-border) !important;
  color: var(--gh-text-muted) !important;
  padding: 48px 0 32px !important;
}
.footer .copyright {
  color: var(--gh-text-dim) !important;
  font-size: 0.8rem !important;
}
.footer a {
  color: var(--gh-text-muted) !important;
}
.footer a:hover {
  color: var(--gh-accent) !important;
}
.footer .brand-logo {
  opacity: 0.3;
  filter: brightness(2);
}


/* ============================================================
   19. MISC
   ============================================================ */
hr { border-top-color: var(--gh-border) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--gh-bg); }
::-webkit-scrollbar-thumb { background: var(--gh-elevated); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #1e1e30; }

/* Hide duplicate cancel button */
.DivBillingProfileID { display: none !important; }

/* Progress bars */
.progress { background-color: var(--gh-elevated) !important; border-radius: 50rem !important; }
.progress-bar { background-color: var(--gh-accent) !important; }

/* Breadcrumb */
.breadcrumb { background: transparent !important; }
.breadcrumb > li { color: var(--gh-text-dim) !important; font-size: 0.82rem !important; }
.breadcrumb > li > a { color: var(--gh-text-muted) !important; }

/* Popover / Tooltip */
.popover { background: var(--gh-elevated) !important; border: 1px solid var(--gh-border) !important; border-radius: var(--gh-radius) !important; color: var(--gh-text) !important; }
.tooltip-inner { background: var(--gh-elevated) !important; border-radius: var(--gh-radius-sm) !important; }

/* Navbar toggler (mobile) */
.navbar-toggler { border-color: var(--gh-border) !important; }
.navbar-toggler-icon { filter: invert(1) !important; }

/* Text colour overrides */
.text-muted { color: var(--gh-text-muted) !important; }
.text-primary { color: var(--gh-accent) !important; }
.text-success { color: var(--gh-accent) !important; }
.text-danger { color: #ef4444 !important; }

/* Background overrides */
.bg-light, .bg-white { background-color: var(--gh-surface) !important; }

/* jQuery UI dark */
.ui-widget-content { background: var(--gh-surface) !important; border-color: var(--gh-border) !important; color: var(--gh-text) !important; }
.ui-widget-header { background: var(--gh-accent) !important; }


/* ============================================================
   20. DOMAIN SEARCH PAGE SPECIFIC
   ============================================================ */
.domain-page .domain-section {
  background: transparent !important;
}
.domain-page .domain-section .resp-tabs-container .resp-tab-content {
  background: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
}
.domain-page .domain-section .resp-tabs-container .resp-tab-content .domain-bottom .continue-btn {
  background: var(--gh-accent) !important;
  border-radius: 50rem !important;
  color: var(--gh-bg) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.domain-page .domain-section .resp-tabs-container .resp-tab-content .domain-bottom .continue-btn:hover {
  background: var(--gh-accent-hover) !important;
  box-shadow: 0 4px 20px var(--gh-accent-glow) !important;
}
/* Domain search results */
.domain-search-results {
  background: var(--gh-surface) !important;
}
.domain-search-results .domain-item {
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}


/* ============================================================
   21. SCREENSHOT-VERIFIED FIXES
   ============================================================ */

/* -- Login page header bar -- clean dark, no weird accents */
.page-header-top {
  background: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  color: #fff !important;
  margin-bottom: 1.5rem !important;
  padding: 1.25rem 1.75rem !important;
}
.head {
  background: var(--gh-elevated) !important;
  border-bottom: 1px solid var(--gh-border) !important;
  color: #fff !important;
}

/* -- Login page text overflow fix -- */
.login-form h4,
.login-form h3,
.content-area h4 {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}
.content-area .container {
  overflow-x: hidden !important;
}
.content-area a {
  word-break: break-word !important;
}

/* -- Login button — fix weird square shape, make pill -- */
/* The actual login button is input[type="submit"].app-btns.primary */
input[type="submit"].app-btns,
input[type="submit"].app-btns.primary,
#loginForm .btn,
#loginForm button,
#loginForm input[type="submit"],
.login-form .btn,
.login-form button[type="submit"],
button.btn-login,
.btn-block {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
  border: none !important;
  border-radius: 50rem !important;
  font-weight: 600 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.95rem !important;
  padding: 12px 40px !important;
  width: auto !important;
  min-width: 140px !important;
  display: inline-block !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  transition: all var(--gh-transition) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
input[type="submit"].app-btns:hover,
input[type="submit"].app-btns.primary:hover,
#loginForm .btn:hover,
#loginForm button:hover,
.login-form .btn:hover {
  background: var(--gh-accent-hover) !important;
  box-shadow: 0 4px 20px var(--gh-accent-glow) !important;
  transform: translateY(-1px);
}

/* -- Input group addons (icons next to email/password) -- */
.input-group-addon,
.input-group-text,
.input-group-append .input-group-text,
.input-group-append .btn,
.input-group-prepend .btn,
.input-group .input-group-btn .btn {
  background: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
  border-left: none !important;
  color: var(--gh-text-dim) !important;
  border-radius: 0 var(--gh-radius-sm) var(--gh-radius-sm) 0 !important;
  padding: 8px 14px !important;
}
.input-group-append .input-group-text i,
.input-group-addon i {
  color: var(--gh-text-dim) !important;
  font-size: 0.85rem !important;
}
/* Input with addon — fix left radius */
.input-group .form-control:first-child,
.input-group > .form-control:not(:last-child) {
  border-radius: var(--gh-radius-sm) 0 0 var(--gh-radius-sm) !important;
  border-right: none !important;
}

/* -- FAQ tabs content area — white background fix -- */
.cm-tabs,
.cm-tabs .resp-tabs-container,
.cm-tabs .resp-tab-content,
.resp-tabs-container {
  background: var(--gh-surface) !important;
  color: var(--gh-text) !important;
  border-color: var(--gh-border) !important;
}
/* FAQ question items */
.cm-tabs .resp-tab-content .panel,
.cm-tabs .resp-tab-content .panel-default,
.cm-tabs .resp-tab-content .panel-body,
.cm-tabs .resp-tab-content .accordion-group,
.cm-tabs .resp-tab-content .accordion-inner {
  background: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}
/* Question mark icon circles in FAQ */
.cm-tabs .resp-tab-content .panel-heading,
.cm-tabs .resp-tab-content .accordion-toggle {
  background: var(--gh-elevated) !important;
  color: var(--gh-text) !important;
  border-color: var(--gh-border) !important;
}
/* FAQ links/article titles */
.cm-tabs .resp-tab-content a,
.cm-tabs .resp-tab-content li a {
  color: var(--gh-accent) !important;
}

/* -- Navigation dropdown carets — REMOVED (arrows killed in section 37) -- */
.main-menu > ul > li > a.dropdown-toggle {
  padding-right: 14px !important;
}

/* -- Stepper/progress bar refinement -- */
.cart-status-nodes::before,
.cart-status-nodes::after {
  filter: none !important;
}
.cart-status-nodes .cart-status-label {
  font-size: 0.78rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* -- Content wrapper catch-all for any remaining white -- */
.main-content,
.content-wraper,
.client-area-wraper,
.ce-container .container,
.ce-container .row,
section,
.wrapper {
  background-color: transparent !important;
}

/* -- Support ticket form area -- */
.file-ticket-desc,
.file-ticket-desc .form-group {
  background: transparent !important;
  color: var(--gh-text) !important;
}

/* -- Announcements & KB articles -- */
.announcement-item,
.kb-category,
.kb-article {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  color: var(--gh-text) !important;
}

/* -- Checkbox styling -- */
input[type="checkbox"] {
  accent-color: var(--gh-accent) !important;
}

/* -- "Don't have an account? Register now" link -- */
.login-form a,
#loginForm a {
  color: var(--gh-accent) !important;
}

/* -- "Forgot your password" centered -- */
.login-form .text-center,
#loginForm .text-center {
  color: var(--gh-text-muted) !important;
}

/* -- Product icon images in order cards — reduce opacity -- */
.product-flex-item .prod-icon {
  opacity: 0.3 !important;
}

/* -- eq-height utility fix -- */
.eq-height {
  background: transparent !important;
}

/* -- FAQ/Article accordion deep fix -- */
.client-area-tabs-block,
.client-area-faq,
.client-faq-content,
.accordion-item,
.accordion-item .data,
.accordion.pt-1,
.client-area-faq .accordion {
  background: var(--gh-surface) !important;
  color: var(--gh-text) !important;
  border-color: var(--gh-border) !important;
}
.accordion-item {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--gh-border) !important;
  cursor: pointer !important;
  transition: background var(--gh-transition) !important;
}
.accordion-item:hover {
  background: var(--gh-elevated) !important;
}
.client-faq-content {
  padding: 16px 20px !important;
}
.client-faq-content p,
.client-faq-content li,
.client-faq-content h3 {
  color: var(--gh-text) !important;
}
.client-faq-content h3 {
  color: #fff !important;
  font-size: 1.1rem !important;
}

/* -- Nuclear catch-all: kill any remaining white/light backgrounds -- */
.ce-container *:not(img):not(svg):not(i):not(input):not(select):not(textarea):not(button):not(a) {
  /* Only apply to elements that haven't been explicitly styled */
}
/* Target specific Bootstrap light utilities that vendor.css might add */
.bg-white,
.bg-light,
.bg-transparent {
  background-color: var(--gh-bg) !important;
}
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background: white"],
[style*="background: #fff"],
[style*="background-color: rgb(255"],
[style*="background-color:#fff"],
[style*="background:#fff"] {
  background-color: var(--gh-bg) !important;
}

/* Nav dropdown caret — REMOVED (killed in section 37) */


/* ============================================================
   22. MOBILE RESPONSIVE FIXES
   ============================================================ */

@media (max-width: 767px) {
  /* -- Login page header bar — clean on mobile, no left border -- */
  .page-header-top {
    border: 1px solid var(--gh-border) !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 1rem 1.25rem !important;
  }
  .page-header-top h1 {
    font-size: 1.2rem !important;
    margin: 0 !important;
  }

  /* -- Login form — prevent overflow -- */
  .login-form,
  .login-form .container,
  .login-form .row,
  .content-area .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow-x: hidden !important;
  }
  #loginForm .input-group,
  .login-form .input-group {
    max-width: 100% !important;
  }
  #loginForm .form-control,
  .login-form .form-control {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* Login button — don't overflow right */
  input[type="submit"].app-btns,
  input[type="submit"].app-btns.primary {
    max-width: 100% !important;
    padding: 12px 28px !important;
  }
  .col-12.text-right {
    text-align: center !important;
    padding-right: 0 !important;
  }

  /* -- Product cards — single column on mobile -- */
  .product-flex-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
  }
  .product-flex-wrapper.four-col .product-flex-item,
  .product-flex-wrapper .product-flex-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }
  /* Ensure all parts of the product card are visible */
  .product-flex-item .head,
  .product-flex-item .product-features {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .product-flex-item .head .title h4 {
    font-size: 1.3rem !important;
  }

  /* -- Prevent horizontal overflow everywhere -- */
  body, html {
    overflow-x: hidden !important;
  }
  .cart-pages-wrapper,
  .content-area,
  .cart-status-bar {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .cart-pages-wrapper section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* -- Action boxes — stack vertically -- */
  .client-area-top-block .row {
    gap: 12px !important;
  }
  .client-area-top-box {
    padding: 1.5rem 1rem !important;
    min-height: auto !important;
  }

  /* -- Header/nav on mobile -- */
  .header .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .header .logo img {
    max-height: 30px !important;
  }

  /* -- Navbar toggler (hamburger) — visible on dark bg -- */
  .navbar-toggler {
    border: 1px solid var(--gh-border-hover) !important;
    padding: 6px 10px !important;
    background: rgba(255,255,255,0.04) !important;
  }

  /* -- Cart stepper text size -- */
  .cart-status-nodes .cart-status-label {
    font-size: 0.65rem !important;
  }

  /* -- Footer responsive -- */
  .footer .container > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .footer .container > div:last-of-type {
    flex-direction: column !important;
    text-align: center !important;
  }

  /* -- FAQ tabs on mobile -- */
  .resp-tabs-list li {
    font-size: 0.82rem !important;
    padding: 10px 12px !important;
  }

  /* -- General mobile padding -- */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .page-header-top h1 {
    font-size: 1.05rem !important;
  }

  .client-area-top-box p span {
    font-size: 0.95rem !important;
  }

  /* Product group boxes stack */
  .product-groups-block .row > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}


/* ============================================================
   23. SCREENSHOT AUDIT — COMPREHENSIVE FIXES
   ============================================================ */

/* -- Product card headers — kill the blue/navy gradient, use dark + accent -- */
.product-flex-item .head .title {
  background: transparent !important;
}
.product-flex-item .head .title h4 {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
  display: inline-block !important;
  padding: 8px 28px !important;
  border-radius: 50rem !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  margin: 0 auto 0.75rem !important;
}

/* -- Product icon images — hide entirely (adds no value) -- */
.product-flex-item .prod-icon {
  display: none !important;
}

/* -- ORDER NOW buttons — proper pill shape, consistent -- */
.product-flex-item .continue-button,
.product-flex-item a.continue-button,
.product-flex-item a.app-btns,
.product-flex-item a.app-btns.primary,
.product-features .app-btns,
.product-features .continue-button,
.product-features a.continue-button.app-btns.primary,
a.continue-button.app-btns.primary,
a.continue-button.app-btns {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
  border: none !important;
  border-radius: 50rem !important;
  padding: 14px 36px !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: inline-block !important;
  width: auto !important;
  max-width: 200px !important;
  line-height: 1.2 !important;
  transition: all var(--gh-transition) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  text-align: center !important;
}
.product-flex-item .continue-button:hover,
.product-flex-item a.app-btns:hover,
.product-features .app-btns:hover,
a.continue-button.app-btns:hover {
  background: var(--gh-accent-hover) !important;
  color: var(--gh-bg) !important;
  box-shadow: 0 4px 20px var(--gh-accent-glow) !important;
  transform: translateY(-2px) !important;
}

/* -- Stepper/progress bar — complete redesign -- */
.cart-status-bar {
  background: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  padding: 16px 24px !important;
  margin: 1rem auto 2rem !important;
  max-width: 700px !important;
}
/* Kill the old orange/coloured nodes */
.cart-status-nodes,
.cart-status-nodes.start,
.cart-status-nodes.end,
.cart-status-nodes.now,
.cart-status-nodes.done,
.cart-status-nodes.active,
.cart-status-nodes.first-step,
.cart-status-nodes.done.first-step {
  background: none !important;
  background-image: none !important;
  filter: none !important;
}
/* Step labels */
.cart-status-nodes .cart-status-label {
  color: var(--gh-text-dim) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
}
.cart-status-nodes.now .cart-status-label,
.cart-status-nodes.active .cart-status-label,
.cart-status-nodes.now.active .cart-status-label {
  color: var(--gh-accent) !important;
  font-weight: 600 !important;
}
.cart-status-nodes.done .cart-status-label {
  color: var(--gh-text-muted) !important;
}
/* Kill the inner rail bar */
.cart-status-bar .inner-rail,
.cart-status-rail .inner-rail {
  background: var(--gh-border) !important;
  filter: none !important;
  background-image: none !important;
}

/* -- Kill ALL orange/old-theme stepper node images/backgrounds -- */
.cart-status-nodes::before,
.cart-status-nodes::after,
.cart-status-nodes *::before,
.cart-status-nodes *::after {
  filter: grayscale(100%) brightness(0.5) !important;
}
/* Completely override stepper node styling — kill all old background images */
.cart-status-nodes,
.cart-status-nodes.start,
.cart-status-nodes.end,
.cart-status-nodes.now,
.cart-status-nodes.done,
.cart-status-nodes.active,
.cart-status-nodes.first-step,
.cart-status-nodes.start.first-step.now.active,
.cart-status-nodes.done.first-step {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  filter: none !important;
  position: relative !important;
}
/* The rail bar */
.cart-status-rail {
  background: var(--gh-elevated) !important;
  background-image: none !important;
  border-radius: 50rem !important;
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 !important;
}
.cart-status-rail .inner-rail {
  display: none !important; /* Kill old rail image */
}

/* -- Hide the down-arrow chevron below plan titles -- */
/* These are CSS triangles created by ::after pseudo-elements */
.product-flex-item .head .title::after,
.product-flex-item .title::after,
.product-flex-item .head::after {
  display: none !important;
  content: none !important;
  border: none !important;
}
/* Also hide any triangle/arrow SVGs or images */
.product-flex-item .head .title ~ *:not(h3):not(.product-features) {
  display: none !important;
}

/* -- Domain form right border fix -- */
.domain-page .domain-section .resp-tab-content {
  border-right: 1px solid var(--gh-border) !important;
  overflow: hidden !important;
}
.domain-page .domain-section {
  overflow: hidden !important;
}

/* -- FAQ question mark icons — fix overlap and style -- */
.accordion-item::before,
.client-area-faq .accordion-item::before {
  color: var(--gh-accent) !important;
  opacity: 0.5 !important;
  font-size: 0.9rem !important;
  margin-right: 12px !important;
}

/* -- Radio buttons on domain page — dark theme -- */
input[type="radio"] {
  accent-color: var(--gh-accent) !important;
}
.domain-page .resp-tabs-list li,
.domain-page .resp-tabs-list {
  background: transparent !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}
.domain-page .resp-tab-active {
  border-top-color: var(--gh-accent) !important;
  color: #fff !important;
}

/* -- Domain search form -- */
.domain-page .domain-section .resp-tab-content {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
}
.domain-page input[type="text"],
.domain-page .form-control {
  background: var(--gh-bg) !important;
  border: 1px solid var(--gh-border) !important;
  color: var(--gh-text) !important;
}
.domain-page select,
.domain-page .bootstrap-select .btn {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  color: var(--gh-text) !important;
}

/* -- CONTINUE button on domain page -- */
.domain-page .continue-btn,
.domain-page .app-btns {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
  border: none !important;
  border-radius: 50rem !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* -- Order group boxes — add icon and hover accent -- */
.product-group-box {
  min-height: 140px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.product-group-box:hover h4,
.product-group-box:hover h4 a {
  color: var(--gh-accent) !important;
}

/* -- Kill any remaining old-theme colours -- */
/* Orange from old ClientExec default theme */
a[style*="color: rgb(221, 132"],
a[style*="color: rgb(214, 99"],
*[style*="background-color: rgb(221"],
*[style*="border-color: rgb(221"] {
  color: var(--gh-accent) !important;
}

/* Old blue/navy from original gravity theme */
*[style*="background: #1f2c38"],
*[style*="background: #213747"],
*[style*="background-color: #1f2c38"],
*[style*="background-color: #213747"] {
  background: var(--gh-elevated) !important;
}

/* -- Config page (step 2) - product summary and domain selection -- */
.config-product-section {
  color: var(--gh-text) !important;
}
.config-product-section h2,
.config-product-section h3,
.config-product-section h4 {
  color: #fff !important;
}
.config-product-section .product-name,
.config-product-section .product-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.config-product-section .summary-info {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
}
.config-product-section .summary-holder {
  background: var(--gh-surface) !important;
  color: var(--gh-text) !important;
}
.config-product-section .summery-fees {
  color: var(--gh-text) !important;
}
.config-product-section .total-amount,
.config-product-section .price-total {
  color: var(--gh-accent) !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
}

/* -- Checkout page (step 3) -- */
.checkout-section,
.checkout-wrapper,
.checkout-content {
  background: transparent !important;
  color: var(--gh-text) !important;
}

/* -- Overall cleanup — ensure Bricolage for all headings on order pages -- */
.cart-pages-wrapper h1,
.cart-pages-wrapper h2,
.cart-pages-wrapper h3,
.cart-pages-wrapper h4 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  color: #fff !important;
}


/* ============================================================
   24. VENDOR.CSS COMPREHENSIVE AUDIT — COMPLETE GAP FILL
   Every vendor.css default that could leak through is overridden
   ============================================================ */

/* --- 24a. Typography gaps --- */
pre, code, kbd, samp {
  color: var(--gh-accent) !important;
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
pre {
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-sm) !important;
  padding: 1rem !important;
}
blockquote, .blockquote {
  border-left: 3px solid var(--gh-accent) !important;
  color: var(--gh-text-muted) !important;
  padding-left: 1rem !important;
}
.blockquote-footer { color: var(--gh-text-muted) !important; }
.figure-caption { color: var(--gh-text-muted) !important; }
caption { color: var(--gh-text-muted) !important; }
.img-thumbnail {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
}

/* --- 24b. Form controls (custom) --- */
.form-control-plaintext { color: var(--gh-text) !important; }
.form-control:disabled, .form-control[readonly] {
  background-color: var(--gh-elevated) !important;
  color: var(--gh-text-muted) !important;
}
.custom-control-label::before {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(34,211,167,0.25) !important;
  border-color: var(--gh-accent) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
}
.custom-control-input:disabled ~ .custom-control-label::before {
  background-color: var(--gh-elevated) !important;
}
.custom-control-input:disabled ~ .custom-control-label { color: var(--gh-text-muted) !important; }
.custom-select {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}
.custom-select:focus {
  border-color: var(--gh-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(34,211,167,0.25) !important;
}
.custom-select:disabled { background-color: var(--gh-elevated) !important; color: var(--gh-text-muted) !important; }
.custom-file-label, .custom-file-label::after {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}
.custom-file-input:focus ~ .custom-file-label {
  border-color: var(--gh-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(34,211,167,0.25) !important;
}
.custom-range::-webkit-slider-runnable-track { background-color: var(--gh-elevated) !important; }
.custom-range::-moz-range-track { background-color: var(--gh-elevated) !important; }

/* --- 24c. Buttons (remaining variants) --- */
.btn-light, .btn-light:hover, .btn-light:focus, .btn-light:active,
.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active {
  background-color: var(--gh-elevated) !important;
  color: var(--gh-text) !important;
  border-color: var(--gh-border) !important;
  border-radius: 50rem !important;
}
.btn-outline-secondary {
  color: var(--gh-text-muted) !important;
  border-color: var(--gh-border-hover) !important;
  border-radius: 50rem !important;
}
.btn-outline-secondary:hover {
  background-color: var(--gh-elevated) !important;
  color: var(--gh-text) !important;
  border-color: var(--gh-border-hover) !important;
}
.btn-outline-primary {
  color: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
  border-radius: 50rem !important;
}
.btn-outline-primary:hover {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
}
.btn-outline-primary.focus, .btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(34,211,167,0.5) !important;
}
.btn-outline-dark {
  color: var(--gh-text) !important;
  border-color: var(--gh-border) !important;
  border-radius: 50rem !important;
}
.btn-outline-dark:hover {
  background-color: var(--gh-elevated) !important;
  color: var(--gh-text) !important;
}
.btn-link { color: var(--gh-accent) !important; text-decoration: none !important; }
.btn-link:hover { color: var(--gh-accent-hover) !important; }
.btn-link.disabled, .btn-link:disabled { color: var(--gh-text-muted) !important; }
.btn-warning { color: var(--gh-bg) !important; }

/* --- 24d. Nav-tabs (Bootstrap) --- */
.nav-tabs { border-bottom-color: var(--gh-border) !important; }
.nav-tabs .nav-link { color: var(--gh-text-muted) !important; }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { border-color: var(--gh-border) !important; }
.nav-tabs .nav-link.disabled, .nav-link.disabled { color: var(--gh-text-muted) !important; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) var(--gh-border) var(--gh-surface) !important;
  color: var(--gh-text) !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
}

/* --- 24e. Navbar-light overrides --- */
.navbar-light .navbar-brand, .navbar-light .navbar-brand:hover { color: var(--gh-text) !important; }
.navbar-light .navbar-nav .nav-link { color: var(--gh-text-muted) !important; }
.navbar-light .navbar-nav .nav-link:hover { color: var(--gh-text) !important; }
.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active { color: var(--gh-text) !important; }
.navbar-light .navbar-text { color: var(--gh-text-muted) !important; }
.navbar-light .navbar-toggler { border-color: var(--gh-border) !important; }

/* --- 24f. Breadcrumb refinement --- */
.breadcrumb-item + .breadcrumb-item::before { color: var(--gh-text-muted) !important; }
.breadcrumb-item.active { color: var(--gh-text-muted) !important; }

/* --- 24g. Dropdown sub-elements --- */
.dropdown-header { color: var(--gh-text-muted) !important; }
.dropdown-item-text { color: var(--gh-text) !important; }
.dropdown-divider { border-color: var(--gh-border) !important; }

/* --- 24h. Cards (header/footer) --- */
.card-header {
  background-color: rgba(255,255,255,0.02) !important;
  border-bottom-color: var(--gh-border) !important;
}
.card-footer {
  background-color: rgba(255,255,255,0.02) !important;
  border-top-color: var(--gh-border) !important;
}

/* --- 24i. Toasts --- */
.toast { background-color: rgba(12,12,22,0.95) !important; border-color: var(--gh-border) !important; color: var(--gh-text) !important; }
.toast-header { background-color: rgba(18,18,32,0.95) !important; border-bottom-color: var(--gh-border) !important; color: var(--gh-text) !important; }

/* --- 24j. Popovers --- */
.popover-header {
  background-color: var(--gh-surface) !important;
  border-bottom-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}
.popover-body { color: var(--gh-text) !important; }

/* --- 24k. Pagination (full) --- */
.page-link {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-accent) !important;
}
.page-link:hover {
  background-color: var(--gh-elevated) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-accent) !important;
}
.page-link:focus { box-shadow: 0 0 0 0.2rem rgba(34,211,167,0.25) !important; }
.page-item.disabled .page-link {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text-muted) !important;
}
.page-item.active .page-link {
  background-color: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
}

/* --- 24l. List groups --- */
.list-group-item {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}
.list-group-item.disabled, .list-group-item:disabled {
  background-color: var(--gh-surface) !important;
  color: var(--gh-text-muted) !important;
}
.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: var(--gh-elevated) !important;
  color: var(--gh-text) !important;
}
.list-group-item-action:active {
  background-color: var(--gh-bg) !important;
  color: var(--gh-text) !important;
}
.list-group-item-light {
  background-color: var(--gh-elevated) !important;
  color: var(--gh-text-muted) !important;
}

/* --- 24m. Badges (remaining) --- */
.badge-light { background-color: var(--gh-elevated) !important; color: var(--gh-text) !important; }
a.badge-light:hover, a.badge-light:focus { background-color: var(--gh-surface) !important; }
.badge-primary { background-color: var(--gh-accent) !important; color: var(--gh-bg) !important; }
.badge-secondary { background-color: var(--gh-elevated) !important; color: var(--gh-text-muted) !important; }

/* --- 24n. Alerts (remaining) --- */
.alert-light { background-color: var(--gh-elevated) !important; border-color: var(--gh-border) !important; color: var(--gh-text) !important; }
.alert-secondary { background-color: var(--gh-elevated) !important; border-color: var(--gh-border) !important; color: var(--gh-text-muted) !important; }

/* --- 24o. Jumbotron --- */
.jumbotron, .jumbotron-fluid { background-color: var(--gh-surface) !important; color: var(--gh-text) !important; }

/* --- 24p. Tables (extended) --- */
.table-hover tbody tr:hover { background-color: rgba(34,211,167,0.04) !important; color: var(--gh-text) !important; }
.table-active, .table-active > td, .table-active > th { background-color: rgba(34,211,167,0.07) !important; }
.table .thead-light th {
  background-color: var(--gh-elevated) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text-muted) !important;
}
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--gh-border) !important; }

/* --- 24q. Select2 (extended) --- */
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--gh-text) !important; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--gh-text-muted) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--gh-text-muted) transparent transparent !important; }
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--gh-elevated) !important;
}
.select2-container--default .select2-selection--multiple {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--gh-elevated) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--gh-text-muted) !important; }
.select2-container--default .select2-results__option--disabled { color: var(--gh-text-muted) !important; }
.select2-container--default .select2-results__option--selected { background-color: var(--gh-elevated) !important; }
.select2-search--dropdown .select2-search__field {
  background: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}

/* --- 24r. jQuery Confirm (jConfirm) dialogs --- */
.jconfirm .jconfirm-box,
.jconfirm.jconfirm-material .jconfirm-box,
.jconfirm.jconfirm-bootstrap .jconfirm-box,
.jconfirm.jconfirm-modern .jconfirm-box {
  background: var(--gh-elevated) !important;
  color: var(--gh-text) !important;
  border-radius: var(--gh-radius-lg) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}
.jconfirm .jconfirm-box div.jconfirm-title-c { color: var(--gh-text) !important; font-family: 'Bricolage Grotesque', sans-serif !important; }
.jconfirm .jconfirm-box div.jconfirm-content { color: var(--gh-text-muted) !important; }
.jconfirm .jconfirm-box div.jconfirm-closeIcon { color: var(--gh-text-muted) !important; }
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default {
  background: var(--gh-surface) !important;
  color: var(--gh-text) !important;
  border-color: var(--gh-border) !important;
  border-radius: 50rem !important;
}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover {
  background: rgba(255,255,255,0.04) !important;
}
.jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons { border-top-color: var(--gh-border) !important; }

/* --- 24s. Bootstrap Datepicker --- */
.datepicker { background: var(--gh-elevated) !important; color: var(--gh-text) !important; border-radius: var(--gh-radius) !important; }
.datepicker table tr td, .datepicker table tr th { color: var(--gh-text) !important; }
.datepicker table tr td.day:hover, .datepicker table tr td.day.focused {
  background: rgba(34,211,167,0.1) !important;
  color: var(--gh-text) !important;
  border-radius: var(--gh-radius-sm) !important;
}
.datepicker table tr td.today, .datepicker table tr td.today:hover {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
}
.datepicker table tr td.active, .datepicker table tr td.active:hover {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
}
.datepicker table tr td.range { background: rgba(34,211,167,0.08) !important; }
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover,
.datepicker tfoot tr th:hover { background: rgba(34,211,167,0.1) !important; }
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { color: var(--gh-text-dim) !important; }
.datepicker table tr td span:hover, .datepicker table tr td span.focused { background: rgba(34,211,167,0.1) !important; }
.datepicker-dropdown::before { border-bottom-color: var(--gh-border) !important; }
.datepicker-dropdown::after { border-bottom-color: var(--gh-elevated) !important; }

/* --- 24t. mCustomScrollbar --- */
.mCSB_scrollTools .mCSB_draggerRail { background-color: var(--gh-elevated) !important; }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: var(--gh-accent) !important;
  opacity: 0.5 !important;
  border-radius: 50rem !important;
}

/* --- 24u. Bootstrap utility overrides (extended) --- */
.text-dark { color: var(--gh-text) !important; }
.text-secondary { color: var(--gh-text-muted) !important; }
.text-body { color: var(--gh-text) !important; }
.border, .border-top, .border-right, .border-bottom, .border-left { border-color: var(--gh-border) !important; }
.border-light { border-color: var(--gh-border) !important; }
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.5) !important; }
.shadow { box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.5) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,0.5) !important; }
.close { color: var(--gh-text-muted) !important; text-shadow: none !important; }
.close:hover { color: var(--gh-text) !important; }

/* --- 24v. DataTables (CE-specific) --- */
.data-table-wrapper .head {
  background: var(--gh-elevated) !important;
  border-color: var(--gh-border) !important;
  border-radius: var(--gh-radius) var(--gh-radius) 0 0 !important;
}
.data-table-wrapper .head h3 { color: var(--gh-text) !important; }
.data-table-wrapper .head .view-all-table {
  background: var(--gh-surface) !important;
  color: var(--gh-text-muted) !important;
  border-radius: 50rem !important;
}
.data-table-wrapper table tr:nth-child(2n) td { background: rgba(255,255,255,0.01) !important; }
.data-table-wrapper table tr td .cog-drop-down {
  background: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-sm) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.data-table-wrapper table tr td .cog-drop-down li { border-top-color: var(--gh-border) !important; }
.data-table-wrapper table tr td .cog-drop-down li a { color: var(--gh-text-muted) !important; }
.data-table-wrapper table tr td .cog-drop-down li a:hover { color: var(--gh-accent) !important; }
.data-table-wrapper .dataTables_info { color: var(--gh-text-muted) !important; }

/* --- 24w. Sidebar (extended) --- */
.sidebar { background-color: var(--gh-surface) !important; }
.sidebar h6 { color: var(--gh-text) !important; }
.sidebar .actions-header {
  background: var(--gh-elevated) !important;
  border-color: var(--gh-border) !important;
}
.sidebar ul li a { color: var(--gh-accent) !important; }
.sidebar ul li a:hover, .sidebar ul li.active a { background: var(--gh-elevated) !important; }
.sidebar-toggle span,
.sidebar-toggle span::after,
.sidebar-toggle span::before { background: var(--gh-text) !important; }

/* --- 24x. Invoice pages --- */
.invoice-page-wraper .invoice-top-block .invoice-head { background: var(--gh-surface) !important; }
.invoice-page-wraper .invoice-top-block .invoice-head p { color: var(--gh-text-muted) !important; }
.invoice-page-wraper .invoice-mid-block { background: var(--gh-bg) !important; }
.invoice-page-wraper .invoice-bottom-block { background: var(--gh-surface) !important; }
.invoice-page-wraper .invoice-bottom-block ul li p { color: var(--gh-text) !important; }
.invoice-payment-block { background: var(--gh-surface) !important; }
.invoice-payment-block h3 { color: var(--gh-text) !important; }

/* --- 24y. Ticket pages --- */
.ticket-view-page .ticket-view-head p { color: var(--gh-text-muted) !important; }
.ticket-view-page .cm-tab-accordion { border-color: var(--gh-border) !important; }
.ticket-tab-reply-block { background: var(--gh-surface) !important; border-top-color: var(--gh-border) !important; }
.ticket-tab-reply-block .ticket-tab-reply-head h3 { color: var(--gh-text) !important; }
.ticket-tab-reply-block .ticket-tab-reply-box .ticket-reply { border-color: var(--gh-border) !important; }
.ticket-tab-wrapper .ticket-tab-box { border-top-color: var(--gh-border) !important; }
.ticket-avatar-ul li { color: var(--gh-text-muted) !important; border-left-color: var(--gh-border) !important; }
.ticket-avatar-ul li b { color: var(--gh-text) !important; }

/* --- 24z. Package/product pages --- */
.package-view-page .package-side-bar { background: var(--gh-surface) !important; }
.package-view-page .package-side-bar li a { color: var(--gh-text-muted) !important; }
.package-view-page .package-side-bar li a:hover {
  background: rgba(34,211,167,0.1) !important;
  color: var(--gh-accent) !important;
}
.package-view-page .package-side-bar .actions-side-bar li { border-bottom-color: var(--gh-border) !important; }
.product-dropdown .actions-ul { background: var(--gh-elevated) !important; border: 1px solid var(--gh-border) !important; border-radius: var(--gh-radius-sm) !important; }
.product-dropdown .actions-ul li a { color: var(--gh-text) !important; }
.product-dropdown .actions-ul li a:hover { background: rgba(34,211,167,0.1) !important; color: var(--gh-accent) !important; }
.product-detail-block { background: var(--gh-bg) !important; }
.product-detail-block .product-detail-4boxes .product-detail-box { background: var(--gh-surface) !important; }
.product-detail-block .product-detail-4boxes .product-detail-box h5 { color: var(--gh-text) !important; }
.product-detail-block .product-detail-4boxes .product-detail-box h6 { color: var(--gh-text-muted) !important; }

/* --- 24aa. Misc CE components --- */
.white-card { background: var(--gh-surface) !important; }
.white-card h6 { color: var(--gh-text) !important; border-bottom-color: var(--gh-border) !important; }
.white-card ul .card-label { color: var(--gh-text-muted) !important; }
.white-card ul li { border-top-color: var(--gh-border) !important; }
.cm-box-holder { background: var(--gh-surface) !important; border-color: var(--gh-border) !important; }
.config-options { background: var(--gh-surface) !important; }
.info-bar { background: var(--gh-surface) !important; border-color: var(--gh-border) !important; }
.summary-row { border-color: var(--gh-border) !important; }
.summary-total ul li { color: var(--gh-text-muted) !important; }
.summary-total ul li .val { color: var(--gh-text) !important; }
.inline-heading h4 { background: transparent !important; color: var(--gh-text) !important; }
.inline-heading::before { border-color: var(--gh-border) !important; }
.action-btns {
  background: var(--gh-elevated) !important;
  color: var(--gh-text-muted) !important;
  border-color: var(--gh-border) !important;
  border-radius: var(--gh-radius-sm) !important;
}
.action-btns:hover { background: var(--gh-surface) !important; }

/* --- 24bb. Payment method selection --- */
.payment-method .select-payment label::before {
  background: var(--gh-elevated) !important;
  border-color: var(--gh-border) !important;
}
.payment-method .select-payment label.selected {
  background: rgba(34,211,167,0.08) !important;
}
.payment-method .select-payment label.selected::before {
  background: var(--gh-accent) !important;
}
.payment-method .select-payment label .payment-card {
  background: var(--gh-elevated) !important;
  border-color: var(--gh-border) !important;
}

/* --- 24cc. Submit ticket panel --- */
.submit-ticket {
  background: linear-gradient(180deg, rgba(34,211,167,0.05), rgba(34,211,167,0.02)) !important;
  border-color: var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
}
.submit-ticket h6 { color: var(--gh-accent) !important; }
.submit-ticket p { color: var(--gh-text-muted) !important; }

/* --- 24dd. Knowledge base article/categories --- */
.knowledge-base-article-page .knowledge-base-content-block { background: var(--gh-surface) !important; }
#kbcatergories .category h4 a { color: var(--gh-text) !important; }
#announcement-page .announcement-title a { color: var(--gh-text) !important; }
#article-content blockquote {
  background: var(--gh-elevated) !important;
  border-left-color: var(--gh-accent) !important;
}
#article-content p, #article-content ol li, #article-content ul li { color: var(--gh-text) !important; }

/* --- 24ee. Client area tabs (homepage) --- */
.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block {
  background: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
}
.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block .client-area-tabs-head {
  background: var(--gh-elevated) !important;
  border-bottom-color: var(--gh-border) !important;
}
.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block .client-area-tabs-head h3 { color: var(--gh-text) !important; }
.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block .client-area-faq .accordion .accordion-item { border-top-color: var(--gh-border) !important; }
.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block .client-area-announcement ul li { border-top-color: var(--gh-border) !important; }
.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block .client-area-popular-article ul li { border-top-color: var(--gh-border) !important; }

/* --- 24ff. Upgrade/downgrade pages --- */
.upgrade-downgrade-top { background: var(--gh-surface) !important; }
.upgrade-downgrade-top p { color: var(--gh-text-muted) !important; }
.upgrade-downgrade-main { background: var(--gh-bg) !important; }
.upgrade-downgrade-main .discription { background: rgba(34,211,167,0.08) !important; border-color: var(--gh-accent) !important; }
.upgrade-downgrade-second { background: var(--gh-surface) !important; }

/* --- 24gg. Affiliate pages --- */
.affiliate-system-page .affiliate-side-bar { background: var(--gh-surface) !important; }
.affiliate-system-page .affiliate-side-bar li a { color: var(--gh-text-muted) !important; }
.affiliate-system-page .affiliate-side-bar li a:hover { background: rgba(34,211,167,0.1) !important; color: var(--gh-accent) !important; }
.affiliate-system-page .affiliate-status-block .affiliate-boxes .affiliate-single-box { background: var(--gh-surface) !important; }

/* --- 24hh. Hosting plan rows --- */
.hosting-plan-row { background: var(--gh-surface) !important; border-color: var(--gh-border) !important; }
.hosting-plan-row .plan-rate { border-color: var(--gh-border) !important; }
.hosting-features { border-top-color: var(--gh-border) !important; }
.hosting-features .items { border-color: var(--gh-border) !important; }
.hosting-features .icon i { color: var(--gh-text-muted) !important; }

/* --- 24ii. DataTables responsive modal --- */
div.dtr-modal div.dtr-modal-display {
  background-color: var(--gh-elevated) !important;
  border-color: var(--gh-border) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6) !important;
}
div.dtr-modal div.dtr-modal-close {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}

/* --- 24jj. Mobile menu --- */
.mobile-menu { background: var(--gh-elevated) !important; }
.mobile-menu > ul > li > a { color: var(--gh-text) !important; }
.mobile-menu > ul > li > a:hover { color: var(--gh-accent) !important; }

/* --- 24kk. Form option / radio (cart) --- */
.form-option label::before {
  background: var(--gh-elevated) !important;
  border-color: var(--gh-border) !important;
}
.form-option label::after { background: var(--gh-accent) !important; }
.form-option label .text { color: var(--gh-text-muted) !important; }
.radio-container .radio-checkmark::after { background: var(--gh-bg) !important; }
.radio-container input:checked ~ .radio-checkmark { background: var(--gh-accent) !important; }


/* ============================================================
   25. SOPHIE DESIGN REVIEW — TARGETED FIXES
   Based on Gemini 3.1 Pro visual analysis of all pages
   ============================================================ */

/* --- 25a. Stepper orange dot — NUCLEAR KILL --- */
/* The active step node has an inline background-image with an orange dot.
   We need to override with maximum specificity + all pseudo-elements */
.cart-status-nodes.now .cart-status-icon,
.cart-status-nodes.active .cart-status-icon,
.cart-status-nodes.start .cart-status-icon,
.cart-status-nodes.done .cart-status-icon,
.cart-status-nodes .cart-status-icon,
.cart-status-nodes.start.first-step.now.active .cart-status-icon {
  background: var(--gh-text-dim) !important;
  background-image: none !important;
  border-radius: 50% !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid var(--gh-text-dim) !important;
}
.cart-status-nodes.now .cart-status-icon,
.cart-status-nodes.active .cart-status-icon,
.cart-status-nodes.start.first-step.now.active .cart-status-icon {
  background: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
  box-shadow: 0 0 10px rgba(34,211,167,0.4) !important;
}
.cart-status-nodes.done .cart-status-icon {
  background: var(--gh-text-muted) !important;
  border-color: var(--gh-text-muted) !important;
}
/* Also kill any SVG/image inside the icon */
.cart-status-nodes .cart-status-icon img,
.cart-status-nodes .cart-status-icon svg {
  display: none !important;
}
/* Override ANY inline styles on the node elements */
.cart-status-nodes[style],
.cart-status-nodes .cart-status-icon[style] {
  background-image: none !important;
}

/* --- 25b. FAQ accordion — fix icon overlap with text --- */
.accordion-item,
.client-area-faq .accordion .accordion-item {
  position: relative !important;
  padding-left: 40px !important;
}
.accordion-item::before,
.client-area-faq .accordion .accordion-item::before {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--gh-accent) !important;
  opacity: 0.6 !important;
  font-size: 0.85rem !important;
  width: 20px !important;
  text-align: center !important;
}
/* FAQ tab active state */
.cm-tabs .resp-tabs-list li {
  position: relative !important;
  padding-bottom: 12px !important;
}
.cm-tabs .resp-tabs-list li.resp-tab-active {
  border-bottom: 2px solid var(--gh-accent) !important;
  color: #fff !important;
}

/* --- 25c. Login page header — cleaner --- */
.page-header-top {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  padding: 1.25rem 1.75rem !important;
  margin-bottom: 1.5rem !important;
}
.page-header-top h1 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 !important;
}

/* --- 25d. Error/warning banners — gold treatment --- */
.alert-warning,
.error-box,
.page-error {
  background-color: rgba(240,192,64,0.08) !important;
  border: 1px solid rgba(240,192,64,0.3) !important;
  color: var(--gh-gold) !important;
  border-radius: var(--gh-radius) !important;
}

/* --- 25e. Footer logo on mobile — constrain size --- */
@media (max-width: 767px) {
  .footer img,
  .footer .brand-logo,
  .footer .footer-logo {
    max-width: 160px !important;
    height: auto !important;
    margin: 0 auto 16px !important;
    display: block !important;
  }
  .footer .footer-section,
  .footer .footer-col {
    text-align: center !important;
  }
}


/* ============================================================
   26. MOBILE RESPONSIVE — COMPREHENSIVE OVERHAUL
   Fixes for both ClientExec portal and main site mobile
   ============================================================ */

@media (max-width: 767px) {
  /* --- 26a. Order page mobile — CRITICAL fix for collapsed cards --- */
  /* Force the products container to be visible and properly laid out */
  .product-flex-wrapper,
  .products-grid,
  .order-process-container,
  .cart-pages-wrapper .product-flex-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    min-height: auto !important;
    overflow: visible !important;
    width: 100% !important;
  }

  /* Ensure product cards are visible and full-width */
  .product-flex-item,
  .product-flex-wrapper .product-flex-item,
  .product-flex-wrapper.four-col .product-flex-item,
  .product-flex-wrapper.three-col .product-flex-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* All parts of product card must be visible */
  .product-flex-item > *,
  .product-flex-item .head,
  .product-flex-item .product-features,
  .product-flex-item .continue-button {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* --- 26b. Cart wrapper overflow control --- */
  .cart-pages-wrapper,
  .content-area,
  .ce-container,
  .dashboard-wraper {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Inner sections */
  .cart-pages-wrapper section,
  .cart-pages-wrapper .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* --- 26c. Stepper on mobile — compact --- */
  .cart-status-bar {
    padding: 10px 12px !important;
    margin: 0.5rem auto 1rem !important;
    max-width: 100% !important;
  }
  .cart-status-nodes .cart-status-label {
    font-size: 0.62rem !important;
    white-space: nowrap !important;
  }

  /* --- 26d. Login form mobile --- */
  .login-form .panel,
  .login-form .well,
  .login-form .card {
    max-width: 100% !important;
    margin: 1rem 0 !important;
    border-radius: var(--gh-radius) !important;
  }

  /* --- 26e. FAQ/KB mobile --- */
  .cm-tabs .resp-tabs-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .cm-tabs .resp-tabs-list li {
    flex: 1 1 auto !important;
    text-align: center !important;
    font-size: 0.75rem !important;
    padding: 8px 10px !important;
  }

  /* --- 26f. Tables on mobile — horizontal scroll --- */
  .data-table-wrapper,
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .data-table-wrapper table {
    min-width: 500px !important;
  }

  /* --- 26g. Config page mobile --- */
  .config-product-section .summary-info,
  .config-product-section .summary-holder {
    border-radius: var(--gh-radius-sm) !important;
    margin: 8px 0 !important;
  }

  /* --- 26h. General mobile spacing --- */
  .page-header-top {
    border-radius: 0 !important;
    margin: 0 0 1rem !important;
    padding: 0.75rem 1rem !important;
  }

  /* Footer stacking */
  .footer {
    padding: 32px 16px 24px !important;
  }
  .footer .container > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* Tablet breakpoint */
@media (min-width: 768px) and (max-width: 1024px) {
  .product-flex-wrapper {
    gap: 12px !important;
  }
  .product-flex-wrapper .product-flex-item {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
  }
}


/* ============================================================
   27. STEPPER DOT FIX — FINAL (vendor uses #ff780b border trick)
   The orange dot is created by border+background on .cart-status-nodes
   ============================================================ */

/* Kill ALL orange backgrounds and borders on nodes */
.cart-status-bar .cart-status-nodes,
.cart-status-bar .cart-status-nodes.start,
.cart-status-bar .cart-status-nodes.end,
.cart-status-bar .cart-status-nodes.now,
.cart-status-bar .cart-status-nodes.done,
.cart-status-bar .cart-status-nodes.active,
.cart-status-bar .cart-status-nodes.first-step,
.cart-status-bar .cart-status-nodes.done.first-step,
.cart-status-bar .cart-status-nodes.start.first-step.now.active {
  background: var(--gh-text-dim) !important;
  background-image: none !important;
  border: 8px solid var(--gh-text-dim) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  filter: none !important;
  top: 0 !important;
}

/* Active/current step — green dot */
.cart-status-bar .cart-status-nodes.now,
.cart-status-bar .cart-status-nodes.start.first-step.now.active {
  background: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
  box-shadow: 0 0 12px rgba(34,211,167,0.4) !important;
}

/* Done steps — muted */
.cart-status-bar .cart-status-nodes.done,
.cart-status-bar .cart-status-nodes.done.first-step {
  background: var(--gh-text-muted) !important;
  border-color: var(--gh-text-muted) !important;
}

/* Kill the pseudo-element checkmarks/dots from vendor */
.cart-status-bar .cart-status-nodes::before,
.cart-status-bar .cart-status-nodes.now::before,
.cart-status-bar .cart-status-nodes.done::before {
  display: none !important;
  content: none !important;
}

/* Active label — green not orange */
.cart-status-bar .cart-status-nodes.active .cart-status-label,
.cart-status-bar .cart-status-nodes.now .cart-status-label {
  color: var(--gh-accent) !important;
  font-weight: 600 !important;
}

/* Inner rail — green not orange */
.cart-status-bar .inner-rail {
  background: var(--gh-accent) !important;
  opacity: 0.5 !important;
}

/* Rail base — dark */
.cart-status-bar .cart-status-rail {
  background: var(--gh-elevated) !important;
  box-shadow: none !important;
}


/* ============================================================
   28. SOPHIE V2 REVIEW — REMAINING POLISH
   ============================================================ */

/* --- Input icons in login form — brighten from dim to muted --- */
.input-group-text i,
.input-group-addon i,
.form-control-feedback,
.input-group-append .input-group-text i,
.input-group-prepend .input-group-text i {
  color: var(--gh-text-muted) !important;
}

/* --- Checkbox styling — accent color override --- */
input[type="checkbox"] {
  accent-color: var(--gh-accent) !important;
}
.form-check-input:checked {
  background-color: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
}
.form-check-input {
  background-color: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(34,211,167,0.25) !important;
  border-color: var(--gh-accent) !important;
}

/* --- Radio buttons — accent instead of Bootstrap blue --- */
input[type="radio"] {
  accent-color: var(--gh-accent) !important;
}
.form-check-input[type="radio"]:checked {
  background-color: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
}

/* --- Alert close button styling --- */
.alert-warning .close,
.alert-warning .btn-close,
.alert .close {
  color: inherit !important;
  opacity: 0.6 !important;
  text-shadow: none !important;
}
.alert .close:hover,
.alert-warning .close:hover {
  opacity: 1 !important;
}

/* --- Domain search input overlap fix --- */
.domain-page .domain-section .resp-tab-content input[type="text"],
#domain-search-input {
  padding-left: 1rem !important;
}
.domain-page .domain-section .resp-tab-content .input-group-prepend .input-group-text {
  background: var(--gh-elevated) !important;
  border-color: var(--gh-border) !important;
  color: var(--gh-text-muted) !important;
  border-right: none !important;
}


/* ============================================================
   29. SOPHIE V3 — FINAL POLISH
   ============================================================ */

/* --- Radio & checkbox — explicit sizing + dark unchecked state --- */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--gh-accent) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}
.login-form input[type="checkbox"] {
  margin-right: 8px !important;
  position: relative !important;
  top: 2px !important;
}

/* --- Login input group — seamless icon integration --- */
.input-group {
  background-color: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-sm) !important;
  transition: border-color var(--gh-transition) !important;
}
.input-group:focus-within {
  border-color: var(--gh-accent) !important;
  box-shadow: 0 0 0 3px var(--gh-accent-dim) !important;
}
.input-group .form-control {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.input-group .input-group-text,
.input-group .input-group-addon,
.input-group .input-group-prepend .input-group-text,
.input-group .input-group-append .input-group-text {
  background-color: transparent !important;
  border: none !important;
  color: var(--gh-text-muted) !important;
}

/* --- Domain search container — cohesive elevated unit --- */
.domain-search-form .input-group,
.domain-check-form .input-group,
.domain-page .input-group {
  background-color: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-sm) !important;
  overflow: hidden !important;
}
.domain-search-form select,
.domain-check-form select,
.domain-page .input-group select {
  background-color: var(--gh-elevated) !important;
  border: none !important;
  border-left: 1px solid var(--gh-border) !important;
  color: var(--gh-text) !important;
}


/* ============================================================
   30. FINAL SIGN-OFF — Checkbox/Radio Native Override
   Must be at the BOTTOM of the file to override everything
   ============================================================ */

/* Force native appearance so accent-color works properly */
input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  accent-color: var(--gh-accent) !important;
  width: 16px !important;
  height: 16px !important;
  background-color: transparent !important;
  cursor: pointer !important;
  margin: 0 !important;
}
input[type="radio"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  accent-color: var(--gh-accent) !important;
  width: 18px !important;
  height: 18px !important;
  background-color: transparent !important;
  cursor: pointer !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}

/* Checkbox + label alignment */
.form-check,
label:has(input[type="checkbox"]) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--gh-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* Radio + label alignment */
.radio-inline,
label:has(input[type="radio"]) {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--gh-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}


/* ============================================================
   31. BOOTSTRAP CUSTOM CONTROLS — Override pseudo-elements
   ClientExec uses Bootstrap .custom-control, not native inputs
   ============================================================ */

/* Unchecked state — dark elevated surface */
.custom-control-label::before,
.form-check-label::before {
  background-color: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
  transition: all 0.2s ease !important;
}

/* Checked state — Gravity Host green */
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked ~ .form-check-label::before,
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
}

/* Checkbox tick SVG — dark on green */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2306060c' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e") !important;
}

/* Radio dot — dark on green */
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2306060c'/%3e%3c/svg%3e") !important;
}

/* Focus ring — subtle green glow */
.custom-control-input:focus ~ .custom-control-label::before,
.form-check-input:focus ~ .form-check-label::before {
  box-shadow: 0 0 0 0.2rem rgba(34,211,167,0.15) !important;
  border-color: var(--gh-accent) !important;
}

/* Hover state */
.custom-control-label:hover::before {
  border-color: rgba(255,255,255,0.12) !important;
}


/* ============================================================
   32. NUCLEAR CHECKBOX/RADIO — appearance:none + clip-path
   Belt-and-suspenders: targets EVERY possible selector
   ============================================================ */

/* Raw inputs with appearance:none + grid centering */
input[type="radio"],
input[type="radio"].form-check-input,
.ce-container input[type="radio"],
.clientexec-form input[type="radio"],
.content-area input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-content: center !important;
  cursor: pointer !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}
input[type="checkbox"],
input[type="checkbox"].form-check-input,
.ce-container input[type="checkbox"],
.clientexec-form input[type="checkbox"],
.content-area input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  border-radius: 4px !important;
  display: inline-grid !important;
  place-content: center !important;
  cursor: pointer !important;
  margin-right: 8px !important;
}

/* Checked state — green */
input[type="radio"]:checked,
input[type="radio"]:checked.form-check-input,
.ce-container input[type="radio"]:checked,
.content-area input[type="radio"]:checked {
  background-color: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
}
input[type="checkbox"]:checked,
input[type="checkbox"]:checked.form-check-input,
.ce-container input[type="checkbox"]:checked,
.content-area input[type="checkbox"]:checked {
  background-color: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
}

/* Radio dot — dark circle on green */
input[type="radio"]:checked::before {
  content: "" !important;
  width: 0.5rem !important;
  height: 0.5rem !important;
  border-radius: 50% !important;
  background-color: var(--gh-bg) !important;
}

/* Checkbox tick — dark tick on green (clip-path approach) */
input[type="checkbox"]:checked::before {
  content: "" !important;
  width: 0.65em !important;
  height: 0.65em !important;
  background-color: var(--gh-bg) !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}

/* Focus ring */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  box-shadow: 0 0 0 0.2rem rgba(34,211,167,0.15) !important;
  border-color: var(--gh-accent) !important;
  outline: none !important;
}

/* Active tab blue underline — force green */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  border-bottom-color: var(--gh-accent) !important;
  color: var(--gh-text) !important;
}

/* Add cache-busting version tag */


/* ============================================================
   33. ACTUAL ELEMENT FIXES (Based on inspecting real HTML)
   ============================================================ */

/* --- Login checkbox: it's a plain <input type=checkbox> inside <label class="checkbox"> --- */
label.checkbox input[type="checkbox"],
.login-form input[type="checkbox"],
.content-area input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  background-color: var(--gh-elevated) !important;
  border: 2px solid rgba(255,255,255,0.2) !important;
  border-radius: 4px !important;
  display: inline-grid !important;
  place-content: center !important;
  cursor: pointer !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}
label.checkbox input[type="checkbox"]:checked,
.login-form input[type="checkbox"]:checked,
.content-area input[type="checkbox"]:checked {
  background-color: var(--gh-accent) !important;
  border-color: var(--gh-accent) !important;
}
label.checkbox input[type="checkbox"]:checked::before {
  content: "" !important;
  width: 0.65em !important;
  height: 0.65em !important;
  background-color: var(--gh-bg) !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}
label.checkbox input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(34,211,167,0.2) !important;
  border-color: var(--gh-accent) !important;
}
label.checkbox {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--gh-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
}

/* --- Domain tabs look like radios — they're actually .resp-tabs-list li --- */
/* The "Register Domain" / "Transfer Domain" are resp-tabs, not radio buttons */
/* Make active tab use accent green instead of Bootstrap blue */
.domain-page .resp-tabs-list li,
.config-product-section .resp-tabs-list li,
.cart-pages-wrapper .resp-tabs-list li {
  color: var(--gh-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 20px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--gh-transition) !important;
}
.domain-page .resp-tabs-list li.resp-tab-active,
.config-product-section .resp-tabs-list li.resp-tab-active,
.cart-pages-wrapper .resp-tabs-list li.resp-tab-active {
  color: #fff !important;
  border-bottom-color: var(--gh-accent) !important;
  background: transparent !important;
}
.domain-page .resp-tabs-list li:hover,
.config-product-section .resp-tabs-list li:hover {
  color: var(--gh-text) !important;
}

/* Also override any Bootstrap .nav-tabs .active that might be in domain context */
.domain-page .nav-tabs .nav-link.active,
.cart-pages-wrapper .nav-tabs .nav-link.active {
  border-bottom: 2px solid var(--gh-accent) !important;
  background: transparent !important;
  color: #fff !important;
}


/* ============================================================
   34. SOPHIE V4 REFINEMENTS — SVG tick + tab pseudo-element radio
   ============================================================ */

/* --- Checkbox: SVG tick via ::after (more reliable than clip-path) --- */
label.checkbox input[type="checkbox"]::after,
.login-form input[type="checkbox"]::after,
.content-area input[type="checkbox"]::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  width: 100% !important; height: 100% !important;
  background-image: none !important;
  background-size: 12px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
label.checkbox input[type="checkbox"]:checked::after,
.login-form input[type="checkbox"]:checked::after,
.content-area input[type="checkbox"]:checked::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306060c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Increase unchecked border visibility */
label.checkbox input[type="checkbox"],
.login-form input[type="checkbox"] {
  border: 1px solid rgba(255,255,255,0.12) !important;
  position: relative !important;
}
label.checkbox input[type="checkbox"]:hover {
  border-color: rgba(255,255,255,0.25) !important;
}

/* --- Domain tab fake radio pseudo-elements --- */
.domain-page .resp-tabs-list li::before,
.domain-page .resp-tabs-list li.resp-tab-active::before {
  border-color: var(--gh-accent) !important;
}
.domain-page .resp-tabs-list li.resp-tab-active::after {
  background-color: var(--gh-accent) !important;
}
/* If using FontAwesome icons as radio indicators */
.domain-page .resp-tabs-list li.resp-tab-active i,
.domain-page .resp-tabs-list li.resp-tab-active .fa,
.domain-page .resp-tabs-list li.resp-tab-active [class^="icon-"] {
  color: var(--gh-accent) !important;
}
/* Inactive tab bottom border */
.domain-page .resp-tabs-list li {
  border-bottom: 2px solid var(--gh-border) !important;
}


/* ============================================================
   35. SOPHIE COMPREHENSIVE REVIEW — PHASE 4 NUCLEAR OVERRIDE
   Targets every remaining default style across all pages
   ============================================================ */

/* --- 35a. Kill ALL nav dropdown carets/arrows --- */
.main-menu > ul > li > a.dropdown-toggle::after,
.dropdown-toggle::after,
.navbar-nav .caret,
.main-menu .caret,
.nav .caret {
  display: none !important;
  content: none !important;
}
/* Remove the padding-right we added for carets */
.main-menu > ul > li > a.dropdown-toggle {
  padding-right: 14px !important;
}

/* --- 35b. KB Article page — COMPLETE dark theme --- */
.knowledge-base-article-page {
  background: var(--gh-bg) !important;
  color: var(--gh-text) !important;
}
.knowledge-base-article-page .knowledge-base-content-block {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-lg) !important;
  padding: 2rem !important;
  color: var(--gh-text) !important;
}
/* Article content itself */
#article-content {
  color: var(--gh-text) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  line-height: 1.8 !important;
}
#article-content p,
#article-content li,
#article-content td,
#article-content th,
#article-content span,
#article-content div {
  color: var(--gh-text) !important;
}
#article-content h1,
#article-content h2,
#article-content h3,
#article-content h4 {
  color: #fff !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
}
#article-content a {
  color: var(--gh-accent) !important;
}
#article-content img {
  border-radius: var(--gh-radius-sm) !important;
  max-width: 100% !important;
}
#article-content blockquote {
  background: var(--gh-elevated) !important;
  border-left: 3px solid var(--gh-accent) !important;
  padding: 1rem 1.5rem !important;
  border-radius: 0 var(--gh-radius-sm) var(--gh-radius-sm) 0 !important;
  color: var(--gh-text-muted) !important;
}
#article-content pre,
#article-content code {
  background: var(--gh-elevated) !important;
  color: var(--gh-accent) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-sm) !important;
  font-family: 'JetBrains Mono', monospace !important;
}
#article-content pre {
  padding: 1rem !important;
  overflow-x: auto !important;
}
#article-content table {
  background: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
}
#article-content table th {
  background: var(--gh-elevated) !important;
  color: var(--gh-text-muted) !important;
}

/* KB search bar */
.knowledge-base-search,
.knowledge-base-search2 {
  background: var(--gh-surface) !important;
  border-radius: var(--gh-radius-lg) !important;
  padding: 1.5rem !important;
  margin-bottom: 2rem !important;
}
.knowledge-search-input {
  background: var(--gh-bg) !important;
  border: 1px solid var(--gh-border) !important;
  color: var(--gh-text) !important;
  border-radius: var(--gh-radius-sm) 0 0 var(--gh-radius-sm) !important;
  padding: 12px 16px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.knowledge-search-input:focus {
  border-color: var(--gh-accent) !important;
  outline: none !important;
}
.knowledge-search-submit,
.knowledge-base-search button,
.knowledge-base-search2 button {
  background: var(--gh-accent) !important;
  border: none !important;
  color: var(--gh-bg) !important;
  border-radius: 0 var(--gh-radius-sm) var(--gh-radius-sm) 0 !important;
  padding: 12px 20px !important;
  cursor: pointer !important;
}
.knowledge-search-submit i {
  color: var(--gh-bg) !important;
}

/* KB rating stars */
#knowledge-stars {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  padding: 1.5rem !important;
  margin-top: 2rem !important;
}
#knowledge-stars h4 {
  color: var(--gh-text) !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
}
.rating .star {
  color: var(--gh-text-dim) !important;
  cursor: pointer !important;
  font-size: 1.5rem !important;
}
.rating .star:hover,
.rating .star.active {
  color: var(--gh-gold) !important;
}

/* KB next/prev navigation */
.knowledge-next-prev {
  border-top: 1px solid var(--gh-border) !important;
  padding-top: 1rem !important;
  margin-top: 1rem !important;
}
.knowledge-next-prev a {
  color: var(--gh-accent) !important;
}

/* --- 35c. Global font enforcement (ultra-aggressive) --- */
body, body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(svg):not(path) {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.panel-title, .header-title,
.resp-tab-item, .resp-accordion,
.client-area-tabs-head h3,
.knowledge-base-article-page h1,
.knowledge-base-article-page h2 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  letter-spacing: -0.01em !important;
}

/* --- 35d. Select dropdowns — custom dark styled --- */
select,
select.form-control,
.custom-select,
.bootstrap-select .btn,
.searchSelect2 + .select2-container .select2-selection {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: var(--gh-surface) !important;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236e6e84%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem top 50% !important;
  background-size: 0.65rem auto !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-sm) !important;
  color: var(--gh-text) !important;
  padding: 10px 2.5rem 10px 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important;
}
select:focus {
  border-color: var(--gh-accent) !important;
  box-shadow: 0 0 0 3px var(--gh-accent-dim) !important;
  outline: none !important;
}
select option {
  background: var(--gh-elevated) !important;
  color: var(--gh-text) !important;
}

/* --- 35e. Client area homepage FAQ/Articles heading --- */
.client-area-bottom-block {
  background: transparent !important;
}
.client-area-bottom-block .cm-tabs {
  background: transparent !important;
}
.client-area-bottom-block .resp-tabs-list {
  background: transparent !important;
  border-bottom: 1px solid var(--gh-border) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.client-area-bottom-block .resp-tabs-list li {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--gh-text-muted) !important;
  background: transparent !important;
  border: none !important;
  padding: 12px 20px !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease !important;
}
.client-area-bottom-block .resp-tabs-list li.resp-tab-active {
  color: #fff !important;
  border-bottom-color: var(--gh-accent) !important;
  background: transparent !important;
}
.client-area-bottom-block .resp-tab-content {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--gh-radius) var(--gh-radius) !important;
}
/* Accordion in mobile mode */
.client-area-bottom-block h2.resp-accordion {
  background: var(--gh-surface) !important;
  color: var(--gh-text) !important;
  border: 1px solid var(--gh-border) !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 1rem !important;
  padding: 14px 20px !important;
}
.client-area-bottom-block h2.resp-tab-active {
  background: var(--gh-elevated) !important;
}
.resp-arrow {
  border-color: var(--gh-text-muted) !important;
}

/* --- 35f. Client area tab content blocks --- */
.client-area-tabs-block {
  background: var(--gh-surface) !important;
  padding: 1.5rem !important;
}
.client-area-tabs-block .client-area-tabs-head {
  background: var(--gh-elevated) !important;
  border-bottom: 1px solid var(--gh-border) !important;
  padding: 1rem 1.5rem !important;
  border-radius: var(--gh-radius) var(--gh-radius) 0 0 !important;
  margin: -1.5rem -1.5rem 1.5rem !important;
}
.client-area-tabs-head h3 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
}

/* FAQ accordion items inside tabs */
.client-area-faq .accordion {
  background: transparent !important;
}
.client-area-faq .accordion .accordion-item {
  background: transparent !important;
  border-bottom: 1px solid var(--gh-border) !important;
  padding: 14px 20px 14px 40px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
  position: relative !important;
}
.client-area-faq .accordion .accordion-item:hover {
  background: var(--gh-elevated) !important;
}
.client-area-faq .accordion .accordion-item::before {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--gh-accent) !important;
  opacity: 0.5 !important;
}

/* Popular articles list */
.client-area-popular-article ul {
  list-style: none !important;
  padding: 0 !important;
}
.client-area-popular-article ul li {
  border-bottom: 1px solid var(--gh-border) !important;
  padding: 10px 0 !important;
}
.client-area-popular-article ul li a {
  color: var(--gh-accent) !important;
  font-size: 0.9rem !important;
}

/* Announcements list */
.client-area-announcement ul {
  list-style: none !important;
  padding: 0 !important;
}
.client-area-announcement ul li {
  border-bottom: 1px solid var(--gh-border) !important;
  padding: 10px 0 !important;
}
.client-area-announcement ul li a {
  color: var(--gh-text) !important;
}
.client-area-announcement ul li span {
  color: var(--gh-text-muted) !important;
  font-size: 0.8rem !important;
}

/* --- 35g. Announcement page --- */
.announcement-item,
.announcement-block {
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  padding: 1.5rem !important;
  margin-bottom: 1rem !important;
}
.announcement-item h4,
.announcement-block h4 {
  color: #fff !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
}
.announcement-item p,
.announcement-block p {
  color: var(--gh-text-muted) !important;
}
.announcement-item .date,
.announcement-block .date {
  color: var(--gh-text-dim) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem !important;
}

/* --- 35h. Support/ticket pages --- */
.support-search-big {
  display: flex !important;
}
.support-search-big input {
  flex: 1 !important;
  border-radius: var(--gh-radius-sm) 0 0 var(--gh-radius-sm) !important;
}
.support-search-big button {
  background: var(--gh-accent) !important;
  border: none !important;
  color: var(--gh-bg) !important;
  border-radius: 0 var(--gh-radius-sm) var(--gh-radius-sm) 0 !important;
  padding: 0 20px !important;
}

/* --- 35i. Footer — match homepage exactly --- */
.footer {
  background: var(--gh-surface) !important;
  border-top: 1px solid var(--gh-border) !important;
  color: var(--gh-text-muted) !important;
  padding: 48px 0 32px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.footer h4, .footer h5, .footer h6,
.footer .footer-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--gh-text-dim) !important;
  margin-bottom: 1rem !important;
}
.footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer ul li {
  margin-bottom: 0.5rem !important;
}
.footer a {
  color: var(--gh-text-muted) !important;
  font-size: 0.88rem !important;
  transition: color 0.2s ease !important;
}
.footer a:hover {
  color: var(--gh-accent) !important;
}
.footer .copyright,
.footer .footer-bottom {
  color: var(--gh-text-dim) !important;
  font-size: 0.78rem !important;
  border-top: 1px solid var(--gh-border) !important;
  padding-top: 1.5rem !important;
  margin-top: 2rem !important;
}

/* --- 35j. Tidio chat widget — dark theme via CSS targeting --- */
/* Note: Tidio creates shadow DOM; some things can only be changed via Tidio dashboard.
   But we can target the outer iframe container */
#tidio-chat-iframe,
[id^="tidio"] {
  /* Can't style inside iframe, but can position/size the container */
}
/* If Tidio inserts elements outside iframe: */
.tidio-1ldr8ps,
[class*="tidio"] {
  border-radius: var(--gh-radius-lg) !important;
}

/* --- 35k. Content area catch-all — kill any remaining white/light backgrounds --- */
.content-area *,
.dashboard-wraper *,
.client-area-page *,
.knowledge-base-article-page *,
.cart-pages-wrapper * {
  /* Only override backgrounds that are explicitly white/light */
}
/* Specific white background killers */
.bg-white,
.panel-body.bg-white,
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background: white"],
[style*="background: #fff"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color: rgb(248"],
[style*="background-color: rgb(245"],
[style*="background-color: rgb(233"],
[style*="background-color: rgb(222"] {
  background-color: var(--gh-surface) !important;
  color: var(--gh-text) !important;
}

/* --- 35l. Order flow — product name visibility in step 2 --- */
.config-product-section .product-name,
.config-product-section .product-title,
.config-product-section .selected-product-name,
.cart-pages-wrapper .product-name,
.summary-info .product-name {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}
/* Cart summary sidebar — ensure visible */
.summary-holder,
.cart-summary-sidebar,
#cartSummary,
.config-product-section .summary-info {
  background: var(--gh-elevated) !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
  padding: 1.5rem !important;
  display: block !important;
  visibility: visible !important;
}
.summary-holder h3,
.cart-summary-sidebar h3,
.summary-info h3 {
  color: #fff !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 1.1rem !important;
  margin-bottom: 1rem !important;
}
.summery-fees,
.summary-fees {
  color: var(--gh-text) !important;
}
.summery-fees li,
.summary-fees li {
  border-bottom: 1px solid var(--gh-border) !important;
  padding: 8px 0 !important;
  color: var(--gh-text-muted) !important;
}
.total-amount,
.price-total,
.summary-total {
  color: var(--gh-accent) !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
}


/* ============================================================
   36. FINAL FIXES — Exact vendor.css selector overrides
   Based on actual DOM inspection + vendor.css selector extraction
   ============================================================ */

/* --- 36a. KB Article page — EXACT vendor.css selector match --- */
/* vendor.css: .knowledge-base-article-page .knowledge-base-content-block{background:#fff} */
.knowledge-base-article-page .knowledge-base-content-block {
  background: var(--gh-surface) !important;
  background-color: var(--gh-surface) !important;
  color: var(--gh-text) !important;
  padding: 2rem !important;
  border: 1px solid var(--gh-border) !important;
  border-radius: var(--gh-radius-lg) !important;
}

/* vendor.css: #article-content p{color:#212529} */
#article-content p {
  color: var(--gh-text) !important;
  font-size: 1rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
#article-content ol li {
  color: var(--gh-text) !important;
  font-size: 1rem !important;
}
#article-content ul li {
  color: var(--gh-text) !important;
  font-size: 1rem !important;
}
#article-content h1 { color: #fff !important; font-family: 'Bricolage Grotesque', sans-serif !important; }
#article-content h2 { color: #fff !important; font-family: 'Bricolage Grotesque', sans-serif !important; }
#article-content h3 { color: #fff !important; font-family: 'Bricolage Grotesque', sans-serif !important; border-bottom: none !important; }
#article-content h4 { color: #fff !important; font-family: 'Bricolage Grotesque', sans-serif !important; }

/* vendor.css: #article-content blockquote{background:#f9f9f9;border-left:10px solid #ccc} */
#article-content blockquote {
  background: var(--gh-elevated) !important;
  border-left: 3px solid var(--gh-accent) !important;
  color: var(--gh-text-muted) !important;
  padding: 1rem 1.5rem !important;
  border-radius: 0 var(--gh-radius-sm) var(--gh-radius-sm) 0 !important;
  margin: 1.5em 0 !important;
}
#article-content blockquote::before {
  color: var(--gh-accent) !important;
  opacity: 0.3 !important;
}

/* vendor.css: .knowledge-base-search{background:#eff1f6} */
.knowledge-base-search {
  background: var(--gh-surface) !important;
  padding: 25px 30px !important;
}
/* vendor.css: .knowledge-search-input{background:#eff1f6;border:2px solid #a9b7d9} */
.knowledge-base-search .knowledge-search-input {
  background: var(--gh-bg) !important;
  border: 1px solid var(--gh-border) !important;
  color: var(--gh-text) !important;
  border-radius: var(--gh-radius-sm) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* vendor.css: .knowledge-search-submit{background:#a9b7d9} */
.knowledge-base-search .knowledge-search-submit {
  background: var(--gh-accent) !important;
  color: var(--gh-bg) !important;
  border: none !important;
  border-radius: var(--gh-radius-sm) !important;
}

/* vendor.css: .knowledge-base-content-block .system-requirements-block{background:#fafbfc} */
.knowledge-base-article-page .knowledge-base-content-block .system-requirements-block {
  background: var(--gh-surface) !important;
  padding: 35px 30px !important;
}
.knowledge-base-article-page .knowledge-base-content-block .system-requirements-block h3 {
  border-bottom-color: var(--gh-border) !important;
  color: #fff !important;
}

/* vendor.css: .system-requirements-top table tbody tr:nth-child(2n) td{background:#f7f7f7} */
.knowledge-base-article-page .knowledge-base-content-block .system-requirements-block .system-requirements-top table tbody tr:nth-child(2n) td {
  background: var(--gh-elevated) !important;
}
.knowledge-base-article-page .knowledge-base-content-block .system-requirements-block .system-requirements-top table tbody tr td {
  border-left-color: var(--gh-border) !important;
  color: var(--gh-text-muted) !important;
}
.knowledge-base-article-page .knowledge-base-content-block .system-requirements-block .system-requirements-top table tbody tr td:first-child {
  background: var(--gh-elevated) !important;
  color: var(--gh-text) !important;
}

/* vendor.css: #knowledge-stars h4{color:#384060} */
.knowledge-base-article-page .knowledge-base-content-block .system-requirements-block .system-requirements-top #knowledge-stars h4 {
  color: var(--gh-text) !important;
}
/* vendor.css: #knowledge-stars ul li{color:#d1d5de} */
.knowledge-base-article-page .knowledge-base-content-block .system-requirements-block .system-requirements-top #knowledge-stars ul li {
  color: var(--gh-text-dim) !important;
  cursor: pointer !important;
}

/* vendor.css: .knowledge-next-prev-links{color:#8d99a9} */
.knowledge-base-article-page .knowledge-base-content-block .knowledge-next-prev .knowledge-next-prev-links {
  color: var(--gh-text-muted) !important;
}
.knowledge-base-article-page .knowledge-base-content-block .knowledge-next-prev .knowledge-next-prev-links span {
  color: var(--gh-text) !important;
}

/* KB sidebar */
.knowledge-base-article-page .knowledge-base-sidebar .accordion .accordion-item {
  border-top-color: var(--gh-border) !important;
  color: var(--gh-text) !important;
}
.knowledge-base-article-page .knowledge-base-sidebar .accordion .accordion-item span {
  color: var(--gh-accent) !important;
}
.knowledge-base-article-page .knowledge-base-sidebar .accordion .accordion-item.open {
  background: var(--gh-elevated) !important;
  color: var(--gh-accent) !important;
}
.knowledge-base-article-page .knowledge-base-sidebar .accordion .data {
  background: var(--gh-elevated) !important;
}
.knowledge-base-article-page .knowledge-base-sidebar .accordion .data .knowledge-links ul li a {
  color: var(--gh-text-muted) !important;
}
.knowledge-base-article-page .knowledge-base-sidebar .accordion .data .knowledge-links ul li a:hover,
.knowledge-base-article-page .knowledge-base-sidebar .accordion .data .knowledge-links ul li a.active {
  color: var(--gh-accent) !important;
}

/* KB categories/wrapper */
.knowledge-base-wraper .knowledge-base-search2 {
  background: var(--gh-accent) !important;
  border-radius: var(--gh-radius) !important;
}
.knowledge-base-wraper .knowledge-base-search2 .knowledge-base-search-box2 h3,
.knowledge-base-wraper .knowledge-base-search2 .knowledge-base-search-box2 h1 {
  color: var(--gh-bg) !important;
}
.knowledge-base-wraper .knowledge-base-search2 .knowledge-base-search-box2 p {
  color: rgba(6,6,12,0.7) !important;
}
.knowledge-base-wraper .knowledge-base-search2 .knowledge-base-search-box2 .knowledge-search-box::after {
  background: var(--gh-bg) !important;
  color: var(--gh-accent) !important;
}
.knowledge-base-wraper .knowledge-base-boxes-block {
  background: var(--gh-bg) !important;
  border-color: var(--gh-border) !important;
}
.knowledge-base-wraper .knowledge-base-boxes-block .knowledge-base-box {
  background: var(--gh-surface) !important;
  border-color: var(--gh-border) !important;
  border-radius: var(--gh-radius) !important;
}
.knowledge-base-wraper .knowledge-base-boxes-block .knowledge-base-box h4 {
  color: #fff !important;
}
.knowledge-base-wraper .knowledge-base-boxes-block .knowledge-base-box ul li a:not(.open-ticket) {
  color: var(--gh-accent) !important;
}
.knowledge-base-wraper .knowledge-base-boxes-block .knowledge-base-box .show-all-btn {
  background: var(--gh-elevated) !important;
  color: var(--gh-accent) !important;
}
.knowledge-base-wraper .container .subcategory-header {
  background-color: var(--gh-surface) !important;
}
.knowledge-base-wraper .container .subcategory-header h5 {
  color: #fff !important;
}

/* vendor.css: .client-area-popular-article ul li p{color:#384060} */
.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block .client-area-popular-article ul li p {
  color: var(--gh-text) !important;
}
/* vendor.css: .client-area-popular-article ul li a{color:#012890} */
.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block .client-area-popular-article ul li a {
  color: var(--gh-accent) !important;
  text-decoration: none !important;
}
/* vendor.css: .client-area-popular-article ul li:before{color:#8699ca} */
.client-area-page .client-area-bottom-block .resp-tabs-container .resp-tab-content .client-area-tabs-block .client-area-popular-article ul li::before {
  color: var(--gh-accent) !important;
  opacity: 0.5 !important;
}

/* --- 36b. Nav carets — target the EXACT Bootstrap selector --- */
/* The navs use .dropdown-toggle::after (Bootstrap default caret) */
.navbar-nav .dropdown-toggle::after,
.collapse .dropdown-toggle::after,
#navbarSupportedContent .dropdown-toggle::after,
a.dropdown-toggle::after {
  display: none !important;
  content: none !important;
  border: none !important;
}
/* Remove extra padding */
.navbar-nav .dropdown-toggle,
#navbarSupportedContent .dropdown-toggle {
  padding-right: 14px !important;
}


/* ============================================================
   37. ABSOLUTE FINAL — Must be at the very end of the file
   These override EVERYTHING above, including our own earlier rules
   ============================================================ */

/* KILL ALL NAV CARETS — every possible selector, !important */
.main-menu > ul > li > a.dropdown-toggle::after,
.main-menu > ul > li > a.dropdown-toggle:hover::after,
.main-menu > ul > li.show > a.dropdown-toggle::after,
.navbar-nav .dropdown-toggle::after,
.navbar-nav a.dropdown-toggle::after,
#navbarSupportedContent .dropdown-toggle::after,
.collapse.main-menu .dropdown-toggle::after,
a.dropdown-toggle::after,
.dropdown-toggle::after {
  display: none !important;
  content: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* Remove any caret icon elements */
.navbar-nav .nav-link i.fa-angle-down,
.navbar-nav .nav-link i.fa-chevron-down,
.navbar-nav .nav-link i[class*="fa-caret"],
.navbar-nav .dropdown-toggle i.fa-angle-down,
.navbar-nav .dropdown-toggle i[class*="caret"] {
  display: none !important;
}

/* Fix FAQ/KB tabs — clean underline style, not folder tabs */
.resp-tabs-list {
  border-bottom: 1px solid var(--gh-border) !important;
  background: transparent !important;
  gap: 0 !important;
  padding: 0 !important;
}
.resp-tabs-list li,
.resp-tabs-list li.resp-tab-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--gh-text-muted) !important;
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-weight: 500 !important;
  padding: 12px 20px !important;
  margin-bottom: -1px !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
}
.resp-tabs-list li.resp-tab-active,
.resp-tabs-list li.resp-tab-item.resp-tab-active {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--gh-accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.resp-tabs-list li:hover {
  color: var(--gh-text) !important;
}
/* Tab content — no top border (flows from tabs) */
.resp-tab-content,
.resp-tab-content-active {
  border-top: none !important;
  background: var(--gh-surface) !important;
  border: 1px solid var(--gh-border) !important;
  border-top: none !important;
  color: var(--gh-text) !important;
}

/* Ensure body fallback is dark */
html, body {
  background-color: var(--gh-bg) !important;
  color: var(--gh-text) !important;
}

/* --- 37b. Mobile: hide duplicate accordion headers from resp-tabs --- */
@media (max-width: 767px) {
  /* Hide the duplicate h2.resp-accordion titles that CE shows on mobile */
  h2.resp-accordion {
    display: none !important;
  }
  /* Make tabs scrollable horizontally */
  .resp-tabs-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .resp-tabs-list::-webkit-scrollbar {
    display: none !important;
  }
  .resp-tabs-list li {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  /* Show tab content directly */
  .resp-tab-content {
    display: block !important;
  }
}