/* DP Creator Custom Styles */

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

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* Custom button styles */
.btn-primary {
    @apply bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200 font-semibold;
}

.btn-secondary {
    @apply bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition-colors duration-200 font-semibold;
}

.btn-danger {
    @apply bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition-colors duration-200 font-semibold;
}

.btn-success {
    @apply bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700 transition-colors duration-200 font-semibold;
}

/* Card styles */
.card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden;
}

.card-header {
    @apply px-6 py-4 border-b bg-gray-50;
}

.card-body {
    @apply p-6;
}

/* Form styles */
.form-group {
    @apply mb-4;
}

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

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-vertical;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

/* Alert styles */
.alert {
    @apply px-4 py-3 rounded mb-6;
}

.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

.alert-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700;
}

.alert-warning {
    @apply bg-yellow-100 border border-yellow-400 text-yellow-700;
}

/* Loading spinner */
.spinner {
    @apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
}

/* Image preview */
.image-preview {
    @apply max-w-full h-auto rounded-lg shadow-md;
}

/* Responsive grid */
.grid-responsive {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

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

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded hover:bg-gray-500;
}

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

.hover-scale {
    @apply transition-transform duration-200 hover:scale-105;
}

/* Text utilities */
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .container {
        @apply px-4;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success {
        @apply w-full;
    }
}