/* FuelDash R200 — one real map pin layer and the final form-control parity layer. */

/* No legacy marker DOM may influence the new Leaflet marker layer. */
html body #app .fuel-map[data-marker-mode="station"] :is(.fuel-map-marker, .map-price-marker) {
  display: none !important;
}

html body #app .fuel-map[data-marker-mode="station"] .leaflet-marker-icon.fd-station-marker-icon {
  display: block !important;
  visibility: visible !important;
  width: 80px !important;
  height: 38px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: auto !important;
}

html body #app .fuel-map[data-marker-mode="station"] .fd-station-marker {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 1px !important;
  width: 80px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  padding: 3px 5px 2px !important;
  overflow: visible !important;
  border: 1px solid #8d2824 !important;
  border-radius: 15px !important;
  background: #3c1211 !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .46) !important;
  color: #ffffff !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: center !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transform: none !important;
}

html body #app .fuel-map[data-marker-mode="station"] .fd-station-marker::after {
  content: none !important;
}

html body #app .fuel-map[data-marker-mode="station"] .fd-station-marker > :is(.fd-station-marker__price, .fd-station-marker__name) {
  position: relative !important;
  z-index: 1 !important;
}

/* The triangle ends at y=38 within the 80×38 Leaflet icon; its tip and iconAnchor are the same pixel. */
html body #app .fuel-map[data-marker-mode="station"] .fd-station-marker__tip {
  position: absolute !important;
  z-index: 0 !important;
  top: 27px !important;
  left: 35px !important;
  display: block !important;
  width: 10px !important;
  height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #3c1211 !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
  pointer-events: none !important;
}

html body #app .fuel-map[data-marker-mode="station"] .fd-station-marker.is-selected {
  z-index: 2 !important;
  border-color: #ff746d !important;
  background: #ff3b30 !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .54), 0 0 14px rgba(255, 59, 48, .48) !important;
}

html body #app .fuel-map[data-marker-mode="station"] .fd-station-marker.is-selected .fd-station-marker__tip {
  background: #ff3b30 !important;
}

html body #app .fuel-map[data-marker-mode="station"] .fd-station-marker.is-dimmed {
  opacity: .72 !important;
}

html body #app .fuel-map[data-marker-mode="station"] .fd-station-marker__price {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: -.25px !important;
  white-space: nowrap !important;
}

html body #app .fuel-map[data-marker-mode="station"] .fd-station-marker__name {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Tankbuch uses the exact black control material from Preisalarm, including WebKit date/select widgets. */
html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form :is(.fd-field > input, .fd-field > select, .fd-field > textarea, .fd-field-affix) {
  border-color: #1e1e1e !important;
  background: #080808 !important;
  background-color: #080808 !important;
  background-image: none !important;
  box-shadow: none !important;
  color-scheme: dark !important;
}

html body .fd-feature-page[data-fd-feature-view="tankbook"] .fd-tank-form .fd-field-affix > input {
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* The price-alert checkbox rows are one stable horizontal layout; the tick is geometrically centered. */
html body .fd-alert-modal .fd-alert-grid,
html body .fd-alert-modal .fd-alert-stations {
  grid-template-columns: minmax(0, 1fr) !important;
}

html body .fd-alert-modal :is(.fd-alert-row, .fd-alert-station) {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html body .fd-alert-modal .fd-alert-row > span,
html body .fd-alert-modal .fd-alert-station > span {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html body .fd-alert-modal :is(.fd-alert-row, .fd-alert-station) input[type="checkbox"] {
  position: relative !important;
  display: grid !important;
  flex: 0 0 28px !important;
  place-items: center !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 0 0 16px !important;
  padding: 0 !important;
  border: 2px solid #2a2a2e !important;
  border-radius: 8px !important;
  background: #080808 !important;
  box-shadow: none !important;
}

html body .fd-alert-modal :is(.fd-alert-row, .fd-alert-station) input[type="checkbox"]::after {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: block !important;
  width: 8px !important;
  height: 13px !important;
  margin: 0 !important;
  content: "" !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  opacity: 0 !important;
  transform: translate(-50%, -57%) rotate(45deg) !important;
}

html body .fd-alert-modal :is(.fd-alert-row, .fd-alert-station) input[type="checkbox"]:checked {
  border-color: #ff3b30 !important;
  background: #ff3b30 !important;
}

html body .fd-alert-modal :is(.fd-alert-row, .fd-alert-station) input[type="checkbox"]:checked::after {
  opacity: 1 !important;
}