.tws-route-visual { background:#fff; border-bottom:1px solid var(--tws-line); padding:16px 22px 18px; }
.tws-route-visual__heading { align-items:center; display:flex; gap:8px; }
.tws-route-visual__heading>.tws-icon { color:var(--tws-gold); height:24px; width:24px; }
.tws-route-visual__heading h3 { font-size:17px; margin:1px 0 0; }
.tws-route-visual__stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:12px 0 10px; }
.tws-route-visual__stats>div { border-left:1px solid var(--tws-line); display:flex; flex-direction:column; padding:0 10px; }
.tws-route-visual__stats>div:first-child { border-left:0; padding-left:0; }
.tws-route-visual__stats span { color:var(--tws-muted); font-size:9px; letter-spacing:.04em; text-transform:uppercase; }
.tws-route-visual__stats strong { font-size:13px; margin-top:2px; }
.tws-route-map { border:1px solid var(--tws-line); border-radius:8px 8px 0 0; box-sizing:border-box; contain:layout paint; flex:none; height:450px!important; max-height:450px!important; min-height:450px!important; overflow:hidden!important; position:relative!important; transform:none!important; translate:none!important; will-change:auto!important; }
.tws-route-map[hidden] { display:none; }
.tws-route-map__canvas,
.tws-route-map__canvas.mapboxgl-map { box-sizing:border-box; height:100%!important; inset:0; max-height:none!important; max-width:none!important; min-height:0; overflow:hidden!important; position:absolute!important; transform:none!important; translate:none!important; width:100%!important; will-change:auto!important; }
.tws-route-map__canvas .mapboxgl-canvas-container,
.tws-route-map__canvas .mapboxgl-canvas { height:100%!important; inset:0!important; margin:0!important; max-height:none!important; max-width:none!important; min-height:0!important; min-width:0!important; position:absolute!important; transform:none!important; translate:none!important; width:100%!important; will-change:auto!important; }
.tws-route-map__canvas .mapboxgl-control-container { inset:0; pointer-events:none; position:absolute; }
.tws-route-map__canvas .mapboxgl-control-container .mapboxgl-ctrl { pointer-events:auto; }
.tws-route-map__error { align-items:center; background:#f7f5f2; color:var(--tws-muted); display:flex; font-size:12px; inset:0; justify-content:center; margin:0!important; padding:20px; position:absolute; text-align:center; z-index:3; }
.tws-route-map__error[hidden] { display:none; }
.tws-route-map__endpoint { background:#fff; border:3px solid var(--tws-gold-dark); border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.22); display:block; height:13px; width:13px; }
.tws-route-map__endpoint--end { background:var(--tws-gold-dark); border-color:#fff; }
.tws-route-map__position { background:var(--tws-gold); border:3px solid #fff; border-radius:50%; box-shadow:0 2px 10px rgba(0,0,0,.3); display:block; height:17px; width:17px; }
.tws-route-map__waypoint { cursor:pointer; display:block; height:24px; outline:0; position:relative; width:20px; }
.tws-route-map__waypoint::before { background:var(--tws-gold); border:2px solid #fff; border-radius:50% 50% 50% 0; box-shadow:0 2px 8px rgba(0,0,0,.3); content:""; height:16px; left:1px; position:absolute; top:1px; transform:rotate(-45deg); transition:box-shadow .15s ease,scale .15s ease; width:16px; }
.tws-route-map__waypoint::after { background:#fff; border-radius:50%; content:""; height:5px; left:7px; position:absolute; top:7px; width:5px; }
.tws-route-map__waypoint:hover::before,.tws-route-map__waypoint:focus-visible::before,.tws-route-map__waypoint.is-active::before { box-shadow:0 0 0 4px rgba(139,94,60,.24),0 3px 10px rgba(0,0,0,.34); scale:1.15; }
.tws-route-map__waypoint-popup .mapboxgl-popup-content { background:#211d19; border-radius:7px; color:#fff; font-size:10px; font-weight:700; padding:6px; }
.tws-route-map__waypoint-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { border-top-color:#211d19; }
.tws-route-map__waypoint-content { align-items:center; display:flex; gap:6px; max-width:132px; }
.tws-route-map__waypoint-content>strong { line-height:1.15; max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tws-route-map__waypoint-photo { background:transparent; border:0; border-radius:5px; cursor:pointer; flex:none; height:36px; margin:0; overflow:hidden; padding:0; position:relative; width:48px; }
.tws-route-map__waypoint-photo img { display:block; height:36px; object-fit:cover; width:48px; }
.tws-route-map__waypoint-photo span { align-items:center; background:rgba(20,18,16,.66); bottom:0; color:#fff; display:flex; font-size:9px; inset-inline:0; justify-content:center; line-height:14px; position:absolute; }
.tws-route-map__waypoint-photo:focus-visible { outline:2px solid #d9b28d; outline-offset:2px; }
.tws-route-map__recenter span { font-size:21px; line-height:1; }
.tws-elevation-profile__chart { border:1px solid var(--tws-line); border-radius:0 0 8px 8px; border-top:0; height:200px; position:relative; touch-action:pan-y; user-select:none; width:100%; }
.tws-elevation-profile__chart svg { display:block; height:100%; overflow:visible; width:100%; }
.tws-elevation-chart__grid line { stroke:#e8e4de; stroke-width:1; }
.tws-elevation-chart__grid text { fill:#77716a; font-family:inherit; font-size:9px; }
.tws-elevation-chart__area { fill:rgba(139,94,60,.14); stroke:none; }
.tws-elevation-chart__line { fill:none; stroke:var(--tws-gold); stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.tws-elevation-chart__guide { opacity:0; stroke:rgba(104,66,41,.5); stroke-dasharray:3 3; stroke-width:1; }
.tws-elevation-chart__marker { fill:#fff; opacity:0; stroke:var(--tws-gold-dark); stroke-width:2; }
.tws-elevation-waypoint { cursor:pointer; outline:none; }
.tws-elevation-waypoint__hit { fill:transparent; pointer-events:all; stroke:none; }
.tws-elevation-waypoint__dot { fill:var(--tws-gold); pointer-events:none; stroke:#fff; stroke-width:1; transition:filter .15s ease,r .15s ease; }
.tws-elevation-waypoint:hover .tws-elevation-waypoint__dot,.tws-elevation-waypoint:focus-visible .tws-elevation-waypoint__dot,.tws-elevation-waypoint.is-active .tws-elevation-waypoint__dot { filter:drop-shadow(0 0 2px rgba(104,66,41,.7)); r:3px; }
.tws-elevation-profile__chart.is-active .tws-elevation-chart__guide,.tws-elevation-profile__chart.is-active .tws-elevation-chart__marker { opacity:1; }
.tws-elevation-chart__tooltip { background:#211d19; border-radius:5px; box-shadow:0 5px 16px rgba(0,0,0,.16); color:#fff; display:flex; font-size:10px; gap:7px; line-height:1; padding:7px 8px; pointer-events:none; position:absolute; transform:translateX(-50%); white-space:nowrap; z-index:2; }
.tws-elevation-chart__tooltip span { color:#d8c2ad; }
.tws-elevation-chart__tooltip.is-waypoint { align-items:center; gap:7px; max-width:160px; padding:5px; pointer-events:auto; }
.tws-elevation-waypoint__copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.tws-elevation-waypoint__copy strong { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tws-elevation-waypoint__photo { background:transparent; border:0; border-radius:5px; cursor:pointer; flex:none; height:48px; margin:0; overflow:hidden; padding:0; position:relative; width:64px; }
.tws-elevation-waypoint__photo img { display:block; height:48px; object-fit:cover; width:64px; }
.tws-elevation-waypoint__photo>span { align-items:center; background:rgba(20,18,16,.68); bottom:0; color:#fff; display:flex; font-size:9px; inset-inline:0; justify-content:center; line-height:14px; position:absolute; }
.tws-elevation-waypoint__photo:focus-visible { outline:2px solid #d9b28d; outline-offset:1px; }
.tws-elevation-chart__tooltip[hidden] { display:none; }
@media(max-width:768px){
	.tws-route-visual { align-self:auto; aspect-ratio:auto; display:block; flex:none; grid-auto-rows:auto; height:auto; min-height:0; overflow:hidden; padding:14px 14px 0; }
	.tws-route-visual__stats { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:9px; }
	.tws-route-visual__stats>div:nth-child(3) { border-left:0; padding-left:0; }
	.tws-route-map { height:300px!important; max-height:300px!important; min-height:300px!important; }
	.tws-elevation-profile__chart { align-self:auto; aspect-ratio:auto!important; box-sizing:border-box; display:block; flex:none; grid-auto-rows:auto; height:auto!important; margin:0!important; max-height:none!important; min-height:0!important; overflow:hidden; padding:0!important; }
	.tws-elevation-profile__chart>svg { aspect-ratio:auto!important; display:block; height:156px!important; inset:auto; margin:0!important; max-height:156px!important; min-height:156px!important; padding:0!important; position:static!important; width:100%!important; }
}
@media(max-width:540px){
	.tws-route-visual { padding:12px 10px 0; }
	.tws-route-visual__stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
	.tws-route-visual__stats>div:nth-child(3) { border-left:0; padding-left:0; }
	.tws-route-visual__stats>div:nth-child(4) { border-left:1px solid var(--tws-line); padding-left:10px; }
	.tws-route-map { height:300px!important; max-height:300px!important; min-height:300px!important; }
}
