/* AutoAssist design polish: CTA hierarchy, desktop layout, readable results.
   Loaded after the inline <style>; relies on specificity + !important only where
   the inline skin already uses !important. */

/* 1. Set Vehicle: same blue glow family as primary CTA */
#setVehicleBtn {
  width: 100%; justify-content: center; padding: 14px; font-size: 15px; font-weight: 800;
  color: #fff; border: 0 !important; border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%) !important;
  box-shadow: 0 0 20px rgba(45,212,191,.25), 0 8px 24px rgba(59,130,246,.20);
  cursor: pointer; transition: box-shadow .15s, transform .1s;
  animation: none !important; will-change: auto;
}
#setVehicleBtn:hover { box-shadow: 0 0 28px rgba(45,212,191,.40), 0 10px 32px rgba(59,130,246,.30); }
#setVehicleBtn:active { transform: scale(.98); }

/* Get My Free Estimate: same blue glow family (was green) */
#genBtn {
  background: linear-gradient(135deg, #3b82f6 0%, #2dd4bf 100%) !important;
  box-shadow: 0 0 20px rgba(45,212,191,.25), 0 8px 24px rgba(59,130,246,.20) !important;
}
#genBtn:hover:not(:disabled) {
  box-shadow: 0 0 28px rgba(45,212,191,.40), 0 10px 32px rgba(59,130,246,.30) !important;
}
#genBtn:disabled { background: rgba(148,163,184,.20) !important; box-shadow: none !important; }

/* 2. One main action at a time. Book a Certified Shop is a quiet secondary,
   and no longer pulses. */
#findShopBtn {
  animation: none !important; transform: none;
  background: transparent !important; color: #cbd5e1;
  border: 1px solid rgba(96,165,250,.35) !important; box-shadow: none;
  font-weight: 700;
}
#findShopBtn:hover { background: rgba(59,130,246,.12) !important; color: #fff; }
/* On results, booking is the main next action until a repair is selected;
   then the existing My Estimate action takes priority. Parts remain secondary. */
main:has(#jobsList > .job):not(:has(#jobsList > .job.approved)) #findShopBtn {
  background: linear-gradient(135deg, #3b82f6, #2dd4bf) !important;
  color: #fff;
  box-shadow: 0 0 20px rgba(59,130,246,.2);
}
.job .find-parts-btn {
  background: transparent;
  color: #93c5fd;
  border: 1px solid rgba(96,165,250,.35);
  box-shadow: none;
  animation: none;
}
.job .find-parts-btn:hover { background: rgba(59,130,246,.12); box-shadow: none; }
/* Quiet the estimate pulse once results exist so it does not compete with Set Vehicle / shop */
#genBtn:not(:disabled) { animation: none !important; }
/* While a vehicle is not yet set, the estimate row should not glow competitively */
#genBtn:disabled { animation: none !important; }
/* Upgrade remains available without competing with the estimate task. */
#premiumSection #premCta {
  background: rgba(59,130,246,.08) !important;
  border: 1px solid rgba(96,165,250,.35) !important;
  box-shadow: none !important;
  color: #93c5fd;
}
#premiumSection #premCta:hover {
  background: rgba(59,130,246,.16) !important;
  box-shadow: none !important;
}
/* Existing reveal/results state determines which action receives emphasis. */
main:has(#issueCard.reveal) #setVehicleBtn,
main:has(#jobsList > .job) #genBtn {
  background: rgba(59,130,246,.08) !important;
  border: 1px solid rgba(96,165,250,.35) !important;
  box-shadow: none !important;
  color: #cbd5e1;
}
main:has(#issueCard.reveal) #setVehicleBtn:hover,
main:has(#jobsList > .job) #genBtn:hover:not(:disabled) {
  background: rgba(59,130,246,.16) !important;
  box-shadow: none !important;
}

/* Mobile order preserved: trust block sits after the flow */
#dpAside { display: contents; }
#dpAside .footer-rp { order: 80; }
#dpAside .footer-tagline { order: 81; }
#findShopBtn { order: 82; }
#premiumSection { order: 90; }
/* Next Steps already contains booking; removing .show alone cannot hide the
   standalone control because its base rule is display:flex. */
main:has(#nextSteps:not(:empty)) #findShopBtn { display: none !important; }
/* Preserve the two-button results row while letting long labels wrap within it. */
#resultActions .ra-btn { min-width: 0; white-space: normal; }
#resultActions .ra-btn span { min-width: 0; overflow-wrap: anywhere; }

/* 3. Compact sticky nav on smaller laptops (centered links kept) */
@media (min-width: 761px) and (max-width: 1280px) {
  #p6Nav .p6-nav-in { padding: 2px 12px; }
  #p6Nav .p6-nav-in a { min-height: 32px; font-size: 12px; padding: 0 12px; }
}

/* Desktop: one centered column. Headline, vehicle form, actions, then steps strip. */
@media (min-width: 1024px) {
  main#p6Main {
    max-width: 820px; padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 16px;
  }
  main#p6Main > * { order: 0; }
  main#p6Main > .card, #setVehicleRow, #generateRow, #jobsSection, #resultActions,
  #carGenius, #nextSteps { width: 100%; max-width: 720px; align-self: center; box-sizing: border-box; }
  main#p6Main > .top-pitch { text-align: center; }
  #dpAside {
    display: grid; grid-template-columns: minmax(0, 1fr) 44px 150px; align-items: center;
    width: 100%; max-width: 760px; align-self: center; box-sizing: border-box;
    gap: 12px; order: 5 !important; padding: 12px 4px;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,.1));
  }
  #dpAside .how-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; padding: 0;
    font-size: 11px; margin: 0;
  }
  #dpAside .how-strip-step { gap: 5px; min-width: 0; white-space: nowrap; }
  #dpAside .how-strip-step span:last-child { white-space: nowrap; font-size: 12px; }
  #dpAside .how-strip-arrow { display: none; }
  #dpAside .how-strip-num { width: 20px; height: 20px; font-size: 11px; flex-shrink: 0; }
  #dpAside .footer-rp, #dpAside .footer-tagline { order: 0; margin: 0 !important; text-align: left; }
  #dpAside .footer-rp img { width: 44px; height: auto; display: block; }
  #dpAside .footer-tagline { white-space: normal; text-wrap: balance; font-size: 11px; line-height: 1.5; }
  #jobsSection, #resultActions, #carGenius, #nextSteps { order: 10 !important; }
  #findShopBtn { order: 20 !important; width: 100%; max-width: 360px; align-self: center; }
  #premiumSection { order: 30 !important; }
  #jobsList { grid-template-columns: minmax(0, 1fr); }
  body, button, input, select, textarea { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
  /* Only the current flow action glows. Decode, shop and supporting actions stay flat. */
  button, a, .btn-primary, .cg-call, .rp-book, .ns-cta {
    animation: none !important; box-shadow: none !important;
  }
  main:not(:has(#issueCard.reveal)) #setVehicleBtn,
  main:has(#issueCard.reveal):not(:has(#jobsList > .job)) #genBtn:not(:disabled),
  body:has(#jobsList > .job.approved) #openSummaryBtn {
    box-shadow: 0 0 20px rgba(59,130,246,.25) !important;
  }
  main:has(#jobsList > .job):not(:has(#jobsList > .job.approved)) #findShopBtn.show {
    box-shadow: 0 0 20px rgba(59,130,246,.2) !important;
  }
  #findShopBtn, .cg-call, .rp-book, .ns-cta, .ns-seeall {
    background: rgba(59,130,246,.1); border: 1px solid rgba(96,165,250,.35); color: #bfdbfe;
  }
  .rp-shop-spec, .sdir-tag {
    background: rgba(96,165,250,.1); color: #cbd5e1; border: 1px solid rgba(96,165,250,.25);
  }
  /* The missing-ZIP prompt and See all shops open the same sheet; show only one. */
  #nextSteps:has(.ns-zip-prompt) > .ns-seeall { display: none; }
  /* Currency is part of each amount; avoid a third, disconnected dollar icon. */
  .price-row .price-icon { display: none; }
  .job .price-row { flex-wrap: nowrap; align-items: end; }
  .job .price-sep { align-self: end; padding-bottom: 7px; }
}

/* A quiet save action at both natural save moments; never another glowing CTA. */
.save-vehicle-panel {
  background: rgba(59,130,246,.04);
  border: 1px solid rgba(96,165,250,.22);
  box-shadow: none;
}
.save-vehicle-panel .svp-text { color: #aebdd0; font-size: 12px; font-weight: 500; }
.save-vehicle-panel button {
  background: transparent; color: #bfdbfe;
  border: 1px solid rgba(96,165,250,.45);
  box-shadow: none; animation: none;
}
.save-vehicle-panel button:hover:not(:disabled) { background: rgba(59,130,246,.12); }
#vehicleSaveSlot { margin-top: 12px; }
#vehicleSaveSlot .save-vehicle-panel { margin-top: 0; }
#vehicleSaveSlot .save-vehicle-panel button { flex-shrink: 0; }

/* Keep each mobile label on one line without squeezing numbers beside text. */
@media (max-width: 1023px) {
  #dpAside .how-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px; padding: 10px 0;
  }
  #dpAside .how-strip-step { flex-direction: column; gap: 5px; min-width: 0; }
  #dpAside .how-strip-step span:last-child { white-space: nowrap; font-size: 9.5px; }
  #dpAside .how-strip-arrow { display: none; }
}

/* Static CSS washes only: no assets, animation, filters, or side content. */
@media (min-width: 1024px) {
  body {
    background-color: #080e1a;
    background-image:
      radial-gradient(ellipse 25% 700px at 0% 350px, rgba(59,130,246,.10), transparent 100%),
      radial-gradient(ellipse 25% 800px at 100% 500px, rgba(45,212,191,.07), transparent 100%);
    background-repeat: no-repeat;
  }
}
/* Booking: single obvious CTA, flat and non-pulsing; glow only on current primary. */
.job .find-parts-btn, #findShopBtn { animation: none !important; }
.price-field input { white-space: nowrap; }
.price-sep { margin: 0 2px; }

/* 4. Results: readable lines + scannable prices */
#jobsSection { scroll-margin-top: 68px; }
.job .explanation { max-width: 68ch; line-height: 1.6; }
.job .price-row { font-variant-numeric: tabular-nums; gap: 12px; flex-wrap: wrap; }
.job .price-field { font-variant-numeric: tabular-nums; font-weight: 800; }
.job .price-field input { font-variant-numeric: tabular-nums; }
.job .price-sep { opacity: .55; }
@media (min-width: 1024px) {
  .job-body { padding: 18px 20px; gap: 14px; }
  .job-name { font-size: 16.5px; }
  .job .explanation { font-size: 14px; }
}
#summaryBody { font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  #summarySheet .sheet-body, #summaryBody { max-width: 720px; margin-left: auto; margin-right: auto; }
}