/* Public Booking Page Styles - Optimized for Performance */

/* Custom pagination styles for better mobile experience */
@media (max-width: 640px) {
  /* Ensure minimum touch target size */
  #paginationControls button {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Improve page number buttons on mobile */
  #pageNumbers button {
    min-width: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Better spacing for mobile */
  #paginationControls .block.sm\\:hidden {
    gap: 1rem;
  }
  
  /* Improve select dropdown on mobile */
  #pageSize {
    min-height: 44px;
    padding: 0.75rem;
  }
}

/* Extra small screen optimizations */
@media (max-width: 480px) {
  #paginationControls {
    padding: 1rem;
  }
  
  #pageNumbers {
    gap: 0.25rem;
  }
  
  #pageNumbers button {
    min-width: 36px;
    min-height: 36px;
    font-size: 0.875rem;
  }
  
  /* Hide text on very small screens, show only icons */
  @media (max-width: 360px) {
    #prevPage span,
    #nextPage span {
      display: none;
    }
    
    #prevPage,
    #nextPage {
      min-width: 44px;
      justify-content: center;
    }
  }
}

/* Smooth transitions for pagination */
.review-item {
  transition: opacity 0.3s ease-in-out;
}

/* Loading state for pagination */
.pagination-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Focus styles for accessibility */
#paginationControls button:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Active state for mobile touch */
@media (hover: none) and (pointer: coarse) {
  #paginationControls button:active {
    transform: scale(0.95);
  }
}

/* Critical above-the-fold styles */
.business-header {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

.carousel-container {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* Optimize image loading */
.carousel-slide img {
  will-change: opacity;
}

/* Reduce layout shift */
.carousel-container {
  aspect-ratio: 16/9;
  background: #f3f4f6;
}

/* Optimize map loading */
.map-container {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}