/* Main app styles - matches original Next.js design */

/* Card styling to match original */
.card {
  @apply bg-white rounded-xl border border-gray-200 shadow-sm transition-shadow duration-200;
}

.card:hover {
  @apply shadow-md;
}

/* Button styling to match original */
.btn {
  @apply inline-flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium shadow disabled:opacity-50 disabled:cursor-not-allowed;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* Input styling with animated blue glow */
.input {
  @apply rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2;
  transition: box-shadow .2s ease;
  box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.5);
}
.input:focus {
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.35);
}

/* Badge styling for potential use */
.badge {
  @apply inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-700;
}

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

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

/* Line clamp utility for older browsers */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prose styling for newsletter content */
.prose {
  max-width: 65ch;
}

.prose-sm {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Ensure the app fills the viewport */
#root {
  min-height: 100vh;
}