@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --accent: #f8fafc;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
  background-color: #f1f5f9;
  color: #1e293b;
}

.main-gradient {
  background:
    radial-gradient(circle at top right, #dbeafe, transparent),
    radial-gradient(circle at bottom left, #f1f5f9, transparent);
}

.glass-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.05),
    0 8px 10px -6px rgb(0 0 0 / 0.05);
}

.input-focus {
  transition: all 0.2s ease-in-out;
}

.input-focus:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 158, 0.1);
}

.spinner-ring {
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 4px solid #e2e8f0;
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.step-number {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* Custom transition for sections */
.section-transition {
  transition:
    opacity 0.4s ease-out,
    transform 0.4s ease-out;
}