/* =====================================================================
   ADWstudio — inquiry.css (v2 configurator)
   Loads AFTER style.css and reuses its tokens/components.
   01 Minimal nav & page frame   02 Progress
   03 Question & answer cards    04 Step transitions
   05 Inputs & continue          06 Final step (price, summary)
   07 Success screen             08 Reduced motion
   ===================================================================== */

/* ============ 01 Minimal nav & page frame ============ */
.wiz-body { min-height: 100vh; display: flex; flex-direction: column; }

.nav--minimal {
  position: static;                    /* overrides v1 fixed nav */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}

.wiz-main { flex: 1; position: relative; overflow: hidden; }
.wiz-beam {
  position: absolute;
  top: -30%; right: -20%;
  width: min(70vw, 780px);
  height: min(70vw, 780px);
  background: radial-gradient(circle at center, var(--glow), transparent 62%);
  opacity: 0.55;
  pointer-events: none;
}
.wiz-container {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--pad);
}

.wiz-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-2);
  padding: 18px 0;
  text-align: center;
  font-size: var(--small);
  color: var(--ink-2);
}
.wiz-footer a { color: var(--ink-2); }
.wiz-footer a:hover { color: var(--blue); }

.wiz-noscript {
  max-width: 720px;
  margin: 40px auto;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-card);
  text-align: center;
  color: var(--ink-2);
}

/* ============ 02 Progress ============ */
.wiz-progress {
  height: 3px;
  background: var(--line);
}
.wiz-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-deep));
  transition: width 0.4s var(--ease);
}

.wiz-steplabel {
  font: 600 0.8125rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin-bottom: 10px;
}

.wiz-restore {
  font-size: var(--small);
  color: var(--ink-2);
  margin-bottom: 18px;
}
.link-btn {
  background: none;
  border: 0;
  padding: 2px;
  font: inherit;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}

.wiz-back {
  background: none;
  border: 0;
  padding: 10px 2px;
  margin-bottom: 4px;
  font: 500 0.95rem var(--font-body);
  color: var(--ink-2);
  cursor: pointer;
}
.wiz-back:hover { color: var(--blue); }

/* ============ 03 Question & answer cards ============ */
.wiz-stage { position: relative; transition: height 0.3s var(--ease); }
.wiz-step { display: grid; gap: 22px; }

.wiz-q {
  font: 700 clamp(1.6rem, 4vw, 2.3rem)/1.15 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
  outline: none;
}
.wiz-sub { color: var(--ink-2); margin-top: -12px; }

.wiz-options { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .wiz-options { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .wiz-options.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

.wiz-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
  animation: wizCardIn 0.45s var(--ease) both;
}
@keyframes wizCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.wiz-card:hover {
  transform: translateY(-3px);
  border-color: rgba(26, 84, 244, 0.45);
  box-shadow: var(--shadow-card);
}
.wiz-card:active { transform: scale(0.98); transition-duration: 90ms; }

.wiz-card .icon-tile { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.wiz-card .icon-tile svg { width: 20px; height: 20px; }

.wiz-card-title { font: 600 1rem var(--font-body); display: block; }
.wiz-card-desc { font-size: var(--small); color: var(--ink-2); display: block; margin-top: 2px; }

.wiz-card.is-selected {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);   /* reads as a 2px border, no layout shift */
  background: var(--blue-ghost);
}

.wiz-check {
  position: absolute;
  top: -8px; right: -8px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-deep));
  color: #fff;
  display: none;
  place-items: center;
  box-shadow: 0 4px 10px var(--glow);
}
.wiz-check svg { width: 12px; height: 12px; }
.wiz-card.is-selected .wiz-check {
  display: grid;
  animation: wizPop 0.28s var(--ease) both;
}
@keyframes wizPop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ============ 04 Step transitions (direction-aware) ============ */
.wiz-out-left  { animation: wizOutLeft  0.18s ease both; }
.wiz-out-right { animation: wizOutRight 0.18s ease both; }
.wiz-in-right  { animation: wizInRight  0.26s var(--ease) both; }
.wiz-in-left   { animation: wizInLeft   0.26s var(--ease) both; }
@keyframes wizOutLeft  { to { opacity: 0; transform: translateX(-24px); } }
@keyframes wizOutRight { to { opacity: 0; transform: translateX(24px); } }
@keyframes wizInRight  { from { opacity: 0; transform: translateX(24px); }  to { opacity: 1; transform: none; } }
@keyframes wizInLeft   { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

/* ============ 05 Inputs & continue ============ */
.wiz-input-wrap { margin-top: -6px; }

.wiz-actions { margin-top: 4px; }
.wiz-continue { width: 100%; }
@media (max-width: 639px) {
  .wiz-actions {
    position: sticky;
    bottom: 0;
    padding: 14px 0 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 35%);
  }
}
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}
.btn[disabled]::after { display: none; }

/* ============ 06 Final step (price, summary) ============ */
.wiz-price {
  border: 1px solid rgba(26, 84, 244, 0.35);
  background: var(--blue-ghost);
  border-radius: 16px;
  padding: clamp(22px, 4vw, 30px);
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}
.wiz-price-label {
  font: 600 0.8125rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
}
.wiz-price-value {
  font: 800 clamp(2rem, 6vw, 2.7rem)/1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.wiz-price-care { font: 600 0.95rem var(--font-body); color: var(--blue-deep); }
.wiz-price-note, .wiz-price-unsure { font-size: var(--small); color: var(--ink-2); max-width: 40ch; }
.wiz-price-unsure { font-size: 1rem; color: var(--ink); }

.wiz-summary {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.wiz-summary-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 16px;
  font-size: var(--small);
}
.wiz-summary-row + .wiz-summary-row { border-top: 1px solid var(--line); }
.wiz-summary-label { color: var(--ink-2); }
.wiz-summary-value { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .wiz-summary-row { grid-template-columns: 1fr auto; }
  .wiz-summary-label { grid-column: 1 / -1; margin-bottom: -8px; }
}

.wiz-fields { display: grid; gap: 0; }

/* ============ 07 Success screen ============ */
.wiz-success {
  text-align: center;
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: clamp(16px, 4vw, 40px) 0;
}
.wiz-success h2 {
  font: 800 clamp(1.7rem, 4.5vw, 2.4rem)/1.15 var(--font-display);
  letter-spacing: -0.02em;
}
.wiz-success p { color: var(--ink-2); max-width: 40ch; }
.wiz-success-check {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--blue-ghost);
  color: var(--blue);
  display: grid;
  place-items: center;
  animation: wizPop 0.45s var(--ease) both;
}
.wiz-success-check svg { width: 32px; height: 32px; }
.wiz-success-ctas { display: grid; gap: 12px; width: min(100%, 340px); margin-top: 8px; }
.wiz-success-ctas .btn { width: 100%; }
.wiz-care { font-size: var(--small); color: var(--ink-2); margin-top: 6px; }

/* ============ 08 Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .wiz-card, .wiz-check, .wiz-success-check,
  .wiz-out-left, .wiz-out-right, .wiz-in-left, .wiz-in-right { animation: none !important; }
  .wiz-stage, .wiz-progress-fill { transition: none !important; }
}

/* icon strokes for sprite-based svgs (attrs moved out of inquiry.js) */
.wiz-body svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }