<link rel="stylesheet" type="text/css" href="{$WEB_ROOT}/templates/orderforms/standard_cart/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" />
<script src="{$WEB_ROOT}/templates/orderforms/standard_cart/js/scripts.min.js"></script>
<script src="{$WEB_ROOT}/templates/{$template}/layouts/wp-{$layoutnotset}/assets/js/custom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- CUSTOM STYLES TO PREVENT CSS CONFLICTS -->
<style>
/* CSS Reset for pricing section only */
.naamx-pricing-container,
.naamx-pricing-container * {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    line-height: normal !important;
    text-align: left !important;
}

/* Main Container */
.naamx-pricing-container {
    background: #f8f9fa !important;
    padding: 80px 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.naamx-pricing-pattern {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-image: url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z" fill="%2300401A" fill-opacity="0.03" fill-rule="evenodd"/%3E%3C/svg%3E') !important;
    opacity: 0.5 !important;
}

.naamx-pricing-wrapper {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

/* Section Header */
.naamx-pricing-header {
    text-align: center !important;
    margin-bottom: 50px !important;
}

.naamx-title-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
}

.naamx-title-line {
    width: 40px !important;
    height: 3px !important;
    background: #00401A !important;
}

.naamx-title-line-left {
    margin-right: 15px !important;
}

.naamx-title-line-right {
    margin-left: 15px !important;
}

.naamx-main-title {
    color: #00401A !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    margin: 0 !important;
}

.naamx-subtitle {
    color: #666 !important;
    font-size: 18px !important;
    max-width: 700px !important;
    margin: 0 auto !important;
}

/* Pakistan Badge */
.naamx-pakistan-badge {
    text-align: center !important;
    margin-bottom: 40px !important;
}

.naamx-badge-inner {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(0, 64, 26, 0.1) !important;
    padding: 8px 20px !important;
    border-radius: 25px !important;
    border: 1px solid rgba(0, 64, 26, 0.2) !important;
}

.naamx-flag-img {
    margin-right: 10px !important;
    width: 20px !important;
    height: 12px !important;
}

.naamx-badge-text {
    color: #00401A !important;
    font-weight: 600 !important;
}

/* Tabs */
.naamx-tabs-container {
    margin-bottom: 50px !important;
}

.naamx-tabs-list {
    display: flex !important;
    justify-content: center !important;
    list-style: none !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
}

.naamx-tab-item {
    margin: 5px !important;
}

.naamx-tab-link {
    background: white !important;
    color: #00401A !important;
    border: 2px solid #00401A !important;
    border-radius: 25px !important;
    padding: 12px 30px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.naamx-tab-link i {
    margin-right: 8px !important;
}

.naamx-tab-link.active {
    background: #00401A !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 64, 26, 0.3) !important;
}

.naamx-tab-link:hover:not(.active) {
    background: #00401A !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 64, 26, 0.3) !important;
}

/* Tab Content */
.naamx-tab-content {
    margin-top: 20px !important;
}

/* Product Card */
.naamx-product-card {
    background: white !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 64, 26, 0.1) !important;
    border: 2px solid #e8f5e8 !important;
    height: 100% !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

.naamx-product-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0, 64, 26, 0.2) !important;
    border-color: #00401A !important;
}

.naamx-popular-badge {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 2 !important;
}

.naamx-popular-badge span {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #333 !important;
    padding: 5px 15px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.naamx-card-header {
    background: linear-gradient(135deg, #00401A 0%, #006633 100%) !important;
    padding: 25px !important;
    text-align: center !important;
    position: relative !important;
}

.naamx-card-title {
    color: white !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.naamx-stock-badge {
    background: rgba(255,255,255,0.2) !important;
    color: white !important;
    padding: 5px 15px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    font-size: 14px !important;
}

.naamx-card-body {
    padding: 25px !important;
}

.naamx-product-description {
    color: #666 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    min-height: 60px !important;
}

.naamx-features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
}

.naamx-feature-item {
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

.naamx-feature-icon {
    color: #28a745 !important;
    font-size: 16px !important;
    min-width: 20px !important;
    margin-right: 12px !important;
}

.naamx-feature-text {
    flex: 1 !important;
}

.naamx-feature-name {
    font-weight: 600 !important;
    color: #333 !important;
}

.naamx-feature-value {
    color: #00401A !important;
    font-weight: 700 !important;
    float: right !important;
}

.naamx-card-footer {
    padding: 0 25px 25px !important;
    border-top: 1px solid #f0f0f0 !important;
    padding-top: 25px !important;
}

/* PRICE LINE - FIXED IN ONE LINE */
.naamx-price-container {
    text-align: center !important;
    margin-bottom: 20px !important;
}

.naamx-price-line {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.naamx-price-amount {
    color: #00401A !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

.naamx-price-cycle {
    color: #666 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    display: inline-block !important;
    white-space: nowrap !important;
    margin-left: 5px !important;
}

.naamx-starting-from {
    color: #666 !important;
    font-size: 14px !important;
    margin-bottom: 5px !important;
}

.naamx-setup-fee {
    color: #dc3545 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-top: 5px !important;
}

.naamx-order-button {
    background: linear-gradient(135deg, #00401A 0%, #006633 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 15px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    text-decoration: none !important;
    margin-bottom: 10px !important;
    cursor: pointer !important;
}

.naamx-order-button:hover {
    background: linear-gradient(135deg, #006633 0%, #00401A 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0, 64, 26, 0.4) !important;
    color: white !important;
}

.naamx-guarantee-text {
    color: #666 !important;
    font-size: 13px !important;
    text-align: center !important;
}

/* Owl Carousel Custom */
.naamx-owl-carousel .owl-nav {
    position: absolute !important;
    top: -80px !important;
    right: 0 !important;
    display: flex !important;
    gap: 10px !important;
}

.naamx-owl-carousel .owl-nav button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    background: #00401A !important;
    color: white !important;
    border: none !important;
}

.naamx-owl-carousel .owl-nav button:hover {
    background: #006633 !important;
    transform: scale(1.1) !important;
}

.naamx-owl-carousel .owl-dots {
    text-align: center !important;
    margin-top: 20px !important;
}

.naamx-owl-carousel .owl-dot span {
    width: 12px !important;
    height: 12px !important;
    margin: 5px !important;
    background: #ddd !important;
    display: block !important;
    border-radius: 50% !important;
}

.naamx-owl-carousel .owl-dot.active span {
    background: #00401A !important;
}

/* Responsive */
@media (max-width: 991px) {
    .naamx-pricing-container {
        padding: 60px 0 !important;
    }
    
    .naamx-main-title {
        font-size: 28px !important;
    }
    
    .naamx-tabs-list {
        flex-wrap: wrap !important;
    }
    
    .naamx-price-amount {
        font-size: 32px !important;
    }
    
    .naamx-price-cycle {
        font-size: 16px !important;
    }
    
    .naamx-owl-carousel .owl-nav {
        position: relative !important;
        top: 0 !important;
        justify-content: center !important;
        margin-top: 20px !important;
    }
}

@media (max-width: 767px) {
    .naamx-pricing-container {
        padding: 40px 0 !important;
    }
    
    .naamx-main-title {
        font-size: 24px !important;
    }
    
    .naamx-tabs-list {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .naamx-tab-item {
        width: 100% !important;
        max-width: 300px !important;
        margin: 5px 0 !important;
    }
    
    .naamx-tab-link {
        width: 100% !important;
        text-align: center !important;
    }
    
    .naamx-price-amount {
        font-size: 28px !important;
    }
    
    .naamx-price-cycle {
        font-size: 14px !important;
    }
    
    .naamx-order-button {
        padding: 12px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 575px) {
    .naamx-price-line {
        flex-direction: row !important;
    }
    
    .naamx-price-amount {
        font-size: 24px !important;
    }
    
    .naamx-price-cycle {
        font-size: 12px !important;
    }
}
</style>

<!-- HTML STRUCTURE -->
<section class="naamx-pricing-container">
    <div class="naamx-pricing-pattern"></div>
    
    <div class="naamx-pricing-wrapper">
        <!-- Section Header -->
        <div class="naamx-pricing-header">
            <div class="naamx-title-container">
                <div class="naamx-title-line naamx-title-line-left"></div>
                <h2 class="naamx-main-title">Browse Our Products/Services</h2>
                <div class="naamx-title-line naamx-title-line-right"></div>
            </div>
            <p class="naamx-subtitle">
                Choose from our premium hosting solutions designed for Pakistan's market
            </p>
        </div>
        
        <!-- Pakistan Badge -->
        <div class="naamx-pakistan-badge">
            <div class="naamx-badge-inner">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Flag_of_Pakistan.svg/20px-Flag_of_Pakistan.svg.png" 
                     alt="Pakistan" 
                     class="naamx-flag-img">
                <span class="naamx-badge-text">🇵🇰 Optimized for Pakistan</span>
            </div>
        </div>

        <!-- Tabs -->
        <div class="naamx-tabs-container">
            <ul class="naamx-tabs-list" role="tablist">
                {assign var=val1 value=1}
                {foreach $allProducts as $groupID => $item}
                    <li class="naamx-tab-item">
                        <a class="naamx-tab-link {if $val1 eq 1}active{/if}" 
                           data-toggle="tab" 
                           href="#naamx-tab-{$groupID}" 
                           role="tab">
                            <i class="fas fa-server"></i>{$item.group}
                        </a>
                    </li>
                    {assign var=val1 value=$val1+1}
                {/foreach}
            </ul>
        </div>

        <!-- Tab Content -->
        {assign var=val value=1}
        <div class="tab-content naamx-tab-content">
            {foreach $allProducts as $groupID => $item}
                <div class="tab-pane fade {if $val eq 1}show active{/if}" id="naamx-tab-{$groupID}" role="tabpanel">
                    <div class="owl-carousel naamx-owl-carousel owl-theme">
                        {foreach $item.products as $product}
                            <div class="item">
                                <div class="naamx-product-card">
                                    <!-- Popular Badge -->
                                    {if $product@iteration == 1}
                                    <div class="naamx-popular-badge">
                                        <span>
                                            <i class="fas fa-crown"></i> Most Popular
                                        </span>
                                    </div>
                                    {/if}
                                    
                                    <!-- Header -->
                                    <div class="naamx-card-header">
                                        <div class="naamx-card-title">{$product.name}</div>
                                        {if $product.qty}
                                            <div class="naamx-stock-badge">
                                                <i class="fas fa-box"></i> {$product.qty} {$LANG.orderavailable}
                                            </div>
                                        {/if}
                                    </div>
                                    
                                    <!-- Product Description -->
                                    <div class="naamx-card-body">
                                        {if $product.featuresdesc}
                                            <p class="naamx-product-description">
                                                {$product.featuresdesc}
                                            </p>
                                        {/if}
                                        
                                        <!-- Features -->
                                        <ul class="naamx-features-list">
                                            {foreach $product.features as $feature => $value}
                                                <li class="naamx-feature-item">
                                                    <i class="fas fa-check-circle naamx-feature-icon"></i>
                                                    <span class="naamx-feature-text">
                                                        <span class="naamx-feature-name">{$feature}</span>
                                                        {if $value}
                                                            <span class="naamx-feature-value">{$value}</span>
                                                        {/if}
                                                    </span>
                                                </li>
                                            {/foreach}
                                        </ul>
                                    </div>
                                    
                                    <!-- Footer -->
                                    <div class="naamx-card-footer">
                                        <!-- Pricing - ONE LINE FIXED -->
                                        <div class="naamx-price-container">
                                            {if $product.bid}
                                                <div class="naamx-starting-from">{$LANG.bundledeal}</div>
                                                {if $product.displayprice}
                                                    <div class="naamx-price-amount">{$product.displayprice}</div>
                                                {/if}
                                            {else}
                                                {if $product.pricing.hasconfigoptions}
                                                    <div class="naamx-starting-from">{$LANG.startingfrom}</div>
                                                {/if}
                                                <!-- ONE LINE PRICE -->
                                                <div class="naamx-price-line">
                                                    <span class="naamx-price-amount">
                                                        {$product.pricing.minprice.price}
                                                    </span>
                                                    <span class="naamx-price-cycle">
                                                        {if $product.pricing.minprice.cycle eq "monthly"}
                                                            /{$LANG.orderpaymenttermmonthly}
                                                        {elseif $product.pricing.minprice.cycle eq "quarterly"}
                                                            /{$LANG.orderpaymenttermquarterly}
                                                        {elseif $product.pricing.minprice.cycle eq "semiannually"}
                                                            /{$LANG.orderpaymenttermsemiannually}
                                                        {elseif $product.pricing.minprice.cycle eq "annually"}
                                                            /{$LANG.orderpaymenttermannually}
                                                        {elseif $product.pricing.minprice.cycle eq "biennially"}
                                                            /{$LANG.orderpaymenttermbiennially}
                                                        {elseif $product.pricing.minprice.cycle eq "triennially"}
                                                            /{$LANG.orderpaymenttermtriennially}
                                                        {/if}
                                                    </span>
                                                </div>
                                                {if $product.pricing.minprice.setupFee}
                                                    <div class="naamx-setup-fee">
                                                        + {$product.pricing.minprice.setupFee->toPrefixed()} {$LANG.ordersetupfee}
                                                    </div>
                                                {/if}
                                            {/if}
                                        </div>
                                        
                                        <!-- Order Button -->
                                        <a href="cart.php?a=add&{if $product.bid}bid={$product.bid}{else}pid={$product.pid}{/if}" 
                                           class="naamx-order-button">
                                            <i class="fas fa-shopping-cart"></i>
                                            {$LANG.ordernowbutton}
                                        </a>
                                        
                                        <!-- Money Back Guarantee -->
                                        <div class="naamx-guarantee-text">
                                            <i class="fas fa-shield-alt me-1"></i>
                                            30-day money-back guarantee
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {/foreach}
                    </div>
                </div>
                {assign var=val value=$val+1}
            {/foreach}
        </div>
        
        <!-- Additional Info -->
        <div class="row mt-5 pt-4" style="border-top: 2px solid #e8f5e8; margin-top: 50px !important; padding-top: 40px !important;">
            <div class="col-md-4 mb-4">
                <div class="text-center">
                    <div style="width: 60px; height: 60px; background: rgba(0, 64, 26, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                        <i class="fas fa-server" style="color: #00401A; font-size: 24px;"></i>
                    </div>
                    <h5 style="color: #00401A; font-weight: 600; margin-bottom: 10px;">Pakistan Data Center</h5>
                    <p style="color: #666; font-size: 14px; margin: 0;">Local hosting for faster website loading in Pakistan</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="text-center">
                    <div style="width: 60px; height: 60px; background: rgba(0, 64, 26, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                        <i class="fas fa-headset" style="color: #00401A; font-size: 24px;"></i>
                    </div>
                    <h5 style="color: #00401A; font-weight: 600; margin-bottom: 10px;">24/7 Urdu Support</h5>
                    <p style="color: #666; font-size: 14px; margin: 0;">Get support in Urdu/English anytime</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="text-center">
                    <div style="width: 60px; height: 60px; background: rgba(0, 64, 26, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px;">
                        <i class="fas fa-shield-alt" style="color: #00401A; font-size: 24px;"></i>
                    </div>
                    <h5 style="color: #00401A; font-weight: 600; margin-bottom: 10px;">Free SSL Included</h5>
                    <p style="color: #666; font-size: 14px; margin: 0;">Secure your website with free SSL certificates</p>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(document).ready(function() {
    // Initialize Owl Carousel for our custom section
    $('.naamx-owl-carousel').owlCarousel({
        loop: true,
        margin: 30,
        nav: true,
        dots: true,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 2
            },
            992: {
                items: 3
            },
            1200: {
                items: 4
            }
        },
        navText: [
            '<i class="fas fa-chevron-left"></i>',
            '<i class="fas fa-chevron-right"></i>'
        ]
    });
    
    // Tab switching functionality
    $('.naamx-tab-link').on('click', function(e) {
        e.preventDefault();
        const target = $(this).attr('href');
        
        // Remove active class from all tabs
        $('.naamx-tab-link').removeClass('active');
        $('.tab-pane').removeClass('show active');
        
        // Add active class to clicked tab
        $(this).addClass('active');
        $(target).addClass('show active');
        
        // Refresh owl carousel
        setTimeout(() => {
            $(target).find('.naamx-owl-carousel').trigger('refresh.owl.carousel');
        }, 100);
    });
    
    // Hover effects for product cards
    $(document).on('mouseenter', '.naamx-product-card', function() {
        $(this).css({
            'transform': 'translateY(-10px)',
            'box-shadow': '0 20px 40px rgba(0, 64, 26, 0.2)',
            'border-color': '#00401A'
        });
    }).on('mouseleave', '.naamx-product-card', function() {
        $(this).css({
            'transform': 'translateY(0)',
            'box-shadow': '0 10px 30px rgba(0, 64, 26, 0.1)',
            'border-color': '#e8f5e8'
        });
    });
    
    // Hover effects for order buttons
    $(document).on('mouseenter', '.naamx-order-button', function() {
        $(this).css({
            'background': 'linear-gradient(135deg, #006633 0%, #00401A 100%)',
            'transform': 'translateY(-2px)',
            'box-shadow': '0 8px 20px rgba(0, 64, 26, 0.4)'
        });
    }).on('mouseleave', '.naamx-order-button', function() {
        $(this).css({
            'background': 'linear-gradient(135deg, #00401A 0%, #006633 100%)',
            'transform': 'translateY(0)',
            'box-shadow': 'none'
        });
    });
    
    // Auto rotate tabs every 10 seconds
    let currentTabIndex = 0;
    const tabs = $('.naamx-tab-link');
    const tabPanes = $('.tab-pane');
    
    function rotateTabs() {
        if(tabs.length > 0) {
            tabs.removeClass('active');
            tabPanes.removeClass('show active');
            
            $(tabs[currentTabIndex]).addClass('active');
            $(tabPanes[currentTabIndex]).addClass('show active');
            
            // Refresh carousel
            setTimeout(() => {
                $(tabPanes[currentTabIndex]).find('.naamx-owl-carousel').trigger('refresh.owl.carousel');
            }, 100);
            
            currentTabIndex = (currentTabIndex + 1) % tabs.length;
        }
    }
    
    // Start auto rotation
    setInterval(rotateTabs, 10000);
});
</script>