/*
 * Home v367 — canonical MAUTO Insurance rail.
 *
 * One visual contract is shared by desktop, tablet and mobile: the shield,
 * brand and explanation stay together while the four stages remain on one
 * horizontal rail.
 */
#device-shell .insurance-flow-shell {
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  align-items: stretch !important;
  min-height: 88px !important;
  column-gap: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(80, 156, 126, 0.22) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.97), rgba(239, 251, 246, 0.92)),
    url("../img/pearl-card-backgrounds/pearl-blue-card-wide.png") center / 100% 100% no-repeat !important;
  box-shadow: 0 12px 30px rgba(32, 84, 76, 0.08), inset 0 1px 0 #fff !important;
}

#device-shell .insurance-flow-shell .insurance-trigger {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 13px 8px 13px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  transform: none !important;
}

#device-shell .insurance-flow-shell .insurance-trigger-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  align-self: center !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#device-shell .insurance-flow-shell .insurance-trigger-icon svg {
  width: 32px !important;
  height: 32px !important;
  fill: rgba(32, 170, 98, 0.06) !important;
  stroke: #18a05d !important;
  stroke-width: 1.8 !important;
}

#device-shell .insurance-flow-shell .insurance-trigger-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  align-self: center !important;
  gap: 5px !important;
  min-width: 0 !important;
}

#device-shell .insurance-flow-shell .insurance-trigger-copy strong {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.24em !important;
  margin: 0 !important;
  color: #173957 !important;
  font-size: 21px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  white-space: nowrap !important;
}

#device-shell .insurance-flow-shell .insurance-gold {
  color: #a8741c !important;
  font: inherit !important;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8) !important;
}

#device-shell .insurance-flow-shell .insurance-trigger-copy small {
  display: block !important;
  max-width: 228px !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #5f7885 !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: normal !important;
}

#device-shell .insurance-flow-shell .insurance-trigger-action,
#device-shell .insurance-flow-shell .insurance-stage-index,
#device-shell .insurance-flow-shell .insurance-stage-icon,
#device-shell .insurance-flow-shell .insurance-stages small {
  display: none !important;
}

#device-shell .insurance-flow-shell .insurance-stages,
#device-shell .insurance-flow-shell .insurance-stages[hidden] {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 12px !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 8px 14px 8px 4px !important;
  overflow: visible !important;
}

#device-shell .insurance-flow-shell .insurance-stages > li {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  min-width: 0 !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 8px 6px !important;
  overflow: visible !important;
  border: 1px solid rgba(93, 146, 169, 0.16) !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  text-align: center !important;
}

#device-shell .insurance-flow-shell .insurance-stages > li > div {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  align-self: center !important;
  justify-self: stretch !important;
  min-width: 0 !important;
}

#device-shell .insurance-flow-shell .insurance-stages strong {
  display: block !important;
  max-width: 100% !important;
  overflow: visible !important;
  color:var(--mauto-ds-color-primary,#3c78da) !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#device-shell .insurance-flow-shell .insurance-stages > li.is-complete strong {
  color: #159b59 !important;
}

#device-shell .insurance-flow-shell .insurance-stages > li:not(:last-child)::after {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  left: 100% !important;
  display: block !important;
  width: 12px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(89, 145, 188, 0.18), rgba(48, 122, 181, 0.34), rgba(89, 145, 188, 0.18)) !important;
  content: "" !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 1024px) {
  #device-shell[data-device="tablet"] .insurance-flow-shell {
    grid-template-columns: 224px minmax(0, 1fr) !important;
    min-height: 82px !important;
    column-gap: 8px !important;
  }

  #device-shell[data-device="tablet"] .insurance-flow-shell .insurance-trigger {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 11px 6px 11px 13px !important;
  }

  #device-shell[data-device="tablet"] .insurance-flow-shell .insurance-trigger-icon {
    width: 30px !important;
    height: 30px !important;
  }

  #device-shell[data-device="tablet"] .insurance-flow-shell .insurance-trigger-icon svg {
    width: 28px !important;
    height: 28px !important;
  }

  #device-shell[data-device="tablet"] .insurance-flow-shell .insurance-trigger-copy strong {
    font-size: 18px !important;
  }

  #device-shell[data-device="tablet"] .insurance-flow-shell .insurance-trigger-copy small {
    max-width: 170px !important;
    font-size: 10px !important;
  }

  #device-shell[data-device="tablet"] .insurance-flow-shell .insurance-stages,
  #device-shell[data-device="tablet"] .insurance-flow-shell .insurance-stages[hidden] {
    gap: 9px !important;
    padding: 7px 10px 7px 3px !important;
  }

  #device-shell[data-device="tablet"] .insurance-flow-shell .insurance-stages > li {
    min-height: 52px !important;
    padding-inline: 4px !important;
    border-radius: 15px !important;
  }

  #device-shell[data-device="tablet"] .insurance-flow-shell .insurance-stages strong {
    font-size: 12px !important;
  }

  #device-shell[data-device="tablet"] .insurance-flow-shell .insurance-stages > li:not(:last-child)::after {
    width: 9px !important;
  }
}

@media (max-width: 760px) {
  #device-shell[data-device="mobile"] .insurance-flow-shell {
    grid-template-columns: 148px minmax(0, 1fr) !important;
    min-height: 62px !important;
    column-gap: 4px !important;
    border-radius: 17px !important;
  }

  #device-shell[data-device="mobile"] .insurance-flow-shell .insurance-trigger {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 7px 5px 7px 8px !important;
  }

  #device-shell[data-device="mobile"] .insurance-flow-shell .insurance-trigger-icon {
    width: 22px !important;
    height: 22px !important;
  }

  #device-shell[data-device="mobile"] .insurance-flow-shell .insurance-trigger-icon svg {
    width: 21px !important;
    height: 21px !important;
  }

  #device-shell[data-device="mobile"] .insurance-flow-shell .insurance-trigger-copy {
    gap: 3px !important;
  }

  #device-shell[data-device="mobile"] .insurance-flow-shell .insurance-trigger-copy strong {
    font-size: 13px !important;
  }

  #device-shell[data-device="mobile"] .insurance-flow-shell .insurance-trigger-copy small {
    max-width: 106px !important;
    max-height: none !important;
    font-size: 7px !important;
    line-height: 1.16 !important;
  }

  #device-shell[data-device="mobile"] .insurance-flow-shell .insurance-stages,
  #device-shell[data-device="mobile"] .insurance-flow-shell .insurance-stages[hidden] {
    gap: 4px !important;
    padding: 5px 6px 5px 2px !important;
  }

  #device-shell[data-device="mobile"] .insurance-flow-shell .insurance-stages > li {
    min-height: 50px !important;
    padding: 4px 1px !important;
    border-radius: 12px !important;
  }

  #device-shell[data-device="mobile"] .insurance-flow-shell .insurance-stages strong {
    font-size: 8.5px !important;
    line-height: 1.08 !important;
  }

  #device-shell[data-device="mobile"] .insurance-flow-shell .insurance-stages > li:not(:last-child)::after {
    width: 5px !important;
  }
}

@media (forced-colors: active) {
  #device-shell .insurance-flow-shell .insurance-stages > li:not(:last-child)::after {
    background: CanvasText !important;
  }
}