/* ==========================================================
   BiciPark route difficulty palette v6
   Easy   = violet    #9D85E6
   Medium = orange    #ED7A0F
   Hard   = raspberry #CA3657
   ========================================================== */

:root {
  --bp-diff-easy: #9D85E6;
  --bp-diff-medium: #ED7A0F;
  --bp-diff-hard: #CA3657;

  --bp-diff-easy-soft: #EEE9FC;
  --bp-diff-medium-soft: #FCE9D5;
  --bp-diff-hard-soft: #F8DFE6;

  --bp-diff-easy-text: #5F4BA8;
  --bp-diff-medium-text: #9A4A00;
  --bp-diff-hard-text: #8F2341;
}

/* ----------------------------------------------------------
   Sidebar card accents
   ---------------------------------------------------------- */

.bp-proposal-a-sidebar .bp-featured-card.bp-difficulty-easy::before,
.bp-proposal-a-sidebar .bp-featured-card.bp-accent-green.bp-difficulty-easy::before,
.bp-proposal-a-sidebar .bp-featured-card.bp-accent-blue.bp-difficulty-easy::before,
.bp-proposal-a-sidebar .bp-featured-card.bp-accent-red.bp-difficulty-easy::before {
  background: var(--bp-diff-easy) !important;
}

.bp-proposal-a-sidebar .bp-featured-card.bp-difficulty-medium::before,
.bp-proposal-a-sidebar .bp-featured-card.bp-accent-green.bp-difficulty-medium::before,
.bp-proposal-a-sidebar .bp-featured-card.bp-accent-blue.bp-difficulty-medium::before,
.bp-proposal-a-sidebar .bp-featured-card.bp-accent-red.bp-difficulty-medium::before {
  background: var(--bp-diff-medium) !important;
}

.bp-proposal-a-sidebar .bp-featured-card.bp-difficulty-hard::before,
.bp-proposal-a-sidebar .bp-featured-card.bp-accent-green.bp-difficulty-hard::before,
.bp-proposal-a-sidebar .bp-featured-card.bp-accent-blue.bp-difficulty-hard::before,
.bp-proposal-a-sidebar .bp-featured-card.bp-accent-red.bp-difficulty-hard::before {
  background: var(--bp-diff-hard) !important;
}

/* ----------------------------------------------------------
   Difficulty pills
   ---------------------------------------------------------- */

.bp-proposal-a-sidebar .bp-route-difficulty-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 21px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.bp-proposal-a-sidebar .bp-route-difficulty-pill.bp-difficulty-easy {
  color: var(--bp-diff-easy-text) !important;
  background: var(--bp-diff-easy-soft) !important;
}

.bp-proposal-a-sidebar .bp-route-difficulty-pill.bp-difficulty-medium {
  color: var(--bp-diff-medium-text) !important;
  background: var(--bp-diff-medium-soft) !important;
}

.bp-proposal-a-sidebar .bp-route-difficulty-pill.bp-difficulty-hard {
  color: var(--bp-diff-hard-text) !important;
  background: var(--bp-diff-hard-soft) !important;
}

/* ----------------------------------------------------------
   Map route rendering
   ---------------------------------------------------------- */

.leaflet-overlay-pane path.bp-difficulty-route-path {
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.98))
    drop-shadow(0 0 1px rgba(255,255,255,.85));
}

/* ----------------------------------------------------------
   Legend
   ---------------------------------------------------------- */

.bp-route-difficulty-legend {
  position: absolute;
  left: 14px;
  bottom: 18px;
  z-index: 640;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid rgba(25,69,48,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 25px rgba(19,55,38,.10);
  backdrop-filter: blur(8px);
  pointer-events: none;
  font-family:
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.bp-route-difficulty-legend strong {
  color: #17382B;
  font-size: 10px;
  font-weight: 900;
}

.bp-route-difficulty-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #45584E;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.bp-route-difficulty-legend-line {
  width: 25px;
  height: 5px;
  border-radius: 999px;
}

.bp-route-difficulty-legend-line.is-easy {
  background: var(--bp-diff-easy);
}

.bp-route-difficulty-legend-line.is-medium {
  background: var(--bp-diff-medium);
}

.bp-route-difficulty-legend-line.is-hard {
  background: var(--bp-diff-hard);
}

@media (max-width: 1050px) {
  .bp-route-difficulty-legend {
    display: none;
  }
}