// =============================================================================
// Styles shared by the three onboarding wizard pages (OnboardingHousehold,
// OnboardingDiet, OnboardingAllergens) — the household/regime/allergens
// steps of the profile journey, run once right after signup.
//
// Deliberately its own file rather than importing features/auth/
// auth-form.scss: same visual language (centered card) but a different
// feature area — matches the project's existing convention of colocating
// styles per feature rather than sharing a "global card" partial (see
// HomePage.scss, which makes the same call for its own button styling).
// =============================================================================

.onboarding-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--color-background);
}

.onboarding-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 100%;
  max-width: var(--max-width-form);
  padding: var(--space-xl);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);

  h1 {
    font-size: var(--font-size-lg);
    text-align: center;
    margin-bottom: var(--space-sm);
  }

  h2 {
    margin: var(--space-md) 0 var(--space-xs);
    font-size: var(--font-size-base);
  }

  button {
    margin-top: var(--space-md);
    padding: 0.6rem;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-base);
    border: none;
    background: var(--color-primary);
    color: #fff;

    &:hover:not(:disabled) {
      background: var(--color-primary-hover);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
}

// The household step's "skip" action — a plain text link, not another
// filled button, so it doesn't visually compete with "Créer"/"Rejoindre"
// right above it (this is the one step of the wizard offering three
// distinct actions instead of one). The extra specificity of
// `.onboarding-card .onboarding-skip` (a class, not just `button`) is what
// lets this win over `.onboarding-card button`'s filled style above.
.onboarding-card .onboarding-skip {
  background: none;
  color: var(--color-text-muted);
  font-weight: 600;
  text-decoration: underline;

  &:hover:not(:disabled) {
    color: var(--color-text);
    background: none;
  }
}

.onboarding-step {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-sm);
}

// The household step's "this is optional" hint — same muted tone as
// `.onboarding-step` above, but a normal sentence (no uppercase transform).
.onboarding-subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  margin: 0 0 var(--space-sm);
}

.form-error {
  color: var(--color-error);
  font-size: var(--font-size-sm);
}
