/* FuelDash R113 — one control family, dashboard-like feature scrolling and uninterrupted theme surfaces. */
:root {
  --fd-r113-red: #ff3b30;
  --fd-r113-dark-bg: #050505;
  --fd-r113-light-bg: #f5f5f7;
  --fd-info-text: #9a9aa0;
  --fd-r113-glass-dark: linear-gradient(145deg, rgba(27,27,31,.88), rgba(8,8,11,.96));
  --fd-r113-glass-light: linear-gradient(145deg, rgba(255,255,255,.96), rgba(235,235,240,.80));
}
html[data-fd-theme="light"] { --fd-info-text: #6e6e73; }

html,
body {
  min-height: 100% !important;
  background: var(--fd-r113-dark-bg) !important;
}
html[data-fd-theme="light"],
html[data-fd-theme="light"] body {
  background: var(--fd-r113-light-bg) !important;
}
body.fd-feature-open {
  overflow: hidden !important;
  background: var(--fd-r113-dark-bg) !important;
}
html[data-fd-theme="light"] body.fd-feature-open {
  background: var(--fd-r113-light-bg) !important;
}

/* Profile, reload, back and close are one exact FuelDash glass component. */
:is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close,.fd-alert-close,.fd-account-sheet__close) {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #2c2c31 !important;
  border-radius: 50% !important;
  background: var(--fd-r113-glass-dark) !important;
  color: #f7f7f8 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  outline: none !important;
  transition: none !important;
  animation: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
:is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close,.fd-alert-close,.fd-account-sheet__close) svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform-origin: 50% 50% !important;
}
html[data-fd-theme="light"] :is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close,.fd-alert-close,.fd-account-sheet__close) {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r113-glass-light) !important;
  color: #303036 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}
:is(.fd-profile-button,.fd-app-reload,.fd-feature-back,.detail-close,.fd-alert-close,.fd-account-sheet__close):is(:focus,:focus-visible,:active) {
  outline: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.fd-app-reload.is-reloading svg { animation: fd-r113-reload-spin .64s linear infinite !important; }
@keyframes fd-r113-reload-spin { to { transform: rotate(360deg); } }

/* All feature views use the same pattern as the dashboard: one page scroller; header is normal page content. */
.fd-feature-page,
.fd-feature-page[data-fd-feature-view="account"],
.fd-feature-page[data-fd-feature-view="tankbook"],
.fd-feature-page[data-fd-feature-view="appearance"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  background: var(--fd-r113-dark-bg) !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html[data-fd-theme="light"] .fd-feature-page {
  background: var(--fd-r113-light-bg) !important;
}
.fd-feature-page .fd-feature-shell,
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-shell,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-shell,
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-shell {
  display: block !important;
  box-sizing: border-box !important;
  width: min(100%, 480px) !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 0 calc(28px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  background: var(--fd-r113-dark-bg) !important;
}
html[data-fd-theme="light"] .fd-feature-page .fd-feature-shell {
  background: var(--fd-r113-light-bg) !important;
}
.fd-feature-page .fd-feature-header {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 38px !important;
  grid-template-rows: auto !important;
  align-items: start !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: calc(18px + env(safe-area-inset-top)) 16px 18px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.fd-feature-page .fd-feature-heading {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.fd-feature-page .fd-feature-header > .fd-feature-back {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
}
.fd-feature-page .fd-feature-content,
.fd-feature-page[data-fd-feature-view="account"] .fd-feature-content,
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-feature-content,
.fd-feature-page[data-fd-feature-view="appearance"] .fd-feature-content {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 16px !important;
  overflow: visible !important;
  background: transparent !important;
  overscroll-behavior: auto !important;
}

/* Mein FuelDash header/title are part of the same scroller and never sticky. */
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: calc(18px + env(safe-area-inset-top)) 16px 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-title {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 4px 16px 14px !important;
  background: transparent !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page {
  min-height: 0 !important;
  padding-bottom: 0 !important;
}
html[data-fd-theme="light"] .fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > span {
  color: #151517 !important;
}
.fd-feature-page[data-fd-feature-view="account"] .brand-wordmark > strong {
  color: #ff3b30 !important;
}

/* Defensive removal: cloud/account stays in Mein FuelDash, not below the tankbook. */
.fd-feature-page[data-fd-feature-view="tankbook"] .fd-tankbook-cloud-row { display: none !important; }

/* Same selected red outline in both themes. */
.fd-theme-choice.is-selected {
  border-color: #ff3b30 !important;
  box-shadow: inset 0 0 0 1px rgba(255,59,48,.22), 0 12px 30px rgba(0,0,0,.10) !important;
}
html[data-fd-theme="light"] .fd-theme-choice.is-selected {
  border-color: #ff3b30 !important;
  box-shadow: inset 0 0 0 1px rgba(255,59,48,.22), 0 12px 30px rgba(35,35,42,.10) !important;
}

/* Price alert header participates in the sheet scroll and all info copy matches FuelDash helper typography. */
.fd-alert-sheet {
  padding-top: max(14px, env(safe-area-inset-top)) !important;
  padding-bottom: calc(26px + env(safe-area-inset-bottom)) !important;
  background: var(--fd-r113-dark-bg) !important;
}
html[data-fd-theme="light"] .fd-alert-sheet { background: var(--fd-r113-light-bg) !important; }
.fd-alert-head {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 38px !important;
  margin: 0 0 14px !important;
  padding: 0 2px 12px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
}
html[data-fd-theme="light"] .fd-alert-head { border-bottom-color: rgba(20,20,24,.08) !important; }
.fd-alert-note,
.fd-alert-status {
  color: var(--fd-info-text) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.fd-alert-row small,
.fd-alert-station small,
.fd-alert-station-section header small,
.fd-alert-empty {
  color: var(--fd-info-text) !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}

/* Exact active FuelDash red for account primary actions. */
.fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-primary,.fd-auth-switch button.is-active,button[type="submit"].fd-auth-primary),
.fd-account-sheet :is(.fd-auth-primary,.fd-auth-switch button.is-active) {
  border-color: #ff3b30 !important;
  background: #ff3b30 !important;
  background-image: none !important;
  color: #fff !important;
}

/* Initial navigation already shows the final icon family. */
.fd-fast-nav > span {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.fd-fast-nav > span > svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.fd-fast-nav > span > span { font-size: 11px !important; line-height: 1 !important; }

@media (max-width: 390px) {
  .fd-feature-page .fd-feature-header { padding-inline: 14px !important; }
  .fd-feature-page .fd-feature-content { padding-inline: 14px !important; }
  .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header,
  .fd-feature-page[data-fd-feature-view="account"] .fd-account-page-title { padding-inline: 14px !important; }
}

/* Canonical single-selector aliases used by diagnostics and future releases. */
.fd-feature-page { overflow-y: auto !important; }
.fd-feature-shell { min-height: 100% !important; }
.fd-feature-header { position: relative !important; }
.fd-feature-content { overflow: visible !important; }

/* High-specificity guard against legacy feature/modal geometry. */
.fd-feature-page :is(.fd-feature-back,.fd-app-reload),
.fd-alert-modal .fd-alert-close,
.fd-account-sheet .fd-account-sheet__close,
.fd-startup-cover .fd-app-reload,
#app :is(.fd-profile-button,.fd-app-reload,.detail-close) {
  box-sizing: border-box !important;
  flex-basis: 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border-width: 1px !important;
  border-radius: 50% !important;
}
.fd-feature-page[data-fd-feature-view="account"] .fd-account-page-header :is(.fd-app-reload,.fd-feature-back,.detail-close) {
  box-sizing: border-box !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border-width: 1px !important;
  border-radius: 50% !important;
}
#app .brand-header .round-button.detail-close,
.fd-account-sheet .fd-account-sheet__panel > header > .fd-account-sheet__close {
  box-sizing: border-box !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border-width: 1px !important;
  border-radius: 50% !important;
  background: var(--fd-r113-glass-dark) !important;
  color: #f7f7f8 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 10px 24px rgba(0,0,0,.38) !important;
  -webkit-backdrop-filter: blur(28px) saturate(125%) !important;
  backdrop-filter: blur(28px) saturate(125%) !important;
}
#app .brand-header .round-button.detail-close svg,
.fd-account-sheet .fd-account-sheet__panel > header > .fd-account-sheet__close svg {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 1.9 !important;
}
html[data-fd-theme="light"] #app .brand-header .round-button.detail-close,
html[data-fd-theme="light"] .fd-account-sheet .fd-account-sheet__panel > header > .fd-account-sheet__close {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r113-glass-light) !important;
  color: #303036 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}