/**
 * Mobile Touch Optimizations for Tapavis
 *
 * This file provides comprehensive mobile touch optimizations including:
 * - touch-action for preventing 300ms tap delay on iOS
 * - Consistent :active states for tactile feedback
 * - Hardware acceleration for smooth animations
 * - Proper touch target sizes for accessibility
 */

/* ============================================
   GLOBAL BUTTON OPTIMIZATIONS
   ============================================ */

/* Remove 300ms click delay on mobile Safari and improve touch responsiveness */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
[onclick],
.button,
.btn,
.cta {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Allow text selection in text inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* ============================================
   ACTIVE STATES FOR TACTILE FEEDBACK
   ============================================ */

/* Universal button press feedback */
button:not(:disabled):active,
a[role="button"]:active,
input[type="button"]:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active,
.button:not(:disabled):active,
.btn:not(:disabled):active,
.cta:not(:disabled):active {
  transform: scale(0.98);
  opacity: 0.9;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* CTA buttons - more pronounced feedback */
.reserve-cta:not(:disabled):active,
.launch-cta:not(:disabled):active,
.terminate-cta:not(:disabled):active,
.renew-plan-button:active,
button[class*="-cta"]:not(:disabled):active,
a[class*="-cta"]:not(:disabled):active,
input[class*="-cta"]:not(:disabled):active {
  transform: scale(0.96);
}

/* Footer/Nav buttons - subtle feedback */
.footer-menu a:active,
.merchant-footer__link:not([aria-disabled="true"]):active,
[class*="footer"]:not(:disabled) a:active,
[class*="nav"]:not(:disabled) a:active {
  transform: scale(0.98);
  opacity: 0.85;
}

/* ============================================
   HARDWARE ACCELERATION & PERFORMANCE
   ============================================ */

/* Force GPU acceleration for animated elements */
.offer-card,
.modal,
.overlay,
[class*="modal"],
[class*="overlay"],
[class*="dropdown"],
[class*="menu"],
button,
.button,
.btn,
.cta,
a[role="button"] {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Optimize animations for 60fps */
.offer-card,
.modal,
[class*="modal"],
[class*="overlay"] {
  will-change: transform, opacity;
}

/* Remove will-change after animation completes to save resources */
@media (prefers-reduced-motion: no-preference) {
  .offer-card:not(:hover),
  .modal:not(.is-opening):not(.is-closing) {
    will-change: auto;
  }
}

/* ============================================
   TOUCH TARGET SIZES (WCAG Compliance)
   ============================================ */

/* Ensure minimum 44x44px touch target (Apple HIG) */
button,
a[role="button"],
input[type="button"],
input[type="submit"],
.button,
.btn,
.cta {
  min-height: 44px;
  min-width: 44px;
}

/* Exception for icon-only buttons with explicit small size */
button.icon-only,
.btn-icon {
  min-height: 40px;
  min-width: 40px;
  padding: 8px;
}

/* ============================================
   SCROLL PERFORMANCE
   ============================================ */

/* Enable momentum scrolling on iOS */
.modal,
.overflow-y-auto,
.scroll-container,
[class*="scroll"] {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

/* Prevent scroll chaining on modals */
.modal,
[class*="modal"],
.overlay {
  overscroll-behavior: contain;
}

/* ============================================
   GESTURE OPTIMIZATIONS
   ============================================ */

/* Swipeable elements */
.swipe-to-conclude-handle,
.swipe-handle,
[class*="swipe"] {
  touch-action: pan-x;
  cursor: grab;
}

.swipe-to-conclude-handle:active,
.swipe-handle:active,
[class*="swipe"]:active {
  cursor: grabbing;
}

/* Carousel/slider touch optimization */
.carousel,
.slider,
[class*="carousel"],
[class*="slider"] {
  touch-action: pan-x;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* ============================================
   DISABLED STATE CONSISTENCY
   ============================================ */

button:disabled,
input:disabled,
.button:disabled,
.btn:disabled,
[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  touch-action: none;
}

/* ============================================
   FOCUS VISIBLE (Accessibility)
   ============================================ */

/* Modern focus-visible for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.8);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hide focus ring for mouse/touch */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   LOADING STATES
   ============================================ */

[data-loading="true"],
.loading {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait;
}

/* ============================================
   ANDROID-SPECIFIC OPTIMIZATIONS
   ============================================ */

/* Fix Android click delay */
@media (hover: none) and (pointer: coarse) {
  /* Faster transitions on touch devices */
  button,
  a,
  .button,
  .btn {
    transition-duration: 0.1s !important;
  }

  /* Remove hover states on touch devices */
  button:hover,
  a:hover,
  .button:hover,
  .btn:hover {
    transform: none;
  }
}

/* ============================================
   IOS-SPECIFIC OPTIMIZATIONS
   ============================================ */

/* Fix iOS double-tap zoom on buttons */
@supports (-webkit-touch-callout: none) {
  button,
  a[role="button"],
  .button,
  .btn {
    touch-action: manipulation;
  }
}

/* Safe area insets for notched devices */
/* Note: .merchant-footer is excluded because it handles safe-area-inset-bottom
   directly in merchant-active-offer.css to avoid double-padding issues */
@supports (padding: env(safe-area-inset-bottom)) {
  .footer,
  .footer-menu {
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================
   REDUCED MOTION (Accessibility)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  button:active,
  .button:active,
  .btn:active {
    transform: none;
  }
}

/* ============================================
   ANTI-CLUTTER: HIDE UNNECESSARY ELEMENTS
   ============================================ */

/* Hide decorative elements on small screens to reduce clutter */
@media (max-width: 640px) {
  .decorative,
  .aurora-glow,
  .glow-ring,
  [class*="decoration"],
  [aria-hidden="true"].decorative {
    display: none !important;
  }

  /* Simplify shadows on mobile for better performance */
  .offer-card,
  .modal,
  .glass-panel {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
  }
}

/* ============================================
   PERFORMANCE: REDUCE BLUR ON MOBILE
   ============================================ */

@media (max-width: 768px) {
  /* Reduce backdrop blur for better performance */
  [class*="backdrop-blur"],
  .backdrop-blur,
  .modal,
  .overlay {
    backdrop-filter: blur(8px) !important;
  }
}

/* ============================================
   BETTER BUTTON SPACING ON MOBILE
   ============================================ */

@media (max-width: 640px) {
  /* Increase spacing between buttons for easier tapping */
  .button-group,
  [class*="actions"],
  [class*="buttons"] {
    gap: 1rem;
  }

  /* Stack buttons vertically on small screens */
  .button-group {
    flex-direction: column;
  }

  .button-group button,
  .button-group .button {
    width: 100%;
  }
}

/* ============================================
   TEXT SELECTION OPTIMIZATION
   ============================================ */

/* Prevent text selection on interactive elements */
button,
.button,
.btn,
.cta,
.footer-menu a,
.merchant-footer__link,
[role="button"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Allow text selection in content areas */
p,
li,
.content,
.text,
[role="article"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* ============================================
   VIBRATION/HAPTIC FEEDBACK SUPPORT
   ============================================ */

/* Add data attribute for JS haptic feedback hooks */
button[data-haptic],
.button[data-haptic],
[role="button"][data-haptic] {
  /* Haptics handled by JavaScript */
}