@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

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

@layer base {
  html { scroll-behavior: smooth; }
  body { font-family: "Inter", sans-serif; color: #0F172A; background: #F8FAFC; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; height: auto; }
}

@layer components {
  .nav-link {
    @apply text-sm font-medium text-gray-600 hover:text-[#2563EB] transition-colors relative;
  }
  .nav-link::after {
    content: "";
    @apply absolute left-0 bottom-0 w-0 h-0.5 bg-[#2563EB] transition-all duration-300;
  }
  .nav-link:hover::after { @apply w-full; }
  .btn-primary {
    @apply bg-[#2563EB] text-white px-6 py-2.5 rounded-lg font-medium hover:bg-blue-700 transition-all duration-200 active:scale-95;
  }
  .btn-outline {
    @apply border-2 border-[#2563EB] text-[#2563EB] px-6 py-2.5 rounded-lg font-medium hover:bg-[#2563EB] hover:text-white transition-all duration-200 active:scale-95;
  }
  .section-title {
    @apply text-2xl md:text-3xl font-bold text-[#0F172A] mb-2;
  }
  .section-subtitle {
    @apply text-gray-500 mb-8;
  }
  .product-card {
    @apply bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-lg transition-all duration-300 group;
  }
  .product-card .product-image {
    @apply aspect-square overflow-hidden;
  }
  .product-card .product-image img {
    @apply w-full h-full object-cover transition-transform duration-500 group-hover:scale-110;
  }
  .product-card .product-actions {
    @apply flex gap-2 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300;
  }
  .product-card .action-btn {
    @apply w-9 h-9 rounded-full bg-white shadow-md flex items-center justify-center text-gray-600 hover:text-[#2563EB] hover:shadow-lg transition-all duration-200;
  }
  .badge {
    @apply absolute top-3 left-3 px-2 py-0.5 text-xs font-semibold rounded;
  }
  .wishlist-btn {
    @apply absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-gray-400 hover:text-red-500 hover:bg-white transition-all duration-200;
  }
  .wishlist-btn.active { @apply text-red-500; }
  .input-field {
    @apply w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#2563EB] focus:border-transparent transition-all;
  }
  .empty-state {
    @apply flex flex-col items-center justify-center py-16 text-center;
  }
  .empty-state svg { @apply w-16 h-16 text-gray-300 mb-4; }
  .empty-state h3 { @apply text-lg font-semibold text-gray-600 mb-1; }
  .empty-state p { @apply text-gray-400 text-sm mb-4; }
}

@layer utilities {
  .animate-slide-up { animation: slideUp 0.3s ease-out; }
  .animate-fade-in { animation: fadeIn 0.4s ease-out; }
  .animate-bounce-in { animation: bounceIn 0.5s ease-out; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.9); }
  60% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #F1F5F9; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: #E2E8F0;
  border-radius: 3px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #2563EB;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Mobile drawer */
#mobile-drawer {
  transition: transform 0.3s ease;
}
#mobile-drawer.translate-x-full {
  transform: translateX(100%);
}

/* Product image zoom */
.product-zoom {
  overflow: hidden;
  cursor: zoom-in;
}
.product-zoom img {
  transition: transform 0.4s ease;
}
.product-zoom:hover img {
  transform: scale(1.5);
}

/* Star rating */
.stars { display: inline-flex; gap: 1px; }

/* Coupon input */
.coupon-input {
  @apply flex gap-2;
}
.coupon-input input {
  @apply flex-1;
}

/* Accordion */
.accordion-item {
  border-bottom: 1px solid #E2E8F0;
}
.accordion-item:last-child {
  border-bottom: none;
}
.accordion-trigger {
  @apply w-full flex items-center justify-between py-4 text-left font-medium text-[#0F172A] hover:text-[#2563EB] transition-colors;
}
.accordion-trigger svg {
  @apply w-5 h-5 text-gray-400 transition-transform duration-300;
}
.accordion-trigger.active svg {
  transform: rotate(180deg);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-content.open {
  max-height: 500px;
}
.accordion-content p {
  @apply pb-4 text-gray-500 text-sm leading-relaxed;
}

/* Status badges */
.status-badge {
  @apply inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium;
}
.status-pending { @apply bg-yellow-100 text-yellow-700; }
.status-processing { @apply bg-blue-100 text-blue-700; }
.status-shipped { @apply bg-purple-100 text-purple-700; }
.status-delivered { @apply bg-green-100 text-green-700; }
.status-cancelled { @apply bg-red-100 text-red-700; }

/* Progress bar */
.progress-bar {
  @apply w-full bg-gray-200 rounded-full h-2 overflow-hidden;
}
.progress-bar-fill {
  @apply h-full rounded-full transition-all duration-500;
}

/* Modal */
.modal-overlay {
  @apply fixed inset-0 bg-black/50 z-[9998] flex items-center justify-center p-4;
}
.modal-content {
  @apply bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto;
}

/* Image fallback */
img[onerror] {
  object-fit: cover;
}