/**
 * MN Eletricks - Tabs Centered Mode CSS
 * 
 * Styles for mobile centered mode functionality
 * 
 * @package MN_Eletricks
 * @since 1.1.0
 */

/* ==========================================================================
   Base Styles for Centered Mode
   ========================================================================== */

.mn-tabs-centered-enabled .elementor-tabs-wrapper,
.mn-tabs-centered-enabled .e-n-tabs-heading {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Enhanced scroll snap for better UX */
.mn-tabs-centered-enabled .elementor-tabs-wrapper {
    scroll-snap-type: x proximity;
}

.mn-tabs-centered-enabled .e-n-tabs-heading {
    scroll-snap-type: x proximity;
}

.mn-tabs-centered-enabled .elementor-tab-title,
.mn-tabs-centered-enabled .e-n-tab-title {
    scroll-snap-align: center;
}

/* ==========================================================================
   Mobile Specific Styles
   ========================================================================== */

@media (max-width: 767px) {
    /* Old Tabs Widget */
    .mn-tabs-centered-enabled.elementor-widget-tabs .elementor-tabs-wrapper {
        overflow-x: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    .mn-tabs-centered-enabled.elementor-widget-tabs .elementor-tabs-wrapper::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    /* New Nested Tabs Widget */
    .mn-tabs-centered-enabled.elementor-widget-n-tabs .e-n-tabs-heading {
        overflow-x: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    .mn-tabs-centered-enabled.elementor-widget-n-tabs .e-n-tabs-heading::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    /* Ensure tabs don't wrap on mobile when centered mode is enabled */
    .mn-tabs-centered-enabled .elementor-tabs-wrapper,
    .mn-tabs-centered-enabled .e-n-tabs-heading {
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }

    .mn-tabs-centered-enabled .elementor-tab-title,
    .mn-tabs-centered-enabled .e-n-tab-title {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* ==========================================================================
   Tablet Specific Styles
   ========================================================================== */

@media (max-width: 1024px) and (min-width: 768px) {
    .mn-tabs-centered-tablet .elementor-tabs-wrapper,
    .mn-tabs-centered-tablet .e-n-tabs-heading {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .mn-tabs-centered-tablet .elementor-tabs-wrapper::-webkit-scrollbar,
    .mn-tabs-centered-tablet .e-n-tabs-heading::-webkit-scrollbar {
        height: 4px;
    }

    .mn-tabs-centered-tablet .elementor-tabs-wrapper::-webkit-scrollbar-track,
    .mn-tabs-centered-tablet .e-n-tabs-heading::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 2px;
    }

    .mn-tabs-centered-tablet .elementor-tabs-wrapper::-webkit-scrollbar-thumb,
    .mn-tabs-centered-tablet .e-n-tabs-heading::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 2px;
    }
}

/* ==========================================================================
   Active Tab Highlighting
   ========================================================================== */

.mn-tabs-centered-enabled .elementor-tab-title.elementor-active,
.mn-tabs-centered-enabled .e-n-tab-title[aria-selected="true"] {
    position: relative;
}

/* Optional: Add a subtle glow effect to active tab in centered mode */
.mn-tabs-centered-enabled .elementor-tab-title.elementor-active::after,
.mn-tabs-centered-enabled .e-n-tab-title[aria-selected="true"]::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(97, 206, 112, 0.1), transparent);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mn-tabs-centered-enabled .elementor-tab-title.elementor-active:hover::after,
.mn-tabs-centered-enabled .e-n-tab-title[aria-selected="true"]:hover::after {
    opacity: 1;
}

/* ==========================================================================
   Animation Enhancements
   ========================================================================== */

.mn-tabs-centered-enabled .elementor-tab-title,
.mn-tabs-centered-enabled .e-n-tab-title {
    transition: all 0.3s ease;
}

/* Smooth transition for tab content */
.mn-tabs-centered-enabled .elementor-tab-content,
.mn-tabs-centered-enabled .e-con[role="tabpanel"] {
    transition: opacity 0.3s ease;
}

/* ==========================================================================
   Accessibility Improvements
   ========================================================================== */

/* Focus styles for keyboard navigation */
.mn-tabs-centered-enabled .elementor-tab-title:focus,
.mn-tabs-centered-enabled .e-n-tab-title:focus {
    outline: 2px solid #61ce70;
    outline-offset: 2px;
    z-index: 10;
}

/* Ensure focused tab is visible */
.mn-tabs-centered-enabled .elementor-tab-title:focus-visible,
.mn-tabs-centered-enabled .e-n-tab-title:focus-visible {
    scroll-margin: 20px;
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

[dir="rtl"] .mn-tabs-centered-enabled .elementor-tabs-wrapper,
[dir="rtl"] .mn-tabs-centered-enabled .e-n-tabs-heading {
    scroll-snap-type: x proximity;
}

[dir="rtl"] .mn-tabs-centered-enabled .elementor-tab-title,
[dir="rtl"] .mn-tabs-centered-enabled .e-n-tab-title {
    scroll-snap-align: center;
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.mn-tabs-centered-loading .elementor-tabs-wrapper,
.mn-tabs-centered-loading .e-n-tabs-heading {
    opacity: 0.7;
    pointer-events: none;
}

/* ==========================================================================
   Debug Mode (for development)
   ========================================================================== */

.mn-tabs-debug .mn-tabs-centered-enabled .elementor-tab-title.elementor-active,
.mn-tabs-debug .mn-tabs-centered-enabled .e-n-tab-title[aria-selected="true"] {
    box-shadow: 0 0 0 2px red !important;
}

.mn-tabs-debug .mn-tabs-centered-enabled .elementor-tabs-wrapper,
.mn-tabs-debug .mn-tabs-centered-enabled .e-n-tabs-heading {
    border: 2px dashed blue !important;
}