/* Basic mobile styling for Columns → Swiper */

@media (max-width: 782px) {
    .wp-block-columns.columns-to-swiper {
        display: block;
    }

    /* Just in case theme forces flex/width on columns */
    .wp-block-columns.columns-to-swiper>.wp-block-column {
        width: 100%;
        margin: 0;
    }

    .ccbs-columns-swiper {
        overflow: hidden;
    }

    .ccbs-columns-swiper {
        position: relative;
        padding-bottom: 40px;
        /* Space for the dots */
    }

    .ccbs-columns-swiper .swiper-pagination {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }


    /* Container spacing */
    .ccbs-columns-swiper {
        position: relative;
        padding-bottom: 30px;
        /* Space under slides */
    }

    /* Pagination positioned under the slider */
    .ccbs-columns-swiper .swiper-pagination {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Turn each bullet into a horizontal line */
    .ccbs-columns-swiper .swiper-pagination-bullet {
        width: 30px;
        /* Requested width */
        height: 3px;
        /* Thin line */
        border-radius: 0px;
        /* Slight rounding */
        background: #ccc;
        /* Inactive color */
        opacity: 1 !important;
        /* Force visibility */
    }

    /* Active bullet styling */
    .ccbs-columns-swiper .swiper-pagination-bullet-active {
        background: #45669E;
        /* Active color */
    }

    body .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
    body .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 3px);
    }


}

/* Optional: tweak pagination dots if you want
.swiper-pagination-bullet {
}
*/