.sx-map-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(3px);
  z-index:9999;
}

.sx-map-modal.is-open{
  display:flex;
}

.sx-map-modal__card{
  width:min(1080px, calc(100vw - 32px));
  max-height:calc(100vh - 32px);
  background:#fff;
  border-radius:18px;
  box-shadow:0 28px 70px rgba(15,23,42,.28);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.sx-map-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-bottom:1px solid #e5e7eb;
}

.sx-map-modal__title{
  font-size:22px;
  font-weight:700;
  color:#0f172a;
}

.sx-map-modal__close{
  width:42px;
  height:42px;
  border:0;
  border-radius:12px;
  background:#f1f5f9;
  color:#0f172a;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.sx-map-modal__close:hover{
  background:#e2e8f0;
}

.sx-map-modal__close svg{
  width:22px;
  height:22px;
}

.sx-map-modal__viewport{
  padding:20px;
  background:#f8fafc;
  flex: 1;
  display: flex;
  width: 100%;
  max-height: 65dvh;
  justify-content: center;
}

.sx-map-modal__viewport img{
  /* width: auto; */
  display: table;
  /* height: 100%; */
  /* width: auto; */
  /* border-radius:14px; */
  background:#fff;
  object-fit: contain;
}

.sx-map-modal__actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:18px 22px 22px;
  border-top:1px solid #e5e7eb;
  background:#fff;
}

@media (max-width: 768px){
  .sx-map-modal{ padding:12px; }
  .sx-map-modal__card{ width:100%; max-height:calc(100vh - 24px); border-radius:14px; }
  .sx-map-modal__header{ padding:14px 16px; }
  .sx-map-modal__title{ font-size:18px; }
  .sx-map-modal__viewport{ padding:12px; }
  .sx-map-modal__actions{ padding:14px 16px 16px; flex-direction:column-reverse; }
  .sx-map-modal__actions .btn{ width:100%; }
}