/* ==========================================
   AI LEAD ENGINE – NeoLiv Khopoli (FINAL v2)
   Premium • Stable • Conversion-Focused
   ========================================== */

/* Scope safety */
#ai-engine {
  max-width: 560px;
  margin: 0 auto;
}

#ai-engine * {
  box-sizing: border-box;
  font-family: inherit;
}

.hidden {
  display: none;
}

/* ================= CARD ================= */

.ai-card {
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  padding: 40px 36px;
  box-shadow:
    0 20px 45px rgba(28, 31, 42, 0.10),
    0 2px 8px rgba(28, 31, 42, 0.04);
  animation: fadeUp 0.4s ease;
  overflow: hidden;
}

/* Premium AI glow */
.ai-card::before {
  content: "";
  position: absolute;
  top: -35%;
  right: -35%;
  width: 280px;
  height: 280px;
  background: radial-gradient(
    circle,
    rgba(47,92,255,0.14),
    transparent 65%
  );
  pointer-events: none;
}

/* ================= STEP ================= */

.ai-step {
  font-size: 12px;
  font-weight: 500;
  color: #8a8fa8;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
  display: block;
}

/* ================= TEXT ================= */

.ai-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #1c1f2a;
  margin-bottom: 14px;
  line-height: 1.35;
}

.ai-card p {
  font-size: 15px;
  color: #6b6f82;
  margin-bottom: 22px;
  line-height: 1.5;
}

/* ================= OPTIONS ================= */

.ai-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ai-option {
  width: 100%;
  padding: 18px 22px;
  border-radius: 14px;

  background: #f9faff;
  border: 1px solid #e6e8f0;

  color: #1c1f2a;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;

  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  outline: none;

  transition: all 0.25s ease;
}

.ai-option:hover {
  background: #eef1ff;
  border-color: #cfd5ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(47,92,255,0.15);
}

/* Selected state (JS adds .selected) */
.ai-option.selected {
  background: linear-gradient(135deg, #eef1ff, #f7f9ff);
  border-color: #2f5cff;
  color: #1e3fd1;
  box-shadow: 0 10px 22px rgba(47,92,255,0.22);
}

/* ================= INPUTS ================= */

.ai-input {
  width: 100%;
  height: 50px;
  padding: 0 18px;
  border-radius: 30px;
  border: 1px solid #e6e8f0;
  font-size: 15px;
  margin-bottom: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ai-input:focus {
  outline: none;
  border-color: #4a5bdc;
  box-shadow: 0 0 0 4px rgba(74,91,220,0.12);
}

.ai-input-secondary {
  opacity: 0.75;
}

/* ================= SUBMIT ================= */

.ai-submit {
  display: block;
  width: 100%;
  padding: 15px 28px;
  border-radius: 30px;

  background: linear-gradient(135deg, #2f5cff, #4a6bff);
  color: #ffffff;

  font-size: 16px;
  font-weight: 600;
  text-align: center;

  cursor: pointer;
  border: none;

  transition: all 0.25s ease;
}

.ai-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(47,92,255,0.35);
}

/* ================= TRUST ================= */

.ai-trust {
  margin-top: 10px;
  font-size: 12px;
  color: #777;
  text-align: center;
}

/* ================= CTA ================= */

.ai-cta-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-cta {
  padding: 14px;
  border-radius: 30px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
}

.ai-cta.primary {
  background: #2f5cff;
  color: #ffffff;
}

.ai-cta.secondary {
  background: #eef1ff;
  color: #2f5cff;
}

/* ================= LOADER ================= */

.ai-loader {
  text-align: center;
}

.ai-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid #eee;
  border-top: 3px solid #2f5cff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 14px;
}

/* ================= ANIMATIONS ================= */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* ================= MOBILE ================= */

@media (max-width: 767px) {
  .ai-card {
    padding: 32px 22px;
  }

  .ai-card h3 {
    font-size: 19px;
  }
}

/* ================= PROGRESS BAR ================= */

.ai-progress {
  width: 100%;
  height: 6px;
  background: #eef1ff;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 22px;
}

.ai-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2f5cff, #4a6bff);
  border-radius: 6px;
  transition: width 0.35s ease;
}