/* =========================================
   LENDENGINE v3 · WIZARD STYLES
   ========================================= */

/* ── LAYOUT ── */
:root {
  --footer-h: 65px;
}

.wizard-page {
  min-height: 100vh;
  background: var(--off);
  display: flex;
  flex-direction: column;
}

/* ── WIZARD NAV ── */
.wizard-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
  display: flex; align-items: center;
}
.wizard-nav__inner {
  display: flex; align-items: center; gap: var(--s6);
  width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s8);
}
.wizard-nav__logo {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-b); font-size: 1.05rem; font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em; flex-shrink: 0;
}
.wizard-nav__logo-mark {
  width: 30px; height: 30px; background: var(--blue); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.wizard-nav__logo em { font-style: normal; color: var(--blue); }

.wizard-nav__progress { flex: 1; }
.wizard-nav__steps {
  display: flex; align-items: center; gap: 0;
  position: relative;
}
.wizard-nav__step {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  font-size: var(--t-xs); font-weight: 600;
  color: var(--text-m); white-space: nowrap;
  position: relative; transition: color var(--t-base);
}
.wizard-nav__step.active    { color: var(--blue); }
.wizard-nav__step.complete  { color: var(--ok); }
.wizard-nav__step-num {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
  background: var(--border); color: var(--text-m);
  transition: all var(--t-base);
}
.wizard-nav__step.active   .wizard-nav__step-num { background: var(--blue); color: var(--white); }
.wizard-nav__step.complete .wizard-nav__step-num { background: var(--ok);   color: var(--white); }
.wizard-nav__step-label { display: none; }

.wizard-nav__connector {
  height: 1px; width: 20px; background: var(--border); flex-shrink: 0; transition: background var(--t-base);
}
.wizard-nav__connector.done { background: var(--ok); }

.wizard-nav__actions { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; }
.wizard-nav__save {
  font-size: var(--t-xs); color: var(--text-m); display: flex; align-items: center; gap: var(--s1);
}

/* Progress bar under nav */
.wizard-progress-bar {
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 999;
  height: 3px; background: var(--border);
}
.wizard-progress-bar__fill {
  height: 100%; background: var(--blue);
  transition: width 0.5s var(--ease);
  box-shadow: 2px 0 8px rgba(37,99,235,.4);
}

/* ── BODY LAYOUT ── */
.wizard-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--s6);
  max-width: var(--max-w);
  margin: 0 auto;
  /* top: nav + progress bar | bottom: fixed footer */
  padding: calc(var(--nav-h) + 3px + var(--s8)) var(--s8) calc(var(--footer-h) + var(--s8));
  width: 100%;
  flex: 1;
}

/* ── MAIN PANEL ── */
.wizard-main {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.wizard-step {
  display: none; padding: var(--s10);
  animation: stepIn .4s var(--ease) both;
}
.wizard-step.active { display: block; }
@keyframes stepIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

.wizard-step__header { margin-bottom: var(--s8); }
.wizard-step__eyebrow { color: var(--blue); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--s3); }
.wizard-step__title {
  font-family: var(--font-d);
  font-size: clamp(var(--t-2xl), 3vw, var(--t-4xl));
  font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: var(--s3);
}
.wizard-step__desc { font-size: var(--t-sm); color: var(--text-s); line-height: 1.65; max-width: 520px; }

/* Step footer — FIXED to bottom of viewport */
.wizard-step__footer {
  display: none; /* hidden by default; only active step's footer shows via JS */
}

/* The single fixed footer bar */
.wizard-footer-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--footer-h);
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(10,12,18,.07);
  display: flex;
  align-items: center;
}

.wizard-footer-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s8);
  gap: var(--s4);
}

.wizard-footer-bar__left {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.wizard-footer-bar__hint {
  font-size: var(--t-xs);
  color: var(--text-m);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.wizard-footer-bar__right {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

/* ── LOAN TYPE CARDS ── */
.loan-type-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3);
}
.loan-type-card {
  border: 2px solid var(--border);
  border-radius: var(--r-xl); padding: var(--s5);
  cursor: pointer; transition: all var(--t-base) var(--ease);
  position: relative; background: var(--white);
  display: flex; flex-direction: column; gap: var(--s3);
}
.loan-type-card:hover { border-color: var(--blue); box-shadow: var(--sh-md); transform: translateY(-2px); }
.loan-type-card.selected { border-color: var(--blue); background: var(--blue-pale); box-shadow: 0 0 0 4px var(--blue-glow); }
.loan-type-card__check {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue); display: none; align-items: center; justify-content: center;
}
.loan-type-card.selected .loan-type-card__check { display: flex; }
.loan-type-card__icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--off); display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; transition: background var(--t-base);
}
.loan-type-card:hover .loan-type-card__icon,
.loan-type-card.selected .loan-type-card__icon { background: var(--blue); }
.loan-type-card__title { font-size: var(--t-md); font-weight: 700; color: var(--ink); }
.loan-type-card__detail { font-size: var(--t-xs); color: var(--text-s); line-height: 1.55; }
.loan-type-card__rate { margin-top: auto; }

/* ── FORM GRID ── */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s5); }

/* ── LTV METER ── */
.ltv-meter {
  background: var(--off); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: var(--s6);
  margin-top: var(--s6);
}
.ltv-meter__header {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s4);
}
.ltv-meter__label { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.ltv-meter__val {
  font-family: var(--font-d); font-size: var(--t-3xl); font-weight: 700;
  color: var(--blue); letter-spacing: -0.02em; line-height: 1;
}
.ltv-meter__val.warn  { color: var(--warn); }
.ltv-meter__val.fail  { color: var(--fail); }
.ltv-meter__bar {
  height: 10px; background: var(--border); border-radius: var(--r-pill); overflow: hidden; margin-bottom: var(--s4);
}
.ltv-meter__fill {
  height: 100%; border-radius: var(--r-pill); background: var(--blue);
  transition: width .5s var(--ease), background .3s;
}
.ltv-meter__fill.warn { background: var(--warn); }
.ltv-meter__fill.fail { background: var(--fail); }
.ltv-meter__status { font-size: var(--t-xs); color: var(--text-s); line-height: 1.6; }
.ltv-meter__status strong { color: var(--ink); }

/* ── COMMS CHECKBOXES ── */
.comms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.comms-opt {
  border: 2px solid var(--border); border-radius: var(--r-lg); padding: var(--s4);
  cursor: pointer; transition: all var(--t-base); display: flex; align-items: center; gap: var(--s3);
  background: var(--white);
}
.comms-opt:hover   { border-color: var(--blue); background: var(--blue-pale); }
.comms-opt.checked { border-color: var(--blue); background: var(--blue-pale); }
.comms-opt__icon { font-size: 1.3rem; flex-shrink: 0; }
.comms-opt__label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.comms-opt__sub   { font-size: var(--t-xs); color: var(--text-m); }
.comms-opt__box {
  width: 18px; height: 18px; border-radius: var(--r-sm); border: 2px solid var(--border-hi);
  margin-left: auto; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all var(--t-base);
}
.comms-opt.checked .comms-opt__box { background: var(--blue); border-color: var(--blue); }

/* ── UPLOAD ZONE ── */
.upload-zone {
  border: 2px dashed var(--border-hi); border-radius: var(--r-xl);
  padding: var(--s10); text-align: center; cursor: pointer;
  transition: all var(--t-base); background: var(--off);
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--blue); background: var(--blue-pale); }
.upload-zone__icon { font-size: 2.5rem; margin-bottom: var(--s3); }
.upload-zone__title { font-size: var(--t-md); font-weight: 700; color: var(--ink); margin-bottom: var(--s2); }
.upload-zone__sub   { font-size: var(--t-sm); color: var(--text-m); }
.upload-zone__btn   { margin: var(--s4) auto 0; display: inline-flex; }

.doc-list { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s5); }
.doc-item {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s3) var(--s4); font-size: var(--t-sm);
}
.doc-item__icon { font-size: 1rem; flex-shrink: 0; }
.doc-item__name { flex: 1; font-weight: 500; color: var(--ink); }
.doc-item__req  { font-size: var(--t-xs); }
.doc-item__status { flex-shrink: 0; }

/* ── MATCHING / RESULTS ── */
.matching-screen { text-align: center; padding: var(--s16) var(--s10); }
.matching-spinner {
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  animation: spin 0.9s linear infinite;
  margin: 0 auto var(--s6);
}
.matching-status { font-size: var(--t-sm); color: var(--text-s); min-height: 1.4em; transition: opacity .3s; }
.matching-steps { display: flex; gap: var(--s2); justify-content: center; margin-top: var(--s6); flex-wrap: wrap; }

.results-screen { padding: var(--s8) var(--s10); }
.results-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--s6); flex-wrap: wrap; gap: var(--s4); }
.results-header h2 { font-family: var(--font-d); font-size: var(--t-3xl); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }

.offer-list { display: flex; flex-direction: column; gap: var(--s4); }
.offer-card {
  border: 2px solid var(--border); border-radius: var(--r-xl); padding: var(--s5);
  transition: all var(--t-base) var(--ease); background: var(--white);
  position: relative;
}
.offer-card:hover { border-color: var(--blue); box-shadow: var(--sh-lg); }
.offer-card--best { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-glow); }
.offer-card__best-badge {
  position: absolute; top: -10px; left: var(--s5);
  background: var(--blue); color: var(--white);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-pill);
}
.offer-card__inner {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: start;
}
.offer-card__lender { font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-m); margin-bottom: var(--s2); }
.offer-card__rate {
  font-family: var(--font-d); font-size: var(--t-4xl); font-weight: 700;
  color: var(--ink); letter-spacing: -0.03em; line-height: 1;
}
.offer-card__rate-suffix { font-size: var(--t-md); color: var(--text-s); font-weight: 400; font-family: var(--font-b); }
.offer-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5); margin-top: var(--s4); }
.offer-meta-item__label { font-size: var(--t-xs); color: var(--text-m); margin-bottom: 2px; }
.offer-meta-item__val   { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.offer-card__actions { display: flex; flex-direction: column; gap: var(--s2); min-width: 160px; }

/* ── SIDEBAR ── */
.wizard-sidebar { display: flex; flex-direction: column; }

.sidebar-ai {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-2xl);
  overflow: hidden; box-shadow: var(--sh-sm);
  position: sticky; top: calc(var(--nav-h) + 3px + var(--s8));
  height: calc(100vh - var(--nav-h) - 3px - var(--s8) - var(--footer-h) - var(--s8));
  display: flex; flex-direction: column;
}
.sidebar-ai__head {
  background: var(--blue); padding: var(--s3) var(--s4);
  display: flex; align-items: center; gap: var(--s3); flex-shrink: 0;
}
.sidebar-ai__ava {
  width: 34px; height: 34px; background: rgba(255,255,255,.2); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 800; color: var(--white); flex-shrink: 0;
}
.sidebar-ai__name { font-weight: 700; color: var(--white); font-size: var(--t-sm); line-height: 1.2; }
.sidebar-ai__status { font-size: var(--t-xs); color: rgba(255,255,255,.7); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.sidebar-ai__status-dot { width: 6px; height: 6px; background: #4ADE80; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.sidebar-ai__controls { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.sidebar-ai__hbtn {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .14s; padding: 0; flex-shrink: 0;
  font-size: 8px; font-weight: 700; letter-spacing: -.3px;
}
.sidebar-ai__hbtn:hover { background: rgba(255,255,255,.28); }
.sidebar-ai__hbtn.active { background: rgba(255,255,255,.35); box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

/* Wave bar — TTS speaking indicator */
.sidebar-ai__wave {
  display: none; align-items: center; gap: 8px; padding: 7px 12px;
  background: rgba(37,99,235,.05); border-bottom: 1px solid rgba(37,99,235,.12);
  flex-shrink: 0;
}
.sidebar-ai__wave.show { display: flex; }
.sidebar-ai__wave-bars { display: flex; gap: 2px; align-items: flex-end; height: 16px; }
.sidebar-ai__wave-bars b {
  width: 2px; border-radius: 2px; background: var(--blue);
  animation: aiWave 1s ease-in-out infinite; transform-origin: bottom;
}
.sidebar-ai__wave-bars b:nth-child(1){ height:5px; animation-delay:0s }
.sidebar-ai__wave-bars b:nth-child(2){ height:10px; animation-delay:.1s }
.sidebar-ai__wave-bars b:nth-child(3){ height:15px; animation-delay:.2s }
.sidebar-ai__wave-bars b:nth-child(4){ height:10px; animation-delay:.3s }
.sidebar-ai__wave-bars b:nth-child(5){ height:5px; animation-delay:.4s }
@keyframes aiWave { 0%,100%{transform:scaleY(.3)} 50%{transform:scaleY(1)} }
.sidebar-ai__wave-label { font-size: 11px; font-weight: 600; color: var(--blue); flex: 1; }
.sidebar-ai__wave-stop {
  font-size: 10px; font-weight: 700; color: var(--blue);
  background: none; border: 1px solid rgba(37,99,235,.2); cursor: pointer;
  padding: 2px 8px; border-radius: 4px;
}

/* Messages — flex-fill to take remaining height */
.sidebar-ai__msgs {
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3);
  flex: 1; min-height: 0; overflow-y: auto; background: var(--off);
}
.sidebar-ai__msgs::-webkit-scrollbar { width: 3px; }
.sidebar-ai__msgs::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 2px; }

.ai-bubble {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s3) var(--s4); font-size: var(--t-xs); line-height: 1.55;
  box-shadow: var(--sh-sm); animation: fadeUp .35s var(--ease) both;
  position: relative;
}
.ai-bubble.user {
  background: var(--blue); color: var(--white); border-color: var(--blue);
  align-self: flex-end; max-width: 90%;
}
.ai-bubble__meta { font-size: 10px; opacity: .5; margin-top: 4px; }
.ai-bubble__read {
  position: absolute; right: 8px; bottom: 6px;
  font-size: 11px; cursor: pointer; opacity: 0;
  background: none; border: none; padding: 0; transition: opacity .15s;
  color: var(--blue);
}
.ai-bubble:not(.user):hover .ai-bubble__read { opacity: 1; }

/* Typing indicator */
.ai-typing {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 10px 14px; display: flex; gap: 4px; align-items: center; align-self: flex-start;
  box-shadow: var(--sh-sm);
}
.ai-typing span {
  width: 6px; height: 6px; background: var(--blue); border-radius: 50%;
  animation: aiBounce .9s ease-in-out infinite;
}
.ai-typing span:nth-child(2){ animation-delay:.15s }
.ai-typing span:nth-child(3){ animation-delay:.3s }
@keyframes aiBounce { 0%,80%,100%{transform:scale(.55)} 40%{transform:scale(1)} }

/* Quick replies */
.sidebar-ai__quick {
  padding: 8px 12px 4px; display: flex; gap: 5px; flex-wrap: wrap;
  border-top: 1px solid var(--border); background: var(--white); flex-shrink: 0;
}
.sidebar-ai__qbtn {
  font-size: 10px; font-weight: 600; padding: 4px 10px;
  border-radius: var(--r-pill, 20px);
  border: 1px solid rgba(37,99,235,.22);
  background: rgba(37,99,235,.05); color: var(--blue);
  cursor: pointer; white-space: nowrap; transition: all .14s;
}
.sidebar-ai__qbtn:hover { background: rgba(37,99,235,.12); }

/* Input */
.sidebar-ai__input {
  padding: var(--s3) var(--s4); border-top: 1px solid var(--border);
  display: flex; gap: var(--s2); background: var(--white); flex-shrink: 0;
}
.sidebar-ai__field {
  flex: 1; border: 1.5px solid var(--border); border-radius: var(--r-pill);
  padding: var(--s2) var(--s3); font-size: var(--t-xs); outline: none;
  transition: border-color var(--t-fast);
  font-family: var(--font-b);
}
.sidebar-ai__field:focus { border-color: var(--blue); }
.sidebar-ai__send {
  width: 30px; height: 30px; background: var(--blue); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: none; cursor: pointer;
}

/* Trust strip — compact bottom bar */
.sidebar-ai__trust {
  display: flex; gap: var(--s3); justify-content: center; padding: 6px var(--s3);
  border-top: 1px solid var(--border); background: var(--off);
  font-size: 9px; color: var(--text-m); flex-shrink: 0; flex-wrap: wrap;
}

/* ── CONDITIONAL FIELD CARDS ── */
.cond-section { animation: stepIn .3s var(--ease) both; }
.cond-card {
  border: 2px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s5); margin-bottom: var(--s4); background: var(--white);
}
.cond-card__title {
  font-size: var(--t-sm); font-weight: 700; color: var(--ink);
  margin-bottom: var(--s4);
}

/* ── FIELD VALIDATION ── */
.form-input.error, .form-select.error { border-color: var(--fail) !important; }
.form-input.ok,    .form-select.ok    { border-color: var(--ok); }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .wizard-body { grid-template-columns: 1fr; }
  .wizard-sidebar { display: none; }
  .loan-type-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:768px) {
  :root { --footer-h: 68px; }
  .wizard-body { padding: calc(var(--nav-h) + 3px + var(--s5)) var(--s4) calc(var(--footer-h) + var(--s6)); }
  .wizard-step { padding: var(--s5) var(--s4); }
  .loan-type-grid  { grid-template-columns: 1fr 1fr; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .comms-grid { grid-template-columns: 1fr; }
  .offer-card__inner { grid-template-columns: 1fr; }
  .offer-card__actions { flex-direction: row; flex-wrap: wrap; }
  .wizard-nav__step-label { display: none !important; }
  .wizard-nav__connector { width: 10px; }
  .wizard-nav__step { padding: var(--s2) var(--s1); }
  /* Footer bar mobile */
  .wizard-footer-bar__hint { display: none; }
  .wizard-footer-bar__inner { padding: 0 var(--s5); }
}
@media(max-width:420px) {
  :root { --footer-h: 64px; }
  .wizard-body { padding-left: var(--s3); padding-right: var(--s3); }
  .loan-type-grid { grid-template-columns: 1fr; }
  .wizard-footer-bar__inner { padding: 0 var(--s4); gap: var(--s3); }
  .wizard-footer-bar__right { gap: var(--s2); }
}
@media(min-width:1025px) {
  .wizard-nav__step-label { display: inline; }
}