/* ==========================================================================
   VEBKO ONLINE HELP — CORPORATE UI 2026 / V4
   Clean • Technical • Modern • Unified
   ========================================================================== */


/* ==========================================================================
   0. FONT
   ========================================================================== */

@font-face {
    font-family: "IRANSansX";
    src: url("/fonts/IRANSansX/IRANSansX-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
--vh-content-max
@font-face {
    font-family: "IRANSansX";
    src: url("/fonts/IRANSansX/IRANSansX-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    color-scheme: light;
    --vh-teal-950: #073f46;
    --vh-teal-900: #08505a;
    --vh-teal-800: #0b6670;
    --vh-teal-700: #0c7f86;
    --vh-teal-600: #0e969a;
    --vh-teal-500: #14aaa8;
    --vh-teal-400: #33c0ba;
    --vh-blue-700: #2368c4;
    --vh-blue-600: #2f7bd5;
    --vh-blue-500: #4092e3;
    --vh-bg: #edf3f5;
    --vh-bg-2: #f4f7f8;
    --vh-surface: #ffffff;
    --vh-surface-soft: #f8fbfb;
    --vh-surface-tint: #f1f8f8;
    --vh-text: #173139;
    --vh-text-2: #345158;
    --vh-muted: #6d8389;
    --vh-muted-2: #91a1a5;
    --vh-line: #d9e4e6;
    --vh-line-strong: #c9d7da;
    --vh-success: #1c8a67;
    --vh-warning: #c88924;
    --vh-danger: #c65459;
    --vh-r8: 8px;
    --vh-r10: 10px;
    --vh-r12: 12px;
    --vh-r16: 16px;
    --vh-r20: 20px;
    --vh-r24: 24px;
    --vh-shadow-xs: 0 1px 2px rgba(16, 49, 57, .04);
    --vh-shadow-sm: 0 6px 18px rgba(16, 49, 57, .07);
    --vh-shadow-md: 0 14px 34px rgba(16, 49, 57, .10);
    --vh-shadow-lg: 0 26px 64px rgba(8, 45, 53, .17);
    --vh-header-h: 66px;
    --vh-content-max: 1320px;
    --vbk-bg: var(--vh-bg);
    --vbk-surface: var(--vh-surface);
    --vbk-surface-strong: var(--vh-surface);
    --vbk-text: var(--vh-text);
    --vbk-muted: var(--vh-muted);
    --vbk-line: var(--vh-line);
    --vbk-line-strong: var(--vh-line-strong);
    --vbk-brand: var(--vh-teal-600);
    --vbk-brand-2: var(--vh-teal-800);
    --vbk-brand-soft: #e8f6f5;
    --vbk-shadow: var(--vh-shadow-md);
    --vbk-shadow-lg: var(--vh-shadow-lg);
    --vbk-radius-xl: var(--vh-r24);
    --vbk-radius-lg: var(--vh-r20);
    --vbk-radius-md: var(--vh-r16);
    --vbk-radius-sm: var(--vh-r12);
    --vbk-sidebar-w: 380px;
    --vbk-nav-h: var(--vh-header-h);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

html {
    background: var(--vh-bg) !important;
}

html,
body.help-body {
    width: 100%;
    height: 100%;
}

    body.help-body.help-ui-2026 {
        margin: 0 !important;
        overflow: hidden !important;
        color: var(--vh-text) !important;
        background: var(--vh-bg) !important;
        font-family: "Segoe UI", Inter, Arial, sans-serif !important;
        font-size: 14px;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }

    html[dir="rtl"] body.help-ui-2026,
    html[dir="rtl"] body.help-ui-2026 * {
        font-family: "IRANSansX", Tahoma, Arial, sans-serif !important;
    }

body.help-ui-2026 *,
body.help-ui-2026 *::before,
body.help-ui-2026 *::after {
    box-sizing: border-box;
}

body.help-ui-2026 button,
body.help-ui-2026 select,
body.help-ui-2026 input,
body.help-ui-2026 textarea {
    font: inherit;
}

body.help-ui-2026 a,
body.help-ui-2026 button,
body.help-ui-2026 input,
body.help-ui-2026 select {
    -webkit-tap-highlight-color: transparent;
}

    body.help-ui-2026 a:focus-visible,
    body.help-ui-2026 button:focus-visible,
    body.help-ui-2026 input:focus-visible,
    body.help-ui-2026 select:focus-visible {
        outline: 3px solid rgba(20, 170, 168, .22) !important;
        outline-offset: 2px !important;
    }


/* ==========================================================================
   3. APP SHELL
   ========================================================================== */

body.help-ui-2026 .NavbarCustomeHelp {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient( 135deg, #e7eff1 0%, #f1f5f6 44%, #e8f1f3 100% ) !important;
}


/* ==========================================================================
   4. HEADER
   ========================================================================== */

body.help-ui-2026 .menu-help {
    position: relative;
    z-index: 3000;
    min-height: var(--vh-header-h) !important;
    height: var(--vh-header-h) !important;
    margin: 0 !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    list-style: none;
    border: 0 !important;
    border-bottom: 1px solid var(--vh-line) !important;
    border-radius: 0 !important;
    background: linear-gradient( 180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 251, 251, .98) 100% ) !important;
    box-shadow: 0 1px 0 rgba(10, 74, 82, .03), 0 5px 15px rgba(19, 53, 61, .045) !important;
}

    body.help-ui-2026 .menu-help::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        background: linear-gradient( 180deg, var(--vh-teal-500), var(--vh-blue-600) );
    }

html[dir="rtl"] body.help-ui-2026 .menu-help::before {
    inset: 0 0 0 auto;
}

body.help-ui-2026 .menu-help_li {
    display: flex !important;
    align-items: center;
    margin: 0 !important;
}


/* Menu button */

body.help-ui-2026 .menu-Button {
    position: relative;
    width: 40px !important;
    height: 40px !important;
    display: inline-grid !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid var(--vh-line-strong) !important;
    border-radius: var(--vh-r10) !important;
    background: #ffffff !important;
    color: var(--vh-teal-900) !important;
    box-shadow: var(--vh-shadow-xs) !important;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

    body.help-ui-2026 .menu-Button:hover {
        transform: translateY(-1px);
        border-color: rgba(14, 150, 154, .42) !important;
        background: #eef8f7 !important;
        color: var(--vh-teal-700) !important;
    }

    body.help-ui-2026 .menu-Button img {
        opacity: 0 !important;
        width: 1px !important;
        height: 1px !important;
    }

    body.help-ui-2026 .menu-Button::before,
    body.help-ui-2026 .menu-Button::after {
        content: "";
        position: absolute;
        inset-inline-start: 10px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
    }

    body.help-ui-2026 .menu-Button::before {
        top: 13px;
        width: 18px;
        box-shadow: 0 6px 0 currentColor;
    }

    body.help-ui-2026 .menu-Button::after {
        top: 25px;
        width: 13px;
    }


/* Language */

body.help-ui-2026 .lang_div {
    min-width: 150px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--vh-line-strong) !important;
    border-radius: var(--vh-r10) !important;
    background: #ffffff !important;
    box-shadow: var(--vh-shadow-xs) !important;
}

body.help-ui-2026 .lang_icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: grid !important;
    place-items: center;
    background: linear-gradient( 135deg, #eaf8f7, #eef5fb );
}

    body.help-ui-2026 .lang_icon img {
        width: 18px !important;
        height: 18px !important;
        object-fit: contain;
        opacity: .82;
    }

body.help-ui-2026 .lang_div .select-style {
    min-width: 105px !important;
    height: 38px !important;
    padding-inline: 7px 28px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    color: var(--vh-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: start !important;
}


/* Logo */

body.help-ui-2026 .log-in-menu {
    margin-inline-start: auto !important;
}

body.help-ui-2026 .help-legacy-logo-link {
    min-height: 42px;
    display: inline-flex !important;
    align-items: center;
    gap: 11px;
    padding: 4px 10px;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-r10);
    background: #ffffff;
    color: var(--vh-text) !important;
    text-decoration: none !important;
}

    body.help-ui-2026 .help-legacy-logo-link::after {
        content: "ONLINE HELP";
        padding-inline-start: 11px;
        border-inline-start: 1px solid var(--vh-line);
        color: var(--vh-muted);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .14em;
        white-space: nowrap;
    }

html[dir="rtl"] body.help-ui-2026 .help-legacy-logo-link::after {
    content: "راهنمای آنلاین";
    font-size: 10px;
    letter-spacing: 0;
}

body.help-ui-2026 .image_log {
    display: block;
    width: auto !important;
    max-width: 145px !important;
    max-height: 28px !important;
    filter: none !important;
}


/* ==========================================================================
   5. MAIN PANELS
   ========================================================================== */

body.help-ui-2026 .panel-container {
    flex: 1 1 0;
    min-height: 0;
    display: flex !important;
    align-items: stretch;
    gap: 0;
    padding: 0 !important;
    overflow: hidden;
    background: transparent !important;
}

body.help-ui-2026 .panel-left,
body.help-ui-2026 .panel-right {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================================
   6. SIDEBAR
   ========================================================================== */

body.help-ui-2026 .panel-left {
    position: relative;
    width: var(--vbk-sidebar-w);
    min-width: 320px;
    max-width: 700px;
    flex: 0 0 var(--vbk-sidebar-w);
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    border: 0 !important;
    border-inline-end: 1px solid rgba(255, 255, 255, .08) !important;
    background: linear-gradient( 180deg, var(--vh-teal-900) 0%, #084b55 58%, #073f47 100% ) !important;
    color: #ffffff !important;
    z-index: 20;
    box-shadow: 7px 0 20px rgba(5, 51, 59, .09) !important;
}

    body.help-ui-2026 .panel-left::before {
        content: "";
        position: absolute;
        top: -125px;
        inset-inline-end: -125px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(57, 197, 190, .18), transparent 68% );
        pointer-events: none;
    }

    body.help-ui-2026 .panel-left::after {
        content: "";
        position: absolute;
        bottom: -150px;
        inset-inline-start: -120px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(64, 146, 227, .12), transparent 68% );
        pointer-events: none;
    }


/* ==========================================================================
   7. RIGHT AREA
   ========================================================================== */

body.help-ui-2026 .panel-right {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0 !important;
    background: linear-gradient( 135deg, #e5eef0 0%, #f1f5f6 55%, #e8f0f2 100% ) !important;
}

body.help-ui-2026:not(.help-is-linkedin) .panel-right::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: -120px;
    inset-inline-end: -90px;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient( circle, rgba(28, 171, 169, .09), transparent 70% ) !important;
}

body.help-ui-2026:not(.help-is-linkedin) .panel-right #content {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    width: 100%;
    min-height: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: transparent !important;
}

body.help-ui-2026:not(.help-is-linkedin) .panel-right .help-main {
    width: 100%;
    min-height: 100%;
    padding: 32px clamp(24px, 3.3vw, 56px) 56px !important;
}


/* ==========================================================================
   8. SPLITTER
   ========================================================================== */

body.help-ui-2026 .splitter {
    position: relative;
    width: 6px !important;
    min-width: 6px !important;
    max-width: 6px !important;
    flex: 0 0 6px !important;
    background: #cfdcdf !important;
    cursor: col-resize !important;
    z-index: 25;
}

    body.help-ui-2026 .splitter::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-start: 50%;
        width: 1px;
        transform: translateX(-50%);
        background: rgba(7, 92, 101, .25);
        transition: width .16s ease, background .16s ease;
    }

    body.help-ui-2026 .splitter:hover::before,
    body.help-ui-2026 .splitter.is-dragging::before {
        width: 3px;
        background: var(--vh-teal-500);
    }


/* ==========================================================================
   9. SIDEBAR SEARCH
   ========================================================================== */

body.help-ui-2026 .serach-div {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    gap: 0;
    padding: 18px 16px 10px !important;
    background: transparent !important;
}

body.help-ui-2026 .sarech_label {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    display: grid !important;
    place-items: center;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-inline-end: 0 !important;
    border-radius: 11px 0 0 11px !important;
    background: rgba(255, 255, 255, .10) !important;
}

html[dir="rtl"] body.help-ui-2026 .sarech_label {
    border-radius: 0 11px 11px 0 !important;
    border-inline-end: 1px solid rgba(255, 255, 255, .18) !important;
    border-inline-start: 0 !important;
}

body.help-ui-2026 .sarech_label img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .82;
}

body.help-ui-2026 .input-serach {
    width: 100%;
    height: 42px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 0 11px 11px 0 !important;
    background: rgba(255, 255, 255, .10) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: start !important;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

html[dir="rtl"] body.help-ui-2026 .input-serach {
    border-radius: 11px 0 0 11px !important;
}

body.help-ui-2026 .input-serach::placeholder {
    color: rgba(255, 255, 255, .62) !important;
    opacity: 1 !important;
}

body.help-ui-2026 .input-serach:focus {
    border-color: rgba(255, 255, 255, .40) !important;
    background: rgba(255, 255, 255, .15) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .055) !important;
}

body.help-ui-2026 .hr-sidebar {
    height: 1px !important;
    margin: 4px 16px 12px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, .12) !important;
}


/* ==========================================================================
   10. CATEGORY SELECT
   ========================================================================== */

body.help-ui-2026 .categury_div {
    position: relative;
    z-index: 2;
    display: grid !important;
    gap: 7px;
    padding: 0 16px 15px !important;
}

    body.help-ui-2026 .categury_div::before {
        content: "DOCUMENTATION";
        display: block;
        padding-inline: 2px;
        color: rgba(255, 255, 255, .56);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .14em;
        text-align: start;
    }

html[dir="rtl"] body.help-ui-2026 .categury_div::before {
    content: "مستندات";
    font-size: 10px;
    letter-spacing: 0;
}

body.help-ui-2026 .categury_div .select-style {
    height: 42px !important;
    padding-inline: 13px 36px !important;
    border: 1px solid rgba(255, 255, 255, .20) !important;
    border-radius: 11px !important;
    background-color: rgba(255, 255, 255, .96) !important;
    color: var(--vh-teal-950) !important;
    box-shadow: 0 5px 13px rgba(1, 36, 42, .13) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: start !important;
}


/* ==========================================================================
   11. NAV TREE
   ========================================================================== */

body.help-ui-2026 #tabfigure,
body.help-ui-2026 .tabBlock {
    position: relative;
    z-index: 2;
    flex: 1 1 0;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
}

body.help-ui-2026 #tabBlock-content,
body.help-ui-2026 .tabBlock-content {
    height: 100%;
    padding: 0 10px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 0 !important;
    background: transparent !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .38) transparent;
}

    body.help-ui-2026 #tabBlock-content::-webkit-scrollbar {
        width: 6px;
    }

    body.help-ui-2026 #tabBlock-content::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(255, 255, 255, .32);
    }

body.help-ui-2026 .tabBlock-pane {
    width: 100%;
    min-height: 100%;
    background: transparent !important;
}

body.help-ui-2026 #tabBlock-content .sub-menu {
    margin: 4px 0 !important;
    overflow: hidden;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: border-color .16s ease, background .16s ease;
}

    body.help-ui-2026 #tabBlock-content .sub-menu:hover {
        border-color: rgba(255, 255, 255, .10) !important;
        background: rgba(255, 255, 255, .055) !important;
    }

    body.help-ui-2026 #tabBlock-content .sub-menu.open {
        border-color: rgba(81, 213, 207, .17) !important;
        background: rgb(177 255 244 / 18%) !important;
    }

    body.help-ui-2026 #tabBlock-content .sub-menu > a {
        position: relative;
        min-height: 42px !important;
        display: flex !important;
        align-items: center;
        gap: 9px;
        padding: 9px 11px !important;
        color: #f5ffff !important;
        text-decoration: none !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.45;
    }

        body.help-ui-2026 #tabBlock-content .sub-menu > a > img {
            display: none !important;
        }

        body.help-ui-2026 #tabBlock-content .sub-menu > a::before {
            content: "";
            width: 12px !important;
            height: 12px;
            flex: 0 0 12px;
            border: 2px solid #4fd1ca;
            border-radius: 3px;
        }

body.help-ui-2026 #tabBlock-content .help-direct-topic > a::before {
    border-radius: 50%;
    border-color: #77b6ea;
}

body.help-ui-2026
#tabBlock-content
.sub-menu:not(.help-direct-topic) > a::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-inline-start: auto;
    border-inline-end: 1.5px solid rgba(255, 255, 255, .60);
    border-bottom: 1.5px solid rgba(255, 255, 255, .60);
    transform: rotate(45deg);
}

body.help-ui-2026
#tabBlock-content
.sub-menu.open > a::after {
    transform: rotate(-135deg);
}

body.help-ui-2026 #tabBlock-content .sub-menu > ul.sub {
    display: none;
    margin: 0 !important;
    padding: 1px 8px 8px 26px !important;
}

html[dir="rtl"]
body.help-ui-2026
#tabBlock-content
.sub-menu > ul.sub {
    padding: 1px 26px 8px 8px !important;
}

body.help-ui-2026 #tabBlock-content .sub-menu.open > ul.sub {
    display: block;
}

body.help-ui-2026 #tabBlock-content .sub-menu > ul.sub > li {
    margin-top: 2px !important;
}

    body.help-ui-2026 #tabBlock-content .sub-menu > ul.sub > li > a {
        position: relative;
        min-height: 34px;
        display: flex !important;
        align-items: flex-start;
        gap: 7px;
        padding: 7px 9px 7px 13px !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: rgba(239, 255, 255, .72) !important;
        box-shadow: none !important;
        text-decoration: none !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        transition: background .15s ease, color .15s ease;
    }

html[dir="rtl"]
body.help-ui-2026
#tabBlock-content
.sub-menu > ul.sub > li > a {
    padding: 7px 13px 7px 9px !important;
}

body.help-ui-2026 #tabBlock-content .sub-menu > ul.sub > li > a > img {
    display: none !important;
}

body.help-ui-2026 #tabBlock-content .sub-menu > ul.sub > li > a::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: rgb(7 59 56);
}

body.help-ui-2026 #tabBlock-content .sub-menu > ul.sub > li > a:hover {
    background: rgba(75, 197, 192, .11) !important;
    color: #ffffff !important;
}

body.help-ui-2026 #tabBlock-content .newpage.li_select {
    background: linear-gradient( 90deg, rgba(47, 189, 183, .22), rgba(53, 122, 195, .13) ) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #59d7d1 !important;
}

html[dir="rtl"] body.help-ui-2026 #tabBlock-content .newpage.li_select {

}

body.help-ui-2026 #tabBlock-content .newpage.li_select::before {
    background: #60dcd6 !important;
}


/* ==========================================================================
   12. CONTENT SCROLLBAR
   ========================================================================== */

body.help-ui-2026:not(.help-is-linkedin) #content {
    scrollbar-width: thin;
    scrollbar-color: #a7bdc2 transparent;
}

    body.help-ui-2026:not(.help-is-linkedin) #content::-webkit-scrollbar {
        width: 8px;
    }

    body.help-ui-2026:not(.help-is-linkedin) #content::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #acbec2;
    }


/* ==========================================================================
   13. TOPIC LAYOUT — HEADER LIKE CATALOG
   ========================================================================== */

body.help-ui-2026 .help-standard-topic {
    position: relative;
    width: min(var(--vh-content-max), 100%);
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--vh-text) !important;
}

    body.help-ui-2026 .help-standard-topic::before {
        display: none !important;
        content: none !important;
    }

    body.help-ui-2026 .help-standard-topic::after {
        display: none !important;
        content: none !important;
    }


/* Header card */

body.help-ui-2026 .help-standard-topic-seo-title {
    position: relative !important;
    width: 100% !important;
    min-height: 146px !important;
    margin: 0 0 14px !important;
    padding: 26px 210px 22px 28px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    color: var(--vh-text) !important;
    font-size: clamp(30px, 3vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -.04em !important;
    text-align: start !important;
    border: 1px solid #c9d7da !important;
    border-radius: var(--vh-r20) !important;
    background: linear-gradient(115deg, #edf8f7 0%, #ddefed 50%, #cef0f3 100%) !important;
    box-shadow: 0 6px 18px rgba(16, 49, 57, .07);
}

    body.help-ui-2026 .help-standard-topic-seo-title::before {
        content: "Technical Documentation";
        display: inline-flex;
        align-items: center;
        min-height: 35px;
        margin-bottom: 16px;
        padding: 4px 10px;
        border: 1px solid rgb(49 121 125 / 39%);
        border-radius: 999px;
        background: rgb(107 189 189 / 29%);
        color: #1a716e;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .02em;
        vertical-align: middle;
        backdrop-filter: blur(10px);
    }

    body.help-ui-2026 .help-standard-topic-seo-title::after {
        content: "";
        position: absolute;
        top: 0;
        inset-inline-start: 0;
        width: 5px;
        height: 100%;
        border-radius: 20px 0 0 20px;

    }

html[dir="rtl"] body.help-ui-2026 .help-standard-topic-seo-title {
    padding: 26px 28px 22px 210px !important;
    letter-spacing: 0 !important;
}

    html[dir="rtl"] body.help-ui-2026 .help-standard-topic-seo-title::before {
        content: "مستندات فنی";
        font-size: 10px;
        letter-spacing: 0;
    }

    html[dir="rtl"] body.help-ui-2026 .help-standard-topic-seo-title::after {
        inset-inline-start: auto;
        inset-inline-end: 0;
        border-radius: 0 20px 20px 0;
    }


/* Toolbar inside header */

body.help-ui-2026 .help-topic-action-bar {
    position: absolute;
    top: 18px;
    inset-inline-end: 22px;
    z-index: 25;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0 !important;
}

    body.help-ui-2026 .help-topic-action-bar .badge {
        appearance: none;
        width: 39px !important;
        height: 39px !important;
        display: inline-grid !important;
        place-items: center;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid var(--vh-line-strong) !important;
        border-radius: 11px !important;
        background: #ffffff !important;
        color: var(--vh-teal-800) !important;
        box-shadow: var(--vh-shadow-xs) !important;
        text-decoration: none !important;
        cursor: pointer;
        transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
    }

        body.help-ui-2026 .help-topic-action-bar .badge:hover,
        body.help-ui-2026 .help-topic-action-bar .badge:focus-visible {
            transform: translateY(-1px);
            border-color: rgba(14, 150, 154, .35) !important;
            background: #eef8f7 !important;
            color: var(--vh-teal-700) !important;
            box-shadow: var(--vh-shadow-sm) !important;
        }

body.help-ui-2026 .help-topic-share-icon {
    display: block;
    width: 21px !important;
    height: 21px !important;
    object-fit: contain;
}

body.help-ui-2026 .help-ui-action-svg {
    display: block;
}


/* Content surface under header */

body.help-ui-2026 .help-structured-content {
    display: block !important;
    margin-top: 0 !important;
    padding: 22px 24px 28px !important;
    border: 1px solid var(--vh-line-strong) !important;
    border-radius: var(--vh-r20) !important;
    background: #ffffff !important;
    box-shadow: var(--vh-shadow-sm) !important;
}

body.help-ui-2026 .help-content-group {
    position: relative;
    margin: 0 !important;
    padding: 24px 24px !important;
    border: 1px solid #e1eaec !important;
    border-radius: var(--vh-r16) !important;
    background: #fbfdfd !important;
    box-shadow: none !important;
}

    body.help-ui-2026 .help-content-group + .help-content-group {
        margin-top: 20px !important;
    }

    body.help-ui-2026 .help-content-group:nth-child(3n + 2) {
        background: #f8fbfd !important;
    }

    body.help-ui-2026 .help-content-group:nth-child(3n) {
        background: #f7fbfa !important;
    }


/* Group title */

body.help-ui-2026 .help-content-group-title {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 34px;
    margin: 0 0 18px !important;
    padding: 6px 13px 6px 15px !important;
    border: 1px solid #d7e9e8 !important;
    border-radius: 9px !important;
    background: linear-gradient( 90deg, #eaf7f6, #f0f6fb ) !important;
    color: var(--vh-teal-900) !important;
    font-size: clamp(16px, 1.8vw, 20px) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

    body.help-ui-2026 .help-content-group-title::before {
        content: "";
        width: 4px;
        height: 18px;
        margin-inline-end: 8px;
        border-radius: 999px;
        background: linear-gradient( 180deg, var(--vh-teal-500), var(--vh-blue-600) );
    }


/* Blocks */

body.help-ui-2026 .help-content-block {
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

    body.help-ui-2026 .help-content-block:last-child {
        margin-bottom: 0 !important;
    }


/* Text */

body.help-ui-2026 .help-content-text {
    color: var(--vh-text-2) !important;
    font-size: 14px !important;
    font-weight: 450 !important;
    line-height: 1.85 !important;
    text-align: start !important;
}

    body.help-ui-2026 .help-content-text p {
        margin: 0 0 1.1em !important;
    }

    body.help-ui-2026 .help-content-text strong,
    body.help-ui-2026 .help-content-text b {
        color: var(--vh-text) !important;
        font-weight: 750 !important;
    }

    body.help-ui-2026 .help-content-text a {
        color: var(--vh-blue-700) !important;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    body.help-ui-2026 .help-content-text ul,
    body.help-ui-2026 .help-content-text ol {
        margin-block: 10px 18px !important;
        padding-inline-start: 26px !important;
    }

    body.help-ui-2026 .help-content-text li {
        margin-bottom: 7px !important;
    }


    /* Tables */

    body.help-ui-2026 .help-content-text table {
        width: 100% !important;
        margin: 20px 0 !important;
        overflow: hidden;
        border: 1px solid var(--vh-line-strong) !important;
        border-radius: var(--vh-r12) !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: #ffffff !important;
        box-shadow: var(--vh-shadow-xs);
    }

    body.help-ui-2026 .help-content-text th,
    body.help-ui-2026 .help-content-text td {
        padding: 10px 12px !important;
        border: 0 !important;
        border-bottom: 1px solid #e1eaec !important;
        font-size: 12px !important;
        text-align: start !important;
    }

    body.help-ui-2026 .help-content-text th {
        background: linear-gradient( 90deg, #eaf7f6, #eef5fb ) !important;
        color: var(--vh-text) !important;
        font-weight: 800 !important;
    }


/* ==========================================================================
   14. MEDIA — COMPACT PREVIEW
   ========================================================================== */

body.help-ui-2026 .help-inline-media-list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 300px)) !important;
    justify-content: start !important;
    align-items: start;
    gap: 14px !important;
    margin: 16px 0 7px !important;
}

body.help-ui-2026 .help-inline-image-button,
body.help-ui-2026 .help-inline-video-button {
    width: 100% !important;
    max-width: 300px !important;
    justify-self: start !important;
    margin: 0 !important;
    padding: 7px !important;
    overflow: hidden;
    border: 1px solid #d2e2e4 !important;
    border-radius: var(--vh-r12) !important;
    background: linear-gradient( 145deg, #f7fbfb, #eef6f7 ) !important;
    box-shadow: var(--vh-shadow-xs) !important;
    cursor: zoom-in;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

    body.help-ui-2026 .help-inline-image-button:hover,
    body.help-ui-2026 .help-inline-video-button:hover {
        transform: translateY(-2px) !important;
        border-color: rgba(14, 150, 154, .32) !important;
        background: #ffffff !important;
        box-shadow: var(--vh-shadow-sm) !important;
    }

body.help-ui-2026 .help-inline-image {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 210px !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    background: #ffffff;
    box-shadow: none !important;
}

body.help-ui-2026 .help-video-preview {
    min-height: 180px;
    max-height: 210px;
    border-radius: 8px !important;
    background: #10262c !important;
}

    body.help-ui-2026 .help-video-preview video {
        width: 100% !important;
        max-height: 210px !important;
        border-radius: 8px !important;
    }

body.help-ui-2026 .help-video-play {
    width: 50px !important;
    height: 50px !important;
    display: grid !important;
    place-items: center;
    padding-inline-start: 3px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 50% !important;
    background: linear-gradient( 135deg, var(--vh-teal-500), var(--vh-blue-600) ) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

body.help-ui-2026 .help-inline-audio {
    width: 100% !important;
    margin: 10px 0 !important;
}

body.help-ui-2026 .help-inline-document {
    min-height: 41px;
    display: inline-flex !important;
    align-items: center;
    padding: 9px 13px !important;
    border: 1px solid var(--vh-line-strong) !important;
    border-radius: var(--vh-r10) !important;
    background: linear-gradient( 90deg, #eef8f7, #f2f7fb ) !important;
    color: var(--vh-teal-900) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    text-decoration: none !important;
}

    body.help-ui-2026 .help-inline-document:hover {
        border-color: rgba(14, 150, 154, .32) !important;
        background: #e8f6f5 !important;
    }


/* ==========================================================================
   15. FINDER
   ========================================================================== */

body.help-ui-2026 .help-topic-finder {
    position: fixed !important;
    top: 80px !important;
    left: 50% !important;
    z-index: 1000002 !important;
    width: min(640px, calc(100vw - 28px)) !important;
    transform: translate(-50%, -16px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .17s ease, opacity .17s ease !important;
}

    body.help-ui-2026 .help-topic-finder.is-open {
        transform: translate(-50%, 0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

body.help-ui-2026 .help-topic-finder-inner {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 7px 6px 12px !important;
    border: 1px solid var(--vh-line-strong) !important;
    border-radius: var(--vh-r12) !important;
    background: #ffffff !important;
    color: var(--vh-text) !important;
    box-shadow: var(--vh-shadow-lg) !important;
}

body.help-ui-2026 .help-topic-finder-input {
    height: 36px !important;
    color: var(--vh-text) !important;
    background: transparent !important;
    font-size: 13px !important;
}

body.help-ui-2026 .help-topic-finder-count {
    color: var(--vh-muted) !important;
}

body.help-ui-2026 .help-topic-search-highlight {
    border-radius: 3px;
    background: #ffe8a1 !important;
    color: #263a3f !important;
}

    body.help-ui-2026 .help-topic-search-highlight.is-active {
        background: #ffc861 !important;
        color: #182a2e !important;
    }


/* ==========================================================================
   16. MODALS
   ========================================================================== */

body.help-ui-2026 .help-media-modal,
body.help-ui-2026 .help-toolbar-video-modal,
body.help-ui-2026 #sharingModal {
    background: rgba(6, 32, 38, .62) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.help-ui-2026 .help-image-lightbox-content,
body.help-ui-2026 .help-video-modal-content,
body.help-ui-2026 .help-toolbar-video-content {
    border: 1px solid rgba(255, 255, 255, .42) !important;
    border-radius: var(--vh-r20) !important;
    background: #ffffff !important;
    box-shadow: var(--vh-shadow-lg) !important;
}

body.help-ui-2026 .help-toolbar-video-content {
    width: min(980px, calc(100vw - 28px)) !important;
    max-height: min(90dvh, 900px) !important;
    padding: 24px !important;
}

body.help-ui-2026 .help-toolbar-video-title {
    padding-inline-end: 46px !important;
    color: var(--vh-text) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-align: start !important;
}

body.help-ui-2026 .help-toolbar-video-close,
body.help-ui-2026 .help-media-modal-close,
body.help-ui-2026 #sharingModal .close2 {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--vh-line) !important;
    border-radius: var(--vh-r10) !important;
    background: #f5f9f9 !important;
    color: var(--vh-text-2) !important;
    box-shadow: none !important;
}

body.help-ui-2026 .help-toolbar-video-player-wrap {
    margin-top: 17px !important;
}

body.help-ui-2026 .help-toolbar-video-player-box {
    overflow: hidden;
    border: 1px solid #274149 !important;
    border-radius: var(--vh-r12) !important;
    background: #0b171b !important;
}

body.help-ui-2026 .help-toolbar-resource-table-scroll {
    margin-top: 20px !important;
    overflow-x: auto;
    border: 1px solid var(--vh-line-strong) !important;
    border-radius: var(--vh-r12) !important;
}

body.help-ui-2026 .help-toolbar-resource-table {
    width: 100% !important;
    min-width: 560px !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
}

    body.help-ui-2026 .help-toolbar-resource-table th,
    body.help-ui-2026 .help-toolbar-resource-table td {
        min-width: 62px;
        padding: 10px 9px !important;
        border: 0 !important;
        border-inline-end: 1px solid #e0e9eb !important;
        border-bottom: 1px solid #e0e9eb !important;
        color: var(--vh-text-2) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    body.help-ui-2026 .help-toolbar-resource-table thead th {
        background: linear-gradient( 90deg, #eaf7f6, #eef5fb ) !important;
        color: var(--vh-teal-900) !important;
    }

body.help-ui-2026 .help-toolbar-resource-icon-download {
    color: var(--vh-teal-600) !important;
}

body.help-ui-2026 .help-toolbar-resource-missing {
    color: #b7c4c7 !important;
}


/* ==========================================================================
   17. SHARE MODAL
   ========================================================================== */

body.help-ui-2026 #sharingModal .custom-modal-content {
    width: min(590px, calc(100vw - 28px)) !important;
}

body.help-ui-2026 #sharingModal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    border-radius: var(--vh-r20) !important;
    background: #ffffff !important;
    box-shadow: var(--vh-shadow-lg) !important;
}

body.help-ui-2026 #sharingModal .modal-header {
    min-height: 62px !important;
    padding: 16px 19px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--vh-line) !important;
    background: linear-gradient(90deg, #16b3a5, #16b3a5) !important;
    color: var(--vh-text) !important;
}

body.help-ui-2026 #sharingModal .modal-title {
    color: var(--vh-text) !important;
    font-size: 17px !important;
}

body.help-ui-2026 #sharingModal .modal-body {
    padding: 18px !important;
    background: #f8fbfb !important;
}

body.help-ui-2026 #sharingModal .list-social > a {
    min-height: 84px !important;
    border: 1px solid var(--vh-line) !important;
    border-radius: var(--vh-r12) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

    body.help-ui-2026 #sharingModal .list-social > a:hover {
        transform: translateY(-2px);
        border-color: rgba(14, 150, 154, .30) !important;
        box-shadow: var(--vh-shadow-sm) !important;
    }

body.help-ui-2026 #sharingModal .social-icon-container {
    width: 60px !important;
    height: 60px !important;
    border-radius: 12px !important;
    background: linear-gradient( 135deg, #e7f6f5, #edf4fb ) !important;
}

body.help-ui-2026 #sharingModal #btnCopy {
    border-radius: var(--vh-r10) !important;
    background: linear-gradient( 110deg, var(--vh-teal-600), var(--vh-blue-600) ) !important;
    box-shadow: none !important;
}


/* ==========================================================================
   18. LANDING
   ========================================================================== */

body.help-ui-2026 .help-default-landing {
    min-height: calc(100dvh - var(--vh-header-h) - 68px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 0 30px;
}

    body.help-ui-2026 .help-default-landing .default-page-shell {
        width: min(1060px, 100%);
    }

    body.help-ui-2026 .help-default-landing .default-landing-card {
        position: relative;
        overflow: hidden;
        padding: clamp(30px, 4vw, 50px);
        border: 1px solid var(--vh-line-strong);
        border-radius: var(--vh-r24);
        background: linear-gradient( 135deg, #ffffff 0%, #f6fbfb 56%, #eef5f8 100% );
        box-shadow: var(--vh-shadow-md);
    }

        body.help-ui-2026 .help-default-landing .default-landing-card::before {
            content: "";
            position: absolute;
            top: 0;
            inset-inline-start: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient( 90deg, var(--vh-teal-500), var(--vh-blue-600) );
        }

        body.help-ui-2026 .help-default-landing .default-landing-card::after {
            content: "";
            position: absolute;
            top: -150px;
            inset-inline-end: -150px;
            width: 340px;
            height: 340px;
            border-radius: 50%;
            background: radial-gradient( circle, rgba(20, 170, 168, .09), transparent 68% );
            pointer-events: none;
        }

    body.help-ui-2026 .help-default-landing .default-logo-wrap {
        width: 94px;
        height: 94px;
        margin: 0 auto 21px;
        display: grid;
        place-items: center;
        border: 1px solid #d6e7e8;
        border-radius: 21px;
        background: linear-gradient( 145deg, #f0f9f8, #eef4fa );
        box-shadow: var(--vh-shadow-xs);
    }

    body.help-ui-2026 .help-default-landing .default-brand-title {
        max-width: 780px;
        margin: 0 auto;
        color: var(--vh-teal-950);
        font-size: clamp(27px, 4vw, 41px);
        font-weight: 800;
        line-height: 1.18;
        letter-spacing: -.035em;
        text-align: center;
        align-items: center;
    }

html[dir="rtl"]
body.help-ui-2026
.help-default-landing
.default-brand-title {
    letter-spacing: 0;
}

body.help-ui-2026 .help-default-landing .default-brand-subtitle {
    width: min(720px, 100%);
    margin: 13px auto 0;
    color: var(--vh-text-2);
    font-size: 14px;
    line-height: 1.9;
    text-align: center;
}

body.help-ui-2026 .help-default-landing .default-section-head {
    margin: 34px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--vh-line);
}

body.help-ui-2026 .help-default-landing .default-social-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.help-ui-2026 .help-default-landing .default-social-card {
    position: relative;
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 15px;
    overflow: hidden;
    border: 1px solid var(--vh-line);
    border-radius: var(--vh-r16);
    background: #ffffff;
    color: var(--vh-text);
    text-decoration: none;
    box-shadow: var(--vh-shadow-xs);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

    body.help-ui-2026 .help-default-landing .default-social-card::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: 4px;
        background: var(--vh-teal-500);
    }

    body.help-ui-2026
    .help-default-landing
    .default-social-card:nth-child(even)::before {
        background: var(--vh-blue-600);
    }

    body.help-ui-2026 .help-default-landing .default-social-card:hover {
        transform: translateY(-2px);
        border-color: rgba(14, 150, 154, .26);
        box-shadow: var(--vh-shadow-sm);
    }

body.help-ui-2026 .help-default-landing .default-social-icon-box {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    display: grid;
    place-items: center;
    border: 1px solid #d8e8e9;
    border-radius: 11px;
    background: linear-gradient( 145deg, #eaf7f6, #eef4fb );
}


/* ==========================================================================
   19. CATALOG
   ========================================================================== */

body.help-ui-2026 .catalog-page {
    width: min(1320px, 100%) !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
}

body.help-ui-2026 .catalog-heading {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px;
    margin: 0 0 14px !important;
    padding: 24px 25px !important;
    overflow: hidden;
    border: 1px solid #c9d7da !important;
    border-radius: var(--vh-r20) !important;
    background: linear-gradient(115deg, #edf8f7 0%, #ddefed 50%, #cef0f3 100%) !important;
    box-shadow: 0 6px 18px rgba(16, 49, 57, .07);
}

    body.help-ui-2026 .catalog-heading::before {
        content: "";
        position: absolute;
        top: 0;
        inset-inline-start: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient( 180deg, var(--vh-teal-500), var(--vh-blue-600) );
    }

    body.help-ui-2026 .catalog-heading h1 {
        margin: 6px 0 5px !important;
        color: #16413b !important;
        font-size: clamp(25px, 3.3vw, 37px) !important;
        font-weight: 800 !important;
    }

    body.help-ui-2026 .catalog-heading p {
        color: var(--vh-muted) !important;
    }

body.help-ui-2026 .catalog-language {
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px;
    display: grid !important;
    place-items: center;

    border-radius: 12px !important;

    color: var(--vh-teal-900) !important;
    font-weight: 850 !important;
    background: rgb(107 189 189 / 29%);
    border: 1px solid rgb(49 121 125 / 39%);
}

body.help-ui-2026 .catalog-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px;
    margin-bottom: 14px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--vh-line) !important;
    border-radius: var(--vh-r12) !important;
    background: #ffffff !important;
    box-shadow: var(--vh-shadow-xs) !important;
}

body.help-ui-2026 .catalog-download,
body.help-ui-2026 .catalog-pdf-button {
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 7px 12px !important;
    border: 1px solid var(--vh-line-strong) !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: var(--vh-text-2) !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    text-decoration: none !important;
    cursor: pointer;
}

    body.help-ui-2026 .catalog-download:hover,
    body.help-ui-2026 .catalog-pdf-button:hover:not(:disabled) {
        border-color: rgba(14, 150, 154, .28) !important;
        background: #eef8f7 !important;
        color: var(--vh-teal-800) !important;
    }

    body.help-ui-2026 .catalog-download.primary {
        border-color: transparent !important;
        background: linear-gradient( 110deg, var(--vh-teal-600), var(--vh-blue-600) ) !important;
        color: #ffffff !important;
    }

body.help-ui-2026 .catalog-preview {
    position: relative;
    height: calc(100dvh - 270px) !important;
    min-height: 580px !important;
    overflow: hidden;
    border: 1px solid var(--vh-line-strong) !important;
    border-radius: var(--vh-r20) !important;
    background: #dbe5e8 !important;
    box-shadow: var(--vh-shadow-md) !important;
}

body.help-ui-2026 .catalog-pdf-toolbar {
    min-height: 54px !important;
    background: linear-gradient( 90deg, #edf8f7, #f0f5fb ) !important;
    border-bottom: 1px solid var(--vh-line) !important;
}

body.help-ui-2026 .catalog-pdf-scroll {
    background: radial-gradient( circle at top, #eef3f4, #d7e1e4 72% ) !important;
}


/* ==========================================================================
   21. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
    :root {
        --vbk-sidebar-w: 350px;
    }

    body.help-ui-2026:not(.help-is-linkedin) .panel-right .help-main {
        padding: 26px 28px 48px !important;
    }

    body.help-ui-2026 .help-standard-topic-seo-title {
        padding: 24px 190px 22px 24px !important;
    }

    html[dir="rtl"] body.help-ui-2026 .help-standard-topic-seo-title {
        padding: 24px 24px 22px 190px !important;
    }
}

@media (max-width: 900px) {
    body.help-ui-2026 .catalog-preview {
        min-height: 520px !important;
    }
}

@media (max-width: 768px) {
    :root {
        --vh-header-h: 62px;
        --vbk-nav-h: 62px;
    }

    body.help-ui-2026 .menu-help {
        min-height: var(--vh-header-h) !important;
        height: var(--vh-header-h) !important;
        padding: 0 12px !important;
    }

    body.help-ui-2026 .menu-Button {
        width: 38px !important;
        height: 38px !important;
    }

    body.help-ui-2026 .lang_div {
        min-width: 126px !important;
        height: 38px !important;
    }

    body.help-ui-2026 .lang_icon {
        display: none !important;
    }

    body.help-ui-2026 .help-legacy-logo-link::after {
        display: none !important;
    }

    body.help-ui-2026 .image_log {
        max-width: 112px !important;
        max-height: 29px !important;
    }

    body.help-ui-2026 .splitter {
        display: none !important;
    }

    body.help-ui-2026 .panel-right {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    body.help-ui-2026:not(.help-is-linkedin) .panel-right .help-main {
        padding: 18px 12px 36px !important;
    }

    body.help-ui-2026 .panel-left {
        position: fixed !important;
        top: var(--vh-header-h) !important;
        bottom: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        width: min(88vw, 390px) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        z-index: 4000 !important;
        border-inline-end: 1px solid rgba(255, 255, 255, .10) !important;
        box-shadow: 18px 0 44px rgba(4, 41, 47, .27) !important;
        display: flex !important;
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform .22s ease, opacity .22s ease, visibility .22s ease;
    }

    html[dir="rtl"] body.help-ui-2026 .panel-left {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        box-shadow: -18px 0 44px rgba(4, 41, 47, .27) !important;
    }

    body.help-ui-2026.sidebar-collapsed .panel-left {
        transform: translateX(calc(-100% - 22px)) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html[dir="rtl"]
    body.help-ui-2026.sidebar-collapsed
    .panel-left {
        transform: translateX(calc(100% + 22px)) !important;
    }

    body.help-ui-2026 .help-standard-topic-seo-title {
        min-height: auto !important;
        padding: 20px 18px 18px !important;
        font-size: clamp(22px, 7vw, 31px) !important;
        border-radius: 17px !important;
    }

    html[dir="rtl"] body.help-ui-2026 .help-standard-topic-seo-title {
        padding: 20px 18px 18px !important;
    }

    body.help-ui-2026 .help-topic-action-bar {
        position: static !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin: 14px 0 0 !important;
    }

    body.help-ui-2026 .help-structured-content {
        padding: 18px 14px 22px !important;
        border-radius: 17px !important;
    }

    body.help-ui-2026 .help-content-group {
        padding: 18px 16px !important;
    }

    body.help-ui-2026 .help-content-text {
        font-size: 13.5px !important;
    }

    body.help-ui-2026 .help-inline-media-list {
        grid-template-columns: 1fr !important;
    }

    body.help-ui-2026 .help-inline-image-button,
    body.help-ui-2026 .help-inline-video-button {
        max-width: 100% !important;
    }

    body.help-ui-2026 .help-inline-image,
    body.help-ui-2026 .help-video-preview video {
        max-height: 260px !important;
    }

    body.help-ui-2026 .catalog-heading {
        align-items: flex-start !important;
        padding: 20px !important;
    }

    body.help-ui-2026 .catalog-toolbar {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    body.help-ui-2026 .catalog-preview {
        height: calc(100dvh - 280px) !important;
        min-height: 480px !important;
    }
}

@media (max-width: 560px) {
    body.help-ui-2026 .help-default-landing {
        padding: 4px 0 24px !important;
    }

        body.help-ui-2026
        .help-default-landing
        .default-landing-card {
            padding: 28px 18px 22px !important;
            border-radius: 18px !important;
        }

        body.help-ui-2026
        .help-default-landing
        .default-social-grid {
            grid-template-columns: 1fr !important;
        }

    body.help-ui-2026 .help-topic-finder {
        top: 70px !important;
        width: calc(100vw - 14px) !important;
    }

    body.help-ui-2026 #sharingModal .list-social {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* ==========================================================================
   22. PRINT
   ========================================================================== */

@media print {
    body.help-body.help-ui-2026 {
        overflow: visible !important;
        background: #ffffff !important;
    }

    body.help-ui-2026 .menu-help,
    body.help-ui-2026 .panel-left,
    body.help-ui-2026 .splitter,
    body.help-ui-2026 .help-topic-action-bar,
    body.help-ui-2026 .help-topic-finder {
        display: none !important;
    }

    body.help-ui-2026 .panel-container,
    body.help-ui-2026 .panel-right,
    body.help-ui-2026:not(.help-is-linkedin) .panel-right #content,
    body.help-ui-2026:not(.help-is-linkedin) .panel-right .help-main {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    body.help-ui-2026 .help-standard-topic,
    body.help-ui-2026 .help-standard-topic-seo-title,
    body.help-ui-2026 .help-structured-content {
        border: 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    body.help-ui-2026 .help-content-group {
        break-inside: avoid;
        border: 1px solid #dddddd !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }
}



/* ==========================================================================
   VEBKO ONLINE HELP — LINKEDIN POLISH FIX
   Append this entire block to the END of:
   wwwroot/css/help-redesign-2026.css
   ========================================================================== */


/* ==========================================================================
   1. LINKEDIN SIDEBAR — DARK, READABLE, CORPORATE
   ========================================================================== */

body.help-ui-2026.help-is-linkedin
#tabBlock-content
.help-direct-topic {
    margin: 4px 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
}


    body.help-ui-2026.help-is-linkedin
    #tabBlock-content
    .help-direct-topic:hover {
        border: 0 !important;
        background: transparent !important;
    }


    body.help-ui-2026.help-is-linkedin
    #tabBlock-content
    .help-direct-topic > a {
        position: relative;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px;
        padding: 9px 11px !important;
        border: 1px solid rgba(255, 255, 255, .075) !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, .055) !important;
        color: rgba(246, 255, 255, .82) !important;
        box-shadow: none !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        line-height: 1.42 !important;
        text-decoration: none !important;
        transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease !important;
    }


        body.help-ui-2026.help-is-linkedin
        #tabBlock-content
        .help-direct-topic > a::before {
            content: "";
            width: 6px !important;
            height: 6px !important;
            flex: 0 0 6px !important;
            margin: 0 !important;
            border: 1.5px solid #6cc7ef !important;
            border-radius: 50% !important;
            background: transparent !important;
        }


        body.help-ui-2026.help-is-linkedin
        #tabBlock-content
        .help-direct-topic > a::after {
            display: none !important;
            content: none !important;
        }


        body.help-ui-2026.help-is-linkedin
        #tabBlock-content
        .help-direct-topic > a:hover {
            transform: translateX(2px) !important;
            border-color: rgba(83, 211, 205, .24) !important;
            background: rgba(63, 183, 178, .12) !important;
            color: #ffffff !important;
        }


html[dir="rtl"]
body.help-ui-2026.help-is-linkedin
#tabBlock-content
.help-direct-topic > a:hover {
    transform: translateX(-2px) !important;
}


body.help-ui-2026.help-is-linkedin
#tabBlock-content
.help-direct-topic > a.li_select,
body.help-ui-2026.help-is-linkedin
#tabBlock-content
.help-direct-topic > a.newpage.li_select {
    border-color: rgba(89, 215, 209, .34) !important;
    background: linear-gradient( 90deg, rgba(27, 159, 157, .42) 0%, rgba(31, 122, 151, .28) 100% ) !important;
    color: #ffffff !important;

}


html[dir="rtl"]
body.help-ui-2026.help-is-linkedin
#tabBlock-content
.help-direct-topic > a.li_select,
html[dir="rtl"]
body.help-ui-2026.help-is-linkedin
#tabBlock-content
.help-direct-topic > a.newpage.li_select {
    box-shadow: inset -3px 0 0 #62ddd7, 0 5px 14px rgba(3, 39, 45, .12) !important;
}


body.help-ui-2026.help-is-linkedin
#tabBlock-content
.help-direct-topic > a.li_select::before,
body.help-ui-2026.help-is-linkedin
#tabBlock-content
.help-direct-topic > a.newpage.li_select::before {
    border-color: #8be8e3 !important;
    background: #8be8e3 !important;
}


/* ==========================================================================
   6. MOBILE — SIDEBAR ONLY
   ========================================================================== */

@media (max-width: 768px) {

    body.help-ui-2026.help-is-linkedin
    #tabBlock-content
    .help-direct-topic > a:hover {
        transform: none !important;
    }
}


/* ==========================================================================
   VEBKO — LINKEDIN SHELL FIX ONLY
   This file intentionally styles ONLY the public Help shell/sidebar while
   LinkedIn post content keeps its original LinkedIn template/styles.
   ========================================================================== */


/* --------------------------------------------------------------------------
   LinkedIn direct topics in the sidebar
   -------------------------------------------------------------------------- */

body.help-ui-2026
#tabBlock-content
.help-direct-topic {
    margin: 4px 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
}


    body.help-ui-2026
    #tabBlock-content
    .help-direct-topic > a {
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        border: 1px solid rgba(255, 255, 255, .09) !important;
        border-radius: 9px !important;
        background: rgba(255, 255, 255, .055) !important;
        color: rgba(244, 255, 255, .84) !important;
        box-shadow: none !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.42 !important;
        text-decoration: none !important;
        transition: background .15s ease, border-color .15s ease, color .15s ease !important;
    }


        body.help-ui-2026
        #tabBlock-content
        .help-direct-topic > a::before {
            content: "";
            width: 6px !important;
            height: 6px !important;
            flex: 0 0 6px !important;
            margin: 0 !important;
            border: 1.5px solid #70c5e9 !important;
            border-radius: 50% !important;
            background: transparent !important;
        }


        body.help-ui-2026
        #tabBlock-content
        .help-direct-topic > a::after {
            display: none !important;
            content: none !important;
        }


        body.help-ui-2026
        #tabBlock-content
        .help-direct-topic > a:hover {
            border-color: rgba(83, 211, 205, .22) !important;
            background: rgba(69, 187, 182, .12) !important;
            color: #ffffff !important;
            box-shadow: none !important;
            transform: none !important;
        }


        /* --------------------------------------------------------------------------
   Selected LinkedIn topic
   No colored left/right line — only a clean filled state.
   -------------------------------------------------------------------------- */

        body.help-ui-2026
        #tabBlock-content
        .help-direct-topic > a.li_select,
        body.help-ui-2026
        #tabBlock-content
        .help-direct-topic > a.newpage.li_select {
            border-color: rgba(89, 215, 209, .28) !important;
            background: linear-gradient( 90deg, rgba(36, 162, 159, .28), rgba(37, 119, 151, .18) ) !important;
            color: #ffffff !important;
            box-shadow: none !important;
        }


            body.help-ui-2026
            #tabBlock-content
            .help-direct-topic > a.li_select::before,
            body.help-ui-2026
            #tabBlock-content
            .help-direct-topic > a.newpage.li_select::before {
                border-color: #86ded9 !important;
                background: #86ded9 !important;
            }





/* ==========================================================================
   VEBKO TOOLBAR PLAY MODAL
   ORIGINAL STYLE RESTORE
   Restores the Play Video / MP4-MP3-SRT-DOC modal to its pre-redesign look.
   ========================================================================== */


/* ==========================================================================
   MODAL BACKDROP
   ========================================================================== */

body.help-ui-2026
.help-toolbar-video-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    background: rgba(5, 18, 18, .58) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}


    body.help-ui-2026
    .help-toolbar-video-modal.is-open {
        display: flex !important;
    }


/* ==========================================================================
   MODAL BOX
   ========================================================================== */

body.help-ui-2026
.help-toolbar-video-content {
    position: relative !important;
    width: min(86vw, 540px) !important;
    max-width: min(86vw, 540px) !important;
    max-height: calc(100vh - 24px) !important;
    margin: auto !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 24px 60px rgba(2, 49, 44, .28) !important;
}


/* ==========================================================================
   CLOSE BUTTON
   ========================================================================== */

body.help-ui-2026
.help-toolbar-video-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 5 !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid rgba(16, 24, 40, .08) !important;
    border-radius: 10px !important;
    background: rgba(244, 247, 247, .96) !important;
    color: #173636 !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08) !important;
    font-size: 19px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}


/* ==========================================================================
   MODAL TITLE
   ========================================================================== */

body.help-ui-2026
.help-toolbar-video-title {
    width: 100% !important;
    min-height: 30px !important;
    padding: 5px 38px 3px 8px !important;
    box-sizing: border-box !important;
    color: #163535 !important;
    font-size: clamp(14px, 1.7vw, 17px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: center !important;
}


/* ==========================================================================
   VIDEO PLAYER WRAPPER
   ========================================================================== */

body.help-ui-2026
.help-toolbar-video-player-wrap {
    width: 100% !important;
    max-width: 100% !important;
    display: none !important;
    margin: 0 auto !important;
    text-align: center !important;
    align-self: center !important;
    box-sizing: border-box !important;
}


    body.help-ui-2026
    .help-toolbar-video-player-wrap.is-visible {
        display: block !important;
    }


/* ==========================================================================
   VIDEO PLAYER
   ========================================================================== */

body.help-ui-2026
.help-toolbar-video-player-box {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #000000 !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .18) !important;
}


body.help-ui-2026
.help-toolbar-video-player {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    background: #000000 !important;
    object-fit: contain !important;
}


/* ==========================================================================
   PLAYER NOTE
   ========================================================================== */

body.help-ui-2026
.help-toolbar-video-note {
    margin-top: 4px !important;
    color: #5e7373 !important;
    font-size: 8px !important;
    line-height: 1.08 !important;
    text-align: center !important;
}


/* ==========================================================================
   NO VIDEO MESSAGE
   ========================================================================== */

body.help-ui-2026
.help-toolbar-video-unavailable {
    width: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    background: #f7fafa !important;
    color: #6b7777 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
}


/* ==========================================================================
   RESOURCE TABLE WRAPPER
   ========================================================================== */

body.help-ui-2026
.help-toolbar-resource-table-scroll {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
}


/* ==========================================================================
   RESOURCE TABLE
   ========================================================================== */

body.help-ui-2026
#TableDefultDownloadFilesVideo {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 300px !important;
    margin: 0 auto !important;
    border-collapse: separate !important;
    border-spacing: 3px !important;
    table-layout: fixed !important;
    background: transparent !important;
}


    /* ==========================================================================
   TABLE CELLS
   ========================================================================== */

    body.help-ui-2026
    #TableDefultDownloadFilesVideo th,
    body.help-ui-2026
    #TableDefultDownloadFilesVideo td {
        min-width: 0 !important;
        padding: 5px 4px !important;
        border: none !important;
        border-radius: 8px !important;
        background: linear-gradient( 180deg, #ffffff, #f5fbfb ) !important;
        color: #143232 !important;
        text-align: center !important;
        vertical-align: middle !important;
        box-shadow: 0 5px 12px rgba(2, 49, 44, .08) !important;
        font-size: 8px !important;
        font-weight: 700 !important;
        line-height: 1.02 !important;
        overflow-wrap: anywhere !important;
    }


    /* ==========================================================================
   TABLE HEADER
   ========================================================================== */

    body.help-ui-2026
    #TableDefultDownloadFilesVideo th {
        background: linear-gradient( 135deg, rgba(25, 181, 180, .16), rgba(13, 143, 142, .20) ) !important;
        color: #0d4e4d !important;
    }


    /* ==========================================================================
   DOWNLOAD BUTTON
   ========================================================================== */

    body.help-ui-2026
    #TableDefultDownloadFilesVideo a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 7px !important;
        background: linear-gradient( 135deg, rgba(25, 181, 180, .14), rgba(13, 143, 142, .18) ) !important;
        color: #0f7f7e !important;
        box-shadow: 0 5px 12px rgba(25, 181, 180, .12) !important;
        font-size: 7px !important;
        text-decoration: none !important;
    }


    /* ==========================================================================
   RESOURCE ICON
   ========================================================================== */

    body.help-ui-2026
    #TableDefultDownloadFilesVideo
    .help-toolbar-resource-icon {
        display: block !important;
        width: 12px !important;
        height: 12px !important;
        margin: 0 auto !important;
        overflow: visible !important;
        pointer-events: none !important;
    }


    body.help-ui-2026
    #TableDefultDownloadFilesVideo
    .help-toolbar-resource-icon-download {
        color: #0f7f7e !important;
    }


    body.help-ui-2026
    #TableDefultDownloadFilesVideo
    a:hover
    .help-toolbar-resource-icon-download {
        color: #075f5e !important;
    }


    /* ==========================================================================
   MISSING RESOURCE X
   ========================================================================== */

    body.help-ui-2026
    #TableDefultDownloadFilesVideo
    .help-toolbar-resource-missing {
        color: #b45f5f !important;
        font-size: 9px !important;
    }


/* ==========================================================================
   LOCK DOCUMENT WHILE MODAL IS OPEN
   ========================================================================== */

html.help-modal-open,
body.help-modal-open {
    overflow: hidden !important;
}


/* ==========================================================================
   SMALL DESKTOP / TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    body.help-ui-2026
    .help-toolbar-video-modal {
        padding: 8px !important;
    }


    body.help-ui-2026
    .help-toolbar-video-content {
        width: min(88vw, 510px) !important;
        max-width: min(88vw, 510px) !important;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {

    body.help-ui-2026
    .help-toolbar-video-modal {
        padding: 6px !important;
    }


    body.help-ui-2026
    .help-toolbar-video-content {
        width: min(94vw, 370px) !important;
        max-width: min(94vw, 370px) !important;
        max-height: calc(100vh - 12px) !important;
        padding: 7px !important;
        border-radius: 14px !important;
        gap: 4px !important;
    }


    body.help-ui-2026
    .help-toolbar-video-close {
        width: 26px !important;
        height: 26px !important;
        top: 6px !important;
        right: 6px !important;
        font-size: 17px !important;
    }


    body.help-ui-2026
    .help-toolbar-video-title {
        min-height: 27px !important;
        padding-right: 34px !important;
        font-size: 11px !important;
    }


    body.help-ui-2026
    #TableDefultDownloadFilesVideo {
        border-spacing: 2px !important;
    }


        body.help-ui-2026
        #TableDefultDownloadFilesVideo th,
        body.help-ui-2026
        #TableDefultDownloadFilesVideo td {
            padding: 3px 2px !important;
            font-size: 6.5px !important;
            line-height: 1 !important;
        }


        body.help-ui-2026
        #TableDefultDownloadFilesVideo a {
            width: 15px !important;
            height: 15px !important;
            font-size: 7px !important;
        }
}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    body.help-ui-2026
    .help-toolbar-video-modal {
        padding: 4px !important;
    }


    body.help-ui-2026
    .help-toolbar-video-content {
        width: min(96vw, 320px) !important;
        max-width: min(96vw, 320px) !important;
        max-height: calc(100vh - 8px) !important;
        padding: 6px !important;
        border-radius: 12px !important;
    }


    body.help-ui-2026
    .help-toolbar-video-title {
        font-size: 10px !important;
    }


    body.help-ui-2026
    #TableDefultDownloadFilesVideo th,
    body.help-ui-2026
    #TableDefultDownloadFilesVideo td {
        padding: 2px 1px !important;
        font-size: 5.7px !important;
    }


    body.help-ui-2026
    #TableDefultDownloadFilesVideo a {
        width: 13px !important;
        height: 13px !important;
        font-size: 6px !important;
    }
}



/* ==========================================================================
   HEADER LANGUAGE — RTL ORDER FIX
   Keep header controls in the same physical position for all languages.
   ========================================================================== */

/* Header layout must always stay LTR:
   Menu -> Language -> ... -> Logo
*/
body.help-ui-2026 .menu-help {
    direction: ltr !important;
}


/* Language control itself must never reverse */
body.help-ui-2026 .lang_div {
    direction: ltr !important;
    flex-direction: row !important;
}


/* Icon always remains on the LEFT side */
body.help-ui-2026 .lang_icon {
    order: 0 !important;
    flex-shrink: 0 !important;
}


/* Select always remains after the icon */
body.help-ui-2026 .lang_div .select-style {
    order: 1 !important;
}


/* Persian:
   Keep the physical layout LTR so the native dropdown arrow
   and icon positions do not move, but align Persian text correctly.
*/
html[dir="rtl"]
body.help-ui-2026
.lang_div .select-style {
    direction: ltr !important;
    text-align: right !important;
    padding-left: 7px !important;
    padding-right: 28px !important;
}


    /* Persian text inside options still renders naturally */
    html[dir="rtl"]
    body.help-ui-2026
    .lang_div .select-style option {
        unicode-bidi: plaintext;
    }




/* ==========================================================================
   TOPIC HEADER — TITLE BELOW DOCUMENTATION BADGE
   + CLEAN MOBILE LAYOUT
   ========================================================================== */


/* ==========================================================================
   DESKTOP / GENERAL
   Make TECHNICAL DOCUMENTATION a separate row
   ========================================================================== */

body.help-ui-2026
.help-standard-topic-seo-title::before {
    display: flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;
    vertical-align: initial !important;
}


/* Topic title must naturally occupy its own row */

body.help-ui-2026
.help-standard-topic-seo-title {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}


/* Persian badge */

html[dir="rtl"]
body.help-ui-2026
.help-standard-topic-seo-title::before {
    margin: 0 0 14px 0 !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    /* ----------------------------------------------------------
       Change article to an ordered vertical layout.

       HTML order currently is:
       1. Action buttons
       2. H1 title
       3. Content

       We visually change it to:
       1. H1
       2. Action buttons
       3. Content
       ---------------------------------------------------------- */

    body.help-ui-2026
    .help-standard-topic {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
    }


    /* ----------------------------------------------------------
       HEADER CARD
       ---------------------------------------------------------- */

    body.help-ui-2026
    .help-standard-topic-seo-title {
        order: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 0 10px 0 !important;
        padding: 18px 16px 18px !important;
        border-radius: 16px !important;
        font-size: clamp( 22px, 7vw, 31px ) !important;
        line-height: 1.18 !important;
        letter-spacing: -.025em !important;
        white-space: normal !important;
        overflow: hidden !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }


    /* Persian */

    html[dir="rtl"]
    body.help-ui-2026
    .help-standard-topic-seo-title {
        padding: 18px 16px 18px !important;
        letter-spacing: 0 !important;
    }


    /* ----------------------------------------------------------
       DOCUMENTATION BADGE
       ---------------------------------------------------------- */




    html[dir="rtl"]
    body.help-ui-2026
    .help-standard-topic-seo-title::before {
        margin: 0 0 11px 0 !important;
        font-size: 9px !important;
    }


    /* ----------------------------------------------------------
       ACTION BUTTONS

       They are before H1 in the HTML, but order:2 makes
       them appear AFTER the title card on mobile.
       ---------------------------------------------------------- */

    body.help-ui-2026
    .help-topic-action-bar {
        order: 2 !important;
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin: 0 0 10px 0 !important;
        padding: 0 2px !important;
    }


        /* Buttons slightly smaller on phones */

        body.help-ui-2026
        .help-topic-action-bar
        .badge {
            width: 37px !important;
            height: 37px !important;
            flex: 0 0 37px !important;
            border-radius: 10px !important;
        }


    body.help-ui-2026
    .help-topic-share-icon {
        width: 19px !important;
        height: 19px !important;
    }


    body.help-ui-2026
    .help-ui-action-svg {
        width: 19px !important;
        height: 19px !important;
    }


    /* ----------------------------------------------------------
       CONTENT
       ---------------------------------------------------------- */

    body.help-ui-2026
    .help-structured-content {
        order: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}


/* ==========================================================================
   VERY SMALL PHONES
   ========================================================================== */

@media (max-width: 480px) {

    body.help-ui-2026
    .help-standard-topic-seo-title {
        padding: 16px 14px !important;
        font-size: clamp( 21px, 7.4vw, 28px ) !important;
        line-height: 1.2 !important;
    }


    html[dir="rtl"]
    body.help-ui-2026
    .help-standard-topic-seo-title {
        padding: 16px 14px !important;
    }


    body.help-ui-2026
    .help-standard-topic-seo-title::before {
        margin-bottom: 9px !important;
        padding: 4px 8px !important;
        font-size: 7.5px !important;
        letter-spacing: .10em !important;
    }


    html[dir="rtl"]
    body.help-ui-2026
    .help-standard-topic-seo-title::before {
        font-size: 9px !important;
        letter-spacing: 0 !important;
    }


    body.help-ui-2026
    .help-topic-action-bar {
        justify-content: flex-start !important;
        gap: 5px !important;
        padding-inline: 2px !important;
    }


        body.help-ui-2026
        .help-topic-action-bar
        .badge {
            width: 35px !important;
            height: 35px !important;
            flex-basis: 35px !important;
        }
}



/* ==========================================================================
   FINAL MOBILE TOPIC HEADER FIX
   Fix collapsed SEO title on mobile
   ========================================================================== */

@media (max-width: 768px) {

    /* ----------------------------------------------------------
       ARTICLE ORDER
       ---------------------------------------------------------- */

    body.help-body.help-ui-2026
    .help-standard-topic {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* ----------------------------------------------------------
       TITLE CARD
       IMPORTANT:
       legacy SEO CSS can leave height:1px;
       therefore height:auto is required explicitly.
       ---------------------------------------------------------- */

    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        order: 1 !important;
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 0 10px 0 !important;
        padding: 18px 16px 20px 16px !important;
        overflow: visible !important;
        clip: auto !important;
        clip-path: none !important;
        white-space: normal !important;


        color: var(--vh-text) !important;
        font-size: clamp(23px, 6.5vw, 30px) !important;
        font-weight: 800 !important;
        line-height: 1.22 !important;
        letter-spacing: -.025em !important;
        text-align: start !important;
        text-indent: 0 !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;

        border: 1px solid #c9d7da !important;
        border-radius: var(--vh-r20) !important;
        background: linear-gradient(115deg, #edf8f7 0%, #ddefed 50%, #cef0f3 100%) !important;
        box-shadow: 0 6px 18px rgba(16, 49, 57, .07);
    }


    /* Persian */

    html[dir="rtl"]
    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 18px 16px 20px 16px !important;
        letter-spacing: 0 !important;
        text-align: right !important;
    }


    /* ----------------------------------------------------------
       TECHNICAL DOCUMENTATION BADGE
       Must occupy its own line.
       ---------------------------------------------------------- */

    body.help-body.help-ui-2026
    .help-standard-topic-seo-title::before {
        content: "Technical Documentation";
        display: inline-flex;
        align-items: center;
        min-height: 35px;
        margin-bottom: 16px;
        padding: 4px 10px;
        border: 1px solid rgb(49 121 125 / 39%);
        border-radius: 999px;
        background: rgb(107 189 189 / 29%);
        color: #1a716e;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .02em;
        vertical-align: middle;
        backdrop-filter: blur(10px);
    }


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .help-standard-topic-seo-title::before {
        content: "مستندات فنی" !important;
        margin: 0 0 12px auto !important;
        font-size: 9px !important;
        letter-spacing: 0 !important;
    }


    /* ----------------------------------------------------------
       LEFT / RIGHT ACCENT BAR
       ---------------------------------------------------------- */

    body.help-body.help-ui-2026
    .help-standard-topic-seo-title::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        bottom: auto !important;
        inset-inline-start: 0 !important;
        width: 4px !important;
        height: 100% !important;
        border-radius: 16px 0 0 16px !important;

    }


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .help-standard-topic-seo-title::after {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        border-radius: 0 16px 16px 0 !important;
    }


    /* ----------------------------------------------------------
       ACTION BUTTONS
       Keep them cleanly below the header on mobile
       ---------------------------------------------------------- */

    body.help-body.help-ui-2026
    .help-topic-action-bar {
        order: 2 !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        inset: auto !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        transform: none !important;
    }


        body.help-body.help-ui-2026
        .help-topic-action-bar
        .badge {
            width: 37px !important;
            height: 37px !important;
            min-width: 37px !important;
            flex: 0 0 37px !important;
            margin: 0 !important;
            border-radius: 10px !important;
        }


    /* ----------------------------------------------------------
       CONTENT
       ---------------------------------------------------------- */

    body.help-body.help-ui-2026
    .help-structured-content {
        order: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        height: auto !important;
        min-height: 0 !important;
        padding: 15px 14px 17px 14px !important;
        font-size: clamp(21px, 6.8vw, 27px) !important;
        line-height: 1.24 !important;
    }


        body.help-body.help-ui-2026
        .help-standard-topic-seo-title::before {
            margin-bottom: 10px !important;
            font-size: 7px !important;
        }


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .help-standard-topic-seo-title::before {
        font-size: 9px !important;
    }


    body.help-body.help-ui-2026
    .help-topic-action-bar {
        justify-content: flex-end !important;
        gap: 5px !important;
    }


        body.help-body.help-ui-2026
        .help-topic-action-bar
        .badge {
            width: 35px !important;
            height: 35px !important;
            min-width: 35px !important;
            flex-basis: 35px !important;
        }
}

/* ==========================================================================
   MOBILE HEADER ACTIONS INSIDE HEADER
   Put toolbar icons inside the topic header card
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026
    .help-standard-topic {
        position: relative !important;
    }

    /* هدر */
    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        position: relative !important;
        display: block !important;
        /* بالا و راست جا برای آیکون‌ها */
        padding-top: 18px !important;
        padding-right: 176px !important;
        padding-bottom: 20px !important;
        padding-left: 16px !important;
        margin: 0 0 12px 0 !important;
    }

    /* در RTL */
    html[dir="rtl"]
    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        padding-right: 16px !important;
        padding-left: 176px !important;
    }

    /* نوار آیکون‌ها داخل خود هدر */
    body.help-body.help-ui-2026
    .help-topic-action-bar {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        z-index: 8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        order: unset !important;
        transform: none !important;
    }

    /* RTL */
    html[dir="rtl"]
    body.help-body.help-ui-2026
    .help-topic-action-bar {
        right: auto !important;
        left: 16px !important;
        justify-content: flex-start !important;
    }

    body.help-body.help-ui-2026
    .help-topic-action-bar .badge,
    body.help-body.help-ui-2026
    .help-topic-action-bar .help-topic-action-btn,
    body.help-body.help-ui-2026
    .help-topic-action-bar a,
    body.help-body.help-ui-2026
    .help-topic-action-bar button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex: 0 0 38px !important;
        margin: 0 !important;
        border-radius: 10px !important;
    }

    /* محتوا بیاید زیر هدر */
    body.help-body.help-ui-2026
    .help-structured-content {
        margin-top: 0 !important;
    }
}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        padding-top: 72px !important;
        padding-right: 14px !important;
        padding-left: 14px !important;
        padding-bottom: 18px !important;
    }

    html[dir="rtl"]
    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    body.help-body.help-ui-2026
    .help-topic-action-bar {
        top: 14px !important;
        right: 14px !important;
        left: 14px !important;
        justify-content: flex-end !important;
        gap: 5px !important;
    }

    html[dir="rtl"]
    body.help-body.help-ui-2026
    .help-topic-action-bar {
        right: 14px !important;
        left: 14px !important;
        justify-content: flex-start !important;
    }

    body.help-body.help-ui-2026
    .help-topic-action-bar .badge,
    body.help-body.help-ui-2026
    .help-topic-action-bar .help-topic-action-btn,
    body.help-body.help-ui-2026
    .help-topic-action-bar a,
    body.help-body.help-ui-2026
    .help-topic-action-bar button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        flex: 0 0 36px !important;
    }
}



/* ==========================================================================
   FINAL IMAGE LIGHTBOX FIX
   Center relative to RIGHT TOPIC PANEL — not whole viewport
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Overlay فقط روی ناحیه نمایش Topic
   -------------------------------------------------------------------------- */

body.help-body.help-ui-2026
#helpImageLightbox {
    position: fixed !important;
    /* Header بالا حفظ شود */
    top: var(--vh-header-h) !important;
    /* مهم:
       Modal از بعد Sidebar + Splitter شروع شود
       بنابراین مرکز آن = مرکز واقعی صفحه Topic
    */
    left: calc(var(--vbk-sidebar-w) + 6px) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 24px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: rgba(10, 31, 36, .58) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    box-sizing: border-box !important;
}


    /* وقتی Lightbox باز است */

    body.help-body.help-ui-2026
    #helpImageLightbox.is-open {
        display: flex !important;
    }


    /* --------------------------------------------------------------------------
   2. کادر گرد اصلی تصویر
   -------------------------------------------------------------------------- */

    body.help-body.help-ui-2026
    #helpImageLightbox
    .help-image-lightbox-content {
        position: relative !important;
        width: min(88%, 1120px) !important;
        max-width: min(88%, 1120px) !important;
        height: auto !important;
        max-height: calc(100% - 36px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin: auto !important;
        padding: 12px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, .58) !important;
        border-radius: 24px !important;
        background: linear-gradient( 180deg, #ffffff 0%, #f3f8f9 100% ) !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .28) !important;
        box-sizing: border-box !important;
    }


/* --------------------------------------------------------------------------
   3. خود عکس
   -------------------------------------------------------------------------- */

body.help-body.help-ui-2026
#helpImageLightboxImage {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(78vh - var(--vh-header-h)) !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}


/* --------------------------------------------------------------------------
   4. عنوان زیر عکس
   -------------------------------------------------------------------------- */

body.help-body.help-ui-2026
#helpImageLightboxTitle {
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 8px 2px !important;
    color: var(--vh-text-2) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}


/* --------------------------------------------------------------------------
   5. دکمه Close داخل ناحیه Topic
   -------------------------------------------------------------------------- */

body.help-body.help-ui-2026
#helpImageLightboxClose {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 10 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .65) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #173139 !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16) !important;
    font-size: 25px !important;
    cursor: pointer !important;
}


/* ==========================================================================
   MOBILE
   Sidebar روی موبایل Overlay است و بسته می‌شود،
   بنابراین Lightbox باید کل عرض محتوای موبایل را بگیرد.
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026
    #helpImageLightbox {
        top: var(--vh-header-h) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        padding: 12px !important;
    }


        body.help-body.help-ui-2026
        #helpImageLightbox
        .help-image-lightbox-content {
            width: 94% !important;
            max-width: 94% !important;
            max-height: calc(100% - 20px) !important;
            padding: 8px !important;
            border-radius: 18px !important;
        }


    body.help-body.help-ui-2026
    #helpImageLightboxImage {
        max-width: 100% !important;
        max-height: 68vh !important;
        border-radius: 12px !important;
    }


    body.help-body.help-ui-2026
    #helpImageLightboxClose {
        top: 10px !important;
        right: 10px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 22px !important;
    }
}


/* ==========================================================================
   RTL CLOSE POSITION
   ========================================================================== */

html[dir="rtl"]
body.help-body.help-ui-2026
#helpImageLightboxClose {
    right: auto !important;
    left: 18px !important;
}


@media (max-width: 768px) {

    html[dir="rtl"]
    body.help-body.help-ui-2026
    #helpImageLightboxClose {
        right: auto !important;
        left: 10px !important;
    }
}


/* ==========================================================================
   FINAL TOPIC HEADER — AUTOMATIC HEIGHT
   Header grows automatically for long/multiline topic titles
   ========================================================================== */

body.help-body.help-ui-2026
.help-standard-topic-seo-title {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    /* IMPORTANT */
    height: auto !important;
    min-height: 146px !important;
    max-height: none !important;
    box-sizing: border-box !important;
    padding: 26px 210px 28px 28px !important;
    margin: 0 0 14px 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.18 !important;
}


    /* Technical Documentation badge stays on its own row */

    body.help-body.help-ui-2026
    .help-standard-topic-seo-title::before {

    }


/* RTL */

html[dir="rtl"]
body.help-body.help-ui-2026
.help-standard-topic-seo-title {
    height: auto !important;
    min-height: 146px !important;
    max-height: none !important;
    padding: 26px 28px 28px 210px !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1100px) {

    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        height: auto !important;
        min-height: 140px !important;
        max-height: none !important;
        padding: 24px 190px 26px 24px !important;
        font-size: clamp(27px, 3.8vw, 37px) !important;
    }


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        padding: 24px 24px 26px 190px !important;
    }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        height: auto !important;
        /*
           Do NOT force a fixed height on mobile.
           Header grows with the title.
        */
        min-height: 0 !important;
        max-height: none !important;
        padding: 18px 16px 20px 16px !important;
        font-size: clamp(23px, 6.5vw, 24px) !important;
        line-height: 1.22 !important;
        overflow: visible !important;
    }


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 18px 16px 20px 16px !important;
    }
}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    body.help-body.help-ui-2026
    .help-standard-topic-seo-title {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 15px 14px 18px 14px !important;
        font-size: clamp(21px, 6.8vw, 27px) !important;
        line-height: 1.24 !important;
    }
}


/* ==========================================================================
   FINAL HEADER RTL / LTR MIRROR FIX
   English : Menu + Language LEFT  / Logo RIGHT
   Persian : Menu + Language RIGHT / Logo LEFT
   Desktop + Mobile
   ========================================================================== */


/* ==========================================================================
   LTR — EN / DE / ...
   ========================================================================== */

html[dir="ltr"]
body.help-body.help-ui-2026
.menu-help {
    direction: ltr !important;
    flex-direction: row !important;
}


/* Logo goes to physical RIGHT */

html[dir="ltr"]
body.help-body.help-ui-2026
.log-in-menu {
    margin-left: auto !important;
    margin-right: 0 !important;
}


/* Language internal direction */

html[dir="ltr"]
body.help-body.help-ui-2026
.lang_div {
    direction: ltr !important;
    flex-direction: row !important;
}


html[dir="ltr"]
body.help-body.help-ui-2026
.lang_icon {
    order: 0 !important;
}


html[dir="ltr"]
body.help-body.help-ui-2026
.lang_div .select-style {
    order: 1 !important;
    direction: ltr !important;
    text-align: left !important;
}


/* ==========================================================================
   RTL — FARSI
   ========================================================================== */

html[dir="rtl"]
body.help-body.help-ui-2026
.menu-help {
    /*
       Important:
       source order remains unchanged,
       but flex starts from RIGHT.
    */
    direction: rtl !important;
    flex-direction: row !important;
}


/* Logo goes to physical LEFT */

html[dir="rtl"]
body.help-body.help-ui-2026
.log-in-menu {
    margin-right: auto !important;
    margin-left: 0 !important;
}


/* Persian language control also mirrors */

html[dir="rtl"]
body.help-body.help-ui-2026
.lang_div {
    direction: rtl !important;
    flex-direction: row !important;
}


/* Language icon on the RIGHT side in Persian */

html[dir="rtl"]
body.help-body.help-ui-2026
.lang_icon {
    order: 0 !important;
    flex-shrink: 0 !important;
}


/* Persian text */

html[dir="rtl"]
body.help-body.help-ui-2026
.lang_div .select-style {
    order: 1 !important;
    direction: rtl !important;
    text-align: right !important;
    padding-right: 7px !important;
    padding-left: 28px !important;
}


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .lang_div .select-style option {
        direction: rtl !important;
        text-align: right !important;
    }


/* ==========================================================================
   MENU BUTTON RTL
   Make hamburger inner lines mirror correctly as well
   ========================================================================== */

html[dir="rtl"]
body.help-body.help-ui-2026
.menu-Button {
    direction: rtl !important;
}


html[dir="ltr"]
body.help-body.help-ui-2026
.menu-Button {
    direction: ltr !important;
}


/* ==========================================================================
   HEADER ACCENT LINE
   LTR = LEFT
   RTL = RIGHT
   ========================================================================== */

html[dir="ltr"]
body.help-body.help-ui-2026
.menu-help::before {
    left: 0 !important;
    right: auto !important;
}


html[dir="rtl"]
body.help-body.help-ui-2026
.menu-help::before {
    left: auto !important;
    right: 0 !important;
}


/* ==========================================================================
   MOBILE
   Same mirrored structure, only compact dimensions
   ========================================================================== */

@media (max-width: 768px) {

    /* ---------- LTR ---------- */

    html[dir="ltr"]
    body.help-body.help-ui-2026
    .menu-help {
        direction: ltr !important;
        flex-direction: row !important;
    }


    html[dir="ltr"]
    body.help-body.help-ui-2026
    .log-in-menu {
        margin-left: auto !important;
        margin-right: 0 !important;
    }


    /* ---------- RTL ---------- */

    html[dir="rtl"]
    body.help-body.help-ui-2026
    .menu-help {
        direction: rtl !important;
        flex-direction: row !important;
    }


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .log-in-menu {
        margin-right: auto !important;
        margin-left: 0 !important;
    }


    /*
       Mobile CSS currently hides .lang_icon.
       Keep that behavior; only language text direction changes.
    */

    html[dir="rtl"]
    body.help-body.help-ui-2026
    .lang_div .select-style {
        direction: rtl !important;
        text-align: right !important;
        padding-right: 10px !important;
        padding-left: 26px !important;
    }


    html[dir="ltr"]
    body.help-body.help-ui-2026
    .lang_div .select-style {
        direction: ltr !important;
        text-align: left !important;
        padding-left: 10px !important;
        padding-right: 26px !important;
    }
}


/* =========================================
   RTL fix for language dropdown arrow
   ========================================= */

html[dir="rtl"] body.help-body.help-ui-2026 .lang_div {
    direction: rtl !important;
}

    html[dir="rtl"] body.help-body.help-ui-2026 .lang_div .select-style {
        direction: rtl !important;
        text-align: right !important;
        /* فاصله متن از راست */
        padding-right: 12px !important;
        /* جا برای فلش در سمت چپ */
        padding-left: 34px !important;
        /* اگر فلش با background ساخته شده باشد */
        background-position: left 12px center !important;
    }

    /* اگر فلش با pseudo-element ساخته شده باشد */
    html[dir="rtl"] body.help-body.help-ui-2026 .lang_div::after,
    html[dir="rtl"] body.help-body.help-ui-2026 .select-style-wrap::after,
    html[dir="rtl"] body.help-body.help-ui-2026 .language-select-wrap::after {
        left: 12px !important;
        right: auto !important;
    }

    html[dir="rtl"] body.help-body.help-ui-2026 .lang_div select {
        text-align: right !important;
        padding-right: 12px !important;
        padding-left: 34px !important;
        background-position: left 12px center !important;
    }


/* ==========================================================================
   FINAL RTL/LTR SELECT ARROW FIX
   Language + Category
   ========================================================================== */


/* ==========================================================================
   REMOVE NATIVE BROWSER ARROW
   ========================================================================== */

body.help-body.help-ui-2026
.lang_div .select-style,
body.help-body.help-ui-2026
.categury_div .select-style {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    cursor: pointer !important;
}


/* ==========================================================================
   LANGUAGE SELECT WRAPPER
   ========================================================================== */

body.help-body.help-ui-2026
.lang_div {
    position: relative !important;
}


    /* Custom arrow */

    body.help-body.help-ui-2026
    .lang_div::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        width: 7px !important;
        height: 7px !important;
        border-right: 1.7px solid #637b82 !important;
        border-bottom: 1.7px solid #637b82 !important;
        transform: translateY(-65%) rotate(45deg) !important;
        pointer-events: none !important;
        z-index: 10 !important;
    }


/* ==========================================================================
   LANGUAGE — LTR
   English / German
   ========================================================================== */

html[dir="ltr"]
body.help-body.help-ui-2026
.lang_div::after {
    right: 13px !important;
    left: auto !important;
}


html[dir="ltr"]
body.help-body.help-ui-2026
.lang_div .select-style {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 10px !important;
    padding-right: 34px !important;
}


/* ==========================================================================
   LANGUAGE — RTL
   Persian
   ========================================================================== */

html[dir="rtl"]
body.help-body.help-ui-2026
.lang_div::after {
    left: 13px !important;
    right: auto !important;
}


html[dir="rtl"]
body.help-body.help-ui-2026
.lang_div .select-style {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 10px !important;
    /* Space for custom arrow */
    padding-left: 34px !important;
}


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .lang_div .select-style option {
        direction: rtl !important;
        text-align: right !important;
    }


/* ==========================================================================
   CATEGORY SELECT
   ========================================================================== */

body.help-body.help-ui-2026
.categury_div {
    position: relative !important;
}


    /* Custom category arrow */

    body.help-body.help-ui-2026
    .categury_div::after {
        content: "" !important;
        position: absolute !important;
        width: 7px !important;
        height: 7px !important;
        /*
       Category box has:
       15px bottom padding
       42px select height

       This centers the arrow inside the select.
    */
        bottom: 32px !important;
        border-right: 1.7px solid #637b82 !important;
        border-bottom: 1.7px solid #637b82 !important;
        transform: rotate(45deg) !important;
        pointer-events: none !important;
        z-index: 10 !important;
    }


/* ==========================================================================
   CATEGORY — LTR
   ========================================================================== */

html[dir="ltr"]
body.help-body.help-ui-2026
.categury_div::after {
    right: 30px !important;
    left: auto !important;
}


html[dir="ltr"]
body.help-body.help-ui-2026
.categury_div .select-style {
    direction: ltr !important;
    text-align: left !important;
    padding-left: 13px !important;
    padding-right: 38px !important;
}


/* ==========================================================================
   CATEGORY — RTL
   ========================================================================== */

html[dir="rtl"]
body.help-body.help-ui-2026
.categury_div::after {
    left: 30px !important;
    right: auto !important;
}


html[dir="rtl"]
body.help-body.help-ui-2026
.categury_div .select-style {
    direction: rtl !important;
    text-align: right !important;
    padding-right: 13px !important;
    /* Space for arrow on LEFT */
    padding-left: 38px !important;
}


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .categury_div .select-style option {
        direction: rtl !important;
        text-align: right !important;
    }


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 768px) {

    /* Language arrow */

    html[dir="ltr"]
    body.help-body.help-ui-2026
    .lang_div::after {
        right: 11px !important;
    }


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .lang_div::after {
        left: 11px !important;
    }


    /* Category arrow */

    html[dir="ltr"]
    body.help-body.help-ui-2026
    .categury_div::after {
        right: 27px !important;
    }


    html[dir="rtl"]
    body.help-body.help-ui-2026
    .categury_div::after {
        left: 27px !important;
    }
}


/* ==========================================================================
   FINAL RTL MOBILE SIDEBAR POSITION FIX
   Persian sidebar must OPEN and STAY on the RIGHT
   ========================================================================== */

@media (max-width: 768px) {

    /* ----------------------------------------------------------
       RTL / Persian
       Sidebar physical position = RIGHT
       ---------------------------------------------------------- */

    html[dir="rtl"]
    body.help-body.help-ui-2026
    .panel-left {
        left: auto !important;
        right: 0 !important;
        /*
           Logical properties must agree with physical properties.
           In RTL:
           inline-start = RIGHT
           inline-end   = LEFT
        */
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: translateX(0) !important;
        border-left: 1px solid rgba(255,255,255,.10) !important;
        border-right: 0 !important;
        box-shadow: -18px 0 44px rgba(4,41,47,.27) !important;
    }


    /* ----------------------------------------------------------
       RTL CLOSED STATE
       Hide toward the RIGHT
       ---------------------------------------------------------- */

    html[dir="rtl"]
    body.help-body.help-ui-2026.sidebar-collapsed
    .panel-left {
        left: auto !important;
        right: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        transform: translateX(calc(100% + 22px)) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }


    /* ----------------------------------------------------------
       LTR remains LEFT
       ---------------------------------------------------------- */

    html[dir="ltr"]
    body.help-body.help-ui-2026
    .panel-left {
        left: 0 !important;
        right: auto !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
    }


    html[dir="ltr"]
    body.help-body.help-ui-2026.sidebar-collapsed
    .panel-left {
        transform: translateX(calc(-100% - 22px)) !important;
    }
}


/* ==========================================================================
   DESKTOP SIDEBAR — SMOOTH OPEN / CLOSE ANIMATION
   LTR  : closes toward LEFT
   RTL  : closes toward RIGHT
   Mobile behavior remains unchanged
   ========================================================================== */

@media (min-width: 769px) {

    /* ======================================================================
       SIDEBAR — OPEN STATE
       ====================================================================== */

    body.help-body.help-ui-2026
    .panel-left {
        display: flex !important;
        width: var(--vbk-sidebar-w) !important;
        min-width: 320px !important;
        max-width: 700px !important;
        flex: 0 0 var(--vbk-sidebar-w) !important;
        margin-inline-start: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
        transition: margin-inline-start .28s cubic-bezier(.4, 0, .2, 1), opacity .20s ease, box-shadow .28s ease !important;
        will-change: margin-inline-start, opacity;
    }


    /* ======================================================================
       SIDEBAR — CLOSED STATE
       
       Important:
       We do NOT use display:none.
       A negative logical margin moves the sidebar outside AND releases
       its layout space at the same time.
       ====================================================================== */

    body.help-body.help-ui-2026.sidebar-collapsed
    .panel-left {
        display: flex !important;
        width: var(--vbk-sidebar-w) !important;
        min-width: 320px !important;
        max-width: 700px !important;
        flex: 0 0 var(--vbk-sidebar-w) !important;
        margin-inline-start: calc(0px - var(--vbk-sidebar-w)) !important;
        opacity: 0 !important;
        visibility: visible !important;
        pointer-events: none !important;
        transform: translateX(0) !important;
        box-shadow: none !important;
    }


    /* ======================================================================
       SPLITTER — OPEN STATE
       ====================================================================== */

    body.help-body.help-ui-2026
    .splitter {
        display: block !important;
        width: 6px !important;
        min-width: 6px !important;
        max-width: 6px !important;
        flex: 0 0 6px !important;
        opacity: 1 !important;
        overflow: hidden !important;
        transition: width .28s cubic-bezier(.4, 0, .2, 1), min-width .28s cubic-bezier(.4, 0, .2, 1), max-width .28s cubic-bezier(.4, 0, .2, 1), flex-basis .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease !important;
    }


    /* ======================================================================
       SPLITTER — CLOSED STATE
       ====================================================================== */

    body.help-body.help-ui-2026.sidebar-collapsed
    .splitter {
        display: block !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }


    /* ======================================================================
       RIGHT CONTENT PANEL
       
       Remove old desktop collapse rules such as:
       width:100%
       flex:1 1 100%
       
       Flexbox will now expand/shrink the content continuously while
       the sidebar animation is running.
       ====================================================================== */

    body.help-body.help-ui-2026
    .panel-right,
    body.help-body.help-ui-2026.sidebar-collapsed
    .panel-right {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }


    /* ======================================================================
       LTR
       Sidebar leaves toward physical LEFT
       ====================================================================== */

    html[dir="ltr"]
    body.help-body.help-ui-2026
    .panel-left {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    html[dir="ltr"]
    body.help-body.help-ui-2026.sidebar-collapsed
    .panel-left {
        margin-left: calc(0px - var(--vbk-sidebar-w)) !important;
        margin-right: 0 !important;
    }


    /* ======================================================================
       RTL
       Sidebar is physically on RIGHT, therefore it leaves toward RIGHT
       ====================================================================== */

    html[dir="rtl"]
    body.help-body.help-ui-2026
    .panel-left {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }


    html[dir="rtl"]
    body.help-body.help-ui-2026.sidebar-collapsed
    .panel-left {
        margin-right: calc(0px - var(--vbk-sidebar-w)) !important;
        margin-left: 0 !important;
    }
}


/* ==========================================================================
   ACCESSIBILITY — REDUCED MOTION RULE REMOVED (2026-08-15)

   قبلاً این‌جا قاعده‌ای بود که انیمیشن باز/بستهٔ سایدبار را در دسکتاپ
   خاموش می‌کرد وقتی مرورگر «prefers-reduced-motion: reduce» گزارش می‌داد:

       @media (min-width: 769px) and (prefers-reduced-motion: reduce) {
           body.help-body.help-ui-2026 .panel-left,
           body.help-body.help-ui-2026 .splitter { transition: none !important; }
       }

   به درخواست صریح مالک پروژه حذف شد تا انیمیشن سایدبار همیشه و برای
   همهٔ کاربران اجرا شود، مستقل از تنظیم سیستم‌عاملشان.

   ⚠️ اثر جانبی آگاهانه: کاربرانی که در سیستم خود «کاهش انیمیشن» را
   فعال کرده‌اند (اغلب به دلیل سرگیجه/میگرن یا حساسیت وستیبولار) دیگر
   این ترجیح رعایت نمی‌شود. این یک تصمیم محصولی است، نه اشتباه فنی.

   برای بازگرداندن: بلوک @media بالا را دوباره اضافه کن، یا فایل بکاپ را
   برگردان:
       backups/css/help-redesign-2026.css.2026-08-15-before-motion-rule-removal.bak
   ========================================================================== */


/* ==========================================================================
   RTL SIDEBAR SCROLLBAR POSITION FIX
   Keep Persian content RTL, but scrollbar on physical RIGHT
   ========================================================================== */

html[dir="rtl"]
body.help-body.help-ui-2026
#tabBlock-content,
html[dir="rtl"]
body.help-body.help-ui-2026
.tabBlock-content {
    direction: ltr !important;
}


    /* Restore actual sidebar content to RTL */

    html[dir="rtl"]
    body.help-body.help-ui-2026
    #tabBlock-content > .tabBlock-pane,
    html[dir="rtl"]
    body.help-body.help-ui-2026
    .tabBlock-content > .tabBlock-pane {
        direction: rtl !important;
        text-align: right !important;
    }


    /* Keep all navigation items RTL */

    html[dir="rtl"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub-menu,
    html[dir="rtl"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub-menu a,
    html[dir="rtl"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub {
        direction: rtl !important;
        text-align: right !important;
    }

        /* ==========================================================================
   RTL SIDEBAR ACCORDION ARROW FIX
   Remove the extra gray line beside arrows in Persian
   ========================================================================== */

        html[dir="rtl"]
        body.help-body.help-ui-2026
        #tabBlock-content
        .sub-menu:not(.help-direct-topic) > a::after {
            /* Reset logical borders that break in RTL */
            border: 0 !important;
            border-inline-start: 0 !important;
            border-inline-end: 0 !important;
            /* Always construct the chevron with physical sides */
            border-right: 1.5px solid rgba(255, 255, 255, .60) !important;
            border-bottom: 1.5px solid rgba(255, 255, 255, .60) !important;
            width: 7px !important;
            height: 7px !important;
            transform: rotate(45deg) !important;
        }


        /* Open section */

        html[dir="rtl"]
        body.help-body.help-ui-2026
        #tabBlock-content
        .sub-menu.open > a::after {
            transform: rotate(-135deg) !important;
        }



/* ==========================================================================
   AUTO SIDEBAR SCROLLBAR SIDE BY LANGUAGE DIRECTION

   LTR languages  -> scrollbar on LEFT
   RTL languages  -> scrollbar on RIGHT

   Automatically follows <html dir="ltr|rtl">
   ========================================================================== */


/* ==========================================================================
   LTR LANGUAGE
   Scroll container becomes RTL only to move scrollbar to LEFT.
   Actual navigation content is restored to LTR.
   ========================================================================== */

html[dir="ltr"]
body.help-body.help-ui-2026
#tabBlock-content,
html[dir="ltr"]
body.help-body.help-ui-2026
.tabBlock-content {
    direction: rtl !important;
}


    html[dir="ltr"]
    body.help-body.help-ui-2026
    #tabBlock-content > .tabBlock-pane,
    html[dir="ltr"]
    body.help-body.help-ui-2026
    .tabBlock-content > .tabBlock-pane {
        direction: ltr !important;
        text-align: left !important;
    }


    /* Keep all menu contents LTR */

    html[dir="ltr"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub-menu,
    html[dir="ltr"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub-menu > a,
    html[dir="ltr"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub,
    html[dir="ltr"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub > li,
    html[dir="ltr"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub > li > a {
        direction: ltr !important;
        text-align: left !important;
    }


/* ==========================================================================
   RTL LANGUAGE
   Scroll container becomes LTR only to move scrollbar to RIGHT.
   Actual navigation content is restored to RTL.
   ========================================================================== */

html[dir="rtl"]
body.help-body.help-ui-2026
#tabBlock-content,
html[dir="rtl"]
body.help-body.help-ui-2026
.tabBlock-content {
    direction: ltr !important;
}


    html[dir="rtl"]
    body.help-body.help-ui-2026
    #tabBlock-content > .tabBlock-pane,
    html[dir="rtl"]
    body.help-body.help-ui-2026
    .tabBlock-content > .tabBlock-pane {
        direction: rtl !important;
        text-align: right !important;
    }


    /* Keep all menu contents RTL */

    html[dir="rtl"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub-menu,
    html[dir="rtl"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub-menu > a,
    html[dir="rtl"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub,
    html[dir="rtl"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub > li,
    html[dir="rtl"]
    body.help-body.help-ui-2026
    #tabBlock-content
    .sub > li > a {
        direction: rtl !important;
        text-align: right !important;
    }

/* ==========================================================================
   FULL-TEXT SEARCH RESULTS (2026-08-17)

   Panel rendered by help-search.js under the sidebar search box. It
   replaces the navigation tree while a query is active.

   Colours are for the DARK sidebar: .panel-left is a dark teal gradient
   (--vh-teal-900 -> #073f47) with white base text. Dark ink here would
   be unreadable.
   ========================================================================== */

body.help-ui-2026 .panel-left .help-tree-search-hidden {
    display: none !important;
}

body.help-ui-2026 .help-search-results {
    max-height: calc(100dvh - 260px);
    margin: 6px 10px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
    scrollbar-width: thin;
}

    body.help-ui-2026 .help-search-results::-webkit-scrollbar {
        width: 6px;
    }

    body.help-ui-2026 .help-search-results::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(255, 255, 255, .24);
    }

body.help-ui-2026 .help-search-count {
    margin: 0 0 7px;
    padding: 0 4px;
    color: rgba(160, 236, 231, .95);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.help-ui-2026 .help-search-empty {
    margin: 0;
    padding: 12px 6px;
    color: rgba(255, 255, 255, .78);
    font-size: 12.5px;
    line-height: 1.6;
}

    body.help-ui-2026 .help-search-empty strong {
        color: #ffffff;
    }

body.help-ui-2026 .help-search-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.help-ui-2026 .help-search-item + .help-search-item {
    margin-top: 4px;
}

body.help-ui-2026 .help-search-item a {
    display: block;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    color: inherit;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

    body.help-ui-2026 .help-search-item a:hover,
    body.help-ui-2026 .help-search-item a:focus-visible {
        border-color: rgba(115, 226, 221, .45);
        background: rgba(255, 255, 255, .12);
    }

body.help-ui-2026 .help-search-title {
    display: block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
}

body.help-ui-2026 .help-search-meta {
    display: block;
    margin-top: 3px;
    color: rgba(150, 214, 214, .92);
    font-size: 10.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.help-ui-2026 .help-search-excerpt {
    display: block;
    margin-top: 5px;
    color: rgba(226, 244, 243, .82);
    font-size: 11.5px;
    line-height: 1.55;
}

    /* The hit itself, wrapped in <mark> by FTS5 snippet(). */
    body.help-ui-2026 .help-search-excerpt mark {
        padding: 0 3px;
        border-radius: 3px;
        background: #ffd464;
        color: #3d2f04;
        font-weight: 700;
    }


/* ==========================================================================
   RELATED TOPICS — ORDER ON MOBILE (2026-08-17)

   Below 768px the article is a flex column and its children are placed
   by explicit order: toolbar and finder at 0, the title at 1, the
   content at 3. The related block had no order, so it joined the 0
   group and rendered above the article instead of after it.

   A high value keeps it last even if another block is added later.
   ========================================================================== */

@media (max-width: 768px) {

    body.help-body.help-ui-2026 .help-related {
        order: 10 !important;
    }
}







/* ==========================================================================
   TESTER / RELAY HEADER — CATALOG STYLE ACCENT LINE
   ========================================================================== */

body.help-body.help-ui-2026
.help-standard-topic-seo-title {
    position: relative !important;
    overflow: hidden !important;
}


    /* LTR: line on LEFT */

    body.help-body.help-ui-2026
    .help-standard-topic-seo-title::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        width: 5px !important;
        height: 100% !important;
        border-radius: 20px 0 0 20px !important;
        background: linear-gradient( 180deg, var(--vh-teal-500), var(--vh-blue-600) ) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }


/* RTL: line automatically moves to RIGHT */

html[dir="rtl"]
body.help-body.help-ui-2026
.help-standard-topic-seo-title::after {
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    border-radius: 0 20px 20px 0 !important;
}



/* ==========================================================================
   CATALOG HEADER PILL
   Match LinkedIn hero pill
   ========================================================================== */

body.help-body.help-ui-2026
.catalog-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: fit-content !important;
    min-height: 35px !important;
    padding: 6px 12px !important;
    margin: 0 0 8px !important;

    border-radius: 999px !important;


    box-shadow: none !important;

    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    background: rgb(107 189 189 / 29%);
    border: 1px solid rgb(49 121 125 / 39%);
    color: #1a716e;
    font-size: 12px !important;
    font-weight: 600;
}


/* Small catalog icon */

body.help-body.help-ui-2026
.catalog-pill-icon {
    position: relative;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    display: inline-block;
    border: 1.5px solid var(--vh-teal-700);
    border-radius: 3px;
}


    body.help-body.help-ui-2026
    .catalog-pill-icon::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 2px;
        height: 2px;
        border-radius: 50%;
        background: var(--vh-teal-700);
        box-shadow: 4px 0 0 var(--vh-teal-700), 0 4px 0 var(--vh-teal-700), 4px 4px 0 var(--vh-teal-700);
    }




/* ==========================================================================
   CATALOG PDF — FULLSCREEN
   ========================================================================== */

body.help-body.help-ui-2026
.catalog-pdf-fullscreen-button {
    padding: 7px !important;
}


body.help-body.help-ui-2026
.catalog-fullscreen-icon {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}


/* ==========================================================================
   FULLSCREEN VIEWER
   ========================================================================== */

body.help-body.help-ui-2026
.catalog-preview:fullscreen {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #e8eff1 !important;
    box-shadow: none !important;
}


    /* Toolbar stays at top */

    body.help-body.help-ui-2026
    .catalog-preview:fullscreen
    .catalog-pdf-toolbar {
        flex: 0 0 auto !important;
        margin: 0 !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        background: rgba(248, 252, 252, .98) !important;
        box-shadow: 0 4px 18px rgba(5, 45, 52, .08) !important;
    }


    /* PDF takes all remaining space */

    body.help-body.help-ui-2026
    .catalog-preview:fullscreen
    .catalog-pdf-scroll {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: auto !important;
    }


/* ==========================================================================
   FULLSCREEN ACTIVE BUTTON
   ========================================================================== */

body.help-body.help-ui-2026
.catalog-pdf-fullscreen-button.is-fullscreen {
    border-color: rgba(14, 150, 154, .38) !important;
    background: #e8f7f6 !important;
    color: var(--vh-teal-800) !important;
}


/* ==========================================================================
   TOPIC PDF BUTTON
   Desktop = Text button
   Tablet / Mobile = Same square icon button as Share/Search/Print/Play
   ========================================================================== */

@media (max-width: 1100px) {

    /* =========================================================
       PDF BUTTON — RESET DESKTOP PILL
       ========================================================= */

    body.help-body.help-ui-2026
    .help-topic-action-bar
    #helpTopicPdfButton.help-topic-pdf-button.badge {

        appearance: none !important;

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

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

        flex: 0 0 39px !important;

        display: inline-grid !important;
        place-items: center !important;

        gap: 0 !important;

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

        overflow: hidden !important;

        /* Same appearance as other toolbar buttons */

        border:
            1px solid
            var(--vh-line-strong) !important;

        border-radius:
            11px !important;

        background:
            #ffffff !important;

        color:
            var(--vh-teal-800) !important;

        box-shadow:
            var(--vh-shadow-xs) !important;

        text-decoration:
            none !important;

        cursor:
            pointer !important;

        white-space:
            nowrap !important;

        transition:
            transform .16s ease,
            border-color .16s ease,
            background .16s ease,
            color .16s ease,
            box-shadow .16s ease !important;
    }


    /* =========================================================
       REMOVE "DOWNLOAD PDF" TEXT
       ========================================================= */

    body.help-body.help-ui-2026
    .help-topic-action-bar
    #helpTopicPdfButton
    .help-topic-pdf-label {

        display: none !important;
    }


    /* =========================================================
       REMOVE SPECIAL PDF ICON BOX
       The icon itself must sit directly inside the 39x39 button.
       ========================================================= */

    body.help-body.help-ui-2026
    .help-topic-action-bar
    #helpTopicPdfButton
    .help-topic-pdf-icon {

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

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

        display: grid !important;
        place-items: center !important;

        flex: 0 0 21px !important;

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

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;
    }


    /* =========================================================
       PDF SVG SIZE
       ========================================================= */

    body.help-body.help-ui-2026
    .help-topic-action-bar
    #helpTopicPdfButton
    .help-topic-pdf-icon
    svg {

        display: block !important;

        width: 21px !important;
        height: 21px !important;

        min-width: 21px !important;
        min-height: 21px !important;

        max-width: 21px !important;
        max-height: 21px !important;

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


    /* =========================================================
       HOVER — EXACT SAME FEEL AS OTHER ICON BUTTONS
       ========================================================= */

    body.help-body.help-ui-2026
    .help-topic-action-bar
    #helpTopicPdfButton.help-topic-pdf-button.badge:hover,

    body.help-body.help-ui-2026
    .help-topic-action-bar
    #helpTopicPdfButton.help-topic-pdf-button.badge:focus-visible {

        transform:
            translateY(-1px);

        border-color:
            rgba(14, 150, 154, .35) !important;

        background:
            #eef8f7 !important;

        color:
            var(--vh-teal-700) !important;

        box-shadow:
            var(--vh-shadow-sm) !important;
    }


    /* =========================================================
       KEEP ALL TOOLBAR BUTTONS SAME SIZE
       ========================================================= */

    body.help-body.help-ui-2026
    .help-topic-action-bar
    .badge {

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

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

        flex: 0 0 39px !important;

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


    body.help-body.help-ui-2026
    .help-topic-action-bar {

        align-items: center !important;

        gap: 6px !important;
    }
}


/* ==========================================================================
   PDF ICON — VISUAL CENTERING
   ========================================================================== */

@media (max-width: 1100px) {

    body.help-body.help-ui-2026
    .help-topic-action-bar
    #helpTopicPdfButton
    .help-topic-pdf-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


        body.help-body.help-ui-2026
        .help-topic-action-bar
        #helpTopicPdfButton
        .help-topic-pdf-icon
        svg {
            position: relative !important;
            left: 9.2px !important;
            margin: 0 !important;
            transform: none !important;
        }
}



/* ==========================================================================
   CATALOG PDF — FULL PAGE HEIGHT IN NORMAL VIEW

   Normal mode:
   - PDF page is shown completely
   - No inner vertical scroll
   - Main Help page handles scrolling

   Fullscreen:
   - Existing fullscreen behavior remains unchanged
   ========================================================================== */


/* =========================================================
   PREVIEW WRAPPER
   ========================================================= */

body.help-body.help-ui-2026
.catalog-preview:not(:fullscreen) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}


    /* =========================================================
   PDF PAGE AREA
   ========================================================= */

    body.help-body.help-ui-2026
    .catalog-preview:not(:fullscreen)
    .catalog-pdf-scroll {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: 18px !important;
        box-sizing: border-box !important;
    }


    /* =========================================================
   PDF PAGE
   ========================================================= */

    body.help-body.help-ui-2026
    .catalog-preview:not(:fullscreen)
    .catalog-pdf-page {
        width: fit-content !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 16px auto 0 !important;
        overflow: visible !important;
    }


    /* =========================================================
   CANVAS
   ========================================================= */

    body.help-body.help-ui-2026
    .catalog-preview:not(:fullscreen)
    .catalog-pdf-canvas {
        display: block !important;
        height: auto !important;
        max-width: 100%;
        margin: 0 auto !important;
    }


    /* =========================================================
   REMOVE INNER VERTICAL SCROLLBAR IN NORMAL MODE
   ========================================================= */

    body.help-body.help-ui-2026
    .catalog-preview:not(:fullscreen)
    .catalog-pdf-scroll::-webkit-scrollbar {
        width: 0 !important;
    }


/* =========================================================
   MOBILE / TABLET
   Remove the old fixed-height responsive rules too.
   ========================================================= */

@media (max-width: 900px) {

    body.help-body.help-ui-2026
    .catalog-preview:not(:fullscreen) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}


@media (max-width: 768px) {

    body.help-body.help-ui-2026
    .catalog-preview:not(:fullscreen) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
}





/* ==========================================================================
   HELP LANDING PAGE — TARGET DESIGN
   Match the second reference screenshot
   ========================================================================== */


/* ==========================================================================
   PAGE AREA
   ========================================================================== */

body.help-body.help-ui-2026
.help-default-landing {
    width: 100% !important;
    min-height: calc(100dvh - var(--vh-header-h) - 30px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 26px 14px 16px !important;
    box-sizing: border-box !important;

}


    /* ==========================================================================
   MAIN SHELL
   ========================================================================== */

    body.help-body.help-ui-2026
    .help-default-landing
    .default-page-shell {
        width: min(980px, 100%) !important;
        max-width: 980px !important;
        margin: 0 auto !important;
    }


    /* ==========================================================================
   MAIN WHITE CARD
   ========================================================================== */

    body.help-body.help-ui-2026
    .help-default-landing
    .default-landing-card {
        position: relative !important;
        width: 100% !important;
        min-height: 800px !important;
        margin: 0 !important;
        padding: 42px 34px 28px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border: 1px solid #c9d7da !important;
        border-radius: var(--vh-r20) !important;
        background: linear-gradient(115deg, #edf8f7 0%, #ddefed 50%, #cef0f3 100%) !important;
        box-shadow: 0 6px 18px rgba(16, 49, 57, .07);
    }


        /*
   Remove the old colored strip
*/

        body.help-body.help-ui-2026
        .help-default-landing
        .default-landing-card::before {
            display: none !important;
        }


        /*
   Remove old circular decoration.
   The new background gradients handle the glow.
*/

        body.help-body.help-ui-2026
        .help-default-landing
        .default-landing-card::after {
            display: none !important;
        }


    /* ==========================================================================
   LARGE LOGO PANEL
   ========================================================================== */

    body.help-body.help-ui-2026
    .help-default-landing
    .default-logo-wrap {
        width: 400px !important;
        max-width: 100% !important;
        height: 132px !important;
        margin: 0 auto 21px !important;
        display: grid !important;
        place-items: center !important;
        overflow: hidden !important;
        border: 1px solid rgb(33 103 102 / 56%) !important;
        border-radius: 27px !important;
        background: linear-gradient(145deg, rgb(255 255 255 / 94%), rgba(240, 249, 249, .88)) !important;
        box-shadow: 0 14px 34px rgba(20, 119, 123, .07) !important;
    }


        /* Actual VEBKO logo */

        body.help-body.help-ui-2026
        .help-default-landing
        .default-logo-wrap img {
            display: block !important;
            width: 215px !important;
            max-width: 100% !important;
            height: auto !important;
            max-height: 94px !important;

            object-fit: contain !important;
            margin-top:15px;
        }


    /* ==========================================================================
   MAIN TITLE
   ========================================================================== */

    body.help-body.help-ui-2026
    .help-default-landing
    .default-brand-title {
        width: 100% !important;
        max-width: 780px !important;
        margin: 0 auto !important;
        color: #102633 !important;
        font-size: clamp(32px, 4.2vw, 42px) !important;
        font-weight: 850 !important;
        line-height: 1.14 !important;
        letter-spacing: -.035em !important;
        text-align: center !important;
    }


html[dir="rtl"]
body.help-body.help-ui-2026
.help-default-landing
.default-brand-title {
    letter-spacing: 0 !important;
}


/* ==========================================================================
   INTRO TEXT
   ========================================================================== */

body.help-body.help-ui-2026
.help-default-landing
.default-brand-subtitle {
    width: min(660px, 100%) !important;
    margin: 15px auto 0 !important;
    color: #607487 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.9 !important;
    text-align: center !important;
}


/* ==========================================================================
   CONNECT WITH VEBKO TITLE
   ========================================================================== */

body.help-body.help-ui-2026
.help-default-landing
.default-section-head {
    margin: 30px 4px 16px !important;
    padding: 0 !important;
    border: 0 !important;
    color: #102633 !important;
    font-size: 23px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-align: start !important;
}


/* ==========================================================================
   SOCIAL GRID
   ========================================================================== */

body.help-body.help-ui-2026
.help-default-landing
.default-social-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}


/* ==========================================================================
   SOCIAL CARD
   ========================================================================== */

body.help-body.help-ui-2026
.help-default-landing
.default-social-card {
    position: relative !important;
    min-height: 88px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border: 1px solid #d3e2e5 !important;
    border-radius: 19px !important;
    background: rgba(255, 255, 255, .88) !important;
    color: #102633 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(21, 72, 83, .035) !important;
    font-size: 13px !important;
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), border-color .22s ease, background .22s ease, box-shadow .22s ease !important;
}


    /*
   Remove old colored line from cards.
*/

    body.help-body.help-ui-2026
    .help-default-landing
    .default-social-card::before {
        display: none !important;
    }


    /* Card hover */

    body.help-body.help-ui-2026
    .help-default-landing
    .default-social-card:hover {
        transform: translateY(-3px) !important;
        border-color: rgba(21, 177, 176, .34) !important;
        background: #ffffff !important;
        box-shadow: 0 14px 30px rgba(16, 92, 99, .09) !important;
    }


/* ==========================================================================
   SOCIAL ICON BOX
   ========================================================================== */

body.help-body.help-ui-2026
.help-default-landing
.default-social-icon-box {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(60, 193, 192, .30) !important;
    border-radius: 16px !important;
    background: linear-gradient( 145deg, #e8f8f7, #f0f9f9 ) !important;
}


    /* Social icons */

    body.help-body.help-ui-2026
    .help-default-landing
    .default-social-icon-box img {
        display: block !important;
        width: 34px !important;
        height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        object-fit: contain !important;
    }


/* ==========================================================================
   CARD TEXT
   ========================================================================== */

body.help-body.help-ui-2026
.help-default-landing
.default-social-card strong {
    color: #102633 !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}


body.help-body.help-ui-2026
.help-default-landing
.default-social-card p,
body.help-body.help-ui-2026
.help-default-landing
.default-social-card small {
    margin: 5px 0 0 !important;
    color: #617588 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

body.help-body.help-ui-2026
.help-default-landing
.default-footer,
body.help-body.help-ui-2026
.help-default-landing
.default-landing-footer {
    margin-top: 27px !important;
    color: #687d8e !important;
    font-size: 12px !important;
    text-align: center !important;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

    body.help-body.help-ui-2026
    .help-default-landing {
        padding: 20px 14px 16px !important;
    }


        body.help-body.help-ui-2026
        .help-default-landing
        .default-landing-card {
            min-height: 0 !important;
            padding: 34px 28px 26px !important;
        }


        body.help-body.help-ui-2026
        .help-default-landing
        .default-logo-wrap {
            width: min(360px, 100%) !important;
            height: 122px !important;
        }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    body.help-body.help-ui-2026
    .help-default-landing {
        padding: 12px 10px 20px !important;
    }


        body.help-body.help-ui-2026
        .help-default-landing
        .default-landing-card {
            padding: 28px 18px 24px !important;
            border-radius: 22px !important;
        }


        body.help-body.help-ui-2026
        .help-default-landing
        .default-logo-wrap {
            width: 100% !important;
            max-width: 310px !important;
            height: 108px !important;
            border-radius: 22px !important;
        }


            body.help-body.help-ui-2026
            .help-default-landing
            .default-logo-wrap img {
                width: 175px !important;
            }


        body.help-body.help-ui-2026
        .help-default-landing
        .default-brand-title {
            font-size: clamp(28px, 9vw, 35px) !important;
        }


        body.help-body.help-ui-2026
        .help-default-landing
        .default-brand-subtitle {
            font-size: 13px !important;
            line-height: 1.75 !important;
        }


        body.help-body.help-ui-2026
        .help-default-landing
        .default-section-head {
            margin-top: 27px !important;
            font-size: 20px !important;
        }


        body.help-body.help-ui-2026
        .help-default-landing
        .default-social-grid {
            grid-template-columns: 1fr !important;
            gap: 12px !important;
        }


        body.help-body.help-ui-2026
        .help-default-landing
        .default-social-card {
            min-height: 82px !important;
            border-radius: 16px !important;
        }


        body.help-body.help-ui-2026
        .help-default-landing
        .default-social-icon-box {
            width: 54px !important;
            min-width: 54px !important;
            height: 54px !important;
            flex-basis: 54px !important;
        }
}


/* ==========================================================================
   HELP INDEX — WIDER MAIN CARD
   ========================================================================== */

body.help-body.help-ui-2026
.help-default-landing
.default-page-shell {
    width: min(1320px, 100%) !important;
    max-width: 1320px !important;
}