@import url('/commercial/runtime/jim-glover-dodge/consumer/styles-core.css');

/* P1.11 left-panel offer state progression: example → pending → real offer. */
body.dai-embedded #visualOfferAmount {
  font-size: 0;
}
body.dai-embedded #visualOfferAmount::after {
  content: '—';
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.04em;
}
body.dai-embedded #visualOfferNote {
  font-size: 0;
}
body.dai-embedded #visualOfferNote::before {
  content: 'Offer pending';
  display: block;
  margin: 2px 0 7px;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .01em;
}
body.dai-embedded #visualOfferNote::after {
  content: 'Your value will appear after the evaluation.';
  font-size: 11px;
  line-height: 1.4;
}
body.dai-embedded:has(#startBtn:disabled) #visualOfferAmount::after,
body.dai-embedded:has(.step[data-step='2'].active) #visualOfferAmount::after,
body.dai-embedded:has(.step[data-step='3'].active) #visualOfferAmount::after,
body.dai-embedded:has(.step[data-step='4'].active) #visualOfferAmount::after,
body.dai-embedded:has(.step[data-step='5'].active) #visualOfferAmount::after,
body.dai-embedded:has(.step[data-step='6'].active) #visualOfferAmount::after {
  content: '$ —';
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
body.dai-embedded:has(#startBtn:disabled) #visualOfferNote::after {
  content: 'Identifying your vehicle...';
}
body.dai-embedded:has(.step[data-step='2'].active) #visualOfferNote::after,
body.dai-embedded:has(.step[data-step='3'].active) #visualOfferNote::after,
body.dai-embedded:has(.step[data-step='4'].active) #visualOfferNote::after,
body.dai-embedded:has(.step[data-step='5'].active) #visualOfferNote::after,
body.dai-embedded:has(.step[data-step='6'].active) #visualOfferNote::after {
  content: 'Vehicle identified. Complete the remaining steps to calculate your offer.';
}
body.dai-embedded:has(#offerState:not(.hidden)) #visualOfferAmount {
  font-size: 34px;
}
body.dai-embedded:has(#offerState:not(.hidden)) #visualOfferAmount::after,
body.dai-embedded:has(#offerState:not(.hidden)) #visualOfferNote::after {
  content: '';
}
body.dai-embedded:has(#offerState:not(.hidden)) #visualOfferNote::before {
  content: '';
  display: none;
}
body.dai-embedded:has(#offerState:not(.hidden)) #visualOfferNote {
  font-size: 11px;
}

/* Temporary P1.11 review hero. Replace through the dealer hero-vehicle slot later. */
body.dai-embedded .hero-vehicle-stage:has(.hero-vehicle-image.hidden) .hero-vehicle-fallback {
  display: none;
}
body.dai-embedded .hero-vehicle-stage:has(.hero-vehicle-image.hidden)::before {
  content: '';
  position: absolute;
  inset: 0 0 18px;
  pointer-events: none;
  background: center bottom / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%20220%22%3E%3Cellipse%20cx%3D%22260%22%20cy%3D%22190%22%20rx%3D%22170%22%20ry%3D%2215%22%20fill%3D%22rgba(23,32,43,.10)%22%2F%3E%3Cpath%20d%3D%22M104%20154%20L116%20102%20Q120%2082%20145%2073%20L201%2058%20H354%20Q377%2059%20392%2077%20L422%20111%20Q439%20119%20446%20139%20L441%20166%20H95%20Z%22%20fill%3D%22%23ffffff%22%20stroke%3D%22%23e85a2a%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M204%2067%20H280%20V105%20H180%20Z%22%20fill%3D%22%23dfe5ea%22%20stroke%3D%22%23708090%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M292%2067%20H348%20Q363%2069%20373%2082%20L392%20105%20H292%20Z%22%20fill%3D%22%23dfe5ea%22%20stroke%3D%22%23708090%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M149%2074%20L174%2066%20H192%20L167%20105%20H132%20Z%22%20fill%3D%22%23dfe5ea%22%20stroke%3D%22%23708090%22%20stroke-width%3D%224%22%2F%3E%3Crect%20x%3D%22115%22%20y%3D%22122%22%20width%3D%2258%22%20height%3D%2225%22%20rx%3D%227%22%20fill%3D%22%23fff2ec%22%20stroke%3D%22%23e85a2a%22%20stroke-width%3D%224%22%2F%3E%3Crect%20x%3D%22411%22%20y%3D%22125%22%20width%3D%2228%22%20height%3D%2218%22%20rx%3D%225%22%20fill%3D%22%23fff2ec%22%20stroke%3D%22%23e85a2a%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M190%20114%20H278%20M292%20114%20H374%22%20stroke%3D%22%239aa6b2%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M235%20116%20V158%20M330%20116%20V158%22%20stroke%3D%22%23bac2cb%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M126%20151%20H419%22%20stroke%3D%22%23d6dce2%22%20stroke-width%3D%223%22%2F%3E%3Ccircle%20cx%3D%22158%22%20cy%3D%22166%22%20r%3D%2230%22%20fill%3D%22%2329333e%22%2F%3E%3Ccircle%20cx%3D%22158%22%20cy%3D%22166%22%20r%3D%2214%22%20fill%3D%22%23cbd2d9%22%2F%3E%3Ccircle%20cx%3D%22386%22%20cy%3D%22166%22%20r%3D%2230%22%20fill%3D%22%2329333e%22%2F%3E%3Ccircle%20cx%3D%22386%22%20cy%3D%22166%22%20r%3D%2214%22%20fill%3D%22%23cbd2d9%22%2F%3E%3Crect%20x%3D%22246%22%20y%3D%22122%22%20width%3D%227%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%239aa6b2%22%2F%3E%3Crect%20x%3D%22339%22%20y%3D%22122%22%20width%3D%227%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%239aa6b2%22%2F%3E%3C%2Fsvg%3E");
}
body.dai-embedded .hero-vehicle-stage:has(.hero-vehicle-image:not(.hidden))::before {
  display: none;
}

/* P1.12: reserve a dedicated vehicle image zone at every width. Decoded vehicle
   text stays below the image in normal flow so future provider imagery cannot
   collide with the metadata card, regardless of vehicle proportions. */
body.dai-embedded .hero-vehicle-stage {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 -4px 18px;
}
body.dai-embedded .hero-vehicle-stage:has(.hero-vehicle-image.hidden)::before {
  position: relative;
  inset: auto;
  flex: 0 0 180px;
  width: 100%;
  height: 180px;
  margin-bottom: 10px;
  background-position: center bottom;
  background-size: contain;
}
body.dai-embedded .hero-vehicle-image,
body.dai-embedded .hero-vehicle-fallback {
  flex: 0 0 180px;
  width: 100%;
  height: 180px;
  object-fit: contain;
  object-position: center bottom;
  margin-bottom: 10px;
}
body.dai-embedded .visual-vehicle-meta {
  position: relative;
  left: auto;
  bottom: auto;
  width: auto;
  max-width: none;
  margin: 0 7px;
  padding: 9px 11px;
}
body.dai-embedded .visual-vehicle-meta span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

/* P1.11 bottom benefit strip: stronger, optically centered icons. */
body.dai-embedded .experience-benefit {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  padding-top: 18px;
  padding-bottom: 18px;
}
body.dai-embedded .benefit-icon {
  width: 44px;
  height: 44px;
  justify-self: center;
  align-self: center;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  font-size: 0;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
body.dai-embedded .benefit-icon::before {
  display: block;
  line-height: 1;
  text-align: center;
  transform: translateY(4px);
}
body.dai-embedded .experience-benefit:nth-child(1) .benefit-icon::before {
  content: '✓';
  font-size: 23px;
  font-weight: 800;
}
body.dai-embedded .experience-benefit:nth-child(2) .benefit-icon::before {
  content: '◷';
  font-size: 25px;
  font-weight: 700;
}
body.dai-embedded .experience-benefit:nth-child(3) .benefit-icon::before {
  content: '$';
  font-size: 22px;
  font-weight: 800;
}

@media (max-width: 720px) {
  body.dai-embedded .hero-vehicle-stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 14px;
  }
  body.dai-embedded .hero-vehicle-stage:has(.hero-vehicle-image.hidden)::before {
    position: relative;
    inset: auto;
    flex: 0 0 132px;
    width: 100%;
    height: 132px;
    margin-bottom: 8px;
  }
  body.dai-embedded .hero-vehicle-image,
  body.dai-embedded .hero-vehicle-fallback {
    flex: 0 0 auto;
    height: 132px;
    margin-bottom: 8px;
  }
  body.dai-embedded .visual-vehicle-meta {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: none;
    margin: 0 4px;
    padding: 9px 11px;
  }
  body.dai-embedded .visual-card-stack {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  body.dai-embedded .condition-card,
  body.dai-embedded .trust-card {
    min-width: 0;
  }
  body.dai-embedded .trust-card {
    display: block;
    grid-column: auto;
  }
  body.dai-embedded .condition-card,
  body.dai-embedded .trust-card {
    padding: 12px;
  }
  body.dai-embedded .condition-card h3,
  body.dai-embedded .trust-card h3 {
    font-size: 12px;
  }
  body.dai-embedded .trust-card p,
  body.dai-embedded .visual-checklist {
    font-size: 10px;
  }
  body.dai-embedded .experience-benefit {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
  }
  body.dai-embedded .benefit-icon {
    width: 40px;
    height: 40px;
  }
}

/* Customer UI simplification: hero imagery is opt-in. Keep the dealer identity,
   vehicle summary and value visible even when the lifestyle image is disabled. */
.customer-hero-optional {
  display: none !important;
}
body.dai-show-hero .customer-hero-optional {
  display: flex !important;
}
body.dai-embedded .visual-brand {
  min-height: 88px;
  margin-bottom: 18px;
}
body.dai-embedded .dealer-logo-image {
  max-width: min(320px, 88%);
  max-height: 84px;
}
body.dai-embedded .visual-vehicle-meta {
  margin: 0 0 14px;
  padding: 11px 13px;
}
body.dai-embedded .visual-card-stack {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 720px) {
  body.dai-embedded .visual-brand {
    min-height: 82px;
    margin-bottom: 14px;
  }
  body.dai-embedded .dealer-logo-image {
    max-width: min(280px, 92%);
    max-height: 76px;
  }
}


/* Keep customer vehicle/value summaries out of the first screen until the
   vehicle lookup succeeds. */
.customer-summary {
  display: none !important;
}
body.dai-vehicle-identified .customer-summary {
  display: block !important;
}
body.dai-vehicle-identified .visual-card-stack.customer-summary {
  display: grid !important;
}


/* Step 3 simplification: keep compact native dropdowns, but break the
   questionnaire into short visual groups and collapse optional details. */
.condition-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e3e7eb;
}
.condition-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.condition-section > h3 {
  margin: 0 0 13px;
  font-size: 15px;
  line-height: 1.25;
  color: #344054;
  letter-spacing: -.01em;
}
.condition-optional {
  margin-top: 22px;
  border: 1px solid #d7dde4;
  border-radius: 9px;
  background: #fafbfc;
  overflow: hidden;
}
.condition-optional > summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: #344054;
}
.condition-optional > summary::-webkit-details-marker {
  display: none;
}
.condition-optional > summary::after {
  content: '+';
  order: 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eef1f4;
  color: #526071;
  font-size: 18px;
  line-height: 1;
}
.condition-optional[open] > summary::after {
  content: '−';
}
.condition-optional > summary small {
  margin-left: auto;
  color: #7a8696;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.condition-optional-body {
  padding: 4px 15px 16px;
  border-top: 1px solid #e3e7eb;
}
.condition-optional-body .question-grid {
  padding-top: 15px;
}

@media (max-width: 720px) {
  .condition-section {
    margin-top: 17px;
    padding-top: 15px;
  }
  .condition-section > h3 {
    margin-bottom: 11px;
    font-size: 14px;
  }
  .condition-section .question-grid,
  .condition-optional .question-grid {
    gap: 13px;
  }
  .condition-optional {
    margin-top: 18px;
  }
  .condition-optional > summary {
    min-height: 54px;
    padding: 14px;
  }
  .condition-optional-body {
    padding: 2px 14px 15px;
  }
}


/* Keep the three customer reassurance items side by side at every viewport. */
@media (max-width: 720px) {
  body.dai-embedded .experience-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.dai-embedded .experience-benefit {
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 6px;
    min-width: 0;
    padding: 12px 7px;
    text-align: center;
  }
  body.dai-embedded .experience-benefit + .experience-benefit {
    border-top: 0;
    border-left: 1px solid #edf0f3;
  }
  body.dai-embedded .benefit-icon {
    width: 32px;
    height: 32px;
  }
  body.dai-embedded .experience-benefit strong {
    font-size: 11px;
    line-height: 1.2;
  }
  body.dai-embedded .experience-benefit > div > span {
    margin-top: 3px;
    font-size: 8.5px;
    line-height: 1.3;
  }
  body.dai-embedded .experience-benefit:nth-child(1) .benefit-icon::before {
    font-size: 18px;
  }
  body.dai-embedded .experience-benefit:nth-child(2) .benefit-icon::before {
    font-size: 19px;
  }
  body.dai-embedded .experience-benefit:nth-child(3) .benefit-icon::before {
    font-size: 18px;
  }
}


/* Commercial rooftop lifestyle hero: approved desktop + narrow treatment. */
body.dai-embedded.dai-rooftop-hero .hero-vehicle-stage{
  margin:2px -4px 18px;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  overflow:visible;
}
body.dai-embedded.dai-rooftop-hero .hero-vehicle-image{
  display:block;
  flex:0 0 auto;
  width:100%;
  height:clamp(260px,22vw,340px);
  object-fit:cover;
  object-position:center center;
  filter:none;
  margin-bottom:0;
  border-radius:14px;
  box-shadow:0 14px 34px rgba(16,24,40,.15);
}
body.dai-embedded.dai-rooftop-hero .hero-vehicle-image.hidden{display:none!important}
body.dai-embedded.dai-rooftop-hero .visual-vehicle-meta{
  position:relative;
  left:auto;
  bottom:auto;
  width:auto;
  max-width:none;
  margin:11px 4px 0;
  padding:9px 11px;
}

/* Before a real valuation exists, keep value state quiet and secondary. */
body.dai-embedded .offer-preview-card{
  color:#344054;
  border:1px solid #dce2e7;
  background:#f8fafb;
  box-shadow:0 8px 22px rgba(16,24,40,.06);
}
body.dai-embedded .offer-preview-card .visual-card-label,
body.dai-embedded .offer-preview-card small{color:#667085;opacity:1}
body.dai-embedded #visualOfferAmount{color:#344054}

/* A real value restores the strong rooftop-brand treatment. */
body.dai-embedded:has(#offerState:not(.hidden)) .offer-preview-card{
  color:#fff;
  border:0;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  box-shadow:0 13px 30px color-mix(in srgb,var(--brand) 24%,transparent);
}
body.dai-embedded:has(#offerState:not(.hidden)) .offer-preview-card .visual-card-label,
body.dai-embedded:has(#offerState:not(.hidden)) .offer-preview-card small{color:#fff;opacity:.9}
body.dai-embedded:has(#offerState:not(.hidden)) #visualOfferAmount{color:#fff}

/* The existing persistent Need help? control belongs to the customer journey.
   Keep its final loaded state on the rooftop primary brand color instead of the
   darker secondary brand token used by the injected customer-UX stylesheet. */
body.dai-embedded .dai-help-toggle{
  background:var(--brand,#d60000)!important;
}
body.dai-embedded .dai-help-toggle:hover,
body.dai-embedded .dai-help-toggle:focus-visible{
  filter:brightness(.96);
}

@media(max-width:920px){
  body.dai-embedded.dai-rooftop-hero .hero-vehicle-image{height:clamp(230px,34vw,300px)}
}
@media(max-width:720px){
  body.dai-embedded.dai-rooftop-hero .hero-vehicle-image{height:220px;border-radius:11px}
  body.dai-embedded.dai-rooftop-hero .visual-vehicle-meta{margin-top:9px}
}