/**
 * Service Card Swap Styles
 * Controls visibility and animations for service section swapping
 */

/* Hide service detail sections by default */
.service-detail {
    display: none !important;
}

/* Show service detail when visible class is added */
.service-detail.service-visible {
    display: flex !important;
}

/* Main services section visible by default */
.services-main {
    display: block;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

/* Hide main services when hidden class is added */
.services-main.service-hidden {
    display: none;
    opacity: 0;
}

/* Hidden state for any element */
.service-hidden {
    display: none !important;
    opacity: 0;
}

/* Visible state for any element */
.service-visible {
    display: flex !important;
    opacity: 1;
}

/* Service trigger cards - make them clickable */
.service-trigger {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-trigger:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Exit button - just add cursor pointer, keep Elementor styling */
.service-exit {
    cursor: pointer;
}

/* Animation for service detail entrance */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spin animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Add class "spin" to any element for continuous spin */
.spin {
    animation: spin 2s linear infinite;
}

/* Slower spin */
.spin-slow {
    animation: spin 4s linear infinite;
}

/* Faster spin */
.spin-fast {
    animation: spin 1s linear infinite;
}

/* Spin on hover only */
.spin-hover:hover {
    animation: spin 1s linear infinite;
}