/**
 * Widget-specific styles for animated hover
 * This ensures all animation types work with widgets
 */

/* Base widget container styles */
.elementor-widget.animated-hover-enabled .elementor-widget-container {
    position: relative !important;
    --animated-hover-color: #9333ea;
    --animated-hover-speed: 2s;
    --animated-hover-border-width: 2px;
}

/* Apply all animation types to widgets */
.elementor-widget.animated-hover-type-glow .elementor-widget-container,
.elementor-widget.animated-hover-type-pulse .elementor-widget-container,
.elementor-widget.animated-hover-type-rotate .elementor-widget-container,
.elementor-widget.animated-hover-type-shimmer .elementor-widget-container,
.elementor-widget.animated-hover-type-border-draw .elementor-widget-container,
.elementor-widget.animated-hover-type-gradient .elementor-widget-container {
    border: var(--animated-hover-border-width) solid transparent;
    position: relative;
}

/* Pseudo-elements for all widget animation types */
.elementor-widget.animated-hover-type-glow .elementor-widget-container::before,
.elementor-widget.animated-hover-type-pulse .elementor-widget-container::before,
.elementor-widget.animated-hover-type-rotate .elementor-widget-container::before,
.elementor-widget.animated-hover-type-shimmer .elementor-widget-container::before,
.elementor-widget.animated-hover-type-border-draw .elementor-widget-container::before,
.elementor-widget.animated-hover-type-gradient .elementor-widget-container::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Specific styles for each animation type on widgets */
.elementor-widget.animated-hover-type-glow .elementor-widget-container::before {
    background: var(--animated-hover-color);
    filter: blur(10px);
}

.elementor-widget.animated-hover-type-glow .elementor-widget-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: var(--animated-hover-border-width) solid var(--animated-hover-color);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.elementor-widget.animated-hover-type-pulse .elementor-widget-container::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: var(--animated-hover-border-width) solid var(--animated-hover-color);
}

.elementor-widget.animated-hover-type-rotate .elementor-widget-container::before {
    background: linear-gradient(
        0deg,
        var(--animated-hover-color) 0%,
        transparent 25%,
        transparent 75%,
        var(--animated-hover-color) 100%
    );
    background: conic-gradient(
        from 0deg,
        var(--animated-hover-color),
        transparent 50%,
        transparent 50%,
        var(--animated-hover-color)
    );
}

.elementor-widget.animated-hover-type-shimmer .elementor-widget-container::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 30%,
        var(--animated-hover-color) 50%,
        transparent 70%,
        transparent 100%
    );
    background-size: 200% 100%;
}

.elementor-widget.animated-hover-type-border-draw .elementor-widget-container::before {
    padding: var(--animated-hover-border-width);
    background: var(--animated-hover-color);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    clip-path: inset(0 100% 100% 0);
}

.elementor-widget.animated-hover-type-gradient .elementor-widget-container::before {
    padding: var(--animated-hover-border-width);
    background: linear-gradient(
        45deg,
        var(--animated-hover-color),
        rgba(147, 51, 234, 0.5),
        var(--animated-hover-color),
        rgba(147, 51, 234, 0.5),
        var(--animated-hover-color)
    );
    background-size: 300% 300%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

/* Hover mode for widgets */
.elementor-widget.animated-hover-mode-hover.animated-hover-type-glow:hover .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-hover.animated-hover-type-glow:hover .elementor-widget-container::after,
.elementor-widget.animated-hover-mode-hover.animated-hover-type-pulse:hover .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-hover.animated-hover-type-rotate:hover .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-hover.animated-hover-type-shimmer:hover .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-hover.animated-hover-type-border-draw:hover .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-hover.animated-hover-type-gradient:hover .elementor-widget-container::before {
    opacity: 1 !important;
}

.elementor-widget.animated-hover-mode-hover.animated-hover-type-glow:hover .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-hover.animated-hover-type-glow:hover .elementor-widget-container::after {
    animation: glow-pulse var(--animated-hover-speed) ease-in-out infinite;
}

.elementor-widget.animated-hover-mode-hover.animated-hover-type-pulse:hover .elementor-widget-container::before {
    animation: pulse-border var(--animated-hover-speed) ease-in-out infinite;
}

.elementor-widget.animated-hover-mode-hover.animated-hover-type-rotate:hover .elementor-widget-container::before {
    animation: rotate-border var(--animated-hover-speed) linear infinite;
}

.elementor-widget.animated-hover-mode-hover.animated-hover-type-shimmer:hover .elementor-widget-container::before {
    animation: shimmer-sweep var(--animated-hover-speed) ease-in-out infinite;
}

.elementor-widget.animated-hover-mode-hover.animated-hover-type-border-draw:hover .elementor-widget-container::before {
    animation: border-draw var(--animated-hover-speed) ease-in-out forwards;
}

.elementor-widget.animated-hover-mode-hover.animated-hover-type-gradient:hover .elementor-widget-container::before {
    animation: gradient-flow var(--animated-hover-speed) ease-in-out infinite;
}

/* Always animated mode for widgets */
.elementor-widget.animated-hover-mode-always.animated-hover-type-glow .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-always.animated-hover-type-glow .elementor-widget-container::after,
.elementor-widget.animated-hover-mode-always.animated-hover-type-pulse .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-always.animated-hover-type-rotate .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-always.animated-hover-type-shimmer .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-always.animated-hover-type-border-draw .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-always.animated-hover-type-gradient .elementor-widget-container::before {
    opacity: 1 !important;
}

.elementor-widget.animated-hover-mode-always.animated-hover-type-glow .elementor-widget-container::before,
.elementor-widget.animated-hover-mode-always.animated-hover-type-glow .elementor-widget-container::after {
    animation: glow-pulse var(--animated-hover-speed) ease-in-out infinite;
}

.elementor-widget.animated-hover-mode-always.animated-hover-type-pulse .elementor-widget-container::before {
    animation: pulse-border var(--animated-hover-speed) ease-in-out infinite;
}

.elementor-widget.animated-hover-mode-always.animated-hover-type-rotate .elementor-widget-container::before {
    animation: rotate-border var(--animated-hover-speed) linear infinite;
}

.elementor-widget.animated-hover-mode-always.animated-hover-type-shimmer .elementor-widget-container::before {
    animation: shimmer-sweep var(--animated-hover-speed) ease-in-out infinite;
}

.elementor-widget.animated-hover-mode-always.animated-hover-type-border-draw .elementor-widget-container::before {
    animation: border-draw var(--animated-hover-speed) ease-in-out forwards;
}

.elementor-widget.animated-hover-mode-always.animated-hover-type-gradient .elementor-widget-container::before {
    animation: gradient-flow var(--animated-hover-speed) ease-in-out infinite;
}

/* Ensure widget content is above animation */
.elementor-widget.animated-hover-enabled .elementor-widget-container > * {
    position: relative;
    z-index: 1;
}