/* Custom CSS for StyleSwap - Pinterest-inspired clothing marketplace */

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

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #ec4899;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #db2777;
}

/* Filter buttons styling */
.filter-btn {
    @apply px-6 py-2 rounded-full border-2 border-gray-300 text-gray-700 font-medium transition-all duration-300 hover:border-rose-500 hover:text-rose-600;
}

.filter-btn.active {
    @apply bg-rose-600 text-white border-rose-600;
}

/* Product card styling */
.product-card {
    @apply bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2;
}

.product-image {
    @apply w-full h-80 object-cover transition-transform duration-300;
}

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

.product-info {
    @apply p-6;
}

.product-title {
    @apply text-lg font-semibold text-gray-900 mb-2;
}

.product-description {
    @apply text-gray-600 text-sm mb-3 line-clamp-2;
}

.product-price {
    @apply text-xl font-bold text-rose-600 mb-4;
}

.product-meta {
    @apply flex justify-between items-center text-sm text-gray-500;
}

/* Pinterest-style masonry layout */
.masonry-grid {
    column-count: 4;
    column-gap: 1.5rem;
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
    .masonry-grid {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .masonry-grid {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .masonry-grid {
        column-count: 1;
    }
}

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

.loading-text {
    @apply animate-pulse bg-gray-200 h-4 rounded;
}

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

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

/* Hover effects for interactive elements */
.hover-lift {
    @apply transition-transform duration-300 hover:-translate-y-1;
}

.hover-glow {
    @apply transition-shadow duration-300 hover:shadow-lg;
}

/* Custom button styles */
.btn-primary {
    @apply bg-rose-600 text-white px-6 py-3 rounded-full font-semibold transition-all duration-300 hover:bg-rose-700 hover:shadow-lg;
}

.btn-secondary {
    @apply border-2 border-rose-600 text-rose-600 px-6 py-3 rounded-full font-semibold transition-all duration-300 hover:bg-rose-600 hover:text-white;
}

.btn-outline {
    @apply border border-gray-300 text-gray-700 px-6 py-3 rounded-full font-medium transition-all duration-300 hover:border-rose-500 hover:text-rose-600;
}

/* Search bar styling */
.search-bar {
    @apply relative;
}

.search-bar input {
    @apply w-full px-4 py-2 pl-10 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent;
}

.search-bar .search-icon {
    @apply absolute left-3 top-3 text-gray-400;
}

/* Navigation styling */
.nav-link {
    @apply text-gray-700 hover:text-rose-600 transition-colors duration-300 font-medium;
}

.nav-link.active {
    @apply text-rose-600;
}

/* Hero section enhancements */
.hero-gradient {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #f3e8ff 100%);
}

/* Product grid enhancements */
.product-grid {
    @apply grid gap-8;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    
    .hero-title {
        @apply text-3xl;
    }
    
    .hero-subtitle {
        @apply text-lg;
    }
}

/* Image overlay effects */
.image-overlay {
    @apply absolute inset-0 bg-black bg-opacity-0 transition-all duration-300;
}

.product-card:hover .image-overlay {
    @apply bg-opacity-20;
}

/* Badge styling */
.badge {
    @apply absolute top-3 right-3 bg-white text-gray-800 px-3 py-1 rounded-full text-xs font-semibold shadow-md;
}

.badge.sale {
    @apply bg-red-500 text-white;
}

.badge.new {
    @apply bg-green-500 text-white;
}

.badge.featured {
    @apply bg-rose-500 text-white;
}

/* Modal styling */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
}

.modal-content {
    @apply bg-white rounded-2xl max-w-2xl w-full max-h-90vh overflow-y-auto;
}

/* Form styling */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-rose-500 focus:border-transparent;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
}

/* Utility classes */
.text-gradient {
    background: linear-gradient(135deg, #ec4899, #be185d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.shadow-rose {
    box-shadow: 0 10px 25px -5px rgba(236, 72, 153, 0.1), 0 10px 10px -5px rgba(236, 72, 153, 0.04);
}

.border-gradient {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #ec4899, #be185d) border-box;
}

/* Animation classes */
.bounce-in {
    animation: bounceIn 0.6s ease-out;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

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

/* Pinterest-style pin effect */
.pin-effect {
    @apply transition-all duration-300;
}

.pin-effect:hover {
    @apply transform scale-105 shadow-2xl;
}

/* Custom focus styles */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2;
}

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

.skeleton-text {
    @apply h-4 bg-gray-200 rounded animate-pulse;
}

.skeleton-title {
    @apply h-6 bg-gray-200 rounded animate-pulse;
}

.skeleton-image {
    @apply h-80 bg-gray-200 rounded animate-pulse;
}