/* ==== BASE LAYOUT & WIDGET STYLES ==== */

.fuse-tabs-carousel-widget {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    gap: 0;
    /* No gap between navigation and content wrapper directly */
}

body.single-ssindustry .fuse-tabs-carousel-widget {
    gap: 0;
    /* No gap between navigation and content wrapper directly */
}

.fuse-tabs-navigation {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Space between individual tab buttons */
    padding-right: 16px;
    /* Space to the right of the navigation column */
    padding-bottom: 80px;
    /* Your specific bottom padding */
    box-sizing: border-box;
}

body.single-ssindustry .fuse-tabs-navigation {
    flex: 0 0 52%;
    padding: 24px 0;
    row-gap: 8px;
}

.air-style .fuse-tabs-navigation {
    flex: 0 0 56%;
    padding: 0;
    row-gap: 6px;
}

.fuse-tabs-content-wrapper {
    flex: 1 1 50%;
    min-width: 0;
    /* Allows flex item to shrink */
    box-sizing: border-box;
    padding-left: 16px;
    /* Space to the left of the content column */
    /* Optional: Add a transition if its height is changed by JS for equal height */
    /* transition: height 0.3s ease-out; */
    position: relative;
    /* For absolutely positioned children */
    /* The height set by JS will still apply here */
    transition: height 0.3s ease-out;
    /* If you have this for smooth height change */
}


/* Specific styling when in "text" mode */

.fuse-tabs-carousel-widget.text .fuse-tabs-content-wrapper {
    flex-basis: 26%;
    /* Adjust flex basis for text mode */
    /* flex: 1 1 26%; /* Alternative shorthand */
    padding-left: 0 !important;
    /* Override default padding */
    background-color: var(--e-global-color-accent);
    /* Your background */
    border-radius: 30px;
    /* Your border radius */
    transition: height 0.3s ease-out;
    /* Smooth height changes by JS */
}

.air-style .fuse-tabs-carousel-widget.text .fuse-tabs-content-wrapper {
    background-color: var(--e-global-color-primary);
}

body.single-ssindustry .fuse-tabs-carousel-widget.text .fuse-tabs-content-wrapper {
    background-color: #eeeeee;
    color: var(--e-global-color-fa11112);
}


/* ==== TAB BUTTONS (.fuse-tab-title) ==== */

.fuse-tab-title {
    display: block;
    width: 100%;
    padding: 0 !important;
    /* Padding will be on inner .fuse-tab-title-text for concertina control by JS */
    box-sizing: border-box;
    overflow: hidden;
    /* Important for concertina if JS animates fixed heights that might clip */
    text-align: left;
    background: none !important;
    border: none !important;
    cursor: pointer;
    border-radius: 0 !important;
    /* No height here by default; JS (updateTabTitleHeight) or specific media query will handle */
    transition: background-color 0.4s ease, /* For hover/active states if any */
    border-color 0.4s ease;
    /* For active indicator if any */
    will-change: height;
    /* Hint for JS-driven height animation */
    height: auto!important;
}


/* Inner wrapper for title and subheading text */

.fuse-tab-title-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
    /* Small gap between main title and subheading */
    color: var(--e-global-color-0c8397e);
    /* Default text color from Elementor global */
    padding: 2px 0!important;
    /* YOUR PADDING for the text content inside the button */
    box-sizing: border-box;
    /* This element's height is animated by JS (updateTabTitleHeight) for concertina */
    transition: height 0.3s ease-in-out;
    /* Matches JS animation if JS applies this */
    /* Or remove if JS handles transition directly */
}


/* Main title text within the button */

.fuse-main-title-actual {
    display: block;
    font-size: var(--e-global-typography-c2726d0-font-size, 16px) !important;
    font-weight: var(--e-global-typography-c2726d0-font-weight, 600) !important;
    text-transform: var(--e-global-typography-c2726d0-text-transform, none) !important;
    line-height: var(--e-global-typography-c2726d0-line-height, 1.3) !important;
    letter-spacing: var(--e-global-typography-c2726d0-letter-spacing, normal) !important;
    transition: color 0.4s ease;
}

body.single-ssindustry .fuse-tabs-carousel-widget.text .fuse-main-title-actual {
    font-size: var(--e-global-typography-95df7da-font-size) !important;
    font-weight: var(--e-global-typography-95df7da-font-weight) !important;
    line-height: var(--e-global-typography-95df7da-line-height) !important;
    letter-spacing: var(--e-global-typography-95df7da-letter-spacing) !important;
    color: var(--e-global-color-ac618ca);
}

.air-style .fuse-tabs-carousel-widget.text .fuse-main-title-actual {
    border: 1px solid var(--e-global-color-b881286);
    padding: 10px 20px 11px 20px;
    border-radius: 100px;
    font-size: var(--e-global-typography-b41ad82-font-size) !important;
    font-weight: var(--e-global-typography-b41ad82-font-weight) !important;
    text-transform: var(--e-global-typography-b41ad82-text-transform) !important;
    line-height: var(--e-global-typography-b41ad82-line-height) !important;
    letter-spacing: var(--e-global-typography-b41ad82-letter-spacing) !important;
    color: var(--e-global-color-text)!important;
    transition: border 0.3s ease;
    display: flex;
    align-items: center;
}

.air-style .fuse-tabs-carousel-widget.text .fuse-main-title-actual::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='4.5' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E%0A");
    background-size: 10px 10px;
    height: 10px;
    width: 10px;
    display: block;
    margin-right: 10px;
    transform: background-image 0.3s ease;
}

.air-style .fuse-tabs-carousel-widget.text .fuse-tab-title.active .fuse-main-title-actual::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%2329FFC0' /%3E%3C/svg%3E%0A");
}

body.single-ssindustry .fuse-tabs-carousel-widget.text .fuse-tab-title .fuse-main-title-actual::after {
    content: '';
    width: 500%;
    /* lowercase 'width' */
    height: 2px;
    background-color: var(--e-global-color-secondary);
    display: inline-block;
    margin-top: -10px;
    margin-left: 30px;
    transition: opacity 0.3s ease;
    opacity: 0;
}

body.single-ssindustry .fuse-tabs-carousel-widget.text .fuse-tab-title.active .fuse-main-title-actual::after {
    opacity: 1;
}


/* Active state for main title color */

.fuse-tab-title.active .fuse-main-title-actual {
    color: var(--e-global-color-text);
    /* Active color from Elementor global */
}

body.single-ssindustry .fuse-tab-title.active .fuse-main-title-actual {
    color: var(--e-global-color-fa11112);
}

.air-style .fuse-tab-title.active .fuse-main-title-actual {
    border-color: var(--e-global-color-primary);
    transition: border-color 0.3s ease;
}

.fuse-tabs-carousel-widget.text .fuse-main-title-actual {
    letter-spacing: var(--e-global-typography-text-letter-spacing) !important;
    /* Ensure this var exists */
    font-size: var(--e-global-typography-4b20071-font-size) !important;
    font-weight: var(--e-global-typography-4b20071-font-weight) !important;
    line-height: var(--e-global-typography-4b20071-line-height) !important;
}


/* Subheading text within the button */

.fuse-tab-subheading {
    display: block;
    font-size: var(--e-global-typography-64b0d13-font-size, 14px);
    font-weight: var(--e-global-typography-64b0d13-font-weight, 400);
    line-height: var(--e-global-typography-64b0d13-line-height, 1.4);
    text-transform: var(--e-global-typography-64b0d13-text-transform, none);
    letter-spacing: var(--e-global-typography-c2726d0-letter-spacing, normal) !important;
    /* Re-check if this should be different from main title's letter-spacing */
    color: var(--e-global-color-text, #555);
    /* Default subheading color */
    /* Animation for reveal */
    opacity: 0;
    transform: translateY(8px);
    max-height: 1em;
    overflow: hidden;
    pointer-events: none;
    margin-top: 0;
    /* Initially no margin */
    box-sizing: border-box;
    will-change: opacity, max-height;
    /*   transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s, max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1); */
    transition: max-height 0.5s ease, opacity 0.5s ease;
    height: 0;
}


/* Active state for subheading reveal */

.fuse-tab-title.active .fuse-tab-subheading {
    opacity: 1;
    transform: translateY(0);
    max-height: 5rem;
    /* Allow enough space for content */
    pointer-events: auto;
    margin-top: 0;
    /* Space when expanded */
    height: auto;
    will-change: opacity, max-height;
    /*   transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s, max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1); */
    transition: max-height 0.5s ease, opacity 0.5s ease;
}


/* ==== TAB CONTENT PANELS ==== */


/* Tab content panels */

.fuse-tab-panel {
    /* display: none; /* REMOVE THIS - JS will not set display directly anymore */
    opacity: 0;
    visibility: hidden;
    /* Hide from layout and screen readers when not active */
    pointer-events: none;
    /* Prevent interaction when not active */
    position: absolute;
    /* Take inactive panels out of flow to prevent height issues */
    width: 100%;
    /* Ensure it still takes up width for measurement if needed, or adjust */
    left: 0;
    /* Align with parent */
    top: 0;
    /* Align with parent */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
    /* Delay visibility change until after opacity transition */
    /* Note: Transitioning display is not possible. We use opacity and visibility. */
}

.fuse-tab-panel.active {
    /* display: block; /* This can still be here or handled by JS if needed for initial state */
    /*  position: relative; */
    /* Bring active panel back into normal flow */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s, 0s;
    /* Apply active state immediately for visibility and opacity */
}


/* Lottie wrapper inside panel - slightly delayed fade */

.fuse-lottie-wrapper {
    background: #f3f3f3;
    width: 100%;
    position: relative;
    opacity: 0;
    transition: opacity 0.4s ease-in-out 0.2s;
    /* Starts after panel is visible */
}

.fuse-tab-panel.active .fuse-lottie-wrapper {
    opacity: 1;
}

.fuse-tabs-carousel-widget.text .fuse-tab-panel {
    padding: 32px;
    /* Your existing padding */
}

body.single-ssindustry .fuse-tabs-carousel-widget.text .fuse-tab-panel,
.air-style .fuse-tabs-carousel-widget.text .fuse-tab-panel {
    padding: 40px;
}


/* Wrapper for heading and main text inside a text panel */

.fuse-tabs-carousel-widget.text .fuse-tab-text-content-wrapper {
    /* This wrapper doesn't need its own transition if children handle it */
    /* You could add perspective here if you wanted 3D transforms, but not needed for simple fade/slide */
}

.air-style .fuse-tabs-carousel-widget.text .fuse-tab-text-content-wrapper {
    padding-top: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='33' viewBox='0 0 52 33' fill='none'%3E%3Cg clip-path='url(%23clip0_10040_8248)'%3E%3Cpath d='M30.475 26.2039C30.475 27.7731 29.2001 29.0454 27.6277 29.0454C26.0553 29.0454 24.7805 27.7731 24.7805 26.2039V20.2476C24.7805 13.4183 19.233 7.88281 12.3906 7.88281C5.5482 7.88281 0 13.4191 0 20.2476C0 27.0762 5.54749 32.6124 12.3899 32.6124C14.9016 32.6124 17.2376 31.8661 19.19 30.5845L17.7746 27.2135C16.2854 28.362 14.4176 29.0454 12.3899 29.0454C7.52141 29.0454 3.57428 25.1062 3.57428 20.2476C3.57428 15.389 7.52141 11.4499 12.3899 11.4499C17.2584 11.4499 21.2055 15.389 21.2055 20.2476V26.2039C21.2055 29.7437 24.0807 32.6131 27.6277 32.6131C31.1748 32.6131 34.05 29.7437 34.05 26.2039V8.4617H30.4757V26.2039H30.475Z' fill='%230858FF'/%3E%3Cpath d='M50.7932 8.46094C43.9564 8.46094 38.4141 14.0033 38.4141 20.8401V32.0814H41.9891V20.5431C41.9891 15.6807 45.9308 11.7389 50.7932 11.7389V8.46094Z' fill='%230858FF'/%3E%3Cpath d='M34.2304 0.570312H30.332V4.46864H34.2304V0.570312Z' fill='%230858FF'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_10040_8248'%3E%3Crect width='51.7242' height='32.6129' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: auto;
}

.fuse-tabs-carousel-widget.text .fuse-tab-text-heading {
    font-size: var(--e-global-typography-95df7da-font-size);
    font-weight: var(--e-global-typography-95df7da-font-weight);
    line-height: var(--e-global-typography-95df7da-line-height);
    letter-spacing: var(--e-global-typography-95df7da-letter-spacing);
    padding-bottom: 10px;
    margin-top: 0;
    /* Fade-in/slide-up properties */
    opacity: 0;
    transform: translateY(15px);
    /* Start slightly lower (e.g., 15px down) */
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, /* Delay after panel becomes active */
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
    will-change: opacity, transform;
}

.fuse-tabs-carousel-widget.text .fuse-tab-panel.active .fuse-tab-text-heading {
    opacity: 1;
    transform: translateY(0);
    /* Moves up to its natural position */
}

.fuse-tabs-carousel-widget.text .fuse-tab-main-text {
    font-size: var(--e-global-typography-64b0d13-font-size);
    font-weight: var(--e-global-typography-64b0d13-font-weight);
    line-height: var(--e-global-typography-64b0d13-line-height);
    /* Fade-in/slide-up properties */
    opacity: 0;
    transform: translateY(32px);
    /* Start slightly lower */
    /* Stagger this slightly after the heading */
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
    will-change: opacity, transform;
}

.air-style .fuse-tabs-carousel-widget.text .fuse-tab-main-text {
    color: var(--e-global-color-fa11112);
    font-size: var(--e-global-typography-0cfc7fa-font-size);
    font-weight: var(--e-global-typography-0cfc7fa-font-weight);
    line-height: var(--e-global-typography-0cfc7fa-line-height);
}

.fuse-tabs-carousel-widget.text .fuse-tab-panel.active .fuse-tab-main-text {
    opacity: 1;
    transform: translateY(0);
    /* Moves up to its natural position */
}

.fuse-tabs-carousel-widget.text .fuse-tab-main-text p:first-child {
    margin-top: 0;
}

.fuse-tabs-carousel-widget.text .fuse-tab-main-text p:last-child {
    margin-bottom: 0;
}


/* ==== DESKTOP CONCERTINA STYLES FOR TAB TITLES (min-width: 768px) ==== */


/* This section is primarily for JS (`updateTabTitleHeight`) to target.
   The actual height values will be set by JS. CSS here just ensures `auto` by default. */

@media (min-width: 768px) {
    .fuse-tab-title {
        /* JS (`updateTabTitleHeight`) will set explicit pixel heights for animation */
        /* then revert to 'auto' for the active tab after animation. */
        /* The `transition` for height is on `.fuse-tab-title-text` if JS animates that,
           OR on `.fuse-tab-title` if JS animates this directly.
           Your JS animates .fuse-tab-title, so transition should be here. */
        transition-property: height, background-color, color, border-color;
        transition-duration: 0.3s, 0.4s, 0.4s, 0.4s;
        /* JS uses 0.3s for height */
        transition-timing-function: ease-in-out, ease, ease, ease;
        /* JS uses ease-in-out */
        height: auto;
        /* Default, JS will override for animation */
    }
    .fuse-tab-title.active {
        height: auto !important;
        /* JS will set specific height, then revert to auto */
    }
}


/* ==== MOBILE STYLES (max-width: 767px) ==== */

@media (max-width: 767px) {
    .fuse-tabs-carousel-widget {
        flex-direction: column;
    }
    .fuse-tabs-navigation,
    .fuse-tabs-content-wrapper,
    .fuse-tabs-carousel-widget.text .fuse-tabs-content-wrapper {
        /* Target text mode specifically too */
        flex-basis: auto;
        /* Reset flex basis */
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
    .fuse-tabs-navigation {
        margin-bottom: 16px;
        padding-bottom: 0;
        /* Remove large desktop bottom padding */
    }
    .fuse-tab-title {
        height: auto !important;
        /* Let height be natural */
        padding: 12px 15px !important;
        /* Your desired mobile padding */
        /* No fixed height concertina on mobile, so JS height animation for titles is less relevant,
           but updateTabTitleHeight has mobile check. */
    }
    .fuse-tab-title.active {
        height: auto !important;
    }
    .fuse-tab-title.active .fuse-tab-subheading {
        margin-top: 6px;
    }
    .fuse-tabs-carousel-widget.text .fuse-tab-panel {
        padding: 20px;
        /* Adjust mobile padding for text panels */
    }
}


/* ==== ACCESSIBILITY: REDUCE MOTION ==== */

@media (prefers-reduced-motion: reduce) {
    .fuse-tabs-carousel-widget,
    .fuse-tabs-carousel-widget * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-delay: 0ms !important;
        animation-delay: 0ms !important;
    }
}