/*
 * HostGuru Africa  Hostim Theme Custom CSS
 * v2.3  Dashboard greeting, redirect fix, sidebar/tile polish
 * Build: 2026-06-03T17:52  cache-bust
 * Brand: Navy #0f172a | Orange #f57200 | Font: Inter
 * Sections:
 *   1.  FOUNDATIONS & TYPOGRAPHY
 *   2.  NAVIGATION
 *   3.  HERO & PAGE HEADERS
 *   4.  MEGA DROPDOWN
 *   5.  BUTTONS
 *   6.  PRICING CARDS
 *   7.  DOMAIN SEARCH
 *   8.  TESTIMONIALS & SOCIAL PROOF
 *   9.  CLIENT AREA  DASHBOARD
 *  10.  CLIENT AREA  INVOICES
 *  11.  CLIENT AREA  TICKETS
 *  12.  CLIENT AREA  DOMAINS
 *  13.  CLIENT AREA  SERVICES & PRODUCTS
 *  14.  CLIENT AREA  ACCOUNT DETAILS
 *  15.  CLIENT AREA  ANNOUNCEMENTS
 *  16.  CLIENT AREA  KNOWLEDGEBASE
 *  17.  LOGIN & REGISTER
 *  18.  FOOTER
 *  19.  UTILITY  BADGES, PAGINATION, BREADCRUMBS, ALERTS
 *  20.  DARK MODE
 *  21.  RESPONSIVE  1199px, 991px, 767px, 480px
 */

/* ============================================================
   1. FOUNDATIONS & TYPOGRAPHY
   ============================================================ */

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

:root {
  --hg-orange:       #f57200;
  --hg-orange-dark:  #eb6600;
  --hg-orange-light: #fff7ed;
  --hg-orange-alpha: rgba(245,114,0,.15);
  --hg-navy:         #0f172a;
  --hg-navy-2:       #1e293b;
  --hg-bg:           #f8fafc;
  --hg-border:       #e2e8f0;
  --hg-text:         #1e293b;
  --hg-slate:        #64748b;
  --hg-green:        #16a34a;
  --hg-red:          #dc2626;
  --hg-amber:        #f59e0b;
  --hg-radius:       8px;
  --hg-radius-lg:    12px;
  --hg-shadow-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --hg-shadow:       0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.06);
  --hg-shadow-lg:    0 10px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.06);
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--hg-bg);
  color: var(--hg-text);
  font-size: 14px;
  line-height: 1.6;
}

a { color: var(--hg-orange); }
a:hover { color: var(--hg-orange-dark); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { color: var(--hg-navy); font-weight: 700; }

.btn-primary {
  background-color: var(--hg-orange) !important;
  border-color: var(--hg-orange-dark) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--hg-radius);
  padding: 8px 18px;
  transition: all 0.15s ease;
}
.btn-primary:hover {
  background-color: var(--hg-orange-dark) !important;
  border-color: var(--hg-orange-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,114,0,.3);
}
.btn-default, .btn-secondary {
  background: #fff;
  border: 1.5px solid var(--hg-border);
  color: var(--hg-text);
  font-weight: 600;
  border-radius: var(--hg-radius);
  transition: all 0.15s ease;
}
.btn-default:hover, .btn-secondary:hover {
  border-color: var(--hg-orange);
  color: var(--hg-orange);
}
.btn-success {
  background-color: var(--hg-green) !important;
  border-color: #15803d !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--hg-radius);
}
.btn-danger {
  background-color: var(--hg-red) !important;
  border-color: #b91c1c !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--hg-radius);
}
.btn-block { width: 100%; }
hr { border-color: var(--hg-border); }

.form-control {
  border-color: var(--hg-border);
  border-radius: var(--hg-radius);
  font-size: 14px;
  color: var(--hg-text);
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
  border-color: var(--hg-orange);
  box-shadow: 0 0 0 3px var(--hg-orange-alpha);
  outline: none;
}

.card {
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  box-shadow: var(--hg-shadow-sm);
  background: #fff;
}
.card-body { padding: 20px 24px; }
.card-header, .panel-heading {
  background: var(--hg-navy) !important;
  border-bottom: none !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 13px;
  font-weight: 700;
  padding: 14px 20px;
}
.card-header h3, .card-header h4 { color: rgba(255,255,255,.85) !important; font-size: 13px !important; margin: 0; }
.card-footer {
  background: var(--hg-bg);
  border-top: 1px solid var(--hg-border);
  padding: 12px 20px;
}
.badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 8px;
}
.badge-primary, .badge.bg-primary { background: var(--hg-orange) !important; color: #fff !important; }
.badge-success, .badge.bg-success { background: var(--hg-green) !important; color: #fff !important; }
.badge-danger,  .badge.bg-danger  { background: var(--hg-red) !important; color: #fff !important; }
.badge-warning, .badge.bg-warning { background: #f59e0b !important; color: #fff !important; }
.badge-info,    .badge.bg-info    { background: #3b82f6 !important; color: #fff !important; }
.badge-secondary, .badge.bg-secondary { background: var(--hg-slate) !important; color: #fff !important; }
.badge-pill { border-radius: 20px; }

.label {
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 8px;
  display: inline-block;
}
.label-success { background: #dcfce7 !important; color: #16a34a !important; }
.label-danger  { background: #fee2e2 !important; color: #dc2626 !important; }
.label-warning { background: #fef3c7 !important; color: #b45309 !important; }
.label-info    { background: #dbeafe !important; color: #1d4ed8 !important; }
.label-default { background: var(--hg-bg) !important; color: var(--hg-slate) !important; }

/* ============================================================
   2. NAVIGATION
   ============================================================ */

.tt-header {
  background: var(--hg-navy) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.tt-header.affix,
.tt-header.sticky-top {
  background: var(--hg-navy) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.2);
}
/* Navbar uses position:sticky (not fixed), so the affix padding-shrink serves no purpose.
   Keep padding constant so the page-strip top stays correct during scroll. */
.tt-header:not(.tt-double-header).affix { padding: 0.75rem 0 !important; }

.tt-header .navbar-brand img {
  height: 40px;
  width: auto;
}
.tt-custom-navbar .nav-link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.85) !important;
  padding: 8px 14px !important;
  transition: color 0.15s ease;
}
.tt-custom-navbar .nav-link:hover,
.tt-custom-navbar .nav-link.active {
  color: var(--hg-orange) !important;
}
.tt-custom-navbar .nav-link.active::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--hg-orange);
  border-radius: 2px;
  margin-top: 2px;
}

/* ── Navbar overrides ─────────────────────────────────────── */
.navbar, #nav { background: var(--hg-navy) !important; }
#nav .dropdown-menu {
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  box-shadow: var(--hg-shadow);
  background: #fff !important;
  padding: 6px;
}
#nav .dropdown-menu .dropdown-item,
#nav .dropdown-menu a {
  color: #1e293b !important;
  background-color: transparent !important;
  border-radius: 6px;
  font-size: 13.5px;
  padding: 8px 12px;
  font-weight: 500;
  transition: all 0.1s ease;
}
#nav .dropdown-menu .dropdown-item:hover,
#nav .dropdown-menu a:hover {
  color: #f57200 !important;
  background-color: #fff7ed !important;
}

/* ── Breadcrumb ────────────────────────────────────────────── */
.tt-breadcrumb { padding: 10px 0; margin-bottom: 8px; }
.tt-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tt-breadcrumb ol li { font-size: 12.5px; color: var(--hg-slate); display: flex; align-items: center; gap: 4px; }
.tt-breadcrumb ol li a { color: var(--hg-slate); text-decoration: none; }
.tt-breadcrumb ol li a:hover { color: var(--hg-orange); }
.tt-breadcrumb ol li:last-child { color: var(--hg-orange) !important; font-weight: 700; }
.tt-breadcrumb ol li + li::before { content: '/'; color: var(--hg-border); }

/* ============================================================
   3. HERO & PAGE HEADERS
   ============================================================ */

.tt-page-header {
  background: var(--hg-navy);
  padding: 40px 0 36px;
  position: relative;
  overflow: hidden;
}
.tt-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(245,114,0,.12) 0%, transparent 60%);
  pointer-events: none;
}
.tt-page-header h1 {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  margin: 0 0 4px;
}
.tt-page-header p {
  color: rgba(255,255,255,.7);
  font-size: 14px;
  margin: 0;
}

/* -- Page strip -- */
.hgp-page-strip {
  background: #fff;
  border-bottom: 1.5px solid var(--hg-border);
  position: sticky;
  top: 68px;
  z-index: 900;
  padding: 10px 0;
}
.hgp-page-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hgp-page-strip h1 {
  font-size: 16px;
  font-weight: 800;
  color: var(--hg-navy);
  margin: 0;
}
.hgp-page-strip .breadcrumb {
  background: none;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
}
.hgp-page-strip .breadcrumb-item + .breadcrumb-item::before { color: var(--hg-slate); }
.hgp-page-strip .breadcrumb-item a { color: var(--hg-slate); }
.hgp-page-strip .breadcrumb-item.active { color: var(--hg-orange); font-weight: 600; }

/* ============================================================
   4. MEGA DROPDOWN
   ============================================================ */

.tt-dropdown-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--hg-slate);
  padding: 8px 12px 4px;
  margin: 0;
}

.tt-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.tt-dropdown-grid-item {
  padding: 12px;
  border-right: 1px solid var(--hg-border);
}
.tt-dropdown-grid-item:last-child { border-right: none; }

.tt-title-with-icon-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
  margin-bottom: 4px;
}
.tt-title-with-icon-link:hover {
  background: var(--hg-orange-light);
  text-decoration: none;
}
.tt-menu-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}
.tt-menu-content span {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  display: block;
}
.tt-menu-content small {
  font-size: 11px;
  color: var(--hg-slate);
}
.tt-title-with-icon-link:hover .tt-menu-content span { color: var(--hg-orange); }
.tt-custom-navbar .dropdown-menu a,
.tt-custom-navbar .tt-title-with-icon-link span,
.tt-custom-navbar .tt-menu-content span {
  color: #1e293b !important;
}
.tt-custom-navbar .tt-menu-content small {
  color: var(--hg-slate) !important;
}
.tt-custom-navbar .tt-title-with-icon-link:hover span,
.tt-custom-navbar .tt-title-with-icon-link:hover small {
  color: var(--hg-orange) !important;
}
.tt-custom-radius { border-radius: var(--hg-radius-lg); }
.tt-full-width { min-width: 800px; }

/* ============================================================
   5. BUTTONS
   ============================================================ */

.btn { border-radius: var(--hg-radius); font-weight: 600; }
.btn-sm { font-size: 12px; padding: 5px 12px; }
.btn-lg { font-size: 16px; padding: 12px 28px; }
.btn-xs { font-size: 11px; padding: 3px 8px; }

/* ============================================================
   6. PRICING CARDS
   ============================================================ */

.tt-price-single {
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  background: #fff;
  padding: 24px 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  height: 100%;
}
.tt-price-single:hover {
  border-color: var(--hg-orange);
  box-shadow: var(--hg-shadow-lg);
  transform: translateY(-2px);
}
.tt-price-single.tt-featured {
  border-color: var(--hg-orange);
  background: linear-gradient(135deg, #fff7ed 0%, #fff 60%);
}
.tt-price-single .tt-price {
  font-size: 36px;
  font-weight: 900;
  color: var(--hg-navy);
  line-height: 1;
}
.tt-price-single .tt-price sup {
  font-size: 18px;
  font-weight: 700;
  vertical-align: top;
  margin-top: 6px;
}
.tt-price-single .billing-cycle {
  font-size: 12px;
  color: var(--hg-slate);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tt-price-single .tt-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--hg-navy);
  margin-bottom: 4px;
}
.tt-price-single .tt-features {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}
.tt-price-single .tt-features li {
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hg-border);
  color: var(--hg-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tt-price-single .tt-features li:last-child { border-bottom: none; }
.tt-price-single .tt-features li i { color: var(--hg-green); font-size: 12px; }

/* Billing tab active state */
.tt-billing-tabs .nav-link.active {
  color: var(--hg-orange);
  border-bottom-color: var(--hg-orange);
  background: transparent;
  font-weight: 700;
}

/* ============================================================
   7. DOMAIN SEARCH
   ============================================================ */

.tt-domain-search-wrap {
  background: var(--hg-navy);
  border-radius: var(--hg-radius-lg);
  padding: 32px;
}
.tt-domain-search-wrap h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 16px;
}
.tt-domain-search-wrap .input-group .form-control {
  height: 52px;
  font-size: 16px;
  border-radius: var(--hg-radius) 0 0 var(--hg-radius);
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.1);
  color: #fff;
}
.tt-domain-search-wrap .input-group .form-control::placeholder { color: rgba(255,255,255,.5); }
.tt-domain-search-wrap .input-group .btn {
  height: 52px;
  background: var(--hg-orange);
  border-color: var(--hg-orange-dark);
  color: #fff;
  font-weight: 700;
  padding: 0 24px;
}

/* ============================================================
   8. TESTIMONIALS & SOCIAL PROOF
   ============================================================ */

.tt-testimonial-card {
  background: #fff;
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  padding: 24px;
  height: 100%;
}
.tt-testimonial-card .stars { color: #f59e0b; font-size: 14px; margin-bottom: 12px; }
.tt-testimonial-card p { font-size: 14px; color: var(--hg-text); line-height: 1.7; font-style: italic; }
.tt-testimonial-card .author { font-size: 13px; font-weight: 700; color: var(--hg-navy); margin-top: 16px; }
.tt-testimonial-card .author small { font-weight: 400; color: var(--hg-slate); }

/* ============================================================
   9. CLIENT AREA — DASHBOARD
   ============================================================ */

/* Dashboard home panel cards */
.client-home-cards .card,
.tt-client-home-cards .card {
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.client-home-cards .card:hover,
.tt-client-home-cards .card:hover {
  border-color: var(--hg-orange);
  box-shadow: var(--hg-shadow);
}

/* Stat tiles (Dashboard) */
.tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.tiles .tile {
  background: #fff;
  border: 1.5px solid var(--hg-border);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all .2s;
  flex: 1 1 0;
  min-width: 160px;
  text-decoration: none;
  color: var(--hg-text);
}
.tiles .tile:hover {
  border-color: var(--hg-orange) !important;
  box-shadow: 0 4px 16px rgba(245,114,0,.1) !important;
  text-decoration: none;
}
.tiles .tile .title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hg-slate);
  margin-bottom: 6px;
}
.tiles .tile .stat {
  font-size: 32px;
  font-weight: 900;
  color: var(--hg-navy);
  line-height: 1;
  transition: color 0.2s ease;
}
.tiles .tile:hover .stat { color: var(--hg-orange); }

/* tile icon styling is defined in the PORTAL TILES section below with !important */

/* Client home stat cards */
.tt-client-home-cards .tile {
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  background: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
  color: var(--hg-text);
}
.tt-client-home-cards .tile:hover {
  box-shadow: var(--hg-shadow);
  border-color: var(--hg-orange);
  text-decoration: none;
}
.tt-client-home-cards .tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.tile-services .tile-icon { background: var(--hg-orange-light); color: var(--hg-orange); }
.tile-domains .tile-icon  { background: #eff6ff; color: #3b82f6; }
.tile-invoices .tile-icon { background: #dcfce7; color: var(--hg-green); }
.tile-tickets .tile-icon  { background: #fdf4ff; color: #a855f7; }
.tile-number { font-size: 28px; font-weight: 800; color: var(--hg-navy); line-height: 1; }
.tile-label  { font-size: 12px; color: var(--hg-slate); font-weight: 500; margin-top: 2px; }

/* tt-single-box tile (clientareahome.tpl) */
a.tile.tt-single-box {
  background: #fff !important;
  border: 1.5px solid var(--hg-border) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: all .2s !important;
  text-decoration: none !important;
  color: var(--hg-text) !important;
  margin-bottom: 14px !important;
  min-height: 80px !important;
}
.tiles .tile:hover,
a.tile.tt-single-box:hover {
  border-color: var(--hg-orange) !important;
  box-shadow: 0 4px 20px rgba(245,114,0,.12) !important;
  background-color: #fff !important;
  transform: translateY(-2px) !important;
}

/* Tile icon box */
.tiles .tile i,
a.tile.tt-single-box i {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: rgba(245,114,0,.1) !important;
  color: var(--hg-orange) !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
}
.tiles .tile:hover i,
a.tile.tt-single-box:hover i {
  background: var(--hg-orange) !important;
  color: #fff !important;
  font-size: 18px !important;
}

/* Tile stat number */
.tiles .tile .stat,
a.tile.tt-single-box .stat {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--hg-navy) !important;
  line-height: 1 !important;
  font-family: 'Inter', sans-serif !important;
}
.tiles .tile:hover .stat,
a.tile.tt-single-box:hover .stat {
  color: var(--hg-orange) !important;
}
a.tile.tt-single-box .title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--hg-slate) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}
.tile-invoices-alert { border-color: var(--hg-red) !important; }
.tile-invoices-alert i { background: #fee2e2 !important; color: var(--hg-red) !important; }

/* Main panels / cards */
.panel, .card:not(.card-sidebar):not(.tt-featured-badge) {
  border: 1.5px solid var(--hg-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  margin-bottom: 20px;
}
.panel-heading, .card-header {
  background: var(--hg-navy) !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 11px 16px !important;
}
.panel-heading h3, .panel-title, .card-header h3 {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,.6) !important;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin: 0;
}

/* tt-overview section on product details */
.tt-overview .row {
  padding: 10px 0;
  border-bottom: 1px solid var(--hg-border);
  align-items: center;
}
.tt-overview .row:last-child { border-bottom: none; }
.tt-overview h5 {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--hg-slate) !important;
  margin: 0 0 2px !important;
}
.tt-overview span, .tt-overview a {
  font-size: 14px;
  font-weight: 600;
  color: var(--hg-navy);
}

/* ============================================================
   10. CLIENT AREA — INVOICES
   ============================================================ */

.invoice-container { max-width: 900px; margin: 0 auto; padding: 32px 20px; }
.invoice-col { padding: 12px; }
.invoice-status span {
  display: inline-block;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 24px;
  border-radius: 8px;
  border: 2px solid;
}
.invoice-status .paid     { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
.invoice-status .unpaid   { background: #fff7ed; color: var(--hg-orange); border-color: rgba(245,114,0,.3); }
.invoice-status .overdue  { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.invoice-status .draft    { background: #f1f5f9; color: var(--hg-slate); border-color: var(--hg-border); }
.invoice-container .total-row td { border-top: 1.5px solid var(--hg-border) !important; font-weight: 600; background: var(--hg-bg); }
.invoice-container .bg-default { background: var(--hg-bg) !important; }
.invoice-container .card-header { background: var(--hg-navy); color: #fff; }
.invoice-container .card-title { color: #fff !important; font-size: 16px !important; }

/* Invoice amount display */
.invoice-total {
  font-size: 18px;
  font-weight: 900;
  color: var(--hg-orange);
}
/* Pay now button on invoice */
.btn-pay-invoice {
  background: var(--hg-orange);
  border-color: var(--hg-orange-dark);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 10px;
}
.btn-pay-invoice:hover {
  background: var(--hg-orange-dark);
  color: #fff;
  box-shadow: 0 6px 20px rgba(245,114,0,.3);
  transform: translateY(-1px);
}

/* ============================================================
   11. CLIENT AREA — SUPPORT TICKETS
   ============================================================ */

/* Ticket list rows */
.ticket-list-table tbody tr { cursor: pointer; }
.ticket-list-table tbody tr:hover td { background: rgba(245,114,0,.03); }
.ticket-list-table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--hg-border);
  font-size: 13.5px;
  vertical-align: middle;
}

/* Ticket status pills */
.ticket-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  text-transform: capitalize;
}
.ticket-status.open       { background: #dbeafe; color: #1d4ed8; }
.ticket-status.answered   { background: #dcfce7; color: #16a34a; }
.ticket-status.customer-reply { background: #fef9c3; color: #854d0e; }
.ticket-status.on-hold    { background: #fef3c7; color: #b45309; }
.ticket-status.in-progress { background: #ede9fe; color: #6d28d9; }
.ticket-status.closed     { background: #f1f5f9; color: var(--hg-slate); }

/* Ticket subject links */
a.border-left {
  border-left: 3px solid var(--hg-orange) !important;
  padding-left: 10px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
a.border-left:hover { text-decoration: none; }
span.ticket-number { font-size: 11.5px; color: var(--hg-slate); font-weight: 600; }
span.ticket-subject { font-size: 14px; font-weight: 600; color: var(--hg-navy); }
span.ticket-subject.unread { color: var(--hg-orange) !important; font-weight: 800; }

/* ============================================================
   12. CLIENT AREA — DOMAINS
   ============================================================ */

.domain-list-table tbody td { padding: 12px 14px; vertical-align: middle; font-size: 13.5px; }
.domain-list-table thead th {
  background: var(--hg-navy);
  color: rgba(255,255,255,.75);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ============================================================
   13. CLIENT AREA — SERVICES & PRODUCTS
   ============================================================ */

/* Product status colors */
.product-status-active    { color: var(--hg-green); }
.product-status-suspended { color: #b45309; }
.product-status-terminated { color: var(--hg-slate); }
.product-status-pending   { color: #1d4ed8; }
.product-status-cancelled { color: var(--hg-slate); }
.product-status-fraud     { color: var(--hg-red); }

/* Product detail tabs — pill-underline style */
ul.nav-tabs.responsive-tabs-sm {
  border-bottom: 2px solid var(--hg-border);
  gap: 0;
  margin-bottom: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
ul.nav-tabs.responsive-tabs-sm::-webkit-scrollbar { display: none; }
ul.nav-tabs.responsive-tabs-sm .nav-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--hg-slate);
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 11px 18px;
  transition: color .15s, border-color .15s;
  border-radius: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -2px;
}
ul.nav-tabs.responsive-tabs-sm .nav-link i { font-size: 12px; opacity: .7; }
ul.nav-tabs.responsive-tabs-sm .nav-link:hover { color: var(--hg-orange); background: rgba(245,114,0,.04); }
ul.nav-tabs.responsive-tabs-sm .nav-link.active {
  color: var(--hg-orange);
  border-bottom-color: var(--hg-orange);
  font-weight: 700;
  background: transparent;
}
ul.nav-tabs.responsive-tabs-sm .nav-link.active i { opacity: 1; }

/* Product card */
.product-status {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px;
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  background: var(--hg-bg);
  margin-bottom: 18px;
}
.product-status.product-status-active    { border-left: 4px solid var(--hg-green); background: linear-gradient(135deg, #f0fdf4 0%, var(--hg-bg) 60%); }
.product-status.product-status-suspended { border-left: 4px solid #f59e0b; background: linear-gradient(135deg, #fffbeb 0%, var(--hg-bg) 60%); }
.product-status.product-status-terminated { border-left: 4px solid var(--hg-slate); }
.product-status.product-status-pending   { border-left: 4px solid #3b82f6; background: linear-gradient(135deg, #eff6ff 0%, var(--hg-bg) 60%); }
.product-status.product-status-cancelled { border-left: 4px solid var(--hg-slate); }
.product-status.product-status-fraud     { border-left: 4px solid var(--hg-red); }

.product-icon.text-center { flex-shrink: 0; text-align: center !important; }
.product-icon .fa-stack {
  width: 52px !important;
  height: 52px !important;
  line-height: 52px !important;
  background: rgba(245,114,0,.1) !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.product-icon .fa-stack .fa-circle.fa-stack-2x { display: none !important; }
.product-icon .fa-stack .fa-stack-1x.fa-inverse {
  position: static !important;
  font-size: 22px !important;
  color: var(--hg-orange) !important;
  line-height: 1 !important;
}
.product-icon h3 { font-size: 15px; font-weight: 800; color: var(--hg-navy); margin: 10px 0 3px; }
.product-icon h4 { font-size: 12px; font-weight: 500; color: var(--hg-slate); margin: 0; }

.product-status-text {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--hg-bg);
  border: 1.5px solid var(--hg-border);
  margin-top: 8px;
}
.product-status-active    .product-status-text { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
.product-status-suspended .product-status-text { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.product-status-terminated .product-status-text { background: #f1f5f9; color: var(--hg-slate); border-color: #e2e8f0; }
.product-status-pending   .product-status-text { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.product-status-fraud     .product-status-text { background: #fee2e2; color: #dc2626; border-color: #fecaca; }

/* Billing info column */
.product-details .col-md-6:first-child { border-right: 1.5px solid var(--hg-border); padding-right: 24px; }
.product-details .col-md-6:last-child { padding-left: 28px; }
@media (max-width: 767px) {
  .product-details .col-md-6:first-child { border-right: none; border-bottom: 1.5px solid var(--hg-border); padding-right: 15px; padding-bottom: 20px; margin-bottom: 20px; }
  .product-details .col-md-6:last-child { padding-left: 15px; }
}
.product-details .col-md-6:last-child h4 {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--hg-slate) !important;
  margin: 0 0 3px !important;
}
.product-details .col-md-6:last-child p {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--hg-navy) !important;
  margin: 0 0 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--hg-border) !important;
}
.product-details .col-md-6:last-child p:last-of-type {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Action buttons */
.product-actions-wrapper { margin-top: 16px; }
.product-actions-wrapper .col-12 { margin-bottom: 8px; }
.product-actions-wrapper .btn {
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Tab container */
.responsive-tabs-sm-connector { display: none; }
.product-details-tab-container {
  border: 1.5px solid var(--hg-border);
  border-top: none;
  border-radius: 0 0 var(--hg-radius-lg) var(--hg-radius-lg);
  padding: 0 20px;
}
.product-details-tab-container .tab-pane { padding: 16px 0; }
.product-details-tab-container .row { padding: 9px 0; border-bottom: 1px solid var(--hg-border); align-items: center; }
.product-details-tab-container .row:last-child { border-bottom: none; }
.product-details-tab-container .col-sm-5.text-right strong {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hg-slate);
  display: block;
}
.product-details-tab-container .col-sm-7.text-left { font-size: 14px; color: var(--hg-navy); font-weight: 600; }

/* Usage dials */
.dial-usage-container { padding: 16px; background: var(--hg-bg); border-radius: 12px; border: 1.5px solid var(--hg-border); text-align: center; margin: 8px; }
.dial-usage-container h4 { font-size: 13px; font-weight: 700; color: var(--hg-navy); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .06em; }
.dial-usage-container p { font-size: 12px; color: var(--hg-slate); margin-top: 8px; font-weight: 500; }

/* Addon cards */
.card.bg-default.card-accent-blue { border-left: 3px solid #3b82f6 !important; background: var(--hg-bg) !important; }
.card.bg-default { background: var(--hg-bg) !important; }
.card.bg-default .card-header {
  background: var(--hg-navy);
  color: rgba(255,255,255,.85);
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card.bg-default .card-footer { background: var(--hg-bg); border-top: 1px solid var(--hg-border); padding: 10px 16px; }

/* Module registrar output */
.moduleoutput { margin-top: 16px; }
.moduleoutput .btn { margin-right: 6px; margin-bottom: 6px; }

/* SSL inactive muted */
.ssl-inactive { opacity: 0.55; }

/* Active products service list */
.div-service-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hg-border);
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.div-service-item:hover { background: rgba(245,114,0,.03); }
.div-service-item:last-child { border-bottom: none; }
.div-service-name { font-size: 14px; font-weight: 600; color: var(--hg-navy); }
.div-service-domain { font-size: 12px; color: var(--hg-slate); margin-top: 2px; }
.label.label-placeholder { display: none; }
.div-service-buttons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
button.btn-view-details { font-size: 12px; padding: 5px 12px; }

/* Change password form */
.using-password-strength .form-group { margin-bottom: 18px; }
.generate-password { font-size: 12px; padding: 6px 14px; }
.password-strength-meter { margin-top: 10px; }
.password-strength-meter .progress {
  height: 6px;
  border-radius: 4px;
}

/* ============================================================
   14. CLIENT AREA — ACCOUNT DETAILS
   ============================================================ */

/* Account nav tabs */
#clientTabs .nav-link,
.account-tabs .nav-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--hg-slate);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  transition: color 0.15s ease;
  border-radius: 0;
}
#clientTabs .nav-link:hover,
.account-tabs .nav-link:hover { color: var(--hg-orange); }
#clientTabs .nav-link.active,
.account-tabs .nav-link.active {
  color: var(--hg-orange);
  border-bottom-color: var(--hg-orange);
  font-weight: 700;
  background: transparent;
}

/* Two-factor / security card */
.card.card-2fa { border-left: 3px solid var(--hg-orange); }

/* ============================================================
   15. CLIENT AREA — ANNOUNCEMENTS
   ============================================================ */

.announcement.tt-news-single {
  border-left: 4px solid var(--hg-orange);
  transition: background 0.15s ease;
}
.announcement.tt-news-single:hover { background: rgba(245,114,0,.025); }
.announcement.tt-news-single h2 { font-size: 16px !important; font-weight: 700 !important; color: var(--hg-navy) !important; }
a.tt-read-more { font-size: 13px; font-weight: 700; color: var(--hg-orange); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
a.tt-read-more:hover { color: var(--hg-orange-dark); }

/* ============================================================
   16. CLIENT AREA — KNOWLEDGEBASE
   ============================================================ */

.kb-search.tt-kb-search { border: 1.5px solid var(--hg-border); border-radius: 12px; overflow: hidden; }
.kb-search .tt-search-field { border: none !important; box-shadow: none !important; font-size: 15px; height: 50px; }
.card.kb-category { border: 1.5px solid var(--hg-border) !important; border-radius: var(--hg-radius-lg) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.card.kb-category:hover { border-color: var(--hg-orange) !important; box-shadow: 0 6px 20px rgba(245,114,0,.1) !important; }
.card.kb-category h3 { font-size: 16px; font-weight: 700; color: var(--hg-navy); }
.card.kb-category .badge.bg-primary-light { background: var(--hg-orange-light) !important; color: var(--hg-orange) !important; font-size: 11px; font-weight: 700; }
a.list-group-item.kb-article-item { font-size: 13.5px; color: var(--hg-text); border-color: var(--hg-border); padding: 10px 14px; transition: color 0.15s ease, background 0.15s ease; display: flex; align-items: center; gap: 8px; }
a.list-group-item.kb-article-item:hover { color: var(--hg-orange); background: var(--hg-orange-light); text-decoration: none; }

/* ============================================================
   17. LOGIN & REGISTER
   ============================================================ */

.tt-auth-wrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 40px 0;
}
.tt-auth-wrap .card {
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.tt-auth-wrap .card-header {
  text-align: center;
  padding: 24px 20px 16px !important;
}
.tt-auth-wrap .card-header h1,
.tt-auth-wrap .card-header h2 {
  color: rgba(255,255,255,.9) !important;
  font-size: 22px !important;
  margin: 0;
}

/* ============================================================
   18. FOOTER
   ============================================================ */

footer {
  background: var(--hg-navy);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  padding: 40px 0 24px;
  margin-top: 48px;
}
footer h5 {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
}
footer a { color: rgba(255,255,255,.65); }
footer a:hover { color: var(--hg-orange); }
footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 32px;
  padding-top: 20px;
  font-size: 12px;
  color: rgba(255,255,255,.4);
}

/* ============================================================
   19. UTILITY — BADGES, PAGINATION, BREADCRUMBS, ALERTS
   ============================================================ */

/* Alerts */
.alert { border-radius: var(--hg-radius-lg) !important; border: 1.5px solid !important; font-size: 13.5px !important; }
.alert-success { background: #dcfce7 !important; border-color: #bbf7d0 !important; color: #16a34a !important; }
.alert-danger  { background: #fef2f2 !important; border-color: #fecaca !important; color: #b91c1c !important; }
.alert-warning { background: #fffbeb !important; border-color: #fde68a !important; color: #92400e !important; }
.alert-info    { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1e40af !important; }
.alert .btn { margin-left: 12px; }

/* Tables */
.table { font-size: 13.5px; }
.table thead th {
  background: var(--hg-navy) !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: none !important;
  padding: 12px 16px;
  white-space: nowrap;
}
.table tbody td { padding: 12px 16px; border-color: var(--hg-border); vertical-align: middle; }
.table tbody tr:hover td { background: rgba(245,114,0,.03); }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(248,250,252,.6); }
.table-bordered { border-color: var(--hg-border); }
.table-bordered th, .table-bordered td { border-color: var(--hg-border) !important; }

/* Pagination */
ul.pagination .page-item .page-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--hg-text);
  border-color: var(--hg-border);
  border-radius: 8px;
  margin: 0 2px;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
ul.pagination .page-item .page-link:hover { background: var(--hg-orange-light); border-color: var(--hg-orange); color: var(--hg-orange); }
ul.pagination .page-item.active .page-link { background: var(--hg-orange) !important; border-color: var(--hg-orange-dark) !important; color: #fff !important; }
ul.pagination .page-item.disabled .page-link { opacity: 0.4; cursor: not-allowed; }
.pagination .page-item.active .page-link { background-color: var(--hg-orange) !important; border-color: var(--hg-orange-dark) !important; color: #fff !important; }

/* Misc label badge styles */
.label-danger, .badge-danger,
.label-success, .badge-success,
.label-info, .badge-info,
.label-warning, .badge-warning { border-radius: 20px; padding: 3px 8px; font-size: 11px; font-weight: 700; }

/* Status pills */
.status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
  text-transform: capitalize;
  white-space: nowrap;
  letter-spacing: .02em;
}
.status-Paid, .status-paid           { background: #dcfce7 !important; color: #16a34a !important; }
.status-Unpaid, .status-unpaid       { background: #fff7ed !important; color: var(--hg-orange) !important; font-weight: 800 !important; }
.status-Overdue, .status-overdue     { background: #fee2e2 !important; color: #dc2626 !important; font-weight: 800 !important; }
.status-Draft, .status-draft         { background: #f1f5f9 !important; color: var(--hg-slate) !important; }
.status-Refunded, .status-refunded   { background: #ede9fe !important; color: #7c3aed !important; }
.status-Cancelled, .status-cancelled { background: #f1f5f9 !important; color: #9ca3af !important; }
.status-Collections, .status-collections { background: #fee2e2 !important; color: #dc2626 !important; }
.status-Active, .status-active         { background: #dcfce7 !important; color: #16a34a !important; }
.status-Expired, .status-expired       { background: #fee2e2 !important; color: #dc2626 !important; font-weight: 800 !important; }
.status-GracePeriod, .status-graceperiod { background: #fef3c7 !important; color: #b45309 !important; }
.status-Pending, .status-pending       { background: #dbeafe !important; color: #1d4ed8 !important; }
.status-Redemption, .status-redemption { background: #ede9fe !important; color: #7c3aed !important; }
.status-Transferred, .status-transferred { background: #f1f5f9 !important; color: var(--hg-slate) !important; }
.status-Suspended, .status-suspended   { background: #fef3c7 !important; color: #b45309 !important; font-weight: 800 !important; }
.status-Terminated, .status-terminated { background: #f1f5f9 !important; color: #9ca3af !important; }
.status-Fraud, .status-fraud           { background: #dc2626 !important; color: #fff !important; font-weight: 800 !important; }
.status-Open, .status-open           { background: #dcfce7 !important; color: #16a34a !important; }
.status-Answered, .status-answered   { background: #dbeafe !important; color: #1d4ed8 !important; }
.status-Customer-Reply, .status-customerreply { background: #fef9c3 !important; color: #854d0e !important; }
.status-On-Hold, .status-onhold      { background: #fef3c7 !important; color: #b45309 !important; }
.status-In-Progress, .status-inprogress { background: #ede9fe !important; color: #6d28d9 !important; }
.status-Closed, .status-closed       { background: #f1f5f9 !important; color: var(--hg-slate) !important; }

/* ============================================================
   Sidebar
   ============================================================ */

/*  Sidebar — real classes: .card-sidebar, .sidebar-menu-item-*  */
.card.card-sidebar {
  border: 1.5px solid var(--hg-border) !important;
  border-radius: var(--hg-radius-lg) !important;
  overflow: hidden;
  margin-bottom: 16px;
}
.card.card-sidebar .card-header {
  background: var(--hg-navy);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.card.card-sidebar .card-header h3.card-title {
  font-size: 12px !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.85) !important;
  margin: 0;
  display: flex;
  align-items: center;
}
/* ── Fix □ broken icon squares in sidebar ─────────────────────────────────
   ROOT CAUSE: WHMCS registers sidebar group icons using fad (Font Awesome
   Duotone/Pro) classes. Free FA library has no fad glyphs → renders □.
   ALSO: ::before with FA content showed as '+' because pseudo-element
   font rendering needs exact font-face conditions not always met.

   FIX STRATEGY (no ::before tricks, no :first-child guessing):
   1. Header: hide ALL <i> tags that are NOT .card-minimise
      The card-minimise (chevron) is always fas fa-chevron-up — safe to show
   2. List items: hide .sidebar-menu-item-icon (always the fad icon)
      Replace the icon-wrapper visual with a clean CSS-only orange dot
   ─────────────────────────────────────────────────────────────────────── */

/* Hide broken fad group-icon in sidebar card header
   Target: any <i> inside h3 that is NOT the card-minimise chevron */
.card.card-sidebar .card-header h3.card-title > i:not(.card-minimise) {
  display: none !important;
}
/* Restore card-minimise chevron — make sure it shows, positioned to the right */
.card.card-sidebar .card-header h3.card-title .card-minimise {
  display: inline-block !important;
  color: rgba(255,255,255,.55) !important;
  font-size: 11px !important;
  margin-left: auto !important;
  padding-left: 8px;
  flex-shrink: 0;
}
.card.card-sidebar .card-header .badge { background: var(--hg-orange) !important; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 2px 7px; }

.card.card-sidebar .list-group.list-group-flush a.list-group-item.list-group-item-action {
  font-size: 13.5px;
  color: var(--hg-text);
  border-color: var(--hg-border);
  padding: 10px 16px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* Sidebar item hover - fix for hostim.css:1122 which sets background-color:transparent !important
   We need both background-color AND background with !important to override it */
.card.card-sidebar .list-group a.list-group-item:hover {
  background-color: var(--hg-orange-light) !important;
  background: var(--hg-orange-light) !important;
  color: var(--hg-orange) !important;
  cursor: pointer;
}
.card.card-sidebar .list-group a.list-group-item:hover .sidebar-menu-item-label {
  color: var(--hg-orange) !important;
}

/* Sidebar active state
   FULL CASCADE ANALYSIS (from subagent deep investigation):
   Load order:
     1. theme.min.css:  .list-group-item.active { background:#336699; color:#fff } - spec (0,2,0), no !important
     2. hostim.css:1113 .sidebar .list-group-item.active { background:transparent !important } - spec (0,3,0)
     3. hostim.css:1134 :not(.collapsable-card-body)>.list-group>.list-group-item.active { bg:var(--primary) } - spec(0,3,0), no !important
     4. custom.css (us): rules here - must use spec > (0,3,0) with !important
     5. tt-page-header.tpl inline <style> - LOADS LAST, spec (0,3,0) with !important

   FIX: Use specificity (0,4,0) — .card.card-sidebar .collapsable-card-body .list-group-item.active = 4 classes */
.card.card-sidebar .collapsable-card-body .list-group-item.active,
.card.card-sidebar .collapsable-card-body .list-group-item.active:hover,
.card.card-sidebar .collapsable-card-body .list-group-item.active:focus,
.card.card-sidebar .collapsable-card-body a.list-group-item.active,
.card.card-sidebar .collapsable-card-body a.list-group-item.active:hover,
.card.card-sidebar .collapsable-card-body a.list-group-item.active:focus {
  background-color: rgba(245,114,0,.08) !important;  /* subtle tint - NOT solid orange */
  background:       rgba(245,114,0,.08) !important;
  border-left: 3px solid #f57200 !important;
  border-color: #e2e8f0 !important;
  color: #f57200 !important;
  font-weight: 700 !important;
}
.card.card-sidebar .collapsable-card-body .list-group-item.active .sidebar-menu-item-icon-wrapper,
.card.card-sidebar .collapsable-card-body a.list-group-item.active .sidebar-menu-item-icon-wrapper {
  background: rgba(245,114,0,.12) !important;
  color: #f57200 !important;
}
.card.card-sidebar .list-group a.list-group-item.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; width: 100%; }
.sidebar-menu-item-icon-wrapper {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--hg-orange-light);
  color: var(--hg-orange);
  font-size: 13px;
  flex-shrink: 0;
  position: relative;
}
/* Hide the broken fad icon (WHMCS Pro/Duotone class renders as □ with free FA)
   .sidebar-menu-item-icon is always the child fad element from sidebar.tpl */
.sidebar-menu-item-icon-wrapper .sidebar-menu-item-icon {
  display: none !important;
}
/* Replace with a clean orange right-chevron via CSS ::before */
.sidebar-menu-item-icon-wrapper::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--hg-orange);
  border-top: 2px solid var(--hg-orange);
  transform: rotate(45deg);
  flex-shrink: 0;
}
/* Active state: filled dot instead of chevron */
.card.card-sidebar .collapsable-card-body a.list-group-item.active .sidebar-menu-item-icon-wrapper::before {
  border-color: #f57200;
}
.sidebar-menu-item-label { flex: 1; font-size: 13.5px; }
.sidebar-menu-item-badge .badge {
  background: var(--hg-orange) !important;
  color: #fff !important;
  font-size: 10px;
  border-radius: 10px;
  padding: 2px 7px;
}
.sidebar .list-group-item:hover:not(.active) { background: rgba(245,114,0,.04); color: var(--hg-orange); }
/* Override old rule that was making broken fal/fad icons visible:
   Hide ALL <i> inside sidebar list items that are not .fas (free icons are fine) */
.sidebar .list-group-item i {
  /* fal/fad icons render as □ - safer to hide all and let CSS ::before handle them */
  display: none !important;
  color: var(--hg-orange); margin-right: 7px;
}
/* BUT keep fas icons (spinner, check etc.) visible - they render fine */
.sidebar .list-group-item i.fas,
.sidebar .list-group-item i.far,
.sidebar .list-group-item i.fab {
  display: inline-block !important;
}
.sidebar .list-group { font-size: 14px; }
.sidebar .list-group-item { font-size: 13px; font-weight: 500; padding: 9px 14px; border-color: var(--hg-border) !important; color: var(--hg-text); transition: all .12s; }

.cart-sidebar .card-header, .cart-sidebar .panel-heading { background: var(--hg-navy) !important; }
.cart-sidebar .list-group-item.active { background: rgba(245,114,0,.08) !important; color: var(--hg-orange) !important; border-left: 3px solid var(--hg-orange) !important; }

/* ============================================================
   Affiliates, masspay, misc
   ============================================================ */

.affiliate-stat {
  border-radius: var(--hg-radius-lg);
  padding: 20px;
  margin-bottom: 12px;
}
.bg-primary-light { background: var(--hg-orange-light) !important; }
.bg-success-light { background: #dcfce7 !important; }
.bg-danger-light  { background: #fee2e2 !important; }
.affiliate-stat-green .h5, .affiliate-stat-green h5 { color: var(--hg-green) !important; font-weight: 900 !important; }
tr.masspay-invoice-detail td { padding: 10px 14px; border-bottom: 1px solid var(--hg-border); font-size: 13.5px; }
tr.masspay-total td { font-weight: 700; font-size: 15px; padding: 12px 14px; border-top: 2px solid var(--hg-border); }

/* Domain pricing */
.featured-tld {
  background: #fff;
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  padding: 16px;
  text-align: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  height: 100%;
}
.featured-tld:hover { border-color: var(--hg-orange); box-shadow: 0 4px 16px rgba(245,114,0,.1); }
.featured-tld .price { font-size: 14px; font-weight: 700; color: var(--hg-orange); }
.tld-filters a.badge { cursor: pointer; font-size: 11px; padding: 4px 10px; border-radius: 20px; transition: all 0.15s ease; }
.tld-filters a.badge-secondary { background: var(--hg-bg) !important; color: var(--hg-slate) !important; border: 1px solid var(--hg-border); }
.tld-filters a.badge-success { background: var(--hg-orange) !important; color: #fff !important; border-color: var(--hg-orange); }

/* Billing address modal */
.modal-header { background: var(--hg-navy); color: #fff; border-bottom: none; }
.modal-header .modal-title { color: #fff; font-size: 16px; font-weight: 700; }
.modal-header .close, .modal-header button.close { color: rgba(255,255,255,.7); }
.modal-content { border: 1.5px solid var(--hg-border); border-radius: var(--hg-radius-lg); overflow: hidden; }

/* View ticket */
.card.view-ticket .card-body.bg-primary-light {
  background: var(--hg-orange-light) !important;
}
.card.view-ticket .bg-primary-light h3,
.card.view-ticket .bg-primary-light .h6 { color: var(--hg-orange); }

/* Custom card (used on various pages) */
.tt-custom-card {
  border: 1.5px solid var(--hg-border) !important;
  border-radius: var(--hg-radius-lg) !important;
  background: #fff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tt-custom-card:hover {
  border-color: var(--hg-orange) !important;
  box-shadow: var(--hg-shadow) !important;
}
.card.bg-gray-light.tt-custom-card {
  background: var(--hg-bg) !important;
}

/* card-accent variations */
[class*="card-accent-"] .list-group-item.active,
[class*="card-accent-"] .list-group-item:active {
  background: rgba(245,114,0,.08) !important;
  color: var(--hg-orange) !important;
}

/* Panel default */
.panel.panel-default > .panel-heading {
  background: var(--hg-navy) !important;
  border-bottom: none !important;
  color: rgba(255,255,255,.85) !important;
}

/* ============================================================
   LAYOUT SPACING FIX - Sidebar top padding + content row gap
   ============================================================ */

/* Sidebar column needs same top padding as primary-content */
#main-body .row { align-items: flex-start; }
#main-body .row .sidebar { padding-top: 20px; }

/* Sidebar panels - remove default margin-top on first panel */
#main-body .sidebar > .panel:first-child,
#main-body .sidebar > .card:first-child {
  margin-top: 0;
}

/* ============================================================
   20. DARK MODE
   ============================================================ */

[data-bs-theme="dark"] body { background-color: #0f172a; color: #e2e8f0; }
[data-bs-theme="dark"] .card { background: #1e293b; border-color: #334155; }
[data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .panel-heading { background: #0f172a !important; }
[data-bs-theme="dark"] .form-control { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-bs-theme="dark"] .product-status { background: #1e293b; border-color: #334155; }
[data-bs-theme="dark"] .tt-overview .row { border-color: #334155; }
[data-bs-theme="dark"] .tt-overview h5 { color: #94a3b8; }
[data-bs-theme="dark"] .tt-overview span, [data-bs-theme="dark"] .tt-overview a { color: #f1f5f9; }
[data-bs-theme="dark"] :root {
  --hg-bg: #0f172a;
  --hg-border: #334155;
  --hg-text: #e2e8f0;
}

/* ============================================================
   21. RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {
  .tt-dropdown-grid { grid-template-columns: repeat(2, 1fr); }
  .tt-full-width { min-width: 500px; }
  .tt-page-header h1 { font-size: 24px; }
}

@media (max-width: 991px) {
  .tt-client-home-cards .tile { flex-direction: column; text-align: center; }
  .hgp-page-strip { top: 0; }
  .product-details .col-md-6:first-child { border-right: none; border-bottom: 1.5px solid var(--hg-border); padding-right: 15px; padding-bottom: 20px; margin-bottom: 20px; }
  .product-details .col-md-6:last-child { padding-left: 15px; }
  .sidebar-breadcrumb, .cart-sidebar { display: none; }
}

@media (max-width: 767px) {
  .tiles { gap: 10px; }
  .tiles .tile { min-width: 140px; }
  .tt-price-single .tt-price { font-size: 28px; }
  .tt-page-header { padding: 28px 0 24px; }
  .tt-page-header h1 { font-size: 20px; }
  .invoice-container { padding: 16px 12px; }
}

@media (max-width: 480px) {
  .tiles .tile { flex: 0 0 calc(50% - 7px); min-width: 0; }
  a.tile.tt-single-box { min-height: 70px !important; }
  .tt-dropdown-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE NAVBAR OVERRIDES
   (Large overrides section, loaded last to win specificity wars)
   ============================================================ */

[data-bs-theme="dark"]:root,
[data-bs-theme="dark"] :root {
  --hg-text: #1e293b;
}

/* -- Navbar: always navy -- */
.tt-header { background: var(--hg-navy) !important; }
.tt-header.affix { background: var(--hg-navy) !important; box-shadow: 0 4px 24px rgba(0,0,0,.25); }
.tt-header .navbar { background: var(--hg-navy) !important; }
.tt-header .tt-main-header ul > li > a,
#nav > li > a { color: rgba(255,255,255,.85) !important; }
#nav > li > a:hover,
#nav > li.active > a { color: #fff !important; }
.tt-toolbar-wrap .toolbar li a.cart-btn,
.tt-toolbar-wrap .toolbar li button.btn,
.tt-toolbar-wrap > li > a,
.tt-toolbar-wrap .nav-link,
.tt-secondary-list .nav-link,
.tt-secondary-list > li > a { color: rgba(255,255,255,.82) !important; }
.tt-toolbar-wrap li a:hover,
.tt-secondary-list .nav-link:hover { color: #fff !important; }
.tt-header i.fal, .tt-header i.fas, .tt-header i.far { color: rgba(255,255,255,.8) !important; }
.tt-header .tt-circle { background: var(--hg-orange) !important; }
.tt-header .tt-cart-badge { background: var(--hg-orange) !important; color: #fff !important; }
.tt-header .navbar-brand, .tt-header a.navbar-brand { color: #fff !important; font-weight: 800 !important; }

/* Dropdown menus — explicit dark text for ALL link types.
   Covers: a.dropdown-item (Store/Profile), a.pr-4 (More menu), bare a (Currency).
   Specificity (0,2,0,1) — beats all remaining navbar white rules after > fixes above. */
ul.dropdown-menu { background: #fff !important; }
.tt-header .dropdown-menu a { color: #1e293b !important; }
.tt-header .dropdown-menu a:hover { color: var(--hg-orange) !important; background-color: rgba(15,23,42,.04) !important; }

/* ── FIX: White-on-white dropdown bug ──────────────────────────────────────
   #nav > li > a has color:white !important (correct for the top-level bar).
   Without these overrides that white colour bleeds into dropdown child <a>s,
   making the text invisible against the white dropdown background.
   These rules have higher specificity than the parent white override so they
   win without needing !important on every property. */
#nav .dropdown-menu,
#nav ul.dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.09) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
  padding: 6px 0 !important;
}
#nav .dropdown-menu li a,
#nav .dropdown-menu .dropdown-item,
#nav .dropdown-menu a.dropdown-item {
  color: #1e293b !important;
  font-weight: 500;
  font-size: 13.5px;
}
#nav .dropdown-menu li a:hover,
#nav .dropdown-menu .dropdown-item:hover,
#nav .dropdown-menu a.dropdown-item:hover {
  color: var(--hg-orange) !important;
  background-color: rgba(245,114,0,.06) !important;
}

.tt-secondary-list .dropdown-toggle { color: rgba(255,255,255,.85) !important; }
.offcanvas-collapse { background: var(--hg-navy) !important; }
.offcanvas-collapse .nav-link { color: rgba(255,255,255,.82) !important; }

/* ============================================================
   PANEL DEFAULT (legacy BS3)
   ============================================================ */

.panel.panel-default {
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  box-shadow: var(--hg-shadow-sm);
}
.panel.panel-default > .panel-heading {
  background: var(--hg-bg);
  border-bottom: 1px solid var(--hg-border);
  border-radius: var(--hg-radius-lg) var(--hg-radius-lg) 0 0;
  font-weight: 600;
}

/* ============================================================
   ORDER / CART PAGE
   ============================================================ */

/* Order product package cards */
#order-standard_cart .package {
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  padding: 20px;
  margin-bottom: 16px;
  cursor: pointer;
}
#order-standard_cart .package:hover,
#order-standard_cart .package.selected {
  border-color: var(--hg-orange);
  box-shadow: 0 4px 20px rgba(245,114,0,.1);
}
#order-standard_cart .package .package-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--hg-navy);
}
#order-standard_cart .package .package-price {
  font-size: 28px;
  font-weight: 900;
  color: var(--hg-orange);
}
#order-standard_cart .package .package-features {
  font-size: 13px;
  color: var(--hg-slate);
}
#order-standard_cart .btn-order {
  background: var(--hg-orange);
  border-color: var(--hg-orange-dark);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 10px 24px;
}
#order-standard_cart .btn-order:hover {
  background: var(--hg-orange-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245,114,0,.3);
}

/* Domain selection in order */
#order-standard_cart .domain-selection-options .option {
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
#order-standard_cart .domain-selection-options .option:hover,
#order-standard_cart .domain-selection-options .option.selected {
  border-color: var(--hg-orange);
  background: var(--hg-orange-light);
}

/* Order summary table */
#order-standard_cart .view-cart-items .item-domain { font-weight: 600; color: var(--hg-navy); }
#order-standard_cart .view-cart-items .item-price { color: var(--hg-orange); font-weight: 700; }

/* Addon panels */
#order-standard_cart .panel-addon {
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  padding: 16px;
  margin-bottom: 12px;
}
#order-standard_cart .panel-addon .panel-heading {
  background: transparent !important;
  border-bottom: 1.5px solid var(--hg-border) !important;
  margin-bottom: 12px;
  color: var(--hg-navy) !important;
}
#order-standard_cart .panel-addon .panel-body label { color: var(--hg-text); font-size: 13.5px; }

/* Progress steps (checkout steps) */
.order-progress .step {
  font-size: 13px;
  font-weight: 600;
  color: var(--hg-slate);
  display: flex;
  align-items: center;
  gap: 8px;
}
.order-progress .step.active { color: var(--hg-orange); }
.order-progress .step-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--hg-bg);
  border: 2px solid var(--hg-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}
.order-progress .step.active .step-number {
  background: var(--hg-orange);
  border-color: var(--hg-orange-dark);
  color: #fff;
}
.order-progress .step.completed .step-number {
  background: var(--hg-green);
  border-color: #15803d;
  color: #fff;
}

/* Cart sidebar */
.cart-sidebar .card-header, .cart-sidebar .panel-heading { background: var(--hg-navy) !important; }
.cart-sidebar .list-group-item.active {
  background: rgba(245,114,0,.08) !important;
  color: var(--hg-orange) !important;
  border-left: 3px solid var(--hg-orange) !important;
}
.cart-sidebar .list-group-item { font-size: 13px; }
.cart-sidebar .price { font-weight: 700; color: var(--hg-orange); }
.cart-sidebar .discount { color: var(--hg-green); font-size: 12px; }

/* ============================================================
   CONTACT FORM
   ============================================================ */

.tt-contact-form .form-group { margin-bottom: 18px; }
.tt-contact-form label { font-size: 12.5px; font-weight: 700; color: var(--hg-navy); margin-bottom: 6px; display: block; }
.tt-contact-form .form-control { border-radius: 10px; }
.tt-contact-form textarea.form-control { min-height: 140px; resize: vertical; }

/* ============================================================
   PROFILE / ACCOUNT DETAILS
   ============================================================ */

.tt-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--hg-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  color: var(--hg-orange);
  margin: 0 auto 16px;
  border: 3px solid var(--hg-orange);
}
.tt-profile-name { font-size: 18px; font-weight: 800; color: var(--hg-navy); text-align: center; }
.tt-profile-email { font-size: 13px; color: var(--hg-slate); text-align: center; margin-bottom: 16px; }

/* Security settings */
.card.security-item {
  border: 1.5px solid var(--hg-border) !important;
  transition: border-color 0.2s ease;
}
.card.security-item:hover { border-color: var(--hg-orange) !important; }
.security-item .security-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--hg-orange-light);
  color: var(--hg-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* ============================================================
   VIEW TICKET
   ============================================================ */

.card.view-ticket .card-body.bg-primary-light {
  background: var(--hg-orange-light) !important;
}
.card.view-ticket .bg-primary-light h3,
.card.view-ticket .bg-primary-light .h6 { color: var(--hg-orange); }

/* Ticket reply messages */
.ticket-reply {
  border: 1.5px solid var(--hg-border);
  border-radius: var(--hg-radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}
.ticket-reply .reply-header {
  background: var(--hg-bg);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--hg-border);
  font-size: 13px;
}
.ticket-reply .reply-header .reply-from { font-weight: 700; color: var(--hg-navy); }
.ticket-reply .reply-header .reply-date { color: var(--hg-slate); font-size: 12px; }
.ticket-reply .reply-body { padding: 16px; font-size: 14px; line-height: 1.7; }
.ticket-reply.staff-reply .reply-header { background: #f0fdf4; }
.ticket-reply.staff-reply { border-color: #bbf7d0; }

/* ============================================================
   KNOWLEDGEBASE (extended)
   ============================================================ */

.kb-article-body { font-size: 15px; line-height: 1.75; color: var(--hg-text); }
.kb-article-body h2 { font-size: 20px; color: var(--hg-navy); margin-top: 28px; margin-bottom: 12px; }
.kb-article-body h3 { font-size: 16px; color: var(--hg-navy); margin-top: 20px; margin-bottom: 8px; }
.kb-article-body p { margin-bottom: 14px; }
.kb-article-body pre { background: var(--hg-bg); border: 1.5px solid var(--hg-border); border-radius: var(--hg-radius); padding: 16px; font-size: 13px; overflow-x: auto; }
.kb-article-body ul, .kb-article-body ol { padding-left: 24px; margin-bottom: 14px; }
.kb-article-body li { margin-bottom: 8px; }

.card.kb-category { border: 1.5px solid var(--hg-border) !important; border-radius: var(--hg-radius-lg) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.card.kb-category:hover { border-color: var(--hg-orange) !important; box-shadow: 0 6px 20px rgba(245,114,0,.1) !important; }
.card.kb-category h3 { font-size: 16px; font-weight: 700; color: var(--hg-navy); }
.card.kb-category .badge.bg-primary-light { background: var(--hg-orange-light) !important; color: var(--hg-orange) !important; font-size: 11px; font-weight: 700; }

/* ============================================================
   SECONDARY RESPONSIVE RULES (detailed)
   ============================================================ */

@media (max-width: 1199px) {
  .tiles .tile { min-width: 140px; }
  .tt-domain-search-wrap { padding: 24px 20px; }
}

@media (max-width: 991px) {
  .breadcrumb, .sidebar, .cart-sidebar,
  #main-body .sidebar-col { order: 2; }
  #main-body .primary-content-col { order: 1; }
  .tiles { gap: 10px; }
  .tiles .tile { min-width: 130px; flex: 1 1 calc(50% - 5px); }
  .ticket-list-table tbody td { padding: 10px 10px; }
  .invoice-container { padding: 20px 12px; }
  .tt-price-single { padding: 20px 14px; }
  .hgp-page-strip { top: 0; position: relative; }
  .panel-heading h3 { font-size: 12px !important; }
  .tt-page-header h1 { font-size: 22px; }
  .product-status { flex-direction: column; text-align: center; }
  .product-icon.text-center { margin-bottom: 8px; }
  .product-details .col-md-6:first-child { border-right: none; border-bottom: 1.5px solid var(--hg-border); padding-right: 15px; padding-bottom: 20px; margin-bottom: 20px; }
  .product-details .col-md-6:last-child { padding-left: 15px; }
}

@media (max-width: 767px) {
  .tiles .tile { flex: 0 0 calc(50% - 7px); min-width: 0; }
  .tiles { flex-wrap: wrap; }
  .tt-page-header { padding: 24px 0 20px; }
  .tt-page-header h1 { font-size: 18px; }
  .tt-price-single .tt-price { font-size: 28px; }
  .modal-dialog { margin: 10px; }
  .card-body { padding: 14px 16px; }
  .invoice-container { padding: 12px; }
  .dial-usage-container { margin: 4px; }
  ul.nav-tabs.responsive-tabs-sm .nav-link { padding: 9px 12px; font-size: 12px; }
  .product-details-tab-container { padding: 0 12px; }
  .product-details-tab-container .col-sm-5.text-right { text-align: left !important; margin-bottom: 2px; }
  .product-details-tab-container .row { flex-direction: column; gap: 2px; }
  .ticket-list-table thead { display: none; }
  .ticket-list-table tbody td { display: block; border-bottom: none; padding: 4px 12px; }
  .ticket-list-table tbody tr { display: block; border: 1.5px solid var(--hg-border); border-radius: var(--hg-radius-lg); margin-bottom: 10px; padding: 10px 0; }
  footer { padding: 28px 0 16px; }
  .tt-auth-wrap .card { margin: 0 10px; }
  #order-standard_cart .package { padding: 14px; }
  #order-standard_cart .package .package-price { font-size: 22px; }
}

@media (max-width: 575px) {
  .tiles .tile { flex: 0 0 100%; min-width: 0; }
  a.tile.tt-single-box { min-height: 70px !important; }
  .tt-dropdown-grid { grid-template-columns: 1fr; }
  .hgp-page-strip-inner { height: auto; padding: 8px 0; flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   MAIN BODY PADDING / SPACING
   ============================================================ */

#main-body .row > [class*="col-xl-3"] { padding-top: 24px !important; }
#main-body .primary-content { padding-top: 24px !important; padding-bottom: 48px !important; }

/* ============================================================
   SIDEBAR BADGE NUMBERS (client area sidebar count indicators)
   ============================================================ */

.sidebar .badge.float-right,
.sidebar-menu-item-badge .badge,
.sidebar .badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  width: 22px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  float: none !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  background-color: #f57200 !important;
  color: #fff !important;
}

/* ============================================================
   SIDEBAR — FIX ORANGE BG-PRIMARY IN SIDEBAR PANELS
   ============================================================ */

/* Higher specificity override: .sidebar .bg-primary beats .bg-primary */
.sidebar .bg-primary,
.sidebar .card .bg-primary,
.sidebar .collapsable-card-body .bg-primary {
  background-color: transparent !important;
  background: transparent !important;
  color: #f57200 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   CARD-ACCENT VARIANTS
   ============================================================ */

[class*="card-accent-"] .list-group-item.active,
[class*="card-accent-"] .list-group-item:active {
  background: rgba(245,114,0,.08) !important;
  color: var(--hg-orange) !important;
}

/* ============================================================
   HOMEPAGE PORTAL — PAGE STRIP EXTENDED
   ============================================================ */

/* Container inside strip mirrors navbar's container exactly */
.hgp-page-strip .container { /* no overrides — let Bootstrap's .container handle width/centering */ }
.hgp-page-strip-inner { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.hgp-page-strip-left { display: flex; align-items: center; gap: 8px; }
.hgp-strip-home {
  width: 28px;
  height: 28px;
  background: rgba(245,114,0,.1);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hg-orange);
  font-size: 14px;
  text-decoration: none;
}
.hgp-strip-home:hover { background: var(--hg-orange); color: #fff; }
.hgp-strip-divider { width: 1px; height: 18px; background: var(--hg-border); margin: 0 4px; }
.hgp-strip-title { font-size: 14px; font-weight: 700; color: var(--hg-navy); margin: 0; }
.hgp-strip-breadcrumb { font-size: 12px; color: var(--hg-slate); display: flex; align-items: center; gap: 4px; }
.hgp-strip-breadcrumb a { color: var(--hg-slate); text-decoration: none; }
.hgp-strip-breadcrumb a:hover { color: var(--hg-orange); }
.hgp-strip-breadcrumb .current { color: var(--hg-orange); font-weight: 600; }
.hgp-strip-breadcrumb .sep { color: var(--hg-border); }
.hgp-strip-right { display: flex; align-items: center; gap: 8px; }
.hgp-strip-btn {
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid var(--hg-border);
  border-radius: 8px;
  padding: 5px 12px;
  color: var(--hg-text);
  background: #fff;
  text-decoration: none;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hgp-strip-btn:hover { border-color: var(--hg-orange); color: var(--hg-orange); background: var(--hg-orange-light); text-decoration: none; }
.hgp-strip-btn.primary { background: var(--hg-orange); border-color: var(--hg-orange-dark); color: #fff; }
.hgp-strip-btn.primary:hover { background: var(--hg-orange-dark); }

/* ============================================================
   HOMEPAGE PORTAL — HOMEPAGE TILES (older definition)
   kept for specificity in areas not using !important cascade
   ============================================================ */

.tiles .tile {
  background: #fff;
  border: 1.5px solid var(--hg-border);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all .2s;
}
.tiles .tile:hover { border-color: var(--hg-orange); box-shadow: 0 4px 16px rgba(245,114,0,.1); }
.tiles .tile .number { font-size: 26px; font-weight: 900; color: var(--hg-navy); line-height: 1; }
.tiles .tile .title { font-size: 11px; font-weight: 700; color: var(--hg-slate); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

/* ============================================================
   HOMEPAGE PORTAL — NAVBAR (duplicated at end to win cascade)
   ============================================================ */

/* Extra :root overrides for homepage navbar context */
:root {
  --hg-navy: #0f172a;
  --hg-orange: #f57200;
  --hg-orange-dark: #d96500;
  --hg-bg: #f8fafc;
  --hg-border: #e2e8f0;
  --hg-slate: #64748b;
  --hg-text: #1e293b;
}

/* 5. DROPDOWN PANELS — white background, dark text
   This is the core fix. Any <a> inside a .dropdown-menu that lives inside
   .tt-header gets dark text (#1e293b), overriding the white set by navbar rules. */
.tt-header .dropdown-menu {
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.09) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.10) !important;
}
.tt-header .dropdown-menu a,
.tt-header .dropdown-menu .dropdown-item {
  color: #1e293b !important;
}
.tt-header .dropdown-menu a:hover,
.tt-header .dropdown-menu .dropdown-item:hover {
  color: var(--hg-orange) !important;
  background-color: rgba(245,114,0,.06) !important;
}

/* 6. Mega-dropdown text (tt-custom-navbar spans/smalls are not <a> tags) */
.tt-custom-navbar .tt-menu-content span { color: #1e293b !important; }
.tt-custom-navbar .tt-menu-content small { color: var(--hg-slate) !important; }
.tt-custom-navbar .tt-title-with-icon-link:hover .tt-menu-content span,
.tt-custom-navbar .tt-title-with-icon-link:hover .tt-menu-content small {
  color: var(--hg-orange) !important;
}

/* ── FIX: White-on-white dropdown bug (detailed) ─────────── */
#nav .dropdown-menu li a,
#nav ul.dropdown-menu li a {
  color: #1e293b !important;
  font-weight: 500;
  font-size: 13.5px;
}
#nav .dropdown-menu li a:hover,
#nav ul.dropdown-menu li a:hover {
  color: var(--hg-orange) !important;
  background-color: rgba(245,114,0,.06) !important;
}

/* Also fix the tt-custom-navbar mega dropdown link text colour */
.tt-custom-navbar .dropdown-menu a,
.tt-custom-navbar .tt-title-with-icon-link span,
.tt-custom-navbar .tt-menu-content span {
  color: #1e293b !important;
}

/* ============================================================
   DARK MODE (extended)
   ============================================================ */

[data-bs-theme="dark"] .tt-header,
[data-bs-theme="dark"] .tt-header.affix {
  background: #0c1120 !important;
}
[data-bs-theme="dark"] .tt-price-single,
[data-bs-theme="dark"] .tt-testimonial-item,
[data-bs-theme="dark"] .tiles .tile,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .announcement-card {
  background: #1e293b;
  border-color: #334155;
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .panel-heading {
  background: #0f172a !important;
}
[data-bs-theme="dark"] .hgp-page-strip {
  background: #1e293b;
  border-color: #334155;
}
[data-bs-theme="dark"] .hgp-strip-title { color: #f1f5f9; }
[data-bs-theme="dark"] .tiles .tile .stat { color: #f1f5f9 !important; }
[data-bs-theme="dark"] .tiles .tile:hover .stat { color: var(--hg-orange) !important; }
[data-bs-theme="dark"] .form-control {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
[data-bs-theme="dark"] .table tbody td { border-color: #334155; }
[data-bs-theme="dark"] .product-details-tab-container { border-color: #334155; }
[data-bs-theme="dark"] ul.nav-tabs.responsive-tabs-sm { border-color: #334155; }
[data-bs-theme="dark"] .card.card-sidebar { border-color: #334155 !important; }
[data-bs-theme="dark"] .sidebar .list-group-item { border-color: #334155 !important; color: #e2e8f0; }
[data-bs-theme="dark"] .sidebar .list-group-item:hover:not(.active) { background: rgba(245,114,0,.05); }
[data-bs-theme="dark"] #order-standard_cart .field,
[data-bs-theme="dark"] #order-standard_cart .form-control {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
[data-bs-theme="dark"] #order-standard_cart .products .product {
  background: #1e293b;
  border-color: #334155;
}
[data-bs-theme="dark"] #order-standard_cart .domain-selection-options .option {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
[data-bs-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item { background: #1e293b; color: #e2e8f0; border-color: #334155; }
[data-bs-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item.active,
[data-bs-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item.active:focus,
[data-bs-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item.active:hover {
  background: rgba(245,114,0,.1) !important;
  color: var(--hg-orange) !important;
}
[data-bs-theme="dark"] #order-standard_cart .panel-addon .panel-body label { color: #e2e8f0; }
[data-bs-theme="dark"] #order-standard_cart .view-cart-items .item-domain { color: #f1f5f9; }

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  .invoice-container { max-width: 100% !important; }
  .sidebar, .card-sidebar, #nav, footer { display: none !important; }
  .hgp-page-strip { display: none !important; }
  .tt-header { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}