/* VXVRP overlay + context menu: keep it lightweight and let Voxel theme variables do most of the styling */

.vxvrp-planner {
  position: absolute;
  top: 10px;
  left: auto;
  right: 10px;
  z-index: 1100;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  padding: 10px;
  width: 280px;
  max-width: calc(100% - 20px);
  pointer-events: all;
}


/* Bottom status bar (summary + status) */
.vxvrp-statusbar {
  position: absolute;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1095;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.12);
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  max-width: calc(100% - 24px);
  pointer-events: none; /* read-only overlay */
}

.vxvrp-statusbar.vxvrp-hidden {
  display: none;
}

.vxvrp-statusbar .vxvrp-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ts-shade-1, #222);
}

.vxvrp-statusbar .vxvrp-small {
  font-size: 11px;
  color: var(--ts-shade-2, #666);
}

.vxvrp-statusbar .vxvrp-pill {
  border-radius: 14px;
  background: rgba(0,0,0,0.04);
  padding: 8px 10px;
  min-width: 92px;
}

.vxvrp-statusbar .vxvrp-pill.vxvrp-status {
  min-width: 150px;
}

/* Elevation mini-graph inside status bar */
.vxvrp-statusbar .vxvrp-elev-wrap {
  flex: 1 1 100%;
  height: 64px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  overflow: hidden;
}
.vxvrp-statusbar .vxvrp-elev-svg {
  width: 100%;
  height: 64px;
  display: block;
}

@media (max-width: 520px) {
  .vxvrp-statusbar {
    bottom: calc(10px + env(safe-area-inset-bottom));
    gap: 6px;
    padding: 8px;
  }
  .vxvrp-statusbar .vxvrp-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--ts-shade-1, #222);
}

.vxvrp-statusbar .vxvrp-small {
  font-size: 11px;
  color: var(--ts-shade-2, #666);
}

.vxvrp-statusbar .vxvrp-pill {
    padding: 7px 9px;
    min-width: 82px;
  }
}

/* Hidden until first waypoint is set */
.vxvrp-planner.vxvrp-hidden {
  display: none;
}

.vxvrp-planner .vxvrp-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.vxvrp-planner .vxvrp-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--ts-shade-1, #222);
}

.vxvrp-planner .vxvrp-small {
  font-size: 12px;
  color: var(--ts-shade-4, #666);
}

.vxvrp-planner .vxvrp-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vxvrp-planner button {
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform .06s ease, opacity .15s ease;
}

.vxvrp-planner button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.vxvrp-btn-small {
  padding: 6px 10px;
  font-size: 12px;
}

/* Busy indicator for auto recalculation */
.vxvrp-planner.vxvrp-busy [data-act="status"] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vxvrp-planner.vxvrp-busy [data-act="status"]::after,
.vxvrp-statusbar.vxvrp-busy [data-act="status"]::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,0.18);
  border-top-color: var(--ts-accent-1, #29BE6F);
  animation: vxvrpSpin 0.9s linear infinite;
}
@keyframes vxvrpSpin {
  to { transform: rotate(360deg); }
}

.vxvrp-planner button:active {
  transform: scale(0.98);
}

.vxvrp-btn-primary {
  background: var(--ts-accent-1, #29BE6F);
  color: #fff;
}

.vxvrp-btn-secondary {
  background: rgba(0,0,0,0.06);
  color: var(--ts-shade-1, #222);
}

.vxvrp-planner input,
.vxvrp-planner select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 10px;
  font-size: 13px;
  background: #fff;
}

.vxvrp-planner .vxvrp-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0;
}

.vxvrp-planner .vxvrp-pill {
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  padding: 8px;
}

.vxvrp-context-menu {
  position: absolute;
  z-index: 1200;
  min-width: 220px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 18px rgba(0,0,0,0.18);
  overflow: hidden;
  display: none;
}

.vxvrp-context-menu button {
  width: 100%;
  display: block;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
}

.vxvrp-context-menu button:hover {
  background: rgba(0,0,0,0.04);
}

.vxvrp-context-menu .vxvrp-sep {
  height: 1px;
  background: rgba(0,0,0,0.08);
}

/* Leaflet vector hardening:
   Some themes apply global SVG styles to <path> which can accidentally fill Leaflet polylines.
   Ensure our route line never gets a fill "shadow". */
.leaflet-container path.vxvrp-route {
  fill: none !important;
}

/* Public routes overlay hardening: avoid filled "shadow" polygons if a theme applies global SVG fill rules. */
.leaflet-container path.vxvrp-public-route {
  fill: none !important;
}

/* Voxel OSM skin hides non-Voxel Leaflet markers by default.
   Our waypoint markers are rendered as Leaflet div icons, so we need to explicitly allow them. */
.ts-map.leaflet-container .leaflet-marker-icon.vxvrp-wp-wrap {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  filter: none !important;
  width: 54px !important;
  height: 54px !important;
}

.ts-map.leaflet-container .leaflet-marker-icon.vxvrp-wp-wrap * {
  filter: none !important;
}

/* Improve long-press UX on iOS/Safari: prevent text selection/callout on the map surface */
.vxvrp-map-surface,
.vxvrp-map-surface * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 768px) {
  .vxvrp-planner {
    width: 260px;
  }
}

/* Waypoint list */
.vxvrp-vias {
  display: grid;
  gap: 6px;
  margin: 8px 0 6px;
}
.vxvrp-via {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(0,0,0,0.04);
  border-radius: 12px;
  padding: 6px 8px;
}
.vxvrp-via-label {
  font-size: 12px;
  color: var(--ts-shade-2, #333);
}
.vxvrp-via-remove {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,0.06);
  cursor: pointer;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

/* Draggable waypoint markers (Leaflet + Mapbox) */
.vxvrp-wp {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.28);
  border: 3px solid rgba(255,255,255,0.95);
  user-select: none;
}
.vxvrp-wp-wrap { background: transparent !important; border: 0 !important; }
.vxvrp-wp-start { background: var(--ts-accent-1, #29BE6F) !important; }
.vxvrp-wp-end { background: #ef4444 !important; }
.vxvrp-wp-via { background: #2b6cff !important; }

/* Mini map container */
.vxvrp-minimap {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
}
.vxvrp-minimap--loading {
  opacity: 0.75;
}

/* Route map container (larger than minimap) */
.vxvrp-route-map {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
}

/* Download button */
.vxvrp-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none !important;
  cursor: pointer;
  background: var(--ts-accent-1, #29BE6F);
  color: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.14);
}
.vxvrp-download-btn:hover { opacity: 0.92; }
.vxvrp-download-btn:active { transform: scale(0.98); }

.vxvrp-download-geojson {
  background: rgba(0,0,0,0.08);
  color: var(--ts-shade-1, #222) !important;
}


/* Leaflet marker robustness: some themes accidentally hide marker icons/wrappers */
.leaflet-marker-icon.vxvrp-wp-wrap {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.leaflet-marker-pane .vxvrp-wp-wrap {
  z-index: 9999 !important;
}


/* Marker UX */
.vxvrp-wp { cursor: grab; }
.vxvrp-wp:active { cursor: grabbing; }

/* Shortcodes for single route pages */
.vxvrp-shortcode-stats.vxvrp-stats-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}
.vxvrp-shortcode-stats.vxvrp-stats-inline {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: baseline;
}
.vxvrp-inline-label {
  opacity: 0.7;
  font-size: 12px;
}
.vxvrp-stats-table {
  width: 100%;
  border-collapse: collapse;
}
.vxvrp-stats-table .vxvrp-s-th,
.vxvrp-stats-table .vxvrp-s-td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.vxvrp-stats-table .vxvrp-s-th {
  text-align: left;
  opacity: 0.75;
  font-weight: 600;
  width: 42%;
}
.vxvrp-shortcode-waypoints {
  padding-left: 18px;
}

/* ---------------------------
   Weather forecast blocks
   --------------------------- */
.vxvrp-wx-box,
.vxvrp-route-weather {
  margin-top: 10px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 10px 12px;
}

.vxvrp-route-weather { margin-top: 0; }

.vxvrp-wx-title {
  font-weight: 800;
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 6px;
}

.vxvrp-wx-now {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}

/* Hourly row */
.vxvrp-wx-hours {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin: -2px 0 8px;
}
.vxvrp-wx-hour {
  min-width: 56px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 6px 6px;
  display: grid;
  gap: 1px;
  justify-items: center;
}
.vxvrp-wx-h { font-size: 10px; opacity: 0.7; }
.vxvrp-wx-ht { font-size: 12px; font-weight: 800; }
.vxvrp-wx-hp { font-size: 10px; opacity: 0.75; }

.vxvrp-wx-days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Layout modes for weather blocks */
.vxvrp-wx-compact .vxvrp-wx-days { display: none; }
.vxvrp-wx-pills .vxvrp-wx-hours { display: none; }
.vxvrp-wx-inline .vxvrp-wx-hours,
.vxvrp-wx-inline .vxvrp-wx-days { display: none; }
.vxvrp-wx-inline .vxvrp-wx-now { margin-bottom: 0; }

.vxvrp-wx-day {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 8px;
  display: grid;
  gap: 2px;
  justify-items: center;
}

.vxvrp-wx-d { font-size: 11px; opacity: 0.7; }
.vxvrp-wx-i { font-size: 18px; line-height: 1; }
.vxvrp-wx-t { font-size: 12px; font-weight: 800; }
.vxvrp-wx-min { font-weight: 700; opacity: 0.65; }
.vxvrp-wx-p { font-size: 11px; opacity: 0.75; }

/* ---------------------------
   Elevation profile shortcode
   --------------------------- */
.vxvrp-route-elevation {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  padding: 10px 12px;
}
.vxvrp-route-elevation .vxvrp-elev-title {
  font-weight: 800;
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 8px;
}
.vxvrp-route-elevation .vxvrp-elev-body {
  font-size: 12px;
  opacity: 0.85;
}
.vxvrp-elev-svgwrap {
  width: 100%;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  overflow: hidden;
}

.vxvrp-elev-scroll {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.vxvrp-elev-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Planner status bar elevation block */
.vxvrp-statusbar .vxvrp-elev-wrap {
  width: 100%;
  margin-top: 6px;
}
.vxvrp-statusbar .vxvrp-elev-scroll {
  height: 72px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
}

/* Prevent global theme SVG/path rules from causing black fills or shadows */
.vxvrp-elev-svg *,
.vxvrp-elev-svg path,
.vxvrp-elev-svg line,
.vxvrp-elev-svg circle,
.vxvrp-elev-svg text {
  filter: none !important;
  box-shadow: none !important;
}

.vxvrp-elev-svg .vxvrp-elev-area { fill-opacity: 1 !important; }
.vxvrp-elev-svg .vxvrp-elev-line { fill: none !important; }

.vxvrp-elev-label {
  font-size: 10px;
  font-weight: 800;
  opacity: 0.75;
  user-select: none;
}
.vxvrp-elev-cursor {
  stroke: rgba(0,0,0,0.35);
  stroke-width: 1;
}
.vxvrp-elev-dot {
  fill: rgba(255,255,255,0.9);
  stroke: rgba(0,0,0,0.35);
  stroke-width: 2;
}
.vxvrp-elev-readout {
  font-size: 10px;
  font-weight: 900;
  fill: rgba(0,0,0,0.75);
  paint-order: stroke;
  stroke: rgba(255,255,255,0.85);
  stroke-width: 3;
  user-select: none;
}

/* Compact layout tweaks */
.vxvrp-wx-inline .vxvrp-wx-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 768px) {
  .vxvrp-wx-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}



/* Elevation shell + sticky readout pill */
.vxvrp-elev-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

.vxvrp-elev-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  touch-action: pan-y;
  cursor: grab;
  scrollbar-width: thin;
}

.vxvrp-elev-scroll.vxvrp-dragging {
  cursor: grabbing;
}

.vxvrp-elev-pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  color: var(--ts-shade-1, #222);
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: none !important;
  pointer-events: none;
  backdrop-filter: blur(8px);
}

/* Route edit button */
.vxvrp-route-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  color: var(--ts-shade-1, #222);
  text-decoration: none;
  font-weight: 800;
}
.vxvrp-route-edit-btn:hover {
  filter: brightness(1.02);
}

/* ---------------------------
   Elevation width fixes
   - Planner: no clipping/gaps + allow scroll interaction
   - Shortcode: fit-to-width by default (no horizontal scroll)
   --------------------------- */

/* Allow interacting with the elevation chart even though the statusbar itself is pointer-events:none */
.vxvrp-statusbar .vxvrp-elev-wrap,
.vxvrp-statusbar .vxvrp-elev-scroll {
  pointer-events: auto;
}

/* Prevent earlier fixed height/border rules from clipping the inner scroll container */
.vxvrp-statusbar .vxvrp-elev-wrap {
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

.vxvrp-statusbar .vxvrp-elev-scroll {
  height: 64px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.vxvrp-statusbar .vxvrp-elev-svg {
  height: 100%;
}

/* Make wrapper box model predictable */
.vxvrp-elev-svgwrap {
  box-sizing: border-box;
  max-width: 100%;
}

/* Shortcode: fit mode => never force horizontal scrolling */
.vxvrp-route-elevation[data-fit="1"] .vxvrp-elev-scroll {
  overflow-x: hidden;
}
.vxvrp-route-elevation[data-fit="1"] .vxvrp-elev-svg {
  width: 100% !important;
}