/* ==========================================================================
   IPEKERP_STOREFRONT_HOME_VEHICLE_SELECTOR_HYBRID_V1

   PURPOSE
   -------
   Upgrade ONLY the left vehicle selector into the approved hybrid concept:
   - descriptive heading
   - 4-step progress
   - compact 2x2 fields on desktop
   - strong CTA
   - selected-vehicle summary

   Hero/campaign internal styling and campaign height are intentionally untouched.
   ========================================================================== */

@media (min-width: 1180px) {
  body.sf-home-concept[data-c5-live-home] .c5-hero {
    grid-template-columns: clamp(350px, 24vw, 390px) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
}

body.sf-home-concept[data-c5-live-home]
.c5-hero > aside.c5-vehicle-panel--hybrid-v1 {
  min-width: 0 !important;
  min-height: 356px !important;
  padding: 14px 14px 13px !important;

  border: 1px solid #dbe4ee !important;
  border-radius: 12px !important;
  background: #ffffff !important;

  box-shadow:
    0 8px 24px rgba(15, 42, 76, .055),
    0 1px 3px rgba(15, 42, 76, .025) !important;

  overflow: hidden !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle] {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;

  display: flex !important;
  flex-direction: column !important;

  margin: 0 !important;
  padding: 0 !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-head {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;

  margin: 0 0 9px !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-head__icon {
  width: 38px !important;
  height: 38px !important;

  display: grid !important;
  place-items: center !important;

  border: 1px solid #d8e8f9 !important;
  border-radius: 10px !important;
  background: #f3f8fe !important;
  color: #0868d7 !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-head__icon svg {
  width: 21px !important;
  height: 21px !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle] .c5-vsel-head h2 {
  margin: 0 0 3px !important;

  color: #0b274b !important;
  font-size: 17px !important;
  line-height: 1.08 !important;
  font-weight: 820 !important;
  letter-spacing: -.025em !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-head p {
  max-width: 290px !important;
  margin: 0 !important;

  color: #6b7d93 !important;
  font-size: 10.2px !important;
  line-height: 1.35 !important;
  font-weight: 560 !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-steps {
  list-style: none !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;

  margin: 0 0 8px !important;
  padding: 0 !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-steps li {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  gap: 5px !important;

  min-width: 0 !important;

  color: #8190a3 !important;
  font-size: 9.2px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-steps li:not(:last-child)::after {
  content: "" !important;

  position: absolute !important;
  z-index: 0 !important;
  top: 50% !important;
  left: 28px !important;
  right: 6px !important;

  height: 1px !important;
  background: #dbe4ee !important;

  transform: translateY(-50%) !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-steps li b {
  position: relative !important;
  z-index: 1 !important;

  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;

  display: grid !important;
  place-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid #d8e2ec !important;
  border-radius: 999px !important;
  background: #ffffff !important;

  color: #708198 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-steps li span {
  position: relative !important;
  z-index: 1 !important;

  padding-right: 4px !important;
  background: #ffffff !important;

  white-space: nowrap !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-steps li[data-state="active"] {
  color: #0868d7 !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-steps li[data-state="active"] b {
  border-color: #0868d7 !important;
  background: #0868d7 !important;
  color: #ffffff !important;

  box-shadow: 0 0 0 3px rgba(8, 104, 215, .075) !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-steps li[data-state="done"] {
  color: #315b87 !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-steps li[data-state="done"] b {
  border-color: #b9d4ee !important;
  background: #eef6ff !important;
  color: #0868d7 !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px 8px !important;

  margin: 0 0 6px !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle] label.c5-vsel-field {
  display: block !important;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-field > span {
  display: block !important;

  margin: 0 0 4px !important;

  color: #52677f !important;
  font-size: 9.6px !important;
  line-height: 1 !important;
  font-weight: 730 !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle] .c5-vsel-field select {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;

  margin: 0 !important;
  padding: 0 30px 0 10px !important;

  border: 1px solid #d8e2ec !important;
  border-radius: 7px !important;
  background-color: #ffffff !important;

  color: #173555 !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 620 !important;

  box-shadow: 0 1px 2px rgba(15, 42, 76, .018) !important;

  cursor: pointer !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle] .c5-vsel-field select:hover:not(:disabled) {
  border-color: #b9cee3 !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle] .c5-vsel-field select:focus {
  border-color: #76ace1 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(8, 104, 215, .075) !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle] .c5-vsel-field select:disabled {
  border-color: #e1e7ee !important;
  background-color: #f7f9fb !important;
  color: #8b99aa !important;

  opacity: 1 !important;
  cursor: not-allowed !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle] small.c5-vsel-status {
  display: block !important;

  min-height: 14px !important;
  margin: 0 0 6px !important;

  color: #73849a !important;
  font-size: 9.4px !important;
  line-height: 1.25 !important;
  font-weight: 560 !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle] button.c5-vsel-submit {
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  margin: 0 0 7px !important;
  padding: 0 14px !important;

  border: 0 !important;
  border-radius: 7px !important;

  background: linear-gradient(180deg, #0875df 0%, #0864c9 100%) !important;
  color: #ffffff !important;

  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 800 !important;

  box-shadow:
    0 6px 14px rgba(8, 104, 215, .14) !important;

  cursor: pointer !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle] button.c5-vsel-submit:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow:
    0 8px 18px rgba(8, 104, 215, .18) !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle] button.c5-vsel-submit:disabled {
  background: #cad6e3 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-summary {
  min-height: 46px !important;

  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;

  margin-top: auto !important;
  padding: 7px 9px !important;

  border: 1px solid #e0e8f0 !important;
  border-radius: 8px !important;
  background: #f9fbfd !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vsel-summary[data-ready="true"] {
  border-color: #cfe2f5 !important;
  background: #f6faff !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-summary__icon {
  width: 27px !important;
  height: 27px !important;

  display: grid !important;
  place-items: center !important;

  border: 1px solid #d7e3ee !important;
  border-radius: 999px !important;
  background: #ffffff !important;

  color: #9aabbd !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vsel-summary[data-ready="true"] .c5-vsel-summary__icon {
  border-color: #b9daf9 !important;
  background: #eaf5ff !important;
  color: #0870da !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-summary__copy {
  min-width: 0 !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-summary__copy strong,
body.sf-home-concept[data-c5-live-home] .c5-vsel-summary__copy small {
  display: block !important;

  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-summary__copy strong {
  margin: 0 0 2px !important;

  color: #24405f !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 780 !important;
}

body.sf-home-concept[data-c5-live-home] .c5-vsel-summary__copy small {
  margin: 0 !important;

  color: #77899d !important;
  font-size: 8.9px !important;
  line-height: 1.1 !important;
  font-weight: 560 !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle]
button.c5-vsel-summary__change {
  width: auto !important;
  min-width: 0 !important;
  min-height: 28px !important;
  height: 28px !important;

  margin: 0 !important;
  padding: 0 7px !important;

  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;

  color: #0868d7 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 760 !important;

  box-shadow: none !important;
  cursor: pointer !important;
}

body.sf-home-concept[data-c5-live-home]
.c5-vehicle-panel--hybrid-v1 [data-c5-vehicle]
button.c5-vsel-summary__change:hover {
  background: #eaf4ff !important;
}


/* Tablet: keep the approved responsive hero behavior; selector fields stack. */
@media (min-width: 821px) and (max-width: 1179px) {
  body.sf-home-concept[data-c5-live-home] .c5-vsel-fields {
    grid-template-columns: 1fr !important;
  }

  body.sf-home-concept[data-c5-live-home]
  .c5-hero > aside.c5-vehicle-panel--hybrid-v1 {
    min-height: 0 !important;
    height: auto !important;
  }

  body.sf-home-concept[data-c5-live-home] .c5-vsel-steps li span {
    display: none !important;
  }
}


/* Mobile: existing project layer already stacks aside above banner. */
@media (max-width: 820px) {
  body.sf-home-concept[data-c5-live-home]
  .c5-hero > aside.c5-vehicle-panel--hybrid-v1 {
    min-height: 0 !important;
    height: auto !important;
    padding: 14px !important;
  }

  body.sf-home-concept[data-c5-live-home] .c5-vsel-fields {
    grid-template-columns: 1fr !important;
  }

  body.sf-home-concept[data-c5-live-home] .c5-vsel-head p {
    max-width: none !important;
  }
}