/* Base popup */
.popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 76%);
  z-index: 999;
  align-items: center;
  justify-content: center;
}

/* Activate the targeted popup */
.popup:target {
  display: flex;
}

/* Popup box */
.popup-content {
  /* existing styles... */
  background-color: #5160A9;
  color: #fff;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  overflow: visible;
  border-radius: 10px;
  position: relative;
  padding: 60px 65px;
  column-gap: 70px;

  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;

    border-radius: 17% 9% 5% 9% / 15% 12% 7% 9%;
    clip-path: polygon(1% 12%,2% 4%,9% 3%,100% -8%,106% 0,105% 0,135% 98%,96% 100%,60% 99%,10% 99%,3% 98%,2% 95%);
}

/* Popup box */
.popup-content {
background-color: var(--bg-popup-color);
}

/* Animate the popup container itself */
.popup:target .popup-content {
  animation: popupFadeIn 0.3s ease-out;
}

@keyframes popupFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/* Close button */
.popup-close {
    background: #f1636f;
    border-radius: 100%;
    clip-path: unset;
    color: #fff;
    cursor: pointer;
    font-size: 65px;
    font-weight: 700;
    padding: 18px 27px;
    position: absolute;
    right: -20px;
    text-decoration: none;
    top: -38px;
    z-index: 9999;
    box-shadow: 2px 3px 12px -7px black;
}
.popup-close:hover {
    background: #cb414d;
}

/* Left image column */
.popup-left {
  width: 40%;
}
.popup-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 25px;
}

/* Right content */
.popup-right {
  width: 60%;
  padding: 20px 0;
  overflow-y: auto;
}
h2#modal-name {
 line-height: 2.5rem;
}
.modal-regionWrap{
    font-size: 20px;
    font-weight: 900;
}
.popup-description {
  max-height: 195px;
  overflow-y: auto;
  padding-right: 10px;
  margin-bottom: 25px;
}
.popup-description::-webkit-scrollbar {
  width: 6px;
}
.popup-description::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}

.popup-squiggle{
    background-image: url("data:image/svg+xml,%3Csvg width='210' height='65' viewBox='0 0 210 65' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5489 54.353C20.5831 43.119 32.0476 33.2498 44.6489 24.998L36.8809 21.838C43.0232 37.4845 52.7336 51.481 65.2389 62.713C65.8181 63.2703 66.515 63.6905 67.2781 63.9425C68.0413 64.1946 68.8513 64.2722 69.6485 64.1695C70.4456 64.0668 71.2096 63.7865 71.8839 63.3492C72.5583 62.9119 73.1259 62.3289 73.5449 61.643C83.235 46.7112 94.7637 33.0568 107.86 21.001L98.8339 17.262C98.2887 31.6529 101.764 45.911 108.87 58.437C110.899 62.086 115.87 61.626 118.001 58.437C127.801 43.779 142.035 31.979 157.761 23.455L150.525 21.555L171.779 59.699C173.844 63.406 178.721 62.816 180.91 59.699C188.831 48.4645 197.489 37.7689 206.829 27.683C207.32 27.192 207.709 26.6092 207.975 25.9677C208.241 25.3263 208.377 24.6388 208.377 23.9445C208.377 23.2502 208.241 22.5627 207.975 21.9212C207.709 21.2798 207.32 20.6969 206.829 20.206C206.338 19.715 205.755 19.3256 205.114 19.0599C204.472 18.7942 203.785 18.6574 203.09 18.6574C202.396 18.6574 201.709 18.7942 201.067 19.0599C200.426 19.3256 199.843 19.715 199.352 20.206C189.414 30.9678 180.203 42.3783 171.779 54.362H180.91L159.662 16.221C158.938 15.0279 157.779 14.1628 156.429 13.8083C155.079 13.4538 153.645 13.6376 152.428 14.321C135.157 23.681 119.828 36.709 108.875 53.097H118.006C111.837 42.1928 108.857 29.7742 109.406 17.258C109.629 12.48 103.575 10.549 100.38 13.518C86.6479 26.2204 74.5645 40.5961 64.4129 56.308L72.7129 55.238C61.6799 45.184 52.3489 32.724 47.0699 19.027C45.9199 16.039 42.4029 13.827 39.3019 15.867C25.9236 24.5781 13.7429 35.0027 3.06994 46.875C2.10745 47.8818 1.57031 49.2211 1.57031 50.614C1.57031 52.0069 2.10745 53.3461 3.06994 54.353C4.99994 56.285 8.64394 56.496 10.5489 54.353Z' fill='%23F1636F'/%3E%3Cpath d='M73.6169 15.594C73.6169 8.79399 63.0449 8.78099 63.0449 15.594C63.0449 22.407 73.6169 22.406 73.6169 15.594Z' fill='%23FDBF59'/%3E%3Cpath d='M36.8005 58.26C36.8005 51.46 26.2305 51.448 26.2305 58.26C26.2305 65.072 36.8005 65.074 36.8005 58.26Z' fill='%23FDBF59'/%3E%3Cpath d='M10.863 15.594C10.863 8.79399 0.292969 8.78099 0.292969 15.594C0.292969 22.407 10.863 22.406 10.863 15.594Z' fill='%23FDBF59'/%3E%3Cpath d='M99.5544 58.26C99.5544 51.46 88.9844 51.448 88.9844 58.26C88.9844 65.072 99.5544 65.074 99.5544 58.26Z' fill='%23FDBF59'/%3E%3Cpath d='M150.593 55.756C150.593 48.956 140.023 48.943 140.023 55.756C140.023 62.569 150.593 62.568 150.593 55.756Z' fill='%23FDBF59'/%3E%3Cpath d='M133.021 5.54797C133.021 -1.25203 122.451 -1.26403 122.451 5.54797C122.451 12.36 133.021 12.361 133.021 5.54797Z' fill='%23FDBF59'/%3E%3Cpath d='M187.408 20.608C187.408 13.808 176.838 13.795 176.838 20.608C176.838 27.421 187.408 27.422 187.408 20.608Z' fill='%23FDBF59'/%3E%3Cpath d='M210.002 54.919C210.002 48.119 199.43 48.105 199.43 54.919C199.43 61.733 210.002 61.731 210.002 54.919Z' fill='%23FDBF59'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    height: 63px;
    width: 210px;
}

.popup-description {
    --scrollbar-color-thumb: #FFFFFF#;
    --scrollbar-color-track: #5160A9#;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 15px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .popup-description {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .popup-description::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .popup-description::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .popup-description::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

/* Add animation keyframes */
@keyframes popupFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


@media only screen and (max-width: 580px) {
    .popup-content{
      padding: 40px 30px;
      flex-direction: column;
      border-radius: 11% 8% 7% 9% / 12% 12% 8% 9%;
      clip-path: polygon(1% 8%, 0% 0%, 0% 2%, 100% -10%, 106% 0, 105% 0, 135% 98%, 96% 100%, 60% 99%, 10% 99%, 3% 98%, 2% 95%);
    }
    .popup-close{
      padding: 15px 19px;
      right: 3px;
      top: -20px;
      font-size: 30px;
    }
    .popup-left {
      width: 100%;
    }
    .popup-right {
      width: 100%;
      padding-bottom: 0;
    }
    .popup-left img {
      height: 250px;
      width: auto;
    }
    .popup-squiggle{
      display: none;
    }
}