/**
 * Wisetechy Solutions Landing Pages
 * Custom styles and animations
 */

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

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

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

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
}

.pulse-emergency {
  animation: pulse-glow 2s infinite;
}

/* Form styles */
.form-input {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all;
}

.form-select {
  @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all bg-white;
}

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

/* Button styles */
.btn-primary {
  @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-lg shadow-lg transform transition-all hover:scale-105 active:scale-95;
}

.btn-emergency {
  @apply bg-red-600 hover:bg-red-700 text-white font-bold py-4 px-8 rounded-lg shadow-lg transform transition-all hover:scale-105 active:scale-95;
}

.btn-secondary {
  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-3 px-6 rounded-lg transition-all;
}

/* Trust badge styles */
.trust-badge {
  @apply inline-flex items-center px-4 py-2 bg-white rounded-lg shadow-sm border border-gray-200;
}

/* Loading spinner */
.loading-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Success/Error messages */
.alert-success {
  @apply bg-green-50 border-l-4 border-green-500 p-4 rounded;
}

.alert-error {
  @apply bg-red-50 border-l-4 border-red-500 p-4 rounded;
}

.alert-warning {
  @apply bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded;
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .btn-primary, .btn-emergency {
    @apply py-3 px-6 text-sm;
  }

  .form-input, .form-select {
    @apply py-2 px-3 text-sm;
  }
}

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

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

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

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

/* Hero gradient */
.hero-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-gradient-emergency {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}

.hero-gradient-service {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.hero-gradient-campaign {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
}