/* Quote loading, result and recovery views. Presentation only; values stay bound to existing quote state. */
:root {
  --quote-highlight: #83dfbf;
  --quote-ink-soft: color-mix(in srgb, var(--ds-on-inverse) 72%, transparent);
  --quote-surface-soft: color-mix(in srgb, var(--ds-accent) 7%, var(--ds-surface));
}

.eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--ds-text-tertiary);
  font-size: var(--type-caption-size);
  font-weight: 750;
  letter-spacing: .055em;
}

/* The illustration loops only while the real quote request is pending. */
.quote-loading {
  width: min(100%, 480px);
  margin: clamp(var(--space-8), 10vh, var(--space-16)) auto 0;
  padding-bottom: var(--space-8);
  animation: quoteEnter var(--motion-normal) var(--motion-ease) both;
}
.quote-loading-copy { text-align: center; }
.quote-loading-copy .eyebrow { color: var(--ds-accent); }
.quote-loading-copy h1.big {
  max-width: none;
  margin: 0 auto var(--space-3);
  font-size: clamp(1.75rem, calc(var(--app-canvas-width) * 0.07), 2.125rem);
  line-height: 1.3;
}
.quote-loading-copy .lead { margin: 0; }
.quote-visual {
  width: min(100%, 360px);
  margin: var(--space-5) auto var(--space-2);
  overflow: hidden;
}
.quote-visual-svg { display: block; width: 100%; height: auto; overflow: visible; }
.visual-shadow { fill: color-mix(in srgb, var(--ds-text) 10%, transparent); transform-origin: center; animation: shadowBreathe 2.8s var(--motion-ease) infinite; }
.visual-road { fill: none; stroke: var(--ds-border); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 10; animation: roadMove 1.5s linear infinite; }
.visual-car { transform-origin: 160px 120px; animation: carFloat 2.8s var(--motion-ease) infinite; }
.car-body { fill: var(--ds-inverse); }
.car-glass { fill: var(--ds-accent-soft); stroke: color-mix(in srgb, var(--ds-on-inverse) 28%, transparent); stroke-width: 2; }
.car-divider,.car-door { fill: none; stroke: color-mix(in srgb, var(--ds-on-inverse) 28%, transparent); stroke-width: 2; stroke-linecap: round; }
.car-light { fill: none; stroke: var(--quote-highlight); stroke-width: 4; stroke-linecap: round; }
.car-wheel { fill: var(--ds-text); stroke: var(--ds-bg); stroke-width: 3; }
.wheel-core { fill: var(--ds-border); }
.visual-spark { fill: var(--ds-accent); transform-box: fill-box; transform-origin: center; animation: sparkPulse 2s var(--motion-ease) infinite; }
.spark-two { animation-delay: .55s; }
.visual-dot { fill: var(--ds-accent); opacity: .45; animation: dotPulse 1.8s ease-in-out infinite; }

.quote-loading-status,
.quote-loading-result,
.quote-loading-error {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--ds-text-secondary);
  font-size: var(--type-body-small-size);
  font-weight: 650;
  text-align: center;
}
.status-indicator { width: 20px; height: 20px; display: grid; place-items: center; }
.status-indicator::before,.status-indicator i {
  content: "";
  grid-area: 1 / 1;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--ds-accent);
}
.status-indicator::before { opacity: .22; animation: statusPulse 1.25s ease-out infinite; }
.status-indicator i { animation: statusBeat 1.25s ease-in-out infinite; }
.quote-loading-result,.quote-loading-error { display: none; }
.quote-loading-result { color: var(--ds-positive); }
.quote-loading-error { color: var(--ds-negative); }
.result-check,.result-cross { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--ds-accent-soft); }
.result-check svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.result-cross { color: var(--ds-negative); background: color-mix(in srgb, var(--ds-negative) 12%, var(--ds-surface)); font-weight: 800; }
.quote-loading[data-status="success"] .quote-loading-status,
.quote-loading[data-status="error"] .quote-loading-status { display: none; }
.quote-loading[data-status="success"] .quote-loading-result,
.quote-loading[data-status="error"] .quote-loading-error { display: flex; animation: quoteEnter var(--motion-fast) var(--motion-ease) both; }
.quote-loading[data-status="success"] .visual-car { animation: carArrive var(--motion-normal) var(--motion-ease) both; }
.quote-loading[data-status="error"] .visual-car { animation: carSettle var(--motion-fast) var(--motion-ease) both; }

.result-layout { animation: quoteEnter var(--motion-normal) var(--motion-ease) both; }
.result-eyebrow { margin-bottom: var(--space-3); color: var(--ds-accent); }
.result-layout .hero {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ds-on-inverse) 8%, transparent);
}
.result-layout .hero::after {
  content: "";
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--quote-highlight);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--quote-highlight) 16%, transparent);
}
.result-layout .hero .lab { color: var(--quote-ink-soft); }
.result-layout .hero .big { margin-bottom: var(--space-4); }
.result-car { font-size: var(--type-headline-size); font-weight: 750; letter-spacing: -.03em; }
.result-terms { margin-top: var(--space-1); color: var(--quote-ink-soft); font-size: var(--type-body-small-size); line-height: 1.5; }
.result-residual { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--ds-on-inverse) 16%, transparent); color: var(--quote-ink-soft); font-size: var(--type-body-small-size); }
.result-residual b { color: var(--ds-on-inverse); font-size: var(--type-body-size); font-variant-numeric: tabular-nums; }
.dev-mode-badge { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: color-mix(in srgb, var(--ds-warning) 10%, var(--ds-surface)); color: var(--ds-warning); font-size: var(--type-caption-size); line-height: 1.55; }
.dev-mode-dot { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 4px; border-radius: var(--radius-full); background: currentColor; }
.result-list-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.result-list-heading .eyebrow { margin: 0 0 var(--space-1); color: var(--ds-text-tertiary); }
.result-list-heading .sec { margin: 0; color: var(--ds-text); font-size: var(--type-headline-size); font-weight: 750; letter-spacing: -.03em; }
.result-count { padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--ds-border-subtle); color: var(--ds-text-secondary); font-size: var(--type-caption-size); font-weight: 700; white-space: nowrap; }
.lender.rev .st { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.lender.rev .result-monthly-label { color: var(--ds-text-tertiary); font-size: 10px; font-weight: 600; line-height: 1.2; }
.lender.rev .result-monthly-value { white-space: nowrap; }
.lender.rev .result-monthly-value small { margin-left: 1px; font-size: var(--type-caption-size); font-weight: 600; }

.quote-error {
  max-width: 480px;
  min-height: min(54svh, 410px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin: 0 auto;
  padding: var(--space-8) 0;
  animation: quoteEnter var(--motion-normal) var(--motion-ease) both;
}
.error-mark { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: var(--space-5); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--ds-negative) 10%, var(--ds-surface)); color: var(--ds-negative); }
.error-mark svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.quote-error .eyebrow { color: var(--ds-negative); }
.quote-error h1.big { margin-bottom: var(--space-3); }
.quote-error .lead { max-width: 36ch; margin-bottom: var(--space-4); word-break: normal; }
.quote-error-note { margin: 0; color: var(--ds-text-tertiary); font-size: var(--type-caption-size); }
.cta-in:has(> .btn:only-child) .btn { flex: 1 1 100%; }

@keyframes quoteEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes carFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes shadowBreathe { 0%,100% { opacity: .72; transform: scaleX(1); } 50% { opacity: .45; transform: scaleX(.94); } }
@keyframes roadMove { to { stroke-dashoffset: -30; } }
@keyframes sparkPulse { 0%,100% { opacity: .45; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes dotPulse { 0%,100% { opacity: .3; transform: scale(.85); } 50% { opacity: .85; transform: scale(1.1); } }
@keyframes statusPulse { 0% { opacity: .34; transform: scale(.65); } 100% { opacity: 0; transform: scale(2.5); } }
@keyframes statusBeat { 0%,100% { transform: scale(.92); } 50% { transform: scale(1.08); } }
@keyframes carArrive { from { transform: translateY(3px) scale(.99); } to { transform: translateY(0) scale(1); } }
@keyframes carSettle { from { transform: translateX(3px); } to { transform: translateX(0); } }



@media (max-width: 359px) {
  .quote-loading { margin-top: var(--space-6); }
  .quote-visual { width: min(100%, 300px); margin-block: var(--space-4) 0; }
  .result-layout .hero::after { top: var(--space-4); right: var(--space-4); }
  .lender.rev { grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-2); }
}