/* Bricks Product Gallery - Simplified Version */

.bpg-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
    min-height: 300px;
}

/* Layout - Left */
.bpg-wrapper.bpg-position-left {
    flex-direction: row;
    align-items: var(--thumbnail-v-align, flex-start);
}

.bpg-wrapper.bpg-position-left .bpg-thumbnails {
    flex-direction: column;
    order: 1;
}

.bpg-wrapper.bpg-position-left .bpg-main-image {
    order: 2;
}

/* Layout - Right */
.bpg-wrapper.bpg-position-right {
    flex-direction: row;
    align-items: var(--thumbnail-v-align, flex-start);
}

.bpg-wrapper.bpg-position-right .bpg-thumbnails {
    flex-direction: column;
    order: 2;
}

.bpg-wrapper.bpg-position-right .bpg-main-image {
    order: 1;
}

/* Layout - Bottom */
.bpg-wrapper.bpg-position-bottom {
    flex-direction: column;
}

.bpg-wrapper.bpg-position-bottom .bpg-thumbnails {
    flex-direction: row;
    order: 2;
    justify-content: var(--thumbnail-h-align, flex-start);
}

.bpg-wrapper.bpg-position-bottom .bpg-main-image {
    order: 1;
}

/* Thumbnail Container */
.bpg-thumbnails {
    display: flex;
    gap: var(--thumbnail-gap, 15px);
    flex-shrink: 0;
    background-color: var(--container-bg, transparent);
    border-radius: var(--container-radius, 0);
    padding: var(--container-radius, 0); /* Use radius as padding if set */
}

/* Individual Thumbnails */
.bpg-thumbnail {
    width: var(--thumbnail-size, 100px);
    height: var(--thumbnail-size, 100px);
    min-width: var(--thumbnail-size, 100px);
    border: var(--border-width, 2px) solid var(--border-color, #e0e0e0);
    border-radius: var(--thumb-radius, 4px);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    background: white;
    flex-shrink: 0;
}

.bpg-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    padding: var(--inner-padding, 0);
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

/* Active Thumbnail */
.bpg-thumbnail.active {
    border-color: var(--active-border, #0073aa);
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.2);
}

/* Hover Effect */
.bpg-wrapper.bpg-hover-effect .bpg-thumbnail:hover {
    transform: scale(1.05);
}

.bpg-wrapper.bpg-hover-effect .bpg-thumbnail:hover img {
    transform: scale(1.1);
}

/* Main Image Container */
.bpg-main-image {
    position: relative;
    flex: 1;
    max-width: var(--main-max-width, 600px);
    width: 100%;
    background: var(--main-bg, #f9f9f9);
    border-radius: var(--main-radius, 8px);
    overflow: hidden;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: var(--main-align, center);
}

/* Slides */
.bpg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    display: flex;
    justify-content: var(--main-align, center);
    align-items: center;
}

.bpg-slide.active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

.bpg-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .bpg-wrapper.bpg-position-left,
    .bpg-wrapper.bpg-position-right {
        flex-direction: column;
    }
    
    .bpg-wrapper.bpg-position-left .bpg-thumbnails,
    .bpg-wrapper.bpg-position-right .bpg-thumbnails {
        flex-direction: row;
        overflow-x: auto;
        order: 2;
        justify-content: flex-start;
    }
    
    .bpg-wrapper.bpg-position-left .bpg-main-image,
    .bpg-wrapper.bpg-position-right .bpg-main-image {
        order: 1;
        max-width: 100%;
    }
}

/* Scrollbar */
.bpg-thumbnails::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.bpg-thumbnails::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.bpg-thumbnails::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.bpg-thumbnails::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Focus */
.bpg-thumbnail:focus {
    outline: 2px solid var(--active-border, #0073aa);
    outline-offset: 2px;
}

.bpg-thumbnail:focus:not(:focus-visible) {
    outline: none;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.bpg-slide.active {
    animation: fadeIn 0.3s ease;
}

/* Bricks Editor */
.brx-body .bpg-wrapper {
    min-height: 200px;
}