/**
 * Device Compatibility CSS
 * Industry-standard compatibility for all device types
 *
 * Standards:
 * - iOS: Minimum 44x44px touch targets (Apple HIG)
 * - Android: Minimum 48x48dp touch targets (Material Design)
 * - Font size: Minimum 16px to prevent iOS zoom
 * - Viewport: Proper meta tags for all devices
 *
 * Google Maps: never apply min-size / touch-action / :active transform inside
 * .gm-style or map hosts — those rules fight Maps' internal controls and cause
 * an iOS pan-release tile flash on Discover.
 */

/* ========================================
 * GLOBAL TOUCH TARGET STANDARDS
 * ======================================== */

/* Industry Standard: Minimum 44x44px touch targets for mobile */
/* iOS HIG: 44x44pt minimum, Android Material: 48x48dp minimum */
/* We use 44px as the minimum to satisfy both standards */

/* Base button touch targets */
button,
a[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
  /* Ensure minimum touch target size on mobile */
  min-height: 30px;
  min-width: 60px;
}

/* Icon-only dismiss controls: keep a square hit area, not a wide padded chip */
button.ss-callout-dismiss,
.ss-callout-dismiss {
  min-width: 2rem;
  min-height: 2rem;
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
}

/* Touch device specific: Ensure proper touch targets */
@media (hover: none) and (pointer: coarse) {
  button,
  a[role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .btn,
  .button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0rem 1rem !important; /* Ensure adequate padding */
  }

  button.ss-callout-dismiss,
  .ss-callout-dismiss {
    min-height: 2.75rem !important;
    min-width: 2.75rem !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    padding: 0.5rem !important;
  }

  /* Small screens: Allow slightly smaller but still accessible */
  @media (max-width: 375px) {
    button,
    a[role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"] {
      min-height: 40px !important; /* Slightly reduced for very small screens */
      min-width: 40px !important;
      padding: 0.625rem 0.875rem !important;
    }

    button.ss-callout-dismiss,
    .ss-callout-dismiss {
      min-height: 2.5rem !important;
      min-width: 2.5rem !important;
      width: 2.5rem !important;
      height: 2.5rem !important;
      padding: 0.375rem !important;
    }
  }

  /* Undo touch-target forcing inside Google Maps (and our map hosts). */
  #map-container button,
  #map-container a[role="button"],
  #map-container [role="button"],
  #map-container input[type="button"],
  #map-container input[type="submit"],
  #map-container input[type="reset"],
  #map-container .btn,
  #map-container .button,
  #discover-map-studio button,
  #discover-map-studio a[role="button"],
  #discover-map-studio [role="button"],
  #listspot-map-studio button,
  #listspot-map-studio a[role="button"],
  #listspot-map-studio [role="button"],
  .gm-style button,
  .gm-style a[role="button"],
  .gm-style [role="button"],
  .gm-style input[type="button"],
  .gm-style input[type="submit"],
  .gm-style input[type="reset"],
  .gm-style .btn,
  .gm-style .button,
  /* Listing period / schedule pills: equal-flex + long labels; 1rem side padding clips text */
  .schedule-mode-segmented__btn,
  .schedule-mode-segmented button,
  .schedule-mode-segmented [role="radio"],
  /* Rate tabs / stay-savings chips: designed compact; 44px + 1rem padding makes them oversized */
  .inspector-pricing-tier__toggle,
  .stay-savings-tier-trigger,
  .stay-savings-popover__clear,
  .spot-cell-chip,
  .grid-section-pill,
  .host-group-scope-tabs__pill,
  /* View listing header actions are compact pills, not full CTAs */
  .view-spot-header-action,
  .view-spot-header-actions .btn-brand {
    min-height: unset !important;
    min-width: unset !important;
    padding: unset !important;
  }
}

/* ========================================
 * INPUT FIELD STANDARDS
 * ======================================== */

/* 16px minimum on touch devices only — prevents iOS zoom; avoids fighting Tailwind text-sm on desktop.
   Discover/auth/checkout overrides: base/ios-safari-text-entry-late.css (loads last). */
@media (hover: none) and (pointer: coarse) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px;
    padding: 0.75rem 1rem;
  }

  /* Small screens: Slightly reduced but still accessible */
  @media (max-width: 375px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select {
      font-size: 16px !important;
      min-height: 40px !important;
      padding: 0.625rem 0.875rem !important;
    }
  }

  /* Compact pricing fields: keep 16px (no iOS zoom) but let component CSS own height/pad */
  input.inspector-pricing-tier__input,
  input.step3-price-input,
  .step3-price-input-wrap input.step3-price-input,
  input.stay-savings-popover__input,
  #edit-spot-form .edit-spot-pricing-tier input[type="number"] {
    min-height: unset !important;
    padding: unset !important;
  }
}

/* ========================================
 * RESPONSIVE BREAKPOINTS (Industry Standard)
 * ======================================== */

/* Standard breakpoints:
 * - Mobile: 320px-767px (most common: 375px, 414px)
 * - Tablet: 768px-1023px (most common: 768px, 1024px)
 * - Desktop: 1024px+ (most common: 1280px, 1920px)
 */

/* Mobile First Approach */
@media (max-width: 767px) {
  /* Mobile-specific adjustments */
  body {
    -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjustment */
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ========================================
 * TOUCH INTERACTION OPTIMIZATION
 * ======================================== */

/*
 * Scope to app controls only — not every <a>, and never map surfaces.
 * Global `a { touch-action: manipulation }` + `a:active { transform }` was
 * applied inside .gm-style and caused Discover iOS pan-release map flash.
 */
@media (hover: none) and (pointer: coarse) {
  button,
  a[role="button"],
  .btn,
  .button,
  [role="button"],
  input,
  select,
  textarea,
  label {
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
    touch-action: manipulation;
  }

  /* Improve button touch feedback — buttons only (not bare links). */
  button:active,
  a[role="button"]:active,
  .btn:active,
  .button:active,
  [role="button"]:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  #map-container button,
  #map-container a[role="button"],
  #map-container .btn,
  #map-container .button,
  #map-container [role="button"],
  #map-container input,
  #map-container select,
  #map-container textarea,
  #map-container label,
  #discover-map-studio button,
  #discover-map-studio a[role="button"],
  #discover-map-studio [role="button"],
  #discover-map-studio input,
  #discover-map-studio select,
  #discover-map-studio textarea,
  #discover-map-studio label,
  #listspot-map-studio button,
  #listspot-map-studio a[role="button"],
  #listspot-map-studio [role="button"],
  #listspot-map-studio input,
  #listspot-map-studio select,
  #listspot-map-studio textarea,
  #listspot-map-studio label,
  .gm-style button,
  .gm-style a,
  .gm-style a[role="button"],
  .gm-style .btn,
  .gm-style .button,
  .gm-style [role="button"],
  .gm-style input,
  .gm-style select,
  .gm-style textarea,
  .gm-style label {
    touch-action: auto !important;
    -webkit-tap-highlight-color: transparent;
  }

  #map-container button:active,
  #map-container a[role="button"]:active,
  #map-container .btn:active,
  #map-container .button:active,
  #map-container [role="button"]:active,
  #discover-map-studio button:active,
  #discover-map-studio a[role="button"]:active,
  #discover-map-studio [role="button"]:active,
  #listspot-map-studio button:active,
  #listspot-map-studio a[role="button"]:active,
  #listspot-map-studio [role="button"]:active,
  .gm-style button:active,
  .gm-style a:active,
  .gm-style a[role="button"]:active,
  .gm-style [role="button"]:active {
    transform: none !important;
    transition: none !important;
  }
}

/* ========================================
 * ACCESSIBILITY STANDARDS
 * ======================================== */

/* Keyboard focus only — avoids rings on mouse/touch clicks (components use :focus-visible too) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary-blue, #3b82f6);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  button,
  a,
  input,
  select,
  textarea {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support — never apply the universal * kill to Google Maps.
 * Crushing .gm-style transitions causes iOS pan-release tile flash when
 * prefers-reduced-motion is on (otherwise Maps tile/camera transitions collapse). */
@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;
  }

  .gm-style,
  .gm-style *,
  .gm-style *::before,
  .gm-style *::after,
  #map-container,
  #map-container *,
  #map-container *::before,
  #map-container *::after,
  #discover-map-studio,
  #discover-map-studio *,
  #listspot-map-studio,
  #listspot-map-studio *,
  #listspot-map-studio *::before,
  #listspot-map-studio *::after {
    animation-duration: revert !important;
    animation-iteration-count: revert !important;
    transition-duration: revert !important;
  }
}