/* Trip-cost panel for state-v1 maps. Alaska keeps the copy inside ak/map. */
body.state-template #gas-cost-panel {
  position: fixed;
  right: 10px;
  left: auto;
  z-index: 31000;
  width: 270px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  cursor: grab;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
body.state-template #gas-cost-panel.dragging,
body.state-template #gas-cost-panel.dragging .gc-head { cursor: grabbing; }
body.state-template #gas-cost-panel .gc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  color: #fff;
  cursor: grab;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
body.state-template #gas-cost-panel .gc-grip { opacity: 0.9; letter-spacing: -1px; font-size: 14px; line-height: 1; }
body.state-template #gas-cost-panel .gc-btns { margin-left: auto; display: flex; gap: 4px; }
body.state-template #gas-cost-panel .gc-btns button {
  background: rgba(255, 255, 255, 0.2);
  border: 0;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font: bold 14px/22px var(--font-sans), Arial, Helvetica, sans-serif;
  padding: 0;
}
body.state-template #gas-cost-panel.minimized .gc-body { display: none; }
@media (max-width: 719px) {
  body.state-template #gas-cost-panel.minimized {
    top: auto;
    bottom: calc(var(--map-footer, 120px) + 8px);
    right: 10px;
    left: auto;
    width: 170px;
  }
}
body.state-template #gas-cost-panel.minimized,
body.state-template #gas-cost-panel.minimized .gc-head { border-radius: 8px; }
body.state-template #gas-cost-panel.minimized { width: 170px; }
body.state-template #gas-cost-panel.hidden { display: none; }
body.state-template #gas-cost-panel .gc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
body.state-template #gas-cost-panel .gc-row label,
body.state-template #gas-cost-panel .gc-row .gc-lbl { font-weight: 700; color: #5a2a00; }
body.state-template #gas-cost-panel .gc-val { text-align: right; font-weight: 700; }
body.state-template #gas-cost-panel .gc-sub {
  display: block;
  color: #777;
  font-size: 10px;
  font-weight: 400;
  margin-top: 1px;
}
body.state-template #gas-cost-panel .gc-approx { color: #b00020; }
body.state-template #gas-cost-panel .gc-inwrap { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
body.state-template #gas-cost-panel input[type="number"] {
  width: 72px;
  padding: 3px 4px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font: 12px var(--font-sans), Arial, Helvetica, sans-serif;
  text-align: right;
  -webkit-user-select: text;
  user-select: text;
}
body.state-template #gas-cost-panel input.gc-edited { background: #fff7e6; }
body.state-template #gas-cost-panel input.gc-invalid { border-color: #b00020; background: #fff1f1; }
body.state-template #gas-cost-panel .gc-body { padding: 8px 10px 10px; }
body.state-template #gas-cost-panel .gc-bad { color: #b00020; display: block; }
body.state-template #gas-cost-panel .gc-mine { color: #9a4700; font-weight: 700; }
body.state-template #gas-cost-panel .gc-start { padding: 2px 0 6px; border-bottom: 1px solid #eee; }
body.state-template #gas-cost-panel .gc-start-line { display: flex; gap: 4px; margin-top: 3px; }
body.state-template #gas-cost-panel #gas-start {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  text-align: left;
  padding: 3px 4px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font: 12px var(--font-sans), Arial, Helvetica, sans-serif;
  -webkit-user-select: text;
  user-select: text;
}
body.state-template #gas-cost-panel .gc-start button,
body.state-template #gas-cost-panel #gas-start-map {
  flex: 0 0 auto;
  background: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 7px;
  font: 11px var(--font-sans), Arial, Helvetica, sans-serif;
  cursor: pointer;
}
body.state-template #gas-cost-panel #gas-start-map { margin-top: 4px; }
body.state-template #gas-cost-panel .gc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 0 2px;
}
body.state-template #gas-cost-panel .gc-total .gc-lbl { font-weight: 700; font-size: 13px; color: #5a2a00; }
body.state-template #gas-cost-panel .gc-total .gc-cost { font-weight: 700; font-size: 20px; }
body.state-template #gas-cost-panel .gc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 4px;
  color: #888;
  font-size: 10px;
}
body.state-template #gas-cost-panel .gc-price-note {
  margin: 6px 0 0;
  color: #555;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 400;
}
body.state-template #gas-cost-panel .gc-reset {
  background: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 7px;
  font: 11px var(--font-sans), Arial, Helvetica, sans-serif;
  cursor: pointer;
}
body.state-template #gas-cost-panel a { color: #9a4700; }
body.state-template #gas-cost-panel .gc-sect {
  margin: 2px 0 0;
  padding: 2px 0 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid #f3d3b5;
}
body.state-template #gas-cost-panel .gc-sect.gc-ev { margin-top: 10px; color: #0f6e6e; border-bottom-color: #b9e3e3; }
body.state-template #gas-cost-panel .gc-evrow label { color: #0b4f4f; }
body.state-template #gas-cost-panel .gc-total.gc-evtotal .gc-lbl { color: #0b4f4f; }
body.state-template #gas-cost-panel .gc-total.gc-evtotal .gc-cost { color: #0f6e6e; }
body.state-template #gas-cost-panel .gc-evnote {
  margin-top: 2px;
  padding: 4px 6px;
  border-radius: 4px;
  background: #eef8f8;
  color: #245a5a;
  font-size: 10px;
}
body.state-template #gas-cost-panel .gc-evtemp { padding: 5px 0; border-bottom: 1px solid #eee; }
body.state-template #gas-cost-panel .gc-evtemp-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
body.state-template #gas-cost-panel .gc-chk { display: flex; align-items: center; gap: 4px; font-weight: 700; color: #0b4f4f; cursor: pointer; }
body.state-template #gas-cost-panel .gc-chk input { margin: 0; width: 14px; height: 14px; }
body.state-template #gas-cost-panel .gc-ovr { display: flex; align-items: center; gap: 3px; color: #666; font-size: 10px; }
body.state-template #gas-cost-panel .gc-evrow .gc-ovr input[type="number"] { width: 46px; padding: 2px 3px; }
body.state-template #gas-cost-panel #ev-temp-line { margin-top: 3px; font-size: 11px; color: #245a5a; }
body.state-template #gas-cost-panel #ev-temp-line.gc-temp-off { color: #888; }
body.state-template #gas-cost-panel #ev-temp-line.gc-temp-na { color: #b00020; }
body.state-template #gas-cost-panel select.gc-sel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 3px 4px;
  border: 1px solid #bbb;
  border-radius: 4px;
  font: 11px var(--font-sans), Arial, Helvetica, sans-serif;
  background: #fff;
  color: #222;
}
body.state-template #gas-cost-panel .gc-util-row { display: block; padding: 5px 0; border-bottom: 1px solid #eee; }
body.state-template #gas-cost-panel .gc-util-row .gc-lbl { font-weight: 700; color: #0b4f4f; display: block; margin-bottom: 3px; }
body.state-template #gas-cost-panel #ev-util-note { display: block; color: #666; font-size: 10px; margin-top: 3px; line-height: 1.3; }
body.state-template #gas-cost-panel #ev-util-pick-wrap { display: none; margin-top: 4px; }
body.state-template #gas-cost-panel #ev-util-pick-wrap.show { display: block; }
body.state-template #gas-cost-panel .gc-evrow .gc-inwrap input#ev-mpk { width: 64px; }
body.state-template #gas-reopen-btn {
  display: none;
  position: fixed;
  right: 10px;
  z-index: 10000;
  color: #fff;
  border: 0;
  padding: 10px 14px;
  font: bold 13px var(--font-sans), Arial, Helvetica, sans-serif;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
body.state-template #gas-reopen-btn.show { display: block; }
body.state-template #gas-cost-panel #gas-price-src .gc-basis { color: #5a2a00; }
body.state-template #gas-cost-panel #gas-price-src .gc-mine { color: #9a4700; font-weight: 700; }
body.state-template #gas-cost-panel #gas-price-reset,
body.state-template #gas-cost-panel .gc-field-reset {
  display: inline-block;
  margin-top: 1px;
  color: #0b5ea8;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
}