.tt-route-card { min-width: 0; isolation: isolate; }
.tt-route-card > * { position: relative; }
.tt-route-card::before { pointer-events: none; }
.tt-map-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.tt-map-heading h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); color: #fff; margin: 0; line-height: 1.3; }
.tt-map-chip { color: #ffcd4a; background: #28251b; border: 1px solid #66552d; padding: 3px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tt-map-display { position: relative; border: 1px solid #364144; border-radius: 16px; overflow: hidden; background: #1c282d; }
.tt-map-svg { display: block; width: 100%; height: auto; }
.tt-map-label { fill: #f4f2e8; stroke: #1b2528; stroke-width: 4; stroke-linejoin: round; paint-order: stroke; font: 650 14px system-ui, sans-serif; }
.tt-water-label { fill: #89a7b2; font: 650 10px system-ui, sans-serif; letter-spacing: .18em; text-anchor: middle; }
.tt-motion { position: absolute; top: 7px; right: 7px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #536268; border-radius: 99px; background: #172024; color: #f4f4f1; padding: 4px 8px; font: 650 10px/1.5 system-ui, sans-serif; cursor: pointer; }
.tt-motion[hidden], .tt-motion .tt-motion-play, .tt-motion[data-stopped="true"] .tt-motion-pause { display: none; }
.tt-motion[data-stopped="true"] .tt-motion-play { display: block; }
.tt-motion svg { width: 12px; height: 12px; }
.tt-motion:hover { border-color: #ffcd4a; }
.tt-route-card :focus-visible { outline: 2px solid #ffcb33; outline-offset: 2px; }
.tt-route-card p.tt-map-note { color: #c4c9cb; margin: 12px 0; font-size: 13px; line-height: 1.55; }
.tt-map-links { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-map-links a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #495052; border-radius: 99px; padding: 4px 10px; color: #e9eceb; font-size: 12px; }
.tt-map-links a:hover { color: #ffcc4b; border-color: #96804b; }
.tt-map-links a span { color: #ffca3d; }
.tt-route-card .map-foot { display: flex; flex-wrap: wrap; }
.tt-route-card .map-foot a { flex: 1; white-space: nowrap; }
.tt-route-card .map-foot svg { width: 18px; height: 18px; flex: 0 0 18px; }
@media (max-width: 992px) {
  .tt-motion { right: auto; left: 50%; transform: translateX(-50%); min-height: 25px; }
  .tt-map-heading h3 { color: #18181b; font-size: 17px; }
  .tt-map-heading { margin-bottom: 12px; }
  .tt-map-chip { color: #614700; background: #fff4ca; border-color: #e4cc72; }
  .tt-route-card p.tt-map-note { color: #535b62; font-size: 12px; }
  .tt-map-links a { color: #25282a; border-color: #dddfe1; background: #fafaf8; }
  .tt-map-links a span { color: #765600; }
  .tt-map-links a:hover { color: #614700; }
}
@media (max-width: 374px) {
  .tt-route-card .map-foot .btn { font-size: 11px !important; gap: 4px; }
  .tt-route-card .map-foot .btn svg { width: 14px; height: 14px; flex-basis: 14px; }
}