/* Safari route and destination maps (public/js/safari-map.js), brand colours only. */
.safari-map {
    --sm-dark: #2B1E12; --sm-brown: #5A3E1B; --sm-muted: #8A6A3F; --sm-gold: #D4A857;
    --sm-cream: #FFFAF2; --sm-line: #D9C3AD; --sm-display: 'Playfair Display', Georgia, serif;
    position: relative; isolation: isolate; z-index: 0; overflow: hidden;
    height: 440px; width: calc(100% - 12px); margin: 0 6px;
    border: 1px solid var(--sm-line); border-radius: 2px; background: #EFE4D2;
    box-shadow: 0 0 0 5px var(--sm-cream), 0 0 0 6px var(--sm-line), 0 18px 40px -24px rgba(43, 30, 18, .45);
}
@media (min-width: 640px) { .safari-map { height: 600px; } }
.safari-map--short { height: 380px; }
@media (min-width: 640px) { .safari-map--short { height: 460px; } }
.safari-map.leaflet-container { background: #EFE4D2; font-family: 'Poppins', sans-serif; }
.safari-map .safari-map__tiles { filter: sepia(.22) saturate(1.15) brightness(1.03) contrast(.94); }
.safari-map noscript ul, .safari-map__fallback { padding: 24px; font-size: 14px; color: var(--sm-dark); }

/* Photo pins */
.safari-pin { border-radius: 9999px; }
.safari-pin__photo {
    display: block; width: 100%; height: 100%; border: 3px solid var(--sm-cream); border-radius: 9999px;
    background: var(--sm-brown) center / cover no-repeat; transition: transform .2s;
    box-shadow: 0 0 0 2px var(--sm-brown), 0 6px 14px rgba(43, 30, 18, .4);
}
.safari-pin:hover .safari-pin__photo, .safari-pin:focus .safari-pin__photo { transform: scale(1.08); }
.safari-pin__badge {
    position: absolute; top: -6px; left: -6px; display: flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 5px; border: 2px solid var(--sm-cream); border-radius: 9999px;
    background: var(--sm-dark); color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
    box-shadow: 0 2px 5px rgba(43, 30, 18, .35);
}
.safari-pin__badge svg { width: 12px; height: 12px; }
.safari-pin--start .safari-pin__photo { box-shadow: 0 0 0 2px var(--sm-gold), 0 6px 14px rgba(43, 30, 18, .4); }
.safari-pin--start .safari-pin__badge { background: var(--sm-gold); color: var(--sm-dark); }
.safari-pin--plain .safari-pin__photo { background-image: linear-gradient(135deg, var(--sm-muted), var(--sm-brown)); }
.safari-pin--other .safari-pin__photo { background: var(--sm-brown); border-width: 2px; box-shadow: 0 2px 5px rgba(43, 30, 18, .35); }

/* Car and plane on each leg */
.safari-leg span {
    display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 9999px; background: var(--sm-cream); box-shadow: 0 1px 4px rgba(43, 30, 18, .35);
}
.safari-leg svg { width: 16px; height: 16px; }
.safari-leg--flight { color: var(--sm-dark); }
.safari-leg--drive { color: var(--sm-brown); }

/* Callouts */
.safari-map .leaflet-tooltip.safari-callout {
    padding: 6px 12px 7px; border: 1px solid var(--sm-line); border-radius: 3px; background: var(--sm-cream);
    color: var(--sm-dark); line-height: 1.25; white-space: nowrap; box-shadow: 0 4px 12px rgba(43, 30, 18, .2);
}
.safari-map .leaflet-tooltip.safari-callout::before { display: none; }
.safari-callout__name { display: block; font-family: var(--sm-display); font-size: 14px; font-weight: 600; }
.safari-callout__note { display: block; margin-top: 1px; color: var(--sm-brown); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.safari-map .leaflet-tooltip.safari-callout--small { padding: 3px 9px; font-size: 12px; font-weight: 600; }

/* Legend, compass and controls */
.safari-map-legend {
    margin: 0 0 12px 12px !important; padding: 7px 10px; border: 1px solid var(--sm-line); border-radius: 3px;
    background: rgba(255, 250, 242, .95); color: var(--sm-dark); font-size: 11px; box-shadow: 0 4px 12px rgba(43, 30, 18, .15);
}
@media (min-width: 640px) { .safari-map-legend { padding: 10px 14px; font-size: 12px; } }
.safari-map-legend ul { margin: 0; padding: 0; list-style: none; }
.safari-map-legend li { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.safari-map-legend__line { display: block; flex-shrink: 0; width: 30px; height: 0; }
.safari-map-legend__line--flight { border-top: 3px dotted var(--sm-dark); }
.safari-map-legend__line--drive { border-top: 4px solid var(--sm-brown); border-radius: 2px; }
.safari-map-legend__stop {
    display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0 5px;
    border-radius: 9999px; background: var(--sm-dark); color: #fff; font-size: 11px; font-weight: 700;
}
.safari-map-legend__park { display: block; flex-shrink: 0; width: 20px; height: 20px; margin: 0 5px; border-radius: 9999px; background: rgba(212, 168, 87, .4); }
.safari-map-compass { width: 44px; margin: 10px 10px 0 0 !important; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(43, 30, 18, .25)); }
@media (min-width: 640px) { .safari-map-compass { width: 58px; } }
.safari-map .leaflet-control-scale-line { border-color: var(--sm-dark); background: rgba(255, 250, 242, .85); color: var(--sm-dark); font-size: 10px; }
.safari-map .leaflet-bar { border: 1px solid var(--sm-line); box-shadow: 0 4px 12px rgba(43, 30, 18, .15); }
.safari-map .leaflet-bar a { border-bottom-color: var(--sm-line); background: var(--sm-cream); color: var(--sm-dark); }
.safari-map .leaflet-control-attribution { background: rgba(255, 250, 242, .8); font-size: 10px; }

/* Popups */
.safari-map .leaflet-popup-content-wrapper { overflow: hidden; padding: 0; border-radius: 3px; background: var(--sm-cream); box-shadow: 0 12px 30px rgba(43, 30, 18, .3); }
.safari-map .leaflet-popup-content { width: 220px !important; margin: 0; padding: 0 0 16px; }
.safari-map .leaflet-popup-tip { background: var(--sm-cream); }
.safari-map .leaflet-popup-close-button {
    top: 6px !important; right: 6px !important; width: 24px !important; height: 24px !important; border-radius: 9999px;
    background: rgba(255, 250, 242, .9) !important; color: var(--sm-dark) !important; font: 18px/22px sans-serif !important;
}
.safari-map .safari-map-popup-image { display: block; width: 100%; height: 110px; object-fit: cover; }
.safari-map .safari-map-popup-title { margin: 14px 36px 0 16px; font-family: var(--sm-display); font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--sm-dark); }
.safari-map .safari-map-popup-note { margin: 2px 16px 0; color: var(--sm-brown); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.safari-map .safari-map-popup-link {
    display: inline-block; margin: 10px 16px 0; padding: 7px 12px; border-radius: 2px; background: var(--sm-brown);
    color: #fff !important; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.safari-map .safari-map-popup-link:hover { background: var(--sm-dark); }

/* Stop list under the map */
.safari-route-stops { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 18px; font-size: 14px; color: #6B4F2A; list-style: none; padding: 0; }
.safari-route-stops li { display: flex; align-items: center; gap: 8px; }
.safari-route-stops a { font-weight: 600; color: var(--sm-brown, #5A3E1B); text-decoration: none; }
.safari-route-stops a:hover { color: #2B1E12; text-decoration: underline; }
.safari-route-stops .safari-route-stops__arrow { color: #D4A857; }
.safari-route-stops small { font-size: 12px; color: #8A6A3F; }