/* ===== Roadtrip Planner — finitions ===== */

* { -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "cv02", "cv03", "cv04", "cv11"; }

.leaflet-container { background: #e8eef1; font: inherit; }
.leaflet-control-zoom a { border-radius: 8px !important; }

/* ---- Marqueur de HUB (camp de base) ---- */
.hub-marker {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #1b2432;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .4);
  border: 3px solid #fff;
  transition: background .15s ease, transform .15s ease;
}
.hub-marker > span { transform: rotate(45deg); }
.hub-marker.is-active { background: #ff5a4d; transform: rotate(-45deg) scale(1.12); }

/* ---- Marqueur d'activité (dans un hub) ---- */
.stop-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #0f9d8f;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* ---- Carte de HUB (panneau) ---- */
.hub-card {
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: box-shadow .15s ease;
  overflow: hidden;
}
.hub-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .09); }
.hub-card.is-active { border-color: #ff5a4d; box-shadow: 0 4px 16px rgba(255, 90, 77, .18); }
.hub-card.dragging { opacity: .5; }
.hub-card.drag-over { outline: 2px dashed #ff5a4d; outline-offset: 2px; }

.hub-badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #1b2432;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex: none;
}
.hub-card.is-active .hub-badge { background: #ff5a4d; }

/* ---- Connecteur de transfert entre hubs ---- */
.hub-leg {
  display: flex;
  align-items: center;
  padding: 4px 14px;
  margin-left: 30px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5b6b7d;
}
.hub-leg::before {
  content: "";
  width: 2px;
  align-self: stretch;
  min-height: 20px;
  margin: 0 16px 0 0;
  background: repeating-linear-gradient(to bottom, #c9d2da 0 5px, transparent 5px 10px);
}
.leg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eef1f4;
}
.leg-error { color: #c0392b; }

/* ---- Activités (déroulé d'un hub) ---- */
.activity-row {
  display: flex;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .12s ease;
}
.activity-row:hover { background: #f6f5f1; }
.activity-row.dragging { opacity: .5; }
.activity-row.drag-over { outline: 2px dashed #0f9d8f; outline-offset: 1px; }
.activity-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  background: #0f9d8f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}
.dist-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e5f3f1;
  color: #0b7a6f;
  font-size: 11px;
  font-weight: 600;
}

/* Stat cell */
.stat { flex: 1; background: #fff; padding: 8px 4px; }
.stat b { display: block; font-size: 15px; font-weight: 800; line-height: 1.1; }
.stat span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #5b6b7d; }

.thumb { aspect-ratio: 1; object-fit: cover; border-radius: 10px; width: 100%; display: block; }

.search-row { cursor: pointer; }
.search-row:hover { background: #f6f5f1; }

.chevron { transition: transform .18s ease; }
.hub-card.is-open .chevron { transform: rotate(90deg); }

@media (max-width: 767px) {
  body.show-map #panel { display: none; }
  body:not(.show-map) main { visibility: hidden; }
}

#toast.show { opacity: 1; }

#stopList::-webkit-scrollbar, #searchResults::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar { width: 8px; }
#stopList::-webkit-scrollbar-thumb, .overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .15); border-radius: 8px;
}