/* Custom Styles for PixelForge Pro */

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

/* Edit Tool Button Styles */
.edit-tool-btn {
    @apply flex flex-col items-center justify-center p-4 rounded-xl border-2 border-gray-200 bg-white hover:border-primary hover:bg-red-50 transition duration-300;
}

.edit-tool-btn.active {
    @apply border-primary bg-red-50 text-primary;
}

.edit-tool-btn i {
    @apply w-8 h-8 mb-2;
}

.edit-tool-btn span {
    @apply text-sm font-medium;
}

/* Custom Range Slider */
.range-slider {
    @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer;
}

.range-slider::-webkit-slider-thumb {
    @apply appearance-none w-6 h-6 bg-primary rounded-full cursor-pointer;
}

.range-slider::-moz-range-thumb {
    @apply w-6 h-6 bg-primary rounded-full cursor-pointer border-0;
}

/* Filter Preview Grid */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}

.filter-item {
    @apply relative overflow-hidden rounded-lg cursor-pointer transition duration-300 hover:scale-105;
}

.filter-item.active {
    @apply ring-2 ring-primary ring-offset-2;
}

.filter-item img {
    @apply w-full h-24 object-cover;
}

.filter-item span {
    @apply absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white text-xs py-1 text-center;
}

/* Loading Animation */
.loading-spinner {
    @apply w-8 h-8 border-4 border-gray-200 border-t-primary rounded-full animate-spin;
}

/* Image Preview Animation */
.preview-enter {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Tooltip */
.tooltip {
    @apply invisible absolute;
}

.has-tooltip:hover .tooltip {
    @apply visible z-50;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .edit-tool-btn {
        @apply p-3;
    }
    
    .edit-tool-btn i {
        @apply w-6 h-6 mb-1;
    }
    
    .edit-tool-btn span {
        @apply text-xs;
    }
}

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

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

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

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