/* Vertical Tabs Container */
.pac-vertical-tabs-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 15px;
    margin-top: 20px;
    margin-left: -65px;
    position: relative;
    box-sizing: border-box;
}

/* L0 Mode - Sidebar Visibility Controls */
body.pac-l0-active .pix-sidebar .widget_media_image {
    display: none !important;
}

/* Hide generic images in sidebar widgets, except inside chat components */
body.pac-l0-active .pix-sidebar .widget img:not(deep-chat img):not(.pix-chat-container img) {
    display: none !important;
}

/* Explicitly hide the JS Gallery mechanism when in L0 mode */
body.pac-l0-active #pac-ai-gallery {
    display: none !important;
}

/* Theme Override - Fix for Sticky Tabs */
html, body,
.entry-content, 
.post-content, 
.blog-article .post-content,
.site-main,
.site-content,
.content-area,
#primary,
#content,
article,
.wrapper,
.main-wrapper,
.site,
.page,
.site-inner,
.content-wrapper {
    overflow: visible !important;
}

.pac-vertical-tabs-container * {
    box-sizing: border-box;
}

/* Left Vertical Navigation */
.pac-vertical-tabs-nav {
    flex: 0 0 50px; /* Reduced width for L0/L1/L2 labels */
    display: flex;
    flex-direction: column;
    border-right: none; /* Remove border for cleaner look */
    padding-right: 0;
    
    /* Sticky behavior */
    position: sticky;
    top: max(20px, calc(50vh - 120px)); /* Mimic AI Chat center-ish locking */
    transform: none !important;
    align-self: flex-start;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 20;
    will-change: transform; /* Optimize for animation */
}

.pac-vertical-tab-link {
    padding-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    background: #f9f9f9;
    transition: all 0.3s;
    text-align: center; /* Center text */
    font-weight: 600;
    margin-bottom: 5px;
    border-radius: 25px;
    width: 50px;
    height: 50px;
}

.pac-vertical-tab-link:hover {
    background: #f0f0f0;
}

.pac-vertical-tab-link.active {
    background: var(--pix-main-color);
    color: #fff;
    border: none;
}

/* Content Area */
.pac-vertical-tabs-content {
    flex: 1;
    min-width: 0; /* Prevent flex overflow */
    padding-left: 0;
}

.pac-tab-pane {
    display: none;
}

.pac-tab-pane.active {
    display: block;
    opacity: 1;
    
}

@media (min-width: 769px) {
    #tab-l0.pac-tab-pane {
        margin-right: -2.5rem;
    }
    #tab-l0.pac-tab-pane, #tab-l1.pac-tab-pane {
        position: relative;
        /* left: -15px; */
    }
}

/* Horizontal Tabs Container (Sticky Wrapper) */
.pac-horizontal-tabs-container {
    position: relative; /* Ensure z-index and absolute children work */
    width: 100%;
    
    /* Default Background */
    background: transparent;
    
    z-index: 19;
    padding-top: 0;
    margin-bottom: 25px;
    /* Ensure mask is visible */
    overflow: visible !important;
}

.pac-horizontal-tabs-container.is-sticky {
    position: fixed;
    margin-bottom: 0;
    top: 100px !important;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Glass Layer covering both the Sticky Container and the Gap above */
.pac-horizontal-tabs-container.is-sticky::before {
    content: '';
    position: absolute;
    display: block;
    top: -100px; /* Start 100px above */
    left: 0;
    width: 100%;
    height: calc(100% + 100px); /* Cover the gap (100px) + the container itself (100%) */
    
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    transform: translateZ(0);
    z-index: -1;
}

/* Horizontal Tabs Nav (Scrollable Content) */
.pac-horizontal-tabs-nav {
    display: flex;
    flex-wrap: nowrap;
    /* overflow-x: auto; removed to fix 15px shift */
    gap: 10px;
    padding-bottom: 15px; /* Space for shadow */
    width: 100%;
    /* Remove sticky styles from here */
    background: transparent;
    margin-bottom: 0;
    padding-top: 0;
}

.pac-horizontal-tabs-placeholder {
    display: block;
    height: 0;
    /* Use opacity instead of visibility to ensure layout calculation works reliably */
    opacity: 0;
    pointer-events: none;
}

.pac-horizontal-tabs-placeholder.active {
    /* Height is set by JS */
    opacity: 1;
    /* Glass Effect */
    /* Note: Placeholder typically shouldn't be visible/styled like content as it's just filling space, 
       but user requested it. Usually, sticky element has the effect. 
       If placeholder is active, it means the container is fixed elsewhere. 
       The placeholder just takes up space. 
       Applying glass effect to opacity=1 placeholder might not be visible if empty.
       But I will trust the request implies styling matching the stickiness logic if relevant.
    */
}

.pac-horizontal-tab-link {
    padding: 8px 20px;
    cursor: pointer;
    border: 1px solid #eee;
    border-radius: 50px;
    margin-bottom: 0;
    background: #fff;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0;
    max-width: 285px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    display: block;
    text-align: center;
}

.pac-horizontal-tab-link:hover {
    background: #f5f5f5;
    border-color: #ddd;
    color: #000;
}

.pac-horizontal-tab-link.active {
    background: var(--pix-main-color);
    border-color: var(--pix-main-color);
    color: #fff;
    font-weight: 500;
    border-top: 1px solid var(--pix-main-color);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.pac-horizontal-tab-pane {
    display: none;
    padding: 15px 0;
}

.pac-horizontal-tab-pane.active {
    display: block;
    opacity: 1;
    
}


/* Headings for L1 and L0 (Excluded from TOC) */
.pac-heading-l1 {
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    font-weight: bold;
    line-height: 1.2;
}

.pac-heading-l0 {
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    font-weight: bold;
    line-height: 1.2;
}

/* Stripped Headers (Excluded from TOC) */
.pac-stripped-header {
    display: block;
    font-weight: bold;
    line-height: 1.2;
    color: inherit;
}

.pac-stripped-header.h1 { font-size: 2em; margin: 0.67em 0; }
.pac-stripped-header.h2 { font-size: 1.5em; margin: 0.83em 0; }
.pac-stripped-header.h3 { font-size: 1.17em; margin: 1em 0; }
.pac-stripped-header.h4 { font-size: 1em; margin: 1.33em 0; }
.pac-stripped-header.h5 { font-size: 1em; margin: 1.33em 0; }
.pac-stripped-header.h6 { font-size: 1em; margin: 1.33em 0; }

/* Responsive: Stack on small screens */
@media (max-width: 768px) {
    .pac-vertical-tabs-container {
        flex-direction: column;
        margin-left: 0;
    }
    
    .pac-vertical-tabs-nav {
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #ddd;
        padding-right: 0;
        padding-bottom: 10px;
        position: static;
        max-height: none;
        flex-direction: row;
        /* overflow-x: auto; removed to fix 15px shift */
    }

    .pac-vertical-tab-link {
        white-space: nowrap;
        border-bottom: none;
        border-right: 1px solid #eee;
        flex: 0 0 auto;
        margin-right: 15px;
        width: 40px;
        height: 40px;
        margin-bottom: 0;
    }
    
    .pac-vertical-tab-link.active {
        border-right: 1px solid #eee;
        border-bottom: none;
    }

    /* Standard Mobile Link Styling (for regular state) */
    .pac-horizontal-tabs-nav .pac-horizontal-tab-link {
        flex: 1 1 0px;
        width: 100%;
        min-width: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Mobile Sticky State for Vertical Tabs Nav (which is horizontal on mobile) */
    .pac-vertical-tabs-nav.is-sticky {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100% !important;
        
        /* Glass Effect */
        background: rgba(255, 255, 255, 0.25);
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 0;
        
        z-index: 1000;
        padding: 7px 15px;
        margin: 0 !important;
        /* box-shadow: 0 4px 12px rgba(0,0,0,0.08); Removed in favor of blue glass shadow */
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
        transform: none !important; /* Override desktop sticky transform logic */
    }

    /* Mobile: Horizontal Tabs (L0-L1-L2 sub-tabs) Customization */
    .pac-horizontal-tabs-container.is-sticky {
        top: 108px !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
        margin-left: 0 !important; /* Reset any negative margins if inherited */
    }

    .pac-horizontal-tabs-container.is-sticky .pac-horizontal-tabs-nav {
         padding-bottom: 10px;
         justify-content: space-between; /* Distribute space */
         overflow-x: hidden; /* No scrollbar */
         flex-wrap: nowrap;
    }

    .pac-horizontal-tabs-container.is-sticky .pac-horizontal-tab-link {
        flex: 1 1 0px;
        width: 100%;
        min-width: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}



/* Mobile styling for non-logged-in users */
@media screen and (max-width: 575px) {
    body:not(.logged-in) .blog > .container.pix-container-boxed {
        padding-top: 70px !important;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    body:not(.logged-in) .blog > .container.pix-container-boxed > .row:first-child {
        padding-top: 55px !important;
    }
}

@media (max-width: 768px) {
    .pac-horizontal-tabs-container.is-sticky {
        top: 118px !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
        margin-left: 0 !important;
    }
}

#tab-l1.pac-tab-pane {
    max-width: 100%;
    box-sizing: border-box;
}

/* Force L1 to match the max boundary width */
.pac-vertical-tabs-content {
    max-width: 100%;
    /* overflow: hidden; */
}

#tab-l1.pac-tab-pane {
    max-width: 100% !important; /* overflow-x: auto; removed to fix 15px shift */ word-wrap: break-word;
    /* width: calc(100% - 65px); */
    overflow-x: hidden;
    word-wrap: break-word;
}

/* Fix for negative margin causing right-side overflow */
.pac-vertical-tabs-container {
    width: calc(100% + 65px) !important;
}

/* Force the flex container to natively shrink to right bound */
.pac-vertical-tabs-container {
    width: auto !important;
}

/* Fix for Architect Mermaid SVG breaking layout */
#tab-l1.pac-tab-pane .mermaid,
#tab-l1.pac-tab-pane .kant-bp-table,
#tab-l1.pac-tab-pane .kant-bp-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

/* L1 Mermaid dark-label override (beats Mermaid injected SVG defaults) */
#tab-l1.pac-tab-pane .diagram-container .mermaid .label,
#tab-l1.pac-tab-pane .diagram-container .mermaid .label text,
#tab-l1.pac-tab-pane .diagram-container .mermaid .label tspan,
#tab-l1.pac-tab-pane .diagram-container .mermaid .edgeLabels .label,
#tab-l1.pac-tab-pane .diagram-container .mermaid .edgeLabels .label text,
#tab-l1.pac-tab-pane .diagram-container .mermaid .edgeLabels .label tspan,
#tab-l1.pac-tab-pane .diagram-container .mermaid .cluster-label text,
#tab-l1.pac-tab-pane .diagram-container .mermaid .cluster text,
#tab-l1.pac-tab-pane .diagram-container .mermaid span,
#tab-l1.pac-tab-pane .diagram-container .mermaid p {
    color: #d6dde7 !important;
    fill: #d6dde7 !important;
    stroke: none !important;
}

#tab-l1.pac-tab-pane .diagram-container .mermaid .edgeLabel,
#tab-l1.pac-tab-pane .diagram-container .mermaid .edgeLabel rect,
#tab-l1.pac-tab-pane .diagram-container .mermaid .labelBkg {
    background-color: transparent !important;
    fill: transparent !important;
    stroke: none !important;
    opacity: 0 !important;
}

#tab-l1.pac-tab-pane .diagram-container .mermaid rect.basic {
    background-color: transparent !important;
    fill: transparent !important;
}

#tab-l1.pac-tab-pane .diagram-container .mermaid .edge-pattern-dashed,
#tab-l1.pac-tab-pane .diagram-container .mermaid path.relation.edge-pattern-dashed,
#tab-l1.pac-tab-pane .diagram-container .mermaid .flowchart-link.edge-pattern-dashed {
    stroke: #aeb6c2 !important;
}

/* Fix for Architect Mermaid SVG breaking layout */
#tab-l1.pac-tab-pane .mermaid,
#tab-l1.pac-tab-pane .kant-bp-table,
#tab-l1.pac-tab-pane .kant-bp-wrapper {
    max-width: 100%;
    overflow-x: auto;
}