/* Custom extras on top of Tailwind */
html {
  scroll-behavior: smooth;
}

/* Reusable card styles */
.card-step {
  @apply relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 p-5 text-sm text-slate-200 shadow-lg shadow-black/40;
}

.card-step::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at top left, rgba(244, 114, 182, 0.18), transparent 55%);
  transition: opacity 0.25s ease-out;
}

.card-step:hover::before {
  opacity: 1;
}

.badge-step {
  @apply inline-flex h-8 w-8 items-center justify-center rounded-2xl bg-gradient-to-br from-cta-500 via-destaque-500 to-orange-400 text-xs font-bold text-slate-950 shadow-md shadow-cta-900/40;
}

.card-title {
  @apply mt-3 text-sm font-semibold text-slate-50;
}

.card-text {
  @apply mt-2 text-xs leading-relaxed text-slate-300;
}

.card-income {
  @apply relative flex h-full flex-col rounded-3xl border border-white/10 bg-white/5 p-5 text-sm text-slate-200 shadow-lg shadow-black/40;
}

.card-income::after {
  content: "";
  position: absolute;
  inset-inline: 30%;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(to right, #06b6d4, #d946ef, #fb923c);
  opacity: 0.8;
}

.card-list {
  @apply mt-3 space-y-1 text-xs text-slate-300;
}

.card-list li::before {
  content: "•";
  margin-right: 0.4rem;
  color: #22d3ee;
}

.card-result {
  @apply rounded-3xl border border-white/10 bg-gradient-to-b from-slate-900/70 to-slate-950/50 p-5 shadow-xl shadow-black/50;
}

/* FAQ */
.faq-item {
  @apply overflow-hidden rounded-2xl border border-white/10 bg-white/5;
}

.faq-trigger {
  @apply flex w-full items-center justify-between gap-4 px-4 py-3 text-left text-sm font-medium text-slate-100;
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease-out;
}

.faq-content p {
  @apply px-4 pb-4 text-xs text-slate-200;
}

.faq-item.active .faq-content {
  max-height: 200px;
}

.faq-icon {
  @apply h-4 w-4 flex-shrink-0 text-slate-300 transition-transform duration-200;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
}

/* Inputs */
.label {
  @apply mb-1 block text-xs font-medium text-slate-200;
}

.input {
  @apply w-full rounded-xl border border-white/15 bg-black/40 px-3 py-2 text-sm text-slate-50 placeholder:text-slate-500 outline-none transition focus:border-cta-400 focus:ring-1 focus:ring-cta-400;
}

/* Icons */
.icon-link {
  @apply flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-white/5 text-slate-300 hover:text-slate-50;
}

/* Nav */
.nav-link {
  @apply text-xs;
}

@media (min-width: 1024px) {
  .nav-link {
    @apply text-[11px];
  }
}