/* FuelDash V480 — a small, quiet update row for the Mehr menu. */

html body #app .menu-card button.fd-pwa-update {
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  padding: 16px 0 !important;
  color: var(--fd-text, #f5f5f7) !important;
  font-size: 14px !important;
}

html body #app .menu-card button.fd-pwa-update > .fd-pwa-update__icon {
  flex: 0 0 15px !important;
  width: 15px !important;
  height: 15px !important;
  margin-left: 8px !important;
  color: var(--fd-muted, #8c8c90) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: color 160ms ease, transform 160ms ease !important;
}

html body #app .menu-card button.fd-pwa-update > .fd-pwa-update__label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--fd-text, #f5f5f7) !important;
  font-size: 14px !important;
  line-height: normal !important;
  text-align: left !important;
}

html body #app .menu-card button.fd-pwa-update > em[data-fd-update-state] {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  color: var(--fd-muted, #8c8c90) !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html body #app .menu-card button.fd-pwa-update.is-checking > .fd-pwa-update__icon {
  animation: fd-pwa-update-spin 900ms linear infinite !important;
}

html body #app .menu-card button.fd-pwa-update.is-available > .fd-pwa-update__icon,
html body #app .menu-card button.fd-pwa-update.is-installing > .fd-pwa-update__icon {
  color: var(--fd-accent, #ff453a) !important;
}

html body #app .menu-card button.fd-pwa-update.is-installing > .fd-pwa-update__icon {
  animation: fd-pwa-update-spin 900ms linear infinite !important;
}

html body #app .menu-card button.fd-pwa-update.is-available > em[data-fd-update-state] {
  color: var(--fd-accent, #ff453a) !important;
}

html body #app .menu-card button.fd-pwa-update.is-current > em[data-fd-update-state] {
  color: var(--fd-positive, #30d158) !important;
}

html body #app .menu-card button.fd-pwa-update.is-error > em[data-fd-update-state] {
  color: var(--fd-negative, #ff453a) !important;
}

html body #app .menu-card button.fd-pwa-update:disabled {
  cursor: wait !important;
  opacity: 0.72 !important;
}

@keyframes fd-pwa-update-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
html body #app .menu-card button.fd-pwa-update.is-checking > .fd-pwa-update__icon,
html body #app .menu-card button.fd-pwa-update.is-installing > .fd-pwa-update__icon {
    animation: none !important;
  }
}