/* Hide the before pseudo-element on active tabs */
.specs-col .pp-tabs-label.pp-tab-active .pp-tab-label-inner:before {
    display: none;
}

/* Increase font size for active tab */
.specs-col .pp-tabs-label.pp-tab-active .pp-tab-title {
    font-size: 20px !important;
}

.specs-col .our-business-tabs .pp-tabs-label.pp-tab-active .pp-tab-title {
    font-size: 16px !important;
}

.specs-col .pp-tabs-label:hover, .specs-col .pp-tab-active {
    transition: none;
    -webkit-transition: none;
}

/* Remove ALL focus styling on tabs, including dotted outline */
.pp-tabs-label,
.pp-tabs-label:focus,
.pp-tabs-label:active,
.pp-tabs-label:focus-visible,
.pp-tabs-label:focus-within,
.pp-tabs-label:-moz-focusring,
.pp-tabs-panel-label,
.pp-tabs-panel-label:focus,
.pp-tabs-panel-label:active,
.pp-tabs-panel-label:focus-visible,
.pp-tabs-panel-label:focus-within,
.pp-tabs-panel-label:-moz-focusring {
    outline: none !important;
    box-shadow: none !important;
    border-style: none !important;
}

/* Also target the inner elements that might get focus styling */
.pp-tabs-label *,
.pp-tabs-label *:focus,
.pp-tabs-label *:active,
.pp-tabs-label *:focus-visible,
.pp-tabs-panel-label *,
.pp-tabs-panel-label *:focus,
.pp-tabs-panel-label *:active,
.pp-tabs-panel-label *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Add gradient border to active tab */
.specs-col .pp-tabs-label.pp-tab-active {
    border-bottom: 2px solid;
    border-image-source: linear-gradient(270deg, #B31D2F 0.68%, #7D4A99 36%, #685AB4 51%, #2E75D8 66%, #94B0E8 82.5%, #50BBCA 98%);
    border-image-slice: 1;
}

/* Ensure proper spacing */
.specs-col .pp-tabs-style-7 .pp-tabs-label {
    margin-bottom: 0;
    padding-bottom: 5px;
}

/* Make sure this style applies to both horizontal and vertical tabs */
.specs-col .pp-tabs-horizontal .pp-tabs-label.pp-tab-active,
.specs-col .pp-tabs-vertical-left .pp-tabs-label.pp-tab-active,
.specs-col .pp-tabs-vertical-right .pp-tabs-label.pp-tab-active {
    border-bottom: 2px solid;
    border-image-source: linear-gradient(270deg, #B31D2F 0.68%, #7D4A99 36%, #685AB4 51%, #2E75D8 66%, #94B0E8 82.5%, #50BBCA 98%);
    border-image-slice: 1;
}

/* Proper spacing for desktop screens (≥1440px) */
@media (min-width: 1024px) {
    .specs-col .pp-tab-active .pp-tab-label-inner {
        padding-bottom: 13px !important;
    }
    
    .specs-col .our-business-tabs .pp-tab-active .pp-tab-label-inner {
        padding-bottom: 18px !important;
    }
}

/* Fix for tablet screens (1024px and 768px) where tab titles wrap to multiple lines */
@media (max-width: 1024px) and (min-width: 768px) {
    /* For tablet screens, we need a special approach for the gradient border when text wraps */
    .specs-col .pp-tabs-horizontal .pp-tabs-label.pp-tab-active,
    .specs-col .pp-tabs-vertical-left .pp-tabs-label.pp-tab-active,
    .specs-col .pp-tabs-vertical-right .pp-tabs-label.pp-tab-active {
        /* Remove the standard border and ensure proper positioning context */
        border-bottom: none !important;
        position: relative;
        /* Add padding at the bottom to make room for the gradient line */
        padding-bottom: 2px;
    }
    
    /* Target the inner label container to ensure it has proper positioning */
    .specs-col .pp-tabs-label.pp-tab-active .pp-tab-label-inner {
        position: relative;
    }
    
    /* Use pseudo-element on the active tab to create the gradient border */
    .specs-col .pp-tabs-label.pp-tab-active::after {
        content: '';
        position: absolute;
        bottom: 0;  /* Position at the very bottom of the tab */
        left: 0;
        width: 100%;
        height: 2px;
        z-index: 1;  /* Ensure it appears above other elements */
        background: linear-gradient(270deg, #B31D2F 0.68%, #7D4A99 36%, #685AB4 51%, #2E75D8 66%, #94B0E8 82.5%, #50BBCA 98%);
    }
    
    /* Add appropriate padding to the tab content to ensure proper spacing
       The gradient line will appear below this padding */
    .specs-col .pp-tab-active .pp-tab-label-inner {
        padding-bottom: 12px !important;
    }
    
    /* Specific adjustment for our-business-tabs on tablets */
    .specs-col .our-business-tabs .pp-tab-active .pp-tab-label-inner {
        padding-bottom: 18px !important;
    }
    
    /* Ensure wrapping text remains properly spaced */
    .specs-col .pp-tabs-label .pp-tab-title {
        line-height: 1.4;
        display: inline-block;
    }
}

/* Hide toggle icons on mobile screens */
@media only screen and (max-width: 767px) {
    .specs-col .pp-toggle-icon {
        display: none !important;
    }
}