/**
 * VPSMakers Knowledge Base — CSS Authority Build
 * File: assets/css/120-knowledge-base.css
 *
 * Elementor is used only for markup, content and CSS classes.
 * Do NOT set layout, sizing, spacing, typography, colors or icon styles
 * manually in Elementor. This stylesheet is the source of truth.
 *
 * Visual basis: knowledge-base(2).css
 * Elementor/scoped basis: 120-knowledge-base(3).css
 * Icon policy: Primary Blue (#3B44FF)
 */

.knowledge-base-page {
    --kb-night-background: #020316!important;
    --kb-dark-surface: #080A1F!important;
    --kb-primary-blue: #3B44FF!important;
    --kb-light-blue: #5F6DFF!important;
    --kb-primary-text: #ffffff!important;
    --kb-secondary-text: #BBBBBB!important;
    --kb-subtle-border: #FFFFFF1A!important;
    --kb-success: #3CE0A0!important;
    --kb-display-font: "Space Grotesk", Inter, Arial, sans-serif!important;
    --kb-body-font: "Roboto", Arial, sans-serif!important;
    --kb-mono-font: "JetBrains Mono", Consolas, monospace!important;
    --kb-ease: cubic-bezier(0.16, 0.8, 0.24, 1)!important;
    --kb-content-width: 1120px!important;

    position: relative!important;
    isolation: isolate!important;
    overflow: hidden!important;
    width: 100%!important;
    background:
        radial-gradient(560px 320px at 82% -6%, rgba(59, 68, 255, 0.28), transparent 60%),
        radial-gradient(420px 280px at 10% 18%, rgba(95, 109, 255, 0.1), transparent 65%),
        var(--kb-night-background)!important;
    color: var(--kb-primary-text)!important;
    font-family: var(--kb-body-font)!important;
    line-height: 1.55!important;
    display: flex!important;
    flex-direction: column!important;
    align-items: stretch!important;
    justify-content: flex-start!important;
    gap: 0!important;
    min-width: 0!important;
    min-height: 0!important;
    margin: 0!important;
    padding: 0!important;
}

.knowledge-base-page,
.knowledge-base-page *,
.knowledge-base-page *::before,
.knowledge-base-page *::after {
    box-sizing: border-box!important;
}

.knowledge-base-page a {
    color: inherit!important;
}

.knowledge-base-page a,
.knowledge-base-page button,
.knowledge-base-page input,
.knowledge-base-page .knowledge-category-card,
.knowledge-base-page .knowledge-article-card {
    transition:
        color 0.22s var(--kb-ease),
        background-color 0.22s var(--kb-ease),
        border-color 0.22s var(--kb-ease),
        box-shadow 0.22s var(--kb-ease),
        opacity 0.22s var(--kb-ease),
        transform 0.22s var(--kb-ease)!important;
}

.knowledge-base-page a:focus-visible,
.knowledge-base-page button:focus-visible,
.knowledge-base-page input:focus-visible {
    outline: 2px solid var(--kb-light-blue)!important;
    outline-offset: 3px!important;
}

.knowledge-base-page .elementor-widget-text-editor p:last-child {
    margin-bottom: 0!important;
}

/* Elementor is responsible only for markup and semantic classes on this page.
   These resets remove its default 10px container padding and widget spacing. */
.knowledge-base-page .e-con,
.knowledge-base-page .e-flexbox,
.knowledge-base-page .e-grid,
.knowledge-base-page .elementor-widget,
.knowledge-base-page .elementor-widget-container {
    min-width: 0!important;
    max-width: none!important;
    margin: 0!important;
}

.knowledge-base-page .elementor-widget-container {
    background: transparent!important;
    border: 0!important;
    box-shadow: none!important;
}

.knowledge-base-page .knowledge-hero,
.knowledge-base-page .knowledge-hero-content,
.knowledge-base-page .knowledge-categories-section,
.knowledge-base-page .knowledge-popular-section,
.knowledge-base-page .knowledge-divider-wrap,
.knowledge-base-page .knowledge-section-content,
.knowledge-base-page .knowledge-section-header,
.knowledge-base-page .knowledge-category-grid,
.knowledge-base-page .knowledge-article-grid,
.knowledge-base-page .knowledge-stats,
.knowledge-base-page .knowledge-stat,
.knowledge-base-page .knowledge-category-card,
.knowledge-base-page .knowledge-article-card,
.knowledge-base-page .knowledge-category-footer,
.knowledge-base-page .knowledge-category-card > footer,
.knowledge-base-page .knowledge-article-meta {
    margin-block-start: 0!important;
    margin-block-end: 0!important;
}

.knowledge-base-page .knowledge-section-content {
    width: calc(100% - 64px)!important;
    max-width: var(--kb-content-width)!important;
    margin-inline: auto!important;
    padding: 0!important;
    display: flex!important;
    flex-direction: column!important;
    align-items: stretch!important;
    justify-content: flex-start!important;
    gap: 0!important;
}

/* =========================================================
   Hero
   ========================================================= */

.knowledge-base-page .knowledge-hero {
    position: relative!important;
    isolation: isolate!important;
    overflow: hidden!important;
    width: 100%!important;
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 0!important;
    padding-block: 88px 40px!important;
    text-align: center!important;
}

.knowledge-base-page .knowledge-hero-content {
    position: relative!important;
    z-index: 2!important;
    width: calc(100% - 64px)!important;
    max-width: var(--kb-content-width)!important;
    margin-inline: auto!important;
    padding: 0!important;
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 0!important;
}

.knowledge-base-page .knowledge-hero-effects,
.knowledge-base-page .knowledge-hero-effects > .elementor-widget-container,
.knowledge-base-page .knowledge-hero-background {
    position: absolute!important;
    inset: 0!important;
    width: 100%!important;
    height: 100%!important;
    pointer-events: none!important;
}

.knowledge-base-page .knowledge-hero-effects {
    z-index: 0!important;
}

.knowledge-base-page .knowledge-hero-background {
    overflow: hidden!important;
}

.knowledge-base-page #knowledgeHeroCanvas {
    position: absolute!important;
    inset: 0!important;
    display: block!important;
    width: 100%!important;
    height: 100%!important;
}

.knowledge-base-page .knowledge-hero-veil {
    position: absolute!important;
    inset: 0!important;
    background: rgba(2, 3, 22, 0.45)!important;
    -webkit-backdrop-filter: blur(18px)!important;
    backdrop-filter: blur(18px)!important;
}

.knowledge-base-page .knowledge-hero-fade {
    position: absolute!important;
    inset: 0!important;
    background: linear-gradient(
        to bottom,
        rgba(2, 3, 22, 0.35) 0%,
        rgba(2, 3, 22, 0) 26%,
        rgba(2, 3, 22, 0.55) 68%,
        var(--kb-night-background) 96%
    )!important;
}

.knowledge-base-page .knowledge-orb {
    position: absolute!important;
    display: block!important;
    border-radius: 50%!important;
    filter: blur(60px)!important;
    opacity: 0.5!important;
}

.knowledge-base-page .knowledge-orb-primary {
    top: -120px!important;
    left: 8%!important;
    width: 340px!important;
    height: 340px!important;
    background: radial-gradient(circle, rgba(95, 109, 255, 0.55), transparent 70%)!important;
    animation: knowledge-orb-primary-drift 22s ease-in-out infinite!important;
}

.knowledge-base-page .knowledge-orb-secondary {
    top: 60px!important;
    right: 6%!important;
    width: 260px!important;
    height: 260px!important;
    background: radial-gradient(circle, rgba(60, 224, 160, 0.28), transparent 70%)!important;
    animation: knowledge-orb-secondary-drift 26s ease-in-out infinite!important;
}

@keyframes knowledge-orb-primary-drift {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, 40px) scale(1.12);
    }
}

@keyframes knowledge-orb-secondary-drift {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-24px, 26px) scale(0.94);
    }
}

/* Hero eyebrow */

.knowledge-base-page .knowledge-eyebrow {
    display: inline-flex!important;
    flex-direction: row!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 8px!important;
    width: auto!important;
    margin: 0 auto 22px!important;
    padding: 6px 12px!important;
    border: 1px solid var(--kb-subtle-border)!important;
    border-radius: 100px!important;
    color: var(--kb-secondary-text)!important;
    font-family: var(--kb-mono-font)!important;
    font-size: 12.5px!important;
    line-height: 1.4!important;
}

.knowledge-base-page .knowledge-eyebrow-icon {
    width: 8px!important;
    min-width: 8px!important;
}

.knowledge-base-page .knowledge-eyebrow-icon .elementor-icon {
    position: relative!important;
    display: block!important;
    width: 7px!important;
    height: 7px!important;
    padding: 0!important;
    border-radius: 50%!important;
    background: var(--kb-success)!important;
    color: var(--kb-success)!important;
    font-size: 7px!important;
}

.knowledge-base-page .knowledge-eyebrow-icon .elementor-icon::after {
    content: ""!important;
    position: absolute!important;
    inset: -4px!important;
    border: 1px solid var(--kb-success)!important;
    border-radius: 50%!important;
    opacity: 0.7!important;
    animation: knowledge-pulse-ring 2.2s var(--kb-ease) infinite!important;
}

.knowledge-base-page .knowledge-eyebrow-icon svg,
.knowledge-base-page .knowledge-eyebrow-icon i {
    opacity: 0!important;
}

.knowledge-base-page .knowledge-eyebrow-text,
.knowledge-base-page .knowledge-eyebrow-text .elementor-widget-container,
.knowledge-base-page .knowledge-eyebrow-text p {
    margin: 0!important;
    color: inherit!important;
    font: inherit!important;
    line-height: inherit!important;
}

@keyframes knowledge-pulse-ring {
    0% {
        transform: scale(0.6);
        opacity: 0.7;
    }

    70%,
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Hero copy */

.knowledge-base-page .knowledge-hero-title,
.knowledge-base-page .knowledge-hero-title .elementor-heading-title {
    display: block!important;
    width: 100%!important;
    margin: 0 0 16px!important;
    color: var(--kb-primary-text)!important;
    font-family: var(--kb-display-font)!important;
    font-size: clamp(32px, 4.4vw, 48px)!important;
    font-weight: 600!important;
    line-height: 1.1!important;
    letter-spacing: -0.01em!important;
}

.knowledge-base-page .knowledge-hero-description {
    width: min(100%, 58ch)!important;
    margin: 0 auto 34px!important;
}

.knowledge-base-page .knowledge-hero-description,
.knowledge-base-page .knowledge-hero-description p {
    color: var(--kb-secondary-text)!important;
    font-size: 16.5px!important;
    line-height: 1.65!important;
}

/* Search */

.knowledge-base-page .knowledge-search-widget {
    width: min(100%, 560px)!important;
    margin-inline: auto!important;
}

.knowledge-base-page .knowledge-search {
    position: relative!important;
    width: 100%!important;
}

.knowledge-base-page .knowledge-search-icon {
    position: absolute!important;
    top: 50%!important;
    left: 18px!important;
    width: 18px!important;
    height: 18px!important;
    pointer-events: none!important;
    stroke: var(--kb-secondary-text)!important;
    stroke-width: 1.8!important;
    stroke-linecap: round!important;
    stroke-linejoin: round!important;
    transform: translateY(-50%)!important;
    transition: stroke 0.2s var(--kb-ease)!important;
}

.knowledge-base-page .knowledge-search-input {
    width: 100%!important;
    min-height: 54px!important;
    margin: 0!important;
    padding: 16px 18px 16px 50px!important;
    border: 1px solid var(--kb-subtle-border)!important;
    border-radius: 12px!important;
    outline: none!important;
    background: var(--kb-dark-surface)!important;
    box-shadow: none!important;
    color: var(--kb-primary-text)!important;
    font-family: var(--kb-body-font)!important;
    font-size: 15px!important;
    line-height: 1.4!important;
    -webkit-appearance: none!important;
    appearance: none!important;
}

.knowledge-base-page .knowledge-search-input::placeholder {
    color: #7d7f97!important;
    opacity: 1!important;
}

.knowledge-base-page .knowledge-search-input:hover {
    border-color: rgba(255, 255, 255, 0.2)!important;
}

.knowledge-base-page .knowledge-search-input:focus {
    border-color: var(--kb-light-blue)!important;
    box-shadow: 0 0 0 4px rgba(95, 109, 255, 0.14)!important;
}

.knowledge-base-page .knowledge-search:focus-within .knowledge-search-icon {
    stroke: var(--kb-light-blue)!important;
}

.knowledge-base-page .knowledge-search-input::-webkit-search-cancel-button {
    cursor: pointer!important;
    filter: invert(1)!important;
    opacity: 0.65!important;
}

.knowledge-base-page .knowledge-search-hint {
    margin-top: 14px!important;
    color: var(--kb-secondary-text)!important;
    font-family: var(--kb-mono-font)!important;
    font-size: 12px!important;
}

.knowledge-base-page .knowledge-search-hint p {
    margin: 0!important;
    color: inherit!important;
    font: inherit!important;
}

/* Terminal */

.knowledge-base-page .knowledge-terminal-widget {
    width: min(100%, 560px)!important;
    margin: 40px auto 0!important;
}

.knowledge-base-page .knowledge-terminal {
    overflow: hidden!important;
    width: 100%!important;
    border: 1px solid var(--kb-subtle-border)!important;
    border-radius: 12px!important;
    background: var(--kb-dark-surface)!important;
    box-shadow: 0 30px 60px -30px rgba(59, 68, 255, 0.35)!important;
    text-align: left!important;
}

.knowledge-base-page .knowledge-terminal-header {
    display: flex!important;
    align-items: center!important;
    gap: 8px!important;
    padding: 11px 14px!important;
    border-bottom: 1px solid var(--kb-subtle-border)!important;
    background: rgba(255, 255, 255, 0.02)!important;
}

.knowledge-base-page .knowledge-terminal-controls {
    display: flex!important;
    align-items: center!important;
    gap: 8px!important;
}

.knowledge-base-page .knowledge-terminal-dot {
    display: block!important;
    width: 9px!important;
    height: 9px!important;
    border-radius: 50%!important;
}

.knowledge-base-page .knowledge-terminal-dot-red {
    background: #ff5f57!important;
}

.knowledge-base-page .knowledge-terminal-dot-yellow {
    background: #febc2e!important;
}

.knowledge-base-page .knowledge-terminal-dot-green {
    background: #28c840!important;
}

.knowledge-base-page .knowledge-terminal-title {
    margin-left: 6px!important;
    color: var(--kb-secondary-text)!important;
    font-family: var(--kb-mono-font)!important;
    font-size: 11.5px!important;
}

.knowledge-base-page .knowledge-terminal-body {
    min-height: 118px!important;
    padding: 18px 20px 22px!important;
    font-family: var(--kb-mono-font)!important;
    font-size: 13px!important;
}

.knowledge-base-page .knowledge-terminal-command {
    display: flex!important;
    gap: 8px!important;
    color: var(--kb-primary-text)!important;
}

.knowledge-base-page .knowledge-terminal-prompt {
    color: var(--kb-success)!important;
}

.knowledge-base-page .knowledge-terminal-cursor {
    display: inline-block!important;
    color: var(--kb-light-blue)!important;
    animation: knowledge-cursor-blink 1s step-end infinite!important;
}

.knowledge-base-page .knowledge-terminal-output {
    min-height: 64px!important;
    margin-top: 10px!important;
    color: var(--kb-secondary-text)!important;
    white-space: pre-wrap!important;
}

.knowledge-base-page .knowledge-terminal-output .ok {
    color: var(--kb-success)!important;
}

@keyframes knowledge-cursor-blink {
    50% {
        opacity: 0;
    }
}

/* =========================================================
   Stats
   ========================================================= */

.knowledge-base-page .knowledge-stats {
    display: grid!important;
    grid-template-columns: repeat(4, minmax(0, 1fr))!important;
    overflow: hidden!important;
    width: min(100%, 920px)!important;
    margin: 48px auto 0!important;
    padding: 0!important;
    border: 1px solid var(--kb-subtle-border)!important;
    border-radius: 12px!important;
    background: var(--kb-dark-surface)!important;
}

.knowledge-base-page .knowledge-stat {
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 0!important;
    width: 100%!important;
    min-width: 0!important;
    margin: 0!important;
    padding: 22px 14px!important;
    border-right: 1px solid var(--kb-subtle-border)!important;
    text-align: center!important;
}

.knowledge-base-page .knowledge-stat:last-child {
    border-right: 0!important;
}

.knowledge-base-page .knowledge-stat-value,
.knowledge-base-page .knowledge-stat-value .elementor-heading-title {
    display: block!important;
    margin: 0!important;
    color: var(--kb-primary-text)!important;
    font-family: var(--kb-display-font)!important;
    font-size: clamp(20px, 2.6vw, 26px)!important;
    font-weight: 600!important;
    line-height: 1.2!important;
}

.knowledge-base-page .knowledge-stat-label {
    margin-top: 4px!important;
    color: var(--kb-secondary-text)!important;
    font-size: 12px!important;
}

.knowledge-base-page .knowledge-stat-label p {
    margin: 0!important;
    color: inherit!important;
    font: inherit!important;
}

/* =========================================================
   Shared section heading
   ========================================================= */

.knowledge-base-page .knowledge-categories-section,
.knowledge-base-page .knowledge-popular-section {
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
    justify-content: flex-start!important;
    gap: 0!important;
    width: 100%!important;
    margin: 0!important;
    padding-block: 56px!important;
    padding-inline: 0!important;
}

.knowledge-base-page .knowledge-section-header {
    display: flex!important;
    flex-direction: column!important;
    align-items: flex-start!important;
    justify-content: flex-start!important;
    gap: 0!important;
    width: 100%!important;
    padding: 0!important;
    margin-bottom: 32px!important;
}

.knowledge-base-page .knowledge-section-title,
.knowledge-base-page .knowledge-section-title .elementor-heading-title {
    display: block!important;
    width: 100%!important;
    margin: 0 0 8px!important;
    color: var(--kb-primary-text)!important;
    font-family: var(--kb-display-font)!important;
    font-size: clamp(22px, 2.8vw, 28px)!important;
    font-weight: 600!important;
    line-height: 1.25!important;
    letter-spacing: -0.01em!important;
}

.knowledge-base-page .knowledge-section-description,
.knowledge-base-page .knowledge-section-description p {
    color: var(--kb-secondary-text)!important;
    font-size: 14.5px!important;
}

.knowledge-base-page .knowledge-section-description p {
    margin: 0!important;
}

/* =========================================================
   Category grid and cards
   ========================================================= */

.knowledge-base-page .knowledge-category-grid {
    display: grid!important;
    grid-template-columns: repeat(4, minmax(0, 1fr))!important;
    gap: 16px!important;
    width: 100%!important;
    margin: 0!important;
    padding: 0!important;
}

.knowledge-base-page .knowledge-category-card {
    position: relative!important;
    isolation: isolate!important;
    display: flex!important;
    flex-direction: column!important;
    align-items: flex-start!important;
    justify-content: flex-start!important;
    gap: 0!important;
    overflow: hidden!important;
    width: 100%!important;
    height: 100%!important;
    min-height: 258px!important;
    padding: 26px 24px!important;
    border: 1px solid var(--kb-subtle-border)!important;
    border-radius: 12px!important;
    color: var(--kb-primary-text)!important;
    text-decoration: none!important;
    transform: perspective(800px)!important;
    will-change: transform!important;
}

.knowledge-base-page .knowledge-category-card::before {
    content: ""!important;
    position: absolute!important;
    z-index: -1!important;
    inset: 0!important;
    opacity: 0!important;
    background: radial-gradient(
        220px 140px at var(--mx, 50%) var(--my, 0%),
        rgba(95, 109, 255, 0.16),
        transparent 70%
    )!important;
    transition: opacity 0.3s var(--kb-ease)!important;
}

.knowledge-base-page .knowledge-category-card:hover {
    border-color: var(--kb-light-blue)!important;
    box-shadow: 0 18px 34px -18px rgba(59, 68, 255, 0.55)!important;
}

.knowledge-base-page .knowledge-category-card:hover::before {
    opacity: 1!important;
}

.knowledge-base-page .knowledge-category-icon {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    width: 38px!important;
    height: 38px!important;
    margin-bottom: 16px!important;
    border: 1px solid rgba(95, 109, 255, 0.35)!important;
    border-radius: 8px!important;
    background: rgba(59, 68, 255, 0.14)!important;
    color: var(--kb-light-blue)!important;
    transition:
        color 0.25s var(--kb-ease),
        background-color 0.25s var(--kb-ease),
        transform 0.25s var(--kb-ease)!important;
}

.knowledge-base-page .knowledge-category-icon .elementor-icon-wrapper,
.knowledge-base-page .knowledge-category-icon .elementor-icon {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    width: 100%!important;
    height: 100%!important;
    color: inherit!important;
    font-size: 18px!important;
}

.knowledge-base-page .knowledge-category-icon svg {
    width: 18px!important;
    height: 18px!important;
    fill: none!important;
    stroke: currentColor!important;
}

.knowledge-base-page .knowledge-category-card:hover .knowledge-category-icon {
    background: var(--kb-primary-blue)!important;
    color: var(--kb-primary-text)!important;
    transform: scale(1.08) rotate(-4deg)!important;
}

.knowledge-base-page .knowledge-category-title,
.knowledge-base-page .knowledge-category-title .elementor-heading-title {
    display: block!important;
    width: 100%!important;
    margin: 0 0 8px!important;
    color: var(--kb-primary-text)!important;
    font-family: var(--kb-display-font)!important;
    font-size: 16px!important;
    font-weight: 600!important;
    line-height: 1.35!important;
}

.knowledge-base-page .knowledge-category-description,
.knowledge-base-page .knowledge-category-description p {
    color: var(--kb-secondary-text)!important;
    font-size: 13px!important;
    line-height: 1.55!important;
}

.knowledge-base-page .knowledge-category-description p {
    margin: 0!important;
}

.knowledge-base-page .knowledge-card-spacer,
.knowledge-base-page .knowledge-category-card > .elementor-widget-spacer {
    flex: 1 1 auto!important;
    width: 100%!important;
    min-height: 16px!important;
}

.knowledge-base-page .knowledge-category-footer,
.knowledge-base-page .knowledge-category-card > footer {
    display: flex!important;
    flex-direction: row!important;
    align-items: center!important;
    justify-content: space-between!important;
    gap: 12px!important;
    width: 100%!important;
    margin: 0!important;
    padding-top: 12px!important;
    padding-inline: 0!important;
    padding-bottom: 0!important;
    border-top: 1px solid var(--kb-subtle-border)!important;
}

.knowledge-base-page .knowledge-category-count,
.knowledge-base-page .knowledge-category-count p {
    margin: 0!important;
    color: var(--kb-secondary-text)!important;
    font-family: var(--kb-mono-font)!important;
    font-size: 12px!important;
}

.knowledge-base-page .knowledge-category-count strong {
    color: var(--kb-primary-text)!important;
    font-weight: 500!important;
}

.knowledge-base-page .knowledge-category-arrow {
    opacity: 0!important;
    color: var(--kb-light-blue)!important;
    transform: translateX(-4px)!important;
    transition:
        opacity 0.25s var(--kb-ease),
        transform 0.25s var(--kb-ease)!important;
}

.knowledge-base-page .knowledge-category-arrow .elementor-icon {
    display: block!important;
    color: inherit!important;
    font-size: 14px!important;
}

.knowledge-base-page .knowledge-category-arrow svg {
    width: 14px!important;
    height: 14px!important;
    fill: currentColor!important;
}

.knowledge-base-page .knowledge-category-card:hover .knowledge-category-arrow {
    opacity: 1!important;
    transform: translateX(0)!important;
}

/* =========================================================
   Divider
   ========================================================= */

.knowledge-base-page .knowledge-divider-wrap {
    width: calc(100% - 64px)!important;
    max-width: var(--kb-content-width)!important;
    margin-inline: auto!important;
    padding: 0!important;
}

.knowledge-base-page .knowledge-divider,
.knowledge-base-page .knowledge-divider .elementor-divider {
    width: 100%!important;
}

.knowledge-base-page .knowledge-divider .elementor-divider-separator {
    width: 100%!important;
    border-top-color: var(--kb-subtle-border)!important;
}

/* =========================================================
   Popular articles
   ========================================================= */

.knowledge-base-page .knowledge-article-grid {
    display: grid!important;
    grid-template-columns: repeat(3, minmax(0, 1fr))!important;
    gap: 20px!important;
    width: 100%!important;
    margin: 0!important;
    padding: 0!important;
}

.knowledge-base-page .knowledge-article-card {
    position: relative!important;
    display: flex!important;
    flex-direction: column!important;
    align-items: flex-start!important;
    justify-content: flex-start!important;
    gap: 0!important;
    overflow: hidden!important;
    width: 100%!important;
    height: 100%!important;
    min-height: 258px!important;
    padding: 24px 22px!important;
    border: 1px solid var(--kb-subtle-border)!important;
    border-radius: 12px!important;
    background: var(--kb-dark-surface)!important;
    color: var(--kb-primary-text)!important;
    text-decoration: none!important;
}

.knowledge-base-page .knowledge-article-card::after {
    content: ""!important;
    position: absolute!important;
    top: 0!important;
    left: -60%!important;
    width: 40%!important;
    height: 100%!important;
    pointer-events: none!important;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.05), transparent)!important;
    transform: skewX(-18deg)!important;
    transition: left 0.6s var(--kb-ease)!important;
}

.knowledge-base-page .knowledge-article-card:hover {
    border-color: var(--kb-light-blue)!important;
    box-shadow: 0 14px 30px -16px rgba(59, 68, 255, 0.55)!important;
    transform: translateY(-4px)!important;
}

.knowledge-base-page .knowledge-article-card:hover::after {
    left: 130%!important;
}

.knowledge-base-page .knowledge-article-tag {
    display: inline-flex!important;
    align-self: flex-start!important;
    width: auto!important;
    margin-bottom: 14px!important;
    padding: 4px 10px!important;
    border: 1px solid rgba(95, 109, 255, 0.35)!important;
    border-radius: 100px!important;
    background: rgba(59, 68, 255, 0.1)!important;
    color: var(--kb-light-blue)!important;
    font-family: var(--kb-mono-font)!important;
    font-size: 11px!important;
    line-height: 1.4!important;
}

.knowledge-base-page .knowledge-article-tag p {
    margin: 0!important;
    color: inherit!important;
    font: inherit!important;
}

.knowledge-base-page .knowledge-article-title,
.knowledge-base-page .knowledge-article-title .elementor-heading-title {
    display: block!important;
    width: 100%!important;
    margin: 0 0 8px!important;
    color: var(--kb-primary-text)!important;
    font-family: var(--kb-display-font)!important;
    font-size: 16px!important;
    font-weight: 600!important;
    line-height: 1.3!important;
}

.knowledge-base-page .knowledge-article-description,
.knowledge-base-page .knowledge-article-description p {
    color: var(--kb-secondary-text)!important;
    font-size: 13.5px!important;
    line-height: 1.55!important;
}

.knowledge-base-page .knowledge-article-description p {
    margin: 0!important;
}

.knowledge-base-page .knowledge-article-meta {
    display: flex!important;
    flex-direction: row!important;
    align-items: center!important;
    gap: 8px!important;
    width: 100%!important;
    margin: 0!important;
    padding-inline: 0!important;
    padding-bottom: 0!important;
    padding-top: 14px!important;
    border-top: 1px solid var(--kb-subtle-border)!important;
    color: var(--kb-secondary-text)!important;
    font-family: var(--kb-mono-font)!important;
    font-size: 11.5px!important;
}

.knowledge-base-page .knowledge-article-meta-icon {
    width: 13px!important;
    min-width: 13px!important;
    color: var(--kb-secondary-text)!important;
}

.knowledge-base-page .knowledge-article-meta-icon .elementor-icon {
    display: block!important;
    color: inherit!important;
    font-size: 13px!important;
}

.knowledge-base-page .knowledge-article-meta-icon svg {
    width: 13px!important;
    height: 13px!important;
    fill: none!important;
    stroke: currentColor!important;
}

.knowledge-base-page .knowledge-article-meta-text,
.knowledge-base-page .knowledge-article-meta-text p {
    margin: 0!important;
    color: inherit!important;
    font: inherit!important;
}

.knowledge-base-page .knowledge-no-results {
    display: none!important;
    width: 100%!important;
    padding: 28px 0 8px!important;
    color: var(--kb-secondary-text)!important;
    font-size: 14.5px!important;
    text-align: center!important;
}

.knowledge-base-page .knowledge-no-results.is-visible {
    display: block!important;
}

.knowledge-base-page .knowledge-filter-item.is-filtered-out {
    display: none !important;
}

.knowledge-base-page .knowledge-no-results p {
    margin: 0!important;
    color: inherit!important;
    font: inherit!important;
}

/* =========================================================
   Support CTA
   ========================================================= */

.knowledge-base-page .knowledge-support-section {
    width: 100%!important;
    padding-block: 20px 72px!important;
}

.knowledge-base-page .knowledge-support-band {
    position: relative!important;
    isolation: isolate!important;
    overflow: hidden!important;
    width: 100%!important;
    padding: 52px 44px!important;
    border: 2px solid transparent!important;
    border-radius: 20px!important;
    background:
        radial-gradient(900px 260px at 15% -10%, rgba(59, 68, 255, 0.35), transparent 60%) padding-box,
        var(--kb-dark-surface) padding-box,
        linear-gradient(120deg, rgba(95, 109, 255, 0.7), rgba(60, 224, 160, 0.35), rgba(95, 109, 255, 0.7)) border-box!important;
    box-shadow: 0 28px 70px -42px rgba(59, 68, 255, 0.8)!important;
}

.knowledge-base-page .knowledge-support-band::before,
.knowledge-base-page .knowledge-support-band::after {
    content: ""!important;
    position: absolute!important;
    z-index: -1!important;
    border-radius: 50%!important;
    filter: blur(50px)!important;
    pointer-events: none!important;
}

.knowledge-base-page .knowledge-support-band::before {
    top: -60px!important;
    right: 6%!important;
    width: 220px!important;
    height: 220px!important;
    background: radial-gradient(circle, rgba(60, 224, 160, 0.3), transparent 70%)!important;
    animation: knowledge-orb-primary-drift 18s ease-in-out infinite!important;
}

.knowledge-base-page .knowledge-support-band::after {
    bottom: -70px!important;
    left: 10%!important;
    width: 180px!important;
    height: 180px!important;
    background: radial-gradient(circle, rgba(95, 109, 255, 0.32), transparent 70%)!important;
    animation: knowledge-orb-secondary-drift 20s ease-in-out infinite!important;
}

.knowledge-base-page .knowledge-support-main {
    position: relative!important;
    z-index: 1!important;
    display: flex!important;
    flex-direction: row!important;
    align-items: flex-start!important;
    justify-content: space-between!important;
    gap: 28px!important;
    width: 100%!important;
}

.knowledge-base-page .knowledge-support-copy {
    flex: 1 1 560px!important;
    max-width: 620px!important;
}

.knowledge-base-page .knowledge-support-title,
.knowledge-base-page .knowledge-support-title .elementor-heading-title {
    display: block!important;
    width: 100%!important;
    margin: 0 0 10px!important;
    color: var(--kb-primary-text)!important;
    font-family: var(--kb-display-font)!important;
    font-size: clamp(24px, 3.2vw, 32px)!important;
    font-weight: 600!important;
    line-height: 1.25!important;
    letter-spacing: -0.01em!important;
}

.knowledge-base-page .knowledge-support-description,
.knowledge-base-page .knowledge-support-description p {
    color: var(--kb-secondary-text)!important;
    font-size: 15px!important;
    line-height: 1.6!important;
}

.knowledge-base-page .knowledge-support-description p {
    margin: 0!important;
}

.knowledge-base-page .knowledge-support-actions {
    display: flex!important;
    flex: 0 0 auto!important;
    flex-direction: row!important;
    align-items: center!important;
    justify-content: flex-end!important;
    gap: 12px!important;
}

.knowledge-base-page .knowledge-support-actions .elementor-widget-button {
    width: auto!important;
}

.knowledge-base-page .knowledge-support-actions .elementor-button {
    position: relative!important;
    overflow: hidden!important;
    min-height: 46px!important;
    padding: 13px 22px!important;
    border: 1px solid transparent!important;
    border-radius: 8px!important;
    font-family: var(--kb-body-font)!important;
    font-size: 14.5px!important;
    font-weight: 500!important;
    line-height: 1.3!important;
    text-decoration: none!important;
}

.knowledge-base-page .knowledge-support-actions .elementor-button::before {
    content: ""!important;
    position: absolute!important;
    inset: 0!important;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.25), transparent)!important;
    transform: translateX(-120%)!important;
    transition: transform 0.5s var(--kb-ease)!important;
}

.knowledge-base-page .knowledge-support-actions .elementor-button:hover::before {
    transform: translateX(120%)!important;
}

.knowledge-base-page .knowledge-support-primary .elementor-button {
    background: var(--kb-primary-blue)!important;
    color: var(--kb-primary-text)!important;
}

.knowledge-base-page .knowledge-support-primary .elementor-button:hover {
    background: var(--kb-light-blue)!important;
    box-shadow: 0 10px 24px -12px rgba(59, 68, 255, 0.7)!important;
    transform: translateY(-2px)!important;
}

.knowledge-base-page .knowledge-support-secondary .elementor-button {
    border-color: var(--kb-subtle-border)!important;
    background: transparent!important;
    color: var(--kb-primary-text)!important;
}

.knowledge-base-page .knowledge-support-secondary .elementor-button:hover {
    border-color: var(--kb-light-blue)!important;
    background: transparent!important;
    color: var(--kb-primary-text)!important;
    transform: translateY(-2px)!important;
}

.knowledge-base-page .knowledge-support-trust {
    position: relative!important;
    z-index: 1!important;
    display: flex!important;
    flex-direction: row!important;
    align-items: center!important;
    flex-wrap: wrap!important;
    gap: 18px 28px!important;
    width: 100%!important;
    margin-top: 36px!important;
    padding-top: 24px!important;
    border-top: 1px solid var(--kb-subtle-border)!important;
}

.knowledge-base-page .knowledge-trust-item {
    display: flex!important;
    flex-direction: row!important;
    align-items: center!important;
    gap: 10px!important;
    width: auto!important;
    color: var(--kb-secondary-text)!important;
    font-size: 13px!important;
}

.knowledge-base-page .knowledge-trust-icon {
    width: 16px!important;
    min-width: 16px!important;
    color: var(--kb-success)!important;
}

.knowledge-base-page .knowledge-trust-icon .elementor-icon {
    display: block!important;
    color: inherit!important;
    font-size: 16px!important;
}

.knowledge-base-page .knowledge-trust-icon svg {
    width: 16px!important;
    height: 16px!important;
    fill: currentColor!important;
}

.knowledge-base-page .knowledge-trust-text,
.knowledge-base-page .knowledge-trust-text p {
    margin: 0!important;
    color: inherit!important;
    font: inherit!important;
}

.knowledge-base-page .knowledge-trust-text strong {
    color: var(--kb-primary-text)!important;
    font-weight: 600!important;
}

/* =========================================================
   Back to top
   ========================================================= */

.knowledge-base-page .knowledge-back-to-top {
    position: fixed!important;
    right: 22px!important;
    bottom: 22px!important;
    z-index: 30!important;
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    width: 44px!important;
    height: 44px!important;
    border: 1px solid var(--kb-subtle-border)!important;
    border-radius: 50%!important;
    background: var(--kb-dark-surface)!important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24)!important;
    color: var(--kb-primary-text)!important;
    cursor: pointer!important;
}

.knowledge-base-page.knowledge-js-ready .knowledge-back-to-top {
    opacity: 0!important;
    pointer-events: none!important;
    transform: translateY(12px)!important;
}

.knowledge-base-page.knowledge-js-ready .knowledge-back-to-top.is-visible {
    opacity: 1!important;
    pointer-events: auto!important;
    transform: translateY(0)!important;
}

.knowledge-base-page .knowledge-back-to-top:hover {
    border-color: var(--kb-light-blue)!important;
    transform: translateY(-3px)!important;
}

.knowledge-base-page .knowledge-back-to-top .elementor-icon-wrapper,
.knowledge-base-page .knowledge-back-to-top .elementor-icon {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    width: 100%!important;
    height: 100%!important;
    color: inherit!important;
    font-size: 18px!important;
}

.knowledge-base-page .knowledge-back-to-top svg {
    width: 18px!important;
    height: 18px!important;
    fill: currentColor!important;
}

/* Scroll reveal is enabled only after JavaScript initializes. */

.knowledge-base-page.knowledge-js-ready .knowledge-reveal {
    opacity: 0!important;
    transform: translateY(22px)!important;
    transition:
        opacity 0.65s var(--kb-ease) var(--knowledge-reveal-delay, 0ms),
        transform 0.65s var(--kb-ease) var(--knowledge-reveal-delay, 0ms)!important;
}

.knowledge-base-page.knowledge-js-ready .knowledge-reveal.is-visible {
    opacity: 1!important;
    transform: translateY(0)!important;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1024px) {
    .knowledge-base-page .knowledge-section-content,
    .knowledge-base-page .knowledge-hero-content,
    .knowledge-base-page .knowledge-divider-wrap {
        width: calc(100% - 48px)!important;
    }

    .knowledge-base-page .knowledge-hero {
        padding-block: 76px 36px!important;
    }

    .knowledge-base-page .knowledge-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))!important;
    }

    .knowledge-base-page .knowledge-article-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))!important;
    }

    .knowledge-base-page .knowledge-support-main {
        flex-direction: column!important;
        align-items: stretch!important;
    }

    .knowledge-base-page .knowledge-support-copy {
        flex-basis: auto!important;
        max-width: 680px!important;
    }

    .knowledge-base-page .knowledge-support-actions {
        justify-content: flex-start!important;
    }
}

@media (max-width: 767px) {
    .knowledge-base-page .knowledge-section-content,
    .knowledge-base-page .knowledge-hero-content,
    .knowledge-base-page .knowledge-divider-wrap {
        width: calc(100% - 32px)!important;
        padding-inline: 0!important;
    }

    .knowledge-base-page .knowledge-hero {
        padding-block: 64px 32px!important;
    }

    .knowledge-base-page .knowledge-hero-description,
    .knowledge-base-page .knowledge-hero-description p {
        font-size: 15.5px!important;
    }

    .knowledge-base-page .knowledge-terminal-widget {
        margin-top: 32px!important;
    }

    .knowledge-base-page .knowledge-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))!important;
    }

    .knowledge-base-page .knowledge-stat {
        border-bottom: 1px solid var(--kb-subtle-border)!important;
    }

    .knowledge-base-page .knowledge-stat:nth-child(2n) {
        border-right: 0!important;
    }

    .knowledge-base-page .knowledge-stat:nth-last-child(-n + 2) {
        border-bottom: 0!important;
    }

    .knowledge-base-page .knowledge-categories-section,
    .knowledge-base-page .knowledge-popular-section {
        padding-block: 48px!important;
    }

    .knowledge-base-page .knowledge-category-grid,
    .knowledge-base-page .knowledge-article-grid {
        grid-template-columns: 1fr!important;
    }

    .knowledge-base-page .knowledge-category-card,
    .knowledge-base-page .knowledge-article-card {
        min-height: 0!important;
    }

    .knowledge-base-page .knowledge-support-section {
        padding-block: 12px 56px!important;
    }

    .knowledge-base-page .knowledge-support-band {
        padding: 36px 26px!important;
    }

    .knowledge-base-page .knowledge-support-actions {
        flex-direction: column!important;
        align-items: stretch!important;
        width: 100%!important;
    }

    .knowledge-base-page .knowledge-support-actions .elementor-widget-button,
    .knowledge-base-page .knowledge-support-actions .elementor-button {
        width: 100%!important;
    }

    .knowledge-base-page .knowledge-support-trust {
        flex-direction: column!important;
        align-items: flex-start!important;
    }

    .knowledge-base-page .knowledge-back-to-top {
        right: 14px!important;
        bottom: 14px!important;
        width: 40px!important;
        height: 40px!important;
    }
}

@media (max-width: 420px) {
    .knowledge-base-page .knowledge-stats {
        grid-template-columns: 1fr!important;
    }

    .knowledge-base-page .knowledge-stat,
    .knowledge-base-page .knowledge-stat:nth-child(2n),
    .knowledge-base-page .knowledge-stat:nth-last-child(-n + 2) {
        border-right: 0!important;
        border-bottom: 1px solid var(--kb-subtle-border)!important;
    }

    .knowledge-base-page .knowledge-stat:last-child {
        border-bottom: 0!important;
    }

    .knowledge-base-page .knowledge-support-band {
        padding: 30px 20px!important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .knowledge-base-page *,
    .knowledge-base-page *::before,
    .knowledge-base-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   ICON COLOR AUTHORITY
   All Knowledge Base icon widgets use Primary Blue.
   Elementor icon color controls are intentionally ignored.
   ========================================================= */

.knowledge-base-page .elementor-widget-icon .elementor-icon,
.knowledge-base-page .elementor-widget-icon .elementor-icon-wrapper,
.knowledge-base-page .knowledge-category-icon,
.knowledge-base-page .knowledge-category-arrow,
.knowledge-base-page .knowledge-article-meta-icon,
.knowledge-base-page .knowledge-trust-icon,
.knowledge-base-page .knowledge-back-to-top {
    color: var(--kb-primary-blue)!important;
}

/* Hero status dot is also treated as an icon/accent. */
.knowledge-base-page .knowledge-eyebrow-icon .elementor-icon {
    background: var(--kb-primary-blue)!important;
    color: var(--kb-primary-blue)!important;
}

.knowledge-base-page .knowledge-eyebrow-icon .elementor-icon::after {
    border-color: var(--kb-primary-blue)!important;
}

/* Search icon */
.knowledge-base-page .knowledge-search-icon,
.knowledge-base-page .knowledge-search:focus-within .knowledge-search-icon {
    stroke: var(--kb-primary-blue)!important;
    color: var(--kb-primary-blue)!important;
}

/* Category icon keeps the design's blue container, but icon stays Primary Blue. */
.knowledge-base-page .knowledge-category-icon {
    color: var(--kb-primary-blue)!important;
    border-color: rgba(59, 68, 255, 0.38)!important;
    background: rgba(59, 68, 255, 0.14)!important;
}

.knowledge-base-page .knowledge-category-card:hover .knowledge-category-icon {
    color: var(--kb-primary-blue)!important;
    background: rgba(59, 68, 255, 0.24)!important;
    border-color: rgba(59, 68, 255, 0.60)!important;
}

/* Normalize Elementor SVG/icon internals without changing outline/fill semantics. */
.knowledge-base-page .knowledge-category-icon .elementor-icon,
.knowledge-base-page .knowledge-category-arrow .elementor-icon,
.knowledge-base-page .knowledge-article-meta-icon .elementor-icon,
.knowledge-base-page .knowledge-trust-icon .elementor-icon,
.knowledge-base-page .knowledge-back-to-top .elementor-icon {
    color: var(--kb-primary-blue)!important;
}

.knowledge-base-page .knowledge-category-icon svg,
.knowledge-base-page .knowledge-article-meta-icon svg {
    stroke: currentColor!important;
}

.knowledge-base-page .knowledge-category-arrow svg,
.knowledge-base-page .knowledge-trust-icon svg,
.knowledge-base-page .knowledge-back-to-top svg {
    color: var(--kb-primary-blue)!important;
}

/* Do not let Elementor widget-level icon color override our file. */
.knowledge-base-page .elementor-widget-icon svg,
.knowledge-base-page .elementor-widget-icon i {
    color: var(--kb-primary-blue)!important;
}

/* =========================================================
   ELEMENTOR LAYOUT AUTHORITY
   The page must be laid out exclusively from this stylesheet.
   ========================================================= */

.knowledge-base-page {
    width: 100%!important;
    max-width: 100%!important;
    min-width: 0!important;
    margin: 0!important;
    padding: 0!important;
    display: flex!important;
    flex-direction: column!important;
    align-items: stretch!important;
    justify-content: flex-start!important;
    gap: 0!important;
}

.knowledge-base-page .knowledge-section-content,
.knowledge-base-page .knowledge-hero-content,
.knowledge-base-page .knowledge-divider-wrap {
    min-width: 0!important;
    margin-left: auto!important;
    margin-right: auto!important;
}

/* Elementor Button wrappers must not inject theme spacing/backgrounds. */
.knowledge-base-page .knowledge-support-actions .elementor-widget-button,
.knowledge-base-page .knowledge-support-actions .elementor-button-wrapper {
    margin: 0!important;
    padding: 0!important;
    background: transparent!important;
    border: 0!important;
    box-shadow: none!important;
}

/* Text/heading widgets inherit all design from this file. */
.knowledge-base-page .elementor-widget-heading,
.knowledge-base-page .elementor-widget-text-editor,
.knowledge-base-page .elementor-widget-icon,
.knowledge-base-page .elementor-widget-button {
    min-width: 0!important;
}


/* =========================================================
   CATEGORY ICON FIX — Elementor / Font Awesome compatible
   Keeps icon color Primary Blue without destroying SVG shape.
   ========================================================= */

/* Icon box */
.knowledge-base-page .knowledge-category-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    padding: 0 !important;
    margin: 0 0 16px !important;

    color: var(--kb-primary-blue) !important;
    background: rgba(59, 68, 255, 0.14) !important;
    border: 1px solid rgba(59, 68, 255, 0.42) !important;
    border-radius: 8px !important;
}

/* Elementor wrappers */
.knowledge-base-page .knowledge-category-icon .elementor-widget-container,
.knowledge-base-page .knowledge-category-icon .elementor-icon-wrapper,
.knowledge-base-page .knowledge-category-icon .elementor-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--kb-primary-blue) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-size: 18px !important;
    line-height: 1 !important;
}

/*
 * Elementor's Font Awesome SVGs are FILL-based.
 * The previous rule `fill:none` made them nearly invisible.
 */
.knowledge-base-page .knowledge-category-icon svg.e-font-icon-svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;

    color: var(--kb-primary-blue) !important;
    fill: currentColor !important;
    stroke: none !important;
}

/* Fallback for standard Elementor SVG icons */
.knowledge-base-page .knowledge-category-icon .elementor-icon > svg:not(.e-font-icon-svg) {
    display: block !important;
    width: 18px !important;
    height: 18px !important;

    color: var(--kb-primary-blue) !important;
    fill: currentColor !important;
}

/* Font icon fallback */
.knowledge-base-page .knowledge-category-icon i {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--kb-primary-blue) !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Keep the icon blue on card hover as requested */
.knowledge-base-page .knowledge-category-card:hover .knowledge-category-icon,
.knowledge-base-page .knowledge-category-card:focus-within .knowledge-category-icon {
    color: var(--kb-primary-blue) !important;
    background: rgba(59, 68, 255, 0.24) !important;
    border-color: rgba(59, 68, 255, 0.68) !important;
}

/* Prevent old outline-only rule from hiding filled Elementor icons */
.knowledge-base-page .knowledge-category-icon svg.e-font-icon-svg path,
.knowledge-base-page .knowledge-category-icon svg.e-font-icon-svg g {
    fill: currentColor !important;
    stroke: none !important;
}


/* =========================================================
   V3 FIX — POPULAR ARTICLE META ICONS
   Elementor / Font Awesome icons in the article footer are
   fill-based. Keep them visible and Primary Blue.
   ========================================================= */

.knowledge-base-page .knowledge-article-meta-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 14px !important;
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;

    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--kb-primary-blue) !important;
}

.knowledge-base-page .knowledge-article-meta-icon .elementor-widget-container,
.knowledge-base-page .knowledge-article-meta-icon .elementor-icon-wrapper,
.knowledge-base-page .knowledge-article-meta-icon .elementor-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 14px !important;
    height: 14px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--kb-primary-blue) !important;
    background: transparent !important;
    border: 0 !important;

    font-size: 13px !important;
    line-height: 1 !important;
}

/* Font Awesome / Elementor generated SVG */
.knowledge-base-page .knowledge-article-meta-icon svg.e-font-icon-svg {
    display: block !important;

    width: 13px !important;
    height: 13px !important;

    color: var(--kb-primary-blue) !important;
    fill: currentColor !important;
    stroke: none !important;
}

/* Other Elementor SVG icon variants */
.knowledge-base-page .knowledge-article-meta-icon .elementor-icon > svg:not(.e-font-icon-svg) {
    display: block !important;

    width: 13px !important;
    height: 13px !important;

    color: var(--kb-primary-blue) !important;
    fill: currentColor !important;
}

/* Font icon fallback */
.knowledge-base-page .knowledge-article-meta-icon i {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    color: var(--kb-primary-blue) !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

/* Prevent the older outline rule from hiding filled icon paths */
.knowledge-base-page .knowledge-article-meta-icon svg.e-font-icon-svg path,
.knowledge-base-page .knowledge-article-meta-icon svg.e-font-icon-svg g {
    fill: currentColor !important;
    stroke: none !important;
}


/* =========================================================
   V3 FIX — H2 TO DESCRIPTION SPACING
   All page-level H2 headings get breathing room below them.
   ========================================================= */

/* Browse by category / Popular articles */
.knowledge-base-page .knowledge-section-title,
.knowledge-base-page .knowledge-section-title .elementor-heading-title {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 15px !important;
    margin-left: 0 !important;
}

/* CTA/support H2 */
.knowledge-base-page .knowledge-support-title,
.knowledge-base-page .knowledge-support-title .elementor-heading-title {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 15px !important;
    margin-left: 0 !important;
}

/* Keep the description clean; spacing comes from the H2 */
.knowledge-base-page .knowledge-section-description,
.knowledge-base-page .knowledge-section-description p,
.knowledge-base-page .knowledge-support-description,
.knowledge-base-page .knowledge-support-description p {
    margin-top: 0 !important;
}

/* Slightly more comfortable heading/description rhythm on mobile too */
@media (max-width: 767px) {
    .knowledge-base-page .knowledge-section-title,
    .knowledge-base-page .knowledge-section-title .elementor-heading-title,
    .knowledge-base-page .knowledge-support-title,
    .knowledge-base-page .knowledge-support-title .elementor-heading-title {
        margin-bottom: 13px !important;
    }
}


/* =========================================================
   V4 FIX — SECTION DESCRIPTION TO CARD GRID SPACING
   Adds clear breathing room between the intro paragraph and
   the cards in both Browse by category and Popular articles.
   ========================================================= */

/*
 * Keep the H2 -> paragraph spacing controlled separately.
 * The header itself does not create the card spacing anymore;
 * the grids own that spacing so Elementor wrappers cannot collapse it.
 */
.knowledge-base-page .knowledge-section-header {
    margin-bottom: 0 !important;
}

/* H2 -> description */
.knowledge-base-page .knowledge-section-title,
.knowledge-base-page .knowledge-section-title .elementor-heading-title {
    margin: 0 0 14px !important;
}

/* Description */
.knowledge-base-page .knowledge-section-description,
.knowledge-base-page .knowledge-section-description .elementor-widget-container,
.knowledge-base-page .knowledge-section-description p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Description -> cards */
.knowledge-base-page .knowledge-category-grid,
.knowledge-base-page .knowledge-article-grid {
    margin-top: 24px !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .knowledge-base-page .knowledge-category-grid,
    .knowledge-base-page .knowledge-article-grid {
        margin-top: 22px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .knowledge-base-page .knowledge-section-title,
    .knowledge-base-page .knowledge-section-title .elementor-heading-title {
        margin-bottom: 12px !important;
    }

    .knowledge-base-page .knowledge-category-grid,
    .knowledge-base-page .knowledge-article-grid {
        margin-top: 20px !important;
    }
}


/* =========================================================
   V5 FIX — CATEGORY SEARCH SPACING + POPULAR SECTION TOP
   ========================================================= */

/*
 * Search box was moved into the Browse by category section.
 * Give it a clear gap from the descriptive paragraph above it.
 */
.knowledge-base-page .knowledge-categories-section .knowledge-search-widget {
    width: min(100%, 560px) !important;
    margin-top: 28px !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
}

/*
 * Keep the category cards separated from the search box.
 * The grid already owns the vertical spacing below the search.
 */
.knowledge-base-page .knowledge-categories-section .knowledge-category-grid {
    margin-top: 24px !important;
}

/*
 * Remove the empty top padding before Popular articles while
 * preserving the bottom section spacing.
 */
.knowledge-base-page .knowledge-popular-section {
    padding-top: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 56px !important;
    padding-left: 0 !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .knowledge-base-page .knowledge-categories-section .knowledge-search-widget {
        margin-top: 26px !important;
    }

    .knowledge-base-page .knowledge-categories-section .knowledge-category-grid {
        margin-top: 22px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .knowledge-base-page .knowledge-categories-section .knowledge-search-widget {
        width: 100% !important;
        margin-top: 22px !important;
    }

    .knowledge-base-page .knowledge-categories-section .knowledge-category-grid {
        margin-top: 20px !important;
    }

    .knowledge-base-page .knowledge-popular-section {
        padding-top: 0 !important;
        padding-bottom: 48px !important;
    }
}


/* =========================================================
   V6 FIX — CATEGORY CARDS WITHOUT ELEMENTOR SPACER
   The description creates its own bottom breathing room and
   the footer is pinned to the bottom of every equal-height card.
   ========================================================= */

/* Make every implicit grid row the same height. */
.knowledge-base-page .knowledge-category-grid {
    align-items: stretch !important;
    grid-auto-rows: 1fr !important;
}

/* Card is the full-height flex column. */
.knowledge-base-page .knowledge-category-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 258px !important;
}

/*
 * Elementor may output an .e-con-inner wrapper depending on the
 * container type. Make that wrapper a full-height flex column too,
 * so the same CSS works with either Elementor DOM structure.
 */
.knowledge-base-page .knowledge-category-card > .e-con-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* Description owns the spacing before the footer. */
.knowledge-base-page .knowledge-category-description {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 0 24px !important;

    flex: 0 0 auto !important;
}

.knowledge-base-page .knowledge-category-description .elementor-widget-container,
.knowledge-base-page .knowledge-category-description p {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/*
 * Footer always sits at the bottom, regardless of whether the
 * description above it contains one line or several lines.
 */
.knowledge-base-page .knowledge-category-footer,
.knowledge-base-page .knowledge-category-card > footer,
.knowledge-base-page .knowledge-category-card > .e-con-inner > .knowledge-category-footer,
.knowledge-base-page .knowledge-category-card > .e-con-inner > footer {
    flex: 0 0 auto !important;

    width: 100% !important;

    margin-top: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    padding-top: 12px !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
}

/*
 * Elementor Spacer is no longer part of the required structure.
 * Keep this fallback so old cards remain correct until every
 * Spacer widget has been deleted in Elementor.
 */
.knowledge-base-page .knowledge-category-card .knowledge-card-spacer,
.knowledge-base-page .knowledge-category-card .elementor-widget-spacer {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 0 !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .knowledge-base-page .knowledge-category-description {
        padding-bottom: 22px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .knowledge-base-page .knowledge-category-description {
        padding-bottom: 20px !important;
    }
}


/* =========================================================
   V7 FIX — COMPACT CATEGORY CARD SPACING
   Keep all card footers aligned at the bottom without creating
   an unnecessarily large empty area under short descriptions.
   ========================================================= */

/* Let the tallest content define the compact equal row height. */
.knowledge-base-page .knowledge-category-card {
    min-height: 0 !important;
}

/* Keep description and footer visually close. */
.knowledge-base-page .knowledge-category-description {
    padding-bottom: 10px !important;
}

/* Footer stays at the bottom, but with a tighter divider gap. */
.knowledge-base-page .knowledge-category-footer,
.knowledge-base-page .knowledge-category-card > footer,
.knowledge-base-page .knowledge-category-card > .e-con-inner > .knowledge-category-footer,
.knowledge-base-page .knowledge-category-card > .e-con-inner > footer {
    margin-top: auto !important;
    padding-top: 10px !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .knowledge-base-page .knowledge-category-description {
        padding-bottom: 10px !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .knowledge-base-page .knowledge-category-description {
        padding-bottom: 8px !important;
    }

    .knowledge-base-page .knowledge-category-footer,
    .knowledge-base-page .knowledge-category-card > footer,
    .knowledge-base-page .knowledge-category-card > .e-con-inner > .knowledge-category-footer,
    .knowledge-base-page .knowledge-category-card > .e-con-inner > footer {
        padding-top: 8px !important;
    }
}