<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { registerContractor } from 'src/api/contractor'

const router = useRouter()

const ALL_SERVICES = [
  { id: 'informatique',  icon: '💻', label: 'Informatique'       },
  { id: 'formatage',     icon: '🖥️', label: 'Formatage PC'        },
  { id: 'nettoyage',     icon: '🧹', label: 'Nettoyage'           },
  { id: 'camera',        icon: '📷', label: 'Caméras sécurité'    },
  { id: 'plomberie',     icon: '🔧', label: 'Plomberie'           },
  { id: 'electricite',   icon: '⚡', label: 'Électricité'         },
  { id: 'climatisation', icon: '❄️', label: 'Climatisation'       },
  { id: 'telephone',     icon: '📱', label: 'Téléphones'          },
  { id: 'serrurerie',    icon: '🔒', label: 'Serrurerie'          },
  { id: 'peinture',      icon: '🎨', label: 'Peinture'            },
  { id: 'jardinage',     icon: '🌿', label: 'Entretien extérieur' },
  { id: 'autre',         icon: '🔨', label: 'Autre'               },
]

const DAYS = [
  { id: 'mon', label: 'Lun' },
  { id: 'tue', label: 'Mar' },
  { id: 'wed', label: 'Mer' },
  { id: 'thu', label: 'Jeu' },
  { id: 'fri', label: 'Ven' },
  { id: 'sat', label: 'Sam' },
  { id: 'sun', label: 'Dim' },
]

const TOTAL_STEPS = 4
const step = ref(1)

// ── Step 1 — Profil ──────────────────────────────────────────────────────────
const profile = ref({
  firstname: '',
  lastname:  '',
  phone:     '',
  email:     '',
  company:   '',
  license:   '',
})

// ── Step 2 — Services ────────────────────────────────────────────────────────
// selectedServices: { [id]: { rate: '', rateType: 'hourly' } }
const selectedServices = ref({})

function toggleService (svc) {
  if (selectedServices.value[svc.id]) {
    const copy = { ...selectedServices.value }
    delete copy[svc.id]
    selectedServices.value = copy
  } else {
    selectedServices.value = {
      ...selectedServices.value,
      [svc.id]: { rate: '', rateType: 'hourly' },
    }
  }
}
function isSelected (id) { return !!selectedServices.value[id] }

const selectedServiceList = computed(() =>
  ALL_SERVICES
    .filter(s => selectedServices.value[s.id])
    .map(s => ({
      ...s,
      rate:     selectedServices.value[s.id].rate,
      rateType: selectedServices.value[s.id].rateType,
    }))
)

// ── Step 3 — Zone & disponibilité ────────────────────────────────────────────
const availability = ref({
  city:   '',
  radius: '25km',
  days:   ['mon','tue','wed','thu','fri'],
  urgent: false,
})

function toggleDay (id) {
  const days = availability.value.days
  if (days.includes(id)) {
    availability.value.days = days.filter(d => d !== id)
  } else {
    availability.value.days = [...days, id]
  }
}

// ── Submit ───────────────────────────────────────────────────────────────────
const submitting  = ref(false)
const submitError = ref('')
const contractorRef = ref('')

async function submit () {
  submitting.value  = true
  submitError.value = ''
  try {
    const ref = await registerContractor({
      profile:       profile.value,
      services:      selectedServiceList.value,
      availability:  availability.value,
    })
    contractorRef.value = ref
    step.value = 5
  } catch (e) {
    submitError.value = e.message || 'Erreur lors de la soumission.'
  } finally {
    submitting.value = false
  }
}

// ── Navigation ───────────────────────────────────────────────────────────────
const canNext = computed(() => {
  if (step.value === 1) {
    const p = profile.value
    return p.firstname.trim().length >= 2
      && p.lastname.trim().length >= 2
      && p.phone.replace(/\D/g, '').length >= 10
      && p.email.includes('@')
  }
  if (step.value === 2) return selectedServiceList.value.length >= 1
    && selectedServiceList.value.every(s => s.rate.trim() !== '')
  if (step.value === 3) return availability.value.city.trim().length >= 2
    && availability.value.days.length >= 1
  return true
})
function next () { if (canNext.value && step.value < TOTAL_STEPS) step.value++ }
function prev () { if (step.value > 1) step.value-- }
</script>

<template>
<div class="ct-root">

  <!-- ── Header ─────────────────────────────────────────────────────────── -->
  <div class="ct-header">
    <button class="btn-back" @click="router.push('/')">← Retour</button>
    <div class="ct-brand">Dispatch</div>
    <div v-if="step <= TOTAL_STEPS" class="step-dots">
      <span
        v-for="i in TOTAL_STEPS"
        :key="i"
        class="dot"
        :class="{ active: step === i, done: step > i }"
      />
    </div>
  </div>

  <!-- ── Hero intro (before step 1) ── not shown, header serves this role -->

  <!-- ── Body ───────────────────────────────────────────────────────────── -->
  <div class="ct-body">

    <!-- Step 1 — Profil -->
    <div v-if="step === 1" class="step-panel">
      <div class="step-eyebrow">Étape 1 sur {{ TOTAL_STEPS }}</div>
      <h1 class="step-title">Votre profil</h1>
      <p class="step-sub">
        Rejoignez notre réseau de techniciens et sous-traitants.<br>
        Nous vous contactons sous 24h après révision de votre profil.
      </p>

      <div class="form-grid">
        <div class="field">
          <label>Prénom *</label>
          <input v-model="profile.firstname" type="text" placeholder="Jean" />
        </div>
        <div class="field">
          <label>Nom *</label>
          <input v-model="profile.lastname" type="text" placeholder="Tremblay" />
        </div>
        <div class="field">
          <label>Téléphone *</label>
          <input v-model="profile.phone" type="tel" placeholder="514-555-0123" />
        </div>
        <div class="field">
          <label>Courriel *</label>
          <input v-model="profile.email" type="email" placeholder="jean@exemple.com" />
        </div>
        <div class="field span2">
          <label>Entreprise (optionnel)</label>
          <input v-model="profile.company" type="text" placeholder="Technologies XYZ inc." />
        </div>
        <div class="field span2">
          <label>Numéro RBQ / Licence (optionnel)</label>
          <input v-model="profile.license" type="text" placeholder="8301-1234-56" />
          <span class="field-hint">Requis pour plomberie, électricité et certains travaux de construction</span>
        </div>
      </div>
    </div>

    <!-- Step 2 — Services -->
    <div v-if="step === 2" class="step-panel">
      <div class="step-eyebrow">Étape 2 sur {{ TOTAL_STEPS }}</div>
      <h1 class="step-title">Vos services et tarifs</h1>
      <p class="step-sub">Sélectionnez les services que vous offrez et indiquez votre tarif pour chacun</p>

      <div class="service-grid">
        <button
          v-for="s in ALL_SERVICES"
          :key="s.id"
          class="service-chip"
          :class="{ selected: isSelected(s.id) }"
          @click="toggleService(s)"
        >
          <span>{{ s.icon }}</span>
          <span class="chip-label">{{ s.label }}</span>
          <span v-if="isSelected(s.id)" class="chip-check">✓</span>
        </button>
      </div>

      <!-- Rate inputs for selected services -->
      <div v-if="selectedServiceList.length" class="rates-section">
        <div class="rates-title">Tarifs pour les services sélectionnés</div>
        <div
          v-for="s in selectedServiceList"
          :key="s.id"
          class="rate-row"
        >
          <div class="rate-svc">
            <span class="rate-icon">{{ s.icon }}</span>
            <span class="rate-label">{{ s.label }}</span>
          </div>
          <div class="rate-inputs">
            <input
              v-model="selectedServices[s.id].rate"
              type="number"
              min="0"
              placeholder="75"
              class="rate-amount"
            />
            <span class="rate-currency">$</span>
            <select v-model="selectedServices[s.id].rateType" class="rate-type">
              <option value="hourly">/ heure</option>
              <option value="flat">forfait</option>
            </select>
          </div>
        </div>
      </div>

      <div v-if="!selectedServiceList.length" class="hint-box">
        Sélectionnez au moins un service ci-dessus
      </div>
    </div>

    <!-- Step 3 — Zone & disponibilité -->
    <div v-if="step === 3" class="step-panel">
      <div class="step-eyebrow">Étape 3 sur {{ TOTAL_STEPS }}</div>
      <h1 class="step-title">Zone et disponibilité</h1>
      <p class="step-sub">Définissez où vous opérez et quand vous êtes disponible</p>

      <div class="zone-section">
        <div class="field">
          <label>Ville principale *</label>
          <input v-model="availability.city" type="text" placeholder="Montréal, Laval, Longueuil…" />
        </div>

        <div class="field">
          <label>Rayon d'intervention</label>
          <div class="radius-group">
            <button
              v-for="r in ['10km','25km','50km','Province']"
              :key="r"
              class="radius-btn"
              :class="{ selected: availability.radius === r }"
              @click="availability.radius = r"
            >{{ r }}</button>
          </div>
        </div>

        <div class="field">
          <label>Jours disponibles *</label>
          <div class="days-group">
            <button
              v-for="d in DAYS"
              :key="d.id"
              class="day-btn"
              :class="{ selected: availability.days.includes(d.id) }"
              @click="toggleDay(d.id)"
            >{{ d.label }}</button>
          </div>
        </div>

        <label class="urgent-row">
          <input type="checkbox" v-model="availability.urgent" />
          <span>Disponible pour les urgences (interventions rapides)</span>
        </label>
      </div>
    </div>

    <!-- Step 4 — Révision -->
    <div v-if="step === 4" class="step-panel">
      <div class="step-eyebrow">Étape 4 sur {{ TOTAL_STEPS }} — Révision</div>
      <h1 class="step-title">Confirmer votre inscription</h1>
      <p class="step-sub">Vérifiez vos informations avant de soumettre</p>

      <div class="review-card">
        <div class="review-section">
          <div class="review-section-title">Profil</div>
          <div class="review-row"><span>Nom</span><strong>{{ profile.firstname }} {{ profile.lastname }}</strong></div>
          <div class="review-row"><span>Téléphone</span><strong>{{ profile.phone }}</strong></div>
          <div class="review-row"><span>Courriel</span><strong>{{ profile.email }}</strong></div>
          <div v-if="profile.company" class="review-row"><span>Entreprise</span><strong>{{ profile.company }}</strong></div>
          <div v-if="profile.license" class="review-row"><span>Licence</span><strong>{{ profile.license }}</strong></div>
        </div>

        <div class="review-section">
          <div class="review-section-title">Services offerts</div>
          <div v-for="s in selectedServiceList" :key="s.id" class="review-row">
            <span>{{ s.icon }} {{ s.label }}</span>
            <strong>{{ s.rate }} $ / {{ s.rateType === 'hourly' ? 'heure' : 'forfait' }}</strong>
          </div>
        </div>

        <div class="review-section">
          <div class="review-section-title">Zone et disponibilité</div>
          <div class="review-row"><span>Ville</span><strong>{{ availability.city }}</strong></div>
          <div class="review-row"><span>Rayon</span><strong>{{ availability.radius }}</strong></div>
          <div class="review-row">
            <span>Jours</span>
            <strong>
              {{ DAYS.filter(d => availability.days.includes(d.id)).map(d => d.label).join(', ') }}
            </strong>
          </div>
          <div v-if="availability.urgent" class="review-row">
            <span>Urgences</span><strong>Disponible</strong>
          </div>
        </div>
      </div>

      <div v-if="submitError" class="submit-error">{{ submitError }}</div>
    </div>

    <!-- Step 5 — Confirmation -->
    <div v-if="step === 5" class="step-panel step-confirm">
      <div class="confirm-anim">🎉</div>
      <h1 class="step-title">Candidature reçue !</h1>
      <p class="step-sub">
        Votre profil est en cours de révision.<br>
        Un responsable vous contactera sous 24h.
      </p>
      <div class="confirm-ref">
        Référence : <strong>{{ contractorRef }}</strong>
      </div>
      <div class="next-steps">
        <div class="next-step-title">Prochaines étapes</div>
        <div class="next-step-item">
          <span class="ns-num">1</span>
          <span>Vérification de votre profil et de vos certifications</span>
        </div>
        <div class="next-step-item">
          <span class="ns-num">2</span>
          <span>Entretien téléphonique avec notre équipe</span>
        </div>
        <div class="next-step-item">
          <span class="ns-num">3</span>
          <span>Activation de votre compte et réception de vos premiers jobs</span>
        </div>
      </div>
      <button class="btn-primary-lg" @click="router.push('/')">Retour à l'accueil</button>
    </div>

  </div><!-- /ct-body -->

  <!-- ── Footer nav ──────────────────────────────────────────────────────── -->
  <div v-if="step <= TOTAL_STEPS" class="ct-footer">
    <button v-if="step > 1" class="btn-prev" @click="prev">← Précédent</button>
    <div v-else class="footer-spacer" />

    <div class="footer-progress">
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: ((step - 1) / TOTAL_STEPS * 100) + '%' }" />
      </div>
    </div>

    <button
      v-if="step < TOTAL_STEPS"
      class="btn-next"
      :disabled="!canNext"
      @click="next"
    >
      Suivant →
    </button>
    <button
      v-else
      class="btn-submit"
      :disabled="!canNext || submitting"
      @click="submit"
    >
      {{ submitting ? 'Envoi…' : 'Soumettre mon profil' }}
    </button>
  </div>

</div>
</template>

<style scoped>
/* ── Root ── */
.ct-root {
  min-height: 100vh;
  background: var(--bg, #0f1117);
  color: var(--text-primary, #f1f5f9);
  display: flex; flex-direction: column;
  font-family: 'Inter', sans-serif;
}

/* ── Header ── */
.ct-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: rgba(15,17,23,0.92);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  backdrop-filter: blur(12px);
}
.ct-brand {
  font-size: 1rem; font-weight: 800;
  color: #10b981; flex: 1;
}
.btn-back {
  background: none; border: 1px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text-secondary, #94a3b8);
  border-radius: 6px; padding: 0.3rem 0.75rem;
  cursor: pointer; font-size: 0.8rem; font-weight: 600;
  transition: color 0.15s, border-color 0.15s;
}
.btn-back:hover { color: var(--text-primary, #f1f5f9); border-color: #10b981; }
.step-dots { display: flex; gap: 6px; align-items: center; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border, rgba(255,255,255,0.12));
  transition: all 0.25s;
}
.dot.active { background: #10b981; width: 22px; border-radius: 4px; }
.dot.done   { background: #10b981; opacity: 0.5; }

/* ── Body ── */
.ct-body {
  flex: 1; overflow-y: auto;
  padding: 2rem 1.5rem 6rem;
  max-width: 680px; margin: 0 auto; width: 100%;
}
.step-panel { animation: fadeUp 0.25s ease; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step-eyebrow {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #10b981; margin-bottom: 0.5rem;
}
.step-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.4rem; line-height: 1.2; }
.step-sub {
  color: var(--text-secondary, #94a3b8);
  font-size: 0.92rem; margin: 0 0 1.75rem; line-height: 1.5;
}

/* ── Step 1 — Form grid ── */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.span2 { grid-column: span 2; }

/* ── Step 2 — Service chips ── */
.service-grid {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.service-chip {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.85rem; border-radius: 99px;
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 2px solid var(--border, rgba(255,255,255,0.08));
  cursor: pointer; font-size: 0.82rem;
  transition: all 0.18s; color: var(--text-primary, #f1f5f9);
}
.service-chip:hover { border-color: rgba(16,185,129,0.4); }
.service-chip.selected {
  border-color: #10b981;
  background: rgba(16,185,129,0.1);
}
.chip-label { font-weight: 600; }
.chip-check { color: #10b981; font-weight: 700; font-size: 0.7rem; }

.rates-section {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px; overflow: hidden;
}
.rates-title {
  padding: 0.65rem 1rem;
  background: var(--sidebar-bg, #161b27);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary, #94a3b8);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.rate-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.05));
}
.rate-row:last-child { border-bottom: none; }
.rate-svc { display: flex; align-items: center; gap: 0.5rem; }
.rate-icon { font-size: 1rem; }
.rate-label { font-size: 0.85rem; font-weight: 600; }
.rate-inputs { display: flex; align-items: center; gap: 0.35rem; }
.rate-amount {
  width: 72px; background: var(--bg, #0f1117);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px; color: var(--text-primary, #f1f5f9);
  padding: 0.35rem 0.5rem; font-size: 0.85rem; text-align: right;
  outline: none; transition: border-color 0.15s;
}
.rate-amount:focus { border-color: #10b981; }
.rate-currency { font-size: 0.82rem; color: var(--text-secondary, #94a3b8); }
.rate-type {
  background: var(--bg, #0f1117);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 6px; color: var(--text-primary, #f1f5f9);
  padding: 0.35rem 0.5rem; font-size: 0.8rem; cursor: pointer;
  outline: none;
}

.hint-box {
  text-align: center; padding: 2rem;
  color: var(--text-secondary, #64748b);
  font-size: 0.88rem; font-style: italic;
}

/* ── Step 3 — Zone ── */
.zone-section { display: flex; flex-direction: column; gap: 1.25rem; }
.radius-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.radius-btn {
  padding: 0.45rem 1rem; border-radius: 8px;
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 2px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text-primary, #f1f5f9); cursor: pointer;
  font-size: 0.82rem; font-weight: 600; transition: all 0.15s;
}
.radius-btn:hover { border-color: rgba(16,185,129,0.4); }
.radius-btn.selected { border-color: #10b981; background: rgba(16,185,129,0.1); }

.days-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.day-btn {
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 2px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text-primary, #f1f5f9); cursor: pointer;
  font-size: 0.8rem; font-weight: 700; transition: all 0.15s;
}
.day-btn:hover { border-color: rgba(16,185,129,0.4); }
.day-btn.selected { border-color: #10b981; background: rgba(16,185,129,0.1); color: #10b981; }

.urgent-row {
  display: flex; align-items: center; gap: 0.65rem;
  cursor: pointer; font-size: 0.88rem; color: var(--text-secondary, #94a3b8);
}
.urgent-row input { accent-color: #10b981; width: 16px; height: 16px; cursor: pointer; }

/* ── Step 4 — Review ── */
.review-card {
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px; overflow: hidden;
}
.review-section { border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); }
.review-section:last-child { border-bottom: none; }
.review-section-title {
  padding: 0.65rem 1rem;
  background: var(--sidebar-bg, #161b27);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary, #94a3b8);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.review-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 1rem; font-size: 0.82rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.05));
}
.review-row:last-child { border-bottom: none; }
.review-row span  { color: var(--text-secondary, #94a3b8); }
.review-row strong { color: var(--text-primary, #f1f5f9); }

/* ── Step 5 — Confirm ── */
.step-confirm { text-align: center; padding-top: 2rem; }
.confirm-anim {
  font-size: 4rem; margin-bottom: 1rem;
  animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.confirm-ref {
  display: inline-block; margin: 1.5rem auto;
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px; padding: 0.65rem 1.25rem;
  font-size: 0.88rem; color: var(--text-secondary, #94a3b8);
}
.confirm-ref strong { color: #10b981; font-size: 1rem; }

.next-steps {
  text-align: left; margin: 1.5rem 0 2rem;
  background: var(--card-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 12px; overflow: hidden;
}
.next-step-title {
  padding: 0.65rem 1rem;
  background: var(--sidebar-bg, #161b27);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary, #94a3b8);
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}
.next-step-item {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.05));
  font-size: 0.85rem; color: var(--text-primary, #f1f5f9);
}
.next-step-item:last-child { border-bottom: none; }
.ns-num {
  flex-shrink: 0; width: 22px; height: 22px;
  background: #10b981; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: white;
}

.submit-error {
  margin-top: 0.75rem; padding: 0.65rem 0.9rem;
  background: rgba(244,63,94,0.08);
  border: 1px solid rgba(244,63,94,0.25);
  border-radius: 8px; font-size: 0.82rem; color: #f43f5e;
}

/* ── Footer ── */
.ct-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: rgba(15,17,23,0.96);
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
  backdrop-filter: blur(12px);
}
.footer-spacer { flex: 0 0 80px; }
.footer-progress { flex: 1; }
.progress-bar {
  height: 3px; background: var(--border, rgba(255,255,255,0.08));
  border-radius: 2px; overflow: hidden;
}
.progress-fill {
  height: 100%; background: #10b981;
  border-radius: 2px; transition: width 0.35s ease;
}
.btn-prev {
  flex: 0 0 auto; background: none;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text-secondary, #94a3b8);
  border-radius: 8px; padding: 0.55rem 1rem;
  cursor: pointer; font-size: 0.82rem; font-weight: 600;
  transition: all 0.15s;
}
.btn-prev:hover { color: var(--text-primary, #f1f5f9); border-color: rgba(255,255,255,0.2); }
.btn-next {
  flex: 0 0 auto;
  background: #10b981; border: none; color: white;
  border-radius: 8px; padding: 0.55rem 1.25rem;
  cursor: pointer; font-size: 0.88rem; font-weight: 700;
  transition: opacity 0.15s;
}
.btn-next:hover:not(:disabled) { opacity: 0.85; }
.btn-next:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-submit {
  flex: 0 0 auto;
  background: #10b981; border: none; color: white;
  border-radius: 8px; padding: 0.6rem 1.5rem;
  cursor: pointer; font-size: 0.88rem; font-weight: 700;
  transition: opacity 0.15s;
}
.btn-submit:hover:not(:disabled) { opacity: 0.85; }
.btn-submit:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-primary-lg {
  background: #10b981; border: none; color: white;
  border-radius: 10px; padding: 0.75rem 2rem;
  cursor: pointer; font-size: 0.95rem; font-weight: 700;
  transition: opacity 0.15s;
}
.btn-primary-lg:hover { opacity: 0.85; }

/* ── Shared field styles ── */
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-secondary, #94a3b8);
}
.field input, .field select, .field textarea {
  background: var(--bg, #0f1117);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px; color: var(--text-primary, #f1f5f9);
  padding: 0.6rem 0.85rem; font-size: 0.88rem;
  font-family: inherit; outline: none;
  transition: border-color 0.15s;
}
.field input:focus, .field select:focus { border-color: #10b981; }
.field-hint { font-size: 0.7rem; color: var(--text-secondary, #64748b); }

@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
  .span2 { grid-column: span 1; }
  .step-title { font-size: 1.3rem; }
}
</style>
