@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    @apply bg-gray-50 text-gray-900 antialiased;
    touch-action: manipulation;
  }

  /* Prevent pull-to-refresh on mobile */
  html, body {
    overscroll-behavior-y: contain;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500 active:bg-primary-700;
  }

  .btn-secondary {
    @apply btn bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-500;
  }

  .btn-danger {
    @apply btn bg-red-500 text-white hover:bg-red-600 focus:ring-red-500;
  }

  .btn-lg {
    @apply px-6 py-3 text-lg;
  }

  .card {
    @apply bg-white rounded-xl shadow-sm border border-gray-100;
  }

  .input {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none transition-colors;
  }

  .product-card {
    @apply card p-3 flex flex-col items-center justify-center cursor-pointer hover:shadow-md transition-shadow active:scale-95;
    min-height: 100px;
  }

  .cart-item {
    @apply flex items-center justify-between py-3 border-b border-gray-100 last:border-0;
  }

  .quantity-btn {
    @apply w-10 h-10 rounded-full flex items-center justify-center text-lg font-bold transition-colors;
  }
}

@layer utilities {
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-top {
    padding-top: env(safe-area-inset-top);
  }

  /* Hide scrollbar but keep functionality */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}
