/* Mobile Touch Target Optimization CSS */

/* Ensure all interactive elements meet 44px minimum touch target */
@media (max-width: 768px) {
  
  /* Navigation touch targets */
  .nav-link, .mobile-nav-link, .dropdown-link {
    min-height: 48px !important;
    min-width: 48px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1rem !important;
  }
  
  /* Button touch targets */
  button, .btn, .cta-button, .card-link, .secondary-button {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 0.8rem 1.2rem !important;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
  }
  
  /* Form input touch targets */
  input, select, textarea {
    min-height: 48px !important;
    padding: 0.8rem !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    border-radius: 8px;
    border: 2px solid #ddd;
  }
  
  /* Small button improvements */
  .duration-badge, .chip, .safari-quicknav .chip {
    min-height: 44px !important;
    padding: 0.6rem 1rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  
  /* Category/filter buttons */
  .category-btn, .filter-btn {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 0.8rem 1rem !important;
    margin: 0.2rem;
    white-space: nowrap;
    border-radius: 25px;
  }
  
  /* WhatsApp and booking buttons */
  .whatsapp-book-btn, .whatsapp-btn {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 0.8rem 1.5rem !important;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  
  /* Close buttons and small controls */
  .mobile-nav-close, .close-btn, .modal-close {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.5rem !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Links in content */
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
    margin: -0.3rem -0.5rem; /* Negative margin to maintain visual appearance */
  }
  
  /* Gallery and image controls */
  .gallery-nav, .image-nav, .carousel-control {
    min-height: 48px !important;
    min-width: 48px !important;
    padding: 0.8rem !important;
  }
  
  /* FAQ and accordion toggles */
  .faq-toggle, .accordion-toggle {
    min-height: 48px !important;
    width: 100%;
    padding: 1rem !important;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  /* Social media icons */
  .social-link, .social-icon {
    min-height: 48px !important;
    min-width: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  
  /* Mobile-specific improvements */
  .mobile-only-larger {
    font-size: 1.1rem !important;
    padding: 1rem 1.5rem !important;
  }
  
  /* Ensure adequate spacing between touch targets */
  .button-group > *, .nav-links > *, .categories-container > * {
    margin: 0.3rem !important;
  }
  
  /* Improve contrast for better visibility */
  button:focus, .btn:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid #ff6b35;
    outline-offset: 2px;
  }
  
  /* Active state feedback */
  button:active, .btn:active {
    transform: scale(0.98);
    transition: transform 0.1s;
  }
  
  /* Ensure text is readable on touch targets */
  button, .btn, .cta-button {
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
  }
  
  /* Special handling for icon-only buttons */
  .icon-only-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0.8rem !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Floating action buttons */
  .fab, .floating-btn {
    min-height: 56px !important;
    min-width: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
  }
}

/* Extra small screens (< 480px) */
@media (max-width: 480px) {
  /* Slightly larger touch targets for very small screens */
  button, .btn, .cta-button {
    min-height: 50px !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem;
  }
  
  /* Ensure form inputs are comfortable on small screens */
  input, select, textarea {
    min-height: 50px !important;
    padding: 1rem !important;
    font-size: 16px !important;
  }
  
  /* Navigation improvements for small screens */
  .nav-link, .mobile-nav-link {
    min-height: 50px !important;
    padding: 1rem !important;
    font-size: 1rem;
  }
}

/* High DPI screens - ensure touch targets remain appropriate */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  button, .btn, input, select, textarea, a {
    border-width: 1px; /* Thinner borders on high DPI */
  }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  /* Slightly reduce vertical padding in landscape to save space */
  button, .btn, .cta-button {
    padding: 0.6rem 1.2rem !important;
  }
  
  input, select, textarea {
    padding: 0.6rem !important;
  }
  
  .nav-link, .mobile-nav-link {
    padding: 0.6rem 1rem !important;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  button:active, .btn:active {
    transform: none;
  }
}

@media (prefers-contrast: high) {
  button, .btn, input, select, textarea {
    border-width: 2px !important;
  }
  
  button:focus, .btn:focus, input:focus, select:focus, textarea:focus {
    outline-width: 4px !important;
  }
}