/**
 * WC Product Loop Slider — Frontend Styles
 *
 * @package    WC_Product_Loop_Slider
 * @version    0.3.8
 * @since      0.1.2
 * @last-updated 2026-06-11
 *
 * Changelog 0.3.8:
 *   - ลบ bubble + drop-shadow ออกจาก navigation arrows
 *     ให้เหลือแค่ตัวไอคอนลูกศร (ชัดด้วย filter: drop-shadow บนตัวไอคอน)
 *   - Pagination dots: ลบ box-shadow, เพิ่ม border บางๆ สำหรับ contrast
 *     บนพื้นหลังสีอ่อน, ลด dot-size จาก 8px → 6px ให้ดูเรียบกว่า
 *   - Dots แสดงทุก device (ลบ media query ที่ซ่อน dots บน PC ออก)
 *     เหตุที่ dots ไม่แสดงก่อนหน้า: @media (hover:hover) and (pointer:fine)
 *     ทำให้ opacity: 0 บน desktop ทั้งหมด
 *   - Elementor Compat: เพิ่ม .elementor-widget-container height: auto
 *     แก้บั๊ค text ซ้อนทับ slider บน mobile (Elementor ยืด container
 *     สูงเต็ม grid row ทำให้ slider wrapper ขยายเกิน aspect-ratio)
 *
 * 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:           6px;
    --wcpls-dot-gap:            5px;
    --wcpls-dot-color:          rgba(255, 255, 255, 0.55);
    --wcpls-dot-color-active:   #ffffff;
    --wcpls-dot-shadow:         none;      /* ลบ shadow ออก */
    --wcpls-dot-bottom:         12px;

    /* Navigation arrows */
    --wcpls-nav-size:           30px;
    --wcpls-nav-bg:             transparent; /* ลบ bubble background */
    --wcpls-nav-color:          #ffffff;     /* ลูกศรสีขาว */
    --wcpls-nav-shadow:         none;        /* ลบ box-shadow */
    --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;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

/* 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);
    border: 1px solid rgba(0, 0, 0, 0.15); /* contrast บนพื้นหลังสีอ่อน */
    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;
    /* ทำให้ตัวไอคอนลูกศรชัดบนพื้นหลังสีอ่อน แทนการใช้ background bubble */
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));

    /* 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 — ขนาดใหญ่ขึ้นเพื่อมองเห็นโดยไม่มี bubble */
.wcpls-slider-wrapper .swiper-button-prev::after,
.wcpls-slider-wrapper .swiper-button-next::after {
    font-size: 14px;
    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);
    background-color: transparent !important; /* override custom CSS hover rule */
}

/* 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;
    }
}

/* Dots แสดงทุก device — ทั้ง PC และ mobile
   (ลบ media query ที่ซ่อน dots บน hover:hover device ออกแล้ว
   เพราะ dots ทำหน้าที่เป็น indicator "มีหลายรูป" บนทุก device)       */

/* 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;
}

/**
 * Fix (0.3.8): Elementor sets height: 100% specifically on
 * .elementor-widget-container (the inner wrapper it controls directly)
 * inside flex Loop Grid rows. The previous fix only targeted the outer
 * .elementor-widget-wcpls-product-slider and did not stop the inner
 * container from stretching — causing the slider wrapper to expand beyond
 * its aspect-ratio height and overlap the product title/price text on mobile.
 *
 * Forcing height: auto on the inner container is the actual fix.
 */
.elementor-widget-wcpls-product-slider .elementor-widget-container {
    height: auto !important;
}