/* ── Safe area (iPhone notch / Dynamic Island) ───────────────── */
.safe-bottom {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* ── Fuel button active / idle states ────────────────────────── */
.fuel-btn {
  background: white;
  color: #6b7280;
  transition: background-color 0.15s, color 0.15s;
  cursor: pointer;
  min-height: 44px;
}
.fuel-btn.active {
  background: #f97316;
  color: white;
}
.fuel-btn:not(.active):active {
  background: #fff7ed;
}

/* ── Loading shimmer skeleton ─────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 1rem;
}

/* ── Modal bottom-sheet entrance ─────────────────────────────── */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.modal-sheet {
  animation: slideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 85vh;
}

/* ── Smooth results dim while re-fetching ────────────────────── */
.results-fetching {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* ── Highlight match in city search ─────────────────────────── */
.city-match {
  background: #fff7ed;
  color: #c2410c;
  border-radius: 0.2rem;
}

/* ── Map price pins ───────────────────────────────────────────── */
.map-pin {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  color: white;
  border: 2px solid rgba(0,0,0,0.12);
  box-shadow: 0 2px 6px rgba(0,0,0,0.28);
  cursor: pointer;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.map-pin-cheap     { background: #16a34a; }
.map-pin-mid       { background: #eab308; color: #422006; }
.map-pin-expensive { background: #dc2626; }
.map-pin-cheapest  {
  width: 48px;
  height: 48px;
  font-size: 10px;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2.5px #16a34a, 0 3px 10px rgba(0,0,0,0.32);
}

/* ── User location dot ────────────────────────────────────────── */
.map-pin-user {
  width: 16px;
  height: 16px;
  background: #2563eb;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(37,99,235,0.55);
}

/* ── Cluster icons ────────────────────────────────────────────── */
.map-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: white;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.85);
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.map-cluster-cheap     { background: #16a34a; }
.map-cluster-mid       { background: #eab308; color: #422006; }
.map-cluster-expensive { background: #dc2626; }

/* ── Map bottom sheet ─────────────────────────────────────────── */
.map-sheet-slide {
  animation: slideUp 0.28s cubic-bezier(0.32,0.72,0,1);
}
.map-sheet-safe-bottom {
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}