/**
 * Instagram slider.
 *
 * Reunites a component that was split across two systems: this CSS lived in
 * Customizer → Additional CSS (post 1387, lines 80-173) while its JavaScript
 * lived in the WPCode global Footer field. Both are now here, together.
 *
 * WHY THIS EXISTS AT ALL: Smash Balloon Instagram Feed is the free edition
 * (6.13.0), where carousel layout is a Pro feature. This turns the free grid
 * into a scroll-snapping carousel.
 *
 * Rules below are copied verbatim from the Customizer, with nothing added.
 * In particular the .insta-slider-arrow buttons are deliberately left
 * unstyled: they were never styled before and inherit the theme's button
 * styling, so adding rules here would change how they look.
 *
 * Comments in the original are in Cebuano and are left as they were.
 */

/* Container Wrapper */
.instagram-custom-slider-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 30px; /* Gintang para sa mga bullets sa ubos */
}

/* Ang mismong laray sa mga images sa Smash Balloon */
#sbi_images {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Tagoan ang scrollbar sa Firefox */
    gap: 15px !important; /* Gintang sa matag image */
    width: 100% !important;
    padding: 10px 0 !important;
}

/* Tagoan ang scrollbar sa Chrome, Safari, ug Opera */
#sbi_images::-webkit-scrollbar {
    display: none;
}

/* Ang matag image tile (Eksakto nga 4 ka tiles kada screen width) */
#sbi_images .sbi_item {
    flex: 0 0 calc((100% - (15px * 3)) / 4) !important; /* Kalkulasyon para sakto nga 4 tiles sa desktop */
    scroll-snap-align: start;
    aspect-ratio: 1 / 1 !important; /* Pugson nga square kanunay */
    width: auto !important;
    min-width: 0;
}

#sbi_images .sbi_item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* --- Orange Pagination/Bullets Styling --- */
.instagram-custom-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Gintang sa mga lingin */
    margin-top: 15px;
    width: 100%;
}

.custom-bullet {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 87, 34, 0.3); /* Hanap nga orange para sa dili active */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Kung mao kini ang active nga slide, mosiga ug modako gamay */
.custom-bullet.active {
    background-color: #ff5722; /* Hayag nga orange pareha sa imong figma */
    width: 12px;
    height: 12px;
}

/* Mobile Responsive: Himoon natong 2 ka tiles kada view */
@media (max-width: 768px) {
    #sbi_images .sbi_item {
        flex: 0 0 calc((100% - (15px * 1)) / 2) !important; /* 2 ka tiles sa mobile */
    }
}


/*.......................*/

#sbi_images>.sbi_item a, #sbi_images>.sbi_item .sbi_photo {
    opacity: 0.7 !important;
}

#sb_instagram #sbi_images .sbi_item {
    background-color: #000;
}



#sbi_load {
	display: none !important;
}

.sb_instagram_header   {
	display: none !important;
}