/**
 * WC Product Loop Slider — Frontend Styles
 *
 * @package    WC_Product_Loop_Slider
 * @version    0.3.3
 * @since      0.1.2
 * @last-updated 2026-04-16
 *
 * Table of Contents
 * -----------------
 * 1. CSS Custom Properties
 * 2. Slider Container
 * 3. Swiper Slide & Images
 * 4. Pagination Dots
 * 5. Navigation Arrows (hover)
 * 6. Accessibility & Reduced Motion
 * 7. Elementor Compatibility
 */

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

:root {
    /* Aspect ratio */
    --wcpls-aspect-ratio: 1 / 1;

    /* Minimum height fallback — used when aspect-ratio has not resolved yet
       (e.g. Elementor Flexbox container on mobile before layout is painted).
       Override this in your child theme if your product images use a
       different aspect ratio. */
    --wcpls-min-height: 200px;

    /* Pagination */
    --wcpls-dot-size:           8px;
    --wcpls-dot-gap:            5px;
    --wcpls-dot-color:          rgba(255, 255, 255, 0.55);
    --wcpls-dot-color-active:   #ffffff;
    --wcpls-dot-shadow:         0 1px 3px rgba(0, 0, 0, 0.45);
    --wcpls-dot-bottom:         20px;

    /* Navigation arrows */
    --wcpls-nav-size:           30px;
    --wcpls-nav-bg:             rgba(255, 255, 255, 0.85);
    --wcpls-nav-color:          #333333;
    --wcpls-nav-shadow:         0 2px 6px rgba(0, 0, 0, 0.20);
    --wcpls-nav-radius:         50%;

    /* Transitions */
    --wcpls-transition:         opacity 0.22s ease, transform 0.22s ease;
}

/* ==========================================================================
   2. Slider Container
   ========================================================================== */

/**
 * Wrapper that replaces the default WooCommerce thumbnail anchor.
 * Sits inside .product — flex / grid child.
 * Must have position: relative so the absolute .swiper fills it correctly.
 */
.wcpls-slider-wrapper {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--wcpls-aspect-ratio);
    /* Fallback height for when aspect-ratio has not resolved yet */
    min-height: var(--wcpls-min-height);
    overflow: hidden;
    /* Contain absolute-positioned children (pagination, arrows) */
    isolation: isolate;
    /* Prevent tap highlight on mobile */
    -webkit-tap-highlight-color: transparent;
}

/**
 * Swiper root — positioned absolute to remove it from normal flow.
 *
 * Why absolute?
 * Elementor Loop Item uses a Flexbox container. Without this,
 * .swiper-wrapper (display:flex) expands to fit all slides side-by-side,
 * causing the parent Flexbox chain to grow to an absurdly large width
 * (slides × slideWidth), which makes Swiper miscalculate slide widths.
 * Taking .swiper out of flow with position:absolute breaks the cycle:
 * the wrapper is sized by its parent, and Swiper fills the wrapper.
 */
.wcpls-slider-wrapper .swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   3. Swiper Slide & Images
   ========================================================================== */

.wcpls-slider,
.wcpls-slider .swiper,
.wcpls-slider .swiper-wrapper,
.wcpls-slider .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
}
.wcpls-slider-wrapper .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wcpls-slider-wrapper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    float: none;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    transition: transform 0.35s ease;
    will-change: transform;
}

/* Subtle zoom on card hover */
.wcpls-slider-wrapper:hover .swiper-slide.swiper-slide-active img {
    transform: scale(1.03);
}

/* ==========================================================================
   4. Pagination Dots
   ========================================================================== */

/**
 * Override Swiper default pagination to sit INSIDE the image,
 * bottom-centred, with a shadow so dots are visible on any background.
 */
.wcpls-slider-wrapper .swiper-pagination {
    position: absolute;
    bottom: var(--wcpls-dot-bottom) !important;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wcpls-dot-gap);
    /* Reset Swiper's own positioning quirks */
    width: auto;
    pointer-events: none; /* container pass-through */
}

.wcpls-slider-wrapper .swiper-pagination-bullet {
    display: inline-block;
    width: var(--wcpls-dot-size);
    height: var(--wcpls-dot-size);
    border-radius: 50%;
    background: var(--wcpls-dot-color);
    box-shadow: var(--wcpls-dot-shadow);
    opacity: 1;           /* override Swiper default 0.2 */
    transition: background 0.18s ease, transform 0.18s ease;
    pointer-events: all;
    cursor: pointer;
}

.wcpls-slider-wrapper .swiper-pagination-bullet-active {
    background: var(--wcpls-dot-color-active);
    transform: scale(1.25);
}

/* ==========================================================================
   5. Navigation Arrows (show on card hover)
   ========================================================================== */

.wcpls-slider-wrapper .swiper-button-prev,
.wcpls-slider-wrapper .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    z-index: 10;
    width: var(--wcpls-nav-size);
    height: var(--wcpls-nav-size);
    border-radius: var(--wcpls-nav-radius);
    background: var(--wcpls-nav-bg);
    color: var(--wcpls-nav-color);
    box-shadow: var(--wcpls-nav-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-color: transparent;
    padding: 5px;

    /* Hidden by default; revealed on wrapper hover */
    opacity: 0;
    pointer-events: none;
    transition: var(--wcpls-transition);
}

.wcpls-slider-wrapper .swiper-button-prev {
    left: 8px;
    transform: translateY(-50%) translateX(-4px);
}

.wcpls-slider-wrapper .swiper-button-next {
    right: 8px;
    transform: translateY(-50%) translateX(4px);
}

/* Swiper default ::after arrow icons — resize to fit small button */
.wcpls-slider-wrapper .swiper-button-prev::after,
.wcpls-slider-wrapper .swiper-button-next::after {
    font-size: 11px;
    font-weight: 700;
    color: var(--wcpls-nav-color);
}

/* Reveal arrows on hover */
.wcpls-slider-wrapper:hover .swiper-button-prev,
.wcpls-slider-wrapper:hover .swiper-button-next {
    opacity: 1;
    pointer-events: all;
    transform: translateY(-50%) translateX(0);
}

/* Hide arrows when only one image (Swiper adds swiper-button-disabled) */
.wcpls-slider-wrapper .swiper-button-disabled {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   6. Accessibility & Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .wcpls-slider-wrapper .swiper-slide img {
        transition: none;
    }

    .wcpls-slider-wrapper .swiper-button-prev,
    .wcpls-slider-wrapper .swiper-button-next,
    .wcpls-slider-wrapper .swiper-pagination-bullet {
        transition: none;
    }
}

/* PC: hide pagination dots — arrows handle navigation instead */
@media (hover: hover) and (pointer: fine) {
    .wcpls-slider-wrapper .swiper-pagination {
        opacity: 0;
        transition: opacity 0.22s ease;
    }
    /* Optional: fade dots in on hover for PC too */
    /* .wcpls-slider-wrapper:hover .swiper-pagination { opacity: 1; } */
}

/* Focus ring for keyboard navigation on pagination bullets */
.wcpls-slider-wrapper .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--wcpls-dot-color-active);
    outline-offset: 2px;
}

/* ==========================================================================
   7. Elementor Compatibility
   ========================================================================== */

/**
 * Prevent the WCPLS widget from stretching to the full height of the
 * Elementor Loop Grid row when align-items: stretch is active.
 *
 * Problem: Elementor sets height: 100% on .elementor-widget-container
 * inside flex containers. When the grid row is taller than a single
 * product card, the widget container inherits the full row height,
 * pushing the footer calculation off by thousands of pixels.
 *
 * Solution: align-self: flex-start prevents the widget from stretching
 * beyond its natural content height, keeping the grid row height correct.
 */
.elementor-widget-wcpls-product-slider {
    align-self: flex-start;
}