/*
 * MDL Touch Fix — Safari iOS double-tap issue ONLY
 *
 * Problem: MDL's MaterialRipple JS injects a position:absolute ripple span
 * on touchstart. Safari iOS interprets this DOM change under the finger as
 * a hover event, requiring a second tap to actually fire the click.
 *
 * This ONLY affects Safari on iOS. Android Chrome handles it correctly.
 *
 * Fix: Use @supports (-webkit-touch-callout: none) which matches
 * Safari iOS exclusively (not Chrome iOS, not Android, not desktop Safari).
 */

/* Target Safari iOS only */
@supports (-webkit-touch-callout: none) {

  /* 1. Neutralize hover background changes that trigger the double-tap */
  .mdl-button:hover {
    background-color: transparent !important;
  }
  .mdl-button--raised:hover {
    background-color: rgba(158,158,158, 0.20) !important;
  }
  .mdl-button--raised.mdl-button--colored:hover {
    background-color: rgb(106, 43, 128) !important;
  }
  .mdl-button--fab.mdl-button--colored:hover {
    background-color: rgb(134, 177, 215) !important;
  }

  /* 2. Prevent the ripple container from intercepting taps */
  .mdl-button__ripple-container {
    pointer-events: none !important;
  }

  /* 3. Disable ripple visibility during the hover-delay window */
  .mdl-ripple {
    opacity: 0 !important;
    transition: none !important;
  }

  /* 4. Prevent double-tap-to-zoom on all MDL buttons */
  .mdl-button,
  .mdl-js-button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}