/* ===== COMPREHENSIVE MOBILE TAP HIGHLIGHT REMOVAL ===== */

/* Universal tap highlight removal with highest priority */
*, *::before, *::after {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  tap-highlight-color: rgba(0,0,0,0) !important;
  tap-highlight-color: transparent !important;
}

/* Chrome-specific aggressive fixes */
html {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-tap-highlight-color: transparent !important;
}

body {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Specific targeting for all interactive elements */
a, button, input, select, textarea, label, div[onclick], span[onclick], 
[role="button"], [tabindex], .btn, .button, .link, .nav-item,
.brand, .icon-btn, .load-more-btn, .clear-search-btn {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  tap-highlight-color: rgba(0,0,0,0) !important;
  tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Chrome mobile specific overrides */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  *, *::before, *::after {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  a, button, input, select, textarea, [onclick] {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
  }
}

/* Remove all blue focus/active states on mobile */
@media (max-width: 768px) {
  *, *::before, *::after {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: rgba(0,0,0,0) !important;
    tap-highlight-color: transparent !important;
  }
  
  *:focus, *:active, *:hover, *:visited, *:link {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: rgba(0,0,0,0) !important;
    tap-highlight-color: transparent !important;
    outline: none !important;
    -webkit-focus-ring-color: transparent !important;
  }
  
  /* Override blue box shadows specifically */
  input:focus, select:focus, textarea:focus, button:focus,
  input:active, select:active, textarea:active, button:active {
    box-shadow: none !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    border-color: #4CAF50 !important; /* Keep the green focus instead of blue */
  }
  
  /* Chrome specific navigation fixes */
  .site-header, .navbar, .brand, .icon-btn, .nav-actions {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Remove any blue backgrounds from form controls */
  input[type="text"], input[type="number"], input[type="email"], 
  input[type="password"], input[type="search"], input[type="tel"],
  input[type="url"], input[type="date"], input[type="time"],
  select, textarea {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    background-clip: padding-box !important;
  }
  
  /* Allow text selection where needed */
  input, textarea, [contenteditable], p, span, div[contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
  }
}

/* Additional mobile-specific fixes */
@media (pointer: coarse) {
  * {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    tap-highlight-color: rgba(0,0,0,0) !important;
    tap-highlight-color: transparent !important;
  }
}

/* Chrome Android specific targeting */
@media screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1) {
  *, *::before, *::after {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
  }
  
  a, button, input, select, textarea, [onclick], [role="button"] {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-focus-ring-color: transparent !important;
    background-color: transparent !important;
  }
}

/* Fix for iOS Safari specifically */
@supports (-webkit-overflow-scrolling: touch) {
  * {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
  }
}

/* Force override any existing blue highlights */
html, body {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: rgba(0,0,0,0) !important;
  tap-highlight-color: transparent !important;
}