.travel-map-widget { width: 100%; max-width: 880px; font-family: Arial, sans-serif; margin: 0 auto; }
.travel-map-widget *, .travel-map-widget *::before, .travel-map-widget *::after { box-sizing: border-box; }
.travel-map-canvas { width: 100%; height: 530px; border-radius: 8px; box-shadow: 0 4px 12px rgb(0 0 0 / 10%); background: #e8ecef; z-index: 0; }
.travel-map-carousel { display: flex; align-items: center; gap: 15px; margin: 20px 0; padding: 20px; border-radius: 8px; background: white; box-shadow: 0 2px 8px rgb(0 0 0 / 10%); }
.travel-map-widget .travel-map-arrow { flex: 0 0 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #888; cursor: pointer; font: 48px/1 Arial, sans-serif; }
.travel-map-widget .travel-map-arrow:hover { background: #f1f3f5; color: #ad1700; }
.travel-map-widget button:focus-visible, .travel-map-widget a:focus-visible { outline: 3px solid #ad1700; outline-offset: 3px; }
.travel-map-details { flex: 1; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 15px; text-align: center; }
.travel-map-widget .travel-map-thumbnail { display: block; width: 65px; height: 65px; max-width: none; border-radius: 50%; object-fit: cover; }
.travel-map-text { min-width: 0; overflow-wrap: anywhere; }
.travel-map-widget .travel-map-text h2 { margin: 0 0 8px; padding: 0; font: bold 24px/1.3 Arial, sans-serif; color: #2c3e50; text-transform: none; letter-spacing: normal; }
.travel-map-widget .travel-map-text a { color: inherit; }
.travel-map-widget .travel-map-text a:hover { color: #ad1700; }
.travel-map-widget .travel-map-dates { margin: 0; font-size: 14px; line-height: 1.5; color: #6c757d; }
.travel-map-widget .travel-map-count { margin: 4px 0; font-size: 12px; color: #6c757d; }
.travel-map-widget .travel-map-read { font-size: 13px; }
.travel-map-marker { background: transparent; border: 0; }
.travel-map-marker span { position: absolute; left: 7px; top: 7px; width: 10px; height: 10px; border: 1px solid white; border-radius: 50%; background: #fea32c; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); }
.travel-map-marker.is-selected span { background: #ad1700; width: 12px; height: 12px; left: 6px; top: 6px; }
.travel-map-marker:hover span { background: #ad1700; }
.travel-map-popup { font: 13px/1.5 Arial, sans-serif; }
.travel-map-popup strong { display: block; font-size: 15px; }
.travel-map-widget .travel-map-overview button { display: block; padding: 8px 10px; border: 0; background: white; color: #333; cursor: pointer; font: 13px/1.3 Arial, sans-serif; text-transform: none; letter-spacing: normal; }
.travel-map-widget .leaflet-control-attribution { font: 11px/1.5 Arial, sans-serif; }
.travel-map-widget .leaflet-control-attribution a { color: #076b9e; }
.map-loading, .map-error { padding: 40px 20px; text-align: center; }
.map-error { color: #ad1700; }
.travel-map-notice { margin: 10px 0; font-size: 13px; color: #6c757d; }
.travel-map-notice[hidden] { display: none; }
@media (max-width: 600px) {
  .travel-map-canvas { height: 60vh; min-height: 330px; max-height: 530px; }
  .travel-map-carousel { padding: 12px 6px; gap: 6px; }
  .travel-map-widget .travel-map-arrow { flex-basis: 34px; height: 44px; font-size: 40px; }
  .travel-map-details { flex-direction: column; gap: 10px; }
  .travel-map-widget .travel-map-thumbnail { width: 50px; height: 50px; }
  .travel-map-widget .travel-map-text h2 { font-size: 18px; }
  .travel-map-widget .travel-map-dates { font-size: 13px; }
}