.map-frame { height: 420px; }
#tripMap { width: 100%; height: 100%; z-index: 1; }
.map-label { z-index: 500; }
.transport-guide { margin-top: 18px; padding: 16px; border-radius: 15px; background: var(--ink); color: white; }
.transport-guide .eyebrow { color: #f1b35a; }
.transport-guide h3 { margin: 5px 0; font: 600 18px Georgia,serif; }
.transport-guide p { color: #c4d2cf; font-size: 10px; margin: 5px 0 12px; }
.transport-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.transport-tags span { padding: 4px 7px; border-radius: 20px; background: rgba(255,255,255,.1); font-size: 9px; }
.transport-guide a { color: #ffc071; font-size: 10px; text-decoration: none; font-weight: 800; }
.places-panel { background: var(--card); padding: 16px 20px 18px; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 18px; }
.places-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.places-head h3 { font: 600 19px Georgia,serif; margin: 3px 0; }
.route-button { display: inline-flex; padding: 8px 11px; border-radius: 9px; background: var(--green); color: white; text-decoration: none; font-size: 10px; font-weight: 800; margin-left: 5px; }
.route-button.transit { background: var(--blue); }
.map-attractions { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; scrollbar-width: thin; }
.map-place { flex: 0 0 185px; border: 1px solid var(--line); border-radius: 13px; padding: 10px; background: white; cursor: pointer; display: grid; grid-template-columns: 25px 1fr; gap: 8px; text-align: left; color: var(--ink); }
.map-place:hover, .map-place.active { border-color: var(--coral); background: #fff8f4; }
.place-number { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--coral); color: white; font-size: 10px; font-weight: 800; }
.map-place strong { display: block; font-size: 11px; }
.map-place small { color: var(--muted); font-size: 9px; }
.map-pin { background: var(--coral); color: white; border: 2px solid white; border-radius: 50% 50% 50% 0; width: 28px!important; height: 28px!important; transform: rotate(-45deg); box-shadow: 0 3px 9px rgba(0,0,0,.25); display: grid!important; place-items: center; font-weight: 800; font-size: 10px; }
.map-pin span { transform: rotate(45deg); }
.hotel-pin { background: var(--blue); color: white; border: 3px solid white; border-radius: 50% 50% 50% 0; width: 34px!important; height: 34px!important; transform: rotate(-45deg); box-shadow: 0 4px 12px rgba(0,0,0,.3); display: grid!important; place-items: center; }
.hotel-pin span { transform: rotate(45deg); font-size: 15px; }
.hotel-place { border-color: #b8ccd9; background: #f3f8fb; }
.hotel-place .place-number { background: var(--blue); font-size: 12px; }
.hotel-place:hover, .hotel-place.active { border-color: var(--blue); background: #e8f2f8; }
.leaflet-popup-content { font-family: Inter,system-ui,sans-serif; margin: 13px 16px; }
.leaflet-popup-content strong { color: var(--ink); }
.leaflet-popup-content a { color: var(--coral); text-decoration: none; font-weight: 800; }
.leaflet-tooltip.map-label-pt { background: rgba(255,255,255,.94); border: 1px solid rgba(28,54,57,.18); border-radius: 7px; box-shadow: 0 2px 8px rgba(20,40,43,.16); color: var(--ink); font: 700 10px/1.2 Inter,system-ui,sans-serif; padding: 4px 7px; white-space: nowrap; }
.leaflet-tooltip-top.map-label-pt::before { border-top-color: rgba(255,255,255,.94); }
@media(max-width:760px){.map-frame{height:300px}.places-head{align-items:flex-start;flex-direction:column}.route-button{margin:0 5px 0 0}.map-attractions{padding-bottom:4px}}