/**
 * Gads Feature Tabs - Feature list with title and description
 * 
 * @package Flatsome Child
 */

/* ==========================================================================
   Variables
   ========================================================================== */

.gads-feature-tabs {
    --gft-gap: 30px;
    --gft-features-width: 40%;
    --gft-content-width: 60%;
    --gft-indicator-color: var(--primary-color, #446084);
    --gft-title-color: #1a1a1a;
    --gft-title-color-active: var(--primary-color, #446084);
    --gft-desc-color: #666;
}

/* ==========================================================================
   Container
   ========================================================================== */

.gads-feature-tabs {
    width: 100%;
    display: flex;
    gap: var(--gft-gap);
}

/* ==========================================================================
   Layout: Features Left (default)
   ========================================================================== */

.gads-feature-tabs.layout-left {
    flex-direction: row;
}

.gads-feature-tabs.layout-left .gft-features {
    width: var(--gft-features-width);
    flex-shrink: 0;
}

.gads-feature-tabs.layout-left .gft-content {
    width: var(--gft-content-width);
}

/* ==========================================================================
   Layout: Features Right
   ========================================================================== */

.gads-feature-tabs.layout-right {
    flex-direction: row-reverse;
}

.gads-feature-tabs.layout-right .gft-features {
    width: var(--gft-features-width);
    flex-shrink: 0;
}

.gads-feature-tabs.layout-right .gft-content {
    width: var(--gft-content-width);
}

/* ==========================================================================
   Layout: Features Top
   ========================================================================== */

.gads-feature-tabs.layout-top {
    flex-direction: column;
}

.gads-feature-tabs.layout-top .gft-features {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.gads-feature-tabs.layout-top .gft-features .gft-item {
    flex: 1;
    min-width: 200px;
    padding-left: 0;
    padding-bottom: 15px;
    border-left: none;
    border-bottom: 3px solid transparent;
}

.gads-feature-tabs.layout-top .gft-features .gft-item::before {
    display: none;
}

.gads-feature-tabs.layout-top .gft-features .gft-item.active {
    border-bottom-color: var(--gft-indicator-color);
}

.gads-feature-tabs.layout-top .gft-content {
    width: 100%;
}

/* ==========================================================================
   Features List
   ========================================================================== */

.gads-feature-tabs .gft-features {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gads-feature-tabs .gft-item {
    position: relative;
    padding: 20px 0 20px 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 1px solid #e0e0e0;
}

/* Active indicator line */
.gads-feature-tabs .gft-item::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.gads-feature-tabs .gft-item.active::before {
    background-color: var(--gft-indicator-color);
}

/* ==========================================================================
   Item Title
   ========================================================================== */

.gads-feature-tabs .gft-item-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--gft-title-color);
    line-height: 1.4;
    transition: color 0.3s ease;
}

.gads-feature-tabs .gft-item:hover .gft-item-title {
    color: var(--gft-title-color-active);
}

.gads-feature-tabs .gft-item.active .gft-item-title {
    color: var(--gft-title-color-active);
}

/* ==========================================================================
   Item Description (only visible when active)
   ========================================================================== */

.gads-feature-tabs .gft-item-desc {
    margin: 0;
    font-size: 14px;
    color: var(--gft-desc-color);
    line-height: 1.6;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
}

.gads-feature-tabs .gft-item.active .gft-item-desc {
    max-height: 200px;
    opacity: 1;
    margin-top: 10px;
}

/* ==========================================================================
   Content Panels
   ========================================================================== */

.gads-feature-tabs .gft-content {
    position: relative;
}

.gads-feature-tabs .gft-panel {
    display: none;
    animation: gftFadeIn 0.4s ease;
}

.gads-feature-tabs .gft-panel.active {
    display: block;
}

@keyframes gftFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */

@media only screen and (max-width: 64em) {
    .gads-feature-tabs {
        --gft-gap: 20px;
    }

    .gads-feature-tabs .gft-item-title {
        font-size: 16px;
    }

    .gads-feature-tabs .gft-item-desc {
        font-size: 13px;
    }
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media only screen and (max-width: 48em) {
    .gads-feature-tabs {
        flex-direction: column !important;
    }

    .gads-feature-tabs .gft-features,
    .gads-feature-tabs .gft-content {
        width: 100% !important;
    }

    .gads-feature-tabs .gft-item {
        padding: 15px 0 15px 20px;
    }

    .gads-feature-tabs .gft-item-title {
        font-size: 15px;
    }

    .gads-feature-tabs .gft-item-desc {
        font-size: 13px;
    }
}