/* ══════════════════════════════════════════════
   GLOBAL TOUCH FIXES v6.4
   Applied site-wide to interactive elements ONLY.
   Eliminates grey rectangular flash on iOS Safari.
   ══════════════════════════════════════════════ */

/* 1. Kill iOS tap highlight on interactive elements only */
button,
a,
input[type="submit"],
input[type="button"],
[role="button"],
.service-card,
.path-option-card {
  -webkit-tap-highlight-color: transparent;
}

/* 2. FIX: Override "transition: all" from styles.css on .btn
   This is the ROOT CAUSE of the grey flash — "transition: all"
   animates EVERY property change including tap-highlight removal,
   background-clip, and box-shadow, creating a visible flash frame.
   We restrict transitions to only visual properties that matter. */
.btn,
.btn-primary,
.btn-outline,
.btn-lg {
  transition-property: transform, background-color, color, border-color, opacity !important;
  transition-duration: 0.25s !important;
  transition-timing-function: ease !important;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}

/* 3. Controlled active state — premium press feel */
.btn:active,
.btn-primary:active,
.btn-outline:active,
.btn-lg:active {
  transform: scale(0.98) !important;
  transition-duration: 0.1s !important;
  box-shadow: none !important;
}

/* 4. Touch devices — disable hover effects on buttons */
@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .btn-primary:hover,
  .btn-outline:hover,
  .btn-lg:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Eliminate fadeSlideIn flash on booking transitions */
  .booking-step-visible,
  .booking-flow-visible {
    animation: none !important;
  }

  /* Kill any residual flash on path option cards */
  .path-option-card {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  .path-option-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}