/* Custom styles — minimal since Tailwind handles most styling */

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

/* Prevent iOS zoom on input focus (font-size >= 16px handles this via Tailwind) */
input[type="tel"],
input[type="text"] {
  font-size: 16px;
}

/* Spinner animation is handled by Tailwind's animate-spin */

/* Subtle entrance animation for auth card */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main > div {
  animation: fadeSlideUp 0.4s ease-out;
}

/* Pulse effect on info cards */
section .grid > div {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

section .grid > div:hover {
  transform: translateY(-2px);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Focus ring styling consistent with the theme */
input:focus {
  box-shadow: 0 0 0 3px rgb(var(--color-primary-500) / 0.2);
}

/* Touch target sizing — ensure minimum 44px for all interactive elements */
button,
a,
input {
  min-height: 44px;
}

/* OTP input letter spacing for readability */
#otp-input {
  letter-spacing: 0.3em;
}