/**
 * Mobile Optimizations
 * Improved touch targets and mobile UX
 */

/* Touch-friendly buttons */
@media (max-width: 768px) {
  .btn, button[type="submit"], input[type="submit"] {
    min-height: 48px !important;
    font-size: 16px !important;
    padding: 14px 20px !important;
  }
  
  /* Larger form inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    min-height: 48px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 12px 14px !important;
  }
  
  /* Improved navigation */
  .bar nav a,
  .bar nav .dropbtn {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
  }
  
  /* Dashboard improvements */
  .dash-stat-card {
    min-height: 160px;
    padding: 24px !important;
  }
  
  .dash-stat-value {
    font-size: 40px !important;
  }
  
  /* Listing cards */
  .listing-card {
    padding: 20px !important;
    margin-bottom: 16px !important;
  }
  
  /* Swipeable elements */
  .dashboard-item,
  .listing-card,
  .bid-item {
    touch-action: pan-y;
    -webkit-tap-highlight-color: rgba(0,0,0,0.05);
  }
  
  /* Improved table on mobile */
  table {
    font-size: 14px !important;
  }
  
  table th,
  table td {
    padding: 12px 8px !important;
  }
  
  /* Auction ending soon cards */
  .ending-soon-item {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  
  /* Better spacing */
  .dashboard-grid {
    gap: 20px !important;
  }
  
  /* Improved flash messages */
  .alert {
    padding: 16px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }
  
  /* Form rows stack on mobile */
  .form-row {
    flex-direction: column !important;
    gap: 0 !important;
  }
  
  .form-row label {
    width: 100% !important;
    margin-bottom: 16px !important;
  }
  
  /* Hero carousel touch improvements */
  .hero-carousel {
    height: 320px !important;
  }
  
  .hero-title {
    font-size: 32px !important;
  }
  
  .hero-subtitle {
    font-size: 16px !important;
  }
  
  .hero-cta {
    flex-direction: column !important;
    width: 100%;
  }
  
  .btn-hero,
  .btn-hero-outline {
    width: 100% !important;
    max-width: 280px;
  }
  
  /* Better modals on mobile */
  .modal-content {
    width: 95% !important;
    margin: 20px auto !important;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  /* Improved badges */
  .badge {
    font-size: 12px !important;
    padding: 6px 10px !important;
    min-height: 28px !important;
  }
  
  /* Better image gallery */
  .listing-detail img {
    max-height: 250px !important;
  }
}

/* Landscape mobile improvements */
@media (max-width: 768px) and (orientation: landscape) {
  .hero-carousel {
    height: 240px !important;
  }
  
  .modal-content {
    max-height: 80vh;
  }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1024px) {
  .btn {
    min-height: 44px;
  }
  
  input, textarea, select {
    font-size: 15px;
  }
}

/* Accessibility - larger tap targets */
@media (pointer: coarse) {
  /* Coarse pointer (touch devices) */
  a, button, .clickable {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Increased spacing between tappable elements */
  nav a {
    margin: 4px 0;
  }
}

/* Prevent text selection on tap */
.dash-stat-card,
.listing-card,
.btn,
.badge {
  -webkit-tap-highlight-color: rgba(0,0,0,0.05);
  -webkit-touch-callout: none;
  user-select: none;
}

/* Smooth scrolling for better UX */
html {
  scroll-behavior: smooth;
}

/* Pull-to-refresh indicator (iOS) */
body {
  overscroll-behavior-y: contain;
}