/**
 * Product Images Widget Styles
 */

 .roxyrich-product-images-widget {
    position: relative;
    width: 100%;
}

/* Main Images Carousel */
.product-main-images {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}

.product-main-image {
    display: none;
    width: 100%;
    height: 500px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
    position: relative;
}

.product-main-image.active {
    display: block;
}

/* Container for main images and arrows */
.roxyrich-product-images-widget {
    position: relative;
}

/* Main Image Navigation Arrows */
.main-image-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
    color: #000 !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.product-main-images:hover .main-image-nav {
    opacity: 0.9 !important;
    visibility: visible !important;
}

.main-image-nav:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: translateY(-50%) scale(1.05) !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.main-image-nav.prev {
    left: 20px !important;
}

.main-image-nav.next {
    right: 20px !important;
}

.main-image-nav svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
    display: block !important;
}

.main-image-nav svg path {
    stroke: #000 !important;
}

/* Hide navigation when only one image */
.roxyrich-product-images-widget:has(.product-main-images > .product-main-image:only-child) .main-image-nav {
    display: none;
}

/* Thumbnails Wrapper */
.product-thumbnails-wrapper {
    position: relative;
    display: block;
}

/* Thumbnail Navigation */
.thumbnail-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    color: #000 !important;
    padding: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 5 !important;
}

.product-thumbnails-wrapper:hover .thumbnail-nav {
    opacity: 0.9 !important;
    visibility: visible !important;
}

.thumbnail-nav:hover {
    background: rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18) !important;
}

.thumbnail-nav.prev {
    left: 5px !important;
}

.thumbnail-nav.next {
    right: 5px !important;
}

.thumbnail-nav:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

.thumbnail-nav:disabled:hover {
    background: rgba(255, 255, 255, 0.5) !important;
    opacity: 0.3 !important;
    transform: translateY(-50%) !important;
}

.thumbnail-nav svg {
    width: 20px !important;
    height: 20px !important;
    pointer-events: none !important;
    display: block !important;
}

.thumbnail-nav svg path {
    stroke: #000 !important;
}

/* Thumbnails Container */
.product-thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.product-thumbnails::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Individual Thumbnail */
.product-thumbnail {
    flex-shrink: 0;
    width: 100px;
    /*height: 100px;*/
    height: auto !important;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid #e0e0e0;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.product-thumbnail:hover {
    opacity: 0.8;
    border-color: #999;
}

.product-thumbnail.active {
    opacity: 1;
    border-color: #000;
    border-width: 3px;
}

/* Responsive */
@media (max-width: 768px) {
    .product-main-image {
        height: 350px;
    }

    .main-image-nav {
        width: 40px !important;
        height: 40px !important;
    }

    .main-image-nav.prev {
        left: 10px !important;
    }

    .main-image-nav.next {
        right: 10px !important;
    }

    .main-image-nav svg {
        width: 16px !important;
        height: 16px !important;
    }

    .product-thumbnail {
        width: 70px;
        height: auto !important;
        aspect-ratio: 1;
    }

    .thumbnail-nav {
        width: 30px !important;
        height: 30px !important;
    }

    .thumbnail-nav svg {
        width: 10px !important;
        height: 10px !important;
    }

    .thumbnail-nav.prev {
        left: 3px !important;
    }

    .thumbnail-nav.next {
        right: 3px !important;
    }

    .product-thumbnails {
        gap: 8px;
    }

    .product-thumbnails-wrapper {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .product-main-image {
        height: 280px;
    }

    .product-thumbnail {
        width: 60px;
        height: 60px;
    }
}