/**
 * Mobile Tabs Number Display Styles
 * Segmented rectangular design like the reference image
 * Uses plugin settings colors
 */

/* Mobile-specific tab styles - Connected segmented design */
@media (max-width: 768px) {
    /* CRITICAL: Create continuous bar appearance */
    .wcc-steps-tabs {
        /* Reset everything first */
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
        gap: 0 !important;
        border: none !important;
        /* Create connected tab bar with shared background */
        display: flex !important;
        align-items: stretch !important;
        height: 48px !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        /* Use the inactive tab background color as base */
        background: var(--wcc-inactive-tab-bg, #f0f0f0) !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        width: 100% !important;
        position: relative !important;
    }
    
    /* Reset individual tabs for segmented appearance */
    .wcc-step-tab {
        /* Remove all existing styling */
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Create rectangular segments */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 48px !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        position: relative !important;
        cursor: pointer !important;
        transition: background-color 0.2s ease !important;
        /* Inactive tabs are transparent to show parent background */
        background: transparent !important;
    }
    
    /* Active tab gets its own background from plugin settings */
    .wcc-step-tab.wcc-tab-active {
        /* This will be overridden by plugin inline styles */
        background: var(--wcc-active-tab-bg, #2271b1) !important;
    }
    
    /* Remove any ::before or ::after that might add spacing */
    .wcc-step-tab::before {
        display: none !important;
    }
    
    /* First tab - rounded left corners only */
    .wcc-steps-tabs .wcc-step-tab:first-child {
        border-radius: 6px 0 0 6px !important;
        border-left: none !important;
    }
    
    /* Last tab - rounded right corners only */
    .wcc-steps-tabs .wcc-step-tab:last-child {
        border-radius: 0 6px 6px 0 !important;
        border-right: none !important;
    }
    
    /* White divider between tabs (except after last and around active) */
    .wcc-step-tab:not(:last-child)::after {
        content: '' !important;
        position: absolute !important;
        right: 0 !important;
        top: 8px !important;
        bottom: 8px !important;
        width: 1px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        z-index: 2 !important;
    }
    
    /* Hide divider after active tab */
    .wcc-step-tab.wcc-tab-active::after {
        display: none !important;
    }
    
    /* Hide divider before active tab (if browser supports :has) */
    .wcc-step-tab:has(+ .wcc-tab-active)::after {
        display: none !important;
    }
    
    /* Inactive tabs - show only numbers */
    .wcc-step-tab:not(.wcc-tab-active) {
        flex: 0 0 60px !important;
        max-width: 60px !important;
        min-width: 60px !important;
    }
    
    .wcc-step-tab:not(.wcc-tab-active) .wcc-step-title.wcc-mobile-number-only {
        display: block !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-align: center !important;
        /* Use parent color */
        color: inherit !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Active tab - expand to show full title */
    .wcc-step-tab.wcc-tab-active {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 100px !important;
    }
    
    .wcc-step-tab.wcc-tab-active .wcc-step-title.wcc-mobile-active-title,
    .wcc-step-tab.wcc-tab-active .wcc-step-title {
        display: block !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 0 10px !important;
        /* Use parent color */
        color: inherit !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Ensure colors are inherited properly */
    .wcc-step-tab .wcc-step-title {
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .wcc-steps-tabs {
        height: 44px !important;
    }
    
    .wcc-step-tab {
        height: 44px !important;
    }
    
    .wcc-step-tab:not(.wcc-tab-active) {
        flex: 0 0 50px !important;
        max-width: 50px !important;
        min-width: 50px !important;
    }
    
    .wcc-step-tab:not(.wcc-tab-active) .wcc-mobile-number-only {
        font-size: 16px !important;
    }
    
    .wcc-step-tab.wcc-tab-active .wcc-step-title {
        font-size: 13px !important;
        padding: 0 8px !important;
    }
    
    .wcc-step-tab:not(:last-child)::after {
        top: 10px !important;
        bottom: 10px !important;
    }
}

/* Override any theme or plugin styles that might interfere */
@media (max-width: 768px) {
    /* Force the segmented look */
    body .wcc-customization-container .wcc-steps-tabs,
    .woocommerce .wcc-steps-tabs,
    .single-product .wcc-steps-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        background: transparent !important;
    }
    
    /* Ensure tabs are connected */
    body .wcc-customization-container .wcc-step-tab,
    .woocommerce .wcc-step-tab,
    .single-product .wcc-step-tab {
        margin: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
    }
    
    /* Make sure the container takes full width */
    .wcc-customization-container .wcc-steps-tabs {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Ensure visibility of tab content */
@media (max-width: 768px) {
    .wcc-step-tab .wcc-step-title {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Remove any transforms that might affect layout */
    .wcc-step-tab,
    .wcc-step-title {
        transform: none !important;
    }
}

/* Optional hover effects - subtle */
@media (max-width: 768px) {
    .wcc-step-tab:not(.wcc-tab-active):hover {
        opacity: 0.9 !important;
    }
}

/* Ensure proper z-index stacking */
@media (max-width: 768px) {
    .wcc-steps-tabs {
        position: relative !important;
        z-index: 10 !important;
    }
    
    .wcc-step-tab {
        position: relative !important;
        z-index: 1 !important;
    }
    
    .wcc-step-tab.wcc-tab-active {
        z-index: 2 !important;
    }
}

/* Fix for potential flexbox issues */
@media (max-width: 768px) {
    .wcc-steps-tabs {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -webkit-flex-direction: row !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
    }
}

/* Ensure the tabs are visible and properly styled */
@media (max-width: 768px) {
    /* Force inline-block display for titles if flex fails */
    .wcc-step-tab .wcc-step-title.wcc-mobile-number-only,
    .wcc-step-tab .wcc-step-title.wcc-mobile-active-title {
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    /* Center content vertically */
    .wcc-step-tab {
        line-height: 48px !important;
    }
    
    @media (max-width: 480px) {
        .wcc-step-tab {
            line-height: 44px !important;
        }
    }
}

/* ULTIMATE OVERRIDE - Force connected segmented tab appearance */
@media (max-width: 768px) {
    /* Force the container to be a continuous bar */
    html body .wcc-customization-container .wcc-steps-tabs,
    html body.single-product .wcc-steps-tabs,
    html body .woocommerce .wcc-steps-tabs,
    .wcc-steps-tabs {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        height: 48px !important;
        padding: 0 !important;
        margin: 0 0 20px 0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    }
    
    /* Force all tabs to be connected segments */
    html body .wcc-customization-container .wcc-step-tab,
    html body.single-product .wcc-step-tab,
    html body .woocommerce .wcc-step-tab,
    .wcc-step-tab {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    
    /* Remove ALL borders and radius except for first/last */
    .wcc-steps-tabs .wcc-step-tab:not(:first-child):not(:last-child) {
        border-radius: 0 !important;
    }
    
    /* Only round the outer corners */
    .wcc-steps-tabs .wcc-step-tab:first-child {
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    
    .wcc-steps-tabs .wcc-step-tab:last-child {
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
}