/* Mobile tap highlight fix
 * This file eliminates the blue/purple highlight that appears 
 * when tapping elements on mobile devices
 */


/* Global removal of tap highlight for pages using the unified header */
body.has-consistent-header *,
body.has-consistent-header *::before,
body.has-consistent-header *::after {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}


/* Ensure interactive elements still have visual feedback - Light Mode */
a:active,
button:active,
.menu-icon:active,
.menu-toggle:active,
.profile-icon:active,
.nav-cart:active,
.theme-toggle:active,
.product-card:active:not(:has(.wishlist-btn:active)),
.filter-btn:active,
.sort-btn:active,
.search-btn:active,
label:active,
.delivery-option:active,
div[role="button"]:active {
    opacity: 0.7;
    transition: opacity 0.1s ease;
}

/* Dark Mode visual feedback adjustments */
body.dark a:active,
body.dark button:active,
body.dark .menu-icon:active,
body.dark .menu-toggle:active,
body.dark .profile-icon:active,
body.dark .nav-cart:active,
body.dark .theme-toggle:active,
body.dark .product-card:active:not(:has(.wishlist-btn:active)),
body.dark .filter-btn:active,
body.dark .sort-btn:active,
body.dark .search-btn:active,
body.dark label:active,
body.dark .delivery-option:active,
body.dark div[role="button"]:active {
    opacity: 0.5;
    background-color: rgba(255, 255, 255, 0.05) !important;
    transition: all 0.1s ease;
}

/* Prevent blue highlight on Chrome for Android */
input,
textarea,
button,
select,
a,
label,
div[role="button"] {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* Fix for iOS devices */
a:focus,
a:visited,
a:active {
    outline: none !important;
}

/* Remove default mobile button styling */
button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Accessibility - keep focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--accent-color) !important;
    outline-offset: 2px !important;
}

/* Dark mode focus styles */
body.dark *:focus-visible {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}