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

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

.bounce-1 {
  animation: bounce 1s infinite;
}

.bounce-2 {
  animation: bounce 1s infinite;
  animation-delay: 0.3s;
}

.bounce-3 {
  animation: bounce 1s infinite;
  animation-delay: 0.6s;
}

@media (max-width: 767px) {
  .faq-page {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .faq-page {
    grid-template-columns: 1fr;
  }
}

@keyframes ring {
  0% {
    transform: rotate(-10deg);
  }
  20% {
    transform: rotate(10deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.animate-ring {
  animation: ring 1s ease-in-out infinite;
  transform-origin: 50% 0;
}

.zip-input-container {
  position: relative;
}

.zip-error {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fee2e2;
  color: #dc2626;
  padding: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  z-index: 10;
  display: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.zip-error.show {
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}