.ticket-map-panel {
  position: sticky;
  top: 14px;
  overflow: hidden;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.94), rgba(247, 238, 224, 0.88));
}

.tickets-map {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid rgba(126, 91, 52, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(126, 91, 52, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(126, 91, 52, 0.045) 1px, transparent 1px),
    rgba(255, 250, 241, 0.76);
  background-size: 36px 36px;
}

.tickets-map svg {
  width: 100%;
  height: 100%;
  min-height: 330px;
  display: block;
}

.map-river {
  fill: none;
  stroke: rgba(121, 162, 176, 0.32);
  stroke-width: 22;
  stroke-linecap: round;
}

.map-route {
  fill: none;
  stroke: rgba(135, 100, 47, 0.5);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 8;
}

.map-marker {
  cursor: pointer;
}

.map-marker circle:first-child {
  fill: rgba(168, 122, 62, 0.28);
}

.map-marker circle:nth-child(2) {
  fill: #a87a3e;
  stroke: #fffaf2;
  stroke-width: 2;
}

.map-marker.is-active circle:first-child {
  fill: rgba(168, 67, 52, 0.22);
}

.map-marker.is-active circle:nth-child(2) {
  fill: #a84334;
}

.map-marker text {
  fill: #5a4b3c;
  font: 700 11px Arial, sans-serif;
  paint-order: stroke;
  stroke: rgba(255, 250, 242, 0.9);
  stroke-width: 3px;
}

.map-marker-list {
  display: grid;
  gap: 8px;
  max-height: 230px;
  overflow: auto;
  margin-top: 12px;
  padding-right: 2px;
}

.map-marker-list button {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(126, 91, 52, 0.16);
  border-radius: 13px;
  padding: 8px 10px;
  color: #3f332a;
  background: rgba(255, 255, 255, 0.5);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.map-marker-list button strong,
.map-marker-list button span {
  display: block;
  overflow-wrap: anywhere;
}

.map-marker-list button strong {
  font-size: 0.86rem;
}

.map-marker-list button span {
  color: #756a5b;
  font-size: 0.78rem;
}

.map-marker-list button.is-active {
  border-color: rgba(168, 67, 52, 0.38);
  background: rgba(168, 67, 52, 0.09);
}

.map-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  color: #756a5b;
  text-align: center;
  padding: 20px;
}

@media (max-width: 1160px) {
  .ticket-map-panel {
    position: static;
  }
}

@media (max-width: 760px) {
  .ticket-map-panel {
    padding: 12px;
  }

  .tickets-map {
    min-height: 260px;
  }

  .tickets-map svg {
    min-height: 260px;
  }

  .map-marker-list {
    max-height: 170px;
  }
}

@media (max-width: 360px) {
  .tickets-map,
  .tickets-map svg {
    min-height: 248px;
  }
}
/* ChinaRoute generated map fallback asset */
.tickets-map {
  background-image:
    linear-gradient(rgba(255,250,241,.30), rgba(255,250,241,.30)),
    linear-gradient(90deg, rgba(126,91,52,.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(126,91,52,.04) 1px, transparent 1px),
    url("../assets/generated/map-fallback-china.webp");
  background-size: auto, 36px 36px, 36px 36px, cover;
  background-position: center;
}

.tickets-map svg {
  background: rgba(255,250,241,.10);
}