/**
 * Plugin Name: PixelcraftDev Elementor Addon
 * Author: Supapong Sakulkoo (K.Auu)
 * Author URI: https://supapongai.com
 * License: Commercial - Proprietary
 * Copyright: (c) 2026 PixelcraftDev. All rights reserved.
 * Unauthorized copying of this file, via any medium is strictly prohibited.
 */
/* ====== Pixelcraft Image Showcase Carousel ====== */

.pcd-image-showcase-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--pcd-showcase-gap, 20px);
}

/* Main Gallery Viewer */
.pcd-image-showcase-main {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: var(--pcd-showcase-main-radius, 20px);
    background-color: var(--pcd-showcase-main-bg, #f5f5f7); /* Apple-like slight gray by default */
}

.pcd-image-showcase-main .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px; /* Minimum height for empty state */
}

.pcd-image-showcase-main img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Thumbnail Gallery */
.pcd-image-showcase-thumbs {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-bottom: 2px; /* For the active border */
}

.pcd-image-showcase-thumbs .swiper-slide {
    cursor: pointer;
    position: relative;
    border-radius: var(--pcd-showcase-thumb-radius, 10px);
    overflow: hidden;
    /* Opacity effect for inactive */
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.pcd-image-showcase-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.pcd-image-showcase-thumbs .pcd-thumb-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-radius: var(--pcd-showcase-thumb-radius, 10px);
    background-color: var(--pcd-showcase-main-bg, #f5f5f7);
    overflow: hidden;
}

.pcd-image-showcase-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* Active Thumbnail Line (Apple style) */
.pcd-thumb-active-line {
    border-bottom-style: solid;
    border-bottom-width: var(--pcd-showcase-line-thickness, 2px);
    border-bottom-color: var(--pcd-showcase-line-color, #000);
    position: absolute;
    left: 0;
    bottom: -1px; /* Align slightly outside to avoid bleeding inside the rounded corners tightly */
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.pcd-image-showcase-thumbs .swiper-slide-thumb-active .pcd-thumb-active-line {
    opacity: 1;
}