#us-office-map { max-width: 100%; height: auto; position:relative; margin: 0 auto }
#us-office-map svg { width: 100%; height: auto; height: auto }
#us-office-map .state { transition: fill 150ms ease-in-out; cursor: pointer; outline: none; stroke: #333; stroke-width: var(--state-gap, 1px); stroke-linejoin: round }
#us-office-map .state:focus { outline: 3px solid rgba(0,123,255,0.5); }
#us-map-tooltip { position:absolute; display:none; pointer-events:none; z-index:9999; border-radius:999px; padding:6px 10px; background: #fff; color:var(--uomap-accent,#1f78b4); font-weight:700; box-shadow:0 6px 18px rgba(12,16,20,0.06); font-size:13px; min-width:32px; height:32px; display:flex; align-items:center; justify-content:center }
#us-map-tooltip.small-badge { min-width:32px; height:32px; padding:0 10px }
#us-map-tooltip .us-tooltip-count { color:var(--uomap-accent,#1f78b4); font-weight:700 }
/* removed: previous tooltip arrow/panel styles to keep badge minimal */
#us-map-details { box-shadow: 0 2px 12px rgba(0,0,0,0.08); background: #fff; padding: 14px; border-radius: 6px; border:1px solid #e9e9e9 }
#us-map-details .us-details-content { margin-top: 8px }
.us-office-detail { border-top:1px solid #eee; padding-top:8px }
#us-map-details h2 { margin:0 0 8px 0; font-size:18px }
#us-map-details .us-details-close { float:right; background:transparent;border:0;color:#666;font-weight:bold }
#us-map-details .us-office-detail strong { display:block; font-size:14px; margin-bottom:4px }
#us-map-details .us-office-detail { padding-bottom:10px }

/* Modal styling and polish */
:root { --uomap-accent: #1f78b4; --uomap-mask: #ffffff; --uomap-modal-bg: #ffffff; --uomap-text: #222 }
#us-map-modal-overlay { display:none }
#us-map-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) translateY(-8px) scale(0.995); z-index:100000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:var(--uomap-text); background:var(--uomap-modal-bg); border:1px solid rgba(0,0,0,0.06); width:560px; max-width:92%; border-radius:10px; padding:0; overflow:hidden; opacity:0; transition: all 220ms cubic-bezier(.2,.8,.2,1); box-shadow:0 20px 60px rgba(13,22,26,0.18) }
#us-map-modal.uomap-open { transform:translate(-50%,-50%) translateY(0) scale(1); opacity:1 }
#us-map-modal .us-map-modal-header { background:linear-gradient(90deg,var(--uomap-mask,#ffffff), #fff); padding:12px 16px; color:var(--uomap-modal-header-text,#fff); font-weight:700; display:flex; align-items:center; justify-content:space-between }
#us-map-modal .us-map-modal-title { margin:0; font-size:15px; display:flex; align-items:center; gap:10px; flex:1; text-align:left; color:var(--uomap-accent,#1f78b4) }
#us-map-modal .us-map-modal-close { background:var(--uomap-mask,#ffffff); border:0; color:var(--uomap-accent,#1f78b4); font-weight:700; padding:8px 12px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,0.06); cursor:pointer; transition: transform 180ms ease, box-shadow 180ms ease }
#us-map-modal .us-map-modal-close:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.08); }
#us-map-modal #us-map-modal-content { padding:14px 16px; font-size:13px }
#us-map-modal .us-office-block { border-bottom:1px solid rgba(0,0,0,0.06); padding:10px 0; }
#us-map-modal .us-office-block:last-child { border-bottom:0 }
#us-map-modal .us-office-address { color:#333; margin-bottom:6px }
#us-map-modal .us-office-title { color:var(--uomap-mask,#ffffff); font-weight:600; font-size:14px; margin-bottom:6px }
#us-map-modal a { color:var(--uomap-accent,#1f78b4); text-decoration:none }
#us-map-modal a:hover { text-decoration:underline }

#us-map-modal-overlay { position:fixed; inset:0; display:none; background:rgba(0,0,0,0.45); z-index:99990; opacity:0; transition: opacity 160ms ease-in }
#us-map-modal-overlay.uomap-open { display:block; opacity:1 }


/* Overlay visible */
#us-map-modal-overlay.uomap-open { display:block; opacity:1; transition: opacity 160ms ease-in }

/* Responsive tweaks */
@media (max-width: 480px) {
  #us-map-modal { width:94%; border-radius:8px }
  #us-map-modal .us-map-modal-header { padding:10px }
}



/* responsive details panel on small screens */
@media (max-width: 480px) {
  #us-map-details { width:100%; box-sizing:border-box }
  #us-map-details .us-details-close { position: absolute; right: 12px; top: 12px }
}