@import 'tailwindcss';

/* ── Jumia Clone Design Tokens ──────────────────────────────── */
@layer base {
  :root {
    --brand-orange: #f68b1e;
    --brand-orange-dark: #e07b10;
    --brand-orange-light: #ffa940;
    --brand-green: #00b300;
    --brand-red: #e31837;
    --surface: #f5f5f5;
    --card: #ffffff;
    --text-primary: #1a1a1a;
    --text-muted: #6b7280;
    --border: #e5e7eb;
  }

  * { -webkit-tap-highlight-color: transparent; }

  html { scroll-behavior: smooth; }

  body {
    @apply bg-gray-100 text-gray-900 antialiased;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-track { @apply bg-gray-100; }
  ::-webkit-scrollbar-thumb { @apply bg-gray-300 rounded-full; }
  ::-webkit-scrollbar-thumb:hover { @apply bg-gray-400; }
}

/* ── Custom Utilities ───────────────────────────────────────── */
@layer utilities {
  .text-brand { color: var(--brand-orange); }
  .bg-brand { background-color: var(--brand-orange); }
  .border-brand { border-color: var(--brand-orange); }
  .hover\:bg-brand-dark:hover { background-color: var(--brand-orange-dark); }

  .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* Price strike-through */
  .price-strike { @apply line-through text-gray-400 text-sm; }

  /* Product card hover */
  .product-card { @apply bg-white rounded shadow-sm hover:shadow-md transition-shadow duration-200 cursor-pointer; }
  .product-card:hover .product-img { @apply scale-105; }
  .product-img { @apply transition-transform duration-300; }

  /* Skeleton loading */
  .skeleton { @apply bg-gray-200 animate-pulse rounded; }

  /* Sticky bottom bar (mobile) */
  .bottom-bar { @apply fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 pb-safe; }

  /* Safe area bottom padding for iOS */
  .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

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

  /* Badge */
  .badge { @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium; }
  .badge-orange { @apply badge bg-orange-100 text-orange-700; }
  .badge-green { @apply badge bg-green-100 text-green-700; }
  .badge-red { @apply badge bg-red-100 text-red-700; }
  .badge-gray { @apply badge bg-gray-100 text-gray-600; }

  /* Toast notification */
  .toast { @apply fixed bottom-20 left-1/2 -translate-x-1/2 z-[200] px-4 py-3 rounded-lg shadow-lg text-white text-sm font-medium transition-all duration-300; }

  /* Star rating */
  .star-filled { color: #f59e0b; }
  .star-empty { color: #d1d5db; }
}

/* ── Components ─────────────────────────────────────────────── */
@layer components {
  /* Buttons */
  .btn-primary {
    @apply bg-orange-500 hover:bg-orange-600 active:bg-orange-700 text-white font-semibold
           px-6 py-3 rounded transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed
           inline-flex items-center justify-center gap-2 text-sm;
  }
  .btn-secondary {
    @apply border border-orange-500 text-orange-500 hover:bg-orange-50 font-semibold
           px-6 py-3 rounded transition-colors duration-150
           inline-flex items-center justify-center gap-2 text-sm;
  }
  .btn-ghost {
    @apply text-gray-600 hover:bg-gray-100 px-4 py-2 rounded transition-colors duration-150
           inline-flex items-center justify-center gap-2 text-sm;
  }
  .btn-danger {
    @apply bg-red-500 hover:bg-red-600 text-white font-semibold
           px-6 py-3 rounded transition-colors duration-150
           inline-flex items-center justify-center gap-2 text-sm;
  }

  /* Inputs */
  .input {
    @apply w-full border border-gray-300 rounded px-3 py-2.5 text-sm text-gray-900
           placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent
           transition-colors duration-150 bg-white;
  }
  .input-error { @apply border-red-500 focus:ring-red-400; }
  .label { @apply block text-sm font-medium text-gray-700 mb-1; }
  .error-msg { @apply text-red-500 text-xs mt-1; }

  /* Cards */
  .card { @apply bg-white rounded-lg shadow-sm; }
  .card-padded { @apply card p-4; }

  /* Section headings */
  .section-title {
    @apply text-lg font-bold text-gray-900 flex items-center gap-2;
  }
  .section-title::after {
    content: '';
    @apply flex-1 border-t border-gray-200;
  }

  /* Navigation tab (bottom mobile) */
  .nav-tab {
    @apply flex flex-col items-center gap-0.5 py-2 px-3 text-gray-500 hover:text-orange-500
           transition-colors duration-150 relative flex-1;
  }
  .nav-tab.active { @apply text-orange-500; }
  .nav-tab svg { @apply w-5 h-5; }
  .nav-tab span { @apply text-xs leading-none; }

  /* Category chip */
  .category-chip {
    @apply flex flex-col items-center gap-1 min-w-[72px] cursor-pointer;
  }
  .category-chip .chip-icon {
    @apply w-14 h-14 rounded-full bg-orange-50 flex items-center justify-center
           border-2 border-transparent hover:border-orange-400 transition-colors duration-150;
  }
  .category-chip span { @apply text-xs text-gray-700 text-center font-medium; }

  /* Flash sale badge */
  .flash-badge {
    @apply absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded z-10;
  }

  /* Rating stars row */
  .stars { @apply flex items-center gap-0.5 text-yellow-400; }

  /* Order status badge */
  .status-pending    { @apply badge bg-yellow-100 text-yellow-700; }
  .status-confirmed  { @apply badge bg-blue-100 text-blue-700; }
  .status-processing { @apply badge bg-purple-100 text-purple-700; }
  .status-shipped    { @apply badge bg-cyan-100 text-cyan-700; }
  .status-delivered  { @apply badge bg-green-100 text-green-700; }
  .status-completed  { @apply badge bg-green-200 text-green-800; }
  .status-cancelled  { @apply badge bg-red-100 text-red-600; }

  /* Quantity selector */
  .qty-btn {
    @apply w-8 h-8 flex items-center justify-center border border-gray-300 rounded
           hover:bg-gray-50 active:bg-gray-100 transition-colors text-gray-600 font-bold;
  }

  /* Progress steps */
  .step-active   { @apply bg-orange-500 text-white; }
  .step-done     { @apply bg-green-500 text-white; }
  .step-inactive { @apply bg-gray-200 text-gray-500; }
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.animate-fade-in-up { animation: fadeInUp 0.3s ease-out forwards; }
.animate-fade-in    { animation: fadeIn 0.2s ease-out forwards; }
.animate-slide-in-right { animation: slideInRight 0.25s ease-out forwards; }
.animate-slide-down { animation: slideDown 0.2s ease-out forwards; }
.animate-spin-slow  { animation: spin-slow 2s linear infinite; }

/* Staggered children */
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 250ms; }

/* ── Drawer / Modal ──────────────────────────────────────────── */
.drawer-overlay { @apply fixed inset-0 bg-black/50 z-[100] backdrop-blur-sm; }
.drawer {
  @apply fixed bottom-0 left-0 right-0 z-[101] bg-white rounded-t-2xl
         max-h-[90vh] overflow-y-auto;
}
.modal-overlay { @apply fixed inset-0 bg-black/50 z-[100] flex items-center justify-center p-4; }
.modal { @apply bg-white rounded-xl shadow-xl w-full max-w-md animate-fade-in; }

/* ── Horizontal scroll snap (category/promo strips) ─────────── */
.snap-x-strip {
  @apply flex gap-3 overflow-x-auto scrollbar-hide pb-2;
  scroll-snap-type: x mandatory;
}
.snap-x-strip > * { scroll-snap-align: start; }

/* ── Hero banner slider ─────────────────────────────────────── */
.banner-slider { @apply relative overflow-hidden rounded-xl; }
.banner-slide  { @apply min-w-full transition-transform duration-500 ease-in-out; }

/* ── Seller dashboard specific ───────────────────────────────── */
.stat-card {
  @apply card-padded flex flex-col gap-1;
}
.stat-value { @apply text-2xl font-bold text-gray-900; }
.stat-label { @apply text-sm text-gray-500; }
.stat-change-up   { @apply text-xs text-green-600 flex items-center gap-0.5; }
.stat-change-down { @apply text-xs text-red-500 flex items-center gap-0.5; }