.woms-wrapper { max-width:1200px; margin:0 auto; padding:12px; box-sizing:border-box; }
.woms-map {
    position: relative;
    width: 100%;
    border-radius:4px;
    overflow: visible;
}

/* Aseguramos que la imagen ocupe la anchura disponible y sea el referente para posicionar los marcadores */
.woms-map-img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* Marker */
.woms-marker {
    position: absolute;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -100%);
    z-index: 5;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
}
.woms-marker .dot {
    width:14px;
    height:14px;
    background:#0ea5bd;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 0 0 6px rgba(14,165,189,0.09);
}

/* Card */
.woms-card {
    position: absolute;
    min-width:200px;
    max-width:320px;
    background: #fff;
    color:#012;
    border-radius:6px;
    padding:10px;
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
    z-index:10;
    opacity:0;
    pointer-events:none;
    transition: opacity .18s, transform .18s;
}
.woms-card.visible { opacity:1; pointer-events:auto; }
.woms-card:after{ content:""; position:absolute; width:10px; height:10px; transform:rotate(45deg); background:#fff; left:12px; top:-6px; }

/* Card text */
.woms-card .country{ font-weight:700; margin-bottom:6px; }
.woms-card .address{ white-space:pre-line; font-size:13px; color:#234; }

/* Responsive */
@media (max-width:900px){
    .woms-map{ width:100%; }
    .woms-wrapper { padding: 8px; }
}