/**
 * inzc-support.css
 *
 * Page-specific styles shared across the Support & Help section:
 *   - pages/help-center.php    (knowledge base / FAQ landing page)
 *   - pages/submit-ticket.php  (support ticket submission form)
 *   - pages/my-tickets.php     (submitted ticket history and status tracking)
 *
 * Sections:
 *  1.  Help Center — Hero search block
 *  2.  Help Center — Category card grid
 *  3.  Help Center — Bottom CTA strip
 *  4.  Submit Ticket — Two-column layout
 *  5.  Submit Ticket — Sidebar (uses bundled .inzc-accordion component)
 *  6.  Submit Ticket — Quick links
 *  7.  Submit Ticket — Char counter
 *  8.  My Tickets — Stats grid
 *  9.  My Tickets — Stats cards
 * 10.  My Tickets — Filter tabs
 * 11.  My Tickets — Ticket table
 * 12.  My Tickets — Empty state
 * 13.  Responsive
 */

/* =============================================================================
   1. HELP CENTER — HERO SEARCH BLOCK
   ============================================================================= */

.inzc-support-hero {
    background: var(--inzc-bg-accent);
    border: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-xl);
    padding: var(--inzc-spacing-10) var(--inzc-spacing-8);
    text-align: center;
    margin-bottom: var(--inzc-spacing-8);
}

.inzc-support-hero-title {
    font-size: var(--inzc-font-size-2xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    margin: 0 0 var(--inzc-spacing-2) 0;
}

.inzc-support-hero-subtitle {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
    margin: 0 0 var(--inzc-spacing-6) 0;
}

.inzc-support-search-wrap {
    display: flex;
    align-items: center;
    max-width: 520px;
    margin: 0 auto;
    gap: var(--inzc-spacing-2);
}

.inzc-support-search-wrap .inzc-btn {
    height: var(--inzc-input-height);
    box-sizing: border-box;
}

.inzc-support-search-input {
    flex: 1;
    height: var(--inzc-input-height);
    padding: var(--inzc-input-padding-y) var(--inzc-input-padding-x);
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-primary);
    background: var(--inzc-bg-primary);
    border: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-lg);
    outline: none;
    transition: border-color var(--inzc-transition-base);
}

.inzc-support-search-input::placeholder {
    color: var(--inzc-text-tertiary);
}

.inzc-support-search-input:focus {
    border-color: var(--inzc-primary);
    box-shadow: 0 0 0 3px var(--inzc-primary-lighter);
}

/* =============================================================================
   2. HELP CENTER — CATEGORY CARD GRID
   ============================================================================= */

.inzc-support-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--inzc-spacing-5);
    margin-bottom: var(--inzc-spacing-8);
}

.inzc-support-category-card {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-card-padding);
    background: var(--inzc-bg-primary);
    border: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    border-radius: var(--inzc-card-border-radius);
    box-shadow: var(--inzc-card-shadow);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: var(--inzc-transition-colors), box-shadow var(--inzc-transition-base), transform var(--inzc-transition-base);
}

.inzc-support-category-card:hover {
    border-color: var(--inzc-primary-light);
    box-shadow: var(--inzc-card-shadow-hover);
    transform: var(--inzc-transform-card-hover);
}

.inzc-support-category-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--inzc-radius-lg);
    background: var(--inzc-primary-lighter);
    color: var(--inzc-primary);
    flex-shrink: 0;
}

.inzc-support-category-icon--success {
    background: var(--inzc-success-lighter);
    color: var(--inzc-success);
}

.inzc-support-category-icon--warning {
    background: var(--inzc-warning-lighter);
    color: var(--inzc-warning);
}

.inzc-support-category-icon--danger {
    background: var(--inzc-danger-lighter);
    color: var(--inzc-danger);
}

.inzc-support-category-icon--info {
    background: var(--inzc-info-lighter);
    color: var(--inzc-info);
}

.inzc-support-category-title {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin: 0;
}

.inzc-support-category-desc {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
    margin: 0;
    line-height: var(--inzc-line-height-normal);
}

.inzc-support-category-meta {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-tertiary);
    margin-top: auto;
}

/* =============================================================================
   3. HELP CENTER — BOTTOM CTA STRIP
   ============================================================================= */

.inzc-support-cta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inzc-spacing-6);
    padding: var(--inzc-spacing-6);
    background: var(--inzc-bg-primary);
    border: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    border-radius: var(--inzc-card-border-radius);
    box-shadow: var(--inzc-card-shadow);
    margin-top: var(--inzc-spacing-8);
}

.inzc-support-cta-strip-text {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-1);
}

.inzc-support-cta-strip-title {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin: 0;
}

.inzc-support-cta-strip-subtitle {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
    margin: 0;
}

.inzc-support-cta-strip-actions {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-3);
    flex-shrink: 0;
}

/* =============================================================================
   4. SUBMIT TICKET — TWO-COLUMN LAYOUT
   ============================================================================= */

.inzc-support-ticket-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--inzc-spacing-6);
    align-items: start;
}

/* =============================================================================
   5. SUBMIT TICKET — SIDEBAR
   .inzc-card (bundle) provides white bg, border-radius, box-shadow.
   .inzc-support-sidebar overrides padding and pins position — same pattern as
   .inzc-wizard-sidebar on campaign-create.php.
   ============================================================================= */

.inzc-support-sidebar {
    padding: var(--inzc-spacing-6);
    position: sticky;
    top: var(--inzc-spacing-6);
    align-self: flex-start;
}

/* Info cards inside the sidebar — mirrors .inzc-info-card on campaign-create */
.inzc-support-info-card {
    border-radius: var(--inzc-radius-lg);
    padding: var(--inzc-spacing-5);
    margin-bottom: var(--inzc-spacing-4);
    border: 1px solid transparent;
}

.inzc-support-info-card:last-child {
    margin-bottom: 0;
}

/* Info (blue) — "Before you submit" */
.inzc-support-info-card--info {
    background: var(--inzc-info-lightest);
    border-color: rgba(99, 102, 241, 0.1);
}

.inzc-support-info-card--info .inzc-support-info-card-icon,
.inzc-support-info-card--info .inzc-support-info-card-title {
    color: var(--inzc-info);
}

/* Warning (orange) — dispute notice */
.inzc-support-info-card--warning {
    background: var(--inzc-warning-lightest);
    border-color: transparent;
}

.inzc-support-info-card--warning .inzc-support-info-card-icon,
.inzc-support-info-card--warning .inzc-support-info-card-title {
    color: var(--inzc-warning);
}

/* Success (green) — priority guide */
.inzc-support-info-card--success {
    background: var(--inzc-success-lightest);
    border-color: transparent;
}

.inzc-support-info-card--success .inzc-support-info-card-icon,
.inzc-support-info-card--success .inzc-support-info-card-title {
    color: var(--inzc-success-dark);
}

/* In dark mode --inzc-success-dark (#047857) is too dark to read; use the lighter variant instead
   (consolidated into Section 14 at the bottom of this file) */

.inzc-support-info-card-header {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-2);
    margin-bottom: var(--inzc-spacing-2);
}

.inzc-support-info-card-icon {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
}

.inzc-support-info-card-title {
    font-size: 14px;
    font-weight: var(--inzc-font-weight-bold);
    margin: 0;
}

.inzc-support-info-card-body {
    font-size: 13px;
    color: var(--inzc-text-primary);
    line-height: 1.5;
}

.inzc-support-info-card-body p {
    margin: 0 0 var(--inzc-spacing-2) 0;
}

.inzc-support-info-card-body p:last-child {
    margin-bottom: 0;
}

/* Two-column icon + label list (used in priority guide) */
.inzc-support-priority-list {
    display: grid;
    grid-template-columns: 1.25em 1fr;
    gap: var(--inzc-spacing-2) var(--inzc-spacing-3);
    align-items: center;
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    line-height: 1.5;
}

/* =============================================================================
   6. SUBMIT TICKET — QUICK LINKS
   ============================================================================= */

.inzc-support-quicklinks {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-1);
}

.inzc-support-quicklink {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-2) var(--inzc-spacing-3);
    border-radius: var(--inzc-radius-md);
    color: var(--inzc-text-secondary);
    text-decoration: none;
    font-size: var(--inzc-font-size-base);
    transition: var(--inzc-transition-colors);
}

.inzc-support-quicklink:hover {
    background: var(--inzc-bg-tertiary);
    color: var(--inzc-primary);
}

.inzc-support-quicklink svg {
    flex-shrink: 0;
    color: var(--inzc-text-tertiary);
    pointer-events: none;
}

.inzc-support-quicklink:hover svg {
    color: var(--inzc-primary);
}

/* =============================================================================
   7. SUBMIT TICKET — CHAR COUNTER
   ============================================================================= */

.inzc-support-char-counter {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-tertiary);
    text-align: right;
    margin-top: var(--inzc-spacing-1);
}

.inzc-support-char-counter.inzc-support-char-counter--warn {
    color: var(--inzc-warning);
}

.inzc-support-char-counter.inzc-support-char-counter--max {
    color: var(--inzc-danger);
}

/* =============================================================================
   8. MY TICKETS — STATS GRID
   ============================================================================= */

.inzc-support-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--inzc-spacing-5);
    margin-bottom: var(--inzc-spacing-8);
}

/* =============================================================================
   9. MY TICKETS — STATS CARDS
   ============================================================================= */

.inzc-support-stat-card {
    display: flex;
    align-items: flex-start;
    gap: var(--inzc-spacing-4);
    padding: var(--inzc-card-padding);
    background: var(--inzc-bg-primary);
    border: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    border-radius: var(--inzc-card-border-radius);
    box-shadow: var(--inzc-card-shadow);
}

.inzc-support-stat-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--inzc-radius-lg);
    flex-shrink: 0;
    background: var(--inzc-primary-lighter);
    color: var(--inzc-primary);
}

.inzc-support-stat-icon--warning {
    background: var(--inzc-warning-lighter);
    color: var(--inzc-warning);
}

.inzc-support-stat-icon--success {
    background: var(--inzc-success-lighter);
    color: var(--inzc-success);
}

.inzc-support-stat-icon--secondary {
    background: var(--inzc-bg-tertiary);
    color: var(--inzc-text-secondary);
}

.inzc-support-stat-body {
    display: flex;
    flex-direction: column;
    gap: var(--inzc-spacing-1);
    min-width: 0;
}

.inzc-support-stat-label {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-secondary);
    white-space: nowrap;
}

.inzc-support-stat-value {
    font-size: var(--inzc-font-size-2xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    line-height: var(--inzc-line-height-tight);
}

/* =============================================================================
   10. MY TICKETS — FILTER TABS
   Filter tabs now use the bundled .inzc-filter-tab / .inzc-tab-badge component
   from assets/css/components/inzc-filters.css (part of influenzic.min.css).
   No page-level overrides required.
   ============================================================================= */

/* =============================================================================
   11. MY TICKETS — TICKET TABLE
   ============================================================================= */

.inzc-support-tickets-table {
    width: 100%;
}

.inzc-support-table-header {
    display: grid;
    grid-template-columns: 120px 1fr 160px 140px 150px 80px;
    gap: var(--inzc-spacing-4);
    padding: var(--inzc-spacing-3) var(--inzc-card-padding);
    background: var(--inzc-bg-tertiary);
    border-bottom: var(--inzc-border-width-thin) solid var(--inzc-border-light);
}

.inzc-support-table-header-cell {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--inzc-letter-spacing-wide);
}

.inzc-support-ticket-row {
    display: grid;
    grid-template-columns: 120px 1fr 160px 140px 150px 80px;
    gap: var(--inzc-spacing-4);
    align-items: center;
    padding: var(--inzc-spacing-4) var(--inzc-card-padding);
    border-bottom: var(--inzc-border-width-thin) solid var(--inzc-border-light);
    cursor: pointer;
    transition: background-color var(--inzc-transition-base);
}

.inzc-support-ticket-row:last-child {
    border-bottom: none;
}

.inzc-support-ticket-row:hover {
    background: var(--inzc-bg-tertiary);
}

.inzc-support-ticket-id {
    font-size: var(--inzc-font-size-sm);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-primary);
    font-family: var(--inzc-font-family-mono);
}

.inzc-support-ticket-subject {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-medium);
    color: var(--inzc-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inzc-support-ticket-category {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
}

.inzc-support-ticket-date {
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-tertiary);
}

/* =============================================================================
   12. MY TICKETS — EMPTY STATE
   ============================================================================= */

.inzc-support-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--inzc-spacing-12) var(--inzc-spacing-6);
    gap: var(--inzc-spacing-4);
}

.inzc-support-empty-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--inzc-radius-full);
    background: var(--inzc-bg-tertiary);
    color: var(--inzc-text-tertiary);
}

.inzc-support-empty-title {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin: 0;
}

.inzc-support-empty-text {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
    max-width: 380px;
    margin: 0;
    line-height: var(--inzc-line-height-normal);
}

/* =============================================================================
   13. RESPONSIVE
   ============================================================================= */

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

    .inzc-support-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .inzc-support-ticket-layout {
        grid-template-columns: 1fr;
    }

    .inzc-support-sidebar {
        position: static;
        width: auto;
    }

    .inzc-support-table-header,
    .inzc-support-ticket-row {
        grid-template-columns: 110px 1fr 140px 120px 80px;
    }

    /* Hide last-updated column on small desktop */
    .inzc-support-table-header-cell:nth-child(5),
    .inzc-support-ticket-row>*:nth-child(5) {
        display: none;
    }
}

@media (max-width: 768px) {
    .inzc-support-hero {
        padding: var(--inzc-spacing-8) var(--inzc-spacing-5);
    }

    .inzc-support-categories-grid {
        grid-template-columns: 1fr;
    }

    .inzc-support-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .inzc-support-cta-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    .inzc-support-cta-strip-actions {
        flex-wrap: wrap;
    }

    .inzc-support-table-header {
        display: none;
    }

    .inzc-support-ticket-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        row-gap: var(--inzc-spacing-2);
    }

    /* On mobile: subject spans full width, other cols hidden */
    .inzc-support-ticket-id {
        grid-column: 1;
        grid-row: 1;
    }

    .inzc-support-ticket-subject {
        grid-column: 1;
        grid-row: 2;
    }

    .inzc-support-ticket-row>.inzc-support-ticket-category,
    .inzc-support-ticket-row>.inzc-support-ticket-date {
        display: none;
    }

    .inzc-support-ticket-row>*:nth-child(4) {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .inzc-support-ticket-row>*:nth-child(6) {
        display: none;
    }
}

@media (max-width: 420px) {
    .inzc-support-search-label {
        display: none;
    }

    .inzc-support-search-wrap .inzc-btn {
        padding-left: var(--inzc-spacing-3);
        padding-right: var(--inzc-spacing-3);
    }
}

/* =============================================================================
   14. BREADCRUMB NAVIGATION
   ============================================================================= */

.inzc-breadcrumb {
    margin-bottom: var(--inzc-spacing-5);
}

.inzc-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.inzc-breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
}

.inzc-breadcrumb-link {
    color: var(--inzc-text-secondary);
    text-decoration: none;
    transition: color var(--inzc-transition-fast);
}

.inzc-breadcrumb-link:hover {
    color: var(--inzc-primary);
}

.inzc-breadcrumb-sep {
    flex-shrink: 0;
    color: var(--inzc-text-tertiary);
    margin: 0 var(--inzc-spacing-1);
}

.inzc-breadcrumb-active {
    color: var(--inzc-text-primary);
    font-weight: var(--inzc-font-weight-medium);
}

/* =============================================================================
   15. ARTICLE LIST
   ============================================================================= */

/* Remove base card padding so rows sit flush with card edges */
.inzc-card:has(.inzc-article-list) {
    padding: 0;
    overflow: hidden;
}

.inzc-article-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.inzc-article-list-item {
    border-bottom: 1px solid var(--inzc-border-light);
}

.inzc-article-list-item:last-child {
    border-bottom: none;
}

.inzc-article-list-link {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--inzc-spacing-4);
    row-gap: var(--inzc-spacing-1);
    padding: var(--inzc-spacing-4) var(--inzc-spacing-5);
    text-decoration: none;
    color: inherit;
    transition: background var(--inzc-transition-fast);
}

.inzc-article-list-link:hover {
    background: var(--inzc-bg-secondary);
}

.inzc-article-list-title {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    transition: color var(--inzc-transition-fast);
}

.inzc-article-list-link:hover .inzc-article-list-title {
    color: var(--inzc-primary);
}

.inzc-article-list-excerpt {
    grid-column: 1;
    grid-row: 2;
    display: block;
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    line-height: var(--inzc-line-height-normal);
}

.inzc-article-list-chevron {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    flex-shrink: 0;
    color: var(--inzc-text-tertiary);
    transition: color var(--inzc-transition-fast), transform var(--inzc-transition-fast);
}

.inzc-article-list-link:hover .inzc-article-list-chevron {
    color: var(--inzc-primary);
    transform: translateX(2px);
}

/* =============================================================================
   16. ARTICLE BODY TYPOGRAPHY
   ============================================================================= */

/* Remove base card padding — header/body/footer sections carry their own */
.inzc-article-card {
    padding: 0;
    overflow: hidden;
}

.inzc-article-card .inzc-card-header {
    background: transparent;
    border-bottom: 1px solid var(--inzc-border-light);
    padding: var(--inzc-card-padding);
}

.inzc-article-card .inzc-card-title {
    font-size: var(--inzc-font-size-xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    line-height: var(--inzc-line-height-snug, 1.35);
    margin: 0;
}

.inzc-article-body {
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-primary);
    line-height: var(--inzc-line-height-normal);
}

.inzc-article-body h2 {
    font-size: var(--inzc-font-size-xl);
    font-weight: var(--inzc-font-weight-bold);
    color: var(--inzc-text-primary);
    margin: var(--inzc-spacing-8) 0 var(--inzc-spacing-3) 0;
    line-height: var(--inzc-line-height-snug, 1.35);
}

.inzc-article-body h3 {
    font-size: var(--inzc-font-size-lg);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin: var(--inzc-spacing-6) 0 var(--inzc-spacing-2) 0;
    line-height: var(--inzc-line-height-snug, 1.35);
}

.inzc-article-body h4 {
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    margin: var(--inzc-spacing-5) 0 var(--inzc-spacing-2) 0;
}

.inzc-article-body h2:first-child,
.inzc-article-body h3:first-child,
.inzc-article-body h4:first-child {
    margin-top: 0;
}

.inzc-article-body p {
    margin: 0 0 var(--inzc-spacing-4) 0;
    line-height: var(--inzc-line-height-normal);
    color: var(--inzc-text-primary);
}

.inzc-article-body p:last-child {
    margin-bottom: 0;
}

.inzc-article-body ul,
.inzc-article-body ol {
    padding-left: var(--inzc-spacing-6);
    margin: 0 0 var(--inzc-spacing-4) 0;
}

.inzc-article-body li {
    margin-bottom: var(--inzc-spacing-2);
    line-height: var(--inzc-line-height-normal);
    color: var(--inzc-text-primary);
}

.inzc-article-body li:last-child {
    margin-bottom: 0;
}

.inzc-article-body strong,
.inzc-article-body b {
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
}

.inzc-article-body a {
    color: var(--inzc-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--inzc-transition-fast), color var(--inzc-transition-fast);
}

.inzc-article-body a:hover {
    color: var(--inzc-primary-dark, var(--inzc-primary));
    border-bottom-color: var(--inzc-primary);
}

.inzc-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--inzc-radius-md);
    margin: var(--inzc-spacing-4) 0;
}

.inzc-article-body blockquote {
    margin: var(--inzc-spacing-5) 0;
    padding: var(--inzc-spacing-3) var(--inzc-spacing-5);
    border-left: 3px solid var(--inzc-primary);
    background: var(--inzc-bg-secondary);
    border-radius: 0 var(--inzc-radius-md) var(--inzc-radius-md) 0;
    font-style: italic;
    color: var(--inzc-text-secondary);
}

.inzc-article-body code {
    font-family: var(--inzc-font-mono, monospace);
    font-size: 0.875em;
    background: var(--inzc-bg-secondary);
    border: 1px solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-sm);
    padding: 1px 5px;
    color: var(--inzc-text-primary);
}

.inzc-article-body pre {
    background: var(--inzc-bg-secondary);
    border: 1px solid var(--inzc-border-light);
    border-radius: var(--inzc-radius-md);
    padding: var(--inzc-spacing-4);
    overflow-x: auto;
    margin: var(--inzc-spacing-4) 0;
}

.inzc-article-body pre code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--inzc-font-size-sm);
}

.inzc-article-body hr {
    border: none;
    border-top: 1px solid var(--inzc-border-light);
    margin: var(--inzc-spacing-6) 0;
}

/* Footer — back link row */
.inzc-article-footer {
    display: flex;
    align-items: center;
}

.inzc-article-card .inzc-card-footer {
    background: var(--inzc-bg-secondary);
    border-top: 1px solid var(--inzc-border-light);
}

/* =============================================================================
   17. SEARCH RESULTS PANEL
   ============================================================================= */

.inzc-help-search-results {
    margin-bottom: var(--inzc-spacing-6);
}

/* Results back/header bar */
.inzc-help-search-back-bar {
    display: flex;
    align-items: center;
    margin-bottom: var(--inzc-spacing-3);
}

/* Loading state */
.inzc-help-search-loading {
    display: flex;
    align-items: center;
    gap: var(--inzc-spacing-3);
    padding: var(--inzc-spacing-5) var(--inzc-spacing-2);
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
}

/* Empty / no results state */
.inzc-help-search-empty {
    padding: var(--inzc-spacing-5) var(--inzc-spacing-2);
    font-size: var(--inzc-font-size-base);
    color: var(--inzc-text-secondary);
    line-height: var(--inzc-line-height-normal);
    background: var(--inzc-bg-secondary);
    border-radius: var(--inzc-radius-lg);
    margin: 0;
}

/* Error state */
.inzc-help-search-error {
    padding: var(--inzc-spacing-4) var(--inzc-spacing-5);
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-danger, #dc2626);
    line-height: var(--inzc-line-height-normal);
    background: rgba(220, 38, 38, .07);
    border: 1px solid rgba(220, 38, 38, .2);
    border-radius: var(--inzc-radius-lg);
    margin: 0;
}

/* Results list */
.inzc-help-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--inzc-bg-primary);
    border-radius: var(--inzc-radius-lg);
    box-shadow: var(--inzc-card-shadow);
    overflow: hidden;
}

.inzc-help-search-item {
    border-bottom: 1px solid var(--inzc-border-light);
}

.inzc-help-search-item:last-child {
    border-bottom: none;
}

.inzc-help-search-link {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--inzc-spacing-1);
    padding: var(--inzc-spacing-4) var(--inzc-spacing-5);
    text-decoration: none;
    color: inherit;
    transition: background var(--inzc-transition-fast);
}

.inzc-help-search-link:hover {
    background: var(--inzc-bg-secondary);
}

.inzc-help-search-title {
    display: block;
    font-size: var(--inzc-font-size-base);
    font-weight: var(--inzc-font-weight-semibold);
    color: var(--inzc-text-primary);
    transition: color var(--inzc-transition-fast);
}

.inzc-help-search-link:hover .inzc-help-search-title {
    color: var(--inzc-primary);
}

.inzc-help-search-excerpt {
    display: block;
    font-size: var(--inzc-font-size-sm);
    color: var(--inzc-text-secondary);
    line-height: var(--inzc-line-height-normal);
}

/* =============================================================================
   18. DARK MODE OVERRIDES
   ============================================================================= */

[data-inzc-theme="dark"] .inzc-support-hero,
[data-inzc-theme="dark"] .inzc-support-category-card,
[data-inzc-theme="dark"] .inzc-support-cta-strip,
[data-inzc-theme="dark"] .inzc-support-stat-card {
    background: var(--inzc-bg-secondary);
}

[data-inzc-theme="dark"] .inzc-support-ticket-row:hover {
    background: var(--inzc-bg-light);
}

[data-inzc-theme="dark"] .inzc-support-info-card--success .inzc-support-info-card-icon,
[data-inzc-theme="dark"] .inzc-support-info-card--success .inzc-support-info-card-title {
    color: var(--inzc-success-light);
}

/* =============================================================================
   19. STOREFRONT GUEST LAYOUT INTEGRATION
   ============================================================================= */

.inzc-sf-support-page {
    padding: 56px 0 88px;
    background: var(--inzc-sf-bg, #f8fafc);
    min-height: calc(100vh - 280px);
}

.inzc-sf-support-page .inzc-page-header {
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.inzc-sf-support-page .inzc-support-hero {
    background: var(--inzc-sf-card-bg, #ffffff);
    border: 1px solid var(--inzc-sf-card-border, #e2e8f0);
    border-radius: 20px;
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.04);
}

.inzc-sf-support-page .inzc-support-category-card {
    background: var(--inzc-sf-card-bg, #ffffff);
    border: 1px solid var(--inzc-sf-card-border, #e2e8f0);
    border-radius: 18px;
    box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.inzc-sf-support-page .inzc-support-category-card:hover {
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 12px 30px -8px rgba(99, 102, 241, 0.16);
    transform: translateY(-2px);
}

.inzc-sf-support-page .inzc-support-cta-strip {
    background: var(--inzc-sf-card-bg, #ffffff);
    border: 1px solid var(--inzc-sf-card-border, #e2e8f0);
    border-radius: 20px;
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.04);
}

.inzc-sf-support-page .inzc-article-card {
    border-radius: 20px;
    border: 1px solid var(--inzc-sf-card-border, #e2e8f0);
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.04);
}

[data-inzc-theme="dark"] .inzc-sf-support-page {
    background: var(--inzc-sf-bg, #0b0f19);
}

[data-inzc-theme="dark"] .inzc-sf-support-page .inzc-support-hero,
[data-inzc-theme="dark"] .inzc-sf-support-page .inzc-support-category-card,
[data-inzc-theme="dark"] .inzc-sf-support-page .inzc-support-cta-strip,
[data-inzc-theme="dark"] .inzc-sf-support-page .inzc-article-card {
    background: var(--inzc-sf-card-bg, #111827);
    border-color: var(--inzc-sf-card-border, rgba(255, 255, 255, 0.08));
}