/**
 * Beaver Builder Tabs Fade Transition
 *
 * This strategy uses opacity and visibility to handle transitions,
 * preventing the 'height shrinking' issue where the layout collapses 
 * during tab switching.
 */
@media (min-width: 769px) {
    /* 
     * The panels container needs to be relative to allow absolute 
     * positioning of inactive panels.
     */
    .bb-tabs-fade-enabled .fl-tabs-panels {
        position: relative;
        min-height: 1px;
    }

    /* 
     * Base panel style: Hidden and absolute.
     * Absolute positioning stacks all panels at the top of the container.
     */
    .bb-tabs-fade-enabled .fl-tabs-panel {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 0;
    }

    /* 
     * Transitions are only enabled once the 'bb-tabs-fade-ready' class is added.
     * This prevents the initial flash of overlapping tabs on page load.
     */
    .bb-tabs-fade-enabled.bb-tabs-fade-ready .fl-tabs-panel {
        transition: opacity 300ms ease;
    }

    /* 
     * Active panel style: Visible and relative.
     * Relative positioning ensures this panel dictates the container's height.
     */
    .bb-tabs-fade-enabled .fl-tabs-panel.bb-tab-active-wrapper {
        opacity: 1;
        pointer-events: auto;
        position: relative;
        z-index: 1;
    }

    /* 
     * Force panel content to stay in flow even when BB core tries to hide it.
     * We control visibility via the parent .fl-tabs-panel wrapper.
     */
    .bb-tabs-fade-enabled .fl-tabs-panel-content {
        display: block !important;
    }
}