
.vdmmi-map{
  --vdmmi-panel-width:380px;
  --vdmmi-panel-bg:#fff;
  --vdmmi-panel-text:#1f2937;
  --vdmmi-panel-radius:18px;
  --vdmmi-zone:#d4af37;
  --vdmmi-opacity:.25;
  --vdmmi-hover-opacity:.45;
  --vdmmi-stroke:#8c6b12;
  --vdmmi-close:#111827;
  --vdmmi-btn-bg:#111827;
  --vdmmi-btn-text:#fff;
  --vdmmi-map-radius:16px;
  width:100%;
}
.vdmmi-map-inner{display:flex;align-items:stretch;gap:18px;position:relative}
.vdmmi-pos-left .vdmmi-map-inner{flex-direction:row-reverse}
.vdmmi-pos-bottom .vdmmi-map-inner{flex-direction:column}
.vdmmi-image-wrap{position:relative;flex:1 1 auto;min-width:0;line-height:0;border-radius:var(--vdmmi-map-radius);overflow:hidden}
.vdmmi-image{display:block;width:100%;height:auto}
.vdmmi-hotspots{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.vdmmi-hotspot{
  fill:var(--vdmmi-this-zone,var(--vdmmi-zone));
  fill-opacity:var(--vdmmi-opacity);
  stroke:var(--vdmmi-stroke);
  stroke-width:.35;
  vector-effect:non-scaling-stroke;
  cursor:pointer;
  transition:fill-opacity .18s ease, filter .18s ease;
  outline:none;
}
.vdmmi-hotspot:hover,.vdmmi-hotspot:focus,.vdmmi-hotspot.is-active{
  fill-opacity:var(--vdmmi-hover-opacity);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.25));
}
.vdmmi-panel{
  flex:0 0 var(--vdmmi-panel-width);
  max-width:var(--vdmmi-panel-width);
  background:var(--vdmmi-panel-bg);
  color:var(--vdmmi-panel-text);
  border-radius:var(--vdmmi-panel-radius);
  box-shadow:0 18px 45px rgba(17,24,39,.14);
  position:relative;
  opacity:0;
  transform:translateX(16px);
  pointer-events:none;
  max-height:0;
  overflow:hidden;
  transition:opacity .22s ease,transform .22s ease,max-height .35s ease;
}
.vdmmi-pos-left .vdmmi-panel{transform:translateX(-16px)}
.vdmmi-pos-bottom .vdmmi-panel{max-width:none;width:100%;flex-basis:auto;transform:translateY(12px)}
.vdmmi-panel.is-open{opacity:1;transform:none;pointer-events:auto;max-height:1200px}
.vdmmi-panel-scroll{overflow:auto;max-height:700px}
.vdmmi-panel-image{display:block;width:100%;height:auto;max-height:280px;object-fit:cover}
.vdmmi-panel-body{padding:24px}
.vdmmi-subtitle{font-size:12px;text-transform:uppercase;letter-spacing:.1em;opacity:.68;margin-bottom:7px;font-weight:700}
.vdmmi-title{margin:0 36px 12px 0;font-size:26px;line-height:1.15;color:inherit}
.vdmmi-content{font-size:15px;line-height:1.65}
.vdmmi-content p:first-child{margin-top:0}
.vdmmi-button{margin-top:18px;display:inline-flex;align-items:center;justify-content:center;padding:11px 17px;border-radius:10px;background:var(--vdmmi-btn-bg);color:var(--vdmmi-btn-text)!important;text-decoration:none!important;font-weight:700}
.vdmmi-close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:30;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #ffffff;
  border-radius:50%;
  background:#111827;
  color:#ffffff !important;
  font-size:27px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  padding:0;
  box-shadow:0 4px 14px rgba(0,0,0,.30);
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.vdmmi-close:hover,.vdmmi-close:focus{
  background:#000000;
  transform:scale(1.06);
  box-shadow:0 5px 16px rgba(0,0,0,.38);
  outline:none;
}
@media(max-width:820px){
  .vdmmi-map-inner,.vdmmi-pos-left .vdmmi-map-inner{display:block}
  .vdmmi-panel,.vdmmi-pos-left .vdmmi-panel,.vdmmi-pos-bottom .vdmmi-panel{
    position:fixed;
    left:12px;right:12px;bottom:12px;
    width:auto;max-width:none;
    z-index:99999;
    max-height:0;
    transform:translateY(24px);
    border-radius:18px;
  }
  .vdmmi-panel.is-open{max-height:min(78vh,720px);transform:none}
  .vdmmi-panel-scroll{max-height:min(78vh,720px)}
  .vdmmi-panel-body{padding:20px}
  .vdmmi-title{font-size:22px}
}

.vdmmi-custom-content{width:100%}
.vdmmi-custom-content > :first-child{margin-top:0}
.vdmmi-custom-content > :last-child{margin-bottom:0}

.vdmmi-panel{overflow:visible}
.vdmmi-panel-scroll{border-radius:inherit;overflow:auto}
