/* FuelDash R145 — one literal material for Search, Account and Tankbook inputs. */
:root {
  --fd-r145-input-dark: #17171c;
  --fd-r145-input-light: #eeeef2;
  --fd-r145-input-border-dark: #323239;
  --fd-r145-input-border-light: #d1d1d7;
  --fd-r145-input-text-dark: #f7f7f8;
  --fd-r145-input-text-light: #27272d;
}

html body:not(#fd-r145-input-scope) #app .search-field,
html body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea),
html body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input),
html body:not(#fd-r145-input-scope) .fd-account-sheet .fd-auth-form input {
  box-sizing: border-box !important;
  border-color: var(--fd-r145-input-border-dark) !important;
  background: var(--fd-r145-input-dark) !important;
  background-color: var(--fd-r145-input-dark) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055) !important;
  color: var(--fd-r145-input-text-dark) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html[data-fd-theme="light"] body:not(#fd-r145-input-scope) #app .search-field,
html[data-fd-theme="light"] body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea),
html[data-fd-theme="light"] body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input),
html[data-fd-theme="light"] body:not(#fd-r145-input-scope) .fd-account-sheet .fd-auth-form input {
  border-color: var(--fd-r145-input-border-light) !important;
  background: var(--fd-r145-input-light) !important;
  background-color: var(--fd-r145-input-light) !important;
  background-image: none !important;
  box-shadow: inset 0 1px #fff !important;
  color: var(--fd-r145-input-text-light) !important;
}

/* Search paints the material on its rounded shell; the native text input stays clear. */
html body:not(#fd-r145-input-scope) #app .search-field > input {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html body:not(#fd-r145-input-scope) #app .search-field:focus-within,
html body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="tankbook"] .fd-field :is(input,select,textarea):focus,
html body:not(#fd-r145-input-scope) .fd-feature-page[data-fd-feature-view="account"] :is(.fd-auth-form input,.fd-account-card__password input):focus,
html body:not(#fd-r145-input-scope) .fd-account-sheet .fd-auth-form input:focus {
  border-color: #ff3b30 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), inset 0 0 0 1px #ff3b30 !important;
}