/* ═══════════════════════════════════════════════════════════════════════════
   Help Center — Component Stylesheet v2
   Bold & Modern design (Stripe/Vercel-inspired)

   Theme integration:
   Falls back gracefully when Elementor (or any theme) sets these variables:
     --e-global-color-primary
     --e-global-color-secondary
     --e-global-color-accent
     --e-global-typography-primary-font-family
     --e-global-typography-text-font-family

   All hc-* classes are scoped — safe to drop into any WordPress page.
═══════════════════════════════════════════════════════════════════════════ */
.hc-page-wrap {
    width: fit-content;
    margin: auto;
    border-radius: 26px;
    padding: 20px 0px 20px 0px;
}

.hc-root {
    --hc-sidebar-w: 300px;
    min-width: 75dvw;
}

.hc-layout {
    display: flex;
    gap: 0;
    height: fit-content;
    border: 1px solid #e4e4e7;
    border-radius: 26px;
    overflow: visible;
    background: #ffffff;
}

.hc-card-wrap {
    margin-top: 10px;
}

/* ── Design tokens ───────────────────────────────────────────────────────── */
.hc-card {
    --hc-accent: var(--e-global-color-primary, #1E90FF);
    --hc-accent-dark: var(--e-global-color-secondary, #0D3B2E);
    --hc-accent-text: #ffffff;
    --hc-green: var(--e-global-color-accent, #22c55e);
    --hc-green-bg: #f0fdf4;
    --hc-green-text: #166534;
    --hc-amber: #f59e0b;
    --hc-amber-bg: #fffbeb;
    --hc-amber-text: #92400e;
    --hc-red: #ef4444;
    --hc-red-bg: #fef2f2;
    --hc-red-text: #991b1b;
    --hc-surface: #ffffff;
    --hc-surface-2: #f8f9fb;
    --hc-surface-3: #f1f3f7;
    --hc-border: #e5e7eb;
    --hc-border-strong: #d1d5db;
    --hc-text-primary: #0f172a;
    --hc-text-secondary: #475569;
    --hc-text-muted: #94a3b8;
    --hc-font: var(--e-global-typography-text-font-family,
            var(--e-global-typography-primary-font-family,
                "Inter", "Segoe UI", system-ui, sans-serif));
    --hc-font-heading: var(--e-global-typography-primary-font-family,
            var(--e-global-typography-text-font-family,
                "Inter", "Segoe UI", system-ui, sans-serif));
    --hc-radius-sm: 8px;
    --hc-radius-md: 12px;
    --hc-radius-lg: 16px;
    --hc-radius-xl: 20px;
    --hc-shadow-lg: 0 12px 40px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06);
}

/* ── Reset (scoped) ──────────────────────────────────────────────────────── */
.hc-card,
.hc-card * {
    box-sizing: border-box;
}

.hc-card {
    font-family: var(--hc-font);
    font-size: 15px;
    line-height: 1.65;
    color: var(--hc-text-primary);
    background: var(--hc-surface);
    border-radius: var(--hc-radius-xl);
    overflow: hidden;
    border: 1px solid var(--hc-border);
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.hc-card-header-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hc-card-header {
    position: relative;
    padding: 40px 36px 36px;
    /* Solid, matching the .hc-trust footer band below it (was a blue→green
       gradient) — 2026-08-30, requested so header/footer read as one
       consistent surface instead of two different treatments. */
    background: var(--hc-accent-dark);
    overflow: hidden;
    text-align: left;
}

.hc-card-header::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}

.hc-card-header::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    pointer-events: none;
}

.hc-logo {
    height: 22px;
    width: auto;
    /* the source SVG is a wide wordmark (995x413) — a fixed square here
       used to squash it; auto width preserves its real proportions */
    margin-bottom: 18px;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.hc-menu-toggle {
    display: none;
}

.hc-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99;
    cursor: pointer;
    border-radius: 26px;
}

.hc-overlay.is-visible {
    display: block;
}

.hc-main {
    height: fit-content;
    flex: 1;
    /* was missing entirely — panel never expanded */
    min-width: 0;
    /* prevents flex blowout on long content */
    overflow-y: auto;
    /* was missing — card content would overflow */
    padding: 24px;
    position: relative;
    max-width: 1100px;
}

.hc-product-title {
    font-family: var(--hc-font-heading);
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.hc-product-subtitle {
    font-size: 13px !important;
    color: rgba(255, 255, 255, .75) !important;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.hc-section {
    padding: 28px 36px;
    border-top: 1px solid var(--hc-border);
}

.hc-section:first-of-type {
    border-top: none;
}

.hc-downloads {
    background: var(--hc-surface);
}

.hc-activation {
    background: var(--hc-surface-2);
}

/* ── Trust band (footer partial) ─────────────────────────────────────────
   Replaces the old three stacked reassurance/guarantee/support panels
   (amber + red alert-style backgrounds, off the site's brand palette) with
   one unified band on the card's own dark-green/blue token pair, matching
   the coupon-block treatment already used elsewhere on the site. ───────── */
.hc-trust {
    background: var(--hc-accent-dark);
    padding: 32px 36px 28px;
}

.hc-trust-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.hc-trust-head svg {
    width: 16px;
    height: 16px;
    color: var(--e-global-color-accent, #7FD820);
    flex: none;
}

.hc-trust-head span {
    color: rgba(255, 255, 255, .92);
    font-family: var(--hc-font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hc-trust-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.hc-trust-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hc-trust-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hc-trust-icon svg {
    width: 16px;
    height: 16px;
    color: #ffffff;
}

.hc-trust-item h4 {
    color: #ffffff;
    font-family: var(--hc-font-heading);
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.1px;
}

.hc-trust-item p {
    color: rgba(255, 255, 255, .68);
    font-size: 12.5px;
    line-height: 1.55;
    margin: 0;
}

.hc-trust-cta {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.hc-trust-cta-text {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .7);
}

.hc-trust-cta-text strong {
    color: #ffffff;
    font-weight: 700;
}

.hc-trust-btn,
.hc-trust-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #ffffff;
    color: var(--hc-accent-dark);
    font-family: var(--hc-font-heading);
    font-size: 13px;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
}

/* Had no :hover rule at all until now — the theme's `.et_is-classic-theme
   a:hover` (specificity 0,0,2,1) was the only thing controlling this
   button's hover color, same issue as .hc-link/.hc-download-link above.
   .hc-trust ancestor prefix clears the theme's specificity. */
.hc-trust .hc-trust-btn:hover,
.hc-trust .hc-trust-btn:visited:hover {
    background: var(--hc-surface-2);
    color: var(--hc-accent-dark);
}

.hc-trust-btn svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 560px) {
    .hc-trust-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Section headings ────────────────────────────────────────────────────── */
.hc-section-title {
    font-family: var(--hc-font-heading);
    font-size: 17px;
    font-weight: 700;
    color: var(--hc-text-primary);
    margin: 0 0 16px;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hc-section-subtitle {
    font-family: var(--hc-font-heading);
    font-size: 15px;
    font-weight: 600;
    margin: 22px 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hc-section p {
    font-size: 14.5px;
    color: var(--hc-text-secondary);
    margin: 0 0 10px;
}

.hc-section p:last-child {
    margin-bottom: 0;
}

/* ── Colour modifiers ────────────────────────────────────────────────────── */
.hc-success {
    color: var(--hc-green-text);
}

.hc-warning {
    color: var(--hc-amber-text);
}

.hc-danger {
    color: var(--hc-red-text);
}

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

/* ── Download table ──────────────────────────────────────────────────────── */
.hc-download-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    margin-top: 4px;
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    overflow: hidden;
}

.hc-download-table thead tr {
    background: var(--hc-surface-3);
}

.hc-download-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--hc-text-secondary);
    border-bottom: 1px solid var(--hc-border);
}

.hc-download-table th:last-child {
    text-align: center;
}

.hc-td {
    padding: 11px 16px;
    border-top: 1px solid var(--hc-border);
    vertical-align: middle;
    color: var(--hc-text-primary);
    font-size: 14px;
}

.hc-download-table tbody tr:first-child .hc-td {
    border-top: none;
}

.hc-td:last-child {
    text-align: center;
}

.hc-download-table tbody tr:hover {
    background: var(--hc-surface-2);
}

.hc-download-table th,
.hc-td {
    padding: 10px 16px !important;
}

/* ── Links ───────────────────────────────────────────────────────────────── */
.hc-link {
    color: var(--hc-accent);
    word-break: break-all;
    text-decoration: none;
    font-weight: 500;
}

/* .hc-card prefix is load-bearing, not decorative — the theme (XStore/Divi
   core) ships `.et_is-classic-theme a:hover { color: var(--et_link-color-hover) }`
   at specificity (0,0,2,1), which beats a bare `.hc-link:hover` (0,0,2,0):
   same class-level count, but the theme's rule also matches the `a` element
   itself, winning the tiebreak. Confirmed via matched-rules inspection on
   the live page — `.hc-link`/`.hc-download-link` text was rendering in the
   theme's hover color, not this plugin's, on every real (non-simulated)
   mouse hover. Scoping under the always-present `.hc-card` ancestor adds a
   third class-level selector, safely clearing (0,0,2,1) without a specificity
   arms race or `!important`. */
.hc-card .hc-link:hover {
    text-decoration: underline;
    color: var(--hc-accent-dark);
}

.hc-email {
    color: var(--hc-accent);
}

/* Download button */
.hc-download-link,
.hc-download-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    background: var(--hc-accent);
    color: #ffffff;
    border-radius: var(--hc-radius-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
}

/* .hc-card prefix required for the same specificity reason as .hc-link:hover
   above — confirmed via real (non-simulated) hover + matched-CSS-rules
   inspection that without it, the theme's `.et_is-classic-theme a:hover`
   rule (specificity 0,0,2,1) was winning over a bare `.hc-download-link:hover`
   (0,0,2,0), rendering the button text in the theme's dark link-hover color
   instead of white — unreadable against the dark-green hover background.
   :visited handling kept alongside for the same reason noted at the base
   rule above (an off-site Microsoft link a visitor has already clicked). */
.hc-card .hc-download-link:hover,
.hc-card .hc-download-link:visited:hover {
    background: var(--hc-accent-dark);
    transform: translateY(-1px);
    color: #ffffff;
}

.hc-download-link:active {
    transform: translateY(0);
}

/* Activation guide link — styled as a callout block */
.hc-activation .hc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--hc-surface);
    border: 1px solid var(--hc-border-strong);
    border-left: 3px solid var(--hc-accent);
    border-radius: 0 var(--hc-radius-sm) var(--hc-radius-sm) 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--hc-accent);
    word-break: break-all;
    margin: 4px 0 8px;
    width: 100%;
}

.hc-activation .hc-link:hover {
    background: var(--hc-surface-3);
    text-decoration: none;
}

/* ── Step list ───────────────────────────────────────────────────────────── */
.hc-steps {
    padding: 0;
    margin: 12px 0 0;
    list-style: none;
    counter-reset: hc-step;
}

.hc-steps li {
    counter-increment: hc-step;
    position: relative;
    padding: 13px 16px 13px 52px;
    margin: 0 0 8px;
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    font-size: 14px;
    color: var(--hc-text-secondary);
    line-height: 1.6;
}

.hc-steps li::before {
    content: counter(hc-step);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background: var(--hc-accent);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.hc-steps li:last-child {
    margin-bottom: 0;
}

.hc-steps li strong {
    color: var(--hc-text-primary);
    font-weight: 600;
}

/* Guide template bodies are static HTML files (not editable per-request),
   so any plain <ol> a guide author writes inside a .hc-section gets the
   same numbered-badge treatment as .hc-steps automatically — no need to
   go back and add a class to every existing file. */
.hc-section ol:not(.hc-steps) {
    padding: 0;
    margin: 12px 0 0;
    list-style: none;
    counter-reset: hc-step;
}

.hc-section ol:not(.hc-steps) li {
    counter-increment: hc-step;
    position: relative;
    padding: 13px 16px 13px 52px;
    margin: 0 0 8px;
    background: var(--hc-surface);
    border: 1px solid var(--hc-border);
    border-radius: var(--hc-radius-md);
    font-size: 14px;
    color: var(--hc-text-secondary);
    line-height: 1.6;
}

.hc-section ol:not(.hc-steps) li::before {
    content: counter(hc-step);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background: var(--hc-accent);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.hc-section ol:not(.hc-steps) li:last-child {
    margin-bottom: 0;
}

.hc-list {
    padding-left: 20px;
    margin: 10px 0;
}

.hc-list li {
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--hc-text-secondary);
}

/* ── Generic product key block ───────────────────────────────────────────── */
.hc-generic-key {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 8px 14px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    border-radius: var(--hc-radius-sm);
    user-select: all;
    cursor: text;
    border: 1px solid #1e293b;
}

/* ── Inline guide-body icons (replaces emoji) ────────────────────────────
   Populated by HC_Cache::replace_emoji_icons() at render time — see that
   method for the full emoji→icon map and why this runs server-side instead
   of being baked into each guide's static HTML. */
.hc-icon {
    display: inline-flex;
    vertical-align: -0.2em;
}

.hc-icon svg {
    width: 1.05em;
    height: 1.05em;
}

.hc-section-title .hc-icon,
.hc-section-subtitle .hc-icon {
    color: var(--hc-accent);
}

/* ── Error state ─────────────────────────────────────────────────────────── */
.hc-error {
    color: var(--hc-red-text);
    font-style: italic;
    padding: 14px 18px;
    background: var(--hc-red-bg);
    border-radius: var(--hc-radius-md);
    border: 1px solid #fecaca;
    font-size: 14px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .hc-card-header {
        padding: 28px 20px 24px;
    }

    .hc-section {
        padding: 22px 20px;
    }

    .hc-product-title {
        font-size: 18px;
    }

    .hc-download-table th,
    .hc-td {
        padding: 10px 12px;
    }

    .hc-steps li {
        padding: 12px 12px 12px 48px;
    }

    .hc-trust {
        padding: 26px 20px 22px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Preview server layout — Flask dev only, not used in WordPress
═══════════════════════════════════════════════════════════════════════════ */

* {
    box-sizing: border-box;
}

.preview-root {
    display: flex;
    height: 100vh;
}

.preview-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
}

.preview-sidebar-header {
    padding: 16px;
    border-bottom: 1px solid #1e293b;
    flex-shrink: 0;
}

.preview-sidebar-header h1 {
    font-size: 13px;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 10px;
    letter-spacing: 0.3px;
}

.preview-search {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #1e293b;
    border-radius: 8px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}

.preview-search::placeholder {
    color: #475569;
}

.preview-search:focus {
    border-color: #6C63FF;
}

.preview-filter-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.preview-select {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #1e293b;
    border-radius: 6px;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 12px;
    outline: none;
}

.preview-count {
    font-size: 11px;
    color: #334155;
    margin-top: 6px;
}

.preview-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #1e293b transparent;
}

.preview-item {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid #0f172a;
    text-decoration: none;
    color: #94a3b8;
    transition: background 0.1s;
}

.preview-item:hover {
    background: #1e293b;
    color: #e2e8f0;
}

.preview-item.active {
    background: #6C63FF;
    border-left: 3px solid #ffffff;
}

.preview-item.active .preview-item-title {
    color: #ffffff;
}

.preview-item.active .preview-item-sub {
    color: rgba(255, 255, 255, .65);
}

.preview-item-title {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    color: #cbd5e1;
}

.preview-item-sub {
    display: block;
    font-size: 11px;
    color: #475569;
    margin-top: 2px;
}

.preview-main {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.preview-devbar {
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 24px;
    font-size: 12px;
    color: #713f12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.preview-devbar code {
    background: #fef9c3;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-family: monospace;
}

.preview-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
    margin-right: 4px;
}

.badge-blue {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.badge-green {
    background: #f0fdf4;
    color: #166534;
    border-color: #bbf7d0;
}

.badge-orange {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fed7aa;
}

.preview-placeholder {
    text-align: center;
    padding: 80px 20px;
    color: #94a3b8;
    font-size: 15px;
}

.preview-placeholder-icon {
    font-size: 36px;
    margin-bottom: 12px;
    color: #cbd5e1;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.hc-sidebar {
    width: var(--hc-sidebar-w, 300px);
    flex-shrink: 0;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e4e4e7;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: hidden;
    border-top-left-radius: 26px;
    border-bottom-left-radius: 26px;
}

.hc-filters {
    padding: 14px;
    border-bottom: 1px solid #e4e4e7;
    background: var(--hc-surface-2, #f8f9fb);
    flex-shrink: 0;
    /* this is the only rule needed to "pin" it */
    /* REMOVED: position: sticky; top: 0; z-index: 2  → scroll ancestor is
       .hc-sb-list, not .hc-sidebar, so sticky never triggered anyway */
}

.hc-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e4e4e7;
    border-radius: 10px;
    background: #ffffff;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    color: #18181b;
}

.hc-search:focus {
    border-color: var(--e-global-color-primary, #1e90ff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-global-color-primary, #1e90ff) 12%, transparent);
}

.hc-filter-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 7px;
}

.hc-field-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a1a1aa;
    margin: 6px 0 2px;
}

.hc-field-label:first-child {
    margin-top: 0;
}

.hc-select {
    flex: 1;
    padding: 5px 7px;
    border: 1px solid #e4e4e7;
    border-radius: 14px;
    background: #ffffff;
    color: #3f3f46;
    font-size: 12px;
    outline: none;
}

.hc-count {
    font-size: 11px;
    color: #a1a1aa;
    margin-top: 5px;
}

/* Real <select> elements stay in the DOM as the source of truth for
   .hc-toggle-group / .hc-dd below (frontend.js reads their options and
   keeps them in sync via .value + a dispatched "change" event, so the
   existing applyFilter() logic needs no changes). Hidden only once JS has
   built the custom widgets — see frontend.js — so they remain the visible,
   working fallback if JS fails to load. */
.hc-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Activation-type segmented toggle ───────────────────────────────────── */
.hc-toggle-group {
    position: relative;
    display: flex;
    gap: 2px;
    background: #f0f1f3;
    border-radius: 10px;
    padding: 3px;
}

.hc-toggle-indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--e-global-color-secondary, #0d3b2e) 12%, white);
    transition: transform 0.2s ease, width 0.2s ease;
    pointer-events: none;
}

.hc-toggle-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    border: none;
    background: transparent;
    padding: 7px 4px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: #71717a;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s;
}

.hc-toggle-btn:hover {
    color: var(--e-global-color-text, #18181b);
}

.hc-toggle-btn.is-active {
    color: var(--e-global-color-secondary, #0d3b2e);
}

/* ── Custom category dropdown ────────────────────────────────────────────
   A native <select>'s open option list can't be styled with CSS at all —
   it's rendered by the OS/browser, not the page — so it stays looking
   "native" no matter how the closed control is styled. This is a fully
   custom trigger + listbox instead. */
.hc-dd {
    position: relative;
    width: 100%;
}

.hc-dd-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 5px 7px;
    border: 1px solid #e4e4e7;
    border-radius: 14px;
    background: #ffffff;
    color: #3f3f46;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.hc-dd-trigger:hover {
    border-color: #d4d4d8;
}

.hc-dd.is-open .hc-dd-trigger {
    border-color: var(--e-global-color-primary, #1e90ff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--e-global-color-primary, #1e90ff) 12%, transparent);
}

.hc-dd-trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hc-dd-chevron {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #71717a;
    border-bottom: 1.5px solid #71717a;
    transform: rotate(45deg);
    transition: transform 0.15s;
    flex-shrink: 0;
}

.hc-dd.is-open .hc-dd-chevron {
    transform: rotate(-135deg);
}

.hc-dd-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(20, 20, 30, 0.14), 0 2px 6px rgba(20, 20, 30, 0.06);
    padding: 6px;
    max-height: 260px;
    overflow-y: auto;
    z-index: 20;
    display: none;
}

.hc-dd.is-open .hc-dd-panel {
    display: block;
}

.hc-dd-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 12.5px;
    color: var(--e-global-color-text, #18181b);
    cursor: pointer;
    transition: background 0.1s;
}

.hc-dd-option:hover {
    background: #f4f5f7;
}

.hc-dd-option.is-selected {
    background: color-mix(in srgb, var(--e-global-color-secondary, #0d3b2e) 10%, white);
    color: var(--e-global-color-secondary, #0d3b2e);
    font-weight: 700;
}

.hc-dd-option .hc-dd-check {
    color: var(--e-global-color-secondary, #0d3b2e);
    font-weight: 800;
    opacity: 0;
    flex-shrink: 0;
}

.hc-dd-option.is-selected .hc-dd-check {
    opacity: 1;
}

.hc-sb-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e4e4e7 transparent;
    min-height: 0;
}

.hc-sb-item {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid #f4f4f5;
    text-decoration: none;
    color: #3f3f46;
    transition: background 0.1s;
    cursor: pointer;
}

.hc-sb-item:hover {
    background: #fafafa;
}

.hc-sb-item.is-active {
    background: color-mix(in srgb, var(--e-global-color-primary) 20%, transparent);
    border-left: 2px solid #18181b;
    padding-left: 12px;
}

.hc-sb-item.is-active .hc-sb-title {
    color: #18181b;
}

/* The title color above was already darkened for the active state, but the
   subtitle line was left at its default light gray (#a1a1aa) — fine on
   white, but poor contrast against the light-blue active background
   (color-mix at 20% opacity) added just above. Darkened here without
   touching the title color or border-left treatment. */
.hc-sb-item.is-active .hc-sb-sub {
    color: #52525b;
}

.hc-sb-title {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    color: #18181b;
}

.hc-sb-sub {
    display: block;
    font-size: 11px;
    color: #a1a1aa;
    margin-top: 2px;
}

.hc-mobile-bar {
    display: none;
}

@media (max-width: 700px) {
    .preview-root {
        flex-direction: column;
        height: auto;
    }

    .hc-layout {
        height: auto;
        min-height: 520px;
        position: relative;
        overflow: visible;

    }

    .hc-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        width: var(--hc-sidebar-w, 300px);
        flex-shrink: 0;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        border-right: 1px solid #e4e4e7;
        align-self: stretch;
        transform: translateX(-150%);
        transition: transform 0.25s ease;
        max-height: 100%;
    }

    .hc-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.14);
    }


    .hc-sb-list {
        max-height: 380px;
    }

    .hc-main {
        width: 100%;
        padding: 0;
        min-height: 520px;
    }


    .hc-mobile-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        border-bottom: 1px solid #e4e4e7;
        background: #fafafa;
        flex-shrink: 0;
        border-radius: 26px;
    }

    .hc-mobile-content {
        padding: 16px;
        max-width: 1100px;
    }

    .hc-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 36px;
        height: 36px;
        padding: 6px;
        background: #ffffff;
        border: 1px solid #e4e4e7;
        border-radius: 6px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s;
    }

    .hc-menu-toggle:hover {
        background: #f4f4f5;
    }

    .hc-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: #3f3f46;
        border-radius: 2px;
        transition: transform 0.2s, opacity 0.2s;
        transform-origin: center;
    }


    .hc-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .hc-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .hc-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .hc-mobile-label {
        font-size: 13px;
        font-weight: 500;
        color: #3f3f46;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .hc-mobile-content .hc-breadcrumb {
        margin-bottom: 12px;
    }

    .hc-mobile-content .hc-card {
        margin: 0;
        border-radius: 8px;
    }


    .hc-placeholder {
        min-height: 300px;
        padding: 48px 20px;
    }

    .preview-list {
        max-height: 40vh;
    }

    .preview-main {
        padding: 16px;
    }
}

.hc-loading {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 6px solid #96588a;
    border-color: var(--e-global-color-primary) transparent var(--e-global-color-primary) transparent;
    animation: woocs_preloader_ajax 1.2s linear infinite;
    position: relative;
    /* change from absolute */
}

.hc-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;
}

@keyframes woocs_preloader_ajax {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.hc-error-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
}

.hc-error-msg {
    color: var(--e-global-color-text);
    opacity: 0.7;
    font-size: 14px;
    margin: 0;
}

.hc-retry-btn {
    background: transparent;
    border: 1px solid var(--e-global-color-accent, #7fd820);
    color: var(--e-global-color-accent, #7fd820);
    border-radius: 6px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.hc-retry-btn:hover {
    background: rgba(127, 216, 32, 0.12);
}

/* ── Hub ── */
.hc-hub {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 32px 0;
}

.hc-hub-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--e-global-color-secondary, #0d3b2e);
	border-radius: 12px;
	padding: 28px 24px;
	text-decoration: none;
	transition: opacity 0.2s, transform 0.2s;
}

.hc-hub-card:hover {
	opacity: 0.88;
	transform: translateY(-3px);
}

.hc-hub-card__label {
	font-size: 17px;
	font-weight: 600;
	color: #ffffff;
	line-height: 1.3;
}

.hc-hub-card__count {
	font-size: 12px;
	color: var(--e-global-color-accent, #7fd820);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

@media (max-width: 1024px) {
	.hc-hub {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.hc-hub {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.hc-hub-card {
		padding: 20px 18px;
	}
}