.remote-arrow-wrapper {
    display: inline-flex;
    align-items: center;
}

.remote-arrow {
    transition: color 0.3s ease;
    display: inline-block;
    cursor: pointer;
}

.remote-arrow:hover {
    opacity: 0.8;
}

.remote-arrow-wrapper a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.remote-arrow-text {
    transition: all 0.3s ease;
}

.remote-arrow-icon {
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

/* Arrow Position Styles */
.remote-arrow-before {
    flex-direction: row;
}

.remote-arrow-after {
    flex-direction: row;
}

/* Hover Animations */
.remote-arrow-hover-slide:hover .remote-arrow-icon {
    transform: translateX(5px);
}

.remote-arrow-hover-slide.remote-arrow-before:hover .remote-arrow-icon {
    transform: translateX(-5px);
}

.remote-arrow-hover-bounce:hover .remote-arrow-icon {
    animation: remoteArrowBounce 0.6s ease infinite;
}

.remote-arrow-hover-pulse:hover {
    animation: remoteArrowPulse 1s ease infinite;
}

/* Animations */
@keyframes remoteArrowBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-2px);
    }
}

@keyframes remoteArrowPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Direction specific hover effects */
.remote-arrow-wrapper[class*="hover-slide"]:hover .fas.fa-arrow-up {
    transform: translateY(-5px);
}

.remote-arrow-wrapper[class*="hover-slide"]:hover .fas.fa-arrow-down {
    transform: translateY(5px);
}

.remote-arrow-wrapper[class*="hover-slide"]:hover .fas.fa-arrow-left {
    transform: translateX(-5px);
}

.remote-arrow-wrapper[class*="hover-slide"]:hover .fas.fa-arrow-right {
    transform: translateX(5px);
}

.remote-arrow-left {
    margin-right: 20px; /* Default spacing, can be overridden by Elementor */
} 

.remote-arrow-button[disabled] {
   opacity: 0.5;
    cursor: default;
}

.remote-arrow-button[disabled]:hover {
    opacity: 0.5;
    cursor: default;
}