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

// Gallery 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;

/* -------------- Gallery Layout dynamic: basic done -------------- */

/* -------------- Gallery Layout-------------- */

// Gallery Layout or Showcase Gallery
/* -------------- Shared Base Styles for Gallery Layouts -------------- */
.wcps-container {
    background: var(--wcps-container-background, #ffffff3b);
    padding: var(--wcps-container-padding, 25px);
    margin: var(--wcps-container-margin, 0px);

    // Common styles for all gallery layouts
    &.wcps-layout-gallery,
    &.wcps-layout-gallery-2,
    &.wcps-layout-gallery-3 {
        margin: 30px 0;
        position: relative;
        background-color: var(--wcps-background);
        border-radius: var(--wcps-border-radius);
        padding: var(--wcps-product-content-padding);

        // Apply box-shadow based on condition
        @if var(--wcps-box-shadow)=="light" {
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

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

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

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

    }

    /* Product Gallery Thumbnails - Shared */
    .wcps-product-gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        padding: 10px;
        background-color: #f9f9f9;
    }

    .wcps-gallery-image {
        width: 60px;
        height: 60px;
        border: 2px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        transition: var(--wcps-hover-transition);

        &.active {
            border-color: var(--wcps-product-title);
        }

        &:hover {
            opacity: 0.8;
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

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

        50% {
            transform: scale(1.05);
        }

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

    // Media query adjustments for filter buttons
    @media (max-width: 576px) {

        .wcps-container.wcps-layout-gallery .wcps-gallery-filter,
        .wcps-container.wcps-layout-gallery-2 .wcps-gallery-filter,
        .wcps-container.wcps-layout-gallery-3 .wcps-gallery-filter {
            flex-direction: column;
            width: 100%;

            button {
                width: 100%;
            }
        }

        // Mobile responsive adjustments for action buttons
        .wcps-container.wcps-layout-gallery .wcps-product-actions,
        .wcps-container.wcps-layout-gallery-2 .wcps-product-actions,
        .wcps-container.wcps-layout-gallery-3 .wcps-product-actions {
            a {
                width: 36px;
                height: 36px;
                font-size: 14px;

                .wcps-btn-icon i {
                    font-size: 14px;
                }

                .wcps-btn-cta {
                    display: none; // Hide tooltips on mobile
                }
            }
        }

        // Specific mobile adjustments for gallery-2 (left side)
        .wcps-container.wcps-layout-gallery-2 .wcps-product-actions {
            left: 5px;
            gap: 4px;
        }

        // Specific mobile adjustments for gallery-3 (bottom overlay)
        .wcps-container.wcps-layout-gallery-3 .wcps-product-actions {
            padding: 10px;
            gap: 4px;
        }

        // Responsive design for action buttons on small screens
        .wcps-quickview,
        .wcps-wishlist,
        .wcps-compare {
            .wcps-text {
                display: none;
            }

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

    // Display mode utilities - Shared across all gallery layouts
    // Quick view display modes
    @if var(--quickview-display-mode)=="icon" {
        .wcps-quickview .wcps-text {
            display: none;
        }
    }

    @else if var(--quickview-display-mode)=="text" {
        .wcps-quickview .wcps-icon {
            display: none;
        }
    }

    // Wishlist display modes
    @if var(--wishlist-displaymode)=="icon" {
        .wcps-wishlist .wcps-text {
            display: none;
        }
    }

    @else if var(--wishlist-displaymode)=="text" {
        .wcps-wishlist .wcps-icon {
            display: none;
        }
    }

    // Compare display modes
    @if var(--compare-display-mode)=="icon" {
        .wcps-compare .wcps-text {
            display: none;
        }
    }

    @else if var(--compare-display-mode)=="text" {
        .wcps-compare .wcps-icon {
            display: none;
        }
    }

    // Add to cart display modes
    @if var(--addtocart-display-mode)=="icon" {
        .wcps-add-to-cart .wcps-text {
            display: none;
        }
    }

    @else if var(--addtocart-display-mode)=="text" {
        .wcps-add-to-cart .wcps-icon {
            display: none;
        }
    }
}