.complex-map-frame { position: relative; isolation: isolate; height: 300px; background: #f3f4f6; overflow: hidden; }
.complex-map-canvas { width: 100%; height: 100%; pointer-events: none; }
.complex-map-frame.is-active .complex-map-canvas { pointer-events: auto; }
.complex-map-activate { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: #4b5563; font: inherit; font-size: 12px; cursor: pointer; touch-action: pan-y; }
.complex-map-activate span { position: absolute; bottom: 38px; left: 50%; transform: translateX(-50%); padding: 6px 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; white-space: nowrap; }
.complex-map-activate[hidden] { display: none; }
.complex-map-activate:focus-visible { outline: 2px solid #111827; outline-offset: -2px; }
.complex-map-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 20px; text-align: center; pointer-events: none; }
.complex-map-status[hidden] { display: none; }
.complex-map-head .complex-map-address { overflow-wrap: anywhere; }
.complex-map-details { margin-top: 12px; text-align: right; }
.complex-map-canvas:focus-visible { outline: 2px solid #111827; outline-offset: -2px; }
@media (min-width: 769px) { .complex-map-frame { height: 360px; } }