/* FuelDash route comparison — flat search/detail styling */

#app .fd-route-launch {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  color: #fff;
  text-align: left;
  border: 1px solid #242428;
  border-radius: 14px;
  background: #0a0a0a;
  box-shadow: none;
}
#app .fd-route-launch > svg {
  width: 19px;
  height: 19px;
  color: #ff3b30;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#app .fd-route-launch span { display: grid; gap: 2px; min-width: 0; }
#app .fd-route-launch strong { font-size: 12px; font-weight: 750; }
#app .fd-route-launch small { color: #929298; font-size: 9px; line-height: 1.2; }
#app .fd-route-launch b { color: #99999f; font-size: 19px; font-weight: 400; text-align: right; }
#app .fd-route-launch:active { transform: scale(.99); background: #111113; }

#app .fd-route-planner {
  display: grid;
  gap: 12px;
  padding: 2px 0 22px;
  color: #fff;
  font-family: inherit;
  -webkit-text-size-adjust: 100%;
}
#app .fd-route-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 1px;
}
#app .fd-route-heading > div { display: grid; gap: 3px; min-width: 0; }
#app .fd-route-heading small,
#app .fd-route-form-head small,
#app .fd-route-control-group > small,
#app .fd-route-summary small,
#app .fd-route-results header small {
  color: #85858c;
  font-size: 11px;
  line-height: 1.2;
}
#app .fd-route-heading h1 {
  margin: 0;
  color: #fff;
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -.25px;
}
#app .fd-route-control-group > small { font-size: 11px; }
#app .fd-route-back {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 10px;
  color: #aaaab0;
  border: 1px solid #29292e;
  border-radius: 9px;
  background: #080808;
  font-size: 11px;
  font-weight: 650;
}
#app .fd-route-back:active { background: #151517; }

#app .fd-route-form,
#app .fd-route-controls,
#app .fd-route-summary {
  border: 1px solid #313135 !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #0c0c0f87, #040406b3) !important;
  box-shadow: inset 0 1px #ffffff14, 0 10px 24px #0005 !important;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
#app .fd-route-form {
  display: grid;
  gap: 11px;
  padding: 14px;
}
#app .fd-route-form-head { display: grid; gap: 3px; }
#app .fd-route-form-head strong { color: #fff; font-size: 16px; font-weight: 700; }
#app .fd-route-step { display: none; }

#app .fd-route-location-field {
  position: relative;
  display: grid;
  gap: 5px;
}
#app .fd-route-location-field label { color: #a7a7ad; font-size: 12px; font-weight: 650; }
#app .fd-route-input-wrap {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 11px;
  border: 1px solid #2a2a2f;
  border-radius: 11px;
  background: #080808;
}
#app .fd-route-input-wrap:focus-within,
#app .fd-route-input-wrap:has(input:focus) { border-color: #2a2a2f !important; box-shadow: none !important; outline: 0 !important; }
#app .fd-route-input-wrap > svg {
  width: 18px;
  height: 18px;
  color: #ff3b30;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
#app .fd-route-input-wrap input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: #fff;
  border: 0 !important;
  outline: none !important;
  background: transparent;
  font: inherit;
  font-size: 16px !important;
  line-height: 1.2;
  zoom: 1;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#app .fd-route-input-wrap input:focus,
#app .fd-route-input-wrap input:focus-visible { border: 0 !important; outline: none !important; box-shadow: none !important; -webkit-focus-ring-color: transparent; }
#app .fd-route-input-wrap input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
#app .fd-route-input-wrap input::placeholder { color: #737379; }
#app .fd-route-clear {
  width: 28px;
  height: 28px;
  padding: 0;
  color: #99999f;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 1;
}
#app .fd-route-clear[hidden] { display: none; }
#app .fd-route-location-field.is-error .fd-route-input-wrap { border-color: #ff3b30; }
#app .fd-route-field-error { color: #ff7770; font-size: 11px; }

#app .fd-route-suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  overflow: hidden;
  border: 1px solid #2d2d32;
  border-radius: 12px;
  background: #111113;
  box-shadow: none;
}
#app .fd-route-suggestions[hidden] { display: none; }
#app .fd-route-suggestions button {
  width: 100%;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 9px 12px;
  color: #fff;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #252529;
  background: #111113;
}
#app .fd-route-suggestions button:last-child { border-bottom: 0; }
#app .fd-route-suggestions button:active { background: #1a1a1d; }
#app .fd-route-suggestions svg { width: 18px; height: 18px; color: #ff3b30; fill: none; stroke: currentColor; stroke-width: 1.7; }
#app .fd-route-suggestions span { display: grid; gap: 2px; min-width: 0; }
#app .fd-route-suggestions strong,
#app .fd-route-suggestions small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app .fd-route-suggestions strong { font-size: 13px; }
#app .fd-route-suggestions small { color: #85858c; font-size: 11px; }

#app .fd-route-location-button,
#app .fd-route-refresh {
  justify-self: start;
  padding: 0;
  color: #ff554b;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 650;
}
#app .fd-route-submit {
  min-height: 46px;
  margin-top: 1px;
  color: #fff;
  border: 1px solid #ff5b53;
  border-radius: 12px;
  background: #ff3b30;
  font-size: 14px;
  font-weight: 760;
  box-shadow: none;
}
#app .fd-route-submit > span { margin-left: 4px; font-size: 18px; font-weight: 400; vertical-align: -1px; }
#app .fd-route-submit:active { transform: scale(.99); background: #e83229; }

#app .fd-route-controls {
  display: grid;
  gap: 11px;
  padding: 13px;
}
#app .fd-route-control-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 11px;
}
#app .fd-route-control-group { display: grid; gap: 5px; min-width: 0; }
#app .fd-route-segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
#app .fd-route-segmented button {
  min-height: 38px;
  padding: 5px 4px;
  overflow: hidden;
  color: #9a9aa0;
  border: 1px solid #29292e;
  border-radius: 11px;
  background: #080808;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app .fd-route-mode-tabs { grid-template-columns: 1fr 1fr; }
#app .fd-route-segmented button.is-active { color: #fff; border-color: #ff3b30; background: #ff3b30; box-shadow: none; }

#app .fd-route-detour-control {
  display: grid;
  gap: 7px;
}
#app .fd-route-detour-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#app .fd-route-help { margin: 0; color: #85858c; font-size: 11px; line-height: 1.35; }
#app .fd-route-mode-note { margin: 1px 0 0; color: #9d9da5; font-size: 11px; line-height: 1.35; }

#app .fd-route-history {
  display: grid;
  gap: 10px;
}
#app .fd-route-history[hidden] { display: none; }
#app .fd-route-history-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}
#app .fd-route-history-head > div { display: grid; gap: 3px; }
#app .fd-route-history-head h2 { margin: 0; color: #fff; font-size: 18px; letter-spacing: -.15px; }
#app .fd-route-history-head > span { color: #85858c; font-size: 11px; }
#app .fd-route-history-list { display: grid; gap: 10px; }
#app .fd-route-history-entry {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #252529;
  border-radius: 16px;
  background: #0a0a0a;
}
#app .fd-route-history-entry.is-pinned { border-color: #ff3b30; }
#app .fd-route-history-load {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 0;
  color: #fff;
  text-align: left;
  border: 0;
  background: transparent;
}
#app .fd-route-history-load strong { overflow: hidden; font-size: 15px; font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }
#app .fd-route-history-load strong span { color: #ff3b30; padding: 0 2px; }
#app .fd-route-history-load small { overflow: hidden; color: #85858c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
#app .fd-route-history-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#app .fd-route-history-actions button,
#app .fd-route-summary-pin {
  min-height: 36px;
  padding: 0 11px;
  color: #b7b7bc;
  border: 1px solid #29292e;
  border-radius: 10px;
  background: #080808;
  font-size: 10px;
  font-weight: 650;
}
#app .fd-route-history-entry.is-pinned .fd-route-history-actions button:first-child { color: #ff554b; border-color: #ff3b30; }
#app .fd-route-summary-pin[aria-pressed="true"] { color: #ff554b; border-color: #ff3b30; }
#app .fd-route-history-actions button:active,
#app .fd-route-summary-pin:active { background: #171719; }
#app .fd-route-history-empty {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid #252529;
  border-radius: 16px;
  background: #0a0a0a;
}
#app .fd-route-history-empty strong { color: #fff; font-size: 16px; }
#app .fd-route-history-empty span { color: #85858c; font-size: 12px; line-height: 1.4; }

#app .fd-route-status {
  display: grid;
  gap: 3px;
  color: #a7a7ad;
  font-size: 12px;
  line-height: 1.35;
}
#app .fd-route-status[hidden] { display: none; }
#app .fd-route-status strong { color: #fff; font-size: 14px; }
#app .fd-route-status.is-error strong { color: #ff7168; }
#app .fd-route-status.is-empty strong { color: #ffcc66; }
#app .fd-route-status button { justify-self: start; margin-top: 4px; padding: 6px 9px; color: #fff; border: 1px solid #ff5f57; border-radius: 9px; background: #190908; font-size: 9px; font-weight: 700; }
#app .fd-route-status.is-loading { display: flex; align-items: center; gap: 7px; }

#app .fd-route-map-section[hidden],
#app .fd-route-summary[hidden],
#app .fd-route-results[hidden] { display: none; }
#app .fd-route-map-wrap { position: relative; }
#app .fd-route-map {
  height: 270px;
  overflow: hidden;
  position: relative;
  border: 1px solid #343438;
  border-radius: 24px;
  background: #0d0e10;
  box-shadow: inset 0 1px #ffffff12, 0 14px 31px #0007;
}
#app .fd-route-map .leaflet-container { height: 100%; font-family: inherit; background: #0b0c0e; }
#app .fd-route-map .leaflet-tile-pane { filter: saturate(.82) brightness(1.28) contrast(.96); }
#app .fd-route-map .leaflet-control-zoom {
  overflow: hidden;
  border: 1px solid #303035 !important;
  border-radius: 8px;
}
#app .fd-route-map .leaflet-control-zoom a {
  width: 32px;
  height: 32px;
  color: #d6d6da;
  border-bottom: 1px solid #303035;
  background: #0b0b0c;
  line-height: 32px;
}
#app .fd-route-map .leaflet-control-zoom a:last-child { border-bottom: 0; }
#app .fd-route-map .leaflet-control-zoom a:hover { background: #171719; }
#app .fd-route-map .leaflet-control-attribution { display: none !important; }
#app .fd-route-map-fallback { margin: 0; padding: 18px; color: #aaa; font-size: 11px; }
#app .fd-route-map-reset {
  position: absolute;
  z-index: 500;
  top: 9px;
  right: 9px;
  min-height: 36px;
  padding: 0 12px;
  color: #e2e2e5;
  border: 1px solid #36363b;
  border-radius: 8px;
  background: #0b0b0c;
  font-size: 11px;
  font-weight: 750;
}
#app .fd-route-map-reset:active { background: #19191b; }
#app .fd-route-map-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 2px 0; color: #818188; font-size: 11px; }
#app .fd-route-map-legend span { display: inline-flex; align-items: center; gap: 4px; }
#app .fd-route-map-legend i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #83838a; }
#app .fd-route-map-legend i.is-route { width: 13px; height: 3px; border-radius: 4px; background: #ff3b30; }
#app .fd-route-map-legend i.is-best { background: #31d158; }
#app .fd-route-map-legend i.is-second { background: #ffcc66; }
#app .fd-route-map-legend i.is-other { background: #ff746c; }

#app .fd-route-endpoint-icon,
#app .fd-route-station-marker-icon { background: transparent; border: 0; }
#app .fd-route-endpoint { width: 28px; height: 28px; display: grid; place-items: center; box-sizing: border-box; color: #fff; border: 2px solid #fff; border-radius: 50%; background: #ff3b30; font-size: 10px; font-weight: 850; }
#app .fd-route-endpoint.is-destination { color: #101010; background: #ffcc66; }
#app .fd-route-station-marker { min-width: 84px; display: grid; gap: 2px; box-sizing: border-box; padding: 5px 8px; color: #fff; text-align: center; border: 1px solid #ff746d; border-radius: 9px; background: #1a0909; }
#app .fd-route-station-marker b { color: #ff5b55; font-size: 12px; font-weight: 800; line-height: 1; }
#app .fd-route-station-marker small { overflow: hidden; color: #b8b8bd; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
#app .fd-route-station-marker.is-best { border-color: #31d158; background: #0d2415; }
#app .fd-route-station-marker.is-best b { color: #8df5a7; }
#app .fd-route-station-marker.is-second { border-color: #ffcc66; background: #241b06; }
#app .fd-route-station-marker.is-second b { color: #ffdc78; }

#app .fd-route-summary {
  display: grid;
  gap: 10px;
  padding: 14px;
}
#app .fd-route-summary-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 9px; }
#app .fd-route-summary-head > div { display: grid; gap: 4px; min-width: 0; }
#app .fd-route-summary-head strong { overflow: hidden; color: #fff; font-size: 15px; font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }
#app .fd-route-summary-head strong span { color: #ff3b30; padding: 0 2px; }
#app .fd-route-summary-badge { flex: 0 0 auto; padding: 6px 8px; color: #d5d5d9; border: 1px solid #303035; border-radius: 9px; background: #080808; font-size: 10px; font-weight: 650; }
#app .fd-route-summary-meta { display: flex; flex-wrap: wrap; gap: 5px; }
#app .fd-route-summary-meta span { padding: 5px 7px; color: #a4a4aa; border: 1px solid #29292e; border-radius: 8px; background: #080808; font-size: 10px; }
#app .fd-route-summary-pin { flex: 0 0 auto; min-height: 36px; margin-left: auto; }
#app .fd-route-best-note { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #1d3a25; }
#app .fd-route-best-dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; background: #31d158; }
#app .fd-route-best-note > div { display: grid; gap: 2px; min-width: 0; }
#app .fd-route-best-note strong { overflow: hidden; color: #8df5a7; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#app .fd-route-best-note span:last-child { color: #97979e; font-size: 11px; }
#app .fd-route-no-match { display: grid; gap: 4px; padding-top: 9px; border-top: 1px solid #3e331b; }
#app .fd-route-no-match strong { color: #ffcc66; font-size: 11px; }
#app .fd-route-no-match span { color: #a5a5aa; font-size: 9px; line-height: 1.35; }
#app .fd-route-no-match button { justify-self: start; margin-top: 2px; padding: 6px 8px; color: #fff; border: 1px solid #7f6a34; border-radius: 8px; background: #171206; font-size: 9px; font-weight: 700; }

#app .fd-route-results { display: grid; gap: 8px; }
#app .fd-route-results > header { display: flex; align-items: end; justify-content: space-between; gap: 8px; padding: 0 2px; }
#app .fd-route-results > header h2 { margin: 3px 0 0; color: #fff; font-size: 18px; letter-spacing: -.15px; }
#app .fd-route-results > header > span { color: #85858c; font-size: 10px; }
#app .fd-route-result-list { display: grid; gap: 10px; }
#app .fd-route-result-row { overflow: hidden; border: 1px solid #313135; border-radius: 18px; background: linear-gradient(145deg, #0c0c0f87, #040406b3); box-shadow: inset 0 1px #ffffff14, 0 10px 24px #0005; }
#app .fd-route-result-row.is-best { border-color: #31d158; background: linear-gradient(145deg, #0c0c0f87, #040406b3); }
#app .fd-route-result-row.is-second { border-color: #ffcc66; background: linear-gradient(145deg, #0c0c0f87, #040406b3); }
#app .fd-route-result-row.is-focused { outline: 1px solid #505057; outline-offset: 2px; }
#app .fd-route-result-main { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 13px; }
#app .fd-route-result-logo { width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #f4f4f6; }
#app .fd-route-result-logo img { width: 100%; height: 100%; padding: 4px; box-sizing: border-box; object-fit: contain; }
#app .fd-route-logo-fallback { display: grid; place-items: center; width: 30px; height: 30px; color: #17171a; border: 1px solid #d0d0d4; border-radius: 4px; background: #f4f4f6; font-size: 10px; font-weight: 800; }
#app .fd-route-result-copy { display: grid; gap: 2px; min-width: 0; }
#app .fd-route-result-copy strong { overflow: hidden; color: #fff; font-size: 13px; font-weight: 670; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
#app .fd-route-choice { display: block; font-size: 10px; font-weight: 650; line-height: 1.15; }
#app .fd-route-choice.is-best { color: #31d158; }
#app .fd-route-choice.is-second { color: #ffcc66; }
#app .fd-route-result-copy > small.fd-route-result-address { overflow: hidden; color: #aaa; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#app .fd-route-result-meta { display: flex; align-items: center; gap: 5px; overflow: hidden; color: #a5a5aa; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#app .fd-route-result-meta i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #ff5f57; }
#app .fd-route-result-meta i.is-open { background: #31d158; }
#app .fd-route-result-price { align-self: start; display: grid; gap: 2px; min-width: 64px; text-align: right; }
#app .fd-route-result-price strong { color: #ff3b30; font-size: 16px; font-weight: 760; line-height: 1; }
#app .fd-route-result-price.is-best strong { color: #31d158; }
#app .fd-route-result-price.is-second strong { color: #ffcc66; }
#app .fd-route-result-price.is-other strong { color: #ff3b30; }
#app .fd-route-result-price small { color: #898990; font-size: 10px; }
#app .fd-route-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 13px 13px; }
#app .fd-route-result-actions a { min-height: 38px; display: grid; place-items: center; color: #b7b7bc; border: 1px solid #29292e; border-radius: 10px; background: #080808; font-size: 11px; font-weight: 650; text-decoration: none; }
#app .fd-route-result-actions a:active { background: #171719; }
#app .fd-route-result-row:active { transform: scale(.994); }

#app .fd-route-planner .search-loading-spinner { width: 14px; height: 14px; border-width: 2px; }
#app .fd-route-planner button:disabled,
#app .fd-route-planner input:disabled { cursor: wait; opacity: .62; }

@media (max-width: 370px) {
  #app .fd-route-heading h1 { font-size: 19px; }
  #app .fd-route-control-line { grid-template-columns: 1fr; gap: 9px; }
  #app .fd-route-result-main { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 11px; }
  #app .fd-route-result-logo { width: 34px; height: 34px; }
  #app .fd-route-result-logo img { padding: 3px; }
  #app .fd-route-result-copy strong { font-size: 13px; }
  #app .fd-route-result-price strong { font-size: 16px; }
  #app .fd-route-result-actions { padding: 0 11px 11px; }
}

@media (max-width: 520px) {
  #app .fd-route-control-line { grid-template-columns: 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #app .fd-route-launch:active,
  #app .fd-route-submit:active,
  #app .fd-route-result-row:active { transform: none; }
}