/* WP Gallery Carousel default styles
   These are lightweight and easy to override in theme custom CSS
*/

.wp-gallery-carousel-wrapper {
    max-width: 800px;
    margin: 20px auto;
}

.wp-gallery-carousel-wrapper .main-swiper {
    margin-bottom: 12px;
}

/* Lightbox clickable cue */
.wp-gallery-carousel-wrapper .wpgc-lightbox {
    display: block;
    text-decoration: none;
}
.wp-gallery-carousel-wrapper .wpgc-lightbox img {
    cursor: zoom-in;
}

.wp-gallery-carousel-wrapper .thumb-swiper {
    margin-top: 8px;
    position: relative;

    /* KEY: make room for scrollbar BELOW thumbs */
    padding-bottom: 14px;
}

.wp-gallery-carousel-wrapper .thumb-swiper .swiper-slide {
    width: auto !important;
    opacity: 0.5;
    cursor: pointer;
    padding: 2px;
    transition: opacity 0.2s ease;
}

.wp-gallery-carousel-wrapper .thumb-swiper .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #0073aa;
    border-radius: 4px;
}

.wp-gallery-carousel-wrapper .swiper-button-prev,
.wp-gallery-carousel-wrapper .swiper-button-next {
    color: #0073aa;
}

/* --- Scrollbar BELOW thumbs + colors requested --- */
.wp-gallery-carousel-wrapper .thumb-swiper .swiper-scrollbar {
    position: relative;      /* prevents overlay on thumbs */
    left: auto;
    bottom: auto;

    height: 6px;
    background: #ebeced;     /* track */
    border-radius: 3px;

    margin-top: 10px;        /* space between thumbs and bar */
}

.wp-gallery-carousel-wrapper .thumb-swiper .swiper-scrollbar-drag {
    background: #707070;     /* handle */
    border-radius: 3px;
}

/* When Swiper is locked (no overflow), we center the thumbs */
.wp-gallery-carousel-wrapper.wpgc-thumbs-locked .thumb-swiper .swiper-wrapper {
    justify-content: center;
}