/*
Theme Name: InstaDownload
Description: A modern Instagram downloader WordPress theme with beautiful gradients and responsive design
Version: 1.0
Author: Your Name
*/

/* Import Tailwind CSS */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Custom CSS for WordPress theme */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* WordPress specific styles */
.wp-block-group {
  margin: 0;
}

.alignwide {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Custom gradient backgrounds */
.gradient-purple-pink {
  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
}

.gradient-purple-pink-orange {
  background: linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #F97316 100%);
}

/* Loading animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Hover effects */
.hover-scale:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease-in-out;
}

/* Form styles */
.form-input {
  @apply px-6 py-4 rounded-xl text-gray-900 text-lg placeholder-gray-500 border-0 focus:ring-4 focus:ring-white/20 focus:outline-none;
}

.btn-primary {
  @apply px-8 py-4 bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-600 hover:to-red-600 text-white font-semibold rounded-xl transition-all duration-200 transform hover:scale-105 focus:ring-4 focus:ring-white/20 focus:outline-none;
}

.btn-secondary {
  @apply bg-white text-purple-600 border border-purple-600 px-6 py-2 rounded-lg font-medium hover:bg-purple-50 transition-colors;
}

/* Card styles */
.card {
  @apply bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-200;
}

/* Navigation styles */
.nav-link {
  @apply px-3 py-2 rounded-md text-sm font-medium transition-colors;
}

.nav-link.active {
  @apply text-purple-600 bg-purple-50;
}

.nav-link:not(.active) {
  @apply text-gray-700 hover:text-purple-600 hover:bg-gray-50;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .mobile-menu {
    display: block;
  }
  
  .desktop-menu {
    display: none;
  }
}

@media (min-width: 769px) {
  .mobile-menu {
    display: none;
  }
  
  .desktop-menu {
    display: block;
  }
}