/**
 * 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 Smart Carousel Styles
 */

.pixelcraft-smart-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.pixelcraft-smart-carousel-wrapper .swiper-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.pixelcraft-smart-carousel-wrapper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
}



/* Equal Height Logic */
.pixelcraft-carousel-equal-height-yes .swiper-slide {
    height: auto;
    align-self: stretch;
}

.pixelcraft-carousel-equal-height-yes .pixelcraft-carousel-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.pixelcraft-carousel-equal-height-yes .pixelcraft-carousel-image img,
.pixelcraft-carousel-equal-height-yes .pixelcraft-carousel-image a {
    width: 100%;
    height: 100%;
    display: block;
}

.pixelcraft-carousel-equal-height-yes .pixelcraft-carousel-image img {
    object-fit: cover;
}

/* Standard Mode */
.pixelcraft-carousel-image {
    width: 100%;
    height: auto;
    overflow: hidden; /* Critical for border-radius */
    isolation: isolate; /* Ensures clipping works on all browsers */
}

.pixelcraft-carousel-image img {
    width: 100%;
    height: auto;
    display: block;
}



/* Navigation Style */
.pixelcraft-smart-carousel-wrapper .swiper-button-next,
.pixelcraft-smart-carousel-wrapper .swiper-button-prev {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease; /* Smooth hover transition */
}

.pixelcraft-smart-carousel-wrapper .swiper-button-next:after,
.pixelcraft-smart-carousel-wrapper .swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
    color: inherit; /* Respect parent color */
    transition: all 0.3s ease;
}

.pixelcraft-smart-carousel-wrapper .swiper-button-next:hover,
.pixelcraft-smart-carousel-wrapper .swiper-button-prev:hover {
    background: #333;
    color: #fff;
}

.pixelcraft-smart-carousel-wrapper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #ccc;
    opacity: 1;
    transition: width 0.3s ease, background 0.3s ease, border-radius 0.3s ease, opacity 0.3s ease;
    border-radius: 50%;
}

.pixelcraft-smart-carousel-wrapper .swiper-pagination-bullet-active {
    background: #333;
}

/* Active Span Feature */
.pixelcraft-pagination-active-span-yes .swiper-pagination-bullet-active {
    border-radius: 12px;
}


/* Positioning Logic */

/* Outer Arrows */
.pixelcraft-nav-pos-outer .swiper-container {
    padding: 0 60px; /* Space for arrows outside */
}

.pixelcraft-nav-pos-outer .swiper-button-next {
    right: 5px;
}

.pixelcraft-nav-pos-outer .swiper-button-prev {
    left: 5px;
}

/* Outer Dots */
.pixelcraft-dots-pos-outer .swiper-container {
    padding-bottom: 50px; /* Space for dots below */
}

.pixelcraft-dots-pos-outer .swiper-pagination {
    bottom: 5px !important;
}

/* Inner Positions (Defaults) */
.pixelcraft-nav-pos-inner .swiper-button-next {
    right: 20px;
}

.pixelcraft-nav-pos-inner .swiper-button-prev {
    left: 20px;
}

.pixelcraft-dots-pos-inner .swiper-pagination {
    bottom: 20px !important;
}

/* Ensure images respect width and are centered */
.pixelcraft-carousel-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
}


.pixelcraft-carousel-image img,
.pixelcraft-carousel-image a {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.pixelcraft-carousel-image a {
    width: 100%;
    display: flex;
    justify-content: center;
}