/* ==========================================================================
   ELNY Quote Wizard — scoped styles for /quote/ (loaded ONLY on this page,
   never touches the shared design-system.css). Built on the existing
   design-system.css tokens (--navy/--crimson/--blue/--sp-*/--radius-*).
   ========================================================================== */

.wizard-shell{
  padding-top:calc(var(--nav-height) + var(--sp-xl));
  padding-bottom:var(--sp-4xl);
  min-height:100vh;
}

/* ---------- Trust strip ---------- */
.wizard-trust{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-md) var(--sp-xl);
  text-align:center;
  padding:var(--sp-md) var(--sp-lg);
  margin:0 auto var(--sp-xl);
  max-width:720px;
}
.wizard-trust span{
  display:inline-flex;align-items:center;gap:0.4rem;
  font-size:var(--fs-xs);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;font-weight:var(--fw-semibold);
}
.wizard-trust svg{width:14px;height:14px;color:var(--blue-400);flex-shrink:0}

/* ---------- Header ---------- */
.wizard-head{text-align:center;max-width:640px;margin:0 auto var(--sp-xl);padding:0 var(--sp-lg)}
.wizard-head h1{margin-bottom:var(--sp-sm)}
.wizard-head p{color:var(--text-secondary);margin-bottom:0}

/* ---------- Progress ---------- */
.wizard-progress{max-width:640px;margin:0 auto var(--sp-2xl);padding:0 var(--sp-lg)}
.wizard-progress__label{
  display:flex;justify-content:space-between;align-items:center;
  font-size:var(--fs-xs);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.05em;font-weight:var(--fw-semibold);
  margin-bottom:var(--sp-sm);
}
.wizard-progress__track{
  height:6px;border-radius:var(--radius-full);
  background:rgba(255,255,255,0.08);overflow:hidden;
}
.wizard-progress__fill{
  height:100%;border-radius:var(--radius-full);
  background:linear-gradient(90deg,var(--blue-500),var(--crimson-500));
  transition:width var(--transition-slow);
  width:20%;
}

/* ---------- Wizard card ---------- */
.wizard-card{
  max-width:640px;margin:0 auto;padding:0 var(--sp-lg);
}
.wizard-panel{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  padding:var(--sp-xl);
  position:relative;overflow:hidden;
}
@media(max-width:768px){
  .wizard-panel{padding:var(--sp-lg) var(--sp-md)}
  /* iOS Safari perf: no backdrop-filter work needed here (bg-card is a flat
     rgba, not blur) but keep this guard in case a future edit adds one. */
  .wizard-panel{backdrop-filter:none;-webkit-backdrop-filter:none}
}
.wizard-step{display:none}
.wizard-step.active{display:block;animation:wizardIn .35s ease}
@keyframes wizardIn{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){
  .wizard-step.active{animation:none}
}
.wizard-step h2{font-size:var(--fs-h3);margin-bottom:var(--sp-xs);text-align:center}
.wizard-step__sub{color:var(--text-secondary);font-size:var(--fs-small);text-align:center;margin-bottom:var(--sp-lg)}

/* ---------- Option grid (Step 1: service cards) ---------- */
.option-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-sm);
}
.option-card{
  display:flex;align-items:center;gap:var(--sp-sm);
  padding:var(--sp-md);
  background:rgba(255,255,255,0.03);
  border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-md);
  text-align:left;color:var(--text-primary);
  font-family:'Inter',sans-serif;font-weight:var(--fw-semibold);font-size:var(--fs-small);
  min-height:64px;
  transition:all var(--transition-fast);
  cursor:pointer;width:100%;
}
.option-card:hover{border-color:var(--border-hover);background:rgba(255,255,255,0.06)}
.option-card:active{transform:scale(0.98)}
.option-card.selected{
  border-color:var(--blue-400);
  background:rgba(59,130,246,0.12);
  box-shadow:0 0 0 1px var(--blue-400) inset;
}
.option-card__icon{
  width:36px;height:36px;min-width:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(220,38,38,0.15),rgba(220,38,38,0.05));
  border:1px solid rgba(220,38,38,0.2);
}
.option-card__icon svg{width:18px;height:18px;color:var(--crimson-500)}
.option-card.selected .option-card__icon{
  background:linear-gradient(135deg,rgba(42,107,242,0.2),rgba(42,107,242,0.08));
  border-color:rgba(42,107,242,0.3);
}
.option-card.selected .option-card__icon svg{color:var(--blue-400)}
@media(max-width:480px){
  .option-grid{grid-template-columns:1fr}
}

/* ---------- Choice grid (Step 2: type + urgency, big buttons) ---------- */
.choice-group{margin-bottom:var(--sp-xl)}
.choice-group:last-child{margin-bottom:0}
.choice-group__label{
  font-size:var(--fs-small);font-weight:var(--fw-semibold);
  color:var(--text-secondary);margin-bottom:var(--sp-sm);
  display:block;
}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-sm)}
.choice-grid--stack{grid-template-columns:1fr}
.choice-card{
  padding:var(--sp-md);
  background:rgba(255,255,255,0.03);
  border:1.5px solid var(--border-subtle);
  border-radius:var(--radius-md);
  color:var(--text-primary);font-family:'Inter',sans-serif;
  font-weight:var(--fw-semibold);font-size:var(--fs-small);
  text-align:center;cursor:pointer;width:100%;
  transition:all var(--transition-fast);
  min-height:52px;
  display:flex;align-items:center;justify-content:center;gap:0.5rem;
}
.choice-card:hover{border-color:var(--border-hover);background:rgba(255,255,255,0.06)}
.choice-card:active{transform:scale(0.98)}
.choice-card.selected{
  border-color:var(--crimson-500);
  background:rgba(228,52,47,0.12);
  box-shadow:0 0 0 1px var(--crimson-500) inset;
  color:#fff;
}
.choice-card svg{width:16px;height:16px;flex-shrink:0}

/* ---------- Borough chips (Step 3) ---------- */
.chip-grid{display:flex;flex-wrap:wrap;gap:var(--sp-sm);margin-bottom:var(--sp-lg)}
.chip{
  padding:0.6rem 1.1rem;border-radius:var(--radius-full);
  background:rgba(255,255,255,0.03);
  border:1.5px solid var(--border-subtle);
  color:var(--text-primary);font-size:var(--fs-small);font-weight:var(--fw-medium);
  cursor:pointer;transition:all var(--transition-fast);
}
.chip:hover{border-color:var(--border-hover);background:rgba(255,255,255,0.06)}
.chip.selected{
  border-color:var(--blue-400);background:rgba(59,130,246,0.15);color:var(--blue-400);
}

/* ---------- Nav buttons ---------- */
.wizard-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-md);margin-top:var(--sp-xl);
}
.wizard-nav__spacer{flex:1}
.wizard-back{
  display:inline-flex;align-items:center;gap:0.4rem;
  color:var(--text-muted);font-size:var(--fs-small);font-weight:var(--fw-medium);
  background:none;border:none;cursor:pointer;padding:0.5rem;
}
.wizard-back:hover{color:var(--text-primary)}
.wizard-back svg{width:16px;height:16px}
.wizard-next{min-width:140px;justify-content:center}
.wizard-next:disabled{opacity:0.4;cursor:not-allowed;transform:none !important}
.wizard-next:disabled:hover{transform:none;box-shadow:var(--shadow-glow-crimson)}

/* ---------- Field errors ---------- */
.wizard-error{
  color:var(--crimson-400);font-size:var(--fs-small);font-weight:var(--fw-medium);
  text-align:center;margin-top:var(--sp-sm);display:none;
}

/* ---------- Success step ---------- */
.wizard-success{text-align:center;padding:var(--sp-md) 0}
.wizard-success__icon{
  width:72px;height:72px;margin:0 auto var(--sp-lg);
  border-radius:50%;
  background:linear-gradient(135deg,rgba(52,211,153,0.2),rgba(52,211,153,0.06));
  border:1px solid rgba(52,211,153,0.3);
  display:flex;align-items:center;justify-content:center;
}
.wizard-success__icon svg{width:36px;height:36px;color:#34d399}
.wizard-success h2{font-size:var(--fs-h3);margin-bottom:var(--sp-sm)}
.wizard-success p{color:var(--text-secondary);margin-bottom:var(--sp-xl)}
.wizard-success .btn{width:100%;margin-bottom:var(--sp-md)}
.wizard-success__trust{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-sm);
  font-size:var(--fs-xs);color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;font-weight:var(--fw-semibold);
  margin-top:var(--sp-md);
}
.wizard-success__restart{
  display:inline-block;margin-top:var(--sp-lg);
  color:var(--blue-400);font-size:var(--fs-small);font-weight:var(--fw-medium);
}
.wizard-success__restart:hover{text-decoration:underline}

/* Step-4 field group uses the shared .form-group styles from design-system.css */
.honeypot-field{position:absolute;left:-9999px}