/* Custom styles to complement Tailwind */

/* Filter buttons */
.filter-btn {
    @apply px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-600 rounded-lg transition-all duration-200;
}

.filter-btn:hover {
    @apply text-gray-900 dark:text-white border-gray-400 dark:border-gray-500;
}

.filter-btn.active {
    @apply text-white dark:text-black bg-black dark:bg-white border-black dark:border-white;
}

/* Product cards */
.product-card {
    @apply bg-white dark:bg-black border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transition-all duration-300 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-lg;
}

.product-card:hover .product-image {
    @apply scale-105;
}

.product-image {
    @apply transition-transform duration-300;
}

/* Price styling */
.price {
    @apply text-lg font-bold text-black dark:text-white;
}

.price-original {
    @apply text-sm text-gray-500 line-through;
}

/* Cart animations */
.cart-item {
    @apply border-b border-gray-200 dark:border-gray-700 last:border-b-0 py-4 transition-all duration-200;
}

.cart-item.removing {
    @apply opacity-0 transform translate-x-full;
}

/* Custom scrollbar */
#cart-items::-webkit-scrollbar {
    width: 6px;
}

#cart-items::-webkit-scrollbar-track {
    @apply bg-gray-200 dark:bg-gray-700;
}

#cart-items::-webkit-scrollbar-thumb {
    @apply bg-black dark:bg-white rounded-full;
}

/* Button hover effects */
.btn-primary {
    @apply bg-black hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-200 text-white dark:text-black font-semibold py-2 px-4 rounded-lg transition-all duration-200 border border-black dark:border-white hover:border-gray-800 dark:hover:border-gray-200;
}

.btn-secondary {
    @apply bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-900 dark:text-white font-semibold py-2 px-4 border border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 rounded-lg transition-all duration-200;
}

/* Size selector */
.size-option {
    @apply px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:border-gray-400 dark:hover:border-gray-500 rounded transition-all duration-200 cursor-pointer;
}

.size-option.selected {
    @apply text-white dark:text-black bg-black dark:bg-white border-black dark:border-white;
}

.size-option.unavailable {
    @apply opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-600 hover:text-gray-400 dark:hover:text-gray-600 hover:border-gray-300 dark:hover:border-gray-600;
}

/* Quantity controls */
.quantity-btn {
    @apply w-8 h-8 flex items-center justify-center text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:border-gray-400 dark:hover:border-gray-500 rounded transition-all duration-200;
}

.quantity-input {
    @apply w-16 h-8 text-center bg-white dark:bg-gray-700 border-t border-b border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white text-sm;
}

/* Loading states */
.loading-skeleton {
    @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
}

/* Modal backdrop */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50;
}

.modal-content {
    @apply bg-white dark:bg-black max-w-md w-full mx-4 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl;
}

/* Product badges */
.badge-new {
    @apply absolute top-2 left-2 bg-green-600 text-white text-xs font-semibold px-2 py-1 rounded z-10;
}

.badge-sale {
    @apply absolute top-2 left-2 bg-red-600 text-white text-xs font-semibold px-2 py-1 rounded z-10;
}

/* Mobile menu styles */
@media (max-width: 768px) {
    .mobile-menu {
        @apply absolute top-16 left-0 right-0 bg-white dark:bg-black border-b border-gray-200 dark:border-gray-700 shadow-xl;
    }
    
    .mobile-menu a {
        @apply block px-4 py-3 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Focus states for accessibility */
button:focus,
input:focus,
select:focus {
    @apply outline-none ring-2 ring-black dark:ring-white ring-opacity-50;
}

/* Typography improvements */
.mono-caps {
    @apply font-mono tracking-wider uppercase;
}

/* Grid improvements */
.products-grid-loading {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8;
}

.product-skeleton {
    @apply space-y-4;
}

/* Cart sidebar improvements */
.cart-open {
    @apply transform translate-x-0;
}

.overlay-visible {
    @apply opacity-100 visible;
}

/* Empty state styling */
.empty-state {
    @apply text-center py-12;
}

.empty-state svg {
    @apply w-16 h-16 text-gray-400 mx-auto mb-4;
}

.empty-state h3 {
    @apply text-lg font-semibold text-gray-900 dark:text-white mb-2;
}

.empty-state p {
    @apply text-gray-600 dark:text-gray-400;
}

/* Responsive improvements */
@media (max-width: 640px) {
    .hero-text {
        @apply text-3xl;
    }
    
    .cart-sidebar {
        @apply w-full;
    }
}

/* Theme transition */
* {
    @apply transition-colors duration-200;
}