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

/* Custom components for SoleInsider - Dark Theme */
@layer components {
  .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }
  
  .btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
  }
  
  .btn-outline {
    @apply border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-semibold py-2 px-4 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }
  
  .card {
    @apply bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden border border-gray-700;
  }
  
  .card-hover {
    @apply transform hover:scale-105 transition-transform duration-200;
  }
  
  .input-field {
    @apply w-full px-4 py-3 border border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200 bg-gray-700 text-white;
  }
  
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .badge-primary {
    @apply bg-blue-500 text-white;
  }
  
  .badge-secondary {
    @apply bg-gray-500 text-white;
  }
  
  .badge-success {
    @apply bg-green-500 text-white;
  }
  
  .badge-warning {
    @apply bg-yellow-500 text-white;
  }
  
  .badge-danger {
    @apply bg-red-500 text-white;
  }
  
  .sneaker-card {
    @apply bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700 transition-all duration-200 border border-gray-700 hover:border-gray-600;
  }
  
  .sneaker-image {
    @apply w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300;
  }
  
  .gradient-bg {
    @apply bg-gradient-to-br from-gray-900 to-gray-800;
  }
  
  .text-gradient {
    @apply bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent;
  }
  
  .nav-link {
    @apply text-gray-300 hover:text-white font-medium transition-colors duration-200 relative;
  }
  
  .nav-link::after {
    @apply content-[''] absolute bottom-0 left-0 w-0 h-0.5 bg-blue-500 transition-all duration-200;
  }
  
  .nav-link:hover::after {
    @apply w-full;
  }
  
  .search-input {
    @apply w-full px-4 py-3 pl-12 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-gray-800 text-white placeholder-gray-400;
  }
  
  .sidebar-widget {
    @apply bg-gray-800 rounded-lg p-6 mb-6 border border-gray-700;
  }
  
  .news-item {
    @apply border-b border-gray-700 py-3 last:border-b-0;
  }
  
  .news-item a {
    @apply text-white hover:text-blue-400 transition-colors duration-200 font-medium;
  }
  
  .ad-container {
    @apply bg-gray-800 rounded-lg p-4 text-center border border-gray-700;
  }
  
  .brand-logo {
    @apply w-full h-20 object-contain hover:scale-105 transition-transform duration-200;
  }
  
  /* Dark theme specific components */
  .filter-panel {
    @apply bg-gray-800 rounded-lg p-6 border border-gray-700;
  }
  
  .filter-section {
    @apply mb-6;
  }
  
  .filter-title {
    @apply text-sm font-medium text-gray-300 mb-3;
  }
  
  .filter-link {
    @apply block text-gray-400 hover:text-white transition-colors duration-200 text-sm py-1;
  }
  
  .sneaker-card-dark {
    @apply bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700 transition-all duration-200 border border-gray-700 hover:border-gray-600;
  }
  
  .status-badge {
    @apply absolute top-3 left-3 px-2 py-1 rounded-full text-xs font-medium;
  }
  
  .status-badge-today {
    @apply bg-green-500 text-white;
  }
  
  .status-badge-upcoming {
    @apply bg-blue-500 text-white;
  }
  
  .heart-button {
    @apply absolute top-3 right-3 w-8 h-8 bg-gray-800 bg-opacity-80 rounded-full flex items-center justify-center hover:bg-opacity-100 transition-all duration-200;
  }
  
  .pagination-button {
    @apply px-3 py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200;
  }
  
  .pagination-button-active {
    @apply bg-blue-600 text-white;
  }

  /* Premium sneaker detail page components */
  .hero-image-container {
    @apply relative group overflow-hidden rounded-2xl bg-gray-800 shadow-2xl;
  }

  .thumbnail-carousel {
    @apply flex space-x-3 overflow-x-auto pb-2;
  }

  .thumbnail-item {
    @apply flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden bg-gray-800 border-2 border-gray-700 hover:border-gray-600 cursor-pointer transition-colors duration-200;
  }

  .thumbnail-item.active {
    @apply border-blue-500;
  }

  .market-data-card {
    @apply bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-gray-600 transition-colors duration-200;
  }

  .trending-item {
    @apply group cursor-pointer;
  }

  .trending-card {
    @apply flex items-center space-x-4 p-4 bg-gray-700 rounded-xl hover:bg-gray-600 transition-all duration-300 hover:shadow-lg hover:scale-105;
  }

  .brand-card {
    @apply group flex flex-col items-center p-4 bg-gray-700 hover:bg-gray-600 rounded-xl transition-all duration-300 hover:shadow-lg hover:scale-105;
  }

  .brand-icon {
    @apply w-12 h-12 bg-gray-600 rounded-full flex items-center justify-center mb-3 group-hover:bg-blue-500 transition-colors duration-200;
  }

  .prose-invert {
    @apply text-gray-300;
  }

  .prose-invert h1,
  .prose-invert h2,
  .prose-invert h3,
  .prose-invert h4,
  .prose-invert h5,
  .prose-invert h6 {
    @apply text-white;
  }

  .prose-invert strong {
    @apply text-blue-400 font-semibold;
  }

  .prose-invert a {
    @apply text-blue-400 hover:text-blue-300;
  }
}

/* Custom utilities */
@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .backdrop-blur-xs {
    backdrop-filter: blur(2px);
  }
}

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

.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Responsive grid improvements */
@media (max-width: 640px) {
  .sneaker-grid {
    @apply grid-cols-1 gap-4;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .sneaker-grid {
    @apply grid-cols-2 gap-6;
  }
}

@media (min-width: 1025px) {
  .sneaker-grid {
    @apply grid-cols-3 gap-8;
  }
}

/* Pagination Styles - Dark Theme */
.custom-pagination {
  @apply flex items-center justify-center space-x-2;
}

.custom-pagination ul {
  @apply flex items-center justify-center space-x-2 list-none p-0 m-0;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.custom-pagination li {
  @apply list-none;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.custom-pagination a,
.custom-pagination span {
  @apply px-3 py-2 text-sm font-medium text-gray-400 bg-gray-800 border border-gray-700 rounded-lg hover:bg-gray-700 hover:text-white transition-colors duration-200;
  display: inline-block !important;
  text-decoration: none !important;
  margin: 0 2px !important;
}

.custom-pagination .current {
  @apply bg-blue-600 text-white border-blue-600;
}

.custom-pagination .disabled {
  @apply opacity-50 cursor-not-allowed hover:bg-gray-800 hover:text-gray-400;
}

/* Force horizontal layout for all pagination elements */
.custom-pagination * {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Additional pagination fixes */
.custom-pagination ul li {
  float: none !important;
  display: inline-block !important;
}

.custom-pagination ul li a,
.custom-pagination ul li span {
  float: none !important;
  display: inline-block !important;
}

/* Override any potential vertical stacking */
.custom-pagination ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

.custom-pagination ul li {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Additional pagination fixes for Laravel pagination */
.custom-pagination .pagination {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.custom-pagination .pagination li {
  display: inline-block !important;
  margin: 0 2px !important;
  padding: 0 !important;
}

.custom-pagination .pagination li a,
.custom-pagination .pagination li span {
  display: inline-block !important;
  text-decoration: none !important;
}

/* Loading States */
.btn-primary.loading,
.btn-secondary.loading,
.btn-outline.loading {
  @apply relative overflow-hidden;
}

.btn-primary.loading::after,
.btn-secondary.loading::after,
.btn-outline.loading::after {
  content: '';
  @apply absolute inset-0 bg-white bg-opacity-20 animate-pulse;
}

/* Line Clamp Utilities */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

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

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

/* Custom Scrollbar - Dark Theme */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}

/* Focus States */
.focus\:ring-primary:focus {
  @apply ring-2 ring-primary-500 ring-offset-2;
}

/* Hover Effects */
.hover\:scale-105:hover {
  transform: scale(1.05);
}

.hover\:scale-110:hover {
  transform: scale(1.1);
}

/* Animation Classes */
.animate-fade-in {
  animation: fadeIn 0.6s ease-in-out;
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out;
}

/* Mobile Menu Animations */
.mobile-menu-enter {
  transform: translateX(100%);
}

.mobile-menu-enter-active {
  transform: translateX(0);
  transition: transform 300ms ease-in-out;
}

.mobile-menu-exit {
  transform: translateX(0);
}

.mobile-menu-exit-active {
  transform: translateX(100%);
  transition: transform 300ms ease-in-out;
}