/**
 * Category Tabs Layout Styles for Product Display
 * 
 * This file contains styles specific to the category tabs layout.
 * The main wcps-styles.scss is loaded as default for all layouts.
 * 
 * @package Product_Display
 */

// Category tabs layout specific styles will be added here
// Currently empty - styles will be moved from wcps-styles.scss as needed
// Breakpoints
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;


/* -------------- Layout Category Tabs -------------- */
// Tabbed Discovery
// New with smooth and staggered animations  two products effects presents - 
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    // Tabbed Discovery
    &.wcps-layout-category_tabs {
        margin: 30px 0;
        position: relative;

        .wcps-products-container {
            background: var(--wcps-container-background, #ffffff3b);
            padding: var(--wcps-container-padding, 25px);
            margin: var(--wcps-container-margin, 0px);
        }

        .wcps-category-tabs {
            background-color: var(--wcps-background);
            border-radius: var(--wcps-border-radius);

            // Dynamic box shadow based on the value
            @if var(--wcps-box-shadow)=="none" {
                box-shadow: none;
            }

            @else if var(--wcps-box-shadow)=="light" {
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }

            @else if var(--wcps-box-shadow)=="medium" {
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            }

            @else if var(--wcps-box-shadow)=="heavy" {
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            }

            // Dynamic border style
            @if var(--wcps-border-style) !="none" {
                border: var(--wcps-border-width) var(--wcps-border-style) var(--wcps-border-color);
            }

            overflow: hidden;

            // Tab Navigation
            .wcps-tab-nav {
                display: flex;
                list-style: none;
                margin: 0;
                padding: 0;
                border-bottom: 2px solid rgba(0, 0, 0, 0.08);
                background-color: #ffffff;
                position: relative;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;

                &::-webkit-scrollbar {
                    display: none;
                }

                li {
                    margin: 0;
                    padding: 0;
                    flex: 0 0 auto;

                    .wcps-tab-link {
                        display: block;
                        padding: 15px 20px;
                        color: var(--wcps-price-delete-font-color);
                        font-weight: 600;
                        text-decoration: none;
                        transition: all var(--wcps-hover-transition);
                        white-space: nowrap;
                        position: relative;
                        margin-bottom: 10px;

                        &:after {
                            content: '';
                            position: absolute;
                            bottom: -2px;
                            left: 0;
                            width: 100%;
                            height: 2px;
                            background-color: var(--wcps-product-title);
                            transform: scaleX(0);
                            transition: transform var(--wcps-hover-transition);
                            transform-origin: center;
                        }

                        &:hover {
                            color: var(--wcps-product-title);
                        }

                        &.active {
                            color: #ffffff;
                            background: #3582c4;

                            &:after {
                                transform: scaleX(1);
                            }
                        }

                        .wcps-product-count {
                            display: inline-flex;
                            align-items: center;
                            justify-content: center;
                            min-width: 20px;
                            height: 20px;
                            padding: 0 6px;
                            margin-left: 6px;
                            font-size: 0.75em;
                            font-weight: bold;
                            color: #fff;
                            background-color: var(--wcps-product-title);
                            border-radius: 20px;
                            opacity: 0.85;
                            transition: opacity var(--wcps-hover-transition);
                        }

                        &:hover .wcps-product-count,
                        &.active .wcps-product-count {
                            opacity: 1;
                        }
                    }
                }
            }

            // Tab Content Area
            .wcps-tab-content {
                display: none;
                padding: var(--wcps-product-content-padding);

                &.active {
                    display: block;
                    animation: fadeIn 0.3s ease;
                }

                // Products Grid

            }
        }

        // Responsive Styles
        @media (max-width: 991px) {
            .wcps-category-tabs {
                .wcps-products-grid {

                    &.wcps-columns-3,
                    &.wcps-columns-4,
                    &.wcps-columns-5 {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }
            }
        }

        @media (max-width: 575px) {
            .wcps-category-tabs {
                .wcps-tab-nav {
                    li .wcps-tab-link {
                        padding: 12px 15px;
                        font-size: 0.9em;
                    }
                }

                .wcps-products-grid {
                    grid-template-columns: 1fr !important;
                    gap: 15px;

                    .wcps-product-item .wcps-product {
                        .wcps-product-image .wcps-product-actions {
                            // On mobile, always show actions for better UX
                            transform: translateY(0);

                            a {
                                padding: 6px 10px;
                                opacity: 1; // FIXED: Ensure buttons are visible on mobile
                                transform: translateY(0); // FIXED: Reset transform on mobile

                                .wcps-text {
                                    display: none; // Hide text to save space
                                }

                                .wcps-icon {
                                    margin-right: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

// Animation
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

// Pulse animation for button
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}