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

@layer base {
  :root {
    --background: 0 0% 98%;
    --foreground: 20 10% 15%;
    --card: 0 0% 100%;
    --card-foreground: 20 10% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 20 10% 15%;
    --primary: 24 95% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 24 30% 95%;
    --secondary-foreground: 24 60% 30%;
    --muted: 0 0% 94%;
    --muted-foreground: 0 0% 50%;
    --accent: 24 95% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 88%;
    --input: 0 0% 88%;
    --ring: 24 95% 50%;
    --radius: 0.75rem;
  }

  body {
    background-color: hsl(0 0% 98%);
    color: hsl(20 10% 15%);
    font-family: 'Cairo', sans-serif;
    direction: rtl;
  }

  html {
    scroll-behavior: smooth;
  }
}

@layer components {
  .btn-primary {
    @apply bg-orange-500 hover:bg-orange-600 text-white font-semibold px-6 py-3 rounded-xl transition-all duration-200 active:scale-95 shadow-md hover:shadow-lg;
  }
  .btn-secondary {
    @apply bg-white hover:bg-orange-50 text-orange-500 border border-orange-200 font-semibold px-6 py-3 rounded-xl transition-all duration-200;
  }
  .card-product {
    @apply bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100 hover:-translate-y-1;
  }
  .badge-discount {
    @apply bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full;
  }
  .section-title {
    @apply text-2xl md:text-3xl font-bold text-gray-800;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #f97316;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ea6a0a;
}

/* Smooth animations */
@keyframes slideInRight {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-slide-in {
  animation: slideInRight 0.3s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out;
}

/* Cart drawer animation */
.cart-drawer {
  transition: transform 0.3s ease-in-out;
}

/* Product image zoom */
.product-img-wrapper:hover img {
  transform: scale(1.05);
  transition: transform 0.4s ease;
}

.product-img-wrapper img {
  transition: transform 0.4s ease;
}
