/* Mobile Animation Fixes CSS */
/* This CSS file completely disables animations on mobile for better job form UX */
/* EXCEPT for mobile navigation which needs animations to function properly */

/* Mobile-specific animation overrides - COMPLETE DISABLE EXCEPT NAVIGATION */
@media screen and (max-width: 768px) {
    /* DISABLE ALL ANIMATIONS AND TRANSITIONS EXCEPT MOBILE NAVIGATION */
    *:not(#mobile-menu):not(.mobile-nav-overlay):not(.mobile-nav-content):not(.mobile-nav-item):not(.mobile-menu-toggle):not(.hamburger-line), 
    *:not(#mobile-menu):not(.mobile-nav-overlay):not(.mobile-nav-content):not(.mobile-nav-item):not(.mobile-menu-toggle):not(.hamburger-line)::before, 
    *:not(#mobile-menu):not(.mobile-nav-overlay):not(.mobile-nav-content):not(.mobile-nav-item):not(.mobile-menu-toggle):not(.hamburger-line)::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        animation-duration: 0s !important;
        animation-delay: 0s !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }
    
    /* Preserve mobile navigation animations */
    #mobile-menu,
    #mobile-menu *,
    .mobile-nav-overlay,
    .mobile-nav-content,
    .mobile-nav-item,
    .mobile-menu-toggle,
    .mobile-menu-toggle *,
    .hamburger-line {
        animation: unset !important;
        transition: unset !important;
        transform: unset !important;
        animation-duration: unset !important;
        animation-delay: unset !important;
        transition-duration: unset !important;
        transition-delay: unset !important;
    }
    
    /* FORM-SPECIFIC OVERRIDES - EXCLUDE MOBILE NAVIGATION */
    #multiStepForm *:not(#mobile-menu):not(.mobile-nav-overlay):not(.mobile-nav-content):not(.mobile-nav-item):not(.mobile-menu-toggle):not(.hamburger-line),
    #multiStepForm *:not(#mobile-menu):not(.mobile-nav-overlay):not(.mobile-nav-content):not(.mobile-nav-item):not(.mobile-menu-toggle):not(.hamburger-line)::before,
    #multiStepForm *:not(#mobile-menu):not(.mobile-nav-overlay):not(.mobile-nav-content):not(.mobile-nav-item):not(.mobile-menu-toggle):not(.hamburger-line)::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    /* Input fields - instant feedback only (exclude mobile nav) */
    input:not(.mobile-nav-content input):not(.mobile-nav-item input), 
    select:not(.mobile-nav-content select):not(.mobile-nav-item select), 
    textarea:not(.mobile-nav-content textarea):not(.mobile-nav-item textarea) {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    input:not(.mobile-nav-content input):not(.mobile-nav-item input):focus, 
    select:not(.mobile-nav-content select):not(.mobile-nav-item select):focus, 
    textarea:not(.mobile-nav-content textarea):not(.mobile-nav-item textarea):focus {
        transition: none !important;
        transform: none !important;
        animation: none !important;
        /* Instant border color change only */
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
    }
    
    /* Buttons - no hover effects, instant feedback only (exclude mobile nav) */
    button:not(.mobile-menu-toggle):not(.mobile-nav-content button):not(.mobile-nav-item button), 
    .btn:not(.mobile-menu-toggle):not(.mobile-nav-content .btn):not(.mobile-nav-item .btn) {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    button:not(.mobile-menu-toggle):not(.mobile-nav-content button):not(.mobile-nav-item button):hover, 
    .btn:not(.mobile-menu-toggle):not(.mobile-nav-content .btn):not(.mobile-nav-item .btn):hover {
        transform: none !important;
        box-shadow: none !important;
        animation: none !important;
    }
    
    button:not(.mobile-menu-toggle):not(.mobile-nav-content button):not(.mobile-nav-item button):active, 
    .btn:not(.mobile-menu-toggle):not(.mobile-nav-content .btn):not(.mobile-nav-item .btn):active {
        transform: none !important;
        animation: none !important;
        /* Instant background color change only */
        background-color: rgba(59, 130, 246, 0.1) !important;
    }
    
    /* Form steps - instant show/hide */
    .form-step {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .form-step.active {
        opacity: 1 !important;
        display: block !important;
        transform: none !important;
    }
    
    .form-step:not(.active) {
        opacity: 0 !important;
        display: none !important;
        transform: none !important;
    }
    
    /* Progress indicators - no animations */
    .progress-step-item {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .progress-step-item:hover {
        transform: none !important;
        animation: none !important;
    }
    
    .progress-step-item.active {
        /* Instant color change only */
        background-color: #eff6ff !important;
        border-color: #3b82f6 !important;
        transform: none !important;
    }
    
    .progress-step-item.completed {
        background-color: #f0fdf4 !important;
        border-color: #10b981 !important;
        transform: none !important;
    }
    
    /* Work type options - no scaling or animations */
    .work-type-option {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .work-type-option:hover {
        transform: none !important;
        box-shadow: none !important;
        animation: none !important;
    }
    
    .work-type-option.selected {
        background-color: #dbeafe !important;
        border-color: #3b82f6 !important;
        transform: none !important;
    }
    
    /* Input wrappers - no scaling */
    .input-wrapper {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .input-wrapper:hover {
        transform: none !important;
    }
    
    /* Job cards - no hover effects */
    .job-card {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .job-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    .job-card:active {
        transform: none !important;
        background-color: rgba(59, 130, 246, 0.05) !important;
    }
    
    /* DISABLE DECORATIVE ANIMATIONS BUT KEEP ELEMENTS VISIBLE */
    .float-animation,
    .pulse-border,
    .scale-in,
    .slide-in-bottom,
    .glow-effect,
    .bounce,
    .fade-in,
    .slide-in,
    .scale-up {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* AOS elements - ensure they remain visible even with disabled animations */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
        display: block !important;
    }
    
    /* Form steps with AOS should always be visible */
    .form-step[data-aos] {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Loading indicators - keep functional but simple */
    .spinner {
        animation: spin 1s linear infinite !important;
    }
    
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    
    /* Modal transitions - instant */
    .modal, #job-details-modal {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    .modal.active, #job-details-modal.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    
    /* Testimonial carousel - no transitions */
    .testimonial-carousel,
    .testimonial-slide {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    
    /* Navigation - instant feedback */
    nav a, .nav-link {
        transition: none !important;
        transform: none !important;
    }
    
    nav a:hover, .nav-link:hover {
        transform: none !important;
        color: #3b82f6 !important;
    }
}