/*
 * Vercaa — Master Stylesheet (custom.css) — ASSEMBLED (Phase 1)
 * ============================================================
 * Single theme-owned CSS file. Cascade-ordered. No import/layer wrappers.
 * Built deterministically per docs/_ref/v2-baseline/custom-css-assembly-spec.md
 * Sections: 1 TOKENS, 2 SHARED BASE/COMPONENTS, 3 PER-PAGE SHARED BASES,
 *           4 PER-PAGE CONTENT.
 */


/* ============================================================ */
/* ============ SECTION: 1. TOKENS ============ */
/* ============================================================ */
/* ============================================================================
 * tokens.css — Vercaa design tokens (plain CSS custom properties)
 * ============================================================================
 * Single source of truth for colors, fonts, radius, shadows, spacing, z-index,
 * transitions. Replaces the Tailwind `@theme` block from the removed Tailwind
 * build (docs/26) — no build step, these are plain CSS vars.
 *
 * utilities.css reads these (e.g. .bg-primary { background: var(--color-primary) }).
 * Loaded FIRST, before utilities.css and base.css, by both head.tpl files.
 *
 * Two namespaces, both live during migration:
 *   un-prefixed  --color-primary / --radius / --font-sans   (canonical, design-folder)
 *   legacy       --color-vc-* / --vc-*                       (older markup + custom.css)
 * Remove the legacy block once all markup + custom.css are ported.
 * ============================================================================ */

:root {
  /* ── Brand ───────────────────────────────────────────────────────────── */
  --color-primary:         #7C3AED;
  --color-primary-dark:    #6D28D9;
  --color-secondary:       #FF5C00;   /* project brand orange (overrides design #F97316) */
  --color-secondary-hover: #E64F00;
  --color-accent:          #10b981;
  --color-accent-purple:   #A78BFA;
  --color-accent-teal:     #2DD4BF;

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --color-background-light: #F8FAFC;
  --color-background-dark:  #0F172A;
  --color-sidebar-light:    #FFFFFF;
  --color-sidebar-dark:     #1E293B;
  --color-surface-light:    #FFFFFF;
  --color-surface-dark:     #1E293B;
  --color-card-light:       #FFFFFF;
  --color-card-dark:        #1E293B;

  /* ── Misc named colors (scattered comps) ─────────────────────────────── */
  --color-brand-blue:      #1E293B;
  --color-brand-dark:      #1E293B;
  --color-dark-blue:       #1E293B;
  --color-text-light:      #1F2937;
  --color-text-dark:       #F3F4F6;
  --color-text-main-light: #1E293B;
  --color-text-main-dark:  #F1F5F9;
  --color-muted-light:     #6B7280;
  --color-muted-dark:      #9CA3AF;
  --color-footer-deep:     #020617;
  --color-priority-low:    #22c55e;
  --color-priority-medium: #eab308;
  --color-priority-high:   #ef4444;

  /* ── Radius ──────────────────────────────────────────────────────────── */
  --radius:     0.75rem;   /* DEFAULT (rounded) */
  --radius-sm:  0.375rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.5rem;
  --radius-xl:  1rem;
  --radius-2xl: 1rem;     /* Tailwind 2xl = 1rem (matches old build; was wrongly 1.5rem) */
  --radius-3xl: 1.5rem;   /* Tailwind 3xl = 1.5rem */
  --radius-4xl: 2rem;
  --radius-full: 9999px;

  /* ── Fonts ───────────────────────────────────────────────────────────── */
  --font-display: "Inter", sans-serif;
  --font-sans:    "Inter", sans-serif;
  --font-body:    "Inter", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --shadow-soft:  0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --shadow-glow:  0 0 20px rgba(168, 85, 247, 0.25);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

  /* ========================================================================
   * LEGACY vc-* namespace (TEMPORARY — remove once markup + custom.css ported)
   * Mirrors the old compat @theme block. Brand orange aligned to #FF5C00.
   * ===================================================================== */
  --color-vc-primary:        #7C3AED;
  --color-vc-primary-light:  #A78BFA;
  --color-vc-primary-dark:   #6D28D9;
  --color-vc-primary-tint:   #F5F3FF;
  --color-vc-accent-orange:  #FF5C00;

  --color-vc-text-primary:   #111827;
  --color-vc-text-secondary: #6B7280;
  --color-vc-text-muted:     #9CA3AF;
  --color-vc-text-inverse:   #FFFFFF;

  --color-vc-bg-base:        #FAFAFA;
  --color-vc-bg-surface:     #FFFFFF;
  --color-vc-bg-elevated:    #F9FAFB;

  --color-vc-border-subtle:  #F3F4F6;
  --color-vc-border-default: #E5E7EB;
  --color-vc-border-strong:  #D1D5DB;

  --color-vc-success:        #16A34A;
  --color-vc-success-bg:     #DCFCE7;
  --color-vc-warning:        #D97706;
  --color-vc-warning-bg:     #FEF3C7;
  --color-vc-danger:         #DC2626;
  --color-vc-danger-bg:      #FEE2E2;
  --color-vc-info:           #2563EB;
  --color-vc-info-bg:        #DBEAFE;

  /* Legacy --vc-* aliases (read by custom.css component rules + older arbitrary values) */
  --vc-primary:        #7C3AED;
  --vc-primary-light:  #A78BFA;
  --vc-primary-dark:   #6D28D9;
  --vc-primary-tint:   #F5F3FF;
  --vc-accent-orange:  #FF5C00;

  --vc-text-primary:   #111827;
  --vc-text-secondary: #6B7280;
  --vc-text-muted:     #9CA3AF;
  --vc-text-inverse:   #FFFFFF;

  --vc-bg-base:        #FAFAFA;
  --vc-bg-surface:     #FFFFFF;
  --vc-bg-elevated:    #F9FAFB;

  --vc-border-subtle:  #F3F4F6;
  --vc-border-default: #E5E7EB;
  --vc-border-strong:  #D1D5DB;

  --vc-success:        #16A34A;
  --vc-success-bg:     #DCFCE7;
  --vc-warning:        #D97706;
  --vc-warning-bg:     #FEF3C7;
  --vc-danger:         #DC2626;
  --vc-danger-bg:      #FEE2E2;
  --vc-info:           #2563EB;
  --vc-info-bg:        #DBEAFE;

  --vc-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vc-font-display: "Inter", system-ui, sans-serif;
  --vc-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --vc-text-xs:   0.75rem;
  --vc-text-sm:   0.875rem;
  --vc-text-base: 1rem;
  --vc-text-lg:   1.125rem;
  --vc-text-xl:   1.25rem;
  --vc-text-2xl:  1.5rem;
  --vc-text-3xl:  1.875rem;
  --vc-text-4xl:  2.25rem;
  --vc-text-5xl:  3rem;
  --vc-text-6xl:  3.75rem;

  --vc-font-normal:    400;
  --vc-font-medium:    500;
  --vc-font-semibold:  600;
  --vc-font-bold:      700;
  --vc-font-extrabold: 800;

  --vc-leading-tight:   1.25;
  --vc-leading-snug:    1.375;
  --vc-leading-normal:  1.5;
  --vc-leading-relaxed: 1.625;
  --vc-leading-loose:   1.75;

  --vc-tracking-tight:  -0.025em;
  --vc-tracking-normal: 0;
  --vc-tracking-wide:   0.025em;
  --vc-tracking-wider:  0.05em;

  --vc-space-0:  0;
  --vc-space-1:  0.25rem;
  --vc-space-2:  0.5rem;
  --vc-space-3:  0.75rem;
  --vc-space-4:  1rem;
  --vc-space-5:  1.25rem;
  --vc-space-6:  1.5rem;
  --vc-space-8:  2rem;
  --vc-space-10: 2.5rem;
  --vc-space-12: 3rem;
  --vc-space-16: 4rem;
  --vc-space-20: 5rem;
  --vc-space-24: 6rem;

  --vc-radius-sm:   0.375rem;
  --vc-radius-md:   0.5rem;
  --vc-radius-lg:   0.75rem;
  --vc-radius-xl:   1rem;
  --vc-radius-2xl:  1.5rem;
  --vc-radius-full: 9999px;

  --vc-shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --vc-shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --vc-shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --vc-shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --vc-shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --vc-shadow-glow:  0 0 20px rgba(124, 58, 237, 0.25);
  --vc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --vc-container-max:    1280px;
  --vc-container-narrow: 768px;
  --vc-sidebar-width:    16rem;
  --vc-header-height:    4rem;

  --vc-bp-sm:  640px;
  --vc-bp-md:  768px;
  --vc-bp-lg:  1024px;
  --vc-bp-xl:  1280px;
  --vc-bp-2xl: 1536px;

  --vc-z-base:     1;
  --vc-z-dropdown: 100;
  --vc-z-sticky:   200;
  --vc-z-overlay:  300;
  --vc-z-modal:    400;
  --vc-z-toast:    500;
  --vc-z-tooltip:  600;

  --vc-transition-fast: 150ms ease;
  --vc-transition-base: 200ms ease;
  --vc-transition-slow: 300ms ease;
  --vc-ease-out-cubic:  cubic-bezier(0.215, 0.61, 0.355, 1);
}


/* ============================================================ */
/* === SECTION: 1b. CUSTOM UTILITY ALIASES (non-Tailwind) === */
/* ============================================================ */
/* These two class names are NOT Tailwind utilities, so the Play CDN does not
 * generate them. They were defined in the old hand-written utilities.css
 * (dropped in rebuild v2, docs/29). Markup still uses them, so keep the aliases
 * here. Both map to design tokens. Used by:
 *   .bg-default  — viewinvoice/masspay/viewquote/viewbillingnote/viewemail/
 *                  clientareaproductdetails/store sitelock (7 tpls)
 *   .text-domain — active-products-services-item.tpl */
.bg-default  { background-color: var(--color-background-light); }
.text-domain { color: var(--color-primary); }


/* ============================================================ */
/* ============ SECTION: 2. SHARED BASE / COMPONENTS ============ */
/* ============================================================ */


/* ==== PAGE: 2a. base.css ==== */
/* ============================================================================
 * base.css — Shared theme components + effects (loaded on EVERY page)
 * ============================================================================
 * Home for theme-owned component/effect rules shared across marketing,
 * client-area, and cart. Loaded after tokens.css + utilities.css + variants.css
 * and after Bootstrap (theme.min.css), before the per-type sheets.
 *
 * Phase 3 (docs/26): seeded with the design-folder shared-effects block that
 * previously lived ONLY in the Tailwind build (templates/vercaa/tailwind/
 * input.css layer components → built vercaa.css). Removing the Tailwind
 * toolchain would have deleted these, so they are ported here verbatim.
 *
 * The shared .vc-* component rules (.vc-btn, .vc-card, …) still live in
 * custom.css for now; custom.css keeps loading everywhere and is split into
 * here gradually (plan: shrink, don't force-empty).
 *
 * Shared keyframes (rotate/float/dash) live at the bottom. Page-specific
 * keyframes (e.g. vc-pr-pulse) live with their page sheet (marketing.css).
 * ============================================================================ */

/* ── Design-folder shared effects (ported from Tailwind layer components) ── */

/* ===== A) Design-folder shared effects ================================= */

/* Glassmorphism */
.glass-card,
.glass-panel,
.glass-effect,
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.glass-card { box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07); }
.dark .glass-card,
.dark .glass-panel,
.dark .glass-effect,
.dark .glass {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gradient text (purple→orange aligned to #FF5C00) */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, #7C3AED 0%, #FF5C00 100%);
}
.dark .gradient-text {
  background-image: linear-gradient(135deg, #818CF8 0%, #FF5C00 100%);
}

/* Card hover lift */
.studio-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.studio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
}

/* Button shine */
.btn-hover-fx { transition: all 0.3s ease; position: relative; overflow: hidden; }
.btn-hover-fx::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}
.btn-hover-fx:hover::after { left: 100%; }
.btn-hover-fx:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.15); }
.btn-hover-fx:active { transform: translateY(0); }

/* Scroll-reveal */
.fade-in-up {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

/* Active-nav treatments */
.active-nav-glow { box-shadow: 0 0 15px rgba(99, 102, 241, 0.3); }
.active-nav { background:#fff; border:1px solid #e2e8f0; color:#7C3AED; box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05); }
.sidebar-item-active {
  background-color: rgba(124, 58, 237, 0.05);
  border-right: 3px solid #7c3aed;
  box-shadow: inset -10px 0 10px -10px rgba(124, 58, 237, 0.2);
}
.glow-active { filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.5)); }

/* Material Icons fill/weight variants */
.active-icon { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.sidebar-icon { font-variation-settings: 'wght' 300; }

/* Sidebar hover icon tint */
.sidebar-item:hover .material-icons-outlined,
.sidebar-item:hover .icon { color: #7C3AED; }

/* Table row hover */
.table-row-hover:hover { background-color: rgba(248, 250, 252, 0.8); }
.dark .table-row-hover:hover { background-color: rgba(30, 41, 59, 0.4); }

/* OTP / focus */
.otp-input { caret-color: #7C3AED; }

/* Priority buttons */
.priority-btn.active-low    { background-color:#22c55e !important; color:#fff !important; border-color:#22c55e !important; box-shadow:0 4px 12px rgba(34,197,94,0.3) !important; }
.priority-btn.active-medium { background-color:#eab308 !important; color:#fff !important; border-color:#eab308 !important; box-shadow:0 4px 12px rgba(234,179,8,0.3) !important; }
.priority-btn.active-high   { background-color:#ef4444 !important; color:#fff !important; border-color:#ef4444 !important; box-shadow:0 4px 12px rgba(239,68,68,0.3) !important; }

/* ============================================================================
 * SEGMENTED CONTROL — .vc-segmented (shared, radio-driven pill toggle)
 * ============================================================================
 * Standardised from the cart's .vc-domain-pill (configureproductdomain.tpl).
 * A grey track holding N equal segments; each segment is a <label> wrapping a
 * .sr-only radio. The checked segment lifts to a white pill via :has(:checked)
 * — NO JS needed for the visual state (a behaviour hook like .panel-domain-option
 * can still co-exist on the same element for form logic).
 *
 * Column count: set --vc-seg-cols on the track (default 3). E.g. 2-up:
 *   <div class="vc-segmented" style="--vc-seg-cols:2;">
 *
 * Active color: --vc-seg-active (default brand purple). Override per instance.
 *
 * Lives in base.css so it's available on EVERY page (system theme + the cart,
 * which cross-links base.css). .vc-domain-pill is kept as a thin alias below
 * so existing cart/order.js markup keeps working unchanged.
 * ============================================================================ */
/* .vc-domain-pill / -label = legacy alias (cart). Listed alongside so both
   class sets render identically. New work: use .vc-segmented. */
.vc-segmented,
.vc-domain-pill {
  display: grid;
  grid-template-columns: repeat(var(--vc-seg-cols, 3), 1fr);
  gap: 6px;
  padding: 6px;
  /* slate-100 track (matches the original cart pill); gives contrast against
     the white active pill. Override per instance with --vc-seg-track. */
  background: var(--vc-seg-track, #f1f5f9);
  border-radius: var(--vc-radius-xl, 1rem);
}
.vc-segmented-label,
.vc-domain-pill-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 0;
  border-radius: var(--vc-radius-lg, 0.75rem);
  font-weight: 700;
  color: var(--vc-text-secondary, #64748b);
  user-select: none;
  transition: color .15s, background-color .15s, box-shadow .15s;
}
.vc-segmented-label .material-symbols-outlined,
.vc-domain-pill-label .material-symbols-outlined { font-size: 20px; }
.vc-segmented-label:hover,
.vc-domain-pill-label:hover { color: var(--vc-text-primary, #111827); }
.vc-segmented-label:has(input:checked),
.vc-domain-pill-label:has(input:checked) {
  background: var(--vc-bg-surface, #fff);
  color: var(--vc-seg-active, var(--vc-primary, #7c3aed));
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
/* Keyboard focus ring on the (sr-only) radio bubbles to the pill */
.vc-segmented-label:focus-within,
.vc-domain-pill-label:focus-within {
  outline: 2px solid var(--vc-primary, #7c3aed);
  outline-offset: 2px;
}
/* Narrow screens: tighten padding, drop the icon (label text stays) */
@media (max-width: 480px) {
  .vc-segmented-label,
  .vc-domain-pill-label { padding: 10px 8px; font-size: 13px; }
  .vc-segmented-label .material-symbols-outlined,
  .vc-domain-pill-label .material-symbols-outlined { display: none; }
}

/* ============================================================================
 * DROPDOWN / MENU — .vc-dropdown (shared, JS-driven via [data-dropdown])
 * ============================================================================
 * A toggle button + an absolutely-positioned menu panel. base.js (initDropdowns)
 * toggles `.is-open` on the .vc-dropdown root, closes on outside-click + Escape,
 * and (for [data-dropdown-item] menus) writes the chosen item's text into any
 * [data-dropdown-label] inside the root — a lightweight custom <select>.
 *
 * Three uses:
 *   1. Select-style    — items are choices; label reflects the selection.
 *   2. Action menu     — items are links/buttons (settings, kebab "⋮" menus).
 *   3. Searchable      — drop an .vc-input at the top of the menu (see cart's
 *                        .vcpd-tld for the domain TLD pattern this generalises).
 *
 * Lives in base.css (every page, incl. the cross-linked cart). Tokenised. The
 * WHMCS Bootstrap .dropdown-menu/.dropdown-item markup is restyled separately
 * (clientarea.css); use .vc-dropdown for new, non-WHMCS menus.
 * ============================================================================ */
.vc-dropdown { position: relative; display: inline-block; }

/* Toggle — looks like a select/secondary button by default; compose with
   .vc-btn variants instead if you want a button-styled trigger. */
.vc-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vc-space-2, 0.5rem);
  min-width: 10rem;
  padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
  background: var(--vc-bg-surface, #fff);
  color: var(--vc-text-primary, #111827);
  border: 1px solid var(--vc-border-strong, #d1d5db);
  border-radius: var(--vc-radius-md, 0.5rem);
  font-family: inherit;
  font-size: var(--vc-text-sm, 0.875rem);
  font-weight: var(--vc-font-medium, 500);
  line-height: 1.25;
  cursor: pointer;
  transition: border-color var(--vc-transition-fast, 150ms ease),
              box-shadow var(--vc-transition-fast, 150ms ease);
  -webkit-appearance: none; appearance: none;
}
.vc-dropdown-toggle:hover { border-color: var(--vc-primary-light, #a78bfa); }
.vc-dropdown-toggle:focus-visible,
.vc-dropdown.is-open .vc-dropdown-toggle {
  outline: none;
  border-color: var(--vc-primary, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
/* Caret — rotates when open */
.vc-dropdown-caret {
  flex-shrink: 0;
  color: var(--vc-text-muted, #9ca3af);
  transition: transform var(--vc-transition-base, 200ms ease);
  line-height: 1;
}
.vc-dropdown.is-open .vc-dropdown-caret { transform: rotate(180deg); }

/* Menu panel — hidden until .is-open */
.vc-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  min-width: 100%;
  max-height: 18rem;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  padding: var(--vc-space-1, 0.25rem);
  background: var(--vc-bg-surface, #fff);
  border: 1px solid var(--vc-border-default, #e5e7eb);
  border-radius: var(--vc-radius-lg, 0.75rem);
  box-shadow: var(--vc-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1));
  z-index: var(--vc-z-dropdown, 100);
}
.vc-dropdown.is-open .vc-dropdown-menu { display: flex; }
/* Right-aligned variant (kebab menus near the right edge) */
.vc-dropdown-menu--right { left: auto; right: 0; }

/* Item */
.vc-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--vc-space-2, 0.5rem);
  width: 100%;
  padding: var(--vc-space-2, 0.5rem) var(--vc-space-3, 0.75rem);
  background: transparent;
  border: 0;
  border-radius: var(--vc-radius-md, 0.5rem);
  font-family: inherit;
  font-size: var(--vc-text-sm, 0.875rem);
  font-weight: var(--vc-font-medium, 500);
  color: var(--vc-text-secondary, #6b7280);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--vc-transition-fast, 150ms ease),
              color var(--vc-transition-fast, 150ms ease);
}
.vc-dropdown-item:hover,
.vc-dropdown-item:focus-visible {
  background: var(--vc-bg-elevated, #f9fafb);
  color: var(--vc-text-primary, #111827);
  outline: none;
}
.vc-dropdown-item.is-active {
  background: var(--vc-primary-tint, #f5f3ff);
  color: var(--vc-primary, #7c3aed);
  font-weight: var(--vc-font-semibold, 600);
}
.vc-dropdown-item.is-danger { color: var(--vc-danger, #dc2626); }
.vc-dropdown-item.is-danger:hover { background: var(--vc-danger-bg, #fee2e2); color: var(--vc-danger, #dc2626); }
.vc-dropdown-item .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }

/* Section divider + label inside a menu */
.vc-dropdown-divider { height: 1px; margin: var(--vc-space-1, 0.25rem) 0; background: var(--vc-border-subtle, #f3f4f6); }
.vc-dropdown-label-sm {
  padding: var(--vc-space-2, 0.5rem) var(--vc-space-3, 0.75rem) var(--vc-space-1, 0.25rem);
  font-size: var(--vc-text-xs, 0.75rem);
  font-weight: var(--vc-font-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--vc-tracking-wider, 0.05em);
  color: var(--vc-text-muted, #9ca3af);
}
/* Optional search row pinned at the top of a searchable menu */
.vc-dropdown-search { padding: var(--vc-space-2, 0.5rem); border-bottom: 1px solid var(--vc-border-subtle, #f3f4f6); margin-bottom: var(--vc-space-1, 0.25rem); }
/* Searchable filter: items hidden by the filter; no-data row shown only when empty */
.vc-dropdown-item.is-hidden { display: none; }
.vc-dropdown-nodata { display: none; padding: var(--vc-space-3, 0.75rem); font-size: var(--vc-text-sm, 0.875rem); color: var(--vc-text-muted, #9ca3af); text-align: center; }
.vc-dropdown.is-empty .vc-dropdown-nodata { display: block; }

/* ============================================================================
 * BAR-WAVE SPINNER — .vc-bars  (+ loading-button pattern)
 * ============================================================================
 * Vercaa-tuned port of the SpinKit "stretchdelay" wave (the loading animation
 * lagom/WHMCS uses on the domain "Check" button). 5 vertical bars ripple up and
 * down in a staggered wave. Bars use currentColor, so on a .vc-btn they inherit
 * the button's text color automatically (white on accent/primary/danger).
 *
 *   <span class="vc-bars" role="status" aria-label="Loading">
 *     <span class="vc-bars__bar"></span> × 5
 *   </span>
 *
 * Sizes: --sm / --lg. Color override: --vc-bars-color (defaults to currentColor).
 * ============================================================================ */
.vc-bars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 1rem;
  color: var(--vc-bars-color, currentColor);
  vertical-align: middle;
}
.vc-bars__bar {
  width: 3px;
  height: 100%;
  background: currentColor;
  border-radius: 2px;
  transform: scaleY(0.4);
  animation: vc-bars-stretch 1.2s ease-in-out infinite;
}
.vc-bars__bar:nth-child(1) { animation-delay: 0s; }
.vc-bars__bar:nth-child(2) { animation-delay: -1.1s; }
.vc-bars__bar:nth-child(3) { animation-delay: -1.0s; }
.vc-bars__bar:nth-child(4) { animation-delay: -0.9s; }
.vc-bars__bar:nth-child(5) { animation-delay: -0.8s; }
.vc-bars--sm { height: 0.75rem; gap: 1.5px; }
.vc-bars--sm .vc-bars__bar { width: 2px; }
.vc-bars--lg { height: 1.25rem; gap: 3px; }
.vc-bars--lg .vc-bars__bar { width: 4px; }

@keyframes vc-bars-stretch {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20%           { transform: scaleY(1);   }
}
/* Respect reduced-motion: hold bars at a calm mid-height, no animation. */
@media (prefers-reduced-motion: reduce) {
  .vc-bars__bar { animation: none; transform: scaleY(0.7); }
}

/* ── Loading button ────────────────────────────────────────────────────────
 * Add .is-loading to any .vc-btn that contains a .vc-btn__label (the text) and
 * a .vc-btn__spinner (holding a .vc-bars). The label is hidden via visibility
 * (width preserved — no layout jump) and the spinner overlays it, centered.
 * JS just toggles .is-loading (or window.vcSetLoading(btn, true/false)). */
.vc-btn.is-loading { position: relative; pointer-events: none; }
.vc-btn.is-loading .vc-btn__label { visibility: hidden; }
.vc-btn__spinner {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}
.vc-btn.is-loading .vc-btn__spinner { display: flex; }

/* Bridge for the cart's existing search-button loader contract (ZERO JS edits).
 * During a domain lookup the search/transfer button enters loading via THREE
 * pre-existing signals we can key off without touching order.js:
 *   1. order.js sets the label span .invisible (visibility:hidden)
 *   2. order.js disables the button ([disabled]) for the lookup duration
 *   3. vc-config-widgets.js adds .is-searching on submit
 * Any of them reveals our .vc-btn__spinner (.vc-bars wave). Spinner internals
 * use non-<span> tags so order.js's `.find('span').addClass('invisible')` can't
 * hide the bars. The .vcpd-search-btn alias matches the cart's class so the old
 * circular-spinner rules in cart.min.css are superseded (flex wins inline-block
 * here as unlayered base.css beats the layered cart sheet). */
.vc-btn:has(.vc-btn__label.invisible),
.vc-btn.is-searching,
.vc-btn:disabled:has(.vc-btn__spinner) {
  position: relative;
  pointer-events: none;
}
.vc-btn:has(.vc-btn__label.invisible) .vc-btn__spinner,
.vc-btn.is-searching .vc-btn__spinner,
.vc-btn:disabled:has(.vc-btn__spinner) .vc-btn__spinner {
  display: flex;
}
/* When loading via the cart signals, also hide the label (no layout jump). */
.vc-btn.is-searching .vc-btn__label,
.vc-btn:disabled:has(.vc-btn__spinner) .vc-btn__label { visibility: hidden; }

/* Animated hero / orbs */
.glass-hero { background: linear-gradient(135deg, #7C3AED 0%, #7C3AED 100%); position: relative; overflow: hidden; }
.glass-hero::before {
  content: ""; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}
.node-orb { filter: drop-shadow(0 0 20px rgba(255,255,255,0.4)); }
.orb-blur { filter: blur(80px); opacity: 0.15; }
.orb-float { animation: float 6s ease-in-out infinite; }
.synapse-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear forwards infinite; }
.gauge-ring { transition: stroke-dashoffset 0.5s ease; }

/* Code snippet + swatch (design-system showcase) */
pre.snippet {
  background:#0f172a; color:#e2e8f0; padding:1rem 1.25rem; border-radius:0.75rem;
  font-size:0.78rem; line-height:1.5; overflow-x:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space:pre;
}
.dark pre.snippet { background:#020617; border:1px solid #1e293b; }
.swatch { aspect-ratio: 1.6 / 1; }
section { scroll-margin-top: 96px; }

/* Custom scrollbars */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background:#ece6f4; border-radius:10px; }
.template-scroll::-webkit-scrollbar { height: 6px; }
.template-scroll::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:3px; }
.template-scroll::-webkit-scrollbar-track { background: transparent; }

/* Range slider thumb/track */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; height:20px; width:20px; border-radius:50%;
  background:#7C3AED; cursor:pointer; margin-top:-8px; box-shadow:0 0 10px rgba(168,85,247,0.5);
}
input[type=range]::-webkit-slider-runnable-track {
  width:100%; height:4px; cursor:pointer; background:#e5e7eb; border-radius:2px;
}


/* ── Shared keyframes (referenced by effects above) ── */
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes float  { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } }
@keyframes dash   { to { stroke-dashoffset: 0; } }


/* ==== PAGE: 2b. custom.css (legacy master, 2489L) ==== */
/*
 * Vercaa — Master Stylesheet (custom.css)
 * ========================================
 * Auto-loaded by templates/vercaa/includes/head.tpl via the WHMCS
 * {assetExists file="custom.css"} hook. No head.tpl edits required.
 *
 * SECTION ORDER (preserve — cascade depends on it):
 *   1. TOKENS         — CSS custom properties (design system)
 *   2. BASE           — resets, body, typography defaults
 *   3. UTILITIES      — .vc-container, .vc-grid, .vc-stack
 *   4. COMPONENTS     — .vc-btn, .vc-card, .vc-input, .vc-modal
 *   5. LAYOUT         — .vc-shell-public, .vc-shell-client, sidebar, header
 *   6. MARKETING      — .vc-hero, .vc-feature, .vc-plan, .vc-faq, .vc-cta
 *   7. CLIENTAREA     — .vc-stat, .vc-list, .vc-empty, .vc-status
 *   8. CHECKOUT       — .vc-search, .domain-available-container, suggestions
 *   9. OVERRIDES      — Bootstrap class compat (.alert, .modal, .pagination,
 *                      .form-control, .table). MUST stay last so it wins.
 *
 * Two additional CSS files are loaded conditionally and NOT merged here:
 *   - css/vercaa/lagom-header.css  → marketing pages only ($vc_marketing_page)
 *   - css/vercaa/pages/<name>.css  → loaded if file matches $templatefile
 *
 * History: this file used to import nine numbered sub-files. They were
 * inlined 2026-05-20 so a junior dev can read one file end-to-end.
 *
 * Asset architecture: docs/26-asset-restructure-plan.md (current).
 */

/*
 * Vercaa Design Tokens
 * ====================
 * The single source of truth for colors, typography, spacing, shadows, etc.
 * Every other CSS file in this directory references these custom properties.
 * Never use raw hex values in component CSS — always reference a token.
 *
 * Locked: 2026-04-14. Source design system: most-common values across the
 * (now-removed) vercaa-ui-design mockups, ported into the live templates.
 *
 * NOTE (updated 2026-05-27 / docs/26 — Tailwind removed):
 * The :root design tokens (--vc-primary etc.) now live in
 * templates/vercaa/css/vercaa/tokens.css (plain CSS vars, no build step).
 * The rules below read those vars and keep working unchanged. Edit tokens
 * in tokens.css directly. (Was previously emitted by the Tailwind build.)
 */

/*
 * Vercaa Base — resets, typography defaults, body
 * ================================================
 * Modern reset (modern-normalize style) + opinionated vercaa defaults.
 * Loaded after Bootstrap so we override BS4 base where needed.
 *
 * Wrapped in .vc-page so we don't fight Bootstrap on legacy unmigrated
 * pages — only pages that opt in via a .vc-page wrapper get our base styles.
 * BUT body-level rules (font, background) apply globally.
 */

/* ============================================================
 * Box-sizing reset (universal — safe everywhere)
 * ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ============================================================
 * Body — applies to every page
 * ============================================================ */
body {
    margin: 0;
    font-family: var(--vc-font-sans);
    font-size: var(--vc-text-base);
    font-weight: var(--vc-font-normal);
    line-height: var(--vc-leading-normal);
    color: var(--vc-text-primary);
    background-color: var(--vc-bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================================
 * .vc-page scope — for pages that opt in to vercaa typography
 * ============================================================ */
.vc-page {
    color: var(--vc-text-primary);
}

.vc-page h1, .vc-page h2, .vc-page h3,
.vc-page h4, .vc-page h5, .vc-page h6 {
    font-family: var(--vc-font-display);
    font-weight: var(--vc-font-bold);
    line-height: var(--vc-leading-tight);
    color: var(--vc-text-primary);
    margin: 0 0 var(--vc-space-4) 0;
}

.vc-page h1 { font-size: var(--vc-text-4xl); letter-spacing: var(--vc-tracking-tight); }
.vc-page h2 { font-size: var(--vc-text-3xl); letter-spacing: var(--vc-tracking-tight); }
.vc-page h3 { font-size: var(--vc-text-2xl); }
.vc-page h4 { font-size: var(--vc-text-xl); }
.vc-page h5 { font-size: var(--vc-text-lg); }
.vc-page h6 { font-size: var(--vc-text-base); font-weight: var(--vc-font-semibold); }

.vc-page p {
    margin: 0 0 var(--vc-space-4) 0;
    color: var(--vc-text-secondary);
    line-height: var(--vc-leading-relaxed);
}

.vc-page p:last-child { margin-bottom: 0; }

.vc-page a:not(.vc-btn):not(.vh-btn):not(.vh-mega-item):not(.vh-mobile-nav-item):not(.vh-mobile-sub-item):not(.vh-mobile-login):not(.vh-mobile-action):not(.vh-logo):not(.btn) {
    color: var(--vc-primary);
    text-decoration: none;
    transition: color var(--vc-transition-fast);
}
.vc-page a:not(.vc-btn):not(.vh-btn):not(.vh-mega-item):not(.vh-mobile-nav-item):not(.vh-mobile-sub-item):not(.vh-mobile-login):not(.vh-mobile-action):not(.vh-logo):not(.btn):hover {
    color: var(--vc-primary-dark);
    text-decoration: underline;
}

.vc-page strong, .vc-page b {
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
}

.vc-page small {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
}

.vc-page code, .vc-page kbd, .vc-page samp, .vc-page pre {
    font-family: var(--vc-font-mono);
    font-size: 0.9em;
}

.vc-page code {
    background: var(--vc-border-subtle);
    padding: 0.125em 0.375em;
    border-radius: var(--vc-radius-sm);
    color: var(--vc-text-primary);
}

.vc-page hr {
    border: none;
    border-top: 1px solid var(--vc-border-default);
    margin: var(--vc-space-8) 0;
}

.vc-page ul, .vc-page ol {
    margin: 0 0 var(--vc-space-4) 0;
    padding-left: var(--vc-space-6);
    color: var(--vc-text-secondary);
}

.vc-page ul li, .vc-page ol li {
    margin-bottom: var(--vc-space-1);
    line-height: var(--vc-leading-relaxed);
}

/* Images responsive by default */
.vc-page img, .vc-page svg, .vc-page video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Forms — remove WebKit yellow autofill nonsense */
.vc-page input:-webkit-autofill,
.vc-page input:-webkit-autofill:hover,
.vc-page input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--vc-bg-surface) inset;
    -webkit-text-fill-color: var(--vc-text-primary);
}

/* Selection */
::selection {
    background: var(--vc-primary);
    color: var(--vc-text-inverse);
}

/* Focus-visible — globally consistent keyboard focus ring */
.vc-page :focus-visible {
    outline: 2px solid var(--vc-primary);
    outline-offset: 2px;
    border-radius: var(--vc-radius-sm);
}

/* ============================================================
 * Material Symbols Outlined — icon font base class
 * Loaded globally via head.tpl. Rule is scoped loosely so it
 * works both inside and outside .vc-page wrappers.
 * ============================================================ */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/*
 * Vercaa Utilities — minimal semantic layout helpers
 * ===================================================
 * These are NOT Tailwind utilities. They are a small set of named layout
 * primitives that solve recurring page-layout needs without forcing us to
 * write a one-off class for every container/grid/flex.
 *
 * Naming convention: .vc-{primitive}, no nesting, no responsive variants
 * baked into class names. Responsive behavior lives in @media inside the
 * primitive itself or in component CSS.
 */

/* ============================================================
 * .vc-container — page-width wrapper
 * ============================================================ */
.vc-container {
    width: 100%;
    max-width: var(--vc-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--vc-space-4);
    padding-right: var(--vc-space-4);
}
@media (min-width: 640px) {
    .vc-container { padding-left: var(--vc-space-6); padding-right: var(--vc-space-6); }
}
@media (min-width: 1024px) {
    .vc-container { padding-left: var(--vc-space-8); padding-right: var(--vc-space-8); }
}

.vc-container-narrow {
    max-width: var(--vc-container-narrow);
}


/* ============================================================
 * .vc-stack — vertical rhythm (children get top margin = gap)
 * Use: <div class="vc-stack" style="--gap: 1rem;">
 * ============================================================ */
.vc-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap, var(--vc-space-4));
}

.vc-stack-sm { --gap: var(--vc-space-2); }
.vc-stack-md { --gap: var(--vc-space-4); }
.vc-stack-lg { --gap: var(--vc-space-6); }
.vc-stack-xl { --gap: var(--vc-space-8); }


/* ============================================================
 * .vc-cluster — horizontal flex with wrapping
 * Use for: nav links, tag lists, button groups
 * ============================================================ */
.vc-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap, var(--vc-space-3));
}

.vc-cluster-between {
    justify-content: space-between;
}
.vc-cluster-center {
    justify-content: center;
}
.vc-cluster-end {
    justify-content: flex-end;
}


/* ============================================================
 * .vc-grid — responsive auto-fit grid
 * Use: <div class="vc-grid" style="--min: 16rem;">
 * Children auto-flow into as many columns as fit, min width = --min.
 * ============================================================ */
.vc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min, 16rem), 1fr));
    gap: var(--gap, var(--vc-space-6));
}

.vc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 768px) {
    .vc-grid-2, .vc-grid-3, .vc-grid-4 {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .vc-grid-3, .vc-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================================
 * .vc-section — vertical page section with default padding
 * ============================================================ */
.vc-section {
    padding-top: var(--vc-space-16);
    padding-bottom: var(--vc-space-16);
}
@media (min-width: 1024px) {
    .vc-section {
        padding-top: var(--vc-space-24);
        padding-bottom: var(--vc-space-24);
    }
}

.vc-section-sm {
    padding-top: var(--vc-space-8);
    padding-bottom: var(--vc-space-8);
}


/* ============================================================
 * .vc-center — center any content (block + inline)
 * ============================================================ */
.vc-center {
    text-align: center;
}
.vc-center-block {
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
 * .vc-divider — semantic horizontal separator
 * ============================================================ */
.vc-divider {
    height: 1px;
    background: var(--vc-border-default);
    border: none;
    margin: var(--vc-space-6) 0;
}


/* ============================================================
 * Visibility helpers
 * ============================================================ */
.vc-hidden { display: none !important; }
.vc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .vc-hidden-mobile { display: none !important; }
}
@media (min-width: 768px) {
    .vc-hidden-desktop { display: none !important; }
}
/*
 * Vercaa Components — design-system primitives
 * =============================================
 * Reusable visual building blocks. Every page should use these instead of
 * defining one-off styles. Add new components here as needed; never inline.
 */


/* ============================================================
 * BUTTONS — .vc-btn
 * Variants: -primary (default solid), -secondary (outline),
 *           -ghost (transparent), -danger
 * Sizes:    -sm, -lg
 * ============================================================ */

.vc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vc-space-2);
    padding: var(--vc-space-3) var(--vc-space-5);
    background: var(--vc-primary);
    color: var(--vc-text-inverse);
    border: 1px solid var(--vc-primary);
    border-radius: var(--vc-radius-md);
    font-family: var(--vc-font-sans);
    font-size: var(--vc-text-sm);
    font-weight: var(--vc-font-medium);
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--vc-transition-base),
                border-color var(--vc-transition-base),
                color var(--vc-transition-base),
                transform var(--vc-transition-fast),
                box-shadow var(--vc-transition-base);
    white-space: nowrap;
    -webkit-appearance: none;
            appearance: none;
    box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.25);
}

.vc-btn:hover {
    background: var(--vc-primary-dark);
    border-color: var(--vc-primary-dark);
    color: var(--vc-text-inverse);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3);
    text-decoration: none;
}

.vc-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px -1px rgba(124, 58, 237, 0.2);
}

.vc-btn:disabled,
.vc-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.vc-btn:focus-visible {
    outline: 2px solid var(--vc-primary);
    outline-offset: 2px;
}

/* Variants */
.vc-btn-secondary {
    background: transparent;
    color: var(--vc-primary);
    border-color: var(--vc-primary);
    box-shadow: none;
}
.vc-btn-secondary:hover {
    background: var(--vc-primary);
    color: var(--vc-text-inverse);
    border-color: var(--vc-primary);
}

.vc-btn-ghost {
    background: transparent;
    color: var(--vc-text-primary);
    border-color: transparent;
    box-shadow: none;
}
.vc-btn-ghost:hover {
    background: var(--vc-bg-elevated);
    color: var(--vc-primary);
    border-color: transparent;
}

.vc-btn-danger {
    background: var(--vc-danger);
    border-color: var(--vc-danger);
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.25);
}
.vc-btn-danger:hover {
    background: #B91C1C;
    border-color: #B91C1C;
}

/* Sizes */
.vc-btn-sm {
    padding: var(--vc-space-2) var(--vc-space-3);
    font-size: var(--vc-text-xs);
}
.vc-btn-lg {
    padding: var(--vc-space-4) var(--vc-space-8);
    font-size: var(--vc-text-base);
    border-radius: var(--vc-radius-lg);
}

/* Full-width */
.vc-btn-block {
    width: 100%;
}


/* ============================================================
 * INPUTS — .vc-input, .vc-textarea, .vc-select, .vc-label
 * ============================================================ */

.vc-input,
.vc-textarea,
.vc-select {
    display: block;
    width: 100%;
    padding: var(--vc-space-3) var(--vc-space-4);
    background: var(--vc-bg-surface);
    color: var(--vc-text-primary);
    border: 1px solid var(--vc-border-strong);
    border-radius: var(--vc-radius-md);
    font-family: var(--vc-font-sans);
    font-size: var(--vc-text-base);
    line-height: var(--vc-leading-normal);
    transition: border-color var(--vc-transition-base),
                box-shadow var(--vc-transition-base);
    -webkit-appearance: none;
            appearance: none;
    box-shadow: var(--vc-shadow-sm);
}

.vc-input::placeholder,
.vc-textarea::placeholder {
    color: var(--vc-text-muted);
}

.vc-input:focus,
.vc-textarea:focus,
.vc-select:focus {
    outline: none;
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.vc-input:disabled,
.vc-textarea:disabled,
.vc-select:disabled {
    background: var(--vc-bg-elevated);
    color: var(--vc-text-muted);
    cursor: not-allowed;
}

.vc-input.is-invalid,
.vc-textarea.is-invalid,
.vc-select.is-invalid {
    border-color: var(--vc-danger);
}
.vc-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.vc-textarea {
    min-height: 6rem;
    resize: vertical;
}

.vc-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--vc-space-3) center;
    background-size: 1.25rem;
    padding-right: var(--vc-space-10);
}

.vc-label {
    display: block;
    margin-bottom: var(--vc-space-2);
    font-size: var(--vc-text-sm);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
}

.vc-form-group {
    margin-bottom: var(--vc-space-5);
}

.vc-form-help {
    display: block;
    margin-top: var(--vc-space-1);
    font-size: var(--vc-text-xs);
    color: var(--vc-text-muted);
}

.vc-form-error {
    display: block;
    margin-top: var(--vc-space-1);
    font-size: var(--vc-text-xs);
    color: var(--vc-danger);
    font-weight: var(--vc-font-medium);
}

/* Checkbox + radio — native, restyled */
.vc-checkbox,
.vc-radio {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid var(--vc-border-strong);
    background: var(--vc-bg-surface);
    cursor: pointer;
    transition: border-color var(--vc-transition-base),
                background var(--vc-transition-base);
    flex-shrink: 0;
    display: inline-grid;
    place-content: center;
}

.vc-checkbox {
    border-radius: var(--vc-radius-sm);
}
.vc-radio {
    border-radius: var(--vc-radius-full);
}

.vc-checkbox:checked,
.vc-radio:checked {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
}

.vc-checkbox:checked::before {
    content: '';
    width: 0.625rem;
    height: 0.625rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.vc-radio:checked::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    background: white;
    border-radius: var(--vc-radius-full);
}

.vc-checkbox:focus-visible,
.vc-radio:focus-visible {
    outline: 2px solid var(--vc-primary);
    outline-offset: 2px;
}


/* ============================================================
 * CARDS — .vc-card
 * ============================================================ */

.vc-card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
    box-shadow: var(--vc-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--vc-transition-base),
                transform var(--vc-transition-base),
                border-color var(--vc-transition-base);
}

.vc-card-hover:hover {
    box-shadow: var(--vc-shadow-lg);
    transform: translateY(-2px);
    border-color: var(--vc-border-strong);
}

.vc-card-header {
    padding: var(--vc-space-5) var(--vc-space-6);
    border-bottom: 1px solid var(--vc-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-4);
}

.vc-card-title {
    margin: 0;
    font-size: var(--vc-text-lg);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
}

.vc-card-body {
    padding: var(--vc-space-6);
}

.vc-card-footer {
    padding: var(--vc-space-4) var(--vc-space-6);
    border-top: 1px solid var(--vc-border-subtle);
    background: var(--vc-bg-elevated);
}

/* Card variant: glass — used for hero search panels */
.vc-card-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: var(--vc-shadow-xl);
    border-radius: var(--vc-radius-2xl);
}


/* ============================================================
 * BADGES — .vc-badge (status pills, tags)
 * ============================================================ */

.vc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-1);
    padding: var(--vc-space-1) var(--vc-space-3);
    background: var(--vc-bg-elevated);
    color: var(--vc-text-secondary);
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: var(--vc-font-semibold);
    line-height: 1;
    white-space: nowrap;
}

.vc-badge-primary { background: var(--vc-primary-tint); color: var(--vc-primary); }
.vc-badge-success { background: var(--vc-success-bg); color: var(--vc-success); }
.vc-badge-warning { background: var(--vc-warning-bg); color: var(--vc-warning); }
.vc-badge-danger  { background: var(--vc-danger-bg);  color: var(--vc-danger); }
.vc-badge-info    { background: var(--vc-info-bg);    color: var(--vc-info); }


/* ============================================================
 * ALERTS — .vc-alert (full-width status banners)
 * ============================================================ */

.vc-alert {
    padding: var(--vc-space-4) var(--vc-space-5);
    border-radius: var(--vc-radius-lg);
    border: 1px solid var(--vc-border-default);
    background: var(--vc-bg-elevated);
    color: var(--vc-text-primary);
    font-size: var(--vc-text-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-3);
    margin-bottom: var(--vc-space-4);
}

.vc-alert-success {
    background: var(--vc-success-bg);
    border-color: var(--vc-success);
    color: #14532D;
}
.vc-alert-warning {
    background: var(--vc-warning-bg);
    border-color: var(--vc-warning);
    color: #78350F;
}
.vc-alert-danger {
    background: var(--vc-danger-bg);
    border-color: var(--vc-danger);
    color: #7F1D1D;
}
.vc-alert-info {
    background: var(--vc-info-bg);
    border-color: var(--vc-info);
    color: #1E3A8A;
}


/* ============================================================
 * TABLES — .vc-table
 * ============================================================ */

.vc-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--vc-bg-surface);
    font-size: var(--vc-text-sm);
}

.vc-table thead th {
    text-align: left;
    padding: var(--vc-space-3) var(--vc-space-4);
    background: var(--vc-bg-elevated);
    color: var(--vc-text-secondary);
    font-weight: var(--vc-font-semibold);
    font-size: var(--vc-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider);
    border-bottom: 1px solid var(--vc-border-default);
    white-space: nowrap;
}

.vc-table tbody td {
    padding: var(--vc-space-4);
    color: var(--vc-text-primary);
    border-bottom: 1px solid var(--vc-border-subtle);
    vertical-align: middle;
}

.vc-table tbody tr:last-child td {
    border-bottom: none;
}

.vc-table tbody tr:hover {
    background: var(--vc-bg-elevated);
}

.vc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
    background: var(--vc-bg-surface);
}


/* ============================================================
 * MODALS — .vc-modal
 * Note: WHMCS-injected modals use Bootstrap class names — those are
 * styled in 09-overrides.css. .vc-modal is for our own modals only.
 * ============================================================ */

.vc-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(4px);
    z-index: var(--vc-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--vc-space-4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--vc-transition-base);
}
.vc-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.vc-modal {
    background: var(--vc-bg-surface);
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-2xl);
    max-width: 32rem;
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    transform: scale(0.96);
    transition: transform var(--vc-transition-base);
}
.vc-modal-backdrop.is-open .vc-modal {
    transform: scale(1);
}

.vc-modal-header {
    padding: var(--vc-space-5) var(--vc-space-6);
    border-bottom: 1px solid var(--vc-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vc-modal-title {
    margin: 0;
    font-size: var(--vc-text-lg);
    font-weight: var(--vc-font-semibold);
}

.vc-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--vc-text-muted);
    padding: var(--vc-space-1);
    border-radius: var(--vc-radius-sm);
    line-height: 1;
}
.vc-modal-close:hover {
    color: var(--vc-text-primary);
    background: var(--vc-bg-elevated);
}

.vc-modal-body {
    padding: var(--vc-space-6);
}

.vc-modal-footer {
    padding: var(--vc-space-4) var(--vc-space-6);
    border-top: 1px solid var(--vc-border-subtle);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--vc-space-3);
}


/* ============================================================
 * AVATARS / ICONS
 * ============================================================ */

.vc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    border-radius: var(--vc-radius-full);
    font-weight: var(--vc-font-semibold);
    font-size: var(--vc-text-sm);
    flex-shrink: 0;
}
.vc-avatar-sm { width: 2rem; height: 2rem; font-size: var(--vc-text-xs); }
.vc-avatar-lg { width: 3.5rem; height: 3.5rem; font-size: var(--vc-text-base); }


/* ============================================================
 * SPINNER / LOADER
 * ============================================================ */

.vc-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--vc-radius-full);
    animation: vc-spin 0.6s linear infinite;
}
@keyframes vc-spin {
    to { transform: rotate(360deg); }
}
/*
 * Vercaa Layout — header, footer, sidebar, page shells
 * =====================================================
 * Structural CSS for the chrome around page content. Two main shells:
 *   .vc-shell-public   — marketing/public pages (top nav + content + footer)
 *   .vc-shell-client   — logged-in client area (sidebar + main + top header)
 */


/* ============================================================
 * PUBLIC SHELL — marketing pages
 * ============================================================ */

.vc-shell-public {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--vc-bg-base);
}

.vc-public-header {
    position: sticky;
    top: 0;
    z-index: var(--vc-z-sticky);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--vc-border-subtle);
}

.vc-public-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--vc-header-height);
    max-width: var(--vc-container-max);
    margin: 0 auto;
    padding: 0 var(--vc-space-6);
}

.vc-brand {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2);
    font-size: var(--vc-text-xl);
    font-weight: var(--vc-font-bold);
    color: var(--vc-text-primary);
    text-decoration: none;
}
.vc-brand:hover {
    color: var(--vc-primary);
    text-decoration: none;
}

.vc-brand-mark {
    width: 2rem;
    height: 2rem;
    background: var(--vc-primary);
    color: var(--vc-text-inverse);
    border-radius: var(--vc-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--vc-font-bold);
    box-shadow: var(--vc-shadow-glow);
}

.vc-public-nav {
    display: flex;
    align-items: center;
    gap: var(--vc-space-8);
}

.vc-public-nav a {
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    font-weight: var(--vc-font-medium);
    text-decoration: none;
    transition: color var(--vc-transition-fast);
}
.vc-public-nav a:hover,
.vc-public-nav a.is-active {
    color: var(--vc-primary);
}

.vc-public-actions {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3);
}

@media (max-width: 768px) {
    .vc-public-nav { display: none; }
    .vc-public-header-inner { padding: 0 var(--vc-space-4); }
}


/* Main content area */
.vc-main {
    flex: 1;
}


/* Footer */
.vc-public-footer {
    background: #0F172A;
    color: #94A3B8;
    padding: var(--vc-space-16) 0 var(--vc-space-8);
    margin-top: auto;
}

.vc-public-footer-inner {
    max-width: var(--vc-container-max);
    margin: 0 auto;
    padding: 0 var(--vc-space-6);
}

.vc-public-footer h4 {
    color: var(--vc-text-inverse);
    font-size: var(--vc-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider);
    margin-bottom: var(--vc-space-4);
    font-weight: var(--vc-font-semibold);
}

.vc-public-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.vc-public-footer li {
    margin-bottom: var(--vc-space-2);
}
.vc-public-footer a {
    color: #94A3B8;
    font-size: var(--vc-text-sm);
    text-decoration: none;
    transition: color var(--vc-transition-fast);
}
.vc-public-footer a:hover {
    color: var(--vc-text-inverse);
}

.vc-public-footer-bottom {
    margin-top: var(--vc-space-12);
    padding-top: var(--vc-space-6);
    border-top: 1px solid #1E293B;
    text-align: center;
    font-size: var(--vc-text-xs);
    color: #64748B;
}


/* ============================================================
 * CLIENT SHELL — logged-in pages with sidebar
 * ============================================================ */

.vc-shell-client {
    min-height: 100vh;
    display: flex;
    background: var(--vc-bg-base);
}

/* Sidebar */
.vc-sidebar {
    width: var(--vc-sidebar-width);
    background: var(--vc-bg-surface);
    border-right: 1px solid var(--vc-border-default);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--vc-z-sticky);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.vc-sidebar-brand {
    padding: var(--vc-space-6);
    display: flex;
    align-items: center;
    gap: var(--vc-space-3);
    border-bottom: 1px solid var(--vc-border-subtle);
}

.vc-sidebar-nav {
    flex: 1;
    padding: var(--vc-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-1);
}

.vc-sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3);
    padding: var(--vc-space-3) var(--vc-space-4);
    color: var(--vc-text-secondary);
    text-decoration: none;
    border-radius: var(--vc-radius-lg);
    font-weight: var(--vc-font-medium);
    font-size: var(--vc-text-sm);
    transition: background var(--vc-transition-fast),
                color var(--vc-transition-fast);
    position: relative;
}
.vc-sidebar-item:hover {
    background: var(--vc-bg-elevated);
    color: var(--vc-primary);
    text-decoration: none;
}
.vc-sidebar-item.is-active {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
}
.vc-sidebar-item.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.5rem;
    background: var(--vc-primary);
    border-radius: 0 var(--vc-radius-sm) var(--vc-radius-sm) 0;
}

.vc-sidebar-section-label {
    padding: var(--vc-space-3) var(--vc-space-4) var(--vc-space-1);
    font-size: var(--vc-text-xs);
    font-weight: var(--vc-font-bold);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider);
    color: var(--vc-text-muted);
}

.vc-sidebar-footer {
    padding: var(--vc-space-4);
    border-top: 1px solid var(--vc-border-subtle);
}


/* Main content area inside client shell */
.vc-client-main {
    flex: 1;
    margin-left: var(--vc-sidebar-width);
    display: flex;
    flex-direction: column;
}

.vc-client-header {
    height: var(--vc-header-height);
    background: var(--vc-bg-surface);
    border-bottom: 1px solid var(--vc-border-subtle);
    padding: 0 var(--vc-space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: var(--vc-z-sticky);
}

.vc-client-page-title {
    margin: 0;
    font-size: var(--vc-text-xl);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
}

.vc-client-content {
    flex: 1;
    padding: var(--vc-space-8);
    max-width: 100%;
}

@media (max-width: 1024px) {
    .vc-sidebar {
        transform: translateX(-100%);
        transition: transform var(--vc-transition-base);
    }
    .vc-sidebar.is-open {
        transform: translateX(0);
    }
    .vc-client-main {
        margin-left: 0;
    }
    .vc-client-content {
        padding: var(--vc-space-4);
    }
}
/*
 * Vercaa Marketing — hero, FAQ, pricing, feature grids
 * =====================================================
 * Components used only by marketing/public pages (homepage, hosting,
 * domains, knowledge base). Loaded on every page but the rules only
 * activate when the matching markup is present.
 */


/* ============================================================
 * HERO — large promotional sections
 * ============================================================ */

.vc-hero {
    position: relative;
    padding: var(--vc-space-20) var(--vc-space-4) var(--vc-space-24);
    text-align: center;
    overflow: hidden;
    background: linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

.vc-hero-inner {
    max-width: 56rem;
    margin: 0 auto;
    position: relative;
    z-index: var(--vc-z-base);
}

.vc-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-2);
    padding: var(--vc-space-2) var(--vc-space-4);
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-sm);
    font-weight: var(--vc-font-semibold);
    margin-bottom: var(--vc-space-6);
}

.vc-hero-title {
    font-size: var(--vc-text-5xl);
    font-weight: var(--vc-font-extrabold);
    line-height: var(--vc-leading-tight);
    letter-spacing: var(--vc-tracking-tight);
    color: var(--vc-text-primary);
    margin: 0 0 var(--vc-space-6);
}

@media (min-width: 1024px) {
    .vc-hero-title { font-size: var(--vc-text-6xl); }
}

.vc-hero-subtitle {
    font-size: var(--vc-text-xl);
    color: var(--vc-text-secondary);
    line-height: var(--vc-leading-relaxed);
    max-width: 42rem;
    margin: 0 auto var(--vc-space-10);
}

.vc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--vc-space-4);
}

/* Decorative blob backdrop for hero */
.vc-hero-blob {
    position: absolute;
    border-radius: var(--vc-radius-full);
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}
.vc-hero-blob-purple {
    width: 24rem;
    height: 24rem;
    background: var(--vc-primary-light);
    top: -4rem;
    left: 25%;
}
.vc-hero-blob-blue {
    width: 24rem;
    height: 24rem;
    background: #BFDBFE;
    top: -4rem;
    right: 25%;
}


/* ============================================================
 * FEATURE GRID — three-up icon + title + text cards
 * ============================================================ */

.vc-feature {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    padding: var(--vc-space-8);
    text-align: left;
    transition: transform var(--vc-transition-base),
                box-shadow var(--vc-transition-base),
                border-color var(--vc-transition-base);
}
.vc-feature:hover {
    transform: translateY(-2px);
    box-shadow: var(--vc-shadow-lg);
    border-color: var(--vc-border-strong);
}

.vc-feature-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    border-radius: var(--vc-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--vc-text-2xl);
    margin-bottom: var(--vc-space-5);
}

.vc-feature-title {
    margin: 0 0 var(--vc-space-3);
    font-size: var(--vc-text-xl);
    font-weight: var(--vc-font-bold);
    color: var(--vc-text-primary);
}

.vc-feature-text {
    margin: 0;
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    line-height: var(--vc-leading-relaxed);
}


/* ============================================================
 * PRICING TABLE — plan cards
 * ============================================================ */

.vc-plan {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    padding: var(--vc-space-8);
    display: flex;
    flex-direction: column;
    transition: transform var(--vc-transition-base),
                box-shadow var(--vc-transition-base),
                border-color var(--vc-transition-base);
}
.vc-plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--vc-shadow-xl);
    border-color: var(--vc-primary);
}

.vc-plan-featured {
    border-color: var(--vc-primary);
    box-shadow: var(--vc-shadow-glow);
    transform: scale(1.02);
}

.vc-plan-name {
    font-size: var(--vc-text-lg);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-secondary);
    margin: 0 0 var(--vc-space-2);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider);
}

.vc-plan-price {
    font-size: var(--vc-text-5xl);
    font-weight: var(--vc-font-extrabold);
    color: var(--vc-text-primary);
    line-height: 1;
    margin: 0 0 var(--vc-space-2);
}

.vc-plan-price small {
    font-size: var(--vc-text-base);
    color: var(--vc-text-muted);
    font-weight: var(--vc-font-medium);
}

.vc-plan-tagline {
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    margin: 0 0 var(--vc-space-6);
}

.vc-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--vc-space-8);
    flex: 1;
}
.vc-plan-features li {
    padding: var(--vc-space-2) 0;
    color: var(--vc-text-primary);
    font-size: var(--vc-text-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-2);
}
.vc-plan-features li::before {
    content: '✓';
    color: var(--vc-success);
    font-weight: var(--vc-font-bold);
    flex-shrink: 0;
}


/* ============================================================
 * FAQ — accordion
 * ============================================================ */

.vc-faq {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    overflow: hidden;
    box-shadow: var(--vc-shadow-sm);
}

.vc-faq-item {
    border-bottom: 1px solid var(--vc-border-subtle);
}
.vc-faq-item:last-child {
    border-bottom: none;
}

.vc-faq-question {
    padding: var(--vc-space-5) var(--vc-space-6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
    list-style: none;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-size: var(--vc-text-base);
    font-family: inherit;
    transition: background var(--vc-transition-fast);
}
.vc-faq-question::-webkit-details-marker { display: none; }
.vc-faq-question:hover {
    background: var(--vc-bg-elevated);
}

.vc-faq-question::after {
    content: '+';
    font-size: var(--vc-text-2xl);
    color: var(--vc-text-muted);
    font-weight: var(--vc-font-normal);
    line-height: 1;
    transition: transform var(--vc-transition-base);
}

.vc-faq-item[open] .vc-faq-question::after {
    content: '−';
    color: var(--vc-primary);
}

.vc-faq-answer {
    padding: 0 var(--vc-space-6) var(--vc-space-5);
    color: var(--vc-text-secondary);
    line-height: var(--vc-leading-relaxed);
    font-size: var(--vc-text-sm);
}


/* ============================================================
 * CTA SECTION — final call-to-action banner
 * ============================================================ */

.vc-cta {
    text-align: center;
    padding: var(--vc-space-20) var(--vc-space-4);
    background: linear-gradient(135deg, var(--vc-primary) 0%, #5B21B6 100%);
    color: var(--vc-text-inverse);
    border-radius: var(--vc-radius-2xl);
    margin: var(--vc-space-12) 0;
}

.vc-cta-title {
    font-size: var(--vc-text-4xl);
    font-weight: var(--vc-font-extrabold);
    color: var(--vc-text-inverse);
    margin: 0 0 var(--vc-space-4);
}

.vc-cta-text {
    font-size: var(--vc-text-lg);
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 var(--vc-space-8);
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
}

.vc-cta .vc-btn {
    background: var(--vc-bg-surface);
    color: var(--vc-primary);
    border-color: var(--vc-bg-surface);
}
.vc-cta .vc-btn:hover {
    background: var(--vc-primary-tint);
    color: var(--vc-primary-dark);
    border-color: var(--vc-primary-tint);
}
/*
 * Vercaa Client Area — dashboard tiles, lists, stats
 * ===================================================
 * Components used in logged-in client area pages: dashboard, services
 * list, billing, domains list, etc.
 */


/* ============================================================
 * STAT TILE — dashboard summary cards
 * ============================================================ */

.vc-stat {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
    padding: var(--vc-space-6);
    box-shadow: var(--vc-shadow-sm);
    transition: box-shadow var(--vc-transition-base),
                transform var(--vc-transition-base);
}
.vc-stat:hover {
    box-shadow: var(--vc-shadow-md);
    transform: translateY(-1px);
}

.vc-stat-label {
    display: block;
    font-size: var(--vc-text-xs);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider);
    margin-bottom: var(--vc-space-2);
}

.vc-stat-value {
    font-size: var(--vc-text-3xl);
    font-weight: var(--vc-font-bold);
    color: var(--vc-text-primary);
    line-height: 1;
    margin-bottom: var(--vc-space-2);
}

.vc-stat-delta {
    font-size: var(--vc-text-xs);
    font-weight: var(--vc-font-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-1);
}
.vc-stat-delta.is-up { color: var(--vc-success); }
.vc-stat-delta.is-down { color: var(--vc-danger); }
.vc-stat-delta.is-neutral { color: var(--vc-text-muted); }


/* ============================================================
 * SERVICE / RESOURCE LIST — rows with icon + name + status
 * ============================================================ */

.vc-list {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
    overflow: hidden;
}

.vc-list-row {
    display: flex;
    align-items: center;
    gap: var(--vc-space-4);
    padding: var(--vc-space-4) var(--vc-space-5);
    border-bottom: 1px solid var(--vc-border-subtle);
    transition: background var(--vc-transition-fast);
}
.vc-list-row:last-child {
    border-bottom: none;
}
.vc-list-row:hover {
    background: var(--vc-bg-elevated);
}

.vc-list-row-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    border-radius: var(--vc-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vc-list-row-main {
    flex: 1;
    min-width: 0;
}

.vc-list-row-title {
    font-size: var(--vc-text-base);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
    margin: 0 0 2px;
    word-break: break-word;
}

.vc-list-row-meta {
    font-size: var(--vc-text-xs);
    color: var(--vc-text-secondary);
    margin: 0;
}

.vc-list-row-actions {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2);
    flex-shrink: 0;
}


/* ============================================================
 * EMPTY STATE — used when a list has no items
 * ============================================================ */

.vc-empty {
    text-align: center;
    padding: var(--vc-space-16) var(--vc-space-6);
    background: var(--vc-bg-surface);
    border: 2px dashed var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
}

.vc-empty-icon {
    width: 4rem;
    height: 4rem;
    background: var(--vc-bg-elevated);
    color: var(--vc-text-muted);
    border-radius: var(--vc-radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--vc-text-3xl);
    margin-bottom: var(--vc-space-4);
}

.vc-empty-title {
    font-size: var(--vc-text-xl);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
    margin: 0 0 var(--vc-space-2);
}

.vc-empty-text {
    color: var(--vc-text-secondary);
    margin: 0 0 var(--vc-space-6);
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
 * INVOICE / BILLING ROW
 * ============================================================ */

.vc-invoice-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--vc-space-4);
    align-items: center;
    padding: var(--vc-space-4) var(--vc-space-5);
    background: var(--vc-bg-surface);
    border-bottom: 1px solid var(--vc-border-subtle);
}

.vc-invoice-number {
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
}
.vc-invoice-date {
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
}
.vc-invoice-amount {
    font-weight: var(--vc-font-bold);
    color: var(--vc-text-primary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .vc-invoice-row {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
 * STATUS DOT — small colored circle next to status text
 * ============================================================ */

.vc-status {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-2);
    font-size: var(--vc-text-sm);
    font-weight: var(--vc-font-medium);
}
.vc-status::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--vc-radius-full);
    background: currentColor;
}
.vc-status-active   { color: var(--vc-success); }
.vc-status-pending  { color: var(--vc-warning); }
.vc-status-expired  { color: var(--vc-danger); }
.vc-status-inactive { color: var(--vc-text-muted); }
/*
 * Vercaa Checkout — order form, cart, domain search
 * ===================================================
 * Components used in the order form and on /domains.
 *
 * IMPORTANT: This file targets BOTH our semantic vercaa classes AND the
 * hardcoded class names that the WHMCS/lagom2 AJAX engine injects:
 *   .domain-available-container, .cong-massage, .wgs-domain-res,
 *   .add-to-cart-btn, .domain-suggestion, .domain-name-container
 * These classes come from templates/vercaa/partial/domain-search-engine.tpl
 * (forked from lagom2 in Phase 3) and CANNOT be renamed without rewriting
 * ~1000 lines of jQuery. We style them here verbatim.
 */


/* ============================================================
 * SEARCH INPUT — large pill input with embedded button
 * Used by /domains, /domain-transfer, and the order form domain step
 * ============================================================ */

.vc-search {
    position: relative;
    background: var(--vc-bg-surface);
    border: 2px solid var(--vc-border-subtle);
    border-radius: var(--vc-radius-xl);
    padding: 0;
    box-shadow: var(--vc-shadow-sm);
    transition: border-color var(--vc-transition-base),
                box-shadow var(--vc-transition-base);
}
.vc-search:focus-within {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.vc-search-icon {
    position: absolute;
    left: var(--vc-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--vc-text-muted);
    pointer-events: none;
}

.vc-search-input {
    display: block;
    width: 100%;
    padding: var(--vc-space-4) 9rem var(--vc-space-4) 3rem;
    background: transparent;
    border: none;
    font-size: var(--vc-text-lg);
    color: var(--vc-text-primary);
    line-height: var(--vc-leading-normal);
    -webkit-appearance: none;
            appearance: none;
}
.vc-search-input::placeholder {
    color: var(--vc-text-muted);
}
.vc-search-input:focus {
    outline: none;
}

.vc-search-btn {
    position: absolute;
    right: var(--vc-space-2);
    top: 50%;
    transform: translateY(-50%);
}


/* ============================================================
 * AJAX RESULT CARD — engine-injected markup
 * ============================================================ */

.domain-available-container {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-subtle);
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-lg);
    padding: 0;
    text-align: left;
    overflow: hidden;
    margin-top: var(--vc-space-4);
}

.domain-available-container .wgs-domain-res {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-4);
    padding: var(--vc-space-4) var(--vc-space-5);
    margin: 0;
    flex-wrap: nowrap;
    transition: background-color var(--vc-transition-fast);
}
.domain-available-container .wgs-domain-res:hover {
    background-color: var(--vc-bg-elevated);
}

/* Hide the engine's "CONGRATULATIONS!" / "is already taken!" paragraph */
.domain-available-container .cong-massage > p {
    display: none;
}

/* The 3 .col-md-4 cells from the engine — flatten to inline flex */
.domain-available-container .wgs-domain-res > [class*="col-"] {
    padding: 0;
    width: auto;
    flex: 0 0 auto;
}
.domain-available-container .wgs-domain-res > [class*="col-"]:first-child {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--vc-space-3);
}

.domain-available-container .wgs-domain-res h3 {
    font-size: var(--vc-text-lg);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-2);
    word-break: break-all;
}

/* Status pill before the domain name (green check) */
.domain-available-container .wgs-domain-res > [class*="col-"]:first-child::before {
    content: '✓';
    width: 1.625rem;
    height: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vc-success-bg);
    color: var(--vc-success);
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-base);
    font-weight: var(--vc-font-bold);
    flex: 0 0 auto;
}

/* "Available" label after the domain name */
.domain-available-container .wgs-domain-res h3::after {
    content: 'Available';
    font-size: var(--vc-text-xs);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-success);
    margin-left: var(--vc-space-2);
}

/* Price */
.domain-available-container .wgs-domain-res h2 {
    font-size: var(--vc-text-base);
    font-weight: var(--vc-font-bold);
    color: var(--vc-text-primary);
    margin: 0;
    white-space: nowrap;
}


/* ===== Taken / Unavailable state ===== */
.domain-available-container.errorUnavail {
    border-color: var(--vc-danger-bg);
}
.domain-available-container.errorUnavail .wgs-domain-res > [class*="col-"]:first-child::before {
    content: '✕';
    background: var(--vc-danger-bg);
    color: var(--vc-danger);
}
.domain-available-container.errorUnavail .wgs-domain-res h3::after {
    content: 'Taken';
    color: var(--vc-danger);
}
.domain-available-container.errorUnavail .wgs-domain-res h2,
.domain-available-container.errorUnavail .wgs-domain-res .add-to-cart-btn {
    display: none;
}

/* Fallback "taken" — only the cong-massage paragraph, no row */
.domain-available-container.errorUnavail .cong-massage {
    padding: var(--vc-space-4) var(--vc-space-5);
    display: flex;
    align-items: center;
    gap: var(--vc-space-3);
}
.domain-available-container.errorUnavail .cong-massage > p {
    display: block;
    font-size: var(--vc-text-lg);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
    margin: 0;
}
.domain-available-container.errorUnavail .cong-massage::before {
    content: '✕';
    width: 1.625rem;
    height: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vc-danger-bg);
    color: var(--vc-danger);
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-base);
    font-weight: var(--vc-font-bold);
    flex: 0 0 auto;
}
.domain-available-container.errorUnavail:has(.wgs-domain-res) .cong-massage {
    display: none;
}


/* ===== Add-to-Cart button (engine-injected, hidden until row hover) ===== */
.domain-available-container .add-to-cart-btn,
.domain-suggestion .add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--vc-primary) !important;
    border: 1px solid var(--vc-primary);
    padding: var(--vc-space-2) var(--vc-space-3);
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-xs);
    font-weight: var(--vc-font-medium);
    cursor: pointer;
    transition: background var(--vc-transition-base),
                color var(--vc-transition-base),
                opacity var(--vc-transition-base);
    white-space: nowrap;
    opacity: 0;
}
.domain-available-container .wgs-domain-res:hover .add-to-cart-btn,
.domain-suggestion .domain-name-container:hover .add-to-cart-btn {
    opacity: 1;
}
.domain-available-container .add-to-cart-btn:hover,
.domain-suggestion .add-to-cart-btn:hover {
    background: var(--vc-primary);
    color: var(--vc-text-inverse) !important;
}
.domain-available-container .add-to-cart-btn.removeBtnCat,
.domain-suggestion .add-to-cart-btn.removeBtnCat {
    background: var(--vc-bg-elevated);
    color: var(--vc-text-secondary) !important;
    border-color: var(--vc-border-default);
    opacity: 1;
}


/* ============================================================
 * SUGGESTIONS LIST — engine-injected
 * ============================================================ */

.domain-suggestion {
    display: block !important;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-subtle);
    border-radius: var(--vc-radius-lg);
    box-shadow: var(--vc-shadow-md);
    overflow: hidden;
    padding: 0;
    gap: 0 !important;
    grid-template-columns: none !important;
    margin-top: var(--vc-space-4);
}
.domain-suggestion .domain-name-container {
    padding: var(--vc-space-4) var(--vc-space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-4);
    flex-wrap: nowrap;
    background: transparent;
    border: none;
    border-top: 1px solid var(--vc-border-subtle);
    transition: background var(--vc-transition-fast);
}
.domain-suggestion .domain-name-container:first-child {
    border-top: none;
}
.domain-suggestion .domain-name-container:hover {
    background: var(--vc-bg-elevated);
}
.domain-suggestion .domain-name-container::before {
    content: '★';
    width: 1.625rem;
    height: 1.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-sm);
    flex: 0 0 auto;
}
.domain-suggestion .domain-name-container h3 {
    font-size: var(--vc-text-lg);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-all;
    order: 1;
}
.domain-suggestion .domain-name-container h2 {
    font-size: var(--vc-text-base);
    font-weight: var(--vc-font-bold);
    color: var(--vc-text-primary);
    margin: 0;
    white-space: nowrap;
    order: 2;
}
.domain-suggestion .domain-name-container h2 sub {
    font-size: var(--vc-text-xs);
    color: var(--vc-text-secondary);
    font-weight: var(--vc-font-medium);
    vertical-align: baseline;
    margin-left: 2px;
}
.domain-suggestion .domain-name-container .add-to-cart-btn {
    order: 3;
}
.domain-suggestion .domain-name-container h6.hot-tag {
    font-size: 0.625rem;
    font-weight: var(--vc-font-bold);
    color: var(--vc-text-inverse);
    background: var(--vc-accent-orange);
    padding: 2px var(--vc-space-2);
    border-radius: var(--vc-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wide);
    margin: 0;
    order: 1;
    flex: 0 0 auto;
}


/* ============================================================
 * CART SUMMARY (used by viewcart.tpl in order form)
 * ============================================================ */

.vc-cart-summary {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    padding: var(--vc-space-6);
    box-shadow: var(--vc-shadow-md);
    position: sticky;
    top: var(--vc-space-6);
}

.vc-cart-line {
    display: flex;
    justify-content: space-between;
    padding: var(--vc-space-3) 0;
    border-bottom: 1px solid var(--vc-border-subtle);
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
}
.vc-cart-line:last-of-type {
    border-bottom: none;
}

.vc-cart-total {
    display: flex;
    justify-content: space-between;
    padding-top: var(--vc-space-4);
    margin-top: var(--vc-space-2);
    border-top: 2px solid var(--vc-border-default);
    font-size: var(--vc-text-xl);
    font-weight: var(--vc-font-bold);
    color: var(--vc-text-primary);
}


/* Responsive — wrap result rows on very narrow screens */
@media (max-width: 480px) {
    .domain-available-container .wgs-domain-res,
    .domain-suggestion .domain-name-container {
        flex-wrap: wrap;
    }
    .domain-available-container .wgs-domain-res > [class*="col-"]:first-child,
    .domain-suggestion .domain-name-container h3 {
        flex: 1 1 100%;
    }
}
/*
 * Vercaa Overrides — Bootstrap class compatibility layer
 * =======================================================
 * WHMCS core JavaScript hard-requires specific Bootstrap 4 class names.
 * We keep Bootstrap CSS loaded but override the visual styling for the
 * classes WHMCS injects so they match vercaa look.
 *
 * MUST be loaded LAST so it wins specificity ties. The whole point of
 * this file is "make WHMCS-injected markup look vercaa-styled without
 * touching the JS that injects it."
 *
 * Bootstrap/jQuery cannot be removed (WHMCS core JS requires them); this
 * section restyles the BS class names WHMCS injects.
 */


/* ============================================================
 * ALERTS — WHMCS injects .alert-success / .alert-danger etc.
 * from $successmessage / $errormessage Smarty variables.
 * ============================================================ */

.alert {
    padding: var(--vc-space-4) var(--vc-space-5);
    border-radius: var(--vc-radius-lg);
    border: 1px solid var(--vc-border-default);
    background: var(--vc-bg-elevated);
    color: var(--vc-text-primary);
    font-size: var(--vc-text-sm);
    margin-bottom: var(--vc-space-4);
}

.alert-success {
    background: var(--vc-success-bg);
    border-color: var(--vc-success);
    color: #14532D;
}
.alert-danger,
.alert-error {
    background: var(--vc-danger-bg);
    border-color: var(--vc-danger);
    color: #7F1D1D;
}
.alert-warning {
    background: var(--vc-warning-bg);
    border-color: var(--vc-warning);
    color: #78350F;
}
.alert-info {
    background: var(--vc-info-bg);
    border-color: var(--vc-info);
    color: #1E3A8A;
}


/* ============================================================
 * FORM VALIDATION — Bootstrap classes WHMCS injects on errors
 * ============================================================ */

.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--vc-danger) !important;
}
.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

.invalid-feedback {
    display: block;
    margin-top: var(--vc-space-1);
    font-size: var(--vc-text-xs);
    color: var(--vc-danger);
    font-weight: var(--vc-font-medium);
}

.was-validated input:invalid {
    border-color: var(--vc-danger);
}


/* ============================================================
 * MODALS — Bootstrap 4 modal markup that WHMCS core JS opens
 * (2FA setup, EPP code popup, remove-from-cart confirmation, etc.)
 * ============================================================ */

/* Keep BS4 default stacking: .modal=1050 > .modal-backdrop=1040.
   Earlier `var(--vc-z-modal, 400)` lowered the modal BELOW the backdrop,
   blocking clicks on remove-item / empty-cart confirmation dialogs. */
.modal {
    z-index: 1050;
}

.modal-backdrop {
    z-index: 1040;
    background-color: rgba(17, 24, 39, 0.6);
}
.modal-backdrop.show {
    opacity: 1;
}

.modal-dialog {
    max-width: 32rem;
    margin: var(--vc-space-8) auto;
}

.modal-content {
    background: var(--vc-bg-surface);
    border: none;
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-2xl);
    overflow: hidden;
}

.modal-header {
    padding: var(--vc-space-5) var(--vc-space-6);
    border-bottom: 1px solid var(--vc-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    margin: 0;
    font-size: var(--vc-text-lg);
    font-weight: var(--vc-font-semibold);
    color: var(--vc-text-primary);
}

.modal-header .close {
    background: none;
    border: none;
    font-size: var(--vc-text-2xl);
    color: var(--vc-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 1;
}
.modal-header .close:hover {
    color: var(--vc-text-primary);
}

.modal-body {
    padding: var(--vc-space-6);
    color: var(--vc-text-primary);
}

.modal-footer {
    padding: var(--vc-space-4) var(--vc-space-6);
    border-top: 1px solid var(--vc-border-subtle);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--vc-space-3);
}


/* ============================================================
 * BOOTSTRAP BUTTON CLASS COMPAT — for any markup that uses
 * .btn .btn-primary etc. (rare in our pages but core may inject)
 * ============================================================ */

.btn-primary,
.btn.btn-primary {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
    color: var(--vc-text-inverse);
}
.btn-primary:hover {
    background: var(--vc-primary-dark);
    border-color: var(--vc-primary-dark);
    color: var(--vc-text-inverse);
}

.btn-secondary,
.btn.btn-secondary {
    background: transparent;
    border-color: var(--vc-primary);
    color: var(--vc-primary);
}
.btn-secondary:hover {
    background: var(--vc-primary);
    color: var(--vc-text-inverse);
}


/* ============================================================
 * PAGINATION — Bootstrap 4 pagination markup from DataTables /
 * server-side pagination fallback
 * ============================================================ */

.pagination {
    display: flex;
    align-items: center;
    gap: var(--vc-space-1);
    list-style: none;
    padding: 0;
    margin: var(--vc-space-4) 0;
}

.page-item .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--vc-space-3);
    background: var(--vc-bg-surface);
    color: var(--vc-text-secondary);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: var(--vc-font-medium);
    text-decoration: none;
    transition: background var(--vc-transition-fast),
                color var(--vc-transition-fast),
                border-color var(--vc-transition-fast);
}
.page-item .page-link:hover {
    background: var(--vc-bg-elevated);
    color: var(--vc-primary);
    border-color: var(--vc-primary);
}
.page-item.active .page-link {
    background: var(--vc-primary);
    color: var(--vc-text-inverse);
    border-color: var(--vc-primary);
}
.page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============================================================
 * BOOTSTRAP TABLE CLASSES — WHMCS DataTables markup
 * ============================================================ */

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--vc-bg-surface);
    font-size: var(--vc-text-sm);
}
.table thead th {
    text-align: left;
    padding: var(--vc-space-3) var(--vc-space-4);
    background: var(--vc-bg-elevated);
    color: var(--vc-text-secondary);
    font-weight: var(--vc-font-semibold);
    font-size: var(--vc-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider);
    border-bottom: 1px solid var(--vc-border-default);
}
.table tbody td {
    padding: var(--vc-space-4);
    color: var(--vc-text-primary);
    border-bottom: 1px solid var(--vc-border-subtle);
}
.table tbody tr:hover {
    background: var(--vc-bg-elevated);
}
.table-striped tbody tr:nth-of-type(odd) {
    background: var(--vc-bg-elevated);
}


/* ============================================================
 * BOOTSTRAP FORM-CONTROL — Twenty-One uses .form-control on inputs
 * ============================================================ */

.form-control {
    display: block;
    width: 100%;
    padding: var(--vc-space-3) var(--vc-space-4);
    background: var(--vc-bg-surface);
    color: var(--vc-text-primary);
    border: 1px solid var(--vc-border-strong);
    border-radius: var(--vc-radius-md);
    font-family: var(--vc-font-sans);
    font-size: var(--vc-text-base);
    line-height: var(--vc-leading-normal);
    box-shadow: var(--vc-shadow-sm);
    transition: border-color var(--vc-transition-base),
                box-shadow var(--vc-transition-base);
}
.form-control:focus {
    outline: none;
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.form-control::placeholder {
    color: var(--vc-text-muted);
}
.form-control:disabled {
    background: var(--vc-bg-elevated);
    color: var(--vc-text-muted);
    cursor: not-allowed;
}


/* ============================================================
 * BOOTSTRAP CARD — Twenty-One uses .card .card-body etc.
 * ============================================================ */

.card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
    box-shadow: var(--vc-shadow-sm);
    overflow: hidden;
    margin-bottom: var(--vc-space-4);
}
.card-header {
    padding: var(--vc-space-4) var(--vc-space-6);
    background: var(--vc-bg-elevated);
    border-bottom: 1px solid var(--vc-border-subtle);
    font-weight: var(--vc-font-semibold);
}
.card-body {
    padding: var(--vc-space-6);
}
.card-footer {
    padding: var(--vc-space-4) var(--vc-space-6);
    background: var(--vc-bg-elevated);
    border-top: 1px solid var(--vc-border-subtle);
}


/* ==== PAGE: 2c. marketing.css ==== */
/* ============================================================================
 * marketing.css — Marketing-page-only components (loaded on $vc_marketing_page)
 * ============================================================================
 * Loaded ONLY on marketing pages (homepage, hosting, domains, store landing).
 * After base.css. Pairs with marketing.js.
 *
 * Phase 3 (docs/26): seeded with the pricing.tpl state-styling block that
 * previously lived only in the Tailwind build (input.css layer components
 * section B). Ported verbatim.
 *
 * The marketing public-header look still loads from css/vercaa/lagom-header.css
 * (conditional, marketing-only). Other marketing component rules (HERO, FEATURE
 * GRID, PRICING TABLE chrome, FAQ, CTA) still live in custom.css for now; they
 * migrate here as custom.css is split down.
 * ============================================================================ */

/* ===== B) pricing.tpl — state styling + page palette (Phase 3) ========= */

.vc-pr {
  --vc-pr-purple:      #7C3AED;
  --vc-pr-purple-dark: #6D28D9;
  --vc-pr-blue:        #3B82F6;
  --vc-pr-orange:      #FF5C00;
  --vc-pr-success:     #10B981;
  --vc-pr-ink:         #111827;
  --vc-pr-ink-2:       #374151;
  --vc-pr-ink-3:       #6B7280;
  --vc-pr-ink-4:       #9CA3AF;
  --vc-pr-bg:          #FAFAFA;
  --vc-pr-border:      #E5E7EB;
  --vc-pr-border-soft: #F3F4F6;
}

@keyframes vc-pr-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.5; transform: scale(1.2); }
}

.vc-pr-pane                            { background: linear-gradient(135deg, #FFFFFF 0%, #FAF5FF 100%); border: 1px solid #EDE9FE; box-shadow: 0 10px 40px rgba(124, 58, 237, 0.05); }
.vc-pr-pane[data-pane="wordpress"]     { background: linear-gradient(135deg, #FFFFFF 0%, #EFF6FF 100%); border-color: #DBEAFE;   box-shadow: 0 10px 40px rgba(59, 130, 246, 0.05); }
.vc-pr-pane[data-pane="web"]           { background: linear-gradient(135deg, #FFFFFF 0%, #FFF7ED 100%); border-color: #FED7AA;   box-shadow: 0 10px 40px rgba(255, 92, 0, 0.05); }

.vc-pr-pane    { display: none; }
.vc-pr-pane.is-active    { display: block; }
.vc-pr-subpane { display: none; }
.vc-pr-subpane.is-active { display: block; }

/* Keyboard focus ring — brand guide §Motion/focus: 2px solid primary + 2px
 * offset on interactive controls. Only :focus-visible so mouse clicks stay clean. */
.vc-pr-tab-btn:focus-visible,
.vc-pr-cycle-btn:focus-visible,
.vc-pr-subtab-btn:focus-visible,
.vc-pr-card-cta:focus-visible,
.vc-pr-faq-item summary:focus-visible {
  outline: 2px solid var(--vc-pr-purple);
  outline-offset: 2px;
}

/* Active-state buttons: the markup carries Tailwind `bg-white`/`bg-transparent`
 * (which Bootstrap theme.min.css owns with !important). These state rules must
 * beat that, so use !important LONGHAND background-color/color (a non-important
 * override loses to Bootstrap's important .bg-white). docs/29 Phase-7 lesson. */
.vc-pr-tab-btn.is-active {
  background-color: var(--vc-pr-ink) !important;
  border-color: var(--vc-pr-ink) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.2);
}
.vc-pr-cycle-btn.is-active {
  background-color: var(--vc-pr-ink) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.vc-pr-subtab-btn.is-active {
  background-color: var(--vc-pr-blue) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}

.vc-pr-price                  { display: none; }
.vc-pr-price.is-active        { display: inline; }

/* Featured card: the markup carries `bg-white` (Bootstrap !important) which
 * flattens the brand gradient, making the whole card — and its white text —
 * invisible (white-on-white). Force the gradient via background-image !important
 * (+ a solid background-color fallback) and !important the inner text colors so
 * they beat the markup's `text-[var(--vc-pr-ink)]` / `text-white` utilities. */
.vc-pr-card.is-featured {
  background-color: var(--vc-pr-purple) !important;
  background-image: linear-gradient(180deg, var(--vc-pr-purple) 0%, var(--vc-pr-purple-dark) 100%) !important;
  border: 2px solid rgba(124, 58, 237, 0.3) !important;
  box-shadow: 0 25px 50px rgba(124, 58, 237, 0.3);
  color: #FFFFFF !important;
}
/* Featured-card lift — from tablet up (md 768px), not just desktop, so the
   2-col tablet grid also shows the elevation. */
@media (min-width: 768px) {
  .vc-pr-card.is-featured { transform: translateY(-12px); }
}
.vc-pr-card--wp.is-featured {
  background-color: var(--vc-pr-blue) !important;
  background-image: linear-gradient(180deg, var(--vc-pr-blue) 0%, #2563EB 100%) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.3);
}
.vc-pr-card--web.is-featured {
  background-color: var(--vc-pr-orange) !important;
  background-image: linear-gradient(180deg, var(--vc-pr-orange) 0%, #E64F00 100%) !important;
  border-color: rgba(255, 92, 0, 0.3) !important;
  box-shadow: 0 25px 50px rgba(255, 92, 0, 0.3);
}

.vc-pr-card.is-featured .vc-pr-card-name,
.vc-pr-card.is-featured .vc-pr-card-suffix { color: rgba(255, 255, 255, 0.7) !important; }
.vc-pr-card.is-featured .vc-pr-card-note   { color: rgba(255, 255, 255, 0.5) !important; }
.vc-pr-card.is-featured .vc-pr-price       { color: #FFFFFF !important; }
.vc-pr-card.is-featured .vc-pr-card-features li                  { color: rgba(255, 255, 255, 0.85) !important; }
.vc-pr-card.is-featured .vc-pr-card-features .material-symbols-outlined { color: rgba(255, 255, 255, 0.7) !important; }
.vc-pr-card.is-featured .vc-pr-card-cta {
  background-color: #FFFFFF !important;
  color: var(--vc-pr-purple) !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
}
.vc-pr-card.is-featured .vc-pr-card-cta:hover {
  background-color: #F9FAFB !important;
  color: var(--vc-pr-purple-dark) !important;
}
.vc-pr-card--wp.is-featured  .vc-pr-card-cta { color: var(--vc-pr-blue) !important; }
.vc-pr-card--web.is-featured .vc-pr-card-cta { color: var(--vc-pr-orange) !important; }

.vc-pr-card--wp  .vc-pr-card-name { color: var(--vc-pr-blue);   }
.vc-pr-card--web .vc-pr-card-name { color: var(--vc-pr-orange); }
.vc-pr-card--wp  .vc-pr-card-flag { color: var(--vc-pr-blue);   }
.vc-pr-card--web .vc-pr-card-flag { color: var(--vc-pr-orange); }
.vc-pr-card--wp  .vc-pr-card-features .material-symbols-outlined { color: var(--vc-pr-blue);   }
.vc-pr-card--web .vc-pr-card-features .material-symbols-outlined { color: var(--vc-pr-orange); }

.vc-pr-pane-head--wp  .vc-pr-pane-icon { background: rgba(59, 130, 246, 0.1);  color: var(--vc-pr-blue);   }
.vc-pr-pane-head--web .vc-pr-pane-icon { background: rgba(255, 92, 0, 0.1);  color: var(--vc-pr-orange); }

.vc-pr-faq-item summary { list-style: none; }
.vc-pr-faq-item summary::-webkit-details-marker { display: none; }
.vc-pr-faq-item[open] summary .material-symbols-outlined {
  transform: rotate(180deg);
  color: var(--vc-pr-purple);
}

/* ── Pricing keyframe ── */
@keyframes vc-pr-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.5; transform: scale(1.2); }
}


/* ==== PAGE: 2d. clientarea.css ==== */
/*
 * Vercaa — clientarea.css  (was pages/clientarea-shell.css; renamed docs/26 Phase 3)
 * ==================================================================================
 * The client-area home sheet. Currently = the shell styles below. As custom.css
 * is split down, client-area component rules (STAT TILE, SERVICE LIST, EMPTY
 * STATE, INVOICE ROW, STATUS DOT) migrate here.
 *
 * Global shell styles for every logged-in client-area page.
 * Loaded by head.tpl only when !$vc_full_render && $loggedin.
 *
 * Purpose: reframe the Twenty-One chrome (#header, .topbar, .navbar,
 * .master-breadcrumb, #main-body, sidebar column) into the vercaa
 * client-area design — fixed left sidebar + right content area
 * with its own topbar — WITHOUT removing any WHMCS-required markup.
 *
 * Strategy: additive vc-client-* wrapper classes are present in
 * header.tpl; this file positions them. The native Twenty-One
 * Bootstrap markup (topbar, .navbar.main-navbar-wrapper, etc.) is
 * visually hidden and replaced by vercaa layout, but DOM is kept
 * so WHMCS JS (cart badge, popovers, modals) still binds.
 *
 * Navbar handling (option a): the horizontal .main-navbar-wrapper
 * row is hidden. header.tpl renders the same $primaryNavbar inside
 * the sidebar column via a second {include navbar.tpl}, so the menu
 * items still appear — just in the sidebar instead of the top.
 */

/* ================================================================
 * PAGE SHELL
 * ================================================================ */

body.primary-bg-color {
    background: var(--vc-bg-base);
    font-family: var(--vc-font-sans);
    color: var(--vc-text-primary);
}

/* The Twenty-One outer <header id="header"> is kept but repositioned
 * as a flex row: sidebar column (a child of #main-body) stays in
 * the content row; the topbar + notifications live here. We hide
 * the default Twenty-One rows (.navbar-light logo row and
 * .main-navbar-wrapper horizontal nav) and expose only the .topbar,
 * which is our vc-client-topbar anchor. */
#header.header {
    position: fixed;
    top: 0;
    left: 256px;
    right: 0;
    height: 72px;
    z-index: 30;
    background: var(--vc-bg-surface);
    border-bottom: 1px solid var(--vc-border-default);
    box-shadow: var(--vc-shadow-sm);
}

/* Hide the Twenty-One logo row and horizontal navbar. Their markup
 * stays in the DOM so WHMCS JS (which binds to #mainNavbar) still
 * finds the collapse target. */
#header .navbar.navbar-light,
#header .navbar.main-navbar-wrapper {
    display: none !important;
}

/* ================================================================
 * TOPBAR — Twenty-One's <div class="topbar"> reframed as the
 * right-side action bar with notifications + active-client chip.
 * ================================================================ */

#header .topbar {
    height: 72px;
    background: transparent;
    border: 0;
    padding: 0 2rem;
    display: flex;
    align-items: center;
}
#header .topbar > .container {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
}
#header .topbar .d-flex { align-items: center; }

/* Notifications button (#accountNotifications) — reskin from Bootstrap
 * .btn to a vercaa icon button. id preserved for the popover binding. */
#header .topbar #accountNotifications {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--vc-radius-lg);
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    font-weight: 500;
    transition: all 150ms;
}
#header .topbar #accountNotifications:hover {
    border-color: var(--vc-primary-light);
    color: var(--vc-primary);
}
#header .topbar #accountNotifications i.far.fa-flag {
    color: var(--vc-primary);
}

/* Active-client chip — Bootstrap .input-group.active-client */
#header .topbar .active-client {
    align-items: center;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-full);
    padding: 0.25rem 0.5rem 0.25rem 1rem;
    gap: 0.5rem;
}
#header .topbar .active-client .input-group-text {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: var(--vc-text-xs);
    color: var(--vc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#header .topbar .active-client .btn-group { border: 0; }
#header .topbar .active-client .btn {
    background: transparent;
    border: 0;
    padding: 0.25rem 0.5rem;
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-primary);
}
#header .topbar .active-client .btn:hover { color: var(--vc-primary); }
#header .topbar .active-client .btn-return-to-admin {
    background: var(--vc-warning-bg);
    color: var(--vc-warning);
    border-radius: var(--vc-radius-md);
    padding: 0.375rem 0.625rem;
}

/* Notifications popover content wrapper */
#accountNotificationsContent .client-alerts {
    list-style: none;
    margin: 0;
    padding: 0;
}
#accountNotificationsContent .client-alerts li a {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--vc-border-subtle);
    color: var(--vc-text-primary);
    text-decoration: none;
    font-size: var(--vc-text-sm);
}
#accountNotificationsContent .client-alerts li a:hover {
    background: var(--vc-bg-elevated);
}

/* ================================================================
 * SIDEBAR (left fixed rail, 256px)
 * The column lives inside #main-body's .row — we pull it out of
 * flow with position:fixed and offset the content column via
 * padding-left on #main-body. The second {include navbar.tpl}
 * inside this column is what surfaces top-nav items here.
 * ================================================================ */

#main-body .vc-client-sidebar-col {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 256px;
    background: var(--vc-bg-surface);
    border-right: 1px solid var(--vc-border-default);
    padding: 1.5rem 1rem;
    overflow-y: auto;
    z-index: 40;
    /* Override Bootstrap col widths */
    max-width: 256px;
    flex: 0 0 256px;
}

.vc-client-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.5rem 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--vc-border-subtle);
}
.vc-client-sidebar-brand-mark {
    width: 2rem;
    height: 2rem;
    border-radius: var(--vc-radius-md);
    background: var(--vc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
.vc-client-sidebar-brand-name {
    font-size: var(--vc-text-lg);
    font-weight: 800;
    color: var(--vc-text-primary);
    letter-spacing: -0.02em;
}

/* Sidebar brand logo (.vh-logo dots + text, ported from public-header).
 * The marketing page's .vh-logo* rules are scoped under .vercaa-home, which
 * the client-area body (vc-client-page) does not carry — so restate them here
 * for the sidebar using the standard brand tokens. */
.vc-client-sidebar-brand .vh-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}
.vc-client-sidebar-brand .vh-logo-dots {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.vc-client-sidebar-brand .vh-logo-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
}
.vc-client-sidebar-brand .vh-logo-dot--purple { background-color: var(--vc-primary); }
.vc-client-sidebar-brand .vh-logo-dot--orange { background-color: var(--vc-accent-orange); }
.vc-client-sidebar-brand .vh-logo-dot--green  { background-color: #22c55e; }
.vc-client-sidebar-brand .vh-logo-text {
    font-weight: 800;
    font-size: var(--vc-text-lg);
    letter-spacing: -0.02em;
    color: var(--vc-text-primary);
}

/* docs/33: hide ONLY the WHMCS "Account" context sidebar ($primarySidebar
 * card, appears on action=details / security / contacts / paymentmethods etc).
 * Its items (Account Details, User Management, Payment Methods, Contacts,
 * Account Security, Email History) are already surfaced by the bottom Account
 * dropdown in the rail, so this duplicate box is redundant. Scoped by
 * menuItemName so OTHER context sidebars (domain/service menus) still show. */
#main-body .vc-client-sidebar-col .card-sidebar[menuItemName="Account"] {
    display: none !important;
}

/* Each sidebar "card" — $primarySidebar item — is a section group */
#main-body .vc-client-sidebar-col .card-sidebar {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin-bottom: 1rem;
    box-shadow: none;
}
#main-body .vc-client-sidebar-col .card-sidebar .card-header {
    background: transparent;
    border: 0;
    padding: 0 0.5rem 0.5rem;
}
#main-body .vc-client-sidebar-col .card-sidebar .card-title {
    font-size: var(--vc-text-xs);
    font-weight: 700;
    color: var(--vc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
#main-body .vc-client-sidebar-col .card-sidebar .card-title i {
    margin-right: 0.375rem;
}
#main-body .vc-client-sidebar-col .card-sidebar .card-minimise {
    display: none;
}

/* Sidebar links (.list-group-item) — reskin to vercaa rail item */
#main-body .vc-client-sidebar-col .list-group {
    border: 0;
    background: transparent;
}
#main-body .vc-client-sidebar-col .list-group-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.125rem;
    background: transparent;
    border: 0;
    border-radius: var(--vc-radius-lg);
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-text-secondary);
    transition: all 150ms;
}
#main-body .vc-client-sidebar-col .list-group-item:hover {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    text-decoration: none;
}
#main-body .vc-client-sidebar-col .list-group-item.active {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    font-weight: 600;
}
#main-body .vc-client-sidebar-col .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
#main-body .vc-client-sidebar-col .sidebar-menu-item-icon-wrapper {
    width: 1.25rem;
    display: inline-flex;
    justify-content: center;
}
#main-body .vc-client-sidebar-col .sidebar-menu-item-label { flex: 1; }
#main-body .vc-client-sidebar-col .sidebar-menu-item-badge .badge {
    background: var(--vc-primary);
    color: #fff;
    font-size: var(--vc-text-xs);
    padding: 0.125rem 0.5rem;
    border-radius: var(--vc-radius-full);
}

/* The second {include navbar.tpl} inside the sidebar column — styled
 * as a flat vertical nav-list to match other sidebar sections. */
.vc-client-sidebar-nav {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0 0.5rem 1rem;
    border-bottom: 1px solid var(--vc-border-subtle);
}
.vc-client-sidebar-nav .nav-item { list-style: none; }
.vc-client-sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.125rem;
    border-radius: var(--vc-radius-lg);
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-text-secondary);
    text-decoration: none;
    transition: all 150ms;
}
.vc-client-sidebar-nav .nav-link:hover,
.vc-client-sidebar-nav .nav-item.active > .nav-link {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    text-decoration: none;
}
.vc-client-sidebar-nav .dropdown-menu {
    position: static;
    float: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 2rem;
    background: transparent;
}
.vc-client-sidebar-nav .dropdown-menu .dropdown-item {
    padding: 0.375rem 0.75rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    border-radius: var(--vc-radius-md);
}
.vc-client-sidebar-nav .dropdown-menu .dropdown-item:hover {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
}

/* Hide the secondary sidebar's mobile-only dropdown select duplicate */
#main-body .vc-client-sidebar-col .card.d-block.d-md-none {
    display: none !important;
}

/* ================================================================
 * BREADCRUMB
 * ================================================================ */

.master-breadcrumb {
    position: fixed;
    top: 72px;
    left: 256px;
    right: 0;
    z-index: 20;
    background: var(--vc-bg-surface);
    border-bottom: 1px solid var(--vc-border-subtle);
    padding: 0.75rem 2rem;
}
.master-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}
.master-breadcrumb .breadcrumb a {
    color: var(--vc-text-secondary);
    text-decoration: none;
}
.master-breadcrumb .breadcrumb a:hover { color: var(--vc-primary); }
.master-breadcrumb .breadcrumb-item.active { color: var(--vc-text-primary); font-weight: 600; }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--vc-text-muted);
    content: "/";
}

/* ================================================================
 * MAIN BODY
 * ================================================================ */

#main-body {
    padding: calc(72px + 52px + 2rem) 2rem 3rem 288px;
    min-height: 100vh;
}
#main-body > .container {
    max-width: 1200px;
    padding: 0;
}
#main-body .row {
    display: block;
    margin: 0;
}
#main-body .vc-client-content-col {
    max-width: none;
    flex: 1;
    padding: 0;
}

/* Cards / panels rendered by WHMCS core get vercaa polish */
#main-body .card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-sm);
}
#main-body .card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--vc-border-subtle);
    padding: 1rem 1.25rem;
}
#main-body .card .card-title {
    font-size: var(--vc-text-base);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0;
}
#main-body .card .card-body { padding: 1.25rem; }

/* ================================================================
 * RESPONSIVE (collapse sidebar on small screens)
 * ================================================================ */

@media (max-width: 991px) {
    #main-body .vc-client-sidebar-col {
        transform: translateX(-100%);
        transition: transform 200ms;
    }
    #main-body .vc-client-sidebar-col.is-open {
        transform: translateX(0);
    }
    #header.header { left: 0; }
    .master-breadcrumb { left: 0; }
    #main-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ================================================================
 * PHASE 6 CATCH-ALL — generic vc styling for any client-area page
 * that doesn't have its own per-page CSS file. Targets the
 * Twenty-One Bootstrap classes via #main-body so it only fires
 * inside the logged-in shell.
 *
 * The earlier per-page rules already win on specificity for pages
 * that have their own CSS (clientareaproducts, clientareadomains,
 * clientareainvoices, etc.) because their selectors include
 * #vcDashPage / #vcDomListPage / etc. or have the same #main-body
 * scope and are loaded after this file.
 * ================================================================ */

#main-body .form-control,
#main-body input[type="text"]:not(.vc-auth-input):not(.vc-fund-amount-input),
#main-body input[type="email"]:not(.vc-auth-input),
#main-body input[type="password"]:not(.vc-auth-input),
#main-body input[type="tel"]:not(.vc-auth-input),
#main-body input[type="number"]:not(.vc-fund-amount-input),
#main-body select.form-control,
#main-body textarea.form-control {
    border-radius: var(--vc-radius-md);
    border: 1px solid var(--vc-border-default);
    padding: 0.625rem 0.875rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    background: var(--vc-bg-surface);
    box-shadow: none;
    transition: border-color 150ms, box-shadow 150ms;
    height: auto;
}
#main-body .form-control:focus,
#main-body input:focus,
#main-body select.form-control:focus,
#main-body textarea.form-control:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px var(--vc-primary-tint);
    outline: 0;
}
#main-body label,
#main-body .col-form-label {
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-secondary);
}

#main-body .btn:not(.vc-svc-add-btn):not(.vc-dom-list-add-btn):not(.vc-tk-new-btn):not(.vc-inv-paydue-btn):not(.vc-fund-submit) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms;
    text-decoration: none;
    line-height: 1.4;
}
#main-body .btn-primary {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
    color: #fff;
}
#main-body .btn-primary:hover {
    background: var(--vc-primary-dark);
    border-color: var(--vc-primary-dark);
    color: #fff;
    text-decoration: none;
}
#main-body .btn-success {
    background: var(--vc-success);
    border-color: var(--vc-success);
    color: #fff;
}
#main-body .btn-success:hover {
    background: #047857;
    border-color: #047857;
    color: #fff;
    text-decoration: none;
}
#main-body .btn-danger {
    background: var(--vc-danger);
    border-color: var(--vc-danger);
    color: #fff;
}
#main-body .btn-danger:hover {
    background: #B91C1C;
    border-color: #B91C1C;
    color: #fff;
    text-decoration: none;
}
#main-body .btn-warning {
    background: var(--vc-warning);
    border-color: var(--vc-warning);
    color: #fff;
}
#main-body .btn-default {
    background: var(--vc-bg-surface);
    border-color: var(--vc-border-default);
    color: var(--vc-text-primary);
}
#main-body .btn-default:hover {
    background: var(--vc-bg-elevated);
    border-color: var(--vc-primary-light);
    color: var(--vc-text-primary);
    text-decoration: none;
}
#main-body .btn-info {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
    color: #fff;
}
#main-body .btn-info:hover {
    background: var(--vc-primary-dark);
    border-color: var(--vc-primary-dark);
    color: #fff;
    text-decoration: none;
}
#main-body .btn-link {
    background: transparent;
    border: 0;
    color: var(--vc-primary);
    padding: 0.25rem 0.5rem;
    font-weight: 500;
}
#main-body .btn-link:hover {
    color: var(--vc-primary-dark);
    text-decoration: underline;
}
#main-body .btn-lg { padding: 0.875rem 1.5rem; font-size: var(--vc-text-base); }
#main-body .btn-sm,
#main-body .btn-xs { padding: 0.375rem 0.75rem; font-size: var(--vc-text-xs); }
#main-body .btn-block { width: 100%; display: flex; }
#main-body .btn.disabled,
#main-body .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Generic alerts */
#main-body .alert {
    border-radius: var(--vc-radius-lg);
    padding: 0.875rem 1.125rem;
    font-size: var(--vc-text-sm);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
}
#main-body .alert-info    { background: var(--vc-info-bg);    color: var(--vc-info);    border-color: #BFDBFE; }
#main-body .alert-warning { background: var(--vc-warning-bg); color: var(--vc-warning); border-color: #FDE68A; }
#main-body .alert-danger,
#main-body .alert-error   { background: var(--vc-danger-bg);  color: var(--vc-danger);  border-color: #FECACA; }
#main-body .alert-success { background: #ECFDF5; color: var(--vc-success); border-color: #A7F3D0; }

/* Generic .table styling */
#main-body table.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}
#main-body table.table thead th {
    padding: 1rem 1.25rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    background: var(--vc-bg-elevated);
    border-bottom: 1px solid var(--vc-border-default);
    text-align: left;
}
#main-body table.table tbody td {
    padding: 0.875rem 1.25rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    border-top: 1px solid var(--vc-border-subtle);
    vertical-align: middle;
}
#main-body table.table tbody tr:hover {
    background: rgba(248, 250, 252, 0.6);
}

/* Generic labels / badges */
#main-body .label,
#main-body .badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: 600;
    background: var(--vc-border-subtle);
    color: var(--vc-text-secondary);
}
#main-body .label-success,
#main-body .badge-success { background: #ECFDF5; color: var(--vc-success); }
#main-body .label-warning,
#main-body .badge-warning { background: var(--vc-warning-bg); color: var(--vc-warning); }
#main-body .label-danger,
#main-body .badge-danger  { background: var(--vc-danger-bg);  color: var(--vc-danger);  }
#main-body .label-info,
#main-body .badge-info    { background: var(--vc-info-bg);    color: var(--vc-info);    }

/* Generic page headings */
#main-body h1:not(.vc-dash-page-title):not(.vc-svc-title):not(.vc-dom-list-title):not(.vc-inv-title):not(.vc-tk-title):not(.vc-fund-title) {
    font-size: var(--vc-text-3xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
}
#main-body h2:not(.vc-dash-section-title) {
    font-size: var(--vc-text-xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    letter-spacing: -0.01em;
    margin: 1.5rem 0 0.75rem;
}
#main-body h3 {
    font-size: var(--vc-text-lg);
    font-weight: 600;
    color: var(--vc-text-primary);
    margin: 1.25rem 0 0.75rem;
}

/* Pagination */
#main-body .pagination {
    display: inline-flex;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}
#main-body .pagination li > a,
#main-body .pagination li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.625rem;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    background: var(--vc-bg-surface);
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-xs);
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms, color 150ms;
}
#main-body .pagination li.active > a,
#main-body .pagination li.active > span,
#main-body .pagination .page-item.active .page-link {
    background: var(--vc-primary);
    color: #fff;
    border-color: var(--vc-primary);
}
#main-body .pagination li > a:hover {
    background: var(--vc-bg-elevated);
    color: var(--vc-text-primary);
}

/* Forms — checkbox / radio */
#main-body .form-check {
    padding-left: 0;
    margin-bottom: 0.5rem;
}
#main-body .form-check-input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--vc-primary);
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* DataTables (some pages still use them) */
#main-body .dataTables_wrapper { font-size: var(--vc-text-sm); }
#main-body .dataTables_wrapper .dataTables_filter input,
#main-body .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    padding: 0.375rem 0.75rem;
    margin-left: 0.5rem;
}


/* ==== PAGE: 2e. lagom-header.css ==== */
/* ==========================================================================
   Vercaa Homepage — Scoped CSS
   All styles under .vercaa-home to avoid Lagom2 conflicts
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
.vercaa-home {
  /* Brand Colors */
  --vh-purple: #a83fff;
  --vh-purple-light: #c084fc;
  --vh-purple-dark: #7c3aed;
  --vh-purple-50: #faf5ff;
  --vh-purple-100: #f3e8ff;
  --vh-purple-200: #e9d5ff;

  --vh-orange: #f97316;
  --vh-orange-alt: #FF6E07;
  --vh-orange-light: #fb923c;
  --vh-orange-50: #fff7ed;
  --vh-orange-100: #ffedd5;
  --vh-orange-200: #fed7aa;

  --vh-green: #22c55e;
  --vh-green-alt: #10b981;
  --vh-green-light: #4ade80;
  --vh-green-50: #f0fdf4;
  --vh-green-100: #dcfce7;
  --vh-green-200: #bbf7d0;

  /* Neutral Palette */
  --vh-white: #ffffff;
  --vh-black: #000000;
  --vh-gray-50: #f9fafb;
  --vh-gray-100: #f3f4f6;
  --vh-gray-200: #e5e7eb;
  --vh-gray-300: #d1d5db;
  --vh-gray-400: #9ca3af;
  --vh-gray-500: #6b7280;
  --vh-gray-600: #4b5563;
  --vh-gray-700: #374151;
  --vh-gray-800: #1f2937;
  --vh-gray-900: #111827;
  --vh-slate-700: #334155;
  --vh-slate-800: #1e293b;
  --vh-slate-900: #0f172a;

  /* Semantic Colors */
  --vh-text-primary: rgba(41, 41, 41, 1);
  --vh-text-secondary: var(--vh-gray-600);
  --vh-text-muted: var(--vh-gray-500);
  --vh-bg-primary: var(--vh-white);
  --vh-bg-muted: var(--vh-gray-50);
  --vh-border: var(--vh-gray-200);

  /* Status Colors */
  --vh-red-400: #f87171;
  --vh-red-500: #ef4444;
  --vh-yellow-400: #facc15;
  --vh-yellow-500: #eab308;
  --vh-blue-400: #60a5fa;
  --vh-blue-500: #3b82f6;
  --vh-blue-600: #2563eb;
  --vh-indigo-500: #6366f1;
  --vh-indigo-600: #4f46e5;
  --vh-indigo-700: #4338ca;
  --vh-indigo-900: #312e81;
  --vh-emerald-400: #34d399;
  --vh-emerald-500: #10b981;
  --vh-emerald-600: #059669;
  --vh-rose-400: #fb7185;
  --vh-rose-500: #f43f5e;
  --vh-pink-400: #f472b6;
  --vh-pink-500: #ec4899;
  --vh-cyan-600: #0891b2;
  --vh-teal-500: #14b8a6;

  /* Typography */
  --vh-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vh-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --vh-font-serif: Times, "Times New Roman", Georgia, serif;

  /* Spacing (base 0.25rem = 4px) */
  --vh-sp: 0.25rem;

  /* Border Radius */
  --vh-radius-sm: 0.25rem;
  --vh-radius: 0.5rem;
  --vh-radius-md: 0.375rem;
  --vh-radius-lg: 0.5rem;
  --vh-radius-xl: 0.75rem;
  --vh-radius-2xl: 1rem;
  --vh-radius-3xl: 1.5rem;
  --vh-radius-full: 9999px;

  /* Shadows */
  --vh-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --vh-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --vh-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --vh-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --vh-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --vh-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);

  /* Transitions */
  --vh-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --vh-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --vh-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --vh-duration-fast: 150ms;
  --vh-duration: 300ms;
  --vh-duration-slow: 500ms;

  /* Z-index layers */
  --vh-z-bg: -10;
  --vh-z-base: 1;
  --vh-z-overlay: 10;
  --vh-z-dropdown: 40;
  --vh-z-header: 50;
  --vh-z-modal: 100;
}

/* --------------------------------------------------------------------------
   2. Base Reset (scoped)
   -------------------------------------------------------------------------- */
.vercaa-home,
.vercaa-home *,
.vercaa-home *::before,
.vercaa-home *::after {
  box-sizing: border-box;
}

/* Margin/padding reset scoped to navigation components only */
.vh-header *,
.vh-header *::before,
.vh-header *::after,
.vh-footer *,
.vh-footer *::before,
.vh-footer *::after,
.vh-mobile-menu *,
.vh-mobile-menu *::before,
.vh-mobile-menu *::after {
  margin: 0;
  padding: 0;
}

.vercaa-home {
  font-family: var(--vh-font-sans);
  line-height: 1.5;
  color: var(--vh-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* Media reset scoped to nav/header/footer; page content retains normal img behaviour */
.vh-header img,
.vh-header svg,
.vh-header video,
.vh-footer img,
.vh-footer svg,
.vh-footer video,
.vh-mobile-menu img,
.vh-mobile-menu svg,
.vh-mobile-menu video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Anchor reset scoped to nav/header/footer only — does NOT affect page content */
.vh-header a,
.vh-footer a,
.vh-mobile-menu a {
  color: inherit;
  text-decoration: none;
}

/* List reset scoped to nav/header/footer only */
.vh-header ul,
.vh-header ol,
.vh-footer ul,
.vh-footer ol,
.vh-mobile-menu ul,
.vh-mobile-menu ol {
  list-style: none;
}

/* Button reset scoped to nav/header/footer only — does NOT affect page content buttons */
.vh-header button,
.vh-footer button,
.vh-mobile-menu button {
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
}

/* Input font reset scoped to nav/header/footer only */
.vh-header input,
.vh-header select,
.vh-header textarea,
.vh-footer input,
.vh-footer select,
.vh-footer textarea {
  font: inherit;
}

/* --------------------------------------------------------------------------
   3. Layout Utilities
   -------------------------------------------------------------------------- */

/* Container */
.vercaa-home .vh-container {
  width: 100%;
  max-width: 80rem; /* 1280px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .vercaa-home .vh-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .vercaa-home .vh-container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 1024px) {
  .vercaa-home .vh-container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (min-width: 1280px) {
  .vercaa-home .vh-container {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* Full-bleed container (for hero, header) */
.vercaa-home .vh-full-bleed {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .vercaa-home .vh-full-bleed { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 768px) {
  .vercaa-home .vh-full-bleed { padding-left: 3rem; padding-right: 3rem; }
}
@media (min-width: 1024px) {
  .vercaa-home .vh-full-bleed { padding-left: 4rem; padding-right: 4rem; }
}
@media (min-width: 1280px) {
  .vercaa-home .vh-full-bleed { padding-left: 5rem; padding-right: 5rem; }
}

/* Flexbox helpers */
.vercaa-home .vh-flex { display: flex; }
.vercaa-home .vh-flex-col { display: flex; flex-direction: column; }
.vercaa-home .vh-flex-wrap { flex-wrap: wrap; }
.vercaa-home .vh-flex-1 { flex: 1; }
.vercaa-home .vh-flex-none { flex: none; }
.vercaa-home .vh-shrink-0 { flex-shrink: 0; }
.vercaa-home .vh-items-center { align-items: center; }
.vercaa-home .vh-items-start { align-items: flex-start; }
.vercaa-home .vh-items-baseline { align-items: baseline; }
.vercaa-home .vh-justify-center { justify-content: center; }
.vercaa-home .vh-justify-between { justify-content: space-between; }
.vercaa-home .vh-gap-1 { gap: 0.25rem; }
.vercaa-home .vh-gap-1\.5 { gap: 0.375rem; }
.vercaa-home .vh-gap-2 { gap: 0.5rem; }
.vercaa-home .vh-gap-3 { gap: 0.75rem; }
.vercaa-home .vh-gap-4 { gap: 1rem; }
.vercaa-home .vh-gap-6 { gap: 1.5rem; }
.vercaa-home .vh-gap-8 { gap: 2rem; }
.vercaa-home .vh-gap-10 { gap: 2.5rem; }
.vercaa-home .vh-gap-12 { gap: 3rem; }

/* Grid */
.vercaa-home .vh-grid { display: grid; }
.vercaa-home .vh-grid-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vercaa-home .vh-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vercaa-home .vh-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vercaa-home .vh-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vercaa-home .vh-grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.vercaa-home .vh-col-span-4 { grid-column: span 4 / span 4; }
.vercaa-home .vh-col-span-5 { grid-column: span 5 / span 5; }
.vercaa-home .vh-col-span-8 { grid-column: span 8 / span 8; }
.vercaa-home .vh-col-span-12 { grid-column: span 12 / span 12; }

/* Responsive grid overrides */
@media (min-width: 768px) {
  .vercaa-home .vh-md-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vercaa-home .vh-md-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .vercaa-home .vh-lg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vercaa-home .vh-lg-grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .vercaa-home .vh-lg-col-span-4 { grid-column: span 4 / span 4; }
  .vercaa-home .vh-lg-col-span-5 { grid-column: span 5 / span 5; }
}

/* Positioning */
.vercaa-home .vh-relative { position: relative; }
.vercaa-home .vh-absolute { position: absolute; }
.vercaa-home .vh-fixed { position: fixed; }
.vercaa-home .vh-inset-0 { inset: 0; }
.vercaa-home .vh-overflow-hidden { overflow: hidden; }

/* Display */
.vercaa-home .vh-block { display: block; }
.vercaa-home .vh-inline-block { display: inline-block; }
.vercaa-home .vh-inline-flex { display: inline-flex; }
.vercaa-home .vh-hidden { display: none; }

@media (min-width: 1024px) {
  .vercaa-home .vh-lg-flex { display: flex; }
  .vercaa-home .vh-lg-hidden { display: none; }
  .vercaa-home .vh-lg-block { display: block; }
}

@media (max-width: 1023px) {
  .vercaa-home .vh-mobile-only { display: block; }
  .vercaa-home .vh-desktop-only { display: none; }
}
@media (min-width: 1024px) {
  .vercaa-home .vh-mobile-only { display: none; }
  .vercaa-home .vh-desktop-only { display: block; }
}

/* Sizing */
.vercaa-home .vh-w-full { width: 100%; }
.vercaa-home .vh-h-full { height: 100%; }
.vercaa-home .vh-min-h-screen { min-height: 100vh; }

/* Text alignment */
.vercaa-home .vh-text-center { text-align: center; }
.vercaa-home .vh-text-left { text-align: left; }
.vercaa-home .vh-text-right { text-align: right; }

/* Pointer */
.vercaa-home .vh-pointer { cursor: pointer; }
.vercaa-home .vh-pointer-none { pointer-events: none; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.vercaa-home .vh-text-xs { font-size: 0.75rem; line-height: 1rem; }
.vercaa-home .vh-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.vercaa-home .vh-text-base { font-size: 1rem; line-height: 1.5rem; }
.vercaa-home .vh-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.vercaa-home .vh-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.vercaa-home .vh-text-2xl { font-size: 1.5rem; line-height: 2rem; }
.vercaa-home .vh-text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.vercaa-home .vh-text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.vercaa-home .vh-text-5xl { font-size: 3rem; line-height: 1; }
.vercaa-home .vh-text-6xl { font-size: 3.75rem; line-height: 1; }
.vercaa-home .vh-text-7xl { font-size: 4.5rem; line-height: 1; }
.vercaa-home .vh-text-8xl { font-size: 6rem; line-height: 1; }

.vercaa-home .vh-font-normal { font-weight: 400; }
.vercaa-home .vh-font-medium { font-weight: 500; }
.vercaa-home .vh-font-semibold { font-weight: 600; }
.vercaa-home .vh-font-bold { font-weight: 700; }

.vercaa-home .vh-tracking-tight { letter-spacing: -0.025em; }
.vercaa-home .vh-leading-tight { line-height: 1.25; }
.vercaa-home .vh-leading-relaxed { line-height: 1.625; }
.vercaa-home .vh-leading-none { line-height: 1; }

.vercaa-home .vh-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Color utilities */
.vercaa-home .vh-c-purple { color: var(--vh-purple); }
.vercaa-home .vh-c-orange { color: var(--vh-orange); }
.vercaa-home .vh-c-green { color: var(--vh-green); }
.vercaa-home .vh-c-green-alt { color: var(--vh-green-alt); }
.vercaa-home .vh-c-white { color: var(--vh-white); }
.vercaa-home .vh-c-muted { color: var(--vh-text-muted); }
.vercaa-home .vh-c-secondary { color: var(--vh-text-secondary); }
.vercaa-home .vh-c-slate-700 { color: var(--vh-slate-700); }
.vercaa-home .vh-c-slate-900 { color: var(--vh-slate-900); }
.vercaa-home .vh-c-gray-500 { color: var(--vh-gray-500); }
.vercaa-home .vh-c-gray-600 { color: var(--vh-gray-600); }
.vercaa-home .vh-c-gray-900 { color: var(--vh-gray-900); }
.vercaa-home .vh-c-blue-500 { color: var(--vh-blue-500); }
.vercaa-home .vh-c-blue-600 { color: var(--vh-blue-600); }
.vercaa-home .vh-c-red-400 { color: var(--vh-red-400); }
.vercaa-home .vh-c-red-500 { color: var(--vh-red-500); }
.vercaa-home .vh-c-yellow-400 { color: var(--vh-yellow-400); }
.vercaa-home .vh-c-yellow-500 { color: var(--vh-yellow-500); }
.vercaa-home .vh-c-indigo-700 { color: var(--vh-indigo-700); }
.vercaa-home .vh-c-indigo-900 { color: var(--vh-indigo-900); }

/* --------------------------------------------------------------------------
   5. Header Component
   -------------------------------------------------------------------------- */
.vercaa-home .vh-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--vh-z-header);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
  transition: background var(--vh-duration) var(--vh-ease),
              box-shadow var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-header.vh-header--scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--vh-shadow-sm);
}

.vercaa-home .vh-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem; /* 64px */
}

/* Logo */
.vercaa-home .vh-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vercaa-home .vh-logo-dots {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.vercaa-home .vh-logo-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--vh-radius-full);
}

.vercaa-home .vh-logo-dot--purple { background-color: var(--vh-purple); }
.vercaa-home .vh-logo-dot--orange { background-color: var(--vh-orange); }
.vercaa-home .vh-logo-dot--green { background-color: var(--vh-green); }

.vercaa-home .vh-logo-text {
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.025em;
  color: var(--vh-text-primary);
}

/* Navigation */
.vercaa-home .vh-nav {
  display: none;
  align-items: center;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .vercaa-home .vh-nav { display: flex; }
}

.vercaa-home .vh-nav-item {
  position: relative;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--vh-gray-700);
  transition: color var(--vh-duration-fast) var(--vh-ease);
  cursor: pointer;
}

.vercaa-home .vh-nav-item:hover {
  color: #663399;
}

.vercaa-home .vh-nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.75rem; /* invisible hover bridge */
}

/* Mega Menu */
.vercaa-home .vh-mega-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 18rem;
  padding: 0.5rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--vh-radius-xl);
  box-shadow: var(--vh-shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(0.5rem);
  margin-top: 0.5rem;
  transition: all var(--vh-duration) var(--vh-ease);
  z-index: var(--vh-z-dropdown);
}

.vercaa-home .vh-nav-item:hover .vh-mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.vercaa-home .vh-mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.vercaa-home .vh-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--vh-radius-lg);
  position: relative;
  transition: all var(--vh-duration-fast) var(--vh-ease);
  color: #717182;
}

.vercaa-home .vh-mega-item .vh-mega-left-border {
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  border-radius: 9999px;
  opacity: 0;
  transform: scaleY(0);
  transition: all var(--vh-duration-fast) var(--vh-ease);
}

.vercaa-home .vh-mega-item .vh-mega-right-dot {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  transition: all var(--vh-duration-fast) var(--vh-ease);
}

/* Hover effects for different dropdowns */
.vercaa-home .vh-mega-item[data-color="purple"]:hover {
  background: rgba(168,63,255,0.03);
  color: #a83fff;
  transform: translateX(2px);
}

.vercaa-home .vh-mega-item[data-color="purple"]:hover .vh-mega-left-border {
  background: #a83fff;
  opacity: 1;
  transform: scaleY(1);
}

.vercaa-home .vh-mega-item[data-color="purple"]:hover .vh-mega-right-dot {
  background: #a83fff;
  opacity: 0.6;
}

.vercaa-home .vh-mega-item[data-color="orange"]:hover {
  background: rgba(249,115,22,0.03);
  color: #f97316;
  transform: translateX(2px);
}

.vercaa-home .vh-mega-item[data-color="orange"]:hover .vh-mega-left-border {
  background: #f97316;
  opacity: 1;
  transform: scaleY(1);
}

.vercaa-home .vh-mega-item[data-color="orange"]:hover .vh-mega-right-dot {
  background: #f97316;
  opacity: 0.6;
}

.vercaa-home .vh-mega-item[data-color="green"]:hover {
  background: rgba(16,185,129,0.03);
  color: #10b981;
  transform: translateX(2px);
}

.vercaa-home .vh-mega-item[data-color="green"]:hover .vh-mega-left-border {
  background: #10b981;
  opacity: 1;
  transform: scaleY(1);
}

.vercaa-home .vh-mega-item[data-color="green"]:hover .vh-mega-right-dot {
  background: #10b981;
  opacity: 0.6;
}

.vercaa-home .vh-mega-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vh-radius-lg);
  flex-shrink: 0;
  background: rgba(113,113,130,0.06);
  color: #717182;
  transition: all var(--vh-duration-fast) var(--vh-ease);
}

.vercaa-home .vh-mega-item[data-color="purple"]:hover .vh-mega-icon {
  background: rgba(168,63,255,0.09);
  color: #a83fff;
}

.vercaa-home .vh-mega-item[data-color="orange"]:hover .vh-mega-icon {
  background: rgba(249,115,22,0.09);
  color: #f97316;
}

.vercaa-home .vh-mega-item[data-color="green"]:hover .vh-mega-icon {
  background: rgba(16,185,129,0.09);
  color: #10b981;
}

/* Mega icon color classes removed - now using data-color hover effects */

.vercaa-home .vh-mega-title {
  font-size: 0.875rem;
  font-weight: 400;
  color: #717182;
  transition: all var(--vh-duration-fast) var(--vh-ease);
}

.vercaa-home .vh-mega-item:hover .vh-mega-title {
  font-weight: 500;
}

.vercaa-home .vh-mega-desc {
  font-size: 0.75rem;
  color: var(--vh-gray-500);
  line-height: 1.4;
}

/* Header Right */
.vercaa-home .vh-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.vercaa-home .vh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--vh-radius-lg);
  transition: all var(--vh-duration-fast) var(--vh-ease);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.5;
}

.vercaa-home .vh-btn--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.vercaa-home .vh-btn--xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.vercaa-home .vh-btn--lg {
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
}

/* Ghost button */
.vercaa-home .vh-btn--ghost {
  background: transparent;
  color: var(--vh-gray-700);
}

.vercaa-home .vh-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--vh-gray-900);
}

/* Outline button */
.vercaa-home .vh-btn--outline {
  background: transparent;
  border-color: var(--vh-gray-300);
  color: var(--vh-gray-800);
}

.vercaa-home .vh-btn--outline:hover {
  background: var(--vh-gray-50);
  border-color: var(--vh-gray-400);
}

/* Primary button */
.vercaa-home .vh-btn--primary {
  background: var(--vh-purple);
  color: var(--vh-white);
}

.vercaa-home .vh-btn--primary:hover {
  background: var(--vh-purple-dark);
}

/* Green button */
.vercaa-home .vh-btn--green {
  background: linear-gradient(to right, var(--vh-green), var(--vh-emerald-600));
  color: var(--vh-white);
}

.vercaa-home .vh-btn--green:hover {
  opacity: 0.9;
}

/* Indigo/AI gradient button */
.vercaa-home .vh-btn--indigo {
  background: linear-gradient(to right, var(--vh-indigo-600), var(--vh-purple));
  color: var(--vh-white);
  border-radius: var(--vh-radius-xl);
}

.vercaa-home .vh-btn--indigo:hover {
  background: linear-gradient(to right, var(--vh-indigo-700), var(--vh-purple-dark));
}

/* Orange button */
.vercaa-home .vh-btn--orange {
  background: var(--vh-orange);
  color: var(--vh-white);
}

.vercaa-home .vh-btn--orange:hover {
  opacity: 0.9;
}

/* Disabled state */
.vercaa-home .vh-btn:disabled,
.vercaa-home .vh-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Icon-only button */
.vercaa-home .vh-btn--icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: var(--vh-radius-full);
}

/* --------------------------------------------------------------------------
   7. Badge
   -------------------------------------------------------------------------- */
.vercaa-home .vh-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: var(--vh-radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.5;
}

.vercaa-home .vh-badge--outline {
  background: transparent;
  border-color: var(--vh-gray-300);
  color: var(--vh-gray-800);
}

.vercaa-home .vh-badge--purple {
  background: rgba(168, 63, 255, 0.1);
  border-color: rgba(168, 63, 255, 0.3);
  color: var(--vh-purple);
}

.vercaa-home .vh-badge--orange {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.3);
  color: var(--vh-orange);
}

.vercaa-home .vh-badge--green {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--vh-green);
}

.vercaa-home .vh-badge--blue {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--vh-blue-600);
}

.vercaa-home .vh-badge--yellow {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.3);
  color: var(--vh-yellow-500);
}

.vercaa-home .vh-badge--red {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--vh-red-500);
}

.vercaa-home .vh-badge--muted {
  background: var(--vh-gray-100);
  color: var(--vh-gray-600);
}

.vercaa-home .vh-badge--live-preview {
  background: var(--vh-purple-50);
  color: var(--vh-purple-dark);
  border-color: var(--vh-purple-200);
}

.vercaa-home .vh-badge--smart {
  background: linear-gradient(to right, rgba(99, 102, 241, 0.1), rgba(168, 63, 255, 0.1));
  color: var(--vh-indigo-700);
  border-color: rgba(99, 102, 241, 0.2);
}

/* --------------------------------------------------------------------------
   8. Card (glassmorphism base)
   -------------------------------------------------------------------------- */
.vercaa-home .vh-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--vh-radius-2xl);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform var(--vh-duration) var(--vh-ease),
              box-shadow var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-card:hover {
  transform: scale(1.01);
}

.vercaa-home .vh-card--solid {
  background: var(--vh-white);
  backdrop-filter: none;
  border-color: var(--vh-gray-200);
}

.vercaa-home .vh-card--solid:hover {
  box-shadow: var(--vh-shadow-lg);
}

/* Glass overlays for cards */
.vercaa-home .vh-card__glass-bg {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: inherit;
  transition: background var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-card__glass-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.15), transparent);
  border-radius: inherit;
  transition: background var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-card:hover .vh-card__glass-bg {
  background: rgba(255, 255, 255, 0.18);
}

.vercaa-home .vh-card:hover .vh-card__glass-overlay {
  background: linear-gradient(to bottom right, rgba(255,255,255,0.25), transparent);
}

.vercaa-home .vh-card__content {
  position: relative;
  z-index: var(--vh-z-base);
}

/* Feature card styling */
.vercaa-home .vh-feature-card {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border-radius: var(--vh-radius-2xl);
  background: linear-gradient(to bottom right, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  box-shadow: var(--vh-shadow-sm);
  transition: all 500ms var(--vh-ease);
  cursor: pointer;
}

.vercaa-home .vh-feature-card:hover,
.vercaa-home .vh-feature-card.vh-feature-card--active {
  box-shadow: var(--vh-shadow-xl);
  transform: scale(1.02);
}

.vercaa-home .vh-feature-card__gradient {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms var(--vh-ease);
}

.vercaa-home .vh-feature-card:hover .vh-feature-card__gradient,
.vercaa-home .vh-feature-card.vh-feature-card--active .vh-feature-card__gradient {
  opacity: 1;
}

.vercaa-home .vh-feature-card__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(24px);
  transform: scale(1.5);
  transition: opacity 500ms var(--vh-ease);
}

.vercaa-home .vh-feature-card:hover .vh-feature-card__glow,
.vercaa-home .vh-feature-card.vh-feature-card--active .vh-feature-card__glow {
  opacity: 0.2;
}

/* Feature card icon container */
.vercaa-home .vh-feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--vh-radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-feature-card:hover .vh-feature-icon,
.vercaa-home .vh-feature-card.vh-feature-card--active .vh-feature-icon {
  transform: scale(1.1);
}

/* Feature performance bar */
.vercaa-home .vh-feature-bar {
  flex: 1;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--vh-radius-full);
  overflow: hidden;
}

.vercaa-home .vh-feature-bar__fill {
  height: 100%;
  border-radius: var(--vh-radius-full);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1000ms var(--vh-ease) 200ms;
}

.vercaa-home .vh-feature-card:hover .vh-feature-bar__fill,
.vercaa-home .vh-feature-card.vh-feature-card--active .vh-feature-bar__fill {
  transform: scaleX(1);
}

/* Tech stack indicators */
.vercaa-home .vh-tech-bars {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity var(--vh-duration) var(--vh-ease) 100ms;
}

.vercaa-home .vh-feature-card:hover .vh-tech-bars,
.vercaa-home .vh-feature-card.vh-feature-card--active .vh-tech-bars {
  opacity: 1;
}

.vercaa-home .vh-tech-bar {
  width: 0.25rem;
  height: 2rem;
  border-radius: var(--vh-radius-full);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   9. Dashboard Panel (Interactive Features Panel)
   -------------------------------------------------------------------------- */
/* Hide dashboard on mobile */
@media (max-width: 767px) {
  .vercaa-home .vh-dashboard-wrapper { display: none !important; }
}

.vercaa-home .vh-dashboard {
  position: relative;
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--vh-radius-3xl);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--vh-shadow-2xl);
  overflow: hidden;
}

/* Glass shimmer effect */
.vercaa-home .vh-dashboard__shimmer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.vercaa-home .vh-dashboard__shimmer-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  animation: vh-glass-shimmer 8s infinite linear;
}

.vercaa-home .vh-dashboard__shimmer-reflection {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.05));
  animation: vh-glass-reflection 12s infinite ease-in-out;
}

.vercaa-home .vh-dashboard__content {
  position: relative;
  z-index: var(--vh-z-base);
  padding: 2rem;
}

/* Dashboard header */
.vercaa-home .vh-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.vercaa-home .vh-dashboard-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vercaa-home .vh-dashboard-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--vh-radius-full);
}

.vercaa-home .vh-dashboard-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--vh-slate-900);
}

/* Performance card inside dashboard */
.vercaa-home .vh-perf-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--vh-radius-2xl);
  padding: 1.5rem;
  transition: all var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-perf-card:hover {
  transform: scale(1.01);
}

.vercaa-home .vh-perf-card__bg {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: inherit;
  transition: background var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-perf-card__bg--purple {
  background: linear-gradient(to bottom right, rgba(168,63,255,0.06), transparent);
}

.vercaa-home .vh-perf-card__bg--default {
  background: rgba(255, 255, 255, 0.12);
}

.vercaa-home .vh-perf-card:hover .vh-perf-card__bg--default {
  background: rgba(255, 255, 255, 0.18);
}

.vercaa-home .vh-perf-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.15), transparent);
  border-radius: inherit;
  transition: background var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-perf-card:hover .vh-perf-card__overlay {
  background: linear-gradient(to bottom right, rgba(255,255,255,0.2), transparent);
}

.vercaa-home .vh-perf-card__content {
  position: relative;
  z-index: var(--vh-z-base);
}

/* Metric hero number */
.vercaa-home .vh-metric-hero {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.2;
}

.vercaa-home .vh-metric-value {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.vercaa-home .vh-metric-label {
  font-size: 0.75rem;
  color: var(--vh-slate-700);
}

.vercaa-home .vh-metric-sublabel {
  font-size: 0.6875rem;
  color: var(--vh-gray-500);
}

/* Progress bars */
.vercaa-home .vh-progress {
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--vh-radius-full);
  overflow: hidden;
}

.vercaa-home .vh-progress__bar {
  height: 100%;
  border-radius: var(--vh-radius-full);
  transition: width 1000ms var(--vh-ease);
}

/* Load level gradient helpers */
.vercaa-home .vh-grad-green { background: linear-gradient(to right, var(--vh-green), var(--vh-green-light)); }
.vercaa-home .vh-grad-blue { background: linear-gradient(to right, var(--vh-blue-500), var(--vh-blue-400)); }
.vercaa-home .vh-grad-yellow { background: linear-gradient(to right, var(--vh-yellow-500), var(--vh-yellow-400)); }
.vercaa-home .vh-grad-orange { background: linear-gradient(to right, var(--vh-orange), var(--vh-orange-light)); }
.vercaa-home .vh-grad-red { background: linear-gradient(to right, var(--vh-red-500), var(--vh-red-400)); }
.vercaa-home .vh-grad-purple { background: linear-gradient(to right, var(--vh-purple), var(--vh-purple-light)); }
.vercaa-home .vh-grad-indigo { background: linear-gradient(to right, var(--vh-indigo-600), var(--vh-purple)); }
.vercaa-home .vh-grad-green-emerald { background: linear-gradient(to right, var(--vh-green), var(--vh-emerald-400)); }

/* Slider */
.vercaa-home .vh-slider-container {
  position: relative;
  width: 100%;
  padding: 0.5rem 0;
}

.vercaa-home .vh-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border-radius: var(--vh-radius-full);
  background: var(--vh-gray-200);
  outline: none;
  transition: all var(--vh-duration-fast) var(--vh-ease);
}

.vercaa-home .vh-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--vh-radius-full);
  background: var(--vh-white);
  border: 2px solid var(--vh-purple);
  box-shadow: var(--vh-shadow);
  cursor: pointer;
  transition: all var(--vh-duration-fast) var(--vh-ease);
}

.vercaa-home .vh-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(168, 63, 255, 0.15);
}

.vercaa-home .vh-slider::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--vh-radius-full);
  background: var(--vh-white);
  border: 2px solid var(--vh-purple);
  box-shadow: var(--vh-shadow);
  cursor: pointer;
}

.vercaa-home .vh-slider--orange::-webkit-slider-thumb {
  border-color: var(--vh-orange);
}

.vercaa-home .vh-slider--orange::-moz-range-thumb {
  border-color: var(--vh-orange);
}

.vercaa-home .vh-slider--green::-webkit-slider-thumb {
  border-color: var(--vh-green);
}

.vercaa-home .vh-slider--blue::-webkit-slider-thumb {
  border-color: var(--vh-blue-500);
}

.vercaa-home .vh-slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vercaa-home .vh-slider:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   10. Hero Section
   -------------------------------------------------------------------------- */
.vercaa-home .vh-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--vh-white);
}

.vercaa-home .vh-hero__inner {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding-top: 5rem; /* space for fixed header */
  padding-bottom: 0;
}

.vercaa-home .vh-hero__tagline {
  text-align: center;
  margin-bottom: 3rem;
  padding-top: 2rem;
  position: relative;
  z-index: var(--vh-z-overlay);
}

@media (min-width: 1024px) {
  .vercaa-home .vh-hero__tagline { margin-bottom: 4rem; }
}

.vercaa-home .vh-hero__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--vh-text-primary);
  line-height: 1.25;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.025em;
}

@media (min-width: 1024px) {
  .vercaa-home .vh-hero__title { font-size: 1.875rem; }
}

@media (min-width: 1280px) {
  .vercaa-home .vh-hero__title { font-size: 2.25rem; }
}

.vercaa-home .vh-hero__highlight {
  color: var(--vh-purple);
  font-weight: 700;
  display: inline-block;
  margin-top: 0.5rem;
}

/* Hero animated background */
.vercaa-home .vh-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Fluid gradient blobs */
.vercaa-home .vh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
}

.vercaa-home .vh-blob--purple {
  background: radial-gradient(ellipse at center,
    rgba(168, 63, 255, 0.12) 0%,
    rgba(168, 63, 255, 0.08) 30%,
    rgba(249, 115, 22, 0.06) 60%,
    transparent 100%);
  width: 24rem;
  height: 24rem;
  top: 25%;
  left: 25%;
  filter: blur(40px);
  animation: vh-fluid-flow 20s infinite ease-in-out;
}

.vercaa-home .vh-blob--orange {
  background: radial-gradient(ellipse at center,
    rgba(249, 115, 22, 0.15) 0%,
    rgba(249, 115, 22, 0.1) 25%,
    rgba(16, 185, 129, 0.08) 50%,
    transparent 100%);
  width: 20rem;
  height: 20rem;
  top: 33%;
  right: 25%;
  filter: blur(35px);
  animation: vh-fluid-flow-reverse 18s infinite ease-in-out;
}

.vercaa-home .vh-blob--green {
  background: radial-gradient(ellipse at center,
    rgba(16, 185, 129, 0.12) 0%,
    rgba(16, 185, 129, 0.08) 30%,
    rgba(168, 63, 255, 0.06) 60%,
    transparent 100%);
  width: 18rem;
  height: 18rem;
  bottom: 25%;
  left: 33%;
  filter: blur(30px);
  animation: vh-morphing-blob 22s infinite ease-in-out;
}

.vercaa-home .vh-blob--conic {
  background: conic-gradient(from 0deg,
    rgba(168, 63, 255, 0.08),
    rgba(249, 115, 22, 0.08),
    rgba(16, 185, 129, 0.08),
    rgba(168, 63, 255, 0.08));
  width: 16rem;
  height: 16rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(25px);
  border-radius: 50%;
  animation: vh-fluid-drift 25s infinite ease-in-out;
}

.vercaa-home .vh-blob--organic-1 {
  background: linear-gradient(45deg,
    rgba(249, 115, 22, 0.06) 0%,
    rgba(168, 63, 255, 0.04) 50%,
    transparent 100%);
  width: 12rem;
  height: 12rem;
  top: 16.67%;
  right: 33%;
  filter: blur(20px);
  border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  animation: vh-fluid-flow 20s infinite ease-in-out;
}

.vercaa-home .vh-blob--organic-2 {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.08) 0%,
    rgba(249, 115, 22, 0.05) 50%,
    transparent 100%);
  width: 14rem;
  height: 14rem;
  bottom: 33%;
  right: 25%;
  filter: blur(28px);
  border-radius: 50% 60% 30% 60%/60% 40% 60% 30%;
  animation: vh-morphing-blob 22s infinite ease-in-out;
}

/* Ambient light layer */
.vercaa-home .vh-ambient-light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 100% at 25% 25%, rgba(168,63,255,0.02) 0%, transparent 50%),
    radial-gradient(ellipse 80% 80% at 75% 40%, rgba(249,115,22,0.025) 0%, transparent 50%),
    radial-gradient(ellipse 120% 120% at 50% 80%, rgba(16,185,129,0.02) 0%, transparent 50%);
}

/* Mesh overlay */
.vercaa-home .vh-mesh-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(168,63,255,0.3) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(249,115,22,0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(16,185,129,0.3) 0%, transparent 50%);
  background-size: 400px 400px, 300px 300px, 500px 500px;
  background-position: 0 0, 100px 100px, 200px 50px;
  filter: blur(1px);
}

/* --------------------------------------------------------------------------
   11. Brand Features Section (Vercaa Definition)
   -------------------------------------------------------------------------- */
.vercaa-home .vh-brand {
  width: 100%;
  padding: 4rem 1.5rem;
  background: linear-gradient(to bottom, var(--vh-white), rgba(249,250,251,0.1), var(--vh-white));
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .vercaa-home .vh-brand { padding: 6rem 1.5rem; }
}

/* Ambient blobs for brand section */
.vercaa-home .vh-brand-blob {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  filter: blur(64px);
}

.vercaa-home .vh-brand-blob--purple {
  top: -6rem;
  left: -6rem;
  background: linear-gradient(to bottom right, rgba(168,63,255,0.05), rgba(147,51,234,0.05));
  animation: vh-pulse 4s infinite;
}

.vercaa-home .vh-brand-blob--mixed {
  top: 50%;
  right: -6rem;
  background: linear-gradient(to bottom right, rgba(249,115,22,0.05), rgba(34,197,94,0.05));
  animation: vh-pulse 4s infinite 1s;
}

.vercaa-home .vh-brand-blob--green {
  bottom: -6rem;
  left: 33%;
  background: linear-gradient(to bottom right, rgba(34,197,94,0.05), rgba(168,63,255,0.05));
  animation: vh-pulse 4s infinite 2s;
}

/* Brand name typography */
.vercaa-home .vh-brand-name {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  user-select: none;
}

@media (min-width: 640px) {
  .vercaa-home .vh-brand-name { font-size: 3rem; }
}
@media (min-width: 768px) {
  .vercaa-home .vh-brand-name { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
  .vercaa-home .vh-brand-name { font-size: 4.5rem; }
}
@media (min-width: 1280px) {
  .vercaa-home .vh-brand-name { font-size: 6rem; }
}

.vercaa-home .vh-brand-letter {
  transition: color 200ms ease-in-out;
  color: #030213;
}

/* Definition line */
.vercaa-home .vh-brand-def {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.625;
  color: rgba(0, 0, 0, 0.8);
}

@media (min-width: 640px) {
  .vercaa-home .vh-brand-def { font-size: 1.125rem; }
}
@media (min-width: 768px) {
  .vercaa-home .vh-brand-def { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
  .vercaa-home .vh-brand-def { font-size: 1.5rem; }
}

.vercaa-home .vh-brand-word {
  cursor: pointer;
  font-weight: 500;
  transition: color 200ms var(--vh-ease);
}

.vercaa-home .vh-brand-word:hover,
.vercaa-home .vh-brand-word--active-purple { color: var(--vh-purple); }
.vercaa-home .vh-brand-word--active-orange { color: var(--vh-orange); }
.vercaa-home .vh-brand-word--active-green { color: var(--vh-green); }

.vercaa-home .vh-brand-word strong {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. Pricing Section
   -------------------------------------------------------------------------- */
.vercaa-home .vh-pricing {
  max-width: 80rem;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.vercaa-home .vh-pricing__header {
  text-align: center;
  margin-bottom: 3rem;
}

.vercaa-home .vh-pricing__title {
  font-size: 3rem;
  color: var(--vh-gray-900);
  margin-bottom: 1.5rem;
}

.vercaa-home .vh-pricing__subtitle {
  font-size: 1.25rem;
  color: var(--vh-gray-600);
  max-width: 48rem;
  margin: 0 auto;
}

/* Pricing container */
.vercaa-home .vh-pricing-box {
  background: linear-gradient(to bottom right, var(--vh-white), rgba(249,250,251,0.5), var(--vh-white));
  border: 1px solid rgba(229,231,235,0.5);
  border-radius: var(--vh-radius-3xl);
  padding: 1.5rem;
  box-shadow: var(--vh-shadow-2xl);
  position: relative;
  overflow: hidden;
}

/* Dot pattern bg */
.vercaa-home .vh-pricing-box__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: radial-gradient(circle at 25px 25px, rgba(99,102,241,0.3) 2px, transparent 0);
  background-size: 50px 50px;
}

/* Pricing dashboard header */
.vercaa-home .vh-pricing-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

/* Hosting type cards */
.vercaa-home .vh-hosting-card {
  background: var(--vh-white);
  border: 1px solid var(--vh-gray-200);
  border-radius: var(--vh-radius-xl);
  padding: 1rem;
  cursor: pointer;
  transition: all 200ms var(--vh-ease);
}

.vercaa-home .vh-hosting-card:hover {
  box-shadow: var(--vh-shadow-md);
  transform: scale(1.02);
}

.vercaa-home .vh-hosting-card:active {
  transform: scale(0.98);
}

.vercaa-home .vh-hosting-card--active-purple {
  border-color: var(--vh-purple-200);
  background: rgba(250, 245, 255, 0.3);
  box-shadow: var(--vh-shadow-lg);
}

.vercaa-home .vh-hosting-card--active-green {
  border-color: var(--vh-green-200);
  background: rgba(240, 253, 244, 0.3);
  box-shadow: var(--vh-shadow-lg);
}

.vercaa-home .vh-hosting-card--active-orange {
  border-color: var(--vh-orange-200);
  background: rgba(255, 247, 237, 0.3);
  box-shadow: var(--vh-shadow-lg);
}

.vercaa-home .vh-hosting-card--active-blue {
  border-color: rgba(191, 219, 254, 1);
  background: rgba(239, 246, 255, 0.3);
  box-shadow: var(--vh-shadow-lg);
}

/* Hosting card icon */
.vercaa-home .vh-hosting-icon {
  padding: 0.375rem;
  border-radius: var(--vh-radius-lg);
}

.vercaa-home .vh-hosting-icon--purple { background: rgba(243, 232, 255, 1); color: var(--vh-purple-dark); }
.vercaa-home .vh-hosting-icon--green { background: rgba(220, 252, 231, 1); color: var(--vh-green); }
.vercaa-home .vh-hosting-icon--orange { background: rgba(255, 237, 213, 1); color: var(--vh-orange); }
.vercaa-home .vh-hosting-icon--blue { background: rgba(219, 234, 254, 1); color: var(--vh-blue-600); }
.vercaa-home .vh-hosting-icon--gray { background: var(--vh-gray-100); color: var(--vh-gray-600); }

.vercaa-home .vh-hosting-price-box {
  text-align: center;
  padding: 0.5rem;
  background: var(--vh-gray-50);
  border-radius: var(--vh-radius-lg);
}

/* Configuration panel */
.vercaa-home .vh-config-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: var(--vh-radius-2xl);
  padding: 1.25rem;
  box-shadow: var(--vh-shadow-lg);
  height: 100%;
}

/* Resource monitor */
.vercaa-home .vh-resource-monitor {
  padding: 0.75rem;
  background: rgba(249, 250, 251, 0.5);
  border-radius: var(--vh-radius-xl);
  border: 1px solid rgba(229, 231, 235, 0.5);
  margin-bottom: 1rem;
}

/* Resource dots */
.vercaa-home .vh-resource-dots {
  display: flex;
  gap: 0.25rem;
}

.vercaa-home .vh-resource-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--vh-radius-full);
  transition: all var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-resource-dot--active {
  background: linear-gradient(to bottom right, var(--vh-blue-400), var(--vh-blue-600));
}

.vercaa-home .vh-resource-dot--inactive {
  background: var(--vh-gray-200);
}

/* Resource bar */
.vercaa-home .vh-resource-bar {
  height: 0.375rem;
  background: var(--vh-gray-200);
  border-radius: var(--vh-radius-full);
  overflow: hidden;
}

.vercaa-home .vh-resource-bar__fill {
  height: 100%;
  border-radius: var(--vh-radius-full);
  transition: width 1000ms ease-out;
}

/* Per-day stats grid */
.vercaa-home .vh-perday-stat {
  text-align: center;
  padding: 0.75rem;
  border-radius: var(--vh-radius-lg);
  border: 1px solid;
}

.vercaa-home .vh-perday-stat--purple {
  background: var(--vh-purple-50);
  border-color: var(--vh-purple-200);
}

.vercaa-home .vh-perday-stat--blue {
  background: rgba(239, 246, 255, 1);
  border-color: rgba(191, 219, 254, 1);
}

.vercaa-home .vh-perday-stat--gray {
  background: var(--vh-gray-50);
  border-color: var(--vh-gray-200);
}

/* Template card in perday */
.vercaa-home .vh-template-card {
  padding: 1rem;
  border-radius: var(--vh-radius-xl);
  border: 2px solid;
  box-shadow: var(--vh-shadow-lg);
  position: relative;
}

.vercaa-home .vh-template-thumbnail {
  position: relative;
  height: 4rem;
  margin-bottom: 0.75rem;
  border-radius: var(--vh-radius-lg);
  overflow: hidden;
}

/* Template navigation buttons */
.vercaa-home .vh-template-nav {
  padding: 0.625rem;
  background: var(--vh-white);
  border: 1px solid var(--vh-gray-200);
  border-radius: var(--vh-radius-xl);
  transition: all 200ms var(--vh-ease);
  cursor: pointer;
  flex-shrink: 0;
}

.vercaa-home .vh-template-nav:hover {
  border-color: var(--vh-gray-300);
  box-shadow: var(--vh-shadow-md);
}

/* AI Recommendation panel */
.vercaa-home .vh-ai-panel {
  background: linear-gradient(to bottom right, rgba(238,242,255,1), rgba(250,245,255,1), rgba(239,246,255,1));
  border: 1px solid rgba(199,210,254,1);
  border-radius: var(--vh-radius-2xl);
  padding: 1rem;
  box-shadow: var(--vh-shadow-lg);
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}

.vercaa-home .vh-ai-panel__bg {
  position: absolute;
  inset: 0;
  opacity: 0.05;
}

.vercaa-home .vh-ai-panel__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, var(--vh-indigo-600), var(--vh-purple));
}

.vercaa-home .vh-ai-panel__bg-stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px);
}

/* AI type picker buttons */
.vercaa-home .vh-ai-option {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: var(--vh-radius-lg);
  border: 1px solid var(--vh-gray-200);
  background: var(--vh-white);
  color: var(--vh-gray-700);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--vh-duration-fast) var(--vh-ease);
  text-align: left;
}

.vercaa-home .vh-ai-option:hover {
  border-color: rgba(199,210,254,1);
}

.vercaa-home .vh-ai-option--active {
  background: rgba(224,231,255,1);
  border-color: rgba(165,180,252,1);
  color: var(--vh-indigo-900);
}

/* Summary panel (right side of pricing) */
.vercaa-home .vh-summary-panel {
  background: linear-gradient(to bottom right, var(--vh-white), var(--vh-gray-50));
  border: 1px solid var(--vh-gray-200);
  border-radius: var(--vh-radius-2xl);
  padding: 1.5rem;
  box-shadow: var(--vh-shadow-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Progress indicator (step dots) */
.vercaa-home .vh-progress-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.vercaa-home .vh-progress-step {
  height: 0.125rem;
  width: 2rem;
  border-radius: var(--vh-radius-full);
  background: var(--vh-gray-300);
  transition: background var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-progress-step--active {
  background: var(--vh-green);
}

/* Spec list */
.vercaa-home .vh-spec-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vercaa-home .vh-spec-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--vh-gray-700);
}

.vercaa-home .vh-spec-check {
  width: 1rem;
  height: 1rem;
  color: var(--vh-green);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   13. Testimonials Section
   -------------------------------------------------------------------------- */
.vercaa-home .vh-testimonials {
  padding: 4rem 1.5rem;
}

@media (min-width: 1024px) {
  .vercaa-home .vh-testimonials { padding: 6rem 1.5rem; }
}

.vercaa-home .vh-testimonial-card {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--vh-radius-2xl);
  background: var(--vh-white);
  border: 1px solid var(--vh-gray-200);
  box-shadow: var(--vh-shadow-sm);
  transition: all var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-testimonial-card:hover {
  box-shadow: var(--vh-shadow-lg);
  transform: translateY(-2px);
}

/* Star rating */
.vercaa-home .vh-stars {
  display: flex;
  gap: 0.125rem;
}

.vercaa-home .vh-star {
  color: #eab308;
  width: 1rem;
  height: 1rem;
}

.vercaa-home .vh-star--filled {
  fill: #eab308;
}

/* Verified badge */
.vercaa-home .vh-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--vh-green);
  font-weight: 500;
}

/* Avatar */
.vercaa-home .vh-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--vh-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--vh-white);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.vercaa-home .vh-footer {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.vercaa-home .vh-footer__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 2rem;
}

.vercaa-home .vh-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .vercaa-home .vh-footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
  }
}

.vercaa-home .vh-footer-heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vh-gray-900);
  margin-bottom: 1rem;
}

.vercaa-home .vh-footer-link {
  display: block;
  font-size: 0.875rem;
  color: var(--vh-gray-600);
  padding: 0.25rem 0;
  transition: color var(--vh-duration-fast) var(--vh-ease);
}

.vercaa-home .vh-footer-link:hover {
  color: var(--vh-gray-900);
}

/* Newsletter input */
.vercaa-home .vh-newsletter {
  display: flex;
  gap: 0.5rem;
}

.vercaa-home .vh-newsletter__input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--vh-gray-300);
  border-radius: var(--vh-radius-lg);
  background: var(--vh-white);
  color: var(--vh-gray-900);
  outline: none;
  transition: border-color var(--vh-duration-fast) var(--vh-ease);
}

.vercaa-home .vh-newsletter__input:focus {
  border-color: var(--vh-purple);
  box-shadow: 0 0 0 3px rgba(168, 63, 255, 0.1);
}

.vercaa-home .vh-newsletter__input::placeholder {
  color: var(--vh-gray-400);
}

/* Social icons */
.vercaa-home .vh-social-icons {
  display: flex;
  gap: 0.75rem;
}

.vercaa-home .vh-social-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vh-radius-full);
  background: var(--vh-gray-100);
  color: var(--vh-gray-600);
  transition: all var(--vh-duration-fast) var(--vh-ease);
}

.vercaa-home .vh-social-icon:hover {
  background: var(--vh-gray-200);
  color: var(--vh-gray-900);
}

/* Footer bottom bar */
.vercaa-home .vh-footer-bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--vh-gray-200);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 768px) {
  .vercaa-home .vh-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.vercaa-home .vh-footer-copyright {
  font-size: 0.75rem;
  color: var(--vh-gray-500);
}

/* --------------------------------------------------------------------------
   15. Mobile Menu
   -------------------------------------------------------------------------- */
.vercaa-home .vh-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--vh-radius-lg);
  color: var(--vh-gray-700);
  cursor: pointer;
  transition: background var(--vh-duration-fast) var(--vh-ease);
}

@media (min-width: 1024px) {
  .vercaa-home .vh-mobile-toggle { display: none; }
}

.vercaa-home .vh-mobile-toggle:hover {
  background: var(--vh-gray-100);
}

/* Hamburger animation */
.vercaa-home .vh-mobile-toggle.vh-mobile-toggle--open .vh-hamburger-line--1 {
  transform: rotate(45deg) translateY(7px);
}

.vercaa-home .vh-mobile-toggle.vh-mobile-toggle--open .vh-hamburger-line--2 {
  opacity: 0;
}

.vercaa-home .vh-mobile-toggle.vh-mobile-toggle--open .vh-hamburger-line--3 {
  transform: rotate(-45deg) translateY(-7px);
}

.vercaa-home .vh-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: all var(--vh-duration) var(--vh-ease);
  background: var(--vh-white);
  transform: translateY(-100%);
}

.vercaa-home .vh-mobile-overlay--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vercaa-home .vh-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--vh-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: all var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-mobile-menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Spacer for header */
.vercaa-home .vh-mobile-menu-spacer {
  height: 4rem;
}

/* Logo in mobile menu */
.vercaa-home .vh-mobile-menu-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
}

.vercaa-home .vh-mobile-menu-logo .vh-logo-dot {
  width: 0.75rem;
  height: 0.75rem;
  animation: vh-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.vercaa-home .vh-mobile-menu-logo .vh-logo-text {
  font-size: 1.5rem;
  font-weight: 700;
}

.vercaa-home .vh-mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
  margin-bottom: 3rem;
}

.vercaa-home .vh-mobile-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--vh-gray-700);
  border: 1px solid transparent;
  border-radius: 1rem;
  text-decoration: none;
  transition: all var(--vh-duration-fast) var(--vh-ease);
}

.vercaa-home .vh-mobile-nav-item--hosting:hover {
  color: #a83fff;
  background: rgba(168,63,255,0.05);
  border-color: rgba(168,63,255,0.2);
}

.vercaa-home .vh-mobile-nav-item--domains:hover {
  color: #f59e0b;
  background: rgba(245,158,11,0.05);
  border-color: rgba(245,158,11,0.2);
}

.vercaa-home .vh-mobile-nav-item--security:hover {
  color: #10b981;
  background: rgba(16,185,129,0.05);
  border-color: rgba(16,185,129,0.2);
}

.vercaa-home .vh-mobile-nav-item--support:hover {
  color: #663399;
  background: rgba(102,51,153,0.05);
  border-color: rgba(102,51,153,0.2);
}

/* Mobile sub-menus (accordion) */
.vercaa-home .vh-mobile-nav-group {
  width: 100%;
}

.vercaa-home .vh-mobile-nav-item[data-mobile-expand] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.vercaa-home .vh-mobile-chevron {
  transition: transform 0.3s ease;
}

.vercaa-home .vh-mobile-nav-item.vh-mobile-nav-expanded .vh-mobile-chevron {
  transform: rotate(180deg);
}

.vercaa-home .vh-mobile-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.vercaa-home .vh-mobile-sub.vh-mobile-sub--open {
  max-height: 500px;
}

.vercaa-home .vh-mobile-sub-item {
  display: block;
  padding: 0.625rem 1.5rem 0.625rem 2.5rem;
  font-size: 0.875rem;
  color: #717182;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 0.75rem;
}

.vercaa-home .vh-mobile-sub-item:hover {
  color: var(--vh-purple);
  background: rgba(168,63,255,0.05);
}

/* Color-specific hover for domains sub-items */
.vercaa-home .vh-mobile-nav-item--domains + .vh-mobile-sub .vh-mobile-sub-item:hover {
  color: #f97316;
  background: rgba(249,115,22,0.05);
}

.vercaa-home .vh-mobile-nav-item--security + .vh-mobile-sub .vh-mobile-sub-item:hover {
  color: #10b981;
  background: rgba(16,185,129,0.05);
}

.vercaa-home .vh-mobile-login {
  width: 100%;
  max-width: 24rem;
  margin-top: auto;
  padding: 1rem;
  background: #a83fff;
  color: var(--vh-white);
  font-size: 1.125rem;
  font-weight: 500;
  border: none;
  border-radius: 1rem;
  text-decoration: none;
  transition: all var(--vh-duration-fast) var(--vh-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: var(--vh-shadow-lg);
}

.vercaa-home .vh-mobile-login:hover {
  background: #663399;
  color: var(--vh-white);
  text-decoration: none;
}

.vercaa-home .vh-mobile-actions {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
  margin-top: 1rem;
}

.vercaa-home .vh-mobile-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #663399;
  border: 1px solid rgba(102,51,153,0.2);
  border-radius: 0.75rem;
  text-decoration: none;
  transition: all var(--vh-duration-fast) var(--vh-ease);
}

.vercaa-home .vh-mobile-action:hover {
  background: rgba(102,51,153,0.05);
  color: #663399;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   16. Switch (toggle)
   -------------------------------------------------------------------------- */
.vercaa-home .vh-switch {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  background: var(--vh-gray-300);
  border-radius: var(--vh-radius-full);
  cursor: pointer;
  transition: background var(--vh-duration-fast) var(--vh-ease);
  border: none;
  flex-shrink: 0;
}

.vercaa-home .vh-switch--on {
  background: var(--vh-purple);
}

.vercaa-home .vh-switch__thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--vh-white);
  border-radius: var(--vh-radius-full);
  box-shadow: var(--vh-shadow-sm);
  transition: transform var(--vh-duration-fast) var(--vh-ease);
}

.vercaa-home .vh-switch--on .vh-switch__thumb {
  transform: translateX(1.25rem);
}

/* --------------------------------------------------------------------------
   17. Event Effects (dashboard marketing events)
   -------------------------------------------------------------------------- */
.vercaa-home .vh-event-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--vh-radius-3xl);
  transition: all 1000ms var(--vh-ease);
}

.vercaa-home .vh-event-overlay--boost {
  background: linear-gradient(to bottom right, rgba(34,197,94,0.08), rgba(16,185,129,0.04));
}

.vercaa-home .vh-event-overlay--crisis {
  background: linear-gradient(to bottom right, rgba(239,68,68,0.08), rgba(249,115,22,0.04));
}

.vercaa-home .vh-event-ping {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--vh-radius-full);
  animation: vh-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.vercaa-home .vh-event-ping--positive {
  background: var(--vh-green);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.vercaa-home .vh-event-ping--negative {
  background: var(--vh-red-500);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

/* Marketing event status bar */
.vercaa-home .vh-event-status {
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem;
  border-radius: var(--vh-radius-lg);
  transition: all var(--vh-duration) var(--vh-ease);
}

.vercaa-home .vh-event-status--boost {
  color: var(--vh-green);
  background: rgba(34, 197, 94, 0.1);
}

.vercaa-home .vh-event-status--crisis {
  color: var(--vh-red-400);
  background: rgba(239, 68, 68, 0.1);
}

/* System status items */
.vercaa-home .vh-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   18. Spinner / Loading
   -------------------------------------------------------------------------- */
.vercaa-home .vh-spinner {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--vh-white);
  border-top-color: transparent;
  border-radius: var(--vh-radius-full);
  animation: vh-spin 1s linear infinite;
}

/* --------------------------------------------------------------------------
   19. Animations
   -------------------------------------------------------------------------- */

/* Fluid flow (primary gradient movement) */
@keyframes vh-fluid-flow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translate(30px, -20px) scale(1.05);
    opacity: 1;
  }
  50% {
    transform: translate(-20px, 30px) scale(0.95);
    opacity: 0.7;
  }
  75% {
    transform: translate(20px, 20px) scale(1.02);
    opacity: 0.9;
  }
}

@keyframes vh-fluid-flow-reverse {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translate(-25px, 15px) scale(1.03);
    opacity: 0.9;
  }
  50% {
    transform: translate(15px, -25px) scale(0.97);
    opacity: 0.7;
  }
  75% {
    transform: translate(-15px, -15px) scale(1.05);
    opacity: 1;
  }
}

/* Morphing blob */
@keyframes vh-morphing-blob {
  0%, 100% {
    border-radius: 50%;
    transform: translate(0, 0) scale(1);
  }
  25% {
    border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
    transform: translate(20px, -15px) scale(1.04);
  }
  50% {
    border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%;
    transform: translate(-15px, 20px) scale(0.96);
  }
  75% {
    border-radius: 50% 50% 40% 60% / 40% 50% 50% 60%;
    transform: translate(15px, 10px) scale(1.02);
  }
}

/* Fluid drift (slower, wider movement) */
@keyframes vh-fluid-drift {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(-50%, -50%) rotate(120deg) scale(1.05);
  }
  66% {
    transform: translate(-50%, -50%) rotate(240deg) scale(0.95);
  }
}

/* Glass shimmer */
@keyframes vh-glass-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Glass reflection */
@keyframes vh-glass-reflection {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

/* Pulse */
@keyframes vh-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Ping */
@keyframes vh-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Bounce */
@keyframes vh-bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Spin */
@keyframes vh-spin {
  to { transform: rotate(360deg); }
}

/* Float (for particles) */
@keyframes vh-float {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.2;
  }
  25% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-10px) translateX(-10px);
    opacity: 0.2;
  }
  75% {
    transform: translateY(-30px) translateX(5px);
    opacity: 0.3;
  }
}

/* Fade in up */
@keyframes vh-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in */
@keyframes vh-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation utility classes */
.vercaa-home .vh-animate-pulse { animation: vh-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.vercaa-home .vh-animate-ping { animation: vh-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.vercaa-home .vh-animate-bounce { animation: vh-bounce 1s infinite; }
.vercaa-home .vh-animate-spin { animation: vh-spin 1s linear infinite; }
.vercaa-home .vh-animate-float { animation: vh-float 12.944s infinite ease-in-out; /* PHI * 8 */ }

.vercaa-home .vh-animate-fade-up {
  animation: vh-fade-in-up 0.8s ease-out both;
}

.vercaa-home .vh-animate-scale-in {
  animation: vh-scale-in 0.6s ease-out both;
}

/* Animation delays */
.vercaa-home .vh-delay-100 { animation-delay: 100ms; }
.vercaa-home .vh-delay-200 { animation-delay: 200ms; }
.vercaa-home .vh-delay-300 { animation-delay: 300ms; }
.vercaa-home .vh-delay-500 { animation-delay: 500ms; }
.vercaa-home .vh-delay-1000 { animation-delay: 1000ms; }
.vercaa-home .vh-delay-2000 { animation-delay: 2000ms; }

/* Transition helpers */
.vercaa-home .vh-transition { transition: all var(--vh-duration) var(--vh-ease); }
.vercaa-home .vh-transition-fast { transition: all var(--vh-duration-fast) var(--vh-ease); }
.vercaa-home .vh-transition-slow { transition: all var(--vh-duration-slow) var(--vh-ease); }
.vercaa-home .vh-transition-colors { transition: color var(--vh-duration-fast) var(--vh-ease), background-color var(--vh-duration-fast) var(--vh-ease), border-color var(--vh-duration-fast) var(--vh-ease); }

/* --------------------------------------------------------------------------
   20. Miscellaneous Helpers
   -------------------------------------------------------------------------- */

/* Dividers */
.vercaa-home .vh-divider {
  border-top: 1px solid var(--vh-gray-200);
}

.vercaa-home .vh-divider--slate {
  border-top-color: rgba(226, 232, 240, 1);
}

/* Opacity helpers */
.vercaa-home .vh-opacity-0 { opacity: 0; }
.vercaa-home .vh-opacity-50 { opacity: 0.5; }
.vercaa-home .vh-opacity-100 { opacity: 1; }

/* Border helpers */
.vercaa-home .vh-border { border: 1px solid var(--vh-gray-200); }
.vercaa-home .vh-border-t { border-top: 1px solid var(--vh-gray-200); }
.vercaa-home .vh-border-b { border-bottom: 1px solid var(--vh-gray-200); }

/* Spacing helpers */
.vercaa-home .vh-mt-2 { margin-top: 0.5rem; }
.vercaa-home .vh-mt-3 { margin-top: 0.75rem; }
.vercaa-home .vh-mt-4 { margin-top: 1rem; }
.vercaa-home .vh-mt-6 { margin-top: 1.5rem; }
.vercaa-home .vh-mt-8 { margin-top: 2rem; }
.vercaa-home .vh-mb-1 { margin-bottom: 0.25rem; }
.vercaa-home .vh-mb-2 { margin-bottom: 0.5rem; }
.vercaa-home .vh-mb-3 { margin-bottom: 0.75rem; }
.vercaa-home .vh-mb-4 { margin-bottom: 1rem; }
.vercaa-home .vh-mb-6 { margin-bottom: 1.5rem; }
.vercaa-home .vh-mb-8 { margin-bottom: 2rem; }
.vercaa-home .vh-mb-12 { margin-bottom: 3rem; }
.vercaa-home .vh-mb-16 { margin-bottom: 4rem; }
.vercaa-home .vh-p-4 { padding: 1rem; }
.vercaa-home .vh-p-6 { padding: 1.5rem; }
.vercaa-home .vh-p-8 { padding: 2rem; }
.vercaa-home .vh-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.vercaa-home .vh-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.vercaa-home .vh-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.vercaa-home .vh-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.vercaa-home .vh-pt-4 { padding-top: 1rem; }

/* Color swatch dots for status indicators */
.vercaa-home .vh-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--vh-radius-full);
  flex-shrink: 0;
}

.vercaa-home .vh-dot--sm {
  width: 0.375rem;
  height: 0.375rem;
}

.vercaa-home .vh-dot--lg {
  width: 0.75rem;
  height: 0.75rem;
}

.vercaa-home .vh-dot--green { background-color: var(--vh-green); }
.vercaa-home .vh-dot--blue { background-color: var(--vh-blue-500); }
.vercaa-home .vh-dot--purple { background-color: var(--vh-purple); }
.vercaa-home .vh-dot--orange { background-color: var(--vh-orange); }
.vercaa-home .vh-dot--red { background-color: var(--vh-red-500); }
.vercaa-home .vh-dot--gray { background-color: var(--vh-gray-300); }
.vercaa-home .vh-dot--indigo { background: linear-gradient(to right, var(--vh-indigo-500), var(--vh-purple)); }

/* Icon sizing */
.vercaa-home .vh-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.vercaa-home .vh-icon--xs { width: 0.625rem; height: 0.625rem; }
.vercaa-home .vh-icon--sm { width: 0.75rem; height: 0.75rem; }
.vercaa-home .vh-icon--md { width: 1.25rem; height: 1.25rem; }
.vercaa-home .vh-icon--lg { width: 1.75rem; height: 1.75rem; }

/* SVG icon coloring — Lucide-style icons */
.vercaa-home .vh-icon-purple { color: var(--vh-purple); }
.vercaa-home .vh-icon-orange { color: var(--vh-orange); }
.vercaa-home .vh-icon-green { color: var(--vh-green); }
.vercaa-home .vh-icon-blue { color: var(--vh-blue-500); }
.vercaa-home .vh-icon-red { color: var(--vh-red-500); }
.vercaa-home .vh-icon-gray { color: var(--vh-gray-400); }

/* Cart badge (header) */
.vercaa-home .vh-cart-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.125rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--vh-white);
  background: var(--vh-orange);
  border-radius: var(--vh-radius-full);
  padding: 0 0.25rem;
}

/* Recommendation result box */
.vercaa-home .vh-recommendation-result {
  padding: 0.75rem;
  background: linear-gradient(to right, var(--vh-green-50), rgba(236,253,245,1));
  border: 1px solid var(--vh-green-200);
  border-radius: var(--vh-radius-xl);
}

/* Backdrop blur utilities */
.vercaa-home .vh-backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vercaa-home .vh-backdrop-blur-xl {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.vercaa-home .vh-backdrop-blur-3xl {
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
}

/* Scroll margin for anchored sections */
.vercaa-home [id] {
  scroll-margin-top: 5rem;
}

/* ==========================================================================
   SECTION 3: PRICING — Hosting Configurator
   ========================================================================== */

.vercaa-home .vh-pricing {
  padding: 5rem 0;
  position: relative;
}

.vercaa-home .vh-pricing__title {
  font-size: 3rem;
  font-weight: 400;
  color: var(--vh-slate-900);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.vercaa-home .vh-pricing__subtitle {
  font-size: 1.25rem;
  color: var(--vh-gray-600);
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* Configurator wrapper */
.vercaa-home .vh-configurator {
  background: linear-gradient(to bottom right, #fff, rgba(249,250,251,0.5), #fff);
  border: 1px solid rgba(229,231,235,0.5);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}

.vercaa-home .vh-configurator__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: radial-gradient(circle at 25px 25px, rgba(99,102,241,0.3) 2px, transparent 0);
  background-size: 50px 50px;
  pointer-events: none;
}

.vercaa-home .vh-configurator__header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Pricing badges */
.vercaa-home .vh-pricing-badge {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  font-weight: 500;
}

.vercaa-home .vh-pricing-badge--purple {
  background: var(--vh-purple-50);
  color: #7c3aed;
  border: 1px solid var(--vh-purple-200);
}

.vercaa-home .vh-pricing-badge--indigo {
  background: linear-gradient(to right, #e0e7ff, #ede9fe);
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.vercaa-home .vh-pricing-badge--green {
  background: var(--vh-green-100);
  color: #15803d;
  border-radius: 9999px;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
}

/* 3-column pricing grid */
.vercaa-home .vh-pricing-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .vercaa-home .vh-pricing-grid {
    grid-template-columns: 4fr 5fr 3fr;
  }
}

/* Hosting type cards 2×2 grid */
.vercaa-home .vh-hosting-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.vercaa-home .vh-hosting-card {
  background: #fff;
  border: 1px solid var(--vh-gray-200);
  border-radius: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.vercaa-home .vh-hosting-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.vercaa-home .vh-hosting-card--active[data-hosting="perday"] {
  border-color: var(--vh-purple-200);
  background: rgba(168,63,255,0.04);
  box-shadow: 0 4px 16px rgba(168,63,255,0.12);
}

.vercaa-home .vh-hosting-card--active[data-hosting="shared"] {
  border-color: var(--vh-green-200);
  background: rgba(34,197,94,0.04);
  box-shadow: 0 4px 16px rgba(34,197,94,0.12);
}

.vercaa-home .vh-hosting-card--active[data-hosting="cloud"] {
  border-color: var(--vh-orange-200);
  background: rgba(249,115,22,0.04);
  box-shadow: 0 4px 16px rgba(249,115,22,0.12);
}

.vercaa-home .vh-hosting-card--active[data-hosting="wordpress"] {
  border-color: #bfdbfe;
  background: rgba(59,130,246,0.04);
  box-shadow: 0 4px 16px rgba(59,130,246,0.12);
}

.vercaa-home .vh-hosting-card__icon {
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: var(--vh-gray-100);
  color: var(--vh-gray-600);
  display: inline-flex;
  transition: all 0.2s;
}

.vercaa-home .vh-hosting-card--active[data-hosting="perday"] .vh-hosting-card__icon,
.vercaa-home .vh-hosting-card__icon--active {
  background: var(--vh-purple-100);
  color: var(--vh-purple);
}

.vercaa-home .vh-hosting-card--active[data-hosting="shared"] .vh-hosting-card__icon {
  background: var(--vh-green-100);
  color: var(--vh-green);
}

.vercaa-home .vh-hosting-card--active[data-hosting="cloud"] .vh-hosting-card__icon {
  background: var(--vh-orange-100);
  color: var(--vh-orange);
}

.vercaa-home .vh-hosting-card--active[data-hosting="wordpress"] .vh-hosting-card__icon {
  background: #dbeafe;
  color: var(--vh-blue-500);
}

.vercaa-home .vh-hosting-card__price {
  text-align: center;
  padding: 0.5rem;
  background: var(--vh-gray-50);
  border-radius: 0.5rem;
}

/* AI Plan Finder */
.vercaa-home .vh-ai-finder {
  margin-top: 1rem;
  background: linear-gradient(to bottom right, #eef2ff, #ede9fe, #eff6ff);
  border: 1px solid #c7d2fe;
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(99,102,241,0.08);
}

.vercaa-home .vh-ai-finder__bg {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background: linear-gradient(to bottom right, #4f46e5, #7c3aed);
}

.vercaa-home .vh-ai-finder__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: linear-gradient(to right, #4f46e5, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3);
  font-family: inherit;
}

.vercaa-home .vh-ai-finder__btn:hover {
  background: linear-gradient(to right, #4338ca, #6d28d9);
}

.vercaa-home .vh-ai-finder__dot {
  width: 0.75rem;
  height: 0.75rem;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vercaa-home .vh-ai-finder__dot::after {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  background: #fff;
  border-radius: 50%;
}

.vercaa-home .vh-ai-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
}

.vercaa-home .vh-ai-option {
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--vh-gray-200);
  background: #fff;
  color: var(--vh-gray-700);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  font-family: inherit;
}

.vercaa-home .vh-ai-option:hover {
  border-color: #c7d2fe;
}

.vercaa-home .vh-ai-option--active {
  background: #e0e7ff;
  border-color: #a5b4fc;
  color: #312e81;
}

.vercaa-home .vh-ai-option--active-visitor {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #3b0764;
}

.vercaa-home .vh-ai-finder__recommend {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: linear-gradient(to right, #16a34a, #059669);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(22,163,74,0.3);
  font-family: inherit;
}

.vercaa-home .vh-ai-finder__recommend:hover {
  background: linear-gradient(to right, #15803d, #047857);
}

.vercaa-home .vh-ai-finder__recommend:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vercaa-home .vh-ai-finder__recommend .vh-spinner {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: vhSpin 1s linear infinite;
}

@keyframes vhSpin {
  to { transform: rotate(360deg); }
}

.vercaa-home .vh-ai-result {
  padding: 0.75rem;
  background: linear-gradient(to right, #f0fdf4, #ecfdf5);
  border: 1px solid #bbf7d0;
  border-radius: 0.75rem;
}

/* Config panel */
.vercaa-home .vh-config-panel {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(229,231,235,0.5);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  height: 100%;
}

.vercaa-home .vh-config-panel__icon {
  padding: 0.5rem;
  background: linear-gradient(to bottom right, var(--vh-gray-100), var(--vh-gray-200));
  border-radius: 0.75rem;
  display: inline-flex;
  color: var(--vh-purple);
}

/* Progress dots for plan tiers */
.vercaa-home .vh-config-progress {
  text-align: center;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
}

.vercaa-home .vh-progress-dot {
  height: 2px;
  width: 2rem;
  border-radius: 9999px;
  background: var(--vh-gray-300);
  transition: background 0.3s;
}

.vercaa-home .vh-progress-dot--active {
  background: var(--vh-green);
}

/* Resource monitor */
.vercaa-home .vh-resource-monitor {
  padding: 0.75rem;
  background: rgba(249,250,251,0.5);
  border-radius: 0.75rem;
  border: 1px solid rgba(229,231,235,0.5);
}

.vercaa-home .vh-resource-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.vercaa-home .vh-resource-grid--2col {
  grid-template-columns: 1fr 1fr;
}

.vercaa-home .vh-res-dots {
  display: flex;
  gap: 0.25rem;
}

.vercaa-home .vh-res-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--vh-gray-200);
  transition: background 0.3s;
}

.vercaa-home .vh-res-dot--active {
  background: linear-gradient(to bottom right, #60a5fa, #2563eb);
}

.vercaa-home .vh-res-bar {
  height: 0.375rem;
  background: var(--vh-gray-200);
  border-radius: 9999px;
  overflow: hidden;
}

.vercaa-home .vh-res-bar__fill {
  height: 100%;
  background: linear-gradient(to right, #4ade80, #16a34a);
  border-radius: 9999px;
  transition: width 0.6s ease-out;
}

/* Stat boxes */
.vercaa-home .vh-stat-box {
  text-align: center;
  padding: 0.75rem;
  background: var(--vh-gray-50);
  border-radius: 0.5rem;
  border: 1px solid var(--vh-gray-200);
}

.vercaa-home .vh-stat-box--purple {
  background: var(--vh-purple-50);
  border-color: var(--vh-purple-200);
}

.vercaa-home .vh-stat-box--blue {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.vercaa-home .vh-stat-box--green {
  background: var(--vh-green-50);
  border-color: var(--vh-green-200);
}

.vercaa-home .vh-stat-box--orange {
  background: var(--vh-orange-50);
  border-color: var(--vh-orange-200);
}

/* Custom range sliders */
.vercaa-home .vh-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: var(--vh-gray-200);
  outline: none;
  transition: background 0.2s;
}

.vercaa-home .vh-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--vh-purple);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.15s;
}

.vercaa-home .vh-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.vercaa-home .vh-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--vh-purple);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
}

.vercaa-home .vh-range--green::-webkit-slider-thumb { border-color: var(--vh-green); }
.vercaa-home .vh-range--green::-moz-range-thumb { border-color: var(--vh-green); }
.vercaa-home .vh-range--orange::-webkit-slider-thumb { border-color: var(--vh-orange); }
.vercaa-home .vh-range--orange::-moz-range-thumb { border-color: var(--vh-orange); }
.vercaa-home .vh-range--blue::-webkit-slider-thumb { border-color: var(--vh-blue-500); }
.vercaa-home .vh-range--blue::-moz-range-thumb { border-color: var(--vh-blue-500); }

/* Template carousel */
.vercaa-home .vh-template-carousel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vercaa-home .vh-carousel-btn {
  flex-shrink: 0;
  padding: 0.625rem;
  background: #fff;
  border: 1px solid var(--vh-gray-200);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--vh-gray-600);
  display: inline-flex;
  font-family: inherit;
}

.vercaa-home .vh-carousel-btn:hover {
  border-color: var(--vh-gray-300);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: var(--vh-slate-900);
}

.vercaa-home .vh-carousel-slide {
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.vercaa-home .vh-tpl-card {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 2px solid;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.vercaa-home .vh-tpl-card__thumb {
  height: 4rem;
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vercaa-home .vh-tpl-card__thumb-bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
}

.vercaa-home .vh-tpl-card__info {
  text-align: center;
}

.vercaa-home .vh-tpl-card__icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.vercaa-home .vh-tpl-card__check {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  background: linear-gradient(to bottom right, var(--vh-purple), #4f46e5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.vercaa-home .vh-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 1rem;
}

.vercaa-home .vh-carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--vh-gray-300);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}

.vercaa-home .vh-carousel-dot--active {
  background: var(--vh-purple);
  width: 1.5rem;
}

/* Cloud extra RAM disabled state */
.vercaa-home .vh-cloud-ram-extra--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Managed mode toggle */
.vercaa-home .vh-managed-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border: 1px solid var(--vh-gray-200);
  border-radius: 0.5rem;
  background: var(--vh-gray-50);
  transition: all 0.2s;
}

.vercaa-home .vh-managed-toggle--active {
  border-color: #bfdbfe;
  background: #eff6ff;
}

/* Toggle switch */
.vercaa-home .vh-switch {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.375rem;
  flex-shrink: 0;
}

.vercaa-home .vh-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.vercaa-home .vh-switch__track {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--vh-gray-300);
  border-radius: 9999px;
  transition: background 0.2s;
}

.vercaa-home .vh-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.125rem;
  height: 1.125rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.vercaa-home .vh-switch input:checked + .vh-switch__track {
  background: var(--vh-blue-500);
}

.vercaa-home .vh-switch input:checked + .vh-switch__track::after {
  transform: translateX(1.125rem);
}

/* Price summary card */
.vercaa-home .vh-price-summary {
  background: linear-gradient(to bottom right, #111827, #1f2937, #111827);
  color: #fff;
  border-radius: 1rem;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.vercaa-home .vh-price-summary__bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background: linear-gradient(to right, var(--vh-purple), var(--vh-blue-500), #4f46e5);
  background-size: 200% 200%;
  animation: vhGradientShift 8s linear infinite;
}

@keyframes vhGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.vercaa-home .vh-price-summary__amount {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  background: linear-gradient(to right, #fff, #e5e7eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vercaa-home .vh-price-summary__features {
  margin-bottom: 1rem;
}

.vercaa-home .vh-price-summary__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #f3f4f6;
  padding: 0.25rem 0;
}

.vercaa-home .vh-price-summary__check {
  width: 0.75rem;
  height: 0.75rem;
  background: linear-gradient(to right, #4ade80, #10b981);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: #fff;
  flex-shrink: 0;
}

.vercaa-home .vh-price-summary__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  background: #fff;
  color: var(--vh-slate-900);
  border: none;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  font-family: inherit;
}

.vercaa-home .vh-price-summary__btn:hover {
  background: var(--vh-gray-100);
  color: var(--vh-slate-900);
  text-decoration: none;
}

/* AI Suggestions box */
.vercaa-home .vh-ai-suggestions {
  background: linear-gradient(to bottom right, #eef2ff, #ede9fe);
  border: 1px solid #c7d2fe;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(99,102,241,0.06);
}

/* Growth Path */
.vercaa-home .vh-growth-path {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(229,231,235,0.5);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.vercaa-home .vh-growth-path__items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vercaa-home .vh-growth-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: var(--vh-gray-50);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--vh-gray-600);
  transition: all 0.3s;
}

.vercaa-home .vh-growth-item--active {
  background: var(--vh-purple-50);
  border: 1px solid var(--vh-purple-200);
  color: #581c87;
}

.vercaa-home .vh-growth-item__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--vh-gray-300);
  flex-shrink: 0;
  transition: background 0.3s;
}

.vercaa-home .vh-growth-item__dot--active {
  background: var(--vh-purple);
}

/* Help CTA button */
.vercaa-home .vh-pricing-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: linear-gradient(to right, var(--vh-purple), #4f46e5);
  color: #fff;
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(168,63,255,0.3);
}

.vercaa-home .vh-pricing-cta:hover {
  background: linear-gradient(to right, #7c3aed, #4338ca);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168,63,255,0.4);
}

/* Grid helpers for pricing */
.vercaa-home .vh-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Responsive: Stack columns on mobile */
@media (max-width: 1023px) {
  .vercaa-home .vh-pricing__title {
    font-size: 2rem;
  }

  .vercaa-home .vh-pricing-col-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .vercaa-home .vh-price-summary {
    grid-column: 1 / -1;
  }

  .vercaa-home .vh-pricing-col-right > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .vercaa-home .vh-configurator {
    padding: 1rem;
    border-radius: 1rem;
  }

  .vercaa-home .vh-pricing-col-right {
    grid-template-columns: 1fr;
  }

  .vercaa-home .vh-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .vercaa-home .vh-grid-3 > *:last-child {
    grid-column: 1 / -1;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION: TESTIMONIALS
   ══════════════════════════════════════════════════════════════════════════ */

.vercaa-home .vh-testimonials {
  padding: 6rem 1.5rem;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--vh-white), rgba(248,250,252,0.5), rgba(241,245,249,0.4));
}

.vercaa-home .vh-section-title {
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--vh-slate-900);
  margin-bottom: 1.5rem;
}

.vercaa-home .vh-section-subtitle {
  font-size: 1.25rem;
  color: var(--vh-slate-500);
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* Viewport clips overflow — extra top padding for verified badges */
.vercaa-home .vh-testimonials-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 1rem;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* Infinite scrolling track — 6 cards duplicated via CSS for seamless loop */
.vercaa-home .vh-testimonials-track {
  display: flex;
  gap: 2rem;
  animation: vh-scroll-left 40s linear infinite;
  width: max-content;
}

.vercaa-home .vh-testimonials-track:hover {
  animation-play-state: paused;
}

@keyframes vh-scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Card */
.vercaa-home .vh-tcard {
  flex: 0 0 380px;
  width: 380px;
  padding: 2rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

.vercaa-home .vh-tcard:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  transform: translateY(-8px);
}

/* Verified badge */
.vercaa-home .vh-tcard__verified {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background: #22c55e;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  z-index: 2;
}

.vercaa-home .vh-tcard__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Stars */
.vercaa-home .vh-tcard__stars {
  color: #facc15;
  font-size: 1rem;
  letter-spacing: 0.125rem;
}
.vercaa-home .vh-tcard__stars--lg {
  font-size: 1.25rem;
}

/* Date */
.vercaa-home .vh-tcard__date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--vh-slate-500);
}

/* Use case tag */
.vercaa-home .vh-tcard__tag {
  display: inline-block;
  width: fit-content;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  background: rgba(241,245,249,1);
  color: var(--vh-slate-700);
  border: 1px solid rgba(226,232,240,0.5);
}

/* Quote */
.vercaa-home .vh-tcard__quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vercaa-home .vh-tcard__quote-icon {
  color: rgba(168,63,255,0.3);
}
.vercaa-home .vh-tcard__quote p {
  color: var(--vh-slate-600);
  line-height: 1.625;
  font-size: 0.875rem;
  margin: 0;
}

/* Key Results */
.vercaa-home .vh-tcard__results {
  padding: 0.75rem;
  background: rgba(240,253,244,1);
  border: 1px solid rgba(187,247,208,1);
  border-radius: 0.5rem;
}
.vercaa-home .vh-tcard__results-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #166534;
}
.vercaa-home .vh-tcard__results-text {
  font-size: 0.875rem;
  color: #15803d;
}

/* Author */
.vercaa-home .vh-tcard__author {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vercaa-home .vh-tcard__name {
  font-weight: 500;
  color: var(--vh-slate-900);
  margin: 0;
}
.vercaa-home .vh-tcard__role {
  font-size: 0.875rem;
  color: var(--vh-slate-500);
  margin: 0;
}
.vercaa-home .vh-tcard__company {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--vh-purple);
  margin: 0;
}
.vercaa-home .vh-tcard__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--vh-slate-500);
}

/* Footer / Trustpilot link */
.vercaa-home .vh-tcard__footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.vercaa-home .vh-tcard__tp-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.2s;
  text-decoration: none;
  color: var(--vh-slate-500);
}
.vercaa-home .vh-tcard__tp-link:hover {
  background: rgba(241,245,249,0.5);
  color: var(--vh-slate-900);
}
.vercaa-home .vh-tcard__tp-link span {
  font-size: 0.875rem;
}

/* Bottom CTA */
.vercaa-home .vh-tp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(168,63,255,0.05);
  border: 1px solid rgba(168,63,255,0.2);
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s;
  color: var(--vh-slate-700);
  font-size: 0.875rem;
  font-weight: 500;
}
.vercaa-home .vh-tp-cta:hover {
  background: rgba(168,63,255,0.1);
  color: var(--vh-purple);
}

/* Responsive */
@media (max-width: 768px) {
  .vercaa-home .vh-testimonials { padding: 3rem 1rem; }
  .vercaa-home .vh-section-title { font-size: 1.75rem; }
  .vercaa-home .vh-section-subtitle { font-size: 1rem; }
  .vercaa-home .vh-tcard { flex: 0 0 320px; width: 320px; padding: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION: FOOTER
   ══════════════════════════════════════════════════════════════════════════ */

.vercaa-home .vh-footer {
  position: relative;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
}

/* Animated background blobs */
.vercaa-home .vh-footer-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.vercaa-home .vh-footer-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}
.vercaa-home .vh-footer-blob--purple {
  top: 25%; left: 25%; width: 24rem; height: 24rem;
  background: radial-gradient(ellipse at center, rgba(168,63,255,0.04) 0%, rgba(168,63,255,0.02) 30%, transparent 70%);
  animation: vh-fluid-flow 20s ease-in-out infinite;
}
.vercaa-home .vh-footer-blob--orange {
  top: 33%; right: 25%; width: 20rem; height: 20rem;
  background: radial-gradient(ellipse at center, rgba(249,115,22,0.05) 0%, rgba(249,115,22,0.03) 25%, transparent 60%);
  filter: blur(35px);
  animation: vh-fluid-flow 20s ease-in-out infinite reverse;
}
.vercaa-home .vh-footer-blob--green {
  bottom: 25%; left: 33%; width: 18rem; height: 18rem;
  background: radial-gradient(ellipse at center, rgba(16,185,129,0.04) 0%, rgba(16,185,129,0.02) 30%, transparent 60%);
  filter: blur(30px);
  animation: vh-morphing-blob 25s ease-in-out infinite;
}
.vercaa-home .vh-footer-grid-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.01;
  background-image:
    linear-gradient(rgba(168,63,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,63,255,0.1) 1px, transparent 1px);
  background-size: 60px 60px;
}

.vercaa-home .vh-footer__inner {
  position: relative;
  z-index: 10;
  padding: 4rem 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
}
@media (min-width: 640px)  { .vercaa-home .vh-footer__inner { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .vercaa-home .vh-footer__inner { padding-left: 4rem; padding-right: 4rem; } }

/* 3-column grid */
.vercaa-home .vh-footer-grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .vercaa-home .vh-footer-grid { grid-template-columns: 4fr 4fr 4fr; }
}

/* Company info */
.vercaa-home .vh-footer__company-name {
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  color: var(--vh-slate-900);
  margin-bottom: 1.5rem;
}
.vercaa-home .vh-footer__info {
  font-size: 0.875rem;
  color: var(--vh-slate-500);
  margin-bottom: 1.5rem;
}
.vercaa-home .vh-footer__info p { margin: 0 0 0.25rem; }
.vercaa-home .vh-footer__legal { margin-top: 1rem; }
.vercaa-home .vh-footer__legal p { margin: 0 0 0.25rem; }
.vercaa-home .vh-footer__phone {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(168,63,255,0.3);
  border-radius: 0.375rem;
  color: var(--vh-slate-900);
  text-decoration: none;
  transition: background 0.2s;
}
.vercaa-home .vh-footer__phone:hover { background: rgba(168,63,255,0.05); }

/* Links columns */
.vercaa-home .vh-footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.vercaa-home .vh-footer-links__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  .vercaa-home .vh-footer-links__list { padding-top: 3.25rem; }
}
.vercaa-home .vh-footer-links__list a {
  font-size: 0.875rem;
  color: var(--vh-slate-500);
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
  padding: 0.125rem 0.25rem;
  border-radius: 0.375rem;
}
.vercaa-home .vh-footer-links__list a:hover { color: var(--vh-slate-900); }

/* Newsletter */
.vercaa-home .vh-footer-newsletter {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 1rem;
  padding: 1.5rem;
}
.vercaa-home .vh-footer-newsletter__icon {
  padding: 0.5rem;
  background: #000;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vercaa-home .vh-footer-newsletter__form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.vercaa-home .vh-footer-newsletter__input {
  flex: 1;
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0.375rem;
  background: var(--vh-white);
  color: var(--vh-slate-900);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.vercaa-home .vh-footer-newsletter__input:focus {
  border-color: rgba(168,63,255,0.5);
  box-shadow: 0 0 0 3px rgba(168,63,255,0.1);
}
.vercaa-home .vh-footer-newsletter__input::placeholder { color: var(--vh-slate-400); }
.vercaa-home .vh-footer-newsletter__btn {
  height: 2.25rem;
  padding: 0 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.2s;
}
.vercaa-home .vh-footer-newsletter__btn:hover { background: rgba(0,0,0,0.85); }
.vercaa-home .vh-footer-newsletter__trust {
  font-size: 0.75rem;
  color: var(--vh-slate-500);
  text-align: center;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Separator */
.vercaa-home .vh-footer-separator {
  height: 1px;
  margin: 2rem 0;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.08), transparent);
}

/* Bottom bar */
.vercaa-home .vh-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 768px) {
  .vercaa-home .vh-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}
.vercaa-home .vh-footer-bottom p { margin: 0; }

/* Social icons */
.vercaa-home .vh-footer-socials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.vercaa-home .vh-footer-social {
  position: relative;
  padding: 0.5rem;
  color: var(--vh-slate-500);
  border-radius: 0.5rem;
  transition: color 0.2s;
  text-decoration: none;
}
.vercaa-home .vh-footer-social:hover { color: var(--vh-slate-900); }
.vercaa-home .vh-footer-social::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  background: var(--social-color, transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.vercaa-home .vh-footer-social:hover::after { opacity: 0.1; }
.vercaa-home .vh-footer-social svg { position: relative; z-index: 1; }

/* Responsive */
@media (max-width: 768px) {
  .vercaa-home .vh-footer__inner { padding: 2rem 1rem; }
  .vercaa-home .vh-footer__company-name { font-size: 1.125rem; }
}


/* ============================================================ */
/* ============ SECTION: 3. PER-PAGE SHARED BASES ============ */
/* ============================================================ */


/* ==== PAGE-BASE: clientarea-shared.css ==== */
/*
 * Vercaa — clientarea-shared.css
 * ==============================
 * Shared restyles for secondary client-area pages that we keep
 * as Twenty-One markup (forms-only, low-traffic). Each page has
 * a thin import shim under css/vercaa/pages/{templatefile}.css
 * that pulls this file via the head.tpl auto-loader.
 *
 * Covers:
 *   - affiliates, affiliatessignup
 *   - clientareadetails, clientareasecurity
 *   - account-contacts-manage, account-contacts-new
 *   - account-paymentmethods, account-paymentmethods-manage,
 *     account-paymentmethods-billing-contacts
 *   - account-user-management, account-user-permissions
 *   - user-profile, user-password, user-security
 *
 * All rules scoped under `body[class*="vc-page-"].vc-X-shared` so
 * they only fire when a page opts in by adding the class via its
 * shim. Simpler: we use a `:where()` group of body classes.
 */

/* The big OR — every page that imports this file gets the rules. */

body.vc-page-affiliates #main-body .card,
body.vc-page-affiliatessignup #main-body .card,
body.vc-page-clientareadetails #main-body .card,
body.vc-page-clientareasecurity #main-body .card,
body.vc-page-account-contacts-manage #main-body .card,
body.vc-page-account-contacts-new #main-body .card,
body.vc-page-account-paymentmethods #main-body .card,
body.vc-page-account-paymentmethods-manage #main-body .card,
body.vc-page-account-paymentmethods-billing-contacts #main-body .card,
body.vc-page-account-user-management #main-body .card,
body.vc-page-account-user-permissions #main-body .card,
body.vc-page-user-profile #main-body .card,
body.vc-page-user-password #main-body .card,
body.vc-page-user-security #main-body .card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 1rem;
    box-shadow: var(--vc-shadow-sm);
    margin-bottom: 1.5rem;
}
body.vc-page-affiliates #main-body .card .card-body,
body.vc-page-affiliatessignup #main-body .card .card-body,
body.vc-page-clientareadetails #main-body .card .card-body,
body.vc-page-clientareasecurity #main-body .card .card-body,
body.vc-page-account-contacts-manage #main-body .card .card-body,
body.vc-page-account-contacts-new #main-body .card .card-body,
body.vc-page-account-paymentmethods #main-body .card .card-body,
body.vc-page-account-paymentmethods-manage #main-body .card .card-body,
body.vc-page-account-paymentmethods-billing-contacts #main-body .card .card-body,
body.vc-page-account-user-management #main-body .card .card-body,
body.vc-page-account-user-permissions #main-body .card .card-body,
body.vc-page-user-profile #main-body .card .card-body,
body.vc-page-user-password #main-body .card .card-body,
body.vc-page-user-security #main-body .card .card-body {
    padding: 2rem;
}
body.vc-page-affiliates #main-body .card .card-title,
body.vc-page-affiliatessignup #main-body .card .card-title,
body.vc-page-clientareadetails #main-body .card .card-title,
body.vc-page-clientareasecurity #main-body .card .card-title,
body.vc-page-account-contacts-manage #main-body .card .card-title,
body.vc-page-account-contacts-new #main-body .card .card-title,
body.vc-page-account-paymentmethods #main-body .card .card-title,
body.vc-page-account-paymentmethods-manage #main-body .card .card-title,
body.vc-page-account-paymentmethods-billing-contacts #main-body .card .card-title,
body.vc-page-account-user-management #main-body .card .card-title,
body.vc-page-account-user-permissions #main-body .card .card-title,
body.vc-page-user-profile #main-body .card .card-title,
body.vc-page-user-password #main-body .card .card-title,
body.vc-page-user-security #main-body .card .card-title {
    font-size: var(--vc-text-xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vc-border-subtle);
    letter-spacing: -0.01em;
}

/* Headings */
body.vc-page-affiliates #main-body h1,
body.vc-page-clientareadetails #main-body h1,
body.vc-page-clientareasecurity #main-body h1,
body.vc-page-account-contacts-manage #main-body h1,
body.vc-page-account-paymentmethods #main-body h1,
body.vc-page-account-user-management #main-body h1,
body.vc-page-user-profile #main-body h1,
body.vc-page-user-password #main-body h1,
body.vc-page-user-security #main-body h1 {
    font-size: var(--vc-text-3xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
}
body.vc-page-affiliates #main-body h2,
body.vc-page-clientareadetails #main-body h2,
body.vc-page-clientareasecurity #main-body h2,
body.vc-page-account-paymentmethods #main-body h2,
body.vc-page-account-user-management #main-body h2,
body.vc-page-user-profile #main-body h2 {
    font-size: var(--vc-text-xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    letter-spacing: -0.01em;
    margin: 1.5rem 0 0.75rem;
}

/* Forms */
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .form-control {
    border-radius: var(--vc-radius-md);
    border: 1px solid var(--vc-border-default);
    padding: 0.625rem 0.875rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    background: var(--vc-bg-surface);
    width: 100%;
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .form-control:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px var(--vc-primary-tint);
    outline: 0;
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .col-form-label {
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-secondary);
}

/* Buttons */
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms;
    text-decoration: none;
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .btn-primary {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
    color: #fff;
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .btn-primary:hover {
    background: var(--vc-primary-dark);
    border-color: var(--vc-primary-dark);
    color: #fff;
    text-decoration: none;
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .btn-success {
    background: var(--vc-success);
    border-color: var(--vc-success);
    color: #fff;
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .btn-danger {
    background: var(--vc-danger);
    border-color: var(--vc-danger);
    color: #fff;
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .btn-default {
    background: var(--vc-bg-surface);
    border-color: var(--vc-border-default);
    color: var(--vc-text-primary);
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .btn-block {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Tables */
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-clientareadetails,
    .vc-page-account-contacts-manage,
    .vc-page-account-paymentmethods,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions
) #main-body .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-clientareadetails,
    .vc-page-account-contacts-manage,
    .vc-page-account-paymentmethods,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions
) #main-body .table thead th {
    padding: 1rem 1.25rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    background: var(--vc-bg-elevated);
    border-bottom: 1px solid var(--vc-border-default);
    text-align: left;
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-clientareadetails,
    .vc-page-account-contacts-manage,
    .vc-page-account-paymentmethods,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions
) #main-body .table tbody td {
    padding: 0.875rem 1.25rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    border-top: 1px solid var(--vc-border-subtle);
    vertical-align: middle;
}

/* Labels / status */
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-paymentmethods,
    .vc-page-account-user-management,
    .vc-page-user-security
) #main-body .label {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-paymentmethods,
    .vc-page-account-user-management,
    .vc-page-user-security
) #main-body .label-success { background: #ECFDF5; color: var(--vc-success); }
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-paymentmethods,
    .vc-page-account-user-management,
    .vc-page-user-security
) #main-body .label-warning { background: var(--vc-warning-bg); color: var(--vc-warning); }
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-paymentmethods,
    .vc-page-account-user-management,
    .vc-page-user-security
) #main-body .label-danger { background: var(--vc-danger-bg); color: var(--vc-danger); }

/* Alerts */
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .alert {
    border-radius: var(--vc-radius-lg);
    padding: 0.875rem 1.125rem;
    font-size: var(--vc-text-sm);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
}
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .alert-info { background: var(--vc-info-bg); color: var(--vc-info); border-color: #BFDBFE; }
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .alert-warning { background: var(--vc-warning-bg); color: var(--vc-warning); border-color: #FDE68A; }
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .alert-danger { background: var(--vc-danger-bg); color: var(--vc-danger); border-color: #FECACA; }
body[class*="vc-page-"]:is(
    .vc-page-affiliates,
    .vc-page-affiliatessignup,
    .vc-page-clientareadetails,
    .vc-page-clientareasecurity,
    .vc-page-account-contacts-manage,
    .vc-page-account-contacts-new,
    .vc-page-account-paymentmethods,
    .vc-page-account-paymentmethods-manage,
    .vc-page-account-paymentmethods-billing-contacts,
    .vc-page-account-user-management,
    .vc-page-account-user-permissions,
    .vc-page-user-profile,
    .vc-page-user-password,
    .vc-page-user-security
) #main-body .alert-success { background: #ECFDF5; color: var(--vc-success); border-color: #A7F3D0; }

/* Affiliate-specific stat cards */
body.vc-page-affiliates #main-body .affiliate-stat {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    padding: 1.25rem;
    text-align: center;
    box-shadow: var(--vc-shadow-sm);
}
body.vc-page-affiliates #main-body .affiliate-stat i {
    display: block;
    font-size: 1.5rem;
    color: var(--vc-primary);
    margin-bottom: 0.5rem;
}
body.vc-page-affiliates #main-body .affiliate-stat span {
    display: block;
    font-size: var(--vc-text-3xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

/* Pills/tabs nav (clientareasecurity uses .nav-pills) */
body.vc-page-clientareasecurity #main-body .nav-pills .nav-link,
body.vc-page-account-paymentmethods #main-body .nav-pills .nav-link {
    color: var(--vc-text-secondary);
    border-radius: var(--vc-radius-md);
    padding: 0.5rem 1rem;
    font-weight: 500;
}
body.vc-page-clientareasecurity #main-body .nav-pills .nav-link.active,
body.vc-page-account-paymentmethods #main-body .nav-pills .nav-link.active {
    background: var(--vc-primary);
    color: #fff;
}


/* ==== PAGE-BASE: clientareadomaindetails.css ==== */
/*
 * Vercaa — clientareadomaindetails.css
 * ====================================
 * Style the Twenty-One domain management tab-panes with vercaa
 * tokens. The TPL markup is left intact so all 6 WHMCS tab panes
 * (Overview / Autorenew / Nameservers / Reglock / Release /
 * Addons), registrar module output, and JS tab-switching stay
 * fully functional.
 */

/* ================================================================
 * CARDS (Twenty-One .card wrappers inside each tab pane)
 * ================================================================ */
body.vc-page-clientareadomaindetails #main-body .card,
body.vc-page-clientareadomaindns #main-body .card,
body.vc-page-clientareadomainregisterns #main-body .card,
body.vc-page-clientareadomaingetepp #main-body .card,
body.vc-page-clientareadomaincontactinfo #main-body .card,
body.vc-page-clientareadomainaddons #main-body .card,
body.vc-page-clientareadomainemailforwarding #main-body .card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 1rem;
    box-shadow: var(--vc-shadow-sm);
    margin-bottom: 1.5rem;
}
body.vc-page-clientareadomaindetails #main-body .card .card-body,
body.vc-page-clientareadomaindns #main-body .card .card-body,
body.vc-page-clientareadomainregisterns #main-body .card .card-body,
body.vc-page-clientareadomaingetepp #main-body .card .card-body,
body.vc-page-clientareadomaincontactinfo #main-body .card .card-body,
body.vc-page-clientareadomainaddons #main-body .card .card-body,
body.vc-page-clientareadomainemailforwarding #main-body .card .card-body {
    padding: 2rem;
}
body.vc-page-clientareadomaindetails #main-body .card .card-title,
body.vc-page-clientareadomaindns #main-body .card .card-title,
body.vc-page-clientareadomainregisterns #main-body .card .card-title,
body.vc-page-clientareadomaingetepp #main-body .card .card-title,
body.vc-page-clientareadomaincontactinfo #main-body .card .card-title,
body.vc-page-clientareadomainaddons #main-body .card .card-title,
body.vc-page-clientareadomainemailforwarding #main-body .card .card-title {
    font-size: var(--vc-text-xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vc-border-subtle);
    letter-spacing: -0.01em;
}

/* Overview info rows (h5 label + value) */
body.vc-page-clientareadomaindetails #main-body .card .card-body h5 {
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    margin: 0 0 0.25rem;
}
body.vc-page-clientareadomaindetails #main-body .card .card-body .row.mb-3 {
    padding: 1rem 0;
    border-bottom: 1px solid var(--vc-border-subtle);
    margin-bottom: 0 !important;
}
body.vc-page-clientareadomaindetails #main-body .card .card-body .row.mb-3:last-child {
    border-bottom: 0;
}

/* Forms */
body.vc-page-clientareadomaindetails #main-body .form-control,
body.vc-page-clientareadomaindns #main-body .form-control,
body.vc-page-clientareadomainregisterns #main-body .form-control,
body.vc-page-clientareadomaingetepp #main-body .form-control,
body.vc-page-clientareadomaincontactinfo #main-body .form-control,
body.vc-page-clientareadomainaddons #main-body .form-control,
body.vc-page-clientareadomainemailforwarding #main-body .form-control {
    border-radius: var(--vc-radius-md);
    border: 1px solid var(--vc-border-default);
    padding: 0.625rem 0.875rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    transition: border-color 150ms, box-shadow 150ms;
}
body.vc-page-clientareadomaindetails #main-body .form-control:focus,
body.vc-page-clientareadomaindns #main-body .form-control:focus,
body.vc-page-clientareadomainregisterns #main-body .form-control:focus,
body.vc-page-clientareadomaingetepp #main-body .form-control:focus,
body.vc-page-clientareadomaincontactinfo #main-body .form-control:focus,
body.vc-page-clientareadomainaddons #main-body .form-control:focus,
body.vc-page-clientareadomainemailforwarding #main-body .form-control:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px var(--vc-primary-tint);
    outline: 0;
}

body.vc-page-clientareadomaindetails #main-body .col-form-label,
body.vc-page-clientareadomaindns #main-body .col-form-label,
body.vc-page-clientareadomainregisterns #main-body .col-form-label,
body.vc-page-clientareadomaingetepp #main-body .col-form-label,
body.vc-page-clientareadomaincontactinfo #main-body .col-form-label,
body.vc-page-clientareadomainaddons #main-body .col-form-label,
body.vc-page-clientareadomainemailforwarding #main-body .col-form-label {
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-secondary);
}

/* Buttons */
body.vc-page-clientareadomaindetails #main-body .btn,
body.vc-page-clientareadomaindns #main-body .btn,
body.vc-page-clientareadomainregisterns #main-body .btn,
body.vc-page-clientareadomaingetepp #main-body .btn,
body.vc-page-clientareadomaincontactinfo #main-body .btn,
body.vc-page-clientareadomainaddons #main-body .btn,
body.vc-page-clientareadomainemailforwarding #main-body .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms;
}
body.vc-page-clientareadomaindetails #main-body .btn-primary,
body.vc-page-clientareadomaindns #main-body .btn-primary,
body.vc-page-clientareadomainregisterns #main-body .btn-primary,
body.vc-page-clientareadomaingetepp #main-body .btn-primary,
body.vc-page-clientareadomaincontactinfo #main-body .btn-primary,
body.vc-page-clientareadomainaddons #main-body .btn-primary,
body.vc-page-clientareadomainemailforwarding #main-body .btn-primary {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
    color: #fff;
}
body.vc-page-clientareadomaindetails #main-body .btn-primary:hover,
body.vc-page-clientareadomaindns #main-body .btn-primary:hover,
body.vc-page-clientareadomainregisterns #main-body .btn-primary:hover,
body.vc-page-clientareadomaingetepp #main-body .btn-primary:hover,
body.vc-page-clientareadomaincontactinfo #main-body .btn-primary:hover,
body.vc-page-clientareadomainaddons #main-body .btn-primary:hover,
body.vc-page-clientareadomainemailforwarding #main-body .btn-primary:hover {
    background: var(--vc-primary-dark);
    border-color: var(--vc-primary-dark);
}
body.vc-page-clientareadomaindetails #main-body .btn-success,
body.vc-page-clientareadomaindns #main-body .btn-success,
body.vc-page-clientareadomainregisterns #main-body .btn-success,
body.vc-page-clientareadomaingetepp #main-body .btn-success,
body.vc-page-clientareadomaincontactinfo #main-body .btn-success,
body.vc-page-clientareadomainaddons #main-body .btn-success,
body.vc-page-clientareadomainemailforwarding #main-body .btn-success {
    background: var(--vc-success);
    border-color: var(--vc-success);
    color: #fff;
}
body.vc-page-clientareadomaindetails #main-body .btn-danger,
body.vc-page-clientareadomaindns #main-body .btn-danger,
body.vc-page-clientareadomainregisterns #main-body .btn-danger,
body.vc-page-clientareadomaingetepp #main-body .btn-danger,
body.vc-page-clientareadomaincontactinfo #main-body .btn-danger,
body.vc-page-clientareadomainaddons #main-body .btn-danger,
body.vc-page-clientareadomainemailforwarding #main-body .btn-danger {
    background: var(--vc-danger);
    border-color: var(--vc-danger);
    color: #fff;
}
body.vc-page-clientareadomaindetails #main-body .btn-default,
body.vc-page-clientareadomaindns #main-body .btn-default,
body.vc-page-clientareadomainregisterns #main-body .btn-default,
body.vc-page-clientareadomaingetepp #main-body .btn-default,
body.vc-page-clientareadomaincontactinfo #main-body .btn-default,
body.vc-page-clientareadomainaddons #main-body .btn-default,
body.vc-page-clientareadomainemailforwarding #main-body .btn-default {
    background: var(--vc-bg-surface);
    border-color: var(--vc-border-default);
    color: var(--vc-text-primary);
}

/* Status labels */
body.vc-page-clientareadomaindetails #main-body .label {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.vc-page-clientareadomaindetails #main-body .label-success {
    background: #ECFDF5;
    color: var(--vc-success);
}
body.vc-page-clientareadomaindetails #main-body .label-danger {
    background: var(--vc-danger-bg);
    color: var(--vc-danger);
}

/* "Do Today" action list */
body.vc-page-clientareadomaindetails #main-body .card-body ul {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}
body.vc-page-clientareadomaindetails #main-body .card-body ul li {
    margin: 0;
}
body.vc-page-clientareadomaindetails #main-body .card-body ul li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    border-radius: var(--vc-radius-lg);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms;
}
body.vc-page-clientareadomaindetails #main-body .card-body ul li a:hover {
    background: var(--vc-primary);
    color: #fff;
    text-decoration: none;
}

/* Radio pills for NS choice */
body.vc-page-clientareadomaindetails #main-body .form-check {
    padding: 0.5rem 0;
}
body.vc-page-clientareadomaindetails #main-body .form-check label {
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-text-secondary);
    cursor: pointer;
}

/* Alerts */
body.vc-page-clientareadomaindetails #main-body .alert,
body.vc-page-clientareadomaindns #main-body .alert,
body.vc-page-clientareadomainregisterns #main-body .alert {
    border-radius: var(--vc-radius-lg);
    padding: 0.875rem 1.125rem;
    font-size: var(--vc-text-sm);
    border: 1px solid transparent;
}
body.vc-page-clientareadomaindetails #main-body .alert-info,
body.vc-page-clientareadomaindns #main-body .alert-info {
    background: var(--vc-info-bg);
    color: var(--vc-info);
    border-color: #BFDBFE;
}
body.vc-page-clientareadomaindetails #main-body .alert-warning,
body.vc-page-clientareadomaindns #main-body .alert-warning {
    background: var(--vc-warning-bg);
    color: var(--vc-warning);
    border-color: #FDE68A;
}
body.vc-page-clientareadomaindetails #main-body .alert-danger,
body.vc-page-clientareadomaindns #main-body .alert-danger {
    background: var(--vc-danger-bg);
    color: var(--vc-danger);
    border-color: #FECACA;
}
body.vc-page-clientareadomaindetails #main-body .alert-success,
body.vc-page-clientareadomaindns #main-body .alert-success {
    background: #ECFDF5;
    color: var(--vc-success);
    border-color: #A7F3D0;
}

/* Keep secondary sidebar visible on domain sub-pages — it holds
 * tab links (Overview / Nameservers / Auto Renew / Reglock /
 * Addons / Release) that WHMCS injects. We do NOT hide .sidebar
 * on these pages. The left rail shows both vercaa nav and the
 * WHMCS domain management sidebar. */


/* ==== PAGE-BASE: login.css ==== */
/*
 * Vercaa /login page CSS
 * =======================
 * Two-column login layout: dark hero on the left, form on the right.
 * Auto-loaded by includes/head.tpl when {$templatefile} == "login".
 *
 * Reused by: login.tpl, password-reset-*, two-factor-*, user-invite-accept.
 * (Phase 2 ports login first; the others use the same .vc-auth shell.)
 */


/* ============================================================
 * SHELL — full-viewport split layout
 * ============================================================ */

.vc-auth {
    min-height: 100vh;
    display: flex;
    background: var(--vc-bg-surface);
}

.vc-auth-hero {
    display: none;
    width: 50%;
    position: relative;
    overflow: hidden;
    background: #0a0a0c;
    /* Decorative gradient — replace with bg image later if desired */
    background-image:
        radial-gradient(at 30% 20%, rgba(124, 58, 237, 0.4) 0%, transparent 60%),
        radial-gradient(at 70% 80%, rgba(168, 85, 247, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, #1E1B4B 0%, #0F0A1F 100%);
}

@media (min-width: 1024px) {
    .vc-auth-hero {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--vc-space-12);
    }
}

.vc-auth-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

.vc-auth-hero-content {
    position: relative;
    z-index: 2;
    color: var(--vc-text-inverse);
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-3);
}

a.vc-auth-hero-brand,
a.vc-auth-hero-brand:hover {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3);
    color: var(--vc-text-inverse);
    text-decoration: none;
    font-size: var(--vc-text-xl);
    font-weight: var(--vc-font-bold);
}

.vc-auth-hero-brand-mark {
    width: 2rem;
    height: 2rem;
    color: var(--vc-text-inverse);
}

.vc-auth-hero-text {
    max-width: 28rem;
    position: relative;
    z-index: 2;
}

.vc-auth-hero-text h2 {
    color: var(--vc-text-inverse);
    font-size: var(--vc-text-3xl);
    font-weight: var(--vc-font-bold);
    line-height: var(--vc-leading-tight);
    margin: 0 0 var(--vc-space-4);
}

.vc-auth-hero-text p {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--vc-text-lg);
    margin: 0;
}


/* ============================================================
 * FORM SIDE
 * ============================================================ */

.vc-auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--vc-space-6);
}
@media (min-width: 640px) {
    .vc-auth-main { padding: var(--vc-space-12); }
}
@media (min-width: 1024px) {
    .vc-auth-main {
        width: 50%;
        padding: var(--vc-space-16);
    }
}

.vc-auth-form-wrap {
    width: 100%;
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-8);
}


/* Mobile brand bar — visible only on narrow screens (hero is hidden) */
a.vc-auth-mobile-brand,
a.vc-auth-mobile-brand:hover {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2);
    margin-bottom: var(--vc-space-2);
    color: var(--vc-text-primary);
    text-decoration: none;
    font-size: var(--vc-text-lg);
    font-weight: var(--vc-font-bold);
}
@media (min-width: 1024px) {
    a.vc-auth-mobile-brand,
    a.vc-auth-mobile-brand:hover { display: none; }
}
.vc-auth-mobile-brand-mark {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--vc-primary);
}


/* Header — title + subtitle */
.vc-auth-header h1 {
    font-size: var(--vc-text-4xl);
    font-weight: var(--vc-font-extrabold);
    color: var(--vc-text-primary);
    line-height: 1.05;
    letter-spacing: var(--vc-tracking-tight);
    margin: 0 0 var(--vc-space-3);
}
.vc-auth-header p {
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-base);
    margin: 0;
}


/* Form fields — slightly larger than .vc-input default for the auth flow */
.vc-auth-fields {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-5);
}

.vc-auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-2);
}

.vc-auth-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--vc-text-xs);
    font-weight: var(--vc-font-bold);
    color: var(--vc-text-primary);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wide);
    margin: 0;
}

.vc-auth-label a {
    text-transform: none;
    letter-spacing: 0;
    color: var(--vc-primary);
    font-size: var(--vc-text-sm);
    font-weight: var(--vc-font-medium);
    text-decoration: none;
}
.vc-auth-label a:hover {
    text-decoration: underline;
}

.vc-auth-input {
    width: 100%;
    padding: var(--vc-space-4) var(--vc-space-5);
    background: var(--vc-bg-surface);
    color: var(--vc-text-primary);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    font-family: var(--vc-font-sans);
    font-size: var(--vc-text-base);
    line-height: var(--vc-leading-normal);
    transition: border-color var(--vc-transition-base),
                box-shadow var(--vc-transition-base);
    -webkit-appearance: none;
            appearance: none;
}
.vc-auth-input::placeholder {
    color: var(--vc-text-muted);
}
.vc-auth-input:focus {
    outline: none;
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.vc-auth-input.is-invalid {
    border-color: var(--vc-danger);
}

/* Password field with reveal button */
.vc-auth-password {
    position: relative;
}
.vc-auth-password .vc-auth-input {
    padding-right: 3.5rem;
}
.vc-auth-password-toggle {
    position: absolute;
    right: var(--vc-space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--vc-text-muted);
    cursor: pointer;
    padding: var(--vc-space-1);
    line-height: 1;
    transition: color var(--vc-transition-fast);
}
.vc-auth-password-toggle:hover {
    color: var(--vc-primary);
}


/* Primary CTA — full-width pill button */
.vc-auth-submit {
    width: 100%;
    height: 3.5rem;
    background: var(--vc-accent-orange);
    color: var(--vc-text-inverse);
    border: none;
    border-radius: var(--vc-radius-full);
    font-family: var(--vc-font-sans);
    font-size: var(--vc-text-base);
    font-weight: var(--vc-font-bold);
    letter-spacing: var(--vc-tracking-wide);
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(255, 92, 0, 0.3),
                0 4px 6px -2px rgba(255, 92, 0, 0.15);
    transition: background var(--vc-transition-base),
                transform var(--vc-transition-fast),
                box-shadow var(--vc-transition-base);
    -webkit-appearance: none;
            appearance: none;
}
.vc-auth-submit:hover {
    background: #E65300;
    transform: translateY(-1px);
    box-shadow: 0 15px 20px -3px rgba(255, 92, 0, 0.35);
}
.vc-auth-submit:active {
    transform: scale(0.98);
}
.vc-auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}


/* Remember-me checkbox row */
.vc-auth-remember {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2);
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    cursor: pointer;
}
.vc-auth-remember input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--vc-primary);
    cursor: pointer;
}


/* Divider with text — "or continue with" */
.vc-auth-divider {
    display: flex;
    align-items: center;
    gap: var(--vc-space-4);
    color: var(--vc-text-muted);
    font-size: var(--vc-text-xs);
    font-weight: var(--vc-font-bold);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider);
}
.vc-auth-divider::before,
.vc-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--vc-border-default);
}


/* Footer link */
.vc-auth-footer {
    text-align: center;
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    font-weight: var(--vc-font-medium);
}
.vc-auth-footer a {
    color: var(--vc-primary);
    font-weight: var(--vc-font-bold);
    text-decoration: none;
    margin-left: var(--vc-space-1);
}
.vc-auth-footer a:hover {
    text-decoration: underline;
}


/* WHMCS-injected partials inside the form (linkedaccounts, captcha) */
.vc-auth-form-wrap .alert {
    margin-bottom: 0;
}

/* Scope WHMCS linkedaccounts buttons to look like the design's social row */
.vc-auth-form-wrap .linked-accounts-container,
.vc-auth-form-wrap .providerLinkingFeedback {
    width: 100%;
}

/* ============================================================
 * PHASE 6 — additional auth shell helpers
 * Used by password-reset, two-factor, user-invite, user-verify,
 * user-verify-email, clientregister.
 * ============================================================ */

/* Wide variant for register and invite-accept */
.vc-auth-wide .vc-auth-main { width: 100%; }
@media (min-width: 1024px) {
    .vc-auth-wide .vc-auth-main { width: 60%; }
    .vc-auth-wide .vc-auth-hero { width: 40%; }
}
.vc-auth-wide .vc-auth-form-wrap {
    max-width: 48rem;
}

/* Centered text variant (verify-email result) */
.vc-auth-text-center {
    text-align: center;
}

/* Result icon (success/warn/error) for verify-email */
.vc-auth-icon-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    margin: 0 auto 1rem;
}
.vc-auth-icon-result.is-success { background: #ECFDF5; color: var(--vc-success); }
.vc-auth-icon-result.is-warn    { background: var(--vc-warning-bg); color: var(--vc-warning); }
.vc-auth-icon-result.is-error   { background: var(--vc-danger-bg);  color: var(--vc-danger);  }
.vc-auth-icon-result .material-symbols-outlined {
    font-size: 2rem !important;
}
.vc-auth-result-title {
    font-size: var(--vc-text-xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}
.vc-auth-success {
    margin: 0 0 1rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    line-height: 1.6;
}

/* 2FA challenge container */
.vc-auth-2fa {
    margin-bottom: 1rem;
}
.vc-auth-2fa input,
.vc-auth-2fa select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-base);
    background: var(--vc-bg-surface);
    color: var(--vc-text-primary);
    margin-bottom: 0.75rem;
}
.vc-auth-2fa input:focus,
.vc-auth-2fa select:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px var(--vc-primary-tint);
    outline: 0;
}
.vc-auth-2fa .btn,
.vc-auth-2fa button {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--vc-primary);
    color: #fff;
    border: 0;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms;
}
.vc-auth-2fa .btn:hover,
.vc-auth-2fa button:hover {
    background: var(--vc-primary-dark);
}

/* Backup code display */
.vc-auth-backup-code {
    margin: 1.5rem 0 1rem;
    padding: 1.5rem;
    background: var(--vc-warning-bg);
    border: 2px dashed var(--vc-warning);
    border-radius: var(--vc-radius-lg);
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vc-warning);
    letter-spacing: 0.1em;
    word-break: break-all;
}
.vc-auth-backup-text {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    line-height: 1.6;
    text-align: center;
    margin: 0 0 1.5rem;
}

/* Ghost button variant */
.vc-auth-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--vc-bg-surface);
    color: var(--vc-text-secondary);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-base);
    font-weight: 600;
    text-decoration: none;
    margin-top: 0.5rem;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.vc-auth-btn-ghost:hover {
    border-color: var(--vc-primary);
    color: var(--vc-primary);
    text-decoration: none;
}

/* ============================================================
 * Restyle inner WHMCS Bootstrap-form markup that auth tpls
 * still emit (password-reset inner templates, clientregister,
 * user-invite-accept). Keep markup; restyle visuals.
 * ============================================================ */

.vc-auth .form-group {
    margin-bottom: 1.25rem;
}
.vc-auth .form-group label {
    display: block;
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-secondary);
    margin-bottom: 0.5rem;
}
.vc-auth .form-control,
.vc-auth input[type="text"],
.vc-auth input[type="email"],
.vc-auth input[type="password"],
.vc-auth input[type="tel"],
.vc-auth select,
.vc-auth textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    background: var(--vc-bg-surface);
    transition: border-color 150ms, box-shadow 150ms;
}
.vc-auth .form-control:focus,
.vc-auth input:focus,
.vc-auth select:focus,
.vc-auth textarea:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px var(--vc-primary-tint);
    outline: 0;
}

/* input-group with prepend-icon (password-reset email prompt) */
.vc-auth .input-group {
    position: relative;
}
.vc-auth .input-group-prepend {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none;
}
.vc-auth .input-group-prepend .input-group-text {
    background: transparent;
    border: 0;
    padding: 0 0.75rem 0 0.875rem;
    color: var(--vc-text-muted);
    font-size: 0.875rem;
}
.vc-auth .input-group .form-control {
    padding-left: 2.5rem;
}
.vc-auth .input-group-append {
    position: relative;
    display: flex;
    align-items: stretch;
}
.vc-auth .input-group-append .btn {
    border-radius: 0 var(--vc-radius-md) var(--vc-radius-md) 0;
}

/* Buttons in auth context */
.vc-auth .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms;
    text-decoration: none;
}
.vc-auth .btn-lg {
    padding: 0.875rem 1.5rem;
    font-size: var(--vc-text-base);
}
.vc-auth .btn-block {
    width: 100%;
    display: flex;
}
.vc-auth .btn-primary {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
    color: #fff;
}
.vc-auth .btn-primary:hover {
    background: var(--vc-primary-dark);
    border-color: var(--vc-primary-dark);
    color: #fff;
    text-decoration: none;
}
.vc-auth .btn-default {
    background: var(--vc-bg-surface);
    border-color: var(--vc-border-default);
    color: var(--vc-text-primary);
}
.vc-auth .btn-default:hover {
    background: var(--vc-bg-elevated);
    border-color: var(--vc-primary-light);
    color: var(--vc-text-primary);
    text-decoration: none;
}

/* Cards inside auth (clientregister sub-sections) */
.vc-auth .card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-sm);
    margin-bottom: 1.5rem;
}
.vc-auth .card .card-body {
    padding: 1.5rem;
}
.vc-auth .card .card-title {
    font-size: var(--vc-text-lg);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--vc-border-subtle);
    letter-spacing: -0.01em;
}

/* Alerts */
.vc-auth .alert {
    border-radius: var(--vc-radius-lg);
    padding: 0.875rem 1.125rem;
    font-size: var(--vc-text-sm);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
}
.vc-auth .alert-info    { background: var(--vc-info-bg);    color: var(--vc-info);    border-color: #BFDBFE; }
.vc-auth .alert-warning { background: var(--vc-warning-bg); color: var(--vc-warning); border-color: #FDE68A; }
.vc-auth .alert-danger,
.vc-auth .alert-error { background: var(--vc-danger-bg); color: var(--vc-danger); border-color: #FECACA; }
.vc-auth .alert-success { background: #ECFDF5; color: var(--vc-success); border-color: #A7F3D0; }

/* Invite-accept dual login/register columns */
.vc-auth .invite-box {
    background: var(--vc-bg-elevated);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.vc-auth .invite-box h2 {
    font-size: var(--vc-text-lg);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0 0 1rem;
    text-align: center;
}

/* Password strength meter */
.vc-auth .password-strength-meter .progress {
    background: var(--vc-border-subtle);
    border-radius: 9999px;
    overflow: hidden;
}
.vc-auth .password-strength-meter .progress-bar {
    background: var(--vc-success);
}


/* ==== PAGE-BASE: viewticket.css ==== */
/*
 * Vercaa — viewticket.css (+ shared with submit/feedback)
 * =======================================================
 * Restyles the Twenty-One support ticket pages with vercaa
 * tokens. Markup is left intact so attachment uploads,
 * markdown editor, knowledgebase suggestions, custom fields,
 * and reply forms all keep working.
 */

body.vc-page-viewticket #main-body .card,
body.vc-page-supportticketsubmit-stepone #main-body .card,
body.vc-page-supportticketsubmit-steptwo #main-body .card,
body.vc-page-supportticketsubmit-confirm #main-body .card,
body.vc-page-supportticketsubmit-customfields #main-body .card,
body.vc-page-supportticketsubmit-kbsuggestions #main-body .card,
body.vc-page-ticketfeedback #main-body .card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 1rem;
    box-shadow: var(--vc-shadow-sm);
    margin-bottom: 1.5rem;
}
body.vc-page-viewticket #main-body .card .card-body,
body.vc-page-supportticketsubmit-stepone #main-body .card .card-body,
body.vc-page-supportticketsubmit-steptwo #main-body .card .card-body,
body.vc-page-supportticketsubmit-confirm #main-body .card .card-body,
body.vc-page-supportticketsubmit-customfields #main-body .card .card-body,
body.vc-page-supportticketsubmit-kbsuggestions #main-body .card .card-body,
body.vc-page-ticketfeedback #main-body .card .card-body {
    padding: 2rem;
}
body.vc-page-viewticket #main-body h1,
body.vc-page-viewticket #main-body h2,
body.vc-page-viewticket #main-body .card-title,
body.vc-page-supportticketsubmit-stepone #main-body h2,
body.vc-page-supportticketsubmit-steptwo #main-body h2,
body.vc-page-supportticketsubmit-confirm #main-body h2,
body.vc-page-ticketfeedback #main-body h2 {
    font-size: var(--vc-text-2xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    letter-spacing: -0.01em;
}

/* Ticket reply blocks */
body.vc-page-viewticket #main-body .ticket-reply,
body.vc-page-viewticket #main-body .reply,
body.vc-page-viewticket #main-body .panel {
    background: var(--vc-bg-elevated);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
body.vc-page-viewticket #main-body .ticket-reply .panel-heading,
body.vc-page-viewticket #main-body .panel .panel-heading {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--vc-border-subtle);
    padding: 0 0 0.75rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--vc-text-primary);
}

/* Forms */
body.vc-page-viewticket #main-body .form-control,
body.vc-page-supportticketsubmit-stepone #main-body .form-control,
body.vc-page-supportticketsubmit-steptwo #main-body .form-control,
body.vc-page-supportticketsubmit-confirm #main-body .form-control,
body.vc-page-supportticketsubmit-customfields #main-body .form-control,
body.vc-page-ticketfeedback #main-body .form-control {
    border-radius: var(--vc-radius-md);
    border: 1px solid var(--vc-border-default);
    padding: 0.625rem 0.875rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
}
body.vc-page-viewticket #main-body .form-control:focus,
body.vc-page-supportticketsubmit-stepone #main-body .form-control:focus,
body.vc-page-supportticketsubmit-steptwo #main-body .form-control:focus,
body.vc-page-supportticketsubmit-confirm #main-body .form-control:focus,
body.vc-page-supportticketsubmit-customfields #main-body .form-control:focus,
body.vc-page-ticketfeedback #main-body .form-control:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px var(--vc-primary-tint);
    outline: 0;
}
body.vc-page-viewticket #main-body .col-form-label,
body.vc-page-supportticketsubmit-stepone #main-body .col-form-label,
body.vc-page-supportticketsubmit-steptwo #main-body .col-form-label,
body.vc-page-supportticketsubmit-confirm #main-body .col-form-label,
body.vc-page-supportticketsubmit-customfields #main-body .col-form-label,
body.vc-page-ticketfeedback #main-body .col-form-label {
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-secondary);
}

/* Buttons */
body.vc-page-viewticket #main-body .btn,
body.vc-page-supportticketsubmit-stepone #main-body .btn,
body.vc-page-supportticketsubmit-steptwo #main-body .btn,
body.vc-page-supportticketsubmit-confirm #main-body .btn,
body.vc-page-supportticketsubmit-customfields #main-body .btn,
body.vc-page-supportticketsubmit-kbsuggestions #main-body .btn,
body.vc-page-ticketfeedback #main-body .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms;
    text-decoration: none;
}
body.vc-page-viewticket #main-body .btn-primary,
body.vc-page-supportticketsubmit-stepone #main-body .btn-primary,
body.vc-page-supportticketsubmit-steptwo #main-body .btn-primary,
body.vc-page-supportticketsubmit-confirm #main-body .btn-primary,
body.vc-page-supportticketsubmit-customfields #main-body .btn-primary,
body.vc-page-ticketfeedback #main-body .btn-primary {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
    color: #fff;
}
body.vc-page-viewticket #main-body .btn-primary:hover,
body.vc-page-supportticketsubmit-stepone #main-body .btn-primary:hover,
body.vc-page-supportticketsubmit-steptwo #main-body .btn-primary:hover,
body.vc-page-supportticketsubmit-confirm #main-body .btn-primary:hover,
body.vc-page-supportticketsubmit-customfields #main-body .btn-primary:hover,
body.vc-page-ticketfeedback #main-body .btn-primary:hover {
    background: var(--vc-primary-dark);
    border-color: var(--vc-primary-dark);
    color: #fff;
    text-decoration: none;
}
body.vc-page-viewticket #main-body .btn-default,
body.vc-page-supportticketsubmit-stepone #main-body .btn-default,
body.vc-page-supportticketsubmit-steptwo #main-body .btn-default,
body.vc-page-supportticketsubmit-confirm #main-body .btn-default,
body.vc-page-supportticketsubmit-customfields #main-body .btn-default,
body.vc-page-supportticketsubmit-kbsuggestions #main-body .btn-default {
    background: var(--vc-bg-surface);
    border-color: var(--vc-border-default);
    color: var(--vc-text-primary);
}
body.vc-page-viewticket #main-body .btn-success,
body.vc-page-supportticketsubmit-stepone #main-body .btn-success,
body.vc-page-supportticketsubmit-steptwo #main-body .btn-success,
body.vc-page-supportticketsubmit-confirm #main-body .btn-success,
body.vc-page-ticketfeedback #main-body .btn-success {
    background: var(--vc-success);
    border-color: var(--vc-success);
    color: #fff;
}
body.vc-page-viewticket #main-body .btn-danger,
body.vc-page-supportticketsubmit-stepone #main-body .btn-danger,
body.vc-page-supportticketsubmit-steptwo #main-body .btn-danger,
body.vc-page-supportticketsubmit-confirm #main-body .btn-danger {
    background: var(--vc-danger);
    border-color: var(--vc-danger);
    color: #fff;
}

/* Status label */
body.vc-page-viewticket #main-body .label,
body.vc-page-supportticketsubmit-stepone #main-body .label {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.vc-page-viewticket #main-body .label-success { background: #ECFDF5; color: var(--vc-success); }
body.vc-page-viewticket #main-body .label-warning { background: var(--vc-warning-bg); color: var(--vc-warning); }
body.vc-page-viewticket #main-body .label-danger  { background: var(--vc-danger-bg); color: var(--vc-danger); }
body.vc-page-viewticket #main-body .label-info    { background: var(--vc-info-bg); color: var(--vc-info); }

/* Alerts */
body.vc-page-viewticket #main-body .alert,
body.vc-page-supportticketsubmit-stepone #main-body .alert,
body.vc-page-supportticketsubmit-steptwo #main-body .alert,
body.vc-page-supportticketsubmit-confirm #main-body .alert,
body.vc-page-supportticketsubmit-customfields #main-body .alert,
body.vc-page-supportticketsubmit-kbsuggestions #main-body .alert,
body.vc-page-ticketfeedback #main-body .alert {
    border-radius: var(--vc-radius-lg);
    padding: 0.875rem 1.125rem;
    font-size: var(--vc-text-sm);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
}
body.vc-page-viewticket #main-body .alert-info,
body.vc-page-supportticketsubmit-stepone #main-body .alert-info,
body.vc-page-supportticketsubmit-steptwo #main-body .alert-info { background: var(--vc-info-bg); color: var(--vc-info); border-color: #BFDBFE; }
body.vc-page-viewticket #main-body .alert-warning,
body.vc-page-supportticketsubmit-stepone #main-body .alert-warning { background: var(--vc-warning-bg); color: var(--vc-warning); border-color: #FDE68A; }
body.vc-page-viewticket #main-body .alert-danger { background: var(--vc-danger-bg); color: var(--vc-danger); border-color: #FECACA; }
body.vc-page-viewticket #main-body .alert-success,
body.vc-page-ticketfeedback #main-body .alert-success { background: #ECFDF5; color: var(--vc-success); border-color: #A7F3D0; }


/* ==== PAGE-BASE: store-pages.css ==== */
/*
 * Vercaa — store-pages.css
 * ========================
 * Shared primitives for all 7 store landing pages (ssl-certificates,
 * nord-vpn, codeguard, sitelock, monitoring, ox-app-suite,
 * email-services). Loaded via per-page import shims.
 *
 * All store pages are full-render marketing pages — body class
 * vc-page-marketing + vc-page-{templatefile}. They include the
 * shared public-header.tpl + public-footer.tpl.
 */

/* ================================================================
 * PAGE SHELL
 * ================================================================ */
.vc-store {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--vc-bg-base);
    font-family: var(--vc-font-sans);
    color: var(--vc-text-primary);
}

/* ================================================================
 * HERO
 * ================================================================ */
.vc-store-hero {
    position: relative;
    padding: 5rem 1.5rem 6rem;
    overflow: hidden;
    background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
}
.vc-store-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(96px);
    pointer-events: none;
    z-index: 0;
}
.vc-store-hero-orb.is-a {
    top: 4rem; right: 8%;
    width: 24rem; height: 24rem;
    background: rgba(124, 58, 237, 0.18);
}
.vc-store-hero-orb.is-b {
    bottom: 2rem; left: 5%;
    width: 28rem; height: 28rem;
    background: rgba(255, 92, 0, 0.10);
}
.vc-store-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 80rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .vc-store-hero-inner { grid-template-columns: 1.1fr 1fr; }
}
.vc-store-hero-text { min-width: 0; }
.vc-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: var(--vc-radius-full);
    background: var(--vc-primary-tint);
    border: 1px solid rgba(124, 58, 237, 0.2);
    margin-bottom: 1.5rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    color: var(--vc-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.vc-store-badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--vc-primary);
    animation: vcStorePulse 2s infinite;
}
@keyframes vcStorePulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }

.vc-page .vc-store-hero-title {
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--vc-text-primary);
    margin: 0 0 1.5rem;
}
.vc-store-hero-grad {
    background: linear-gradient(135deg, var(--vc-primary), var(--vc-accent-orange));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.vc-store-hero-sub {
    font-size: var(--vc-text-lg);
    color: var(--vc-text-secondary);
    margin: 0 0 2rem;
    line-height: 1.6;
    max-width: 36rem;
}
.vc-store-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.vc-page a.vc-store-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--vc-accent-orange);
    color: #fff;
    font-size: var(--vc-text-base);
    font-weight: 700;
    border-radius: var(--vc-radius-xl);
    text-decoration: none;
    box-shadow: 0 14px 24px -10px rgba(255, 92, 0, 0.45);
    transition: background 200ms, transform 200ms;
}
.vc-page a.vc-store-cta:hover {
    background: #E85200;
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
.vc-page a.vc-store-cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: var(--vc-bg-surface);
    color: var(--vc-text-primary);
    font-size: var(--vc-text-base);
    font-weight: 600;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    text-decoration: none;
    transition: all 200ms;
}
.vc-page a.vc-store-cta-ghost:hover {
    border-color: var(--vc-primary);
    color: var(--vc-primary);
    text-decoration: none;
}

/* Hero illustration card */
.vc-store-hero-art {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 28rem;
    margin: 0 auto;
}
.vc-store-hero-art-card {
    position: absolute;
    inset: 0;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-2xl);
    box-shadow: 0 25px 50px -12px rgba(124, 58, 237, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-store-hero-art-card .material-symbols-outlined {
    font-size: 8rem !important;
    color: var(--vc-primary);
    filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.3));
}
.vc-store-hero-art-glow {
    position: absolute;
    inset: 1.5rem;
    background: linear-gradient(135deg, var(--vc-primary), var(--vc-accent-orange));
    opacity: 0.18;
    border-radius: var(--vc-radius-2xl);
    transform: rotate(8deg);
    z-index: -1;
    filter: blur(20px);
}

/* ================================================================
 * SECTION + heading
 * ================================================================ */
.vc-store-section {
    padding: 5rem 1.5rem;
}
.vc-store-section.is-tinted { background: var(--vc-bg-surface); }
.vc-store-section-inner {
    max-width: 80rem;
    margin: 0 auto;
}
.vc-store-section-head {
    text-align: center;
    margin-bottom: 3.5rem;
}
.vc-store-eyebrow {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--vc-accent-orange);
}
.vc-page .vc-store-section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--vc-text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
}
.vc-store-section-sub {
    font-size: var(--vc-text-lg);
    color: var(--vc-text-secondary);
    max-width: 40rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* ================================================================
 * PRICING TIERS (3-up cards)
 * ================================================================ */
.vc-store-tiers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px)  { .vc-store-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vc-store-tiers { grid-template-columns: repeat(3, 1fr); } }

.vc-store-tier {
    position: relative;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-2xl);
    padding: 2rem;
    box-shadow: var(--vc-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}
.vc-store-tier:hover {
    transform: translateY(-4px);
    box-shadow: var(--vc-shadow-xl);
    border-color: var(--vc-primary-light);
}
.vc-store-tier.is-popular {
    border-color: var(--vc-primary);
    box-shadow: 0 20px 40px -12px rgba(124, 58, 237, 0.25);
}
.vc-store-tier-badge {
    position: absolute;
    top: 0;
    right: 1.5rem;
    transform: translateY(-50%);
    background: var(--vc-accent-orange);
    color: #fff;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.375rem 0.875rem;
    border-radius: var(--vc-radius-full);
    box-shadow: 0 4px 12px -2px rgba(255, 92, 0, 0.4);
}
.vc-store-tier-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--vc-radius-full);
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    margin-bottom: 1.5rem;
}
.vc-store-tier-icon .material-symbols-outlined {
    font-size: 1.5rem !important;
}
.vc-page .vc-store-tier-name {
    font-size: var(--vc-text-xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0 0 0.5rem;
}
.vc-store-tier-desc {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    line-height: 1.6;
    margin: 0 0 1.5rem;
    flex: 1;
}
.vc-store-tier-priceblock {
    margin-bottom: 1.5rem;
}
.vc-store-tier-priceblock-eyebrow {
    display: block;
    font-size: var(--vc-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    margin-bottom: 0.25rem;
}
.vc-store-tier-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--vc-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.vc-store-tier-price-cycle {
    font-size: var(--vc-text-base);
    font-weight: 500;
    color: var(--vc-text-muted);
}
.vc-store-tier-features {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.vc-store-tier-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
}
.vc-store-tier-features li .material-symbols-outlined {
    color: var(--vc-success);
    font-size: 1.125rem !important;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}
.vc-page a.vc-store-tier-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.25rem;
    background: var(--vc-primary);
    color: #fff;
    font-size: var(--vc-text-sm);
    font-weight: 700;
    border-radius: var(--vc-radius-lg);
    text-decoration: none;
    transition: background 200ms, transform 200ms;
    margin-top: auto;
}
.vc-page a.vc-store-tier-btn:hover {
    background: var(--vc-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
.vc-store-tier.is-popular a.vc-store-tier-btn {
    background: var(--vc-accent-orange);
}
.vc-store-tier.is-popular a.vc-store-tier-btn:hover {
    background: #E85200;
}

/* ================================================================
 * FEATURE GRID (3-up icon + heading + copy)
 * ================================================================ */
.vc-store-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px)  { .vc-store-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vc-store-features { grid-template-columns: repeat(3, 1fr); } }

.vc-store-feature {
    text-align: left;
}
.vc-store-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--vc-radius-lg);
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    margin-bottom: 1.25rem;
}
.vc-store-feature-icon.is-orange {
    background: rgba(255, 92, 0, 0.1);
    color: var(--vc-accent-orange);
}
.vc-store-feature-icon.is-green {
    background: var(--vc-success-bg);
    color: var(--vc-success);
}
.vc-store-feature-icon.is-blue {
    background: var(--vc-info-bg);
    color: var(--vc-info);
}
.vc-store-feature-icon .material-symbols-outlined {
    font-size: 1.5rem !important;
}
.vc-page .vc-store-feature-title {
    font-size: var(--vc-text-lg);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.vc-store-feature-text {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ================================================================
 * SPLIT SECTION (text + image/illustration block)
 * ================================================================ */
.vc-store-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .vc-store-split { grid-template-columns: 1fr 1fr; }
    .vc-store-split.is-reverse > :first-child { order: 2; }
}
.vc-page .vc-store-split-title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 800;
    color: var(--vc-text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}
.vc-store-split-sub {
    font-size: var(--vc-text-base);
    color: var(--vc-text-secondary);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}
.vc-store-split-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.vc-store-split-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    line-height: 1.6;
}
.vc-store-split-list li .material-symbols-outlined {
    color: var(--vc-success);
    font-size: 1.25rem !important;
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.vc-store-split-art {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--vc-radius-2xl);
    background: linear-gradient(135deg, var(--vc-primary-tint), rgba(255, 92, 0, 0.08));
    border: 1px solid var(--vc-border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vc-store-split-art .material-symbols-outlined {
    font-size: 7rem !important;
    color: var(--vc-primary);
    opacity: 0.6;
}

/* ================================================================
 * FAQ accordion
 * ================================================================ */
.vc-store-faq {
    max-width: 48rem;
    margin: 0 auto;
}
.vc-store-faq-item {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.vc-store-faq-item summary {
    list-style: none;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-size: var(--vc-text-base);
    font-weight: 600;
    color: var(--vc-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.vc-store-faq-item summary::-webkit-details-marker { display: none; }
.vc-store-faq-item summary::after {
    content: "expand_more";
    font-family: "Material Symbols Outlined";
    color: var(--vc-text-muted);
    font-size: 1.5rem;
    transition: transform 200ms;
}
.vc-store-faq-item[open] summary::after { transform: rotate(180deg); }
.vc-store-faq-item p {
    margin: 0;
    padding: 0 1.5rem 1.25rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    line-height: 1.7;
}

/* ================================================================
 * CTA BANNER (full-width band)
 * ================================================================ */
.vc-store-cta-band {
    margin: 4rem 1.5rem;
    padding: 3rem 2rem;
    border-radius: var(--vc-radius-2xl);
    background: linear-gradient(135deg, var(--vc-primary) 0%, #6D28D9 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(124, 58, 237, 0.35);
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}
.vc-page .vc-store-cta-band-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}
.vc-store-cta-band-sub {
    font-size: var(--vc-text-base);
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 1.75rem;
}
.vc-page a.vc-store-cta-band-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: #fff;
    color: var(--vc-primary);
    font-size: var(--vc-text-base);
    font-weight: 700;
    border-radius: var(--vc-radius-xl);
    text-decoration: none;
    transition: transform 200ms;
}
.vc-page a.vc-store-cta-band-btn:hover {
    transform: translateY(-2px);
    color: var(--vc-primary);
    text-decoration: none;
}


/* ==== PAGE-BASE: shared-hosting.css ==== */
/*
 * Vercaa — shared-hosting.css
 * ===========================
 * Page CSS for /shared-hosting.php. Ported from
 * vercaa-ui-design/shared-hosting/code.html to canonical vercaa tokens.
 *
 * Design uses #a855f7 primary (purple-500) + #10b981 accent (emerald)
 * + Inter. We map:
 *   design.primary  → --vc-primary (#7C3AED, more saturated purple)
 *   design.secondary → keep local var --vc-sh-accent (emerald) since
 *                      the design uses it for "best value" and "check"
 *                      icons — not worth bleeding into global tokens
 *                      for one page.
 */

.vc-sh {
    --vc-sh-accent: #10B981;
    --vc-sh-accent-bg: #D1FAE5;
    --vc-sh-accent-dark: #059669;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #FAFAFA;
}

/* ================================================================
 * HERO
 * ================================================================ */

.vc-sh-hero {
    position: relative;
    padding: 5rem 1.5rem 8rem;
    overflow: hidden;
}
.vc-sh-hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.vc-sh-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(96px);
}
.vc-sh-hero-orb.is-a { top: 4rem; right: 10%; width: 18rem; height: 18rem; background: rgba(124,58,237,0.20); animation: vcShFloat 8s ease-in-out infinite; }
.vc-sh-hero-orb.is-b { bottom: 5rem; left: 10%; width: 24rem; height: 24rem; background: rgba(16,185,129,0.12); animation: vcShFloat 8s ease-in-out infinite; animation-delay: 2s; }
.vc-sh-hero-orb.is-c { top: 30%; left: 50%; transform: translateX(-50%); width: 32rem; height: 32rem; background: rgba(243,232,255,0.6); filter: blur(100px); }
@keyframes vcShFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
.vc-sh-hero .vc-sh-hero-orb.is-c { transform: translate(-50%, 0); }

.vc-sh-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 64rem;
    margin: 0 auto;
    text-align: center;
}
.vc-sh-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: var(--vc-radius-full);
    background: #fff;
    border: 1px solid var(--vc-primary-tint);
    box-shadow: var(--vc-shadow-sm);
    margin-bottom: 1.5rem;
}
.vc-sh-hero-badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--vc-sh-accent);
    animation: vcShPulse 2s infinite;
}
@keyframes vcShPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.vc-sh-hero-badge-text {
    font-size: var(--vc-text-xs);
    font-weight: 700;
    color: var(--vc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.vc-page .vc-sh-hero-title {
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--vc-text-primary);
    margin: 0 0 1.25rem;
}
.vc-sh-hero-title-gradient {
    background: linear-gradient(135deg, var(--vc-primary), var(--vc-sh-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.vc-page .vc-sh-hero-sub {
    font-size: var(--vc-text-xl);
    color: var(--vc-text-secondary);
    max-width: 40rem;
    margin: 0 auto;
    font-weight: 300;
}

/* ================================================================
 * PLAN CARDS
 * ================================================================ */

.vc-sh-plans {
    padding: 5rem 1.5rem;
    background: #fff;
    border-top: 1px solid var(--vc-border-subtle);
    border-bottom: 1px solid var(--vc-border-subtle);
}
.vc-sh-plans-inner {
    max-width: 80rem;
    margin: 0 auto;
}
.vc-sh-plans-head {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 3rem;
}
.vc-page .vc-sh-plans-title {
    font-size: var(--vc-text-3xl);
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: var(--vc-text-primary);
    letter-spacing: -0.02em;
}
.vc-page .vc-sh-plans-sub {
    margin: 0;
    color: var(--vc-text-secondary);
}

.vc-sh-plans-card-wrap {
    background: linear-gradient(135deg, #fff, var(--vc-primary-tint));
    border: 1px solid var(--vc-primary-tint);
    border-radius: 2rem;
    padding: 2rem;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) { .vc-sh-plans-card-wrap { padding: 3rem; } }
.vc-sh-plans-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.vc-sh-plans-card-head .material-symbols-outlined {
    font-size: 1.5rem !important;
    color: var(--vc-sh-accent);
}
.vc-page .vc-sh-plans-card-title {
    margin: 0;
    font-size: var(--vc-text-2xl);
    font-weight: 800;
    color: var(--vc-text-primary);
}
.vc-sh-plans-card-badge {
    padding: 0.125rem 0.5rem;
    border-radius: var(--vc-radius-sm);
    font-size: 10px;
    font-weight: 700;
    background: #F3F4F6;
    color: var(--vc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vc-sh-plan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 640px) { .vc-sh-plan-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .vc-sh-plan-grid { grid-template-columns: repeat(4, 1fr); } }

.vc-sh-plan {
    position: relative;
    background: #fff;
    padding: 1.5rem;
    border-radius: var(--vc-radius-xl);
    border: 1px solid var(--vc-border-default);
    transition: all 200ms;
    display: flex;
    flex-direction: column;
}
.vc-sh-plan:hover {
    border-color: var(--vc-sh-accent);
    box-shadow: var(--vc-shadow-lg);
}
.vc-sh-plan.is-featured {
    border: 2px solid var(--vc-sh-accent);
    box-shadow: 0 20px 40px -8px rgba(16, 185, 129, 0.2);
    transform: translateY(-0.5rem);
}
.vc-sh-plan-ribbon {
    position: absolute;
    top: -0.875rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--vc-sh-accent), #34D399);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.375rem 1rem;
    border-radius: var(--vc-radius-full);
    box-shadow: 0 6px 12px -4px rgba(16, 185, 129, 0.4);
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.5);
}
.vc-sh-plan-name {
    font-size: var(--vc-text-sm);
    font-weight: 700;
    color: var(--vc-text-secondary);
    margin: 0 0 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vc-sh-plan.is-featured .vc-sh-plan-name { color: var(--vc-sh-accent); margin-top: 0.5rem; }
.vc-sh-plan-price {
    font-size: var(--vc-text-4xl);
    font-weight: 800;
    color: var(--vc-text-primary);
    margin: 0 0 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
.vc-sh-plan-price-unit {
    font-size: var(--vc-text-sm);
    font-weight: 400;
    color: var(--vc-text-muted);
}
.vc-sh-plan-price-sup {
    font-size: var(--vc-text-lg);
    font-weight: 600;
    color: var(--vc-text-muted);
    align-self: flex-start;
    margin-top: 0.5rem;
}
.vc-sh-plan-features {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.vc-sh-plan-features li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    line-height: 1.5;
}
.vc-sh-plan-features li .material-symbols-outlined {
    font-size: 1rem !important;
    color: var(--vc-sh-accent);
    margin-top: 0.125rem;
    flex-shrink: 0;
}
.vc-sh-plan-btn {
    width: 100%;
    padding: 0.625rem 1rem;
    background: transparent;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-primary);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: all 150ms;
}
.vc-page a.vc-sh-plan-btn { color: var(--vc-text-primary); }
.vc-page a.vc-sh-plan-btn:hover {
    background: #F9FAFB;
    border-color: var(--vc-text-secondary);
    text-decoration: none;
}
.vc-sh-plan.is-featured .vc-sh-plan-btn,
.vc-page .vc-sh-plan.is-featured a.vc-sh-plan-btn {
    background: var(--vc-sh-accent);
    color: #fff;
    border-color: var(--vc-sh-accent);
    box-shadow: 0 6px 14px -4px rgba(16,185,129,0.4);
}
.vc-page .vc-sh-plan.is-featured a.vc-sh-plan-btn:hover {
    background: var(--vc-sh-accent-dark);
    border-color: var(--vc-sh-accent-dark);
}

.vc-sh-plans-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--vc-text-secondary);
    background: #fff;
    border-radius: var(--vc-radius-lg);
    border: 1px dashed var(--vc-border-default);
}

/* ================================================================
 * POWER UNDER THE HOOD — 3-col feature band
 * ================================================================ */

.vc-sh-power {
    padding: 5rem 1.5rem;
    background: #F9FAFB;
    border-bottom: 1px solid var(--vc-border-subtle);
}
.vc-sh-power-inner { max-width: 80rem; margin: 0 auto; }
.vc-sh-power-head {
    text-align: center;
    margin-bottom: 3rem;
}
.vc-page .vc-sh-power-title {
    font-size: var(--vc-text-3xl);
    font-weight: 800;
    margin: 0;
    color: var(--vc-text-primary);
    letter-spacing: -0.02em;
}
.vc-sh-power-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) { .vc-sh-power-grid { grid-template-columns: repeat(3, 1fr); } }

.vc-sh-power-card {
    background: #fff;
    padding: 2rem;
    border-radius: var(--vc-radius-xl);
    border: 1px solid var(--vc-border-subtle);
    box-shadow: var(--vc-shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.vc-sh-power-icon {
    position: relative;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.vc-sh-power-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.4;
}
.vc-sh-power-icon.is-accent::before { background: rgba(16,185,129,0.3); }
.vc-sh-power-icon.is-primary::before { background: rgba(124,58,237,0.3); }
.vc-sh-power-icon.is-blue::before { background: rgba(59,130,246,0.3); }
.vc-sh-power-icon .material-symbols-outlined {
    position: relative;
    font-size: 3.5rem !important;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}
.vc-sh-power-icon.is-accent .material-symbols-outlined { color: var(--vc-sh-accent); }
.vc-sh-power-icon.is-primary .material-symbols-outlined { color: var(--vc-primary); }
.vc-sh-power-icon.is-blue .material-symbols-outlined { color: #3B82F6; }
.vc-page .vc-sh-power-card h3 {
    margin: 0 0 0.5rem;
    font-size: var(--vc-text-xl);
    font-weight: 700;
}
.vc-page .vc-sh-power-card p {
    margin: 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    line-height: 1.6;
}

/* ================================================================
 * FAQ
 * ================================================================ */

.vc-sh-faq {
    padding: 5rem 1.5rem;
    background: #fff;
}
.vc-sh-faq-inner {
    max-width: 48rem;
    margin: 0 auto;
}
.vc-sh-faq-head {
    text-align: center;
    margin-bottom: 3rem;
}
.vc-page .vc-sh-faq-title {
    font-size: var(--vc-text-3xl);
    font-weight: 800;
    margin: 0 0 0.5rem;
    color: var(--vc-text-primary);
    letter-spacing: -0.02em;
}
.vc-page .vc-sh-faq-sub {
    margin: 0;
    color: var(--vc-text-secondary);
}
.vc-sh-faq-list { display: flex; flex-direction: column; gap: 1rem; }
.vc-sh-faq-item {
    background: #fff;
    border: 1px solid var(--vc-border-subtle);
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-sm);
    overflow: hidden;
    transition: box-shadow 200ms;
}
.vc-sh-faq-item[open] { box-shadow: var(--vc-shadow-md); }
.vc-sh-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--vc-text-base);
    color: var(--vc-text-primary);
    list-style: none;
    gap: 1rem;
}
.vc-sh-faq-item summary::-webkit-details-marker { display: none; }
.vc-sh-faq-item summary .material-symbols-outlined {
    color: var(--vc-text-muted);
    transition: transform 200ms, color 200ms;
}
.vc-sh-faq-item[open] summary .material-symbols-outlined {
    transform: rotate(180deg);
    color: var(--vc-primary);
}
.vc-sh-faq-body {
    padding: 0 1.5rem 1.25rem;
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    line-height: 1.7;
}

/* ================================================================
 * CTA BAND
 * ================================================================ */

.vc-sh-cta {
    padding: 5rem 1.5rem;
    background: linear-gradient(135deg, var(--vc-primary), #A855F7);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.vc-sh-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1), transparent 50%);
    pointer-events: none;
}
.vc-sh-cta-inner {
    position: relative;
    max-width: 48rem;
    margin: 0 auto;
}
.vc-page .vc-sh-cta-title {
    font-size: var(--vc-text-4xl);
    font-weight: 800;
    margin: 0 0 1rem;
    color: #fff;
    letter-spacing: -0.02em;
}
.vc-page .vc-sh-cta-sub {
    font-size: var(--vc-text-lg);
    color: rgba(255,255,255,0.85);
    margin: 0 0 2rem;
}
.vc-page a.vc-sh-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: #fff;
    color: var(--vc-primary);
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-base);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 16px 30px -10px rgba(0,0,0,0.3);
    transition: transform 150ms, box-shadow 150ms;
}
.vc-page a.vc-sh-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px -10px rgba(0,0,0,0.35);
    text-decoration: none;
}



/* ==== PAGE-BASE: domains.css ==== */
/*
 * Vercaa — domains.css
 * ====================
 * Page styles for /domains.php and /domain-transfer.php (shared).
 * Ported from vercaa-ui-design/domains/code.html to canonical
 * vercaa tokens. The design happens to already use #7C3AED primary
 * and Inter, so no token remapping needed for this page.
 *
 * Integration notes:
 *   - The AJAX engine lives at partial/domain-search-engine.tpl and
 *     injects .wgs-domain-res, .cong-massage, .domain-suggestion DOM
 *     nodes into containers we provide. Those class names are
 *     preserved verbatim from lagom2 and MUST NOT be renamed here.
 *   - The input/button hookup is: #domainname + #search-icon-box
 *     with wgsSearchdomain(this) inline onclick. Preserve.
 *   - Bootstrap form-control reset will clobber our search input
 *     unless we bump specificity — we use input#domainname to win.
 */

/* ================================================================
 * PAGE SHELL
 * ================================================================ */

.vc-page-domains,
.vc-page-domain-transfer {
    background: var(--vc-bg-base);
}

.vc-dom {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ================================================================
 * HERO
 * ================================================================ */

.vc-dom-hero {
    position: relative;
    padding: 5rem 1rem 6rem;
    overflow: hidden;
}
.vc-dom-hero-blob {
    position: absolute;
    top: 0;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    mix-blend-mode: multiply;
    filter: blur(80px);
    opacity: 0.3;
    pointer-events: none;
    animation: vcDomBlob 10s ease-in-out infinite;
}
.vc-dom-hero-blob.is-left { left: 20%; background: #DDD6FE; }
.vc-dom-hero-blob.is-right { right: 20%; background: #BFDBFE; animation-delay: -4s; }
@keyframes vcDomBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

.vc-dom-hero-inner {
    max-width: 56rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
}
.vc-page .vc-dom-hero-title {
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
    background: linear-gradient(90deg, #111827, #6B7280);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin: 0 0 1.25rem;
}
.vc-page .vc-dom-hero-sub {
    font-size: var(--vc-text-xl);
    color: var(--vc-text-secondary);
    max-width: 40rem;
    margin: 0 auto 2.5rem;
}

/* Register / Transfer toggle pill */
.vc-dom-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}
.vc-dom-toggle {
    background: #F3F4F6;
    padding: 0.25rem;
    border-radius: var(--vc-radius-lg);
    display: inline-flex;
    align-items: center;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.vc-dom-toggle > * {
    padding: 0.5rem 1.5rem;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    transition: all 150ms;
    text-decoration: none;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--vc-text-secondary);
}
.vc-page .vc-dom-toggle a { color: var(--vc-text-secondary); text-decoration: none; }
.vc-dom-toggle > .is-active,
.vc-page .vc-dom-toggle a.is-active {
    background: #fff;
    color: var(--vc-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Glass search card */
.vc-dom-search-card {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--vc-radius-2xl);
    padding: 1.75rem;
    box-shadow: 0 25px 50px -12px rgba(124, 58, 237, 0.15);
    margin-bottom: 2rem;
    text-align: left;
    position: relative;
}
@media (min-width: 640px) {
    .vc-dom-search-card { padding: 2rem; }
}

/* Search input wrapper */
.vc-dom-search-wrap {
    position: relative;
}
.vc-dom-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vc-text-muted);
    font-size: 1.5rem !important;
    pointer-events: none;
    transition: color 150ms;
}
.vc-dom-search-wrap:focus-within .vc-dom-search-icon {
    color: var(--vc-primary);
}

/* Input — bump specificity via id to beat Bootstrap/Tailwind resets */
input#domainname {
    display: block;
    width: 100%;
    padding: 1rem 9rem 1rem 3rem;
    background: #fff;
    border: 2px solid var(--vc-border-subtle);
    border-radius: var(--vc-radius-lg);
    font-size: var(--vc-text-lg);
    font-family: var(--vc-font-sans);
    color: var(--vc-text-primary);
    box-shadow: var(--vc-shadow-sm);
    outline: none;
    transition: border-color 150ms, box-shadow 150ms;
    -webkit-appearance: none;
    appearance: none;
}
input#domainname::placeholder { color: var(--vc-text-muted); }
input#domainname:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 4px rgba(124,58,237,0.10);
}

/* Search button — pinned right */
.vc-dom-search-btn-wrap {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}
button#search-icon-box,
.vc-dom-search-btn-wrap > button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.5rem;
    background: var(--vc-primary);
    color: #fff;
    border: none;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    font-family: var(--vc-font-sans);
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 16px -4px rgba(124, 58, 237, 0.45);
    transition: background 150ms, transform 150ms;
}
button#search-icon-box:hover,
.vc-dom-search-btn-wrap > button:hover {
    background: var(--vc-primary-dark);
    transform: translateY(-1px);
}
.vc-dom-search-btn-wrap > button:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

/* Tab panels (Register/Transfer/Use Existing inside the search card) */
.vc-dom-tab-panel.hidden { display: none; }

/* Panel-scoped input — covers transfer + owndomain inputs which have no #domainname id */
.vc-dom-tab-panel .vc-dom-search-wrap input[type="text"] {
    display: block;
    width: 100%;
    padding: 1rem 9rem 1rem 3rem;
    background: #fff;
    border: 2px solid var(--vc-border-subtle);
    border-radius: var(--vc-radius-lg);
    font-size: var(--vc-text-lg);
    font-family: var(--vc-font-sans);
    color: var(--vc-text-primary);
    box-shadow: var(--vc-shadow-sm);
    outline: none;
    transition: border-color 150ms, box-shadow 150ms;
    -webkit-appearance: none;
    appearance: none;
}
.vc-dom-tab-panel .vc-dom-search-wrap input[type="text"]::placeholder { color: var(--vc-text-muted); }
.vc-dom-tab-panel .vc-dom-search-wrap input[type="text"]:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 4px rgba(124,58,237,0.10);
}

.vc-dom-owndomain-hint {
    margin: 0.75rem 0 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    text-align: center;
}

/* 3-tab pill: each child evenly sized on mobile */
@media (max-width: 480px) {
    .vc-dom-toggle { width: 100%; }
    .vc-dom-toggle > * { flex: 1; padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* ================================================================
 * SEARCH RESULT DOM (injected by partial/domain-search-engine.tpl)
 * We keep the engine's class names verbatim.
 * ================================================================ */

.vc-page #domainErrorD {
    margin-top: 0.75rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-danger);
}

.domain-result-box {
    margin-top: 1.25rem;
}

/* Available-domain card — engine injects .wgs-domain-res inside .domain-available-container */
.domain-available-container {
    background: #fff;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    overflow: hidden;
    box-shadow: var(--vc-shadow-md);
    margin-top: 1rem;
}
.domain-available-container .wgs-domain-res {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: 0;
    flex-wrap: wrap;
    position: relative;
}
.domain-available-container .wgs-domain-res > [class*="col-"] {
    padding: 0;
    margin: 0;
    flex: unset;
    max-width: none;
    width: auto;
}
.domain-available-container .wgs-domain-res > [class*="col-"]:first-child {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.domain-available-container .wgs-domain-res > [class*="col-"]:first-child::before {
    content: 'check';
    font-family: 'Material Symbols Outlined';
    font-size: 1rem;
    font-weight: 400;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #DCFCE7;
    color: var(--vc-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.domain-available-container .wgs-domain-res h3 {
    margin: 0;
    font-size: var(--vc-text-lg);
    font-weight: 700;
    color: var(--vc-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.domain-available-container .wgs-domain-res h3::after {
    content: 'Available';
    font-size: var(--vc-text-xs);
    font-weight: 600;
    color: var(--vc-success);
    background: transparent;
    padding: 0;
}
.domain-available-container .wgs-domain-res h2 {
    margin: 0;
    font-size: var(--vc-text-base);
    font-weight: 700;
    color: var(--vc-text-primary);
    white-space: nowrap;
}

/* Taken state */
.domain-available-container.errorUnavail .wgs-domain-res > [class*="col-"]:first-child::before {
    content: 'close';
    background: #FEE2E2;
    color: var(--vc-danger);
}
.domain-available-container.errorUnavail .wgs-domain-res h3::after {
    content: 'Taken';
    color: var(--vc-danger);
}
.domain-available-container.errorUnavail .wgs-domain-res h2,
.domain-available-container.errorUnavail .wgs-domain-res .add-to-cart-btn {
    display: none;
}

/* Error-only fallback (no wgs-domain-res row) */
.domain-available-container.errorUnavail .cong-massage {
    position: relative;
    padding: 1rem 1.25rem 1rem 3.25rem;
}
.domain-available-container.errorUnavail .cong-massage > p {
    margin: 0;
    color: var(--vc-danger);
    font-weight: 600;
}
.domain-available-container.errorUnavail .cong-massage::before {
    content: 'close';
    font-family: 'Material Symbols Outlined';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #FEE2E2;
    color: var(--vc-danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.domain-available-container.errorUnavail:has(.wgs-domain-res) .cong-massage {
    display: none;
}

/* Add-to-cart button — engine uses .add-to-cart-btn */
.domain-available-container .add-to-cart-btn,
.domain-suggestion .add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.875rem;
    border-radius: var(--vc-radius-md);
    background: transparent;
    color: var(--vc-primary);
    border: 1px solid var(--vc-primary);
    font-size: var(--vc-text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms;
    text-decoration: none;
}
.domain-available-container .add-to-cart-btn:hover,
.domain-suggestion .add-to-cart-btn:hover {
    background: var(--vc-primary);
    color: #fff;
}
.domain-available-container .add-to-cart-btn.removeBtnCat,
.domain-suggestion .add-to-cart-btn.removeBtnCat {
    background: var(--vc-success);
    color: #fff;
    border-color: var(--vc-success);
}
.domain-available-container .add-to-cart-btn.removeBtnCat:hover,
.domain-suggestion .add-to-cart-btn.removeBtnCat:hover {
    background: #15803d;
    border-color: #15803d;
}

/* Suggestions grid */
.domain-suggestion-main {
    margin-top: 1.5rem;
}
.vc-page .domain-suggestion-heading {
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vc-text-muted);
    margin: 0 0 0.75rem;
}
.domain-suggestion {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 768px) {
    .domain-suggestion { grid-template-columns: 1fr 1fr; }
}
.domain-suggestion .domain-name-container {
    background: #fff;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    transition: border-color 150ms, box-shadow 150ms;
}
.domain-suggestion .domain-name-container:hover {
    border-color: var(--vc-primary-light);
    box-shadow: 0 4px 12px -4px rgba(124,58,237,0.2);
}
.domain-suggestion .domain-name-container h3,
.domain-suggestion .domain-name-container h4 {
    margin: 0;
    font-size: var(--vc-text-base);
    font-weight: 600;
    color: var(--vc-text-primary);
}
.domain-suggestion .domain-name-container h2 {
    margin: 0;
    font-size: var(--vc-text-sm);
    font-weight: 700;
    color: var(--vc-text-secondary);
}
.domain-name-btn-container {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.vc-page .domain-name-btn-container a {
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-primary);
    cursor: pointer;
}
.vc-page .domain-name-btn-container a.btncheckout {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: var(--vc-primary);
    color: #fff;
    border-radius: var(--vc-radius-md);
    box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.45);
    text-decoration: none;
}
.vc-page .domain-name-btn-container a.btncheckout:hover {
    background: var(--vc-primary-dark);
    text-decoration: none;
}

/* Engine's auth-code mini-form (shown for transfer results) */
.domain-available-container .wgs-auth-code-form {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--vc-border-subtle);
    background: var(--vc-bg-elevated);
}
.domain-available-container .wgs-auth-code-form input.form-control {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    background: #fff;
}
.domain-available-container .wgs-auth-code-form label {
    font-size: var(--vc-text-xs);
    font-weight: 600;
    color: var(--vc-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
    display: block;
}
.domain-available-container .wgs-btn-prt {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--vc-primary);
    color: #fff;
    border: none;
    border-radius: var(--vc-radius-md);
    font-weight: 600;
    font-size: var(--vc-text-sm);
    cursor: pointer;
    margin-top: 0.625rem;
}
.domain-available-container .wgs-btn-prt:hover {
    background: var(--vc-primary-dark);
}

/* ================================================================
 * HERO FEATURE STRIP (below search card)
 * ================================================================ */

.vc-dom-feats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
}
@media (min-width: 768px) {
    .vc-dom-feats { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.vc-dom-feat {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--vc-radius-lg);
    transition: background 150ms;
}
.vc-dom-feat:hover { background: rgba(255,255,255,0.6); }
.vc-dom-feat-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--vc-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-dom-feat-icon.is-purple { background: var(--vc-primary-tint); color: var(--vc-primary); }
.vc-dom-feat-icon.is-blue { background: #DBEAFE; color: #2563EB; }
.vc-dom-feat-icon.is-orange { background: #FFEDD5; color: var(--vc-accent-orange); }
.vc-page .vc-dom-feat h3 {
    margin: 0 0 0.125rem;
    font-size: var(--vc-text-base);
    font-weight: 700;
    color: var(--vc-text-primary);
}
.vc-page .vc-dom-feat p {
    margin: 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
}

/* ================================================================
 * SECTIONS (generic marketing sections on this page)
 * ================================================================ */

.vc-dom-section {
    padding: 6rem 1.5rem;
}
.vc-dom-section.is-tinted {
    background: #fff;
    border-top: 1px solid var(--vc-border-subtle);
    border-bottom: 1px solid var(--vc-border-subtle);
}
.vc-dom-section.is-gray {
    background: #F9FAFB;
}
.vc-dom-section-inner {
    max-width: 80rem;
    margin: 0 auto;
}
.vc-dom-section-head {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 4rem;
}
.vc-page .vc-dom-section-title {
    font-size: var(--vc-text-3xl);
    font-weight: 800;
    margin: 0 0 0.75rem;
    color: var(--vc-text-primary);
    letter-spacing: -0.02em;
}
.vc-page .vc-dom-section-sub {
    margin: 0;
    color: var(--vc-text-secondary);
}

/* Why Choose — 4 feature cards */
.vc-dom-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) { .vc-dom-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vc-dom-why-grid { grid-template-columns: repeat(4, 1fr); } }

.vc-dom-why-card {
    padding: 2rem;
    background: var(--vc-bg-base);
    border: 1px solid var(--vc-border-subtle);
    border-radius: var(--vc-radius-2xl);
    transition: transform 200ms, box-shadow 200ms;
}
.vc-dom-why-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vc-shadow-xl);
}
.vc-dom-why-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--vc-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.vc-dom-why-icon .material-symbols-outlined { font-size: 1.75rem !important; }
.vc-dom-why-icon.is-purple { background: rgba(124,58,237,0.10); color: var(--vc-primary); }
.vc-dom-why-icon.is-indigo { background: #E0E7FF; color: #4F46E5; }
.vc-dom-why-icon.is-green { background: #DCFCE7; color: var(--vc-success); }
.vc-dom-why-icon.is-orange { background: #FFEDD5; color: var(--vc-accent-orange); }
.vc-page .vc-dom-why-card h3 {
    margin: 0 0 0.5rem;
    font-size: var(--vc-text-xl);
    font-weight: 700;
}
.vc-page .vc-dom-why-card p {
    margin: 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    line-height: 1.6;
}

/* Key reasons + stats split */
.vc-dom-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}
@media (min-width: 1024px) { .vc-dom-split { grid-template-columns: 1fr 1fr; } }

.vc-dom-kicker {
    display: block;
    color: var(--vc-primary);
    font-size: var(--vc-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
}
.vc-page .vc-dom-reasons-title {
    font-size: var(--vc-text-4xl);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0 0 2rem;
    color: var(--vc-text-primary);
}
.vc-dom-reasons {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.vc-dom-reason {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.vc-dom-reason-icon {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    background: #fff;
    border-radius: var(--vc-radius-full);
    box-shadow: var(--vc-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vc-primary);
}
.vc-page .vc-dom-reason h4 {
    margin: 0 0 0.25rem;
    font-size: var(--vc-text-lg);
    font-weight: 700;
}
.vc-page .vc-dom-reason p {
    margin: 0;
    color: var(--vc-text-secondary);
}

/* Stats grid */
.vc-dom-stats-wrap { position: relative; }
.vc-dom-stats-wrap::before {
    content: '';
    position: absolute;
    inset: -1rem;
    background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(59,130,246,0.10));
    border-radius: var(--vc-radius-2xl);
    filter: blur(40px);
    z-index: 0;
}
.vc-dom-stats {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    z-index: 1;
}
.vc-dom-stats-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vc-dom-stats-col.is-offset { padding-top: 3rem; }
.vc-dom-stat-card {
    background: #fff;
    border: 1px solid var(--vc-border-subtle);
    padding: 2rem;
    border-radius: var(--vc-radius-2xl);
    box-shadow: var(--vc-shadow-sm);
}
.vc-dom-stat-card.is-primary {
    background: var(--vc-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--vc-shadow-xl);
}
.vc-dom-stat-card.is-highlight { box-shadow: var(--vc-shadow-xl); }
.vc-dom-stat-value {
    font-size: var(--vc-text-3xl);
    font-weight: 800;
    margin: 0 0 0.375rem;
    color: var(--vc-primary);
    line-height: 1;
}
.vc-dom-stat-card.is-primary .vc-dom-stat-value { color: #fff; }
.vc-dom-stat-label {
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vc-text-muted);
}
.vc-dom-stat-card.is-primary .vc-dom-stat-label { color: rgba(255,255,255,0.8); }

/* ================================================================
 * TLD PRICING TABLE
 * ================================================================ */

.vc-dom-price-wrap {
    background: #fff;
    border: 1px solid var(--vc-border-subtle);
    border-radius: var(--vc-radius-2xl);
    box-shadow: var(--vc-shadow-xl);
    overflow: hidden;
}
.vc-dom-price-table-scroll { overflow-x: auto; }
table.vc-dom-price-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
table.vc-dom-price-table thead {
    background: #F9FAFB;
    border-bottom: 1px solid var(--vc-border-subtle);
}
table.vc-dom-price-table th {
    padding: 1.25rem 2rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    color: var(--vc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
table.vc-dom-price-table tbody tr {
    border-bottom: 1px solid var(--vc-border-subtle);
    transition: background 150ms;
}
table.vc-dom-price-table tbody tr:last-child { border-bottom: none; }
table.vc-dom-price-table tbody tr:hover { background: #F9FAFB; }
table.vc-dom-price-table td {
    padding: 1.5rem 2rem;
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-base);
}
table.vc-dom-price-table td.vc-dom-price-ext {
    font-size: var(--vc-text-lg);
    font-weight: 700;
    color: var(--vc-primary);
}
table.vc-dom-price-table td.vc-dom-price-primary {
    color: var(--vc-text-primary);
    font-weight: 600;
}
.vc-dom-price-unit {
    font-size: var(--vc-text-xs);
    font-weight: 400;
    color: var(--vc-text-muted);
    margin-left: 0.125rem;
}
.vc-dom-price-actions { text-align: right; }
.vc-dom-price-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #F3F4F6;
    color: var(--vc-text-secondary);
    border: none;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms;
    text-decoration: none;
}
.vc-dom-price-btn:hover {
    background: var(--vc-primary);
    color: #fff;
}

/* ================================================================
 * FAQ
 * ================================================================ */

.vc-dom-faq {
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vc-dom-faq-item {
    background: #fff;
    border: 1px solid var(--vc-border-subtle);
    border-radius: var(--vc-radius-xl);
    overflow: hidden;
    box-shadow: var(--vc-shadow-sm);
    transition: box-shadow 200ms;
}
.vc-dom-faq-item[open] { box-shadow: var(--vc-shadow-md); }
.vc-dom-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: var(--vc-text-lg);
    color: var(--vc-text-primary);
    gap: 1rem;
}
.vc-dom-faq-item summary::-webkit-details-marker { display: none; }
.vc-dom-faq-item summary .material-symbols-outlined {
    transition: transform 200ms;
    color: var(--vc-text-muted);
}
.vc-dom-faq-item[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.vc-dom-faq-body {
    padding: 0 1.5rem 1.5rem;
    color: var(--vc-text-secondary);
    line-height: 1.7;
    font-size: var(--vc-text-base);
}



/* ==== PAGE-BASE: knowledgebase.css ==== */
/*
 * Vercaa — knowledgebase.css
 * ===========================
 * Page-specific styles for /knowledgebase.
 * Design: vercaa-ui-design/knowledge-base/code.html (ported to canonical
 * vercaa tokens: primary purple, accent orange, Inter font).
 *
 * Loaded automatically by includes/head.tpl when {$templatefile}
 * == "knowledgebase".
 *
 * Specificity notes:
 *   - `.vc-page a` has color:var(--vc-primary) baked in base.css, so any
 *     link that needs a different color uses `a.vc-kb-...` (tag + class)
 *     to bump specificity by one.
 */

/* ================================================================
 * PAGE SHELL
 * ================================================================ */

.vc-page-knowledgebase {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
}

.vc-kb {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ================================================================
 * HERO + SEARCH
 * ================================================================ */

.vc-kb-hero {
    position: relative;
    overflow: hidden;
    padding: 6rem 2rem;
    background: var(--vc-bg-surface);
}

.vc-kb-hero-orb {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(124,58,237,0.35), rgba(255,92,0,0.25) 50%, rgba(59,130,246,0.3) 100%);
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
}

.vc-kb-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
}

.vc-page .vc-kb-hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0 0 1rem;
    color: var(--vc-text-primary);
}

.vc-page .vc-kb-hero-sub {
    font-size: var(--vc-text-lg);
    color: var(--vc-text-secondary);
    margin: 0 0 2.5rem;
}

.vc-kb-search {
    position: relative;
    max-width: 40rem;
    margin: 0 auto;
}
.vc-kb-search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vc-text-muted);
    font-size: 1.5rem !important;
    pointer-events: none;
}
.vc-kb-search-input {
    width: 100%;
    padding: 1.125rem 8rem 1.125rem 3.25rem;
    font-size: var(--vc-text-lg);
    font-family: var(--vc-font-sans);
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-full);
    box-shadow: 0 10px 30px -10px rgba(17, 24, 39, 0.12);
    transition: all 150ms;
    outline: none;
    color: var(--vc-text-primary);
}
.vc-kb-search-input::placeholder {
    color: var(--vc-text-muted);
}
.vc-kb-search-input:focus {
    border-color: var(--vc-primary-light);
    box-shadow: 0 10px 30px -10px rgba(124,58,237,0.25), 0 0 0 4px rgba(124,58,237,0.12);
}
.vc-kb-search-btn {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    padding: 0 2rem;
    background: var(--vc-primary);
    color: #fff;
    font-weight: 600;
    font-size: var(--vc-text-base);
    border: none;
    border-radius: var(--vc-radius-full);
    cursor: pointer;
    transition: background 150ms;
}
.vc-kb-search-btn:hover {
    background: var(--vc-primary-dark);
}

@media (max-width: 640px) {
    .vc-kb-hero { padding: 4rem 1rem; }
    .vc-kb-search-input { padding: 1rem 5.5rem 1rem 3rem; font-size: var(--vc-text-base); }
    .vc-kb-search-btn { padding: 0 1.25rem; font-size: var(--vc-text-sm); }
}

/* ================================================================
 * SECTIONS (categories, popular articles)
 * ================================================================ */

.vc-kb-section {
    max-width: 80rem;
    margin: 0 auto;
    padding: 3rem 2rem;
    width: 100%;
}

.vc-kb-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
}

.vc-page .vc-kb-section-title {
    margin: 0;
    font-size: var(--vc-text-2xl);
    font-weight: 700;
    color: var(--vc-text-primary);
}
.vc-page .vc-kb-section-sub {
    margin: 0.25rem 0 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
}

/* ================================================================
 * CATEGORY GRID
 * ================================================================ */

.vc-kb-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .vc-kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .vc-kb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.vc-kb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    box-shadow: 0 1px 2px rgba(17,24,39,0.04);
    transition: transform 200ms, box-shadow 200ms, border-color 200ms;
    overflow: hidden;
}
.vc-page a.vc-kb-card { color: var(--vc-text-primary); text-decoration: none; }
.vc-page a.vc-kb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(124, 58, 237, 0.25);
    border-color: var(--vc-primary-light);
    text-decoration: none;
}

.vc-kb-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.vc-kb-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--vc-radius-lg);
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms, color 200ms;
}
.vc-kb-card-icon .material-symbols-outlined {
    font-size: 1.5rem !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.vc-page a.vc-kb-card:hover .vc-kb-card-icon {
    background: var(--vc-primary);
    color: #fff;
}
.vc-kb-card-count {
    font-size: var(--vc-text-xs);
    font-weight: 600;
    color: var(--vc-primary);
    background: var(--vc-primary-tint);
    padding: 0.25rem 0.625rem;
    border-radius: var(--vc-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.vc-page .vc-kb-card-title {
    margin: 0 0 0.5rem;
    font-size: var(--vc-text-lg);
    font-weight: 700;
    color: var(--vc-text-primary);
    line-height: 1.3;
}

.vc-page .vc-kb-card-desc {
    margin: 0 0 1.25rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    flex: 1;
}

.vc-kb-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vc-border-subtle);
}
.vc-kb-card-cta {
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-primary);
}
.vc-kb-card-arrow {
    color: var(--vc-text-muted);
    font-size: 1.125rem !important;
    transition: transform 200ms, color 200ms;
}
.vc-page a.vc-kb-card:hover .vc-kb-card-arrow {
    color: var(--vc-primary);
    transform: translateX(4px);
}

/* ================================================================
 * POPULAR ARTICLES LIST
 * ================================================================ */

.vc-kb-article-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.vc-kb-article-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
    transition: all 200ms;
}
.vc-page a.vc-kb-article-row { color: var(--vc-text-primary); text-decoration: none; }
.vc-page a.vc-kb-article-row:hover {
    border-color: var(--vc-primary-light);
    box-shadow: 0 4px 12px -2px rgba(124, 58, 237, 0.15);
    text-decoration: none;
}
.vc-kb-article-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--vc-radius-md);
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-kb-article-body { flex: 1; min-width: 0; }
.vc-page .vc-kb-article-title {
    margin: 0 0 0.125rem;
    font-size: var(--vc-text-base);
    font-weight: 600;
    color: var(--vc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vc-page .vc-kb-article-snippet {
    margin: 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vc-kb-article-arrow {
    flex-shrink: 0;
    color: var(--vc-text-muted);
    font-size: 1.25rem !important;
    transition: transform 200ms, color 200ms;
}
.vc-page a.vc-kb-article-row:hover .vc-kb-article-arrow {
    color: var(--vc-primary);
    transform: translateX(3px);
}

/* Edit buttons (admin-only, shown via show-on-card-hover convention) */
.vc-kb-edit-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.25rem 0.625rem;
    font-size: var(--vc-text-xs);
    font-weight: 600;
    color: var(--vc-text-secondary);
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-sm);
    cursor: pointer;
    opacity: 0;
    transition: opacity 150ms;
}
.vc-kb-card:hover .vc-kb-edit-btn,
.vc-kb-article-row:hover .vc-kb-edit-btn {
    opacity: 1;
}

/* ================================================================
 * ARTICLE CONTENT (used by knowledgebasearticle.tpl)
 * ================================================================ */

.vc-kb-article-content {
    max-width: 48rem;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-sm);
    font-size: var(--vc-text-base);
    line-height: 1.75;
    color: var(--vc-text-primary);
    white-space: normal;
    overflow: visible;
}
.vc-kb-article-content h1,
.vc-kb-article-content h2,
.vc-kb-article-content h3 {
    margin: 1.5em 0 0.5em;
    color: var(--vc-text-primary);
    font-weight: 700;
}
.vc-kb-article-content p { margin: 0 0 1em; }
.vc-kb-article-content a { color: var(--vc-primary); text-decoration: underline; }
.vc-kb-article-content code,
.vc-kb-article-content pre {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-sm);
    padding: 0.125rem 0.375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}
.vc-kb-article-content pre { padding: 1rem; overflow-x: auto; }

.vc-kb-vote {
    max-width: 48rem;
    margin: 1.5rem auto 0;
    padding: 1.25rem 1.5rem;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
}
.vc-kb-vote-form {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.vc-kb-vote-form .vc-kb-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Material Symbols base rule lives in 02-base.css (global). */


/* ============================================================ */
/* ============ SECTION: 4. PER-PAGE CONTENT ============ */
/* ============================================================ */


/* ==== PAGE: account-contacts-manage.css ==== */


/* ==== PAGE: account-contacts-new.css ==== */


/* ==== PAGE: account-paymentmethods-billing-contacts.css ==== */


/* ==== PAGE: account-paymentmethods-manage.css ==== */


/* ==== PAGE: account-paymentmethods.css ==== */


/* ==== PAGE: account-user-management.css ==== */


/* ==== PAGE: account-user-permissions.css ==== */


/* ==== PAGE: affiliates.css ==== */


/* ==== PAGE: affiliatessignup.css ==== */


/* ==== PAGE: clientareaaddfunds.css ==== */
/*
 * Vercaa — clientareaaddfunds.css
 * ===============================
 * Design: vercaa-ui-design/Client-area-add-fund/code.html
 */

#main-body .vc-fund { display: block; width: 100%; }

#main-body .vc-fund-head { margin-bottom: 2.5rem; }
#main-body .vc-fund-title {
    margin: 0 0 0.5rem;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--vc-text-primary);
}
.vc-fund-sub {
    margin: 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}

/* Grid */
.vc-fund-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
}
@media (min-width: 1024px) {
    .vc-fund-grid { grid-template-columns: 4fr 8fr; }
}
.vc-fund-col-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Balance card (glass) */
.vc-fund-balance-card {
    padding: 2rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.05);
}
.vc-fund-balance-eyebrow {
    margin: 0 0 0.25rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
    font-weight: 500;
}
.vc-fund-balance-amount {
    margin: 0 0 1.5rem;
    font-size: 3rem;
    font-weight: 700;
    color: var(--vc-primary);
    line-height: 1.1;
    letter-spacing: -0.03em;
    word-break: break-word;
}
.vc-fund-limits {
    padding-top: 1.25rem;
    border-top: 1px solid var(--vc-border-default);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.vc-fund-limit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--vc-text-sm);
}
.vc-fund-limit-row span { color: var(--vc-text-muted); }
.vc-fund-limit-row strong {
    color: var(--vc-text-primary);
    font-weight: 600;
}

/* Info card */
.vc-fund-info-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    background: var(--vc-info-bg);
    border: 1px solid #BFDBFE;
    border-radius: var(--vc-radius-xl);
}
.vc-fund-info-card .material-symbols-outlined {
    color: var(--vc-info);
    font-size: 1.25rem !important;
    flex-shrink: 0;
}
.vc-fund-info-card p {
    margin: 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-info);
    line-height: 1.5;
}

/* Form card */
.vc-fund-form-card {
    padding: 2rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.05);
}
@media (min-width: 1024px) { .vc-fund-form-card { padding: 2.5rem; } }
.vc-fund-intro {
    margin: 0 0 2rem;
    font-size: var(--vc-text-base);
    color: var(--vc-text-secondary);
    line-height: 1.6;
}
.vc-fund-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.vc-fund-field {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.vc-fund-label {
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-primary);
}

/* Select */
.vc-fund-select-wrap {
    position: relative;
}
.vc-fund-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    padding: 1rem 3rem 1rem 1.25rem;
    font-size: var(--vc-text-base);
    color: var(--vc-text-primary);
    cursor: pointer;
}
.vc-fund-select:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px var(--vc-primary-tint);
    outline: 0;
}
.vc-fund-select-caret {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vc-text-muted);
    pointer-events: none;
}

/* Preset buttons */
.vc-fund-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (min-width: 768px) {
    .vc-fund-presets { grid-template-columns: repeat(5, 1fr); }
}
.vc-fund-preset {
    appearance: none;
    background: var(--vc-bg-surface);
    border: 2px solid var(--vc-border-subtle);
    border-radius: var(--vc-radius-xl);
    padding: 1.25rem 0.5rem;
    font-size: var(--vc-text-xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    cursor: pointer;
    transition: all 150ms;
    text-align: center;
}
.vc-fund-preset:hover {
    border-color: var(--vc-primary-light);
    color: var(--vc-primary);
}
.vc-fund-preset.is-active {
    border-color: var(--vc-primary);
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    box-shadow: 0 4px 12px -2px rgba(124, 58, 237, 0.15);
}

/* Amount input */
.vc-fund-amount-wrap {
    position: relative;
}
.vc-fund-amount-prefix {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vc-text-muted);
    font-weight: 600;
}
.vc-fund-amount-input {
    width: 100%;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    padding: 1rem 1.25rem 1rem 2.5rem;
    font-size: var(--vc-text-base);
    font-weight: 600;
    color: var(--vc-text-primary);
}
.vc-fund-amount-input:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px var(--vc-primary-tint);
    outline: 0;
}

/* Submit */
.vc-fund-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: var(--vc-primary);
    color: #fff;
    border: 0;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-base);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3);
    transition: background 200ms, transform 200ms;
}
.vc-fund-submit:hover {
    background: var(--vc-primary-dark);
    transform: translateY(-2px);
}
.vc-fund-submit .material-symbols-outlined {
    font-size: 1.25rem !important;
}

/* Page-specific shell override */
body.vc-page-clientareaaddfunds #main-body .vc-client-sidebar-col .sidebar {
    display: none;
}


/* ==== PAGE: clientareadetails.css ==== */


/* ==== PAGE: clientareadomainaddons.css ==== */


/* ==== PAGE: clientareadomaincontactinfo.css ==== */


/* ==== PAGE: clientareadomaindns.css ==== */


/* ==== PAGE: clientareadomainemailforwarding.css ==== */


/* ==== PAGE: clientareadomaingetepp.css ==== */


/* ==== PAGE: clientareadomainregisterns.css ==== */


/* ==== PAGE: clientareadomains.css ==== */
/*
 * Vercaa — clientareadomains.css
 * ==============================
 * Design: vercaa-ui-design/client-area-domains/code.html
 * Rendered inside the vercaa shell (clientarea-shell.css).
 */

#main-body .vc-dom-list {
    display: block;
    width: 100%;
}

/* ================================================================
 * PAGE HEAD
 * ================================================================ */
#main-body .vc-dom-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
#main-body .vc-dom-list-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--vc-text-primary);
}
.vc-dom-list-sub {
    margin: 0.25rem 0 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}
#main-body a.vc-dom-list-add-btn {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: var(--vc-accent-orange);
    color: #fff;
    font-size: var(--vc-text-sm);
    font-weight: 700;
    border-radius: var(--vc-radius-full);
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(255, 92, 0, 0.2);
    transition: background 200ms, transform 200ms;
}
#main-body a.vc-dom-list-add-btn:hover {
    background: #E85200;
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
#main-body .vc-dom-list-head-actions {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
#main-body .vc-dom-list-search {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.875rem;
    height: 2.625rem;
    background: #fff;
    border: 1px solid var(--vc-border, #E5E7EB);
    border-radius: var(--vc-radius-full);
    transition: border-color 200ms, box-shadow 200ms;
}
#main-body .vc-dom-list-search:focus-within {
    border-color: var(--vc-accent-orange);
    box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.12);
}
#main-body .vc-dom-list-search .material-symbols-outlined {
    font-size: 1.25rem;
    color: var(--vc-text-muted);
}
#main-body input.vc-dom-list-search-input {
    border: 0;
    outline: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 12rem;
    max-width: 100%;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    box-shadow: none;
}
#main-body input.vc-dom-list-search-input::placeholder {
    color: var(--vc-text-muted);
}

/* ================================================================
 * 12-COL GRID
 * ================================================================ */
.vc-dom-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
}
@media (min-width: 1024px) {
    .vc-dom-list-grid {
        grid-template-columns: minmax(240px, 3fr) 9fr;
    }
}
.vc-dom-list-col-left,
.vc-dom-list-col-right { min-width: 0; }

/* ================================================================
 * LEFT — Quick Actions
 * ================================================================ */
.vc-dom-list-card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 1rem;
    box-shadow: var(--vc-shadow-sm);
    padding: 1.5rem;
}
.vc-dom-list-eyebrow {
    margin: 0 0 1rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vc-text-muted);
}
.vc-dom-list-quick {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
#main-body a.vc-dom-list-quick-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--vc-radius-lg);
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background 150ms, color 150ms;
}
#main-body a.vc-dom-list-quick-item:hover {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    text-decoration: none;
}
.vc-dom-list-quick-item .material-symbols-outlined {
    color: var(--vc-primary);
    background: var(--vc-primary-tint);
    border-radius: var(--vc-radius-md);
    padding: 0.375rem;
    font-size: 1.25rem !important;
    transition: background 150ms, color 150ms;
}
.vc-dom-list-quick-item:hover .material-symbols-outlined {
    background: var(--vc-primary);
    color: #fff;
}

/* ================================================================
 * RIGHT — Panel + Table
 * ================================================================ */
.vc-dom-list-panel {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 1rem;
    box-shadow: var(--vc-shadow-sm);
    overflow: hidden;
}
.vc-dom-list-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--vc-border-subtle);
    flex-wrap: wrap;
}
.vc-dom-list-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.vc-dom-list-showing {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}
.vc-dom-list-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--vc-bg-elevated);
    border: 0;
    border-radius: var(--vc-radius-md);
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-text-primary);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
}
.vc-dom-list-count {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}

.vc-dom-list-table-wrap { overflow-x: auto; }
.vc-dom-list-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    text-align: left;
}
.vc-dom-list-table thead {
    background: rgba(248, 250, 252, 0.5);
}
.vc-dom-list-table thead th {
    padding: 1rem 1.5rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vc-text-muted);
    border-bottom: 1px solid var(--vc-border-subtle);
}
.vc-dom-list-table thead th.is-checkbox { width: 3rem; text-align: center; }
.vc-dom-list-table thead th.is-right { text-align: right; }
.vc-dom-list-table tbody tr {
    border-top: 1px solid var(--vc-border-subtle);
    cursor: pointer;
    transition: background 150ms;
}
.vc-dom-list-table tbody tr:first-child { border-top: 0; }
.vc-dom-list-table tbody tr:hover { background: rgba(248, 250, 252, 0.8); }
.vc-dom-list-table tbody td {
    padding: 1.25rem 1.5rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    vertical-align: middle;
}
.vc-dom-list-cb { text-align: center; width: 3rem; }
.vc-dom-list-cb input { width: 1rem; height: 1rem; cursor: pointer; accent-color: var(--vc-primary); }

/* Domain cell */
.vc-dom-list-domain {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.vc-dom-list-domain-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--vc-radius-md);
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    flex-shrink: 0;
}
.vc-dom-list-domain-icon img { display: block; width: 1.375rem; height: auto; }
.vc-dom-list-domain-text { min-width: 0; }
#main-body a.vc-dom-list-domain-name {
    font-size: var(--vc-text-sm);
    font-weight: 700;
    color: var(--vc-primary);
    text-decoration: none;
}
#main-body a.vc-dom-list-domain-name:hover {
    text-decoration: underline;
    color: var(--vc-primary-dark);
}
.vc-dom-list-domain-flag {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.125rem 0 0;
    font-size: var(--vc-text-xs);
    color: var(--vc-warning);
    font-weight: 500;
}
.vc-dom-list-domain-flag .material-symbols-outlined {
    font-size: var(--vc-text-sm) !important;
}

.vc-dom-list-cell-muted {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    font-weight: 500;
}
.vc-dom-list-sort-key {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Renew cell */
.vc-dom-list-renew {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--vc-text-sm);
    font-weight: 600;
}
.vc-dom-list-renew.is-on { color: var(--vc-success); }
.vc-dom-list-renew.is-off { color: var(--vc-text-muted); }
.vc-dom-list-renew .material-symbols-outlined {
    font-size: var(--vc-text-base) !important;
}

/* Status pill */
.vc-dom-list-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid;
}
.vc-dom-list-status-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
}
.vc-dom-list-status-active {
    background: #ECFDF5;
    color: #059669;
    border-color: #A7F3D0;
}
.vc-dom-list-status-pending,
.vc-dom-list-status-pendingtransfer,
.vc-dom-list-status-pendingregistration {
    background: var(--vc-warning-bg);
    color: var(--vc-warning);
    border-color: #FDE68A;
}
.vc-dom-list-status-expired,
.vc-dom-list-status-cancelled,
.vc-dom-list-status-fraud,
.vc-dom-list-status-transferredaway {
    background: var(--vc-danger-bg);
    color: var(--vc-danger);
    border-color: #FECACA;
}
.vc-dom-list-status-grace,
.vc-dom-list-status-redemption {
    background: #FFF7ED;
    color: #EA580C;
    border-color: #FED7AA;
}

/* Actions */
.vc-dom-list-cell-actions { text-align: right; }
#main-body a.vc-dom-list-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--vc-radius-md);
    color: var(--vc-text-muted);
    transition: background 150ms, color 150ms;
    text-decoration: none;
}
#main-body a.vc-dom-list-action-btn:hover {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    text-decoration: none;
}

/* Empty */
.vc-dom-list-empty {
    padding: 3rem 2rem !important;
    text-align: center;
    color: var(--vc-text-muted);
}
.vc-dom-list-empty .material-symbols-outlined {
    font-size: 2.5rem !important;
    display: block;
    margin: 0 auto 0.5rem;
}
#main-body .vc-dom-list-empty a {
    color: var(--vc-primary);
    font-weight: 600;
    text-decoration: none;
}
#main-body .vc-dom-list-empty a:hover { text-decoration: underline; }

/* Panel foot */
.vc-dom-list-panel-foot {
    padding: 0.875rem 1.5rem;
    background: rgba(248, 250, 252, 0.3);
    border-top: 1px solid var(--vc-border-subtle);
}
.vc-dom-list-foot-text {
    font-size: var(--vc-text-xs);
    color: var(--vc-text-muted);
}

/* Page-specific shell override */
body.vc-page-clientareadomains #main-body .vc-client-sidebar-col .sidebar {
    display: none;
}


/* ==== PAGE: clientareahome.css ==== */
/*
 * Vercaa — clientareahome.css
 * ===========================
 * 100% match for vercaa-ui-design/client-area-dashboard/code.html.
 * Loaded on top of clientarea-shell.css inside the Twenty-One
 * logged-in shell. Tokens are already imported by custom.css.
 */

/* Force the dashboard wrapper to full block width inside the
 * Bootstrap .primary-content column so nothing collapses. */
#main-body .vc-dash {
    display: block;
    width: 100%;
}

/* ================================================================
 * PAGE HEADER
 * ================================================================ */
#main-body .vc-dash-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.vc-dash-page-head-left { min-width: 0; }
#main-body .vc-dash-page-title {
    margin: 0;
    font-size: 1.875rem;   /* text-3xl */
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--vc-text-primary);
}
.vc-dash-page-breadcrumb {
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}
#main-body .vc-dash-page-breadcrumb a {
    color: var(--vc-text-muted);
    text-decoration: none;
    transition: color 150ms;
}
#main-body .vc-dash-page-breadcrumb a:hover {
    color: var(--vc-primary);
    text-decoration: none;
}
.vc-dash-page-breadcrumb-sep { margin: 0 0.5rem; }

/* ================================================================
 * STATS GRID — 5 glass cards
 * ================================================================ */
.vc-dash-stats {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;                   /* gap-6 */
    margin-bottom: 2.5rem;         /* mb-10 */
}
@media (min-width: 768px)  { .vc-dash-stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .vc-dash-stats { grid-template-columns: repeat(5, 1fr); } }

#main-body a.vc-dash-stat {
    display: block;
    padding: 1.5rem;               /* p-6 */
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;           /* rounded-2xl */
    box-shadow: var(--vc-shadow-sm);
    transition: transform 300ms, box-shadow 300ms;
    text-decoration: none;
    color: inherit;
}
#main-body a.vc-dash-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--vc-shadow-xl);
    text-decoration: none;
    color: inherit;
}
.vc-dash-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;               /* p-2 */
    background: rgba(124, 58, 237, 0.1);   /* bg-primary/10 */
    color: var(--vc-primary);
    border-radius: 0.5rem;         /* rounded-lg */
    margin-bottom: 1rem;           /* mb-4 */
}
.vc-dash-stat.is-accent .vc-dash-stat-icon {
    background: rgba(255, 92, 0, 0.1);     /* bg-secondary/10 */
    color: var(--vc-accent-orange);
}
.vc-dash-stat-icon .material-symbols-outlined {
    font-size: 1.5rem !important;
}
.vc-dash-stat-value {
    font-size: 1.75rem;            /* text-4xl */
    font-weight: 700;
    color: var(--vc-primary);
    line-height: 1.1;
    margin-bottom: 0.25rem;        /* mb-1 */
}
.vc-dash-stat.is-accent .vc-dash-stat-value {
    color: var(--vc-accent-orange);
}
.vc-dash-stat-label {
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-text-muted);
}

/* ================================================================
 * DATA PANEL — tabbed, rounded, bordered
 * ================================================================ */
.vc-dash-panel {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 1rem;
    box-shadow: var(--vc-shadow-sm);
    overflow: hidden;
    margin-bottom: 2rem;
}
.vc-dash-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 2rem 2rem 0;          /* px-8 pt-8 */
    border-bottom: 1px solid var(--vc-border-subtle);
    flex-wrap: wrap;
}
.vc-dash-tabs {
    display: flex;
    gap: 2rem;                     /* gap-8 */
    overflow-x: auto;
}
.vc-dash-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 0.25rem 1rem;       /* pb-4 px-1 */
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-text-muted);
    cursor: pointer;
    transition: color 150ms, border-color 150ms;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-family: inherit;
}
.vc-dash-tab:hover { color: var(--vc-text-secondary); }
.vc-dash-tab.is-active {
    color: var(--vc-primary);
    border-bottom-color: var(--vc-primary);
    font-weight: 700;
}
.vc-dash-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.125rem 0.5rem;      /* py-0.5 px-2 */
    border-radius: var(--vc-radius-full);
    background: rgba(124, 58, 237, 0.1);
    color: var(--vc-primary);
    font-size: var(--vc-text-xs);
    font-weight: 600;
}
.vc-dash-panel-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;          /* pb-4 */
}
#main-body a.vc-dash-panel-link {
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-primary);
    text-decoration: none;
}
#main-body a.vc-dash-panel-link:hover { text-decoration: underline; }

#main-body a.vc-dash-new-order-btn {
    display: inline-flex;
    align-items: center;
    align-self: center;
    justify-content: center;
    white-space: nowrap;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;      /* px-6 py-2.5 */
    background: var(--vc-accent-orange);
    color: #fff;
    font-size: var(--vc-text-sm);
    font-weight: 700;
    border-radius: var(--vc-radius-full);
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(255, 92, 0, 0.2);
    transition: background 200ms, transform 200ms;
}
#main-body a.vc-dash-new-order-btn:hover {
    background: #E85200;
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
#main-body a.vc-dash-new-order-btn .material-symbols-outlined {
    font-size: var(--vc-text-sm) !important;
}

/* Tab body — one per tab, shown/hidden by JS */
.vc-dash-tab-body { display: none; }
.vc-dash-tab-body.is-active { display: block; }

/* ================================================================
 * TABLE inside each tab body
 * $clientareaactive* blobs emit raw <tr> rows dropped inside
 * our explicit <tbody>.
 * ================================================================ */
.vc-dash-table-wrap { overflow-x: auto; }
.vc-dash-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    text-align: left;
}
.vc-dash-table thead th {
    padding: 1.25rem 2rem;         /* px-8 py-5 */
    font-size: var(--vc-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    background: rgba(248, 250, 252, 0.5);
    border-bottom: 0;
}
.vc-dash-table thead th.is-right { text-align: right; }
.vc-dash-table tbody td {
    padding: 1.5rem 2rem;          /* px-8 py-6 */
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    border-top: 1px solid var(--vc-border-subtle);
    vertical-align: middle;
}
.vc-dash-table tbody tr:hover {
    background: rgba(248, 250, 252, 0.6);
}
#main-body .vc-dash-table a {
    color: var(--vc-primary);
    text-decoration: none;
}
#main-body .vc-dash-table a:hover { text-decoration: underline; }

/* WHMCS injects Bootstrap-flavoured buttons and badges in the blob */
.vc-dash-table .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
}
.vc-dash-table .btn-primary,
.vc-dash-table .btn-success {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.1);
}
.vc-dash-table .btn-primary:hover,
.vc-dash-table .btn-success:hover {
    background: var(--vc-primary-dark);
    border-color: var(--vc-primary-dark);
    color: #fff;
    text-decoration: none;
}
.vc-dash-table .label,
.vc-dash-table .badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: 600;
    background: var(--vc-border-subtle);
    color: var(--vc-text-secondary);
}
.vc-dash-table .label-success,
.vc-dash-table .badge-success { background: var(--vc-success-bg); color: var(--vc-success); }
.vc-dash-table .label-warning,
.vc-dash-table .badge-warning { background: var(--vc-warning-bg); color: var(--vc-warning); }
.vc-dash-table .label-danger,
.vc-dash-table .badge-danger  { background: var(--vc-danger-bg);  color: var(--vc-danger);  }
.vc-dash-table .label-info,
.vc-dash-table .badge-info    { background: var(--vc-info-bg);    color: var(--vc-info);    }

/* Empty state row */
.vc-dash-table td.vc-dash-empty-row {
    padding: 3rem 2rem;            /* py-12 px-8 */
    text-align: center;
    color: var(--vc-text-muted);
}
.vc-dash-table td.vc-dash-empty-row .material-symbols-outlined {
    font-size: 2.5rem !important;
    display: block;
    margin: 0 auto 0.5rem;
    color: var(--vc-text-muted);
}
.vc-dash-table td.vc-dash-empty-row p {
    margin: 0;
    font-size: var(--vc-text-sm);
}
#main-body .vc-dash-table td.vc-dash-empty-row a {
    color: var(--vc-primary);
    font-weight: 600;
}

/* ================================================================
 * PANEL FOOTER — decorative pagination row
 * ================================================================ */
.vc-dash-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 2rem;          /* px-8 py-6 */
    background: rgba(248, 250, 252, 0.5);
    border-top: 1px solid var(--vc-border-subtle);
    flex-wrap: wrap;
}
.vc-dash-show-entries {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}
.vc-dash-entries-select {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    padding: 0.25rem 0.5rem;
    font-size: var(--vc-text-xs);
    color: var(--vc-text-primary);
}
.vc-dash-pager {
    display: flex;
    gap: 0.5rem;
}
.vc-dash-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.75rem;
    background: transparent;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    color: var(--vc-text-muted);
    font-size: var(--vc-text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.vc-dash-pager-btn:hover:not(:disabled):not(.is-active) {
    background: var(--vc-bg-surface);
    color: var(--vc-text-secondary);
}
.vc-dash-pager-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.vc-dash-pager-btn.is-active {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
    color: #fff;
}
.vc-dash-pager-btn .material-symbols-outlined {
    font-size: var(--vc-text-sm) !important;
}

/* ================================================================
 * CHAT FAB
 * ================================================================ */
#main-body ~ .vc-dash-fab,
a.vc-dash-fab {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    width: 3.5rem;                 /* w-14 */
    height: 3.5rem;                /* h-14 */
    border-radius: var(--vc-radius-full);
    background: var(--vc-accent-orange);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 50px -12px rgba(255, 92, 0, 0.4);
    transition: transform 200ms;
    text-decoration: none;
}
a.vc-dash-fab:hover {
    transform: scale(1.1);
    color: #fff;
    text-decoration: none;
}
a.vc-dash-fab .material-symbols-outlined {
    font-size: 1.75rem !important;
}

/* ================================================================
 * PAGE-SPECIFIC SHELL OVERRIDES
 * Hide WHMCS $primarySidebar cards on the dashboard so the left
 * rail shows only the vercaa navbar.
 * ================================================================ */
body.vc-page-clientareahome #main-body .vc-client-sidebar-col .sidebar {
    display: none;
}


/* ==== PAGE: clientareainvoices.css ==== */
/*
 * Vercaa — clientareainvoices.css
 * ===============================
 * Design: vercaa-ui-design/client-area-billing/code.html
 * Rendered inside the vercaa shell.
 */

#main-body .vc-inv-list { display: block; width: 100%; }

/* ================================================================
 * PAGE HEAD
 * ================================================================ */
#main-body .vc-inv-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}
#main-body .vc-inv-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--vc-text-primary);
}
.vc-inv-sub {
    margin: 0.25rem 0 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}
.vc-inv-head-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
#main-body a.vc-inv-paydue-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: var(--vc-primary);
    color: #fff;
    font-size: var(--vc-text-sm);
    font-weight: 600;
    border-radius: var(--vc-radius-md);
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.2);
    transition: background 200ms, transform 200ms;
}
#main-body a.vc-inv-paydue-btn:hover {
    background: var(--vc-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    text-decoration: none;
}
#main-body a.vc-inv-paydue-btn .material-symbols-outlined {
    font-size: var(--vc-text-base) !important;
}

/* ================================================================
 * GRID
 * ================================================================ */
.vc-inv-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
}
@media (min-width: 1024px) {
    .vc-inv-grid {
        grid-template-columns: 16rem 1fr;
    }
}
.vc-inv-col-left,
.vc-inv-col-right { min-width: 0; }
.vc-inv-col-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ================================================================
 * LEFT — Billing nav + balance card
 * ================================================================ */
.vc-inv-card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 0.75rem;
    box-shadow: var(--vc-shadow-sm);
}
.vc-inv-nav-card { padding: 0.5rem; }
.vc-inv-eyebrow {
    margin: 0;
    padding: 0.75rem 1rem 0.25rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vc-text-muted);
}
.vc-inv-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
#main-body a.vc-inv-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: var(--vc-radius-md);
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background 150ms, color 150ms;
}
#main-body a.vc-inv-nav-item:hover {
    background: var(--vc-bg-elevated);
    color: var(--vc-text-primary);
    text-decoration: none;
}
.vc-inv-nav-item .material-symbols-outlined {
    color: var(--vc-primary);
    opacity: 0.6;
    font-size: 1.25rem !important;
    transition: opacity 150ms;
}
.vc-inv-nav-item:hover .material-symbols-outlined { opacity: 1; }
#main-body a.vc-inv-nav-item.is-active {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    font-weight: 600;
}
.vc-inv-nav-item.is-active .material-symbols-outlined { opacity: 1; }

/* ================================================================
 * MANAGE SSL — Web & Security Actions aside (mirrors vc-inv nav)
 * ================================================================ */
.vc-ssl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
}
@media (min-width: 1024px) {
    .vc-ssl-grid {
        grid-template-columns: 16rem 1fr;
    }
}
.vc-ssl-col-left,
.vc-ssl-col-right { min-width: 0; }
.vc-ssl-card {
    padding: 0.5rem;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 0.75rem;
    box-shadow: var(--vc-shadow-sm);
}
.vc-ssl-eyebrow {
    margin: 0;
    padding: 0.75rem 1rem 0.25rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vc-text-muted);
}
.vc-ssl-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
#main-body a.vc-ssl-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: var(--vc-radius-md);
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background 150ms, color 150ms;
}
#main-body a.vc-ssl-nav-item:hover {
    background: var(--vc-bg-elevated);
    color: var(--vc-text-primary);
    text-decoration: none;
}
.vc-ssl-nav-item .material-symbols-outlined {
    color: var(--vc-primary);
    opacity: 0.6;
    font-size: 1.25rem !important;
    transition: opacity 150ms;
}
.vc-ssl-nav-item:hover .material-symbols-outlined { opacity: 1; }
#main-body a.vc-ssl-nav-item.is-active {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    font-weight: 600;
}
.vc-ssl-nav-item.is-active .material-symbols-outlined { opacity: 1; }

/* Store (MarketConnect) Web&Security pages: let the buy page sit in the
 * right column without its own full-width container fighting the grid. */
.vc-store-security .vc-ssl-col-right > .landing-page { width: 100%; }
.vc-store-security.vc-ssl .vc-ssl-grid { align-items: start; }

/* Balance card */
.vc-inv-balance-card {
    padding: 1.5rem;
    background: var(--vc-primary-tint);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 0.75rem;
}
.vc-inv-balance-title {
    margin: 0 0 0.5rem;
    font-size: var(--vc-text-base);
    font-weight: 600;
    color: var(--vc-text-primary);
}
.vc-inv-balance-amount {
    margin: 0;
    font-size: var(--vc-text-3xl);
    font-weight: 700;
    color: var(--vc-primary);
    line-height: 1.1;
    word-break: break-word;
}
.vc-inv-balance-sub {
    margin: 0.5rem 0 0;
    font-size: var(--vc-text-xs);
    color: var(--vc-text-muted);
}

/* ================================================================
 * RIGHT — Panel + table
 * ================================================================ */
.vc-inv-panel {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 0.75rem;
    box-shadow: var(--vc-shadow-sm);
    overflow: hidden;
}
.vc-inv-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--vc-border-subtle);
    background: rgba(248, 250, 252, 0.5);
    flex-wrap: wrap;
}
.vc-inv-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.vc-inv-showing {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}
.vc-inv-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-text-primary);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
}
.vc-inv-count {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}

.vc-inv-table-wrap { overflow-x: auto; }
.vc-inv-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    text-align: left;
}
.vc-inv-table thead th {
    padding: 1rem 1.5rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vc-text-muted);
    background: rgba(248, 250, 252, 0.5);
    border-bottom: 1px solid var(--vc-border-subtle);
}
.vc-inv-table thead th.is-right { text-align: right; }
.vc-inv-table tbody tr {
    border-top: 1px solid var(--vc-border-subtle);
    cursor: pointer;
    transition: background 150ms;
}
.vc-inv-table tbody tr:first-child { border-top: 0; }
.vc-inv-table tbody tr:hover { background: rgba(248, 250, 252, 0.6); }
.vc-inv-table tbody td {
    padding: 1.25rem 1.5rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    vertical-align: middle;
}
.vc-inv-cell-num {
    font-weight: 600;
    color: var(--vc-primary);
}
.vc-inv-cell-muted {
    color: var(--vc-text-secondary);
    font-weight: 500;
}
.vc-inv-cell-total {
    text-align: right;
    font-weight: 600;
    color: var(--vc-text-primary);
}
.vc-inv-cell-status { text-align: right; }
.vc-inv-sort-key {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Status pill */
.vc-inv-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vc-inv-status-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
}
.vc-inv-status-paid {
    background: #ECFDF5;
    color: #059669;
}
.vc-inv-status-unpaid,
.vc-inv-status-payment_pending {
    background: var(--vc-warning-bg);
    color: var(--vc-warning);
}
.vc-inv-status-overdue,
.vc-inv-status-collections {
    background: var(--vc-danger-bg);
    color: var(--vc-danger);
}
.vc-inv-status-cancelled,
.vc-inv-status-refunded {
    background: #F1F5F9;
    color: #64748B;
}

/* Empty */
.vc-inv-empty {
    padding: 3rem 2rem !important;
    text-align: center;
    color: var(--vc-text-muted);
}
.vc-inv-empty .material-symbols-outlined {
    font-size: 2.5rem !important;
    display: block;
    margin: 0 auto 0.5rem;
}

/* Panel foot */
.vc-inv-panel-foot {
    padding: 0.875rem 1.5rem;
    background: rgba(248, 250, 252, 0.3);
    border-top: 1px solid var(--vc-border-subtle);
}
.vc-inv-foot-text {
    font-size: var(--vc-text-xs);
    color: var(--vc-text-muted);
}

/* Page-specific shell override */
body.vc-page-clientareainvoices #main-body .vc-client-sidebar-col .sidebar {
    display: none;
}


/* ==== PAGE: clientareaproductdetails.css ==== */
/*
 * Vercaa — clientareaproductdetails.css
 * =====================================
 * Restyles the Twenty-One product/service details markup with
 * vercaa tokens. Markup is left intact so $tplOverviewTabOutput
 * module overrides, registrar/module client area output, custom
 * buttons, addons forms, and tab-pane switching all keep working.
 */

#vc-scope { /* placeholder so editors don't trim */ }

/* ================================================================
 * CARDS
 * ================================================================ */
body.vc-page-clientareaproductdetails #main-body .card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 1rem;
    box-shadow: var(--vc-shadow-sm);
    margin-bottom: 1.5rem;
}
body.vc-page-clientareaproductdetails #main-body .card .card-body {
    padding: 2rem;
}
body.vc-page-clientareaproductdetails #main-body .card .card-title {
    font-size: var(--vc-text-xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--vc-border-subtle);
    letter-spacing: -0.01em;
}

/* ================================================================
 * Product status hero (Twenty-One .product-status block)
 * ================================================================ */
body.vc-page-clientareaproductdetails #main-body .product-status {
    padding: 2rem 1.5rem;
    border-radius: var(--vc-radius-xl);
    background: var(--vc-bg-elevated);
    border: 1px solid var(--vc-border-default);
    text-align: center;
}
body.vc-page-clientareaproductdetails #main-body .product-status .product-icon h3 {
    font-size: var(--vc-text-xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 1rem 0 0.25rem;
}
body.vc-page-clientareaproductdetails #main-body .product-status .product-icon h4 {
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}
body.vc-page-clientareaproductdetails #main-body .product-status .product-icon .fa-stack i.fa-circle {
    color: var(--vc-primary-tint);
}
body.vc-page-clientareaproductdetails #main-body .product-status .product-icon .fa-stack i.fa-inverse {
    color: var(--vc-primary);
}
body.vc-page-clientareaproductdetails #main-body .product-status .product-status-text {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vc-border-subtle);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-secondary);
}
body.vc-page-clientareaproductdetails #main-body .product-status-active .product-status-text {
    color: var(--vc-success);
}
body.vc-page-clientareaproductdetails #main-body .product-status-suspended .product-status-text,
body.vc-page-clientareaproductdetails #main-body .product-status-terminated .product-status-text,
body.vc-page-clientareaproductdetails #main-body .product-status-cancelled .product-status-text {
    color: var(--vc-danger);
}
body.vc-page-clientareaproductdetails #main-body .product-status-pending .product-status-text {
    color: var(--vc-warning);
}

/* Action buttons stack */
body.vc-page-clientareaproductdetails #main-body .product-actions-wrapper {
    margin-top: 1rem;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}
body.vc-page-clientareaproductdetails #main-body .product-actions-wrapper > [class*="col-"] {
    padding: 0;
}

/* Product details info table (right column) */
body.vc-page-clientareaproductdetails #main-body .product-details {
    font-size: var(--vc-text-sm);
}
body.vc-page-clientareaproductdetails #main-body .product-details h5 {
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    margin: 0 0 0.25rem;
}
body.vc-page-clientareaproductdetails #main-body .product-details .row.mb-3 {
    padding: 1rem 0;
    border-bottom: 1px solid var(--vc-border-subtle);
    margin-bottom: 0 !important;
}
body.vc-page-clientareaproductdetails #main-body .product-details .row.mb-3:last-child {
    border-bottom: 0;
}

/* ================================================================
 * Resource usage bars (cPanel-like widgets in tplOverviewTabOutput)
 * ================================================================ */
body.vc-page-clientareaproductdetails #main-body .progress {
    height: 0.5rem;
    border-radius: var(--vc-radius-full);
    background: var(--vc-border-subtle);
    overflow: hidden;
    margin: 0.375rem 0;
}
body.vc-page-clientareaproductdetails #main-body .progress .progress-bar {
    background: var(--vc-primary);
    height: 100%;
    transition: width 300ms;
}
body.vc-page-clientareaproductdetails #main-body .progress .progress-bar.bg-warning { background: var(--vc-warning); }
body.vc-page-clientareaproductdetails #main-body .progress .progress-bar.bg-danger { background: var(--vc-danger); }

/* ================================================================
 * Forms
 * ================================================================ */
body.vc-page-clientareaproductdetails #main-body .form-control {
    border-radius: var(--vc-radius-md);
    border: 1px solid var(--vc-border-default);
    padding: 0.625rem 0.875rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
}
body.vc-page-clientareaproductdetails #main-body .form-control:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px var(--vc-primary-tint);
    outline: 0;
}
body.vc-page-clientareaproductdetails #main-body .col-form-label {
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-secondary);
}

/* ================================================================
 * Buttons
 * ================================================================ */
body.vc-page-clientareaproductdetails #main-body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms;
    text-decoration: none;
}
body.vc-page-clientareaproductdetails #main-body .btn-block {
    width: 100%;
    display: flex;
}
body.vc-page-clientareaproductdetails #main-body .btn-primary {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
    color: #fff;
}
body.vc-page-clientareaproductdetails #main-body .btn-primary:hover {
    background: var(--vc-primary-dark);
    border-color: var(--vc-primary-dark);
    color: #fff;
    text-decoration: none;
}
body.vc-page-clientareaproductdetails #main-body .btn-success {
    background: var(--vc-success);
    border-color: var(--vc-success);
    color: #fff;
}
body.vc-page-clientareaproductdetails #main-body .btn-success:hover {
    background: #047857;
    border-color: #047857;
    color: #fff;
    text-decoration: none;
}
body.vc-page-clientareaproductdetails #main-body .btn-danger {
    background: var(--vc-danger);
    border-color: var(--vc-danger);
    color: #fff;
}
body.vc-page-clientareaproductdetails #main-body .btn-danger:hover {
    background: #B91C1C;
    border-color: #B91C1C;
    color: #fff;
    text-decoration: none;
}
body.vc-page-clientareaproductdetails #main-body .btn-default {
    background: var(--vc-bg-surface);
    border-color: var(--vc-border-default);
    color: var(--vc-text-primary);
}
body.vc-page-clientareaproductdetails #main-body .btn-default:hover {
    background: var(--vc-bg-elevated);
    text-decoration: none;
}
body.vc-page-clientareaproductdetails #main-body .btn.disabled,
body.vc-page-clientareaproductdetails #main-body .btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ================================================================
 * Tables (downloads list, addons, transactions)
 * ================================================================ */
body.vc-page-clientareaproductdetails #main-body .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
body.vc-page-clientareaproductdetails #main-body .table thead th {
    padding: 1rem 1.25rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    background: var(--vc-bg-elevated);
    border-bottom: 1px solid var(--vc-border-default);
    text-align: left;
}
body.vc-page-clientareaproductdetails #main-body .table tbody td {
    padding: 1rem 1.25rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    border-top: 1px solid var(--vc-border-subtle);
}
body.vc-page-clientareaproductdetails #main-body .table tbody tr:hover {
    background: rgba(248, 250, 252, 0.6);
}

/* ================================================================
 * Status labels
 * ================================================================ */
body.vc-page-clientareaproductdetails #main-body .label,
body.vc-page-clientareaproductdetails #main-body .badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.vc-page-clientareaproductdetails #main-body .label-success { background: #ECFDF5; color: var(--vc-success); }
body.vc-page-clientareaproductdetails #main-body .label-warning { background: var(--vc-warning-bg); color: var(--vc-warning); }
body.vc-page-clientareaproductdetails #main-body .label-danger  { background: var(--vc-danger-bg); color: var(--vc-danger); }
body.vc-page-clientareaproductdetails #main-body .label-info    { background: var(--vc-info-bg); color: var(--vc-info); }
body.vc-page-clientareaproductdetails #main-body .label-default { background: #F1F5F9; color: #64748B; }

/* ================================================================
 * Alerts
 * ================================================================ */
body.vc-page-clientareaproductdetails #main-body .alert {
    border-radius: var(--vc-radius-lg);
    padding: 0.875rem 1.125rem;
    font-size: var(--vc-text-sm);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
}
body.vc-page-clientareaproductdetails #main-body .alert-info    { background: var(--vc-info-bg); color: var(--vc-info); border-color: #BFDBFE; }
body.vc-page-clientareaproductdetails #main-body .alert-warning { background: var(--vc-warning-bg); color: var(--vc-warning); border-color: #FDE68A; }
body.vc-page-clientareaproductdetails #main-body .alert-danger  { background: var(--vc-danger-bg); color: var(--vc-danger); border-color: #FECACA; }
body.vc-page-clientareaproductdetails #main-body .alert-success { background: #ECFDF5; color: var(--vc-success); border-color: #A7F3D0; }


/* ==== PAGE: clientareaproducts.css ==== */
/*
 * Vercaa — clientareaproducts.css
 * ===============================
 * Design: vercaa-ui-design/client-area-services (+ no-products).
 * Rendered inside clientarea-shell.css (Twenty-One shell).
 */

#main-body .vc-svc {
    display: block;
    width: 100%;
}

/* ================================================================
 * PAGE HEAD
 * ================================================================ */
#main-body .vc-svc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
#main-body .vc-svc-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--vc-text-primary);
}
.vc-svc-sub {
    margin: 0.25rem 0 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}
#main-body a.vc-svc-add-btn {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: var(--vc-accent-orange);
    color: #fff;
    font-size: var(--vc-text-sm);
    font-weight: 700;
    border-radius: var(--vc-radius-full);
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(255, 92, 0, 0.2);
    transition: background 200ms, transform 200ms;
}
#main-body a.vc-svc-add-btn:hover {
    background: #E85200;
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
#main-body a.vc-svc-add-btn .material-symbols-outlined {
    font-size: var(--vc-text-base) !important;
}

/* ================================================================
 * 12-COL GRID
 * ================================================================ */
.vc-svc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
}
@media (min-width: 1024px) {
    .vc-svc-grid {
        grid-template-columns: minmax(240px, 3fr) 9fr;
    }
}
.vc-svc-col-left,
.vc-svc-col-right { min-width: 0; }
.vc-svc-col-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ================================================================
 * LEFT COLUMN — Quick Actions + Promo
 * ================================================================ */
.vc-svc-card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 1rem;
    box-shadow: var(--vc-shadow-sm);
}
.vc-svc-quick {
    padding: 1.25rem;
}
.vc-svc-card-eyebrow {
    margin: 0 0 1rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vc-text-muted);
}
.vc-svc-quick-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
#main-body a.vc-svc-quick-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--vc-radius-lg);
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background 150ms, color 150ms;
}
#main-body a.vc-svc-quick-item:hover {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    text-decoration: none;
}
.vc-svc-quick-item .material-symbols-outlined {
    color: var(--vc-primary);
    opacity: 0.7;
    font-size: 1.25rem !important;
}
.vc-svc-quick-item:hover .material-symbols-outlined { opacity: 1; }

/* Promo card */
.vc-svc-promo {
    position: relative;
    overflow: hidden;
    padding: 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #6366F1 0%, var(--vc-primary) 100%);
    color: #fff;
    box-shadow: 0 20px 25px -5px rgba(99, 102, 241, 0.2);
}
.vc-svc-promo-bg {
    position: absolute;
    right: -0.5rem;
    bottom: -0.5rem;
    font-size: 7rem !important;
    opacity: 0.1;
    pointer-events: none;
}
.vc-svc-promo-title {
    position: relative;
    z-index: 1;
    margin: 0 0 0.5rem;
    font-size: var(--vc-text-lg);
    font-weight: 700;
}
.vc-svc-promo-sub {
    position: relative;
    z-index: 1;
    margin: 0 0 1rem;
    font-size: var(--vc-text-sm);
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}
#main-body a.vc-svc-promo-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    padding: 0.5rem 1rem;
    background: #fff;
    color: var(--vc-primary);
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--vc-radius-md);
    text-decoration: none;
    transition: background 150ms;
}
#main-body a.vc-svc-promo-btn:hover {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    text-decoration: none;
}

/* ================================================================
 * RIGHT COLUMN — Panel + Table
 * ================================================================ */
.vc-svc-panel { overflow: hidden; }
.vc-svc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--vc-border-subtle);
    background: rgba(248, 250, 252, 0.5);
    flex-wrap: wrap;
}
.vc-svc-panel-filter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.vc-svc-panel-showing {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}
.vc-svc-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-primary);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
}
.vc-svc-panel-count {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}

.vc-svc-table-wrap { overflow-x: auto; }
.vc-svc-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    text-align: left;
}
.vc-svc-table thead th {
    padding: 1.25rem 1.5rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    background: transparent;
    border-bottom: 1px solid var(--vc-border-subtle);
}
.vc-svc-table thead th.is-right { text-align: right; }
.vc-svc-table tbody tr {
    border-top: 1px solid var(--vc-border-subtle);
    cursor: pointer;
    transition: background 150ms;
}
.vc-svc-table tbody tr:first-child { border-top: 0; }
.vc-svc-table tbody tr:hover {
    background: rgba(248, 250, 252, 0.8);
}
.vc-svc-table tbody td {
    padding: 1.25rem 1.5rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    vertical-align: middle;
}

/* Product cell */
.vc-svc-product {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.vc-svc-product-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--vc-radius-md);
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    flex-shrink: 0;
}
.vc-svc-product-icon img {
    display: block;
    width: 1.375rem;
    height: auto;
}
.vc-svc-product-text { min-width: 0; }
.vc-svc-product-name {
    margin: 0;
    font-size: var(--vc-text-sm);
    font-weight: 700;
    color: var(--vc-text-primary);
    line-height: 1.3;
}
.vc-svc-product-domain {
    margin: 0.125rem 0 0;
    font-size: var(--vc-text-xs);
    color: var(--vc-text-muted);
    line-height: 1.3;
}
#main-body .vc-svc-product-domain a {
    color: var(--vc-text-muted);
    text-decoration: none;
}
#main-body .vc-svc-product-domain a:hover {
    color: var(--vc-primary);
    text-decoration: underline;
}

/* Price cell */
.vc-svc-price-amount {
    margin: 0;
    font-size: var(--vc-text-sm);
    font-weight: 700;
    color: var(--vc-primary);
}
.vc-svc-price-cycle {
    margin: 0.125rem 0 0;
    font-size: var(--vc-text-xs);
    color: var(--vc-text-muted);
    text-transform: capitalize;
}

/* Due cell */
.vc-svc-cell-due {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    font-weight: 500;
}
.vc-svc-sort-key {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Status pill */
.vc-svc-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid;
}
.vc-svc-status-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
}
.vc-svc-status-active,
.vc-svc-status-completed {
    background: #ECFDF5;
    color: #059669;
    border-color: #A7F3D0;
}
.vc-svc-status-pending {
    background: var(--vc-warning-bg);
    color: var(--vc-warning);
    border-color: #FDE68A;
}
.vc-svc-status-suspended,
.vc-svc-status-terminated,
.vc-svc-status-cancelled,
.vc-svc-status-fraud {
    background: var(--vc-danger-bg);
    color: var(--vc-danger);
    border-color: #FECACA;
}
.vc-svc-status-expired {
    background: #F1F5F9;
    color: #64748B;
    border-color: #E2E8F0;
}

/* Actions cell */
.vc-svc-cell-actions { text-align: right; }
#main-body a.vc-svc-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--vc-radius-md);
    color: var(--vc-text-muted);
    transition: background 150ms, color 150ms;
    text-decoration: none;
}
#main-body a.vc-svc-action-btn:hover {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    text-decoration: none;
}

/* ================================================================
 * EMPTY STATE
 * ================================================================ */
.vc-svc-empty {
    min-height: 500px;
    padding: 3rem 2rem;
    border: 2px dashed var(--vc-border-default);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.vc-svc-empty-art {
    position: relative;
    width: 10rem;
    height: 10rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-svc-empty-blob {
    position: absolute;
    inset: 0;
    background: var(--vc-primary);
    opacity: 0.15;
    border-radius: 50%;
    filter: blur(48px);
}
.vc-svc-empty-art .material-symbols-outlined {
    position: relative;
    font-size: 4rem !important;
    color: var(--vc-primary);
}
.vc-svc-empty-title {
    margin: 0 0 0.75rem;
    font-size: var(--vc-text-2xl);
    font-weight: 700;
    color: var(--vc-text-primary);
}
.vc-svc-empty-sub {
    max-width: 28rem;
    margin: 0 0 2rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
    line-height: 1.6;
}
.vc-svc-empty-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
#main-body a.vc-svc-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2.5rem;
    background: var(--vc-accent-orange);
    color: #fff;
    font-size: var(--vc-text-sm);
    font-weight: 700;
    border-radius: var(--vc-radius-full);
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(255, 92, 0, 0.2);
    transition: background 200ms, transform 200ms;
}
#main-body a.vc-svc-cta:hover {
    background: #E85200;
    color: #fff;
    transform: scale(1.05);
    text-decoration: none;
}
.vc-svc-empty-migrate {
    margin: 1.5rem 0 0;
    font-size: var(--vc-text-sm);
}
#main-body .vc-svc-empty-migrate a {
    color: var(--vc-primary);
    font-weight: 500;
    text-decoration: none;
}
#main-body .vc-svc-empty-migrate a:hover { text-decoration: underline; }

/* ================================================================
 * PAGE-SPECIFIC SHELL OVERRIDES
 * ================================================================ */
body.vc-page-clientareaproducts #main-body .vc-client-sidebar-col .sidebar {
    display: none;
}


/* ==== PAGE: clientareasecurity.css ==== */


/* ==== PAGE: clientregister.css ==== */


/* ==== PAGE: cloud-hosting.css ==== */
/*
 * Vercaa — cloud-hosting.css
 * ==========================
 * Overlay on shared-hosting.css. Cyan/teal accent for cloud.
 */

.vc-sh {
    --vc-sh-accent: #0891B2;       /* cyan-600 */
    --vc-sh-accent-bg: #CFFAFE;    /* cyan-100 */
    --vc-sh-accent-dark: #0E7490;  /* cyan-700 */
}

.vc-page-cloud-hosting .vc-sh-header-inner .vc-sh-brand-dots span:nth-child(2) {
    background: #0891B2;
}


/* ==== PAGE: codeguard.css ==== */


/* ==== PAGE: configurator.css ==== */
/* ==========================================================================
   Vercaa — Hosting Configurator (shared partial)
   Scoped to .vc-configurator so it can drop into any page without polluting
   other styles. Used on homepage, shared-hosting, wordpress-hosting,
   events-hosting (and any future page that includes
   templates/vercaa/includes/configurator.tpl).

   Sections in this file:
     1. Design tokens (CSS custom properties)
     2. Utility classes used by configurator markup
     3. Animations / keyframes
     4. Configurator components
     5. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
.vc-configurator {
  /* Brand */
  --vch-purple: #a83fff;
  --vch-purple-dark: #7c3aed;
  --vch-purple-50: #faf5ff;
  --vch-purple-100: #f3e8ff;
  --vch-purple-200: #e9d5ff;

  --vch-orange: #f97316;
  --vch-orange-50: #fff7ed;
  --vch-orange-100: #ffedd5;
  --vch-orange-200: #fed7aa;

  --vch-green: #22c55e;
  --vch-green-50: #f0fdf4;
  --vch-green-100: #dcfce7;
  --vch-green-200: #bbf7d0;

  /* Neutrals */
  --vch-white: #ffffff;
  --vch-gray-50: #f9fafb;
  --vch-gray-100: #f3f4f6;
  --vch-gray-200: #e5e7eb;
  --vch-gray-300: #d1d5db;
  --vch-gray-400: #9ca3af;
  --vch-gray-500: #6b7280;
  --vch-gray-600: #4b5563;
  --vch-gray-700: #374151;
  --vch-gray-900: #111827;
  --vch-slate-500: #64748b;
  --vch-slate-900: #0f172a;

  /* Status */
  --vch-blue-500: #3b82f6;
  --vch-blue-600: #2563eb;
  --vch-indigo-500: #6366f1;

  /* Reset box-sizing for everything inside */
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--vch-slate-900);
}
.vc-configurator *,
.vc-configurator *::before,
.vc-configurator *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Utility classes (only those used by configurator markup)
   -------------------------------------------------------------------------- */
.vc-configurator .vch-container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; width: 100%; }

.vc-configurator .vch-flex { display: flex; }
.vc-configurator .vch-grid { display: grid; }
.vc-configurator .vch-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vc-configurator .vch-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vc-configurator .vch-items-center { align-items: center; }
.vc-configurator .vch-items-start { align-items: flex-start; }
.vc-configurator .vch-justify-center { justify-content: center; }
.vc-configurator .vch-justify-between { justify-content: space-between; }
.vc-configurator .vch-gap-2 { gap: 0.5rem; }
.vc-configurator .vch-gap-3 { gap: 0.75rem; }
.vc-configurator .vch-gap-6 { gap: 1.5rem; }

.vc-configurator .vch-relative { position: relative; }

.vc-configurator .vch-text-center { text-align: center; }
.vc-configurator .vch-text-left { text-align: left; }

.vc-configurator .vch-text-xs { font-size: 0.75rem; line-height: 1rem; }
.vc-configurator .vch-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.vc-configurator .vch-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.vc-configurator .vch-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.vc-configurator .vch-text-2xl { font-size: 1.5rem; line-height: 2rem; }

.vc-configurator .vch-font-medium { font-weight: 500; }
.vc-configurator .vch-font-semibold { font-weight: 600; }
.vc-configurator .vch-font-bold { font-weight: 700; }

.vc-configurator .vch-c-gray-400 { color: var(--vch-gray-400); }
.vc-configurator .vch-c-gray-500 { color: var(--vch-gray-500); }
.vc-configurator .vch-c-gray-600 { color: var(--vch-gray-600); }
.vc-configurator .vch-c-gray-700 { color: var(--vch-gray-700); }

.vc-configurator .vch-mb-1 { margin-bottom: 0.25rem; }
.vc-configurator .vch-mb-2 { margin-bottom: 0.5rem; }
.vc-configurator .vch-mb-3 { margin-bottom: 0.75rem; }
.vc-configurator .vch-mb-4 { margin-bottom: 1rem; }
.vc-configurator .vch-mb-6 { margin-bottom: 1.5rem; }
.vc-configurator .vch-mb-12 { margin-bottom: 3rem; }
.vc-configurator .vch-mt-2 { margin-top: 0.5rem; }
.vc-configurator .vch-mt-12 { margin-top: 3rem; }
.vc-configurator .vch-p-2 { padding: 0.5rem; }
.vc-configurator .vch-pt-2 { padding-top: 0.5rem; }
.vc-configurator .vch-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.vc-configurator .vch-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

/* Status dots */
.vc-configurator .vch-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.vc-configurator .vch-dot--sm { width: 0.375rem; height: 0.375rem; }
.vc-configurator .vch-dot--green { background: var(--vch-green); }
.vc-configurator .vch-dot--gray { background: var(--vch-gray-300); }
.vc-configurator .vch-dot--indigo { background: linear-gradient(to right, var(--vch-indigo-500), var(--vch-purple)); }

/* --------------------------------------------------------------------------
   3. Animations
   -------------------------------------------------------------------------- */
.vc-configurator .vch-animate-pulse { animation: vc-cfg-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes vc-cfg-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes vc-cfg-spin {
  to { transform: rotate(360deg); }
}

@keyframes vc-cfg-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --------------------------------------------------------------------------
   4. Configurator components
   -------------------------------------------------------------------------- */

/* Section wrapper */
.vc-configurator.vch-pricing,
.vc-configurator .vch-pricing {
  padding: 5rem 0;
  position: relative;
}

.vc-configurator .vch-pricing__title {
  font-size: 3rem;
  font-weight: 400;
  color: var(--vch-slate-900);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.vc-configurator .vch-pricing__subtitle {
  font-size: 1.25rem;
  color: var(--vch-gray-600);
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* Configurator wrapper */
.vc-configurator .vch-configurator {
  background: linear-gradient(to bottom right, #fff, rgba(249,250,251,0.5), #fff);
  border: 1px solid rgba(229,231,235,0.5);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}

.vc-configurator .vch-configurator__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: radial-gradient(circle at 25px 25px, rgba(99,102,241,0.3) 2px, transparent 0);
  background-size: 50px 50px;
  pointer-events: none;
}

.vc-configurator .vch-configurator__header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Pricing badges */
.vc-configurator .vch-pricing-badge {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  font-weight: 500;
}

.vc-configurator .vch-pricing-badge--purple {
  background: var(--vch-purple-50);
  color: #7c3aed;
  border: 1px solid var(--vch-purple-200);
}

.vc-configurator .vch-pricing-badge--indigo {
  background: linear-gradient(to right, #e0e7ff, #ede9fe);
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.vc-configurator .vch-pricing-badge--green {
  background: var(--vch-green-100);
  color: #15803d;
  border-radius: 9999px;
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
}

/* 3-column pricing grid */
.vc-configurator .vch-pricing-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .vc-configurator .vch-pricing-grid {
    grid-template-columns: 4fr 5fr 3fr;
  }
}

/* Hosting type cards 2×2 grid */
.vc-configurator .vch-hosting-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.vc-configurator .vch-hosting-card {
  background: #fff;
  border: 1px solid var(--vch-gray-200);
  border-radius: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.vc-configurator .vch-hosting-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.vc-configurator .vch-hosting-card--active[data-hosting="perday"] {
  border-color: var(--vch-purple-200);
  background: rgba(168,63,255,0.04);
  box-shadow: 0 4px 16px rgba(168,63,255,0.12);
}

.vc-configurator .vch-hosting-card--active[data-hosting="shared"] {
  border-color: var(--vch-green-200);
  background: rgba(34,197,94,0.04);
  box-shadow: 0 4px 16px rgba(34,197,94,0.12);
}

.vc-configurator .vch-hosting-card--active[data-hosting="cloud"] {
  border-color: var(--vch-orange-200);
  background: rgba(249,115,22,0.04);
  box-shadow: 0 4px 16px rgba(249,115,22,0.12);
}

.vc-configurator .vch-hosting-card--active[data-hosting="wordpress"] {
  border-color: #bfdbfe;
  background: rgba(59,130,246,0.04);
  box-shadow: 0 4px 16px rgba(59,130,246,0.12);
}

.vc-configurator .vch-hosting-card__icon {
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: var(--vch-gray-100);
  color: var(--vch-gray-600);
  display: inline-flex;
  transition: all 0.2s;
}

.vc-configurator .vch-hosting-card--active[data-hosting="perday"] .vch-hosting-card__icon,
.vc-configurator .vch-hosting-card__icon--active {
  background: var(--vch-purple-100);
  color: var(--vch-purple);
}

.vc-configurator .vch-hosting-card--active[data-hosting="shared"] .vch-hosting-card__icon {
  background: var(--vch-green-100);
  color: var(--vch-green);
}

.vc-configurator .vch-hosting-card--active[data-hosting="cloud"] .vch-hosting-card__icon {
  background: var(--vch-orange-100);
  color: var(--vch-orange);
}

.vc-configurator .vch-hosting-card--active[data-hosting="wordpress"] .vch-hosting-card__icon {
  background: #dbeafe;
  color: var(--vch-blue-500);
}

.vc-configurator .vch-hosting-card__price {
  text-align: center;
  padding: 0.5rem;
  background: var(--vch-gray-50);
  border-radius: 0.5rem;
}

/* AI Plan Finder (hidden via {if false} in partial but styles preserved for future) */
.vc-configurator .vch-ai-finder {
  margin-top: 1rem;
  background: linear-gradient(to bottom right, #eef2ff, #ede9fe, #eff6ff);
  border: 1px solid #c7d2fe;
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(99,102,241,0.08);
}

.vc-configurator .vch-ai-finder__bg {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background: linear-gradient(to bottom right, #4f46e5, #7c3aed);
}

.vc-configurator .vch-ai-finder__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: linear-gradient(to right, #4f46e5, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(79,70,229,0.3);
  font-family: inherit;
}

.vc-configurator .vch-ai-finder__btn:hover {
  background: linear-gradient(to right, #4338ca, #6d28d9);
}

.vc-configurator .vch-ai-finder__dot {
  width: 0.75rem;
  height: 0.75rem;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vc-configurator .vch-ai-finder__dot::after {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  background: #fff;
  border-radius: 50%;
}

.vc-configurator .vch-ai-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
}

.vc-configurator .vch-ai-option {
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--vch-gray-200);
  background: #fff;
  color: var(--vch-gray-700);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  font-family: inherit;
}

.vc-configurator .vch-ai-option:hover { border-color: #c7d2fe; }
.vc-configurator .vch-ai-option--active { background: #e0e7ff; border-color: #a5b4fc; color: #312e81; }
.vc-configurator .vch-ai-option--active-visitor { background: #ede9fe; border-color: #c4b5fd; color: #3b0764; }

.vc-configurator .vch-ai-finder__recommend {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: linear-gradient(to right, #16a34a, #059669);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(22,163,74,0.3);
  font-family: inherit;
}

.vc-configurator .vch-ai-finder__recommend:hover { background: linear-gradient(to right, #15803d, #047857); }
.vc-configurator .vch-ai-finder__recommend:disabled { opacity: 0.5; cursor: not-allowed; }

.vc-configurator .vch-ai-finder__recommend .vch-spinner {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: vc-cfg-spin 1s linear infinite;
}

.vc-configurator .vch-ai-result {
  padding: 0.75rem;
  background: linear-gradient(to right, #f0fdf4, #ecfdf5);
  border: 1px solid #bbf7d0;
  border-radius: 0.75rem;
}

/* Config panel */
.vc-configurator .vch-config-panel {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(229,231,235,0.5);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  height: 100%;
}

.vc-configurator .vch-config-panel__icon {
  padding: 0.5rem;
  background: linear-gradient(to bottom right, var(--vch-gray-100), var(--vch-gray-200));
  border-radius: 0.75rem;
  display: inline-flex;
  color: var(--vch-purple);
}

.vc-configurator .vch-config-progress {
  text-align: center;
  margin-bottom: 1.5rem;
  padding: 1rem 0;
}

.vc-configurator .vch-progress-dot {
  height: 2px;
  width: 2rem;
  border-radius: 9999px;
  background: var(--vch-gray-300);
  transition: background 0.3s;
}

.vc-configurator .vch-progress-dot--active { background: var(--vch-green); }

/* Resource monitor */
.vc-configurator .vch-resource-monitor {
  padding: 0.75rem;
  background: rgba(249,250,251,0.5);
  border-radius: 0.75rem;
  border: 1px solid rgba(229,231,235,0.5);
}

.vc-configurator .vch-resource-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.vc-configurator .vch-resource-grid--2col { grid-template-columns: 1fr 1fr; }

.vc-configurator .vch-res-dots { display: flex; gap: 0.25rem; }

.vc-configurator .vch-res-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--vch-gray-200);
  transition: background 0.3s;
}

.vc-configurator .vch-res-dot--active { background: linear-gradient(to bottom right, #60a5fa, #2563eb); }

.vc-configurator .vch-res-bar {
  height: 0.375rem;
  background: var(--vch-gray-200);
  border-radius: 9999px;
  overflow: hidden;
}

.vc-configurator .vch-res-bar__fill {
  height: 100%;
  background: linear-gradient(to right, #4ade80, #16a34a);
  border-radius: 9999px;
  transition: width 0.6s ease-out;
}

/* Stat boxes */
.vc-configurator .vch-stat-box {
  text-align: center;
  padding: 0.75rem;
  background: var(--vch-gray-50);
  border-radius: 0.5rem;
  border: 1px solid var(--vch-gray-200);
}

.vc-configurator .vch-stat-box--purple { background: var(--vch-purple-50); border-color: var(--vch-purple-200); }
.vc-configurator .vch-stat-box--blue { background: #eff6ff; border-color: #bfdbfe; }
.vc-configurator .vch-stat-box--green { background: var(--vch-green-50); border-color: var(--vch-green-200); }
.vc-configurator .vch-stat-box--orange { background: var(--vch-orange-50); border-color: var(--vch-orange-200); }

/* Custom range sliders */
.vc-configurator .vch-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: var(--vch-gray-200);
  outline: none;
  transition: background 0.2s;
}

.vc-configurator .vch-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--vch-purple);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.15s;
}

.vc-configurator .vch-range::-webkit-slider-thumb:hover { transform: scale(1.15); }

.vc-configurator .vch-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--vch-purple);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
}

.vc-configurator .vch-range--green::-webkit-slider-thumb { border-color: var(--vch-green); }
.vc-configurator .vch-range--green::-moz-range-thumb { border-color: var(--vch-green); }
.vc-configurator .vch-range--orange::-webkit-slider-thumb { border-color: var(--vch-orange); }
.vc-configurator .vch-range--orange::-moz-range-thumb { border-color: var(--vch-orange); }
.vc-configurator .vch-range--blue::-webkit-slider-thumb { border-color: var(--vch-blue-500); }
.vc-configurator .vch-range--blue::-moz-range-thumb { border-color: var(--vch-blue-500); }

/* Template carousel */
.vc-configurator .vch-template-carousel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vc-configurator .vch-carousel-btn {
  flex-shrink: 0;
  padding: 0.625rem;
  background: #fff;
  border: 1px solid var(--vch-gray-200);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--vch-gray-600);
  display: inline-flex;
  font-family: inherit;
}

.vc-configurator .vch-carousel-btn:hover {
  border-color: var(--vch-gray-300);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: var(--vch-slate-900);
}

.vc-configurator .vch-carousel-slide { flex: 1; min-width: 0; overflow: visible; }

.vc-configurator .vch-tpl-card {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 2px solid;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.vc-configurator .vch-tpl-card__thumb {
  height: 4rem;
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vc-configurator .vch-tpl-card__thumb-bg { position: absolute; inset: 0; opacity: 0.2; }
.vc-configurator .vch-tpl-card__info { text-align: center; }

.vc-configurator .vch-tpl-card__icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.vc-configurator .vch-tpl-card__check {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  background: linear-gradient(to bottom right, var(--vch-purple), #4f46e5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.vc-configurator .vch-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 1rem;
}

.vc-configurator .vch-carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--vch-gray-300);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}

.vc-configurator .vch-carousel-dot--active { background: var(--vch-purple); width: 1.5rem; }

/* Cloud extra RAM disabled state */
.vc-configurator .vch-cloud-ram-extra--disabled { opacity: 0.5; pointer-events: none; }

/* Cloud plan slider locked state (when total RAM > 4 GB via extra-RAM slider) */
.vc-configurator #vchCloudSlider:disabled { opacity: 0.5; cursor: not-allowed; }

/* Managed mode toggle */
.vc-configurator .vch-managed-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border: 1px solid var(--vch-gray-200);
  border-radius: 0.5rem;
  background: var(--vch-gray-50);
  transition: all 0.2s;
}

.vc-configurator .vch-managed-toggle--active { border-color: #bfdbfe; background: #eff6ff; }

/* Toggle switch */
.vc-configurator .vch-switch {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.375rem;
  flex-shrink: 0;
}

.vc-configurator .vch-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.vc-configurator .vch-switch__track {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--vch-gray-300);
  border-radius: 9999px;
  transition: background 0.2s;
}

.vc-configurator .vch-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.125rem;
  height: 1.125rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.vc-configurator .vch-switch input:checked + .vch-switch__track { background: var(--vch-blue-500); }
.vc-configurator .vch-switch input:checked + .vch-switch__track::after { transform: translateX(1.125rem); }

/* Price summary card */
.vc-configurator .vch-price-summary {
  background: linear-gradient(to bottom right, #111827, #1f2937, #111827);
  color: #fff;
  border-radius: 1rem;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.vc-configurator .vch-price-summary__bg {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background: linear-gradient(to right, var(--vch-purple), var(--vch-blue-500), #4f46e5);
  background-size: 200% 200%;
  animation: vc-cfg-gradient-shift 8s linear infinite;
}

.vc-configurator .vch-price-summary__amount {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  background: linear-gradient(to right, #fff, #e5e7eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vc-configurator .vch-price-summary__features { margin-bottom: 1rem; }

.vc-configurator .vch-price-summary__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #f3f4f6;
  padding: 0.25rem 0;
}

.vc-configurator .vch-price-summary__check {
  width: 0.75rem;
  height: 0.75rem;
  background: linear-gradient(to right, #4ade80, #10b981);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  color: #fff;
  flex-shrink: 0;
}

.vc-configurator .vch-price-summary__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  background: #fff;
  color: var(--vch-slate-900);
  border: none;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  font-family: inherit;
}

.vc-configurator .vch-price-summary__btn:hover {
  background: var(--vch-gray-100);
  color: var(--vch-slate-900);
  text-decoration: none;
}

/* AI Suggestions box (hidden via {if false} but kept for future) */
.vc-configurator .vch-ai-suggestions {
  background: linear-gradient(to bottom right, #eef2ff, #ede9fe);
  border: 1px solid #c7d2fe;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(99,102,241,0.06);
}

/* Growth Path (hidden via {if false} but kept for future) */
.vc-configurator .vch-growth-path {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(229,231,235,0.5);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.vc-configurator .vch-growth-path__items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vc-configurator .vch-growth-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: var(--vch-gray-50);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--vch-gray-600);
  transition: all 0.3s;
}

.vc-configurator .vch-growth-item--active {
  background: var(--vch-purple-50);
  border: 1px solid var(--vch-purple-200);
  color: #581c87;
}

.vc-configurator .vch-growth-item__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--vch-gray-300);
  flex-shrink: 0;
  transition: background 0.3s;
}

.vc-configurator .vch-growth-item__dot--active { background: var(--vch-purple); }

/* Help CTA button */
/* color !important: the global .vc-page a:not(...) link-reset has very high
   specificity (0,10,0 from its 9-deep :not() chain) and otherwise repaints
   this gradient button's text purple-on-purple. !important is the reliable
   override here — see the cart-double-head / reset-specificity gotcha. */
.vc-configurator .vch-pricing-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  background: linear-gradient(to right, var(--vch-purple), #4f46e5);
  color: #fff !important;
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(168,63,255,0.3);
}

.vc-configurator .vch-pricing-cta:hover {
  background: linear-gradient(to right, #7c3aed, #4338ca);
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168,63,255,0.4);
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .vc-configurator .vch-pricing__title { font-size: 2rem; }

  .vc-configurator .vch-pricing-col-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .vc-configurator .vch-price-summary { grid-column: 1 / -1; }

  .vc-configurator .vch-pricing-col-right > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .vc-configurator .vch-configurator { padding: 1rem; border-radius: 1rem; }
  .vc-configurator .vch-pricing-col-right { grid-template-columns: 1fr; }
  .vc-configurator .vch-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .vc-configurator .vch-grid-3 > *:last-child { grid-column: 1 / -1; }
}


/* ==== PAGE: domain-transfer.css ==== */
/*
 * /domain-transfer.php reuses the /domains page CSS.
 * The page template only differs in hero copy and the inline
 * wgsSearchdomain override.
 */


/* ==== PAGE: email-services.css ==== */


/* ==== PAGE: events-hosting.css ==== */
/*
 * Vercaa — events-hosting.css
 * ===========================
 * Overlay on shared-hosting.css. Orange brand accent (matches
 * --vc-accent-orange) for time-limited / event hosting.
 */

.vc-sh {
    --vc-sh-accent: #FF5C00;       /* same as --vc-accent-orange */
    --vc-sh-accent-bg: #FFEDD5;    /* orange-100 */
    --vc-sh-accent-dark: #EA580C;  /* orange-600 */
}

.vc-page-events-hosting .vc-sh-header-inner .vc-sh-brand-dots span:nth-child(2) {
    background: #FF5C00;
}


/* ==== PAGE: homepage.css ==== */
/* ==========================================================================
   Vercaa Homepage — Scoped CSS
   All styles under .vercaa-home to avoid Lagom2 conflicts
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
.vercaa-home {
  /* Brand Colors */
  --vch-purple: #a83fff;
  --vch-purple-light: #c084fc;
  --vch-purple-dark: #7c3aed;
  --vch-purple-50: #faf5ff;
  --vch-purple-100: #f3e8ff;
  --vch-purple-200: #e9d5ff;

  --vch-orange: #f97316;
  --vch-orange-alt: #FF6E07;
  --vch-orange-light: #fb923c;
  --vch-orange-50: #fff7ed;
  --vch-orange-100: #ffedd5;
  --vch-orange-200: #fed7aa;

  --vch-green: #22c55e;
  --vch-green-alt: #10b981;
  --vch-green-light: #4ade80;
  --vch-green-50: #f0fdf4;
  --vch-green-100: #dcfce7;
  --vch-green-200: #bbf7d0;

  /* Neutral Palette */
  --vch-white: #ffffff;
  --vch-black: #000000;
  --vch-gray-50: #f9fafb;
  --vch-gray-100: #f3f4f6;
  --vch-gray-200: #e5e7eb;
  --vch-gray-300: #d1d5db;
  --vch-gray-400: #9ca3af;
  --vch-gray-500: #6b7280;
  --vch-gray-600: #4b5563;
  --vch-gray-700: #374151;
  --vch-gray-800: #1f2937;
  --vch-gray-900: #111827;
  --vch-slate-700: #334155;
  --vch-slate-800: #1e293b;
  --vch-slate-900: #0f172a;

  /* Semantic Colors */
  --vch-text-primary: rgba(41, 41, 41, 1);
  --vch-text-secondary: var(--vch-gray-600);
  --vch-text-muted: var(--vch-gray-500);
  --vch-bg-primary: var(--vch-white);
  --vch-bg-muted: var(--vch-gray-50);
  --vch-border: var(--vch-gray-200);

  /* Status Colors */
  --vch-red-400: #f87171;
  --vch-red-500: #ef4444;
  --vch-yellow-400: #facc15;
  --vch-yellow-500: #eab308;
  --vch-blue-400: #60a5fa;
  --vch-blue-500: #3b82f6;
  --vch-blue-600: #2563eb;
  --vch-indigo-500: #6366f1;
  --vch-indigo-600: #4f46e5;
  --vch-indigo-700: #4338ca;
  --vch-indigo-900: #312e81;
  --vch-emerald-400: #34d399;
  --vch-emerald-500: #10b981;
  --vch-emerald-600: #059669;
  --vch-rose-400: #fb7185;
  --vch-rose-500: #f43f5e;
  --vch-pink-400: #f472b6;
  --vch-pink-500: #ec4899;
  --vch-cyan-600: #0891b2;
  --vch-teal-500: #14b8a6;

  /* Typography */
  --vch-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vch-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --vch-font-serif: Times, "Times New Roman", Georgia, serif;

  /* Spacing (base 0.25rem = 4px) */
  --vch-sp: 0.25rem;

  /* Border Radius */
  --vch-radius-sm: 0.25rem;
  --vch-radius: 0.5rem;
  --vch-radius-md: 0.375rem;
  --vch-radius-lg: 0.5rem;
  --vch-radius-xl: 0.75rem;
  --vch-radius-2xl: 1rem;
  --vch-radius-3xl: 1.5rem;
  --vch-radius-full: 9999px;

  /* Shadows */
  --vch-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --vch-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --vch-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --vch-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --vch-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --vch-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);

  /* Transitions */
  --vch-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --vch-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --vch-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --vch-duration-fast: 150ms;
  --vch-duration: 300ms;
  --vch-duration-slow: 500ms;

  /* Z-index layers */
  --vch-z-bg: -10;
  --vch-z-base: 1;
  --vch-z-overlay: 10;
  --vch-z-dropdown: 40;
  --vch-z-header: 50;
  --vch-z-modal: 100;
}

/* --------------------------------------------------------------------------
   2. Base Reset (scoped)
   -------------------------------------------------------------------------- */
.vercaa-home,
.vercaa-home *,
.vercaa-home *::before,
.vercaa-home *::after {
  box-sizing: border-box;
}

/* Margin/padding reset scoped to navigation components only */
.vch-header *,
.vch-header *::before,
.vch-header *::after,
.vch-footer *,
.vch-footer *::before,
.vch-footer *::after,
.vch-mobile-menu *,
.vch-mobile-menu *::before,
.vch-mobile-menu *::after {
  margin: 0;
  padding: 0;
}

.vercaa-home {
  font-family: var(--vch-font-sans);
  line-height: 1.5;
  color: var(--vch-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* Media reset scoped to nav/header/footer; page content retains normal img behaviour */
.vch-header img,
.vch-header svg,
.vch-header video,
.vch-footer img,
.vch-footer svg,
.vch-footer video,
.vch-mobile-menu img,
.vch-mobile-menu svg,
.vch-mobile-menu video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Anchor reset scoped to nav/header/footer only — does NOT affect page content */
.vch-header a,
.vch-footer a,
.vch-mobile-menu a {
  color: inherit;
  text-decoration: none;
}

/* List reset scoped to nav/header/footer only */
.vch-header ul,
.vch-header ol,
.vch-footer ul,
.vch-footer ol,
.vch-mobile-menu ul,
.vch-mobile-menu ol {
  list-style: none;
}

/* Button reset scoped to nav/header/footer only — does NOT affect page content buttons */
.vch-header button,
.vch-footer button,
.vch-mobile-menu button {
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
}

/* Input font reset scoped to nav/header/footer only */
.vch-header input,
.vch-header select,
.vch-header textarea,
.vch-footer input,
.vch-footer select,
.vch-footer textarea {
  font: inherit;
}

/* --------------------------------------------------------------------------
   3. Layout Utilities
   -------------------------------------------------------------------------- */

/* Container */
.vercaa-home .vch-container {
  width: 100%;
  max-width: 80rem; /* 1280px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .vercaa-home .vch-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 768px) {
  .vercaa-home .vch-container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 1024px) {
  .vercaa-home .vch-container {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (min-width: 1280px) {
  .vercaa-home .vch-container {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* Full-bleed container (for hero, header) */
.vercaa-home .vch-full-bleed {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 640px) {
  .vercaa-home .vch-full-bleed { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 768px) {
  .vercaa-home .vch-full-bleed { padding-left: 3rem; padding-right: 3rem; }
}
@media (min-width: 1024px) {
  .vercaa-home .vch-full-bleed { padding-left: 4rem; padding-right: 4rem; }
}
@media (min-width: 1280px) {
  .vercaa-home .vch-full-bleed { padding-left: 5rem; padding-right: 5rem; }
}

/* Flexbox helpers */
.vercaa-home .vch-flex { display: flex; }
.vercaa-home .vch-flex-col { display: flex; flex-direction: column; }
.vercaa-home .vch-flex-wrap { flex-wrap: wrap; }
.vercaa-home .vch-flex-1 { flex: 1; }
.vercaa-home .vch-flex-none { flex: none; }
.vercaa-home .vch-shrink-0 { flex-shrink: 0; }
.vercaa-home .vch-items-center { align-items: center; }
.vercaa-home .vch-items-start { align-items: flex-start; }
.vercaa-home .vch-items-baseline { align-items: baseline; }
.vercaa-home .vch-justify-center { justify-content: center; }
.vercaa-home .vch-justify-between { justify-content: space-between; }
.vercaa-home .vch-gap-1 { gap: 0.25rem; }
.vercaa-home .vch-gap-1\.5 { gap: 0.375rem; }
.vercaa-home .vch-gap-2 { gap: 0.5rem; }
.vercaa-home .vch-gap-3 { gap: 0.75rem; }
.vercaa-home .vch-gap-4 { gap: 1rem; }
.vercaa-home .vch-gap-6 { gap: 1.5rem; }
.vercaa-home .vch-gap-8 { gap: 2rem; }
.vercaa-home .vch-gap-10 { gap: 2.5rem; }
.vercaa-home .vch-gap-12 { gap: 3rem; }

/* Grid */
.vercaa-home .vch-grid { display: grid; }
.vercaa-home .vch-grid-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vercaa-home .vch-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vercaa-home .vch-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vercaa-home .vch-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vercaa-home .vch-grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.vercaa-home .vch-col-span-4 { grid-column: span 4 / span 4; }
.vercaa-home .vch-col-span-5 { grid-column: span 5 / span 5; }
.vercaa-home .vch-col-span-8 { grid-column: span 8 / span 8; }
.vercaa-home .vch-col-span-12 { grid-column: span 12 / span 12; }

/* Responsive grid overrides */
@media (min-width: 768px) {
  .vercaa-home .vch-md-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vercaa-home .vch-md-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .vercaa-home .vch-lg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vercaa-home .vch-lg-grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .vercaa-home .vch-lg-col-span-4 { grid-column: span 4 / span 4; }
  .vercaa-home .vch-lg-col-span-5 { grid-column: span 5 / span 5; }
}

/* Positioning */
.vercaa-home .vch-relative { position: relative; }
.vercaa-home .vch-absolute { position: absolute; }
.vercaa-home .vch-fixed { position: fixed; }
.vercaa-home .vch-inset-0 { inset: 0; }
.vercaa-home .vch-overflow-hidden { overflow: hidden; }

/* Display */
.vercaa-home .vch-block { display: block; }
.vercaa-home .vch-inline-block { display: inline-block; }
.vercaa-home .vch-inline-flex { display: inline-flex; }
.vercaa-home .vch-hidden { display: none; }

@media (min-width: 1024px) {
  .vercaa-home .vch-lg-flex { display: flex; }
  .vercaa-home .vch-lg-hidden { display: none; }
  .vercaa-home .vch-lg-block { display: block; }
}

@media (max-width: 1023px) {
  .vercaa-home .vch-mobile-only { display: block; }
  .vercaa-home .vch-desktop-only { display: none; }
}
@media (min-width: 1024px) {
  .vercaa-home .vch-mobile-only { display: none; }
  .vercaa-home .vch-desktop-only { display: block; }
}

/* Sizing */
.vercaa-home .vch-w-full { width: 100%; }
.vercaa-home .vch-h-full { height: 100%; }
.vercaa-home .vch-min-h-screen { min-height: 100vh; }

/* Text alignment */
.vercaa-home .vch-text-center { text-align: center; }
.vercaa-home .vch-text-left { text-align: left; }
.vercaa-home .vch-text-right { text-align: right; }

/* Pointer */
.vercaa-home .vch-pointer { cursor: pointer; }
.vercaa-home .vch-pointer-none { pointer-events: none; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.vercaa-home .vch-text-xs { font-size: 0.75rem; line-height: 1rem; }
.vercaa-home .vch-text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.vercaa-home .vch-text-base { font-size: 1rem; line-height: 1.5rem; }
.vercaa-home .vch-text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.vercaa-home .vch-text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.vercaa-home .vch-text-2xl { font-size: 1.5rem; line-height: 2rem; }
.vercaa-home .vch-text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.vercaa-home .vch-text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.vercaa-home .vch-text-5xl { font-size: 3rem; line-height: 1; }
.vercaa-home .vch-text-6xl { font-size: 3.75rem; line-height: 1; }
.vercaa-home .vch-text-7xl { font-size: 4.5rem; line-height: 1; }
.vercaa-home .vch-text-8xl { font-size: 6rem; line-height: 1; }

.vercaa-home .vch-font-normal { font-weight: 400; }
.vercaa-home .vch-font-medium { font-weight: 500; }
.vercaa-home .vch-font-semibold { font-weight: 600; }
.vercaa-home .vch-font-bold { font-weight: 700; }

.vercaa-home .vch-tracking-tight { letter-spacing: -0.025em; }
.vercaa-home .vch-leading-tight { line-height: 1.25; }
.vercaa-home .vch-leading-relaxed { line-height: 1.625; }
.vercaa-home .vch-leading-none { line-height: 1; }

.vercaa-home .vch-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Color utilities */
.vercaa-home .vch-c-purple { color: var(--vch-purple); }
.vercaa-home .vch-c-orange { color: var(--vch-orange); }
.vercaa-home .vch-c-green { color: var(--vch-green); }
.vercaa-home .vch-c-green-alt { color: var(--vch-green-alt); }
.vercaa-home .vch-c-white { color: var(--vch-white); }
.vercaa-home .vch-c-muted { color: var(--vch-text-muted); }
.vercaa-home .vch-c-secondary { color: var(--vch-text-secondary); }
.vercaa-home .vch-c-slate-700 { color: var(--vch-slate-700); }
.vercaa-home .vch-c-slate-900 { color: var(--vch-slate-900); }
.vercaa-home .vch-c-gray-500 { color: var(--vch-gray-500); }
.vercaa-home .vch-c-gray-600 { color: var(--vch-gray-600); }
.vercaa-home .vch-c-gray-900 { color: var(--vch-gray-900); }
.vercaa-home .vch-c-blue-500 { color: var(--vch-blue-500); }
.vercaa-home .vch-c-blue-600 { color: var(--vch-blue-600); }
.vercaa-home .vch-c-red-400 { color: var(--vch-red-400); }
.vercaa-home .vch-c-red-500 { color: var(--vch-red-500); }
.vercaa-home .vch-c-yellow-400 { color: var(--vch-yellow-400); }
.vercaa-home .vch-c-yellow-500 { color: var(--vch-yellow-500); }
.vercaa-home .vch-c-indigo-700 { color: var(--vch-indigo-700); }
.vercaa-home .vch-c-indigo-900 { color: var(--vch-indigo-900); }

/* --------------------------------------------------------------------------
   5. Header Component
   -------------------------------------------------------------------------- */
.vercaa-home .vch-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--vch-z-header);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
  transition: background var(--vch-duration) var(--vch-ease),
              box-shadow var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-header.vch-header--scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--vch-shadow-sm);
}

.vercaa-home .vch-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem; /* 64px */
}

/* Logo */
.vercaa-home .vch-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vercaa-home .vch-logo-dots {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.vercaa-home .vch-logo-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--vch-radius-full);
}

.vercaa-home .vch-logo-dot--purple { background-color: var(--vch-purple); }
.vercaa-home .vch-logo-dot--orange { background-color: var(--vch-orange); }
.vercaa-home .vch-logo-dot--green { background-color: var(--vch-green); }

.vercaa-home .vch-logo-text {
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.025em;
  color: var(--vch-text-primary);
}

/* Navigation */
.vercaa-home .vch-nav {
  display: none;
  align-items: center;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .vercaa-home .vch-nav { display: flex; }
}

.vercaa-home .vch-nav-item {
  position: relative;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--vch-gray-700);
  transition: color var(--vch-duration-fast) var(--vch-ease);
  cursor: pointer;
}

.vercaa-home .vch-nav-item:hover {
  color: #663399;
}

.vercaa-home .vch-nav-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.75rem; /* invisible hover bridge */
}

/* Mega Menu */
.vercaa-home .vch-mega-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 18rem;
  padding: 0.5rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--vch-radius-xl);
  box-shadow: var(--vch-shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(0.5rem);
  margin-top: 0.5rem;
  transition: all var(--vch-duration) var(--vch-ease);
  z-index: var(--vch-z-dropdown);
}

.vercaa-home .vch-nav-item:hover .vch-mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.vercaa-home .vch-mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.vercaa-home .vch-mega-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--vch-radius-lg);
  position: relative;
  transition: all var(--vch-duration-fast) var(--vch-ease);
  color: #717182;
}

.vercaa-home .vch-mega-item .vch-mega-left-border {
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  border-radius: 9999px;
  opacity: 0;
  transform: scaleY(0);
  transition: all var(--vch-duration-fast) var(--vch-ease);
}

.vercaa-home .vch-mega-item .vch-mega-right-dot {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  transition: all var(--vch-duration-fast) var(--vch-ease);
}

/* Hover effects for different dropdowns */
.vercaa-home .vch-mega-item[data-color="purple"]:hover {
  background: rgba(168,63,255,0.03);
  color: #a83fff;
  transform: translateX(2px);
}

.vercaa-home .vch-mega-item[data-color="purple"]:hover .vch-mega-left-border {
  background: #a83fff;
  opacity: 1;
  transform: scaleY(1);
}

.vercaa-home .vch-mega-item[data-color="purple"]:hover .vch-mega-right-dot {
  background: #a83fff;
  opacity: 0.6;
}

.vercaa-home .vch-mega-item[data-color="orange"]:hover {
  background: rgba(249,115,22,0.03);
  color: #f97316;
  transform: translateX(2px);
}

.vercaa-home .vch-mega-item[data-color="orange"]:hover .vch-mega-left-border {
  background: #f97316;
  opacity: 1;
  transform: scaleY(1);
}

.vercaa-home .vch-mega-item[data-color="orange"]:hover .vch-mega-right-dot {
  background: #f97316;
  opacity: 0.6;
}

.vercaa-home .vch-mega-item[data-color="green"]:hover {
  background: rgba(16,185,129,0.03);
  color: #10b981;
  transform: translateX(2px);
}

.vercaa-home .vch-mega-item[data-color="green"]:hover .vch-mega-left-border {
  background: #10b981;
  opacity: 1;
  transform: scaleY(1);
}

.vercaa-home .vch-mega-item[data-color="green"]:hover .vch-mega-right-dot {
  background: #10b981;
  opacity: 0.6;
}

.vercaa-home .vch-mega-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vch-radius-lg);
  flex-shrink: 0;
  background: rgba(113,113,130,0.06);
  color: #717182;
  transition: all var(--vch-duration-fast) var(--vch-ease);
}

.vercaa-home .vch-mega-item[data-color="purple"]:hover .vch-mega-icon {
  background: rgba(168,63,255,0.09);
  color: #a83fff;
}

.vercaa-home .vch-mega-item[data-color="orange"]:hover .vch-mega-icon {
  background: rgba(249,115,22,0.09);
  color: #f97316;
}

.vercaa-home .vch-mega-item[data-color="green"]:hover .vch-mega-icon {
  background: rgba(16,185,129,0.09);
  color: #10b981;
}

/* Mega icon color classes removed - now using data-color hover effects */

.vercaa-home .vch-mega-title {
  font-size: 0.875rem;
  font-weight: 400;
  color: #717182;
  transition: all var(--vch-duration-fast) var(--vch-ease);
}

.vercaa-home .vch-mega-item:hover .vch-mega-title {
  font-weight: 500;
}

.vercaa-home .vch-mega-desc {
  font-size: 0.75rem;
  color: var(--vch-gray-500);
  line-height: 1.4;
}

/* Header Right */
.vercaa-home .vch-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.vercaa-home .vch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--vch-radius-lg);
  transition: all var(--vch-duration-fast) var(--vch-ease);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.5;
}

.vercaa-home .vch-btn--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.vercaa-home .vch-btn--xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.vercaa-home .vch-btn--lg {
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
}

/* Ghost button */
.vercaa-home .vch-btn--ghost {
  background: transparent;
  color: var(--vch-gray-700);
}

.vercaa-home .vch-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--vch-gray-900);
}

/* Outline button */
.vercaa-home .vch-btn--outline {
  background: transparent;
  border-color: var(--vch-gray-300);
  color: var(--vch-gray-800);
}

.vercaa-home .vch-btn--outline:hover {
  background: var(--vch-gray-50);
  border-color: var(--vch-gray-400);
}

/* Primary button */
.vercaa-home .vch-btn--primary {
  background: var(--vch-purple);
  color: var(--vch-white);
}

.vercaa-home .vch-btn--primary:hover {
  background: var(--vch-purple-dark);
}

/* Green button */
.vercaa-home .vch-btn--green {
  background: linear-gradient(to right, var(--vch-green), var(--vch-emerald-600));
  color: var(--vch-white);
}

.vercaa-home .vch-btn--green:hover {
  opacity: 0.9;
}

/* Indigo/AI gradient button */
.vercaa-home .vch-btn--indigo {
  background: linear-gradient(to right, var(--vch-indigo-600), var(--vch-purple));
  color: var(--vch-white);
  border-radius: var(--vch-radius-xl);
}

.vercaa-home .vch-btn--indigo:hover {
  background: linear-gradient(to right, var(--vch-indigo-700), var(--vch-purple-dark));
}

/* Orange button */
.vercaa-home .vch-btn--orange {
  background: var(--vch-orange);
  color: var(--vch-white);
}

.vercaa-home .vch-btn--orange:hover {
  opacity: 0.9;
}

/* Disabled state */
.vercaa-home .vch-btn:disabled,
.vercaa-home .vch-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Icon-only button */
.vercaa-home .vch-btn--icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: var(--vch-radius-full);
}

/* --------------------------------------------------------------------------
   7. Badge
   -------------------------------------------------------------------------- */
.vercaa-home .vch-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: var(--vch-radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.5;
}

.vercaa-home .vch-badge--outline {
  background: transparent;
  border-color: var(--vch-gray-300);
  color: var(--vch-gray-800);
}

.vercaa-home .vch-badge--purple {
  background: rgba(168, 63, 255, 0.1);
  border-color: rgba(168, 63, 255, 0.3);
  color: var(--vch-purple);
}

.vercaa-home .vch-badge--orange {
  background: rgba(249, 115, 22, 0.1);
  border-color: rgba(249, 115, 22, 0.3);
  color: var(--vch-orange);
}

.vercaa-home .vch-badge--green {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--vch-green);
}

.vercaa-home .vch-badge--blue {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--vch-blue-600);
}

.vercaa-home .vch-badge--yellow {
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.3);
  color: var(--vch-yellow-500);
}

.vercaa-home .vch-badge--red {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--vch-red-500);
}

.vercaa-home .vch-badge--muted {
  background: var(--vch-gray-100);
  color: var(--vch-gray-600);
}

.vercaa-home .vch-badge--live-preview {
  background: var(--vch-purple-50);
  color: var(--vch-purple-dark);
  border-color: var(--vch-purple-200);
}

.vercaa-home .vch-badge--smart {
  background: linear-gradient(to right, rgba(99, 102, 241, 0.1), rgba(168, 63, 255, 0.1));
  color: var(--vch-indigo-700);
  border-color: rgba(99, 102, 241, 0.2);
}

/* --------------------------------------------------------------------------
   8. Card (glassmorphism base)
   -------------------------------------------------------------------------- */
.vercaa-home .vch-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--vch-radius-2xl);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform var(--vch-duration) var(--vch-ease),
              box-shadow var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-card:hover {
  transform: scale(1.01);
}

.vercaa-home .vch-card--solid {
  background: var(--vch-white);
  backdrop-filter: none;
  border-color: var(--vch-gray-200);
}

.vercaa-home .vch-card--solid:hover {
  box-shadow: var(--vch-shadow-lg);
}

/* Glass overlays for cards */
.vercaa-home .vch-card__glass-bg {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: inherit;
  transition: background var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-card__glass-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.15), transparent);
  border-radius: inherit;
  transition: background var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-card:hover .vch-card__glass-bg {
  background: rgba(255, 255, 255, 0.18);
}

.vercaa-home .vch-card:hover .vch-card__glass-overlay {
  background: linear-gradient(to bottom right, rgba(255,255,255,0.25), transparent);
}

.vercaa-home .vch-card__content {
  position: relative;
  z-index: var(--vch-z-base);
}

/* Feature card styling */
.vercaa-home .vch-feature-card {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border-radius: var(--vch-radius-2xl);
  background: linear-gradient(to bottom right, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  box-shadow: var(--vch-shadow-sm);
  transition: all 500ms var(--vch-ease);
  cursor: pointer;
}

.vercaa-home .vch-feature-card:hover,
.vercaa-home .vch-feature-card.vch-feature-card--active {
  box-shadow: var(--vch-shadow-xl);
  transform: scale(1.02);
}

.vercaa-home .vch-feature-card__gradient {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms var(--vch-ease);
}

.vercaa-home .vch-feature-card:hover .vch-feature-card__gradient,
.vercaa-home .vch-feature-card.vch-feature-card--active .vch-feature-card__gradient {
  opacity: 1;
}

.vercaa-home .vch-feature-card__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(24px);
  transform: scale(1.5);
  transition: opacity 500ms var(--vch-ease);
}

.vercaa-home .vch-feature-card:hover .vch-feature-card__glow,
.vercaa-home .vch-feature-card.vch-feature-card--active .vch-feature-card__glow {
  opacity: 0.2;
}

/* Feature card icon container */
.vercaa-home .vch-feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--vch-radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-feature-card:hover .vch-feature-icon,
.vercaa-home .vch-feature-card.vch-feature-card--active .vch-feature-icon {
  transform: scale(1.1);
}

/* Feature performance bar */
.vercaa-home .vch-feature-bar {
  flex: 1;
  height: 0.5rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--vch-radius-full);
  overflow: hidden;
}

.vercaa-home .vch-feature-bar__fill {
  height: 100%;
  border-radius: var(--vch-radius-full);
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1000ms var(--vch-ease) 200ms;
}

.vercaa-home .vch-feature-card:hover .vch-feature-bar__fill,
.vercaa-home .vch-feature-card.vch-feature-card--active .vch-feature-bar__fill {
  transform: scaleX(1);
}

/* Tech stack indicators */
.vercaa-home .vch-tech-bars {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity var(--vch-duration) var(--vch-ease) 100ms;
}

.vercaa-home .vch-feature-card:hover .vch-tech-bars,
.vercaa-home .vch-feature-card.vch-feature-card--active .vch-tech-bars {
  opacity: 1;
}

.vercaa-home .vch-tech-bar {
  width: 0.25rem;
  height: 2rem;
  border-radius: var(--vch-radius-full);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   9. Dashboard Panel (Interactive Features Panel)
   -------------------------------------------------------------------------- */
/* Hide dashboard on mobile */
@media (max-width: 767px) {
  .vercaa-home .vch-dashboard-wrapper { display: none !important; }
}

.vercaa-home .vch-dashboard {
  position: relative;
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--vch-radius-3xl);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: var(--vch-shadow-2xl);
  overflow: hidden;
}

/* Glass shimmer effect */
.vercaa-home .vch-dashboard__shimmer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.vercaa-home .vch-dashboard__shimmer-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
  animation: vch-glass-shimmer 8s infinite linear;
}

.vercaa-home .vch-dashboard__shimmer-reflection {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.1), transparent, rgba(255,255,255,0.05));
  animation: vch-glass-reflection 12s infinite ease-in-out;
}

.vercaa-home .vch-dashboard__content {
  position: relative;
  z-index: var(--vch-z-base);
  padding: 2rem;
}

/* Dashboard header */
.vercaa-home .vch-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.vercaa-home .vch-dashboard-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vercaa-home .vch-dashboard-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--vch-radius-full);
}

.vercaa-home .vch-dashboard-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--vch-slate-900);
}

/* Performance card inside dashboard */
.vercaa-home .vch-perf-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--vch-radius-2xl);
  padding: 1.5rem;
  transition: all var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-perf-card:hover {
  transform: scale(1.01);
}

.vercaa-home .vch-perf-card__bg {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: inherit;
  transition: background var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-perf-card__bg--purple {
  background: linear-gradient(to bottom right, rgba(168,63,255,0.06), transparent);
}

.vercaa-home .vch-perf-card__bg--default {
  background: rgba(255, 255, 255, 0.12);
}

.vercaa-home .vch-perf-card:hover .vch-perf-card__bg--default {
  background: rgba(255, 255, 255, 0.18);
}

.vercaa-home .vch-perf-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.15), transparent);
  border-radius: inherit;
  transition: background var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-perf-card:hover .vch-perf-card__overlay {
  background: linear-gradient(to bottom right, rgba(255,255,255,0.2), transparent);
}

.vercaa-home .vch-perf-card__content {
  position: relative;
  z-index: var(--vch-z-base);
}

/* Metric hero number */
.vercaa-home .vch-metric-hero {
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.2;
}

.vercaa-home .vch-metric-value {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.vercaa-home .vch-metric-label {
  font-size: 0.75rem;
  color: var(--vch-slate-700);
}

.vercaa-home .vch-metric-sublabel {
  font-size: 0.6875rem;
  color: var(--vch-gray-500);
}

/* Progress bars */
.vercaa-home .vch-progress {
  height: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--vch-radius-full);
  overflow: hidden;
}

.vercaa-home .vch-progress__bar {
  height: 100%;
  border-radius: var(--vch-radius-full);
  transition: width 1000ms var(--vch-ease);
}

/* Load level gradient helpers */
.vercaa-home .vch-grad-green { background: linear-gradient(to right, var(--vch-green), var(--vch-green-light)); }
.vercaa-home .vch-grad-blue { background: linear-gradient(to right, var(--vch-blue-500), var(--vch-blue-400)); }
.vercaa-home .vch-grad-yellow { background: linear-gradient(to right, var(--vch-yellow-500), var(--vch-yellow-400)); }
.vercaa-home .vch-grad-orange { background: linear-gradient(to right, var(--vch-orange), var(--vch-orange-light)); }
.vercaa-home .vch-grad-red { background: linear-gradient(to right, var(--vch-red-500), var(--vch-red-400)); }
.vercaa-home .vch-grad-purple { background: linear-gradient(to right, var(--vch-purple), var(--vch-purple-light)); }
.vercaa-home .vch-grad-indigo { background: linear-gradient(to right, var(--vch-indigo-600), var(--vch-purple)); }
.vercaa-home .vch-grad-green-emerald { background: linear-gradient(to right, var(--vch-green), var(--vch-emerald-400)); }

/* Slider */
.vercaa-home .vch-slider-container {
  position: relative;
  width: 100%;
  padding: 0.5rem 0;
}

.vercaa-home .vch-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.375rem;
  border-radius: var(--vch-radius-full);
  background: var(--vch-gray-200);
  outline: none;
  transition: all var(--vch-duration-fast) var(--vch-ease);
}

.vercaa-home .vch-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--vch-radius-full);
  background: var(--vch-white);
  border: 2px solid var(--vch-purple);
  box-shadow: var(--vch-shadow);
  cursor: pointer;
  transition: all var(--vch-duration-fast) var(--vch-ease);
}

.vercaa-home .vch-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 4px rgba(168, 63, 255, 0.15);
}

.vercaa-home .vch-slider::-moz-range-thumb {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--vch-radius-full);
  background: var(--vch-white);
  border: 2px solid var(--vch-purple);
  box-shadow: var(--vch-shadow);
  cursor: pointer;
}

.vercaa-home .vch-slider--orange::-webkit-slider-thumb {
  border-color: var(--vch-orange);
}

.vercaa-home .vch-slider--orange::-moz-range-thumb {
  border-color: var(--vch-orange);
}

.vercaa-home .vch-slider--green::-webkit-slider-thumb {
  border-color: var(--vch-green);
}

.vercaa-home .vch-slider--blue::-webkit-slider-thumb {
  border-color: var(--vch-blue-500);
}

.vercaa-home .vch-slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vercaa-home .vch-slider:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   10. Hero Section
   -------------------------------------------------------------------------- */
.vercaa-home .vch-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--vch-white);
}

.vercaa-home .vch-hero__inner {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding-top: 5rem; /* space for fixed header */
  padding-bottom: 0;
}

.vercaa-home .vch-hero__tagline {
  text-align: center;
  margin-bottom: 3rem;
  padding-top: 2rem;
  position: relative;
  z-index: var(--vch-z-overlay);
}

@media (min-width: 1024px) {
  .vercaa-home .vch-hero__tagline { margin-bottom: 4rem; }
}

.vercaa-home .vch-hero__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--vch-text-primary);
  line-height: 1.25;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.025em;
}

@media (min-width: 1024px) {
  .vercaa-home .vch-hero__title { font-size: 1.875rem; }
}

@media (min-width: 1280px) {
  .vercaa-home .vch-hero__title { font-size: 2.25rem; }
}

.vercaa-home .vch-hero__highlight {
  color: var(--vch-purple);
  font-weight: 700;
  display: inline-block;
  margin-top: 0.5rem;
}

/* ════════════════════════════════════════════════════════════════════════
   SPLIT HERO — ChemiCloud-style look & feel, Vercaa brand.
   2-column gradient hero (left copy/CTA, right testimonial/Trustpilot) with a
   diagonal bottom cut. Solid brand gradient, no background image.
   (replaces the former image hero; see homepage.tpl HOMEPAGE.HERO)
   ════════════════════════════════════════════════════════════════════════ */
.vercaa-home .vch-hero--split {
  position: relative;
  min-height: 60vh;
  overflow: hidden;
  /* Brand gradient: deep indigo → purple, diagonal */
  background: linear-gradient(135deg,
    #2e1065 0%,
    #4c1d95 45%,
    var(--vch-purple-dark, #7c3aed) 100%);
}

.vercaa-home .vch-hero-split__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  padding-top: 7rem;     /* clear fixed header */
  padding-bottom: 6rem;
}

@media (min-width: 1024px) {
  .vercaa-home .vch-hero-split__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    padding-top: 8rem;
    padding-bottom: 7rem;
  }
}

/* ── LEFT column ── */
.vercaa-home .vch-hero-split__title {
  color: #fff;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.75rem;
}

@media (min-width: 768px)  { .vercaa-home .vch-hero-split__title { font-size: 3rem; } }
@media (min-width: 1280px) { .vercaa-home .vch-hero-split__title { font-size: 3.5rem; } }

.vercaa-home .vch-hero-split__title-accent { color: var(--vch-orange); }

.vercaa-home .vch-hero-split__list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vercaa-home .vch-hero-split__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.0625rem;
}

.vercaa-home .vch-hero-split__list svg {
  color: var(--vch-green, #22c55e);
  flex-shrink: 0;
}

.vercaa-home .vch-hero-split__price {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.0625rem;
  margin: 0 0 1.75rem;
}
.vercaa-home .vch-hero-split__price strong { color: #fff; font-weight: 700; }

.vercaa-home .vch-hero-split__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.vercaa-home .vch-hero-split__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-size: 1rem;
  font-weight: 700;
}

/* Outline CTA on the dark gradient */
.vercaa-home .vch-hero-split__cta .vh-btn--outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}
.vercaa-home .vch-hero-split__cta .vh-btn--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.vercaa-home .vch-hero-split__guarantee {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  margin: 0;
}
.vercaa-home .vch-hero-split__guarantee strong { color: #fff; }

/* ── RIGHT column: testimonial card ── */
.vercaa-home .vch-hero-split__right {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.vercaa-home .vch-hero-quote {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--vch-radius-xl, 1rem);
  padding: 1.75rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vercaa-home .vch-hero-quote__mark {
  color: rgba(255, 255, 255, 0.25);
  margin-bottom: 0.5rem;
}

.vercaa-home .vch-hero-quote__text {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
  margin: 0 0 1.5rem;
}

@media (min-width: 1280px) { .vercaa-home .vch-hero-quote__text { font-size: 1.4rem; } }

.vercaa-home .vch-hero-quote__author {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.vercaa-home .vch-hero-quote__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vch-purple, #a83fff), var(--vch-orange, #f97316));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vercaa-home .vch-hero-quote__name { color: #fff; font-weight: 700; margin: 0; }
.vercaa-home .vch-hero-quote__role { color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; margin: 0; }

/* Trustpilot badge */
.vercaa-home .vch-hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  padding: 0.75rem 1rem;
  border-radius: var(--vch-radius-lg, 0.75rem);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  width: fit-content;
  transition: background 0.2s ease;
}
.vercaa-home .vch-hero-trust:hover { background: rgba(255, 255, 255, 0.14); }

.vercaa-home .vch-hero-trust__stars { color: #00b67a; font-size: 1.25rem; letter-spacing: 2px; }
.vercaa-home .vch-hero-trust__meta { color: rgba(255, 255, 255, 0.85); font-size: 0.875rem; }
.vercaa-home .vch-hero-trust__meta strong { color: #fff; }

/* ── Diagonal bottom cut into the next (white) section ── */
.vercaa-home .vch-hero-split__cut {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 5vw;
  max-height: 90px;
  background: var(--vch-white, #fff);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 2;
}

/* Hero animated background */
.vercaa-home .vch-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Fluid gradient blobs */
.vercaa-home .vch-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px);
}

.vercaa-home .vch-blob--purple {
  background: radial-gradient(ellipse at center,
    rgba(168, 63, 255, 0.12) 0%,
    rgba(168, 63, 255, 0.08) 30%,
    rgba(249, 115, 22, 0.06) 60%,
    transparent 100%);
  width: 24rem;
  height: 24rem;
  top: 25%;
  left: 25%;
  filter: blur(40px);
  animation: vch-fluid-flow 20s infinite ease-in-out;
}

.vercaa-home .vch-blob--orange {
  background: radial-gradient(ellipse at center,
    rgba(249, 115, 22, 0.15) 0%,
    rgba(249, 115, 22, 0.1) 25%,
    rgba(16, 185, 129, 0.08) 50%,
    transparent 100%);
  width: 20rem;
  height: 20rem;
  top: 33%;
  right: 25%;
  filter: blur(35px);
  animation: vch-fluid-flow-reverse 18s infinite ease-in-out;
}

.vercaa-home .vch-blob--green {
  background: radial-gradient(ellipse at center,
    rgba(16, 185, 129, 0.12) 0%,
    rgba(16, 185, 129, 0.08) 30%,
    rgba(168, 63, 255, 0.06) 60%,
    transparent 100%);
  width: 18rem;
  height: 18rem;
  bottom: 25%;
  left: 33%;
  filter: blur(30px);
  animation: vch-morphing-blob 22s infinite ease-in-out;
}

.vercaa-home .vch-blob--conic {
  background: conic-gradient(from 0deg,
    rgba(168, 63, 255, 0.08),
    rgba(249, 115, 22, 0.08),
    rgba(16, 185, 129, 0.08),
    rgba(168, 63, 255, 0.08));
  width: 16rem;
  height: 16rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: blur(25px);
  border-radius: 50%;
  animation: vch-fluid-drift 25s infinite ease-in-out;
}

.vercaa-home .vch-blob--organic-1 {
  background: linear-gradient(45deg,
    rgba(249, 115, 22, 0.06) 0%,
    rgba(168, 63, 255, 0.04) 50%,
    transparent 100%);
  width: 12rem;
  height: 12rem;
  top: 16.67%;
  right: 33%;
  filter: blur(20px);
  border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  animation: vch-fluid-flow 20s infinite ease-in-out;
}

.vercaa-home .vch-blob--organic-2 {
  background: linear-gradient(135deg,
    rgba(16, 185, 129, 0.08) 0%,
    rgba(249, 115, 22, 0.05) 50%,
    transparent 100%);
  width: 14rem;
  height: 14rem;
  bottom: 33%;
  right: 25%;
  filter: blur(28px);
  border-radius: 50% 60% 30% 60%/60% 40% 60% 30%;
  animation: vch-morphing-blob 22s infinite ease-in-out;
}

/* Ambient light layer */
.vercaa-home .vch-ambient-light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 100% at 25% 25%, rgba(168,63,255,0.02) 0%, transparent 50%),
    radial-gradient(ellipse 80% 80% at 75% 40%, rgba(249,115,22,0.025) 0%, transparent 50%),
    radial-gradient(ellipse 120% 120% at 50% 80%, rgba(16,185,129,0.02) 0%, transparent 50%);
}

/* Mesh overlay */
.vercaa-home .vch-mesh-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(168,63,255,0.3) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(249,115,22,0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(16,185,129,0.3) 0%, transparent 50%);
  background-size: 400px 400px, 300px 300px, 500px 500px;
  background-position: 0 0, 100px 100px, 200px 50px;
  filter: blur(1px);
}

/* --------------------------------------------------------------------------
   11. Brand Features Section (Vercaa Definition)
   -------------------------------------------------------------------------- */
.vercaa-home .vch-brand {
  width: 100%;
  padding: 4rem 1.5rem;
  background: linear-gradient(to bottom, var(--vch-white), rgba(249,250,251,0.1), var(--vch-white));
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .vercaa-home .vch-brand { padding: 6rem 1.5rem; }
}

/* Ambient blobs for brand section */
.vercaa-home .vch-brand-blob {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  filter: blur(64px);
}

.vercaa-home .vch-brand-blob--purple {
  top: -6rem;
  left: -6rem;
  background: linear-gradient(to bottom right, rgba(168,63,255,0.05), rgba(147,51,234,0.05));
  animation: vch-pulse 4s infinite;
}

.vercaa-home .vch-brand-blob--mixed {
  top: 50%;
  right: -6rem;
  background: linear-gradient(to bottom right, rgba(249,115,22,0.05), rgba(34,197,94,0.05));
  animation: vch-pulse 4s infinite 1s;
}

.vercaa-home .vch-brand-blob--green {
  bottom: -6rem;
  left: 33%;
  background: linear-gradient(to bottom right, rgba(34,197,94,0.05), rgba(168,63,255,0.05));
  animation: vch-pulse 4s infinite 2s;
}

/* Brand name typography */
.vercaa-home .vch-brand-name {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  user-select: none;
}

@media (min-width: 640px) {
  .vercaa-home .vch-brand-name { font-size: 3rem; }
}
@media (min-width: 768px) {
  .vercaa-home .vch-brand-name { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
  .vercaa-home .vch-brand-name { font-size: 4.5rem; }
}
@media (min-width: 1280px) {
  .vercaa-home .vch-brand-name { font-size: 6rem; }
}

.vercaa-home .vch-brand-letter {
  transition: color 200ms ease-in-out;
  color: #030213;
}

/* Definition line */
.vercaa-home .vch-brand-def {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.625;
  color: rgba(0, 0, 0, 0.8);
}

@media (min-width: 640px) {
  .vercaa-home .vch-brand-def { font-size: 1.125rem; }
}
@media (min-width: 768px) {
  .vercaa-home .vch-brand-def { font-size: 1.25rem; }
}
@media (min-width: 1024px) {
  .vercaa-home .vch-brand-def { font-size: 1.5rem; }
}

.vercaa-home .vch-brand-word {
  cursor: pointer;
  font-weight: 500;
  transition: color 200ms var(--vch-ease);
}

.vercaa-home .vch-brand-word:hover,
.vercaa-home .vch-brand-word--active-purple { color: var(--vch-purple); }
.vercaa-home .vch-brand-word--active-orange { color: var(--vch-orange); }
.vercaa-home .vch-brand-word--active-green { color: var(--vch-green); }

.vercaa-home .vch-brand-word strong {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. Pricing Section
   -------------------------------------------------------------------------- */
.vercaa-home .vch-pricing {
  max-width: 80rem;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.vercaa-home .vch-pricing__header {
  text-align: center;
  margin-bottom: 3rem;
}

.vercaa-home .vch-pricing__title {
  font-size: 3rem;
  color: var(--vch-gray-900);
  margin-bottom: 1.5rem;
}

.vercaa-home .vch-pricing__subtitle {
  font-size: 1.25rem;
  color: var(--vch-gray-600);
  max-width: 48rem;
  margin: 0 auto;
}

/* Pricing container */
.vercaa-home .vch-pricing-box {
  background: linear-gradient(to bottom right, var(--vch-white), rgba(249,250,251,0.5), var(--vch-white));
  border: 1px solid rgba(229,231,235,0.5);
  border-radius: var(--vch-radius-3xl);
  padding: 1.5rem;
  box-shadow: var(--vch-shadow-2xl);
  position: relative;
  overflow: hidden;
}

/* Dot pattern bg */
.vercaa-home .vch-pricing-box__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: radial-gradient(circle at 25px 25px, rgba(99,102,241,0.3) 2px, transparent 0);
  background-size: 50px 50px;
}

/* Pricing dashboard header */
.vercaa-home .vch-pricing-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

/* Hosting type cards */
.vercaa-home .vch-hosting-card {
  background: var(--vch-white);
  border: 1px solid var(--vch-gray-200);
  border-radius: var(--vch-radius-xl);
  padding: 1rem;
  cursor: pointer;
  transition: all 200ms var(--vch-ease);
}

.vercaa-home .vch-hosting-card:hover {
  box-shadow: var(--vch-shadow-md);
  transform: scale(1.02);
}

.vercaa-home .vch-hosting-card:active {
  transform: scale(0.98);
}

.vercaa-home .vch-hosting-card--active-purple {
  border-color: var(--vch-purple-200);
  background: rgba(250, 245, 255, 0.3);
  box-shadow: var(--vch-shadow-lg);
}

.vercaa-home .vch-hosting-card--active-green {
  border-color: var(--vch-green-200);
  background: rgba(240, 253, 244, 0.3);
  box-shadow: var(--vch-shadow-lg);
}

.vercaa-home .vch-hosting-card--active-orange {
  border-color: var(--vch-orange-200);
  background: rgba(255, 247, 237, 0.3);
  box-shadow: var(--vch-shadow-lg);
}

.vercaa-home .vch-hosting-card--active-blue {
  border-color: rgba(191, 219, 254, 1);
  background: rgba(239, 246, 255, 0.3);
  box-shadow: var(--vch-shadow-lg);
}

/* Hosting card icon */
.vercaa-home .vch-hosting-icon {
  padding: 0.375rem;
  border-radius: var(--vch-radius-lg);
}

.vercaa-home .vch-hosting-icon--purple { background: rgba(243, 232, 255, 1); color: var(--vch-purple-dark); }
.vercaa-home .vch-hosting-icon--green { background: rgba(220, 252, 231, 1); color: var(--vch-green); }
.vercaa-home .vch-hosting-icon--orange { background: rgba(255, 237, 213, 1); color: var(--vch-orange); }
.vercaa-home .vch-hosting-icon--blue { background: rgba(219, 234, 254, 1); color: var(--vch-blue-600); }
.vercaa-home .vch-hosting-icon--gray { background: var(--vch-gray-100); color: var(--vch-gray-600); }

.vercaa-home .vch-hosting-price-box {
  text-align: center;
  padding: 0.5rem;
  background: var(--vch-gray-50);
  border-radius: var(--vch-radius-lg);
}

/* Configuration panel */
.vercaa-home .vch-config-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: var(--vch-radius-2xl);
  padding: 1.25rem;
  box-shadow: var(--vch-shadow-lg);
  height: 100%;
}

/* Resource monitor */
.vercaa-home .vch-resource-monitor {
  padding: 0.75rem;
  background: rgba(249, 250, 251, 0.5);
  border-radius: var(--vch-radius-xl);
  border: 1px solid rgba(229, 231, 235, 0.5);
  margin-bottom: 1rem;
}

/* Resource dots */
.vercaa-home .vch-resource-dots {
  display: flex;
  gap: 0.25rem;
}

.vercaa-home .vch-resource-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--vch-radius-full);
  transition: all var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-resource-dot--active {
  background: linear-gradient(to bottom right, var(--vch-blue-400), var(--vch-blue-600));
}

.vercaa-home .vch-resource-dot--inactive {
  background: var(--vch-gray-200);
}

/* Resource bar */
.vercaa-home .vch-resource-bar {
  height: 0.375rem;
  background: var(--vch-gray-200);
  border-radius: var(--vch-radius-full);
  overflow: hidden;
}

.vercaa-home .vch-resource-bar__fill {
  height: 100%;
  border-radius: var(--vch-radius-full);
  transition: width 1000ms ease-out;
}

/* Per-day stats grid */
.vercaa-home .vch-perday-stat {
  text-align: center;
  padding: 0.75rem;
  border-radius: var(--vch-radius-lg);
  border: 1px solid;
}

.vercaa-home .vch-perday-stat--purple {
  background: var(--vch-purple-50);
  border-color: var(--vch-purple-200);
}

.vercaa-home .vch-perday-stat--blue {
  background: rgba(239, 246, 255, 1);
  border-color: rgba(191, 219, 254, 1);
}

.vercaa-home .vch-perday-stat--gray {
  background: var(--vch-gray-50);
  border-color: var(--vch-gray-200);
}

/* Template card in perday */
.vercaa-home .vch-template-card {
  padding: 1rem;
  border-radius: var(--vch-radius-xl);
  border: 2px solid;
  box-shadow: var(--vch-shadow-lg);
  position: relative;
}

.vercaa-home .vch-template-thumbnail {
  position: relative;
  height: 4rem;
  margin-bottom: 0.75rem;
  border-radius: var(--vch-radius-lg);
  overflow: hidden;
}

/* Template navigation buttons */
.vercaa-home .vch-template-nav {
  padding: 0.625rem;
  background: var(--vch-white);
  border: 1px solid var(--vch-gray-200);
  border-radius: var(--vch-radius-xl);
  transition: all 200ms var(--vch-ease);
  cursor: pointer;
  flex-shrink: 0;
}

.vercaa-home .vch-template-nav:hover {
  border-color: var(--vch-gray-300);
  box-shadow: var(--vch-shadow-md);
}

/* AI Recommendation panel */
.vercaa-home .vch-ai-panel {
  background: linear-gradient(to bottom right, rgba(238,242,255,1), rgba(250,245,255,1), rgba(239,246,255,1));
  border: 1px solid rgba(199,210,254,1);
  border-radius: var(--vch-radius-2xl);
  padding: 1rem;
  box-shadow: var(--vch-shadow-lg);
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}

.vercaa-home .vch-ai-panel__bg {
  position: absolute;
  inset: 0;
  opacity: 0.05;
}

.vercaa-home .vch-ai-panel__bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, var(--vch-indigo-600), var(--vch-purple));
}

.vercaa-home .vch-ai-panel__bg-stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px);
}

/* AI type picker buttons */
.vercaa-home .vch-ai-option {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem;
  border-radius: var(--vch-radius-lg);
  border: 1px solid var(--vch-gray-200);
  background: var(--vch-white);
  color: var(--vch-gray-700);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all var(--vch-duration-fast) var(--vch-ease);
  text-align: left;
}

.vercaa-home .vch-ai-option:hover {
  border-color: rgba(199,210,254,1);
}

.vercaa-home .vch-ai-option--active {
  background: rgba(224,231,255,1);
  border-color: rgba(165,180,252,1);
  color: var(--vch-indigo-900);
}

/* Summary panel (right side of pricing) */
.vercaa-home .vch-summary-panel {
  background: linear-gradient(to bottom right, var(--vch-white), var(--vch-gray-50));
  border: 1px solid var(--vch-gray-200);
  border-radius: var(--vch-radius-2xl);
  padding: 1.5rem;
  box-shadow: var(--vch-shadow-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Progress indicator (step dots) */
.vercaa-home .vch-progress-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.vercaa-home .vch-progress-step {
  height: 0.125rem;
  width: 2rem;
  border-radius: var(--vch-radius-full);
  background: var(--vch-gray-300);
  transition: background var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-progress-step--active {
  background: var(--vch-green);
}

/* Spec list */
.vercaa-home .vch-spec-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vercaa-home .vch-spec-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--vch-gray-700);
}

.vercaa-home .vch-spec-check {
  width: 1rem;
  height: 1rem;
  color: var(--vch-green);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   13. Testimonials Section
   -------------------------------------------------------------------------- */
.vercaa-home .vch-testimonials {
  padding: 4rem 1.5rem;
}

@media (min-width: 1024px) {
  .vercaa-home .vch-testimonials { padding: 6rem 1.5rem; }
}

.vercaa-home .vch-testimonial-card {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--vch-radius-2xl);
  background: var(--vch-white);
  border: 1px solid var(--vch-gray-200);
  box-shadow: var(--vch-shadow-sm);
  transition: all var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-testimonial-card:hover {
  box-shadow: var(--vch-shadow-lg);
  transform: translateY(-2px);
}

/* Star rating */
.vercaa-home .vch-stars {
  display: flex;
  gap: 0.125rem;
}

.vercaa-home .vch-star {
  color: #eab308;
  width: 1rem;
  height: 1rem;
}

.vercaa-home .vch-star--filled {
  fill: #eab308;
}

/* Verified badge */
.vercaa-home .vch-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--vch-green);
  font-weight: 500;
}

/* Avatar */
.vercaa-home .vch-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--vch-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--vch-white);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.vercaa-home .vch-footer {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.vercaa-home .vch-footer__inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 2rem;
}

.vercaa-home .vch-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .vercaa-home .vch-footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 3rem;
  }
}

.vercaa-home .vch-footer-heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vch-gray-900);
  margin-bottom: 1rem;
}

.vercaa-home .vch-footer-link {
  display: block;
  font-size: 0.875rem;
  color: var(--vch-gray-600);
  padding: 0.25rem 0;
  transition: color var(--vch-duration-fast) var(--vch-ease);
}

.vercaa-home .vch-footer-link:hover {
  color: var(--vch-gray-900);
}

/* Newsletter input */
.vercaa-home .vch-newsletter {
  display: flex;
  gap: 0.5rem;
}

.vercaa-home .vch-newsletter__input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--vch-gray-300);
  border-radius: var(--vch-radius-lg);
  background: var(--vch-white);
  color: var(--vch-gray-900);
  outline: none;
  transition: border-color var(--vch-duration-fast) var(--vch-ease);
}

.vercaa-home .vch-newsletter__input:focus {
  border-color: var(--vch-purple);
  box-shadow: 0 0 0 3px rgba(168, 63, 255, 0.1);
}

.vercaa-home .vch-newsletter__input::placeholder {
  color: var(--vch-gray-400);
}

/* Social icons */
.vercaa-home .vch-social-icons {
  display: flex;
  gap: 0.75rem;
}

.vercaa-home .vch-social-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vch-radius-full);
  background: var(--vch-gray-100);
  color: var(--vch-gray-600);
  transition: all var(--vch-duration-fast) var(--vch-ease);
}

.vercaa-home .vch-social-icon:hover {
  background: var(--vch-gray-200);
  color: var(--vch-gray-900);
}

/* Footer bottom bar */
.vercaa-home .vch-footer-bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--vch-gray-200);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 768px) {
  .vercaa-home .vch-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.vercaa-home .vch-footer-copyright {
  font-size: 0.75rem;
  color: var(--vch-gray-500);
}

/* --------------------------------------------------------------------------
   15. Mobile Menu
   -------------------------------------------------------------------------- */
.vercaa-home .vch-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--vch-radius-lg);
  color: var(--vch-gray-700);
  cursor: pointer;
  transition: background var(--vch-duration-fast) var(--vch-ease);
}

@media (min-width: 1024px) {
  .vercaa-home .vch-mobile-toggle { display: none; }
}

.vercaa-home .vch-mobile-toggle:hover {
  background: var(--vch-gray-100);
}

/* Hamburger animation */
.vercaa-home .vch-mobile-toggle.vch-mobile-toggle--open .vch-hamburger-line--1 {
  transform: rotate(45deg) translateY(7px);
}

.vercaa-home .vch-mobile-toggle.vch-mobile-toggle--open .vch-hamburger-line--2 {
  opacity: 0;
}

.vercaa-home .vch-mobile-toggle.vch-mobile-toggle--open .vch-hamburger-line--3 {
  transform: rotate(-45deg) translateY(-7px);
}

.vercaa-home .vch-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: all var(--vch-duration) var(--vch-ease);
  background: var(--vch-white);
  transform: translateY(-100%);
}

.vercaa-home .vch-mobile-overlay--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vercaa-home .vch-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--vch-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: all var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-mobile-menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Spacer for header */
.vercaa-home .vch-mobile-menu-spacer {
  height: 4rem;
}

/* Logo in mobile menu */
.vercaa-home .vch-mobile-menu-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
}

.vercaa-home .vch-mobile-menu-logo .vch-logo-dot {
  width: 0.75rem;
  height: 0.75rem;
  animation: vch-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.vercaa-home .vch-mobile-menu-logo .vch-logo-text {
  font-size: 1.5rem;
  font-weight: 700;
}

.vercaa-home .vch-mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
  margin-bottom: 3rem;
}

.vercaa-home .vch-mobile-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--vch-gray-700);
  border: 1px solid transparent;
  border-radius: 1rem;
  text-decoration: none;
  transition: all var(--vch-duration-fast) var(--vch-ease);
}

.vercaa-home .vch-mobile-nav-item--hosting:hover {
  color: #a83fff;
  background: rgba(168,63,255,0.05);
  border-color: rgba(168,63,255,0.2);
}

.vercaa-home .vch-mobile-nav-item--domains:hover {
  color: #f59e0b;
  background: rgba(245,158,11,0.05);
  border-color: rgba(245,158,11,0.2);
}

.vercaa-home .vch-mobile-nav-item--security:hover {
  color: #10b981;
  background: rgba(16,185,129,0.05);
  border-color: rgba(16,185,129,0.2);
}

.vercaa-home .vch-mobile-nav-item--support:hover {
  color: #663399;
  background: rgba(102,51,153,0.05);
  border-color: rgba(102,51,153,0.2);
}

/* Mobile sub-menus (accordion) */
.vercaa-home .vch-mobile-nav-group {
  width: 100%;
}

.vercaa-home .vch-mobile-nav-item[data-mobile-expand] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.vercaa-home .vch-mobile-chevron {
  transition: transform 0.3s ease;
}

.vercaa-home .vch-mobile-nav-item.vch-mobile-nav-expanded .vch-mobile-chevron {
  transform: rotate(180deg);
}

.vercaa-home .vch-mobile-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.vercaa-home .vch-mobile-sub.vch-mobile-sub--open {
  max-height: 500px;
}

.vercaa-home .vch-mobile-sub-item {
  display: block;
  padding: 0.625rem 1.5rem 0.625rem 2.5rem;
  font-size: 0.875rem;
  color: #717182;
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 0.75rem;
}

.vercaa-home .vch-mobile-sub-item:hover {
  color: var(--vch-purple);
  background: rgba(168,63,255,0.05);
}

/* Color-specific hover for domains sub-items */
.vercaa-home .vch-mobile-nav-item--domains + .vch-mobile-sub .vch-mobile-sub-item:hover {
  color: #f97316;
  background: rgba(249,115,22,0.05);
}

.vercaa-home .vch-mobile-nav-item--security + .vch-mobile-sub .vch-mobile-sub-item:hover {
  color: #10b981;
  background: rgba(16,185,129,0.05);
}

.vercaa-home .vch-mobile-login {
  width: 100%;
  max-width: 24rem;
  margin-top: auto;
  padding: 1rem;
  background: #a83fff;
  color: var(--vch-white);
  font-size: 1.125rem;
  font-weight: 500;
  border: none;
  border-radius: 1rem;
  text-decoration: none;
  transition: all var(--vch-duration-fast) var(--vch-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: var(--vch-shadow-lg);
}

.vercaa-home .vch-mobile-login:hover {
  background: #663399;
  color: var(--vch-white);
  text-decoration: none;
}

.vercaa-home .vch-mobile-actions {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
  margin-top: 1rem;
}

.vercaa-home .vch-mobile-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #663399;
  border: 1px solid rgba(102,51,153,0.2);
  border-radius: 0.75rem;
  text-decoration: none;
  transition: all var(--vch-duration-fast) var(--vch-ease);
}

.vercaa-home .vch-mobile-action:hover {
  background: rgba(102,51,153,0.05);
  color: #663399;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   16. Switch (toggle)
   -------------------------------------------------------------------------- */
.vercaa-home .vch-switch {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  background: var(--vch-gray-300);
  border-radius: var(--vch-radius-full);
  cursor: pointer;
  transition: background var(--vch-duration-fast) var(--vch-ease);
  border: none;
  flex-shrink: 0;
}

.vercaa-home .vch-switch--on {
  background: var(--vch-purple);
}

.vercaa-home .vch-switch__thumb {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--vch-white);
  border-radius: var(--vch-radius-full);
  box-shadow: var(--vch-shadow-sm);
  transition: transform var(--vch-duration-fast) var(--vch-ease);
}

.vercaa-home .vch-switch--on .vch-switch__thumb {
  transform: translateX(1.25rem);
}

/* --------------------------------------------------------------------------
   17. Event Effects (dashboard marketing events)
   -------------------------------------------------------------------------- */
.vercaa-home .vch-event-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--vch-radius-3xl);
  transition: all 1000ms var(--vch-ease);
}

.vercaa-home .vch-event-overlay--boost {
  background: linear-gradient(to bottom right, rgba(34,197,94,0.08), rgba(16,185,129,0.04));
}

.vercaa-home .vch-event-overlay--crisis {
  background: linear-gradient(to bottom right, rgba(239,68,68,0.08), rgba(249,115,22,0.04));
}

.vercaa-home .vch-event-ping {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--vch-radius-full);
  animation: vch-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.vercaa-home .vch-event-ping--positive {
  background: var(--vch-green);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
}

.vercaa-home .vch-event-ping--negative {
  background: var(--vch-red-500);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

/* Marketing event status bar */
.vercaa-home .vch-event-status {
  font-size: 0.75rem;
  text-align: center;
  padding: 0.5rem;
  border-radius: var(--vch-radius-lg);
  transition: all var(--vch-duration) var(--vch-ease);
}

.vercaa-home .vch-event-status--boost {
  color: var(--vch-green);
  background: rgba(34, 197, 94, 0.1);
}

.vercaa-home .vch-event-status--crisis {
  color: var(--vch-red-400);
  background: rgba(239, 68, 68, 0.1);
}

/* System status items */
.vercaa-home .vch-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   18. Spinner / Loading
   -------------------------------------------------------------------------- */
.vercaa-home .vch-spinner {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--vch-white);
  border-top-color: transparent;
  border-radius: var(--vch-radius-full);
  animation: vch-spin 1s linear infinite;
}

/* --------------------------------------------------------------------------
   19. Animations
   -------------------------------------------------------------------------- */

/* Fluid flow (primary gradient movement) */
@keyframes vch-fluid-flow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translate(30px, -20px) scale(1.05);
    opacity: 1;
  }
  50% {
    transform: translate(-20px, 30px) scale(0.95);
    opacity: 0.7;
  }
  75% {
    transform: translate(20px, 20px) scale(1.02);
    opacity: 0.9;
  }
}

@keyframes vch-fluid-flow-reverse {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translate(-25px, 15px) scale(1.03);
    opacity: 0.9;
  }
  50% {
    transform: translate(15px, -25px) scale(0.97);
    opacity: 0.7;
  }
  75% {
    transform: translate(-15px, -15px) scale(1.05);
    opacity: 1;
  }
}

/* Morphing blob */
@keyframes vch-morphing-blob {
  0%, 100% {
    border-radius: 50%;
    transform: translate(0, 0) scale(1);
  }
  25% {
    border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
    transform: translate(20px, -15px) scale(1.04);
  }
  50% {
    border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%;
    transform: translate(-15px, 20px) scale(0.96);
  }
  75% {
    border-radius: 50% 50% 40% 60% / 40% 50% 50% 60%;
    transform: translate(15px, 10px) scale(1.02);
  }
}

/* Fluid drift (slower, wider movement) */
@keyframes vch-fluid-drift {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(-50%, -50%) rotate(120deg) scale(1.05);
  }
  66% {
    transform: translate(-50%, -50%) rotate(240deg) scale(0.95);
  }
}

/* Glass shimmer */
@keyframes vch-glass-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Glass reflection */
@keyframes vch-glass-reflection {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

/* Pulse */
@keyframes vch-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Ping */
@keyframes vch-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Bounce */
@keyframes vch-bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Spin */
@keyframes vch-spin {
  to { transform: rotate(360deg); }
}

/* Float (for particles) */
@keyframes vch-float {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.2;
  }
  25% {
    transform: translateY(-20px) translateX(10px);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-10px) translateX(-10px);
    opacity: 0.2;
  }
  75% {
    transform: translateY(-30px) translateX(5px);
    opacity: 0.3;
  }
}

/* Fade in up */
@keyframes vch-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in */
@keyframes vch-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation utility classes */
.vercaa-home .vch-animate-pulse { animation: vch-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.vercaa-home .vch-animate-ping { animation: vch-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.vercaa-home .vch-animate-bounce { animation: vch-bounce 1s infinite; }
.vercaa-home .vch-animate-spin { animation: vch-spin 1s linear infinite; }
.vercaa-home .vch-animate-float { animation: vch-float 12.944s infinite ease-in-out; /* PHI * 8 */ }

.vercaa-home .vch-animate-fade-up {
  animation: vch-fade-in-up 0.8s ease-out both;
}

.vercaa-home .vch-animate-scale-in {
  animation: vch-scale-in 0.6s ease-out both;
}

/* Animation delays */
.vercaa-home .vch-delay-100 { animation-delay: 100ms; }
.vercaa-home .vch-delay-200 { animation-delay: 200ms; }
.vercaa-home .vch-delay-300 { animation-delay: 300ms; }
.vercaa-home .vch-delay-500 { animation-delay: 500ms; }
.vercaa-home .vch-delay-1000 { animation-delay: 1000ms; }
.vercaa-home .vch-delay-2000 { animation-delay: 2000ms; }

/* Transition helpers */
.vercaa-home .vch-transition { transition: all var(--vch-duration) var(--vch-ease); }
.vercaa-home .vch-transition-fast { transition: all var(--vch-duration-fast) var(--vch-ease); }
.vercaa-home .vch-transition-slow { transition: all var(--vch-duration-slow) var(--vch-ease); }
.vercaa-home .vch-transition-colors { transition: color var(--vch-duration-fast) var(--vch-ease), background-color var(--vch-duration-fast) var(--vch-ease), border-color var(--vch-duration-fast) var(--vch-ease); }

/* --------------------------------------------------------------------------
   20. Miscellaneous Helpers
   -------------------------------------------------------------------------- */

/* Dividers */
.vercaa-home .vch-divider {
  border-top: 1px solid var(--vch-gray-200);
}

.vercaa-home .vch-divider--slate {
  border-top-color: rgba(226, 232, 240, 1);
}

/* Opacity helpers */
.vercaa-home .vch-opacity-0 { opacity: 0; }
.vercaa-home .vch-opacity-50 { opacity: 0.5; }
.vercaa-home .vch-opacity-100 { opacity: 1; }

/* Border helpers */
.vercaa-home .vch-border { border: 1px solid var(--vch-gray-200); }
.vercaa-home .vch-border-t { border-top: 1px solid var(--vch-gray-200); }
.vercaa-home .vch-border-b { border-bottom: 1px solid var(--vch-gray-200); }

/* Spacing helpers */
.vercaa-home .vch-mt-2 { margin-top: 0.5rem; }
.vercaa-home .vch-mt-3 { margin-top: 0.75rem; }
.vercaa-home .vch-mt-4 { margin-top: 1rem; }
.vercaa-home .vch-mt-6 { margin-top: 1.5rem; }
.vercaa-home .vch-mt-8 { margin-top: 2rem; }
.vercaa-home .vch-mb-1 { margin-bottom: 0.25rem; }
.vercaa-home .vch-mb-2 { margin-bottom: 0.5rem; }
.vercaa-home .vch-mb-3 { margin-bottom: 0.75rem; }
.vercaa-home .vch-mb-4 { margin-bottom: 1rem; }
.vercaa-home .vch-mb-6 { margin-bottom: 1.5rem; }
.vercaa-home .vch-mb-8 { margin-bottom: 2rem; }
.vercaa-home .vch-mb-12 { margin-bottom: 3rem; }
.vercaa-home .vch-mb-16 { margin-bottom: 4rem; }
.vercaa-home .vch-p-4 { padding: 1rem; }
.vercaa-home .vch-p-6 { padding: 1.5rem; }
.vercaa-home .vch-p-8 { padding: 2rem; }
.vercaa-home .vch-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.vercaa-home .vch-px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.vercaa-home .vch-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.vercaa-home .vch-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.vercaa-home .vch-pt-4 { padding-top: 1rem; }

/* Color swatch dots for status indicators */
.vercaa-home .vch-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--vch-radius-full);
  flex-shrink: 0;
}

.vercaa-home .vch-dot--sm {
  width: 0.375rem;
  height: 0.375rem;
}

.vercaa-home .vch-dot--lg {
  width: 0.75rem;
  height: 0.75rem;
}

.vercaa-home .vch-dot--green { background-color: var(--vch-green); }
.vercaa-home .vch-dot--blue { background-color: var(--vch-blue-500); }
.vercaa-home .vch-dot--purple { background-color: var(--vch-purple); }
.vercaa-home .vch-dot--orange { background-color: var(--vch-orange); }
.vercaa-home .vch-dot--red { background-color: var(--vch-red-500); }
.vercaa-home .vch-dot--gray { background-color: var(--vch-gray-300); }
.vercaa-home .vch-dot--indigo { background: linear-gradient(to right, var(--vch-indigo-500), var(--vch-purple)); }

/* Icon sizing */
.vercaa-home .vch-icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.vercaa-home .vch-icon--xs { width: 0.625rem; height: 0.625rem; }
.vercaa-home .vch-icon--sm { width: 0.75rem; height: 0.75rem; }
.vercaa-home .vch-icon--md { width: 1.25rem; height: 1.25rem; }
.vercaa-home .vch-icon--lg { width: 1.75rem; height: 1.75rem; }

/* SVG icon coloring — Lucide-style icons */
.vercaa-home .vch-icon-purple { color: var(--vch-purple); }
.vercaa-home .vch-icon-orange { color: var(--vch-orange); }
.vercaa-home .vch-icon-green { color: var(--vch-green); }
.vercaa-home .vch-icon-blue { color: var(--vch-blue-500); }
.vercaa-home .vch-icon-red { color: var(--vch-red-500); }
.vercaa-home .vch-icon-gray { color: var(--vch-gray-400); }

/* Cart badge (header) */
.vercaa-home .vch-cart-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.125rem;
  height: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--vch-white);
  background: var(--vch-orange);
  border-radius: var(--vch-radius-full);
  padding: 0 0.25rem;
}

/* Recommendation result box */
.vercaa-home .vch-recommendation-result {
  padding: 0.75rem;
  background: linear-gradient(to right, var(--vch-green-50), rgba(236,253,245,1));
  border: 1px solid var(--vch-green-200);
  border-radius: var(--vch-radius-xl);
}

/* Backdrop blur utilities */
.vercaa-home .vch-backdrop-blur {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.vercaa-home .vch-backdrop-blur-xl {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.vercaa-home .vch-backdrop-blur-3xl {
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
}

/* Scroll margin for anchored sections */
.vercaa-home [id] {
  scroll-margin-top: 5rem;
}


/* ══════════════════════════════════════════════════════════════════════════
   SECTION: TESTIMONIALS
   ══════════════════════════════════════════════════════════════════════════ */

.vercaa-home .vch-testimonials {
  padding: 6rem 1.5rem;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--vch-white), rgba(248,250,252,0.5), rgba(241,245,249,0.4));
}

.vercaa-home .vch-section-title {
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--vch-slate-900);
  margin-bottom: 1.5rem;
}

.vercaa-home .vch-section-subtitle {
  font-size: 1.25rem;
  color: var(--vch-slate-500);
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* Viewport clips overflow — extra top padding for verified badges */
.vercaa-home .vch-testimonials-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 1rem;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* Infinite scrolling track — 6 cards duplicated via CSS for seamless loop */
.vercaa-home .vch-testimonials-track {
  display: flex;
  gap: 2rem;
  animation: vch-scroll-left 40s linear infinite;
  width: max-content;
}

.vercaa-home .vch-testimonials-track:hover {
  animation-play-state: paused;
}

@keyframes vch-scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Card */
.vercaa-home .vch-tcard {
  flex: 0 0 380px;
  width: 380px;
  padding: 2rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

.vercaa-home .vch-tcard:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  transform: translateY(-8px);
}

/* Verified badge */
.vercaa-home .vch-tcard__verified {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background: #22c55e;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  z-index: 2;
}

.vercaa-home .vch-tcard__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Stars */
.vercaa-home .vch-tcard__stars {
  color: #facc15;
  font-size: 1rem;
  letter-spacing: 0.125rem;
}
.vercaa-home .vch-tcard__stars--lg {
  font-size: 1.25rem;
}

/* Date */
.vercaa-home .vch-tcard__date {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--vch-slate-500);
}

/* Use case tag */
.vercaa-home .vch-tcard__tag {
  display: inline-block;
  width: fit-content;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.375rem;
  background: rgba(241,245,249,1);
  color: var(--vch-slate-700);
  border: 1px solid rgba(226,232,240,0.5);
}

/* Quote */
.vercaa-home .vch-tcard__quote {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vercaa-home .vch-tcard__quote-icon {
  color: rgba(168,63,255,0.3);
}
.vercaa-home .vch-tcard__quote p {
  color: var(--vch-slate-600);
  line-height: 1.625;
  font-size: 0.875rem;
  margin: 0;
}

/* Key Results */
.vercaa-home .vch-tcard__results {
  padding: 0.75rem;
  background: rgba(240,253,244,1);
  border: 1px solid rgba(187,247,208,1);
  border-radius: 0.5rem;
}
.vercaa-home .vch-tcard__results-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #166534;
}
.vercaa-home .vch-tcard__results-text {
  font-size: 0.875rem;
  color: #15803d;
}

/* Author */
.vercaa-home .vch-tcard__author {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vercaa-home .vch-tcard__name {
  font-weight: 500;
  color: var(--vch-slate-900);
  margin: 0;
}
.vercaa-home .vch-tcard__role {
  font-size: 0.875rem;
  color: var(--vch-slate-500);
  margin: 0;
}
.vercaa-home .vch-tcard__company {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--vch-purple);
  margin: 0;
}
.vercaa-home .vch-tcard__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--vch-slate-500);
}

/* Footer / Trustpilot link */
.vercaa-home .vch-tcard__footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.vercaa-home .vch-tcard__tp-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.2s;
  text-decoration: none;
  color: var(--vch-slate-500);
}
.vercaa-home .vch-tcard__tp-link:hover {
  background: rgba(241,245,249,0.5);
  color: var(--vch-slate-900);
}
.vercaa-home .vch-tcard__tp-link span {
  font-size: 0.875rem;
}

/* Bottom CTA */
.vercaa-home .vch-tp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(168,63,255,0.05);
  border: 1px solid rgba(168,63,255,0.2);
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s;
  color: var(--vch-slate-700);
  font-size: 0.875rem;
  font-weight: 500;
}
.vercaa-home .vch-tp-cta:hover {
  background: rgba(168,63,255,0.1);
  color: var(--vch-purple);
}

/* Responsive */
@media (max-width: 768px) {
  .vercaa-home .vch-testimonials { padding: 3rem 1rem; }
  .vercaa-home .vch-section-title { font-size: 1.75rem; }
  .vercaa-home .vch-section-subtitle { font-size: 1rem; }
  .vercaa-home .vch-tcard { flex: 0 0 320px; width: 320px; padding: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION: FOOTER
   ══════════════════════════════════════════════════════════════════════════ */

.vercaa-home .vch-footer {
  position: relative;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.2);
  overflow: hidden;
}

/* Animated background blobs */
.vercaa-home .vch-footer-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.vercaa-home .vch-footer-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}
.vercaa-home .vch-footer-blob--purple {
  top: 25%; left: 25%; width: 24rem; height: 24rem;
  background: radial-gradient(ellipse at center, rgba(168,63,255,0.04) 0%, rgba(168,63,255,0.02) 30%, transparent 70%);
  animation: vch-fluid-flow 20s ease-in-out infinite;
}
.vercaa-home .vch-footer-blob--orange {
  top: 33%; right: 25%; width: 20rem; height: 20rem;
  background: radial-gradient(ellipse at center, rgba(249,115,22,0.05) 0%, rgba(249,115,22,0.03) 25%, transparent 60%);
  filter: blur(35px);
  animation: vch-fluid-flow 20s ease-in-out infinite reverse;
}
.vercaa-home .vch-footer-blob--green {
  bottom: 25%; left: 33%; width: 18rem; height: 18rem;
  background: radial-gradient(ellipse at center, rgba(16,185,129,0.04) 0%, rgba(16,185,129,0.02) 30%, transparent 60%);
  filter: blur(30px);
  animation: vch-morphing-blob 25s ease-in-out infinite;
}
.vercaa-home .vch-footer-grid-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.01;
  background-image:
    linear-gradient(rgba(168,63,255,0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,63,255,0.1) 1px, transparent 1px);
  background-size: 60px 60px;
}

.vercaa-home .vch-footer__inner {
  position: relative;
  z-index: 10;
  padding: 4rem 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
}
@media (min-width: 640px)  { .vercaa-home .vch-footer__inner { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .vercaa-home .vch-footer__inner { padding-left: 4rem; padding-right: 4rem; } }

/* 3-column grid */
.vercaa-home .vch-footer-grid {
  display: grid;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .vercaa-home .vch-footer-grid { grid-template-columns: 4fr 4fr 4fr; }
}

/* Company info */
.vercaa-home .vch-footer__company-name {
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  color: var(--vch-slate-900);
  margin-bottom: 1.5rem;
}
.vercaa-home .vch-footer__info {
  font-size: 0.875rem;
  color: var(--vch-slate-500);
  margin-bottom: 1.5rem;
}
.vercaa-home .vch-footer__info p { margin: 0 0 0.25rem; }
.vercaa-home .vch-footer__legal { margin-top: 1rem; }
.vercaa-home .vch-footer__legal p { margin: 0 0 0.25rem; }
.vercaa-home .vch-footer__phone {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(168,63,255,0.3);
  border-radius: 0.375rem;
  color: var(--vch-slate-900);
  text-decoration: none;
  transition: background 0.2s;
}
.vercaa-home .vch-footer__phone:hover { background: rgba(168,63,255,0.05); }

/* Links columns */
.vercaa-home .vch-footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.vercaa-home .vch-footer-links__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  .vercaa-home .vch-footer-links__list { padding-top: 3.25rem; }
}
.vercaa-home .vch-footer-links__list a {
  font-size: 0.875rem;
  color: var(--vch-slate-500);
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
  padding: 0.125rem 0.25rem;
  border-radius: 0.375rem;
}
.vercaa-home .vch-footer-links__list a:hover { color: var(--vch-slate-900); }

/* Newsletter */
.vercaa-home .vch-footer-newsletter {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 1rem;
  padding: 1.5rem;
}
.vercaa-home .vch-footer-newsletter__icon {
  padding: 0.5rem;
  background: #000;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vercaa-home .vch-footer-newsletter__form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.vercaa-home .vch-footer-newsletter__input {
  flex: 1;
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 0.375rem;
  background: var(--vch-white);
  color: var(--vch-slate-900);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.vercaa-home .vch-footer-newsletter__input:focus {
  border-color: rgba(168,63,255,0.5);
  box-shadow: 0 0 0 3px rgba(168,63,255,0.1);
}
.vercaa-home .vch-footer-newsletter__input::placeholder { color: var(--vch-slate-400); }
.vercaa-home .vch-footer-newsletter__btn {
  height: 2.25rem;
  padding: 0 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.2s;
}
.vercaa-home .vch-footer-newsletter__btn:hover { background: rgba(0,0,0,0.85); }
.vercaa-home .vch-footer-newsletter__trust {
  font-size: 0.75rem;
  color: var(--vch-slate-500);
  text-align: center;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Separator */
.vercaa-home .vch-footer-separator {
  height: 1px;
  margin: 2rem 0;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.08), transparent);
}

/* Bottom bar */
.vercaa-home .vch-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 768px) {
  .vercaa-home .vch-footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}
.vercaa-home .vch-footer-bottom p { margin: 0; }

/* Social icons */
.vercaa-home .vch-footer-socials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.vercaa-home .vch-footer-social {
  position: relative;
  padding: 0.5rem;
  color: var(--vch-slate-500);
  border-radius: 0.5rem;
  transition: color 0.2s;
  text-decoration: none;
}
.vercaa-home .vch-footer-social:hover { color: var(--vch-slate-900); }
.vercaa-home .vch-footer-social::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  background: var(--social-color, transparent);
  opacity: 0;
  transition: opacity 0.2s;
}
.vercaa-home .vch-footer-social:hover::after { opacity: 0.1; }
.vercaa-home .vch-footer-social svg { position: relative; z-index: 1; }

/* Responsive */
@media (max-width: 768px) {
  .vercaa-home .vch-footer__inner { padding: 2rem 1rem; }
  .vercaa-home .vch-footer__company-name { font-size: 1.125rem; }
}

/* ==========================================================================
   SECTION 3B: REAL SHARED HOSTING PLANS (DB-backed)
   ========================================================================== */
.vercaa-home .vch-plans {
  padding: 6rem 1.5rem;
  background: linear-gradient(180deg, #fff 0%, var(--vch-purple-50) 100%);
}
.vercaa-home .vch-plans .vch-container { max-width: 1200px; margin: 0 auto; }

.vercaa-home .vch-plans__grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

.vercaa-home .vch-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--vch-slate-200, #e2e8f0);
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vercaa-home .vch-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(124,58,237,0.18);
  border-color: var(--vch-purple-light);
}

.vercaa-home .vch-plan-card--featured {
  border: 2px solid var(--vch-purple-dark);
  box-shadow: 0 10px 30px -8px rgba(124,58,237,0.25);
  transform: scale(1.02);
}

.vercaa-home .vch-plan-card__badge {
  position: absolute;
  top: -0.875rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vch-purple-dark);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.vercaa-home .vch-plan-card__name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--vch-slate-900, #0f172a);
  margin: 0 0 1rem;
  text-align: center;
}

.vercaa-home .vch-plan-card__price {
  text-align: center;
  font-size: 3rem;
  font-weight: 800;
  color: var(--vch-purple-dark);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.vercaa-home .vch-plan-card__price sup {
  font-size: 1.125rem;
  font-weight: 600;
  vertical-align: super;
  margin-right: 0.25rem;
}
.vercaa-home .vch-plan-card__price small {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--vch-slate-500, #64748b);
}

.vercaa-home .vch-plan-card__alt {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--vch-slate-600, #475569);
  margin-bottom: 1.5rem;
}
.vercaa-home .vch-plan-card__alt strong { color: var(--vch-slate-900, #0f172a); }

.vercaa-home .vch-plan-card__features {
  list-style: none;
  padding: 1.25rem 0;
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--vch-slate-100, #f1f5f9);
  flex: 1;
}
.vercaa-home .vch-plan-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.4375rem 0;
  font-size: 0.9375rem;
  color: var(--vch-slate-700, #334155);
}
.vercaa-home .vch-plan-card__features svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--vch-purple-dark);
}

.vercaa-home .vch-plan-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: var(--vch-purple-dark);
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease;
}
.vercaa-home .vch-plan-card__cta:hover {
  background: #6d28d9;
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 640px) {
  .vercaa-home .vch-plans { padding: 4rem 1rem; }
  .vercaa-home .vch-plan-card--featured { transform: none; }
  .vercaa-home .vch-plan-card { padding: 2rem 1.5rem; }
  .vercaa-home .vch-plan-card__price { font-size: 2.5rem; }
}


/* ==== PAGE: knowledgebasearticle.css ==== */


/* ==== PAGE: knowledgebasecat.css ==== */


/* ==== PAGE: monitoring.css ==== */


/* ==== PAGE: nord-vpn.css ==== */


/* ==== PAGE: ox-app-suite.css ==== */


/* ==== PAGE: password-reset-change-prompt.css ==== */


/* ==== PAGE: password-reset-container.css ==== */


/* ==== PAGE: password-reset-email-prompt.css ==== */


/* ==== PAGE: password-reset-security-prompt.css ==== */


/* ==== PAGE: sitelock.css ==== */


/* ==== PAGE: ssl-certificates.css ==== */


/* ==== PAGE: supportticketslist.css ==== */
/*
 * Vercaa — supportticketslist.css
 * ===============================
 * Design: vercaa-ui-design/client-area-support
 */

#main-body .vc-tk-list { display: block; width: 100%; }

/* Page head */
#main-body .vc-tk-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
#main-body .vc-tk-title {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--vc-text-primary);
}
.vc-tk-sub {
    margin: 0.25rem 0 0;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}
#main-body a.vc-tk-new-btn {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: var(--vc-accent-orange);
    color: #fff;
    font-size: var(--vc-text-sm);
    font-weight: 700;
    border-radius: var(--vc-radius-full);
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(255, 92, 0, 0.2);
    transition: background 200ms, transform 200ms;
}
#main-body a.vc-tk-new-btn:hover {
    background: #E85200;
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Grid */
.vc-tk-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
}
@media (min-width: 1024px) {
    .vc-tk-grid { grid-template-columns: 16rem 1fr; }
}
.vc-tk-col-left,
.vc-tk-col-right { min-width: 0; }
.vc-tk-col-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Left card */
.vc-tk-card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 0.75rem;
    box-shadow: var(--vc-shadow-sm);
    padding: 0.5rem;
}
.vc-tk-eyebrow {
    margin: 0;
    padding: 0.75rem 1rem 0.25rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vc-text-muted);
}
.vc-tk-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
}
#main-body a.vc-tk-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: var(--vc-radius-md);
    color: var(--vc-text-secondary);
    font-size: var(--vc-text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background 150ms, color 150ms;
}
#main-body a.vc-tk-nav-item:hover {
    background: var(--vc-bg-elevated);
    color: var(--vc-text-primary);
    text-decoration: none;
}
.vc-tk-nav-item .material-symbols-outlined {
    color: var(--vc-primary);
    opacity: 0.6;
    font-size: 1.25rem !important;
}
#main-body a.vc-tk-nav-item.is-active {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    font-weight: 600;
}
.vc-tk-nav-item.is-active .material-symbols-outlined { opacity: 1; }

.vc-tk-help-card {
    padding: 1.25rem;
    background: var(--vc-primary-tint);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 0.75rem;
}
.vc-tk-help-eyebrow {
    margin: 0 0 0.5rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-primary);
}
.vc-tk-help-text {
    margin: 0 0 0.75rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-secondary);
    line-height: 1.5;
}
#main-body a.vc-tk-help-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--vc-primary);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    text-decoration: none;
}
#main-body a.vc-tk-help-link:hover { gap: 0.5rem; text-decoration: none; }
.vc-tk-help-link .material-symbols-outlined {
    font-size: var(--vc-text-base) !important;
    transition: transform 150ms;
}

/* Right panel */
.vc-tk-panel {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 0.75rem;
    box-shadow: var(--vc-shadow-sm);
    overflow: hidden;
}
.vc-tk-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--vc-border-subtle);
    background: rgba(248, 250, 252, 0.5);
    flex-wrap: wrap;
}
.vc-tk-filter { display: flex; align-items: center; gap: 0.5rem; }
.vc-tk-showing { font-size: var(--vc-text-sm); color: var(--vc-text-muted); }
.vc-tk-filter-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-md);
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-text-primary);
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
}
.vc-tk-count { font-size: var(--vc-text-sm); color: var(--vc-text-muted); }

/* Table */
.vc-tk-table-wrap { overflow-x: auto; }
.vc-tk-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    text-align: left;
}
.vc-tk-table thead th {
    padding: 1rem 1.5rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vc-text-muted);
    background: rgba(248, 250, 252, 0.5);
    border-bottom: 1px solid var(--vc-border-subtle);
}
.vc-tk-table thead th.is-right { text-align: right; }
.vc-tk-table tbody tr {
    border-top: 1px solid var(--vc-border-subtle);
    cursor: pointer;
    transition: background 150ms;
}
.vc-tk-table tbody tr:first-child { border-top: 0; }
.vc-tk-table tbody tr:hover { background: rgba(248, 250, 252, 0.6); }
.vc-tk-table tbody td {
    padding: 1.25rem 1.5rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    vertical-align: middle;
}
.vc-tk-cell-muted {
    color: var(--vc-text-secondary);
    font-weight: 500;
}

/* Subject cell */
#main-body a.vc-tk-subject {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.vc-tk-tid {
    font-size: var(--vc-text-xs);
    font-weight: 600;
    color: var(--vc-text-muted);
}
.vc-tk-subject-text {
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-primary);
    margin-top: 0.125rem;
}
.vc-tk-subject.is-unread .vc-tk-subject-text {
    color: var(--vc-primary);
    font-weight: 700;
}
#main-body a.vc-tk-subject:hover .vc-tk-subject-text { color: var(--vc-primary); }

/* Status pill */
.vc-tk-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vc-tk-status-dot {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
}
.vc-tk-status-open               { background: #ECFDF5; color: #059669; }
.vc-tk-status-answered           { background: var(--vc-info-bg); color: var(--vc-info); }
.vc-tk-status-customer-reply     { background: var(--vc-warning-bg); color: var(--vc-warning); }
.vc-tk-status-on-hold            { background: #F1F5F9; color: #64748B; }
.vc-tk-status-in-progress        { background: var(--vc-primary-tint); color: var(--vc-primary); }
.vc-tk-status-closed             { background: #F1F5F9; color: #94A3B8; }

.vc-tk-sort-key {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Actions */
.vc-tk-cell-actions { text-align: right; }
#main-body a.vc-tk-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--vc-radius-md);
    color: var(--vc-text-muted);
    transition: background 150ms, color 150ms;
    text-decoration: none;
}
#main-body a.vc-tk-action-btn:hover {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    text-decoration: none;
}

/* Empty */
.vc-tk-empty {
    padding: 3rem 2rem !important;
    text-align: center;
    color: var(--vc-text-muted);
}
.vc-tk-empty .material-symbols-outlined {
    font-size: 2.5rem !important;
    display: block;
    margin: 0 auto 0.5rem;
}
#main-body .vc-tk-empty a {
    color: var(--vc-primary);
    font-weight: 600;
    text-decoration: none;
}
#main-body .vc-tk-empty a:hover { text-decoration: underline; }

/* Page-specific shell override */
body.vc-page-supportticketslist #main-body .vc-client-sidebar-col .sidebar {
    display: none;
}


/* ==== PAGE: supportticketsubmit-confirm.css ==== */


/* ==== PAGE: supportticketsubmit-customfields.css ==== */


/* ==== PAGE: supportticketsubmit-kbsuggestions.css ==== */


/* ==== PAGE: supportticketsubmit-stepone.css ==== */


/* ==== PAGE: supportticketsubmit-steptwo.css ==== */


/* ==== PAGE: ticketfeedback.css ==== */


/* ==== PAGE: two-factor-challenge.css ==== */


/* ==== PAGE: two-factor-new-backup-code.css ==== */


/* ==== PAGE: user-invite-accept.css ==== */


/* ==== PAGE: user-password.css ==== */


/* ==== PAGE: user-profile.css ==== */


/* ==== PAGE: user-security.css ==== */


/* ==== PAGE: user-verify-email.css ==== */


/* ==== PAGE: viewinvoice.css ==== */
/*
 * Vercaa — viewinvoice.css
 * ========================
 * Restyles the Twenty-One viewinvoice.tpl Bootstrap markup with
 * vercaa tokens. The TPL is left intact so payment gateway forms,
 * line items, transactions, and module hook output stay fully
 * functional.
 */

body.vc-page-viewinvoice #main-body .invoice {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 1rem;
    box-shadow: var(--vc-shadow-sm);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

body.vc-page-viewinvoice #main-body h1 {
    font-size: var(--vc-text-3xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}
body.vc-page-viewinvoice #main-body h2 {
    font-size: var(--vc-text-xl);
    font-weight: 700;
    color: var(--vc-text-primary);
    letter-spacing: -0.01em;
    margin: 1.5rem 0 0.75rem;
}
body.vc-page-viewinvoice #main-body h3 {
    font-size: var(--vc-text-lg);
    font-weight: 600;
    color: var(--vc-text-primary);
    margin: 1.25rem 0 0.5rem;
}

/* Invoice details panel */
body.vc-page-viewinvoice #main-body .invoice-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--vc-bg-elevated);
    border-radius: var(--vc-radius-lg);
    margin-bottom: 1.5rem;
}
body.vc-page-viewinvoice #main-body .invoice-details strong {
    display: block;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    margin-bottom: 0.25rem;
}

/* Tables */
body.vc-page-viewinvoice #main-body .table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}
body.vc-page-viewinvoice #main-body .table thead th {
    padding: 1rem 1.25rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    background: var(--vc-bg-elevated);
    border-bottom: 1px solid var(--vc-border-default);
    text-align: left;
}
body.vc-page-viewinvoice #main-body .table tbody td {
    padding: 1rem 1.25rem;
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    border-top: 1px solid var(--vc-border-subtle);
    vertical-align: top;
}
body.vc-page-viewinvoice #main-body .table tfoot td {
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    background: var(--vc-bg-elevated);
    border-top: 1px solid var(--vc-border-default);
}
body.vc-page-viewinvoice #main-body .table tfoot tr:last-child td {
    font-size: var(--vc-text-base);
    color: var(--vc-primary);
    font-weight: 700;
}

/* Buttons */
body.vc-page-viewinvoice #main-body .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--vc-radius-md);
    font-size: var(--vc-text-sm);
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms;
    text-decoration: none;
}
body.vc-page-viewinvoice #main-body .btn-primary,
body.vc-page-viewinvoice #main-body .btn-success {
    background: var(--vc-primary);
    border-color: var(--vc-primary);
    color: #fff;
}
body.vc-page-viewinvoice #main-body .btn-primary:hover,
body.vc-page-viewinvoice #main-body .btn-success:hover {
    background: var(--vc-primary-dark);
    border-color: var(--vc-primary-dark);
    color: #fff;
    text-decoration: none;
}
body.vc-page-viewinvoice #main-body .btn-default {
    background: var(--vc-bg-surface);
    border-color: var(--vc-border-default);
    color: var(--vc-text-primary);
}
body.vc-page-viewinvoice #main-body .btn-default:hover {
    background: var(--vc-bg-elevated);
    text-decoration: none;
}
body.vc-page-viewinvoice #main-body .btn-danger {
    background: var(--vc-danger);
    border-color: var(--vc-danger);
    color: #fff;
}

/* Status label */
body.vc-page-viewinvoice #main-body .label {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: var(--vc-radius-full);
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
body.vc-page-viewinvoice #main-body .label-success { background: #ECFDF5; color: var(--vc-success); }
body.vc-page-viewinvoice #main-body .label-warning { background: var(--vc-warning-bg); color: var(--vc-warning); }
body.vc-page-viewinvoice #main-body .label-danger  { background: var(--vc-danger-bg); color: var(--vc-danger); }
body.vc-page-viewinvoice #main-body .label-info    { background: var(--vc-info-bg); color: var(--vc-info); }
body.vc-page-viewinvoice #main-body .label-default { background: #F1F5F9; color: #64748B; }

/* Forms (gateway selection) */
body.vc-page-viewinvoice #main-body .form-control {
    border-radius: var(--vc-radius-md);
    border: 1px solid var(--vc-border-default);
    padding: 0.625rem 0.875rem;
    font-size: var(--vc-text-sm);
}
body.vc-page-viewinvoice #main-body .form-control:focus {
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px var(--vc-primary-tint);
    outline: 0;
}

/* Alerts */
body.vc-page-viewinvoice #main-body .alert {
    border-radius: var(--vc-radius-lg);
    padding: 0.875rem 1.125rem;
    font-size: var(--vc-text-sm);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
}
body.vc-page-viewinvoice #main-body .alert-info    { background: var(--vc-info-bg); color: var(--vc-info); border-color: #BFDBFE; }
body.vc-page-viewinvoice #main-body .alert-warning { background: var(--vc-warning-bg); color: var(--vc-warning); border-color: #FDE68A; }
body.vc-page-viewinvoice #main-body .alert-danger  { background: var(--vc-danger-bg); color: var(--vc-danger); border-color: #FECACA; }
body.vc-page-viewinvoice #main-body .alert-success { background: #ECFDF5; color: var(--vc-success); border-color: #A7F3D0; }

/* Card-style sub-panels */
body.vc-page-viewinvoice #main-body .card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: 1rem;
    box-shadow: var(--vc-shadow-sm);
    margin-bottom: 1.5rem;
}
body.vc-page-viewinvoice #main-body .card .card-body { padding: 1.5rem; }
body.vc-page-viewinvoice #main-body .card .card-title {
    font-size: var(--vc-text-lg);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--vc-border-subtle);
}


/* ==== PAGE: wordpress-hosting.css ==== */
/*
 * Vercaa — wordpress-hosting.css
 * ==============================
 * Overlay on shared-hosting.css. Re-skins the marketing-page layout
 * for WordPress (blue accent instead of emerald).
 */

.vc-sh {
    --vc-sh-accent: #3B82F6;       /* blue-500 */
    --vc-sh-accent-bg: #DBEAFE;    /* blue-100 */
    --vc-sh-accent-dark: #2563EB;  /* blue-600 */
}

/* WordPress-specific header accent */
.vc-page-wordpress-hosting .vc-sh-header-inner .vc-sh-brand-dots span:nth-child(2) {
    background: #3B82F6;
}


/* ############################################################################
 * === CART (orderform) === appended for rebuild v2 (docs/29)
 * Cart-only styling, consolidated from orderforms/vercaa/css/cart/01-10.css
 * + cart.css. Cross-linked by the orderform head.tpl (one sheet site-wide).
 * ############################################################################ */

/* ==== CART-FILE: 01-tokens.css ==== */
/*
 * Vercaa Cart Design Tokens
 * =========================
 * DUPLICATE of templates/vercaa/css/vercaa/01-tokens.css.
 * Kept local so the cart template is self-contained — deleting the main
 * templates/vercaa/ folder must not break the cart.
 *
 * When the main vercaa design system changes, sync this file manually.
 * Sync source: templates/vercaa/css/vercaa/01-tokens.css
 * Last sync:   2026-05-17
 */

:root {

    /* ============================================================
     * COLORS
     * ============================================================ */

    --vc-primary:           #7C3AED;
    --vc-primary-light:     #A78BFA;
    --vc-primary-dark:      #6D28D9;
    --vc-primary-tint:      #F5F3FF;

    --vc-accent-orange:     #FF5C00;

    --vc-text-primary:      #111827;
    --vc-text-secondary:    #6B7280;
    --vc-text-muted:        #9CA3AF;
    --vc-text-inverse:      #FFFFFF;

    --vc-bg-base:           #FAFAFA;
    --vc-bg-surface:        #FFFFFF;
    --vc-bg-elevated:       #F9FAFB;

    --vc-border-subtle:     #F3F4F6;
    --vc-border-default:    #E5E7EB;
    --vc-border-strong:     #D1D5DB;

    --vc-success:           #16A34A;
    --vc-success-bg:        #DCFCE7;
    --vc-warning:           #D97706;
    --vc-warning-bg:        #FEF3C7;
    --vc-danger:            #DC2626;
    --vc-danger-bg:         #FEE2E2;
    --vc-info:              #2563EB;
    --vc-info-bg:           #DBEAFE;


    /* ============================================================
     * TYPOGRAPHY
     * ============================================================ */

    --vc-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --vc-font-display: 'Inter', system-ui, sans-serif;
    --vc-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, monospace;

    --vc-text-xs:   0.75rem;
    --vc-text-sm:   0.875rem;
    --vc-text-base: 1rem;
    --vc-text-lg:   1.125rem;
    --vc-text-xl:   1.25rem;
    --vc-text-2xl:  1.5rem;
    --vc-text-3xl:  1.875rem;
    --vc-text-4xl:  2.25rem;
    --vc-text-5xl:  3rem;
    --vc-text-6xl:  3.75rem;

    --vc-font-normal:    400;
    --vc-font-medium:    500;
    --vc-font-semibold:  600;
    --vc-font-bold:      700;
    --vc-font-extrabold: 800;

    --vc-leading-tight:   1.25;
    --vc-leading-snug:    1.375;
    --vc-leading-normal:  1.5;
    --vc-leading-relaxed: 1.625;
    --vc-leading-loose:   1.75;

    --vc-tracking-tight:  -0.025em;
    --vc-tracking-normal: 0;
    --vc-tracking-wide:   0.025em;
    --vc-tracking-wider:  0.05em;


    /* ============================================================
     * SPACING (8-point grid)
     * ============================================================ */

    --vc-space-0:  0;
    --vc-space-1:  0.25rem;
    --vc-space-2:  0.5rem;
    --vc-space-3:  0.75rem;
    --vc-space-4:  1rem;
    --vc-space-5:  1.25rem;
    --vc-space-6:  1.5rem;
    --vc-space-8:  2rem;
    --vc-space-10: 2.5rem;
    --vc-space-12: 3rem;
    --vc-space-16: 4rem;
    --vc-space-20: 5rem;
    --vc-space-24: 6rem;


    /* ============================================================
     * RADIUS
     * ============================================================ */

    --vc-radius-sm:   0.375rem;
    --vc-radius-md:   0.5rem;
    --vc-radius-lg:   0.75rem;
    --vc-radius-xl:   1rem;
    --vc-radius-2xl:  1.5rem;
    --vc-radius-full: 9999px;


    /* ============================================================
     * SHADOWS
     * ============================================================ */

    --vc-shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --vc-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1),
                      0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --vc-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1),
                      0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --vc-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1),
                      0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --vc-shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --vc-shadow-glow: 0 0 20px rgba(124, 58, 237, 0.25);
    --vc-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);


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

    --vc-container-max:    1280px;
    --vc-container-narrow: 768px;
    --vc-sidebar-width:    16rem;
    --vc-header-height:    4rem;


    /* ============================================================
     * BREAKPOINTS (reference)
     * ============================================================ */

    --vc-bp-sm:  640px;
    --vc-bp-md:  768px;
    --vc-bp-lg:  1024px;
    --vc-bp-xl:  1280px;
    --vc-bp-2xl: 1536px;


    /* ============================================================
     * Z-INDEX
     * ============================================================ */

    --vc-z-base:     1;
    --vc-z-dropdown: 100;
    --vc-z-sticky:   200;
    --vc-z-overlay:  300;
    --vc-z-modal:    400;
    --vc-z-toast:    500;
    --vc-z-tooltip:  600;


    /* ============================================================
     * TRANSITIONS
     * ============================================================ */

    --vc-transition-fast:   150ms ease;
    --vc-transition-base:   200ms ease;
    --vc-transition-slow:   300ms ease;
    --vc-ease-out-cubic:    cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ==== CART-FILE: 02-base.css ==== */
/*
 * Vercaa Cart — Base
 * Body, typography, link reset. Scoped to cart shell to avoid bleeding
 * into WHMCS-injected markup outside the cart.
 */

body.vc-cart-body {
    margin: 0;
    font-family: var(--vc-font-sans, 'Inter', sans-serif);
    font-size: var(--vc-text-base, 1rem);
    line-height: var(--vc-leading-normal, 1.5);
    color: var(--vc-text-primary, #111827);
    background: var(--vc-bg-base, #FAFAFA);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.vc-cart-shell h1,
.vc-cart-shell h2,
.vc-cart-shell h3,
.vc-cart-shell h4,
.vc-cart-shell h5,
.vc-cart-shell h6 {
    font-family: var(--vc-font-display, 'Inter', sans-serif);
    color: var(--vc-text-primary, #111827);
    margin: 0 0 var(--vc-space-3, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    line-height: var(--vc-leading-tight, 1.25);
}

.vc-cart-shell h1 { font-size: var(--vc-text-4xl, 2.25rem); }
.vc-cart-shell h2 { font-size: var(--vc-text-3xl, 1.875rem); }
.vc-cart-shell h3 { font-size: var(--vc-text-2xl, 1.5rem); }
.vc-cart-shell h4 { font-size: var(--vc-text-xl, 1.25rem); }
.vc-cart-shell h5 { font-size: var(--vc-text-lg, 1.125rem); }
.vc-cart-shell h6 { font-size: var(--vc-text-base, 1rem); }

.vc-cart-shell p {
    margin: 0 0 var(--vc-space-4, 1rem);
    color: var(--vc-text-secondary, #6B7280);
}

.vc-cart-shell a:not(.vc-btn):not(.vh-btn):not(.vh-mega-item):not(.vh-mobile-nav-item):not(.vh-mobile-sub-item):not(.vh-mobile-login):not(.vh-mobile-action):not(.vh-logo) {
    color: var(--vc-primary, #7C3AED);
    text-decoration: none;
    transition: color var(--vc-transition-fast, 150ms ease);
}
.vc-cart-shell a:not(.vc-btn):not(.vh-btn):not(.vh-mega-item):not(.vh-mobile-nav-item):not(.vh-mobile-sub-item):not(.vh-mobile-login):not(.vh-mobile-action):not(.vh-logo):hover {
    color: var(--vc-primary-dark, #6D28D9);
    text-decoration: underline;
}

.vc-cart-shell .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

.vc-cart-shell img {
    max-width: 100%;
    height: auto;
}

/* Visually-hidden but accessible */
.vc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==== CART-FILE: 03-components.css ==== */
/*
 * Vercaa Cart — Components
 * Self-contained primitives. Do not import or extend main vercaa.
 */

/* ============================================================
 * BUTTONS
 * ============================================================ */

.vc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vc-space-2, 0.5rem);
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-4, 1rem);
    border: 1px solid transparent;
    border-radius: var(--vc-radius-md, 0.5rem);
    font-family: inherit;
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-semibold, 600);
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--vc-transition-fast, 150ms ease),
                color var(--vc-transition-fast, 150ms ease),
                border-color var(--vc-transition-fast, 150ms ease),
                box-shadow var(--vc-transition-fast, 150ms ease);
    white-space: nowrap;
    user-select: none;
}

.vc-btn:hover { text-decoration: none; }
.vc-btn:focus-visible {
    outline: 2px solid var(--vc-primary, #7C3AED);
    outline-offset: 2px;
}
.vc-btn:disabled,
.vc-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.vc-btn--primary {
    background: var(--vc-primary, #7C3AED);
    color: var(--vc-text-inverse, #FFFFFF);
}
.vc-btn--primary:hover {
    background: var(--vc-primary-dark, #6D28D9);
    color: var(--vc-text-inverse, #FFFFFF);
}

.vc-btn--secondary {
    background: var(--vc-bg-elevated, #F9FAFB);
    color: var(--vc-text-primary, #111827);
    border-color: var(--vc-border-default, #E5E7EB);
}
.vc-btn--secondary:hover {
    background: var(--vc-border-subtle, #F3F4F6);
    color: var(--vc-text-primary, #111827);
}

.vc-btn--ghost {
    background: transparent;
    color: var(--vc-text-primary, #111827);
}
.vc-btn--ghost:hover {
    background: var(--vc-bg-elevated, #F9FAFB);
    color: var(--vc-text-primary, #111827);
}

.vc-btn--danger {
    background: var(--vc-danger, #DC2626);
    color: var(--vc-text-inverse, #FFFFFF);
}
.vc-btn--danger:hover { background: #B91C1C; }

.vc-btn--accent {
    background: var(--vc-accent-orange, #FF5C00);
    color: var(--vc-text-inverse, #FFFFFF);
}
.vc-btn--accent:hover { background: #E64F00; }

.vc-btn--sm {
    padding: var(--vc-space-1, 0.25rem) var(--vc-space-3, 0.75rem);
    font-size: var(--vc-text-xs, 0.75rem);
}

.vc-btn--lg {
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-6, 1.5rem);
    font-size: var(--vc-text-base, 1rem);
}

.vc-btn--pill { border-radius: var(--vc-radius-full, 9999px); }
.vc-btn--block { display: flex; width: 100%; }


/* ============================================================
 * CARDS
 * ============================================================ */

.vc-card {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    box-shadow: var(--vc-shadow-sm, 0 1px 2px 0 rgba(0,0,0,0.05));
}
.vc-card__header {
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
    font-weight: var(--vc-font-semibold, 600);
    font-size: var(--vc-text-sm, 0.875rem);
}
.vc-card__body { padding: var(--vc-space-5, 1.25rem); }
.vc-card__footer {
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
    background: var(--vc-bg-elevated, #F9FAFB);
}

.vc-card--elevated { box-shadow: var(--vc-shadow-md); }
.vc-card--glass {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.05);
}


/* ============================================================
 * INPUTS
 * ============================================================ */

.vc-input,
.vc-select,
.vc-textarea {
    display: block;
    width: 100%;
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-3, 0.75rem);
    font-family: inherit;
    font-size: var(--vc-text-sm, 0.875rem);
    line-height: 1.5;
    color: var(--vc-text-primary, #111827);
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-strong, #D1D5DB);
    border-radius: var(--vc-radius-md, 0.5rem);
    transition: border-color var(--vc-transition-fast, 150ms ease),
                box-shadow var(--vc-transition-fast, 150ms ease);
    -webkit-appearance: none;
            appearance: none;
}
.vc-input:focus,
.vc-select:focus,
.vc-textarea:focus {
    outline: none;
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.vc-input.is-invalid,
.vc-select.is-invalid,
.vc-textarea.is-invalid {
    border-color: var(--vc-danger, #DC2626);
}

.vc-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}

.vc-label {
    display: block;
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-secondary, #6B7280);
    margin-bottom: var(--vc-space-1, 0.25rem);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wide, 0.025em);
}

.vc-field { margin-bottom: var(--vc-space-4, 1rem); }
.vc-help-text {
    display: block;
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
    margin-top: var(--vc-space-1, 0.25rem);
}


/* ============================================================
 * ALERTS
 * ============================================================ */

.vc-alert {
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-size: var(--vc-text-sm, 0.875rem);
    margin-bottom: var(--vc-space-4, 1rem);
    border: 1px solid transparent;
}
.vc-alert--success { background: var(--vc-success-bg, #DCFCE7); color: var(--vc-success, #16A34A); border-color: #BBF7D0; }
.vc-alert--warning { background: var(--vc-warning-bg, #FEF3C7); color: var(--vc-warning, #D97706); border-color: #FDE68A; }
.vc-alert--danger  { background: var(--vc-danger-bg, #FEE2E2);  color: var(--vc-danger, #DC2626);  border-color: #FECACA; }
.vc-alert--info    { background: var(--vc-info-bg, #DBEAFE);    color: var(--vc-info, #2563EB);    border-color: #BFDBFE; }


/* ============================================================
 * BADGES
 * ============================================================ */

.vc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-1, 0.25rem);
    padding: 0.125rem var(--vc-space-2, 0.5rem);
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-semibold, 600);
    border-radius: var(--vc-radius-full, 9999px);
    background: var(--vc-bg-elevated, #F9FAFB);
    color: var(--vc-text-secondary, #6B7280);
}
.vc-badge--primary { background: var(--vc-primary-tint, #F5F3FF); color: var(--vc-primary, #7C3AED); }
.vc-badge--success { background: var(--vc-success-bg, #DCFCE7); color: var(--vc-success, #16A34A); }
.vc-badge--warning { background: var(--vc-warning-bg, #FEF3C7); color: var(--vc-warning, #D97706); }
.vc-badge--danger  { background: var(--vc-danger-bg, #FEE2E2);  color: var(--vc-danger, #DC2626); }


/* ============================================================
 * MODAL
 * ============================================================ */

.vc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--vc-z-modal, 400);
    padding: var(--vc-space-4, 1rem);
}
.vc-modal {
    background: var(--vc-bg-surface, #FFFFFF);
    border-radius: var(--vc-radius-xl, 1rem);
    box-shadow: var(--vc-shadow-2xl);
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vc-modal__header {
    padding: var(--vc-space-5, 1.25rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vc-modal__title { font-size: var(--vc-text-lg, 1.125rem); font-weight: var(--vc-font-bold, 700); margin: 0; }
.vc-modal__close {
    background: none;
    border: none;
    color: var(--vc-text-muted, #9CA3AF);
    cursor: pointer;
    padding: var(--vc-space-1, 0.25rem);
    line-height: 0;
}
.vc-modal__close:hover { color: var(--vc-text-primary, #111827); }
.vc-modal__body { padding: var(--vc-space-5, 1.25rem); overflow-y: auto; }
.vc-modal__footer {
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
    background: var(--vc-bg-elevated, #F9FAFB);
    display: flex;
    justify-content: flex-end;
    gap: var(--vc-space-2, 0.5rem);
}

/* ==== CART-FILE: 04-layout.css ==== */
/*
 * Vercaa Cart — Layout
 * Page shell, header chrome, container, grid + sticky summary.
 */

/* ============================================================
 * PAGE SHELL
 * ============================================================ */

.vc-cart-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--vc-bg-base, #FAFAFA);
}

.vc-cart-container {
    width: 100%;
    max-width: var(--vc-container-max, 1280px);
    margin: 0 auto;
    padding: var(--vc-space-6, 1.5rem) var(--vc-space-5, 1.25rem);
    flex: 1;
}

@media (min-width: 768px) {
    .vc-cart-container {
        padding: var(--vc-space-12, 3rem) var(--vc-space-12, 3rem);
    }
}


/* ============================================================
 * HEADER — moved to lagom-header.css (ported from vercaa main template)
 * Old .vc-cart-header* rules removed 2026-05-19.
 * ============================================================ */


/* ============================================================
 * FOOTER
 * ============================================================ */

.vc-cart-footer {
    background: var(--vc-bg-surface, #FFFFFF);
    border-top: 1px solid var(--vc-border-default, #E5E7EB);
    padding: var(--vc-space-6, 1.5rem) var(--vc-space-5, 1.25rem);
    text-align: center;
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-muted, #9CA3AF);
}


/* ============================================================
 * CART GRID — body + sticky summary
 * ============================================================ */

.vc-cart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vc-space-6, 1.5rem);
}
@media (min-width: 1024px) {
    .vc-cart-grid {
        grid-template-columns: minmax(0, 1fr) 22rem;
        gap: var(--vc-space-8, 2rem);
    }
}

.vc-cart-body { min-width: 0; }

.vc-cart-aside {
    align-self: start;
}
@media (min-width: 1024px) {
    .vc-cart-aside {
        position: sticky;
        top: calc(var(--vc-header-height, 4rem) + var(--vc-space-6, 1.5rem));
    }
}


/* ============================================================
 * SECTION HEADERS
 * ============================================================ */

.vc-cart-section-title {
    font-size: var(--vc-text-2xl, 1.5rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    margin: 0 0 var(--vc-space-2, 0.5rem);
}
.vc-cart-section-subtitle {
    font-size: var(--vc-text-base, 1rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 0 0 var(--vc-space-6, 1.5rem);
}


/* ============================================================
 * UTILITY (minimal — semantic-first)
 * ============================================================ */

.vc-flex { display: flex; }
.vc-flex-col { display: flex; flex-direction: column; }
.vc-items-center { align-items: center; }
.vc-justify-between { justify-content: space-between; }
.vc-gap-2 { gap: var(--vc-space-2, 0.5rem); }
.vc-gap-3 { gap: var(--vc-space-3, 0.75rem); }
.vc-gap-4 { gap: var(--vc-space-4, 1rem); }

.vc-text-center { text-align: center; }
.vc-text-right  { text-align: right; }

.vc-hidden { display: none !important; }

@media (max-width: 767px) {
    .vc-hidden-mobile { display: none !important; }
}
@media (min-width: 768px) {
    .vc-hidden-desktop { display: none !important; }
}

/* ==== CART-FILE: 05-overrides.css ==== */
/*
 * Vercaa Cart — Overrides
 * Re-skin Bootstrap 4 + WHMCS-injected markup so it matches vercaa look.
 * Scoped under .vc-cart-shell to avoid leaking into other WHMCS pages.
 *
 * WHMCS core JS hooks these class names (`.is-invalid`, `.alert-*`,
 * `.modal`, `.form-control`). Do NOT rename — restyle in place.
 */

/* ---------- Form controls ---------- */
.vc-cart-shell .form-control {
    display: block;
    width: 100%;
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-3, 0.75rem);
    font-family: inherit;
    font-size: var(--vc-text-sm, 0.875rem);
    line-height: 1.5;
    color: var(--vc-text-primary, #111827);
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-strong, #D1D5DB);
    border-radius: var(--vc-radius-md, 0.5rem);
    transition: border-color var(--vc-transition-fast, 150ms ease),
                box-shadow var(--vc-transition-fast, 150ms ease);
}
.vc-cart-shell .form-control:focus {
    outline: none;
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.vc-cart-shell .form-control.is-invalid,
.vc-cart-shell .is-invalid {
    border-color: var(--vc-danger, #DC2626);
}
.vc-cart-shell .invalid-feedback {
    display: block;
    color: var(--vc-danger, #DC2626);
    font-size: var(--vc-text-xs, 0.75rem);
    margin-top: var(--vc-space-1, 0.25rem);
}
.vc-cart-shell .control-label,
.vc-cart-shell label {
    display: block;
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-secondary, #6B7280);
    margin-bottom: var(--vc-space-1, 0.25rem);
}
.vc-cart-shell .form-group { margin-bottom: var(--vc-space-4, 1rem); }
.vc-cart-shell .help-block {
    display: block;
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
    margin-top: var(--vc-space-1, 0.25rem);
}

/* ---------- Bootstrap buttons mapped to vc-btn ---------- */
.vc-cart-shell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--vc-space-2, 0.5rem);
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-4, 1rem);
    border: 1px solid transparent;
    border-radius: var(--vc-radius-md, 0.5rem);
    font-family: inherit;
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-semibold, 600);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--vc-transition-fast, 150ms ease),
                color var(--vc-transition-fast, 150ms ease);
}
.vc-cart-shell .btn-primary { background: var(--vc-primary, #7C3AED); color: var(--vc-text-inverse, #FFFFFF); border-color: var(--vc-primary, #7C3AED); }
.vc-cart-shell .btn-primary:hover { background: var(--vc-primary-dark, #6D28D9); border-color: var(--vc-primary-dark, #6D28D9); color: var(--vc-text-inverse, #FFFFFF); }
.vc-cart-shell .btn-default,
.vc-cart-shell .btn-secondary {
    background: var(--vc-bg-elevated, #F9FAFB);
    color: var(--vc-text-primary, #111827);
    border-color: var(--vc-border-default, #E5E7EB);
}
.vc-cart-shell .btn-default:hover,
.vc-cart-shell .btn-secondary:hover {
    background: var(--vc-border-subtle, #F3F4F6);
}
.vc-cart-shell .btn-danger { background: var(--vc-danger, #DC2626); color: var(--vc-text-inverse, #FFFFFF); border-color: var(--vc-danger, #DC2626); }
.vc-cart-shell .btn-success { background: var(--vc-success, #16A34A); color: var(--vc-text-inverse, #FFFFFF); border-color: var(--vc-success, #16A34A); }
.vc-cart-shell .btn-sm { padding: var(--vc-space-1, 0.25rem) var(--vc-space-3, 0.75rem); font-size: var(--vc-text-xs, 0.75rem); }
.vc-cart-shell .btn-lg { padding: var(--vc-space-3, 0.75rem) var(--vc-space-6, 1.5rem); font-size: var(--vc-text-base, 1rem); }
.vc-cart-shell .btn-block { display: flex; width: 100%; }

/* ---------- Bootstrap alerts ---------- */
.vc-cart-shell .alert {
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-size: var(--vc-text-sm, 0.875rem);
    margin-bottom: var(--vc-space-4, 1rem);
    border: 1px solid transparent;
}
.vc-cart-shell .alert-success { background: var(--vc-success-bg, #DCFCE7); color: var(--vc-success, #16A34A); border-color: #BBF7D0; }
.vc-cart-shell .alert-warning { background: var(--vc-warning-bg, #FEF3C7); color: var(--vc-warning, #D97706); border-color: #FDE68A; }
.vc-cart-shell .alert-danger  { background: var(--vc-danger-bg, #FEE2E2);  color: var(--vc-danger, #DC2626);  border-color: #FECACA; }
.vc-cart-shell .alert-info    { background: var(--vc-info-bg, #DBEAFE);    color: var(--vc-info, #2563EB);    border-color: #BFDBFE; }

/* ---------- Bootstrap panels (legacy) ---------- */
.vc-cart-shell .panel {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    margin-bottom: var(--vc-space-4, 1rem);
    overflow: hidden;
    box-shadow: var(--vc-shadow-sm);
}
.vc-cart-shell .panel-heading {
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
    font-weight: var(--vc-font-semibold, 600);
    font-size: var(--vc-text-sm, 0.875rem);
    background: var(--vc-bg-elevated, #F9FAFB);
}
.vc-cart-shell .panel-body { padding: var(--vc-space-5, 1.25rem); }
.vc-cart-shell .panel-footer {
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
    background: var(--vc-bg-elevated, #F9FAFB);
}

/* ---------- Bootstrap nav-tabs ---------- */
.vc-cart-shell .nav-tabs {
    display: flex;
    border-bottom: 2px solid var(--vc-border-default, #E5E7EB);
    gap: var(--vc-space-1, 0.25rem);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--vc-space-4, 1rem);
}
.vc-cart-shell .nav-tabs > li > a {
    display: block;
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-4, 1rem);
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-medium, 500);
    color: var(--vc-text-secondary, #6B7280);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
}
.vc-cart-shell .nav-tabs > li.active > a,
.vc-cart-shell .nav-tabs > li > a.active {
    color: var(--vc-primary, #7C3AED);
    border-bottom-color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-semibold, 600);
}

/* ---------- Bootstrap modal ---------- */
.vc-cart-shell .modal-content {
    background: var(--vc-bg-surface, #FFFFFF);
    border: none;
    border-radius: var(--vc-radius-xl, 1rem);
    box-shadow: var(--vc-shadow-2xl);
}
.vc-cart-shell .modal-header {
    padding: var(--vc-space-5, 1.25rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-cart-shell .modal-body { padding: var(--vc-space-5, 1.25rem); }
.vc-cart-shell .modal-footer {
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
    background: var(--vc-bg-elevated, #F9FAFB);
}

/* ---------- Bootstrap pagination ---------- */
.vc-cart-shell .pagination > li > a,
.vc-cart-shell .pagination > li > span {
    color: var(--vc-text-secondary, #6B7280);
    border-color: var(--vc-border-default, #E5E7EB);
}
.vc-cart-shell .pagination > .active > a,
.vc-cart-shell .pagination > .active > span {
    background: var(--vc-primary, #7C3AED);
    border-color: var(--vc-primary, #7C3AED);
    color: var(--vc-text-inverse, #FFFFFF);
}

/* ---------- WHMCS cart utility classes preserved ---------- */
.vc-cart-shell .text-danger { color: var(--vc-danger, #DC2626); }
.vc-cart-shell .text-success { color: var(--vc-success, #16A34A); }
.vc-cart-shell .text-muted { color: var(--vc-text-muted, #9CA3AF); }
.vc-cart-shell .text-primary { color: var(--vc-primary, #7C3AED); }
.vc-cart-shell .hidden { display: none !important; }

/* ---------- Bootstrap grid fallback (cart-scoped) ---------- */
.vc-cart-shell .row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--vc-space-2, 0.5rem) * -1); }
.vc-cart-shell [class*="col-"] { padding: 0 var(--vc-space-2, 0.5rem); }
@media (max-width: 767px) {
    .vc-cart-shell .col-sm-6,
    .vc-cart-shell .col-sm-4,
    .vc-cart-shell .col-md-6 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
    .vc-cart-shell .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
    .vc-cart-shell .col-sm-6, .vc-cart-shell .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .vc-cart-shell .col-sm-4, .vc-cart-shell .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
    .vc-cart-shell .col-sm-3, .vc-cart-shell .col-md-3 { flex: 0 0 25%; max-width: 25%; }
}

/* ==== CART-FILE: 06-viewcart.css ==== */
/*
 * Vercaa Cart — viewcart page
 * Self-contained styles for viewcart.tpl + its 9 partials/modals.
 */

/* ============================================================
 * EMPTY CART
 * ============================================================ */

.vc-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--vc-space-20, 5rem) var(--vc-space-4, 1rem);
    text-align: center;
}
.vc-cart-empty__icon {
    width: 6rem;
    height: 6rem;
    background: var(--vc-primary-tint, #F5F3FF);
    border-radius: var(--vc-radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--vc-space-6, 1.5rem);
    color: var(--vc-primary, #7C3AED);
}
.vc-cart-empty__icon .material-symbols-outlined { font-size: 3rem; }
.vc-cart-empty__title {
    font-size: var(--vc-text-3xl, 1.875rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    margin-bottom: var(--vc-space-2, 0.5rem);
}
.vc-cart-empty__desc {
    font-size: var(--vc-text-lg, 1.125rem);
    color: var(--vc-text-secondary, #6B7280);
    margin-bottom: var(--vc-space-8, 2rem);
}


/* ============================================================
 * CART HEADING
 * ============================================================ */

.vc-cart-heading {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-2, 0.5rem);
    margin-bottom: var(--vc-space-6, 1.5rem);
}
.vc-cart-heading__title {
    font-size: var(--vc-text-4xl, 2.25rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    letter-spacing: var(--vc-tracking-tight, -0.025em);
    margin: 0;
}
.vc-cart-heading__sub {
    font-size: var(--vc-text-lg, 1.125rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 0;
}


/* ============================================================
 * CART ITEM CARD
 * ============================================================ */

.vc-cart-item {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    padding: var(--vc-space-6, 1.5rem);
    margin-bottom: var(--vc-space-4, 1rem);
    box-shadow: var(--vc-shadow-sm);
    transition: border-color var(--vc-transition-base, 200ms ease);
}
.vc-cart-item:hover {
    border-color: rgba(124, 58, 237, 0.25);
}
.vc-cart-item__row {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-5, 1.25rem);
    align-items: flex-start;
}
@media (min-width: 640px) {
    .vc-cart-item__row { flex-direction: row; }
}

.vc-cart-item__icon {
    width: 5rem;
    height: 5rem;
    background: var(--vc-primary-tint, #F5F3FF);
    color: var(--vc-primary, #7C3AED);
    border-radius: var(--vc-radius-lg, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vc-cart-item__icon .material-symbols-outlined { font-size: 2rem; }
.vc-cart-item__icon--domain  { background: #ECFDF5; color: var(--vc-success, #16A34A); }
.vc-cart-item__icon--renewal { background: #FFF7ED; color: var(--vc-accent-orange, #FF5C00); }
.vc-cart-item__icon--neutral { background: var(--vc-border-subtle, #F3F4F6); color: var(--vc-text-muted, #9CA3AF); }

.vc-cart-item__content {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.vc-cart-item__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--vc-space-4, 1rem);
    margin-bottom: var(--vc-space-1, 0.25rem);
}
.vc-cart-item__name {
    font-size: var(--vc-text-lg, 1.125rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    line-height: var(--vc-leading-tight, 1.25);
    margin: 0;
}
.vc-cart-item__domain {
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 2px 0 0;
}

.vc-cart-item__actions {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    flex-shrink: 0;
}
.vc-icon-btn {
    background: none;
    border: none;
    color: var(--vc-text-muted, #9CA3AF);
    cursor: pointer;
    padding: var(--vc-space-1, 0.25rem);
    border-radius: var(--vc-radius-sm, 0.375rem);
    line-height: 0;
    transition: color var(--vc-transition-fast, 150ms ease),
                background var(--vc-transition-fast, 150ms ease);
}
.vc-icon-btn:hover { color: var(--vc-primary, #7C3AED); background: var(--vc-primary-tint, #F5F3FF); }
.vc-icon-btn--danger:hover { color: var(--vc-danger, #DC2626); background: var(--vc-danger-bg, #FEE2E2); }

/* Addon / config row (nested under cart item) */
.vc-cart-addons {
    margin-top: var(--vc-space-2, 0.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-1, 0.25rem);
}
.vc-cart-addon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
    padding: var(--vc-space-2, 0.5rem) 0 var(--vc-space-2, 0.5rem) var(--vc-space-3, 0.75rem);
    border-left: 2px solid rgba(124, 58, 237, 0.15);
    margin-left: var(--vc-space-2, 0.5rem);
}
.vc-cart-addon__value {
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
}
.vc-cart-addon__price {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
}

.vc-cart-item__divider {
    height: 1px;
    background: var(--vc-border-subtle, #F3F4F6);
    margin: var(--vc-space-4, 1rem) 0;
}

.vc-cart-item__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-4, 1rem);
}

.vc-cart-item__duration {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-cart-item__duration-label {
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider, 0.05em);
    color: var(--vc-text-muted, #9CA3AF);
}
.vc-cycle-select {
    background: var(--vc-bg-elevated, #F9FAFB);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    padding: var(--vc-space-1, 0.25rem) 2rem var(--vc-space-1, 0.25rem) var(--vc-space-3, 0.75rem);
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-medium, 500);
    color: var(--vc-text-primary, #111827);
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}
.vc-cycle-select:focus {
    outline: none;
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.vc-cart-item__price-block {
    text-align: right;
}
.vc-cart-item__price {
    font-size: var(--vc-text-xl, 1.25rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-cart-item__price-period {
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-normal, 400);
    color: var(--vc-text-secondary, #6B7280);
}
.vc-cart-item__price-strike {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
    text-decoration: line-through;
}
.vc-cart-item__price-note {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
    margin: 2px 0 0;
}

/* Qty stepper */
.vc-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    overflow: hidden;
    margin-top: var(--vc-space-3, 0.75rem);
}
.vc-qty-stepper__btn {
    background: none;
    border: none;
    color: var(--vc-text-secondary, #6B7280);
    padding: var(--vc-space-1, 0.25rem) var(--vc-space-2, 0.5rem);
    cursor: pointer;
    line-height: 0;
    transition: background var(--vc-transition-fast, 150ms ease);
}
.vc-qty-stepper__btn:hover { background: var(--vc-bg-elevated, #F9FAFB); }
.vc-qty-stepper__input {
    width: 3rem;
    text-align: center;
    border: none;
    background: transparent;
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    -moz-appearance: textfield;
            appearance: textfield;
}
.vc-qty-stepper__input::-webkit-outer-spin-button,
.vc-qty-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Compact stepper for product-addon rows (inline within addon list) */
.vc-qty-stepper--sm { margin-top: 0; }
.vc-qty-stepper--sm .vc-qty-stepper__input { width: 2.25rem; font-weight: var(--vc-font-medium, 500); }
.vc-qty-stepper--sm .vc-qty-stepper__btn { padding: 2px var(--vc-space-1, 0.25rem); }


/* ============================================================
 * CART ACTIONS (add more / estimate taxes / empty cart)
 * ============================================================ */

.vc-cart-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-3, 0.75rem);
    margin: var(--vc-space-4, 1rem) 0 var(--vc-space-8, 2rem);
}
.vc-cart-actions__secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-4, 1rem);
}
.vc-text-action {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-1, 0.25rem);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--vc-text-secondary, #6B7280);
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-medium, 500);
    text-decoration: none;
    transition: color var(--vc-transition-fast, 150ms ease);
}
.vc-text-action:hover { color: var(--vc-text-primary, #111827); text-decoration: none; }
.vc-text-action--danger:hover { color: var(--vc-danger, #DC2626); }


/* ============================================================
 * ADD MORE LINK
 * ============================================================ */

.vc-add-more {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-bold, 700);
    text-decoration: none;
    transition: gap var(--vc-transition-base, 200ms ease);
}
.vc-add-more:hover {
    gap: var(--vc-space-3, 0.75rem);
    color: var(--vc-primary-dark, #6D28D9);
    text-decoration: none;
}


/* ============================================================
 * ORDER SUMMARY (sticky right column)
 * ============================================================ */

.vc-summary {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    box-shadow: var(--vc-shadow-md);
    overflow: hidden;
}
.vc-summary__body {
    padding: var(--vc-space-8, 2rem);
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-6, 1.5rem);
}
.vc-summary__title {
    font-size: var(--vc-text-xl, 1.25rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-summary__rows {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-4, 1rem);
}
.vc-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
}
.vc-summary__row-value {
    font-weight: var(--vc-font-medium, 500);
    color: var(--vc-text-primary, #111827);
}
.vc-summary__row--discount .vc-summary__row-value { color: var(--vc-primary, #7C3AED); }

.vc-summary__recurring {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-2, 0.5rem);
}
.vc-summary__recurring-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
}

.vc-summary__divider {
    height: 1px;
    background: var(--vc-border-subtle, #F3F4F6);
}

.vc-summary__total-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.vc-summary__total-label {
    color: var(--vc-text-primary, #111827);
    font-weight: var(--vc-font-bold, 700);
    font-size: var(--vc-text-base, 1rem);
}
.vc-summary__total-value {
    text-align: right;
}
.vc-summary__total-price {
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-3xl, 1.875rem);
    font-weight: var(--vc-font-extrabold, 800);
    line-height: 1;
}
.vc-summary__total-note {
    font-size: 10px;
    color: var(--vc-text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-tight, -0.025em);
    margin: var(--vc-space-1, 0.25rem) 0 0;
}

/* Promo code block in summary */
.vc-summary__promo {
    padding-top: var(--vc-space-2, 0.5rem);
}
.vc-summary__promo-label {
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider, 0.05em);
    color: var(--vc-text-muted, #9CA3AF);
    margin-bottom: var(--vc-space-2, 0.5rem);
    display: block;
}
.vc-summary__promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--vc-primary-tint, #F5F3FF);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--vc-radius-md, 0.5rem);
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
}
.vc-summary__promo-code {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-primary, #7C3AED);
}
.vc-summary__promo-remove {
    color: var(--vc-danger, #DC2626);
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider, 0.05em);
    text-decoration: none;
}
.vc-summary__promo-remove:hover { color: #B91C1C; text-decoration: none; }
.vc-summary__promo-form {
    display: flex;
    gap: var(--vc-space-2, 0.5rem);
}
.vc-summary__promo-input {
    flex: 1;
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-3, 0.75rem);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    background: var(--vc-bg-surface, #FFFFFF);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-primary, #111827);
    min-width: 0;
}
.vc-summary__promo-input:focus {
    outline: none;
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.vc-summary__promo-btn {
    background: transparent;
    color: var(--vc-primary, #7C3AED);
    border: 1px solid rgba(124, 58, 237, 0.2);
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-4, 1rem);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-bold, 700);
    cursor: pointer;
    transition: background var(--vc-transition-fast, 150ms ease);
}
.vc-summary__promo-btn:hover { background: var(--vc-primary-tint, #F5F3FF); }

/* Complete order CTA */
.vc-summary__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--vc-space-2, 0.5rem);
    width: 100%;
    padding: var(--vc-space-4, 1rem);
    background: var(--vc-accent-orange, #FF5C00);
    color: var(--vc-text-inverse, #FFFFFF);
    border: none;
    border-radius: var(--vc-radius-full, 9999px);
    font-size: var(--vc-text-lg, 1.125rem);
    font-weight: var(--vc-font-bold, 700);
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(255, 92, 0, 0.2);
    transition: background var(--vc-transition-fast, 150ms ease),
                transform var(--vc-transition-fast, 150ms ease);
}
.vc-summary__cta:hover { background: #E64F00; color: var(--vc-text-inverse, #FFFFFF); }
.vc-summary__cta:active { transform: scale(0.98); }
.vc-summary__cta:disabled,
.vc-summary__cta.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Single-page cart: TOS checkbox lives inside the summary panel now.
   Bootstrap's .checkbox-inline forces inline-block + collapses the label to
   the checkbox box width — override to a full-width flex row, spaced above
   the Complete Order button. */
.vc-summary__body label.vc-checkbox.checkbox-inline {
    display: flex;
    width: 100%;
    margin: var(--vc-space-4, 1rem) 0;
    padding-left: 0;
}
.vc-summary__body label.vc-checkbox.checkbox-inline .vc-checkbox__input {
    position: static;
    margin-left: 0;
    flex: 0 0 auto;
}

/* ============================================================
   Billing-details accordion (single-page cart, guest checkout)
   Two collapsible panels: Existing Customer Login / Create a New
   Account. Mirrors lagom2's form-billing UX in vercaa's design.
   Toggled by order.js (#billingAccordion handler) via .is-open.
   ============================================================ */
.vc-billing-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-3, 0.75rem);
    margin-bottom: var(--vc-space-5, 1.25rem);
}
.vc-accordion__panel {
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    background: var(--vc-bg-surface, #FFFFFF);
    overflow: hidden;
    transition: border-color var(--vc-transition-fast, 150ms ease),
                box-shadow var(--vc-transition-fast, 150ms ease);
}
.vc-accordion__panel.is-open {
    /* No purple ring on the open panel — keep the neutral border only. */
    border-color: var(--vc-border-default, #E5E7EB);
    box-shadow: none;
}
.vc-accordion__header {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
    width: 100%;
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: var(--vc-text-base, 1rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
}
/* No focus ring on the header button (mouse click). Keyboard users still get a
   subtle outline via :focus-visible. */
.vc-accordion__header:focus { outline: none; }
.vc-accordion__header:focus-visible {
    outline: 2px solid var(--vc-primary, #7C3AED);
    outline-offset: -2px;
}
.vc-accordion__header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: var(--vc-radius-md, 0.5rem);
    background: var(--vc-primary-soft, #F5F3FF);
    color: var(--vc-primary, #7C3AED);
}
.vc-accordion__header-icon .material-symbols-outlined { font-size: 1.125rem; }
.vc-accordion__header-title { flex: 1 1 auto; }
.vc-accordion__chevron {
    flex: 0 0 auto;
    color: var(--vc-text-muted, #9CA3AF);
    transition: transform var(--vc-transition-fast, 150ms ease);
}
.vc-accordion__panel.is-open .vc-accordion__chevron { transform: rotate(180deg); }

/* Collapse mechanism: animate grid-template-rows 0fr → 1fr. Unlike a
   max-height hack (which eases over a guessed cap and feels laggy/janky), this
   animates to the content's EXACT height — smooth, no overshoot, GPU-friendly.
   The single grid row holds all body children; each child clips with
   min-height:0 + overflow:hidden so the 0fr row collapses to a true zero. */
.vc-accordion__body {
    display: grid;
    grid-template-rows: 0fr;
    /* Explicit duration+easing — NOT the --vc-transition-base token: that token
       already bakes in "ease", and appending cubic-bezier produced two timing
       functions = an invalid shorthand the browser dropped (falling back to
       transition:all 0s → instant snap). */
    transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.vc-accordion__panel.is-open > .vc-accordion__body {
    grid-template-rows: 1fr;
}
.vc-accordion__body > * {
    min-height: 0;
    overflow: hidden;
}
/* Side padding on the visible content; bottom padding only when open so the
   collapsed row stays a true zero. */
.vc-accordion__body > :not(.vc-hidden):not([aria-hidden="true"]) {
    margin-left: var(--vc-space-5, 1.25rem);
    margin-right: var(--vc-space-5, 1.25rem);
}
.vc-accordion__panel.is-open > .vc-accordion__body > :not(.vc-hidden):not([aria-hidden="true"]):last-child {
    padding-bottom: var(--vc-space-5, 1.25rem);
}
/* Inside the accordion the form-cards lose their own border/shadow/padding —
   the panel chrome already provides the frame. */
.vc-accordion__body .vc-form-card {
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
.vc-accordion__body .vc-form-card + .vc-form-card {
    margin-top: var(--vc-space-5, 1.25rem);
    padding-top: var(--vc-space-5, 1.25rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
}


/* ============================================================
 * TRUST SIGNALS
 * ============================================================ */

.vc-trust-list {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-4, 1rem);
    padding: 0 var(--vc-space-2, 0.5rem);
    margin-top: var(--vc-space-6, 1.5rem);
}
.vc-trust-item {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
}
.vc-trust-item__icon {
    color: var(--vc-primary, #7C3AED);
    font-size: 1.25rem;
}
.vc-trust-item__title {
    color: var(--vc-text-primary, #111827);
    font-weight: var(--vc-font-bold, 700);
}
.vc-trust-payments {
    display: flex;
    align-items: center;
    gap: var(--vc-space-4, 1rem);
    padding-top: var(--vc-space-4, 1rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
    opacity: 0.6;
    filter: grayscale(1) contrast(1.2);
}
.vc-trust-payments svg { height: 1.5rem; }


/* ============================================================
 * BILLING / PAYMENT FORM CARDS
 * ============================================================ */

.vc-form-card {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    overflow: hidden;
    margin-bottom: var(--vc-space-5, 1.25rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-form-card__header {
    padding: var(--vc-space-4, 1rem) var(--vc-space-6, 1.5rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-form-card__header-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--vc-radius-md, 0.5rem);
    background: var(--vc-primary-tint, #F5F3FF);
    color: var(--vc-primary, #7C3AED);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-form-card__title {
    font-size: var(--vc-text-base, 1rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-form-card__body { padding: var(--vc-space-6, 1.5rem); }


/* ============================================================
 * SELECTABLE OPTION (account / gateway radio cards)
 * ============================================================ */

.vc-option-card {
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-3, 0.75rem);
    padding: var(--vc-space-4, 1rem);
    border: 2px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    cursor: pointer;
    transition: border-color var(--vc-transition-fast, 150ms ease),
                background var(--vc-transition-fast, 150ms ease);
    margin-bottom: var(--vc-space-3, 0.75rem);
}
.vc-option-card:hover { border-color: rgba(124, 58, 237, 0.4); }
.vc-option-card.is-selected,
.vc-option-card--selected {
    border-color: var(--vc-primary, #7C3AED);
    background: var(--vc-primary-tint, #F5F3FF);
}
.vc-option-card.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.vc-option-card__radio {
    margin-top: 2px;
    accent-color: var(--vc-primary, #7C3AED);
}
.vc-option-card__body {
    flex: 1;
    min-width: 0;
}
.vc-option-card__label {
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-sm, 0.875rem);
}
.vc-option-card__meta {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
    margin-top: var(--vc-space-1, 0.25rem);
}


/* ============================================================
 * MOBILE STICKY CHECKOUT BAR
 * ============================================================ */

.vc-mobile-checkout-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--vc-border-default, #E5E7EB);
    padding: var(--vc-space-4, 1rem);
    z-index: var(--vc-z-sticky, 200);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}
@media (min-width: 1024px) {
    .vc-mobile-checkout-bar { display: none; }
}


/* ============================================================
 * INLINE ALERT BANNERS (cart-page-level messages)
 * ============================================================ */

.vc-inline-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-2, 0.5rem);
    padding: var(--vc-space-4, 1rem);
    border-radius: var(--vc-radius-lg, 0.75rem);
    margin-bottom: var(--vc-space-6, 1.5rem);
    font-size: var(--vc-text-sm, 0.875rem);
    border: 1px solid transparent;
}
.vc-inline-alert--danger  { background: var(--vc-danger-bg, #FEE2E2);  border-color: #FECACA; color: #991B1B; }
.vc-inline-alert--info    { background: var(--vc-info-bg, #DBEAFE);    border-color: #BFDBFE; color: #1E40AF; }
.vc-inline-alert--success { background: var(--vc-success-bg, #DCFCE7); border-color: #BBF7D0; color: #166534; }
.vc-inline-alert--warning { background: var(--vc-warning-bg, #FEF3C7); border-color: #FDE68A; color: #92400E; }
.vc-inline-alert__icon { flex-shrink: 0; margin-top: 2px; }
.vc-inline-alert__list { list-style: disc; margin: var(--vc-space-1, 0.25rem) 0 0 var(--vc-space-6, 1.5rem); padding: 0; }


/* ============================================================
 * SSL / SECURE NOTICE
 * ============================================================ */

.vc-secure-notice {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    padding: var(--vc-space-4, 1rem);
    background: var(--vc-success-bg, #DCFCE7);
    border: 1px solid #BBF7D0;
    border-radius: var(--vc-radius-lg, 0.75rem);
    color: #166534;
    font-size: var(--vc-text-sm, 0.875rem);
}


/* ============================================================
 * DROPDOWN MENU (multi-year domain pricing)
 * ============================================================ */

.vc-cart-shell .dropdown { position: relative; display: inline-block; }
.vc-cart-shell .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-1, 0.25rem);
    background: var(--vc-bg-elevated, #F9FAFB);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    padding: var(--vc-space-1, 0.25rem) var(--vc-space-3, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-sm, 0.875rem);
    cursor: pointer;
}
.vc-cart-shell .dropdown-menu {
    position: absolute;
    display: none;                 /* hidden until Bootstrap adds .open on the parent */
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    box-shadow: var(--vc-shadow-lg);
    padding: var(--vc-space-1, 0.25rem) 0;
    margin-top: var(--vc-space-1, 0.25rem);
    z-index: var(--vc-z-dropdown, 100);
    min-width: 12rem;
    list-style: none;
}
/* Bootstrap 4 toggles .open on the .dropdown wrapper; restore the show state
   (our display:none above + core BS .dropdown-menu{display:none} otherwise
   keep the menu hidden even when open). */
.vc-cart-shell .dropdown.open > .dropdown-menu,
.vc-cart-shell .dropdown.show > .dropdown-menu { display: block; }
.vc-cart-shell .dropdown-menu li a {
    display: block;
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-3, 0.75rem);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
    text-decoration: none;
}
.vc-cart-shell .dropdown-menu li a:hover {
    background: var(--vc-primary-tint, #F5F3FF);
    color: var(--vc-primary, #7C3AED);
}


/* ============================================================
 * MODAL — vercaa cart variant of .modal
 * Bootstrap 4 .modal class preserved (WHMCS JS hooks),
 * .vc-modal-card adds vercaa look on top.
 * ============================================================ */

.vc-modal-card {
    background: var(--vc-bg-surface, #FFFFFF);
    border-radius: var(--vc-radius-xl, 1rem);
    box-shadow: var(--vc-shadow-2xl);
    overflow: hidden;
    max-width: 32rem;
    width: 100%;
    margin: var(--vc-space-16, 4rem) auto 0;
}
.vc-modal-card--lg { max-width: 40rem; }
.vc-modal-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--vc-space-5, 1.25rem) var(--vc-space-6, 1.5rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-modal-card__title {
    font-size: var(--vc-text-lg, 1.125rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-modal-card__close {
    background: none;
    border: none;
    color: var(--vc-text-muted, #9CA3AF);
    cursor: pointer;
    padding: 0;
    line-height: 0;
}
.vc-modal-card__close:hover { color: var(--vc-text-primary, #111827); }
.vc-modal-card__body {
    padding: var(--vc-space-5, 1.25rem) var(--vc-space-6, 1.5rem);
    color: var(--vc-text-secondary, #6B7280);
}
.vc-modal-card__footer {
    display: flex;
    gap: var(--vc-space-3, 0.75rem);
    padding: var(--vc-space-5, 1.25rem) var(--vc-space-6, 1.5rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
    justify-content: flex-end;
}

/* ==== CART-FILE: 07-configure.css ==== */
/*
 * Vercaa Cart — configure pages (configureproduct, addons)
 * Billing cycle picker, config options, addon selection cards.
 */

/* ============================================================
 * PAGE HEADING
 * ============================================================ */

.vc-configure-heading {
    margin-bottom: var(--vc-space-8, 2rem);
}
.vc-configure-heading__title {
    font-size: var(--vc-text-3xl, 1.875rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    margin: 0 0 var(--vc-space-1, 0.25rem);
}
.vc-configure-heading__sub {
    font-size: var(--vc-text-base, 1rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 0;
}


/* ============================================================
 * SECTION CARDS (white card around each config block)
 * ============================================================ */

.vc-configure-section {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    padding: var(--vc-space-6, 1.5rem);
    margin-bottom: var(--vc-space-6, 1.5rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-configure-section__title {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    font-size: var(--vc-text-base, 1rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0 0 var(--vc-space-4, 1rem);
}
.vc-configure-section__title .material-symbols-outlined {
    color: var(--vc-primary, #7C3AED);
}


/* ============================================================
 * BILLING CYCLE PICKER
 * ============================================================ */

.vc-cycle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vc-space-3, 0.75rem);
}
@media (min-width: 768px) {
    .vc-cycle-grid { grid-template-columns: repeat(3, 1fr); }
}

.vc-cycle-option {
    position: relative;
    display: block;
    cursor: pointer;
}
.vc-cycle-option__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.vc-cycle-option__card {
    border: 2px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    padding: var(--vc-space-4, 1rem);
    text-align: center;
    transition: border-color var(--vc-transition-fast, 150ms ease),
                background var(--vc-transition-fast, 150ms ease);
}
.vc-cycle-option:hover .vc-cycle-option__card { border-color: rgba(124, 58, 237, 0.5); }
.vc-cycle-option__input:checked + .vc-cycle-option__card {
    border-color: var(--vc-primary, #7C3AED);
    background: var(--vc-primary-tint, #F5F3FF);
}
.vc-cycle-option__discount {
    display: inline-block;
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-success, #16A34A);
    background: var(--vc-success-bg, #DCFCE7);
    padding: 0.125rem var(--vc-space-2, 0.5rem);
    border-radius: var(--vc-radius-full, 9999px);
    margin-bottom: var(--vc-space-2, 0.5rem);
}
.vc-cycle-option__name {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-sm, 0.875rem);
    margin: 0;
}
.vc-cycle-option__price {
    color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-extrabold, 800);
    font-size: var(--vc-text-lg, 1.125rem);
    margin: var(--vc-space-1, 0.25rem) 0 0;
}


/* ============================================================
 * CONFIG OPTION GROUPS (dropdown, radio, checkbox, qty)
 * ============================================================ */

.vc-config-list {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-5, 1.25rem);
}
.vc-config-radios {
    display: flex;
    gap: var(--vc-space-3, 0.75rem);
    flex-wrap: wrap;
}
.vc-config-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    cursor: pointer;
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
}
.vc-config-radio input { accent-color: var(--vc-primary, #7C3AED); }

.vc-config-qty {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-config-qty__input { width: 7rem; }
.vc-config-qty__note { font-size: var(--vc-text-sm, 0.875rem); color: var(--vc-text-secondary, #6B7280); }


/* ============================================================
 * ADDON CARDS (checkbox-style)
 * ============================================================ */

.vc-addon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vc-space-3, 0.75rem);
}
@media (min-width: 768px) {
    .vc-addon-grid { grid-template-columns: repeat(2, 1fr); }
}

.vc-addon-card {
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-4, 1rem);
    padding: var(--vc-space-4, 1rem);
    border: 2px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    cursor: pointer;
    transition: border-color var(--vc-transition-fast, 150ms ease),
                background var(--vc-transition-fast, 150ms ease);
    background: var(--vc-bg-surface, #FFFFFF);
}
.vc-addon-card:hover { border-color: rgba(124, 58, 237, 0.4); }
.vc-addon-card.is-selected,
.vc-addon-card:has(input:checked) {
    border-color: var(--vc-primary, #7C3AED);
    background: var(--vc-primary-tint, #F5F3FF);
}

.vc-addon-card__check {
    margin-top: 2px;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--vc-primary, #7C3AED);
    flex-shrink: 0;
}

.vc-addon-card__body { flex: 1; min-width: 0; }
.vc-addon-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vc-space-2, 0.5rem);
}
.vc-addon-card__name {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-addon-card__price {
    color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-extrabold, 800);
    font-size: var(--vc-text-sm, 0.875rem);
    flex-shrink: 0;
}
.vc-addon-card__desc {
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: var(--vc-space-1, 0.25rem) 0 0;
}
.vc-addon-card__cycle {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
    margin: var(--vc-space-1, 0.25rem) 0 0;
}


/* ============================================================
 * NAV ROW (back link + submit)
 * ============================================================ */

.vc-configure-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-4, 1rem);
    margin-top: var(--vc-space-6, 1.5rem);
}
.vc-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    color: var(--vc-text-secondary, #6B7280);
    font-weight: var(--vc-font-medium, 500);
    text-decoration: none;
    transition: color var(--vc-transition-fast, 150ms ease);
}
.vc-back-link:hover { color: var(--vc-text-primary, #111827); text-decoration: none; }


/* ============================================================
 * DOMAIN OPTION ROW (configureproduct.tpl domain picker)
 * ============================================================ */

.vc-domain-option-row {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
    padding: var(--vc-space-3, 0.75rem);
    border-radius: var(--vc-radius-lg, 0.75rem);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    margin-bottom: var(--vc-space-3, 0.75rem);
    cursor: pointer;
    transition: border-color var(--vc-transition-fast, 150ms ease);
}
.vc-domain-option-row:hover { border-color: rgba(124, 58, 237, 0.3); }
.vc-domain-option-row input { accent-color: var(--vc-primary, #7C3AED); }
.vc-domain-option-row__label {
    cursor: pointer;
    margin: 0;
}
.vc-domain-option-row__name {
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-sm, 0.875rem);
}
.vc-domain-option-row__desc {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 2px 0 0;
}


/* ============================================================
 * CONFIGURE 2-COLUMN LAYOUT (form + sticky summary)
 * ============================================================ */

.vc-configure-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vc-space-8, 2rem);
}
@media (min-width: 1024px) {
    .vc-configure-grid {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }
}
.vc-configure-aside {
    align-self: start;
}
@media (min-width: 1024px) {
    .vc-configure-aside {
        position: sticky;
        top: calc(var(--vc-header-height, 4rem) + var(--vc-space-6, 1.5rem));
    }
}
.vc-configure-aside__card {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    overflow: hidden;
    box-shadow: var(--vc-shadow-md);
}
.vc-configure-aside__header {
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-configure-aside__title {
    font-size: var(--vc-text-base, 1rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-configure-aside__body { padding: var(--vc-space-5, 1.25rem); }


/* ============================================================
 * ORDER SUMMARY PARTIAL (used inside aside)
 * ============================================================ */

.vc-os {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-os__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-os__name {
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-os__price {
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    flex-shrink: 0;
    text-align: right;
}
.vc-os__price-strike {
    display: block;
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
    text-decoration: line-through;
}
.vc-os__free {
    color: var(--vc-success, #16A34A);
    font-weight: var(--vc-font-bold, 700);
    text-transform: uppercase;
    font-size: var(--vc-text-xs, 0.75rem);
    letter-spacing: var(--vc-tracking-wide, 0.025em);
}
.vc-os__configrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    padding-left: var(--vc-space-3, 0.75rem);
    border-left: 2px solid rgba(124, 58, 237, 0.2);
    font-size: var(--vc-text-xs, 0.75rem);
}
.vc-os__configrow-label { color: var(--vc-text-secondary, #6B7280); }
.vc-os__configrow-label strong { color: var(--vc-text-primary, #111827); font-weight: var(--vc-font-medium, 500); }
.vc-os__configrow-price {
    color: var(--vc-text-primary, #111827);
    font-weight: var(--vc-font-semibold, 600);
}
.vc-os__divider {
    height: 1px;
    background: var(--vc-border-subtle, #F3F4F6);
    margin: var(--vc-space-2, 0.5rem) 0;
}
.vc-os__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--vc-space-3, 0.75rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
}
.vc-os__total-value {
    font-size: var(--vc-text-lg, 1.125rem);
    color: var(--vc-primary, #7C3AED);
}


/* ============================================================
 * EMPTY STATE (addons.tpl no-addons fallback)
 * ============================================================ */

.vc-empty-state {
    text-align: center;
    padding: var(--vc-space-20, 5rem) var(--vc-space-4, 1rem);
}
.vc-empty-state__icon {
    color: var(--vc-text-muted, #9CA3AF);
    font-size: 3rem;
    margin-bottom: var(--vc-space-4, 1rem);
    display: block;
}
.vc-empty-state__text {
    color: var(--vc-text-secondary, #6B7280);
    margin: 0;
}


/* ============================================================
 * PRODUCT INFO — collapsible accordion (ChemiCloud-style)
 * configureproduct.tpl: product name header + box −/+ toggle,
 * features parsed from $productinfo.description as bordered pills.
 * Border turns brand-orange while expanded (.vc-prodinfo--open).
 * ============================================================ */

.vc-prodinfo {
    border: 1px solid var(--vc-cp-border, #E5E7EB);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color var(--vc-transition-fast, 150ms ease);
    overflow: hidden;
}
/* Expanded state — brand-orange frame */
.vc-prodinfo--open {
    border-color: var(--color-secondary, #FF5C00);
}

.vc-prodinfo__header {
    display: flex;
    align-items: center;
    padding: var(--vc-space-4, 1rem);
    cursor: pointer;
    user-select: none;
}
.vc-prodinfo__header:focus-visible {
    outline: 2px solid var(--color-secondary, #FF5C00);
    outline-offset: -2px;
}

.vc-prodinfo__title {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
    margin: 0;
    font-size: var(--vc-text-2xl, 1.5rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-cp-ink, #111827);
    line-height: 1.2;
}

/* Box −/+ icon: 20×20 bordered square; horizontal bar always shown,
   vertical bar shown only when collapsed → renders − when open, + when closed. */
.vc-prodinfo__icon {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--vc-cp-purple, #7C3AED);
    border-radius: 3px;
}
.vc-prodinfo__icon-bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: var(--vc-cp-purple, #7C3AED);
    transform: translate(-50%, -50%);
}
.vc-prodinfo__icon-bar--v {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: opacity var(--vc-transition-fast, 150ms ease);
}
/* When open, hide the vertical bar → minus sign */
.vc-prodinfo--open .vc-prodinfo__icon-bar--v {
    opacity: 0;
}

/* Body: shown only while the card is open. Own state (NOT Bootstrap .collapse,
   which collides with a global `.collapse{visibility:collapse}` rule). */
.vc-prodinfo__body {
    display: none;
    padding: 0 var(--vc-space-4, 1rem) var(--vc-space-4, 1rem);
}
.vc-prodinfo--open > .vc-prodinfo__body {
    display: block;
}

/* Feature pills — flex-wrap, content-width, indented under header */
.vc-prodinfo__features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vc-space-3, 0.75rem);
    padding-left: 2rem; /* ~icon + gap indent, matches ChemiCloud's 40px */
}
.vc-feature-pill {
    border: 1px solid var(--vc-cp-border, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    padding: 0.5rem 1rem;
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-cp-ink-3, #6B7280);
    line-height: 1.4;
}
.vc-feature-pill strong {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-cp-ink, #111827);
}

@media (max-width: 640px) {
    .vc-prodinfo__features { padding-left: 0; }
    .vc-feature-pill { flex: 1 1 100%; }
}


/* ==== CART-FILE: 08-domain.css ==== */
/*
 * Vercaa Cart — Domain pages (register, transfer, configuredomains, domainoptions,
 * configureproductdomain, domain-renewals) + 8 partials in includes/domain/ + epp modal.
 *
 * WHMCS class hooks preserved (order.js depends): .domain-available, .domain-error,
 * .domain-tld-unavailable, .domain-unavailable, .domain-invalid, .domain-checker,
 * .domain-contact-support, .domain-lookup-result, .btn-add-to-cart, .btn-remove-domain,
 * .domain-checker-result-headline, .panel-domain-option, .panel-domain-search, etc.
 */

/* ============================================================
 * INLINE SEARCH BAR (domainregister header)
 * ============================================================ */

.vc-domain-searchbar {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-5, 1.25rem);
}
@media (min-width: 768px) {
    .vc-domain-searchbar { padding: var(--vc-space-3, 0.75rem) var(--vc-space-20, 5rem); }
}
.vc-domain-searchbar__inner {
    max-width: 36rem;
    margin: 0 auto;
}
.vc-domain-searchbar__form {
    position: relative;
    display: flex;
    align-items: center;
}
.vc-domain-searchbar__icon {
    position: absolute;
    left: 0.875rem;
    color: var(--vc-text-muted, #9CA3AF);
    font-size: 1.125rem;
    pointer-events: none;
}
.vc-domain-searchbar__input {
    width: 100%;
    padding: 0.625rem 5.5rem 0.625rem 2.5rem;
    background: var(--vc-border-subtle, #F3F4F6);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-medium, 500);
    color: var(--vc-text-primary, #111827);
    outline: none;
    transition: border-color var(--vc-transition-fast, 150ms ease),
                box-shadow var(--vc-transition-fast, 150ms ease);
}
.vc-domain-searchbar__input:focus {
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}
.vc-domain-searchbar__btn {
    position: absolute;
    right: 0.375rem;
    background: var(--vc-primary, #7C3AED);
    color: var(--vc-text-inverse, #FFFFFF);
    border: none;
    padding: 0.375rem var(--vc-space-4, 1rem);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    cursor: pointer;
    transition: background var(--vc-transition-fast, 150ms ease);
}
.vc-domain-searchbar__btn:hover { background: var(--vc-primary-dark, #6D28D9); }


/* ============================================================
 * DOMAIN SEARCH RESULT MESSAGES (.domain-available, .domain-error, etc.)
 * ============================================================ */

/* .message-h = WHMCS convention: hidden by default, order.js .show()s on match.
   No !important — jQuery.show() must override. */
.message-h { display: none; }

.vc-domain-message {
    border-radius: var(--vc-radius-lg, 0.75rem);
    padding: var(--vc-space-4, 1rem);
    margin-bottom: var(--vc-space-3, 0.75rem);
    border: 1px solid transparent;
    background: var(--vc-bg-surface, #FFFFFF);
}
.vc-domain-message--available {
    border: 2px solid rgba(22, 163, 74, 0.2);
    background: rgba(22, 163, 74, 0.05);
    padding: var(--vc-space-6, 1.5rem);
}
.vc-domain-message--danger { background: var(--vc-danger-bg, #FEE2E2); border-color: #FECACA; }
.vc-domain-message--warning { background: var(--vc-warning-bg, #FEF3C7); border-color: #FDE68A; }
.vc-domain-message--info { background: var(--vc-info-bg, #DBEAFE); border-color: #BFDBFE; }

.vc-domain-message__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vc-space-4, 1rem);
}
.vc-domain-message__left {
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-4, 1rem);
}
.vc-domain-message__icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--vc-radius-lg, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vc-domain-message__icon--success { background: var(--vc-success-bg, #DCFCE7); color: var(--vc-success, #16A34A); }
.vc-domain-message__icon .material-symbols-outlined { font-size: 1.5rem; }
.vc-domain-message__title {
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-lg, 1.125rem);
    margin: 0;
}
.vc-domain-message__sub {
    color: var(--vc-text-secondary, #6B7280);
    font-size: var(--vc-text-sm, 0.875rem);
    margin: var(--vc-space-1, 0.25rem) 0 0;
    line-height: 1.4;
}
.vc-domain-message__price {
    color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-bold, 700);
    font-size: var(--vc-text-xl, 1.25rem);
    margin-top: var(--vc-space-1, 0.25rem);
}

.vc-domain-message__actions {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    flex-shrink: 0;
}

/* compact danger/info/warning messages used for taken/invalid/etc */
.vc-domain-compact-msg {
    padding: var(--vc-space-4, 1rem);
    border-radius: var(--vc-radius-lg, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-domain-compact-msg__left {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-domain-compact-msg__title {
    font-weight: var(--vc-font-bold, 700);
    font-size: var(--vc-text-sm, 0.875rem);
    margin: 0;
}
.vc-domain-compact-msg__sub {
    font-size: var(--vc-text-xs, 0.75rem);
    margin: 2px 0 0;
}
.vc-domain-compact-msg--danger { background: var(--vc-danger-bg, #FEE2E2); border: 1px solid #FECACA; color: #991B1B; }
.vc-domain-compact-msg--warning { background: var(--vc-warning-bg, #FEF3C7); border: 1px solid #FDE68A; color: #92400E; }
.vc-domain-compact-msg--info { background: var(--vc-info-bg, #DBEAFE); border: 1px solid #BFDBFE; color: #1E40AF; }


/* ============================================================
 * SECTION HEADER (Featured / Spotlight / Suggested / Pricing)
 * ============================================================ */

.vc-domain-section { margin-top: var(--vc-space-8, 2rem); }
.vc-domain-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--vc-space-4, 1rem);
    gap: var(--vc-space-3, 0.75rem);
    flex-wrap: wrap;
}
.vc-domain-section__title {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-base, 1rem);
    margin: 0;
}
.vc-domain-section__sub {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
    margin: 0;
}


/* ============================================================
 * FEATURED TLD GRID
 * ============================================================ */

.vc-tld-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--vc-space-3, 0.75rem);
}
@media (min-width: 640px) { .vc-tld-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .vc-tld-grid { grid-template-columns: repeat(4, 1fr); } }

.vc-tld-card {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    padding: var(--vc-space-4, 1rem);
    text-align: center;
    transition: border-color var(--vc-transition-base, 200ms ease),
                box-shadow var(--vc-transition-base, 200ms ease);
}
.vc-tld-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: var(--vc-shadow-md);
}
.vc-tld-card__logo {
    margin-bottom: var(--vc-space-2, 0.5rem);
    display: flex;
    justify-content: center;
    height: 2.5rem;
    align-items: center;
}
.vc-tld-card__logo img { height: 2.5rem; object-fit: contain; }
.vc-tld-card__name {
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-sm, 0.875rem);
    margin: 0;
}
.vc-tld-card__price {
    color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-bold, 700);
    font-size: var(--vc-text-base, 1rem);
    margin: var(--vc-space-1, 0.25rem) 0 0;
}
.vc-tld-card__price-note {
    color: var(--vc-text-muted, #9CA3AF);
    font-weight: var(--vc-font-normal, 400);
    font-size: var(--vc-text-xs, 0.75rem);
}


/* ============================================================
 * SPOTLIGHT TLD CARDS
 * ============================================================ */

.vc-spotlight {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    padding: var(--vc-space-5, 1.25rem);
    text-align: center;
    transition: border-color var(--vc-transition-base, 200ms ease),
                box-shadow var(--vc-transition-base, 200ms ease);
}
.vc-spotlight:hover {
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: var(--vc-shadow-md);
}
.vc-spotlight__group {
    display: inline-block;
    font-size: var(--vc-text-xs, 0.75rem);
    padding: 0.125rem var(--vc-space-2, 0.5rem);
    border-radius: var(--vc-radius-full, 9999px);
    font-weight: var(--vc-font-bold, 700);
    margin-bottom: var(--vc-space-2, 0.5rem);
}
.vc-spotlight__group--hot { background: #FEE2E2; color: #DC2626; }
.vc-spotlight__group--new { background: var(--vc-success-bg, #DCFCE7); color: var(--vc-success, #16A34A); }
.vc-spotlight__group--sale { background: #F3E8FF; color: #9333EA; }
.vc-spotlight__group--default { background: var(--vc-primary-tint, #F5F3FF); color: var(--vc-primary, #7C3AED); }
.vc-spotlight__ext {
    font-size: var(--vc-text-2xl, 1.5rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    margin: 0 0 var(--vc-space-3, 0.75rem);
}
.vc-spotlight__ext span { color: var(--vc-primary, #7C3AED); }
.vc-spotlight__price {
    color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-bold, 700);
    margin-bottom: var(--vc-space-3, 0.75rem);
}


/* ============================================================
 * SUGGESTED DOMAINS LIST
 * ============================================================ */

.vc-suggestion-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-2, 0.5rem);
}
.vc-suggestion-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--vc-space-4, 1rem);
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    transition: border-color var(--vc-transition-fast, 150ms ease);
}
.vc-suggestion-item:hover { border-color: rgba(124, 58, 237, 0.2); }
.vc-suggestion-item__left {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
}
.vc-suggestion-item__name {
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-sm, 0.875rem);
}
.vc-suggestion-item__ext {
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-primary, #7C3AED);
    font-size: var(--vc-text-sm, 0.875rem);
}
.vc-suggestion-item__actions {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-suggestion-item__price {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-sm, 0.875rem);
}

.vc-more-suggestions {
    margin-top: var(--vc-space-3, 0.75rem);
    text-align: center;
}
.vc-more-suggestions a {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-1, 0.25rem);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-semibold, 600);
    text-decoration: none;
}
.vc-more-suggestions a:hover { text-decoration: underline; }


/* ============================================================
 * TLD PRICING TABLE
 * ============================================================ */

.vc-tld-pricing-table {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    overflow: hidden;
    box-shadow: var(--vc-shadow-sm);
}
/* Per-cell column label — hidden on desktop (the <th> already labels the column),
   shown on narrow viewports where the table stacks. Ports lagom2 .tld-label. */
.vc-tld-pricing-table .tld-label { display: none; font-size: var(--vc-text-xs, 0.75rem); color: var(--vc-text-muted, #9CA3AF); font-weight: var(--vc-font-semibold, 600); margin-right: var(--vc-space-2, 0.5rem); }
@media (max-width: 640px) {
    .vc-tld-pricing-table .tld-label { display: inline-block; }
}
.vc-tld-pricing-table__header {
    padding: var(--vc-space-4, 1rem) var(--vc-space-6, 1.5rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-tld-pricing-table__header h3 {
    font-size: var(--vc-text-base, 1rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-tld-pricing-table__header p {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 2px 0 0;
}

.vc-tld-pricing-toolbar {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
}
.vc-tld-pricing-search {
    position: relative;
}
.vc-tld-pricing-search__icon {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vc-text-muted, #9CA3AF);
    font-size: 1rem;
    pointer-events: none;
}
.vc-tld-pricing-search__input {
    padding: 0.375rem 0.75rem 0.375rem 1.75rem;
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    background: var(--vc-bg-surface, #FFFFFF);
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
    outline: none;
}
.vc-tld-pricing-search__input:focus {
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.vc-tld-pricing-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--vc-text-sm, 0.875rem);
}
.vc-tld-pricing-table th {
    text-align: left;
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-5, 1.25rem);
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wide, 0.025em);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-tld-pricing-table th.text-right { text-align: right; }
.vc-tld-pricing-table td {
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-5, 1.25rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
    color: var(--vc-text-secondary, #6B7280);
    vertical-align: middle;
}
.vc-tld-pricing-table td.text-right { text-align: right; font-weight: var(--vc-font-semibold, 600); color: var(--vc-text-primary, #111827); }
.vc-tld-pricing-table tr:last-child td { border-bottom: none; }
.vc-tld-pricing-table tr:hover { background: var(--vc-bg-elevated, #F9FAFB); }

.vc-tld-pricing-table__loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--vc-space-10, 2.5rem) var(--vc-space-4, 1rem);
}


/* ============================================================
 * SPINNER (world loader + table loader)
 * ============================================================ */

.vc-spinner {
    position: relative;
    width: 2rem;
    height: 2rem;
}
.vc-spinner::before,
.vc-spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid rgba(124, 58, 237, 0.2);
}
.vc-spinner::after {
    border-color: transparent;
    border-top-color: var(--vc-primary, #7C3AED);
    animation: vc-spin 1s linear infinite;
}
.vc-spinner--lg { width: 3rem; height: 3rem; }
@keyframes vc-spin {
    to { transform: rotate(360deg); }
}

.vc-world-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--vc-space-10, 2.5rem);
}
.vc-world-loader__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-world-loader__text {
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-muted, #9CA3AF);
    font-weight: var(--vc-font-medium, 500);
}


/* ============================================================
 * UPSELL BANNER
 * ============================================================ */

.vc-upsell-banner {
    background: var(--vc-primary, #7C3AED);
    border-radius: var(--vc-radius-xl, 1rem);
    padding: var(--vc-space-8, 2rem);
    position: relative;
    overflow: hidden;
    color: var(--vc-text-inverse, #FFFFFF);
}
.vc-upsell-banner__decor-tr,
.vc-upsell-banner__decor-bl {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}
.vc-upsell-banner__decor-tr { top: -2.5rem; right: -2.5rem; width: 12rem; height: 12rem; }
.vc-upsell-banner__decor-bl { bottom: -2.5rem; left: -2.5rem; width: 8rem; height: 8rem; }
.vc-upsell-banner__row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-6, 1.5rem);
    align-items: center;
    text-align: center;
}
@media (min-width: 768px) {
    .vc-upsell-banner__row { flex-direction: row; justify-content: space-between; text-align: left; }
}
.vc-upsell-banner__title {
    font-size: var(--vc-text-xl, 1.25rem);
    font-weight: var(--vc-font-bold, 700);
    margin: 0 0 var(--vc-space-1, 0.25rem);
}
.vc-upsell-banner__sub {
    color: var(--vc-primary-light, #A78BFA);
    font-size: var(--vc-text-sm, 0.875rem);
    margin: 0;
}
.vc-upsell-banner__btn {
    background: var(--vc-bg-surface, #FFFFFF);
    color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-bold, 700);
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-8, 2rem);
    border-radius: var(--vc-radius-md, 0.5rem);
    white-space: nowrap;
    text-decoration: none;
    box-shadow: var(--vc-shadow-sm);
    transition: background var(--vc-transition-fast, 150ms ease);
}
.vc-upsell-banner__btn:hover { background: var(--vc-bg-elevated, #F9FAFB); text-decoration: none; color: var(--vc-primary, #7C3AED); }


/* ============================================================
 * BOTTOM STICKY ACTION BAR
 * ============================================================ */

.vc-domain-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--vc-z-sticky, 200);
    background: var(--vc-bg-surface, #FFFFFF);
    border-top: 1px solid var(--vc-border-default, #E5E7EB);
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.1);
}
.vc-domain-sticky-bar__inner {
    max-width: var(--vc-container-max, 1280px);
    margin: 0 auto;
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-4, 1rem);
}
.vc-domain-sticky-bar__count {
    width: 2rem;
    height: 2rem;
    background: var(--vc-primary, #7C3AED);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vc-text-inverse, #FFFFFF);
    font-weight: var(--vc-font-extrabold, 800);
    font-size: var(--vc-text-sm, 0.875rem);
}
.vc-domain-sticky-bar__label {
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-secondary, #6B7280);
}
.vc-domain-sticky-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    background: var(--vc-accent-orange, #FF5C00);
    color: var(--vc-text-inverse, #FFFFFF);
    font-weight: var(--vc-font-bold, 700);
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-6, 1.5rem);
    border-radius: var(--vc-radius-full, 9999px);
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(255, 92, 0, 0.2);
    transition: background var(--vc-transition-fast, 150ms ease);
}
.vc-domain-sticky-bar__btn:hover {
    background: #E64F00;
    color: var(--vc-text-inverse, #FFFFFF);
    text-decoration: none;
}
.vc-domain-sticky-bar__btn:disabled { opacity: 0.5; cursor: not-allowed; }


/* ============================================================
 * TRANSFER PAGE — how-it-works + EPP info
 * ============================================================ */

.vc-transfer-hero {
    text-align: center;
    margin-bottom: var(--vc-space-10, 2.5rem);
}
.vc-transfer-hero__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: var(--vc-primary-tint, #F5F3FF);
    border-radius: var(--vc-radius-2xl, 1.5rem);
    margin-bottom: var(--vc-space-5, 1.25rem);
}
.vc-transfer-hero__icon .material-symbols-outlined {
    color: var(--vc-primary, #7C3AED);
    font-size: 1.875rem;
}
.vc-transfer-hero__title {
    font-size: var(--vc-text-3xl, 1.875rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    margin: 0 0 var(--vc-space-3, 0.75rem);
    letter-spacing: var(--vc-tracking-tight, -0.025em);
}
.vc-transfer-hero__sub {
    color: var(--vc-text-secondary, #6B7280);
    max-width: 28rem;
    margin: 0 auto;
}

.vc-transfer-form {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    padding: var(--vc-space-8, 2rem);
    margin-bottom: var(--vc-space-8, 2rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-transfer-input-row {
    display: flex;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-transfer-input-wrap {
    flex: 1;
    position: relative;
}
.vc-transfer-input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vc-text-muted, #9CA3AF);
    font-size: 1.125rem;
    pointer-events: none;
}
.vc-transfer-input {
    width: 100%;
    padding: 0.75rem var(--vc-space-4, 1rem) 0.75rem 2.5rem;
    border: 1px solid var(--vc-border-default, #E5E7EB);
    background: var(--vc-bg-elevated, #F9FAFB);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-weight: var(--vc-font-medium, 500);
    font-size: var(--vc-text-sm, 0.875rem);
    outline: none;
    transition: border-color var(--vc-transition-fast, 150ms ease),
                box-shadow var(--vc-transition-fast, 150ms ease);
}
.vc-transfer-input:focus {
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.vc-howit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vc-space-4, 1rem);
    margin-bottom: var(--vc-space-8, 2rem);
}
.vc-howit-card {
    text-align: center;
    padding: var(--vc-space-5, 1.25rem);
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
}
.vc-howit-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--vc-primary-tint, #F5F3FF);
    border-radius: var(--vc-radius-md, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--vc-space-3, 0.75rem);
    color: var(--vc-primary, #7C3AED);
}
.vc-howit-card__icon--success { background: var(--vc-success-bg, #DCFCE7); color: var(--vc-success, #16A34A); }
.vc-howit-card__title {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-sm, 0.875rem);
    margin: 0 0 var(--vc-space-1, 0.25rem);
}
.vc-howit-card__sub {
    color: var(--vc-text-muted, #9CA3AF);
    font-size: var(--vc-text-xs, 0.75rem);
    margin: 0;
}


/* ============================================================
 * DOMAIN SIDEBAR CART (right-column on domainregister)
 * ============================================================ */

.vc-domain-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-5, 1.25rem);
}
.vc-domain-sidecard {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    overflow: hidden;
    box-shadow: var(--vc-shadow-sm);
}
.vc-domain-sidecard__header {
    padding: var(--vc-space-4, 1rem) var(--vc-space-6, 1.5rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vc-domain-sidecard__title {
    font-size: var(--vc-text-base, 1rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-domain-sidecard__body { padding: var(--vc-space-5, 1.25rem); }
.vc-domain-sidecard__empty {
    text-align: center;
    padding: var(--vc-space-6, 1.5rem) 0;
}
.vc-domain-sidecard__empty-icon {
    color: var(--vc-border-strong, #D1D5DB);
    font-size: 2.5rem;
    margin-bottom: var(--vc-space-2, 0.5rem);
    display: block;
}
.vc-domain-sidecard__empty-text {
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-muted, #9CA3AF);
    margin: 0;
}


/* ============================================================
 * CONFIGUREPRODUCTDOMAIN — inline form panels
 * ============================================================ */

.vc-pd-panel {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    padding: var(--vc-space-6, 1.5rem);
    margin-bottom: var(--vc-space-6, 1.5rem);
    box-shadow: var(--vc-shadow-sm);
}

.vc-pd-inline-form { display: none; align-items: stretch; gap: var(--vc-space-2, 0.5rem); }
.vc-pd-inline-form:not(.hidden) { display: flex; }
.vc-pd-inline-form__el { flex-shrink: 0; }
.vc-pd-inline-form__el--grow { flex: 1 1 0%; min-width: 0; }
.vc-pd-inline-form__el input.form-control,
.vc-pd-inline-form__el .form-control {
    width: 100%;
    padding: 0.875rem var(--vc-space-4, 1rem);
    border: 2px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    font-size: 1rem;
    font-weight: var(--vc-font-medium, 500);
    color: var(--vc-text-primary, #111827);
    background: var(--vc-bg-surface, #FFFFFF);
    outline: none;
    transition: border-color var(--vc-transition-fast, 150ms ease),
                box-shadow var(--vc-transition-fast, 150ms ease);
}
.vc-pd-inline-form__el input.form-control:focus,
.vc-pd-inline-form__el .form-control:focus {
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.vc-pd-inline-form__el .btn {
    padding: 0.875rem var(--vc-space-6, 1.5rem);
    border-radius: var(--vc-radius-xl, 1rem);
    font-weight: var(--vc-font-bold, 700);
    font-size: var(--vc-text-sm, 0.875rem);
    background: var(--vc-primary, #7C3AED);
    color: var(--vc-text-inverse, #FFFFFF);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--vc-transition-fast, 150ms ease);
}
.vc-pd-inline-form__el .btn:hover { background: var(--vc-primary-dark, #6D28D9); }

.vc-pd-tld-select {
    display: flex;
    align-items: center;
    gap: var(--vc-space-1, 0.25rem);
    padding: 0.875rem var(--vc-space-4, 1rem);
    border: 2px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    background: var(--vc-bg-surface, #FFFFFF);
    cursor: pointer;
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
    white-space: nowrap;
    transition: border-color var(--vc-transition-fast, 150ms ease);
    min-width: 5rem;
    justify-content: center;
}
.vc-pd-tld-select:hover { border-color: var(--vc-primary, #7C3AED); }
.vc-pd-caret {
    display: inline-block;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
}

.vc-pd-dropdown { position: relative; }
.vc-pd-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: var(--vc-space-1, 0.25rem);
    min-width: 12rem;
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    box-shadow: var(--vc-shadow-lg);
    z-index: var(--vc-z-dropdown, 100);
    overflow: hidden;
}
.vc-pd-dropdown.open .dropdown-menu { display: block; }
.vc-pd-dropdown .dropdown-header {
    padding: var(--vc-space-2, 0.5rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-pd-dropdown .dropdown-header .form-control {
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-3, 0.75rem);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-size: 0.8rem;
    width: 100%;
}
.vc-pd-dropdown .dropdown-menu-items {
    max-height: 200px;
    overflow-y: auto;
}
.vc-pd-dropdown .dropdown-menu-item {
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-4, 1rem);
    cursor: pointer;
    font-size: var(--vc-text-sm, 0.875rem);
    transition: background var(--vc-transition-fast, 150ms ease);
}
.vc-pd-dropdown .dropdown-menu-item:hover,
.vc-pd-dropdown .dropdown-menu-item.active {
    background: var(--vc-primary-tint, #F5F3FF);
    color: var(--vc-primary, #7C3AED);
}
.vc-pd-dropdown .dropdown-menu-item a { color: inherit; text-decoration: none; }
.vc-pd-dropdown .dropdown-menu-no-data {
    display: none;
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
    font-size: 0.8rem;
    color: var(--vc-text-muted, #9CA3AF);
}


/* ============================================================
 * DOMAIN OPTION RADIO (panel-domain-option list)
 * ============================================================ */

.vc-pd-option-list {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-3, 0.75rem);
    margin-bottom: var(--vc-space-6, 1.5rem);
}
.vc-pd-option {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
    padding: var(--vc-space-4, 1rem);
    border: 2px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    cursor: pointer;
    background: var(--vc-bg-surface, #FFFFFF);
    transition: border-color var(--vc-transition-fast, 150ms ease),
                background var(--vc-transition-fast, 150ms ease);
}
.vc-pd-option:hover { border-color: rgba(124, 58, 237, 0.4); }
.vc-pd-option:has(input:checked),
.vc-pd-option.is-selected {
    border-color: var(--vc-primary, #7C3AED);
    background: var(--vc-primary-tint, #F5F3FF);
}
.vc-pd-option input { accent-color: var(--vc-primary, #7C3AED); }
.vc-pd-option__label {
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-sm, 0.875rem);
    margin: 0;
}


/* ============================================================
 * CAPTCHA (image + input)
 * ============================================================ */

.vc-domain-captcha {
    margin-top: var(--vc-space-4, 1rem);
}
.vc-domain-captcha__row {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-domain-captcha__img {
    height: 3rem;
    border-radius: var(--vc-radius-md, 0.5rem);
    border: 1px solid var(--vc-border-default, #E5E7EB);
}
.vc-domain-captcha__input {
    flex: 1;
    padding: 0.75rem var(--vc-space-4, 1rem);
    border: 2px solid var(--vc-border-default, #E5E7EB);
    background: var(--vc-bg-surface, #FFFFFF);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-primary, #111827);
    outline: none;
    transition: border-color var(--vc-transition-fast, 150ms ease),
                box-shadow var(--vc-transition-fast, 150ms ease);
}
.vc-domain-captcha__input:focus {
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}


/* ============================================================
 * EPP MODAL — auth code input
 * ============================================================ */

.vc-epp-input {
    width: 100%;
    padding: 0.75rem var(--vc-space-4, 1rem);
    border: 2px solid var(--vc-border-default, #E5E7EB);
    background: var(--vc-bg-surface, #FFFFFF);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-family: var(--vc-font-mono, monospace);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-primary, #111827);
    outline: none;
    transition: border-color var(--vc-transition-fast, 150ms ease),
                box-shadow var(--vc-transition-fast, 150ms ease);
}
.vc-epp-input:focus {
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}


/* ============================================================
 * CONFIGUREDOMAINS — per-domain card
 * ============================================================ */

.vc-domain-config-card {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    overflow: hidden;
    margin-bottom: var(--vc-space-6, 1.5rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-domain-config-card__header {
    padding: var(--vc-space-4, 1rem) var(--vc-space-6, 1.5rem);
    background: linear-gradient(135deg, var(--vc-primary-bg, #F5F3FF) 0%, #FFFFFF 100%);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vc-space-4, 1rem);
}
.vc-domain-config-card__head-left {
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-3, 0.75rem);
    flex: 1;
    min-width: 0;
}
.vc-domain-config-card__head-right {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    flex-shrink: 0;
}
.vc-domain-config-card__icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--vc-primary-tint, #F5F3FF);
    color: var(--vc-primary, #7C3AED);
    border-radius: var(--vc-radius-md, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vc-domain-config-card__title {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-lg, 1.125rem);
    margin: 0;
    word-break: break-all;
}
.vc-domain-config-card__sub {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 2px 0 0;
}
.vc-domain-config-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    margin-top: var(--vc-space-2, 0.5rem);
}
.vc-domain-config-card__period {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
}
.vc-domain-config-card__period strong {
    color: var(--vc-text-primary, #111827);
    font-weight: var(--vc-font-semibold, 600);
}
.vc-domain-config-card__body { padding: var(--vc-space-6, 1.5rem); }

/* Badges used in card header */
.vc-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: var(--vc-radius-sm, 0.375rem);
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-semibold, 600);
    line-height: 1.4;
}
.vc-badge--primary {
    background: var(--vc-primary-tint, #F5F3FF);
    color: var(--vc-primary, #7C3AED);
}
.vc-badge--info {
    background: var(--vc-info-bg, #DBEAFE);
    color: #1E40AF;
}
.vc-badge--success {
    background: var(--vc-success-bg, #DCFCE7);
    color: var(--vc-success, #16A34A);
}

/* Inputs + field grid */
.vc-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--vc-space-4, 1rem);
}
.vc-field-grid__full { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .vc-field-grid { grid-template-columns: 1fr; }
}
.vc-form-group { margin-bottom: 0; }
.vc-required { color: var(--vc-danger, #DC2626); }
.vc-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: #FFFFFF;
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-primary, #111827);
    transition: border-color var(--vc-transition-fast, 150ms ease),
                box-shadow var(--vc-transition-fast, 150ms ease);
    outline: none;
}
.vc-input:focus {
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Addons block */
.vc-domain-addons {
    margin-top: var(--vc-space-6, 1.5rem);
    padding-top: var(--vc-space-5, 1.25rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-domain-addons__title {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-sm, 0.875rem);
    margin: 0 0 var(--vc-space-3, 0.75rem);
}
.vc-domain-addons__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vc-space-3, 0.75rem);
}
@media (max-width: 768px) {
    .vc-domain-addons__grid { grid-template-columns: 1fr; }
}

/* Addon checkbox card */
.vc-addon-check {
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-3, 0.75rem);
    padding: var(--vc-space-4, 1rem);
    background: #FFFFFF;
    border: 2px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    cursor: pointer;
    transition: border-color var(--vc-transition-fast, 150ms ease),
                background var(--vc-transition-fast, 150ms ease);
    margin: 0;
}
.vc-addon-check:hover {
    border-color: rgba(124, 58, 237, 0.3);
}
.vc-addon-check input {
    margin: 2px 0 0;
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--vc-primary, #7C3AED);
    flex-shrink: 0;
    cursor: pointer;
}
.vc-addon-check.is-checked,
.vc-addon-check:has(input:checked) {
    border-color: var(--vc-primary, #7C3AED);
    background: var(--vc-primary-tint, #F5F3FF);
}
.vc-addon-check__body { flex: 1; min-width: 0; }
.vc-addon-check__title {
    display: flex;
    align-items: center;
    gap: var(--vc-space-1, 0.25rem);
    font-weight: var(--vc-font-semibold, 600);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-addon-check__info {
    font-size: 0.875rem;
    color: var(--vc-text-muted, #9CA3AF);
    cursor: help;
}
.vc-addon-check__price {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-semibold, 600);
    margin: var(--vc-space-1, 0.25rem) 0 0;
}

/* Icon button (remove etc) */
.vc-icon-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    color: var(--vc-text-secondary, #6B7280);
    cursor: pointer;
    transition: all var(--vc-transition-fast, 150ms ease);
}
.vc-icon-btn:hover {
    background: var(--vc-bg-subtle, #F9FAFB);
    color: var(--vc-text-primary, #111827);
}
.vc-icon-btn--danger:hover {
    background: var(--vc-danger-bg, #FEE2E2);
    color: var(--vc-danger, #DC2626);
    border-color: #FECACA;
}

/* No-hosting badge (link variant) */
.vc-badge--neutral {
    background: var(--vc-bg-subtle, #F9FAFB);
    color: var(--vc-text-secondary, #6B7280);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    text-decoration: none;
    transition: all var(--vc-transition-fast, 150ms ease);
}
a.vc-badge--neutral:hover {
    background: var(--vc-danger-bg, #FEE2E2);
    color: var(--vc-danger, #DC2626);
    border-color: #FECACA;
}

/* Registry-required contact field control (WHMCS pre-rendered HTML) */
.vc-domain-field-control select.vc-input,
.vc-domain-field-control input.vc-input,
.vc-domain-field-control .vc-input { width: 100%; }
.vc-domain-field-control input[type="checkbox"],
.vc-domain-field-control input[type="radio"] {
    width: auto;
    accent-color: var(--vc-primary, #7C3AED);
    margin-right: var(--vc-space-2, 0.5rem);
}

/* Prominent-hosting upsell (domain has no hosting) */
.vc-domain-upsell {
    display: flex;
    align-items: center;
    gap: var(--vc-space-4, 1rem);
    padding: var(--vc-space-4, 1rem) var(--vc-space-6, 1.5rem);
    border-top: 1px dashed var(--vc-border-default, #E5E7EB);
    background: var(--vc-primary-bg, #F5F3FF);
}
.vc-domain-upsell__icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vc-radius-md, 0.5rem);
    background: #FFFFFF;
    color: var(--vc-primary, #7C3AED);
}
.vc-domain-upsell__body { flex: 1; min-width: 0; }
.vc-domain-upsell__title {
    font-weight: var(--vc-font-semibold, 600);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-domain-upsell__desc {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 2px 0 0;
}

/* Custom nameservers section */
.vc-ns-section__header {
    padding: var(--vc-space-4, 1rem) var(--vc-space-6, 1.5rem);
    background: linear-gradient(135deg, var(--vc-primary-bg, #F5F3FF) 0%, #FFFFFF 100%);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-ns-section__title {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    font-size: var(--vc-text-lg, 1.125rem);
    margin: 0;
}
.vc-ns-section__desc {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 2px 0 0;
}
.vc-ns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--vc-space-4, 1rem);
}
@media (max-width: 640px) {
    .vc-ns-grid { grid-template-columns: 1fr; }
}


/* ============================================================
 * DOMAIN RENEWALS — per-domain row
 * ============================================================ */

.vc-renewal-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vc-space-4, 1rem);
    padding: var(--vc-space-5, 1.25rem);
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    margin-bottom: var(--vc-space-4, 1rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-renewal-row__left {
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-4, 1rem);
}
.vc-renewal-row__check {
    margin-top: 2px;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--vc-primary, #7C3AED);
}
.vc-renewal-row__icon {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--vc-success-bg, #DCFCE7);
    color: var(--vc-success, #16A34A);
    border-radius: var(--vc-radius-md, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-renewal-row__name {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-renewal-row__expiry {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
    margin: 2px 0 0;
}
.vc-renewal-row__period {
    font-size: var(--vc-text-sm, 0.875rem);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    padding: var(--vc-space-1, 0.25rem) var(--vc-space-3, 0.75rem);
    background: var(--vc-bg-surface, #FFFFFF);
    color: var(--vc-text-primary, #111827);
    font-weight: var(--vc-font-semibold, 600);
}


/* ============================================================
 * DOMAIN REGISTER 2-COL GRID
 * ============================================================ */

.vc-domreg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vc-space-8, 2rem);
}
@media (min-width: 1024px) {
    .vc-domreg-grid {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    }
}
.vc-domreg-aside {
    align-self: start;
}
@media (min-width: 1024px) {
    .vc-domreg-aside {
        position: sticky;
        top: calc(var(--vc-header-height, 4rem) + var(--vc-space-6, 1.5rem));
    }
}


/* ============================================================
 * RECOMMENDATIONS MODAL — product cards inside
 * ============================================================ */

.vc-rec-item {
    display: flex;
    flex-direction: column;
    padding: var(--vc-space-3, 0.75rem);
    border: 1px solid var(--vc-border-subtle, #F3F4F6);
    border-radius: var(--vc-radius-md, 0.5rem);
    margin-bottom: var(--vc-space-3, 0.75rem);
}
.vc-rec-item__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-rec-item__title {
    font-weight: var(--vc-font-semibold, 600);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-primary, #111827);
}
.vc-rec-item__tagline {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
}
.vc-rec-item__cta {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
}
.vc-rec-item__price {
    text-align: right;
    font-weight: var(--vc-font-bold, 700);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-primary, #111827);
}

/* ============================================================
 * FREE DOMAIN NOTICE (.vc-free-domain — rich variant matches lagom2)
 * Shown below the product-domain form when $freedomaintlds set
 * ============================================================ */
.vc-free-domain {
    margin-top: var(--vc-space-5, 1.25rem);
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    background: linear-gradient(135deg, var(--vc-primary-bg, #F5F3FF) 0%, #FFFFFF 100%);
    border: 1px solid var(--vc-primary-border, #DDD6FE);
    border-radius: var(--vc-radius-xl, 1rem);
}
.vc-free-domain__title {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    margin: 0 0 var(--vc-space-3, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    font-size: var(--vc-text-base, 1rem);
    color: var(--vc-primary, #7C3AED);
}
.vc-free-domain__title .material-symbols-outlined {
    font-size: 1.25rem;
}
.vc-free-domain__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-2, 0.5rem);
}
.vc-free-domain__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-primary, #111827);
}
.vc-free-domain__label {
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-secondary, #6B7280);
    margin-right: var(--vc-space-1, 0.25rem);
}
.vc-free-domain__note {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
    font-style: italic;
}
.vc-badge--neutral {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #FFFFFF;
    border: 1px solid var(--vc-border, #E5E7EB);
    border-radius: var(--vc-radius-sm, 0.375rem);
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
}

/* ==== CART-FILE: 09-checkout.css ==== */
/*
 * Vercaa Cart — Checkout / Complete / Fraudcheck / Error pages.
 * Order confirmation, fraud screen, generic error, summary partial used in
 * checkout flow.
 */

/* ============================================================
 * COMPLETE PAGE — success hero
 * ============================================================ */

.vc-complete-hero {
    text-align: center;
    margin-bottom: var(--vc-space-10, 2.5rem);
}
.vc-complete-hero__icon-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: var(--vc-space-6, 1.5rem);
}
.vc-complete-hero__icon {
    width: 6rem;
    height: 6rem;
    background: var(--vc-success-bg, #DCFCE7);
    color: var(--vc-success, #16A34A);
    border-radius: var(--vc-radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.vc-complete-hero__icon .material-symbols-outlined { font-size: 3rem; }
.vc-complete-hero__badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 2rem;
    height: 2rem;
    background: var(--vc-primary, #7C3AED);
    color: var(--vc-text-inverse, #FFFFFF);
    border-radius: var(--vc-radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.vc-complete-hero__badge .material-symbols-outlined { font-size: 0.875rem; }
.vc-complete-hero__title {
    font-size: var(--vc-text-4xl, 2.25rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    letter-spacing: var(--vc-tracking-tight, -0.025em);
    margin: 0 0 var(--vc-space-3, 0.75rem);
}
.vc-complete-hero__order {
    color: var(--vc-text-secondary, #6B7280);
    font-size: var(--vc-text-lg, 1.125rem);
    margin: 0;
}

.vc-complete-card {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    padding: var(--vc-space-8, 2rem);
    margin-bottom: var(--vc-space-8, 2rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-complete-card__text {
    color: var(--vc-text-secondary, #6B7280);
    text-align: center;
    line-height: var(--vc-leading-relaxed, 1.625);
    margin: 0;
}

.vc-complete-actions {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-4, 1rem);
    justify-content: center;
    margin-bottom: var(--vc-space-10, 2.5rem);
}
@media (min-width: 640px) {
    .vc-complete-actions { flex-direction: row; }
}

.vc-complete-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vc-space-4, 1rem);
}
@media (min-width: 640px) {
    .vc-complete-steps { grid-template-columns: repeat(3, 1fr); }
}
.vc-complete-step {
    text-align: center;
    padding: var(--vc-space-5, 1.25rem);
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-complete-step__icon {
    font-size: 1.5rem;
    margin-bottom: var(--vc-space-2, 0.5rem);
    display: block;
}
.vc-complete-step__icon--primary { color: var(--vc-primary, #7C3AED); }
.vc-complete-step__icon--success { color: var(--vc-success, #16A34A); }
.vc-complete-step__icon--accent { color: var(--vc-accent-orange, #FF5C00); }
.vc-complete-step__title {
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-complete-step__sub {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: var(--vc-space-1, 0.25rem) 0 0;
}


/* ============================================================
 * FRAUD CHECK PAGE
 * ============================================================ */

.vc-fraud-hero {
    text-align: center;
    margin-bottom: var(--vc-space-8, 2rem);
}
.vc-fraud-hero__icon {
    width: 5rem;
    height: 5rem;
    background: var(--vc-warning-bg, #FEF3C7);
    color: var(--vc-warning, #D97706);
    border-radius: var(--vc-radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--vc-space-5, 1.25rem);
}
.vc-fraud-hero__icon .material-symbols-outlined { font-size: 2.25rem; }
.vc-fraud-hero__title {
    font-size: var(--vc-text-3xl, 1.875rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    margin: 0 0 var(--vc-space-2, 0.5rem);
}
.vc-fraud-hero__sub {
    color: var(--vc-text-secondary, #6B7280);
    margin: 0;
}


/* ============================================================
 * ERROR PAGE
 * ============================================================ */

.vc-error-page {
    text-align: center;
    padding: var(--vc-space-16, 4rem) var(--vc-space-4, 1rem) var(--vc-space-8, 2rem);
}
.vc-error-page__icon {
    width: 5rem;
    height: 5rem;
    background: var(--vc-danger-bg, #FEE2E2);
    color: var(--vc-danger, #DC2626);
    border-radius: var(--vc-radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--vc-space-6, 1.5rem);
}
.vc-error-page__icon .material-symbols-outlined { font-size: 2.25rem; }
.vc-error-page__title {
    font-size: var(--vc-text-3xl, 1.875rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    margin: 0 0 var(--vc-space-3, 0.75rem);
}
.vc-error-page__msg-card {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    padding: var(--vc-space-6, 1.5rem);
    margin: 0 auto var(--vc-space-8, 2rem);
    max-width: 32rem;
    box-shadow: var(--vc-shadow-sm);
}
.vc-error-page__msg-card p {
    color: var(--vc-text-secondary, #6B7280);
    margin: 0;
}


/* ============================================================
 * ORDERSUMMARY-CHECKOUT PARTIAL (lagom2 list-based variant)
 * Used by parent standard_cart in some checkout sub-pages.
 * Preserves WHMCS hooks: .panel-body, .panel-footer, .summary-content,
 * .summary-list, .list-item, .item-name, .item-value, data-subtotal,
 * data-total, recurring* ids, totalDueToday, checkout button id.
 * ============================================================ */

.vc-osc {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    overflow: hidden;
    box-shadow: var(--vc-shadow-sm);
}
.vc-osc__body { padding: var(--vc-space-5, 1.25rem); }
.vc-osc__list {
    list-style: none;
    margin: 0 0 var(--vc-space-3, 0.75rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-2, 0.5rem);
}
.vc-osc__list--faded { color: var(--vc-text-muted, #9CA3AF); }
.vc-osc__list-item {
    display: flex;
    justify-content: space-between;
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
}
.vc-osc__list-item .item-name { font-weight: var(--vc-font-medium, 500); }
.vc-osc__list-item .item-value {
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
}
.vc-osc__list-item.light {
    color: var(--vc-primary, #7C3AED);
}
.vc-osc__heading {
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wide, 0.025em);
    padding: var(--vc-space-2, 0.5rem) 0 0;
}
.vc-osc__footer {
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
    background: var(--vc-bg-elevated, #F9FAFB);
}
.vc-osc__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--vc-space-4, 1rem);
}
.vc-osc__total-label {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
}
.vc-osc__total-value {
    font-size: var(--vc-text-2xl, 1.5rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-primary, #7C3AED);
}
.vc-osc__actions { display: flex; flex-direction: column; gap: var(--vc-space-3, 0.75rem); }


/* ============================================================
 * CHECKOUT STEP (/cart.php?a=checkout) — billing + payment form
 * ============================================================ */

/* Grid helpers used inside form cards */
.vc-grid-2,
.vc-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vc-space-4, 1rem);
}
@media (min-width: 640px) {
    .vc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.vc-field--span-2 { grid-column: 1 / -1; }
@media (min-width: 640px) {
    .vc-field--span-2 { grid-column: span 2; }
}
.vc-grid-span-2 { grid-column: 1 / -1; }

/* Optional label hint */
.vc-label-optional {
    font-weight: var(--vc-font-normal, 400);
    color: var(--vc-text-muted, #9CA3AF);
    text-transform: none;
    letter-spacing: 0;
}

/* Already-registered / create-account toggle bar */
.vc-checkout-mode-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-4, 1rem);
    flex-wrap: wrap;
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    margin-bottom: var(--vc-space-5, 1.25rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-checkout-mode-bar__hint {
    margin: 0;
    color: var(--vc-text-secondary, #6B7280);
    font-size: var(--vc-text-sm, 0.875rem);
}
.vc-checkout-mode-bar__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
}

/* Login actions row */
.vc-checkout-login-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--vc-space-4, 1rem);
}

/* Account selector grid (existing-account-select cards) */
.vc-account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vc-space-3, 0.75rem);
}
@media (min-width: 640px) {
    .vc-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vc-account-grid__col { min-width: 0; }
.vc-account-grid__col .vc-option-card { margin-bottom: 0; height: 100%; }

/* Form-card inline title (when no header bar) */
.vc-form-card__inline-title {
    font-size: var(--vc-text-base, 1rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0 0 var(--vc-space-2, 0.5rem);
}

/* Payment total banner */
.vc-payment-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-4, 1rem);
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    background: var(--vc-primary-tint, #F5F3FF);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--vc-radius-lg, 0.75rem);
    margin-bottom: var(--vc-space-5, 1.25rem);
}
.vc-payment-total__label {
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
}
.vc-payment-total__amount {
    font-size: var(--vc-text-2xl, 1.5rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-primary, #7C3AED);
    line-height: 1;
}

/* Apply-credit block */
.vc-credit {
    background: var(--vc-bg-elevated, #F9FAFB);
    border: 1px solid var(--vc-border-subtle, #F3F4F6);
    border-radius: var(--vc-radius-md, 0.5rem);
    padding: var(--vc-space-4, 1rem);
    margin-bottom: var(--vc-space-5, 1.25rem);
}
.vc-credit__hint {
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 0 0 var(--vc-space-3, 0.75rem);
}
.vc-credit__opt {
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-3, 0.75rem);
    cursor: pointer;
    padding: var(--vc-space-2, 0.5rem) 0;
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 0;
}
.vc-credit__opt input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--vc-primary, #7C3AED);
}

/* Payment gateway selector */
.vc-gateway-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vc-space-3, 0.75rem);
    margin-bottom: var(--vc-space-5, 1.25rem);
}
@media (min-width: 640px) {
    .vc-gateway-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vc-gateway-card {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
    border: 2px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    cursor: pointer;
    transition: border-color var(--vc-transition-fast, 150ms ease),
                background var(--vc-transition-fast, 150ms ease);
    margin: 0;
}
.vc-gateway-card:hover { border-color: rgba(124, 58, 237, 0.4); }
.vc-gateway-card__radio { accent-color: var(--vc-primary, #7C3AED); margin: 0; }
.vc-gateway-card__label {
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
}
.vc-gateway-card:has(input:checked) {
    border-color: var(--vc-primary, #7C3AED);
    background: var(--vc-primary-tint, #F5F3FF);
}

/* Credit-card fields container */
.vc-cc-fields {
    background: var(--vc-bg-elevated, #F9FAFB);
    border: 1px solid var(--vc-border-subtle, #F3F4F6);
    border-radius: var(--vc-radius-md, 0.5rem);
    padding: var(--vc-space-4, 1rem);
    margin-bottom: var(--vc-space-5, 1.25rem);
}
.vc-cc-new-toggle { margin: var(--vc-space-3, 0.75rem) 0; }
.vc-cc-new-toggle .vc-option-card { margin-bottom: 0; }

/* CVC input with help button */
.vc-input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.vc-input-group .vc-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
    min-width: 0;
}
.vc-input-group__btn {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-strong, #D1D5DB);
    border-left: 0;
    padding: 0 var(--vc-space-3, 0.75rem);
    border-radius: 0 var(--vc-radius-md, 0.5rem) var(--vc-radius-md, 0.5rem) 0;
    color: var(--vc-text-secondary, #6B7280);
    font-weight: var(--vc-font-bold, 700);
    cursor: pointer;
    font-size: var(--vc-text-sm, 0.875rem);
}
.vc-input-group__btn:hover { background: var(--vc-bg-elevated, #F9FAFB); }

/* Checkbox row */
.vc-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-3, 0.75rem);
    cursor: pointer;
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 0;
    line-height: 1.5;
}
.vc-checkbox__input {
    margin-top: 3px;
    accent-color: var(--vc-primary, #7C3AED);
}
.vc-checkbox__text { line-height: 1.5; }
.vc-checkbox__text a {
    color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-semibold, 600);
    text-decoration: none;
}
.vc-checkbox__text a:hover { text-decoration: underline; }

/* Submit row */
.vc-checkout-submit {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-4, 1rem);
    margin-top: var(--vc-space-6, 1.5rem);
    padding: var(--vc-space-6, 1.5rem);
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-checkout-submit .vc-summary__cta { margin: 0; }

/* Password strength progress (re-skin Bootstrap .progress) */
.vc-progress {
    height: 0.5rem;
    background: var(--vc-border-subtle, #F3F4F6);
    border-radius: var(--vc-radius-full, 9999px);
    overflow: hidden;
    margin-bottom: var(--vc-space-2, 0.5rem);
}
.vc-progress__bar {
    height: 100%;
    background: var(--vc-success, #16A34A);
    transition: width var(--vc-transition-base, 200ms ease);
}

/* Linked-accounts wrap (login-with-provider buttons) */
.vc-linked-accounts-wrap {
    margin-bottom: var(--vc-space-4, 1rem);
}

/* Badges used in account selector */
.vc-badge--neutral { background: var(--vc-border-subtle, #F3F4F6); color: var(--vc-text-secondary, #6B7280); }
.vc-badge--info    { background: var(--vc-info-bg, #DBEAFE);     color: var(--vc-info, #2563EB); }

/* page-checkout body class — currently no overrides, reserved for future tweaks */


/* ============================================================
 * UPSELL HOOK OUTPUT (RSThemes mc-promo, addon recommendations)
 * Generic skin so the WHMCS-injected markup feels native to vercaa.
 * ============================================================ */

.vc-upsell-wrap {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    padding: var(--vc-space-5, 1.25rem) var(--vc-space-6, 1.5rem);
    margin-bottom: var(--vc-space-5, 1.25rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-upsell-wrap__item + .vc-upsell-wrap__item {
    margin-top: var(--vc-space-4, 1rem);
    padding-top: var(--vc-space-4, 1rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
}

/* Style WHMCS / RSThemes injected upsell panels */
.vc-upsell-wrap .mc-promo,
.vc-upsell-wrap .upsell-product,
.vc-upsell-wrap .promo-product {
    background: var(--vc-bg-elevated, #F9FAFB);
    border: 1px solid var(--vc-border-subtle, #F3F4F6);
    border-radius: var(--vc-radius-md, 0.5rem);
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    margin-bottom: var(--vc-space-3, 0.75rem);
}
.vc-upsell-wrap .mc-promo:last-child,
.vc-upsell-wrap .upsell-product:last-child,
.vc-upsell-wrap .promo-product:last-child { margin-bottom: 0; }

/* "Last Chance" or similar section title from upsell hook */
.vc-upsell-wrap h2,
.vc-upsell-wrap h3,
.vc-upsell-wrap h4 {
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wide, 0.025em);
    margin: 0 0 var(--vc-space-3, 0.75rem);
}
.vc-upsell-wrap .mc-promo h3,
.vc-upsell-wrap .upsell-product h3 {
    font-size: var(--vc-text-base, 1rem);
    color: var(--vc-text-primary, #111827);
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 var(--vc-space-1, 0.25rem);
}

/* Upsell add-to-cart buttons */
.vc-upsell-wrap .btn,
.vc-upsell-wrap .btn-add,
.vc-upsell-wrap button.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    background: var(--vc-primary, #7C3AED);
    color: var(--vc-text-inverse, #FFFFFF);
    border: none;
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-4, 1rem);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-bold, 700);
    cursor: pointer;
    text-decoration: none;
    margin-top: var(--vc-space-2, 0.5rem);
    transition: background var(--vc-transition-fast, 150ms ease);
}
.vc-upsell-wrap .btn:hover,
.vc-upsell-wrap .btn-add:hover,
.vc-upsell-wrap button.btn-primary:hover {
    background: var(--vc-primary-dark, #6D28D9);
    color: var(--vc-text-inverse, #FFFFFF);
}

/* Upsell pricing labels */
.vc-upsell-wrap .price,
.vc-upsell-wrap .upsell-price {
    color: var(--vc-text-primary, #111827);
    font-weight: var(--vc-font-bold, 700);
}
.vc-upsell-wrap .free-label {
    color: var(--vc-primary, #7C3AED);
    font-weight: var(--vc-font-bold, 700);
    text-transform: uppercase;
}

/* Bullet list inside upsell panels — fa-check / list items */
.vc-upsell-wrap ul {
    list-style: none;
    margin: var(--vc-space-3, 0.75rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--vc-space-2, 0.5rem) var(--vc-space-4, 1rem);
}
@media (max-width: 639px) {
    .vc-upsell-wrap ul { grid-template-columns: 1fr; }
}
.vc-upsell-wrap ul li {
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-2, 0.5rem);
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
}
.vc-upsell-wrap ul li i,
.vc-upsell-wrap ul li .fa-check {
    color: var(--vc-success, #16A34A);
    flex-shrink: 0;
    margin-top: 2px;
}


/* ============================================================
 * SUMMARY TOTAL — keep amount + currency on one row
 * ============================================================ */

.vc-cart-aside .vc-summary__total-row { gap: var(--vc-space-3, 0.75rem); align-items: center; }
.vc-cart-aside .vc-summary__total-label { flex: 0 1 auto; line-height: 1.3; }
.vc-cart-aside .vc-summary__total-value { white-space: nowrap; flex-shrink: 0; }
.vc-cart-aside .vc-summary__total-price {
    display: inline-block;
    font-size: var(--vc-text-2xl, 1.5rem);
}
.vc-cart-aside .vc-summary__total-note {
    white-space: normal;
    margin-top: 2px;
}


/* ============================================================
 * ACCOUNT SELECTOR CARD — clean address layout
 * ============================================================ */

.vc-account-grid .vc-option-card { align-items: center; }
.vc-account-grid .vc-option-card__label {
    display: flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    flex-wrap: wrap;
}
.vc-account-grid .vc-option-card__label .label,
.vc-account-grid .vc-option-card__label .vc-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--vc-space-2, 0.5rem);
    background: var(--vc-info-bg, #DBEAFE);
    color: var(--vc-info, #2563EB);
    border-radius: var(--vc-radius-sm, 0.25rem);
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wide, 0.025em);
}
.vc-account-grid .vc-option-card__meta { display: block; margin-top: var(--vc-space-1, 0.25rem); line-height: 1.5; }


/* ============================================================
 * SUBMIT-CARD INTERNAL SPACING
 * ============================================================ */

.vc-checkout-submit .vc-summary__cta { width: 100%; }
.vc-checkout-submit .vc-checkbox { width: 100%; }


/* ============================================================
 * GATEWAY RADIO ALIGNMENT FIX (default markup vertically centers)
 * ============================================================ */

.vc-gateway-card { line-height: 1.4; }


/* ============================================================
 * CHECKOUT MODE BAR — stack on mobile
 * ============================================================ */

@media (max-width: 639px) {
    .vc-checkout-mode-bar { flex-direction: column; align-items: flex-start; gap: var(--vc-space-3, 0.75rem); }
}

/* ==== CART-FILE: 10-products.css ==== */
/*
 * Vercaa Cart — Products + secondary pages
 * Covers products.tpl, service-renewals*, marketconnect-promo, linkedaccounts,
 * sidebar-categories trio.
 */

/* ============================================================
 * PRODUCTS PAGE — header + grid
 * ============================================================ */

.vc-products-header {
    text-align: center;
    margin-bottom: var(--vc-space-12, 3rem);
}
.vc-products-header__title {
    font-size: var(--vc-text-4xl, 2.25rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
    letter-spacing: var(--vc-tracking-tight, -0.025em);
    margin: 0 0 var(--vc-space-3, 0.75rem);
}
.vc-products-header__sub {
    color: var(--vc-text-secondary, #6B7280);
    font-size: var(--vc-text-lg, 1.125rem);
    margin: 0;
}

.vc-products-layout {
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-8, 2rem);
}
@media (min-width: 1024px) {
    .vc-products-layout { flex-direction: row; }
}
.vc-products-aside {
    flex-shrink: 0;
    width: 100%;
}
@media (min-width: 1024px) {
    .vc-products-aside { width: 16rem; }
}
.vc-products-main { flex: 1; min-width: 0; }

.vc-product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vc-space-6, 1.5rem);
}
@media (min-width: 768px) {
    .vc-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
    .vc-product-grid { grid-template-columns: repeat(3, 1fr); }
}

.vc-product-card {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    overflow: hidden;
    transition: border-color var(--vc-transition-base, 200ms ease),
                box-shadow var(--vc-transition-base, 200ms ease);
    box-shadow: var(--vc-shadow-sm);
}
.vc-product-card:hover {
    border-color: rgba(124, 58, 237, 0.2);
    box-shadow: var(--vc-shadow-lg);
}

.vc-product-card__featured {
    background: linear-gradient(to right, var(--vc-primary, #7C3AED), var(--vc-primary-light, #A78BFA));
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-5, 1.25rem);
    text-align: center;
}
.vc-product-card__featured-label {
    color: var(--vc-text-inverse, #FFFFFF);
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider, 0.05em);
}

.vc-product-card__body { padding: var(--vc-space-6, 1.5rem); }

.vc-product-card__icon {
    width: 3rem;
    height: 3rem;
    background: var(--vc-primary-tint, #F5F3FF);
    color: var(--vc-primary, #7C3AED);
    border-radius: var(--vc-radius-md, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--vc-space-4, 1rem);
    transition: background var(--vc-transition-fast, 150ms ease);
}
.vc-product-card:hover .vc-product-card__icon {
    background: rgba(124, 58, 237, 0.2);
}

.vc-product-card__name {
    font-size: var(--vc-text-xl, 1.25rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0 0 var(--vc-space-2, 0.5rem);
}
.vc-product-card__desc {
    color: var(--vc-text-secondary, #6B7280);
    font-size: var(--vc-text-sm, 0.875rem);
    line-height: var(--vc-leading-relaxed, 1.625);
    margin: 0 0 var(--vc-space-5, 1.25rem);
}

.vc-product-card__price-block {
    margin-bottom: var(--vc-space-6, 1.5rem);
    padding-bottom: var(--vc-space-5, 1.25rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-product-card__price {
    font-size: var(--vc-text-3xl, 1.875rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-text-primary, #111827);
}
.vc-product-card__price-note {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-success, #16A34A);
    font-weight: var(--vc-font-semibold, 600);
    margin: var(--vc-space-1, 0.25rem) 0 0;
}


/* ============================================================
 * SIDEBAR — categories nav
 * ============================================================ */

.vc-sidecat {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    overflow: hidden;
    margin-bottom: var(--vc-space-6, 1.5rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-sidecat__header {
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-sidecat__title {
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider, 0.05em);
    margin: 0;
}
.vc-sidecat__nav {
    padding: var(--vc-space-2, 0.5rem) 0;
}
.vc-sidecat__link {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-5, 1.25rem);
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-medium, 500);
    color: var(--vc-text-secondary, #6B7280);
    text-decoration: none;
    transition: background var(--vc-transition-fast, 150ms ease),
                color var(--vc-transition-fast, 150ms ease);
}
.vc-sidecat__link:hover {
    color: var(--vc-primary, #7C3AED);
    background: var(--vc-primary-tint, #F5F3FF);
    text-decoration: none;
}
.vc-sidecat__link.is-active {
    color: var(--vc-primary, #7C3AED);
    background: var(--vc-primary-tint, #F5F3FF);
    font-weight: var(--vc-font-semibold, 600);
}
.vc-sidecat__link .material-symbols-outlined { font-size: 1rem; }

/* Standalone category switcher (sidebar-categories-selector.tpl {else} branch —
   global category nav with no $panel, on domain/addon/renewal pages) */
.vc-sidecat-switcher { margin-bottom: var(--vc-space-6, 1.5rem); }
.vc-sidecat-switcher .dropdown { position: relative; }
.vc-sidecat-switcher__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vc-space-2, 0.5rem);
    width: 100%;
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
    text-decoration: none;
    box-shadow: var(--vc-shadow-sm);
}
.vc-sidecat-switcher__btn:hover { border-color: var(--vc-primary, #7C3AED); color: var(--vc-text-primary, #111827); text-decoration: none; }
.vc-sidecat-switcher__btn .material-symbols-outlined { font-size: 1.125rem; color: var(--vc-text-muted, #9CA3AF); }
.vc-sidecat-switcher__menu {
    width: 100%;
    max-height: 20rem;
    overflow-y: auto;
    margin-top: var(--vc-space-1, 0.25rem);
    padding: var(--vc-space-2, 0.5rem) 0;
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    box-shadow: var(--vc-shadow-lg, 0 10px 25px rgba(0,0,0,0.1));
}
.vc-sidecat-switcher__title {
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-4, 1rem) var(--vc-space-1, 0.25rem);
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider, 0.05em);
    list-style: none;
}
.vc-sidecat-switcher__link {
    display: block;
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-4, 1rem);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
    text-decoration: none;
    transition: background var(--vc-transition-fast, 150ms ease), color var(--vc-transition-fast, 150ms ease);
}
.vc-sidecat-switcher__link:hover { color: var(--vc-primary, #7C3AED); background: var(--vc-primary-tint, #F5F3FF); text-decoration: none; }
.vc-sidecat-switcher__link.active { color: var(--vc-primary, #7C3AED); font-weight: var(--vc-font-semibold, 600); }


/* ============================================================
 * SERVICE / DOMAIN RENEWAL ROW (matches vc-renewal-row from domain.css)
 * Already defined in 08-domain.css — reused here.
 * ============================================================ */


/* ============================================================
 * RENEWAL ITEM (service-renewal-item.tpl panel)
 * ============================================================ */

.vc-cart-shell .panel-form.service-renewal {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-lg, 0.75rem);
    margin-bottom: var(--vc-space-3, 0.75rem);
    overflow: hidden;
    box-shadow: var(--vc-shadow-sm);
}
.vc-cart-shell .domain-renewal-content {
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--vc-space-2, 0.5rem);
}
.vc-cart-shell .domain-renewal-title {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
}
.vc-cart-shell .domain-renewal-url {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
    text-decoration: none;
}
.vc-cart-shell .domain-renewal-url:hover {
    color: var(--vc-primary, #7C3AED);
    text-decoration: underline;
}
.vc-cart-shell .domain-renewal-next-due {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
}
.vc-cart-shell .domain-renewal-status .label {
    display: inline-block;
    padding: 0.125rem var(--vc-space-2, 0.5rem);
    border-radius: var(--vc-radius-full, 9999px);
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-semibold, 600);
}
.vc-cart-shell .label-warning { background: var(--vc-warning-bg, #FEF3C7); color: var(--vc-warning, #D97706); }
.vc-cart-shell .label-danger { background: var(--vc-danger-bg, #FEE2E2); color: var(--vc-danger, #DC2626); }
.vc-cart-shell .label-default { background: var(--vc-border-subtle, #F3F4F6); color: var(--vc-text-muted, #9CA3AF); }
.vc-cart-shell .domain-renewal-form {
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-5, 1.25rem);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
    background: var(--vc-bg-elevated, #F9FAFB);
    display: flex;
    justify-content: flex-end;
    gap: var(--vc-space-2, 0.5rem);
}
.vc-cart-shell .addon-renewals {
    padding: var(--vc-space-4, 1rem) var(--vc-space-5, 1.25rem);
    background: var(--vc-bg-elevated, #F9FAFB);
    border-top: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-cart-shell .addon-renewals-title {
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider, 0.05em);
    margin: 0 0 var(--vc-space-3, 0.75rem);
}

/* ------------------------------------------------------------
 * RENEWAL PAGES (service-renewals.tpl + domain-renewals.tpl)
 * 2-col list + sticky AJAX-fed order summary. Card inner markup
 * reuses the .domain-renewal-* classes styled above; these add
 * the remaining page chrome (toolbar switch, status label colors,
 * period select / action row, summary loader + footnote).
 * ------------------------------------------------------------ */

/* Missing status-label color (warning/danger/default defined above) */
.vc-cart-shell .label-success { background: var(--vc-success-bg, #DCFCE7); color: var(--vc-success, #16A34A); }

/* Added-to-cart highlight on a renewal card */
.vc-cart-shell .domain-renewal-added,
.vc-cart-shell .panel-form.border-primary { border-color: var(--vc-primary, #7C3AED); box-shadow: 0 0 0 1px var(--vc-primary, #7C3AED); }

/* Period select + action buttons inside the card footer */
.vc-cart-shell .domain-renewal-period { flex: 1; min-width: 0; }
.vc-cart-shell .domain-renewal-period .select-renewal-pricing { width: 100%; }
.vc-cart-shell .domain-renewal-actions { display: flex; align-items: center; gap: var(--vc-space-2, 0.5rem); flex-shrink: 0; }
.vc-cart-shell .domain-renewal .domain-renewal-form { align-items: center; }

/* Renewal in-button loader (order.js toggles .loader display) */
.vc-cart-shell .btn-add-renewal-to-cart .loader-button { display: none; }
.vc-cart-shell .btn-add-renewal-to-cart .loader-button .vc-spinner { width: 1.125rem; height: 1.125rem; }

/* Show-only-renewable toggle row */
.vc-renewal-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--vc-space-4, 1rem); }
.vc-renewal-showing { font-size: var(--vc-text-sm, 0.875rem); color: var(--vc-text-secondary, #6B7280); margin: 0 0 var(--vc-space-4, 1rem); }
.vc-renewal-showing a { color: var(--vc-primary, #7C3AED); font-weight: var(--vc-font-semibold, 600); text-decoration: none; }
.vc-renewal-showing a:hover { text-decoration: underline; }

/* Toggle switch (matches brand tokens) */
.vc-switch { display: inline-flex; align-items: center; gap: var(--vc-space-2, 0.5rem); cursor: pointer; }
.vc-switch__label { font-size: var(--vc-text-sm, 0.875rem); color: var(--vc-text-secondary, #6B7280); }
.vc-switch__track { position: relative; width: 2.5rem; height: 1.375rem; flex-shrink: 0; }
.vc-switch__input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vc-switch__slider { position: absolute; inset: 0; background: var(--vc-border-default, #E5E7EB); border-radius: var(--vc-radius-full, 9999px); transition: background .2s ease; }
.vc-switch__slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: 1.125rem; height: 1.125rem; background: #fff; border-radius: 50%; box-shadow: var(--vc-shadow-sm); transition: transform .2s ease; }
.vc-switch__input:checked + .vc-switch__slider { background: var(--vc-primary, #7C3AED); }
.vc-switch__input:checked + .vc-switch__slider::before { transform: translateX(1.125rem); }

/* Sticky-summary loader overlay (order.js fades #orderSummaryLoader) */
.vc-summary__loader { display: none; position: absolute; inset: 0; z-index: 2; align-items: center; justify-content: center; background: rgba(255,255,255,0.7); border-radius: inherit; }
.vc-summary { position: relative; }
.vc-summary__footnote { font-size: var(--vc-text-xs, 0.75rem); color: var(--vc-text-muted, #9CA3AF); margin: var(--vc-space-3, 0.75rem) 0 0; }

/* Small spinner variant */
.vc-spinner--sm { width: 1.125rem; height: 1.125rem; }
.vc-spinner--sm::before, .vc-spinner--sm::after { border-width: 2px; }

/* Empty-state action link */
.vc-empty-state__link { display: inline-flex; align-items: center; gap: var(--vc-space-2, 0.5rem); margin-top: var(--vc-space-4, 1rem); color: var(--vc-primary, #7C3AED); font-weight: var(--vc-font-semibold, 600); text-decoration: none; }
.vc-empty-state__link:hover { text-decoration: underline; }


/* ============================================================
 * MARKETCONNECT PROMO CARD
 * ============================================================ */

.vc-mc-promo {
    background: var(--vc-bg-surface, #FFFFFF);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-xl, 1rem);
    padding: var(--vc-space-6, 1.5rem);
    margin-top: var(--vc-space-8, 2rem);
    box-shadow: var(--vc-shadow-sm);
}
.vc-mc-promo__row {
    display: flex;
    align-items: flex-start;
    gap: var(--vc-space-4, 1rem);
}
.vc-mc-promo__logo {
    width: 4rem;
    height: 4rem;
    border-radius: var(--vc-radius-md, 0.5rem);
    object-fit: contain;
    flex-shrink: 0;
}
.vc-mc-promo__logo-placeholder {
    width: 4rem;
    height: 4rem;
    background: var(--vc-primary-tint, #F5F3FF);
    color: var(--vc-primary, #7C3AED);
    border-radius: var(--vc-radius-md, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vc-mc-promo__body { flex: 1; min-width: 0; }
.vc-mc-promo__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--vc-space-3, 0.75rem);
}
.vc-mc-promo__name {
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
.vc-mc-promo__tagline {
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: 2px 0 0;
}
.vc-mc-promo__price {
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-primary, #7C3AED);
    font-size: var(--vc-text-lg, 1.125rem);
    flex-shrink: 0;
    margin: 0;
}
.vc-mc-promo__desc {
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
    margin: var(--vc-space-2, 0.5rem) 0 0;
}
.vc-mc-promo__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: var(--vc-space-3, 0.75rem);
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-primary, #7C3AED);
    text-decoration: none;
}
.vc-mc-promo__cta:hover { text-decoration: underline; }


/* ============================================================
 * LINKED ACCOUNTS — social signin row
 * ============================================================ */

.vc-linked {
    margin-bottom: var(--vc-space-4, 1rem);
}
.vc-linked__divider {
    display: flex;
    align-items: center;
    gap: var(--vc-space-3, 0.75rem);
    margin: var(--vc-space-4, 1rem) 0;
}
.vc-linked__divider-line {
    flex: 1;
    height: 1px;
    background: var(--vc-border-default, #E5E7EB);
}
.vc-linked__divider-text {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
}
.vc-linked__intro {
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-secondary, #6B7280);
    text-align: center;
    margin: 0 0 var(--vc-space-3, 0.75rem);
}
.vc-linked__btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vc-space-2, 0.5rem);
    justify-content: center;
}
.vc-linked__feedback {
    margin-top: var(--vc-space-2, 0.5rem);
    font-size: var(--vc-text-sm, 0.875rem);
    text-align: center;
}

.vc-linked-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--vc-text-sm, 0.875rem);
}
.vc-linked-table th {
    text-align: left;
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
    font-size: var(--vc-text-xs, 0.75rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-muted, #9CA3AF);
    text-transform: uppercase;
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
}
.vc-linked-table td {
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
}


/* ============================================================
 * SIDEBAR SELECTOR (mobile/secondary)
 * ============================================================ */

.vc-cart-shell .categories-collapsed {
    margin-bottom: var(--vc-space-4, 1rem);
}
.vc-cart-shell .categories-sidebar .dropdown {
    position: relative;
}
.vc-cart-shell .categories-sidebar .btn {
    background: var(--vc-bg-surface, #FFFFFF);
    color: var(--vc-text-primary, #111827);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    display: inline-flex;
    align-items: center;
    gap: var(--vc-space-2, 0.5rem);
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-4, 1rem);
    border-radius: var(--vc-radius-md, 0.5rem);
    font-weight: var(--vc-font-semibold, 600);
    text-decoration: none;
}
.vc-cart-shell .categories-sidebar .btn:hover {
    border-color: var(--vc-primary, #7C3AED);
    color: var(--vc-primary, #7C3AED);
}
.vc-cart-shell .dropdown-title {
    padding: var(--vc-space-2, 0.5rem) var(--vc-space-3, 0.75rem);
    font-size: var(--vc-text-xs, 0.75rem);
    color: var(--vc-text-muted, #9CA3AF);
    text-transform: uppercase;
    letter-spacing: var(--vc-tracking-wider, 0.05em);
    font-weight: var(--vc-font-bold, 700);
}


/* ============================================================
 * EMPTY STATE — products page
 * ============================================================ */

.vc-products-empty {
    text-align: center;
    padding: var(--vc-space-24, 6rem) var(--vc-space-4, 1rem);
}
.vc-products-empty__icon {
    width: 5rem;
    height: 5rem;
    background: var(--vc-border-subtle, #F3F4F6);
    border-radius: var(--vc-radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--vc-space-5, 1.25rem);
}
.vc-products-empty__icon .material-symbols-outlined {
    color: var(--vc-text-muted, #9CA3AF);
    font-size: 2rem;
}
.vc-products-empty__title {
    font-size: var(--vc-text-xl, 1.25rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0 0 var(--vc-space-2, 0.5rem);
}
.vc-products-empty__sub {
    color: var(--vc-text-secondary, #6B7280);
    margin: 0;
}

/* ==== CART-FILE: cart.css ==== */
/* ============================================================================
 * cart.css — Orderform (cart) specific component CSS
 * ============================================================================
 * Cart-scoped rules that the shared base/utilities can't express. Loaded by
 * the orderform head.tpl AFTER the cross-linked shared sheets (tokens →
 * base → utilities → variants → arbitrary from templates/vercaa/css/vercaa/).
 *
 * Phase 3/5 (docs/26): seeded with the configureproductdomain.tpl cart-domain
 * block (A2) that previously lived only in the Tailwind build's layer
 * components. Ported verbatim. The legacy cart.min.css + css/cart/01-10
 * subfiles still load (via the <style> import) and consolidate into here in a
 * later pass.
 * ============================================================================ */

/* ===== A2) configureproductdomain.tpl — cart domain page (docs/25) =====
 * Light-only (v1). State/effect styling utilities can't express; everything
 * else is utility chains inline in the tpl + partials.
 * order.js hook classes (.domain-available, .panel-domain-option, etc.)
 * carry NO styling here — they're behavior hooks; visuals come from the
 * utility chains the markup also carries. */

/* Hero banner gradient (mirrors live site, on-brand purple) */
.vc-hero-gradient {
  background: linear-gradient(100deg, #2e1e6c 0%, #4c1d95 45%, #644eb4 100%);
}

/* Segmented option pill — domain-specific ALIAS of the shared .vc-segmented
   component (defined in templates/vercaa/css/vercaa/base.css, cross-linked by
   the cart head). base.css carries the .vc-domain-pill / .vc-domain-pill-label
   selectors alongside .vc-segmented, so the visuals are shared. Here we only
   bridge the legacy column-count var so existing markup (style="--vc-pill-cols:N")
   keeps working without a markup change.

   .panel-domain-option is the order.js behaviour hook; pill visuals come from
   .vc-segmented. New markup should use .vc-segmented / .vc-segmented-label
   directly with --vc-seg-cols. See docs/28 §Segmented control. */
.vc-domain-pill { --vc-seg-cols: var(--vc-pill-cols, 3); }

/* Sticky continue bar — fixed full-width (data-fixed-actions / .bottom-action-sticky
   are order.js hooks; this positions them). */
.vc-sticky-continue { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }

/* Suggested-domains list (suggested.tpl) rebuilt on the shared .vc-list /
 * .vc-list-row styleguide component (docs/28). The system theme's engine rules
 * in custom.css style the bare `.domain-suggestion` <li> (border/shadow/radius/
 * margin) for the OTHER, non-cart domain engine — and custom.css also loads on
 * cart pages, so those rules would double-box each row inside our .vc-list.
 * Neutralise them only inside #domainSuggestions; the .vc-list container owns
 * the border/radius/dividers. Unlayered cart.css beats the layered custom.css. */
#domainSuggestions.vc-list .domain-suggestion {
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-top: 0;
  overflow: visible;
}
/* Dividers: .vc-list-row's own :last-child rule can't see across the <li>
 * wrapper (the inner div is always the last child of its <li>), so it would
 * drop every divider. Drive dividers off the <li> instead — border on each row
 * except the last visible one. The .vc-list container owns outer border/radius. */
#domainSuggestions.vc-list .domain-suggestion .vc-list-row { border-bottom: 0; }
#domainSuggestions.vc-list .domain-suggestion:not(:last-child) .vc-list-row {
  border-bottom: 1px solid var(--vc-border-subtle, #f3f4f6);
}

/* TLD selector — now the shared .vc-dropdown component (base.css + base.js).
 * Migrated off vc-config-widgets.js DropdownSelect (docs/28 §3.5). All toggle/
 * menu/item/search/no-data visuals come from base.css. Only the cart-specific
 * menu width is set here (the picker is narrow but its list wants more room).
 * .vcpd-tld is kept on the markup only as this width scope hook. */
.vercaa-domain-checker .vcpd-tld .vc-dropdown-menu { width: 260px; max-height: 320px; }


/* ── configureproduct.tpl page palette (--vc-cp-*) ──────────────────────────
 * Scoped to the .vc-cp <body> on /cart.php?a=confproduct. The configureproduct
 * markup reads these vars via bg-[var(--vc-cp-*)] / text-[var(--vc-cp-*)] /
 * border-[var(--vc-cp-*)] utilities (defined in arbitrary.css). Ported from the
 * removed orderform tailwind/input.css layer components (docs/26 Phase 6).
 * Without this block those vars are undefined and the page loses its colors.
 *
 * IMPORTANT (live finding, docs/26 Phase 7): the cart page is double-wrapped —
 * the system shell <body class="vc-page-configureproduct"> is the REAL document
 * body; the orderform's inner <body class="vc-cp"> is dropped by the HTML parser
 * (nested <body> tags are discarded). So the vars must also be defined on the
 * surviving outer body class. Both selectors carry the palette. */
.vc-cp,
.vc-page-configureproduct {
  --vc-cp-purple:      #7C3AED;
  --vc-cp-purple-dark: #6D28D9;
  --vc-cp-purple-tint: #EDE9FE;
  --vc-cp-orange:      #FF5C00;
  --vc-cp-ink:         #111827;
  --vc-cp-ink-2:       #374151;
  --vc-cp-ink-3:       #6B7280;
  --vc-cp-ink-4:       #9CA3AF;
  --vc-cp-border:      #E5E7EB;
  --vc-cp-border-soft: #F3F4F6;
  --vc-cp-success:     #10B981;
  --vc-cp-success-bg:  #D1FAE5;
  --vc-cp-bg:          #FAFAFA;
  --vc-cp-bg-input:    #F8FAFC;
}


/* ############################################################################
 * === BOOTSTRAP-COLLISION OVERRIDES === (rebuild v2, docs/29 — re-added Phase 7)
 * Bootstrap theme.min.css defines bg/text/border-primary/secondary, rounded,
 * and the mb-/mt-/p-/px- spacing scale with !important and ITS values (blue/gray,
 * 4px radius, 1rem spacing). The vercaa markup uses these names as BRAND values
 * (purple/orange) on the TAILWIND spacing scale. custom.css loads AFTER
 * theme.min.css (both unlayered now — no cascade layers in v2), so same
 * !important + later source order ⇒ these win. Reclaims only the colliding
 * names; -auto margins, w-/h- percent, flex/justify helpers left to Bootstrap.
 * (Was bootstrap-overrides.css under docs/26; folded in here for the single sheet.)
 * ############################################################################ */
.bg-primary       { background-color: var(--color-primary)   !important; }
.bg-secondary     { background-color: var(--color-secondary) !important; }
.text-primary     { color: var(--color-primary)   !important; }
.text-secondary   { color: var(--color-secondary) !important; }
.border-primary   { border-color: var(--color-primary) !important; }

/* ── Radius ──────────────────────────────────────────────────────────────
 * BS owns .rounded/.rounded-lg with !important but at BS values (4px/4.8px).
 * The vercaa markup expects Tailwind/token values (rounded=0.75rem=12px,
 * rounded-lg=0.5rem=8px — verified vs old build). Override with !important. */
.rounded       { border-radius: var(--radius)    !important; }   /* 0.75rem / 12px */
.rounded-lg    { border-radius: var(--radius-lg) !important; }   /* 0.5rem / 8px */
/* ── Spacing OVERRIDES — Tailwind scale (n*0.25rem), beats Bootstrap ──────
 * BS owns mb-/mt-/p-/px-/etc. with !important at the BS scale (mb-3=1rem,
 * mb-5=3rem). The vercaa markup was built under Tailwind and expects the TW
 * scale (mb-3=0.75rem, mb-5=1.25rem) — verified vs the old build. These
 * numeric spacing names are reclaimed with !important for visual parity.
 * The -auto margins (mx-auto, ml-auto…) are LEFT to BS (auto is correct).
 * Decision: docs/26 Phase 5 (supersedes the Phase 1 'leave spacing to BS'). */
.m-0 { margin:0 !important; }
.mb-0 { margin-bottom:0 !important; }
.mb-1 { margin-bottom:0.25rem !important; }
.mb-2 { margin-bottom:0.5rem !important; }
.mb-3 { margin-bottom:0.75rem !important; }
.mb-4 { margin-bottom:1rem !important; }
.mb-5 { margin-bottom:1.25rem !important; }
.ml-1 { margin-left:0.25rem !important; }
.ml-2 { margin-left:0.5rem !important; }
.ml-3 { margin-left:0.75rem !important; }
.mr-3 { margin-right:0.75rem !important; }
.mt-1 { margin-top:0.25rem !important; }
.mt-2 { margin-top:0.5rem !important; }
.mt-3 { margin-top:0.75rem !important; }
.mt-4 { margin-top:1rem !important; }
.mt-5 { margin-top:1.25rem !important; }
.mx-2 { margin-left:0.5rem !important; margin-right:0.5rem !important; }
.my-2 { margin-top:0.5rem !important; margin-bottom:0.5rem !important; }
.my-3 { margin-top:0.75rem !important; margin-bottom:0.75rem !important; }
.my-4 { margin-top:1rem !important; margin-bottom:1rem !important; }
.p-0 { padding:0 !important; }
.p-1 { padding:0.25rem !important; }
.p-2 { padding:0.5rem !important; }
.p-3 { padding:0.75rem !important; }
.p-4 { padding:1rem !important; }
.p-5 { padding:1.25rem !important; }
.pb-1 { padding-bottom:0.25rem !important; }
.pb-2 { padding-bottom:0.5rem !important; }
.pb-3 { padding-bottom:0.75rem !important; }
.pb-4 { padding-bottom:1rem !important; }
.pb-5 { padding-bottom:1.25rem !important; }
.pl-1 { padding-left:0.25rem !important; }
.pl-5 { padding-left:1.25rem !important; }
.pr-1 { padding-right:0.25rem !important; }
.pr-3 { padding-right:0.75rem !important; }
.pt-2 { padding-top:0.5rem !important; }
.pt-3 { padding-top:0.75rem !important; }
.pt-4 { padding-top:1rem !important; }
.pt-5 { padding-top:1.25rem !important; }
.px-2 { padding-left:0.5rem !important; padding-right:0.5rem !important; }
.px-3 { padding-left:0.75rem !important; padding-right:0.75rem !important; }
.px-4 { padding-left:1rem !important; padding-right:1rem !important; }
.px-5 { padding-left:1.25rem !important; padding-right:1.25rem !important; }
.py-0 { padding-top:0 !important; padding-bottom:0 !important; }
.py-1 { padding-top:0.25rem !important; padding-bottom:0.25rem !important; }
.py-2 { padding-top:0.5rem !important; padding-bottom:0.5rem !important; }
.py-3 { padding-top:0.75rem !important; padding-bottom:0.75rem !important; }
.py-4 { padding-top:1rem !important; padding-bottom:1rem !important; }
.py-5 { padding-top:1.25rem !important; padding-bottom:1.25rem !important; }

@media (min-width: 640px) {
  .mb-sm-0 { margin-bottom:0 !important; }
  .mb-sm-5 { margin-bottom:1.25rem !important; }
  .mt-sm-0 { margin-top:0 !important; }
  .mt-sm-3 { margin-top:0.75rem !important; }
  .mt-sm-4 { margin-top:1rem !important; }
  .mt-sm-5 { margin-top:1.25rem !important; }
  .px-sm-5 { padding-left:1.25rem !important; padding-right:1.25rem !important; }
}

@media (min-width: 768px) {
  .mb-md-4 { margin-bottom:1rem !important; }
  .mb-md-5 { margin-bottom:1.25rem !important; }
  .ml-md-4 { margin-left:1rem !important; }
  .mt-md-0 { margin-top:0 !important; }
  .mt-md-4 { margin-top:1rem !important; }
  .mt-md-5 { margin-top:1.25rem !important; }
}

@media (min-width: 1024px) {
  .mb-lg-3 { margin-bottom:0.75rem !important; }
  .mt-lg-0 { margin-top:0 !important; }
  .mt-lg-3 { margin-top:0.75rem !important; }
  .mt-lg-5 { margin-top:1.25rem !important; }
}

@media (min-width: 1280px) {
  .mb-xl-5 { margin-bottom:1.25rem !important; }
}


/* ############################################################################
 * === GROUP-HAS SAFETY (group-has-safety) === (rebuild v2, docs/29 — Phase 7)
 * The configureproduct.tpl option cards use Tailwind arbitrary-VARIANT classes
 * `group-has-[:checked]:border-[var(--vc-cp-purple)]` + `...:scale-100`. These
 * lived in the dropped arbitrary.css and otherwise rely on Tailwind Play CDN
 * JIT-generating them. Port the 2 real rules here so the checked-state card
 * highlight works even if the CDN doesn't compile that arbitrary variant.
 * (--vc-cp-purple is the page-scoped palette var defined under .vc-cp /
 *  .vc-page-configureproduct above.)
 * ############################################################################ */
.group:has(:checked) .group-has-\[\:checked\]\:border-\[var\(--vc-cp-purple\)\] { border-color: var(--vc-cp-purple); }
.group:has(:checked) .group-has-\[\:checked\]\:scale-100 { transform: scale(1); }

/* ############################################################################
 * === iCheck PURPLE SKIN (B2 — vercaa-addon-icheck-test) ===
 * Re-enabling iCheck cart-wide (vc-config-widgets.js initICheck) to restore
 * lagom2's live-recalc-on-addon-select. iCheck hides the native input and
 * draws its own state on a wrapper <div> whose class we set to
 * icheckbox_vercaa / iradio_vercaa. lagom2 used a blue PNG sprite
 * (blue.png, 240x24); we instead draw the control in pure CSS at vercaa
 * purple so it themes cleanly with --color-primary. iCheck toggles
 * .checked / .hover / .disabled on the wrapper; we style off those.
 *
 * NOTE: this skins EVERY cart input (gateways, TOS, domain/config options,
 * addons) — accepted (cart-wide iCheck, user decision B2). The box is 20px,
 * baseline-aligned to the adjacent text. */
.icheckbox_vercaa,
.iradio_vercaa {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 2px solid var(--vc-border-strong, #9CA3AF);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.icheckbox_vercaa { border-radius: 5px; }   /* checkbox = rounded square */
.iradio_vercaa   { border-radius: 50%; }    /* radio    = circle */

.icheckbox_vercaa.hover,
.iradio_vercaa.hover {
    border-color: var(--color-primary, #7C3AED);
}
/* checked checkbox: purple fill + CSS checkmark */
.icheckbox_vercaa.checked {
    border-color: var(--color-primary, #7C3AED);
    background: var(--color-primary, #7C3AED);
}
.icheckbox_vercaa.checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* checked radio: purple ring + purple dot */
.iradio_vercaa.checked {
    border-color: var(--color-primary, #7C3AED);
}
.iradio_vercaa.checked::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-primary, #7C3AED);
    transform: translate(-50%, -50%);
}
.icheckbox_vercaa.disabled,
.iradio_vercaa.disabled {
    border-color: #E5E7EB;
    background: #F3F4F6;
    cursor: default;
}
.icheckbox_vercaa.checked.disabled { background: #C4B5FD; border-color: #C4B5FD; }
.iradio_vercaa.checked.disabled::after { background: #C4B5FD; }

/* ── Addon card whole-card highlight (Option A) ──────────────────────────
 * .vc-addon-selected is toggled on the addon <label> by the ifChecked/
 * ifUnchecked bridge in vc-config-widgets.js (and set server-side on
 * initially-checked addons). Mirrors the old Tailwind has-[:checked]:
 * look now that iCheck hides the native input. */
#productAddonsContainer .vc-addon-card {
    margin-bottom: 0 !important;                       /* kill BS base label margin */
    border-color: var(--vc-border-default, #E5E7EB) !important;
}
#productAddonsContainer .vc-addon-card:hover {
    border-color: rgba(124, 58, 237, 0.4) !important;
}
#productAddonsContainer .vc-addon-card.vc-addon-selected {
    border-color: var(--color-primary, #7C3AED) !important;
    background: rgba(124, 58, 237, 0.05);
}

/* ── iCheck wrapper SUPPRESSION on design-radio / design-checkbox cards ───
 * vc-config-widgets.js initICheck() blanket-wraps EVERY cart input (except
 * .no-icheck) so iCheck keeps emitting the 'ifChecked' events that drive
 * order.js live recalc — that behavior MUST stay, per requirement: iCheck
 * runs and injects as-is, no iCheck feature broken.
 *
 * Problem: several cart controls ALREADY draw their own visible radio via
 * the card itself (border re-color through has-[:checked]: / peer-checked: /
 * .is-selected) plus a fake-dot <span>. On those, iCheck's injected
 * .iradio_vercaa / .icheckbox_vercaa box becomes a SECOND, duplicate control
 * sitting next to the design one — the "multiple radio buttons" bug on
 * /store/.../starter (billing cycle) and on the cart view/checkout
 * (billing cycle / account / gateway cards).
 *
 * Fix WITHOUT disabling iCheck: keep iCheck wrapping + events + recalc fully
 * live, but visually hide ONLY its injected wrapper inside the design-card
 * containers below. iCheck moved the native input INTO that wrapper and
 * inline-styled it (position:absolute;opacity:0), so collapsing the wrapper
 * hides the input too while it still exists, still posts, still fires every
 * iCheck event. The design card's checked-state styling reads the native
 * input's :checked (kept in sync by iCheck), so it is unaffected.
 *
 * Scoped to design-card ancestors ONLY. #productAddonsContainer is
 * deliberately EXCLUDED — there the iCheck box IS the intended visible
 * control and must remain. (#productConfigurableOptions and
 * #productAddonsContainer are sibling <section>s, not nested, so this
 * selector never reaches the addon boxes.)
 *
 *   [role="radiogroup"]        billing-cycle cards (configureproduct, peer sr-only)
 *   #productConfigurableOptions  configoption radio/checkbox rows (has-[:checked]:)
 *   .vc-option-card            account cards + ccinfo "new card" (viewcart)
 *   .vc-gateway-card           payment-gateway cards (viewcart)                */
[role="radiogroup"] label .iradio_vercaa,
[role="radiogroup"] label .icheckbox_vercaa,
#productConfigurableOptions label .iradio_vercaa,
#productConfigurableOptions label .icheckbox_vercaa,
.vc-option-card .iradio_vercaa,
.vc-option-card .icheckbox_vercaa,
.vc-gateway-card .iradio_vercaa,
.vc-gateway-card .icheckbox_vercaa,
/* Orphan plumbing inputs the design already declared invisible (e.g. the
   no-saved-cards ccinfo=new validation radio, viewcart.tpl: class="vc-hidden").
   iCheck moves that input INTO the wrapper but the wrapper does NOT inherit
   vc-hidden / sr-only, so its 20px circle leaks. Collapse any wrapper that
   holds a design-hidden input, regardless of container. (:has is fully
   supported in this WHMCS env — the cart already uses group-has-[] variants.) */
.iradio_vercaa:has(> input.vc-hidden),
.iradio_vercaa:has(> input.sr-only),
.icheckbox_vercaa:has(> input.vc-hidden),
.icheckbox_vercaa:has(> input.sr-only) {
    /* Collapse the duplicate iCheck visual; the native input nested inside it
       stays present + functional. pointer-events:none so a click on the card
       routes to the design label/input, not the hidden iCheck box. */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    opacity: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
}

/* ############################################################################
 * DOMAIN-PRICING — currency selector, filter-chip active state, and
 * DataTables-injected controls (search / pagination / info) for the
 * /domain/pricing page. The table, chips, and filter layout are Tailwind
 * utilities in markup (Flowbite-style). Only the JS-toggled .is-active chip
 * state + the JS-injected DataTables controls (search box, pagination, info)
 * need CSS here — DataTables generates that markup so it can't take Tailwind
 * classes. Zebra/hover on rows is Tailwind odd:/even:/hover: in markup, with a
 * :nth-child fallback below since DataTables re-orders rows on sort.
 * ############################################################################ */
/* DataTables re-orders <tr> on sort, so Tailwind odd:/even: (DOM-order) can go
   stale — re-assert zebra by visual row position. */
.vc-dom #tableDomainPricing tbody tr:nth-child(odd) { background: #fff; }
.vc-dom #tableDomainPricing tbody tr:nth-child(even) { background: #F9FAFB; }
.vc-dom #tableDomainPricing tbody tr:hover { background: rgba(124, 58, 237, 0.05); }
.vc-dom-currency-form { display: flex; justify-content: flex-end; margin-bottom: 1.5rem; }
.vc-dom-currency-select {
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    background: #fff;
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-primary, #111827);
}
/* Active filter chip (class toggled by JS) — readable white-on-purple */
.vc-page a.vc-dom-chip.is-active,
.vc-page a.vc-dom-chip.is-active:hover {
    background: var(--color-primary, #7C3AED);
    color: #fff;
    border-color: var(--color-primary, #7C3AED);
}
/* DataTables-injected controls — scope to the domain-pricing wrapper.
   DataTables markup can't take Tailwind classes (JS-generated), so styled here
   to match the Tailwind look used elsewhere. */
.vc-dom #tableDomainPricing_wrapper .dataTables_filter input {
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    margin-left: 0.5rem;
    outline: none;
}
.vc-dom #tableDomainPricing_wrapper .dataTables_filter input:focus {
    border-color: var(--color-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
.vc-dom #tableDomainPricing_wrapper .dataTables_info {
    color: var(--vc-text-secondary, #6B7280);
    font-size: var(--vc-text-sm, 0.875rem);
    padding-top: 1rem;
}
.vc-dom #tableDomainPricing_wrapper .dataTables_paginate { padding-top: 1rem; display: flex; gap: 0.375rem; flex-wrap: wrap; }
.vc-dom #tableDomainPricing_wrapper .paginate_button {
    padding: 0.5rem 0.875rem !important;
    border-radius: var(--vc-radius-md, 0.5rem) !important;
    border: 1px solid var(--vc-border-default, #E5E7EB) !important;
    background: #fff !important;
    color: var(--vc-text-secondary, #6B7280) !important;
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms;
}
.vc-dom #tableDomainPricing_wrapper .paginate_button:hover {
    background: var(--vc-primary-tint, #F5F3FF) !important;
    border-color: var(--color-primary, #7C3AED) !important;
    color: var(--color-primary, #7C3AED) !important;
}
.vc-dom #tableDomainPricing_wrapper .paginate_button.current,
.vc-dom #tableDomainPricing_wrapper .paginate_button.current:hover {
    background: var(--color-primary, #7C3AED) !important;
    border-color: var(--color-primary, #7C3AED) !important;
    color: #fff !important;
}
.vc-dom #tableDomainPricing_wrapper .paginate_button.disabled,
.vc-dom #tableDomainPricing_wrapper .paginate_button.disabled:hover {
    opacity: 0.45;
    cursor: default;
    background: #fff !important;
    border-color: var(--vc-border-default, #E5E7EB) !important;
    color: var(--vc-text-muted, #9CA3AF) !important;
}

/* ================================================================
 * === PHASE A — CLIENT-AREA SHELL FIX + APP-RAIL + COMPONENT KIT ==
 * (docs/31, branch vercaa-clientarea-redesign, 2026-05-30)
 *
 * Appended at EOF so it loads LAST and wins the cascade over the
 * earlier shell rules AND any per-page block. Design-only upgrade —
 * NO markup/DOM/functional change. Ports the look-and-feel of the
 * vercaa-ui-design mocks (clientarea-account.html) onto the existing
 * WHMCS Twenty-One client shell.
 *
 * PART 1 — overlap fix (Problem 1): the fixed 256px sidebar was left
 * out of flow but the content region auto-centered under it
 * (.container margin:auto → left≈236 < 256). Force the content region
 * to start AFTER the rail; left-align it; kill the centering pull.
 * PART 2 — app-rail polish: active left-pill, spacing, user footer.
 * PART 3 — reusable component kit (cards/forms/tables/badges/buttons)
 * consumed by Phases B–D.
 * ================================================================ */

/* ---- PART 1: SHELL LAYOUT (overlap fix) ---- */

/* The full content region clears the fixed rail and never centers
 * under it. Authoritative — beats #main-body padding + .container auto
 * margins from earlier/per-page rules. */
body.vc-client-page #main-body {
    padding-left: 0 !important;
    /* Clear the fixed header (72px) + fixed breadcrumb (~46px) so the
     * page heading is never hidden behind them. Per-page blocks had
     * shrunk this to 20px → h1 sat under the breadcrumb. */
    padding-top: calc(72px + 46px + 1.5rem) !important;
}
body.vc-client-page #main-body > .container {
    max-width: none !important;
    width: auto !important;
    margin-left: var(--vc-sidebar-width) !important;  /* clear the 256px rail */
    margin-right: 0 !important;
    padding: 0 2rem !important;
}
/* Inner content gets a sane max-width + left alignment so it reads
 * like the mock (content hugs the rail, breathes on the right). */
body.vc-client-page #main-body .vc-client-content-col {
    max-width: 1200px;
    margin: 0;
    padding: 0;
}

@media (max-width: 991px) {
    /* Rail collapses off-canvas (existing behavior) → content goes
     * full-width, no left offset. */
    body.vc-client-page #main-body > .container {
        margin-left: 0 !important;
        padding: 0 1rem !important;
    }
}

/* ---- PART 1b: STORE-PAGE SHELL FIX ----
 * WHMCS /store/* product pages (CodeGuard, SiteLock, SSL, NordVPN, WP
 * Toolkit, e-mail, monitoring, …) render in the client-area shell but with a
 * DIFFERENT wrapper than the rest of the client area: their row sits in a
 * bare classless <div> (`.vc-client-main > div:not(.container) > .row`)
 * instead of inside a `.container`. So the PART-1 `.container` margin never
 * reaches them and the .primary-content column sits at left:0 — UNDER the
 * fixed 256px rail (content clipped on the left, empty gutter on the right).
 *
 * Fix: clear the rail on the store layout's content column directly. The
 * `div:not(.container)` qualifier scopes this to the store wrapper only —
 * verified NOT to match dashboard / invoices / domains (their row parent IS
 * a .container), so no double-offset on the rest of the client area. */
body.vc-client-page .vc-client-main > div:not(.container) > .row > .primary-content {
    margin-left: var(--vc-sidebar-width) !important;   /* clear the 256px rail */
    max-width: calc(100% - var(--vc-sidebar-width) - 2rem) !important;
}
@media (max-width: 991px) {
    /* Rail off-canvas → store content goes full-width too. */
    body.vc-client-page .vc-client-main > div:not(.container) > .row > .primary-content {
        margin-left: 0 !important;
        max-width: 100% !important;
    }
}

/* ---- PART 1c: STORE-PAGE BRAND SKIN (chrome only) ----
 * WHMCS /store/* product pages are styled by the vendor-shipped store.css
 * (~3.7k lines) in each product's OWN brand palette (RapidSSL blue, NordVPN,
 * SiteLock, etc.). We deliberately KEEP those product/vendor colours (logos,
 * accent bands = product identity) and only brand the generic CHROME so the
 * pages read as Vercaa: Inter type, branded cards, purple CTA buttons + links.
 * Scoped to body[class*="vc-page-store"] so nothing leaks to the client area.
 * CSS-only — no markup/content change (store content is sensitive). */

/* type */
body[class*="vc-page-store"] .primary-content {
    font-family: Inter, system-ui, sans-serif;
}
body[class*="vc-page-store"] .primary-content h1,
body[class*="vc-page-store"] .primary-content h2,
body[class*="vc-page-store"] .primary-content h3,
body[class*="vc-page-store"] .primary-content h4 {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* cards: brand radius + soft shadow + lift on hover */
body[class*="vc-page-store"] .card {
    border: 1px solid var(--vc-border-subtle) !important;
    border-radius: var(--vc-radius-xl) !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04) !important;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body[class*="vc-page-store"] .card:hover {
    box-shadow: 0 12px 32px -8px rgba(124, 58, 237, 0.20) !important;
    transform: translateY(-2px);
}
/* CTA buttons -> brand purple (chrome). .btn-link stays a text link. */
body[class*="vc-page-store"] .btn:not(.btn-link) {
    background: var(--vc-primary) !important;
    border-color: var(--vc-primary) !important;
    color: #fff !important;
    border-radius: var(--vc-radius-lg) !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    transition: filter 0.15s ease, transform 0.1s ease;
}
body[class*="vc-page-store"] .btn:not(.btn-link):hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
body[class*="vc-page-store"] .btn-link {
    color: var(--vc-primary) !important;
    font-weight: 600;
}
/* in-content links (not buttons) -> brand purple */
body[class*="vc-page-store"] .primary-content a:not(.btn) {
    color: var(--vc-primary);
}

/* ---- PART 2: APP-RAIL POLISH (clientarea-account.html feel) ---- */

/* Active nav row gets the mock's left accent pill. Markup unchanged —
 * pseudo-element only. */
.vc-client-sidebar-nav .nav-link {
    position: relative;
}
.vc-client-sidebar-nav .nav-item.active > .nav-link::before,
#main-body .vc-client-sidebar-col .list-group-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.5rem;
    background: var(--vc-primary);
    border-radius: 0 9999px 9999px 0;
}
#main-body .vc-client-sidebar-col .list-group-item.active { position: relative; }

/* Rail: column flex so a user-footer (if present) can pin to bottom. */
#main-body .vc-client-sidebar-col {
    display: flex;
    flex-direction: column;
    padding-top: 1.5rem;
}

/* docs/33: Account nav ($secondaryNavbar) pinned to rail bottom.
   margin-top:auto pushes it below the primary nav + sidebars. The inline
   accordion rules (.vc-client-sidebar-nav .dropdown-menu, static/no-popper)
   already apply since this carries .vc-client-sidebar-nav. */
.vc-client-sidebar-nav-bottom {
    margin-top: auto;
    border-top: 1px solid var(--vc-border-subtle);
    padding-top: 0.75rem;
    margin-bottom: 0;
}

/* User footer (added in header.tpl, Part 2 markup). Pins to rail bottom. */
.vc-client-sidebar-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0.5rem 0;
    border-top: 1px solid var(--vc-border-subtle);
    text-decoration: none;
}
.vc-client-sidebar-user:hover { text-decoration: none; }
.vc-client-sidebar-user:hover .vc-csu-name { color: var(--vc-primary); }
.vc-client-sidebar-user .vc-csu-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background: var(--vc-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--vc-text-sm);
    font-weight: 700;
    flex-shrink: 0;
}
.vc-client-sidebar-user .vc-csu-meta { min-width: 0; }
.vc-client-sidebar-user .vc-csu-name {
    font-size: var(--vc-text-sm);
    font-weight: 600;
    color: var(--vc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vc-client-sidebar-user .vc-csu-email {
    font-size: var(--vc-text-xs);
    color: var(--vc-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- PART 3: REUSABLE COMPONENT KIT (Phases B–D) ---- */

/* Card */
.vc-card {
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    box-shadow: var(--vc-shadow-sm);
}
.vc-card-pad { padding: 1.5rem; }
.vc-card-head {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--vc-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.vc-card-title {
    font-size: var(--vc-text-base);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0;
}
.vc-card-sub {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
    margin: 0.25rem 0 0;
}

/* Section header (sits above a card group) */
.vc-section-title {
    font-size: var(--vc-text-lg);
    font-weight: 700;
    color: var(--vc-text-primary);
    margin: 0 0 0.25rem;
}
.vc-section-sub {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
    margin: 0 0 1.5rem;
}

/* Form kit */
.vc-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.vc-label {
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-secondary);
}
.vc-input,
.vc-card .form-control,
.vc-card .form-select,
.vc-card select,
.vc-card input[type="text"],
.vc-card input[type="email"],
.vc-card input[type="tel"],
.vc-card input[type="password"],
.vc-card input[type="number"],
.vc-card textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--vc-radius-lg);
    border: 1px solid var(--vc-border-default);
    background: var(--vc-bg-surface);
    font-size: var(--vc-text-sm);
    color: var(--vc-text-primary);
    transition: border-color 150ms, box-shadow 150ms;
}
.vc-input:focus,
.vc-card .form-control:focus,
.vc-card .form-select:focus,
.vc-card select:focus,
.vc-card input:focus,
.vc-card textarea:focus {
    outline: none;
    border-color: var(--vc-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.vc-form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

/* Buttons (pill) */
.vc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-size: var(--vc-text-sm);
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 150ms;
    text-decoration: none;
}
.vc-btn-primary {
    background: var(--vc-primary);
    color: #fff;
    box-shadow: 0 8px 16px -6px rgba(124, 58, 237, 0.45);
}
.vc-btn-primary:hover { background: var(--vc-primary-dark); color: #fff; }
.vc-btn-secondary {
    background: var(--vc-bg-surface);
    border-color: var(--vc-border-default);
    color: var(--vc-text-secondary);
}
.vc-btn-secondary:hover { border-color: var(--vc-primary); color: var(--vc-primary); }
.vc-btn:active { transform: scale(0.98); }

/* ---- SUBMIT-TICKET (submitticket.php step 1 + 2) ----
 * Restyles the two ticket-submit templates onto the design-system kit.
 * Step 1 = department picker as branded cards; step 2 = the submit form
 * (inputs auto-styled by the `.vc-card .form-control` rule above; this block
 * adds the layout grid, department cards, and captcha centering). Markup
 * keeps every WHMCS form name/id + JS hook — presentation only. */

.vc-ticket-card { max-width: 880px; }
.vc-ticket-head { margin-bottom: 1.5rem; }
.vc-ticket-head .vc-section-sub { margin-bottom: 0; }

/* step 1 — department cards */
.vc-ticket-depts {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.vc-ticket-dept {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
    background: var(--vc-bg-surface);
    text-decoration: none;
    transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}
.vc-ticket-dept:hover {
    border-color: var(--vc-primary);
    box-shadow: 0 8px 24px -10px rgba(124, 58, 237, 0.30);
    transform: translateY(-1px);
    text-decoration: none;
}
.vc-ticket-dept-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--vc-radius-md);
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    font-size: 1.125rem;
}
.vc-ticket-dept-body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 auto;
    min-width: 0;
}
.vc-ticket-dept-name {
    font-size: var(--vc-text-base);
    font-weight: 600;
    color: var(--vc-text-primary);
}
.vc-ticket-dept-desc {
    font-size: var(--vc-text-sm);
    color: var(--vc-text-muted);
}
.vc-ticket-dept-arrow {
    flex-shrink: 0;
    color: var(--vc-text-muted);
    transition: color 150ms, transform 150ms;
}
.vc-ticket-dept:hover .vc-ticket-dept-arrow {
    color: var(--vc-primary);
    transform: translateX(2px);
}

/* step 2 — form layout */
.vc-ticket-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
}
.vc-ticket-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
    .vc-ticket-grid,
    .vc-ticket-grid-3 { grid-template-columns: 1fr; }
}
.vc-ticket-captcha {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
}
/* the markdown editor toolbar + textarea keep their own (already-purple)
 * styling; just round the wrapper to match the kit */
.vc-ticket-form .md-editor,
.vc-ticket-form .markdown-editor {
    border-radius: var(--vc-radius-lg);
}

/* Table kit */
.vc-table-wrap {
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-xl);
    overflow: hidden;
    background: var(--vc-bg-surface);
}
.vc-table { width: 100%; border-collapse: collapse; font-size: var(--vc-text-sm); }
.vc-table thead th {
    background: var(--vc-bg-elevated);
    text-align: left;
    padding: 0.75rem 1.5rem;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-text-muted);
    border-bottom: 1px solid var(--vc-border-subtle);
}
.vc-table tbody td {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--vc-border-subtle);
    color: var(--vc-text-primary);
    vertical-align: middle;
}
.vc-table tbody tr:first-child td { border-top: 0; }

/* Status badges */
.vc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: var(--vc-text-xs);
    font-weight: 700;
    line-height: 1.2;
}
.vc-badge::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.9;
}
.vc-badge-success { background: var(--vc-success-bg); color: var(--vc-success); }
.vc-badge-warning { background: var(--vc-warning-bg); color: var(--vc-warning); }
.vc-badge-danger  { background: var(--vc-danger-bg);  color: var(--vc-danger); }
.vc-badge-neutral { background: var(--vc-border-subtle); color: var(--vc-text-secondary); }

/* Account section tab row (optional, mock pattern) */
.vc-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--vc-border-default);
    margin-bottom: 1.5rem;
}
.vc-tabs a, .vc-tabs button {
    padding: 0.625rem 1rem;
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-text-secondary);
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    cursor: pointer;
    text-decoration: none;
}
.vc-tabs a:hover, .vc-tabs button:hover { color: var(--vc-primary); }
.vc-tabs a.active, .vc-tabs button.active {
    color: var(--vc-primary);
    font-weight: 600;
    border-bottom-color: var(--vc-primary);
}
/* === /PHASE A === */

/* ================================================================
 * === OPTION A — SIDEBAR NAV ICONS + MOCK POLISH === (docs/31/32)
 * Mock clientarea-account.html: icon + label rows, rounded, active
 * left-pill. WHMCS nav items carry no icon → inject via FontAwesome 5
 * (already loaded) ::before, keyed on the stable menuItemName attr.
 * Dropdowns preserved (Option A). No markup change.
 * ================================================================ */

.vc-client-sidebar-nav > li[menuItemName] > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--vc-radius-lg);
    font-size: var(--vc-text-sm);
    font-weight: 500;
    color: var(--vc-text-secondary);
}
/* leading icon */
.vc-client-sidebar-nav > li[menuItemName] > a::before {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.9;
}
/* per-item glyphs (menuItemName → FA5 unicode) */
.vc-client-sidebar-nav > li[menuItemName="Home"]              > a::before { content: "\f015"; } /* home */
.vc-client-sidebar-nav > li[menuItemName="Services"]          > a::before { content: "\f1b2"; } /* cubes */
.vc-client-sidebar-nav > li[menuItemName="Domains"]           > a::before { content: "\f0ac"; } /* globe */
.vc-client-sidebar-nav > li[menuItemName="Website Security"]  > a::before { content: "\f3ed"; } /* shield-alt */
.vc-client-sidebar-nav > li[menuItemName="Billing"]           > a::before { content: "\f571"; } /* receipt */
.vc-client-sidebar-nav > li[menuItemName="Support"]           > a::before { content: "\f590"; } /* headset */
.vc-client-sidebar-nav > li[menuItemName="Open Ticket"]       > a::before { content: "\f4ad"; } /* comment-dots */
.vc-client-sidebar-nav > li[menuItemName="Affiliates"]        > a::before { content: "\f1e0"; } /* share-alt */
.vc-client-sidebar-nav > li[menuItemName="Account"]           > a::before { content: "\f007"; } /* user */

/* dropdown-toggle caret: push to the row's right edge (mock has none,
 * but WHMCS needs the affordance) */
.vc-client-sidebar-nav > li.dropdown > a.dropdown-toggle::after {
    margin-left: auto;
    transition: transform 200ms ease;
}
/* accordion polish: rotate caret when the dropdown is open (.show on the li) */
.vc-client-sidebar-nav > li.dropdown.show > a.dropdown-toggle::after {
    transform: rotate(180deg);
}

/* accordion polish: smooth inline expand/collapse of the sub-menu.
 *
 * Bootstrap's dropdown JS runs Popper on click, which writes INLINE styles
 * (position:absolute; transform:translate3d(...); will-change) that float the
 * menu out of flow and overlap the items below it. We neutralise those inline
 * styles with !important so the menu stays a static, in-flow accordion, then
 * animate max-height (display:none can't tween) for a smooth expand/collapse.
 * Closed = clipped to 0; open (.show) = revealed. Scoped to the sidebar only,
 * so the horizontal top-navbar dropdown keeps its normal floating behaviour. */
.vc-client-sidebar-nav .dropdown-menu {
    position: static !important;   /* defeat Popper's inline position:absolute */
    transform: none !important;    /* defeat Popper's inline translate3d */
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    will-change: auto !important;
    float: none;
    display: block;                /* override BS display:none so height can tween */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 250ms ease, opacity 200ms ease;
}
.vc-client-sidebar-nav .dropdown-menu.show {
    max-height: 30rem;       /* comfortably exceeds the tallest sub-menu (9 items) */
    opacity: 1;
}

/* docs/33: the BOTTOM Account nav is pinned to the rail floor, so an inline
 * (downward) accordion would shove the toggle up off-screen. Instead this one
 * dropdown floats UPWARD as an absolute overlay anchored to the toggle's top
 * edge (a "dropup"). We re-establish absolute positioning here (overriding the
 * static-accordion rules above) and still defeat Popper's inline translate3d
 * with !important. The parent li is made position:relative so bottom:100%
 * anchors to the toggle. */
.vc-client-sidebar-nav-bottom > li.dropdown { position: relative; }
.vc-client-sidebar-nav-bottom .dropdown-menu {
    position: absolute !important;
    bottom: calc(100% + 0.375rem) !important;   /* sit just ABOVE the toggle */
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;                 /* defeat Popper translate3d */
    margin: 0 !important;
    /* floating overlay needs its own surface (in-flow accordion borrowed the
     * rail background; an overlay must paint over the content behind it) */
    background: var(--vc-bg-surface);
    border: 1px solid var(--vc-border-default);
    border-radius: var(--vc-radius-lg);
    box-shadow: 0 -8px 24px rgba(17, 24, 39, 0.12);
    padding: 0.375rem;
    /* expand from 0 height but anchored at the bottom so it grows upward */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 250ms ease, opacity 200ms ease;
}
.vc-client-sidebar-nav-bottom .dropdown-menu.show {
    max-height: 30rem;
    opacity: 1;
    overflow-y: auto;
}

/* hover + active (mock: bg-primary/5, purple text, left pill) */
.vc-client-sidebar-nav > li[menuItemName] > a:hover {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
    text-decoration: none;
}
.vc-client-sidebar-nav > li[menuItemName].active > a,
.vc-client-sidebar-nav > li[menuItemName] > a.active {
    background: var(--vc-primary-tint);
    color: var(--vc-primary);
}
.vc-client-sidebar-nav > li[menuItemName].active > a::after {
    content: "";
    position: absolute;
    left: -0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.5rem;
    background: var(--vc-primary);
    border-radius: 0 9999px 9999px 0;
}
/* === /OPTION A === */

/* ================================================================
 * === HIDE CLIENT-AREA CHROME (header strip + footer bar) ========
 * (docs/31) Per user: client-area pages don't need the top
 * notification/cart strip (#header) or the footer copyright bar
 * (#footer). HIDDEN VISUALLY ONLY — both keep their DOM:
 *   - #header still holds the navbar DOM that feeds the sidebar +
 *     WHMCS JS bindings (display:none keeps them queryable).
 *   - #modalChooseLanguage / #modalAjax live OUTSIDE #header (in a
 *     form/body) so they still open.
 *   - {$footeroutput} JS is a body-level <script>, NOT inside
 *     #footer, so AJAX/modals/validation are untouched.
 * The "Powered by WHMCompleteSolution" line lives inside #main-body
 * (WHMCS attribution) and is intentionally LEFT (license).
 * ================================================================ */

body.vc-client-page #header { display: none !important; }
body.vc-client-page #footer { display: none !important; }

/* Header is gone → pull the fixed breadcrumb to the top and remove the
 * 72px header allowance from the content padding (overrides the Phase A
 * rule, which assumed a 72px header). */
body.vc-client-page .master-breadcrumb { top: 0 !important; }
body.vc-client-page #main-body { padding-top: calc(46px + 1.5rem) !important; }
/* === /HIDE CHROME === */


/* ================================================================
 * === PAYMENT SECTION — lagom2 faithful port (docs/32) ===========
 * Self-contained styling for the ported form-payment-gateway.tpl:
 *   panel-check gateway cards + brand icons, panel-tabs (existing/new),
 *   cc-input-container, cc-item saved-card rows, fieldgroup-creditcard,
 *   and the SDK-injected #stripeElements grid (the Stripe-alignment fix).
 *
 * SCOPING: every rule is scoped under #paymentGatewaysDetails or
 * #creditCardInputFields. lagom2 reuses Bootstrap-owned class names
 * (.panel-check, .nav-tabs, .panel-form, .panel-group-condensed); the
 * ID-scope raises specificity so these win over core Bootstrap WITHOUT
 * !important wars and WITHOUT leaking onto other pages.
 *
 * Loads LAST in custom.css → wins on equal specificity.
 * lagom2 --panel-*/--ui-block-*/--nav-tabs-* vars are remapped inline
 * to vercaa --vc-* / --color-* tokens (with literal fallbacks).
 * ================================================================ */

/* The payment card wrapper — drop default form-card padding so the
 * ported #paymentGatewaysDetails section controls its own spacing. */
.vc-payment-card { }

/* ---- Section scaffolding (lagom2 .section / .section-header) ---- */
#paymentGatewaysDetails .section-header { margin-bottom: var(--vc-space-4, 1rem); }
#paymentGatewaysDetails .section-title {
    font-size: var(--vc-text-base, 1rem);
    font-weight: var(--vc-font-bold, 700);
    color: var(--vc-text-primary, #111827);
    margin: 0;
}
#paymentGatewaysDetails .section-body > .section { margin: 0; }
#paymentGatewaysDetails #creditCardInputFields .section-heading { margin: var(--vc-space-4, 1rem) 0 var(--vc-space-3, 0.75rem); }
#paymentGatewaysDetails #creditCardInputFields .section-title { font-size: var(--vc-text-sm, 0.875rem); }

/* ---- Credit-balance panel ---- */
#paymentGatewaysDetails .credit-balance-panel {
    background: var(--vc-bg-elevated, #F9FAFB);
    border: 1px solid var(--vc-border-subtle, #F3F4F6);
    border-radius: var(--vc-radius-md, 0.5rem);
    padding: var(--vc-space-4, 1rem);
    margin-bottom: var(--vc-space-4, 1rem);
    box-shadow: none;
}
#paymentGatewaysDetails .credit-balance-panel .panel-body { padding: 0; }
#paymentGatewaysDetails .credit-balance {
    margin-bottom: var(--vc-space-3, 0.75rem);
    color: var(--vc-text-primary, #111827);
}
#paymentGatewaysDetails .credit-balance-title {
    margin-bottom: var(--vc-space-1, 0.25rem);
    font-size: var(--vc-text-sm, 0.875rem);
    color: var(--vc-text-secondary, #6B7280);
}
#paymentGatewaysDetails .credit-balance span {
    font-size: var(--vc-text-xl, 1.25rem);
    font-weight: var(--vc-font-extrabold, 800);
    color: var(--vc-primary, #7C3AED);
}
#paymentGatewaysDetails .apply-credit-container .radio { margin: var(--vc-space-2, 0.5rem) 0; }
#paymentGatewaysDetails .apply-credit-container .radio.m-b-0 { margin-bottom: 0; }
#paymentGatewaysDetails .apply-credit-container label {
    display: flex; align-items: flex-start; gap: var(--vc-space-2, 0.5rem);
    margin: 0; cursor: pointer;
    font-size: var(--vc-text-sm, 0.875rem); color: var(--vc-text-secondary, #6B7280);
}
#paymentGatewaysDetails .apply-credit-container input[type="radio"] {
    margin-top: 3px; accent-color: var(--vc-primary, #7C3AED);
}
#paymentGatewaysDetails .apply-credit-container span > span { font-weight: var(--vc-font-bold, 700); }

/* ---- Gateway radio cards (.panel-group-condensed > .panel-check) ---- */
#paymentGatewaysContainer .panel-group-condensed {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--vc-space-3, 0.75rem);
    margin: 0 0 var(--vc-space-4, 1rem);
}
@media (min-width: 640px) {
    #paymentGatewaysContainer .panel-group-condensed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#paymentGatewaysContainer .panel-check {
    margin: 0 !important;
    border: 2px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    background: var(--vc-bg-surface, #FFFFFF);
    cursor: pointer;
    box-shadow: none;
    transition: border-color 150ms ease, background 150ms ease;
}
#paymentGatewaysContainer .panel-check:hover { border-color: rgba(124, 58, 237, 0.4); }
#paymentGatewaysContainer .panel-check.checked {
    border-color: var(--vc-primary, #7C3AED) !important;
    background: var(--vc-primary-tint, #F5F3FF);
    z-index: 2;
}
#paymentGatewaysContainer .panel-check .panel-heading.check {
    padding: 0; background: transparent; border: 0; border-radius: inherit;
}
#paymentGatewaysContainer .panel-check .check { position: relative; margin: 0; }
#paymentGatewaysContainer .panel-check .check > label {
    display: flex; align-items: center; gap: var(--vc-space-3, 0.75rem);
    width: 100%; margin: 0; padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
    cursor: pointer;
}
#paymentGatewaysContainer .panel-check input[type="radio"] {
    margin: 0; flex: 0 0 auto; accent-color: var(--vc-primary, #7C3AED);
}
#paymentGatewaysContainer .check-content { flex: 1; min-width: 0; }
#paymentGatewaysContainer .check-content > span {
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827);
    line-height: 1.3;
}
/* Brand icon on the right of each gateway card */
#paymentGatewaysContainer .check-icon {
    display: flex; align-items: center; justify-content: flex-end;
    flex: 0 0 auto; max-width: 72px; margin-left: auto;
}
#paymentGatewaysContainer .check-icon img,
#paymentGatewaysContainer .check-icon svg { height: auto; max-height: 24px; width: auto; max-width: 100%; display: block; }

/* ---- Gateway error sink ---- */
#paymentGatewaysDetails .gateway-errors {
    margin-top: var(--vc-space-3, 0.75rem);
    margin-bottom: 0;
    font-size: var(--vc-text-sm, 0.875rem);
}
#paymentGatewaysDetails .gateway-errors.w-hidden,
#paymentGatewaysDetails .gateway-errors.vc-hidden { display: none; }

/* ---- SDK injection slot (PayPal button lands here) ---- */
#paymentGatewayInput { margin: 0 0 var(--vc-space-3, 0.75rem); }
#paymentGatewayInput:empty { margin: 0; }

/* ---- Credit-card fields container + panel-form ---- */
#creditCardInputFields { margin-top: var(--vc-space-2, 0.5rem); }
#creditCardInputFields.hidden,
#creditCardInputFields.vc-hidden { display: none; }
#creditCardInputFields .panel-form {
    background: var(--vc-bg-elevated, #F9FAFB);
    border: 1px solid var(--vc-border-subtle, #F3F4F6);
    border-radius: var(--vc-radius-md, 0.5rem);
    box-shadow: none;
    margin: 0;
    overflow: hidden;
}
#creditCardInputFields .panel-form .panel-body { padding: var(--vc-space-4, 1rem); }
#creditCardInputFields .cc-input-container { }

/* ---- Existing/New card tabs (.panel-tabs.nav-tabs) ---- */
#creditCardInputFields .panel-tabs.nav-tabs {
    display: flex;
    gap: 0;
    padding: 0 var(--vc-space-4, 1rem);
    margin: 0;
    background: var(--vc-bg-surface, #FFFFFF);
    border-bottom: 1px solid var(--vc-border-subtle, #F3F4F6);
    list-style: none;
}
#creditCardInputFields .panel-tabs > li { margin: 0 !important; }
#creditCardInputFields .panel-tabs > li > a {
    display: block;
    position: relative;
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
    font-size: var(--vc-text-sm, 0.875rem);
    font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-secondary, #6B7280);
    text-decoration: none;
    border: 0;
    background: transparent;
}
#creditCardInputFields .panel-tabs > li > a:hover { color: var(--vc-primary, #7C3AED); }
#creditCardInputFields .panel-tabs > li.active > a { color: var(--vc-primary, #7C3AED); }
#creditCardInputFields .panel-tabs > li.active > a::after {
    content: ""; position: absolute; left: var(--vc-space-4, 1rem); right: var(--vc-space-4, 1rem);
    bottom: -1px; height: 2px; background: var(--vc-primary, #7C3AED);
}
#creditCardInputFields .tab-content > .tab-pane { display: none; }
#creditCardInputFields .tab-content > .tab-pane.active { display: block; }

/* ---- Saved-card rows (.cc-list / .cc-item) ---- */
#creditCardInputFields .cc-list { margin: 0; }
#creditCardInputFields .cc-item {
    display: flex; align-items: center; gap: var(--vc-space-3, 0.75rem);
    position: relative;
    padding: var(--vc-space-3, 0.75rem) var(--vc-space-4, 1rem);
    margin-bottom: var(--vc-space-2, 0.5rem);
    border: 1px solid var(--vc-border-default, #E5E7EB);
    border-radius: var(--vc-radius-md, 0.5rem);
    background: var(--vc-bg-surface, #FFFFFF);
    cursor: pointer;
    transition: border-color 150ms ease;
}
#creditCardInputFields .cc-item:hover,
#creditCardInputFields .cc-item.active { border-color: var(--vc-primary, #7C3AED); }
#creditCardInputFields .cc-item.disabled { cursor: not-allowed; opacity: 0.6; }
#creditCardInputFields .cc-item-checkbox { flex: 0 0 auto; display: flex; align-items: center; }
#creditCardInputFields .cc-item-checkbox input[type="radio"] { margin: 0; accent-color: var(--vc-primary, #7C3AED); }
#creditCardInputFields .cc-item-icon { flex: 0 0 auto; width: 40px; display: flex; align-items: center; }
#creditCardInputFields .cc-item-icon img { max-width: 100%; height: auto; }
#creditCardInputFields .cc-item-name {
    font-size: var(--vc-text-sm, 0.875rem); font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-primary, #111827); white-space: nowrap;
}
#creditCardInputFields .cc-item-name .type { text-transform: capitalize; }
#creditCardInputFields .cc-item-desc { flex: 1; min-width: 0; color: var(--vc-text-secondary, #6B7280); font-size: var(--vc-text-sm, 0.875rem); }
#creditCardInputFields .cc-item-desc.empty { display: none; }
#creditCardInputFields .cc-item-status { color: var(--vc-text-secondary, #6B7280); font-size: var(--vc-text-sm, 0.875rem); white-space: nowrap; }
#creditCardInputFields .cc-item-actions { margin-left: auto; white-space: nowrap; }
#creditCardInputFields .cc-item-actions .status {
    display: inline-block; padding: 2px 8px; border-radius: var(--vc-radius-full, 9999px);
    font-size: var(--vc-text-xs, 0.75rem); font-weight: var(--vc-font-semibold, 600);
    background: var(--vc-border-subtle, #F3F4F6); color: var(--vc-text-secondary, #6B7280);
}
#creditCardInputFields .cc-item-actions .status-active { background: #DCFCE7; color: #15803D; }
#creditCardInputFields .cc-item-actions .status-expired { background: #FEE2E2; color: #B91C1C; }

@media (max-width: 575.98px) {
    #creditCardInputFields .cc-item { flex-wrap: wrap; }
    #creditCardInputFields .cc-item-desc { order: 4; width: 100%; padding-left: 52px; }
    #creditCardInputFields .cc-item-actions { order: 3; }
}

/* ---- CVV existing-card row ---- */
#creditCardInputFields #existingCardInfo { margin-top: var(--vc-space-3, 0.75rem); }
#creditCardInputFields #existingCardInfo .form-tooltip { position: relative; }

/* ---- New-card manual fields (.fieldgroup-creditcard + Bootstrap grid) ---- */
#creditCardInputFields #newCardInfo .row { margin-left: -8px; margin-right: -8px; }
#creditCardInputFields #newCardInfo [class*="col-"] { padding-left: 8px; padding-right: 8px; }
#creditCardInputFields #newCardInfo .form-group { margin-bottom: var(--vc-space-3, 0.75rem); }
#creditCardInputFields #newCardInfo .control-label,
#creditCardInputFields #newCardSaveSettings .control-label {
    display: block; margin-bottom: var(--vc-space-1, 0.25rem);
    font-size: var(--vc-text-xs, 0.75rem); font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-secondary, #6B7280);
}
#creditCardInputFields .form-control {
    height: 40px; padding: var(--vc-space-2, 0.5rem) var(--vc-space-3, 0.75rem);
    font-size: var(--vc-text-sm, 0.875rem);
    border: 1px solid var(--vc-border-strong, #D1D5DB);
    border-radius: var(--vc-radius-md, 0.5rem);
    background: var(--vc-bg-surface, #FFFFFF);
    width: 100%;
    box-shadow: none;
}
#creditCardInputFields .form-control:focus {
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
    outline: 0;
}
#creditCardInputFields .form-tooltip { position: relative; }
#creditCardInputFields .tooltip-icon {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    color: var(--vc-text-tertiary, #9CA3AF); cursor: help;
}
#creditCardInputFields #newCardSaveSettings { margin-top: var(--vc-space-3, 0.75rem); }
#creditCardInputFields #inputNoStoreContainer { margin-top: var(--vc-space-2, 0.5rem); }
#creditCardInputFields #inputNoStoreContainer .checkbox { display: flex; align-items: center; gap: var(--vc-space-2, 0.5rem); margin: 0; font-size: var(--vc-text-sm, 0.875rem); color: var(--vc-text-secondary, #6B7280); }

/* ---- Credit-card brand icon inside the number field ---- *
 * Paths resolve to templates/vercaa/img/creditcards/ — same relative
 * depth as lagom2 (css/ -> ../img/), so the url() is unchanged. */
#creditCardInputFields .cc-number-field {
    background-image: url(../img/creditcards/credit-card.svg);
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 32px auto !important;
    padding-right: 52px !important;
}
#creditCardInputFields .cc-number-field.visa       { background-image: url(../img/creditcards/visa.svg); }
#creditCardInputFields .cc-number-field.mastercard { background-image: url(../img/creditcards/mastercard.svg); }
#creditCardInputFields .cc-number-field.amex       { background-image: url(../img/creditcards/american-express.svg); }
#creditCardInputFields .cc-number-field.discover   { background-image: url(../img/creditcards/discover.svg); }
#creditCardInputFields .cc-number-field.jcb        { background-image: url(../img/creditcards/jcb.svg); }

/* ================================================================
 * STRIPE ELEMENTS — the alignment fix (req 2).
 * Stripe injects #stripeElements > .stripe-cards-inputs.col-md-8 with
 * #stripeCreditCard(.col-md-6) + #stripeExpiryDate(.col-md-3) +
 * #stripeCvc(.col-md-3) Bootstrap-grid columns. Without these rules
 * the iframe columns sit raw inside the vc card and misalign. Ported
 * + tightened from lagom2.
 * ================================================================ */
#creditCardInputFields #stripeElements { margin: 0; height: auto !important; }
#creditCardInputFields #stripeElements .stripe-cards-inputs {
    margin: 0 -8px; padding: 0; width: auto; max-width: none;
    display: flex; flex-wrap: wrap;
}
#creditCardInputFields #stripeElements .stripe-cards-inputs.col-md-8,
#creditCardInputFields #stripeElements .stripe-cards-inputs.col-md-offset-2 {
    margin-left: -8px; margin-right: -8px; max-width: none; flex: 1 1 100%;
}
#creditCardInputFields #stripeElements .stripe-cards-inputs > .row {
    display: flex; flex-wrap: wrap; width: 100%; margin: 0;
}
#creditCardInputFields #stripeElements .stripe-cards-inputs div[class*="col-"] {
    float: none; padding: 0 8px; margin-bottom: var(--vc-space-3, 0.75rem); max-width: none;
}
@media (min-width: 768px) {
    #creditCardInputFields #stripeElements .stripe-cards-inputs .col-md-6 { width: 50%; flex: 0 0 50%; }
    #creditCardInputFields #stripeElements .stripe-cards-inputs .col-md-3 { width: 25%; flex: 0 0 25%; }
}
@media (max-width: 767.98px) {
    #creditCardInputFields #stripeElements .stripe-cards-inputs .col-md-6 { width: 100%; flex: 0 0 100%; }
    #creditCardInputFields #stripeElements .stripe-cards-inputs .col-md-3 { width: 50%; flex: 0 0 50%; }
}
#creditCardInputFields #stripeElements label {
    display: block; margin-bottom: var(--vc-space-1, 0.25rem);
    font-size: var(--vc-text-xs, 0.75rem); font-weight: var(--vc-font-semibold, 600);
    color: var(--vc-text-secondary, #6B7280);
}
#creditCardInputFields #stripeElements .StripeElement {
    height: 40px; padding: 11px 12px 0;
    border: 1px solid var(--vc-border-strong, #D1D5DB);
    border-radius: var(--vc-radius-md, 0.5rem);
    background: var(--vc-bg-surface, #FFFFFF);
}
#creditCardInputFields #stripeElements .StripeElement--focus {
    border-color: var(--vc-primary, #7C3AED);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}
#creditCardInputFields #stripeElements .StripeElement--invalid { border-color: var(--vc-danger, #DC2626); }
/* === /PAYMENT SECTION === */