/* Marvel pixel port — HeaderV5 / MotorLanding* / HealthLandingTrustBrandFooter / MMV / QuoteList.
   Values copied from h5-common styled-components (pxToRem at 16px root = same px). */

@font-face {
  font-family: 'Inter Subset';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fast/fonts/interSubset/inter-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Subset';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fast/fonts/interSubset/inter-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Subset';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fast/fonts/interSubset/inter-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Subset';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fast/fonts/interSubset/inter-bold.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fast/fonts/interSubset/inter-regular.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fast/fonts/interSubset/inter-medium.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fast/fonts/interSubset/inter-semibold.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fast/fonts/interSubset/inter-bold.woff2') format('woff2');
}

html[data-fast-route]:not([data-fast-route='react']),
html[data-fast-route]:not([data-fast-route='react']) body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--pi-surface-level-4, #f5f5f5);
  font-family: Inter, 'Inter var', system-ui, sans-serif;
  color: var(--pi-text-neutral-strong, #282828);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Kill iOS/Android grey-blue tap flash on the whole document (portals too). */
  -webkit-tap-highlight-color: transparent;
}

/* User-driven scrolls feel smooth; route enter uses resetScrollTopInstant (behavior:auto). */
html[data-fast-route]:not([data-fast-route='react']) {
  scroll-behavior: smooth;
}

html[data-fast-route]:not([data-fast-route='react']) *,
html[data-fast-route]:not([data-fast-route='react']) *::before,
html[data-fast-route]:not([data-fast-route='react']) *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/*
 * Mouse/touch click must not leave a lingering blue focus ring (Chrome UA).
 * Keyboard users still get :focus-visible — same pattern as Marvel MotorButton.
 */
html[data-fast-route]:not([data-fast-route='react']) button,
html[data-fast-route]:not([data-fast-route='react']) [role='button'],
html[data-fast-route]:not([data-fast-route='react']) a,
html[data-fast-route]:not([data-fast-route='react']) summary,
html[data-fast-route]:not([data-fast-route='react']) input,
html[data-fast-route]:not([data-fast-route='react']) select,
html[data-fast-route]:not([data-fast-route='react']) textarea {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

html[data-fast-route]:not([data-fast-route='react']) button:focus,
html[data-fast-route]:not([data-fast-route='react']) [role='button']:focus,
html[data-fast-route]:not([data-fast-route='react']) a:focus {
  outline: none;
}

html[data-fast-route]:not([data-fast-route='react']) button:focus:not(:focus-visible),
html[data-fast-route]:not([data-fast-route='react']) [role='button']:focus:not(:focus-visible),
html[data-fast-route]:not([data-fast-route='react']) a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

html[data-fast-route]:not([data-fast-route='react']) button:focus-visible,
html[data-fast-route]:not([data-fast-route='react']) [role='button']:focus-visible {
  outline: 2px solid var(--pi-primary-medium, #1576db);
  outline-offset: 2px;
}

/* Soft press — avoid a hard opacity flash when CTAs disable mid-tap. */
html[data-fast-route]:not([data-fast-route='react']) .fast-cta:active:not(:disabled),
html[data-fast-route]:not([data-fast-route='react']) .fast-pd-continue:active:not(:disabled),
html[data-fast-route]:not([data-fast-route='react']) .fast-cmp-select:active:not(:disabled),
html[data-fast-route]:not([data-fast-route='react']) .fast-fs-cta:active:not(:disabled) {
  opacity: 0.92;
  transform: scale(0.985);
}

html[data-fast-route]:not([data-fast-route='react']) .fast-cta:disabled,
html[data-fast-route]:not([data-fast-route='react']) .fast-pd-continue:disabled,
html[data-fast-route]:not([data-fast-route='react']) .fast-cmp-select:disabled {
  /* Keep full paint while in-flight loaders/dots show — dim only truly idle disabled. */
  opacity: 0.5;
}

html[data-fast-route]:not([data-fast-route='react']) .fast-cta[aria-busy='true']:disabled,
html[data-fast-route]:not([data-fast-route='react']) .fast-pd-continue[aria-busy='true']:disabled,
html[data-fast-route]:not([data-fast-route='react']) .fast-cmp-select[aria-busy='true']:disabled {
  opacity: 1;
}

/* Landing, MMV, quotes, and review stay on the fast shells. CRA #root is post-pay only. */
html[data-fast-route]:not([data-fast-route='react']) #root {
  display: none !important;
}

/*
 * Phase 5: #fast-root hosts PrepayApp (sheets/dialogs); shells stay LCP paint.
 * Keep the host out of layout; <dialog> uses top layer.
 */
#fast-root {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
html[data-fast-surface='react'] #fast-root {
  display: none !important;
}

.fast-shell,
.fast-sheet,
.fast-policies,
.fast-snackbar {
  font-family: Inter, 'Inter var', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fast-shell button,
.fast-sheet button,
.fast-policies button,
.fast-compare-tray button {
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.fast-shell input,
.fast-sheet input {
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.fast-shell[hidden],
.fast-policies[hidden],
.fast-snackbar[hidden] {
  display: none !important;
}

/*
 * HTML-first LCP: all four shells ship without [hidden]. Classifier sets
 * data-fast-route in <head> before body parses; inactive shells stay display:none
 * (no JS / DOMContentLoaded / CRA defer wait).
 */
html:not([data-fast-route='landing']) #fast-landing,
html:not([data-fast-route='mmv']) #fast-mmv,
html:not([data-fast-route='quotes']) #fast-quotes,
html:not([data-fast-route='checkout']) #fast-checkout {
  display: none !important;
}

/*
 * Automation hold (CRA PageLoader parity): data-fast-route=resolving hides every
 * journey shell above; show a full-viewport loader until /resolver/automation lands.
 */
.fast-automation-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--pi-surface-white, #fff);
}
/* resolving / data-fast-automation beat [hidden] so head-time apply paints before body JS. */
html[data-fast-route='resolving'] #fast-automation-loader,
html[data-fast-automation='1'] #fast-automation-loader {
  display: flex !important;
}
.fast-automation-loader[hidden] {
  display: none !important;
}
html[data-fast-route='resolving'] #fast-automation-loader[hidden],
html[data-fast-automation='1'] #fast-automation-loader[hidden] {
  display: flex !important;
}
.fast-automation-loader-inner {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fast-automation-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pi-color-primary, #00baf2);
  animation: fast-automation-bounce 0.8s infinite ease-in-out both;
}
.fast-automation-dot:nth-child(1) {
  animation-delay: -0.32s;
  background: var(--pi-legacy-brand-secondary-color);
}
.fast-automation-dot:nth-child(2) {
  animation-delay: -0.16s;
  background: var(--pi-brand-primary);
}
.fast-automation-dot:nth-child(3) {
  animation-delay: 0s;
  background: var(--pi-brand-primary);
}
@keyframes fast-automation-bounce {
  0%,
  80%,
  100% {
    transform: scale(0.3);
  }
  40% {
    transform: scale(1);
  }
}

/* Quotes snackbar lives outside #fast-quotes — keep it route-scoped. */
html:not([data-fast-route='quotes']) #fast-snackbar-quotes {
  display: none !important;
}

/* While route CSS is in flight, do not paint the pending shell (classifier sets this). */
html[data-fast-css-pending='mmv'] #fast-mmv,
html[data-fast-css-pending='quotes'] #fast-quotes,
html[data-fast-css-pending='checkout'] #fast-checkout {
  display: none !important;
}

html[data-vehicle='fourWheeler'] [data-copy='bike'],
html[data-vehicle='twoWheeler'] [data-copy='car'] {
  display: none;
}

.fast-shell {
  min-height: 100dvh;
  background: var(--pi-surface-level-4, #f5f5f5);
  color: var(--pi-text-neutral-strong, #282828);
}

.fast-shell ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Lists that need Marvel inset padding must beat `.fast-shell ul` (0,1,1). */

/* ── HeaderV5 logo bar (Figma 9004:42360) ── */
.fast-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  background: var(--pi-surface-level-3, #f5f5f5);
  overflow: visible;
  align-self: stretch;
  box-sizing: border-box;
}

.fast-header-bar {
  position: relative;
  width: 100%;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--pi-surface-level-3, #f5f5f5);
}

.fast-back {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--pi-text-neutral-strong, #282828);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fast-brand-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 56px;
  padding: 10px 23px;
  max-width: calc(100% - 72px);
  pointer-events: none;
}

.fast-logo {
  display: block;
  width: 114px;
  height: 36px;
  max-height: 36px;
  object-fit: contain;
}



.fast-cta {
  height: 52px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 40px;
  background: var(--pi-background-primary-strong, #004299);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  text-shadow: none;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}

/*
 * Primary CTAs on blue fills must stay white even when tokens are late, landing.css
 * redefines .fast-cta after this file, or a host WebView forces buttontext / fill
 * from body color (#282828). !important beats later route-sheet color decls.
 */
html[data-fast-route]:not([data-fast-route='react']) button.fast-cta,
html[data-fast-route]:not([data-fast-route='react']) button.fast-pd-continue,
html[data-fast-route]:not([data-fast-route='react']) button.fast-cmp-select,
html[data-fast-route]:not([data-fast-route='react']) button.fast-rp-pay,
html[data-fast-route]:not([data-fast-route='react']) button.fast-fs-cta,
html[data-fast-route]:not([data-fast-route='react']) button.fast-quotes-state-cta {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

/*
 * Review & Pay sticky bar — LIVE IN BASE so cold open / soft-nav stall paint before
 * checkout.css arrives. Without this, .fast-rp-footer is in-flow under the title
 * while the page box has no 100dvh height yet (screenshot: bar parked mid-top).
 */
html[data-fast-route='checkout'] .fast-checkout-page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  background: var(--pi-surface-level-4, #f5f5f5);
}

html[data-fast-route='checkout'] .fast-rp-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  width: 100%;
  box-sizing: border-box;
  background: var(--pi-surface-level-1, #ffffff);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0px -4px 24px rgba(0, 0, 0, 0.1);
}

html[data-fast-route='checkout'] .fast-rp-body--footer {
  padding-bottom: 112px;
}

html[data-fast-route='checkout'] .fast-rp-pay {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

.fast-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fast-secondary {
  width: 100%;
  height: 44px;
  border: none;
  background: none;
  color: var(--pi-background-primary-strong, #004299);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}

.fast-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── FoundVehicleBottomSheet + generic sheets ── */
/* @@ui:BottomSheet */
/* FastBottomSheet chrome — inlined into shell.css base via publish (@@ui:BottomSheet).
 * Keep class names stable for openSheet / pixel parity. */

/* Closed <dialog> must stay display:none — any display:* on the base class leaks it into page flow. */
dialog.fast-sheet:not([open]),
dialog.fast-sww-sheet:not([open]),
dialog.fast-kebab-sheet:not([open]) {
  display: none !important;
}

.fast-sheet {
  width: min(100%, 480px);
  max-width: 100%;
  margin: auto 0 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  padding: 0 0 24px;
  background: var(--pi-surface-level-3, #f5f5f5);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
  /* Survive accidental mount under #fast-root { pointer-events: none }. */
  pointer-events: auto;
}

.fast-sheet::backdrop {
  background: rgba(16, 16, 16, 0.7);
}

.fast-sheet[open] {
  animation: fast-sheet-up 280ms var(--fast-sheet-ease, cubic-bezier(0.32, 0.72, 0, 1));
}

@keyframes fast-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.fast-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: var(--pi-icon-neutral-weak, #cacaca);
  margin: 8px auto 0;
}

.fast-sheet-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 8px 16px;
  box-sizing: border-box;
}

.fast-sheet-title-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 28px;
}

.fast-sheet h2 {
  margin: 0;
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--pi-text-neutral-strong, #282828);
  text-align: center;
}

.fast-sheet-close {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  padding: 0;
  flex-shrink: 0;
  color: var(--pi-text-neutral-moderate, #414244);
}

.fast-sheet-sub {
  margin: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--pi-text-neutral-moderate, #414244);
  text-align: center;
}

.fast-sheet-body {
  padding: 0 16px;
  box-sizing: border-box;
  width: 100%;
}

.fast-sheet-foot {
  padding: 16px 16px 0;
  box-sizing: border-box;
  width: 100%;
}
/* @@/ui:BottomSheet */

/* ── Something went wrong (stage landing SWW sheet) ── */
.fast-sww-sheet {
  width: min(100%, 480px);
  max-width: 100%;
  margin: auto 0 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  padding: 0;
  background: var(--pi-surface-level-1, #ffffff);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
}

.fast-sww-sheet::backdrop {
  background: var(--pi-overlay, rgba(16, 16, 16, 0.7));
}

.fast-sww-sheet[open] {
  animation: fast-sheet-up 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.fast-sww-handle {
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: var(--pi-icon-neutral-weak, #cacaca);
  margin: 8px auto 0;
}

.fast-sww-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 16px;
}

@supports (-webkit-touch-callout: none) {
  .fast-sww-body {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

.fast-sww-title {
  margin: 0;
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--pi-text-neutral-strong, #282828);
  text-align: center;
}

.fast-sww-sub {
  margin: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--pi-text-neutral-moderate, #414244);
  text-align: center;
}

.fast-sww-retry {
  margin-top: 8px;
}

.fast-sww-dismiss {
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--pi-background-primary-strong, #004299);
  cursor: pointer;
  text-align: center;
}

/* Ownership found sheet — Marvel BottomSheet padding-bottom via FooterNote, not dialog. */
#fast-sheet-found.fast-sheet,
.fast-found-sheet.fast-sheet {
  padding-bottom: 0;
}

.fast-found-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 0;
  gap: 16px;
}

.fast-found-card {
  /* Marvel VehicleCard — Surface/Level 2 on Level-3 sheet. */
  background: var(--pi-surface-level-2, #ffffff);
  border-radius: 24px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* Dark: Level-2 token can collapse into Level-3 — lift card like Marvel #303030. */
html[data-theme='dark'] .fast-found-card {
  background: var(--fast-surface-sheet, #303030) !important;
}

.fast-found-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.fast-found-img-wrap {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

#fast-found-img {
  width: 100%;
  max-height: 76px;
  object-fit: contain;
  object-position: bottom center;
}

.fast-found-img-wrap .fast-found-img-fallback {
  width: 120px;
  height: 76px;
  border-radius: 4px;
  background: var(--pi-surface-muted, #eef1f6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fast-found-img-wrap .fast-found-img-fallback .fast-resume-img-fallback-icon {
  width: 75%;
  height: 75%;
  object-fit: contain;
  pointer-events: none;
}

.fast-found-brand {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--pi-text-neutral-strong, #282828);
  text-align: center;
}

.fast-found-model {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--pi-text-neutral-strong, #282828);
  text-align: center;
}

.fast-found-rows {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}

.fast-found-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.fast-found-label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--pi-text-neutral-medium, #7e7e7e);
  text-align: center;
}

.fast-found-value {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--pi-text-neutral-strong, #282828);
  text-align: center;
}

.fast-found-divider {
  width: 100%;
  height: 1px;
  background: var(--pi-border-neutral-weak, #ebebeb);
}

/* Marvel ChangeVariantLink — 12/500 primaryMedium (not .fast-secondary 14/600). */
.fast-found-change {
  border: none;
  background: none;
  padding: 0;
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--pi-primary-medium, #1576db);
  text-align: center;
  cursor: pointer;
}

.fast-found-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* Marvel MotorButton stroke under View Plans — must live in base (landing loads
 * base+landing only; quotes.css is not on the landing route). */
.fast-found-other {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pi-background-primary-strong, #004299);
  border-radius: 40px;
  background: var(--pi-surface-level-1, #ffffff);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: var(--pi-background-primary-strong, #004299);
  text-align: center;
  cursor: pointer;
}

html[data-theme='dark'] .fast-found-other {
  background: var(--pi-surface-level-1, #1c1c1e);
}

/* Marvel FooterNote — margin-bottom lg under CTAs. */
.fast-found-src {
  margin: 0 0 16px;
  text-align: center;
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: var(--pi-text-neutral-medium, #7e7e7e);
  width: 100%;
}

/*
 * Claim card (optional — Marvel showClaimQuestion). Must NOT set display:flex on the
 * base id or it overrides HTML [hidden] and always paints (inflates ownership sheet).
 */
#fast-found-claim[hidden] {
  display: none !important;
}

#fast-found-claim:not([hidden]) {
  background: var(--pi-surface-level-1, #ffffff);
  border-radius: 24px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

#fast-found-claim p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--pi-text-neutral-strong, #282828);
}

.fast-row-btns {
  display: flex;
  gap: 12px;
}

/* Marvel ClaimChip — compact pills, not full-width 44px rows. */
.fast-row-btns button {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 32px;
  height: auto;
  padding: 6px 12px;
  border: 1px solid var(--pi-border-offset-1-strong, #e8e1e1);
  border-radius: 40px;
  background: var(--pi-surface-level-1, #fff);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--pi-text-neutral-moderate, #414244);
  cursor: pointer;
}

.fast-row-btns button.is-selected,
.fast-row-btns button[aria-pressed='true'] {
  border-color: var(--pi-background-offset-2-strong, #d8e7f7);
  color: var(--pi-primary-medium, #1576db);
  background: var(--pi-background-offset-2-medium, #ecf2f8);
  font-weight: 600;
}

#fast-found-view[aria-busy='true'],
#fast-found-view:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── MotorResumeCardMenu (Figma 5352:32625 / 5324:71064 / 5413:28007) ── */
.fast-kebab-sheet {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  max-height: none;
}

.fast-kebab-sheet::backdrop {
  background: var(--pi-overlay, rgba(16, 16, 16, 0.7));
}

.fast-kebab-sheet[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: transparent;
  animation: none;
}

.fast-kebab-action-wrap {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 16px;
}

@supports (-webkit-touch-callout: none) {
  .fast-kebab-action-wrap {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

.fast-kebab-action-wrap[hidden] {
  display: none !important;
}

.fast-kebab-action-items {
  width: 100%;
  background: var(--pi-surface-level-1, #ffffff);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fast-kebab-action-row {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--pi-text-neutral-strong, #282828);
  cursor: pointer;
}

.fast-kebab-action-row.has-divider {
  border-bottom: 1px solid var(--pi-border-neutral-weak, #ebebeb);
}

.fast-kebab-close-btn {
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: var(--pi-surface-level-1, #ffffff);
  border: none;
  border-radius: 12px;
  text-align: center;
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--pi-text-neutral-strong, #282828);
  cursor: pointer;
}

.fast-kebab-standard {
  width: 100%;
  max-width: 376px;
  box-sizing: border-box;
  background: var(--pi-surface-level-3, #f5f5f5);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fast-kebab-standard[hidden] {
  display: none !important;
}

.fast-kebab-standard-inner {
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fast-kebab-feedback-inner {
  gap: 16px;
}

.fast-kebab-title-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.fast-kebab-title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--pi-text-neutral-strong, #282828);
  word-break: break-word;
}

.fast-kebab-sub {
  margin: 0;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--pi-text-neutral-medium, #7e7e7e);
}

.fast-kebab-x {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  cursor: pointer;
}

.fast-kebab-btns {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fast-kebab-primary,
.fast-kebab-outline {
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  cursor: pointer;
}

.fast-kebab-primary {
  background: var(--pi-background-primary-strong, #004299);
  border: none;
  color: var(--pi-text-universal-light, #ffffff);
}

.fast-kebab-primary.is-disabled,
.fast-kebab-primary[aria-disabled='true'] {
  opacity: 0.4;
  pointer-events: none;
}

.fast-kebab-outline {
  background: var(--pi-surface-level-1, #ffffff);
  border: 1px solid var(--pi-background-primary-strong, #004299);
  color: var(--pi-background-primary-strong, #004299);
}

.fast-kebab-reasons {
  width: 100%;
  box-sizing: border-box;
  background: var(--pi-surface-level-1, #ffffff);
  border-radius: 24px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
}

.fast-kebab-reason {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 0;
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: var(--pi-text-neutral-strong, #282828);
  cursor: pointer;
}

.fast-kebab-reason.has-divider {
  border-bottom: 1px solid var(--pi-border-neutral-weak, #ebebeb);
}

.fast-kebab-reason-label {
  flex: 1 1 0;
  min-width: 0;
}

.fast-kebab-check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Crect x='3.75' y='3.75' width='16.5' height='16.5' rx='4.25' stroke='%23B0B0B0' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.fast-kebab-reason[aria-checked='true'] .fast-kebab-check {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Crect x='3' y='3' width='18' height='18' rx='5' fill='%23004299'/%3E%3Cpath d='M8 12.4l2.6 2.6L16 9' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.fast-kebab-home-indicator {
  width: 134px;
  height: 5px;
  margin: 8px 0;
  border-radius: 100px;
  background: var(--pi-text-neutral-deep, #101010);
  flex: 0 0 auto;
}

.fast-sheet > .fast-cta,
.fast-sheet > .fast-secondary,
.fast-sheet .fast-found-actions .fast-cta,
.fast-sheet .fast-found-actions .fast-secondary {
  margin-top: 0;
}

.fast-sheet > p {
  margin: 0 16px 12px;
  font-size: 14px;
  line-height: 20px;
  color: var(--pi-text-neutral-moderate, #414244);
  text-align: center;
}

.fast-sheet > .fast-cta,
.fast-sheet > .fast-secondary {
  width: calc(100% - 32px);
  margin-left: 16px;
  margin-right: 16px;
  margin-top: 8px;
}

/* Marvel MotorProductMismatchBottomSheet / MotorCommercialTwoWheelerBlockSheet */
.fast-mismatch-sheet {
  background: var(--pi-surface-level-3, #f5f5f5);
  border-radius: 16px 16px 0 0;
  padding-bottom: 0;
}

.fast-mismatch-body,
.fast-commercial-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 16px;
  box-sizing: border-box;
}

/* Marvel MotorCommercialTwoWheelerBlockSheet Content — text/CTA left; icon centered. */
.fast-commercial-sheet {
  position: relative;
  background: var(--pi-surface-level-3, #f5f5f5);
  border-radius: 16px 16px 0 0;
  padding-bottom: 0;
}

.fast-commercial-body {
  align-items: flex-start;
}

/* Marvel BottomSheet CloseBtn — absolute top-right. */
.fast-commercial-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--pi-surface-muted, #f0f0f0);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pi-text-neutral-moderate, #414244);
  cursor: pointer;
}

@supports (-webkit-touch-callout: none) {
  .fast-mismatch-body,
  .fast-commercial-body {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
}

.fast-mismatch-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fast-mismatch-sheet .fast-mismatch-copy h2,
.fast-commercial-sheet .fast-commercial-body h2,
.fast-mismatch-copy h2,
.fast-commercial-body h2 {
  margin: 0;
  font-family: var(--pi-font-family, Inter, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--pi-text-neutral-strong, #282828);
  text-align: left;
}

.fast-mismatch-sheet .fast-mismatch-copy p,
.fast-commercial-sheet .fast-commercial-body p,
.fast-mismatch-copy p,
.fast-commercial-body p {
  margin: 0;
  font-family: var(--pi-font-family, Inter, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--pi-text-neutral-moderate, #414244);
  text-align: left;
}

.fast-mismatch-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--pi-surface-level-1, #ffffff);
  border-radius: 24px;
  padding: 16px 16px 24px;
}

.fast-mismatch-vehicle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fast-mismatch-img-wrap {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 4px;
  background: transparent;
}

#fast-mismatch-img {
  max-width: 112px;
  max-height: 83px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.fast-mismatch-img-fallback {
  width: 112px;
  height: 83px;
  border-radius: 8px;
  background: var(--pi-surface-level-4, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Author `display: flex` beats UA [hidden] — without this, fallback + year col stay painted. */
.fast-mismatch-img-fallback[hidden],
.fast-mismatch-detail[hidden],
#fast-mismatch-img[hidden],
.fast-mismatch-make[hidden],
.fast-mismatch-model[hidden],
.fast-mismatch-variant[hidden] {
  display: none !important;
}

.fast-mismatch-img-fallback .fast-resume-img-fallback-icon {
  width: 75%;
  height: 75%;
  object-fit: contain;
  pointer-events: none;
}

.fast-mismatch-make {
  margin: 0;
  font-family: var(--pi-font-family, Inter, sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--pi-text-neutral-strong, #282828);
  text-align: center;
}

.fast-mismatch-model {
  margin: 0;
  font-family: var(--pi-font-family, Inter, sans-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--pi-text-neutral-strong, #282828);
  text-align: center;
}

.fast-mismatch-variant {
  margin: 0;
  font-family: var(--pi-font-family, Inter, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--pi-text-neutral-moderate, #414244);
  text-align: center;
}

.fast-mismatch-details {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.fast-mismatch-detail {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.fast-mismatch-detail-lab {
  font-family: var(--pi-font-family, Inter, sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: var(--pi-text-neutral-medium, #7e7e7e);
}

.fast-mismatch-detail-val {
  font-family: var(--pi-font-family, Inter, sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--pi-text-neutral-strong, #282828);
}

.fast-mismatch-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Marvel MotorButton stroke — outlined secondary CTA */
.fast-mismatch-actions .fast-secondary,
.fast-commercial-body .fast-secondary {
  height: 52px;
  border: 1px solid var(--pi-background-primary-strong, #004299);
  border-radius: 40px;
  background: var(--pi-surface-level-1, #ffffff);
  color: var(--pi-background-primary-strong, #004299);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}

#fast-mismatch-switch[aria-busy='true'],
#fast-mismatch-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.fast-commercial-icon {
  align-self: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--pi-surface-level-1, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(16, 16, 16, 0.08);
  flex-shrink: 0;
}

.fast-commercial-icon-img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.fast-commercial-body p strong {
  font-weight: 600;
  color: var(--pi-text-neutral-strong, #282828);
}

.fast-commercial-body .fast-cta {
  width: 100%;
}


/* Marvel MotorWaveDotLoaderOverlay — full-screen frosted 5-dot wave (Figma 5853:97834). */

.fast-wave-overlay {
  position: fixed;
  inset: 0;
  z-index: 1102;
  /* Stay hidden until paintBusy clears [hidden]. Do NOT use :not([hidden]) alone —
     mount without the attr would flash dots over the quotes Lottie / PAYD card. */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--pi-surface-frosted-level-3, rgba(255, 255, 255, 0.72));
  touch-action: none;
  overscroll-behavior: none;
}

html[data-fast-busy='1'] .fast-wave-overlay:not([hidden]) {
  display: flex;
}

.fast-wave-overlay[hidden] {
  display: none !important;
}

.fast-wave-dots {
  display: flex;
  align-items: center;
  gap: 4.8px;
}

.fast-wave-dots span {
  border-radius: 50%;
  animation: fast-wave-dot 1.4s ease-in-out infinite;
}

/* brandSecondary #012A72 ×3 then brandPrimary #00B8F5 ×2 — Marvel DOT_CONFIG */
.fast-wave-dots span:nth-child(1) {
  width: 9.6px;
  height: 9.6px;
  background: var(--pi-legacy-brand-secondary-color, #012a72);
  animation-delay: 0ms;
}
.fast-wave-dots span:nth-child(2) {
  width: 12.8px;
  height: 12.8px;
  background: var(--pi-legacy-brand-secondary-color, #012a72);
  animation-delay: 140ms;
}
.fast-wave-dots span:nth-child(3) {
  width: 16px;
  height: 16px;
  background: var(--pi-legacy-brand-secondary-color, #012a72);
  animation-delay: 280ms;
}
.fast-wave-dots span:nth-child(4) {
  width: 12.8px;
  height: 12.8px;
  background: var(--pi-brand-primary, #00b8f5);
  animation-delay: 420ms;
}
.fast-wave-dots span:nth-child(5) {
  width: 9.6px;
  height: 9.6px;
  background: var(--pi-brand-primary, #00b8f5);
  animation-delay: 560ms;
}

@keyframes fast-wave-dot {
  0%,
  100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fast-wave-dots span {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* BusyLayer — disable primary CTAs while any busy token is held. */
html[data-fast-busy='1'] .fast-cta,
html[data-fast-busy='1'] [data-busy-cta] {
  pointer-events: none;
  opacity: 0.55;
  cursor: wait;
}

html[data-fast-busy='1'] .fast-cta:disabled,
html[data-fast-busy='1'] [data-busy-cta]:disabled {
  opacity: 0.4;
}

/* Marvel MotorSettleWaitSheet — shared by quotes select-plan + R&P Pay Now (PITE-13001).
 * Must stay portal/sibling of route shells — never nest under overflow:hidden flex pages. */

.fast-settle-scrim {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--pi-overlay, rgba(16, 16, 16, 0.7));
  touch-action: none;
  overscroll-behavior: none;
  box-sizing: border-box;
}

.fast-settle-scrim[hidden] {
  display: none;
}

.fast-settle-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  /* Android WebView can report non-zero safe-area while already clear of nav. */
  padding: 24px 24px 32px;
  background: var(--pi-surface-level-1, #ffffff);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
  animation: fast-settle-rise 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@supports (-webkit-touch-callout: none) {
  .fast-settle-sheet {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
}

@keyframes fast-settle-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.fast-settle-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fast-settle-ring {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  color: var(--pi-icon-primary-medium, #00baf2);
}

.fast-settle-ring-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--pi-icon-neutral-weak, #e2e2e2);
  border-top-color: var(--pi-universal-primary-strong, #00baf2);
  animation: fast-settle-spin 1.6s linear infinite;
}

@keyframes fast-settle-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fast-settle-sheet {
    animation: none;
  }
  .fast-settle-ring-spin {
    animation: none;
  }
}

.fast-settle-glyph {
  position: absolute;
  inset: 0;
  margin: auto;
  color: var(--pi-icon-primary-medium, #00baf2);
}

.fast-settle-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fast-settle-copy h2 {
  margin: 0;
  font-family: var(--pi-font-family, Inter, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--pi-text-primary, #1d2b36);
  text-align: left;
}

.fast-settle-copy p {
  margin: 0;
  font-family: var(--pi-font-family, Inter, sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--pi-text-secondary, #53687a);
  text-align: left;
}

.fast-settle-guard {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--pi-notice-bg-weak, #fff8e8);
}

.fast-settle-guard span {
  font-family: var(--pi-font-family, Inter, sans-serif);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--pi-text-notice, #b36b00);
}

.fast-settle-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

/* Continue CTA in-button wave dots (Marvel CONTINUE_DOT_CONFIG — white on blue). */
.fast-pd-continue-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4.8px;
  min-height: 20px;
}

.fast-pd-continue-dots .fast-quote-dot {
  border-radius: 50%;
  animation: fast-wave-dot 1.4s ease-in-out infinite;
}

.fast-sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--pi-surface-level-1, #fff);
  box-shadow: 0 0 11px rgba(0, 0, 0, 0.12);
  /* Android WebView can report non-zero safe-area while already clear of nav. */
  padding: 12px 16px 12px;
}

@supports (-webkit-touch-callout: none) {
  .fast-sticky-bar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}