/* ============================================================
   WIZARD — stepper + step transitions
   ============================================================ */

.wizard {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* ── Stepper (Journey Line) ─────────────────────────────── */
.stepper {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-6);
  min-height: 110px;  /* reserves space before JS renders nodes — prevents CLS */
  transition: background var(--dur-normal) var(--ease-out);
}

.stepper__track {
  display: flex;
  align-items: center;
  position: relative;
}

.stepper__line {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: var(--c-border);
  border-radius: var(--r-full);
  overflow: hidden;
}

.stepper__line-fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: var(--r-full);
  transition: width var(--dur-slow) var(--ease-out);
}

.stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  position: relative;
  z-index: 1;
  background: none;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.stepper__step:disabled { cursor: not-allowed; opacity: 0.5; }
.stepper__step[aria-disabled="true"] { cursor: default; }

.stepper__node {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  color: var(--c-text-muted);
  transition: all var(--dur-normal) var(--ease-spring);
  flex-shrink: 0;
}

.stepper__node svg { width: 18px; height: 18px; }

.stepper__step--active .stepper__node {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: white;
  box-shadow: 0 0 0 4px rgb(0 109 119 / 0.15);
  transform: scale(1.08);
}

[data-theme="dark"] .stepper__step--active .stepper__node {
  box-shadow: 0 0 0 4px rgb(131 197 190 / 0.2);
}

.stepper__step--complete .stepper__node {
  background: var(--c-success-light);
  border-color: var(--c-success);
  color: var(--c-success);
}

.stepper__step--complete:hover .stepper__node {
  background: var(--c-success);
  color: white;
}

.stepper__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-text-muted);
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-out);
}

.stepper__step--active .stepper__label  { color: var(--c-primary); }
.stepper__step--complete .stepper__label { color: var(--c-success); }

/* ── Mobile stepper ─────────────────────────────────────── */
.stepper-mobile {
  display: none;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
}

.mobile-stepper__text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}

.mobile-stepper__bar {
  flex: 1;
  height: 4px;
  background: var(--c-border);
  border-radius: var(--r-full);
  overflow: hidden;
}

.mobile-stepper__fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: var(--r-full);
  transition: width var(--dur-slow) var(--ease-out);
}

@media (max-width: 768px) {
  .stepper { display: none; }
  .stepper-mobile { display: flex; min-height: 56px; }  /* reserve space — prevents CLS */

  /* Keep nav always visible at bottom on mobile */
  .wizard-nav {
    position: sticky;
    bottom: 0;
    background: var(--c-bg);
    padding: var(--sp-3) 0;
    margin-top: var(--sp-2);
    border-top: 1px solid var(--c-border);
    z-index: 10;
  }
}

/* ── Status pill ────────────────────────────────────────── */
.status-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-primary);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-primary-light);
  border: 1px solid var(--c-primary);
  border-radius: var(--r-full);
  transition: all var(--dur-normal) var(--ease-out);
  text-align: center;
  min-height: 36px;
}

.status-pill:empty { display: none; }

.status-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Step area — reserve space to prevent CLS ────────────── */
.step-area {
  min-height: 560px;
  position: relative;
  contain: layout;
}

/* ── Step panel ──────────────────────────────────────────── */
.step-panel {
  flex: 1;
}

.step-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  animation: stepIn var(--dur-slow) var(--ease-out);
  transition: background var(--dur-normal) var(--ease-out),
              border-color var(--dur-normal) var(--ease-out);
}

@media (max-width: 768px) {
  .step-card { padding: var(--sp-5); }
}

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

.step-card__header {
  margin-bottom: var(--sp-6);
}

.step-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-primary);
  margin-bottom: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.step-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-1);
}

.step-card__subtitle {
  font-size: var(--text-sm);
  color: var(--c-text-muted);
}

/* ── Wizard navigation ────────────────────────────────── */
.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

/* When Back is hidden (Step 1), right-align the Next button */
.wizard-nav:has(.btn-back[hidden]) {
  justify-content: flex-end;
}

.btn-back {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-lg);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--c-text-secondary);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  min-height: 44px;
  transition: all var(--dur-fast) var(--ease-out);
}

.btn-back:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}

.btn-back svg { width: 16px; height: 16px; }

.btn-next {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-lg);
  font-size: var(--text-base);
  font-weight: 600;
  background-color: #006D77;
  background-color: var(--c-primary, #006D77);
  color: #ffffff;
  min-height: 44px;
  flex: 1;
  justify-content: center;
  max-width: 240px;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-spring),
              box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-sm);
}

.btn-next:hover {
  background: var(--c-primary-alt);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-next:active { transform: translateY(0); }
.btn-next svg { width: 16px; height: 16px; }

.btn-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Validation error messages ─────────────────────────── */
.field-error {
  font-size: var(--text-xs);
  color: var(--c-error);
  margin-top: var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.field-error svg { width: 12px; height: 12px; flex-shrink: 0; }

.input-wrap { position: relative; }
.input-wrap--error input,
.input-wrap--error select {
  border-color: var(--c-error);
}

/* ── Inline mobile ad zone (between steps 1-2) ─────────── */
.ad-zone--mobile-step {
  display: none;
}
@media (max-width: 768px) {
  .ad-zone--mobile-step { display: block; }
}