/* DiLytics Custom Icon Box Stylesheet */

.dilytics-icon-boxes-grid-wrapper {
    width: 100%;
    box-sizing: border-box;
}

/* Grid layout for Desktop / Tablet */
.dilytics-icon-boxes-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

.dilytics-grid-desktop-1 .dilytics-icon-box-wrapper { width: 100%; }
.dilytics-grid-desktop-2 .dilytics-icon-box-wrapper { width: max(180px, calc((100% - 24px) / 2)); }
.dilytics-grid-desktop-3 .dilytics-icon-box-wrapper { width: max(200px, calc((100% - 48px) / 3)); }
.dilytics-grid-desktop-4 .dilytics-icon-box-wrapper { width: max(150px, calc((100% - 72px) / 4)); }

@media (min-width: 768px) and (max-width: 1024px) {
    .dilytics-icon-boxes-grid {
        gap: 20px;
    }
    .dilytics-grid-tablet-1 .dilytics-icon-box-wrapper { width: 100% !important; }
    .dilytics-grid-tablet-2 .dilytics-icon-box-wrapper { width: max(180px, calc((100% - 20px) / 2)) !important; }
    .dilytics-grid-tablet-3 .dilytics-icon-box-wrapper { width: max(150px, calc((100% - 40px) / 3)) !important; }
}

/* Icon Box Variables & Defaults */
.dilytics-icon-box-wrapper {
    --dilytics-ib-bg: rgba(14, 85, 123, 0.03);
    --dilytics-ib-bg-hover: rgba(0, 210, 255, 0.05);
    --dilytics-ib-border-color: #20A1D3;
    --dilytics-ib-border-color-hover: #20A1D3;
    --dilytics-ib-border-radius: 12px;
    --dilytics-ib-padding: 20px 18px;
    
    --dilytics-ib-icon-color: #20A1D3;
    --dilytics-ib-icon-color-hover: #20A1D3;
    --dilytics-ib-icon-size: 24px;
    
    --dilytics-ib-title-color: #0e2246;
    --dilytics-ib-title-color-hover: #20A1D3;
    --dilytics-ib-desc-color: #4a5d78;
    --dilytics-ib-spacing: 16px;
    
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Card Container */
.dilytics-icon-box-card {
    display: flex;
    align-items: center;
    background-color: var(--dilytics-ib-bg);
    border: 1px solid var(--dilytics-ib-border-color);
    border-radius: var(--dilytics-ib-border-radius);
    padding: var(--dilytics-ib-padding);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-decoration: none !important;
    transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s);
    position: relative;
    overflow: hidden;
}

/* Layout Positions */
.dilytics-icon-box-layout-left .dilytics-icon-box-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
}

.dilytics-icon-box-layout-right .dilytics-icon-box-card {
    flex-direction: row-reverse;
    align-items: center;
    text-align: right;
}

.dilytics-icon-box-layout-top .dilytics-icon-box-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.dilytics-icon-box-layout-top.dilytics-icon-box-align-center .dilytics-icon-box-card {
    align-items: center;
    text-align: center;
}

.dilytics-icon-box-layout-top.dilytics-icon-box-align-right .dilytics-icon-box-card {
    align-items: flex-end;
    text-align: right;
}

/* Raw Icon Wrapper - NO borders, NO backgrounds, NO circular or square frames */
.dilytics-icon-box-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    transition: all 0.3s ease;
    z-index: 2;
}

.dilytics-icon-box-icon-wrap i,
.dilytics-icon-box-icon-wrap svg {
    font-size: var(--dilytics-ib-icon-size);
    width: var(--dilytics-ib-icon-size);
    height: var(--dilytics-ib-icon-size);
    line-height: 1;
    color: var(--dilytics-ib-icon-color);
    fill: var(--dilytics-ib-icon-color);
    transition: all 0.3s ease;
}

/* Spacing between icon and content */
.dilytics-icon-box-layout-left .dilytics-icon-box-icon-wrap {
    margin-right: var(--dilytics-ib-spacing);
}

.dilytics-icon-box-layout-right .dilytics-icon-box-icon-wrap {
    margin-left: var(--dilytics-ib-spacing);
}

.dilytics-icon-box-layout-top .dilytics-icon-box-icon-wrap {
    margin-bottom: var(--dilytics-ib-spacing);
}

/* Content Area */
.dilytics-icon-box-content {
    flex-grow: 1;
    z-index: 2;
}

.dilytics-icon-box-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dilytics-ib-title-color);
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    transition: all 0.3s ease;
}

.dilytics-icon-box-description {
    font-size: 14px;
    line-height: 1.5;
    color: var(--dilytics-ib-desc-color);
    margin-top: 8px;
    transition: all 0.3s ease;
}

/* Card Hover Animations matching test.dilytics.com perfectly (Flat border transition, no box shadow, no vertical offset) */
.dilytics-icon-box-card:hover {
    border-color: var(--dilytics-ib-border-color-hover);
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.dilytics-icon-box-card:hover .dilytics-icon-box-icon-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dilytics-icon-box-card:hover .dilytics-icon-box-icon-wrap i,
.dilytics-icon-box-card:hover .dilytics-icon-box-icon-wrap svg {
    color: var(--dilytics-ib-icon-color-hover, var(--dilytics-ib-icon-color));
    fill: var(--dilytics-ib-icon-color-hover, var(--dilytics-ib-icon-color));
    transform: scale(1.05);
}

/* Smart Hover Color Fallback: default to normal title color if hover is unset */
.dilytics-icon-box-card:hover .dilytics-icon-box-title {
    color: var(--dilytics-ib-title-color-hover, var(--dilytics-ib-title-color));
}

/* Mobile Grid / Flex layouts */
@media (max-width: 767px) {
    /* Stacked flex layout for <= 4 items (Centered & perfectly proportioned) */
    .dilytics-icon-boxes-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    /* Slider layout for > 4 items */
    .dilytics-icon-boxes-grid.dilytics-icon-boxes-slider {
        display: grid !important;
        grid-template-columns: none !important;
        grid-template-rows: repeat(2, minmax(0, auto)) !important;
        grid-auto-flow: column !important;
        grid-auto-columns: calc(50% - 10px) !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 15px !important;
        padding: 5px 5px 20px 5px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    .dilytics-icon-boxes-grid.dilytics-icon-boxes-slider::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    .dilytics-icon-box-wrapper {
        scroll-snap-align: none !important;
        width: 100% !important;
        max-width: 320px !important; /* Beautiful rectangular width matching desktop aspect ratio on mobile */
        box-sizing: border-box !important;
        --dilytics-ib-padding: 16px 20px;
        --dilytics-ib-icon-size: 20px;
    }
    
    /* Snap exactly at the start of each page of 4 items */
    .dilytics-icon-boxes-grid.dilytics-icon-boxes-slider .dilytics-icon-box-wrapper:nth-child(4n+1) {
        scroll-snap-align: start !important;
    }
    
    .dilytics-icon-box-card {
        height: 100%;
        display: flex;
        box-sizing: border-box;
    }
}

/* Navigation dots styling */
.dilytics-icon-boxes-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .dilytics-icon-boxes-dots {
        display: flex;
    }
}

.dilytics-icon-boxes-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(32, 161, 211, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.dilytics-icon-boxes-dot.active {
    width: 20px;
    height: 8px;
    border-radius: 4px;
    background-color: #20A1D3;
    /* box-shadow: 0 0 8px rgba(0, 210, 255, 0.6); */
}

/* Ensure dots are completely hidden when their parent tab is collapsed or inactive */
.elementor-tab-content:not(.elementor-active) .dilytics-icon-boxes-dots,
.e-n-tab-content:not(.e-active) .dilytics-icon-boxes-dots,
.elementor-tab-content[aria-hidden="true"] .dilytics-icon-boxes-dots,
.e-n-tab-content[aria-hidden="true"] .dilytics-icon-boxes-dots,
.e-n-tabs-content > .e-con:not(.e-active) .dilytics-icon-boxes-dots,
.e-n-tabs-content > .e-con[aria-hidden="true"] .dilytics-icon-boxes-dots,
.dilytics-tab-content:not(.active) .dilytics-icon-boxes-dots {
    display: none !important;
}