/* =====================================================================
   CROCKYHOST WHMCS THEME
   Based on crocky.host design system
   ===================================================================== */

/* ---- Mobile tap highlight & selection reset ---- */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
/* Hide focus ring on mouse/touch clicks, preserve for keyboard nav */
:focus:not(:focus-visible) { outline: none !important; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
#ch-mobile-menu a,
#ch-mobile-menu button,
#ch-mobile-menu .ch-nav-link { user-select: none; -webkit-user-select: none; }
#ch-mobile-menu a:not(:focus-visible),
#ch-mobile-menu button:not(:focus-visible),
#ch-mobile-menu .ch-nav-link:not(:focus-visible) { outline: none; }

/* ---- Google Fonts ---- */
/* Google Fonts loaded via <link> + preconnect in header.tpl */
/* Metric-adjusted fallback: reduces CLS / FOUT while Plus Jakarta Sans loads */
@font-face {
  font-family: 'Plus Jakarta Sans Fallback';
  src: local('system-ui'), local('-apple-system'), local('BlinkMacSystemFont');
  ascent-override: 94%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 103%;
}

/* ---- Design Tokens ---- */
:root {
  --primary:              #00C96F;
  --primary-hover:        #00A85C;
  --primary-light:        #E6FFF3;
  --primary-glow:         rgba(0,201,111,0.25);
  --primary-glow-intense: rgba(0,201,111,0.4);

  --accent-blue:   #0EA5E9;
  --accent-cyan:   #14B8A6;
  --accent-coral:  #F97316;

  --bg-primary:   #FFFFFF;
  --bg-secondary: #FAFBFC;
  --bg-tertiary:  #F4F6F8;
  --bg-card:      rgba(255,255,255,0.95);
  --bg-page:      linear-gradient(180deg,#FAFBFC 0%,#F0F4F8 50%,#E5EAF0 100%);

  --text-primary:   #1A202C;
  --text-secondary: #4A5568;
  --text-muted:     #606B7A;  /* darkened for WCAG AA: 4.9:1 contrast */
  --text-link:      #059669;
  --border-color:   rgba(26,32,44,0.20);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 25px var(--primary-glow);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --font-display: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, -apple-system, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  --transition:   all 0.25s cubic-bezier(0.22,1,0.36,1);
  /* header top(16px) + pill height(64px) + gap(16px) = 96px */
  --header-height: 96px;

  /* ---- Semantic spacing scale (4pt base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
}

.dark {
  --bg-primary:   #0F1419;
  --bg-secondary: #161B22;
  --bg-tertiary:  #1C2128;
  --bg-card:      rgba(22,27,34,0.95);
  --bg-page:      linear-gradient(180deg,#0F1419 0%,#161B22 50%,#0F1419 100%);

  --text-primary:   #F0F6FC;
  --text-secondary: #C9D1D9;
  --text-muted:     #8B949E;
  --text-link:      #00C96F;
  --border-color:   rgba(240,246,252,0.1);
  --bg-card:        rgba(22,27,34,0.95);

  --primary-glow:         rgba(0,201,111,0.2);
  --primary-glow-intense: rgba(0,201,111,0.35);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body,
body.primary-bg-color {
  font-family: var(--font-body);
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Ambient background blobs */
body::before, body::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.25;
}
body::before {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
  top: -150px; right: -100px;
}
body::after {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--accent-blue) 0%, transparent 70%);
  bottom: 10%; left: -100px;
}

/* =====================================================================
   HEADER / NAV-GLASS
   ===================================================================== */

/* Override twenty-one header completely */
#header.header {
  position: fixed !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 1260px !important;
  height: 64px !important;
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 0 40px rgba(0,201,111,0.1) !important;
  z-index: 1005 !important;
  transition: var(--transition);
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}
.dark #header.header {
  background: rgba(10,15,26,0.85) !important;
  border-color: rgba(0,255,136,0.25) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 80px rgba(0,255,136,0.15), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Topbar (logged-in bar) */
.topbar {
  display: none; /* Hidden - user account info moves to navbar */
}

/* Hide topbar divider */
.header .topbar { display: none !important; }

/* Main navbar inside #header */
#header .navbar.navbar-light {
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#header .navbar-light .navbar-brand {
  padding: 0;
  margin: 0 24px 0 0;
}
#header .navbar-light .navbar-brand img.logo-img {
  height: 38px;
  width: auto;
}
/* Hide the second nav wrapper (main-navbar-wrapper) - merge into one bar */
#header .navbar.main-navbar-wrapper {
  display: none !important;
}

/* Cart + hamburger toolbar */
#header .navbar .toolbar {
  margin-left: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
#header .navbar .toolbar .nav-item .btn {
  color: var(--text-secondary);
  background: transparent;
  border: none;
  padding: 10px 14px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
#header .navbar .toolbar .nav-item .btn:hover {
  color: var(--primary);
  background: var(--primary-light);
}
.dark #header .navbar .toolbar .nav-item .btn:hover {
  background: rgba(0,201,111,0.1);
}

/* CrockyHost custom nav overlay (rendered via header.tpl) */
.ch-navbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.ch-nav-link {
  color: var(--text-secondary) !important;
  font-family: var(--font-body);
  font-size: 0.925rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.ch-nav-link:hover, .ch-nav-link.active {
  color: var(--primary) !important;
  background: var(--primary-light);
  text-decoration: none;
}
.dark .ch-nav-link:hover, .dark .ch-nav-link.active {
  background: rgba(0,201,111,0.1);
}

/* Theme toggle button */
.ch-theme-toggle {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  font-size: 1rem;
}
.ch-theme-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.ch-theme-toggle .sun-icon, .ch-theme-toggle .moon-icon { display: none; }
.dark  .ch-theme-toggle .sun-icon  { display: inline; }
html:not(.dark) .ch-theme-toggle .moon-icon { display: inline; }

/* Logo variants */
.ch-logo-light { display: block; }
.ch-logo-dark  { display: none;  }
.dark .ch-logo-light { display: none;  }
.dark .ch-logo-dark  { display: block; }

/* =====================================================================
   MAIN BODY - offset for fixed nav
   ===================================================================== */
section#main-body {
  padding-top: var(--header-height) !important; /* offset for fixed pill navbar */
  padding-bottom: 40px !important;
  min-height: calc(100vh - var(--header-height));
  position: relative;
  z-index: 1;
}
section#main-body > .container,
section#main-body > div.container-fluid {
  padding-top: 24px;
}

/* =====================================================================
   CARDS & PANELS
   ===================================================================== */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-md) !important;
}

.panel, .panel-default {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.panel-heading {
  background: var(--bg-tertiary) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary) !important;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn-primary, .btn-success {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition);
}
.btn-primary:hover, .btn-success:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  box-shadow: var(--shadow-glow) !important;
  transform: translateY(-1px);
}

.btn-default, .btn-secondary {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition);
}
.btn-default:hover, .btn-secondary:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.btn-danger {
  border-radius: var(--radius-sm) !important;
  transition: var(--transition);
}

/* =====================================================================
   FORMS
   ===================================================================== */
.form-control {
  background: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition);
}
.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
  background: var(--bg-primary) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }

label, .control-label { color: var(--text-secondary) !important; font-weight: 500; }

/* =====================================================================
   TABLES
   ===================================================================== */
.table {
  color: var(--text-primary) !important;
}
.table th {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color) !important;
}
.table td {
  border-color: var(--border-color) !important;
  vertical-align: middle !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background: var(--bg-secondary) !important;
}
.table-hover tbody tr:hover {
  background: var(--primary-light) !important;
}
.dark .table-hover tbody tr:hover {
  background: rgba(0,201,111,0.05) !important;
}

/* =====================================================================
   ALERTS & BADGES
   ===================================================================== */
.alert {
  border-radius: var(--radius-sm) !important;
  border: none !important;
}
.alert-success { background: #E6FFF3 !important; color: #065F46 !important; }
.alert-danger, .alert-error  { background: #FEF2F2 !important; color: #991B1B !important; }
.alert-warning { background: #FFFBEB !important; color: #92400E !important; }
.alert-info    { background: #EFF6FF !important; color: #1E40AF !important; }

.dark .alert-success { background: rgba(0,201,111,0.1) !important; color: #6EE7B7 !important; }
.dark .alert-danger, .dark .alert-error  { background: rgba(239,68,68,0.1) !important; color: #FCA5A5 !important; }
.dark .alert-warning { background: rgba(245,158,11,0.1) !important; color: #FCD34D !important; }
.dark .alert-info    { background: rgba(59,130,246,0.1) !important; color: #93C5FD !important; }

.badge-primary, .badge-success { background: var(--primary) !important; }

/* Status badges */
.badge-unpaid, .label-danger  { background: #FEF2F2 !important; color: #991B1B !important; }
.badge-paid, .label-success   { background: #E6FFF3 !important; color: #065F46 !important; }

/* =====================================================================
   SIDEBAR
   ===================================================================== */
.sidebar .list-group-item {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
  transition: var(--transition);
}
.sidebar .list-group-item:hover, .sidebar .list-group-item.active {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.dark .sidebar .list-group-item:hover, .dark .sidebar .list-group-item.active {
  background: rgba(0,201,111,0.1) !important;
}

/* =====================================================================
   BREADCRUMB
   ===================================================================== */
.master-breadcrumb {
  background: transparent !important;
  padding: 8px 0 0 !important;
}
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.breadcrumb-item a { color: var(--primary) !important; }
.breadcrumb-item.active { color: var(--text-muted) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted) !important; }

/* =====================================================================
   FOOTER
   ===================================================================== */
#footer.footer {
  background: var(--bg-secondary) !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  padding: 48px 0 32px !important;
  margin-top: 64px;
  position: relative;
}
#footer .footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}
#footer .footer-tagline {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}
#footer .nav-link {
  color: var(--text-muted) !important;
  font-size: 0.9rem;
  padding: 4px 0 !important;
  transition: var(--transition);
}
#footer .nav-link:hover {
  color: var(--primary) !important;
}
#footer .copyright {
  color: var(--text-muted) !important;
  font-size: 0.8rem;
}
#footer .footer-social a {
  color: var(--text-muted);
  font-size: 1.1rem;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  margin-right: 8px;
}
#footer .footer-social a:hover {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 12px var(--primary-glow);
}

/* =====================================================================
   MODALS
   ===================================================================== */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  color: var(--text-primary) !important;
}
.modal-header {
  border-bottom-color: var(--border-color) !important;
  background: var(--bg-tertiary) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.modal-footer {
  border-top-color: var(--border-color) !important;
}
.modal-title { font-family: var(--font-display); font-weight: 600; }

/* =====================================================================
   PAGE TITLES
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display) !important;
  color: var(--text-primary) !important;
  font-weight: 700;
}
.page-title, .content-box h1 { font-size: 1.75rem; }

/* =====================================================================
   DARK MODE - general overrides
   ===================================================================== */
.dark body, .dark .primary-bg-color {
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
}
.dark .card, .dark .panel, .dark .panel-default {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
.dark .form-control, .dark select.form-control, .dark textarea.form-control {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.dark .table { color: var(--text-primary) !important; }
.dark .table th { background: var(--bg-tertiary) !important; }
.dark .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,0.03) !important; }
.dark .modal-content { box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important; }
.dark .btn-default, .dark .btn-secondary {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark input, .dark select, .dark textarea {
  color-scheme: dark;
}

/* =====================================================================
   HOMEPAGE - domain search
   ===================================================================== */
.domain-search-banner {
  background: linear-gradient(135deg, var(--primary) 0%, #00a85c 100%);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  margin-bottom: 32px;
  color: #fff;
  box-shadow: var(--shadow-glow);
}

/* =====================================================================
   INVOICE STATUS COLORS (match Oblio workflow)
   ===================================================================== */
.status-unpaid  { color: #991B1B; background: #FEF2F2; }
.status-paid    { color: #065F46; background: #E6FFF3; }
.status-storno  { color: #6B21A8; background: #F5F3FF; }
.status-draft   { color: #374151; background: #F9FAFB; }

/* =====================================================================
   UTILITY
   ===================================================================== */
.text-primary-color { color: var(--primary) !important; }
.bg-primary-color   { background: var(--primary) !important; }
a { color: var(--text-link); }
a:hover { color: var(--primary); }
hr { border-color: var(--border-color) !important; }

/* Smooth transitions on theme switch */
*, *::before, *::after {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* But don't transition transforms/shadows on hover (feels sluggish) */
.btn, .card, .ch-nav-link, .sidebar .list-group-item {
  transition: var(--transition) !important;
}

/* =====================================================================
   HIDE WHMCS BRANDING
   ===================================================================== */
p:has(a[href*="whmcs.com"]),
.text-center > a[href*="whmcs.com"],
a[href*="whmcs.com"][target="_blank"] {
  display: none !important;
}
/* Broader catch for the injected paragraph */
p[style*="text-align:center"]:has(a[href*="whmcs.com"]),
p[style*="text-align: center"]:has(a[href*="whmcs.com"]) {
  display: none !important;
}

/* =====================================================================
   FOOTER SOCIAL ICON SIZING (FontAwesome)
   ===================================================================== */
#footer .footer-social a i {
  font-size: 1rem;
}

/* =====================================================================
   HOMEPAGE DESIGN TOKENS (extended)
   ===================================================================== */
:root {
  --radius-xl:              28px;
  --radius-full:            100px;
  --font-size-xs:           0.875rem;
  --font-size-sm:           1rem;
  --font-size-base:         1.125rem;
  --font-size-lg:           1.25rem;
  --font-size-xl:           1.5rem;
  --font-size-2xl:          2rem;
  --font-size-3xl:          2.5rem;
  --line-height-tight:      1.3;
  --line-height-normal:     1.6;
  --line-height-relaxed:    1.8;
  --letter-spacing-tight:   -0.02em;
  --letter-spacing-open:    0.08em;
  --ease-bounce:            cubic-bezier(0.16, 1, 0.3, 1);
  --duration-base:          250ms;
  --duration-slow:          400ms;
  --shadow-glow-intense:    0 0 40px var(--primary-glow-intense);
}

/* =====================================================================
   CH-HOMEPAGE LAYOUT
   ===================================================================== */
.ch-homepage { width: 100%; }
.ch-section {
  padding: 80px 0;
  background: #0F1419;
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px;
}
@media (max-width: 768px) { .ch-section { padding: 56px 0; } }

/* =====================================================================
   SECTION HEADER
   ===================================================================== */
.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 56px;
  padding: 0 24px;
}
@media (max-width: 768px) { .section-header { margin-bottom: 36px; } }

/* Tighter bottom-margin for sections where content follows immediately */
.section-header--tight { margin-bottom: 40px; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1.2;
  text-align: center;
}


.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.gradient-text {
  color: var(--primary);
}

/* =====================================================================
   HERO SECTION
   ===================================================================== */
.hero-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px 80px;
  background: linear-gradient(180deg, #0F1419 0%, #0d1117 100%);
  overflow: hidden;
  /* Break out of Bootstrap container */
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(0,255,136,0.02) 80px, rgba(0,255,136,0.02) 81px),
    repeating-linear-gradient(0deg, transparent, transparent 80px, rgba(0,255,136,0.02) 80px, rgba(0,255,136,0.02) 81px);
  pointer-events: none;
  opacity: 0.6;
}

.hero-section::after {
  content: '';
  position: absolute;
  width: 1000px; height: 600px;
  background: radial-gradient(ellipse, var(--primary-glow-intense) 0%, transparent 70%);
  top: -300px; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.5;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}

/* Hero Badge */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px var(--primary-glow); }
  50%       { box-shadow: 0 0 18px rgba(0,201,111,0.35); }
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border: 2px solid rgba(0,201,111,0.4);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 32px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(0,201,111,0.08);
  animation: pulse-glow 4s ease-in-out infinite;
}
html:not(.dark) .hero-badge { color: #047857; border-color: rgba(0,201,111,0.3); box-shadow: none; animation: none; }

.badge-icon { display: flex; align-items: center; font-size: 1.1rem; }

/* Hero Title */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 24px;
  letter-spacing: var(--letter-spacing-tight);
}
.title-main { display: block; }
.title-sub  { display: block; color: var(--primary); }
html:not(.dark) .title-sub { color: #059669; }


/* Hero Description */
.hero-description {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: 28px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Benefits row */
.hero-benefits {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 24px 0;
}
.benefit-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  backdrop-filter: blur(10px);
  transition: var(--transition);
}
.benefit-item:hover { border-color: var(--primary); transform: translateY(-2px); }
.benefit-icon { font-size: 1rem; color: var(--primary); line-height: 1; }
html:not(.dark) .benefit-item {
  background: rgba(0,201,111,0.07);
  border-color: rgba(0,201,111,0.28);
  color: #065f46;
}
html:not(.dark) .benefit-icon { color: #059669; }

/* Hero Buttons */
.hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 36px 0; }

.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  font-size: 1.05rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #0a0f1a;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: var(--transition);
  box-shadow: var(--shadow-glow);
  border: none;
  cursor: pointer;
}
.primary-button:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-glow-intense); color: #0a0f1a; }

.glass-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  font-size: 1.05rem;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: var(--transition);
  backdrop-filter: blur(10px);
}
.glass-button:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); }
html:not(.dark) .glass-button { background: rgba(255,255,255,0.9); }

.button-icon { font-size: 1rem; line-height: 1; }

/* Hero Stats */
.hero-stats { position: relative; z-index: 5; width: 100%; margin-top: 60px; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 700px;
  margin: 0 auto;
}
@media (max-width: 600px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

.stat-item {
  text-align: center;
  padding: 24px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px);
  transition: var(--transition);
}
.stat-item:hover { border-color: var(--primary); transform: translateY(-4px); }
.stat-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; }

/* =====================================================================
   FEATURES SECTION
   ===================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}
/* At 960px+: give first card (Speed) a slight extra width — breaks equal-column monotony */
@media (min-width: 960px) {
  .features-grid {
    grid-template-columns: 1.35fr 1fr 1fr;
  }
}

.feature-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  transition: all var(--duration-base) var(--ease-bounce);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
}
/* First feature (Speed) — more breathing room, reinforces its visual primacy */
@media (min-width: 960px) {
  .features-grid .feature-card:first-child {
    padding: 48px 40px;
  }
  .features-grid .feature-card:first-child h3 {
    font-size: 1.4rem;
  }
  .features-grid .feature-card:first-child .feature-icon {
    width: 64px; height: 64px; font-size: 30px;
  }
}
html:not(.dark) .feature-card { box-shadow: 0 8px 32px rgba(0,0,0,0.06); }
.dark .feature-card { background: rgba(15,23,42,0.7); border-color: rgba(0,201,111,0.15); }
.feature-card:hover { transform: translateY(-8px); border-color: var(--primary); box-shadow: var(--shadow-glow); }

.feature-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,201,111,0.12);
  border: 1.5px solid rgba(0,201,111,0.28);
  border-radius: 50%;
  margin-bottom: 20px;
  color: var(--primary);
  transition: all 0.25s ease;
  font-size: 26px;
}
.feature-card:hover .feature-icon { background: rgba(0,201,111,0.2); transform: scale(1.06); }
.feature-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; color: var(--text-primary); }
.feature-card p  { color: var(--text-secondary); line-height: var(--line-height-relaxed); }

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
}
/* Horizontal connector between steps at desktop */
.steps-grid::before {
  content: '';
  position: absolute;
  top: 36px; left: calc(16.6% + 20px); right: calc(16.6% + 20px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--accent-cyan), transparent);
  opacity: 0.35;
}
@media (max-width: 768px) { .steps-grid::before { display: none; } }

.step-container {
  text-align: left;
  padding: 32px 40px 32px 28px;
  position: relative;
}
@media (max-width: 768px) {
  .step-container {
    text-align: center;
    padding: 28px 20px;
    border-bottom: 1px solid var(--border-color);
  }
  .step-container:last-child { border-bottom: none; }
}

/* Large ghost number — typographic anchor, breaks icon-grid monotony */
.step-number {
  display: block;
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 900;
  color: var(--primary);
  opacity: 0.18;
  line-height: 1;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.dark .step-number { opacity: 0.22; }
@media (max-width: 768px) {
  .step-number { margin: 0 auto 8px; text-align: center; font-size: 3rem; }
}

/* Thin vertical separator between steps at desktop */
@media (min-width: 769px) {
  .step-container:not(:last-child) {
    border-right: 1px solid var(--border-color);
  }
}

.step-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-primary);
  position: relative;
}
/* Small green accent dot before step title */
.step-title::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--primary);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  position: relative; top: -1px;
}
@media (max-width: 768px) { .step-title::before { display: none; } }

.step-description { color: var(--text-secondary); line-height: 1.65; font-size: 0.92rem; }

/* =====================================================================
   FAQ
   ===================================================================== */
#faq { padding: 80px 0; }

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; max-width: 600px; } }

.space-y-4 { display: flex; flex-direction: column; gap: 16px; }

.faq-item {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
html:not(.dark) .faq-item {
  background: rgba(255,255,255,0.68);
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
}
.dark .faq-item {
  background: rgba(12,18,30,0.52);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.faq-item:hover { border-color: rgba(0,201,111,0.4); transform: translateY(-3px); }
.faq-item.open { border-color: var(--primary); }

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 26px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  cursor: pointer;
  border: none;
  line-height: 1.5;
  transition: color 0.2s;
}
.faq-question:hover { background: rgba(0,201,111,0.04); }

.faq-chevron { flex-shrink: 0; margin-left: 12px; transition: transform 0.35s ease; font-size: 1rem; color: var(--text-muted); }
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--primary); }

.faq-answer {
  padding: 0 26px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22,1,0.36,1), padding 0.35s ease;
}
.faq-item.open .faq-answer { max-height: 600px; padding: 0 26px 24px; }

.faq-answer p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: var(--line-height-relaxed);
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

/* =====================================================================
   NEWSLETTER SECTION
   ===================================================================== */
.newsletter-section {
  padding: 60px 0 80px;
  background: #0d1117;
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px;
}

.newsletter-card {
  position: relative;
  padding: 60px 40px;
  background: var(--bg-card);
  border: 2px solid rgba(0,201,111,0.2);
  border-radius: 28px;
  overflow: hidden;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
html:not(.dark) .newsletter-card { background: rgba(255,255,255,0.97); box-shadow: 0 16px 64px rgba(0,0,0,0.08); }
.dark .newsletter-card { background: rgba(15,23,42,0.75); }
@media (max-width: 640px) { .newsletter-card { padding: 40px 24px; } }

@keyframes newsletterGlow {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
  50%       { transform: translateX(-50%) scale(1.2); opacity: 0.8; }
}
.newsletter-glow {
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,255,136,0.12) 0%, transparent 70%);
  pointer-events: none;
  animation: newsletterGlow 4s ease-in-out infinite;
}
.newsletter-content { position: relative; z-index: 1; }

.newsletter-icon {
  width: 52px; height: 52px;
  margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,201,111,0.12);
  border: 1.5px solid rgba(0,201,111,0.28);
  border-radius: 50%;
}

.newsletter-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: var(--letter-spacing-tight);
}
.newsletter-content > p {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-bottom: 28px;
  line-height: var(--line-height-relaxed);
}
.newsletter-privacy { font-size: 0.85rem; color: var(--text-muted); margin-top: 16px; }

/* Light mode section backgrounds */
html:not(.dark) .ch-section {
  background: #F4F6F8;
}
html:not(.dark) .newsletter-section {
  background: #FAFBFC;
}
html:not(.dark) .hero-section {
  background: linear-gradient(180deg, #FAFBFC 0%, #E8EDF4 100%);
}

/* =====================================================================
   LEGAL PAGES (privacy-policy, terms, refund)
   ===================================================================== */
.ch-legal-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 0 48px;
}
.ch-legal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 40px 48px;
}
@media (max-width: 576px) {
  .ch-legal-card { padding: 24px 20px; }
}
.ch-legal-h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.ch-legal-meta {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
}
.ch-legal-h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 40px;
  margin-bottom: 12px;
}
.ch-legal-h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 28px;
  margin-bottom: 10px;
}
.ch-legal-h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 20px;
  margin-bottom: 8px;
}
.ch-legal-page p {
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 14px;
}
.ch-legal-list {
  color: var(--text-secondary);
  padding-left: 24px;
  margin-bottom: 16px;
}
.ch-legal-list li { margin-bottom: 6px; line-height: 1.7; }
.ch-legal-page a, .ch-legal-list a { color: var(--primary); text-decoration: none; }
.ch-legal-page a:hover, .ch-legal-list a:hover { text-decoration: underline; }

.ch-legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 0.875rem;
}
.ch-legal-table th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border-color);
}
.ch-legal-table td {
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  vertical-align: top;
}
.ch-legal-table tr:nth-child(even) td { background: var(--bg-secondary); }

.ch-callout {
  border: 1.5px solid;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 0.9rem;
  line-height: 1.6;
}
.ch-callout-warning {
  border-color: #F59E0B;
  background: rgba(245,158,11,0.08);
  color: var(--text-secondary);
}
.dark .ch-callout-warning { background: rgba(245,158,11,0.12); }
.ch-callout-warning strong { color: #D97706; }
.ch-callout-info {
  border-color: #0EA5E9;
  background: rgba(14,165,233,0.08);
  color: var(--text-secondary);
}
.dark .ch-callout-info { background: rgba(14,165,233,0.12); }
.ch-callout-info strong { color: #0284C7; }

.ch-legal-entity {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 28px;
  margin: 24px 0 32px;
}
.dark .ch-legal-entity {
  background: rgba(22,27,34,0.8);
}
.ch-entity-table { width: 100%; border-collapse: collapse; }
.ch-entity-table td { padding: 6px 0; color: var(--text-secondary); font-size: 0.9rem; }
.ch-entity-table td.label { color: var(--text-muted); min-width: 160px; font-weight: 500; }
.ch-entity-table a { color: var(--primary); }

/* =====================================================================
   ABOUT US PAGE
   ===================================================================== */
.ch-about .ch-section {
  background: #0F1419;
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px;
}
html:not(.dark) .ch-about .ch-section { background: #F4F6F8; }
.ch-about .ch-section-alt {
  background: #161B22;
}
html:not(.dark) .ch-about .ch-section-alt { background: #EAEFF5; }

.ch-about-hero { position: relative; overflow: hidden; }
.ch-floating-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ch-floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(0,201,111,0.05);
  animation: chFloat 20s ease-in-out infinite;
}
@keyframes chFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.ch-about-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 100px;
  background: rgba(0,201,111,0.15);
  border: 1px solid rgba(0,201,111,0.3);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.ch-about-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 20px;
}
.ch-gradient-text {
  color: var(--primary);
}
.ch-about-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

.ch-glow-card {
  background: var(--bg-card);
  border: 1px solid rgba(0,201,111,0.18);
  border-radius: var(--radius-lg);
  padding: 28px;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  transition: var(--transition);
}
html:not(.dark) .ch-glow-card {
  background: rgba(255,255,255,0.78);
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,1);
}
.dark .ch-glow-card {
  background: rgba(22,27,34,0.72);
  border-color: rgba(0,201,111,0.15);
  box-shadow: 0 2px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ch-glow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,201,111,0.15);
  border-color: rgba(0,201,111,0.4);
}
.dark .ch-glow-card:hover {
  box-shadow: 0 16px 40px rgba(0,201,111,0.12), 0 0 0 1px rgba(0,201,111,0.2),
              inset 0 1px 0 rgba(255,255,255,0.06);
}

.ch-stat-number {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: 6px;
}
.ch-stat-label { color: var(--text-secondary); font-weight: 500; font-size: 0.925rem; margin: 0; }

.ch-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  text-align: center;
}
.ch-section-subtitle {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.65;
}

.ch-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.ch-card-text { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; margin: 0; }

.ch-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,201,111,0.12);
  border: 1.5px solid rgba(0,201,111,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--primary);
  margin-bottom: 16px;
}

/* Timeline */
.ch-timeline { position: relative; }
.ch-timeline::before {
  content: '';
  display: none;
}
@media (min-width: 768px) {
  .ch-timeline::before {
    display: block;
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #00C96F 0%, rgba(0,201,111,0.2) 100%);
    transform: translateX(-50%);
  }
}
.ch-timeline-item {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}
.ch-timeline-item .ch-glow-card { flex: 1; }
.ch-timeline-dot {
  display: none;
}
@media (min-width: 768px) {
  .ch-timeline-dot {
    display: flex;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00C96F 0%, #00A85C 100%);
    color: #fff;
    font-size: 1.1rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }
  .ch-timeline-left { flex-direction: row; text-align: right; }
  .ch-timeline-right { flex-direction: row; }
  .ch-timeline-right .ch-glow-card { order: 2; }
  .ch-timeline-right .ch-timeline-dot { order: 1; }
  .ch-timeline-left .ch-glow-card { order: 1; }
  .ch-timeline-left .ch-timeline-dot { order: 2; }
  .ch-timeline-left + .ch-timeline-dot ~ div { flex: 1; }
}

.ch-timeline-year {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(0,201,111,0.12);
  color: #00C96F;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.ch-service-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.ch-service-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid rgba(0,201,111,0.15);
  transition: var(--transition);
}
.ch-service-item:hover { border-color: rgba(0,201,111,0.4); transform: translateX(4px); }
.ch-service-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #00C96F 0%, #00A85C 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
}

.ch-value-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(0,201,111,0.12);
  border: 1px solid rgba(0,201,111,0.25);
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }

.ch-cta-section {
  background: linear-gradient(135deg, rgba(0,201,111,0.08) 0%, #0F1419 100%) !important;
}
html:not(.dark) .ch-cta-section {
  background: linear-gradient(135deg, rgba(0,201,111,0.06) 0%, #EDF2F7 100%) !important;
}

/* =====================================================================
   VISUAL POLISH v2 - 2026-04
   ===================================================================== */

/* --- WHMCS shell: force transparent to prevent gray boxes ----------- */
#main-body,
#main-body > .container,
#main-body > div,
#main-body .row,
#main-body .primary-content,
.master-breadcrumb,
.master-breadcrumb .container,
.master-breadcrumb .breadcrumb,
.master-breadcrumb ol,
.master-breadcrumb li { background: transparent !important; }

.master-breadcrumb {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
}
/* Hide breadcrumb text entirely on marketing pages */
.ch-homepage ~ section .master-breadcrumb,
body:has(main.ch-homepage) .master-breadcrumb { display: none !important; }

/* --- HEADER: refined glass pill, no amber glow --------------------- */
#header.header {
  box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 0 rgba(255,255,255,0.4) inset !important;
  border-color: rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.72) !important;
}
.dark #header.header {
  background: rgba(10,15,26,0.88) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* --- NAV: flex center, no absolute positioning --------------------- */
#header .navbar.navbar-light { flex-wrap: nowrap !important; }
.ch-navbar {
  flex: 1 1 0 !important;
  justify-content: center !important;
  gap: 2px !important;
  overflow: visible;
  min-width: 0;
}
/* Tighten nav items at 1280-1400px */
@media (max-width: 1400px) {
  .ch-nav-link { padding: 6px 8px !important; font-size: 0.875rem !important; }
  .ch-avatar-name { max-width: 90px; }
}
@media (max-width: 1280px) {
  .ch-nav-link { padding: 6px 6px !important; font-size: 0.84rem !important; }
}

/* --- GLASS BUTTON: visible contrast in dark mode ------------------- */
.glass-button {
  background: rgba(255,255,255,0.07) !important;
  border: 1.5px solid rgba(255,255,255,0.2) !important;
  color: var(--text-primary) !important;
}
.glass-button:hover {
  background: rgba(0,201,111,0.12) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
html:not(.dark) .glass-button {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #1A202C !important;
}
html:not(.dark) .glass-button:hover {
  background: #fff !important;
  border-color: #00C96F !important;
  color: #00C96F !important;
}

/* --- PRIMARY BUTTON: tighter, crisper ----------------------------- */
.primary-button {
  letter-spacing: 0.01em;
  text-decoration: none !important;
}
.primary-button:hover { text-decoration: none !important; }

.hero-section {
  padding-bottom: 90px !important;
}
@media (max-width: 768px) { .hero-section { padding-bottom: 60px !important; } }

/* --- SECTIONS: alternating dark backgrounds for visual rhythm ------- */
#features.ch-section   { background: #0F1419 !important; }
#how-it-works.ch-section { background: #111827 !important; }
#faq.ch-section          { background: #0F1419 !important; }
.newsletter-section      { background: #111827 !important; }

html:not(.dark) #features.ch-section   { background: #F4F6F8 !important; }
html:not(.dark) #how-it-works.ch-section { background: #EDF2F7 !important; }
html:not(.dark) #faq.ch-section        { background: #F4F6F8 !important; }
html:not(.dark) .newsletter-section    { background: #EDF2F7 !important; }

/* --- FEATURE CARDS: more contrast, visible in dark ----------------- */
.dark .feature-card {
  background: rgba(22,27,34,0.9) !important;
  border-color: rgba(240,246,252,0.08) !important;
}
.dark .feature-card:hover {
  border-color: rgba(0,201,111,0.4) !important;
  box-shadow: 0 8px 40px rgba(0,201,111,0.12) !important;
}
html:not(.dark) .feature-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06) !important;
}

/* --- STAT ITEMS: cleaner in dark ----------------------------------- */
.dark .stat-item {
  background: rgba(22,27,34,0.85) !important;
  border-color: rgba(0,201,111,0.1) !important;
}

/* STEPS: hover lift retained */
.step-container:hover { transform: translateY(-2px); }

/* --- FAQ ITEMS: glass effect reinforcement (dark + light) ---------- */
/* Base glass already set above; only add hover accent here */

/* --- NEWSLETTER CARD: gradient accent ------------------------------ */
.newsletter-card {
  position: relative;
  overflow: hidden;
}
.dark .newsletter-card {
  background: linear-gradient(135deg, rgba(22,27,34,0.95) 0%, rgba(15,20,25,0.98) 100%) !important;
  border: 1px solid rgba(0,201,111,0.2) !important;
  box-shadow: 0 0 60px rgba(0,201,111,0.08) !important;
}

/* --- MOBILE NAV DRAWER: proper dark mode --------------------------- */
.dark #ch-mobile-menu {
  background: #0F1419 !important;
  border-left-color: rgba(255,255,255,0.08) !important;
}

/* --- HERO SECTION: ensure proper z-stacking on scroll -------------- */
.hero-section { z-index: 1; }
.ch-section, .newsletter-section { position: relative; z-index: 1; }

/* --- PREVENT CONTENT FLASH: homepage padding for fixed header ------- */
main.ch-homepage { padding-top: 0; margin-top: -24px; }

/* Pull first ch-section up to cover the container padding-top gap on non-homepage pages */
.primary-content > section.ch-section:first-child { margin-top: -24px; }

/* =====================================================================
   FULL-WIDTH SECTIONS FIX - use viewport units, not container-relative
   ===================================================================== */
.ch-homepage .hero-section,
.ch-homepage .ch-section,
.ch-homepage .newsletter-section {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
body.ch-page-home .footer { margin-top: 0 !important; }


/* Reduce body blob opacity - it's causing amber tinge on the header */
body::before { opacity: 0.12 !important; }
body::after  { opacity: 0.08 !important; }

/* =====================================================================
   BUTTON & NAV FINAL POLISH
   ===================================================================== */

/* Glass button: explicit dark frosted style (prevents backdrop amber bleed) */
.dark .glass-button {
  background: rgba(10,15,26,0.55) !important;
  border: 1.5px solid rgba(255,255,255,0.28) !important;
  color: #E0E6F0 !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.dark .glass-button:hover {
  background: rgba(0,201,111,0.18) !important;
  border-color: var(--primary) !important;
  color: #00C96F !important;
  box-shadow: 0 0 20px rgba(0,201,111,0.2), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* Both buttons: consistent size and vertical alignment */
.hero-buttons .primary-button,
.hero-buttons .glass-button {
  min-width: 180px;
  justify-content: center;
}

/* Hero: remove AOS initial hidden state for CLS smoothness */
.hero-content [data-aos] { opacity: 1 !important; transform: none !important; }

/* Prevent horizontal scroll from 100vw sections (scrollbar width on Windows) */
html { overflow-x: clip !important; }  /* clip (not hidden) to prevent horizontal scroll without creating a new scroll container, preserving window scroll events for AOS */
body { overflow-x: clip !important; }  /* iOS Safari needs it on body too — otherwise 100vw sections expand the layout viewport, making fixed header overflow the screen until a reflow */

/* =====================================================================
   FIXES BATCH 2026-04-19
   ===================================================================== */

/* Fix legal entity table - label cells need right padding so values don't
   run directly adjacent to labels */
.ch-entity-table td { padding: 7px 12px 7px 0; }
.ch-entity-table td.label { padding-right: 16px; }

/* Timeline spacer - fills the empty side of each alternating row so the
   dot stays centred and cards balance */
.ch-timeline-spacer { flex: 1; }
@media (max-width: 767px) { .ch-timeline-spacer { display: none; } }

/* About-us sections: use same 100vw full-bleed as homepage */
.ch-about .ch-section,
.ch-about .ch-cta-section {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Legal page top breathing room already comes from #main-body padding-top:96px.
   Ensure the card has a subtle top border accent for visual separation. */
.ch-legal-card {
  border-top: 3px solid rgba(0,201,111,0.35) !important;
}

/* Breadcrumb: completely suppress on all custom pages - spacing is
   already handled by #main-body padding-top */
.master-breadcrumb { display: none !important; }

/* Restore breadcrumb only inside the standard client area (sidebar pages) */
.ch-sidebar-active .master-breadcrumb { display: block !important; }

/* Fix light-mode glass button so it doesn't wash out to near-white */
html:not(.dark) .glass-button {
  background: rgba(0,0,0,0.04) !important;
  border: 1.5px solid rgba(0,0,0,0.18) !important;
  color: var(--text-primary) !important;
}
html:not(.dark) .glass-button:hover {
  background: rgba(0,201,111,0.08) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Newsletter icon - ensure icon inside green box is always legible */
.newsletter-icon i { font-size: 24px; color: var(--primary) !important; }

/* About page: value-badges should never show white-on-white in light mode */
html:not(.dark) .ch-value-badge {
  background: rgba(0,201,111,0.1);
  color: var(--text-primary);
}

/* ================================================================
   DARK MODE: WHMCS CART & GLOBAL ELEMENTS - 2026-04-19
   ================================================================ */

/* --- Cart product/plan cards --- */
html.dark .product.clearfix {
  background: rgba(22,27,34,0.95) !important;
  border: 1px solid rgba(240,246,252,0.08) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
}
html.dark .product.clearfix header {
  background: rgba(15,20,25,0.8) !important;
  border-bottom: 1px solid rgba(240,246,252,0.08) !important;
}
html.dark .product.clearfix header span,
html.dark .product.clearfix header h2,
html.dark .product.clearfix header h3 {
  color: var(--text-primary) !important;
}
html.dark .product.clearfix .product-desc,
html.dark .product.clearfix .product-pricing,
html.dark .product.clearfix footer {
  color: var(--text-secondary) !important;
}

/* --- Dropdown menus --- */
html.dark .dropdown-menu,
html.dark .collapsable-dropdown-menu.dropdown-menu {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
html.dark .dropdown-menu > li > a,
html.dark .dropdown-menu .dropdown-item {
  color: var(--text-primary) !important;
}
html.dark .dropdown-menu > li > a:hover,
html.dark .dropdown-menu .dropdown-item:hover,
html.dark .dropdown-menu > li > a:focus {
  background: var(--bg-tertiary) !important;
  color: var(--primary) !important;
}
html.dark .dropdown-menu .divider,
html.dark .dropdown-menu .dropdown-divider {
  background: var(--border-color) !important;
  border-color: var(--border-color) !important;
}

/* --- Markdown / WYSIWYG editor toolbar (.md-header) --- */
html.dark .md-header.btn-toolbar,
html.dark .editor-toolbar {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}
html.dark .md-header .btn,
html.dark .editor-toolbar a,
html.dark .editor-toolbar i {
  color: var(--text-primary) !important;
  background: transparent !important;
}
html.dark .md-header .btn:hover,
html.dark .editor-toolbar a:hover {
  background: var(--bg-tertiary) !important;
  color: var(--primary) !important;
}

/* --- File upload label --- */
html.dark .custom-file-label {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}
html.dark .custom-file-label::after {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-left-color: var(--border-color) !important;
}

/* --- Lightbox --- */
html.dark .lb-outerContainer {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
}
html.dark .lb-container {
  background: var(--bg-secondary) !important;
}

/* --- WHMCS select options (browser-native, limited styling) --- */
html.dark select option {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* --- WHMCS .field inputs missing form-control class --- */
html.dark input.field,
html.dark select.field,
html.dark textarea.field {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.dark input.field::placeholder,
html.dark textarea.field::placeholder {
  color: var(--text-muted) !important;
}

/* --- Knowledgebase article items --- */
html.dark .list-group-item,
html.dark .kb-article-item {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.dark a.list-group-item,
html.dark a.list-group-item:focus {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-link) !important;
}
html.dark a.list-group-item:hover {
  background: var(--bg-secondary) !important;
  color: var(--primary) !important;
}
html.dark .list-group-item + .list-group-item {
  border-top-color: var(--border-color) !important;
}
html.dark .kb-article-item .article-excerpt,
html.dark .kb-article-item p {
  color: var(--text-secondary) !important;
}

/* --- Badges: keep WHMCS badge colors but ensure contrast --- */
html.dark .badge-default,
html.dark .badge-secondary {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* --- Announcements article excerpt boxes --- */
html.dark .announcement article,
html.dark .announcement-body,
html.dark article.announcement-excerpt {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
}
html.dark .announcement article p,
html.dark .announcement article li {
  color: var(--text-secondary) !important;
}

/* --- Cart view: tab content & order summary --- */
html.dark .tab-content,
html.dark .summary-container,
html.dark .order-summary {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.dark .nav-tabs .nav-link.active,
html.dark .nav-tabs .nav-item.show .nav-link {
  background: var(--bg-card) !important;
  border-color: var(--border-color) var(--border-color) var(--bg-card) !important;
  color: var(--text-primary) !important;
}
html.dark .nav-tabs {
  border-bottom-color: var(--border-color) !important;
}
html.dark .nav-tabs .nav-link {
  color: var(--text-secondary) !important;
}
html.dark .nav-tabs .nav-link:hover {
  border-color: var(--border-color) !important;
  color: var(--primary) !important;
}

/* --- Domain search banner: override yellow gradient in dark mode --- */
html.dark .domain-checker-container,
html.dark .domain-search-banner {
  background: linear-gradient(135deg, rgba(0,201,111,0.15) 0%, rgba(0,168,92,0.08) 100%) !important;
  border: 1px solid rgba(0,201,111,0.2) !important;
}
html.dark .domain-checker-container .domain-checker-bg,
html.dark .domain-search-banner .domain-checker-bg {
  background: transparent !important;
}
html.dark .domain-checker-container .input-group,
html.dark .domain-checker-container .input-group-lg {
  background: var(--bg-secondary) !important;
}
html.dark .domain-checker-container input[type="text"],
html.dark .domain-checker-container .form-control {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.dark .domain-checker-container h2,
html.dark .domain-checker-container h3,
html.dark .domain-checker-container p {
  color: var(--text-primary) !important;
}
html.dark .domain-checker-container .input-group-btn .btn {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* Header overlap already handled by existing #main-body { padding-top: 96px } rule above */

/* =============================================================
   FOOTER - CROCKYHOST watermark + green column headers
   ============================================================= */
.ch-footer-grid {
    position: relative;
}

/* Make sure footer columns sit above watermark */
.ch-footer-grid > [class*="col-"] {
    position: relative;
    z-index: 1;
}

/* CROCKYHOST watermark on full-width footer element */
#footer.footer {
    overflow: hidden;
}
#footer.footer::before {
    content: 'CROCKYHOST';
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(48px, 12vw, 140px);
    font-weight: 900;
    color: rgba(0, 201, 111, 0.04);
    letter-spacing: -0.02em;
    pointer-events: none;
    white-space: nowrap;
    user-select: none;
    z-index: 0;
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
}
html.dark #footer.footer::before {
    color: rgba(0, 255, 136, 0.06);
}

/* =============================================================
   LANGUAGE SELECTOR BUTTON
   ============================================================= */
.ch-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.ch-lang-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(0, 201, 111, 0.08);
}

.ch-lang-btn .iti-flag {
    display: inline-block;
    flex-shrink: 0;
}

.ch-lang-code {
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.ch-currency-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(0,201,111,0.12);
    border: 1px solid rgba(0,201,111,0.25);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--primary);
    vertical-align: middle;
    line-height: 1.4;
}

/* =============================================================
   CART BUTTON - clean badge display
   ============================================================= */
.cart-btn .badge-pill {
    font-size: 0.65rem;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    line-height: 18px;
    border-radius: 9px;
}

/* =============================================================
   FOOTER NAV-LINK OVERRIDE - fix Bootstrap's nav-link padding
   ============================================================= */
#footer .nav-link {
    padding: 2px 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

#footer .nav-link:hover {
    color: var(--primary);
    transform: translateX(3px);
}

html.dark #footer .nav-link {
    color: var(--text-secondary);
}


/* =============================================================
   LANGUAGE / CURRENCY MODAL - dark mode styling
   ============================================================= */
html.dark #modalChooseLanguage .modal-content {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

html.dark #modalChooseLanguage .modal-body {
    background: var(--bg-card) !important;
}

html.dark #modalChooseLanguage .modal-footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

html.dark #modalChooseLanguage h5,
#modalChooseLanguage .h5 {
    color: var(--text-primary) !important;
}

html.dark #modalChooseLanguage .item {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
}

html.dark #modalChooseLanguage .item:hover {
    background: rgba(0,201,111,0.15) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

html.dark #modalChooseLanguage .item.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #0a0f1a !important;
    font-weight: 700 !important;
}

html.dark #modalChooseLanguage .btn-default {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html.dark #modalChooseLanguage .close {
    color: var(--text-secondary) !important;
}


/* =======================================================================
   MOBILE DRAWER - floating rounded panel matching the pill navbar
   ======================================================================= */

/* Panel drops below the fixed navbar, inset from both sides to match the
   navbar's 16px viewport gutter. Uses glass + blur like the header. */
#ch-mobile-menu {
  position: fixed !important;
  top: 88px !important;
  right: 16px !important;
  left: 16px !important;
  bottom: auto !important;
  height: auto !important;
  max-height: calc(100vh - 104px) !important; max-height: calc(100dvh - 104px) !important;
  width: auto !important;
  padding: 18px 18px 22px !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color) !important;
  background: rgba(255,255,255,0.92) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 20px 60px rgba(15,20,25,0.18), 0 2px 8px rgba(15,20,25,0.06) !important;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity .24s ease, transform .24s cubic-bezier(.4,0,.2,1) !important;
  display: flex !important;
  flex-direction: column;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 1010;
}

#ch-mobile-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Dark mode panel: deep glass with subtle green edge */
.dark #ch-mobile-menu {
  background: rgba(15,20,25,0.88) !important;
  border-color: rgba(240,246,252,0.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,201,111,0.06), 0 0 40px rgba(0,201,111,0.04) !important;
}

/* Overlay: soft blur wash under the panel */
#ch-mobile-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1001;
  background: rgba(15,20,25,0) !important;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background .24s ease, backdrop-filter .24s ease !important;
  pointer-events: none;
}
#ch-mobile-overlay.open {
  background: rgba(15,20,25,0.35) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: auto;
  display: block !important;
}
.dark #ch-mobile-overlay.open {
  background: rgba(0,0,0,0.55) !important;
}

/* Internal logo/close row: hide since the navbar stays visible above */
#ch-mobile-menu > div:first-child {
  display: none !important;
}

/* Section labels */
#ch-mobile-menu .ch-mob-section-label,
#ch-mobile-menu [style*="text-transform:uppercase"] {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted) !important;
  padding: 0 6px;
  margin: 4px 0 6px !important;
}

/* Drawer nav links */
#ch-mobile-menu .ch-nav-link {
  padding: 11px 14px !important;
  border-radius: 12px !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  transition: background .15s, color .15s, transform .15s !important;
}
#ch-mobile-menu .ch-nav-link:hover,
#ch-mobile-menu .ch-nav-link:focus {
  background: rgba(0,201,111,0.08) !important;
  color: var(--primary) !important;
}
.dark #ch-mobile-menu .ch-nav-link:hover {
  background: rgba(0,201,111,0.12) !important;
}

/* Products sub-items get a soft inset */
#ch-mobile-menu .ch-mob-sub a,
#ch-mobile-menu nav > div[style*="border-radius"] > div > a {
  padding: 9px 12px !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
}

/* Buttons inside the drawer */
#ch-mobile-menu .btn {
  border-radius: 12px !important;
  padding: 11px 14px !important;
  font-weight: 600 !important;
}

/* Hamburger → X morph */
.ch-hamburger {
  position: relative;
  width: 22px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
}
.ch-hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .28s cubic-bezier(.4,0,.2,1);
}
.ch-hamburger span:nth-child(1) { top: 0; }
.ch-hamburger span:nth-child(2) { top: 7px; }
.ch-hamburger span:nth-child(3) { top: 14px; }
body.mobile-menu-open .ch-hamburger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
body.mobile-menu-open .ch-hamburger span:nth-child(2) { opacity: 0; }
body.mobile-menu-open .ch-hamburger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* =====================================================================
   FOOTER WATERMARK - prevent bad clipping on mobile
   ===================================================================== */
@media (max-width: 767px) {
  #footer.footer::before {
    font-size: clamp(36px, 9vw, 80px) !important;
    bottom: 60px !important;
  }
}

/* Footer full-width: remove container horizontal padding on mobile */
@media (max-width: 575px) {
  #footer.footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #footer .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =====================================================================
   COMPLEXITY LAYER - parallax blobs, animated gradients, micro-interactions
   ===================================================================== */

/* Floating blobs on hero sections (product pages + homepage) */
.ch-ph-hero, .ch-wp-hero, .ch-dom-hero, .hero-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ch-ph-hero::after, .ch-wp-hero::after, .ch-dom-hero::after, .hero-section::after {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 40% at 20% 20%, rgba(0,201,111,0.14), transparent 60%),
    radial-gradient(ellipse 40% 35% at 80% 70%, rgba(99,102,241,0.10), transparent 60%),
    radial-gradient(ellipse 35% 30% at 50% 110%, rgba(147,51,234,0.10), transparent 60%);
  animation: chBlobDrift 28s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform;
}
@keyframes chBlobDrift {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  50%  { transform: translate3d(3%, -2%, 0) rotate(3deg); }
  100% { transform: translate3d(-3%, 2%, 0) rotate(-3deg); }
}

/* Parallax scroll effect on hero backgrounds via --ch-scroll (set by JS) */
.ch-parallax-bg {
  transform: translate3d(0, calc(var(--ch-scroll, 0) * 0.25px), 0);
  will-change: transform;
}

/* Gradient-border hover for feature/plan cards */
.ch-ph-card, .ch-wp-plan-card, .ch-dom-tld-card, .feature-card {
  position: relative;
}
.ch-ph-card:not(.featured)::before, .ch-wp-plan-card:not(.popular)::before, .ch-dom-tld-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, rgba(0,201,111,0) 50%, rgba(0,201,111,0.5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .ch-ph-card:not(.featured):hover::before,
  .ch-wp-plan-card:not(.popular):hover::before,
  .ch-dom-tld-card:hover::before { opacity: 1; }
}
/* Suppress tap artifacts on mobile */
.ch-ph-card, .ch-wp-plan-card, .ch-dom-tld-card {
  -webkit-tap-highlight-color: transparent;
}
/* :focus outline is handled globally via :focus:not(:focus-visible) — keyboard users still get outline */
.ch-ph-card:active,
.ch-wp-plan-card:active,
.ch-dom-tld-card:active { outline: none; }

/* Shimmer sweep on featured card badges */
.ch-ph-card.featured::before,
.ch-wp-plan-card.popular .ch-wp-popular-badge {
  background-image: linear-gradient(110deg, var(--primary) 30%, rgba(255,255,255,0.35) 50%, var(--primary) 70%);
  background-size: 200% 100%;
  animation: chShimmer 3s linear infinite;
}
@keyframes chShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  .ch-ph-hero::after, .ch-wp-hero::after, .ch-dom-hero::after, .hero-section::after { animation: none; }
  .ch-parallax-bg { transform: none !important; }
  .ch-ph-card.featured::before, .ch-wp-plan-card.popular .ch-wp-popular-badge { animation: none; }
}

/* =====================================================================
   PRODUCT PAGE FULL-BLEED (webhosting, wordpress, domains)
   ===================================================================== */
.ch-ph,
.ch-ph-hero, .ch-ph-plans, .ch-ph-features, .ch-ph-cta,
.ch-dom-hero, .ch-dom-tlds, .ch-dom-features, .ch-dom-pricing, .ch-dom-cta,
.ch-wp-hero, .ch-wp-plans, .ch-wp-features, .ch-wp-cta,
.ch-wd-hero, .ch-wd-values, .ch-wd-services, .ch-wd-pricing, .ch-wd-process, .ch-wd-cta {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* =============================================================
   CART BUTTON - ensure icon is visible in both light and dark mode
   ============================================================= */
.cart-btn {
    color: var(--text-primary) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}
.cart-btn i {
    color: var(--text-primary) !important;
    font-size: 18px;
}
.cart-btn:hover {
    color: var(--primary) !important;
}
.cart-btn:hover i {
    color: var(--primary) !important;
}

/* =============================================================
   VISUAL DYNAMICS - glows, pulses, smooth entrances
   ============================================================= */

/* Animated CTA button glow pulse */
@keyframes ch-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,201,111,0); }
    50% { box-shadow: 0 0 20px 6px rgba(0,201,111,0.25); }
}
.ch-wp-btn-primary,
.ch-btn-primary,
.btn-primary,
.ch-ph-hero-cta,
.ch-dom-btn-primary,
.ch-wp-btn-primary,
a[class*="cta-btn"]:not(.btn-default),
a[class*="plan-cta"] {
    animation: ch-glow-pulse 3s ease-in-out infinite;
}

/* Hero badge float animation */
@keyframes ch-badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.ch-wp-badge,
.ch-ph-badge {
    animation: ch-badge-float 3s ease-in-out infinite;
}

/* Card hover glow on feature cards */
.ch-wp-feature:hover,
.ch-dom-feature:hover,
.ch-ph-feature-card:hover,
.ch-ph-hosting-card:hover {
    box-shadow: 0 0 24px rgba(0,201,111,0.12), var(--shadow-md) !important;
    transform: translateY(-4px);
    transition: all 0.25s ease;
}

/* Plan card popular badge glow */
.ch-wp-plan-card.popular,
.ch-ph-hosting-card.popular {
    animation: ch-popular-glow 3s ease-in-out infinite;
}
@keyframes ch-popular-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(147,51,234,0.3), 0 0 20px rgba(147,51,234,0.1); }
    50% { box-shadow: 0 0 0 2px rgba(147,51,234,0.5), 0 0 32px rgba(147,51,234,0.2); }
}

/* Scroll-reveal: fade-up for items with data-aos */
[data-aos="fade-up"] {
    transition-property: opacity, transform !important;
}

/* Smooth link transitions globally */
.ch-nav-link,
.ch-dropdown-item,
a.nav-link {
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

/* Hero section glowing orb background effect */
.ch-wp-hero::before,
.ch-ph-hero::before,
.ch-dom-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(ellipse at center, rgba(0,201,111,0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.ch-wp-hero,
.ch-ph-hero,
.ch-dom-hero {
    position: relative;
}
.ch-wp-hero .container,
.ch-ph-hero .container,
.ch-dom-hero .container {
    position: relative;
    z-index: 1;
}

/* Nav dropdown hover enhancement */
.ch-dropdown-item:hover i {
    transform: scale(1.15);
    transition: transform 0.2s ease;
}

/* =============================================================
   PLAN PRICE - prevent RON prefix from wrapping to new line
   ============================================================= */
.ch-ph-price,
.ch-wp-plan-price {
    white-space: nowrap !important;
    font-size: clamp(1.1rem, 2vw, 1.7rem) !important;
}
.ch-wp-plan-price {
    font-size: clamp(1.2rem, 2.2vw, 2rem) !important;
}

/* =======================================================================
   SERVER STATUS INDICATORS
   ======================================================================= */
.ch-status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00C96F;
  box-shadow: 0 0 0 0 rgba(0,201,111,0.4);
  animation: ch-status-pulse 2s infinite;
  flex-shrink: 0;
}
.ch-status-dot-sm {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00C96F;
  box-shadow: 0 0 0 0 rgba(0,201,111,0.4);
  animation: ch-status-pulse 2s infinite;
  flex-shrink: 0;
  margin-right: 5px;
  vertical-align: middle;
}
@keyframes ch-status-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(0,201,111,0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(0,201,111,0); }
  100% { box-shadow: 0 0 0 0   rgba(0,201,111,0); }
}
.ch-nav-status { display: flex; align-items: center; }

/* =======================================================================
   HOMEPAGE PRODUCTS OVERVIEW
   ======================================================================= */
.ch-products-overview { background: var(--bg-secondary); }
.ch-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.ch-prod-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 32px 24px 28px;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
@media (hover: hover) {
  .ch-prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
}
.ch-prod-card--featured { border-color: var(--primary); }
.ch-prod-featured-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #9333ea; color: #fff;
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  padding: 3px 14px; border-radius: 999px; white-space: nowrap;
}
.ch-prod-icon { font-size: 2rem; color: var(--primary); margin-bottom: 14px; }
.ch-prod-name { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.ch-prod-price { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 16px; }
.ch-prod-feats { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.ch-prod-feats li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; color: var(--text-secondary); padding: 4px 0; }
.ch-prod-feats li i { color: var(--primary); font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.ch-prod-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--primary); color: #0a0f1a;
  font-size: 0.875rem; font-weight: 700; text-decoration: none;
  transition: background 0.2s;
}
.ch-prod-cta:hover { background: var(--primary-hover); color: #0a0f1a; text-decoration: none; }
.ch-prod-cta--wp { background: var(--primary); color: #0a0f1a; }
.ch-prod-cta--wp:hover { background: var(--primary-hover); color: #0a0f1a; }
.ch-prod-cta--dom { background: #0369a1; color: #fff; }
.ch-prod-cta--dom:hover { background: #025882; color: #fff; }

/* =======================================================================
   USER INITIALS AVATAR
   ======================================================================= */
.ch-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: #0a0f1a;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px;
  flex-shrink: 0;
}
.ch-avatar--sm { width: 26px; height: 26px; font-size: 0.65rem; }
.ch-avatar-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.2s, background 0.2s;
}
.ch-avatar-btn:hover { border-color: var(--primary); background: rgba(0,201,111,0.06); text-decoration: none; color: var(--text-primary); }

/* =======================================================================
   ANIMATED NAV HOVER UNDERLINE (desktop only)
   ======================================================================= */
.ch-navbar .ch-nav-link {
  position: relative;
  background: none !important; /* replace bg-fill with underline */
}
.ch-navbar .ch-nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: left 0.22s cubic-bezier(0.4,0,0.2,1), right 0.22s cubic-bezier(0.4,0,0.2,1);
}
.ch-navbar .ch-nav-link:hover::after,
.ch-navbar .ch-nav-link.active::after {
  left: 8px;
  right: 8px;
}
/* Dropdown toggle: underline only when dropdown is open */
.ch-navbar .ch-nav-dropdown-toggle::after {
  bottom: 2px;
}

/* =======================================================================
   USER ACCOUNT DROPDOWN MENU
   ======================================================================= */
.ch-avatar-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid rgba(26,32,44,0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  padding: 6px;
  z-index: 1020;
  animation: chMenuIn 0.18s cubic-bezier(0.4,0,0.2,1);
}
.dark .ch-user-menu {
  background: #161B22 !important;
  border-color: rgba(240,246,252,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3) !important;
}
.ch-user-menu.open { display: block; }
@keyframes chMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ch-user-menu-profile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid rgba(26,32,44,0.1);
  margin-bottom: 4px;
}
.dark .ch-user-menu-profile { border-bottom-color: rgba(240,246,252,0.1) !important; }
.ch-user-menu-divider { border-top: 1px solid rgba(26,32,44,0.1); margin: 4px 0; }
.dark .ch-user-menu-divider { border-top-color: rgba(240,246,252,0.1) !important; }
.ch-user-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500;
  color: #44546A; text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.dark .ch-user-menu-item { color: rgba(240,246,252,0.7) !important; }
.ch-user-menu-item:hover { background: #F3F4F6; color: #1a202c; text-decoration: none; }
.dark .ch-user-menu-item:hover { background: rgba(240,246,252,0.07) !important; color: #ffffff !important; }
.ch-user-menu-item i { width: 18px; text-align: center; font-size: 0.85rem; flex-shrink: 0; color: #6B7280; }
.dark .ch-user-menu-item i { color: rgba(240,246,252,0.45) !important; }
.ch-user-menu-item:hover i { color: var(--primary) !important; }
.ch-user-menu-logout { color: #ef4444 !important; }
.dark .ch-user-menu-logout { color: #f87171 !important; }
.ch-user-menu-logout i { color: #ef4444 !important; }
.dark .ch-user-menu-logout i { color: #f87171 !important; }
.ch-user-menu-logout:hover { background: rgba(239,68,68,0.07) !important; color: #dc2626 !important; }
.dark .ch-user-menu-logout:hover { background: rgba(239,68,68,0.1) !important; color: #f87171 !important; }

/* =======================================================================
   EMAIL VERIFICATION BANNER
   ======================================================================= */
.verification-banner.email-verification {
  background: rgba(234,179,8,0.1) !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(234,179,8,0.3) !important;
  padding: 10px 0 !important;
  font-size: 0.875rem;
}
.verification-banner.email-verification .fas.fa-exclamation-triangle { color: #d97706; margin-right: 6px; }
.verification-banner.email-verification .text { color: var(--text-primary); }
.verification-banner.email-verification .btn-resend-verify-email {
  background: rgba(234,179,8,0.15) !important;
  border-color: rgba(234,179,8,0.4) !important;
  color: #92400e !important;
  font-size: 0.8rem !important;
  border-radius: var(--radius-sm) !important;
}
.dark .verification-banner.email-verification .btn-resend-verify-email { color: #fcd34d !important; }
.dark .verification-banner.email-verification { background: rgba(234,179,8,0.07) !important; }

/* =======================================================================
   DARK MODE — broad WHMCS element overrides
   ======================================================================= */
/* WHMCS stat tiles */
.dark .tile {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.dark .tile .stat, .dark .tile .title { color: var(--text-primary) !important; }

/* Bootstrap list-group */
.dark .list-group-item {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.dark .list-group-item-action:hover {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* Card header/footer */
.dark .card-header, .dark .card-footer {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark .card-title, .dark .card-body { color: var(--text-primary) !important; }

/* Alert/badge */
.dark .alert-info { background: rgba(3,105,161,0.15) !important; border-color: rgba(3,105,161,0.3) !important; color: #7dd3fc !important; }
.dark .alert-success { background: rgba(0,201,111,0.1) !important; border-color: rgba(0,201,111,0.25) !important; color: #6ee7b7 !important; }
.dark .alert-warning { background: rgba(234,179,8,0.1) !important; border-color: rgba(234,179,8,0.25) !important; color: #fcd34d !important; }
.dark .alert-danger { background: rgba(220,38,38,0.1) !important; border-color: rgba(220,38,38,0.25) !important; color: #fca5a5 !important; }

/* Badge */
.dark .badge { background: var(--bg-tertiary) !important; color: var(--text-muted) !important; }

/* Input groups */
.dark .input-group-text {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* Dropdowns */
.dark .dropdown-menu {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
.dark .dropdown-item { color: var(--text-secondary) !important; }
.dark .dropdown-item:hover { background: var(--bg-secondary) !important; color: var(--text-primary) !important; }
.dark .dropdown-divider { border-color: var(--border-color) !important; }

/* Verification banner close btn in dark mode */
.dark .verification-banner .btn.close { color: rgba(200,200,200,0.6) !important; }
.dark .verification-banner .btn.close:hover { color: rgba(200,200,200,0.9) !important; }

/* =======================================================================
   DARK MODE — table & DataTables overrides
   ======================================================================= */
.dark table,
.dark .table,
.dark .dataTable {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.dark .table thead th,
.dark .table thead td,
.dark .dataTable thead th,
.dark .dataTable thead td {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
.dark .table tbody tr,
.dark .dataTable tbody tr {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
.dark .table tbody tr:hover,
.dark .dataTable tbody tr:hover {
  background: var(--bg-secondary) !important;
}
.dark .table tbody td,
.dark .table tbody th,
.dark .dataTable tbody td,
.dark .dataTable tbody th {
  background: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.dark .table-striped tbody tr:nth-of-type(odd),
.dark .dataTable tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,0.025) !important;
}
/* DataTables wrapper & controls */
.dark .dataTables_wrapper,
.dark .dataTables_length,
.dark .dataTables_filter,
.dark .dataTables_info,
.dark .dataTables_paginate {
  color: var(--text-secondary) !important;
  background: transparent !important;
}
.dark .dataTables_wrapper input,
.dark .dataTables_wrapper select {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.dark .dataTables_paginate .paginate_button {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
.dark .dataTables_paginate .paginate_button.current,
.dark .dataTables_paginate .paginate_button:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
/* Bootstrap btn-default in dark */
.dark .btn-default {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark .btn-default:hover {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

/* =======================================================================
   DARK MODE — sidebar accordion (card-sidebar, .card, .card-header)
   ======================================================================= */
.dark .card-sidebar,
.dark .sidebar .card,
.dark .sidebar .accordion > .card {
  background: #1C2230 !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45) !important;
}
.dark .card-sidebar .card-header,
.dark .sidebar .card .card-header,
.dark .sidebar .accordion > .card > .card-header {
  background: #1C2230 !important;
  border: none !important;
  color: var(--text-primary) !important;
}
.dark .card-sidebar .card-footer,
.dark .sidebar .card .card-footer {
  background: #1C2230 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.dark .card-sidebar .card-body,
.dark .sidebar .card .card-body {
  background: #1C2230 !important;
  border: none !important;
  color: var(--text-secondary) !important;
}
.dark .card-sidebar .card-title,
.dark .sidebar .card .card-title {
  color: var(--text-primary) !important;
}
.dark .card-sidebar .collapsable-card-body,
.dark .sidebar .card .collapsable-card-body {
  border-top: none !important;
}
/* List-group items inside sidebar cards */
.dark .card-sidebar .list-group-item,
.dark .sidebar .list-group-item {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.dark .card-sidebar .list-group-item:hover,
.dark .sidebar .list-group-item:hover {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}
/* Links inside sidebar cards (not buttons) */
.dark .card-sidebar a:not(.btn),
.dark .sidebar .card a:not(.btn) {
  color: var(--text-secondary) !important;
}
.dark .card-sidebar a:not(.btn):hover,
.dark .sidebar .card a:not(.btn):hover {
  color: var(--primary) !important;
}
/* Minimise chevron icon */
.dark .card-sidebar .card-minimise,
.dark .sidebar .card .card-minimise {
  color: var(--text-muted) !important;
}
/* Form elements inside sidebar */
.dark .card-sidebar input,
.dark .sidebar .card input,
.dark .card-sidebar select,
.dark .sidebar .card select {
  background: var(--bg-tertiary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark .card-sidebar label,
.dark .sidebar .card label,
.dark .card-sidebar small,
.dark .sidebar .card small {
  color: var(--text-muted) !important;
}

/* =======================================================================
   CART — domain-selection step (all themes)
   ======================================================================= */

/* Option cards */
.domain-selection-options .option {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 8px !important;
  border: 1.5px solid var(--border-color) !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.domain-selection-options .option:last-child { margin-bottom: 0 !important; }
.domain-selection-options .option label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}

/* iCheck — replace blue sprite with pure CSS radios */
.icheckbox_square-blue,
.iradio_square-blue {
  background: var(--bg-tertiary) !important;
  background-image: none !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: border-color 0.15s, background 0.15s !important;
  cursor: pointer !important;
}
.icheckbox_square-blue.hover,
.iradio_square-blue.hover {
  border-color: var(--primary) !important;
}
.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
/* INS = transparent click-capture overlay only — visuals via ::after */
.icheckbox_square-blue ins,
.iradio_square-blue ins,
.iCheck-helper {
  position: absolute !important;
  display: block !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 0 !important;
  width: 200% !important;
  height: 200% !important;
  top: -50% !important;
  left: -50% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}
/* Radio checked — white dot in centre */
.iradio_square-blue.checked::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 6px !important;
  height: 6px !important;
  background: #fff !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
/* Checkbox checked — white checkmark */
.icheckbox_square-blue.checked::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 2px !important;
  left: 5px !important;
  width: 6px !important;
  height: 10px !important;
  border: 2px solid #fff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Make entire option label row clickable */
.domain-selection-options .option label {
  width: 100% !important;
  cursor: pointer !important;
}

/* Highlight selected option card */
.domain-selection-options .option:has(.iradio_square-blue.checked),
.domain-selection-options .option:has(.icheckbox_square-blue.checked) {
  border-color: var(--primary) !important;
  background: rgba(0,201,111,0.05) !important;
}

/* Domain input group — .domains-row contains col-9 (input) + col-3 (select), treat as one pill */
.domain-input-group .domains-row {
  display: flex !important;
  margin: 0 !important;
  border: 1.5px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: border-color 0.15s !important;
}
.domain-input-group .domains-row:focus-within {
  border-color: var(--primary) !important;
}
.domain-input-group .domains-row > [class*="col"] {
  padding: 0 !important;
  flex: 1 1 auto !important;
}
.domain-input-group .domains-row > .col-xs-3,
.domain-input-group .domains-row > .col-3 {
  flex: 0 0 auto !important;
  width: auto !important;
}
/* Strip all individual borders/radius from inner elements */
.domain-input-group .input-group {
  flex-wrap: nowrap !important;
  border: none !important;
  height: 100% !important;
}
.domain-input-group .input-group-text,
.domain-input-group input[type="text"],
.domain-input-group input[type="search"],
.domain-input-group select {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  height: 42px !important;
}
/* Divider after www. label */
.domain-input-group .input-group-text {
  border-right: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
/* Divider before .com select */
.domain-input-group select {
  border-left: 1px solid var(--border-color) !important;
  cursor: pointer !important;
  width: 100% !important;
}

/* Dark mode specifics */
.dark .domain-selection-options .option { background: var(--bg-card) !important; }
.dark .domain-selection-options .option label { color: var(--text-primary) !important; }
.dark .domain-selection-options .option p,
.dark .domain-selection-options .option span { color: var(--text-secondary) !important; }

/* =======================================================================
   CART — domain lookup results
   ======================================================================= */

/* Available domain headline */
.domain-lookup-primary-results .domain-name,
.domain-lookup-primary-results .domain-available {
  color: var(--primary) !important;
}
.domain-lookup-primary-results p {
  color: var(--text-secondary) !important;
}

/* Spotlight TLDs — grid lives on the inner container, not the outer wrapper */
.spotlight-tlds {
  background: transparent !important;
  display: block !important;
  padding: 0 !important;
  margin-top: 16px !important;
}
.spotlight-tlds-container {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}
.spotlight-tld-container {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}

/* Individual TLD card */
.spotlight-tld {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 16px 14px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--text-primary) !important;
  float: none !important;
  width: auto !important;
  height: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, transform 0.15s !important;
}
.spotlight-tld:hover {
  border-color: var(--primary) !important;
  transform: translateY(-2px) !important;
}

/* TLD name (first text node / first span) */
.spotlight-tld .domain-lookup-result > span.tld,
.spotlight-tld .domain-lookup-result > .tld-name {
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  color: var(--text-primary) !important;
}

/* Price */
.spotlight-tld .available.price,
.spotlight-tld .price {
  color: var(--text-secondary) !important;
  font-size: 0.88rem !important;
}

/* Add to cart button → green */
.spotlight-tld .btn-add-to-cart,
.spotlight-tld .btn.product-domain {
  background: var(--primary) !important;
  color: #0a0f1a !important;
  border: none !important;
  border-radius: 8px !important;
  width: 100% !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 7px 12px !important;
  transition: background 0.15s !important;
}
.spotlight-tld .btn-add-to-cart:hover,
.spotlight-tld .btn.product-domain:hover {
  background: var(--primary-hover) !important;
  color: #fff !important;
}

/* Unavailable / invalid state buttons */
.spotlight-tld .btn.unavailable,
.spotlight-tld .btn.invalid,
.spotlight-tld .btn.error {
  background: var(--bg-tertiary) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  width: 100% !important;
  font-size: 0.85rem !important;
  cursor: default !important;
}

/* ── Domain page: featured TLD cards (.com/.net on browse page) ── */
.dark .featured-tld {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
}
.dark .featured-tld .tld-price {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-top: 1px solid var(--border-color) !important;
}

/* ── Domain page: promo boxes (hosting upsell / transfer) ── */
.dark .domain-promo-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  color: var(--text-secondary) !important;
}
.dark .domain-promo-box h3,
.dark .domain-promo-box p {
  color: var(--text-secondary) !important;
}

/* ── Domain pricing table header ── */
.dark .domain-pricing .bg-white,
.dark .bg-white {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* ── Domain suggestions loader ── */
.dark .domain-lookup-loader,
.dark .domain-lookup-suggestions-loader {
  background: var(--bg-secondary) !important;
}

/* ── Domain pricing table header columns ── */
.dark .tld-pricing-header .tld-column,
.dark .tld-pricing-header [class*="col"] {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}

/* ── Domain checker search bar: give input and button breathing room ── */
.input-group.input-group-box {
  gap: 10px !important;
  display: flex !important;
  align-items: center !important;
}
.input-group.input-group-box .form-control {
  border-radius: 8px !important;
  flex: 1 !important;
}
.input-group.input-group-box .input-group-btn,
.input-group.input-group-box .input-group-append {
  width: auto !important;
}
.input-group.input-group-box .input-group-btn .btn,
.input-group.input-group-box .input-group-append .btn {
  border-radius: 8px !important;
  white-space: nowrap !important;
}

/* ── Config page: product-info white panel ── */
.dark .product-info {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
}

/* ── Alert-warning link visibility in dark mode ── */
.dark .alert-warning .alert-link,
.dark .alert-warning a {
  color: #f0c040 !important;
  font-weight: 600 !important;
}
.dark .alert-warning .alert-link:hover,
.dark .alert-warning a:hover {
  color: #ffe082 !important;
}

/* ── Order summary card ── */
.order-summary {
  background: var(--bg-card) !important;
  border: 1px solid var(--primary) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 4px 20px rgba(0, 201, 111, 0.08) !important;
}
.order-summary .font-size-30 {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
}
.order-summary .summary-container {
  color: var(--text-secondary) !important;
}

/* ── Domain addon (WHOIS protection) card ── */
.dark .panel-addon {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.dark .panel-addon .panel-body {
  padding: 14px 16px !important;
  color: var(--text-secondary) !important;
}
.dark .panel-addon .panel-body label {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}
.dark .panel-addon .panel-body small,
.dark .panel-addon .panel-body .text-muted {
  color: var(--text-muted) !important;
}
.dark .panel-addon .panel-price {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-top: 1px solid var(--border-color) !important;
  padding: 6px 16px !important;
  font-size: 0.88rem !important;
}
.dark .panel-addon .panel-add {
  background: var(--primary) !important;
  color: #0a0f1a !important;
  font-weight: 700 !important;
  border: none !important;
  transition: background 0.15s !important;
}
.dark .panel-addon .panel-add:hover {
  background: var(--primary-hover) !important;
}

/* iCheck inside addon — custom checkbox visual */
.dark .panel-addon .icheckbox_square-blue {
  background: var(--bg-tertiary) !important;
  background-image: none !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 4px !important;
  position: relative !important;
}
.dark .panel-addon .icheckbox_square-blue.checked {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.dark .panel-addon .icheckbox_square-blue.checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 6px !important;
  height: 10px !important;
  border: 2px solid #0a0f1a !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}
.dark .panel-addon .icheckbox_square-blue ins {
  opacity: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.dark .panel-addon input[type="checkbox"] {
  opacity: 0 !important;
}
.dark .panel-addon .panel-body > label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  width: 100% !important;
}

/* === v45: Cart page — replace #058 blue with brand green in all themes === */
/* Header bar: both light and dark use green so they look consistent */
.view-cart-items-header {
  background: #00C96F !important;
  border-bottom: none !important;
  color: #fff !important;
}
.view-cart-items-header [class*="col"],
.view-cart-items-header div {
  color: #fff !important;
}
.dark .view-cart-items .item {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark .view-cart-items .item:last-child {
  border-bottom: none !important;
}
.dark .empty-cart .btn-link {
  background: transparent !important;
  color: #e05c5c !important;
  border: 1px solid #e05c5c !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
}
.dark .empty-cart .btn-link:hover {
  background: rgba(224, 92, 92, 0.12) !important;
}

/* === v46: Cart page — fix border on item list + empty-cart button position (all themes) === */
.view-cart-items {
  border-bottom: 1px solid var(--border-color) !important;
}
.empty-cart {
  margin: 12px 0 0 0 !important;
  padding: 0 0 4px 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
}
.dark .empty-cart .btn-link {
  background: transparent !important;
  color: #e05c5c !important;
  border: 1px solid #e05c5c !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
}
.dark .empty-cart .btn-link:hover {
  background: rgba(224, 92, 92, 0.12) !important;
  text-decoration: none !important;
}

/* === v47: Cart item domain links — remove blue === */
.dark .view-cart-items .item a,
.dark .view-cart-items .item .btn-link {
  color: var(--text-secondary) !important;
  text-decoration: none !important;
}
.dark .view-cart-items .item a:hover,
.dark .view-cart-items .item .btn-link:hover {
  color: var(--primary) !important;
}

/* === v48: Cart item-domain teal color === */
.dark .item-domain {
  color: var(--text-muted) !important;
}

/* === v49: Checkout page (cart.php?a=checkout) dark mode === */
/* Account selection rows */
.dark .account {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark .account.active {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--primary) !important;
  border-radius: 8px !important;
}
.dark .account.border-bottom {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
/* account container border */
.dark .account-select-container {
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
/* Credit card input container */
.dark .cc-input-container {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
}
/* EUR / label-info badge */
.dark .label-info {
  background: var(--primary) !important;
  color: #0a0f1a !important;
}
/* Payment method radio labels */
.dark .payment-method-label,
.dark [class*="payment"] label {
  color: var(--text-primary) !important;
}

/* === v50: iCheck parent needs overflow:visible so large ins extends beyond bounds === */
.icheckbox_square-blue,
.iradio_square-blue {
  overflow: visible !important;
}

/* === v52: Light mode — fix repeating gradient & blue section headings === */
body,
body.primary-bg-color {
  background-attachment: fixed !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}
span.primary-bg-color,
.primary-bg-color:not(body):not(html) {
  color: var(--text-secondary) !important;
  background: transparent !important;
}

/* === v56: PayPal ppcpv gateway dark mode — override white bg from payment.min.css === */
.dark #frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields {
  background-color: var(--bg-secondary) !important;
}
.dark #frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields ul,
.dark #frmPayment.paypal_ppcpv-payment-form .paymethod-info:not([data-paymethod-id]) {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.dark .paypal_ppcpv-payment-form .selected {
  background-color: var(--bg-card) !important;
}
.dark .paypal_ppcpv-payment-form .payer-label,
.dark .paypal_ppcpv-payment-form .payer-email {
  color: var(--text-primary) !important;
}

/* === v57: PayPal button iframe — dim in dark mode (cross-origin, can't change interior) === */
.dark #zoid-paypal-buttons-uid_7af6645b4c_mti6mde6mzy,
.dark [id^="zoid-paypal-buttons"] iframe,
.dark #paypal_ppcpv_input_container_button iframe {
  filter: brightness(0.88) !important;
}

/* === v58: Cart sidebar active state + badge-info green override === */
.cart-sidebar .list-group-item:hover,
.cart-sidebar .list-group-item.active {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.dark .cart-sidebar .list-group-item:hover,
.dark .cart-sidebar .list-group-item.active {
  background: rgba(0, 201, 111, 0.12) !important;
  color: var(--primary) !important;
}
/* Bootstrap badge-info → primary green everywhere */
.badge-info {
  background-color: var(--primary) !important;
  color: #0a0f1a !important;
}
.dark .badge-info {
  color: #0a0f1a !important;
}

/* === v59: label-info → primary green (Bootstrap 3 .label variant) === */
.label-info {
  background-color: var(--primary) !important;
  color: #0a0f1a !important;
}

/* ============================================================
   FIXES: Sign Up tab, phone dropdown, reCAPTCHA, blue text
   ============================================================ */

/* Sign Up divider tab — parent theme forces #058 blue + #fff bg */
#registration .sub-heading span {
  color: var(--text-primary) !important;
  background-color: var(--bg-primary) !important;
}
.dark #registration .sub-heading span {
  background-color: #0F1419 !important;
}
#registration .sub-heading {
  border-color: var(--border-color) !important;
}

/* Phone prefix — country list dropdown dark mode */
.dark .country-list {
  background-color: #161B22 !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
.dark .country-list .country:hover,
.dark .country-list .country.highlight {
  background-color: #1F2937 !important;
}
.dark .country-list .country-name,
.dark .country-list .dial-code {
  color: var(--text-primary) !important;
}
.dark .country-list .divider {
  border-top-color: var(--border-color) !important;
}
/* Country list z-index — stay above billing address card */
.country-list {
  z-index: 100 !important;
}

/* reCAPTCHA badge — above footer (footer has z-index: 1) */
.grecaptcha-badge {
  z-index: 10 !important;
}

/* No blue font — ever */
.alert-info {
  color: var(--text-primary) !important;
}
.ch-callout-info strong {
  color: var(--text-primary) !important;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.ch-login-outer {
  display: flex;
  justify-content: center;
  padding: 20px 16px 40px;
}

.ch-login-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.ch-login-header {
  text-align: center;
  padding: 36px 40px 28px;
  border-bottom: 1px solid var(--border-color);
}

.ch-login-avatar {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 16px rgba(0,201,111,0.35);
}

.ch-login-avatar i {
  color: #fff;
  font-size: 22px;
}

.ch-login-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
  font-family: var(--font-display);
}

.ch-login-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.ch-login-form {
  padding: 28px 36px;
}

.ch-field-group {
  margin-bottom: 20px;
}

.ch-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.ch-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ch-label-row .ch-label {
  margin-bottom: 0;
}

.ch-forgot-link {
  font-size: 0.82rem;
  color: var(--primary) !important;
  text-decoration: none;
}

.ch-forgot-link:hover {
  color: var(--primary-hover) !important;
  text-decoration: underline;
}

.ch-field-wrap {
  position: relative;
}

.ch-field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 2;
}

.ch-field {
  width: 100%;
  padding: 11px 14px 11px 40px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-body);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.ch-field::placeholder {
  color: var(--text-muted);
}

.ch-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,201,111,0.15);
  background: var(--bg-tertiary);
}

/* password field needs right padding for reveal button */
.ch-pw-field {
  padding-right: 44px;
}

.ch-pw-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 42px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  transition: color 0.15s;
  z-index: 2;
}

.ch-pw-toggle:hover {
  color: var(--text-primary);
}

.ch-login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.ch-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}

.ch-remember span { line-height: 1; }

.ch-login-btn {
  padding: 10px 28px;
  font-weight: 600;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.ch-login-footer {
  text-align: center;
  padding: 16px 36px 24px;
  border-top: 1px solid var(--border-color);
  font-size: 0.88rem;
  color: var(--text-muted);
}

.ch-login-footer a {
  color: var(--primary) !important;
  font-weight: 600;
  margin-left: 4px;
  text-decoration: none;
}

.ch-login-footer a:hover {
  color: var(--primary-hover) !important;
  text-decoration: underline;
}

/* social login buttons sit below the card */
.ch-login-outer ~ #containerLinkedAccounts,
.ch-login-outer ~ div[id*="LinkedAccounts"],
.providerLinkingFeedback ~ .ch-login-outer + * {
  max-width: 440px;
  margin: 0 auto;
}

/* =============================================================
   LANGUAGE / CURRENCY MODAL - light mode fix
   The parent theme assumes a dark #3e3e3e modal background and
   uses color:#eee / color:#fff for items. Our general
   .modal-content override sets bg to near-white, making text
   invisible. These rules restore visibility in light mode.
   ============================================================= */
#modalChooseLanguage .modal-body {
    background: var(--bg-card) !important;
    background-image: none !important;
}
#modalChooseLanguage h5,
#modalChooseLanguage .h5 {
    color: var(--text-primary) !important;
}
#modalChooseLanguage .item-selector .item {
    color: var(--text-secondary) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    border-radius: 6px !important;
}
#modalChooseLanguage .item-selector .item:hover {
    background: rgba(0,201,111,0.1) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
#modalChooseLanguage .item-selector .item.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
#modalChooseLanguage .close {
    color: var(--text-secondary) !important;
    opacity: 0.8;
}
#modalChooseLanguage .modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

/* =============================================================
   INVOICE PANEL - body html (unpaid invoice summary)
   ============================================================= */
.ch-panel-body-html {
    padding: 14px 16px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.ch-panel-pay-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 14px;
    background: rgba(217,119,6,0.1);
    border: 1px solid rgba(217,119,6,0.3);
    border-radius: var(--radius-sm);
    color: #d97706 !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.ch-panel-pay-btn:hover {
    background: rgba(217,119,6,0.2);
    border-color: #d97706;
    text-decoration: none;
}

/* =====================================================================
   LAYOUT IMPROVEMENTS
   ===================================================================== */

/* Tight section spacing modifier (60px vs default 80px) */
.ch-section.ch-section--tight { padding: 60px 0; }
@media (max-width: 768px) { .ch-section.ch-section--tight { padding: 40px 0; } }

/* Left-aligned section header variant */
.section-header.section-header--left {
  text-align: left;
  margin-left: 0;
  padding-left: 0;
  max-width: none;
}
.section-header.section-header--left .section-title,
.section-header.section-header--left .section-subtitle { text-align: left; }



/* Web development services — 4-col on desktop, 2-col on tablet */
@media (min-width: 960px) {
  .ch-wd-services-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 540px) and (max-width: 959px) {
  .ch-wd-services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Status pill (homepage hero) ---- */
.hero-status { margin-top: 20px; display: flex; justify-content: center; }
.ch-status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,201,111,0.10); border: 1px solid rgba(0,201,111,0.28);
  color: var(--primary); font-size: 0.82rem; font-weight: 600;
  padding: 6px 16px; border-radius: 999px; text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.ch-status-pill:hover { background: rgba(0,201,111,0.18); border-color: rgba(0,201,111,0.5); text-decoration: none; color: var(--primary); }
.ch-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(0,201,111,0.5);
  animation: ch-status-pulse 2s ease-out infinite;
}
@keyframes ch-status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,201,111,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(0,201,111,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,201,111,0); }
}

/* ================================================================
   HOMEPAGE NEW SECTIONS
   ================================================================ */

/* ---- Products: Web Dev card accent ---- */
.ch-prod-cta--wd { background: #7c3aed; color: #fff; }
.ch-prod-cta--wd:hover { background: #6d28d9; color: #fff; text-decoration: none; }

/* ---- Domain Search ---- */
.ch-domain-search {
  background: var(--bg-secondary);
  padding: 64px 0;
}
.ch-ds-inner {
  max-width: 680px; margin: 0 auto; text-align: center;
}
.ch-ds-title {
  font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800;
  color: var(--text-primary); margin-bottom: 10px;
}
.ch-ds-subtitle {
  color: var(--text-secondary); font-size: 1rem; margin-bottom: 32px;
}
.ch-ds-form { width: 100%; }
.ch-ds-input-group {
  display: flex; gap: 0; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-color);
  overflow: hidden; background: var(--bg-card);
  transition: border-color 0.2s;
}
.ch-ds-input-group:focus-within { border-color: var(--primary); }
.ch-ds-input {
  flex: 1; padding: 14px 18px; border: none; background: transparent;
  color: var(--text-primary); font-size: 1rem; outline: none;
  font-family: var(--font-body);
}
.ch-ds-input::placeholder { color: var(--text-muted); }
.ch-ds-btn {
  padding: 14px 24px; background: var(--primary); color: #0a0f1a;
  border: none; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  font-family: var(--font-body); white-space: nowrap;
  transition: background 0.2s;
}
.ch-ds-btn:hover { background: var(--primary-hover); }
.ch-ds-popular {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 16px; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--text-muted);
}
.ch-ds-popular a {
  color: var(--primary); font-weight: 600; text-decoration: none;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(0,201,111,0.08); border: 1px solid rgba(0,201,111,0.2);
  transition: background 0.15s;
}
.ch-ds-popular a:hover { background: rgba(0,201,111,0.18); }

/* ---- Website Audit Section ---- */
.ch-audit-section {
  background: var(--bg-primary);
  padding: 72px 0;
}
.ch-audit-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start;
}
@media (max-width: 860px) {
  .ch-audit-layout { grid-template-columns: 1fr; gap: 40px; }
}
.ch-audit-intro { position: sticky; top: 100px; }
.ch-audit-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,201,111,0.10); border: 1px solid rgba(0,201,111,0.28);
  color: var(--primary); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 5px 16px; border-radius: 999px; margin-bottom: 20px;
}
.ch-audit-title {
  font-size: clamp(1.7rem,3.5vw,2.4rem); font-weight: 800;
  color: var(--text-primary); margin-bottom: 14px; line-height: 1.15;
}
.ch-audit-subtitle {
  color: var(--text-secondary); font-size: 1rem; line-height: 1.6; margin-bottom: 32px;
}
.ch-audit-list { display: flex; flex-direction: column; }
.ch-audit-item {
  display: flex; gap: 20px; align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-color);
}
.ch-audit-item:first-child { border-top: 1px solid var(--border-color); }
.ch-audit-n {
  font-size: 0.68rem; font-weight: 800; color: var(--primary);
  letter-spacing: 2px; flex-shrink: 0; min-width: 24px;
  font-family: var(--font-display);
}
.ch-audit-item strong {
  display: block; font-size: 0.92rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 2px;
}
.ch-audit-item span {
  display: block; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55;
}

/* ---- Web Development Promo ---- */
.ch-webdev-promo {
  background: var(--bg-secondary);
  padding: 72px 0;
}
.ch-wdp-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
@media (max-width: 768px) {
  .ch-wdp-inner { grid-template-columns: 1fr; gap: 40px; }
  .ch-wdp-visual { display: none; }
}
.ch-wdp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(124,58,237,0.10); border: 1px solid rgba(124,58,237,0.25);
  color: #7c3aed; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 5px 16px; border-radius: 999px; margin-bottom: 16px;
}
.dark .ch-wdp-badge { color: #a78bfa; background: rgba(124,58,237,0.15); border-color: rgba(124,58,237,0.3); }
.ch-wdp-title {
  font-size: clamp(1.7rem,3.5vw,2.375rem); font-weight: 800;
  color: var(--text-primary); margin-bottom: 14px; line-height: 1.1;
}
.ch-wdp-subtitle {
  color: var(--text-secondary); font-size: 1rem; line-height: 1.65; margin-bottom: 28px;
}
.ch-wdp-feats {
  list-style: none; padding: 0; margin: 0 0 32px;
}
.ch-wdp-feats li {
  display: flex; align-items: flex-start; gap: 10px;
  color: var(--text-secondary); font-size: 0.92rem;
  padding: 6px 0;
}
.ch-wdp-feats li i { color: var(--primary); font-size: 16px; flex-shrink: 0; margin-top: 2px; }

/* Terminal mockup */
.ch-wdp-terminal {
  background: #0d1117; border: 1px solid #30363d;
  border-radius: 10px; overflow: hidden; font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.82rem; box-shadow: 0 20px 48px rgba(0,0,0,0.4);
}
.ch-wdp-term-bar {
  display: flex; align-items: center; gap: 6px;
  background: #161b22; padding: 10px 14px;
  border-bottom: 1px solid #30363d;
}
.ch-wdp-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
}
.ch-wdp-dot--r { background: #ff5f57; }
.ch-wdp-dot--y { background: #febc2e; }
.ch-wdp-dot--g { background: #28c840; }
.ch-wdp-term-title {
  font-size: 0.72rem; color: #8b949e; margin-left: 8px; letter-spacing: 0.3px;
}
.ch-wdp-term-body { padding: 18px 20px; line-height: 1.9; }
.ch-wdp-line { white-space: pre; }
.ch-wdp-line--in { padding-left: 1.5em; }
.ch-wdp-line--comment { color: #8b949e; font-style: italic; margin-top: 4px; }
.ch-wdp-line--active { background: rgba(0,201,111,0.07); border-radius: 3px; }
.ch-wdp-k { color: #ff7b72; }
.ch-wdp-v { color: #79c0ff; }
.ch-wdp-op { color: #8b949e; }
.ch-wdp-p { color: #8b949e; }
.ch-wdp-s { color: #a5d6ff; }
.ch-wdp-b { color: #ff7b72; }
.ch-wdp-g { color: #3fb950; }
.ch-wdp-cursor {
  display: inline-block; color: #3fb950;
  animation: ch-blink 1s step-end infinite;
}
@keyframes ch-blink { 50% { opacity: 0; } }


/* ================================================================
   HARDENING — edge cases, i18n, reduced-motion, overflow
   ================================================================ */

/* prefers-reduced-motion: cover all homepage animations */
@media (prefers-reduced-motion: reduce) {
  .ch-status-dot,
  .ch-status-dot-sm { animation: none !important; opacity: 1 !important; }
  .ch-wdp-cursor { animation: none !important; opacity: 1 !important; }
  .newsletter-glow { animation: none !important; }
  .hero-badge { animation: none !important; }
  .ch-ph-card.featured::before { animation: none !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Sticky audit intro must be static on single-column mobile */
@media (max-width: 860px) {
  .ch-audit-intro { position: static !important; top: auto !important; }
}

/* Terminal body: allow horizontal scroll instead of overflow */
.ch-wdp-term-body { overflow-x: auto; }

/* Badge text: wrap gracefully for long translations */
.badge-text { word-break: break-word; overflow-wrap: anywhere; }
.ch-audit-badge { flex-wrap: wrap; }
.ch-wdp-badge { flex-wrap: wrap; }
.ch-audit-badge i,
.ch-wdp-badge i { flex-shrink: 0; }

/* Flex list item overflow: min-width: 0 allows text to shrink */
.ch-prod-feats li,
.ch-wdp-feats li { min-width: 0; }
.ch-audit-item > div { min-width: 0; }

/* Product CTA: allow text to wrap inside button on narrow cards */
.ch-prod-cta { white-space: normal; flex-wrap: wrap; }

/* Domain search: visual feedback on input length near limit */
.ch-ds-input { min-width: 0; }

/* ================================================================
   ANIMATE — purposeful motion for CrockyHost
   Principles: warm, reliable, alive. GPU-only (transform + opacity).
   Easing: ease-out-quart for exits/reveals, ease-out-expo for pops.
   ================================================================ */

/* Easing tokens */
:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Hero: signature breathing glow blob ---- */
@keyframes hero-breathe {
  0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.50; }
  50%       { transform: translateX(-50%) scale(1.18); opacity: 0.68; }
}
.hero-section::after {
  animation: hero-breathe 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-section::after { animation: none !important; }
}

/* ---- Button active / click press feedback ---- */
.primary-button:active {
  transform: translateY(0) scale(0.96) !important;
  box-shadow: var(--shadow-glow) !important;
  transition-duration: 80ms !important;
}
.glass-button:active {
  transform: translateY(0) scale(0.96) !important;
  transition-duration: 80ms !important;
}
.ch-prod-cta:active,
.ch-ds-btn:active,
.ch-ph-btn:active,
.ch-audit-intro .btn:active,
.btn-primary:active {
  transform: scale(0.96) !important;
  transition-duration: 80ms !important;
}
/* Lift override: buttons lift on hover but snap back fast on release */
.primary-button,
.glass-button,
.ch-prod-cta,
.ch-ds-btn,
.ch-ph-btn {
  will-change: transform;
}

/* ---- Product card: arrow nudge on card hover ---- */
.ch-prod-cta i,
.ch-prod-feats li i {
  transition: transform 0.2s var(--ease-out-quart);
}
.ch-prod-card:hover .ch-prod-cta i {
  transform: translateX(4px);
}
/* Don't animate check icons, only arrow icons */
.ch-prod-feats li i { transform: none !important; transition: none; }

/* ---- Audit list items: hover row tint ---- */
.ch-audit-item {
  border-radius: 6px;
  transition: background 0.18s ease;
}
@media (hover: hover) {
  .ch-audit-item:hover {
    background: rgba(0, 201, 111, 0.05);
  }
  .dark .ch-audit-item:hover {
    background: rgba(0, 201, 111, 0.07);
  }
}

/* ---- Domain search: focus glow expansion ---- */
.ch-ds-input-group {
  transition: border-color 0.2s ease, box-shadow 0.25s var(--ease-out-quart);
}
.ch-ds-input-group:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 201, 111, 0.14);
}

/* ---- Domain search: loading state ---- */
.ch-ds-btn.ch-loading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}
.ch-ds-btn.ch-loading::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(10,15,26,0.3);
  border-top-color: #0a0f1a;
  border-radius: 50%;
  animation: ch-spin 0.6s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes ch-spin { to { transform: rotate(360deg); } }

/* ---- Scroll progress bar ---- */
#ch-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  width: 0%;
  background: var(--primary);
  z-index: 10000;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  transition: width 0.05s linear;
  box-shadow: 0 0 6px rgba(0,201,111,0.5);
}
@media (prefers-reduced-motion: reduce) {
  #ch-scroll-progress { transition: none; }
}

/* ---- Nav active dot indicator ---- */
.ch-nav-link {
  position: relative;
}
.ch-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 1;
}

/* ---- Feature card icon bounce on hover ---- */
.feature-icon {
  transition: transform 0.25s var(--ease-out-expo);
}
@media (hover: hover) {
  .feature-card:hover .feature-icon {
    transform: scale(1.15) rotate(-5deg);
  }
}

/* ---- CTA button ripple layer ---- */
.primary-button, .ch-ds-btn, .ch-prod-cta {
  overflow: hidden;
  position: relative;
}

/* ================================================================
   DELIGHT — moments of warmth, personality, and hidden reward
   Strategy: subtle sophistication. Notices appreciated, not demanded.
   ================================================================ */

/* ---- Logo: friendly hop on hover ---- */
@keyframes ch-logo-hop {
  0%   { transform: translateY(0) rotate(0deg); }
  35%  { transform: translateY(-7px) rotate(-2deg); }
  65%  { transform: translateY(-3px) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.navbar-brand .logo-img {
  transition: filter 0.2s ease;
}
@media (hover: hover) {
  .navbar-brand:hover .logo-img {
    animation: ch-logo-hop 0.45s var(--ease-out-expo) both;
  }
}

/* ---- Dark mode toggle: icon spins in on change ---- */
@keyframes ch-toggle-spin {
  from { transform: rotate(-120deg) scale(0.4); opacity: 0; }
  to   { transform: rotate(0deg)   scale(1);   opacity: 1; }
}
.ch-theme-toggle.ch-toggling .sun-icon,
.ch-theme-toggle.ch-toggling .moon-icon {
  animation: ch-toggle-spin 0.38s var(--ease-out-expo) both;
}

/* ---- Featured badge: shimmering sweep ---- */
.ch-prod-featured-badge {
  overflow: hidden;
  position: relative; /* already absolute, but needs local stacking for ::after */
}
.ch-prod-featured-badge::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  animation: ch-badge-shine 3.5s ease-in-out 1.5s infinite;
  pointer-events: none;
}
@keyframes ch-badge-shine {
  0%      { left: -70%; }
  30%, 100% { left: 150%; }
}

/* ---- Stat number: completion pulse ---- */
@keyframes ch-stat-complete {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); color: var(--primary); }
  100% { transform: scale(1); }
}
.stat-number.ch-complete {
  animation: ch-stat-complete 0.5s var(--ease-out-expo) both;
}

/* ---- Domain TLD chips: hover lift-pop ---- */
.ch-ds-popular a {
  transition: transform 0.18s var(--ease-out-expo), background 0.15s ease, border-color 0.15s ease;
  display: inline-block;
}
@media (hover: hover) {
  .ch-ds-popular a:hover {
    transform: translateY(-3px) scale(1.1);
    background: rgba(0,201,111,0.18);
    border-color: rgba(0,201,111,0.45);
  }
}
.ch-ds-popular a:active {
  transform: scale(0.95) !important;
  transition-duration: 80ms !important;
}

/* =====================================================================
   TYPESET — Typography refinement pass
   ===================================================================== */

/* ---- text-wrap: balance on all headings ---- */
.hero-title,
.section-heading,
.ch-audit-title,
.ch-wdp-title,
.ch-ds-title,
.newsletter-content h2,
.ch-section-title,
.ch-about-title,
.feature-card h3,
.ch-prod-name,
.faq-question span {
  text-wrap: balance;
}

/* ---- Consistent eyebrow / badge tracking ---- */
/* Raw-px letter-spacing doesn't scale with font size.
   0.08em at 0.78rem ≈ 1px; feels right for small caps labels. */
.hero-badge {
  letter-spacing: var(--letter-spacing-open);
}
.ch-audit-badge {
  letter-spacing: var(--letter-spacing-open);
}
.ch-wdp-badge {
  letter-spacing: var(--letter-spacing-open);
}

/* ---- Section subtitle line-height parity ----
   Column-width body text (two-column sections) should use 1.65 —
   tighter than centered full-width intros (1.8) but still open. */
.ch-audit-subtitle {
  line-height: 1.65;
}
.ch-wdp-subtitle {
  line-height: 1.65;
}

/* ---- Stat numbers: prevent width shift during counter animation ----
   tabular-nums is set on .stat-number; also lock min-width per digit. */
.stat-number {
  min-width: 3ch;
  display: block;
}

/* ---- Plus Jakarta Sans: enable optical sizing ----
   The variable font axis 'opsz' improves rendering at every size. */
.hero-title,
.section-heading,
.ch-audit-title,
.ch-wdp-title,
.ch-ds-title,
.newsletter-content h2 {
  font-optical-sizing: auto;
}

/* ---- Tighten letter-spacing on large display headings ----
   At 4.5rem, -0.02em is insufficient — scale the tracking with size. */
.hero-title {
  letter-spacing: -0.03em;
}

/* ---- Section heading scale coherence ----
   Three clamp tiers across the homepage:
   Display (hero):  clamp(2.75rem, 8vw, 4.5rem)    — .hero-title, unchanged
   H2 (major):      clamp(2rem, 4.5vw, 2.875rem)   — .section-heading
   H3 (section):    clamp(1.7rem, 3.5vw, 2.375rem) — audit/wdp/ds (already set)
   H4 (compact):    clamp(1.375rem, 2.5vw, 1.75rem) — newsletter, feature cards
*/
.section-heading {
  font-size: clamp(2rem, 4.5vw, 2.875rem);
}
.newsletter-content h2 {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
}

/* ---- Feature card heading: use H4 tier ---- */
.feature-card h3 {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  letter-spacing: -0.01em;
}

/* ---- Body text max-width in ch units ----
   ch scales with font size, unlike px. 68ch ≈ ~65ch real characters
   (ch = width of '0', real avg char is ~0.55x wider than 0). */
.section-subheading {
  max-width: 58ch;
}
.hero-desc {
  max-width: 52ch;
}
.ch-audit-subtitle,
.ch-wdp-subtitle {
  max-width: 44ch;
}

/* ---- Reduced-motion: preserve text-wrap: balance (no motion, safe) ---- */

/* =====================================================================
   MOBILE MENU FIXES  (2025-04)
   ===================================================================== */

/* 1. Desktop: override the `display:flex !important` that blocks d-xl-none.
      Without this, the menu div always occupies a compositing layer. */
@media (min-width: 1200px) {
  #ch-mobile-menu { display: none !important; }
}

/* 2. Backdrop-filter: only apply when drawer is OPEN.
      backdrop-filter on an opacity:0 element is still composited by browsers,
      producing a visible frosted-glass rectangle below the header on every page.
      Moving it to .open means zero visual artifact when the menu is closed. */
#ch-mobile-menu {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
#ch-mobile-menu.open {
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
}

/* 3. Theme-toggle icons inside mobile drawer: show only the active one.
      The drawer button lacks the .ch-theme-toggle class so the desktop rule
      (.ch-theme-toggle .sun-icon / .moon-icon) never matches it. */
#ch-mobile-menu .sun-icon,
#ch-mobile-menu .moon-icon { display: none !important; }
.dark #ch-mobile-menu .sun-icon { display: inline !important; }
html:not(.dark) #ch-mobile-menu .moon-icon { display: inline !important; }

/* ================================================================
   CRITIQUE FIXES (2026-04)
   ================================================================ */

/* --- SECTION RHYTHM: varied padding for visual hierarchy -------- */
#features.ch-section     { padding-top: 96px !important; padding-bottom: 64px !important; }
#products.ch-section     { padding-top: 64px !important; padding-bottom: 80px !important; }
#how-it-works.ch-section { padding-top: 56px !important; padding-bottom: 56px !important; }
#faq.ch-section          { padding-top: 80px !important; padding-bottom: 96px !important; }
.newsletter-section      { padding-top: 96px !important; padding-bottom: 0px !important; }

/* --- MOBILE: benefit pills — stack cleanly on small screens ----- */
@media (max-width: 480px) {
  .hero-benefits {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .benefit-item {
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
  }
}

/* --- MOBILE DRAWER: sticky CTA footer --------------------------- */
/* Remove scroll from the outer container */
#ch-mobile-menu { overflow-y: hidden !important; padding-bottom: 0 !important; }

/* Scrollable nav area */
#ch-mobile-menu .ch-mob-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: 4px;
}
#ch-mobile-menu .ch-mob-scroll::-webkit-scrollbar { display: none; }

/* CTA buttons: always visible at bottom */
#ch-mobile-menu .ch-mob-ctas {
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  padding-bottom: 2px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- CTA RADIUS: consistent across product pages --------------- */
.ch-ph-btn { border-radius: var(--radius-md, 8px) !important; }



/* ================================================================
   ADAPT — mobile + tablet responsive fixes
   Target: 375px (mobile), 768px (tablet), 1024px+ (desktop)
   ================================================================ */

/* A. Hero buttons: stack vertically on mobile, full-width */
@media (max-width: 540px) {
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 24px 0;
  }
  .hero-buttons .primary-button,
  .hero-buttons .glass-button {
    min-width: 0;
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 1rem;
  }
}

/* B. Section padding: mobile overrides for critique-fix !important rules */
@media (max-width: 768px) {
  #features.ch-section     { padding-top: 56px !important; padding-bottom: 40px !important; }
  #products.ch-section     { padding-top: 40px !important; padding-bottom: 48px !important; }
  #how-it-works.ch-section { padding-top: 40px !important; padding-bottom: 40px !important; }
  #faq.ch-section          { padding-top: 48px !important; padding-bottom: 56px !important; }
  .newsletter-section      { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* C. Mobile drawer nav links: guaranteed 44px touch target */
#ch-mobile-menu .ch-nav-link {
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}

/* D. Stats: tighter at very narrow screens */
@media (max-width: 400px) {
  .stat-item { padding: 14px 8px; }
  .stat-number { font-size: 1.6rem; }
  .stat-label { font-size: 0.78rem; }
}

/* E. FAQ grid: remove max-width cap on single-column mobile so it fills container */
@media (max-width: 900px) {
  .faq-grid { max-width: 100%; padding: 0; }
}

/* F. How It Works connector: hide at tablet where auto-fit reflows to 1-col */
@media (max-width: 860px) and (min-width: 769px) {
  .steps-grid::before { opacity: 0; }
}

/* G. Feature card: slightly reduce internal padding on mobile for breathing room */
@media (max-width: 768px) {
  .feature-card { padding: 28px 22px; }
  .feature-icon { width: 48px; height: 48px; font-size: 22px; margin-bottom: 14px; }
}

/* H. Products grid: on small mobile, ensure card doesn't get too tight */
@media (max-width: 380px) {
  .ch-prod-card { padding: 24px 16px 20px; }
}

/* I. Hero section: tighten top padding on very small screens */
@media (max-width: 480px) {
  .hero-section { padding-top: 24px !important; }
  .hero-content { padding: 0 16px; }
}

/* J. Newsletter icon: hide decorative icon on mobile to reduce clutter */
@media (max-width: 480px) {
  .newsletter-icon { display: none; }
}

/* K. Section title: tighten clamp floor on small mobile */
@media (max-width: 480px) {
  .section-title { font-size: clamp(1.6rem, 7vw, 2.5rem); }
}

/* =====================================================================
   SOCIAL PROOF STRIP — hero hybrid (social trust above stat cassettes)
   ===================================================================== */
.ch-social-proof {
  position: relative;
  z-index: 5;
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

.ch-sp-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
}
html:not(.dark) .ch-sp-inner {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.07);
}

.ch-sp-avatars {
  display: flex;
  align-items: center;
}

.ch-sp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0f1419;
  flex-shrink: 0;
  position: relative;
  letter-spacing: 0;
}
html:not(.dark) .ch-sp-avatar { border-color: #f8fafc; }
.ch-sp-avatar:nth-child(1) { background: #00C96F; color: #0a0f1a; z-index: 3; margin-right: -7px; }
.ch-sp-avatar:nth-child(2) { background: #34d399; color: #064e3b; z-index: 2; margin-right: -7px; }
.ch-sp-avatar:nth-child(3) { background: #059669; color: #ecfdf5; z-index: 1; margin-right: 0; }

.ch-sp-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.14);
  margin: 0 2px;
  flex-shrink: 0;
}
html:not(.dark) .ch-sp-divider { background: rgba(0,0,0,0.1); }

.ch-sp-stars {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 0.7rem;
  color: #F59E0B;
  line-height: 1;
  flex-shrink: 0;
}
.ch-sp-rating {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-primary);
  margin-left: 4px;
}
.ch-sp-trust {
  font-size: 0.77rem;
  color: var(--text-secondary);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .ch-sp-trust { display: none; }
}

/* =====================================================================
   GLASSMORPHISM REFINEMENT — semi-transparent light mode backgrounds
   so backdrop-filter: blur() is visible rather than hidden behind solid paint
   ===================================================================== */
html:not(.dark) .feature-card {
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}


/* =====================================================================
   SHADOW-GLOW HIERARCHY — primary CTA keeps full glow; secondary hovers
   use a softer token to avoid every element screaming equally
   ===================================================================== */
:root {
  --shadow-glow-soft: 0 0 16px rgba(0,201,111,0.15);
}
.dark {
  --shadow-glow-soft: 0 0 18px rgba(0,201,111,0.18);
}
/* Feature card hover: medium glow (not the full CTA-level intensity) */
.feature-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.12), var(--shadow-glow-soft) !important; }

/* =====================================================================
   ANNOUNCEMENT BAR — extracted from header.tpl inline style
   ===================================================================== */
.ch-announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: #0a0f1a;
  text-align: center;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* =====================================================================
   HEADER UTILITY CLASSES — extracted from header.tpl inline styles
   ===================================================================== */
.ch-mobile-close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.ch-mobile-close-btn:hover { color: var(--text-primary); }

.ch-nav-login-link {
  padding: 6px 12px !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  transition: var(--transition) !important;
}
.ch-nav-login-link:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Dropdown item base layout — extracted from repeated inline flex styles */
.ch-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
}
.ch-dropdown-item:hover { background: var(--bg-tertiary); }
.ch-dd-icon {
  font-size: 1.3rem;
  color: var(--primary);
  margin-top: 2px;
  flex-shrink: 0;
}
.ch-dd-icon--blue { color: #0369a1; }
.ch-dd-icon--green { color: #059669; }
.ch-dd-label {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 2px;
}
.ch-dd-sublabel {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.ch-navbar { height: 64px; padding: 0 24px; display: flex; align-items: center; background: transparent; position: relative; }
.ch-navbar-brand { padding: 0; margin-right: 20px; flex-shrink: 0; }
.ch-navbar-logo { height: 36px; width: auto; }
.ch-nav-products-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.ch-nav-chevron { font-size: 11px; transition: transform 0.2s; }
.ch-nav-chevron-sm { font-size: 10px; color: var(--text-muted); margin-left: 2px; transition: transform 0.2s; }
.ch-toolbar { margin-left: auto; flex-direction: row; align-items: center; gap: 8px; }
.ch-cart-btn { display: flex; align-items: center; gap: 6px; }
.ch-cart-icon { font-size: 16px; }
.ch-user-menu-wrap { position: relative; }
.ch-avatar-initials { width: 38px; height: 38px; font-size: 0.82rem; flex-shrink: 0; }
.ch-user-name-wrap { min-width: 0; }
.ch-user-name { font-weight: 700; font-size: 0.88rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-user-sub { font-size: 0.73rem; color: var(--text-muted); }
.ch-flag { display: inline-block; margin-right: 5px; vertical-align: middle; }
.ch-mobile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.ch-mobile-logo { height: 32px; }
.ch-mobile-section-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 8px; }

/* =====================================================================
   MOBILE NAV — extracted from header.tpl inline styles
   ===================================================================== */
.ch-mob-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}
.ch-mob-nav--secondary { margin-bottom: 20px; }
.ch-mob-acc-wrap { border-radius: 8px; overflow: hidden; }
.ch-mob-acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none !important; border: none !important; -webkit-appearance: none; appearance: none; cursor: pointer; text-align: left; font-family: inherit; font-size: inherit; color: inherit; }
.ch-mob-acc-sub { flex-direction: column; gap: 2px; padding: 4px 0 4px 16px; }
.ch-mob-subnav-link { font-size: 0.88rem; }
.ch-mob-sec-link { font-size: 0.9rem; }
.ch-mob-icon { margin-right: 8px; }
.ch-mob-icon--primary { color: var(--primary); }
.ch-mob-icon--blue    { color: #0369a1; }
.ch-mob-icon--muted   { color: var(--text-muted); }
.ch-mob-icon--purple  { color: #9333ea; }
.ch-mob-icon--teal    { color: #059669; }
.ch-mob-user-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-secondary); border-radius: var(--radius-sm); border: 1px solid var(--border-color); }
.ch-user-name-wrap--flex { flex: 1; }
.ch-mob-divider { border-top: 1px solid var(--border-color); margin: 8px 0 16px; }
.ch-logout-btn { color: #ef4444 !important; }
/* Dropdown menu — positional styles moved here from inline (display managed by JS) */
.ch-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 480px;
  background: #161B22;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 16px;
  z-index: 1000;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
html:not(.dark) .ch-dropdown-menu { background: #ffffff; }

/* =====================================================================
   BUG FIX 2026-04 — Four mobile header regressions
   ===================================================================== */

/* ------------------------------------------------------------------
   BUG 4: Empty space behind floating header — content starts 40px
   below header bottom on product pages (120px vs header bottom 80px).
   Root cause: --header-height:96px includes a 16px gap, PLUS the
   container inside #main-body adds padding-top:24px, giving 120px
   total on non-homepage pages. The -24px compensators on .ch-homepage
   and section:first-child don't fire on all pages (STYLE tag is first
   child in .primary-content on product pages).
   Fix: change --header-height to exactly header bottom (80px), zero
   the container's extra 24px padding, and zero the compensators.
   ------------------------------------------------------------------ */
:root {
  --header-height: 80px; /* header top(16px) + height(64px) = 80px — content starts here */
}

section#main-body > .container,
section#main-body > div.container-fluid {
  padding-top: 0 !important;
}

main.ch-homepage {
  margin-top: 0 !important;
}

.primary-content > section.ch-section:first-child {
  margin-top: 0 !important;
}

/* Product page hero sections: add explicit top clearance so hero text
   isn't hidden behind the nav. Hero section bg starts at 80px, text
   content clears by an extra 24px of breathing room. */
.ch-ph-hero,
.ch-wp-hero,
.ch-dom-hero,
.ch-about-hero,
.ch-wd-hero {
  padding-top: calc(var(--header-height) + 24px) !important;
}

/* ------------------------------------------------------------------
   BUG 3: Mobile drawer height regression.
   Root cause: overflow-y:hidden !important on the outer menu + sticky
   CTA footer consuming ~130px of the 618px max-height, leaving only
   ~486px scrollable for nav items (was 618px before).
   Fix: restore overflow-y:auto directly on #ch-mobile-menu and remove
   the sticky CTA split. All content scrolls together.
   ------------------------------------------------------------------ */
#ch-mobile-menu {
  overflow-y: auto !important;
  padding-bottom: 18px !important;
}

#ch-mobile-menu .ch-mob-scroll {
  flex: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

#ch-mobile-menu .ch-mob-ctas {
  border-top: none !important;
  padding-top: 8px !important;
}

/* ------------------------------------------------------------------
   BUG 2: Mobile drawer flicker on scroll.
   Root cause: when the drawer is open with backdrop-filter:blur(24px),
   every scroll frame inside the drawer causes GPU layer re-composition
   because the transform on the CLOSED state (translateY(-8px) scale(0.98))
   creates a new stacking context but is NOT promoted to its own GPU
   layer — the browser repaints the compositing layer on scroll.
   Fix: promote the open drawer to its own dedicated compositing layer
   with translateZ(0) so subsequent scroll repaints are isolated.
   ------------------------------------------------------------------ */
#ch-mobile-menu.open {
  transform: translateY(0) scale(1) translateZ(0) !important;
  -webkit-transform: translateY(0) scale(1) translateZ(0) !important;
  isolation: isolate;
}

/* ------------------------------------------------------------------
   BUG 1: Newsletter-glow horizontal overflow at narrow viewports.
   The .newsletter-glow orb is position:absolute with width:600px —
   at 390px viewport it extends ~105px beyond the right edge, which
   at certain scroll positions can cause phantom layout width.
   Fix: clip overflow on the newsletter section container.
   ------------------------------------------------------------------ */
.newsletter-section {
  overflow-x: clip !important;
}

/* Cancel over-aggressive hero padding override — sections start at 80px
   (header bottom) due to #main-body fix above; their own 32px internal
   padding is sufficient to clear the header. Do NOT double-pad. */
.ch-ph-hero,
.ch-wp-hero,
.ch-dom-hero,
.ch-about-hero,
.ch-wd-hero {
  padding-top: 32px !important;
}

/* =====================================================================
   BUG FIX 2026-04-23 — Dropdown text, FAQ border, /store overlap
   ===================================================================== */

/* ------------------------------------------------------------------
   BUG: Products dropdown items show #444 dark gray on dark background.
   Root cause: parent theme.css line 9651 sets
     header.header .navbar a { color: #444; }   specificity: 0-2-2
   Our .ch-dropdown-item { color: var(--text-primary); } is only 0-1-0.
   Fix: !important on every text node inside the dropdown.
   Also: remove any browser underline and add a green glow on hover.
   ------------------------------------------------------------------ */
.ch-dropdown-item,
.ch-dropdown-item:visited,
.ch-dropdown-item:hover,
.ch-dropdown-item:focus-visible,
.ch-dropdown-item:active {
  color: var(--text-primary) !important;
  text-decoration: none !important;
}

.ch-dd-label {
  color: var(--text-primary) !important;
  transition: color 0.18s ease;
}

.ch-dd-sublabel {
  color: var(--text-muted) !important;
}

/* Hover: shift label to primary green + subtle glow (replaces browser underline) */
.ch-dropdown-item:hover .ch-dd-label,
.ch-dropdown-item:focus-visible .ch-dd-label {
  color: var(--primary) !important;
  text-shadow: 0 0 16px rgba(0, 201, 111, 0.35);
}

/* Hover background — slightly more distinct than before */
.ch-dropdown-item:hover,
.ch-dropdown-item:focus-visible {
  background: rgba(0, 201, 111, 0.07) !important;
}

/* Light mode: hover needs a tinted background too */
html:not(.dark) .ch-dropdown-item:hover,
html:not(.dark) .ch-dropdown-item:focus-visible {
  background: rgba(0, 201, 111, 0.06) !important;
}

/* ------------------------------------------------------------------
   FAQ hover accent — green glow on hover in both themes
   ------------------------------------------------------------------ */
.faq-item:hover {
  border-color: rgba(0, 201, 111, 0.45) !important;
}
.dark .faq-item:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 201, 111, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html:not(.dark) .faq-item:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 201, 111, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* ------------------------------------------------------------------
   FAQ centering: compensate for scrollbar width so 100vw sections
   align flush with the visible viewport (not the scrollbar gutter).
   The --sb-w variable is set by JS in homepage.tpl.
   ------------------------------------------------------------------ */
.ch-homepage .hero-section,
.ch-homepage .ch-section,
.ch-homepage .newsletter-section {
  width: calc(100vw - var(--sb-w, 0px)) !important;
  margin-left: calc(-50vw + 50% + var(--sb-w, 0px) / 2) !important;
}

/* ------------------------------------------------------------------
   Cart / Checkout page fixes
   ------------------------------------------------------------------ */

/* 1. Tab panel: inactive tab gets Bootstrap white (#f8f8f8) bg in
      both BS3 (li.active > a) and BS4 (a.nav-link.active) mode.
      Override for dark theme. */
.dark .nav-tabs {
    border-bottom-color: var(--border-color) !important;
}
.dark .nav-tabs .nav-item .nav-link {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
.dark .nav-tabs .nav-item.active .nav-link,
.dark .nav-tabs .nav-link.active {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) var(--border-color) var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* 2. "Continue Shopping" btn-link inherits Bootstrap's dark link
      color which becomes invisible on dark backgrounds. */
.btn-continue-shopping {
    color: var(--text-secondary) !important;
}
.btn-continue-shopping:hover,
.btn-continue-shopping:focus {
    color: var(--primary) !important;
    text-decoration: none !important;
}

/* 3. Checkout button and continue shopping: center both. */
.summary-container .text-right {
    text-align: center !important;
}
.btn-checkout {
    display: block !important;
    width: 100% !important;
}

/* ------------------------------------------------------------------
   Cart: replace all remaining #058 blue with theme colors (all themes)
   ------------------------------------------------------------------ */

/* Empty Cart button — light mode was blue #058, make it red outlined */
.empty-cart .btn {
    background: transparent !important;
    color: #e05c5c !important;
    border: 1px solid #e05c5c !important;
    border-radius: 6px !important;
    padding: 5px 14px !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
}
.empty-cart .btn:hover {
    background: rgba(224, 92, 92, 0.1) !important;
    text-decoration: none !important;
}

/* Cart item domain links — light mode kept Bootstrap blue */
.view-cart-items .item a,
.view-cart-items .item .btn-link {
    color: var(--text-secondary) !important;
    text-decoration: none !important;
}
.view-cart-items .item a:hover,
.view-cart-items .item .btn-link:hover {
    color: var(--primary) !important;
}

/* Item domain subtext */
.item-domain {
    color: var(--text-muted) !important;
}

/* Cart item rows — light mode background */
html:not(.dark) .view-cart-items .item {
    background: #fff !important;
    border-bottom: 1px solid #e8e8e8 !important;
}
html:not(.dark) .view-cart-items {
    border-bottom: 1px solid #e8e8e8 !important;
}

/* Applied promo code display box — white bg invisible in dark mode */
.dark .view-cart-promotion-code {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}



/* =====================================================================
   MOBILE HEADER — visually lighter pill on small screens.
   Only the header element is modified; body padding is unchanged.
   ===================================================================== */
@media (max-width: 575px) {
  #header.header { top: 10px !important; width: calc(100% - 20px) !important; }
}

/* About Us — E-E-A-T trust items */
.ch-trust-item {
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
  color: var(--text-secondary);
}
.ch-trust-item i {
  flex-shrink: 0;
  margin-top: 3px;
  font-size: 1.1rem;
}


/* AOS: no-JS and crawler fallback — never leave content invisible */
@media (scripting: none) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* Also: once an element has aos-animate (or the body has ch-aos-ready from the fallback timer),
   reveal fully even without the transition having run (for fast-scroll viewers and bots) */
body.ch-aos-ready [data-aos]:not(.aos-animate) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}