.vds-map-wrapper,
.vds-map-container,
.vds-map,
.vds-map-root {
position: relative;
width: 100%;
max-width: 100%;
} .vds-map-stage {
position: relative;
width: 100%;
min-height: 320px;
overflow: hidden;
cursor: grab;
touch-action: none;
user-select: none;
-webkit-user-select: none;
background: #fff;
}
.vds-map-stage.is-dragging {
cursor: grabbing;
} .vds-map-layer {
position: relative;
transform-origin: center center;
will-change: transform;
} .vds-map-stage svg,
.vds-map-container svg,
.vds-map svg {
display: block;
width: 100%;
height: auto;
max-width: 100%;
} .pc4-area,
.vds-region {
transition: opacity .12s ease, filter .12s ease;
}
.pc4-area:hover,
.vds-region:hover {
opacity: 0.92;
filter: brightness(0.98);
} .vds-map-tooltip {
position: fixed;
z-index: 999999;
pointer-events: none;
background: rgba(20, 20, 20, 0.94);
color: #fff;
padding: 8px 10px;
border-radius: 8px;
font-size: 13px;
line-height: 1.35;
white-space: pre-line;
box-shadow: 0 8px 20px rgba(0,0,0,.18);
opacity: 0;
transition: opacity .12s ease;
max-width: min(320px, calc(100vw - 16px));
}
.vds-map-tooltip.is-visible {
opacity: 1;
} .vds-modal {
display: none;
position: fixed;
z-index: 99990;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
}
.vds-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(95vw, 1400px);
height: min(90vh, 1000px);
background: #fff;
border-radius: 12px;
padding: 12px;
overflow: hidden;
box-sizing: border-box;
}
.vds-map {
width: 100%;
height: 100%;
}
.vds-close {
position: absolute;
right: 12px;
top: 6px;
font-size: 28px;
line-height: 1;
cursor: pointer;
z-index: 5;
} .vds-map-btn {
display: inline-block;
cursor: pointer;
} @media (max-width: 768px) {
.vds-map-stage {
min-height: 240px;
}
.vds-modal-content {
width: 96vw;
height: 88vh;
padding: 10px;
}
.vds-map-tooltip {
font-size: 12px;
padding: 7px 9px;
}
} .vds-modal .vds-map {
width: 100%;
height: calc(100% - 10px);
min-height: 500px;
}
.vds-modal .vds-map-stage {
width: 100%;
height: 100%;
min-height: 500px;
}
.vds-modal .vds-map-layer {
width: 100%;
height: 100%;
}
.vds-modal .vds-map-stage svg {
width: 100%;
height: 100%;
max-width: none;
}