/* =====================================================================
   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,#FCFEFD 0%,#F6F9F6 55%,#EFF3EF 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 {
  /* Header clearance lives on <body> now — see 'GLOBAL HEADER CLEARANCE' rule below.
     This places WHMCS-injected alert bars / $headeroutput / announcement bars below the
     floating header correctly, instead of being pushed under main-body's padding. */
  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;
}
/* Equal columns at desktop; hover scale carries the visual variety instead of a static width bump */
@media (min-width: 960px) {
  .features-grid {
    grid-template-columns: repeat(3, 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);
}
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) scale(1.04);
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
  z-index: 2;
}
.feature-card:hover h3 { transform: scale(1.05); }
.feature-card h3 {
  transform-origin: left center;
  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
@media (prefers-reduced-motion: reduce) {
  .feature-card:hover, .feature-card:hover h3 { transform: none; }
}

.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.55;
  line-height: 1;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.dark .step-number { opacity: 0.7; color: var(--primary); text-shadow: 0 0 24px rgba(0,201,111,0.18); }
@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; }
}

/* ─── Progressive tablet/laptop nav (md/lg) ──────────────────────────
   Reveal the desktop <nav> from 768px instead of waiting for xl
   (1200px). Items are ordered most-important first, so we hide the
   tail (Contact/Status for guests; Support/Status for logged-in users)
   at md, then add Contact/Support at lg, full set at xl. The hamburger
   stays visible until xl so users still reach hidden items. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Override Bootstrap's `.d-none` on the <nav> at md+; the desktop
     nav element has `d-none d-xl-flex`, which would otherwise keep
     it hidden until 1200px. */
  #header nav.ch-navbar { display: flex !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Show first 4 nav items only; rest collapse into hamburger */
  #header nav.ch-navbar > :nth-child(n+5) { display: none !important; }
  .ch-nav-link,
  .ch-nav-dropdown-toggle.ch-nav-link {
    padding: 5px 8px !important;
    font-size: 0.78rem !important;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Show first 5 nav items only; last (Status) stays in hamburger */
  #header nav.ch-navbar > :nth-child(n+6) { display: none !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: var(--bg-secondary) !important; }
#faq.ch-section          { background: var(--bg-secondary) !important; }
.newsletter-section      { background: var(--bg-primary) !important; } /* was matching footer, now matches body so there is clear space between card and footer */

html:not(.dark) #features.ch-section   { background: #F4F6F8 !important; }
html:not(.dark) #how-it-works.ch-section { background: #f7f9fc !important; }
html:not(.dark) #faq.ch-section        { background: #f7f9fc !important; }
html:not(.dark) .newsletter-section    { background: var(--bg-primary) !important; } /* body background so the card sits in its own breathing space */

/* --- 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;
}

/* On marketing pages (home + products), force the body's solid base color
   to match the hero so any sub-pixel bleed at the viewport edges is
   invisible. Specificity bumped with .primary-bg-color (always on body
   in WHMCS) to beat the .dark body { background: var(--bg-page) } rule. */
body.primary-bg-color:has(main.ch-homepage),
body.primary-bg-color:has(.ch-ph-hero),
body.primary-bg-color:has(.ch-wp-hero),
body.primary-bg-color:has(.ch-dom-hero),
body.primary-bg-color:has(.ch-wd-hero),
body.primary-bg-color:has(.ch-about-hero) {
  background: var(--bg-primary) !important;
  background-image: none !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 */

/* ------------------------------------------------------------------
   GLOBAL HEADER CLEARANCE (WHMCS-safe)
   Default: body padding places WHMCS alerts + main-body below the fixed
   header with 24px breathing room.
   Exception: pages with an edge-to-edge hero (home/products/about/contact)
   let the hero extend behind the glass header — no body padding, the hero
   itself provides internal clearance via padding-top below.
   ------------------------------------------------------------------ */
body {
  padding-top: calc(var(--header-height) + 24px) !important;
}
body:has(.ch-announcement-bar) {
  padding-top: calc(var(--header-height) + 24px + 32px) !important;
}

/* Marketing pages: hero covers the full viewport from y=0 — no body padding,
   no ugly strip between header and content. The header's glass blur shows
   the hero underneath. */
body:has(main.ch-homepage),
body:has(.ch-ph-hero),
body:has(.ch-wp-hero),
body:has(.ch-dom-hero),
body:has(.ch-wd-hero),
body:has(.ch-about-hero),
  body:has(.ch-fa-page) {
  padding-top: 0 !important;
}
/* Kill parent theme's main-body padding (top + bottom bleed through from theme.min.css).
   Bottom padding was creating a visible body-gradient strip between the newsletter
   section and the footer. Sections handle their own vertical padding. */
section#main-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Heroes handle their own header clearance internally so content isn't hidden */
.hero-section,
.ch-ph-hero,
.ch-wp-hero,
.ch-dom-hero,
.ch-wd-hero,
.ch-about-hero {
  padding-top: calc(var(--header-height) + 60px) !important;
}

/* =====================================================================
   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;
  /* Balanced breakpoints for a 4-card grid: never renders 3+1 unbalanced.
     <600px: 1 col (4 rows). 600-1099px: 2 cols (2+2). 1100px+: 4 cols (single row). */
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 600px) {
  .ch-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .ch-products-grid { grid-template-columns: repeat(4, 1fr); }
}
.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: var(--primary); color: #fff;
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  width: auto; min-width: 0; max-width: calc(100% - 32px);
  box-shadow: 0 6px 18px rgba(0,201,111,0.28);
}
.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;
  margin-bottom: 24px !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.
   Must still clear the fixed header (var(--header-height) + 24px breathing room)
   so the badge doesn't overlap the header pill on real mobile. */
@media (max-width: 480px) {
  .hero-section { padding-top: calc(var(--header-height) + 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. */
/* Product heroes extend to viewport top (body padding is 0 on these pages).
   Internal padding clears the fixed glass header AND gives 32px breathing room before content. */
.ch-ph-hero,
.ch-wp-hero,
.ch-dom-hero,
.ch-about-hero,
.ch-wd-hero {
  padding-top: calc(var(--header-height) + 60px) !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;
}

/* Product heroes extend to viewport top (body padding=0 on these pages).
   padding-top must clear the fixed header (var(--header-height)) plus add
   visual breathing room (32px) before the first content. */
.ch-ph-hero,
.ch-wp-hero,
.ch-dom-hero,
.ch-about-hero,
.ch-wd-hero {
  padding-top: calc(var(--header-height) + 60px) !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;
}


/* ==== CH NOTIFICATION / POPUP SYSTEM ==== */
/* Generic toast/popup anchored top-right with smart viewport fit.
   Used for: Romanian language switch prompt, 404-redirect notice, etc.
   Positioning: JS clamps to available space; on narrow screens centers horizontally. */

.ch-notif {
  position: fixed;
  top: 96px;                          /* below the pill header (header top 16 + height 64 + gap 16) */
  right: 24px;
  max-width: 360px;
  min-width: 280px;
  padding: 18px 20px 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid rgba(0,201,111,0.25);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  color: var(--text-primary);
  z-index: 1060;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(-12px) scale(0.97);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
  pointer-events: none;
}
.ch-notif.ch-notif--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
html:not(.dark) .ch-notif {
  background: rgba(255,255,255,0.96);
  border-color: rgba(0,168,92,0.22);
  box-shadow: 0 12px 40px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
  color: var(--text-primary);
}

.ch-notif__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 6px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-notif__title .ch-notif__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 8px rgba(0,201,111,0.6);
  flex-shrink: 0;
}
.ch-notif__body {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 0.88rem;
}
.ch-notif__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.ch-notif__btn {
  flex: 1;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  min-height: 36px;
  min-width: 44px;
}
.ch-notif__btn:hover { border-color: var(--primary); color: var(--primary); }
.ch-notif__btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #0a0f1a;
}
.ch-notif__btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #0a0f1a;
}
.ch-notif__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px; height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.ch-notif__close:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }

/* Mobile: center horizontally, tighten margins, stay out of the way of the header pill */
@media (max-width: 575px) {
  .ch-notif {
    top: 84px;
    right: 12px;
    left: 12px;
    max-width: none;
    min-width: 0;
  }
}

/* Bottom-left variant (used when top-right is busy / blocked) — JS picks at runtime */
.ch-notif--bottom-left { top: auto; bottom: 24px; right: auto; left: 24px; }
@media (max-width: 575px) { .ch-notif--bottom-left { bottom: 12px; left: 12px; right: 12px; top: auto; } }


/* ==== LIGHT-MODE CONTRAST OVERHAUL (2026-04) ==== */
/* Lift the token values for light mode so secondary text, borders, and card
   surfaces are clearly defined against the white page bg. Tightened to match
   the visual polish present in dark mode. */
html:not(.dark) {
  /* Borders: from rgba(26,32,44,0.20) → a stronger charcoal */
  --border-color:     rgba(26,32,44,0.18);
  --border-strong:    rgba(26,32,44,0.28);
  /* Text: dark enough for AA on white, but softened from a cold blue-black
     (#111827) to a lighter, more neutral charcoal so big headings don't feel
     heavy/depressing. Still ~12:1 on white. */
  --text-primary:     #1F252C;
  --text-secondary:   #364153;     /* was #4A5568 — darker for readability */
  --text-muted:       #4B5563;     /* was #606B7A */
  /* Card surface: just-off-white so cards read as distinct panels */
  --bg-card:          #FFFFFF;
}

/* Homepage light theme: the two body ambient orbs (green top-right, blue
   bottom-left) plus the remaster orb stacked a visible coloured wash over
   the whole page — a "hue over everything" that read as cold/heavy. Tone
   them down here (and tame the off-palette blue hardest) so light mode
   feels airy. Scoped to the homepage so other pages are untouched. */
html:not(.dark) body.ch-remaster::before{ opacity: 0.05 !important; }
html:not(.dark) body.ch-remaster::after { opacity: 0.025 !important; }

/* Cards (feature, product, FAQ, step) — stronger borders + a more visible
   soft shadow that reads as "lifted" rather than "flat text on white" */
html:not(.dark) .feature-card,
html:not(.dark) .ch-prod-card,
html:not(.dark) .step-container,
html:not(.dark) .ch-glow-card {
  background: #FFFFFF;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 4px 16px rgba(15,23,42,0.06);
}
html:not(.dark) .feature-card:hover,
html:not(.dark) .ch-prod-card:hover {
  border-color: rgba(0,168,92,0.30);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 8px 28px rgba(0,168,92,0.12);
}

/* FAQ items — the accordion cards need visible edges */
html:not(.dark) .faq-item {
  background: #FFFFFF;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 14px rgba(15,23,42,0.04);
}
html:not(.dark) .faq-item:hover { border-color: rgba(0,168,92,0.35); }
html:not(.dark) .faq-chevron { color: #4B5563; }

/* Step numbers in "How Easy Is It?" — default uses gradient text via
   background-clip:text which renders as pale mint on a white bg. Reset both
   the gradient-fill AND the transparent text-fill, use a solid brand green
   text color instead. Strongest contrast wins in light mode. */
html:not(.dark) .step-number {
  background: transparent !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--primary) !important;
  color: var(--primary) !important;
  text-shadow: 0 2px 4px rgba(0,168,92,0.15);
}

/* Hero benefit chips — give them a visible surface + border */
html:not(.dark) .benefit-item {
  background: #FFFFFF;
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  color: #1F2937;
}

/* Hero badge (ROMANIAN HOSTING · SINCE 2020) — tint background more visibly */
html:not(.dark) .hero-badge {
  background: rgba(0,201,111,0.08);
  border: 1px solid rgba(0,168,92,0.30);
}

/* Section subtitles — bump contrast from ~7:1 to ~9:1 */
html:not(.dark) .section-subtitle,
html:not(.dark) .hero-description {
  color: #1F2937;
}

/* Audit section numbered dividers — the horizontal separator lines */
html:not(.dark) .ch-audit-item { border-bottom-color: rgba(15,23,42,0.10); }

/* Product card featured/highlighted ring — make it pop on white */
html:not(.dark) .ch-prod-card--featured {
  border-color: rgba(147,51,234,0.45);
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 10px 40px rgba(147,51,234,0.10);
}

/* Atmospheric depth on the marketing body — a tiny hint of warmth at the top
   so the entire page isn't one flat white. Very subtle so it doesn't fight
   the hero/features cards. */
html:not(.dark) body.primary-bg-color:has(main.ch-homepage),
html:not(.dark) body.primary-bg-color:has(.ch-ph-hero),
html:not(.dark) body.primary-bg-color:has(.ch-wp-hero),
html:not(.dark) body.primary-bg-color:has(.ch-dom-hero),
html:not(.dark) body.primary-bg-color:has(.ch-wd-hero),
html:not(.dark) body.primary-bg-color:has(.ch-about-hero) {
  background: #F7F9FC !important;   /* warm very-light-gray */
  background-image: none !important;
}
/* The hero section stays pure white so it provides contrast against the body */
html:not(.dark) .hero-section,
html:not(.dark) .ch-ph-hero,
html:not(.dark) .ch-wp-hero,
html:not(.dark) .ch-dom-hero,
html:not(.dark) .ch-wd-hero,
html:not(.dark) .ch-about-hero {
  background: #FFFFFF !important;
}

/* Alternating section backgrounds for subtle rhythm (light mode already has
   some of this; reinforce so #features is white, #products slightly gray, etc.) */
html:not(.dark) #features.ch-section   { background: #F7F9FC !important; }
html:not(.dark) #products.ch-section   { background: #FFFFFF !important; }
html:not(.dark) .ch-audit-section      { background: #F7F9FC !important; }
html:not(.dark) .ch-webdev-promo       { background: #FFFFFF !important; }
html:not(.dark) #how-it-works.ch-section { background: #f7f9fc !important; }
html:not(.dark) #faq.ch-section        { background: #ffffff !important; }
html:not(.dark) .newsletter-section    { background: var(--bg-secondary) !important; }


/* ==== TERMINAL MOCKUP — LIGHT MODE OVERRIDES ==== */
/* The project.config terminal uses GitHub Dark syntax colors which have bad
   contrast on the light bg. Override with GitHub Light syntax colors. */
html:not(.dark) .ch-wdp-terminal {
  background: #F6F8FA;
  border: 1px solid rgba(15,23,42,0.14);
  box-shadow: 0 1px 2px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.08);
}
html:not(.dark) .ch-wdp-term-bar {
  background: #EAEEF2;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}
html:not(.dark) .ch-wdp-term-title { color: #57606A; }
html:not(.dark) .ch-wdp-k { color: #CF222E; }         /* keyword (const)      */
html:not(.dark) .ch-wdp-v { color: #0550AE; }         /* variable (project)   */
html:not(.dark) .ch-wdp-op { color: #24292F; }        /* operators (=, :)     */
html:not(.dark) .ch-wdp-p { color: #57606A; }         /* punctuation (,, {, })*/
html:not(.dark) .ch-wdp-s { color: #0A3069; }         /* strings              */
html:not(.dark) .ch-wdp-b { color: #CF222E; }         /* booleans             */
html:not(.dark) .ch-wdp-g { color: #116329; font-weight: 600; } /* status:live */
html:not(.dark) .ch-wdp-line { color: #24292F; }
html:not(.dark) .ch-wdp-line--comment { color: #6E7781; font-style: italic; }
html:not(.dark) .ch-wdp-line--active { background: rgba(17,99,41,0.05); }

/* =====================================================================
   PRODUCT PAGES — FAQ LIST LAYOUT FIX (2026-04)
   .faq-list was a plain block div with 0 gap between .faq-item, so
   accordions visually merged into a single rectangle. Separate them.
   Also: .section-subheading inherited heading color instead of muted.
   ===================================================================== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-inline: auto;
}
.section-subheading {
  color: var(--text-secondary);
  margin-inline: auto;
  margin-top: 10px;
  text-align: center;
}
html:not(.dark) .section-subheading {
  color: #4B5563;
}

/* =====================================================================
   AUDIT TIERS + SERVICES STRIP (2026-04)
   Placed below the 9-point breakdown. Three pricing tiers + services.
   ===================================================================== */
.ch-audit-list-heading {
  font-size: 0.68rem; font-weight: 800; color: var(--text-muted);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 4px; padding-bottom: 12px;
}
.ch-audit-cta-btn {
  padding: 13px 28px; font-size: 0.95rem; font-weight: 700;
  border-radius: var(--radius-sm); display: inline-flex;
  align-items: center; gap: 8px;
}
.ch-audit-cta-sub {
  margin-top: 12px; font-size: 0.85rem; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.ch-audit-cta-sub i { color: var(--primary); font-size: 0.95rem; }

.ch-audit-tiers {
  margin-top: 72px;
  padding-top: 64px;
  border-top: 1px solid var(--border-color);
}
.ch-audit-tiers-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}
.ch-audit-tiers-title {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800;
  color: var(--text-primary); margin-bottom: 10px; line-height: 1.2;
}
.ch-audit-tiers-sub {
  color: var(--text-secondary); font-size: 1rem; line-height: 1.55;
}

.ch-audit-tier-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
@media (max-width: 900px) {
  .ch-audit-tier-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

.ch-audit-tier {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 26px 26px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, box-shadow 0.3s;
}
.ch-audit-tier:hover {
  transform: translateY(-4px);
  border-color: rgba(0,201,111,0.35);
  box-shadow: 0 18px 48px rgba(0,0,0,0.12);
}
.ch-audit-tier-featured {
  border-color: var(--primary);
  box-shadow: 0 12px 42px rgba(0,201,111,0.12);
  background: linear-gradient(180deg, rgba(0,201,111,0.04), var(--bg-card) 40%);
}
html:not(.dark) .ch-audit-tier-featured {
  background: linear-gradient(180deg, rgba(0,201,111,0.06), #fff 60%);
}
.ch-audit-tier-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,168,92,0.35);
}

.ch-audit-tier-name {
  font-size: 0.82rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--primary); margin-bottom: 10px;
}
.ch-audit-tier-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 10px; color: var(--text-primary);
}
.ch-audit-tier-price-num {
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  font-family: var(--font-display); letter-spacing: -0.02em;
}
.ch-audit-tier-price-unit {
  font-size: 0.92rem; font-weight: 700; color: var(--text-secondary);
}
.ch-audit-tier-tagline {
  font-size: 0.88rem; color: var(--text-secondary);
  line-height: 1.5; margin-bottom: 22px; min-height: 42px;
}

.ch-audit-tier-list {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.ch-audit-tier-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5;
}
.ch-audit-tier-list li i {
  color: var(--primary); font-size: 0.9rem; margin-top: 3px; flex-shrink: 0;
}
.ch-audit-tier-btn {
  width: 100%; padding: 12px 20px;
  font-size: 0.92rem; font-weight: 700;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  transition: all 0.2s;
}
.ch-audit-tier-btn-ghost {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}
.ch-audit-tier-btn-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0,201,111,0.04);
}

/* Services strip */
.ch-audit-services {
  margin-top: 56px;
  padding: 32px 28px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}
.ch-audit-services-head {
  text-align: center; margin-bottom: 22px;
}
.ch-audit-services-label {
  font-size: 0.72rem; font-weight: 800; color: var(--primary);
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px;
}
.ch-audit-services-title {
  font-size: 1.15rem; font-weight: 700; color: var(--text-primary);
  margin: 0; line-height: 1.35;
}
.ch-audit-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.ch-audit-service {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.88rem; color: var(--text-primary);
  transition: border-color 0.2s, transform 0.2s;
}
.ch-audit-service:hover {
  border-color: rgba(0,201,111,0.35);
  transform: translateY(-2px);
}
.ch-audit-service i {
  color: var(--primary); font-size: 1.05rem; flex-shrink: 0;
}

/* =====================================================================
   FREE AUDIT PAGE (/free-audit) — 2026-04
   ===================================================================== */
.ch-fa-page { min-height: 60vh; }
.ch-fa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .ch-fa-grid { grid-template-columns: 1fr; gap: 32px; max-width: 560px; }
}

.ch-fa-formwrap {
  position: relative;
  padding: 36px 36px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 52px rgba(0,0,0,0.08);
}
@media (max-width: 600px) {
  .ch-fa-formwrap { padding: 24px 20px 22px; }
}

.ch-fa-form-title {
  font-size: 1.3rem; font-weight: 800;
  color: var(--text-primary); margin: 0 0 22px; line-height: 1.25;
}

.ch-fa-field {
  margin-bottom: 18px;
}
.ch-fa-field label {
  display: block; font-size: 0.85rem; font-weight: 600;
  color: var(--text-primary); margin-bottom: 6px;
}
.ch-fa-req { color: var(--primary); }

.ch-fa-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font-size: 0.95rem; line-height: 1.35;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.ch-fa-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,201,111,0.14);
}
.ch-fa-input::placeholder { color: var(--text-muted); opacity: 0.7; }
.ch-fa-textarea { resize: vertical; min-height: 96px; font-family: var(--font-body); }
.ch-fa-input-err {
  border-color: #E5484D;
  box-shadow: 0 0 0 3px rgba(229,72,77,0.12);
}
.ch-fa-field-err {
  margin-top: 6px; font-size: 0.82rem; color: #E5484D;
}

.ch-fa-or {
  display: flex; align-items: center;
  margin: 4px 0 14px;
  color: var(--text-muted); font-size: 0.78rem; letter-spacing: 1.5px;
  text-transform: uppercase; font-weight: 700;
}
.ch-fa-or::before, .ch-fa-or::after {
  content: ''; flex: 1; height: 1px; background: var(--border-color);
}
.ch-fa-or span { padding: 0 12px; }

.ch-fa-err-global,
.ch-fa-err-contact {
  margin: 8px 0 18px; padding: 12px 14px;
  background: rgba(229,72,77,0.08);
  border: 1px solid rgba(229,72,77,0.28);
  color: #c53135;
  border-radius: var(--radius-sm);
  font-size: 0.88rem; line-height: 1.5;
}
html:not(.dark) .ch-fa-err-global,
html:not(.dark) .ch-fa-err-contact { color: #b02128; }

.ch-fa-submit {
  width: 100%;
  padding: 14px 24px;
  font-size: 1rem; font-weight: 700;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 6px;
}

.ch-fa-fineprint {
  margin: 14px 0 0;
  font-size: 0.8rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 8px; line-height: 1.5;
}
.ch-fa-fineprint i { color: var(--primary); flex-shrink: 0; }

/* Success state */
.ch-fa-success {
  text-align: center;
  padding: 12px 4px 16px;
}
.ch-fa-success-icon {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,201,111,0.12);
  border-radius: 50%;
}
.ch-fa-success-icon i {
  color: var(--primary); font-size: 2.4rem;
}
.ch-fa-success h2 {
  font-size: 1.5rem; font-weight: 800;
  color: var(--text-primary); margin: 0 0 10px;
}
.ch-fa-success p {
  color: var(--text-secondary); font-size: 0.95rem;
  line-height: 1.6; margin: 0 0 8px;
}
.ch-fa-ticket {
  font-family: var(--font-display);
  color: var(--text-primary) !important;
  margin-top: 6px !important;
}
.ch-fa-success-btn {
  margin-top: 20px;
  padding: 13px 28px;
  font-size: 0.95rem; font-weight: 700;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 8px;
}

/* Aside */
.ch-fa-aside {
  padding: 28px 26px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  position: sticky; top: 108px;
}
.ch-fa-aside-title {
  font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.8px; color: var(--primary);
  margin: 0 0 16px;
}
.ch-fa-aside-list {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.ch-fa-aside-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5;
}
.ch-fa-aside-list li i {
  color: var(--primary); font-size: 1rem; margin-top: 3px; flex-shrink: 0;
}
.ch-fa-aside-list li strong {
  color: var(--text-primary); font-weight: 700; font-size: 0.92rem;
}
.ch-fa-aside-contact {
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  display: flex; flex-direction: column; gap: 8px;
}
.ch-fa-aside-contact-label {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-muted);
  margin-bottom: 4px;
}
.ch-fa-aside-contact a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-primary); text-decoration: none;
  font-size: 0.9rem; font-weight: 600;
  padding: 8px 10px; margin: 0 -10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.ch-fa-aside-contact a:hover {
  background: rgba(0,201,111,0.08);
  color: var(--primary);
}
.ch-fa-aside-contact a i { color: var(--primary); font-size: 1rem; }

/* =====================================================================
   /audit — hero header clearance (marketing-page mode)
   ===================================================================== */
.ch-fa-hero {
  padding-top: calc(var(--header-height) + 60px) !important;
  background: var(--bg-primary);
}
/* Ensure breakout sections match body on marketing audit page */
body:has(.ch-fa-page) {
  background: var(--bg-primary) !important;
}

/* =====================================================================
   REVIEWS SECTION (2026-04) - homepage social proof with Trustpilot mix
   ===================================================================== */
.ch-reviews-section {
  background: var(--bg-secondary);
  padding: 80px 0;
}
.ch-reviews-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.ch-reviews-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px;
  background: rgba(0,201,111,0.1);
  border: 1px solid rgba(0,201,111,0.25);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 18px;
}
.ch-reviews-stars-small { color: #FFB800; font-size: 0.95rem; letter-spacing: 1px; }
.ch-reviews-avg { font-weight: 800; color: var(--text-primary); }
.ch-reviews-separator { color: var(--text-muted); opacity: 0.5; }
.ch-reviews-count { color: var(--text-secondary); font-weight: 600; }

.ch-reviews-title {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800; line-height: 1.2;
  color: var(--text-primary); margin: 0 0 12px;
}
.ch-reviews-sub {
  color: var(--text-secondary);
  font-size: 1rem; line-height: 1.55; margin: 0;
}

.ch-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.ch-review-card {
  display: flex; flex-direction: column;
  padding: 24px 22px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, box-shadow 0.3s;
}
.ch-review-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0,201,111,0.35);
  box-shadow: 0 14px 40px rgba(0,0,0,0.10);
}

.ch-review-stars {
  display: inline-flex; gap: 2px;
  color: #FFB800;
  font-size: 1rem;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.ch-star-empty { color: rgba(255,184,0,0.25); }

.ch-review-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
  line-height: 1.35;
}
.ch-review-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 18px;
  flex: 1;
}

.ch-review-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
}
.ch-review-who {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.ch-review-avatar-initials {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.ch-review-avatar-img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-tertiary);
}
.ch-review-who-text {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.ch-review-author {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-review-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.2;
}
.ch-review-country {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ch-review-extra {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.ch-review-likes {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}
.ch-review-likes i { font-size: 0.92rem; }

.ch-review-source {
  font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 6px;
}
.ch-review-source-trustpilot {
  color: #00B67A;
  background: rgba(0,182,122,0.10);
  border: 1px solid rgba(0,182,122,0.3);
}
.ch-review-source-platform {
  color: var(--primary);
  background: rgba(0,201,111,0.08);
  border: 1px solid rgba(0,201,111,0.28);
}

.ch-reviews-foot {
  text-align: center;
  margin-top: 40px;
}
.ch-reviews-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  font-size: 0.95rem; font-weight: 700;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.ch-reviews-cta:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(0,201,111,0.04);
}
.ch-reviews-note {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Social-proof wrapper becomes a link - keep visuals, add hover hint */
a.ch-social-proof {
  display: inline-flex;
  text-decoration: none;
  color: inherit;
  border-radius: 999px;
  transition: transform 0.2s, opacity 0.2s;
  cursor: pointer;
}
a.ch-social-proof:hover {
  transform: translateY(-2px);
  opacity: 0.96;
}
a.ch-social-proof:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* =====================================================================
   Audit tier: EUR approx price next to RON
   ===================================================================== */
.ch-audit-tier-price-eur {
  display: block;
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.ch-audit-tier-price {
  flex-wrap: wrap;
  row-gap: 2px;
}

/* =====================================================================
   Newsletter (Ready to begin) -> footer breathing room
   Was visually welded to the footer; add proper whitespace below.
   ===================================================================== */
.newsletter-section {
  padding-top: 80px !important;
  padding-bottom: 120px !important;
}
@media (max-width: 640px) {
  .newsletter-section {
    padding-top: 56px !important;
    padding-bottom: 80px !important;
  }
}

/* =====================================================================
   FOCUS-VISIBLE RINGS - 2026-04 polish pass
   Keyboard-only focus indicators for all interactive surfaces in the
   recent feature set. Uses the primary color at reduced alpha for the
   ring so it's visible on both dark and light surfaces without being
   aggressive. Intentionally only triggers on :focus-visible (keyboard /
   a11y navigation) so mouse clicks don't produce rings.
   ===================================================================== */
.ch-review-card:focus-visible,
.ch-reviews-cta:focus-visible,
.ch-audit-tier-btn:focus-visible,
.ch-audit-cta-btn:focus-visible,
.ch-audit-tier:focus-within,
.ch-audit-services .ch-audit-service:focus-visible,
.ch-fa-submit:focus-visible,
.ch-fa-success-btn:focus-visible,
.btn.btn-primary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(0,201,111,0.18);
}

/* Inputs use an inset ring so it lines up with the border */
.ch-fa-input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,201,111,0.18);
}

/* Light mode: adapt ring tint for visibility on white surfaces */
html:not(.dark) .ch-review-card:focus-visible,
html:not(.dark) .ch-reviews-cta:focus-visible,
html:not(.dark) .ch-audit-tier-btn:focus-visible,
html:not(.dark) .ch-audit-cta-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(0,168,92,0.14);
}

/* =====================================================================
   REVIEWS SECTION - light mode pass
   The gold stars (#FFB800) work on both themes. The source badges use
   primary-tinted backgrounds which already adapt. Only adjustments:
   - Card shadow deeper on light so the card lifts off the section bg.
   - Review body text contrast bumped for WCAG AA on white.
   ===================================================================== */
html:not(.dark) .ch-review-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
html:not(.dark) .ch-review-card:hover {
  border-color: rgba(0,168,92,0.35);
  box-shadow: 0 14px 40px rgba(0,0,0,0.08);
}
html:not(.dark) .ch-review-text {
  color: #4b5563; /* darker secondary for readability on white */
}
html:not(.dark) .ch-reviews-section {
  background: #f7f9fc; /* body-near-white so cards float gently */
}
html:not(.dark) .ch-reviews-badge {
  background: rgba(0,168,92,0.10);
  border-color: rgba(0,168,92,0.28);
}
html:not(.dark) .ch-review-source-trustpilot {
  color: #008a5c;
  background: rgba(0,138,92,0.08);
  border-color: rgba(0,138,92,0.25);
}
html:not(.dark) .ch-star-empty { color: rgba(255,184,0,0.35); }

/* =====================================================================
   AUDIT TIERS - reduced motion safety
   Cards use a Y translate on hover; strip motion when user prefers
   reduced motion so the hover still signals (border color) without the
   vestibular-triggering shift.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ch-audit-tier,
  .ch-review-card,
  .ch-audit-service,
  a.ch-social-proof {
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
  }
  .ch-audit-tier:hover,
  .ch-review-card:hover,
  .ch-audit-service:hover,
  a.ch-social-proof:hover {
    transform: none !important;
  }
}

/* =====================================================================
   REVIEWS: optical fixes
   The source badge was right-aligned inside .ch-review-extra which wraps
   on narrow cards into an awkward second line. Constrain width + keep
   meta row balanced.
   ===================================================================== */
.ch-review-extra {
  margin-left: auto;
}
@media (max-width: 420px) {
  .ch-review-meta {
    /* On phones, let the row breathe rather than forcing a tight squeeze */
    flex-direction: column;
    align-items: flex-start;
  }
  .ch-review-extra {
    margin-left: 0;
    margin-top: 6px;
  }
}

/* =====================================================================
   AUDIT TIERS: price alignment + EUR visual weight
   The RON number + unit should share a baseline; the EUR approximation
   sits directly beneath, slightly indented to match the number's ink.
   ===================================================================== */
.ch-audit-tier-price {
  align-items: baseline;
}
.ch-audit-tier-price-eur {
  margin-top: 2px;
  padding-left: 2px;
}

/* =====================================================================
   REVIEWS CASSETTE - 2026-04 (v2: single-row, finger-draggable)
   Single row of cards translating continuously leftward. JS handles the
   actual motion via requestAnimationFrame so we can intercept pointer
   drag: press-and-hold follows your finger/mouse with 1:1 motion, on
   release the loop resumes from wherever you left it. Deliberately does
   NOT pause on accidental hover - you'd trip that just moving the cursor
   across the screen. Double tap / long press = pause.
   ===================================================================== */
.ch-reviews-track {
  position: relative;
  overflow: hidden;
  /* Soft edge fades so cards melt into the section background instead of
     clipping at a hard edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding: 8px 0; /* room for card hover lift */
}


.ch-reviews-lane {
  display: flex;
  gap: 22px;
  flex-shrink: 0;
  will-change: transform;
  touch-action: pan-y; /* let vertical page scroll still work */
  user-select: none;
}
.ch-reviews-lane.ch-dragging { cursor: grabbing; }
.ch-reviews-track { cursor: grab; }
.ch-reviews-track:active { cursor: grabbing; }
/* The JS handler clones cards into a single .ch-reviews-lane, so we only
   render ONE lane in the DOM now. The second lane that the Smarty template
   emits (aria-hidden) is hidden by this rule - JS will repopulate. */
.ch-reviews-track > .ch-reviews-lane + .ch-reviews-lane { display: none; }

/* Cards: fixed width so 3 fit comfortably on desktop; slightly wider on
   narrower viewports so the single visible card isn't cramped. */
.ch-reviews-track .ch-review-card {
  flex: 0 0 clamp(280px, 30vw, 380px);
  max-width: 380px;
}

@media (max-width: 640px) {
  .ch-reviews-track .ch-review-card { flex-basis: 85vw; }
  .ch-reviews-lane { animation-duration: 42s; } /* shorter loop on phones */
}

@media (prefers-reduced-motion: reduce) {
  .ch-reviews-track { overflow-x: auto; scroll-snap-type: x mandatory; }
  .ch-reviews-track .ch-review-card { scroll-snap-align: start; }
  .ch-reviews-lane { transform: none !important; }
}

/* Source badge: Trustpilot variant gets the star SVG + brand-accurate green.
   Platform variant stays primary-tinted. */
.ch-review-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ch-review-source-tp {
  display: inline-block;
  flex-shrink: 0;
  color: #00B67A;
}

/* Hero social-proof bubble: was slightly off-center because .ch-hero
   centers its children via flex but .ch-social-proof is an anchor with
   default inline-block behaviour - the row shifts by the anchor's natural
   width. Make it a proper inline-flex cell that centers cleanly. */
a.ch-social-proof {
  display: inline-flex !important;
  width: auto !important;
  align-self: center;
  margin: 0 auto;
  padding: 0;
  /* Overrides any parent flex that stretches children */
  flex: 0 0 auto;
}
.ch-sp-inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 999px;
}

/* Reviews header count display - clamp at 4.9 */
.ch-reviews-avg::after { content: ''; }

/* Hide the old .ch-reviews-grid if any lingering references point to it */
.ch-reviews-grid { display: none; }

/* =====================================================================
   AUDIT list items: dimension icon next to the 01-09 number
   ===================================================================== */
.ch-audit-item {
  align-items: flex-start;
}
.ch-audit-i {
  font-size: 1.1rem;
  color: var(--primary);
  margin-right: 6px;
  margin-top: 18px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  opacity: 0.85;
}
.ch-audit-item strong { display: flex; align-items: center; gap: 6px; }

/* =====================================================================
   Hero social-proof bubble: breathing room from status pill above
   Previously status-pill ended at y=677 and the bubble started at y=677
   (0px gap) making it look glued. Push it down.
   ===================================================================== */
a.ch-social-proof {
  margin-top: 28px !important;
  margin-bottom: 12px;
}
@media (max-width: 640px) {
  a.ch-social-proof { margin-top: 20px !important; }
}

/* =====================================================================
   Hero stat cards: linked variant + subtle "View status" footer link
   Same visual weight as the static stats; only appears on cards with
   something worth clicking to. Doesn't look like an ad or a banner -
   reads as a quiet footer action.
   ===================================================================== */
.stat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 18px 12px;
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
a.stat-item-linked {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.stat-item-linked:hover,
.stat-item:has(.stat-link:hover) {
  background-color: rgba(0, 201, 111, 0.05);
  transform: translateY(-2px);
}
.stat-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  letter-spacing: 0.2px;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.stat-link:hover {
  opacity: 1;
  transform: translateX(2px);
}
a.stat-item-linked:focus-visible,
.stat-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* =====================================================================
   Audit "Show all" collapsible - dimmed teaser rows stacked below,
   toggle button that looks like an invitation not a form field.
   ===================================================================== */
.ch-audit-hidden {
  display: none;
}
.ch-audit-list.is-expanded .ch-audit-hidden {
  display: flex;
}
.ch-audit-toggle {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  background: transparent;
  border: 1px dashed rgba(0, 201, 111, 0.4);
  border-radius: 999px;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ch-audit-toggle:hover {
  background: rgba(0, 201, 111, 0.08);
  border-color: var(--primary);
  border-style: solid;
  transform: translateY(-1px);
}
.ch-audit-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.ch-audit-toggle-chev {
  font-size: 0.75rem;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ch-audit-list.is-expanded .ch-audit-toggle-chev {
  transform: rotate(180deg);
}
.ch-audit-toggle .ch-audit-toggle-label-hidden { display: none; }
.ch-audit-list.is-expanded .ch-audit-toggle .ch-audit-toggle-label { display: none; }
.ch-audit-list.is-expanded .ch-audit-toggle .ch-audit-toggle-label-hidden { display: inline; }

/* =====================================================================
   /audit: full-viewport-width sections (hero + body)
   The shared .ch-section trick breaks out the primary-content container.
   Here we also ensure the outer wrappers don't trap sections inside a
   narrower column on desktop.
   ===================================================================== */
.ch-fa-page {
  width: 100%;
}
.ch-fa-hero,
.ch-fa-body {
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-right: -15px;
}

/* =====================================================================
   PHONE COUNTRY-CODE picker: button + input + dropdown
   ===================================================================== */
.ch-fa-phone-row {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.ch-fa-phone-cc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-right: 0;
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
  min-height: 44px;
}
.ch-fa-phone-cc:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-primary));
}
.ch-fa-phone-cc[aria-expanded="true"] {
  border-color: var(--primary);
}
.ch-fa-phone-cc-flag { font-size: 1.05rem; }
.ch-fa-phone-cc i { font-size: 0.7rem; opacity: 0.7; }
.ch-fa-phone-digits {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}

.ch-fa-phone-cc-menu {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 36px rgba(0,0,0,0.25);
  max-height: 260px;
  overflow-y: auto;
  position: absolute;
  z-index: 50;
  min-width: 260px;
}
.ch-fa-phone-cc-menu[hidden] { display: none; }
.ch-fa-phone-cc-menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.92rem;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.ch-fa-phone-cc-menu li:hover {
  background: rgba(0,201,111,0.10);
}
.ch-fa-phone-cc-menu li > span { font-size: 1.1rem; width: 22px; text-align: center; }

/* =====================================================================
   Free audit callout: visual emphasis so free tier draws attention
   ===================================================================== */
.ch-fa-free-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px auto 28px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(0,201,111,0.12), rgba(0,201,111,0.04));
  border: 1px solid rgba(0,201,111,0.3);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 640px;
}
.ch-fa-free-banner strong { color: var(--primary); font-weight: 800; }
.ch-fa-free-banner i {
  font-size: 1.5rem;
  color: var(--primary);
  flex-shrink: 0;
}

/* Defense-in-depth: hide any intl-tel-input WHMCS injects near our audit phone row */
.ch-fa-phone-row + .intl-tel-input,
.ch-fa-phone-row .intl-tel-input,
.ch-fa-phone-row input[name^="country-calling-code"] ~ .intl-tel-input {
  display: none !important;
}

/* =====================================================================
   HARDENING: Reviews cassette edge cases
   ===================================================================== */

/* Long review text: clamp at 6 lines with ellipsis, but keep readable. */
.ch-review-text {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Long author / title: truncate with ellipsis, never overflow card */
.ch-review-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
}
.ch-review-author {
  max-width: 100%;
  min-width: 0;
}

/* Review card prevents child overflow (flex items default to min-width: auto) */
.ch-review-card > * { min-width: 0; }
.ch-review-meta { min-width: 0; }

/* RTL reviews get proper text direction even though surrounding UI is LTR */
.ch-review-card[lang="ar"],
.ch-review-card[lang="he"],
.ch-review-card[lang="fa"] {
  direction: rtl;
  text-align: right;
}
.ch-review-card[lang="ar"] .ch-review-meta,
.ch-review-card[lang="he"] .ch-review-meta,
.ch-review-card[lang="fa"] .ch-review-meta {
  direction: rtl;
}

/* Single-review edge case: if there is just 1 card, don't loop - center it. */
.ch-reviews-lane:has(.ch-review-card:only-child) {
  justify-content: center;
  animation: none !important;
  transform: none !important;
}

/* =====================================================================
   HARDENING: Long translations don't break buttons / pills / nav
   German, Russian, Ukrainian can be 30-40% longer than English.
   ===================================================================== */
.ch-nav-link,
.ch-dropdown-item .ch-dd-label,
.btn,
.ch-audit-tier-name,
.ch-reviews-badge,
.ch-audit-badge {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* Stat labels with long translations wrap instead of spilling */
.stat-label,
.stat-link {
  max-width: 180px;
  text-align: center;
  overflow-wrap: break-word;
}
.stat-item { text-align: center; }

/* Hero title allows wrap on long translations */
.hero-title .title-main,
.hero-title .title-sub {
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

/* Audit tier card content: prevent overflow on long RO translations */
.ch-audit-tier-tagline,
.ch-audit-tier-list li,
.ch-audit-tier-name {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* =====================================================================
   HARDENING: RTL layout flip for key marketing surfaces
   ===================================================================== */
html[dir="rtl"] .ch-sp-avatars,
html[dir="rtl"] .ch-reviews-lane,
html[dir="rtl"] .stat-link span[aria-hidden="true"] {
  direction: ltr; /* numbers + arrows stay LTR even in RTL page */
}
html[dir="rtl"] .stat-link {
  direction: rtl;
}
html[dir="rtl"] .ch-audit-list,
html[dir="rtl"] .ch-audit-item {
  text-align: right;
}

/* =====================================================================
   HARDENING: Focus trap fallback for dropdown (keyboard accessibility)
   ===================================================================== */
.ch-fa-phone-cc-menu li:focus,
.ch-fa-phone-cc-menu li:hover {
  background: rgba(0, 201, 111, 0.10);
  outline: none;
}
.ch-fa-phone-cc-menu li[tabindex="0"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* =====================================================================
   HARDENING: Form field: prevent layout break on very long inputs
   ===================================================================== */
.ch-fa-input {
  max-width: 100%;
  text-overflow: ellipsis;
}
.ch-fa-field {
  min-width: 0;
}
.ch-fa-form {
  min-width: 0;
  max-width: 100%;
}

/* =====================================================================
   HARDENING: Image fallback - if OG or avatar fails to load, don't
   leave blank gaps or broken-image icons.
   ===================================================================== */
.ch-review-avatar-img,
.ch-sp-avatar {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ch-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
  white-space: nowrap;
}
.ch-trust-badge:hover {
  border-color: rgba(0,201,111,0.35);
  color: var(--text-primary);
  transform: translateY(-1px);
}
.ch-trust-badge i,
.ch-trust-badge svg {
  color: var(--primary);
  font-size: 1rem;
  flex-shrink: 0;
}
.ch-trust-badge strong {
  font-weight: 700;
  color: var(--text-primary);
}
html:not(.dark) .ch-trust-badge {
  background: #ffffff;
  border-color: rgba(0,0,0,0.09);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.ch-trust-section {
  padding: 32px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
.ch-trust-label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* Prevent trust badge overflow by allowing internal wrap only when needed */
.ch-trust-badge > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}

/* RTL layout for trust row */
html[dir="rtl"] .ch-trust-row {
  flex-direction: row-reverse;
}

/* Audit FAQ: prevent very long questions from breaking the flex row */
.ch-audit-faq-section .faq-question {
  min-width: 0;
  gap: 14px;
  align-items: flex-start;
}
.ch-audit-faq-section .faq-question span {
  overflow-wrap: break-word;
  word-wrap: break-word;
  min-width: 0;
  line-height: 1.4;
  hyphens: auto;
}
.ch-audit-faq-section .faq-answer p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  min-width: 0;
}

/* FAQ answer: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ch-audit-faq-section .faq-answer,
  .ch-audit-faq-section .faq-chevron {
    transition: none !important;
  }
}


/* =====================================================================
   POWERED-BY STRIP (2026-04, redesigned from fat trust badges)
   A single-line tech-stack strip showing what the site runs on.
   No misleading "registered / certified" claims, just real tech signals.
   ===================================================================== */
.ch-powered-section {
  position: relative;
  padding: 20px 0;
  background: var(--bg-secondary);
  border-top: 1px solid rgba(0, 201, 111, 0.22);
  border-bottom: 1px solid rgba(0, 201, 111, 0.22);
  box-shadow:
    0 -1px 24px -6px rgba(0, 201, 111, 0.18),
    0  1px 24px -6px rgba(0, 201, 111, 0.18),
    inset 0  1px 0 rgba(0, 201, 111, 0.05),
    inset 0 -1px 0 rgba(0, 201, 111, 0.05);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ch-powered-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 80% at 50% 50%,
    rgba(0, 201, 111, 0.06) 0%,
    transparent 70%
  );
}
.ch-powered-section > .container { position: relative; z-index: 1; }
.dark .ch-powered-section {
  border-top-color: rgba(0, 201, 111, 0.28);
  border-bottom-color: rgba(0, 201, 111, 0.28);
  box-shadow:
    0 -1px 32px -6px rgba(0, 201, 111, 0.22),
    0  1px 32px -6px rgba(0, 201, 111, 0.22),
    inset 0  1px 0 rgba(0, 201, 111, 0.08),
    inset 0 -1px 0 rgba(0, 201, 111, 0.08);
}
.ch-powered-label {
  text-align: center;
  font-family: var(--font-display), -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
  opacity: 0.72;
}
.ch-powered-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px;
  margin: 0 auto;
  max-width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.ch-powered-row::-webkit-scrollbar { display: none; }

.ch-powered-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  font-family: var(--font-display), -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 180ms cubic-bezier(0.25, 1, 0.5, 1);
  font-feature-settings: "ss01", "cv11";
}
.ch-powered-item strong {
  color: var(--text-primary);
  font-weight: 700;
}
.ch-powered-item i {
  color: var(--primary);
  font-size: 0.9375rem;
  opacity: 0.85;
}
.ch-powered-item:hover { color: var(--text-primary); }

.ch-powered-sep {
  color: var(--text-muted);
  font-size: 0.9rem;
  opacity: 0.35;
  user-select: none;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .ch-powered-section { padding: 14px 0; }
  .ch-powered-row {
    justify-content: flex-start;
    padding: 4px 20px;
  }
  .ch-powered-item {
    padding: 0 10px;
    font-size: 0.78125rem;
  }
  .ch-powered-item i { font-size: 0.875rem; }
}

html[dir="rtl"] .ch-powered-row { flex-direction: row-reverse; }

/* =====================================================================
   Touch target hardening (mobile ≤ 768px)
   Status pill + stat links are visually small by design; on touch
   devices give them the 44px minimum via padding without changing
   the visual footprint.
   ===================================================================== */
@media (max-width: 768px) {
  .ch-status-pill { min-height: 44px; padding-block: 10px; }
  .stat-link { min-height: 44px; padding-block: 12px; margin-top: 4px; }
}

/* Print stylesheet: strip interactive chrome, preserve content + brand */
@media print {
  body, body.primary-bg-color { background: #fff !important; color: #000 !important; }
  .navbar, .ch-navbar, .ch-mobile-drawer, .footer, footer,
  .ch-status-pill, .ch-powered-section, .ch-cta-section,
  .ch-announcement, .ch-floating, [data-aos] { animation: none !important; transition: none !important; }
  .navbar, .ch-navbar, .ch-mobile-drawer, .footer-nav, .ch-cta-section,
  .ch-announcement, [role="banner"] nav, [aria-label*="hamburger" i],
  button[aria-label*="close" i], .ch-scroll-top { display: none !important; }
  a { color: #000 !important; text-decoration: underline !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  a[href^="/"]::after, a[href^="#"]::after { content: ""; }
  img, picture, svg { max-width: 100% !important; page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
}

/* =====================================================================
   FAQ — brand-green identity (2026-04)
   Replace the generic blue browser focus ring + neutral resting state
   with a CrockyHost green accent system. Applies to homepage FAQ,
   product page FAQ, and audit FAQ.
   ===================================================================== */

/* Kill the default blue focus ring. The custom ring below replaces it. */
.faq-question:focus { outline: none; }
.faq-question:focus-visible {
  outline: 2px solid rgba(0, 201, 111, 0.6);
  outline-offset: -2px;
  border-radius: 18px;
}

/* Left brand-green accent bar that grows on hover and stays on open. */
.faq-item {
  position: relative;
}
.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
  transition: height 280ms cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 280ms ease;
  pointer-events: none;
}
.faq-item:hover::before { height: 36%; }
.faq-item.open::before {
  height: 70%;
  box-shadow: 0 0 12px rgba(0, 201, 111, 0.5);
}

/* Open state: stronger green ring + soft green glow halo. */
.faq-item.open {
  border-color: var(--primary) !important;
  box-shadow:
    0 0 0 1px rgba(0, 201, 111, 0.35),
    0 12px 32px -8px rgba(0, 201, 111, 0.28),
    0 4px 16px -4px rgba(0, 0, 0, 0.18) !important;
}
html:not(.dark) .faq-item.open {
  box-shadow:
    0 0 0 1px rgba(0, 201, 111, 0.4),
    0 14px 32px -10px rgba(0, 201, 111, 0.22),
    0 4px 14px -4px rgba(15, 23, 42, 0.08) !important;
}

/* Question text shifts to brand green as it opens — subtle but clear. */
.faq-item.open .faq-question {
  color: var(--primary);
}
.faq-item.open .faq-question span {
  color: var(--primary);
}

/* Chevron: stronger green, slight scale on open. */
.faq-item .faq-chevron {
  color: rgba(0, 201, 111, 0.55);
  transition: transform 350ms cubic-bezier(0.25, 1, 0.5, 1),
              color 200ms ease, opacity 200ms ease;
}
.faq-item:hover .faq-chevron { color: var(--primary); }
.faq-item.open .faq-chevron {
  color: var(--primary);
  transform: rotate(180deg) scale(1.1);
}

/* Hover background: a hint of green wash, replacing the previous near-invisible 4% tint. */
.faq-question:hover {
  background: linear-gradient(90deg,
    rgba(0, 201, 111, 0.08) 0%,
    rgba(0, 201, 111, 0.03) 60%,
    transparent 100%);
}

/* Answer divider: brand-green tinted instead of neutral grey. */
.faq-answer p {
  border-top-color: rgba(0, 201, 111, 0.18) !important;
}
html:not(.dark) .faq-answer p {
  border-top-color: rgba(0, 168, 92, 0.22) !important;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item::before { transition: none; }
  .faq-item .faq-chevron { transition: none; }
  .faq-item.open .faq-chevron { transform: rotate(180deg); }
}

/* Legal-page tables on narrow viewports: enable horizontal scroll and
   tighten cell density so 5-column cookie tables don't break out of the card. */
@media (max-width: 640px) {
  .ch-legal-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.8125rem;
    /* mask fades the cut edges so users see there is more content */
    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 14px), transparent 100%);
  }
  .ch-legal-table th,
  .ch-legal-table td {
    padding: 8px 10px;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 88px;
  }
  .ch-legal-table thead { display: table-header-group; }
  .ch-legal-table tbody { display: table-row-group; }
  .ch-legal-table tr { display: table-row; }
  /* code samples don't break mid-word; allow the row to shrink instead */
  .ch-legal-table code {
    font-size: 0.78rem;
    word-break: break-all;
  }
}

/* =====================================================================
   TERMLY CONSENT BANNER / MODAL / TOOLTIP — brand skin (v6, surgical)
   Minimal overrides: only the outer surface, the close X, the three
   button states (accept / decline / preferences). Everything inside
   Termly keeps its native rendering so we don't break their layout.
   ===================================================================== */

/* OUTER SURFACES ───────────────────────────────────────────────────── */

/* Bottom-banner (autoblock initial consent prompt) */
.t-cookieBanner,
[class*="termly-styles-banner"]:not([class*="termly-styles-bannerInner"]) {
  background: #FFFFFF !important;
  color: #1F2937 !important;
  border-top: 1px solid rgba(0, 201, 111, 0.35) !important;
  box-shadow:
    0 -8px 32px -10px rgba(0, 201, 111, 0.25),
    0 -2px 10px -4px rgba(0, 0, 0, 0.18) !important;
  font-family: var(--font-display), -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.dark .t-cookieBanner,
.dark [class*="termly-styles-banner"]:not([class*="termly-styles-bannerInner"]) {
  background: #161B22 !important;
  color: #F0F6FC !important;
  border-top-color: rgba(0, 201, 111, 0.45) !important;
}

/* Preference Centre modal (full popup with toggles) */
.t-preferenceModal,
[class*="termly-styles-modal-md"],
[class*="termly-styles-modal-sm"],
[class*="termly-styles-modal-lg"] {
  background: #FFFFFF !important;
  color: #1F2937 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 201, 111, 0.30) !important;
  box-shadow:
    0 24px 64px -16px rgba(0, 201, 111, 0.28),
    0 12px 32px -8px rgba(0, 0, 0, 0.30) !important;
  font-family: var(--font-display), sans-serif !important;
}
.dark .t-preferenceModal,
.dark [class*="termly-styles-modal-md"],
.dark [class*="termly-styles-modal-sm"],
.dark [class*="termly-styles-modal-lg"] {
  background: #161B22 !important;
  color: #F0F6FC !important;
}

/* In dark mode, Termly hard-codes black on the category-row containers
   (termly-styles-head-*, termly-styles-topHeader-*), which makes "Details"
   and the cookie count effectively invisible. Force descendant text back
   to the modal's light color so every label, link, and count is readable. */
.dark .t-preferenceModal [class*="termly-styles-head"],
.dark .t-preferenceModal [class*="termly-styles-topHeader"],
.dark [class*="termly-styles-modal-"] [class*="termly-styles-head"],
.dark [class*="termly-styles-modal-"] [class*="termly-styles-topHeader"] {
  color: #F0F6FC !important;
}

/* Termly nests a second `termly-styles-root-*` container INSIDE the
   modal with its own hardcoded white background. In dark mode this
   white panel sat under our white text, making the labels invisible.
   Strip the inner panel's background so the dark modal surface shows
   through. Light mode is unaffected (the inner white panel matches
   the outer white modal). */
.dark [class*="termly-styles-modal-"] [class*="termly-styles-root"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Once the inner white panel is killed, Termly's hardcoded black
   `color` on the description paragraph and per-category body copy is
   invisible on the dark surface. Force them to the modal's secondary
   text color, lift the weight, and use the brand font for consistency. */
.dark [class*="termly-styles-modal-"] [class*="termly-styles-description"],
.dark [class*="termly-styles-modal-"] [class*="termly-styles-body"] {
  color: #C9D1D9 !important;
  -webkit-text-fill-color: #C9D1D9 !important;
}
[class*="termly-styles-modal-"] [class*="termly-styles-description"],
[class*="termly-styles-modal-"] [class*="termly-styles-body"] {
  font-family: var(--font-display), sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
}

/* Lift the category labels from Termly's washed-out #C9D1D9 to full
   --text-primary AND bump size/font so they outrank the description
   text below them in visual hierarchy. */
.t-preferenceModal [class*="termly-styles-cbLabel"],
.t-preferenceModal [class*="termly-styles-module-label"],
[class*="termly-styles-modal-"] [class*="termly-styles-cbLabel"],
[class*="termly-styles-modal-"] [class*="termly-styles-module-label"] {
  font-family: var(--font-display), sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  -webkit-text-fill-color: currentColor !important;
}
.dark .t-preferenceModal [class*="termly-styles-cbLabel"],
.dark .t-preferenceModal [class*="termly-styles-module-label"],
.dark [class*="termly-styles-modal-"] [class*="termly-styles-cbLabel"],
.dark [class*="termly-styles-modal-"] [class*="termly-styles-module-label"] {
  color: #F0F6FC !important;
  -webkit-text-fill-color: #F0F6FC !important;
}
/* Light theme: dark text */
html:not(.dark) .t-preferenceModal [class*="termly-styles-cbLabel"],
html:not(.dark) .t-preferenceModal [class*="termly-styles-module-label"],
html:not(.dark) [class*="termly-styles-modal-"] [class*="termly-styles-cbLabel"],
html:not(.dark) [class*="termly-styles-modal-"] [class*="termly-styles-module-label"] {
  color: #1F2937 !important;
  -webkit-text-fill-color: #1F2937 !important;
}

/* THE real culprit for faded category rows: Termly puts opacity:0.5 on
   the <label> wrapper whenever a toggle is "disabled" — which includes
   Essential Cookies (mandatory) and any unchecked category. That
   halves the rendered contrast of the WHOLE row, not just the toggle.
   Force the wrapper back to full opacity; the unchecked toggle still
   visually reads as off via its own switch graphic. */
.t-preferenceModal [class*="termly-styles-module-root"][class*="termly-styles-module-disabled"],
[class*="termly-styles-modal-"] [class*="termly-styles-module-root"][class*="termly-styles-module-disabled"],
.t-preferenceModal label[class*="t-checkBox"],
[class*="termly-styles-modal-"] label[class*="t-checkBox"] {
  opacity: 1 !important;
}

/* Modal backdrop — slightly darker so the modal pops */
[class*="termly-styles-overlay"] {
  background: rgba(0, 0, 0, 0.55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Preference modal heading — Termly renders it small and thin which
   reads as ghostly against the dark surface. Promote it visually with
   the brand green for hierarchy. */
[class*="termly-styles-preferenceTitle"] {
  font-family: var(--font-display), sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #00C96F !important;
  opacity: 1 !important;
  margin: 4px 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(0, 201, 111, 0.20) !important;
}

/* Floating "Cookie Preferences" pill / consent prompt wrapper.
   Important: don't use `[class*="termly-styles-tooltip"]` here — Termly
   tags every nested element (including individual buttons) with a
   `termly-styles-tooltip-XXX` class, so a broad attr selector would
   bleed the wrapper background onto the buttons themselves. The stable
   `.t-consentPrompt` class is only on the root, so we use it alone. */
.t-consentPrompt {
  background: #FFFFFF !important;
  color: #1F2937 !important;
  border: 1px solid rgba(0, 201, 111, 0.40) !important;
  border-radius: 14px !important;
  box-shadow:
    0 12px 30px -10px rgba(0, 201, 111, 0.35),
    0 4px 12px -4px rgba(0, 0, 0, 0.22) !important;
  font-family: var(--font-display), sans-serif !important;
}
.dark .t-consentPrompt {
  background: #161B22 !important;
  color: #F0F6FC !important;
}

/* BUTTONS (stable t-* hooks) ──────────────────────────────────────── */

/* Primary green pill — covers all of Termly's primary-action button
   variants: t-acceptAllButton (banner), t-allowAllButton (preference
   modal), t-savePreferencesButton (after toggling). Selectors are
   prefixed with the element tag (button./a.) to outweigh Termly's own
   .termly-styles-module-solid-* rule (same class specificity but
   injected after our stylesheet, so it would otherwise win). */
button.t-acceptAllButton,
button.t-allowAllButton,
button.t-savePreferencesButton,
a.t-acceptAllButton,
a.t-allowAllButton,
a.t-savePreferencesButton {
  background: linear-gradient(135deg, #00E07A 0%, #00C96F 55%, #00A85C 100%) !important;
  background-image: linear-gradient(135deg, #00E07A 0%, #00C96F 55%, #00A85C 100%) !important;
  background-color: #00C96F !important;
  color: #FFFFFF !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 11px 26px !important;
  font-family: var(--font-display), sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  cursor: pointer !important;
  /* Layered shadow: tight inner highlight (top edge), soft outer glow,
     bigger drop shadow for depth — pulls the eye without being loud. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 6px -2px rgba(0, 0, 0, 0.25),
    0 10px 24px -8px rgba(0, 201, 111, 0.65) !important;
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease !important;
}
button.t-acceptAllButton:hover,
button.t-allowAllButton:hover,
button.t-savePreferencesButton:hover,
a.t-acceptAllButton:hover,
a.t-allowAllButton:hover,
a.t-savePreferencesButton:hover {
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 4px 10px -2px rgba(0, 0, 0, 0.28),
    0 14px 30px -8px rgba(0, 201, 111, 0.85) !important;
}
button.t-acceptAllButton:active,
button.t-allowAllButton:active,
button.t-savePreferencesButton:active,
a.t-acceptAllButton:active,
a.t-allowAllButton:active,
a.t-savePreferencesButton:active {
  transform: translateY(0) !important;
  filter: brightness(0.97) !important;
}

/* Ghost pills — decline + preferences.
   Doubled selectors (button./a.) for same reason as the primary
   button rule: outweigh Termly's inline + `.termly-styles-module-*`
   classes that would otherwise apply their cyan fill. */
button.t-declineAllButton,
button.t-declineButton,
button.t-preference-button,
button.t-managePreferencesButton,
a.t-declineAllButton,
a.t-declineButton,
a.t-preference-button,
a.t-managePreferencesButton {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  color: inherit !important;
  border: 1.5px solid rgba(0, 201, 111, 0.55) !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-family: var(--font-display), sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease !important;
}
button.t-declineAllButton:hover,
button.t-declineButton:hover,
button.t-preference-button:hover,
button.t-managePreferencesButton:hover,
a.t-declineAllButton:hover,
a.t-declineButton:hover,
a.t-preference-button:hover,
a.t-managePreferencesButton:hover {
  color: #00C96F !important;
  border-color: #00C96F !important;
  background-color: rgba(0, 201, 111, 0.08) !important;
}

/* Close (X) — strip Termly's hardcoded black */
.t-closeModal {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
}
.t-closeModal svg,
.t-closeModal svg path,
.t-closeModal svg g {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Toggle switches — turn green when active */
[class*="termly-styles-module-checked"] {
  background-color: #00C96F !important;
  border-color: #00C96F !important;
}

/* INLINE LINKS inside banner/modal — brand green */
.t-cookiePolicyLink,
.t-detailsLink,
[class*="termly-styles-detailsLink"] {
  color: #00C96F !important;
  cursor: pointer !important;
}

/* Hide Termly's logo (we keep our own brand identity) */
[class*="termly-styles-logo"] { display: none !important; }

/* Termly hardcodes a white background on the buttons container. Strip it so the
   container inherits the banner/tooltip surface in both light and dark themes. */
[class*="termly-styles-buttons"] {
  background: transparent !important;
}

/* Mobile tightening */
@media (max-width: 575px) {
  .t-acceptAllButton, .t-savePreferencesButton,
  .t-declineAllButton, .t-declineButton,
  .t-preference-button, .t-managePreferencesButton {
    padding: 11px 16px !important;
    font-size: 0.82rem !important;
  }
  .t-preferenceModal,
  [class*="termly-styles-modal-md"] {
    border-radius: 14px !important;
    max-width: calc(100vw - 16px) !important;
  }
}

/* =====================================================================
   COOKIE BANNER — MOBILE COMPACT MODE
   Termly's default banner takes ~30% of a small viewport (177px on a
   670px screen) because the copy is long and the buttons sit edge-to-
   edge. On mobile we:
     - Float the banner with side margins so it reads as a card rather
       than a wall blocking the page
     - Round all corners (it's a card now, not a tab attached to the
       bottom edge)
     - Reserve space at the very bottom so the Tidio chat bubble and
       its tooltip don't sit on top of the Accept button
     - Shrink the copy and tighten line-height to drop a line or two
     - Stack the three buttons in a row that still fits a 360px screen,
       with smaller padding so they don't wrap
   ===================================================================== */
/* Termly banner ALWAYS above Tidio chat. Tidio uses z-index
   ~999999998; bump Termly to int32-max minus 1 so it always wins. */
.t-cookieBanner,
.t-preferenceModal,
.t-consentDisplay,
[class*="termly-styles-banner"],
[class*="termly-styles-modal-"],
[id^="termly-code-snippet"],
[id^="termly-styles"] {
  z-index: 2147483646 !important;
}

@media (max-width: 768px) {
  /* Hit every plausible Termly outer-container class. Termly hashes the
     class names per build (termly-styles-banner-XXXXX, -root-YYYYY,
     -tooltip-ZZZZZ); the wildcard catches all. */
  .t-cookieBanner,
  [class*="termly-styles-banner"]:not([class*="termly-styles-bannerInner"]),
  [class*="termly-styles-root"]:not([class*="termly-styles-modal"] *),
  [class*="termly-styles-tooltip"] {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0, 201, 111, 0.35) !important;
    box-shadow:
      0 12px 36px -12px rgba(0, 0, 0, 0.55),
      0 4px 14px -6px rgba(0, 201, 111, 0.30) !important;
    margin: 0 !important;
  }
  /* Hide Tidio while the banner is showing so the Accept button is
     never under the chat bubble. Body flag set by cookie-i18n.js. */
  body[data-cookie-banner="open"] iframe[id^="tidio-chat"],
  body[data-cookie-banner="open"] iframe[name="tidio-chat"],
  body[data-cookie-banner="open"] #tidio-chat,
  body[data-cookie-banner="open"] [id*="tidio"] {
    visibility: hidden !important;
  }
  /* Compact inner padding so the body stays in ~3 lines max. */
  [class*="termly-styles-bannerInner"],
  .t-cookieBanner [class*="termly-styles-content"]:not([class*="termly-styles-modal"] *) {
    padding: 10px 12px !important;
  }
  /* Body text shrinks aggressively so the banner takes ~18% of the
     viewport, not ~45%. We target both the message wrapper and any
     descendant <p>/<span>/<div> so the size sticks even when Termly
     re-renders inner fragments. */
  [class*="termly-styles-root"] p,
  [class*="termly-styles-root"] span,
  [class*="termly-styles-message"],
  [class*="termly-styles-content"]:not([class*="termly-styles-modal"] *),
  [class*="termly-styles-banner"]:not([class*="termly-styles-bannerInner"]) p,
  [class*="termly-styles-banner"]:not([class*="termly-styles-bannerInner"]) [class*="termly-styles-text"] {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    margin: 0 0 6px 0 !important;
  }
  /* Buttons in the bottom banner. Target every plausible outer
     container (banner / root / tooltip) but explicitly EXCLUDE the
     preference modal — its bigger buttons stay so they're easier to
     tap during the (more thoughtful) opt-out flow. */
  .t-cookieBanner button,
  [class*="termly-styles-tooltip"]:not([class*="termly-styles-modal"] *) button,
  [class*="termly-styles-banner"]:not([class*="termly-styles-modal"] *) button {
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    min-height: 30px !important;
    height: auto !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
  }
  [class*="termly-styles-tooltip"]:not([class*="termly-styles-modal"] *) [class*="termly-styles-actions"],
  [class*="termly-styles-banner"]:not([class*="termly-styles-modal"] *) [class*="termly-styles-actions"] {
    gap: 6px !important;
    margin-top: 6px !important;
  }
  /* Squeeze logo if present — saves another row */
  [class*="termly-styles-logo"] {
    transform: scale(0.7);
    transform-origin: left center;
    margin: 0 !important;
  }
}
@media (max-width: 360px) {
  .t-cookieBanner [class*="termly-styles-actions"],
  [class*="termly-styles-banner"]:not([class*="termly-styles-bannerInner"]) [class*="termly-styles-actions"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .t-cookieBanner [class*="termly-styles-actions"] > *,
  [class*="termly-styles-banner"]:not([class*="termly-styles-bannerInner"]) [class*="termly-styles-actions"] > * {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}
/* =====================================================================
   PREFERENCE MODAL — MOBILE LAYOUT
   Termly's default modal is a fixed-position block whose intrinsic
   height is the total of header + body + buttons. On a 670px-tall
   phone, that easily exceeds the viewport and the bottom action
   buttons (Refuz toate / Permite toate) end up off-screen with no
   way to reach them — there's no internal scroll because the modal
   itself overflows the page.

   Fix: lock the modal to fixed-inset positioning, force it into a
   flex column whose body section scrolls and whose footer with the
   action buttons stays pinned at the bottom of the modal regardless
   of body height. Buttons are always tappable; the body is the only
   thing that scrolls.
   ===================================================================== */
@media (max-width: 768px) {
  .t-preferenceModal,
  [class*="termly-styles-modal-md"],
  [class*="termly-styles-modal-sm"],
  [class*="termly-styles-modal-lg"] {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  /* The body region inside the modal — make it the only scrollable
     part. Termly tags this with several nested wrappers; we apply
     overflow:auto liberally to whichever inner container holds the
     category rows. */
  .t-preferenceModal > *,
  [class*="termly-styles-modal-"] > * {
    min-height: 0 !important;
  }
  /* Whatever element contains the category list, give it scroll. */
  .t-preferenceModal [class*="termly-styles-body"],
  .t-preferenceModal [class*="termly-styles-content"],
  [class*="termly-styles-modal-"] [class*="termly-styles-body"],
  [class*="termly-styles-modal-"] [class*="termly-styles-content"] {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
  }
  /* Action footer with Refuz toate / Permite toate — pin to bottom
     of the modal so it's always reachable, regardless of how long
     the cookie list is. */
  .t-preferenceModal [class*="termly-styles-actions"],
  .t-preferenceModal [class*="termly-styles-footer"],
  [class*="termly-styles-modal-"] [class*="termly-styles-actions"],
  [class*="termly-styles-modal-"] [class*="termly-styles-footer"] {
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    background: inherit !important;
    padding: 12px 16px !important;
    border-top: 1px solid rgba(0, 201, 111, 0.18) !important;
    gap: 8px !important;
    display: flex !important;
    z-index: 2 !important;
  }
  /* Modal action buttons (Refuz toate / Permite toate / Confirm)
     should fill width 50/50 on phones for easy two-handed tap. */
  .t-preferenceModal [class*="termly-styles-actions"] > button,
  .t-preferenceModal [class*="termly-styles-footer"] > button,
  [class*="termly-styles-modal-"] [class*="termly-styles-actions"] > button,
  [class*="termly-styles-modal-"] [class*="termly-styles-footer"] > button {
    flex: 1 1 0 !important;
    min-height: 42px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
  }
}

/* =====================================================================
   BACK BUTTON ("Înapoi" / "Back")
   Lives in the category-detail sub-view inside the preference modal.
   Termly ships it as an unstyled <button> which inherits whatever
   default the browser provides — black text on a dark modal makes
   it invisible. Force a consistent themed treatment with high
   contrast in both light and dark modes.
   ===================================================================== */
.t-preferenceModal [class*="termly-styles-back"],
.t-preferenceModal button[class*="back-button"],
.t-preferenceModal button[aria-label="Back"],
.t-preferenceModal button[aria-label="Înapoi"],
[class*="termly-styles-modal-"] [class*="termly-styles-back"],
[class*="termly-styles-modal-"] button[class*="back-button"],
[class*="termly-styles-modal-"] button[aria-label="Back"],
[class*="termly-styles-modal-"] button[aria-label="Înapoi"] {
  background: rgba(0, 201, 111, 0.10) !important;
  color: #00C96F !important;
  border: 1px solid rgba(0, 201, 111, 0.35) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}
.dark .t-preferenceModal [class*="termly-styles-back"],
.dark .t-preferenceModal button[class*="back-button"],
.dark .t-preferenceModal button[aria-label="Back"],
.dark .t-preferenceModal button[aria-label="Înapoi"],
.dark [class*="termly-styles-modal-"] [class*="termly-styles-back"],
.dark [class*="termly-styles-modal-"] button[class*="back-button"],
.dark [class*="termly-styles-modal-"] button[aria-label="Back"],
.dark [class*="termly-styles-modal-"] button[aria-label="Înapoi"] {
  background: rgba(0, 201, 111, 0.14) !important;
  color: #4ADE80 !important;
  border-color: rgba(0, 201, 111, 0.45) !important;
}
.t-preferenceModal [class*="termly-styles-back"]:hover,
.t-preferenceModal button[aria-label="Back"]:hover,
.t-preferenceModal button[aria-label="Înapoi"]:hover,
[class*="termly-styles-modal-"] [class*="termly-styles-back"]:hover,
[class*="termly-styles-modal-"] button[aria-label="Back"]:hover,
[class*="termly-styles-modal-"] button[aria-label="Înapoi"]:hover {
  background: rgba(0, 201, 111, 0.20) !important;
  border-color: rgba(0, 201, 111, 0.55) !important;
}

/* =====================================================================
   CONTACT POPOVER — Tidio chat fallback
   Visible only when the live chat widget (Tidio) is NOT available
   (user rejected functional cookies, network failed, ad-blocker, etc).
   JS in cookie-i18n.js handles show/hide; CSS handles look + motion.
   Mounted at the document edge, fixed bottom-right above Tidio's z-index
   slot so it can never be hidden by anything else.
   ===================================================================== */
/* Container only — bare positioning, no card chrome. The card content
   lives in .ch-contact-pop-panel and only expands on hover/tap, so at
   rest this occupies just the launcher-bubble footprint (like a chat
   widget) and never covers the hero globe / scan box. */
.ch-contact-pop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999999990;   /* below Termly banner (int32-max) but above Tidio */
  /* show/hide (Tidio gating) driven by data-state via JS */
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.ch-contact-pop[data-state="shown"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Compact launcher bubble — the resting footprint. */
/* ID-scoped so the solid green wins over the homepage reset
   `.ch-remaster button{ background:none }` (0,1,1) which was leaving the
   bubble transparent — just a floating emoji + shadow. */
#ch-contact-pop .ch-contact-pop-launcher {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-left: auto;            /* hug the right edge of the fixed container */
  border: 1px solid rgba(0, 201, 111, 0.55);
  border-radius: 50%;
  cursor: pointer;
  /* DARK bubble, not green — a green crocodile on green was invisible.
     Dark charcoal + green ring makes the croc pop. */
  background-color: #0F1A14;
  background-image: linear-gradient(160deg, #1b2a23, #0d1612);
  box-shadow:
    0 12px 28px -10px rgba(0, 0, 0, 0.6),
    0 0 0 4px rgba(0, 201, 111, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 28px;
  line-height: 1;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#ch-contact-pop .ch-contact-pop-launcher:hover {
  transform: scale(1.05);
  box-shadow:
    0 14px 32px -10px rgba(0, 0, 0, 0.65),
    0 0 0 5px rgba(0, 201, 111, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ch-contact-pop-launcher:focus-visible { outline: 3px solid rgba(0, 201, 111, 0.45); outline-offset: 3px; }
.ch-contact-pop-launcher-icon { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22)); }
.ch-contact-pop[data-state="shown"] .ch-contact-pop-launcher {
  transform-origin: 50% 70%;
  animation: chMascotWave 4s ease-in-out infinite;
}
/* Hide the launcher once the panel is explicitly expanded. */
.ch-contact-pop[data-expanded="true"] .ch-contact-pop-launcher {
  opacity: 0;
  pointer-events: none;
}

/* Expandable card panel — hidden at rest, shown on hover (desktop) or
   when data-expanded is set (tap). Anchored bottom-right over the bubble. */
.ch-contact-pop-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 260px;
  max-width: calc(100vw - 24px);
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F4FBF7 100%);
  border: 1px solid rgba(0, 201, 111, 0.30);
  box-shadow:
    0 18px 40px -14px rgba(0, 0, 0, 0.18),
    0 6px 18px -8px rgba(0, 201, 111, 0.30);
  font-family: var(--font-display, -apple-system, sans-serif);
  color: #1F2937;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.dark .ch-contact-pop-panel {
  background: linear-gradient(160deg, #161B22 0%, #0F1A14 100%);
  color: #F0F6FC;
  border-color: rgba(0, 201, 111, 0.40);
}
/* Expand ONLY on explicit tap/click (data-expanded), never on hover —
   hover-expand felt abrupt. The bubble's :hover only does a subtle scale. */
.ch-contact-pop[data-expanded="true"] .ch-contact-pop-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ch-contact-pop-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: rgba(31, 41, 55, 0.55);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.dark .ch-contact-pop-close { color: rgba(240, 246, 252, 0.55); }
.ch-contact-pop-close:hover {
  background: rgba(0, 201, 111, 0.10);
  color: #00C96F;
}

.ch-contact-pop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ch-contact-pop-mascot {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #00C96F, #00A85C);
  font-size: 22px;
  filter: drop-shadow(0 2px 4px rgba(0, 201, 111, 0.35));
  /* Gentle wave: tilts left-right every ~3.5s. Only fires once we're
     visible (data-state=shown). Pauses for prefers-reduced-motion. */
  transform-origin: 50% 70%;
}
.ch-contact-pop[data-state="shown"] .ch-contact-pop-mascot {
  animation: chMascotWave 3.6s ease-in-out infinite;
}
@keyframes chMascotWave {
  0%, 70%, 100% { transform: rotate(0deg); }
  78%           { transform: rotate(-12deg); }
  86%           { transform: rotate(10deg); }
  94%           { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ch-contact-pop { transition: opacity .2s ease; transform: none !important; }
  .ch-contact-pop[data-state="shown"] .ch-contact-pop-mascot,
  .ch-contact-pop[data-state="shown"] .ch-contact-pop-launcher { animation: none; }
}
.ch-contact-pop-headtext {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.ch-contact-pop-headtext strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.ch-contact-pop-headtext span {
  font-size: 11.5px;
  color: rgba(31, 41, 55, 0.65);
  margin-top: 2px;
}
.dark .ch-contact-pop-headtext span { color: rgba(240, 246, 252, 0.62); }

.ch-contact-pop-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ch-contact-pop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
  transition: transform .15s ease, box-shadow .2s ease, background .15s ease;
}
.ch-contact-pop-btn-primary {
  background: linear-gradient(180deg, #25D366 0%, #1DA851 100%);  /* WhatsApp brand */
  color: #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 6px 14px -4px rgba(37, 211, 102, 0.55);
}
.ch-contact-pop-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 10px 18px -4px rgba(37, 211, 102, 0.65);
  color: #FFFFFF;
}
.ch-contact-pop-btn-secondary {
  background: transparent;
  color: #1F2937;
  border: 1px solid rgba(0, 201, 111, 0.30);
}
.dark .ch-contact-pop-btn-secondary {
  color: #F0F6FC;
  border-color: rgba(0, 201, 111, 0.45);
}
.ch-contact-pop-btn-secondary:hover {
  background: rgba(0, 201, 111, 0.10);
  border-color: rgba(0, 201, 111, 0.55);
  color: #00C96F;
}

/* Mobile: tighten margins, full-ish width but never edge-to-edge. */
@media (max-width: 480px) {
  .ch-contact-pop { right: 14px; bottom: 14px; }
  .ch-contact-pop-launcher { width: 52px; height: 52px; font-size: 26px; }
  .ch-contact-pop-panel { width: 240px; padding: 12px 12px 10px; }
  .ch-contact-pop-mascot { width: 32px; height: 32px; font-size: 19px; }
}