﻿
#thumbnail-container, #thumbnail-original-history-container {
    max-height: 300px;
    overflow-y: auto;
}

#thumbnail-container, #thumbnail-optimized-history-container {
    max-height: 300px;
    overflow-y: auto;
}

#thumbnail-container,
#thumbnail-optimized-history-container {
    scrollbar-width: thin;
}

    #thumbnail-container::-webkit-scrollbar,
    #thumbnail-optimized-history-container::-webkit-scrollbar {
        width: 10px;
    }

#thumbnail-container,
#thumbnail-original-history-container {
    scrollbar-width: thin;
}

    #thumbnail-container::-webkit-scrollbar,
    #thumbnail-original-history-container::-webkit-scrollbar {
        width: 10px;
    } 


    #thumbnail-container::-webkit-scrollbar-track,
    #thumbnail-original-history-container::-webkit-scrollbar-track {
        background-color: #f1f1f1; /* Fallback to a light gray if --bs-primary is not defined */
    }

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Style for the arrows */
#thumbnail-slider .slick-arrow {
    position: absolute;
    z-index: 2;
    color: var(--bs-primary);
    font-size: 1.7rem;
}

#thumbnail-slider .slick-slide {
    display: flex;
    justify-content: center;
    padding: 5px 0;
}

@media (min-width: 768px) {
    #thumbnail-slider .prev-arrow {
        top: 0;
        left: 50%;
        transform: translate(-50%, -100%);
    }

    #thumbnail-slider .next-arrow {
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 100%);
    }
}

@media (max-width: 767.98px) {
    #thumbnail-slider .slick-slide {
        padding: 0 5px;
    }

    #thumbnail-slider .prev-arrow {
        left: 0;
        top: 50%;
        transform: translate(-100%, -50%);
    }

    #thumbnail-slider .next-arrow {
        right: 0;
        top: 50%;
        transform: translate(100%, -50%);
    }
}
.slick-disabled {
    color: gray !important;  
}

.thumbnail.selected {
    border: 2px solid var(--bs-primary);  
}

/*#large-image:hover img {
    transform: scale(1.1);
    filter: brightness(1.2);
}*/

.thumbnail {
    transition: transform 0.3s, filter 0.3s;
    max-width: 98px;
    max-height: 98px;
    object-fit: cover;
    margin: 0 auto;
}

    .thumbnail:hover {
        /*transform: scale(1.1);*/
        filter: brightness(1.2);
    }

.slider-container {
    height: auto; /* Set initial height to auto */
}


.product-detail-top .box {
    background-color: #fff;
    width:80%;
}

/* Default styles for larger screens */
.product-detail-top .product-slider-box {
    width: 100%;
    float: left;
    position: relative;
}

/* Media query for extra-large screens (XL) */
@media only screen and (min-width: 2000px) {
    .product-detail-top .product-slider-box {
        width: 100%;
    }
}


    .product-detail-top .product-slider-box .gallery-box {
        width: 100px;
        float: left;
    }



        .product-detail-top .product-slider-box .gallery-box .product-detail-slider-gallery .gallery-item {
            margin-bottom: 10px;
            cursor: pointer;
            /*border: 1px solid #ddd;*/
        }

            .product-detail-top .product-slider-box .gallery-box .product-detail-slider-gallery .gallery-item.slick-current {
                border: 1px solid #beae59;
            }

        .product-detail-top .product-slider-box .gallery-box .product-detail-slider-gallery .slick-arrow {
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }

            .product-detail-top .product-slider-box .gallery-box .product-detail-slider-gallery .slick-arrow:hover {
                color: #beae59;
            }


    .product-detail-top .product-slider-box .main-slider-box {
        width: calc(150% - 150px);
        float: right;
    }

        .product-detail-top .product-slider-box .main-slider-box .item-slider {
            /*border: 1px solid #ddd;*/
            text-align: center;
        }

            .product-detail-top .product-slider-box .main-slider-box .item-slider img {
                max-width: calc(100% - 2px);
                margin: 0 auto;
            }

/* thumbnail container */
.media-thumb {
    position: relative;
}

/* generic video indicator */
.video-thumb-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

    .video-thumb-overlay i {
        font-size: 15px;
        color: white;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(0,0,0,0.45);
        backdrop-filter: blur(3px);
        /* visibility on light & dark images */
        box-shadow: 0 0 0 2px rgba(255,255,255,0.7), 0 3px 8px rgba(0,0,0,0.35);
        transition: all .2s ease;
    }

.media-thumb:hover .video-thumb-overlay i {
    transform: scale(1.08);
}