/* wrapper */
.ic-icon-carousel-wrapper {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 0;
}

/* slide */
.ic-item {
    text-align: center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    box-sizing: border-box;
    padding: 8px;
    height: auto; 

    /* === FIX FOR ELEMENTOR EDIT MODE: Show multiple items side-by-side === */
    /* Swiper not active: Fallback to 20% width (assumes 5 slides for a clean editor view) */
    width: 20%; 
    float: left; 
}

/* circle containing svg */
.ic-circle {
    width: 110px;
    height: 110px;
    border-radius: var(--ic-border-radius, 999px);
    border: var(--ic-border-width, 2px) solid var(--ic-border-color, #e96b1f);
    background: var(--ic-circle-bg, transparent);
    display:flex;
    align-items:center;
    justify-content:center;
    margin: 0 auto 8px;
    box-sizing: border-box;
    max-width: 110px; 
    min-width: 110px;
}

/* svg image sizing */
.ic-svg {
    /* Main icon size setting via variable */
    width: calc(var(--ic-icon-size, 48px));
    height: calc(var(--ic-icon-size, 48px));
    display: block;
}

/* Fallback: Ensure SVG content inside the img tag takes 100% of the ic-svg area */
.ic-svg img {
    width: 100%;
    height: 100%;
}

/* title */
.ic-title {
    font-weight: 700;
    font-size: 14px; 
    margin-top: 6px;
    min-height: 40px; 
    line-height: 1.4;
    white-space: normal; 
    max-width: 100%; 
}

/* pagination (dots) - Margin Fix (Increased Specificity) */
/* শুধু ic-icon-carousel-wrapper এর ভিতরের ডট কন্টেইনারে মার্জিন দেবে */
.ic-icon-carousel-wrapper .ic-swiper-pagination {
    margin-top: 30px !important; 
    text-align: center;
}

/* --- Responsive Fixes --- */

/* 768px-এর নিচে (Tablet) */
@media (max-width: 768px) {
    /* Edit Mode Fallback for Tablet */
    .ic-item { width: 33.33%; } 
    
    .ic-circle { 
        width: 88px; 
        height: 88px; 
        max-width: 88px;
        min-width: 88px;
    }
    .ic-svg { 
        width: calc(var(--ic-icon-size, 40px)); 
        height: calc(var(--ic-icon-size, 40px)); 
    }
}

/* 480px-এর নিচে (Mobile) */
@media (max-width: 480px) {
    /* Edit Mode Fallback for Mobile */
    .ic-item { width: 50%; } 
    
    .ic-circle { 
        width: 68px; 
        height: 68px; 
        max-width: 68px;
        min-width: 68px;
    }
    .ic-svg { 
        width: calc(var(--ic-icon-size, 32px)); 
        height: calc(var(--ic-icon-size, 32px)); 
    }
    
    /* --- NEW FIX: Mobile Margin 40px (Increased Specificity) --- */
    .ic-icon-carousel-wrapper .ic-swiper-pagination {
        margin-top: 40px !important; 
    }
}

/* simple hover */
.ic-item .ic-item-link { display:block; color:inherit; text-decoration:none; }
.ic-item:hover { transform: translateY(-4px); transition: 0.18s ease; }

/* BASIC DOT STYLING - Increased Specificity */
/* Swiper-এর ডিফল্ট স্টাইলকে ওভাররাইড করছে - শুধু আপনার উইজেটের জন্য */
.ic-icon-carousel-wrapper .ic-swiper-pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    margin: 0 6px !important; 
    display: inline-block !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    /* Opacity এখন widget-icon-carousel.php থেকে dynamic colour দ্বারা সেট হবে */
    transition: background-color 0.3s ease, transform 0.3s ease; 
}

/* অ্যাক্টিভ ডট স্টাইল ফিক্স - Increased Specificity */
.ic-icon-carousel-wrapper .ic-swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1 !important; 
    transform: scale(1.2) !important; 
}