/* FuelDash R130 — restore R127's intended control language without broad state leakage. */
:root {
  --fd-r130-control-dark: var(--fd-r113-glass-dark);
  --fd-r130-control-light: var(--fd-r113-glass-light);
}

/* Only real choice buttons inherit the profile/reload material when neutral. */
html body #app :is(
  .station-sort > button:not(.is-active),
  .fuel-filter button:not(.is-active),
  .fuel-preference button:not(.is-active),
  .nearby-radius button:not(.is-active),
  .chart-range button:not(.is-active),
  .detail-price-card:not(.is-selected),
  .primary-station-action:not(.is-active)
) {
  border: 1px solid #2c2c31 !important;
  background: var(--fd-r130-control-dark) !important;
  background-color: transparent !important;
  background-image: var(--fd-r130-control-dark) !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;
  color: #f7f7f8 !important;
}
html[data-fd-theme="light"] body #app :is(
  .station-sort > button:not(.is-active),
  .fuel-filter button:not(.is-active),
  .fuel-preference button:not(.is-active),
  .nearby-radius button:not(.is-active),
  .chart-range button:not(.is-active),
  .detail-price-card:not(.is-selected),
  .primary-station-action:not(.is-active)
) {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r130-control-light) !important;
  background-image: var(--fd-r130-control-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
  color: #303036 !important;
}

/* Search is this same material at input scale. */
html body #app .search-field {
  border-color: #2c2c31 !important;
  background: var(--fd-r130-control-dark) !important;
  background-image: var(--fd-r130-control-dark) !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;
}
html[data-fd-theme="light"] body #app .search-field {
  border-color: rgba(35,35,40,.16) !important;
  background: var(--fd-r130-control-light) !important;
  background-image: var(--fd-r130-control-light) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.98), 0 9px 22px rgba(35,35,42,.11) !important;
}

/* A selected choice is flat hero red; checkbox rows and saved hearts are intentionally not listed. */
html body #app :is(
  .station-sort > button.is-active,
  .fuel-filter button.is-active,
  .fuel-preference button.is-active,
  .nearby-radius button.is-active,
  .chart-range button.is-active,
  .primary-station-action.is-active
) {
  border-color: #ff3b30 !important;
  background: #ff3b30 !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.14) !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* Guard the two stateful controls that must never become red-filled buttons. */
html body #app .search-availability-filter button.is-active {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
}
html body #app .favorite-toggle.is-favorite,
html body #app .detail-favorite.is-favorite {
  border-color: #2c2c31 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ff3b30 !important;
}
html[data-fd-theme="light"] body #app .favorite-toggle.is-favorite,
html[data-fd-theme="light"] body #app .detail-favorite.is-favorite { border-color: rgba(35,35,40,.16) !important; }