/**
 * BUTTON CLICKABILITY FIX
 * Fixes overlapping elements that prevent buttons from being clicked
 */

/* Force all buttons to be clickable */
.hero-btn, .view-btn, .category-btn, .search-btn, .login-btn, 
button, .btn, a[class*="btn"] {
    /* Ensure buttons are above all other elements */
    position: relative !important;
    z-index: 10000 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    
    /* Touch-friendly sizing */
    min-height: 44px !important;
    min-width: 44px !important;
    
    /* Mobile touch handling */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Special styling for category buttons */
.category-btn {
    z-index: 10001 !important;
    position: relative !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: var(--primary, #DC5414) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    min-height: 44px !important;
    min-width: 44px !important;
}

.category-btn:hover {
    background: var(--primary-dark, #E55A3A) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Fix for featured products section buttons */
.category-card .hero-btn {
    position: relative !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix for search results buttons */
.search-result-item .hero-btn {
    position: relative !important;
    z-index: 10001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure buttons are not covered by pseudo-elements */
.hero-btn::before,
.hero-btn::after,
.category-btn::before,
.category-btn::after {
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Fix for mobile devices */
@media (max-width: 768px) {
    .hero-btn, .view-btn, .category-btn, .search-btn, .login-btn, 
    button, .btn, a[class*="btn"] {
        /* Larger touch targets on mobile */
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        
        /* Ensure they're clickable */
        z-index: 10000 !important;
        position: relative !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    /* Special fix for category buttons */
    .category-btn {
        z-index: 10001 !important;
        position: relative !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        background: var(--primary, #DC5414) !important;
        color: white !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
    }
    
    .category-btn:hover {
        background: var(--primary-dark, #E55A3A) !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Fix for category cards on mobile */
    .category-card {
        position: relative !important;
        z-index: 1 !important;
    }
    
    .category-card .hero-btn {
        z-index: 10001 !important;
        position: relative !important;
        pointer-events: auto !important;
    }
}

/* Fix for small mobile devices */
@media (max-width: 480px) {
    .hero-btn, .view-btn, .category-btn, .search-btn, .login-btn, 
    button, .btn, a[class*="btn"] {
        /* Even larger touch targets on small screens */
        min-height: 50px !important;
        min-width: 50px !important;
        padding: 14px 24px !important;
        font-size: 18px !important;
        width: 100% !important;
        
        /* Ensure they're clickable */
        z-index: 10000 !important;
        position: relative !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}

/* Emergency override for unclickable buttons */
@media screen and (max-width: 768px) {
    .hero-btn, .view-btn, .category-btn, .search-btn, .login-btn, 
    button, .btn, a[class*="btn"] {
        /* Force clickability */
        -webkit-touch-action: manipulation !important;
        touch-action: manipulation !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
        touch-callout: none !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 10000 !important;
        position: relative !important;
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* Fix for language switcher interference */
.language-switcher {
    /* Ensure language switcher doesn't interfere with buttons */
    pointer-events: auto !important;
}

.language-switcher * {
    /* Language switcher elements should not block buttons */
    pointer-events: auto !important;
}

/* Fix for mobile navigation interference */
.mobile-nav {
    /* Ensure mobile nav doesn't interfere when closed */
    pointer-events: none !important;
}

.mobile-nav.active {
    /* Only allow interaction when mobile nav is open */
    pointer-events: auto !important;
}

.mobile-menu-overlay {
    /* Overlay should not interfere when hidden */
    pointer-events: none !important;
}

.mobile-menu-overlay.active {
    /* Only allow interaction when overlay is active */
    pointer-events: auto !important;
}