html body main .elementor-widget-button.elementor-button-animated-icon a,
html body main .elementor-widget-button.elementor-button-animated-icon a:hover,
html body main .elementor-widget-button.elementor-button-outlined-animated-icon a,
html body main .elementor-widget-button.elementor-button-outlined-animated-icon a:hover {
    padding:    0;
    border:     none;
    box-shadow: none;
}

html body main .elementor-widget-button.elementor-button-animated-icon a .elementor-button-content-wrapper,
html body main .elementor-widget-button.elementor-button-outlined-animated-icon a .elementor-button-content-wrapper {
    gap: 0;
}

html body main .elementor-widget-button.elementor-button-animated-icon a:before,
html body main .elementor-widget-button.elementor-button-animated-icon a:hover:before,
html body main .elementor-widget-button.elementor-button-animated-icon a:hover:focus,
html body main .elementor-widget-button.elementor-button-outlined-animated-icon a:before,
html body main .elementor-widget-button.elementor-button-outlined-animated-icon a:hover:before,
html body main .elementor-widget-button.elementor-button-outlined-animated-icon a:hover:focus {
    display: none !important;
}

html body main .elementor-widget-button.elementor-button-animated-icon a span.elementor-button-text,
html body main .elementor-widget-button.elementor-button-outlined-animated-icon a span.elementor-button-text {
    padding:         8px 32px;
    border-radius:   20px;
    line-height:     24px;
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    width:           -webkit-fill-available;
}

html body main .elementor-widget-button.elementor-button-outlined-animated-icon a span.elementor-button-text {
    padding: 7px 32px;
}

html body main .elementor-widget-button.elementor-button-animated-icon a span.elementor-button-icon,
html body main .elementor-widget-button.elementor-button-outlined-animated-icon a span.elementor-button-icon {
    min-width:       40px;
    height:          40px;
    border-radius:   100%;
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    position:        relative;
}

html body main .elementor-widget-button.elementor-button-animated-icon a span.elementor-button-icon > span,
html body main .elementor-widget-button.elementor-button-outlined-animated-icon a span.elementor-button-icon > span {
    position:         absolute;
    background-color: transparent !important;
    opacity:          0;
    z-index:          -1;
    left:             -5px;
    margin:           0 !important;
    transition:       ease-in-out .3s all;
}

html body main .elementor-widget-button.elementor-button-animated-icon a:hover span.elementor-button-icon > span,
html body main .elementor-widget-button.elementor-button-outlined-animated-icon a:hover span.elementor-button-icon > span {
    opacity: 1;
}


/* ============================================
   DEFAULT COLORS FOR SHORTCODE BUTTONS
   Elementor widget instances get inline styles via PHP hook.
   Shortcode buttons need default colors here.
   ============================================ */

/* Transparante achtergrond voor beide types */
.elementor-button-animated-icon .elementor-button,
.elementor-button-outlined-animated-icon .elementor-button {
    background: transparent !important;
    background-color: transparent !important;
}

/* FILLED BUTTON (animated-icon) - Default colors */
.elementor-button-animated-icon .elementor-button-icon,
.elementor-button-animated-icon .elementor-button-text {
    background-color: var(--e-global-color-primary) !important;
    color: #FFFFFF !important;
}

/* Lottie wrapper inside icon should be transparent */
.elementor-button-animated-icon .elementor-button-icon .custom-lottie-wrapper,
.elementor-button-outlined-animated-icon .elementor-button-icon .custom-lottie-wrapper {
    background-color: transparent !important;
}

.elementor-button-animated-icon .elementor-button:hover .elementor-button-icon,
.elementor-button-animated-icon .elementor-button:hover .elementor-button-text {
    background-color: var(--e-global-color-primary) !important;
}

/* OUTLINED BUTTON (outlined-animated-icon) - Default colors */
.elementor-button-outlined-animated-icon .elementor-button-icon,
.elementor-button-outlined-animated-icon .elementor-button-text {
    border: 1px solid var(--e-global-color-primary) !important;
    background-color: var(--e-global-color-secondary) !important;
    color: var(--e-global-color-198af38) !important;
}

.elementor-button-outlined-animated-icon .elementor-button:hover .elementor-button-icon,
.elementor-button-outlined-animated-icon .elementor-button:hover .elementor-button-text {
    border: 1px solid var(--e-global-color-primary) !important;
}