/* CSS Stylesheet for AnySVG Icon Widget */

.elementor-widget-anysvg_icon .elementor-icon-wrapper {
    width: 100%;
}

.elementor-widget-anysvg_icon .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    transform: rotate(var(--custom-svg-rotate, 0deg));
    box-sizing: border-box;
    text-decoration: none;
}

.elementor-widget-anysvg_icon .elementor-icon svg {
    display: block;
    width: var(--custom-svg-size, 50px);
    height: var(--custom-svg-size, 50px);
    transition: all 0.3s ease;
    /* Ensure child paths adapt to currentColor if no overrides are active */
    fill: currentColor; 
}

.elementor-widget-anysvg_icon .elementor-icon svg * {
    transition: fill 0.3s ease, stroke 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

/* --- Default View --- */
.elementor-widget-anysvg_icon.elementor-view-default .elementor-icon {
    color: var(--custom-svg-primary-color, #6EC1E4);
    background: transparent;
    border: none;
}

/* Force Fill Mode */
.elementor-widget-anysvg_icon.elementor-view-default.svg-mode-fill .elementor-icon svg,
.elementor-widget-anysvg_icon.elementor-view-default.svg-mode-fill .elementor-icon svg * {
    fill: var(--custom-svg-primary-color, #6EC1E4) !important;
}

/* Force Stroke Mode */
.elementor-widget-anysvg_icon.elementor-view-default.svg-mode-stroke .elementor-icon svg,
.elementor-widget-anysvg_icon.elementor-view-default.svg-mode-stroke .elementor-icon svg * {
    stroke: var(--custom-svg-primary-color, #6EC1E4) !important;
    fill: none !important; /* Force outline only */
}

/* Force Both Mode */
.elementor-widget-anysvg_icon.elementor-view-default.svg-mode-both .elementor-icon svg,
.elementor-widget-anysvg_icon.elementor-view-default.svg-mode-both .elementor-icon svg * {
    fill: var(--custom-svg-primary-color, #6EC1E4) !important;
    stroke: var(--custom-svg-primary-color, #6EC1E4) !important;
}


/* --- Stacked View --- */
.elementor-widget-anysvg_icon.elementor-view-stacked .elementor-icon {
    background-color: var(--custom-svg-primary-color, #6EC1E4);
    color: var(--custom-svg-secondary-color, #ffffff);
    padding: var(--custom-svg-padding, 15px);
    border-radius: var(--custom-svg-border-radius, 50%);
    border: none;
}

/* Force Fill Mode */
.elementor-widget-anysvg_icon.elementor-view-stacked.svg-mode-fill .elementor-icon svg,
.elementor-widget-anysvg_icon.elementor-view-stacked.svg-mode-fill .elementor-icon svg * {
    fill: var(--custom-svg-secondary-color, #ffffff) !important;
}

/* Force Stroke Mode */
.elementor-widget-anysvg_icon.elementor-view-stacked.svg-mode-stroke .elementor-icon svg,
.elementor-widget-anysvg_icon.elementor-view-stacked.svg-mode-stroke .elementor-icon svg * {
    stroke: var(--custom-svg-secondary-color, #ffffff) !important;
    fill: none !important;
}

/* Force Both Mode */
.elementor-widget-anysvg_icon.elementor-view-stacked.svg-mode-both .elementor-icon svg,
.elementor-widget-anysvg_icon.elementor-view-stacked.svg-mode-both .elementor-icon svg * {
    fill: var(--custom-svg-secondary-color, #ffffff) !important;
    stroke: var(--custom-svg-secondary-color, #ffffff) !important;
}


/* --- Framed View --- */
.elementor-widget-anysvg_icon.elementor-view-framed .elementor-icon {
    border-style: solid;
    border-width: var(--custom-svg-border-width, 3px);
    border-color: var(--custom-svg-primary-color, #6EC1E4);
    background-color: var(--custom-svg-secondary-color, transparent);
    color: var(--custom-svg-primary-color, #6EC1E4);
    padding: var(--custom-svg-padding, 15px);
    border-radius: var(--custom-svg-border-radius, 50%);
}

/* Force Fill Mode */
.elementor-widget-anysvg_icon.elementor-view-framed.svg-mode-fill .elementor-icon svg,
.elementor-widget-anysvg_icon.elementor-view-framed.svg-mode-fill .elementor-icon svg * {
    fill: var(--custom-svg-primary-color, #6EC1E4) !important;
}

/* Force Stroke Mode */
.elementor-widget-anysvg_icon.elementor-view-framed.svg-mode-stroke .elementor-icon svg,
.elementor-widget-anysvg_icon.elementor-view-framed.svg-mode-stroke .elementor-icon svg * {
    stroke: var(--custom-svg-primary-color, #6EC1E4) !important;
    fill: none !important;
}

/* Force Both Mode */
.elementor-widget-anysvg_icon.elementor-view-framed.svg-mode-both .elementor-icon svg,
.elementor-widget-anysvg_icon.elementor-view-framed.svg-mode-both .elementor-icon svg * {
    fill: var(--custom-svg-primary-color, #6EC1E4) !important;
    stroke: var(--custom-svg-primary-color, #6EC1E4) !important;
}