/* ===================================
   Custom Styles for Tailwind Integration
   =================================== */

/* Tab switching animations */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Modal animations */
.modal.active {
    display: flex !important;
}

.modal.active .modal-content {
    animation: slideUp 0.3s ease forwards;
}

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

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

/* Image preview show class */
.image-preview.show {
    display: block !important;
}

/* Drag over state for image upload */
.image-upload-area.dragover,
#imageUploadArea.dragover {
    border-color: #2563eb !important;
    background-color: rgba(37, 99, 235, 0.1) !important;
}

/* Product card selected state - keep for JavaScript */
.product-card.selected {
    border-color: #10b981 !important;
    background-color: rgba(16, 185, 129, 0.05) !important;
}

/* Preserve CSS variables for compatibility */
:root {
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --secondary: #8b5cf6;
    --success: #10b981;
    --danger: #ef4444;
}